/* LandMe — one committed theme, light and dark from the same tokens.
   Day mode deliberately uses a soft mineral/sage canvas instead of white.
   It keeps the premium LandMe character while preserving strong contrast. */
:root{
  --bg:#e9efec; --panel:#f6f9f7; --panel-2:#e1e9e5; --line:#c5d2cb; --line-2:#aebfb6;
  --ink:#10211a; --ink-2:#40584d; --ink-3:#687d73;
  --accent:#0a7654; --accent-2:#0b8f72; --accent-ink:#ffffff; --accent-soft:#d5ebe1;
  --fresh:#0a7654; --aging:#7a6418; --stale:#99561b; --ghost:#a92d28;
  --ghost-soft:#f4dfdc; --warn-soft:#f1ead5;
  --badge-staff:#51439c; --badge-staff-line:#afa6db; --badge-staff-bg:#e7e3f5;
  --badge-gov:#715914; --badge-gov-line:#d5c28e; --badge-gov-bg:#f2ead1;
  --badge-verified:#0a7654; --badge-verified-line:#a7d2bf;
  --shadow:0 7px 22px rgba(22,46,36,.08),0 1px 3px rgba(22,46,36,.08);
  --radius:14px; --tabh:60px;
}
/* Night palette. Applied when the system asks for it (unless the reader has
   explicitly chosen day), and whenever the in-app toggle sets data-theme. */
/* Exact values from the reference shell (Downloads/landme-shell/styles.css),
   not eyeballed off a screenshot -- that shell is the source of truth for
   the palette from here on. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#071019; --panel:#101922; --panel-2:#131e28; --line:#26333e; --line-2:#33414e;
    --ink:#f7fafc; --ink-2:#9aa8b8; --ink-3:#6f7d8d;
    --accent:#39d98a; --accent-2:#1fbf76; --accent-ink:#ffffff; --accent-soft:#0d261b;
    --fresh:#39d98a; --aging:#ffd166; --stale:#ffb347; --ghost:#ff6b6b;
    --ghost-soft:#2a1616; --warn-soft:#2a2414;
    --badge-staff:#c8baff; --badge-staff-line:#665aa0; --badge-staff-bg:#231f35;
    --badge-gov:#ffc457; --badge-gov-line:#7f5c19; --badge-gov-bg:#302411;
    --badge-verified:#8bf0b6; --badge-verified-line:#1c6941;
    --shadow:0 18px 50px rgba(0,0,0,.25);
    --radius:18px;
  }
}
:root[data-theme="dark"]{
    --bg:#071019; --panel:#101922; --panel-2:#131e28; --line:#26333e; --line-2:#33414e;
    --ink:#f7fafc; --ink-2:#9aa8b8; --ink-3:#6f7d8d;
    --accent:#39d98a; --accent-2:#1fbf76; --accent-ink:#ffffff; --accent-soft:#0d261b;
    --fresh:#39d98a; --aging:#ffd166; --stale:#ffb347; --ghost:#ff6b6b;
    --ghost-soft:#2a1616; --warn-soft:#2a2414;
    --badge-staff:#c8baff; --badge-staff-line:#665aa0; --badge-staff-bg:#231f35;
    --badge-gov:#ffc457; --badge-gov-line:#7f5c19; --badge-gov-bg:#302411;
    --badge-verified:#8bf0b6; --badge-verified-line:#1c6941;
    --shadow:0 18px 50px rgba(0,0,0,.25);
    --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom));
  -webkit-text-size-adjust:100%;
}
a{color:var(--accent)}
button{font:inherit;color:inherit}
/* #app is wide by default so a dashboard-style view (Browse) has room for a
   main column plus a right rail; single-column views (job detail, forms,
   account, trust) opt into .narrow instead of every view fighting a global
   narrow column the way the old 860px ceiling forced them to. */
#app{max-width:1240px;margin:0 auto;padding:14px 20px 24px}
.narrow{max-width:700px;margin:0 auto}
@media(max-width:820px){#app{padding:14px 14px 24px}}

/* ---------- header ---------- */
/* ---------- top navigation ---------- */
.topnav{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;
  padding:10px 16px;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);
}
.brand{
  font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink);
  text-decoration:none;flex:0 0 auto;display:flex;align-items:center;
}
.brand::before{
  content:"";width:26px;height:26px;border-radius:8px;flex:0 0 auto;margin-right:8px;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 8.5 12 15l10-6.5L12 2Z'/%3E%3Cpath d='M2 15.5 12 22l10-6.5M2 12l10 6.5L22 12' fill='none' stroke='%23000' stroke-width='0'/%3E%3C/svg%3E") center/70% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 8.5 12 15l10-6.5L12 2Z'/%3E%3C/svg%3E") center/70% no-repeat;
}
.brand span{color:var(--accent)}
.brand:hover{opacity:.8}
.navlinks{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto}
.navlinks a{
  padding:7px 11px;border-radius:9px;font-size:13.5px;font-weight:600;
  color:var(--ink-2);text-decoration:none;white-space:nowrap;
}
.navlinks a:hover{background:var(--panel-2);color:var(--ink)}
.navlinks a[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.theme-btn{
  flex:0 0 auto;border:1px solid var(--line);background:var(--panel);
  color:var(--ink-2);border-radius:999px;padding:6px 12px;font-size:12.5px;cursor:pointer;
  white-space:nowrap;
}
.theme-btn{transition:outline-color .15s ease,border-color .15s ease,color .15s ease;outline:2px solid transparent;outline-offset:2px}
.theme-btn:hover{border-color:var(--accent);color:var(--accent);outline-color:var(--accent)}
/* On phones the bottom tab bar is the navigation, so the links would duplicate it. */
@media(max-width:820px){
  .navlinks{display:none}
  .topnav{padding:10px 14px}
}
.logo{font-size:22px;font-weight:800;letter-spacing:-.02em}
.logo span{color:var(--accent)}
.tag{color:var(--ink-3);font-size:12.5px}
h2{font-size:19px;margin:0 0 4px;letter-spacing:-.01em}
.sub{color:var(--ink-2);font-size:13.5px;margin:0 0 14px}

/* ---------- controls ---------- */
.search,.input{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);box-shadow:var(--shadow);
}
.search::placeholder,.input::placeholder{color:var(--ink-3)}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin:11px 0}
.chip{
  border:1px solid var(--line);background:var(--panel);border-radius:999px;
  padding:6px 11px;font-size:12.5px;cursor:pointer;white-space:nowrap;
}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
select.chip{padding-right:24px;width:auto;max-width:150px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.count{color:var(--ink-3);font-size:12.5px;margin:2px 2px 10px}

/* ---------- job cards ---------- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 14px;margin-bottom:10px;box-shadow:var(--shadow);
  cursor:pointer;display:block;width:100%;text-align:left;
}
.card:hover{border-color:var(--accent)}
.card.risk{background:linear-gradient(var(--ghost-soft),var(--panel) 60%)}
.card-top{display:flex;gap:10px;align-items:flex-start}
.card h3{font-size:15.5px;margin:0 0 2px;line-height:1.35;letter-spacing:-.01em}
.co{color:var(--ink-2);font-size:13px}
.meta{color:var(--ink-3);font-size:12px;margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
.meta i{font-style:normal}
.dot::before{content:"·";margin-right:6px}
.badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.b{font-size:11px;padding:2.5px 7px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);background:var(--panel-2)}
.b.fresh{color:var(--fresh);border-color:color-mix(in srgb,var(--fresh) 40%,transparent)}
.b.aging{color:var(--aging);border-color:color-mix(in srgb,var(--aging) 40%,transparent)}
.b.stale{color:var(--stale);border-color:color-mix(in srgb,var(--stale) 40%,transparent)}
.b.ghost{color:var(--ghost);border-color:color-mix(in srgb,var(--ghost) 45%,transparent);font-weight:600}
.b.good{color:var(--accent);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.b.pay{color:var(--ink);font-weight:600}

/* icon glyphs -- currentColor throughout, colored by class the same way a
   badge is, so one icon definition works in every context (active, source
   labels, trust badges). */
.glyph{width:22px;height:22px;flex:0 0 auto;color:var(--ink-2)}
.glyph-accent{color:var(--accent)}
.glyph-staff{color:var(--badge-staff)}
.glyph-gov{color:var(--badge-gov)}

/* trust dial */
.trust{flex:0 0 auto;width:42px;text-align:center}
.trust b{display:block;font-size:15px;line-height:1.1}
.trust small{font-size:9.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.t-hi{color:var(--fresh)} .t-mid{color:var(--aging)} .t-lo{color:var(--ghost)}

/* ---------- detail ---------- */
.back{background:none;border:0;color:var(--accent);padding:6px 0;cursor:pointer;font-size:13.5px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.panel h4{margin:0 0 8px;font-size:13.5px;letter-spacing:.01em}
.desc{white-space:pre-wrap;font-size:14px;color:var(--ink-2);line-height:1.62}
.why{margin:0;padding-left:18px;color:var(--ink-2);font-size:13px}
.why li{margin:3px 0}
.alert{background:var(--ghost-soft);border:1px solid color-mix(in srgb,var(--ghost) 35%,transparent);border-radius:12px;padding:11px 13px;font-size:13px;margin-bottom:12px}
.notice{background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--aging) 35%,transparent);border-radius:12px;padding:11px 13px;font-size:13px;margin-bottom:12px}
.btn{
  border:1px solid var(--line);background:var(--panel-2);border-radius:10px;
  padding:10px 14px;cursor:pointer;font-size:13.5px;font-weight:600;
  text-decoration:none;color:inherit;display:inline-block;
}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.wide{width:100%;text-align:center;display:block;text-decoration:none}
.btn.danger{color:var(--ghost)}
.btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.btn:disabled{opacity:.4;cursor:default}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.pager-count{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pager-nums{display:flex;align-items:center;gap:4px}
.pager-num{
  all:unset;box-sizing:border-box;cursor:pointer;min-width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;
}
.pager-num:hover{background:var(--panel-2)}
.pager-num.on{background:var(--accent);color:var(--accent-ink)}
.pager-num:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pager-dots{color:var(--ink-3);font-size:13px;padding:0 2px;user-select:none}

/* ---------- forms ---------- */
label{display:block;font-size:12.5px;color:var(--ink-2);margin:10px 0 4px;font-weight:600}
input[type=text],input[type=url],input[type=date],input[type=number],textarea,select{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font:inherit;
}
textarea{min-height:110px;resize:vertical}
.hint{color:var(--ink-3);font-size:12px;margin-top:4px}
.check{display:flex;gap:9px;align-items:flex-start;margin:12px 0;font-size:13px;color:var(--ink-2)}
.check input{margin-top:3px;flex:0 0 auto;width:auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.grid2{grid-template-columns:1fr}}
pre.out{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:11px;overflow-x:auto;font-size:11.5px;line-height:1.45}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:9px;margin-bottom:12px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px}
.stat b{display:block;font-size:20px;letter-spacing:-.02em}
.stat small{color:var(--ink-3);font-size:11.5px;line-height:1.35;display:block;margin-top:2px}
.empty{color:var(--ink-3);text-align:center;padding:40px 16px;font-size:14px}
.emptystate{text-align:center;padding:34px 20px;border:1px dashed var(--line);border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:6px}
.emptystate-title{font-size:15px;color:var(--ink)}
.emptystate-body{margin:0 0 6px;max-width:360px;color:var(--ink-2);font-size:13.5px;line-height:1.5}

/* ---------- tabs ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;height:calc(var(--tabh) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:color-mix(in srgb,var(--panel) 92%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--line);display:flex;z-index:20;
}
.tab{
  flex:1;background:none;border:0;cursor:pointer;color:var(--ink-3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
}
.tab[aria-selected="true"]{color:var(--accent)}
.tab-ico{font-size:17px;line-height:1}
.tab-lbl{font-size:10.5px;font-weight:600}
.pill{background:var(--accent);color:var(--accent-ink);border-radius:999px;font-size:9.5px;padding:0 5px;margin-left:3px}

/* ---------- progress + range bars ---------- */
.bar{
  position:relative;height:7px;border-radius:99px;background:var(--panel-2);
  border:1px solid var(--line);margin:9px 0 6px;overflow:hidden;
}
.bar > span{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:99px}
.bar.range{background:linear-gradient(90deg,var(--panel-2),var(--accent-soft),var(--panel-2));overflow:visible}
.bar.range > span{
  left:0;width:3px;background:var(--accent);border-radius:2px;
  top:-3px;bottom:-3px;transform:translateX(-1px);
}

/* ---------- documents (resume, letters, templates) ---------- */
pre.doc{
  white-space:pre-wrap;word-break:break-word;font-size:12.5px;line-height:1.6;
  max-height:420px;overflow-y:auto;margin:10px 0 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.why li.warn{color:var(--ink-3)}
.why li.warn b{color:var(--stale)}
.why-note{
  margin-top:10px;padding-top:9px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-3);line-height:1.55;
}

/* ---------- question list ---------- */
.qa{padding:9px 0;border-bottom:1px solid var(--line)}
.qa:last-child{border-bottom:0;padding-bottom:0}
.qa .q{font-size:14px;font-weight:600;line-height:1.45;margin-bottom:3px}

/* ---------- page structure ---------- */
.pagehead{margin-bottom:14px}
.pagehead h2{margin-bottom:4px}
h3.sec{
  font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);
  margin:22px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line);
}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 6px}
.toolbar .count{margin:0;font-weight:600;color:var(--ink-2)}

/* ---------- segmented control ---------- */
.segbar{
  display:flex;gap:4px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:12px;padding:4px;margin:11px 0 4px;
}
.seg{
  flex:1;border:0;background:none;border-radius:9px;padding:8px 6px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--ink-2);
  font-size:13px;font-weight:600;min-width:0;
}
.seg em{font-style:normal;font-size:11px;color:var(--ink-3);font-weight:500}
.seg[aria-selected="true"]{background:var(--panel);color:var(--accent);box-shadow:var(--shadow)}
.seg[aria-selected="true"] em{color:var(--accent)}

/* ---------- filter bar: dropdowns above the listings ---------- */
.filterbar{
  display:flex;gap:7px;flex-wrap:wrap;margin:6px 0 4px;position:relative;z-index:20;
}
.fgroupwrap{position:relative}
.fbtn{
  display:flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-2);
  border-radius:999px;padding:7px 13px;font-size:13px;font-weight:600;
}
.fbtn:hover{border-color:var(--accent);color:var(--ink)}
.fbtn.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.fbtn .caret{font-size:10px;opacity:.65}
.fbtn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.fcount{
  font-style:normal;font-size:10.5px;font-weight:700;min-width:16px;text-align:center;
  background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:1px 5px;
}
.fdrop{
  display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:40;
  width:min(320px,86vw);max-height:min(420px,60vh);overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:8px 11px;box-shadow:0 14px 38px rgba(0,0,0,.28);
}
.fdrop.open{display:block}
/* keep the last dropdowns on screen rather than off the right edge */
.fgroupwrap:nth-last-child(-n+3) .fdrop{left:auto;right:0}
@media(max-width:560px){
  .fdrop{left:0;right:auto;width:min(320px,90vw)}
  .fgroupwrap:nth-last-child(-n+3) .fdrop{left:0;right:auto}
}
.opts{display:flex;flex-direction:column;gap:1px;padding:4px 0;max-height:250px;overflow-y:auto}
.opt{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  border:0;background:none;border-radius:8px;padding:7px 8px;cursor:pointer;
  font-size:13px;color:var(--ink-2);text-align:left;
}
.opt:hover{background:var(--panel-2)}
.opt em{font-style:normal;font-size:11.5px;color:var(--ink-3);flex:0 0 auto}
.opt small{display:block;font-size:11px;color:var(--ink-3);margin-top:1px;font-weight:400}
.opt[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.opt[aria-pressed="true"] em{color:var(--accent)}
.opt.toggle{padding:9px 8px}
.checkopt{display:flex;align-items:center;gap:8px;min-width:0}
.checkopt>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.checkbox{
  flex:0 0 auto;width:15px;height:15px;border-radius:4px;
  border:1.5px solid var(--line);box-sizing:border-box;
}
.opt.check[aria-pressed="true"] .checkbox{
  background:var(--accent);border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:11px;
}
.frow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px 10px}
.frow label{margin:0;font-weight:600}
.frow select{width:auto;max-width:150px;padding:7px 10px}

/* ---------- active filters ---------- */
.active-filters .chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.active-filters .x{margin-left:6px;opacity:.7}

/* ---------- browse tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:9px}
.tile{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:12px;text-align:left;cursor:pointer;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:2px;
}
.tile:hover{border-color:var(--accent)}
.tile b{font-size:13.5px;line-height:1.35}
.tile .n{font-size:12px;color:var(--accent);font-weight:600}
.tile small{font-size:11.5px;color:var(--ink-3);line-height:1.4;margin-top:2px}

/* ---------- workplace + lapsed states ---------- */
.b.wp-remote{color:var(--accent);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.b.wp-hybrid{color:var(--aging);border-color:color-mix(in srgb,var(--aging) 35%,transparent)}
.b.wp-onsite{color:var(--ink-2)}
.card.lapsed{opacity:.72}
.card.lapsed:hover{opacity:1}

/* ---------- at-a-glance table ---------- */
dl.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:13px}
dl.facts dt{color:var(--ink-3);white-space:nowrap}
dl.facts dd{margin:0;color:var(--ink)}

/* ---------- nav actions ---------- */
.navactions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.nav-cta,.nav-signin{
  padding:7px 12px;border-radius:9px;font-size:13px;font-weight:600;
  text-decoration:none;white-space:nowrap;
}
.nav-cta{border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);transition:outline-color .15s ease,opacity .15s ease;outline:2px solid transparent;outline-offset:2px}
.nav-cta:hover{opacity:.88;outline-color:var(--accent)}
.nav-signin{color:var(--ink-2);border:1px solid transparent;transition:outline-color .15s ease,color .15s ease,background .15s ease;outline:2px solid transparent;outline-offset:2px}
.nav-signin:hover{color:var(--ink);background:var(--panel-2);outline-color:var(--accent)}
.nav-cta[aria-current="page"],.nav-signin[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.nav-outline{
  padding:7px 12px;border-radius:9px;font-size:13px;font-weight:600;
  text-decoration:none;white-space:nowrap;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  transition:outline-color .15s ease,border-color .15s ease,color .15s ease;
  outline:2px solid transparent;outline-offset:2px;
}
.nav-outline:hover{border-color:var(--accent);color:var(--accent);outline-color:var(--accent)}
.navactions-group{display:flex;align-items:center;gap:8px}
.navactions-group[hidden]{display:none}
.nav-avatar{
  flex:0 0 auto;width:31px;height:31px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:700;
  text-decoration:none;border:1px solid var(--line);
}
@media(max-width:600px){
  .nav-cta,.nav-outline{display:none}   /* the recruiter path lives under More on phones */
}
.icon-btn{
  flex:0 0 auto;width:31px;height:31px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-2);
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;
  cursor:pointer;text-decoration:none;line-height:1;
  transition:outline-color .15s ease,border-color .15s ease,color .15s ease;
  outline:2px solid transparent;outline-offset:2px;
}
.icon-btn:hover{border-color:var(--accent);color:var(--accent);outline-color:var(--accent)}
@media(max-width:700px){.icon-btn{display:none}}  /* Saved and the language picker live under More on phones */
.lang-btn{width:auto;padding:0 10px;gap:4px;font-size:11.5px;font-weight:700}

/* ---------- footer ---------- */
.sitefoot{
  border-top:1px solid var(--line);margin-top:34px;padding:22px 16px 30px;
  background:var(--panel);color:var(--ink-2);font-size:13px;
}
.footgrid{
  max-width:860px;margin:0 auto;display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
}
.footbrand{grid-column:1 / -1}
@media(min-width:640px){.footbrand{grid-column:auto}}
.footlogo{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:7px}
.footlogo .accent{color:var(--accent)}
.footbrand p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-3);max-width:26ch}
.footcol h5{
  margin:0 0 9px;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);font-weight:700;
}
/* Footer links are the last 11 targets under the 44px touch minimum. Padding
   rather than height, so the visual rhythm is unchanged on a desktop. */
.footcol a{display:block;padding:9px 0;color:var(--ink-2);text-decoration:none}
.footcol a:hover{color:var(--accent)}
.footbase{
  max-width:860px;margin:20px auto 0;padding-top:14px;border-top:1px solid var(--line);
  color:var(--ink-3);font-size:12px;line-height:1.6;
}

/* ---------- coach ---------- */
.demandrow{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:12.5px}
.demandname{flex:0 0 128px;color:var(--ink-2)}
.demandrow em{font-style:normal;flex:0 0 34px;text-align:right;color:var(--ink-3);font-size:11.5px}
.demandrow .bar{margin:0}
.funnel{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.fstage{display:flex;align-items:center;gap:9px;font-size:12.5px}
.flabel{flex:0 0 92px;color:var(--ink-2)}
.fbar{flex:1;height:16px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden}
.fbar > span{display:block;height:100%;background:var(--accent);border-radius:5px}
.fstage em{font-style:normal;flex:0 0 34px;text-align:right;font-weight:600}

/* ---------- compact coach layout ---------- */
.coachbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:11px 13px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:10px;
}
.coachwho b{display:block;font-size:15px;line-height:1.3}
.coachwho .co{font-size:12.5px}
.stats.compact{margin-bottom:10px}
.stats.compact .stat{padding:9px 10px}
.stats.compact .stat b{font-size:17px}
.nextup{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.nextup b{font-size:14.5px;line-height:1.35}
/* collapsed evidence sections */
.fgroup.boxed{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:2px 13px;margin-bottom:8px;
}
.fgroup.boxed > summary{padding:11px 0;font-size:13.5px}
.foldcount{font-style:normal;font-size:11.5px;color:var(--ink-3);font-weight:500;margin-left:auto;margin-right:9px}
.fgroup.boxed > summary > span:first-child{flex:0 0 auto}

/* ---------- dismiss, saved searches, company grades ---------- */
.card{position:relative}
.dismiss{
  position:absolute;top:2px;right:2px;width:44px;height:44px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  border:0;background:none;color:var(--ink-3);border-radius:8px;cursor:pointer;
  font-size:18px;opacity:0;transition:opacity .12s;
}
.card:hover .dismiss,.dismiss:focus{opacity:1}
/* A pointer that cannot hover — a phone or tablet — never reveals it, so the
   button was invisible and unreachable on every touch device. 44px is also the
   minimum a finger can reliably hit; it was 22. */
@media (hover:none){
  .dismiss{opacity:.55}
  .dismiss:active{opacity:1;background:var(--panel-2)}
}
.dismiss:hover{background:var(--panel-2);color:var(--ghost)}
.reportflag{
  position:absolute;top:2px;right:44px;width:44px;height:44px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  border:0;background:none;color:var(--ink-3);border-radius:8px;cursor:pointer;
  font-size:14px;opacity:0;transition:opacity .12s;
}
.card:hover .reportflag,.reportflag:focus{opacity:1}
@media (hover:none){
  .reportflag{opacity:.55}
  .reportflag:active{opacity:1;background:var(--panel-2)}
}
.reportflag:hover{background:var(--panel-2);color:var(--stale)}
[dir="rtl"] .reportflag{right:auto;left:44px}
.dismissed-note{display:flex;align-items:center;margin:6px 2px 10px}

.savedbar{display:flex;gap:7px;flex-wrap:wrap;margin:2px 0 10px}
.chip.saved{display:flex;align-items:center;gap:6px}
.chip.saved.has-new{border-color:var(--accent);color:var(--accent)}
.newcount{font-style:normal;font-weight:700;font-size:11px}
.chip .x{opacity:.6;margin-left:2px}
.chip .x:hover{opacity:1;color:var(--ghost)}

/* an employer-set deadline is a commitment; ours is muted and asterisked */
.b.own{font-weight:700}
.b.fresh.own{background:var(--accent-soft)}

.grade{
  flex:0 0 auto;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  font-weight:800;font-size:15px;border:1px solid var(--line);background:var(--panel-2);
}
.corow{display:flex;align-items:center;gap:12px}
.corow h3{margin:0 0 2px}
.colink{color:var(--ink-2);text-decoration:none;border-bottom:1px dotted var(--line)}
.colink:hover{color:var(--accent)}

/* ---------- visible focus, since custom buttons have none by default ---------- */
:where(button,a,select,input,textarea,summary):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:8px;
}
.opt:focus-visible,.seg:focus-visible{outline-offset:-2px}
.grade-none{color:var(--ink-3);font-size:18px}

/* ---------- locale picker ---------- */
.langpick{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:8px 10px;
  color:var(--ink-2);
}
.langpick:hover{border-color:var(--accent)}
.langpick .flag,.localeopt .flag{font-size:19px;flex:0 0 auto}
.langpick b,.localeopt b{display:block;font-size:13px;color:var(--ink);font-weight:600}
.langpick small,.localeopt small{display:block;font-size:11.5px;color:var(--ink-3)}

.modal{
  position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:18px;
  backdrop-filter:blur(3px);
}
.modalbox{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:16px;width:min(620px,100%);max-height:82vh;display:flex;flex-direction:column;
  box-shadow:0 18px 48px rgba(0,0,0,.35);
}
.localelist{
  overflow-y:auto;margin-top:10px;display:grid;gap:4px 18px;align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.localeopt{
  display:flex;align-items:center;gap:9px;border:0;background:none;cursor:pointer;
  padding:7px 9px;border-radius:9px;text-align:left;width:100%;
}
.localeopt:hover{background:var(--panel-2)}
.localeopt[aria-pressed="true"]{background:var(--accent-soft)}
.localeopt[aria-pressed="true"] b{color:var(--accent)}

/* right-to-left: mirror the few places that assume a left-hand start */
[dir="rtl"] .dismiss{right:auto;left:7px}
[dir="rtl"] .demandname,[dir="rtl"] .flabel{text-align:right}
[dir="rtl"] .demandrow em,[dir="rtl"] .fstage em{text-align:left}

/* ---------- upload ---------- */
.dropzone{
  border:1.5px dashed var(--line);border-radius:12px;padding:18px 14px;text-align:center;
  cursor:pointer;background:var(--bg);transition:border-color .12s,background .12s;
}
.dropzone:hover,.dropzone.over{border-color:var(--accent);background:var(--accent-soft)}
.dropzone b{display:block;font-size:14px;margin-bottom:3px}
.filecard{
  margin-top:11px;padding:11px;border:1px solid var(--line);border-radius:11px;
  background:var(--panel-2);
}
.filecard b{font-size:13.5px;word-break:break-all}

/* ---------- application packet + queue ---------- */
.answerrow{padding:9px 0;border-bottom:1px solid var(--line)}
.answerrow:last-child{border-bottom:0;padding-bottom:0}
.answerrow textarea{min-height:88px}
.queuerow{border-left:3px solid var(--accent)}

/* ---------- what the résumé parser found ---------- */
.fillrow{display:flex;gap:10px;padding:4px 0;font-size:13px;align-items:baseline}
.filllabel{flex:0 0 116px;color:var(--ink-3)}

/* ---------- landing hero ---------- */
/* The first screen states the promise, then the numbers that back it, then the
   search box. Restrained on purpose: this is a working index, not a pitch. */
.hero{
  margin:2px 0 20px;padding:26px 24px 22px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.hero .eyebrow{
  margin:0 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent);
}
.hero-title{
  margin:0 0 10px;font-size:31px;line-height:1.12;letter-spacing:-.025em;
  font-weight:800;text-wrap:balance;color:var(--ink);
}
.hero-sub{
  margin:0 0 20px;max-width:56ch;font-size:14.5px;line-height:1.6;color:var(--ink-2);
}
.hero-search .search{padding:14px 16px;font-size:15px}
@media(max-width:640px){
  .hero{padding:22px 18px 18px}
  .hero-title{font-size:25px}
}

/* ---------- cover page ---------- */
/* The cover page reuses the hero, tiles and note components; what it adds is
   the rhythm between sections and the numbered how-it-works sequence. */
.cover .hero{margin-bottom:26px}
.coversec{margin:0 0 30px}
/* Vertical bar chart, matching the working prototype's .salary-chart/.bar. */
.vchart{height:200px;display:flex;align-items:flex-end;gap:12px;padding:16px 4px 28px}
.vbar{flex:1;min-width:20px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--accent-2),var(--accent));position:relative}
.vbar:after{content:attr(data-label);position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--ink-3);white-space:nowrap}

/* Grid utilities matching the working prototype's own g2/g3/g4 exactly. */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:760px){.g2,.g3,.g4{grid-template-columns:1fr}}
.coversec > .btn.quiet{margin-top:12px}
.btn.quiet{
  background:none;border-color:transparent;color:var(--accent);
  padding-left:0;font-weight:600;text-decoration:none;display:inline-block;
}
.btn.quiet:hover{text-decoration:underline}
.herocta{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}

/* The 21-day window as a line -- purely illustrative of the stated rule,
   not per-listing data. */
.stagebar{display:flex;gap:0;align-items:flex-start;margin-bottom:20px}
.stage{flex:1;text-align:center;position:relative}
.stage:after{content:"";position:absolute;height:2px;background:var(--line-2);top:14px;left:50%;right:-50%}
.stage:last-child:after{display:none}
.stage b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--line-2);margin:auto;position:relative;z-index:2;font-size:12px}
.stage.on b{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.stage span{display:block;margin-top:7px;font-size:11px;color:var(--ink-3)}

/* ---------- customizable Tracker dashboard (js/dashboard.js) ---------- */
.dash-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;align-items:start;
}
.dash-widget{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px;box-shadow:var(--shadow);min-width:0;
}
.dash-widget.standard{grid-column:span 2}
.dash-widget.compact{grid-column:span 1}
.dash-widget.dash-hidden{opacity:.45}
.widgethead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.widgethead h4{margin:0;font-size:13.5px}
.widgetcontrols{display:flex;gap:4px;flex-wrap:nowrap}
.iconbtn{
  border:1px solid var(--line);background:var(--panel-2);border-radius:6px;
  min-width:26px;height:26px;padding:0 6px;font-size:12px;cursor:pointer;color:var(--ink-2);
}
.iconbtn:hover{border-color:var(--accent);color:var(--accent)}
.iconbtn:disabled{opacity:.35;cursor:default}
.iconbtn:disabled:hover{border-color:var(--line);color:var(--ink-2)}
.widgetlist{display:flex;flex-direction:column;gap:2px}
.widgetrow{
  padding:7px 0;border-bottom:1px solid var(--line);cursor:pointer;
  display:flex;flex-direction:column;gap:2px;
}
.widgetrow:last-child{border-bottom:0}
.widgetrow:hover .wtitle{color:var(--accent)}
.wtitle{font-size:12.5px;font-weight:600;color:var(--ink)}
.wmeta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--ink-3)}
.wbig{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.widgetmore{display:inline-block;margin-top:8px;font-size:11.5px;color:var(--accent);text-decoration:none}
.widgetmore:hover{text-decoration:underline}
.chiprow{display:flex;flex-wrap:wrap;gap:6px}
@media(max-width:820px){
  .dash-grid{grid-template-columns:1fr}
  .dash-widget.standard,.dash-widget.compact{grid-column:span 1}
}

/* Numbered because the three steps are a real sequence: a deadline is set,
   then enforced, then scored against the employer's record. */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.step{display:flex;gap:14px;align-items:flex-start}
.stepnum{
  flex:0 0 auto;width:27px;height:27px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
}
.step b{display:block;margin-bottom:3px;font-size:14.5px}
.step p{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.55;max-width:62ch}

.toolgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.toolcard{
  display:block;padding:15px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);text-decoration:none;color:inherit;box-shadow:var(--shadow);
}
.toolcard:hover{border-color:var(--accent)}
.toolcard b{display:block;margin-bottom:5px;font-size:14.5px;color:var(--ink)}
.toolcard p{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2)}

.cover .note{
  border:1px solid var(--line);border-left:3px solid var(--accent);
  background:var(--panel);border-radius:12px;padding:15px 17px;
}
.cover .note p{margin:0 0 10px;font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:64ch}

/* ---------- hero with a side panel of real live jobs ---------- */
.hero{position:relative;overflow:hidden}
.hero-eyebrow{
  display:inline-flex;margin:0 0 12px;padding:5px 11px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));
  background:var(--accent-soft);
}
.hero-eyebrow .eyebrow{margin:0;color:var(--accent)}
.hero-title .accent{color:var(--accent)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:22px}
.hero-main{min-width:0}
.hero-feats{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px}
.hero-feat{display:flex;align-items:flex-start;gap:8px;max-width:150px}
.hero-feat .fi{font-size:15px;line-height:1.3}
.hero-feat b{display:block;font-size:12px;color:var(--ink)}
.hero-feat small{display:block;font-size:11px;color:var(--ink-3);line-height:1.35}
.activepanel{
  background:color-mix(in srgb,var(--panel) 88%,transparent);border:1px solid var(--line);
  border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0;
  backdrop-filter:blur(6px);
}
.activepanel h4{margin:0;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
  display:flex;align-items:center;gap:6px}
.activepanel h4::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto;
  box-shadow:0 0 6px var(--accent);animation:live-pulse 1.6s ease-in-out infinite}
@keyframes live-pulse{
  0%,100%{opacity:1;box-shadow:0 0 6px var(--accent)}
  50%{opacity:.35;box-shadow:0 0 2px var(--accent)}
}
@media(prefers-reduced-motion:reduce){.activepanel h4::before{animation:none}}
.activerow{display:block;width:100%;text-align:left;border:0;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:10px 11px;cursor:pointer}
.activerow:hover{border-color:var(--accent)}
.activerow-top{display:flex;align-items:flex-start;gap:9px}
.activerow b{display:block;font-size:13px;line-height:1.3;margin-bottom:2px}
.activerow .co{font-size:11.5px}
.activerow .meta{margin-top:5px;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.letter-avatar{
  flex:0 0 auto;width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;
}
@media(min-width:760px){.hero-grid{grid-template-columns:1.5fr 1fr;align-items:start}}

/* Decorative only -- a stylised "active network" globe, not a literal map.
   Sits behind the hero text as a background layer (z-index:0, absolutely
   positioned), never as something a reader has to read data off of. */
/* A <canvas> now, drawn in home.js's drawGlobe() -- rough landmass shapes,
   glowing city-light dots, and a couple of connecting arcs, since there is
   no real earth photo to place here and no way to fetch one. */
/* Centered behind the whole hero -- headline and the active-now panel both
   sit on top of it, not beside it in their own column. */
.hero-globe{
  position:absolute;top:16%;left:36%;transform:translate(-50%,-50%);
  width:min(500px,46vw);height:min(500px,46vw);
  z-index:0;pointer-events:none;opacity:.85;
  filter:drop-shadow(0 0 60px color-mix(in srgb,var(--accent) 20%,transparent));
}
@media(max-width:640px){.hero-globe{opacity:.5}}

/* ---------- bordered icon stat cards ---------- */
.statcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;
  margin-top:20px;padding-top:0;border-top:0;position:relative;z-index:1}
.statcard{
  display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:12px;
  background:var(--panel-2);border:1px solid var(--line);
}
.statcard .sico{
  width:32px;height:32px;border-radius:8px;flex:0 0 auto;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.statcard .glyph{width:28px;height:28px;flex:0 0 auto}
.statcard b{display:block;font-size:17px;font-variant-numeric:tabular-nums;color:var(--ink)}
.statcard span{display:block;font-size:11px;color:var(--ink-3)}
button.statcard{appearance:none;-webkit-appearance:none;border:0;font:inherit;color:inherit;text-align:left;box-sizing:border-box;cursor:pointer;display:flex;width:100%}
button.statcard:hover{border-color:var(--accent)}

/* ---------- why-choose feature grid ---------- */
.featgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.featcard{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:15px 16px;box-shadow:var(--shadow);
}
.featcard .fico{
  width:32px;height:32px;border-radius:9px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:15px;margin-bottom:9px;
}
.featcard b{display:block;margin-bottom:5px;font-size:14px;color:var(--ink)}
.featcard p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-2)}

/* The job-card grade reuses the employer grade colours, so one letter means the
/* ---------- distance filter ---------- */
.distrow{display:flex;align-items:center;gap:9px;padding:7px 9px}
.distrow span{font-size:13px;color:var(--ink-2);flex:0 0 auto}
.distcity{
  flex:1;min-width:0;padding:6px 9px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:13px;
}
.distcity::placeholder{color:var(--ink-3)}
.distcity:focus{outline:2px solid var(--accent);outline-offset:1px}

/* ---------- install banner ---------- */
.installbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:13px 16px;margin:0 0 16px;border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:12px;background:var(--panel);
}
.installbar b{display:block;font-size:14px}
.installbar small{color:var(--ink-2);font-size:12.5px}
.installacts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.distnote{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:8px 0;padding:9px 12px;border-radius:10px;
  background:var(--warn-soft);border:1px solid var(--line);
}

/* ---------- notification bell ---------- */
.bellslot{display:inline-flex;flex:0 0 auto}
.bell{
  position:relative;border:1px solid var(--line);background:var(--panel);
  border-radius:999px;width:34px;height:31px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  transition:outline-color .15s ease,border-color .15s ease;
  outline:2px solid transparent;outline-offset:2px;
}
.bell:hover{border-color:var(--accent);outline-color:var(--accent)}
.bellico{font-size:14px;line-height:1}
.bellcount{
  position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--accent);color:var(--accent-ink);
  font-size:10.5px;font-weight:700;line-height:17px;text-align:center;
  font-variant-numeric:tabular-nums;
}
.belllist{display:grid;gap:2px;margin-top:4px;max-height:60vh;overflow-y:auto}
.bellrow{display:flex;align-items:center;gap:2px;border-radius:9px}
.bellrow:hover{background:var(--panel-2)}
.bellitem{
  display:flex;align-items:flex-start;gap:10px;flex:1;min-width:0;text-align:left;
  border:0;background:none;cursor:pointer;padding:10px;border-radius:9px;
  font-size:13.5px;line-height:1.5;color:var(--ink);
}
.belldismiss{
  flex:0 0 auto;border:0;background:none;cursor:pointer;color:var(--ink-3);
  font-size:12px;padding:8px 10px;border-radius:9px;
}
.belldismiss:hover{color:var(--ink);background:var(--panel)}
.belldot{
  flex:0 0 auto;width:8px;height:8px;border-radius:50%;margin-top:6px;
  background:var(--ink-3);
}
.belldot.closing{background:var(--stale)}
.belldot.urgent{background:var(--ghost);box-shadow:0 0 0 3px color-mix(in srgb,var(--ghost) 18%,transparent)}
.belldot.gone{background:var(--ghost)}
.belldot.search{background:var(--accent)}
.belldot.applied{background:var(--aging)}

/* Language picker: flag on the left, the language's own name on the right.
   One row per language -- the country-first list repeated "English" for every
   country that publishes in it, so the choice itself was never legible. */
.localelist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px; }
.langopt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; }
.langopt .flag { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.langname { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.langname b { font-weight: 600; }
.langpartial { font-size: 11px; font-style: normal; opacity: .62; letter-spacing: .01em; }
@media (max-width: 560px) { .localelist { grid-template-columns: 1fr; } }

/* ---------- dashboard rail: main column + right rail ---------- */
/* Browse is the one view with enough distinct content (a hero, a fresh strip,
   browse-by tabs, and three accountability widgets) to earn a second column.
   Everything else stays single-column -- a rail on a page with one thing to
   put in it would be an empty box. */
.rail{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
@media(min-width:980px){.rail{grid-template-columns:minmax(0,1fr) 320px}}
.rail > aside{display:flex;flex-direction:column;gap:14px;min-width:0}
@media(min-width:980px){.rail > aside{position:sticky;top:76px}}
.railpanel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 16px;box-shadow:var(--shadow);
}
.railpanel h4{margin:0 0 3px;font-size:13.5px}
/* Compact differentiator rows -- icon + title + one line, clickable, no
   paragraph copy. */
.diffpanel{display:flex;flex-direction:column;gap:2px}
.diffrow{
  display:flex;align-items:flex-start;gap:10px;width:100%;
  border:0;background:none;padding:7px 0;cursor:pointer;text-align:left;
  border-radius:8px;
}
.diffrow:hover{background:var(--panel-2)}
.diffrow .glyph{width:19px;height:19px;margin-top:1px}
.diffrow b{display:block;font-size:12.5px;color:var(--ink)}
.diffrow p{margin:1px 0 0;font-size:11.5px;line-height:1.4;color:var(--ink-3)}
.diffmore{display:inline-block;margin-top:6px;font-size:12px;font-weight:600;color:var(--accent);text-decoration:none}
.diffmore:hover{text-decoration:underline}
.railpanel .sub{margin:0 0 11px;font-size:12px}
.railpanel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.railpanel li{font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.railrow{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  width:100%;border:0;background:none;padding:0;cursor:pointer;text-align:left;
  font:inherit;color:inherit;
}
.railrow:hover .railrow-title{color:var(--accent)}
.railrow-title{font-size:12.5px;color:var(--ink);line-height:1.4}
.railrow-meta{
  flex:0 0 auto;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--ink-3);
}
.railrow-meta.soon{color:var(--stale)}
.railpanel .btn.quiet{margin-top:2px;font-size:12.5px}

/* ---------- fresh opportunities strip ---------- */
.freshstrip{
  display:flex;gap:11px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px;
  scroll-snap-type:x proximity;
}
.freshcard{
  scroll-snap-align:start;flex:0 0 auto;width:238px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 14px;box-shadow:var(--shadow);cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:7px;
}
.freshcard:hover{border-color:var(--accent)}
.freshcard h4{margin:0;font-size:14px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.freshcard .co{font-size:12px}
.freshcard .meta{margin-top:0}

/* ---------- quick shortcut tiles (icon + label) ---------- */
.shortcut{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px 12px;text-align:left;cursor:pointer;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:8px;
}
.shortcut:hover{border-color:var(--accent)}
.shortcut-ico{
  width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);font-size:16px;
}
.shortcut b{font-size:12.5px;line-height:1.3}
/* Circular colored icon badge, matching the reference's per-source coloring
   (green/purple/gold/gray) -- same vocabulary as the source pills, so the
   color always means the same real thing wherever it appears. */
.shortcut-badge{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid}
.shortcut-badge .glyph{width:18px;height:18px}
.shortcut-badge.sb-accent{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.shortcut-badge.sb-staff{background:var(--badge-staff-bg);border-color:var(--badge-staff-line)}
.shortcut-badge.sb-gov{background:var(--badge-gov-bg);border-color:var(--badge-gov-line)}
.shortcut .n{font-size:11px;color:var(--ink-3);font-weight:600}

/* ---------- explore-jobs strip (Browse) ---------- */
.browseby{margin:4px 0 14px}

/* ---------- quick-shortcuts carousel ---------- */
.carousel{display:flex;align-items:center;gap:6px}
.shortcuts-viewport{flex:1;min-width:0;overflow:hidden}
.shortcuts-track{
  display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding:1px;
}
.shortcuts-track::-webkit-scrollbar{display:none}
.shortcuts-track .shortcut{flex:0 0 168px;scroll-snap-align:start}
.carousel-arrow{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;
}
.carousel-arrow:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:520px){.carousel-arrow{display:none}}
.carousel-dots{display:flex;gap:6px;justify-content:center;margin:9px 0 2px}
.pagedot{width:6px;height:6px;border-radius:50%;background:var(--line);transition:width .15s,border-radius .15s;display:inline-block}
.pagedot.on{width:16px;border-radius:3px;background:var(--accent)}

/* ---------- hiring-source stat badges ---------- */
/* Only two real categories exist in the data -- direct-from-employer and
   everything relayed through a board. Staffing agencies are excluded from
   the index entirely (is_staffing_firm() in ingest.py), so a third badge
   for them would have nothing real behind it. */
.sourcebadges{display:flex;flex-wrap:wrap;gap:8px}
.sourcebadge{
  display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:11px;
  background:var(--panel-2);border:1px solid var(--line);
}
.sourcebadge .sico{
  width:28px;height:28px;border-radius:8px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:13px;
}
.sourcebadge.direct .sico{background:var(--accent-soft);color:var(--accent)}
.sourcebadge.staffing .sico{background:var(--warn-soft);color:var(--aging)}
.sourcebadge.government .sico{background:var(--badge-gov-bg);color:var(--badge-gov)}
.sourcebadge.other .sico{background:var(--panel);color:var(--ink-3);border:1px solid var(--line)}
.sourcebadge b{display:block;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink)}
.sourcebadge span{display:block;font-size:10.5px;color:var(--ink-3)}
.pagehead.split{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:14px}

/* ---------- quick-filter chip row (Search/Browse) ---------- */
.quickfilters{display:flex;gap:7px;flex-wrap:wrap;margin:2px 0 12px}
.qfchip{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-2);
  border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer;
}
.qfchip:hover{border-color:var(--accent);color:var(--ink)}
.qfchip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}

/* ---------- job status pill: Active/Ending Soon/Expired/Closed ---------- */
.statuspill2{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid}
.statuspill2.active{color:var(--fresh);border-color:var(--fresh);background:color-mix(in srgb,var(--fresh) 12%,transparent)}
.statuspill2.ending{color:var(--aging);border-color:var(--aging);background:color-mix(in srgb,var(--aging) 12%,transparent)}
.statuspill2.expired{color:var(--ghost);border-color:var(--ghost);background:color-mix(in srgb,var(--ghost) 12%,transparent)}
.statuspill2.closed{color:var(--ink-3);border-color:var(--line);background:var(--panel-2)}

/* ---------- trust badges: icon-over-label, matching the reference ---------- */
.trustbadges{display:flex;gap:16px;flex-wrap:wrap;margin:12px 0}
.trustbadge{display:flex;flex-direction:column;align-items:center;gap:4px;width:74px;text-align:center}
.trustbadge .glyph{width:26px;height:26px}
.trustbadge small{font-size:10.5px;color:var(--ink-2);line-height:1.25}

/* ---------- job-card source pill ---------- */
.srcpill{
  display:inline-block;margin-bottom:5px;
  font-size:9.5px;font-weight:700;letter-spacing:.03em;padding:2.5px 7px;border-radius:6px;
  text-transform:uppercase;
}
.srcpill.direct{background:var(--accent-soft);color:var(--accent)}
.srcpill.other{background:var(--panel-2);color:var(--ink-3);border:1px solid var(--line)}
.srcpill.government{background:var(--badge-gov-bg);color:var(--badge-gov);border:1px solid var(--badge-gov-line)}
.srcpill.staffing{background:var(--badge-staff-bg);color:var(--badge-staff);border:1px solid var(--badge-staff-line)}

/* ---------- page sidebar: left sub-nav + main content ---------- */
/* Every dashboard-style page in the redesign (Tracker, Profile, Salaries,
   Coach, Certifications, Account) uses this same left-rail pattern instead
   of top tabs, matching the mockup consistently rather than picking a
   simpler pattern per page. */
/* Profile head card + skill chips, matching the working prototype exactly. */
.profile-head{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
@media(max-width:600px){.profile-head{grid-template-columns:auto 1fr}.profile-head .btn{grid-column:1/-1}}
.profilepic{width:84px;height:84px;border-radius:50%;background:linear-gradient(145deg,var(--panel-2),var(--bg));
  border:2px solid var(--line-2,var(--line));display:grid;place-items:center;font-size:28px;font-weight:900;color:var(--ink)}
.skill{display:inline-flex;padding:7px 10px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel-2);color:var(--ink-2);margin:4px 4px 0 0;font-size:12.5px}

.pagesidebar{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media(min-width:820px){.pagesidebar{grid-template-columns:190px 1fr}}
.sidenav{display:flex;gap:4px;overflow-x:auto;padding-bottom:2px}
@media(min-width:820px){.sidenav{flex-direction:column;position:sticky;top:76px;padding-bottom:0}}
.sidenav button,.sidenav a{
  display:block;padding:9px 12px;border-radius:9px;text-align:left;
  font-size:13.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;
  border:0;background:none;text-decoration:none;cursor:pointer;
}
.sidenav button:hover,.sidenav a:hover{background:var(--panel-2);color:var(--ink)}
.sidenav button.on,.sidenav a.on{background:var(--accent-soft);color:var(--accent)}

/* ---------- application table ---------- */
.apptable-wrap{overflow-x:auto}
.apptable{width:100%;border-collapse:collapse;font-size:13px}
.apptable th{
  text-align:left;padding:8px 10px;color:var(--ink-3);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line);white-space:nowrap;
}
.apptable td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.apptable tr:last-child td{border-bottom:0}
.apptable .jobtitle{font-weight:600;color:var(--ink)}
.statuspill{
  display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;
  white-space:nowrap;
}
.statuspill.saved{background:var(--panel-2);color:var(--ink-3)}
.statuspill.applied{background:var(--accent-soft);color:var(--accent)}
.statuspill.screening{background:var(--warn-soft);color:var(--aging)}
.statuspill.interviewing{background:var(--warn-soft);color:var(--aging)}
.statuspill.final{background:var(--warn-soft);color:var(--aging)}
.statuspill.offer{background:var(--accent-soft);color:var(--accent)}
.statuspill.hired{background:var(--badge-verified-line, var(--accent-soft));color:var(--badge-verified, var(--accent))}
.statuspill.rejected{background:var(--ghost-soft);color:var(--ghost)}
.statuspill.withdrawn{background:var(--panel-2);color:var(--ink-3)}

/* ---------- horizontal step tracker (Post a job) ---------- */
.steptracker{display:flex;gap:6px;margin:4px 0 18px;overflow-x:auto}
.stepitem{
  flex:1;min-width:120px;display:flex;align-items:center;gap:8px;
  border:0;background:none;padding:9px 4px;cursor:pointer;text-align:left;
  border-bottom:2px solid var(--line);
}
.stepitem .stepnum{width:22px;height:22px;font-size:11px;flex:0 0 auto}
.stepitem span.steplabel{font-size:12.5px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.stepitem.on{border-bottom-color:var(--accent)}
.stepitem.on .stepnum{background:var(--accent);color:var(--accent-ink)}
.stepitem.on span.steplabel{color:var(--ink)}
.stepitem.done .stepnum{background:var(--accent-soft);color:var(--accent)}

/* ---------- rail leaderboard rows ---------- */
.railboard{display:flex;flex-direction:column;gap:8px;margin:2px 0 11px}
.railboard-row{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;
  padding:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.railboard-row .grade{width:26px;height:26px;border-radius:7px;font-size:12px}
.railboard-name{flex:1;min-width:0;font-size:12.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.railboard-stat{flex:0 0 auto;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ================================================================
   LANDME MOCKUP REBUILD OVERRIDES
   Premium dark emerald system, globe-led cover, restrained glass surfaces.
   Existing functionality remains intact; this layer corrects presentation.
   ================================================================ */
:root[data-theme="dark"]{
  --bg:#06100f;
  --panel:#0b1715;
  --panel-2:#10211d;
  --line:#1f3b34;
  --line-2:#31584d;
  --ink:#f5fbf8;
  --ink-2:#b3c8c0;
  --ink-3:#728e84;
  --accent:#39e58c;
  --accent-2:#1fcf75;
  --accent-ink:#03100b;
  --accent-soft:#0b2a1d;
  --fresh:#39e58c;
  --aging:#f4c75b;
  --stale:#f4a259;
  --ghost:#ff6f78;
  --shadow:0 24px 70px rgba(0,0,0,.34);
  --radius:20px;
}
body{
  background:
    radial-gradient(circle at 50% -20%, rgba(57,229,140,.10), transparent 34rem),
    linear-gradient(180deg,#06100f 0%,#071310 44%,#06100f 100%);
  min-height:100vh;
}
#app{max-width:1440px;padding:28px 34px 54px}
.topnav{
  position:sticky;top:0;z-index:40;
  min-height:74px;padding:14px 34px;
  background:rgba(6,16,15,.78);
  border-bottom:1px solid rgba(83,130,116,.22);
  backdrop-filter:blur(22px) saturate(145%);
}
.brand{font-size:24px;letter-spacing:-.045em}
.brand::before{
  width:31px;height:31px;border-radius:10px;margin-right:10px;
  background:linear-gradient(145deg,var(--accent),#18ad66);
  box-shadow:0 0 28px rgba(57,229,140,.28);
}
.navlinks{justify-content:center;gap:4px}
.navlinks a{font-size:13px;padding:9px 12px;border-radius:999px}
.navlinks a:hover{background:rgba(255,255,255,.035)}
.navlinks a[aria-current="page"]{background:rgba(57,229,140,.10);box-shadow:inset 0 0 0 1px rgba(57,229,140,.18)}
.nav-cta,.btn.primary{
  background:linear-gradient(135deg,#42ec95,#28c978)!important;
  border-color:transparent!important;color:#04110c!important;
  box-shadow:0 10px 28px rgba(57,229,140,.16);
}
.nav-outline,.btn,.icon-btn,.theme-btn{
  background:rgba(255,255,255,.025);border-color:rgba(108,151,138,.26);
}
.search,.input,input[type=text],input[type=url],input[type=date],input[type=number],input[type=search],textarea,select{
  background:rgba(7,21,18,.88);border-color:rgba(89,136,122,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.search:focus,input:focus,textarea:focus,select:focus{outline:none;border-color:rgba(57,229,140,.7);box-shadow:0 0 0 4px rgba(57,229,140,.08)}
.panel,.card,.toolcard,.featcard,.stat,.coachbar{
  background:linear-gradient(180deg,rgba(14,31,27,.88),rgba(9,22,19,.92));
  border-color:rgba(95,143,129,.23);box-shadow:0 18px 48px rgba(0,0,0,.18);
}

/* Globe-led cover */
.hero.cover{
  min-height:690px;
  margin:0 0 34px;
  padding:54px 54px 34px;
  border:1px solid rgba(82,140,122,.20);
  border-radius:30px;
  background:
    radial-gradient(circle at 76% 44%,rgba(29,118,82,.18),transparent 34%),
    linear-gradient(135deg,rgba(12,29,25,.96),rgba(6,17,15,.94));
  box-shadow:0 32px 110px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.025);
}
.hero.cover::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(57,229,140,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(57,229,140,.035) 1px,transparent 1px);
  background-size:42px 42px;mask-image:linear-gradient(to right,black,transparent 80%);opacity:.5;
}
.hero-eyebrow{position:relative;z-index:3;margin-bottom:20px;background:rgba(57,229,140,.07);border-color:rgba(57,229,140,.26)}
.hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(340px,.72fr);align-items:center;min-height:430px;gap:38px}
.hero-main{position:relative;z-index:3;max-width:760px}
.hero-title{font-size:clamp(46px,5.8vw,78px);line-height:.98;letter-spacing:-.062em;margin:0 0 22px;max-width:850px}
.hero-title .accent{text-shadow:0 0 34px rgba(57,229,140,.20)}
.hero-sub{font-size:18px;line-height:1.65;max-width:650px;color:#b8ccc4;margin-bottom:22px}
.hero-search{max-width:690px}
.hero-search .search{padding:17px 19px;font-size:16px;border-radius:16px;background:rgba(4,15,12,.82);border-color:rgba(97,156,137,.34)}
.herocta .btn{padding:12px 17px;border-radius:13px}
.hero-feats{gap:24px;margin-top:25px}
.hero-feat{max-width:165px}
.hero-feat .fi{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:rgba(57,229,140,.08);border:1px solid rgba(57,229,140,.14)}
.hero-feat b{font-size:12.5px}.hero-feat small{font-size:11.5px}
.hero-globe{
  top:calc(50% - 31px);left:calc(50% + 72px);width:292px;height:292px;opacity:1;
  filter:drop-shadow(0 0 52px rgba(57,229,140,.24));
}
.hero-globe::after{content:""}
.activepanel{
  position:relative;z-index:4;align-self:center;margin-left:auto;width:min(100%,410px);
  padding:18px;border-radius:18px;background:rgba(6,18,15,.62);border-color:rgba(83,148,128,.28);
  backdrop-filter:blur(15px);box-shadow:0 24px 70px rgba(0,0,0,.28)
}
.activerow{background:rgba(11,28,23,.88);border-color:rgba(88,137,123,.2);padding:12px;border-radius:13px}
.activerow:hover{transform:translateY(-1px);border-color:rgba(57,229,140,.45)}
.statcards{grid-template-columns:repeat(6,minmax(0,1fr));gap:11px;margin-top:28px}
.statcard{background:rgba(7,20,17,.80);border-color:rgba(87,143,126,.22);padding:14px;border-radius:15px}
.statcard:hover{background:rgba(13,33,27,.92)}
.statcard b{font-size:20px}.statcard span{font-size:11.5px}
.coversec{margin-top:30px}
h3.sec{font-size:11px;letter-spacing:.14em;border:0;margin:30px 0 14px;color:#73978a}
.shortcut-row{gap:11px}
.shortcut{background:linear-gradient(180deg,rgba(13,31,27,.88),rgba(9,23,20,.88));border-color:rgba(88,142,125,.2);border-radius:16px;min-height:126px;transition:.18s ease}
.shortcut:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,0,0,.25);background:rgba(17,39,33,.95)}
.featgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.featcard{padding:20px;border-radius:18px;min-height:164px}
.featcard .fico{width:40px;height:40px;border-radius:12px}
.featcard b{font-size:15px}.featcard p{font-size:13px;line-height:1.65}
.sitefoot{background:#07120f;border-color:rgba(81,132,117,.18);padding-top:38px}.footgrid,.footbase{max-width:1180px}

/* Shared application pages */
.pagehead{padding:10px 0 8px}.pagehead h2{font-size:30px;letter-spacing:-.035em}.sub{font-size:14px}
.panel{border-radius:18px;padding:18px;margin-bottom:14px}
.btn{border-radius:12px;padding:10px 14px}
.chip,.fbtn,.b{border-color:rgba(89,137,123,.23)}
.segbar{background:rgba(8,21,18,.75);border-color:rgba(89,137,123,.2);padding:5px;border-radius:14px}
.seg[aria-selected="true"]{background:rgba(57,229,140,.09);box-shadow:none}

@media(max-width:1100px){
  /* Below this, hero-grid stacks to one column and the globe stops being a
     gap-filler between two side-by-side columns -- it's a background layer
     behind the stacked content, so it's centered and capped in vw rather
     than kept at a fixed px width and a left% tuned for the two-column
     layout. That old left:75-88% positioning was still sized for the wide
     desktop layout, so on an actual phone it sat mostly off the hero box
     and got clipped by .hero{overflow:hidden} -- confirmed live at 375px,
     center-right edge landing 139px past the viewport. */
  .hero-grid{grid-template-columns:1fr}.hero.cover{min-height:auto}.hero-globe{left:50%;top:38%;width:min(420px,70vw);height:min(420px,70vw);opacity:.55}.activepanel{width:100%;max-width:620px;margin:8px 0 0}.statcards{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  #app{padding:18px 14px 34px}.topnav{padding:11px 14px;min-height:62px}.brand{font-size:21px}
  .hero.cover{padding:34px 22px 24px;border-radius:22px}.hero-title{font-size:clamp(38px,11vw,56px)}.hero-sub{font-size:16px}
  .hero-globe{left:50%;top:32%;width:min(340px,72vw);height:min(340px,72vw);opacity:.45}.statcards{grid-template-columns:repeat(2,1fr)}.featgrid{grid-template-columns:1fr}
  /* Trimmed, not just resized: a phone doesn't need the desktop's full
     dashboard-style hero. The globe, the "active right now" preview, the
     six-figure stat grid and the eight-tile shortcut row all stay on
     desktop, where there's room for them and a mouse to hover them with --
     on mobile they were six-plus screens of scrolling and six-plus
     independent network round trips before a visitor reached a real
     listing, which is also where "numbers aren't loading on mobile" was
     coming from. hero-mobile-total (hidden everywhere else, see the base
     rule below) is the one number that survives, and it's the same real
     total the desktop stat row reads, not a separate figure of its own. */
  body[data-route="home"] .hero-globe,
  body[data-route="home"] .activepanel,
  body[data-route="home"] .statcards,
  body[data-route="home"] .hero-feats,
  body[data-route="home"] .whychoose,
  body[data-route="home"] .landing-dashboard{display:none}
  body[data-route="home"] .hero-mobile-total{display:block}
}
@media(max-width:520px){.statcards{grid-template-columns:1fr 1fr}.hero-feats{display:grid;grid-template-columns:1fr 1fr}.hero-feat{max-width:none}.hero-globe{left:50%;top:26%;width:min(260px,74vw);height:min(260px,74vw);opacity:.35}}
.hero-mobile-total{display:none;margin:14px 0 0;font-size:14px;color:var(--ink-2)}
.hero-mobile-total b{color:var(--ink);font-size:20px;font-weight:800;margin-right:4px}

/* =====================================================================
   FULL-SITE MOCKUP PASS — route-aware product surfaces
   Keeps the existing data/behavior, but gives each major workflow the
   polished hierarchy and density expected from the LandMe mockup system.
   ===================================================================== */

/* Foundation */
body[data-route]:not([data-route="home"]) #app{padding-top:36px}
body[data-route]:not([data-route="home"]) .pagehead,
body[data-route="trust"] #app>.narrow>div>h2,
body[data-route="post"] #app>.narrow>div>h2{
  position:relative;
}
body[data-route]:not([data-route="home"]) .pagehead::before{
  content:"LANDME";display:block;margin-bottom:8px;color:var(--accent);
  font-size:10px;font-weight:900;letter-spacing:.22em;
}
body[data-route]:not([data-route="home"]) .pagehead h2,
body[data-route="job"] .panel>h2,
body[data-route="trust"] #app h2,
body[data-route="post"] #app h2{
  letter-spacing:-.045em;
}
body[data-route]:not([data-route="home"]) .pagehead h2{font-size:clamp(30px,4vw,44px);line-height:1.05}
body[data-route]:not([data-route="home"]) .sub{max-width:760px;line-height:1.65}
body[data-route] .apptable-wrap{
  border-color:#223545;
  background:linear-gradient(180deg,#0d1925,#0a1621);
}
body[data-route] .btn:not(.primary),body[data-route] .chip,body[data-route] .fbtn{
  background:rgba(255,255,255,.025);
}
body[data-route] .btn.primary{font-weight:800}

/* Search + Browse: discovery command center */
body[data-route="find"] #app>div:first-child,
body[data-route="browse"] #app>div:first-child{position:relative}
body[data-route="find"] .search,body[data-route="browse"] .search{
  min-height:58px;font-size:16px;padding-left:18px;border-radius:16px;
  background:linear-gradient(180deg,rgba(7,24,19,.98),rgba(5,18,15,.98));
  border-color:rgba(66,183,139,.34);box-shadow:0 18px 48px rgba(0,0,0,.20);
}
body[data-route="find"] .filterbar,body[data-route="browse"] .filterbar{
  padding:10px 0 2px;gap:8px;
}
body[data-route="find"] .fbtn,body[data-route="browse"] .fbtn{min-height:38px;padding:8px 14px}
body[data-route="find"] .quickfilters,body[data-route="browse"] .quickfilters{margin:10px 0 18px}
body[data-route="find"] .card,body[data-route="browse"] .card{
  padding:18px 19px;margin-bottom:10px;border-radius:19px;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
body[data-route="find"] .card:hover,body[data-route="browse"] .card:hover{transform:translateY(-2px)}
body[data-route="browse"] .rail{gap:24px}
body[data-route="browse"] .railpanel{padding:18px;border-radius:18px}
body[data-route="browse"] .freshcard{background:linear-gradient(180deg,rgba(13,32,27,.94),rgba(9,23,20,.94));min-height:150px}
body[data-route="browse"] .shortcut{min-height:132px}

/* Job detail: decisive two-column listing dossier */
@media(min-width:1040px){
  body[data-route="job"] #app>.narrow{max-width:none}
  body[data-route="job"] #app>.narrow>div{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.72fr);gap:18px;align-items:start}
  body[data-route="job"] #app>.narrow>div>.back,
  body[data-route="job"] #app>.narrow>div>.panel:first-of-type,
  body[data-route="job"] #app>.narrow>div>.segbar{grid-column:1/-1}
  body[data-route="job"] #app>.narrow>div>.actions{grid-column:1/-1}
}
body[data-route="job"] .panel:first-of-type{
  padding:28px;border-radius:24px;background:
  radial-gradient(circle at 90% 10%,rgba(50,213,131,.10),transparent 24rem),
  linear-gradient(180deg,#0d1925,#0a1621);
}
body[data-route="job"] .panel:first-of-type h2{font-size:clamp(30px,4vw,48px);line-height:1.06;margin:14px 0 8px}
body[data-route="job"] .panel:first-of-type .co{font-size:16px}
body[data-route="job"] .trustbadges{padding-top:8px;gap:10px}
body[data-route="job"] .trustbadge{width:auto;min-width:92px;padding:10px 12px;border:1px solid rgba(82,145,125,.22);border-radius:13px;background:rgba(255,255,255,.02)}
body[data-route="job"] .segbar{margin:4px 0 18px;position:sticky;top:82px;z-index:12;backdrop-filter:blur(18px)}
body[data-route="job"] .facts{display:grid;grid-template-columns:minmax(110px,.6fr) 1.4fr;gap:0}
body[data-route="job"] .facts dt,body[data-route="job"] .facts dd{padding:10px 0;border-bottom:1px solid rgba(102,151,136,.12)}
body[data-route="job"] #apply-wrap .btn{min-height:50px;display:grid;place-items:center;font-size:15px}
body[data-route="job"] .desc{font-size:14.5px;line-height:1.8}

/* Tracker: operating workspace */
body[data-route="tracker"] .pagesidebar{grid-template-columns:210px minmax(0,1fr);gap:24px}
body[data-route="tracker"] .sidenav{padding:10px;border:1px solid #223545;border-radius:18px;background:#0a1621}
body[data-route="tracker"] .sidenav button{padding:11px 12px;border-radius:11px}
body[data-route="tracker"] .sidenav button.on{box-shadow:inset 3px 0 0 var(--accent)}
body[data-route="tracker"] .statcards{grid-template-columns:repeat(4,minmax(0,1fr));margin:4px 0 20px}
body[data-route="tracker"] .statcard{min-height:102px;padding:18px;background:linear-gradient(180deg,#0d1925,#0a1621)}
body[data-route="tracker"] .statcard b{font-size:30px;line-height:1}
body[data-route="tracker"] .stagebar{padding:18px 12px;border:1px solid #223545;border-radius:18px;background:#0a1621}
body[data-route="tracker"] .apptable-wrap{border:1px solid rgba(88,143,126,.20);border-radius:18px;overflow:auto;box-shadow:0 18px 48px rgba(0,0,0,.15)}
body[data-route="tracker"] .apptable th{padding:13px 14px;background:rgba(255,255,255,.018)}
body[data-route="tracker"] .apptable td{padding:14px}
body[data-route="tracker"] .apptable tbody tr:hover{background:rgba(57,229,140,.025)}

/* Profile / Resume: career identity workspace */
body[data-route="profile"] .pagesidebar{gap:24px}
body[data-route="profile"] .profile-head{
  padding:24px;border:1px solid #223545;border-radius:22px;
  background:radial-gradient(circle at 90% 0,rgba(50,213,131,.09),transparent 22rem),linear-gradient(180deg,#0d1925,#0a1621);
}
body[data-route="profile"] .profilepic{width:96px;height:96px;border:1px solid rgba(57,229,140,.38);box-shadow:0 0 0 7px rgba(57,229,140,.04)}
body[data-route="profile"] .skill{background:rgba(57,229,140,.055);border-color:rgba(57,229,140,.18);color:#b9d9cd}
body[data-route="profile"] .panel h4,body[data-route="resume"] .panel h4{font-size:15px}
body[data-route="resume"] pre.doc{max-height:540px;padding:18px;background:#06110e;border-color:rgba(83,143,123,.22)}

/* Salaries: analytics surface */
body[data-route="salaries"] .searchbar,body[data-route="pay"] .searchbar{
  display:grid;grid-template-columns:minmax(0,1fr) 180px 180px;gap:10px;
  padding:12px;border:1px solid #223545;border-radius:18px;background:#0a1621;
}
body[data-route="salaries"] .g4,body[data-route="pay"] .g4{gap:12px;margin:18px 0}
body[data-route="salaries"] .metric,body[data-route="pay"] .metric{padding:20px;min-height:120px;background:linear-gradient(180deg,#0d1925,#0a1621)}
body[data-route="salaries"] .metric strong,body[data-route="pay"] .metric strong{font-size:30px;letter-spacing:-.04em}
body[data-route="salaries"] .vchart,body[data-route="pay"] .vchart{height:260px;padding-top:30px;background:linear-gradient(180deg,transparent,rgba(57,229,140,.018));border-bottom:1px solid rgba(91,148,129,.18)}
body[data-route="salaries"] .vbar,body[data-route="pay"] .vbar{box-shadow:0 -8px 24px rgba(57,229,140,.09)}

/* Coach: interview studio. Content is intentionally untouched. */
body[data-route="coach"] #app>div{max-width:1120px;margin:auto}
body[data-route="coach"] .coachbar{
  padding:18px 20px;border-radius:20px;background:radial-gradient(circle at 85% 0,rgba(57,229,140,.08),transparent 20rem),linear-gradient(180deg,rgba(14,34,29,.96),rgba(8,22,18,.96));
}
body[data-route="coach"] .qa{padding:15px 0}
body[data-route="coach"] .qa .q{font-size:15px;line-height:1.6}
body[data-route="coach"] textarea{min-height:150px}
body[data-route="coach"] .segbar{margin-bottom:18px}

/* Certifications: credential marketplace/dashboard */
body[data-route="certifications"] #app>.narrow{max-width:1120px}
body[data-route="certifications"] .card,body[data-route="certifications"] .panel{padding:20px}
body[data-route="certifications"] .grid{gap:14px}
body[data-route="certifications"] .badges{gap:7px}

/* Company directory + company dossier */
body[data-route="employers"] #app>.narrow{max-width:1120px}
body[data-route="employers"] .search{min-height:56px;margin:6px 0 18px;border-color:rgba(57,229,140,.28)}
body[data-route="employers"] .corow{padding:16px 18px;margin-bottom:9px;border-radius:17px}
body[data-route="employers"] .grade{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--panel-2)}
body[data-route="company"] #app>.narrow{max-width:1080px}
body[data-route="company"] .panel:first-of-type{padding:24px;background:radial-gradient(circle at 90% 0,rgba(50,213,131,.09),transparent 22rem),linear-gradient(180deg,#0d1925,#0a1621)}
body[data-route="company"] .coachwho b{font-size:26px;letter-spacing:-.035em}
body[data-route="company"] .segbar{margin:14px 0 20px}

/* Post a job: employer flow */
body[data-route="post"] #app>.narrow{max-width:900px}
body[data-route="post"] .steptracker{padding:8px 0 18px;margin-bottom:22px}
body[data-route="post"] .stepitem{min-width:150px;padding:13px 8px}
body[data-route="post"] .panel{padding:22px}
body[data-route="post"] label{margin-top:14px;color:#a9c0b7}
body[data-route="post"] input,body[data-route="post"] textarea,body[data-route="post"] select{min-height:46px}

/* Account */
body[data-route="account"] #app>div,body[data-route="signin"] #app>div{max-width:920px;margin:auto}
body[data-route="account"] .panel,body[data-route="signin"] .panel{padding:24px}

/* Trust: public evidence ledger */
body[data-route="trust"] #app>.narrow{max-width:1080px}
body[data-route="trust"] #app>.narrow>div>h2:first-of-type{font-size:clamp(34px,4vw,50px);margin-bottom:6px}
body[data-route="trust"] .stats{grid-template-columns:repeat(7,minmax(0,1fr));gap:9px;margin:22px 0}
body[data-route="trust"] .stat{padding:16px;min-height:100px;background:linear-gradient(160deg,rgba(15,35,29,.96),rgba(8,23,19,.94))}
body[data-route="trust"] .stat b{font-size:25px}
body[data-route="trust"] .panel{padding:20px}
body[data-route="trust"] .panel .meta a{overflow-wrap:anywhere}
body[data-route="trust"] .notice{padding:15px;border-radius:14px}

/* More: product map, not a miscellaneous dump */
body[data-route="more"] .toolcard{min-height:150px;padding:20px;border-radius:18px;background:linear-gradient(180deg,rgba(14,32,27,.93),rgba(8,22,18,.94));transition:.16s ease}
body[data-route="more"] .toolcard:hover{transform:translateY(-2px)}

/* Responsive behavior */
@media(max-width:1100px){
  .navlinks a{padding-inline:9px}.nav-outline{display:none}
  body[data-route="trust"] .stats{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:900px){
  body[data-route="tracker"] .pagesidebar{grid-template-columns:1fr}
  body[data-route="tracker"] .sidenav{display:flex;overflow:auto;padding:7px;position:static}
  body[data-route="tracker"] .sidenav button.on{box-shadow:inset 0 -2px 0 var(--accent)}
  body[data-route="salaries"] .searchbar,body[data-route="pay"] .searchbar{grid-template-columns:1fr 1fr}
  body[data-route="salaries"] .searchbar>:first-child,body[data-route="pay"] .searchbar>:first-child{grid-column:1/-1}
}
@media(max-width:700px){
  body[data-route]:not([data-route="home"]) #app{padding-top:22px}
  body[data-route="tracker"] .statcards{grid-template-columns:repeat(2,1fr)}
  body[data-route="trust"] .stats{grid-template-columns:repeat(2,1fr)}
  body[data-route="salaries"] .g4,body[data-route="pay"] .g4{grid-template-columns:repeat(2,1fr)}
  body[data-route="salaries"] .g3,body[data-route="pay"] .g3,body[data-route="salaries"] .g2,body[data-route="pay"] .g2{grid-template-columns:1fr}
  body[data-route="salaries"] .g3>*[style*="grid-column"],body[data-route="pay"] .g3>*[style*="grid-column"]{grid-column:auto!important}
  body[data-route="job"] .panel:first-of-type{padding:20px}
}
@media(max-width:520px){
  body[data-route="salaries"] .searchbar,body[data-route="pay"] .searchbar{grid-template-columns:1fr}
  body[data-route="salaries"] .searchbar>:first-child,body[data-route="pay"] .searchbar>:first-child{grid-column:auto}
  body[data-route="salaries"] .g4,body[data-route="pay"] .g4{grid-template-columns:1fr}
  body[data-route="tracker"] .statcards,body[data-route="trust"] .stats{grid-template-columns:1fr 1fr}
}

/* --- Hero stacking/readability fix: globe must never cover copy --- */
.hero.cover{
  isolation:isolate;
}
.hero.cover::before{
  z-index:0;
}
.hero-globe{
  z-index:1 !important;
}
.hero-eyebrow,
.hero-grid,
.hero-main,
.hero-title,
.hero-sub,
.hero-search,
.herocta,
.hero-feats{
  position:relative;
  z-index:5;
}
.hero-main::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-28px;
  left:-30px;
  right:-72px;
  bottom:-24px;
  pointer-events:none;
  background:radial-gradient(ellipse at 30% 44%,rgba(6,17,15,.82) 0%,rgba(6,17,15,.58) 48%,rgba(6,17,15,0) 78%);
  filter:blur(8px);
}
.hero-title{
  text-wrap:balance;
  text-shadow:0 2px 16px rgba(0,0,0,.48);
}
.hero-title .accent{
  position:relative;
  z-index:6;
}
.activepanel{
  z-index:5;
}
@media(max-width:980px){
  .hero-main::before{right:-36px;opacity:.92}
}
@media(max-width:640px){
  .hero-main::before{left:-18px;right:-18px;top:-20px;bottom:-18px}
}

/* Numeric trust/transparency signal; replaces ambiguous A-F school grades. */
.scorebadge{display:inline-grid;place-items:center;min-width:40px;height:32px;padding:0 9px;border:1px solid currentColor;border-radius:10px;font-weight:800;font-variant-numeric:tabular-nums;background:rgba(255,255,255,.025)}
.trust .t-hi,.scorebadge.t-hi{color:var(--fresh)}
.trust .t-mid,.scorebadge.t-mid{color:var(--aging)}
.trust .t-lo,.scorebadge.t-lo{color:var(--stale)}

/* Exact landing-page globe from the approved LandMe composite mockup. */
img.hero-globe{
  object-fit:contain;
  object-position:center;
  border:0;
  background:transparent;
  mix-blend-mode:screen;
  image-rendering:auto;
}
@media(max-width:980px){
  img.hero-globe{left:77%;top:37%;width:min(560px,64vw);height:auto;opacity:.72}
}
@media(max-width:640px){
  img.hero-globe{left:84%;top:25%;width:430px;height:auto;opacity:.42}
}

/* Final responsive navigation QA: never let desktop navigation labels clip.
   The bottom tab bar is a mobile/tablet control only. */
@media(min-width:981px){
  .tabbar{display:none!important}
}
@media(max-width:1180px) and (min-width:981px){
  .topnav{gap:10px;padding-inline:18px}
  .navlinks{gap:1px}
  .navlinks a{font-size:12px;padding:8px 8px}
  .navactions{gap:6px}
  .nav-outline{display:none}
  .nav-signin,.nav-cta{padding-inline:10px;font-size:12px}
  .theme-btn{padding-inline:9px}
}
@media(max-width:980px){
  .navlinks{display:none!important}
  .nav-outline{display:none!important}
  .topnav{min-height:62px;padding:10px 14px;gap:10px}
  .brand{font-size:21px}
  .brand::before{width:27px;height:27px}
  .tabbar{display:flex!important}
  body{padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom))}
  .sitefoot{padding-bottom:calc(28px + var(--tabh) + env(safe-area-inset-bottom))}
}
@media(max-width:620px){
  .navactions .theme-btn{display:none}
  .navactions .nav-signin{display:none}
  .navactions .nav-cta{font-size:11px;padding:8px 10px}
  .lang-btn{padding-inline:8px}
}
@media(max-width:430px){
  .navactions .nav-cta{display:none}
}

/* Prevent long job/company/source strings from forcing horizontal overflow. */
.card,.panel,.corow,.apptable td,.apptable th{min-width:0}
.card h3,.panel h2,.panel h3,.corow b,.meta,.sub{overflow-wrap:anywhere}
html,body{max-width:100%;overflow-x:hidden}


/* Final day-mode pass. The mockup remains the night-mode source of truth,
   but day mode uses a mineral/sage surface rather than white. These selectors
   intentionally sit after the dark mockup overrides because several of those
   components used literal dark rgba values instead of theme tokens. */
:root[data-theme="light"] body{
  background:
    radial-gradient(circle at 52% -12%,rgba(8,116,84,.10),transparent 32rem),
    linear-gradient(180deg,#edf3f0 0%,#e5ede9 48%,#e7eeea 100%);
}
:root[data-theme="light"] .topnav{
  background:rgba(237,243,240,.88);
  border-bottom-color:rgba(59,91,77,.20);
  box-shadow:0 8px 24px rgba(31,58,46,.05);
}
:root[data-theme="light"] .navlinks a:hover,
:root[data-theme="light"] .navlinks a[aria-current="page"]{background:rgba(8,116,84,.08)}
:root[data-theme="light"] .nav-outline,
:root[data-theme="light"] .btn,
:root[data-theme="light"] .icon-btn,
:root[data-theme="light"] .theme-btn{
  background:rgba(255,255,255,.48);
  border-color:rgba(56,91,76,.24);
}
:root[data-theme="light"] .search,
:root[data-theme="light"] .input,
:root[data-theme="light"] input[type=text],
:root[data-theme="light"] input[type=url],
:root[data-theme="light"] input[type=date],
:root[data-theme="light"] input[type=number],
:root[data-theme="light"] input[type=email],
:root[data-theme="light"] input[type=search],
:root[data-theme="light"] textarea,
:root[data-theme="light"] select{
  color:var(--ink);
  background:rgba(249,252,250,.92);
  border-color:rgba(56,91,76,.25);
}
:root[data-theme="light"] .panel,
:root[data-theme="light"] .card,
:root[data-theme="light"] .toolcard,
:root[data-theme="light"] .featcard,
:root[data-theme="light"] .stat,
:root[data-theme="light"] .coachbar{
  background:linear-gradient(180deg,rgba(248,251,249,.96),rgba(238,245,241,.96));
  border-color:rgba(70,104,89,.22);
  box-shadow:0 14px 36px rgba(31,58,46,.08);
}
:root[data-theme="light"] .hero.cover{
  background:
    radial-gradient(circle at 77% 43%,rgba(8,116,84,.16),transparent 34%),
    linear-gradient(135deg,rgba(240,247,243,.98),rgba(220,233,226,.98));
  border-color:rgba(52,97,78,.22);
  box-shadow:0 28px 74px rgba(31,58,46,.12),inset 0 1px 0 rgba(255,255,255,.85);
}
:root[data-theme="light"] .hero-main::before{
  background:radial-gradient(ellipse at 30% 44%,rgba(234,242,238,.94) 0%,rgba(234,242,238,.74) 52%,rgba(234,242,238,0) 80%);
}
:root[data-theme="light"] .hero-title{
  color:#102019;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
:root[data-theme="light"] img.hero-globe{mix-blend-mode:multiply;opacity:.74;filter:saturate(.86) contrast(.95)}
:root[data-theme="light"] body[data-route="tracker"] .stagebar,
:root[data-theme="light"] body[data-route="salaries"] .searchbar,
:root[data-theme="light"] body[data-route="pay"] .searchbar{background:rgba(246,250,248,.78)}
:root[data-theme="light"] body[data-route="profile"] .profile-head,
:root[data-theme="light"] body[data-route="company"] .panel:first-of-type,
:root[data-theme="light"] body[data-route="coach"] .coachbar{
  background:radial-gradient(circle at 90% 0,rgba(8,116,84,.08),transparent 22rem),linear-gradient(180deg,#f7faf8,#eaf2ee);
}
:root[data-theme="light"] body[data-route="resume"] pre.doc{background:#f7faf8;border-color:rgba(56,91,76,.22)}
:root[data-theme="light"] body[data-route="post"] label{color:var(--ink-2)}
:root[data-theme="light"] .scorebadge{background:rgba(255,255,255,.5)}

/* Resume Tailor: evidence-first, never a keyword-stuffing scorecard. */
.tailor-plan{overflow:hidden}
.tailor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.tailor-col{min-width:0;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.tailor-col>.hint{margin:6px 0 10px}
.tailor-certs{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
@media(max-width:820px){.tailor-grid{grid-template-columns:1fr}}

/* Branded not-found state shared by in-app bad routes and the static 404. */
.notfound{min-height:calc(100vh - 220px);display:grid;place-items:center;padding:54px 20px}
.notfound-card{position:relative;overflow:hidden;width:min(880px,100%);padding:clamp(28px,6vw,66px);border:1px solid var(--line);border-radius:24px;background:radial-gradient(circle at 82% 20%,rgba(20,211,148,.13),transparent 20rem),linear-gradient(145deg,var(--panel),var(--panel-2));box-shadow:var(--shadow)}
.notfound-code{font-size:clamp(64px,15vw,150px);line-height:.8;font-weight:900;letter-spacing:-.08em;color:var(--accent);opacity:.16;position:absolute;right:30px;top:34px;pointer-events:none}
.notfound-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--accent);font-weight:800}
.notfound-card h1{max-width:13ch;font-size:clamp(34px,7vw,68px);line-height:.95;margin:12px 0 18px;letter-spacing:-.045em}
.notfound-card p{max-width:58ch;color:var(--ink-2);font-size:16px;line-height:1.6}
.notfound-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.notfound-foot{margin-top:18px;color:var(--ink-3);font-size:12.5px}


/* =====================================================================
   APPROVED MOCKUP FIDELITY PASS — 2026-08-25
   Deep navy is the foundation; emerald is an accent. Desktop uses a fixed
   workspace rail and a compact top command bar, matching the approved mockup.
   ===================================================================== */
:root[data-theme="dark"]{
  --bg:#07111c;--panel:#0c1723;--panel-2:#101d2a;--line:#213243;--line-2:#30465a;
  --ink:#f5f8fb;--ink-2:#9fb0c1;--ink-3:#6f8193;
  --accent:#32d583;--accent-2:#20b96d;--accent-soft:#0a2c22;
  --fresh:#32d583;--aging:#f4bd3f;--stale:#f19b38;--ghost:#ff6b6f;--lm-blue:#27a9ff;
  --shadow:0 12px 34px rgba(0,0,0,.24);--radius:10px;
}
:root[data-theme="dark"] body{
  background:radial-gradient(circle at 56% -18%,rgba(34,127,206,.13),transparent 34rem),linear-gradient(180deg,#07111c,#08131e 60%,#07111c);
}
.deskrail{display:none}
@media(min-width:981px){
  body{padding-left:208px;padding-bottom:0}
  .deskrail{display:flex;position:fixed;z-index:70;left:0;top:0;bottom:0;width:208px;padding:14px 10px 18px;flex-direction:column;overflow-y:auto;background:linear-gradient(180deg,#08121d,#07111a);border-right:1px solid #243648}
  .railbrand{display:block;color:#f7fafc;text-decoration:none;font-size:21px;font-weight:850;letter-spacing:.055em;padding:0 10px 15px;margin-bottom:7px;border-bottom:1px solid #1e3041}
  .railbrand span{color:var(--accent)} .railbrand small{display:block;margin-top:4px;font-size:8px;letter-spacing:.24em;color:#c2ccd6;font-weight:700}
  .railgroup{padding:10px 0;border-bottom:1px solid #182a39}.railaccount{margin-top:auto;border-bottom:0}.raillabel{padding:0 10px 6px;color:#8293a4;font-size:8.5px;letter-spacing:.12em}
  .deskrail a:not(.railbrand){display:flex;align-items:center;gap:10px;padding:7px 10px;margin:1px 0;border-radius:6px;color:#bac6d2;text-decoration:none;font-size:11px;line-height:1.2}
  .deskrail a:not(.railbrand)>span{width:17px;text-align:center;color:#d8e1e8;font-size:13px}
  .deskrail a:hover{background:#101f2b;color:#fff}.deskrail a[aria-current="page"]{background:linear-gradient(90deg,#0d513d,#0b3d32);color:#5cf0a5}.deskrail a[aria-current="page"]>span{color:#5cf0a5}
  .topnav{min-height:47px;padding:7px 18px 7px 24px;gap:16px;background:rgba(6,15,24,.94);border-bottom:1px solid #203244;backdrop-filter:blur(16px)}
  .topnav .brand{display:none}.navlinks{justify-content:flex-start;gap:4px}.navlinks a{font-size:10.5px;font-weight:500;padding:6px 9px;border-radius:5px;color:#c4ced8}
  .navlinks a[aria-current="page"]{background:transparent;color:#fff;box-shadow:none}.navlinks a:hover{background:#10202e}
  .navactions{margin-left:auto}.nav-outline,.nav-signin,.nav-cta,.icon-btn,.theme-btn{font-size:10px;border-radius:6px;padding:6px 10px}
  .nav-outline{border-color:#7a5a12;color:#f4bd3f!important;background:#11170f!important}.nav-cta{background:transparent!important;border:1px solid #18784d!important;color:#52e99b!important;box-shadow:none!important}
  #app{max-width:none;margin:0;padding:14px 14px 20px}
}
:root[data-theme="dark"] .panel,:root[data-theme="dark"] .card,:root[data-theme="dark"] .toolcard,:root[data-theme="dark"] .featcard,:root[data-theme="dark"] .stat,:root[data-theme="dark"] .coachbar{background:linear-gradient(180deg,#0d1925,#0a1621);border-color:#223545;box-shadow:0 8px 24px rgba(0,0,0,.18)}

.hero.cover{min-height:402px;margin:0 0 8px;padding:24px 14px 10px;border:1px solid #213445;border-radius:9px;background:radial-gradient(circle at 58% 34%,rgba(27,126,211,.17),transparent 27rem),linear-gradient(135deg,#08131e 0%,#07131f 58%,#08141e 100%);box-shadow:none}
.hero.cover::before{background-image:linear-gradient(rgba(54,117,164,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(54,117,164,.025) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to right,black,rgba(0,0,0,.72),transparent 86%);opacity:.45}
.hero-eyebrow{z-index:5;width:auto;display:inline-flex;margin:0 0 11px;padding:0;border:0;background:none}.hero-eyebrow .eyebrow{font-size:10px;letter-spacing:.06em;color:#3ce38b}
.hero-grid{min-height:250px;display:grid;grid-template-columns:minmax(330px,430px) minmax(250px,310px);justify-content:space-between;align-items:center;gap:20px}
.hero-main{max-width:430px;z-index:5}.hero-title{font-size:clamp(38px,3.65vw,52px);line-height:.98;letter-spacing:-.045em;max-width:430px;margin:0 0 13px}.hero-title .accent{color:#3bd98a;text-shadow:none}
.hero-sub{font-size:12.5px;line-height:1.55;max-width:390px;color:#bbc7d2;margin:0 0 13px}.hero-search{display:none}.herocta{margin-top:0;gap:9px}.herocta .btn{padding:9px 18px;border-radius:5px;font-size:11px;min-width:104px;text-align:center}
.herocta .btn.primary{background:linear-gradient(90deg,#168b55,#35c578)!important;color:#fff!important;box-shadow:none}.herocta .btn:not(.primary){background:#0b151f;border-color:#4c5b69}
.hero-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px;width:100%}.hero-feat{max-width:none;gap:7px}.hero-feat .fi{width:27px;height:27px;border-radius:50%;background:#0d201c;border:1px solid #1d5a43;font-size:12px}
.hero-feat b{font-size:9.5px;color:#eef3f7}.hero-feat small{font-size:8.5px;color:#8495a5}
img.hero-globe{z-index:1!important;position:absolute!important;left:57.5%!important;top:44%!important;transform:translate(-50%,-50%)!important;width:540px!important;height:auto!important;max-width:none!important;opacity:.96!important;mix-blend-mode:screen!important;filter:saturate(1.15) contrast(1.08) brightness(1.08) drop-shadow(0 0 34px rgba(30,132,226,.17))!important;-webkit-mask-image:radial-gradient(ellipse at center,black 58%,rgba(0,0,0,.88) 70%,transparent 88%);mask-image:radial-gradient(ellipse at center,black 58%,rgba(0,0,0,.88) 70%,transparent 88%)}
.hero-main::before{top:-14px;left:-12px;right:-28px;bottom:-14px;background:radial-gradient(ellipse at 22% 45%,rgba(7,17,28,.96) 0%,rgba(7,17,28,.77) 55%,rgba(7,17,28,0) 82%);filter:blur(4px)}
.activepanel{z-index:6;width:285px;align-self:center;margin-left:auto;padding:13px;border-radius:9px;background:rgba(10,22,32,.91);border:1px solid #2a3d4c;backdrop-filter:blur(8px);box-shadow:none}.activepanel h4{font-size:8.5px;color:#d6dee5;padding-bottom:7px;border-bottom:1px solid #263846}
.activerow{padding:8px 3px;border:0;border-bottom:1px solid #1c2d3b;border-radius:0;background:transparent}.activerow b{font-size:10px}.activerow .co,.activerow .meta{font-size:8.5px}

.statcards{position:relative;z-index:7;margin:9px 0 0;display:grid;grid-template-columns:repeat(6,1fr);gap:0;border:1px solid #263a4a;border-radius:8px;overflow:hidden;background:#0b1722}
.statcard{min-height:55px;margin:0;padding:8px 12px;border:0;border-right:1px solid #1e3141;border-radius:0;background:transparent}.statcard:last-child{border-right:0}.statcard:hover{background:#0e1d29}.statcard b{font-size:15px}.statcard span{font-size:8.5px}

.coversec{margin:8px 0 0;padding:10px 8px 12px;border:1px solid #213445;border-radius:8px;background:#091621}h3.sec{margin:0 0 8px;font-size:11px;letter-spacing:0;color:#eef3f6;text-transform:none}
.shortcut-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}.shortcut{min-height:60px!important;padding:8px 9px!important;border-radius:7px!important;background:#0c1925!important;border:1px solid #233748!important;box-shadow:none!important}.shortcut:hover{transform:none!important;background:#10202d!important}.shortcut-ico,.shortcut-badge{width:27px!important;height:27px!important}.shortcut b{font-size:9.5px!important}.shortcut .n{font-size:8.5px!important}

.landing-dashboard{display:grid;grid-template-columns:1.08fr .85fr 1.38fr;gap:1px;margin-top:1px;border:1px solid #213445;border-radius:8px;overflow:hidden;background:#213445}.landing-panel{min-width:0;background:linear-gradient(180deg,#0a1722,#09141f);padding:12px;min-height:278px}
.landing-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:10px}.landing-panel-head h3{margin:0;color:#f0f5f8;font-size:13px}.landing-panel-head a,.landing-action,.landing-salary-foot a{font-size:9px;color:#3bda8a;text-decoration:none}.landing-panel-head small{display:block;color:#778a9b;font-size:8px}
.landing-mini-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:9px}.landing-mini-stat{border:1px solid #213444;border-radius:6px;padding:7px;background:#0e1b27}.landing-mini-stat b{display:block;font-size:15px}.landing-mini-stat span{display:block;font-size:7.5px;color:#899aa9}
.landing-table{border:1px solid #1d3040;border-radius:6px;overflow:hidden}.landing-table-head,.landing-table-row{display:grid;grid-template-columns:1.6fr 1fr .72fr;gap:7px;padding:6px 7px}.landing-table-head{background:#0d1b27;color:#758899;font-size:7px;text-transform:uppercase}.landing-table-row{border-top:1px solid #192b39;color:#aab8c4;text-decoration:none;font-size:8px}.landing-table-row span:first-child{color:#dfe6eb}.landing-empty{padding:18px;color:#7f91a0;font-size:9px}
.landing-profile-top{display:flex;gap:10px;padding:8px;border:1px solid #213444;border-radius:7px;background:#0d1a26}.landing-avatar{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#42596d,#172939);color:#fff;font-weight:800}.landing-profile-top b{display:block;font-size:10px}.landing-profile-top span,.landing-profile-top small{display:block;color:#93a3b2;font-size:8px}
.landing-profile-block{margin-top:7px;padding:8px;border:1px solid #213444;border-radius:7px;background:#0d1a26}.landing-profile-block strong{font-size:9px}.landing-action{display:block;margin-top:9px}
.landing-salary-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:7px 0 4px}.landing-salary-stats div{padding:7px 0;border-bottom:1px solid #1e3040}.landing-salary-stats span{display:block;color:#778a9a;font-size:7.5px}.landing-salary-stats b{display:block;margin-top:2px;font-size:11px}.landing-bars{height:102px;display:flex;align-items:flex-end;gap:14px;padding:13px 18px 7px;border-bottom:1px solid #1c2e3d}.landing-bars i{flex:1;min-width:8px;max-width:24px;border-radius:2px 2px 0 0;background:linear-gradient(180deg,#49d98c,#168953)}.landing-salary-foot{display:flex;justify-content:space-between;gap:8px;margin-top:8px;color:#8193a2;font-size:8px}

:root[data-theme="light"]{--bg:#abc9b8;--panel:#bbd7c7;--panel-2:#a3c6b0;--line:#83a790;--line-2:#678972;--ink:#16261d;--ink-2:#19211c;--ink-3:#3f4d44;--accent:#0f7b5a;--accent-2:#0b8f68;--accent-ink:#ffffff;--accent-soft:#99cab1;--fresh:#087454;--aging:#7a6418;--stale:#9a551b;--ghost:#a52f31;--shadow:0 18px 44px rgba(31,58,46,.11);color-scheme:light}
/* A soft sage tint, not a flat gray -- the same accent-green radial glow
   dark mode's body uses (line 772-ish, rgba(57,229,140,...) over near-black),
   just inverted onto a pale ground instead of a stark white one. Requested
   directly: the previous light theme (#e8eef1/#dfe7eb, a cool blue-gray with
   no relationship to the brand green) read as flat and hard on the eyes next
   to how well the dark theme lands. */
:root[data-theme="light"] body{
  background:
    radial-gradient(circle at 50% -10%,rgba(15,123,90,.07),transparent 40rem),
    linear-gradient(180deg,#b8d3be 0%,#abc9b8 50%,#a3c1b0 100%);
}
:root[data-theme="light"] .deskrail{background:linear-gradient(180deg,#a3c1b0,#97b9a4);border-right-color:#79a187}:root[data-theme="light"] .railbrand{color:#16261d;border-bottom-color:#7ea68b}:root[data-theme="light"] .railbrand small,:root[data-theme="light"] .raillabel{color:#54695b}:root[data-theme="light"] .deskrail a:not(.railbrand){color:#2c3f33}
:root[data-theme="light"] .topnav{background:rgba(171,204,184,.94);border-bottom-color:#79a187}:root[data-theme="light"] .hero.cover{background:radial-gradient(circle at 58% 34%,rgba(15,123,90,.15),transparent 27rem),linear-gradient(135deg,#a8cdb7,#9fc5b0);border-color:#79a187}
:root[data-theme="light"] .hero-main::before{background:radial-gradient(ellipse at 22% 45%,rgba(181,209,190,.98),rgba(181,209,190,.8) 56%,transparent 82%)}:root[data-theme="light"] .hero-title{color:#16261d}:root[data-theme="light"] .hero-sub{color:#44594c}:root[data-theme="light"] img.hero-globe{mix-blend-mode:multiply!important;opacity:.72!important;filter:saturate(.94) contrast(1.03) brightness(1.03)!important}
/* The globe is a <canvas> now (home.js's drawGlobe()), not the img the two
   rules above still target -- those are dead selectors, which is why the
   sphere rendered as a stark solid-black circle on the light background
   instead of picking up any light-theme treatment at all. Its palette
   (near-black fill, green wireframe) is drawn for a dark page; opacity is
   the safe way to soften it here rather than a blend mode, which would
   either leave the black fill fully opaque (multiply) or shift its color
   (invert/hue-rotate) -- this keeps it a quiet, unobtrusive backdrop. */
:root[data-theme="light"] .activepanel,:root[data-theme="light"] .statcards,:root[data-theme="light"] .coversec,:root[data-theme="light"] .landing-panel,:root[data-theme="light"] .landing-profile-top,:root[data-theme="light"] .landing-profile-block,:root[data-theme="light"] .landing-mini-stat,:root[data-theme="light"] .landing-table{background:#b1ccbc;border-color:#79a187;color:#16261d}:root[data-theme="light"] .landing-panel-head h3,:root[data-theme="light"] .statcard b,:root[data-theme="light"] .landing-salary-stats b{color:#16261d}:root[data-theme="light"] .shortcut{background:#a8cab4!important;border-color:#79a187!important}:root[data-theme="light"] .landing-dashboard{background:#79a187;border-color:#79a187}

@media(max-width:1260px) and (min-width:981px){.hero-grid{grid-template-columns:minmax(300px,390px) minmax(235px,275px)}img.hero-globe{left:58%!important;width:470px!important}.hero-feats{width:520px;max-width:calc(100vw - 530px)}.shortcut-row{grid-template-columns:repeat(4,1fr)}.landing-dashboard{grid-template-columns:1fr 1fr}.landing-salary{grid-column:1/-1}}
@media(max-width:980px){body{padding-left:0}.deskrail{display:none}.hero.cover{padding:26px 18px 16px}.hero-grid{grid-template-columns:1fr;gap:12px}.hero-main{max-width:620px}.hero-feats{width:auto;max-width:none}img.hero-globe{left:72%!important;top:32%!important;width:430px!important;opacity:.43!important}.activepanel{width:100%;max-width:560px;margin-top:10px}.shortcut-row{grid-template-columns:repeat(4,1fr)}.landing-dashboard{grid-template-columns:1fr}}
@media(max-width:620px){.hero-feats{grid-template-columns:1fr 1fr}.statcards{grid-template-columns:1fr 1fr}.shortcut-row{grid-template-columns:1fr 1fr}}


/* =====================================================================
   ORIGINAL MOCKUP PRODUCT PASS — Browse/Search + full product density
   ===================================================================== */
.browse-herohead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:4px 0 14px;
}
.browse-herohead .pagehead{margin:0}
.browse-herohead .pagehead h2{font-size:24px;letter-spacing:-.025em}
.browse-herohead .accent{color:var(--accent)}
.browse-total{display:flex;align-items:baseline;gap:8px;white-space:nowrap;padding-bottom:4px}
.browse-total b{font-size:21px;color:var(--accent)}
.browse-total span{font-size:11px;color:var(--ink-2)}
body[data-route="browse"] #app,body[data-route="find"] #app{padding-top:16px}
body[data-route="browse"] .rail,body[data-route="find"] .rail{
  grid-template-columns:minmax(0,1fr) 286px;gap:14px;align-items:start;
}
body[data-route="browse"] .rail>aside,body[data-route="find"] .rail>aside{position:sticky;top:62px}
body[data-route="browse"] .railpanel,body[data-route="find"] .railpanel{
  background:#0d1924;border:1px solid #263a49;border-radius:8px;padding:12px;
}
body[data-route="browse"] .railpanel h4,body[data-route="find"] .railpanel h4{
  font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:#c6d4df;
}
.shortcuts-viewport{
  border:1px solid #2a3e4d;border-radius:20px;padding:12px 14px;background:#091620;
  overflow:hidden;position:relative;
}
.shortcuts-track{gap:8px;scroll-padding-inline:2px}
.shortcut{
  flex:0 0 118px!important;min-height:120px!important;padding:11px 10px!important;
  border-radius:8px!important;display:flex!important;flex-direction:column!important;
  align-items:flex-start!important;justify-content:flex-start!important;gap:5px!important;
}
.shortcut-ico{font-size:23px!important;line-height:1;color:#69c7ff}
.shortcut b{font-size:10px!important;line-height:1.25}
.shortcut .n{font-size:9px!important;color:#38d989!important}
.shortcut small{font-size:8px!important;line-height:1.3;color:#8093a3!important}
.carousel-dots{margin:8px auto 0}
.freshstrip{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:9px!important;
  overflow:visible!important;margin-bottom:20px;
}
.freshcard{
  min-width:0!important;min-height:168px;padding:12px!important;border-radius:7px!important;
  background:#0d1925!important;border:1px solid #223646!important;text-align:left!important;
}
.freshcard h4{font-size:11px;margin:9px 0 5px;line-height:1.25}
.freshcard .co,.freshcard .meta{font-size:8px}
.freshcard .badges{margin-top:7px}
body[data-route="find"] .pagehead.split{
  padding:0 0 10px;border-bottom:1px solid #213443;
}
body[data-route="find"] .searchbar,body[data-route="find"] .toolbar,body[data-route="find"] .quickfilters{
  background:#091620;
}
body[data-route="find"] .quickfilters{
  padding:6px;border:1px solid #213443;border-radius:8px;overflow-x:auto;display:flex;gap:6px;
}
body[data-route="find"] .qfchip{
  flex:0 0 auto;background:#0f1b26;border:1px solid #263948;border-radius:6px;padding:7px 10px;
}
body[data-route="find"] .qfchip[aria-pressed="true"]{border-color:#2fcf80;background:#0c2b21}
@media(max-width:1180px){
  .freshstrip{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:980px){
  body[data-route="browse"] .rail,body[data-route="find"] .rail{grid-template-columns:1fr}
  body[data-route="browse"] .rail>aside,body[data-route="find"] .rail>aside{position:static}
}
@media(max-width:640px){
  .browse-herohead{align-items:flex-start;flex-direction:column}
  .freshstrip{grid-template-columns:1fr!important}
}