/* 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:#bf3200;    --unsure-fill:#ff6d39;   /* #cc3600 was 4.29:1 on #ffe6da */
    --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
   ══════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   THREE AXES, THREE CHANNELS — Brand Kit v2.3.

   The app carries three independent signals. Each one gets its own channel,
   and none of them borrows another's:

     market  →  the hero gradient and the active flag chip. That is the list.
     theme   →  light or dark. The reader's device, never the market's.
     band    →  hue, exclusively. Nothing else competes for it.

   Green means AUTO (fit ≥ 80) at control scale, which is the strongest thing
   the pipeline can say about a posting. So green is not available as a market
   colour there: Kenya's green exists only as a large, dark, low-chroma hero
   ground, never on a button, pill, dot or label.

   What this replaced: market DROVE theme. Canada was light, Kenya was dark,
   and a reader in Nairobi who wanted light — or one in Vancouver who wanted
   dark — could not have it. Two of the three signals were painted in one hue,
   so a Kenyan card read as a success card before anyone read the fit.

   Every ratio in a comment below was measured, not estimated.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --canvas:#f8f3eb;
  --canvas-2:#fffdf9;      /* alternating band, one step up from canvas */
  --surface:#ffffff;
  --sunken:#ece5d8;        /* segmented-control track, rails */
  --ink:#080331;           /* 17.81:1 on canvas */
  --text:var(--ink);       /* an alias: the kit measures exactly two tones */
  --text2:#5a5560;         /*  6.55:1 — replaces #83809a, which was 3.37:1 */
  --text3:var(--text2);    /* also an alias. There is no third tone: the one
                              that used to be here is the kit's named fix. */
  --hair:rgba(8,3,49,.13);
  --hair2:rgba(8,3,49,.22);
  --accent:#4865ff;
  --accent-ink:#ffffff;    /*  4.58:1 on --accent */
  --accent-quiet:#1b1463;  /* 14.33:1 on canvas — ghost and link text */
  --live:#ff6d39;          /* a FILL, never a text colour (2.48:1 on cream) */
  /* THE ACTION IS DEEP-INK, not indigo. 17.44:1 against its cream label,
     where indigo-with-white is 4.58:1 and barely passes. As aliases these
     two invert by themselves: cream on deep-ink in the dark theme. */
  --btn:var(--ink);
  --btn-ink:var(--canvas);
  --chip:#ffffff;
  --chip-ink:#080331;
  --scrim:rgba(8,3,49,.55);
  --sh-hover:0 6px 27px rgba(75,68,57,.09), 0 1.8px 8px rgba(75,68,57,.05), 0 .75px 3.4px rgba(75,68,57,.04);
  --trough:var(--sunken);
}

/* ── DARK — the reader's choice, on either market ─────────────────────
   Derived from deep-ink #080331, not from a neutral black, so it stays the
   same brand in the dark rather than becoming a generic dark theme.
   One block, not two: `data-theme` is stamped from the device by the same
   inline script that stamps the market, so there is no @media copy of this
   palette to drift out of step with it. */
:root[data-theme="dark"]{
  --canvas:#0a0524;
  --canvas-2:#100b2f;
  --surface:#16103a;       /* separates by hairline and border, not luminance */
  --sunken:#1a1240;
  --ink:#f8f3eb;           /* 17.93:1 on canvas */
  --text:var(--ink);
  --text2:#b9b3c4;         /*  9.72:1 on canvas */
  --text3:var(--text2);
  --hair:rgba(248,243,235,.13);
  --hair2:rgba(248,243,235,.24);
  /* Indigo is only 4.32:1 on this ground, so the action inverts: a lavender
     fill carrying deep-ink text. */
  --accent:#a2baff;
  --accent-ink:#0a0524;    /* 10.38:1 on --accent */
  --accent-quiet:#a2baff;  /*  9.59:1 on --surface */
  --live:#ff9b6f;
  /* --btn / --btn-ink are var(--ink) / var(--canvas) in :root, so the action
     inverts here on its own: a cream fill carrying deep-ink, 17.93:1. */
  --chip:#16103a;
  --chip-ink:#f8f3eb;
  --scrim:rgba(4,2,16,.66);
  /* A warm-brown shadow reads as dirt on a dark ground; the border carries it. */
  --sh-hover:0 0 0 1px rgba(248,243,235,.13);
  --trough:var(--sunken);
}

: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}

/* ── the fit bands: the only axis that owns hue ──────────────────────
   Four meanings, one set, both markets. Each label is measured against its
   OWN fill, which is the ground it actually lands on. */
:root{
  --b-auto:#114e0b;   --b-auto-bg:#e8f2e6;    /*  8.63:1 */
  --b-ping:#1b1463;   --b-ping-bg:#dce4fb;    /* 12.46:1 */
  --b-unsure:#bf3200; --b-unsure-bg:#fdeadf;  /*  4.91:1 */
  --b-near:#333333;   --b-near-bg:#eceaf2;    /* 11.40:1 */
}
:root[data-theme="dark"]{
  /* Forest and indigo both fail as labels on dark, so both lift. */
  --b-auto:#5fd07a;   --b-auto-bg:#1f2940;    /*  7.44:1 */
  --b-ping:#a2baff;   --b-ping-bg:#2c2a56;    /*  7.00:1 */
  --b-unsure:#ff9b6f; --b-unsure-bg:#36223e;  /*  6.99:1 */
  --b-near:#ddd7e4;   --b-near-bg:#1e1a44;    /* 10.10:1 */
}

/* ── MARKET — two places, never a third ─────────────────────────
   The hero gradient and the tint under the active flag chip. Same
   construction in both, one hue swapped. Nothing else in the app changes.
   The hero is dark in BOTH themes, so its text is always cream. */
/* The default every market inherits — the brand hero. ADDING A MARKET costs
   a name, a flag, a region rule and a source roster; it does NOT cost a
   colour. The bands already hold green, indigo, orange and pale blue: you
   can just about paint two markets around that and you cannot paint four.
   A market earns a hue when it earns its own domain and its own pitch,
   which today is Kenya and only Kenya. */
html[data-market]{
  --hero-img:
    radial-gradient(78% 62% at 104% -4%,
      rgba(72,101,255,.92) 0%, rgba(72,101,255,.45) 34%, rgba(72,101,255,0) 64%),
    linear-gradient(152deg,#241a7a 0%,#150e52 38%,#080331 86%);
  --mkt-wash:72,101,255;
}
/* html[data-market="us"], html[data-market="uk"] — nothing to write.
   If one ever earns a hue it comes off a ladder at fixed lightness and
   chroma, with the band hues excluded, so it cannot brighten into
   something that reads as a signal:
     meadow 130deg #11401a · teal 185deg #0d3a3f
     violet 275deg #2c1a4e · plum 330deg #431631
   One more thing to expect before the colour: the segmented market pill
   breaks past three. At four it has to become a menu. */
html[data-market="ke"]{
  --hero-img:
    radial-gradient(78% 62% at 104% -4%,
      rgba(45,140,50,.88) 0%, rgba(45,140,50,.42) 34%, rgba(45,140,50,0) 64%),
    linear-gradient(152deg,#11401a 0%,#0c2a12 38%,#080331 86%);
  --mkt-wash:45,140,50;
}
/* ── v2.2 names, kept alive as aliases ──────────────────────────
   saved and privacy still write var(--midnight) and var(--info) in their own
   rules. The old names point at the current system — and they now follow the
   THEME rather than the market, which is the whole point of this pass. */
:root{
  --indigo:var(--accent); --midnight:var(--ink); --info:var(--chip);
  --lavender:var(--hair2); --meadow:var(--b-auto); --ember:var(--b-unsure);
  --sh:var(--sh-subtle)}
:root[data-theme="dark"]{--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)
}
/* The active half takes the market's own hue at 10% over the surface — the
   second and last place the market is allowed to show. A tint, not a label:
   at control scale a saturated green would be claiming `auto`. */
.mkt button[aria-pressed="true"]{
  background:linear-gradient(rgba(var(--mkt-wash),.10),rgba(var(--mkt-wash),.10)),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;
}
:root[data-theme="dark"] body::before{opacity:.1}
/* content sits on top of it */
body>*{position:relative;z-index:1}