/* -----------------------------------------------------------------------------
 * PeptPro Preview3 — Round 5: R5, R6, R7 — homepage FAQ repeat, smooth-purchase glow, final trust row. Loaded on is_front_page() only.
 *
 * Created empty by the Foundation pass so the enqueue in functions.php resolves
 * to a real file (and to a real filemtime) before the lane that owns this file
 * writes into it. Round 5 CSS is kept out of style.css on purpose: style.css is
 * shared and 51KB, and a per-requirement file keeps a Round 5 rollback to one
 * `rm` plus one enqueue line.
 *
 * House rules for whoever fills this in:
 *   - reuse the existing tokens and radii (--accent, --accent-bright, --r-md,
 *     --r-pill, --s1..--s7); do not invent a new radius or a second accent;
 *   - this theme is DARK ONLY. It ships <meta name="color-scheme" content="dark">
 *     and carries no OS colour-preference media query anywhere. Do not add one:
 *     a partial light branch would activate on a light-preferring OS and break
 *     the design, because the meta tag does not stop such a query from matching;
 *   - motion is transform/opacity only, 150-260ms, and always inside a
 *     `@media (prefers-reduced-motion: no-preference)` guard or paired with a
 *     reduce branch;
 *   - these rules load after style.css and every Round 2-4 sheet, so they win on
 *     order alone. Do not reach for !important.
 * -------------------------------------------------------------------------- */


/* ===========================================================================
   R5 · the FAQ repeated below the free-pen promotion, plus the support CTA
   ========================================================================= */

/* The accordion itself deliberately gets NO new styling: it reuses .faq-list /
   .faq-item exactly as the FAQ page renders them, so the repeated block reads as
   the same component rather than as a second, home-page-flavoured FAQ. Only the
   two-column shell around it is new. .faq-list carries `max-width: 920px` and
   `margin-inline: auto` from style.css; inside a grid column that would centre a
   920px list in a narrower track, so the echo copy is pinned to full width. */

.faq-echo-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
	align-items: start;
	gap: clamp(28px, 3.4vw, 56px);
}
.faq-echo-list { max-width: none; margin-inline: 0; }

.faq-echo-aside {
	position: sticky;
	top: calc(var(--nav-h) + var(--s5));
	padding: clamp(20px, 2.2vw, 28px);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
}
.faq-echo-aside .eyebrow { margin-bottom: var(--s3); }
.faq-echo-aside h3 { margin: 0 0 var(--s3); font-size: 20px; letter-spacing: -.01em; }
.faq-echo-aside .body-copy { margin-bottom: var(--s5); font-size: 14px; line-height: 1.65; max-width: none; }

/* --- the support control ---------------------------------------------------
   peptpro_r5_telegram_cta() hands the footer's markup back with its root class
   renamed to .r5-tg, so none of the fixed-chrome rules that own .tg-support
   (pharma-pass.css positioning, round4-box.css tray offsets and the
   body.p3box-active stand-down) can reach this in-flow copy. That rename is the
   whole reason Round 4's "pill overlaps the right edge on mobile" cannot come
   back here: this control is never fixed, never anchored to the viewport edge,
   and never stacked on top of the footer's pill.
   Sizing: 48px minimum height and a 48px minimum width at every breakpoint, so
   it is a legitimate touch target down to 375px. */

.r5-tg {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	max-width: 100%;
	padding: 8px 20px 8px 16px;
	border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line-strong));
	border-radius: var(--r-pill);
	background: var(--surface-raised);
	color: var(--text);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -.005em;
	text-align: left;
	cursor: pointer;
	transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.r5-tg svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--accent-text); }
.r5-tg:hover { border-color: var(--accent); transform: translateY(-1px); }
.r5-tg:active { transform: translateY(0); }

/* The pending state uses the site's existing "not supplied yet" idiom — a
   dashed 1px line in --line-strong, the same treatment .report-empty and the
   empty category tile already use — instead of an opacity-dimmed disabled look.
   Dimming would say "broken"; the dashed edge says "reserved, not filled in".
   The control stays fully operable and keeps its accessible name, and clicking
   it announces the same message through the site's own #peptToast. */
.r5-tg-pending {
	border-style: dashed;
	border-color: var(--line-strong);
	color: var(--muted);
}
.r5-tg-pending svg { color: var(--quiet); }
.r5-tg-pending:hover { border-color: color-mix(in srgb, var(--accent) 46%, var(--line-strong)); }
.r5-tg-pending .tg-support-note { color: var(--accent-text); }

/* Safety net. If peptpro_telegram_support_button() is ever rewritten so the
   class rename in peptpro_r5_telegram_cta() stops matching, a raw .tg-support
   would land in this section as a second piece of fixed chrome sitting exactly
   on the footer's. These three declarations put it back in the flow whatever
   happens, including under body.p3box-active, which otherwise hides it. */
.r5-tg-slot .tg-support {
	position: static;
	visibility: visible;
	opacity: 1;
	box-shadow: none;
}

@media (max-width: 900px) {
	.faq-echo-layout { grid-template-columns: minmax(0, 1fr); }
	.faq-echo-aside { position: static; }
}
@media (max-width: 420px) {
	/* pharma-pass.css hides .tg-support-text below 380px to shrink the FLOATING
	   pill to a circle. This one is in the flow and has the whole column, so it
	   keeps its label and wraps instead. */
	.r5-tg { width: 100%; justify-content: flex-start; }
	.r5-tg .tg-support-text { display: grid; }
}


/* ===========================================================================
   R6 · "Before you order" — restrained turquoise bloom + the integrity glyph
   ========================================================================= */

/* A low-alpha radial wash behind the band, not a halo. Peak alpha is .10 of
   #00D4C8 over the band ground #060A14, which composites to about #051E26.
   Measured against that composite: --muted body copy #A7B0BC lands at 7.8:1
   (was 9.0:1 on the bare band), --text #EBEBEC at 14.4:1, and --accent-text
   #00D4C8 at 9.2:1. All well clear of 4.5:1 body and 3:1 large, so the bloom
   costs contrast headroom without ever spending it.
   It is painted by a ::before at z-index -1 under `isolation: isolate`, the same
   mechanism .radial already uses in style.css, so it sits above the section's
   own background and strictly behind every glyph of text — nothing blooms
   through the copy. `overflow: clip` keeps it inside its own band instead of
   bleeding into the rails above and below, and cannot introduce a scroll
   container the way overflow:auto would.
   It is completely static: no transform, no opacity animation, no transition.
   There is therefore nothing for prefers-reduced-motion to switch off, which is
   the strongest form of honouring it. */

.purchase-section {
	position: relative;
	isolation: isolate;
	/* hidden first as the floor for any engine without overflow:clip; clip is
	   preferred because it cannot become a scroll container. */
	overflow: hidden;
	overflow: clip;
}
.purchase-section::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -18%;
	left: 50%;
	width: min(1180px, 130%);
	height: 116%;
	transform: translateX(-50%);
	pointer-events: none;
	background:
		radial-gradient(52% 50% at 50% 42%, rgba(0, 212, 200, .10), rgba(0, 212, 200, .042) 48%, rgba(0, 212, 200, 0) 74%);
}

/* B3 (Round 5 fix pass) — this block used to switch the family's engraved
   bevel/emboss arcs to transparent inside .purchase-item and force the artwork
   stroke to 2.1, so that card 01's Round 5 pictogram would match cards 02-04's
   legacy peptpro_step_icon glyphs. It matched DOWN: it dragged the one family
   member onto the outsiders' law and, in doing so, switched off the engraved
   plate that DESIGN.md calls the family's signature read — on the very row the
   round was meant to establish.
   All four cards now render from peptpro_r5_icon(), so there is nothing to
   match down to and the override is deleted rather than inverted. The row
   inherits the family defaults unchanged: artwork stroke 2, plate ring 1.4,
   bevel/emboss arcs 1.2 — identical to the R7 band below. */


/* ===========================================================================
   R7 · the final trust band — last content section on the page
   ========================================================================= */

/* Quiet by construction. A hairline above it and the page ground beneath it,
   after the loud centred closing band, so the eye lands on the four statements
   without being sold to a second time. No panels, no chips, no counters and no
   mono data voice: those belong to the transparency plate and the lab-report
   status, which are the surfaces that actually carry evidence. This band is
   marketing reassurance and is dressed as marketing reassurance. */

.trust-final { border-top: 1px solid var(--line); }

.trust-final-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(28px, 3vw, 48px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.trust-final-item { display: grid; gap: var(--s4); align-content: start; }
.trust-final-ico { display: block; }
.trust-final-ico .r5-ico { display: block; width: 56px; height: 56px; }
.trust-final-copy b {
	display: block;
	margin-bottom: 6px;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.3;
}
.trust-final-copy p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

/* The one honesty rail in this section: a pointer at the surface where report
   evidence actually lives, in the site's existing wording, rather than a badge
   asserting the evidence here. 48px tall so it is a real target at 375px. */
.trust-final-note { margin: clamp(32px, 3.4vw, 48px) 0 0; }
.trust-final-link { display: inline-flex; align-items: center; gap: var(--s2); min-height: 48px; }

/* 1180 -> 2x2 with the same gap the page uses elsewhere; the four statements
   stay four statements rather than becoming two long lines. */
@media (max-width: 1180px) {
	.trust-final-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 680 and below -> a stacked rhythm, NOT a squeezed column of centred cards.
   The pictogram moves inline to the left of the copy at 44px, each statement
   gets a hairline above it and real vertical air, and the text column keeps a
   full measure. This is the composition .evidence-row already uses on this
   page, so the phone layout is a PeptPro pattern rather than a fallback. */
@media (max-width: 680px) {
	.trust-final-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.trust-final-item {
		grid-template-columns: 44px minmax(0, 1fr);
		align-items: start;
		gap: var(--s4);
		padding-block: var(--s5);
		border-top: 1px solid var(--line);
	}
	.trust-final-item:first-child { border-top: 0; padding-top: 0; }
	.trust-final-ico .r5-ico { width: 44px; height: 44px; }
	.trust-final-copy b { font-size: 17px; }
	.trust-final-copy p { font-size: 15px; }
}


/* ===========================================================================
   Reduced motion
   ========================================================================= */

/* style.css already collapses every transition-duration under this query, but a
   duration of 0 still lets the 1px hover lift LAND — it just lands instantly,
   which is a jump rather than an animation. pharma-pass.css neutralises exactly
   that for .tg-support; the in-flow copy needs the same treatment. The R6 bloom
   needs no branch here: it never moves. */

@media (prefers-reduced-motion: reduce) {
	.r5-tg { transition: none; }
	.r5-tg:hover, .r5-tg:active { transform: none; }
}