/* ════════════════════════════════════════════════════════════════════
   ICMS MODERN — Design System (v1.0)
   ════════════════════════════════════════════════════════════════════
   Loaded LAST in _head.html so it wins specificity battles cleanly.
   Targets:
     • #welcomeModal  (rewritten landing — keeps SAME id for JS hooks)
     • .icms-marketing  (legal/faq/about pages — opt-in scope)
     • .icms-footer
     • .icms-mnav
   Does NOT touch the in-app wizard, admin panel, or auth modals styling
   beyond a small refinement layer at the bottom.
   ════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────────────────── */
:root {
	/* Ink palette — cool slate (TransTally-style light UI) */
	--ink-900: #0f172a;          /* deepest text / dark fills */
	--ink-800: #1e293b;
	--ink-700: #334155;
	--ink-600: #475569;          /* body secondary text */
	--ink-500: #64748b;
	--ink-400: #94a3b8;
	--ink-300: #cbd5e1;
	--ink-200: #e2e8f0;          /* hairline borders */
	--ink-100: #eef2f7;
	--ink-50:  #f8fafc;

	/* Honey accent — refined gold, kept as the brand accent */
	--gold-700: #92610f;
	--gold-600: #b07d1f;
	--gold-500: #c9962f;          /* primary accent — nudged for contrast on white */
	--gold-400: #e0b662;
	--gold-300: #efd4a0;
	--gold-200: #f7e7cf;
	--gold-100: #fbf2e3;
	--gold-50:  #fdf9f2;

	/* Surfaces — clean cool near-white */
	--surface:        #f8fafc;     /* page canvas (slate-50) */
	--surface-card:   #ffffff;
	--surface-raised: #ffffff;
	--surface-tint:   #f1f5f9;     /* subtle section tint (slate-100) */

	/* Semantic */
	--success-700: #065f46;
	--success-500: #10b981;
	--success-100: #d1fae5;
	--danger-500:  #dc2626;
	--info-500:    #0ea5e9;

	/* Type — clean geometric sans throughout (serif display dropped) */
	--font-display: 'Space Grotesk', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	--font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	--font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

	/* Type scale (modular, base 16) */
	--fs-xs:   0.75rem;
	--fs-sm:   0.875rem;
	--fs-base: 1rem;
	--fs-md:   1.125rem;
	--fs-lg:   1.375rem;
	--fs-xl:   1.75rem;
	--fs-2xl:  2.25rem;
	--fs-3xl:  3rem;
	--fs-4xl:  4rem;
	--fs-5xl:  5.25rem;

	/* Spacing */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;
	--sp-10: 8rem;

	/* Layout */
	--container-max: 1180px;
	--container-narrow: 760px;
	--radius-sm: 8px;
	--radius:    12px;             /* buttons / inputs — TransTally radius */
	--radius-lg: 16px;             /* cards */
	--radius-xl: 24px;

	/* Shadow — slate-tinted, subtle elevation */
	--shadow-xs: 0 1px 2px rgba(15,23,42,.04);
	--shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.03);
	--shadow-md: 0 4px 10px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
	--shadow-lg: 0 10px 30px rgba(15,23,42,.08), 0 3px 8px rgba(15,23,42,.04);
	--shadow-xl: 0 20px 48px rgba(15,23,42,.12), 0 6px 16px rgba(15,23,42,.06);

	/* Motion */
	--ease: cubic-bezier(.2,.7,.2,1);
}

/* ════════════════════════════════════════════════════════════════════
   1. WELCOME / LANDING — full rewrite (scoped to #welcomeModal)
   ════════════════════════════════════════════════════════════════════ */

#welcomeModal {
	position: fixed !important;
	inset: 0 !important;
	z-index: 9000 !important;
	background: var(--surface) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	display: block !important;
	padding: 0 !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	font-family: var(--font-body);
	color: var(--ink-800);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
#welcomeModal.wm-hidden {
	display: none !important;
}
/* The old design wrapped everything in .wm-card. The new landing
   does NOT use .wm-card, but if any stale CSS still applies, neutralise it. */
#welcomeModal .wm-card {
	all: unset !important;
	display: block !important;
	width: auto !important;
	max-width: none !important;
	max-height: none !important;
	min-height: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	overflow: visible !important;
	animation: none !important;
}
/* Subtle paper grain over the whole landing */
#welcomeModal::before {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.4;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.04 0 0 0 0 0.07 0 0 0 0 0.16 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Marketing Top Nav (used inside #welcomeModal too) ───────────── */
.icms-mnav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(250, 247, 242, 0.85);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid rgba(20, 34, 67, 0.06);
}
.icms-mnav-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--sp-4) var(--sp-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
}
.icms-mnav-brand {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	color: var(--ink-900);
	text-decoration: none;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.icms-mnav-brand-mark {
	width: 36px; height: 36px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-700) 100%);
	color: var(--gold-400);
	display: grid; place-items: center;
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 800;
	box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.08);
}
.icms-mnav-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}
.icms-mnav-brand-name {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.icms-mnav-brand-tag {
	font-size: 0.68rem;
	font-weight: 500;
	color: var(--ink-400);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.icms-mnav-links {
	display: flex;
	gap: var(--sp-5);
	align-items: center;
}
.icms-mnav-link {
	color: var(--ink-600);
	text-decoration: none;
	font-size: var(--fs-sm);
	font-weight: 500;
	transition: color .2s var(--ease);
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
}
.icms-mnav-link:hover { color: var(--ink-900); }
.icms-mnav-cta {
	background: var(--ink-900);
	color: #fff;
	padding: 9px 18px;
	border-radius: 999px;
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.icms-mnav-cta:hover {
	background: var(--ink-800);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}
.icms-mnav-mobile-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--ink-200);
	border-radius: 8px;
	padding: 8px 10px;
	color: var(--ink-700);
	cursor: pointer;
	font-size: 14px;
}
@media (max-width: 800px) {
	.icms-mnav-links { display: none; }
	.icms-mnav-mobile-toggle { display: inline-flex; align-items: center; gap: 6px; }
	.icms-mnav-links.open {
		display: flex;
		position: absolute;
		top: 100%;
		left: 0; right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--surface-card);
		border-bottom: 1px solid var(--ink-100);
		padding: var(--sp-3);
		box-shadow: var(--shadow-md);
	}
	.icms-mnav-links.open .icms-mnav-link {
		padding: 12px 14px;
		border-bottom: 1px solid var(--ink-100);
	}
	.icms-mnav-links.open .icms-mnav-cta { margin-top: 8px; text-align: center; }
}

/* ── Section container ──────────────────────────────────────────── */
.icms-container {
	position: relative;
	z-index: 1;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--sp-5);
}
.icms-container-narrow {
	max-width: var(--container-narrow);
	margin: 0 auto;
	padding: 0 var(--sp-5);
}
.icms-section {
	position: relative;
	padding: var(--sp-9) 0;
	z-index: 1;
}
.icms-section-tight { padding: var(--sp-7) 0; }
@media (max-width: 720px) {
	.icms-section { padding: var(--sp-7) 0; }
}

.icms-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-700);
	background: var(--gold-100);
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--gold-200);
}
.icms-eyebrow .dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--gold-500);
	box-shadow: 0 0 0 4px rgba(212,163,90,.18);
}
.icms-section-title {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ink-900);
	margin: var(--sp-3) 0 var(--sp-4);
}
.icms-section-sub {
	font-size: var(--fs-md);
	line-height: 1.6;
	color: var(--ink-500);
	max-width: 60ch;
}

/* ── HERO ───────────────────────────────────────────────────────── */
.icms-hero {
	position: relative;
	padding: var(--sp-8) 0 var(--sp-9);
	overflow: hidden;
}
.icms-hero::before {
	/* Soft radial light from top-right */
	content: '';
	position: absolute;
	top: -200px; right: -200px;
	width: 720px; height: 720px;
	background: radial-gradient(circle, rgba(212,163,90,0.18) 0%, rgba(212,163,90,0) 60%);
	pointer-events: none;
	z-index: 0;
}
.icms-hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: var(--sp-8);
	align-items: center;
}
@media (max-width: 960px) {
	.icms-hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
}
.icms-hero-trust {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--surface-card);
	border: 1px solid var(--ink-100);
	padding: 6px 14px 6px 6px;
	border-radius: 999px;
	font-size: var(--fs-sm);
	color: var(--ink-600);
	box-shadow: var(--shadow-xs);
	margin-bottom: var(--sp-5);
}
.icms-hero-trust-dot {
	width: 22px; height: 22px;
	border-radius: 50%;
	background: linear-gradient(135deg, #16a34a 0%, #059669 100%);
	color: #fff;
	display: grid; place-items: center;
	font-size: 11px;
}
.icms-hero h1 {
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 5.4vw, 4rem);
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: var(--ink-900);
	margin: 0 0 var(--sp-5);
}
.icms-hero h1 .accent {
	color: var(--gold-600);
	font-style: italic;
	position: relative;
	white-space: nowrap;
}
.icms-hero h1 .accent::after {
	content: '';
	position: absolute;
	left: 4%;
	right: 4%;
	bottom: -2px;
	height: 8px;
	background: var(--gold-300);
	border-radius: 8px;
	z-index: -1;
	opacity: 0.55;
}
.icms-hero-sub {
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	line-height: 1.55;
	color: var(--ink-500);
	max-width: 38ch;
	margin: 0 0 var(--sp-6);
}
.icms-hero-cta-row {
	display: flex;
	gap: var(--sp-3);
	flex-wrap: wrap;
	margin-bottom: var(--sp-6);
}
.icms-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--ink-900);
	color: #fff;
	padding: 14px 26px;
	border-radius: 999px;
	font-size: var(--fs-base);
	font-weight: 600;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	text-decoration: none;
	transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease);
	box-shadow: 0 4px 14px rgba(10,18,40,.18);
}
.icms-btn-primary:hover {
	background: var(--ink-800);
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(10,18,40,.22);
}
.icms-btn-primary i { font-size: 0.9em; }
.icms-btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	color: var(--ink-800);
	padding: 13px 24px;
	border-radius: 999px;
	font-size: var(--fs-base);
	font-weight: 600;
	border: 1.5px solid var(--ink-200);
	cursor: pointer;
	font-family: inherit;
	text-decoration: none;
	transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.icms-btn-secondary:hover {
	border-color: var(--ink-700);
	background: var(--ink-50);
}
.icms-hero-meta {
	display: flex;
	gap: var(--sp-5);
	flex-wrap: wrap;
	font-size: var(--fs-sm);
	color: var(--ink-500);
}
.icms-hero-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.icms-hero-meta-item i { color: var(--gold-600); font-size: 13px; }

/* Hero visual — mockup of generated Word docs */
.icms-hero-visual {
	position: relative;
	min-height: 440px;
	perspective: 1400px;
}
.icms-doc-card {
	position: absolute;
	background: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xl);
	padding: 22px 24px;
	font-family: var(--font-body);
	border: 1px solid var(--ink-100);
	transform-origin: center;
}
.icms-doc-card .doc-header {
	display: flex; gap: 8px; align-items: center;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ink-100);
}
.icms-doc-card .doc-header .doc-circ {
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--gold-100);
	color: var(--gold-700);
	display: grid; place-items: center;
	font-size: 12px;
}
.icms-doc-card .doc-title {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	color: var(--ink-900);
	letter-spacing: -0.01em;
}
.icms-doc-card .doc-meta {
	font-size: 9px;
	color: var(--ink-400);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.icms-doc-card .doc-line {
	height: 7px;
	border-radius: 4px;
	background: var(--ink-100);
	margin: 8px 0;
}
.icms-doc-card .doc-line.short { width: 60%; }
.icms-doc-card .doc-line.med { width: 85%; }
.icms-doc-card .doc-line.gold { background: var(--gold-200); width: 40%; }
.icms-doc-card .doc-table {
	margin-top: 14px;
	display: grid;
	gap: 5px;
}
.icms-doc-card .doc-row {
	display: grid;
	grid-template-columns: 30px 1fr 50px;
	gap: 6px;
	padding: 6px 8px;
	background: var(--ink-50);
	border-radius: 4px;
	font-size: 10px;
	color: var(--ink-500);
}
.icms-doc-card .doc-row .cell-num {
	font-family: var(--font-mono);
	color: var(--gold-700);
	font-weight: 600;
}
.icms-doc-card.card-1 {
	top: 10px; left: 0;
	width: 78%;
	transform: rotate(-4deg) translateZ(0);
	z-index: 2;
}
.icms-doc-card.card-2 {
	top: 70px; right: 0;
	width: 70%;
	transform: rotate(3deg) translateZ(0);
	z-index: 1;
	background: linear-gradient(180deg, #fff 0%, #fafbfd 100%);
}
.icms-doc-card.card-3 {
	bottom: 0; left: 18%;
	width: 65%;
	transform: rotate(-2deg) translateZ(0);
	z-index: 3;
}
.icms-doc-badge {
	position: absolute;
	background: var(--ink-900);
	color: var(--gold-400);
	font-family: var(--font-mono);
	font-size: 10px;
	padding: 6px 10px;
	border-radius: 6px;
	box-shadow: var(--shadow-md);
	letter-spacing: 0.05em;
	z-index: 10;
}
.icms-doc-badge.b1 { top: -10px; right: 12%; }
.icms-doc-badge.b2 { bottom: 36px; right: -10px; }
@media (max-width: 720px) {
	.icms-hero-visual { min-height: 360px; }
}

/* ── TRUST STRIP removed (2026-06): the dark stats band was deleted from the
   landing; its styles are pruned here as they're no longer referenced. ─── */

/* ── DELIVERABLES (what you get) ─────────────────────────────────── */
.icms-deliv-header {
	text-align: center;
	margin-bottom: var(--sp-7);
}
.icms-deliv-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-4);
}
@media (max-width: 900px) { .icms-deliv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .icms-deliv-grid { grid-template-columns: 1fr; } }
.icms-deliv-card {
	background: var(--surface-card);
	border: 1px solid var(--ink-100);
	border-radius: var(--radius-lg);
	padding: var(--sp-5);
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
	position: relative;
	overflow: hidden;
}
.icms-deliv-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--gold-400), var(--gold-600));
	opacity: 0;
	transition: opacity .25s var(--ease);
}
.icms-deliv-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--gold-300);
}
.icms-deliv-card:hover::before { opacity: 1; }
.icms-deliv-icon {
	width: 48px; height: 48px;
	border-radius: 12px;
	display: grid; place-items: center;
	font-size: 20px;
	margin-bottom: var(--sp-4);
}
.icms-deliv-icon.c-blue   { background: #eff6ff; color: #2563eb; }
.icms-deliv-icon.c-green  { background: #f0fdf4; color: #16a34a; }
.icms-deliv-icon.c-purple { background: #faf5ff; color: #9333ea; }
.icms-deliv-icon.c-orange { background: #fff7ed; color: #ea580c; }
.icms-deliv-icon.c-rose   { background: #fff1f2; color: #e11d48; }
.icms-deliv-icon.c-teal   { background: #f0fdfa; color: #0d9488; }
.icms-deliv-card h3 {
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--ink-900);
	letter-spacing: -0.01em;
	margin: 0 0 8px;
}
.icms-deliv-card p {
	font-size: var(--fs-sm);
	color: var(--ink-500);
	line-height: 1.6;
	margin: 0;
}
.icms-deliv-card .deliv-tag {
	display: inline-block;
	margin-top: 12px;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--ink-400);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ── HOW IT WORKS ────────────────────────────────────────────────── */
.icms-how {
	background: var(--surface-tint);
	position: relative;
}
.icms-how-header {
	text-align: center;
	margin-bottom: var(--sp-7);
}
.icms-how-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-4);
	position: relative;
}
@media (max-width: 900px) { .icms-how-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .icms-how-grid { grid-template-columns: 1fr; } }
.icms-how-step {
	position: relative;
	padding: var(--sp-5);
	background: var(--surface-card);
	border-radius: var(--radius-lg);
	border: 1px solid var(--ink-100);
}
.icms-how-num {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--gold-600);
	margin-bottom: var(--sp-3);
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.icms-how-num::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--gold-300);
}
.icms-how-step h4 {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--ink-900);
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}
.icms-how-step p {
	font-size: var(--fs-sm);
	color: var(--ink-500);
	line-height: 1.55;
	margin: 0;
}

/* ── DOCUMENT SAMPLES ────────────────────────────────────────────── */
.icms-samples-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-6);
	align-items: center;
}
@media (max-width: 900px) {
	.icms-samples-grid { grid-template-columns: 1fr; }
}
.icms-samples-stage {
	position: relative;
	min-height: 460px;
	perspective: 1500px;
}
.icms-samples-stage .icms-doc-card { padding: 26px; }
.icms-samples-stage .icms-doc-card.card-1 {
	top: 0; left: 0; width: 70%;
	transform: rotate(-3deg);
}
.icms-samples-stage .icms-doc-card.card-2 {
	top: 60px; right: 0; width: 65%;
	transform: rotate(2deg);
	z-index: 2;
}
.icms-samples-stage .icms-doc-card.card-3 {
	bottom: 0; left: 14%; width: 60%;
	transform: rotate(-1deg);
	z-index: 3;
}
.icms-samples-list {
	list-style: none;
	padding: 0;
	margin: var(--sp-5) 0 0;
	display: grid;
	gap: var(--sp-2);
}
.icms-samples-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--fs-base);
	color: var(--ink-700);
}
.icms-samples-list li i {
	color: var(--success-500);
	font-size: 14px;
	flex-shrink: 0;
}

/* ── PRICING ─────────────────────────────────────────────────────── */
.icms-pricing-header {
	text-align: center;
	margin-bottom: var(--sp-7);
}
.icms-pricing-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-4);
	max-width: 1080px;
	margin: 0 auto;
}
@media (max-width: 900px) { .icms-pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .icms-pricing-grid { grid-template-columns: 1fr; } }
.icms-price-card {
	background: var(--surface-card);
	border: 1px solid var(--ink-100);
	border-radius: var(--radius-lg);
	padding: var(--sp-5) var(--sp-5) var(--sp-6);
	text-align: center;
	position: relative;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.icms-price-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--gold-400);
}
.icms-price-card.featured {
	background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-800) 100%);
	color: #fff;
	border-color: var(--ink-900);
	transform: scale(1.03);
}
.icms-price-card.featured:hover {
	transform: scale(1.03) translateY(-3px);
}
.icms-price-name {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-400);
}
.icms-price-card.featured .icms-price-name { color: var(--gold-400); }
.icms-price-amount {
	font-family: var(--font-display);
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--ink-900);
	margin: 10px 0 4px;
	letter-spacing: -0.02em;
	line-height: 1;
}
.icms-price-card.featured .icms-price-amount { color: #fff; }
.icms-price-amount-currency {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ink-400);
	margin-right: 4px;
	vertical-align: 0.6em;
}
.icms-price-card.featured .icms-price-amount-currency { color: var(--gold-400); }
.icms-price-credits {
	font-size: var(--fs-sm);
	color: var(--ink-500);
	margin-bottom: var(--sp-4);
}
.icms-price-card.featured .icms-price-credits { color: rgba(255,255,255,.65); }
.icms-price-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-sm);
	text-align: left;
	display: grid;
	gap: 8px;
}
.icms-price-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--ink-600);
}
.icms-price-card.featured .icms-price-list li { color: rgba(255,255,255,.85); }
.icms-price-list li i { color: var(--success-500); font-size: 12px; }
.icms-price-card.featured .icms-price-list li i { color: var(--gold-400); }
.icms-price-pick {
	width: 100%;
	background: var(--ink-900);
	color: #fff;
	padding: 11px 18px;
	border-radius: 999px;
	font-size: var(--fs-sm);
	font-weight: 600;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	transition: background .2s var(--ease), transform .2s var(--ease);
}
.icms-price-pick:hover { background: var(--ink-800); transform: translateY(-1px); }
.icms-price-card.featured .icms-price-pick {
	background: var(--gold-500);
	color: var(--ink-900);
}
.icms-price-card.featured .icms-price-pick:hover { background: var(--gold-400); }
.icms-price-best {
	position: absolute;
	top: -10px; left: 50%;
	transform: translateX(-50%);
	background: var(--gold-500);
	color: var(--ink-900);
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 14px;
	border-radius: 999px;
	white-space: nowrap;
}
.icms-pricing-note {
	text-align: center;
	margin-top: var(--sp-5);
	font-size: var(--fs-sm);
	color: var(--ink-500);
}
.icms-pricing-note .mpesa-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--success-100);
	color: var(--success-700);
	padding: 4px 12px;
	border-radius: 999px;
	font-weight: 600;
	font-size: var(--fs-xs);
}

/* ── FAQ ─────────────────────────────────────────────────────────── */
.icms-faq-wrap {
	max-width: 760px;
	margin: 0 auto;
}
.icms-faq-header {
	text-align: center;
	margin-bottom: var(--sp-6);
}
.icms-faq-item {
	border-bottom: 1px solid var(--ink-100);
}
.icms-faq-q {
	width: 100%;
	background: none;
	border: 0;
	text-align: left;
	font-family: inherit;
	padding: var(--sp-4) 0;
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--ink-900);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-4);
	letter-spacing: -0.01em;
	transition: color .2s var(--ease);
}
.icms-faq-q:hover { color: var(--gold-700); }
.icms-faq-q .icms-faq-toggle {
	flex-shrink: 0;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--ink-50);
	color: var(--ink-700);
	display: grid; place-items: center;
	font-size: 11px;
	transition: transform .25s var(--ease), background .2s var(--ease);
}
.icms-faq-item.open .icms-faq-q .icms-faq-toggle {
	background: var(--gold-100);
	color: var(--gold-700);
	transform: rotate(45deg);
}
.icms-faq-a {
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s var(--ease), padding .3s var(--ease);
	color: var(--ink-500);
	font-size: var(--fs-base);
	line-height: 1.65;
}
.icms-faq-item.open .icms-faq-a {
	max-height: 600px;
	padding: 0 0 var(--sp-5);
}

/* ── FINAL CTA ───────────────────────────────────────────────────── */
.icms-cta-final {
	background: var(--ink-900);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.icms-cta-final::before {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 600px; height: 600px;
	background: radial-gradient(circle, rgba(212,163,90,0.15) 0%, transparent 60%);
	pointer-events: none;
}
.icms-cta-final-inner {
	position: relative;
	text-align: center;
	z-index: 1;
}
.icms-cta-final h2 {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: #fff;
	margin: 0 0 var(--sp-4);
}
.icms-cta-final h2 .accent {
	color: var(--gold-400);
	font-style: italic;
}
.icms-cta-final p {
	font-size: var(--fs-md);
	color: rgba(255,255,255,.7);
	margin: 0 0 var(--sp-6);
	max-width: 50ch;
	margin-left: auto;
	margin-right: auto;
}
.icms-cta-final .icms-btn-primary {
	background: var(--gold-500);
	color: var(--ink-900);
	padding: 16px 32px;
	font-size: 1.05rem;
}
.icms-cta-final .icms-btn-primary:hover {
	background: var(--gold-400);
	color: var(--ink-900);
}

/* ════════════════════════════════════════════════════════════════════
   2. FOOTER (used on landing + legal pages)
   ════════════════════════════════════════════════════════════════════ */
/* Light footer — same slate canvas as the rest of the page (dark navy bg
   removed 2026-07-26). A subtle slate tint + top hairline set it apart from the
   content above without a heavy colour block, and the vertical rhythm is tighter
   so the footer no longer towers over short pages. */
.icms-footer {
	background: var(--surface-tint, #f1f5f9);
	color: var(--ink-600);
	border-top: 1px solid var(--ink-200);
	padding: var(--sp-6) 0 var(--sp-5);
	font-family: var(--font-body);
	position: relative;
	z-index: 1;
}
.icms-footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: var(--sp-6);
	align-items: start;               /* top-align the four columns cleanly */
}
@media (max-width: 900px) {
	.icms-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-5); }
}
/* Below 760px the brand block takes the full row and the three short link
   groups share the next one. Stacking all four in one column (the old
   behaviour) made the footer ~780px tall on a phone — most of the "too huge"
   height was this, not the desktop padding. */
@media (max-width: 760px) {
	.icms-footer-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-5) var(--sp-4);
	}
	.icms-footer-grid > :first-child { grid-column: 1 / -1; }
}
/* The three groups stay side by side even on the narrowest phones — measured at
   375px the columns are ~98px and no link overflows, and keeping one row here
   (rather than dropping to two columns) is worth ~110px of footer height. */
@media (max-width: 420px) {
	.icms-footer-grid { gap: var(--sp-4) var(--sp-3); }
}
.icms-footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: var(--sp-3);
	color: var(--ink-900);
	text-decoration: none;
}
.icms-footer-brand-mark {
	width: 34px; height: 34px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--gold-500), var(--gold-700));
	color: var(--ink-900);
	display: grid; place-items: center;
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 800;
}
.icms-footer-brand-name {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--ink-900);
}
/* Secondary copy is --ink-600, not --ink-500: on the new --surface-tint footer
   ink-500 lands at 4.34:1, just under the 4.5:1 AA floor. ink-600 is 6.92:1.
   Hierarchy is carried by size/weight/tracking instead of a lighter grey. */
.icms-footer-mission {
	font-size: var(--fs-sm);
	line-height: 1.55;
	margin-bottom: var(--sp-3);
	max-width: 40ch;
	color: var(--ink-600);
}
.icms-footer h5 {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-600);
	margin: 0 0 var(--sp-3);
}
.icms-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 9px;
}
.icms-footer ul a {
	color: var(--ink-600);
	text-decoration: none;
	font-size: var(--fs-sm);
	transition: color .2s var(--ease);
}
.icms-footer ul a:hover { color: var(--gold-700); }
.icms-footer-contact-line {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-sm);
	margin-bottom: 6px;
	color: var(--ink-600);
}
.icms-footer-contact-line i { color: var(--gold-600); width: 16px; text-align: center; }
.icms-footer-contact-line a { color: var(--ink-700); text-decoration: none; }
.icms-footer-contact-line a:hover { color: var(--gold-700); }
.icms-footer-bottom {
	margin-top: var(--sp-5);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--ink-200);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-4);
	flex-wrap: wrap;
	font-size: var(--fs-xs);
	color: var(--ink-600);
}
.icms-footer-bottom .made-in {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.icms-footer-bottom .made-in i { color: var(--gold-600); }

/* ════════════════════════════════════════════════════════════════════
   3. LEGAL / FAQ / ABOUT pages (.icms-marketing scope)
   ════════════════════════════════════════════════════════════════════ */
body.icms-marketing {
	margin: 0;
	font-family: var(--font-body);
	background: var(--surface);
	color: var(--ink-800);
	-webkit-font-smoothing: antialiased;
}
.icms-marketing-page {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--sp-8) var(--sp-5) var(--sp-9);
}
.icms-marketing-page h1 {
	font-family: var(--font-display);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--ink-900);
	margin: 0 0 var(--sp-3);
}
.icms-marketing-page .lead {
	font-size: var(--fs-md);
	color: var(--ink-500);
	line-height: 1.55;
	margin: 0 0 var(--sp-6);
}
.icms-marketing-page h2 {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--ink-900);
	margin: var(--sp-7) 0 var(--sp-3);
}
.icms-marketing-page h3 {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ink-900);
	margin: var(--sp-5) 0 var(--sp-3);
}
.icms-marketing-page p,
.icms-marketing-page li {
	font-size: var(--fs-base);
	line-height: 1.7;
	color: var(--ink-600);
}
.icms-marketing-page ul, .icms-marketing-page ol {
	padding-left: 22px;
	margin: var(--sp-3) 0;
}
.icms-marketing-page li { margin-bottom: 8px; }
.icms-marketing-page a {
	color: var(--gold-700);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.icms-marketing-page a:hover { color: var(--ink-900); }
.icms-marketing-page strong { color: var(--ink-900); }
.icms-marketing-page .updated {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-400);
	background: var(--ink-50);
	padding: 6px 12px;
	border-radius: 999px;
	display: inline-block;
	margin-bottom: var(--sp-4);
}
.icms-marketing-page .callout {
	background: var(--gold-50);
	border: 1px solid var(--gold-200);
	border-left: 4px solid var(--gold-500);
	padding: var(--sp-4);
	border-radius: var(--radius);
	margin: var(--sp-5) 0;
}
.icms-marketing-page .callout p { margin: 0; color: var(--ink-700); }

/* ════════════════════════════════════════════════════════════════════
   4. WhatsApp floating button (used on all marketing pages)
   ════════════════════════════════════════════════════════════════════ */
.icms-wa-float {
	position: fixed;
	bottom: 24px; right: 24px;
	z-index: 999;
	background: #25d366;
	color: #fff !important;
	width: 56px; height: 56px;
	border-radius: 50%;
	display: grid; place-items: center;
	font-size: 26px;
	box-shadow: 0 8px 24px rgba(37,211,102,.45), 0 4px 8px rgba(0,0,0,.15);
	text-decoration: none !important;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.icms-wa-float:hover {
	transform: scale(1.08) translateY(-2px);
	box-shadow: 0 14px 34px rgba(37,211,102,.55);
}
.icms-wa-float::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid rgba(37,211,102,.3);
	animation: wa-pulse 2s ease-out infinite;
}
@keyframes wa-pulse {
	0%   { transform: scale(1);   opacity: 1; }
	100% { transform: scale(1.5); opacity: 0; }
}
@media (max-width: 480px) {
	.icms-wa-float { bottom: 16px; right: 16px; width: 52px; height: 52px; font-size: 22px; }
}

/* ════════════════════════════════════════════════════════════════════
   5. Auth modal — MOVED 2026-08-03
   ════════════════════════════════════════════════════════════════════
   The surface refinements that lived here (.modal-logo gradient header,
   .modal-tab underline, pill .mbtn) described the old single-card auth
   modal, whose .modal-logo no longer exists. The modal is now a split
   panel owned entirely by css/auth-modal.css. Section 9.4 below still
   supplies its EXIT animation via .modal-overlay.icms-closing. */

/* ════════════════════════════════════════════════════════════════════
   6. Reveal animations (CSS-only)
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
	.icms-reveal {
		opacity: 0;
		transform: translateY(16px);
		animation: icms-rise .7s var(--ease) forwards;
	}
	.icms-reveal[data-delay="1"] { animation-delay: 0.08s; }
	.icms-reveal[data-delay="2"] { animation-delay: 0.16s; }
	.icms-reveal[data-delay="3"] { animation-delay: 0.24s; }
	.icms-reveal[data-delay="4"] { animation-delay: 0.32s; }
	.icms-reveal[data-delay="5"] { animation-delay: 0.40s; }
	@keyframes icms-rise {
		to { opacity: 1; transform: translateY(0); }
	}
}

/* Hide stale Network Error banner on the landing —
   it shouldn't pop up before the user is even logged in.
   The banner reappears once they enter the app section. */
#welcomeModal:not(.wm-hidden) ~ #networkError,
body.ics-pre-login #networkError {
	display: none !important;
}

/* Hide the floating credit badge on the landing page */
#welcomeModal:not(.wm-hidden) ~ #ics-credit-badge,
body.ics-pre-login #ics-credit-badge {
	display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   7. Print: marketing pages should print clean
   ════════════════════════════════════════════════════════════════════ */
@media print {
	.icms-mnav, .icms-footer, .icms-wa-float { display: none !important; }
	.icms-marketing-page { padding: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   8. COMPACT HERO (v2.7) — at-a-glance landing
   ════════════════════════════════════════════════════════════════════ */
.icms-hero--compact {
	padding: 32px 0 48px !important;
	min-height: auto !important;
}
.icms-hero--compact .icms-container {
	max-width: 1180px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* TOP ACTION ROW — 3 prominent CTAs */
.icms-hero-top-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
}
.icms-hero-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 999px;
	font-family: var(--font-body), system-ui, sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.005em;
	cursor: pointer;
	border: 0;
	transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
	min-width: 220px;
	text-decoration: none;
}
.icms-hero-action i { font-size: 16px; }
.icms-hero-action:hover {
	transform: translateY(-2px);
}
.icms-hero-action--demo {
	background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
	color: #fff;
	box-shadow: 0 8px 24px rgba(20, 184, 166, 0.35);
}
.icms-hero-action--demo:hover {
	box-shadow: 0 14px 32px rgba(20, 184, 166, 0.45);
}
.icms-hero-action--register {
	background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-700) 100%);
	color: var(--ink-900);
	box-shadow: 0 8px 24px rgba(212, 163, 90, 0.35);
}
.icms-hero-action--register:hover {
	box-shadow: 0 14px 32px rgba(212, 163, 90, 0.45);
}
.icms-hero-action--login {
	background: transparent;
	color: var(--ink-700);
	border: 1.5px solid var(--ink-200);
	min-width: 140px;
}
.icms-hero-action--login:hover {
	background: var(--ink-50);
	border-color: var(--ink-700);
	color: var(--ink-900);
}

/* HEADLINE BLOCK */
.icms-hero-headline-block {
	text-align: center;
	max-width: 780px;
	margin: 8px auto 0;
}
.icms-hero-headline {
	font-family: var(--font-display);
	font-size: clamp(2rem, 5vw, 3.2rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: var(--ink-900);
	margin: 0 0 12px;
}
.icms-hero-headline .accent {
	color: var(--gold-700);
	font-style: italic;
	font-weight: 800;
}
.icms-hero-headline .thumbs {
	display: inline-block;
	transform: rotate(-8deg);
	margin-left: 4px;
}
.icms-hero-subline {
	font-size: 16px;
	color: var(--ink-500);
	line-height: 1.55;
	margin: 0;
}

/* INLINE PRICE CARDS */
.icms-hero-pricecards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	max-width: 980px;
	margin: 0 auto;
	width: 100%;
}
.icms-hero-pricecard {
	background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-800) 100%);
	color: #fff;
	border-radius: 14px;
	padding: 18px 16px;
	text-align: center;
	text-decoration: none;
	transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
	position: relative;
	border: 1.5px solid transparent;
	cursor: pointer;
}
.icms-hero-pricecard:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(10, 18, 40, 0.25);
	border-color: var(--gold-500);
}
.icms-hero-pricecard-name {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 6px;
}
.icms-hero-pricecard-amount {
	font-family: var(--font-display);
	font-size: 1.7rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
	line-height: 1;
	margin: 4px 0;
}
.icms-hero-pricecard-meta {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.55);
	font-family: var(--font-mono);
	letter-spacing: 0.04em;
}
.icms-hero-pricecard--featured {
	background: linear-gradient(180deg, var(--gold-500) 0%, var(--gold-700) 100%);
	border-color: var(--gold-500);
	box-shadow: 0 8px 24px rgba(212, 163, 90, 0.3);
}
.icms-hero-pricecard--featured .icms-hero-pricecard-name {
	color: var(--ink-900);
	opacity: 0.7;
}
.icms-hero-pricecard--featured .icms-hero-pricecard-amount {
	color: var(--ink-900);
}
.icms-hero-pricecard--featured .icms-hero-pricecard-meta {
	color: var(--ink-900);
	opacity: 0.65;
	font-weight: 600;
}
.icms-hero-pricecard-badge {
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--ink-900);
	color: var(--gold-400);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
	font-family: var(--font-mono);
	white-space: nowrap;
}

/* 6-FEATURE GRID */
.icms-hero-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	max-width: 1100px;
	margin: 12px auto 0;
	width: 100%;
}
.icms-hero-feat {
	background: var(--surface-card);
	border: 1px solid var(--ink-100);
	border-radius: 14px;
	padding: 18px;
	transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.icms-hero-feat:hover {
	transform: translateY(-2px);
	border-color: var(--gold-300);
	box-shadow: var(--shadow-md);
}
.icms-hero-feat-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	font-size: 16px;
	margin-bottom: 12px;
}
.icms-hero-feat-icon--blue   { background: #dbeafe; color: #2563eb; }
.icms-hero-feat-icon--green  { background: #d1fae5; color: #059669; }
.icms-hero-feat-icon--orange { background: #fed7aa; color: #ea580c; }
.icms-hero-feat-icon--purple { background: #ede9fe; color: #7c3aed; }
.icms-hero-feat-icon--teal   { background: #ccfbf1; color: #0d9488; }
.icms-hero-feat-icon--gold   { background: var(--gold-100); color: var(--gold-700); }
.icms-hero-feat h3 {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ink-900);
	margin: 0 0 6px;
	letter-spacing: -0.015em;
}
.icms-hero-feat p {
	font-size: 13px;
	color: var(--ink-500);
	line-height: 1.5;
	margin: 0;
}

/* HOW-IT-WORKS MINI */
.icms-hero-howmini {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--ink-500);
	margin: 4px auto 0;
	padding: 14px 20px;
	background: var(--ink-50);
	border-radius: 999px;
	max-width: 720px;
}
.icms-hero-howmini-label {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-700);
	margin-right: 4px;
}
.icms-hero-howmini-step {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--ink-700);
}
.icms-hero-howmini-step .num {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--gold-500);
	color: var(--ink-900);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	display: grid;
	place-items: center;
}
.icms-hero-howmini-arrow {
	color: var(--ink-300);
	font-size: 12px;
}

/* EMAIL CONTACT BAR */
.icms-hero-emailbar {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--surface-card);
	border: 1px solid var(--ink-100);
	border-left: 4px solid #16a34a;
	border-radius: 14px;
	padding: 14px 18px;
	max-width: 720px;
	margin: 0 auto;
	width: 100%;
}
.icms-hero-emailbar-icon {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #16a34a;
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 14px;
	flex-shrink: 0;
}
.icms-hero-emailbar-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}
.icms-hero-emailbar-label {
	font-size: 11px;
	color: var(--ink-500);
	font-weight: 500;
}
.icms-hero-emailbar-link {
	color: #16a34a;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}
.icms-hero-emailbar-link:hover {
	text-decoration: underline;
}
.icms-hero-emailbar-spacer { flex: 1; }
.icms-hero-emailbar-meta {
	font-size: 12px;
	color: var(--ink-500);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.icms-hero-emailbar-meta i {
	color: var(--gold-600);
}

/* RESPONSIVE — compact hero on tablets and phones */
@media (max-width: 880px) {
	.icms-hero--compact { padding: 24px 0 36px !important; }
	.icms-hero--compact .icms-container { gap: 22px; }
	.icms-hero-pricecards { grid-template-columns: repeat(2, 1fr); }
	.icms-hero-features { grid-template-columns: repeat(2, 1fr); }
	.icms-hero-action { min-width: 0; flex: 1 1 200px; padding: 12px 18px; font-size: 14px; }
	.icms-hero-action--login { flex: 0 1 auto; }
}
@media (max-width: 540px) {
	.icms-hero-pricecards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.icms-hero-pricecard { padding: 14px 10px; }
	.icms-hero-pricecard-amount { font-size: 1.4rem; }
	.icms-hero-features { grid-template-columns: 1fr; gap: 12px; }
	.icms-hero-feat { padding: 14px; }
	.icms-hero-action--login { width: 100%; flex: 1 1 100%; }
	.icms-hero-headline { font-size: 1.8rem; }
	.icms-hero-howmini { padding: 12px; gap: 8px; font-size: 12px; }
	.icms-hero-howmini-arrow { font-size: 10px; }
	.icms-hero-emailbar { padding: 12px; flex-wrap: wrap; }
	.icms-hero-emailbar-meta { width: 100%; padding-top: 8px; border-top: 1px dashed var(--ink-100); }
}

/* ════════════════════════════════════════════════════════════════════
   9. UI POLISH (2026-07) — smooth transitions & consistent interaction
   Additive only: transitions, focus rings and animations. Never adds
   shadows/radius to .panel (v4.css flattens it deliberately) and never
   touches table cells (admin-tables.css loads after this on admin).
   All motion obeys the prefers-reduced-motion kill-switch in
   responsive.css.
   ════════════════════════════════════════════════════════════════════ */

/* 9.1 Legacy admin cards: hover states exist (admin.css) but snap —
   give them the same eased motion the v2 dashboard cards already have.
   (.v2-kpi-card manages its own transitions in admin-v2.css.) */
.kpi-card,
.stat-card {
	transition:
		transform .18s var(--ease),
		box-shadow .28s var(--ease),
		border-color .18s var(--ease),
		background .18s var(--ease);
}

/* 9.2 Consistent keyboard focus ring. :where() keeps specificity at
   zero so any component with its own focus styling still wins. */
:where(button, .btn, .mbtn, .adm-tab, .modal-tab, .icms-theme-toggle):focus-visible {
	outline: 2px solid #fbbf24;
	outline-offset: 2px;
}

/* 9.3 Wizard step entrance retune — snappier than the 0.4s default.
   Scoped to the three wizard panels (partials/app.html #panel1-3) so
   other .panel elements keep layout.css defaults. Keyframe `fadeIn`
   lives in layout.css. */
.panel.icms-app-panel.active {
	animation: fadeIn .28s var(--ease);
}

/* 9.4 Modal EXIT animations — paired with js/ui-polish.js, which adds
   .icms-closing while a closing overlay plays out, then re-hides it.
   Entry animation (popIn, modals.css) is untouched. `animation` (not
   `transition`) because overlays are display-toggled. */
@keyframes icmsOverlayOut {
	from { opacity: 1; }
	to   { opacity: 0; }
}
@keyframes icmsPopOut {
	from { opacity: 1; transform: scale(1); }
	to   { opacity: 0; transform: scale(.95); }
}
.modal-overlay.icms-closing {
	animation: icmsOverlayOut .18s var(--ease) both;
	pointer-events: none;
}
.modal-overlay.icms-closing .modal-box {
	animation: icmsPopOut .18s var(--ease) both;
}

/* 9.5 Floating-layer rhythm on phones: the credit badge docks full-width
   at the bottom (responsive.css ≤480px) and the chat bubble floats just
   above it — lift toasts clear of both so notifications never land on
   top of other floating chrome. */
@media (max-width: 480px) {
	#toast,
	.icms-toast-fallback {
		bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/* ════════════════════════════════════════════════════════════════════
   10. TRAINER-RESOURCES MARQUEE
   ════════════════════════════════════════════════════════════════════
   The animated Google Drive strip rendered by partials/_marquee.html.
   These rules used to be duplicated as ~110 lines of inline <style> in
   BOTH partials/landing.html and partials/app.html — index.php declared
   @keyframes icms-marquee-scroll twice and shipped the five item strings
   four times. The landing partial's own comment warned the two copies
   would drift. One partial, one stylesheet, one set of rules now.

   Only the OUTER wrapper differs between the two placements:
     .icms-marquee      — hero: capped to the 1180px container
     .icms-app-marquee  — workspace: full width, aligned to the module row
   ════════════════════════════════════════════════════════════════════ */
@keyframes icms-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Wrappers (the only per-placement difference) */
.icms-marquee { position: relative; z-index: 2; max-width: var(--container-max); margin: 0 auto 22px; padding: 0 20px; }
.icms-app-marquee { width: 100%; box-sizing: border-box; padding: 14px 20px 12px; }

.icms-marquee-banner {
	display: flex; align-items: stretch; overflow: hidden; text-decoration: none;
	background: linear-gradient(135deg, #ffffff 0%, var(--gold-50, #fdf9f2) 100%);
	border: 1px solid var(--gold-300, #efd4a0); border-radius: 999px;
	box-shadow: var(--shadow-md, 0 4px 10px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04));
	transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.icms-marquee-banner:hover, .icms-marquee-banner:focus-visible {
	transform: translateY(-2px); border-color: var(--gold-400, #e0b662);
	box-shadow: var(--shadow-lg, 0 10px 30px rgba(15,23,42,.08), 0 3px 8px rgba(15,23,42,.04)); outline: none;
}
/* Fixed left badge — gold gradient chip that never scrolls. The one
   place saturated gold still works; it anchors the pale strip. */
.icms-marquee-badge {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
	background: linear-gradient(135deg, #fbbf24, #d4a35a); color: var(--ink-900, #0f172a);
	font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
	font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
	padding: 0 16px; white-space: nowrap;
}
.icms-marquee-badge i { font-size: 13px; }
/* Scrolling viewport with soft fade edges. */
.icms-marquee-viewport {
	position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent);
}
.icms-marquee-track {
	display: inline-flex; align-items: center; white-space: nowrap; padding: 11px 0;
	will-change: transform; animation: icms-marquee-scroll 32s linear infinite;
}
.icms-marquee-banner:hover .icms-marquee-track,
.icms-marquee-banner:focus-visible .icms-marquee-track { animation-play-state: paused; }

/* ── Don't animate the copy nobody can see (added 2026-08-02) ──
   index.php renders BOTH placements: the hero copy inside #welcomeModal
   and the workspace copy from partials/app.html. For a signed-out
   visitor #welcomeModal is `position: fixed; inset: 0; z-index: 9000`
   with an opaque background, so the workspace copy sits underneath it,
   completely covered — and was still running a 32s infinite transform
   on its own compositor layer (`will-change` above pins one), forever,
   on the marketing page. Two marquees animating, one visible.

   Scoped through `#welcomeModal ~` so it can only ever match a page that
   actually renders that cover — exam / notes / referral have no
   #welcomeModal and are untouched. `body.ics-pre-login` flips to
   `ics-logged-in` pre-paint in partials/_body-open.html (and on login in
   js/app.js, exam, notes, referral), at which point #welcomeModal is
   hidden and this rule stops matching, so the workspace marquee animates
   normally for the people who can see it. Deliberately NOT display:none —
   pausing changes no layout, so a missed class flip can only ever leave
   the marquee still, never missing. */
body.ics-pre-login #welcomeModal ~ .icms-app-marquee .icms-marquee-track {
	animation-play-state: paused;
	will-change: auto;
}

.icms-marquee-group { display: inline-flex; align-items: center; flex: 0 0 auto; }
.icms-marquee-item {
	display: inline-flex; align-items: center; gap: 8px; padding: 0 22px;
	color: var(--ink-700, #334155); font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
	font-size: 13.5px; font-weight: 600;
}
.icms-marquee-item i { color: var(--gold-600, #b07d1f); font-size: 13px; }
.icms-marquee-sep { color: var(--gold-300, #efd4a0); font-size: 7px; }
/* Fixed right CTA. */
.icms-marquee-cta {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
	color: var(--gold-700, #92610f); font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
	font-size: 13px; font-weight: 800; white-space: nowrap;
	padding: 0 18px 0 15px; border-left: 1px solid var(--ink-200, #e2e8f0);
}
.icms-marquee-cta i { font-size: 12px; transition: transform .16s ease; }
.icms-marquee-banner:hover .icms-marquee-cta i,
.icms-marquee-banner:focus-visible .icms-marquee-cta i { transform: translateX(3px); }

@media (max-width: 880px) {
	.icms-app-marquee { padding: 12px 16px 10px; }
}
@media (max-width: 640px) {
	.icms-marquee { padding: 0 14px; }
	.icms-marquee-badge-text { display: none; }
	.icms-marquee-badge { padding: 0 13px; }
	.icms-marquee-cta-text { display: none; }
	.icms-marquee-item { font-size: 12.5px; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.icms-marquee-track { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   ALL-ACCESS BUNDLE CARD — prominent, on-brand gold promo
   Rendered in partials/app.html below the module grid. Replaces the old
   slim grey .icms-bundle-strip note. Uses the gold accent vars above.
   Gold-on-light text uses --gold-700 for AA contrast per the palette.
   ════════════════════════════════════════════════════════════════════ */
.icms-bundle-card {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 8px 0 20px;
	padding: 20px 22px;
	border: 1px solid var(--gold-300);
	border-radius: 16px;
	background: linear-gradient(120deg, var(--gold-100) 0%, var(--gold-50) 46%, #ffffff 100%);
	box-shadow: 0 6px 20px -10px rgba(146, 97, 15, 0.35);
}
.icms-bundle-card__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--gold-500);
	color: #ffffff;
	font-size: 22px;
	box-shadow: 0 4px 12px -4px rgba(176, 125, 31, 0.6);
}
.icms-bundle-card__body {
	flex: 1 1 auto;
	min-width: 0;
}
.icms-bundle-card__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
	color: var(--ink-900, #0f172a);
}
.icms-bundle-card__sub {
	margin: 3px 0 0;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--ink-600, #475569);
}
.icms-bundle-card__badge {
	display: inline-block;
	margin-top: 8px;
	padding: 3px 11px;
	border-radius: 999px;
	background: var(--gold-100);
	border: 1px solid var(--gold-300);
	color: var(--gold-700);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
}
.icms-bundle-card__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border: none;
	border-radius: 12px;
	background: var(--gold-500);
	color: #ffffff;
	font: inherit;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14.5px;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: 0 4px 14px -4px rgba(176, 125, 31, 0.7);
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.icms-bundle-card__cta:hover {
	background: var(--gold-600);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px -4px rgba(146, 97, 15, 0.75);
}
.icms-bundle-card__cta:active { transform: translateY(0); }
.icms-bundle-card__cta:focus-visible {
	outline: 3px solid var(--gold-300);
	outline-offset: 2px;
}
@media (max-width: 640px) {
	.icms-bundle-card {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		gap: 14px;
		padding: 18px;
	}
	.icms-bundle-card__cta {
		width: 100%;
		justify-content: center;
	}
}
@media (prefers-reduced-motion: reduce) {
	.icms-bundle-card__cta { transition: none; }
	.icms-bundle-card__cta:hover { transform: none; }
}