/* AI Expert Hire shared styles. Tokens: ink #0E1412, ink-2 #4A5450, ink-3 #7C867F, ground #F6F7F2, tint-green #E6FBEF, tint-sand #F3EFE3, volt #22E68A, volt-dark #12B86A, cobalt #1F47F5, amber-dark #D99A00, night #0B100E */
html{scroll-behavior:smooth}
img,svg,video{max-width:100%}
img{height:auto}
:focus-visible{outline:3px solid #1F47F5;outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:8px;background:#0E1412;color:#fff;padding:10px 16px;border-radius:10px;z-index:100}
.skip:focus{left:16px}

*{box-sizing:border-box}
body{margin:0;background:#F6F7F2;color:#0E1412;font-family:Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#1F47F5}a:hover{color:#1434C4}
.wrap{max-width:1280px;margin:0 auto;padding:0 80px}
.sec{padding:120px 0}
.bg-ground{background:#F6F7F2}.bg-white{background:#FFFFFF}.bg-green{background:#E6FBEF}.bg-sand{background:#F3EFE3}.bg-night{background:#0B100E;color:#FFFFFF}
.ac-volt{color:#12B86A}.ac-cobalt{color:#1F47F5}.ac-amber{color:#D99A00}.ac-voltlight{color:#22E68A}
.h1{font-size:64px;line-height:1.04;letter-spacing:-.025em;font-weight:800;margin:0;color:#0E1412}
.h2{font-size:54px;line-height:1.08;letter-spacing:-.022em;font-weight:800;margin:0;color:#0E1412}
.h3{font-size:26px;line-height:1.2;letter-spacing:-.012em;font-weight:700;margin:0;color:#0E1412}
.h4{font-size:20px;line-height:1.3;letter-spacing:-.01em;font-weight:700;margin:0;color:#0E1412}
.lead{font-size:20px;line-height:1.55;color:#4A5450;margin:0}
.body{font-size:17px;line-height:1.6;color:#4A5450;margin:0}
.cap{font-size:14px;line-height:1.5;color:#7C867F;margin:0}
.intro{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;margin:0 auto 72px}
.intro .lead{max-width:640px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#0E1412;margin:0}
.eyebrow .sq{width:10px;height:10px;background:#22E68A;border-radius:2px;display:inline-block}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 28px;border-radius:999px;background:#22E68A;color:#0E1412;font-weight:700;font-size:18px;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;font-family:inherit;box-shadow:0 8px 24px rgba(34,230,138,.28);transition:background .15s}
.btn:hover{background:#12B86A;color:#0E1412}
.btn.sm{height:48px;padding:0 22px;font-size:16px;box-shadow:none}
.btn.sec{background:#FFFFFF;border:1px solid #D9DED9;box-shadow:none}
.btn.sec:hover{background:#F6F7F2}
.btn.ghost{background:transparent;border:1px solid #D9DED9;box-shadow:none}
.btn.ghost:hover{background:#FFFFFF}
.micro{font-size:14px;color:#7C867F;margin:12px 0 0;line-height:1.4}
.card{background:#FFFFFF;border:1px solid #E6E9E4;border-radius:20px;padding:32px;min-width:0}
.grid3>*,.grid4>*,.grid5>*,.rolegrid>*{min-width:0}
.ill{background:#F6F7F2;border-radius:14px;height:200px;overflow:hidden;position:relative;margin:0 0 28px;min-width:0;width:100%}
.chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;background:#F6F7F2;color:#0E1412;font-size:13px;font-weight:600;white-space:nowrap;line-height:1}
.chip.w{background:#FFFFFF;border:1px solid #E6E9E4}
.chip .dot{width:7px;height:7px;border-radius:50%;background:#22E68A;display:inline-block;flex:none}
.pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px;border-radius:999px;background:#E6FBEF;color:#0E1412;font-size:13px;font-weight:700;white-space:nowrap;line-height:1}
.pill .dot{width:8px;height:8px;border-radius:50%;background:#22E68A;display:inline-block;flex:none}
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#0B100E;color:#FFFFFF;font-weight:700;letter-spacing:.02em;flex:none}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.checks li{display:flex;align-items:center;gap:14px;font-size:18px;color:#0E1412;font-weight:500}
.checks .bx{width:24px;height:24px;border-radius:7px;background:#22E68A;color:#0E1412;display:inline-flex;align-items:center;justify-content:center;flex:none}
.nav{height:84px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#0E1412;font-weight:800;font-size:21px;letter-spacing:-.02em}
.brand .mk{width:28px;height:28px;background:#22E68A;border-radius:8px;display:inline-block;position:relative}
.brand .mk:after{content:"";position:absolute;left:8px;top:8px;width:12px;height:12px;border-radius:3px;background:#0E1412}
.brand.light{color:#FFFFFF}
.links{display:flex;gap:34px;list-style:none;margin:0;padding:0}
.links a{display:inline-flex;align-items:center;gap:6px;color:#0E1412;text-decoration:none;font-size:15px;font-weight:600}
.links a:hover{color:#12B86A}
.strip{background:#FFC53D;color:#0E1412;font-size:13px;font-weight:700;letter-spacing:.02em;text-align:center;padding:9px 16px}
.grid3{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:32px}
.grid4{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:24px}
.grid5{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:24px}
.faq{display:flex;flex-direction:column;gap:16px}
.faq .q{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#F6F7F2;border-radius:16px;padding:28px 32px;font-size:22px;font-weight:700;color:#0E1412;text-align:left;border:0;width:100%;cursor:pointer;font-family:inherit}
.faq .q:hover{background:#EEF1EB}
.faq .q svg{color:#4A5450;flex:none}
.tile{background:#EDF0EA;border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:6px;min-height:188px}
.tile .n{font-size:38px;line-height:1;font-weight:800;letter-spacing:-.03em;color:#0E1412;white-space:nowrap}
.tile .l{font-size:17px;color:#4A5450;font-weight:500}
.tile .chip{margin-top:auto;align-self:flex-start;background:#FFFFFF}
.cmp{background:#FFFFFF;border:1px solid #E6E9E4;border-radius:20px;overflow:hidden}
.cmp table{width:100%;border-collapse:collapse;font-size:16px}
.cmp th,.cmp td{padding:22px 24px;text-align:center;border-bottom:1px solid #EEF1EB;color:#0E1412}
.cmp th{font-weight:600;color:#4A5450;font-size:16px;padding-top:28px;padding-bottom:20px}
.cmp td:first-child,.cmp th:first-child{text-align:left;color:#4A5450;font-weight:500;width:30%}
.cmp td{font-weight:700}
.cmp tr:last-child td{border-bottom:0}
.cmp .us{background:#E6FBEF}
.cmp th.us{color:#0E1412;font-weight:800;font-size:18px}
.cmp .no{color:#A7AFAA;display:inline-flex}
.cmp .yes{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#22E68A;color:#0E1412}
.cmp .part{color:#7C867F;font-weight:600;font-size:14px}
.rolepill{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;padding:0 24px 0 28px;border-radius:999px;background:#FFC53D;color:#0E1412;font-size:16px;white-space:nowrap;font-weight:700;text-decoration:none;transition:background .15s}
.rolepill:hover{background:#F2B52B;color:#0E1412}
.rolegrid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:20px}
.ft{background:#0B100E;color:#FFFFFF;padding:88px 0 40px}
.ft .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:48px}
.ft h4{margin:0 0 20px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#FFFFFF}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ft a{color:#B9C2BC;text-decoration:none;font-size:15px}.ft a:hover{color:#22E68A}
.ft .legal{margin-top:64px;padding-top:28px;border-top:1px solid #1E2622;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:#7C867F}
.ft .legal a{font-size:13px;color:#7C867F}
.xcard{position:absolute;width:272px;background:#FFFFFF;border-radius:20px;padding:16px 20px 22px;box-shadow:0 20px 50px rgba(14,20,18,.12);border:1px solid #E6E9E4;display:flex;flex-direction:column;gap:16px}
.xcard .role{font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.xcard .lbl{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7C867F}
.xcard .row{display:flex;gap:8px;flex-wrap:wrap}
.rowline{display:flex;align-items:center;gap:10px;background:#FFFFFF;border:1px solid #E6E9E4;border-radius:12px;padding:8px 12px;height:40px}
.stack{display:flex}
.stack .av{width:24px;height:24px;font-size:9px;border:2px solid #FFFFFF;margin-left:-8px}
.stack .av:first-child{margin-left:0}
.rowline .nm{font-size:12.5px;font-weight:600;color:#0E1412;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowline .ct{font-size:12px;color:#7C867F;font-weight:600}
.bar{display:flex;align-items:center;gap:12px;height:34px;border-radius:9px;padding:0 12px;font-size:13px;font-weight:600;color:#0E1412;position:relative}
.bar .v{margin-left:auto;font-weight:700;color:#4A5450;font-size:13px}
.ck{display:flex;align-items:center;gap:10px;background:#FFFFFF;border:1px solid #E6E9E4;border-radius:12px;padding:0 12px;height:38px;font-size:13px;font-weight:600;color:#0E1412;white-space:nowrap}
.ck .o{width:18px;height:18px;border-radius:50%;border:2px solid #22E68A;display:inline-flex;align-items:center;justify-content:center;color:#12B86A;flex:none}
.ck.on .o{background:#22E68A;color:#0E1412}
.tlbl{position:absolute;left:0;top:-14px;background:#FFFFFF;border:1px solid #E6E9E4;border-radius:12px 12px 0 0;padding:10px 18px;font-size:14px;font-weight:700;color:#0E1412;border-bottom:0}
.step{background:#FFFFFF;border:1px solid #E6E9E4;border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:14px;min-height:232px}
.step .num{width:40px;height:40px;border-radius:12px;background:#22E68A;color:#0E1412;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:17px}
.logo{font-weight:800;color:#9AA39D;font-size:19px;letter-spacing:-.01em;white-space:nowrap;display:flex;align-items:center;gap:8px;justify-content:center}
.logo .ic{width:20px;height:20px;border-radius:6px;background:#C3CAC5;display:inline-block;flex:none}
.logo.caps{text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:700}
.logo.light{font-weight:500;font-size:20px;letter-spacing:-.02em}
.logo.wide{font-weight:700;letter-spacing:.06em;font-size:15px}
.logowall{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 56px;align-items:center}
.triad{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.triad span{height:52px;padding:0 24px;border-radius:999px;border:1px solid #2A332E;color:#FFFFFF;font-size:17px;font-weight:600;display:inline-flex;align-items:center}
.triad span b{color:#22E68A;font-weight:700;margin-right:6px}
@media (max-width:1100px){.wrap{padding:0 40px}.h1{font-size:52px}.h2{font-size:42px}.grid3,.grid4,.grid5,.rolegrid{grid-template-columns:repeat(2, minmax(0, 1fr))}.links{display:none}.ft .cols{grid-template-columns:1fr 1fr}.sec{padding:88px 0}}
@media (max-width:720px){.wrap{padding:0 16px}.h1{font-size:40px}.h2{font-size:34px}.grid3,.grid4,.grid5,.rolegrid{grid-template-columns:1fr}.ft .cols{grid-template-columns:1fr}.sec{padding:64px 0}.faq .q{font-size:18px;padding:20px}.cmpbox{overflow-x:auto}.cmp{min-width:720px}.hero-grid{grid-template-columns:1fr !important}.intro{margin-bottom:48px}}

.roles-grid{}
@media (max-width:1100px){.roles-grid{grid-template-columns:1fr !important}.collage{grid-template-columns:repeat(2, minmax(0, 1fr)) !important}}
@media (max-width:720px){.collage{grid-template-columns:1fr !important}.quoteband{grid-template-columns:1fr !important;padding:32px !important}.quoteband blockquote{font-size:26px !important}}


/* mobile nav */
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;width:44px;height:44px;border-radius:12px;border:1px solid #D9DED9;background:#FFFFFF;display:inline-flex;align-items:center;justify-content:center}
.mnav summary::-webkit-details-marker{display:none}
.mnav .panel{position:absolute;right:0;top:54px;width:260px;background:#FFFFFF;border:1px solid #E6E9E4;border-radius:16px;box-shadow:0 20px 50px rgba(14,20,18,.14);padding:10px;display:flex;flex-direction:column;z-index:50}
.mnav .panel a{display:block;padding:12px 14px;border-radius:10px;color:#0E1412;text-decoration:none;font-weight:600;font-size:16px}
.mnav .panel a:hover{background:#F6F7F2}
.mnav .panel .btn{margin-top:6px;height:48px;font-size:16px;box-shadow:none}
@media (max-width:1100px){.mnav{display:block}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media (max-width:900px){.two{grid-template-columns:1fr}}
.herocards{min-width:0}
@media (max-width:1100px){.hero-grid{grid-template-columns:1fr !important}.herocards{height:auto !important;display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}.herocards .xcard{position:static !important;transform:none !important;width:auto !important}.herocards>p{position:static !important;grid-column:1 / -1}}
@media (max-width:720px){.herocards{grid-template-columns:1fr}}
@media (max-width:720px){.h1{font-size:clamp(34px,10vw,40px)}.h2{font-size:clamp(28px,8vw,34px)}.lead{font-size:18px}.btn{height:52px;font-size:16px;padding:0 22px}.card{padding:24px}.nav{height:72px}}

/* shared fix (agentPages): .btn.sec was picking up the section .sec padding from the 1100/720 media queries, which turned secondary buttons into tall pills. */
.btn.sec{padding:0 28px}
@media (max-width:720px){.btn.sec{padding:0 22px}}

/* sticky header (2026-10-06 feedback) */
header.bg-ground{position:sticky;top:0;z-index:60;background:rgba(246,247,242,.94);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid rgba(14,20,18,.06)}
.mnav .panel .plbl{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7C867F;padding:6px 14px 2px}
.mnav .panel a.act{font-weight:700;background:#F6F7F2;margin-top:6px}
.mnav .panel a.act:first-of-type{background:#22E68A}
.mnav .panel a.act:hover{background:#E6FBEF}

/* feedback round 2: keep the Hire button in the pinned bar on phones */
@media (max-width:720px){.nav{gap:12px}.nav .btn.sm{height:38px;padding:0 12px;font-size:13px;gap:5px;box-shadow:none}.nav .btn.sm .arr{width:16px;height:16px}.brand{font-size:15px;gap:7px;white-space:nowrap}.brand .mk{width:22px;height:22px}.brand .mk:after{left:6px;top:6px;width:10px;height:10px}}
@media (max-width:360px){.nav .btn.sm{font-size:12px;padding:0 10px}.brand{font-size:14px}}
