:root { --cream:#f4edda; --paper:#fffdf7; --ink:#203e36; --muted:#62766b; --green:#278c4d; --deep:#14613d; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family:"Segoe UI",system-ui,-apple-system,sans-serif; background:radial-gradient(700px 360px at 50% -120px,rgba(255,255,255,.8),transparent 70%),var(--cream); }
.how-decor,.how-decor img { position:fixed; pointer-events:none; } .how-decor { inset:0; overflow:hidden; z-index:-1; } .leaves { top:-2rem; width:min(23vw,250px); opacity:.28; mix-blend-mode:multiply; } .leaves-left{left:-4rem}.leaves-right{right:-4rem}.jungle-bottom{right:0;bottom:-1px;left:0;width:100%;opacity:.19;mix-blend-mode:multiply}
.how-page { width:min(1180px,100%); margin:auto; padding:1.25rem 1rem 5rem; }
.how-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; } .brand { display:flex; align-items:center; gap:.55rem; color:var(--deep); font-size:1.25rem; font-weight:850; text-decoration:none; } .brand img { width:3rem; height:3rem; object-fit:contain; border-radius:50%; background:#edf5e3; box-shadow:0 2px 8px #203e3620; } .home-link { padding:.65rem .9rem; border:1px solid #14613d66; border-radius:12px; color:var(--deep); font-weight:750; text-decoration:none; background:#fffdf7cc; }
.intro { max-width:44rem; margin:4.5rem auto 3.5rem; text-align:center; } .eyebrow { margin:0 0:.5rem; color:var(--green); font-size:.85rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } h1,h2,p { margin-top:0; } h1 { margin-bottom:1rem; color:var(--deep); font-size:clamp(2.3rem,6vw,4.5rem); letter-spacing:-.05em; line-height:1; } .intro>p:last-child { color:var(--muted); font-size:1.12rem; line-height:1.65; }
.steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem; } .step { min-width:0; overflow:hidden; border:1px solid #ab8e5238; border-radius:24px; background:#fffdf7e8; box-shadow:0 14px 32px #29432c1c; } .step-card--wide { grid-column:span 2; display:grid; grid-template-columns:minmax(220px,.55fr) minmax(290px,1fr); align-items:center; } .step-copy { display:flex; gap:.8rem; padding:1.45rem 1.45rem .6rem; } .step-card--wide .step-copy { padding:2rem; } .step-number { display:grid; flex:0 0 2.1rem; width:2.1rem; height:2.1rem; place-items:center; border-radius:50%; color:white; background:linear-gradient(180deg,#39ad58,var(--green)); font-weight:850; } h2 { margin:.1rem 0 .45rem; color:var(--deep); font-size:1.22rem; } .step-copy p { margin-bottom:0; color:var(--muted); font-size:.96rem; line-height:1.55; }
.screenshot { position:relative; display:block; width:100%; padding:0; overflow:hidden; border:0; background:#e9e1c9; cursor:zoom-in; } .step-card--image-left .screenshot { order:-1; } .screenshot img { display:block; width:100%; aspect-ratio:1.15; object-fit:cover; object-position:top center; transition:transform .25s ease; } .step-card--wide .screenshot img { aspect-ratio:2.05; } .screenshot:hover img { transform:scale(1.025); } .screenshot span { position:absolute; right:.7rem; bottom:.7rem; padding:.35rem .55rem; border-radius:8px; color:#fff; background:#203e36d9; font-size:.78rem; font-weight:700; opacity:0; transition:opacity .2s; } .screenshot:hover span,.screenshot:focus-visible span { opacity:1; }
.closing { display:flex; align-items:center; gap:1rem; max-width:850px; margin:4rem auto 0; padding:1.2rem 1.5rem; border:1px solid #ab8e5238; border-radius:22px; background:#fffdf7e8; box-shadow:0 10px 28px #29432c18; } .closing img { width:4.5rem; height:4.5rem; object-fit:contain; } .closing h2 { margin:0 0 .25rem; } .closing p { margin:0; color:var(--muted); line-height:1.45; } .login-link { flex:0 0 auto; padding:.8rem 1rem; border-radius:12px; color:#fff; background:linear-gradient(180deg,#39ad58,var(--green)); border-bottom:3px solid var(--deep); font-weight:800; text-decoration:none; }
.image-dialog { width:min(1100px,calc(100vw - 2rem)); max-height:calc(100vh - 2rem); padding:0; border:0; border-radius:16px; background:#203e36; box-shadow:0 22px 70px #0008; } .image-dialog::backdrop { background:#10251ddd; } .image-dialog img { display:block; max-width:100%; max-height:calc(100vh - 2rem); margin:auto; } .dialog-close { position:fixed; top:1rem; right:1rem; display:grid; width:2.8rem; height:2.8rem; place-items:center; border:0; border-radius:50%; color:#fff; background:#203e36e8; font-size:2rem; cursor:pointer; }
@media (max-width:720px) { .how-page{padding:.9rem .8rem 3.5rem}.intro{margin:3.4rem auto 2.5rem}.steps{grid-template-columns:1fr;gap:1rem}.step-card--wide{grid-column:auto;display:block}.step-copy,.step-card--wide .step-copy{padding:1.2rem 1.1rem .7rem}.step-card--wide .screenshot img,.screenshot img{aspect-ratio:1.05}.closing{flex-wrap:wrap;padding:1.15rem}.login-link{width:100%;text-align:center}.screenshot span{opacity:1}.leaves{width:150px;opacity:.2} }
@media (prefers-reduced-motion:reduce) { .screenshot img,.screenshot span{transition:none} }