/*
 * The Crypto Secret — the pricing panel and the closing band (Story 2.6).
 * Sections 11 and 13 of the locked order. Section 12 (FAQ) is a labelled seam
 * in front-page.php between the two, deferred to its own follow-up spec
 * (deferred-work.md, story 2.6 entry) — this file carries nothing for it.
 *
 * Source of truth: design/canvas/Main.dc.html:466-494 (pricing) and :519-532
 * (closing), with design/canvas/HomeMobile.dc.html:139-155 and :171-180 for
 * the mobile states. Where this file departs from a board, the reason is
 * written at the rule.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * WHAT THIS FILE CONSUMES RATHER THAN RE-DECLARES
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * sections.css owns both bands' grounds, their type pairing and their padding
 * modifiers — .tcs-band--black, .tcs-band--orange and .tcs-band--flush-bottom
 * (84px 40px 0, Main.dc.html:520, already declared in story 2.5 citing this
 * exact artboard line). The pricing band takes no padding modifier: it is the
 * plain 92px 40px every band gets by default.
 *
 * motion.css owns the button shimmer (.tcs-btn__shimmer) AND the wordmark
 * sweep this story adds to it (.tcs-wordmark, @keyframes tcs-sweep, and its
 * reduced-motion resolution). Nothing here re-declares any of the three.
 *
 * tokens.css owns every value — the whole Story 2.6 block (pricing panel,
 * closing band, wordmark sweep and mobile wordmark size) was added there
 * first, for the same reason every earlier section's file gives: a literal
 * here would be a second place for a number to drift, and verify-foundation.sh
 * asserts no hex, and no bare 29.99/60.00 outside a token or a translatable
 * string, appears below.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * THE TWO THINGS THIS FILE EXISTS TO GET RIGHT
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * 1. THE REFUND WINDOW NEVER APPEARS AS A LITERAL. front-page.php renders it
 *    through tcs_refund_window() only, exactly as story 2.5's guarantee band
 *    does — this file has no opinion on the number, only on how the sentence
 *    around it is laid out.
 *
 * 2. THE WORDMARK SWEEPS WITHOUT ANIMATING WIDTH OR A CLIPPED ELEMENT'S
 *    TRANSFORM. `.tcs-wordmark` (motion.css) does the animating; this file
 *    only sizes and positions the word inside the closing band, at the
 *    existing --tcs-fs-wordmark / --tcs-lh-wordmark / --tcs-ls-wordmark
 *    tokens the design system already shipped for it.
 */

/* ===========================================================================
 * 1. THE PRICING PANEL  —  Main.dc.html:466-494
 * ========================================================================= */

/*
 * `overflow: hidden` contains the aurora blob below (code-review fix,
 * 2026-09-04), which bleeds well past the band's bottom-right corner —
 * `position: relative` for the containing block is already .tcs-band's own
 * (sections.css:100), so only the clip is added here. The same decision
 * comparison.css:462-469 makes for the credibility band's own blob, for the
 * same reason: a decorative element must not be able to widen the document.
 */
.tcs-pricing {
	overflow: hidden;
}

/*
 * The aurora blob (Main.dc.html:468). Restored, code-review fix 2026-09-04
 * — the artboard's decor layer was dropped when this band was first built,
 * leaving pricing as the epic's one band with no blob. `pointer-events:
 * none` so it cannot eat a click on the checklist, card or CTA beneath it;
 * no animation, the same reasoning comparison.css:473-476 gives for the
 * credibility band's own blob (a sixth/seventh-section blob looping forever
 * is motion with nothing to say).
 */
.tcs-pricing__blob {
	position: absolute;
	bottom: -220px;
	right: 6%;
	width: var(--tcs-pricing-blob-size);
	height: var(--tcs-pricing-blob-size);
	border-radius: var(--tcs-radius-full);
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--tcs-orange) var(--tcs-pricing-blob-pct), transparent) 0%,
		color-mix(in srgb, var(--tcs-orange) 0%, transparent) 66%
	);
	filter: blur(var(--tcs-blob-blur-4));
	pointer-events: none;
}

.tcs-pricing__inner {
	/*
	 * `position: relative` lifts the content above the blob without a
	 * z-index war — the blob is earlier in the source, so a positioned
	 * sibling wins. Same decision comparison.css:501-505 makes for
	 * .tcs-cred__inner over its own blob (code-review fix, 2026-09-04).
	 */
	position: relative;
	display: grid;
	/*
	 * minmax(0, 1fr), never a bare 1fr (code-review fix, 2026-09-04): a grid
	 * item's implicit min-width is auto, so a bare 1fr lets a long unbroken
	 * string (the price, a checklist line) widen its column past its share
	 * and push the row sideways — the horizontal-overflow failure the I/O
	 * matrix forbids at 390 / 768 / 1440. Same convention comparison.css:118
	 * and reviews.css:300 already document for every other grid in the epic.
	 */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--tcs-pricing-col-gap);
	align-items: center;
}

/* ---------------------------------------------------------------------------
 * 1a. The left column — headline and checklist.
 * ------------------------------------------------------------------------- */

.tcs-pricing__copy {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-pricing-copy-gap);
}

/*
 * NO COLOUR HERE for the h2. .tcs-band--black already resolves every heading
 * to --tcs-cream (sections.css:142-144); the one word set in --tcs-orange is
 * the exception and is marked directly on its <span> in the markup, not here.
 */
.tcs-pricing__headline {
	margin: 0;
	font-size: var(--tcs-fs-h2);
	line-height: var(--tcs-lh-h2);
	letter-spacing: var(--tcs-ls-h2);
	font-weight: var(--tcs-fw-semibold);
}

.tcs-pricing__accent {
	color: var(--tcs-orange);
}

.tcs-pricing__checklist {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-pricing-checklist-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcs-pricing__check {
	display: flex;
	align-items: center;
	gap: var(--tcs-pricing-check-icon-gap);
}

/*
 * The tick is decoration: the list item's own text already states the claim
 * ("All 8 chapters, complete"), so the glyph adds nothing a screen reader
 * needs to hear twice. focusable="false" is belt-and-braces for legacy
 * IE/Edge, which put SVGs in the tab order regardless of aria-hidden.
 */
.tcs-pricing__check-icon {
	flex-shrink: 0;
	width: var(--tcs-pricing-check-icon);
	height: var(--tcs-pricing-check-icon);
	color: var(--tcs-orange);
}

.tcs-pricing__check-text {
	font-size: var(--tcs-fs-pricing-check);
	color: var(--tcs-body-dark);
}

/* ---------------------------------------------------------------------------
 * 1b. The price card — a raised panel, one shade lighter than the band.
 * ------------------------------------------------------------------------- */

.tcs-pricing__card {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-pricing-card-gap);
	padding: var(--tcs-pricing-card-padding);
	background: var(--tcs-pricing-card-bg);
	border: 1px solid var(--tcs-pricing-card-border);
	border-radius: var(--tcs-radius-xl);
	box-shadow: var(--tcs-pricing-card-shadow);
}

.tcs-pricing__price-row {
	display: flex;
	align-items: baseline;
	gap: var(--tcs-pricing-price-gap);
}

.tcs-pricing__price-now {
	font-size: var(--tcs-fs-pricing-price);
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: var(--tcs-ls-pricing-price);
	line-height: 1;
	color: var(--tcs-cream);
}

/*
 * <s>, not a styled span — same decision the hero (hero.css:955-960) and the
 * header nav price take. The struck price is a semantic statement, not a
 * visual one, and an assistive technology that ignores CSS should hear the
 * relationship rather than two unrelated numbers.
 */
.tcs-pricing__price-was {
	font-size: var(--tcs-fs-pricing-was);
	font-weight: var(--tcs-fw-medium);
	color: var(--tcs-pricing-was-ink);
}

.tcs-pricing__badge {
	font-size: var(--tcs-fs-pricing-badge);
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: var(--tcs-ls-pricing-badge);
	text-transform: uppercase;
	color: var(--tcs-orange);
}

/*
 * The buy button fills the card. .tcs-btn already supplies the 44px tap
 * floor, the shimmer host and the hover transition; this rule only makes it
 * a block the width of its container, which .tcs-btn's own `inline-flex`
 * does not do on its own.
 */
.tcs-pricing__cta {
	width: 100%;
	padding-top: 18px;
	padding-bottom: 18px;
}

.tcs-pricing__secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--tcs-pricing-secure-gap);
}

.tcs-pricing__secure-icon {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	color: var(--tcs-body-dark);
}

.tcs-pricing__secure-text {
	font-size: var(--tcs-fs-pricing-secure);
	color: var(--tcs-body-dark);
}

/*
 * The refund line is "Covered by our [30-day refund policy]" — plain text
 * followed by a link, not a line that is entirely interactive. The artboard
 * draws it as plain text under the card, but this is the buyer's last chance
 * to reach the refund policy before paying, so the phrase inside brackets is
 * a real link.
 */
.tcs-pricing__refund {
	margin: 0;
	font-size: var(--tcs-fs-pricing-refund);
	text-align: center;
	/*
	 * --tcs-body-dark, not --tcs-muted (Story 4.5's contrast sweep). The
	 * two artboards disagree — Main.dc.html:491 draws the surrounding line
	 * muted #8B877D, HomeMobile.dc.html:152 draws it #A9A49A — and
	 * EXPERIENCE.md's accessibility floor settles it: "Body copy on dark
	 * uses body-dark". The LINK inside stays orange, which both boards
	 * agree on. The desktop-board discrepancy is recorded in the story's
	 * Resolved log for Mohammed.
	 */
	color: var(--tcs-body-dark);
}

/*
 * THE 44px FLOOR IS SCOPED TO THE LINK, NOT THE WHOLE LINE — the same
 * decision hero.css:431-444 documents for its own refund link: giving the
 * plain-text "Covered by our" span a 44px box would only add whitespace,
 * since it is not interactive. inline-flex + negative block margins pull the
 * extra height out of the paragraph's flow, so the TAP TARGET is 44px
 * without the row growing to match it.
 */
.tcs-pricing__refund a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tcs-tap-min);
	margin-block: calc((var(--tcs-tap-min) - 1em * var(--tcs-lh-body)) / -2);
	/* NO COLOUR HERE: .tcs-band--black already pairs <a> with --tcs-orange
	 * (sections.css:155-157). */
	text-decoration: underline;
}

/* ===========================================================================
 * 2. THE CLOSING BAND  —  Main.dc.html:519-532
 * ========================================================================= */

/*
 * .tcs-band--flush-bottom drops the band's own bottom padding so the wordmark
 * can run to the section's edge; this element supplies no padding of its own.
 */
.tcs-closing__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--tcs-closing-row-gap);
	margin-bottom: var(--tcs-closing-row-margin);
}

.tcs-closing__copy {
	display: flex;
	flex-direction: column;
	gap: var(--tcs-closing-copy-gap);
}

/* NO COLOUR HERE. .tcs-band--orange already resolves the h2 to --tcs-black
 * (sections.css:137-140). */
.tcs-closing__headline {
	margin: 0;
	font-size: var(--tcs-fs-closing-h2);
	line-height: var(--tcs-lh-closing-h2);
	letter-spacing: var(--tcs-ls-closing-h2);
	font-weight: var(--tcs-fw-semibold);
}

/*
 * --tcs-guarantee-copy-ink, not a fresh alpha. The board draws this line at
 * rgba(12,12,13,.72) on the same --tcs-orange ground story 2.5's guarantee
 * band already composites and names — reusing it is both fewer tokens and
 * the AA-safe value (5.11:1) rather than a second hand-derived one.
 */
.tcs-closing__lede {
	margin: 0;
	max-width: var(--tcs-closing-copy-max);
	font-size: var(--tcs-fs-closing-copy);
	line-height: var(--tcs-lh-body);
	color: var(--tcs-guarantee-copy-ink);
}

.tcs-closing__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--tcs-closing-cta-gap);
}

/*
 * COLOUR OVERRIDE, DELIBERATELY, AND QUALIFIED WITH THE TAG. .tcs-btn--dark
 * (motion.css) resolves to --tcs-cream text — correct for the hero's own
 * black button (Main.dc.html:148, `color: #F4F1EA`) — but THIS black button,
 * on THIS band, draws `color: #F7931A` in the artboard (Main.dc.html:527):
 * orange text on black, not cream. The two .btnD instances genuinely
 * disagree, so the shared class is left alone (changing it would move the
 * hero's button off its own artboard) and the difference is scoped here
 * instead. 8.51:1 on --tcs-black, comfortably past AA.
 *
 * `a.tcs-closing__cta`, kept as cheap insurance rather than because the
 * current cascade needs it (code-review fix, 2026-09-04 — this paragraph
 * previously misdescribed the collision). sections.css:159-161 does not read
 * `.tcs-band--orange a`; it reads `.tcs-band--orange a:not(.tcs-btn)`,
 * deliberately excluding `.tcs-btn` elements (see that file's own "IS
 * LOAD-BEARING" comment) — and this CTA carries `.tcs-btn`, so the band-level
 * link rule never targets it at all. There is no specificity fight to lose.
 * Even a bare `.tcs-closing__cta { color: ... }` (0,1,0) would only have to
 * out-order `.tcs-btn--dark`'s own colour (0,1,0, motion.css) — an exact tie
 * that source order already settles in this rule's favour, since pricing.css
 * loads after motion.css. The type qualifier is left in place anyway, purely
 * as insurance against a future reordering of the stylesheets, not because
 * today's cascade requires it.
 */
a.tcs-closing__cta {
	color: var(--tcs-orange);
	white-space: nowrap;
	padding-left: 34px;
	padding-right: 34px;
}

/*
 * HOVER OVERRIDE, ORANGE BAND ONLY (code-review fix, 2026-09-04). The
 * comment this replaced reasoned about hover TEXT contrast against the
 * button's own hover fill, but never checked the hover FILL against the
 * band the button sits on: .tcs-btn--dark:hover (motion.css) turns the
 * background var(--tcs-orange) — identical to this band's own background —
 * so on hover the button's fill and its orange-tinted shadow both blend
 * into the band, leaving only floating black text. This is the first
 * placement of .tcs-btn--dark on an orange band (elsewhere it only sits on
 * cream/black). Pinning the background to black on hover keeps the button
 * visible; the shadow token swaps to the darker variant motion.css already
 * defines for a black-on-orange treatment (--tcs-btn-hover-shadow-orange,
 * the same one .tcs-btn--orange:hover uses).
 *
 * `a.tcs-closing__cta:hover`, not the bare `.tcs-btn--dark:hover` it
 * overrides: one type selector plus one class plus :hover outranks two
 * classes plus :hover regardless of source order — same specificity
 * reasoning as the rest-state rule above.
 */
a.tcs-closing__cta:hover,
a.tcs-closing__cta:focus:hover {
	background: var(--tcs-black);
	color: var(--tcs-orange);
	box-shadow: var(--tcs-btn-hover-shadow-orange);
}

/*
 * Same reused ink as the lede above — the artboard's .66 alpha on this exact
 * ground fails AA (4.42:1); .72's composite does not, and the two lines
 * reading as the same "secondary on orange" tone is the correct visual result
 * anyway, not a compromise.
 */
.tcs-closing__save {
	font-size: var(--tcs-fs-closing-save);
	color: var(--tcs-guarantee-copy-ink);
	white-space: nowrap;
}

.tcs-closing__save s {
	text-decoration: line-through;
}

/*
 * The wordmark itself. motion.css's .tcs-wordmark supplies the gradient, the
 * clip and the sweep animation; this sizes the word at the tokens the design
 * system already shipped for it (tokens.css:139-142) and keeps it from
 * wrapping so the sweep travels across one continuous line.
 */
/* The measure the wordmark sizes itself against — see 100cqi below. */
.tcs-closing > .tcs-band__inner {
	container-type: inline-size;
}

.tcs-closing__wordmark {
	display: block;
	/*
	 * Design-audit 2026-09-03: at the token's 232px the word measures ~1620px
	 * inside a 1360px measure, so "thecryptosecret" was cut to "thecryptosec"
	 * at 1440 and to "thecryptosec" again on a phone. The glyph run is ~6.98em
	 * wide in Instrument Sans Bold, so size it from the measure the band
	 * actually gives it (100vw minus both gutters, over 7.05) and let the
	 * token be the ceiling, never the floor.
	 */
	font-size: min(var(--tcs-fs-wordmark), calc((100vw - (2 * var(--tcs-section-x))) / 7.05));
	/*
	 * Sized from the CONTAINER, not the viewport. The .tcs-band__inner that
	 * holds the word caps at 1360px, so above ~1600px wide the viewport
	 * formula reached the 232px token while the box stayed 1360px wide —
	 * and because the word is painted by background-clip: text, glyphs
	 * outside the box have no paint and simply vanished ("thecryptosec").
	 * 100cqi is the inner's real width; the vw line above is the fallback
	 * for browsers without container query units.
	 */
	font-size: min(var(--tcs-fs-wordmark), calc(100cqi / 7.05));
	/* Belt and braces: the paint box always spans the whole glyph run. */
	width: max-content;
	max-width: none;
	line-height: var(--tcs-lh-wordmark);
	padding-bottom: 0.08em;
	letter-spacing: var(--tcs-ls-wordmark);
	font-weight: var(--tcs-fw-bold);
	white-space: nowrap;
}

/* ===========================================================================
 * 3. MOBILE  —  HomeMobile.dc.html:139-155 (pricing), :171-180 (closing)
 * ========================================================================= */

@media (max-width: 768px) {

	/*
	 * ONE COLUMN, FULL WIDTH. The desktop grid becomes a stack: copy first,
	 * card second, matching the artboard's reading order and leaving no
	 * horizontal scroll at 390. minmax(0, 1fr), not a bare 1fr (code-review
	 * fix, 2026-09-04) — same blowout risk as the desktop rule above: a
	 * single auto-min track still lets a long unbroken string push the
	 * column past the viewport, the same convention comparison.css:880/896
	 * and reviews.css:512 already apply to their own single-column stacks.
	 */
	.tcs-pricing__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.tcs-pricing__card {
		padding: var(--tcs-pricing-card-padding-mobile);
		border-radius: var(--tcs-pricing-card-radius-mobile);
	}

	.tcs-pricing__price-now {
		font-size: var(--tcs-fs-pricing-price-mobile);
		letter-spacing: var(--tcs-ls-pricing-price-mobile);
	}

	.tcs-pricing__price-was {
		font-size: var(--tcs-fs-pricing-was-mobile);
	}

	.tcs-pricing__checklist {
		gap: var(--tcs-pricing-checklist-gap-mobile);
	}

	.tcs-pricing__check-text {
		font-size: var(--tcs-fs-pricing-check-mobile);
	}

	/*
	 * THE CLOSING ROW STACKS: headline, then CTA, then the wordmark below —
	 * HomeMobile.dc.html:172-176 draws no side-by-side row at all, just a
	 * headline, a full-width button, and the wordmark under it.
	 */
	.tcs-closing__row {
		flex-direction: column;
		align-items: stretch;
		gap: 22px;
		margin-bottom: 44px;
	}

	.tcs-closing__headline {
		font-size: var(--tcs-fs-closing-h2-mobile);
		letter-spacing: var(--tcs-ls-closing-h2-mobile);
	}

	/* The mobile board shows no lede under the closing headline — just the
	 * headline and the button — so the lede is hidden rather than reflowed
	 * into a cramped column. */
	.tcs-closing__lede {
		display: none;
	}

	.tcs-closing__actions {
		align-items: stretch;
	}

	.tcs-closing__cta {
		width: 100%;
		text-align: center;
	}

	/* The mobile board also drops the "$60.00 · save 50%" line under the
	 * button (HomeMobile.dc.html:174 goes straight from the button to the
	 * wordmark) — hidden for the same reason as the lede above. */
	.tcs-closing__save {
		display: none;
	}

	.tcs-closing__wordmark {
		font-size: min(var(--tcs-fs-wordmark-mobile), calc((100vw - (2 * var(--tcs-section-x-mobile))) / 7.05));
		font-size: min(var(--tcs-fs-wordmark-mobile), calc(100cqi / 7.05));
		margin-top: 44px;
	}
}