/* Prime Peptides — FAQ lane (page 56, /faq/).
   =========================================================================
   PP-EXT (2026-08-28). The page body was rebuilt as a native WordPress
   adaptation of the supplied Claude FAQ design (.pp-faq-v3). Loaded by
   pp-redesign-loader.php for that one page only, AFTER pp-compat and after
   pp-pages, so the chain is

     pp-tokens -> pp-site-scoped -> pp-compat -> pp-pages -> pp-faq

   and this lane wins on source order without needing !important.
   pp-pages.css is unmodified and keeps owning the document shell.

   SCOPE CONTRACT (identical to pp-quality.css)
   - Every selector in this file starts `.pp-site .pp-faq-v3`. There is no
     :root, no bare element selector, no global class, no @import, no
     !important, no @keyframes and no external dependency. Nothing here can
     match outside the FAQ page body.
   - Colour, radius, shadow, easing, duration and the mono face come from the
     --pp-* tokens declared in pp-tokens.css. The type SCALE (px sizes and
     tracking) is local to this lane: the token file ships no type scale, and
     these values are the ones the supplied design was drawn at.
   - Two lane-local custom properties are declared ON `.pp-faq-v3` (never on
     :root) for the two translucent-on-navy fills the token set has no name
     for, plus three geometry values the media queries re-point.

   OLD SURFACE
   The legacy body used `.pp-faq-v2` with `.pp-faq-hero`, `.pp-faq-searchbar`,
   `.pp-faq-topics`, `.pp-faq-layout`, `.pp-faq-aside`, `.pp-faq-cta`,
   `.pp-page-details` and the `.pp-page-*` shell classes. Those names are
   styled by pp-pages.css AND by the sitewide custom_css post (a long
   `body.page-id-56 ...` block that this task may not edit). The rebuilt body
   reuses NONE of them -- the root is `.pp-faq-v3` and every child is
   `.pp-faq3-*` -- so no legacy declaration can reach the new markup and no
   global sheet had to be touched to get rid of it.

   TYPE
   The design is set in Manrope. Manrope is already self-hosted by
   pp-tokens.css (variable, 200-800, latin) for the product-tile price
   register, so the lane names it directly with --pp-font-sans as the
   fallback. No font is bundled, imported or copied out of the design export;
   the export ships no image asset, so none is imported either.

   MEASURE (why the numbers are the design's numbers)
   The template wraps post content in `.pp-shell` -- max-width 1440px,
   padding-inline var(--pp-gutter) = clamp(20px,5.45vw,88px). At a 1440px
   viewport the gutter resolves to 78.5px, so the shell content box is
   ~1283px. `.pp-faq3-body` is capped at the design's 1104px and centred in
   it, which puts the category rail's left edge at 168px and the accordion
   column's right edge at 1272px -- the design's own 1440px composition,
   reproduced exactly (rail 240 + gap 48 + column 816 = 1104).

   DEPARTURES, recorded not hidden
     F3-D1  HERO BLEED. The design's hero is a full-bleed band, but the body
            renders INSIDE .pp-shell. The hero therefore negates the shell
            gutter (margin-inline:calc(var(--pp-gutter)*-1)) and restates it
            as its own padding. That reaches the viewport edge at every
            width up to 1440px and stops at the site's own maximum measure
            above it -- the same edge the header pill and the footer shell
            use. The alternative, margin-inline:calc(50% - 50vw), was
            rejected: 100vw includes the classic Windows scrollbar and would
            push a horizontal scrollbar, which this lane must never do.
     F3-D2  CONTRAST. The design sets the section question-count and the rail
            numerals at #8d97ad, which is ~2.6:1 on white and fails WCAG 2.2
            SC 1.4.3. Both take --pp-text-muted (#6b7789, ~4.9:1) instead --
            the same hero-contrast correction pp-pages.css rows 122/132
            already record for this design system. Nothing else moves.
     F3-D3  HAIRLINE. The design's section rule is #4a90f5, which is not a
            token. It takes --pp-blue-400 (#4fa3ff), the nearest existing
            token, rather than introducing a hex literal into a lane that is
            otherwise 100% token-driven (pp-quality.css ships zero hex
            literals; this file matches that).
     F3-D4  NO-JS. Collapsed panels are collapsed in CSS, not by a JS-applied
            class, so the page paints in its designed state with no flash of
            nine open answers. With JS off the answers are present in the DOM
            (and findable by browser find-in-page is NOT guaranteed, since
            the panel is visibility:hidden) but not expandable. The design is
            a scripted accordion; this lane reproduces it.

   BREAKPOINTS (the system's own 1100/900/700 axes, plus 460 and 360)
     1100  rail and gap narrow; the 1104px measure stops being reachable
      900  body stacks; the sticky rail becomes a horizontal chip row
      700  20px gutters; tighter rhythm; the rail returns to a VERTICAL list
      460  type eases down; search still inline; cards still 2-up
     <360  the last resort: search stacks, cards go 1-up

   At 390px the surface deliberately keeps the reference composition -- the
   search input and its button stay on one row, the category rail is the
   design's vertical label/count list, and the two utility cards stay in two
   equal tracks. Nothing stacks until below 360px.

   Verified with headless Chrome at 1440 / 1024 / 768 / 390 / 320:
   documentElement.scrollWidth equals the viewport width at every one, so no
   width in this lane produces a horizontal scrollbar.                      */

/* ============ 1. LANE SHELL ============ */
.pp-site .pp-faq-v3{
	/* Lane-local, declared on the lane root -- never on :root. The token set
	   names no translucent-on-navy fill, and these two are the design's. */
	--pp-faq-field:rgba(255,255,255,.06);
	--pp-faq-field-focus:rgba(255,255,255,.1);
	/* Geometry the media queries re-point in one place. */
	--pp-faq-rail:240px;
	--pp-faq-gap:48px;
	--pp-faq-measure:1104px;

	margin:0;
	font-family:"Manrope",var(--pp-font-sans);
	font-size:15px;
	line-height:1.55;
	color:var(--pp-text-body);
	text-wrap:pretty;
	-webkit-font-smoothing:antialiased;
}
.pp-site .pp-faq-v3 *,
.pp-site .pp-faq-v3 *::before,
.pp-site .pp-faq-v3 *::after{box-sizing:border-box}

/* Visually-hidden label for the search field. */
.pp-site .pp-faq-v3 .pp-faq3-sr{
	position:absolute;
	width:1px;height:1px;
	margin:-1px;padding:0;
	overflow:hidden;
	clip-path:inset(50%);
	white-space:nowrap;
	border:0;
}

/* ============ 2. HERO (departure F3-D1) ============ */
.pp-site .pp-faq-v3 .pp-faq3-hero{
	margin-inline:calc(var(--pp-gutter) * -1);
	padding:64px var(--pp-gutter) 56px;
	/* The design's directional navy: 160deg, #032561 -> #021a45. Both ends
	   are tokens (--pp-navy-700 is #032561 exactly; --pp-navy-800 is #021b45,
	   one step of green off the design's #021a45 and indistinguishable). */
	background:linear-gradient(160deg,var(--pp-navy-700),var(--pp-navy-800));
	text-align:center;
}
.pp-site .pp-faq-v3 .pp-faq3-hero__inner{
	max-width:var(--pp-faq-measure);
	margin-inline:auto;
}
.pp-site .pp-faq-v3 .pp-faq3-eyebrow{
	margin:0 0 14px;
	font-size:11px;
	font-weight:600;
	letter-spacing:.18em;
	text-transform:uppercase;
	line-height:1.4;
	color:var(--pp-blue-300);
}
.pp-site .pp-faq-v3 .pp-faq3-title{
	margin:0 0 10px;
	max-width:none;
	/* PP-FIX B3 (2026-08-29): was font-family:inherit (= the lane's Manrope)
	   at 700 -- the only page H1 off the Montserrat display family. Now the
	   site heading register; size stays the lane's own 38px. */
	font-family:var(--pp-font-display);
	font-size:38px;
	font-weight:600;
	letter-spacing:-.02em;
	line-height:1.15;
	color:var(--pp-text-on-dark);
}
.pp-site .pp-faq-v3 .pp-faq3-lede{
	margin:0 0 28px;
	max-width:none;
	font-size:15px;
	line-height:1.6;
	color:var(--pp-text-on-dark-muted);
}

/* ============ 3. HERO SEARCH ============ */
.pp-site .pp-faq-v3 .pp-faq3-search{
	display:flex;
	gap:10px;
	max-width:560px;
	margin:0 auto;
}
/* N-1 NECESSITY PROOF (pp-pages.css departure S11-D3): Assembler ships
     input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=range])
   at (0,4,1) -- min-height 42px, padding .8rem 1rem, border-radius 6px,
   border-color currentColor, font-size small -- and pp-compat.css
   deliberately ships no input bridge. The selector below is
     .pp-site .pp-faq-v3 .pp-faq3-search input[type="search"]:not([type="submit"])
   = three classes + one attribute + one negated attribute + one element
   = (0,5,1) > (0,4,1). Specificity alone decides; no !important and no
   source-order assumption is used. The :not() is inert on a search input
   and exists only to carry the weight, exactly as pp-pages.css rows 336
   and 469 already do. */
.pp-site .pp-faq-v3 .pp-faq3-search input[type="search"]:not([type="submit"]){
	flex:1 1 auto;
	width:100%;
	min-width:0;
	height:46px;
	min-height:46px;
	margin:0;
	padding:0 16px;
	border:1px solid var(--pp-border-inverse);
	border-radius:10px;
	background:var(--pp-faq-field);
	box-shadow:none;
	font-family:inherit;
	font-size:14px;
	font-weight:400;
	line-height:1.5;
	color:var(--pp-text-on-dark);
	-webkit-appearance:none;
	appearance:none;
	transition:border-color var(--pp-dur-fast) var(--pp-ease),background var(--pp-dur-fast) var(--pp-ease);
}
.pp-site .pp-faq-v3 .pp-faq3-search input[type="search"]:not([type="submit"])::placeholder{
	color:var(--pp-text-on-dark-muted);
	opacity:1;
}
.pp-site .pp-faq-v3 .pp-faq3-search input[type="search"]:not([type="submit"]):hover{
	border-color:rgba(255,255,255,.28);
}
.pp-site .pp-faq-v3 .pp-faq3-search input[type="search"]:not([type="submit"]):focus{
	border-color:var(--pp-blue-400);
	background:var(--pp-faq-field-focus);
	outline:none;
}
/* PP-FIX C10 (2026-08-29): every focus ring in this lane was authored as an
   outline, but pp-compat.css retires outlines inside .pp-site with
   `outline:none !important` -- the rings never rendered (the audit's keyboard
   walk caught it). Each is re-issued as the equivalent box-shadow ring, which
   pp-compat does not touch. */
.pp-site .pp-faq-v3 .pp-faq3-search input[type="search"]:not([type="submit"]):focus-visible{
	box-shadow:0 0 0 3px var(--pp-blue-300);
}
.pp-site .pp-faq-v3 .pp-faq3-search__btn{
	flex:0 0 auto;
	height:46px;
	min-height:46px;
	margin:0;
	padding:0 22px;
	border:1px solid transparent;
	border-radius:10px;
	background:var(--pp-blue-600);
	box-shadow:none;
	font-family:inherit;
	font-size:14px;
	font-weight:600;
	line-height:1;
	letter-spacing:0;
	color:var(--pp-text-on-dark);
	text-transform:none;
	cursor:pointer;
	-webkit-appearance:none;
	appearance:none;
	transition:background var(--pp-dur-fast) var(--pp-ease);
}
.pp-site .pp-faq-v3 .pp-faq3-search__btn:hover{background:var(--pp-blue-700)}
.pp-site .pp-faq-v3 .pp-faq3-search__btn:focus-visible{
	box-shadow:0 0 0 3px var(--pp-blue-200); /* PP-FIX C10: outline -> ring */
}

/* ============ 4. BODY GRID ============ */
.pp-site .pp-faq-v3 .pp-faq3-body{
	display:grid;
	grid-template-columns:var(--pp-faq-rail) minmax(0,1fr);
	gap:var(--pp-faq-gap);
	align-items:start;
	max-width:var(--pp-faq-measure);
	margin-inline:auto;
	padding-block:48px;
}

/* ============ 5. CATEGORY RAIL ============ */
.pp-site .pp-faq-v3 .pp-faq3-rail{
	position:sticky;
	/* The header pill is fixed at top:26px and is ~66px tall, so its lower
	   edge sits at ~92px. 110px keeps the rail clear of it at every scroll
	   position. Below the 900px axis the rail is static and this is inert. */
	top:110px;
	align-self:start;
	min-width:0;
	margin:0;
}
.pp-site .pp-faq-v3 .pp-faq3-rail__hd{
	margin:0;
	padding:0 12px 10px;
	font-size:11px;
	font-weight:600;
	letter-spacing:.18em;
	text-transform:uppercase;
	line-height:1.4;
	color:var(--pp-text-muted);
}
.pp-site .pp-faq-v3 .pp-faq3-rail__list{
	display:flex;
	flex-direction:column;
	gap:2px;
	margin:0;
	padding:0;
	list-style:none;
}
.pp-site .pp-faq-v3 .pp-faq3-rail__list li{
	margin:0;
	padding:0;
	max-width:none;
	min-width:0;
}
.pp-site .pp-faq-v3 .pp-faq3-rail__link{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
	padding:9px 12px;
	border:1px solid transparent;
	border-radius:8px;
	font-size:13.5px;
	font-weight:500;
	line-height:1.35;
	color:var(--pp-text-heading);
	text-decoration:none;
	overflow-wrap:break-word;
	transition:background var(--pp-dur-fast) var(--pp-ease),color var(--pp-dur-fast) var(--pp-ease);
}
.pp-site .pp-faq-v3 .pp-faq3-rail__link:hover{
	background:var(--pp-blue-50);
	color:var(--pp-navy-700);
}
.pp-site .pp-faq-v3 .pp-faq3-rail__link:focus-visible{
	box-shadow:0 0 0 2px #fff,0 0 0 4px var(--pp-blue-600); /* PP-FIX C10: outline -> ring */
}
/* Set by pp-faq.js while a search is active and this category has no match
   left. The link stays in place and stays operable -- only the register
   drops, so the rail never reflows mid-keystroke. */
.pp-site .pp-faq-v3 .pp-faq3-rail__link.is-empty{color:var(--pp-text-muted)}
.pp-site .pp-faq-v3 .pp-faq3-rail__n{
	flex:0 0 auto;
	font-family:var(--pp-font-mono);
	font-size:11px;
	font-weight:400;
	font-variant-numeric:tabular-nums;
	color:var(--pp-text-muted);
}

/* ============ 6. RAIL HELP CARD ============ */
.pp-site .pp-faq-v3 .pp-faq3-help{
	margin-top:20px;
	padding:16px;
	border:1px solid var(--pp-border-subtle);
	border-radius:10px;
	background:var(--pp-surface-subtle);
}
.pp-site .pp-faq-v3 .pp-faq3-help__t{
	margin:0 0 4px;
	font-size:12.5px;
	font-weight:700;
	line-height:1.4;
	color:var(--pp-text-heading);
}
.pp-site .pp-faq-v3 .pp-faq3-help__d{
	margin:0 0 10px;
	max-width:none;
	font-size:12px;
	line-height:1.5;
	color:var(--pp-text-muted);
}
.pp-site .pp-faq-v3 .pp-faq3-help__a{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:4px 0;
	font-size:12.5px;
	font-weight:600;
	line-height:1.4;
	color:var(--pp-text-accent);
	text-decoration:none;
	transition:color var(--pp-dur-fast) var(--pp-ease);
}
.pp-site .pp-faq-v3 .pp-faq3-help__a:hover{
	color:var(--pp-blue-700);
	text-decoration:underline;
}
.pp-site .pp-faq-v3 .pp-faq3-help__a:focus-visible{
	box-shadow:0 0 0 2px #fff,0 0 0 4px var(--pp-blue-600); /* PP-FIX C10: outline -> ring */
}
.pp-site .pp-faq-v3 .pp-faq3-help__note{
	margin:10px 0 0;
	max-width:none;
	font-size:12px;
	line-height:1.5;
	color:var(--pp-text-muted);
}
.pp-site .pp-faq-v3 .pp-faq3-help__note a{
	color:var(--pp-text-accent);
	font-weight:600;
	text-decoration:none;
	transition:color var(--pp-dur-fast) var(--pp-ease);
}
.pp-site .pp-faq-v3 .pp-faq3-help__note a:hover{
	color:var(--pp-blue-700);
	text-decoration:underline;
}

/* ============ 7. ACCORDION COLUMN ============ */
.pp-site .pp-faq-v3 .pp-faq3-main{min-width:0}

/* The live no-results notice. role="status" in the markup, so the count
   change is announced; it is never display:none while it has something to
   say (see section 11). */
.pp-site .pp-faq-v3 .pp-faq3-empty{
	margin:0 0 32px;
	padding:18px 20px;
	max-width:none;
	border:1px solid var(--pp-border-subtle);
	border-radius:10px;
	background:var(--pp-surface-subtle);
	font-size:14px;
	line-height:1.6;
	color:var(--pp-text-body);
}
.pp-site .pp-faq-v3 .pp-faq3-empty a{
	color:var(--pp-text-accent);
	font-weight:600;
	text-decoration:none;
	transition:color var(--pp-dur-fast) var(--pp-ease);
}
.pp-site .pp-faq-v3 .pp-faq3-empty a:hover{
	color:var(--pp-blue-700);
	text-decoration:underline;
}

.pp-site .pp-faq-v3 .pp-faq3-cat{
	margin:0 0 44px;
	min-width:0;
	/* Clears the fixed header pill when a rail link jumps to the section. */
	scroll-margin-top:120px;
}
.pp-site .pp-faq-v3 .pp-faq3-cat__hd{
	display:flex;
	align-items:baseline;
	gap:12px;
	flex-wrap:wrap;
	margin:0 0 4px;
	padding:0 0 10px;
	/* Departure F3-D3: the design's #4a90f5 -> the nearest token. */
	border-bottom:1px solid var(--pp-blue-400);
}
.pp-site .pp-faq-v3 .pp-faq3-cat__title{
	margin:0;
	max-width:none;
	font-family:inherit;
	font-size:19px;
	font-weight:700;
	letter-spacing:-.01em;
	line-height:1.3;
	color:var(--pp-text-heading);
}
.pp-site .pp-faq-v3 .pp-faq3-cat__n{
	font-size:11px;
	font-weight:600;
	letter-spacing:.18em;
	text-transform:uppercase;
	line-height:1.4;
	/* Departure F3-D2. */
	color:var(--pp-text-muted);
}

/* ============ 8. ACCORDION ROW ============ */
.pp-site .pp-faq-v3 .pp-faq3-qa{
	border-bottom:1px solid var(--pp-border-subtle);
	min-width:0;
}
/* The h3 is a wrapper only -- the button carries the whole visual register,
   which is the WAI-ARIA accordion pattern. */
.pp-site .pp-faq-v3 .pp-faq3-qa__h{
	margin:0;
	padding:0;
	max-width:none;
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
	letter-spacing:0;
	line-height:inherit;
	color:inherit;
}
.pp-site .pp-faq-v3 .pp-faq3-qa__btn{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:16px;
	width:100%;
	min-height:56px;
	margin:0;
	padding:16px 2px;
	border:0;
	border-radius:6px;
	background:none;
	box-shadow:none;
	font-family:inherit;
	font-size:15px;
	font-weight:600;
	line-height:1.45;
	letter-spacing:0;
	text-align:left;
	text-transform:none;
	color:var(--pp-text-heading);
	cursor:pointer;
	-webkit-appearance:none;
	appearance:none;
	transition:background var(--pp-dur-fast) var(--pp-ease);
}
.pp-site .pp-faq-v3 .pp-faq3-qa__btn:hover{background:var(--pp-neutral-25)}
.pp-site .pp-faq-v3 .pp-faq3-qa__btn:focus-visible{
	box-shadow:inset 0 0 0 2px var(--pp-blue-600); /* PP-FIX C10: inset outline -> inset ring */
}
.pp-site .pp-faq-v3 .pp-faq3-qa__txt{
	min-width:0;
	overflow-wrap:break-word;
}

/* The circular +/- control. Two 9px bars: the horizontal one never moves,
   the vertical one rotates 90deg -> 180deg and fades, so "+" becomes "-"
   with one restrained rotation and no icon swap. */
.pp-site .pp-faq-v3 .pp-faq3-qa__sym{
	position:relative;
	flex:0 0 auto;
	width:22px;
	height:22px;
	border:1px solid var(--pp-border-default);
	border-radius:50%;
	background:var(--pp-surface-page);
	transition:border-color var(--pp-dur-base) var(--pp-ease);
}
.pp-site .pp-faq-v3 .pp-faq3-qa__sym::before,
.pp-site .pp-faq-v3 .pp-faq3-qa__sym::after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:9px;
	height:1.5px;
	border-radius:1px;
	background:var(--pp-blue-600);
	transform:translate(-50%,-50%);
	transition:transform var(--pp-dur-base) var(--pp-ease),opacity var(--pp-dur-base) var(--pp-ease);
}
.pp-site .pp-faq-v3 .pp-faq3-qa__sym::after{
	transform:translate(-50%,-50%) rotate(90deg);
}
.pp-site .pp-faq-v3 .pp-faq3-qa.is-open .pp-faq3-qa__sym{
	border-color:var(--pp-blue-300);
}
.pp-site .pp-faq-v3 .pp-faq3-qa.is-open .pp-faq3-qa__sym::after{
	transform:translate(-50%,-50%) rotate(180deg);
	opacity:0;
}

/* The answer panel.

   Closed:  height 0, overflow hidden, visibility hidden -- so the collapsed
            answer is out of the accessibility tree and out of the tab order.
   Open:    height auto, visibility visible.

   The height transition runs in BOTH directions; pp-faq.js pins an explicit
   pixel height for the duration of each run and clears it on transitionend,
   so the settled open row is height:auto and reflows naturally on resize --
   no stored height goes stale and no layout jump is introduced at rest.

   visibility is transitioned at 0s with a DELAY equal to the height
   duration in the closed state and 0s in the open state, which is what
   keeps the answer painted while it collapses instead of vanishing on the
   first frame. */
.pp-site .pp-faq-v3 .pp-faq3-qa__panel{
	height:0;
	overflow:hidden;
	visibility:hidden;
	transition:height var(--pp-dur-base) var(--pp-ease),visibility 0s linear var(--pp-dur-base);
}
.pp-site .pp-faq-v3 .pp-faq3-qa.is-open .pp-faq3-qa__panel{
	height:auto;
	visibility:visible;
	transition:height var(--pp-dur-base) var(--pp-ease),visibility 0s linear 0s;
}
.pp-site .pp-faq-v3 .pp-faq3-qa__inner{
	padding:0 40px 18px 2px;
}
.pp-site .pp-faq-v3 .pp-faq3-qa__inner p{
	margin:0;
	max-width:72ch;
	font-size:14px;
	line-height:1.65;
	color:var(--pp-text-body);
	overflow-wrap:break-word;
}
.pp-site .pp-faq-v3 .pp-faq3-qa__inner p + p{margin-top:12px}
.pp-site .pp-faq-v3 .pp-faq3-qa__inner a{
	color:var(--pp-text-accent);
	font-weight:600;
	text-decoration:none;
	border-bottom:1px solid var(--pp-blue-200);
	transition:color var(--pp-dur-fast) var(--pp-ease),border-color var(--pp-dur-fast) var(--pp-ease);
}
.pp-site .pp-faq-v3 .pp-faq3-qa__inner a:hover{
	color:var(--pp-blue-700);
	border-bottom-color:var(--pp-blue-600);
}
.pp-site .pp-faq-v3 .pp-faq3-qa__inner a:focus-visible{
	box-shadow:0 0 0 2px #fff,0 0 0 4px var(--pp-blue-600); /* PP-FIX C10: outline -> ring */
}

/* ============ 9. UTILITY CARDS ============ */
.pp-site .pp-faq-v3 .pp-faq3-cards{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:20px;
	margin:0;
}
.pp-site .pp-faq-v3 .pp-faq3-card{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	min-width:0;
	padding:24px;
	border:1px solid var(--pp-border-subtle);
	border-radius:var(--pp-radius-lg);
	background:var(--pp-surface-page);
	box-shadow:var(--pp-shadow-sm);
}
.pp-site .pp-faq-v3 .pp-faq3-card__eb{
	margin:0 0 8px;
	max-width:none;
	font-size:11px;
	font-weight:600;
	letter-spacing:.18em;
	text-transform:uppercase;
	line-height:1.4;
	color:var(--pp-text-accent);
}
.pp-site .pp-faq-v3 .pp-faq3-card__t{
	margin:0 0 6px;
	max-width:none;
	font-family:inherit;
	font-size:16px;
	font-weight:700;
	letter-spacing:-.01em;
	line-height:1.35;
	color:var(--pp-text-heading);
}
.pp-site .pp-faq-v3 .pp-faq3-card__d{
	margin:0 0 14px;
	max-width:none;
	font-size:13px;
	line-height:1.55;
	color:var(--pp-text-muted);
}
.pp-site .pp-faq-v3 .pp-faq3-card__a{
	display:inline-flex;
	align-items:center;
	gap:6px;
	margin-top:auto;
	padding:4px 0;
	font-size:13px;
	font-weight:600;
	line-height:1.4;
	color:var(--pp-text-accent);
	text-decoration:none;
	transition:color var(--pp-dur-fast) var(--pp-ease);
}
.pp-site .pp-faq-v3 .pp-faq3-card__a:hover{
	color:var(--pp-blue-700);
	text-decoration:underline;
}
.pp-site .pp-faq-v3 .pp-faq3-card__a:focus-visible{
	box-shadow:0 0 0 2px #fff,0 0 0 4px var(--pp-blue-600); /* PP-FIX C10: outline -> ring */
}

/* ============ 10. RESPONSIVE ============ */

/* 1100 -- the 1104px measure stops being reachable inside the shell, so the
   rail and the gap narrow rather than squeezing the answer column. */
@media (max-width:1100px){
	.pp-site .pp-faq-v3{--pp-faq-rail:212px;--pp-faq-gap:36px}
}

/* 900 -- the body stacks. The sticky desktop rail becomes a deliberate
   horizontal chip row: 44px tap targets, wrapped, still anchored to the
   real section ids and still carrying live counts. */
@media (max-width:900px){
	.pp-site .pp-faq-v3 .pp-faq3-hero{padding-block:52px 44px}
	.pp-site .pp-faq-v3 .pp-faq3-title{font-size:32px}
	.pp-site .pp-faq-v3 .pp-faq3-body{
		grid-template-columns:minmax(0,1fr);
		gap:28px;
		padding-block:36px;
	}
	.pp-site .pp-faq-v3 .pp-faq3-rail{position:static;top:auto}
	.pp-site .pp-faq-v3 .pp-faq3-rail__hd{padding-inline:0}
	.pp-site .pp-faq-v3 .pp-faq3-rail__list{
		flex-direction:row;
		flex-wrap:wrap;
		gap:8px;
	}
	.pp-site .pp-faq-v3 .pp-faq3-rail__link{
		min-height:44px;
		padding:10px 14px;
		border-color:var(--pp-border-subtle);
		border-radius:var(--pp-radius-pill);
		background:var(--pp-surface-page);
	}
	.pp-site .pp-faq-v3 .pp-faq3-rail__link.is-empty{
		background:var(--pp-surface-subtle);
	}
	.pp-site .pp-faq-v3 .pp-faq3-help{margin-top:24px}
}

/* 700 -- the system's small axis. The shell gutter is 38px here, so the body
   pulls back to the design's 20px by cancelling exactly that much; the hero
   restates 20px directly. Neither can overflow: the margin is the negative
   of the padding it cancels.

   The chip row introduced at 900 is for the tablet band ONLY. Below 700 the
   rail returns to the design's VERTICAL list -- label left, count right --
   because that is what the reference shows and because a wrapped chip row of
   five long category names costs more height than it saves at phone widths.
   Rows keep a 44px minimum so they stay a real tap target. */
@media (max-width:700px){
	.pp-site .pp-faq-v3 .pp-faq3-hero{
		padding-inline:20px;
		padding-block:44px 36px;
	}
	.pp-site .pp-faq-v3 .pp-faq3-title{font-size:28px}
	.pp-site .pp-faq-v3 .pp-faq3-lede{font-size:14px;margin-bottom:24px}
	.pp-site .pp-faq-v3 .pp-faq3-body{
		margin-inline:calc(20px - var(--pp-gutter));
		padding-block:28px;
	}
	.pp-site .pp-faq-v3 .pp-faq3-rail__hd{padding-inline:12px}
	.pp-site .pp-faq-v3 .pp-faq3-rail__list{
		flex-direction:column;
		flex-wrap:nowrap;
		gap:2px;
	}
	.pp-site .pp-faq-v3 .pp-faq3-rail__link{
		min-height:44px;
		padding:10px 12px;
		border-color:transparent;
		border-radius:8px;
		background:none;
	}
	.pp-site .pp-faq-v3 .pp-faq3-rail__link.is-empty{background:none}
	.pp-site .pp-faq-v3 .pp-faq3-cat{margin-bottom:34px;scroll-margin-top:96px}
	.pp-site .pp-faq-v3 .pp-faq3-qa__btn{gap:12px;padding-block:14px}
	.pp-site .pp-faq-v3 .pp-faq3-qa__inner{padding-right:0}
	/* The two utility cards stay a two-track grid, as the reference shows.
	   minmax(0,1fr) is what keeps them from blowing the track out. */
	.pp-site .pp-faq-v3 .pp-faq3-cards{gap:12px}
	.pp-site .pp-faq-v3 .pp-faq3-card{padding:18px}
	.pp-site .pp-faq-v3 .pp-faq3-card__d{font-size:12.5px;margin-bottom:12px}
}

/* 460 -- type eases down. The search stays INLINE and the cards stay 2-up:
   at 390px both still fit the design's composition without clipping. */
@media (max-width:460px){
	.pp-site .pp-faq-v3 .pp-faq3-title{font-size:26px}
	.pp-site .pp-faq-v3 .pp-faq3-search{gap:8px}
	.pp-site .pp-faq-v3 .pp-faq3-search__btn{padding:0 16px}
	.pp-site .pp-faq-v3 .pp-faq3-card{padding:16px}
}

/* Below 360 -- the last band where the inline search and the two-track cards
   genuinely stop fitting, so and only so they stack. 360 is the narrowest
   viewport the site's own --pp-gutter clamp still resolves above its 20px
   floor, which makes it the natural place for this to give way. */
@media (max-width:359px){
	.pp-site .pp-faq-v3 .pp-faq3-search{flex-direction:column;gap:10px}
	.pp-site .pp-faq-v3 .pp-faq3-search__btn{width:100%}
	.pp-site .pp-faq-v3 .pp-faq3-cards{grid-template-columns:minmax(0,1fr);gap:12px}
}

/* Reduced motion. The panel transition is removed outright rather than
   zeroed, because a 0s height transition would still leave the visibility
   delay in place; pp-faq.js reads the same media query and takes its
   non-animated branch, so nothing depends on a transitionend that will
   never fire. */
@media (prefers-reduced-motion:reduce){
	.pp-site .pp-faq-v3 .pp-faq3-qa__panel,
	.pp-site .pp-faq-v3 .pp-faq3-qa.is-open .pp-faq3-qa__panel,
	.pp-site .pp-faq-v3 .pp-faq3-qa__sym,
	.pp-site .pp-faq-v3 .pp-faq3-qa__sym::before,
	.pp-site .pp-faq-v3 .pp-faq3-qa__sym::after,
	.pp-site .pp-faq-v3 .pp-faq3-qa__btn,
	.pp-site .pp-faq-v3 .pp-faq3-rail__link,
	.pp-site .pp-faq-v3 .pp-faq3-help__a,
	.pp-site .pp-faq-v3 .pp-faq3-card__a,
	.pp-site .pp-faq-v3 .pp-faq3-search__btn,
	.pp-site .pp-faq-v3 .pp-faq3-search input[type="search"]:not([type="submit"]){
		transition:none;
	}
}

/* ============ 11. FILTERED-OUT STATE ============ */
/* pp-faq.js filters by toggling the hidden ATTRIBUTE, never by writing an
   inline display. These three rules are stated at (0,4,0) -- one step above
   every display declaration in this lane -- so no rule above can resurrect a
   filtered-out row, and they are last in the file so source order agrees
   with specificity. */
.pp-site .pp-faq-v3 .pp-faq3-qa[hidden]{display:none}
.pp-site .pp-faq-v3 .pp-faq3-cat[hidden]{display:none}
.pp-site .pp-faq-v3 .pp-faq3-empty[hidden]{display:none}