/* ============================================================================
   deck.css: the section grammar of the website copy deck (Draft 1, 15 Sept 2026)
   Loaded after styles.css on every page. One class family per section type, so
   every page assembles from the same parts: bar, nav, proof line, big sentence,
   product modules, feature rows, counter block, Accelerate cards, FAQ, closing
   band, footer, cookie banner. Chips carry the only three semantic colours.
   ============================================================================ */

:root {
  --proven: #168264; --claimed: #C47A21; --missing: #B94751;
  --proven-bg: rgba(22,130,100,.11); --claimed-bg: rgba(196,122,33,.12); --missing-bg: rgba(185,71,81,.10);
  --sect-pad: 94px;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- container + bands ---------- */
body.dk .wrap { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
.band { padding: var(--sect-pad) 0; background: var(--paper); position: relative; }
.band--2 { background: var(--paper-2); }
.band--navy { background: var(--navy); color: #fff; }
.band--white { background: #fff; }
.band--tight { padding: clamp(48px, 7vh, 72px) 0; }
@media (max-width: 760px) { :root { --sect-pad: 64px; } }

/* ---------- type ---------- */
.eb { display: block; font: 700 13.5px/1.2 var(--font-display); color: var(--cobalt-dp); letter-spacing: .01em; margin: 0 0 14px; }
.band--navy .eb { color: var(--ice); }
.h1 { font: 400 clamp(38px, 5.1vw, 74px)/1.02 var(--font-display); letter-spacing: -.03em; color: var(--ink); margin: 0; text-wrap: balance; }
.h1 b { font-weight: 900; }
.h1--md { font-size: clamp(34px, 4.4vw, 64px); }
body.dk .h2 { font: 900 clamp(30px, 3.6vw, 48px)/1.05 var(--font-display); letter-spacing: -.03em; color: var(--ink); margin: 0; text-wrap: balance; }
.band--navy .h2, .band--navy .h1 { color: #fff; }
body.dk .sub { font: 500 clamp(16px, 1.45vw, 19px)/1.55 var(--font-body); color: var(--body); max-width: 58ch; margin: 18px 0 0; text-wrap: pretty; }
.band--navy .sub { color: rgba(255,255,255,.76); }
.sec-head { max-width: 780px; margin: 0 auto clamp(36px, 5vh, 56px); text-align: center; }
.sec-head--left { margin-left: 0; text-align: left; }
.sec-head .eb { margin-bottom: 12px; }
.sec-head .sub { margin-left: auto; margin-right: auto; }
.golink { display: inline-flex; align-items: center; gap: 6px; font: 650 15.5px/1 var(--font-display); color: var(--cobalt-dp); margin-top: 22px; transition: gap .25s var(--ease); }
.golink:hover { gap: 10px; }
.band--navy .golink { color: var(--ice); }
.note-ex { display: inline-block; font: 600 11.5px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; }
.band--navy .note-ex { color: rgba(255,255,255,.62); border-color: rgba(255,255,255,.2); }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--font-body); padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.chip--proven { background: var(--proven-bg); color: var(--proven); }
.chip--claimed { background: var(--claimed-bg); color: var(--claimed); }
.chip--missing { background: var(--missing-bg); color: var(--missing); box-shadow: inset 0 0 0 1px rgba(185,71,81,.35); }
.chip--neutral { background: rgba(20,33,63,.07); color: var(--body); }
/* Mark, 2026-09-16: no white pills on a photograph. This is the house glass from
   sections.css (.gcard--thin): a dark tint, a white specular on the top edge, a lit rim. */
.gchip { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px;
  background: rgba(10,12,16,.30); -webkit-backdrop-filter: blur(9px) saturate(140%); backdrop-filter: blur(9px) saturate(140%);
  font: 700 12.5px/1 var(--font-display); color: #fff;
  box-shadow: inset 0 1.2px 0 rgba(255,255,255,.26), inset 0 0 0 1.2px rgba(255,255,255,.22), 4px 8px 20px rgba(0,0,0,.30); }

/* ---------- announcement bar (1.1) and nav (1.2) ----------
   The pre-deck behaviour in styles.css stands: over a dark hero the bar is a translucent band of the
   same wall and the nav is transparent with white text; on light pages (body.light-nav) and once any
   page scrolls, both are paper with a hairline. The deck build had forced a navy bar and a white nav
   on every page, which broke the home hero (Mark, 2026-09-15). */
.topbar__m { display: none; }
@media (max-width: 640px) {
  .topbar__t, .topbar__l { display: none; }
  .topbar__m { display: inline; font-weight: 600; }
}
body.no-bar .topbar { display: none; }
body.no-bar { --tbo: 0px !important; --tb-h: 0px; }
body.light-nav .topbar { background: var(--paper); color: var(--body); border-bottom-color: var(--line-soft); }
body.light-nav .topbar:hover { background: var(--paper-2); }
body.light-nav .topbar .topbar__l { color: var(--cobalt-dp); text-decoration-color: rgba(30,58,186,.45); }
body.light-nav .nav { background: var(--paper); border-bottom-color: var(--line-soft); }
body.light-nav .nav__logo { background: var(--grad-blue); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
body.light-nav .nav__logo b { color: transparent; -webkit-text-fill-color: transparent; }
body.light-nav .nav__mark { background: var(--grad-blue); }
body.light-nav .nav__link { color: var(--ink); }
body.light-nav .nav__link:hover, body.light-nav .nav__link.active { background: rgba(20,33,63,.05); }
body.light-nav .nav__login { color: var(--body); }
body.light-nav .nav .btn--sm { background: var(--grad-blue); color: #fff; }
body.light-nav .nav .btn--sm:hover { background: var(--grad-emerald); color: var(--ink); }
body.light-nav .nav__lang { color: var(--body); border-color: var(--line-soft); }
body.light-nav .nav__lang:hover { color: var(--ink); border-color: var(--cobalt); background: rgba(47,107,235,.06); }
body.light-nav .mobile-nav-toggle { color: var(--ink); background: rgba(255,255,255,.72); border-color: rgba(20,33,63,.12); }
.nav__app { display: none; }
body.cand-page .nav__app { display: inline-flex; }
body.cand-page .nav__demo { display: none; }

/* three-column mega menus with a featured card */
.nav-menu--cols { display: grid; grid-template-columns: 250px 250px 262px; gap: 10px; padding: 10px; align-items: start; }
.nav-menu--cols .m-col + .m-col { margin-left: 0; padding-left: 0; border-left: 0; }
.nav-menu--cols .m-col__h { padding: 10px 12px 4px; }
.nav-menu--cols .m-link { padding: 10px 12px; border-radius: 12px; }
.nav-menu--cols .m-link .m-tx .t { font-size: 14.5px; font-weight: 650; }
.nav-menu--cols .m-link .m-tx .s { font-size: 12.5px; color: var(--mute); line-height: 1.35; }
.nav-menu--cols .m-link--plain { padding: 7px 12px; }
.nav-menu--cols .m-link--go .t { color: var(--cobalt-dp); }
.m-feat { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 100%; padding: 20px 18px; border-radius: 16px; color: #fff;
  background: radial-gradient(80% 90% at 14% 0%, rgba(47,107,235,.5), transparent 62%), linear-gradient(160deg, #1a2f6b, #0B1440); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); transition: transform .35s var(--ease); }
.m-feat:hover { transform: translateY(-2px); }
.m-feat--talent { background: radial-gradient(80% 90% at 90% 0%, rgba(152,249,214,.28), transparent 62%), linear-gradient(160deg, #143e6a, #0B1440); }
.m-feat__k { font: 700 11.5px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ice); }
.m-feat__t { font: 800 17px/1.2 var(--font-display); letter-spacing: -.015em; }
.m-feat__go { font: 650 13.5px/1 var(--font-display); color: var(--ice); margin-top: 4px; }

/* mobile drawer: three groups as accordions */
@media (max-width: 1024px) {
  .mobile-nav__group.is-acc h2 { text-align: left; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0; }
  .mobile-nav__group.is-acc h2 button { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 14px 4px; font: 700 16px/1 var(--font-display); color: var(--ink); border-bottom: 1px solid var(--line-soft); }
  .mobile-nav__group.is-acc h2 button::after { content: ""; width: 8px; height: 8px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); transition: transform .2s var(--ease); opacity: .7; }
  .mobile-nav__group.is-acc.open h2 button::after { transform: rotate(-135deg); }
  .mobile-nav__group.is-acc .mobile-nav__links { display: none; padding: 10px 0 6px; grid-template-columns: 1fr; }
  .mobile-nav__group.is-acc.open .mobile-nav__links { display: grid; }
  .mobile-nav__group.is-acc { margin-top: 0; }
  .mobile-nav__pricing { display: flex; align-items: center; min-height: 50px; padding: 0 4px; font: 700 16px/1 var(--font-display); color: var(--ink); border-bottom: 1px solid var(--line-soft); }
}

/* ---------- proof line (2.2) ---------- */
.proof { padding: 26px 0; background: var(--paper); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.proof p { margin: 0; text-align: center; font: 500 15px/1.5 var(--font-body); color: var(--mute); letter-spacing: .005em; }

/* ---------- the big sentence (2.3) ---------- */
.bigs { padding: clamp(72px, 10vh, 120px) 0; background: var(--paper); }
.bigs p { margin: 0 auto; max-width: 980px; text-align: center; font: 500 clamp(24px, 2.6vw, 34px)/1.35 var(--font-display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.bigs p .w { color: rgba(11,20,64,.22); transition: color .35s var(--ease); }
.bigs p .w.lit { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .bigs p .w { color: var(--ink); } }

/* ---------- product modules (2.4 to 2.9) ---------- */
.pmod { padding: clamp(64px, 9vh, 104px) 0; }
.pmod__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.pmod--flip .pmod__txt { order: 2; }
.pmod__txt h2 { font: 900 clamp(30px, 3.4vw, 46px)/1.05 var(--font-display); letter-spacing: -.03em; color: var(--ink); margin: 0 0 16px; text-wrap: balance; }
.pmod__txt p { font: 500 17.5px/1.58 var(--font-body); color: var(--body); max-width: 46ch; margin: 0; }
.pmod__media { position: relative; }
.pmod__frame { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 680 / 510; padding: 22px;
  background: radial-gradient(56% 64% at 104% 16%, rgba(47,107,235,.17), transparent 62%), radial-gradient(48% 56% at -6% 96%, rgba(11,20,64,.13), transparent 60%), radial-gradient(70% 40% at 50% 100%, rgba(236,230,216,.9), transparent 70%), #F2EDE3;
  box-shadow: inset 0 0 0 1px rgba(20,33,63,.06), 0 30px 60px -32px rgba(20,33,63,.28); display: grid; place-items: center; }
.pmod__frame > .note-ex { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.7); }
@media (max-width: 860px) {
  .pmod__grid { grid-template-columns: 1fr; gap: 28px; }
  .pmod--flip .pmod__txt { order: 0; }
  .pmod__frame { aspect-ratio: 4 / 5; padding: 16px; }
}

/* the six loops: small artifacts that prove each module's claim */
.loop { width: 100%; max-width: 520px; font-family: var(--font-body); color: var(--ink); }
.sheet { background: rgba(255,255,255,.66); -webkit-backdrop-filter: blur(12px) saturate(125%); backdrop-filter: blur(12px) saturate(125%); border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 1px 2px rgba(20,33,63,.06), 4px 12px 28px -14px rgba(20,33,63,.34); position: relative; }
.sheet::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(135deg, rgba(20,33,63,.06), rgba(20,33,63,.22)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.loop [data-step] { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.loop.play [data-step] { opacity: 1; transform: none; }
.loop.play [data-step="1"] { transition-delay: .3s; } .loop.play [data-step="2"] { transition-delay: 1.5s; } .loop.play [data-step="3"] { transition-delay: 2.7s; }
.loop.play [data-step="4"] { transition-delay: 3.3s; } .loop.play [data-step="5"] { transition-delay: 3.9s; } .loop.play [data-step="6"] { transition-delay: 4.6s; }
@media (prefers-reduced-motion: reduce) { .loop [data-step] { opacity: 1; transform: none; transition: none; } }
/* 1 sourcer chat */
.lp-chat { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.lp-chat__me { align-self: flex-end; max-width: 88%; background: var(--ink); color: #fff; border-radius: 14px 14px 4px 14px; padding: 10px 13px; font-size: 13.5px; line-height: 1.4; }
.lp-chat__ai { align-self: flex-start; max-width: 92%; background: #fff; border-radius: 14px 14px 14px 4px; padding: 10px 13px; font-size: 13.5px; line-height: 1.4; box-shadow: 0 1px 2px rgba(20,33,63,.08); }
.lp-cand { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; background: #fff; border-radius: 12px; padding: 9px 11px; box-shadow: 0 1px 2px rgba(20,33,63,.08); }
.lp-cand img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.lp-cand b { display: block; font-size: 13.5px; font-weight: 700; }
.lp-cand span { display: block; font-size: 12px; color: var(--mute); }
/* 2 interviewer */
.lp-int { display: grid; grid-template-columns: 116px 1fr; gap: 14px; padding: 16px; align-items: start; }
.lp-int__face { width: 116px; height: 140px; border-radius: 12px; object-fit: cover; }
.lp-int__wave { display: flex; align-items: center; gap: 2px; height: 34px; margin-bottom: 12px; }
.lp-int__wave i { flex: 1; height: var(--h, 40%); border-radius: 2px; background: rgba(47,107,235,.35); }
.loop.play .lp-int__wave i { animation: lpWave 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.07s); }
@keyframes lpWave { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
.lp-int__chips { display: flex; flex-direction: column; gap: 7px; }
.lp-int__chip { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff; border-radius: 10px; padding: 8px 11px; font-size: 13px; font-weight: 600; box-shadow: 0 1px 2px rgba(20,33,63,.08); }
.lp-int__chip em { font-style: normal; font: 700 11.5px/1 var(--font-body); color: var(--cobalt-dp); background: rgba(47,107,235,.1); padding: 4px 7px; border-radius: 999px; }
/* 3 match */
.lp-match { padding: 16px; }
.lp-match__hd { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.lp-match__hd span { font-weight: 600; color: var(--mute); }
.lp-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px; font-weight: 600; }
.lp-row:first-of-type { border-top: 0; }
.lp-row i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--proven-bg); color: var(--proven); }
.lp-row i svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 3; fill: none; }
.lp-row--miss i { background: var(--missing-bg); color: var(--missing); }
.lp-row small { font-size: 11.5px; color: var(--mute); font-weight: 500; }
/* 4 passport */
.lp-pass { padding: 18px; width: min(100%, 380px); transform: rotate(-2deg); }
.lp-pass__hd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lp-pass__hd img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.lp-pass__hd b { display: block; font-size: 14px; }
.lp-pass__hd span { font-size: 12px; color: var(--mute); }
.lp-pass__row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px; font-weight: 600; }
.lp-pass__row .chip { position: relative; }
.lp-flip { position: relative; display: inline-grid; }
.lp-flip .chip { grid-area: 1 / 1; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.lp-flip .chip--proven { opacity: 0; transform: translateY(6px); }
.loop.play .lp-flip .chip--proven { opacity: 1; transform: none; }
.loop.play .lp-flip .chip--claimed { opacity: 0; transform: translateY(-6px); }
.loop.play .lp-flip[data-at="1"] .chip { transition-delay: 1.4s; } .loop.play .lp-flip[data-at="2"] .chip { transition-delay: 2.6s; }
@media (max-width: 860px) { .lp-pass { transform: none; } }
/* 5 ats board */
.lp-ats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 14px; width: 100%; max-width: 560px; }
.lp-ats__col { background: rgba(255,255,255,.55); border-radius: 10px; padding: 8px 7px; min-height: 150px; }
.lp-ats__col i { display: block; font: 700 10.5px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-ats__ghost { height: 22px; border-radius: 6px; background: rgba(20,33,63,.08); margin-bottom: 6px; }
.lp-ats__card { position: relative; background: #fff; border-radius: 7px; padding: 6px 7px; font-size: 11px; font-weight: 700; box-shadow: 0 2px 6px rgba(20,33,63,.14); margin-bottom: 6px; }
.lp-ats__card small { display: block; font-size: 10px; font-weight: 600; color: var(--proven); }
.lp-ats__mover { position: absolute; left: 0; top: 0; width: 100%; }
.loop.play .lp-ats__mover { animation: lpMove 6s var(--ease) infinite; }
@keyframes lpMove { 0%, 20% { transform: translate(0, 0); } 40%, 100% { transform: translate(calc(100% + 8px), 0); } }
.lp-ats__starts { opacity: 0; }
.loop.play .lp-ats__starts { animation: lpStarts 6s var(--ease) infinite; }
@keyframes lpStarts { 0%, 45% { opacity: 0; } 55%, 100% { opacity: 1; } }
/* 6 sector cards */
.lp-sect { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; }
.lp-sect a, .lp-sect div { position: relative; aspect-ratio: 3 / 4.6; border-radius: 12px; overflow: hidden; }
.lp-sect img { width: 100%; height: 100%; object-fit: cover; }
.lp-sect b { position: absolute; left: 8px; right: 8px; bottom: 8px; color: #fff; font: 700 12px/1.15 var(--font-display); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
@media (max-width: 860px) { .lp-sect { grid-template-columns: repeat(5, 120px); overflow-x: auto; padding-bottom: 6px; } .lp-ats { grid-template-columns: repeat(5, 92px); overflow-x: auto; } }

/* ---------- counter block (2.10) ---------- */
.count { padding: var(--sect-pad) 0; background: var(--paper); }
.count__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.count__list { display: flex; flex-direction: column; gap: 6px; }
.count__item { display: grid; grid-template-columns: 1fr; text-align: right; padding: 16px 0; border-top: 1px solid var(--line-soft); }
.count__item:first-child { border-top: 0; }
.count__n { font: 900 clamp(48px, 6vw, 84px)/1 var(--font-display); letter-spacing: -.04em; color: var(--ink); }
.count__l { font: 500 15.5px/1.4 var(--font-body); color: var(--body); margin-top: 6px; }
@media (max-width: 760px) { .count__grid { grid-template-columns: 1fr; } .count__list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .count__item { text-align: left; border: 0; padding: 0; } .count__n { font-size: 48px; } }

/* ---------- Accelerate cards (2.11) ---------- */
/* Mark, 2026-09-16: this band carries the three photographs the site is judged on, so it is the
   one band allowed to run wider than the 1240 column and taller than the standard section. */
body.dk .acc { padding: clamp(96px, 12vh, 132px) 0; }
/* wider than the 1240 column, but never closer to the window edge than 50px, and never narrower
   than the rows above it on a small laptop. */
@media (min-width: 861px) { body.dk .acc > .wrap {
  width: max(min(1240px, calc(100% - 48px)), min(1400px, calc(100% - 100px))); } }
.acc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.acc__card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-soft); }
.acc__pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.acc__pic img { width: 100%; height: 100%; object-fit: cover; }
.acc__card h3 { font: 800 clamp(21px, 1.6vw, 24px)/1.14 var(--font-display); letter-spacing: -.02em; color: var(--ink); margin: 24px 26px 9px; }
.acc__card p { font: 500 15.5px/1.55 var(--font-body); color: var(--body); margin: 0 26px 28px; }
/* Mark, 2026-09-16: the people stand on the left of all three frames, so the label goes to the
   quiet right-hand side. Scoped to these cards; the chip stays bottom-left everywhere else. */
.acc__pic .gchip { left: auto; right: 16px; bottom: 16px; }
/* Mark, 2026-09-16: the card held 4:3 on a desktop and 16:9 below 860px, which threw away
   66.8% of the photograph on a phone. One ratio, held at every width, so the frame ships whole. */
@media (max-width: 860px) { .acc__grid { grid-template-columns: 1fr; gap: 22px; } }

/* ---------- the final call (2.13) ---------- */
.final { padding: var(--sect-pad) 0; background: var(--paper); }
.final__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.final__list { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 28px; margin: 0; padding: 0; list-style: none; }
.final__list li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; font: 500 15.5px/1.5 var(--font-body); color: var(--body); }
.final__list li b { color: var(--ink); font-weight: 700; }
.final__ic { width: 30px; height: 30px; border-radius: 9px; background: rgba(47,107,235,.1); color: var(--cobalt-dp); display: grid; place-items: center; }
.final__ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) { .final__grid { grid-template-columns: 1fr; } .final__list { grid-template-columns: 1fr; } }

/* ---------- resources (2.14) ---------- */
.res { padding: var(--sect-pad) 0; background: var(--paper-2); }
.res__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; }
.res__wp { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; padding: 26px; border-radius: 20px; color: #fff;
  background: radial-gradient(80% 90% at 14% 0%, rgba(47,107,235,.5), transparent 62%), linear-gradient(160deg, #1a2f6b, #0B1440); }
.res__cover { aspect-ratio: 3 / 4; border-radius: 6px; background: linear-gradient(160deg, #F8F3E9, #DCE6F6); box-shadow: 4px 10px 24px -8px rgba(0,0,0,.5); padding: 10px; display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); }
.res__cover b { font: 900 11px/1.15 var(--font-display); letter-spacing: -.02em; }
.res__cover i { display: block; height: 3px; width: 60%; background: rgba(11,20,64,.25); border-radius: 2px; margin-top: 3px; }
.res__wp .eb { color: var(--ice); margin-bottom: 8px; }
.res__wp h3 { font: 800 clamp(20px, 2vw, 26px)/1.15 var(--font-display); letter-spacing: -.02em; margin: 0 0 12px; }
.res__wp .golink { color: var(--ice); margin-top: 4px; }
.res__art { display: flex; flex-direction: column; justify-content: space-between; min-height: 230px; padding: 24px; border-radius: 20px; background: var(--navy); color: #fff; transition: transform .35s var(--ease); }
.res__art:hover { transform: translateY(-3px); }
.res__art .eb { color: var(--ice); margin-bottom: 30px; }
.res__art h3 { font: 800 clamp(18px, 1.7vw, 22px)/1.2 var(--font-display); letter-spacing: -.02em; margin: 0; }
@media (max-width: 900px) { .res__grid { grid-template-columns: 1fr; } .res__wp { grid-template-columns: 96px 1fr; } }

/* ---------- closing band (2.15) ---------- */
.close { background: var(--navy); color: #fff; padding: 96px 0; }
.close__in { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.close__h { font: 400 clamp(36px, 4.8vw, 68px)/1.04 var(--font-display); letter-spacing: -.03em; color: #fff; margin: 0; }
.close__h b { font-weight: 900; }
.close__btn { flex: none; }
@media (max-width: 760px) { .close { padding: 72px 0; } .close__in { flex-direction: column; align-items: stretch; } .close__btn { width: 100%; justify-content: center; } }

/* ---------- footer (1.3) ---------- */
.footer.ft { margin-top: 0; border-radius: 0; padding: 64px 0 32px; border-top: 1px solid rgba(255,255,255,.1); }
.ft__top { display: grid; grid-template-columns: minmax(260px, 1.1fr) 2.4fr; gap: 48px; margin-bottom: 40px; }
.ft__brand { display: flex; flex-direction: column; gap: 22px; }
.ft__news b { display: block; font: 800 18px/1.2 var(--font-display); letter-spacing: -.01em; margin-bottom: 6px; }
.ft__news > span { display: block; font-size: 14px; color: rgba(255,255,255,.66); margin-bottom: 14px; }
.ft__form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ft__form input { flex: 1 1 200px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 11px; padding: 12px 14px; font: 500 14px/1 var(--font-body); color: #fff; outline: none; }
.ft__form input::placeholder { color: rgba(255,255,255,.46); }
.ft__form input:focus { border-color: rgba(255,255,255,.4); }
.ft__form button { background: #fff; color: var(--ink); border-radius: 11px; padding: 12px 18px; font: 700 14px/1 var(--font-display); }
.ft__form button:hover { background: var(--grad-emerald); }
.ft__ok { font-size: 13px; color: var(--ice); }
.ft__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ft__col h6 { font: 700 12px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 14px; }
.ft__col a { display: block; font-size: 14px; color: rgba(255,255,255,.76); padding: 4px 0; transition: color .2s; }
.ft__col a:hover { color: #fff; }
.ft__legal { display: flex; gap: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.ft__legal a { font-size: 13px; color: rgba(255,255,255,.7); }
.ft__legal a:hover { color: #fff; }
.ft__company { margin: 14px 0 0; font-size: 12.5px; color: rgba(255,255,255,.55); }
.ft__line { margin: 6px 0 0; font-size: 12.5px; color: rgba(255,255,255,.55); }
@media (max-width: 900px) { .ft__top { grid-template-columns: 1fr; gap: 32px; } .ft__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ft__cols { grid-template-columns: 1fr; } .ft__legal { flex-wrap: wrap; gap: 14px; } }

/* ---------- cookie banner (1.4) ---------- */
.cookie { position: fixed; left: 20px; bottom: 20px; z-index: 80; width: 420px; max-width: calc(100% - 40px); padding: 20px 22px; border-radius: 18px; background: #fff; color: var(--ink);
  box-shadow: 0 30px 70px -30px rgba(20,33,63,.45), 0 2px 6px rgba(20,33,63,.08); border: 1px solid var(--line-soft); }
.cookie[hidden] { display: none; }
.cookie b { display: block; font: 800 16px/1.2 var(--font-display); margin-bottom: 6px; }
.cookie p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--body); }
.cookie__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie__btn { flex: 1 1 auto; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font: 700 13.5px/1 var(--font-display); color: var(--ink); text-align: center; cursor: pointer; }
.cookie__btn:hover { background: var(--paper-2); }
@media (max-width: 640px) { .cookie { left: 0; right: 0; bottom: 0; width: auto; max-width: none; border-radius: 18px 18px 0 0; } }

/* ---------- quotes carousel (4.11), hidden until consent ---------- */
.quotes__slide { display: grid; grid-template-columns: 120px 1fr; gap: 28px; align-items: center; margin: 0; }
.quotes__face { width: 120px; height: 120px; border-radius: 16px; object-fit: cover; }
.quotes__q { margin: 0; font: 600 clamp(20px, 2.2vw, 28px)/1.35 var(--font-display); letter-spacing: -.02em; }
.quotes__who b { display: block; }
.quotes__who span { color: var(--mute); font-size: 14px; }

/* ---------- product hero (4.1) ---------- */
.phero { padding: calc(var(--tbo, 32px) + 130px) 0 0; background: var(--paper); text-align: center; }
.phero .eb { margin-bottom: 18px; }
.phero .eb b { font-weight: 800; color: var(--ink); }
.phero .h1 { margin: 0 auto; max-width: 18ch; }
.phero .sub { margin: 20px auto 0; max-width: 60ch; }
.phero__cta { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* Mark, 2026-09-16: a UI stage has two grounds and no third. The beige one is the
   home page's Match and Passport panel (.plx-media--panel); the deep blue one is
   this. The bright cobalt ramp that used to be here was never part of the site and
   is gone. Both grounds carry the same glass surround. */
.phero__stage { margin: clamp(40px, 6vh, 64px) auto 0; width: min(1280px, calc(100% - 48px)); border-radius: 26px; overflow: hidden; position: relative;
  background:
    radial-gradient(56% 64% at 104% 14%, rgba(47,107,235,.38), transparent 62%),
    radial-gradient(52% 62% at -6% 108%, rgba(47,107,235,.22), transparent 64%),
    linear-gradient(158deg, #16265F 0%, #0B1440 100%);
  box-shadow: 0 40px 80px -40px rgba(11,20,64,.55); }
.phero__stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px); }
.phero__stage::after { content: ""; position: absolute; inset: 14px; border-radius: 18px; z-index: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(7px) saturate(112%); backdrop-filter: blur(7px) saturate(112%);
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.02) 42%, rgba(255,255,255,.06));
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.22), inset 0 -1.5px 0 rgba(0,0,0,.20), 0 24px 56px -34px rgba(0,0,0,.5), inset 0 0 0 1.5px rgba(255,255,255,.13); }
.phero__stage > * { position: relative; z-index: 1; }
.phero__stage--photo::after { display: none; }
.phero__inner { position: relative; padding: clamp(24px, 4vw, 48px); display: grid; place-items: center; min-height: min(560px, 46vw); }
.phero--photo { text-align: left; padding-top: 0; }
.phero--photo .phero__pic { position: relative; min-height: min(100svh, 820px); display: flex; align-items: center; }
.phero--photo .phero__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero--photo .phero__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,20,64,.05) 30%, rgba(11,20,64,.72) 100%); }
.phero--photo .phero__copy { position: relative; z-index: 2; margin-left: auto; max-width: 560px; color: #fff; padding: calc(var(--tbo, 40px) + 120px) 0 80px; }
.phero--photo .phero__copy .eb { color: var(--ice); }
.phero--photo .phero__copy .h1 { color: #fff; max-width: none; margin: 0; }
.phero--photo .phero__copy .sub { color: rgba(255,255,255,.82); margin-left: 0; }
.phero--photo .phero__cta { justify-content: flex-start; }
.phero--photo .h1 { font-size: clamp(36px, 4.6vw, 64px); }
.phero__small { margin-top: 12px; font-size: 13.5px; color: var(--mute); }
.phero--photo .phero__small { color: rgba(255,255,255,.7); }
.phero__glass { position: absolute; left: 24px; bottom: 24px; z-index: 3; }
@media (max-width: 760px) {
  .phero { padding-top: calc(var(--tbo, 36px) + 100px); }
  .phero__inner { min-height: 0; }
  .phero__stage { aspect-ratio: 4 / 5; }
  .phero--photo .phero__pic { min-height: 0; display: block; }
  .phero--photo .phero__pic img { position: relative; height: auto; aspect-ratio: 4 / 5; }
  .phero--photo .phero__pic::after { display: none; }
  .phero--photo .phero__copy { color: var(--ink); padding: 28px 0 0; max-width: none; }
  .phero--photo .phero__copy .h1 { color: var(--ink); }
  .phero--photo .phero__copy .sub { color: var(--body); }
  .phero--photo .phero__copy .eb { color: var(--cobalt-dp); }
  .phero--photo .phero__cta .btn { width: 100%; justify-content: center; }
  .phero__glass { display: none; }
}

/* ---------- feature rows on a pastel tile (4.4 and family) ---------- */
.feat { padding: var(--sect-pad) 0; }
.feat__row { display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.feat__row + .feat__row { margin-top: clamp(56px, 9vh, 110px); }
.feat__row--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 4.6fr); }
.feat__row--flip .feat__txt { order: 2; }
.feat__txt h3 { font: 800 clamp(28px, 3.1vw, 42px)/1.05 var(--font-display); letter-spacing: -.025em; color: var(--ink); margin: 0 0 14px; text-wrap: balance; }
.feat__txt p { font: 500 17px/1.58 var(--font-body); color: var(--body); max-width: 46ch; margin: 0; }
.feat__vis { position: relative; border-radius: 22px; overflow: hidden; padding: clamp(18px, 3vw, 34px); display: grid; place-items: center; min-height: 360px;
  background: radial-gradient(56% 64% at 104% 16%, rgba(47,107,235,.15), transparent 62%), radial-gradient(48% 56% at -6% 96%, rgba(11,20,64,.12), transparent 60%), #EEF2F8;
  box-shadow: inset 0 0 0 1px rgba(20,33,63,.06); }
.feat__vis--sand { background: radial-gradient(56% 64% at 104% 16%, rgba(196,122,33,.12), transparent 62%), radial-gradient(48% 56% at -6% 96%, rgba(11,20,64,.1), transparent 60%), #F3EEE3; }
.feat__vis--sage { background: radial-gradient(56% 64% at 104% 16%, rgba(22,130,100,.14), transparent 62%), radial-gradient(48% 56% at -6% 96%, rgba(11,20,64,.1), transparent 60%), #EAF2EE; }
.feat__vis--photo { padding: 0; }
.feat__vis--photo img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.feat__vis > .note-ex { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.7); }
@media (max-width: 860px) {
  .feat__row, .feat__row--flip { grid-template-columns: 1fr; gap: 24px; }
  .feat__row--flip .feat__txt { order: 0; }
  .feat__vis { min-height: 260px; }
}

/* ---------- product in motion (4.9) ---------- */
.motion { padding: var(--sect-pad) 0; background: var(--paper); }
.motion__stage { margin: clamp(32px, 5vh, 52px) auto 0; width: min(1280px, 100%); border-radius: 26px; overflow: hidden; position: relative; aspect-ratio: 16 / 9;
  background: radial-gradient(70% 90% at 12% 0%, rgba(47,107,235,.55), transparent 60%), linear-gradient(160deg, #17307a, #0B1440); box-shadow: 0 40px 80px -40px rgba(11,20,64,.6); display: grid; place-items: center; }
.motion__stage video, .motion__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .motion__stage { aspect-ratio: 1080 / 1092; } }

/* ---------- FAQ (3.10 and family): "FAQ" left, accordion right ---------- */
body.dk .faq { padding: var(--sect-pad) 0; background: var(--paper-2); }
body.dk .faq .wrap { display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: start; }
body.dk .faq__head h2 { font: 900 clamp(30px, 3.6vw, 48px)/1.05 var(--font-display); letter-spacing: -.03em; color: var(--ink); margin: 0; }
body.dk .faq__head p { margin: 14px 0 0; font-size: 15.5px; color: var(--body); }
body.dk .faq-item__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 18px 2px; text-align: left; font: 700 17px/1.35 var(--font-display); color: var(--ink); }
body.dk .faq-item__a p { font-size: 15.5px; line-height: 1.6; color: var(--body); padding: 0 36px 20px 2px; margin: 0; }
body.dk .faq-item { border-bottom: 1px solid var(--line); }
body.dk .faq-item:first-child { border-top: 1px solid var(--line); }
body.dk .faq-item__q .icon { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease); }
body.dk .faq-item.open .faq-item__q .icon { transform: rotate(45deg); }
body.dk .faq-item__a { overflow: hidden; max-height: 0; transition: max-height .45s var(--ease); }
.faq-group { scroll-margin-top: 120px; }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group__h { font: 800 22px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ink); margin: 0 0 8px; }
.faq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.faq-chips a { display: inline-flex; align-items: center; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 650 13.5px/1 var(--font-display); color: var(--ink); }
.faq-chips a:hover { border-color: var(--cobalt); color: var(--cobalt-dp); }
@media (max-width: 860px) { body.dk .faq .wrap { grid-template-columns: 1fr; gap: 28px; } .faq-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; } }

/* ---------- five numbered cards in a row (3.4), four steps (9.4), three steps (13.3) ---------- */
.steps { padding: var(--sect-pad) 0; }
.steps__row { position: relative; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 16px; }
.steps__row::before { content: ""; position: absolute; left: 6%; right: 6%; top: 30px; height: 1px; background: var(--line); }
.band--navy .steps__row::before { background: rgba(255,255,255,.18); }
.step { position: relative; background: #fff; border-radius: 18px; padding: 22px 20px 24px; box-shadow: var(--shadow-soft); }
.band--navy .step { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); color: #fff; }
.step__n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font: 800 13px/1 var(--font-display); margin-bottom: 16px; }
.band--navy .step__n { background: #fff; color: var(--ink); }
.step h3 { font: 800 19px/1.2 var(--font-display); letter-spacing: -.02em; margin: 0 0 8px; }
.step p { font: 500 14.5px/1.5 var(--font-body); color: var(--body); margin: 0; }
.band--navy .step p { color: rgba(255,255,255,.76); }
.step .golink { margin-top: 12px; font-size: 14px; }
.steps__under { margin: 28px auto 0; text-align: center; font: 500 15.5px/1.5 var(--font-body); color: var(--body); max-width: 60ch; }
.band--navy .steps__under { color: rgba(255,255,255,.76); }
.step--tint:nth-child(1) { background: #EAF2EE; } .step--tint:nth-child(2) { background: #F3EEE3; } .step--tint:nth-child(3) { background: #EEF2F8; }
@media (max-width: 900px) { .steps__row { grid-template-columns: 1fr; padding-left: 26px; } .steps__row::before { left: 10px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; } }

/* ---------- 2x2 problem cards (10.3) ---------- */
.grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid4__card { background: #fff; border-radius: 16px; padding: 22px 24px; font: 500 15.5px/1.55 var(--font-body); color: var(--body); box-shadow: var(--shadow-soft); }
.grid4__card b { display: block; color: var(--ink); font: 800 18px/1.25 var(--font-display); letter-spacing: -.015em; margin-bottom: 6px; }
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 860px) { .grid4 { grid-template-columns: 1fr; } .split { grid-template-columns: 1fr; } }

/* ---------- time-stamped cards (10.4, 11.4) ---------- */
.tl { padding: var(--sect-pad) 0; }
.tl__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.tl__card { background: rgba(255,255,255,.06); border-radius: 16px; padding: 18px 16px 20px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.tl__t { display: block; font: 800 13px/1 var(--font-display); letter-spacing: .02em; color: var(--ice); margin-bottom: 12px; }
.tl__card p { margin: 0; font: 500 14px/1.5 var(--font-body); color: rgba(255,255,255,.84); }
.tl__card--win { background: rgba(152,249,214,.1); box-shadow: inset 0 0 0 1px rgba(152,249,214,.35); }
.tl__label { margin: 22px 0 0; font-size: 13.5px; color: rgba(255,255,255,.6); }
@media (max-width: 1000px) { .tl__row { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px) { .tl__row { grid-template-columns: 1fr; padding-left: 22px; border-left: 1px solid rgba(255,255,255,.2); } }

/* ---------- mid-page band (3.6) ---------- */
.mid { background: var(--navy); color: #fff; padding: 64px 0; }
.mid__in { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.mid__h { font: 800 clamp(24px, 2.8vw, 36px)/1.15 var(--font-display); letter-spacing: -.025em; margin: 0; }
@media (max-width: 760px) { .mid__in { flex-direction: column; align-items: stretch; } .mid .btn { justify-content: center; } }

/* ---------- three cards (3.8, 14.5) ---------- */
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card { background: #fff; border-radius: 18px; padding: 26px 24px; box-shadow: var(--shadow-soft); font: 500 15.5px/1.55 var(--font-body); color: var(--body); }
.card b { display: block; color: var(--ink); font: 800 19px/1.2 var(--font-display); letter-spacing: -.02em; margin-bottom: 8px; }
.card__ic { width: 36px; height: 36px; border-radius: 10px; background: rgba(47,107,235,.1); color: var(--cobalt-dp); display: grid; place-items: center; margin-bottom: 16px; }
.card__ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card--sage { background: #EAF2EE; } .card--sand { background: #F3EEE3; } .card--sky { background: #EEF2F8; }
.card .golink { margin-top: 14px; font-size: 14.5px; }
.cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .cards3, .cards4 { grid-template-columns: 1fr; } }
@media (min-width: 560px) and (max-width: 900px) { .cards4 { grid-template-columns: 1fr 1fr; } }

/* ---------- partners row (3.9) ---------- */
.partners { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.partner { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 180px; padding: 18px 20px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-soft); }
.partner b { font: 800 15px/1.2 var(--font-display); color: var(--ink); }
.partner span { font-size: 13px; color: var(--mute); }

/* ---------- industry hero (14.1) + use cases (14.3) ---------- */
.uc { padding: var(--sect-pad) 0; background: var(--paper-2); }
.uc__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 36px; }
.uc__photo { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; }
.uc__photo img { width: 100%; height: 100%; object-fit: cover; }
.uc__tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.uc__tab { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 700 14px/1 var(--font-display); color: var(--ink); cursor: pointer; }
.uc__tab[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.uc__panel[hidden] { display: none; }
.uc__claim { font: 500 17px/1.55 var(--font-body); color: var(--body); margin: 0 0 18px; }
.uc__claim b { color: var(--ink); font-weight: 800; }
.uc__acc { border-top: 1px solid var(--line); }
.uc__item { border-bottom: 1px solid var(--line); }
.uc__q { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 14px 2px; text-align: left; font: 700 15.5px/1.3 var(--font-display); color: var(--ink); }
.uc__q::after { content: "+"; font-weight: 400; font-size: 20px; color: var(--mute); flex: none; transition: transform .3s var(--ease); }
.uc__item.open .uc__q::after { transform: rotate(45deg); }
.uc__a { overflow: hidden; max-height: 0; transition: max-height .4s var(--ease); }
.uc__a p { margin: 0; padding: 0 2px 16px; font: 500 15px/1.55 var(--font-body); color: var(--body); }
@media (max-width: 860px) { .uc__grid { grid-template-columns: 1fr; } .uc__photo { aspect-ratio: 16 / 10; } .uc__tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; } }

/* ---------- the Passport card (14.4 and the module) ---------- */
.pcard { position: relative; width: min(100%, 440px); background: #fff; border-radius: 20px; padding: 22px 22px 18px; box-shadow: var(--shadow-float); }
.pcard__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pcard__hd b { font: 800 15px/1.2 var(--font-display); }
.pcard__hd span { font-size: 12.5px; color: var(--mute); }
.pcard__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); font: 600 14px/1.3 var(--font-body); color: var(--ink); }
.pcard__row small { display: block; font-size: 12px; font-weight: 500; color: var(--mute); margin-top: 2px; }
.pcard__sum { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); font: 800 15px/1 var(--font-display); }
.pcard > .note-ex { position: absolute; top: -12px; right: 16px; background: #fff; }

/* ---------- sector cards (9.11, 10.9, 13.2) ---------- */
/* Mark, 2026-09-16: the sector band carries five photographs and answers "is this for me",
   so it gets the same weight as "Why teams switch": wider than the column, taller tiles,
   a head at the same size. */
body.dk .ind { padding: clamp(96px, 12vh, 132px) 0; }
@media (min-width: 861px) { body.dk .ind > .wrap {
  width: max(min(1240px, calc(100% - 48px)), min(1400px, calc(100% - 100px))); } }
.ind .sec-head { max-width: 980px; margin-bottom: clamp(40px, 5.6vh, 62px); }
body.dk .ind .sec-head .h2 { font: 900 clamp(36px, 5.2vw, 64px)/1.03 var(--font-display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.ind__sub { margin: 15px 0 0; font: 700 clamp(19px, 2.1vw, 27px)/1.22 var(--font-display); letter-spacing: -.02em; color: var(--body); text-wrap: balance; }
.sect5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.sect { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(360px, 29vw, 440px); border-radius: 20px; overflow: hidden; color: #fff; padding: 24px 22px; transition: transform .35s var(--ease); }
/* the frames are wide, and the person stands in their right third, so the tall tile crops to them */
/* Mark, 2026-09-17: back to the original sector portraits. Those are 3:4 with the person
   centred and looking at us, so the card crops the sides only and needs no per-sector nudge.
   The 70/74% offsets below were tuned for the generated 16:9 frames, where the person stood
   right of centre; on these they would cut the face. */
.sect img { object-position: 50% center; }
.sect:hover { transform: translateY(-3px); }
.sect img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.sect::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,20,64,0) 30%, rgba(11,20,64,.85) 100%); }
.sect > * { position: relative; z-index: 2; }
.sect b { font: 800 clamp(20px, 1.6vw, 24px)/1.14 var(--font-display); letter-spacing: -.02em; }
.sect span { font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,.82); margin-top: 6px; }
.sect .golink { color: var(--ice); margin-top: 10px; font-size: 14px; }
@media (max-width: 900px) { .sect5 { grid-template-columns: repeat(5, min(72vw, 260px)); overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; } .sect { scroll-snap-align: start; min-height: 300px; } }

/* ---------- for / not for (9.12) ---------- */
.fornot { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fornot__col { background: #fff; border-radius: 18px; padding: 26px 26px 20px; box-shadow: var(--shadow-soft); }
.fornot__col h3 { font: 800 20px/1.2 var(--font-display); margin: 0 0 14px; }
.fornot__col ul { list-style: none; margin: 0; padding: 0; }
.fornot__col li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-soft); font: 500 15px/1.5 var(--font-body); color: var(--body); }
.fornot__col li i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; }
.fornot__col--for li i { background: var(--proven-bg); color: var(--proven); }
.fornot__col--not li i { background: var(--missing-bg); color: var(--missing); }
@media (max-width: 760px) { .fornot { grid-template-columns: 1fr; } }

/* ---------- trust page (19) ---------- */
.letter { max-width: 65ch; margin: 0 auto; font: 500 18px/1.65 var(--font-body); color: var(--body); }
.letter p { margin: 0 0 22px; }
.letter p b { color: var(--ink); font-weight: 800; }
.letter__sig { margin-top: 34px; display: flex; flex-direction: column; gap: 4px; }
.letter__sig em { font: 400 34px/1 "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive; color: var(--ink); }
.letter__sig b { color: var(--ink); }
.letter__sig span { font-size: 14px; color: var(--mute); }
.dodo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dodo__col { background: #fff; border-radius: 18px; padding: 26px; box-shadow: var(--shadow-soft); }
.dodo__col h3 { font: 800 20px/1.2 var(--font-display); margin: 0 0 14px; }
.dodo__col ul { list-style: none; margin: 0; padding: 0; }
.dodo__col li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); font: 500 15.5px/1.5 var(--font-body); color: var(--body); }
.dodo__col li i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.dodo__col li i svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dodo__col--does li i { background: var(--proven-bg); color: var(--proven); }
.dodo__col--doesnt li i { background: var(--missing-bg); color: var(--missing); }
.kv { display: grid; grid-template-columns: 220px 1fr; gap: 0; }
.kv > div { padding: 18px 0; border-top: 1px solid var(--line); font: 500 15.5px/1.55 var(--font-body); color: var(--body); }
.kv > div:nth-child(odd) { font: 800 15px/1.4 var(--font-display); color: var(--ink); padding-right: 24px; }
.list3 { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.list3 li { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px; padding: 14px 16px; font: 700 15px/1.3 var(--font-display); color: var(--ink); box-shadow: var(--shadow-soft); }
.list3 li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cobalt); flex: none; }
.docs__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 28px; padding: 0; list-style: none; }
.docs__list li { padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); font: 650 14px/1 var(--font-display); }
@media (max-width: 760px) { .dodo { grid-template-columns: 1fr; } .kv { grid-template-columns: 1fr; } .kv > div:nth-child(odd) { border-top: 1px solid var(--line); padding-bottom: 4px; } .kv > div:nth-child(even) { border-top: 0; padding-top: 0; } }

/* ---------- team (22.3) + find us (22.4) ---------- */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.team__card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-soft); }
.team__pic { aspect-ratio: 1; background: linear-gradient(160deg, #E7EDF7, #DCE6F6); display: grid; place-items: center; color: var(--cobalt-dp); font: 900 40px/1 var(--font-display); }
.team__pic img { width: 100%; height: 100%; object-fit: cover; }
.team__card b { display: block; font: 800 19px/1.2 var(--font-display); margin: 18px 20px 2px; }
.team__card span { display: block; font-size: 13.5px; color: var(--mute); margin: 0 20px 8px; }
.team__card p { margin: 0 20px 22px; font: 500 15px/1.5 var(--font-body); color: var(--body); }
@media (max-width: 860px) { .team { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .team { grid-template-columns: 1fr; } }
.findus { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.findus__pic { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; background: #E7EDF7; }
.findus__pic img { width: 100%; height: 100%; object-fit: cover; }
.findus address { font-style: normal; font: 500 16px/1.6 var(--font-body); color: var(--body); margin-top: 16px; }
@media (max-width: 760px) { .findus { grid-template-columns: 1fr; } }

/* ---------- candidate pages (12, 21) ---------- */
.chero { padding: calc(var(--tbo, 40px) + 110px) 0 60px; background: var(--paper); }
.chero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.chero .h1 { max-width: 12ch; }
.store { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.store a { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border-radius: 12px; background: var(--ink); color: #fff; font: 700 14.5px/1 var(--font-display); }
.store a svg { width: 18px; height: 18px; fill: currentColor; }
.band--navy .store a { background: #fff; color: var(--ink); }
/* ---------- the phone (rebuilt 2026-09-16) ----------
   Mark: take Saporata's device but "the frames of the phone have to be thinner, as on the actual
   iPhone". So the chassis is set in proportions of its own width, the way the real one is: a bezel
   of 2% against Saporata's 2.8%, a corner radius of 15.5%, a titanium edge that catches light on
   the two long sides, and a Dynamic Island in place of the old notch. One device, every page. */
.phone { position: relative; width: min(100%, 320px); margin: 0 auto; aspect-ratio: 9 / 19.5;
  border-radius: 15.5% / 7.15%; padding: 1.55%;
  background: linear-gradient(100deg, #6b7078 0%, #24262b 4%, #0b0c0e 20%, #0b0c0e 80%, #24262b 96%, #6b7078 100%);
  box-shadow: 0 40px 80px -40px rgba(11,20,64,.7), 0 3px 9px rgba(11,20,64,.28),
    inset 0 0 0 .9px rgba(255,255,255,.20); }
.phone__screen { position: relative; width: 100%; height: 100%; border-radius: 14.4% / 6.65%; overflow: hidden;
  background: var(--paper); display: flex; flex-direction: column; gap: 10px; padding: 15% 5% 5%; }
.phone__notch { position: absolute; top: 2.03%; left: 50%; transform: translateX(-50%);
  width: 31%; aspect-ratio: 125 / 36; border-radius: 99px; background: #0b0c0e; z-index: 6; }
/* the status line sits beside the island, as it does on the real phone */
/* the status line, at the real thing's proportions: the time at 4.3% of the screen's width, the
   cluster at 19% of it, both inset 7% from the edges, the whole row on the island's centre line */
.phone__bar { position: absolute; top: 4.09%; left: 1.55%; right: 1.55%; z-index: 5; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: space-between; padding: 0 7.5%; pointer-events: none;
  /* Mark, 2026-09-17: the clock ran into the Dynamic Island on the smallest phone on the site,
     the 150px one on the ATS page, because the type could not shrink past an 8.5px floor while
     the island stays a fixed 31% of the body. Measured overlap was 3px. The floor drops and the
     side padding comes in a notch, which clears it without pushing the clock into the corner
     curve, the thing the 10% padding was there to prevent in the first place. */
  font: 600 clamp(6.6px, 4.4cqw, 13px)/1 var(--font-display); color: var(--ink); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; container-type: inline-size; }
.phone__bar svg { display: block; width: 22cqw; min-width: 27px; max-width: 62px; height: auto; fill: currentColor; }
/* the app's own header, so the screen reads as an application and not as a floating card */
.phone__app { flex: none; display: flex; align-items: center; gap: 7px; padding: 0 2px 2px; }
.phone__app .nav__mark { width: 13px; height: 17px; margin: 0; background: var(--cobalt); flex: none; }
.phone__app b { font: 800 13.5px/1 var(--font-display); color: var(--ink); letter-spacing: -.02em; }
.phone__where { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px;
  border-radius: 999px; background: rgba(20,33,63,.06); font: 600 10.5px/1 var(--font-body); color: var(--body); }
.phone__where .icon { width: 10px; height: 10px; }
.jobcard { background: #fff; border-radius: 16px; padding: 16px; box-shadow: var(--shadow-float); }
.jobcard b { display: block; font: 800 18px/1.15 var(--font-display); letter-spacing: -.02em; }
.jobcard span { display: block; font-size: 13px; color: var(--body); margin-top: 3px; }
.jobcard .jobcard__pay { font: 800 22px/1 var(--font-display); color: var(--ink); margin: 12px 0 4px; }
.jobcard .jobcard__why { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(47,107,235,.08); color: var(--cobalt-dp); font: 600 12.5px/1.4 var(--font-body); }
.jobcard .chip { margin-top: 12px; }
/* the card reads like a job inside a real app: the workplace, who it is for, what it pays, and
   the three things a frontline candidate actually decides on (2026-09-16) */
.jobcard--full { overflow: hidden; display: flex; flex-direction: column; }
.jc__pic { position: relative; margin: -16px -16px 0; aspect-ratio: 16 / 9; background: var(--paper-2); flex: none; }
.jc__pic img { border-radius: inherit; }
.jc__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jc__logo { position: absolute; left: 11px; bottom: 11px; z-index: 2; width: 30px; height: 30px; border-radius: 9px; background: #fff;
  display: grid; place-items: center; font: 800 10.5px/1 var(--font-display); color: var(--cobalt-dp); letter-spacing: -.01em;
  box-shadow: 0 3px 8px rgba(11,20,64,.24), inset 0 0 0 1px rgba(20,33,63,.07); }
.jc__pic + .jc__body { padding-top: 12px; }
.jc__body { flex: 1 1 auto; min-height: 0; }
.jc__emp { display: block; font: 500 12px/1.3 var(--font-body); color: var(--body); margin-top: 3px; }
.jc__pay { display: flex; align-items: baseline; gap: 5px; margin-top: 10px; }
.jc__pay em { font: 800 24px/1 var(--font-display); font-style: normal; color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.jc__pay i { font-style: normal; font: 600 11.5px/1 var(--font-body); color: var(--body); }
.jc__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.jc__tags span { display: inline-block; margin: 0; padding: 4px 8px; border-radius: 999px; background: rgba(20,33,63,.06);
  font: 600 10.5px/1.2 var(--font-body); color: var(--body); }
.jobcard .jc__why { margin-top: 10px; padding: 9px 11px; border-radius: 10px; background: rgba(47,107,235,.08);
  color: var(--cobalt-dp); font: 600 11.5px/1.35 var(--font-body); }
.jc__act { flex: none; display: grid; grid-template-columns: 1fr 1.3fr; gap: 7px; margin-top: 12px; }
.jc__act span { display: block; margin: 0; text-align: center; padding: 9px 6px; border-radius: 11px; font: 700 12px/1 var(--font-display); }
.jc__no { background: rgba(20,33,63,.07); color: var(--body); }
.jc__yes { background: var(--cobalt); color: #fff; box-shadow: 0 7px 16px -9px rgba(47,107,235,.95); }
.loop.play .jobcard--swipe { animation: swipeR 5s var(--ease) infinite; }
@keyframes swipeR { 0%, 30% { transform: none; } 45% { transform: translateX(28px) rotate(6deg); } 60%, 100% { transform: none; } }
.steps6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cost { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.cost__blocks { display: grid; gap: 14px; }
.cost__block { background: #fff; border-radius: 16px; padding: 22px 24px; box-shadow: var(--shadow-soft); font: 500 15.5px/1.55 var(--font-body); color: var(--body); }
.cost__block b { display: block; font: 800 18px/1.2 var(--font-display); color: var(--ink); margin-bottom: 6px; }
.cost__law { margin-top: 16px; font-size: 14px; color: var(--mute); }
.lines4 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lines4 div { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 14px; padding: 16px 18px; font: 500 15px/1.5 var(--font-body); color: var(--body); box-shadow: var(--shadow-soft); }
.lines4 div i { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--proven-bg); color: var(--proven); display: grid; place-items: center; }
.lines4 div i svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.search { display: flex; align-items: center; gap: 10px; margin-top: 22px; max-width: 460px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px 4px 4px 14px; }
.search svg { width: 18px; height: 18px; color: var(--mute); fill: none; stroke: currentColor; stroke-width: 2; }
.search input { flex: 1; border: 0; background: none; padding: 10px 0; font: 500 15px/1 var(--font-body); color: var(--ink); outline: none; }
@media (max-width: 860px) { .chero__grid { grid-template-columns: 1fr; } .steps6 { grid-template-columns: 1fr; } .cost { grid-template-columns: 1fr; } .lines4 { grid-template-columns: 1fr; } .chero .h1 { max-width: none; } }

/* ---------- demo page (23) ---------- */
body.page-demo { background: var(--paper); }
.dhead { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.dhead .nav__logo { color: var(--ink); background: var(--grad-blue); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dhead .nav__logo b { -webkit-text-fill-color: transparent; }
.dhead .nav__mark { background: var(--grad-blue); }
.dhead__r { display: flex; align-items: center; gap: 16px; font: 600 14px/1 var(--font-display); color: var(--body); }
.dhead__r .nav__lang { color: var(--body); border-color: var(--line-soft); }
.demo { padding: 40px 0 96px; }
.demo__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.demo__checks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.demo__checks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font: 500 16px/1.5 var(--font-body); color: var(--body); }
.demo__checks li i { width: 24px; height: 24px; border-radius: 50%; background: var(--proven-bg); color: var(--proven); display: grid; place-items: center; }
.demo__checks li i svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.demo__price { margin-top: 26px; font-size: 14.5px; color: var(--mute); }
.demo__card { position: relative; border-radius: 24px; padding: 8px; background: radial-gradient(70% 90% at 12% 0%, rgba(47,107,235,.62), transparent 60%), linear-gradient(160deg, #2F6BEB, #1E3ABA); box-shadow: 0 40px 80px -40px rgba(30,58,186,.5); }
.form { background: #fff; border-radius: 18px; padding: 28px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font: 700 13.5px/1.2 var(--font-display); color: var(--ink); }
.field label i { font-style: normal; color: var(--cobalt); }
.field input, .field select, .field textarea { border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px; font: 500 16px/1.3 var(--font-body); color: var(--ink); background: #fff; outline: none; transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(47,107,235,.18); }
.field.is-bad input, .field.is-bad select { border-color: var(--missing); }
.field .err { display: none; font-size: 12.5px; color: var(--missing); }
.field.is-bad .err { display: block; }
.field small { font-size: 12.5px; color: var(--mute); }
.form__consent { font-size: 13px; line-height: 1.5; color: var(--mute); margin: 6px 0 12px; }
.form__consent a { color: var(--cobalt-dp); text-decoration: underline; }
.form__opt { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--body); margin-bottom: 18px; }
.form__opt input { margin-top: 3px; }
.form .btn { width: 100%; justify-content: center; }
.form__done, .form__cand, .form__cal { display: none; }
.form.is-cand .form__fields, .form.is-cal .form__fields, .form.is-done .form__fields { display: none; }
.form.is-cand .form__cand, .form.is-cal .form__cal, .form.is-done .form__done { display: block; }
.form__cand { padding: 24px; border-radius: 14px; background: var(--paper-2); font: 600 16px/1.5 var(--font-display); }
.form__cand a { color: var(--cobalt-dp); }
.cal__h { font: 800 20px/1.2 var(--font-display); margin: 0 0 4px; }
.cal__line { font-size: 13.5px; color: var(--mute); margin: 0 0 18px; }
.cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 16px; }
.cal__days span { text-align: center; font: 700 11px/1 var(--font-body); color: var(--mute); padding: 6px 0; }
.cal__day { aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; font: 600 13.5px/1 var(--font-body); color: var(--ink); }
.cal__day.is-open { background: rgba(47,107,235,.08); color: var(--cobalt-dp); cursor: pointer; }
.cal__day.is-open:hover { background: rgba(47,107,235,.18); }
.cal__day.is-sel { background: var(--ink); color: #fff; }
.cal__day.is-off { color: rgba(20,33,63,.3); }
.cal__slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cal__slot { padding: 10px 0; border-radius: 9px; border: 1px solid var(--line); font: 700 13.5px/1 var(--font-display); color: var(--ink); text-align: center; cursor: pointer; }
.cal__slot:hover { border-color: var(--cobalt); color: var(--cobalt-dp); }
.form__done { text-align: center; padding: 20px 0; }
.form__done .ok { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 16px; background: var(--proven-bg); color: var(--proven); display: grid; place-items: center; }
.form__done .ok svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.form__done h3 { font: 800 24px/1.2 var(--font-display); margin: 0 0 8px; }
.form__done p { margin: 0 0 8px; color: var(--body); }
.form__done small { color: var(--mute); }
@media (max-width: 860px) { .demo__grid { grid-template-columns: 1fr; } .form__row { grid-template-columns: 1fr; } .demo { padding-bottom: 60px; } }

/* ---------- white paper page (24) ---------- */
.wph { padding: calc(var(--tbo, 40px) + 110px) 0 60px; background: var(--paper); }
.wph__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.wph__cover { width: min(100%, 360px); margin: 0 auto; aspect-ratio: 3 / 4; border-radius: 8px; padding: 28px; position: relative; transform: perspective(1200px) rotateY(-14deg) rotateX(2deg);
  background: linear-gradient(160deg, #F8F3E9 0%, #E9EEF7 55%, #DCE6F6 100%); box-shadow: -18px 30px 60px -20px rgba(11,20,64,.45), inset 0 0 0 1px rgba(20,33,63,.08); display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); }
.wph__cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: linear-gradient(90deg, rgba(11,20,64,.18), transparent); border-radius: 8px 0 0 8px; }
.wph__cover b { font: 900 clamp(22px, 2.4vw, 30px)/1.05 var(--font-display); letter-spacing: -.03em; }
.wph__cover .wph__brand { display: flex; align-items: center; gap: 8px; font: 700 14px/1 var(--font-display); }
.wph__cover .wph__brand .nav__mark { background: var(--grad-blue); }
.wph__cover span { font-size: 12.5px; color: var(--mute); }
.method { max-width: 720px; margin: 0 auto; border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; background: #fff; }
.method b { display: block; font: 800 15px/1.2 var(--font-display); margin-bottom: 6px; }
.method p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--body); }
.reading { max-width: 720px; margin: 0 auto; }
.reading h2 { font: 900 clamp(26px, 2.8vw, 36px)/1.1 var(--font-display); letter-spacing: -.025em; margin: 0 0 18px; }
.reading p { font: 500 17.5px/1.65 var(--font-body); color: var(--body); margin: 0 0 18px; }
.reading ul { margin: 0 0 18px; padding-left: 22px; font: 500 16.5px/1.6 var(--font-body); color: var(--body); }
.chart { margin: 26px 0; padding: 22px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-soft); }
.chart__t { font: 800 15px/1.2 var(--font-display); margin: 0 0 14px; }
.chart__bars { display: grid; gap: 8px; }
.chart__bar { display: grid; grid-template-columns: 150px 1fr 48px; align-items: center; gap: 10px; font: 600 13.5px/1 var(--font-body); }
.chart__bar i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #4E86D2, #2F6BEB); width: var(--w); }
.chart__src { margin: 12px 0 0; font-size: 12.5px; color: var(--mute); }
.gate { max-width: 720px; margin: 40px auto 0; background: #fff; border-radius: 20px; padding: 28px; box-shadow: var(--shadow-float); }
.gate b { display: block; font: 800 19px/1.25 var(--font-display); margin-bottom: 14px; }
.gate__row { display: flex; gap: 10px; flex-wrap: wrap; }
.gate__row input { flex: 1 1 240px; border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; font: 500 16px/1.2 var(--font-body); color: var(--ink); outline: none; }
.gate__row input:focus { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(47,107,235,.18); }
.gate__consent { margin: 12px 0 0; font-size: 13px; color: var(--mute); line-height: 1.5; }
.gate__consent a { color: var(--cobalt-dp); text-decoration: underline; }
.gate__done { display: none; }
.gate.is-done .gate__form { display: none; }
.gate.is-done .gate__done { display: block; }
.gate__done b { margin-bottom: 6px; }
.gate__done p { margin: 0 0 10px; color: var(--body); }
.report { max-width: 720px; margin: 40px auto 0; }
.report[hidden] { display: none; }
.related { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .wph__grid { grid-template-columns: 1fr; } .wph__cover { transform: none; width: min(100%, 260px); } .related { grid-template-columns: 1fr; } }

/* ---------- blog hub (24.1, 24.2) ---------- */
.hub { padding: calc(var(--tbo, 40px) + 110px) 0 40px; background: var(--paper); }
.hub__feat { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: center; margin-top: 40px; padding: 30px; border-radius: 22px; color: #fff;
  background: radial-gradient(80% 90% at 14% 0%, rgba(47,107,235,.5), transparent 62%), linear-gradient(160deg, #1a2f6b, #0B1440); }
.hub__feat .res__cover { width: 150px; }
.hub__feat .eb { color: var(--ice); }
.hub__feat h2 { font: 800 clamp(22px, 2.6vw, 32px)/1.15 var(--font-display); letter-spacing: -.02em; margin: 0 0 18px; color: #fff; }
.hub__tools { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 0 0 26px; }
.hub__tools .search { margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tile { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--shadow-soft); transition: transform .35s var(--ease); }
.tile:hover { transform: translateY(-3px); }
.tile__top { min-height: 180px; padding: 24px; background: var(--navy); color: #fff; display: flex; align-items: flex-end; }
.tile__top h3 { margin: 0; font: 800 20px/1.2 var(--font-display); letter-spacing: -.02em; }
.tile__meta { font-size: 12.5px; color: var(--mute); padding: 16px 20px 0; }
.tile__line { padding: 6px 20px 20px; font: 500 14.5px/1.5 var(--font-body); color: var(--body); }
.tile[hidden] { display: none; }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr; } .hub__feat { grid-template-columns: 1fr; } }

/* ---------- legal pages + 404 ---------- */
.legal { padding: calc(var(--tbo, 40px) + 110px) 0 96px; }
.legal .reading h1 { font: 900 clamp(32px, 4vw, 52px)/1.05 var(--font-display); letter-spacing: -.03em; margin: 0 0 12px; }
.legal .reading h2 { font-size: 24px; margin-top: 36px; }
.legal .reading p, .legal .reading li { font-size: 16.5px; }
.legal .reading .meta { color: var(--mute); font-size: 14px; }
.nf { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 40px 24px; }
.nf .h1 { margin: 0 auto 14px; }
.nf .sub { margin: 0 auto 28px; }
.nf__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- a few page-body helpers ---------- */
.btn--ghost2 { background: transparent; color: var(--ink); border: 1.5px solid rgba(11,20,64,.28); box-shadow: none; }
.btn--ghost2:hover { background: rgba(11,20,64,.05); }
.band--navy .btn--ghost2, .phero--photo .btn--ghost2 { color: #fff; border-color: rgba(255,255,255,.4); }
.band--navy .btn--ghost2:hover, .phero--photo .btn--ghost2:hover { background: rgba(255,255,255,.08); }
[data-held] { display: none !important; }
.stack > * + * { margin-top: 16px; }
.hero__body { position: relative; z-index: 2; }

/* ---------- home hero (2.1): the deck's headline sizes on the existing cobalt hero ---------- */
.hero .h1 { color: #fff; font-size: clamp(38px, 5.1vw, 74px); max-width: 15ch; margin: 0 auto; }
.hero .hero__sub { color: rgba(255,255,255,.86); font: 500 clamp(16px, 1.5vw, 19px)/1.5 var(--font-body); max-width: 58ch; margin: 18px auto 0; text-wrap: balance; }
.hero .hero__cta { margin-top: 26px; }
@media (max-width: 760px) {
  body.home-page.dk .hero { padding-top: calc(var(--tbo, 36px) + 68px + 26px); min-height: clamp(600px, 84svh, 720px); }
  body.home-page.dk .hero .h1 { font-size: clamp(34px, 9.4vw, 40px); max-width: 12ch; }
}
/* navy bands: the general heading rule must not win over the band's white */
body.dk .band--navy .h2, body.dk .band--navy .h1, body.dk .mid .h2, body.dk .tl.band--navy .h2, body.dk .close .h2 { color: #fff; }
body.dk .band--navy .sub, body.dk .tl.band--navy .sub { color: rgba(255,255,255,.76); }


/* ---------- Mark, 2026-09-16 00:45: home fixes after the layout pass ----------
   1. the hero's copy is two lines longer than in July, so the crowd starts under the button, never behind it
   2. the frame's Interview panel had dead space under the player: bigger photo column, content centred in the card
   3. the "Hire faster" cards land faster
   4. the closing beat is the July footer top again (logo, motto, button on the rounded navy block), the calendar follows on the home page */
@media (min-width: 901px) {
  body.home-page.dk .hero__crowd { bottom: -80px; }
  body.home-page.dk .hero__crowd img { width: min(980px, 86%); }
}
body.home-page .pf-ui--screen { justify-content: center; }
body.home-page .pf-ui--screen .pf-scr-top { grid-template-columns: 252px 1fr; }
body.home-page .pf-ui--screen .pf-scr-body { gap: 10px; }

.close.fclose { --mx: 50%; --my: 22%; position: relative; overflow: hidden; background: var(--navy); color: #fff;
  padding: clamp(72px, 10vh, 108px) 0 0; border-radius: 48px 48px 0 0; margin-top: 20px; }
.close.fclose::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(34% 42% at var(--mx) var(--my), rgba(47,107,235,.44), transparent 66%),
    radial-gradient(44% 44% at 10% 4%, rgba(51,84,158,.26), transparent 64%),
    radial-gradient(38% 40% at 92% 88%, rgba(47,107,235,.18), transparent 62%); }
.close.fclose > .wrap { position: relative; z-index: 1; }
.close.fclose .fclose-beat { margin-bottom: clamp(56px, 8vh, 88px); }
.close.fclose .fbrand { display: inline-flex; margin-bottom: 22px; }
.close.fclose .fclose-h { font: 700 clamp(34px, 4.6vw, 56px)/1.05 var(--font-display); letter-spacing: -.03em; color: #fff; margin: 0; text-wrap: balance; }
.close.fclose .fclose-h b { font-weight: 900; }
.fclose-cal-sec { position: relative; background: var(--navy); color: #fff; padding: 0 0 clamp(64px, 9vh, 96px); margin-top: -1px; }
.fclose-cal-sec .fclose-sched { margin-top: 0; }
.footer.ft { margin-top: 0; border-radius: 0; }
/* the July calendar and beat rules, as they were in index.html */
/* the closing beat sits at the top of the (navy) footer */
  .fclose-beat { text-align: center; max-width: 940px; margin: 0 auto clamp(52px, 8vh, 84px); }
.fclose-h { color: #fff; margin: 0; }
.fclose-sub { margin: 16px auto 0; max-width: 44ch; font-family: var(--font-display); font-size: clamp(18px, 2vw, 24px); font-weight: 500; letter-spacing: -.01em; color: #fff; }
.fclose-cta { margin-top: clamp(24px, 4vh, 38px); display: flex; justify-content: center; }
.fclose-book { position: relative; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font: 700 16px/1 var(--font-display); color: #fff; padding: 17px 32px; border-radius: 999px; background: var(--grad-blue); box-shadow: 0 18px 40px -16px rgba(30,58,186,.7), inset 0 1px 0 rgba(255,255,255,.28); isolation: isolate; }
.fclose-book::before { content:""; position:absolute; inset:-2.5px; border-radius:inherit; padding:2.5px; z-index:-1; background: conic-gradient(from var(--fca), #2F62C0, #7FB2F2, #E9C888, #4E86D2, #2F62C0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: fclose-spin 4.5s linear infinite; }
@keyframes fclose-spin { to { --fca: 360deg; } }
.fclose-book:hover { filter: brightness(1.06); }
.fclose-book svg { width: 17px; height: 17px; }
/* booking system (Cal-style scheduler), light card on the navy footer */
  .fclose-sched { max-width: 1040px; margin: clamp(30px,5vh,48px) auto 0; }
.fclose-cal { background: var(--surface); border-radius: 22px; box-shadow: 0 50px 120px -50px rgba(0,0,0,.7); overflow: hidden; text-align: left; }
/* the live Cal.com calendar (21 Sep 2026): the card keeps its place while the embed loads */
.fclose-cal--live { min-height: 560px; padding: clamp(4px, 1vw, 12px); }
.fclose-cal__alt { margin: 0; padding: 40px 24px; text-align: center; font: 500 15px/1.5 var(--font-body); color: var(--body); }
.fclose-cal__alt a { color: var(--cobalt-dp); font-weight: 700; }
.cal__embed { min-height: 420px; }
.fclose-view { display: none; }
.fclose-view.is-on { display: grid; }
.fclose-view--pick.is-on { grid-template-columns: 0.9fr 1.35fr 0.75fr; }
.fclose-view--detail.is-on { grid-template-columns: 0.82fr 1.18fr; }
.fclose-view--done.is-on { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: clamp(40px,6vh,64px) 24px; }
.fclose-ev { padding: 26px 24px; border-right: 1px solid var(--line-soft); }
.fclose-ev__brand { display: inline-flex; align-items: center; gap: 9px; }
.fclose-ev__logo { width: 30px; height: 30px; border-radius: 8px; background: var(--grad-blue); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.fclose-ev__brand b { font: 700 13px/1 var(--font-display); color: var(--ink); }
.fclose-ev__h { margin: 16px 0 0; font: 700 21px/1.1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.fclose-ev__meta { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; }
.fclose-ev__row { display: flex; align-items: center; gap: 10px; font: 500 13.5px/1.35 var(--font-body); color: var(--body); }
.fclose-ev__row svg { width: 16px; height: 16px; color: var(--cobalt); flex: none; }
.fclose-ev__note { margin: 16px 0 0; font: 500 13.5px/1.5 var(--font-body); color: var(--body); }
.fclose-dur { margin-top: 20px; display: inline-flex; padding: 4px; gap: 4px; background: var(--paper-2); border-radius: 999px; }
.fclose-dur button { font: 650 12.5px/1 var(--font-body); color: var(--body); background: transparent; border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.fclose-dur button.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 3px 10px -4px rgba(20,33,63,.28); }
.fclose-mon { padding: 24px 22px; }
.fclose-mon__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fclose-mon__top b { font: 700 15px/1 var(--font-display); color: var(--ink); }
.fclose-mon__nav { display: flex; gap: 6px; }
.fclose-mon__nav button { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line-soft); background: var(--surface); color: var(--body); cursor: pointer; display: grid; place-items: center; }
.fclose-mon__nav svg { width: 15px; height: 15px; }
.fclose-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.fclose-dow span { text-align: center; font: 700 10.5px/1 var(--font-body); letter-spacing: .04em; color: var(--mute); }
.fclose-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.fclose-day { aspect-ratio: 1; border: 0; background: transparent; border-radius: 10px; font: 600 13.5px/1 var(--font-body); color: var(--ink); cursor: pointer; }
.fclose-day.is-empty { pointer-events: none; }
.fclose-day.is-off { color: rgba(20,33,63,.28); pointer-events: none; }
.fclose-day.is-open { background: rgba(47,107,235,.10); color: var(--cobalt-dp); font-weight: 700; }
.fclose-day.is-open:hover { background: rgba(47,107,235,.18); }
.fclose-day.is-sel { background: var(--grad-blue); color: #fff; box-shadow: 0 8px 18px -8px rgba(30,58,186,.55); }
.fclose-times { padding: 24px 20px; border-left: 1px solid var(--line-soft); display: flex; flex-direction: column; }
.fclose-times__h { font: 700 12.5px/1 var(--font-body); color: var(--ink); margin-bottom: 12px; }
.fclose-times__h em { font-style: normal; color: var(--mute); font-weight: 600; }
.fclose-slots { display: flex; flex-direction: column; gap: 8px; overflow: auto; max-height: 268px; padding-right: 2px; }
.fclose-slot { font: 650 13.5px/1 var(--font-body); color: var(--cobalt-dp); background: var(--surface); border: 1px solid rgba(47,107,235,.28); border-radius: 10px; padding: 12px 10px; text-align: center; cursor: pointer; transition: background .18s, color .18s; }
.fclose-slot:hover { background: rgba(47,107,235,.08); }
.fclose-slot.is-sel { background: var(--grad-blue); color: #fff; border-color: transparent; }
/* step 2: your details */
  .fclose-sum { padding: 26px 24px; border-right: 1px solid var(--line-soft); }
.fclose-sum__when { margin: 14px 0 4px; font: 700 15.5px/1.4 var(--font-display); color: var(--ink); }
.fclose-form { padding: 24px 24px; display: flex; flex-direction: column; gap: 12px; }
.fclose-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fclose-field { display: flex; flex-direction: column; gap: 5px; }
.fclose-field label { font: 620 12.5px/1 var(--font-body); color: var(--ink); }
.fclose-field label em { font-style: normal; color: var(--cobalt); }
.fclose-field input, .fclose-field textarea { font: inherit; font-size: 14px; color: var(--ink); background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 9px 12px; transition: border-color .2s, background .2s; }
.fclose-field textarea { resize: vertical; min-height: 62px; }
.fclose-field input::placeholder, .fclose-field textarea::placeholder { color: var(--mute); opacity: .7; }
.fclose-field input:focus, .fclose-field textarea:focus { outline: none; border-color: var(--cobalt); background: var(--surface); }
.fclose-fine { margin: 2px 0 0; font: 500 11.5px/1.5 var(--font-body); color: var(--mute); }
.fclose-formcta { display: flex; justify-content: flex-end; gap: 10px; margin-top: 2px; }
.fclose-ghost { font: 650 13.5px/1 var(--font-display); color: var(--body); background: transparent; border: 1px solid var(--line-soft); border-radius: 999px; padding: 11px 20px; cursor: pointer; }
.fclose-ghost:hover { background: var(--paper-2); }
.fclose-confirm { font: 700 13.5px/1 var(--font-display); color: #fff; background: var(--grad-blue); border: 0; border-radius: 999px; padding: 12px 24px; cursor: pointer; box-shadow: 0 12px 26px -12px rgba(30,58,186,.6); }
.fclose-confirm:hover { filter: brightness(1.06); }
/* step 3: confirmed */
  .fclose-done__ic { width: 52px; height: 52px; border-radius: 50%; background: #21a97a; color: #fff; display: grid; place-items: center; }
.fclose-done__ic svg { width: 26px; height: 26px; }
.fclose-view--done h3 { margin: 0; font: 700 22px/1.1 var(--font-display); color: var(--ink); }
.fclose-view--done p { margin: 0; max-width: 42ch; font: 500 14.5px/1.55 var(--font-body); color: var(--body); }
.fclose-again { margin-top: 4px; font: 650 13.5px/1 var(--font-display); color: var(--cobalt-dp); background: transparent; border: 0; cursor: pointer; }
.fclose-fallback { margin: 18px 2px 0; text-align: center; font: 500 14px/1.5 var(--font-body); color: rgba(255,255,255,.6); }
.fclose-fallback a { color: #8FC0F5; font-weight: 700; text-decoration: none; }

/* ============================================================================
   Mark, 2026-09-16 01:10: the review of the layout pass
   1. the scrolled nav shows the gradient logo on every page (the Platform page kept a white logo on paper)
   2. the end of every page is ONE navy surface (.fend): the closing beat, the booking calendar (home) and the
      footer sit on the same background, with one light that follows the cursor across all of it (site.js)
   3. the footer carries no logotype: the closing beat already has it
   4. no eyebrow inside any hero
   5. bands fade into each other instead of meeting on a hard edge
   ============================================================================ */
.nav.scrolled .nav__logo { background: var(--grad-blue); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.nav.scrolled .nav__logo b { color: transparent; -webkit-text-fill-color: transparent; }
.nav.scrolled .nav__mark { background: var(--grad-blue); }

/* the end region */
.fend { --mx: 50%; --my: 14%; position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: #fff;
  border-radius: 48px 48px 0 0; margin-top: 0; }
.fend::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(520px 520px at var(--mx) var(--my), rgba(47,107,235,.46), transparent 70%),
    radial-gradient(44% 30% at 10% 4%, rgba(51,84,158,.26), transparent 64%),
    radial-gradient(38% 26% at 92% 96%, rgba(47,107,235,.18), transparent 62%); }
.fend > * { position: relative; z-index: 1; }
.fend > .close.fclose, .fend > .fclose-cal-sec, .fend > .footer.ft { background: transparent; border-radius: 0; margin-top: 0; border-top: 0; overflow: visible; }
.fend > .close.fclose::before, .fend > .footer.ft::before { display: none; }
.fend > .footer.ft { padding-top: 8px; }
.fend > .close.fclose + .footer.ft { padding-top: 0; }
.fend .ft__brand { justify-content: flex-end; }
.fend .ft__brand .fbrand { display: none; }
.fend .ft__top { align-items: start; }

/* no eyebrow inside a hero */
[class*="hero"] .eb, .phero .eb { display: none !important; }

/* bands fade into the band above them: paper, paper-2 (beige) and white meet on a 240px gradient, not a line */
:root { --fade: 240px; }
.band + .band--2, .proof + .band--2, .bigs + .band--2, .motion + .band--2, .tsx + .acc, .faq + .band--2,
.arow-sec + .band--2, .platform + .band--2, .living + .band--2 { background: linear-gradient(180deg, var(--paper) 0, var(--paper-2) var(--fade)); }
.band--white + .band--2, .pf-section + .band--2, .band--white + .acc, .pf-section + .acc, .how + .band--2 { background: linear-gradient(180deg, #fff 0, var(--paper-2) var(--fade)); }
.band--2 + .band, .acc + .band, .res + .band, .band--2 + .motion, .band--2 + .faq, .acc + .faq, .res + .faq, .band--2 + .bigs, .steps.band--2 + .band { background: linear-gradient(180deg, var(--paper-2) 0, var(--paper) var(--fade)); }
.band--white + .band, .pf-section + .band, .how + .band, .band--white + .faq, .pf-section + .faq, .band--white + .motion, .band--white + .bigs { background: linear-gradient(180deg, #fff 0, var(--paper) var(--fade)); }
.band + .band--white, .proof + .band--white, .bigs + .band--white, .motion + .band--white, .faq + .band--white, .band + .pf-section { background: linear-gradient(180deg, var(--paper) 0, #fff var(--fade)); }
.band--2 + .band--white, .acc + .band--white, .res + .band--white, .band--2 + .pf-section, .acc + .pf-section { background: linear-gradient(180deg, var(--paper-2) 0, #fff var(--fade)); }
.band--navy, .band--navy + .band--navy, .mid, .close { background: var(--navy); }
.faq { background: var(--paper-2); }
.band + .faq, .proof + .faq, .bigs + .faq, .motion + .faq, .arow-sec + .faq, .platform + .faq, .psp-band--paper + .faq, .sc-band--paper + .faq, .mx-row + .faq { background: linear-gradient(180deg, var(--paper) 0, var(--paper-2) var(--fade)); }
.band--white + .faq, .psp-band--white + .faq, .sc-band--white + .faq, .mx-row--white + .faq, .pf-section + .faq { background: linear-gradient(180deg, #fff 0, var(--paper-2) var(--fade)); }

/* the home page's own edges (its inline style sets these backgrounds, so these rules carry body.home-page) */
/* Mark, 2026-09-16: no white wash over the hero photo. The crowd is sized from the space left under the button, so on a
   short window it shrinks instead of rising into the copy (it was landing on the blonde woman's head below about 880px). */
/* Mark sized the crowd himself on 2026-09-17, then asked for slightly more again: the
   reserve under the button goes 317 -> 225 and the cap 448 -> 600, which puts the people at
   ~695px across on a 1280x796 window, about a third up on the July figure. Height is still
   the lever, so a short window shrinks the crowd instead of pushing it up into the copy. */
body.home-page .hero__crowd img { height: min(600px, calc(100svh - var(--hero-top, 140px) - 225px)); width: auto;
  max-width: min(980px, 86%); object-fit: contain; object-position: 50% 100%; }
body.home-page .living { background: linear-gradient(180deg, var(--paper-2) 0, var(--paper) var(--fade)); }
body.home-page .res { background: linear-gradient(180deg, var(--paper) 0, var(--paper-2) var(--fade)); }

/* the FAQ band fades in too. `body.dk .faq` (0,2,0) outranks the plain `X + .faq` fade rules above, so they are
   restated here at body.dk weight; otherwise every FAQ on the site steps straight from its neighbour's colour. */
body.dk .band + .faq, body.dk .proof + .faq, body.dk .bigs + .faq, body.dk .motion + .faq, body.dk .arow-sec + .faq,
body.dk .platform + .faq, body.dk .psp-band--paper + .faq, body.dk .sc-band--paper + .faq, body.dk .mx-row + .faq,
body.dk .acc + .faq, body.dk .band--2 + .faq, body.dk .res + .faq, body.dk .atx-plat + .faq, body.dk .srx-motion + .faq,
body.dk .quotes + .faq { background: linear-gradient(180deg, var(--paper) 0, var(--paper-2) var(--fade)); }
body.dk .acc + .faq, body.dk .band--2 + .faq, body.dk .res + .faq { background: var(--paper-2); }
body.dk .band--white + .faq, body.dk .psp-band--white + .faq, body.dk .sc-band--white + .faq,
body.dk .mx-row--white + .faq, body.dk .pf-section + .faq { background: linear-gradient(180deg, #fff 0, var(--paper-2) var(--fade)); }

/* a centred hero's paragraph must centre too: `body.dk .sub` (0,2,0) sets `margin: 18px 0 0`, which beats the plain
   `.phero .sub { margin: … auto }` and pins the paragraph to the left of the wrap on every centred hero. */
body.dk .phero:not(.phero--photo) .sub, body.dk .atx-hero .lead, body.dk .atx-hero .sub { margin-left: auto; margin-right: auto; }

/* a hidden `@@quotes` band sits between `.acc` and the FAQ on most product pages, so `.acc + .faq` never matches and
   the FAQ restarts its fade from paper over a band that is already paper-2. Skip the hidden band. */
body.dk .band:not(.band--2) + .quotes[hidden] + .faq, body.dk .motion + .quotes[hidden] + .faq,
body.dk .arow-sec + .quotes[hidden] + .faq, body.dk .psp-watch + .quotes[hidden] + .faq,
body.dk .mx-motion + .quotes[hidden] + .faq, body.dk .srx-motion + .quotes[hidden] + .faq
  { background: linear-gradient(180deg, var(--paper) 0, var(--paper-2) var(--fade)); }
body.dk .acc + .quotes[hidden] + .faq, body.dk .band--2 + .quotes[hidden] + .faq, body.dk .res + .quotes[hidden] + .faq
  { background: var(--paper-2); }

/* the end region's glow used to start at full strength on its first pixel, which drew a visible line where a navy band
   above it met the fend (the industries hub, For talent). It now fades in over the first 150px. */
.fend::before { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 150px); mask-image: linear-gradient(180deg, transparent 0, #000 150px); }


/* ---------- the accelerator head (Mark, 2026-09-16) ----------
   "Why teams switch" was an eyebrow over the title. It is now the title itself,
   in the "Built for volume" style, revealed word by word as you scroll, with the
   line it used to introduce sitting smaller underneath. */
.acc .acc-head { max-width: 980px; margin-bottom: clamp(40px, 5.6vh, 62px); }
.acc .acc-h { margin: 0; font: 900 clamp(36px, 5.2vw, 64px)/1.03 var(--font-display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.acc .acc-sub { margin: 15px 0 0; font: 700 clamp(20px, 2.2vw, 29px)/1.22 var(--font-display); letter-spacing: -.02em; color: var(--body); text-wrap: balance; }