/* HireData marketing site. Layout: off-white page, navy type, teal used for one thing per view (the action or the highlight).
   Sections alternate between open page, soft teal tint (.tint), one raised card (Trust) and one teal-to-navy gradient band (Carerix).
   Video tiles carry the use cases. Small line icons (.ic) replace copy where they can. */
:root{
  --bg:#F9F9F3; --panel:#FFFFFF; --ink:#0F132F; --muted:#5A6378; --line:#E4E4DA;
  --teal:#7DC2CA; --deep:#00A0AE; --deep-ink:#00747E; /* deep teal for text: 5:1 on the page */ --soft:#EEF6F6; --band:#0F132F; --band-ink:#F9F9F3; --band-muted:#AEB6CC;
  --rose:#CE9592; --warn-bg:#FFF4DE; --warn:#8A5A00;
  --display:"Lexend",ui-sans-serif,system-ui,sans-serif;
  --body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:18px; --shadow:0 18px 40px rgba(15,19,47,.08);
  color-scheme:light; /* light-only: the site ignores the device dark mode setting */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:clamp(36px,5.4vw,60px);line-height:1.06}
h2{font-size:clamp(28px,3.4vw,40px);line-height:1.12}
h3{font-size:20px;line-height:1.25;letter-spacing:-.01em}
p{margin:0}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--deep-ink)}
.lede{font-size:clamp(17px,1.6vw,19px);color:var(--muted);max-width:56ch}
.muted{color:var(--muted)}
:focus-visible{outline:2px solid var(--deep);outline-offset:3px;border-radius:6px}

/* preview banner */
.preview{background:var(--warn-bg);color:var(--warn);font-size:13px}
.preview .wrap{padding-block:8px;display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between}

/* nav */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;padding-block:14px}
.logo{display:inline-flex;color:var(--ink)}
.logo svg{height:34px;width:auto}
.nav nav{display:flex;gap:22px;margin-left:auto;font-size:15px;font-weight:500}
.nav nav a{text-decoration:none;color:var(--muted)}
.nav nav a:hover,.nav nav a[aria-current="page"]{color:var(--ink)}
@media (max-width:820px){.nav nav{display:none}.nav .btn{margin-left:auto}}

/* buttons: pill, sentence case */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--body);padding:13px 20px;border-radius:999px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap}
.btn.primary{background:var(--teal);color:#0F132F}
.btn.primary:hover{background:#9AD2D8}
.btn.ghost{border-color:var(--line);color:var(--ink);background:var(--panel)}
.btn.ghost:hover{border-color:var(--deep)}
.btns{display:flex;gap:10px;flex-wrap:wrap}

/* hero */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;padding-block:64px 40px}
.hero .copy{display:grid;gap:22px}
.hero-media{position:relative}
.frame{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:10px;box-shadow:var(--shadow)}
.frame video,.frame img{border-radius:16px;width:100%;aspect-ratio:1/1;object-fit:cover;background:#F9F9F3}
.frame .cap{display:flex;justify-content:space-between;gap:12px;padding:10px 6px 4px;font-size:13px;color:var(--muted)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:36px;padding-block:44px 28px}.hero-media{max-width:520px}}
.hero{background:
  radial-gradient(520px 420px at 82% 38%,color-mix(in srgb,var(--teal) 30%,transparent),transparent 70%),
  radial-gradient(420px 320px at 4% 100%,color-mix(in srgb,var(--rose) 16%,transparent),transparent 70%)}
.points{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.points li{display:grid;gap:10px;align-content:start}
.points b{display:block;font-family:var(--display);font-weight:500;font-size:15px;line-height:1.3}
.points span:not(.ic){display:block;font-size:13.5px;line-height:1.45;color:var(--muted);margin-top:3px}
@media (max-width:640px){.points{grid-template-columns:1fr;gap:14px}.points li{grid-template-columns:36px 1fr;gap:12px}}

/* line icon in a soft tile */
.ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--teal) 22%,var(--panel));color:var(--deep-ink)}
.ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* soft teal section */
.tint{background:var(--soft)}

/* overnight timeline: one applicant, minute by minute */
.night{padding-block:8px 56px}
.night .head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.night .head b{font-family:var(--display);font-weight:500;font-size:18px}
.night .head small{color:var(--muted);font-size:13px}
/* overnight timeline: a phase label over each half (moon: HireData, sun: your recruiter), then step cards
   with an icon, time, short title and one line, joined by arrow chips. The 08:30 card is the payoff in navy. */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:22px;row-gap:12px}
.phase{grid-row:1;display:flex;align-items:center;gap:8px;margin:0;padding:8px 12px;border-radius:999px;font-size:13px;font-weight:600}
.phase svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.night-ph{grid-column:1/5;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}
.day-ph{grid-column:5;background:color-mix(in srgb,var(--teal) 30%,transparent);color:#0F132F}
.step{grid-row:2;position:relative;padding:16px 16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);display:grid;gap:4px;align-content:start;min-width:0}
.st-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.step time{font-family:var(--display);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:2px 10px}
.step h3{font-size:17px;line-height:1.25}
.step>span{font-size:14px;color:var(--muted)}
.step:not(:last-child)::after{content:"";position:absolute;z-index:1;top:50%;right:-17px;width:24px;height:24px;margin-top:-12px;border-radius:50%;
  background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F132F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat;
  box-shadow:0 0 0 4px var(--bg)}
.step.you{background:var(--ink);border-color:var(--ink);box-shadow:0 14px 32px rgba(15,19,47,.25)}
.step.you .ic{background:var(--teal);color:#0F132F}
.step.you time{color:#0F132F;background:var(--teal);border-color:var(--teal)}
.step.you h3{color:#FFFFFF}
.step.you>span{color:#DCE3EE}
@media (max-width:900px){.steps{grid-template-columns:1fr;row-gap:20px}
  .phase,.night-ph,.day-ph,.step{grid-column:auto;grid-row:auto}
  .phase{width:fit-content}.day-ph{margin-top:4px}
  .step:not(:last-child)::after{top:auto;right:auto;bottom:-17px;left:50%;margin:0 0 0 -12px;transform:rotate(90deg)}
  .step:nth-of-type(4)::after{display:none}}

/* proof */
/* numbers sit centred like the logo row under them, split by thin rules */
.proof .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-block:44px 12px;text-align:center}
.proof .wrap>div{padding-inline:16px}
.proof .wrap>div+div{border-left:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.proof b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(32px,3.6vw,44px);line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.proof span{display:block;margin-top:4px;color:var(--muted);font-size:14px}
@media (max-width:640px){.proof .wrap{grid-template-columns:1fr;gap:18px}.proof .wrap>div+div{border-left:0;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);padding-top:18px}}
.logos .wrap{display:grid;gap:18px;padding-block:28px 40px;text-align:center}
.logos p{margin:0;color:var(--muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.logos ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px 40px}
.logos li{display:flex;align-items:center;height:48px}
.logos img{display:block;height:var(--h,28px);width:auto;filter:grayscale(1);opacity:.7}
.logos img.light-src{filter:grayscale(1) brightness(.35)} /* source art is light grey */
@media (max-width:640px){.logos ul{gap:20px 32px}.logos li{height:40px}.logos img{height:calc(var(--h,28px)*.85)}}

/* sections */
.sec{padding-block:88px}
.sec-h{display:grid;gap:14px;margin-bottom:40px;max-width:760px}
@media (max-width:640px){.sec{padding-block:60px}}

/* use-case tiles */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:960px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cases{grid-template-columns:1fr}}
.case{display:grid;grid-template-rows:auto 1fr;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;transition:border-color .15s}
.case:hover{border-color:var(--deep)}
.case .pic{position:relative;aspect-ratio:16/11;overflow:hidden;background:#F9F9F3;border-bottom:1px solid var(--line)}
.case .pic img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.case .play{position:absolute;right:12px;bottom:12px;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center}
.case .play svg{width:14px;height:14px;margin-left:2px}
.case .txt{padding:18px 20px 22px;display:grid;gap:8px;align-content:start}
.case .txt p{color:var(--muted);font-size:15px}
.case .go{font-size:14px;font-weight:600;color:var(--deep-ink);margin-top:4px}
.case .cost{font-size:13px;font-weight:600;color:var(--ink);background:var(--soft);border-radius:8px;padding:5px 10px;width:fit-content}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--soft);color:var(--ink);width:fit-content}
.tag.new{background:var(--teal);color:#0F132F}

/* how it works: a real sequence */
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:h}
@media (max-width:860px){.how{grid-template-columns:1fr}}
.how{margin:0;padding:0}
.how li{list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:grid;gap:10px;align-content:start}
.how li::before{counter-increment:h;content:counter(h);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--teal);color:#0F132F;font-family:var(--display);font-weight:600;font-size:18px;margin-bottom:6px}
.how p{color:var(--muted);font-size:15px}

/* why + trust: icon, title, one line */
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
@media (max-width:860px){.why{grid-template-columns:1fr;gap:28px}}
.why div{display:grid;gap:10px;align-content:start}
.why .ic{margin-bottom:4px}
.why p{color:var(--muted)}

/* trust: one raised card */
.trust .card{background:var(--panel);border:1px solid var(--line);border-radius:28px;padding:clamp(28px,5vw,56px);box-shadow:var(--shadow);
  background-image:radial-gradient(420px 260px at 100% 0%,color-mix(in srgb,var(--teal) 18%,transparent),transparent 70%)}

/* Carerix band: teal-to-navy gradient, the page's one strong colour moment */
.band{position:relative;overflow:hidden;color:#FFFFFF;background:
  radial-gradient(560px 340px at 95% 0%,rgba(125,194,202,.45),transparent 70%),
  radial-gradient(420px 300px at 0% 100%,rgba(0,160,174,.22),transparent 70%),
  linear-gradient(120deg,#070A1C 0%,#0B1E36 55%,#08485A 100%)}
.band .eyebrow{color:var(--teal)}
.band h2{color:#FFFFFF}
.band .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center;padding-block:80px}
.band .lede{color:#E2E8F2}
.band ul{margin:0;padding:22px 24px;list-style:none;display:grid;gap:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r)}
.band li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:#FFFFFF}
.band li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(125,194,202,.2);margin-top:7px}
.band .btn.ghost{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.5)}
.band .btn.ghost:hover{border-color:var(--teal)}
@media (max-width:860px){.band .wrap{grid-template-columns:1fr;gap:28px;padding-block:56px}}

/* pricing teaser */
.price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.price .box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:grid;gap:16px}
.price .box ul{margin:0;padding-left:20px;display:grid;gap:8px}
@media (max-width:860px){.price{grid-template-columns:1fr}}
.price .example{font-family:var(--display);font-weight:500;font-size:17px;color:var(--ink);background:var(--soft);border-left:3px solid var(--teal);border-radius:0 10px 10px 0;padding:10px 14px;width:fit-content}

/* final cta: tinted card with a glow */
.cta .wrap{padding-block:16px 88px}
.cta .card{display:grid;gap:22px;justify-items:start;border-radius:28px;padding:clamp(32px,6vw,64px);background:
  radial-gradient(480px 320px at 100% 100%,color-mix(in srgb,var(--teal) 34%,transparent),transparent 70%),var(--soft)}
.tagline{font-family:var(--display);font-weight:500;font-size:clamp(44px,8vw,96px);letter-spacing:-.035em;line-height:1}
.tagline em{font-style:normal;color:var(--deep-ink)}

/* footer */
footer{border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
footer .wrap{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;align-items:center;padding-block:28px}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}
footer .logo svg{height:28px}

/* use-cases page */
.uc-hero .wrap{padding-block:56px 24px;display:grid;gap:18px}
.uc-hero h1,.uc-hero .lede{max-width:900px}
.jump{position:sticky;top:calc(env(safe-area-inset-top,0px) + 63px);z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.jump .wrap{display:flex;gap:8px;overflow-x:auto;padding-block:12px;scrollbar-width:none}
.jump a{flex:none;font-size:14px;font-weight:500;text-decoration:none;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink)}
.jump a:hover{border-color:var(--deep)}
.uc{scroll-margin-top:140px;padding-block:64px;border-bottom:1px solid var(--line)}
.uc .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.uc:nth-of-type(even) .media{order:2}
@media (max-width:900px){.uc .wrap{grid-template-columns:1fr;gap:28px}.uc:nth-of-type(even) .media{order:0}.uc .media{max-width:520px}}
.uc .info{display:grid;gap:18px}
.flow{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.flow div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;padding:14px 18px;border-top:1px solid var(--line)}
.flow div:first-child{border-top:0}
.flow dt{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--deep-ink);padding-top:2px}
.flow dd{margin:0;font-size:15px}
@media (max-width:460px){.flow div{grid-template-columns:1fr;gap:4px}}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:860px){.more{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.more{grid-template-columns:1fr}}
.more div{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--panel);display:grid;gap:6px}
.more p{color:var(--muted);font-size:14.5px}

/* scroll motion (assets/site.js adds .motion to <html>; nothing here applies without it) */
.motion main,.motion footer,.motion .nav{position:relative;z-index:1}
.motion .nav{position:sticky;z-index:20}
.motion .tint{background:color-mix(in srgb,var(--soft) 78%,transparent)}
.fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx i{position:absolute;display:block;will-change:translate,rotate}
.fx .orb{border-radius:50%;filter:blur(60px);animation:drift 22s ease-in-out infinite alternate}
.fx .o1{width:420px;height:420px;top:8%;right:-120px;background:rgba(125,194,202,.28)}
.fx .o2{width:360px;height:360px;top:62%;left:-140px;background:rgba(206,149,146,.16);animation-duration:28s}
.fx .o3{width:300px;height:300px;top:120%;right:12%;background:rgba(0,160,174,.14);animation-duration:34s}
.fx .mark,.fx .ring{opacity:.5;animation:float 16s ease-in-out infinite alternate}
.fx .mark{width:64px;height:84px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 71' fill='none' stroke='%237DC2CA' stroke-width='1.6'%3E%3Cpath d='M32 2v42L2 52V10z'/%3E%3Cpath d='M13 15l42 7v46l-42-7z'/%3E%3C/svg%3E") center/contain no-repeat}
.fx .m1{top:30%;left:6%}
.fx .m2{top:78%;right:7%;width:48px;height:62px;animation-duration:20s}
.fx .m3{top:150%;left:42%;width:40px;height:52px;opacity:.35}
.fx .ring{border:1.5px solid rgba(0,160,174,.35);border-radius:50%}
.fx .r1{width:140px;height:140px;top:48%;right:22%}
.fx .r2{width:90px;height:90px;top:105%;left:18%;border-color:rgba(206,149,146,.4);animation-duration:24s}
@keyframes drift{to{transform:translate(60px,-40px) scale(1.12)}}
@keyframes float{to{transform:translate(-18px,26px)}}
@media (max-width:700px){.fx .mark,.fx .ring{opacity:.3}.fx .o1{width:280px;height:280px}}

.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease var(--d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.rv.in{opacity:1;transform:none}
.band .wrap>.rv{transform:translateY(24px)}
.band .wrap>.rv.in{transform:none}

/* hero savings calculator: the owner's hook, in hours, people and euros */
.calc{display:grid;gap:12px;margin:2px 0 4px;padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);max-width:560px}
.calc-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.calc-top b{font-family:var(--display);font-weight:500;font-size:15px}
.calc-top label{font-size:14px;color:var(--muted)}
.calc-top output{font-family:var(--display);font-weight:600;font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums}
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;margin:4px 0;cursor:pointer;
  background:linear-gradient(90deg,var(--deep) var(--p,21%),var(--line) var(--p,21%))}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--panel);border:3px solid var(--deep);box-shadow:0 2px 6px rgba(15,19,47,.2)}
.calc input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--panel);border:3px solid var(--deep)}
.calc dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.calc dl div{background:var(--soft);border-radius:12px;padding:10px 12px;min-width:0}
.calc dt{font-size:12px;color:var(--muted);line-height:1.3}
.calc dd{margin:2px 0 0;font-family:var(--display);font-weight:600;font-size:clamp(18px,2vw,22px);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.calc .money{background:var(--ink)}
.calc .money dt{color:#C9D3E4}
.calc .money dd{color:var(--teal)}
.calc small{font-size:12px;color:var(--muted)}
@media (max-width:520px){.calc dl{grid-template-columns:1fr}.calc dl div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}}

/* header: Health check as an outlined button next to Book a demo */
.nav .btn.hc{padding:11px 16px;border-color:var(--deep);color:var(--ink);background:var(--panel)}
.nav .btn.hc:hover{background:var(--soft)}
.nav .btn.hc svg{width:16px;height:16px;fill:none;stroke:var(--deep);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.nav .btn.hc+.btn{margin-left:-14px}
@media (max-width:820px){.nav .btn.hc{margin-left:auto}}
@media (max-width:560px){.nav .btn.hc{display:none}.nav .btn.hc+.btn{margin-left:auto}}

/* use-cases page v2: all ready-made automations in four groups, a filter, one dialog for details, then "build your own" */
.kinds{display:flex;gap:10px;flex-wrap:wrap}
.kinds span{display:inline-flex;gap:8px;align-items:baseline;font-size:14px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.kinds b{color:var(--ink);font-weight:600}
.filters .wrap{align-items:center}
.filters button,.filters .own{flex:none;font:500 14px var(--body);cursor:pointer;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);text-decoration:none}
.filters button span{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:2px}
.filters button:hover,.filters .own:hover{border-color:var(--deep)}
.filters button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.filters button.on span{color:var(--teal)}
.filters .own{margin-left:auto;border-style:dashed;border-color:var(--deep);color:var(--deep-ink);font-weight:600}
.uc-group{padding-block:44px 8px;scroll-margin-top:130px}
.uc-group:last-of-type{padding-bottom:72px}
.g-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.g-head h2{font-size:clamp(22px,2.4vw,28px)}
.g-head p{color:var(--muted)}
.uc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.uc-card{scroll-margin-top:140px}
.uc-open{all:unset;box-sizing:border-box;display:grid;grid-template-rows:auto 1fr;width:100%;height:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:border-color .15s,transform .15s}
.uc-open:hover{border-color:var(--deep);transform:translateY(-2px)}
.uc-open:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
.uc-open .pic{position:relative;aspect-ratio:16/11;overflow:hidden;background:#F9F9F3;border-bottom:1px solid var(--line);display:grid;place-items:center}
.uc-open .pic img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.uc-open .play{position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center}
.uc-open .play svg{width:13px;height:13px;margin-left:2px}
.ic.big{width:72px;height:72px;border-radius:20px}
.ic.big svg{width:36px;height:36px}
.uc-open .txt{padding:16px 18px 20px;display:grid;gap:6px;align-content:start}
.uc-open h3{font-size:18px}
.uc-open p{color:var(--muted);font-size:14.5px}
.uc-open .go{font-size:13.5px;font-weight:600;color:var(--deep-ink);margin-top:2px}
.uc-dialog{width:min(980px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:24px;background:var(--bg);color:var(--ink);box-shadow:0 30px 80px rgba(15,19,47,.35)}
.uc-dialog::backdrop{background:rgba(15,19,47,.55);backdrop-filter:blur(3px)}
.uc-dialog .close{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--panel);font-size:15px;cursor:pointer;color:var(--ink)}
.uc-dialog-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;padding:32px;align-items:start}
.uc-dialog-body .frame video{aspect-ratio:1/1}
.uc-dialog-body .info{display:grid;gap:16px}
.uc-dialog-body:not(:has(.frame)){grid-template-columns:1fr;max-width:620px}
@media (max-width:760px){.uc-dialog-body{grid-template-columns:1fr;gap:20px;padding:20px}.uc-dialog-body .frame{max-width:420px}}
.build .wrap{align-items:start}
.recipe{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.recipe span{display:grid;gap:2px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:10px 14px;font-size:14px;color:#FFFFFF}
.recipe small{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.recipe i{align-self:center;font-style:normal;color:var(--teal);font-weight:600}
.own-list{display:grid;gap:14px}
.own-list>div{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:18px}
.own-list .ic{background:var(--teal);color:#0F132F;width:40px;height:40px}
.own-list b{display:block;font-family:var(--display);font-weight:500;font-size:17px;color:#FFFFFF}
.own-list span:not(.ic){display:block;margin-top:4px;font-size:14.5px;color:#DCE3EE}
@media (max-width:640px){.filters .own{margin-left:0}}

/* homepage: everything beyond the six featured tiles, in one strip */
.cases-more{margin-top:20px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:center;padding:22px 24px;border:1.5px dashed color-mix(in srgb,var(--deep) 45%,transparent);border-radius:var(--r);background:color-mix(in srgb,var(--panel) 70%,transparent)}
.cases-more b{font-family:var(--display);font-weight:500;font-size:18px}
.cases-more .chips{margin-top:10px}
.cases-more .tag.own{background:var(--ink);color:#fff}
@media (max-width:760px){.cases-more{grid-template-columns:1fr}}
@media (max-width:600px){
  .uc-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin-inline:-16px;padding:2px 16px 8px;scrollbar-width:none}
  .uc-grid::-webkit-scrollbar{display:none}
  .uc-card{flex:0 0 80%;scroll-snap-align:start}
  .uc-group{padding-top:32px}}

/* works with your ATS: one row of ATS names, Carerix first and marked as built in */
.ats-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ats-list li{display:grid;gap:2px;align-content:center;min-height:88px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.ats-list b{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em}
.ats-list span{font-size:13px;color:var(--muted)}
.ats-list .main{background:var(--ink);border-color:var(--ink)}
.ats-list .main b{color:#FFFFFF}
.ats-list .main span{color:var(--teal)}
.ats-list .other{padding:0;border-style:dashed;border-color:var(--deep);background:transparent}
.ats-list .other a{display:grid;gap:2px;align-content:center;height:100%;padding:16px;text-decoration:none;border-radius:var(--r)}
.ats-list .other b{font-size:16px;color:var(--deep-ink)}
@media (max-width:960px){.ats-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.ats-list{grid-template-columns:repeat(2,minmax(0,1fr))}.ats-list li{min-height:76px}}
/* trust has four promises: two by two */
.trust .why{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 48px}
@media (max-width:860px){.trust .why{grid-template-columns:1fr}}

/* tap targets: at least 44px tall on touch screens, without changing the look */
.logo{padding-block:6px;margin-block:-6px}
footer .logo{padding-block:8px;margin-block:-8px}
footer nav a{display:inline-flex;align-items:center;min-height:44px}
.filters button,.filters .own{min-height:44px;display:inline-flex;align-items:center;gap:4px}
.calc input[type=range]{height:40px;background:transparent;margin:-6px 0}
.calc input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--deep) var(--p,21%),var(--line) var(--p,21%))}
.calc input[type=range]::-webkit-slider-thumb{margin-top:-8px}
.calc input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--line)}
.calc input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--deep)}

/* ---------- v8: nav dropdown, pillars, results, plans, role pages, integrations, compare ---------- */
.nav nav{align-items:center}
.dd{position:relative}
.dd>button{all:unset;cursor:pointer;color:var(--muted);font-weight:500;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.dd>button::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.dd>button:hover,.dd>button.on,.dd.open>button{color:var(--ink)}
.dd>button:focus-visible{outline:2px solid var(--deep);outline-offset:3px;border-radius:6px}
.dd-menu{position:absolute;top:100%;left:-16px;min-width:300px;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);display:none;z-index:30}
.dd:hover .dd-menu,.dd:focus-within .dd-menu,.dd.open .dd-menu{display:grid}
.dd-menu a{display:grid;gap:2px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink)}
.dd-menu a:hover{background:var(--soft)}
.dd-menu b{font-weight:600;font-size:15px}
.dd-menu span{font-size:13px;color:var(--muted);font-weight:400}

.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:-12px 0 28px}
.pillar{display:grid;grid-template-columns:36px 1fr;gap:4px 12px;align-items:start;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);text-decoration:none;color:var(--ink)}
a.pillar:hover{border-color:var(--deep)}
.pillar .ic{grid-row:span 2}
.pillar b{font-family:var(--display);font-weight:500;font-size:16px;line-height:1.25}
.pillar .l{font-size:13.5px;color:var(--muted)}
.pillar.own{border-style:dashed;border-color:var(--deep);background:transparent}
@media (max-width:960px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.pillars{grid-template-columns:1fr}}

.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.story{display:grid;gap:4px;padding:24px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.story .who{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--deep-ink)}
.story b{font-family:var(--display);font-weight:500;font-size:clamp(34px,4vw,46px);letter-spacing:-.02em;line-height:1.05}
.story .what{color:var(--muted)}
@media (max-width:760px){.story-grid{grid-template-columns:1fr}}
.fine-note{margin-top:14px;font-size:13px;color:var(--muted)}

.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plan{display:grid;gap:8px;align-content:start;padding:26px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.plan.mid{border:2px solid var(--deep)}
.plan .pn{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--deep-ink)}
.plan .pp{font-size:15px;color:var(--muted)}
.plan .pp b{font-family:var(--display);font-weight:500;font-size:40px;letter-spacing:-.02em;color:var(--ink)}
.plan .pt{font-weight:600}
.plan ul{margin:6px 0 0;padding-left:18px;display:grid;gap:6px;color:var(--muted);font-size:15px}
@media (max-width:860px){.plans{grid-template-columns:1fr}}
.seat-vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.seat-vs>div{display:grid;gap:4px;padding:16px 18px;border-radius:14px;background:var(--soft)}
.seat-vs .us{background:var(--ink);color:#FFFFFF}
.seat-vs .us span{color:#DCE3EE}
.seat-vs span{font-size:14.5px;color:var(--muted)}
@media (max-width:640px){.seat-vs{grid-template-columns:1fr}}
#pricing .btns{margin-top:22px}

.page-hero .hero-side{display:grid}
.page-hero .calc{max-width:none}
.why.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 48px}
.why.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
@media (max-width:960px){.why.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.why.two{grid-template-columns:1fr}}
@media (max-width:520px){.why.four{grid-template-columns:1fr}}
.cta .card h2{font-size:clamp(24px,3vw,32px)}

.before-after{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ba{padding:24px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel)}
.ba b{font-family:var(--display);font-weight:500;font-size:18px}
.ba ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.ba li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px}
.ba li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--line)}
.ba.after{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.ba.after li::before{background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F132F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}
@media (max-width:760px){.before-after{grid-template-columns:1fr}}

.deep-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.deep{display:grid;gap:6px;align-content:start;padding:22px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel)}
.deep .st{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--deep-ink)}
.deep b{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.01em}
.deep p{color:var(--muted);font-size:14.5px}
.deep.main{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.deep.main .st{color:var(--teal)}
.deep.main p{color:#DCE3EE}
.deep.other{border-style:dashed;border-color:var(--deep);background:transparent}
.deep.other .btn{justify-self:start;margin-top:6px}
@media (max-width:860px){.deep-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.deep-grid{grid-template-columns:1fr}}

.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.cmp{width:100%;min-width:760px;border-collapse:collapse;font-size:15px}
.cmp th,.cmp td{padding:16px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.cmp thead th{border-top:0;font-family:var(--display);font-weight:500;font-size:15px;color:var(--muted)}
.cmp tbody th{font-weight:600;width:18%}
.cmp td{color:var(--muted)}
.cmp .us{background:var(--soft);color:var(--ink);font-weight:500}
.cmp thead .us{color:var(--deep-ink);font-weight:600}

/* ---------- v9: hero product diagram, results section ---------- */
.flowviz{display:grid;gap:0;max-width:500px;margin-left:auto}
.fv-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow);display:grid;gap:8px}
.fv-k{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--deep-ink)}
.fv-card b{font-family:var(--display);font-weight:500;font-size:17px}
.fv-chips{display:flex;flex-wrap:wrap;gap:6px}
.fv-chips span{font-size:13px;padding:5px 10px;border-radius:999px;background:var(--soft);color:var(--ink)}
.fv-chips span.ok{background:color-mix(in srgb,var(--teal) 28%,var(--panel))}
.fv-chips span.ok::before{content:"✓ ";color:var(--deep-ink);font-weight:700}
.fv-core{background:var(--ink);border-color:var(--ink);color:#FFFFFF;box-shadow:0 18px 40px rgba(15,19,47,.25)}
.fv-core .fv-k{color:var(--teal)}
.fv-tasks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fv-tasks li{display:flex;align-items:center;gap:10px;font-size:15px;color:#C9D3E4;padding:7px 10px;border-radius:10px;animation:fvtask 8s infinite}
.fv-tasks li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:rgba(125,194,202,.35)}
.fv-tasks li:nth-child(2){animation-delay:2s}.fv-tasks li:nth-child(3){animation-delay:4s}.fv-tasks li:nth-child(4){animation-delay:6s}
@keyframes fvtask{0%,22%{background:rgba(125,194,202,.16);color:#FFFFFF}0%,22%{box-shadow:inset 0 0 0 1px rgba(125,194,202,.35)}25%,100%{background:transparent;color:#C9D3E4;box-shadow:none}}
.fv-tasks li{will-change:background}
.fv-ch{display:flex;gap:6px;flex-wrap:wrap;padding-top:4px;border-top:1px solid rgba(255,255,255,.12)}
.fv-ch span{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:rgba(125,194,202,.18);color:var(--teal)}
.fv-arrow{display:block;width:2px;height:26px;margin:0 auto;background:linear-gradient(var(--deep),var(--deep)) center/2px 100% no-repeat;position:relative}
.fv-arrow::after{content:"";position:absolute;left:50%;bottom:-2px;width:8px;height:8px;border-right:2px solid var(--deep);border-bottom:2px solid var(--deep);transform:translateX(-50%) rotate(45deg)}
@media (prefers-reduced-motion:reduce){.fv-tasks li{animation:none}.fv-tasks li:first-child{background:rgba(125,194,202,.16);color:#FFFFFF}}
@media (max-width:900px){.flowviz{margin-left:0;max-width:520px}}
.results .res-top{padding-block:72px 8px}
.results .story{background:var(--panel)}
.results .proof .wrap{padding-top:36px}
.cases-more .tag.more{background:color-mix(in srgb,var(--teal) 28%,var(--panel))}
.night.after-how{padding-top:0;padding-bottom:88px}
@media (max-width:640px){.results .res-top{padding-top:56px}.night.after-how{padding-bottom:60px}}

/* ---------- v10: social proof. Video placeholders (homepage), example quotes (role pages) ---------- */
.voices .vgrid{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto;gap:18px}
.vcard{display:grid;gap:10px;margin:0}
.vcard.feature{grid-row:span 2}
.vposter{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;color:#FFFFFF;
  background:radial-gradient(120% 90% at 85% 10%,rgba(125,194,202,.55),transparent 55%),radial-gradient(90% 80% at 0% 100%,rgba(0,160,174,.35),transparent 60%),linear-gradient(135deg,#0F132F,#0B2C3E 60%,#0B5C6B);
  box-shadow:0 18px 40px rgba(15,19,47,.18)}
.vcard.feature .vposter{aspect-ratio:auto;height:100%;min-height:340px}
.vposter::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(7,10,28,.75))}
.vmark{position:absolute;right:-30px;top:-20px;width:46%;max-width:230px;color:rgba(125,194,202,.18)}
.vtag,.vlen{position:absolute;z-index:1;top:14px;font-size:11.5px;font-weight:600;letter-spacing:.06em;padding:4px 10px;border-radius:999px}
.vtag{left:14px;text-transform:uppercase;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px)}
.vlen{right:14px;background:rgba(7,10,28,.55);font-variant-numeric:tabular-nums}
.vplay{position:absolute;z-index:1;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#0F132F;box-shadow:0 0 0 10px rgba(255,255,255,.14);transition:transform .2s}
.vplay svg{width:20px;height:20px;margin-left:4px}
.vcard:hover .vplay{transform:scale(1.06)}
.vcard.feature .vplay{width:84px;height:84px;margin:-42px 0 0 -42px}
.vcap{position:absolute;z-index:1;left:18px;right:18px;bottom:16px;display:grid;gap:2px}
.vcap b{font-family:var(--display);font-weight:500;font-size:18px;line-height:1.25}
.vcard.feature .vcap b{font-size:clamp(20px,2.2vw,26px)}
.vcap span{font-size:13px;color:#C9D3E4}
.vtopic{font-size:13.5px;color:var(--muted)}
.vtopic b{color:var(--ink);font-weight:600}
@media (max-width:860px){.voices .vgrid{grid-template-columns:1fr}.vcard.feature{grid-row:auto}.vcard.feature .vposter{min-height:0;aspect-ratio:16/9}}

.qgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px;align-items:stretch}
.quote{position:relative;margin:0;display:flex;flex-direction:column;gap:18px;padding:28px 26px 24px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.quote::before{content:"“";position:absolute;top:6px;right:20px;font-family:var(--display);font-size:96px;line-height:1;color:color-mix(in srgb,var(--teal) 45%,transparent)}
.quote.big{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.quote.big::before{color:rgba(125,194,202,.35)}
.qtag{align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--warn-bg);color:var(--warn)}
.quote blockquote{margin:0;flex:1;font-family:var(--display);font-weight:500;font-size:18px;line-height:1.4;letter-spacing:-.01em}
.quote.big blockquote{font-size:clamp(20px,2vw,24px)}
.quote figcaption{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.quote.big figcaption{border-top-color:rgba(255,255,255,.14)}
.qav{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:600 14px var(--display);background:var(--soft);color:var(--deep-ink)}
.quote.big .qav{background:var(--teal);color:#0F132F}
.quote figcaption b{display:block;font-size:15px}
.quote figcaption span span{display:block;font-size:13px;color:var(--muted)}
.quote.big figcaption span span{color:#C9D3E4}
@media (max-width:960px){.qgrid{grid-template-columns:1fr 1fr}.quote.big{grid-column:1/-1}}
@media (max-width:600px){.qgrid{grid-template-columns:1fr}}
@media (max-width:600px){
  .vposter,.vcard.feature .vposter{aspect-ratio:4/3}
  .vplay,.vcard.feature .vplay{top:40%;width:56px;height:56px;margin:-28px 0 0 -28px}
  .vcap b,.vcard.feature .vcap b{font-size:17px}}

/* ---------- v11 ---------- */
/* videos: centred header, three equal cards */
.sec-h.center{margin-inline:auto;text-align:center;justify-items:center}
.voices .vgrid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;gap:20px}
.voices .vplay{width:60px;height:60px;margin:-30px 0 0 -30px}
.voices .fine-note{text-align:center}
@media (max-width:860px){.voices .vgrid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}

/* Carerix logo on the dark band */
.band-logo{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.95}

/* free database scan */
.scan-card{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center;padding:clamp(28px,4vw,48px);border-radius:28px;border:1px solid var(--line);
  background:radial-gradient(520px 320px at 0% 0%,color-mix(in srgb,var(--teal) 22%,transparent),transparent 70%),var(--panel);box-shadow:var(--shadow)}
.scan-copy{display:grid;gap:18px}
.scan-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:s}
.scan-steps li{display:grid;grid-template-columns:30px 1fr;gap:2px 12px;align-items:baseline}
.scan-steps li::before{counter-increment:s;content:counter(s);grid-row:span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--teal);color:#0F132F;font:600 14px var(--display)}
.scan-steps b{font-weight:600}
.scan-steps span{font-size:14.5px;color:var(--muted)}
.scan-report{padding:24px;border-radius:var(--r);background:var(--ink);color:#FFFFFF;box-shadow:0 18px 40px rgba(15,19,47,.22)}
.sr-k{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.gaps{list-style:none;margin:0;padding:0;display:grid}
.gaps li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;padding:12px 0;border-top:1px solid rgba(255,255,255,.12)}
.gaps li:first-child{border-top:0;padding-top:0}
.gn{font:600 13px var(--display);color:var(--teal);padding-top:2px}
.gaps b{display:block;font-weight:600}
.gaps span:not(.gn){display:block;font-size:14px;color:#C9D3E4}
@media (max-width:860px){.scan-card{grid-template-columns:1fr}}

/* integrations: animated hub */
.int-hero .copy{align-self:center}
.hub{perspective:1200px}
.hub svg{width:100%;height:auto;display:block;transform:rotateX(10deg) rotateY(-8deg);transform-style:preserve-3d;animation:hubfloat 9s ease-in-out infinite;filter:drop-shadow(0 30px 40px rgba(15,19,47,.12))}
@keyframes hubfloat{0%,100%{transform:rotateX(10deg) rotateY(-8deg) translateY(0)}50%{transform:rotateX(6deg) rotateY(-3deg) translateY(-8px)}}
.hub-lbl{font:600 11px var(--body);letter-spacing:.14em;text-transform:uppercase;fill:var(--deep-ink);text-anchor:middle}
.hub-line{fill:none;stroke:var(--deep);stroke-width:2;stroke-dasharray:5 7;opacity:.55;animation:hubdash 1.6s linear infinite}
.hub-line.ch{stroke:#CE9592}
@keyframes hubdash{to{stroke-dashoffset:-24}}
.hub-dot{fill:var(--deep)}
.hub-dot.ch{fill:#CE9592}
.hub-node rect{fill:#FFFFFF;stroke:var(--line);stroke-width:1.5}
.hub-node text{font:600 14px var(--display);fill:var(--ink);text-anchor:middle}
.hub-node.main rect{fill:var(--ink);stroke:var(--ink)}
.hub-node.main text{fill:#FFFFFF}
.hub-node.ch rect{fill:#FFF7F6;stroke:#EBCFCC}
.hub-core rect{fill:var(--ink)}
.hub-core text{font:600 20px var(--display);fill:#FFFFFF;text-anchor:middle}
.hub-pulse{fill:none;stroke:var(--teal);stroke-width:2;transform-origin:310px 230px;animation:hubpulse 3s ease-out infinite}
@keyframes hubpulse{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.9);opacity:0}}
@media (prefers-reduced-motion:reduce){.hub svg,.hub-line,.hub-pulse{animation:none}.hub-dot{display:none}}

/* logos on the deep tiles, and a soft 3D tilt on hover */
.deep b.lg{display:flex;align-items:center;gap:10px}
.deep b.lg img{height:22px;width:auto;max-width:84px;object-fit:contain}
.deep.main b.lg img{filter:brightness(0) invert(1)}
[data-tilt]{transition:transform .25s ease,box-shadow .25s ease;transform-style:preserve-3d;will-change:transform}
[data-tilt]:hover{box-shadow:0 22px 44px rgba(15,19,47,.14)}
.int-hero .wrap{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.int-hero .hub{margin-right:-24px}
.deep b.lg.only img{height:28px;max-width:150px}
@media (max-width:900px){.int-hero .wrap{grid-template-columns:1fr}.int-hero .hub{margin-right:0}}
.voices .vposter{aspect-ratio:4/3}
.voices .vplay{top:40%}

/* ---------- v12: hub as round trips ---------- */
.hub svg{animation:hubfloat 12s ease-in-out infinite}
.hub-line{stroke:var(--deep);stroke-width:1.5;stroke-dasharray:none;opacity:.22;animation:none}
.hub-line.ch{stroke:#CE9592;opacity:.3}
.hub-node image.lg.dark{filter:brightness(0)}
.hub-node.main image.lg.light{filter:brightness(0) invert(1)}
.hd{stroke-width:2.5}
.hd.trig{fill:var(--deep);stroke:#FFFFFF}
.hd.back{fill:#FFFFFF;stroke:var(--deep);stroke-width:3}
.hd.msg{fill:#CE9592;stroke:#FFFFFF}
.hd.reply{fill:#FFFFFF;stroke:#CE9592;stroke-width:3}
.hg{fill:none;stroke-width:2.5}
.hg.in{stroke:var(--deep)}
.hg.done{stroke:var(--deep);fill:color-mix(in srgb,var(--teal) 18%,transparent)}
.hg.ch{stroke:#CE9592}
.hp{fill:none;stroke:var(--teal);stroke-width:2}
.hub-legend{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;font-size:12.5px;color:var(--muted)}
.hub-legend li{display:inline-flex;align-items:center;gap:7px}
.hub-legend i{width:11px;height:11px;border-radius:50%;box-sizing:border-box}
.hub-legend .trig{background:var(--deep)}
.hub-legend .back{border:2.5px solid var(--deep);background:#FFFFFF}
.hub-legend .msg{background:#CE9592}
.hub-legend .reply{border:2.5px solid #CE9592;background:#FFFFFF}
@media (prefers-reduced-motion:reduce){.hub .hd,.hub .hg,.hub .hp{display:none}}

/* logos in tiles */
.deep b.lg img.dk,.ats-list b.lg img.dk{filter:brightness(0)}
.ats-list b.lg{display:flex;align-items:center;min-height:30px}
.ats-list b.lg img{height:24px;width:auto;max-width:120px;object-fit:contain;object-position:left}
.ats-list .main b.lg img{filter:brightness(0) invert(1)}

/* the "Improve Every Day." brand mark (brand/improve-every-day) instead of typed text */
.tagline-mark{display:block;width:min(760px,100%);height:auto}

/* examples: one timeline at a time, switched with tabs, clearly marked as examples */
.ex-head{justify-content:flex-start;gap:14px;align-items:center}
.ex-tag{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--warn-bg);color:var(--warn)}
.ex-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--panel);border:1px solid var(--line)}
.ex-tabs button{font:600 14px var(--body);color:var(--muted);background:transparent;border:0;border-radius:999px;padding:0 16px;min-height:40px;cursor:pointer}
.ex-tabs button[aria-selected="true"]{background:var(--ink);color:#FFFFFF}
.ex-tabs button:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.ex-h{display:block;font-family:var(--display);font-weight:500;font-size:clamp(18px,2vw,22px);margin:6px 0 14px}
.ex[hidden]{display:none}
.after-how .fine-note{margin-top:18px}

.ex-tabs button{white-space:nowrap}

/* ---------- v13 ---------- */
/* hero diagram, step 3: a small ATS record instead of loose chips */
.fv-rec{margin:2px 0 0;display:grid}
.fv-rec div{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.fv-rec div:first-child{border-top:0;padding-top:2px}
.fv-rec dt{font-size:13px;color:var(--muted)}
.fv-rec dd{margin:0;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink)}
.fv-rec dd::after{content:"";width:18px;height:18px;border-radius:50%;flex:none;
  background:var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}

/* "build your own" recipe: three equal steps on one row, arrows between */
.recipe{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:stretch}
.recipe span{align-content:start;padding:12px 14px;font-size:14px;line-height:1.35}
@media (max-width:560px){.recipe{grid-template-columns:1fr}.recipe i{justify-self:center;transform:rotate(90deg)}}

/* conversation logging: an illustration instead of a video */
.uc-dialog-body .frame img.still{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px;background:#F7F7F2}

/* back to top, drawn like the HireData mark in the background */
.to-top{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;width:54px;height:54px;border:0;border-radius:18px;padding:0;cursor:pointer;
  display:grid;place-items:center;background:var(--ink);box-shadow:0 14px 30px rgba(15,19,47,.28),inset 0 0 0 1px rgba(125,194,202,.25);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top svg{width:34px;height:34px;overflow:visible}
.to-top .tt-back{fill:rgba(125,194,202,.35);transition:transform .3s}
.to-top .tt-front{fill:none;stroke:#7DC2CA;stroke-width:3;transition:transform .3s}
.to-top .tt-arrow{fill:none;stroke:#FFFFFF;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.to-top:hover{transform:translateY(-3px)}
.to-top:hover .tt-back{transform:translate(-2px,-3px)}
.to-top:hover .tt-arrow{transform:translateY(-4px)}
.to-top:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.to-top,.to-top *{transition:none}}

/* ---------- v14: free scan, clearer and interactive ---------- */
.scan-track{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;counter-reset:none;position:relative}
.scan-track::before{content:"";position:absolute;left:16%;right:16%;top:17px;height:2px;background:linear-gradient(90deg,var(--teal),var(--deep))}
.scan-track li{position:relative;display:grid;justify-items:center;text-align:center;gap:2px}
.sn{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--panel);border:2px solid var(--deep);color:var(--deep-ink);font:600 15px var(--display);margin-bottom:6px;position:relative;z-index:1}
.scan-track li:last-child .sn{background:var(--deep-ink);border-color:var(--deep-ink);color:#FFFFFF}
.scan-track b{font-weight:600;font-size:15px}
.scan-track small{font-size:13px;color:var(--muted)}
.scan-get{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.scan-get li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.scan-get li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;
  background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300747E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}

.scan-report{padding:22px;display:grid;gap:14px}
.sr-top{display:flex;justify-content:space-between;align-items:center;gap:14px}
.sr-top .sr-k{margin:0 0 2px}
.sr-name{display:block;font-family:var(--display);font-weight:500;font-size:17px}
.sr-sub{font-size:13px;color:#C9D3E4}
.sr-score{position:relative;width:64px;height:64px;flex:none}
.sr-score svg{width:64px;height:64px;transform:rotate(-90deg)}
.sr-ring-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:6}
.sr-ring{fill:none;stroke:#E9C27A;stroke-width:6;stroke-linecap:round;stroke-dasharray:169.6;stroke-dashoffset:169.6;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1) .2s}
.sr-score>span{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
.sr-score b{font:600 20px var(--display)}
.sr-score small{font-size:10px;color:#C9D3E4}
.scan-report.run .sr-ring{stroke-dashoffset:78}
.sr-scanbar{position:relative;height:28px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;display:flex;align-items:center;padding:0 12px}
.sr-scanbar i{position:absolute;inset:0 100% 0 0;background:linear-gradient(90deg,rgba(125,194,202,.15),rgba(125,194,202,.4));transition:right 1.2s linear}
.sr-scanbar span{position:relative;font-size:12px;font-weight:600;color:var(--teal);letter-spacing:.04em}
.scan-report.run .sr-scanbar i{right:0}
.scan-report.done .sr-scanbar span::after{content:" done"}
.gaps2{display:grid}
.gap{border-top:1px solid rgba(255,255,255,.12)}
.gap:first-child{border-top:0}
.gap summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:28px minmax(0,1fr) 92px 40px;gap:10px;align-items:center;padding:11px 4px;border-radius:10px}
.gap summary::-webkit-details-marker{display:none}
.gap summary:hover{background:rgba(255,255,255,.05)}
.gap summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.gap .gn{padding:0}
.gt b{display:block;font-weight:600;font-size:15px}
.gt small{display:block;font-size:12.5px;color:#C9D3E4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gbar{height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.gbar i{display:block;height:100%;width:0;border-radius:999px;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.gap.hi .gbar i{background:#E59B95}
.gap.mid .gbar i{background:#E9C27A}
.scan-report.run .gbar i{width:calc(var(--v) * 1%)}
.gap:nth-child(2) .gbar i{transition-delay:.15s}.gap:nth-child(3) .gbar i{transition-delay:.3s}.gap:nth-child(4) .gbar i{transition-delay:.45s}.gap:nth-child(5) .gbar i{transition-delay:.6s}
.gv{font:600 14px var(--display);text-align:right;font-variant-numeric:tabular-nums}
.gap.hi .gv{color:#F2B8B3}.gap.mid .gv{color:#E9C27A}
.gap[open] summary{background:rgba(255,255,255,.06)}
.gd{padding:4px 4px 14px 42px;display:grid;gap:6px}
.gd p{font-size:14px;color:#DCE3EE}
.gd a{font-size:14px;font-weight:600;color:var(--teal);text-decoration:none}
.gd a:hover{text-decoration:underline}
.sr-note{font-size:12.5px;color:#AEB6CC}
.sr-replay{justify-self:start;font:600 13px var(--body);color:var(--teal);background:transparent;border:1px solid rgba(125,194,202,.4);border-radius:999px;padding:0 14px;min-height:36px;cursor:pointer}
.sr-replay:hover{border-color:var(--teal)}
@media (max-width:520px){.gap summary{grid-template-columns:24px minmax(0,1fr) 40px}.gbar{grid-column:2/4;grid-row:2}.gd{padding-left:34px}.scan-track b{font-size:14px}}
@media (prefers-reduced-motion:reduce){.sr-ring,.gbar i,.sr-scanbar i{transition:none}}
@media (max-width:520px){.gt small{white-space:normal}}

/* ---------- v15: one hierarchy of CTAs. Book a demo (primary), Free database scan (secondary),
   the 60-second self-check as a quiet text link ---------- */
.btns .txt-link{align-self:center;font-size:14px;font-weight:500;color:var(--muted);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--muted) 40%,transparent);text-underline-offset:3px;padding:10px 4px}
.btns .txt-link:hover{color:var(--ink);text-decoration-color:currentColor}
.band .btns .txt-link{color:#C9D3E4}
.scan-vs{font-size:14px;color:var(--muted);padding:12px 14px;border-radius:12px;background:var(--soft);max-width:60ch}
.scan-vs b{color:var(--ink);font-weight:600}
.scan-vs a{color:var(--deep-ink);font-weight:600}
.nav .btn.hc svg{stroke:var(--deep-ink)}
@media (max-width:1040px) and (min-width:821px){.nav nav{gap:16px}.nav .btn.hc{padding:11px 13px}}

/* ---------- v16: cleaner hero, live flow, night-to-day timeline, calmer use-case images, comparison table ---------- */
/* hero: headline, lede and buttons only, centred against the flow */
.hero .copy{align-self:center;gap:26px}
.hero .copy .btns{margin-top:4px}

/* flow: each trigger, task and record row light up together; a packet runs down each connector */
.fv-arrow{display:block;position:relative;width:auto;height:44px;margin:0;background:none}
.fv-arrow::before{content:"";position:absolute;left:50%;top:4px;bottom:12px;width:2px;margin-left:-1px;
  background:repeating-linear-gradient(var(--deep) 0 4px,transparent 4px 9px);opacity:.5;animation:fvdash .9s linear infinite}
.fv-arrow::after{content:"";position:absolute;left:50%;bottom:6px;width:9px;height:9px;border:0;border-right:2px solid var(--deep);border-bottom:2px solid var(--deep);transform:translateX(-50%) rotate(45deg)}
.fv-dot{position:absolute;left:50%;top:2px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--deep);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 35%,transparent),0 0 14px var(--teal);opacity:0;animation:fvpkt 2s cubic-bezier(.45,0,.3,1) infinite}
.fv-arrow+.fv-core+.fv-arrow .fv-dot{animation-delay:1s}
.fv-lbl{position:absolute;left:calc(50% + 16px);top:50%;transform:translateY(-58%);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@keyframes fvdash{to{background-position:0 9px}}
@keyframes fvpkt{0%{transform:translateY(0);opacity:0}12%{opacity:1}55%{transform:translateY(24px);opacity:1}70%,100%{transform:translateY(24px);opacity:0}}
.fv-chips span{transition:background .3s,color .3s;animation:fvchip 8s infinite}
.fv-chips span:nth-child(2){animation-delay:2s}.fv-chips span:nth-child(3){animation-delay:4s}.fv-chips span:nth-child(4){animation-delay:6s}
@keyframes fvchip{0%,22%{background:var(--deep);color:#FFFFFF}25%,100%{background:var(--soft);color:var(--ink)}}
.fv-tasks li:nth-child(1){animation-delay:.5s}.fv-tasks li:nth-child(2){animation-delay:2.5s}.fv-tasks li:nth-child(3){animation-delay:4.5s}.fv-tasks li:nth-child(4){animation-delay:6.5s}
.fv-rec div{margin-inline:-8px;padding-inline:8px;border-radius:8px;animation:fvrec 8s infinite}
.fv-rec div:nth-child(1){animation-delay:1.4s}.fv-rec div:nth-child(2){animation-delay:3.4s}.fv-rec div:nth-child(3){animation-delay:5.4s}.fv-rec div:nth-child(4){animation-delay:7.4s}
.fv-rec dd::after{transition:transform .3s}
@keyframes fvrec{0%,20%{background:color-mix(in srgb,var(--teal) 22%,transparent)}26%,100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.fv-arrow::before,.fv-dot,.fv-chips span,.fv-rec div{animation:none}.fv-dot{display:none}}

/* customer results strip right under the hero */
.stories-strip .wrap{padding-block:8px 64px}
.stories-strip .fine-note{margin-top:14px}
.results .res-top{padding-block:72px 0}
.results .res-top .sec-h{margin-bottom:0}

/* pillars: same card for all four; title and line always start at the same height */
.pillar{grid-template-rows:auto 1fr;align-content:start;align-items:start;background:var(--panel)}
.pillar .ic{grid-row:1/3}
.pillar.own{border-style:solid;border-color:var(--line);background:var(--panel)}
.pillar.own:hover{border-color:var(--deep)}
.pillar.own .ic{background:var(--deep);color:#FFFFFF}

/* use-case images: a soft wash so the text below leads; it lifts and the clip plays on hover */
.case .pic::after,.uc-open .pic::after{content:"";position:absolute;inset:0;pointer-events:none;transition:opacity .35s;
  background:linear-gradient(180deg,rgba(249,249,243,.18),rgba(249,249,243,.62) 75%,rgba(249,249,243,.82))}
.case .pic img,.uc-open .pic img{transition:filter .35s;filter:saturate(.75)}
.case .pic video,.uc-open .pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:0;transition:opacity .3s}
.case .pic.playing video,.uc-open .pic.playing video{opacity:1}
.case .play,.uc-open .play{z-index:1;transition:opacity .25s}
.case:hover .pic::after,.case:focus-visible .pic::after,.uc-open:hover .pic::after,.uc-open:focus-visible .pic::after{opacity:0}
.case:hover .pic img,.uc-open:hover .pic img{filter:none}
.case .pic.playing .play,.uc-open .pic.playing .play{opacity:0}

/* overnight example: the work at night is dark, the morning result is light */
.night-ph{background:var(--ink);color:#FFFFFF}
.day-ph{background:#FFF1C9;color:#5C4300}
.after-how .step:not(.you){background:var(--ink);border-color:var(--ink)}
.after-how .step:not(.you) h3{color:#FFFFFF}
.after-how .step:not(.you)>span{color:#C9D3E4}
.after-how .step:not(.you) .ic{background:rgba(125,194,202,.18);color:var(--teal)}
.after-how .step:not(.you) time{color:#DCE3EE;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.after-how .step.you{background:#FFFDF5;border-color:#F1D98F;box-shadow:0 14px 32px rgba(233,194,122,.28)}
.after-how .step.you h3{color:var(--ink)}
.after-how .step.you>span{color:var(--muted)}
.after-how .step.you .ic{background:#FFF1C9;color:#8A5A00}
.after-how .step.you time{background:#FFF1C9;border-color:#F1D98F;color:#5C4300}

/* scan: each gap shows the message HireData sends to fix it */
.gmsg{display:grid;gap:4px;margin:2px 0 4px}
.gmsg span{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#AEB6CC}
.gmsg q{quotes:none;display:block;width:fit-content;max-width:100%;font-size:13.5px;line-height:1.45;color:#0F132F;background:#D9FDD3;border-radius:12px 12px 12px 4px;padding:8px 12px}

/* recruiters: what changes, as a table */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ba-table-wrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.ba-table{width:100%;border-collapse:collapse;font-size:15.5px}
.ba-table th,.ba-table td{padding:16px 20px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.ba-table thead th{border-top:0;font:500 15px var(--display);color:var(--muted);background:var(--bg)}
.ba-table thead th.w{background:var(--ink);color:#FFFFFF}
.ba-table tbody th{font:500 16px var(--display);width:20%}
.ba-table td{color:var(--muted);width:40%}
.ba-table td.w{color:var(--ink);font-weight:500;background:color-mix(in srgb,var(--teal) 12%,var(--panel));padding-left:48px;position:relative}
.ba-table td.w::before{content:"";position:absolute;left:18px;top:18px;width:18px;height:18px;border-radius:50%;
  background:var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
@media (max-width:640px){
  .ba-table thead{display:none}
  .ba-table,.ba-table tbody,.ba-table tr,.ba-table th,.ba-table td{display:block;width:auto}
  .ba-table tr+tr{border-top:1px solid var(--line)}
  .ba-table th,.ba-table td{border-top:0;padding:6px 16px}
  .ba-table tbody th,.ba-table td{width:auto}
  .ba-table tbody th{padding-top:16px}
  .ba-table td::before{content:attr(data-l);display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .ba-table td.w{margin:4px 12px 14px;border-radius:12px;padding:10px 14px}
  .ba-table td.w::before{position:static;width:auto;height:auto;border-radius:0;background:none;content:attr(data-l)}}

/* ---------- v17: hero flow driven by one script; the same item travels from trigger to task to record ---------- */
.fv-chips span,.fv-tasks li,.fv-rec div{animation:none}
.fv-dot{display:none}
.fv-arrow{height:58px}
.fv-arrow::before{top:4px;bottom:14px}
.fv-pkt{position:absolute;left:50%;top:0;z-index:2;transform:translate(-50%,0);opacity:0;white-space:nowrap;font-size:12px;font-weight:600;line-height:1;
  padding:6px 10px;border-radius:999px;background:var(--deep);color:#FFFFFF;box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 30%,transparent),0 6px 16px rgba(0,160,174,.35)}
.fv-pkt.go{animation:fvcarry .8s cubic-bezier(.45,0,.3,1) forwards}
@keyframes fvcarry{0%{transform:translate(-50%,-6px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translate(-50%,30px);opacity:0}}
.fv-lbl{left:auto;right:calc(50% + 70px);text-align:right}
/* one highlight for the same item in all three cards */
.fv-chips span{transition:background .3s,color .3s,box-shadow .3s}
.fv-chips span.on{background:var(--deep-ink);color:#FFFFFF;box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 30%,transparent)}
.fv-tasks li{transition:background .3s,color .3s,box-shadow .3s}
.fv-tasks li.on{background:rgba(0,160,174,.22);color:#FFFFFF;box-shadow:inset 0 0 0 1.5px var(--deep)}
.fv-tasks li.on::before{background:var(--teal);box-shadow:0 0 8px var(--teal)}
.fv-rec div{transition:background .3s,box-shadow .3s}
.fv-rec div.on{background:color-mix(in srgb,var(--teal) 22%,transparent);box-shadow:inset 0 0 0 1.5px var(--deep)}
.fv-rec div.on dd::after{transform:scale(1.15)}
@media (prefers-reduced-motion:reduce){.fv-pkt{display:none}}

/* use-case images: a navy fade instead of a light wash, so the stills sit back without looking washed out */
.case .pic::after,.uc-open .pic::after{background:linear-gradient(180deg,rgba(15,19,47,.06) 0%,rgba(15,19,47,.28) 55%,rgba(15,19,47,.62) 100%)}
.case .pic img,.uc-open .pic img{filter:saturate(.85)}
.case .play,.uc-open .play{background:#FFFFFF;color:var(--ink);box-shadow:0 6px 16px rgba(15,19,47,.3)}

/* ---------- v18: owners page ---------- */
/* calculator: the unit sits small next to the number, so it never runs out of the box */
.calc dd small{font:500 13px var(--body);color:var(--muted);letter-spacing:0}
.calc .money dd small{color:#C9D3E4}

/* promises: four big numbers on navy */
.promise{background:var(--ink);color:#FFFFFF}
.promise .eyebrow{color:var(--teal)}
.promise h2{color:#FFFFFF}
.promise .lede{color:#C9D3E4}
.pr-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);overflow:hidden}
.pr-grid li{background:var(--ink);padding:28px 24px 30px;display:grid;gap:6px;align-content:start;transition:background .2s}
.pr-grid li:hover{background:#151A3D}
.pr-n{font:500 clamp(40px,4.4vw,56px)/1 var(--display);letter-spacing:-.03em;color:var(--teal);margin-bottom:10px}
.pr-grid h3{font-size:17px;color:#FFFFFF}
.pr-grid p{font-size:14.5px;color:#C9D3E4}
@media (max-width:960px){.pr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.pr-grid{grid-template-columns:1fr}}

/* how you start: a timeline with when, what and what you get */
.start-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.start-grid .sec-h{position:sticky;top:110px;margin:0}
.start-grid .btns{margin-top:18px}
.sl{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.sl::before{content:"";position:absolute;left:47px;top:24px;bottom:24px;width:2px;background:linear-gradient(var(--deep),color-mix(in srgb,var(--teal) 35%,transparent))}
.sl li{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;padding:14px 0}
.sl-when{position:relative;z-index:1;justify-self:center;align-self:start;margin-top:18px;font:600 12.5px var(--display);letter-spacing:.02em;white-space:nowrap;padding:6px 12px;border-radius:999px;background:var(--deep);color:#FFFFFF;box-shadow:0 0 0 6px var(--bg)}
.sl li:nth-child(2) .sl-when{background:var(--teal);color:var(--ink)}
.sl li:nth-child(3) .sl-when{background:var(--soft);color:var(--deep-ink);border:1px solid color-mix(in srgb,var(--teal) 60%,transparent)}
.sl li>div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;display:grid;gap:6px;box-shadow:var(--shadow)}
.sl h3{font-size:18px}
.sl p{color:var(--muted);font-size:15px}
.sl-out{justify-self:start;margin-top:6px;font-size:13px;font-weight:600;color:var(--deep-ink);background:var(--soft);border-radius:999px;padding:4px 10px}
.sl-out::before{content:"→ "}
@media (max-width:860px){.start-grid{grid-template-columns:1fr;gap:28px}.start-grid .sec-h{position:static}}
@media (max-width:520px){.sl::before{left:15px}.sl li{grid-template-columns:1fr;gap:10px;padding-left:36px}.sl-when{justify-self:start;margin-top:0}.sl li::before{content:"";position:absolute;left:9px;top:22px;width:14px;height:14px;border-radius:50%;background:var(--deep);box-shadow:0 0 0 4px var(--bg)}}

/* ---------- v19: build your own with Claude ---------- */
.claude{background:linear-gradient(160deg,#FBF6EF 0%,var(--bg) 60%)}
.cl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.cl-copy{display:grid;gap:20px;align-content:start}
.cl-copy h2{font-size:clamp(30px,3.6vw,44px)}
.cl-tag{display:inline-flex;align-items:center;gap:8px;width:fit-content;font-size:13px;font-weight:600;color:#8A4B2E;background:#F6E4D8;border-radius:999px;padding:6px 12px}
.cl-tag i{width:14px;height:14px;flex:none;background:#D97757;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.2 8.8L23 12l-8.8 2.2L12 23l-2.2-8.8L1 12l8.8-2.2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.2 8.8L23 12l-8.8 2.2L12 23l-2.2-8.8L1 12l8.8-2.2z'/%3E%3C/svg%3E") center/contain no-repeat}
.cl-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;counter-reset:c}
.cl-steps li{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:4px;align-content:start}
.cl-steps li::before{counter-increment:c;content:counter(c);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--display);background:var(--ink);color:#FFFFFF;margin-bottom:4px}
.cl-steps b{font-family:var(--display);font-weight:500;font-size:16px}
.cl-steps span{font-size:13.5px;color:var(--muted);line-height:1.4}
.cl-can{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cl-can li{display:flex;gap:10px;font-size:15px}
.cl-can li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;
  background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300747E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
.cl-chat{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 60px rgba(15,19,47,.12);padding:16px;display:grid;gap:14px}
.cl-bar{display:flex;align-items:center;gap:8px;padding:2px 4px 12px;border-bottom:1px solid var(--line);font-size:14px}
.cl-dot{width:22px;height:22px;border-radius:7px;background:var(--ink);position:relative}
.cl-dot::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--teal)}
.cl-conn{margin-left:auto;font-size:12px;font-weight:600;color:var(--deep-ink);background:var(--soft);border-radius:999px;padding:4px 10px}
.cl-conn::before{content:"● ";color:#2BA36B}
.cl-msg{font-size:14.5px;line-height:1.5;border-radius:16px;padding:12px 14px}
.cl-msg.you{justify-self:end;max-width:88%;background:#F1EDE5;border-bottom-right-radius:4px}
.cl-msg.ai{display:grid;gap:8px;padding-inline:4px}
.cl-msg.ai p{margin:0}
.cl-tool{width:fit-content;font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.cl-tool::before{content:"✓ ";color:var(--deep)}
.cl-card{display:grid;gap:2px;border:1px solid color-mix(in srgb,var(--teal) 60%,transparent);background:color-mix(in srgb,var(--teal) 10%,var(--panel));border-radius:12px;padding:10px 12px}
.cl-card b{font-size:14px}
.cl-card span{font-size:13px;color:var(--muted)}
.cl-note{margin:0;font-size:12px;color:var(--muted);text-align:center}
@media (max-width:900px){.cl-grid{grid-template-columns:1fr;gap:32px}}
@media (max-width:560px){.cl-steps{grid-template-columns:1fr}}

/* "New" label sits on the image corner, so titles line up across cards */
.case,.uc-open{position:relative}
.case .txt .tag.new,.uc-open .txt .tag.new{position:absolute;top:12px;left:12px;z-index:2;margin:0;box-shadow:0 4px 12px rgba(15,19,47,.18)}

/* ===== v17 (22 Oct 2026): AI-first section, real stories, why-we-built, task pricing, Tim, Carerix page, updates page ===== */
/* spacing: one rhythm for every section, a little more air under section heads and grids */
.sec-h{margin-bottom:44px}
.sec-h.center{margin-inline:auto;justify-items:center;text-align:center}
.cases-more{margin-top:28px}
.fine-note{margin-top:20px}

/* hero: MCP line under the buttons */
.hero-ai{display:inline-flex;align-items:center;gap:10px;width:fit-content;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;padding:8px 14px;border-radius:999px;background:color-mix(in srgb,var(--panel) 80%,transparent);border:1px solid var(--line)}
.hero-ai:hover{border-color:var(--deep)}
.hero-ai .dot{width:8px;height:8px;border-radius:50%;background:var(--deep);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 35%,transparent)}
.hero .wrap{align-items:center}
.flowviz{margin-inline:auto}

/* AI-first row under the assistant demo */
.ai-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:48px}
.ai-row>div{display:grid;gap:10px;align-content:start;padding:22px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.ai-row p{color:var(--muted);font-size:15px}
.ai-row h3{font-size:18px}
@media (max-width:960px){.ai-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ai-row{grid-template-columns:1fr}}

/* real stories */
.story-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.story-quotes .quote blockquote{margin:0;font-size:17px;line-height:1.5}
@media (max-width:900px){.story-quotes{grid-template-columns:1fr}}

/* why we built HireData */
.wb-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}
.wb-grid .sec-h{margin-bottom:0}
.why.stack{grid-template-columns:1fr;gap:26px}
.why.stack>div{grid-template-columns:36px minmax(0,1fr);column-gap:16px;row-gap:4px}
.why.stack .ic{grid-row:span 2;margin:0}
@media (max-width:860px){.wb-grid{grid-template-columns:1fr;gap:36px}}

/* ATS tile that links */
.ats-list .main a{display:grid;gap:2px;text-decoration:none;color:inherit}

/* pricing: per task + what is a task */
.plan .ppt{font-size:13.5px;font-weight:600;color:var(--deep-ink);font-variant-numeric:tabular-nums}
.task-explain{margin-top:18px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:12px 28px;align-items:center;padding:22px 24px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel)}
.te-h{display:grid;gap:4px}
.te-h b{font-family:var(--display);font-weight:500;font-size:18px}
.te-h span{color:var(--muted);font-size:14.5px}
.te-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.te-list li{display:grid;gap:2px;padding:12px 14px;border-radius:14px;background:var(--soft)}
.te-list b{font-family:var(--display);font-weight:600;font-size:24px;line-height:1.1}
.te-list li.free b{color:var(--deep-ink)}
.te-list span{font-size:13px;color:var(--muted)}
.te-ex{grid-column:1/-1;font-size:14px;color:var(--muted)}
@media (max-width:860px){.task-explain{grid-template-columns:1fr}.te-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* demo card with Tim */
.cta .card.demo-card{grid-template-columns:minmax(0,1fr) 280px;align-items:center;gap:32px 48px}
.demo-copy{display:grid;gap:22px;justify-items:start}
.host{display:grid;justify-items:center;text-align:center;gap:4px;padding:26px 22px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:border-color .15s}
.host:hover{border-color:var(--deep)}
.host-pic{position:relative;width:112px;height:112px;border-radius:50%;overflow:hidden;margin-bottom:10px;display:grid;place-items:center;background:var(--teal);color:var(--ink);font-family:var(--display);font-size:40px;font-weight:500;box-shadow:0 0 0 5px var(--soft)}
.host-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.host b{font-family:var(--display);font-weight:500;font-size:18px}
.host>span{font-size:14px;color:var(--deep-ink);font-weight:600}
.host small{font-size:13.5px;color:var(--muted);margin-top:6px}
@media (max-width:820px){.cta .card.demo-card{grid-template-columns:1fr}.host{max-width:320px}}

/* integrations: Carerix tile is a link */
a.deep{text-decoration:none;color:inherit}
.deep-go{margin-top:6px;font-size:14px;font-weight:600}

/* ===== Carerix page ===== */
.cx-mock{max-width:440px;margin-left:auto;display:grid;gap:10px;padding:18px;border-radius:24px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.cx-mock-h{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 8px;border-bottom:1px solid var(--line)}
.cx-mock-h img{height:20px;width:auto}
.cx-mock-h span{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cx-step{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:12px;padding:12px 14px;border-radius:14px;background:var(--soft);position:relative}
.cx-step .k{grid-row:span 2;align-self:center;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--deep-ink)}
.cx-step b{font-family:var(--display);font-weight:500;font-size:16px}
.cx-step small{font-size:13.5px;color:var(--muted)}
.cx-step.when{background:var(--ink);color:#fff}
.cx-step.when .k{color:var(--teal)}
.cx-step.when small{color:#C9D0E2}
@media (max-width:900px){.cx-mock{margin-inline:0}}
.cx-stats{border-block:1px solid var(--line);background:var(--panel)}
.cx-stats .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-block:28px}
.cx-stats div{display:grid;gap:2px;text-align:center}
.cx-stats b{font-family:var(--display);font-weight:500;font-size:clamp(30px,3.6vw,42px);letter-spacing:-.02em;line-height:1.05}
.cx-stats span{font-size:14px;color:var(--muted)}
@media (max-width:700px){.cx-stats .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cx-trigs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cx-trig{display:grid;gap:10px;align-content:start;padding:22px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.cx-trig p{color:var(--muted);font-size:15px}
.cx-ex{margin-top:4px;font-size:13.5px;font-weight:500;padding:8px 12px;border-radius:10px;background:var(--soft);color:var(--ink)}
@media (max-width:960px){.cx-trigs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cx-trigs{grid-template-columns:1fr}}
.cx-dates{margin-top:22px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:16px 32px;align-items:start;padding:24px;border-radius:var(--r);background:var(--ink);color:#fff}
.cx-dates .muted{color:#C9D0E2;margin-top:6px}
.cx-dates table{width:100%;border-collapse:collapse;font-size:14.5px}
.cx-dates th,.cx-dates td{text-align:left;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.14);vertical-align:top}
.cx-dates tr:last-child th,.cx-dates tr:last-child td{border-bottom:0}
.cx-dates th{width:120px;font-weight:600;color:var(--teal)}
@media (max-width:760px){.cx-dates{grid-template-columns:1fr}.cx-dates th{width:100px}}
.cx-objs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.cx-objs li{display:grid;gap:4px;padding:16px 18px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.cx-objs b{font-family:var(--display);font-weight:500;font-size:17px}
.cx-objs span{font-size:14px;color:var(--muted)}
.cx-blks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cx-blk{padding:22px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);display:grid;gap:12px;align-content:start}
.cx-blk h3{font-size:18px}
.cx-blk ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.cx-blk li{font-size:14.5px;padding-left:18px;position:relative;color:var(--ink)}
.cx-blk li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--deep)}
@media (max-width:1000px){.cx-blks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cx-blks{grid-template-columns:1fr}}
.cx-favs{display:flex;flex-wrap:wrap;gap:10px}
.cx-favs .tag{font-size:14px;padding:8px 14px;text-decoration:none;background:var(--panel);border:1px solid var(--line)}
.cx-favs .tag:hover{border-color:var(--deep)}
.cx-docs{margin-top:24px;font-size:14.5px;color:var(--muted)}
.cx-docs a{color:var(--deep-ink)}

/* ===== Updates page ===== */
.up-hero .wrap{grid-template-columns:1fr;padding-block:56px 8px}
.up-sec{padding-top:24px}
.up-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;position:static;background:none;border:0;padding:0}
.up-filters button{font:600 14px/1 var(--body);padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.up-filters button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.up-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.up-year span{font-family:var(--display);font-weight:500;font-size:22px;color:var(--muted)}
.up-year{padding-top:12px}
.up{display:grid;grid-template-columns:120px minmax(0,1fr) 260px;gap:24px;align-items:start;padding:24px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.up time{font-size:14px;font-weight:600;color:var(--muted);padding-top:4px}
.up article{display:grid;gap:10px;justify-items:start}
.up h2{font-size:clamp(20px,2vw,24px)}
.up h2 a{text-decoration:none}
.up h2 a:hover{color:var(--deep-ink)}
.up p{color:var(--muted)}
.up-pic{position:relative;display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:radial-gradient(120% 90% at 85% 10%,rgba(125,194,202,.55),transparent 55%),var(--soft);border:1px solid var(--line)}
.up-pic img{width:100%;height:100%;object-fit:cover}
.up-pic span{display:none}
.up-pic.noimg span{display:grid;place-items:center;position:absolute;inset:0;font-family:var(--display);font-weight:500;font-size:18px;color:var(--deep-ink)}
@media (max-width:900px){.up{grid-template-columns:1fr;gap:12px}.up-pic{max-width:420px}}
.txt-link{font-size:14.5px;font-weight:600;color:var(--deep-ink);text-decoration:none}
.txt-link:hover{text-decoration:underline}

/* ===== v18: symmetric hero flow. Three cards with the same build (label, title, 2×2 grid), centred on one axis; arrow labels sit on the line ===== */
.flowviz{max-width:480px;width:100%;margin-inline:auto 0}
.fv-card{justify-items:center;text-align:center;padding:18px;gap:10px}
.fv-card>b{margin-top:-2px}
.fv-chips,.fv-tasks,.fv-rec{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin:0}
.fv-chips span{display:grid;place-items:center;min-height:40px;padding:8px 10px;border-radius:12px;font-size:13.5px}
.fv-tasks li{justify-content:center;text-align:center;min-height:40px;padding:8px 10px;font-size:14px;border-radius:12px;background:rgba(255,255,255,.04)}
.fv-tasks li::before{display:none}
.fv-ch{justify-content:center;width:100%;padding-top:10px}
.fv-rec div,.fv-rec div:first-child{display:grid;grid-template-columns:1fr;justify-items:center;gap:2px;margin:0;padding:8px 10px;border:0;border-radius:12px;background:var(--soft);min-height:40px}
.fv-rec dt{font-size:12px}
.fv-rec dd{font-size:14px}
.fv-arrow{height:52px}
.fv-lbl{left:50%;right:auto;top:50%;transform:translate(-50%,-62%);text-align:center;padding:3px 10px;border-radius:999px;background:var(--bg);border:1px solid var(--line);z-index:1;white-space:nowrap}
@media (max-width:900px){.flowviz{margin-inline:auto}}
/* hero MCP pill: one line */
.hero-ai{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* ===== v18: update detail pages ===== */
.up h2 a,.up-pic{cursor:pointer}
.post-hero .wrap{grid-template-columns:1fr;padding-block:48px 8px;max-width:820px}
.post-back{font-size:14.5px;font-weight:600;color:var(--deep-ink);text-decoration:none}
.post-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.post{max-width:820px;margin:0 auto;padding:24px max(16px,env(safe-area-inset-left,0px)) 72px;display:grid;gap:22px}
.post h2{font-size:clamp(22px,2.4vw,28px);margin-top:18px}
.post h3{font-size:18px;margin-top:6px}
.post p,.post li{font-size:17px;line-height:1.65;color:#2B3147}
.post ul,.post ol{margin:0;padding-left:22px;display:grid;gap:8px}
.post figure{margin:6px 0;display:grid;gap:8px}
.post figure img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow)}
.post figure.small img{max-width:460px;justify-self:center}
.post figcaption{font-size:13.5px;color:var(--muted);text-align:center}
.post .tldr{padding:20px 22px;border-radius:var(--r);background:var(--soft);display:grid;gap:8px}
.post .tldr b{font-family:var(--display);font-weight:500;font-size:17px}
.post .tldr ul{gap:6px}
.post .tldr li{font-size:15.5px}
.post .note{padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--panel);font-size:15.5px;color:var(--muted)}
.post .try{display:grid;gap:12px;justify-items:start;padding:24px;border-radius:var(--r);background:var(--ink);color:#fff;margin-top:10px}
.post .try p{color:#D5DBEA}
.post .try h2{margin:0;color:#fff}
.post-next{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.post-next a{display:grid;gap:4px;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--panel);text-decoration:none;color:inherit}
.post-next a:hover{border-color:var(--deep)}
.post-next small{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.post-next .nx{text-align:right}
@media (max-width:600px){.post-next{grid-template-columns:1fr}.post-next .nx{text-align:left}}
.up-pic.nopic{display:grid;place-items:center}
.up-pic.nopic span{display:block;font-family:var(--display);font-weight:500;font-size:18px;color:var(--deep-ink)}
.btn.ghost.on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}.btn.ghost.on-dark:hover{background:rgba(255,255,255,.08)}
/* v19: hero flow, the travelling packet takes the label's place while it moves */
.fv-arrow:has(.fv-pkt.go) .fv-lbl{animation:fvlbl 1.1s ease forwards}
@keyframes fvlbl{0%,80%{opacity:0}100%{opacity:1}}

/* ===== v20: the Carerix scan, explained with a simplified example report ===== */
.cx-scan{background:linear-gradient(180deg,var(--soft),var(--bg) 70%)}
.cx-modes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}
.cx-modes>div{display:grid;gap:8px;align-content:start;padding:20px 22px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.cx-modes h3{font-size:19px}
.cx-modes p{color:var(--muted);font-size:15px}
@media (max-width:760px){.cx-modes{grid-template-columns:1fr}}
.su{border-radius:22px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);padding:22px;display:grid;gap:14px}
.su-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.su-top b{display:block;font-family:var(--display);font-weight:500;font-size:20px}
.su-k{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.su-ex{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--warn-bg);color:var(--warn)}
.su-counts{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--muted);margin:0}
.su-counts b{color:var(--ink);font-variant-numeric:tabular-nums}
.su-tabs{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--bg);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.su-tabs button{flex:1 0 auto;font:600 14px/1 var(--body);padding:10px 14px;border-radius:10px;border:0;background:none;color:var(--muted);cursor:pointer;white-space:nowrap}
.su-tabs button[aria-selected="true"]{background:var(--panel);color:var(--deep-ink);box-shadow:0 1px 3px rgba(15,19,47,.12)}
.su-panel{display:grid;gap:14px;min-height:300px;align-content:start}
.su-hero{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.su-hero>div{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:8px;padding:18px;border-radius:16px;background:var(--ink);color:#fff}
.su-big{font-family:var(--display);font-weight:500;font-size:clamp(40px,5vw,56px);letter-spacing:-.03em;line-height:1}
.su-unit{font-family:var(--display);font-size:18px;color:var(--teal)}
.su-hero small{grid-column:1/-1;margin-top:8px;color:#C9D0E2;font-size:13.5px}
.su-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.su-kpis>div{display:grid;gap:2px;padding:12px 14px;border-radius:12px;border:1px solid var(--line)}
.su-kpis small{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.su-kpis b{font-family:var(--display);font-weight:500;font-size:24px;font-variant-numeric:tabular-nums}
.su-h{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:4px 0 0}
.su-gains{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.su-gains li{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;border-radius:12px;border:1px solid var(--line);border-left:4px solid var(--deep)}
.su-gains b{font-family:var(--display);font-weight:500;font-size:20px;font-variant-numeric:tabular-nums}
.su-gains em{font-style:normal;font-size:14px;font-weight:600;color:var(--deep-ink);white-space:nowrap}
.su-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.sb-row{display:grid;grid-template-columns:130px minmax(0,1fr) 92px;gap:10px;align-items:center;font-size:14px;margin-top:6px}
.sb-l{color:var(--ink)}
.sb-bar{height:10px;border-radius:999px;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.sb-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#2B3A8F,var(--teal))}
.sb-row.warn .sb-bar i{background:linear-gradient(90deg,#C98A3A,#E7B86A)}
.sb-row.bad .sb-bar i{background:linear-gradient(90deg,#B5534D,var(--rose))}
.sb-v{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.su-note{margin:0;padding:12px 14px;border-radius:12px;background:var(--warn-bg);color:#5C4400;font-size:14px;border-left:3px solid #C98A3A}
.su-table{width:100%;border-collapse:collapse;font-size:14px}
.su-table th{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}
.su-table td{padding:10px 6px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.su-av{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px;font-weight:700;margin-right:8px}
.su-recs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.su-recs li{display:grid;grid-template-columns:36px minmax(0,1fr) 200px;gap:14px;align-items:start;padding:14px;border-radius:14px;border:1px solid var(--line)}
.su-recs .n{font-family:var(--display);font-size:22px;color:var(--muted)}
.su-recs b{font-family:var(--display);font-weight:500;font-size:17px;display:block}
.su-recs small{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.su-btns{display:flex;gap:6px;margin-top:10px}
.su-b{font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:8px;border:1px solid var(--line);color:var(--ink)}
.su-b.p{background:var(--teal);border-color:var(--teal)}
.su-recs dl{margin:0;display:grid;gap:4px;padding:10px 12px;border-radius:12px;background:var(--bg)}
.su-recs dl div{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.su-recs dt{color:var(--muted)}
.su-recs dd{margin:0;font-weight:700;color:var(--ink)}
.su-calc{margin:0;font-size:12.5px;color:var(--muted)}
.cx-steps{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cx-steps li{display:grid;gap:4px;justify-items:center;text-align:center;padding:16px 12px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.cx-steps .sn{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--deep);color:var(--deep-ink);font-weight:700;margin-bottom:4px}
.cx-steps li:last-child .sn{background:var(--deep-ink);border-color:var(--deep-ink);color:#fff}
.cx-steps small{font-size:13.5px;color:var(--muted)}
.cx-scan-cta{margin-top:20px;justify-content:center}
.cx-q-h{margin:44px 0 16px;font-size:22px;text-align:center}
@media (max-width:860px){.su-hero,.su-cols{grid-template-columns:1fr}.cx-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.su-recs li{grid-template-columns:30px minmax(0,1fr)}.su-recs dl{grid-column:2}}
@media (max-width:560px){.su-kpis{grid-template-columns:1fr}.su-gains li{grid-template-columns:70px minmax(0,1fr)}.su-gains em{grid-column:2}.sb-row{grid-template-columns:100px minmax(0,1fr) 80px}.su{padding:16px}.su-table th:nth-child(3),.su-table td:nth-child(3){display:none}}
.su-panel[hidden]{display:none}
/* v21: one spacing rhythm. 44px under a section head, 40px between blocks inside a section, 88px between sections */
#use-cases .pillars{margin-top:0;margin-bottom:40px}
#use-cases .sec-h{margin-bottom:44px}
.cases-more{margin-top:32px}
.plans+.task-explain{margin-top:24px}
.uc-group{padding-block:48px 40px}
.uc-group:has(+ #build){padding-bottom:96px}
.ai-row{margin-top:56px}
.cl-can li b{margin-right:2px}
.band-link{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.45)}

/* ---------- v20: mobile polish ---------- */
/* the page never pans sideways: anything wider (moving shapes, animations) is clipped at the edge */
html{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}

/* mobile menu: the main links were hidden below 820px; now a menu button opens them */
.mm-btn{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;place-items:center;flex:none}
.mm-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.mm-btn .x{display:none}
.nav.open .mm-btn .x{display:block}.nav.open .mm-btn .bars{display:none}
.mm{display:none}
@media (max-width:1100px){
  .nav nav,.nav .btn.hc{display:none}
  .nav .btn.hc+.btn{margin-left:auto}
  .mm-btn{display:grid}
  .nav .wrap{gap:10px}
  .nav .btn.primary{margin-left:auto;padding-inline:16px}
  .nav.open .mm{display:grid;position:absolute;left:0;right:0;top:100%;gap:2px;padding:10px 16px 18px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(15,19,47,.12)}
  .mm a{display:flex;align-items:center;min-height:48px;padding:0 4px;font:500 17px var(--display);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
  .mm a small{margin-left:8px;font:400 13px var(--body);color:var(--muted)}
  .nav .mm .btn{margin:12px 0 0;width:100%;justify-content:center;border-bottom:0;font:600 15px var(--body)}
}
@media (max-width:360px){.nav .logo span,.nav .logo svg{max-width:96px}.nav .btn.primary{padding-inline:12px;font-size:14px}}

/* homepage use cases: a swipeable row on phones instead of six tall cards */
@media (max-width:600px){
  .cases{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin-inline:-16px;padding:2px 16px 10px;scrollbar-width:none}
  .cases::-webkit-scrollbar{display:none}
  .case{flex:0 0 82%;scroll-snap-align:start}
  .cases-more{grid-template-columns:1fr}
  .cases-more .btn{justify-self:start}
}
.swipe-hint{display:none;margin:0 0 10px;font-size:13px;font-weight:600;color:var(--deep-ink)}
@media (max-width:600px){.swipe-hint{display:block}}

/* example tabs fit on the smallest phones */
@media (max-width:360px){.ex-tabs button{padding:0 10px;font-size:13px}}

/* Claude section: label and text stay on one line of flow */
.cl-can li{display:block;position:relative;padding-left:28px}
.cl-can li::before{position:absolute;left:0;top:2px;margin:0}
@media (max-width:560px){.cl-steps li{grid-template-columns:28px 1fr;column-gap:10px}.cl-steps li::before{grid-row:span 2;margin:0}}

/* footer on phones: tidy two-column links */
@media (max-width:600px){footer nav{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;width:100%}footer nav a{min-height:40px}}

/* logos on phones: an even two-column grid */
@media (max-width:520px){.logos ul{display:grid;grid-template-columns:1fr 1fr;justify-items:center;gap:18px 12px}}

/* integrations diagram never wider than its column */
.int-hero .hero-media,.hub{min-width:0;max-width:100%}
.hub svg{max-width:100%;height:auto}
.hub-legend{flex-wrap:wrap;max-width:100%}
@media (max-width:1100px){.int-hero .hub{margin-right:0}.hub svg{animation:hubfloat-sm 12s ease-in-out infinite;transform:rotateX(8deg)}}
@keyframes hubfloat-sm{0%,100%{transform:rotateX(8deg) translateY(0)}50%{transform:rotateX(5deg) translateY(-6px)}}
/* hero AI link wraps on phones instead of being cut off */
@media (max-width:600px){.hero-ai{white-space:normal;overflow:visible;border-radius:16px;align-items:flex-start;line-height:1.4}.hero-ai .dot{flex:none;margin-top:6px}}

/* ---------- v21: conversion pass ---------- */
/* proof right under the hero: who already uses it */
.hero-proof .wrap{display:flex;align-items:center;gap:20px 36px;flex-wrap:wrap;justify-content:center;padding-block:6px 40px}
.hero-proof p{margin:0;font-size:14px;color:var(--muted)}
.hero-proof p b{color:var(--ink);font-weight:600}
.hero-proof ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 34px}
.hero-proof li{display:flex;align-items:center;height:40px}
.hero-proof img{display:block;height:calc(var(--h,28px)*.85);width:auto;filter:grayscale(1);opacity:.6}
.hero-proof img.light-src{filter:grayscale(1) brightness(.35)}
@media (max-width:600px){.hero-proof .wrap{padding-bottom:28px;gap:14px}.hero-proof p{width:100%;text-align:center}
  .hero-proof ul{display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;gap:12px 10px;width:100%}.hero-proof img{height:calc(var(--h,28px)*.7);max-width:100%}}
.results .res-top{padding-bottom:0}

/* why we built it + trust, one section */
.wb-trust{display:grid;gap:16px}
.wb-h{font-size:18px;color:var(--deep-ink)}
.why.trust-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}
.why.trust-list h3{font-size:16.5px}
.why.trust-list p{font-size:14.5px}
@media (max-width:520px){.why.trust-list{grid-template-columns:1fr 1fr;gap:18px 14px}.why.trust-list p{font-size:13.5px}}

/* every plan has its own next step */
.plan{grid-template-rows:auto auto auto auto 1fr auto}
.plan-cta{margin-top:14px;justify-content:center}
@media (max-width:860px){
  .plans{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin-inline:-16px;padding:2px 16px 10px;scrollbar-width:none}
  .plans::-webkit-scrollbar{display:none}
  .plan{flex:0 0 min(82%,340px);scroll-snap-align:start}
}

/* shorter on phones: the AI cards sit two by two */
@media (max-width:560px){.ai-row{grid-template-columns:1fr 1fr;gap:10px}.ai-row>div{padding:14px}.ai-row h3{font-size:15px}.ai-row p{font-size:13px}}
@media (max-width:860px){#pricing .swipe-hint{display:block}}

/* ---------- v22: videos straight under the hero, then logos + numbers in one band ---------- */
.voices{padding-top:24px}
.proof-band .pb-logos{display:grid;gap:18px;justify-items:center;text-align:center;padding-block:48px 0}
.proof-band .pb-logos p{margin:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.proof-band .pb-logos p b{color:var(--ink);font-weight:600}
.proof-band .pb-logos ul.ats-direct{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 40px}
.proof-band .pb-logos li{display:flex;align-items:center;height:44px}
.proof-band .pb-logos img{display:block;height:var(--h,28px);width:auto;filter:grayscale(1);opacity:.65}
.proof-band .pb-logos img.light-src{filter:grayscale(1) brightness(.35)}
.proof-band .proof .wrap{padding-block:28px 52px}
@media (max-width:600px){.proof-band .pb-logos{padding-top:36px}.proof-band .pb-logos ul.ats-direct{display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;gap:12px 10px;width:100%}.proof-band .pb-logos img{height:calc(var(--h,28px)*.7);max-width:100%}}

/* ---------- v21: light look kept, agents positioning, human in the loop, Carerix visuals, polish ---------- */
.hl{color:var(--deep)}
.band h2 .hl,.cta h2 .hl{color:var(--teal)}
.nav .btn.hc+.btn{margin-left:0}
@media (max-width:1100px){.nav .btn.hc+.btn{margin-left:auto}}
.nav .dd-menu a,.nav .dd-menu b{color:var(--ink)}
/* trust line under the hero buttons */
.hero-trust{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero-trust li{display:inline-flex;align-items:center;gap:7px}
.hero-trust li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--deep)}
/* review step in the hero flow */
.fv-review{grid-template-columns:auto 1fr auto;align-items:center;justify-items:start;text-align:left;gap:6px 12px;padding:12px 16px;border-color:color-mix(in srgb,var(--deep) 45%,var(--line))}
.fv-review .ic{width:34px;height:34px;border-radius:10px;background:var(--soft);color:var(--deep-ink);display:grid;place-items:center;grid-row:span 2}
.fv-review .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fv-review .fv-k{margin:0}
.fv-review b{font-size:15px;margin:0}
.fv-review .fv-btns{grid-row:span 2;display:flex;gap:6px}
.fv-review .fv-btns span{font-size:12.5px;font-weight:600;padding:7px 11px;border-radius:999px;border:1px solid var(--line);color:var(--ink);background:var(--panel)}
.fv-review .fv-btns span.ok{background:var(--teal);border-color:var(--teal);color:#0F132F;box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 35%,transparent)}
/* human in the loop */
.hitl{background:var(--panel);border-block:1px solid var(--line)}
.hitl-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.hitl-modes{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hitl-modes li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:2px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--bg)}
.hitl-modes .ic{grid-row:span 2;width:40px;height:40px;border-radius:12px;display:grid;place-items:center}
.hitl-modes .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hitl-modes .m1 .ic{background:#E3ECFF;color:#2B4FB8}.hitl-modes .m2 .ic{background:#E1F6EA;color:#1E7A48}.hitl-modes .m3 .ic{background:#EFE6FF;color:#6B3FC8}
.hitl-modes b{font-family:var(--display);font-weight:500;font-size:16px}
.hitl-modes span{font-size:14px;color:var(--muted)}
.hitl-law{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px 16px;border-radius:14px;background:var(--soft);font-size:14.5px}
.hitl-law .ic{flex:none;width:32px;height:32px;border-radius:10px;background:var(--deep);color:#fff;display:grid;place-items:center}
.hitl-law .ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hitl-shot{position:relative}
.hitl-shot .frame{padding:8px}
.hitl-shot .frame img{aspect-ratio:auto;border-radius:14px}
.hitl-pop{position:absolute;right:-12px;bottom:-18px;width:min(300px,70%);background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px}
.hitl-pop img{border-radius:8px;width:100%;height:auto}
@media (max-width:900px){.hitl-grid{grid-template-columns:1fr;gap:32px}.hitl-pop{right:0;bottom:-12px}}
/* soft lift on cards */
.case,.plan,.pillar,.how li,.uc-card .uc-open,.story,.quote,.deep,.cx-trig,.up{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.case:hover,.plan:hover,.pillar:hover,.how li:hover,.uc-card:hover .uc-open,.story:hover,.quote:hover,.deep:hover,.cx-trig:hover,.up:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(15,19,47,.12)}
/* Carerix: stats with gridlines, dark example report with button tabs */
.cx-stats{position:relative}
.cx-stats::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;background-image:radial-gradient(color-mix(in srgb,var(--ink) 18%,transparent) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.cx-stats .wrap{position:relative}
.su{background:linear-gradient(160deg,#171D4C,#0F132F);border-color:transparent;color:#FFFFFF;box-shadow:0 30px 70px rgba(15,19,47,.25)}
.su-top b{color:#FFFFFF}
.su-k{color:var(--teal)}
.su-counts{color:#AEB6CC}.su-counts b{color:#FFFFFF}
.su-tabs{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);padding:5px;gap:5px}
.su-tabs button{color:#C9D3E4;transition:background .2s,color .2s}
.su-tabs button:hover{background:rgba(255,255,255,.1);color:#FFFFFF}
.su-tabs button[aria-selected="true"]{background:var(--teal);color:#0F132F;box-shadow:0 6px 18px rgba(125,194,202,.35)}
.su-hero>div{background:rgba(125,194,202,.12);border:1px solid rgba(125,194,202,.35)}
.su-kpis>div,.su-gains li,.su-recs li{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.su-gains li{border-left-color:var(--teal)}
.su-gains em,.su-h,.su-kpis small,.su-recs .n,.su-recs small,.su-recs dt,.su-calc,.su-table th{color:#AEB6CC}
.su-gains em{color:var(--teal)}
.sb-l,.sb-v{color:#FFFFFF}
.sb-bar{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
.su-table td{border-color:rgba(255,255,255,.12)}
.su-av{background:var(--teal);color:#0F132F}
.su-recs dl{background:rgba(255,255,255,.06)}.su-recs dd{color:#FFFFFF}
.su-b{border-color:rgba(255,255,255,.25);color:#FFFFFF}.su-b.p{color:#0F132F}
.su-note{background:rgba(255,241,201,.12);color:#FFE9B8;border-left-color:#E9C27A}
.cx-quotes .quote blockquote{font-size:15.5px}
.cx-favs .tag{font-size:15px;padding:11px 18px}
@media (max-width:360px){.cx-scan-cta .btn{white-space:normal;text-align:center}}
/* dates as a timeline */
.cx-tl{margin-top:24px;padding:26px;border-radius:var(--r);color:#FFFFFF;background:linear-gradient(160deg,#171D4C,#0F132F);display:grid;gap:22px;overflow:hidden}
.cx-tl-h h3{font-size:22px;color:#FFFFFF}
.cx-tl-h p{color:#AEB6CC;font-size:15px;margin-top:4px}
.cx-tl-track{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:12px}
.cx-tl-track::before{content:"";position:absolute;left:0;right:0;top:50px;height:2px;background:linear-gradient(90deg,transparent,rgba(125,194,202,.6) 15%,var(--teal) 50%,rgba(125,194,202,.6) 85%,transparent)}
.cx-tl-side,.cx-tl-now{grid-row:1;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#AEB6CC}
.cx-tl-side:first-child{grid-column:1;justify-self:start}
.cx-tl-now{grid-column:2;justify-self:center;color:var(--teal)}
.cx-tl-side:nth-child(3){grid-column:3;justify-self:end}
.cx-tl-cards{grid-column:1/-1;grid-row:2;list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.cx-tl-cards li{position:relative;display:grid;gap:3px;padding:12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:transform .25s,background .25s}
.cx-tl-cards li:hover{transform:translateY(-4px);background:rgba(255,255,255,.1)}
.cx-tl-cards li::before{content:"";position:absolute;left:50%;top:-22px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(125,194,202,.25)}
.cx-tl-cards li b{font-size:13px;font-weight:700;color:var(--teal)}
.cx-tl-cards li span{font-size:13.5px;font-weight:600;color:#FFFFFF}
.cx-tl-cards li small{font-size:12.5px;color:#AEB6CC;line-height:1.35}
.cx-tl-cards li.now{background:rgba(125,194,202,.14);border-color:rgba(125,194,202,.45)}
.cx-tl-cards li.now::before{width:14px;height:14px;margin-left:-7px;top:-24px;box-shadow:0 0 0 5px rgba(125,194,202,.25)}
.cx-tl-fields{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px 18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
.cx-tl-fields div{display:grid;gap:2px}
.cx-tl-fields dt{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.cx-tl-fields dd{margin:0;font-size:13.5px;color:#C9D3E4}
@media (max-width:900px){.cx-tl-cards{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:8px}.cx-tl-track::before,.cx-tl-cards li::before,.cx-tl-track>span{display:none}}
@media (max-width:560px){.cx-tl-cards{grid-template-columns:1fr 1fr}}
/* objects as a map around HireData */
.cx-map{display:grid;gap:18px;padding:28px;border-radius:var(--r);color:#FFFFFF;background:radial-gradient(700px 400px at 50% 0%,rgba(125,194,202,.2),transparent 60%),linear-gradient(160deg,#171D4C,#0F132F)}
.cx-map-core{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:14px;row-gap:2px;padding:14px 22px;border-radius:999px;width:fit-content;max-width:100%;margin:0 auto;background:rgba(255,255,255,.06);border:1px solid rgba(125,194,202,.4)}
.cx-map-core svg{width:30px;height:38px;grid-row:span 2}
.cx-map-core b{font-family:var(--display);font-weight:500;font-size:18px}
.cx-map-core span{font-size:13px;color:#AEB6CC}
.cx-map-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.cx-map-tiles li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px;align-items:start;padding:14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:transform .25s,background .25s}
.cx-map-tiles li:hover{transform:translateY(-4px);background:rgba(255,255,255,.09)}
.cx-map-tiles .ic{grid-row:span 3;width:36px;height:36px;border-radius:10px;background:rgba(125,194,202,.16);color:var(--teal);display:grid;place-items:center}
.cx-map-tiles .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cx-map-tiles b{font-family:var(--display);font-weight:500;font-size:15px;color:#FFFFFF}
.cx-map-tiles .d{font-size:12.5px;color:#AEB6CC;line-height:1.35}
.caps{display:flex;gap:5px;margin-top:6px}
.caps i,.cx-map-legend i{display:inline-block;width:9px;height:9px;border-radius:3px}
.caps i.s,.cx-map-legend i.s{background:var(--teal)}.caps i.r,.cx-map-legend i.r{background:#AEB6CC}.caps i.w,.cx-map-legend i.w{background:#E9C27A}
.cx-map-legend{margin:0;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;font-size:12px;font-weight:600;letter-spacing:.06em;color:#C9D3E4}
.cx-map-legend span{display:inline-flex;align-items:center;gap:7px}
@media (max-width:420px){.cx-map-core{border-radius:20px}}
/* building blocks: an assembled flow, then the palette */
.bk-flow{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:18px;margin-bottom:22px;border-radius:var(--r);background:linear-gradient(160deg,#171D4C,#0F132F);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.bk-flow::-webkit-scrollbar{display:none}
.bk-flow i{color:rgba(255,255,255,.45);font-style:normal;flex:none}
.bk{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:13.5px;font-weight:500;padding:9px 13px;border-radius:10px;border:1px solid;white-space:nowrap;--c:var(--deep)}
.bk::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c);flex:none}
.bk.cx{--c:var(--teal)}.bk.msg{--c:#5DD36D}.bk.ai{--c:#B48CFF}.bk.lg{--c:#E9C27A}
.bk-flow .bk{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#FFFFFF}
.bk-flow .bk.when{background:var(--teal);color:#0F132F;border-color:var(--teal)}
.bk-flow .bk.when::before{display:none}
.bk em{font-style:normal;font-size:11px;font-weight:700;padding:2px 6px;border-radius:999px;background:var(--teal);color:#0F132F}
.bk-pal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bk-pal>div{padding:18px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);min-width:0}
.bk-pal h3{display:flex;align-items:center;gap:8px;font-size:15px;margin-bottom:12px}
.bk-pal h3 i{width:10px;height:10px;border-radius:3px;background:var(--deep)}
.bk-pal h3 i.cx{background:var(--teal)}.bk-pal h3 i.msg{background:#5DD36D}.bk-pal h3 i.ai{background:#B48CFF}.bk-pal h3 i.lg{background:#E9C27A}
.bk-row{display:flex;flex-wrap:wrap;gap:8px}
.bk-pal .bk{background:var(--bg);border-color:var(--line);color:var(--ink)}
@media (max-width:700px){.bk-pal{grid-template-columns:1fr}}
@media (max-width:420px){.bk-pal .bk{white-space:normal}}
/* updates: whole screenshots */
@media (min-width:901px){.up{grid-template-columns:110px minmax(0,1fr) 400px}}
.up-pic{display:grid;place-items:center;padding:10px;background:linear-gradient(145deg,#EEF6F6,#F9F9F3 60%,#E7F2F3)}
.up-pic img{object-fit:contain;border-radius:8px;box-shadow:0 10px 30px rgba(15,19,47,.14)}
.hitl-shot .frame img{height:auto;object-fit:contain}
/* review card in the flow: label and title stacked, buttons on the right */
.fv-review .fv-k{grid-column:2;grid-row:1}
.fv-review b{grid-column:2;grid-row:2}
.fv-review .fv-btns{grid-column:3;grid-row:1/3;align-self:center}
@media (max-width:420px){.fv-review{grid-template-columns:auto 1fr}.fv-review .fv-btns{grid-column:1/3;grid-row:3;justify-self:start;margin-top:6px}}
/* review section: brand icons and a built example instead of a screenshot */
.hitl-modes li{background:var(--panel)}
.hitl-modes .ic{background:var(--soft);color:var(--deep-ink)}
.rv-mock{display:grid;gap:14px;padding:20px;border-radius:24px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.rv-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.rv-k{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--deep-ink)}
.rv-who{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.rv-who i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font:700 10px var(--body);font-style:normal}
.rv-body{display:grid;gap:12px;padding:16px;border-radius:16px;background:var(--bg);border:1px solid var(--line)}
.rv-agent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.rv-av{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--soft)}
.rv-av svg{width:20px;height:26px}
.rv-agent b{display:block;font-family:var(--display);font-weight:500;font-size:16px}
.rv-agent span{font-size:13px;color:var(--muted)}
.rv-prop{font-size:15px}
.rv-msg{display:grid;gap:4px;font-size:14px;line-height:1.45;padding:10px 12px;border-radius:12px 12px 12px 4px;background:#D9FDD3;color:#0F132F;max-width:46ch}
.rv-msg span{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#1E7A48}
.rv-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rv-b{font-size:14px;font-weight:600;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel)}
.rv-b.ok{background:var(--teal);border-color:var(--teal);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 35%,transparent)}
.rv-note{font-size:13px;color:var(--muted);margin-left:auto}
.rv-log{display:grid;gap:6px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.rv-log span{display:flex;align-items:center;gap:8px}
.rv-log i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.rv-log i.on{background:var(--deep);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 35%,transparent)}
.voices{padding-top:72px}

/* ---------- v22: design pass with the frontend-design skill ----------
   Labels in sentence case, no decorative motion (the hero flow is the one moving thing), and cards only for
   product mock-ups: pillars, steps, trust points and modes read as plain content. */
.eyebrow,.fv-k,.su-k,.rv-k,.vtag,.hero-trust,.cl-tag,.sr-k,.wb-h,.cx-tl-side,.cx-tl-now,.cx-tl-fields dt,.cx-map-legend,.gmsg span,.rv-msg span,.pb-logos p,.logos p,.su-h,.su-kpis small,.su-table th,.ex-tag,.hub-lbl,.cx-mock-h span,.cx-step .k,.story .who,.plan .pn,.qtag,.te-h span,.post-next small,.ba-table td::before{text-transform:none;letter-spacing:0}
.eyebrow{font-size:14px;font-weight:600;letter-spacing:0}
.fv-k{font-size:12.5px;letter-spacing:0}
.hero-trust{font-size:13px;font-weight:500;letter-spacing:0;text-transform:none}
.rv{opacity:1;transform:none;filter:none;transition:none}
.case,.plan,.pillar,.how li,.uc-card .uc-open,.story,.quote,.deep,.cx-trig,.up,.cx-tl-cards li,.cx-map-tiles li,.vposter,.cx-favs .tag{transition:border-color .15s,background .15s}
.case:hover,.plan:hover,.pillar:hover,.how li:hover,.uc-card:hover .uc-open,.story:hover,.quote:hover,.deep:hover,.cx-trig:hover,.up:hover,.cx-tl-cards li:hover,.cx-map-tiles li:hover,.vcard:hover .vposter,.cx-favs .tag:hover{transform:none;box-shadow:none}
.case:hover,.uc-card:hover .uc-open,.up:hover{border-color:var(--deep)}
.vcard:hover .vposter{box-shadow:var(--shadow)}
.case .pic img{transition:none}.case:hover .pic img{transform:none}
/* cards only where they show a product: flow, review example, chat, scan report, videos, use-case tiles, plans */
.pillars{gap:28px 32px;margin:-4px 0 36px}
.pillar,.pillar.own{padding:0;border:0;background:transparent;box-shadow:none;border-radius:0}
.pillar .ic{background:var(--soft);color:var(--deep-ink)}
.how{gap:32px}
.how li{padding:0 0 0 56px;border:0;background:transparent;box-shadow:none;position:relative;border-radius:0}
.how li::before{position:absolute;left:0;top:-2px;margin:0}
.why.trust-list>div{padding:0;border:0;background:transparent;box-shadow:none}
.hitl-modes{gap:0}
.hitl-modes li{padding:14px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
.hitl-modes li:last-child{border-bottom:1px solid var(--line)}
.ai-row{gap:28px 32px}
.ai-row>div{padding:0;border:0;background:transparent;box-shadow:none}
.cx-steps{gap:28px 24px}
.cx-steps li{padding:0;border:0;background:transparent;border-radius:0}
.cx-modes>div{padding:0 0 18px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.cases-more{border-style:solid;border-color:var(--line);background:var(--panel);box-shadow:none}
.sl li>div{box-shadow:none}

/* ---------- v23: Tim's feedback and ad inflow ---------- */
/* clip plays once; caption as text under the player; bigger player in the pop-up */
.uc-dialog-body{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.uc-dialog-body .frame{position:relative}
.uc-dialog-body .frame video{aspect-ratio:1/1;object-fit:cover}
.vcapt{margin:10px 6px 2px;font-family:var(--display);font-weight:500;font-size:16px;line-height:1.35;color:var(--ink);text-wrap:balance}
.replay{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font:600 14px var(--body);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:11px 18px;cursor:pointer;box-shadow:var(--shadow)}
.replay::before{content:"↻ "}
@media (max-width:760px){.uc-dialog-body .frame{max-width:none}}
/* channels */
.ch-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 28px}
.ch-list li{display:flex;align-items:center;gap:10px;font-size:15.5px;padding:12px 0;border-top:1px solid var(--line)}
.ch-list li i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--c)}
@media (max-width:760px){.ch-list{grid-template-columns:1fr;gap:0}}
.logos img[alt="Vertage"],.pb-logos img[alt="Vertage"]{filter:grayscale(1);opacity:.65}
.proof-band .pb-logos{gap:12px}
.proof-band .pb-logos p+ul{margin-bottom:16px}
.proof-band .pb-logos p:last-of-type+ul{margin-bottom:0}

/* ATS logo slider: one continuous row, pauses on hover, still for reduced motion */
.marquee{overflow:hidden;width:100%;display:flex;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:56px;flex:none;padding-right:56px;animation:marquee 42s linear infinite}
.marquee:hover ul{animation-play-state:paused}
.marquee li{display:flex;align-items:center;height:48px;flex:none}
.marquee img{display:block;height:var(--h,28px);width:auto;filter:grayscale(1);opacity:.65}
.marquee img.light-src{filter:grayscale(1) brightness(.35)}
.marquee img.dk{filter:grayscale(1) brightness(.2)}
.marquee li.nm{font-family:var(--display);font-weight:500;font-size:20px;color:var(--muted);opacity:.75;letter-spacing:-.01em}
@keyframes marquee{to{transform:translateX(-100%)}}
.proof-band .pb-logos{gap:16px}
.proof-band .pb-logos .fine-note{text-align:center}
.proof-band .pb-logos p,.proof-band .pb-logos .fine-note{text-transform:none;letter-spacing:0;font-size:14px}
.proof-band .pb-logos .fine-note{font-size:13px}
.marquee ul{animation-duration:90s}
.marquee li.ats{gap:9px;font-family:var(--display);font-weight:500;font-size:17px;color:var(--muted);opacity:.8;letter-spacing:-.01em}
.marquee li.ats img{height:26px;width:26px;border-radius:7px;filter:grayscale(1);opacity:.85}
.marquee li.ats img{height:26px;width:26px;flex:none}
.marquee li.ats{white-space:nowrap}

/* ATS band: six direct logos in a row, then the Kombo slider; everything links, colour comes back on hover */
.ats-direct{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 44px}
.ats-direct li{display:flex;align-items:center;height:52px}
.ats-direct a,.marquee a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:inherit;padding:6px 8px;border-radius:10px}
.ats-direct img{display:block;height:var(--h,28px);width:auto;filter:grayscale(1);opacity:.65;transition:filter .2s,opacity .2s}
.ats-direct img.light-src{filter:grayscale(1) brightness(.35)}
.ats-direct img.dk{filter:grayscale(1) brightness(.2)}
.ats-direct a:hover img,.ats-direct a:focus-visible img{filter:none;opacity:1}
.ats-direct a:hover img.light-src{filter:none}
.ats-direct a:hover img.dk{filter:brightness(.2)}
.pb-logos .more-l{margin-top:14px}
.marquee li.ats a{padding:6px 10px}
.marquee li.ats img{transition:filter .2s,opacity .2s}
.marquee li.ats a:hover,.marquee li.ats a:focus-visible{background:var(--panel);color:var(--ink)}
.marquee li.ats a:hover img,.marquee li.ats a:focus-visible img{filter:none;opacity:1}
.marquee:focus-within ul{animation-play-state:paused}
@media (max-width:640px){.ats-direct{gap:14px 24px}.ats-direct li{height:40px}.ats-direct img{height:calc(var(--h,28px)*.8)}}
@media (prefers-reduced-motion:reduce){.marquee{overflow-x:auto;scrollbar-width:none;mask-image:none;-webkit-mask-image:none}.marquee ul{animation:none;transform:none;flex-wrap:nowrap;justify-content:flex-start;gap:28px}.marquee ul[aria-hidden]{display:none}}

/* date triggers: four examples that read as a sentence, one note for the field list */
.cx-tl{gap:18px}
.cx-tl-h h3{font-size:22px}
.cx-tl2{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;position:relative}
.cx-tl2::before{content:"";position:absolute;left:4%;right:4%;top:-2px;height:2px;background:linear-gradient(90deg,transparent,rgba(125,194,202,.6) 15%,var(--teal) 50%,rgba(125,194,202,.6) 85%,transparent)}
.cx-tl2 li{position:relative;display:grid;gap:4px;padding:22px 14px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);text-align:center}
.cx-tl2 li::before{content:"";position:absolute;left:50%;top:-7px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px #0F132F}
.cx-tl2 li.now{background:rgba(125,194,202,.14);border-color:rgba(125,194,202,.45)}
.cx-tl2 li.now::before{width:16px;height:16px;margin-left:-8px;top:-9px}
.cx-tl2 b{font-family:var(--display);font-weight:500;font-size:16px;color:#FFFFFF}
.cx-tl2 i{font-style:normal;font-size:13px;font-weight:700;color:var(--teal)}
.cx-tl2 span{font-size:13.5px;color:#C9D3E4}
.cx-tl-note{margin:0;font-size:13.5px;color:#AEB6CC;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
@media (max-width:640px){.cx-tl2{grid-template-columns:1fr 1fr}.cx-tl2::before{display:none}}

/* AI assistant logos in brand colour */
.ai-logos{list-style:none;margin:-6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.ai-logos li{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--ink)}
.ai-logos svg{width:22px;height:22px}
/* Meta section */
.meta-mark{display:inline-block;vertical-align:-6px;width:40px;height:40px;margin-right:4px}

/* ---------- NPS on the owners page ---------- */
.nps{background:var(--panel);border-block:1px solid var(--line)}
.nps-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center}
.nps-pts{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:0}
.nps-pts li{display:grid;gap:2px;padding:12px 0;border-top:1px solid var(--line)}
.nps-pts li:last-child{border-bottom:1px solid var(--line)}
.nps-pts b{font-family:var(--display);font-weight:500;font-size:16px}
.nps-pts span{font-size:14px;color:var(--muted)}
.nps-mock{display:grid;gap:14px;padding:20px;border-radius:24px;background:var(--bg);border:1px solid var(--line);box-shadow:var(--shadow)}
.nps-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.nps-k{display:block;font-size:12px;font-weight:600;color:var(--deep-ink)}
.nps-top b{font-family:var(--display);font-weight:500;font-size:16px}
.nps-flt{font-size:12px;color:var(--muted);padding:6px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--line)}
.nps-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.nps-kpis>div{display:grid;gap:2px;padding:12px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.nps-kpis small{font-size:11.5px;color:var(--muted)}
.nps-kpis b{font-family:var(--display);font-weight:500;font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums}
.nps-kpis b.good{color:#2B4FB8}.nps-kpis b.bad{color:#B4544F}
.nps-kpis em{font-style:normal;font-size:11px;color:var(--muted)}
.nps-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nps-h{font-size:12px;font-weight:600;color:var(--muted);margin:0 0 6px}
.nps-bars{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.nps-bars li{display:grid;grid-template-columns:88px minmax(0,1fr) 34px;align-items:center;gap:8px;font-size:12.5px}
.nps-bars.wide li{grid-template-columns:120px minmax(0,1fr) 34px}
.nps-bars span{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nps-bars i{display:block;height:12px;border-radius:4px;background:var(--c);width:var(--v);opacity:.85}
.nps-bars b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;font-size:12px}
.nps-cmt{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.nps-cmt .sc{flex:none;display:grid;place-items:center;width:28px;height:22px;border-radius:6px;background:#E1F6EA;color:#1E7A48;font-size:12px;font-weight:700}
.nps-cmt q{quotes:none;display:block;font-size:14px}
.nps-cmt small{font-size:12px;color:var(--muted)}
.nps-note{margin:0;font-size:12px;color:var(--muted);text-align:right}
@media (max-width:900px){.nps-grid{grid-template-columns:1fr;gap:28px}}
@media (max-width:520px){.nps-kpis{grid-template-columns:1fr 1fr}.nps-cols{grid-template-columns:1fr}.nps-bars li,.nps-bars.wide li{grid-template-columns:84px minmax(0,1fr) 34px}}
.plan li.no{list-style:none;margin-left:-18px;padding-left:18px;position:relative;color:var(--muted);text-decoration:line-through;opacity:.7}
.plan li.no::before{content:"–";position:absolute;left:4px}
.te-list b{font-size:19px}

/* ---------- integrations page: still diagram, Carerix tile like the rest, channels in two groups ---------- */
.hub svg,.int-hero .hub svg{animation:none!important;transform:none!important;filter:drop-shadow(0 18px 30px rgba(15,19,47,.10))}
.hub-pulse{animation:none;display:none}
.hub-dot{display:none}
.hub-line{opacity:.3}
.deep.main{background:var(--panel);border-color:var(--line);color:var(--ink)}
.deep.main .st{color:var(--deep-ink)}.deep.main p{color:var(--muted)}
.deep.main b.lg img{filter:none}
.deep.link{text-decoration:none;color:inherit;border-color:color-mix(in srgb,var(--deep) 45%,var(--line));transition:border-color .15s,background .15s}
.deep.link:hover{border-color:var(--deep);background:var(--soft)}
.deep.link .deep-go{color:var(--deep-ink)}
.deep.link .deep-go::after{content:" →"}
.deep .rma{font:600 12px var(--body);letter-spacing:.06em;padding:3px 8px;border-radius:999px;background:var(--ink);color:#FFFFFF;margin-left:2px}
.ch-groups{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ch-group{padding:24px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.ch-group h3{font-size:19px}
.ch-group>p{font-size:14.5px;color:var(--muted);margin:4px 0 14px}
.ch-items{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ch-items li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.ch-items .ic{width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--c) 12%,var(--panel));color:var(--c);display:grid;place-items:center}
.ch-items .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ch-items .ic svg path[fill]{stroke:none}
.ch-items b{display:block;font-family:var(--display);font-weight:500;font-size:16px}
.ch-items div>span{font-size:14px;color:var(--muted)}
@media (max-width:860px){.ch-groups{grid-template-columns:1fr}}
.hub-node.main rect{fill:#FFFFFF;stroke:var(--deep)}
.hub-node.main text{fill:var(--ink)}
.hub-node.main image.lg.light{filter:none}

/* seat vs credits, as a small table */
.seat-vs2{margin-top:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.sv-h{margin:0;padding:14px 20px;font-size:14px;color:var(--muted);border-bottom:1px solid var(--line)}
.sv-row{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr);gap:12px;padding:12px 20px;border-top:1px solid var(--line);font-size:15px;align-items:center}
.sv-row:first-of-type{border-top:0}
.sv-row>span:first-child{font-weight:600}
.sv-row b{font-family:var(--display);font-weight:500;font-size:19px}
.sv-head span{font-size:12.5px;font-weight:600;color:var(--muted)}
.sv-head{background:var(--bg)}
.sv-row .us{background:var(--soft);margin:-12px 0;padding:12px 14px;align-self:stretch;display:flex;align-items:center;border-left:2px solid var(--deep)}
.sv-head .us{color:var(--deep-ink)}
.sv-foot{color:var(--muted)}
.sv-foot .us{color:var(--ink)}
@media (max-width:640px){.sv-row{grid-template-columns:1fr;gap:4px}.sv-head{display:none}.sv-row .us{margin:4px -20px -12px;padding:10px 20px;border-left:0;border-top:1px solid var(--line)}.sv-row .us::before{content:"HireData: ";font-weight:600;color:var(--deep-ink);margin-right:4px}.sv-row>span:nth-child(2)::before{content:"Per seat: ";font-weight:600;color:var(--muted);margin-right:4px}}
/* homepage ATS tiles: Carerix like the others, but clearly a link */
.ats-list .main{background:var(--panel);border-color:color-mix(in srgb,var(--deep) 45%,var(--line))}
.ats-list .main b{color:var(--ink)}
.ats-list .main span{color:var(--deep-ink);font-weight:600}
.ats-list .main b.lg img{filter:none}
.ats-list .main:hover{background:var(--soft);border-color:var(--deep)}
.ats-list .main a{background:transparent}
.am-row{display:flex;gap:10px;margin-top:8px}
.am-row .am svg{width:18px;height:18px;display:block}
/* the hidden attribute always wins over layout rules */
[hidden]{display:none!important}
/* channels and apps: rows the same height on both sides */
.ch-group{display:grid;grid-template-rows:auto auto 1fr;align-content:start}
.ch-group>p{min-height:2.9em}
.ch-items li{min-height:92px}
.ch-items li:last-child{min-height:0}
@media (max-width:860px){.ch-group>p{min-height:0}.ch-items li{min-height:0}}

/* v24 about page */
.ab-hero .wrap{padding-block:56px 40px}
.ab-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
.ab-top>div{display:grid;gap:18px}
.ab-top h1{max-width:760px;margin:0}
.founder{margin:0;display:grid;justify-items:center;gap:12px;text-align:center}
.founder-pic{position:relative;width:200px;height:200px;border-radius:50%;overflow:hidden;background:var(--soft);display:grid;place-items:center;font-family:var(--display);font-size:64px;color:var(--deep-ink);box-shadow:0 0 0 8px var(--panel),0 0 0 9px var(--line)}
.founder-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.founder figcaption{display:grid;gap:2px}.founder b{font-family:var(--display);font-weight:500;font-size:17px}.founder span{color:var(--muted);font-size:14px}
.ab-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ab-stats div{display:grid;gap:4px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.ab-stats b{font-family:var(--display);font-weight:500;font-size:34px;letter-spacing:-.02em;line-height:1}
.ab-stats span{color:var(--muted);font-size:14px}
.ab-quote .wrap{padding-block:8px 24px}
.ab-q{margin:0;border-radius:28px;background:var(--band);color:var(--band-ink);padding:clamp(32px,6vw,56px);display:grid;gap:14px}
.ab-q p{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(24px,3.4vw,38px);line-height:1.2;letter-spacing:-.015em;max-width:22ch}
.ab-q footer{color:var(--band-muted);font-size:14px}
.vals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.val{display:grid;gap:10px;align-content:start;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.val h3{font-size:18px;margin:0}.val p{color:var(--muted);margin:0;font-size:14.5px}
.val-viz{aspect-ratio:16/9;border-radius:12px;background:var(--soft);overflow:hidden}
.val-viz svg{width:100%;height:100%;display:block}
.v-grid{stroke:color-mix(in srgb,var(--deep) 18%,transparent);stroke-width:1}
.v-line{fill:none;stroke:var(--deep);stroke-width:2.4;stroke-linecap:round}
.v-dot{fill:var(--deep)}.v-bars rect{fill:var(--deep);opacity:.85;rx:2}
.v-box{fill:var(--panel);stroke:color-mix(in srgb,var(--deep) 40%,transparent);stroke-width:1.4}
.v-check{fill:none;stroke:var(--deep);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.v-txt{font:600 10px var(--body);fill:var(--deep-ink)}
.ab-two{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:center}
.ab-two .sec-h{margin-bottom:0}
.ab-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ab-list li{display:grid;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.ab-list b{font-family:var(--display);font-weight:500;font-size:16px}.ab-list span{color:var(--muted);font-size:14px}
.team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.team li{display:grid;gap:2px;justify-items:center;text-align:center;padding:18px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.t-pic{position:relative;width:84px;height:84px;border-radius:50%;overflow:hidden;background:var(--soft);display:grid;place-items:center;font-family:var(--display);font-size:30px;color:var(--deep-ink);margin-bottom:8px}
.t-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.team b{font-family:var(--display);font-weight:500;font-size:15px}.team span:not(.t-pic){color:var(--muted);font-size:13px}
.ab-facts{margin:22px 0 0;color:var(--muted);font-size:14px}
@media (max-width:980px){.ab-stats,.vals{grid-template-columns:repeat(2,minmax(0,1fr))}.team{grid-template-columns:repeat(3,minmax(0,1fr))}.ab-two{grid-template-columns:1fr;gap:28px}}
@media (max-width:700px){.ab-top{grid-template-columns:1fr}.founder{justify-items:start;text-align:left}.founder-pic{width:140px;height:140px;font-size:48px}}
@media (max-width:520px){.ab-stats,.vals,.team{grid-template-columns:1fr}.ab-stats b{font-size:30px}}
/* v25 about: thread + live values */
.ab-main{position:relative}
.thread{position:absolute;top:0;left:0;pointer-events:none;z-index:0;overflow:visible}
body:has(.thread){position:relative}
body:has(.thread) footer{position:relative;z-index:1}
body:has(.thread) footer .logo{transition:opacity .2s}
.thread-p{fill:none;stroke:var(--deep);stroke-opacity:.12;stroke-width:1.5}
.thread-d{fill:none;stroke:var(--deep);stroke-opacity:.55;stroke-width:1.5;stroke-linecap:round}
.thread-dot{transition:opacity .25s}
.ab-main>section{position:relative;z-index:1}
.ab-stats b{font-variant-numeric:tabular-nums}
.vals{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.val{padding:0;overflow:hidden;gap:0}
.val h3{padding:18px 22px 0}.val p{padding:0 22px 22px;font-size:15px}
.val-viz{aspect-ratio:auto;height:210px;border-radius:0;position:relative;background:var(--soft);border-bottom:1px solid var(--line)}
.v-read{position:absolute;left:18px;top:16px;display:grid;gap:2px;z-index:2}
.v-big{font-family:var(--display);font-weight:500;font-size:24px;letter-spacing:-.01em;color:var(--ink)}
.v-big sup{font-size:.55em;vertical-align:top;position:relative;top:-.2em}
.v-big b{font-weight:500;font-variant-numeric:tabular-nums}
.v-small{font-size:12.5px;color:var(--muted);max-width:30ch}
.v-small a{color:var(--deep-ink)}
.v-comp svg{position:absolute;inset:0;width:100%;height:100%}
.v-flat{fill:none;stroke:var(--muted);stroke-opacity:.35;stroke-width:1.5;stroke-dasharray:3 5}
.v-line.draw{stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .2s}
.val.in .v-line.draw{stroke-dashoffset:0}
.v-tag{position:absolute;font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--muted)}
.v-tag-a{right:16px;bottom:30px}.v-tag-b{right:16px;top:16px;color:var(--deep-ink);border-color:var(--deep)}
.v-days{position:absolute;right:18px;bottom:18px;display:grid;grid-template-columns:repeat(12,14px);gap:4px}
.v-days i{width:14px;height:14px;border-radius:3px;background:color-mix(in srgb,var(--deep) 12%,var(--panel));transform:scale(.6);opacity:.4;transition:transform .35s,opacity .35s,background .35s;transition-delay:calc(var(--i)*22ms)}
.v-days.on i{transform:none;opacity:1;background:color-mix(in srgb,var(--deep) calc(25% + var(--i)*0.8%),var(--panel))}
.v-days.on i:nth-child(12n+5){background:var(--deep)}
.v-log{list-style:none;margin:0;padding:0;position:absolute;left:18px;right:18px;bottom:18px;display:grid;gap:6px;font-size:13px}
.v-log li{display:flex;gap:10px;align-items:baseline;padding:8px 12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.v-log li:nth-child(1){transition-delay:.1s}.v-log li:nth-child(2){transition-delay:.7s}.v-log li:nth-child(3){transition-delay:1.3s}.v-log li:nth-child(4){transition-delay:2s}
.val.in .v-log li{opacity:1;transform:none}
.v-log time{font-variant-numeric:tabular-nums;color:var(--deep-ink);font-weight:600;font-size:12px;flex:none;width:44px}
.v-log .v-exp{border-style:dashed;color:var(--muted)}
.v-honest .v-read,.v-prod .v-read{display:none}
.v-prod .v-read{display:grid;left:auto;right:18px;text-align:right;justify-items:end}
.v-ship{position:absolute;left:18px;top:14px;bottom:0;width:min(58%,300px);overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent)}
.v-ship ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;animation:shipUp 22s linear infinite}
.v-ship li{font-size:13px;padding:8px 12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-ship li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--deep);margin-right:8px;vertical-align:middle}
@keyframes shipUp{to{transform:translateY(-50%)}}
@media (prefers-reduced-motion:reduce){.v-ship ul{animation:none}.v-line.draw{stroke-dashoffset:0}.v-log li{opacity:1;transform:none}.v-days i{transform:none;opacity:1}}
@media (max-width:760px){.vals{grid-template-columns:1fr}.val-viz{height:190px}.v-ship{width:60%}}
.ab-stats b span{font:inherit;color:inherit}
/* v26 legal + booking pages */
.legal .wrap{padding-block:56px 80px;max-width:820px}
.legal h1{font-size:clamp(32px,4.4vw,48px);margin:14px 0 24px}
.legal-body{display:grid;gap:14px;font-size:16px;line-height:1.6}
.legal-body h2{font-size:22px;margin:22px 0 2px}
.legal-body h3{font-size:17px;margin:12px 0 0}
.legal-body p,.legal-body ul,.legal-body ol{margin:0}
.legal-body ul,.legal-body ol{padding-left:22px;display:grid;gap:6px}
.legal-body a{color:var(--deep-ink)}
.legal-body table{border-collapse:collapse;width:100%;font-size:14.5px}
.legal-body th,.legal-body td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.legal-body th{background:var(--soft)}
.booking .lede{margin-bottom:22px}

/* v27 skills pass */
/* Ported from the skills lab (landing-page, awwwards, better-ui, design-engineer, visual-critique, apple-motion).
   Overrides only: brand tokens, copy and sections unchanged. Every movement has a reduced-motion fallback. */
:root{
  --r:16px; --r-lg:24px; --r-sm:10px;                        /* radius grammar: tiles / product mock-ups and big cards / small controls */
  --ease-out:cubic-bezier(.23,1,.32,1);                      /* entrances */
  --ease-arrive:cubic-bezier(.32,.72,0,1);                   /* things that arrive somewhere: fast start, long settle */
  --focus:var(--deep-ink);
  --sh-sm:0 2px 3px -1px rgba(15,19,47,.10),0 1px 0 0 rgba(15,19,47,.02),0 0 0 1px rgba(15,19,47,.08);
  --sh-md:0 0 0 1px rgba(15,19,47,.06),0 1px 1px -.5px rgba(15,19,47,.06),0 3px 3px -1.5px rgba(15,19,47,.06),0 6px 6px -3px rgba(15,19,47,.06),0 12px 12px -6px rgba(15,19,47,.06),0 24px 24px -12px rgba(15,19,47,.06);
  --sh-lg:0 2.8px 2.2px rgba(15,19,47,.034),0 6.7px 5.3px rgba(15,19,47,.048),0 12.5px 10px rgba(15,19,47,.06),0 22.3px 17.9px rgba(15,19,47,.072),0 41.8px 33.4px rgba(15,19,47,.086),0 100px 80px rgba(15,19,47,.12);
}

/* ---------- 3. one type scale: 12/13/14/15/16/18/20/24/28/32/40/46/56, 12px floor ---------- */
h1{font-size:clamp(36px,5.4vw,56px);line-height:1.04;letter-spacing:-.025em}
h2{font-size:clamp(28px,3.6vw,46px);line-height:1.1}
h3{font-size:20px}
.lede{font-size:clamp(18px,1.5vw,20px);line-height:1.5}
p,li,dd,.lede{text-wrap:pretty}
.legal h1{font-size:clamp(32px,4.4vw,46px)}
.cl-copy h2{font-size:clamp(28px,3.6vw,46px)}
.band h2{font-size:clamp(28px,3.6vw,46px)}
.g-head h2{font-size:clamp(24px,2.4vw,28px)}
.post h2{font-size:clamp(24px,2.4vw,28px)}
.ex-h{font-size:clamp(20px,2.2vw,24px)}
.vcard.feature .vcap b{font-size:clamp(20px,2.2vw,24px)}
.story b{font-size:clamp(32px,4vw,46px)}
.proof b{font-size:clamp(32px,4vw,46px)}
.cx-stats b{font-size:clamp(28px,3.6vw,40px)}
.ab-q p{font-size:clamp(24px,3.4vw,40px)}
.calc dd{font-size:20px}
/* 17 -> 16 or 18 */
.fv-card b,.price .example,.sl-when,.own-list b,.cx-objs b,.su-recs b,.founder b,.pr-grid h3,.sr-name,.cases-more b,.post .tldr b,.story-quotes .quote blockquote{font-size:16px}
.step h3,.night .head b,.ai-row h3,.uc-open h3,.sl h3,.cx-blk h3,.ba b,.te-h b,.hitl-modes b,.host b,.why.trust-list h3{font-size:18px}
.post p,.post li{font-size:16px}
.post h3,.cx-modes h3,.ch-group h3,.sv-row b,.te-list b,.su-top b,.su-gains b,.su-h,.legal-body h3{font-size:20px}
.legal-body h3{font-size:18px}
.su-h{font-size:12px}
/* 19 / 22 -> 20 / 24 */
.deep b,.su-recs .n,.up-year span,.legal-body h2,.cx-tl-h h3,.cx-q-h,.te-list b{font-size:24px}
.te-list b{font-size:20px}
.nps-kpis b{font-size:28px}
.ab-stats b{font-size:32px}
@media (max-width:520px){.ab-stats b{font-size:28px}}
/* 15.5 -> 15 / 16 */
.band li,.ba li,.ba-table,.ch-list li,.post .tldr li,.post .note,.cx-quotes .quote blockquote{font-size:15px}
/* 14.5 -> 14 or 15 */
.more p,.uc-open p,.deep p,.seat-vs span,.own-list span:not(.ic),.scan-steps span,.pr-grid p,.cx-blk li,.cx-dates table,.ch-group>p,.cx-docs,.post-back,.legal-body table,.cl-msg,.hitl-law,.ai-logos li,.txt-link,.val p,.te-h span,.ab-list span,.cx-trig p{font-size:14px}
.te-h span,.val p{font-size:15px}
/* 13.5 -> 13 or 14 */
.points span:not(.ic),.fv-chips span,.cx-step small,.cx-ex,.su-counts,.su-hero small,.cx-tl-cards li span,.cx-tl-fields dd,.cx-tl2 span,.cx-tl-note,.gmsg q,.post figcaption,.uc-open .go,.cx-steps small,.vcapt{font-size:14px}
.pillar .l,.vtopic,.plan .ppt,.host small,.cl-steps span,.why.trust-list p,.fv-review .fv-btns span{font-size:13px}
@media (max-width:520px){.why.trust-list p{font-size:13px}}
/* 12.5 / 11.5 / 11 / 10 -> 12 (floor) */
.fv-k,.hub-legend,.su-b,.gt small,.sr-note,.v-small,.cx-tl-cards li small,.cx-map-tiles .d,.nps-bars li,.sv-head span,.su-calc,.sl-when,.vtag,.vlen,.ex-tag,.cx-step .k,.su-k,.su-table th,.nps-kpis small,.recipe small,.fv-lbl,.gmsg span,.rv-msg span,.qtag,.cx-tl-side,.cx-tl-now,.cx-tl-fields dt,.bk em,.v-tag,.nps-kpis em,.su-av,.rv-who i,.sr-score small,.sr-replay,.su-ex{font-size:12px}
.sr-replay,.su-b{font-size:13px}
.sl-when{font-size:13px}
.mm a{font-size:18px}
/* space scale: 96 between sections, 48 under a section head, 24 inside grids */
.sec{padding-block:96px}
.sec-h{gap:16px;margin-bottom:48px}
#use-cases .sec-h{margin-bottom:48px}
.band .wrap{padding-block:96px}
.cta .wrap{padding-block:16px 96px}
.night.after-how{padding-bottom:96px}
.voices{padding-top:64px}
.proof-band .pb-logos{padding-block:48px 0}
.proof-band .proof .wrap{padding-block:32px 48px}
.ai-row{margin-top:64px}
.cases-more{margin-top:32px}
.fine-note{margin-top:24px}
.cases,.plans,.ai-row,.pillars,.ats-list,.voices .vgrid,.cx-trigs,.story-grid,.qgrid,.deep-grid,.more,.uc-grid,.vals,.team,.ab-stats,.before-after,.story-quotes,.cx-blks,.uc-dialog-body,.ch-groups{gap:24px}
.ai-row,.pillars{gap:28px 24px}
@media (max-width:860px){.band .wrap{padding-block:64px}}
@media (max-width:640px){.sec{padding-block:64px}.sec-h{margin-bottom:32px}.night.after-how{padding-bottom:64px}.cta .wrap{padding-bottom:64px}.voices{padding-top:48px}}
@media (max-width:560px){.ai-row{gap:12px}}
/* radius grammar */
.frame,.cl-chat,.rv-mock,.cta .card,.trust .card,.scan-card,.ab-q,.uc-dialog,.vposter,.cx-mock,.nps-mock,.su{border-radius:var(--r-lg)}
.fv-card,.case,.plan,.cases-more,.task-explain,.host,.dd-menu,.cl-steps li,.rv-body,.more div,.cx-objs li,.cx-step,.seat-vs>div,.hitl-pop,.cx-tl-cards li,.cx-tl2 li,.ab-list li,.post-next a,.post .note,.post figure img,.up-pic,.su-tabs,.hitl-modes li,.te-list li,.calc{border-radius:var(--r)}
.ic,.dd-menu a,.rv-av,.hitl-modes .ic,.fv-review .ic,.hitl-law .ic,.mm-btn,.cl-card,.fv-chips span,.fv-tasks li,.fv-rec div,.calc dl div,.cl-dot,.ch-items .ic,.cx-map-tiles .ic,.scan-vs,.su-kpis>div,.su-gains li,.nps-kpis>div,.nps-cmt,.cx-ex,.price .example{border-radius:var(--r-sm)}
.rv-msg,.gmsg q{border-radius:var(--r-sm) var(--r-sm) var(--r-sm) 4px}
.cl-msg{border-radius:var(--r)}.cl-msg.you{border-bottom-right-radius:4px}
.frame video,.frame img,.hitl-shot .frame img{border-radius:14px}
.hitl-law{border-radius:var(--r)}

/* ---------- 4. contrast and affordance ---------- */
html{scroll-padding-block-start:calc(80px + env(safe-area-inset-top,0px))}
:focus-visible,.ex-tabs button:focus-visible,.dd>button:focus-visible,.to-top:focus-visible,.uc-open:focus-visible{outline-color:var(--focus)}
.btn.primary:focus-visible{outline-color:var(--ink)}
.btn.ghost{border-color:color-mix(in srgb,var(--ink) 45%,transparent)}
.btn.ghost:hover{border-color:var(--deep-ink);color:var(--deep-ink)}
.band .btn.ghost,.btn.ghost.on-dark{border-color:rgba(255,255,255,.7);color:#FFFFFF}
.band .btn.ghost:hover,.btn.ghost.on-dark:hover{border-color:var(--teal);color:#FFFFFF}
.nav .btn.hc{border-color:var(--deep);color:var(--ink);padding-inline:14px 16px}
.btn.primary{box-shadow:0 1px 0 rgba(15,19,47,.08),0 6px 16px -8px rgba(15,19,47,.35)}
.btn.primary:hover{box-shadow:var(--sh-md)}
.hl{color:color-mix(in srgb,var(--deep) 90%,var(--ink))}
.band h2 .hl,.cta h2 .hl{color:var(--teal)}
.ex-tabs button{min-height:44px}
.plan-cta{min-height:44px}
.fv-review .fv-btns span.ok,.rv-b.ok{box-shadow:none}
.fv-review .fv-btns span,.rv-b{cursor:default}
.case .pic img{outline:1px solid rgba(0,0,0,.1);outline-offset:-1px}
.fine-note,.te-ex{max-width:72ch}
.case .go::after{content:" \2192";font-weight:600}
.case:hover .go{text-decoration:underline;text-underline-offset:3px}
footer nav a:hover{text-decoration:underline;text-underline-offset:3px}
/* buttons: colours ease, press at .96 over 150ms, hover lift only for real pointers */
.btn{transition:background-color 150ms ease,border-color 150ms ease,color 150ms ease,box-shadow 150ms ease,transform 160ms var(--ease-out),scale 150ms ease-out;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:no-preference){
  .btn:not(:disabled):not([aria-disabled="true"]):active{scale:.96;transition-duration:150ms}
}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-1px)}.btn:active{transform:none}}
/* touch screens: no hover styling, and the Solutions menu only opens on tap */
@media (hover:none){
  .dd:hover:not(.open):not(:focus-within) .dd-menu{display:none}
  .case:hover,.pillar:hover,.hero-ai:hover,.host:hover,.btn.ghost:hover,.up:hover,.ats-list .main:hover,.uc-card:hover .uc-open,.deep.link:hover,.post-next a:hover,.cx-favs .tag:hover,.jump a:hover,.filters button:hover,.filters .own:hover,a.pillar:hover{border-color:var(--line)}
  .btn.ghost:hover{border-color:color-mix(in srgb,var(--ink) 45%,transparent);color:var(--ink)}
  .ats-list .main:hover,.deep.link:hover{background:var(--panel)}
  .btn.primary:hover{background:var(--teal);box-shadow:0 1px 0 rgba(15,19,47,.08),0 6px 16px -8px rgba(15,19,47,.35)}
  .nav .btn.hc:hover{background:var(--panel);border-color:var(--deep)}
  .vcard:hover .vplay{transform:none}
  .vcard:hover .vposter{box-shadow:none}
  .dd-menu a:hover,.ex-tabs button:hover,.su-tabs button:hover{background:transparent}
  .ex-tabs button[aria-selected="true"]:hover{background:var(--ink)}
  .nav nav a:hover{color:var(--muted)}
  .case:hover .go{text-decoration:none}
  .case:hover .pic::after,.uc-open:hover .pic::after{opacity:1}
}

/* ---------- 1. floating pill nav (landing-page lab), kept sticky ---------- */
.nav{background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding-top:12px;pointer-events:none}
.nav>*{pointer-events:auto}
.nav .wrap{width:max-content;max-width:min(1160px,calc(100% - 32px));gap:16px;padding:8px 8px 8px 22px;border-radius:999px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 95%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 8px 32px rgba(15,19,47,.08)}
.nav nav{gap:18px}
.nav nav a{position:relative;padding:6px 0;transition:color 120ms ease}
.nav nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:999px;background:var(--deep)}
.nav .btn,.nav .btn.hc{padding-block:10px}
.nav .btn.hc+.btn{margin-left:0}
/* desktop: the pill spans the content width (edges line up with .wrap content), menu centred between logo and buttons */
@media (min-width:1101px){
  .nav .wrap{width:min(1128px,calc(100% - 32px));max-width:none}
  .nav nav{margin-inline:auto}
}
.dd-menu{top:calc(100% + 10px);border-radius:var(--r)}
.dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px} /* keeps the hover open across the gap */
@media (max-width:1100px){
  .nav .wrap{width:calc(100% - 32px);max-width:calc(100% - 32px);gap:10px;padding:8px 8px 8px 16px}
  .nav .btn.hc+.btn,.nav .btn.primary{margin-left:auto}
  /* hamburger: three lines rotate and slide into an X */
  .mm-btn{display:grid;position:relative;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--panel);margin-left:0}
  .mm-btn i{position:absolute;left:10px;width:18px;height:2px;border-radius:2px;background:currentColor;transform-origin:center;transition:transform 220ms var(--ease-out),opacity 160ms ease}
  .mm-btn i:nth-child(1){top:13px}.mm-btn i:nth-child(2){top:19px}.mm-btn i:nth-child(3){top:25px}
  .nav.open .mm-btn i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav.open .mm-btn i:nth-child(2){transform:scaleX(0);opacity:0}
  .nav.open .mm-btn i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  /* full-screen blurred overlay behind the pill; links rise in one after another */
  .mm,.nav.open .mm{display:grid;position:fixed;inset:0;top:0;z-index:-1;align-content:center;justify-items:center;gap:4px;padding:96px 24px 48px;
    background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:0;box-shadow:none;
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity 220ms var(--ease-out),visibility 0s linear 220ms;overflow-y:auto}
  .nav.open .mm{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 220ms var(--ease-out),visibility 0s}
  .mm a{display:block;min-height:0;border:0;padding:8px 12px;font:500 28px/1.2 var(--display);color:var(--ink);text-decoration:none;opacity:0;transform:translateY(24px);transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out)}
  .mm a[aria-current="page"]{color:var(--deep-ink)}
  .nav .mm .btn{font:600 16px/1 var(--body);margin:16px 0 0;width:auto;padding:14px 24px;transform:translateY(24px);border:1.5px solid color-mix(in srgb,var(--ink) 45%,transparent)}
  .nav.open .mm a{opacity:1;transform:none}
  .mm a:nth-child(1){transition-delay:60ms}.mm a:nth-child(2){transition-delay:100ms}.mm a:nth-child(3){transition-delay:140ms}.mm a:nth-child(4){transition-delay:180ms}.mm a:nth-child(5){transition-delay:220ms}.mm a:nth-child(6){transition-delay:260ms}.mm a:nth-child(7){transition-delay:300ms}.mm a:nth-child(8){transition-delay:340ms}.mm a:nth-child(9){transition-delay:380ms}.mm a:nth-child(10){transition-delay:420ms}
  .nav:not(.open) .mm a{transition-delay:0ms;transition-duration:160ms}
  html:has(.nav.open){overflow:hidden}
}
@media (max-width:360px){.mm a{font-size:24px}}
.jump{top:calc(env(safe-area-inset-top,0px) + 66px)}

/* ---------- 2. homepage hero: fills the first screen, bigger type, wider flow, copy top-aligned ---------- */
/* only the homepage hero (the one with the flow graphic) fills the screen; other heroes keep their height */
.hero:has(.flowviz) .wrap{padding-block:clamp(48px,7vw,80px) clamp(40px,6vw,72px);gap:clamp(40px,5vw,72px)}
@media (min-width:901px){
  .hero:has(.flowviz) .wrap{min-height:min(calc(100svh - 64px),860px);grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}
  .hero:has(.flowviz) .copy{align-self:start;padding-top:24px}
}
.hero:has(.flowviz) h1{font-size:clamp(40px,6.2vw,76px);line-height:1;letter-spacing:-.03em}
.hero:has(.flowviz) .lede{font-size:20px;max-width:46ch}
.hero:has(.flowviz) .copy{gap:20px}
.hero .copy .btns{margin-top:8px;gap:12px 20px;align-items:center}
.hero .btns .btn.primary{padding:15px 24px;font-size:16px}
.hero-ai{margin-top:4px}
.hero-trust{margin-top:4px;font-weight:500;gap:6px 16px}
.hero-trust li::before{width:5px;height:5px;background:color-mix(in srgb,var(--deep) 70%,transparent)}
.flowviz{max-width:540px}
.fv-card{box-shadow:var(--sh-md)}
.fv-core{box-shadow:var(--sh-lg)}
@media (max-width:640px){.hero:has(.flowviz) h1{font-size:clamp(36px,10.5vw,46px)}.hero:has(.flowviz) .lede{font-size:18px}.hero:has(.flowviz) .wrap{padding-block:40px 24px}}
/* secondary action as a text link with an arrow next to the primary button */
.link-cta{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:600;color:var(--deep-ink);text-decoration:none;padding:8px 2px;border-bottom:1.5px solid transparent;transition:border-color 150ms ease,color 150ms ease}
.link-cta::after{content:"\2192";transition:transform 160ms var(--ease-out)}
.link-cta:hover{border-bottom-color:currentColor}
@media (hover:hover) and (pointer:fine){.link-cta:hover::after{transform:translateX(3px)}}
.band .link-cta{color:#FFFFFF}
.link-cta+.txt-link{display:none} /* the same self-check link in its old "or take the..." form sits right after it on some pages */

/* load intro (index.html adds html.intro before first paint; site.js splits the heading into words).
   Nav, eyebrow, heading, lede, buttons and trust come first; the flow cards follow in sequence. */
@keyframes introUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes introNav{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes introWord{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:none}}
@keyframes introCard{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes introArrow{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:none}}
.hero h1 .w{display:inline-block;white-space:pre-wrap}
html.intro .nav .wrap{animation:introNav .5s var(--ease-out) both}
html.intro .hero .eyebrow{animation:introUp .5s var(--ease-out) both .08s}
html.intro .hero h1:not(.split){animation:introUp .6s var(--ease-out) both .16s}
html.intro .hero h1 .w{animation:introWord .6s var(--ease-out) both;animation-delay:calc(.16s + var(--i,0) * 45ms)}
html.intro .hero .lede{animation:introUp .55s var(--ease-out) both .46s}
html.intro .hero .btns{animation:introUp .55s var(--ease-out) both .54s}
html.intro .hero .hero-ai{animation:introUp .55s var(--ease-out) both .62s}
html.intro .hero .hero-trust{animation:introUp .55s var(--ease-out) both .7s}
html.intro .fv-in{animation:introCard .6s var(--ease-out) both .3s}
html.intro .fv-core{animation:introCard .6s var(--ease-out) both .44s}
html.intro .fv-review{animation:introCard .6s var(--ease-out) both .58s}
html.intro .fv-out{animation:introCard .6s var(--ease-out) both .72s}
html.intro .fv-arrow{transform-origin:top;animation:introArrow .4s var(--ease-out) both .5s}
html.intro .fv-arrow:nth-of-type(4){animation-delay:.64s}
html.intro .fv-arrow:nth-of-type(6){animation-delay:.78s}
@media (prefers-reduced-motion:reduce){html.intro .nav .wrap,html.intro .hero *,html.intro .fv-card,html.intro .fv-arrow{animation:none}}

/* ---------- 6. motion (apple-motion lab) ---------- */
/* arrow dash on the compositor: site.js inserts .fv-dash with a strip that translates; the painted background loop is off */
.fv-arrow::before{animation:none;opacity:0}
.fv-dash{position:absolute;left:50%;top:4px;bottom:14px;width:2px;margin-left:-1px;overflow:hidden;opacity:.5;pointer-events:none}
.fv-dash i{position:absolute;left:0;top:-9px;bottom:0;width:2px;display:block;background:repeating-linear-gradient(var(--deep) 0 4px,transparent 4px 9px);animation:fvdash2 .9s linear infinite}
@keyframes fvdash2{to{transform:translateY(9px)}}
.flowviz.paused .fv-dash i{animation-play-state:paused}
/* arrow label: hides fast while the packet travels, returns gently */
.fv-arrow:has(.fv-pkt.go) .fv-lbl{animation:none}
.fv-lbl{transition:opacity 180ms var(--ease-out)}
.fv-arrow.carrying .fv-lbl{opacity:0;transition-duration:80ms}
/* packet: arrives at the next card, visible sooner */
.fv-pkt.go{animation:fvcarry2 .8s var(--ease-arrive) forwards}
@keyframes fvcarry2{0%{transform:translate(-50%,-6px);opacity:0}12%{opacity:1}82%{opacity:1}100%{transform:translate(-50%,30px);opacity:0}}
.fv-chips span,.fv-tasks li{transition:background-color .3s,color .3s}
.fv-rec div{transition:background-color .3s}
/* dropdown: scales from its trigger, 160ms in, 100ms out (@starting-style; older browsers just toggle) */
.dd-menu{transform-origin:24px top;opacity:1;transform:none;
  transition:opacity 100ms var(--ease-out),transform 100ms var(--ease-out);
  transition:opacity 100ms var(--ease-out),transform 100ms var(--ease-out),display 100ms allow-discrete}
.dd:hover .dd-menu,.dd:focus-within .dd-menu,.dd.open .dd-menu{transition-duration:160ms}
@starting-style{.dd:hover .dd-menu,.dd:focus-within .dd-menu,.dd.open .dd-menu{opacity:0;transform:translateY(-4px) scale(.98)}}
.dd-menu a{transition:background-color 120ms ease}
/* example tabs: the incoming panel settles in (220ms), not on first paint and not for keyboard switches */
.ex{opacity:1;transform:none;transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}
@starting-style{html.ready .ex:not([hidden]){opacity:0;transform:translateY(6px)}}
html[data-kb] .ex{transition:none}
.ex-tabs button{transition:background-color 150ms ease,color 150ms ease}
.ex-tabs button:hover{color:var(--ink);background:var(--soft)}
.ex-tabs button[aria-selected="true"]:hover{background:var(--ink);color:#FFFFFF}
/* hover motion only for devices that really hover, and shorter */
.to-top:hover,.to-top:hover .tt-back,.to-top:hover .tt-arrow{transform:none}
.to-top.show:hover{transform:none}
.vcard:hover .vplay{transform:none}
footer a{transition:color 120ms ease}
@media (hover:hover) and (pointer:fine){
  .to-top .tt-back,.to-top .tt-front,.to-top .tt-arrow{transition-duration:160ms;transition-timing-function:var(--ease-out)}
  .to-top.show:hover{transform:translateY(-3px);transition-duration:250ms,160ms}
  .to-top:hover .tt-back{transform:translate(-2px,-3px)}
  .to-top:hover .tt-arrow{transform:translateY(-4px)}
  .vplay{transition:transform 160ms var(--ease-out)}
  .vcard:hover .vplay{transform:scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .fv-dash i{animation:none}
  .fv-lbl{transition:none}
  .dd-menu,.mm,.ex,.mm a{transition-property:opacity,display;transition-duration:120ms;transform:none}
  .mm-btn i{transition:none}
  .btn,.btn:active,.btn:hover,.link-cta:hover::after{transform:none;scale:none}
  .to-top.show:hover,.to-top:hover .tt-back,.to-top:hover .tt-arrow,.vcard:hover .vplay{transform:none}
}

/* ---------- 7. FAQ ---------- */
.faq-list{display:grid;gap:12px;max-width:760px}
.faq-list details{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:0 24px;transition:border-color 150ms ease}
.faq-list summary{position:relative;list-style:none;cursor:pointer;padding:18px 40px 18px 0;font-family:var(--display);font-weight:500;font-size:18px;line-height:1.35;min-height:44px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:0;top:50%;width:24px;height:24px;margin-top:-12px;display:grid;place-items:center;font-family:var(--display);font-weight:500;font-size:24px;line-height:1;color:var(--deep-ink);transition:transform 200ms var(--ease-out)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details[open]{border-color:var(--deep)}
.faq-list summary:focus-visible{outline:2px solid var(--focus);outline-offset:-6px;border-radius:12px}
.faq-list p{padding:0 0 18px;color:var(--muted);font-size:16px;line-height:1.55}
.faq-list p a{color:var(--deep-ink)}
@media (prefers-reduced-motion:reduce){.faq-list summary::after{transition:none}}
/* v28: written scan stories on the homepage; hero flow fits a 15-inch laptop viewport */
.home-quotes{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.home-quotes .quote blockquote{font-size:16px}
.voices-cta{margin:28px 0 0;text-align:center}
@media (max-width:900px){.home-quotes{grid-template-columns:1fr}}
@media (min-width:901px) and (max-height:1000px){.flowviz{zoom:.86}}
@media (min-width:901px) and (max-height:900px){.flowviz{zoom:.74}.hero:has(.flowviz) .wrap{padding-block-start:32px}}
@media (min-width:901px) and (max-height:800px){.flowviz{zoom:.66}}
/* v29 about team with intros */
.team-intro{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.team-intro li{justify-items:start;text-align:left;padding:22px;gap:4px}
.team-intro .t-pic{width:72px;height:72px;font-size:26px;margin-bottom:10px}
.team-intro b{font-size:17px}
.team-intro .t-role{color:var(--deep-ink);font-size:13px;font-weight:600}
.team-intro p{margin:6px 0 0;color:var(--muted);font-size:14px;line-height:1.5}
/* v29 stories page */
.st-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.st-card{display:grid;gap:6px;align-content:start;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.st-card b{font-family:var(--display);font-weight:500;font-size:40px;letter-spacing:-.02em;line-height:1;margin-top:8px}
.st-what{font-size:15px;color:var(--ink)}
.st-card p{margin:8px 0 0;color:var(--muted);font-size:14px}
.voices-cta a+a{margin-left:24px}
@media (max-width:900px){.st-grid{grid-template-columns:1fr}}
/* v30 team grid */
.team-intro{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.team-intro li{grid-template-columns:88px 1fr;grid-template-rows:auto auto 1fr;column-gap:18px;row-gap:2px;align-items:start;padding:22px 24px}
.team-intro .t-pic{grid-row:1/4;width:88px;height:88px;font-size:30px;margin:0}
.team-intro b{font-size:18px;line-height:1.2}
.team-intro p{grid-column:2}
@media (max-width:1000px){.team-intro{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.team-intro{grid-template-columns:1fr}}
/* v31 launch-slim: two quotes with a logo, minimal nav */
.home-quotes.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:980px;margin-inline:auto}
.quote .qlogo{display:block;height:26px;width:auto;margin-bottom:12px}
.quote.lead{border-color:var(--deep)}
@media (max-width:760px){.home-quotes.two{grid-template-columns:1fr}}

/* v32 agent pages */
.uc-cta{display:flex;gap:10px 20px;flex-wrap:wrap;align-items:center;margin-top:4px;padding-top:18px;border-top:1px solid var(--line)}
.uc-card{position:relative}
.uc-card .uc-more,.case .case-more{position:absolute;left:18px;bottom:16px;z-index:2;font-size:14px;padding:4px 2px}
.case .case-more{left:20px;bottom:18px}
.uc-open .txt{padding-bottom:52px}
.case .txt{padding-bottom:56px}
.case .case-link{display:grid;grid-template-rows:auto 1fr;grid-row:1/-1;height:100%;text-decoration:none;color:inherit}
.ag-hero .wrap{padding-block:56px 32px}
.ag{padding-block:24px 72px}
.ag .wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:48px;align-items:start}
.ag .media{position:sticky;top:96px}
.ag .media .frame video,.ag .media .frame img.still{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px;background:#F7F7F2}
.ag .info{display:grid;gap:18px}
.ag .info .lede{max-width:none}
.ag-how ul{margin:0;padding-left:20px;display:grid;gap:10px;max-width:760px}
.ag-related .rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ag-related .rel a{display:grid;grid-template-rows:auto 1fr;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;transition:border-color .15s}
.ag-related .rel a:hover{border-color:var(--deep)}
.ag-related .rel .pic{aspect-ratio:16/9;overflow:hidden;background:#F9F9F3;border-bottom:1px solid var(--line)}
.ag-related .rel .pic img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.ag-related .rel .txt{padding:16px 18px 18px;display:grid;gap:6px;align-content:start}
.ag-related .rel h3{font-size:17px}
.ag-related .rel p{color:var(--muted);font-size:14px}
.ag-related .rel .go{font-size:13.5px;font-weight:600;color:var(--deep-ink)}
@media (max-width:900px){.ag .wrap{grid-template-columns:1fr;gap:28px}.ag .media{position:static;max-width:520px}.ag-related .rel{grid-template-columns:1fr}}
/* v33 homepage pull quote */
.voices .wrap{padding-block:32px 48px}
.pull{margin:0;display:grid;grid-template-columns:260px minmax(0,1fr);border:1px solid var(--line);border-radius:24px;background:var(--panel);overflow:hidden;box-shadow:var(--sh-md,0 8px 24px rgba(15,19,47,.06))}
.pull-side{display:grid;align-content:center;gap:6px;padding:36px 32px;background:var(--soft);border-right:1px solid var(--line)}
.pull-logo{height:30px;width:auto;margin-bottom:14px}
.pull-num{font-family:var(--display);font-weight:500;font-size:40px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.pull-what{font-size:14px;color:var(--muted)}
.pull-body{position:relative;padding:40px 44px 36px 52px;display:grid;gap:18px}
.pull-mark{position:absolute;left:22px;top:18px;font-family:var(--display);font-size:72px;line-height:1;color:var(--teal);opacity:.7}
.pull blockquote{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(20px,2.2vw,26px);line-height:1.35;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.pull figcaption{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.pull figcaption b{color:var(--ink);font-weight:600}
.pull figcaption .link-cta{margin-left:auto}
@media (max-width:860px){.pull{grid-template-columns:1fr}.pull-side{border-right:0;border-bottom:1px solid var(--line);padding:28px 24px}.pull-body{padding:32px 24px 28px 44px}.pull-mark{left:14px;top:10px;font-size:56px}}

/* v34 agent pages, rich */
/* How it runs: the Starts / Does / Writes / You get rows as a numbered vertical timeline, inside the info column */
.agx-run{display:grid;gap:12px}
.agx-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.agx-steps li{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:14px;padding:0 0 18px}
.agx-steps li::before{content:"";position:absolute;left:15px;top:32px;bottom:0;width:2px;background:var(--line)}
.agx-steps li:last-child{padding-bottom:0}
.agx-steps li:last-child::before{display:none}
.agx-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--teal);color:var(--ink);font:600 13px var(--display)}
.agx-steps li>div{display:grid;gap:2px;padding-top:4px}
.agx-steps b{font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:0}
.agx-steps li>div>span{font-size:15px;color:var(--muted)}
/* Set-up: three tiles */
.agx-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.agx-tile{display:grid;gap:12px;align-content:start;padding:22px 22px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.agx-tile h3{font-size:18px}
.agx-tile p{font-size:15px;color:var(--muted)}
.agx-need{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.agx-need li{position:relative;padding-left:22px}
.agx-need li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;background:var(--teal)}
.agx-big{font-family:var(--display);font-weight:500;font-size:40px;line-height:1;letter-spacing:-.02em;color:var(--ink)!important}
.agx-small{font-size:13px;color:var(--muted)}
.agx-tile .hitl-modes{gap:0}
.agx-tile .hitl-modes li{padding:10px 0;grid-template-columns:36px minmax(0,1fr);column-gap:12px}
.agx-tile .hitl-modes .ic{width:36px;height:36px}
.agx-tile .hitl-modes b{font-size:15px}
.agx-tile .hitl-modes span{font-size:13.5px}
/* Credits per run */
.agx-cr-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:48px;align-items:start}
.agx-cr-grid .sec-h{margin-bottom:0}
.agx-practice{font-size:15px;color:var(--ink);padding:12px 16px;border-radius:var(--r-sm);background:var(--soft)}
.agx-practice b{font-weight:600;color:var(--deep-ink);margin-right:4px}
.agx-cr{display:grid;gap:14px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow)}
.agx-cr-k{font-size:12px;font-weight:600;color:var(--muted)}
.agx-cr-rows{list-style:none;margin:0;padding:0;display:grid}
.agx-cr-rows li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px}
.agx-cr-rows li:first-child{border-top:0;padding-top:0}
.agx-cr-rows b{font-family:var(--display);font-weight:500;font-size:16px;flex:none}
.agx-cr-total{display:flex;align-items:baseline;gap:10px;padding-top:14px;border-top:2px solid var(--ink)}
.agx-cr-total b{font-family:var(--display);font-weight:500;font-size:44px;line-height:1;letter-spacing:-.02em}
.agx-cr-total span{font-size:14px;color:var(--muted)}
/* Example: two panes, a WhatsApp or email thread and the ATS record */
.agx-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.agx-two.one{grid-template-columns:minmax(0,560px)}
.agx-pane{display:grid;gap:14px;padding:18px 20px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow)}
.agx-pane-h{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.agx-pane-h b{font-family:var(--display);font-weight:500;font-size:16px}
.agx-pane-h span{font-size:13px;color:var(--muted)}
.agx-bubbles{display:grid;gap:8px;padding:14px;border-radius:var(--r);background:var(--bg);border:1px solid var(--line)}
.agx-bubbles q{quotes:none;display:block;width:fit-content;max-width:88%;font-size:14px;line-height:1.45;padding:8px 12px;border-radius:var(--r-sm) var(--r-sm) var(--r-sm) 4px;background:#D9FDD3;color:var(--ink)}
.agx-bubbles q.c{justify-self:end;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm) var(--r-sm) 4px var(--r-sm)}
.agx-mail{display:grid;gap:4px;padding:10px 12px;border-radius:var(--r-sm);background:var(--panel);border:1px solid var(--line);font-size:14px;line-height:1.45}
.agx-mail span{font-size:11px;font-weight:600;color:var(--muted)}
.agx-mail b{font-weight:600}
.agx-mail p{color:var(--ink)}
.agx-mail.agx-reply{background:#D9FDD3;border-color:transparent;max-width:80%;justify-self:end}
.agx-log{list-style:none;margin:0;padding:14px;display:grid;gap:10px;border-radius:var(--r);background:var(--bg);border:1px solid var(--line);counter-reset:agx}
.agx-log li{display:flex;gap:10px;align-items:center;font-size:14px}
.agx-log li::before{counter-increment:agx;content:counter(agx);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--teal);font:600 11px var(--display);flex:none}
.agx-rec{display:grid;gap:12px;padding:14px;border-radius:var(--r);background:var(--bg);border:1px solid var(--line)}
.agx-rec-t{font-family:var(--display);font-weight:500;font-size:15px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.agx-rec dl{margin:0;display:grid;gap:8px}
.agx-rec dl div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;font-size:14px}
.agx-rec dt{color:var(--muted)}
.agx-rec dd{margin:0;font-weight:500}
.agx-alert{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:8px 12px;border-radius:var(--r-sm);background:var(--soft);color:var(--ink)}
.agx-alert i{width:8px;height:8px;border-radius:50%;background:var(--deep);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 35%,transparent);flex:none}
@media (max-width:900px){.agx-tiles{grid-template-columns:1fr}.agx-cr-grid{grid-template-columns:1fr;gap:28px}.agx-two{grid-template-columns:1fr}.agx-two.one{grid-template-columns:1fr}}
@media (max-width:460px){.agx-rec dl div{grid-template-columns:1fr;gap:2px}.agx-bubbles q,.agx-mail.agx-reply{max-width:100%}.agx-pane{padding:14px}}
/* v35 pricing page tables */
.pr-tables{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.pr-table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:15px}
.pr-table caption{caption-side:top;text-align:left;font-family:var(--display);font-weight:500;font-size:18px;padding:0 0 12px}
.pr-table th,.pr-table td{padding:12px 16px;text-align:left;border-top:1px solid var(--line)}
.pr-table th{background:var(--soft);color:var(--deep-ink);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border-top:0}
.pr-table td:last-child,.pr-table th:last-child{text-align:right;font-variant-numeric:tabular-nums}
/* volume table: what the bundle would cost at the 5,000-task rate, crossed out */
.pr-table .pr-std{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.pr-table th:nth-child(3):not(:last-child){text-align:right}
.pr-table .pr-std s{text-decoration-thickness:1.5px}
.pr-example{display:grid;gap:10px;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.pr-example h3{margin:0;font-size:20px}.pr-example .muted{margin:0;color:var(--muted);font-size:14px}
.pr-example .te-list{margin:8px 0 0}
.pr-total{margin:8px 0 0;padding:14px 16px;border-radius:12px;background:var(--soft);font-size:15px}
.pr-total b{color:var(--deep-ink)}
@media (max-width:900px){.pr-tables{grid-template-columns:1fr}}
.pr-example .te-list{grid-template-columns:1fr}
.st-who{font-size:13px;color:var(--deep-ink);font-weight:600;margin-top:6px}
/* v36 updates thumbnails: zoom into the top-left of the screenshot inside a framed gradient card, so the detail is readable instead of a shrunken full screen */
.up-pic{aspect-ratio:16/10;padding:14px 0 0 14px;background:linear-gradient(135deg,#EEF6F6 0%,#F9F9F3 45%,#E6F1F2 100%);box-shadow:inset 0 0 0 1px rgba(15,19,47,.04)}
.up-pic img{width:100%;height:100%;object-fit:cover;object-position:left top;transform:scale(1.35);transform-origin:left top;border-radius:10px 0 0 0;box-shadow:0 6px 24px rgba(15,19,47,.12);background:#fff}
.up-pic:hover img{transform:scale(1.38)}
.up-pic img{transition:transform .3s ease}
.up-pic{padding:14px 14px 0}
.up-pic img{object-position:center top;transform:scale(1.12);transform-origin:center top;border-radius:10px 10px 0 0}
.up-pic:hover img{transform:scale(1.15)}
/* v37: the agent stills and clips are square; show them whole instead of cropping the top and bottom */
.case .pic,.uc-open .pic,.ag-related .rel .pic{background:#F7F7F2}
.case .pic img,.uc-open .pic img,.ag-related .rel .pic img,.case .pic video,.uc-open .pic video{object-fit:contain;object-position:center}
/* v38: example cards show the illustration plainly: no play badge, no dark wash, no desaturation */
.case .pic .play,.uc-open .pic .play,.ag-related .rel .pic .play{display:none}
.case .pic::after,.uc-open .pic::after{display:none}
.case .pic img,.uc-open .pic img{filter:none}
.ab-top{grid-template-columns:1fr}

/* updates list: designed thumbnails (2400×1560 originals) are shown whole, not zoomed like the screenshots */
.up-pic.thumb{padding:0;background:#F3F5F1;aspect-ratio:20/13}
.up-pic.thumb img{object-fit:cover;object-position:center;transform:none;border-radius:0;box-shadow:none;background:none}
.up-pic.thumb:hover img{transform:scale(1.03)}

/* footer: every agent page, grouped by use case, above the logo row */
footer .foot-uc{flex:1 0 100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-bottom:20px;margin-bottom:4px;border-bottom:1px solid var(--line)}
footer .foot-uc ul{list-style:none;margin:8px 0 0;padding:0;display:grid}
footer .foot-uc li a{display:inline-flex;align-items:center;min-height:32px}
footer .foot-uc-h{font-weight:600;color:var(--ink)}
@media (max-width:760px){footer .foot-uc{grid-template-columns:1fr 1fr}}
@media (max-width:480px){footer .foot-uc{grid-template-columns:1fr;gap:16px}footer .foot-uc li a{min-height:40px}}

/* scrolled: a full-width strip behind the floating pill, so page content no longer shows beside it.
   site.js sets .scrolled once the page moves. The strip ends where the header ends; sticky bars below start there. */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);opacity:0;transition:opacity .25s ease}
.nav.scrolled::before{opacity:1}
.nav{padding-bottom:10px}
.nav.scrolled .wrap{box-shadow:none}
.jump{top:calc(env(safe-area-inset-top,0px) + var(--nav-h,78px) - 1px)}
/* owners: NPS dashboard walkthrough under the mock */
.nps-video{margin:48px auto 0;max-width:1040px}
.nps-video .frame{overflow:hidden;background:var(--bg);border:1px solid var(--line);box-shadow:var(--shadow)}
.nps-video video{display:block;width:100%;height:auto;aspect-ratio:16/9}
.nps-video .vcapt{text-align:center}
@media (max-width:900px){.nps-video{margin-top:32px}}

/* ===== v1 launch (29 Oct 2026): Zasha's v1 feedback ===== */
/* Integrations: trigger-only connections get a quieter status label */
.deep .st.lim{color:var(--muted)}

/* Homepage: proof strip with two approved Randstad figures, and two company stats */
.pull-side .pull-num2{margin-top:10px}
.proof.two .wrap{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px;margin-inline:auto}
@media (max-width:640px){.proof.two .wrap{grid-template-columns:1fr}}
.proof-band .pb-logos .pb-more{margin:4px 0 0;text-transform:none;letter-spacing:0}
/* fix 3: hero flow shows one step at a time; the card in focus is lifted, the others dimmed */
/* the card stays opaque (no grey wash, nothing shows through); only its contents dim */
.flowviz .fv-card{transition:transform .4s ease,box-shadow .4s ease}
.flowviz .fv-card>*{transition:opacity .4s ease}
.flowviz[data-stage] .fv-card{transform:scale(.97)}
.flowviz[data-stage] .fv-card>*{opacity:.38}
.flowviz[data-stage="in"] .fv-in,.flowviz[data-stage="core"] .fv-core,.flowviz[data-stage="out"] .fv-out{transform:scale(1.02)}
.flowviz[data-stage="in"] .fv-in>*,.flowviz[data-stage="core"] .fv-core>*,.flowviz[data-stage="out"] .fv-out>*{opacity:1}
/* a packet never overlaps its arrow label: hide the label while it travels (beats the older fvlbl fill) */
.fv-arrow.carrying .fv-lbl{opacity:0!important}
@media (prefers-reduced-motion:reduce){.flowviz[data-stage] .fv-card{transform:none}.flowviz[data-stage] .fv-card>*{opacity:1}}
/* fix 21/22: six cards and one "See all examples" link */
.cases-all{margin:28px 0 0;text-align:center}
/* fix 13: How it works carries the main CTA */
.how-cta{margin-top:32px;justify-content:center}
/* fix 14: Carerix band, one CTA plus an honest line for other ATSs */
.band .band-note{color:#C9D3E4;font-size:15px;margin:0}
.band .band-note .band-link{color:var(--teal);text-decoration-color:currentColor}
/* fix 16: closing CTA without a personal host card */
.cta .card.demo-card.solo{grid-template-columns:1fr;text-align:center;justify-items:center}
.cta .card.demo-card.solo .btns{justify-content:center}
.cta .card.demo-card.solo .muted{color:var(--muted);max-width:520px;margin:6px auto 0}

/* fix 18: example flow tabs use the same tab style as the Examples filters (no three-way toggle) */
.ex-tabs{padding:0;gap:8px;background:transparent;border:0;border-radius:0}
.ex-tabs button{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:16px;min-height:40px;font-weight:500}
.ex-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
/* fix 19: status labels are one tag style, clearly not buttons (4px corners, no pill) */
.ex-tag,.k-tag{border-radius:4px}
.phase,.fp-phase{border-radius:4px;background:transparent!important;padding:0;color:inherit}
/* fix 20: timeline cards get plain timestamps and simple dividers instead of time pills and arrow circles */
.step time,.after-how .step time,.after-how .step.you time,.step.you time{background:transparent!important;border:0!important;padding:0;border-radius:0}
.step:not(:last-child)::after{width:14px;height:2px;margin-top:-1px;right:-18px;border-radius:0;background:color-mix(in srgb,currentColor 30%,transparent);box-shadow:none}
.after-how .step:not(:last-child)::after{background:rgba(255,255,255,.3)}
@media (max-width:900px){.step:not(:last-child)::after{width:2px;height:14px;bottom:-17px;left:50%;top:auto;right:auto;margin:0;transform:none}}

/* fix 17: footer with who we are, Examples, Product, Contact, and the legal row */
footer.foot-v1 .wrap{display:grid;gap:28px;padding-block:44px 28px;justify-content:stretch;align-items:start}
footer.foot-v1 .fv1-grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:28px}
footer.foot-v1 .fv1-about{display:grid;gap:10px;align-content:start}
footer.foot-v1 .fv1-about p{margin:0;max-width:320px}
footer.foot-v1 .fv1-trust{font-size:13px}
footer.foot-v1 nav{display:grid;gap:2px;align-content:start}
footer.foot-v1 nav b{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
footer.foot-v1 nav a,footer.foot-v1 nav span{display:inline-flex;align-items:center;min-height:32px}
footer.foot-v1 .fv1-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:18px;font-size:13px}
footer.foot-v1 .fv1-legal nav{display:flex;gap:18px}
@media (max-width:820px){footer.foot-v1 .fv1-grid{grid-template-columns:1fr 1fr}footer.foot-v1 .fv1-about{grid-column:1/-1}}
@media (max-width:420px){footer.foot-v1 .fv1-grid{grid-template-columns:1fr}}
/* icon-only ATS logos (Recruitee, AFAS) carry their name */
.proof-band .pb-logos .ats-txt{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--muted);font:600 17px var(--display);letter-spacing:-.01em}

/* Carerix RMA versions of the example pages (rma/, tools/gen-rma.py): draft for the Carerix sales team */
.rma-nav .rma-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.rma-nav .rma-logo img{height:26px;width:auto}
.rma-tag{font:600 13px var(--body);padding:3px 8px;border-radius:4px;background:var(--ink);color:#fff}
.rma-nav nav{margin-left:auto}
.rma-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.rma-card{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:8px;background:var(--panel);text-decoration:none;color:inherit;overflow:hidden}
.rma-card:hover{border-color:var(--deep)}
.rma-card .pic img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--soft)}
.rma-card .txt{display:grid;gap:4px;padding:16px}
.rma-card b{font:500 18px var(--display)}
.rma-card span{color:var(--muted);font-size:14px}
.rma-card small{color:var(--deep-ink);font-size:12.5px;margin-top:6px}
.cta .card.demo-card.solo .demo-copy{display:grid;justify-items:center;text-align:center}
/* About: room between card title and body */
.val h3{margin-bottom:8px}
.val p{line-height:1.6}

/* v39: Randstad pull quote side panel: larger logo, calmer numbers, label hugs its number */
.pull{grid-template-columns:290px minmax(0,1fr)}
.pull-side{gap:0;padding:36px 34px 34px}
.pull-logo{height:40px;width:auto;margin:0 0 26px}
.pull-stat{display:grid;gap:4px}
.pull-stat+.pull-stat{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.pull-num{font-size:32px;line-height:1.05}
.pull-what{font-size:13.5px;line-height:1.35;color:var(--muted);text-wrap:pretty}
@media (max-width:860px){.pull{grid-template-columns:1fr}.pull-side{padding:28px 24px 24px}.pull-logo{height:34px;margin-bottom:18px}.pull-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}.pull-stat+.pull-stat{margin-top:16px;padding-top:16px}}

/* v40: stat labels lead with the unit (Tasks / Hours) */
.pull-what strong{display:block;font-family:var(--display);font-weight:500;font-size:17px;line-height:1.2;color:var(--ink);margin:2px 0 1px}

/* v41: About "Why inside the ATS": cards share the text column's top and bottom edge */
@media (min-width:981px){.ab-two{align-items:stretch}.ab-list{align-content:space-between}.ab-two .sec-h{display:flex;flex-direction:column;justify-content:center}}

/* v42: example cards: the still fills the picture box exactly like the hover clip (same box, same fit), so nothing shifts on hover */
.case .pic,.uc-open .pic{position:relative}
.case .pic img,.uc-open .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}

/* v43: hero: text block starts level with the top of the illustration */
@media (min-width:901px){.hero .wrap{align-items:start}.hero .wrap>.copy{padding-top:0}}
/* v43: tasks-per-run pricing line; MCP block on Integrations */
.agx-pr-link{margin-top:14px}.agx-pr-link a{color:var(--deep-ink);font-weight:600}
.mcp-sec{padding-top:0}
.mcp-blk{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center;padding:32px 36px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.mcp-blk .eyebrow{display:block;margin-bottom:8px}.mcp-blk h2{font-size:26px;margin:0 0 10px}.mcp-blk .lede{font-size:16px;margin:0}
.mcp-cta{margin:16px 0 0}
.mcp-side{display:grid;justify-items:center;gap:14px;padding:28px 20px;border-radius:var(--r-sm,14px);background:var(--soft)}
.mcp-side .am-row{margin:0;gap:18px}.mcp-side .am svg{width:30px;height:30px}
.mcp-side-k{font-size:13px;color:var(--muted);text-align:center}
@media (max-width:860px){.mcp-blk{grid-template-columns:1fr;padding:24px 20px}}

/* example pages: a way in near the top and right after 'How it runs' (Jeroen, 30 Oct: shared example pages need a CTA) */
.ag-hero .ag-cta{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px}
.ag-hero .ag-cta + p{margin-top:14px}
.ag .ag-next{margin-top:22px}

/* v44: homepage hero: text block centred on the automation graphic (Zasha + Cees, 30 Oct) */
@media (min-width:901px){.hero:has(.flowviz) .wrap{align-items:center}.hero:has(.flowviz) .wrap>.copy{align-self:center;padding-top:0}}

/* v45: no lone words on a last line (Ian, 2 Nov): balanced headings, pretty paragraphs */
h1,h2,h3,.lede{text-wrap:balance}
p,li,figcaption,blockquote,small{text-wrap:pretty}
/* v45: Ian's design pass (2 Nov) */
/* ATS logos: two even rows of four instead of 6 + 2 */
.proof-band .pb-logos ul.ats-direct{display:grid;grid-template-columns:repeat(4,auto);justify-content:center;justify-items:center;gap:14px 56px}
@media (max-width:600px){.proof-band .pb-logos ul.ats-direct{grid-template-columns:repeat(4,1fr);gap:10px 8px}}
/* homepage flow graphic: more room around Triggers / Writes back */
@media (min-width:901px){.flowviz .fv-arrow{height:68px}}
/* flows section: no "Example" badge, the tabs stand on their own */
.flows-sec .ex-tag{display:none}
.flows-sec .ex-head{justify-content:flex-end}
/* examples page: the filter row flows into the cards, no divider line */
.jump.filters{border-bottom:0}
.jump.filters .wrap{padding-block:10px 6px}
/* v45: contrast (Ian's greyscale check): borders a shade darker, cards lift off the page */
:root{--line:#D8D8CC}
.case,.card,.faq details,.pr-table,.cx-step,.st-card,.quote,.pull{box-shadow:0 1px 2px rgba(15,19,47,.05),0 6px 18px rgba(15,19,47,.06)}
.cta .demo-card{border:1px solid var(--line);box-shadow:0 2px 4px rgba(15,19,47,.05),0 14px 36px rgba(15,19,47,.08)}
.proof-band{border-block:1px solid var(--line)}
/* v45: phones: main buttons full width and centred, easier to tap (Ian, 2 Nov) */
@media (max-width:600px){
  .hero .btns,.cta .btns,.ag-hero .ag-cta,.band .btns,.sec .btns{flex-direction:column;align-items:stretch}
  .hero .btns .btn,.cta .btns .btn,.ag-hero .ag-cta .btn,.band .btns .btn,.sec .btns .btn{width:100%;justify-content:center;text-align:center}
  .hero .btns .link-cta,.cta .btns .link-cta,.sec .btns .link-cta{align-self:center}
}

/* v46: hero glow fades out before the section ends, so there is no hard edge where the next section starts */
.hero{background:none;position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0 0 -120px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(520px 420px at 82% 38%,color-mix(in srgb,var(--teal) 30%,transparent),transparent 70%),
    radial-gradient(460px 360px at 4% 78%,color-mix(in srgb,var(--rose) 16%,transparent),transparent 70%);
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
/* v46: contrast (WCAG AA, checked on 12 pages): the phase label in the white player panel was white on white */
.fp-copy .fp-phase{color:var(--muted)}
/* v47: no hard white bar under the floating menu: the strip behind it fades out, no line (Cees, 2 Nov) */
.nav::before{border-bottom:0;background:linear-gradient(color-mix(in srgb,var(--bg) 94%,transparent) 60%,transparent);
  -webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}
/* examples filter row: no own background until it sticks under the menu */
.jump.filters{background:transparent}
.jump.filters.stuck{background:linear-gradient(color-mix(in srgb,var(--bg) 94%,transparent) 70%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* v47b: no blur behind the menu or the filter row: the blur box showed as a rectangle over the background glow */
.nav::before{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(var(--bg) 62%,color-mix(in srgb,var(--bg) 0%,transparent))}
.jump.filters.stuck{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(var(--bg) 72%,color-mix(in srgb,var(--bg) 0%,transparent))}
/* v47c: the fixed top-right glow sat behind the menu strip and the sticky filter row, which cut it into a band; it now starts below them */
.fx .o1{top:max(30%,190px)}
.nav::before{background:linear-gradient(var(--bg) 86%,color-mix(in srgb,var(--bg) 0%,transparent));-webkit-mask-image:none;mask-image:none}
.nav::before{background:var(--bg)}
.jump.filters.stuck{background:linear-gradient(var(--bg) 88%,color-mix(in srgb,var(--bg) 0%,transparent))}
/* v47: go-live fixes. Footer: socials row, Support and Company columns, five columns, then four under the intro, two, and one on phones; legal row on one baseline */
footer.foot-v1 .fv1-social{list-style:none;margin:6px 0 0;padding:0;display:flex;gap:8px}
footer.foot-v1 .fv1-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink)}
footer.foot-v1 .fv1-social a:hover{border-color:var(--deep-ink);color:var(--deep-ink)}
footer.foot-v1 .fv1-social svg{width:18px;height:18px}
footer.foot-v1 .fv1-legal{align-items:center}
footer.foot-v1 .nw{white-space:nowrap}
footer.foot-v1 nav a,footer.foot-v1 nav span{overflow-wrap:anywhere}
footer.foot-v1 .fv1-grid{grid-template-columns:1.4fr repeat(4,minmax(0,1fr))}
@media (max-width:1099px){footer.foot-v1 .fv1-grid{grid-template-columns:repeat(4,minmax(0,1fr))}footer.foot-v1 .fv1-about{grid-column:1/-1}}
@media (max-width:839px){footer.foot-v1 .fv1-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){footer.foot-v1 .fv1-grid{grid-template-columns:1fr;gap:24px}footer.foot-v1 nav a,footer.foot-v1 nav span{min-height:40px}}
@media (min-width:601px) and (max-width:1240px){footer.foot-v1 .fv1-legal{padding-right:64px}}
@media (max-width:600px){footer.foot-v1 .fv1-grid nav{grid-template-columns:1fr}footer.foot-v1 .fv1-legal nav{gap:10px}footer.foot-v1 .fv1-legal nav a{min-height:44px;padding-inline:4px}}
/* v47: Randstad quote: the teal opening mark is back, with a matching closing mark after the last word */
.pull-mark.end{position:relative;left:auto;top:auto;font-size:2.75em;line-height:0;vertical-align:-.62em;margin-left:.04em}
.post-back{display:inline-flex;align-items:center;min-height:44px}
.ex-h{text-wrap:pretty}