/* =====================================================================
   platform.html only. Shared rules live in assets/css/styles.css.
   Tokens only: no new colours, radii, shadows or type sizes here.
   ===================================================================== */

/* ---------- 0. Anchor offsets -------------------------------------
   The page carries a second sticky bar (the module nav) under the site
   header, so every in-page target needs a taller scroll margin than the
   global one. main.js uses scrollIntoView, which honours scroll-margin. */
[id]{scroll-margin-top:calc(var(--header-h) + 86px)}
@media (max-width:767.98px){ [id]{scroll-margin-top:calc(var(--header-h) + 76px)} }

/* ---------- 1. Hero ----------------------------------------------- */
.pf-hero__media{position:relative}
.pf-hero__media img{
  border-radius:var(--r-xl);box-shadow:var(--sh-lg);width:100%;
  aspect-ratio:4/3;object-fit:cover;
}
.pf-hero__media .float-chip{position:absolute;z-index:2}
.pf-chip--match{top:16px;left:-12px}
.pf-chip--check{right:-10px;bottom:20px}
@media (max-width:899.98px){
  .pf-chip--match{left:10px}
  .pf-chip--check{right:10px}
}
@media (max-width:479.98px){
  .pf-hero__media .float-chip{font-size:12px;padding:7px 11px}
}
.pf-hero__facts{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.pf-hero__facts li{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--fs-sm);color:var(--text-muted)}
.pf-hero__facts svg{width:17px;height:17px;color:var(--forest-500);flex:none}
.pf-hero__facts b{color:var(--ink-800)}

/* ---------- 2. Sticky module nav ----------------------------------- */
.pnav{
  position:sticky;top:var(--header-h);z-index:var(--z-sticky);
  background:rgba(255,255,255,.94);backdrop-filter:saturate(1.5) blur(12px);
  border-bottom:1px solid var(--line);
}
.pnav__inner{display:flex;align-items:center;gap:var(--sp-3);min-height:56px}
.pnav__label{
  flex:none;font-size:var(--fs-2xs);font-weight:700;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-subtle);
}
@media (max-width:899.98px){ .pnav__label{display:none} }
.pnav__list{
  display:flex;align-items:center;gap:4px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;padding-block:9px;margin-inline:calc(-1 * var(--sp-2));
  padding-inline:var(--sp-2);
}
.pnav__list::-webkit-scrollbar{display:none}
.pnav__list a{
  flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;
  border-radius:var(--r-pill);font-size:13.5px;font-weight:600;color:var(--ink-700);
  text-decoration:none;white-space:nowrap;border:1px solid transparent;
  transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);
}
.pnav__list a svg{width:15px;height:15px;color:var(--ink-400)}
.pnav__list a:hover{background:var(--saffron-50);color:var(--saffron-800);border-color:var(--saffron-200)}
.pnav__list a:hover svg{color:var(--saffron-700)}
.pnav__list a.is-current{background:var(--forest-700);color:#fff;border-color:var(--forest-700)}
.pnav__list a.is-current svg{color:var(--saffron-300)}

/* ---------- 5. Module section shell -------------------------------- */
.mod-head .eyebrow{margin-bottom:var(--sp-3)}
.mod-head h2{margin-bottom:var(--sp-4)}
.mod-head .lead{max-width:52ch}
.mod-points{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.mod-points li{display:flex;gap:10px;font-size:var(--fs-sm);color:var(--ink-700);margin:0;line-height:1.55}
.mod-points svg{width:18px;height:18px;color:var(--forest-500);flex:none;margin-top:2px}
.mod-cta{margin-top:var(--sp-8)}
.mod-note{
  display:flex;gap:9px;align-items:flex-start;margin-top:var(--sp-5);
  font-size:13px;color:var(--text-muted);line-height:1.6;
}
.mod-note svg{width:16px;height:16px;color:var(--saffron-700);flex:none;margin-top:3px}
.mod-media{position:relative;min-width:0}
.pf-ribbon-host{padding-bottom:0}

/* ---------- 6. ATS board ------------------------------------------- */
.ats-board{margin-top:clamp(24px,3vw,40px)}

/* ---------- 7. CRM photo ------------------------------------------- */
.crm-photo{position:relative}
.crm-photo img{border-radius:var(--r-xl);width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:var(--sh-lg)}
.crm-photo .float-chip{position:absolute;left:-10px;bottom:26px;max-width:calc(100% - 8px)}
@media (max-width:899.98px){ .crm-photo .float-chip{left:10px} }
.crm-strip{
  display:grid;gap:10px;grid-template-columns:minmax(0,1fr);margin-top:var(--sp-4);
}
@media (min-width:480px){ .crm-strip{grid-template-columns:repeat(3,minmax(0,1fr))} }
.crm-stat{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  padding:12px 14px;box-shadow:var(--sh-xs);
}
.crm-stat b{
  display:block;font-family:var(--font-head);font-size:19px;font-weight:700;color:var(--heading);
  line-height:1.1;font-variant-numeric:tabular-nums;
}
.crm-stat span{display:block;font-size:11.5px;color:var(--text-muted);margin-top:3px;line-height:1.35}

/* ---------- 8. Search mock ----------------------------------------- */
.search-mock .mock__body{padding:0}
.search-mock__grid{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){ .search-mock__grid{grid-template-columns:190px minmax(0,1fr)} }
.search-mock__rail{
  padding:var(--sp-4);background:var(--ink-50);border-bottom:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:14px;
}
@media (min-width:560px){
  .search-mock__rail{border-bottom:0;border-right:1px solid var(--line-soft)}
}
.search-mock__grp h4{
  font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-subtle);margin:0 0 8px;
}
.search-mock__opt{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-700);margin-bottom:6px}
.search-mock__opt:last-child{margin-bottom:0}
.search-mock__box{
  width:14px;height:14px;border-radius:4px;border:1.5px solid var(--line-strong);
  background:#fff;flex:none;display:grid;place-items:center;
}
.search-mock__box.is-on{background:var(--forest-600);border-color:var(--forest-600)}
.search-mock__box.is-on::after{
  content:"";width:7px;height:4px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px);
}
.search-mock__n{margin-left:auto;font-size:11px;color:var(--text-subtle);font-variant-numeric:tabular-nums}
.search-mock__results{padding:var(--sp-4) var(--sp-5)}
.search-mock__bar{
  display:flex;align-items:center;gap:9px;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);padding:9px 15px;font-size:13px;color:var(--ink-700);background:#fff;
}
.search-mock__bar svg{width:16px;height:16px;color:var(--ink-400);flex:none}
.search-mock__bar em{font-style:normal;color:var(--text-subtle)}
.search-mock__meta{font-size:11.5px;color:var(--text-subtle);margin:12px 0 2px}
.search-mock .rank-row__score{display:flex;align-items:center}

/* ---------- 9. Communication engine -------------------------------- */
.chan-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--sp-4)}
.chan{
  display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 12px;
  border-radius:var(--r-pill);border:1px solid var(--line-strong);background:#fff;
  font-size:12.5px;font-weight:600;color:var(--ink-700);
}
.chan svg{width:15px;height:15px;color:var(--forest-500);flex:none}
.chan--on{background:var(--forest-50);border-color:var(--forest-300);color:var(--forest-800)}
.tmpl{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-50);
  padding:14px 16px;font-size:13px;line-height:1.7;color:var(--ink-700);
}
.tmpl b{display:block;color:var(--saffron-800);font-weight:600;margin-bottom:6px;font-size:12px}
.var{
  background:var(--saffron-50);border:1px solid var(--saffron-200);color:var(--saffron-800);
  border-radius:6px;padding:0 5px;font-weight:600;font-size:12px;white-space:nowrap;
}
.send-log{display:flex;flex-direction:column;gap:2px;margin-top:var(--sp-4)}
.send-log__row{
  display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-muted);
  padding:8px 0;border-bottom:1px solid var(--line-soft);
}
.send-log__row:last-child{border-bottom:0}
.send-log__row svg{width:15px;height:15px;color:var(--forest-500);flex:none}
.send-log__row b{color:var(--ink-800);font-weight:600}
.send-log__row time{margin-left:auto;font-size:11px;color:var(--text-subtle);flex:none}

/* ---------- 10. Analytics dashboard -------------------------------- */
.dash{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){ .dash{grid-template-columns:repeat(2,minmax(0,1fr))} }
.dash__panel{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:var(--sp-4);
}
.dash__panel--full{grid-column:1/-1}
.dash__h{
  font-family:var(--font-body);font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-subtle);margin:0 0 12px;
}
.dash__kpi{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dash__num{
  font-family:var(--font-head);font-size:26px;font-weight:700;color:var(--heading);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.dash__delta{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--forest-600)}
.dash__delta svg{width:14px;height:14px}
.dash__donut{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.dash__legend{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink-700);min-width:140px}
.dash__legend span{display:flex;align-items:center;gap:8px}
.dash__legend i{width:10px;height:10px;border-radius:3px;flex:none}
.dash__legend em{font-style:normal;margin-left:auto;color:var(--text-subtle);font-variant-numeric:tabular-nums}
.sw-1{background:var(--saffron-500)} .sw-2{background:var(--forest-500)}
.sw-3{background:var(--forest-300)} .sw-4{background:var(--ink-200)}
.funnel{display:flex;flex-direction:column;gap:8px}
.funnel__row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-700)}
.funnel__label{width:82px;flex:none;color:var(--text-muted)}
.funnel__track{flex:1;min-width:0;height:18px;border-radius:5px;background:var(--ink-50);overflow:hidden}
.funnel__fill{display:block;height:100%;border-radius:5px;background:var(--grad-ribbon-green)}
.funnel__row:nth-child(2) .funnel__fill,.funnel__row:nth-child(4) .funnel__fill{background:var(--grad-ribbon-saffron)}
.funnel__val{width:46px;flex:none;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-800);font-weight:600}

/* ---------- 11. Background verification ---------------------------- */
.bgv-list{display:flex;flex-direction:column}
.bgv-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.bgv-row:last-child{border-bottom:0}
.bgv-row__icon{
  width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;
  background:var(--forest-50);color:var(--forest-600);
}
.bgv-row__icon svg{width:18px;height:18px}
.bgv-row__body{flex:1;min-width:0}
.bgv-row__name{font-size:14px;font-weight:600;color:var(--ink-800);margin:0;line-height:1.3}
.bgv-row__meta{font-size:12px;color:var(--text-muted);margin:3px 0 0;line-height:1.45}
.bgv-row .badge{flex:none}
.bgv-consent{
  display:flex;gap:9px;align-items:flex-start;margin-top:var(--sp-4);padding:11px 13px;
  border-radius:var(--r-md);border:1px solid var(--forest-200);background:var(--forest-50);
  font-size:12.5px;color:var(--ink-700);line-height:1.55;
}
.bgv-consent svg{width:16px;height:16px;color:var(--forest-600);flex:none;margin-top:2px}

/* ---------- 12. Video interviews ----------------------------------- */
.video-stage{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  background:var(--forest-950);border-radius:var(--r-lg);padding:10px;
}
.video-tile{
  position:relative;aspect-ratio:4/3;border-radius:var(--r-md);display:grid;place-items:center;
  background:linear-gradient(160deg,#173417,#0C1A0A);border:1px solid var(--line-dark);
}
.video-tile__name{
  position:absolute;left:8px;bottom:8px;font-size:11px;color:#fff;
  background:rgba(0,0,0,.45);padding:2px 9px;border-radius:var(--r-pill);
}
.video-tile__live{
  position:absolute;right:8px;top:8px;display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--saffron-500);color:var(--ink-900);padding:2px 8px;border-radius:var(--r-pill);
}
.video-bar{display:flex;gap:8px;justify-content:center;margin-top:10px}
.video-bar span{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:#fff;
}
.video-bar span svg{width:16px;height:16px}
.scorecard{margin-top:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;background:var(--surface)}
.scorecard h4{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-subtle);margin:0 0 10px;font-family:var(--font-body);font-weight:700}
.scorecard__row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-700);padding:6px 0}
.score-dots{display:flex;gap:4px;margin-left:auto;align-items:center}
.score-dots i{width:9px;height:9px;border-radius:50%;background:var(--ink-200);flex:none}
.score-dots i.is-on{background:var(--saffron-500)}
.score-dots b{font-size:11.5px;color:var(--ink-700);margin-left:6px;font-variant-numeric:tabular-nums}
.video-plat{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-4)}

/* ---------- 14. Roles and permissions table ------------------------ */
.perm-wrap{
  overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--surface);box-shadow:var(--sh-sm);
}
.perm{width:100%;min-width:720px;font-size:var(--fs-sm);border-collapse:collapse}
.perm th,.perm td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--line-soft);line-height:1.55}
.perm thead th{
  background:var(--surface-2);font-family:var(--font-head);font-size:13px;color:var(--heading);
  font-weight:600;white-space:nowrap;
}
.perm tbody th{font-family:var(--font-head);font-weight:600;color:var(--heading);white-space:nowrap}
.perm tbody th small{display:block;font-family:var(--font-body);font-weight:400;font-size:11.5px;color:var(--text-subtle);margin-top:3px;white-space:normal}
.perm td{color:var(--ink-700)}
.perm tbody tr:last-child th,.perm tbody tr:last-child td{border-bottom:0}
.perm-hint{font-size:12.5px;color:var(--text-subtle);margin-top:var(--sp-3)}

/* ---------- 15. Security band (the one dark section) --------------- */
.sec-grid{display:grid;gap:clamp(12px,1.6vw,18px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){ .sec-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.sec-tile{
  display:flex;flex-direction:column;gap:10px;padding:var(--sp-5);border-radius:var(--r-lg);
  background:rgba(255,255,255,.05);border:1px solid var(--line-dark);
}
.sec-tile h3{font-size:15px;margin:0;color:#fff}
.sec-tile p{font-size:12.5px;color:var(--text-on-dark-muted);margin:0;line-height:1.55}
.sec-honest{
  display:flex;gap:12px;align-items:flex-start;margin-top:var(--sp-8);padding:var(--sp-5);
  border-radius:var(--r-lg);border:1px solid rgba(245,151,61,.42);background:rgba(240,125,26,.1);
  font-size:var(--fs-sm);line-height:1.65;
}
.sec-honest svg{width:20px;height:20px;color:var(--saffron-300);flex:none;margin-top:2px}

/* ---------- 16. Integrations wall ---------------------------------- */
.integr{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){ .integr{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .integr{grid-template-columns:repeat(3,minmax(0,1fr))} }
.integr__group{
  border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);
  padding:var(--sp-5);box-shadow:var(--sh-xs);height:100%;
}
.integr__group h3{display:flex;align-items:center;gap:10px;font-size:15px;margin:0 0 var(--sp-4)}
.integr__group h3 svg{width:18px;height:18px;color:var(--saffron-700);flex:none}
.integr__items{display:flex;flex-wrap:wrap;gap:8px}
.int-chip{
  display:inline-flex;align-items:center;gap:8px;padding:7px 8px 7px 12px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--surface);font-size:13.5px;color:var(--ink-700);
}
.int-chip b{font-weight:600;color:var(--ink-800)}
.int-chip__st{
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--forest-700);background:var(--forest-50);border-radius:var(--r-pill);padding:3px 8px;
}
.int-chip--planned{border-style:dashed;background:var(--ink-50)}
.int-chip--planned .int-chip__st{color:var(--ink-700);background:var(--ink-100)}
.integr-note{
  display:flex;gap:9px;align-items:flex-start;margin-top:var(--sp-8);
  font-size:13px;color:var(--text-muted);line-height:1.6;max-width:78ch;
}
.integr-note svg{width:17px;height:17px;color:var(--saffron-700);flex:none;margin-top:3px}

/* ---------- 18. FAQ ------------------------------------------------ */
.pf-faq{display:grid;gap:clamp(24px,3.5vw,56px);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:900px){ .pf-faq{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)} }
.pf-faq__aside .lead{max-width:44ch}
@media (min-width:900px){
  .pf-faq__aside{position:sticky;top:calc(var(--header-h) + 88px)}
}

/* ---------- 19. Additions for the "Our technology" rewrite -------- */

/* Outcome cards sit in a plain .grid grid--4; give them even height. */
#outcomes .grid .card{height:100%}

/* Sub-heading inside a band, above the stage stepper. */
.pf-sub-h{
  font-size:var(--fs-h4);margin:clamp(40px,5vw,64px) 0 var(--sp-6);
  text-align:center;
}

/* The five ATS stages, marked up as an ordered list. */
.pf-stages{list-style:none;margin:0;padding:0}
.pf-stages .stepper__item{margin:0}
@media (min-width:900px){ .pf-stages .stepper__body p{font-size:13.5px} }

/* Security tiles carry the shared feature-tile icon. */
.sec-tile .feature-tile__icon{margin-bottom:2px}

/* The reporting dashboard: the counter number is wrapped in a span. */
.dash__num span{font:inherit;color:inherit;letter-spacing:inherit}
.dash__panel .chart-bars{margin-top:var(--sp-4)}
.dash__panel .mod-points{margin-top:var(--sp-4)}
.dash__panel .mod-points li{font-size:12.5px}
.dash__panel .mod-points svg{width:16px;height:16px;color:var(--saffron-700)}

/* Verification: the "what the report covers" card and its list. */
#bgv .card .mod-points li{font-size:13.5px}
#bgv .mod-media .card{margin-bottom:var(--sp-4)}

/* Candidate records: the photo block and its stat strip. */
.crm-photo + .crm-strip{margin-top:var(--sp-4)}
.crm-strip + .sample-note{margin-top:var(--sp-3)}

/* Communication: the WhatsApp card is centred on narrow screens. */
#communication .wa-card{max-width:100%}
@media (min-width:900px){ #communication .wa-card{margin-left:auto} }

/* Confidentiality table: let the hint sit under the scroller. */
.perm-wrap + .perm-hint{margin-top:var(--sp-4)}

/* Hero facts wrap to two lines on a phone without crowding the buttons. */
@media (max-width:479.98px){
  .pf-hero__facts{gap:8px 16px;margin-top:var(--sp-5)}
  .pf-hero__facts li{font-size:13px}
}

/* The sticky section nav must not overlap the hero rule when printing. */
@media print{ .pnav{display:none} }

/* ---------- 20. Fixes found in QA -------------------------------- */

/* The ribbon is absolutely positioned at the section's bottom edge, so the
   host section needs room for it instead of its usual bottom padding. */
.pf-ribbon-host{padding-bottom:clamp(140px,11vw,190px)}

/* Hero facts: one text run per item, so the flex gap does not open a space
   before the comma. */
.pf-hero__facts li>span{display:inline}

/* SHARED-COMPONENT OVERRIDE (see sharedRequests): .chart-bars sets
   align-items:flex-end, so the columns are not stretched and the percentage
   heights on .chart-bars__fill collapse to min-height. index.html has the
   same flat-bar bug. Local fix until styles.css carries it. */
.dash .chart-bars__col{align-self:stretch}

/* SHARED-COMPONENT OVERRIDE (see sharedRequests): .video-bar buttons are
   white-on-white when the bar sits on a light .mock__body. Park the bar on a
   dark strip under the video stage instead. */
#video .video-stage{border-radius:var(--r-lg) var(--r-lg) 0 0;padding-bottom:0}
#video .video-bar{
  margin-top:0;padding:10px;background:var(--forest-950);
  border-radius:0 0 var(--r-lg) var(--r-lg);
}

/* Verification: the two columns are different lengths, so align them to the top. */
#bgv .duo{align-items:flex-start}

/* Communication: keep the WhatsApp bubble bubble-sized. */
#communication .wa-card{max-width:min(100%,420px)}