.how-shell{width:min(1120px,calc(100% - 30px));margin:35px auto 90px}.how-intro{max-width:760px;margin:70px auto 55px;text-align:center}.how-intro h1{font-size:clamp(2.5rem,6vw,4.8rem);letter-spacing:-.06em;line-height:1;margin:8px 0 22px}.how-intro>p:last-child{color:#667085;font-size:1.1rem;line-height:1.65}.how-steps{display:grid;gap:24px}.how-step{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(420px,1.28fr);align-items:center;gap:38px;background:#fff;border:1px solid #e7ebf1;border-radius:28px;padding:30px;box-shadow:0 18px 55px #1720330d}.how-step:nth-child(even){grid-template-columns:minmax(420px,1.28fr) minmax(260px,.72fr)}.how-step:nth-child(even) .step-copy{grid-column:2}.how-step:nth-child(even) .guide-shot,.how-step:nth-child(even) .help-visual{grid-column:1;grid-row:1}.step-copy{display:flex;align-items:flex-start;gap:17px}.step-number{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:50%;background:#ccfbf1;color:#0f766e;font-size:1.25rem;font-weight:950}.step-copy h2{font-size:clamp(1.45rem,3vw,2rem);letter-spacing:-.035em;margin:5px 0 10px}.step-copy p{color:#667085;line-height:1.6;margin:0}.guide-shot{position:relative;min-height:330px;border:1px solid #d7dee8;border-radius:20px;overflow:hidden;background:#f5f7fb;box-shadow:0 14px 35px #17203318}.shot-browser{height:34px;display:flex;align-items:center;gap:5px;padding:0 10px;background:#e9edf3;border-bottom:1px solid #d7dde6;color:#657287;font-size:.63rem}.shot-browser i{width:7px;height:7px;border-radius:50%;background:#c2c9d3}.shot-browser i:first-child{background:#ff7168}.shot-browser i:nth-child(2){background:#ffc553}.shot-browser i:nth-child(3){background:#54cd72}.shot-browser span{margin-left:7px;flex:1;background:#fff;border-radius:7px;padding:4px 9px}.shot-browser b{font-size:1rem;color:#526074}.guide-arrow{position:absolute;z-index:5;color:#ef4444;font-size:3.5rem;font-weight:950;line-height:1;text-shadow:0 2px 0 #fff}.arrow-label{position:absolute;z-index:5;background:#ef4444;color:#fff;border-radius:999px;padding:6px 10px;font-size:.7rem;font-weight:900;box-shadow:0 4px 12px #ef444455}.mini-site-header{height:55px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 15px}.mini-site-header img{width:115px}.mini-site-header div{display:flex;gap:7px;align-items:center}.mini-site-header span{font-size:.55rem;color:#667085}.mini-site-header b{font-size:.6rem;background:#172033;color:#fff;padding:7px 11px;border-radius:8px}.mini-hero{min-height:240px;display:grid;place-items:center;align-content:center;gap:9px;background:radial-gradient(circle at 20% 15%,#ccfbf1,transparent 38%),#f8fafc}.mini-hero img{width:64px}.mini-hero strong{font-size:1.5rem;letter-spacing:-.04em}.mini-hero small{color:#0f9f96;font-weight:850}.arrow-login{right:28px;top:50px;transform:rotate(15deg)}.login-label{right:62px;top:113px}.finder-shot{padding:54px 25px 20px}.finder-shot .shot-browser,.code-shot .shot-browser,.settings-shot .shot-browser{position:absolute;left:0;right:0;top:0}.mini-kicker{font-size:.55rem;color:#0f9f96;letter-spacing:.12em;font-weight:900;margin:0 0 5px}.finder-shot h3,.code-shot h3,.settings-shot h3{font-size:1.35rem;margin:0 0 16px}.finder-shot label,.code-shot label,.settings-shot label{display:grid;gap:4px;font-size:.64rem;font-weight:850;color:#344054;margin-bottom:9px}.finder-shot label span,.code-shot label span,.settings-shot label span{border:1px solid #d9e0ea;background:#fff;border-radius:8px;padding:9px;color:#526074;font-weight:650}.finder-shot button,.code-shot button,.settings-shot>button{width:100%;border:0;border-radius:9px;padding:10px;background:#172033;color:#fff;font-size:.68rem;font-weight:900}.code-shot{padding:62px 32px 25px;text-align:center}.code-shot>img{width:145px;margin:0 auto 10px}.code-shot>small{display:block;color:#667085;font-weight:900;letter-spacing:.12em}.code-shot label{text-align:left;margin-top:18px}.board-shot{background:#eff3f8}.mini-board-top{height:62px;padding:10px 15px;display:flex;justify-content:space-between;align-items:center}.mini-board-top>div{display:grid;gap:3px}.mini-board-top small{color:#667085;font-size:.45rem;letter-spacing:.13em;font-weight:900}.mini-board-top img{width:135px}.mini-board-top button{border:0;border-radius:10px;background:#fff;width:35px;height:35px;box-shadow:0 5px 15px #17203312}.mini-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:0 13px}.mini-days b{background:#fff;border-radius:7px;padding:7px 2px;text-align:center;font-size:.48rem;color:#667085}.mini-days b.active{background:#ef4444;color:#fff}.mini-day{margin:8px 13px;background:#eab308;color:#fff;border-radius:13px;padding:18px;text-align:center;font-size:1.4rem;font-weight:950}.mini-day small{display:block;font-size:.55rem;margin-top:3px}.mini-day.red{background:#ef4444}.mini-board-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 13px 14px}.mini-board-grid span{min-height:66px;border-radius:10px;background:#fff;padding:9px;font-size:.62rem;font-weight:850}.mini-board-grid span:nth-child(4){grid-column:span 1}.mini-board-grid span:nth-child(5){grid-column:span 2}.mini-board-grid.filled span{display:grid;align-content:start;gap:8px}.mini-board-grid.filled strong{background:#f0f3f7;border-radius:7px;padding:6px;font-size:.58rem}.highlighted-url span{outline:3px solid #ef4444}.arrow-url{top:36px;left:48%;transform:translateX(-50%)}.url-label{top:77px;left:50%;transform:translateX(-50%)}.target-settings{outline:4px solid #ef4444}.arrow-settings{right:6px;top:72px;transform:rotate(-12deg)}.settings-label{right:50px;top:116px}.settings-shot{padding:55px 24px 20px}.settings-shot h3{margin-bottom:12px}.mini-toggle{display:flex;align-items:center;gap:9px;background:#fff;border-radius:9px;padding:8px;margin-bottom:8px}.mini-toggle i{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;background:#0f9f96;color:#fff;font-size:.65rem;font-style:normal}.mini-toggle.off i{background:#d9e0e8}.mini-toggle span{display:grid;font-size:.62rem}.mini-toggle small{color:#667085}.help-step{background:linear-gradient(135deg,#0f766e,#0f9f96);border:0;color:#fff}.help-step .step-number{background:#fff;color:#0f766e}.help-step .step-copy p{color:#d8fffa}.help-mail{display:inline-block;margin-top:17px;background:#fff;color:#0f766e;padding:11px 15px;border-radius:11px;font-weight:900;text-decoration:none}.help-visual{min-height:260px;border-radius:20px;background:#ffffff14;border:1px solid #ffffff33;display:grid;place-items:center;align-content:center;gap:10px;text-align:center}.help-visual>span{font-size:4rem}.help-visual strong{font-size:1.25rem}.help-visual small{color:#d8fffa}.how-cta{text-align:center;margin:75px auto 20px;padding:45px;border-radius:28px;background:#fff;box-shadow:0 18px 55px #1720330d}.how-cta h2{font-size:2.3rem;margin:0 0 8px}.how-cta p{color:#667085;margin:0 0 22px}.how-cta .hero-actions{justify-content:center}
@media(max-width:820px){.how-step,.how-step:nth-child(even){grid-template-columns:1fr;gap:24px;padding:22px}.how-step:nth-child(even) .step-copy,.how-step:nth-child(even) .guide-shot,.how-step:nth-child(even) .help-visual{grid-column:auto;grid-row:auto}.step-copy{order:1}.guide-shot,.help-visual{order:2}.how-intro{text-align:left;margin-top:45px}.how-intro h1{font-size:3rem}}
@media(max-width:480px){.how-shell{width:min(100% - 20px,1120px)}.how-step{border-radius:21px;padding:15px}.step-copy{gap:11px}.step-number{width:40px;height:40px;flex-basis:40px}.guide-shot{min-height:300px}.mini-board-top img{width:105px}.mini-board-grid span{font-size:.55rem}.how-cta{padding:30px 18px}.landing-header .quiet{display:none}}

/* The guide uses faithful, self-contained captures of the real VisuPlanner UI. */
.editor-shot{padding:52px 18px 18px;background:#f3f6fa;min-height:390px}.editor-shot .shot-browser{position:absolute;inset:0 0 auto}.editor-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.editor-top small{font-size:.52rem;font-weight:900;letter-spacing:.13em;color:#667085}.editor-top h3{margin:2px 0 0;font-size:1.25rem;letter-spacing:-.04em}.editor-top button{border:1px solid #cad4e0;border-radius:9px;padding:9px 11px;background:#fff;color:#172033;font-size:.62rem;font-weight:900}.editor-week{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:10px;padding:8px 10px;margin-bottom:8px;font-size:.65rem}.editor-week button{border:0;background:#eef2f6;border-radius:7px;width:28px;height:28px}.editor-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:10px}.editor-tabs b{background:#fff;border-radius:8px;padding:6px 2px;text-align:center;color:#667085;font-size:.57rem}.editor-tabs b.active{background:#0f9f96;color:#fff}.editor-tabs small{font-size:.48rem}.editor-field{display:grid;gap:4px;margin:0 0 7px;font-size:.62rem;font-weight:850}.editor-field span{padding:8px 9px;border:1px solid #d7dee8;border-radius:8px;background:#fff;color:#7a8699;font-weight:650}.editor-save{width:100%;border:0;border-radius:9px;padding:10px;background:#172033;color:#fff;font-size:.65rem;font-weight:900}.editor-shot .arrow-settings{right:74px;top:76px;transform:rotate(25deg)}.editor-shot .settings-label{right:118px;top:125px}.signup-button{border-color:#0f9f96!important;color:#0f766e!important}.how-cta .hero-actions{flex-wrap:wrap}