/* Passform — the shared look.
 *
 * Every page still carries its own <style> for layout. This sheet is loaded
 * after it and holds what must be the same everywhere: the typeface, the
 * header, the shape of cards, buttons and fields. A change of look is made
 * here once instead of in twelve pages that then drift apart.
 *
 * The font is served from this site, not from a font CDN: a visitor's address
 * must not reach a third party just to draw letters.
 */
@font-face{font-family:"Nunito";font-style:normal;font-display:swap;font-weight:200 1000;
  src:url("/fonts/nunito-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito";font-style:normal;font-display:swap;font-weight:200 1000;
  src:url("/fonts/nunito-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--ink:#16203A;--muted:#55627D;--line:#DCE4F2;--tint:#E8EFFA}

body{font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:15.5px;
     background:#FFFFFF linear-gradient(#EEF3FB,#FFFFFF 520px) no-repeat;-webkit-font-smoothing:antialiased}

/* ── header: light and sticky, so the page reads as one sheet */
header{position:sticky;top:0;z-index:40;min-height:64px;color:var(--ink);
       background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
       border-bottom:1px solid var(--line);padding:10px max(24px,calc((100% - 1180px)/2))}
header b{display:inline-flex;align-items:center;gap:10px;font-size:21px;font-weight:800;letter-spacing:-.02em}
/* The mark is drawn white for a blue bar. On a light header it sits on its
   own blue tile instead, which keeps one drawing for both. */
header b .mark{width:30px;height:30px;margin:0;vertical-align:0;background:var(--eu);border-radius:7px}
header nav{gap:4px;flex-wrap:wrap;font-weight:700}
header nav a{color:var(--muted);opacity:1;padding:9px 12px;border-radius:10px}
header nav a:hover{color:var(--eu);background:var(--tint)}
header nav a[aria-current]{color:var(--eu);background:var(--tint);text-decoration:none}
header nav #who{gap:4px;margin-left:8px;padding-left:12px;border-left:1px solid var(--line)}
header nav .pf-email{opacity:1;color:var(--muted);font-weight:600;padding:0 8px}
header nav #pf-lang{width:auto;background:#fff;color:var(--ink);border:1px solid var(--line);
       border-radius:10px;padding:7px 8px;font-weight:700}

/* ── type */
h1{font-weight:700;letter-spacing:-.025em;line-height:1.1;color:var(--ink)}
main>h1{font-size:clamp(26px,3.4vw,34px)}
main{margin-top:40px}
.hero h1{font-size:clamp(32px,5.4vw,50px);font-weight:700;letter-spacing:-.03em;line-height:1.04;color:var(--ink)}
.hero p{font-size:18px}
.hero,body[data-view="home"] main{max-width:680px}

/* ── surfaces */
.card,.plan,.stats,.cand,.opt,.empty,.login,.sugg,.m,.grp,.cfj,.lh,table{border-radius:16px;border-color:var(--line)}
.panel,.ov .panel{border-radius:20px}
th{background:#F7F9FD}
.bar:has(.kpi){border-radius:18px;border-color:var(--line);padding:20px 24px}
.kpi b,.stats b{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.15}

/* ── buttons and fields */
button,.btn,a.btn,.gbtn,.links a,.match a.cta{border-radius:12px;font-weight:700}
button.sec,.links a.sec{background:#fff;color:var(--eu);box-shadow:inset 0 0 0 1px var(--line)}
button.sec:hover,.links a.sec:hover{background:var(--tint)}
.sec.danger,.lh .lh-actions button.danger{box-shadow:none}
body[data-view="home"] button{border-radius:12px;padding:17px;font-size:17px}
input,select,textarea{border-radius:12px;border-color:var(--line);accent-color:var(--eu)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid rgba(31,78,156,.35);outline-offset:1px;border-color:var(--eu)}
.drop,body[data-view="home"] .drop{border-radius:18px;border-color:#B9C9E6}

/* ── positions board */
/* The source used to be a coloured left edge. It is a dot beside the name
   now: the colour still tells sources apart, and the name is there for anyone
   who cannot rely on colour. */
.grid .card{border-left:1px solid var(--line) !important;padding:18px 20px}
.grid .card:hover{border-color:var(--eu) !important}
.card .src::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.card h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
.card .sk{gap:6px}
.card .sk span,.skills span,.cover span{border-radius:8px;background:var(--tint);color:var(--eu-deep,#163A75);font-weight:700}
.card .sk span{padding:3px 9px;font-size:12px}
/* Open is the brand blue. Yellow is kept for priority and red for age, so
   each colour on a card means one thing. */
.st-OPEN{background:var(--eu);color:#fff}
.st-NEW{background:var(--tint);color:var(--eu-deep,#163A75)}
.prio{background:#FFF4C2;color:#5C4700;padding:2px 9px;font-size:11px}
.leg{font-weight:700;padding:6px 14px;border-color:var(--line)}

/* ── pricing */
main:has(.plans)>h1,main:has(.plans)>.sub{text-align:center}
.plan{border-radius:18px;padding:26px}
.plan.hot{border:1.5px solid var(--eu);box-shadow:0 20px 40px -28px rgba(31,78,156,.55)}
.plan h3{font-size:18px}
.price{font-size:40px;font-weight:800;letter-spacing:-.03em}
.flag{font-weight:800;letter-spacing:.03em;padding:4px 12px}
main:has(.plans)>h2{text-align:center}
.bar .actions{flex-wrap:wrap}

/* The header's own layout, so a new page needs nothing but <header></header>. */
header{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
header nav{margin-left:auto;display:flex;align-items:center;font-size:14px}
header nav a{text-decoration:none;white-space:nowrap}
header nav #who{display:flex;align-items:center}
header nav #pf-lang{font-family:inherit;font-size:12.5px;cursor:pointer}

/* A feature the plan does not include, in place of its controls. */
.pf-upsell{background:var(--tint);color:var(--ink);border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.5;margin:12px 0}
.pf-upsell a{color:var(--eu);font-weight:600;white-space:nowrap}
.row .pf-upsell{grid-column:1/-1;margin:0}