/* ==========================================================
   Teamlyzer AI for HR - landing page
   Pure HTML/CSS, no build step and no framework.
   ========================================================== */

:root{
  --black:#000;
  --ink:#030c1a;
  --body:#4b5563;
  --muted:#67707c;  /* 4.5:1 on the hero blue; #78828f gave 3.5:1 */
  --accent:#0b5fbf;
  --accent-dark:#084a96;
  --accent-soft:#eaf4ff;
  --green:#31b51b;
  --green-dark:#2a9e17;
  --amber:#e8a317;
  --red:#d0453b;
  --red-ink:#b3372e;  /* 5.2:1 on white; --red drops to 4.0:1 at 13px */
  --line:#e6e9ef;
  --bg:#fff;
  --bg-alt:#f6f8fb;
  --radius:12px;
  --maxw:1160px;
  --nav-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:'Ubuntu','Helvetica Neue',Arial,sans-serif;font-weight:400;
  color:var(--body);background:var(--bg);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{color:var(--ink);margin:0;line-height:1.15;font-weight:700;letter-spacing:-.015em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.section--tight{padding:64px 0}
.section--alt{background:var(--bg-alt)}
.section--dark{background:var(--black);color:rgba(255,255,255,.7)}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}

.eyebrow{font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px}
.section--dark .eyebrow{color:#7fb2f0}
h2.title{font-size:38px;margin-bottom:14px;max-width:900px}
h2.title--sm{font-size:28px;margin-bottom:16px}
.sub{font-size:17px;font-weight:300;max-width:68ch}
.center{text-align:center}
.center .sub{margin:0 auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:6px;
  border:1px solid transparent;font-size:15px;font-weight:500;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s}
.btn--primary{background:var(--green);color:#fff}
.btn--primary:hover{background:var(--green-dark)}
.btn--ghost{background:transparent;border-color:#cbd5e1;color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--sm{padding:9px 18px;font-size:14px}

/* ---------- header ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--black);
  height:var(--nav-h);border-bottom:1px solid rgba(255,255,255,.08)}
.nav__inner{display:flex;align-items:center;height:100%}
.brand{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
/* the wordmark ships blue; brightness(0) invert(1) turns it white, like the live b2b header */
.brand img{width:118px;filter:brightness(0) invert(1)}
.brand span{align-self:flex-end;margin-top:4px;font-size:11px;font-weight:300;
  letter-spacing:.06em;color:rgba(255,255,255,.72)}
.nav__links{display:flex;align-items:center;gap:26px;margin-left:44px}
.nav__links a{font-size:14px;color:rgba(255,255,255,.7);transition:color .2s}
.nav__links a:hover{color:#fff}
.nav__cta{display:flex;align-items:center;gap:12px;margin-left:auto}
.nav__toggle{display:none;background:none;border:0;color:#fff;font-size:24px;cursor:pointer;
  padding:4px 8px;line-height:1}
.nav__mobile{display:none;background:var(--black);border-bottom:1px solid rgba(255,255,255,.08)}
.nav__mobile.open{display:block}
.nav__mobile a{display:block;padding:14px 24px;color:rgba(255,255,255,.8);font-size:15px;
  border-top:1px solid rgba(255,255,255,.07)}

/* ---------- mock panels ---------- */
.mock{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;
  box-shadow:0 14px 40px rgba(3,12,26,.08)}
.mock__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:14px}
.mock__title{font-size:13px;font-weight:500;color:var(--ink)}
.mock__tag{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);padding:4px 8px;border-radius:4px;white-space:nowrap}

.mock__find{font-size:13px;color:var(--body);font-weight:400;line-height:1.45;margin-bottom:16px}
.mock__find b{font-weight:500;color:var(--red-ink)}
.mock__lead{font-size:13px;color:var(--body);line-height:1.45;margin-bottom:6px}
.mock__big{font-size:38px;font-weight:700;color:var(--ink);letter-spacing:-.022em;
  line-height:1.05;margin-bottom:16px}
.mock__big b{display:block;font-size:13px;font-weight:400;color:var(--muted);
  letter-spacing:0;line-height:1.45;margin-top:8px;max-width:42ch}

/* Market map: one dot per submitted salary. The labels are HTML on top of
     the SVG, so they keep their size when the drawing scales down. */
.map__frame{position:relative}
.map__svg{width:100%;height:auto;display:block}
.map__cold circle{fill:#9ec4e8}
.map__hot circle{fill:var(--ink)}
.map__base{stroke:#d8dee8;stroke-width:1}
.map__med{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:3 3}
.map__you{position:absolute;transform:translateX(-50%);margin-bottom:26px;
  white-space:nowrap;font-size:13px;font-weight:500;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:4px;padding:3px 9px}
.map__you::after{content:'';position:absolute;left:50%;top:100%;width:1.5px;height:22px;
  margin-left:-.75px;background:var(--ink)}
.map__x{position:relative;height:19px;margin-top:9px}
.map__x span{position:absolute;transform:translateX(-50%);white-space:nowrap;
  font-size:11px;color:var(--muted)}
.map__x .is-med{color:var(--accent-dark);font-weight:500}
.map__foot{display:flex;justify-content:space-between;gap:14px;font-size:11px;
  color:var(--muted);margin-top:12px}
.map__key{display:none;font-size:11px;color:var(--muted);margin-top:12px}
@media (max-width:560px){
  .map__foot{flex-direction:column;gap:3px}
}
@media (max-width:420px){
  .map__you b,.map__x .is-med b{display:none}
  .map__key{display:block}
}

.mock__intro{font-size:13px;color:var(--muted);margin:34px 0 12px}
.diagviz{max-width:620px}


.railfoot{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}

.sig{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;font-size:13px}
.sig + .sig{border-top:1px solid var(--line)}
.sig__k{color:var(--body);font-weight:300}
.sig__v{font-weight:500;color:var(--ink);display:flex;align-items:center;gap:7px;
  white-space:nowrap;text-align:right}
.sig__m{color:var(--muted);font-weight:300;font-size:13px}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot--red{background:var(--red)}.dot--amber{background:var(--amber)}.dot--green{background:var(--green)}

.chat__q{background:var(--accent-soft);border:1px solid #d5e6fb;border-radius:10px 10px 10px 2px;
  padding:11px 14px;font-size:13px;color:var(--accent-dark);margin-bottom:12px}
.chat__a{border:1px solid var(--line);border-radius:10px 10px 2px 10px;padding:13px 14px;
  font-size:13px;color:var(--ink);font-weight:300;line-height:1.6}
.chat__a b{font-weight:500}
.chat__src{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);
  font-size:11px;color:var(--muted)}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;
  padding:calc(var(--nav-h) + 76px) 0 72px;
  background:linear-gradient(180deg,#eaf4ff 0%,#f5f9fd 60%,#fff 100%);
  border-bottom:1px solid var(--line)}

/* ---------- hero background layer ----------
   Transform only. The mesh shifts exactly one tile, so the loop is seamless. */
.hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero__bg::before{content:'';position:absolute;inset:-60px;
  background-image:radial-gradient(rgba(11,95,191,.20) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 8%,#000 12%,transparent 72%);
  mask-image:radial-gradient(120% 90% at 50% 8%,#000 12%,transparent 72%);
  animation:mesh 48s linear infinite}
@keyframes mesh{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-28px,-28px,0)}
}
.orb{position:absolute;border-radius:50%;will-change:transform}
.orb--a{width:760px;height:760px;top:-280px;right:-140px;
  background:radial-gradient(circle,rgba(11,95,191,.20),rgba(11,95,191,0) 68%);
  animation:orbA 26s ease-in-out infinite alternate}
.orb--b{width:660px;height:660px;bottom:-320px;left:-200px;
  background:radial-gradient(circle,rgba(59,130,230,.14),rgba(59,130,230,0) 66%);
  animation:orbB 34s ease-in-out infinite alternate}
@keyframes orbA{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-90px,60px,0) scale(1.12)}
}
@keyframes orbB{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(70px,-50px,0) scale(1.08)}
}
@media (prefers-reduced-motion:reduce){
  .hero__bg::before,.orb{animation:none}
}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
.hero h1{font-size:46px;letter-spacing:-.022em;line-height:1.1}
.hero h1 .accent{color:var(--accent)}
.hero .sub{margin-top:20px;font-size:17px;max-width:46ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero__note{margin-top:14px;font-size:13px;color:var(--muted)}

.band{border-bottom:1px solid var(--line);background:#fff}
.band ul{display:flex;flex-wrap:wrap}
.band li{flex:1 1 180px;padding:22px 16px;text-align:center;border-left:1px solid var(--line)}
.band li:first-child{border-left:0}
.band b{display:block;font-size:24px;font-weight:700;color:var(--ink);line-height:1.2}
.band span{font-size:13px;font-weight:300;color:var(--muted)}

/* ---------- three-up joined block (problem cards, steps) ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:#fff;margin-top:44px}
.trio__c{padding:32px 30px;display:flex;flex-direction:column}
.trio__c + .trio__c{border-left:1px solid var(--line)}
.trio__k{font-size:11px;font-weight:500;color:var(--accent);letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:14px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.trio__c h3{font-size:20px;margin-bottom:10px}
.trio__c p{font-size:15px;font-weight:300}
.trio__f{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);
  font-size:13px;color:var(--accent-dark);
  min-height:calc(3.1em + 12px)}
.trio__c p + .trio__f{margin-top:auto}
.trio__c h3 + p{margin-bottom:16px}

/* ---------- pillar rows (copy left, mock right) ---------- */
.split{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;
  padding:44px 0;border-top:1px solid var(--line)}
.split:first-of-type{border-top:0;padding-top:28px}
.split--flip .split__copy{order:2}
.split h3{font-size:28px;margin-bottom:12px}
.split p{font-size:15px;font-weight:300;max-width:68ch}

/* ---------- trusted by ---------- */
.trusted{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:center}
.trusted h2{font-size:24px;line-height:1.25}
.trusted p{font-size:14px;font-weight:300;margin-top:8px}
.logogrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.logogrid div{display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:6px;height:78px;padding:12px}
.logogrid img{max-height:44px;width:auto;object-fit:contain}

/* ---------- the diagnostic, block by block ---------- */
.deliver{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:44px}
.deliver__c{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px}
.deliver__n{width:26px;height:26px;border-radius:6px;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;margin-bottom:14px}
.deliver__c h3{font-size:15px;margin-bottom:8px;line-height:1.25}
.deliver__c p{font-size:13px;font-weight:300}

/* ---------- advisory areas + business impact ---------- */
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.areas__c{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px}
.areas__c h3{font-size:17px;margin-bottom:8px;font-weight:700}
.areas__c p{font-size:14px;font-weight:300}

/* ---------- teams covered ---------- */
.chiprow{display:flex;flex-wrap:wrap;gap:9px}
.chip{display:inline-block;padding:10px 15px;border-radius:6px;font-size:14px;font-weight:300}
.section--dark .chip{background:transparent;border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.85);transition:border-color .2s,background .2s}
.section--dark .chip:hover{border-color:#fff;background:rgba(255,255,255,.06)}

/* ---------- human in the loop ---------- */
.hitl{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hitl__quote{font-size:28px;font-weight:300;line-height:1.4;color:#fff;
  border-left:2px solid var(--accent);padding-left:22px}
.hitl__list li{padding:15px 0;border-top:1px solid rgba(255,255,255,.13);font-size:14px;font-weight:300}
.hitl__list li b{display:block;color:#fff;font-weight:500;margin-bottom:3px}

/* ---------- case study ---------- */
.cs__hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-bottom:22px;border-bottom:1px solid var(--line)}
.cs__hd .title{margin-bottom:0;max-width:34ch}
.cs__all{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;padding-bottom:6px;border-bottom:1px solid var(--ink);
  transition:color .2s,border-color .2s}
.cs__all:hover{color:var(--accent);border-color:var(--accent)}

.cs{display:grid;grid-template-columns:1fr 1.05fr;gap:0;margin-top:32px;
  background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 1px 2px rgba(3,12,26,.05),0 18px 46px rgba(3,12,26,.06);
  transition:box-shadow .35s,transform .35s}
.cs:hover{box-shadow:0 1px 2px rgba(3,12,26,.05),0 30px 66px rgba(3,12,26,.11);
  transform:translateY(-3px)}
.cs__copy{padding:44px 44px 40px;display:flex;flex-direction:column;justify-content:center}
.cs__brand{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.cs__brand img{height:54px;width:auto;max-width:150px;object-fit:contain}
.cs__chip{font-size:11px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:6px 10px}
.cs__metric{font-size:13px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;line-height:1.5}
.cs__metric b{font-size:20px;font-weight:700;letter-spacing:-.01em}
.cs__copy h3{font-size:28px;line-height:1.25;font-weight:500;margin-bottom:16px}
.cs__p{font-size:14px;font-weight:300}
.cs__tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:24px}
.cs__tags span{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding-right:6px;border-right:1px solid var(--line)}
.cs__tags b{font-size:13px;font-weight:400;color:var(--accent-dark);background:var(--accent-soft);
  border:1px solid #d5e6fb;border-radius:4px;padding:5px 10px}
.cs__viz{background:linear-gradient(160deg,#eef5fd,#e7eefb);padding:36px;
  display:flex;align-items:center;border-left:1px solid var(--line)}
.cs__viz .mock{width:100%;box-shadow:0 18px 44px rgba(3,12,26,.12)}
.cs--flip .cs__copy{order:2;border-left:1px solid var(--line)}
.cs--flip .cs__viz{border-left:0}
.cols{position:relative;display:flex;align-items:flex-end;gap:6px;height:132px;
  padding-top:8px;margin-bottom:10px}
.cols i{flex:1;height:var(--h);border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg,#5f9beb,var(--accent));
  transition:height .8s cubic-bezier(.22,.61,.36,1)}
.cols i.is-under{background:linear-gradient(180deg,#f0b95a,var(--amber))}
.cols__line{position:absolute;left:0;right:0;bottom:60%;height:0;
  border-top:1px dashed #9fb2c9;z-index:1}
.cols__line b{position:absolute;right:0;top:-9px;background:#fff;padding:0 5px;
  font-size:11px;font-weight:500;color:var(--muted)}

/* ---------- faq ---------- */
.faq{max-width:800px;margin:40px auto 0}
.faq__g{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:34px 0 6px;text-align:left}
.faq__g:first-child{margin-top:0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-size:17px;font-weight:500;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:8px;top:17px;font-size:24px;
  font-weight:300;color:var(--accent)}
.faq details[open] summary::after{content:'−'}
.faq details p{padding:0 0 22px;font-size:15px;font-weight:300;max-width:68ch}

/* ---------- final cta ---------- */
.cta{background:linear-gradient(180deg,#eaf4ff,#f6f9fd);border:1px solid #d7e7fb;
  border-radius:18px;padding:60px 40px;text-align:center}
.cta h2{font-size:38px;margin-bottom:12px}
.cta .sub{margin:0 auto 28px}
.cta__note{margin:22px auto 0;max-width:56ch;font-size:13px;font-weight:300;color:var(--body)}

/* ---------- footer ---------- */
.footer{background:var(--black);color:rgba(255,255,255,.55);padding:60px 0 30px;font-size:14px}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.footer h3{color:#fff;font-size:14px;font-weight:500;margin-bottom:15px}
.footer li{padding:6px 0;font-weight:300}
.footer a:hover{color:#fff}
.footer__brand img{width:130px;filter:brightness(0) invert(1);margin-bottom:13px}
.footer__brand p{font-weight:300;max-width:32ch;font-size:14px}
.footer__bottom{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;font-weight:300}

/* ---------- keyboard focus ----------
   outline:none everywhere left keyboard users with no idea where they were. */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.nav a:focus-visible,.nav button:focus-visible,
.footer a:focus-visible,.section--dark a:focus-visible{outline-color:#7fb2f0}
.btn--primary:focus-visible{outline-color:var(--green-dark);outline-offset:3px}

/* ---------- motion layer ----------
   The hidden state is applied by JS, so with JS off or reduced motion the
   page still shows everything. */
.js-reveal .reveal{opacity:0;transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.js-reveal .reveal.is-in{opacity:1;transform:none}
.js-reveal .reveal[data-d="1"]{transition-delay:.09s}
.js-reveal .reveal[data-d="2"]{transition-delay:.18s}
.js-reveal .reveal[data-d="3"]{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal{opacity:1;transform:none;transition:none}
}
/* bars only grow once their block is on screen */
.js-reveal .reveal:not(.is-in) .cols i{height:4px}

.section--dark{position:relative;isolation:isolate}
.section--dark::before{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(900px 420px at 12% 0%,rgba(11,95,191,.30),transparent 62%)}

.logogrid div,.areas__c,.deliver__c,.trio__c{transition:transform .25s,box-shadow .25s,
  border-color .25s,background .25s}
.logogrid div:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(3,12,26,.08);
  border-color:#cfd8e5}
.areas__c:hover,.deliver__c:hover{box-shadow:0 12px 26px rgba(3,12,26,.07);border-color:#cfd8e5}
.trio__c:hover{background:#fbfdff}

.eyebrow{display:flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:22px;height:2px;border-radius:2px;background:var(--accent);
  flex:none}
.section--dark .eyebrow::before{background:#7fb2f0}
.center .eyebrow{justify-content:center}

.nav{transition:box-shadow .3s}
.nav.is-stuck{box-shadow:0 10px 30px rgba(3,12,26,.35)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero__grid,.split,.hitl,.trusted{grid-template-columns:1fr;gap:36px}
  .cs{grid-template-columns:1fr}
  .cs--flip .cs__copy{order:0;border-left:0}
  .cs__viz{border-left:0;border-top:1px solid var(--line)}
  .cs__copy{padding:32px 28px}
  .cs__copy h3{font-size:23px}
  .areas{grid-template-columns:repeat(2,1fr)}
  .split--flip .split__copy{order:0}
  .hero h1{font-size:40px}
  .deliver{grid-template-columns:repeat(2,1fr)}
  .trio{grid-template-columns:1fr}
  .trio__c + .trio__c{border-left:0;border-top:1px solid var(--line)}
  .footer__top{grid-template-columns:1fr 1fr}
  .logogrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:700px){
  .nav__links,.nav__cta .btn{display:none}
  .nav__toggle{display:block}
  .section{padding:60px 0}
  h2.title{font-size:28px}
  .hero{padding:calc(var(--nav-h) + 48px) 0 52px}
  .hero h1{font-size:33px}
  .split h3{font-size:23px}
  .deliver,.areas{grid-template-columns:1fr}
  .logogrid{grid-template-columns:repeat(2,1fr)}
  .band li{flex:1 1 50%;border-left:0}
  .cta{padding:40px 22px}.cta h2{font-size:26px}
  .hitl__quote{font-size:21px}
  .mock__head{flex-direction:column;align-items:flex-start;gap:8px}
  .cs__hd{flex-direction:column;align-items:flex-start;gap:14px}
  .cs__all{align-self:flex-start}
  .cs__viz{padding:24px 18px}
  .cs__copy{padding:28px 22px}
  .cs__copy h3{font-size:20px}
  .footer__top{grid-template-columns:1fr}
}

/* below this width four percentile chips would squeeze a label onto two lines */
@media (max-width:380px){
  .mx__r{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================
   Added when the page moved into the codebase (issue #3341).
   ========================================================== */

/* ---------- former inline styles ---------- */
.note{font-size:13px;font-weight:300;color:var(--muted);max-width:112ch;margin-top:26px}
.split__k{font-size:11px;font-weight:500;color:var(--accent);letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:12px}
.logogrid__more{color:var(--muted);font-size:12px;font-weight:300;border-style:dashed;flex-direction:column;gap:1px;text-align:center;line-height:1.3}
.logogrid__more b{display:block;font-weight:500;color:var(--ink);font-size:14px}
.dark__sub{font-weight:300;font-size:16px;max-width:56ch;margin-bottom:26px}
.chiprow{max-width:900px}
.cs__more{display:inline-flex;align-items:center;gap:9px;margin-top:24px;padding:12px 18px;
  /* .cs__copy is a flex column: without this the button stretches to the card */
  align-self:flex-start;
  border:1px solid var(--line);border-radius:8px;background:#fff;
  font-size:13.5px;font-weight:500;color:var(--ink);
  transition:border-color .2s,color .2s,box-shadow .3s,transform .3s}
.cs__more:hover{border-color:var(--accent);color:var(--accent);
  box-shadow:0 10px 26px rgba(3,12,26,.08);transform:translateY(-1px)}

/* ---------- case study page ---------- */
.crumbs{font-size:12px;font-weight:300;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--muted);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.crumbs a:hover{color:var(--accent);border-color:var(--accent)}
.crumbs span{padding:0 7px;opacity:.6}

.cshero{padding:calc(var(--nav-h) + 54px) 0 8px;background:var(--bg-alt);
  border-bottom:1px solid var(--line)}
.cshero__brand{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.cshero__brand img{height:56px;width:auto;max-width:160px;object-fit:contain;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px}
.cshero h1{font-size:38px;line-height:1.18;max-width:26ch;margin-bottom:16px}
.cshero .sub{max-width:72ch}
.cshero__facts{display:flex;flex-wrap:wrap;gap:0;margin:34px 0 0;
  border-top:1px solid var(--line)}
.cshero__facts div{flex:1 1 200px;padding:20px 24px 26px;border-left:1px solid var(--line)}
.cshero__facts div:first-child{border-left:0;padding-left:0}
.cshero__facts b{display:block;font-size:26px;font-weight:700;color:var(--ink);line-height:1.2}
.cshero__facts span{display:block;font-size:12px;font-weight:300;color:var(--muted);margin-top:6px}

.prose{max-width:70ch}
.prose h2{font-size:26px;margin:0 0 14px}
.prose h3{font-size:19px;margin:30px 0 8px}
.prose p{font-size:16px;font-weight:300;margin-bottom:14px}
.prose ul{margin:6px 0 18px}
.prose ul li{font-size:15px;font-weight:300;padding:7px 0 7px 22px;position:relative}
.prose ul li::before{content:'';position:absolute;left:0;top:15px;width:9px;height:2px;
  border-radius:2px;background:var(--accent)}
.prose b{font-weight:500;color:var(--ink)}

.csgrid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}

.dtable{width:100%;border-collapse:collapse;font-size:14px}
.dtable th,.dtable td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line)}
.dtable thead th{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.dtable tbody th{font-weight:400;color:var(--ink)}
.dtable td{font-weight:300;color:var(--body);text-align:right;font-variant-numeric:tabular-nums}
.dtable td.is-you{color:var(--ink);font-weight:500}
.dtable tr:last-child th,.dtable tr:last-child td{border-bottom:0}
.dscroll{overflow-x:auto}

.csnav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
.csnav a{display:block;padding:24px 26px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;transition:border-color .2s,box-shadow .3s,transform .3s}
.csnav a:hover{border-color:var(--accent);box-shadow:0 16px 40px rgba(3,12,26,.07);
  transform:translateY(-2px)}
.csnav b{display:block;font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.csnav span{font-size:16px;font-weight:400;color:var(--ink)}

@media (max-width:900px){
  .csgrid{grid-template-columns:1fr;gap:32px}
  .cshero h1{font-size:30px;max-width:none}
  .cshero__facts div{padding:18px 0;border-left:0;border-top:1px solid var(--line);flex-basis:100%}
  .cshero__facts div:first-child{border-top:0}
  .csnav{grid-template-columns:1fr}
}

.footer h3{text-transform:uppercase;letter-spacing:.1em;font-size:12px}

/* long labels overflowed the 320px viewport: below 420px the row wraps */
@media (max-width:420px){
  .sig{flex-wrap:wrap;gap:2px 14px}
  .sig__v{justify-content:flex-start;white-space:normal;text-align:left}
}

/* two dark sections in a row: the second glow reads as a seam */
.section--dark + .section--dark{padding-top:0}
.section--dark + .section--dark::before{content:none}

.nav__links a,.nav__cta .btn{white-space:nowrap}
@media (max-width:1100px){
  .nav__links{display:none}
  .nav__toggle{display:block}
}

/* ---------- case study navigation ---------- */
/* opens on hover and on :focus-within, so the keyboard reaches it without JS */
.nav__has{position:relative;display:inline-flex;align-items:center}
.nav__has>a{display:inline-flex;align-items:center;gap:6px}
.nav__chev{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4px solid currentColor;opacity:.6;transition:transform .2s,opacity .2s}
.nav__has:hover .nav__chev,.nav__has:focus-within .nav__chev{opacity:1;transform:translateY(1px)}
.nav__menu{position:absolute;top:100%;left:-18px;min-width:322px;padding:8px;
  background:var(--black);border:1px solid rgba(255,255,255,.14);border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s}
.nav__has:hover .nav__menu,.nav__has:focus-within .nav__menu{opacity:1;visibility:visible;
  transform:translateY(0)}
.nav__menu a{display:block;padding:10px 14px;border-radius:8px;color:rgba(255,255,255,.72)}
.nav__menu a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav__menu a b{display:block;font-size:14px;font-weight:500;color:#fff}
.nav__menu a span{display:block;font-size:12px;font-weight:300;line-height:1.4;margin-top:2px}
.nav__menu a[aria-current]{background:rgba(11,95,191,.28)}
.nav__menu__all{font-size:12px;color:#7fb2f0;border-top:1px solid rgba(255,255,255,.12);
  border-radius:0;margin-top:6px;padding-top:12px}
.nav__menu__all:hover{background:transparent;color:#a9cdf7}

.nav__mobile__sub{padding-left:40px;position:relative;font-size:14px}
.nav__mobile__sub::before{content:'';position:absolute;left:24px;top:22px;width:8px;height:1px;
  background:rgba(255,255,255,.35)}
.nav__mobile__sub span{display:block;font-size:12px;font-weight:300;color:rgba(255,255,255,.45);
  margin-top:1px}
.nav__mobile__sub[aria-current]{color:#7fb2f0}
.nav__mobile__cta{color:#7fb2f0}

/* ---------- case study sub-header ---------- */
.cswitch{position:relative;z-index:2;background:var(--bg);border-bottom:1px solid var(--line);
  margin-top:var(--nav-h)}
.cswitch__in{display:flex;align-items:center;gap:10px;min-height:48px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cswitch__in::-webkit-scrollbar{display:none}
.cswitch__k{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;padding-right:6px}
.cswitch__list{display:flex;align-items:center;gap:4px}
.cswitch__list a{font-size:14px;font-weight:400;color:var(--body);white-space:nowrap;
  padding:6px 12px;border-radius:6px;transition:background .2s,color .2s}
.cswitch__list a:hover{background:var(--bg-alt);color:var(--ink)}
.cswitch__list a.is-current{color:var(--ink);font-weight:500;background:var(--accent-soft);
  box-shadow:inset 0 -2px 0 var(--accent)}
.cswitch__back{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap;
  padding-left:16px}
.cswitch__back::before{content:'← ';opacity:.7}
.cswitch__back:hover{color:var(--accent)}
.cshero--switched{padding-top:34px}
@media (max-width:700px){
  .cswitch__in{gap:8px}
  .cswitch__k{display:none}
  .cswitch__back{padding-left:10px}
}

/* `.nav__mobile a` is (0,1,1) and beat the single class */
.nav__mobile a.nav__mobile__sub{padding-left:40px}
@media (max-width:700px){
  .cswitch__back{font-size:0}
  .cswitch__back::before{content:'← AI for HR';font-size:12px;opacity:1}
}

/* ---------- report replicas inside a case study ---------- */
/* a dash, not an empty cell, so a missing tick reads as measured */
.matrix td{text-align:center;font-size:15px}
.matrix td.yes{color:var(--accent);font-weight:500}
.matrix td.no{color:var(--line)}
.matrix tbody th{white-space:nowrap;font-weight:400}
.matrix td.is-you,.matrix tbody th.is-you{background:var(--accent-soft)}
.matrix thead th.is-you{background:var(--accent-soft);color:var(--accent)}

/* a band is a range: the segment is p25 to p75 and the dot is the median */
.range{display:grid;grid-template-columns:132px minmax(0,1fr) 78px;align-items:center;
  gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.range:last-of-type{border-bottom:0}
.range__n{font-size:14px;color:var(--ink)}
.range__n small{display:block;font-size:11px;color:var(--muted);font-weight:300}
.range__track{position:relative;height:22px;border-radius:4px;background:var(--bg-alt)}
.range__seg{position:absolute;top:7px;height:8px;border-radius:4px;
  background:linear-gradient(90deg,#a8ccf3,var(--accent))}
.range__dot{position:absolute;top:3px;width:2px;height:16px;background:var(--ink);border-radius:2px}
.range__v{font-size:14px;font-weight:500;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums}
.range--you .range__n,.range--you .range__v{font-weight:600}
.range--you .range__track{background:var(--accent-soft)}
.range__none{position:absolute;left:0;top:4px;font-size:11px;color:var(--muted)}
.range__axis{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);
  padding-top:8px;margin-top:2px;border-top:1px solid var(--line)}

.hbar{display:grid;grid-template-columns:132px minmax(0,1fr) 40px;align-items:center;gap:14px;
  padding:9px 0}
.hbar__n{font-size:14px;color:var(--ink)}
.hbar__t{height:14px;border-radius:4px;background:var(--bg-alt);overflow:hidden}
.hbar__t i{display:block;height:100%;border-radius:4px;background:var(--accent);opacity:.85}
.hbar__v{font-size:14px;font-weight:500;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums}

.takeaways{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.takeaway{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:22px 24px}
.takeaway b{display:block;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px}
.takeaway h3{font-size:17px;margin:0 0 8px}
.takeaway p{font-size:14.5px;font-weight:300;margin:0}
@media (max-width:820px){
  .takeaways{grid-template-columns:1fr}
  .range{grid-template-columns:104px minmax(0,1fr) 70px;gap:10px}
  .hbar{grid-template-columns:104px minmax(0,1fr) 34px;gap:10px}
}

/* scroll shadow: one pair of gradients pinned to the content, one to the box */
.dscroll{
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 42px 100% no-repeat local,
    linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center / 42px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(3,12,26,.16), rgba(3,12,26,0)) left center / 15px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(3,12,26,.16), rgba(3,12,26,0)) right center / 15px 100% no-repeat scroll;
}
.range__axis{margin-bottom:12px}

.dtable tr.is-you th,.dtable tr.is-you td{background:var(--accent-soft);color:var(--ink)}
.dtable tr.is-you th{font-weight:500}

.dtable thead th:not(:first-child){text-align:right}
.matrix thead th:not(:first-child){text-align:center}

/* index of the blocks: a case page runs to fourteen screens on a phone */
.ctoc{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line)}
.ctoc__k{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-right:4px}
.ctoc a{font-size:13px;color:var(--body);border:1px solid var(--line);background:var(--bg);
  border-radius:99px;padding:7px 14px;transition:border-color .2s,color .2s,background .2s}
.ctoc a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* on a phone the index comes first, before the four figures stack */
@media (max-width:700px){
  .cshero .wrap{display:flex;flex-direction:column}
  .cshero .ctoc{order:1}
  .cshero__facts{order:2;margin-top:26px}
}

/* footer logo: same lockup as the header, and the SVG carries 1px of slack on the left */
.brand{margin-left:-1px}
.footer__brand .brand{margin-bottom:13px}
.footer__brand .brand img{width:118px;margin-bottom:0}  

/* ---------- diagnostic: where each team keeps its seniors ---------- */
.gaps{margin-top:20px}
.gaps__hd{display:grid;grid-template-columns:150px minmax(0,1fr) 86px;gap:16px;align-items:end;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding-bottom:9px;border-bottom:1px solid var(--line)}
.gaps__scale{display:flex;justify-content:space-between;align-items:baseline}
.gaps__scale i{font-style:normal;opacity:.7}
.gaps__scale b{font-weight:500;letter-spacing:.06em}
.gaps__k{text-align:right}

.gap{display:grid;grid-template-columns:150px minmax(0,1fr) 86px;gap:16px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--line)}
.gap__n{font-size:14px;color:var(--ink)}
.gap__n small{display:block;font-size:11.5px;font-weight:300;color:var(--muted);margin-top:2px}
.gap__track{position:relative;height:22px}
.gap__mid{position:absolute;left:50%;top:-13px;bottom:-13px;width:1px;
  background:repeating-linear-gradient(to bottom,#c9d0da 0 3px,transparent 3px 6px)}
.gap__bar{position:absolute;top:10px;height:2px;background:var(--line)}
.gap__dot{position:absolute;top:5px;width:12px;height:12px;border-radius:50%;
  margin-left:-6px;background:#fff}
.gap__dot--team{border:2px solid var(--body)}
.gap__dot--sr{background:var(--ink)}
.gap.is-low .gap__bar{background:var(--red)}
.gap.is-low .gap__dot--sr{background:var(--red)}
.gap__v{text-align:right;line-height:1.15}
.gap__v b{display:block;font-size:19px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}
.gap.is-low .gap__v b{color:var(--red-ink)}
.gap__v i{font-style:normal;font-size:11.5px;font-weight:300;color:var(--muted)}

.gaps__key{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:14px 0 0;
  font-size:11.5px;font-weight:300;color:var(--muted)}
/* symbol and word as one unit, or the median rule splits from its label */
.gaps__key-i{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.gaps__key-i i{width:11px;height:11px;border-radius:50%;flex:none}
.gaps__key-sr{background:var(--ink)}
.gaps__key-team{border:2px solid var(--body);background:#fff}
.gaps__key-mid{width:13px !important;height:0 !important;border-radius:0 !important;
  border-top:1px dashed var(--muted)}

@media (max-width:700px){
  .gaps__hd{grid-template-columns:1fr 74px;gap:10px}
  .gaps__hd .gaps__scale{display:none}
  .gap{grid-template-columns:1fr 74px;gap:6px 10px;padding:15px 0}
  .gap__track{grid-column:1 / -1;order:3}
  .gap__n{order:1}
  .gap__v{order:2}
  .gap__v b{font-size:17px}
}

/* .brand is a flex item in the header and a block in the footer, where it stretched the column */
.footer__brand .brand{display:inline-flex;width:max-content}

/* max-width without margin:auto centres the text inside a box stuck to the left */
.center .title{margin-left:auto;margin-right:auto}

@media (min-width:1001px){
  .trio__c h3{min-height:3.45em}
}

/* the <img> has to be a block, or the footer line box adds 13px under the wordmark */
.brand img{display:block;height:auto}
.brand span{margin-right:3px}

/* ---------- market map entrance ---------- */
@keyframes mapRise{from{transform:scaleY(.04)}to{transform:scaleY(1)}}
@keyframes mapIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
/* the labels already use transform to centre: animating transform without repeating it wiped the centring */
@keyframes mapInX{from{opacity:0;transform:translateX(-50%) translateY(4px)}
                  to{opacity:1;transform:translateX(-50%)}}
@keyframes mapLine{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}

.map__cold,.map__hot,.map__med{transform-box:fill-box;transform-origin:50% 100%}
/* tied to the reveal and not to load: on a phone the panel is below the fold */
.reveal.is-in .map__cold{animation:mapRise 1s cubic-bezier(.2,.8,.25,1) both}
.reveal.is-in .map__hot{animation:mapRise .75s cubic-bezier(.2,.8,.25,1) .4s both}
.reveal.is-in .map__med{animation:mapLine .45s ease-out .85s both}
.reveal.is-in .map__you{animation:mapInX .5s ease-out 1.05s both}
.reveal.is-in .map__x span{animation:mapInX .5s ease-out .6s both}
@media (prefers-reduced-motion:reduce){
  .reveal.is-in .map__cold,.reveal.is-in .map__hot,.reveal.is-in .map__med,
  .reveal.is-in .map__you,.reveal.is-in .map__x span{animation:none}
}

/* inline separators left the middle dot opening a line: one gain per line */
.hero__wins{margin-top:16px;max-width:46ch;list-style:none;padding:0}
.hero__wins li{position:relative;padding:4px 0 4px 20px;font-size:14.5px;font-weight:400;
  color:var(--ink)}
.hero__wins li::before{content:'';position:absolute;left:0;top:13px;width:9px;height:2px;
  border-radius:2px;background:var(--accent)}

/* ---------- full-width diagnostic panel ---------- */
.diagviz{max-width:none}
.mock--wide{padding:26px 28px}
.dg{display:grid;grid-template-columns:minmax(0,32%) minmax(0,1fr);gap:46px;align-items:start;
  margin-top:4px}
.dg__money .mock__lead{max-width:34ch}
.dg__money .mock__big{margin:0}
.dg__money .mock__big b{display:block;font-size:clamp(42px,4.4vw,58px);font-weight:700;
  color:var(--ink);letter-spacing:-.025em;line-height:1;font-variant-numeric:tabular-nums}
.dg__money .mock__big i{display:block;font-style:normal;font-size:13px;font-weight:400;
  color:var(--muted);margin-top:10px;max-width:34ch;line-height:1.5}
.dg__money .mock__find{margin:18px 0 0;max-width:34ch;padding-top:16px;
  border-top:1px solid var(--line)}

.gap--focus{position:relative}
.gap--focus::before{content:'';position:absolute;left:-14px;right:-14px;top:0;bottom:0;
  background:var(--accent-soft);border-radius:8px;z-index:-1}
.gaps{position:relative;z-index:0}

/* the bars grow from senior to team, then the dots land, row by row */
@keyframes gapGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes gapPop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
.reveal.is-in .gap__bar{transform-origin:left center;
  animation:gapGrow .5s cubic-bezier(.2,.85,.3,1) both}
.reveal.is-in .gap__dot{animation:gapPop .3s cubic-bezier(.2,1.5,.5,1) both}
.reveal.is-in .gap:nth-child(2) .gap__bar{animation-delay:.15s}
.reveal.is-in .gap:nth-child(2) .gap__dot{animation-delay:.45s}
.reveal.is-in .gap:nth-child(3) .gap__bar{animation-delay:.28s}
.reveal.is-in .gap:nth-child(3) .gap__dot{animation-delay:.58s}
.reveal.is-in .gap:nth-child(4) .gap__bar{animation-delay:.41s}
.reveal.is-in .gap:nth-child(4) .gap__dot{animation-delay:.71s}
.reveal.is-in .gap:nth-child(5) .gap__bar{animation-delay:.54s}
.reveal.is-in .gap:nth-child(5) .gap__dot{animation-delay:.84s}
@media (prefers-reduced-motion:reduce){
  .reveal.is-in .gap__bar,.reveal.is-in .gap__dot{animation:none}
}

@media (max-width:900px){
  .dg{grid-template-columns:1fr;gap:26px}
  .dg__money .mock__big b{font-size:40px}
  .gap--focus::before{left:-8px;right:-8px}
}

.map__med{stroke:var(--accent-dark);stroke-width:1.5;stroke-dasharray:4 3}
.map__medcap{fill:var(--accent-dark)}
.reveal.is-in .map__medcap{animation:mapIn .4s ease-out 1.15s both}
.gap__mid{background:repeating-linear-gradient(to bottom,#9aa6b6 0 3px,transparent 3px 6px)}
@media (prefers-reduced-motion:reduce){.reveal.is-in .map__medcap{animation:none}}

/* ---------- the copilot answers in scene ---------- */
/* The question enters, the agent thinks, and only then the answer and the
   source. Once, when the panel reaches the screen. */
.chat__think{display:flex;gap:5px;padding:10px 2px 4px}
.chat__think i{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.35}
.reveal.is-in .mock--chat .chat__q{animation:chatIn .4s ease-out both}
.reveal.is-in .mock--chat .chat__think{animation:chatThink .9s ease-in-out .45s 1 both,
  chatGone .01s linear 1.45s both}
.reveal.is-in .mock--chat .chat__think i{animation:thinkPulse 1s ease-in-out .45s infinite}
.reveal.is-in .mock--chat .chat__think i:nth-child(2){animation-delay:.6s}
.reveal.is-in .mock--chat .chat__think i:nth-child(3){animation-delay:.75s}
.reveal.is-in .mock--chat .chat__a{animation:chatIn .45s ease-out 1.45s both}
.reveal.is-in .mock--chat .chat__src{animation:chatIn .4s ease-out 1.85s both}
@keyframes chatIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes chatThink{from{opacity:0}to{opacity:1}}
@keyframes chatGone{to{opacity:0;height:0;padding:0;overflow:hidden}}
@keyframes thinkPulse{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){
  .reveal.is-in .mock--chat .chat__q,.reveal.is-in .mock--chat .chat__a,
  .reveal.is-in .mock--chat .chat__src,.reveal.is-in .mock--chat .chat__think,
  .reveal.is-in .mock--chat .chat__think i{animation:none}
  .chat__think{display:none}
}

/* ---------- case hero: copy left, figures right ---------- */
/* It was one text column with a max-width, so half the first screen was empty.
   The landing hero already splits 1.1fr/.9fr; this follows it. */
.cshero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.cshero__grid>div:first-child{min-width:0}
.cshero__grid h1{max-width:20ch}
.cshero__grid .sub{max-width:54ch}
.cshero__grid .cshero__facts{flex-direction:column;margin:0;border:1px solid var(--line);
  border-top:1px solid var(--line);border-radius:var(--radius);background:#fff;
  box-shadow:0 18px 44px rgba(3,12,26,.07)}
.cshero__grid .cshero__facts div{flex:none;border-left:0;border-top:1px solid var(--line);
  padding:16px 24px}
.cshero__grid .cshero__facts div:first-child{border-top:0;padding:24px 24px 20px}
.cshero__grid .cshero__facts--lead div:first-child{flex-basis:auto;padding-bottom:20px;
  border-bottom:1px solid var(--line)}
.cshero__grid .cshero__facts--lead div:nth-child(2){padding-left:24px}
@media (max-width:900px){
  .cshero__grid{grid-template-columns:1fr;gap:32px}
  .cshero__grid h1,.cshero__grid .sub{max-width:none}
}

/* ---------- case hero: the answer, not an inventory ---------- */
/* The h1 asks the client's question; this answers it on the same screen, with
   the bars that prove it. Scale starts at zero, so a bar is its own value. */
.cans{border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:24px 24px 18px;box-shadow:0 18px 44px rgba(3,12,26,.07)}
.cans__k{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.cans__a{font-size:17px;font-weight:300;line-height:1.5;color:var(--body);margin-bottom:22px}
.cans__a b{font-weight:500;color:var(--ink)}
.cans__bars{display:grid;gap:14px}
.cbar{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline}
.cbar__k{font-size:12.5px;font-weight:300;color:var(--muted)}
.cbar__v{font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.cbar__t{grid-column:1 / -1;display:block;height:8px;border-radius:4px;background:var(--bg-alt);
  overflow:hidden}
.cbar__t i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,#9dbfe8,#5f9beb);
  transition:width .9s cubic-bezier(.22,.61,.36,1)}
.cbar--you .cbar__k,.cbar--you .cbar__v{color:var(--ink);font-weight:500}
.cbar--you .cbar__t i{background:linear-gradient(90deg,#5f9beb,var(--accent))}
.js-reveal .reveal:not(.is-in) .cbar__t i{width:0!important}
.cans .railfoot{margin-top:18px}
@media (max-width:900px){.cans{padding:20px}}

/* ---------- case hero: a shape per answer ---------- */
/* Catawiki's answer is a range with a threshold, so the panel plots the five
   companies as points on one axis, with the threshold crossing every row. */
.cspan__k{font-size:12.5px;font-weight:300;color:var(--muted);margin:0 0 16px;
  display:flex;align-items:center;gap:8px}
.cspan__key{flex:none;width:2px;height:13px;background:var(--ink);border-radius:1px}

/* Iterable's answer is a distribution with a cliff at the exempt limit, so it
   draws the histogram the report draws. .cols was already in this file with
   nothing using it. */
.cols--dist{height:120px;gap:5px;margin-bottom:6px}
.cols i.is-top{background:linear-gradient(180deg,var(--accent),var(--accent-dark))}
.cols__ax{display:flex;gap:5px}
.cols__ax span{flex:1;text-align:center;font-size:11px;font-weight:300;color:var(--muted)}
.cols__note{font-size:12.5px;font-weight:300;color:var(--muted);margin:14px 0 0;line-height:1.5}
.cols__note b{font-weight:500;color:var(--ink)}
.js-reveal .reveal:not(.is-in) .cols--dist i{height:4px!important}

/* ---------- case hero: dot plot on a shared axis ---------- */
/* One row per company so every point is named, and the threshold crosses all
   of them, which is the reading: who clears 4 500 EUR and who does not. */
.dplot{display:grid;gap:10px}
.dplot__row{display:grid;grid-template-columns:minmax(64px,auto) 1fr auto;gap:12px;
  align-items:center}
.dplot__k{font-size:12.5px;font-weight:300;color:var(--muted);white-space:nowrap}
.dplot__v{font-size:13.5px;font-weight:400;color:var(--body);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.dplot__row--over .dplot__k,.dplot__row--over .dplot__v{color:var(--ink);font-weight:500}
.dplot__t{position:relative;display:block;height:12px}
.dplot__t::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--line)}
.dplot__t s{position:absolute;top:-3px;bottom:-3px;width:1px;background:#9fb2c9;
  text-decoration:none}
.dplot__t i{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;
  border-radius:50%;background:#fff;border:2px solid var(--accent);box-sizing:border-box;
  transition:left .8s cubic-bezier(.22,.61,.36,1)}
.dplot__row--over .dplot__t i{background:var(--accent);border-color:var(--accent-dark)}
.dplot__ax{display:grid;grid-template-columns:minmax(64px,auto) 1fr auto;gap:12px;
  margin-top:2px}
.dplot__ax span{grid-column:2;display:flex;justify-content:space-between}
.dplot__ax b{font-size:11px;font-weight:300;color:var(--muted)}
.js-reveal .reveal:not(.is-in) .dplot__t i{left:0!important}
@media (max-width:420px){.dplot__row{grid-template-columns:1fr auto;gap:4px 10px}
  .dplot__t{grid-column:1 / -1}
  .dplot__ax{display:none}}

/* ---------- on a phone the case panel stays on the case page ---------- */
/* Side by side the panel is the proof beside the copy. Stacked it is a whole
   screen repeating the number the copy already gives, and the case page it
   came from is one tap away in "Ver o caso completo". */
@media (max-width:1000px){
  .cs__viz{display:none}
}

/* ---------- the cards fold where their own grid collapses ---------- */
/* Side by side they are cards and the summary is only their heading, marker
   and pointer off. In one column, where reading them all cost three screens
   and a half, the heading becomes the control. The phases stack at 1000px,
   the areas and the five blocks at 700px, so each card carries its width. */
details[data-fold] > summary{list-style:none;cursor:default;display:block}
details[data-fold] > summary::-webkit-details-marker{display:none}
details[data-fold] > summary h3{margin-bottom:0}
details[data-fold][open] > summary{margin-bottom:10px}
details[data-fold] > summary .trio__k{display:block}
@media (max-width:1000px){
  details[data-fold="1000"] > summary{cursor:pointer;position:relative;padding-right:34px}
  details[data-fold="1000"] > summary::after{content:'+';position:absolute;right:2px;
    top:50%;transform:translateY(-50%);font-size:22px;font-weight:300;line-height:1;
    color:var(--accent)}
  details[data-fold="1000"][open] > summary::after{content:'−'}
}
@media (max-width:700px){
  details[data-fold="700"] > summary{cursor:pointer;position:relative;padding-right:34px}
  details[data-fold="700"] > summary::after{content:'+';position:absolute;right:2px;
    top:50%;transform:translateY(-50%);font-size:22px;font-weight:300;line-height:1;
    color:var(--accent)}
  details[data-fold="700"][open] > summary::after{content:'−'}
}

/* ---------- two light sections in a row ---------- */
/* The logo band ran into "O que fazemos" once the section between them came
   out: same background, no edge, one long grey block. */
.section--alt + .section--alt{border-top:1px solid var(--line)}

/* ---------- the automation, drawn as the map it is ---------- */
/* Follows the shape of the card the owner sent (comp.vc): capabilities in a
   tray, the work in the middle, the domains it touches in a row, the payoff at
   the bottom, and the data to the side in a dashed box. Everything named here
   is named somewhere else on this page: the six domains are the six areas of
   "Depois do diagnóstico", and the four lines of the box are what the FAQ says
   about our data. Built in HTML because at 340px an SVG shrinks its labels
   with the drawing. */
.amap{padding-top:2px;font-size:11px}
.amap__tray{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--bg-alt);
  border-radius:10px;padding:7px;align-items:center}
.amap__cap{background:#fff;border-radius:7px;padding:8px 9px}
.amap__cap b{display:block;font-size:11px;font-weight:500;color:var(--accent-dark);
  text-transform:uppercase;letter-spacing:.04em;line-height:1.2}
.amap__cap span{display:block;font-size:10.5px;font-weight:300;color:var(--muted);
  margin-top:3px;line-height:1.3}
.amap__data{border:1px dashed var(--accent);border-radius:10px;background:var(--accent-soft);
  padding:9px 10px}
.amap__data b{display:block;font-size:11px;font-weight:500;color:var(--accent-dark);
  text-transform:uppercase;letter-spacing:.04em}
.amap__data > span{display:block;font-size:10.5px;font-weight:400;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;margin-top:1px;
  padding-bottom:6px;border-bottom:1px solid rgba(3,12,26,.08)}
.amap__data ul{list-style:disc;margin:6px 0 0;padding-left:14px}
.amap__data li{font-size:10.5px;font-weight:300;color:var(--body);line-height:1.45}
.amap__edge{position:relative;height:40px}
.amap__edge::before{content:'';position:absolute;left:50%;top:1px;bottom:7px;width:1px;
  background-image:linear-gradient(180deg,transparent,#4f97e8,transparent),
    linear-gradient(var(--line),var(--line));
  background-size:100% 45%,100% 100%;background-repeat:no-repeat;
  background-position:0 -70%,0 0;transform-origin:top}
.amap__edge::after{content:'';position:absolute;left:50%;bottom:3px;width:5px;height:5px;
  margin-left:-3px;border-right:1px solid #9fb2c9;border-bottom:1px solid #9fb2c9;
  transform:rotate(45deg)}
.amap__edge > i{position:absolute;left:50%;top:0;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 6px rgba(43,124,233,.45);opacity:0}
.amap__lbl{position:absolute;left:calc(50% + 10px);top:50%;transform:translateY(-50%);
  font-size:10.5px;font-style:italic;font-weight:300;color:var(--muted);background:#fff;
  padding:0 3px;white-space:nowrap}
.amap__bar{background:var(--accent);border-radius:9px;padding:9px 12px;
  box-shadow:0 2px 10px rgba(43,124,233,.22)}
.amap__bar b{display:block;font-size:12px;font-weight:500;color:#fff;line-height:1.2}
.amap__bar span{display:block;font-size:10.5px;font-weight:300;color:rgba(255,255,255,.85);
  margin-top:2px}
.amap__chips{display:flex;flex-wrap:wrap;gap:18px 8px;justify-content:center;margin:28px 0}
.amap__chips span{position:relative;background:var(--bg-alt);border-radius:7px;padding:4px 8px;
  font-size:10.5px;font-weight:400;color:var(--muted);white-space:nowrap}
.amap__chips span::before,.amap__chips span::after{content:'';position:absolute;left:50%;
  width:1px;height:11px;
  background-image:linear-gradient(180deg,transparent,#4f97e8,transparent),
    linear-gradient(var(--line),var(--line));
  background-size:100% 60%,100% 100%;background-repeat:no-repeat;
  background-position:0 -80%,0 0}
.amap__chips span::before{top:-17px}
.amap__chips span::after{bottom:-17px}
.amap__foot{display:flex;align-items:center;gap:9px;background:var(--bg-alt);border-radius:9px;
  padding:9px 11px}
.amap__foot svg{flex:none;width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:1.5;
  stroke-linejoin:round;stroke-linecap:round}
.amap__foot b{display:block;font-size:11px;font-weight:500;color:var(--ink);
  text-transform:uppercase;letter-spacing:.04em}
.amap__foot span{display:block;font-size:10.5px;font-weight:300;color:var(--muted);
  line-height:1.35;margin-top:1px}
@media (max-width:520px){
  .amap__tray{grid-template-columns:1fr}
  .amap__chips{gap:8px 6px;margin:18px 0}
  .amap__chips span::before,.amap__chips span::after{display:none}
}

/* ---------- and the map draws itself, once, on arrival ---------- */
/* The card this follows is a Remotion player looping for ever. The copilot
   panel on this page answers once, when it reaches the screen, so this does
   the same: the tray, the data, the two edges, the work, the domains lighting
   one after another, and the payoff. About 2,6s, and every state below hangs
   off .js-reveal, so with JS off, or with reduced motion asked for, the map is
   simply there, whole. */
.js-reveal .reveal:not(.is-in) .amap__cap,
.js-reveal .reveal:not(.is-in) .amap__data,
.js-reveal .reveal:not(.is-in) .amap__bar,
.js-reveal .reveal:not(.is-in) .amap__foot,
.js-reveal .reveal:not(.is-in) .amap__chips span,
.js-reveal .reveal:not(.is-in) .amap__lbl{opacity:0}
.js-reveal .reveal:not(.is-in) .amap__edge::before{transform:scaleY(0)}
.js-reveal .reveal:not(.is-in) .amap__edge::after{opacity:0}

.reveal.is-in .amap__cap{animation:amapIn .4s cubic-bezier(.22,.61,.36,1) both}
.reveal.is-in .amap__cap:nth-child(1){animation-delay:.05s}
.reveal.is-in .amap__cap:nth-child(2){animation-delay:.14s}
.reveal.is-in .amap__cap:nth-child(3){animation-delay:.23s}
.reveal.is-in .amap__data{animation:amapIn .45s cubic-bezier(.22,.61,.36,1) .32s both}
.reveal.is-in .amap__edge::after{animation:amapFade .25s ease-out .96s both}
.reveal.is-in .amap__lbl{animation:amapFade .3s ease-out .84s both}
.reveal.is-in .reveal.is-in .amap__bar{animation:amapPop .5s cubic-bezier(.34,1.4,.64,1) 1.12s both}

@keyframes amapIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes amapFade{from{opacity:0}to{opacity:1}}
@keyframes amapLine{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes amapPop{from{opacity:0;transform:scale(.975)}to{opacity:1;transform:scale(1)}}
@keyframes amapDot{0%{opacity:0;top:0}18%{opacity:1}82%{opacity:1}100%{opacity:0;top:30px}}
@keyframes amapChip{0%{opacity:0;transform:translateY(5px)}
  55%{opacity:1;transform:none;background:var(--accent-soft);color:var(--accent-dark)}
  100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal:not(.is-in) .amap__cap,
  .js-reveal .reveal:not(.is-in) .amap__data,
  .js-reveal .reveal:not(.is-in) .amap__bar,
  .js-reveal .reveal:not(.is-in) .amap__foot,
  .js-reveal .reveal:not(.is-in) .amap__chips span,
  .js-reveal .reveal:not(.is-in) .amap__lbl{opacity:1}
  .js-reveal .reveal:not(.is-in) .amap__edge::before{transform:scaleY(1)}
  .js-reveal .reveal:not(.is-in) .amap__edge::after{opacity:1}
  .reveal.is-in .amap__cap,.reveal.is-in .amap__data,.reveal.is-in .amap__bar,
  .reveal.is-in .amap__foot,.reveal.is-in .amap__chips span,.reveal.is-in .amap__lbl,
  .reveal.is-in .amap__edge::before,.reveal.is-in .amap__edge::after{animation:none}
  .amap__edge > i{display:none}
}

/* ---------- and then the map circulates ---------- */
/* Asked for by the owner: "pulse circular, para dar a ideia de sistema vivo".
   Each wire is a grey line with a bright segment running along it -- two
   stacked gradients, and only background-position moves, so the whole thing is
   one composited property. The segments fire in the order the work flows, one
   circuit every 4,6s: the edges into the bar, the wires into the six domains,
   the domains lighting, the wires into the base, the base breathing. Low
   contrast on purpose: a panel that flashes beside the copy steals the
   reading. */
.reveal.is-in .amap__edge::before{animation:amapLine .36s ease-out .6s both,
  amapWire 4.6s linear 2.6s infinite}
.reveal.is-in .amap__edge > i{animation:amapDot .58s ease-in-out .6s both,
  amapDotLoop 4.6s ease-in-out 2.6s infinite}
.reveal.is-in .amap__wire{animation:amapWireH 4.6s linear 2.9s infinite}
.reveal.is-in .amap__chips span::before{animation:amapWire 4.6s linear infinite}
.reveal.is-in .amap__chips span::after{animation:amapWire 4.6s linear infinite}
.reveal.is-in .amap__chips span{animation:amapChip .5s ease-out both,
  amapGlow 4.6s ease-in-out infinite}
.reveal.is-in .amap__chips span:nth-child(1){animation-delay:1.5s,3.5s}
.reveal.is-in .amap__chips span:nth-child(2){animation-delay:1.6s,3.56s}
.reveal.is-in .amap__chips span:nth-child(3){animation-delay:1.7s,3.62s}
.reveal.is-in .amap__chips span:nth-child(4){animation-delay:1.8s,3.68s}
.reveal.is-in .amap__chips span:nth-child(5){animation-delay:1.9s,3.74s}
.reveal.is-in .amap__chips span:nth-child(6){animation-delay:2s,3.8s}
.reveal.is-in .amap__chips span:nth-child(1)::before{animation-delay:3.15s}
.reveal.is-in .amap__chips span:nth-child(2)::before{animation-delay:3.21s}
.reveal.is-in .amap__chips span:nth-child(3)::before{animation-delay:3.27s}
.reveal.is-in .amap__chips span:nth-child(4)::before{animation-delay:3.33s}
.reveal.is-in .amap__chips span:nth-child(5)::before{animation-delay:3.39s}
.reveal.is-in .amap__chips span:nth-child(6)::before{animation-delay:3.45s}
.reveal.is-in .amap__chips span:nth-child(1)::after{animation-delay:3.85s}
.reveal.is-in .amap__chips span:nth-child(2)::after{animation-delay:3.91s}
.reveal.is-in .amap__chips span:nth-child(3)::after{animation-delay:3.97s}
.reveal.is-in .amap__chips span:nth-child(4)::after{animation-delay:4.03s}
.reveal.is-in .amap__chips span:nth-child(5)::after{animation-delay:4.09s}
.reveal.is-in .amap__chips span:nth-child(6)::after{animation-delay:4.15s}
.reveal.is-in .amap__foot{animation:amapIn .45s cubic-bezier(.22,.61,.36,1) 2.2s both,
  amapBreathe 4.6s ease-in-out 4.3s infinite}

@keyframes amapWireH{0%{background-position:-70% 0,0 0}
  26%{background-position:170% 0,0 0}100%{background-position:170% 0,0 0}}
@keyframes amapWire{0%{background-position:0 -70%,0 0}
  26%{background-position:0 170%,0 0}100%{background-position:0 170%,0 0}}
@keyframes amapDotLoop{0%{opacity:0;top:0}3%{opacity:.85}
  13%{opacity:.85;top:30px}17%{opacity:0;top:30px}100%{opacity:0;top:30px}}
@keyframes amapGlow{0%,100%{background:var(--bg-alt);color:var(--muted)}
  5%{background:var(--accent-soft);color:var(--accent-dark)}
  22%{background:var(--accent-soft);color:var(--accent-dark)}}
@keyframes amapBreathe{0%,100%{background:var(--bg-alt)}
  8%{background:#eaf2fd}25%{background:#eaf2fd}}
@media (prefers-reduced-motion:reduce){
  .reveal.is-in .amap__edge > i,.reveal.is-in .amap__edge::before,
  .reveal.is-in .amap__chips span,.reveal.is-in .amap__chips span::before,
  .reveal.is-in .amap__chips span::after,.reveal.is-in .amap__foot,
  .reveal.is-in .amap__wire{animation:none}
}

/* ---------- the map, laid out as the card it follows ---------- */
/* Seen running, theirs puts the data beside the work, joined on the horizontal
   by a dashed line with a verb on it, and the bar stops short of the full
   width. The domains and the base then run under both columns. */
.amap{display:grid;grid-template-columns:minmax(0,1fr) 158px;column-gap:20px;row-gap:0;
  align-items:start}
.amap__tray{grid-column:1;grid-row:1}
.amap__data{grid-column:2;grid-row:1 / span 3;margin-top:0}
.amap__edge{grid-column:1;grid-row:2}
.amap__bar{grid-column:1;grid-row:3;position:relative;width:76%;min-width:230px}
.amap__chips{grid-column:1 / -1;grid-row:4}
.amap__foot{grid-column:1 / -1;grid-row:5}
.amap__wire{position:absolute;left:100%;top:50%;width:calc(24% + 20px);height:1px;
  background-image:linear-gradient(90deg,transparent,#4f97e8,transparent),
    repeating-linear-gradient(90deg,var(--line) 0 3px,transparent 3px 6px);
  background-size:45% 100%,100% 100%;background-repeat:no-repeat;
  background-position:-70% 0,0 0}
.amap__wire span{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
  font-size:10.5px;font-style:italic;font-weight:300;color:var(--muted);white-space:nowrap}
@media (max-width:520px){
  .amap{grid-template-columns:1fr;column-gap:0}
  .amap__bar{width:100%;min-width:0}
  .amap__tray{grid-row:1}
  .amap__data{grid-column:1;grid-row:2;margin-top:10px}
  .amap__edge{grid-row:3}
  .amap__bar{grid-row:4}
  .amap__chips{grid-row:5}
  .amap__foot{grid-row:6}
  .amap__wire{display:none}
}

/* the third verb, on the way down to the base, as on the card this follows */
.amap__chips{position:relative}
.amap__read{position:absolute;left:calc(50% + 10px);bottom:-19px;font-size:10.5px;
  font-style:italic;font-weight:300;color:var(--muted);background:#fff;padding:0 3px}
@media (max-width:520px){.amap__read{display:none}}

/* ---------- the rule at the foot of each phase, back on the same line ---------- */
/* The cards are <details> since the fold, and Chromium renders their content
   inside ::details-content, which broke the margin-top:auto that held the rule
   at the bottom. The box becomes the column the card used to be. */

/* the details grows, so the rule reaches the bottom without an auto margin */
details.trio__d{flex:1 1 auto;min-height:0}
.trio__c > .trio__f{margin-top:auto}

/* ---------- the three phases keep the same gap above the rule ---------- */
/* Measured on a 1169px shot: rules level, but the white above them ran from
   21px to 49px because the paragraphs are 4 and 5 lines. Side by side, the
   paragraph reserves the height of the longest. */
@media (min-width:1001px){
  .trio__d > p{min-height:7.8em}
}

/* ---------- the FAQ closes nearer the last section ---------- */
#faq{padding-bottom:48px}
@media (max-width:700px){#faq{padding-bottom:32px}}