/* ATS Engine - V7 design system.
 *
 * One stylesheet for the V7 pages: the homepage map, the two audience pages,
 * and every page converted onto the same shell afterwards. Written 3 October
 * 2026 by lifting those three pages' own <style> blocks into one file, so a
 * change to the system is one edit rather than three.
 *
 * HOW A PAGE USES IT
 *   <link rel="stylesheet" href="/styles-v7.css">
 *   <body class="v7 v7-seek">   job seekers, and the default (blue)
 *   <body class="v7 v7-hire">   recruiters (green)
 * The side only moves --accent. Nothing else differs between them.
 *
 * STRUCTURE OF A V7 PAGE
 *   #top > .shell > aside.rail + .main
 *   .main > .stage   navy hero          > .inner
 *         > .board   the menu of doors  > .inner > .groups > .group
 *         > section.sec[.alt] > .inner  one per topic, each with an id
 *         > .trial   after every third section
 *         > .close   the last word
 * Section furniture: p.tag (mono kicker), h2, body copy, .facts > .fact,
 * p.plain (the honest limit), a.up (back to the menu).
 *
 * A BAND OF DOORS gets .group.n3/.n4/.n5 for its own door count: above
 * 1100px that makes every band exactly one full row. auto-fit cannot
 * promise that and left holes in the board.
 *
 * The homepage adds .branches/.branch (the two-sided board), .build/.brief
 * (the on-page teasers) and .notes (its own working notes).
 */

:root{
  --ink:#0f2139; --ink-2:#44536b; --ink-3:#6b7c96;
  --paper:#f4f7fb; --card:#ffffff; --line:#d9e2ee;
  --seek:#1d4ed8; --hire:#127a43; --flag:#c2410c;
  /* Every accented part of the system reads --accent. A page picks a side
     with one class on <body>: v7-seek (blue, job seekers and the default)
     or v7-hire (green, recruiters). Nothing else differs between them. */
  --accent:#1d4ed8;
  /* the free checkers are the only thing on the site with measured pull, so
     they get their own colour in the menu rather than the page's accent */
  --free:#ff9a5c;
  --rule:#98a8c0;
  --display:"Archivo","Segoe UI",system-ui,sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --data:"IBM Plex Mono",ui-monospace,monospace;
}
.v7,.v7 *{box-sizing:border-box}
body.v7{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:clamp(16px,1.6vw,18px);line-height:1.55;-webkit-font-smoothing:antialiased}
.v7 img{max-width:100%}

body.v7-hire{--accent:var(--hire)}
body.v7-seek{--accent:var(--seek)}

/* ---- shell and left rail ---- */
.shell{display:block}
.rail{background:#0b1a30;color:#fff;padding:clamp(12px,2vw,22px) clamp(16px,4vw,22px);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.rail-logo{display:block;flex:0 0 auto}
.rail-logo img{display:block;height:clamp(32px,3.2vw,38px);width:auto}
.rail-nav{display:none}
.rail-foot{margin-left:auto;display:flex;align-items:center;gap:14px}
.rail-trial{background:var(--accent);color:#fff;text-decoration:none;font-weight:600;
  border-radius:10px;padding:9px 14px;font-size:14px;white-space:nowrap}
.rail-signin{color:#a9c6f2;text-decoration:none;font-weight:600;font-size:14px}
.main{min-width:0}
.inner{width:100%;max-width:1320px;margin:0 auto;--gutter:clamp(16px,4vw,48px);padding-inline:var(--gutter)}

@media (min-width:1040px){
  .shell{display:grid;grid-template-columns:clamp(200px,16vw,236px) minmax(0,1fr);align-items:stretch}
  /* flex-wrap must be reset: a column flex container that may wrap and has a
     bounded height starts a second column instead of scrolling. */
  .rail{position:static;min-height:100%;
    display:flex;flex-direction:column;flex-wrap:nowrap;
    align-items:stretch;gap:0;padding:clamp(20px,2.6vw,34px) 20px 22px}
  .rail-logo{margin-bottom:0}
  .rail-logo img{height:40px}
  /* Static, not sticky: the homepage rail is the whole site index and is
     meant to be read down, so every link is on the page rather than behind
     a scrollbar inside a pinned column. The navy runs the full height of
     the page because the grid row stretches it. */
  .rail-nav{display:block;flex:0 0 auto;overflow:visible}
  /* and the trial button sits under the list, not at the foot of a
     16,000px column where nobody would ever see it. */
  .rail-foot{margin-bottom:auto}
  .rail-group{font-family:var(--data);font-size:10px;letter-spacing:.14em;color:#6d8db8;margin:18px 0 6px}
  .rail-group:first-child{margin-top:0}
  .rail-nav a{display:block;color:#cfdcef;text-decoration:none;font-size:14px;padding:4px 0}
  .rail-nav a:hover,.rail-nav a:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:3px}
  .rail-here{border-left:2px solid var(--accent);padding-left:11px}
  .rail-nav a.rail-free{color:var(--free);border-left:2px solid var(--free);
    padding-left:11px;font-weight:600}
  .rail-nav a.rail-free:hover,.rail-nav a.rail-free:focus-visible{color:#ffd3b4}
  .rail-group.free{color:var(--free)}
  .rail-foot{margin-left:0;flex-direction:column;align-items:stretch;gap:10px;
    border-top:1px solid #1d3352;padding-top:14px;margin-top:18px}
  .rail-trial{text-align:center;font-size:15px;padding:11px 14px}
  .rail-signin{text-align:center;font-size:14px}
  .inner{max-width:1400px;--gutter:clamp(20px,3vw,44px)}
}

/* ---- the navy stage ---- */
/* A column, so the bar can be pushed to the foot of the band rather than
   sitting wherever the content happens to end. Above 1040px .stage is a
   grid instead and its row stretches .inner for the same effect. */
.stage{background:#0b1a30;color:#fff;display:flex;flex-direction:column}
.v7 .hero{padding:clamp(10px,1.2vw,16px) 0 clamp(10px,1.2vw,16px);text-align:left}
.v7 .eyebrow{font-family:var(--data);font-size:clamp(10.5px,1.05vw,12.5px);letter-spacing:.13em;
  color:#7fa6dd;margin:0 0 7px}
.v7 h1{font-family:var(--display);font-weight:800;color:#fff;
  font-size:clamp(29px,4.8vw,54px);line-height:1.07;letter-spacing:-.03em;
  margin:0 0 clamp(8px,1.1vw,14px);text-wrap:balance}
h1 em{font-style:normal;color:#ff9a5c}
.lede{margin:0;color:#b9cbe6;font-size:clamp(16px,1.85vw,22px);max-width:none}
.stage-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(13px,1.5vw,19px)}
.v7 .btn{display:inline-block;text-align:center;text-decoration:none;font-weight:600;border-radius:12px;
  padding:clamp(13px,1.4vw,16px) clamp(18px,2vw,26px);font-size:clamp(15.5px,1.55vw,17px)}
.v7 .btn-accent,.v7 .btn-seek,.v7 .btn-hire{color:#fff}
.v7 .btn-accent{background:var(--accent)}
.v7 .btn-seek{background:var(--seek)}
.v7 .btn-hire{background:var(--hire)}
.v7 .btn-line{border:1px solid #2d4668;color:#cfdcef;background:transparent}
.stage-terms{margin:8px 0 0;font-family:var(--data);font-size:11.5px;letter-spacing:.07em;color:#7fa6dd}
.stage a:focus-visible{outline:2px solid #8ab4f8;outline-offset:3px}

/* ---- the door board: bands, so every row is full ---- */
.board{background:var(--paper);padding-block:clamp(20px,2.6vw,34px) clamp(22px,2.8vw,38px)}
.board-lead{font-family:var(--data);font-size:clamp(10.5px,1.05vw,12px);letter-spacing:.11em;
  color:var(--ink-3);margin:0 0 clamp(12px,1.6vw,20px)}
.groups{display:block}
.group{min-width:0;margin:0 0 clamp(20px,2.4vw,30px)}
.group:last-child{margin-bottom:0}
.group h2{font-family:var(--data);font-weight:500;font-size:10.5px;letter-spacing:.14em;
  color:var(--accent);margin:0 0 11px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.group ul{list-style:none;margin:0;padding:0 0 0 11px;border-left:2px solid var(--accent);
  display:grid;gap:10px}
.group li{position:relative;min-width:0;display:flex}
.group li::before{content:"";position:absolute;left:-11px;top:9px;width:7px;height:2px;background:var(--accent)}
.door{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit;border-radius:10px}
@media (min-width:560px){
  .group ul{padding-left:0;border-left:0;
    grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:clamp(10px,1.1vw,13px)}
  .group li::before{display:none}
  .door{background:var(--card);border:1px solid var(--line);padding:13px 15px;
    transition:border-color .12s ease, transform .12s ease}
  .door:hover,.door:focus-visible{border-color:var(--accent);transform:translateY(-1px)}
}
@media (prefers-reduced-motion:reduce){.door{transition:none}.door:hover{transform:none}}
/* White card behind each menu group (for-jobseekers / for-recruiters only,
   via .groups--cards) - 8 Oct 2026. Same treatment as the homepage board:
   each labelled band of door cards sits on its own white panel. Applied
   from 560px up, where the doors lay out as a row of cards. */
@media (min-width:560px){
  .v7 .groups--cards .group{background:var(--card); border:1px solid var(--line);
    border-radius:20px; padding:clamp(20px,2vw,30px)}
}
/* auto-fit cannot promise a band fits on one row, so above 1100px each band
   is told its own column count and every band is exactly one full row. */
@media (min-width:1100px){
  .group.n3 ul{grid-template-columns:repeat(3,1fr)}
  .group.n4 ul{grid-template-columns:repeat(4,1fr)}
  .group.n5 ul{grid-template-columns:repeat(5,1fr)}
}
.prob{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(14px,1.45vw,16.5px);line-height:1.26;color:var(--ink)}
.fix{display:block;font-size:clamp(12.5px,1.25vw,14px);line-height:1.34;color:var(--ink-3);margin-top:4px}
.go{display:block;font-family:var(--data);font-size:clamp(10.5px,1.05vw,11.5px);letter-spacing:.06em;
  margin-top:auto;padding-top:7px;color:var(--accent)}
.door:hover .prob,.door:focus-visible .prob{text-decoration:underline;text-underline-offset:3px}

/* ---- the trial strip, after every third section ---- */
.trial{background:#0b1a30;color:#fff;padding-block:clamp(18px,2.2vw,26px)}
.trial .inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px clamp(18px,2.4vw,32px)}
.trial p{margin:0;color:#b9cbe6;font-size:clamp(15px,1.5vw,17px);flex:1 1 320px}
.trial b{color:#fff}
.trial .btn{flex:0 0 auto;white-space:nowrap}
/* Homepage mid-page trial strip - 8 Oct 2026. The navy .trial band as a
   rounded card sitting inside the board's .inner, between the free tools
   and the ten detail sections. No nested .inner here, so it lays out its
   own flex row and carries its own inline padding and radius. */
.v7 .trial--home{display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:12px clamp(18px,2.4vw,32px);
  border-radius:20px; padding-inline:clamp(20px,2.4vw,32px);
  margin:clamp(16px,2vw,28px) 0}

/* ---- the anonymised "recently joined" welcome strip (JS-revealed) ---- */
.v7 .welcome[hidden]{display:none}
.v7 .welcome .inner{padding-block:clamp(16px,2vw,26px)}
.v7 .welcome-card{background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:clamp(18px,2vw,26px)}
.v7 .welcome-tag{display:flex;align-items:center;gap:9px;margin:0 0 clamp(10px,1.2vw,14px);
  font-family:var(--data);font-size:10.5px;letter-spacing:.14em;color:var(--accent)}
.v7 .welcome-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#16a34a;
  animation:welcomePulse 2.4s ease-out infinite}
@keyframes welcomePulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}
  70%{box-shadow:0 0 0 7px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.v7 .welcome-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(7px,.9vw,11px)}
.v7 .welcome-list li{display:flex;align-items:center;gap:10px;color:var(--ink-2);
  font-size:clamp(13.5px,1.08vw,15.5px);line-height:1.4;animation:welcomeIn .4s ease both}
.v7 .welcome-list li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--accent);opacity:.5}
@keyframes welcomeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.v7 .welcome-dot,.v7 .welcome-list li{animation:none}}

/* ---- the plans section as pricing cards (for-jobseekers #plans), 9 Oct 2026.
   Desktop: a row-aligned grid - a label column + three plan columns, rows
   kept level with subgrid. Mobile: the label column drops out and each plan
   becomes its own stacked card with inline labels. Same enforced numbers as
   the table it replaced. ---- */
.v7 .plans{display:grid;column-gap:clamp(10px,1.3vw,18px);row-gap:0;
  grid-template-columns:minmax(150px,1.1fr) repeat(3,minmax(0,1fr));
  grid-template-rows:auto repeat(9,auto) auto;margin:clamp(18px,2.4vw,30px) 0 0}
.v7 .pcol{grid-row:1 / -1;display:grid;grid-template-rows:subgrid;min-width:0}
.v7 .pcol--plan{background:var(--card);border:1px solid var(--line);border-radius:18px;--pa:#2563eb}
.v7 .pcol--js{--pa:#16a34a}
.v7 .pcol--pro{--pa:#7c3aed;position:relative;border-color:var(--pa);
  box-shadow:0 22px 48px -30px rgba(124,58,237,.55)}

.v7 .pcol-head{padding:clamp(16px,1.6vw,22px) clamp(14px,1.4vw,20px) clamp(12px,1.3vw,16px)}
.v7 .pcol-head--labels{display:flex;flex-direction:column;justify-content:flex-end;
  padding-left:2px;padding-right:clamp(10px,1.2vw,18px)}
.v7 .pcol-head--labels h3{font-family:var(--display);font-weight:800;
  font-size:clamp(18px,2vw,26px);line-height:1.08;letter-spacing:-.02em;
  margin:0 0 8px;color:var(--ink);text-wrap:balance}
.v7 .pcol-head--labels h3 b{color:var(--seek)}
.v7 .pcol-head--labels p{margin:0;color:var(--ink-3);font-size:clamp(12.5px,1vw,14px);line-height:1.4}
.v7 .pcol-id{display:flex;align-items:center;gap:9px}
.v7 .pcol-ava{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--pa) 14%,transparent);color:var(--pa)}
.v7 .pcol-ava svg{width:19px;height:19px}
.v7 .pcol-name{font-family:var(--display);font-weight:800;font-size:clamp(16px,1.5vw,19px);color:var(--ink)}
.v7 .pcol-tag{margin:9px 0 0;color:var(--ink-3);font-size:clamp(11.5px,.95vw,13px);line-height:1.35}
.v7 .pcol-price{margin:clamp(8px,1vw,12px) 0 0;display:flex;align-items:baseline;gap:6px}
.v7 .pcol-price b{font-family:var(--display);font-weight:800;font-size:clamp(26px,3vw,38px);
  line-height:1;color:var(--pa);letter-spacing:-.02em}
.v7 .pcol-price span{color:var(--ink-3);font-size:13px}
.v7 .pcol-blurb{margin:clamp(8px,1vw,12px) 0 0;color:var(--ink-2);
  font-size:clamp(12.5px,1vw,13.5px);line-height:1.45}
.v7 .pcol-pop{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  background:var(--pa);color:#fff;font-family:var(--data);font-size:10.5px;letter-spacing:.08em;
  font-weight:700;padding:5px 12px;border-radius:999px;white-space:nowrap;z-index:2}

.v7 .pfeat{display:flex;align-items:center;gap:10px;padding:clamp(11px,1.1vw,15px) 2px;
  border-top:1px solid var(--line)}
.v7 .pfeat-ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--line);color:var(--seek)}
.v7 .pfeat-ic svg{width:17px;height:17px}
.v7 .pfeat-tx{display:flex;flex-direction:column;min-width:0}
.v7 .pfeat-tx b{font-weight:700;font-size:clamp(13px,1.05vw,14.5px);color:var(--ink);line-height:1.2}
.v7 .pfeat-tx i{font-style:normal;color:var(--ink-3);font-size:clamp(11px,.9vw,12px);line-height:1.3;margin-top:2px}

.v7 .pval{display:flex;align-items:center;justify-content:center;gap:7px;
  padding:clamp(11px,1.1vw,15px) clamp(8px,1vw,14px);border-top:1px solid var(--line);text-align:center}
.v7 .pcol--pro .pval{border-top-color:color-mix(in srgb,var(--pa) 18%,var(--line))}
.v7 .pval-lab{display:none}
.v7 .pval-v{display:inline-flex;align-items:center;gap:6px;font-size:clamp(13px,1.08vw,15px);
  font-weight:600;color:var(--ink)}
.v7 .pv-ic{width:17px;height:17px;flex:none}
.v7 .pval--yes .pval-v{color:var(--pa)}
.v7 .pval--no .pval-v{color:var(--ink-3);font-weight:500}

.v7 .pcol-foot{padding:clamp(14px,1.5vw,20px) clamp(14px,1.4vw,20px) clamp(16px,1.6vw,22px);
  display:flex;align-items:flex-end}
.v7 .pbtn{display:block;width:100%;text-align:center;text-decoration:none;font-weight:700;
  border-radius:12px;padding:12px 16px;font-size:clamp(13.5px,1.1vw,15px);
  background:var(--pa);color:#fff;border:1.5px solid var(--pa);
  transition:filter .12s ease,transform .12s ease}
.v7 .pcol--free .pbtn{background:transparent;color:var(--pa)}
.v7 .pbtn:hover,.v7 .pbtn:focus-visible{filter:brightness(1.07);transform:translateY(-1px)}
.v7 .pcol--free .pbtn:hover{background:color-mix(in srgb,var(--pa) 8%,transparent)}
@media (prefers-reduced-motion:reduce){.v7 .pbtn{transition:none}.v7 .pbtn:hover{transform:none}}

@media (max-width:760px){
  .v7 .plans{grid-template-columns:1fr;grid-template-rows:none;row-gap:clamp(14px,3vw,20px)}
  .v7 .pcol{grid-row:auto;display:block}
  .v7 .pcol--labels{display:none}
  .v7 .pval{justify-content:space-between;text-align:left}
  .v7 .pval-lab{display:inline;color:var(--ink-2);font-size:13.5px}
  .v7 .pcol-pop{top:-11px}
}

/* ---- the sections ---- */
.sec{background:var(--card);border-top:1px solid var(--line);
  padding-block:clamp(30px,4vw,62px);scroll-margin-top:12px}
.sec.alt{background:var(--paper)}
.tag{font-family:var(--data);font-size:10.5px;letter-spacing:.14em;color:var(--accent);margin:0 0 9px}
.sec h2{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.9vw,36px);
  line-height:1.13;letter-spacing:-.022em;margin:0 0 clamp(10px,1.3vw,16px);max-width:none;text-wrap:balance}
.sec>.inner>p{margin:0 0 14px;color:var(--ink-2);font-size:clamp(16px,1.6vw,18.5px);max-width:none}
.sec h3{font-family:var(--display);font-weight:700;font-size:clamp(16.5px,1.6vw,19px);
  margin:0 0 6px;letter-spacing:-.01em}
.facts{display:grid;gap:clamp(14px,1.8vw,22px);margin:clamp(16px,2vw,26px) 0 0}
@media (min-width:720px){.facts{grid-template-columns:1fr 1fr}}
@media (min-width:1180px){.facts.three{grid-template-columns:repeat(3,1fr)}}
.fact{min-width:0;border-top:2px solid var(--line);padding-top:12px}
.fact p{margin:0;color:var(--ink-2);font-size:clamp(14.5px,1.42vw,16px)}
.plain{margin:clamp(18px,2.2vw,28px) 0 0;border-left:3px solid var(--flag);
  padding:2px 0 2px 14px;max-width:none}
.plain b{font-family:var(--data);font-weight:500;font-size:10.5px;letter-spacing:.14em;
  color:var(--flag);display:block;margin-bottom:5px}
.plain span{display:block;color:var(--ink-2);font-size:clamp(14.5px,1.45vw,16.5px)}
.up{display:inline-block;margin-top:clamp(16px,2vw,24px);font-family:var(--data);font-size:11px;
  letter-spacing:.07em;color:var(--ink-3);text-decoration:none}
.up:hover{text-decoration:underline}

/* ---- a plain table ---- */
.tablewrap{margin-top:clamp(16px,2vw,26px);overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.v7 table{border-collapse:collapse;width:100%;min-width:560px;font-size:clamp(14px,1.4vw,15.5px)}
.v7 th,.v7 td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.v7 thead th{font-family:var(--data);font-size:10.5px;letter-spacing:.1em;color:var(--ink-3);
  background:var(--paper);white-space:nowrap}
.v7 tbody th{font-weight:600;color:var(--ink)}
.v7 td{color:var(--ink-2);font-variant-numeric:tabular-nums}
.v7 tbody tr:last-child th,.v7 tbody tr:last-child td{border-bottom:0}

/* ---- free tools ---- */
.tools{display:grid;gap:0;margin-top:clamp(14px,1.8vw,22px);border:1px solid var(--line);
  border-radius:14px;background:var(--card);padding:clamp(12px,1.6vw,20px) clamp(14px,1.8vw,22px)}
@media (min-width:720px){.tools{grid-template-columns:1fr 1fr;gap:0 clamp(18px,2.4vw,32px)}}
.tools a{display:block;text-decoration:none;color:var(--ink);font-weight:600;
  font-size:clamp(15px,1.45vw,16.5px);padding:9px 0;border-bottom:1px solid var(--line)}
.tools a span{display:block;font-weight:400;color:var(--ink-3);font-size:clamp(13.5px,1.3vw,14.5px)}
.tools a:last-child{border-bottom:0}
@media (min-width:720px){.tools a:nth-last-child(2){border-bottom:0}}
.tools a:hover,.tools a:focus-visible{text-decoration:underline;text-underline-offset:3px}

/* ---- close ---- */
.close{background:#0b1a30;color:#fff;padding-block:clamp(32px,4vw,60px)}
.close h2{font-family:var(--display);font-weight:800;color:#fff;max-width:none;
  font-size:clamp(23px,3vw,38px);line-height:1.1;letter-spacing:-.025em;margin:0 0 14px;text-wrap:balance}
.close p{color:#b9cbe6;max-width:none;margin:0 0 20px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- homepage-only components (the two-sided board, the
   on-page briefs, and the homepage's own working notes) ---------- */
.wrap{width:100%;max-width:1320px;margin:0 auto;padding-inline:clamp(16px,4vw,48px);padding-block:0}
.proto{position:relative;background:var(--card)}
.v7 .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:clamp(11px,1.6vw,18px) clamp(16px,3vw,28px);background:#0d1b30}
.v7 .bar img{display:block;height:clamp(34px,3.4vw,44px);width:auto}
.v7 .bar a{color:#cfe0ff;text-decoration:none;font-size:clamp(14px,1.4vw,16px);font-weight:600;white-space:nowrap}
.branches{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2.4vw,32px);
  padding:0 clamp(16px,3vw,28px)}
.branch{min-width:0}
.branch h2{font-family:var(--display);font-weight:800;font-size:clamp(14px,1.9vw,22px);
  margin:0 0 clamp(9px,1.2vw,16px);letter-spacing:.01em}
.seek h2{color:var(--seek)}
.hire h2{color:var(--hire)}
.branch ul{list-style:none;margin:0;padding:0 0 0 11px;border-left:2px solid var(--line);
  display:grid;gap:clamp(11px,1.4vw,16px)}
.seek ul{border-left-color:var(--seek)}
.hire ul{border-left-color:var(--hire)}
.branch li{position:relative;min-width:0}
.branch li::before{content:"";position:absolute;left:-11px;top:9px;width:7px;height:2px;background:var(--line)}
.seek li::before{background:var(--seek)}
.hire li::before{background:var(--hire)}
@media (min-width:760px){
  .branch ul{padding-left:0;border-left:0;gap:12px}
  .branch li::before{display:none}
  .seek .door:hover,.seek .door:focus-visible{border-color:var(--seek);transform:translateY(-1px)}
  .hire .door:hover,.hire .door:focus-visible{border-color:var(--hire);transform:translateY(-1px)}
}
.seek .go{color:var(--seek)}
.hire .go{color:var(--hire)}
.acts{padding:clamp(20px,3vw,40px) clamp(16px,3vw,28px) 8px;display:grid;gap:10px;
  max-width:640px;margin-inline:auto}
@media (min-width:560px){
  .acts{grid-template-columns:1fr 1fr}
  .acts .reassure{grid-column:1/-1}
}
.reassure{margin:2px 0 0;font-size:clamp(13.5px,1.35vw,15px);color:var(--ink-3);text-align:center}
.tools p{margin:0 0 9px;font-family:var(--data);font-size:clamp(10.5px,1.05vw,12px);letter-spacing:.12em;color:var(--ink-3)}
.tools .grid{display:grid;gap:0}
@media (min-width:640px){
  .tools .grid{grid-template-columns:1fr 1fr;gap:0 clamp(18px,2.4vw,32px)}
}
@media (min-width:1000px){
  .tools .grid{grid-template-columns:repeat(4,1fr)}
}
.notes{padding-block:clamp(32px,4vw,56px) clamp(56px,6vw,80px)}
.notes>p,.notes h2{max-width:72ch}
.qs{display:grid;gap:0}
@media (min-width:900px){
  .qs{grid-template-columns:1fr 1fr;gap:0 clamp(28px,3.2vw,56px)}
  .qs .q:nth-child(-n+2){border-top:1px solid var(--line)}
}
.devbar{font-family:var(--data);font-size:10.5px;letter-spacing:.12em;color:var(--flag);
  border:1px dashed var(--flag);border-radius:6px;padding:6px 9px;display:inline-block;margin:0 0 16px}
.notes h2{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.4vw,28px);margin:0 0 6px;letter-spacing:-.015em}
.notes>p{color:var(--ink-2)}
.q{border-top:1px solid var(--line);padding-block:14px}
.q h3{font-family:var(--data);font-size:11px;letter-spacing:.13em;color:var(--seek);margin:0 0 5px;text-transform:uppercase}
.q p{margin:0}
.v7 .kicker{font-family:var(--data);font-size:11px;letter-spacing:.13em;color:var(--ink-3);margin:0 0 8px}
.v7 code{font-family:var(--data);font-size:.92em}
.stage .v7 .bar{padding:clamp(11px,1.4vw,18px) 0;background:none}
.stage .v7 .bar a{color:#a9c6f2}
.proto .hero .eyebrow{color:#7fa6dd}
.proto .stage h1{color:#fff;font-size:clamp(30px,5.2vw,58px);line-height:1.06;letter-spacing:-.03em;
  margin:0 0 clamp(12px,1.6vw,20px)}
.proto .stage h1 em{color:#ff9a5c}
.proto .stage .lede{color:#b9cbe6;font-size:clamp(16px,1.9vw,23px);max-width:66ch}
@media (min-width:860px){
.proto .stage .lede{margin-inline:auto}
}
svg.fork{color:#6d8db8}
.proto .stage .fork text{fill:#dbe7f7}
.board .branches{padding:0}
@media (min-width:860px){
  .branches{gap:clamp(20px,2.6vw,40px)}
  .branch{background:var(--card);border:1px solid var(--line);border-radius:16px;
    padding:clamp(16px,1.8vw,26px);display:flex;flex-direction:column}
  .branch h2{margin-bottom:clamp(12px,1.4vw,18px)}
  .branch h2 span{display:inline-block;border-radius:999px;padding:7px 15px;color:#fff;
    font-size:clamp(14px,1.5vw,18px)}
  .seek h2 span{background:var(--seek)}
  .hire h2 span{background:var(--hire)}
  .branch ul{flex:1}
}
@media (max-width:859px){
  .branch h2 span{display:inline}
}
.acts{padding-top:clamp(18px,2.4vw,34px)}
@media (min-width:1040px){
  .rail-side{font-family:var(--display);font-weight:700;font-size:15.5px!important;
    border-left:3px solid transparent;padding-left:9px!important;margin-left:-12px}
  .rail-side.seek{border-left-color:var(--seek)}
  .rail-side.hire{border-left-color:var(--hire)}
  .wrap{max-width:1400px;padding-inline:clamp(20px,3vw,44px)}
.proto .stage .hero{padding-top:clamp(28px,3vw,44px)}
}
.build-lead{font-family:var(--data);font-size:clamp(10.5px,1.05vw,12px);letter-spacing:.11em;
  color:var(--ink-3);margin:0 0 clamp(6px,1vw,10px)}
.brief{scroll-margin-top:14px;padding:clamp(18px,2.2vw,26px) 0;border-top:1px solid var(--line)}
@media (min-width:900px){
  .build{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,3.2vw,56px)}
  .build-lead{grid-column:1/-1}
}
.build-col{min-width:0}
.build-col>.brief:first-child{border-top:1px solid var(--line)}
.brief .tag{font-family:var(--data);font-size:10px;letter-spacing:.13em;margin:0 0 7px}
.seekblk .tag{color:var(--seek)}
.hireblk .tag{color:var(--hire)}
.brief h3{font-family:var(--display);font-weight:800;font-size:clamp(18px,1.9vw,23px);
  line-height:1.2;margin:0 0 9px;letter-spacing:-.015em;text-wrap:balance}
.brief>p{margin:0 0 12px;color:var(--ink-2);font-size:clamp(15.5px,1.5vw,17px);max-width:60ch}
.brief .more{margin:0}
.brief .more a{font-weight:600;font-size:clamp(15px,1.45vw,16.5px);text-decoration:none;border-bottom:2px solid}
.seekblk .more a{color:var(--seek)}
.hireblk .more a{color:var(--hire)}
.brief .up{display:inline-block;margin-top:9px;font-family:var(--data);font-size:11px;
  letter-spacing:.07em;color:var(--ink-3);text-decoration:none}
.brief .up:hover{text-decoration:underline}

/* Collisions with the shared components above, scoped rather than fought:
   the homepage's tools box sits on paper inside the board, its two audience
   buttons are full-width rows, and its fork diagram is the only <svg> in
   the system, so it is scoped rather than styling every svg on every page. */
.board .tools{margin:clamp(18px,2.4vw,30px) 0 clamp(26px,3.4vw,44px);background:var(--paper)}
.acts .btn{display:block;width:100%}
.stage figure{margin:clamp(6px,0.8vw,10px) auto 0;max-width:clamp(250px,26vw,340px);
  padding-inline:0;padding-bottom:clamp(2px,0.4vw,6px)}
.stage figure svg{display:block;width:100%;height:auto;color:#6d8db8}
.stage figcaption{display:none}


/* ---------- the stage sits over the rail, its content does not ----------
 * The navy band spans the full width, but everything inside it lines up with
 * the main content window: the stage is padded by exactly the rail's width, so
 * its .inner is the same box as the .inner inside .main - same centring, same
 * cap, same gutters - and the logo, the headline and the first card below all
 * share one left edge and one right edge.
 */
@media (min-width:1040px){
  /* The stage is two columns: a brand column exactly the rail's width, so the
     logo is genuinely top left of the page and the mascot sits under it in the
     navy beside the headline, and then the hero in a box identical to the
     content window below - same centring, same cap, same gutters. */
  .v7 .stage{display:grid;grid-template-columns:clamp(200px,16vw,236px) minmax(0,1fr);
    align-items:stretch}
}
/* The brand column: logo, then the mascot under it. Below the rail's own
   breakpoint there is no column to sit in, so it becomes the first row of the
   stage and the mascot steps aside - a 220px robot is not what a phone needs
   above the headline. */
.v7 .stage-brand{padding:clamp(12px,1.6vw,18px) clamp(16px,4vw,48px) 0}
.v7 .stage-brand .rail-logo{display:block;margin:0}
.v7 .stage-brand .rail-logo img{height:clamp(34px,3.4vw,52px);width:auto;display:block}
.v7 .stage-bot{display:none}
@media (min-width:1040px){
  /* the brand column runs the full height of the band, so the assistant can be
     dropped into its bottom corner: its bottom-right corner is the band's own
     corner, which is where the content window's top-left corner begins. The
     two corners meet rather than nearly meeting. */
  .v7 .stage-brand{padding:clamp(10px,1.2vw,16px) 0 0;
    display:flex;flex-direction:column;min-height:0}
  /* the logo keeps the menu's own left inset; the assistant does not - it runs
     from the page's left edge to the column's right edge, which is where the
     content window begins, so it fills the corner the two of them make. */
  .v7 .stage-brand .rail-logo{margin:0 0 clamp(14px,1.8vw,22px) 20px}
  /* As small as it can be while still meeting the content window's corner.
     Its WIDTH is not free - the join is the column's right edge, so anything
     narrower leaves a gap exactly where the two corners are meant to meet.
     Its height is free, so it is a short band rather than a square, cropped
     to the head and the raised hand. */
  /* It FILLS what is left of the column rather than holding a 4/3 box at the
     bottom of it. With the band on a floor a short page no longer fills the
     stage, and a fixed ratio pushed down by margin-top:auto left a slab of
     empty navy between the logo and the assistant - the band was visibly
     taller than the two things in that column. Growing instead means the
     column's content IS the band's height, whatever the band is, and the
     crop below keeps the head and the raised hand in frame as it changes
     shape. */
  .v7 .stage-bot{display:block;flex:1 1 auto;max-width:100%;
    min-height:clamp(140px,12vw,172px);
    border-radius:0 14px 0 0;overflow:hidden}
  .v7 .stage-bot img{display:block;width:100%;height:100%;object-fit:cover;
    object-position:50% 16%}
}

/* ---------- the ask, moved off the navy ----------
 * The buttons and the no-card line used to sit in the band beside the
 * assistant. They are the first thing in the white content area now, which
 * shortens the navy and puts the ask on the same ground as the menu it sits
 * above. On white they need the other half of the button palette: the outline
 * button's border and label come from the page tokens rather than the band's.
 */
.v7 .acts-strip{padding-bottom:clamp(14px,1.8vw,22px)}
/* centred across the content window - the ask is the one thing on the page
   that is not reading matter, so it does not take the left edge everything
   else is aligned to. */
.v7 .acts-strip .stage-acts{margin-top:0;justify-content:center}
/* the three terms spread across the full width of the line rather than
   huddling in the middle: left, centre and right, with the separators gone
   because the spacing is doing their job. Below the point where they stop
   fitting on one line they fall back to a centred wrap. */
/* One continuous line, centred under the buttons. The type is fluid so it
   holds a single line a long way down before it is allowed to wrap. */
.v7 .acts-strip .stage-terms{text-align:center;
  font-size:clamp(9.5px,0.92vw,11.5px);letter-spacing:clamp(.02em,.05vw,.07em)}
.v7 .acts-strip .btn-line{border-color:var(--line);color:var(--ink);background:var(--card)}
.v7 .acts-strip .btn-line:hover{border-color:var(--accent)}
.v7 .acts-strip .stage-terms{color:var(--ink-3)}

/* ---------- the stage's top bar ----------
 * The stage spans the full width above the shell and carries the logo, so the
 * rail below it begins with the menu and lines up with the content window.
 */
.v7 .stage .bar{background:none;padding:clamp(12px,1.6vw,18px) 0 clamp(8px,1vw,12px);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.v7 .stage .bar .rail-logo{margin:0}
.v7 .stage .bar .rail-logo img{height:clamp(34px,3.4vw,44px);width:auto;display:block}
.v7 .stage .bar .rail-signin{color:#a9c6f2;text-decoration:none;font-weight:600;
  font-size:14px;white-space:nowrap;text-align:right}
/* with the logo out of it, the bar is just the sign-in, hard right - and its
   top padding matches the brand column's so sign-in sits on the logo's line */
.v7 .stage .bar{justify-content:flex-end}
@media (min-width:1040px){
  /* The bar is lifted out of the flow so it cannot push the headline down the
     page: sign-in, the logo and the first line of the hero all sit on one line,
     and the white content area starts as soon as the hero is finished rather
     than a bar's height later.
     Anchored to .inner, not to the stage: .inner is the centred, capped box,
     so its own right padding is exactly the content window's right edge. */
  .v7 .stage > .inner{position:relative}
  /* Sign-in drops to the foot of the band, hard right, so it sits on the
     menu's own row rather than up in the top corner on its own. Still
     absolute - anchored to .inner, the centred capped box, so its right edge
     is the content window's right edge - but pinned to the bottom now, not
     the top. The bottom offset is the menu row's own vertical centre:
     .inner's padding-bottom plus a menu link's 7px padding plus half a line,
     so the two words sit on one line. */
  .v7 .stage .bar{position:absolute;top:auto;
    bottom:calc(clamp(12px,1.4vw,18px) + 5px);
    right:clamp(20px,3vw,44px);padding:0;width:auto}
  .v7 .stage .hero{padding-top:clamp(10px,1.2vw,16px)}
}


/* ---------- V6 COMPATIBILITY, for a page part-way through -----------------
 * A converted page keeps styles-v6.css for its inner components and gains
 * the V7 shell on top. These rules make v6's three structural classes read
 * as V7 furniture, so the page's own markup does not have to be rewritten
 * to get V7 rhythm, width and colour. They apply only under body.v7.
 */
.v7 .container{width:100%;max-width:1400px;margin:0 auto;
  padding-inline:clamp(20px,3vw,44px)}
.v7 .section{border-top:1px solid var(--line);
  padding-block:clamp(30px,4vw,62px)}
/* Only paint a section that does not paint itself. .dark and .jsv-sec are
   v6 classes at specificity 0,1,0; this rule is 0,2,0 and loads second, so
   without the :not() chain it silently flattened them to white and left
   their light text unreadable on it. */
.v7 .section:not(.dark):not(.alt):not(.jsv-sec){background:var(--card)}
.v7 .section.alt{background:var(--paper)}
.v7 .anchor{scroll-margin-top:14px}
.v7 .anchor > .up{display:inline-block;margin:0 0 clamp(18px,2.4vw,30px)
  clamp(20px,3vw,44px)}
.v7 .section h2{font-family:var(--display);font-weight:800;
  font-size:clamp(22px,2.9vw,36px);line-height:1.13;letter-spacing:-.022em;
  margin:0 0 clamp(10px,1.3vw,16px);max-width:none;text-wrap:balance}
.v7 .section h3{font-family:var(--display);font-weight:700;
  font-size:clamp(16.5px,1.6vw,19px);letter-spacing:-.01em}
.v7 .section .lead{color:var(--ink-2);font-size:clamp(16px,1.6vw,18.5px);max-width:none}
.v7 .section>.container>p{max-width:none}

/* v6 caps the hero and everything in it at a 690px measure. V7 text runs
   the full width of the column, so the cap is lifted on the stage too. */
.v7 .hero,.v7 .hero>*{max-width:none}

/* v6 gives .eyebrow a pill; in V7 it is a plain mono kicker. */
.v7 .eyebrow{background:none;border:0;padding:0;border-radius:0;display:block}
/* And v6 paints .hero with a radial gradient, which the V7 stage has no use
   for - the band paints itself. On a converted page the two stacked, so the
   gradient drew a lighter panel inside the navy that stopped at the content
   width and read as a box sitting on the header. 24 of the 27 pages had it;
   the three hand-built ones (the homepage and the two audience pages) never
   did, because they are the only pages that do not load styles-v6.css at
   all. That is the whole difference between the two headers. */
.v7 .stage .hero{background:none}

/* a v6 hero figure dropped into a V7 section must not set its own width */
.v7 .sec figure,.v7 .sec figure picture,.v7 .sec figure img{max-width:100%}
.v7 .sec .split-hero-shot{margin:0 auto;max-width:900px}

/* ==========================================================================
   OFFICIAL SITE FOOTER
   One block, byte-identical in styles-v6.css and styles-v7.css, so every
   page carries the same company detail however the page itself is styled.
   Self-contained on purpose: it declares its own colours rather than reading
   either system's tokens, because v6 and v7 do not agree on them.

   The company detail in the markup is taken from the legal pages, which are
   the source of truth for it: privacy.html, terms.html, cookies.html,
   dpa.html and data-deletion.html. If it changes there, change it here.
   ========================================================================== */
.site-footer{
  --sf-bg:#0d1b2e; --sf-ink:#e8eef8; --sf-dim:#93a4bd;
  --sf-link:#cddaed; --sf-line:rgba(255,255,255,.10); --sf-free:#ff9a5c;
  background:var(--sf-bg); color:var(--sf-dim);
  border-top:1px solid var(--sf-line);
  font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.6; text-align:left;
}
.site-footer *{box-sizing:border-box}
.site-footer .sf-in{width:100%;max-width:1400px;margin:0 auto;
  padding:clamp(34px,4vw,56px) clamp(20px,3vw,44px) clamp(26px,3vw,38px)}
.site-footer .sf-grid{display:grid;gap:clamp(22px,2.6vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));align-items:start}
@media (min-width:1100px){.site-footer .sf-grid{grid-template-columns:1.7fr repeat(5,1fr)}}
.site-footer .sf-brand a{display:inline-block}
.site-footer .sf-brand img{display:block;width:auto;height:34px;margin:0 0 14px}
.site-footer .sf-tag{margin:0 0 8px;color:var(--sf-ink);font-weight:600}
.site-footer .sf-note{margin:0;max-width:32ch;font-size:13px}
.site-footer .sf-col h2{margin:0 0 12px;font-size:11px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--sf-ink);border:0;padding:0}
.site-footer .sf-col a{display:block;margin:0 0 7px;color:var(--sf-link);text-decoration:none}
.site-footer .sf-col a:hover,.site-footer .sf-col a:focus-visible{color:#fff;text-decoration:underline}
.site-footer .sf-free h2,.site-footer .sf-free a{color:var(--sf-free)}
.site-footer .sf-free a:hover,.site-footer .sf-free a:focus-visible{color:#ffd3b4}
.site-footer .sf-contact{display:flex;flex-wrap:wrap;gap:10px clamp(20px,3vw,44px);
  margin-top:clamp(28px,3vw,40px);padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--sf-line)}
.site-footer .sf-contact b{display:block;font-size:11px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--sf-dim)}
.site-footer .sf-contact a{color:var(--sf-ink);text-decoration:none}
.site-footer .sf-contact a:hover,.site-footer .sf-contact a:focus-visible{text-decoration:underline}
.site-footer .sf-legal{margin-top:clamp(18px,2vw,24px);padding-top:clamp(16px,2vw,22px);
  border-top:1px solid var(--sf-line);font-size:12.5px}
.site-footer .sf-legal p{margin:0 0 7px;max-width:98ch;color:var(--sf-dim)}
.site-footer .sf-legal a{color:var(--sf-link)}
.site-footer .sf-copy{margin-top:12px}

/* A v6 tile that sizes its photo column in pixels and clips the rest
   (.sector-tile:has(.sector-photo) is overflow:hidden) assumed the full
   V6 content width. In the V7 shell that column is narrower by the width
   of the rail, so the picture inside overran its own tile and the photo
   cropped harder than it was drawn to. Let it shrink instead. */
/* The pattern is always the same: .X-art{display:flex} holding a
   <picture>, with img{width:100%}. The picture's flex basis is its
   content size, so it never shrinks below the image's intrinsic width
   and overruns a column narrower than that - .sector-photo on the UK
   page, .fed-card-art on the US one. Capping the picture fixes both and
   anything else built the same way. */
.v7 .main picture{min-width:0;max-width:100%}
.v7 .sector-photo,.v7 .fed-card-art{min-width:0}
.v7 .main img{max-width:100%}

/* v6's card grids are fixed at three columns and only drop to two or one
   at VIEWPORT breakpoints, which assumed the content ran the full width of
   the window. In the V7 shell the column is narrower than the viewport by
   the width of the rail, so at around 1100px three cards no longer fitted
   and the page scrolled sideways. Sizing on the track rather than the
   window makes the count follow the column instead. */
.v7 .main .cards,
.v7 .main .three,
.v7 .main .four,
.v7 .main .screen-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}

/* A table with real columns cannot reflow to a phone. v6 already wraps
   its tables in .tablewrap, which scrolls, so this is only for a table
   on a converted page that has no wrapper of its own - without it such a
   table is clipped by the column with no way to reach the rest of it.
   Scoped so it never fights a .tablewrap that is already doing the job. */
@media (max-width:760px){
  /* min-width beats max-width in CSS, so a table carrying one stayed at
     its own width and the page scrolled sideways anyway - cookies-v7.
     The min-width has to be cleared for the block to shrink. */
  .v7 .main :not(.tablewrap) > table{display:block;min-width:0;max-width:100%;
    overflow-x:auto}
}

/* V7 styles h1 for the one in the navy stage band. A converted page that
   keeps a second h1 further down - the checker heroes do - was getting
   white type on their light gradient. Anything in the content column
   takes the page ink instead. */
.v7 .main h1{color:var(--ink)}

/* ==========================================================================
   HOMEPAGE DOOR CARDS - 4 October 2026
   The illustrated cards from Dennis's mockups. Every word on a card is page
   text; the artwork is inline SVG drawn from the card's own tokens, so it
   recolours with the card and costs no extra request. The mockups' job-board
   wordmarks and photographic faces are deliberately not reproduced - the
   first are other companies' trademarks, the second would put real-looking
   people on the site.
   ========================================================================== */
.v7 .branch .door{
  --k-ink:var(--accent); --k-deep:var(--k-ink);
  --k-tint:#eef4ff; --k-line:#dbe6f6; --k-soft:#e6eefc;
  --k-paper:#fff; --k-bar:#e3e9f2; --k-ok:#16a34a; --k-no:#e11d48;
  --k-warn:#f59e0b; --k-s1:#2563eb; --k-s2:#7c3aed; --k-s3:#f59e0b;
  display:grid; gap:clamp(6px,.7vw,10px) clamp(12px,1.5vw,22px);
  grid-template-columns:minmax(0,1fr) clamp(150px,38%,236px);
  grid-template-areas:"pill art" "prob art" "fix art" "go art";
  align-content:start;
  background:var(--k-tint); border:1px solid var(--k-line); border-radius:16px;
  padding:clamp(14px,1.6vw,20px); color:var(--ink);
}
.v7 .branch .door:hover,.v7 .branch .door:focus-visible{
  border-color:var(--k-ink); transform:translateY(-2px);
  box-shadow:0 10px 26px -18px rgba(15,33,57,.5)}
@media (prefers-reduced-motion:reduce){
  .v7 .branch .door:hover{transform:none}}

.v7 .branch .door .d-pill{grid-area:pill; justify-self:start;
  display:inline-flex; align-items:center; gap:7px;
  background:var(--k-paper); border-radius:999px; padding:5px 12px 5px 8px;
  color:var(--k-deep); font-family:var(--body); font-weight:700;
  font-size:clamp(9.5px,.78vw,11px); letter-spacing:.1em}
.v7 .branch .door .d-pill svg{width:15px; height:15px; flex:none}

.v7 .branch .door .prob{grid-area:prob; font-family:var(--display);
  font-weight:800; line-height:1.12; letter-spacing:-.02em;
  font-size:clamp(16px,1.75vw,25px); color:var(--ink); text-wrap:balance}
.v7 .branch .door .prob b{color:var(--k-ink); font-weight:800}
.v7 .branch .door:hover .prob,.v7 .branch .door:focus-visible .prob{
  text-decoration:none}

.v7 .branch .door .fix{grid-area:fix; color:var(--ink-2);
  font-size:clamp(13px,1.03vw,14.5px); line-height:1.5; margin-top:2px}

.v7 .branch .door .go{grid-area:go; align-self:end; margin-top:6px;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); letter-spacing:0; text-transform:none;
  color:var(--k-deep); font-weight:700; font-size:clamp(12.5px,1vw,14px)}
.v7 .branch .door .go i{font-style:normal; flex:none;
  width:26px; height:26px; border-radius:50%; background:var(--k-ink);
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1}
.v7 .branch .door:hover .go,.v7 .branch .door:focus-visible .go{
  text-decoration:underline; text-underline-offset:3px}

.v7 .branch .door .d-art{grid-area:art; align-self:center; min-width:0}
.v7 .branch .door .d-art svg{display:block; width:100%; height:auto}
.v7 .branch .door .d-art .t{font-family:var(--body); font-size:9px;
  fill:var(--ink-2)}
.v7 .branch .door .d-art .t-h{font-size:9.5px; font-weight:700; fill:var(--ink)}
.v7 .branch .door .d-art .t-s{font-size:8px; fill:var(--ink-3)}
.v7 .branch .door .d-art .t-m{fill:var(--ink-3)}
.v7 .branch .door .d-art .t-on{fill:#fff; font-weight:700}
.v7 .branch .door .d-art .t-c{text-anchor:middle}
.v7 .branch .door .d-art .t-k{font-size:8.5px; font-weight:700}

/* One hue per job-seeker card, as drawn. The hiring side stays on the one
   green, which is how the recruiter mockup has it. */
.v7 .door[data-k="match"] {--k-ink:#e11d48;--k-deep:#be123c;--k-tint:#fef3f5;--k-line:#f6dbe1;--k-soft:#fce7eb}
.v7 .door[data-k="cv"]    {--k-ink:#2563eb;--k-tint:#eff5ff;--k-line:#d9e5fb;--k-soft:#e4edfd}
.v7 .door[data-k="track"] {--k-ink:#ea580c;--k-deep:#c2410c;--k-tint:#fff7ed;--k-line:#f6e2cc;--k-soft:#fdeedd}
.v7 .door[data-k="prep"]  {--k-ink:#7c3aed;--k-tint:#f6f3ff;--k-line:#e3dbfb;--k-soft:#ece5fd}
.v7 .door[data-k="search"]{--k-ink:#16a34a;--k-deep:#15803d;--k-tint:#f0fdf4;--k-line:#d6ecdd;--k-soft:#e3f5e9}
/* The hiring side carries its own hues too, taken from the first two
   mockups: green for the pool, purple for the shortlist, teal for the
   documents, blue for the duplicate, and the brand green for the desk.
   Three greens would have read as one card repeated, so the compliance
   card takes the teal end of the same family rather than a third green. */
.v7 .hire .door           {--k-ink:var(--hire);--k-tint:#f1f8f4;--k-line:#d6e8dd;--k-soft:#e3f1e9}
.v7 .door[data-k="pool"]  {--k-ink:#16a34a;--k-deep:#15803d;--k-tint:#f0fdf4;--k-line:#d6ecdd;--k-soft:#e3f5e9}
.v7 .door[data-k="short"] {--k-ink:#7c3aed;--k-tint:#f6f3ff;--k-line:#e3dbfb;--k-soft:#ece5fd}
.v7 .door[data-k="docs"]  {--k-ink:#0f766e;--k-tint:#f0fbf9;--k-line:#cfe8e4;--k-soft:#ddf1ee}
.v7 .door[data-k="dup"]   {--k-ink:#2563eb;--k-tint:#eff5ff;--k-line:#d9e5fb;--k-soft:#e4edfd}
.v7 .door[data-k="desk"]  {--k-ink:#127a43;--k-tint:#f1f8f4;--k-line:#d6e8dd;--k-soft:#e3f1e9}

/* Below the two-column board the art would be a thumbnail nobody can read,
   so the card becomes text only rather than a smaller picture. */
@media (max-width:860px){
  .v7 .branch .door{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"pill" "prob" "fix" "go"}
  .v7 .branch .door .d-art{display:none}
}

/* Two branches side by side stop being two columns long before a phone:
   at 390px each card was 161px wide. Stack them, and the cards get the
   whole width. */
@media (max-width:720px){
  .v7 .branches{grid-template-columns:minmax(0,1fr)}
}

/* ==========================================================================
   THE SCORING-ENGINE BAND - 4 October 2026
   Was a hairline wireframe that read as unfinished on the navy. Redrawn as
   the lit chip in Dennis's mockup: a raised panel, a bordered glyph, and
   the fork dropping to the two sides of the board below. The words are page
   text; only the fork is SVG.
   ========================================================================== */
/* ==========================================================================
   THE SCORING-ENGINE FLAG - moved out of the navy, 6 October 2026
   It was a dark chip inside the stage. On the white column it has to be a
   card like everything else around it, so the colours come from the tokens
   rather than from the band it used to sit in. The fork still points down
   into the two branches directly below it, which is the whole reason the
   drawing exists.
   ========================================================================== */
/* The standfirst sits on the pale band; the flag joins it there rather than
   dropping onto the white, so the line and the card read as one block and
   the white below belongs to the board the fork points into. */
.v7 .main figure.engine{max-width:none; margin:0;
  background:var(--paper);
  padding:clamp(16px,2vw,26px) clamp(20px,3vw,44px) clamp(18px,2.2vw,30px);
  display:flex; flex-direction:column; align-items:center; text-align:center}
.v7 .main .engine-chip{
  display:inline-flex; align-items:center; gap:clamp(12px,1.4vw,18px);
  max-width:min(100%,620px); text-align:left;
  padding:clamp(12px,1.3vw,16px) clamp(16px,1.9vw,24px);
  border-radius:16px; background:var(--card); border:1px solid var(--line);
  box-shadow:0 14px 34px -26px rgba(15,33,57,.5)}
.v7 .main .engine-ico{flex:none; width:clamp(34px,3.4vw,42px); aspect-ratio:1;
  display:grid; place-items:center; border-radius:11px;
  color:var(--accent); border:1px solid var(--line); background:var(--paper)}
.v7 .main .engine-ico svg{width:60%; height:60%}
.v7 .main .engine-txt{display:block; min-width:0}
.v7 .main .engine-txt b{display:block; font-family:var(--display);
  font-weight:800; letter-spacing:-.012em; color:var(--ink);
  font-size:clamp(15px,1.5vw,19px); line-height:1.2}
.v7 .main .engine-txt span{display:block; margin-top:3px; color:var(--ink-2);
  font-size:clamp(12.5px,1.03vw,14px); line-height:1.45}
.v7 .main .engine-fork{display:block; width:100%; height:auto;
  margin-top:-1px; color:#b7c6da}
.v7 .main .engine figcaption{position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%);
  white-space:nowrap; border:0}
/* The fork points at two columns. Below the width where the board stops
   being two columns it points at nothing, so it goes. */
@media (max-width:720px){
  .v7 .main .engine-fork{display:none}
  .v7 .main .engine-chip{margin-bottom:4px}
}

/* ==========================================================================
   THE BOARD AS FEATURE CARDS - 4 October 2026
   Dennis's large two-up mockup. The cards were built compact, to sit inside
   the two bordered panels; the mockup has no panels at all - the cards are
   the layout. So the panel chrome goes, the cards take the room it was
   using, and the artwork grows to the share it is drawn at.
   ========================================================================== */
@media (min-width:1040px){
  /* White card behind each column (looking / hiring) - restored 8 Oct 2026.
     Was stripped to none here so the doors floated on the board; Dennis
     wants each side sitting on its own white panel, as it does 860-1039px. */
  .v7 .board .branch{background:var(--card); border:1px solid var(--line);
    border-radius:20px; padding:clamp(20px,2vw,30px)}
  .v7 .board .branch h2{margin-bottom:clamp(14px,1.6vw,20px)}
}
.v7 .branch ul{gap:clamp(14px,1.7vw,24px)}
.v7 .branch .door{
  grid-template-columns:minmax(0,1fr) clamp(148px,35%,268px);
  gap:clamp(7px,.8vw,12px) clamp(12px,1.5vw,22px);
  padding:clamp(16px,1.9vw,28px);
  border-radius:20px;
  position:relative; overflow:hidden; isolation:isolate}
/* The soft bloom the mockup puts behind the artwork. Decorative only, so it
   sits under the content and takes no pointer. */
.v7 .branch .door::after{content:""; position:absolute; z-index:0;
  right:-8%; top:50%; translate:0 -50%; width:48%; aspect-ratio:1;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,var(--k-soft) 0%,transparent 70%)}
.v7 .branch .door > *{position:relative; z-index:1}
.v7 .branch .door .prob{font-size:clamp(17.5px,1.92vw,28px); line-height:1.1}
.v7 .branch .door .fix{font-size:clamp(13.5px,1.08vw,15.5px); line-height:1.55}
.v7 .branch .door .go{margin-top:clamp(8px,1vw,14px)}

/* One height for every card.
   .branches already stretches both columns to the taller of the two, and
   .branch is a flex column whose ul takes the slack. Making that ul a grid
   with equal auto rows divides the SAME total height into five equal rows
   on both sides, so all ten cards match - no magic number to maintain, and
   it re-settles itself when any card's copy changes. The cards align their
   own content to the top so the extra room falls below the link. */
@media (min-width:860px){
  .v7 .board .branches{align-items:stretch}
  .v7 .board .branch ul{display:grid; grid-auto-rows:1fr; align-content:stretch}
  .v7 .board .branch li{min-height:0; display:grid}
  /* The body row takes the slack, so the link sits on the bottom edge of
     every card rather than floating wherever its own copy ends.
     margin-top:auto cannot do this: in a grid it only moves an item inside
     its own row, and align-content:start had already packed the rows up. */
  .v7 .board .branch .door{height:100%;
    grid-template-rows:auto auto 1fr auto}
  .v7 .board .branch .door .fix{align-self:start}
}

/* ==========================================================================
   THE DETAIL SECTIONS AS CARDS - 4 October 2026
   The ten .brief blocks below the board, given the same treatment as the
   board cards. Copy untouched: they share the board's hue tokens through
   the same data-k, so there is one set of colours on the page, not two.
   ========================================================================== */
.v7 .build-col{min-width:0}
.v7 .brief{
  --k-ink:var(--accent); --k-deep:var(--k-ink);
  --k-tint:#eef4ff; --k-line:#dbe6f6; --k-soft:#e6eefc;
  --k-paper:#fff; --k-bar:#e3e9f2; --k-ok:#16a34a; --k-no:#e11d48;
  --k-warn:#f59e0b; --k-s1:#2563eb; --k-s2:#7c3aed; --k-s3:#f59e0b;
  background:var(--k-tint); border:1px solid var(--k-line);
  border-radius:20px; padding:clamp(16px,1.9vw,28px);
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; align-content:start;
  gap:clamp(7px,.8vw,12px) clamp(12px,1.5vw,22px);
  grid-template-columns:minmax(0,1fr) clamp(148px,35%,268px);
  grid-template-areas:"tag art" "head art" "body art" "more art" "up art"}
.v7 .brief::after{content:""; position:absolute; z-index:0;
  right:-8%; top:50%; translate:0 -50%; width:48%; aspect-ratio:1;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,var(--k-soft) 0%,transparent 70%)}
.v7 .brief > *{position:relative; z-index:1}

.v7 .brief .tag{grid-area:tag; margin:0}
.v7 .brief .d-pill{display:inline-flex; align-items:center; gap:7px;
  background:var(--k-paper); border-radius:999px; padding:5px 12px 5px 8px;
  color:var(--k-deep); font-family:var(--body); font-weight:700;
  font-size:clamp(9.5px,.78vw,11px); letter-spacing:.1em;
  text-transform:uppercase}
.v7 .brief .d-pill svg{width:15px; height:15px; flex:none}

.v7 .brief h3{grid-area:head; margin:0; font-family:var(--display);
  font-weight:800; letter-spacing:-.02em; line-height:1.1;
  font-size:clamp(17.5px,1.92vw,28px); color:var(--ink); text-wrap:balance}
.v7 .brief h3 b{color:var(--k-ink); font-weight:800}

.v7 .brief > p:not(.tag):not(.more){grid-area:body; margin:0;
  color:var(--ink-2); font-size:clamp(13.5px,1.08vw,15.5px); line-height:1.55}

.v7 .brief .more{grid-area:more; margin:clamp(8px,1vw,14px) 0 0}
/* .brief .more a carries a 2px border-bottom for the plain layout. On a
   flex row that rule draws the line under the arrow disc as well as the
   words, so it comes off here; the hue is carried by the text and the disc
   instead, and the underline returns on hover. */
.v7 .seekblk.brief .more a,.v7 .hireblk.brief .more a{color:var(--k-deep)}
.v7 .brief .more a{display:inline-flex; align-items:center; gap:10px;
  color:var(--k-deep); font-weight:700; text-decoration:none;
  border-bottom:0; font-size:clamp(12.5px,1vw,14px)}
.v7 .brief .more a:hover span,.v7 .brief .more a:focus-visible span,
.v7 .brief .more a:hover,.v7 .brief .more a:focus-visible{
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-skip-ink:all}
.v7 .brief .more a i{font-style:normal; flex:none;
  width:26px; height:26px; border-radius:50%; background:var(--k-ink);
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1}

.v7 .brief .up{grid-area:up; justify-self:start; margin-top:10px}
.v7 .brief .d-art{grid-area:art; align-self:center; min-width:0}
.v7 .brief .d-art svg{display:block; width:100%; height:auto}
.v7 .brief .d-art .t{font-family:var(--body); font-size:9px; fill:var(--ink-2)}
.v7 .brief .d-art .t-h{font-size:9.5px; font-weight:700; fill:var(--ink)}
.v7 .brief .d-art .t-s{font-size:8px; fill:var(--ink-3)}
.v7 .brief .d-art .t-m{fill:var(--ink-3)}
.v7 .brief .d-art .t-on{fill:#fff; font-weight:700}
.v7 .brief .d-art .t-c{text-anchor:middle}
.v7 .brief .d-art .t-k{font-size:8.5px; font-weight:700}

/* the board's hues, reused by the same key so the two sets cannot drift */
.v7 .brief[data-k="match"] {--k-ink:#e11d48;--k-deep:#be123c;--k-tint:#fef3f5;--k-line:#f6dbe1;--k-soft:#fce7eb}
.v7 .brief[data-k="cv"]    {--k-ink:#2563eb;--k-tint:#eff5ff;--k-line:#d9e5fb;--k-soft:#e4edfd}
.v7 .brief[data-k="track"] {--k-ink:#ea580c;--k-deep:#c2410c;--k-tint:#fff7ed;--k-line:#f6e2cc;--k-soft:#fdeedd}
.v7 .brief[data-k="prep"]  {--k-ink:#7c3aed;--k-tint:#f6f3ff;--k-line:#e3dbfb;--k-soft:#ece5fd}
.v7 .brief[data-k="search"]{--k-ink:#16a34a;--k-deep:#15803d;--k-tint:#f0fdf4;--k-line:#d6ecdd;--k-soft:#e3f5e9}
.v7 .brief[data-k="pool"]  {--k-ink:#16a34a;--k-deep:#15803d;--k-tint:#f0fdf4;--k-line:#d6ecdd;--k-soft:#e3f5e9}
.v7 .brief[data-k="short"] {--k-ink:#7c3aed;--k-tint:#f6f3ff;--k-line:#e3dbfb;--k-soft:#ece5fd}
.v7 .brief[data-k="docs"]  {--k-ink:#0f766e;--k-tint:#f0fbf9;--k-line:#cfe8e4;--k-soft:#ddf1ee}
.v7 .brief[data-k="dup"]   {--k-ink:#2563eb;--k-tint:#eff5ff;--k-line:#d9e5fb;--k-soft:#e4edfd}
.v7 .brief[data-k="desk"]  {--k-ink:#127a43;--k-tint:#f1f8f4;--k-line:#d6e8dd;--k-soft:#e3f1e9}

@media (max-width:860px){
  .v7 .brief{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"tag" "head" "body" "more" "up"}
  .v7 .brief .d-art{display:none}
}

/* Same height for every detail card, by the same mechanism as the board:
   .build stretches both columns to the taller of the two, so dividing each
   column into five equal rows gives one height across all ten. The body row
   takes the slack, which puts every "Read more" and every back link on the
   same line as its neighbour. */
@media (min-width:860px){
  .v7 .build{align-items:stretch}
  /* White card behind each answers column (looking / hiring) - 8 Oct 2026,
     matching the board columns above: the tinted .brief cards sit on a
     white panel per side rather than floating on the board ground. */
  .v7 .build-col{display:grid; grid-auto-rows:1fr; align-content:stretch;
    gap:clamp(14px,1.7vw,24px);
    background:var(--card); border:1px solid var(--line);
    border-radius:20px; padding:clamp(20px,2vw,30px)}
  .v7 .brief{height:100%;
    grid-template-rows:auto auto 1fr auto auto}
  .v7 .brief > p:not(.tag):not(.more){align-self:start}
}

/* The board doors now jump to the detail card on this page, so each card
   needs room above it or the anchor lands flush against the viewport edge
   and the pill reads as cut off. */
.v7 .brief{scroll-margin-top:clamp(14px,2vw,28px)}

/* ==========================================================================
   FACT CARDS - 4 October 2026
   .fact was a hairline rule and two paragraphs. It is the most repeated
   block in the system - thirty-nine of them on the job seeker page, forty
   on the recruiter one - so giving it the card language the rest of V7 uses
   lifts every section at once rather than one of them.
   The accent tab replaces the old full-width top border: it marks the card
   without drawing a line across the column.
   ========================================================================== */
.v7 .fact{
  background:var(--card); border:1px solid var(--line); border-top:1px solid var(--line);
  border-radius:14px; padding:clamp(15px,1.55vw,21px);
  position:relative; min-width:0}
.v7 .fact::before{content:""; position:absolute; left:clamp(15px,1.55vw,21px);
  top:-1px; width:30px; height:3px; border-radius:0 0 3px 3px;
  background:var(--accent)}
.v7 .fact h3{margin:0 0 7px; font-family:var(--display); font-weight:700;
  letter-spacing:-.012em; line-height:1.25; color:var(--ink);
  font-size:clamp(15px,1.42vw,17.5px)}
.v7 .fact p{margin:0; color:var(--ink-2); line-height:1.55;
  font-size:clamp(13.5px,1.08vw,15.5px)}
/* On a section that paints itself dark, the card keeps its own ground but
   the tab has to be visible against it. */
.v7 .dark .fact,.v7 .jsv-sec .fact{border-color:rgba(255,255,255,.14)}

/* The line that used to close the navy hero, now standing on the white
   above the board. It reads as the page's standfirst rather than as part
   of the headline, which is what moving it was for. */
/* It sits on the board's own ground, not on a white strip of its own, and
   it is centred - it reads as one line introducing what follows, not as a
   column of body copy. The margin is gone: the board's top padding is the
   space under it. */
/* index-v7 wraps its content column in .proto, so a child selector on
   .main never matched and the whole rule sat dead. */
.v7 .main .standfirst{margin:0; background:var(--paper);
  padding:clamp(20px,2.4vw,32px) clamp(20px,3vw,44px) 0;
  max-width:none; color:var(--ink-2); text-align:center; text-wrap:balance;
  font-size:clamp(15.5px,1.45vw,19px); line-height:1.5}

/* ==========================================================================
   THE FREE-TOOLS BAND - 4 October 2026
   Four tinted cards beside an intro, per the mockup. The four names and
   their one-liners are the ones that were already on the page. The
   checkers are the only thing on the site with measured pull, so this is
   the one block that gets to look like an offer rather than a menu.
   ========================================================================== */
.v7 .tools{display:grid; gap:clamp(18px,2.4vw,34px);
  grid-template-columns:minmax(0,1fr);
  background:var(--card); border:1px solid var(--line); border-radius:22px;
  padding:clamp(20px,2.4vw,34px)}
@media (min-width:1040px){
  .v7 .tools{grid-template-columns:minmax(230px,.82fr) minmax(0,2fr);
    align-items:center}
}
.v7 .tools-intro{min-width:0}
.v7 .tools-tag{display:inline-block; margin:0 0 clamp(10px,1.2vw,15px);
  background:var(--paper); border:1px solid var(--line); border-radius:999px;
  padding:5px 14px; font-family:var(--body); font-weight:700;
  font-size:clamp(9.5px,.78vw,11px); letter-spacing:.1em; color:var(--seek)}
.v7 .tools-intro h2{margin:0 0 clamp(8px,1vw,12px); font-family:var(--display);
  font-weight:800; letter-spacing:-.022em; line-height:1.1; color:var(--ink);
  font-size:clamp(22px,2.3vw,34px)}
.v7 .tools-intro h2 b{color:var(--seek); font-weight:800}
/* .tools p set the mono data face for the old one-line label; this is
   running text and has to say so, or the paragraph sets in monospace. */
.v7 .tools-lede{margin:0; color:var(--ink-2); line-height:1.5;
  font-family:var(--body); letter-spacing:0;
  font-size:clamp(14px,1.12vw,16px)}
.v7 .tools-marks{list-style:none; margin:clamp(14px,1.7vw,22px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px clamp(14px,1.6vw,24px)}
.v7 .tools-marks li{display:flex; align-items:center; gap:8px; min-width:0;
  color:var(--ink-2); font-size:clamp(12px,.98vw,13.5px); line-height:1.3}
.v7 .tools-marks svg{width:19px; height:19px; flex:none; color:var(--seek)}
.v7 .tools-marks b{display:block; color:var(--ink); font-weight:700}

.v7 .tools .grid{display:grid; gap:clamp(10px,1.2vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  align-items:stretch}
.v7 .tools .grid .tool{
  --t-ink:#2563eb; --t-tint:#eff5ff; --t-line:#d9e5fb; --t-soft:#e4edfd;
  --t-paper:#fff; --t-bar:#dbe3ef; --t-ok:#16a34a; --t-no:#e11d48;
  display:grid; grid-template-rows:auto 1fr auto auto; gap:4px;
  background:var(--t-tint); border:1px solid var(--t-line); border-radius:16px;
  padding:clamp(12px,1.3vw,18px); text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--t-line)}
.v7 .tools .grid .tool:hover,.v7 .tools .grid .tool:focus-visible{
  border-color:var(--t-ink); transform:translateY(-2px);
  box-shadow:0 10px 24px -18px rgba(15,33,57,.55)}
@media (prefers-reduced-motion:reduce){
  .v7 .tools .grid .tool:hover{transform:none}}
.v7 .tools .tool-art{display:block; margin-bottom:clamp(6px,.8vw,10px)}
.v7 .tools .tool-art svg{display:block; width:100%; height:auto}
.v7 .tools .tool-art .t{font-family:var(--body); font-size:13px; fill:var(--ink-2)}
.v7 .tools .tool-art .t-h{font-weight:800; fill:var(--ink); font-size:15px}
.v7 .tools .tool-art .t-c{text-anchor:middle}
.v7 .tools .tool-art .t-k{font-size:12px; font-weight:800; fill:var(--t-ink)}
.v7 .tools .tool-h{align-self:end; font-family:var(--display); font-weight:800;
  letter-spacing:-.014em; line-height:1.15; color:var(--ink);
  font-size:clamp(14.5px,1.25vw,17px)}
.v7 .tools .tool-s{display:block; color:var(--ink-2); line-height:1.4;
  font-size:clamp(12.5px,1vw,13.5px); font-weight:400}
.v7 .tools .tool-go{justify-self:end; margin-top:clamp(6px,.8vw,10px);
  width:28px; height:28px; border-radius:50%; background:var(--t-ink); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; line-height:1}
.v7 .tools .tool[data-t="ad"]   {--t-ink:#c2410c;--t-tint:#fff7ed;--t-line:#f6e2cc;--t-soft:#fdeedd}
.v7 .tools .tool[data-t="comp"] {--t-ink:#15803d;--t-tint:#f0fdf4;--t-line:#d6ecdd;--t-soft:#e3f5e9}
.v7 .tools .tool[data-t="match"]{--t-ink:#7c3aed;--t-tint:#f6f3ff;--t-line:#e3dbfb;--t-soft:#ece5fd}

/* A form control with a width of its own does not know about the column it
   is in. On register-v7 at 390px three inputs ran past the edge of the
   screen. */
.v7 .main input,.v7 .main select,.v7 .main textarea{
  max-width:100%; box-sizing:border-box}

/* ==========================================================================
   AUDIENCE-PAGE BOARD CARDS - 5 October 2026
   The 41 doors on the job seeker and recruiter boards, in the card language
   the homepage uses. Every word is the one that was already on the page;
   the headline is only split so its second half can take the card's colour.
   A hue cycles per card rather than per group, which is how the mockups
   have it. Artwork lands later, so the card is drawn to look finished
   without any.
   ========================================================================== */
.v7 .board .group .door{
  --k-ink:var(--accent); --k-deep:var(--k-ink);
  --k-tint:#eef4ff; --k-line:#dbe6f6;
  --k-paper:#fff; --k-soft:#eef2f8; --k-bar:#dce4ef; --k-ok:#16a34a; --k-no:#e11d48;
  display:grid; grid-template-rows:auto 1fr auto; gap:6px;
  background:var(--k-tint); border:1px solid var(--k-line);
  border-radius:16px; padding:clamp(14px,1.5vw,20px);
  height:100%; text-decoration:none; color:var(--ink)}
.v7 .board .group .door:hover,.v7 .board .group .door:focus-visible{
  border-color:var(--k-ink); transform:translateY(-2px);
  box-shadow:0 10px 24px -18px rgba(15,33,57,.55)}
@media (prefers-reduced-motion:reduce){
  .v7 .board .group .door:hover{transform:none}}
.v7 .board .group .door .prob{font-family:var(--display); font-weight:800;
  letter-spacing:-.016em; line-height:1.16; color:var(--ink);
  font-size:clamp(14.5px,1.25vw,17.5px); text-wrap:balance}
.v7 .board .group .door .prob b{color:var(--k-ink); font-weight:800}
.v7 .board .group .door:hover .prob,
.v7 .board .group .door:focus-visible .prob{text-decoration:none}
.v7 .board .group .door .fix{color:var(--ink-2); line-height:1.45;
  font-size:clamp(12.5px,1vw,14px)}
.v7 .board .group .door .go{display:flex; align-items:center; gap:9px;
  margin-top:clamp(6px,.8vw,10px); font-family:var(--body); letter-spacing:0;
  text-transform:none; color:var(--k-deep); font-weight:700;
  font-size:clamp(12px,.98vw,13.5px)}
.v7 .board .group .door .go i{font-style:normal; margin-left:auto; flex:none;
  width:26px; height:26px; border-radius:50%; background:var(--k-ink); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1}
/* the rows are already equal; this keeps the cards filling them */
.v7 .board .group ul{align-items:stretch}
.v7 .board .group li{display:grid}

/* one hue per card, cycling. --k-deep is the text shade: amber and green
   do not clear 4.5:1 on their own tint at this size, so the small type
   takes a darker one while the card keeps the colour it was drawn in. */
/* ILLUSTRATED BOARD DOORS - /ats-engine, 7 October
   The four-up board doors can carry an illustration at the top, the way the
   mockups show. It sits in its own tinted panel above the heading, drawn in
   the same .d-art vocabulary the homepage doors use, and themed from the
   door's data-h so the picture, the second headline line and the arrow are
   one colour. A door with no .d-art is unchanged. */
.v7 .board .group .door:has(.d-art){grid-template-rows:auto auto 1fr auto}
.v7 .board .group .door .d-art{order:-1;display:block;margin:0 0 4px;
  background:#fff;border:1px solid var(--k-line);border-radius:12px;
  padding:clamp(10px,1vw,14px)}
.v7 .board .group .door .d-art svg{display:block;width:100%;height:auto}
.v7 .board .group .door .d-art .t{font-family:var(--body);font-size:9px;fill:var(--ink-2)}
.v7 .board .group .door .d-art .t-h{font-size:9.5px;font-weight:700;fill:var(--ink)}
.v7 .board .group .door .d-art .t-s{font-size:8.5px;fill:var(--ink-3)}
.v7 .board .group .door .d-art .t-m{fill:var(--ink-3)}
.v7 .board .group .door .d-art .t-on{fill:#fff;font-weight:700}
/* the arrow in .go becomes a filled disc like the mockup, in the hue */
.v7 .board .group .door:has(.d-art) .go{color:var(--k-ink)}
.v7 .board .group .door:has(.d-art) .go i{margin-left:auto;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;background:var(--k-ink);color:#fff;
  font-size:14px;font-style:normal}
.v7 .board .door[data-h="0"]{--k-ink:#2563eb;--k-tint:#eff5ff;--k-line:#d9e5fb}
.v7 .board .door[data-h="1"]{--k-ink:#e11d48;--k-deep:#be123c;--k-tint:#fef3f5;--k-line:#f6dbe1}
.v7 .board .door[data-h="2"]{--k-ink:#ea580c;--k-deep:#c2410c;--k-tint:#fff7ed;--k-line:#f6e2cc}
.v7 .board .door[data-h="3"]{--k-ink:#16a34a;--k-deep:#15803d;--k-tint:#f0fdf4;--k-line:#d6ecdd}
.v7 .board .door[data-h="4"]{--k-ink:#7c3aed;--k-tint:#f6f3ff;--k-line:#e3dbfb}
.v7 .board .door[data-h="5"]{--k-ink:#0f766e;--k-tint:#f0fbf9;--k-line:#cfe8e4}

/* The tools band in the taller format: the intro sits above the row so the
   cards get the full width, each card carries a pill, its drawing, a
   two-tone headline and a sentence rather than a fragment. */
.v7 .tools.tools-stacked{grid-template-columns:minmax(0,1fr)}
@media (min-width:1040px){
  .v7 .tools.tools-stacked{grid-template-columns:minmax(0,1fr); align-items:start}
}
.v7 .tools-stacked .tools-intro{max-width:72ch}
.v7 .tools-stacked .tools-marks{margin-top:clamp(12px,1.4vw,18px)}
/* At 1040 a 210px minimum gave three columns, so the fourth card dropped
   to a row of its own and came out shorter than the other three. 168px
   keeps all four on one row in the narrower content column, and equal auto
   rows keep them matched wherever they do wrap. */
.v7 .tools-stacked .grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));
  grid-auto-rows:1fr}
.v7 .tools-stacked .grid .tool{
  grid-template-rows:auto auto 1fr auto auto; gap:6px;
  padding:clamp(14px,1.5vw,22px); border-radius:18px}
.v7 .tools .tool-pill{justify-self:start; display:inline-flex; align-items:center;
  gap:7px; margin-bottom:clamp(6px,.8vw,10px);
  background:var(--t-paper); border-radius:999px; padding:5px 12px 5px 8px;
  color:var(--t-ink); font-family:var(--body); font-weight:700;
  font-size:clamp(9px,.74vw,10.5px); letter-spacing:.1em; line-height:1.2}
.v7 .tools .tool-pill svg{width:14px; height:14px; flex:none}
.v7 .tools-stacked .tool-h{align-self:start; font-size:clamp(16px,1.45vw,22px);
  line-height:1.12}
.v7 .tools-stacked .tool-h b{color:var(--t-ink); font-weight:800}
.v7 .tools-stacked .tool-s{font-size:clamp(13px,1.03vw,14.5px); line-height:1.45}
.v7 .tools-stacked .tool-go{justify-self:stretch; width:auto; height:auto;
  border-radius:0; background:none; color:var(--t-ink);
  display:flex; align-items:center; gap:9px; font-weight:700;
  font-family:var(--body); font-size:clamp(12px,.98vw,13.5px);
  margin-top:clamp(8px,1vw,14px)}
.v7 .tools-stacked .tool-go i{font-style:normal; margin-left:auto; flex:none;
  width:30px; height:30px; border-radius:50%; background:var(--t-ink); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; line-height:1}

/* A line under a board group's label, where one is written. The label is a
   category; this says what the row is for. */
.v7 .board .group .group-lead{margin:-4px 0 clamp(12px,1.4vw,18px);
  font-family:var(--display); font-weight:800; letter-spacing:-.018em;
  line-height:1.15; color:var(--ink);
  font-size:clamp(17px,1.65vw,24px); text-wrap:balance}

/* The whole site index now sits in every rail, so a page has to say which
   entry is itself - a 30-link menu with nothing marked is a list, not a
   position. */
.v7 .rail-nav a.rail-at{color:#fff; font-weight:700;
  border-left:2px solid var(--accent); padding-left:11px}
.v7 .rail-nav a.rail-free.rail-at{border-left-color:var(--free); color:#ffd3b4}

/* ==========================================================================
   SITE BAR ALONG THE TOP - 6 October 2026
   The index moved out of the rail and up here, so the rail is the page's own
   menu again. Groups are <details>, which open on click, on keyboard and on
   touch without any script; the script that ships with them only closes one
   when another opens.
   ========================================================================== */
/* The bar sits at the FOOT of the navy band, on the join with the white
   column. It needed padding-right when it was at the top, to stay clear of
   the Sign in link that is absolutely positioned up there; down here it has
   the full width. */
.v7 .sitenav{margin:clamp(14px,1.8vw,24px) 0 0; padding-right:0}
/* The gap below the bar is the stage's padding, not the bar's margin. As
   the last child of .inner its bottom margin collapses straight out of the
   band wherever .stage is not a grid - which is every width below 1040px,
   so on a phone the bar sat flush on the join with nothing under it. */
.v7 .stage > .inner{padding-bottom:clamp(12px,1.4vw,18px);
  flex:1 1 auto; display:flex; flex-direction:column}
/* The band now has a floor, so on a short page the content no longer
   fills it. Without this the bar stopped halfway down with a slab of
   empty navy beneath it; it belongs on the join with the white column,
   which is where it was asked to be. padding rather than margin for the
   gap above it, because auto has taken the margin. */
.v7 .sitenav{margin-top:auto; padding-top:clamp(14px,1.8vw,24px)}
@media (min-width:1040px){.v7 .sitenav{padding-right:clamp(66px,7vw,104px)}}

/* ONE BAND HEIGHT PER WIDTH
   --------------------------------------------------------------------
   The navy band used to be as tall as whatever was in it, so it changed
   height from page to page - 260px on /cookies against 387px on
   /for-recruiters - and moving between two pages shifted the whole page
   under the reader.
   The floor cannot be one number. The type scales with the viewport, so
   the natural height of the same two-line headline and two-line lede is
   329px at 1440 and 399px at 960: a single min-height would either leave
   a gap at one end or clip at the other. These three are the measured
   maximum across all 27 pages in each range, so every page is the same
   height at any width somebody is actually looking at. It changes only
   between breakpoints, which nobody sees unless they are dragging the
   window.
   This holds ONLY because no headline wraps past two lines any more -
   five were shortened to make that true. A headline long enough to take
   a third line will break out of the band again and the page will be the
   odd one out, so that is the thing to check when writing a new one. */
@media (min-width:1280px){ .v7 .stage{min-height:365px} }
@media (min-width:1040px) and (max-width:1279.98px){ .v7 .stage{min-height:360px} }
@media (min-width:860px) and (max-width:1039.98px){ .v7 .stage{min-height:400px} }
.v7 .sitenav > ul{list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:2px clamp(2px,.5vw,8px)}
.v7 .sitenav li{position:relative; min-width:0}
.v7 .sitenav a,.v7 .sitenav summary{
  display:block; padding:7px clamp(8px,.9vw,12px); border-radius:9px;
  color:#c7d7ec; font-family:var(--body); font-weight:600; text-decoration:none;
  font-size:clamp(12.5px,1.02vw,14px); line-height:1.2; white-space:nowrap;
  cursor:pointer}
.v7 .sitenav > ul > li > a:hover,.v7 .sitenav summary:hover,
.v7 .sitenav > ul > li > a:focus-visible,.v7 .sitenav summary:focus-visible{
  background:rgba(255,255,255,.10); color:#fff}
.v7 .sitenav .nav-at > a,.v7 .sitenav .nav-at > details > summary{
  color:#fff; background:rgba(255,255,255,.12)}
.v7 .sitenav .free > details > summary{color:var(--free)}
.v7 .sitenav .free > details > summary:hover{background:rgba(255,154,92,.16)}

.v7 .sitenav summary{list-style:none; position:relative;
  padding-right:clamp(20px,2vw,26px)}
.v7 .sitenav summary::-webkit-details-marker{display:none}
.v7 .sitenav summary::after{content:""; position:absolute; right:9px; top:50%;
  width:6px; height:6px; margin-top:-4px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg); opacity:.75}
.v7 .sitenav details[open] > summary::after{margin-top:-1px; transform:rotate(225deg)}

.v7 .sitenav details > ul{list-style:none; margin:0; padding:7px;
  position:absolute; z-index:40; top:calc(100% + 6px); left:0; min-width:230px;
  background:#0f2748; border:1px solid rgba(132,172,224,.34); border-radius:14px;
  box-shadow:0 20px 44px -26px rgba(0,0,0,.95)}
.v7 .sitenav details > ul a{white-space:normal; color:#d8e5f6}
.v7 .sitenav details > ul a:hover,.v7 .sitenav details > ul a:focus-visible{
  background:rgba(255,255,255,.10); color:#fff}
.v7 .sitenav details > ul a[aria-current]{color:#fff; background:rgba(255,255,255,.12)}
.v7 .sitenav .free details > ul a{color:#ffd0ad}
.v7 .sitenav .free details > ul a:hover{color:#fff; background:rgba(255,154,92,.18)}

/* On a phone the bar scrolls sideways rather than stacking into a wall, and a
   panel opens under the bar at full width instead of off the edge. */
@media (max-width:860px){
  .v7 .sitenav{padding-right:0; margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter)}
  .v7 .sitenav > ul{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  /* A nowrap flex row still shrinks its items by default, and .sitenav li has
     min-width:0, so every item collapsed to nothing and the nowrap labels
     printed on top of one another. The row scrolls; the items do not shrink. */
  .v7 .sitenav li{flex:0 0 auto}
  .v7 .sitenav > ul::-webkit-scrollbar{display:none}
  /* A fixed panel cannot hang off its summary: top:100% on a fixed box means
     100% of the VIEWPORT, which put the panel below the fold. On a phone it
     rises from the bottom edge instead - no script, nowhere off-screen to go,
     and the thumb is already down there. */
  .v7 .sitenav details > ul{position:fixed; left:clamp(12px,4vw,24px);
    right:clamp(12px,4vw,24px); top:auto; bottom:clamp(12px,4vw,24px);
    min-width:0; max-height:62vh; overflow:auto; padding:9px;
    box-shadow:0 -10px 60px -14px rgba(0,0,0,.92)}
  .v7 .sitenav details > ul a{padding-block:11px}
}
/* The rail is the page menu now, so a page with no sections has no rail list
   to show - the trial button below it still stands. */
.v7 .rail-nav:not(:has(a)){display:none}

/* The drawn laptop's base is deliberately wider than its screen - margin:0 -3.4%
   in v6, so it reads as a real laptop foot. In the v6 column that bleed stayed
   inside the page gutter; in the wider V7 column it reached 2px past the
   viewport at 860px and scrolled the whole document sideways. Giving the art
   its own inline padding leaves the drawing exactly as it was and gives the
   bleed somewhere to land. */
.v7 .wt-hero-art{padding-inline:3.6%}

/* ==========================================================================
   THE DEMO LOGIN - 6 October 2026
   The shared demo credentials, back on the two audience pages. The values are
   real selectable text in the page; copy-demo.js adds .demo-copy on top, so a
   blocked script leaves a working panel rather than a picture of one.
   ========================================================================== */
.v7 .demo-login{margin:clamp(16px,2vw,24px) 0 0;max-width:460px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:clamp(16px,1.7vw,22px)}
.v7 .demo-login-tag{margin:0 0 6px;font-family:var(--data);font-size:11px;
  letter-spacing:.12em;color:var(--ink-3)}
.v7 .demo-login h3{margin:0 0 4px;font-family:var(--display);font-weight:700;
  font-size:clamp(17px,1.5vw,19px);color:var(--ink);letter-spacing:-.01em}
.v7 .demo-login > p{margin:0 0 12px;color:var(--ink-2);font-size:14.5px}
.v7 .demo-cred{display:flex;align-items:center;gap:10px;margin:0 0 8px;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:9px 10px 9px 12px}
.v7 .demo-cred code{flex:1 1 auto;min-width:0;font-family:var(--data);
  font-size:13.5px;color:var(--ink);user-select:all;overflow-wrap:anywhere}
.v7 .demo-copy{flex:0 0 auto;cursor:pointer;font-family:var(--body);
  font-weight:600;font-size:13px;color:var(--ink-2);background:var(--card);
  border:1px solid var(--line);border-radius:8px;padding:6px 11px}
.v7 .demo-copy:hover{border-color:var(--ink-3);color:var(--ink)}
.v7 .demo-copy:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.v7 .demo-copy.is-done{background:#eaf7ef;border-color:#8fd6a5;color:#15803d}
.v7 .demo-copy-live{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%)}
.v7 .demo-open{display:inline-block;margin-top:6px;text-decoration:none;
  font-weight:700;font-size:14.5px;color:#fff;background:var(--accent);
  border-radius:10px;padding:10px 16px}
.v7 .demo-open:hover{filter:brightness(1.07)}
.v7 .demo-open:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Rich demo card (2026-10-11): credentials beside an app illustration.
   Icons sit in each .demo-cred before its <code>; the Copy button is still
   appended by scripts/copy-demo.js after the code, so the row reads
   icon / value / Copy. The aside is decorative (aria-hidden) and drawn in
   CSS + inline SVG - no baked image, no text locked inside a picture. */
.v7 .demo-login--rich{max-width:none;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(18px,2.6vw,36px);
  align-items:center;padding:clamp(18px,2.2vw,30px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--seek) 5%,var(--card)),var(--card))}
.v7 .demo-login-main{min-width:0}
.v7 .demo-login--rich h3 b{color:var(--seek);font-weight:800}
.v7 .demo-cred-ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:grid;
  place-items:center;background:color-mix(in srgb,var(--seek) 12%,transparent);color:var(--seek)}
.v7 .demo-cred-ic svg{width:17px;height:17px}
.v7 .demo-login--rich .demo-cred{padding:9px 10px 9px 10px}
.v7 .demo-login--rich .demo-open{display:block;width:100%;text-align:center;
  margin-top:12px;padding:13px 16px;font-size:15px}

/* ---- the aside: a stylised laptop + an "explore" card ---- */
.v7 .demo-login-aside{min-width:0;display:flex;flex-direction:column;gap:clamp(12px,1.5vw,18px)}
.v7 .demo-laptop{filter:drop-shadow(0 18px 30px rgba(15,27,53,.14))}
.v7 .demo-laptop-screen{display:flex;overflow:hidden;height:clamp(150px,17vw,186px);
  background:var(--paper);border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 2px 2px}
.v7 .demo-lt-side{flex:0 0 33%;background:#0f1b35;padding:11px 10px;display:flex;
  flex-direction:column;gap:9px}
.v7 .demo-lt-brand{color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;gap:5px;margin-bottom:3px}
.v7 .demo-lt-brand svg{width:12px;height:12px;color:#5b9bff;flex:none}
.v7 .demo-lt-side i{height:5px;width:72%;border-radius:3px;background:rgba(255,255,255,.16)}
.v7 .demo-lt-side i:nth-child(3){width:58%}
.v7 .demo-lt-side i:nth-child(5){width:64%}
.v7 .demo-lt-main{flex:1;min-width:0;padding:12px 13px;display:flex;flex-direction:column;gap:9px}
.v7 .demo-lt-h{font-size:10px;font-weight:700;color:var(--ink)}
.v7 .demo-lt-search{height:17px;border-radius:6px;border:1px solid var(--line);
  background:var(--card);display:flex;align-items:center;padding:0 7px}
.v7 .demo-lt-search svg{width:10px;height:10px;color:var(--ink-3)}
.v7 .demo-lt-tiles{display:flex;gap:7px}
.v7 .demo-lt-tile{flex:1;height:28px;border-radius:7px;display:grid;place-items:center}
.v7 .demo-lt-tile svg{width:14px;height:14px}
.v7 .demo-lt-tile.t1{background:color-mix(in srgb,#2563eb 14%,transparent);color:#2563eb}
.v7 .demo-lt-tile.t2{background:color-mix(in srgb,#16a34a 15%,transparent);color:#16a34a}
.v7 .demo-lt-tile.t3{background:color-mix(in srgb,#7c3aed 14%,transparent);color:#7c3aed}
.v7 .demo-lt-row{display:flex;align-items:center;gap:8px}
.v7 .demo-lt-row i{width:14px;height:14px;border-radius:50%;flex:none;
  background:color-mix(in srgb,var(--line) 75%,transparent)}
.v7 .demo-lt-row b{margin-left:auto;font-size:9px;font-weight:700;padding:2px 8px;border-radius:20px}
.v7 .demo-lt-row .b-int{background:color-mix(in srgb,#2563eb 14%,transparent);color:#2563eb}
.v7 .demo-lt-row .b-prog{background:color-mix(in srgb,#16a34a 15%,transparent);color:#15803d}
.v7 .demo-lt-row .b-new{background:color-mix(in srgb,#f59e0b 18%,transparent);color:#b45309}
.v7 .demo-laptop-base{height:10px;margin:0 -9px;border-radius:0 0 9px 9px;
  background:linear-gradient(180deg,#d7deea,#bcc6d8)}
.v7 .demo-explore{display:flex;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:13px 15px}
.v7 .demo-explore-ic{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;
  place-items:center;background:color-mix(in srgb,#7c3aed 13%,transparent);color:#7c3aed}
.v7 .demo-explore-ic svg{width:21px;height:21px}
.v7 .demo-explore-tx b{display:block;color:#7c3aed;font-weight:700;font-size:14.5px;line-height:1.2}
.v7 .demo-explore-tx > span{display:block;color:var(--ink-2);font-size:12.5px;line-height:1.35;margin-top:2px}

@media (max-width:760px){
  .v7 .demo-login--rich{grid-template-columns:1fr;gap:18px}
  .v7 .demo-login-aside{order:2}
}
@media (prefers-reduced-motion:reduce){.v7 .demo-login--rich .demo-open{transition:none}}


/* ==========================================================================
   JOBBIE WIDGET - mirrored from styles-v6.css
   The chat widget's styles live in styles-v6.css, which 24 of the 27 pages
   load. The homepage and the two audience pages were hand-built on V7 only
   and never loaded v6, so Jobbie's script ran there and built an UNSTYLED,
   invisible widget - present in the DOM, pinned nowhere, drawn as nothing.
   Every page loads THIS file, so the widget's CSS belongs here. v6 keeps its
   copy untouched (identical rules, and v7 loads after it, so the 24 pages do
   not move); these rules are what give the three V7-only pages their Jobbie.
   If the widget's styling is ever changed, change it in styles-v6.css too -
   or move it out of v6 entirely - so the two copies cannot drift.
   ========================================================================== */
/* ---------------------------------------------------------------------
   Jobster - the site assistant. Jobbie for short.

   Bottom-right on every marketing page, deliberately echoing the
   Assistant button inside the product so the two read as the same thing
   rather than as a bolted-on marketing widget.
   --------------------------------------------------------------------- */
/* v7 PALETTE PIN (v7 only - do NOT copy to v6, which already defines these).
   The mirrored rules below were written against v6's tokens; v7 omits
   --green, --blue, --muted and --navy2 and carries a slightly different
   --ink/--line, so without this the launcher loses its green fill and the
   panel its blue. Pinning the original v6 values to the widget root makes
   Jobbie identical on the three V7-only pages to the 24 that load v6. */
.jb-root{--navy:#071a33;--navy2:#0d2b4b;--blue:#2f73df;--green:#52d273;--ink:#10233d;--muted:#68798d;--bg:#f5f8fc;--card:#fff;--line:#e1e9f2;--shadow:0 18px 50px rgba(8,31,58,.09)}
.jb-root { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.jb-launcher {
  display: inline-flex; align-items: center; gap: 9px;
  border: 0; cursor: pointer; font: inherit; font-weight: 900; font-size: 15px;
  color: #06172a; background: var(--green);
  padding: 13px 20px; border-radius: 999px;
  box-shadow: 0 14px 34px rgba(8, 31, 58, .28);
  transition: transform .16s ease, box-shadow .16s ease;
}
.jb-launcher:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(8, 31, 58, .34); }
.jb-launcher:focus-visible { outline: 3px solid var(--navy2); outline-offset: 3px; }
.jb-launcher-dot { width: 9px; height: 9px; border-radius: 50%; background: #06172a; }
.jb-root.is-open .jb-launcher-label::after { content: ' \00d7'; }
.jb-panel {
  width: min(400px, calc(100vw - 40px));
  height: min(560px, calc(100vh - 130px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 30px 80px rgba(8, 31, 58, .3);
}
.jb-panel[hidden] { display: none; }
.jb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; background: linear-gradient(120deg, #0b2b4c, #123e67); color: #fff; }
.jb-name { font-weight: 950; font-size: 17px; letter-spacing: -.3px; }
.jb-sub { font-size: 12.5px; opacity: .85; margin-top: 2px; }
.jb-close { border: 0; background: transparent; color: #dbe7f5; font-size: 25px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 8px; }
.jb-close:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.jb-log { flex: 1 1 auto; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #f7fafd; }
.jb-msg { max-width: 88%; padding: 12px 15px; border-radius: 15px; font-size: 14.5px; line-height: 1.55; }
.jb-msg p { margin: 0 0 9px; }
.jb-msg p:last-child { margin-bottom: 0; }
.jb-msg ul { margin: 0 0 9px; padding-left: 19px; }
/* Numbered how-to steps. Jobbie answers these with <ol>; without a rule
   of its own it took the browser's 40px indent and sat out of line with
   the bulleted answers. A touch more left padding than ul so a two-digit
   step still clears the text. */
.jb-msg ol { margin: 0 0 9px; padding-left: 22px; }
.jb-msg ol li { margin: 6px 0; }
.jb-msg li { margin: 5px 0; }
.jb-msg code { background: #eef3f9; border: 1px solid #dbe6f0; border-radius: 5px; padding: 1px 6px; font-size: 13px; }
.jb-you { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 5px; }
.jb-bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.jb-bot .jb-muted { color: var(--muted); font-size: 13px; }
/* Three dots while it looks something up. It is instant, but a reply
   that appears before the question has finished rendering reads as
   canned rather than as an answer. */
.jb-thinking { display: flex; gap: 5px; padding: 15px; }
.jb-thinking span { width: 7px; height: 7px; border-radius: 50%; background: #9db2c7; animation: jb-bounce 1.1s infinite; }
.jb-thinking span:nth-child(2) { animation-delay: .16s; }
.jb-thinking span:nth-child(3) { animation-delay: .32s; }
@keyframes jb-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-5px); opacity: 1; } }
.jb-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.jb-chip { border: 1px solid #cfdce9; background: #fff; color: #34526d; font: inherit; font-size: 13px; font-weight: 750; padding: 8px 13px; border-radius: 999px; cursor: pointer; }
.jb-chip:hover { border-color: var(--blue); color: var(--blue); }
.jb-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: #fff; }
.jb-input { flex: 1 1 auto; width: auto; padding: 11px 13px; border: 1px solid #cfdbe7; border-radius: 10px; font: inherit; font-size: 14.5px; }
.jb-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 115, 223, .16); }
.jb-send { border: 0; background: var(--blue); color: #fff; font: inherit; font-weight: 850; padding: 11px 17px; border-radius: 10px; cursor: pointer; }
.jb-send:hover { filter: brightness(1.07); }
@media (max-width: 650px) {
  .jb-root { right: 12px; bottom: 12px; }
  .jb-panel { height: min(70vh, calc(100vh - 110px)); }
  .jb-launcher-label { display: none; }
  .jb-launcher { padding: 15px; }
}
/* ---- Jobster: voice controls ---------------------------------------
   Both are feature-detected in jobster.js and simply do not render where
   the browser lacks the API - recognition is Chrome and Edge only. */
.jb-tools { display: flex; align-items: center; gap: 4px; }
.jb-speak {
  border: 0; background: transparent; color: #8fa9c4; cursor: pointer;
  padding: 6px; border-radius: 9px; line-height: 0;
}
.jb-speak:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.jb-speak.is-on { color: var(--green); }
/* The two arcs are the "sound is on" signal - hidden, the icon reads as
   muted without needing a second icon or a strike-through. */
.jb-speak .jb-wave { opacity: 0; transition: opacity .16s ease; }
.jb-speak.is-on .jb-wave { opacity: 1; }
.jb-mic {
  border: 1px solid #cfdbe7; background: #fff; color: #52697f; cursor: pointer;
  padding: 0 12px; border-radius: 10px; line-height: 0; flex: 0 0 auto;
}
.jb-mic:hover { border-color: var(--blue); color: var(--blue); }
.jb-mic.is-listening {
  border-color: #d9534f; color: #fff; background: #d9534f;
  animation: jb-pulse 1.3s ease-in-out infinite;
}
@keyframes jb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 83, 79, .45); }
  50% { box-shadow: 0 0 0 7px rgba(217, 83, 79, 0); }
}
.jb-mic:focus-visible, .jb-speak:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
/* The tagline earns two lines on a narrow panel - do not clip it. */
.jb-sub { max-width: 27ch; line-height: 1.35; }
/* The panel's top line carries both names - "'Jobster' aka 'Jobbie'" -
   because the launcher says Jobbie and the assistant introduces itself
   as Jobster, and nobody should have to work out that those are the
   same thing. Slightly smaller than a one-word name would be, so it
   still fits the panel on a phone. */
.jb-name { font-size: 16px; letter-spacing: -.2px; }

/* ==========================================================================
   ILLUSTRATED CARDS - for-jobseekers (2026-10-11)
   Free-checker cards, and the illustrated "fact" callouts (templates /
   weaker). Every illustration is drawn in CSS + inline SVG - no baked
   image, and every label in them is real page text.
   ========================================================================== */

/* ---- Free, no account: four tinted checker cards ---- */
.v7 .tools.tools--cards{background:transparent;border:0;border-radius:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:clamp(12px,1.5vw,18px);margin-top:clamp(14px,1.8vw,22px)}
@media(min-width:720px){.v7 .tools.tools--cards{grid-template-columns:1fr 1fr}}
.v7 .tools--cards .tool{position:relative;display:block;text-decoration:none;overflow:hidden;
  border:1px solid var(--line);border-radius:18px;padding:clamp(18px,1.9vw,24px);min-height:154px;
  background:var(--card);transition:transform .15s,box-shadow .15s,border-color .15s}
.v7 .tools--cards .tool:hover,.v7 .tools--cards .tool:focus-visible{transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(15,27,53,.1);border-color:color-mix(in srgb,var(--ta) 42%,var(--line))}
.v7 .tools--cards .tool-tx{position:relative;z-index:1;display:block;max-width:60%}
.v7 .tools--cards .tool-tx b{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  line-height:1.12;color:var(--ink);font-size:clamp(18px,1.7vw,22px)}
.v7 .tools--cards .tool-tx i{display:block;font-style:normal;color:var(--ink-2);
  font-size:clamp(13px,1.08vw,14.5px);line-height:1.4;margin-top:7px}
.v7 .tools--cards .tool-go{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-weight:700;font-size:14px;color:var(--ta)}
.v7 .tools--cards .tool-go-ic{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ta);color:#fff}
.v7 .tools--cards .tool-go-ic svg{width:15px;height:15px}
.v7 .tools--cards .tool-art{position:absolute;right:clamp(4px,1vw,14px);top:50%;transform:translateY(-50%);
  width:clamp(116px,15vw,172px);pointer-events:none;z-index:0}
.v7 .tools--cards .tool-art svg{width:100%;height:auto;display:block}
.v7 .tools--cards .tool--cv{--ta:#2563eb;background:linear-gradient(135deg,color-mix(in srgb,#2563eb 7%,var(--card)),var(--card))}
.v7 .tools--cards .tool--match{--ta:#16a34a;background:linear-gradient(135deg,color-mix(in srgb,#16a34a 7%,var(--card)),var(--card))}
.v7 .tools--cards .tool--advert{--ta:#7c3aed;background:linear-gradient(135deg,color-mix(in srgb,#7c3aed 7%,var(--card)),var(--card))}
.v7 .tools--cards .tool--compliance{--ta:#d97706;background:linear-gradient(135deg,color-mix(in srgb,#f59e0b 10%,var(--card)),var(--card))}
@media(max-width:560px){.v7 .tools--cards .tool-tx{max-width:none}.v7 .tools--cards .tool-art{opacity:.42;width:92px}}
@media(prefers-reduced-motion:reduce){.v7 .tools--cards .tool{transition:none}.v7 .tools--cards .tool:hover{transform:none}}

/* ---- Illustrated fact callouts (shared framework) ---- */
.v7 .facts.facts--cards{display:grid;grid-template-columns:1fr;gap:clamp(14px,1.8vw,22px);margin:clamp(14px,1.8vw,22px) 0}
@media(min-width:880px){.v7 .facts.facts--cards{grid-template-columns:1fr 1fr}}
.v7 .facts--cards .fact--illus{position:relative;overflow:hidden;border:1px solid var(--line);border-top:1px solid var(--line);
  border-radius:20px;padding:clamp(20px,2.1vw,28px);
  background:linear-gradient(135deg,color-mix(in srgb,var(--fa) 8%,var(--card)),var(--card));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,1.8vw,24px);align-items:center}
.v7 .facts--cards .fact--illus::before{display:none}
.v7 .facts--cards .fact-tx{min-width:0}
.v7 .facts--cards .fact-ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:color-mix(in srgb,var(--fa) 14%,transparent);color:var(--fa);margin-bottom:12px}
.v7 .facts--cards .fact-ic svg{width:21px;height:21px}
.v7 .facts--cards .fact-tx h3{margin:0 0 8px;font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  line-height:1.14;color:var(--ink);font-size:clamp(18px,1.7vw,23px)}
.v7 .facts--cards .fact-tx p{margin:0;color:var(--ink-2);line-height:1.5;font-size:clamp(13.5px,1.1vw,15px)}
.v7 .facts--cards .fact-art{position:relative;min-width:0;justify-self:center;width:100%;max-width:300px}
.v7 .fact--preview{--fa:#2563eb}
.v7 .fact--version{--fa:#7c3aed}
.v7 .fact--warn{--fa:#ef4444}
.v7 .fact--good{--fa:#16a34a}
@media(max-width:620px){.v7 .facts--cards .fact--illus{grid-template-columns:1fr}
  .v7 .facts--cards .fact-art{max-width:270px;margin-top:6px}}

/* ---- Templates: fanned preview cards ---- */
.v7 .tpl-art{position:relative;display:block;height:clamp(172px,20vw,208px);width:100%}
.v7 .tpl-card{position:absolute;background:#fff;border:1px solid #e5eaf2;border-radius:12px;box-shadow:0 10px 24px rgba(15,27,53,.1)}
.v7 .tpl-card--b1{left:4%;top:16%;width:40%;height:66%;transform:rotate(-7deg);background:#f5f8fc}
.v7 .tpl-card--b2{right:4%;top:16%;width:40%;height:66%;transform:rotate(7deg);background:#f5f8fc}
.v7 .tpl-card--front{left:50%;top:5%;transform:translateX(-50%);width:55%;height:90%;overflow:hidden;
  padding:12px 13px;display:flex;flex-direction:column;gap:5px;z-index:2}
.v7 .tpl-badge{position:absolute;top:9px;right:9px;z-index:3;background:#16a34a;color:#fff;font-size:8px;font-weight:700;padding:3px 7px;border-radius:20px}
.v7 .tpl-head{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.v7 .tpl-ava{width:14px;height:14px;border-radius:50%;background:#bcd0f5;flex:none}
.v7 .tpl-title{font-family:var(--display);font-weight:800;font-size:12px;color:#0f1b35}
.v7 .tpl-lbl{font-size:7.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
.v7 .tpl-ln{height:4px;border-radius:2px;background:#e8edf5}
.v7 .tpl-ln.w55{width:55%}.v7 .tpl-ln.w60{width:60%}.v7 .tpl-ln.w75{width:75%}.v7 .tpl-ln.w80{width:80%}.v7 .tpl-ln.w90{width:90%}
.v7 .tpl-chk{position:absolute;right:-9px;bottom:14px;width:30px;height:30px;border-radius:50%;background:#16a34a;color:#fff;
  display:grid;place-items:center;box-shadow:0 6px 14px rgba(22,163,74,.4);z-index:4}
.v7 .tpl-chk svg{width:16px;height:16px}
.v7 .tpl-dots{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px}
.v7 .tpl-dots i{width:7px;height:7px;border-radius:50%;background:#cbd5e6}
.v7 .tpl-dots i.on{background:#2563eb;width:9px;height:9px}

/* ---- Templates: versioned document + timeline ---- */
.v7 .ver-art{display:flex;align-items:center;gap:10px;width:100%}
.v7 .ver-doc{position:relative;flex:1 1 62%;background:#fff;border:1px solid #e5eaf2;border-radius:12px;
  box-shadow:0 10px 24px rgba(15,27,53,.1);padding:12px 13px;display:flex;flex-direction:column;gap:7px}
.v7 .ver-doc-head{display:flex;align-items:center;gap:7px;margin-bottom:2px}
.v7 .ver-doc-ic{width:22px;height:22px;border-radius:6px;background:color-mix(in srgb,#7c3aed 14%,transparent);color:#7c3aed;display:grid;place-items:center;flex:none}
.v7 .ver-doc-ic svg{width:13px;height:13px}
.v7 .ver-doc-head b{font-family:var(--display);font-weight:800;font-size:11px;color:#0f1b35}
.v7 .ver-ln{height:4px;border-radius:2px;background:#e8edf5}
.v7 .ver-ln.w60{width:60%}.v7 .ver-ln.w70{width:70%}.v7 .ver-ln.w85{width:85%}.v7 .ver-ln.w90{width:90%}
.v7 .ver-chip{display:inline-flex;align-items:center;gap:6px;margin-top:4px;align-self:flex-start;
  background:color-mix(in srgb,#7c3aed 10%,transparent);border:1px solid color-mix(in srgb,#7c3aed 28%,transparent);
  border-radius:8px;padding:4px 8px 4px 5px;font-size:9.5px;font-weight:600;color:#5b21b6}
.v7 .ver-chip em{font-style:normal;background:#7c3aed;color:#fff;font-weight:700;padding:1px 6px;border-radius:5px;font-size:9px}
.v7 .ver-time{flex:0 0 32%;display:flex;flex-direction:column;gap:9px;position:relative;padding-left:2px}
.v7 .ver-time::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:2px;background:#e3e8f0}
.v7 .ver-item{position:relative;padding-left:16px}
.v7 .ver-item > i{position:absolute;left:0;top:2px;width:9px;height:9px;border-radius:50%;background:#cbd5e6;box-shadow:0 0 0 3px var(--card)}
.v7 .ver-item.ver-on > i{background:#7c3aed}
.v7 .ver-item b{display:block;font-size:11px;font-weight:700;color:#0f1b35}
.v7 .ver-item span{display:block;font-size:9px;color:#8795ab;margin-top:1px}

/* ---- Weaker: the named requirement (one row flagged) ---- */
.v7 .wk-art{position:relative;width:100%}
.v7 .wk-named{display:flex;align-items:center;justify-content:center;min-height:clamp(150px,18vw,190px)}
.v7 .wk-named .wk-panel{max-width:90%}
.v7 .wk-dot{flex:none;width:14px;height:14px;border-radius:50%;background:#cbd5e6}
.v7 .wk-bic--bad{background:#ef4444}
.v7 .wk-brow--bad{background:color-mix(in srgb,#ef4444 10%,transparent);border-radius:9px;padding:6px 7px;margin:-2px 0}
.v7 .wk-bar--g::before{content:"";position:absolute;left:0;top:0;bottom:0;width:62%;border-radius:5px;background:#dce3ee}
.v7 .wk-bar--r::before{content:"";position:absolute;left:0;top:0;bottom:0;width:50%;border-radius:5px;background:color-mix(in srgb,#ef4444 52%,transparent)}
.v7 .wk-chip--bad{background:color-mix(in srgb,#ef4444 16%,transparent);color:#dc2626}

/* ---- Weaker: the band-lift panel ---- */
.v7 .wk-fix{position:relative;height:auto;display:flex;align-items:center;justify-content:center}
.v7 .wk-panel{flex:1 1 auto;max-width:82%;background:#fff;border:1px solid #e5eaf2;border-radius:14px;
  box-shadow:0 10px 24px rgba(15,27,53,.1);padding:13px 12px;display:flex;flex-direction:column;gap:10px}
.v7 .wk-brow{display:flex;align-items:center;gap:8px}
.v7 .wk-bic{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff}
.v7 .wk-bic svg{width:13px;height:13px}
.v7 .wk-bic--ok{background:#16a34a}.v7 .wk-bic--mid{background:#f59e0b}.v7 .wk-bic--no{background:#94a3b8}
.v7 .wk-bar{flex:1;height:10px;border-radius:5px;background:#eef2f8;position:relative;overflow:hidden}
.v7 .wk-bar--ok::before{content:"";position:absolute;inset:0;width:100%;border-radius:5px;background:#22c55e}
.v7 .wk-bar--mid::before{content:"";position:absolute;left:0;top:0;bottom:0;width:55%;border-radius:5px;background:#f59e0b}
.v7 .wk-chip{flex:none;font-size:9px;font-weight:700;padding:3px 7px;border-radius:20px}
.v7 .wk-chip--ok{background:color-mix(in srgb,#16a34a 15%,transparent);color:#15803d}
.v7 .wk-chip--mid{background:color-mix(in srgb,#f59e0b 18%,transparent);color:#b45309}
.v7 .wk-chip--no{background:transparent}
.v7 .wk-up{position:absolute;right:2%;top:-4%;width:38px;height:38px;color:#16a34a}
.v7 .wk-up svg{width:100%;height:100%}
@media(max-width:620px){.v7 .wk-callout{font-size:9.5px;padding:6px 8px}}

/* ==========================================================================
   ILLUSTRATED CARDS - batch 2 (cv-library, tailored-cv, rubrics) 2026-10-11
   Shared primitives (.il-doc/.il-ln/.il-chip) + per-scene layouts. All
   CSS/SVG, every label real text.
   ========================================================================== */
.v7 .facts.facts--cards.facts--trio{grid-template-columns:1fr}
@media(min-width:980px){.v7 .facts.facts--cards.facts--trio{grid-template-columns:1fr 1fr 1fr}}
.v7 .facts--trio .fact--illus{grid-template-columns:1fr}
.v7 .facts--trio .fact-art{margin-top:clamp(10px,1.4vw,16px);max-width:280px;justify-self:start}

.v7 .il{position:relative;display:block;width:100%}
.v7 .il-doc{background:#fff;border:1px solid #e5eaf2;border-radius:12px;box-shadow:0 10px 24px rgba(15,27,53,.1);
  padding:12px 13px;display:flex;flex-direction:column;gap:6px}
.v7 .il-ln{height:5px;border-radius:2.5px;background:#e8edf5}
.v7 .il-ln.g{background:color-mix(in srgb,#16a34a 32%,#e8edf5)}
.v7 .il-ln.w55{width:55%}.v7 .il-ln.w60{width:60%}.v7 .il-ln.w65{width:65%}.v7 .il-ln.w70{width:70%}
.v7 .il-ln.w75{width:75%}.v7 .il-ln.w80{width:80%}.v7 .il-ln.w85{width:85%}.v7 .il-ln.w90{width:90%}
.v7 .il-chip{display:inline-flex;align-items:center;font-size:9px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap}
.v7 .il-chip--r{background:color-mix(in srgb,#ef4444 14%,transparent);color:#dc2626}
.v7 .il-chip--g{background:color-mix(in srgb,#16a34a 15%,transparent);color:#15803d}
.v7 .il-mini-ok{flex:none;width:16px;height:16px;border-radius:50%;background:#16a34a;display:inline-grid;place-items:center}
.v7 .il-mini-ok svg{width:10px;height:10px}

/* CV library: Word doc */
.v7 .il-word .il-doc{max-width:200px;position:relative;padding-top:16px}
.v7 .il-wmark{position:absolute;top:-9px;left:12px;width:26px;height:26px;border-radius:6px;background:#2563eb;color:#fff;font-family:var(--display);font-weight:800;font-size:14px;display:grid;place-items:center;box-shadow:0 4px 10px rgba(37,99,235,.35)}
.v7 .il-dash{height:14px;border-radius:5px;border:2px dashed;margin:2px 0}
.v7 .il-dash--r{border-color:#ef4444;width:48%;margin-left:auto}
.v7 .il-dash--a{border-color:#f59e0b;width:70%}
.v7 .il-tbl{height:34px;border-radius:5px;background:repeating-linear-gradient(#eef3fb,#eef3fb 10px,#dde6f4 10px,#dde6f4 11px),repeating-linear-gradient(90deg,#eef3fb,#eef3fb 22px,#dde6f4 22px,#dde6f4 23px);border:1px solid #d7e0ee}

/* CV library: scan */
.v7 .il-scan{display:flex;justify-content:center}
.v7 .il-scan .il-doc{width:165px;max-width:165px}
.v7 .il-mag{position:absolute;right:10%;bottom:6%;width:50px;height:50px;color:#16a34a;background:#fff;border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 18px rgba(22,163,74,.28)}
.v7 .il-mag svg{width:30px;height:30px}
.v7 .il-ibadge{position:absolute;right:9%;bottom:3%;width:24px;height:24px;border-radius:50%;background:#16a34a;color:#fff;font-family:var(--display);font-weight:800;font-size:13px;display:grid;place-items:center}

/* CV library: duplicate */
.v7 .il-dup{min-height:150px}
.v7 .il-dup .il-doc{position:absolute;width:116px;max-width:116px;gap:7px}
.v7 .il-dup .il-doc--back{left:4%;top:4%;opacity:.85}
.v7 .il-dup .il-doc--front{left:24%;top:30%;padding-top:15px}
.v7 .il-dup .il-wmark{width:22px;height:22px;font-size:12px;top:-8px}
.v7 .il-xbadge{position:absolute;right:16%;top:6%;width:30px;height:30px;border-radius:50%;background:#ef4444;display:grid;place-items:center;box-shadow:0 6px 14px rgba(239,68,68,.4)}
.v7 .il-xbadge svg{width:16px;height:16px}
.v7 .il-dup .il-chip--r{position:absolute;right:2%;top:28%}
.v7 .il-note{position:absolute;right:0;bottom:4%;background:#fff;border:1px solid #e5eaf2;border-radius:9px;box-shadow:0 6px 14px rgba(15,27,53,.14);padding:6px 9px;font-size:9.5px;font-weight:600;color:#475569;line-height:1.3}

/* Tailored CV: claim evidence (reuses a panel of rows) */
.v7 .il-claim{display:flex;align-items:center;gap:8px}
.v7 .il-doc--mycv{flex:0 0 38%;max-width:38%}
.v7 .il-tag{font-family:var(--display);font-weight:800;font-size:11px;color:#0f1b35;margin-bottom:2px}
.v7 .il-tag--muted{color:#64748b}
.v7 .il-arrow{flex:none;width:22px;color:#2563eb}
.v7 .il-arrow svg{width:100%}
.v7 .il-panel{flex:1 1 auto;min-width:0;background:#fff;border:1px solid #e5eaf2;border-radius:12px;box-shadow:0 10px 24px rgba(15,27,53,.1);padding:11px;display:flex;flex-direction:column;gap:8px}
.v7 .il-ptitle{font-family:var(--display);font-weight:800;font-size:11px;color:#2563eb}
.v7 .il-prow{display:flex;align-items:center;gap:7px;border-radius:8px;padding:5px 6px}
.v7 .il-prow--ok{background:color-mix(in srgb,#16a34a 9%,transparent)}
.v7 .il-prow--mid{background:color-mix(in srgb,#f59e0b 10%,transparent)}
.v7 .il-prow--no{background:color-mix(in srgb,#ef4444 9%,transparent)}
.v7 .il-pic{flex:none;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;color:#fff}
.v7 .il-pic svg{width:12px;height:12px}
.v7 .il-pic--ok{background:#16a34a}.v7 .il-pic--mid{background:#f59e0b}.v7 .il-pic--no{background:#ef4444}
.v7 .il-pbar{flex:1;height:6px;border-radius:3px}
.v7 .il-pbar--ok{background:color-mix(in srgb,#16a34a 55%,#e8edf5)}
.v7 .il-pbar--mid{background:color-mix(in srgb,#f59e0b 60%,#e8edf5)}
.v7 .il-pbar--no{background:color-mix(in srgb,#ef4444 50%,#e8edf5)}

/* Tailored CV: section kept */
.v7 .il-section{display:flex;align-items:center;gap:6px}
.v7 .il-doc--tcv{flex:0 0 50%;max-width:50%}
.v7 .il-doc--prev{flex:0 0 42%;max-width:42%;align-self:flex-end}
.v7 .il-chkline{display:flex;align-items:center;gap:6px}
.v7 .il-prow2{display:flex;align-items:center;gap:6px}
.v7 .il-ava{flex:none;width:13px;height:13px;border-radius:50%;background:#bcd0f5}
.v7 .il-ava.sm{width:11px;height:11px;background:#c9b6f3}
.v7 .il-dasharrow{flex:none;width:22px;color:#16a34a}
.v7 .il-dasharrow svg{width:100%}

/* Rubrics: search */
.v7 .il-search{display:flex;flex-direction:column;gap:8px}
.v7 .il-sbar{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #e5eaf2;border-radius:10px;box-shadow:0 8px 18px rgba(15,27,53,.08);padding:7px 8px}
.v7 .il-sbar-ic{color:#64748b;width:15px;height:15px;flex:none}
.v7 .il-sbar-ic svg{width:100%;height:100%}
.v7 .il-sbar-tx{flex:1;font-size:11.5px;font-weight:600;color:#0f1b35}
.v7 .il-sbtn{background:#2563eb;color:#fff;font-size:10px;font-weight:700;padding:5px 11px;border-radius:7px}
.v7 .il-results{background:#fff;border:1px solid #e5eaf2;border-radius:10px;box-shadow:0 8px 18px rgba(15,27,53,.08);padding:8px;display:flex;flex-direction:column;gap:7px}
.v7 .il-rrow,.v7 .il-reuse{display:flex;align-items:center;gap:7px}
.v7 .il-rdoc{flex:none;width:15px;height:18px;border-radius:3px;background:#dce7fb;border:1px solid #bcd0f5}
.v7 .il-rdoc.b{background:#e2f1ea;border-color:#a7dcc2}
.v7 .il-rtx{flex:1;font-size:10px;font-weight:600;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v7 .il-reuse{background:#fff;border:1px solid #e5eaf2;border-radius:10px;box-shadow:0 8px 18px rgba(15,27,53,.08);padding:8px 10px}
.v7 .il-sync{flex:none;width:18px;height:18px;color:#16a34a}
.v7 .il-sync svg{width:100%;height:100%}

/* Rubrics: validation */
.v7 .il-valid{display:flex;flex-direction:column;gap:10px}
.v7 .il-vchecks{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.v7 .il-vck{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;color:#334155}
.v7 .il-donut{position:relative;width:76px;height:76px;align-self:center}
.v7 .il-donut svg{width:100%;height:100%}
.v7 .il-donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.v7 .il-donut-c b{font-family:var(--brand-font-data,monospace);font-weight:800;font-size:16px;color:#0f1b35;line-height:1}
.v7 .il-donut-c i{font-style:normal;font-size:8px;color:#64748b;margin-top:1px}

@media(max-width:620px){
  .v7 .il-claim,.v7 .il-section{flex-wrap:wrap}
}

/* ==== Cross-device text (2026-10-16) ==== */
main p, main li, .fix, .fact-tx, .tool-tx, .brief p, .trial p, .reward p, .sector-trap p, .sector-card-body p, .as-familiar-note p {
  text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto;
}
nav li, header li, footer li, footer p, .price, .plan-card li, [class*="pill"], [class*="badge"], .go, .center, [style*="text-align"] { text-align: inherit; hyphens: manual; }
@media (max-width: 900px) { .sf-brand { grid-column: 1 / -1; } }
@media (max-width: 860px) { .v7 .branch .door { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .as-familiar-note { flex-direction: column; gap: 10px; }
  .sector-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .reward { padding-right: 22px; }
  .sector-tile, .sector-tile:has(.sector-photo) { grid-template-columns: minmax(0, 1fr); }
  .topic-card-head { grid-template-columns: minmax(0, 1fr); }
  .demo-explore { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .container { padding-left: 14px !important; padding-right: 14px !important; }
  .team-sales-panel { padding-left: 12px !important; padding-right: 12px !important; }
  .plan-card { padding-left: 18px !important; padding-right: 18px !important; }
  .tp-card, .as-familiar-note, .feature-proof, .price-selling { padding-left: 14px !important; padding-right: 14px !important; }
  .ts-lane { padding-left: 10px !important; padding-right: 10px !important; }
  .ts-step { padding-left: 12px !important; padding-right: 12px !important; }
  .sector-tile { padding-left: 16px !important; padding-right: 16px !important; }
  .sector-trap { padding-left: 12px !important; padding-right: 12px !important; }
}