.opt .ds{font-size:.76rem;color:var(--muted)}
.hero{padding:var(--hero-pad-t) 0 24px;text-align:center}
.hero h1{font-size:clamp(2.4rem,5vw,3.4rem);font-weight:800;margin:14px auto 0;max-width:18ch}
.hero p{font-size:1.12rem;color:var(--muted);margin:16px auto 0;max-width:50ch}
section.block{padding:var(--sec-pad-tight) 0}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#fff}
.feat .ph{min-height:300px;background:linear-gradient(150deg,#0B1437,#1a2e7a);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.08em;text-align:center;padding:20px}
.feat .body{padding:40px}
.feat .tag{font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);background:var(--paper-2);padding:.25rem .6rem;border-radius:6px}
.feat h2{font-size:clamp(1.5rem,2.8vw,2rem);font-weight:800;margin:14px 0 10px}
.feat p{color:var(--muted);font-size:.98rem}
.feat .meta{font-family:"Space Mono",monospace;font-size:.68rem;color:var(--muted);margin:18px 0;letter-spacing:.04em}
@media(max-width:820px){.feat{grid-template-columns:1fr}}
.filterbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.filterbar .title{font-family:"Bricolage Grotesque";font-weight:800;font-size:1.6rem}
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.7rem 1.1rem;font-size:.92rem;font-weight:600;cursor:pointer;font-family:inherit;color:var(--ink)}
.dd-btn:hover{border-color:var(--ink)}
.dd-btn .lab{font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dd-btn .car{width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-top:-3px;transition:transform .2s}
.dd.open .dd-btn .car{transform:rotate(-135deg);margin-top:2px}
.dd-panel{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 50px -22px rgba(13,13,18,.3);padding:8px;min-width:220px;z-index:20;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s}
.dd.open .dd-panel{opacity:1;visibility:visible;transform:none}
.dd-opt{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:9px;cursor:pointer;font-size:.92rem}
.dd-opt:hover{background:var(--paper-2)}
.dd-opt.active{color:var(--blue);font-weight:600}
.dd-opt .ct{font-family:"Space Mono",monospace;font-size:.66rem;color:var(--muted)}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(13,13,18,.26)}
.card .thumb{height:140px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card .thumb.compliance{background:#eef1ff;color:var(--blue)}
.card .thumb.guide{background:var(--verified-tint);color:var(--verified)}
.card .thumb.case{background:#fff3e0;color:#c0761a}
.card .thumb.blog{background:#f3eefe;color:#6c2bb0}
.card .thumb.template{background:#e9f7f4;color:#0e9f6e}
.card .thumb.webinar{background:#ffeef0;color:#c0392b}
.card .thumb.video{background:#e7f6fb;color:#0a7ea4}
.card .cbody{padding:20px;display:flex;flex-direction:column;flex:1}
.card .ctag{font-family:"Space Mono",monospace;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.card h3{font-size:1.05rem;font-weight:700;margin:8px 0;line-height:1.25}
.card p{color:var(--muted);font-size:.86rem;flex:1}
.card .cmeta{font-family:"Space Mono",monospace;font-size:.64rem;color:var(--muted);margin-top:14px;letter-spacing:.04em}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px;font-family:"Space Mono",monospace;font-size:.85rem}
@media(max-width:880px){.rgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rgrid{grid-template-columns:1fr}}
.ccenter{background:var(--ink);color:#fff;border-radius:28px;padding:48px 44px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.ccenter .eyebrow{color:#8ea0ff}
.ccenter h2{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;margin:10px 0 8px}
.ccenter p{color:#b9bccb;font-size:.98rem}
.cc-links{display:grid;gap:10px}
.cc-links a{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 16px;font-weight:600;font-size:.94rem}
.cc-links a:hover{background:rgba(255,255,255,.1)}
.cc-links a .ar{margin-left:auto;color:#8ea0ff}
@media(max-width:820px){.ccenter{grid-template-columns:1fr;padding:36px 26px}}
.news{background:var(--verified-tint);border:1px solid #cdeede;border-radius:24px;padding:40px;text-align:center}
.news h2{font-size:clamp(1.5rem,2.8vw,2rem);font-weight:800}
.news p{color:#36463f;margin:10px auto 22px;max-width:46ch}
.news .row{display:flex;gap:10px;max-width:440px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.news input{flex:1;min-width:200px;border:1px solid #bfe0d2;border-radius:999px;padding:.8rem 1.2rem;font-family:inherit;font-size:.95rem;background:#fff}
.news input:focus{outline:3px solid var(--verified);outline-offset:1px}

/* Product demo video (moved from the homepage) — 16:9 band so the video never clips. */
.vid-head{text-align:center;max-width:60ch;margin:0 auto 24px}
.vid-head h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;margin-top:10px;line-height:1.15}
.video-band{position:relative;max-width:900px;margin:0 auto;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:linear-gradient(150deg,#0B1437,#1a2e7a);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.video-band .play{width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;box-shadow:0 16px 40px -10px rgba(0,0,0,.5)}
.video-band .play::after{content:"";border-left:22px solid var(--blue);border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:6px}
/* Show the full video frame (no crop) regardless of its aspect ratio. */
.video-band video.cms-video{object-fit:contain;background:#0B1437}

/* "Watch how Cleo works" — employer + candidate videos side by side. */
.howvids{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.howvid{margin:0}
.howvid figcaption{margin-top:14px;color:var(--muted);font-size:.98rem;line-height:1.5}
.howvid .lbl{display:block;color:var(--ink);font-weight:700;font-size:1.05rem;margin-bottom:4px}
@media(max-width:820px){.howvids{grid-template-columns:1fr}}