.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding:48px 0 65px}h1{font-size:clamp(44px,4.6vw,64px)}.visual{padding:18px;min-width:0}.visual iframe{display:block;width:100%;height:640px;border:0;border-radius:16px;background:white;box-shadow:0 18px 45px #75204c12}.try-link{display:block;margin-top:18px;font-size:14px;font-weight:600;color:#943395}.checks{flex-wrap:wrap;gap:14px}dialog{max-width:510px}dialog ol{padding-left:22px;color:#626262;font-size:14px}dialog code{user-select:all}a:focus-visible,summary:focus-visible{outline:3px solid #a72d87;outline-offset:5px}@media(max-width:900px){nav{gap:16px}.hero{gap:25px}.wrap{padding:0 24px}.visual{padding:10px}}@media(max-width:700px){.hero{grid-template-columns:1fr}.hero .lead{max-width:none}.visual{margin-top:8px}.visual iframe{height:640px}nav{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

footer .footer-links{display:flex;gap:18px;flex-wrap:wrap}footer .footer-links a:hover{color:#a72d87}

/* Hero: keep the headline at the top next to the tall editor and let it follow while scrolling the editor */
.hero{align-items:start}@media(min-width:701px){.hero>div:first-child{position:sticky;top:24px;padding-top:32px}}

/* Phones: give the embedded editor more width */
/* Wider editor: more room for the editor column on desktop, edge-to-edge card on phones */
@media(min-width:701px){.hero{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px}.visual{padding:12px}}
@media(max-width:700px){.wrap{padding:0 12px}.visual{padding:0;background:none;border:0;border-radius:0}.visual iframe{box-sizing:border-box;border-radius:18px;border:1px solid #f0e2ec;box-shadow:0 10px 30px #75204c10}}