/* =========================================================
   HireSphere Careers — public site components
   Same design tokens as the admin dashboard (variables.css),
   different layout language: marketing hero, job listings,
   filters, application form — not a dashboard shell.
   ========================================================= */

/* ---- Skip link ---- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand-primary); color: #fff;
  padding: 10px 16px; border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--glass-bg);
  border-bottom: 1px solid var(--border-subtle);
  transition: box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) 0;
}
.brand { display: flex; align-items: center; gap: var(--sp-3); }
.brand__mark {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  background: var(--brand-primary);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg);
  flex-shrink: 0;
}
.brand__mark img { width: 100%; height: 100%; border-radius: var(--radius-sm); object-fit: cover; }
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); letter-spacing: -0.005em; }
.brand__name span { color: var(--brand-gold); }

.site-nav { display: flex; align-items: center; gap: var(--sp-6); }
.site-nav__links { display: flex; align-items: center; gap: var(--sp-1); }
.site-nav__links a {
  position: relative;
  font-weight: 600; font-size: var(--fs-sm); color: var(--text-secondary);
  padding: 8px 14px; border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.site-nav__links a:hover { color: var(--text-primary); background: var(--bg-subtle); }
.site-nav__links a[aria-current="page"] { color: var(--accent-text); background: var(--brand-primary-100); }

.theme-toggle {
  position: relative;
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-subtle); color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  transition: all var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { background: var(--bg-hover); color: var(--accent-text); }
.theme-toggle svg { width: 18px; height: 18px; }

/* ---- Shared icon-utility spec — search / saved-jobs share this with
   theme-toggle and the notification bell so the whole cluster reads as
   one family (size, radius, background, hover, focus-visible). ---- */
.site-nav__utility { display: flex; align-items: center; gap: var(--sp-2); }
.icon-utility-btn {
  position: relative;
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-subtle); color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  transition: all var(--dur-fast) var(--ease-out);
}
.icon-utility-btn:hover { background: var(--bg-hover); color: var(--accent-text); }
.icon-utility-btn svg { width: 18px; height: 18px; }

/* ---- Hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  margin: var(--sp-5) var(--sp-6) 0;
  padding: var(--sp-20) var(--sp-4) var(--sp-14);
  border-radius: var(--radius-xl);
  background: var(--ink-900);
  isolation: isolate;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
  z-index: 0; pointer-events: none;
}
.hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-12);
  align-items: center;
  max-width: var(--page-max); margin: 0 auto; padding: 0 var(--sp-4);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 14px; border-radius: var(--radius-sm);
  margin-bottom: var(--sp-5);
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-gold-400);
}
.hero h1 {
  font-size: clamp(2.4rem, 4.6vw, var(--fs-4xl));
  line-height: 1.08;
  color: #fff;
  margin-bottom: var(--sp-5);
}
.hero h1 em {
  font-style: italic;
  color: var(--brand-gold-400);
}
.hero p.lede {
  font-size: var(--fs-md); color: var(--ink-text-secondary); max-width: 46ch;
  margin-bottom: var(--sp-8); line-height: 1.6;
}
.hero__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-10); }
.hero .btn-secondary { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.16); }
.hero .btn-secondary:hover { background: rgba(255,255,255,0.12); }

/* ---- Pipeline ledger — signature motif. A quiet strip naming the
   platform's real hiring stages, reused wherever we want to say
   "this is a real, tracked process" without decorative shapes. ---- */
.ledger-strip {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-text-tertiary);
  margin-bottom: var(--sp-8); flex-wrap: wrap;
}
.ledger-strip__step { display: flex; align-items: center; gap: var(--sp-2); }
.ledger-strip__step::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-text-tertiary);
}
.ledger-strip__step.is-active { color: var(--brand-gold-400); }
.ledger-strip__step.is-active::before { background: var(--brand-gold-400); }
.ledger-strip__sep { color: var(--ink-text-tertiary); opacity: 0.5; }

.hero__stats { display: flex; gap: var(--sp-8); }
.hero__stat-num {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-2xl);
  color: #fff; line-height: 1;
}
.hero__stat-label { font-size: var(--fs-xs); color: var(--ink-text-tertiary); margin-top: var(--sp-1); }

.hero__trust { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
/* Reuses the same .trusted-logo / .trusted-marquee__item markup (and
   the same trustedPartners data) as the marquee lower on the page —
   just resized for this compact inline row and re-tinted for the
   always-dark hero background instead of the light marquee card. */
.hero__trust-logos { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.hero__trust-logos .trusted-logo, .hero__trust-logos .trusted-marquee__item { height: 22px; min-width: 0; padding: 0; background: none; border: none; box-shadow: none; }
.hero__trust-logos .trusted-logo:hover, .hero__trust-logos .trusted-logo:focus-visible,
.hero__trust-logos .trusted-marquee__item:hover, .hero__trust-logos .trusted-marquee__item:focus-visible { box-shadow: none; transform: none; border-color: transparent; }
.hero__trust-logos .trusted-logo img { max-width: 76px; filter: grayscale(1) brightness(0) invert(1) opacity(0.55); transition: filter var(--dur-base) var(--ease-out); }
.hero__trust-logos .trusted-logo:hover img, .hero__trust-logos .trusted-logo:focus-visible img { filter: grayscale(1) brightness(0) invert(1) opacity(0.9); }
.hero__trust-logos .trusted-marquee__item { font-size: var(--fs-sm); color: rgba(255,255,255,0.55); opacity: 1; white-space: nowrap; }
.hero__trust-logos .trusted-marquee__item:hover { opacity: 1; color: rgba(255,255,255,0.9); }
.hero__trust p { color: var(--ink-text-secondary); font-size: var(--fs-xs); }
.hero__trust strong { color: #fff; }

/* Floating job-card preview stack in the hero — flat cards, hairline
   borders, no glass blur; a real data preview, not a decorative shape. */
.hero__stack { position: relative; height: 340px; z-index: 2; }
.hero__stack-card {
  position: absolute; width: 82%; left: 9%;
  background: var(--ink-800);
  border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg);
  padding: var(--sp-5);
  --tilt: -3deg;
}
.hero__stack-card:nth-child(1) { top: 0; z-index: 3; --tilt: -2deg; animation-delay: 0s; }
.hero__stack-card:nth-child(2) { top: 78px; left: 13%; z-index: 2; --tilt: 2deg; opacity: 0.92; animation-delay: 0.4s; }
.hero__stack-card:nth-child(3) { top: 156px; left: 5%; z-index: 1; --tilt: -1.5deg; opacity: 0.8; animation-delay: 0.8s; }
.hero__stack-card .badge { margin-bottom: var(--sp-2); }
.hero__stack-card h4 { font-size: var(--fs-base); margin-bottom: var(--sp-1); color: #fff; }
.hero__stack-card .meta { font-size: var(--fs-xs); color: var(--ink-text-tertiary); }

@media (max-width: 720px) {
  .hero { margin: var(--sp-3) var(--sp-3) 0; padding: var(--sp-12) var(--sp-2) var(--sp-10); border-radius: var(--radius-lg); }
}

/* ---- Section shell ---- */
.section { padding: var(--sp-16) 0; }
/* A gentle full-bleed tint (not a new color — just the existing subtle
   surface token) so "How it works" reads as its own zone rather than a
   repeat of the plain-canvas card grid used later for "Why HireSphere". */
.section--tinted { background: var(--bg-subtle); }
.section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--sp-10); gap: var(--sp-4); flex-wrap: wrap;
}
.section__head h2 { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
.section__head p { color: var(--text-secondary); margin-top: var(--sp-2); }

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: var(--radius-full);
}
.badge-primary { background: var(--brand-primary-100); color: var(--accent-text); }
.badge-accent { background: var(--brand-accent-100); color: var(--tint-accent-text); }
.badge-neutral { background: var(--bg-subtle); color: var(--text-secondary); }
.badge-featured {
  background: var(--brand-gold-700); color: #fff;
}

/* ---- Job list (list-style rows) ---- */
.job-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.job-row {
  display: grid; grid-template-columns: 4px 1fr auto;
  align-items: center; gap: var(--sp-5);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--sp-5) var(--sp-6);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.job-row:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.job-row__accent { align-self: stretch; border-radius: var(--radius-full); background: var(--brand-accent); }
.job-row__accent.is-featured { background: var(--brand-gold); }
.job-row__main h3 { font-size: var(--fs-lg); margin-bottom: 2px; letter-spacing: -0.01em; }
.job-row__company { font-size: var(--fs-xs); color: var(--text-tertiary); margin-bottom: var(--sp-2); }
.job-row__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--text-tertiary); }
.job-row__meta span { display: inline-flex; align-items: center; gap: 5px; }
.job-row__meta svg { width: 14px; height: 14px; }
.job-row__badges { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.job-row__cta { display: flex; align-items: center; gap: var(--sp-4); }
.job-row__salary { font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); font-size: var(--fs-sm); text-align: right; white-space: nowrap; }

@media (max-width: 720px) {
  .job-row { grid-template-columns: 4px 1fr; }
  .job-row__cta { grid-column: 1 / -1; justify-content: space-between; margin-top: var(--sp-3); }
}

/* ---- Filters ---- */
.filters {
  position: sticky; top: 73px; z-index: 40;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: var(--sp-4); margin-bottom: var(--sp-8);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-3);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 860px) { .filters { grid-template-columns: 1fr 1fr; position: static; } }
@media (max-width: 520px) { .filters { grid-template-columns: 1fr; } }

/* ---- "Clear all" link next to the result count (4.2) ---- */
.careers-result-row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.clear-all-filters {
  background: none; border: none; padding: 0; margin-top: var(--sp-2);
  color: var(--accent-text); font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.clear-all-filters:hover { color: var(--tint-accent-text); }
.page-hero .clear-all-filters { color: var(--brand-gold-400); }
.page-hero .clear-all-filters:hover { color: var(--brand-gold-100); }

/* ---- Mobile "Filters" trigger button + active-filter badge (4.3) ---- */
.filters-trigger {
  display: none; align-items: center; gap: 8px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 10px 16px; margin-bottom: var(--sp-6);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); cursor: pointer;
}
.filters-trigger svg { width: 17px; height: 17px; }
.filters-trigger__badge { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-accent); }
.page-hero .filters-trigger { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color: #fff; }

/* ---- Sheet chrome: backdrop, close button, header, footer button ----
   Below 767px the filter panel is a true full-screen modal (not a
   partial bottom sheet): it fully occupies the viewport, fully hides
   the job list behind it, and blocks background scroll/interaction
   entirely — matching the LinkedIn/Indeed/Airbnb/Google Maps pattern
   the filter button should feel like. */
.filters-backdrop { display: none; position: fixed; inset: 0; background: rgba(4,6,11,0.55); z-index: 199; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.filters-backdrop:not([hidden]) { display: block; }
.filters-backdrop.is-open { opacity: 1; }
.filters__sheet-header { display: none; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); flex-shrink: 0; }
.filters__sheet-header h3 { font-size: var(--fs-lg); }
.filters__close {
  width: 44px; height: 44px; border-radius: var(--radius-full); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-subtle); color: var(--text-secondary); border: none; cursor: pointer;
}
.filters__close svg { width: 18px; height: 18px; }
.filters__done { display: none; }
.filters__drag-handle { display: none; }

@media (max-width: 767px) {
  .filters-trigger { display: inline-flex; min-height: 44px; }

  /* Full-screen modal: covers the entire viewport, sits above everything,
     and is the only thing the user can see or scroll while it's open.
     Uses the dedicated --filter-sheet-* tokens (see variables.css)
     instead of any --bg-page/--bg-surface page token, so the sheet is
     always its own opaque, elevated surface — never a continuation of
     whatever the page underneath happens to be. isolation:isolate pins
     it to its own stacking context so nothing beneath can paint through
     or above it regardless of ancestor stacking quirks. */
  .filters {
    position: fixed; inset: 0; z-index: 200;
    isolation: isolate;
    width: 100%; max-width: 100%; height: 100%; max-height: none;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex; flex-direction: column;
    grid-template-columns: 1fr; gap: var(--sp-4);
    border-radius: 0;
    padding: calc(var(--sp-5) + env(safe-area-inset-top, 0px)) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
    margin-bottom: 0;
    background: var(--filter-sheet-bg);
    border: 1px solid var(--filter-sheet-border);
    box-shadow: var(--filter-sheet-shadow);
    backdrop-filter: blur(var(--filter-sheet-blur));
    -webkit-backdrop-filter: blur(var(--filter-sheet-blur));
    transform: translateY(100%);
    transition: transform var(--dur-base) var(--ease-out);
    touch-action: pan-y;
  }
  .filters.is-open { transform: translateY(0); }
  .filters__sheet-header { display: flex; }
  .filters__done {
    display: block; margin-top: auto; position: sticky; bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
    min-height: 48px;
  }
  /* Small grabber above the header — a visual affordance for the
     swipe-down-to-close gesture bound in careers.js. */
  .filters__drag-handle {
    display: block; width: 36px; height: 4px; border-radius: var(--radius-full);
    background: var(--border-strong, var(--border-subtle)); margin: 0 auto var(--sp-3);
    flex-shrink: 0;
  }

  /* Override the ".page-hero .filters" glassy-bar rule below, which is
     more specific (two classes) than the plain ".filters" full-screen
     modal rule above and was winning on mobile — making the modal
     background almost fully transparent and letting the hero, header,
     and job cards behind it show through. On mobile the filter panel
     must always be the same fully opaque, blurred filter-sheet surface,
     hero page or not — never the transparent desktop glass effect. */
  .page-hero .filters {
    background: var(--filter-sheet-bg);
    border-color: var(--filter-sheet-border);
    backdrop-filter: blur(var(--filter-sheet-blur));
    -webkit-backdrop-filter: blur(var(--filter-sheet-blur));
  }
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-2xs); font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.input, .select, textarea.textarea {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 11px 14px; font-size: var(--fs-sm);
  color: var(--text-primary); width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input:focus, .select:focus, textarea.textarea:focus { border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--brand-primary-100); outline: none; }
.search-field { position: relative; }
.search-field svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-tertiary);
}
.search-field .input { padding-left: 38px; }

/* ---- "View more" progressive loading ---- */
.pager { display: flex; align-items: center; justify-content: center; margin-top: var(--sp-8); }
.view-more-btn {
  min-height: 46px; padding: 12px 28px; border-radius: var(--radius-md);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  color: var(--text-primary); font-size: var(--fs-sm); font-weight: 700;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  max-width: 100%;
}
.view-more-btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.view-more-btn:active { transform: translateY(1px); }
/* Done-state: replaces the button once every filtered job is on screen.
   Same shape/spacing as the button so layout doesn't jump, but visually
   inert — muted text, no hover/press feedback, not a <button>. */
.view-more-btn--done {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); cursor: default; font-weight: 600;
  background: var(--bg-subtle); border-color: var(--border-subtle);
}
.view-more-btn--done:hover { background: var(--bg-subtle); border-color: var(--border-subtle); }
@media (max-width: 520px) {
  .pager { width: 100%; }
  .view-more-btn { width: 100%; }
}

/* ---- Empty / error states ---- */
.state-block {
  text-align: center; padding: var(--sp-16) var(--sp-6);
  color: var(--text-secondary);
}
.state-block__icon {
  width: 56px; height: 56px; margin: 0 auto var(--sp-4);
  border-radius: var(--radius-full); background: var(--bg-subtle);
  display: flex; align-items: center; justify-content: center; color: var(--text-tertiary);
}
.state-block__icon svg { width: 26px; height: 26px; }
.state-block h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); color: var(--text-primary); }

/* ---- Skeletons ---- */
.skel { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--bg-hover) 50%, var(--bg-subtle) 75%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.skel-row { height: 96px; border-radius: var(--radius-md); }
.skel-stack { display: flex; flex-direction: column; }

/* ---- Job detail ---- */
.job-detail { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-10); align-items: start; }
@media (max-width: 900px) {
  .job-detail { grid-template-columns: 1fr; }
  /* Sticky only makes sense while .apply-card has its own side column
     to float alongside; once the grid collapses to one column it
     becomes the last block in normal flow, and leaving position:sticky
     on could pin it awkwardly mid-scroll. */
  .apply-card { position: static; top: auto; }
}
.job-detail__header { margin-bottom: var(--sp-8); }
.job-detail__header h1 { font-size: var(--fs-2xl); margin: var(--sp-3) 0 var(--sp-4); letter-spacing: -0.02em; }
.job-detail__badges { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.job-detail__meta { display: flex; flex-wrap: wrap; gap: var(--sp-5); color: var(--text-secondary); font-size: var(--fs-sm); }
.job-detail__meta span { display: inline-flex; align-items: center; gap: 6px; }
.job-detail__meta svg { width: 16px; height: 16px; color: var(--text-tertiary); }
/* Deadline is time-sensitive, unlike the other static metadata items —
   weight + the existing warning token (no new color, no new size) so
   it reads with more urgency at a glance. */
.job-detail__meta-deadline { color: var(--color-warning); font-weight: 700; }
.job-detail__meta-deadline svg { color: var(--color-warning); }

.job-detail__section { margin-bottom: var(--sp-8); }
.job-detail__section h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.job-detail__section p { color: var(--text-secondary); line-height: 1.7; }
.job-detail__list { display: flex; flex-direction: column; gap: var(--sp-2); }
.job-detail__list li { display: flex; gap: var(--sp-2); color: var(--text-secondary); line-height: 1.6; }
.job-detail__list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-accent); margin-top: 9px; flex-shrink: 0; }

.apply-card {
  position: sticky; top: 100px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--sp-6);
  box-shadow: var(--shadow-lg);
  position: sticky;
}
.apply-card__salary { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-xl); margin-bottom: var(--sp-1); color: var(--accent-text); }
.apply-card__label { font-size: var(--fs-xs); color: var(--text-tertiary); margin-bottom: var(--sp-5); }
.apply-card dl { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.apply-card dl div { display: flex; justify-content: space-between; font-size: var(--fs-sm); }
.apply-card dt { color: var(--text-tertiary); }
.apply-card dd { font-weight: 600; }

/* ---- Application form ---- */
.form-card {
  max-width: 640px; margin: 0 auto;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: var(--sp-8);
  box-shadow: var(--shadow-lg);
}
/* Identity verification carries more weight for the user than a generic
   content page — a trust badge + a set-apart reassurance note give it
   presence without changing what the step actually requires (6.8). */
.verify-trust-badge {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  background: var(--brand-primary-100); color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-5);
}
.verify-trust-badge svg { width: 26px; height: 26px; }
.verify-trust-note {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  background: var(--bg-subtle); border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5); margin: var(--sp-2) 0 var(--sp-6);
  color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.6;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-grid .field.full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

.file-drop {
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md);
  padding: var(--sp-6); text-align: center; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.file-drop:hover { border-color: var(--accent-text); background: var(--bg-subtle); }
.file-drop.is-dragover { border-style: solid; border-color: var(--accent-text); background: var(--brand-primary-100); }
.file-drop.has-file { border-style: solid; border-color: var(--brand-accent); background: var(--brand-accent-100); }
.file-drop svg { width: 26px; height: 26px; color: var(--text-tertiary); margin: 0 auto var(--sp-2); }
.file-drop small { display: block; color: var(--text-tertiary); margin-top: var(--sp-1); }
.file-drop__empty { display: block; width: 100%; cursor: pointer; background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: center; }

/* "Selected" state — filename + size + checkmark (resume) or thumbnail
   (photo), matching spacing/radius/iconography between the two zones. */
.file-drop__selected { display: flex; align-items: center; gap: var(--sp-3); text-align: left; cursor: pointer; }
.file-drop__selected-check {
  width: 40px; height: 40px; border-radius: var(--radius-full); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-accent); color: #fff;
}
.file-drop__selected-check svg { width: 20px; height: 20px; margin: 0; color: inherit; }
.file-drop__selected-thumb {
  width: 44px; height: 44px; border-radius: var(--radius-sm); flex-shrink: 0; overflow: hidden;
  background: var(--bg-surface); display: flex; align-items: center; justify-content: center;
}
.file-drop__selected-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-drop__selected-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.file-drop__selected-info strong { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-drop__selected-info small { display: block; color: var(--text-tertiary); font-size: var(--fs-2xs); margin-top: 0; }
.file-drop__remove {
  width: 30px; height: 30px; border-radius: var(--radius-full); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--text-secondary);
  cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
}
.file-drop__remove svg { width: 14px; height: 14px; }
.file-drop__remove:hover { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }

/* ---- Apply form: required note + section grouping (6.5, 6.6) ---- */
.form-required-note { font-size: var(--fs-xs); color: var(--text-tertiary); margin-bottom: var(--sp-6); }
.form-section { margin-bottom: var(--sp-8); padding-bottom: var(--sp-8); border-bottom: 1px solid var(--border-subtle); }
.form-section:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.form-section__title { font-size: var(--fs-lg); margin-bottom: var(--sp-5); letter-spacing: -0.01em; }

.field-error { font-size: var(--fs-2xs); color: var(--color-danger); margin-top: 2px; min-height: 14px; }
.form-alert {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); border-radius: var(--radius-sm); font-size: var(--fs-sm);
  margin-bottom: var(--sp-5);
}
.form-alert.error { background: rgba(220,38,38,0.08); color: var(--color-danger); }
.form-alert.success { background: var(--brand-accent-100); color: var(--tint-accent-text); }

.success-block { text-align: center; padding: var(--sp-10) 0; animation: scaleIn var(--dur-slow) var(--ease-spring); }
.success-block__icon {
  width: 64px; height: 64px; margin: 0 auto var(--sp-5); border-radius: 50%;
  background: var(--brand-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.success-block__icon svg { width: 30px; height: 30px; }

/* ---- Footer ---- */
.site-footer {
  background: var(--ink-900); color: var(--ink-text-secondary);
  padding: var(--sp-16) 0 var(--sp-8); margin-top: var(--sp-16);
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--brand-gold);
}
.site-footer .brand__name { color: #fff; }
.site-footer .brand__name span { color: var(--brand-gold-400); }
.site-footer__grid { display: flex; justify-content: space-between; gap: var(--sp-8); flex-wrap: wrap; margin-bottom: var(--sp-10); }
.site-footer__about p { color: var(--ink-text-secondary); max-width: 42ch; margin-top: var(--sp-3); line-height: 1.6; }
.site-footer__links { display: flex; gap: var(--sp-10); flex-wrap: wrap; }
.site-footer__col h5 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-text-tertiary); margin-bottom: var(--sp-3); }
.site-footer__col a, .site-footer__col span { display: block; color: var(--ink-text-secondary); font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.site-footer__col a:hover { color: var(--brand-accent-400); }
.site-footer__bottom { border-top: 1px solid var(--ink-border); padding-top: var(--sp-6); font-size: var(--fs-xs); color: var(--ink-text-tertiary); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); }

/* ---- Toast ---- */
.toast-stack { position: fixed; bottom: var(--sp-6); right: var(--sp-6); z-index: 300; display: flex; flex-direction: column; gap: var(--sp-3); }
.toast {
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm);
  animation: toastIn var(--dur-base) var(--ease-out);
  /* Fluid instead of a flat 320px — on very narrow phones (≤360px) a
     fixed 320px card plus the stack's right-edge offset could push
     past the left edge of the viewport. */
  width: 100%;
  max-width: min(320px, calc(100vw - 2 * var(--sp-6)));
}
.toast.error { border-left: 3px solid var(--color-danger); }
.toast.success { border-left: 3px solid var(--brand-accent); }

@media (max-width: 720px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__stack { height: 240px; margin-top: var(--sp-6); }
}

/* =========================================================
   Buttons — the public site referenced .btn classes from day
   one but never defined them (they rendered as plain text).
   Ported from the admin dashboard's component language so both
   codebases speak the same design tokens.
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: 11px 20px;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: scale(0.97); }
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--brand-gold-700);
  color: #fff;
}
.btn-primary:hover { background: var(--brand-gold-700); filter: brightness(0.9); }

.btn-accent {
  background: var(--brand-accent);
  color: #fff;
}
.btn-accent:hover { background: var(--brand-accent-600); }

.btn-secondary {
  background: var(--bg-subtle);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}
.btn-secondary:hover { background: var(--bg-hover); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--bg-subtle); color: var(--text-primary); }

/* Light button for the ink CTA banner / newsletter panel */
.btn-light {
  background: #fff;
  color: var(--brand-primary);
}
.btn-light:hover { background: var(--brand-primary-100); }

.btn-sm { padding: 8px 14px; font-size: var(--fs-xs); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* =========================================================
   Homepage sections (Phase A rebuild)
   ========================================================= */

/* ---- Platform stats strip — flat, ledger-style: hairline dividers
   instead of individual shadowed cards, echoing the pipeline-ledger
   motif from the hero rather than looking like more dashboard tiles. ---- */
.stats-strip { padding: var(--sp-10) 0 var(--sp-16); margin-top: calc(-1 * var(--sp-10)); position: relative; z-index: 3; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.stat-item {
  padding: var(--sp-6);
  border-left: 1px solid var(--border-subtle);
}
.stat-item:first-child { border-left: none; }
.stat-item__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: var(--accent-text);
  line-height: 1;
}
.stat-item__label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-top: var(--sp-2);
}
.skel-stat { height: 94px; border-radius: 0; }
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2n+1) { border-left: none; }
}

/* ---- How it works ---- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  position: relative;
}
.step-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-8) var(--sp-6);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.step-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.step-card__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--brand-primary);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-5);
}
.step-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); letter-spacing: -0.01em; }
.step-card p { color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.65; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
@media (min-width: 861px) {
  .step-card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 39px;
    right: calc(-1 * var(--sp-5) - 1px);
    width: var(--sp-5);
    height: 2px;
    background: var(--border-strong);
  }
}

/* ---- Browse by category ---- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.category-tile {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.category-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.category-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--brand-primary-100);
  color: var(--accent-text);
  font-weight: 700;
  font-size: var(--fs-md);
  margin-bottom: var(--sp-4);
}
.category-tile__name { font-weight: 700; font-size: var(--fs-base); letter-spacing: -0.01em; }
.category-tile__count { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: var(--sp-1); }
@media (max-width: 900px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .category-grid { grid-template-columns: 1fr; } }

/* ---- Testimonials ---- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-8) var(--sp-6);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.testimonial-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.testimonial-card__stars { display: flex; gap: 3px; color: var(--brand-gold); margin-bottom: var(--sp-4); }
.testimonial-card__stars svg { width: 15px; height: 15px; }
.testimonial-card blockquote {
  margin: 0 0 var(--sp-5);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.7;
  flex: 1;
}
.testimonial-card figcaption { display: flex; align-items: center; gap: var(--sp-3); }
.testimonial-card__name { font-weight: 700; font-size: var(--fs-sm); display: block; }
.testimonial-card__role { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; display: block; }
@media (max-width: 860px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* ---- Final CTA banner ---- */
.cta-banner {
  position: relative;
  overflow: hidden;
  text-align: center;
  border-radius: var(--radius-xl);
  padding: var(--sp-16) var(--sp-8);
  background: var(--ink-900);
}
.cta-banner::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--brand-gold);
}
.cta-banner h2 { color: #fff; font-size: var(--fs-2xl); margin-bottom: var(--sp-3); position: relative; }
.cta-banner p { color: rgba(255, 255, 255, 0.7); margin-bottom: var(--sp-8); position: relative; }
.cta-banner .btn { position: relative; }

/* =========================================================
   Phase 1B additions — auth-aware header, job-row actions,
   floating hero shapes, premium micro-interactions
   ========================================================= */

/* ---- Header nav additions ---- */
.site-nav { gap: var(--sp-4); }
.site-nav__actions { display: flex; align-items: center; gap: var(--sp-3); }
.skel-avatar-placeholder { display: inline-block; width: 84px; height: 34px; border-radius: var(--radius-full); }

.nav-burger {
  position: relative;
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 38px; height: 38px; border-radius: var(--radius-sm);
}
.nav-burger span { width: 20px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.nav-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* These render at 38px to match the app's existing icon scale, but get
   an invisible +3px/side hit-area so the effective tap target is the
   recommended 44px — confirmed to leave 10px of clear space against
   the 16px gap between adjacent header icons, so this can't cause
   mis-taps (6.9). */
.theme-toggle::after, .notif-trigger::after, .icon-utility-btn::after, .nav-burger::after {
  content: "";
  position: absolute;
  inset: -3px;
}
/* nav-burger is always the rightmost icon once visible, and the mobile
   header bar's own padding is reduced at narrow widths — so unlike the
   other icons (which always have a neighbor's gap to expand into), its
   hit-slop must not grow rightward or it pushes past the viewport edge. */
.nav-burger::after { right: 0; }

.mobile-drawer {
  display: none;
  flex-direction: column; gap: var(--sp-1);
  max-height: 0; overflow: hidden;
  background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle);
  transition: max-height var(--dur-slow) var(--ease-out);
}
.mobile-drawer.is-open {
  max-height: min(480px, calc(100vh - 64px));
  max-height: min(480px, calc(100dvh - 64px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-drawer a, .mobile-drawer button { padding: var(--sp-4) var(--sp-6); font-weight: 600; font-size: var(--fs-sm); border-bottom: 1px solid var(--border-subtle); text-align: left; }
.mobile-drawer__actions { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); }
body.no-scroll { overflow: hidden; }

/* ---- Avatar / user menu ---- */
.avatar {
  position: relative;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-primary);
  color: #fff; font-weight: 700; font-size: var(--fs-xs);
  overflow: hidden; flex-shrink: 0;
}
/* Initials render as the element's own text (behind the photo); if the
   photo 404s, JS removes the <img>, and the initials are already there
   underneath — no broken-image icon ever shows. */
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 44px; height: 44px; font-size: var(--fs-sm); }
.avatar-xl { width: 84px; height: 84px; font-size: var(--fs-xl); position: relative; z-index: 1; }

/* ---- Company / employer logo tile ---- */
.company-logo {
  position: relative;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-subtle); color: var(--text-tertiary);
  overflow: hidden; flex-shrink: 0;
}
.company-logo__fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.company-logo__fallback svg { width: 45%; height: 45%; }
.company-logo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #fff; padding: 12%;
}

.user-menu { position: relative; }
.user-menu__trigger { border-radius: 50%; transition: box-shadow var(--dur-fast) var(--ease-out); }
.user-menu__trigger:hover { box-shadow: 0 0 0 3px var(--brand-primary-100); }
.user-menu__panel {
  position: absolute; right: 0; top: calc(100% + 12px);
  width: 240px; background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: var(--sp-2);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all var(--dur-fast) var(--ease-out);
  z-index: 150;
}
.user-menu__panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.user-menu__id { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--sp-2); }
.user-menu__id strong { display: block; font-size: var(--fs-sm); }
.user-menu__id small { color: var(--text-tertiary); font-size: var(--fs-2xs); word-break: break-all; }
.user-menu__panel a, .user-menu__panel button {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-secondary);
}
.user-menu__panel a:hover, .user-menu__panel button:hover { background: var(--bg-subtle); color: var(--text-primary); }

@media (max-width: 860px) {
  .site-nav__links, .site-nav__actions, .site-nav__utility { display: none; }
  .nav-burger { display: flex; }
  .mobile-drawer { display: flex; }
}

/* ---- Job row icon actions ---- */
.job-row { position: relative; }
.job-row__link { position: absolute; inset: 0; z-index: 1; }
.job-row__main, .job-row__cta { position: relative; z-index: 2; pointer-events: none; }
.job-row__main a, .job-row__cta a, .job-row__cta button { pointer-events: auto; }
.job-row__main h3 a { color: inherit; }
.job-row__icon-actions { display: flex; gap: var(--sp-1); }
.icon-btn {
  width: 36px; height: 36px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-subtle); color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--bg-hover); color: var(--accent-text); }
.icon-btn.is-saved { background: var(--brand-accent-100); color: var(--tint-accent-text); }
.icon-btn.is-saved svg { fill: currentColor; }

.apply-card__icon-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.apply-card__icon-actions .icon-btn {
  width: auto; height: auto; flex: 1; gap: 6px; font-size: var(--fs-xs); font-weight: 700;
  padding: 10px 12px; border-radius: var(--radius-full);
  border: 1.5px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-primary);
}
.apply-card__icon-actions .icon-btn:hover { border-color: var(--accent-text); background: var(--bg-subtle); }
.apply-card__icon-actions .icon-btn.is-saved { border-color: var(--brand-accent); }

/* ---- Checkbox ---- */
.checkbox { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-secondary); cursor: pointer; }
.checkbox input { width: 17px; height: 17px; accent-color: var(--accent-text); cursor: pointer; }
.checkbox-terms { align-items: flex-start; margin-top: var(--sp-2); }
.checkbox-terms input { flex-shrink: 0; margin-top: 2px; }
.checkbox-terms span { line-height: 1.5; }
.legal-link { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.legal-link:hover { color: var(--tint-accent-text); }
.legal-link:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; border-radius: 2px; }
.link-btn { color: var(--accent-text); font-weight: 700; font-size: var(--fs-xs); }
.link-btn:hover { text-decoration: underline; }

/* Decorative floating blob shapes removed — see .ledger-strip in the
   hero for the new signature element instead. */

/* ---- Trusted-by marquee ---- */
.trusted-strip { padding: var(--sp-10) 0 var(--sp-6); overflow: hidden; }
.trusted-strip__eyebrow { text-align: center; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--sp-2); }
.trusted-strip__label { text-align: center; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); color: var(--text-primary); margin-bottom: var(--sp-2); }
.trusted-strip__sub { text-align: center; font-size: var(--fs-sm); color: var(--text-secondary); max-width: 480px; margin: 0 auto var(--sp-7); }
.trusted-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.trusted-marquee:hover .trusted-marquee__track { animation-play-state: paused; }
.trusted-marquee__track { display: flex; align-items: stretch; gap: var(--sp-5); width: max-content; animation: marquee 28s linear infinite; padding: var(--sp-1) 0 var(--sp-2); }

/* Card shell — shared by both the image logo (.trusted-logo) and the
   text-only fallback (.trusted-marquee__item, used when a partner has
   no logo yet) so the row reads as one consistent set of premium
   cards regardless of which partners have uploaded artwork. Card
   surface/border/shadow use the same theme tokens as the rest of the
   site, so it adapts automatically between Light and Dark Mode. */
.trusted-logo, .trusted-marquee__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  min-width: 152px;
  padding: 0 var(--sp-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

/* Text-only fallback typography, inside the shared card shell above. */
.trusted-marquee__item { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); color: var(--text-tertiary); white-space: nowrap; }

/* Logo card — used once a partner has a logo image set in the admin
   dashboard. No grayscale/opacity/brightness filter here on purpose:
   logos render at full color and full clarity, in both themes. The
   card's own background/border is what provides contrast instead. */
.trusted-logo img { max-height: 44px; max-width: 132px; width: auto; height: auto; object-fit: contain; }

.trusted-logo:hover, .trusted-logo:focus-visible,
.trusted-marquee__item:hover, .trusted-marquee__item:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--border-strong);
}
a.trusted-logo { cursor: pointer; }
a.trusted-logo:focus-visible, a.trusted-marquee__item:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }

/* Grid fallback for a short, curated partner list — a real responsive
   grid (not just wrapped flex) so cards resize evenly with no
   overflow and no horizontal scrolling at any viewport width. */
.trusted-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: var(--sp-5); max-width: 900px; margin: 0 auto; }
.trusted-grid .trusted-logo, .trusted-grid .trusted-marquee__item { width: 100%; min-width: 0; }

@media (max-width: 900px) {
  .trusted-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--sp-4); }
}

@media (max-width: 640px) {
  .trusted-logo, .trusted-marquee__item { height: 68px; min-width: 116px; padding: 0 var(--sp-4); }
  .trusted-logo img { max-height: 32px; max-width: 92px; }
  .trusted-marquee__item { font-size: var(--fs-base); }
  .trusted-marquee__track { gap: var(--sp-3); }
  .trusted-grid { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: var(--sp-3); }
}

/* ---- Why HireSphere ---- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.why-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-8) var(--sp-6); box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.why-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.why-card__icon { width: 46px; height: 46px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--brand-primary); color: #fff; margin-bottom: var(--sp-5); }
.why-card__icon svg { width: 24px; height: 24px; }
.why-card h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); letter-spacing: -0.01em; }
.why-card p { color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.65; }
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; } }

/* ---- FAQ accordion ---- */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--dur-base) var(--ease-out); }
.faq-item.is-open { border-color: var(--brand-primary-100); }
.faq-item__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6); font-weight: 700; font-size: var(--fs-base); text-align: left;
}
.faq-item__q svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); color: var(--text-tertiary); }
.faq-item.is-open .faq-item__q svg { transform: rotate(45deg); color: var(--accent-text); }
.faq-item__a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-out); }
.faq-item.is-open .faq-item__a { max-height: 220px; }
.faq-item__a p { padding: 0 var(--sp-6) var(--sp-5); color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.7; }

/* ---- Newsletter ---- */
.newsletter-card {
  position: relative; overflow: hidden; text-align: center;
  border-radius: var(--radius-xl); padding: var(--sp-12) var(--sp-8);
  background: var(--ink-900);
}
.newsletter-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--brand-gold);
}
.newsletter-card h2 { color: #fff; font-size: var(--fs-xl); margin-bottom: var(--sp-2); position: relative; }
.newsletter-card p { color: var(--ink-text-secondary); margin-bottom: var(--sp-6); position: relative; }
.newsletter-form { display: flex; gap: var(--sp-3); max-width: 420px; margin: 0 auto; position: relative; }
.newsletter-form .input { flex: 1; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); color: #fff; }
.newsletter-form .input::placeholder { color: rgba(255,255,255,0.5); }
@media (max-width: 480px) { .newsletter-form { flex-direction: column; } }

/* ---- Compact page hero — careers / job-detail pages ---- */
.page-hero {
  position: relative; overflow: hidden;
  padding: var(--sp-12) 0 var(--sp-10);
  background: var(--ink-900);
  margin: var(--sp-5) var(--sp-6) 0;
  border-radius: var(--radius-xl);
}
.page-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--brand-gold);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .eyebrow { margin-bottom: var(--sp-4); }
.page-hero h1, .page-hero .section__head h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, var(--fs-3xl)); }
.page-hero p, .page-hero .section__head p { color: var(--ink-text-secondary); }
.page-hero .section__head { margin-bottom: 0; }
.page-hero .field label { color: var(--ink-text-tertiary); }
/* Desktop-only "glassy bar" look for the filter panel sitting on the dark
   hero background. Must NOT apply on mobile — unscoped, this had no media
   query at all, so on mobile it fired after (and beat, via source order)
   the full-screen-modal background fix above, since both rules share the
   exact same specificity. That was making the mobile filter sheet
   translucent again, letting the hero/header/job cards show through. */
@media (min-width: 768px) {
  .page-hero .filters {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
  }
}
@media (max-width: 720px) { .page-hero { margin: var(--sp-3) var(--sp-3) 0; border-radius: var(--radius-lg); } }

/* =========================================================
   Notification bell — navigates to notifications.html; no
   dropdown panel anymore.
   ========================================================= */
.notif-slot { position: relative; display: flex; align-items: center; }
.notif-bell { position: relative; }
.notif-trigger {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--bg-subtle); border: 1px solid var(--border-subtle); cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease-out);
}
.notif-trigger:hover { background: var(--bg-hover); color: var(--accent-text); }
.notif-trigger:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.notif-trigger svg { width: 20px; height: 20px; }
.notif-trigger.is-ringing svg { animation: notif-bell-ring 0.6s ease-in-out; }
@keyframes notif-bell-ring {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(6deg); }
}
.notif-badge {
  position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--radius-full); background: #C23A31; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  /* Cutout-ring effect: matches the bell button's own background
     (--bg-subtle, see .notif-trigger) in both themes, instead of the
     old hardcoded white fallback that only worked in light mode. */
  border: 2px solid var(--bg-subtle);
}
.notif-badge.is-pulsing { animation: notif-badge-pulse 1.1s ease-out; }
@keyframes notif-badge-pulse {
  0% { box-shadow: 0 0 0 0 rgba(194,58,49,0.55); }
  70% { box-shadow: 0 0 0 8px rgba(194,58,49,0); }
  100% { box-shadow: 0 0 0 0 rgba(194,58,49,0); }
}

/* =========================================================
   Dedicated Notifications page
   ========================================================= */
.page-hero--compact { padding-top: var(--sp-6); padding-bottom: var(--sp-5); }
.notif-page-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.notif-page-head h1 { flex: 1; font-size: var(--fs-xl); margin: 0; }
.notif-page-back {
  width: 40px; height: 40px; min-width: 44px; min-height: 44px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-subtle); color: var(--text-primary); flex-shrink: 0;
}
.notif-page-back svg { width: 18px; height: 18px; }
.notif-mark-all-page {
  background: none; border: none; color: var(--accent-text); font-weight: 700;
  font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; min-height: 44px;
}

.notif-toolbar { display: flex; flex-direction: column; gap: var(--sp-3); }
.notif-search { width: 100%; }
.notif-filter-chips { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.notif-chip {
  flex-shrink: 0; padding: 8px 14px; min-height: 36px; border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-secondary);
  font-size: var(--fs-xs); font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out);
}
.notif-chip.is-active { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
.notif-enable-push {
  align-self: flex-start; padding: 8px 14px; min-height: 36px; border-radius: var(--radius-md);
  border: 1px dashed var(--border-subtle); background: var(--bg-subtle); color: var(--text-primary);
  font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
}
.notif-enable-push:hover { background: var(--bg-hover); }

.notif-pull-indicator {
  display: flex; justify-content: center; height: 0; overflow: hidden;
  transition: height var(--dur-fast) var(--ease-out);
}
.notif-pull-indicator.is-visible { height: 40px; }
.notif-pull-spinner {
  width: 22px; height: 22px; margin-top: 6px; border-radius: 50%;
  border: 2px solid var(--border-subtle); border-top-color: var(--brand-accent);
}
.notif-pull-indicator.is-spinning .notif-pull-spinner { animation: notif-spin 0.7s linear infinite; }
@keyframes notif-spin { to { transform: rotate(360deg); } }

.notif-group-label {
  font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-tertiary); margin: var(--sp-5) 0 var(--sp-2);
}
.notif-group-label:first-child { margin-top: 0; }

.notif-card {
  display: flex; align-items: stretch; gap: var(--sp-2);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--bg-surface); margin-bottom: var(--sp-2);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.notif-card.is-unread { background: var(--tint-accent-bg, var(--brand-accent-100)); border-color: var(--brand-accent-400); }
.notif-card.is-read { opacity: 0.68; }
.notif-card.is-removing { opacity: 0; transform: translateX(24px); }
.notif-card__main {
  flex: 1; min-width: 0; display: flex; gap: var(--sp-3); text-align: left;
  padding: var(--sp-4); background: none; border: none; cursor: pointer; color: inherit;
  min-height: 44px;
}
.notif-card__icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.notif-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.notif-card__title-row { display: flex; align-items: center; gap: 8px; }
.notif-card__title-row strong { font-size: var(--fs-sm); }
.notif-card__unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-accent, #E0483E); flex-shrink: 0; }
.notif-card__desc { color: var(--text-secondary); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-card__meta { display: flex; gap: var(--sp-2); font-size: var(--fs-2xs); color: var(--text-tertiary); }
.notif-card__actions { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: var(--sp-2); border-left: 1px solid var(--border-subtle); }
.notif-card__action {
  width: 36px; height: 36px; min-width: 36px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text-tertiary); cursor: pointer;
}
.notif-card__action svg { width: 16px; height: 16px; }
.notif-card__action:hover { background: var(--bg-hover); color: var(--text-primary); }
.notif-card__action--danger:hover { color: var(--color-danger); }

.notif-route-error { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--sp-5); margin-bottom: var(--sp-4); background: var(--bg-surface); }
.notif-route-error__actions { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-4); }

.notif-load-more { text-align: center; padding: var(--sp-5) 0; }

@media (max-width: 560px) {
  .notif-card__actions { flex-direction: row; border-left: none; border-top: 1px solid var(--border-subtle); }
}