@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
:root { color-scheme:light; --ink:#17201d; --cream:#f3f0e8; --paper:#fbfaf6; --lime:#d9ff57; --green:#164c3c; --line:#d8d6cd; --muted:#626862; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 85% 5%,#d9ff5738,transparent 30rem),var(--cream); font-family:Manrope,system-ui,sans-serif; font-size:1rem; line-height:1.75; }
a { color:var(--green); text-underline-offset:4px; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible { outline:3px solid var(--green); outline-offset:5px; }
.page { width:min(1080px,calc(100% - 40px)); margin:auto; }
.skip-link { position:absolute; left:20px; top:12px; padding:10px; background:var(--paper); transform:translateY(-200%); }
.skip-link:focus { transform:none; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:26px 0; border-bottom:1px solid var(--line); }
.topbar-actions { display:flex; align-items:center; gap:20px; }
.language-link { font-size:.875rem; }
.brand { display:flex; gap:10px; align-items:center; font-size:1.1rem; font-weight:700; color:var(--ink); text-decoration:none; }
.brand img { border-radius:7px; }
.header-link { font-size:.875rem; font-weight:700; }
.hero { max-width:920px; padding:64px 0 52px; }
.eyebrow { font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green); }
h1 { font-size:clamp(2.5rem,5.7vw,4.7rem); font-weight:500; line-height:1.08; letter-spacing:-.045em; margin:20px 0 24px; text-wrap:balance; overflow-wrap:break-word; }
h2 { font-size:clamp(1.6rem,3vw,2rem); font-weight:600; line-height:1.25; letter-spacing:-.025em; margin:0 0 18px; }
h3 { font-size:1.125rem; line-height:1.45; margin:0 0 10px; }
p { margin:0 0 18px; }
.intro { max-width:720px; font-size:1.2rem; color:var(--muted); }
.cta { display:inline-flex; align-items:center; justify-content:center; gap:24px; padding:15px 22px; min-height:48px; margin-top:12px; background:var(--green); color:white; text-decoration:none; font-weight:700; }
.cta span { color:var(--lime); }
.cta:hover { background:var(--ink); }
.note { margin-top:16px; font-size:.875rem; color:var(--muted); }
.content { max-width:820px; }
.content>section { padding:36px 0; border-top:1px solid var(--line); }
.content p { max-width:72ch; }
.steps ol { padding:0; list-style:none; counter-reset:step; display:grid; gap:24px; }
.steps li { position:relative; padding-left:52px; counter-increment:step; }
.steps li::before { content:"0" counter(step); position:absolute; left:0; top:0; color:var(--green); font-size:.875rem; font-weight:700; }
.content .example { margin:12px 0; padding:30px; background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--green); }
.faq h3:not(:first-of-type) { margin-top:28px; }
.content .closing { padding-bottom:52px; }
footer { padding:32px 0; border-top:1px solid var(--line); }
footer h2 { font-size:1rem; }
footer ul { display:flex; flex-wrap:wrap; gap:12px 24px; padding:0; margin:0 0 28px; list-style:none; font-size:.875rem; }
.footer-brand { color:var(--muted); font-size:.875rem; text-decoration:none; }
@media(max-width:520px) { .page{width:calc(100% - 32px)} .topbar{flex-wrap:wrap;gap:12px;padding:20px 0} .topbar-actions{gap:12px}.brand{font-size:1rem} .hero{padding:38px 0 28px} .intro{font-size:1.0625rem} .content>section{padding:28px 0} .content .example{padding:22px} .cta{width:100%;gap:12px} footer ul{display:grid;gap:12px} }