/* ============================================================================
   Page-specific design system: /products/zoho-recruit/
   Shares no section structure with the six pages before it. People animates
   several departments acting in parallel on ONE hire; Recruit races TWO
   processes against each other on one candidate - a comparison over time, not
   a sequence of tasks.

   Base colour: --product-accent (#f03030, sampled from the Recruit icon).
   Site-wide bans hold: no arrows, no line beside headings, no bar atop cards.
   ============================================================================ */

.rc-page{--c:var(--product-accent,#f03030)}

/* ---------- 1. hero ---------- */
.rc-hero{
  position:relative;overflow:hidden;padding:56px 0 0;border-top:10px solid var(--c);
  background:
    radial-gradient(780px 300px at 22% 0%, color-mix(in srgb,var(--c) 25%,transparent), transparent 68%),
    linear-gradient(200deg,#241b1b,#0d1a17 66%);
}
.rc-hero .wrap{position:relative;z-index:2}
.rc-hero h1{color:#fff;font-size:clamp(28px,4.2vw,46px);max-width:20ch}
.rc-hero .lede{color:rgba(255,255,255,.87);max-width:60ch;margin-top:16px}
.rc-top{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:center}
@media (max-width:940px){.rc-top{grid-template-columns:1fr;gap:28px}}
.rc-tag{display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;padding:7px 13px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:7px}
.rc-tag img{width:22px;height:22px}
.rc-tag span{font-size:12.5px;font-weight:700;color:#fff}
.rc-acts{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 52px}
.rc-hero .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.rc-hero .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
/* stack of CVs thinning out, decorative */
.rc-stack{display:grid;gap:7px;max-width:250px;margin-inline:auto}
.rc-stack i{display:block;height:15px;border-radius:4px;background:rgba(255,255,255,.13)}
.rc-stack i:nth-child(1){width:100%}
.rc-stack i:nth-child(2){width:88%}
.rc-stack i:nth-child(3){width:72%}
.rc-stack i:nth-child(4){width:54%;background:color-mix(in srgb,var(--zoho-yellow) 60%,transparent)}
.rc-stack i:nth-child(5){width:34%;background:color-mix(in srgb,var(--zoho-green) 70%,transparent)}
@media (prefers-reduced-motion:no-preference){
  .rc-stack i{animation:rcIn .5s ease both;transform-origin:inline-start}
  .rc-stack i:nth-child(2){animation-delay:.08s}
  .rc-stack i:nth-child(3){animation-delay:.16s}
  .rc-stack i:nth-child(4){animation-delay:.24s}
  .rc-stack i:nth-child(5){animation-delay:.32s}
  @keyframes rcIn{from{opacity:0;transform:scaleX(.3)}}
}

/* ---------- 2. THE centrepiece: two processes racing on one candidate ---------- */
.rc-race{padding:82px 0;background:var(--white)}
.race{
  margin-top:30px;border:1px solid var(--line);border-radius:calc(var(--radius) * 2);
  background:var(--paper);padding:28px 30px 24px;
}
@media (max-width:600px){.race{padding:20px 16px}}
.rc-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.rc-play{font-family:var(--font);font-size:13.5px;font-weight:700;cursor:pointer;color:#fff;
  background:var(--c);border:1px solid var(--c);border-radius:999px;padding:9px 20px;transition:opacity .16s}
.rc-play:hover{opacity:.88}
.rc-day{font-size:13.5px;color:var(--muted)}
.rc-day b{color:var(--ink);font-size:16px;font-family:var(--font-display)}
.rc-lanes{display:grid;gap:14px}
.rl{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);padding:16px 18px}
.rl-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.rl-name{font-size:14.5px;font-weight:800;color:var(--ink)}
.rl-state{font-size:12.5px;font-weight:800;padding:4px 11px;border-radius:999px;
  background:var(--line);color:var(--muted);transition:background .3s,color .3s}
.rl-bar{position:relative;height:12px;border-radius:6px;background:color-mix(in srgb,var(--line) 65%,#fff);overflow:hidden}
.rl-fill{position:absolute;inset-inline-start:0;top:0;height:100%;width:0;border-radius:6px;
  background:var(--rz);transition:width .45s linear}
.rl-ev{margin-top:11px;font-size:13.5px;color:var(--muted);line-height:1.55;min-height:2.6em}
.rl-slow{--rz:var(--zoho-red)}
.rl-fast{--rz:var(--zoho-green)}
.rl-slow.lost .rl-state{background:color-mix(in srgb,var(--zoho-red) 16%,#fff);color:var(--zoho-red)}
.rl-fast.won .rl-state{background:color-mix(in srgb,var(--zoho-green) 16%,#fff);color:#0b6b3a}
.race-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted);line-height:1.65}
.race-foot strong{color:var(--ink)}
.race-note{margin-top:22px;font-size:13.5px;color:var(--muted);line-height:1.7;max-width:80ch}

/* ---------- 3. sources ---------- */
.rc-src{padding:78px 0;background:var(--paper)}
.rs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
@media (max-width:860px){.rs{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.rs{grid-template-columns:1fr}}
.rs-i{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;
  transition:border-color .18s,transform .18s}
.rs-i:hover{border-color:var(--sz,var(--c));transform:translateY(-2px)}
.rs-i:nth-child(4n+1){--sz:var(--zoho-red)}
.rs-i:nth-child(4n+2){--sz:var(--zoho-green)}
.rs-i:nth-child(4n+3){--sz:var(--zoho-blue)}
.rs-i:nth-child(4n+4){--sz:var(--zoho-yellow)}
.rs-i h3{font-size:16px;margin-bottom:6px}
.rs-i p{font-size:14px;color:var(--muted);line-height:1.6}
.rs-i em{display:block;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--sz,var(--c));margin-bottom:8px}

/* ---------- 4. the candidate database and the law ---------- */
.rc-law{padding:80px 0;background:var(--dark);color:#fff}
.rc-law h2{color:#fff}
.rc-law .lede{color:#b9c6c1;max-width:66ch}
.cl{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
@media (max-width:820px){.cl{grid-template-columns:1fr}}
.cl-c{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius);padding:24px 22px}
.cl-c h3{color:#fff;font-size:17px;margin-bottom:8px}
.cl-c p{font-size:14.5px;color:#c8d2ce;line-height:1.65}
.cl-c ul{list-style:none;display:grid;gap:9px;margin-top:14px}
.cl-c li{position:relative;padding-inline-start:22px;font-size:14px;color:#e2eae7;line-height:1.55}
.cl-c li::before{content:"";position:absolute;inset-inline-start:0;top:6px;width:11px;height:11px;
  border-radius:3px;background:var(--clz)}
.cl-c:nth-child(1){--clz:var(--zoho-blue)}
.cl-c:nth-child(2){--clz:var(--zoho-red)}
.cl-warn{margin-top:22px;font-size:14.5px;color:#c8d2ce;line-height:1.75;max-width:80ch}
.cl-warn strong{color:#fff;display:block;margin-bottom:4px}

/* ---------- 5. employer vs agency configuration ---------- */
.rc-mode{padding:78px 0;background:var(--white)}
.md-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
@media (max-width:820px){.md-two{grid-template-columns:1fr}}
.md-c{border:1px solid var(--line);border-radius:calc(var(--radius) * 1.5);padding:28px 26px}
.md-c h3{font-size:19px;margin-bottom:6px}
.md-c > p{font-size:14.5px;color:var(--muted);line-height:1.65;margin-bottom:18px}
.md-c dl{display:grid;gap:12px;margin:0}
.md-c dt{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mz,var(--c))}
.md-c dd{margin:3px 0 0;font-size:14px;color:var(--ink);line-height:1.55}
.md-c:nth-child(1){--mz:var(--zoho-blue)}
.md-c:nth-child(2){--mz:var(--zoho-green);border-color:color-mix(in srgb,var(--zoho-green) 30%,var(--line))}

/* ---------- 6. mid CTA ---------- */
.rc-turn{padding:0 0 78px;background:var(--white)}
.rc-turn-in{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
  padding:30px 0 0;border-top:3px solid color-mix(in srgb,var(--c) 50%,transparent)}
@media (max-width:760px){.rc-turn-in{grid-template-columns:1fr}}
.rc-turn-in h3{font-size:20px;margin-bottom:6px}
.rc-turn-in p{font-size:15px;color:var(--muted);line-height:1.65;max-width:62ch}

/* ---------- 7. delivery ---------- */
.rc-deliver{padding:80px 0;background:var(--paper)}
.rd{margin-top:30px;display:grid;gap:12px}
.rd-i{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;display:grid;grid-template-columns:56px 1fr 1fr;gap:22px;align-items:start}
@media (max-width:860px){.rd-i{grid-template-columns:1fr;gap:8px}}
.rd-n{font-family:var(--font-display);font-size:12px;font-weight:800;color:#fff;
  background:var(--dz,var(--c));border-radius:8px;padding:7px 0;text-align:center}
.rd-i:nth-child(4n+1){--dz:var(--zoho-red)}
.rd-i:nth-child(4n+2){--dz:var(--zoho-green)}
.rd-i:nth-child(4n+3){--dz:var(--zoho-blue)}
.rd-i:nth-child(4n+4){--dz:var(--zoho-yellow)}
.rd-t{font-size:16px;font-weight:800;color:var(--ink)}
.rd-p{font-size:14.5px;color:var(--muted);line-height:1.6}

/* ---------- 8. FAQ ---------- */
.rc-faq{padding:80px 0;background:var(--white)}
.faq-rc{margin-top:26px;border-top:1px solid var(--line)}
.faq-rc .accordion-item button{padding-inline-end:54px;padding-block:20px;font-size:16.5px}
.faq-rc .accordion-item button::before,
.faq-rc .accordion-item button::after{background:var(--c);border-radius:1px}
.faq-rc .accordion-item button::before{inset-inline-end:16px;width:13px;height:2.5px}
.faq-rc .accordion-item button::after{inset-inline-end:21px;width:2.5px;height:13px}
.faq-rc .accordion-item button:hover,.faq-rc .accordion-item.open button{color:var(--c)}

/* ---------- 9. closing ---------- */
.rc-close{padding:0 0 92px;background:var(--white)}
.rcc{display:grid;grid-template-columns:1fr 230px;border-radius:calc(var(--radius) * 2);overflow:hidden;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 74%,#241b1b),#181f1d)}
@media (max-width:820px){.rcc{grid-template-columns:1fr}}
.rcc-body{padding:46px 44px 42px}
@media (max-width:600px){.rcc-body{padding:32px 24px}}
.rcc h2{color:#fff;font-size:clamp(23px,3.2vw,32px);margin-bottom:12px;max-width:21ch}
.rcc p{color:rgba(255,255,255,.86);font-size:15.5px;line-height:1.7;max-width:56ch;margin-bottom:24px}
.rcc-btns{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.rcc-alt{color:#fff;font-size:14.5px;font-weight:700;text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.45)}
.rcc-alt:hover{text-decoration-color:#fff}
.rcc-side{background:rgba(255,255,255,.06);border-inline-start:1px solid rgba(255,255,255,.14);
  display:grid;gap:8px;align-content:center;padding:34px 26px}
@media (max-width:820px){.rcc-side{display:none}}
.rcc-side i{display:block;height:13px;border-radius:4px;background:rgba(255,255,255,.2)}
.rcc-side i:nth-child(1){width:100%}
.rcc-side i:nth-child(2){width:80%;background:color-mix(in srgb,var(--zoho-yellow) 65%,transparent)}
.rcc-side i:nth-child(3){width:58%;background:color-mix(in srgb,var(--zoho-blue) 65%,transparent)}
.rcc-side i:nth-child(4){width:34%;background:color-mix(in srgb,var(--zoho-green) 75%,transparent)}