/* Computelab.co design system. Loaded last on every page.
   One family (Geist), seven sizes (14 16 18 20 28 36 48), one accent (#FF6A4D), one neutral ramp, 8px spacing grid. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&display=swap");

:root{
  --ds-font:"Geist",system-ui,-apple-system,sans-serif;
  --ds-bg:#0B0C0B; --ds-surface:#121412; --ds-raise:#181A18;
  --ds-line:rgba(227,229,225,.08); --ds-line2:rgba(227,229,225,.14);
  --ds-fg:#E3E5E1; --ds-fg2:#A8ABA6; --ds-fg3:#6C6E6A; --ds-ink:#10120F;
  --ds-accent:#FF6A4D; --ds-accent-dim:rgba(255,106,77,.12);
  --ds-s1:14px; --ds-s2:16px; --ds-s3:18px; --ds-s4:20px; --ds-s5:28px; --ds-s6:36px; --ds-s7:48px;
  /* legacy tokens folded into the one palette */
  --font-v2-sans:var(--ds-font); --font-v2-mono:var(--ds-font);
  --color-v2-primary-black:var(--ds-bg);
  --color-v2-primary-neutral-1000:var(--ds-surface); --color-v2-primary-neutral-950:var(--ds-surface); --color-v2-primary-neutral-900:var(--ds-raise);
  --color-v2-primary-neutral-700:#4B4D4A; --color-v2-primary-neutral-600:var(--ds-fg3); --color-v2-primary-neutral-500:var(--ds-fg2);
  --color-v2-primary-neutral-300:var(--ds-fg); --color-v2-primary-neutral-200:var(--ds-fg); --color-v2-primary-neutral-100:var(--ds-fg); --color-v2-primary-neutral-0:#FFFFFF;
  --color-v2-primary-green-100:var(--ds-accent); --color-v2-primary-green-200:var(--ds-accent); --color-v2-primary-green-300:var(--ds-accent-dim);
  --color-v2-secondary-purple:var(--ds-accent); --color-v2-secondary-blue:var(--ds-accent); --color-v2-secondary-pink:var(--ds-accent);
  --color-v2-secondary-yellow:var(--ds-accent); --color-v2-secondary-orange:var(--ds-accent); --color-v2-secondary-lime:var(--ds-accent);
  --bg:var(--ds-bg); --surface:var(--ds-surface); --raise:var(--ds-raise); --line:var(--ds-line); --line2:var(--ds-line2);
  --fg:var(--ds-fg); --fg2:var(--ds-fg2); --fg3:var(--ds-fg3); --accent:var(--ds-accent); --accent-dim:var(--ds-accent-dim);
  --pass:var(--ds-accent); --coral:var(--ds-accent); --mute:var(--ds-fg2);
  --display:var(--ds-font); --body:var(--ds-font); --mono:var(--ds-font);
}

/* one family everywhere */
html body, html body *:not(svg):not(svg *), html body input, html body button, html body textarea, html body select{font-family:var(--ds-font)!important;letter-spacing:0}
html,body{background:var(--ds-bg)!important;color:var(--ds-fg)}

/* type scale: every text element snaps to one of seven sizes */
html body :where(*:not(svg):not(svg *)){font-size:var(--ds-s2)!important;line-height:1.55}
html body h1, html body h1 *{font-size:var(--ds-s7)!important;line-height:1.1!important;font-weight:500!important;letter-spacing:-.01em!important}
html body h2, html body h2 *{font-size:var(--ds-s6)!important;line-height:1.15!important;font-weight:500!important;letter-spacing:-.01em!important}
html body h3, html body h3 *, html body h4, html body h4 *{font-size:var(--ds-s4)!important;line-height:1.35!important;font-weight:500!important}
html body .big, html body .big *, html body .big2, html body .stat b, html body .metric .val, html body .val, html body .kpi, html body .num-lg{font-size:var(--ds-s5)!important;line-height:1.2!important;font-weight:500!important}
html body .big{font-size:var(--ds-s7)!important}
html body .sub, html body p.s, html body p.l, html body .lead, html body .hx p.s{font-size:var(--ds-s3)!important}
html body .eyebrow, html body .k, html body .k2, html body .tag, html body em.u, html body .note, html body small, html body small *,
html body code, html body pre, html body pre *, html body kbd, html body .hp, html body figcaption, html body .badge, html body footer, html body footer *,
html body .chips span, html body .pills button, html body .pills button *, html body .ra, html body .rl, html body .legend, html body th, html body label,
html body .cred-note, html body .metric .k, html body .metric .note, html body .row, html body .row *, html body .pk, html body .muted small, html body .tagline{font-size:var(--ds-s1)!important;letter-spacing:0!important;text-transform:none!important}
html body .eyebrow, html body .k, html body .k2, html body .pk{color:var(--ds-fg2)!important;font-weight:400!important}
@media(max-width:860px){
  html body h1, html body h1 *{font-size:var(--ds-s6)!important}
  html body h2, html body h2 *{font-size:var(--ds-s5)!important}
  html body .big{font-size:var(--ds-s6)!important}
}

/* one palette: neutrals plus the accent, nothing else */
html body a{color:inherit}
html body .btn.pri, html body .v2-pill, html body .btn:not(.sec):not(.ghost){background:var(--ds-fg);color:var(--ds-ink)!important;border:0}
html body .btn.sec, html body .btn.ghost{background:rgba(255,255,255,.05)!important;color:var(--ds-fg)!important;border:0!important}
html body .btn{height:36px;padding:0 16px;border-radius:48px;display:inline-flex;align-items:center;gap:8px;font-weight:400!important}

/* spacing: 8px grid */
html body section{padding-block:128px}
html body .wrap{max-width:1072px;margin-inline:auto;padding-inline:24px}
@media(max-width:860px){html body section{padding-block:80px}}

/* diagrams use the same family */
html body svg text, html body svg tspan{font-family:var(--ds-font)!important}

/* wide tables scroll inside their own box, never the page */
html body table{max-width:100%}

/* shared nav fits on a phone */
@media(max-width:600px){
  html body .v2-right{gap:4px}
  html body .v2-right .plain{padding:0 8px;font-size:var(--ds-s1)!important}
  html body .v2-pill{height:32px;padding:0 12px;font-size:var(--ds-s1)!important}
  html body .brand, html body .brand *{font-size:var(--ds-s2)!important}
}

/* links: same color as their text, quiet underline inside prose */
html body main a:not(.btn):not(.v2-pill):not(.button), html body main a:not(.btn):not(.v2-pill):not(.button):visited{color:inherit!important}
html body p a:not(.btn), html body li a:not(.btn){text-decoration:underline;text-decoration-color:var(--ds-line2);text-underline-offset:3px}
html body th{color:var(--ds-fg2)!important}
html body button:not(.btn):not(.v2-pill){color:var(--ds-fg2)}
html body button:not(.btn):not(.v2-pill)[aria-pressed=true], html body button:not(.btn):not(.v2-pill).active, html body button:not(.btn):not(.v2-pill).on, html body button:not(.btn):not(.v2-pill)[aria-selected=true]{color:var(--ds-fg)}

/* headings inside cards and panels use the card title size */
html body :is(.pc,.card,.col,.cd,.panel,.tier,.fig,.viz,.rc,.cell,.item,.box) :is(h2,h3,h4), html body :is(.pc,.card,.col,.cd,.panel,.tier,.fig,.viz,.rc,.cell,.item,.box) :is(h2,h3,h4) *{font-size:var(--ds-s4)!important;line-height:1.35!important}
/* quiet labels: sentence case, never shouty */
html body button, html body .btn, html body .tag, html body .eyebrow, html body .k, html body .k2, html body .tno, html body .pk, html body .t, html body .r{text-transform:none!important;letter-spacing:0!important}

/* ===== Review pass 1: consolidated from the 82-page review ===== */

/* 1. nothing wider than the screen */
html,body{overflow-x:clip;max-width:100%}
html{background:var(--ds-bg)!important}
html body .hero, html body .v2-hero-glow, html body .hv, html body .hx{position:relative;overflow:hidden}
html body :is(.grid2,.grid3,.grid4,.split,.two,.cols,.wrap,section,.detail,.stats,.evidence-grid,.company) > *{min-width:0}
html body :is(img,video,canvas,pre,.fig,.panel,.card,.dpan){max-width:100%}
html body main :is(p,a,h1,h2,h3,li){overflow-wrap:break-word}
html body .wrap .wrap{padding-inline:0;max-width:none}
html body .table-scroll{overflow-x:auto;max-width:100%}
@media(max-width:860px){
  html body .v2-header .in{padding-inline:24px;grid-template-columns:minmax(0,1fr) auto!important;gap:8px}
  html body .v2-header .v2-links{display:none}
  html body .v2-right{min-width:0}
  html body :is(.orch-brow,.orch-flow){grid-template-columns:minmax(0,1fr)!important}
}

/* 2. one background black, no green or blue anywhere */
:root{--lime-glow:transparent}
html body :is(.hero,.v2-hero-glow,header.hero,.legacy-content,.dark,.darkband,.offbg){background-color:var(--ds-bg)!important;background-image:none!important}
html body :is(.hero,.v2-hero-glow,footer)::before{background-image:none!important;background:none!important}
html body footer{background:var(--ds-bg)!important;border-top:1px solid var(--ds-line)}
html body .t1-banner{background:var(--ds-surface)!important;border:1px solid var(--ds-line)!important}
html body .orch-step.verdict{background:var(--ds-accent-dim)!important;border-color:var(--ds-accent)!important}
html body input[type=range], html body input[type=checkbox], html body input[type=radio]{accent-color:var(--ds-accent)}
html body svg .bx.ok{stroke:var(--ds-accent)!important;fill:var(--ds-accent-dim)!important}
html body thead, html body thead th{background:var(--ds-surface)!important}

/* 3. no shouty labels */
html body *, html body *::before, html body *::after{text-transform:none!important}
html body :is(.kicker,.label,.vertical,.figcap,.trialnote,.stat span,th,.t1-pill,.t3-ctrl label){letter-spacing:0!important}
html body :is(.t1-pill,.badge,.tag){background:transparent!important;border:1px solid var(--ds-line2)!important;color:var(--ds-fg2)!important;font-weight:400!important}

/* 4. readable diagrams */
html body svg text, html body svg .lb{fill:var(--ds-fg)}
html body svg .sm, html body svg .sub, html body svg .cap{fill:var(--ds-fg2)!important}
html body svg g[fill="#1a1c19"] text, html body svg [fill="#1a1c19"]{fill:var(--ds-fg2)!important}
html body .company svg{width:100%;height:auto}

/* 5. one primary button (white pill), one secondary (glass pill); accent only marks the active state */
html body :is(a.button,.t3-btn,.legacy-content .button,.company .button), html body :is(a.button,.t3-btn):visited{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:48px;background:var(--ds-fg)!important;color:var(--ds-ink)!important;border:0!important;text-decoration:none!important;font-weight:400!important}
html body .t3-btn.sec{background:rgba(255,255,255,.05)!important;color:var(--ds-fg)!important}
html body main a.btn.pri, html body main a.button, html body main a.v2-pill{color:var(--ds-ink)!important}
html body main a.btn.sec, html body main a.btn.ghost{color:var(--ds-fg)!important}
html body .actions{justify-content:flex-start!important;align-items:center;gap:8px;flex-wrap:wrap}
html body :is(p,ul,ol,div.source-links) + :is(a.button,a.btn,.ctas,.actions){margin-top:16px}

/* 6. filter, tab and role pills: dark idle, quiet selected, never light, never invisible */
html body :is(.rolepick,.lbtabs,.filters,.tabs,.visual-controls) button{height:36px;padding:0 16px;border-radius:48px;background:rgba(255,255,255,.04)!important;color:var(--ds-fg2)!important;border:1px solid var(--ds-line2)!important}
html body :is(.rolepick,.lbtabs,.filters,.tabs,.visual-controls) button:is(.on,.active,[aria-pressed=true],[aria-selected=true]){background:var(--ds-accent-dim)!important;color:var(--ds-fg)!important;border-color:rgba(255,106,77,.5)!important}
html body .bar-track{background:var(--ds-raise);border-radius:4px;overflow:hidden}
html body .bar-track .bar{background:var(--ds-fg3)!important}
html body .bar-track .bar.after{background:var(--ds-accent)!important}

/* 7. section padding for page bands only, not for sections used as cards */
html body main section section, html body :is(.t2-card,.t3-card,.card) section{padding-block:24px}

/* 8. work and case study template on the 8px grid */
html body .breadcrumbs{color:var(--ds-fg3);margin-bottom:16px}
html body .breadcrumbs a{color:var(--ds-fg2)!important}
html body .page-head{padding-bottom:48px;border-bottom:1px solid var(--ds-line)}
html body .page-head .eyebrow{margin:0 0 16px}
html body .page-head h1{margin:0 0 16px}
html body .page-head .lead{max-width:720px;margin:0}
html body .company .detail{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding-block:48px;align-items:start;border-bottom:1px solid var(--ds-line)}
html body .company .detail h2, html body .company .detail h2 *{font-size:var(--ds-s5)!important;line-height:1.2!important;margin:0}
html body .company .detail p{margin:0 0 8px}
@media(min-width:861px){html body .company .detail{grid-template-columns:320px minmax(0,1fr);gap:48px}}
html body .company .detail:last-of-type{border-bottom:0}
html body .page-end:empty{display:none}
html body .source-links{display:flex;flex-direction:column;gap:8px;margin-top:16px}
html body .related{display:flex;flex-wrap:wrap;gap:8px 24px!important}
html body .related a{color:var(--ds-fg2)!important;text-decoration:none!important}
html body .company dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 24px;margin:16px 0}
html body .company dt{color:var(--ds-fg3)}
html body .company dd{margin:0;color:var(--ds-fg2)}
@media(max-width:650px){html body .company dl{grid-template-columns:minmax(0,1fr);gap:0}html body .company dd{margin-bottom:8px}}

/* 9. stat cards: equal, value over label on one left edge */
html body .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:48px 0}
html body .stat{display:flex;flex-direction:column;gap:8px;padding:24px;background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:12px;height:100%}
html body .stat :is(strong,b){font-size:var(--ds-s5)!important;line-height:1.2!important;font-weight:500!important;margin:0;padding:0}
html body .stat span{margin:0;padding:0;color:var(--ds-fg2)}
@media(max-width:860px){html body .stats{grid-template-columns:minmax(0,1fr)}}
html body .benchmark{padding:24px;border:1px solid var(--ds-line);border-radius:12px;background:var(--ds-surface)}

/* 10. cards in a row: equal height, same padding, button at the foot */
html body :is(.grid2,.grid3,.grid4){align-items:stretch}
html body :is(.grid2,.grid3,.grid4) > :is(.card,.tier,.cd,.pc){display:flex;flex-direction:column;padding:24px;height:100%}
html body :is(.card,.tier,.pc) > :is(.btn,a.button):last-child{margin-top:auto;align-self:flex-start}
html body .pc .btn{width:auto!important;align-self:flex-start}

/* 11. two-column sections share a top edge */
html body :is(.hero,.v2-hero-glow,section) :is(.split,.two,.grid2,.g){align-items:start}
html body .dpan{align-self:start}

/* 12. legal pages read left-aligned */
html body main :is(.legal,.prose){text-align:left!important;max-width:720px}
html body main :is(.legal,.prose) h2{margin:48px 0 16px}

/* 13. footer columns share one top edge, one muted colour */
html body footer :is(p,li,a,span){color:var(--ds-fg3)}
html body footer a:hover{color:var(--ds-fg)}
html body footer [class*="pill"]{background:none!important;border:0!important;padding:0!important}

/* phone header: logo and one action never collide */
@media(max-width:480px){html body .v2-right .v2-pill{display:none}html body .v2-header .in{grid-template-columns:auto auto!important;justify-content:space-between}}
/* chart cards breathe on the 8px grid */
html body :is(.benchmark,.chart,.viz) > * + *{margin-top:16px}
html body :is(.benchmark,.chart) .bar-track{margin-top:8px}
html body :is(.benchmark,.chart) .visual-controls{margin-top:24px}

/* ===== Review pass 2 ===== */
html body main a.button:not(.btn):not(.v2-pill), html body main a.button:not(.btn):not(.v2-pill) *{color:var(--ds-ink)!important}
html body footer .brand, html body footer .brand *{color:var(--ds-fg)!important}
html body footer .brand .co, html body footer .brand .wm-co{color:var(--ds-accent)!important}
html body footer :is(.tagline,.tagline *,[class*=tag],[class*=pill],.badge){border:0!important;outline:0!important;box-shadow:none!important;background:none!important;padding:0!important;border-radius:0!important;color:var(--ds-fg2)!important}
html body main :is(h1,h2,h3,p,.eyebrow,li){text-align:left}
html body main section > :first-child{margin-top:0}
html body details summary{color:var(--ds-fg)!important}
html body .t1-pill{border-radius:8px!important;white-space:normal}
html body .dpan *, html body .hero [class*=tile] *{font-size:var(--ds-s1)!important}
html body .dpan{min-height:0!important;height:auto!important}
html body .dpan [class*=step] > *{opacity:1!important}
html body .pills, html body .chips{margin-bottom:16px}
html body .legacy-content .source-links{display:grid;gap:8px;margin-top:16px}
html body .legacy-content .source-links a{margin:0!important}

/* ===== Review pass 3 ===== */
html body main a.button, html body main a.button:visited, html body main a.button *{color:var(--ds-ink)!important;opacity:1!important}
html body .v2-foot p.tag, html body footer p.tag{border:0!important;padding:0!important;background:none!important;border-radius:0!important}
html body .company :is(.source-links,.research-index) a, html body .company .detail div > a:not(.button){display:block;width:max-content;max-width:100%;margin:0 0 8px!important}
html body .company .source-links{gap:8px;margin-top:16px}
html body .company .detail div > a:not(.button){text-decoration:underline;text-decoration-color:var(--ds-line2);text-underline-offset:4px;color:var(--ds-fg)!important}
html body .company .detail p + :is(a,.source-links){margin-top:16px}
html body .company .detail svg{max-width:480px;display:block;margin:8px 0 24px}
@media(max-width:650px){html body .company .detail div:has(> svg){overflow-x:auto}html body .company .detail svg{width:480px;max-width:none}}
@media(max-width:860px){html body .company .detail:last-of-type{padding-bottom:0}html body .company .wrap{padding-bottom:48px}}
html body .page-head .lead{line-height:1.5}
html body .evidence-grid{row-gap:32px;align-items:start}
html body .bar-meta{flex-wrap:nowrap;gap:16px}
html body .bar-meta span:last-child{white-space:nowrap;text-align:right}
@media(max-width:600px){html body .related{flex-direction:column;gap:8px}}
html body .chart-head{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:16px}

/* ===== Review pass 4 (design only) ===== */
html body svg text.lb{fill:var(--ds-fg)!important}
html body svg .bx{fill:var(--ds-accent-dim)!important;stroke:var(--ds-accent)!important}
html body svg :is(.bx,.tr,.bar,rect,path){transition:none!important;animation:none!important}
html body svg text.sm, html body svg .sm{font-size:16px!important}
html body table + :is(p,div,h4,ul){margin-top:16px}
html body :is(.fig,.panel,.card) ul{padding-left:20px;margin-left:0}
html body :is(.stats,.grid4):has(> :nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(max-width:860px){html body :is(.stats,.grid4):has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))!important}}
html body .ctas + p{margin-top:24px}
html body .hero :is(.split,.grid2,.two){align-items:start!important}
html body .hero :is(.split,.grid2,.two) > *{align-self:start!important}
html body footer :is(.tag,.tagline){border:0!important;padding:0!important;background:none!important}
html body .badge{border-radius:48px!important;padding:2px 10px}
html body #bio, html body #bio :is(section,header,.hero){background-color:var(--ds-bg)!important}
html body #bio :is(.kicker,.vertical,.label){color:var(--ds-fg2)!important}
html body .r-switcher a.active{background:var(--ds-accent-dim)!important;color:var(--ds-fg)!important;border-color:rgba(255,106,77,.5)!important}
html body main button:not(.btn):is([aria-pressed=true],[aria-selected=true],.on,.active){background:var(--ds-accent-dim)!important;color:var(--ds-fg)!important;border-color:rgba(255,106,77,.5)!important}

/* ===== No decorative dots anywhere ===== */
html body :is(.eyebrow,.k,.k2,.kicker,.tag,.pk,.label)::before, html body :is(.eyebrow,.k,.k2,.kicker,.tag,.pk,.label)::after{content:none!important;display:none!important}
html body .tag > i, html body p > i:empty, html body span > i:empty{display:none!important}
html body :is(ul,ol) > li::before{content:none!important;display:none!important}
html body main :is(ul,ol){list-style:none;padding-left:0}
html body main :is(ul,ol) > li{padding-left:0!important;margin-left:0}
html body main :is(ul,ol) > li + li{margin-top:8px}

/* ===== Layout pass 5 ===== */
html body .company .related > a{display:inline-block!important;width:auto!important;margin:0!important;text-decoration:none!important;color:var(--ds-fg2)!important}
html body .company .related{gap:8px 24px!important}
html body .company .detail svg{width:100%!important;max-width:480px!important}
html body .company .detail div:has(> svg){overflow:visible!important}
html body .company .detail div > a:not(.button) + p{margin-top:16px}
html body .company .detail a:not(.button), html body .company .detail a:not(.button) *{font-weight:400!important}
html body .company .detail p + a.button{margin-top:16px}
html body .company .detail a.button + a:not(.button){display:inline-flex;align-items:center;height:36px;margin:16px 0 0 16px;vertical-align:top}
html body .evidence-grid{row-gap:32px!important}
html body .benchmark + *{margin-top:32px}
html body .bar-meta{flex-wrap:nowrap!important}
html body .chart-head{flex-wrap:nowrap!important}
html body .chart-head span:last-child{white-space:nowrap}
html body main :is(h1,h2,h3,p,.eyebrow){margin-left:0;padding-left:0}
html body .t1-pill{text-transform:none!important;font-size:var(--ds-s1)!important}
html body main section section{padding:24px!important}
html body main section > h2:first-child{margin-top:0!important}
html body .r-switcher ~ p{color:var(--ds-fg2)!important}
html body .dpan .bar .t{height:16px!important;background:var(--ds-line2)!important;border-radius:4px}
html body .dpan .bar .f{height:100%!important;background:var(--ds-fg3)}
html body .dpan .steps{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px}
html body :is(.fig,.panel,.card) :is(.badge,[class*=badge]){border-radius:48px!important;padding:2px 12px!important}
html body .ctas + :is(p,div){margin-top:24px!important}
html body h1 :is(em,span){padding:0!important;margin:0!important}
html body table + *{margin-top:16px!important}
html body :is(.stat,.metric) *{letter-spacing:0!important}
html body .page-head .btn{margin-top:24px}
html body #bio :is(p,li,td){font-size:var(--ds-s2)!important;line-height:1.55!important}
html body :is(p,ul,ol) + :is(h3,h4){margin-top:24px!important}
html body section:last-of-type .ctas .btn + .btn{background:rgba(255,255,255,.05)!important;color:var(--ds-fg)!important}
@media(max-width:860px){html body .hero h1 + *{margin-top:16px!important}}
html body .term > .bar{display:none!important}

/* ===== One header and one background on every page ===== */
html body :is(.hx,.hx.c,.hx.d,.hv,section.hero){background:var(--ds-bg)!important;background-image:none!important}
html body .v2-header .in{max-width:1072px!important;padding:0 24px!important;margin-inline:auto;box-sizing:border-box}
html body .v2-header{background:rgba(11,12,11,.72)!important;border-bottom:0!important}
html body .v2-header .brand .mk, html body .v2-header .brand svg{filter:none!important;box-shadow:none!important}
html body .v2-header .brand .wm-co, html body footer .brand .wm-co{color:inherit!important}
html body .v2-header .brand, html body .v2-header .brand *{font-size:16px!important;font-weight:600!important}
html body .tag:not(.lt){border:0!important;padding:0!important;background:none!important;border-radius:0!important}