/* Landing page only. Sapient Codelabs design language: monochrome ink on warm
   off-white, square corners, hairline borders, Lexend + Inter + mono labels. */
@font-face{font-family:"Lexend";font-weight:600 800;font-display:swap;src:url(fonts/lexend-var.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400 600;font-display:swap;src:url(fonts/inter-var.woff2) format("woff2")}
:root{
 --ink:#0A0A0A;--head:#171717;--body:#525252;--muted:#737373;--meta:#A3A3A3;
 --bg:#FAFAF9;--panel:#F5F5F4;--hair:rgba(10,10,10,.1);--hair-2:rgba(10,10,10,.2);--volt:#CCFF00;
 --display:"Lexend",ui-sans-serif,system-ui,sans-serif;--sans:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
 --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace}
*{box-sizing:border-box;border-radius:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--bg);color:var(--body);font:400 15px/1.55 var(--sans)}
a{color:inherit}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.in{max-width:1280px;margin:0 auto;padding:0 32px}
.eyebrow{margin:0;font:500 12px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* top bar */
.top{position:sticky;top:0;z-index:5;background:rgba(250,250,249,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
.top .in{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 16px var(--display);letter-spacing:-.01em}
.brand em{font-style:normal;font-weight:600;color:var(--muted)}
.q{width:28px;height:28px;display:grid;place-items:center;background:var(--ink);color:var(--bg);font:700 15px var(--display)}
.prep{display:flex;align-items:center;gap:8px;font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.mark{width:18px;height:18px;color:var(--ink);flex-shrink:0}

/* hero */
.hero{position:relative;border-bottom:1px solid var(--hair);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
 background-image:linear-gradient(rgba(10,10,10,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(10,10,10,.035) 1px,transparent 1px);background-size:64px 64px;
 -webkit-mask-image:radial-gradient(ellipse 80% 90% at 70% 0%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 90% at 70% 0%,#000 30%,transparent 80%)}
.hero .in{position:relative;padding-top:56px;padding-bottom:48px}
h1{margin:12px 0 16px;font:700 clamp(26px,3vw,34px)/1.15 var(--display);letter-spacing:-.02em;color:var(--ink)}
.lede{max-width:720px;margin:0 0 28px;font-size:15px;line-height:1.6}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);font:600 14px var(--sans);text-decoration:none;transition:background .2s ease-out,border-color .2s ease-out}
.btn:hover{background:#404040;border-color:#404040}
.btn::after{content:"";position:absolute;inset:0;transform:translateX(-120%);background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transition:transform .7s ease-out;pointer-events:none}
.btn:hover::after{transform:translateX(120%)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--hair-2)}
.btn-ghost:hover{background:transparent;border-color:var(--ink)}
.btn-ghost::after{background:linear-gradient(100deg,transparent 30%,rgba(10,10,10,.06) 50%,transparent 70%)}
.btn-sm{min-height:40px;padding:0 18px;font-size:13px;align-self:flex-start}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin:44px 0 0;border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.stats div{padding:20px 24px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);background:rgba(250,250,249,.7)}
.stats dt{font:500 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.stats dd{margin:6px 0 0;font:700 26px/1 var(--display);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}

/* roles */
.roles-wrap .in{padding-top:64px;padding-bottom:72px}
.roles{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:20px;border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.role{display:flex;flex-direction:column;gap:20px;padding:28px 24px;background:#fff;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.role h2{margin:10px 0 8px;font:700 21px/1.2 var(--display);letter-spacing:-.02em;color:var(--head)}
.role-d{margin:0;font-size:14px;color:var(--muted)}
.role ol{list-style:none;margin:0;padding:0;flex-grow:1;border-top:1px solid var(--hair)}
.role li a{display:grid;grid-template-columns:34px 1fr auto;align-items:baseline;gap:8px;padding:9px 4px;border-bottom:1px solid var(--hair);text-decoration:none;font-size:14px;color:var(--head);transition:background .15s ease-out}
.role li a:hover{background:var(--panel)}
.num{font:500 12px var(--mono);color:var(--meta);font-variant-numeric:tabular-nums}
.arr{color:var(--meta);opacity:0;transform:translateX(-4px);transition:opacity .15s ease-out,transform .15s ease-out}
.role li a:hover .arr{opacity:1;transform:none;color:var(--ink)}
.scope{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:28px 0 0;font-size:14px;color:var(--muted)}

/* footer: the Sapient sign-off */
.foot{background:var(--ink);color:#D4D4D4}
.foot .in{padding-top:44px;padding-bottom:32px}
.made{display:flex;align-items:flex-start;gap:20px;padding-bottom:36px;border-bottom:1px solid rgba(250,250,249,.12)}
.made .mark{width:32px;height:32px;color:var(--bg);margin-top:2px}
.made .eyebrow{color:#A3A3A3;display:flex;align-items:center;gap:10px}
.made .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--volt)}
.line{margin:10px 0 0;max-width:760px;font:600 clamp(17px,1.6vw,20px)/1.35 var(--display);letter-spacing:-.02em;color:#A3A3A3}
.line strong{color:var(--bg);font-weight:700}
.meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:24px;font:500 12px var(--mono);letter-spacing:.08em;color:#737373}
.meta a{color:var(--bg);text-decoration:none;border-bottom:1px solid rgba(250,250,249,.3)}
.meta a:hover{border-color:var(--volt)}
.meta a:focus-visible{outline-color:var(--volt)}

@media (max-width:1080px){.roles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){
 .in{padding:0 16px}.prep span{display:none}
 .hero .in{padding-top:48px;padding-bottom:40px}
 .stats{grid-template-columns:repeat(2,1fr)}.roles{grid-template-columns:1fr}
 .made{flex-direction:column;gap:14px}}
@media (prefers-reduced-motion:reduce){*,*::after{transition:none !important}}