/* ==============================================================
   FAQ / 选型指南 — page-specific styles
   Inherits design tokens, nav, footer, buttons from styles.css
   ============================================================== */

/* ---------- FAQ HERO ---------- */
.faq-hero{
  padding:clamp(56px,7vw,104px) 0 clamp(40px,5vw,64px);
  background:
    linear-gradient(to bottom, var(--bg) 0%, var(--bg-alt) 100%);
  position:relative;
  overflow:hidden;
}
.faq-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px) 0 0/56px 56px,
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px) 0 0/56px 56px;
  opacity:.5;
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent 78%);
  mask-image:linear-gradient(to bottom, #000, transparent 78%);
  pointer-events:none;
}
.faq-hero .container{ position:relative; z-index:1; }

.faq-crumb{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  color:var(--mute); text-transform:uppercase; margin-bottom:26px;
}
.faq-crumb a{ color:var(--mute); white-space:nowrap; }
.faq-crumb b{ white-space:nowrap; }
.faq-crumb a:hover{ color:var(--ink); }
.faq-crumb .sep{ width:14px; height:1px; background:var(--line-2); }
.faq-crumb b{ color:var(--ink); font-weight:600; }

.faq-hero-grid{
  display:grid; grid-template-columns:1fr; gap:40px;
}
@media(min-width:920px){
  .faq-hero-grid{ grid-template-columns:1.5fr .9fr; gap:56px; align-items:end; }
}

.faq-h1{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(34px,5vw,58px);
  line-height:1.04; letter-spacing:-.025em;
  color:var(--ink); margin:18px 0 24px;
}
.faq-h1 em{ font-style:normal; color:var(--blue); }
.faq-hero-sub{
  font-size:clamp(15px,1.4vw,18px);
  line-height:1.65; color:var(--sub);
  max-width:620px; font-weight:450;
  text-wrap:pretty;
}
.faq-hero-actions{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:32px;
}

/* hero side spec card */
.faq-hero-card{
  background:var(--paper);
  border:1px solid var(--ink);
  padding:22px 24px;
}
.faq-hero-card .hc-head{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mute);
  padding-bottom:14px; margin-bottom:16px;
  border-bottom:1px solid var(--line);
}
.faq-hero-card .hc-head b{ color:var(--blue); font-weight:600; }
.faq-hero-card .hc-row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; padding:9px 0;
}
.faq-hero-card .hc-row + .hc-row{ border-top:1px dashed var(--line-soft); }
.faq-hero-card .hc-row span{ font-size:13.5px; color:var(--ink-soft); white-space:nowrap; }
.faq-hero-card .hc-row b{
  font-family:var(--mono); font-size:13px; color:var(--ink); font-weight:600; white-space:nowrap;
}

/* keyword chips */
.faq-keywords{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;
}
.faq-kw{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.02em;
  color:var(--sub); background:var(--bg);
  border:1px solid var(--line-2); padding:5px 11px;
  white-space:nowrap;
}

/* ---------- STICKY CATEGORY TABS ---------- */
.faq-tabs-wrap{
  position:sticky; top:64px; z-index:40;
  background:rgba(244,244,241,.9);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.faq-tabs{
  display:flex; gap:4px; overflow-x:auto;
  scrollbar-width:none;
  padding:0;
}
.faq-tabs::-webkit-scrollbar{ display:none; }
.faq-tab{
  flex:none;
  display:inline-flex; align-items:center; gap:9px;
  padding:16px 18px;
  font-size:14px; font-weight:500; color:var(--sub);
  border-bottom:2px solid transparent;
  white-space:nowrap; cursor:pointer;
  transition:color .15s, border-color .15s;
}
.faq-tab:hover{ color:var(--ink); }
.faq-tab .tnum{
  font-family:var(--mono); font-size:11px; color:var(--mute);
  font-weight:500;
}
.faq-tab.active{ color:var(--ink); border-bottom-color:var(--blue); }
.faq-tab.active .tnum{ color:var(--blue); }

/* ---------- FAQ BODY ---------- */
.faq-body{ padding:clamp(48px,6vw,88px) 0 clamp(64px,8vw,120px); }

.faq-cat{ scroll-margin-top:120px; }
.faq-cat + .faq-cat{ margin-top:clamp(48px,6vw,80px); }

.faq-cat-head{
  display:flex; align-items:baseline; gap:16px;
  padding-bottom:20px; margin-bottom:8px;
  border-bottom:1px solid var(--ink);
}
.faq-cat-idx{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  color:var(--blue); font-weight:600;
}
.faq-cat-head h2{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(22px,2.6vw,30px); letter-spacing:-.015em;
  color:var(--ink); margin:0;
}
.faq-cat-head .cat-en{
  margin-left:auto; font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--mute);
  white-space:nowrap;
}

/* accordion item */
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-item summary{
  list-style:none;
  display:flex; align-items:flex-start; gap:16px;
  padding:24px 8px 24px 0;
  cursor:pointer;
  transition:background .15s;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover .faq-q{ color:var(--blue); }
.faq-q-num{
  flex:none; width:42px;
  font-family:var(--mono); font-size:13px; font-weight:600;
  color:var(--mute); padding-top:3px; letter-spacing:.02em;
}
.faq-item[open] .faq-q-num{ color:var(--blue); }
.faq-q{
  flex:1;
  font-family:var(--sans); font-size:clamp(16px,1.7vw,19px);
  font-weight:500; line-height:1.45; letter-spacing:-.01em;
  color:var(--ink); margin:0;
  transition:color .15s;
  text-wrap:pretty;
}
.faq-toggle{
  flex:none; position:relative;
  width:24px; height:24px; margin-top:2px;
  border:1px solid var(--line-2);
  transition:border-color .18s, background .18s;
}
.faq-toggle::before,
.faq-toggle::after{
  content:""; position:absolute; top:50%; left:50%;
  width:11px; height:1.5px; background:var(--ink);
  transform:translate(-50%,-50%);
  transition:transform .22s ease, background .18s;
}
.faq-toggle::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq-item[open] .faq-toggle{ background:var(--blue); border-color:var(--blue); }
.faq-item[open] .faq-toggle::before,
.faq-item[open] .faq-toggle::after{ background:#fff; }
.faq-item[open] .faq-toggle::after{ transform:translate(-50%,-50%) rotate(0); }

.faq-a{
  padding:0 8px 26px 58px;
  overflow:hidden;
}
.faq-a p{
  font-size:clamp(14px,1.4vw,15.5px);
  line-height:1.78; color:var(--sub);
  margin:0; max-width:820px;
  text-wrap:pretty;
}
.faq-a p strong{ color:var(--ink-soft); font-weight:600; }
.faq-a p .hl{ color:var(--blue); font-weight:600; }

/* open animation */
@media (prefers-reduced-motion: no-preference){
  .faq-item[open] .faq-a{ animation:faqReveal .28s ease both; }
  @keyframes faqReveal{
    from{ opacity:0; transform:translateY(-6px); }
    to{ opacity:1; transform:translateY(0); }
  }
}

/* ---------- BOTTOM CTA ---------- */
.faq-cta{ padding:0 0 clamp(72px,8vw,110px); }
.faq-cta-card{
  position:relative;
  background:var(--ink);
  color:#e9e9e5;
  padding:clamp(40px,5vw,68px) clamp(28px,4vw,64px);
  overflow:hidden;
}
.faq-cta-card::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/48px 48px;
  pointer-events:none;
}
.faq-cta-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr; gap:32px; align-items:center;
}
@media(min-width:880px){
  .faq-cta-inner{ grid-template-columns:1.4fr auto; gap:48px; }
}
.faq-cta-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--signal); margin-bottom:18px;
}
.faq-cta-eyebrow::before{ content:""; width:18px; height:1px; background:currentColor; }
.faq-cta-card h2{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(26px,3.4vw,42px); line-height:1.1;
  letter-spacing:-.02em; color:#fff; margin:0 0 18px;
}
.faq-cta-card p{
  font-size:clamp(14px,1.4vw,16px); line-height:1.7;
  color:#b6b8bd; margin:0; max-width:560px; text-wrap:pretty;
}
.faq-cta-actions{ display:flex; flex-wrap:wrap; gap:14px; }
.btn-cta-light{
  background:#fff; color:var(--ink); border-color:#fff;
}
.btn-cta-light:hover{ background:var(--signal); border-color:var(--signal); color:var(--ink); }
.btn-cta-line{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.4);
}
.btn-cta-line:hover{ background:rgba(255,255,255,.1); border-color:#fff; }

/* corner ticks */
.faq-cta-card .corner{
  position:absolute; width:18px; height:18px; z-index:1;
  border-color:var(--signal); border-style:solid; border-width:0;
}
.faq-cta-card .corner.tr{ top:16px; right:16px; border-top-width:1.5px; border-right-width:1.5px; }
.faq-cta-card .corner.bl{ bottom:16px; left:16px; border-bottom-width:1.5px; border-left-width:1.5px; }

/* ---------- GEO REFERENCE MODULES ---------- */
.geo-section{
  margin-top:clamp(48px,6vw,80px);
  padding-top:clamp(40px,5vw,64px);
  border-top:1px solid var(--ink);
}
.geo-intro{ max-width:760px; margin-bottom:40px; }
.geo-intro h2{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(22px,2.8vw,32px); letter-spacing:-.018em;
  color:var(--ink); margin:14px 0 16px;
}
.geo-intro p{
  font-size:clamp(14px,1.4vw,16px); line-height:1.75;
  color:var(--sub); margin:0; text-wrap:pretty;
}
.geo-grid{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
}
@media(min-width:680px){ .geo-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1080px){ .geo-grid{ grid-template-columns:repeat(4,1fr); } }
.geo-card{ background:var(--paper); padding:26px 24px 28px; }
.geo-card-head{
  display:flex; align-items:baseline; gap:10px;
  padding-bottom:16px; margin-bottom:16px;
  border-bottom:1px solid var(--line);
}
.geo-card-idx{
  font-family:var(--mono); font-size:11px; font-weight:600;
  color:var(--blue); letter-spacing:.06em;
}
.geo-card-head h3{
  font-family:var(--sans); font-size:16px; font-weight:600;
  letter-spacing:-.005em; color:var(--ink); margin:0;
}
.geo-list{ list-style:none; display:flex; flex-direction:column; gap:0; }
.geo-list li{
  display:flex; align-items:flex-start; gap:10px;
  padding:8px 0; font-size:14px; line-height:1.5;
  color:var(--ink-soft); border-bottom:1px dashed var(--line-soft);
}
.geo-list li:last-child{ border-bottom:0; }
.geo-list li::before{
  content:""; flex:none; width:5px; height:5px; margin-top:7px;
  background:var(--blue); transform:rotate(45deg);
}

@media(max-width:640px){
  .faq-a{ padding-left:0; }
  .faq-q-num{ width:36px; }
}