/* ── Design Tokens ── */
:root{--accent:#f8b500;--accent-dark:#d99e00;--accent-soft:rgba(240,177,0,0.10);--accent-glow:rgba(240,177,0,0.25);--ink:#1d1d1f;--ink-2:#424245;--ink-3:#6e6e73;--ink-4:#86868b;--line:#d2d2d7;--bg:#f5f5f7;--bg-white:#ffffff;--radius:0.24rem;--radius-sm:0.12rem;--ease:cubic-bezier(0.25,0.1,0.25,1);--ease-spring:cubic-bezier(0.34,1.56,0.64,1);--shadow: 0 2px 6px rgba(0, 0, 0, 0.04);--shadow-hover: 0 2px 12px rgba(0, 0, 0, 0.06);--maxw:65vw}
/* ── Finder ── */
.finder{position:relative;padding:clamp(0.48rem,6vw,0.8rem) 0 clamp(0.6rem,8vw,1rem)}
.finder-card{background:var(--bg-white);border-radius:var(--radius);box-shadow:var(--shadow);padding: clamp(0.4rem, 4vw, 0.6rem);position:relative;overflow:hidden}

/* ── Steps Bar ── */
.steps-bar{display:flex;align-items:center;justify-content:center;margin-bottom:0.48rem;position:relative}
.step-node{display:flex;align-items:center;gap:0.1rem;position:relative;z-index:1}
.step-num{width:0.36rem;height:0.36rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.85em;font-family: OpenSans-bold;background:var(--bg);color:var(--ink-4);border:0.02rem solid var(--line);transition:all 0.5s var(--ease);flex-shrink:0}
.step-label{font-size:0.85em;font-family: OpenSans-bold;color:var(--ink-4);transition:color 0.4s var(--ease);white-space:nowrap}
.step-line{width:clamp(0.32rem,6vw,0.8rem);height:0.02rem;background:var(--line);margin:0 0.12rem;position:relative;overflow:hidden;flex-shrink:0}
.step-line::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--accent);transition:width 0.6s var(--ease)}
.step-line.filled::after{width:100%}
.step-node.active .step-num{background:var(--accent-soft);color:var(--accent-dark);border-color:var(--accent);box-shadow:0 0 0 0.05rem var(--accent-soft)}
.step-node.active .step-label{color:var(--ink)}
.step-node.done .step-num{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.step-node.done .step-label{color:var(--ink-2)}

/* ── Step Sections ── */
.step-section{display:none;animation:stepReveal 0.55s var(--ease) both}
.step-section.visible{display:block}
@keyframes stepReveal{from{opacity:0;transform:translateY(0.2rem)}to{opacity:1;transform:translateY(0)}}
.step-header{text-align:center;margin-bottom:0.36rem}
.step-header h2{font-size:clamp(0.26rem,3.5vw,0.36rem);font-family: OpenSans-bold;letter-spacing:-0.02em;line-height:1.15}
.step-header p{margin-top:0.08rem;font-size:1em;color:var(--ink-3)}

/* ── Scenario Cards ── */
.scenario-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.24rem;margin:0 auto}
.scenario-card{position:relative;padding:0.36rem 0.2rem 0.28rem;border-radius:var(--radius);border:0.02rem solid var(--line);background:var(--bg-white);cursor:pointer;text-align:center;transition:all 0.4s var(--ease);overflow:hidden}
.scenario-card::before{content:"";position:absolute;inset:0;background:var(--accent-soft);opacity:0;transition:opacity 0.4s var(--ease);border-radius:inherit}
.scenario-card:hover{border-color:rgba(240,177,0,0.5);transform:translateY(-0.04rem);box-shadow:var(--shadow-hover)}
.scenario-card:hover::before{opacity:1}
.scenario-card.selected{border-color:var(--accent);box-shadow:0 0 0 0.04rem var(--accent-soft),var(--shadow)}
.scenario-card.selected::before{opacity:1}
.scenario-icon{position:relative;width:0.64rem;height:0.64rem;margin:0 auto 0.16rem;display:flex;align-items:center;justify-content:center;border-radius:0.18rem;background:linear-gradient(135deg,var(--accent-soft),rgba(240,177,0,0.05));transition:transform 0.4s var(--ease-spring)}
.scenario-card:hover .scenario-icon{transform:scale(1.08)}
.scenario-icon svg{width:0.32rem;height:0.32rem}
.scenario-card h3{position:relative;font-size:1.5em;font-family: OpenSans-bold;letter-spacing:-0.01em;margin-bottom:0.04rem}
.scenario-card .sc-en{position:relative;font-size:0.85em;color:var(--ink-4);font-weight:500;margin-bottom:0.1rem}
.scenario-card .sc-desc{position:relative;font-size:1em;color:var(--ink-3);line-height:1.5}
.scenario-card .sc-check{position:absolute;top:0.14rem;right:0.14rem;width:0.26rem;height:0.26rem;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0.5);transition:all 0.35s var(--ease-spring)}
.scenario-card.selected .sc-check{opacity:1;transform:scale(1)}
.sc-check svg{width:0.13rem;height:0.13rem}

/* ── Type Cards ── */
.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.24rem;justify-content: center;}
.type-card{position:relative;padding:0.28rem 0.24rem;border-radius:var(--radius);border:0.02rem solid var(--line);background:var(--bg-white);cursor:pointer;text-align:center;transition:all 0.35s var(--ease)}
.type-card:hover{border-color:rgba(240,177,0,0.5);transform:translateY(-0.03rem);box-shadow:var(--shadow-hover)}
.type-card.selected{border-color:var(--accent);background:linear-gradient(135deg,var(--accent-soft),rgba(240,177,0,0.03));box-shadow:0 0 0 0.04rem var(--accent-soft)}
.type-icon{width:0.48rem;height:0.48rem;margin:0 auto 0.12rem;display:flex;align-items:center;justify-content:center;border-radius:0.14rem;background:linear-gradient(135deg,var(--accent-soft),rgba(240,177,0,0.05))}
.type-icon svg{width:0.24rem;height:0.24rem}
.type-card h3{font-size:1.2em;font-family: OpenSans-bold;margin-bottom:0.04rem}
.type-card .type-desc{font-size:0.85em;color:var(--ink-3);line-height:1.5}
.type-card .type-count{display:inline-flex;align-items:center;gap:0.04rem;margin-top:0.1rem;padding:0.03rem 0.1rem;border-radius:999px;font-size:0.75em;font-family: OpenSans-bold;color:var(--ink-4);background:var(--bg)}
.type-card.selected .type-count{color:var(--accent-dark);background:rgba(240,177,0,0.12)}

/* ── Subtype Pills ── */
.subtype-section{max-width:6.4rem;margin:0 auto 0.24rem}
.subtype-label{font-size:0.85em;font-family: OpenSans-bold;color:var(--ink-3);margin-bottom:0.1rem;text-align:center}
.subtype-pills{display:flex;justify-content:center;gap:0.08rem;flex-wrap:wrap}
.subtype-pill{padding:0.07rem 0.18rem;border-radius:999px;font-size:0.85em;font-weight:500;color:var(--ink-3);background:transparent;border:0.015rem solid var(--line);cursor:pointer;transition:all 0.3s var(--ease)}
.subtype-pill:hover{color:var(--ink);border-color:rgba(240,177,0,0.4)}
.subtype-pill.active{background:var(--accent);color:var(--ink);border-color:var(--accent);font-weight:600}

/* ── Current Chips ── */
.current-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(1.5rem,1fr));gap:0.12rem;max-width:7.5rem;margin:0 auto}
.current-chip{position:relative;padding:0.2rem 0.14rem;border-radius:var(--radius-sm);border:0.02rem solid var(--line);background:var(--bg-white);cursor:pointer;text-align:center;transition:all 0.3s var(--ease)}
.current-chip:hover{border-color:rgba(240,177,0,0.45);transform:translateY(-0.02rem);box-shadow:0 0.04rem 0.16rem rgba(0,0,0,0.06)}
.current-chip.selected{border-color:var(--accent);background:var(--accent-soft)}
.current-val{font-size:1.2em;font-family: OpenSans-bold;;letter-spacing:-0.02em;color:var(--ink)}
.current-chip.selected .current-val{color:var(--accent-dark)}
.current-models{margin-top:0.05rem;font-size:0.75em;color:var(--ink-4)}

/* ── Result Panel ── */
.result-panel{display:none;margin-top:0.4rem;animation:resultReveal 0.6s var(--ease) both}
.result-panel.visible{display:block}
@keyframes resultReveal{from{opacity:0;transform:translateY(0.24rem) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.result-header{text-align:center;margin-bottom:0.28rem}
.result-header h2{font-size:clamp(0.24rem,3vw,0.32rem);font-family: OpenSans-bold;letter-spacing:-0.02em}
.result-header .result-sub{margin-top:0.06rem;font-size:1em;color:var(--ink-3)}
.result-tags{display:flex;justify-content:center;gap:0.08rem;margin-top:0.12rem;flex-wrap:wrap}
.result-tag{display:inline-flex;align-items:center;gap:0.05rem;padding:0.04rem 0.12rem;border-radius:999px;font-size:0.85em;font-family: OpenSans-bold;background:var(--accent-soft);color:var(--accent-dark)}

/* ── Product Grid & Carousel ── */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(33.333% - 0.2rem),1fr));gap:0.2rem}
.carousel-wrap{position:relative;margin:0 -0.12rem;padding:0 0.12rem}
.carousel-track{display:flex;gap:0.2rem;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0.04rem 0}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track .product-card{flex:0 0 calc(33.333% - 0.14rem)}
@media(max-width:1024px){.carousel-track .product-card{flex:0 0 calc(50% - 0.1rem)}}
@media(max-width:768px){.carousel-wrap{display:none}}
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:0.4rem;height:0.4rem;border-radius:50%;background:var(--bg-white);border:0.01rem solid var(--line);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;box-shadow:0 0.02rem 0.08rem rgba(0,0,0,0.08);transition:all 0.3s var(--ease)}
.carousel-arrow:hover{background:var(--accent);border-color:var(--accent)}
.carousel-arrow:disabled{opacity:0.3;cursor:default;pointer-events:none}
.carousel-arrow svg{width:0.16rem;height:0.16rem}
.carousel-arrow--prev{left:-0.08rem}
.carousel-arrow--next{right:-0.08rem}
.carousel-dots{display:flex;justify-content:center;gap:0.08rem;margin-top:0.2rem}
.carousel-dot{width:0.08rem;height:0.08rem;border-radius:50%;background:var(--line);cursor:pointer;border:none;transition:all 0.3s var(--ease)}
.carousel-dot.active{background:var(--accent);transform:scale(1.2)}

/* ── Product Cards ── */
.product-card{border:0.01rem solid var(--line);border-radius:var(--radius);background:var(--bg-white);overflow:hidden;transition:all 0.4s var(--ease);display:flex;flex-direction:column;position:relative}
.product-card:hover{transform:translateY(-0.06rem);box-shadow:var(--shadow-hover);border-color:rgba(240,177,0,0.4)}
.pc-badge{position:absolute;top:0.14rem;left:0.14rem;z-index:2;padding:0.04rem 0.12rem;border-radius:999px;font-size:0.69em;font-family: OpenSans-bold;letter-spacing:0.05em;background:var(--accent);color:var(--ink)}
.pc-badge--outline{background:rgba(255,255,255,0.92);color:var(--ink-2);border:0.01rem solid var(--line)}
.pc-img-wrap{position:relative;max-height:2rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#fafbfc,#eef1f5);border-bottom:0.01rem solid var(--line);overflow:hidden}
.pc-img-wrap img{max-width:100%;object-fit:contain;transition:transform 0.5s var(--ease)}
.product-card:hover .pc-img-wrap img{transform:scale(1.06)}
.pc-body{padding:0.22rem 0.24rem;flex:1;display:flex;flex-direction:column}
.pc-name{font-size:1em;font-family: OpenSans-bold;letter-spacing:-0.05em;line-height:1.35}
.pc-spec-line{margin-top:0.04rem;font-size:0.85em;color:var(--ink-4);font-weight:500;letter-spacing:-0.03em;}
.pc-specs{margin-top:0.14rem;flex:1}
.pc-spec-row{display:flex;justify-content:space-between;padding:0.08rem 0;font-size:0.85em;border-bottom:0.01rem solid var(--bg)}
.pc-spec-row:last-child{border-bottom:none}
.pc-spec-row .spec-label{color:var(--ink-4)}
.pc-spec-row .spec-val{font-family: OpenSans-bold;color:var(--ink);text-align:right}
.pc-spec-row .spec-val strong{color: #f8b500;}
.pc-cta{display:flex;gap:0.12rem;margin-top:0.16rem;padding-top:0.16rem;border-top:0.01rem solid var(--line)}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;padding:0.1rem 0.22rem;border-radius:999px;font-size:0.85em;font-family: OpenSans-bold;background:var(--accent);color:var(--ink);border:none;cursor:pointer;transition:all 0.3s var(--ease);text-decoration:none;flex:1}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-0.01rem);box-shadow:0 0.04rem 0.16rem var(--accent-glow);text-decoration:none}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;padding:0.1rem 0.22rem;border-radius:999px;font-size:0.85em;font-family: OpenSans-bold;background:transparent;color:var(--accent-dark);border:0.015rem solid rgba(240,177,0,0.4);cursor:pointer;transition:all 0.3s var(--ease);text-decoration:none;flex:1}
.btn-secondary:hover{border-color:var(--accent);background:var(--accent-soft);text-decoration:none}

/* ── No Match ── */
.no-match{text-align:center;padding:0.48rem 0.24rem}
.no-match-icon{width:0.64rem;height:0.64rem;margin:0 auto 0.16rem;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center}
.no-match h3{font-size:1.25em;font-family: OpenSans-bold;margin-bottom:0.08rem}
.no-match p{font-size:0.85em;color:var(--ink-3);max-width:4rem;margin:0 auto}
.no-match a{display:inline-flex;align-items:center;gap:0.06rem;margin-top:0.16rem;padding:0.1rem 0.24rem;border-radius:999px;background:var(--accent);color:var(--ink);font-size:0.85em;font-family: OpenSans-bold;text-decoration:none}

/* ── Lineup Section ── */
.lineup{padding:clamp(0.48rem,6vw,0.8rem) 0}
.lineup-head{text-align:center;margin-bottom:0.4rem}
.lineup-head h2{font-size:clamp(0.28rem,4vw,0.4rem);font-family: OpenSans-bold;letter-spacing:-0.02em}
.lineup-head p{margin-top:0.08rem;font-size:1em;color:var(--ink-3)}
.filter-tabs{display:flex;justify-content:center;gap:0.06rem;margin-bottom:0.32rem;flex-wrap:wrap}
.filter-tab{padding:0.08rem 0.2rem;border-radius:999px;font-size:0.85em;font-weight:500;color:var(--ink-3);background:transparent;border:0.015rem solid var(--line);cursor:pointer;transition:all 0.3s var(--ease)}
.filter-tab:hover{color:var(--ink);border-color:rgba(240,177,0,0.4)}
.filter-tab.active{background:var(--accent);color:var(--ink);border-color:var(--accent);font-weight:600}
.cmp-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);background:var(--bg-white);box-shadow:var(--shadow)}
.cmp-table{width:100%;min-width:7.2rem;border-collapse:collapse;font-size:0.88em}
.cmp-table thead th{position:sticky;top:0;background:var(--bg);padding:0.14rem 0.18rem;text-align:left;font-family: OpenSans-bold;font-size:0.85em;color:var(--ink-3);letter-spacing:0.02em;border-bottom:0.01rem solid var(--line);white-space:nowrap}
.cmp-table tbody td{padding:0.16rem 0.18rem;border-bottom:0.01rem solid var(--bg);vertical-align:middle}
.cmp-table tbody tr:hover{background:rgba(240,177,0,0.03)}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-name{font-family: OpenSans-bold;font-size:0.91em;color:var(--ink);display:flex;align-items:center;gap:0.08rem;white-space:nowrap}
.cmp-tag{display:inline-block;padding:0.02rem 0.08rem;border-radius:999px;font-size:0.69em;font-family: OpenSans-bold;background:var(--accent-soft);color:var(--accent-dark);white-space:nowrap}
.cmp-spec{color:var(--ink-2);font-variant-numeric:tabular-nums}
.cmp-link{display:inline-flex;align-items:center;gap:0.04rem;font-size:0.85em;font-family: OpenSans-bold;color:var(--accent-dark);white-space:nowrap;transition:gap 0.25s var(--ease)}
.cmp-link:hover{gap:0.08rem;text-decoration:none}

/* ── Custom CTA ── */
.custom-cta{padding:clamp(0.48rem,6vw,0.8rem) 0}
.custom-card{position:relative;border-radius:var(--radius);background:linear-gradient(135deg,var(--ink) 0%,#2a3646 100%);color:#f4f6f9;padding:clamp(0.36rem,5vw,0.56rem) clamp(0.28rem,4vw,0.48rem);overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:0.32rem;flex-wrap:wrap}
.custom-card::before{content:"";position:absolute;right:-0.8rem;top:-0.8rem;width:2.8rem;height:2.8rem;border-radius:50%;background:rgba(240,177,0,0.12)}
.custom-card::after{content:"";position:absolute;left:-0.4rem;bottom:-0.6rem;width:1.8rem;height:1.8rem;border-radius:50%;background:rgba(240,177,0,0.06)}
.custom-text{position:relative;flex:1;min-width:2.8rem}
.custom-text h3{font-size:clamp(0.22rem,3vw,0.3rem);font-family: OpenSans-bold;;letter-spacing:-0.02em;line-height:1.2}
.custom-text p{margin-top:0.1rem;font-size:1em;color:#aeb7c4;max-width:5.6rem;line-height:1.6}
.custom-actions{position:relative;flex-shrink:0;display:flex;gap:0.12rem;flex-wrap:wrap}
.btn-cta-primary{display:inline-flex;align-items:center;gap:0.08rem;padding:0.14rem 0.32rem;border-radius:999px;font-size:1em;font-family: OpenSans-bold;background:var(--accent);color:var(--ink);border:none;cursor:pointer;text-decoration:none;transition:all 0.3s var(--ease)}
.btn-cta-primary:hover{background:var(--accent-dark);transform:translateY(-0.02rem);box-shadow:0 0.08rem 0.24rem rgba(240,177,0,0.35);text-decoration:none}
.btn-cta-ghost{display:inline-flex;align-items:center;gap:0.08rem;padding:0.14rem 0.32rem;border-radius:999px;font-size:1em;font-family: OpenSans-bold;background:transparent;color:#f4f6f9;border:0.015rem solid rgba(255,255,255,0.2);cursor:pointer;text-decoration:none;transition:all 0.3s var(--ease)}
.btn-cta-ghost:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}

/* ── Footer ── */
.site-footer{padding:0.4rem 0;border-top:0.01rem solid var(--line);text-align:center;font-size:0.85em;color:var(--ink-4)}
.site-footer a{color:var(--ink-3)}
.site-footer a:hover{color:var(--accent-dark)}

/* ── Step Controls ── */
.step-controls{display:flex;justify-content:center;gap:0.12rem;margin-top:0.32rem}
.ctrl-btn{display:inline-flex;align-items:center;gap:0.06rem;padding:0.1rem 0.24rem;border-radius:999px;font-size:1em;cursor:pointer;transition:all 0.3s var(--ease);border:none}
.ctrl-back{background:var(--bg);color:var(--ink-3)}
.ctrl-back:hover{background:var(--line);color:var(--ink)}
.ctrl-reset{background:transparent;color:var(--ink-4);border:0.015rem solid var(--line)}
.ctrl-reset:hover{border-color:var(--ink-4);color:var(--ink-2)}

/* ── Reveal ── */
[data-reveal]{opacity:0;transform:translateY(0.24rem);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease)}
[data-reveal].revealed{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}[data-reveal]{opacity:1;transform:none}}

/* ── Responsive ── */
@media(max-width:768px){
  .scenario-grid{grid-template-columns:1fr 1fr}
  .type-grid{grid-template-columns:1fr;max-width:4rem}
  .current-grid{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:1fr}
  .step-label{display:none}
  .step-line{width:0.32rem;margin:0 0.08rem}
  .topnav-links{gap:0.16rem}
  .topnav-links a{font-size:0.75em}
  .custom-card{flex-direction:column;text-align:center}
  .custom-actions{justify-content:center}
  .carousel-wrap{display:none!important}
}
@media(max-width:480px){
  .scenario-grid{grid-template-columns:1fr;max-width:3.2rem}
  .current-grid{grid-template-columns:1fr 1fr;gap:0.08rem}
  .current-chip{padding:0.14rem 0.1rem}
  .current-val{font-size:1.25em}
  .cmp-table{font-size:0.82em}
  .cmp-table thead th,.cmp-table tbody td{padding:0.1rem 0.12rem}
}
@media(orientation:portrait) and (max-width:768px){
  .scenario-card{padding:0.24rem}
}
@media(min-width:1920px){
  .finder-card{padding:0.48rem}
}
@media(min-width:2560px){
  .finder-card{padding:0.6rem}
  .scenario-grid{gap:0.24rem}
  .scenario-card{padding:0.48rem}
}

/* ── Print ── */
@media print{.topnav,.custom-cta,.step-controls{display:none}.finder-card{box-shadow:none;border:0.01rem solid #ddd}.product-card,.scenario-card,.type-card,.current-chip{break-inside:avoid}}