/* ==========================================================================
   INNER PAGES — "Premium Pills" pass
   --------------------------------------------------------------------------
   Brings About (12), Terms (14), FAQ (57) and the general Agent List (54) in
   line with the pill-card language established elsewhere this session
   (wp-content/mu-plugins/w9-agents/agent-list.css, w9-vk/social-pills.css,
   platform-pills.css, faq-pills.css). Scoped ENTIRELY to body.w9-pillpage
   (added only on these 4 posts by w9-inner-pages.php) so nothing here can
   affect any other page still on the shared w9-site5.php ".s5-*" base layer.
   Must load after agent-list.css (w9-inner-pages.php enqueue dependency), so
   it always wins at equal specificity too.

   Three real, verifiable rendering bugs found in the shared base layer are
   also fixed here (scoped to these 4 pages only — the base file is never
   edited directly, per project convention):
     1. `.s5-grid/.s5-g3/.s5-g4` and standalone `.s5-checks` are raw <ul>
        elements the base file never resets — every card grid and check-list
        on all 4 pages rendered with a native bullet + ~40px browser indent.
     2. `.s5-toc` / `.s5-jump` are raw <ul><li><a> nav lists; the base CSS
        only styles `.elementor-icon-list-item` (a different widget's
        markup), so the Terms "contents" jump-list and the FAQ hero
        category-jump list rendered as completely unstyled bullet lists.
     3. `.s5-chip` (the icon badge used at the top of every `.s5-card` /
        `.s5-linkcard` / `.s5-checkcard` on all 4 pages) has no CSS anywhere
        in the codebase — every card's icon rendered as a bare, tiny,
        unstyled Font Awesome glyph instead of the intended gradient chip.
   ========================================================================== */

/* ---------- SECTION-GAP FIX ----------
   Same root cause already diagnosed + fixed for the 5 agent-tier pages
   (w9-agents/agent-pages.css): the shared .s5-sec / .s5-final rules force
   min-height:100vh / 72vh with justify-content:center, so a short section
   (a 3-card grid, one accordion group) gets padded out to (near-)full-
   viewport height regardless of how little content it holds. Un-forcing the
   height makes every section on these 4 pages hug its own content instead.
   .s5-ihero already carries min-height:0 in the base file (unlike the
   agent-tier pages before their fix), so no min-height override is needed
   here — but its PADDING was never reduced, which this comment's own claim
   of "no hero override needed" missed: the base file's
   `padding:clamp(90px,10vh,124px) 24px clamp(36px,4vh,54px)` clamps to a
   flat 90px top on any phone (10vh is well under the 90px floor below
   ~900px viewport height), a large dead gap between the header and the
   eyebrow badge on every one of these 3 pages. Same fix already applied to
   the agent-tier pages' hero (agent-pages.css) — same values, reused here
   for consistency rather than inventing new numbers. */
body.w9-pillpage .s5-ihero {
	padding: clamp(26px, 3.6vh, 40px) 24px clamp(18px, 2.4vh, 26px) !important;
}
@media (max-width: 640px) {
	body.w9-pillpage .s5-ihero { padding: 22px 18px 18px !important; }
}
body.w9-pillpage .s5-sec { min-height: 0 !important; }
/* .s5-final keeps a small explicit floor rather than 0 — see agent-pages.css
   for the min-height:0 + overflow:hidden flex-collapse explanation; same fix. */
body.w9-pillpage .s5-final { min-height: 260px !important; }
@media (min-width: 901px) {
	body.w9-pillpage .s5-sec {
		padding-top: clamp(46px, 5.4vh, 68px) !important;
		padding-bottom: clamp(46px, 5.4vh, 68px) !important;
	}
	body.w9-pillpage .s5-final {
		padding-top: clamp(44px, 5vh, 64px) !important;
		padding-bottom: clamp(44px, 5vh, 64px) !important;
	}
}
@media (max-width: 900px) {
	/* base file already resets .s5-sec to padding:56px 20px at this width */
	body.w9-pillpage .s5-final { padding: 40px 20px !important; }
}

/* ---------- RAW-<UL> BULLET/INDENT FIX ----------
   Bug #1 above. Same fix already applied for the agent-tier pages, extended
   here to the raw .s5-checks lists these 4 pages also use standalone
   (outside .s5-prose, which is the only context the base file resets). */
body.w9-pillpage .s5-grid,
body.w9-pillpage .s5-g3,
body.w9-pillpage .s5-g4,
body.w9-pillpage .s5-whygrid,
body.w9-pillpage .s5-two { list-style: none !important; padding: 0 !important; }

body.w9-pillpage ul.s5-checks {
	list-style: none !important;
	padding: 0 !important;
	margin: 16px 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
body.w9-pillpage ul.s5-checks li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--s5-bn);
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--s5-mid);
}
body.w9-pillpage ul.s5-checks li > i { flex: none; margin-top: 3px; color: var(--s5-gold); font-size: 14px; }
/* Terms' "read this first" yes/no checklist (.s5-chk--yes/.s5-chk--no) lost
   its red/gold distinction to the base file's blanket `ul.s5-checks li > i`
   gold rule — restore it (higher specificity here wins without !important). */
/* !important: needed here — the generic `ul.s5-checks li > i` gold rule
   just above (and its base-file twin) carries MORE type selectors
   (ul/li/i vs body/i here), which outranks this class-based override on
   specificity despite matching the same number of classes. */
body.w9-pillpage .s5-chk--no i { color: #DC5B4B !important; }
body.w9-pillpage .s5-chk--yes i { color: var(--s5-gold-3) !important; }

body.w9-pillpage .s5-disc-sub { margin: 6px 0 0; font-family: var(--s5-bn); font-size: 13.5px; color: var(--s5-dim); font-style: italic; }

/* ---------- ICON CHIP FIX (bug #3) ----------
   `.s5-chip` — the leading icon badge on every .s5-card/.s5-linkcard/
   .s5-checkcard/.s5-agt-grid item across all 4 pages — has zero CSS in the
   codebase (only `.s5-tier .s5-chip`, a different, unused-here context).
   Gives it the gradient-chip treatment the design system doc-comment in
   w9-site5.php already promises ("a gradient icon chip"), sized to double as
   this pass's pill motif (fully circular, not the base .elementor-icon's
   18px squircle). */
body.w9-pillpage .s5-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: var(--s5-grad);
	color: #1A0F02;
	font-size: 19px;
	box-shadow: var(--s5-glow);
	margin-bottom: 14px;
	flex: none;
}

/* ==========================================================================
   CARD FAMILY -> "soft pill" premium shell
   --------------------------------------------------------------------------
   .s5-card / .s5-linkcard / .s5-paycard / .s5-agt-grid li / .s5-steps li:
   icon-chip + heading + a 2-4 line paragraph — too much copy to read as a
   true 999px capsule without the "stretched oval" look flagged when this
   card language was first designed (see agent-list.css / faq-pills.css
   comments), so these get a large-but-not-fully-round "soft pill" radius
   instead — same compromise the FAQ accordion's OPEN state already uses.
   Same glass-gradient + gold ambient-glow + lift-on-hover family as every
   other pill component this session (.w9a-card, .vk-sp-pill, .vk-pp-pill).
   ========================================================================== */
body.w9-pillpage .s5-card,
body.w9-pillpage .s5-linkcard,
body.w9-pillpage .s5-paycard {
	position: relative;
	isolation: isolate;
	background: linear-gradient(135deg, rgba(255, 255, 255, .96) 0%, rgba(255, 252, 240, .9) 100%);
	border: 1px solid var(--s5-line);
	border-radius: 32px;
	box-shadow: 0 8px 22px rgba(30, 27, 20, .07), 0 1px 0 rgba(255, 255, 255, .7) inset;
	overflow: hidden;
	transition: transform .4s cubic-bezier(.2, .7, .15, 1), box-shadow .4s ease, border-color .4s ease;
}
body.w9-pillpage .s5-card::before,
body.w9-pillpage .s5-linkcard::before,
body.w9-pillpage .s5-paycard::before {
	content: "";
	position: absolute;
	inset: -40% -10%;
	background: radial-gradient(closest-side, var(--s5-gold-2), transparent 72%);
	opacity: .06;
	z-index: -1;
	filter: blur(26px);
	pointer-events: none;
	transition: opacity .5s ease;
}
body.w9-pillpage .s5-card:hover,
body.w9-pillpage .s5-linkcard:hover,
body.w9-pillpage .s5-paycard:hover {
	transform: translateY(-5px);
	border-color: var(--s5-line-gold);
	box-shadow: var(--s5-shadow-hi);
}
body.w9-pillpage .s5-card:hover::before,
body.w9-pillpage .s5-linkcard:hover::before,
body.w9-pillpage .s5-paycard:hover::before { opacity: .16; }

/* nested trust-panel cards (inside .s5-agt) — lighter treatment (no ambient
   glow pseudo, thinner border) so a card-inside-a-pill doesn't compete with
   its own parent's glow. */
body.w9-pillpage .s5-agt-grid li {
	background: linear-gradient(135deg, rgba(255, 255, 255, .9) 0%, rgba(255, 252, 240, .85) 100%);
	border: 1px solid var(--s5-line);
	border-radius: 28px;
	box-shadow: 0 4px 14px rgba(30, 27, 20, .05);
	transition: transform .35s ease, box-shadow .35s ease;
}
body.w9-pillpage .s5-agt-grid li:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(200, 134, 11, .16); }
body.w9-pillpage .s5-agt-grid i {
	border-radius: 999px;
	width: 44px; height: 44px;
}

/* numbered step cards — same soft-pill shell, keep the existing 999px
   number badge (.s5-step-n) as-is, already part of the pill family. */
body.w9-pillpage .s5-steps li {
	position: relative;
	isolation: isolate;
	background: linear-gradient(135deg, rgba(255, 255, 255, .96) 0%, rgba(255, 252, 240, .9) 100%);
	border: 1px solid var(--s5-line);
	border-radius: 32px;
	box-shadow: 0 8px 22px rgba(30, 27, 20, .07), 0 1px 0 rgba(255, 255, 255, .7) inset;
	transition: transform .4s cubic-bezier(.2, .7, .15, 1), box-shadow .4s ease, border-color .4s ease;
}
body.w9-pillpage .s5-steps li:hover { transform: translateY(-5px); border-color: var(--s5-line-gold); box-shadow: var(--s5-shadow-hi); }

/* `.s5-cardp` — a plain paragraph inside .s5-checkcard that the base file's
   grouped card-shell selector (line ~392, w9-site5.php) accidentally boxes
   a second time (white-on-white nested card with its own shadow, visible on
   close inspection on the Agent List "How to Become an Agent" split). Strip
   the inner box back to plain text now that .s5-checkcard itself carries the
   shell. */
body.w9-pillpage .s5-cardp {
	background: transparent;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	margin: 4px 0 0;
	font-family: var(--s5-bn);
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--s5-mid);
}

/* ==========================================================================
   LARGER PANELS -> soft-pill glass shell
   --------------------------------------------------------------------------
   .s5-prose--card (About's intro article), .s5-checkcard (About/Agent-List's
   asides), .s5-agt / .s5-disc ("Most players start with an agent" / Terms'
   "read this first" box) — too much content (paragraphs, nested lists,
   button rows) for even the soft-pill card radius above; a larger 36px
   radius keeps them reading as part of the same glass/gradient/gold-glow
   family without looking like an accident.
   ========================================================================== */
body.w9-pillpage .s5-prose--card,
body.w9-pillpage .s5-checkcard,
body.w9-pillpage .s5-agt {
	position: relative;
	isolation: isolate;
	background: linear-gradient(135deg, rgba(255, 255, 255, .97) 0%, rgba(255, 252, 240, .92) 100%);
	border: 1px solid var(--s5-line);
	border-radius: 36px;
	box-shadow: 0 10px 28px rgba(30, 27, 20, .08), 0 1px 0 rgba(255, 255, 255, .7) inset;
}
body.w9-pillpage .s5-prose--card::before,
body.w9-pillpage .s5-checkcard::before,
body.w9-pillpage .s5-agt::before {
	content: "";
	position: absolute;
	inset: -30% -8%;
	background: radial-gradient(closest-side, var(--s5-gold-2), transparent 72%);
	opacity: .05;
	z-index: -1;
	filter: blur(30px);
	pointer-events: none;
}

/* gold-tinted callout boxes (.s5-note / .s5-agt-note) — keep their
   intentional amber-tint background (differentiates "note" from "card"),
   just bring the radius/border/shadow in line with the rest of the pass. */
body.w9-pillpage .s5-note,
body.w9-pillpage .s5-agt-note {
	border-radius: 28px;
	border: 1px solid var(--s5-line-gold);
	box-shadow: 0 6px 18px rgba(200, 134, 11, .10);
}

/* ==========================================================================
   NAV PILLS — .s5-toc (Terms contents) / .s5-jump (FAQ hero category jump)
   --------------------------------------------------------------------------
   Bug #2 above: these are raw <ul><li><a> lists the base CSS never targets
   (it only styles `.elementor-icon-list-item`, a different widget's DOM).
   Genuinely new styling, not just an override — single-line link content,
   so a true 999px capsule (same family as .w9a-toggle / the FAQ accordion's
   CLOSED state) is the right shape here, no "stretched oval" risk.
   ========================================================================== */
body.w9-pillpage .s5-toc,
body.w9-pillpage .s5-jump {
	list-style: none !important;
	padding: 0 !important;
	margin: 20px 0 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
body.w9-pillpage .s5-toc li,
body.w9-pillpage .s5-jump li { margin: 0; }
body.w9-pillpage .s5-toc li a,
body.w9-pillpage .s5-jump li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 18px 13px 16px;
	background: linear-gradient(135deg, rgba(255, 255, 255, .95) 0%, rgba(255, 252, 240, .9) 100%);
	border: 1px solid var(--s5-line);
	border-radius: 999px;
	box-shadow: var(--s5-shadow);
	text-decoration: none;
	font-family: var(--s5-en);
	font-size: 14px;
	font-weight: 600;
	color: var(--s5-ink);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body.w9-pillpage .s5-toc li a:hover,
body.w9-pillpage .s5-jump li a:hover {
	transform: translateY(-2px);
	box-shadow: var(--s5-glow);
	border-color: var(--s5-line-gold);
}
/* Terms .s5-toc: <b>01.</b> <span>Eligibility</span><i class="fa-angle-right"> */
body.w9-pillpage .s5-toc li a b {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(200, 134, 11, .10);
	border: 1px solid rgba(200, 134, 11, .22);
	color: var(--s5-gold-3);
	font-family: var(--s5-en);
	font-size: 11px;
	font-weight: 800;
}
body.w9-pillpage .s5-toc li a span { flex: 1 1 auto; }
body.w9-pillpage .s5-toc li a i { flex: none; color: var(--s5-gold); font-size: 11px; transition: transform .3s ease; }
body.w9-pillpage .s5-toc li a:hover i { transform: translateX(3px); }
/* FAQ .s5-jump: <i class="fa-user-circle"></i>Account and KYC (leading icon, plain text) */
body.w9-pillpage .s5-jump li a i {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(200, 134, 11, .10);
	color: var(--s5-gold-3);
	font-size: 12px;
}
@media (max-width: 767px) {
	body.w9-pillpage .s5-toc,
	body.w9-pillpage .s5-jump { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ACCORDION -> premium pills  (.s5-faq)
   --------------------------------------------------------------------------
   Re-skins the existing native Elementor Accordion widget used for the
   Terms body (11 sections), every FAQ-page category (57) and the Agent
   List's own mini-FAQ (54) into the same fully-rounded pill rows already
   built for the homepage's FAQ (w9-vk/faq-pills.css, scoped to
   body.vk .vk-faq — a different container, untouched by this file). Kept as
   a real accordion widget on purpose (unchanged markup/JS/ARIA): free
   Elementor's own frontend.js drives open/close and keyboard operation
   already; only presentation changes here. Uses this site's own --s5-*
   tokens (not --vk-*) throughout.
   ========================================================================== */
body.w9-pillpage .s5-faq .elementor-accordion {
	display: flex;
	flex-direction: column;
	gap: 14px;
	counter-reset: s5faq;
}

body.w9-pillpage .s5-faq .elementor-accordion-item {
	position: relative;
	isolation: isolate;
	background: linear-gradient(135deg, rgba(255, 255, 255, .96) 0%, rgba(255, 252, 240, .9) 100%) !important;
	border: 1px solid var(--s5-line) !important;
	border-radius: 999px;
	overflow: hidden;
	box-shadow: var(--s5-shadow);
	transition: border-radius .45s cubic-bezier(.2, .7, .15, 1), border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.2, .7, .15, 1);
}
body.w9-pillpage .s5-faq .elementor-accordion-item::after {
	content: "";
	position: absolute;
	inset: -45% -6%;
	background: radial-gradient(closest-side, var(--s5-gold-2), transparent 72%);
	opacity: .05;
	z-index: -1;
	filter: blur(28px);
	pointer-events: none;
	transition: opacity .5s ease;
}
body.w9-pillpage .s5-faq .elementor-accordion-item:hover {
	border-color: rgba(200, 134, 11, .38) !important;
	box-shadow: var(--s5-shadow-hi);
}
body.w9-pillpage .s5-faq .elementor-accordion-item:not(:has(.elementor-tab-title.elementor-active)):hover { transform: translateY(-3px); }
body.w9-pillpage .s5-faq .elementor-accordion-item:hover::after,
body.w9-pillpage .s5-faq .elementor-accordion-item:has(.elementor-tab-title.elementor-active)::after { opacity: .16; }

/* open state: settle into a soft-pill radius instead of a stretched oval */
body.w9-pillpage .s5-faq .elementor-accordion-item:has(.elementor-tab-title.elementor-active) {
	border-radius: 28px;
	border-color: rgba(200, 134, 11, .4) !important;
	box-shadow: var(--s5-shadow-hi), 0 0 0 1px rgba(200, 134, 11, .10) inset;
}

body.w9-pillpage .s5-faq .elementor-tab-title {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 17px 22px 17px 16px !important;
	border: 0 !important;
	margin: 0;
	background: transparent !important;
	cursor: pointer;
	outline: none;
	font-family: var(--s5-bn);
	font-size: 16px;
	font-weight: 700;
	color: var(--s5-ink) !important;
	transition: color .3s ease;
}
body.w9-pillpage .s5-faq .elementor-tab-title a { color: inherit; text-decoration: none; }
body.w9-pillpage .s5-faq .elementor-tab-title:hover,
body.w9-pillpage .s5-faq .elementor-tab-title.elementor-active { color: var(--s5-gold-3) !important; }
body.w9-pillpage .s5-faq .elementor-tab-title:focus-within { box-shadow: inset 0 0 0 2.5px var(--s5-gold); }

/* numbered badge — CSS counter, resets per accordion widget instance (each
   FAQ category / the Terms body is its own widget, so each restarts at 01 —
   matches the Terms .s5-toc's own manual "01./02./…" numbering exactly). */
body.w9-pillpage .s5-faq .elementor-tab-title::before {
	counter-increment: s5faq;
	content: counter(s5faq, decimal-leading-zero);
	order: 0;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(200, 134, 11, .10);
	border: 1px solid rgba(200, 134, 11, .22);
	color: var(--s5-gold-3);
	font-family: var(--s5-en);
	font-size: 12px;
	font-weight: 800;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}
body.w9-pillpage .s5-faq .elementor-tab-title.elementor-active::before {
	background: var(--s5-grad);
	border-color: transparent;
	color: #FFFFFF;
}
/* Terms' 11 answers (tm0036) author their own numbering inside the title —
   `<span class="s5-tanchor" id="trm-…"></span><span class="s5-tnum">02</span>
   <span class="s5-ttext">…</span>` — so the TOC's #trm-… anchors have
   somewhere to land. Left entirely unstyled before this pass (rendered as
   plain "02Your Account…" run-together text); the counter-badge above would
   now duplicate it ("02" chip + "02Your Account…" text). Suppress the
   counter badge on these items and turn the existing .s5-tnum span into the
   same-looking badge instead, so numbering shows exactly once. */
body.w9-pillpage .s5-faq .elementor-tab-title:has(.s5-tnum)::before { content: none; }
body.w9-pillpage .s5-faq .elementor-accordion-title:has(.s5-tnum) { display: flex; align-items: center; gap: 12px; }
body.w9-pillpage .s5-faq .s5-tanchor { display: none; }
body.w9-pillpage .s5-faq .s5-tnum {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(200, 134, 11, .10);
	border: 1px solid rgba(200, 134, 11, .22);
	color: var(--s5-gold-3);
	font-family: var(--s5-en);
	font-size: 11px;
	font-weight: 800;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}
body.w9-pillpage .s5-faq .elementor-tab-title.elementor-active .s5-tnum {
	background: var(--s5-grad);
	border-color: transparent;
	color: #FFFFFF;
}
body.w9-pillpage .s5-faq .s5-ttext { flex: 1 1 auto; }

body.w9-pillpage .s5-faq .elementor-accordion-title {
	order: 2;
	flex: 1 1 auto;
	min-width: 0;
	color: inherit !important;
	font-size: 16px;
	line-height: 1.4;
}

body.w9-pillpage .s5-faq .elementor-accordion-icon.elementor-accordion-icon-left {
	order: 3;
	float: none !important;
	margin: 0 0 0 auto;
	flex: none;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(30, 27, 20, .05);
	border: 1px solid rgba(30, 27, 20, .12);
	color: var(--s5-ink);
	transition: transform .45s cubic-bezier(.2, .7, .15, 1), background .35s ease, color .35s ease, border-color .35s ease;
}
body.w9-pillpage .s5-faq .elementor-tab-title:hover .elementor-accordion-icon,
body.w9-pillpage .s5-faq .elementor-tab-title.elementor-active .elementor-accordion-icon {
	background: var(--s5-grad);
	border-color: transparent;
	color: #FFFFFF;
}
body.w9-pillpage .s5-faq .elementor-tab-title.elementor-active .elementor-accordion-icon { transform: rotate(180deg); }
body.w9-pillpage .s5-faq .elementor-accordion-icon svg { width: 13px; height: 13px; display: block; }
/* Elementor's own generated widget CSS (post-{id}.css) sets the accordion
   icon's SVG fill directly from the Kit's global accent colour —
   `.elementor-active .elementor-accordion-icon svg { fill: var(--e-global-color-accent) }`
   — which happens to be the exact same gold as this pill's own active-state
   background (line 503 above), so the "−" icon was rendering gold-on-gold:
   present in the DOM, correctly swapped to the minus icon, just invisible.
   `color:#FFFFFF` above only affects text/currentColor-based icons; SVG
   `fill` needs its own explicit override to actually win over Elementor's
   rule. */
body.w9-pillpage .s5-faq .elementor-tab-title:hover .elementor-accordion-icon svg,
body.w9-pillpage .s5-faq .elementor-tab-title.elementor-active .elementor-accordion-icon svg { fill: #FFFFFF !important; }

body.w9-pillpage .s5-faq .elementor-tab-content {
	padding: 0 24px 20px 66px !important;
	border: 0 !important;
	background: transparent !important;
	font-family: var(--s5-bn);
	font-size: 15px;
	line-height: 1.85;
	color: var(--s5-mid);
	animation: s5faqFade .4s ease both;
}
body.w9-pillpage .s5-faq .elementor-tab-content p { margin: 0 0 10px; color: var(--s5-mid); }
body.w9-pillpage .s5-faq .elementor-tab-content p:last-child { margin-bottom: 0; }
body.w9-pillpage .s5-faq .elementor-tab-content strong { color: var(--s5-ink); }
body.w9-pillpage .s5-faq .elementor-tab-content a { color: var(--s5-gold-3); text-decoration: underline; text-underline-offset: 3px; }
/* Terms' accordion answers (tm0036) also embed a raw <h3> sub-heading inside
   a few tabs — style it to sit cleanly in the new 66px-indented column. */
body.w9-pillpage .s5-faq .elementor-tab-content h3 { font-family: var(--s5-en); font-size: 16px; font-weight: 600; color: var(--s5-ink); margin: 14px 0 8px; }
body.w9-pillpage .s5-faq .elementor-tab-content h3:first-child { margin-top: 0; }

@keyframes s5faqFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
	body.w9-pillpage .s5-faq .elementor-tab-title { padding: 15px 18px 15px 14px !important; gap: 13px; font-size: 15px; }
	body.w9-pillpage .s5-faq .elementor-tab-title::before { width: 28px; height: 28px; font-size: 11px; }
	body.w9-pillpage .s5-faq .elementor-accordion-icon.elementor-accordion-icon-left { width: 34px; height: 34px; }
	body.w9-pillpage .s5-faq .elementor-tab-content { padding: 0 20px 18px 57px !important; font-size: 14.5px; }
}
@media (max-width: 560px) {
	body.w9-pillpage .s5-faq .elementor-tab-title { gap: 11px; padding: 14px 16px 14px 12px !important; }
	body.w9-pillpage .s5-faq .elementor-tab-title::before { width: 25px; height: 25px; font-size: 10px; }
	body.w9-pillpage .s5-faq .elementor-accordion-icon.elementor-accordion-icon-left { width: 30px; height: 30px; }
	body.w9-pillpage .s5-faq .elementor-accordion-icon svg { width: 11px; height: 11px; }
	body.w9-pillpage .s5-faq .elementor-tab-content { padding: 0 16px 16px 12px !important; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	body.w9-pillpage .s5-faq .elementor-accordion-item,
	body.w9-pillpage .s5-faq .elementor-accordion-icon.elementor-accordion-icon-left,
	body.w9-pillpage .s5-faq .elementor-tab-title { transition: none !important; }
	body.w9-pillpage .s5-faq .elementor-tab-content { animation: none !important; }
}

/* ==========================================================================
   FAQ HERO STAT LINE (.s5-faqstat) — Bengali pass (2026-07)
   --------------------------------------------------------------------------
   A raw <p><span><b>N</b> label</span>...</p> line under the FAQ hero lede,
   same "small pill stat" language as the blog listing's .w9-herostat (that
   class lives in blog-premium.css, scoped to the blog page only — this is
   its own copy on the pages-pills.css / w9-pillpage layer so the two page
   families never share a stylesheet dependency).
   ========================================================================== */
body.w9-pillpage .s5-faqstat {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 0;
}
body.w9-pillpage .s5-faqstat span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 18px;
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: var(--s5-shadow);
	font-family: var(--s5-bn);
	font-size: 13px;
	font-weight: 600;
	color: var(--s5-mid);
}
body.w9-pillpage .s5-faqstat span b {
	font-family: var(--s5-en);
	font-size: 15px;
	font-weight: 800;
	color: var(--s5-gold-3);
}

/* ==========================================================================
   MOBILE CENTERING — "Super Premium" pass (2026-07)
   --------------------------------------------------------------------------
   Desktop on these 3 pages is DELIBERATELY left-aligned for every section
   head (`.s5-eyebrow` / `.s5-sechead` / the hero h1 — the base file never
   sets text-align on any of them, only `.s5-lede-c` section leads centre by
   design at every width) and every card's internal copy (`.s5-card`,
   `.s5-linkcard`, `.s5-paycard`, `.s5-checkcard`, `.s5-agt-grid`, `.s5-steps`
   — none of it is centred in the base file either). That's correct on a
   wide viewport where a left-aligned column reads as intentional editorial
   layout, but on a narrow phone screen a left-hugging heading/card next to
   large empty right-hand margin reads as unfinished, not premium. Everything
   below is scoped to max-width:767px ONLY — desktop layout is untouched.
   Same "cap max-width + margin:auto" technique already used for
   `.s5-herometa` (w9-agents/agent-pages.css) and the blog hero
   (w9-vk/blog-premium.css, body.page-id-51) elsewhere in this project, so a
   short centred line doesn't leave an odd stretch of blank side padding.

   DELIBERATELY LEFT ALONE (readability, not an oversight — see report):
     - `.s5-faq .elementor-tab-title` (the FAQ/Terms accordion Q row) — the
       number badge + question text + toggle icon must stay left-to-right,
       exactly like a normal list row; centring it would put the toggle icon
       nowhere near a thumb's natural tap position.
     - `.s5-faq .elementor-tab-content p` (every FAQ + Terms accordion
       ANSWER — multi-sentence prose in a 66px-indented column) and
       `.s5-faq .elementor-tab-content h3` (the few embedded sub-headings
       inside those answers) — centring 2–4 lines of running prose under a
       left-indented number badge reads worse, not better, on a phone.
     - `.s5-prose--card p` / `.s5-prose p` (About's "Made for Bangladeshi
       bettors…" intro article, Terms' "not legal advice" disclaimer body) —
       same multi-paragraph running-prose call. Their own `h3` headings ARE
       centred below, so the block still reads as deliberately centred
       overall, just not mid-sentence.
     - `.s5-note p` on About's Safety section (5-sentence responsible-play
       paragraph) — same call; contrast with `.s5-note--vault p` just below,
       which is 2 sentences and reads fine centred (same length class as an
       already-always-centred `.s5-lede-c` section lead).
   ========================================================================== */
@media (max-width: 767px) {
	/* section eyebrow badge + section heading (every `.s5-head` block, on
	   both pages, plus the hero's own h1, which carries no `.s5-sechead`
	   class of its own). `.s5-lede-c` leads are already centred at every
	   width by the base file — nothing to add for them here. */
	body.w9-pillpage .s5-eyebrow,
	body.w9-pillpage .s5-sechead,
	body.w9-pillpage .s5-ihero h1.elementor-heading-title {
		text-align: center;
	}

	/* hero's plain `.s5-lede` (not `.s5-lede-c`) — every other lead on
	   these pages is already centred; only the un-suffixed hero one isn't. */
	body.w9-pillpage .s5-lede p {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	/* FAQ hero stat line ("৪৬ প্রশ্নের সরাসরি উত্তর · ৮ ক্যাটাগরিতে
	   সাজানো") — a flex row with no justify-content of its own. */
	body.w9-pillpage .s5-faqstat { justify-content: center; }

	/* NOTE: `.s5-cta`/`.s5-hdr-cta` button rows on these pages all carry
	   `.s5-cta--c` already (hero + every closing CTA), and `.s5-cta--c{
	   justify-content:center }` in the base file is unconditional — already
	   centred at every width, nothing to add here. Likewise `.s5-final`
	   (the page-bottom CTA container on both About and Terms) is already
	   fully centred at every width by the base file. `.s5-jump`/`.s5-toc`
	   already collapse to a single full-width column at this exact
	   breakpoint (existing rule above) — a 1-column list has no "left vs
	   centred" reading left to fix. */

	/* card family — chip + heading + copy centred as one unit instead of
	   hugging the card's left edge. */
	body.w9-pillpage .s5-card,
	body.w9-pillpage .s5-linkcard,
	body.w9-pillpage .s5-paycard,
	body.w9-pillpage .s5-checkcard,
	body.w9-pillpage .s5-agt-grid li,
	body.w9-pillpage .s5-steps li {
		text-align: center;
	}
	body.w9-pillpage .s5-card p,
	body.w9-pillpage .s5-agt-grid p,
	body.w9-pillpage .s5-steps p {
		margin-left: auto;
		margin-right: auto;
	}
	/* payment-method logos (bKash/Nagad/Rocket) — the `<img>` sits inside a
	   plain block-level `.s5-paylogo` div with no alignment of its own. */
	body.w9-pillpage .s5-paylogo { text-align: center; }

	/* checklist rows (`.s5-checks`, incl. the Terms yes/no `--split`
	   variant) sit inside now-centred cards/panels and would otherwise
	   inherit centred text via cascade — keep each row's own icon-then-text
	   reading order intact (same call as the accordion Q row), just centre
	   the row itself as a block within the now-centred card instead of
	   letting it hug the left edge. */
	body.w9-pillpage ul.s5-checks li,
	body.w9-pillpage .s5-checks--split li {
		justify-content: center;
		text-align: left;
	}

	/* panel/callout label rows + short headings — `.s5-agt` (About's
	   "Most Players Start With an Agent", Terms' "not legal advice" disc
	   panel share the same base class) and `.s5-note--vault` (About's
	   "Deal only with an agent on the official list" box). */
	body.w9-pillpage .s5-sb-head { justify-content: center; }
	body.w9-pillpage .s5-agt > h3,
	body.w9-pillpage .s5-prose--card h3,
	body.w9-pillpage .s5-note h4,
	body.w9-pillpage .s5-disc-sub {
		text-align: center;
	}
	/* `.s5-agt`'s own short intro paragraph (About: 2 sentences on what an
	   agent does; not the long `.s5-prose` disclaimer body, which is left
	   alone above) and the vault note's short 2-sentence body — both close
	   in length to an already-always-centred `.s5-lede-c` lead, so the same
	   treatment reads consistent rather than arbitrary. */
	body.w9-pillpage .s5-agt > p,
	body.w9-pillpage .s5-note--vault p {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		max-width: 48ch;
	}
	body.w9-pillpage .s5-note-lock { text-align: center; }
	body.w9-pillpage .s5-note-acts { justify-content: center; }
}