:root { --faq-orange: #ff3d0a; --faq-ink: #071020; --faq-muted: #566276; --faq-line: #e7edf5; --faq-soft: #fff3ee; }

.faq-page { color: var(--faq-ink); background: #fff; }
.faq-container { width: min(1320px, calc(100% - 64px)); margin: 0 auto; }
.faq-hero { display: grid; grid-template-columns: 1fr minmax(420px, .95fr); gap: 42px; align-items: center; padding: 32px 0 18px; }
.breadcrumb { color: #647084; font-size: 13px; margin-bottom: 28px; }
.breadcrumb span, .breadcrumb::after { color: var(--faq-orange); }
.faq-hero h1 { margin: 0; font-size: clamp(42px, 4.8vw, 66px); line-height: 1; letter-spacing: 0; font-weight: 900; }
.faq-hero h1 span { color: var(--faq-orange); display: block; }
.faq-hero p { margin: 18px 0 24px; max-width: 560px; color: var(--faq-muted); font-size: 18px; line-height: 1.65; }
.faq-search { display: grid; grid-template-columns: 1fr 62px; max-width: 610px; border: 1px solid rgba(255,61,10,.65); border-radius: 7px; overflow: hidden; background: #fff; box-shadow: 0 14px 34px rgba(255,61,10,.08); }
.faq-search input { min-height: 58px; border: 0; outline: 0; padding: 0 20px; font: inherit; }
.faq-search button { border: 0; background: var(--faq-orange); color: #fff; display: grid; place-items: center; cursor: pointer; }
.faq-search svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.faq-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; font-weight: 800; }
.faq-tags a { color: #273247; text-decoration: none; background: #fff0ea; padding: 7px 13px; border-radius: 999px; font-weight: 600; }
.faq-hero-visual { min-height: 350px; overflow: hidden; border-radius: 10px; position: relative; }
.faq-hero-visual::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.2) 15%, rgba(255,255,255,0) 34%), linear-gradient(180deg, rgba(255,255,255,0) 70%, #fff 100%); z-index: 1; }
.faq-hero-visual img { width: 100%; height: 100%; min-height: 350px; object-fit: cover; display: block; }

.faq-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 22px 0; }
.faq-actions a, .faq-main, .resources-strip { border: 1px solid var(--faq-line); border-radius: 9px; background: #fff; box-shadow: 0 14px 32px rgba(15,23,42,.05); }
.faq-actions a { min-height: 104px; display: grid; grid-template-columns: 54px minmax(0, 1fr) 20px; grid-template-rows: auto auto; align-items: center; gap: 5px 14px; padding: 18px 20px; color: var(--faq-ink); text-decoration: none; }
.faq-actions .faq-icon { grid-row: 1 / 3; }
.faq-actions strong { font-size: 16px; }
.faq-actions p { grid-column: 2; margin: 0; color: var(--faq-muted); line-height: 1.45; }
.faq-actions b { grid-column: 3; grid-row: 1 / 3; font-size: 24px; }

.faq-icon { width: 52px; height: 52px; border-radius: 16px; display: inline-grid; place-items: center; background: #fff1eb; color: var(--faq-orange); position: relative; flex: 0 0 auto; }
.faq-icon::before { content: ""; width: 25px; height: 25px; border: 3px solid currentColor; border-radius: 7px; display: block; }
.faq-icon.user::before { border-radius: 50%; box-shadow: 0 13px 0 -8px currentColor; }
.faq-icon.headset::before { border-radius: 50% 50% 8px 8px; border-bottom-color: transparent; }
.faq-icon.calendar::before { border-radius: 4px; box-shadow: inset 0 7px 0 -4px currentColor; }
.faq-icon.shield::before { border-radius: 13px 13px 18px 18px; clip-path: polygon(50% 0, 100% 18%, 88% 78%, 50% 100%, 12% 78%, 0 18%); }
.faq-icon.doc::before { border-radius: 4px; }
.faq-icon.video::before { border-radius: 6px; clip-path: polygon(0 0, 100% 50%, 0 100%); background: currentColor; border: 0; }

.faq-main { display: grid; grid-template-columns: 275px minmax(0, 1fr) 250px; gap: 24px; padding: 18px; }
.faq-sidebar { padding: 8px 0 0; }
.faq-sidebar h2, .top-questions h2, .need-help h2, .feedback h2 { margin: 0 0 16px; color: var(--faq-orange); text-transform: uppercase; font-size: 19px; letter-spacing: 0; }
.faq-sidebar > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 7px; color: #26344a; text-decoration: none; font-weight: 700; }
.faq-sidebar > a.active { color: var(--faq-orange); background: #fff0ea; }
.faq-sidebar span { color: #7b8596; background: #f4f6fa; padding: 2px 7px; border-radius: 999px; font-size: 12px; }
.question-box { margin-top: 22px; border: 1px solid rgba(255,61,10,.35); border-radius: 9px; background: #fff7f3; text-align: center; padding: 18px; }
.question-box img { width: 94px; height: 74px; object-fit: contain; }
.question-box h3 { color: var(--faq-orange); margin: 8px 0; }
.question-box p { color: var(--faq-muted); line-height: 1.5; }
.question-box a, .need-help a, .resources-strip > div a { display: inline-flex; justify-content: center; color: #fff; text-decoration: none; background: var(--faq-orange); border-radius: 6px; padding: 12px 18px; font-weight: 800; }

.faq-section-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; margin: 8px 0 18px; }
.faq-section-head h2 { margin: 0; color: var(--faq-orange); font-size: 27px; letter-spacing: 0; }
.faq-section-head p { margin: 5px 0 0; color: var(--faq-muted); }
.faq-section-head span { background: #f4f6fa; padding: 8px 13px; border-radius: 7px; white-space: nowrap; font-size: 13px; }
.faq-accordion details { border: 1px solid var(--faq-line); border-radius: 0; background: #fff; }
.faq-accordion details + details { border-top: 0; }
.faq-accordion summary { cursor: pointer; list-style: none; padding: 18px 20px; display: flex; justify-content: space-between; gap: 18px; font-weight: 800; }
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--faq-ink); }
.faq-accordion details[open] summary { color: var(--faq-orange); }
.faq-accordion details[open] summary::after { content: "-"; color: var(--faq-orange); }
.faq-accordion details > p { margin: 0; padding: 0 20px 18px; color: var(--faq-muted); line-height: 1.65; }
.faq-answer { display: grid; grid-template-columns: 1fr 150px; gap: 22px; align-items: center; padding: 0 20px 18px; }
.faq-answer p { margin: 0; color: var(--faq-muted); line-height: 1.65; }
.faq-answer img { width: 150px; height: 105px; object-fit: contain; }

.faq-side-panels { display: grid; gap: 18px; align-content: start; }
.top-questions, .need-help, .feedback { border: 1px solid var(--faq-line); border-radius: 9px; padding: 20px; }
.top-questions a { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; color: #26344a; text-decoration: none; padding: 8px 0; line-height: 1.35; }
.top-questions b { color: #fff; background: var(--faq-orange); border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; font-size: 11px; }
.top-questions .outline-action { display: inline-flex; grid-template-columns: none; margin-top: 12px; border: 1px solid rgba(255,61,10,.45); border-radius: 6px; color: var(--faq-orange); padding: 11px 14px; font-weight: 800; }
.need-help img { width: 72px; height: 72px; object-fit: contain; }
.need-help p, .feedback p, .feedback small { color: var(--faq-muted); line-height: 1.55; }
.feedback div { display: flex; gap: 12px; margin: 12px 0; }
.feedback button { border: 1px solid var(--faq-line); background: #fff; border-radius: 999px; padding: 9px 13px; cursor: pointer; }

.resources-strip { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(170px, 1fr)); gap: 22px; align-items: center; padding: 24px; margin: 22px auto 42px; }
.resources-strip h2 { margin: 0 0 8px; color: var(--faq-orange); }
.resources-strip p { margin: 0; color: var(--faq-muted); line-height: 1.55; }
.resources-strip > a { display: grid; grid-template-columns: 48px 1fr; gap: 12px; color: var(--faq-ink); text-decoration: none; border-left: 1px solid var(--faq-line); padding-left: 18px; }
.resources-strip .faq-icon { width: 42px; height: 42px; border-radius: 12px; }
.resources-strip .faq-icon::before { width: 19px; height: 19px; border-width: 2px; }
.resources-strip strong { display: block; grid-column: 2; margin-bottom: 5px; }
.resources-strip > a p { grid-column: 2; }
.resources-strip > div a { margin-top: 14px; padding: 11px 16px; }

@media (max-width: 1180px) {
 .faq-hero, .faq-main, .resources-strip { grid-template-columns: 1fr; }
 .faq-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .resources-strip > a { border-left: 0; border-top: 1px solid var(--faq-line); padding: 16px 0 0; }
}

@media (max-width: 700px) {
 .faq-container { width: min(100% - 32px, 1320px); }
 .faq-actions { grid-template-columns: 1fr; }
 .faq-answer { grid-template-columns: 1fr; }
 .faq-hero-visual, .faq-hero-visual img { min-height: 300px; }
 .faq-search { grid-template-columns: 1fr 56px; }
}