.faq-page { background: var(--paper); }
.faq-page .site-header { color: var(--ink); background: rgba(251, 250, 246, .97); box-shadow: 0 1px 0 rgba(19, 37, 43, .1); backdrop-filter: blur(12px); }
.faq-page main { padding-top: 82px; }
.faq-hero { padding: 88px 0 45px; text-align: center; background: var(--paper); }
.faq-hero-inner { max-width: 850px; }
.faq-hero .eyebrow { justify-content: center; margin-bottom: 20px; }
.faq-hero h1 { margin: 0; font-family: var(--display); font-size: clamp(32px, 4vw, 48px); font-weight: 600; line-height: 1.35; }
.faq-hero h1 em { color: var(--orange-deep); font-style: normal; }
.faq-hero > .container > p:last-child { margin: 15px 0 0; color: #7c8989; font-size: 14px; }
.faq-detail-section { padding: 20px 0 110px; }
.faq-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 70px; align-items: start; }
.faq-detail-list { border-top: 1px solid var(--line); }
.faq-detail-list details { border-bottom: 1px solid var(--line); }
.faq-detail-list summary { display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px; gap: 15px; align-items: center; padding: 20px 10px; list-style: none; cursor: pointer; font-size: 15px; font-weight: 700; transition: background .2s ease; }
.faq-detail-list summary::-webkit-details-marker { display: none; }
.faq-detail-list summary:hover { background: rgba(132, 169, 184, .08); }
.faq-detail-list summary svg { width: 17px; height: 17px; color: var(--orange-deep); transition: transform .2s ease; }
.faq-detail-list details[open] summary svg { transform: rotate(45deg); }
.question-mark { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 4px; color: #1670df; background: #e7f1ff; font-family: var(--body); font-size: 11px; font-weight: 800; }
.answer { margin: 0 43px 19px; padding: 14px 18px; border-left: 2px solid var(--mint); color: #647477; background: #f6f8f6; font-size: 13px; line-height: 1.9; }
.answer p { margin: 0; }
.answer p + p { margin-top: 9px; }
.answer b { color: var(--orange-deep); font-weight: 800; }
.faq-sidebar { position: sticky; top: 110px; }
.faq-side-card { padding: 25px; color: var(--white); background: var(--ink); border-top: 4px solid var(--orange); }
.side-label { margin: 0; color: var(--mint); font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
.faq-side-card h2 { margin: 25px 0 14px; font-family: var(--display); font-size: 27px; font-weight: 600; line-height: 1.4; }
.faq-side-card h2 em { color: var(--orange); font-style: normal; }
.faq-side-card > p:not(.side-label) { margin: 0 0 23px; color: rgba(255,255,255,.65); font-size: 12px; line-height: 1.85; }
.faq-side-card .button { width: 100%; }
.faq-side-info { display: grid; gap: 12px; padding: 19px 2px; color: #637376; font-size: 11px; }
.faq-side-info span { display: flex; align-items: flex-start; gap: 9px; line-height: 1.55; }
.faq-side-info svg { width: 15px; height: 15px; color: var(--orange-deep); }
.faq-footer .footer-bottom { border-top: 0; }
.faq-footer .footer-bottom a { color: var(--mint); }

@media (max-width: 720px) {
  .faq-page { padding-bottom: 64px; }
  .faq-page main { padding-top: 70px; }
  .faq-hero { padding: 58px 0 32px; text-align: left; }
  .faq-hero .eyebrow { justify-content: flex-start; }
  .faq-hero h1 { font-size: 31px; }
  .faq-hero > .container > p:last-child { font-size: 12px; }
  .faq-detail-section { padding: 10px 0 70px; }
  .faq-detail-layout { grid-template-columns: 1fr; gap: 35px; }
  .faq-detail-list summary { grid-template-columns: 27px minmax(0, 1fr) 17px; gap: 11px; padding: 17px 0; font-size: 13px; }
  .question-mark { width: 22px; height: 22px; }
  .answer { margin-left: 0; margin-right: 0; padding: 12px 13px; font-size: 12px; }
  .faq-sidebar { position: static; }
  .faq-side-card { padding: 22px; }
}