:root{
  --bg:#F3F7F7; --surface:#FFFFFF; --surface-2:#E8F0F0; --text:#2B3036; --muted:#5E6A72; --line:#D5E0E0;
  --accent:#0B8179; --accent-ink:#FFFFFF; --accent-soft:rgba(11,129,121,.12); --nav-bg:rgba(243,247,247,.88);
  --logo-main:#2B3036; --logo-accent:#0B8179; --shadow:0 10px 30px rgba(43,48,54,.10); --err:#B3261E;
  --arena:#14181B; --arena-line:#2A3238; --arena-border:#444C54; --arena-muted:#A8B7BD; --bug:#FF6B6B; --ok:#2FD3C1; --arena-text:#E8F0F0;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1B1F23; --surface:#2B3036; --surface-2:#353C43; --text:#FFFFFF; --muted:#A8B7BD; --line:#444C54;
    --accent:#2FD3C1; --accent-ink:#1B1F23; --accent-soft:rgba(47,211,193,.14); --nav-bg:rgba(27,31,35,.88);
    --logo-main:#FFFFFF; --logo-accent:#2FD3C1; --shadow:0 10px 30px rgba(0,0,0,.35); --err:#FF8A80;
  }
}
:root[data-theme="dark"]{
  --bg:#1B1F23; --surface:#2B3036; --surface-2:#353C43; --text:#FFFFFF; --muted:#A8B7BD; --line:#444C54;
  --accent:#2FD3C1; --accent-ink:#1B1F23; --accent-soft:rgba(47,211,193,.14); --nav-bg:rgba(27,31,35,.88);
  --logo-main:#FFFFFF; --logo-accent:#2FD3C1; --shadow:0 10px 30px rgba(0,0,0,.35); --err:#FF8A80;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:70;background:var(--nav-bg);backdrop-filter:blur(10px)}
h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif;line-height:1.1;margin:0}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
a{color:var(--accent)}
[hidden]{display:none!important}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
.lm{fill:var(--logo-main)} .la{fill:var(--logo-accent)} .ls{stroke:var(--logo-accent)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--nav-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;min-height:68px}
.brand svg{height:46px;width:auto;display:block}
.nav nav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.nav nav a{color:var(--text);text-decoration:none;padding:10px 12px;border-radius:8px;font-weight:500;font-size:.95rem}
.nav nav a:hover{background:var(--accent-soft)}
.iconbtn{min-width:44px;min-height:44px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.cta-h{min-height:42px;padding:0 18px;font-size:.92rem;white-space:nowrap}
@media(max-width:480px){.brand svg{height:36px}.cta-h{padding:0 14px;font-size:.88rem}.nav{gap:10px}}
@media(max-width:900px){.nav nav{display:none}.cta-h{margin-left:auto}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:10px;border:2px solid var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none;transition:background-color .15s,border-color .15s}
.btn:hover{background:color-mix(in srgb,var(--accent) 86%,#000);border-color:color-mix(in srgb,var(--accent) 86%,#000)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.btn:disabled{opacity:.5;cursor:default}

.hero{position:relative;padding:56px 0 48px}
.hero .grid{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
@media(max-width:900px){.hero .grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.4rem,6vw,4.4rem);margin:0 0 16px;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p.lead{font-size:1.15rem;color:var(--muted);max-width:34rem;margin:0 0 26px}
.cta{display:flex;gap:12px;flex-wrap:wrap}

.arena-card{background:var(--arena);border-radius:12px;border:1px solid var(--arena-line);box-shadow:var(--shadow);overflow:hidden;color:var(--arena-text)}
.hud{display:flex;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--arena-line);font-size:.82rem}
.hud span b{color:var(--ok)}
#arena{position:relative;height:340px;touch-action:manipulation;background:
 radial-gradient(circle at 50% 120%,rgba(47,211,193,.12),transparent 60%),
 repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.04) 31px 32px),
 repeating-linear-gradient(90deg,transparent 0 31px,rgba(255,255,255,.04) 31px 32px)}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:22px;background:color-mix(in srgb,var(--arena) 86%,transparent);z-index:5}
.overlay .ovh{font-family:"Space Grotesk",Inter,system-ui,sans-serif;font-size:1.5rem;font-weight:700;line-height:1.1} .overlay p{margin:0;color:var(--arena-muted);max-width:22rem}
.overlay .btn{background:var(--ok);border-color:var(--ok);color:var(--arena)}
.overlay .btn.ghost{background:transparent;color:var(--arena-text);border-color:var(--arena-border)}
.overlay .btn:hover{background:color-mix(in srgb,var(--ok) 85%,#fff);border-color:color-mix(in srgb,var(--ok) 85%,#fff)}
.overlay .btn.ghost:hover{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--arena-text)}
.bug{position:absolute;width:48px;height:48px;padding:0;border:0;background:none;color:var(--bug);cursor:crosshair;transition:transform .1s;z-index:2}
.bug:hover{transform:scale(1.15)}
.bug svg{width:100%;height:100%;display:block}
.bug.squashed{color:var(--ok);pointer-events:none;animation:pop .4s forwards}
.bug.escape{pointer-events:none;animation:fade .4s forwards}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(0);opacity:0}}
@keyframes fade{to{opacity:0;transform:scale(.4)}}
.float{position:absolute;color:var(--ok);font-weight:700;pointer-events:none;animation:up .8s forwards;z-index:3}
@keyframes up{to{transform:translateY(-34px);opacity:0}}
.skip{display:block;text-align:center;padding:10px;font-size:.82rem;color:var(--arena-muted)}
.skip a{color:var(--ok);display:inline-block;padding:12px 8px;min-height:44px}

section{padding:72px 0}
.kick{color:var(--accent);font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
h2{font-size:clamp(1.9rem,4vw,2.9rem);margin:10px 0 14px;letter-spacing:-.015em}
.sub{color:var(--muted);max-width:40rem;margin:0 0 34px;font-size:1.05rem}
/* tools strip: a static, wrapping list (the duplicate group existed only for the old scrolling animation) */
.marquee{border-block:1px solid var(--line);padding:16px 22px;background:var(--surface)}
.marquee .mono{display:flex;justify-content:center;font-weight:700;color:var(--muted);font-size:.9rem}
.marquee .grp{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;max-width:1116px}
.marquee .grp[aria-hidden="true"]{display:none}
.marquee span{white-space:nowrap}

/* flow */
.flow{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:32px;box-shadow:var(--shadow)}
.bar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-bottom:22px}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
.flow h3{font-size:1.7rem;margin:6px 0 4px}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
@media(max-width:900px){.choices{grid-template-columns:1fr}}
.choice{text-align:left;background:var(--bg);border:2px solid var(--line);border-radius:12px;padding:20px;transition:all .2s}
.choice:hover{border-color:var(--accent);transform:translateY(-3px)}
.choice b{display:block;font-family:"Space Grotesk",Inter,system-ui,sans-serif;font-size:1.25rem;margin-bottom:4px}
.choice span{color:var(--muted);font-size:.95rem}
.topt{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}
.topt.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){.topt,.topt.three{grid-template-columns:1fr}}
.topt .btn{justify-content:flex-start;text-align:left;border-radius:12px;min-height:52px;padding:10px 18px}
.flowfoot{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:10px}
.link{background:none;border:0;color:var(--muted);text-decoration:underline;padding:8px;min-height:44px}
.res{border:2px solid var(--accent);border-radius:12px;padding:20px;margin-top:6px;background:var(--accent-soft)}
.res ul{margin:10px 0 12px;padding-left:20px}.res li{margin:2px 0}
.res h3{font-size:1.5rem}
.opts{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.pathbar{background:var(--accent-soft);border-block:1px solid var(--line);padding:12px 0;font-size:.95rem}
.pathbar .wrap{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:960px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cards,.cards.two{grid-template-columns:1fr}}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;transition:border-color .15s}
.card:hover{border-color:var(--accent)}
a.card:hover{box-shadow:0 6px 20px -8px color-mix(in srgb,var(--accent) 45%,transparent)}
/* A linked card signals itself through its title: it turns accent and an arrow slides in */
a.card h3{color:var(--text);transition:color .2s}
a.card h3::after{content:"";display:inline-block;width:.38em;height:.38em;margin-left:.35em;vertical-align:.12em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateX(-6px) rotate(45deg);opacity:0;transition:transform .2s ease,opacity .2s}
a.card:hover h3{color:var(--accent)}
a.card:hover h3::after{opacity:1;transform:translateX(0) rotate(45deg)}
.indgrid a.card:hover{box-shadow:none}
.card.reco{border:2px solid var(--accent)}
.card.reco::after{content:"Recommended for you";position:absolute;top:-11px;right:16px;background:var(--accent);color:var(--accent-ink);font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:4px}
.card.wide{grid-column:1/-1}
.lv{display:block;color:var(--muted);font-weight:600;font-size:.85rem;margin-bottom:6px}
.card h3{font-size:1.25rem;margin-bottom:8px}
.card p{margin:0;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.chips span{font-size:.78rem;padding:3px 8px;border-radius:4px;background:var(--surface-2);color:var(--muted)}
.ph{border:2px dashed var(--line);border-radius:12px;padding:24px;color:var(--muted)}
.ph b{display:block;color:var(--text);font-size:1.1rem;margin-bottom:6px}

/* domains */
.doms{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.doms{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.doms{grid-template-columns:1fr}}
.dom{text-align:left;background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:16px;transition:all .2s}
.dom:hover{border-color:var(--accent)}
.dom[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.dom b{display:block;font-family:"Space Grotesk",Inter,system-ui,sans-serif;font-size:1.05rem}
.dom small{color:var(--muted)}
.dpanel{margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px}
.dpanel h3{font-size:1.5rem;margin-bottom:6px}

/* pipeline */
.pipe{background:var(--arena);color:var(--arena-text);border-radius:12px;padding:30px 24px;border:1px solid var(--arena-line)}
.track{display:flex;align-items:flex-start}
.pn{flex:0 0 auto;width:78px;text-align:center;background:none;border:0;color:inherit;padding:0;font:inherit}
.pn .dot{width:44px;height:44px;border-radius:50%;margin:0 auto 8px;display:grid;place-items:center;border:2px solid #3A444B;font-size:.85rem;color:#A8B7BD;background:var(--arena);position:relative;z-index:1;transition:all .3s;font-family:"JetBrains Mono",monospace}
.pn .t{display:block}
.pn b{display:block;font-size:.82rem}
.pn small{display:block;font-size:.68rem;color:#8A98A0;line-height:1.3;margin-top:2px}
.pn:hover .dot,.pn.sel .dot{border-color:var(--ok)}
.pn.run .dot{border-color:#FFD166;color:#FFD166;box-shadow:0 0 0 7px rgba(255,209,102,.16)}
.pn.pass .dot{background:var(--ok);border-color:var(--ok);color:#14181B}
.pl{flex:1 1 0;min-width:12px;height:44px;display:flex;align-items:center}
.pl span{display:block;position:relative;height:3px;width:100%;background:#3A444B;border-radius:3px}
.pl i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--ok);border-radius:3px;transition:width .6s ease;opacity:0;visibility:hidden}
.pl.go i,.pl.on i{opacity:1;visibility:visible;box-shadow:0 0 10px rgba(47,211,193,.7)}
.pl i::after{content:"";position:absolute;right:-6px;top:-4px;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 12px var(--ok);display:none}
.pl.go i::after{display:block}
.pl.on i{width:100%}
.pdesc{margin-top:18px;min-height:48px;font-size:.84rem;color:#A8B7BD}
.pdesc b{color:var(--ok)}
@media(max-width:1020px){
  .track{flex-direction:column;align-items:flex-start;padding-left:4px}
  .pn{display:flex;align-items:center;gap:14px;width:auto;text-align:left}
  .pn .dot{margin:0}
  .pl{flex:none;width:44px;height:30px;justify-content:center}
  .pl span{width:3px;height:100%}
  .pl i{width:100%;height:0;transition:height .6s ease}
  .pl i::after{right:-4px;top:auto;bottom:-6px}
  .pl.on i{height:100%;width:100%}
}
/* proof */
.ph3{margin:40px 0 16px;font-size:1.4rem}
.sample{background:var(--arena);color:var(--arena-text);border-radius:12px;padding:24px;border:1px solid var(--arena-line)}
.sample-h{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.78rem;color:#A8B7BD}
.sample-h span:first-child{color:var(--ok);font-weight:700}
.tabs{display:flex;gap:8px;margin:16px 0 18px;flex-wrap:wrap}
.tabs button{min-height:44px;padding:0 18px;border-radius:8px;border:2px solid #3A444B;background:transparent;color:#E8F0F0;font-weight:600}
.tabs button[aria-pressed="true"]{background:var(--ok);border-color:var(--ok);color:#14181B}
.srgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:760px){.srgrid{grid-template-columns:1fr}}
.srrow{margin-bottom:16px}
.srrow .lab{display:flex;justify-content:space-between;font-size:.85rem;color:#A8B7BD;margin-bottom:6px}
.srrow .lab b{color:#E8F0F0}
.meter{height:10px;border-radius:99px;background:#2A3238;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--ok);transition:width .7s ease}
.sev{display:flex;gap:12px;align-items:flex-end;height:120px;border-bottom:1px solid #3A444B}
.sev div{flex:1;text-align:center;font-size:.72rem;color:#A8B7BD;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.sev i{display:block;width:100%;border-radius:8px 8px 0 0;height:0;transition:height .7s ease;margin-top:4px}
.sevlab{display:flex;gap:12px;font-size:.72rem;color:#A8B7BD;margin-top:6px}.sevlab span{flex:1;text-align:center}
.pill{display:inline-block;padding:6px 14px;border-radius:8px;font-weight:700;font-size:.85rem}
.pill.go{background:rgba(47,211,193,.16);color:var(--ok)}.pill.warn{background:rgba(255,209,102,.16);color:#FFD166}.pill.no{background:rgba(255,107,107,.16);color:var(--bug)}
.srnote{margin-top:12px;color:#A8B7BD;font-size:.9rem}
.deliver{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:860px){.deliver{grid-template-columns:1fr}}
.deliver div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.deliver b{display:block;font-family:"Space Grotesk",Inter,system-ui,sans-serif;font-size:1.05rem}
.deliver b::before{content:"✓ ";color:var(--accent)}
.deliver span{color:var(--muted);font-size:.92rem}
.commit{list-style:none;margin:0;padding:0;max-width:760px}
.commit li{border-top:1px solid var(--line);padding:14px 0;color:var(--muted)}
.commit b{color:var(--text)}
.faq{max-width:780px;display:grid;gap:10px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px 18px}
.faq summary{cursor:pointer;font-weight:600;min-height:48px;display:flex;align-items:center}
.faq p{margin:0 0 14px;color:var(--muted)}

.enq{margin-top:14px;background:none;border:0;color:var(--accent);font-weight:700;padding:10px 0;min-height:44px;text-align:left}
.enq:hover{text-decoration:underline}
.who{margin:10px 0 0!important;font-size:.9rem}
.trybox{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:22px;background:var(--accent-soft);border:1px solid var(--line);border-radius:12px;padding:22px 24px}
.trybox b{display:block;font-family:"Space Grotesk",Inter,system-ui,sans-serif;font-size:1.15rem}
.trybox span{color:var(--muted)}
/* domain panel */
.dcols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:14px}
@media(max-width:760px){.dcols{grid-template-columns:1fr}}
.dcol{border:1px solid var(--line);border-radius:12px;padding:18px;background:var(--bg)}
.dcol h4{margin:0 0 6px;font-family:"Space Grotesk",Inter,system-ui,sans-serif;font-size:1.1rem}
.dcol .btn{margin-top:16px}
/* contact wizard */
.cwrap{display:grid;grid-template-columns:1.25fr .9fr;gap:22px;align-items:start}
@media(max-width:900px){.cwrap{grid-template-columns:1fr}}
.wiz{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:30px;box-shadow:var(--shadow)}
.wiz h2,.wiz h3{font-size:1.6rem;margin:6px 0 4px}
.chipbtn{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:8px;border:2px solid var(--line);background:var(--bg);font-weight:600;transition:all .15s}
.chipbtn:hover{border-color:var(--accent)}
.chipbtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chiprow{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
label{font-weight:600;font-size:.9rem;display:grid;gap:6px;margin-top:12px}
input,textarea{font:inherit;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--text);min-height:48px;width:100%}
.err{color:var(--err);font-size:.9rem;min-height:1.2em;margin-top:8px}
.note{font-size:.82rem;color:var(--muted);margin-top:12px}
.brief{position:sticky;top:calc(env(safe-area-inset-top,0px) + 90px);background:var(--arena);color:var(--arena-text);border-radius:12px;padding:22px;border:1px solid var(--arena-line)}
.brief h2,.brief h3{font-size:1.1rem;margin-bottom:12px;color:var(--ok)}
.brief button.row{display:flex;justify-content:space-between;gap:12px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--arena-line);padding:11px 0;color:inherit;min-height:44px}
.brief .row span:first-child{color:#A8B7BD;font-size:.85rem}
.brief .row b{font-weight:600;text-align:right}
.brief .row b.empty{color:#6B7780;font-weight:400}
.brief .talk{margin-top:14px;font-size:.88rem;color:#A8B7BD}
.timeline{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.timeline li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.timeline .n{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:700}
.sumline{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.sumline span{color:var(--muted)}
.sumline b{text-align:right}
footer{border-top:1px solid var(--line);padding:34px 0 46px;color:var(--muted);font-size:.9rem}
footer .frow{display:flex;gap:28px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
footer svg{height:34px;width:auto;display:block}
.fnote{margin:10px 0 0;max-width:24rem}
.flinks{display:flex;gap:6px;flex-wrap:wrap}
.flinks a{color:var(--text);text-decoration:none;padding:12px;border-radius:8px;font-weight:500}
.flinks a:hover{background:var(--accent-soft)}
.fcopy{margin-top:22px;border-top:1px solid var(--line);padding-top:12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.flegal a{color:var(--muted);padding:12px 8px;display:inline-block}
.flegal a:hover{color:var(--accent)}
.legal-wrap{max-width:820px;margin:0 auto;padding:34px 22px 80px}
.legal-wrap .link{margin-bottom:12px}
.brief .talk a{color:var(--ok)}

.lmeta{color:var(--muted);margin:6px 0 18px;font-size:.95rem}
.lintro{font-size:1.1rem;color:var(--muted);margin:0 0 24px}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-bottom:12px}
.toc b{font-family:"Space Grotesk",Inter,system-ui,sans-serif}
.toc ol{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 22px}
@media(max-width:640px){.toc ol{grid-template-columns:1fr}}
.toc a,.tocb{color:var(--text);background:none;border:0;text-align:left;padding:8px 0;min-height:40px;text-decoration:none;font:inherit;font-size:.95rem;cursor:pointer;display:block;width:100%}
.toc a:hover,.tocb:hover{color:var(--accent);text-decoration:underline}
.lsec h2{font-size:1.35rem;margin:34px 0 8px}
.lsec p,.lsec li{color:var(--muted);margin:0 0 10px}
.lsec ul{padding-left:22px;margin:0 0 12px}
.lsec a{color:var(--accent)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===== multi-page additions ===== */
#site-header{min-height:62px}
footer{padding:26px 0 30px}
.fsimple{display:flex;justify-content:space-between;align-items:center;gap:14px 28px;flex-wrap:wrap}
.fsimple svg{height:30px;width:auto;display:block}
.fbrand{display:inline-block;padding:8px 0}
.fcopy{margin-top:14px;padding-top:6px}
.flegal{display:inline-flex;gap:4px;flex-wrap:wrap;align-items:center}

#site-header,#site-footer{display:contents}
.nojs{display:flex;flex-wrap:wrap;gap:6px 14px;padding:12px 22px;border-bottom:1px solid var(--line)}
.nojs a{color:var(--text);padding:6px 4px}
.site-header .nav{min-height:60px;gap:16px}
.brand svg{height:38px}
.nav nav a{padding:8px 12px}
.themebtn{background-color:transparent;border:0;color:var(--muted);padding:12px 8px;min-height:44px;font-size:.9rem}
.themebtn:hover{color:var(--accent)}
.skip-link{position:absolute;left:-999px;top:8px;z-index:100;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.skip-link:focus{left:12px}
.site-header .nav,.nav{position:relative}
.nav nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:700}
.menubtn{display:none}
@media(max-width:900px){
  .menubtn{display:inline-grid;place-items:center}
  body.menu-open .nav nav{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 22px 16px;box-shadow:var(--shadow);margin:0}
  body.menu-open .nav nav a{padding:14px 12px;border-radius:12px}
}
@media(max-width:560px){.cta-h{display:none}.menubtn{margin-left:auto}body.menu-open .nav nav .navcta{display:block;margin-top:8px;background:var(--accent);color:var(--accent-ink);text-align:center;font-weight:700}.brand svg{height:36px}}
.nav nav .navcta{display:none}
a.card{display:block;color:inherit;text-decoration:none}
.phero{padding:34px 0 40px;border-bottom:1px solid var(--line);position:relative}
.phero .wrap{position:relative}
.phero h1{font-size:clamp(2.1rem,5vw,3.5rem);margin:6px 0 14px;letter-spacing:-.02em;max-width:18ch}
.phero.wide h1{max-width:24ch}
.phero .lead{font-size:1.15rem;color:var(--muted);max-width:42rem;margin:0 0 24px}
.phero .crumbs{margin-bottom:14px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;font-size:.88rem;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.6}
.crumbs a{color:var(--muted);text-decoration:none;padding:6px 0;display:inline-block}
.crumbs a:hover{color:var(--accent)}
/* Plain text links: a faint hairline that a solid line sweeps across on hover */
.lsec a,.talk a,.note a,.err a,.skip a,.fcopy a,.crumbs a,.res a,.flegal a,.themebtn{
  text-decoration:none;background-origin:content-box;
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(color-mix(in srgb,currentColor 35%,transparent),color-mix(in srgb,currentColor 35%,transparent));
  background-size:0 2px,100% 1px;background-position:0 100%,0 100%;background-repeat:no-repeat;
  transition:background-size .3s ease,color .2s}
.lsec a:hover,.talk a:hover,.note a:hover,.err a:hover,.skip a:hover,.fcopy a:hover,.crumbs a:hover,.res a:hover,.flegal a:hover,.themebtn:hover{background-size:100% 2px,100% 1px}
.sec{padding:56px 0}
.sec.alt{background:var(--surface);border-block:1px solid var(--line)}
.sec h2{margin-top:0;margin-bottom:20px}
.sec h2:has(+ .sub){margin-bottom:14px}
/* plain checked list: no box per line */
.tick{list-style:none;padding:0;margin:0;display:grid;gap:4px;max-width:780px}
.tick li{position:relative;padding:6px 0 6px 30px;color:var(--muted)}
.tick li::before{content:"✓";position:absolute;left:4px;top:6px;color:var(--accent);font-weight:700}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.steps.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.steps,.steps.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps,.steps.three{grid-template-columns:1fr}}
.steps li{border-top:2px solid var(--line);padding-top:14px}
.steps li::before{counter-increment:s;content:counter(s);display:block;color:var(--accent);font-family:"Space Grotesk",Inter,sans-serif;font-weight:700;font-size:1.6rem;line-height:1;margin-bottom:10px}
.steps b{display:block;font-family:"Space Grotesk",Inter,system-ui,sans-serif;font-size:1.1rem;margin-bottom:4px}
.steps span{color:var(--muted);font-size:.95rem}
.chips.big span{font-size:.9rem;padding:5px 10px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:760px){.two{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px}
.sec.alt .panel{background:var(--bg)}
.panel h3{font-size:1.3rem;margin-bottom:8px}
.panel p{color:var(--muted);margin:0 0 6px}
.panel .btn{margin-top:14px}
/* industries: a ruled list rather than another grid of boxes */
.indgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
@media(max-width:700px){.indgrid{grid-template-columns:1fr}}
.indgrid .card{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:18px 0 20px}
.indgrid .card h3{font-size:1.15rem;margin-bottom:4px}
/* closing call to action: a plain ruled row, not a dark box */
.ctaband{border-top:2px solid var(--text);padding-top:28px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ctaband h2{font-size:clamp(1.5rem,3vw,2rem);margin:0}
.ctaband p{margin:6px 0 0;color:var(--muted)}
/* cross-links written as sentences */
.prose{max-width:44rem;color:var(--muted);font-size:1.05rem;margin:0}
/* Links inside sentences: soft chips with a sliding chevron, solid on hover */
.prose{line-height:1.95}
.prose a,.sub a{display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-radius:8px;background:var(--accent-soft);color:var(--accent);font-weight:600;text-decoration:none;line-height:1.75;white-space:nowrap;transition:background-color .2s,color .2s}
.prose a::after,.sub a::after{content:"";width:.42em;height:.42em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .2s ease}
.prose a:hover,.sub a:hover{background:var(--accent);color:var(--accent-ink)}
.prose a:hover::after,.sub a:hover::after{transform:translateX(3px) rotate(45deg)}
@media(max-width:560px){.prose a,.sub a{white-space:normal}}
.tracklist{list-style:none;margin:0;padding:0;max-width:760px}
.tracklist li{border-top:1px solid var(--line);padding:14px 0;display:grid;gap:2px}
.tracklist a{display:inline-flex;align-items:center;gap:8px;font-family:"Space Grotesk",Inter,sans-serif;font-weight:700;font-size:1.1rem;color:var(--text);text-decoration:none;transition:color .2s}
.tracklist a::after{content:"";width:.45em;height:.45em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .2s ease}
.tracklist a:hover{color:var(--accent)}
.tracklist a:hover::after{transform:translateX(4px) rotate(45deg)}
.tracklist span{color:var(--muted);font-size:.95rem}
/* service work samples: code, tables, a bug report, a week plan */
.codeblock{margin:0;max-width:880px;background:var(--arena);color:var(--arena-text);border:1px solid var(--arena-line);border-radius:12px;overflow:hidden}
.codeblock figcaption{padding:10px 18px;border-bottom:1px solid var(--arena-line);font-size:.82rem;color:var(--arena-muted);font-family:"JetBrains Mono",ui-monospace,monospace}
.codeblock pre{margin:0;padding:16px 18px;overflow-x:auto;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.8rem;line-height:1.6}
.dtable{width:100%;max-width:980px;border-collapse:collapse;font-size:.95rem}
.dtable th{text-align:left;font-size:.82rem;font-weight:600;color:var(--muted);padding:0 14px 10px 0;border-bottom:2px solid var(--line)}
.dtable td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top}
.dtable td:first-child{color:var(--text);font-weight:600;width:22%}
@media(max-width:700px){
  .dtable thead{display:none}
  .dtable tr{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  .dtable td{display:block;border:0;padding:3px 0;width:auto!important}
  .dtable td+td::before{content:attr(data-label);display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-top:6px}
}
.bugcard{max-width:820px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--bug);border-radius:12px;padding:20px 22px}
.bugmeta{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.8rem;color:var(--muted)}
.bugmeta span:first-child{color:var(--text);font-weight:700}
.bugcard h3{font-size:1.2rem;margin:10px 0 14px;line-height:1.3}
.bugcard dl{display:grid;grid-template-columns:120px 1fr;gap:8px 16px;margin:0}
.bugcard dt{font-weight:600;font-size:.9rem}
.bugcard dd{margin:0;color:var(--muted)}
.bugcard ol{margin:0;padding-left:18px}
@media(max-width:560px){.bugcard dl{grid-template-columns:1fr;gap:2px}.bugcard dd{margin-bottom:8px}}
.steps .gate{display:block;margin-top:10px;font-style:normal;font-size:.9rem;font-weight:600;color:var(--text)}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:760px){.cols3{grid-template-columns:1fr}}
.cols3 h3{font-size:1.15rem;margin-bottom:6px}
.cols3 p{margin:0;color:var(--muted)}
.fcols{display:grid;grid-template-columns:repeat(4,auto);gap:22px 44px}
@media(max-width:900px){.fcols{grid-template-columns:repeat(2,auto)}}
.fcols b{display:block;margin-bottom:6px;font-family:"Space Grotesk",Inter,system-ui,sans-serif;color:var(--text)}
.fcols a{display:block;color:var(--muted);text-decoration:none;padding:7px 0;font-size:.92rem}
.fcols a:hover{color:var(--accent);text-decoration:underline}
.modules{counter-reset:m;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:760px){.modules{grid-template-columns:1fr}}
.modules li{counter-increment:m;position:relative;padding:14px 16px 14px 56px;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--muted)}
.sec.alt .modules li{background:var(--bg)}
.modules li::before{content:counter(m);position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:700;font-size:.9rem}
.choices.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.choices.c2,.choices.c3{grid-template-columns:1fr}}
.narrow{max-width:780px}
.metric-note{color:var(--muted);font-size:.9rem;margin-top:10px}
.nf{text-align:center;padding:90px 0}
.nf h1{font-size:clamp(2.4rem,7vw,4.5rem)}
.legal-wrap{max-width:820px;margin:0 auto;padding:34px 22px 80px}
.legal-wrap h1{margin-top:8px}