:root{
  --paper:#FFFFFF; --surface:#F6F6F6; --ink:#111111; --ink-2:#555555; --line:#E4E4E4;
  --blue:#2F5BFF; --blue-ink:#1F45E0; --dark:#111111; --on-dark:#FFFFFF;
  --display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  box-sizing:border-box;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0E0E0E; --surface:#181818; --ink:#F5F5F5; --ink-2:#A8A8A8; --line:#2A2A2A; --blue:#5B7FFF; --blue-ink:#8AA3FF; --dark:#000000;
}}
:root[data-theme="dark"]{--paper:#0E0E0E; --surface:#181818; --ink:#F5F5F5; --ink-2:#A8A8A8; --line:#2A2A2A; --blue:#5B7FFF; --blue-ink:#8AA3FF; --dark:#000000}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{transition:none!important}}
body{margin:0; background:var(--paper); color:var(--ink); font:400 1.0625rem/1.6 var(--body); -webkit-font-smoothing:antialiased}
a{color:inherit} img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:4px}
.skip{position:absolute; left:-9999px} .skip:focus{left:1rem; top:1rem; z-index:99; background:var(--ink); color:var(--paper); padding:.6rem 1rem; border-radius:8px}
.wrap{width:min(1120px,100% - 2rem); margin-inline:auto}
.narrow{max-width:760px; margin-inline:auto}
h1,h2,h3{font-family:var(--display); margin:0; line-height:1.06; letter-spacing:-.025em}
h1{font-size:clamp(2.3rem,6.4vw,4.4rem); font-weight:800; letter-spacing:-.04em; max-width:16ch}
h2{font-size:clamp(1.8rem,4.4vw,2.8rem); font-weight:800; max-width:20ch}
.h-sm{font-size:1.3rem; margin-bottom:1rem}
h3{font-size:1.2rem; font-weight:700; letter-spacing:-.01em}
p{margin:0}
.lede{color:var(--ink-2); font-size:1.15rem; max-width:56ch; margin-top:1.1rem}
.eyebrow{font:700 .85rem var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin:1.2rem 0 .8rem}

header{position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; justify-content:space-between; height:70px; gap:1rem}
.logo{display:flex; align-items:center; gap:.55rem; text-decoration:none; font:800 1.6rem/1 var(--display); letter-spacing:-.045em}
.logo svg{width:34px; height:34px; flex:none}
header nav ul{display:flex; gap:1.7rem; list-style:none; margin:0; padding:0}
header nav a{text-decoration:none; font-weight:600; color:var(--ink-2)} header nav a:hover{color:var(--ink)}
@media (max-width:840px){header nav{display:none}}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.75rem 1.35rem; border-radius:999px; font:700 1rem/1 var(--display); text-decoration:none; border:2px solid transparent; cursor:pointer; transition:background .15s}
.btn-main{background:var(--ink); color:var(--paper)} .btn-main:hover{background:var(--blue); color:#fff}
.btn-line{border-color:currentColor}
.btn-blue{background:var(--blue); color:#fff} .btn-blue:hover{background:var(--blue-ink)}
.bar .btn{min-height:44px; padding:.55rem 1.1rem; font-size:.95rem}
.cta-row{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}

.crumbs ol{display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin:0; padding:0; font-size:.9rem; color:var(--ink-2)}
.crumbs li+li::before{content:"/"; margin-right:.4rem; opacity:.5}
.crumbs a{text-decoration:none} .crumbs a:hover{text-decoration:underline}

.hero-s{padding:clamp(2rem,5vw,3.5rem) 0 clamp(3rem,7vw,5rem); border-bottom:1px solid var(--line)}
section.s{padding:clamp(3rem,7vw,5.5rem) 0}
section.s.tight{padding:clamp(2.2rem,5vw,3.5rem) 0}
.head{display:flex; justify-content:space-between; align-items:end; gap:1rem 3rem; flex-wrap:wrap; margin-bottom:2.4rem}
.head .lede{margin-top:0}
.prose p{color:var(--ink-2); font-size:1.12rem; margin-top:1rem; max-width:62ch}
.prose h2{margin-bottom:.4rem}

.needs{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
@media (max-width:720px){.needs{grid-template-columns:1fr}}
.needs li{display:grid; grid-template-columns:28px 1fr; gap:.8rem; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:1.4rem}
.needs svg{width:22px; height:22px; color:var(--blue); margin-top:.15rem}
.needs p{color:var(--ink-2); margin-top:.35rem}

.band{background:var(--dark); color:var(--on-dark)}
.band h2{margin-bottom:2.2rem}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; counter-reset:s}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:s; border-top:1px solid rgba(255,255,255,.22); padding-top:1.1rem}
.steps li::before{content:counter(s); display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:2px solid var(--blue); color:#fff; font:800 1.3rem/1 var(--display); margin-bottom:.9rem}
.steps p{margin-top:.45rem; opacity:.85; font-size:1rem}

.cards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.cards{grid-template-columns:1fr}}
.cards a{display:block; position:relative; height:100%; text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:1.4rem 3rem 1.4rem 1.4rem; transition:border-color .15s}
.cards a:hover{border-color:var(--blue)}
.cards p{color:var(--ink-2); margin-top:.35rem; font-size:.98rem}
.cards span{position:absolute; right:1.2rem; top:1.25rem; color:var(--blue); font-weight:700}

.chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem}
.chips a{display:inline-flex; align-items:center; min-height:44px; padding:.5rem 1rem; border:1px solid var(--line); border-radius:999px; text-decoration:none; font-weight:600}
.chips a:hover{border-color:var(--blue); color:var(--blue)}

details{border-bottom:1px solid var(--line)}
.s h2 + details{margin-top:1.2rem}
summary{cursor:pointer; list-style:none; padding:1.2rem 2.5rem 1.2rem 0; font:700 1.12rem var(--display); position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; position:absolute; right:.2rem; top:1rem; font-size:1.6rem; font-weight:500; color:var(--blue); transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 1.3rem; color:var(--ink-2); max-width:62ch}

.cta{background:var(--dark); color:var(--on-dark)}
.cta .lede{color:inherit; opacity:.75}
.cta .btn-line{color:#fff; border-color:rgba(255,255,255,.5)}

.foot{padding:3rem 0 2rem; font-size:.95rem; color:var(--ink-2); border-top:1px solid var(--line)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot .logo{color:var(--ink)}
.foot-note{margin-top:.9rem; max-width:34ch}
.foot h2{font:700 .85rem var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin-bottom:.8rem}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.25rem}
.foot nav a{text-decoration:none; display:inline-block; padding:.35rem 0} .foot a:hover{color:var(--ink); text-decoration:underline}
.foot-base{margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--line)}