/* ==========================================================================
   CitizenHire design system — global remote talent marketplace
   Premium, trustworthy, international. Green + white. (Replaces the
   retired Google Sheets aesthetic entirely.)  Single external stylesheet.
   ========================================================================== */

:root {
  /* Color */
  --bg: #ffffff;
  --surface: #f8fafc;
  --surface-2: #f1f5f9;
  --ink: #0f172a;
  --ink-soft: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --primary: #0fa36b;
  --primary-dark: #0b8a5a;
  --primary-tint: #eafaf3;
  --accent: #0fa36b;
  --accent-dark: #0b8a5a;
  --success: #16a34a;
  --success-tint: #dcfce7;
  --info: #0ea5e9;
  --info-tint: #e0f2fe;
  --danger: #dc2626;
  --danger-tint: #fef2f2;

  /* Type */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Shape & space */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
  --shadow: 0 4px 12px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .14);
  --maxw: 1160px;
  --maxw-narrow: 760px;

  /* Height of the pinned chrome (daily strip + nav). Anything else that sticks
     below it offsets by this, so the two cannot drift apart when the strip's
     copy or padding changes. Measured, not guessed: 40 + 71 at desktop. */
  --top-chrome: 111px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -.02em; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- Layout helpers ---- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 56px 0; }
.section-narrow { max-width: var(--maxw-narrow); margin: 0 auto; padding: 0 24px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.section-head h2 { font-size: 26px; margin: 0; }
.muted { color: var(--muted); }
.center { text-align: center; }
.lead { font-size: 19px; color: var(--ink-soft); }
.eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: 13px; font-weight: 700; color: var(--primary); margin: 0 0 14px; }
.link { color: var(--primary); font-weight: 600; }
.link:hover { text-decoration: underline; }
.stack > * + * { margin-top: 14px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: transform .04s, background .15s, border-color .15s, box-shadow .15s; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }
.btn-accent { background: var(--accent); color: #1f1300; }
.btn-accent:hover { background: var(--accent-dark); color: #1f1300; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--muted); color: var(--ink); }
.btn-sm { padding: 9px 15px; font-size: 14px; }
.btn-lg { padding: 15px 28px; font-size: 17px; }
.btn-block { width: 100%; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); cursor: pointer; }
.linkbtn:hover { color: var(--primary); }
.inline { display: inline; margin: 0; }

/* ---- Header / nav ---- */
/* The daily strip and the nav pin together as one block, so the standing offer
   stays on screen instead of scrolling away with the content. Sticking the
   wrapper rather than each child means the nav lands under the strip at any
   height, including the widths where the strip wraps to two lines. */
.site-top { position: sticky; top: 0; z-index: 60; transition: transform .22s ease; }
/* Scrolling down into a list releases the chrome (assets/js/chrome-autohide.js);
   scrolling up returns it. Anything pinned beneath reclaims the space as it
   goes, which is why those offsets read --top-chrome rather than a constant. */
body.chrome-hidden .site-top { transform: translateY(-100%); }
body.chrome-hidden { --top-chrome: 0px; }
/* The wrapper does the sticking now; a nested sticky here would fight it. */
.site-header { position: static; z-index: auto; background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: 22px; max-width: var(--maxw); margin: 0 auto; padding: 14px 24px; }
.brand { font-size: 21px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); display: inline-flex; align-items: center; }
.brand b { color: var(--primary); font-weight: 800; }
.brand:hover { color: var(--ink); } /* logo stays stable on hover; don't inherit the global green link-hover */
.nav-links { display: flex; gap: 6px; }
.nav-links a { padding: 8px 12px; border-radius: var(--radius-sm); color: var(--ink-soft); font-weight: 500; font-size: 15px; }
.nav-links a:hover { background: var(--surface-2); color: var(--ink); }
.nav-links a.active { color: var(--primary); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav-actions a:not(.btn) { color: var(--ink-soft); font-weight: 600; font-size: 15px; }
.nav-actions a:not(.btn):hover { color: var(--primary); }

/* ---- Hero ---- */
.hero { background: radial-gradient(120% 120% at 50% 0%, var(--primary-tint) 0%, #fff 55%); border-bottom: 1px solid var(--line); }
.hero-inner { max-width: 900px; margin: 0 auto; padding: 72px 24px 60px; text-align: center; }
.hero h1 { font-size: clamp(32px, 5.2vw, 50px); margin: 0 0 20px; }
.hero h1 .hl { color: var(--primary); }
.hero-sub { font-size: 19px; color: var(--ink-soft); max-width: 660px; margin: 0 auto 30px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.searchbar { display: flex; gap: 8px; max-width: 640px; margin: 0 auto; background: #fff; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.searchbar input { flex: 1; border: 0; padding: 12px 14px; font: inherit; font-size: 16px; background: transparent; }
.searchbar input:focus { outline: none; }
.hero-meta { margin: 22px 0 0; color: var(--muted); font-size: 15px; }
.trust-logos { margin-top: 26px; color: var(--muted); font-size: 13px; letter-spacing: .04em; }

/* ---- Cards / talent grid ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.pcard { display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s, border-color .15s; }
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.pcard-top { display: flex; align-items: center; gap: 13px; }
.avatar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; }
.avatar-lg { width: 80px; height: 80px; font-size: 30px; border-radius: 24px; }
img.avatar { object-fit: cover; background: var(--surface-2); }
.pcard-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pcard-name { font-weight: 700; font-size: 16px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-loc { font-size: 13px; color: var(--muted); }
.pcard-headline { margin: 0; font-size: 14.5px; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-cta { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--primary); }
.pcard-cat { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--primary); }

.field-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 26px; }
.field-chip { font-size: 13px; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink-soft); background: #fff; }
.field-chip:hover { border-color: var(--primary); color: var(--primary); }

.badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.badge-open_to_work { background: var(--success-tint); color: #15803d; }
.badge-open_to_offers { background: var(--info-tint); color: #0369a1; }
.badge-not_available { background: var(--surface-2); color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { font-size: 12.5px; padding: 5px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink-soft); }
a.chip:hover { border-color: var(--primary); color: var(--primary); }

/* ---- How it works ---- */
.band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; margin-top: 30px; }
.step { text-align: center; }
.step-n { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; margin-bottom: 14px; }
.step h3 { font-size: 18px; margin: 0 0 6px; }
.step p { color: var(--muted); margin: 0; }

/* ---- Empty / pager ---- */
.empty { text-align: center; padding: 60px 24px; background: #fff; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.empty h3 { margin: 0 0 8px; }
.empty p { color: var(--muted); margin: 0 0 20px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 36px; }
.pager-info { color: var(--muted); font-size: 14px; }

/* ---- Filters ---- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filters input, .filters select { padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; font-size: 14.5px; background: #fff; }
.filters .f-q { flex: 1; min-width: 220px; }
.filters input:focus, .filters select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.14); }

/* ---- Forms / auth ---- */
.authwrap { max-width: 460px; margin: 0 auto; padding: 60px 24px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); }
.card h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 14px; }
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.field > span small { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; font-size: 15px; background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.14); }
.field textarea { resize: vertical; }
.field .err { display: block; color: var(--danger); font-size: 13px; margin-top: 5px; }
.formerr { background: var(--danger-tint); border: 1px solid #fecaca; color: var(--danger); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 18px; }
.formerr p { margin: 0; font-size: 14px; }
.flash { border-radius: var(--radius-sm); padding: 13px 16px; margin-bottom: 18px; font-size: 14.5px; }
.flash-ok { background: var(--success-tint); border: 1px solid #bbf7d0; color: #15803d; }
.flash-gate { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 18px; }
.toggles { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 24px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.check input { width: 18px; height: 18px; }
.auth-alt { text-align: center; margin: 20px 0 0; color: var(--muted); font-size: 14px; }
.g-btn-wrap { display: flex; justify-content: center; margin: 8px 0 4px; min-height: 44px; }
.or-divider { display: flex; align-items: center; text-align: center; color: var(--muted); font-size: 13px; margin: 18px 0; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.or-divider span { padding: 0 12px; }

/* Avatar upload + completeness meter (dashboard) */
.avatar-field { display: flex; align-items: center; gap: 18px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.field-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.avatar-field input[type=file] { font-size: 14px; max-width: 280px; }
.avatar-hint { font-size: 13px; margin: 6px 0 0; }
.meter-card { margin-bottom: 18px; }
.meter-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.meter-head .muted { font-size: 14px; }
.meter { height: 8px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: var(--radius-pill); transition: width .3s; }
.meter-todo { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 14px 0 0; }
.meter-todo li { font-size: 13px; padding: 5px 11px; background: var(--primary-tint); color: var(--primary-dark); border-radius: var(--radius-pill); }

/* Verification badges */
.verify-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: #0369a1; background: var(--info-tint); padding: 3px 10px; border-radius: var(--radius-pill); vertical-align: middle; }
.profile-id h1 .verify-badge { font-size: 14px; }
.verify-tick { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 10px; font-weight: 800; color: #fff; background: var(--info); border-radius: 50%; vertical-align: middle; }

/* Admin / moderation */
.admin-stats { display: flex; flex-wrap: wrap; gap: 18px; margin: 6px 0 18px; color: var(--muted); font-size: 14px; }
.admin-stats strong { color: var(--ink); }
.admin-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.admin-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--surface); }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr.is-hidden { background: var(--danger-tint); }
.admin-cit { display: flex; align-items: center; gap: 10px; }
.admin-cit .avatar { width: 36px; height: 36px; font-size: 13px; }
.adm-name { display: block; font-weight: 600; color: var(--ink); }
.adm-sub { display: block; font-size: 12px; color: var(--muted); }
.admin-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-actions .inline { margin: 0; }

/* ---- Profile detail ---- */
.profile { max-width: 1000px; margin: 0 auto; padding: 40px 24px 64px; }
.owner-bar { background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-sm); padding: 11px 15px; margin-bottom: 22px; font-size: 14px; display: flex; align-items: center; gap: 12px; }
.owner-bar .btn { margin-left: auto; }
.profile-head { display: flex; align-items: center; gap: 22px; padding-bottom: 26px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.profile-id { flex: 1; min-width: 220px; }
.profile-id h1 { margin: 0 0 6px; font-size: 30px; }
.profile-headline { margin: 0 0 10px; font-size: 18px; color: var(--ink-soft); }
.profile-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; color: var(--muted); font-size: 14.5px; margin: 0; }
.profile-cta { display: flex; gap: 8px; }
.profile-body { display: grid; grid-template-columns: 1fr 320px; gap: 26px; margin-top: 30px; }
.profile-main { display: flex; flex-direction: column; gap: 20px; }
.profile-side { display: flex; flex-direction: column; gap: 16px; }
.bio { margin: 0; line-height: 1.7; white-space: pre-line; }
.kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; }
.kv dt { color: var(--muted); font-size: 14px; }
.kv dd { margin: 0; font-weight: 600; font-size: 14px; }
.side-links { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.note p { margin: 0; font-size: 13px; color: var(--muted); }

/* ---- Content / legal pages ---- */
.prose h1 { font-size: 32px; margin: 0 0 16px; }
.prose h2 { font-size: 20px; margin: 30px 0 10px; }
.prose h3 { font-size: 16px; margin: 22px 0 8px; font-weight: 700; }
.prose p { line-height: 1.7; }
.prose ul { padding-left: 20px; margin: 0 0 16px; }
.prose li { margin-bottom: 8px; line-height: 1.65; }
.prose .contact-big { font-size: 22px; font-weight: 700; margin: 18px 0; }
.cta-row { margin: 28px 0; display: flex; gap: 12px; flex-wrap: wrap; }
.fineprint { font-size: 13px; color: var(--muted); margin-top: 30px; border-top: 1px solid var(--line); padding-top: 16px; }

/* ── Editorial guides ───────────────────────────────────────────────
   The index is a shelved library, not a feed: a topic nav that fits on the
   first screen, then one section per shelf. Neutral header — the green stays
   on the buttons that ask for something.                                   */
.gd-head { background: radial-gradient(120% 120% at 50% 0%, var(--surface) 0%, #fff 62%); border-bottom: 1px solid var(--line); }
.gd-head-in { max-width: 1080px; margin: 0 auto; padding: clamp(30px, 4.5vw, 52px) 24px clamp(22px, 3vw, 32px); }
.gd-head h1 { font-size: clamp(28px, 4.6vw, 42px); margin: 0 0 12px; letter-spacing: -.03em; }
.gd-lead { font-size: clamp(15.5px, 2vw, 18px); color: var(--ink-soft); line-height: 1.55; max-width: 74ch; margin: 0; }

/* the whole taxonomy, and its shape, before any scrolling */
.gd-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }
.gd-jump a { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 7px 14px; color: var(--ink-soft); transition: border-color .15s, color .15s, box-shadow .15s; }
.gd-jump a:hover { border-color: var(--muted); color: var(--ink); box-shadow: var(--shadow-sm); }
.gd-jump a span { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: var(--radius-pill); padding: 1px 7px; }

.gd { max-width: 1080px; margin: 0 auto; padding: 0 24px 72px; }
/* the header is sticky, so an anchored heading has to clear it */
.gd-topic { margin: clamp(34px, 4.5vw, 50px) 0 0; scroll-margin-top: 84px; }
.gd-topic h2 { font-size: clamp(20px, 2.8vw, 26px); margin: 0 0 6px; }
.gd-topic-sub { color: var(--muted); font-size: 14.5px; line-height: 1.55; max-width: 78ch; margin: 0 0 18px; }

.gd-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.gd-card { display: flex; flex-direction: column; gap: 7px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.gd-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.gd-card-title { font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.35; }
/* Clamped: 54 full summaries is what made the old page twelve screens long. */
.gd-card-sum { font-size: 13.5px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@media (min-width: 700px) { .gd-grid { grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (min-width: 1000px) { .gd-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  /* Wrapped, eight topics stacked seven rows deep and swallowed the first
     screen — the nav is meant to orient you, not be the page. One row that
     scrolls; the negative margin lets it run to the edges past .gd-head-in. */
  .gd-jump { flex-wrap: nowrap; overflow-x: auto; margin: 22px -24px 0; padding: 0 24px 4px; scrollbar-width: none; }
  .gd-jump::-webkit-scrollbar { display: none; }
  .gd-jump a { flex: 0 0 auto; }
}

.guide-byline { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.guide-related { margin-top: 44px; border-top: 1px solid var(--line); padding-top: 22px; }
.guide-related h2 { font-size: 18px; margin: 0 0 14px; }
.guide-related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.guide-related a { color: var(--primary); font-weight: 600; }
.press-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0 28px; }
.press-facts div, .press-angle-grid > div { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 16px; }
.press-facts strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 5px; }
.press-facts span { display: block; font-weight: 700; color: var(--ink); line-height: 1.35; }
.press-angle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 0 24px; }
.press-angle-grid h3 { margin: 0 0 8px; font-size: 17px; }
.press-angle-grid p { margin: 0; font-size: 14.5px; color: var(--muted); }

/* ---- Pricing (employer) ---- */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 28px; }
.price { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.price.feat { border-color: var(--primary); box-shadow: var(--shadow); position: relative; }
.price .amt { font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.price .amt span { font-size: 15px; font-weight: 500; color: var(--muted); }
.price ul { list-style: none; padding: 0; margin: 16px 0; }
.price li { padding: 7px 0 7px 26px; position: relative; font-size: 14.5px; }
.price li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 700; }

/* ---- Footer ---- */
.footer { background: var(--surface); color: var(--ink-soft); margin-top: 40px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; max-width: var(--maxw); margin: 0 auto; padding: 56px 24px 32px; }
.footer .brand { color: var(--ink); }
.footer .brand b { color: var(--primary); }
.footer h4 { color: var(--ink); font-size: 14px; margin: 0 0 12px; }
.footer a { display: block; color: var(--ink-soft); padding: 4px 0; font-size: 14.5px; }
.footer a:hover { color: var(--primary); }
.footer p { color: var(--muted); font-size: 14px; }
.copyright { max-width: var(--maxw); margin: 0 auto; padding: 20px 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .profile-body { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav { gap: 12px; padding: 12px 16px; }
  .hero-inner { padding: 52px 20px 44px; }
  .section { padding: 40px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .press-facts, .press-angle-grid { grid-template-columns: 1fr; }
}

/* ── Virtual Job Expo entry points ─────────────────────────────── */
:root { --expo: #0fa36b; --expo-dark: #0b8a5a; --expo-tint: #eafaf3; }

.nav-expo { display: inline-flex; align-items: center; gap: 7px; color: var(--expo-dark) !important; font-weight: 600 !important; }
.nav-expo:hover { background: var(--expo-tint) !important; color: var(--expo-dark) !important; }
.nav-expo.active { color: var(--expo-dark) !important; }
.nav-expo-badge { font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--expo); padding: 2px 6px; border-radius: var(--radius-pill); line-height: 1.4; }

.expo-ribbon {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: 720px; margin: 4px auto 0; padding: 12px 18px;
  background: var(--expo-tint); border: 1px solid #bdead6; border-radius: var(--radius-pill);
  color: var(--expo-dark); font-size: 14.5px; text-align: left; transition: transform .12s ease, box-shadow .12s ease;
}
.expo-ribbon:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 163, 107, .22); }
.expo-ribbon strong { color: #0f2a20; }
.expo-ribbon span:nth-child(2) { flex: 1; min-width: 220px; }
.expo-ribbon-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--expo); box-shadow: 0 0 0 4px rgba(15, 163, 107, .16); flex: 0 0 auto; }
.expo-ribbon-go { font-weight: 700; color: #fff; background: var(--expo); padding: 8px 16px; border-radius: var(--radius-pill); white-space: nowrap; flex: 0 0 auto; }

/* ── Job Expo world (shared HUD animations + homepage hero) ─────── */
@keyframes ch-pulse { 0% { transform: scale(1); opacity: 1; } 70% { transform: scale(2.6); opacity: 0; } 100% { opacity: 0; } }
@keyframes ch-rise { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes ch-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

.world-hero { position: relative; height: calc(100svh - 53px); min-height: 560px; overflow: hidden; background: #bfe7f2; }
.world-host { position: absolute; inset: 0; }
.world-pitch {
  position: absolute; left: 34px; bottom: 34px; z-index: 8; width: 430px; max-width: calc(100% - 68px);
  background: rgba(255,255,255,.9); backdrop-filter: blur(12px); border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 18px 50px rgba(15,40,30,.18); border-radius: 20px; padding: 24px 26px; text-align: left;
}
.world-pitch .eyebrow { margin: 0 0 10px; color: var(--expo-dark); }
.world-pitch h1 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.08; margin: 0 0 12px; letter-spacing: -.02em; color: #0f2a20; }
.world-pitch h1 .hl { color: var(--expo); }
.world-pitch p { font-size: 14.5px; color: #4a5a52; line-height: 1.5; margin: 0 0 18px; }
.world-pitch .hero-actions { justify-content: flex-start; margin: 0; }
.world-scrollcue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 8;
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #0f2a20;
  background: rgba(255,255,255,.82); backdrop-filter: blur(8px); padding: 9px 16px; border-radius: 999px;
  box-shadow: 0 6px 22px rgba(15,40,30,.1); text-decoration: none; animation: ch-bob 1.8s ease-in-out infinite;
}
@keyframes ch-bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } }
@media (max-width: 720px) {
  .world-hero { height: calc(100svh - 53px); }
  .world-pitch { left: 16px; right: 16px; bottom: 70px; width: auto; padding: 18px 18px; }
  .world-pitch .hero-actions { flex-wrap: wrap; }
}

/* ── Employer stand setup page — one centered column ───────────── */
.stand-page { padding: 52px 24px 84px; }
.stand-wrap { max-width: 600px; margin: 0 auto; }
.stand-eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; font-weight: 700; color: var(--expo-dark); text-align: center; margin: 0 0 12px; }
.stand-title { text-align: center; font-size: clamp(28px, 5vw, 40px); margin: 0 0 16px; }
.stand-lead { text-align: center; font-size: 17px; line-height: 1.55; color: var(--ink-soft); margin: 0 auto 26px; max-width: 560px; }
.stand-lead strong { color: var(--ink); }
.stand-meter { max-width: 380px; margin: 0 auto 30px; text-align: center; }
.stand-meter-track { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-bottom: 9px; }
.stand-meter-track span { display: block; height: 100%; min-width: 8px; background: linear-gradient(90deg, var(--expo), var(--expo-dark)); border-radius: 999px; }
.stand-meter-label { font-size: 13.5px; color: var(--muted); }
.stand-meter-label strong { color: var(--expo-dark); }

.stand-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 28px; box-shadow: var(--shadow); text-align: left; }
.stand-card--center { text-align: center; }
.stand-card h2 { margin: 0 0 6px; font-size: 22px; }
.stand-card--center .muted { margin: 0 auto 4px; max-width: 380px; }
.stand-card-title { padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.stand-google { margin: 18px 0 2px; }
.stand-alt { margin-top: 14px; font-size: 14px; }
.stand-hp { position: absolute; left: -9999px; height: 0; width: 0; overflow: hidden; }
.stand-field { display: block; margin: 0 0 16px; }
.stand-field > span { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.stand-field > span small { color: var(--muted); font-weight: 500; }
.stand-field input[type=text], .stand-field input[type=url] { width: 100%; border: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: 11px 13px; font-size: 15px; color: var(--ink); outline: none; font-family: inherit; }
.stand-field input:focus { border-color: var(--expo); box-shadow: 0 0 0 3px rgba(15,163,107,.12); }
.stand-field--color { flex: 0 0 auto; }
.stand-field--grow { flex: 1; }
.stand-field--grow, .stand-field--color { margin-bottom: 16px; }
.stand-field--color input[type=color] { width: 54px; height: 46px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: none; cursor: pointer; padding: 3px; }
.stand-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.stand-roles { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 4px 0 18px; }
.stand-roles legend { font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 0 6px; }
.stand-roles legend small { color: var(--muted); font-weight: 500; }
.stand-rolerow { display: flex; gap: 10px; margin-bottom: 8px; }
.stand-rolerow input { flex: 1; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 11px; font-size: 14px; font-family: inherit; }
.stand-err { display: block; color: var(--danger); font-size: 12.5px; margin-top: 5px; font-style: normal; }
.stand-banner { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 18px; border-radius: var(--radius); margin: 0 0 18px; }
.stand-row .stand-field { margin-bottom: 0; }
.stand-banner--ok { background: var(--success-tint); color: #166534; }
.stand-banner--ok a { color: #166534; font-weight: 700; }
.stand-banner--err { background: var(--danger-tint); color: #991b1b; max-width: none; }
.stand-banner--cta { background: var(--expo-tint); border: 1px solid #bdead6; color: var(--expo-dark); }
.stand-banner--cta strong { color: #0f2a20; }
.stand-banner--cta em { font-style: normal; font-weight: 700; }

/* ── Expo world: mobile/touch tuning ───────────────────────────── */
@media (max-width: 720px) {
  .world-pitch { left: 12px; right: 12px; bottom: clamp(150px, 24vh, 200px); width: auto; padding: 14px 16px; border-radius: 16px; }
  .world-pitch h1 { font-size: clamp(20px, 6.4vw, 26px); }
  .world-pitch p { font-size: 13px; margin-bottom: 12px; }
  .world-pitch .hero-actions { gap: 8px; }
  .world-pitch .hero-actions .btn { padding: 10px 14px; font-size: 14px; }
}

/* Visually-hidden (screen-reader / SEO only) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Bare immersive page (homepage = the game, no header/footer chrome) */
body.bare { overflow: hidden; }
body.bare main { display: block; }
body.bare .world-hero { height: 100svh; min-height: 100svh; max-height: none; }

/* ── Stand form: logo upload, structured jobs, mobile ──────────── */
.stand-field--logo { flex: 0 0 auto; }
.stand-logo-drop { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); cursor: pointer; overflow: hidden; background: var(--surface); position: relative; }
.stand-logo-drop img { width: 100%; height: 100%; object-fit: contain; }
.stand-logo-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.stand-logo-ph { font-size: 30px; color: var(--muted); line-height: 1; }

.stand-roles-hint { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.stand-job { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; background: var(--surface); }
.stand-job input, .stand-job select { width: 100%; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 11px; font-size: 14px; font-family: inherit; background: #fff; color: var(--ink); }
.stand-job input:focus, .stand-job select:focus { border-color: var(--expo); outline: none; box-shadow: 0 0 0 3px rgba(15,163,107,.1); }
.stand-job-title { font-weight: 600; margin-bottom: 8px; }
.stand-job-meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }

.stand-banner--review { background: var(--info-tint); color: #075985; }
.stand-banner--review strong { color: #075985; }
.stand-card-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .stand-page { padding: 30px 14px 56px; }
  .stand-card { padding: 18px 14px; }
  .stand-row { flex-direction: column; align-items: stretch; gap: 16px; }
  .stand-field--logo { align-self: flex-start; }
  .stand-job-meta { grid-template-columns: 1fr; }
}

/* ── Remote Jobs engine (/jobs-next → /remote-jobs at cutover) ─── */
.jb { max-width: 1180px; margin: 0 auto; padding: 24px 14px 64px; }
.jb-hero { text-align: center; padding: 18px 0 22px; }
.jb-hero h1 { font-size: clamp(26px, 4.5vw, 40px); margin: 0 0 6px; }
.jb-sub { color: var(--muted); margin: 0 0 18px; font-size: 15px; }
.jb-search { display: flex; gap: 8px; max-width: 720px; margin: 0 auto; background: #fff; border: 1.5px solid var(--line-strong); border-radius: 14px; padding: 8px; box-shadow: 0 6px 24px rgba(15,23,42,.06); flex-wrap: wrap; }
.jb-search input[type=search] { flex: 2 1 200px; border: 0; outline: none; font: inherit; font-size: 15px; padding: 10px 12px; min-width: 0; }
.jb-search select { flex: 1 1 150px; border: 0; border-left: 1px solid var(--line); outline: none; font: inherit; font-size: 14px; padding: 10px 8px; background: #fff; color: var(--ink); min-width: 0; }
.jb-search .btn { flex: 1 0 auto; }
.jb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 14px; }
.jb-count { font-size: 15px; color: var(--muted); }
.jb-count strong { color: var(--ink); }
.jb-fbtn { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line-strong); border-radius: 10px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; background: #fff; }
.jb-ftoggle, .jb-scrim { display: none; }

.jb-layout { display: block; }
.jb-rail { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(15,23,42,.22); max-height: 78vh; overflow-y: auto; padding: 16px 18px 26px; transform: translateY(110%); transition: transform .25s ease; }
.jb-ftoggle:checked ~ .jb-layout .jb-rail { transform: translateY(0); }
.jb-ftoggle:checked ~ .jb-scrim { display: block; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 50; }
.jb-rail-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 12px; }
.jb-close { cursor: pointer; font-size: 18px; padding: 4px 10px; border-radius: 8px; background: var(--surface); }
.jb-filters { display: flex; flex-direction: column; gap: 12px; }
.jb-filters label { font-size: 13px; font-weight: 600; color: var(--muted); display: flex; flex-direction: column; gap: 5px; }
.jb-filters select { border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm, 10px); padding: 9px 11px; font: inherit; font-size: 14px; background: #fff; color: var(--ink); }
.jb-clear { font-size: 13px; color: var(--muted); text-align: center; }
.jb-trust-side { margin-top: 18px; padding: 14px; background: var(--surface); border-radius: 12px; font-size: 13px; color: var(--muted); }
.jb-trust-side h4 { margin: 0 0 6px; color: var(--ink); }
.jb-trust-side p { margin: 0; line-height: 1.55; }

.jb-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; margin-bottom: 12px; transition: border-color .15s, box-shadow .15s; }
.jb-card:hover { border-color: var(--line-strong); box-shadow: 0 6px 20px rgba(15,23,42,.07); }
.jb-card-link { display: flex; gap: 14px; padding: 16px; color: inherit; text-decoration: none; }
.jb-logo { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 19px; }
.jb-logo-lg { flex-basis: 60px; width: 60px; height: 60px; font-size: 25px; }
.jb-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jb-card-title { font-weight: 700; font-size: 16px; line-height: 1.3; }
.jb-card-co { font-size: 14px; color: var(--muted); }
.jb-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.jb-chip { font-size: 12px; background: var(--surface); border-radius: 999px; padding: 3px 9px; color: var(--muted); white-space: nowrap; }
.jb-badge { font-size: 12px; border-radius: 999px; padding: 3px 9px; font-weight: 600; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.jb-badge-world { background: #dcfce7; color: #166534; }
.jb-badge-region { background: #dbeafe; color: #1e40af; }
.jb-badge-tz { background: #fef3c7; color: #92400e; }
.jb-badge-unclear { background: #f1f5f9; color: #475569; }
.jb-badge-hybrid { background: #fae8ff; color: #86198f; }
.jb-card-verify { font-size: 12px; color: #16a34a; margin-top: 2px; }

.jb-empty { text-align: center; border: 1.5px dashed var(--line-strong); border-radius: 14px; padding: 36px 18px; margin-bottom: 14px; }
.jb-empty h3 { margin: 0 0 8px; }
.jb-empty p { color: var(--muted); margin: 0 0 14px; }
.jb-empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.jb-unstated { margin: 18px 0; border: 1px solid var(--line); border-radius: 14px; padding: 4px 16px 12px; background: #fffdf5; }
.jb-unstated summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
.jb-unstated-note { font-size: 13px; color: var(--muted); margin: 4px 0 12px; }
.jb-more { display: block; text-align: center; font-weight: 600; padding: 8px; }
.jb-pager { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 18px 0; font-size: 14px; }
.jb-pager span { color: var(--muted); }

/* Job detail */
.jb-detail { max-width: 860px; }
.jb-crumb { font-size: 14px; margin-bottom: 14px; }
.jb-closed { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-weight: 600; }
.jb-detail-head { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.jb-detail-head h1 { font-size: clamp(22px, 3.6vw, 32px); margin: 0 0 4px; line-height: 1.2; }
.jb-detail-co { color: var(--muted); font-size: 15px; }
.jb-answer { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; font-size: 15px; font-weight: 600; margin-bottom: 12px; display: flex; gap: 10px; align-items: flex-start; }
.jb-detail-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.jb-applybox { margin: 18px 0; }
.jb-applybtn { display: inline-block; font-size: 16px; padding: 13px 26px; }
.jb-applynote { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.jb-desc { line-height: 1.65; font-size: 15px; overflow-wrap: break-word; }
.jb-desc h2, .jb-desc h3 { margin: 20px 0 8px; font-size: 17px; }
.jb-desc ul { padding-left: 20px; }
.jb-desc img { max-width: 100%; height: auto; }
.jb-trust { background: var(--surface); border-radius: 14px; padding: 18px; margin: 24px 0; font-size: 14px; }
.jb-trust h3 { margin: 0 0 10px; font-size: 16px; }
.jb-trust ul { margin: 0; padding-left: 18px; line-height: 1.7; }
.jb-report { margin: 10px 0 0; font-size: 13px; }
.jb-similar h3 { margin: 22px 0 12px; }
.jb-similar-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.jb-sim { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: inherit; display: flex; align-items: center; gap: 12px; transition: border-color .15s, box-shadow .15s; }
.jb-sim:hover { border-color: var(--line-strong); box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.jb-sim-logo { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; }
.jb-sim-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jb-sim-title { font-weight: 600; font-size: 14px; line-height: 1.3; }
.jb-sim-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.jb-sim-co { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-sim .jb-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 900px) {
  .jb-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 22px; align-items: start; }
  .jb-rail { position: sticky; top: calc(var(--top-chrome) + 8px); transition: top .22s ease; right: auto; bottom: auto; left: auto; z-index: auto; align-self: start; max-height: calc(100vh - var(--top-chrome) - 24px); overflow-y: auto; transform: none; box-shadow: none; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
  .jb-fbtn, .jb-scrim, .jb-close { display: none !important; }
  .jb-rail-head { margin-bottom: 8px; }
  .jb-similar-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Homepage (the main site) ──────────────────────────────────── */
.jbh { max-width: 1120px; margin: 0 auto; padding: 0 14px 64px; }
.jbh-hero { text-align: center; padding: clamp(28px, 6vw, 64px) 0 28px; }
.jbh-hero h1 { font-size: clamp(30px, 6vw, 52px); margin: 0 0 10px; letter-spacing: -0.02em; }
.jbh-tag { color: var(--muted); font-size: clamp(15px, 2.4vw, 18px); max-width: 640px; margin: 0 auto 24px; line-height: 1.5; }
.jbh-tag strong { color: var(--ink); }
.jbh-search { display: flex; gap: 8px; max-width: 760px; margin: 0 auto 14px; background: #fff; border: 1.5px solid var(--line-strong); border-radius: 16px; padding: 8px; box-shadow: 0 10px 34px rgba(15,23,42,.09); flex-wrap: wrap; }
.jbh-search input[type=search] { flex: 3 1 220px; border: 0; outline: none; font: inherit; font-size: 16px; padding: 12px 14px; min-width: 0; background: transparent; color: var(--ink); }
.jbh-search select { flex: 1 1 160px; border: 0; border-left: 1px solid var(--line); outline: none; font: inherit; font-size: 15px; padding: 12px 10px; background: #fff; color: var(--ink); min-width: 0; }
.jbh-search .btn { flex: 1 0 auto; font-size: 15px; padding: 12px 22px; }
.jbh-quick { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 4px 0 14px; }
.jbh-quick a { font-size: 13px; font-weight: 600; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; color: var(--ink); text-decoration: none; transition: border-color .15s, background .15s; }
.jbh-quick a:hover { border-color: var(--line-strong); background: #fff; }
.jbh-trustline { font-size: 13px; color: #16a34a; margin: 6px 0 0; }

.jbh-section { margin: 40px 0 0; }
.jbh-section h2 { font-size: clamp(20px, 3vw, 26px); margin: 0 0 16px; }
.jbh-section-sub { margin: -8px 0 18px; color: var(--muted); font-size: 14.5px; line-height: 1.5; max-width: 640px; }
.jbh-section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.jbh-section-head h2 { margin: 0; }
.jbh-seeall { font-weight: 600; font-size: 14px; white-space: nowrap; }
.jbh-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.jbh-cat { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: inherit; font-weight: 600; font-size: 15px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.jbh-cat:hover { border-color: var(--line-strong); box-shadow: 0 6px 18px rgba(15,23,42,.06); }
.jbh-cat-n { font-weight: 700; color: var(--brand, #4f46e5); font-size: 14px; }
.jbh-featured { display: grid; grid-template-columns: 1fr; gap: 12px; }
.jbh-fcard { display: flex; gap: 14px; padding: 16px; text-decoration: none; color: inherit; }

.jbh-how { margin: 48px 0 0; }
.jbh-how h2 { font-size: clamp(20px, 3vw, 26px); margin: 0 0 18px; text-align: center; }
.jbh-how-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.jbh-how-grid > div { background: var(--surface); border-radius: 14px; padding: 22px; }
.jbh-how-ico { font-size: 28px; display: block; margin-bottom: 10px; }
.jbh-how-grid h3 { margin: 0 0 8px; font-size: 17px; }
.jbh-how-grid p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 14px; }

@media (min-width: 720px) {
  .jbh-cats { grid-template-columns: repeat(3, 1fr); }
  .jbh-featured { grid-template-columns: 1fr 1fr; }
  .jbh-how-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .jbh-cats { grid-template-columns: repeat(4, 1fr); }
  .jbh-featured { grid-template-columns: 1fr 1fr 1fr; }
}

/* ── Date browser (Product-Hunt-style, homepage) ───────────────── */
.jbd { margin: 40px 0 0; }
.jbd-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.jbd-bar h2 { font-size: clamp(20px, 3vw, 26px); margin: 0; }
.jbd-tabs { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.jbd-tabs a { padding: 7px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; }
.jbd-tabs a.active { background: #fff; color: var(--primary-dark); box-shadow: 0 1px 3px rgba(15,23,42,.1); }

.jbd-stripwrap { display: flex; align-items: stretch; gap: 6px; border: 1px solid var(--line); border-radius: 12px; padding: 6px; background: #fff; margin-bottom: 18px; }
.jbd-arrow { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 34px; border-radius: 8px; font-size: 22px; color: var(--ink-soft); text-decoration: none; background: var(--surface); }
.jbd-arrow:hover { background: var(--surface-2); color: var(--ink); }
.jbd-arrow.is-disabled { opacity: .3; pointer-events: none; }
.jbd-strip { display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x proximity; flex: 1 1 auto; scrollbar-width: thin; }
.jbd-strip::-webkit-scrollbar { height: 5px; }
.jbd-strip::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.jbd-day { flex: 1 0 34px; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; min-width: 34px; height: 40px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--muted); }
.jbd-day.has-jobs { color: var(--ink); }
.jbd-day.has-jobs:hover { background: var(--primary-tint); color: var(--primary-dark); }
.jbd-day.is-empty { color: var(--line-strong); font-weight: 500; }
.jbd-day.is-empty:hover { background: var(--surface); }
.jbd-day.is-future { color: var(--line); pointer-events: none; }
.jbd-day.is-sel { background: var(--primary); color: #fff !important; box-shadow: 0 2px 8px rgba(15,163,107,.35); }

.jbd-body { display: block; }
.jbd-list h3 { font-size: 17px; margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.jbd-count { font-size: 14px; font-weight: 600; color: var(--primary-dark); background: var(--primary-tint); padding: 2px 10px; border-radius: 999px; }
.jbd-empty { border: 1.5px dashed var(--line-strong); border-radius: 12px; padding: 30px 18px; text-align: center; color: var(--muted); }
.jbd-empty a { font-weight: 600; }
.jbd-archive { margin-top: 22px; }
.jbd-archive h4 { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 8px; }
.jbd-archive a { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--ink-soft); font-weight: 500; font-size: 14px; }
.jbd-archive a:hover { background: var(--surface); }
.jbd-archive a.active { background: var(--primary-tint); color: var(--primary-dark); font-weight: 600; }
.jbd-archive a span { color: var(--muted); font-size: 13px; }

@media (min-width: 900px) {
  /* The date picker used to pin here. With the chrome pinned above it that
     was 245px of a 900px viewport frozen while someone read job rows, so it
     scrolls away with the content now and the list gets the whole screen.
     The shadow went with the pinning — it existed to lift a floating bar off
     the rows passing under it, and there is nothing passing under it now. */
  .jbd-sticky { padding: 12px 0 10px; }
  .jbd-sticky .jbd-stripwrap { margin-bottom: 0; }
  .jbd-body { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 26px; align-items: start; padding-top: 16px; }
  .jbd-archive { margin-top: 0; }
  .jbd-day { flex: 1 1 auto; }
}

/* ── Date-browser job rows (one job per row, responsive) ───────── */
.jbd-rows { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.jbd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 13px 16px; color: inherit; text-decoration: none; }
.jbd-row + .jbd-row { border-top: 1px solid var(--line); }
.jbd-row:hover { background: var(--surface); }
.jbd-row-logo { order: 0; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; }
.jbd-row-main { order: 1; flex: 1 1 60%; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jbd-row-title { font-weight: 700; font-size: 15px; color: var(--ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jbd-row-co { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jbd-row-when { order: 2; flex: 0 0 auto; margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.jbd-row-meta { order: 3; flex: 1 1 100%; display: flex; align-items: center; gap: 8px; margin-left: 54px; min-width: 0; }
.jbd-row-meta .jb-badge, .jbd-row-meta .jb-chip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 720px) {
  .jbd-row { flex-wrap: nowrap; gap: 14px; }
  .jbd-row-main { flex: 1 1 auto; }
  .jbd-row-meta { order: 2; flex: 0 1 auto; margin-left: 0; justify-content: flex-end; max-width: 46%; }
  .jbd-row-when { order: 3; margin-left: 0; min-width: 62px; text-align: right; }
}

/* Aged-listing signal (ghost red flag we can honestly surface) */
.jb-aged { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; border-radius: 10px; padding: 11px 14px; font-size: 14px; margin-bottom: 14px; line-height: 1.5; }
.jb-aged a { color: #92400e; font-weight: 600; text-decoration: underline; }
@media (prefers-color-scheme: dark) { .jb-aged { background: #33280c; color: #f2c777; border-color: #5c4a1a; } .jb-aged a { color: #f2c777; } }

/* Honeypot, still used by the talent contact relay. */
.jbh-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ── Saved-search alert CTA (SERP) ─────────────────────────────── */
.jb-alertcta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin-top: 22px; }
.jb-alertcta-tx { display: flex; flex-direction: column; gap: 2px; }
.jb-alertcta-tx strong { font-size: 15px; }
.jb-alertcta-tx span { font-size: 13px; color: var(--ink-soft); }
.jb-alertform { display: flex; gap: 8px; flex-wrap: wrap; }
.jb-alertform input[type=email] { border: 1.5px solid var(--line-strong); border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 14px; background: #fff; color: var(--ink); min-width: 180px; }
.jb-alertform input[type=email]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15,163,107,.14); }
@media (max-width: 560px) { .jb-alertform, .jb-alertform input[type=email] { width: 100%; } }

/* ── The daily email — the one CTA, on every page ───────────────────
   One component (partials/daily_cta.php) in four shapes: band (section-sized),
   row (inline strip under a list), card (in-feed / end of an article) and mini
   (the footer band). Each is a link to /daily now; the form styles went with
   the forms, because Substack's embed there is the only capture point.    */
.dl-act { display: flex; flex-wrap: wrap; gap: 10px; }
.dl-fine { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; line-height: 1.5; }
.dl-fine a { color: var(--primary-dark); text-decoration: underline; }

/* band — a full section, the strongest ask on the page */
.dl-band { margin: 48px 0 0; }
.dl-band-inner { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 40px); text-align: center; }
.dl-kicker { display: inline-block; text-transform: uppercase; letter-spacing: .09em; font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.dl-band h2 { font-size: clamp(20px, 3vw, 27px); margin: 0 0 8px; letter-spacing: -.02em; }
.dl-band-inner > p { color: var(--ink-soft); max-width: 54ch; margin: 0 auto 20px; }
.dl-band .dl-act { justify-content: center; }
/* The fine print is also a direct <p>, so it inherits the sub-line's spacing
   above; restate it rather than leaving a 60px hole under the band. */
.dl-band-inner > .dl-fine { max-width: 60ch; margin: 14px auto 0; }

/* row — sits under a job list, text left / button right */
.dl-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin-top: 22px; }
.dl-row-tx { display: flex; flex-direction: column; gap: 3px; flex: 1 1 250px; }
.dl-row-tx strong { font-size: 15.5px; }
.dl-row-tx span { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.dl-row .dl-act { flex: 0 0 auto; }

/* card — in the middle of a feed, or after a guide */
/* The green tint went with the forms: the button is the only green these need,
   and it reads as the action precisely because nothing around it competes. */
.dl-card { display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; margin: 24px 0; }
.dl-card-tx { flex: 1 1 300px; min-width: 0; }
.dl-card h3 { font-size: 16.5px; margin: 0 0 4px; letter-spacing: -.01em; }
.dl-card-tx p { color: var(--ink-soft); font-size: 14px; margin: 0; line-height: 1.55; }
.dl-card-act { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.dl-card-act .dl-fine { margin: 0; font-size: 11.5px; }

/* mini — the footer band, above the footer columns */
.dl-mini { max-width: var(--maxw); margin: 0 auto; padding: 32px 24px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px 40px; align-items: center; border-bottom: 1px solid var(--line); }
.dl-mini h4 { grid-column: 1; margin: 0 0 4px; font-size: 17px; color: var(--ink); letter-spacing: -.01em; }
.dl-mini p { grid-column: 1; grid-row: 2; margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.dl-mini .dl-act { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; }
@media (max-width: 720px) {
  .dl-mini { grid-template-columns: 1fr; padding: 26px 24px; }
  .dl-mini h4, .dl-mini p, .dl-mini .dl-act { grid-column: 1; grid-row: auto; }
  .dl-mini .dl-act { margin-top: 14px; justify-content: flex-start; }
}

/* /daily's Substack embed — the site's only capture point. Substack's own
   snippet hardcodes width="480", which overflows any phone; the framed
   document declares width=device-width, so a fluid iframe reflows correctly. */
.dlp-embed { max-width: 480px; margin: 28px auto 0; }
.dlp-embed iframe { display: block; width: 100%; height: 190px; border: 0; background: transparent; }
.dlp-embed-fine { max-width: 48ch; margin: 12px auto 0; text-align: center; }

/* bare — retired with the forms */

/* ── /daily — the landing page for the email ────────────────────────
   The one conversion page on the site, so it gets a real hero instead of the
   shared .prose treatment the legal pages use. Two forms only: the hero and
   the close (layout.php drops the top strip and footer form on this route).  */
/* Neutral, not tinted: the green belongs on the button that is the ask, not
   washed across the whole first screen. */
.dlp-hero { background: radial-gradient(120% 120% at 50% 0%, var(--surface) 0%, #fff 62%); border-bottom: 1px solid var(--line); }
.dlp-hero-in { max-width: 780px; margin: 0 auto; padding: clamp(34px, 5vw, 60px) 24px clamp(30px, 4vw, 44px); text-align: center; }
.dlp-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .09em; font-size: 11.5px; font-weight: 700; color: var(--muted); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 5px 14px; margin-bottom: 18px; }
.dlp-hero h1 { font-size: clamp(29px, 5vw, 46px); margin: 0 0 14px; letter-spacing: -.03em; }
.dlp-lead { font-size: clamp(16px, 2.2vw, 19px); color: var(--ink-soft); line-height: 1.55; max-width: 60ch; margin: 0 auto; }
.dlp-lead strong { color: var(--ink); }

/* The form is the point of the page: give it room and lift it off the tint. */
.dlp-hero .dl-fine { max-width: 48ch; margin: 13px auto 0; }

/* The numbers that make the promise checkable, next to the ask. */
.dlp-stats { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 36px; margin: 28px 0 0; padding: 0; }
.dlp-stats li { display: flex; flex-direction: column; gap: 1px; }
.dlp-stats b { font-size: clamp(20px, 3vw, 25px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dlp-stats span { font-size: 13px; color: var(--muted); }

.dlp { max-width: 1000px; margin: 0 auto; padding: 0 24px 72px; }
.dlp-sec { margin: clamp(38px, 5vw, 56px) 0 0; }
.dlp-sec > h2 { font-size: clamp(21px, 3vw, 27px); margin: 0 0 10px; }
.dlp-sub { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 70ch; margin: 0 0 20px; }
.dlp-who p { color: var(--ink-soft); line-height: 1.7; max-width: 70ch; margin: 0; }
.dlp-fine { font-size: 12.5px; color: var(--muted); margin: 16px 0 0; line-height: 1.55; }

/* value props — four claims, four cards, not four bullets */
.dlp-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
.dlp-vp { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.dlp-vp h3 { font-size: 16px; margin: 0 0 6px; }
.dlp-vp p { margin: 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }

/* a real edition, framed as the inbox item it is — the rows are the same
   partial the homepage date browser renders, so the sample cannot drift */
.dlp-mail { border: 1px solid var(--line-strong); border-radius: 16px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.dlp-mail-head { padding: 14px 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.dlp-mail-from { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--primary-dark); }
.dlp-mail-subj { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; margin-top: 2px; }
.dlp-mail-rows { border: 0; border-radius: 0; }
.dlp-mail-foot { margin: 0; padding: 13px 18px; border-top: 1px solid var(--line); background: var(--surface); font-size: 13px; color: var(--muted); text-align: center; }

/* intake bars — weekends dip, and drawn as bars that reads as the shape of the
   hiring week instead of as missing data */
.dlp-bars { display: flex; align-items: flex-end; gap: 8px; margin: 18px 0 0; }
.dlp-bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dlp-bar-n { font-size: 15px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dlp-bar-track { display: flex; align-items: flex-end; width: 100%; height: 140px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
/* A weekend's handful of jobs is a fraction of a percent of the midweek peak,
   so hold a floor: a bar that rounds to nothing reads as missing data, and the
   exact count is printed directly above it either way. */
.dlp-bar-fill { width: 100%; min-height: 6px; background: var(--primary); border-radius: 7px 7px 0 0; }
.dlp-bar-l { font-size: 12px; color: var(--muted); white-space: nowrap; }
.dlp-bar.is-weekend .dlp-bar-fill { background: #94a3b8; }
.dlp-bar.is-weekend .dlp-bar-n { color: var(--muted); font-weight: 600; }

.dlp .dl-band { margin-top: clamp(38px, 5vw, 56px); }
.dlp-out { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
/* .jbc-faq carries the category pages' own 820px cap; here it would sit
   narrower than every section around it. */
.dlp .jbc-faq { max-width: none; }

@media (min-width: 720px) { .dlp-grid { grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (max-width: 560px) {
  /* three across, or the third stat wraps onto a line by itself */
  .dlp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; }
  .dlp-stats li { align-items: center; text-align: center; }
  .dlp-stats span { font-size: 11.5px; line-height: 1.3; }
  .dlp-bars { gap: 5px; }
  .dlp-bar-n { font-size: 13px; }
  .dlp-bar-track { height: 88px; }
  .dlp-bar-l { font-size: 10.5px; white-space: normal; text-align: center; line-height: 1.25; }
}

/* hero line — the offer stated once, without competing with the search box */
/* Sits inside the homepage hero, so it follows the same no-tint rule as the
   /daily and /guides heroes: neutral surface, green only on the link. */
.jbh-daily { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 10px 20px; margin: 18px auto 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
.jbh-daily strong { color: var(--ink); }
.jbh-daily a { color: var(--primary-dark); font-weight: 600; white-space: nowrap; }
@media (max-width: 560px) { .jbh-daily { border-radius: var(--radius); padding: 12px 16px; font-size: 13.5px; } }

/* nav entry — carries a dot so the list reads as the standing offer it is */
.nav-links a.dl-nav { color: var(--primary-dark); font-weight: 600; }
.nav-links a.dl-nav::before { content: "•"; color: var(--primary); margin-right: 5px; }

/* top strip — the first thing on every page, scrolls away with the content */
.dl-bar { background: var(--ink); color: #fff; font-size: 13.5px; }
.dl-bar-in { max-width: var(--maxw); margin: 0 auto; padding: 9px 24px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; }
.dl-bar b { font-weight: 600; }
.dl-bar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; white-space: nowrap; }
.dl-bar a:hover { color: var(--primary-tint); }
@media (max-width: 560px) {
  /* Pinned chrome is charged against every screen of the visit, so the strip
     has to hold one line. At 375px the promise and the ask cannot both fit —
     clipping the promise produced "Every remote job we find, e…", which reads
     as breakage — so the phone keeps the ask, which is the tappable half and
     a complete sentence on its own. The promise is right below it on the page. */
  .dl-bar-in > span { display: none; }
  .dl-bar-in { padding: 9px 16px; font-size: 13px; flex-wrap: nowrap; }
  .dl-bar a { white-space: normal; }
}

@media (max-width: 560px) {
  .dl-row { padding: 16px; }
}

/* ── Field landing pages — /remote-{field}-jobs ─────────────────── */
.jbc-head { margin-bottom: 18px; }
.jbc-head h1 { font-size: clamp(26px, 4.5vw, 40px); margin: 0 0 8px; letter-spacing: -0.02em; }
.jbc-sub { color: var(--muted); font-size: clamp(15px, 2.2vw, 17px); line-height: 1.5; margin: 0 0 16px; max-width: 720px; }
.jbc-sub strong { color: var(--ink); }
/* The landing hero carries the real search box; left-align it (the SERP hero centres its own). */
.jbc-head .jb-search { margin: 0; max-width: 720px; }
.jbc-intro { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin: 4px 0 26px; max-width: 820px; }
.jbc-lede { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }
.jbc-points { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
.jbc-list > h2, .jbc-faq > h2, .jbc-related > h2 { font-size: clamp(19px, 3vw, 24px); margin: 26px 0 14px; }
.jbc-faq { max-width: 820px; }
.jbc-faq-item { border: 1px solid var(--line); border-radius: 12px; padding: 2px 16px; margin-bottom: 10px; background: #fff; }
.jbc-faq-item summary { cursor: pointer; font-weight: 600; padding: 12px 0; font-size: 15px; }
.jbc-faq-item p { margin: 0 0 12px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.jbc-related { margin-top: 8px; }
.jbc-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.jbc-fact { font-size: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; color: var(--ink); }
.jbc-fact-k { color: var(--muted); font-weight: 600; margin-right: 4px; }
.jbc-countrylist { display: flex; flex-wrap: wrap; gap: 8px; }
.jbc-countrylist a { font-size: 13px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; color: var(--ink-soft); text-decoration: none; transition: border-color .15s, color .15s; }
.jbc-countrylist a:hover { border-color: var(--line-strong); color: var(--ink); }

/* Home "Browse by country" pills */
.jbh-countries { display: flex; flex-wrap: wrap; gap: 8px; }
.jbh-country { font-size: 14px; font-weight: 500; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.jbh-country:hover { border-color: var(--line-strong); box-shadow: 0 4px 12px rgba(15,23,42,.06); }

/* ── Talent directory ──────────────────────────────────────────────
   The directory reuses the jobs surface wholesale (jb-hero / jb-rail /
   jb-card / jb-detail), so both inventories read as one product. Only what
   genuinely differs for a person lives here: a round avatar instead of a
   square company logo, and the contact relay that replaces "apply". */
.jb-avatar { flex: 0 0 46px; width: 46px; height: 46px; font-size: 16px; align-self: flex-start; }
/* People stay round at every size. .avatar-lg squares off for the dashboard's
   upload field, so undo that here rather than in the shared rule. */
.jb-detail-head .avatar-lg { flex: 0 0 80px; border-radius: 50%; }

/* Sits between result cards, so drop the trailing-CTA top margin and pick up
   the card rhythm instead (.jb-card is margin-bottom: 12px). */
.jb-alertcta-inline { margin: 0 0 12px; }

.jb-owner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--info-tint); border: 1px solid #bae6fd; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; color: #0c4a6e; }
.jb-h2 { font-size: 19px; margin: 26px 0 12px; }
.jb-chip-link { border: 1px solid var(--line); color: var(--ink-soft); text-decoration: none; transition: border-color .15s, color .15s; }
.jb-chip-link:hover { border-color: var(--line-strong); color: var(--ink); }

.jb-contact { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 20px; margin: 26px 0; }
.jb-contact h2 { font-size: 19px; margin: 0 0 6px; }
.jb-contact-note { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0 0 16px; }
.jb-contact-err { background: var(--danger-tint); border: 1px solid #fecaca; color: #991b1b; border-radius: 10px; padding: 11px 14px; font-size: 14px; margin-bottom: 14px; }
.jb-contact-form { display: flex; flex-direction: column; gap: 14px; }
.jb-contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.jb-contact-form input, .jb-contact-form textarea { width: 100%; border: 1.5px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 15px; background: #fff; color: var(--ink); }
.jb-contact-form textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.jb-contact-form input:focus, .jb-contact-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15,163,107,.14); }
.jb-contact-form .btn { align-self: flex-start; }
.jb-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.jb-contact-done { background: var(--primary-tint); border-color: #bdead6; }
.jb-contact-done p, .jb-contact-off p { font-size: 14.5px; color: var(--ink-soft); }
.jb-contact-off { background: var(--surface); }
.jb-contact-off p { color: var(--muted); margin: 0; }
@media (max-width: 560px) { .jb-contact-row { grid-template-columns: 1fr; } }

/* ── Homepage date browser: continuous scroll ──────────────────────
   Replaces Previous/Next paging. .jbd-more is both the no-JS link and the
   sentinel the IntersectionObserver watches, so there is one control to
   style whether or not the script loads. */
.jbd-more { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 0 4px; }
.jbd-more-btn { min-width: 190px; text-align: center; }
.jbd-more.is-loading .jbd-more-btn { pointer-events: none; opacity: .6; }
.jbd-more-note { font-size: 13px; color: var(--muted); margin: 0; }
.jbd-more-end { text-align: center; padding: 18px 0 4px; }

/* ── Employer logos ────────────────────────────────────────────────
   Same box as the lettermark it replaces, so a company gaining a cached
   logo never reflows the row. White plate + border because many marks are
   transparent PNGs designed for a light background, and contain (not cover)
   so a wordmark is never cropped. */
.jb-logo.is-img, .jbd-row-logo.is-img, .jb-sim-logo.is-img { display: block; object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 4px; }