@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #fafafa;
  --bg-soft: #ebfafe;
  --card: #ffffff;
  --text: #073742;
  --heading: #08272e;
  --text-muted: #44656f;
  --border: #dbe7ea;
  --border-strong: #c3d6dc;
  --accent: #0b3440;
  --accent-dark: #14424e;
  --accent-soft: #d7f1fa;
  --pink: #ffdef7;
  --chart-pink: #f472b6;
  --success: #0e7c3e;
  --success-soft: #e7f6ec;
  --warning: #b45309;
  --error: #c8163f;
  --error-soft: #fdeaef;
}
/* Employer subdomain (hire.rekruit.in) -- class set on <html> by nav.js's
   isEmployerHost check. A slightly darker accent-soft than the job-seeker
   site's, so secondary buttons/chips/badges (Contribute-style CTAs, the
   sign-in button, pricing "Your plan" badges) read with a touch more
   visual weight there. Everything else inherits the same palette. */
.employer-host { --accent-soft: #b8e2f2; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  max-width: 680px; margin: 0 auto; padding: 0 16px;
  line-height: 1.5; background: var(--bg); color: var(--text);
  overflow-x: hidden;
}
body.home { max-width: none; padding: 0; }
/* Wider content column for pages whose layout genuinely needs the room
   (e.g. employer-search.html's multi-column results grid). Wider than the
   1120px grid nav.js/the footer use for their own full-bleed chrome --
   this page's candidate cards benefit from more horizontal room than the
   marketing pages do, and the header/footer's own max-width is separately
   capped by their own full-bleed rules regardless of body's. */
body.wide { max-width: 1360px; padding: 0 24px; }
h1, h2, h3, h4 { color: var(--heading); letter-spacing: -0.02em; }
h1 { font-size: 1.75rem; font-weight: 650; margin-bottom: 4px; }
h2 { font-size: 1.3rem; font-weight: 650; margin-bottom: 4px; }
p.subtitle { color: var(--text-muted); margin-top: 0; font-size: 0.95rem; }
.link-button {
  background: none; border: none; padding: 0; margin: 0; font: inherit;
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
label { display: block; font-size: 0.85rem; font-weight: 600; margin-top: 14px; margin-bottom: 4px; }
select, input, textarea {
  width: 100%; padding: 10px 12px; font-size: 1rem;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--card); color: var(--text); font-family: inherit;
}
textarea { resize: vertical; }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
button {
  margin-top: 20px; padding: 10px 26px; font-size: 0.9rem; font-weight: 550;
  cursor: pointer; border: none; border-radius: 4px;
  background: var(--accent); color: #fff; font-family: inherit;
  transition: background 0.15s ease;
}
button:hover { background: var(--accent-dark); }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
#result { margin-top: 24px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; display: none; background: var(--card); box-shadow: 0 1px 2px rgba(8, 39, 46, 0.05); }
#result.error { border-color: var(--error); background: var(--error-soft); color: var(--error); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.stat { text-align: center; }
.stat .value { font-size: 1.1rem; font-weight: 650; color: var(--heading); }
.stat .label { font-size: 0.75rem; color: var(--text-muted); }
.median .value { font-size: 1.5rem; color: var(--success); }
.sample-size { font-size: 0.85rem; color: var(--text-muted); margin-top: 8px; }

/* One stat-grid block per experience year (designation_company.html) --
   stacked cards instead of a dense multi-column table, so a company+job-
   title pair with many surviving experience years reads as a scannable
   list rather than a wide table. */
.experience-block { padding: 18px 0; border-bottom: 1px solid var(--border); }
.experience-block:last-child { border-bottom: none; }
.experience-block h3 { font-size: 0.95rem; font-weight: 650; margin: 0 0 4px; }

/* Confidence indicator -- deliberately replaces a raw people-count
   everywhere sample size used to be shown (salary results, company/
   designation breakdown tables). A coarse Low/Medium/High tier reads more
   honestly than an exact-looking number, and avoids implying more
   precision than "at least N people, suppressed below that" actually
   carries. Bar fill is proportional to the tier, not the real count --
   there is no continuous scale here, only three tiers. */
.confidence-wrap { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.confidence-bar {
  display: inline-block; width: 36px; height: 6px; border-radius: 3px;
  background: var(--border); overflow: hidden; flex-shrink: 0;
}
.confidence-bar .fill { display: block; height: 100%; border-radius: 3px; }
.confidence-bar.low .fill { background: var(--error); }
.confidence-bar.medium .fill { background: var(--warning); }
.confidence-bar.high .fill { background: var(--success); }
.confidence-label { font-size: 0.8rem; color: var(--text-muted); }
/* Search comboboxes: icon-prefixed input, clear button, floating results */
.combobox { position: relative; }
.combobox input { padding-left: 40px; padding-right: 36px; }
.combobox-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-muted); pointer-events: none;
}
.combobox-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border: none; background: none; padding: 0;
  color: var(--text-muted); font-size: 1.2rem; line-height: 1; cursor: pointer;
  border-radius: 50%; align-items: center; justify-content: center;
  margin-top: 0;
}
.combobox-clear:not([hidden]) { display: flex; }
.combobox-clear:hover { background: var(--bg-soft); color: var(--heading); }
.example-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.example-chips-label { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.example-chip {
  font-size: 0.85rem; font-weight: 600; text-decoration: none; color: var(--heading);
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px;
}
.example-chip:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.combobox .search-results {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; z-index: 20;
}
.search-results {
  border: 1px solid var(--border); border-radius: 10px; max-height: 220px;
  overflow-y: auto; display: none; margin-top: 4px; background: var(--card);
  box-shadow: 0 8px 24px -10px rgba(8, 39, 46, 0.22);
}
.result-row { padding: 9px 14px; cursor: pointer; }
.result-row:hover, .result-row.highlighted { background: var(--accent-soft); }
.result-primary { font-size: 0.92rem; font-weight: 600; color: var(--heading); }
.result-secondary { font-size: 0.78rem; color: var(--text-muted); margin-top: 1px; }
hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }
.gate { margin-top: 12px; padding: 14px; background: var(--accent-soft); border-radius: 8px; font-size: 0.85rem; }
.gate button { margin-top: 8px; padding: 8px 16px; font-size: 0.85rem; }

/* "Get in touch" niche-report callout */
.niche-callout {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-top: 28px; padding: 20px; border: 1px solid var(--border);
  border-radius: 16px; background: var(--bg-soft);
}
.niche-icon { width: 30px; height: 30px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.niche-callout-body { flex: 1 1 240px; }
.niche-callout-body h3 { margin: 0 0 4px; font-size: 1rem; }
.niche-callout-body p { margin: 0; color: var(--text-muted); font-size: 0.88rem; }
.niche-callout .cta-button { margin-top: 0; align-self: center; }
#c-result { margin-top: 12px; font-size: 0.9rem; display: none; font-weight: 600; }
#c-result.ok { color: var(--success); }
#c-result.error { color: var(--error); }

/* Job board: jobs.html, job_detail.html, employer-jobs.html */
/* job_detail.html sits on a wide (1360px) body like jobs.html/company.html,
   but its own content -- one job's badges/skills/description/apply form --
   reads better in a constrained, centered column than stretched full-width;
   this caps just that inner content, not the whole page. */
.job-detail-card { max-width: 760px; margin: 0 auto; }
.job-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.job-badge {
  padding: 5px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  background: var(--accent-soft); color: var(--heading);
}
.job-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.job-skill-tag {
  padding: 3px 10px; border-radius: 999px; font-size: 0.75rem;
  border: 1px solid var(--border); color: var(--text-muted);
}
.job-description { white-space: pre-wrap; margin-top: 8px; line-height: 1.6; }
/* Real user feedback: job descriptions ran too long on the page. Clamped
   to a fixed height by default with a fade + "Show more" toggle
   (job_detail.html's initDescriptionClamp()) -- hidden entirely via JS if
   the description is already short enough that expanding would do nothing. */
.job-description-wrap { position: relative; }
.job-description.clamped { max-height: 260px; overflow: hidden; }
.job-description-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: linear-gradient(to bottom, transparent, var(--card));
  pointer-events: none;
}
.job-description-toggle {
  display: inline-block; margin-top: 10px; padding: 0; border: none; background: none;
  color: var(--accent-dark); font-weight: 700; font-size: 0.85rem; cursor: pointer;
  text-decoration: underline;
}
/* Inline highlight for experience/location mentions inside the free-text
   description (backend/app.py's _highlight_jd_keywords()) -- the same
   pink accent used for chips elsewhere in this theme, just inline rather
   than a standalone pill. */
.jd-highlight {
  background: var(--pink); color: var(--heading); border-radius: 4px;
  padding: 1px 4px; font-weight: 600;
}
.apply-signin-prompt { font-weight: 600; margin-bottom: 10px; }
/* Salary teaser carousel (backend/app.py's _build_salary_teasers(), reusing
   _get_company_data() -- see that function's own docstring): a horizontally
   scrollable row of real per-designation averages at the job's own
   company, each card linking to the full company salary page. Real user
   feedback preferred this over a single plain "Explore salaries" link. */
.salary-carousel {
  display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 12px;
  margin-top: 10px; scroll-snap-type: x proximate;
}
.salary-carousel-card {
  scroll-snap-align: start; flex: 0 0 150px; display: flex; flex-direction: column;
  gap: 6px; padding: 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); text-decoration: none; color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.salary-carousel-card:hover { border-color: var(--accent-dark); transform: translateY(-2px); }
.salary-carousel-role {
  font-size: 0.78rem; font-weight: 600; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.salary-carousel-ctc { font-size: 1.05rem; font-weight: 700; color: var(--heading); }
.salary-carousel-more { margin-top: 8px; font-size: 0.9rem; }
.salary-carousel-more a { color: var(--accent-dark); font-weight: 600; }
/* Third-party (crawled) postings only -- see backend/job_crawler.py. A
   small transparency note, not a badge/warning, since aggregating a
   company's own public posting is entirely ordinary. */
.job-source-note { font-size: 0.85rem; color: var(--text-muted); margin: 4px 0 0; }
.job-card-source { font-size: 0.8rem; color: var(--text-muted); }
/* position:relative so the full-card overlay link (.job-card-link below)
   can stretch to fill it -- clicking anywhere on the card navigates to the
   job, not just the title text, while the Apply button stays independently
   clickable via a higher z-index. */
.job-card {
  position: relative; border: 1px solid var(--border); border-radius: 12px; padding: 18px;
  margin-bottom: 14px; background: var(--card);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.job-card-link { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.job-card-body { position: relative; z-index: 1; min-width: 0; }
.job-card h3 { margin: 0 0 2px; font-size: 1.1rem; }
.job-card h3 a { text-decoration: none; position: relative; z-index: 1; }
.job-card-meta { color: var(--text-muted); font-size: 0.88rem; }
.job-card-apply { position: relative; z-index: 2; flex-shrink: 0; white-space: nowrap; }
.job-filter-sidebar { display: flex; flex-direction: column; gap: 4px; }
.job-board-layout { display: flex; gap: 32px; align-items: flex-start; margin-top: 20px; }
.job-board-layout .job-filter-sidebar { flex: 0 0 260px; }
.job-board-layout .job-results { flex: 1 1 0; min-width: 0; }
/* Full-width single-column rows -- each posting gets the full width of the
   (now-wide) job board rather than being squeezed into a 1/3-width grid
   cell, matching how job-board listings are conventionally scanned. */
.job-results-grid { display: flex; flex-direction: column; gap: 14px; }
.job-results-grid .job-card { margin-bottom: 0; }
.employer-job-item {
  border: 1px solid var(--border); border-radius: 12px; padding: 16px;
  margin-bottom: 14px; background: var(--card);
}
.employer-job-item-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.employer-job-item-head h3 { margin: 0; font-size: 1.05rem; }
.employer-job-item-meta { color: var(--text-muted); font-size: 0.85rem; margin: 4px 0 8px; }
.job-status-badge { padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.job-status-badge.active { background: var(--success); color: #fff; }
.job-status-badge.closed { background: var(--text-muted); color: #fff; }
.applicant-card { border-top: 1px solid var(--border); padding: 10px 0; }
.applicant-card:first-child { border-top: none; }
.applicant-card-name { font-weight: 600; }
.applicant-card-meta { color: var(--text-muted); font-size: 0.85rem; }
.applicant-card-note { margin-top: 4px; font-size: 0.88rem; font-style: italic; }

/* profile.html */
.profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.profile-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.form-status { margin-top: 12px; font-size: 0.9rem; display: none; font-weight: 600; }
.form-status.ok { color: var(--success); display: block; }
.form-status.error { color: var(--error); display: block; }

/* company.html */
.back-link { font-size: 0.85rem; display: inline-block; margin-bottom: 8px; font-weight: 600; text-decoration: none; }
.company-meta { color: var(--text-muted); font-size: 0.9rem; margin-top: 2px; }
.company-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; font-size: 0.85rem; }
.company-facts .fact-label { color: var(--text-muted); }
table.breakdown { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.85rem; }
table.breakdown th, table.breakdown td { text-align: left; padding: 8px; border-bottom: 1px solid var(--border); }
table.breakdown th { color: var(--text-muted); font-weight: 600; }
table.breakdown td.num, table.breakdown th.num { text-align: right; }

/* Card-grid alternative to table.breakdown -- used on company.html's role/
   job-title breakdowns instead of a plain table, using the same
   accent-soft tint as .gate/.job-badge elsewhere in this theme. One card
   per role/designation (not one per experience-band row -- see
   _group_breakdown_by_name() in backend/app.py), each listing its own
   bands as a small stacked list in chronological experience order. */
.breakdown-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin-top: 12px; }
.breakdown-card {
  background: var(--accent-soft); border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.breakdown-card-title { font-weight: 650; color: var(--heading); font-size: 0.95rem; margin-bottom: 6px; }
.breakdown-card-title a { text-decoration: none; }
/* One row per experience band -- label on the left, salary + confidence
   pushed to the right (bottom-right of the card for the last row), rather
   than a left-aligned vertical stack. */
.breakdown-card-band-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.breakdown-card-band-row:first-child { border-top: none; }
.breakdown-card-band {
  padding: 2px 9px; border-radius: 999px; font-size: 0.72rem;
  font-weight: 600; background: var(--card); color: var(--text-muted); flex-shrink: 0;
}
.breakdown-card-band-value { font-size: 0.95rem; font-weight: 700; color: var(--heading); }
.breakdown-card-band-confidence { flex-shrink: 0; }

/* Site header: full-bleed band via breakout margins; inner content on the
   1120px grid on every page (the 680px pages included). */
.site-header { margin: 0 calc(50% - 50vw) 28px; }
body.home .site-header { background: var(--bg-soft); margin-bottom: 0; }
.header-inner { max-width: 1120px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.site-logo { font-size: 1.35rem; font-weight: 800; text-decoration: none; color: var(--heading); letter-spacing: -0.03em; }
/* Employer subdomain (hire.rekruit.in) gets a small "hire" sub-label under
   the wordmark -- set via nav.js's isEmployerHost check, not a separate
   brand, just a visual cue for which audience this chrome belongs to. */
.site-logo-hire { display: inline-flex; flex-direction: column; line-height: 1.05; }
.site-logo-sub {
  font-size: 0.6rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 1px;
}
.site-nav { display: flex; gap: 22px; flex-wrap: wrap; flex: 1; }
.site-nav a { text-decoration: none; font-size: 0.9rem; font-weight: 550; color: var(--text); }
.site-nav a.active, .site-nav a:hover { color: var(--heading); text-decoration: underline; text-underline-offset: 6px; }
.header-actions { display: flex; gap: 10px; align-items: center; }
.header-actions .cta-button { padding: 8px 18px; font-size: 0.85rem; }
.auth-chip {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  font-size: 0.85rem; font-weight: 600; color: var(--heading);
}
.auth-chip-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
/* Deliberately its own class, not .cta-button.secondary -- that class is
   hidden below 480px to save space (see the mobile media query), which
   would otherwise take the sign-in link with it and leave mobile visitors
   with no way to sign in at all. Same visual style, always visible. */
.auth-signin-button {
  display: inline-block; padding: 8px 18px; font-size: 0.85rem; font-weight: 550;
  text-decoration: none; border-radius: 4px; background: var(--accent-soft);
  color: var(--heading); transition: background 0.15s ease;
}
.auth-signin-button:hover { background: #c6e9f5; }

/* Nav "Sign in" chip: a button that opens a small dropdown with both
   provider choices (Google/LinkedIn), rather than jumping straight into one
   provider's consent screen. */
.auth-signin-wrap { position: relative; display: inline-flex; }
.auth-signin-wrap .auth-signin-button {
  border: none; cursor: pointer; font-family: inherit; line-height: inherit;
  appearance: none; -webkit-appearance: none; margin: 0; box-shadow: none;
}
.auth-signin-wrap .auth-signin-button::-moz-focus-inner { border: 0; padding: 0; }
.auth-signin-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(8, 39, 46, 0.12); padding: 6px; min-width: 190px;
  display: flex; flex-direction: column; gap: 2px;
}
/* [hidden] and .auth-signin-dropdown are equal-specificity author rules --
   without this, the plain class rule's `display: flex` above silently wins
   over the browser's built-in `[hidden] { display: none }` UA rule (author
   styles always beat UA styles regardless of specificity), so toggling the
   `hidden` attribute in JS had zero visible effect: the dropdown rendered
   permanently open no matter what state it was actually in. */
.auth-signin-dropdown[hidden] {
  display: none;
}
.auth-signin-dropdown a {
  display: block; padding: 8px 10px; border-radius: 4px; font-size: 0.85rem;
  font-weight: 550; color: var(--heading); text-decoration: none;
}
.auth-signin-dropdown a:hover { background: var(--accent-soft); }

/* Buttons (anchor-styled) */
.cta-button {
  display: inline-block; padding: 10px 26px; font-size: 0.9rem; font-weight: 550;
  text-decoration: none; border-radius: 4px; background: var(--accent); color: #fff;
  box-shadow: 0 1px 2px rgba(8, 39, 46, 0.06); transition: background 0.15s ease;
}
/* An author-stylesheet display rule on a [hidden] element normally beats
   the UA stylesheet's display:none default -- this rule keeps `hidden`
   working on any element that also has .cta-button (e.g. employer-search
   .html's #account-chip, hidden until its signed-in/paid state resolves). */
.cta-button[hidden] { display: none; }
.cta-button:hover { background: var(--accent-dark); }
.cta-button.secondary { background: var(--accent-soft); color: var(--heading); box-shadow: none; }
.cta-button.secondary:hover { background: #c6e9f5; }

/* Sign-in prompts with two provider buttons (Google + LinkedIn) -- a plain
   flex row, not a new modal/popover component. */
.oauth-button-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Full-bleed sections (Home) */
.section { padding: 56px 0; }
.section-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.band-tint { background: var(--bg-soft); }
.band-dark { background: var(--accent); }
.section-heading { font-size: 2.1rem; font-weight: 650; text-align: center; margin-bottom: 8px; letter-spacing: -0.027em; line-height: 1.1; }
.section-subheading { color: var(--text-muted); text-align: center; max-width: 620px; margin: 0 auto 32px; }

/* Hero */
.hero { text-align: center; padding: 40px 0 48px; }
.hero .section-inner { max-width: 820px; }
.hero-illustration { max-height: 280px; width: auto; max-width: 100%; margin-bottom: 8px; }
.hero .eyebrow {
  display: inline-flex; justify-content: center; align-items: center;
  background: var(--pink); color: var(--heading); border-radius: 999px;
  padding: 6px 18px; font-size: 0.95rem; font-weight: 650; min-width: 12ch;
  margin-bottom: 18px;
}
.hero .eyebrow .cursor { display: inline-block; margin-left: 2px; animation: blink 0.9s step-end infinite; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.hero h1 { font-size: clamp(2.5rem, 6vw, 3.6rem); font-weight: 650; line-height: 1.05; letter-spacing: -0.027em; margin: 0 0 14px; }
.hero p.subtitle { font-size: 1.05rem; max-width: 560px; margin: 0 auto 24px; }
.hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-trust { margin-top: 18px; font-size: 0.78rem; color: var(--text-muted); }

/* Trust strip */
.trust-strip-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.trust-strip-caption { color: var(--text-muted); font-size: 0.85rem; margin: 0; }
.trust-strip-stat { font-weight: 800; color: var(--heading); font-size: 1.05rem; }
.trust-strip-names { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; }
.trust-strip-item { font-size: 1.05rem; font-weight: 650; color: var(--text-muted); letter-spacing: -0.01em; }

/* Pillar cards */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.feature-card {
  border: 1px solid var(--border); border-radius: 16px; padding: 22px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(8, 39, 46, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(8, 39, 46, 0.28); }
.feature-card h3 { margin: 10px 0 6px; font-size: 1.05rem; font-weight: 650; }
.feature-card p { color: var(--text-muted); font-size: 0.88rem; }
.feature-card a { font-size: 0.85rem; font-weight: 650; text-decoration: none; }
.pillar-icon { display: block; width: 60px; height: 60px; object-fit: contain; }
.pillar-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 3px 10px; border-radius: 999px; margin-bottom: 14px;
  background: var(--pink); color: var(--heading);
}
.pillar-badge.live { background: var(--accent); color: #fff; }

/* Feature deep-dives: accordion + screenshot */
.feature-section { display: flex; align-items: center; gap: 48px; padding: 28px 0; }
.feature-section.reverse { flex-direction: row-reverse; }
.feature-copy, .feature-visual { flex: 1 1 0; min-width: 0; }
.feature-copy h3 { font-size: 1.5rem; font-weight: 650; margin-bottom: 6px; letter-spacing: -0.02em; }
.feature-copy > p { color: var(--text-muted); margin-bottom: 18px; }
.acc { border-bottom: 1px solid var(--border); }
.acc summary {
  list-style: none; cursor: pointer; padding: 14px 0; font-weight: 650;
  font-size: 0.95rem; color: var(--heading);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-weight: 400; font-size: 1.2rem; color: var(--text-muted); }
.acc[open] summary::after { content: "\2212"; }
.acc-body { padding: 0 0 14px; color: var(--text-muted); font-size: 0.9rem; }
.feature-copy .cta-button { margin-top: 20px; }
.mockup-frame {
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(8, 39, 46, 0.06), 0 24px 48px -24px rgba(8, 39, 46, 0.25);
}
.mockup-frame img { display: block; width: 100%; height: auto; }
.mockup-caption { font-size: 0.75rem; color: var(--text-muted); text-align: center; margin-top: 8px; }

/* Live data widgets */
.widget-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1000px; margin: 0 auto; }
.live-widget-card { border: 1px solid var(--border); border-radius: 16px; padding: 24px; background: var(--card); box-shadow: 0 1px 2px rgba(8, 39, 46, 0.04); }
.live-widget-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.live-widget-header strong { color: var(--heading); }
.live-tag { background: var(--accent); color: #fff; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 10px; border-radius: 999px; }
.widget-bar-track { position: relative; height: 10px; border-radius: 999px; background: var(--bg-soft); margin: 20px 0 12px; }
.widget-bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--chart-pink); opacity: 0.45; }
.widget-bar-median { position: absolute; top: -4px; width: 4px; height: 18px; border-radius: 2px; background: var(--accent); }
/* Marks a specific person's own CTC on the bar, distinct from the median
   tick above -- used by city-comparison.html, where both the city's
   typical pay AND the visitor's own number need to show on one bar. */
.widget-bar-user-mark { position: absolute; top: -7px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--heading); border: 2px solid var(--card); }
.widget-legend { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted); }
.widget-legend .value { color: var(--heading); font-weight: 650; }
.widget-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; font-size: 0.85rem; }
.role-row { margin-top: 14px; }
.role-row .role-head { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 5px; }
.role-row .role-name { font-weight: 600; color: var(--heading); }
.role-row .role-median { color: var(--text-muted); }
.role-row .role-track { height: 8px; border-radius: 999px; background: var(--bg-soft); }
.role-row .role-fill { height: 100%; border-radius: 999px; background: var(--chart-pink); opacity: 0.55; }

/* Stat callouts */
.stat-callout-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat-callout { text-align: center; }
.stat-callout .number { font-size: 2.3rem; font-weight: 800; color: var(--heading); letter-spacing: -0.03em; }
.stat-callout .label { color: var(--text-muted); font-size: 0.85rem; margin-top: 4px; }

/* Mission band */
.mission-band { max-width: 720px; margin: 0 auto; text-align: center; }
.mission-band p { margin-bottom: 14px; }
.scribble { display: block; width: 140px; height: auto; margin: 4px auto 18px; }

/* Salary lookup layout (salary.html) -- two-column: lookup form + a
   "Popular companies" quick-link panel, so the page's content actually
   fills body.wide's width instead of floating a single narrow column in a
   sea of empty margin (real user feedback: "too much empty space"). */
.lookup-layout { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; align-items: start; }
.lookup-card, .popular-card { padding: 28px; }
.popular-card h3 { margin: 0 0 4px; font-size: 1rem; }
.chip-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip-link {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--bg-soft); color: var(--accent); font-size: 0.85rem; font-weight: 600;
  text-decoration: none; border: 1px solid transparent;
}
.chip-link:hover { border-color: var(--border-strong); }
.section-inner.narrow { max-width: 640px; }
@media (max-width: 860px) {
  .lookup-layout { grid-template-columns: 1fr; }
}

/* Closing CTA: white card floating on the dark band */
.cta-card {
  background: var(--card); border-radius: 20px; max-width: 680px; margin: 0 auto;
  padding: 48px 32px; text-align: center;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.35);
}
.cta-card h2 { font-size: 1.7rem; font-weight: 650; margin-bottom: 8px; letter-spacing: -0.025em; }
.cta-card p { color: var(--text-muted); margin-top: 0; }
.cta-band-note { font-size: 0.85rem; margin-top: 14px; }

/* Footer: dark navy, full-bleed, on all pages */
.site-footer { background: var(--accent); color: #d7eef5; margin: 64px calc(50% - 50vw) 0; }
/* Home ends with the dark CTA band -- let the two navy regions merge */
body.home .site-footer { margin-top: 0; }
.footer-inner { max-width: 1120px; margin: 0 auto; padding: 52px 24px 28px; }
.footer-top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.footer-wordmark { font-size: 2rem; font-weight: 800; color: #fff; letter-spacing: -0.03em; text-decoration: none; }
.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col h4 { color: #a5c8d1; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px; }
.footer-col a { display: block; color: #d7eef5; text-decoration: none; font-size: 0.9rem; margin-bottom: 9px; }
.footer-col a:hover, .footer-col a.active { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { border-top: 1px solid rgba(215, 238, 245, 0.18); margin-top: 40px; padding-top: 18px; font-size: 0.75rem; color: #a5c8d1; }

/* About / For Employers / Contact prose pages */
.content-page p { margin-bottom: 14px; }
.content-page ul { padding-left: 20px; }
.content-page li { margin-bottom: 6px; }
.blog-index-list { list-style: none; padding-left: 0; }
.blog-index-list li { margin-bottom: 24px; }
.blog-index-list li a { font-size: 1.1rem; font-weight: 650; color: var(--accent); text-decoration: none; }
.blog-index-list li a:hover { text-decoration: underline; }
.blog-index-list li p.subtitle { margin-top: 4px; margin-bottom: 0; }
.page-illustration { display: block; width: 100%; max-width: 560px; height: auto; margin: 8px auto 20px; }

@media (max-width: 900px) {
  .feature-section, .feature-section.reverse { flex-direction: column; }
  .feature-visual { order: -1; width: 100%; }
  .stat-callout-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .widget-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .site-nav { order: 3; flex-basis: 100%; }
  .header-inner { gap: 12px; }
  .header-actions { margin-left: auto; }
}

@media (max-width: 480px) {
  .feature-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .company-facts { grid-template-columns: 1fr; }
  .section { padding: 40px 0; }
  .stat-callout .number { font-size: 1.8rem; }
  .hero-illustration { max-height: 200px; }
  .footer-cols { gap: 36px; }
  .header-actions .cta-button.secondary { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow .cursor { animation: none; }
}

/* Employer candidate search (backend/static/employer-search.html) */
.access-gate {
  border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px;
  background: var(--card); box-shadow: 0 1px 2px rgba(8, 39, 46, 0.05);
}
.access-gate p { margin-top: 0; }
.filter-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.filter-row > div { flex: 1 1 180px; }
.filter-row label { display: block; margin-bottom: 4px; }
/* Candidate card: a fixed-size 3D flip card (front = summary, back = full
   profile) rather than a detail panel appended below the summary -- an
   appended panel grows the card's own height on reveal, which (a) misaligns
   every other card's grid row and (b) was the direct cause of "Contact" and
   the skills row landing at different Y positions card-to-card, since
   height was purely driven by however much summary content that particular
   candidate happened to have. Fixing the card at one height and pinning
   .candidate-card-actions to the bottom via margin-top:auto (both faces are
   flex columns) makes every card's layout identical regardless of content
   length; the flip (not an expand) is what keeps the card's footprint the
   same size when contact info is revealed. */
.candidate-card { position: relative; height: 340px; perspective: 1200px; margin-bottom: 12px; }
.candidate-card-flipper {
  position: relative; width: 100%; height: 100%;
  transition: transform 0.55s cubic-bezier(0.4, 0.1, 0.2, 1);
  transform-style: preserve-3d;
}
.candidate-card.flipped .candidate-card-flipper { transform: rotateY(180deg); }
.candidate-card-face {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px;
  background: var(--card); box-shadow: 0 1px 2px rgba(8, 39, 46, 0.05);
  display: flex; flex-direction: column;
}
.candidate-card-back { transform: rotateY(180deg); }
.candidate-card-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.candidate-card-role { color: var(--text-muted); font-size: 0.9rem; }
.candidate-card-meta { color: var(--text-muted); font-size: 0.85rem; margin-top: 4px; }
/* Capped, not auto -- a candidate with many skills would otherwise push
   .candidate-card-actions further down than a candidate with few, which is
   the other half of the "different positions on different cards" bug. */
/* max-height caps at exactly 2 full chip rows (~27px + 4px margin each) --
   anything shorter clips a chip mid-row, which looks like a rendering bug. */
.candidate-card-skills { font-size: 0.85rem; margin-top: 6px; max-height: 62px; overflow: hidden; }

.candidate-card-back-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-shrink: 0; }
.candidate-back-btn {
  background: none; border: 1px solid var(--border); border-radius: 50%; width: 28px; height: 28px;
  padding: 0; margin: 0; display: flex; align-items: center; justify-content: center;
  color: var(--heading); font-size: 1rem; cursor: pointer; flex-shrink: 0;
}
.candidate-back-btn:hover { background: var(--bg-soft); }
.candidate-back-scroll { flex: 1 1 auto; overflow-y: auto; font-size: 0.85rem; }
.candidate-back-scroll p { margin: 0 0 8px; }
.candidate-back-scroll h4 { margin: 10px 0 4px; font-size: 0.8rem; }
.candidate-back-scroll ul { margin: 0; padding-left: 18px; }
/* Shown only when renderCandidateCard() detects the loaded profile actually
   overflows the fixed-height back face -- an explicit "there's more" cue
   rather than relying on a visitor to notice a scrollbar. */
.candidate-show-more {
  margin-top: 6px; align-self: center; background: none; border: 1px solid var(--border); border-radius: 50%;
  width: 26px; height: 26px; padding: 0; cursor: pointer; color: var(--heading); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.candidate-show-more:hover { background: var(--bg-soft); }
.candidate-show-more[hidden] { display: none; }

/* Employer search: search box + a dropdown filters panel + full-width results */
.employer-search-box { flex: 1 1 320px; margin-bottom: 0; }
.employer-search-toolbar-row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.employer-search-toolbar-row .cta-button { margin: 0; white-space: nowrap; }

.filters-toggle-btn { display: inline-flex; align-items: center; gap: 6px; }
.filters-count-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  border-radius: 999px; background: var(--pink); color: var(--heading); font-size: 0.72rem; font-weight: 700; padding: 0 5px;
}
.filters-count-badge[hidden] { display: none; }

.filters-dropdown-panel {
  margin-top: 12px; border: 1px solid var(--border); border-radius: 12px;
  padding: 20px; background: var(--card); box-shadow: 0 4px 16px rgba(8, 39, 46, 0.08);
}
.filters-dropdown-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px 24px;
}
.filter-group label { display: block; margin-bottom: 6px; font-size: 0.85rem; font-weight: 600; color: var(--heading); }
.filter-checkbox-row {
  display: flex; align-items: center; gap: 8px; font-weight: 400;
  font-size: 0.9rem; color: var(--text); margin-bottom: 8px; cursor: pointer;
}
.filter-checkbox-row input { width: auto; margin: 0; cursor: pointer; }

/* Dual-handle range slider: two overlapping <input type=range> with the
   native track/thumb replaced -- only the thumb (not the whole track) has
   pointer-events, so either handle stays independently draggable no
   matter which input currently sits on top. Styled to match the pink
   P10-P90 range bar used elsewhere (Home page's live widget, company/
   designation pages' salary-range display -- see .widget-bar-track/
   .widget-bar-fill/.widget-bar-median) so a filter control and a result
   display read as the same visual language, just with two draggable
   markers here instead of one static one. */
.dual-range { position: relative; height: 20px; display: flex; align-items: center; margin-top: 10px; }
.dual-range-track {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 10px; border-radius: 999px; background: var(--bg-soft);
}
.dual-range-fill {
  position: absolute; top: 50%; transform: translateY(-50%); height: 10px; border-radius: 999px;
  background: var(--chart-pink); opacity: 0.45;
}
.dual-range input[type="range"] {
  position: absolute; left: 0; right: 0; width: 100%; margin: 0; padding: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.dual-range input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.dual-range input[type="range"]::-moz-range-track { background: transparent; border: none; }
.dual-range input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto; -webkit-appearance: none; appearance: none;
  width: 8px; height: 20px; border-radius: 4px; margin-top: 0; cursor: pointer;
  background: var(--accent); border: 2px solid var(--card); box-shadow: 0 1px 3px rgba(8, 39, 46, 0.35);
}
.dual-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 8px; height: 20px; border-radius: 4px; cursor: pointer;
  background: var(--accent); border: 2px solid var(--card); box-shadow: 0 1px 3px rgba(8, 39, 46, 0.35);
}
.dual-range-labels { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }

#apply-filters-btn { margin-top: 4px; }

.tag-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600;
  background: var(--accent-soft); color: var(--heading); border-radius: 999px; padding: 4px 6px 4px 12px;
}
.tag-chip button {
  margin: 0; padding: 0; width: 18px; height: 18px; border-radius: 50%; background: none;
  color: var(--heading); font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.tag-chip button:hover { background: #c6e9f5; }

.profile-completion { margin-top: 16px; }
.profile-completion-head {
  display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 600;
  color: var(--heading); margin-bottom: 4px;
}
.profile-completion-bar {
  width: 100%; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden;
}
.profile-completion-bar .fill {
  display: block; height: 100%; border-radius: 4px; background: var(--accent);
  transition: width 0.2s ease;
}

.search-results-main { flex: 1 1 auto; min-width: 0; }
.search-toolbar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 10px; margin-bottom: 14px;
}
.search-toolbar select { width: auto; margin: 0; font-size: 0.85rem; padding: 6px 10px; }
.sort-by { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted); }

.candidate-card-badges { display: flex; align-items: center; gap: 8px; }
.badge-verified {
  display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700;
  color: var(--success); background: var(--success-soft); border-radius: 999px; padding: 3px 10px;
}
.badge-actively-looking {
  display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700;
  color: var(--chart-pink); background: color-mix(in srgb, var(--chart-pink) 15%, transparent);
  border-radius: 999px; padding: 3px 10px;
}
.candidate-card-salary { font-weight: 700; color: var(--heading); font-size: 0.9rem; }
.candidate-card-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; }
.candidate-contact-btn { margin: 0; padding: 6px 16px; font-size: 0.85rem; }
.candidate-bookmark-btn {
  background: none; border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px;
  padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted);
}
.candidate-bookmark-btn:hover { background: var(--bg-soft); }
.candidate-bookmark-btn.bookmarked { color: var(--pink); background: var(--bg-soft); }

/* Shortlist (employer-profile.html): plain auto-height cards in a single
   narrow column, not the search page's fixed-height flip-card grid -- there
   are no neighboring cards to stay aligned with here, so a simple
   expand-below reveal (like the site used before the flip-card redesign)
   is all this needs. */
.shortlist-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px;
  background: var(--card); box-shadow: 0 1px 2px rgba(8, 39, 46, 0.05); margin-bottom: 12px;
}
.shortlist-detail { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.85rem; }
.shortlist-detail h4 { margin: 10px 0 4px; font-size: 0.8rem; }
.shortlist-detail ul { margin: 0; padding-left: 18px; }
.shortlist-detail p { margin: 0 0 8px; }
.shortlist-remove-btn {
  background: none; border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px;
  padding: 0; margin: 0; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 1.1rem; cursor: pointer;
}
.shortlist-remove-btn:hover { background: var(--error-soft); color: var(--error); }

.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.pagination button {
  margin: 0; background: var(--card); color: var(--heading); border: 1px solid var(--border);
  padding: 6px 14px; font-size: 0.85rem;
}
.pagination button:hover:not(:disabled) { background: var(--bg-soft); }
.pagination button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pagination button:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 860px) {
  .employer-search-toolbar-row { flex-direction: column; align-items: stretch; }
  /* flex-basis applies to the cross axis once the row above stacks to
     column -- without resetting it, the search box's 320px *width* basis
     becomes a 320px *height*, leaving a tall empty box. */
  .employer-search-box { flex-basis: auto; }
  .employer-search-toolbar-row .cta-button { width: 100%; }
}

/* Candidate result cards: a responsive multi-column grid rather than one
   full-width column -- with the filters sidebar gone (see above), a single
   column left most of a wide viewport empty. */
.candidate-results-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px;
}
.candidate-results-grid .candidate-card { margin-bottom: 0; }

/* Employer billing (backend/static/employer-billing.html): 4-card pricing grid */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 28px; }
.pricing-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 12px; padding: 24px 20px;
  background: var(--card); box-shadow: 0 1px 2px rgba(8, 39, 46, 0.05);
}
.pricing-card h3 { margin: 0 0 4px; font-size: 1.1rem; }
.pricing-card .price { font-size: 1.8rem; font-weight: 800; color: var(--heading); margin: 6px 0 0; letter-spacing: -0.02em; }
.pricing-card .price-period { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; margin-bottom: 12px; }
.pricing-card .pricing-credits { font-size: 0.85rem; font-weight: 650; color: var(--heading); margin-bottom: 16px; }
.pricing-card ul { list-style: none; padding: 0; margin: 0 0 20px; flex: 1 1 auto; }
.pricing-card li { font-size: 0.85rem; padding: 4px 0 4px 20px; position: relative; }
.pricing-card li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.pricing-card .cta-button { margin-top: auto; text-align: center; }
.pricing-current-badge {
  display: inline-block; align-self: flex-start; font-size: 0.72rem; font-weight: 700; color: var(--heading);
  background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; margin-bottom: 10px;
}
.pricing-current-badge[hidden] { display: none; }
.cta-button:disabled { opacity: 0.55; cursor: default; }
.cta-button:disabled:hover { background: var(--accent); }

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* --- Company directory (/companies/) --------------------------------------
   Crawlable A-Z index that gives company pages real internal links, which
   a JS search box cannot. Plain lists on purpose -- these pages exist for
   crawlers first, so link density and clarity matter more than styling. */
.directory-letters {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0;
}
.directory-letters a, .directory-letters strong {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--card); text-decoration: none; color: var(--accent);
  font-weight: 600; text-transform: uppercase;
}
.directory-letters a:hover { background: var(--accent-soft); }
.directory-letters strong { background: var(--accent); color: #fff; border-color: var(--accent); }
.directory-letter-count {
  font-size: .75rem; font-weight: 400; color: var(--text-muted); text-transform: none;
}
.directory-list { list-style: none; padding: 0; margin: 24px 0; columns: 2; column-gap: 32px; }
.directory-list li {
  break-inside: avoid; padding: 7px 0; border-bottom: 1px solid var(--border);
}
.directory-list a { text-decoration: none; color: var(--accent); font-weight: 500; }
.directory-list a:hover { text-decoration: underline; }
.directory-count { display: block; font-size: .75rem; color: var(--text-muted); }
.directory-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 28px 0; font-size: .9rem;
}
.directory-note { color: var(--text-muted); font-size: .9rem; }
.breadcrumb { font-size: .85rem; color: var(--text-muted); margin-bottom: 4px; }
@media (max-width: 640px) { .directory-list { columns: 1; } }

/* --- Admin dashboard (admin.html) -------------------------------------
   Internal, noindex, one reader. Charts are hand-rolled inline SVG: the
   site has a zero-external-requests policy (see the self-hosted Inter
   note in CLAUDE.md), so a chart library is not an option here.

   --chart-data-1/-2 are the only two series colors on the page, and they
   are validated rather than picked by eye -- teal+amber clears adjacent
   CVD separation (deutan dE 20.0, tritan 28.8), the chroma floor, the
   lightness band, and 3:1 contrast on white. The obvious in-palette
   choice, teal + --chart-pink, fails protan separation at dE 3.3: the two
   collapse into each other for a red-blind reader. Re-validate before
   substituting either one. */
:root {
  --chart-data-1: #0891b2;
  --chart-data-2: #b45309;
  --chart-grid: #e6eef0;
}

.admin-meta { color: var(--text-muted); font-size: .85rem; margin-bottom: 28px; }
.admin-section { margin: 40px 0 0; }
.admin-section > h2 {
  font-size: 1.15rem; margin: 0 0 4px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.admin-section-note { color: var(--text-muted); font-size: .85rem; margin: 8px 0 18px; }

.admin-kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin: 16px 0 8px;
}
.admin-kpi {
  background: var(--card); border: 1px solid var(--border); border-radius: 4px;
  padding: 14px 16px;
}
/* Proportional figures, not tabular-nums: these are standalone display
   numbers, not a column that needs to align vertically. */
.admin-kpi .value {
  font-size: 1.7rem; font-weight: 700; color: var(--heading);
  letter-spacing: -0.02em; line-height: 1.1;
}
.admin-kpi .label { color: var(--text-muted); font-size: .78rem; margin-top: 4px; }
.admin-kpi .sub { color: var(--text-muted); font-size: .74rem; margin-top: 2px; }
.admin-kpi.hero { background: var(--accent-soft); border-color: var(--border-strong); }
.admin-kpi.hero .value { font-size: 2.6rem; }

.admin-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px; margin-top: 16px;
  /* Not the default `stretch`: opening one card's "Show data" table would
     otherwise stretch every sibling in its row to match, leaving a tall
     blank area inside cards that have nothing more to show. */
  align-items: start;
}
.admin-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 4px;
  padding: 16px 18px 12px;
}
.admin-card h3 { font-size: .95rem; margin: 0 0 2px; }
.admin-card .card-note { color: var(--text-muted); font-size: .78rem; margin: 0 0 10px; }
/* The plot and its x-axis band share one auto-height container -- a fixed
   height here would clip the date labels into a nested scrollbar. */
.admin-card svg { display: block; width: 100%; height: auto; overflow: visible; }

.admin-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 10px; font-size: .78rem; }
.admin-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); }
.admin-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* Horizontal breakdown bars. One hue for every bar: these are nominal
   categories, so shading by value would double-encode bar length. */
.admin-bars { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.admin-bar-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: baseline; }
.admin-bar-row .name { font-size: .82rem; color: var(--text); overflow-wrap: anywhere; }
.admin-bar-row .num { font-size: .82rem; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.admin-bar-track { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--bg-soft); }
.admin-bar-fill { height: 100%; border-radius: 4px; background: var(--chart-data-1); min-width: 2px; }

/* Two-class part-to-whole. The 2px gap is a surface-colored spacer
   between segments, not a border drawn around them. */
.admin-split { display: flex; gap: 2px; height: 12px; margin: 6px 0 10px; }
.admin-split > span { border-radius: 3px; min-width: 3px; }

.admin-table-toggle { margin-top: 6px; font-size: .78rem; color: var(--text-muted); }
.admin-table-toggle summary { cursor: pointer; }
.admin-data-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .78rem; }
.admin-data-table th, .admin-data-table td {
  text-align: left; padding: 3px 8px 3px 0; border-bottom: 1px solid var(--border);
}
.admin-data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Tooltips enhance, never gate: every charted value is also in the
   "Show data" table below its chart. */
.admin-tooltip {
  position: fixed; z-index: 40; pointer-events: none; display: none;
  background: var(--heading); color: #fff; font-size: .75rem;
  padding: 5px 9px; border-radius: 4px; white-space: nowrap;
}
.admin-empty { color: var(--text-muted); font-size: .85rem; padding: 10px 0; }