/* FAQ page — editorial support-centre layout */
.faq-page { background: #091315; }

.faq-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(86px, 10vw, 138px) 0 92px;
  border-bottom: 1px solid rgba(105, 211, 214, .14);
  background:
    radial-gradient(circle at 82% 22%, rgba(105, 211, 214, .16), transparent 26rem),
    radial-gradient(circle at 7% 88%, rgba(255, 138, 92, .1), transparent 24rem),
    #0b1517;
}

.faq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}

.faq-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: clamp(54px, 8vw, 120px);
  align-items: center;
}

.faq-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #69d3d6;
  font: 500 .68rem "IBM Plex Mono", monospace;
  letter-spacing: .12em;
}

.faq-kicker::before { content: ""; width: 34px; height: 2px; background: #ff8a5c; }

.faq-hero h1 {
  max-width: 850px;
  margin-top: 25px;
  color: #f6f1e8;
  font: 700 clamp(4rem, 7.15vw, 7.4rem)/.88 "Space Grotesk", sans-serif;
  letter-spacing: -.06em;
}

.faq-hero h1 span { color: #b5f1f1; }

.faq-hero-copy > p {
  max-width: 690px;
  margin-top: 30px;
  color: #a7b2b5;
  font-size: 1.02rem;
  line-height: 1.8;
}

.faq-help-card {
  position: relative;
  padding: clamp(28px, 3.5vw, 42px);
  border: 1px solid rgba(181, 241, 241, .2);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(27, 46, 49, .96), rgba(17, 30, 32, .96));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .26);
}

.faq-help-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, #ff8a5c, #69d3d6 65%, transparent);
}

.faq-help-label { color: #ff9b6b; font: 500 .64rem "IBM Plex Mono", monospace; letter-spacing: .1em; }
.faq-help-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-top: 25px;
  border: 1px solid rgba(105, 211, 214, .3);
  border-radius: 12px;
  color: #b5f1f1;
  background: rgba(105, 211, 214, .08);
}
.faq-help-icon svg { width: 22px; }
.faq-help-card h2 { margin-top: 22px; color: #f6f1e8; font: 650 clamp(1.8rem, 2.8vw, 2.6rem)/1.05 "Space Grotesk", sans-serif; letter-spacing: -.035em; }
.faq-help-card > p { margin-top: 14px; color: #9da9ac; font-size: .88rem; line-height: 1.7; }
.faq-help-card ul { display: grid; gap: 12px; margin-top: 24px; list-style: none; }
.faq-help-card li { display: flex; align-items: center; gap: 10px; color: #bdc6c8; font-size: .78rem; }
.faq-help-card li svg { width: 16px; color: #69d3d6; }
.faq-help-card > a {
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding: 0 17px;
  border-radius: 8px;
  color: #102022;
  background: #b5f1f1;
  font-size: .83rem;
  font-weight: 750;
  transition: transform .2s ease, background .2s ease;
}
.faq-help-card > a:hover { transform: translateY(-2px); background: #d5ffff; }
.faq-help-card > a svg { width: 17px; }

.faq-main {
  position: relative;
  padding: 136px 0 112px;
  background:
    linear-gradient(rgba(255, 255, 255, .015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .015) 1px, transparent 1px),
    #0d181a;
  background-size: 64px 64px;
}

.faq-layout { display: grid; gap: 58px; }

.faq-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.faq-nav a {
  position: relative;
  min-height: 142px;
  display: grid;
  align-content: end;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  color: #e9eeeb;
  background: rgba(20, 34, 37, .88);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.faq-nav a:hover,
.faq-nav a:focus-visible { transform: translateY(-4px); border-color: rgba(105, 211, 214, .36); background: #182a2d; }

.faq-nav a > span {
  position: absolute;
  top: 19px;
  right: 19px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #69d3d6;
  background: rgba(105, 211, 214, .08);
}
.faq-nav a > span svg { width: 19px; }
.faq-nav strong { font: 600 .98rem "Space Grotesk", sans-serif; }
.faq-nav small { margin-top: 7px; color: #78878b; font: 500 .65rem "IBM Plex Mono", monospace; letter-spacing: .03em; }

.faq-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.faq-group {
  scroll-margin-top: 104px;
  padding: clamp(25px, 3vw, 34px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(22, 38, 41, .96), rgba(14, 26, 28, .96));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .12);
}

.faq-group + .faq-group { margin-top: 0; }

.faq-group-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 19px;
  padding-bottom: 19px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.faq-group-head > span {
  width: 32px;
  height: 32px;
  display: grid;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 50%;
  color: #ff9b6b;
  background: rgba(255, 138, 92, .08);
  font: 500 .62rem "IBM Plex Mono", monospace;
}

.faq-group h2 {
  margin: 0;
  color: #f6f1e8;
  font: 650 clamp(1.45rem, 2.2vw, 2rem)/1.1 "Space Grotesk", sans-serif;
  letter-spacing: -.03em;
}

.faq-group h2::after { display: none; }

.faq-item {
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}
.faq-item:last-child { border-bottom: 0; }
.faq-item:hover,
.faq-item[open] { border-color: rgba(255, 255, 255, .09); background: transparent; }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 70px;
  padding: 15px 0;
  color: #dce3df;
  cursor: pointer;
  list-style: none;
  font: 600 .91rem/1.42 "Space Grotesk", sans-serif;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  width: 27px;
  height: 27px;
  display: grid;
  flex: 0 0 27px;
  place-items: center;
  border: 1px solid rgba(105, 211, 214, .25);
  border-radius: 50%;
  color: #b5f1f1;
  font: 400 1.1rem/1 "Space Grotesk", sans-serif;
}
.faq-item[open] summary { color: #b5f1f1; }
.faq-item[open] summary::after { content: "−"; color: #102022; border-color: #b5f1f1; background: #b5f1f1; }

.faq-answer {
  max-width: none;
  padding: 0 42px 20px 0;
  color: #96a3a6;
  font-size: .84rem;
  line-height: 1.72;
}
.faq-answer a { color: #b5f1f1; text-decoration: underline; text-underline-offset: 3px; }

.faq-cta {
  padding: 74px 0;
  border-top: 1px solid rgba(105, 211, 214, .15);
  background: #0a1416;
}

.faq-cta-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(181, 241, 241, .18);
  border-radius: 18px;
  background: linear-gradient(120deg, #17292c, #111f21);
}

.faq-cta-mark {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(105, 211, 214, .28);
  border-radius: 16px;
  color: #b5f1f1;
  background: rgba(105, 211, 214, .08);
}
.faq-cta-mark svg { width: 28px; }
.faq-cta-shell > div:nth-child(2) > span { color: #ff9b6b; font: 500 .63rem "IBM Plex Mono", monospace; letter-spacing: .1em; }
.faq-cta h2 { margin-top: 9px; color: #f6f1e8; font: 650 clamp(2rem, 3.4vw, 3.25rem)/1 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
.faq-cta p { margin-top: 11px; color: #9aa7aa; line-height: 1.6; }
.faq-cta-shell > a {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 20px;
  border-radius: 8px;
  color: #102022;
  background: #b5f1f1;
  font-size: .82rem;
  font-weight: 750;
  white-space: nowrap;
  transition: transform .2s ease, background .2s ease;
}
.faq-cta-shell > a:hover { transform: translateY(-2px); background: #d5ffff; }
.faq-cta-shell > a svg { width: 17px; }

.faq-page .footer .footer-cta { display: none !important; }

@media (max-width: 1050px) {
  .faq-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 42px; }
  .faq-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-content { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .faq-hero { padding: 72px 0 66px; }
  .faq-hero-grid { grid-template-columns: 1fr; gap: 42px; }
  .faq-hero h1 { font-size: clamp(3.45rem, 16vw, 5rem); }
  .faq-help-card { max-width: 590px; }
  .faq-main { padding: 104px 0 78px; }
  .faq-layout { gap: 38px; }
  .faq-nav { gap: 9px; }
  .faq-nav a { min-height: 122px; padding: 17px; }
  .faq-nav a > span { top: 15px; right: 15px; }
  .faq-group { padding: 23px 20px; border-radius: 14px; }
  .faq-cta { padding: 48px 0; }
  .faq-cta-shell { grid-template-columns: auto 1fr; gap: 20px; padding: 27px 22px; border-radius: 14px; }
  .faq-cta-shell > a { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 480px) {
  .faq-nav { grid-template-columns: 1fr; }
  .faq-nav a { min-height: 106px; }
  .faq-group h2 { font-size: 1.4rem; }
  .faq-item summary { min-height: 64px; font-size: .87rem; }
  .faq-cta-mark { width: 54px; height: 54px; border-radius: 13px; }
}