/* Radius OS - AI Interviewer subpage (file keeps its screener name)
   Page-specific styles. Loads AFTER styles.css and reuses its tokens,
   nav, footer, buttons, eyebrow, faq and compliance components.
   Screener accent = emerald (matches the Solutions dropdown tile). */

body.sc-page { --accent: var(--emerald); --accent-ink: var(--emerald-ink); --accent-dp: var(--emerald-dp); }

/* subpage nav is always solid: the hero is light, so nav text must be dark from the top */
body.sc-page .nav { background: rgba(244, 247, 244, 0.82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom-color: var(--line-soft); }
body.sc-page .nav__logo { background: var(--grad-blue); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
body.sc-page .nav__logo b { color: transparent; -webkit-text-fill-color: transparent; }
body.sc-page .nav__link { color: var(--ink); }
body.sc-page .nav__link:hover, body.sc-page .nav__link.active { background: rgba(20, 33, 63, 0.05); }
body.sc-page .nav__login { color: var(--body); }
body.sc-page .nav .btn--sm { background: var(--grad-blue); color: #fff; }
body.sc-page .nav .btn--sm:hover { background: var(--grad-emerald); color: var(--ink); }

/* shared section eyebrow with a small product glyph */
.sc-eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.sc-eyebrow .sc-glyph { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(150deg, #E4EEFB, #D7E7FB); color: var(--emerald-dp); }
.sc-eyebrow .sc-glyph .icon { width: 15px; height: 15px; }

/* ============ HERO ============ */
.sc-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; padding: var(--hero-top) 0 clamp(30px, 4vh, 48px); overflow: hidden; }
.sc-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(46% 52% at 82% 30%, rgba(47, 107, 235, 0.16), transparent 62%),
    radial-gradient(40% 46% at 12% 8%, rgba(47, 88, 168, 0.10), transparent 60%);
}
.sc-hero__grid { flex: 1; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(30px, 5vw, 72px); align-items: center; }
.sc-hero__copy { align-self: start; }
.sc-hero h1 { font-size: clamp(38px, 4.4vw, 58px); line-height: 1.03; letter-spacing: -0.026em; color: var(--ink); font-weight: 680; margin: 18px 0 0; text-wrap: balance; }
.sc-hero .lead { margin-top: 20px; max-width: 34ch; }
.sc-hero__cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 30px; }
/* ============ CAPABILITIES ============ */
.sc-caps { padding: clamp(64px, 8vh, 96px) 0; }
.sc-caps__head { max-width: 660px; margin: 0 auto 44px; text-align: center; }
.sc-caps__head h2 { margin-top: 15px; }
.sc-caps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sc-cap { padding: 26px 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--shadow-soft); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.sc-cap:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(20, 33, 63, 0.32); }
.sc-cap__ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, rgba(47, 107, 235, 0.15), rgba(47, 88, 168, 0.1)); color: var(--emerald-dp); margin-bottom: 16px; }
.sc-cap__ic .icon { width: 21px; height: 21px; }
.sc-cap b { display: block; font-size: 16px; font-weight: 640; color: var(--ink); letter-spacing: -0.01em; }
.sc-cap p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--body); }

/* ============ PROOF ============ */
.sc-proof { padding: clamp(64px, 8vh, 92px) 0; }
.sc-proof__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 52px); align-items: center; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 26px; padding: clamp(30px, 4vw, 48px); box-shadow: var(--shadow-soft); }
.sc-proof__stat b { font-size: clamp(40px, 5vw, 60px); font-weight: 720; letter-spacing: -0.03em; line-height: 1; color: var(--ink); display: block; }
.sc-proof__stat b em { font-style: normal; color: var(--emerald-dp); }
.sc-proof__stat span { display: block; margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--body); max-width: 32ch; }
.sc-proof__tag { display: inline-flex; margin-top: 18px; font-size: 11px; font-weight: 640; letter-spacing: 0.04em; text-transform: uppercase; color: var(--emerald-dp); background: rgba(47, 107, 235, 0.1); padding: 5px 11px; border-radius: 99px; }
.sc-quote { border-left: 3px solid var(--emerald); padding-left: 22px; }
.sc-quote p { font-size: 18px; line-height: 1.55; color: var(--ink); font-weight: 520; }
.sc-quote .by { display: flex; align-items: center; gap: 11px; margin-top: 18px; }
.sc-quote .by .a { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(150deg, #C6D6EC, #A9C2E4); }
.sc-quote .by b { font-size: 14px; color: var(--ink); display: block; }
.sc-quote .by span { font-size: 12.5px; color: var(--mute); }

/* ============ FRONTLINE STRIP ============ */
.sc-fl { padding: clamp(48px, 6vh, 72px) 0; }
.sc-fl__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.sc-fl h3 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 640; letter-spacing: -0.02em; color: var(--ink); max-width: 20ch; }
.sc-fl__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 560; color: var(--ink); background: var(--surface); border: 1px solid var(--line-soft); border-radius: 99px; padding: 9px 16px; box-shadow: var(--shadow-soft); }
.sc-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); }

/* ============ PLATFORM HANDOFF ============ */
.sc-plat { padding: clamp(64px, 8vh, 96px) 0; }
.sc-plat__head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.sc-plat__head h2 { margin-top: 15px; }
.sc-plat__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sc-plink { display: block; padding: 26px 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--shadow-soft); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.sc-plink:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(20, 33, 63, 0.32); }
.sc-plink__ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.sc-plink__ic .icon { width: 20px; height: 20px; }
.sc-plink--src .sc-plink__ic { background: linear-gradient(150deg, #E4EEF6, #D3E4F2); color: var(--blue); }
.sc-plink--ats .sc-plink__ic { background: linear-gradient(150deg, #E8ECF2, #DBE2EE); color: var(--cobalt); }
.sc-plink--pass .sc-plink__ic { background: linear-gradient(150deg, #E4EEFB, #D7E7FB); color: var(--emerald-dp); }
.sc-plink b { display: block; font-size: 16px; font-weight: 650; color: var(--ink); }
.sc-plink p { margin-top: 7px; font-size: 13.5px; line-height: 1.5; color: var(--body); }
.sc-plink .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; font-weight: 620; color: var(--blue-deep); }
.sc-plink .go .icon { width: 14px; height: 14px; }
.sc-plat__note { text-align: center; margin-top: 28px; font-size: 15.5px; color: var(--body); }
.sc-plat__note b { color: var(--ink); font-weight: 640; }

/* Trust band reuses the main page's .compliance + .c-badges + .pass-card components. */

/* ============ CLOSING CTA ============ */
.sc-cta { padding: clamp(64px, 8vh, 100px) 0; text-align: center; }
.sc-cta h2 { font-size: clamp(30px, 4vw, 48px); font-weight: 680; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.sc-cta p { margin: 16px auto 0; max-width: 44ch; font-size: 17px; line-height: 1.55; color: var(--body); }
.sc-cta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .sc-hero__grid { grid-template-columns: 1fr; }
  .sc-hero .lead { max-width: none; }
  .sc-track { grid-template-columns: 1fr 1fr; }
  .sc-track::before { display: none; }
  .sc-out__grid { grid-template-columns: 1fr; }
  .sc-caps__grid { grid-template-columns: 1fr 1fr; }
  .sc-plat__grid { grid-template-columns: 1fr; }
  .sc-proof__inner { grid-template-columns: 1fr; }
  .sc-trust__grid { grid-template-columns: 1fr; }
  .sc-figs { grid-template-columns: 1fr; }
  .sc-pain__list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sc-track { grid-template-columns: 1fr; }
  .sc-caps__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   v2 feedback: button anim, spotlight caps, bigger mocks,
   sticky faq, one-platform flow, dedicated Passport section
   ============================================================ */

/* Book a demo: green hover + lift, same as the main page */
body.sc-page .btn:hover { background: var(--grad-emerald); color: var(--ink); box-shadow: 0 18px 34px -14px rgba(46, 92, 92, 0.5); }

/* caps cards: HeyMilo cursor-tracking spotlight border */
.sc-cap { position: relative; }
.sc-cap::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; pointer-events: none;
  background: linear-gradient(140deg, #4E86D2, #2F6BEB);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s var(--ease);
}
.sc-cap:hover::before { opacity: 1; }
.sc-cap__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; font-weight: 640; color: var(--blue-deep); }
.sc-cap__link .icon { width: 14px; height: 14px; }

/* really big journey pictures: 2 columns, tall frames (real system screenshots drop in here) */
.sc-track { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; }
.sc-track::before { display: none; }
.sc-mock { min-height: 400px; }
.sc-step__cap b { font-size: 18px; margin-top: 18px; }
.sc-step__cap span { font-size: 15px; }

/* sticky FAQ heading: it holds while the questions scroll, then releases */
body.sc-page .faq__head { position: sticky; top: 96px; }

/* one-platform: Sourcer -> Screener -> ATS, working together */
.sc-flow { position: relative; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; max-width: 900px; margin: 4px auto 30px; }
.sc-flow__node { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; padding: 22px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--shadow-soft); z-index: 1; }
.sc-flow__node .ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.sc-flow__node .ic .icon { width: 21px; height: 21px; }
.sc-flow--src .ic { background: linear-gradient(150deg, #E4EEF6, #D3E4F2); color: var(--blue); }
.sc-flow--scr .ic { background: linear-gradient(150deg, #E4EEFB, #D7E7FB); color: var(--emerald-dp); }
.sc-flow--ats .ic { background: linear-gradient(150deg, #E8ECF2, #DBE2EE); color: var(--cobalt); }
.sc-flow__node b { font-size: 15.5px; font-weight: 650; color: var(--ink); }
.sc-flow__node span { font-size: 12.5px; color: var(--body); }
.sc-flow__wire { height: 2px; min-width: 40px; background: linear-gradient(90deg, rgba(47,88,168,0.15), rgba(47, 107, 235,0.35), rgba(47,88,168,0.15)); }
.sc-flow__token { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 6px rgba(47, 107, 235, 0.16); transform: translate(-50%, -50%); animation: sc-travel 5.5s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes sc-travel {
  0%   { left: 16.6%; opacity: 0; }
  8%   { left: 16.6%; opacity: 1; }
  24%  { left: 16.6%; opacity: 1; }
  44%  { left: 50%;   opacity: 1; }
  60%  { left: 50%;   opacity: 1; }
  84%  { left: 83.4%; opacity: 1; }
  96%  { left: 83.4%; opacity: 1; }
  100% { left: 83.4%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .sc-flow__token { animation: none; left: 50%; } }

/* dedicated Radius Passport section */
.sc-pass { padding: clamp(64px, 8vh, 100px) 0; }
.sc-pass__grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.sc-pass__copy h2 { margin-top: 0; }
.sc-pass__copy p { margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--body); }
.sc-pass__copy .em { color: var(--ink); font-weight: 620; }
.sc-pass__list { margin-top: 22px; display: flex; flex-direction: column; gap: 13px; }
.sc-pass__list li { display: flex; gap: 12px; align-items: center; font-size: 15px; color: var(--ink); }
.sc-pass__list .ic { flex: none; width: 26px; height: 26px; border-radius: 8px; background: rgba(47, 107, 235, 0.14); color: var(--emerald-dp); display: flex; align-items: center; justify-content: center; }
.sc-pass__list .ic .icon { width: 15px; height: 15px; }
.sc-passcard { position: relative; background: linear-gradient(160deg, #1a2f4a, #0f1d30); border-radius: 24px; padding: 28px; color: #fff; box-shadow: 0 44px 96px -52px rgba(15, 29, 48, 0.6); }
.sc-passcard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.sc-passcard__top .l { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 660; }
.sc-passcard__top .l .icon { width: 19px; height: 19px; color: var(--ice); }
.sc-passcard__top .tag { background: rgba(191, 227, 222, 0.16); color: var(--ice); }
.sc-passcard__cand { display: flex; align-items: center; gap: 13px; padding: 17px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.sc-passcard__cand .a { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(150deg, #2F6BEB, #1E3ABA); display: flex; align-items: center; justify-content: center; font-weight: 680; font-size: 15px; }
.sc-passcard__cand b { display: block; font-size: 15.5px; }
.sc-passcard__cand span { font-size: 12.5px; color: rgba(224, 233, 246, 0.72); }
.sc-passcard__chk { display: flex; align-items: center; gap: 11px; margin-top: 16px; font-size: 14px; font-weight: 560; color: var(--ice); }
.sc-passcard__chk .icon { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: rgba(47, 107, 235, 0.24); color: #fff; }
.sc-passcard__foot { margin-top: 18px; font-size: 12.5px; line-height: 1.5; color: rgba(224, 233, 246, 0.64); }

@media (max-width: 900px) {
  .sc-flow { grid-template-columns: 1fr; gap: 10px; max-width: 340px; }
  .sc-flow__wire { display: none; }
  .sc-flow__token { display: none; }
  .sc-pass__grid { grid-template-columns: 1fr; }
  body.sc-page .faq__head { position: static; }
}

/* ============ KILL THE CV: heading + numbers + comparison table ============ */
.sc-killcv { padding: clamp(64px, 8vh, 100px) 0; }
.sc-killcv__head { text-align: center; max-width: 720px; margin: 0 auto; }
.sc-killcv__head .lead { margin: 16px auto 0; }
.sc-killcv .sc-figs { margin: 42px 0 0; }
.sc-fig b em { font-style: normal; color: var(--emerald-dp); }
.sc-cmp { margin: 44px auto 0; max-width: 940px; border: 1px solid var(--line-soft); border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: 0 30px 70px -45px rgba(20, 33, 63, 0.3); }
.sc-cmp__row { display: grid; grid-template-columns: 0.9fr 1.15fr 1.25fr; }
.sc-cmp__row + .sc-cmp__row { border-top: 1px solid var(--line-soft); }
.sc-cmp__c { padding: 15px 20px; font-size: 14.5px; line-height: 1.4; display: flex; align-items: center; gap: 9px; }
.sc-cmp__c--feat { font-weight: 640; color: var(--ink); background: #FAFCFB; }
.sc-cmp__c--trad { color: var(--mute); }
.sc-cmp__c--rad { color: var(--ink); font-weight: 550; background: rgba(47, 107, 235, 0.06); box-shadow: inset 2px 0 0 rgba(47, 107, 235, 0.35), inset -2px 0 0 rgba(47, 107, 235, 0.35); }
.sc-cmp__c--rad .icon { width: 16px; height: 16px; color: var(--emerald); flex: none; }
.sc-cmp__row--head .sc-cmp__c { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding-top: 17px; padding-bottom: 17px; }
.sc-cmp__row--head .sc-cmp__c--trad { color: var(--body); }
.sc-cmp__row--head .sc-cmp__c--rad { color: var(--emerald-dp); box-shadow: inset 2px 0 0 rgba(47, 107, 235, 0.45), inset -2px 0 0 rgba(47, 107, 235, 0.45), inset 0 2px 0 rgba(47, 107, 235, 0.45); }
.sc-cmp__row:last-child .sc-cmp__c--rad { box-shadow: inset 2px 0 0 rgba(47, 107, 235, 0.35), inset -2px 0 0 rgba(47, 107, 235, 0.35), inset 0 -2px 0 rgba(47, 107, 235, 0.45); }
@media (max-width: 720px) {
  .sc-cmp__row { grid-template-columns: 1fr 1fr; }
  .sc-cmp__c--feat { grid-column: 1 / -1; display: flex; padding-bottom: 8px; background: var(--paper); }
  .sc-cmp__row--head .sc-cmp__c--feat { display: none; }
  .sc-cmp__c { padding: 13px 14px; font-size: 12.5px; }
  .sc-cmp__row:not(.sc-cmp__row--head) .sc-cmp__c--trad,
  .sc-cmp__row:not(.sc-cmp__row--head) .sc-cmp__c--rad { padding-top: 10px; }
}

/* ============ SCROLLYTELLING journey: text scrolls on the left, ONE sticky visual on the right ============
   Rebuilt to five steps on 2026-09-09. Each step is a numbered block; the
   heading links out when the brief names a page. The visual on the right is
   the shared grammar from sections.css: a tinted panel with a flat white
   card for pure UI, the navy slot with a glass bubble for the video. */
.scrolly { padding: clamp(18px, 2.5vh, 36px) 0 clamp(48px, 7vh, 84px); }
.scrolly__head { text-align: center; max-width: 720px; margin: 0 auto; }
.scrolly__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 72px); margin-top: 8px; }
.scrolly__step { min-height: 64vh; display: grid; grid-template-columns: 34px 1fr; column-gap: 16px; align-content: center; align-items: start; }
/* the heading stays full ink on every step (no grey text); only the paragraph, the link and the number ring step back when the step is not the one in view */
.scrolly__step p, .scrolly__step .text-link, .scrolly__step .scrolly__soon { transition: opacity .45s var(--ease); }
.scrolly__step:not(.active) p, .scrolly__step:not(.active) .text-link, .scrolly__step:not(.active) .scrolly__soon { opacity: .55; }
.scrolly__n { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; margin-top: 4px; border: 1.5px solid rgba(11, 20, 64, .3); font: 700 14px/1 var(--font-display); color: var(--ink); }
.scrolly__step.active .scrolly__n { background: var(--grad-blue); border-color: transparent; color: #fff; }
.scrolly__step h3 { font-size: clamp(26px, 3vw, 38px); font-weight: 680; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 14px; line-height: 1.06; }
.scrolly__step h3 a { color: inherit; text-decoration: none; }
.scrolly__step h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: rgba(47, 107, 235, .55); }
.scrolly__step p { font-size: 17px; line-height: 1.6; color: var(--body); max-width: 42ch; }
.scrolly__step .text-link { margin-top: 16px; }
.scrolly__step .text-link .icon { width: 15px; height: 15px; }
.scrolly__soon { display: inline-block; margin-top: 16px; font: 600 14.5px/1 var(--font-body); color: var(--mute); }
.scrolly__vis { position: relative; }
.scrolly__sticky { position: sticky; top: 84px; height: min(76vh, 600px); }
.scrolly__mock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.98); transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events: none; }
.scrolly__mock.on { opacity: 1; transform: none; pointer-events: auto; }
/* the visual box: same footprint as the old 4:5 frames */
.scrolly__mock .sc-stage { width: min(440px, 100%); aspect-ratio: 4 / 5; min-height: 0; max-height: 100%; }
.scrolly__mock .sc-stage.arow__vis--panel { padding: clamp(22px, 2.6vw, 34px); }

/* sections.css: .reqcard__who span outranks .reqcard__av and turns the avatar into a block of body text; put it back */
.sc-page .reqcard__who .reqcard__av { display: inline-grid; font: 800 12px/1 var(--font-display); color: #fff; }

/* step 1, the editor: tick boxes on the requirement rows, the questions under them */
.sc-editor .reqcard__av .icon { width: 17px; height: 17px; }
.sc-editor__row { grid-template-columns: 1fr 20px; }
.sc-editor__row.is-on { font-weight: 700; }
.sc-tick { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid rgba(11, 20, 64, .3); display: inline-grid; place-items: center; color: #fff; }
.sc-tick .icon { width: 12px; height: 12px; }
.sc-editor__row.is-on .sc-tick { background: var(--cobalt); border-color: var(--cobalt); }
.sc-editor__qs { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.sc-editor__qs > b { display: block; font: 700 12.5px/1.3 var(--font-display); color: var(--body); margin-bottom: 4px; }
.sc-editor__q { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; font: 500 14px/1.35 var(--font-body); color: var(--ink); }
.sc-editor__q + .sc-editor__q { border-top: 1px solid var(--line-soft); }
.sc-editor__q .icon { width: 15px; height: 15px; color: var(--body); flex: none; }

/* step 2, the channels web (round 2): the Radius mark in the middle, a short
   signal line out to each place a person can apply, and a person arriving on
   three of them. One object, nothing else on the stage. */
.sc-stage--web.arow__vis--panel { padding: 20px; }
.sc-web { position: relative; width: min(360px, 100%); aspect-ratio: 1 / 1; }
.sc-web__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sc-web__base line { stroke: rgba(11, 20, 64, .16); stroke-width: 1.5; stroke-dasharray: 3 5; stroke-linecap: round; }
.sc-web__pulse line { stroke: var(--cobalt); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 15 320; stroke-dashoffset: 15; animation: scWeb 2.8s linear infinite; animation-delay: calc(var(--i) * .34s); }
@keyframes scWeb { 0% { stroke-dashoffset: 15; opacity: 0; } 12% { opacity: 1; } 74% { opacity: 1; } 100% { stroke-dashoffset: -104; opacity: 0; } }
.sc-web__hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line-soft); box-shadow: 0 16px 34px -14px rgba(11, 20, 64, .4); color: var(--cobalt); }
.sc-web__hub .nav__mark { margin: 0; width: 20px; height: 26px; }
.sc-web__n { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 7px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--line-soft); box-shadow: 0 10px 22px -12px rgba(11, 20, 64, .38); font: 640 11.5px/1 var(--font-display); color: var(--ink); }
.sc-web__n .icon { width: 13px; height: 13px; color: var(--body); flex: none; }
.sc-web__p { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; background: rgba(33, 169, 122, .14); color: #0F6E4E; margin-left: 2px; flex: none;
  opacity: 0; transform: scale(.6); animation: scWebP 2.8s var(--ease) infinite; animation-delay: calc(var(--i) * .34s + .55s); }
.sc-web__p .icon { width: 11px; height: 11px; color: inherit; }
@keyframes scWebP { 0% { opacity: 0; transform: scale(.6); } 18% { opacity: 1; transform: scale(1); } 78% { opacity: 1; transform: scale(1); } 92% { opacity: 0; transform: scale(.9); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sc-web__pulse line { animation: none; stroke-dashoffset: -44; opacity: .9; }
  .sc-web__p { animation: none; opacity: 1; transform: none; }
}

/* step 3, the video: the glass bubble lives in sections.css; the language tag on the header line */
.sc-stage--video { min-height: 0; }
.scrolly__mock .sc-stage--video { width: min(560px, 100%); aspect-ratio: 3 / 2; }
/* the talk column on the video mock: a third of the frame, one side only */
.sc-talk { left: 18px; top: 18px; width: min(190px, 33%); gap: 8px; }
.sc-bubs.sc-bubs--tall { height: 58px; }
.sc-hero__lang { margin-left: auto; font: 500 11.5px/1 var(--font-body); font-style: normal; opacity: .72; white-space: nowrap; }

/* a real face in the flat cards (round 2, law 5: the mock is a person, not a record) */
.sc-avph { overflow: hidden; background: var(--paper-2); padding: 0; }
.sc-avph img { border-radius: inherit; }

/* step 5, the pipeline: three columns, the card moves from Interviewed to Offer, then the signed chip */
.sc-pipe { position: relative; width: 100%; background: #fff; border: 1px solid var(--line-soft); border-radius: 18px; padding: 16px; box-shadow: 0 18px 44px -18px rgba(11, 20, 64, .28); }
.sc-pipe__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-pipe__col { display: flex; flex-direction: column; gap: 8px; min-height: 420px; background: var(--paper-2); border-radius: 12px; padding: 10px 8px; }
.sc-pipe__col i { display: block; font: 700 11.5px/1 var(--font-display); letter-spacing: .02em; color: var(--body); font-style: normal; padding: 0 2px 6px; }
.sc-pipe__hole { display: block; height: 70px; border-radius: 10px; border: 1.5px dashed rgba(11, 20, 64, .14); }
.sc-pipe__ghost { display: block; height: 70px; border-radius: 10px; background: #fff; border: 1px solid var(--line-soft); }
.sc-pipe__card { position: absolute; left: 24px; top: 46px; width: calc((100% - 42px) / 2 - 16px); height: 70px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 8px; background: #fff; border-radius: 10px; border: 1px solid var(--line-soft); box-shadow: 0 12px 26px -12px rgba(11, 20, 64, .35); animation: scPipeMove 8s var(--ease) infinite; }
.sc-pipe__card .reqcard__av { width: 28px; height: 28px; font-size: 10px; flex: none; }
.sc-pipe__card b { display: block; font: 700 11.5px/1.2 var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.sc-pipe__card div span { display: block; font: 500 10.5px/1.2 var(--font-body); color: var(--body); margin-top: 2px; }
.sc-pipe__chip { position: absolute; right: 24px; top: 130px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 12.5px/1 var(--font-display); white-space: nowrap; box-shadow: 0 12px 28px -12px rgba(11, 20, 64, .5); animation: scPipeChip 8s var(--ease) infinite; }
.sc-pipe__chip .gcard__st { width: 18px; height: 18px; }
.sc-pipe__chip .gcard__st .icon { width: 11px; height: 11px; }
@keyframes scPipeMove {
  0% { opacity: 0; transform: none; }
  6%, 22% { opacity: 1; transform: none; }
  38%, 92% { opacity: 1; transform: translateX(calc(100% + 26px)); }
  100% { opacity: 0; transform: translateX(calc(100% + 26px)); }
}
@keyframes scPipeChip {
  0%, 50% { opacity: 0; transform: translateY(8px); }
  58%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-pipe__card { animation: none; transform: translateX(calc(100% + 26px)); }
  .sc-pipe__chip { animation: none; opacity: 1; }
}

@media (max-width: 900px) {
  .scrolly__grid { grid-template-columns: 1fr; gap: 6px; }
  .scrolly__text { display: grid; gap: 38px; }
  .scrolly__vis { display: none; }
  .scrolly__step { min-height: 0; opacity: 1; padding: 24px 0 0; }
  .scrolly__sticky { position: static; height: auto; display: flex; flex-direction: column; gap: 18px; margin-top: 6px; }
  /* the visual moves under its step (screener.js does the move); it spans the step's text column */
  .scrolly__mock { position: static; opacity: 1; transform: none; pointer-events: auto; margin-top: 18px; grid-column: 1 / -1; }
  .scrolly__mock .sc-stage { width: 100%; aspect-ratio: auto; max-height: none; }
  .scrolly__mock .sc-stage--video { aspect-ratio: 4 / 5; }
  .scrolly__mock .sc-stage--video { width: 100%; aspect-ratio: 4 / 5; }
  .sc-talk { width: min(200px, 58%); }
}

/* ============ BETTER FOR BOTH ============ */
.sc-both { padding: clamp(64px, 8vh, 100px) 0; }
.sc-both__head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.sc-both__head .lead { margin: 15px auto 0; }
.sc-both__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sc-both__col { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 20px; padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow-soft); }
.sc-both__label { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--emerald-dp); margin-bottom: 18px; }
.sc-both__label .icon { width: 17px; height: 17px; }
.sc-both__col ul { display: flex; flex-direction: column; gap: 14px; }
.sc-both__col li { display: flex; gap: 11px; font-size: 15.5px; line-height: 1.5; color: var(--body); }
.sc-both__col li .icon { width: 17px; height: 17px; color: var(--emerald); flex: none; margin-top: 2px; }
@media (max-width: 760px) { .sc-both__grid { grid-template-columns: 1fr; } }

/* ============================================================
   KILL THE CV (Mark, 2026-07-27)
   It used to just appear. Now the three words rise in order and
   a rule is drawn through "CV" as it lands: the sentence performs
   what it says. Once, on arrival.
   ============================================================ */
.sc-kill { display: block; }
.sc-kill__w {
  display: inline-block;
  opacity: 0; transform: translateY(0.34em);
  transition: opacity .62s var(--ease), transform .62s var(--ease);
}
.sc-kill.is-lit .sc-kill__w { opacity: 1; transform: none; }
.sc-kill.is-lit .sc-kill__w:nth-child(1) { transition-delay: .02s; }
.sc-kill.is-lit .sc-kill__w:nth-child(2) { transition-delay: .13s; }
.sc-kill.is-lit .sc-kill__w:nth-child(3) { transition-delay: .24s; }

/* the strike: drawn through CV once the word has landed */
.sc-kill__w--cv { position: relative; }
.sc-kill__strike {
  position: absolute; left: -.04em; right: -.04em; top: 54%;
  height: .075em; border-radius: 999px;
  background: var(--grad-blue, linear-gradient(96deg,#2F6BEB,#33549E));
  transform: scaleX(0); transform-origin: left;
  transition: transform .74s cubic-bezier(.62,.03,.2,1) .62s;
}
.sc-kill.is-lit .sc-kill__strike { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .sc-kill__w { opacity: 1 !important; transform: none !important; }
  .sc-kill__strike { transform: scaleX(1) !important; transition: none !important; }
}

/* both sides of the table has to fit ONE screen (Mark, 2026-07-27, twice).
   min-height alone never did it: the two 3/4 portraits were 713px tall on
   their own, so on an 830px laptop the section ran 1.15 viewports whatever
   the padding did. The frames now take their height from the viewport minus
   the fixed chrome above them, and the crop absorbs the difference. The top
   padding also clears the fixed 64px nav so the heading is never under it. */
@media (min-width: 981px) {
  .sc-both { min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
             padding: clamp(78px, 10vh, 104px) 0 clamp(24px, 3vh, 44px); }
  .sc-both__head { margin-bottom: clamp(20px, 3vh, 36px); }
  .sc-both .sc-both__col .mframe { aspect-ratio: auto; height: clamp(300px, calc(100svh - 288px), 700px); }
  .sc-both__col ul { gap: clamp(10px, 1.4vh, 14px); }
  .sc-both__col { padding: 0; }
}

/* ============================================================
   HERO, rebuilt 2026-09-09: one video with the candidate card
   docked over its bottom-right edge. The film is the clipped box
   (position:relative, overflow:hidden, isolation:isolate) that
   holds the empty slot and the two glass cards; the candidate
   card is its sibling so it can overlap the film's edge by 18px
   on both axes. The film's height is capped from the viewport so
   the hero stays exactly one screen at 860 and 760 tall.
   ============================================================ */
.sc-hero > .wrap { width: min(1280px, calc(100% - 48px)); }
.sc-hero__grid { grid-template-columns: 0.86fr 1.5fr; align-items: center; }
.sc-hero__copy h1 { max-width: 15ch; }
.sc-hero__copy .lead { max-width: 46ch; }
.sc-hero__stage { position: relative; z-index: 0; padding: 0; }
.sc-hero__stage::before { content: ""; position: absolute; inset: -12% -9%; z-index: -1; pointer-events: none; border-radius: 40px;
  background: radial-gradient(38% 60% at 0% 30%, rgba(47,107,235,.11), transparent 66%), radial-gradient(40% 62% at 100% 72%, rgba(51,84,158,.10), transparent 68%); }
.sc-hero__film { position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; aspect-ratio: 5 / 4; max-height: calc(100svh - var(--hero-top) - 64px);
  box-shadow: 0 1px 2px rgba(11,20,64,.05), 0 18px 40px -18px rgba(11,20,64,.26), 0 46px 72px -34px rgba(11,20,64,.3); }
.sc-hero__bub { left: 22px; top: 22px; }
.sc-hero__find { left: 22px; top: 128px; }
.sc-hero__find .gcard__row:first-child { padding-top: 2px; padding-bottom: 2px; }
/* ROUND 2 (Mark, 2026-09-09): all the hero UI lives in ONE narrow column on the
   left third of the film. The middle and right of the frame belong to the
   person. Nothing here is wider than a third of the film. */
.sc-uicol { position: absolute; left: 20px; top: 20px; width: min(224px, 33%); z-index: 3; display: flex; flex-direction: column; gap: 9px; }
.sc-uicol .gcard { position: relative; left: auto; top: auto; right: auto; bottom: auto; width: 100%; max-width: none; }
.sc-hero__who > .c { padding: 9px 11px 8px; }
.sc-hero__who .gcard__hd { margin-bottom: 7px; gap: 7px; font-size: 11.5px; }
.sc-avimg { overflow: hidden; background: rgba(255, 255, 255, .18); }
/* ROUND 2 FIX (law 5, the face has to be a face): cand-*.jpg are 1264x848
   environmental wides. In a SQUARE avatar, object-fit:cover fills by height,
   so the whole frame height shows, only left and right are cropped, and the
   vertical half of object-position does nothing at all. A 20px bubble avatar
   was rendering a whole warehouse aisle. Scale up around the face centre
   (consistent across all three assets) so the crop is head and shoulders.
   Parents all carry overflow:hidden, so the scale is clipped to the avatar. */
.sc-avimg img, .sc-profile__pic img, .sc-avph img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  object-position: 49% 31%; transform: scale(2.3); transform-origin: 49% 31%;
}

.sc-avimg img { border-radius: inherit; }
.sc-live { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1 var(--font-display); letter-spacing: .01em; color: rgba(255, 255, 255, .9); }
.sc-live i { width: 6px; height: 6px; border-radius: 50%; background: #4BD6A4; animation: scLive 2s ease-out infinite; }
@keyframes scLive { 0% { box-shadow: 0 0 0 0 rgba(75, 214, 164, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(75, 214, 164, 0); } }
/* the talk: four lines, one every 2.8s, stacked in the same spot */
.sc-bubs { position: relative; height: 54px; }
.sc-bubs .gcard { position: absolute; left: 0; top: 0; }
.sc-bub > .c { padding: 9px 11px; }
.sc-bub .gcard__msg { font-size: 12px; line-height: 1.36; }
.sc-uicol .sc-hero__find > .c { padding: 8px 10px; }
.sc-uicol .sc-hero__find .gcard__row:first-child { padding-top: 0; padding-bottom: 0; }
.sc-uicol .sc-hero__find .gcard__ico, .sc-uicol .sc-hero__find .gcard__st { width: 16px; height: 16px; }
.sc-uicol .sc-hero__find .gcard__lab b { font-size: 11.5px; }
.sc-uicol .sc-hero__find .gcard__lab span { font-size: 10.5px; }
/* the candidate card: what the interview produced, docked over the film's corner */
.sc-profile { position: absolute; right: 0; bottom: 0; z-index: 4; width: min(208px, 31%); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,250,246,.96)); border: 1px solid rgba(255,255,255,.72); box-shadow: 0 1px 2px rgba(11,20,64,.05), 0 18px 40px -18px rgba(11,20,64,.26), 0 46px 72px -34px rgba(11,20,64,.3); font-family: var(--font-body); }
.sc-profile__body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.sc-profile__hd { display: flex; align-items: center; gap: 9px; }
.sc-profile__pic { width: 34px; height: 34px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; font: 700 13px/1 var(--font-display); color: #fff; background: linear-gradient(140deg,#2F6BEB,#66B6E6 72%,#98F9D6); flex: none; box-shadow: 0 5px 12px -4px rgba(47,107,235,.6); }

.sc-profile__id { flex: 1; min-width: 0; }
.sc-profile__id b { display: block; font: 700 14.5px/1.15 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.sc-profile__id > span { font-size: 11px; color: var(--body); }
.sc-profile__reqhd { font-size: 11px; color: var(--body); margin-bottom: 8px; }
.sc-profile__reqhd b { color: var(--blue); font-weight: 700; }
/* the rows: label on top, where it was checked underneath, one status ring each */
.sc-req { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sc-req li { display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; align-items: center; font-size: 12px; line-height: 1.2; color: var(--ink); font-weight: 500; }
.sc-req li em { grid-column: 2; margin-top: 2px; font: 500 10.5px/1.3 var(--font-body); font-style: normal; }
.sc-req .ic { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; grid-row: 1 / span 2; }
.sc-req .ic svg { width: 11px; height: 11px; }
.sc-req li.ok .ic { background: rgba(22,130,100,.13); color: #168264; }
.sc-req li.wait .ic { background: rgba(196,122,33,.15); color: #b06a1c; }
.sc-req li.ok em { color: #168264; }
.sc-req li.wait em { color: #b06a1c; }
.sc-profile__actions { display: flex; gap: 8px; }
.sc-profile__msg { flex: 0 0 auto; white-space: nowrap; font: 640 11px/1 var(--font-body); color: var(--ink); background: rgba(255,255,255,.9); border: 1px solid var(--line); border-radius: 999px; padding: 8px 11px; text-decoration: none; }
.sc-profile__offer { flex: 1; text-align: center; white-space: nowrap; font: 660 11px/1 var(--font-body); color: #fff; background: var(--grad-blue); border-radius: 999px; padding: 8px 11px; box-shadow: 0 8px 18px -8px rgba(30,58,186,.5); text-decoration: none; }
@media (max-width: 900px) {
  .sc-hero__grid { grid-template-columns: 1fr; }
  /* stacked: the card goes under the video, never over it */
  .sc-hero__stage { padding: 0; }
  .sc-hero__film { aspect-ratio: 4 / 5; max-height: none; }
  /* the portrait film is for phones; on a tablet the same ratio ran to 980px and
     the hero stood twice the screen tall (audit, 2026-09-12) */
  @media (min-width: 481px) { .sc-hero__film { aspect-ratio: 3 / 2; } }
  .sc-profile { position: static; width: 100%; margin-top: 14px; }
  /* stated exception to law 1: a 342px portrait frame cannot hold a legible
     12px transcript bubble AND clear the 40-60% band. The column is pulled to
     the left half instead, so the person owns the right half of the frame. */
  .sc-uicol { width: min(190px, 46%); left: 12px; }
}

/* ============================================================
   ROUND 2, law 7 (Mark, 2026-09-09): things arrive one by one and the
   area is never empty while the reader is looking at it. The rail is
   armed by JS, so if the script never runs the stops are simply there.
   ============================================================ */
.sc-rail.sc-stagger .sc-rail__stop { opacity: 0; transform: translateY(12px); }
.sc-rail.sc-stagger.is-in .sc-rail__stop { opacity: 1; transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
@media (prefers-reduced-motion: reduce) {
  .sc-rail.sc-stagger .sc-rail__stop { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ================================================================
   STEP 1 and STEP 2, the two builds Mark approved in preview-interview.html
   (2026-09-10). The job window keeps its own proportions and scales; the
   channel build runs the other way round from the Sourcer page's Find row.
   ================================================================ */
.uiface { display: block; background-repeat: no-repeat; background-size: 275% auto; background-color: #E8E2D6; }
.uiface--tomasz { background-image: url("assets/cand-tomasz.jpg"); background-position: 50% 30%; }
.uiface--sanne  { background-image: url("assets/cand-sanne.jpg");  background-position: 50% 14%; }
.uiface--daan   { background-image: url("assets/cand-daan.jpg");   background-position: 50% 23%; }
/* ================= 1. THE JOB, MADE IN THREE MOVES ================= */
.jbfit { position: relative; width: 100%; }
.jb { position: absolute; left: 50%; top: 50%; width: 600px; height: 428px; transform: translate(-50%, -50%); transform-origin: 50% 50%; background: #fff; border: 1px solid var(--line-soft);
  border-radius: 16px; box-shadow: 0 26px 62px -30px rgba(11,20,64,.5); overflow: hidden; }
.jb__bar { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 15px; border-bottom: 1px solid var(--line-soft); }
.sc-page .jb__bar .nav__mark { width: 12px; height: 16px; margin: 0; background: var(--ink); background-image: none; }
.jb__bar b { font: 700 12px/1 var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.jb__bar i { font-style: normal; font: 500 11.5px/1 var(--font-body); color: var(--body); }
.jb__body { position: relative; height: 387px; }
.jbs--c { gap: 9px; }
.jbs { position: absolute; inset: 0; display: grid; align-content: center; gap: 12px; padding: 20px 22px;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease); }
.jbs.is-on { opacity: 1; transform: none; }

.jbtop { display: flex; align-items: baseline; justify-content: space-between; }
.jbtop h4 { margin: 0; font: 900 25px/1 var(--font-display); letter-spacing: -.03em; color: var(--ink); }
.jbtop span { font: 700 12.5px/1 var(--font-display); color: var(--cobalt-dp); }

.jbc { border: 1px solid var(--line-soft); border-radius: 13px; padding: 15px 16px 14px; background: #fff;
  box-shadow: 0 14px 34px -26px rgba(11,20,64,.5); }
.jbc__h { display: block; font: 700 14.5px/1.2 var(--font-display); color: var(--ink); letter-spacing: -.018em; }
.jbc__p { margin: 5px 0 0; font: 500 11.5px/1.4 var(--font-body); color: var(--body); }

/* the paste box */
.jbta { position: relative; margin-top: 11px; height: 104px; border: 1.5px solid rgba(47,107,235,.55); border-radius: 10px;
  padding: 10px 12px; background: #fff; box-shadow: 0 0 0 3px rgba(47,107,235,.10); overflow: hidden; }
.jbta__tx { font: 500 11.5px/1.55 var(--font-body); color: var(--ink); }
.jbta__car { display: inline-block; width: 1.5px; height: 12px; vertical-align: -1px; background: var(--cobalt-dp); animation: blink 1.05s steps(1) infinite; }
.jbta__car.off { display: none; }
@keyframes blink { 0%,50% { opacity: 1 } 50.01%,100% { opacity: 0 } }

.jbft { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
.jbft--split { justify-content: space-between; }
.jbft .sp { margin-left: auto; }
.jbb { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  font: 700 11.5px/1 var(--font-display); letter-spacing: -.01em; white-space: nowrap;
  transition: transform .18s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
.jbb .icon { width: 12px; height: 12px; }
.jbb--gh { background: #fff; border: 1px solid var(--line-soft); color: var(--ink); }
.jbb--lk { color: var(--cobalt-dp); padding-left: 4px; padding-right: 4px; }
.jbb--mut { color: var(--body); padding-left: 4px; padding-right: 4px; }
.jbb--pr { background: var(--grad-blue); color: #fff; box-shadow: 0 10px 22px -12px rgba(30,58,186,.75); }
.jbb.press { transform: scale(.955); box-shadow: 0 4px 12px -8px rgba(30,58,186,.8); }
.jbsp { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }

/* the stepper line */
.jbst { display: flex; align-items: center; gap: 9px; }
.jbst__s { display: inline-flex; align-items: center; gap: 7px; font: 600 11.5px/1 var(--font-body); color: var(--body); transition: color .4s var(--ease); }
.jbst__s i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--paper-2); color: var(--body); font: 700 10.5px/1 var(--font-display); font-style: normal;
  transition: background .4s var(--ease), color .4s var(--ease); }
.jbst__s .icon { width: 11px; height: 11px; display: none; }
.jbst__s.now { color: var(--ink); } .jbst__s.now i { background: var(--grad-blue); color: #fff; }
.jbst__s.done { color: var(--ink); } .jbst__s.done i { background: #E3F5EC; color: #0F6E4E; }
.jbst__s.done b { display: none; } .jbst__s.done .icon { display: block; }
.jbst__ln { flex: 1; height: 1px; background: var(--line-soft); }

.jbf { display: grid; gap: 5px; }
.jbf + .jbf, .jbf2 + .jbf, .jbf + .jbf2 { margin-top: 10px; }
.jbf label { font: 600 11px/1 var(--font-body); color: var(--body); }
.jbf2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jbi { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border-radius: 9px;
  background: rgba(255,255,255,.5); border: 1px solid rgba(11,20,64,.08);
  transition: background .6s var(--ease), border-color .6s var(--ease); }
.jbi span { font: 500 12px/1 var(--font-body); color: var(--ink); opacity: 0; transition: opacity .6s var(--ease); }
.jbi .icon { width: 12px; height: 12px; color: var(--body); }
.jbi.on { background: #fff; border-color: var(--line-soft); } .jbi.on span { opacity: 1; }
.jbpl { position: relative; padding: 11px 13px; border-radius: 11px; border: 1.5px solid rgba(11,20,64,.08);
  background: rgba(255,255,255,.5); transition: background .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease); }
.jbpl > * { opacity: 0; transition: opacity .6s var(--ease); }
.jbpl.on { background: rgba(47,107,235,.05); border-color: rgba(47,107,235,.5); box-shadow: 0 0 0 3px rgba(47,107,235,.09); }
.jbpl.on > * { opacity: 1; }
.jbpl b { font: 700 12.5px/1 var(--font-display); color: var(--ink); }
.jbpl em { font-style: normal; margin-left: 7px; padding: 3px 7px; border-radius: 999px; background: rgba(47,107,235,.12); color: var(--cobalt-dp); font: 700 9.5px/1 var(--font-display); }
.jbpl small { display: block; margin-top: 5px; font: 500 10.5px/1.35 var(--font-body); color: var(--body); }
.jbpl__ck { position: absolute; right: 12px; top: 11px; width: 17px; height: 17px; border-radius: 50%; background: var(--grad-blue); color: #fff; display: grid; place-items: center; }
.jbpl__ck .icon { width: 9px; height: 9px; }

/* the job that now exists */
.jbbk { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1 var(--font-body); color: var(--body); }
.jbbk .icon { width: 12px; height: 12px; transform: rotate(180deg); }
.jbh { display: flex; align-items: center; gap: 9px; }
.jbh h4 { margin: 0; white-space: nowrap; font: 900 20px/1 var(--font-display); letter-spacing: -.03em; color: var(--ink); }
.jbtag { padding: 4px 9px; border-radius: 999px; background: #FBF0D6; color: #7A5A12; font: 700 10px/1 var(--font-display); transition: background .5s var(--ease), color .5s var(--ease); }
.jbtag.live { background: #E3F5EC; color: #0F6E4E; }
.jbacts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.jbmeta { margin-top: -4px; font: 500 11.5px/1 var(--font-body); color: var(--body); }
.jbtabs { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--paper-2); justify-self: start; }
.jbtabs span { position: relative; padding: 6px 11px; border-radius: 8px; font: 600 11.5px/1 var(--font-body); color: var(--body); }
.jbtabs span.now { background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 4px 10px -6px rgba(11,20,64,.4); }
.jbtabs span i { position: absolute; right: 5px; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: #21a97a; opacity: 0; transition: opacity .5s var(--ease); }
.jbtabs span.mark i { opacity: 1; }
.jbcols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }
.jbcard { border-radius: 12px; padding: 12px 13px; background: rgba(255,255,255,.42); border: 1px solid rgba(11,20,64,.07);
  transition: background .7s var(--ease), border-color .7s var(--ease), box-shadow .7s var(--ease); }
.jbcard > * { opacity: 0; transition: opacity .75s var(--ease); }
.jbcard.on { background: #fff; border-color: var(--line-soft); box-shadow: 0 14px 34px -26px rgba(11,20,64,.5); }
.jbcard.on > * { opacity: 1; }
.jbcard h5 { margin: 0 0 9px; font: 700 12.5px/1 var(--font-display); color: var(--ink); letter-spacing: -.015em; }
.jbfn { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; margin-bottom: 6px; }
.jbfn span { font: 500 11px/1 var(--font-body); color: var(--body); }
.jbfn b { font: 700 11.5px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.jbfn i { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--paper-2); overflow: hidden; }
.jbfn i::after { content:""; display: block; height: 100%; width: var(--p,0%); border-radius: 2px; background: var(--grad-blue); transition: width 1.4s var(--ease); }
.jbfn i[data-mut]::after { background: rgba(11,20,64,.20); }
.jbfn--tot { margin: 9px 0 0; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.jbfn--tot span { color: var(--ink); font-weight: 600; }
.jbcard p { margin: 0; font: 500 11px/1.5 var(--font-body); color: var(--body); }
.jbreq { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line-soft); display: grid; gap: 6px; }
.jbreq b { font: 700 10.5px/1 var(--font-display); color: var(--body); letter-spacing: .01em; }
.jbreq span { display: flex; align-items: center; gap: 7px; font: 500 11px/1.25 var(--font-body); color: var(--ink); }
.jbreq .icon { width: 11px; height: 11px; color: #21a97a; flex: none; }
.jbb--done { background: #fff; border: 1px solid var(--line-soft); color: var(--ink); box-shadow: none; }
.jbb--done .icon { color: #21a97a; }
.jbnote { display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; background: #fff;
  border: 1px solid var(--line-soft); justify-self: start; opacity: 0; transform: translateY(6px);
  transition: opacity .6s var(--ease), transform .6s var(--ease); }
.jbnote.on { opacity: 1; transform: none; }
.jbnote .icon { width: 12px; height: 12px; color: #21a97a; }
.jbnote span { font: 600 11px/1 var(--font-body); color: var(--ink); }

.jbcur { position: absolute; z-index: 9; width: 20px; height: 22px; left: 78%; top: 88%; opacity: 0;
  filter: drop-shadow(0 3px 7px rgba(11,20,64,.45)); transition: left .85s var(--ease), top .85s var(--ease), opacity .3s var(--ease); }
/* ================= 2. WHERE IT GOES, AND WHAT COMES BACK ================= */
.pw { width: min(100%, 620px); display: grid; justify-items: center; }
.pw-chns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; }
.pw-chn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 9px; border-radius: 12px;
  background: rgba(255,255,255,.30); border: 1px solid rgba(11,20,64,.07); box-shadow: none;
  transition: background .75s var(--ease), border-color .75s var(--ease), box-shadow .75s var(--ease); }
.pw-chn > * { opacity: .26; transition: opacity .8s var(--ease); }
.pw-chn.on { background: #fff; border-color: var(--line-soft); box-shadow: 0 14px 30px -20px rgba(11,20,64,.5); }
.pw-chn.on > * { opacity: 1; }
.pw-lgt { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line-soft); }
.pw-lgt svg { width: 15px; height: 15px; }
.pw-chn b { font: 700 10px/1.15 var(--font-display); color: var(--ink); text-align: center; }
.pw-st { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; background: #E3F5EC; color: #0F6E4E; font: 700 8.5px/1 var(--font-display); }
.pw-st .icon { width: 8px; height: 8px; }
.pw-wires { position: relative; width: 100%; height: 64px; }
.pw-wires > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pw-ln { fill: none; stroke: rgba(47,107,235,.30); stroke-width: 1.7; stroke-linecap: round; }
.pw-pl { fill: none; stroke: #2F6BEB; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 20 400; stroke-dashoffset: 420; }
.pw-pl.go { animation: pwFlow 1.05s cubic-bezier(.4,0,.5,1) 1 forwards; }
@keyframes pwFlow { to { stroke-dashoffset: 0; } }
.pw-hubwrap { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); z-index: 3; }
.pw-hub { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-blue);
  box-shadow: 0 14px 30px -12px rgba(30,58,186,.65), inset 0 1px 0 rgba(255,255,255,.4); transition: box-shadow .5s var(--ease); }
.pw-hub.beat { box-shadow: 0 14px 30px -12px rgba(30,58,186,.65), inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 8px rgba(47,107,235,.14); }
.sc-page .pw-hub .nav__mark { width: 18px; height: 23px; margin: 0; background: #fff; background-image: none; }
.pw-app { width: min(100%, 400px); margin-top: 16px; display: grid; gap: 8px; }
.pw-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; min-height: 54px;
  background: rgba(255,255,255,.30); border: 1px solid rgba(11,20,64,.07); box-shadow: none;
  transition: background .75s var(--ease), border-color .75s var(--ease), box-shadow .75s var(--ease); }
.pw-row > * { opacity: 0; transition: opacity .8s var(--ease); }
.pw-row.on { background: #fff; border-color: var(--line-soft); box-shadow: 0 18px 42px -26px rgba(11,20,64,.5); }
.pw-row.on > * { opacity: 1; }
.pw-av { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.pw-tx { flex: 1; min-width: 0; }
.pw-tx b { display: block; font: 700 13.5px/1.2 var(--font-display); color: var(--ink); letter-spacing: -.015em; }
.pw-tx span { display: block; margin-top: 2px; font: 500 11px/1.3 var(--font-body); color: var(--body); }
.pw-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: #E3F5EC; color: #0F6E4E; font: 700 10px/1 var(--font-display); white-space: nowrap; }
.pw-chip .icon { width: 10px; height: 10px; }
.pw-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 7px 13px; border-radius: 999px; background: #fff;
  border: 1px solid var(--line-soft); box-shadow: 0 10px 24px -18px rgba(11,20,64,.5); opacity: 0; transition: opacity .8s var(--ease); }
.pw-foot.on { opacity: 1; }
.pw-foot .icon { width: 13px; height: 13px; color: #21a97a; }
.pw-foot span { font: 700 11.5px/1 var(--font-display); color: var(--ink); }

/* one frame for every step, so the media never changes size as you scroll (Mark, 2026-09-10) */
.scrolly > .wrap { width: min(1320px, calc(100% - 48px)); }
.scrolly__grid { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.4fr); }
.scrolly__mock .sc-stage, .scrolly__mock .sc-stage--video { width: 100%; max-width: none; aspect-ratio: 3 / 2; min-height: 0; max-height: 100%; }
.sc-stage--fit { grid-template-columns: minmax(0, 1fr); justify-items: stretch; align-items: center; }
.scrolly__mock .sc-stage--web.arow__vis--panel { padding: clamp(22px, 2.6vw, 34px); }
@media (max-width: 900px) {
  .scrolly__grid { grid-template-columns: 1fr; }
  .scrolly__mock .sc-stage, .scrolly__mock .sc-stage--video { aspect-ratio: 3 / 2; }
}

/* the results card fills the shared frame like every other step */
.scrolly__mock .reqcard { width: min(100%, 560px); }

@media (max-width: 900px) {
  /* the platform window is 600px of interface: give it every pixel the phone has */
  .scrolly__mock .sc-stage--fit.arow__vis--panel { padding: 14px; }
}


/* ================================================================
   STEPS 4 to 7, the builds Mark approved in preview-results.html (2026-09-10):
   the profile, the question put to Radius, the board, and the languages.
   ================================================================ */
.uiface--marta  { background-image: url("assets/av/av-5.jpg"); background-size: cover; background-position: 50% 30%; }
.uiface--youssef{ background-image: url("assets/av/av-4.jpg"); background-size: cover; background-position: 50% 30%; }
.uiface--lena   { background-image: url("assets/av/av-2.jpg"); background-size: cover; background-position: 50% 30%; }
.uiface--nadia  { background-image: url("assets/av/av-3.jpg"); background-size: cover; background-position: 50% 28%; }
/* the house reveal: the empty frame waits, then the thing fills into it */
.fill { background: rgba(255,255,255,.30); border: 1px solid rgba(11,20,64,.07); box-shadow: none;
  transition: background 1.05s var(--ease), border-color 1.05s var(--ease), box-shadow 1.05s var(--ease); }
.fill > * { opacity: 0; transition: opacity 1.15s var(--ease); }
.fill.on { background: #fff; border-color: var(--line-soft); box-shadow: 0 18px 42px -26px rgba(11,20,64,.5); }
.fill.on > * { opacity: 1; }

.tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font: 700 10px/1 var(--font-display); white-space: nowrap; }
.tag--pr { background: #E3F5EC; color: #0F6E4E; }
.tag--cl { background: #FBF0D6; color: #7A5A12; }
.tag--ms { background: #FBE4E4; color: #93262B; }
.meets { font: 700 15px/1 var(--font-display); color: var(--ink); letter-spacing: -.015em; white-space: nowrap; }
.meets em { font-style: normal; color: var(--cobalt-dp); }
/* ============ B. THE PROFILE: the person first, the proof beside him ============ */
.pf { width: min(100%, 660px); display: grid; grid-template-columns: 214px 1fr; border-radius: 18px; overflow: hidden; }
.pf__ph { position: relative; background: #E8E2D6; }
.pf__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.pf__ph i { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
  background: rgba(11,20,64,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font: 700 10.5px/1 var(--font-display); font-style: normal; }
.pf__ph i b { width: 5px; height: 5px; border-radius: 50%; background: #6FD8A8; }
.pf__bd { padding: 18px 20px 16px; display: flex; flex-direction: column; }
.pf__nm { display: flex; align-items: baseline; gap: 10px; }
.pf__nm h4 { margin: 0; font: 900 24px/1 var(--font-display); letter-spacing: -.03em; color: var(--ink); }
.pf__nm .meets { margin-left: auto; }
.pf__rl { margin: 5px 0 0; font: 500 12.5px/1.3 var(--font-body); color: var(--body); }
.pf__mt { margin: 3px 0 14px; font: 500 11.5px/1.3 var(--font-body); color: var(--mute, #7A8194); }
.pf__f { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-soft); opacity: 0; transform: translateY(6px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.pf__f.on { opacity: 1; transform: none; }
.pf__f b { display: block; font: 600 13px/1.35 var(--font-body); color: var(--ink); }
.pf__f > span:first-child { flex: 1; min-width: 0; }
.pf__f > .tag { flex: none; margin-top: 1px; }
.pf__f small { display: block; margin-top: 2px; font: 500 11px/1.3 var(--font-body); color: var(--body); }
.pf__q { margin-top: 12px; padding: 11px 14px; border-radius: 12px; background: var(--paper-2); border-left: 2px solid var(--cobalt-dp);
  opacity: 0; transform: translateY(6px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.pf__q.on { opacity: 1; transform: none; }
.pf__q p { margin: 0; font: italic 500 12.5px/1.5 var(--font-body); color: var(--ink); }
.pf__q i { display: block; margin-top: 5px; font-style: normal; font: 600 10.5px/1 var(--font-body); color: var(--body); }
.pf__gap { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity .9s var(--ease); }
.pf__gap.on { opacity: 1; }
.pf__gap span { font: 600 11.5px/1.35 var(--font-body); color: var(--ink); }
/* ============ ASK: the recruiter asks, Radius answers from the interview ============ */
.ask { width: min(100%, 470px); display: grid; gap: 12px; }
.ask__c { border-radius: 16px; padding: 13px 15px; }
.ask__hd { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.ask__av { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; background-color: var(--paper-2); font: 700 9px/1 var(--font-display); color: var(--body); }
.ask__av--r { background: var(--grad-blue); }

.ask__hd b { font: 700 12px/1 var(--font-display); color: var(--ink); }
.ask__tx { font: 500 14px/1.5 var(--font-body); color: var(--ink); min-height: 21px; }
.ask__tx--a { color: var(--body); }
.ask__car { display: inline-block; width: 1.5px; height: 13px; vertical-align: -1px; background: var(--cobalt-dp); animation: blink 1.05s steps(1) infinite; }
.ask__car.off { display: none; }
@keyframes blink { 0%,50% { opacity: 1 } 50.01%,100% { opacity: 0 } }
.sc-page .ask__av--r .nav__mark { width: 10px; height: 13px; margin: 0; background: #fff; background-image: none; }
.ask__dots { display: inline-flex; gap: 4px; }
.ask__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(11,20,64,.28); animation: askDot 1.1s infinite; }
.ask__dots i:nth-child(2) { animation-delay: .16s } .ask__dots i:nth-child(3) { animation-delay: .32s }
@keyframes askDot { 0%,60%,100% { opacity: .28 } 30% { opacity: 1 } }
.ask__src { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 10px; border-radius: 999px; background: var(--paper-2);
  font: 600 10.5px/1 var(--font-body); color: var(--body); opacity: 0; transition: opacity .8s var(--ease); }
.ask__src.on { opacity: 1; }
.ask__src .icon { width: 10px; height: 10px; color: var(--cobalt-dp); }
/* ============ DECIDE: a real board, one card moves ============ */
.kb { width: min(100%, 560px); position: relative; background: #fff; border: 1px solid var(--line-soft); border-radius: 18px; padding: 15px; box-shadow: 0 18px 44px -18px rgba(11,20,64,.28); }
.kb__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.kb__col { display: flex; flex-direction: column; gap: 8px; min-height: 336px; background: var(--paper-2); border-radius: 12px; padding: 10px 9px; }
.kb__col > i { font-style: normal; font: 700 11px/1 var(--font-display); letter-spacing: .02em; color: var(--body); padding: 0 2px 4px; }
.kb__hole { height: 62px; border-radius: 10px; border: 1.5px dashed rgba(11,20,64,.14); }
.kb__p { height: 62px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 8px 9px; background: #fff; border-radius: 10px; border: 1px solid var(--line-soft); }
.kb__av { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background-color: #E9EDF6; font: 700 9.5px/1 var(--font-display); color: #3B4A73; }
.kb__p b { display: block; font: 700 11.5px/1.2 var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.kb__p span { display: block; margin-top: 2px; font: 500 10.5px/1.2 var(--font-body); color: var(--body); }
.kb__mv { position: absolute; left: 24px; top: 55px; width: calc((100% - 41px) / 2 - 18px); z-index: 3;
  box-shadow: 0 14px 30px -14px rgba(11,20,64,.45); transition: transform 1.5s cubic-bezier(.65,0,.35,1); }
.kb.moved .kb__mv { transform: translateX(calc(100% + 27px)); }
.kb { transition: opacity .45s var(--ease); }
.kb.rewind { opacity: 0; }
.kb.rewind .kb__mv, .kb.rewind .kb__chip { transition: none; }
.kb__chip { position: absolute; right: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border-radius: 999px;
  background: var(--ink); color: #fff; font: 600 12px/1 var(--font-display); white-space: nowrap; box-shadow: 0 12px 28px -12px rgba(11,20,64,.5);
  opacity: 0; transform: translateY(6px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.kb.signed .kb__chip { opacity: 1; transform: none; }
.kb__chip .tick { width: 18px; height: 18px; border-radius: 50%; background: #21a97a; display: grid; place-items: center; }
.kb__chip .icon { width: 11px; height: 11px; color: #fff; }
/* ============ LANGUAGE: heard in theirs, read in yours ============ */
.lg { width: min(100%, 560px); display: grid; gap: 11px; }
.lg__c { border-radius: 15px; padding: 13px 15px; }
.lg__lab { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.lg__lab b { font: 700 10.5px/1 var(--font-display); letter-spacing: .02em; color: var(--body); }
.lg__fl { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; border-radius: 6px; background: var(--paper-2); font: 700 10px/1 var(--font-display); color: var(--ink); letter-spacing: .02em; }
.fl { width: 15px; height: 10px; border-radius: 2px; flex: none; display: block; box-shadow: 0 0 0 .5px rgba(11,20,64,.22); }
.lg__c p { margin: 0; font: 500 14.5px/1.45 var(--font-body); color: var(--ink); }
.lg__c p em { display: block; margin-top: 5px; font-style: normal; font-size: 12.5px; color: var(--mute, #7A8194); }
.lg__sw { display: flex; align-items: center; gap: 10px; padding: 2px 4px; opacity: 0; transition: opacity .9s var(--ease); }
.lg__sw.on { opacity: 1; }
.lg__sw span { font: 700 12px/1 var(--font-display); color: var(--ink); white-space: nowrap; }
.lg__sw i { flex: 1; height: 1px; background: var(--line-soft); }
.lg__all { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 4px; opacity: 0; transition: opacity .9s var(--ease); }
.lg__all.on { opacity: 1; }
.lg__b { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px 5px 5px; border-radius: 8px; background: rgba(255,255,255,.62); border: 1px solid rgba(11,20,64,.07);
  font: 700 10px/1 var(--font-display); letter-spacing: 0; color: var(--body); }
.lg__b.is-on { background: var(--grad-blue); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -10px rgba(30,58,186,.8); }
.lg__b .fl { width: 14px; height: 9.5px; box-shadow: 0 0 0 .5px rgba(11,20,64,.28); }
.lg__b.is-on .fl { box-shadow: 0 0 0 .5px rgba(255,255,255,.5); }
.lg__note { margin-top: 7px; font: 600 10.5px/1.4 var(--font-body); letter-spacing: .02em; color: var(--body); text-align: center; opacity: 0; transition: opacity .9s var(--ease); }
.lg__note.on { opacity: 1; }

@media (max-width: 900px) { .pf { grid-template-columns: 1fr; } .pf__ph { height: 190px; } }

/* ============================================================
   STEP 1 AS A CHAIN (Mark, 2026-09-15): the job you write becomes the
   interview, drawn as the Hire page's node chain rather than a replica of
   the jobs screen. Same grammar: ink node in, white nodes for what Radius
   reads and builds, the blue node when the interview exists, a light that
   keeps travelling the wires, a full clear and an empty beat between runs.
   ============================================================ */
.scrolly__mock .sc-stage--chain { aspect-ratio: auto; min-height: 0; padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.4vw, 30px) clamp(16px, 2vw, 24px); display: grid; place-items: center; }
.jc { width: 100%; display: grid; justify-items: center; }
.jc__canvas { position: relative; width: 100%; aspect-ratio: 560 / 350; }
.jc__wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.jc__wire path.w { fill: none; stroke: rgba(11,20,64,.17); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset .9s var(--ease); }
.jc__wire path.w.on { stroke-dashoffset: 0; }
.jc__wire path.p { fill: none; stroke: var(--cobalt); stroke-width: 2.6; stroke-linecap: round; opacity: 0;
  stroke-dasharray: 2.5 var(--len); stroke-dashoffset: var(--len); }
.jc__wire path.p.on { opacity: .5; animation: jcPulse 3.2s linear infinite; animation-delay: var(--pd); }
@keyframes jcPulse { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: calc(var(--len) * -1); } }
.jn { position: absolute; box-sizing: border-box; display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 13px; z-index: 1;
  transform: translateY(-50%) scale(.99); opacity: 0; transition: opacity .75s var(--ease), transform .75s var(--ease); }
.jn.on { opacity: 1; transform: translateY(-50%) scale(1); }
.jn .icon { width: 15px; height: 15px; flex: none; }
.jn b { display: block; font: 700 13.5px/1.2 var(--font-display); letter-spacing: -.014em; }
.jn small { display: block; margin-top: 3px; font: 500 10.5px/1.25 var(--font-body); }
.jn--ink { background: var(--ink); color: #fff; box-shadow: 0 18px 36px -18px rgba(11,20,64,.8); }
.jn--ink small { color: rgba(255,255,255,.6); }
.jn--w, .jn--q { background: #fff; color: var(--ink); border: 1px solid var(--line-soft); box-shadow: 0 14px 30px -20px rgba(11,20,64,.55); }
.jn--w small, .jn--q small { color: var(--body); }
.jn--w .icon { color: var(--cobalt-dp); }
.jn--q { padding: 12px 13px; }
.jn--q small { color: var(--body); }
.jn--go { background: var(--grad-blue); color: #fff; box-shadow: 0 20px 40px -18px rgba(30,58,186,.85); }
.jn--go small { color: rgba(255,255,255,.8); }
.jc__ct { position: absolute; display: flex; align-items: center; gap: 7px; font: 500 11.5px/1 var(--font-body); color: var(--body);
  opacity: 0; transition: opacity .8s var(--ease); z-index: 1; white-space: nowrap; }
.jc__ct.on { opacity: 1; }
.jc__ct i { width: 6px; height: 6px; border-radius: 50%; background: var(--cobalt); flex: none; }
.jc__ct b { font: 700 12px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.jc__cap { position: relative; margin-top: 12px; height: 26px; width: 100%; }
.jc__cap span { position: absolute; inset: 0; display: block; text-align: center; font: 500 clamp(14px, 1.4vw, 17px)/1.3 var(--font-display);
  letter-spacing: -.016em; color: rgba(44,53,87,.72); opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.jc__cap span.on { opacity: 1; transform: none; transition: opacity .7s var(--ease) .45s, transform .7s var(--ease) .45s; }
@media (prefers-reduced-motion: reduce) {
  .jn, .jc__ct, .jc__cap span:last-child { opacity: 1 !important; transform: translateY(-50%) !important; transition: none !important; }
  .jc__cap span:last-child { transform: none !important; }
  .jc__wire path.w { stroke-dashoffset: 0 !important; } .jc__wire path.p { display: none; }
}

/* ============================================================
   AI Interviewer feature rows (2026-09-16). Mark: "the transitions between
   sections are not there. The white-beige transition is not there."
   Every band starts in the colour of the band ABOVE it and reaches its own
   colour after 240px, the same --fade the shared bands use in deck.css.
   Only screener.html carries .sc-band; screener-nl.html is on the deck layout.
   ============================================================ */
.sc-band--paper { background: var(--paper); }
.sc-band--white { background: #fff; }
.sc-killcv + .sc-band--white,
.sc-band--paper + .sc-band--white { background: linear-gradient(180deg, var(--paper) 0, #fff var(--fade, 240px)); }
.sc-band--white + .sc-band--paper { background: linear-gradient(180deg, #fff 0, var(--paper) var(--fade, 240px)); }