.page-faq{
  --faq-line:rgba(27,42,74,.14);
  --faq-line-gold:rgba(227,201,138,.26);
  --faq-tint:rgba(227,201,138,.18);
  background:var(--paper);
  color:var(--black);
}
.page-faq .faq-hero{
  position:relative;
  overflow:hidden;
  padding:26px 0 44px;
  background:radial-gradient(130% 120% at 10% 0%, #243A63 0%, var(--ink-800) 46%, var(--ink-900) 100%);
  color:var(--paper);
}
.page-faq .faq-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(227,201,138,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227,201,138,.09) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:.55;
  pointer-events:none;
}
.page-faq .faq-hero .container{position:relative;z-index:1;}
.page-faq .faq-hero .breadcrumb__link{color:var(--gold-soft);}
.page-faq .faq-hero .breadcrumb__sep,
.page-faq .faq-hero .breadcrumb__current{color:rgba(247,244,238,.72);}
.page-faq .faq-hero .eyebrow{color:var(--gold-soft);}
.page-faq .faq-hero__grid{display:grid;gap:28px;margin-top:18px;}
.page-faq .faq-hero h1{
  margin:12px 0 0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(28px, 6.2vw, 54px);
  line-height:1.18;
  letter-spacing:.04em;
  color:var(--white);
}
.page-faq .faq-hero .lede{
  margin:16px 0 0;
  max-width:56ch;
  color:rgba(247,244,238,.82);
  font-size:15px;
  line-height:1.85;
}
.page-faq .faq-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
.page-faq .faq-metrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  margin:26px 0 0;
  padding-top:18px;
  border-top:1px solid var(--faq-line-gold);
}
.page-faq .faq-metrics__item{margin:0;}
.page-faq .faq-metrics__label{
  margin:0;
  font-size:11px;
  letter-spacing:.16em;
  color:rgba(227,201,138,.8);
}
.page-faq .faq-metrics__value{
  margin:4px 0 0;
  font-family:var(--font-mono);
  font-size:17px;
  font-weight:600;
  color:var(--white);
  letter-spacing:.02em;
}
.page-faq .faq-console{
  padding:16px 16px 12px;
  border:1px solid var(--faq-line-gold);
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.page-faq .faq-console__title{
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--gold-soft);
}
.page-faq .console-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:13px 6px;
  border-top:1px solid rgba(227,201,138,.16);
  color:var(--paper);
  text-decoration:none;
  transition:background .3s var(--ease), padding-left .3s var(--ease);
}
.page-faq .console-item:hover,
.page-faq .console-item:focus-visible{background:rgba(227,201,138,.12);padding-left:12px;}
.page-faq .console-item__name{font-size:15px;letter-spacing:.02em;}
.page-faq .console-item__count{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--gold-soft);
}
.page-faq .faq-console__foot{
  margin:12px 0 2px;
  font-size:12px;
  letter-spacing:.06em;
  color:rgba(247,244,238,.56);
}
.page-faq .faq-dot{
  display:inline-block;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--rock);
  flex:none;
}
.page-faq .faq-dot--qing{background:var(--qing);box-shadow:0 0 0 3px rgba(47,143,157,.22);}
.page-faq .faq-dot--red{background:var(--flag-red);box-shadow:0 0 0 3px rgba(182,72,60,.22);}
.page-faq .faq-dot--yellow{background:var(--flag-yellow);box-shadow:0 0 0 3px rgba(224,169,59,.22);}
.page-faq .faq-dot--green{background:var(--flag-green);box-shadow:0 0 0 3px rgba(79,122,90,.22);}

.page-faq .faq-picker{background:var(--paper);}
.page-faq .picker-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin-top:8px;
  border-top:2px solid var(--ink-800);
}
.page-faq .picker-card{
  display:block;
  padding:20px 16px 22px;
  border-bottom:1px solid var(--faq-line);
  text-decoration:none;
  color:var(--black);
  position:relative;
  transition:background .32s var(--ease), padding-left .32s var(--ease);
}
.page-faq .picker-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:3px;
  height:100%;
  background:var(--rock);
  transform:scaleY(.32);
  transform-origin:top;
  transition:transform .32s var(--ease);
}
.page-faq .picker-card--qing::before{background:var(--qing);}
.page-faq .picker-card--red::before{background:var(--flag-red);}
.page-faq .picker-card--yellow::before{background:var(--flag-yellow);}
.page-faq .picker-card--green::before{background:var(--flag-green);}
.page-faq .picker-card:hover,
.page-faq .picker-card:focus-visible{background:var(--paper-dim);padding-left:22px;}
.page-faq .picker-card:hover::before,
.page-faq .picker-card:focus-visible::before{transform:scaleY(1);}
.page-faq .picker-card__num{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--rock);
}
.page-faq .picker-card__title{
  margin:8px 0 6px;
  font-family:var(--font-display);
  font-size:21px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink-800);
}
.page-faq .picker-card__text{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:var(--rock);
}
.page-faq .picker-card__more{
  display:inline-block;
  margin-top:10px;
  font-size:13px;
  color:var(--gold);
  letter-spacing:.06em;
  border-bottom:1px solid rgba(201,162,75,.45);
}
.page-faq .faq-figure{
  margin:32px 0 0;
  border:1px solid var(--faq-line);
  background:var(--paper-dim);
}
.page-faq .faq-figure .media-frame__img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
}
.page-faq .faq-figure .media-frame__caption{
  display:block;
  padding:12px 16px;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--rock);
  border-top:1px solid var(--faq-line);
}

.page-faq .qa-group{background:var(--paper);}
.page-faq .qa-group--account{--qa-accent:var(--qing);}
.page-faq .qa-group--install{--qa-accent:var(--flag-red);}
.page-faq .qa-group--export{--qa-accent:var(--flag-yellow);}
.page-faq .qa-group--billing{--qa-accent:var(--flag-green);}
.page-faq .qa-group__head{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:6px;
  border-top:3px solid var(--qa-accent, var(--gold));
}
.page-faq .qa-group__head .section-title{margin:0;font-size:clamp(21px,3.4vw,30px);}
.page-faq .qa-group__count{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--rock);
}
.page-faq .qa-layout{display:grid;gap:24px;margin-top:16px;}
.page-faq .qa-list{margin-top:16px;}
.page-faq .qa-layout .qa-list{margin-top:0;}
.page-faq .qa{
  border-bottom:1px solid var(--faq-line);
  transition:background .3s var(--ease);
}
.page-faq .qa:first-child{border-top:1px solid var(--faq-line);}
.page-faq .qa[open]{background:var(--faq-tint);}
.page-faq .qa summary{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px 12px 16px 6px;
  cursor:pointer;
  font-size:15px;
  font-weight:500;
  line-height:1.7;
  color:var(--ink-900);
  list-style:none;
}
.page-faq .qa summary::-webkit-details-marker{display:none;}
.page-faq .qa summary::after{
  content:"+";
  margin-left:auto;
  flex:none;
  font-family:var(--font-mono);
  font-size:18px;
  line-height:1;
  color:var(--rock);
}
.page-faq .qa[open] summary::after{content:"–";color:var(--gold);}
.page-faq .qa summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.page-faq .qa__dot{
  flex:none;
  width:8px;
  height:8px;
  margin-top:8px;
  border-radius:50%;
  background:var(--qa-accent, var(--rock));
}
.page-faq .qa__a{
  padding:0 16px 18px 26px;
  font-size:14px;
  line-height:1.85;
  color:var(--rock);
}
.page-faq .qa__a p{margin:0 0 8px;}
.page-faq .qa__a p:last-child{margin-bottom:0;}
.page-faq .qa__a a{
  color:var(--ink-800);
  text-decoration:none;
  border-bottom:1px solid rgba(201,162,75,.6);
}
.page-faq .qa__a a:hover,
.page-faq .qa__a a:focus-visible{color:var(--gold);}
.page-faq .faq-figure--side{margin:0;}

.page-faq .faq-prepare{background:var(--paper-dim);}
.page-faq .prepare-grid{display:grid;gap:28px;}
.page-faq .prepare-main .section-title{margin:8px 0 0;font-size:clamp(23px,3.8vw,34px);}
.page-faq .prepare-main .lede{margin:12px 0 0;max-width:58ch;color:var(--rock);}
.page-faq .prep-list{
  list-style:none;
  counter-reset:prep;
  margin:22px 0 0;
  padding:0;
}
.page-faq .prep-list li{
  counter-increment:prep;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  padding:16px 0;
  border-top:1px solid var(--faq-line);
}
.page-faq .prep-list li::before{
  content:"0" counter(prep);
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.1em;
  color:var(--gold);
  padding-top:2px;
}
.page-faq .prep-list__title{
  margin:0 0 4px;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--ink-800);
}
.page-faq .prep-list__text{
  margin:0;
  font-size:13.5px;
  line-height:1.8;
  color:var(--rock);
}
.page-faq .support-card{
  align-self:start;
  padding:22px 20px 24px;
  background:var(--ink-900);
  color:var(--paper);
  border-top:3px solid var(--gold);
  box-shadow:var(--shadow-soft);
}
.page-faq .support-card__label{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--gold-soft);
}
.page-faq .support-card__row{
  display:grid;
  gap:2px;
  margin:0 0 14px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(227,201,138,.2);
}
.page-faq .support-card__key{
  font-size:11px;
  letter-spacing:.14em;
  color:rgba(227,201,138,.78);
}
.page-faq .support-card__val{
  font-size:15px;
  line-height:1.6;
  color:var(--white);
  word-break:break-all;
}
.page-faq .support-card__val--mono{
  font-family:var(--font-mono);
  font-weight:600;
  letter-spacing:.04em;
}
.page-faq .support-card__note{
  margin:0 0 20px;
  font-size:12.5px;
  line-height:1.8;
  color:rgba(247,244,238,.66);
}
.page-faq .support-card .btn{width:100%;text-align:center;}

@media (min-width:720px){
  .page-faq .faq-hero{padding:34px 0 56px;}
  .page-faq .picker-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .page-faq .picker-card{border-right:1px solid var(--faq-line);}
  .page-faq .picker-card:nth-child(2n){border-right:0;}
  .page-faq .qa summary{font-size:16px;padding:18px 14px 18px 6px;}
  .page-faq .qa__a{font-size:14.5px;padding:0 20px 20px 27px;}
  .page-faq .faq-figure{display:grid;grid-template-columns:1.4fr .6fr;align-items:stretch;}
  .page-faq .faq-figure .media-frame__img{height:100%;object-fit:cover;}
  .page-faq .faq-figure .media-frame__caption{
    border-top:0;
    border-left:1px solid var(--faq-line);
    display:flex;
    align-items:flex-end;
    padding:18px;
  }
}

@media (min-width:960px){
  .page-faq .faq-hero__grid{
    grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
    gap:44px;
    align-items:start;
  }
  .page-faq .faq-hero .lede{font-size:16px;}
  .page-faq .picker-grid{grid-template-columns:repeat(4, minmax(0,1fr));}
  .page-faq .picker-card:nth-child(2n){border-right:1px solid var(--faq-line);}
  .page-faq .picker-card:last-child{border-right:0;}
  .page-faq .qa-layout{
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
    gap:40px;
    align-items:start;
  }
  .page-faq .faq-figure--side{display:block;margin-top:0;}
  .page-faq .faq-figure--side .media-frame__img{height:auto;}
  .page-faq .faq-figure--side .media-frame__caption{
    border-left:0;
    border-top:1px solid var(--faq-line);
    display:block;
  }
  .page-faq .prepare-grid{
    grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
    gap:52px;
    align-items:start;
  }
  .page-faq .qa summary{padding-right:20px;}
}

@media (prefers-reduced-motion:reduce){
  .page-faq .console-item,
  .page-faq .picker-card,
  .page-faq .picker-card::before,
  .page-faq .qa{transition:none;}
}
<<<END>>>