/* Visual pilihan pelanggan. Angka dan nama di layar adalah simulasi. */
.comparison-hero{padding:54px 0 40px;background:radial-gradient(ellipse at 80% 30%,#19473c 0,transparent 55%),#0a2626;overflow:hidden}
.comparison-hero .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:58px;align-items:start}
.comparison-hero .hero-copy{padding-block:50px;min-width:0}
.comparison-hero .eyebrow{font-size:14px;letter-spacing:.09em;margin-bottom:22px}
.comparison-hero h1{font-size:clamp(38px,3.8vw,57px);line-height:1.1;letter-spacing:-1.8px;margin:0 0 25px;text-wrap:balance}
.comparison-hero h1>span{display:block;color:#6ee28b;margin-top:10px}
.comparison-hero .hero-description{font-size:20px;line-height:1.65;color:#e0ede6;margin-bottom:23px}
.owner-pain{font-size:19px;line-height:1.6;font-weight:700;border-left:3px solid #6ee28b;padding-left:18px;color:#fff;margin-bottom:30px}
.comparison-hero .hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.comparison-hero .hero-actions .button{font-size:18px;min-height:56px;padding:17px 22px}
.comparison-secondary{display:inline-flex;align-items:center;gap:12px;font-size:17px;color:#e3f0e9;border-bottom:1px solid #6ee28b70;padding:5px 0}
.comparison-secondary .icon{width:22px;height:22px}
.comparison-figure{margin:0;min-width:0;width:100%}
.comparison-stage{position:relative;padding:24px 24px 18px;border-radius:24px;background-position:center;background-size:cover;isolation:isolate}
.comparison-stage::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0a262650,#0a262675);border-radius:inherit;z-index:-1}
.comparison-stage--ban{background-image:url('../images/hero-toko-ban.webp')}
.comparison-stage--bengkel{background-image:url('../images/hero-bengkel.webp')}
.comparison-stage--kost{background-image:url('../images/hero-kost.webp')}
.comparison-stage--klinik{background-image:url('../images/hero-dokter-gigi.webp')}
.phone-shell{width:min(100%,420px);margin-inline:auto;border:3px solid #9aa3a2;border-radius:43px;padding:8px;background:#171b1b;box-shadow:0 25px 50px #0005,inset 0 0 0 2px #333;aspect-ratio:9/19;display:flex}
.phone-screen{background:#f7f9f9;color:#152c2a;border-radius:32px;overflow:hidden;min-width:0;flex:1;display:flex;flex-direction:column}
.phone-status{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:34px;padding:7px 20px;font-size:14px;font-weight:700;line-height:1.3}
.phone-camera{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:78px;height:20px;background:#171b1b;border-radius:12px}
.phone-search{display:flex;align-items:center;gap:10px;margin:7px 13px 11px;padding:10px 12px;background:#fff;border:1px solid #d9e2e0;border-radius:24px;box-shadow:0 2px 7px #132c2510;min-width:0}
.phone-search svg{width:20px;height:20px;fill:none;stroke:#294941;stroke-width:1.8;flex:0 0 auto}
.phone-search>span{font-size:16px;line-height:1.35;color:#263c36}
.street-strip{display:flex;gap:10px;justify-content:space-around;align-items:flex-end;background:repeating-linear-gradient(90deg,#e0ede5 0 48px,#f5f8f4 48px 55px);padding:12px 13px 15px;position:relative;min-height:auto;aspect-ratio:3/2;border-block:1px solid #dbe3dd}
.street-store{display:block;position:relative;width:42px;height:28px;background:#d7dbd5;border:1px solid #82998d;border-radius:2px;z-index:1}
.street-store i{display:block;position:absolute;top:-9px;left:-3px;right:-3px;height:11px;background:repeating-linear-gradient(90deg,#37675a 0 7px,#dce7df 7px 14px);border-radius:2px}
.street-store b{display:block;width:13px;height:18px;margin:8px auto 0;background:#8bb8b1;border:1px solid #6c8d83}
.street-store--owner{outline:2px solid #ae4539;outline-offset:3px;background:#f9e9e4}
.street-store--owner i{background:repeating-linear-gradient(90deg,#aa5748 0 7px,#f9e7df 7px 14px)}
.street-road{position:absolute;left:0;right:0;bottom:0;height:10px;background:#adb8b3;border-bottom:2px dashed #fff}
.phone-list-title{font-size:17px;line-height:1.3;font-weight:700;margin:12px 14px 8px;letter-spacing:-.2px}
.shop-list{display:flex;flex-direction:column;flex:1;list-style:none;padding:0 10px;margin:0;gap:7px}
.shop-card{position:relative;display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:10px;border:1px solid #dfe7e4;border-radius:10px;background:#fff;box-shadow:0 2px 4px #0b302005}
.shop-photo,.shop-owner-photo{width:64px;height:auto;aspect-ratio:3/2;flex:0 0 64px;border-radius:6px;object-fit:cover;background-size:200% 200%;background-repeat:no-repeat;background-color:#e6eeea}
.comparison-stage--ban .shop-photo{background-image:url('../images/perbandingan-ban.webp')}
.comparison-stage--bengkel .shop-photo{background-image:url('../images/perbandingan-bengkel.webp')}
.comparison-stage--kost .shop-photo{background-image:url('../images/perbandingan-kost.webp')}
.comparison-stage--klinik .shop-photo{background-image:url('../images/perbandingan-klinik.webp')}
.quadrant-1{background-position:0 0}.quadrant-2{background-position:100% 0}.quadrant-3{background-position:0 100%}.quadrant-4{background-position:100% 100%}
.shop-info{flex:1;min-width:0}
.shop-info h3{margin:0 0 4px;font-size:20px;line-height:1.2;letter-spacing:-.35px;text-wrap:initial}
.shop-rating{display:flex;align-items:center;gap:4px;font-size:15px;line-height:1.3;color:#425652;margin:0 0 4px;flex-wrap:wrap}
.rating-star{color:#946300}
.shop-offer{margin:0 0 4px;font-size:16px;line-height:1.35;color:#314c43}
.shop-website,.shop-missing{margin:0;font-size:14px;line-height:1.35;color:#1859a2}
.shop-card--owner{border:2px solid #b84c40;background:#fff1ed;padding:9px}
.shop-card--owner h3{color:#8f2d23}
.shop-card--owner .shop-offer,.shop-missing{color:#90382d}
.owner-marker{position:absolute;right:-7px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:23px;height:23px;border:2px solid #fff;background:#b84c40;color:#fff;font-size:15px;font-weight:700;border-radius:50%}
.phone-home-indicator{width:90px;height:4px;background:#263632;border-radius:3px;align-self:center;margin:12px 0 7px}
.comparison-figure figcaption{text-align:center;padding:14px 4px 0;line-height:1.5;color:#dcebe3}
.comparison-figure figcaption strong{display:block;font-size:14px;letter-spacing:.025em}
.comparison-figure figcaption>span{display:block;margin-top:5px;font-size:14px}
.comparison-question{text-align:center;font-size:22px;line-height:1.3;font-weight:700;color:#fff;margin:19px 0 8px}
.comparison-explanation{text-align:center;color:#d3e7dc;font-size:16px;line-height:1.5;margin-bottom:0}
.comparison-hero .benefits{margin-top:36px}
.target-context{font-size:16px!important}
.service-delivery .delivery-context{font-size:16px!important;line-height:1.6}
@media(max-width:1100px){.comparison-hero .hero-grid{gap:30px}.comparison-stage{padding:16px 10px}.comparison-hero h1{font-size:43px}.comparison-hero .hero-description{font-size:19px}.shop-photo,.shop-owner-photo{width:56px;flex-basis:56px}.shop-card{padding:8px;gap:9px}.shop-card--owner{padding:7px}.shop-info h3{font-size:18px}.shop-rating{font-size:14px}.shop-offer{font-size:15px}.shop-list{padding:0 8px}}
@media(max-width:800px){.comparison-hero{padding:32px 0}.comparison-hero .hero-grid{grid-template-columns:minmax(0,1fr);gap:30px}.comparison-hero .hero-copy{padding:0;max-width:650px}.comparison-hero h1{font-size:clamp(35px,6.5vw,48px);letter-spacing:-1.25px;line-height:1.12;margin-bottom:22px}.comparison-hero .hero-description{font-size:19px;line-height:1.6;margin-bottom:20px}.comparison-hero .eyebrow{font-size:14px;margin-bottom:18px}.owner-pain{font-size:18px;margin-bottom:24px}.comparison-hero .hero-actions{align-items:stretch;gap:15px}.comparison-hero .hero-actions .button{font-size:18px}.comparison-secondary{align-self:flex-start;font-size:17px}.comparison-stage{max-width:520px;margin-inline:auto;padding:20px 22px;border-radius:20px}.phone-shell{width:min(100%,400px)}.comparison-figure{max-width:600px;margin-inline:auto}.comparison-hero .benefits{margin-top:26px}.comparison-question{font-size:21px}}
@media(max-width:480px){.comparison-hero .hero-grid{gap:26px}.comparison-stage{padding:12px 7px}.phone-shell{border-radius:36px;padding:6px;border-width:2px}.phone-screen{border-radius:28px}.phone-status{padding:6px 15px;min-height:32px}.phone-camera{width:66px;height:18px}.phone-search{margin:5px 10px 9px;padding:9px 10px;gap:8px}.phone-search>span{font-size:15px}.street-strip{min-height:57px;padding-top:10px;padding-bottom:12px;gap:7px}.street-store{width:36px;height:24px}.street-store b{height:14px}.phone-list-title{font-size:16px;margin:10px 12px 8px}.shop-list{padding:0 7px;gap:6px}.shop-card{gap:8px;padding:8px 7px}.shop-card--owner{padding:7px 6px}.shop-photo,.shop-owner-photo{width:55px;height:auto;aspect-ratio:3/2;flex-basis:55px}.shop-info h3{font-size:18px}.shop-offer{font-size:15px;line-height:1.3}.shop-website,.shop-missing{font-size:14px;line-height:1.3}.shop-rating{font-size:14px}.owner-marker{right:-5px;width:20px;height:20px;font-size:14px}.comparison-figure figcaption{padding-inline:0}.comparison-figure figcaption strong,.comparison-figure figcaption>span{font-size:14px}.phone-home-indicator{margin-top:10px}.comparison-explanation{font-size:16px}}
@media(max-width:359px){.comparison-stage{padding:10px 0}.shop-photo,.shop-owner-photo{width:44px;flex-basis:44px;height:auto;aspect-ratio:3/2}.shop-card{gap:7px;padding-inline:6px}.shop-card--owner{padding-inline:5px}.shop-info h3{font-size:17px}.comparison-hero h1{font-size:34px}}

@media(max-width:800px){.comparison-hero .hero-grid{gap:18px}.comparison-hero .hero-copy{display:contents}.comparison-hero .hero-copy>.eyebrow{order:1;margin:0}.comparison-hero .hero-copy>h1{order:2;margin:0}.comparison-figure{order:3}.comparison-hero .hero-copy>.hero-description{order:4;margin:0}.comparison-hero .hero-copy>.owner-pain{order:5;margin:0}.comparison-hero .hero-copy>.hero-actions{order:6;margin:4px 0 0}}

/* Tiga pilihan, peta ringkas, tinggi sesuai isi, tanpa gulir bertingkat. */
.comparison-hero{padding:40px 0 34px}
.comparison-hero .hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:44px;align-items:center}
.comparison-hero .hero-copy{padding:0}
.comparison-hero h1{font-size:clamp(38px,3.8vw,54px)}
.comparison-figure{max-width:440px;justify-self:center}
.comparison-stage{padding:14px 12px;background:#123c34}
.comparison-stage::before{background:linear-gradient(150deg,#ffffff06,#00000012)}
.phone-shell{width:min(100%,340px);border:2px solid #88948f;border-radius:36px;padding:6px;aspect-ratio:auto;min-height:0;box-shadow:0 16px 30px #0004}
.phone-screen{border-radius:28px;min-height:0}
.phone-status{min-height:31px;padding:6px 16px}
.phone-camera{top:7px;width:60px;height:16px}
.phone-search{gap:8px;margin:6px 11px 9px;padding:9px 10px}
.phone-search>span{font-size:15px}
.phone-map{position:relative;width:100%;height:146px;flex-shrink:0;overflow:hidden;border-block:1px solid #d8e0de;background:#e6eeee}
.phone-map>img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.map-pin{position:absolute;display:grid;place-items:center;min-width:29px;height:29px;padding-inline:6px;border:2px solid #fff;border-radius:18px 18px 18px 3px;background:#276747;color:#fff;font-size:14px;font-weight:700;line-height:1;box-shadow:0 2px 4px #0003}
.map-pin--a{left:23%;top:37%}.map-pin--owner{left:45%;top:29%;background:#ac4438}.map-pin--b{left:72%;top:21%}
.phone-list-title{font-size:16px;margin:12px 12px 8px}
.shop-list{flex:none;padding:0 9px;gap:7px;overflow:visible}
.shop-card{flex:none;gap:9px;min-height:112px;padding:10px 9px}
.shop-card--owner{padding:9px 8px}
.shop-photo,.shop-owner-photo{width:60px;flex-basis:60px;height:auto;aspect-ratio:3/2}
.shop-info h3{font-size:18px}
.shop-rating{font-size:14px}
.shop-offer{font-size:15px}
.shop-website,.shop-missing{font-size:14px}
.owner-marker{width:20px;height:20px;font-size:14px;right:-5px}
.phone-home-indicator{margin:12px 0 7px}
.comparison-figure figcaption{padding-top:12px;line-height:1.45}
.comparison-question{font-size:21px;margin:16px 0 7px}
.comparison-hero .benefits{margin-top:30px}
@media(max-width:1100px){.comparison-hero .hero-grid{gap:30px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.comparison-hero h1{font-size:42px}.comparison-stage{padding:12px 9px}}
@media(max-width:800px){.comparison-hero{padding:30px 0}.comparison-hero .hero-grid{grid-template-columns:minmax(0,1fr);gap:20px}.comparison-hero .hero-copy{padding:0}.comparison-hero h1{font-size:clamp(35px,6.5vw,48px)}.comparison-figure{max-width:440px}.comparison-stage{padding:12px 10px}.comparison-hero .benefits{margin-top:26px}}
@media(max-width:480px){.comparison-stage{padding:10px 7px;border-radius:18px}.phone-shell{padding:5px;border-radius:32px}.phone-screen{border-radius:25px}.phone-map{height:130px}.shop-list{padding:0 7px}.shop-card{gap:8px;padding:9px 7px;min-height:112px}.shop-card--owner{padding:8px 6px}.shop-photo,.shop-owner-photo{width:54px;flex-basis:54px}.comparison-question{font-size:20px}}
@media(max-width:359px){.comparison-stage{padding:8px 3px}.phone-shell{padding:4px}.phone-search{margin-inline:8px;padding-inline:8px}.phone-map{height:120px}.shop-photo,.shop-owner-photo{width:42px;flex-basis:42px}.shop-info h3{font-size:17px}.comparison-hero h1{font-size:34px}}