.page-faq{
  --faq-pattern-gold: rgba(212,175,55,0.14);
  --faq-pattern-line: rgba(253,248,240,0.08);
  --faq-card-bg: #FFFFFF;
  --faq-muted-line: #E0D6C0;
}
.page-faq .faq-hero{
  position:relative;
  overflow:hidden;
  padding:4rem 0 3rem;
  background:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,0.10) 0 6rem, transparent 6.2rem),
    linear-gradient(135deg, var(--color-night) 0%, #2c4a6e 55%, var(--color-primary-dark) 100%);
  color:var(--color-white);
}
.page-faq .faq-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg, transparent 58%, var(--faq-pattern-gold) 58%, var(--faq-pattern-gold) 62%, transparent 62%),
    linear-gradient(130deg, transparent 72%, var(--faq-pattern-line) 72%, var(--faq-pattern-line) 76%, transparent 76%);
  background-size:64px 64px, 48px 48px;
}
.page-faq .faq-hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  gap:2rem;
  align-items:center;
}
.page-faq .faq-hero-copy{
  position:relative;
}
.page-faq .faq-kicker{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  margin:0 0 0.9rem;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--color-gold);
}
.page-faq .faq-kicker::before{
  content:"";
  width:1.5rem;
  height:2px;
  background:var(--color-gold);
  border-radius:2px;
}
.page-faq .faq-hero h1{
  margin:0.75rem 0 1rem;
  font-family:var(--font-heading);
  font-weight:900;
  font-size:2rem;
  line-height:1.24;
  letter-spacing:0.02em;
}
.page-faq .faq-hero-lead{
  margin:0 0 1.5rem;
  font-size:0.92rem;
  line-height:1.85;
  color:rgba(255,255,255,0.85);
  max-width:36em;
}
.page-faq .faq-hero-meta{
  list-style:none;
  margin:0;
  padding:1.25rem 0 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0.75rem;
  border-top:1px solid rgba(255,255,255,0.22);
}
.page-faq .faq-hero-meta-num{
  display:block;
  font-family:var(--font-mono);
  font-size:1.2rem;
  font-weight:700;
  color:var(--color-gold);
  line-height:1.3;
}
.page-faq .faq-hero-meta-text{
  font-size:0.72rem;
  color:rgba(255,255,255,0.78);
  line-height:1.5;
}
.page-faq .faq-hero-figure{
  position:relative;
  z-index:1;
  margin:0;
  display:flex;
  justify-content:center;
}
.page-faq .faq-hero-img{
  width:220px;
  height:220px;
  object-fit:cover;
  border-radius:50%;
  border:6px solid rgba(253,248,240,0.32);
  box-shadow:0 18px 42px rgba(6,22,48,0.45);
}
.page-faq .faq-main{
  padding:3rem 0 2rem;
  background-color:var(--color-bg);
  background-image:
    linear-gradient(30deg, rgba(224,214,192,0.4) 1px, transparent 1px),
    linear-gradient(150deg, rgba(224,214,192,0.4) 1px, transparent 1px);
  background-size:44px 44px;
  border-bottom:1px solid var(--color-sand);
}
.page-faq .faq-layout{
  display:block;
}
.page-faq .faq-index{
  position:relative;
  margin-bottom:2.5rem;
  padding:1.25rem 1.25rem 1.25rem 1.5rem;
  background:var(--faq-card-bg);
  border:1px solid var(--color-sand);
  border-radius:var(--radius-panel);
}
.page-faq .faq-index::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(var(--color-primary), var(--color-gold));
  border-radius:2px 0 0 2px;
}
.page-faq .faq-index-label{
  margin:0 0 0.75rem;
  font-size:0.76rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--color-text-secondary);
}
.page-faq .faq-index-list{
  list-style:none;
  margin:0;
  padding:0;
}
.page-faq .faq-index-list li + li{
  margin-top:0.25rem;
}
.page-faq .faq-index-list a{
  display:block;
  padding:0.5rem 0.75rem;
  font-size:0.9rem;
  color:var(--color-text);
  text-decoration:none;
  border-left:2px solid transparent;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.page-faq .faq-index-list a:hover{
  color:var(--color-primary);
  border-left-color:var(--color-gold);
  background:rgba(224,214,192,0.18);
}
.page-faq .faq-index-list a.is-active{
  background:rgba(224,214,192,0.35);
  color:var(--color-primary-dark);
  border-left-color:var(--color-primary);
  font-weight:700;
}
.page-faq .faq-index-note{
  margin:1.2rem 0 0;
  padding-top:1rem;
  border-top:1px dashed var(--color-sand);
  font-size:0.8rem;
  line-height:1.7;
  color:var(--color-text-secondary);
}
.page-faq .faq-index-note a{
  color:var(--color-sky);
  text-decoration:underline;
  text-underline-offset:2px;
}
.page-faq .faq-content{
  min-width:0;
}
.page-faq .faq-filter-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.5rem;
  padding:0.9rem 1rem;
  margin-bottom:1.5rem;
  background:rgba(255,255,255,0.72);
  border:1px solid var(--color-sand);
  border-radius:calc(var(--radius-panel) * 2);
}
.page-faq .faq-filter-label{
  width:100%;
  margin:0 0 0.25rem;
  font-size:0.76rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--color-text-secondary);
}
.page-faq .faq-filter-input{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none;
}
.page-faq .faq-filter-pill{
  display:inline-block;
  padding:0.42rem 0.85rem;
  border:1px solid var(--color-sand);
  border-radius:999px;
  background:var(--faq-card-bg);
  font-size:0.82rem;
  color:var(--color-text);
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.page-faq .faq-filter-pill:hover{
  border-color:var(--color-primary);
  color:var(--color-primary);
}
.page-faq #faq-filter-all:checked ~ label[for="faq-filter-all"],
.page-faq #faq-filter-login:checked ~ label[for="faq-filter-login"],
.page-faq #faq-filter-version:checked ~ label[for="faq-filter-version"],
.page-faq #faq-filter-library:checked ~ label[for="faq-filter-library"],
.page-faq #faq-filter-data:checked ~ label[for="faq-filter-data"]{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:var(--color-white);
}
.page-faq #faq-filter-all:focus ~ label[for="faq-filter-all"],
.page-faq #faq-filter-login:focus ~ label[for="faq-filter-login"],
.page-faq #faq-filter-version:focus ~ label[for="faq-filter-version"],
.page-faq #faq-filter-library:focus ~ label[for="faq-filter-library"],
.page-faq #faq-filter-data:focus ~ label[for="faq-filter-data"]{
  box-shadow:0 0 0 3px rgba(74,123,181,0.35);
}
.page-faq #faq-filter-all:checked ~ .faq-panels .faq-group{
  display:block;
}
.page-faq #faq-filter-login:checked ~ .faq-panels .faq-group{
  display:none;
}
.page-faq #faq-filter-login:checked ~ .faq-panels .faq-group[data-topic="login"],
.page-faq #faq-filter-login:checked ~ .faq-panels .faq-group[data-topic="login"] .faq-group-panels details{
  display:block;
}
.page-faq #faq-filter-version:checked ~ .faq-panels .faq-group{
  display:none;
}
.page-faq #faq-filter-version:checked ~ .faq-panels .faq-group[data-topic="version"]{
  display:block;
}
.page-faq #faq-filter-library:checked ~ .faq-panels .faq-group{
  display:none;
}
.page-faq #faq-filter-library:checked ~ .faq-panels .faq-group[data-topic="library"]{
  display:block;
}
.page-faq #faq-filter-data:checked ~ .faq-panels .faq-group{
  display:none;
}
.page-faq #faq-filter-data:checked ~ .faq-panels .faq-group[data-topic="data"]{
  display:block;
}
.page-faq .faq-group{
  padding:1.6rem 0;
  border-top:2px solid var(--color-sand);
}
.page-faq .faq-group:first-child{
  border-top:0;
}
.page-faq .faq-group-intro{
  position:relative;
  padding-left:1rem;
  margin-bottom:1.2rem;
}
.page-faq .faq-group-intro::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(var(--color-primary), var(--color-gold));
  border-radius:2px;
}
.page-faq .faq-group-title{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:0.6rem;
  margin:0 0 0.5rem;
  font-family:var(--font-heading);
  font-size:1.4rem;
  color:var(--color-text);
}
.page-faq .faq-group-num{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:0.78rem;
  font-weight:700;
  color:var(--color-primary);
  border:1px solid var(--color-primary);
  padding:0.14rem 0.45rem;
  border-radius:3px;
  letter-spacing:0.04em;
}
.page-faq .faq-group-desc{
  margin:0;
  font-size:0.84rem;
  line-height:1.7;
  color:var(--color-text-secondary);
}
.page-faq .faq-group-panels{
  min-width:0;
}
.page-faq .faq-item{
  border-bottom:1px solid var(--color-sand);
  transition:background 0.25s ease;
}
.page-faq .faq-item:first-child{
  border-top:1px solid var(--color-sand);
}
.page-faq .faq-item:hover{
  background:rgba(224,214,192,0.18);
}
.page-faq .faq-item summary{
  display:flex;
  align-items:center;
  gap:0.75rem;
  padding:1rem 0.5rem 1rem 0.75rem;
  list-style:none;
  cursor:pointer;
  outline:none;
}
.page-faq .faq-item summary::-webkit-details-marker{
  display:none;
}
.page-faq .faq-item summary:focus-visible{
  box-shadow:inset 0 0 0 2px rgba(74,123,181,0.6);
  border-radius:4px;
}
.page-faq .faq-q-mark{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.5rem;
  height:1.5rem;
  background:rgba(224,214,192,0.7);
  color:var(--color-primary-dark);
  font-family:var(--font-mono);
  font-size:0.7rem;
  font-weight:700;
  border-radius:4px;
}
.page-faq .faq-q-text{
  flex:1;
  font-size:0.94rem;
  font-weight:700;
  line-height:1.5;
  color:var(--color-text);
}
.page-faq .faq-q-icon{
  flex:0 0 auto;
  position:relative;
  width:0.9rem;
  height:0.9rem;
  transition:transform 0.3s ease;
}
.page-faq .faq-q-icon::before,
.page-faq .faq-q-icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  background:var(--color-primary);
  border-radius:1px;
}
.page-faq .faq-q-icon::before{
  width:100%;
  height:2px;
}
.page-faq .faq-q-icon::after{
  width:2px;
  height:100%;
}
.page-faq .faq-item[open] .faq-q-icon{
  transform:rotate(45deg);
}
.page-faq .faq-answer{
  padding:0 0.75rem 1.25rem 2.25rem;
}
.page-faq .faq-answer{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 0.35s ease;
}
.page-faq .faq-item[open] .faq-answer{
  grid-template-rows:1fr;
}
.page-faq .faq-answer > *{
  overflow:hidden;
}
.page-faq .faq-answer p{
  margin:0;
  padding:0.85rem 1rem;
  background:var(--faq-card-bg);
  border-left:3px solid var(--color-gold);
  border-radius:0 var(--radius-panel) var(--radius-panel) 0;
  font-size:0.88rem;
  line-height:1.85;
  color:var(--color-text-secondary);
}
.page-faq .faq-answer a{
  color:var(--color-sky);
  text-decoration:underline;
  text-underline-offset:2px;
}
.page-faq .faq-support-card{
  display:grid;
  gap:1.5rem;
  margin-top:2.5rem;
  padding:1.5rem;
  background:
    linear-gradient(135deg, rgba(139,30,26,0.05), rgba(212,175,55,0.10)),
    var(--faq-card-bg);
  border:1px solid var(--color-sand);
  border-radius:var(--radius-panel);
}
.page-faq .faq-support-copy h2{
  margin:0 0 0.75rem;
  font-family:var(--font-heading);
  font-size:1.5rem;
  color:var(--color-text);
}
.page-faq .faq-support-copy p{
  margin:0 0 1rem;
  font-size:0.88rem;
  line-height:1.85;
  color:var(--color-text-secondary);
}
.page-faq .faq-support-links{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
}
.page-faq .faq-support-links .btn{
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.page-faq .faq-support-links .btn:hover{
  transform:translateY(-2px);
}
.page-faq .faq-support-figure{
  margin:0;
}
.page-faq .faq-support-img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:var(--radius-panel);
  border:1px solid var(--color-sand);
}
.page-faq .faq-trust{
  margin-top:1.5rem;
  padding:1.75rem 1.25rem;
  background:var(--color-night);
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-panel);
  color:var(--color-white);
}
.page-faq .faq-trust::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, transparent 78%, rgba(212,175,55,0.2) 78%),
    linear-gradient(45deg, transparent 82%, rgba(255,255,255,0.05) 82%);
  background-size:56px 56px;
}
.page-faq .faq-trust-list{
  position:relative;
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.2rem;
}
.page-faq .faq-trust-num{
  display:block;
  font-family:var(--font-mono);
  font-size:1.5rem;
  font-weight:700;
  line-height:1.2;
  color:var(--color-gold);
}
.page-faq .faq-trust-text{
  display:block;
  margin-top:0.25rem;
  font-size:0.78rem;
  line-height:1.5;
  color:rgba(255,255,255,0.82);
}

@media (min-width: 900px){
  .page-faq .faq-hero{
    padding:5.5rem 0 4.5rem;
  }
  .page-faq .faq-hero-inner{
    grid-template-columns:minmax(0,1fr) 360px;
    gap:3rem;
  }
  .page-faq .faq-hero h1{
    font-size:3rem;
    line-height:1.18;
    max-width:14em;
  }
  .page-faq .faq-hero-lead{
    font-size:0.96rem;
  }
  .page-faq .faq-hero-img{
    width:320px;
    height:320px;
  }
  .page-faq .faq-main{
    padding:4rem 0 3rem;
  }
  .page-faq .faq-layout{
    display:grid;
    grid-template-columns:260px minmax(0,1fr);
    gap:3rem;
    align-items:start;
  }
  .page-faq .faq-index{
    position:sticky;
    top:calc(var(--header-height) + 1.5rem);
    margin-bottom:0;
  }
  .page-faq .faq-filter-label{
    width:auto;
    margin:0 0.25rem 0 0;
  }
  .page-faq .faq-group{
    display:grid;
    grid-template-columns:230px minmax(0,1fr);
    gap:0 2.5rem;
    padding:2.2rem 0;
  }
  .page-faq .faq-group-intro{
    grid-column:1;
    margin-bottom:0;
    align-self:start;
    position:sticky;
    top:calc(var(--header-height) + 2.5rem);
  }
  .page-faq .faq-group-panels{
    grid-column:2;
    border-left:1px solid var(--color-sand);
    padding-left:2rem;
  }
  .page-faq .faq-support-card{
    grid-template-columns:minmax(0,1fr) 360px;
    align-items:center;
    padding:2rem;
    gap:2.5rem;
  }
  .page-faq .faq-trust-list{
    grid-template-columns:repeat(4,1fr);
  }
  .page-faq .faq-trust{
    padding:2rem 2.25rem;
  }
}