@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
:root{--paper:#faf9f6;--ink:#292b30;--muted:#565d65;--accent:#006b80;--line:#d9dce0;--cyan:#00a7c8;--yellow:#ffbd20;--crimson:#ff004c}
body{font-family:"DM Sans",system-ui,sans-serif}
h1,h2,h3,.wordmark{font-family:Manrope,system-ui,sans-serif;font-weight:800;letter-spacing:-.035em;line-height:1.12}
h1{font-size:clamp(36px,4.2vw,56px)}
h2{font-size:clamp(28px,3.2vw,44px)}
h3{font-size:23px}
.wrap{width:min(1126px,88%)}
header{border-bottom:3px solid;border-image:linear-gradient(90deg,var(--cyan) 0 33%,var(--yellow) 33% 66%,var(--crimson) 66%) 1}
nav{padding:14px 0}
nav .identity{display:grid;gap:2px}
.wordmark{font-size:25px}
.parent-link{font-size:12px;color:var(--accent)}
nav a:hover,.foot a:hover{text-decoration:underline;text-underline-offset:4px}
.hero{grid-template-columns:1.05fr 1fr;gap:42px;padding:42px 0 38px}
.hero figure{width:min(100%,480px);justify-self:end}
.hero img{border-radius:14px;aspect-ratio:auto;height:auto;object-fit:contain}
.caption{font-family:"DM Sans",system-ui,sans-serif}
.label{letter-spacing:.13em;margin-bottom:14px}
.lede{margin:16px 0 22px}
.button{background:#d60040;border-radius:3px}
.button:hover{background:#b80037}
section{padding:42px 0}
.grid{gap:16px;margin-top:24px}
.grid article{border:1px solid var(--line);border-top:3px solid var(--cyan);border-radius:8px;background:#fff;padding:22px}
.grid article:nth-child(2){border-top-color:var(--yellow)}
.grid article:nth-child(3){border-top-color:var(--crimson)}
.grid article p{margin-bottom:0}
.dark{background:#e8f7fa;color:var(--ink)}
.dark p{color:var(--muted)}
.dark .label{color:var(--accent)}
.sample{background:#fff;border-color:var(--line);border-radius:8px}
.sample code{color:var(--accent)}
.sample hr{border-color:var(--line)}
@media(max-width:800px){.hero{grid-template-columns:1fr;gap:24px;padding:30px 0}.grid{grid-template-columns:1fr}}
@media(max-width:420px){nav{gap:10px}nav div{gap:9px}.wordmark{font-size:21px}.caption{font-size:9px}}
.section-intro{max-width:650px;color:var(--muted);margin:14px 0 0}
.steps{list-style:none;counter-reset:onboarding;margin:0;padding:0}
.steps li{position:relative;counter-increment:onboarding;border-bottom:1px solid var(--line);padding:18px 0 18px 42px}
.steps li:first-child{padding-top:0}
.steps li::before{content:counter(onboarding,decimal-leading-zero);position:absolute;left:0;color:var(--accent);font-weight:800;font-size:13px}
.steps p{margin:7px 0 0}
.profession-grid ul{margin:12px 0 0;padding-left:18px;color:var(--muted)}
.profession-grid li+li{margin-top:6px}