/* =============================================================================
   FAQ page — /frequently-asked-questions/ (page-templates/faqs.php)
   Loaded on that template only (inc/faq-page.php). Everything is prefixed
   .fq-… / scoped to #faq-page.fq, with font-family set explicitly (the design
   system's .eyebrow etc. must not leak in).
   ========================================================================== */

/* position:sticky needs an un-clipped path to the viewport. The parent theme
   clips <main> (`#wrapper [role="main"]{overflow:hidden}`, revolution app.css)
   and custom-styles.css sets `html,body{overflow-x:hidden}` at ≤767px, which
   turns <body> into a scroll container. `overflow:clip` keeps the clipping
   without creating a scroll container (the `visible` line is the fallback for
   browsers without clip). This file only loads on the FAQ template. */
html body #wrapper #main-content { overflow: visible; overflow: clip; }
@media (max-width: 767px) {
	html, html body { overflow-x: visible; overflow-x: clip; }
}

#faq-page.fq {
	--blue: #3c97cb; --blue-d: #2f7eae; --ink: #2d2e2f; --ink2: #3d3f40; --mut: #565759; --faint: #8a8c8f;
	--line: #e6eaee; --line2: #eef1f4; --soft: #f8fafb; --pale: #f3f7fa;
	--disp: 'Montserrat', sans-serif; --body: 'Open Sans', sans-serif;
	font-family: var(--body);
	color: var(--ink);
	text-align: left;
}
#faq-page.fq *, #faq-page.fq *::before, #faq-page.fq *::after { box-sizing: border-box; }
#faq-page .fq-wrap { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
#faq-page .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#faq-page [hidden] { display: none !important; }

/* tinted icon tiles — colour comes from --fq-bg / --fq-fg on the card */
#faq-page .fq-tile {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 12px;
	background: var(--fq-bg, rgba(60, 151, 203, .1)); color: var(--fq-fg, #3c97cb);
}
#faq-page .fq-tile--md { width: 42px; height: 42px; border-radius: 12px; }
#faq-page .fq-tile--38 { width: 38px; height: 38px; border-radius: 10px; }
#faq-page .fq-tile--sm { width: 30px; height: 30px; border-radius: 8px; }

#faq-page .fq-pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 14px; border-radius: 999px;
	background: #fff; border: 1px solid rgba(60, 151, 203, .25);
	font: 800 11px/1.2 var(--disp); letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
}
#faq-page .fq-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }

/* ------------------------------------------------------------------- hero -- */
#faq-page .fq-hero { background: linear-gradient(180deg, #f3f7fa 0%, #fff 100%); padding: 64px 0 40px; text-align: center; }
#faq-page .fq-hero__inner { max-width: 720px; margin: 0 auto; }
/* Two ids: outranks the legacy h1#contactFormTitle margin (custom-styles.css). */
#faq-page h1#contactFormTitle {
	margin: 0 0 12px;
	font: 800 44px/1.08 var(--disp); letter-spacing: -1.2px; text-transform: none; color: var(--ink);
}
#faq-page h1#contactFormTitle span { color: var(--blue); }
#faq-page .fq-sub { margin: 0; font: 400 18px/1.5 var(--body); color: var(--mut); }

#faq-page .fq-search { position: relative; max-width: 620px; margin: 28px auto 0; }
#faq-page .fq-search__input {
	display: block; width: 100%; height: 58px; margin: 0;
	padding: 0 54px; border: 1px solid #d9dee3; border-radius: 14px; background: #fff;
	font: 400 16.5px/1.2 var(--body); color: var(--ink);
	box-shadow: 0 10px 28px rgba(45, 46, 47, .07);
	outline: none; -webkit-appearance: none; appearance: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
#faq-page .fq-search__input::-webkit-search-cancel-button,
#faq-page .fq-search__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
#faq-page .fq-search__input::placeholder { color: #9aa0a6; opacity: 1; }
#faq-page .fq-search__input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(60, 151, 203, .14), 0 10px 28px rgba(45, 46, 47, .07); }
#faq-page .fq-search__icon { position: absolute; left: 19px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--faint); pointer-events: none; }
#faq-page .fq-search__clear {
	position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; padding: 0; margin: 0; border: 0; border-radius: 50%;
	background: #f1f3f5; color: var(--mut); cursor: pointer; transition: background .2s ease;
}
#faq-page .fq-search__clear:hover { background: #e6eaee; color: var(--ink); }

#faq-page .fq-meta { margin-top: 16px; font: 400 14px/1.4 var(--body); color: var(--mut); }
#faq-page .fq-meta__try,
#faq-page .fq-meta__result { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
#faq-page .fq-chip {
	display: inline-flex; align-items: center; margin: 0; padding: 6px 14px;
	border: 1px solid var(--line); border-radius: 999px; background: #fff;
	font: 600 13px/1.2 var(--disp); color: var(--ink2); cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}
#faq-page .fq-chip:hover, #faq-page .fq-chip:focus-visible { border-color: var(--blue); color: var(--blue); }
#faq-page .fq-meta__result strong { color: var(--ink); font-weight: 700; }
#faq-page .fq-linkbtn { margin: 0; padding: 4px 2px; border: 0; background: none; font: 600 14px/1.2 var(--body); color: var(--blue); cursor: pointer; }
#faq-page .fq-linkbtn:hover { color: var(--blue-d); text-decoration: underline; }

/* ------------------------------------------------------- browse by topic -- */
#faq-page .fq-topics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 4px 0 36px; }
#faq-page.is-searching .fq-topics { display: none; }
#faq-page .fq-tcard {
	display: flex; flex-direction: column; min-width: 0;
	padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff;
	box-shadow: 0 8px 24px rgba(45, 46, 47, .05);
	color: var(--ink); text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
#faq-page .fq-tcard:hover, #faq-page .fq-tcard:focus-visible {
	border-color: #bcd9ec; box-shadow: 0 12px 30px rgba(60, 151, 203, .12); color: var(--ink); text-decoration: none;
}
#faq-page .fq-tcard:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#faq-page .fq-tcard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
#faq-page .fq-count { padding: 4px 10px; border-radius: 999px; background: #f1f3f5; font: 700 12px/1.2 var(--disp); color: var(--ink2); white-space: nowrap; }
#faq-page .fq-tcard__name { font: 800 19px/1.25 var(--disp); color: var(--ink); margin-bottom: 10px; }
#faq-page .fq-tcard__prev { display: flex; flex-direction: column; gap: 6px; }
#faq-page .fq-tcard__prev > span {
	position: relative; padding-left: 13px;
	font: 400 14px/1.45 var(--body); color: var(--mut);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#faq-page .fq-tcard__prev > span::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: #c4c9ce; }
#faq-page .fq-tcard__all { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; font: 700 14px/1.2 var(--disp); color: var(--blue); }
#faq-page .fq-tcard__all svg { transition: transform .2s ease; }
#faq-page .fq-tcard:hover .fq-tcard__all svg { transform: translateX(3px); }

/* ------------------------------------------------ topic menu + sections -- */
#faq-page .fq-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start; padding-bottom: 72px; }
#faq-page.is-searching .fq-layout { padding-top: 8px; }
#faq-page .fq-menu { position: sticky; top: calc(var(--fq-head, 0px) + 24px); }
#faq-page .fq-menu__label { margin: 0 0 10px 12px; font: 800 11.5px/1.2 var(--disp); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
#faq-page .fq-menu__list { position: relative; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
#faq-page .fq-menu__list li { margin: 0; }
#faq-page .fq-menu__link {
	position: relative; display: flex; align-items: center; gap: 10px;
	padding: 9px 12px; border-radius: 10px;
	color: var(--ink2); text-decoration: none;
	transition: background .2s ease, opacity .2s ease;
}
#faq-page .fq-menu__link:hover { background: var(--soft); color: var(--ink2); text-decoration: none; }
#faq-page .fq-menu__link:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
#faq-page .fq-menu__name { flex: 1 1 auto; min-width: 0; font: 600 14.5px/1.3 var(--disp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#faq-page .fq-menu__n { flex: 0 0 auto; min-width: 24px; padding: 2px 8px; border-radius: 999px; background: #f1f3f5; font: 700 12px/1.4 var(--disp); color: var(--ink2); text-align: center; transition: background .2s ease, color .2s ease; }
#faq-page .fq-menu__link.is-active { background: var(--pale); }
#faq-page .fq-menu__link.is-active .fq-menu__name { font-weight: 700; color: var(--ink); }
#faq-page .fq-menu__link.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--blue); }
#faq-page .fq-menu__link.is-active .fq-menu__n { background: var(--blue); color: #fff; }
#faq-page .fq-menu__link.is-empty { opacity: .4; pointer-events: none; }

#faq-page .fq-sec { margin-bottom: 44px; scroll-margin-top: calc(var(--fq-head, 0px) + 16px); }
#faq-page .fq-sec:focus { outline: none; }
#faq-page .fq-sec:last-of-type { margin-bottom: 0; }
#faq-page .fq-anchor { display: block; height: 0; scroll-margin-top: calc(var(--fq-head, 0px) + 16px); }
#faq-page .fq-sec__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
#faq-page .fq-sec__title { margin: 0; font: 800 23px/1.25 var(--disp); letter-spacing: -.4px; text-transform: none; color: var(--ink); }
#faq-page .fq-sec__count { margin: 2px 0 0; font: 400 13.5px/1.4 var(--body); color: var(--mut); }

#faq-page .fq-acc { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px rgba(45, 46, 47, .04); }
#faq-page .fq-item { position: relative; margin: 0; padding: 0; background: none; }
#faq-page .fq-item:not([hidden]) ~ .fq-item:not([hidden]) { border-top: 1px solid var(--line2); }
#faq-page .fq-item::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 1;
	background: var(--blue); transform: scaleY(0); transform-origin: top; transition: transform .3s ease;
}
#faq-page .fq-item.is-open::before { transform: scaleY(1); }
#faq-page .fq-item__h { margin: 0; padding: 0; font: inherit; line-height: inherit; text-transform: none; letter-spacing: 0; }
#faq-page .fq-q {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	width: 100%; margin: 0; padding: 19px 22px; border: 0; border-radius: 0; background: none;
	font: 600 17px/1.45 var(--disp); color: var(--ink); text-align: left; text-transform: none; letter-spacing: 0;
	cursor: pointer; transition: background .2s ease, color .2s ease;
}
#faq-page .fq-q:hover { background: var(--soft); }
#faq-page .fq-q:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
#faq-page .fq-q--static { cursor: default; }
#faq-page .fq-q--static:hover { background: none; }
#faq-page .fq-q__text { min-width: 0; }
#faq-page .fq-pm {
	position: relative; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
	border: 1.5px solid #d6dde3; background: #fff;
	transition: border-color .2s ease, background .2s ease;
}
#faq-page .fq-pm::before,
#faq-page .fq-pm::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
	border-radius: 2px; background: var(--ink2); transition: transform .3s ease, background .2s ease;
}
#faq-page .fq-pm::after { transform: rotate(90deg); }
#faq-page .fq-q:hover .fq-pm { border-color: var(--blue); }
#faq-page .fq-item.is-open .fq-q { color: var(--blue); font-weight: 700; }
#faq-page .fq-item.is-open .fq-pm { background: var(--blue); border-color: var(--blue); }
#faq-page .fq-item.is-open .fq-pm::before,
#faq-page .fq-item.is-open .fq-pm::after { background: #fff; }
#faq-page .fq-item.is-open .fq-pm::after { transform: rotate(0deg); }

/* Answer reveal: 0fr → 1fr. Closed answers are also visibility:hidden so
   links inside them are not tab stops. */
#faq-page .fq-a {
	display: grid; grid-template-rows: 0fr; visibility: hidden;
	padding: 0; margin: 0; font-size: inherit; color: inherit;
	transition: grid-template-rows .32s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .32s;
}
#faq-page .fq-item.is-open .fq-a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .32s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
#faq-page .fq-a__inner { overflow: hidden; min-height: 0; }
#faq-page .fq-a__body { padding: 0 22px 24px; font: 400 16px/1.75 var(--body); color: var(--ink2); }
/* Answer typography skips the instruction manuals (.content-body-ht), which have their own. */
#faq-page .fq-a__body :is(p, li):not(.content-body-ht *) { font-size: inherit; line-height: inherit; color: inherit; }
#faq-page .fq-a__body p:not(.content-body-ht *) { margin: 0 0 12px; }
#faq-page .fq-a__body > :last-child:not(.content-body-ht), #faq-page .fq-a__body p:last-child:not(.content-body-ht *) { margin-bottom: 0; }
#faq-page .fq-a__body :is(ul, ol):not(.content-body-ht *) { margin: 0 0 12px; padding-left: 22px; }
#faq-page .fq-a__body a:not(.content-body-ht *) { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
#faq-page .fq-a__body a:not(.content-body-ht *):hover { color: var(--blue-d); }
#faq-page .fq-a__body strong:not(.content-body-ht *) { color: var(--ink); }
#faq-page .fq-a__body img, #faq-page .fq-a__body video { max-width: 100%; height: auto; }
#faq-page .fq-a__body iframe { max-width: 100%; }

/* Instruction manuals (impression kits): styled by custom-styles.css plus the old template's
   inline rules, repeated here for the manuals only and at the same specificity as before, so
   the custom-styles.css manual rules still win where they did. */
#faq-page .fq-a__body .content-body-ht { font-size: 20.8px; line-height: 1.4; color: #565759; text-align: start; }
@media (max-width: 767px) { #faq-page .fq-a__body .content-body-ht { font-size: 18.2px; text-align: center; } }
.faq-question-section :where(.content-body-ht) p,
.faq-question-section :where(.content-body-ht) ul li { margin: 0 0 10px; line-height: 26px; font-size: 18px; }
.faq-question-section :where(.content-body-ht) p:last-child { margin-bottom: 0; }
.faq-question-section :where(.content-body-ht) ul { padding-left: 40px; }
.faq-question-section :where(.content-body-ht) ul li { margin-bottom: 0; }
:where(.content-body-ht) p strong { color: #222; }
.faq-question-section.is-open :where(.content-body-ht) a { color: #4597cb; }
/* They are old full-width layouts: custom-styles.css fixes every .row at 1170/1420px and pulls
   .section-full-lenght out by -25/-39px on phones, both wider than the answer card. */
#faq-page .fq-a__body .row { width: auto; max-width: 100%; }
#faq-page .fq-a__body .section-full-lenght { margin-left: 0; margin-right: 0; }

/* font-weight: custom-styles.css makes every <mark> bold, which reflowed text while typing. */
#faq-page mark.fq-hl { background: #fff1b8; color: inherit; font-weight: inherit; border-radius: 3px; padding: 0 1px; }

#faq-page .fq-empty {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	padding: 44px 24px; border: 1.5px dashed #d6dde3; border-radius: 16px; background: var(--soft);
}
#faq-page .fq-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--faint); }
#faq-page .fq-empty__title { margin: 16px 0 6px; font: 800 20px/1.3 var(--disp); color: var(--ink); text-transform: none; }
#faq-page .fq-empty__sub { margin: 0 0 18px; font: 400 15px/1.5 var(--body); color: var(--mut); }
#faq-page .fq-btn {
	display: inline-flex; align-items: center; justify-content: center; height: 44px; margin: 0; padding: 0 20px;
	border: 1px solid var(--line); border-radius: 10px; background: #fff;
	font: 700 14px/1 var(--disp); color: var(--ink); cursor: pointer; transition: border-color .2s ease, color .2s ease;
}
#faq-page .fq-btn:hover { border-color: var(--blue); color: var(--blue); }

/* ------------------------------------------------------- more help band -- */
#faq-page .fq-help { background: var(--pale); border-top: 1px solid var(--line2); padding: 64px 0 72px; }
#faq-page .fq-help__head { max-width: 640px; margin: 0 auto 32px; text-align: center; }
#faq-page .fq-help__title { margin: 16px 0 10px; font: 800 32px/1.2 var(--disp); letter-spacing: -.8px; text-transform: none; color: var(--ink); }
#faq-page .fq-help__sub { margin: 0; font: 400 16px/1.5 var(--body); color: var(--mut); }
#faq-page .fq-short { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
#faq-page .fq-scard {
	display: flex; flex-direction: column; min-width: 0;
	padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff;
	color: var(--ink); text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease;
}
#faq-page .fq-scard:hover, #faq-page .fq-scard:focus-visible { border-color: #bcd9ec; box-shadow: 0 12px 30px rgba(60, 151, 203, .12); color: var(--ink); text-decoration: none; }
#faq-page .fq-scard:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#faq-page .fq-scard__body { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; min-width: 0; }
#faq-page .fq-scard__title { font: 800 17px/1.3 var(--disp); color: var(--ink); }
#faq-page .fq-scard__desc { font: 400 14px/1.5 var(--body); color: var(--mut); }
#faq-page .fq-scard__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; font: 700 14px/1.2 var(--disp); color: var(--blue); }
#faq-page .fq-scard__go svg { transition: transform .2s ease; }
#faq-page .fq-scard:hover .fq-scard__go svg { transform: translateX(3px); }

#faq-page .fq-contact {
	display: grid; grid-template-columns: .9fr 2fr; gap: 24px; align-items: center;
	margin-top: 20px; padding: 26px 28px; border: 1px solid var(--line); border-radius: 18px; background: #fff;
}
#faq-page .fq-contact__title { margin: 0 0 6px; font: 800 23px/1.25 var(--disp); color: var(--ink); text-transform: none; }
#faq-page .fq-contact__sub { margin: 0; font: 400 15.5px/1.5 var(--body); color: var(--mut); }
#faq-page .fq-contact__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#faq-page .fq-cact {
	display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; margin: 0;
	padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
	color: var(--ink); text-decoration: none; text-align: left; font: inherit; cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease;
}
#faq-page .fq-cact:hover, #faq-page .fq-cact:focus-visible { border-color: #bcd9ec; color: var(--ink); text-decoration: none; }
#faq-page .fq-cact:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#faq-page .fq-cact__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#faq-page .fq-cact__title { font: 700 15px/1.3 var(--disp); color: var(--ink); }
#faq-page .fq-cact__detail { font: 400 13px/1.35 var(--body); color: var(--mut); overflow-wrap: anywhere; }
#faq-page .fq-cact__chev { display: inline-flex; margin-left: auto; color: var(--faint); transition: transform .2s ease, color .2s ease; }
#faq-page .fq-cact:hover .fq-cact__chev { color: var(--blue); transform: translateX(2px); }

/* Sale bar live (body.bannerAdded): the React chrome does not reserve room for
   the fixed bar, so the hero keeps its padding plus the bar's height
   (56px from 768px up, 54px below). */
@media (min-width: 768px) {
	body.sb-chrome-on.bannerAdded #faq-page .fq-hero { padding-top: 120px; }
}
@media (min-width: 761px) and (max-width: 767px) {
	body.sb-chrome-on.bannerAdded #faq-page .fq-hero { padding-top: 118px; }
}

@media (prefers-reduced-motion: reduce) {
	#faq-page.fq *, #faq-page.fq *::before, #faq-page.fq *::after { transition: none !important; }
}

/* ------------------------------------------------------------- responsive -- */
@media (max-width: 1100px) {
	#faq-page .fq-topics, #faq-page .fq-short { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#faq-page .fq-contact { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 1000px) {
	#faq-page .fq-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 760px) {
	#faq-page .fq-wrap { padding: 0 16px; }
	#faq-page .fq-hero { padding: 36px 0 22px; }
	body.sb-chrome-on.bannerAdded #faq-page .fq-hero { padding-top: 90px; }
	#faq-page h1#contactFormTitle { font-size: 30px; letter-spacing: -.8px; }
	#faq-page .fq-sub { font-size: 16px; }
	#faq-page .fq-search__input { height: 52px; font-size: 16px; padding: 0 50px; }
	#faq-page .fq-search__icon { left: 16px; }
	#faq-page .fq-chip { min-height: 44px; padding: 0 16px; }

	#faq-page .fq-topics { gap: 12px; padding-bottom: 24px; }
	#faq-page .fq-tcard { padding: 14px; }
	#faq-page .fq-tcard .fq-tile { width: 38px; height: 38px; border-radius: 10px; }
	#faq-page .fq-tcard .fq-tile svg { width: 18px; height: 18px; }
	#faq-page .fq-tcard__top { margin-bottom: 10px; }
	#faq-page .fq-count { padding: 3px 8px; font-size: 11px; }
	#faq-page .fq-tcard__name { font-size: 16px; margin-bottom: 0; }
	#faq-page .fq-tcard__prev { display: none; }
	#faq-page .fq-tcard__all { padding-top: 10px; font-size: 13px; }

	/* Topic menu → sticky chip row under the fixed header, edge to edge. */
	#faq-page .fq-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: 48px; }
	#faq-page .fq-menu {
		top: var(--fq-head, 0px); z-index: 20;
		margin: 0 -16px; padding: 10px 0; background: #fff; border-bottom: 1px solid var(--line);
	}
	#faq-page .fq-menu__label { display: none; }
	#faq-page .fq-menu__list {
		flex-direction: row; gap: 8px; padding: 0 16px;
		overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
	}
	#faq-page .fq-menu__list::-webkit-scrollbar { display: none; }
	#faq-page .fq-menu__list li { flex: 0 0 auto; }
	#faq-page .fq-menu__link { min-height: 44px; gap: 8px; padding: 6px 12px 6px 7px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
	#faq-page .fq-menu__link .fq-tile--sm { width: 26px; height: 26px; border-radius: 50%; }
	#faq-page .fq-menu__link .fq-tile--sm svg { width: 14px; height: 14px; }
	#faq-page .fq-menu__name { font-size: 13.5px; overflow: visible; }
	#faq-page .fq-menu__link.is-active { background: var(--pale); border-color: var(--blue); }
	#faq-page .fq-menu__link.is-active::before { display: none; }

	#faq-page .fq-sec { margin-bottom: 32px; }
	#faq-page .fq-sec__head { gap: 12px; margin-bottom: 12px; }
	#faq-page .fq-sec__head .fq-tile--md { width: 36px; height: 36px; border-radius: 10px; }
	#faq-page .fq-sec__title { font-size: 20px; }
	#faq-page .fq-q { padding: 16px; font-size: 16px; gap: 12px; }
	#faq-page .fq-pm { flex-basis: 28px; width: 28px; height: 28px; }
	#faq-page .fq-a__body { padding: 0 16px 20px; font-size: 15.5px; }

	#faq-page .fq-help { padding: 40px 0 48px; }
	#faq-page .fq-help__head { margin-bottom: 22px; }
	#faq-page .fq-help__title { font-size: 24px; }
	#faq-page .fq-short { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	#faq-page .fq-scard { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
	#faq-page .fq-scard__body { margin-top: 0; }
	#faq-page .fq-scard__go { margin: 0 0 0 auto; padding: 0; }
	#faq-page .fq-scard__go > span { display: none; }
	#faq-page .fq-contact { padding: 20px 18px; }
	#faq-page .fq-contact__title { font-size: 20px; }
	#faq-page .fq-contact__actions { grid-template-columns: minmax(0, 1fr); }
}