:root { color-scheme:light; font-family:"Manrope",Arial,sans-serif; --ink:#102f33; --muted:#687d78; --paper:#f7f8f3; --lime:#c8ff38; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; color:var(--ink); background:radial-gradient(circle at 100% 0,rgba(193,255,58,.15),transparent 25%),#f7f8f3; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.guide-header { display:flex; width:min(1420px,calc(100% - 56px)); min-height:92px; align-items:center; justify-content:space-between; margin:0 auto; border-bottom:1px solid rgba(16,47,51,.1); }
.guide-header img { display:block; width:202px; }
.guide-header nav { display:flex; gap:8px; }
.guide-header nav a { padding:10px 12px; border-radius:10px; color:#647774; font-size:11px; font-weight:600; }
.guide-header nav a.is-primary { color:#15382f; background:rgba(200,255,56,.68); }
main { width:min(1420px,calc(100% - 56px)); margin:28px auto 72px; }
.guide-hero { display:grid; min-height:440px; grid-template-columns:1fr 350px; align-items:end; gap:55px; padding:clamp(38px,5vw,72px); border-radius:30px; overflow:hidden; color:#fff; background:radial-gradient(circle at 90% 0,rgba(200,255,56,.34),transparent 30%),linear-gradient(132deg,#0b3542,#086361 58%,#168868); box-shadow:0 28px 70px rgba(15,76,67,.14); }
.guide-hero p,.guide-before>div p,.guide-finish p { margin:0 0 12px; color:#bff45a; font-size:11px; font-weight:600; text-transform:uppercase; }
.guide-hero h1 { margin:0; font-family:"Onest",Arial,sans-serif; font-size:clamp(50px,6vw,86px); font-weight:300; letter-spacing:-.065em; line-height:.94; }
.guide-hero h1 span { color:#caff45; }
.guide-hero div>strong { display:block; max-width:760px; margin-top:27px; color:rgba(255,255,255,.69); font-size:14px; font-weight:400; line-height:1.7; }
.guide-hero aside { display:grid; gap:12px; padding:25px; border:1px solid rgba(255,255,255,.17); border-radius:20px; background:rgba(255,255,255,.1); backdrop-filter:blur(14px); }
.guide-hero aside>span { color:rgba(255,255,255,.55); font-size:9px; text-transform:uppercase; }
.guide-hero aside b { font-family:"Onest",Arial,sans-serif; font-size:27px; font-weight:400; }
.guide-hero aside ul { display:grid; gap:9px; margin:3px 0 7px; padding:0; list-style:none; }
.guide-hero aside li { display:flex; gap:9px; color:rgba(255,255,255,.75); font-size:10px; }
.guide-hero aside li::before { content:"✓"; color:#caff45; }
.guide-hero aside a { display:flex; min-height:45px; align-items:center; justify-content:space-between; padding:0 14px; border-radius:11px; color:#15382f; background:var(--lime); font-size:10px; font-weight:600; }
.guide-before { display:grid; grid-template-columns:.55fr 1.45fr; gap:70px; padding:82px 3%; }
.guide-before>div p { color:#3f9841; }
.guide-before h2,.guide-finish h2 { margin:0; font-family:"Onest",Arial,sans-serif; font-size:clamp(38px,4.3vw,62px); font-weight:300; letter-spacing:-.055em; line-height:1; }
.guide-before ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.guide-before li { display:grid; min-height:170px; align-content:start; padding:22px; border:1px solid rgba(255,255,255,.9); border-radius:18px; background:rgba(255,255,255,.7); box-shadow:0 13px 32px rgba(31,72,61,.05); }
.guide-before i { color:#4e9850; font-size:9px; font-style:normal; }
.guide-before b { margin-top:40px; font-family:"Onest",Arial,sans-serif; font-size:20px; font-weight:400; }
.guide-before span { margin-top:7px; color:var(--muted); font-size:10px; line-height:1.55; }
.guide-warning { display:grid; grid-template-columns:160px 1fr; gap:32px; padding:26px 30px; border:1px solid rgba(200,255,56,.5); border-radius:18px; background:#123e3b; color:#fff; }
.guide-warning strong { color:#caff45; font-size:11px; text-transform:uppercase; }
.guide-warning p { margin:0; color:rgba(255,255,255,.72); font-size:12px; line-height:1.7; }
.guide-steps { display:grid; gap:20px; padding:82px 0; }
.guide-step { display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(38px,6vw,92px); align-items:center; padding:52px; border:1px solid rgba(255,255,255,.85); border-radius:26px; background:rgba(255,255,255,.58); scroll-margin-top:24px; }
.guide-step:nth-child(even) .guide-step-copy { order:2; }
.guide-step:nth-child(even) figure { order:1; }
.guide-step-copy>span { color:#48984b; font-size:10px; font-weight:600; text-transform:uppercase; }
.guide-step h2 { margin:13px 0 0; font-family:"Onest",Arial,sans-serif; font-size:clamp(33px,3.5vw,52px); font-weight:300; letter-spacing:-.05em; line-height:1; }
.guide-step p { margin:23px 0 0; color:#5e736e; font-size:12px; line-height:1.75; }
.guide-step p b { color:#24443f; font-weight:600; }
.guide-step small { display:block; margin-top:18px; padding:14px 15px; border-radius:12px; color:#4f6d66; background:rgba(224,249,187,.62); font-size:9px; line-height:1.55; }
.guide-step figure { min-width:0; margin:0; }
.guide-step figure>div { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border:1px solid rgba(16,47,51,.08); border-radius:18px; background:#eff3e9; box-shadow:0 20px 50px rgba(24,72,61,.12); }
.guide-step figure img { position:absolute; inset:0 auto auto 0; width:165%; max-width:none; height:auto; display:block; }
.guide-step figcaption { margin-top:11px; color:#81908d; font-size:9px; line-height:1.45; }
.guide-finish { display:grid; grid-template-columns:1fr auto; gap:60px; align-items:end; padding:52px; border-radius:26px; color:#fff; background:linear-gradient(135deg,#0b3c45,#077466); }
.guide-finish p { color:#caff45; }
.guide-finish>div>span { display:block; max-width:750px; margin-top:22px; color:rgba(255,255,255,.67); font-size:12px; line-height:1.7; }
.guide-finish-actions { display:grid; gap:9px; min-width:240px; }
.guide-finish-actions a { display:flex; min-height:48px; align-items:center; justify-content:space-between; padding:0 16px; border:1px solid rgba(255,255,255,.18); border-radius:12px; font-size:10px; font-weight:600; }
.guide-finish-actions a:first-child { color:#163b35; background:var(--lime); border-color:var(--lime); }
@media (max-width:980px) { .guide-hero{grid-template-columns:1fr}.guide-before{grid-template-columns:1fr}.guide-step{grid-template-columns:1fr}.guide-step:nth-child(even) .guide-step-copy,.guide-step:nth-child(even) figure{order:initial}.guide-finish{grid-template-columns:1fr}.guide-finish-actions{min-width:0} }
@media (max-width:640px) { .guide-header,main{width:min(100% - 28px,1420px)}.guide-header{min-height:76px}.guide-header img{width:144px}.guide-header nav a{font-size:9px;padding:9px 7px}.guide-header nav a:first-child{display:none}.guide-hero{min-height:640px;padding:30px 22px;border-radius:22px}.guide-hero h1{font-size:49px}.guide-before{padding:56px 0}.guide-before ol{grid-template-columns:1fr}.guide-before li{min-height:145px}.guide-warning{grid-template-columns:1fr;gap:10px}.guide-steps{padding:56px 0}.guide-step{gap:29px;padding:26px 20px}.guide-step figure img{width:175%}.guide-finish{gap:32px;padding:30px 22px} }