/* ==========================================================================
 * vocab.css — Joe Harvey's house class vocabulary. v1.3.5 (2026-07-21)
 * ==========================================================================
 * THIS FILE IS THE CANONICAL HOME OF THE OPERATOR-AUTHORED CLASS SYSTEM.
 *
 * Rules (doctrine, ratified 2026-07-20):
 *   1. Every class here is Joe's, under Joe's names. No renames, no "use X
 *      instead" demotion comments, no parallel inventions without sign-off.
 *   2. Every fold gets memorialized in the Design Classes tab, same change.
 *   3. Custom CSS editor = per-site scratchpad; proven patterns graduate here.
 *   4. Single-breakpoint discipline: 768px.
 *   5. !important banned except viewport-visibility utilities (existence rules
 *      are absolute by design). Recurring !important = a missing token.
 *   6. Consumes brand tokens + vocab tokens below so identical markup renders
 *      in each site's own skin.
 *   7. RESETS LIVE AT LAYER 0. Any reset in this file wears :where() — zero
 *      specificity — so no class rule can ever lose margin/padding to a
 *      reset by source-order tiebreak. Ratified after the v1.3.4 tabs bug:
 *      vocab's own .cae * reset (class strength, late in file) was killing
 *      the padding of every earlier (0,1,0) rule on .cae-wrapped pages.
 *      DevTools receipt: vocab.css:409 striking vocab.css:226.
 *
 * v1.3.5: SELF-POISONING FIX — .cae * and .cae a resets in 9.1 dropped to
 *       :where() per new rule 7. Author-origin still beats browser defaults
 *       at zero specificity; every class in this file now beats the resets
 *       regardless of order.
 * v1.3.4: TABS GRADUATED (Joe's ruling) — the .fcs-topic-tabs family moved
 *       here from main.css with survival fallbacks (--max-width 84%,
 *       --brand-white #ffffff, --font-serif inherit). The one !important
 *       (mobile background-image:none) overrides an INLINE style.
 * v1.3.3: h2.underline added — the main.css gold-bar h2 dress as an opt-in
 *       class for templates that don't load main.css.
 * v1.3.2: BAND INK ENFORCEMENT — .page-color-band paints unclassed children
 *       at class strength via :where() child list.
 * v1.3.1: Breakpoint RULING: doctrine holds — CAE section system folded from
 *       880/560 down to the single house 768, phone-true values.
 * v1.3: CAE SECTION SYSTEM folded in (section 9) from the six SaaS PHP page
 *       templates. Names unchanged; fold decisions logged at section header.
 * v1.2: stripe-title became SELF-CONTAINED (own band bg + ink).
 * v1.1: .white family lost its !important (wins by cascade order).
 * ========================================================================== */

:root {
	--band-bg:   var(--brand-primary);
	--band-ink:  #ffffff;
	--vocab-inset: 8%;
}

/* --------------------------------------------------------------------------
 * 1. LAYOUT — flex sections
 * -------------------------------------------------------------------------- */
.flex-container { display: flex; flex-wrap: wrap; gap: 0; }
.flex-item { flex: 1 1 calc(25% - 1rem); box-sizing: border-box; padding: .25rem 1rem; }
.flex-container.cols-2 > .flex-item { flex-basis: calc(50% - 1rem); }
.flex-container.cols-3 > .flex-item { flex-basis: calc(33.333% - 1rem); }
.flex-container.cols-4 > .flex-item { flex-basis: calc(25% - 1rem); }
@media screen and (max-width: 768px) { .flex-container { flex-direction: column; } }

/* --------------------------------------------------------------------------
 * 2. BANDS — full-bleed brand-color sections
 * -------------------------------------------------------------------------- */
.page-color-band {
	background: var(--band-bg);
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	color: var(--band-ink);
	padding: 1.5rem 1rem;
	text-align: center;
}
/* Band ink enforcement (v1.3.2): page baselines that color elements DIRECTLY
 * (e.g. the Content template's :where(.cae .doc) p) beat the band's
 * INHERITED ink. This paints unclassed band children at class strength
 * (0,1,0): beats element baselines, ties with .white and loses that tie by
 * source order — .white is declared later, so classed children still win. */
.page-color-band :where(p, ul, ol, li, h2, h3, h4, strong, em) { color: inherit; }
.band-inset { padding-left: var(--vocab-inset); padding-right: var(--vocab-inset); }

/* --------------------------------------------------------------------------
 * 3. TEXT UTILITIES  (no !important — win by cascade order)
 * -------------------------------------------------------------------------- */
.center { text-align: center; }
.white { color: var(--band-ink); text-align: center; }
h2.white { font-size: 24px; color: var(--band-ink); text-align: center; }
h3.white { font-size: 20px; color: var(--band-ink); text-align: center; }
/* The gold-bar heading dress. main.css paints this on EVERY h2 as base
 * typography; as a CLASS it travels to templates that don't load main.css
 * (Content, Landing Shell). Same recipe both places — one look, two routes. */
h2.underline {
	color: var(--brand-primary);
	border-bottom: 3px solid var(--brand-accent);
	padding-bottom: .4rem;
	margin-top: 2.5rem;
}
h3.underline {
	color: var(--brand-primary);
	border-bottom: 3px solid var(--brand-accent);
	padding-bottom: .4rem;
	margin-top: 2.5rem;
	font-size: 24px;
}

/* Stripe title — self-contained full-bleed colored heading stripe.
 * The "2026 Top Rated DUI Lawyer" bar: its OWN band background + ink, so it
 * is legible standalone (v1.1 carried band-ink with no background = invisible
 * on a white page). Mobile-first: base carries everything unconditional at
 * mobile sizing; the media query overrides ONLY font-size, same selector, so
 * it wins by order — no !important. */
h1.stripe-title {
	background: var(--band-bg);
	color: var(--band-ink);
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	padding: 14px var(--vocab-inset);
	font-size: 26px;
	line-height: 1.2;
	text-align: center;
}
@media screen and (min-width: 769px) { h1.stripe-title { font-size: 36px; } }

/* --------------------------------------------------------------------------
 * 4. VISIBILITY — show/hide by viewport (the ONE place !important is required)
 * -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
	.mobile-only  { display: none !important; }
	.mobileApp    { display: none !important; }
	.mobileAppB   { display: none !important; }
	.topApp       { display: none !important; }
}
@media screen and (max-width: 768px) { .desktop-only { display: none !important; } }

@media only screen and (max-width: 768px) {
	.topApp { text-align: center; padding-top: 15px; padding-bottom: 15px; margin: auto; background: var(--brand-dark); }
	.topApp a { text-align: center; padding-top: 15px; padding-bottom: 15px; color: var(--brand-white, #ffffff); font-size: 18px; text-decoration: none; margin: auto; }
	.mobileApp { margin-bottom: 20px; text-align: center; margin-top: 20px; font-size: 18.5px; line-height: 1.5em; }
	.mobileAppB { margin-bottom: 125px; text-align: center; margin-top: 20px; font-size: 18.5px; line-height: 1.5em; }
}

/* --------------------------------------------------------------------------
 * 5. MEDIA — image utility (retires the inline-style span wrapper)
 * -------------------------------------------------------------------------- */
img.media {
	display: block;
	width: 80%;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
img.media-full { width: 100%; }

/* --------------------------------------------------------------------------
 * 6. TESTIMONIAL
 * -------------------------------------------------------------------------- */
.testimonial {
	font-style: italic;
	font-size: 1.15em;
	text-align: center;
	max-width: 46rem;
	margin: 2rem auto;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
 * 7. INTRO — lead paragraph
 * -------------------------------------------------------------------------- */
.intro { font-size: 1.15em; line-height: 1.6; }

/* --------------------------------------------------------------------------
 * 8. TABS — the .fcs-topic-tabs family. GRADUATED here from main.css
 * 2026-07-21 (Joe's ruling; rule 3 — proven patterns graduate) so editable
 * tabs work on every template, including cae templates that never load
 * main.css. Editable tabs still need the OTHER two legs:
 *   - kses-allowances.php (input/label survive non-admin saves)
 *   - tab-wpautop-fix.php (wpautop protector — mandatory; wpautop breaks the
 *     input+label+panel adjacency the pure-CSS toggle depends on)
 * Markup pattern lives in the Design Classes tab / the Pattern Library page.
 * Pure CSS toggle via radio inputs + sibling combinators (zero JS). All N
 * topic bodies render in HTML for crawler + AEO citation.
 * -------------------------------------------------------------------------- */
.fcs-topic-tabs {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 4rem 1.5rem;
	overflow: hidden;
}
.fcs-topic-tabs-overlay {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
	z-index: 0;
}
.fcs-topic-tabs-inner {
	position: relative;
	z-index: 1;
	max-width: var(--max-width, 84%);
	margin: 0 auto;
}
.fcs-topic-tabs-heading {
	text-align: center;
	margin: 0 0 2rem;
	font-size: 1.85rem;
	color: var(--brand-primary);
	font-weight: 400;
}

/* Tab strip — CSS Grid: labels on row 1, single shared panel slot on row 2 */
.fcs-topic-tabs-strip {
	display: grid;
	gap: 0;
	border-top: 3px solid var(--brand-primary);
}
.fcs-tabs-3 .fcs-topic-tabs-strip { grid-template-columns: repeat(3, 1fr); }
.fcs-tabs-4 .fcs-topic-tabs-strip { grid-template-columns: repeat(4, 1fr); }
.fcs-tabs-6 .fcs-topic-tabs-strip { grid-template-columns: repeat(6, 1fr); }

/* Hide radios visually but keep keyboard-accessible */
.fcs-topic-tabs-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Labels = clickable tab triggers, sit in row 1 */
.fcs-topic-tabs-label {
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 1.25rem;
	background: var(--brand-primary);
	color: var(--brand-white, #ffffff);
	font-family: var(--font-serif, inherit);
	font-size: 1.05rem;
	cursor: pointer;
	border-right: 1px solid rgba(255, 255, 255, 0.15);
	transition: background 0.2s ease, color 0.2s ease;
	text-align: center;
	line-height: 1.3;
}
.fcs-topic-tabs-label:last-of-type { border-right: none; }
.fcs-topic-tabs-label:hover { background: var(--brand-dark); }

/* Active state: input :checked + its label = lighter, accent border */
.fcs-topic-tabs-radio:checked + .fcs-topic-tabs-label {
	background: var(--brand-bg);
	color: var(--brand-primary);
	font-weight: 700;
	box-shadow: inset 0 -3px 0 var(--brand-accent);
}

/* Keyboard focus visible on label when radio is focused */
.fcs-topic-tabs-radio:focus + .fcs-topic-tabs-label {
	outline: 3px solid var(--brand-accent);
	outline-offset: -3px;
}

/* Panels: stacked in row 2, hidden by default, only checked one visible */
.fcs-topic-tabs-panel {
	grid-row: 2;
	grid-column: 1 / -1;
	display: none;
	background: var(--brand-bg);
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
	min-height: 360px;
}
.fcs-topic-tabs-radio:checked + .fcs-topic-tabs-label + .fcs-topic-tabs-panel {
	display: block;
}
.fcs-topic-tabs-panel-inner {
	padding: 2.5rem 2rem;
	max-width: 720px;
}
.fcs-topic-tabs-panel-title {
	color: var(--brand-primary);
	margin: 0 0 1rem;
	font-size: 1.5rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.fcs-topic-tabs-panel-body {
	color: var(--brand-text);
	font-size: 1rem;
	line-height: 1.7;
}
.fcs-topic-tabs-panel-body p { margin: 0 0 1em; }
.fcs-topic-tabs-panel-body p:last-child { margin: 0; }
.fcs-topic-tabs-panel-body ul,
.fcs-topic-tabs-panel-body ol {
	margin: 0 0 1em 1.25rem;
	padding: 0;
}
.fcs-topic-tabs-panel-body li { margin-bottom: 0.4rem; }
.fcs-topic-tabs-panel-cta {
	margin-top: 1.5rem;
}
.fcs-topic-tabs-more {
	display: inline-block;
	padding: 0.6rem 1.25rem;
	background: var(--brand-accent);
	color: var(--brand-primary);
	text-decoration: none;
	font-weight: 700;
	border-radius: 2px;
	transition: background 0.2s ease, color 0.2s ease;
}
.fcs-topic-tabs-more:hover {
	background: var(--brand-primary);
	color: var(--brand-white, #ffffff);
}

/* Mobile: collapse to vertical accordion. Same DOM, different layout.
 * The single !important below overrides the INLINE background-image style
 * the renderer prints on panels — inline styles yield to nothing weaker.
 * Sanctioned exception, same class as the visibility utilities. */
@media screen and (max-width: 768px) {
	.fcs-topic-tabs { padding: 2.5rem 1rem; }
	.fcs-topic-tabs-heading { font-size: 1.4rem; margin-bottom: 1.25rem; }
	.fcs-tabs-3 .fcs-topic-tabs-strip,
	.fcs-tabs-4 .fcs-topic-tabs-strip,
	.fcs-tabs-6 .fcs-topic-tabs-strip {
		grid-template-columns: 1fr;
	}
	.fcs-topic-tabs-label {
		grid-row: auto;
		grid-column: 1;
		justify-content: space-between;
		text-align: left;
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}
	.fcs-topic-tabs-label::after {
		content: "+";
		font-size: 1.5rem;
		font-weight: 300;
		line-height: 1;
		margin-left: 0.5rem;
	}
	.fcs-topic-tabs-radio:checked + .fcs-topic-tabs-label::after {
		content: "\2212"; /* unicode minus */
	}
	.fcs-topic-tabs-panel {
		grid-row: auto;
		grid-column: 1;
		min-height: 0;
		background-image: none !important;
	}
	.fcs-topic-tabs-panel-inner {
		padding: 1.5rem 1rem;
	}
}

/* ==========================================================================
 * 9. CAE SECTION SYSTEM — the SaaS marketing sections, folded 2026-07-21
 * ==========================================================================
 * PROVENANCE: extracted + deduped from the six marketing PHP templates
 * (template-landing, template-pricing, template-agencies,
 * template-marketing-teams, template-demo, template-creators). Class names
 * are UNCHANGED. Scope is .cae — wrap editor markup in <div class="cae">
 * and every pattern below is available on any page.
 *
 * TOKENS: defaults below are the light two-zone set (agencies / marketing-
 * teams / creators — 3 of 6 templates). The other skins override the SAME
 * names per site or per template (the btn-teal precedent — one class,
 * per-site color):
 *   dark  (pricing/demo): --ink:#eef5fa; --mut:#94abbd; --teal:#00b0d0;
 *         --tealb:#37d6f0; --line:rgba(255,255,255,.09);
 *         --panel:rgba(255,255,255,.035)
 *   IML baby-blue (landing): #62c1ea canvas, ink #1b1533,
 *         violet(#7c3aed)-to-teal(#14c7e6) gradient accents
 *
 * FOLD DECISIONS — logged, not silent:
 *   - Breakpoint: RULED 2026-07-21 — doctrine 768 (was 880/560 as-authored;
 *     see v1.3.1 header note). One query, phone-true values.
 *   - Resets: per rule 7 (v1.3.5), 9.1's .cae * and .cae a wear :where().
 *   - .tier and .panel are navy-island cards (like .mathband): their text
 *     is folded on the chrome-ink tokens (--cink/--cmut) so the cards read
 *     on light pages too. On the dark pages they came from, --ink and
 *     --cink hold the same value — rendered output is identical.
 *   - .stats-grid .stat .k and .cta-box folded on solid var(--teal); the
 *     landing template's violet-teal gradient versions are that skin's
 *     override, not the portable default.
 *   - Landing's .stat scoped as .stats-grid .stat (the .mathband .stat is
 *     a different animal; scoping keeps both without collision).
 *   - Demo-form controls scoped under .panel (not all of .cae) so folding
 *     them cannot restyle unrelated forms.
 *   - NOT folded here: chrome (promo bar, sitehead, nav, footer, hamburger).
 *     Chrome renders from theme templates, not editor markup.
 *   - Landing page deltas NOT folded (h1 56px, white .final variant, hero
 *     bloom on white): those stay that page's own skin.
 * ========================================================================== */

/* 9.0 Tokens — light two-zone defaults. Override the same names per skin. */
.cae {
	--navy: #081320; --navy2: #0c1c2e;
	--ink: #0c1c2e; --mut: #41525e;
	--cink: #eef5fa; --cmut: #9fb2c2;
	--teal: #0098b5; --tealb: #00b0d0;
	--orange: #fa903e; --orangeb: #ff8a3d;
	--line: rgba(8,19,32,.12); --cline: rgba(255,255,255,.10);
	--panel: #f5f8fa; --rad: 14px;
}

/* 9.1 Base — resets at LAYER 0 (:where, rule 7); typography helpers as-is. */
.cae { color: var(--ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; }
:where(.cae *) { box-sizing: border-box; margin: 0; padding: 0; }
:where(.cae a) { color: inherit; text-decoration: none; }
.cae .wrap { max-width: 1140px; margin: 0 auto; padding: 0 28px; }
.cae h1, .cae h2, .cae h3 { font-weight: 700; letter-spacing: -.01em; line-height: 1.12; }
.cae .kick { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--teal); font-weight: 700; }
.cae .lead { font-size: 18px; color: var(--mut); max-width: 720px; margin: 0 auto; line-height: 1.6; }
.cae .teal { color: var(--teal); }
.cae .org { color: var(--orange); }
.cae .center { text-align: center; }
.cae section { position: relative; z-index: 1; }

/* 9.2 Blooms — soft radial glows behind hero/section/final */
.cae .bloom { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .13; z-index: 0; pointer-events: none; }
.cae .hero .bloom-t { width: 680px; height: 600px; background: radial-gradient(circle, rgba(0,152,181,.5), transparent 65%); top: -220px; left: 50%; transform: translateX(-55%); }
.cae .hero .bloom-o { width: 420px; height: 420px; background: radial-gradient(circle, rgba(242,108,30,.26), transparent 65%); top: 40px; right: -120px; }
.cae .sec .bloom-t { width: 560px; height: 520px; background: radial-gradient(circle, rgba(0,152,181,.20), transparent 65%); bottom: -200px; left: -160px; }
.cae .final .bloom-t { width: 760px; height: 520px; background: radial-gradient(circle, rgba(0,152,181,.45), transparent 64%); top: -120px; left: 50%; transform: translateX(-50%); }
.cae .final .bloom-o { width: 360px; height: 360px; background: radial-gradient(circle, rgba(242,108,30,.24), transparent 65%); bottom: -120px; right: 8%; }

/* 9.3 Buttons */
.cae .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 15px; padding: 14px 26px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: .18s; }
.cae .btn-teal { background: var(--teal); color: #fff; box-shadow: 0 10px 30px -8px rgba(0,152,181,.55); }
.cae .btn-teal:hover { transform: translateY(-2px); filter: brightness(1.05); }
.cae .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.cae .btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.cae .btn.auto { width: auto; }
@keyframes caepulse { 0%,100% { box-shadow: 0 0 22px -2px rgba(0,176,208,.55); } 50% { box-shadow: 0 0 38px 2px rgba(0,176,208,.85); } }

/* 9.4 Hero */
.cae .hero { padding: 60px 0 34px; text-align: center; position: relative; overflow: hidden; }
.cae .hero h1 { font-size: 48px; margin: 6px 0 16px; color: var(--ink); }
.cae .hook { font-size: 24px; font-weight: 800; color: var(--ink); margin-bottom: 22px; }
.cae .micro { margin-top: 15px; font-size: 13.5px; color: var(--mut); font-weight: 600; }
.cae .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.cae .hero-trust { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-top: 20px; font-size: 14px; font-weight: 600; color: var(--mut); }
.cae .hero-trust i { color: var(--teal); margin-right: 6px; vertical-align: -2px; }
.cae .hero-art { display: block; width: 100%; max-width: 460px; height: auto; margin: 34px auto 0; border-radius: 16px; box-shadow: 0 24px 60px -30px rgba(8,19,32,.35); }
.cae .hero-art[src=""] { display: none; }

/* 9.5 Section bands + headers */
.cae .sect { padding: 60px 0; position: relative; overflow: hidden; }
.cae .sec { padding: 70px 0; position: relative; overflow: hidden; }
.cae .sec-head { text-align: center; max-width: 760px; margin: 0 auto 38px; }
.cae .sec-head h2 { font-size: 34px; margin: 0 0 12px; color: var(--ink); }
.cae .sec-head p { color: var(--mut); font-size: 17px; }
.cae .loop { padding: 66px 0; text-align: center; background: #fff; border-radius: 34px 34px 0 0; box-shadow: 0 -20px 50px -40px rgba(9,58,84,.4); }
.cae .feat { padding: 66px 0 76px; background: #fff; border-radius: 34px 34px 0 0; box-shadow: 0 -20px 50px -40px rgba(9,58,84,.4); }

/* 9.6 Stat cards (landing four-across) */
.cae .stats { padding: 6px 0 56px; }
.cae .stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.cae .stats-grid .stat { text-align: center; padding: 20px 12px; background: #fff; border-radius: 16px; box-shadow: 0 14px 34px -20px rgba(9,58,84,.4); }
.cae .stats-grid .stat .k { font-size: 32px; font-weight: 800; color: var(--teal); }
.cae .stats-grid .stat .v { font-size: 13px; color: var(--mut); margin-top: 4px; font-weight: 600; }

/* 9.7 Numbered steps */
.cae .loop-steps { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 18px; margin: 36px auto 0; max-width: 960px; }
.cae .step { flex: 1 1 240px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px 24px; text-align: left; box-shadow: 0 16px 36px -24px rgba(9,58,84,.4); transition: .18s; }
.cae .step:hover { transform: translateY(-3px); }
.cae .step .n { width: 34px; height: 34px; border-radius: 10px; background: var(--teal); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.cae .step h3 { font-size: 18px; margin-bottom: 8px; color: var(--ink); }
.cae .step p { font-size: 14.5px; color: var(--mut); line-height: 1.55; }

/* 9.8 Card grids */
.cae .grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 8px; }
.cae .card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px 22px; box-shadow: 0 16px 36px -24px rgba(9,58,84,.4); transition: .18s; }
.cae .card:hover { transform: translateY(-3px); }
.cae .card .ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 800; margin-bottom: 16px; }
.cae .ic-1 { background: linear-gradient(135deg,#ff4f9a,#ff8fc0); }
.cae .ic-2 { background: linear-gradient(135deg,#7c3aed,#a78bfa); }
.cae .ic-3 { background: linear-gradient(135deg,#14c7e6,#67e3f7); color: #04333d; }
.cae .ic-4 { background: linear-gradient(135deg,#f7b733,#ffd66b); color: #4a3403; }
.cae .card h3 { font-size: 17px; margin-bottom: 8px; color: var(--ink); }
.cae .card p { font-size: 14.5px; color: var(--mut); line-height: 1.55; }
.cae .grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.cae .feat-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--rad); padding: 26px 24px; }
.cae .feat-card .ic { width: 42px; height: 42px; border-radius: 11px; background: rgba(0,152,181,.12); display: flex; align-items: center; justify-content: center; color: var(--teal); font-size: 20px; margin-bottom: 16px; }
.cae .feat-card h4 { font-size: 17px; margin-bottom: 8px; color: var(--ink); }
.cae .feat-card p { font-size: 14.5px; color: var(--mut); line-height: 1.55; }

/* 9.9 Compare — them vs us */
.cae .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cae .cmp { border-radius: var(--rad); padding: 30px 28px; border: 1px solid var(--line); }
.cae .cmp.them { background: var(--panel); }
.cae .cmp.us { background: #fff; border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal), 0 24px 60px -34px rgba(0,152,181,.4); }
.cae .cmp h3 { font-size: 19px; margin-bottom: 14px; color: var(--ink); }
.cae .cmp p { font-size: 15px; color: var(--mut); line-height: 1.95; }
.cae .cmp .x { color: #d8484f; font-weight: 800; margin-right: 7px; }
.cae .cmp .pl { color: var(--teal); font-weight: 800; margin-right: 7px; }

/* 9.10 Mathband — navy accent island (reads on light or dark pages) */
.cae .mathband { background: var(--navy); border: 1px solid var(--navy); border-radius: 16px; padding: 40px 34px; text-align: center; color: var(--cink); }
.cae .mathband h2 { color: var(--cink); }
.cae .mathband .lead { color: var(--cmut); }
.cae .mathband .stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin: 28px 0 26px; }
.cae .mathband .stat { background: var(--navy2); border: 1px solid var(--cline); border-radius: 12px; padding: 22px; }
.cae .mathband .stat b { display: block; font-size: 32px; line-height: 1.1; font-weight: 800; color: var(--cink); }
.cae .mathband .stat b.org { color: var(--tealb); }
.cae .mathband .stat span { font-size: 13px; color: var(--cmut); }

/* 9.11 Pricing — billing toggle + tier cards (navy islands, like mathband) */
.cae .billtoggle { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 5px; gap: 4px; margin: 30px 0 0; }
.cae .bt { background: transparent; border: 0; color: var(--mut); font: inherit; font-weight: 700; font-size: 14.5px; padding: 10px 22px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.cae .bt.active { background: var(--teal); color: #012027; }
.cae .bt .save { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; background: rgba(0,176,208,.16); color: var(--tealb); border-radius: 6px; padding: 3px 8px; }
.cae .bt.active .save { background: #012027; color: #7fe9ff; }
.cae .price { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; align-items: stretch; margin-top: 42px; }
.cae .price2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; align-items: stretch; margin-top: 32px; max-width: 780px; margin-left: auto; margin-right: auto; }
.cae .tier { background: var(--navy2); border: 1px solid var(--cline); border-radius: var(--rad); padding: 42px 28px 28px; display: flex; flex-direction: column; text-align: left; position: relative; overflow: hidden; color: var(--cink); }
.cae .tier.pop { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal), 0 24px 60px -30px rgba(0,176,208,.6); }
.cae .tier .tag-pop { position: absolute; top: 0; left: 0; right: 0; height: 32px; line-height: 32px; text-align: center; background: var(--teal); color: #012027; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.cae .tier .name { font-size: 27px; color: var(--cink); font-weight: 800; letter-spacing: -.5px; line-height: 1.1; }
.cae .tier .amt { font-size: 38px; font-weight: 800; margin: 8px 0 2px; color: var(--cink); }
.cae .tier .amt small { font-size: 15px; color: var(--cmut); font-weight: 600; }
.cae .tier .sub { font-size: 13.5px; color: var(--cmut); margin-bottom: 18px; min-height: 20px; }
.cae .tier .markup { background: rgba(242,108,30,.10); border: 1px solid rgba(242,108,30,.3); border-radius: 10px; padding: 11px 13px; font-size: 12.5px; color: var(--cink); margin: 0 0 18px; line-height: 1.5; }
.cae .tier .markup b { color: var(--orangeb); }
.cae .tier ul { list-style: none; font-size: 14.5px; margin: 0 0 22px; }
.cae .tier li { padding: 8px 0; border-top: 1px solid var(--cline); color: var(--cink); }
.cae .tier li:before { content: "+"; color: var(--tealb); font-weight: 800; margin-right: 9px; }
.cae .tier .btn { margin-top: auto; width: 100%; }
.cae .resell-intro { max-width: 720px; margin: 0 auto; }
.cae .more { margin-top: 26px; font-size: 14.5px; color: var(--mut); text-align: center; }
.cae .more a { color: var(--tealb); font-weight: 700; }

/* 9.12 FAQ block */
.cae .faq { max-width: 820px; margin: 0 auto; padding: 80px 28px; }
.cae .faq h2 { font-size: 34px; text-align: center; margin-bottom: 32px; }
.cae .qa { border-top: 1px solid var(--line); padding: 22px 4px; }
.cae .qa:last-child { border-bottom: 1px solid var(--line); }
.cae .qa .qq { font-size: 17.5px; font-weight: 700; margin-bottom: 7px; }
.cae .qa .aa { color: var(--mut); font-size: 15px; line-height: 1.6; }

/* 9.13 Quote */
.cae .quote-wrap { max-width: 820px; margin: 0 auto; }
.cae blockquote.quote { border-left: 3px solid var(--teal); margin: 0; padding: 6px 0 6px 24px; font-style: italic; font-size: 21px; line-height: 1.5; color: var(--ink); }
.cae .quote-by { margin-top: 12px; font-size: 14px; color: var(--mut); font-style: normal; }

/* 9.14 Final CTA section + self-contained CTA box */
.cae .final { padding: 90px 0; text-align: center; position: relative; overflow: hidden; }
.cae .final h2 { font-size: 40px; margin-bottom: 14px; color: var(--ink); }
.cae .final p { font-size: 18px; color: var(--mut); margin-bottom: 28px; }
.cae .cta-box { position: relative; overflow: hidden; background: var(--teal); border-radius: 26px; padding: 56px 26px; box-shadow: 0 30px 60px -30px rgba(0,152,181,.55); }
.cae .cta-box:before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.22) 1.3px, transparent 1.3px); background-size: 18px 18px; pointer-events: none; }
.cae .cta-box h2 { font-size: 40px; margin-bottom: 12px; color: #fff; position: relative; }
.cae .cta-box p { font-size: 17.5px; color: rgba(255,255,255,.88); margin-bottom: 26px; position: relative; }
.cae .cta-box .cta-row { position: relative; }

/* 9.15 Panels + form (demo page; navy islands — form controls scoped to .panel) */
.cae .two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; align-items: start; margin-top: 38px; }
.cae .panel { background: var(--navy2); border: 1px solid var(--cline); border-radius: 14px; padding: 28px; color: var(--cink); }
.cae .panel h2 { margin-top: 0; color: var(--cink); }
.cae .panel p.note { color: var(--cmut); font-size: 14.5px; margin: 0 0 18px; }
.cae .panel label { display: block; font-size: 13px; color: var(--cmut); margin: 14px 0 6px; }
.cae .panel input, .cae .panel select, .cae .panel textarea { width: 100%; padding: 12px 13px; border-radius: 8px; border: 1px solid #2a425f; background: #0e1a2a; color: var(--cink); font-size: 15px; font-family: inherit; }
.cae .panel input:focus, .cae .panel select:focus, .cae .panel textarea:focus { outline: none; border-color: var(--teal); }
.cae .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cae .panel .btn { margin-top: 18px; width: 100%; text-align: center; }
.cae .selfroute { font-size: 13.5px; color: var(--cmut); margin-top: 16px; }
.cae .alt p { color: var(--cmut); font-size: 15px; }
.cae .err { background: #3a1620; border: 1px solid #6b2436; color: #ffb3c0; font-size: 13.5px; border-radius: 8px; padding: 11px 13px; margin: 0 0 16px; }
.cae .ok { text-align: center; }

/* 9.16 Creator showcase cards */
.cae .creators-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.cae .creator-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--rad); padding: 22px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cae .creator-shot { width: 100%; max-width: 190px; height: auto; margin: 0 auto 16px; border-radius: 22px; display: block; box-shadow: 0 16px 40px -20px rgba(8,19,32,.4); }
.cae .creator-shot[src=""] { display: none; }
.cae .creator-card h4 { font-size: 17px; margin-bottom: 6px; color: var(--ink); }
.cae .creator-card p { font-size: 14px; color: var(--mut); margin-bottom: 16px; }
.cae .creator-card .btn { margin-top: auto; }
.cae .creator-card.join { background: #fff; border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal), 0 24px 60px -34px rgba(0,152,181,.4); justify-content: center; }
.cae .creator-card.join h4 { font-size: 20px; }

/* 9.17 Phone showcase (landing preset gallery) */
.cae .phones { display: flex; gap: 26px; justify-content: center; align-items: flex-end; padding: 6px 0 20px; flex-wrap: wrap; }
.cae .phone { width: 230px; border-radius: 26px; background: #fff; padding: 10px; box-shadow: 0 30px 60px -30px rgba(9,58,84,.4); transition: .2s; }
.cae .phone:hover { transform: translateY(-6px); }
.cae .phone.mid { width: 250px; box-shadow: 0 36px 70px -30px rgba(9,58,84,.55); }
.cae .screen { border-radius: 18px; padding: 26px 16px 22px; display: flex; flex-direction: column; align-items: center; gap: 9px; min-height: 330px; }
.cae .pv-av { width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255,255,255,.65); background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.cae .pv-name { font-size: 14px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.cae .pv-link { width: 100%; text-align: center; padding: 9px; border-radius: 9px; font-weight: 700; font-size: 12px; box-shadow: 0 5px 12px -5px rgba(0,0,0,.4); }
.cae .ptag { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--mut); padding: 10px 0 2px; }
.cae .s-cla { background-color: #000; }
.cae .s-cla .pv-name { color: #fff; } .cae .s-cla .pv-link { background: #a3122a; color: #fff; } .cae .s-cla .pv-av { color: #a3122a; }
.cae .s-bub { background-color: #ffd6e8; background-image: radial-gradient(rgba(255,79,154,.25) 1.4px, transparent 1.4px); background-size: 16px 16px; }
.cae .s-bub .pv-name { color: #4a1030; } .cae .s-bub .pv-link { background: #ff4f9a; color: #fff; } .cae .s-bub .pv-av { color: #ff4f9a; }
.cae .s-oce { background-color: #062a3a; background-image: repeating-linear-gradient(45deg, rgba(20,199,230,.25) 0, rgba(20,199,230,.25) 1.5px, transparent 1.5px, transparent 14px); }
.cae .s-oce .pv-name { color: #eafcff; } .cae .s-oce .pv-link { background: #14c7e6; color: #04222b; } .cae .s-oce .pv-av { color: #0aa3c2; }
.cae .swatchnote { text-align: center; font-size: 13.5px; color: var(--mut); font-weight: 600; }

/* 9.18 Responsive — ONE query, the house 768 (ruled 2026-07-21).
 * Was 880/560 as-authored in the templates; 769-880 held only tablet-portrait
 * (no phones exist there) and the 561-768 merge takes the phone-true values:
 * grids go straight to one column, phone cards take the small width. */
@media (max-width: 768px) {
	.cae .hero h1 { font-size: 34px; }
	.cae .hook { font-size: 20px; }
	.cae .sec-head h2, .cae .faq h2, .cae .final h2, .cae .cta-box h2 { font-size: 27px; }
	.cae .stats-grid, .cae .grid4, .cae .compare, .cae .grid3, .cae .price, .cae .price2, .cae .mathband .stat-row, .cae .two, .cae .row, .cae .creators-grid { grid-template-columns: 1fr; }
	.cae .price2 { max-width: 420px; }
	.cae .phone, .cae .phone.mid { width: 210px; }
}