.faq-page { background: #f7fbff; }

.faq-page main { overflow: hidden; }

.faq-hero {
  position: relative;
  isolation: isolate;
  min-height: 330px;
  padding: 76px 24px 82px;
  display: grid;
  place-content: center;
  text-align: center;
  color: white;
  background:
    radial-gradient(circle at 18% 18%, rgba(154, 216, 255, .34), transparent 27%),
    radial-gradient(circle at 84% 24%, rgba(255, 239, 174, .2), transparent 24%),
    linear-gradient(125deg, #07172f 0%, #0d407b 54%, #2c84ce 100%);
}

.faq-hero::before,
.faq-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(206, 234, 255, .15);
  border-radius: 50%;
}

.faq-hero::before { width: 380px; height: 380px; left: -220px; bottom: -285px; box-shadow: 0 0 0 55px rgba(169, 219, 255, .04); }
.faq-hero::after { width: 270px; height: 270px; right: -160px; top: -205px; box-shadow: 0 0 0 42px rgba(255,255,255,.035); }
.faq-hero .eyebrow { margin-bottom: 13px; color: #c9e8ff; }
.faq-hero h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(42px, 6vw, 72px); font-weight: 400; line-height: 1; letter-spacing: -.035em; }
.faq-hero > p:last-child { max-width: 680px; margin: 22px auto 0; color: #e2f1ff; font-size: clamp(16px, 2vw, 19px); line-height: 1.65; }
.faq-sparkle { position: absolute; color: #fff0ac; text-shadow: 0 0 12px rgba(255,240,172,.85); }
.faq-sparkle-one { top: 44px; left: 11%; font-size: 23px; }
.faq-sparkle-two { right: 12%; bottom: 48px; font-size: 17px; }

.faq-layout {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  padding: 72px 0 86px;
  display: grid;
  grid-template-columns: minmax(240px, 330px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(38px, 7vw, 88px);
}

.faq-intro { position: sticky; top: 28px; padding: 7px 0; }
.faq-intro .eyebrow { color: #1764a8; }
.faq-intro h2 { margin: 10px 0 17px; color: var(--navy); font-family: Georgia, serif; font-size: clamp(32px, 4vw, 46px); font-weight: 400; line-height: 1.08; }
.faq-intro > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.faq-contact-button { min-height: 50px; margin-top: 26px; padding: 0 19px; display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; color: #071a35; background: linear-gradient(135deg, #d8edff, #73bcfa); box-shadow: 0 12px 28px rgba(43, 127, 199, .2); font-size: 15px; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.faq-contact-button span { color: #159447; font-size: 12px; }
.faq-contact-button:hover, .faq-contact-button:focus-visible { transform: translateY(-2px); box-shadow: 0 15px 34px rgba(43, 127, 199, .3); }

.faq-list { display: grid; gap: 12px; }
.faq-list details { overflow: hidden; border: 1px solid #cedeed; border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 9px 26px rgba(11, 48, 87, .055); }
.faq-list details[open] { border-color: #9fc9ec; box-shadow: 0 14px 34px rgba(24, 102, 169, .1); }
.faq-list summary { min-height: 68px; padding: 19px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #0b2344; font-size: 17px; font-weight: 760; line-height: 1.35; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #1266aa; background: #e7f3fe; font-size: 23px; font-weight: 400; line-height: 1; transition: transform .22s ease, color .22s ease, background .22s ease; }
.faq-list details[open] summary span { color: white; background: #176bb0; transform: rotate(45deg); }
.faq-list details > div { padding: 0 68px 23px 22px; }
.faq-list details > div p { margin: 0; color: #536579; font-size: 16px; line-height: 1.72; }
.faq-list details > div a { color: #075d9f; font-weight: 700; }

.faq-cta {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto 78px;
  padding: 32px 36px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  overflow: hidden;
  border: 1px solid #c9def1;
  border-radius: 24px;
  background: linear-gradient(120deg, #edf8ff, #dceeff 54%, #f8fcff);
  box-shadow: 0 20px 46px rgba(19, 88, 147, .1);
}
.faq-cta > span { color: #1673bd; font-size: 32px; text-shadow: 0 0 13px rgba(56, 151, 221, .35); }
.faq-cta .eyebrow { margin: 0 0 6px; color: #1764a8; }
.faq-cta h2 { margin: 0; color: var(--navy); font-family: Georgia, serif; font-size: clamp(26px, 3vw, 36px); font-weight: 400; }
.faq-cta > a { min-height: 49px; padding: 0 21px; display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; color: white; background: #0b3f78; font-size: 15px; font-weight: 800; text-decoration: none; box-shadow: 0 10px 24px rgba(7, 49, 91, .2); }

@media (max-width: 820px) {
  .faq-layout { grid-template-columns: 1fr; padding-top: 54px; gap: 34px; }
  .faq-intro { position: static; text-align: center; }
  .faq-intro > p:not(.eyebrow) { max-width: 600px; margin-inline: auto; }
}

@media (max-width: 650px) {
  .faq-hero { min-height: 285px; padding: 58px 22px 64px; }
  .faq-hero h1 { font-size: clamp(39px, 12vw, 52px); }
  .faq-layout { width: min(100% - 28px, 1160px); padding: 46px 0 62px; }
  .faq-intro h2 { font-size: 35px; }
  .faq-contact-button { width: 100%; justify-content: center; }
  .faq-list summary { min-height: 64px; padding: 17px 17px; gap: 12px; font-size: 16px; }
  .faq-list details > div { padding: 0 18px 20px; }
  .faq-list details > div p { font-size: 16px; }
  .faq-cta { width: min(100% - 28px, 1160px); margin-bottom: 54px; padding: 28px 22px; grid-template-columns: 1fr; text-align: center; }
  .faq-cta > span { display: none; }
  .faq-cta > a { width: 100%; justify-content: center; }
}