/* ===== FAQ page: every rule is scoped to .faq-page (nothing touches header/footer) ===== */
.faq-page{color:var(--ink); line-height:1.6}
.faq-page *{box-sizing:border-box}
.faq-page .f-in{max-width:1240px; margin:0 auto; padding:0 32px}
.faq-page .f-block{padding-top:32px; padding-bottom:48px}

/* hero (same as About page) */
.faq-page .a-hero{background:linear-gradient(135deg,#FFF1D6,#FFFFFF 50%,#E4F5EA); border-bottom:1px solid var(--line); padding:34px 0 40px; position:relative}
.faq-page .a-hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg,var(--saffron) 33%,#fff 33% 66%,var(--green) 66%)}
.faq-page .crumb{font-size:13.5px; color:var(--slate); margin-bottom:10px}
.faq-page .crumb a{color:var(--navy); font-weight:600}
.faq-page .crumb a:hover{color:var(--saffron-deep)}
.faq-page .a-hero h1{font-size:clamp(32px,4.6vw,50px); font-weight:800; color:var(--ink); margin:0 0 8px}
.faq-page .a-hero p{color:var(--slate); font-size:17px; max-width:62ch; margin:0}

/* search + category tabs */
.faq-page .fsearch{display:block; width:100%; padding:14px 18px; border:1.5px solid var(--line); border-radius:14px; font:inherit; background:#fff; margin:0 0 16px; box-shadow:0 8px 20px -16px rgba(32,28,25,.35)}
.faq-page .fsearch:focus{outline:3px solid var(--saffron); outline-offset:1px}
.faq-page .tabs{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px}
.faq-page .sub-chip{background:#fff; border:1.5px solid var(--line); border-radius:99px; padding:8px 16px; font-weight:600; font-size:14px; cursor:pointer; font-family:inherit; color:var(--ink); transition:border-color .2s ease}
.faq-page .sub-chip:hover{border-color:var(--saffron)}
.faq-page .sub-chip.on{background:var(--navy); color:#fff; border-color:var(--navy)}

/* questions (site FAQ look from style.css, full width here) */
.faq-page .faq-list{max-width:none; margin:0; display:flex; flex-direction:column; gap:14px}
.faq-page .faq-item[hidden]{display:none}
.faq-page .faq-item:nth-child(n) .faq-dot{background:var(--saffron)}
.faq-page .faq-item[data-c="For customers"] .faq-dot{background:var(--green)}
.faq-page .faq-item[data-c="For businesses"] .faq-dot{background:var(--navy)}
.faq-page .faq-item[data-c="Account and support"] .faq-dot{background:var(--gold)}
.faq-page .none{color:var(--slate); padding:18px 4px; margin:0}
.faq-page .none a{color:var(--saffron-deep); text-decoration:underline}
.faq-page .none[hidden]{display:none}

/* still have a question */
.faq-page .f-cta{margin-top:36px; background:linear-gradient(135deg,var(--navy),var(--navy-deep)); color:#fff; border-radius:20px; padding:30px 36px; display:flex; flex-wrap:wrap; gap:16px 24px; align-items:center; justify-content:space-between}
.faq-page .f-cta h2{font-size:26px; font-weight:800; color:#fff; margin:0}
.faq-page .f-cta p{color:#D7DBEA; margin:6px 0 0}

@media(max-width:640px){
  .faq-page .f-in{padding:0 18px}
  .faq-page .a-hero{padding:26px 0 32px}
  .faq-page .f-block{padding-top:24px; padding-bottom:36px}
  .faq-page .f-cta{padding:24px 20px}
}