.visual-entry{margin:28px 0;padding:clamp(24px,4vw,56px);border:1px solid var(--line,#d5e0da);border-radius:24px;background:var(--paper-2,#f0f5f1);display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center}.visual-entry h2{font-size:clamp(26px,3.2vw,48px);line-height:1.12;letter-spacing:-.045em;margin:10px 0 16px}.visual-entry p{max-width:48ch}.visual-entry .visual-mark{border:1px solid #9bafa8;padding:24px;aspect-ratio:1.5;display:grid;grid-template-columns:1fr 1fr;gap:8px;background:linear-gradient(135deg,#fff,#eadfca)}.visual-mark span{border:8px solid #28544d;background:linear-gradient(145deg,#e5f3ed,#9cb5af);display:flex;align-items:end;padding:8px;font-size:12px;letter-spacing:.08em}.visual-mark span:last-child{border-color:#2a3231}.visualizer{color:#173a35;background:#fcfbf7;border:0;border-radius:24px;padding:0;width:min(1100px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 28px 90px #12382c55}.visualizer::backdrop{background:#08241ed9;backdrop-filter:blur(6px)}.visualizer *{box-sizing:border-box}.visualizer [hidden]{display:none!important}.visual-top{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 28px;background:#fcfbf7;border-bottom:1px solid #d7e1da}.visual-top strong{font-size:22px;letter-spacing:-1px}.visual-top small{font-size:11px;letter-spacing:.12em;text-transform:uppercase}.visualizer button,.visualizer input,.visualizer select{font:inherit}.visual-close{width:44px;height:44px;border:1px solid #d7e1da;border-radius:50%;background:none;cursor:pointer;font-size:23px}.visual-body{padding:clamp(20px,4vw,42px)}.visualizer h2{font-size:clamp(28px,4vw,46px);letter-spacing:-.045em;line-height:1.12;margin:10px 0 18px}.visualizer h3{font-size:20px;margin:18px 0 12px}.visual-kicker{color:#53716a;font-size:11px;letter-spacing:.16em;text-transform:uppercase}.visualizer p{font-size:14px;line-height:1.65;max-width:65ch}.visual-steps{display:flex;gap:8px;margin-bottom:28px}.visual-steps span{flex:1;border-top:3px solid #d7e1da;padding-top:10px;font-size:12px}.visual-steps .active{border-color:#23877d;font-weight:800}.visual-upload{position:relative;display:grid;place-items:center;border:1px dashed #6d998d;border-radius:16px;background:#f0f5f1;min-height:200px;padding:30px;text-align:center;cursor:pointer}.visual-upload input{position:absolute;width:100%;height:100%;inset:0;opacity:0;cursor:pointer}.visual-upload:focus-within{outline:3px solid #23877d;outline-offset:4px}.visual-upload b{display:block;font-size:18px}.visual-upload span{font-size:13px}.visual-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}.visual-photo{min-width:0;position:relative}.visual-photo img{width:100%;height:145px;object-fit:cover;border-radius:12px}.visual-photo button{border:0;background:#fff;padding:8px;cursor:pointer;margin:5px 0;font-size:12px;text-decoration:underline}.visual-photo strong{display:block;font-size:11px;overflow-wrap:anywhere}.visual-photo input[type=radio]{accent-color:#23877d}.visual-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:28px}.visual-button{border:1px solid #173a35;border-radius:50px;padding:14px 24px;background:#173a35;color:#fff;font-weight:700;cursor:pointer;min-height:48px;text-align:center;text-decoration:none}.visual-button.secondary{background:transparent;color:#173a35}.visual-button:disabled{opacity:.5;cursor:wait}.visual-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.visual-field{display:grid;gap:7px;min-width:0;font-size:13px;font-weight:600}.visual-field input,.visual-field select{width:100%;min-width:0;border:1px solid #c9d7cd;border-radius:10px;padding:12px;background:#fff;color:#173a35;min-height:48px;font-size:16px}.visual-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.visual-check{display:flex;align-items:start;gap:10px;font-size:14px;line-height:1.4;padding:10px 0}.visual-check input{accent-color:#23877d;width:18px;height:18px;flex-shrink:0;margin:0}.visual-dimensions{margin-top:22px;padding:20px;background:#f0f5f1;border-radius:16px}.visual-status{padding:12px 0;font-size:14px;min-height:24px}.visual-status.error{color:#a23131}.visual-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;background:#f0f5f1;border-radius:16px;padding:20px;font-size:14px}.visual-summary div{border-bottom:1px solid #d7e1da;padding:8px 0}.visual-summary dt{font-size:11px;color:#647873}.visual-summary dd{margin:4px 0 0;overflow-wrap:anywhere}.visual-estimate{margin-top:24px;border-top:1px solid #c9d7cd;padding-top:20px}.visual-estimate strong{display:block;font-size:clamp(24px,3vw,34px);letter-spacing:-.03em;line-height:1.25}.visual-compare{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:#e7eee8;--split:50%}.visual-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.visual-compare img.before{clip-path:inset(0 calc(100% - var(--split)) 0 0);background:#e7eee8}.visual-compare:after{content:'↔';position:absolute;left:var(--split);top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:#fff;width:42px;height:42px;pointer-events:none;box-shadow:0 1px 10px #0003}.visual-compare:before{content:'';position:absolute;left:var(--split);top:0;bottom:0;width:2px;background:#fff;z-index:1;pointer-events:none}.visual-compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:2;cursor:ew-resize;touch-action:pan-y}.visual-compare:focus-within{outline:3px solid #23877d}.visual-compare label{position:absolute;top:14px;left:14px;padding:6px 12px;background:#fff;border-radius:30px;font-size:12px}.visual-compare label:last-of-type{left:auto;right:14px}.visual-disclaimer{font-size:12px!important;color:#647873}.visual-target{background:#f0f5f1;padding:16px;border-radius:12px;margin:16px 0}.visual-quiz-price{padding:16px;border:1px solid #c9d7cd;border-radius:14px;margin:16px 0}.visual-honeypot{display:none}.visualizer :focus-visible{outline:3px solid #23877d;outline-offset:3px}@media(max-width:650px){.visual-entry{grid-template-columns:1fr;padding:24px}.visual-entry .visual-mark{display:none}.visualizer{width:100%;max-height:100dvh;height:100dvh;border-radius:0;margin:0}.visual-top{padding:12px 20px}.visual-top small{display:none}.visual-grid{gap:14px}.visual-photos{grid-template-columns:repeat(3,minmax(0,1fr))}.visual-photo img{height:90px}.visual-actions .visual-button{flex:1;padding:14px 16px;font-size:13px}.visual-summary{gap:8px 14px;padding:16px}.visual-steps span{font-size:11px}.visual-options{grid-template-columns:1fr}.visual-body{padding-bottom:max(24px,env(safe-area-inset-bottom))}}
.visualizer{max-width:1100px}@media(max-width:650px){.visualizer{width:100vw;max-width:100vw;max-height:100dvh}}