/* v3: George's brief 2026-10-11. Dark #0E1211, accent #55E6A5, Inter, rounded corners. Standalone (no base.css).
   Refinement pass 2026-10-12: fewer boxes, hairlines, weight 500 headings with tight tracking,
   green in the hero and as a signal only, second clauses of section headings in muted grey, more air. */
:root{
  /* LIVE hailotalent.com tokens (George 2026-10-19: "a version of the live site"), measured from www.hailotalent.com */
  --bg:#121516;--bg-alt:#121516;--surface:#1C1F21;--surface-2:#262A2B;
  --line:#303436;--line-strong:#3C4144;--hover:rgba(242,242,242,.04);
  --ink:#F2F2F2;--ink-2:#878E92;--ink-3:#9AA1A5;
  --accent:#55E6A5;--accent-ink:#121516;--accent-soft:rgba(85,230,165,.08);
  --radius:12px;--radius-sm:12px;
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
  --glow:inset 0 0 0 1px rgba(85,230,165,.15),0 0 20px -5px rgba(85,230,165,.1);
  --glow-hover:inset 0 0 0 1px rgba(85,230,165,.3),0 0 30px -5px rgba(85,230,165,.15);
  /* product illustrations */
  --ui-bg:#1C1F21;--ui-ink:var(--ink);--ui-ink-2:var(--ink-2);--ui-line:var(--line);--ui-chip:rgba(242,242,242,.06);--ui-inset:#16191A;
  --live:var(--accent);--live-bg:var(--accent-soft);--live-ink:var(--accent);
  --bar-bg:rgba(242,242,242,.06);--bar-fill:rgba(242,242,242,.28);--wave:var(--accent);
  --bubble-cand:rgba(85,230,165,.12);--bubble-cand-ink:var(--ink);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"cv11","ss01"}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1em}
button{font:inherit;color:inherit}
h1,h2,h3{font-weight:500;letter-spacing:-.035em;line-height:1.04;margin:0 0 .45em;text-wrap:balance}
h1{font-size:clamp(42px,6vw,84px);letter-spacing:-.05em}
h2{font-size:clamp(30px,3.6vw,50px);letter-spacing:-.04em}
h3{font-size:18.5px;line-height:1.3;letter-spacing:-.015em}
strong,b,.num,.price,.statrow strong,.glance strong{font-variant-numeric:tabular-nums}
.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 24px}  /* the live site's measure: 1280px, 24px gutters (George 2026-10-22) */
.wrap.narrow{max-width:760px}
.hl{color:var(--accent)}
.muted{color:var(--ink-2)}
.mt{margin-top:48px}
.note{font-size:13.5px;color:var(--ink-3);margin-top:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:100;background:var(--ink);color:var(--bg);padding:8px 12px;border-radius:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.ic{flex:none}

/* headings: the second clause of a section heading is muted, green stays in the hero */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--ink-2);margin:0 0 20px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.sec-head{max-width:800px;margin-bottom:clamp(40px,5vw,64px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{margin-bottom:.35em}
.sec-head h2 .hl,.problem h2 .hl,.band h2 .hl,.closing h2 .hl{color:var(--ink-3)}
.lede{font-size:clamp(17px,1.3vw,19px);color:var(--ink-2);max-width:60ch;line-height:1.6}
.lede a{color:var(--ink)}

/* buttons */
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;align-items:center}
.ctas.center{justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 22px;border-radius:999px;font-weight:500;font-size:15.5px;text-decoration:none;border:1px solid transparent;
  transition:transform .15s ease,background .2s,border-color .2s,color .2s;white-space:nowrap;cursor:pointer;line-height:1.2;font-family:var(--font)}
.btn:hover{transform:translateY(-1px)}
.btn .ic{transition:transform .2s}.btn:hover .ic{transform:translateX(3px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:rgba(236,241,238,.5)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(14,18,17,.8);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:20px;height:68px}
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex:none}
.logo .mark{display:block}
.wm{font-size:18px;line-height:1;font-weight:300;letter-spacing:.36em;margin-right:-.36em}
.nav-links{display:flex;gap:2px;margin-left:24px;align-items:center}
.nl,.dd-btn{text-decoration:none;font-size:14.5px;color:var(--ink-2);padding:8px 12px;border-radius:999px;transition:color .2s,background .2s;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-weight:500}
.nl:hover,.nl[aria-current],.dd-btn:hover,.dd.is-current .dd-btn,.dd:focus-within .dd-btn{color:var(--ink)}
.nl[aria-current],.dd.is-current .dd-btn{background:var(--hover)}
.dd{position:relative}
.dd-btn .ic{transition:transform .2s;opacity:.6}.dd:hover .dd-btn .ic,.dd.open .dd-btn .ic{transform:rotate(180deg)}
.dd-panel{position:absolute;top:calc(100% + 10px);left:-12px;width:320px;padding:8px;border-radius:16px;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s,transform .18s,visibility .18s}
.dd-panel::before{content:"";position:absolute;inset:-12px 0 auto;height:12px}
.dd:hover .dd-panel,.dd:focus-within .dd-panel,.dd.open .dd-panel{opacity:1;visibility:visible;transform:none}
.dd-panel a{display:block;padding:12px 14px;border-radius:10px;text-decoration:none}
.dd-panel a:hover{background:var(--hover)}
.dd-panel strong{display:block;font-size:14.5px;font-weight:500}
.dd-panel span{display:block;font-size:13.5px;color:var(--ink-2)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav-cta .btn{padding:10px 18px;font-size:14.5px}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line-strong);background:transparent;border-radius:12px;cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:1.6px;background:var(--ink);transition:transform .25s}
.burger span:first-child{top:17px}.burger span:last-child{top:25px}
.burger[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.burger[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.mnav{display:none}
@media (max-width:1060px){
  .nav-links,.nav-cta{display:none}.burger{display:block}
  .mnav{flex-direction:column;padding:8px 16px 24px;border-top:1px solid var(--line);background:var(--bg);max-height:calc(100vh - 68px);overflow:auto}
  .mnav.open{display:flex}
  .mnav a:not(.btn){text-decoration:none;padding:13px 0;border-bottom:1px solid var(--line);font-size:17px}
  .mnav-h{margin:18px 0 2px;font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
  .mnav .btn{margin-top:20px}
}

/* sections */
.sec{padding:clamp(88px,11vw,152px) 0}
.sec-tight{padding-top:clamp(48px,6vw,80px)}
.alt{background:var(--bg-alt);border-block:1px solid var(--line)}
.sec:not(.alt)+.sec:not(.alt){padding-top:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.split>*{min-width:0}
.grid{display:grid;gap:16px;list-style:none;padding:0;margin:0}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px;position:relative}
.card p{color:var(--ink-2)}
.card h3{margin-bottom:.5em}
.card>.btn{margin-top:20px}
.num{display:block;font-size:13px;font-weight:500;color:var(--ink-3);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:24px;font-size:14.5px;font-weight:500;color:var(--ink)}
.more .ic{color:var(--accent);transition:transform .2s}
a:hover>.more .ic{transform:translateX(3px)}
.ic-box{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line-strong);color:var(--accent);margin-bottom:24px;flex:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chips-k{font-size:13px;color:var(--ink-3);margin-right:8px}
.chip{display:inline-block;padding:6px 13px;border-radius:999px;border:1px solid var(--line-strong);font-size:14px;color:var(--ink-2);text-decoration:none}
.chip-link:hover{color:var(--ink);border-color:rgba(236,241,238,.4)}
.checks{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:11px}
.checks li{display:flex;gap:11px;align-items:flex-start;color:var(--ink-2);font-size:15px;line-height:1.45}
.checks .ic{color:var(--accent);margin-top:2px}

/* home hero: copy left, product right */
.hero{padding:clamp(72px,9vw,128px) 0 0;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -20% auto 30%;height:110%;background:radial-gradient(45% 45% at 60% 35%,rgba(85,230,165,.10),transparent 70%);pointer-events:none}
.hero-in{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero-in>*{min-width:0}
.hero h1{font-size:clamp(48px,6.6vw,96px);line-height:.98;margin-bottom:28px}
.hero h1 .hl{color:var(--accent)}
.hero-sub{font-size:clamp(18px,1.45vw,20.5px);color:var(--ink-2);max-width:48ch;line-height:1.55;margin:0}
.hero .ctas{margin-top:40px}

/* inner page hero, with an optional aside */
.phero{padding:clamp(80px,10vw,136px) 0 clamp(40px,5vw,64px)}
.phero h1{max-width:15ch;font-size:clamp(40px,5.4vw,72px)}
.phero h1 .hl{color:var(--accent)}
.phero .lede{font-size:clamp(18px,1.4vw,20px)}
.phero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,96px);align-items:center}
.phero-in>*{min-width:0}
.phero.has-aside h1{max-width:14ch}

/* at-a-glance panel and cost chart */
.glance{border-top:1px solid var(--line-strong);padding-top:20px}
.glance-k{font-size:13px;color:var(--ink-3);margin:0 0 6px}
.glance ul{list-style:none;padding:0;margin:0}
.glance li{display:grid;grid-template-columns:136px 1fr;gap:20px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.glance li strong{font-size:clamp(24px,2.2vw,30px);font-weight:500;letter-spacing:-.04em;line-height:1}
.glance li span{color:var(--ink-2);font-size:14.5px;line-height:1.4}
.glance-note{font-size:13px;color:var(--ink-3);margin:14px 0 0}
.glance .cc li{grid-template-columns:72px 1fr auto;gap:16px;align-items:center;padding:18px 0}
.cc-n{font-size:14.5px;color:var(--ink-2)}
.cc li.us .cc-n{color:var(--ink);font-weight:500}
.cc-bar{display:block;height:10px;border-radius:99px;background:var(--bar-bg);overflow:hidden}
.cc-bar i{display:block;height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--c,rgba(236,241,238,.45)) 0 var(--lo),var(--c2,rgba(236,241,238,.2)) var(--lo) var(--hi),transparent var(--hi));
  transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .2s}
.cc li.us .cc-bar i{--c:var(--accent);--c2:rgba(85,230,165,.4)}
.js .reveal:not(.in) .cc-bar i{transform:scaleX(0)}
.cc b{font-size:14.5px;font-weight:500;white-space:nowrap}
.cc li.us b{color:var(--accent)}

/* trust and proof: hairline stats, no box */
.trust{display:flex;align-items:center;gap:clamp(24px,4vw,56px);flex-wrap:wrap;margin-top:clamp(72px,8vw,112px);padding:28px 0;border-top:1px solid var(--line)}
.trust p{margin:0;font-size:14px;color:var(--ink-3)}
.logos{display:flex;align-items:center;gap:clamp(32px,5vw,64px);flex-wrap:wrap}
.logos img{height:26px;width:auto;opacity:.75}
.logos .lg-lendo{height:30px}
.statrow{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr)}
.statrow li{padding:4px 28px;border-left:1px solid var(--line)}
.statrow li:first-child{padding-left:0;border-left:0}
.statrow strong{display:block;font-size:clamp(32px,3.4vw,46px);font-weight:500;letter-spacing:-.045em;line-height:1;margin-bottom:12px}
.statrow span{display:block;color:var(--ink-2);font-size:14.5px;line-height:1.4;max-width:24ch}
.statrow-hero{border-top:1px solid var(--line);padding:36px 0 clamp(8px,2vw,24px)}
.statrow-hero strong{color:var(--accent)}
.statrow-case{border-top:1px solid var(--line);padding-top:36px;margin-top:clamp(48px,6vw,72px)}

/* product illustrations */
.ui{background:var(--ui-bg);color:var(--ui-ink);border:1px solid var(--ui-line);border-radius:var(--radius);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.02) inset;font-size:14px;line-height:1.4}
.ui-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--ui-line)}
.ui-head strong{display:block;font-size:15.5px;font-weight:500;letter-spacing:-.01em}
.ui-k{display:block;font-size:12px;color:var(--ink-3);margin-bottom:3px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--ui-chip);font-size:12px;font-weight:500;white-space:nowrap;color:var(--ink-2)}
.pill-live{background:var(--live-bg);color:var(--live-ink)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--live);flex:none;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(85,230,165,.5)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.stage{position:relative;padding:8px 0 72px}
.ui-main{position:relative;z-index:1;margin-right:56px}
.pl{list-style:none;margin:0;padding:16px 20px 18px;display:grid;gap:12px}
.pl li{display:grid;grid-template-columns:136px 1fr 34px;align-items:center;gap:12px}
.pl-l{font-size:13.5px;color:var(--ui-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-bar{height:8px;border-radius:99px;background:var(--bar-bg);overflow:hidden}
.pl-bar i{display:block;height:100%;width:var(--w);border-radius:99px;background:var(--bar-fill);transform-origin:left;transform:scaleX(var(--s,1));transition:transform 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 90ms + 200ms)}
.pl li:last-child .pl-bar i{background:var(--accent)}
.pl li:last-child .pl-n{color:var(--accent)}
.pl-n{text-align:right;font-weight:500}
.js .reveal:not(.in) .pl-bar i{--s:0}
.ui-foot{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--ui-line);color:var(--ui-ink-2);font-size:13px}
.ui-sep{width:1px;height:14px;background:var(--line-strong)}
.ui-float{position:absolute;z-index:2;padding:14px 16px;background:#18211E}
.ui-finn{right:-24px;bottom:0;width:232px}
.uf-top{display:flex;align-items:center;gap:8px;font-weight:500;font-size:13px}
.uf-bot{display:flex;gap:6px;margin-top:10px}.uf-bot span{font-size:11.5px;padding:3px 8px;border-radius:99px;background:var(--ui-chip);color:var(--ui-ink-2)}
.mini-wave,.fd-wave{display:flex;align-items:center;gap:3px;height:34px;margin-top:10px}
.mini-wave i,.fd-wave i{flex:1;height:30%;border-radius:3px;background:var(--wave);opacity:.85;animation:talk 1.5s ease-in-out infinite;animation-delay:calc(var(--i) * -.13s)}
.mini-wave i:nth-child(3n),.fd-wave i:nth-child(3n){animation-duration:1.1s}.mini-wave i:nth-child(4n),.fd-wave i:nth-child(4n){animation-duration:1.9s}
@keyframes talk{0%,100%{height:18%}50%{height:95%}}
.ui-finn-demo .fd-wave{margin:16px 20px 6px;height:40px}
.fd-msgs{list-style:none;margin:0;padding:8px 20px 4px;display:flex;flex-direction:column;gap:10px;min-height:236px}
.msg{max-width:86%;transition:opacity .45s,transform .45s}
.msg p{margin:0;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.45}
.msg .who{display:block;font-size:11.5px;color:var(--ink-3);margin:0 0 3px 4px}
.msg-finn p{background:var(--ui-chip);border-top-left-radius:4px}
.msg-cand{align-self:flex-end;display:flex;flex-direction:column;align-items:flex-end}
.msg-cand p{background:var(--bubble-cand);color:var(--bubble-cand-ink);border-top-right-radius:4px}
.js [data-finn-demo].running .msg:not(.on){opacity:0;transform:translateY(8px)}
.fd-score{margin:12px;padding:14px 14px 12px;border-radius:12px;background:var(--ui-inset);border:1px solid var(--line);transition:opacity .5s}
.js [data-finn-demo].running:not(.scored) .fd-score{opacity:.25}
.fd-score-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:13px;color:var(--ui-ink-2)}
.fd-score-h strong{font-size:12px;font-weight:500;padding:4px 10px;border-radius:99px;background:var(--accent);color:var(--accent-ink)}
.fd-score ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.fd-score li{display:grid;grid-template-columns:1fr 26px;grid-template-rows:auto auto;gap:4px 8px;font-size:12.5px;align-items:center}
.fd-score li span:first-child{color:var(--ui-ink-2)}
.fd-score li b{grid-row:1;grid-column:2;text-align:right;font-weight:500}
.sc-bar{grid-column:1/-1;height:5px;border-radius:9px;background:var(--bar-bg);overflow:hidden}
.sc-bar i{display:block;height:100%;width:var(--v);background:var(--accent);opacity:.75;border-radius:9px;transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.js [data-finn-demo].running:not(.scored) .sc-bar i{transform:scaleX(0)}

/* where do you stand: three entry cards with a small cue */
.entries{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.entry{display:flex;flex-direction:column;text-decoration:none;padding:12px 12px 28px;border-radius:var(--radius);border:1px solid var(--line);transition:border-color .2s,background .2s}
.entry:hover{border-color:var(--line-strong);background:var(--hover)}
.entry h3{font-size:22px;margin:28px 16px 10px}
.entry p{color:var(--ink-2);margin:0 16px;font-size:15.5px}
.entry .more{margin:0 16px}
.cue{height:152px;border-radius:12px;background:var(--bg-alt);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.cue-k{font-size:12.5px;color:var(--ink-3)}
.cue-seats{display:grid;grid-template-columns:repeat(5,22px);gap:8px}
.cue-seats i{width:22px;height:22px;border-radius:7px;border:1px dashed var(--line-strong)}
.cue-seats i.on{border:0;background:var(--accent);opacity:.85}
.cue-cities{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:500}
.cue-cities i{display:block;width:84px;height:1px;background:linear-gradient(90deg,var(--accent),rgba(85,230,165,.15));position:relative}
.cue-cities i::before,.cue-cities i::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.cue-cities i::before{left:-3px}.cue-cities i::after{right:-3px;opacity:.35}
.cue-org{display:flex;flex-direction:column;align-items:center;gap:10px}
.cue-org b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:600}
.cue-org span{display:flex;gap:10px;position:relative;padding-top:10px}
.cue-org span::before{content:"";position:absolute;top:0;left:13px;right:13px;height:1px;background:var(--line-strong)}
.cue-org i{width:26px;height:26px;border-radius:50%;border:1px dashed var(--line-strong)}

/* objections: quote left, answer right, on hairlines */
.objs{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.objs li{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);padding:32px 0;border-bottom:1px solid var(--line);align-items:baseline}
.obj-q{font-size:clamp(20px,1.9vw,26px);font-weight:500;letter-spacing:-.025em;line-height:1.3;margin:0}
.obj-a{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2);margin:0;font-size:16.5px}
.obj-a .ic{color:var(--accent);margin-top:4px}

/* how it works: steps left, sticky Finn demo right */
.how{display:grid;grid-template-columns:1fr minmax(0,460px);gap:clamp(40px,7vw,112px);align-items:start}
.how>*{min-width:0}
.steplist{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.steplist li{display:grid;grid-template-columns:56px 1fr;gap:4px 16px;padding:28px 0;border-bottom:1px solid var(--line)}
.steplist .num{padding-top:4px}
.steplist h3{font-size:21px;margin-bottom:6px}
.steplist p{color:var(--ink-2);margin:0;font-size:15.5px}
.steplist .out{grid-column:2;display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:13.5px;color:var(--ink)}
.steplist .out::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.how-art{position:sticky;top:104px}
.how-cap{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:20px}
.how-cap p{margin:0;font-size:14.5px;color:var(--ink-2)}
.how-cap .hear{margin-top:12px}

/* hairline columns, not boxes */
.cols2,.cols3,.cols4{list-style:none;padding:0;margin:0;display:grid;gap:clamp(24px,3vw,40px)}
.cols2{grid-template-columns:repeat(2,1fr)}.cols3{grid-template-columns:repeat(3,1fr)}.cols4{grid-template-columns:repeat(4,1fr)}
.cols2>li,.cols3>li,.cols4>li{border-top:1px solid var(--line-strong);padding-top:28px}
.cols2 h3,.cols3 h3,.cols4 h3{font-size:19px;margin-bottom:8px}
.cols2 p,.cols3 p,.cols4 p{color:var(--ink-2);margin:0;font-size:15.5px}
.cols2 .num,.cols3 .num{margin-bottom:28px}
.cols3>li>h3:first-child{margin-top:0}

/* case study */
.case-top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,4vw,48px)}
.case-top .eyebrow{margin:0}
.q-logo{height:26px;width:auto;opacity:.8}
.case{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,72px);align-items:center}
.case.has-video{grid-template-columns:1.35fr 1fr}
.case>*{min-width:0}
.quote{margin:0}
.quote blockquote{margin:0 0 32px;font-size:clamp(24px,2.5vw,36px);line-height:1.3;letter-spacing:-.03em;font-weight:400;color:var(--ink);max-width:30ch;text-wrap:pretty}
.case:not(.has-video) .quote blockquote{max-width:34ch}
.quote figcaption strong{display:block;font-weight:500}
.quote figcaption span{color:var(--ink-2);font-size:15px}
.quote-wide{border-top:1px solid var(--line-strong);padding-top:36px}
.quote-wide .q-logo{margin-bottom:28px}
.quote-wide blockquote{font-size:clamp(19px,1.6vw,23px);max-width:60ch;line-height:1.5;letter-spacing:-.015em}
.video-slot{border:1px dashed var(--line-strong);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;justify-content:center;color:var(--ink-2);aspect-ratio:16/10}
.video-slot .ic{color:var(--accent);margin-bottom:6px}
.video-slot strong{color:var(--ink);font-weight:500}
.video-slot span{font-size:14px}
.case-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:40px}

/* ecosystem */
.ecos{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,40px)}
.eco{display:flex;flex-direction:column;border-top:1px solid var(--line-strong);padding-top:28px;text-decoration:none}
.eco-n{font-size:13px;color:var(--ink-3);margin-bottom:28px;font-variant-numeric:tabular-nums}
.eco h3{font-size:22px;margin-bottom:8px}
.eco p{color:var(--ink-2);margin:0;font-size:15.5px}
a.eco:hover h3{color:var(--accent)}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tier{display:flex;flex-direction:column;padding:32px;border:1px solid var(--line);border-radius:var(--radius)}
.tier-mid{border-color:rgba(85,230,165,.35);background:linear-gradient(180deg,rgba(85,230,165,.06),transparent 55%)}
.tier h3{font-size:17px;color:var(--ink-2);font-weight:500}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;font-size:clamp(44px,4vw,56px);font-weight:500;letter-spacing:-.05em;line-height:1;color:var(--ink);margin:10px 0 18px}
.price .cur{font-size:15px;letter-spacing:0;color:var(--ink-3);font-weight:400}
.price .per{flex-basis:100%;font-size:14px;letter-spacing:0;color:var(--ink-3);font-weight:400;margin-top:10px}
.price-sm{font-size:clamp(34px,3vw,42px)}
.tier-b{color:var(--ink-2);font-size:15.5px;margin:0}
.tier .checks{padding-top:20px;margin-top:22px;border-top:1px solid var(--line)}
.tier-cta{margin-top:auto;padding-top:32px}
.tier-cta .btn{width:100%}
.price-foot{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(24px,5vw,72px);margin-top:48px;padding-top:36px;border-top:1px solid var(--line)}
.price-line{margin:0;font-size:clamp(20px,1.8vw,24px);font-weight:500;letter-spacing:-.025em;line-height:1.3}
.price-foot .checks{margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 32px}
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px)}
.offer{border-top:1px solid var(--line-strong);padding-top:28px}
.offer h3{font-size:17px;color:var(--ink-2);font-weight:500}
.inc{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,3vw,40px)}
.inc li{display:flex;gap:16px;align-items:flex-start;padding:24px 0;border-top:1px solid var(--line)}
.inc .ic-box{margin:0;width:34px;height:34px;border-radius:10px}
.inc h3{font-size:16.5px;margin-bottom:4px}
.inc p{color:var(--ink-2);font-size:14.5px;margin:0}
.offer-line{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:48px;padding:24px 28px;border:1px solid var(--line-strong);border-radius:var(--radius)}
.offer-line p{margin:0;font-size:18px;font-weight:500;letter-spacing:-.015em}

/* solution pages */
.problem{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:start;padding-top:40px;border-top:1px solid var(--line)}
.problem>*{min-width:0}
.problem h2{font-size:clamp(28px,3vw,42px);margin:0}
.problem .lede{margin:0 0 1em}
.problem .lede:last-child{margin-bottom:0}

/* academy */
.routes{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.route{padding:clamp(28px,3.5vw,40px);border:1px solid var(--line);border-radius:var(--radius)}
.route .eyebrow{margin-bottom:14px}
.route-len{font-size:clamp(36px,3.6vw,50px);letter-spacing:-.05em;margin-bottom:10px}
.mods{list-style:none;padding:0;margin:28px 0;border-top:1px solid var(--line)}
.mods li{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.mods span{color:var(--ink-3);font-size:14px}
.outcome{color:var(--ink);font-weight:500;margin:0}
.outcome span{display:block;font-size:13px;color:var(--ink-3);font-weight:400;margin-bottom:4px}
.band{display:flex;justify-content:space-between;align-items:center;gap:32px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);padding:clamp(32px,4vw,48px) 0}
.band h2{font-size:clamp(26px,2.6vw,36px)}
.band .lede{margin:0}

/* finn */
.lang-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.lang-grid li{padding:18px 0;border-bottom:1px solid var(--line);font-weight:500;font-size:17px}
.lang-grid li:nth-child(-n+2)::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:10px;vertical-align:middle}
.hear{display:inline-flex;align-items:center;gap:12px;margin-top:20px;padding:6px 16px 6px 6px;border-radius:999px;border:1px solid var(--line-strong);background:none;color:inherit;font:inherit;cursor:pointer;text-align:left;transition:border-color .2s}
.hear:hover{border-color:var(--accent)}
.hear img{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block}
.hear strong{display:block;font-size:14px;font-weight:500}.hear small{display:block;font-size:12px;color:var(--ink-2)}
.hear .ic{color:var(--accent)}
.hear-dlg{padding:0;border:0;border-radius:20px;background:#000;width:min(440px,calc(100vw - 32px));overflow:hidden}
.hear-dlg::backdrop{background:rgba(5,8,7,.7);backdrop-filter:blur(4px)}
.hear-dlg video{display:block;width:100%;aspect-ratio:1;background:#000}
.hear-dlg form{position:absolute;top:10px;right:10px;margin:0}
.hear-x{width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;cursor:pointer}
.page-finn .statrow{margin-top:8px}

/* comparison table */
.tbl-wrap{overflow-x:auto;border-top:1px solid var(--line-strong)}
.cmp{width:100%;border-collapse:collapse;min-width:560px}
.cmp th,.cmp td{text-align:left;padding:20px 22px;border-bottom:1px solid var(--line);font-size:15.5px;vertical-align:top}
.cmp th:first-child{padding-left:0}
.cmp thead th{font-size:13px;color:var(--ink-3);font-weight:500}
.cmp tbody th{font-weight:400;color:var(--ink-3);width:24%}
.cmp td{color:var(--ink-2)}
.cmp .us{color:var(--ink);font-weight:500;background:rgba(85,230,165,.045)}
.cmp thead .us{color:var(--accent)}

/* faq */
.accs{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.acc{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;display:flex;align-items:center;gap:16px;padding:24px 0;cursor:pointer;font-weight:500;font-size:17.5px;line-height:1.35;letter-spacing:-.01em}
.acc summary::-webkit-details-marker{display:none}
.acc summary .ic{margin-left:auto;transition:transform .25s;color:var(--ink-3)}
.acc[open] summary .ic{transform:rotate(45deg);color:var(--accent)}
.acc p{margin:0 0 24px;color:var(--ink-2);padding-right:40px}

/* closing */
.closing{padding:clamp(64px,8vw,104px) 0 clamp(88px,11vw,152px)}
.closing-in{text-align:center;padding:clamp(56px,8vw,112px) 24px;border-radius:28px;border:1px solid var(--line);
  background:radial-gradient(55% 90% at 50% 0%,rgba(85,230,165,.10),transparent 70%),var(--bg-alt)}
.closing h2{max-width:18ch;margin:0 auto}
.closing-mail{margin:20px 0 0;color:var(--ink-3);font-size:15px}
.closing-mail a{color:var(--ink-2)}
.page-careers .closing,.page-contact .closing{display:none}

/* about, careers, forms */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.person{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.person .ph{aspect-ratio:4/4.4;overflow:hidden;background:var(--bg-alt)}
.person .ph img{width:100%;height:100%;object-fit:cover;object-position:center top}
.pi{padding:16px 18px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.pi h3{margin:0 0 2px;font-size:16.5px}.pi p{margin:0;color:var(--ink-2);font-size:14px}
.pi a{color:var(--ink-3)}.pi a:hover{color:var(--ink)}
.jobs{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.job{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}
.job h3{font-size:clamp(20px,1.9vw,24px);margin-bottom:8px}
.job-meta{margin:0;display:flex;gap:8px;flex-wrap:wrap}
.job-meta span{font-size:13.5px;padding:3px 10px;border-radius:99px;border:1px solid var(--line);color:var(--ink-2)}
.form{display:flex;flex-direction:column;gap:16px;padding:clamp(24px,4vw,40px)}
.form h3{font-size:26px;margin:0}
.form>.muted{margin:-8px 0 4px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500}
.form input,.form textarea{font:inherit;font-weight:400;font-size:16px;padding:13px 14px;border-radius:12px;border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(85,230,165,.2)}
.form .btn{align-self:flex-start}
.hp{position:absolute;left:-9999px}
.form-note{font-size:13.5px;color:var(--ink-2);margin:0;padding:10px 12px;border-radius:8px;background:var(--hover)}
.form-status{margin:0;font-size:14.5px;font-weight:500}.form-status:empty{display:none}
.form-status a{color:var(--accent)}
.prose{max-width:760px}.prose h2{font-size:24px;margin:44px 0 12px;letter-spacing:-.015em}.prose p{color:var(--ink-2)}

/* footer */
.foot{border-top:1px solid var(--line);padding:80px 0 32px;font-size:15px}
.foot-top{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
.foot-brand p{color:var(--ink-2);margin:20px 0 0;max-width:36ch;font-size:14.5px}
.foot-meta a{color:var(--ink)}
.social{display:inline-flex;margin-top:18px;color:var(--ink-2)}.social:hover{color:var(--ink)}
.foot h3{font-size:13px;letter-spacing:0;color:var(--ink-3);margin-bottom:16px;font-weight:500}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.foot ul a{text-decoration:none;color:var(--ink-2)}.foot ul a:hover{color:var(--ink)}
.foot-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:64px;padding-top:24px;border-top:1px solid var(--line);color:var(--ink-3);font-size:13.5px}
.foot-bot a{color:var(--ink-3);text-decoration:none;display:inline-flex;align-items:center;gap:6px}.foot-bot a:hover{color:var(--ink)}

/* preview ribbon (preview builds only) */
.pv{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:80;display:flex;gap:4px;align-items:center;padding:5px 5px 5px 14px;border-radius:999px;
  background:rgba(8,10,9,.92);border:1px solid var(--line-strong);font-size:13px;white-space:nowrap}
.pv span{color:var(--ink-3)}
.pv a{color:var(--ink-2);text-decoration:none;padding:8px 12px;border-radius:999px}.pv a:hover{color:var(--ink);background:var(--hover)}

/* reveal on scroll (only once JS has run, so no-JS shows everything) */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}.dot,.mini-wave i,.fd-wave i{animation:none}}

/* 2026-10-12 restructure: nav foot, models, roles, phases, academy, finn, customers */
.dd-panel .dd-foot{margin-top:6px;padding-top:14px;border-top:1px solid var(--line);border-radius:0 0 10px 10px}
.statrow-3{grid-template-columns:repeat(3,1fr)}
.cols3.grid-gap{row-gap:56px}
.market .big{display:block;font-size:clamp(40px,4.4vw,60px);font-weight:500;letter-spacing:-.05em;line-height:1;margin-bottom:24px}
.entries{grid-template-columns:repeat(4,1fr);gap:16px}
.entry h3{font-size:20px;margin:24px 12px 8px}
.entry p{margin:0 12px;font-size:15px}
.entry .more{margin:0 12px}
.cue{height:136px}
.cue-hot{display:flex;flex-direction:column;align-items:center;gap:8px}
.cue-hot i{width:40px;height:40px;border-radius:50%;border:1.5px dashed var(--accent);opacity:.7}
.cue-hot span{font-size:13px;font-weight:500}
.sec-flush{padding-top:0}
.phases{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;border-top:1px solid var(--line-strong)}
.phases li{position:relative;padding-top:32px}
.phases li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1.5px solid var(--accent)}
.phases li:nth-child(-n+2)::before{background:var(--accent)}
.ph-n{display:block;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ph-w{display:block;font-size:13px;color:var(--accent);margin:4px 0 16px}
.phases h3{font-size:20px;margin-bottom:6px}
.phases p{color:var(--ink-2);font-size:15px;margin:0}

.models{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.models-2{grid-template-columns:repeat(2,1fr);max-width:920px;margin-inline:auto}
.intel .pill{margin-top:14px}
.models-2+.note{text-align:center}
.model{display:flex;flex-direction:column;padding:36px 32px 32px;border:1px solid var(--line);border-radius:var(--radius)}
.model-mid{border-color:rgba(85,230,165,.35);background:linear-gradient(180deg,rgba(85,230,165,.06),transparent 55%)}
.model-k{font-size:13px;color:var(--ink-3);margin:0 0 10px}
.model h3{font-size:clamp(30px,2.8vw,40px);letter-spacing:-.04em;margin-bottom:10px}
.model-line{color:var(--ink-2);margin:0;font-size:16px}
.model .checks{padding-top:22px;margin-top:24px;border-top:1px solid var(--line)}
.best{margin:24px 0 0;font-size:15px;color:var(--ink)}
.best span{display:block;font-size:13px;color:var(--ink-3);margin-bottom:4px}
.model-cta{margin-top:auto;padding-top:32px}
.model-cta .btn{width:100%}
.roles{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.roles li{display:grid;grid-template-columns:220px 1fr auto;gap:24px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line)}
.roles h3{font-size:21px;margin:0}
.roles p{margin:0;color:var(--ink-2);font-size:15.5px;max-width:60ch}
.cert{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--accent);white-space:nowrap}
.next{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.next li{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:22px 0;border-bottom:1px solid var(--line)}
.next .num{padding-top:3px}
.next h3{font-size:18px;margin:0 0 4px}
.next p{margin:0;color:var(--ink-2);font-size:15px}

.flow{list-style:none;padding:0;margin:0;position:relative}
.flow::before{content:"";position:absolute;left:21px;top:30px;bottom:30px;width:1px;background:linear-gradient(var(--accent),rgba(85,230,165,.1))}
.flow li{display:grid;grid-template-columns:44px 1fr;gap:20px;align-items:center;padding:18px 0;position:relative}
.flow-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bg);border:1px solid var(--accent);color:var(--accent);font-size:13px;font-weight:500}
.flow strong{display:block;font-size:22px;font-weight:500;letter-spacing:-.025em}
.flow div span{display:block;color:var(--ink-2);font-size:15px}
.ways{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.way{padding:clamp(28px,3.5vw,44px);border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-alt)}
.way .num{margin-bottom:40px}
.way h3{font-size:clamp(24px,2.3vw,30px);letter-spacing:-.03em;margin-bottom:10px}
.way p{color:var(--ink-2);margin:0;font-size:16.5px}
.routes{display:flex;flex-direction:column;gap:16px}
.route{padding:clamp(28px,3.5vw,44px);border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
.route-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.route-len{font-size:clamp(40px,4vw,56px);letter-spacing:-.05em;margin:0 0 6px}
.route-who{color:var(--ink-2);margin:0}
.route .outcome{text-align:right}
.weeks{list-style:none;padding:0;margin:0;display:flex;gap:6px}
.weeks li{flex:var(--w) 1 0;min-width:0;padding-top:16px;border-top:4px solid rgba(85,230,165,.3)}
.weeks li:last-child{border-top-color:var(--accent)}
.wk{display:block;font-size:13px;color:var(--ink-3);margin-bottom:4px}
.weeks strong{display:block;font-size:15.5px;font-weight:500;line-height:1.35}
.academy-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.backed{display:flex;align-items:center;gap:16px;color:var(--ink-3);font-size:13px}
.backed img{height:30px;width:auto;opacity:.85}

.finn-card{position:relative;display:block;width:100%;max-width:440px;margin-left:auto;padding:0;border:1px solid var(--line-strong);border-radius:24px;overflow:hidden;background:#000;cursor:pointer;aspect-ratio:1;
  box-shadow:0 30px 80px rgba(0,0,0,.45)}
.finn-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.finn-card:hover img{transform:scale(1.03)}
.fc-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 10px rgba(85,230,165,.18)}
.fc-cap{position:absolute;left:0;right:0;bottom:0;padding:48px 22px 20px;text-align:left;background:linear-gradient(transparent,rgba(5,8,7,.85))}
.fc-cap strong{display:block;font-size:16px;font-weight:500;color:#fff}
.fc-cap small{display:block;font-size:13px;color:rgba(255,255,255,.7)}
.how-cap-note{margin:14px 0 0;font-size:13px;color:var(--ink-3)}
.langs{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.langs li{padding:12px 22px;border:1px solid var(--line-strong);border-radius:999px;font-size:clamp(17px,1.5vw,20px);font-weight:500;letter-spacing:-.01em}
.langs li:nth-child(-n+2){border-color:rgba(85,230,165,.5);color:var(--accent)}
.page-finn .band .ctas{margin-top:0;flex:none}

.cs{display:flex;flex-direction:column;gap:clamp(36px,4.5vw,56px)}
.cs-head{display:grid;grid-template-columns:220px 1fr;gap:clamp(24px,5vw,72px);align-items:start;padding-top:36px;border-top:1px solid var(--line-strong)}
.cs-logo{height:30px;width:auto;opacity:.85;margin-top:10px}
.cs-head h2{font-size:clamp(28px,3vw,42px);margin-bottom:12px}
.cs-head .lede{margin:0}
.cs-body{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,80px);align-items:start}
.cs-body.has-side{grid-template-columns:1.7fr 1fr}
.cs-body>*{min-width:0}
.cs .quote blockquote{font-size:clamp(21px,2vw,28px);max-width:none;line-height:1.4}
.cs-stats{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.cs-stats li{padding:20px 0;border-bottom:1px solid var(--line)}
.cs-stats strong{display:block;font-size:clamp(34px,3.4vw,46px);font-weight:500;letter-spacing:-.045em;line-height:1;margin-bottom:8px}
.cs-stats span{color:var(--ink-2);font-size:14.5px}
.cs .video-slot{aspect-ratio:auto;min-height:220px}
.cs .case-foot{margin-top:0}

@media (max-width:1100px){.entries{grid-template-columns:repeat(2,1fr)}.phases{grid-template-columns:repeat(3,1fr);row-gap:40px}}
@media (max-width:900px){
  .models,.ways,.cs-body.has-side,.cs-head{grid-template-columns:1fr}
  .phases{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--line-strong);gap:0;padding-left:28px}
  .phases li{padding:0 0 32px}
  .phases li::before{top:5px;left:-33px}
  .roles li{grid-template-columns:1fr;gap:8px}
  .finn-card{margin:0;max-width:520px}
  .route .outcome{text-align:left}
  .statrow-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .entries{grid-template-columns:1fr}
  .statrow-3 li:nth-child(3){padding-left:0;border-left:0}
  .weeks{flex-direction:column;gap:14px}
  .weeks li{padding-top:10px}
  .langs li{padding:10px 16px}
}

/* responsive */
@media (max-width:1100px){
  .g4,.cols4,.team{grid-template-columns:repeat(2,1fr)}
  .inc{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:repeat(3,1fr)}.foot-brand{grid-column:1/-1}
  .how{grid-template-columns:1fr minmax(0,400px)}
}
@media (max-width:900px){
  .hero-in,.phero-in,.how,.problem,.price-foot,.case.has-video{grid-template-columns:1fr}
  .hero-art{max-width:560px}
  .how-art{position:static;max-width:520px}
  .g3,.g2,.split,.cols3,.ecos,.offers,.tiers,.routes,.entries{grid-template-columns:1fr}
  .statrow{grid-template-columns:repeat(2,1fr);row-gap:32px}
  .statrow li:nth-child(3){padding-left:0;border-left:0}
  .objs li{grid-template-columns:1fr;gap:14px}
  .band{flex-direction:column;align-items:flex-start}
  .phero.has-aside h1,.phero h1{max-width:18ch}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .sec{padding:72px 0}
  .sec-tight{padding-top:40px}
  .g4,.cols4,.cols2,.f2,.inc,.team{grid-template-columns:1fr}
  .team{grid-template-columns:repeat(2,1fr);gap:10px}
  .card,.tier{padding:24px}
  .statrow li{padding:0 16px}
  .statrow li:nth-child(odd){padding-left:0;border-left:0}
  .statrow strong{font-size:32px}
  .statrow span{font-size:13.5px}
  .stage{padding-bottom:88px}
  .ui-main{margin-right:0}
  .ui-finn{width:210px;right:-4px}
  .pl li{grid-template-columns:104px 1fr 30px;gap:10px}
  .pl-l{font-size:12.5px}
  .fd-score ul{grid-template-columns:1fr}
  .fd-msgs{min-height:0}
  .lang-grid{grid-template-columns:repeat(2,1fr)}
  .job{flex-direction:column;align-items:flex-start}
  .foot-top{grid-template-columns:1fr 1fr}
  .mods li{grid-template-columns:1fr;gap:2px}
  .hero .ctas .btn,.phero .ctas .btn{width:100%}
  .price-foot .checks{grid-template-columns:1fr}
  .glance li{grid-template-columns:1fr;gap:6px;padding:14px 0}
  .glance .cc li{grid-template-columns:64px 1fr;row-gap:6px}
  .glance .cc b{grid-column:2}
  .trust{gap:20px}
  .logos img{height:22px}.logos .lg-lendo{height:26px}
  .case-top{flex-direction:column;align-items:flex-start;gap:16px}
  .steplist li{grid-template-columns:40px 1fr}
  .pv{font-size:12px}
}

/* fixes after the 2026-10-12 screenshot pass */
.hero h1{font-size:clamp(46px,5.6vw,80px)}
.logos .lg-msbc{height:40px}
.market .big{letter-spacing:-.035em}
.fc-play{left:22px;top:auto;bottom:22px;transform:none;width:56px;height:56px;box-shadow:0 0 0 8px rgba(85,230,165,.18)}
.fc-cap{padding:56px 22px 26px 98px}
.backed img{height:44px}
.cs .quote blockquote{font-size:clamp(19px,1.6vw,23px);line-height:1.5;letter-spacing:-.015em}
.nowrap{white-space:nowrap}

/* 2026-10-19 restructure: solution cards, market banner, home proof, contact card, Nationals link, Academy partners */
.sols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sol{display:flex;flex-direction:column;text-decoration:none;padding:32px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);transition:border-color .2s,background .2s}
.sol:hover{border-color:var(--line-strong);background:var(--surface-2)}
.sol h3{font-size:24px;margin:6px 0 10px}
.sol>p{color:var(--ink-2);font-size:15.5px}
.sol .checks{margin:8px 0 24px}
.sol .more{margin-top:auto}
.banner{margin:40px 0 0;padding:24px 28px;border-left:2px solid var(--accent);background:var(--accent-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:clamp(18px,1.8vw,22px);letter-spacing:-.015em;color:var(--ink);line-height:1.4}
.case-h{max-width:20ch;margin-bottom:28px}
.case-h .hl{color:var(--ink-3)}
.statrow-2{grid-template-columns:repeat(2,1fr);max-width:640px}
.contact-card{align-self:start}
.contact-card img{width:128px;height:128px;border-radius:50%;object-fit:cover;margin-bottom:16px}
.contact-card h3{font-size:22px;margin:0}
.contact-card .cc-role{color:var(--ink-2);margin:4px 0 16px}
.cc-lines{list-style:none;padding:0;margin:0 0 8px;border-top:1px solid var(--line)}
.cc-lines li{padding:12px 0;border-bottom:1px solid var(--line)}
.cc-lines a{text-decoration:none;font-variant-numeric:tabular-nums}
.cc-lines a:hover{color:var(--accent)}
.backed-logo{flex:none}
.backed-logo img{height:44px;width:auto;opacity:.9}
.nat{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;text-decoration:none;padding:clamp(28px,4vw,44px);border:1px solid var(--line-strong);border-left:2px solid var(--accent);border-radius:var(--radius);background:var(--surface);transition:background .2s}
.nat:hover{background:var(--surface-2)}
.nat h2{font-size:clamp(26px,2.6vw,36px)}
.nat .lede{margin:0;max-width:60ch}
.nat .more{flex:none}
.partners{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.partners ul{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:12px 40px}
.partners li{display:flex;align-items:baseline;gap:8px}
.partners strong{font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.partners span{font-size:12.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
@media (max-width:900px){
  .sols{grid-template-columns:1fr}
  .nat{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .statrow-2{grid-template-columns:1fr}
  .statrow-2 li:nth-child(2){padding-left:0;border-left:0;margin-top:24px}
  .banner{padding:20px}
}


/* ======================================================================================
   LIVE SITE SKIN (2026-10-19). George: "I just want a version of the live site www.hailotalent.com".
   Everything below restyles the v3 markup to the live components: Plus Jakarta Sans 700 headings,
   pill badges and buttons, centred section heads, rounded bordered cards with a soft green glow.
   ====================================================================================== */
body{font-size:16px;line-height:1.5;font-feature-settings:normal}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.08}
h1{font-size:clamp(44px,6vw,72px);line-height:1.05}
h2{font-size:clamp(32px,4vw,48px);line-height:1.1}
h3{font-size:17px;line-height:1.4;letter-spacing:-.01em}
.hl{color:var(--accent)}
.sec-head h2 .hl,.problem h2 .hl,.band h2 .hl,.closing h2 .hl,.case-h .hl{color:var(--accent)}
.note{color:var(--ink-2)}
:focus-visible{outline-color:var(--accent)}

/* badge: the live "AI-POWERED TALENT" pill */
.eyebrow{gap:8px;padding:6px 16px;border:1px solid rgba(85,230,165,.3);border-radius:999px;font-size:12px;font-weight:500;letter-spacing:.025em;text-transform:uppercase;color:var(--accent);margin-bottom:24px}
.eyebrow::before{width:6px;height:6px}

/* section heads centred, as on the live site */
.sec-head{max-width:820px;margin-inline:auto;text-align:center}
.sec-head .lede{margin-inline:auto}

/* buttons and nav */
.btn{padding:14px 32px;font-size:14px;font-weight:600}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent);filter:brightness(1.1)}
.btn-ghost{border-color:var(--line);font-weight:500}
.btn-ghost:hover{border-color:var(--line);background:var(--surface-2)}
.nav{background:rgba(18,21,22,.8);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(48,52,54,.5)}
.nav-in{height:65px}
.logo img{display:block;height:auto}
.nav .logo img{width:143px}
.nav-links{margin-left:auto;gap:20px}
.nav-links .nl,.nav-links .dd-btn{font-size:14px;color:var(--ink-2);padding:6px 4px;background:none}
.nav-links .nl:hover,.nav-links .dd-btn:hover,.nav-links [aria-current],.dd.is-current .dd-btn{color:var(--ink);background:none}
.nav-cta{margin-left:28px}
.nav-cta .btn{padding:10px 20px;font-size:14px}
.dd-panel{border-radius:12px;background:var(--surface);border-color:var(--line)}

/* home hero: centred copy, logos underneath, stats in their own band (live layout) */
.hero{padding:clamp(80px,10vw,140px) 0 clamp(64px,7vw,96px);text-align:center}
.hero::before{inset:-10% 10% auto 10%;height:90%;background:radial-gradient(40% 50% at 50% 30%,rgba(85,230,165,.07),transparent 70%)}
.hero-in{display:block;max-width:900px;margin:0 auto}
.hero h1{font-size:clamp(44px,6.4vw,80px);line-height:1.05;margin-bottom:24px}
.hero-sub{font-size:clamp(17px,1.5vw,20px);max-width:42rem;margin:0 auto;line-height:1.45}
.hero .ctas{margin-top:40px}
.trust{flex-direction:column;gap:28px;justify-content:center;margin:56px auto 0;max-width:720px;padding:16px 0 0;border-top:1px solid rgba(48,52,54,.5)}
.trust p{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.logos{justify-content:center}
.logos img{height:34px;opacity:.9}
.logos .lg-lendo{height:38px}
.statband{border-block:1px solid rgba(48,52,54,.5);padding:48px 0}
.statrow-hero{border:0;padding:0}
.statrow strong{font-family:var(--display);font-weight:700;letter-spacing:-.02em;color:var(--accent)}
.statrow-case strong{color:var(--accent)}
.statrow span{color:var(--ink-2)}
.statrow li{border-left-color:var(--line)}

/* page heroes */
.phero h1 .hl{color:var(--accent)}
.phero:not(.has-aside){text-align:center}
.phero:not(.has-aside) h1,.phero:not(.has-aside) .lede{margin-inline:auto}
.phero:not(.has-aside) .ctas{justify-content:center}

/* cards: the live "rounded-xl border p-6 card-hover" pattern */
.card,.sol,.entry,.model,.way,.route,.cs,.contact-card,.acc,.person,.job,
.cols2>li,.cols3>li,.cols4>li,.inc li,.roles>li,.objs li,.phases>li,.steplist>li{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;transition:box-shadow .3s,border-color .3s}
.card:hover,.sol:hover,.entry:hover,.model:hover,.cols2>li:hover,.cols3>li:hover,.cols4>li:hover,.inc li:hover,.roles>li:hover,.objs li:hover{box-shadow:var(--glow-hover);background:var(--surface)}
.cols2>li,.cols3>li,.cols4>li{padding:24px}
.cols2,.cols3,.cols4{gap:16px}
.inc{gap:16px}
.inc li{padding:24px;border-top:1px solid var(--line)}
.objs{border:0;display:grid;gap:16px}
.objs li{padding:24px 28px;border-bottom:1px solid var(--line)}
.phases{gap:16px}
.phases>li{padding:24px}
.steplist{display:grid;gap:12px;border:0}
.steplist>li{padding:20px 24px}
/* these were hairline rows before the skin, so they had no side padding to keep text off the new border */
.roles,.jobs{border:0;display:grid;gap:12px}
.roles li{padding:24px 28px}
.job{padding:20px 24px}
.cs{padding:clamp(24px,4vw,44px)}
.cs-head{border-top:0;padding-top:0}
.ic-box{width:40px;height:40px;border-radius:8px;border:0;background:rgba(85,230,165,.1);color:var(--accent);margin-bottom:16px}
.model-mid,.sol:nth-child(2){box-shadow:var(--glow)}
.model-k{color:var(--accent);text-transform:uppercase;font-size:12px;letter-spacing:.05em;font-weight:600}
.chip{border-color:var(--line);color:var(--ink-2)}
.checks .ic{color:var(--accent)}

/* feature blocks: the live green-glow panel */
.banner,.nat,.band,.closing-in,.glance,.problem,.tbl-wrap{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--glow)}
.band{padding:clamp(28px,4vw,44px)}
.glance{padding:24px}
.problem{padding:clamp(28px,4vw,48px)}
.banner{border-left:1px solid var(--line);color:var(--ink);text-align:center;font-family:var(--display);font-weight:600;padding:28px}
.nat{border-left:1px solid var(--line)}
.closing-in{background:var(--surface)}
.tbl-wrap{padding:8px 16px}
.cmp th.us,.cmp td.us{color:var(--accent)}

/* FAQ as bordered cards, like the live FAQ grid */
.accs{display:grid;gap:12px}
.acc{padding:0 20px;box-shadow:var(--glow)}
.acc summary{font-family:var(--display);font-weight:600;font-size:15px}

/* quote */
.quote blockquote{font-family:var(--display);font-weight:500;font-size:clamp(20px,2vw,26px);line-height:1.45;letter-spacing:-.01em}

/* footer */
.foot{border-top:1px solid rgba(48,52,54,.5)}
.foot h3{font-family:var(--display);font-size:14px;color:var(--ink)}
.foot a{color:var(--ink-2)}
.foot a:hover{color:var(--ink)}
.social{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;border:1px solid rgba(85,230,165,.3);color:var(--accent)}

@media (max-width:900px){
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
  .nav .logo img{width:120px}
}

/* 2026-10-19 refinement: home case study as quote + stat column, display face on every big number,
   Academy partner marks like the Nationals strip */
.case-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(32px,6vw,96px);align-items:end}
.case-grid>*{min-width:0}
.statrow-stack{grid-template-columns:1fr;border-top:1px solid var(--line)}
.statrow-stack li,.statrow-stack li:first-child{padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}
.market .big{font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-size:clamp(36px,3.6vw,52px);white-space:nowrap}
.partners li{align-items:center}
.partners .pm{display:inline-flex;width:22px;height:22px}
.partners .pm svg{width:100%;height:100%;fill:currentColor}
@media (max-width:900px){.case-grid{grid-template-columns:1fr}}
/* Executive search mandates: label on its own line, chips centred so the row wraps evenly (no lone orphan) */
.chips.mandates{justify-content:center;max-width:860px;margin-left:auto;margin-right:auto}
.chips.mandates .chips-k{flex-basis:100%;text-align:center;margin:0 0 4px}
@media (max-width:600px){.chips.mandates .chip{border-radius:16px;text-align:center}}
/* Phone rhythm: bordered cards no longer need the hairline-era 56px row gap, and icon cards set the icon
   beside the heading, so long pages read tighter without dropping a section */
@media (max-width:560px){
  .sec{padding:56px 0}
  .sec-tight{padding-top:32px}
  .cols3.grid-gap{row-gap:12px}
  .cols2>li,.cols3>li,.cols4>li{padding:20px}
  .cols2>li:has(>.ic-box),.cols3>li:has(>.ic-box),.cols4>li:has(>.ic-box){display:grid;grid-template-columns:40px 1fr;column-gap:14px;align-items:start}
  :is(.cols2,.cols3,.cols4)>li>.ic-box{margin-bottom:0;grid-row:span 2}
  :is(.cols2,.cols3,.cols4)>li:has(>.ic-box) h3{margin:8px 0 6px}
  .sol{padding:24px}
}
/* the closing card already sits in its own padded block, so after a section it doubled the gap (~250px) */
.sec+.closing{padding-top:0}
/* band CTAs sit beside the copy on one row (was /finn only; /ai stacked two odd-width pills) */
.band .ctas{margin-top:0;flex:none}
@media (max-width:900px){.band .ctas{margin-top:8px}}
/* centred section heads above, so centre the language pills too (they ended short of the right edge) */
.langs{justify-content:center}
/* "At a glance" figures use the display face like every other big number */
.glance li strong{font-family:var(--display);font-weight:700;letter-spacing:-.03em;color:var(--ink)}

/* 2026-10-22 refinement (George: hero "hard to read on three lines", lots of empty space on the sides;
   "simple, easy to read", welovealfa.com as the reference). Same design, calmer type. */
/* hero: two lines on a wider measure; the second line's phrases take turns (site.js) */
.hero-in{max-width:1120px}
.hero h1{font-size:clamp(40px,6.2vw,88px);line-height:1.04;letter-spacing:-.035em;margin-bottom:28px}
.hero-sub{max-width:46rem;font-size:clamp(17px,1.55vw,21px);color:var(--ink-3)}
.rot{display:none}
.js .rot{display:inline-grid;vertical-align:top}
.js .rot-static{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rot-i{grid-area:1/1;opacity:0;transform:translateY(.35em);transition:opacity .5s ease,transform .5s ease;white-space:nowrap}
.rot-i.is-on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rot{display:none}
  .js .rot-static{position:static;width:auto;height:auto;overflow:visible;clip:auto}
}
/* headings break into even lines and paragraphs avoid one-word last lines */
h1,h2,h3,.case-h{text-wrap:balance}
p,blockquote,li{text-wrap:pretty}
.sec-head{max-width:880px}
/* easier reading: body copy a step lighter on the dark ground, card copy a step larger */
:root{--ink-2:#9AA1A5;--ink-3:#B4BABD}
.cols2>li p,.cols3>li p,.cols4>li p,.inc li p,.entry p,.sol p,.phases>li p{font-size:15px;line-height:1.55}
/* quotes in the body face, not the display face: a 70-word quote set like a headline was hard going */
.quote blockquote{font-family:var(--font);font-weight:400;font-size:clamp(18px,1.6vw,21px);line-height:1.6;letter-spacing:0;color:var(--ink)}
/* less dead air between sections (home was 11k px on desktop, 15k on phones) */
.sec{padding:clamp(64px,8vw,112px) 0}
.hero{padding:clamp(72px,9vw,128px) 0 clamp(56px,6vw,80px)}
/* home customer block: stats sit level with the quote, and the hires label sits above its chips
   so the last chip no longer drops onto a row of its own */
.case-grid{align-items:center}
.case-foot{flex-direction:column;align-items:flex-start;gap:20px}
.case-foot .chips .chips-k{flex-basis:100%;margin:0 0 4px}
/* compare table: the HAILO column runs to the card edge instead of stopping 16px short */
.tbl-wrap{padding:0;overflow:auto}
.cmp th:first-child{padding-left:24px}
.cmp thead th{padding-top:22px}
.cmp tr:last-child>*{border-bottom:0}
.msg .who{font-size:12px}
@media (max-width:560px){
  .sec{padding:48px 0}
  .hero{padding:56px 0 48px}
  .hero h1{font-size:clamp(36px,10.4vw,46px)}
}

/* ---------------------------------------------------------------- light theme (preview only for now)
   George 2026-10-22: "show me a light colour background version". Same layout and components; only the
   tokens change. Mint stays the button colour; mint TEXT on white fails contrast, so text accents use a
   deeper green (#23825A, 5.1:1 on white). Switched by html[data-theme=light] (assets/theme.js in preview). */
html[data-theme=light] body{
  --live:var(--accent);--live-bg:var(--accent-soft);--live-ink:var(--accent);--wave:var(--accent);
  --bg:#F6F7F6;--bg-alt:#F6F7F6;--surface:#FFFFFF;--surface-2:#EEF1EF;
  --line:#E1E5E3;--line-strong:#CCD2CF;--hover:rgba(18,21,22,.04);
  --ink:#121516;--ink-2:#565E62;--ink-3:#3E4548;
  --accent:#217C56;--accent-ink:#FFFFFF;  /* text and icons: #23825A darkened 5% so small text passes 4.5:1 (George 2026-10-22); buttons stay #23825A */
  --accent-soft:rgba(35,130,90,.07);
  --glow:inset 0 0 0 1px rgba(35,130,90,.10),0 1px 2px rgba(18,21,22,.04),0 10px 30px -18px rgba(18,21,22,.18);
  --glow-hover:inset 0 0 0 1px rgba(35,130,90,.25),0 2px 4px rgba(18,21,22,.05),0 16px 36px -18px rgba(18,21,22,.22);
  --ui-bg:#FFFFFF;--ui-inset:#F3F5F4;--ui-chip:rgba(18,21,22,.05);
  --bar-bg:rgba(18,21,22,.06);--bar-fill:rgba(18,21,22,.24);--bubble-cand:rgba(35,130,90,.09);
  background:var(--bg);color:var(--ink);color-scheme:light
}
html[data-theme=light]{background:#F6F7F6}
html[data-theme=light] .nav{background:rgba(246,247,246,.85);border-bottom-color:var(--line)}
html[data-theme=light] .trust,html[data-theme=light] .statband,html[data-theme=light] .foot{border-color:var(--line)}
html[data-theme=light] .hero::before{background:radial-gradient(40% 50% at 50% 30%,rgba(85,230,165,.14),transparent 70%)}
html[data-theme=light] .btn-primary{background:#23825A;color:#fff}  /* the light logo's own green (#55E6A5 at brightness .55, saturate 1.2) */
html[data-theme=light] .btn-primary:hover{filter:brightness(.96)}
html[data-theme=light] .eyebrow{border-color:rgba(35,130,90,.3)}
html[data-theme=light] .ic-box{background:rgba(35,130,90,.08)}
html[data-theme=light] .social{border-color:rgba(35,130,90,.3)}
html[data-theme=light] .cmp .us{background:rgba(35,130,90,.05)}
/* the wordmark is mint on transparent; darken it to the text green. Client logos are white PNGs: invert. */
html[data-theme=light] .logo img{filter:brightness(.55) saturate(1.2)}
html[data-theme=light] .logos img,html[data-theme=light] .q-logo,html[data-theme=light] .cs-logo,html[data-theme=light] .backed-logo img,
html[data-theme=light] .nat-backed img{filter:invert(1) brightness(.35)}
/* National Talent pages stay monochrome: ink accents on light */
html[data-theme=light] body.natp{--accent:#121516;--accent-soft:rgba(18,21,22,.05);--live-bg:rgba(18,21,22,.05)}
html[data-theme=light] body.natp .btn-primary{background:#121516;color:#FFFFFF}
html[data-theme=light] body.natp .btn-primary:hover{background:#000;filter:none}
/* preview switch */
.pv button{font:inherit;color:var(--ink-2);background:none;border:0;padding:8px 12px;border-radius:999px;cursor:pointer}
.pv button:hover{color:var(--ink);background:var(--hover)}
html[data-theme=light] .pv{background:rgba(255,255,255,.95)}
/* the quote kept the display-era 30ch cap, which left a ragged narrow column beside the stats */
.quote blockquote,.case:not(.has-video) .quote blockquote{max-width:62ch}
.rot-static span{white-space:nowrap}
.rot-i.was-on{transform:translateY(-.35em)}
/* George 2026-10-22: Lendo the same size as Lucidya. Lucidya's letters fill its whole 34px image; Lendo's letters are
   only 41 of its 84px height (the mark fills the rest), so scale it until the lettering matches: 34 * 84 / 41 = 70px */
.logos .lg-lendo{height:calc(34px * 84 / 41)}
/* and MSBC the same (George): its "MS" letters are the top 50 of its 84px height (tail and "Business Centre" below) */
.logos .lg-msbc{height:calc(34px * 84 / 50)}
/* the three logos at matched letter height need ~700px plus gaps: widen the strip so they share one row on desktop */
.trust{max-width:960px}
/* George 2026-10-22: the logos stay on ONE row on phones too. --lh is the shared letter height; the row is
   22 x --lh wide (Lucidya 6.73 + Tabby 4.22 + Lendo 5.66 + MSBC 5.32; Tabby added 2026-10-23), so on narrow
   screens --lh shrinks to fit the width minus gutters (32px) and three 20px gaps */
.logos{--lh:calc(min(34px,calc((100vw - 92px) / 22)) * .85);flex-wrap:nowrap}  /* George 2026-10-22 later: all three 15% smaller, at every width */
.logos img{height:var(--lh)}
.logos .lg-lendo{height:calc(var(--lh) * 84 / 41)}
.logos .lg-msbc{height:calc(var(--lh) * 84 / 50)}
/* Tabby: the letters (top of t and b down to the baseline) are 73 of its 84px; the y's tail hangs below */
.logos .lg-tabby{height:calc(var(--lh) * 84 / 73)}
@media (max-width:560px){.logos{gap:20px}}

/* 2026-10-22 podcasts: a YouTube cover that turns into the player on click (no YouTube load until then) */
.ep{padding:16px 16px 24px}
.yt{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000;margin-bottom:18px}
.yt img,.yt iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.yt-cover{display:block;position:absolute;inset:0}
.yt-play{position:absolute;left:16px;bottom:16px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);transition:transform .2s}
.yt-play .ic{margin-left:3px}
.yt-cover:hover .yt-play{transform:scale(1.08)}
.ep-k{font-size:13px;color:var(--accent);margin:0 0 6px;font-weight:600}
.ep h3{font-size:clamp(18px,1.6vw,21px);margin-bottom:12px}
.ep .more{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2);text-decoration:none}

/* 2026-10-22 George: the trust strip stays out of sight until the visitor scrolls. The hero copy fills the
   first screen (viewport minus the 65px nav), so the logos start just below the fold at every size. */
.hero{padding-top:0}
.hero-main{min-height:calc(100svh - 65px);display:flex;flex-direction:column;justify-content:center;align-items:center;padding-block:48px}
.hero .trust{margin-top:0}
html[data-theme=light] .langs li:nth-child(-n+2){border-color:rgba(35,130,90,.5)}

/* 2026-10-22 George: under the hero logos, the teams we build (links), not a row of numbers */
.team-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.team-links a{display:flex;align-items:center;gap:14px;height:100%;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;color:var(--ink);transition:box-shadow .3s,border-color .3s}
.team-links a:hover{box-shadow:var(--glow-hover)}
.team-links .ic-box{margin:0;flex:none}
.team-links strong{display:block;font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.015em}
.team-links small{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.4;margin-top:2px}
.team-links a>.ic:last-child{margin-left:auto;color:var(--accent);flex:none}
@media (max-width:1000px){.team-links{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.team-links{grid-template-columns:1fr}}
.social+.social{margin-left:8px}

.ep-links{display:flex;gap:20px;flex-wrap:wrap}
.ep-links .more{padding-top:0}

/* customers page: Lendo's letters are 41 of its 84px, Lucidya's fill the height; match them (George 2026-10-22) */
.cs-logo.cs-lendo{height:calc(30px * 84 / 41);margin-top:0}
/* academy "Backed by": MSBC mark is white artwork; dark it for the light theme so it stays monochrome on both */
html[data-theme=light] .backed img{filter:invert(1) brightness(.35)}
@media (min-width:561px){.glance-words li{grid-template-columns:minmax(0,176px) 1fr}}
.glance-words li strong{font-size:21px;line-height:1.2}

/* Salary table (/hiring-in-saudi-arabia): fits a phone. The level folds under the role instead of scrolling sideways. */
.cmp.sal{min-width:0}
.sal-l{display:none}
@media (max-width:640px){
  .sal .c-l{display:none}
  .sal-l{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--ink-2)}
  .cmp.sal th,.cmp.sal td{padding:12px 10px;font-size:14.5px}
  .cmp.sal thead th:first-child{width:56%}
  .cmp.sal td:last-child{white-space:nowrap}
}

/* Salary benchmark pages: one table per function. Phones fold the level under the role and drop the annual column. */
.bench-fn{font-size:18px;margin:36px 0 12px}
.bench td.tr{white-space:nowrap;color:var(--ink-2)}
.bench td.tr-hot{color:var(--accent);font-weight:600}
.bench-jump{justify-content:center}
.bench-jump .chip:hover{border-color:var(--accent);color:var(--accent)}
/* Same column widths in every table, so the tables on a page line up. */
.cmp.bench{table-layout:fixed}
.cmp.bench thead th:nth-child(1){width:34%} .cmp.bench thead th:nth-child(2){width:13%} .cmp.bench thead th:nth-child(3){width:20%}
.cmp.bench thead th:nth-child(4){width:20%} .cmp.bench thead th:nth-child(5){width:13%}
@media (max-width:640px){
  .bench .c-a{display:none}
  .cmp.bench thead th:nth-child(1){width:48%} .cmp.bench thead th:nth-child(3){width:34%} .cmp.bench thead th:nth-child(5){width:18%}
}

/* Clean version (/clean/, preview only, George 2026-10-23): fewer, larger blocks. Appended after v3.css; same tokens, one green. */
.page-home .hero-main .ctas{margin-top:32px}

/* home: one large card per solution */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.door{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:400px;padding:32px;border-radius:20px;
  border:1px solid var(--line);background:var(--surface);text-decoration:none;overflow:hidden;isolation:isolate;transition:border-color .2s,transform .2s}
.door::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.9;transition:opacity .3s;
  background:radial-gradient(120% 70% at var(--gx,0%) var(--gy,0%),var(--accent-soft) 0%,transparent 60%)}
.door-0{--gx:0%;--gy:0%}.door-1{--gx:100%;--gy:0%}.door-2{--gx:50%;--gy:100%}
.door:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.door:hover::before{opacity:1;background:radial-gradient(140% 90% at var(--gx,0%) var(--gy,0%),rgba(85,230,165,.14) 0%,transparent 65%)}
.door-top{display:flex;justify-content:space-between;align-items:center}
.door-top .model-k{margin:0}
.door-go{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.door:hover .door-go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.door h3{font-family:var(--display);font-weight:700;font-size:clamp(26px,2.4vw,34px);letter-spacing:-.03em;margin:0 0 12px}
.door-b p{color:var(--ink-2);font-size:16px;margin:0 0 20px;max-width:30ch}
.door-fact{display:inline-block;font-size:13px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:14px;width:100%}

/* home: the lifecycle, three pillars feeding Signal */
.doors-3 .door{min-height:300px;padding:28px}
.doors-3 .door h3,.door-hub h3{font-size:clamp(24px,2vw,30px)}
.life-verb{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
/* three pillars feed Signal: a connector under each card, then the hub card */
.feeds{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;height:56px}
.feeds i{position:relative;display:block}
.feeds i::before{content:"";position:absolute;left:50%;top:0;bottom:8px;border-left:1.5px dashed var(--accent);opacity:.6}
.feeds i::after{content:"";position:absolute;left:calc(50% - 5px);bottom:2px;width:8px;height:8px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(45deg)}
.door-hub{min-height:0;padding:32px 36px;--gx:50%;--gy:0%;box-shadow:var(--glow)}
.doors-3 .door,.door-hub{justify-content:flex-start;overflow:visible}
.doors-3 .door-top,.door-hub .door-top{margin-bottom:36px}
.door-hub{display:grid;grid-template-columns:auto 1fr auto;gap:0 28px;align-items:start}
.door-hub .door-top{display:contents}
.door-hub .ic-box{grid-column:1;grid-row:1}
.door-hub .door-b{grid-column:2;grid-row:1}
.door-hub .door-go{grid-column:3;grid-row:1}
/* pillars feed each other: an arrow in the gap between neighbouring cards */
.doors-3 .door-0::after,.doors-3 .door-1::after{content:"";position:absolute;right:-17px;top:50%;width:14px;height:14px;z-index:2;
  background:var(--bg);border-top:1.5px solid var(--accent);border-right:1.5px solid var(--accent);transform:translateY(-50%) rotate(45deg) scale(.7);opacity:.8}
.feeds-back{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:13.5px;color:var(--ink-3)}
.feeds-back .ic{color:var(--accent)}
.door-hub .door-b{max-width:none}
.door-hub .door-b p:not(.life-verb){max-width:60ch}
.door-hub .pill{margin-top:4px}
.door-hub::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid rgba(85,230,165,.25)}
html[data-theme=light] .door-hub::after{border-color:rgba(35,130,90,.3)}
/* pillar pages: next step in the lifecycle */
.life-next{text-decoration:none;align-items:center}
.life-next .model-k{margin:0 0 8px}
.life-next:hover{border-color:var(--line-strong)}
/* embedded: commercial terms as a plain two-column list */
.terms{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.terms li{padding:22px 0;border-top:1px solid var(--line)}
.terms h3{margin:0 0 6px}
.terms p{margin:0;color:var(--ink-2);font-size:15px}

/* team pages: one short quote instead of the full case block */
.quote-solo{max-width:820px;margin:0 auto;text-align:center}
.quote-solo .q-logo{margin:0 auto 24px}
.quote-solo blockquote{margin-inline:auto}

@media (max-width:900px){
  .doors{grid-template-columns:1fr}
  .door{min-height:280px;padding:24px}
  .doors-3 .door{min-height:220px}
  .feeds{grid-template-columns:1fr;height:48px}.feeds i:not(:first-child){display:none}
  .door-hub{padding:24px;grid-template-columns:1fr auto;gap:16px}
  .door-hub .door-b{grid-column:1 / -1;grid-row:2}
  .doors-3 .door-0::after,.doors-3 .door-1::after{display:none}
  .terms{grid-template-columns:1fr}
}
.page-embedded .models+.note{text-align:center}
.door{min-height:360px}
.door.door-hub{min-height:0}

/* home: "Not anymore.": the old way struck through, our answer beside it */
.notany{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(28px,4vw,56px);
  border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:var(--glow)}
.na-old{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.na-old li{font-weight:400;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.01em;line-height:1.35;color:var(--ink-2)}
.na-old s{text-decoration-color:rgba(85,230,165,.55);text-decoration-thickness:1.5px}
html[data-theme=light] .na-old s{text-decoration-color:rgba(35,130,90,.5)}
.na-new{border-left:1px solid var(--line-strong);padding-left:clamp(24px,5vw,72px)}
.na-new p{margin:0}
.na-a{font-family:var(--display);font-weight:700;font-size:clamp(40px,5vw,68px);letter-spacing:-.045em;line-height:1.05;color:var(--accent);margin-bottom:14px!important}
.na-b{font-size:clamp(17px,1.4vw,20px);color:var(--ink-2);max-width:32ch}
.na-new .ctas{margin-top:24px}

/* home: Meet Finn */
.meet{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.meet-card{max-width:520px}

/* home: Lucidya proof + reserved video */
.proof{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,56px);align-items:stretch}
.proof-l .q-logo{height:28px;margin-bottom:24px}
.proof-nums{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.proof-novideo .proof-nums{grid-template-columns:repeat(4,1fr)}
.proof-nums li{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.proof-nums strong{font-family:var(--display);font-weight:700;font-size:clamp(28px,3vw,44px);letter-spacing:-.04em;line-height:1;color:var(--accent)}
.proof-nums span{color:var(--ink-2);font-size:14px;line-height:1.4}
.proof-l .quote blockquote{margin-bottom:16px}
.proof-l .quote{margin-bottom:24px}
.proof-video{aspect-ratio:auto;min-height:320px;align-items:center;text-align:center}
@media (max-width:900px){
  .meet,.proof,.notany{grid-template-columns:1fr}
  .na-new{border-left:0;padding-left:0;border-top:1px solid var(--line-strong);padding-top:24px}
  .proof-nums,.proof-novideo .proof-nums{grid-template-columns:1fr 1fr;gap:8px}
  .proof-nums li{padding:14px}
  .meet-card{margin:0 auto}
}
.proof-novideo .proof{grid-template-columns:1fr;max-width:820px;margin:0 auto}

/* George 2026-10-25: smaller boxes, less white space in the HAILO system, "Not anymore." and "Who's your next great hire?" */
.sec-compact{padding:clamp(48px,6vw,80px) 0}
.sec-compact .sec-head{margin-bottom:clamp(28px,3vw,40px)}
.doors-3 .door{min-height:0;padding:22px 24px}
.doors-3 .door-top{margin-bottom:18px}
.doors-3 .door h3,.door-hub h3{font-size:clamp(20px,1.6vw,24px);margin-bottom:8px}
.doors-3 .door-b p,.door-hub .door-b p{font-size:15px;margin-bottom:0}
.door-go{width:38px;height:38px}
.feeds{height:36px}
.door-hub{padding:22px 28px}
.notany{padding:clamp(22px,3vw,36px);gap:clamp(20px,4vw,48px)}
.na-old{gap:10px}
.na-old li{font-size:clamp(16px,1.3vw,19px)}
.na-new{padding-left:clamp(20px,4vw,48px)}
.na-a{font-size:clamp(32px,3.6vw,48px);margin-bottom:10px!important}
.na-new .ctas{margin-top:18px}
#next.split{align-items:center}
#next .contact-card{padding:24px}
#next .contact-card img{width:96px;height:96px;margin-bottom:12px}
.closing-compact{padding:clamp(32px,4vw,56px) 0 clamp(48px,6vw,80px)}
.closing-compact .closing-in{padding:clamp(32px,4vw,56px) 24px}
@media (max-width:900px){
  .doors-3 .door{min-height:0}
  .na-new{padding-top:20px}
}

/* George 2026-10-25, formatting pass. The HAILO system cards: the v3 .ic-box bottom margin pushed the icon above the
   arrow button, .door-b p (grey) beat the green .life-verb, the 30ch cap left half of each card empty, and the hub
   card's wider padding put its icon out of line with the cards above. */
.door-top .ic-box{margin:0}
.door-b p.life-verb{color:var(--accent);font-size:12.5px;margin:0 0 6px;max-width:none}
.doors-3 .door-b p:not(.life-verb){max-width:none}
.doors-3 .door{padding:24px}
.door-hub{padding:24px}
.foot-line{line-height:1.6}
/* "Who's your next great hire?": less space around the band and inside it, on every page */
main>section:has(+ .closing){padding-bottom:clamp(40px,5vw,64px)}
.closing.closing-compact{padding:0 0 clamp(40px,5vw,64px)}
.closing-compact .closing-in{padding:clamp(28px,3.5vw,44px) 24px}
.closing-compact .ctas{margin-top:20px}
.closing-compact .closing-mail{margin-top:14px}
#next.sec-compact{padding:clamp(40px,5vw,64px) 0}
@media (max-width:900px){.door-hub .door-b{grid-row:2}}
/* "At a glance": the 136px label column was narrower than "investment" / "Placement" at 30px, so the word ran into the next column */
.glance li{grid-template-columns:minmax(0,184px) 1fr}
.glance li strong{min-width:0;overflow-wrap:break-word}
/* no one-word last lines in ledes, notes and card text */
main .lede,main .note,main li p,main article p,main .door-b p,main .band p{text-wrap:balance}
/* George 2026-10-25: the card glow (::before) had square corners and the cards don't clip (overflow:visible, for the
   arrows between them), so a squared-off edge showed at the glow's corner. Round it with the card. */
.door::before{border-radius:inherit}
/* the down arrows: line and arrowhead both centred on the card's middle (the head was a fixed 5px offset, so it sat left of the line) */
.feeds i::before{left:50%;transform:translateX(-50%);border-left-width:1.5px}
.feeds i::after{left:50%;bottom:3px;width:9px;height:9px;transform:translateX(-50%) rotate(45deg);transform-origin:center}
/* "When to bring us in": "Read more" on the same line in every card, even when a title wraps */
.entries .entry{display:flex;flex-direction:column}
.entries .entry .more{margin-top:auto;padding-top:16px}
/* "When to bring us in" pictures (George 2026-10-25): New market, no team = a route to an empty pin;
   No in-house recruitment team = applicants queueing, each "Waiting" */
.cue-route{display:flex;align-items:flex-start;gap:12px;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.cue-route span{display:flex;flex-direction:column;align-items:center;gap:8px}
.cue-route span i{display:block;width:14px;height:14px;border-radius:50%}
.cue-route .cr-a i{background:var(--accent)}
.cue-route .cr-b i{width:22px;height:22px;margin-top:-4px;border:1.5px dashed var(--accent);background:transparent;opacity:.8}
.cue-route b{display:block;width:84px;margin-top:6px;border-top:1.5px dashed var(--line-strong)}
.cue-queue{list-style:none;margin:0;padding:0;display:grid;gap:7px;width:min(190px,80%)}
.cue-queue li{display:flex;align-items:center;gap:8px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.cue-queue li:nth-child(2){opacity:.75}.cue-queue li:nth-child(3){opacity:.5}
.cue-queue i{flex:none;width:14px;height:14px;border-radius:50%;border:1px dashed var(--line-strong)}
.cue-queue span{flex:1;height:5px;border-radius:3px;background:var(--line-strong)}
.cue-queue em{font-style:normal;font-size:10.5px;font-weight:600;color:var(--accent)}
.entries .cue{gap:12px}
/* route: both ends in the same 22px box so "Home" and "New market" share a baseline; queue rows slimmer so all three fit the box */
.cue-route span i,.cue-route .cr-b i{width:22px;height:22px;margin:0;box-sizing:border-box}
.cue-route .cr-a i{background:radial-gradient(circle,var(--accent) 6.5px,transparent 7px)}
.cue-route b{margin-top:10.5px}
.cue-queue{gap:5px}
.cue-queue li{padding:3px 8px}
.cue-queue i{width:12px;height:12px}
.cue-queue em{font-size:10px;line-height:16px}