:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#20382e;background:#faf9f4;line-height:1.6;font-synthesis:none}*{box-sizing:border-box}[hidden]{display:none!important}a{color:#245c43;text-underline-offset:4px}a:hover{text-decoration-thickness:2px}button,input,select{font:inherit}button,summary{cursor:pointer}a,button,input,select,summary,[tabindex]{outline-offset:5px}:focus-visible{outline:3px solid #b36e12}h1,h2,h3{line-height:1.12;letter-spacing:-.04em;margin:0 0 20px}h1{font-size:clamp(2.5rem,5vw,4.7rem);max-width:1000px}h2{font-size:clamp(1.7rem,3vw,2.7rem)}h3{font-size:1.2rem;letter-spacing:-.025em}p{margin:0 0 20px}h1,h2,h3,p,a,dd,dt{overflow-wrap:anywhere}.shell{width:min(1180px,calc(100% - 64px));margin:auto}.brand{display:flex;align-items:center;gap:10px;font-size:1.25rem;font-weight:850;text-decoration:none;color:#142c22}.brand small{display:block;font-size:8px;letter-spacing:.08em;font-weight:650}.brand-icon{background:#245c43;color:#fff;font-size:29px;border-radius:10px;width:34px;text-align:center;display:grid;place-items:center;height:38px}.preview-strip{background:#eef2df;text-align:center;padding:8px 20px;font-size:.75rem;color:#405037}.eyebrow{font-size:.7rem;letter-spacing:.12em;font-weight:800;color:#245c43;margin-bottom:16px;text-transform:uppercase}.eyebrow:before{content:"";display:inline-block;width:18px;height:2px;background:#d3995e;vertical-align:middle;margin-right:8px}.hero{background:linear-gradient(90deg,#081a12f0,#081a12b8 47%,#081a1214),url(/hero.jpg) 62% 58%/cover;color:#fff;padding:64px 0 30px}.hero-copy{max-width:650px}.hero h1{font-weight:850;letter-spacing:-.05em}.hero h1 span,.hero .eyebrow{color:#d9f36e}.lead{font-size:1.15rem;max-width:590px;line-height:1.7}.hero .lead{color:#eef2e9;max-width:510px}.hero-trust{font-size:.8rem;color:#e4ecdd;margin-top:24px}.actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:24px 0}.button{display:inline-block;border:0;border-radius:8px;padding:13px 20px;background:#245c43;color:#fff;text-decoration:none;font-size:.9rem;font-weight:750}.button:hover{filter:brightness(.94)}.button.lime{background:#d9f36e;color:#142c22}.button.light{background:#faf9f4;color:#245c43;border:1px solid #dce3d9}.proof{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #6a7f66;border-radius:12px;background:#10271ee6;margin-top:42px;padding:18px 0}.proof div{text-align:center;border-right:1px solid #68765b}.proof div:last-child{border:0}.proof strong{display:block;color:#e1f4ad;font-size:1.15rem}.proof small{font-size:.75rem;color:#d8e1d1}.section{padding:72px 0}.section-space{margin:36px 0}.tint{background:#eef3ed}.intro,.muted{color:#526458}.intro{max-width:690px}.grid{display:grid;gap:22px}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.need-card{padding:28px;border:1px solid #dce3d9;border-radius:14px;background:#fff;color:#142c22;text-decoration:none}.need-card p{font-size:.9rem;color:#526458}.number{display:inline-grid;place-items:center;width:42px;height:42px;background:#d9f36e;border-radius:11px;font-size:.9rem;font-weight:800;margin-bottom:28px}.text-link{font-size:.86rem;font-weight:750}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:28px;margin-bottom:28px}.section-heading h2{margin-bottom:0}.product-card{border:1px solid #dce3d9;border-radius:15px;overflow:hidden;background:#fff}.product-art{background:radial-gradient(ellipse at 50% 40%,#f8faf0,#e3eae0);height:235px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#536a53;gap:16px}.product-art span{display:grid;place-items:center;width:90px;height:90px;border:1px solid #bbcbb5;border-radius:50%;font-size:3rem;font-weight:200}.product-art small{font-size:.65rem;letter-spacing:.14em}.card-body .eyebrow{letter-spacing:.03em}.card-body h3 a{color:#142c22;text-decoration:none}.card-body p{font-size:.88rem}.badge{display:inline-block;border:1px solid #b9cfb6;border-radius:5px;background:#f0f5e9;padding:3px 8px;font-size:.7rem;color:#3c583d;text-transform:none;letter-spacing:0}.dark{background:#182b22;color:#f6f7ee}.dark .eyebrow{color:#d9f36e}.dark p{color:#d8e1d3}.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}.split>*{min-width:0}.dark-card{background:#243d2e;border:1px solid #51684d;border-radius:14px;padding:30px}.dark-card h3{font-size:1.6rem}.breadcrumb{font-size:.8rem;color:#60715f;margin:26px 0}.page-heading{padding:24px 0 36px}.page-heading h1{font-size:clamp(2.4rem,4.2vw,3.8rem)}.panel{padding:30px;background:#fff;border:1px solid #dce3d9;border-radius:14px;margin-bottom:28px}.panel h2{font-size:1.7rem}.large span{width:140px;height:140px;font-size:5rem}.price{font-size:1.5rem;font-weight:750}.specs>div{display:grid;grid-template-columns:1fr 2fr;border-top:1px solid #dce3d9;padding:16px 0;gap:24px}dt{font-weight:700}.source{display:block;font-size:.75rem;margin-top:8px}.prose{max-width:760px;margin:30px auto}.prose h2{font-size:1.65rem;margin-top:32px;scroll-margin-top:20px}.prose pre,.prose code{white-space:pre-wrap;overflow-wrap:anywhere}.prose p{line-height:1.85}.empty{padding:32px;border:1px dashed #aebda7;border-radius:14px;background:#f1f4e9;grid-column:1/-1}.notice{background:#fff4dc;border:1px solid #e3c892;padding:18px 24px;border-radius:10px;font-size:.9rem;margin-bottom:28px}.trust-panel{display:flex;justify-content:space-between;align-items:center;gap:36px;padding:38px;background:#e9eee3;border-radius:16px;border:1px solid #dce3d9}.trust-panel h2{font-size:1.8rem}.trust-panel p{max-width:680px;font-size:.9rem;margin-bottom:0}.trust-panel .eyebrow{margin-bottom:12px}.trust-panel .button{flex-shrink:0}.site-footer{background:#122e22;color:#d2ddc9;padding:48px 0;font-size:.85rem;border-top:3px solid #c1d859}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:40px}.site-footer a{color:#e3edd9}.site-footer .brand{color:#fff;margin-bottom:15px}.footer-grid>div>a:not(.brand){display:block;margin:10px 0}.footer-grid strong{color:#fff}.site-footer small{font-size:.72rem}.table-scroll{overflow-x:auto;border:1px solid #dce3d9;border-radius:12px;background:#fff}table{border-collapse:collapse;min-width:680px;width:100%;font-size:.9rem}caption{text-align:left;padding:18px 24px;font-weight:700;background:#eaf0df}th,td{text-align:left;vertical-align:top;padding:20px;border-bottom:1px solid #dce3d9;max-width:350px;min-width:170px}thead{background:#f2f5ec}tbody th{font-weight:600;background:#f9faf5}.filter-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:20px 0}input,select,button:not(.button){border:1px solid #82977b;border-radius:7px;padding:12px;background:#fff;color:#142c22;max-width:100%}button:not(.button){background:#f1f5e9}form label{display:block;font-size:.88rem;font-weight:650;margin:18px 0 6px}form input{width:100%}form .button{margin-top:24px}.result-panel{padding:36px;background:#e8efd9;border:1px solid #bacaa7;border-radius:15px}.article-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:40px}.article-layout nav a{display:block;margin:16px 0}.article-layout .prose{margin-top:0}.skip{position:absolute;left:20px;top:-100px;z-index:2;background:#fff;padding:12px}.skip:focus{top:10px}@media(max-width:1000px){.trust-panel{flex-direction:column;align-items:start}.three{gap:15px}.card-body,.need-card{padding:20px}.hero{background-position:58% center}}@media(max-width:760px){.shell{width:calc(100% - 36px)}.hero{padding-top:48px;background:linear-gradient(90deg,#081a12eb,#081a12ad),url(/hero.jpg) 60% center/cover}.hero h1{font-size:3.1rem}.hero .lead{font-size:1rem}.hero-trust{font-size:.72rem}.proof{margin-top:30px;padding:14px 0}.proof strong{font-size:.85rem}.proof small{font-size:.6rem;padding:0 4px}.section{padding:44px 0}.three,.two,.split,.article-layout{grid-template-columns:1fr}.section-heading{align-items:start;flex-direction:column;gap:15px}.grid{gap:18px}.need-card{padding:24px}.number{margin-bottom:20px}.card-body,.panel{padding:24px}.page-heading{padding:12px 0 25px}.page-heading h1{font-size:2.5rem}.page-heading .intro{font-size:.95rem}.split{gap:20px}.large{height:290px}.specs>div{grid-template-columns:1fr;gap:8px}.trust-panel{padding:20px;gap:16px;flex-direction:column;align-items:stretch}.trust-panel .button{width:100%;text-align:center}.footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-grid>div:first-child{grid-column:1/-1}body,dd,.article-layout .panel{margin:0}.actions{gap:14px}.preview-strip{font-size:.65rem}.breadcrumb{font-size:.75rem}.button{padding:13px 17px}}.product-photo{margin:0;min-width:0}.product-photo img{display:block;width:100%;height:235px;object-fit:contain;background:#eff2e9}.large,.product-detail .product-photo img{height:400px;border-radius:15px}.product-photo figcaption{font-size:.75rem;padding:12px;color:#526458}.product-art svg{width:40px;height:40px}.large svg{width:64px;height:64px}form fieldset{border:1px solid #dce3d9;border-radius:12px;padding:16px 18px;margin:0 0 16px;background:#fff;min-width:0}form legend{font-weight:800;padding:0 8px}form legend span{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:8px;border-radius:8px;background:#d9f36e;font-size:.8rem}.score-badge{display:inline-block;margin:0 0 10px;padding:4px 10px;border-radius:6px;background:#e8f2c8;font-size:.78rem;font-weight:800;color:#142c22}.score-badge.miss{background:#f6e7d8;font-weight:650}.fit-reasons{margin:0 0 12px;padding-left:18px;font-size:.82rem;color:#526458}.finder-item{min-width:0}.form-error{color:#8a2b12;background:#fde8e4;border:1px solid #e3b3a6;padding:12px 16px;border-radius:8px}.site-header{position:sticky;top:0;z-index:40;background:#faf9f4f5;backdrop-filter:blur(14px)}.header-inner{display:flex;align-items:center;justify-content:space-between;width:min(1280px,calc(100% - 32px));min-height:60px;gap:16px;padding:0;flex-wrap:nowrap}.site-header .brand{font-size:1rem;flex-shrink:0;gap:10px}.site-header .brand small{font-size:.64rem}.site-header .brand-icon{width:34px;height:34px}.navigation{width:auto}.navigation nav{display:flex;gap:0;align-items:center}.navigation a{font-size:.88rem;padding:12px 10px;white-space:nowrap;border-radius:6px}.navigation a:hover,.nav-categories summary:hover,.navigation a[aria-current],.nav-categories summary.active{background:#e8efd9;color:#245c43}.navigation a[aria-current]{border-bottom:2px solid #245c43}.navigation .nav-categories summary{display:list-item;list-style:disclosure-closed;font-size:.88rem;font-weight:700;padding:12px 10px;white-space:nowrap}.navigation .nav-categories[open] summary{list-style:disclosure-open}.nav-categories{position:relative}.nav-categories>div{position:absolute;top:100%;left:0;min-width:210px;display:grid;background:#fff;border:1px solid #dce3d9;border-radius:12px;padding:6px;box-shadow:0 12px 25px #142c2220}@media(max-width:1279px){.navigation>summary{display:grid;place-items:center;list-style:none;width:44px;height:44px;padding:0;font-size:1.35rem}.navigation[open]>summary span{font-size:0}.navigation[open]>summary span:after{content:"\d7";font-size:1.6rem}.navigation nav{position:absolute;top:60px;left:0;right:0;display:grid;grid-template-columns:1fr;align-items:stretch;gap:0;max-height:calc(100dvh - 60px);overflow-y:auto;background:#faf9f4;border-bottom:1px solid #dce3d9;padding:8px 16px 16px}.navigation a,.navigation .nav-categories summary{font-size:1rem;padding:13px;min-height:44px}.nav-categories>div{position:static;box-shadow:none;border:0;background:0 0;padding:0 0 0 10px}.nav-open{overflow:hidden}}@media(min-width:1280px){.navigation>summary{display:none}.navigation::details-content{content-visibility:visible;display:block}.navigation:not([open])>nav{display:flex}}.need-strength{display:block;color:#245c43}.editorial-summary-card{background:#f3f8ee;border:1px solid #c5dbbc;border-radius:12px;padding:18px 22px;margin:20px 0}.editorial-summary-header,.card-title-row{display:flex;align-items:center;gap:8px}.editorial-summary-header h3,.card-title-row h3{margin:0;font-size:1.15rem;color:inherit}.editorial-summary-text{font-size:1rem;line-height:1.6;margin:10px 0 0}.pros-cons-container,.target-fit-container{margin:20px 0;gap:18px}.pro-card,.con-card,.target-card{border-radius:12px;padding:16px 18px;border:1px solid #dce3d9}.pro-card{background:#f4f9f1;border-color:#b8d6b0;color:#1a4d25}.con-card{background:#fcf8f2;border-color:#e5d3ba;color:#784510}.fit-card{background:#f0f7f8;border-color:#b5d7de;color:#144c5c}.unfit-card{background:#faf4f4;border-color:#e6c4c4;color:#732424}.icon-indicator{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:.8rem;font-weight:800}.icon-indicator.pro{background:#d2ebd0;color:#1a4d25}.icon-indicator.con{background:#f5dfc9;color:#784510}.pro-list,.con-list{margin:8px 0 0;padding-left:18px}.pro-list li,.con-list li,.target-card p{margin:4px 0 0;font-size:.9rem;color:#142c22}.alternatives-widget-header{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:20px}.alternatives-widget-header h2{margin-bottom:6px}.buy-box-section{background:#f9fbf8;border:1px solid #d2ded0;border-radius:12px;padding:20px;margin:20px 0;box-shadow:0 2px 6px #142c220a}.buy-box-title{font-size:1.15rem;font-weight:750;color:#142c22;margin:0 0 10px}.buy-box-pricing{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}.buy-box-pricing .price{font-size:1.6rem;font-weight:800;color:#142c22;margin:0}.badge-fair-price,.badge-curator-verified{background:#e8f5e9;color:#1e6b2c;border:1px solid #a5d6a7;font-weight:700;font-size:.78rem;padding:4px 10px;border-radius:6px;display:inline-flex;align-items:center;gap:4px;letter-spacing:0;text-transform:none}.buy-box-note{font-size:.8rem;color:#526458;margin:0 0 16px;line-height:1.45}.buy-box-actions{margin:14px 0}.btn-shopee{background:linear-gradient(135deg,#f0532d,#d43b19);color:#fff;border:1px solid #b83113;font-weight:750;font-size:1.02rem;padding:13px 22px;border-radius:8px;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;box-shadow:0 2px 6px #d43b1940;transition:.15s}.btn-shopee:hover{background:#b83113;color:#fff;transform:translateY(-1px);box-shadow:0 4px 10px #d43b1959}.buy-box-disclosure{background:#f0f5ee;border:1px solid #d5e2d2;border-radius:8px;padding:10px 14px;margin-top:14px}.buy-box-disclosure p{font-size:.75rem;line-height:1.45;color:#354d3d;margin:0}.quick-specs-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 14px;background:#f3f7f0;border:1px solid #dce8d9;border-radius:10px;padding:12px 16px;margin:18px 0}.quick-spec-item{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.82rem}.quick-spec-label{color:#495e4e;min-width:0;line-height:1.35}.quick-spec-val{color:#142c22;font-weight:700;flex-shrink:0;text-align:right}@media(max-width:760px){.product-detail .product-photo img{height:290px}.alternatives-widget-header{flex-direction:column;align-items:flex-start}.alternatives-widget-cta,.alternatives-widget-cta .button,.cta-button{width:100%;text-align:center;display:block}.buy-box-actions .button,.buy-box-actions .btn-shopee{width:100%;display:flex;justify-content:center}.quick-specs-summary{grid-template-columns:1fr;gap:10px;padding:12px 14px}}.finder-card{background:#fff;border:1px solid #dce3d9;border-radius:14px;padding:24px;margin-bottom:24px}.finder-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:20px}.finder-grid label{display:grid;gap:6px;color:#142c22;font-size:.84rem;font-weight:750;margin:0}.finder-grid select{width:100%;min-height:46px;padding:10px 12px;color:#142c22;background:#fff;border:1px solid #82977b;border-radius:10px;font-size:.92rem}.form-hint{margin:12px 0 0;color:#526458;font-size:.78rem}@media(max-width:960px){.finder-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.finder-grid,.calc-grid{grid-template-columns:1fr}.finder-card{padding:18px}}.category-switch{display:inline-flex;border-radius:99px;border:1px solid #dce3d9;background:#fff;padding:4px;gap:6px;margin-bottom:8px}.category-button{border:0;background:0 0;border-radius:99px;padding:6px 14px;font-weight:700}.category-button.active{background:#eaf2e3;color:#245c43}.compare-picker{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 6px}.compare-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid #dce3d9;border-radius:10px;padding:8px 12px;background:#fff;cursor:pointer;font-size:.84rem}.compare-chip:has(:checked),.compare-chip.active{background:#f2f7ec;border-color:#245c43}.compare-chip input{accent-color:#245c43}.compare-chip span{display:flex;flex-direction:column;line-height:1.25}.compare-chip small{color:#526458;font-size:.74rem}.insight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:18px 0}.insight-grid>div{display:flex;flex-direction:column;gap:3px}.insight-grid small{color:#526458;font-size:.75rem}.insight-grid strong{color:#142c22;font-size:.92rem}.insight-val{font-size:.78rem;color:#245c43;font-weight:700}.mini-bike{width:100%;height:90px;display:grid;place-items:center;background:#f3f6ee;border-radius:8px;padding:4px;overflow:hidden}.mini-bike img{max-width:100%;max-height:82px;object-fit:contain}.winning-cell{background:#f7fae9}.winner{display:inline-flex;padding:2px 7px;border-radius:99px;background:#d9f36e;font-size:.68rem;font-weight:850;margin-right:4px}.row-winner{display:block;font-size:.72rem;color:#245c43;font-weight:700;margin-top:3px}.insight-grid>div,.calc-accordion,.calculator-results>article,.visual-comparison-bar,.tco-bars,.assumption-note{background:#fff;border:1px solid #dce3d9;border-radius:12px;padding:14px;margin-bottom:12px}.calc-accordion{padding:0;overflow:hidden}.calc-accordion summary{font-weight:750;font-size:.92rem;padding:12px 16px;background:#f9faf6;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}summary::-webkit-details-marker{display:none}.calc-accordion summary:after{content:"\25be";color:#526458}.calc-accordion[open] summary{border-bottom:1px solid #dce3d9}.calc-accordion[open] summary:after{content:"\25b4"}.calc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;padding:16px}.calc-field{display:flex;flex-direction:column;gap:4px}.calc-field label{margin:0;font-size:.82rem;font-weight:700}.calc-field input[type=range]{width:100%;accent-color:#245c43;cursor:pointer;margin:4px 0 0}.input-affix{display:flex;align-items:center;border:1px solid #82977b;border-radius:8px;background:#fff;overflow:hidden}.input-affix input{border:0;border-radius:0;padding:8px 10px;flex:1;min-width:0;outline:0}.input-affix small{padding:0 10px;color:#526458;font-size:.8rem;font-weight:700;white-space:nowrap}.calc-field small{font-size:.72rem;color:#526458}.method-box{padding:12px 16px;font-size:.8rem;color:#495e4e;background:#fafbf8}.method-box p{margin:0 0 6px}.button-row{display:flex;gap:10px;margin:16px 0;flex-wrap:wrap}.calculator-results .result-highlight{background:#f2f8eb;border-color:#adc89f}.calculator-results small{font-size:.74rem;font-weight:700;text-transform:uppercase;color:#526458;display:block;margin-bottom:2px}.calculator-results article p{font-size:.82rem;margin:4px 0 0}.calculator-results output{display:block;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;letter-spacing:-.03em;color:#245c43}#installment-result,#tco-result{color:#142c22}.bar-label,.tco-row{display:flex;justify-content:space-between;font-size:.8rem;font-weight:700;margin-bottom:3px}.bar-track{background:#e8ece3;border-radius:6px;height:10px;overflow:hidden;margin-bottom:8px}.bar-fill{height:100%;border-radius:6px;transition:width .25s}.bar-fill.fuel{background:#d97736}.bar-fill.ev{background:#245c43}.assumption-note h3{font-size:.9rem;margin-bottom:6px}.assumption-note ul{margin:0;padding-left:16px;font-size:.8rem;color:#495e4e}@media(min-width:900px){.insight-grid{grid-template-columns:repeat(5,1fr)}}.spec-pill{padding:3px 8px;border-radius:6px;background:#eef3ea;font-size:.76rem;font-weight:700}.versus-route-link{display:block}
@media(max-width:390px){.quick-specs-summary{padding:10px 12px;gap:8px}}

/* Inherited from prototypes/electric-bicycles/styles.css.
   The theme's own sheet was adapted from this prototype and carries only part of it,
   so the parts it left out are supplied here. The theme's own rules come first and win.
   Generated by tools/theme-prototype-base.php. */
:root {
    --ink: #17231d;
    --muted: #647068;
    --paper: #f8f7f2;
    --card: #fff;
    --line: #dfe4df;
    --green: #245f42;
    --green-dark: #163e2b;
    --lime: #dff26d;
    --orange: #f68b3c;
    --shadow: 0 18px 50px rgba(29, 52, 39, 0.09);
    --radius: 22px;
    --max: 1180px;
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    overflow-x: clip;
}
body {
    min-width: 0;
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    line-height: 1.55;
}
main,
section,
article,
aside,
.shell,
.nav-wrap,
.footer-grid,
.footer-bottom {
    min-width: 0;
}
p,
li,
dd,
a,
button {
    overflow-wrap: break-word;
}
button,
input,
select {
    font: inherit;
}
a {
    color: inherit;
    text-decoration: none;
}
*:focus-visible {
    outline: 3px solid #9cad2f;
    outline-offset: 3px;
}

.affiliate-notice {
    margin: 12px 0 8px;
    padding: 10px 12px;
    border-left: 4px solid #d97706;
    background: #fff7ed;
    color: #713f12;
    font-size: .84rem;
    line-height: 1.45;
}

.editorial-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 18px 0;
    padding: 16px;
    border: 1px solid #cbd5d1;
    border-radius: 14px;
    background: #f7faf8;
    font-size: .86rem;
}
.editorial-trust div { display: grid; gap: 2px; }
.editorial-trust span { color: #40534a; }
.editorial-trust p, .editorial-trust a { grid-column: 1 / -1; margin: 0; }
img,
svg {
    display: block;
    max-width: 100%;
}
.skip-link {
    position: fixed;
    left: 1rem;
    top: -5rem;
    z-index: 99;
    background: white;
    padding: 0.7rem 1rem;
    border-radius: 8px;
}
.skip-link:focus {
    top: 1rem;
}
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(248, 247, 242, 0.93);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(223, 228, 223, 0.85);
}
.site-header a,
.site-header button,
.site-header summary {
    overflow-wrap: normal;
}
.nav-wrap {
    max-width: var(--max);
    margin: auto;
    height: 60px;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex: 0 0 auto;
    min-width: 0;
    height: 44px;
    font-weight: 850;
    letter-spacing: -0.025em;
}
.brand > span:last-child {
    display: grid;
    min-width: 0;
    line-height: 1.1;
    white-space: nowrap;
    width: max-content;
}
.brand small {
    display: block;
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.brand-mark {
    width: 34px;
    min-width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.brand-mark svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}
.brand-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
.menu-button {
    position: relative;
    z-index: 42;
    display: inline-grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
    padding: 0.45rem;
    flex: 0 0 44px;
}
.menu-button span,
.menu-button::before,
.menu-button::after {
    position: absolute;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    content: "";
}
.menu-button::before { transform: translateY(-6px); }
.menu-button::after { transform: translateY(6px); }
.menu-button[aria-expanded="true"] span { opacity: 0; }
.menu-button[aria-expanded="true"]::before { transform: rotate(45deg); }
.menu-button[aria-expanded="true"]::after { transform: rotate(-45deg); }
.main-nav {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem 1rem 1rem;
    z-index: 41;
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
}
.main-nav.open {
    display: grid;
}
.main-nav a {
    padding: 0.8rem;
    font-weight: 700;
}
.nav-categories summary { cursor: pointer; font-weight: 700; padding: 0.8rem; }
.nav-categories div { display: grid; padding-left: 0.6rem; }
.nav-categories summary::marker { color: var(--green); }
@media (max-width: 1279px) {
    .main-nav {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .main-nav > a,
    .nav-categories {
        border-top: 1px solid var(--line);
    }
    .nav-categories div a {
        padding-block: 0.65rem;
        color: var(--muted);
    }
}
@media (max-width: 420px) {
    .nav-wrap { gap: 0.65rem; }
    .brand { gap: 0.55rem; }
    .brand-mark {
        width: 32px;
        min-width: 32px;
        height: 32px;
        flex-basis: 32px;
    }
    .brand small {
        font-size: 0.58rem;
        letter-spacing: 0.035em;
    }
}
main {
    min-height: 70vh;
}
.shell {
    width: min(var(--max), calc(100% - 2rem));
    margin-inline: auto;
}
.section {
    padding: 4rem 0;
}
.section-tight {
    padding: 2.2rem 0;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1rem;
    color: var(--green);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.eyebrow::before {
    content: "";
    width: 23px;
    height: 2px;
    background: var(--orange);
}
h1,
h2,
h3,
p {
    margin-top: 0;
}
h1,
h2,
h3 {
    line-height: 1.08;
    letter-spacing: -0.045em;
}
h1 {
    font-size: clamp(2.55rem, 9vw, 5.8rem);
    max-width: 870px;
    margin-bottom: 1.25rem;
}
h2 {
    font-size: clamp(2rem, 6vw, 3.4rem);
    margin-bottom: 1rem;
}
h3 {
    font-size: 1.25rem;
}
.lede {
    max-width: 660px;
    color: var(--muted);
    font-size: clamp(1.02rem, 2vw, 1.22rem);
}
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.5rem;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0.75rem 1.15rem;
    border: 1px solid var(--green);
    border-radius: 13px;
    background: var(--green);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform 0.2s,
        box-shadow 0.2s,
        background 0.2s;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(36, 95, 66, 0.18);
    background: var(--green-dark);
}
.btn-secondary {
    color: var(--green);
    background: transparent;
}
.btn-light {
    color: var(--ink);
    background: white;
    border-color: white;
}
.btn-shopee {
    background: #b9361f;
    border-color: #b9361f;
}
.btn-shopee:hover {
    background: #d94327;
}
.hero {
    overflow: hidden;
    padding: 3.5rem 0 2.5rem;
}
.hero-photo {
    position: relative;
    min-height: clamp(590px, 74vh, 760px);
    display: grid;
    align-items: end;
    color: #fff;
    background: linear-gradient(90deg, rgba(8, 26, 18, .92) 0%, rgba(8, 26, 18, .72) 45%, rgba(8, 26, 18, .16) 78%), url("assets/hero/electric-scooter-rider.jpg") 62% 58% / cover no-repeat;
}
.hero-photo .hero-grid { grid-template-columns: minmax(0, 720px); }
.hero-photo .hero-copy { padding: clamp(1.25rem, 5vw, 3rem) 0; }
.hero-photo .hero-copy .eyebrow,.hero-photo .hero-copy h1 span { color: var(--lime); }
.hero-photo .lede,.hero-photo .trust-line { color: #f4f7f4; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.hero-photo .proof-strip { background: rgba(8, 26, 18, .84); border-color: rgba(255,255,255,.25); }
.hero-grid {
    display: grid;
    gap: 2rem;
    align-items: center;
}
.hero-copy h1 span {
    color: var(--green);
}
.trust-line {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 650;
}
.trust-line span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.visual-card {
    position: relative;
    min-height: 390px;
    border-radius: 35px;
    overflow: hidden;
    background: var(--green);
    color: white;
    box-shadow: var(--shadow);
}
.sun {
    position: absolute;
    width: 170px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--lime);
    top: -35px;
    right: -35px;
}
.city {
    position: absolute;
    inset: auto 0 0;
    height: 54%;
    opacity: 0.17;
    background: repeating-linear-gradient(
        90deg,
        transparent 0 27px,
        #fff 28px 54px
    );
    clip-path: polygon(
        0 40%,
        13% 40%,
        13% 12%,
        27% 12%,
        27% 50%,
        40% 50%,
        40% 25%,
        53% 25%,
        53% 0,
        66% 0,
        66% 45%,
        80% 45%,
        80% 22%,
        92% 22%,
        92% 60%,
        100% 60%,
        100% 100%,
        0 100%
    );
}
.bike-art {
    position: absolute;
    inset: 18% 3% 6%;
    display: grid;
    place-items: center;
}
.bike-art svg {
    width: 100%;
    filter: drop-shadow(0 16px 14px rgba(0, 0, 0, 0.18));
}
.visual-note {
    position: absolute;
    left: 1.2rem;
    bottom: 1.2rem;
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink);
    padding: 0.8rem 1rem;
    border-radius: 14px;
    font-weight: 800;
    box-shadow: var(--shadow);
}
.visual-note small {
    display: block;
    color: var(--muted);
    font-weight: 600;
}
.proof-strip {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--shadow);
}
.proof-strip div {
    padding: 1rem 0.7rem;
    text-align: center;
    border-right: 1px solid var(--line);
}
.proof-strip div:last-child {
    border: 0;
}
.proof-strip strong {
    display: block;
    font-size: 1.2rem;
    color: var(--green);
}
.proof-strip small {
    color: var(--muted);
}
.section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1.8rem;
}
.section-head p {
    color: var(--muted);
    max-width: 540px;
    margin: 0;
}
.needs-grid {
    display: grid;
    gap: 1rem;
}
.need-card {
    position: relative;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: white;
    overflow: hidden;
    transition:
        transform 0.2s,
        border-color 0.2s;
}
.need-card:hover {
    transform: translateY(-3px);
    border-color: var(--green);
}
.need-icon {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background: var(--paper);
    border-radius: 15px;
    font-size: 1.45rem;
}
.need-card h3 {
    margin: 1rem 0 0.35rem;
}
.need-card p {
    color: var(--muted);
    margin: 0;
    font-size: 0.9rem;
}
.arrow {
    position: absolute;
    right: 1.2rem;
    top: 1.2rem;
    color: var(--green);
    font-weight: 900;
}
.product-grid {
    display: grid;
    gap: 1.1rem;
}
.card,
.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: white;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(29, 52, 39, 0.04);
}
.card-body,
.product-card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.15rem;
}
.card-body p,
.product-card .card-body p {
    flex: 1 1 auto;
}
.card-actions,
.card-body > .text-link,
.card-body > .card-actions,
.product-card .card-body > .text-link,
.product-card .card-body > .card-actions {
    margin-top: auto;
}
.home-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.home-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: white;
}
.home-product-card > div {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.15rem;
}
.home-product-card h3 {
    margin: 0.3rem 0 0.45rem;
}
.home-product-card h3 a {
    color: inherit;
    text-decoration: none;
}
.home-product-card p {
    color: var(--muted);
    font-size: 0.92rem;
    flex: 1 1 auto;
}
.home-product-card a.text-link,
.home-product-card .card-actions {
    margin-top: auto;
}
.home-product-image {
    display: grid;
    height: 230px;
    padding: 0.8rem;
    background: var(--product-color);
}
.home-product-image .product-photo {
    min-height: 0;
}
.home-product-price {
    color: var(--ink);
}
.random-brand {
    display: grid;
    grid-template-columns: 0.45fr 1.55fr;
    gap: 2rem;
    align-items: center;
    margin-top: 1.5rem;
    padding: 2rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-color) 12%, white);
}
.brand-logo-wrap {
    position: relative;
    display: grid;
    width: 9rem;
    height: 5rem;
    padding: 0.75rem;
    place-items: center;
    border-radius: 1rem;
    background: #17231d;
}
.brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.brand-logo-fallback {
    display: none;
    color: white;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-align: center;
}
.brand-logo-wrap.asset-error .brand-logo { display: none; }
.brand-logo-wrap.asset-error .brand-logo-fallback { display: block; }
.brand-logo-hero {
    width: 11rem;
    height: 5.5rem;
    margin: 1rem 0;
}
@media (max-width: 760px) {
    .home-product-grid,
    .random-brand {
        grid-template-columns: 1fr;
    }
    .home-product-image {
        height: 210px;
    }
}
.product-visual {
    position: relative;
    min-height: 210px;
    display: grid;
    place-items: center;
    padding: 1.2rem;
    background: var(--product-color);
}
.product-visual svg {
    width: 88%;
    max-height: 180px;
}
.product-photo {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 230px;
    object-fit: contain;
    object-position: center;
    mix-blend-mode: multiply;
}
.product-asset {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: inherit;
    place-items: center;
}
.product-asset > .product-photo,
.product-asset > .vehicle-placeholder { grid-area: 1 / 1; }
.product-asset > .vehicle-placeholder { display: none; }
.product-asset-fallback > .vehicle-placeholder,
.product-asset.asset-error > .vehicle-placeholder { display: flex; }
.product-asset.asset-error > .product-photo { display: none; }

.detail-visual .product-photo {
    min-height: 420px;
    padding: 1rem;
}

.mini-bike .product-photo {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}
.badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: inline-flex;
    padding: 0.38rem 0.65rem;
    border-radius: 99px;
    color: white;
    background: var(--product-accent);
    font-size: 0.72rem;
    font-weight: 800;
}
.score {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.38rem 0.6rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 850;
}
.product-body {
    padding: 1.25rem;
}
.product-kicker {
    color: var(--muted);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    font-weight: 800;
}
.product-body h3 {
    margin: 0.3rem 0 0.5rem;
    font-size: 1.45rem;
}
.price {
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}
.price small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
}
.spec-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    margin: 1rem 0;
}
.spec-row div {
    padding: 0.65rem 0.45rem;
    border-radius: 11px;
    background: var(--paper);
    text-align: center;
}
.spec-row strong,
.spec-row small {
    display: block;
}
.spec-row small {
    color: var(--muted);
    font-size: 0.68rem;
}
.reason {
    padding: 0.85rem;
    border-left: 3px solid var(--lime);
    background: #f8faec;
    border-radius: 0 10px 10px 0;
    color: #465048;
    font-size: 0.86rem;
}
.tradeoff {
    color: var(--muted);
    font-size: 0.83rem;
    margin: 0.8rem 0 0;
}
.tradeoff strong {
    color: var(--ink);
}
.card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-top: 1rem;
}
.card-actions .btn {
    min-height: 43px;
    padding: 0.55rem 0.7rem;
    font-size: 0.82rem;
}
.affiliate-note {
    margin-top: 1rem;
    color: var(--muted);
    font-size: 0.73rem;
}
.dark-section {
    background: var(--green-dark);
    color: white;
}
.dark-section .eyebrow {
    color: var(--lime);
}
.dark-section .section-head p {
    color: #b9c9bf;
}
.steps {
    display: grid;
    gap: 1rem;
    counter-reset: step;
}
.step {
    padding: 1.3rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.05);
}
.step::before {
    counter-increment: step;
    content: "0" counter(step);
    display: block;
    color: var(--lime);
    font-size: 0.78rem;
    font-weight: 900;
    margin-bottom: 2rem;
}
.step p {
    color: #b9c9bf;
    margin: 0;
}
.page-hero {
    padding: 3.2rem 0 2rem;
    border-bottom: 1px solid var(--line);
}
.page-hero h1 {
    font-size: clamp(2.3rem, 7vw, 4.7rem);
}
.breadcrumbs {
    display: flex;
    gap: 0.45rem;
    color: var(--muted);
    font-size: 0.78rem;
    margin-bottom: 1.4rem;
}
.filter-bar {
    display: grid;
    gap: 0.8rem;
    margin: 1.5rem 0 2rem;
    padding: 1rem;
    background: white;
    border: 1px solid var(--line);
    border-radius: 18px;
}
.filter-bar label {
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 750;
}
.filter-bar select {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: 10px;
    padding: 0.7rem;
    color: var(--ink);
}
.finder-card {
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: white;
    box-shadow: var(--shadow);
}
.calculator-layout { display: grid; gap: 1.5rem; align-items: start; }
.calculator-form, .calculator-output { min-width: 0; }
.calculator-form { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow); }
.calculator-section h2, .calculator-form details h2 { font-size: 1.35rem; }
.calculator-section, .calculator-form details { margin-bottom: 1rem; }
.calculator-form details { border-top: 1px solid var(--line); padding-top: 1rem; }
.calculator-form summary { cursor: pointer; color: var(--green-dark); font-weight: 850; }
.calculator-grid { display: grid; gap: 0.85rem; margin-top: 1rem; }
.calculator-form label { display: grid; gap: 0.35rem; margin: 0 0 0.85rem; font-size: 0.82rem; font-weight: 800; }
.calculator-form select, .input-affix { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); }
.calculator-form select { padding: 0.7rem; color: var(--ink); }
.input-affix { display: flex; align-items: center; overflow: hidden; }
.input-affix input { width: 100%; min-width: 0; padding: 0.7rem; border: 0; outline-offset: -3px; background: transparent; color: var(--ink); }
.input-affix small { flex: none; padding: 0 0.75rem; color: var(--muted); font-weight: 700; }
.input-affix:has(input[aria-invalid="true"]) { border-color: #a43e2c; }
.field-error { color: #8a2e20; font-size: 0.72rem; font-weight: 650; }
.privacy-note, .assumption-note, .tco-bars p { color: var(--muted); font-size: 0.78rem; }
.calculator-results { display: grid; gap: 0.8rem; }
.calculator-results > article, .tco-bars, .assumption-note { padding: 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: white; }
.calculator-results article small, .calculator-results article strong, .calculator-results article span { display: block; }
.calculator-results article strong { margin: 0.3rem 0; color: var(--green); font-size: clamp(1.6rem, 5vw, 2.25rem); letter-spacing: -0.04em; }
.calculator-results article strong.negative { color: #a43e2c; }
.result-highlight { background: #f1f6e5 !important; border-color: #c9da9a !important; }
.tco-bars h2 { font-size: 1.25rem; }
.tco-bars div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.assumption-note { margin: 1rem 0; background: #edf5ef; }
.assumption-note ul { margin-bottom: 0; padding-left: 1.2rem; }
@media (min-width: 760px) { .calculator-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .calculator-layout { grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr); } .calculator-output { position: sticky; top: 80px; } }
.optional-category { border: 0; margin: 0 0 1.2rem; padding: 0; }
.optional-category legend { font-size: 0.84rem; font-weight: 800; }
.optional-category small { color: var(--muted); }
.category-filter input { position: absolute; opacity: 0; pointer-events: none; }
.category-filter span { display: block; }
.category-filter { border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 700; padding: 0.7rem 1rem; }
.category-filter.active, .category-filter:has(input:checked) { background: var(--green); border-color: var(--green); color: white; }
.category-entry-grid, .solution-overview { display: grid; gap: 1rem; }
.category-entry { background: white; border: 1px solid var(--line); border-radius: var(--radius); color: inherit; display: flex; gap: 1rem; padding: 1.2rem; text-decoration: none; }
.category-entry > span, .solution-overview article > span { font-size: 2rem; }
.category-entry h3, .category-entry p { margin: 0.25rem 0; }
.category-entry small { color: var(--green); font-weight: 800; }
.solution-overview { margin: 1.5rem 0 2.5rem; }
.solution-overview article { background: #f1f6e5; border: 1px solid #c9da9a; border-radius: 14px; display: flex; gap: 0.9rem; padding: 1rem; }
.solution-overview h3, .solution-overview p { margin: 0 0 0.35rem; }
.result-group { border-top: 1px solid var(--line); padding: 2rem 0; }
.finder-grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.2rem;
}
.finder-grid label {
    display: grid;
    gap: 0.45rem;
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 800;
}
.finder-grid select {
    width: 100%;
    min-height: 48px;
    padding: 0.7rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 11px;
}
.form-hint,
.range-footnote {
    margin: 0.8rem 0 0;
    color: var(--muted);
    font-size: 0.78rem;
}
.finder-empty {
    margin-top: 1rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}
.finder-empty p {
    margin: 0.4rem auto 0;
    max-width: 530px;
}
.results-panel {
    padding-top: 3rem;
}
.answer-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
}
.answer-summary span {
    padding: 0.45rem 0.7rem;
    color: var(--green-dark);
    background: #edf5ef;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 750;
}
.fit-block {
    margin-top: 1rem;
    padding: 0.85rem;
    border-radius: 11px;
    background: #f0f7e5;
    font-size: 0.83rem;
}
.fit-block ul {
    margin: 0.45rem 0 0;
    padding-left: 1.1rem;
}
.not-fit {
    padding: 0.8rem;
    color: #6c4035;
    background: #fff2ed;
    border-radius: 10px;
    font-size: 0.82rem;
}
.source-note {
    margin: 1rem 0 0;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.45;
}
.source-note a {
    text-decoration: underline;
}
.method-box {
    margin: 1.5rem 0;
    padding: 1.25rem;
    border: 1px solid #b9d0c0;
    border-radius: var(--radius);
    background: #edf5ef;
}
.method-box h3 {
    margin-bottom: 0.5rem;
}
.method-box p {
    color: var(--muted);
}
.method-box a {
    color: var(--green);
    font-weight: 800;
}
.results-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    color: var(--muted);
    font-size: 0.86rem;
}
.empty {
    grid-column: 1/-1;
    padding: 3rem 1rem;
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--muted);
}
.compare-picker {
    display: grid;
    gap: 0.7rem;
    margin: 1.5rem 0;
}
.compare-chip {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: white;
    cursor: pointer;
}
.compare-chip:has(input:checked) {
    border-color: var(--green);
    box-shadow: inset 0 0 0 1px var(--green);
}
.compare-chip input {
    accent-color: var(--green);
}
.compare-chip small {
    display: block;
    margin-top: 0.2rem;
    color: var(--muted);
}
.insight-grid {
    display: grid;
    gap: 0.6rem;
    margin: 1rem 0;
}
.insight-grid div {
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: white;
}
.insight-grid small,
.insight-grid strong {
    display: block;
}
.insight-grid small {
    color: var(--muted);
    margin-bottom: 0.2rem;
}
.row-winner {
    display: block;
    margin-top: 0.3rem;
    color: var(--green);
    font-size: 0.68rem;
}
.winning-cell {
    background: #f7fae9;
}
.compare-wrap {
    overflow-x: auto;
    padding-bottom: 0.7rem;
}
.compare-table {
    min-width: 700px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.compare-table th,
.compare-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
.compare-table th:first-child,
.compare-table td:first-child {
    width: 160px;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 750;
    background: #fbfbf8;
}
.compare-table tr:last-child td {
    border-bottom: 0;
}
.compare-head {
    min-width: 170px;
}
.compare-head .mini-bike {
    height: 90px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    margin-bottom: 0.8rem;
}
.compare-head svg {
    width: 120px;
}
.winner {
    display: inline-flex;
    padding: 0.25rem 0.5rem;
    border-radius: 99px;
    background: var(--lime);
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 850;
}
.detail-grid {
    display: grid;
    gap: 2rem;
}
.detail-visual {
    min-height: 360px;
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 30px;
    background: var(--product-color);
    overflow: hidden;
}
.detail-visual svg {
    width: 85%;
}
.thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.7rem;
}
.thumb {
    width: 60px;
    height: 48px;
    border: 1px solid var(--line);
    background: white;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    color: var(--muted);
}
.rating {
    color: #a85f08;
    font-weight: 800;
    font-size: 0.85rem;
}
.detail-title {
    font-size: clamp(2.25rem, 7vw, 4.1rem);
    margin: 0.5rem 0 1rem;
}
.verdict {
    font-size: 1.08rem;
    color: var(--muted);
}
.key-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
    margin: 1.4rem 0;
}
.key-specs div {
    padding: 0.85rem;
    background: white;
    border: 1px solid var(--line);
    border-radius: 12px;
}
.key-specs small {
    display: block;
    color: var(--muted);
}
.choice-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0;
    list-style: none;
}
.choice-list li {
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: 0.45rem 0.75rem;
    font-size: 0.8rem;
    background: white;
}
.buy-box {
    margin-top: 1.5rem;
    padding: 1rem;
    background: white;
    border: 1px solid var(--line);
    border-radius: 17px;
    box-shadow: var(--shadow);
}
.buy-box .btn {
    width: 100%;
    margin-top: 0.7rem;
}
.buy-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    color: var(--muted);
    font-size: 0.74rem;
}
.analysis-grid {
    display: grid;
    gap: 1rem;
}
.analysis-card {
    padding: 1.3rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: white;
}
.analysis-card.good {
    border-top: 4px solid var(--green);
}
.analysis-card.caution {
    border-top: 4px solid var(--orange);
}
.analysis-card ul {
    margin: 0;
    padding-left: 1.2rem;
}
.spec-table {
    width: 100%;
    border-collapse: collapse;
}
.spec-table td {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
}
.spec-table td:last-child {
    text-align: right;
    font-weight: 750;
}
.spec-table td:first-child {
    width: 34%;
}
.guide-grid {
    display: grid;
    gap: 1rem;
}
.guide-card {
    background: white;
    border: 1px solid var(--line);
    padding: 1.4rem;
    border-radius: var(--radius);
}
.guide-card span {
    display: grid;
    place-items: center;
    width: 42px;
    aspect-ratio: 1;
    margin-bottom: 1.2rem;
    border-radius: 12px;
    color: var(--green);
    background: var(--lime);
    font-weight: 900;
}
.disclosure {
    display: flex;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid #efd7b8;
    border-radius: 14px;
    background: #fff8eb;
    color: #665744;
    font-size: 0.8rem;
}
.no-match-card {
    padding: clamp(1.25rem, 4vw, 2.25rem);
    border: 2px solid #e6a071;
    border-radius: var(--radius);
    background: #fff7f1;
}
.no-match-card p {
    max-width: 720px;
    color: var(--muted);
}
.brand-grid,
.simple-product-grid,
.brand-facts,
.brand-source-grid {
    display: grid;
    gap: 1rem;
}
.brand-card,
.simple-product,
.brand-facts article,
.source-list {
    padding: 1.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: white;
}
.brand-card {
    border-top: 5px solid var(--brand-color);
}
.brand-card h2 {
    margin: 1rem 0 0.55rem;
}
.brand-card .btn {
    margin-top: 1rem;
}
.brand-monogram {
    width: 54px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: white;
    background: var(--brand-color);
    font-weight: 900;
}
.muted {
    color: var(--muted);
}
.brand-facts article {
    border-top: 4px solid var(--brand-color, var(--green));
}
.brand-facts h2 {
    font-size: 1.55rem;
}
.brand-facts li {
    margin-bottom: 0.5rem;
}
.source-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 1rem 0 2rem;
}
.source-list a,
.text-link {
    color: var(--green);
    text-decoration: underline;
    font-weight: 750;
}
.simple-product small {
    color: var(--muted);
    text-transform: uppercase;
    font-weight: 800;
}
.simple-product h3 {
    margin: 0.5rem 0;
}
.simple-product-visual {
    height: 180px;
    margin: -1.35rem -1.35rem 1rem;
    overflow: hidden;
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    background: var(--product-color);
}
.simple-product-visual .product-photo { min-height: 0; }
.simple-product-visual .vehicle-placeholder span { font-size: 3.5rem; }
.brand-winners {
    grid-template-columns: repeat(2, 1fr);
}
.brand-table th a {
    color: var(--green);
    text-decoration: underline;
}
.site-footer {
    padding: 3rem 1rem 1.5rem;
    color: #dbe5df;
    background: #102c20;
}
.footer-grid {
    max-width: var(--max);
    margin: auto;
    display: grid;
    gap: 2rem;
}
.footer-grid p {
    color: #9fb2a7;
    font-size: 0.83rem;
    max-width: 390px;
}
.footer-grid div:not(:first-child) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
}
.footer-brand {
    margin-bottom: 0.8rem;
}
.footer-bottom {
    max-width: var(--max);
    margin: 2rem auto 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    color: #82998b;
    font-size: 0.72rem;
}
.toast {
    position: fixed;
    z-index: 80;
    left: 50%;
    bottom: 1.2rem;
    transform: translate(-50%, 120px);
    opacity: 0;
    width: min(92%, 430px);
    padding: 0.9rem 1rem;
    border-radius: 13px;
    background: var(--ink);
    color: white;
    text-align: center;
    font-size: 0.85rem;
    box-shadow: var(--shadow);
    transition: 0.25s ease;
}
.toast.show {
    transform: translate(-50%, 0);
    opacity: 1;
}

@media (min-width: 640px) {
    .category-entry-grid, .solution-overview { grid-template-columns: repeat(3, 1fr); }
    .needs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .filter-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .finder-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .insight-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .compare-picker {
        grid-template-columns: repeat(3, 1fr);
    }
    .steps,
    .guide-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .analysis-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .brand-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .simple-product-grid,
    .brand-facts {
        grid-template-columns: repeat(2, 1fr);
    }
    .brand-source-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1.2fr;
    }
}
@media (min-width: 900px) {
    .menu-button {
        display: none;
    }
    .main-nav {
        position: static;
        display: flex;
        background: transparent;
        border: 0;
        padding: 0;
        gap: 0.35rem;
    }
    .main-nav a {
        padding: 0.5rem 0.8rem;
        font-size: 0.88rem;
    }
    .nav-categories { position: relative; }
    .nav-categories summary { padding: 0.5rem 0.8rem; font-size: 0.88rem; }
    .nav-categories div { background: white; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); display: none; left: 0; min-width: 200px; padding: 0.35rem; position: absolute; top: 100%; }
    .nav-categories[open] div { display: grid; }
    .hero {
        padding: 5rem 0 3rem;
    }
    .hero-grid {
        grid-template-columns: 1.12fr 0.88fr;
        gap: 3rem;
    }
    .visual-card {
        min-height: 510px;
    }
    .needs-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .filter-bar {
        grid-template-columns: 1fr 1fr auto;
        align-items: end;
    }
    .finder-card {
        padding: 1.7rem;
    }
    .finder-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .insight-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    .detail-grid {
        grid-template-columns: 1.05fr 0.95fr;
        align-items: start;
    }
    .detail-visual {
        min-height: 530px;
    }
    .key-specs {
        grid-template-columns: repeat(4, 1fr);
    }
    .brand-winners {
        grid-template-columns: repeat(5, 1fr);
    }
}
@media (max-width: 520px) {
    h1 {
        font-size: clamp(2.15rem, 12vw, 2.55rem);
    }
    h2 {
        font-size: clamp(1.75rem, 9vw, 2.1rem);
    }
    .card-actions {
        grid-template-columns: 1fr;
    }
    .spec-table thead {
        display: none;
    }
    .spec-table,
    .spec-table tbody,
    .spec-table tr,
    .spec-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .spec-table tr {
        padding: 0.65rem 0;
        border-bottom: 1px solid var(--line);
    }
    .spec-table td {
        padding: 0.2rem 0;
        border: 0;
        text-align: left !important;
    }
}
/* Keep the full seven-item navigation out of tablet widths. */
@media (min-width: 900px) and (max-width: 1279px) {
    .menu-button {
        display: block;
    }
    .main-nav {
        position: absolute;
        inset: 60px 0 auto;
        display: none;
        max-height: calc(100vh - 60px);
        max-height: calc(100dvh - 60px);
        overflow-y: auto;
        padding: 0.5rem 1rem 1rem;
        border-bottom: 1px solid var(--line);
        background: var(--paper);
    }
.main-nav.open {
    display: grid;
}
body.nav-open { overflow: hidden; }
    .nav-categories,
    .nav-categories div {
        position: static;
    }
    .nav-categories div {
        display: grid;
        min-width: 0;
        padding: 0 0 0 0.6rem;
        border: 0;
        box-shadow: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        transition: none !important;
    }
}

.category-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 1rem 0;
}
.category-button {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper, #fff);
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0.7rem 1rem;
}
.category-button.active {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}
.needs-landing { background: #edf3ef; border-block: 1px solid var(--line); }
.home-category-switch { margin-top: 1.5rem; }
.filter-status { color: var(--muted); font-size: 0.88rem; margin-bottom: 1.25rem; }
.journey-grid, .ranking-preview-grid { display: grid; gap: 1rem; }
.journey-card { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; min-width: 0; padding: 1.2rem; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 8px 25px rgba(29, 52, 39, 0.04); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.journey-card:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: var(--shadow); }
.journey-card h3, .journey-card p { margin-bottom: 0.5rem; }
.journey-card p { color: var(--muted); font-size: 0.9rem; }
.journey-card strong { color: var(--green); font-size: 0.85rem; }
.journey-icon { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 12px; background: var(--lime); font-size: 1.35rem; }
.ranking-preview { background: var(--ink); color: white; }
.ranking-preview .eyebrow { color: var(--lime); }
.ranking-preview .section-head > p, .ranking-preview article > p, .ranking-note p { color: #bfc9c2; }
.ranking-preview-grid article { position: relative; overflow: hidden; padding: 1.35rem; border: 1px solid #3a4740; border-radius: 20px; background: #202e27; }
.ranking-preview-grid article > strong { display: block; margin-bottom: 0.65rem; color: var(--lime); }
.rank-number { position: absolute; right: 1rem; top: 0.7rem; color: #a8b5ad; font-size: 2.2rem; font-weight: 900; }
.preview-tradeoff { margin: 1rem 0; padding-top: 1rem; border-top: 1px solid #3a4740; color: #dfe5e1; font-size: 0.88rem; }
.preview-tradeoff span { display: block; margin-bottom: 0.25rem; color: var(--orange); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.ranking-preview .text-link { color: var(--lime); }
.ranking-note { display: grid; gap: 0.5rem; margin-top: 1rem; padding: 1.2rem; border-radius: 18px; background: #2c3b33; }
.ranking-note p { margin-bottom: 0.5rem; }
.ranking-note .btn { justify-self: start; border-color: #718078; color: white; }
@media (min-width: 640px) {
    .journey-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .journey-grid, .ranking-preview-grid { grid-template-columns: repeat(3, 1fr); }
    .ranking-note { grid-template-columns: 1fr 2fr auto; align-items: center; gap: 1.2rem; }
    .ranking-note p { margin: 0; }
}
@media (min-width:1280px) { body.nav-open { overflow:auto; } .main-nav[aria-hidden="true"] { visibility:visible; } }
@media (max-width:899px) { .hero-photo { min-height: 680px; background-position: 58% center; } .hero-photo .hero-copy { align-self:end; } }
.friendly-notice {
    background: #f1f6e5;
    border: 1px solid #c9da9a;
    border-radius: 14px;
    margin: 1rem 0;
    padding: 1rem 1.1rem;
}
.decision-card {
    margin-bottom: 1.25rem;
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid #b9d0c0;
    border-radius: var(--radius);
    background: #edf5ef;
}
.decision-card h2 { max-width: 760px; }
.decision-caveat { margin-bottom: 0; color: var(--muted); font-size: 0.88rem; }
.comparison-points { display: grid; gap: 1rem; margin: 1.25rem 0; }
.comparison-points article { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.comparison-points article > span, .alternative-rank { color: var(--green); font-weight: 900; letter-spacing: 0.08em; }
.comparison-points p, .comparison-points li { color: var(--muted); }
.social-card { display: grid; gap: 1.25rem; align-items: end; margin: 1.5rem 0; padding: clamp(1.4rem, 5vw, 2.5rem); border-radius: 28px; background: linear-gradient(135deg, var(--green-dark), var(--green)); color: white; box-shadow: var(--shadow); }
.social-card small, .social-card span { color: var(--lime); font-weight: 800; letter-spacing: 0.06em; }
.social-card h3 { margin: 0.55rem 0; font-size: clamp(1.8rem, 6vw, 3rem); }
.social-card p { max-width: 700px; }
.social-card .btn { justify-self: start; }
.alternative-list { display: grid; gap: 1rem; margin: 1.5rem 0; }
.alternative-card { position: relative; display: grid; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.alternative-visual { min-height: 210px; padding: 0.75rem; border-radius: 16px; background: var(--product-color); }
.alternative-visual .product-asset { height: 100%; }
.alternative-card h2 { margin: 0.25rem 0; font-size: clamp(1.65rem, 5vw, 2.4rem); }
@media (min-width: 760px) {
    .comparison-points { grid-template-columns: repeat(3, 1fr); }
    .social-card { grid-template-columns: 1fr auto; }
    /* The three columns here are rank, visual and text — they only exist on the alternatives page
       card, which has those three elements as direct children. The product page reuses the name on a
       compact preview card with neither rank nor visual, so scoping this to `article` keeps its
       plain text stacked in one column instead of being squeezed into a 38px and a 24px track. */
    article.alternative-card { grid-template-columns: 38px minmax(220px, .7fr) minmax(0, 1.3fr); padding: 1.35rem; }
}
/* The product page's alternatives preview. Its card is a `need-card` and an `alternative-card` at
   once, so it inherits the `min-height` and column sizing meant for the full alternatives page card
   — rank, visual, text. It has neither rank nor visual, only stacked text, so it goes back to a
   single column, aligns to its own top, and the eyebrow loses its leading rule, which reads as a
   stray divider once it is no longer the first thing in a section. The reset has to sit inside the
   same query as the three-column rule above, or that rule wins on source order at equal specificity. */
.alternatives-preview-grid .alternative-card { min-height: 0; align-content: start; justify-content: normal; }
.alternatives-preview-grid .alternative-card > .eyebrow { margin: 0; }
.alternatives-preview-grid .alternative-card > .eyebrow::before { content: none; }
.alternatives-preview-grid .alternative-card > .text-link { margin-top: auto; }
@media (min-width: 760px) {
    .alternatives-preview-grid .alternative-card { grid-template-columns: minmax(0, 1fr); }
}
.category-field {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 1rem;
    max-width: 28rem;
}
.category-pill {
    background: #edf3ef;
    color: #163e2b;
    border-radius: 999px;
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    margin: 0 0.45rem 0.5rem 0;
    padding: 0.3rem 0.6rem;
}
.vehicle-placeholder {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    width: 100%;
    padding: 1rem;
    color: var(--ink);
    text-align: center;
}
.vehicle-placeholder span { font-size: clamp(4rem, 12vw, 8rem); }
.vehicle-placeholder small { font-weight: 800; }
.vehicle-placeholder strong {
    max-width: 18rem;
    margin-top: 0.25rem;
    font-size: clamp(0.8rem, 2vw, 1rem);
}
/* Components the vehicle templates name that neither this sheet nor the prototype it was adapted
   from ever styled. Only custom properties are used, so they look like the rest of the site.
   Generated by tools/theme-vehicle-components.php. */
.panel,.product-intro-panel,.calculator-form-panel,.compare-selector-panel,.versus-decision-panel,.personal-review-panel,.editorial-review-panel{padding:1.25rem;border:1px solid var(--line,var(--border,#d9cdea));border-radius:.5rem;background:var(--surface,var(--paper,#fff));margin:1.5rem 0}
.advantages-header,.aspect-advantages-header,.versus-decision-header,.versus-crosslink-header{font-size:1.125rem;font-weight:700;margin:0 0 .75rem}
.advantages-panel,.aspect-advantages-panel{padding:.75rem;border-left:3px solid var(--brand,var(--purple,#6f2cff));background:var(--tint,var(--lilac,#eee5ff))}
.aspect-detail{display:grid;gap:.5rem;margin-bottom:.75rem}
.aspect-sublabel{font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;opacity:.75;margin:0}
.grid,.picker-grid,.alternatives-preview-grid,.decision-grid,.peer-specs-preview,.versus-peer-grid,.peer-summary{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
/* The needs form is a wrapper, not a grid. Making it one squeezed the .finder-grid inside it
   into a single auto-fit track, and that track's three columns left each question's select too
   narrow for its longest option, so the label was cut mid-word. */
.needs-form{min-width:0}
.finder-grid,.finder-grid label{min-width:0}
.card,.saving-card,.installment-card,.tco-card,.peer-card,.versus-peer-card{padding:1rem;border:1px solid var(--line,var(--border,#d9cdea));border-radius:.5rem}
.decision-reasons,.disclosure-box,.personal-review-body,.peer-card-actions,.calculator-transparency,.versus-crosslink-widget{margin-top:.75rem;padding-top:.75rem;border-top:1px dashed var(--line,var(--border,#d9cdea))}
.transparency,.calculator-transparency{font-size:.8125rem;opacity:.8}
.eeat-highlight-box{padding:.75rem 1rem;background:var(--tint,var(--lilac,#eee5ff));border-radius:.375rem;margin:1rem 0}
.eeat-read-more,.insight-winner{font-weight:700;color:var(--brand,var(--purple,#6f2cff))}
.insight-winner{display:inline-flex;align-items:center;gap:.35rem}
.mini-art{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:.375rem}
.empty-cell{padding:.75rem .625rem;opacity:.7;text-align:center}
.alternatives-widget{display:grid;gap:.75rem}
.persona-icon,.editorial-summary-icon{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--tint,var(--lilac,#eee5ff));font-size:.875rem;flex:none}
.specs-table,.peer-specs-preview table{width:100%;border-collapse:collapse}
.specs-table th,.specs-table td{padding:.5rem .625rem;border-bottom:1px solid var(--line,var(--border,#d9cdea));text-align:left}
.toggle,.compare-toggle{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;border:1px solid var(--line,var(--border,#d9cdea));border-radius:.35rem;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* The navigation groups. Seven links side by side is a wall rather than a menu, so they are
   grouped by what a reader is doing: starting, checking against something else, then learning
   how to judge it. Each group is a closed <details>, which collapses to one word on a phone
   and opens as a small menu on a desktop. A closed <details> is invisible until something
   opens it, so the rule below is what puts those links on screen without a click. */
.nav-group{position:relative}
.nav-group>div{position:absolute;top:100%;left:0;min-width:210px;display:grid;background:#fff;border:1px solid #dce3d9;border-radius:12px;padding:6px;box-shadow:0 12px 25px #142c2220}
.nav-group>div a{padding:.5rem .7rem;border-radius:8px}
.nav-group>div a:hover{background:#f3f8ee}
@media(min-width:1280px){.nav-group>summary{display:none}.nav-group:not([open])>div{position:static;min-width:0;display:flex;gap:1rem;background:none;border:0;box-shadow:none;padding:0}}
/* Shared layout structure. The layout names these the same way in every theme, and no theme
   defined them, so they rendered with browser defaults: a skip link visible on the page, a
   three-column grid that was one column, a secondary button with no affordance. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:.6rem 1rem;background:var(--ink,#17332d);color:var(--paper,#fff);text-decoration:none}
.skip-link:focus{left:0}
.three{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.prose>:first-child{margin-top:0}
.prose>*:last-child{margin-bottom:0}
.lede{font-size:1.125rem;line-height:1.6;opacity:.88;margin:0 0 1rem}
.section-intro{max-width:60ch;opacity:.85;margin:0 0 1.5rem}
.hero-note{padding:.75rem 1rem;border:1px solid currentColor;border-radius:.5rem;opacity:.9}
.result-heading{font-size:1.25rem;margin:0 0 .75rem}
.footer-label{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.journey,.needs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.trust{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center}
/* Residual interface elements: structures the shared layout names that neither a theme's own sheet
   nor the prototype it was adapted from ever defined. */
.navigation{display:flex;align-items:center}
.navigation>summary{cursor:pointer;list-style:none}
.navigation>summary::-webkit-details-marker{display:none}
.navigation[open]>summary~nav{position:absolute;right:1rem;top:100%;min-width:14rem;padding:.75rem;background:var(--paper,#fff);border:1px solid var(--line,#ccc);z-index:30}

/* The menu is written as a <details>, so it is closed — and therefore invisible — until something
   opens it. Below this width a reader is expected to tap the summary, which is right for a phone.
   Above it there is room for the whole bar, and it has to be laid out without being opened, or the
   navigation is missing from the page on every browser that does not open a closed <details> by
   itself. Ten of eleven sites were in exactly that state. The summary is hidden here because the
   links are already on screen. */
@media(min-width:900px){
.navigation>summary{display:none}
.navigation:not([open])>nav{display:flex;align-items:center;gap:1rem}
.navigation nav{position:static;background:none;border:0;padding:0;min-width:0}
.navigation nav a{padding:.35rem 0}
}
.ghost{background:none;border:1px solid currentColor;border-radius:.35rem}
.ghost:hover{opacity:.8}
.shell.hero-copy,.hero-copy{min-width:0}
.theme-mark,.brand-spark{display:inline-flex;align-items:center;gap:.35rem}
.buy-box-header{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--line,#ddd);margin-bottom:1rem}
.buy-box-header h2,.buy-box-header h3{margin:0}
.calc-range{width:100%;accent-color:var(--brand,var(--purple,#6f2cff))}
.slider-control{display:grid;gap:.35rem;margin-bottom:1rem}
.slider-control label{font-size:.875rem;opacity:.85}
.compare-form{display:grid;gap:1rem;padding:1rem;border:1px solid var(--line,#ddd);border-radius:.5rem;margin-bottom:1.5rem}
.compare-form select,.compare-form input{width:100%;padding:.5rem;border:1px solid var(--line,#ddd);border-radius:.35rem;background:var(--paper,#fff);color:inherit;font:inherit}
.aspect-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin:1.5rem 0}
.aspect-card{padding:1rem;border:1px solid var(--line,#ddd);border-radius:.5rem}
.aspect-card h3{margin:0 0 .5rem}
.aspect-diff{display:grid;gap:.35rem}
.aspect-diff>div{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px dashed var(--line,#ddd)}
.aspect-winner-row{font-weight:700;color:var(--brand,var(--purple,#6f2cff))}
/* Sprint 52 card frame. The photo keeps its own ratio inside a square. A height
   attribute must not stretch the picture into a tall hole. */
.product-card>.product-photo{aspect-ratio:1;position:relative;overflow:hidden;display:block;width:100%;height:auto;min-height:0;margin:0;background:#f4f7f1}
.product-card>.product-photo img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center;min-height:0}
/* Sprint 51 standalone gates. These follow the shared block so they win it.
   Desktop shows the four group names without a click. Inner links stay in the
   dropdown. The green half of the hero sits on the photograph, so it uses the
   same light lime as the rest of that line. Cards and hero buttons are untouched. */
html,body{color-scheme:light}
.hero .hero-copy h1 span{color:#d9f36e}
@media(min-width:1280px){
header .header-inner>.navigation{flex:0 0 auto;width:max-content;min-width:max-content;margin-left:auto}
header details.navigation::details-content{content-visibility:visible;display:block;height:auto}
header details.navigation>nav#main-nav{display:flex;flex-flow:row nowrap;align-items:center;gap:.35rem;position:static;width:max-content;min-width:max-content;background:transparent;border:0;padding:0}
header .navigation .nav-group>summary,header .navigation .nav-categories>summary{display:inline-flex;align-items:center;white-space:nowrap;padding:.5rem .75rem;font-weight:700;color:#142c22;background:transparent;cursor:pointer}
header .navigation .nav-group:not([open])>div,header .navigation .nav-categories:not([open])>div{display:none}
header .navigation .nav-group[open]>div,header .navigation .nav-categories[open]>div{position:absolute;top:100%;left:0;min-width:210px;display:grid;background:#fff;border:1px solid #dce3d9;border-radius:12px;padding:6px;box-shadow:0 12px 25px #142c2220;z-index:40}
}
/* Sprint 52 homepage bar. The hero fits one screen, the trust block sits apart
   from the footer, and the open phone menu stays under the wordmark. */
.hero{padding:1.25rem 0 1rem;color:#fff;background:linear-gradient(90deg,#081a12f5 0%,#081a12e8 55%,#081a12b8 100%),url(/hero.jpg) center/cover}
.hero .hero-copy{max-width:40rem;background:#081a12f2;border-radius:1.1rem;padding:1rem 1.15rem .85rem}
.hero .hero-copy h1{font-size:clamp(1.7rem,4vw,2.5rem);max-width:16em;margin-bottom:.75rem}
.hero .lead{max-width:36rem;font-size:1.05rem;margin-bottom:.75rem;color:#f7faf4}
.hero .proof{margin-top:1rem}
.name-source{max-width:42rem;margin-top:.25rem}
main>section.trust{margin-bottom:80px}
.site-footer{margin-top:0}
@media(min-width:1280px){
header .header-inner{overflow:visible}
header details.navigation::details-content{content-visibility:visible!important;display:block!important;height:auto!important}
header details.navigation>nav#main-nav{display:flex!important;flex-flow:row nowrap;align-items:center;position:static!important;width:max-content!important;min-width:max-content}
header .navigation .nav-group>summary,header .navigation .nav-categories>summary{display:inline-flex!important;white-space:nowrap;overflow-wrap:normal;word-break:normal}
}
@media(max-width:899px){
.hero{background:linear-gradient(180deg,#081a12f8 0%,#081a12f2 58%,#081a12dc 100%),url(/hero.jpg) center 30%/cover}
header .header-inner{flex-wrap:wrap;align-items:center}
header details.navigation>summary{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:auto;color:#142c22}
header details.navigation[open]{display:contents}
header details.navigation[open]>nav#main-nav{position:static;display:flex;flex-direction:column;align-items:flex-start;flex:1 0 100%;width:100%;min-width:0;right:auto;top:auto;margin:0;padding:.25rem 0 .75rem;background:#f8f7f2;border:0;box-shadow:none;z-index:1}
header details.navigation[open] .nav-group>summary,header details.navigation[open] .nav-categories>summary{display:flex;width:100%;white-space:nowrap;overflow-wrap:normal;word-break:normal;color:#142c22;padding:.65rem 0}
}
 pre,code{white-space:pre-wrap;overflow-wrap:anywhere}