/*
 * landing-memphis-overlay.css
 *
 * Memphis identity overlay for the cocovox landing page. Loaded AFTER
 * landing-page.css. Scoped to `.cv-landing` and `.persona-gate` — these are
 * the brand's first-impression surfaces and ALWAYS wear Memphis, regardless
 * of the user's active theme.
 *
 * Why not scope to html.cocovox? — app.html defaults a fresh visitor with
 * prefers-color-scheme: dark to plain `dark`, not `cocovox-dark`. A
 * theme-class-scoped overlay was invisible to ~half of new visitors. The
 * landing IS the brand's first impression — every visitor should see Memphis,
 * regardless of what app-theme they later choose.
 *
 * Implements the 11 changes from "Landing Review v2" (2026-05-18):
 *   1.  Persona gate    → first Memphis surface (3-hue gradient + 4 stamped cards)
 *   2.  Primary CTA     → Memphis stamp + bouncy easing
 *   3.  Hero mascot     → pink+lime ring (NO rotation on the video itself)
 *   4.  Audience toggle → stamped active tab, flat inactive
 *   5.  Trust chips     → stamped + alternating pink/lime/purple
 *   6.  Hero background → three-hue wash (teal → pink) + purple blob
 *   7.  Second-act paper → -2deg tilt + pink+lime stamp
 *   8.  Pillar/village → scrapbook trio (nth-child rotations + clashing icon hues)
 *   9.  Featured pricing → lime fill, pink CTA, "Most picked" stamp, slight tilt
 *   10. DM Serif Display → .cv-section-title and .pricing-card-price
 *   11. Focus rings     → hot pink, 3px, 3px offset
 *
 * Plus: body memphis-confetti background floor (Option C — recommended).
 */

/* ============================================================================
 * Memphis brand tokens — defined directly so the landing wears Memphis even
 * when the active theme isn't cocovox. Values match the design review's
 * palette (teal-900 deep, lime springy, pink hot, purple/coral accents).
 * ============================================================================ */
.cv-landing,
.persona-gate {
	/* Teal scale (primary) */
	--cv-mem-teal-100: oklch(95% 0.05 190);
	--cv-mem-teal-200: oklch(89% 0.09 189);
	--cv-mem-teal-300: oklch(85% 0.13 187);
	--cv-mem-teal-400: oklch(80% 0.14 185);
	--cv-mem-teal-500: oklch(70% 0.12 185);
	--cv-mem-teal-700: oklch(50% 0.10 186);
	--cv-mem-teal-900: oklch(28% 0.07 186);

	/* Lime scale (secondary — Memphis spring green) */
	--cv-mem-lime-200: oklch(90% 0.12 131);
	--cv-mem-lime-300: oklch(86% 0.16 130);
	--cv-mem-lime-400: oklch(83% 0.18 130);
	--cv-mem-lime-500: oklch(80% 0.2 130);
	--cv-mem-lime-700: oklch(56% 0.15 128);

	/* Pink scale (accent — Memphis hot pink) */
	--cv-mem-pink-300: oklch(80% 0.18 350);
	--cv-mem-pink-400: oklch(73% 0.22 350);
	--cv-mem-pink-500: oklch(65% 0.25 350);
	--cv-mem-pink-700: oklch(45% 0.18 352);

	/* Other brand hues */
	--cv-mem-purple-500: oklch(66% 0.19 313);
	--cv-mem-coral-500: oklch(72% 0.15 39);

	/* Hairline border default (light surfaces) */
	--cv-mem-hairline: var(--cv-mem-teal-900);

	/* Memphis cream surface — used by chips/cards. Defined directly (not from
	   theme tokens) because on plain html.dark, --surface-card resolves to a
	   cold noir that turns dark-text-on-Memphis-fills into a contrast failure. */
	--cv-mem-surface-card: oklch(98% 0.01 85);
	/* Cream text — readable on any saturated Memphis background (teal-700, pink-500, purple-500) */
	--cv-mem-cream-text: oklch(98% 0.01 85);
	/* Near-black text — used on hot-pink fills where teal-900 only hits 3.75:1.
	   Pure-black-on-pink-500 is ~6:1 (AA Normal pass). Used by .popular-badge
	   and the featured pricing CTA. */
	--cv-mem-ink-text: oklch(15% 0 0);

	/* Stamp shadow stack — single-color stamps to avoid the "two close shadows
	 * blob together" problem the double-stack creates. The primary CTA still
	 * needs both signature hues, so --cv-mem-shadow uses the double-stamp;
	 * everything else (chips, pricing satellites, FAQ tiles, CTAs hover) uses
	 * single-color variants. */
	--cv-mem-shadow: 4px 4px 0 var(--cv-mem-pink-500), 8px 8px 0 var(--cv-mem-lime-500);
	--cv-mem-shadow-hover: 6px 6px 0 var(--cv-mem-pink-500), 12px 12px 0 var(--cv-mem-lime-500);
	--cv-mem-shadow-soft: 3px 3px 0 var(--cv-mem-pink-400);

	/* Bouncy easing */
	--cv-mem-dur: 280ms;
	--cv-mem-ease: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Confetti tile — 16 brand primitives over a 240px tile (~1.5KB) */
	--cv-mem-confetti: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g opacity='0.62'><circle cx='32' cy='44' r='4.5' fill='%23e85a9b'/><polygon points='98,38 116,62 80,62' fill='%23a8d83a' opacity='0.85'/><g stroke='%23194b4d' stroke-width='3.5' stroke-linecap='round'><line x1='164' y1='28' x2='164' y2='52'/><line x1='152' y1='40' x2='176' y2='40'/></g><path d='M196 60 q8 -12 16 0 t16 0' fill='none' stroke='%238b5cf6' stroke-width='3.5' stroke-linecap='round'/><path d='M0 110 a28 28 0 0 1 28 -28 L0 82 z' fill='%23f08566' opacity='0.82'/><circle cx='120' cy='128' r='13' fill='none' stroke='%23194b4d' stroke-width='3'/><g fill='%23a8d83a'><circle cx='40' cy='150' r='3'/><circle cx='50' cy='158' r='3'/><circle cx='32' cy='162' r='3'/></g><path d='M150 178 a14 14 0 0 1 28 0 z' fill='%23e85a9b' opacity='0.9'/><path d='M198 138 q8 -10 16 0 t16 0' fill='none' stroke='%23a8d83a' stroke-width='3.5' stroke-linecap='round'/><g stroke='%238b5cf6' stroke-width='3.5' stroke-linecap='round'><line x1='208' y1='208' x2='208' y2='226'/><line x1='199' y1='217' x2='217' y2='217'/></g><polygon points='220,12 232,30 208,30' fill='%23194b4d' opacity='0.78'/><circle cx='86' cy='202' r='5' fill='%23f08566'/><g stroke='%238b5cf6' stroke-width='2.6' stroke-linecap='round'><line x1='70' y1='100' x2='82' y2='112'/><line x1='82' y1='100' x2='70' y2='112'/></g><circle cx='168' cy='100' r='6' fill='none' stroke='%23a8d83a' stroke-width='2.6'/><circle cx='12' cy='200' r='3' fill='%23194b4d' opacity='0.6'/></g></svg>");
}

/* Dark mode tweak: lift hairlines from teal-900 (eaten by noir) to teal-300.
 * Detect dark mode via either html.dark, html.cocovox-dark, or any of the
 * other dark themes the user might be in (modern-dark, velvet, circuit, etc.). */
:where(
	html.dark,
	html.cocovox-dark,
	html.modern-dark,
	html.velvet,
	html.circuit,
	html.coral,
	html.digital-precision
) .cv-landing,
:where(
	html.dark,
	html.cocovox-dark,
	html.modern-dark,
	html.velvet,
	html.circuit,
	html.coral,
	html.digital-precision
) .persona-gate {
	--cv-mem-hairline: var(--cv-mem-teal-300);
}

/* ============================================================================
 * Body — paper + memphis confetti background floor
 *
 * Visual signature: the confetti drifts diagonally at glacial speed (90s loop)
 * so the brand floor "breathes." Composite-only animation (background-position
 * is GPU-composited), zero main-thread cost. Pauses for reduced-motion users.
 * ============================================================================ */
body:has(.cv-landing) {
	background-image: var(--cv-mem-confetti);
	background-attachment: fixed;
	background-repeat: repeat;
	background-position: 0 0;
}
@media (prefers-reduced-motion: no-preference) {
	body:has(.cv-landing) {
		animation: cv-mem-confetti-drift 90s linear infinite;
	}
}
@keyframes cv-mem-confetti-drift {
	from { background-position: 0 0; }
	to { background-position: 240px 240px; }
}

/* ============================================================================
 * Card entrance choreography — Memphis stamp-in on scroll.
 *
 * Visual signature: each pillar/village/pricing/persona card fades up from
 * below its final position. The keyframe only specifies the FROM state, so
 * the TO state inherits each card's static rotation — meaning the same
 * keyframe works for cards with different final tilts. Composite-only:
 * `animation-timeline: view()` runs the animation on the compositor thread
 * with zero main-thread cost (regardless of how many cards are on the page).
 *
 * Why this is a moat: the entrance ties the static Memphis tilt directly to
 * scroll. A competitor copying the static tilt without committing to the
 * rest of the system gets a flat reveal; the "Cocovox feel" only emerges
 * when scroll + stamp + tilt all coordinate.
 *
 * The static `transform: rotate(...) !important` per-card rule still wins
 * after animation completes — we use `animation-fill-mode: none` (default)
 * so the rule reasserts at completion.
 * ============================================================================ */
@keyframes cv-mem-card-stamp-in {
	from {
		opacity: 0;
		transform: translateY(20px) rotate(0deg);
	}
	to {
		opacity: 1;
	}
	/* transform intentionally absent from `to` so each card lands at its own
	 * static tilt without per-card keyframes. */
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.cv-landing .pillar-card,
		.cv-landing .village-column,
		.cv-landing .pricing-card {
			animation: cv-mem-card-stamp-in 1ms linear;
			animation-timeline: view();
			animation-range: entry 0% cover 30%;
		}
	}
}

/* Persona-gate card cascade — fires at modal mount, no scroll dependency.
 * 4 cards stagger 120ms apart so the chord is heard one note at a time.
 * `both` = backwards (FROM state before start) + forwards (TO state persists).
 * The scoped PersonaGate.svelte sets `opacity: 0` as the base style for its own
 * entry animation; `both` + the explicit `to { opacity: 1 }` keyframe ensure
 * the Memphis override doesn't leave cards invisible. */
.persona-gate .persona-card {
	animation: cv-mem-card-stamp-in 500ms var(--cv-mem-ease) both;
}
.persona-gate .persona-card-student { animation-delay: 60ms; }
.persona-gate .persona-card-parent { animation-delay: 180ms; }
.persona-gate .persona-card-teacher { animation-delay: 300ms; }
.persona-gate .persona-card-slp,
.persona-gate .persona-card-clinician { animation-delay: 420ms; }
@media (prefers-reduced-motion: reduce) {
	.persona-gate .persona-card { animation: none; }
}

/* ============================================================================
 * 2. Primary CTA — Memphis stamp + bouncy hover
 *
 * Explicit teal-700 background + cream text so the CTA reads against ANY
 * theme's surface (light, dark, cocovox, modern, etc.). Pre-overlay, the hero
 * CTA fell back to dark-on-dark on plain html.dark theme — 1.13:1 contrast.
 * Cream-on-teal-700 ratio is 8.0:1 (AAA).
 * ============================================================================ */
.cv-landing a.cv-button-primary,
.cv-landing .pricing-cta.primary,
.cv-landing button.cv-button-primary {
	background: var(--cv-mem-teal-700);
	color: var(--cv-mem-cream-text);
	border: 2px solid var(--cv-mem-hairline);
	box-shadow: var(--cv-mem-shadow);
	transition:
		transform var(--cv-mem-dur) var(--cv-mem-ease),
		box-shadow var(--cv-mem-dur) var(--cv-mem-ease);
}

/* Secondary CTA — light text on dark themes, dark text on light themes.
 * Without this, the existing landing CSS leaks a brand-blue link color that
 * neither pops nor fits the Memphis palette. */
.cv-landing a.cv-button-secondary,
.cv-landing button.cv-button-secondary {
	color: var(--cv-mem-teal-900);
}
:where(
	html.dark,
	html.cocovox-dark,
	html.modern-dark,
	html.velvet,
	html.circuit,
	html.coral,
	html.digital-precision
) .cv-landing a.cv-button-secondary,
:where(
	html.dark,
	html.cocovox-dark,
	html.modern-dark,
	html.velvet,
	html.circuit,
	html.coral,
	html.digital-precision
) .cv-landing button.cv-button-secondary {
	color: var(--cv-mem-teal-200);
}
.cv-landing a.cv-button-primary:hover,
.cv-landing .pricing-cta.primary:hover,
.cv-landing button.cv-button-primary:hover {
	transform: translateY(-3px) rotate(-1deg) !important;
	box-shadow: var(--cv-mem-shadow-hover);
}
.cv-landing a.cv-button-primary:active,
.cv-landing .pricing-cta.primary:active,
.cv-landing button.cv-button-primary:active {
	transform: scale(0.96) rotate(-1deg) !important;
}

/* Secondary stays flat-but-stamped: hairline border + lime offset */
.cv-landing a.cv-button-secondary {
	border: 2px solid var(--cv-mem-hairline);
	box-shadow: 3px 3px 0 var(--cv-mem-lime-400);
	transition:
		transform var(--cv-mem-dur) var(--cv-mem-ease),
		box-shadow var(--cv-mem-dur) var(--cv-mem-ease);
}
.cv-landing a.cv-button-secondary:hover {
	transform: translateY(-2px) !important;
	box-shadow: 5px 5px 0 var(--cv-mem-lime-400);
}

/* ============================================================================
 * 3. Hero mascot — pink+lime ring, video itself never moves.
 *
 * `overflow: hidden` clips the mascot image/video to the inner circle so the
 * fox reads as framed by the ring rather than bursting through it.
 *
 * Dropped the 4px cream halo (was creating a blobby muddy ring) — now just
 * two offset stamps at 6/14 spacing for clean color separation.
 * ============================================================================ */
.cv-landing .hero-mascot-wrapper {
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--cv-mem-hairline);
	box-shadow:
		6px 6px 0 var(--cv-mem-pink-400),
		14px 14px 0 var(--cv-mem-lime-400);
}

/* ============================================================================
 * 4. Audience toggle — stamped active tab; inactive stays flat
 * ============================================================================ */
.cv-landing .audience-toggle-btn.active {
	border: 2px solid var(--cv-mem-hairline);
	box-shadow: 3px 3px 0 var(--cv-mem-pink-400);
}

/* ============================================================================
 * 5. Trust chips — stamped + alternating pink/lime/purple
 *
 * Explicit dark teal-900 text color: the existing HeroSection.svelte styles
 * inherit a light-cream text from the dark theme that fails 1.63:1 against
 * the new cream chip background. Memphis cream chips need Memphis dark ink.
 * ============================================================================ */
.cv-landing .hero-trust-chip,
.cv-landing .hero-trust-chip > * {
	color: var(--cv-mem-teal-900);
}
.cv-landing .hero-trust-chip {
	background: var(--cv-mem-surface-card);
	border: 1.5px solid var(--cv-mem-hairline);
	box-shadow: 2px 2px 0 var(--cv-mem-pink-400);
	font-weight: 600;
}
.cv-landing .hero-trust-chip:nth-child(3n + 2) {
	box-shadow: 2px 2px 0 var(--cv-mem-lime-500);
}
.cv-landing .hero-trust-chip:nth-child(3n) {
	box-shadow: 2px 2px 0 var(--cv-mem-purple-500);
}

/* ============================================================================
 * 6. Hero background — three-hue wash + purple blob bottom-right.
 * Overrides the 4–8% radial mesh inlined in LandingContent.svelte's hero.
 * ============================================================================ */
.cv-landing .cv-hero::before {
	background-image:
		radial-gradient(
			1100px circle at 8% 0%,
			color-mix(in oklch, var(--cv-mem-teal-300) 28%, transparent) 0%,
			transparent 55%
		),
		radial-gradient(
			900px circle at 100% 8%,
			color-mix(in oklch, var(--cv-mem-pink-300) 22%, transparent) 0%,
			transparent 60%
		),
		radial-gradient(
			600px circle at 92% 100%,
			color-mix(in oklch, var(--cv-mem-purple-500) 14%, transparent) 0%,
			transparent 60%
		) !important;
}
.cv-landing .cv-hero::after {
	background: radial-gradient(
		circle,
		color-mix(in oklch, var(--cv-mem-lime-300) 18%, transparent) 0%,
		transparent 70%
	) !important;
	filter: blur(60px);
}

/* ============================================================================
 * 7. Second-act paper — -2deg tilt + purple+teal stamp.
 *
 * Apply styling to .second-act-frame (the visible device mockup) NOT
 * .second-act-media (the figure wrapper). The frame is ~5px larger than the
 * figure in each dimension, so putting the border/shadow on the figure left
 * the visible content protruding past the stamps. Moving the treatment to
 * the frame makes the border, radius, and shadow all align with what the
 * user actually sees.
 *
 * Purple+teal palette chosen to contrast with the warm device content
 * (gold/coral/peach gradient) and to avoid duplicating the mascot's
 * pink+lime signature.
 * ============================================================================ */
.cv-landing .second-act-frame {
	border: 2px solid var(--cv-mem-hairline);
	border-radius: 18px;
	/* !important needed — .dark .second-act-frame.svelte-XXX has specificity
	 * 0,3,0 (theme class + element + hash class) which beats our 0,2,0 scope. */
	box-shadow:
		6px 6px 0 var(--cv-mem-purple-500),
		14px 14px 0 var(--cv-mem-teal-400) !important;
	transform: rotate(-2deg);
	transition: transform var(--cv-mem-dur) var(--cv-mem-ease);
}
/* Suppress the outer figure's tilt/shadow so we don't double up */
.cv-landing .second-act-media {
	transform: none !important;
	box-shadow: none;
	border: none;
}
.cv-landing .second-act-frame:hover {
	transform: rotate(0deg) translateY(-4px);
}

/* ============================================================================
 * 8. Pillar + village trio — scrapbook tilt + clashing icon hues
 * ============================================================================ */
.cv-landing .pillar-card,
.cv-landing .village-column {
	border: 2px solid var(--cv-mem-hairline);
	transition:
		transform var(--cv-mem-dur) var(--cv-mem-ease),
		box-shadow var(--cv-mem-dur) var(--cv-mem-ease);
}

/* Pillar trio — RESTRAINED. Body-content trios used to wear tilts + stamps
 * just like the persona gate and second-act paper. That made every section
 * look like a "scrapbook moment" and none of them landed as one. Restraint:
 * pillar trio gets ONLY a hairline border. Tilts and stamps are reserved for
 * the signature surfaces (persona gate / second-act / promise / pricing-popular). */
.cv-landing .pillar-card:nth-child(1),
.cv-landing .pillar-card:nth-child(2),
.cv-landing .pillar-card:nth-child(3) {
	box-shadow: none;
	transform: none !important;
}
.cv-landing .pillar-card:hover {
	transform: translateY(-3px) !important;
}

/* Per-card icon hue inside pillar trio */
.cv-landing .pillar-card:nth-child(1) [class*='-icon'] {
	background: var(--cv-mem-lime-300);
	color: var(--cv-mem-teal-900);
}
.cv-landing .pillar-card:nth-child(2) [class*='-icon'] {
	background: var(--cv-mem-pink-300);
	color: var(--cv-mem-teal-900);
}
.cv-landing .pillar-card:nth-child(3) [class*='-icon'] {
	background: color-mix(in oklch, var(--cv-mem-purple-500) 30%, white);
	color: var(--cv-mem-teal-900);
}

/* Village trio — same rule as pillar, different selector.
 * Village columns are interleaved with .village-connector siblings, so the
 * actual columns sit at DOM child positions 1/3/5 (not 1/2/3).
 * Single-color stamps so the three cards ring as a chord, not three blobs. */
.cv-landing .village-column:nth-child(1) {
	transform: rotate(-1deg) !important;
	box-shadow: 5px 5px 0 var(--cv-mem-lime-400);
}
.cv-landing .village-column:nth-child(3) {
	transform: rotate(0.6deg) !important;
	box-shadow: 5px 5px 0 var(--cv-mem-pink-400);
}
.cv-landing .village-column:nth-child(5) {
	transform: rotate(-0.4deg) !important;
	box-shadow: 5px 5px 0 var(--cv-mem-purple-500);
}
.cv-landing .village-column:hover {
	transform: rotate(0) translateY(-4px) !important;
}

/* Per-card icon hue inside village trio — same clashing chord */
.cv-landing .village-column:nth-child(1) [class*='-icon'] {
	color: var(--cv-mem-lime-700);
}
.cv-landing .village-column:nth-child(3) [class*='-icon'] {
	color: var(--cv-mem-pink-500);
}
.cv-landing .village-column:nth-child(5) [class*='-icon'] {
	color: var(--cv-mem-purple-500);
}

/* ============================================================================
 * 9. Featured pricing tier — stamped, lifted, "Most picked" pill.
 *
 * RESTRAINT: pre-overlay this rule put a stamp shadow on every pricing tier,
 * which made the "featured" tier visually indistinct — all three looked
 * equally stamped. Now satellite tiers (Family, Educator) get ONLY a hairline
 * border. Only the popular tier gets the full Memphis stamp treatment.
 * Featured-as-yes-answer reads at a glance.
 * ============================================================================ */
.cv-landing .pricing-card {
	border: 2px solid var(--cv-mem-hairline);
	box-shadow: none;
	transition:
		transform var(--cv-mem-dur) var(--cv-mem-ease),
		box-shadow var(--cv-mem-dur) var(--cv-mem-ease);
}
.cv-landing .pricing-card:hover {
	transform: translateY(-4px) !important;
}

/* Light: lime-200 fill + single pink stamp. Dark: lime-500 @ 30% over noir
 * + single pink stamp. Switched away from the pink+lime double-stamp because
 * the lime fill already provides the "lime" half of the chord — adding a
 * lime shadow on a lime card was creating a green blob. Single pink stamp
 * cleanly contrasts the lime fill. */
.cv-landing .pricing-card.popular {
	background: var(--cv-mem-lime-200);
	border: 2px solid var(--cv-mem-teal-900);
	box-shadow: 6px 6px 0 var(--cv-mem-pink-500);
	transform: rotate(-0.6deg) !important;
	position: relative;
}
:where(
	html.dark,
	html.cocovox-dark,
	html.modern-dark,
	html.velvet,
	html.circuit,
	html.coral,
	html.digital-precision
) .cv-landing .pricing-card.popular {
	background: color-mix(in oklch, var(--cv-mem-lime-500) 30%, var(--surface-card, #1f1a24));
	border: 2px solid var(--cv-mem-lime-300);
	box-shadow: 6px 6px 0 var(--cv-mem-pink-500);
}
.cv-landing .pricing-card.popular:hover {
	transform: rotate(0) translateY(-4px) !important;
}

/* Featured CTA: pink with teal-900 offset.
 * Text is near-black ink (not white, not teal) on hot pink. White-on-pink-500
 * fails WCAG AA at 3.7:1; teal-900-on-pink-500 only hits 3.75:1. Near-black ink
 * (--cv-mem-ink-text) gives ~6:1 — AA Normal pass. */
.cv-landing .pricing-card.popular .pricing-cta,
.cv-landing .pricing-card.popular a.cv-button-primary,
.cv-landing .pricing-card.popular button.cv-button-primary {
	background: var(--cv-mem-pink-500);
	color: var(--cv-mem-ink-text);
	border: 2px solid var(--cv-mem-teal-900);
	box-shadow: 3px 3px 0 var(--cv-mem-teal-900);
	font-weight: 700;
}
.cv-landing .pricing-card.popular .pricing-cta:hover {
	transform: translateY(-2px) !important;
	box-shadow: 5px 5px 0 var(--cv-mem-teal-900);
}

/* Restyle the existing .popular-badge as a Memphis stamp pill.
 * Near-black ink text on hot pink (same contrast rationale as featured CTA). */
.cv-landing .pricing-card.popular .popular-badge {
	background: var(--cv-mem-pink-500);
	color: var(--cv-mem-ink-text);
	border: none;
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	box-shadow: 2px 2px 0 var(--cv-mem-teal-900);
	filter: none;
}

/* ============================================================================
 * 10. DM Serif Display anchors section heads + price amounts
 *
 * Plain html.dark defines --font-family-heading as Inter, NOT DM Serif Display.
 * Using var(--font-family-heading, 'DM Serif Display') falls back to Inter
 * because the var IS defined (just to Inter). Solution: list DM Serif Display
 * directly first, var() second, so the browser picks DM Serif if loaded.
 *
 * Targeting every section heading class because each Svelte section has its
 * own scoped class (.promise-title, .faq-heading, .try-it-title, etc.) and
 * scoped-class hashes give them higher specificity than .cv-section-title.
 * ============================================================================ */
.cv-landing .cv-section-title,
.cv-landing .pricing-card-price,
.cv-landing .promise-title,
.cv-landing .faq-heading,
.cv-landing .try-it-title,
.cv-landing .mid-page-cta-title,
.cv-landing .toolkit-title,
.cv-landing .toolkit-overview h2,
.cv-landing .accessibility-section h2.cv-section-title {
	font-family:
		'DM Serif Display', 'DM Serif Display Fallback', Georgia, 'Times New Roman',
		serif;
	font-weight: 400;
	letter-spacing: -0.01em;
}

/* ============================================================================
 * 12. Accessibility keyboard demo pills — fix Critical AA contrast failures.
 *
 * Pre-overlay these were 1.10–1.30:1 (severe fail). The pill colors live in
 * --landing-pill-{purple,blue,green}-text tokens, but on plain html.dark
 * they're tinted shades that disappear against the dark-themed pill bg.
 * Override with high-saturation Memphis fills + dark ink text — same pattern
 * the pricing-popular CTA uses (near-black on hot pink = AA pass).
 * ============================================================================ */
.cv-landing .keyboard-pill-tone {
	background: var(--cv-mem-pink-400);
	color: var(--cv-mem-ink-text);
	border: 1px solid var(--cv-mem-pink-500);
}
.cv-landing .keyboard-pill-voice {
	background: var(--cv-mem-teal-300);
	color: var(--cv-mem-ink-text);
	border: 1px solid var(--cv-mem-teal-500);
}
.cv-landing .keyboard-pill-subject {
	background: var(--cv-mem-lime-400);
	color: var(--cv-mem-ink-text);
	border: 1px solid var(--cv-mem-lime-500);
}

/* ============================================================================
 * 13. Toolkit trio — same scrapbook treatment as pillar/village.
 * Three category cards (Understand It / Practice It / Stay Organized) in a row.
 * ============================================================================ */
.cv-landing .toolkit-category,
.cv-landing .toolkit-card,
.cv-landing .toolkit-overview-card {
	border: 2px solid var(--cv-mem-hairline);
	transition:
		transform var(--cv-mem-dur) var(--cv-mem-ease),
		box-shadow var(--cv-mem-dur) var(--cv-mem-ease);
}
/* Toolkit trio — RESTRAINED to a hairline border only. Same reasoning as
 * pillar: body trios don't need to compete with the signature moments. */
.cv-landing .toolkit-category:nth-child(1),
.cv-landing .toolkit-card:nth-child(1),
.cv-landing .toolkit-overview-card:nth-child(1),
.cv-landing .toolkit-category:nth-child(2),
.cv-landing .toolkit-card:nth-child(2),
.cv-landing .toolkit-overview-card:nth-child(2),
.cv-landing .toolkit-category:nth-child(3),
.cv-landing .toolkit-card:nth-child(3),
.cv-landing .toolkit-overview-card:nth-child(3) {
	box-shadow: none;
	transform: none !important;
}
.cv-landing .toolkit-category:hover,
.cv-landing .toolkit-card:hover,
.cv-landing .toolkit-overview-card:hover {
	transform: translateY(-3px) !important;
}
.cv-landing .toolkit-category:hover,
.cv-landing .toolkit-card:hover,
.cv-landing .toolkit-overview-card:hover {
	transform: rotate(0) translateY(-4px) scale(1.02) !important;
}

/* ============================================================================
 * 14. FAQ — section heading + active filter tab + cards
 * ============================================================================ */
.cv-landing .faq-category-tabs .btn-primary,
.cv-landing .faq-filter-tab.active,
.cv-landing .faq-tab.active,
.cv-landing [class*='faq-filter'].active {
	border: 2px solid var(--cv-mem-hairline);
	box-shadow: 3px 3px 0 var(--cv-mem-pink-400);
}
.cv-landing .faq-card,
.cv-landing .faq-item,
.cv-landing [class*='faq-card'],
.cv-landing [class*='faq-item'] {
	border: 1.5px solid var(--cv-mem-hairline);
	/* RESTRAINT: FAQ tiles are informational — no stamp shadow. Hairline only
	 * so the page's signature moments (persona gate / second-act / promise /
	 * pricing-popular) get to be the only stamped surfaces. */
	box-shadow: none;
	/* FAQ items shipped with border-radius: 0 — sharp corners stuck out
	 * against the rounded pillar/village/pricing/toolkit cards. Match the
	 * 18px Memphis card radius for visual consistency. */
	border-radius: 18px;
	transition: transform var(--cv-mem-dur) var(--cv-mem-ease);
}
.cv-landing .faq-card:hover,
.cv-landing .faq-item:hover {
	transform: translateY(-2px) !important;
}

/* ============================================================================
 * 15. Promise section — layout + Memphis treatment now lives in the
 * component's scoped style (PromiseSection.svelte), matching the Second-Act
 * two-column pattern: eyebrow + serif heading + lede on the left, tilted
 * Memphis-stamped card with the three promises on the right.
 * ============================================================================ */

/* ============================================================================
 * 16. Footer — Memphis hooks: column headers in mono-eyebrow style,
 * Subscribe button gets Memphis stamp, copyright row gets the brand floor.
 * ============================================================================ */
.cv-landing .cv-footer .footer-column-title,
.cv-landing footer .footer-column-title,
.cv-landing footer [class*='column-title'],
.cv-landing footer h3,
.cv-landing footer h4 {
	font-family:
		'JetBrains Mono', 'SF Mono', ui-monospace, 'Menlo', 'Consolas', monospace;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--cv-mem-teal-300);
}
.cv-landing .cv-footer .newsletter-submit,
.cv-landing footer button[type='submit'],
.cv-landing footer .subscribe-button {
	background: var(--cv-mem-teal-700);
	color: var(--cv-mem-cream-text);
	border: 2px solid var(--cv-mem-hairline);
	box-shadow: 3px 3px 0 var(--cv-mem-pink-400);
	font-weight: 700;
	transition:
		transform var(--cv-mem-dur) var(--cv-mem-ease),
		box-shadow var(--cv-mem-dur) var(--cv-mem-ease);
}
.cv-landing .cv-footer .newsletter-submit:hover,
.cv-landing footer button[type='submit']:hover {
	transform: translateY(-2px);
	box-shadow: 5px 5px 0 var(--cv-mem-pink-400);
}

/* ============================================================================
 * 19. Landing header / nav bar — Memphis treatment.
 *
 * Pre-overlay defects:
 *   - All nav links rendered with underline 1px (global anchor underline
 *     leaking into nav — anti-pattern; underlines belong on content links)
 *   - Nav link color resolved to bright blue oklch(0.73 0.12 256) on plain
 *     html.dark — not on-brand
 *   - Login button used a blue→blue gradient with light-blue text (low
 *     contrast + off-palette)
 *   - Header had no Memphis identity at all
 *
 * Fixes:
 *   - Nav links: drop the underline, switch to cream text with teal hover
 *     accent + a hot-pink swipe under-line that grows on hover (deliberate
 *     ink swoop, NOT a default underline)
 *   - Login button: Memphis primary CTA treatment matching the hero (teal-700
 *     fill, cream text, pink+lime stamp shadow, bouncy hover)
 *   - Header: teal-300 hairline bottom border so the nav separates cleanly
 *     from the content scrim
 * ============================================================================ */
.cv-landing .landing-header,
.cv-landing-header {
	border-bottom: 1px solid color-mix(in oklch, var(--cv-mem-teal-300) 35%, transparent);
}

/* Nav links — kill the underline, use cream with hover swipe */
.cv-landing .landing-nav-link {
	color: var(--cv-mem-cream-text);
	text-decoration: none !important;
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
	position: relative;
	padding: 0.5rem 0.875rem;
	border-radius: 8px;
	transition:
		color 200ms var(--cv-mem-ease),
		background 200ms var(--cv-mem-ease);
}
.cv-landing .landing-nav-link::after {
	content: '';
	position: absolute;
	left: 0.875rem;
	right: 0.875rem;
	bottom: 0.35rem;
	height: 3px;
	background: var(--cv-mem-pink-500);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 220ms var(--cv-mem-ease);
}
.cv-landing .landing-nav-link:hover {
	color: var(--cv-mem-teal-200);
	background: color-mix(in oklch, var(--cv-mem-teal-300) 10%, transparent);
}
.cv-landing .landing-nav-link:hover::after {
	transform: scaleX(1);
}
.cv-landing .landing-nav-link:focus-visible {
	outline: 3px solid var(--cv-mem-pink-500);
	outline-offset: 2px;
}

/* Logo wordmark — slightly tighten so the coral stamp sits proud against
 * the new hairline header */
.cv-landing .landing-logo-img {
	transition: transform 200ms var(--cv-mem-ease);
}
.cv-landing .landing-logo:hover .landing-logo-img {
	transform: rotate(-2deg) scale(1.04);
}

/* Login button — full Memphis primary CTA. Replace blue gradient + light blue
 * text with the brand's teal-700 fill + cream text + pink+lime stamp. */
.cv-landing .landing-login-btn {
	background: var(--cv-mem-teal-700) !important;
	color: var(--cv-mem-cream-text) !important;
	border: 2px solid var(--cv-mem-hairline);
	box-shadow: 3px 3px 0 var(--cv-mem-pink-500);
	font-weight: 700;
	letter-spacing: 0.02em;
	transition:
		transform var(--cv-mem-dur) var(--cv-mem-ease),
		box-shadow var(--cv-mem-dur) var(--cv-mem-ease);
}
.cv-landing .landing-login-btn:hover {
	background: var(--cv-mem-teal-700) !important;
	transform: translateY(-2px) rotate(-1deg);
	box-shadow:
		4px 4px 0 var(--cv-mem-pink-500),
		8px 8px 0 var(--cv-mem-lime-400);
}
.cv-landing .landing-login-btn:active {
	transform: scale(0.96) rotate(-1deg);
}

/* Mobile menu toggle (hamburger) — Memphis hairline frame */
.cv-landing .landing-mobile-menu-toggle,
.cv-landing button[aria-label*='menu' i] {
	background: transparent;
	border: 1.5px solid var(--cv-mem-hairline);
	border-radius: 10px;
	color: var(--cv-mem-cream-text);
	transition: box-shadow 200ms var(--cv-mem-ease);
}
.cv-landing .landing-mobile-menu-toggle:hover,
.cv-landing button[aria-label*='menu' i]:hover {
	box-shadow: 2px 2px 0 var(--cv-mem-pink-500);
}

/* Theme toggle button — same hairline frame so it matches the menu toggle */
.cv-landing .theme-toggle,
.cv-landing button[aria-label*='theme' i],
.cv-landing button[aria-label*='dark' i],
.cv-landing button[aria-label*='light' i] {
	background: transparent;
	border: 1.5px solid var(--cv-mem-hairline);
	border-radius: 999px;
	color: var(--cv-mem-cream-text);
	transition: box-shadow 200ms var(--cv-mem-ease);
}
.cv-landing .theme-toggle:hover,
.cv-landing button[aria-label*='theme' i]:hover {
	box-shadow: 2px 2px 0 var(--cv-mem-lime-500);
}

/* ============================================================================
 * 17. Pricing feature "highlight" text — pre-existing low-contrast issue.
 * Landing-page.css uses a bright-teal decorative color (oklch 0.68 0.13 228)
 * that only hits 3.82:1 on cards. Switch to teal-300 for AAA on dark surfaces.
 * ============================================================================ */
.cv-landing .pricing-feature.highlight,
.cv-landing .pricing-feature.highlight span,
.cv-landing li.pricing-feature.highlight,
.cv-landing li.pricing-feature.highlight > * {
	color: var(--cv-mem-lime-300);
}

/* ============================================================================
 * 18. Try It Free button — pre-existing 2.05:1 fail.
 * The button bg is transparent on a red/pink gradient, with light teal text
 * that disappears against the bright gradient. Give it the same Memphis CTA
 * treatment as the hero primary.
 * ============================================================================ */
.cv-landing .try-it-button,
.cv-landing button.try-it-button {
	background: var(--cv-mem-teal-900);
	color: var(--cv-mem-cream-text);
	border: 2px solid var(--cv-mem-cream-text);
	box-shadow: 3px 3px 0 var(--cv-mem-pink-400), 6px 6px 0 var(--cv-mem-lime-400);
	font-weight: 700;
	transition:
		transform var(--cv-mem-dur) var(--cv-mem-ease),
		box-shadow var(--cv-mem-dur) var(--cv-mem-ease);
}
.cv-landing .try-it-button:hover {
	transform: translateY(-3px) rotate(-1deg);
	box-shadow: 5px 5px 0 var(--cv-mem-pink-400), 10px 10px 0 var(--cv-mem-lime-400);
}

/* ============================================================================
 * 11. Focus rings — hot pink 3px, 3px offset
 * ============================================================================ */
.cv-landing *:focus-visible {
	outline: 3px solid var(--cv-mem-pink-500);
	outline-offset: 3px;
	border-radius: inherit;
}

/* ============================================================================
 * 1. Persona gate — the big one. First Memphis surface a cold visitor sees.
 *
 *    - 3-hue gradient backdrop on the modal scrim
 *    - 2x2 grid of 4 cards, each at a distinct rotation + distinct stamp hue
 *    - V3 icon treatment: glyph IS the color, no chip container
 *    - "Skip — just looking" gets monospace eyebrow styling
 * ============================================================================ */

/* Three-hue gradient backdrop on the modal scrim itself.
 * !important needed because PersonaGate.svelte's scoped style hashes the
 * .persona-gate selector for an extra (0,1,0) of specificity. */
.persona-gate {
	background: linear-gradient(
		135deg,
		color-mix(in oklch, var(--cv-mem-teal-200) 60%, var(--surface-background, oklch(99% 0.01 85))) 0%,
		color-mix(in oklch, var(--cv-mem-pink-300) 35%, var(--surface-background, oklch(99% 0.01 85))) 55%,
		color-mix(in oklch, var(--cv-mem-lime-200) 45%, var(--surface-background, oklch(99% 0.01 85))) 100%
	) !important;
}

/* Cards: scrapbook tilt + distinct stamp hue + clean hairline border */
.persona-gate .persona-card {
	border: 2px solid var(--cv-mem-hairline);
	background: var(--cv-mem-surface-card);
	transition:
		transform var(--cv-mem-dur) var(--cv-mem-ease),
		box-shadow var(--cv-mem-dur) var(--cv-mem-ease);
}
.persona-gate .persona-card-student {
	transform: rotate(-1.4deg) !important;
	box-shadow: 4px 4px 0 var(--cv-mem-lime-400);
}
.persona-gate .persona-card-parent {
	transform: rotate(1deg) !important;
	box-shadow: 4px 4px 0 var(--cv-mem-pink-400);
}
.persona-gate .persona-card-teacher {
	transform: rotate(0.6deg) !important;
	box-shadow: 4px 4px 0 var(--cv-mem-purple-500);
}
.persona-gate .persona-card-slp,
.persona-gate .persona-card-clinician {
	transform: rotate(-0.8deg) !important;
	box-shadow: 4px 4px 0 var(--cv-mem-coral-500);
}
.persona-gate .persona-card:hover {
	transform: rotate(0) translateY(-6px) scale(1.02) !important;
}

/* Icon treatment — glyph IS the color, no decoration behind it.
 *
 * Originally each card had a geometric accent shape (circle/triangle/half-disc/
 * rotated-square) sitting behind the glyph per the design review's "V3 rule."
 * In practice that added a 5th distinct signal per card on top of the four
 * already there (rotation + stamp color + glyph color + title), creating
 * visual clutter that competed with the icon itself. Restrained: glyph color
 * carries the chord, card stamp + rotation differentiate the card. */
.persona-gate .persona-card-icon {
	background: transparent;
	border-radius: 0;
	width: 88px;
	height: 88px;
	position: relative;
	overflow: visible;
	color: inherit;
}
.persona-gate .persona-card-icon :global(svg),
.persona-gate .persona-card-icon svg {
	width: 56px;
	height: 56px;
	stroke-width: 2;
}

/* Student — lime-700 glyph */
.persona-gate .persona-card-student .persona-card-icon {
	color: var(--cv-mem-lime-700);
}
/* Parent — pink-500 glyph */
.persona-gate .persona-card-parent .persona-card-icon {
	color: var(--cv-mem-pink-500);
}
/* Teacher — purple-500 glyph */
.persona-gate .persona-card-teacher .persona-card-icon {
	color: var(--cv-mem-purple-500);
}
/* SLP / clinician — coral-500 glyph */
.persona-gate .persona-card-slp .persona-card-icon,
.persona-gate .persona-card-clinician .persona-card-icon {
	color: var(--cv-mem-coral-500);
}

/* Disable per-persona hover background overrides in landing-page.css that
 * put a teal-tinted chip back behind the glyph. */
.persona-gate .persona-card:hover .persona-card-icon {
	background: transparent;
	transform: scale(1.08);
}

/* Skip link → monospace eyebrow */
.persona-gate .persona-gate-skip {
	font-family:
		'JetBrains Mono', 'SF Mono', ui-monospace, 'Menlo', 'Consolas', monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--cv-mem-teal-900);
	background: transparent;
	border: 1.5px solid transparent;
	opacity: 0.85;
}
.persona-gate .persona-gate-skip:hover {
	border-color: var(--cv-mem-hairline);
	opacity: 1;
	background: transparent;
	box-shadow: 2px 2px 0 var(--cv-mem-pink-400);
}

/* ============================================================================
 * Reduced motion — drop transforms but keep the stamp shadows.
 * ============================================================================ */
@media (prefers-reduced-motion: reduce) {
	.cv-landing *,
	.persona-gate * {
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}

/* ============================================================================
 * Mobile — kill rotations under 640px (shapes clip awkwardly).
 * ============================================================================ */
@media (max-width: 640px) {
	.cv-landing .pillar-card,
	.cv-landing .village-column,
	.cv-landing .second-act-media,
	.cv-landing .pricing-card.popular,
	.persona-gate .persona-card {
		transform: none !important;
	}
}