.service-finder{position:relative;isolation:isolate;overflow:hidden;padding:115px 24px 120px;min-height:1080px;background:linear-gradient(140deg,#ff742d 0%,#ff5400 52%,#eb4700 100%);color:#202025;scroll-margin-top:0}
.finder-intro{position:relative;z-index:1;text-align:center;color:#fff;margin:0 auto 54px}
.finder-kicker{font-size:13px;letter-spacing:2px;margin:0 0 19px;font-weight:700}
.finder-intro h2{font-size:clamp(30px,3.7vw,54px);line-height:1.3;font-weight:400;letter-spacing:-2px;margin:0 0 16px;word-break:keep-all}
.finder-intro h2 strong{font-weight:700}
.finder-intro>p:last-child{font-size:18px;line-height:1.6;color:#ffeadf;margin:0;word-break:keep-all}
.finder-background{position:absolute;inset:0;z-index:-1;display:flex;flex-direction:column;justify-content:center;gap:95px;pointer-events:none;transform:rotate(-7deg);color:#fff;opacity:.065;font-size:clamp(50px,7vw,110px);font-weight:800;white-space:nowrap;letter-spacing:-4px;line-height:1}
.finder-background span:nth-child(2){align-self:flex-end}
.finder-device{position:relative;width:min(100%,500px);margin:auto;background:#fff;border:1px solid #e4c8b9;border-radius:48px;padding:30px 46px 28px;box-shadow:0 28px 80px #8c260028;min-height:710px}
.finder-progress{height:8px;background:#f0ebe7;border-radius:20px;overflow:hidden;margin:0 8px 36px}
.finder-progress-fill{display:block;width:0;height:100%;border-radius:20px;background:#ff5400;transition:width .4s}
.finder-stage{text-align:center;animation:finder-enter .25s ease}
.finder-step{font-size:27px;font-weight:700;margin:0 0 20px;line-height:1.2;letter-spacing:-1px;color:#ff5400}
.finder-step span{font-size:14px;font-weight:400;color:#aeaba8;letter-spacing:0}
.finder-stage h3{font-size:25px;line-height:1.35;font-weight:700;letter-spacing:-1.1px;margin:0 0 10px;word-break:keep-all;outline:none}
.finder-hint{font-size:15px;line-height:1.6;color:#8c817b;margin:0 0 26px;word-break:keep-all}
.finder-options{display:grid;gap:10px;text-align:center}
.finder-option{display:block;position:relative;cursor:pointer}
.finder-option input{position:absolute;width:1px;height:1px;opacity:0;left:50%;top:50%}
.finder-option>span{display:flex;min-height:76px;padding:15px 12px;flex-direction:column;justify-content:center;gap:6px;background:#faf5f1;border:1px solid transparent;border-radius:12px;transition:background .2s,border-color .2s,box-shadow .2s}
.option-lead{font-size:14px;line-height:1.4;color:#756b65;word-break:keep-all}
.finder-option strong{font-size:17px;font-weight:600;letter-spacing:-.5px;color:#3a302b}
.finder-option:hover>span{border-color:#ffb78e;background:#fff0e5}
.finder-option input:checked+span{border-color:#ff5400;background:#fff0e5;box-shadow:inset 0 0 0 1px #ff5400}
.finder-option input:checked+span strong{color:#ed4a00}
.finder-option input:focus-visible+span{outline:2px solid #ff5400;outline-offset:3px}
.finder-navigation{margin-top:28px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.finder-navigation button{border:1px solid #ff5400;border-radius:999px;color:#ff5400;font-size:15px;min-width:74px;padding:12px 16px}
.finder-navigation .finder-next{background:#ff5400;color:#fff}
.finder-navigation button:disabled{border-color:#e9e2de;background:transparent;color:#c1b7b1;cursor:default}
.finder-navigation .finder-next:disabled{background:#f2eeeb}
.finder-page{font-size:12px;letter-spacing:1px;color:#a69a91}
.finder-device:after{content:"";display:block;width:84px;height:5px;background:#e9e3df;border-radius:20px;margin:28px auto 0}
.finder-result-heading{font-size:24px!important}
.finder-stage:has(.finder-result)>.finder-step{font-size:12px;letter-spacing:1.5px;margin-bottom:14px}
.finder-stage:has(.finder-result)>.finder-hint{margin-bottom:20px}
.finder-result{touch-action:pan-y}
.result-mockup{height:160px;border-radius:15px;background:#fff3ea;border:1px solid #ffdfc9;overflow:hidden;text-align:left;margin-bottom:21px}
.mockup-chrome{height:25px;display:flex;align-items:center;gap:4px;border-bottom:1px solid #ffdfc9;padding:0 10px;background:#fff9f4}
.mockup-chrome i{width:5px;height:5px;background:#ffc09a;border-radius:50%}.mockup-chrome i:first-child{background:#ff5400}
.mockup-chrome span{margin-left:7px;font-size:7px;letter-spacing:1px;color:#b08e77}
.mockup-body{padding:14px 20px;display:flex;flex-direction:column;gap:7px;align-items:flex-start;position:relative}
.mockup-body small{font-size:8px;letter-spacing:1px;color:#ff5400;font-weight:700}
.mockup-body b{font-size:16px;letter-spacing:-.5px;max-width:95%;color:#622808}
.mockup-body>span{font-size:11px;color:#9d7155}
.mockup-body em{font-size:9px;font-style:normal;padding:6px 11px;border-radius:10px;background:#ff5400;color:#fff}
.mockup-opschatbot .mockup-body em,.mockup-gukdaesaju .mockup-body em{align-self:flex-end;border-radius:12px 12px 2px 12px}
.mockup-highops .mockup-body>span{background:#fff;border-left:3px solid #ff5400;padding:7px;width:100%}
.mockup-landingmaker .mockup-body{align-items:center;text-align:center;background:linear-gradient(120deg,#ffead9,#fff8f0)}
.mockup-website .mockup-body{background:linear-gradient(90deg,#fff1e4 65%,#ffc49c 65%);height:135px}
.result-tag{font-size:12px;color:#f05208;margin:0 0 7px;font-weight:600}
.finder-result h4{font-size:30px;line-height:1.2;font-weight:700;letter-spacing:-1px;margin:0 0 14px}
.result-catch{font-size:19px;line-height:1.45;letter-spacing:-.6px;font-weight:600;margin:0 0 12px;word-break:keep-all}
.result-description{font-size:14px;line-height:1.65;color:#82736b;margin:0 0 18px;word-break:keep-all}
.result-features{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.result-features li{padding:7px 9px;border-radius:6px;font-size:11px;background:#fff2e8;color:#d94a08}
.result-detail{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border-radius:999px;padding:12px 24px;background:#ff5400;color:#fff;font-size:14px;transition:background .2s}
.result-detail:hover{background:#de4900}
.finder-result-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:25px}
.finder-result-controls>button{font-size:13px;color:#ed4a00;padding:7px}
.finder-result-dots{display:flex;gap:8px;align-items:center}
.finder-result-dots button{position:relative;width:6px;height:6px;background:#ead7ca;border-radius:10px;padding:0;transition:width .2s}
.finder-result-dots button[aria-current="true"]{width:24px;background:#ff5400}
.finder-result-dots button:before{content:"";position:absolute;inset:-10px -4px}
.finder-restart{margin-top:18px;font-size:13px;color:#9b8980;padding:9px;text-decoration:underline;text-underline-offset:4px}
@keyframes finder-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:560px){.service-finder{padding:80px 18px;min-height:990px}.finder-intro{margin-bottom:35px}.finder-intro h2{font-size:30px;letter-spacing:-1.2px}.finder-intro>p:last-child{font-size:15px}.finder-kicker{font-size:10px;letter-spacing:1.5px;margin-bottom:14px}.finder-device{border-radius:34px;padding:25px 23px;min-height:690px}.finder-progress{margin-bottom:30px;height:6px}.finder-stage h3{font-size:23px}.finder-step{font-size:26px}.finder-hint{font-size:13px}.finder-option>span{min-height:78px;padding:13px 10px}.option-lead{font-size:12px}.finder-option strong{font-size:16px}.finder-background{gap:140px}.finder-result-heading{font-size:22px!important}.result-mockup{height:150px}.result-catch{font-size:18px}.result-description{font-size:13px}.result-features li{font-size:10px}.finder-result h4{font-size:28px}}
@media(prefers-reduced-motion:reduce){.finder-stage{animation:none}}
/* Moving background lettering and a phone that extends past the section edge. */
.service-finder{padding-bottom:0;min-height:0}
.finder-background{transform:none;gap:100px;align-items:flex-start}
.finder-marquee{display:flex;width:max-content;gap:60px;will-change:transform;animation:finder-drift-left 42s linear infinite}
.finder-background .finder-marquee:nth-child(2){align-self:flex-start;animation-name:finder-drift-right;animation-duration:48s}
.finder-marquee>span{display:block;flex-shrink:0}
.finder-device{margin-bottom:-64px;padding-bottom:48px}
.finder-device:after{visibility:hidden}
@keyframes finder-drift-left{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 30px))}}
@keyframes finder-drift-right{from{transform:translateX(calc(-50% - 30px))}to{transform:translateX(0)}}
@media(max-width:560px){.service-finder{padding-bottom:0;min-height:0}.finder-device{margin-bottom:-52px}.finder-background{gap:140px}.finder-marquee{gap:60px}}
@media(prefers-reduced-motion:reduce){.finder-marquee{animation:none;will-change:auto}}
.finder-stage h3{font-size:30px;letter-spacing:-1.2px;line-height:1.35}
@media(max-width:560px){.finder-stage h3{font-size:27px;letter-spacing:-1px}}
.finder-intro h2{font-size:clamp(42px,5.2vw,72px)}
@media(max-width:560px){.finder-intro h2{font-size:40px;line-height:1.25;letter-spacing:-1.6px}}
.finder-background .finder-marquee:nth-child(3){align-self:flex-start;animation-duration:46s}
/* One recommendation, with the question screen's height retained. */
.finder-stage:has(.finder-result){display:flex;flex-direction:column}
.finder-stage:has(.finder-result)>.finder-hint{margin-bottom:0}
.finder-result{flex:1;display:flex;flex-direction:column;align-items:center;padding-top:28px;touch-action:pan-y}
.finder-result h4{font-size:36px;margin-bottom:20px}
.result-tag{margin-bottom:10px}
.result-catch{margin-bottom:18px}
.result-description{line-height:1.8;margin-bottom:22px}
.result-fit{width:100%;padding:18px 20px;border-radius:12px;background:#fff6ee;text-align:left;margin-bottom:20px}
.result-fit strong{display:block;font-size:13px;color:#ed4a00;margin-bottom:8px}
.result-fit p{font-size:13px;line-height:1.7;color:#82736b;margin:0;word-break:keep-all}
.result-detail{margin-top:auto}
.finder-stage:has(.finder-result)>.finder-restart{align-self:center;margin-top:23px}
@media(max-width:560px){.finder-result{padding-top:26px}.finder-result h4{font-size:32px}.result-fit{padding:16px}.result-description{font-size:14px}.result-features{margin-bottom:26px}}
.result-fit-points{list-style:none;padding:0;margin:16px 0 0}
.result-fit-points li{border-top:1px solid #f1d7c5;padding:11px 0;font-size:13px;line-height:1.5;color:#785846}
.result-fit-points li:last-child{padding-bottom:0}
/* Keep the expanded recommendation copy within the question card's rhythm. */
.finder-result{padding-top:20px}
.finder-result h4{margin-bottom:14px}
.result-tag{margin-bottom:6px}
.result-catch{margin-bottom:12px}
.result-description{line-height:1.65;margin-bottom:14px}
.result-fit{padding:14px 16px;margin-bottom:16px}
.result-fit strong{margin-bottom:6px}
.result-fit p{line-height:1.55}
.result-fit-points{margin-top:10px}
.result-fit-points li{padding-top:7px;padding-bottom:7px}
.result-fit-points li:last-child{padding-bottom:0}
.finder-stage:has(.finder-result)>.finder-restart{margin-top:18px}
/* The phone continues below the section: only its top corners are visible. */
.finder-device{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}
/* Match the available window height while keeping the question card readable. */
.service-finder{min-height:100dvh;padding:clamp(24px,4dvh,48px) 24px 0;display:flex;flex-direction:column;justify-content:center;overflow-anchor:none}
.finder-intro{width:100%;flex-shrink:0;margin:0 auto clamp(16px,3dvh,32px)}
.finder-intro h2{font-size:clamp(34px,5.4dvh,60px);line-height:1.2;margin-bottom:10px}
.finder-intro>p:last-child{font-size:clamp(13px,1.9dvh,17px);line-height:1.5}
.finder-device{flex-shrink:0;min-height:0;margin:0 auto -24px;padding:clamp(16px,2.5dvh,28px) 32px 40px;width:min(100%,500px);border-bottom-left-radius:0;border-bottom-right-radius:0}
.finder-device:after{display:none}
.finder-progress{height:6px;margin:0 6px clamp(12px,2dvh,22px)}
.finder-stage h3{font-size:clamp(22px,3.2dvh,29px);line-height:1.3;margin-bottom:8px}
.finder-hint{font-size:clamp(12px,1.6dvh,14px);line-height:1.5;margin-bottom:clamp(12px,2dvh,20px)}
.finder-options{gap:clamp(6px,1dvh,10px)}
.finder-option>span{min-height:clamp(48px,7.2dvh,70px);padding:clamp(7px,1.1dvh,12px) 10px;gap:3px}
.option-lead{font-size:clamp(12px,1.65dvh,14px);line-height:1.35}
.finder-option strong{font-size:clamp(14px,2.1dvh,17px);line-height:1.3}
.finder-navigation{margin-top:clamp(12px,2dvh,24px)}
.finder-navigation button{font-size:13px;padding:9px 15px;min-height:36px}
@media(max-height:700px) and (min-width:561px){
 .service-finder{padding-top:18px}
 .finder-intro{margin-bottom:14px}
 .finder-intro h2{font-size:36px;margin-bottom:7px}
 .finder-intro>p:last-child{font-size:13px}
 .finder-device{width:min(100%,520px);padding:16px 28px 32px}
 .finder-progress{margin-bottom:12px;height:5px}
 .finder-stage h3{font-size:22px;margin-bottom:5px}
 .finder-hint{font-size:12px;margin-bottom:10px}
 .finder-options{gap:6px}
 .finder-option>span{min-height:46px;padding:7px 10px;gap:2px}
 .option-lead{font-size:12px}
 .finder-option strong{font-size:14px}
 .finder-navigation{margin-top:12px}
 .finder-navigation button{padding:7px 13px;min-height:32px}
 .finder-result{padding-top:12px}
 .finder-result h4{font-size:29px;margin-bottom:10px}
 .result-catch{font-size:16px;margin-bottom:10px}
 .result-description{font-size:13px;margin-bottom:10px}
 .result-fit{padding:10px 14px;margin-bottom:12px}
 .result-fit-points li{padding-top:5px;padding-bottom:5px;font-size:12px}
 .finder-stage:has(.finder-result)>.finder-hint{margin-bottom:8px}
}
@media(max-width:560px){
 .service-finder{padding:clamp(22px,4dvh,40px) 18px 0;min-height:100dvh}
 .finder-intro h2{font-size:clamp(30px,4.8dvh,40px);letter-spacing:-1.5px}
 .finder-intro>p:last-child{font-size:13px}
 .finder-device{padding:20px 22px 40px;margin-bottom:-24px}
 .finder-stage h3{font-size:clamp(22px,3dvh,26px)}
 .finder-option>span{min-height:clamp(54px,7.4dvh,66px);padding:8px 9px}
 .option-lead{font-size:12px}
 .finder-option strong{font-size:15px}
}
/* The finder hides the header, so its anchor should start at the window top. */
#serviceFinder{scroll-margin-top:-132px}
/* Anchor the phone to the section bottom, with no empty strip underneath. */
.service-finder{justify-content:flex-start;padding-bottom:0}
.finder-device{margin-top:auto}
/* Restore breathing room above the finder title without adding a bottom gap. */
.service-finder{padding-top:clamp(64px,11dvh,115px)}
@media(max-height:700px) and (min-width:561px){.service-finder{padding-top:40px}}
@media(max-width:560px){.service-finder{padding-top:clamp(48px,7dvh,64px)}}
/* Keep equal spacing around the intro; do not push the device downward. */
.service-finder{--finder-intro-space:clamp(64px,11dvh,115px);padding-top:var(--finder-intro-space)}
.finder-intro{margin-bottom:var(--finder-intro-space)}
.finder-device{margin-top:0}
@media(max-height:700px) and (min-width:561px){.service-finder{--finder-intro-space:40px}}
@media(max-width:560px){.service-finder{--finder-intro-space:clamp(48px,7dvh,64px)}}
/* Fill remaining section height so the phone always reaches the bottom edge. */
.service-finder .finder-device{flex:1 0 auto;margin-top:0;margin-bottom:-24px}

.finder-progress{margin-bottom:clamp(24px,4dvh,36px)}