/* JobScout — the design language, shared by every page.
   Extracted from index.html on 2026-09-19 so saved, privacy, stats and the
   application page cannot drift away from the demo they belong to.
   Page-specific rules stay in each page's own <style>, which follows this. */

/* ═══ CARRIED FROM v2.2, and load-bearing ══════════════════════════════════
   Dropping this block is what broke the first deploy. It holds:
     · body{overflow-x:hidden} — the ONLY thing containing the gates band,
       which is 132vw wide on purpose, and the carousel's off-canvas cards.
       Without it the whole page scrolled sideways.
     · .wrap, the base html/body/link rules, ::selection.
     · the v2.2 token names the carried sections still reference (--midnight,
       --info, --pill, --card, the shadow set). :root is demoted to `html`
       here so the redesign's own token block — same specificity, declared
       after — wins on every name the two share.
   ══════════════════════════════════════════════════════════════════════ */
  /* ── JobScout v2.2 — August Health language ──────────────────────────────
     Cream canvas, indigo ink, editorial serif against Inter, pill geometry,
     warm-brown shadows. Tokens mirror jobscout/brandkit/tokens.
     Contrast measured on cream #f8f3eb: deep-ink 17.8, midnight 14.3,
     stone 11.4, meadow 9.0, ember-deep 4.6, indigo 4.2, forest 3.9.
     Indigo and forest are FILL/large-text only — never body copy.

     v2.2 (2026-09-14): the serif runs at 450–500 instead of 400 and every
     small size came up a step — Newsreader 400 on cream read thin on a phone.
     Candidate cards borrow Steep's "one lit card" layout, the numbers are a
     Calendly-style centred carousel, and the page closes on a Cosmos-style
     CTA over a cropped wordmark.                                          ── */
  html{
    --indigo:#4865ff; --ink:#080331; --midnight:#1b1463; --lavender:#a2baff; --stone:#333333;
    --canvas:#f8f3eb; --surface:#ffffff; --tinted:#f098d7; --accent:#ffaefe;
    --vibrant:#ff6d39; --info:#dce4fb;
    --forest:#328a3b; --meadow:#114e0b; --ember:#ff6d39; --ember-deep:#cc3600;
    --blossom:#f098d7; --petal:#ffaefe;

    /* fit bands — product logic. text colour is contrast-checked on cream. */
    --auto:#114e0b;      --auto-fill:#328a3b;
    --ping:#1b1463;      --ping-fill:#4865ff;
    --unsure:#cc3600;    --unsure-fill:#ff6d39;
    --nearmiss:#333333;  --nearmiss-fill:#dce4fb;

    --text:#080331; --text2:#4a4560; --text3:#6b6780;
    --hair:rgba(8,3,49,.10); --hair2:rgba(8,3,49,.18);

    --serif:"Newsreader",Georgia,"Times New Roman",serif;
    --sans:"Inter",-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

    --pill:1600px; --card:16px;
    --sh-cta:rgba(75,68,57,.1) 0 12px 24px 0, rgba(75,68,57,.1) 0 48px 48px 0;
    --sh-card:rgba(75,68,57,.1) 0 48px 48px 0;
    --sh-subtle:rgba(75,68,57,.05) 0 4px 4px 0, rgba(75,68,57,.08) 0 32px 16px 0;
    --sh-btn:rgba(99,91,79,.08) 0 8px 16px 0, rgba(99,91,79,.04) 0 32px 32px 0;
    --ease:cubic-bezier(.22,1,.36,1);
  }

  /* August's measured transitions: background-color .3s, colour .3s, box-shadow .2s.
     Restrained - no transforms on hover anywhere on the reference. */
  a,button,.upl,.letterbtn,.tailorbtn,.pill,select.stage,.verdict{
    transition:background-color .3s var(--ease),color .3s var(--ease),
               border-color .3s var(--ease),box-shadow .2s var(--ease)}
  .run:hover{filter:none;transform:none;background:var(--midnight);box-shadow:var(--sh-cta)}
  .scard.in:hover{box-shadow:rgba(75,68,57,.26) 0 40px 72px 0}
  .row:hover{background:rgba(72,101,255,.035)}
  header nav a:hover{color:var(--indigo);text-decoration:none}
  .pill:hover{background:var(--lavender)}
  *{box-sizing:border-box}
  /* The hero circles bleed past the viewport edges, as August's do. Clip rather
     than scroll - overflow-x:clip does not create a scroll container, so sticky
     positioning on the header keeps working (overflow:hidden would break it). */
  html{overflow-x:clip;scroll-behavior:smooth}
  body{overflow-x:clip}
  body{margin:0;background:var(--canvas);color:var(--text);font-family:var(--sans);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
  body{background-image:radial-gradient(rgba(8,3,49,.07) 1px,transparent 1px);background-size:24px 24px;background-attachment:fixed}
  .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
  main.wrap{max-width:1040px}
  a{color:var(--midnight);text-decoration:none}
  a:hover{text-decoration:underline;text-underline-offset:3px}
  button{font:inherit;cursor:pointer}
  ::selection{background:var(--accent)}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }




/* ══ JobScout v3 — the Parallel-study redesign, 2026-09-19 ═══════════════
   Two authored token sets (CA light, KE dark); nothing outside them uses a
   hex. Notes and what was deliberately not copied: docs/REDESIGN-parallel.md
   ══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   TWO AUTHORED TOKEN SETS. Nothing below the token blocks uses a hex.
   CA = light (the existing JobScout cream + indigo, Brand Kit v2.2).
   KE = dark  (authored, NOT an inversion — see docs/REDESIGN-parallel.md).
   ═══════════════════════════════════════════════════════════════════════ */
html,
html[data-market="ca"]{
  --canvas:#f4f1ea;        /* page */
  --canvas-2:#faf8f4;      /* alternating band */
  --surface:#ffffff;       /* cards, input */
  --ink:#080331;           /* display + primary text */
  --text:#1a1636;
  --text2:#565173;
  --text3:#83809a;
  --hair:rgba(8,3,49,.10);
  --hair2:rgba(8,3,49,.16);
  --accent:#4865ff;        /* indigo — links, active state */
  --accent-ink:#ffffff;
  --live:#ff6d39;          /* the one chromatic dot */
  --btn:#080331;
  --btn-ink:#ffffff;
  --chip:#ffffff;
  --chip-ink:#080331;
  --scrim:rgba(8,3,49,.55);
  --sh-hover:0 6px 27px rgba(8,3,49,.09), 0 1.8px 8px rgba(8,3,49,.05), 0 .75px 3.4px rgba(8,3,49,.04);
  --trough:rgba(8,3,49,.06);
  --hero-img:linear-gradient(140deg,#2b2350,#4865ff 48%,#f098d7);
}
html[data-market="ke"]{
  /* Cool and near-neutral, 65-71deg off the accent. The old ramp was green at
     140deg while the accent is green at 142deg, so the chrome and the accent
     were the same colour and the screen was one olive wash. */
  --canvas:#0e1014;
  --canvas-2:#15181d;
  --surface:#1b1f25;
  --ink:#f3f5f8;
  --text:#e5e8ed;
  --text2:#a3aab6;
  --text3:#8a919d;
  --hair:rgba(243,245,248,.12);
  --hair2:rgba(243,245,248,.22);
  --accent:#35d07f;        /* Kenya green — the only green on the screen now */
  --accent-ink:#06120a;
  --live:#ff6f5e;          /* Kenya red, off the fluorescent */
  --btn:#35d07f;
  --btn-ink:#06120a;
  --chip:#242a32;
  --chip-ink:#e5e8ed;
  --scrim:rgba(6,8,12,.64);
  --sh-hover:0 6px 27px rgba(0,0,0,.45), 0 1.8px 8px rgba(0,0,0,.3);
  --trough:rgba(243,245,248,.07);
  --hero-img:linear-gradient(140deg,#0b1a14,#10553a 46%,#35d07f);
}
:root{
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r-card:20px; --r-input:14px; --r-btn:10px; --r-pill:9999px;
  --max:1200px;
  /* motion, measured off the reference's own stylesheet */
  --ease:cubic-bezier(.22,1,.36,1);        /* easeOutQuint — their workhorse */
  --spring:cubic-bezier(.22,1.5,.36,1);    /* overshoot — their signature */
  --t-micro:.18s; --t-ui:.3s; --t-rev:.62s;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--canvas); color:var(--text);
  font:400 16px/1.5 var(--sans); letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  transition:background .45s var(--ease), color .45s var(--ease);
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
a{color:inherit}

/* ── band colours ────────────────────────────────────────────────────────
   Contrast-checked on cream, and muddy on Kenya's near-black, so the dark
   market gets its own set rather than a tint of these. */
html,
html[data-market="ca"]{--b-auto:#114e0b;--b-ping:#1b1463;--b-unsure:#b23200;--b-near:#333333;
  --b-auto-bg:#e3f0e4;--b-ping-bg:#dce4fb;--b-unsure-bg:#ffe6da;--b-near-bg:#e9e8ee}
/* The four hues are the product's semantic language and Canada paints the same
   four — these are calmed, not moved. b-near goes WARM: the old one was the
   exact colour of body copy. */
html[data-market="ke"]{--b-auto:#52d98b;--b-ping:#8fb0f0;--b-unsure:#f2a16a;--b-near:#a89f97;
  --b-auto-bg:rgba(82,217,139,.14);--b-ping-bg:rgba(143,176,240,.14);
  --b-unsure-bg:rgba(242,161,106,.14);--b-near-bg:rgba(168,159,151,.14)}

/* ── v2.2 names, kept alive as aliases ──────────────────────────────────
   saved, privacy and stats still write var(--midnight) and var(--info) in
   their own rules. Rather than rewrite every one, the old names point at the
   current system — so those pages re-tint with the market for free. */
html{--sh:var(--sh-subtle)}
html[data-market="ke"]{
  --indigo:var(--accent); --midnight:var(--ink); --info:var(--chip);
  --lavender:var(--hair2); --meadow:var(--b-auto); --ember:var(--b-unsure);
  --sh:none}

/* ── site header ────────────────────────────────────────────────────── */
header.site{padding:22px 0}
header.site .row{display:flex;align-items:center;gap:20px;position:relative}
.brand{display:flex;align-items:center;gap:10px;font:500 20px/1 var(--serif);color:var(--ink);letter-spacing:-.02em}
.brand svg{width:26px;height:26px;display:block;fill:var(--accent)}
nav.main{margin-left:auto;display:flex;align-items:center;gap:8px}
nav.main a{
  font:500 14px/1 var(--sans);color:var(--text2);text-decoration:none;
  padding:9px 12px;border-radius:var(--r-btn)
}
nav.main a:hover{color:var(--ink)}

/* The market switch, in their Talent/Employers shape: dead centre of the
   header, a translucent trough, and the active half a solid light pill with the
   one soft shadow. Theirs is 12px radius, not a full pill. */
.mkt{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;background:var(--trough);border-radius:14px;padding:4px;gap:2px;
  backdrop-filter:blur(8px);border:1px solid var(--hair)
}
.mkt button{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font:500 14px/1 var(--sans);color:var(--text2);padding:10px 20px;border-radius:11px;
  display:flex;align-items:center;gap:8px;transition:all .3s var(--ease)
}
.mkt button[aria-pressed="true"]{
  background:var(--surface);color:var(--ink);box-shadow:var(--sh-hover)
}
@media(max-width:860px){
  .mkt{position:static;transform:none;margin-left:auto}
  .mkt button{padding:9px 13px}
}
.mkt .flag{width:16px;height:11px;border-radius:2px;display:block}

/* ── footer ────────────────────────────────────────── */
footer.site{padding:70px 0 40px;border-top:1px solid var(--hair);margin-top:70px}
/* Five fixed columns, and only index.html has five groups. Every other page
   has four, so the four were laid out in tracks sized for five and the fifth
   sat empty — which is why the privacy footer squashed "Browse today's sweep"
   over three lines while the home page's looked fine. Flex instead: the brand
   keeps its width, the link groups share what is left however many there are,
   and the wrap replaces the two column-count media queries below. */
.fgrid{display:flex;flex-wrap:wrap;gap:28px 40px}
.fgrid>*{flex:1 1 140px;min-width:0}
.fgrid>:first-child{flex:2 1 240px}
.fgrid h4{font:600 11.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin:0 0 16px}
.fgrid a{display:block;font:400 14.5px/1 var(--sans);color:var(--text2);text-decoration:none;margin:0 0 12px}
.fgrid a:hover{color:var(--ink)}
.fbrand{font:400 26px/1 var(--serif);color:var(--ink);letter-spacing:-.02em;margin:0 0 10px}
.fbrand a{color:inherit;text-decoration:none}
.fbrand a:hover{text-decoration:underline;text-underline-offset:4px}
.fnote{font:400 13.5px/1.6 var(--sans);color:var(--text3);max-width:270px;margin:0}
.sources{margin-top:44px;padding-top:26px;border-top:1px solid var(--hair);
         font:400 13px/1.7 var(--sans);color:var(--text3)}
.sources b{font-weight:500;color:var(--text2)}

/* ── components every page shares ────────────────────────────────────────
   Copied out of index.html so a saved score, an application and the demo
   all draw the same rose and the same band pill. */
.rose{width:64px;height:64px;flex:0 0 auto;display:block}
.rose .fitnum{font:500 30px/1 var(--serif);text-anchor:middle}
.route{font:500 10px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:5px 9px;display:inline-block;white-space:nowrap}
.verdict{font:500 13px/1.35 var(--sans);color:var(--text2)}
.age{color:var(--text3);font:400 13px/1 var(--sans)}
.age.new{color:var(--b-unsure);font-weight:500}  /* not --live: that is a FILL colour and reads 2.48:1 as text on cream */
.btn,.btn2{display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;
  font:500 14.5px/1 var(--sans);padding:13px 22px;border-radius:var(--r-btn);cursor:pointer;
  border:1px solid transparent;transition:all var(--t-micro) var(--ease)}
.btn{background:var(--ink);color:var(--canvas)}
.btn:hover{background:var(--accent);color:var(--accent-ink)}
.btn2{border-color:var(--hair2);color:var(--text);background:transparent}
.btn2:hover{border-color:var(--accent);color:var(--accent)}
.btn[disabled],.btn2[disabled]{opacity:.5;cursor:default;pointer-events:none}
/* a class that sets display beats the hidden attribute, and Copy/Download
   were showing on a step that had not run yet */
[hidden]{display:none !important}
.panel{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);padding:26px 28px}
.eyebrow{font:500 12px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--text3);margin:0 0 10px}
h1.display,h2.sec{text-wrap:balance}
@media(max-width:620px){
  .panel{padding:20px 18px}
}

/* ── the mark, as the ground every page stands on ───────────────────────
   The hero's glow, kept behind the content on every page rather than only the
   landing. It is a mask, not markup: the accent shows through the ring, so it
   re-tints with the market and no page has to carry the SVG. Fixed, so it
   cannot add height or a sideways scrollbar. */
body::before{
  content:"";position:fixed;left:50%;top:18vh;transform:translateX(-50%);
  width:min(1400px,104vw);aspect-ratio:1;pointer-events:none;z-index:0;
  background:var(--accent);opacity:.06;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 760'%3E%3Ccircle cx='380' cy='80' r='28.4'/%3E%3Ccircle cx='592.1' cy='167.9' r='54.1'/%3E%3Ccircle cx='680' cy='380' r='79.8'/%3E%3Ccircle cx='592.1' cy='592.1' r='105.5'/%3E%3Ccircle cx='380' cy='680' r='131.2'/%3E%3Ccircle cx='167.9' cy='592.1' r='156.9'/%3E%3Ccircle cx='80' cy='380' r='182.6'/%3E%3Ccircle cx='167.9' cy='167.9' r='208.3'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 760'%3E%3Ccircle cx='380' cy='80' r='28.4'/%3E%3Ccircle cx='592.1' cy='167.9' r='54.1'/%3E%3Ccircle cx='680' cy='380' r='79.8'/%3E%3Ccircle cx='592.1' cy='592.1' r='105.5'/%3E%3Ccircle cx='380' cy='680' r='131.2'/%3E%3Ccircle cx='167.9' cy='592.1' r='156.9'/%3E%3Ccircle cx='80' cy='380' r='182.6'/%3E%3Ccircle cx='167.9' cy='167.9' r='208.3'/%3E%3C/svg%3E") no-repeat center/contain;
}
html[data-market="ke"] body::before{opacity:.1}
/* content sits on top of it */
body>*{position:relative;z-index:1}