/* ════════════════════════════════════════════════════════════════════════
   v9.1-polish.css  ·  InteliCMS production-ready release polish
   ────────────────────────────────────────────────────────────────────────
   Single stylesheet containing all the v9.1 UI/UX adjustments so the
   diff is easy to audit and any future regression can be reverted with a
   single <link> removal.

   Sections:
     1. Toast notifications — smaller, less intrusive
     2. Admin notifications panel (new tab) — layout + items
     3. Admin notifications modal — fully responsive
     4. Generate / Review / Back buttons — mobile optimisation
     5. Misc: tab badge styling, focus rings
   ════════════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────────────
   1. TOAST  — smaller, lighter, doesn't dominate the screen
   ────────────────────────────────────────────────────────────────────────
   The previous toast was 14px font, 22px horizontal padding, full-width
   on mobile. For success messages especially this felt heavy. Slim it
   down so it's clearly a confirmation, not an interruption.
   ──────────────────────────────────────────────────────────────────────── */
.toast {
	font-size: 12.5px !important;
	padding: 9px 16px !important;
	border-radius: 10px !important;
	min-height: 0 !important;
	max-width: 360px !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
	gap: 8px !important;
}
.toast i,
.toast #toastIcon {
	font-size: 13px !important;
}
.toast #toastMsg {
	font-size: 12.5px !important;
	line-height: 1.4 !important;
}

/* Success toasts get an extra trim — they appear most often and shouldn't
   feel heavy. Other types stay slightly larger so warnings/errors retain
   visual weight. */
.toast.success {
	font-size: 12px !important;
	padding: 8px 14px !important;
	max-width: 320px !important;
}
.toast.success i,
.toast.success #toastIcon {
	font-size: 12px !important;
}

/* Mobile — keep toast small but still legible */
@media (max-width: 540px) {
	.toast {
		font-size: 12px !important;
		padding: 8px 14px !important;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		bottom: 18px !important;
		max-width: min(340px, calc(100vw - 32px)) !important;
	}
	.toast.show {
		/* counteract any framework that resets transform on .show */
		transform: translateX(-50%) translateY(0) !important;
	}
}


/* ────────────────────────────────────────────────────────────────────────
   2. ADMIN NOTIFICATIONS PANEL  (new dedicated tab)
   ────────────────────────────────────────────────────────────────────────
   Two-column layout on desktop (compose | recent), single column on
   mobile. Items are styled like cards with type-coloured pills.
   ──────────────────────────────────────────────────────────────────────── */
.adm-notif-grid {
	display: grid;
	grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.3fr);
	gap: 24px;
	align-items: flex-start;
}

.adm-notif-compose,
.adm-notif-list {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 18px 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.adm-notif-compose h3,
.adm-notif-list h3 {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
	color: #0f172a;
	display: flex;
	align-items: center;
	gap: 8px;
}
.adm-notif-compose h3 i { color: #d4a35a; }
.adm-notif-list    h3 i { color: #6366f1; }

.adm-notif-audience-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.adm-notif-radio {
	flex: 1;
	min-width: 130px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #fafbfc;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: #475569;
	transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.adm-notif-radio:hover { border-color: #cbd5e1; background: #f1f5f9; }
.adm-notif-radio input[type="radio"] {
	margin: 0;
	accent-color: #d4a35a;
}
.adm-notif-radio:has(input:checked) {
	border-color: #d4a35a;
	background: #fffbeb;
	color: #0f172a;
}
.adm-notif-radio span i { color: #946b29; margin-right: 2px; }

/* Compose form fields */
.adm-notif-compose .mfield { margin-bottom: 12px; }
.adm-notif-compose .mfield label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #475569;
	margin-bottom: 5px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.adm-notif-compose .mfield input,
.adm-notif-compose .mfield select,
.adm-notif-compose .mfield textarea {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid #d8dfee;
	border-radius: 7px;
	font-size: 13px;
	font-family: inherit;
	background: #fff;
	outline: none;
	transition: border-color 0.18s;
	color: #0f172a;
}
.adm-notif-compose .mfield input:focus,
.adm-notif-compose .mfield select:focus,
.adm-notif-compose .mfield textarea:focus {
	border-color: #d4a35a;
	box-shadow: 0 0 0 3px rgba(212, 163, 90, 0.12);
}

/* Notifications list items */
.adm-notif-item {
	padding: 12px 14px;
	border-bottom: 1px solid #e8edf5;
	background: #fff;
	transition: background 0.15s;
}
.adm-notif-item:last-child { border-bottom: 0; }
.adm-notif-item:hover      { background: #fafbfc; }

.adm-notif-item-row1 {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 4px;
}
.adm-notif-item-type {
	flex-shrink: 0;
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	line-height: 1.6;
}
.adm-notif-item-title {
	flex: 1;
	font-size: 13.5px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.4;
}
.adm-notif-item-del {
	flex-shrink: 0;
	width: 26px; height: 26px;
	border-radius: 6px;
	background: transparent;
	color: #94a3b8;
	border: 0;
	cursor: pointer;
	font-size: 11px;
	transition: background 0.15s, color 0.15s;
}
.adm-notif-item-del:hover {
	background: #fee2e2;
	color: #dc2626;
}
.adm-notif-item-body {
	font-size: 12.5px;
	color: #475569;
	line-height: 1.5;
	margin: 4px 0 8px;
	word-wrap: break-word;
}
.adm-notif-item-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 11px;
	color: #94a3b8;
	font-weight: 500;
}
.adm-notif-item-meta i { margin-right: 3px; }

/* Tab badge for the new Notifications tab */
.adm-tab-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #ef4444;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	margin-left: 4px;
}

/* Mobile — stack to single column */
@media (max-width: 900px) {
	.adm-notif-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.adm-notif-compose,
	.adm-notif-list {
		padding: 14px 16px;
	}
}


/* ────────────────────────────────────────────────────────────────────────
   3. NOTIFICATIONS MODAL (user-facing bell dropdown)
   ────────────────────────────────────────────────────────────────────────
   The user notifications panel (#icmsNotifPanel from icms-app-extras.js)
   was clipped on small screens. Make it fully responsive: full-width on
   phones, retain pop-out positioning on desktop.
   ──────────────────────────────────────────────────────────────────────── */
.icms-notif-panel {
	max-width: min(380px, calc(100vw - 16px)) !important;
	max-height: min(560px, calc(100vh - 100px)) !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
}
.icms-notif-panel-body {
	flex: 1 1 auto !important;
	overflow-y: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	-webkit-overflow-scrolling: touch !important;
}

/* Mobile — full width, anchored top */
@media (max-width: 540px) {
	.icms-notif-panel {
		position: fixed !important;
		top: 56px !important;
		left: 8px !important;
		right: 8px !important;
		width: auto !important;
		max-width: calc(100vw - 16px) !important;
		max-height: calc(100vh - 64px) !important;
		border-radius: 12px !important;
		/* allow JS-set top/left to be overridden — repositioning is no
		   longer needed on mobile because we anchor by inset */
	}
}


/* ────────────────────────────────────────────────────────────────────────
   4. UPLOAD-MODAL CTA BUTTONS  — Review / Generate / Back on mobile
   ────────────────────────────────────────────────────────────────────────
   On phones the .icms-app-cta-card-btn buttons (Generate, Buy credits)
   and the Review/Back row at the bottom of step 2 became cramped:
   labels overflowed, icons clipped, and on very narrow screens the
   buttons broke out of the panel. Fix with responsive sizing + label
   truncation guard.
   ──────────────────────────────────────────────────────────────────────── */

/* Generate / Buy-credits CTA cards: stack content vertically on narrow
   screens so the icon doesn't squash the text. */
@media (max-width: 540px) {
	.icms-app-cta-card {
		padding: 14px 14px !important;
	}
	.icms-app-cta-card-body {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		gap: 8px !important;
		margin-bottom: 10px !important;
	}
	.icms-app-cta-card-text h4 {
		font-size: 15px !important;
	}
	.icms-app-cta-card-text p {
		font-size: 12px !important;
		line-height: 1.45 !important;
	}
	.icms-app-cta-card-btn {
		width: 100% !important;
		padding: 11px 14px !important;
		font-size: 14px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		min-height: 44px !important; /* iOS recommended tap target */
	}
}

/* The "Review & generate" + "Back" split row at the bottom of step 2.
   On phones, stack vertically so each button gets the full row width
   (44px+ tall, easier to tap). */
.icms-app-step-actions--split {
	display: flex !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
}
.icms-app-step-actions--split > .btn {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

@media (max-width: 540px) {
	.icms-app-step-actions--split {
		flex-direction: column !important;
		gap: 8px !important;
	}
	.icms-app-step-actions--split > .btn {
		width: 100% !important;
		padding: 11px 14px !important;
		font-size: 14px !important;
		min-height: 44px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}
	/* Primary "Review & generate" goes first visually even though it's
	   second in the DOM (the back button is more familiar at top on mobile,
	   but the primary CTA should be right under the outcomes preview where
	   the user's eye lands). */
	.icms-app-step-actions--split > .btn-primary {
		order: -1;
	}
}

/* The "Back to upload" button on step 3 — same treatment for consistency */
@media (max-width: 540px) {
	.icms-app-step-actions .btn {
		min-height: 44px !important;
		padding: 11px 14px !important;
		font-size: 13.5px !important;
	}
}


/* ────────────────────────────────────────────────────────────────────────
   5. MISC POLISH
   ──────────────────────────────────────────────────────────────────────── */

/* Generic focus ring for keyboard users — ensures notif tab + buttons
   have visible focus when navigating with Tab. */
.adm-tab:focus-visible,
.adm-notif-radio:focus-visible,
.adm-notif-item-del:focus-visible {
	outline: 2px solid #d4a35a;
	outline-offset: 2px;
}


/* ════════════════════════════════════════════════════════════════════════
   v9.2  ·  Hero / landing page mobile responsiveness
   ────────────────────────────────────────────────────────────────────────
   The landing-page hero (`.icms-hero`) ships with a 4-column price grid,
   3-column features grid, 220px-min-width CTA buttons, and `min-height:
   100vh` — all set inline in partials/landing.html. On phones (≤ 540px)
   that produces:
     • A vertical strip of cramped price cards that overflow horizontally
     • Three CTA buttons stacked too tall, dwarfing the headline
     • Headline + subline buried below an excessive viewport-tall hero
   The rules below override the inline styles ONLY at narrow widths,
   keeping desktop unchanged.
   ════════════════════════════════════════════════════════════════════════ */

/* Tablet — start tightening, drop hero from 4 → 2 col price cards */
@media (max-width: 900px) {
	.icms-hero {
		min-height: auto !important;
		padding: 24px 0 32px !important;
	}
	.icms-hero-pricecards {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}
	.icms-hero-features {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 14px !important;
	}
}

/* Phone — single-column everything, large tap targets */
@media (max-width: 540px) {
	.icms-hero {
		padding: 20px 0 28px !important;
		min-height: auto !important;
	}
	.icms-hero .icms-container {
		padding: 0 14px !important;
		gap: 18px !important;
	}

	/* CTA row — full-width buttons, no min-width floor */
	.icms-hero-top-actions {
		flex-direction: column !important;
		gap: 10px !important;
		width: 100% !important;
	}
	.icms-hero-top-actions .icms-hero-action {
		width: 100% !important;
		min-width: 0 !important;
		padding: 13px 18px !important;
		font-size: 14px !important;
		min-height: 48px !important;
	}

	/* Headline sized for phones — avoid clipping with a clear floor */
	.icms-hero-headline {
		font-size: clamp(1.55rem, 7vw, 2.2rem) !important;
		line-height: 1.15 !important;
		margin-bottom: 10px !important;
	}
	.icms-hero-subline {
		font-size: 14.5px !important;
		line-height: 1.5 !important;
	}

	/* Price cards — 2 columns at this width still fits and looks healthy
	   on phones; full single-column was too tall (4 stacked cards = lots
	   of scrolling before the user gets to the rest of the hero). */
	.icms-hero-pricecards {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
		max-width: 100% !important;
	}
	.icms-hero-pricecard {
		padding: 14px 10px !important;
	}
	.icms-hero-pricecard-name {
		font-size: 9px !important;
		letter-spacing: 0.14em !important;
	}
	.icms-hero-pricecard-amount {
		font-size: 1.35rem !important;
	}
	.icms-hero-pricecard-meta {
		font-size: 10px !important;
	}
	.icms-hero-pricecard-badge {
		font-size: 8px !important;
		padding: 2px 8px !important;
	}

	/* Features grid — single column on phones (icon + text reads better
	   stacked rather than crammed into a 2-col grid at this width) */
	.icms-hero-features {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
		margin-top: 6px !important;
	}
}

/* Very narrow (≤ 380px, e.g. older / smaller phones) — go single-col on
   the price cards too, so they aren't squashed below readability. */
@media (max-width: 380px) {
	.icms-hero-pricecards {
		grid-template-columns: 1fr !important;
	}
	.icms-hero-pricecard {
		padding: 12px 14px !important;
	}
}

/* ════════════════════════════════════════════════════════════════════
   ADMIN DASHBOARD — v4 brand-dark header + modern responsive nav
   ────────────────────────────────────────────────────────────────────
   Loaded last, so this layer wins over admin.css / admin-v2.css and —
   via higher-specificity selectors + !important — the inline tab styles
   in the admin-dashboard partial. Brings the admin chrome in line with
   the rest of the platform (navy #0a1228 + gold #fbbf24 + 2×2 mark +
   slogan) and keeps the brand, navigation, logo and slogan looking right
   from 4K down to ~360px. Colours only on the buttons — the existing,
   well-tuned responsive DIMENSIONS (icon-only at ≤480 etc.) are left
   untouched. */

/* ── Header bar → brand navy with a gold hairline ── */
.admin-header-bar {
	background: linear-gradient(135deg, #0a1228 0%, #131d36 55%, #0f172a 100%) !important;
	border-bottom: 1px solid rgba(251, 191, 36, 0.22) !important;
	box-shadow: 0 6px 22px rgba(10, 18, 40, 0.28) !important;
}
.admin-header-bar::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px; height: 2px;
	background: linear-gradient(90deg, transparent, #fbbf24 50%, transparent);
	opacity: .5; pointer-events: none;
}
.admin-header-brand { border-right-color: rgba(255, 255, 255, 0.10) !important; }
.admin-header-logo {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
	border: 1px solid rgba(251, 191, 36, 0.55) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35), 0 0 0 3px rgba(251, 191, 36, .08),
	            inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
.admin-header-title { color: #ffffff !important; }
.admin-header-sub   { color: rgba(251, 191, 36, 0.80) !important; }

/* ── Search → translucent on navy ── */
.admin-header-search input {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	color: #e8edf6 !important;
}
.admin-header-search input::placeholder { color: #8b97ad !important; }
.admin-header-search input:hover { background: rgba(255, 255, 255, 0.10) !important; }
.admin-header-search input:focus {
	background: rgba(255, 255, 255, 0.12) !important;
	border-color: #fbbf24 !important;
	box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.18) !important;
}
.admin-search-icon { stroke: #aab4c5 !important; opacity: .9 !important; }

/* ── Header buttons → translucent ghost on navy (colours only) ── */
.admin-hdr-btn,
.admin-hdr-btn.neutral,
.admin-hdr-btn.green, .admin-hdr-btn.blue, .admin-hdr-btn.teal,
.admin-hdr-btn.amber, .admin-hdr-btn.purple {
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	color: #e8edf6 !important;
	box-shadow: none !important;
}
.admin-hdr-btn:hover,
.admin-hdr-btn.neutral:hover,
.admin-hdr-btn.green:hover, .admin-hdr-btn.blue:hover, .admin-hdr-btn.teal:hover,
.admin-hdr-btn.amber:hover, .admin-hdr-btn.purple:hover {
	background: rgba(255, 255, 255, 0.16) !important;
	border-color: rgba(255, 255, 255, 0.30) !important;
	color: #ffffff !important;
}
/* Primary "Refresh" → brand gold */
#adminRefreshBtn,
.admin-hdr-btn.gray {
	background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
	border: 1px solid #f59e0b !important;
	color: #0a1228 !important;
	box-shadow: 0 4px 14px rgba(251, 191, 36, 0.30) !important;
	font-weight: 800 !important;
}
#adminRefreshBtn:hover,
.admin-hdr-btn.gray:hover {
	background: linear-gradient(135deg, #fcca4d 0%, #fbbf24 100%) !important;
	color: #0a1228 !important;
}
#adminRefreshBtn.is-loading { background: #b45309 !important; color: #fff !important; }
/* Logout → translucent red */
.admin-hdr-btn.red {
	background: rgba(239, 68, 68, 0.14) !important;
	border-color: rgba(248, 113, 113, 0.42) !important;
	color: #fca5a5 !important;
}
.admin-hdr-btn.red:hover {
	background: rgba(239, 68, 68, 0.24) !important;
	border-color: rgba(248, 113, 113, 0.65) !important;
	color: #ffffff !important;
}
/* Live pill — soft ring so it sits comfortably on the navy bar */
.admin-last-updated { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) !important; }

/* ── Tab bar → modern pill nav (specificity + !important beats inline) ── */
.admin-overlay .adm-tab-bar {
	background: #ffffff !important;
	border-bottom: 1px solid #e9edf3 !important;
	padding: 6px 16px 0 !important;
	gap: 4px !important;
	box-shadow: 0 4px 14px rgba(10, 18, 40, 0.06) !important;
}
.admin-overlay .adm-tab {
	padding: 11px 16px !important;
	border-bottom: none !important;
	border-radius: 10px 10px 0 0 !important;
	margin-bottom: 0 !important;
	color: #64748b !important;
	position: relative !important;
	transition: background .15s, color .15s !important;
}
.admin-overlay .adm-tab:hover { background: #f6f8fb !important; color: #0f172a !important; }
.admin-overlay .adm-tab.active {
	background: linear-gradient(180deg, rgba(251, 191, 36, 0.16) 0%, rgba(251, 191, 36, 0.04) 100%) !important;
	color: #0a1228 !important;
	font-weight: 800 !important;
}
.admin-overlay .adm-tab.active::after {
	content: "";
	position: absolute;
	left: 12px; right: 12px; bottom: 0; height: 3px;
	border-radius: 3px 3px 0 0;
	background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

/* ── Responsive: keep the slogan visible across sizes; compact the nav ── */
@media (max-width: 1024px) {
	.admin-header-bar .admin-header-sub { display: block !important; font-size: 10.5px !important; }
	.admin-header-search { max-width: 300px !important; }
}
@media (max-width: 600px) {
	.admin-overlay .adm-tab { padding: 10px 12px !important; font-size: 12.5px !important; }
}
/* Below 480 the action buttons collapse to icons (admin.css) and room is
   genuinely tight — hide the slogan there to keep the wordmark crisp. */
@media (max-width: 480px) {
	.admin-header-bar .admin-header-sub { display: none !important; }
}

/* ── Tab nav: ONE swipeable row on every screen size ──────────────────
   There are now 8 tabs (Overview … Settings, incl. Exam Module + the new
   Referrals tab). On narrow screens flex-wrap pushed them onto 2–3 rows,
   which pushed the workspace down and looked broken. Make the bar a single
   horizontally-scrollable strip instead: all tabs stay reachable with a
   swipe, and on desktop (where all 8 fit) no scrollbar shows. */
.admin-overlay .adm-tab-bar {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: thin !important;
	scrollbar-color: #cbd5e1 transparent !important;
	scroll-snap-type: x proximity;
}
.admin-overlay .adm-tab {
	flex: 0 0 auto !important;
	white-space: nowrap !important;
	scroll-snap-align: start;
}
.admin-overlay .adm-tab-bar::-webkit-scrollbar { height: 5px; }
.admin-overlay .adm-tab-bar::-webkit-scrollbar-track { background: transparent; }
.admin-overlay .adm-tab-bar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
/* Soft fade hint on the right edge so it's obvious more tabs scroll into
   view on phones. */
.admin-overlay .adm-tab-bar {
	background:
		linear-gradient(90deg, #ffffff 70%, rgba(255,255,255,0)) right center / 28px 100% no-repeat,
		#ffffff !important;
}

/* v9.4 - targeted UI polish for landing samples/pricing, plan modal, and docs back action */
.icms-section--removed-how {
	display: none !important;
}

.icms-proof-samples {
	padding: 48px 0 44px !important;
	background: #fff !important;
}
.icms-proof-samples .icms-container,
.icms-pricing-polish .icms-container {
	max-width: 1080px !important;
	margin: 0 auto !important;
	padding: 0 20px !important;
	text-align: center !important;
}
.icms-proof-samples .icms-section-sub,
.icms-pricing-polish .icms-section-sub {
	max-width: 64ch !important;
	margin: 0 auto 22px !important;
	font-size: 15.5px !important;
	color: #485776 !important;
	line-height: 1.65 !important;
}
.icms-samples-downloads-row {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	gap: 10px !important;
	max-width: 980px !important;
	margin: 0 auto !important;
}
.icms-sample-card {
	min-height: 86px !important;
	padding: 14px 12px !important;
	border: 1px solid #e7ebf3 !important;
	border-radius: 12px !important;
	background: linear-gradient(180deg, #fff 0%, #fbfcff 100%) !important;
	color: #0a1228 !important;
	text-decoration: none !important;
	font: inherit !important;
	cursor: pointer !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05) !important;
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.icms-sample-card:hover {
	transform: translateY(-2px) !important;
	border-color: #d4a35a !important;
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09) !important;
}
.icms-sample-card-icon {
	width: 34px !important;
	height: 34px !important;
	border-radius: 10px !important;
	display: grid !important;
	place-items: center !important;
	background: #f8f1e6 !important;
	color: #946b29 !important;
	font-size: 15px !important;
}
.icms-sample-card strong,
.icms-sample-card small {
	display: block !important;
	line-height: 1.25 !important;
}
.icms-sample-card strong {
	font-size: 13.5px !important;
	font-weight: 800 !important;
	letter-spacing: 0 !important;
}
.icms-sample-card small {
	margin-top: 3px !important;
	font-size: 11px !important;
	color: #64748b !important;
	font-weight: 600 !important;
}
.icms-sample-card--accent {
	background: linear-gradient(180deg, #f6f3ff 0%, #fff 100%) !important;
	border-color: #ddd6fe !important;
}
.icms-sample-card--accent .icms-sample-card-icon {
	background: #ede9fe !important;
	color: #5b21b6 !important;
}
.icms-sample-card--dark {
	background: #0a1228 !important;
	border-color: #0a1228 !important;
	color: #fff !important;
}
.icms-sample-card--dark .icms-sample-card-icon {
	background: rgba(251, 191, 36, 0.14) !important;
	color: #fbbf24 !important;
}
.icms-sample-card--dark small {
	color: rgba(255, 255, 255, 0.68) !important;
}

.icms-pricing-polish {
	padding: 50px 0 54px !important;
	background: linear-gradient(180deg, #faf7f2 0%, #fff 100%) !important;
}
.icms-pricing-head {
	max-width: 700px !important;
	margin: 0 auto 24px !important;
}
.icms-pricing-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 12px !important;
	max-width: 820px !important;
	width: 100% !important;
	margin: 0 auto !important;
}
.icms-pricing-polish .icms-hero-pricecard {
	position: relative !important;
	min-height: 118px !important;
	border: 1px solid #e6dccd !important;
	border-radius: 14px !important;
	padding: 18px 14px !important;
	background: #fff !important;
	color: #0a1228 !important;
	cursor: pointer !important;
	font-family: inherit !important;
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.icms-pricing-polish .icms-hero-pricecard:hover {
	transform: translateY(-2px) !important;
	border-color: #d4a35a !important;
	box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1) !important;
}
.icms-pricing-polish .icms-hero-pricecard-name {
	font-family: "JetBrains Mono", monospace !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: #7a5d31 !important;
	margin-bottom: 10px !important;
}
.icms-pricing-polish .icms-hero-pricecard-amount {
	font-family: var(--font-display) !important;
	font-size: 1.45rem !important;
	font-weight: 900 !important;
	color: #0a1228 !important;
	line-height: 1 !important;
	margin: 0 0 8px !important;
}
.icms-pricing-polish .icms-hero-pricecard-meta {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #64748b !important;
}
.icms-pricing-polish .icms-hero-pricecard--featured {
	border-color: #d4a35a !important;
	background: linear-gradient(180deg, #fff8eb 0%, #fff 100%) !important;
	box-shadow: 0 14px 34px rgba(212, 163, 90, 0.18) !important;
}
.icms-pricing-polish .icms-hero-pricecard-badge {
	position: absolute !important;
	top: -9px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	background: #0a1228 !important;
	color: #fbbf24 !important;
	font-family: "JetBrains Mono", monospace !important;
	font-size: 9px !important;
	font-weight: 800 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	padding: 4px 10px !important;
	border-radius: 999px !important;
	white-space: nowrap !important;
}

#planModal .icms-plan-modal-box {
	position: relative !important;
	max-width: 760px !important;
	width: min(760px, calc(100vw - 24px)) !important;
	max-height: calc(100vh - 28px) !important;
	padding: 0 !important;
	overflow: auto !important;
	border-radius: 18px !important;
	border: 1px solid rgba(226, 232, 240, 0.95) !important;
	box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24) !important;
}
#planModal .icms-plan-modal-box > div:first-child {
	padding: 16px 18px 14px !important;
	background: linear-gradient(135deg, #0a1228 0%, #16233c 100%) !important;
	color: #fff !important;
}
#planModal .icms-plan-modal-box > div:first-child::before {
	content: "Buy upload credits";
	display: block;
	font-family: var(--font-display);
	font-size: 1.18rem;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.1;
}
#planModal .icms-plan-modal-box > div:first-child::after {
	content: "Choose a package, then confirm the M-Pesa STK prompt.";
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.68);
}
#planModal .icms-plan-modal-box > div:first-child > div:first-child {
	display: none !important;
}
#planModal .icms-plan-modal-box > div:first-child > div:nth-child(2) {
	display: flex !important;
	align-items: center !important;
	gap: 7px !important;
	margin-top: 12px !important;
}
#planModal .icms-plan-modal-box > div:first-child > div:nth-child(2) > div:nth-child(odd) {
	background: rgba(255, 255, 255, 0.09) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	color: #dbe4f0 !important;
	border-radius: 999px !important;
	padding: 5px 10px !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: 0.02em !important;
}
#planModal .icms-plan-modal-box > div:first-child > div:nth-child(2) > div:first-child {
	background: #fbbf24 !important;
	border-color: #fbbf24 !important;
	color: #0a1228 !important;
}
#planModal .icms-plan-modal-box > div:first-child > div:nth-child(2) > div:nth-child(even) {
	height: 1px !important;
	background: rgba(255, 255, 255, 0.18) !important;
}
#planModal .icms-plan-modal-box > button[onclick="closePlanModal()"] {
	top: 12px !important;
	right: 14px !important;
	width: 30px !important;
	height: 30px !important;
	background: rgba(255, 255, 255, 0.12) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
#planModal .icms-plan-modal-box > div:last-child {
	padding: 16px 18px 18px !important;
	background: #fff !important;
}
#planModal .icms-plan-modal-box > div:last-child > p:first-child {
	margin: 0 0 10px !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	color: #0a1228 !important;
}
#planModal .icms-plan-modal-box > div:last-child > div:nth-of-type(1) {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 8px !important;
	margin-bottom: 12px !important;
}
#planModal .plan-option {
	min-height: 118px !important;
	padding: 13px 10px 11px !important;
	border: 1px solid #dfe6ef !important;
	border-radius: 12px !important;
	background: #fff !important;
	box-shadow: none !important;
	transform: none !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}
#planModal .plan-option:hover {
	border-color: #d4a35a !important;
	background: #fffaf0 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08) !important;
}
#planModal .plan-option.selected {
	border: 2px solid #d4a35a !important;
	background: linear-gradient(180deg, #fff7e5 0%, #fff 100%) !important;
	box-shadow: 0 12px 26px rgba(212, 163, 90, 0.22) !important;
}
#planModal .plan-option > div {
	margin-left: auto !important;
	margin-right: auto !important;
}
#planModal .plan-option > div:nth-last-child(3) {
	font-size: 28px !important;
	font-weight: 900 !important;
	color: #0a1228 !important;
	line-height: 1 !important;
}
#planModal .plan-option > div:nth-last-child(2) {
	font-size: 11px !important;
	color: #64748b !important;
	margin: 4px 0 8px !important;
}
#planModal .plan-option > div:nth-last-child(1) {
	width: 100% !important;
	border-radius: 999px !important;
	padding: 7px 10px !important;
	background: #0a1228 !important;
	color: #fbbf24 !important;
	font-size: 13px !important;
	font-weight: 900 !important;
}
#planModal #plan4 > div:first-child {
	top: -9px !important;
	background: #16a34a !important;
	font-size: 8px !important;
	padding: 3px 8px !important;
}
#planModal #plan4 > div:nth-child(3) {
	font-size: 28px !important;
	font-weight: 900 !important;
	color: #0a1228 !important;
	line-height: 1 !important;
}
#planModal #plan4 > div:nth-child(4) {
	font-size: 11px !important;
	color: #64748b !important;
	margin: 4px 0 8px !important;
}
#planModal #plan4 > div:nth-child(5) {
	width: 100% !important;
	border-radius: 999px !important;
	padding: 7px 10px !important;
	background: #fbbf24 !important;
	color: #0a1228 !important;
	font-size: 13px !important;
	font-weight: 900 !important;
}
#planModal #plan4 > div:nth-child(6) {
	width: auto !important;
	padding: 0 !important;
	background: transparent !important;
	color: #16a34a !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	margin-top: 5px !important;
}
#planModal #selectedPlanSummary {
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 10px !important;
	padding: 9px 12px !important;
	margin-bottom: 10px !important;
}
#planModal .icms-plan-modal-box > div:last-child > div:nth-of-type(3) {
	background: #f8fbff !important;
	border: 1px solid #dbeafe !important;
	border-radius: 12px !important;
	padding: 11px 12px !important;
	margin-bottom: 10px !important;
}
#planModal #mpesaPhone {
	min-height: 38px !important;
	font-size: 15px !important;
	color: #0a1228 !important;
}
#planModal .icms-plan-modal-box > div:last-child > div:nth-of-type(4) {
	padding: 8px 10px !important;
	margin-bottom: 12px !important;
	border-radius: 10px !important;
}
#planModal .icms-plan-modal-box > div:last-child > div:nth-of-type(5) {
	display: grid !important;
	grid-template-columns: 1.4fr 1fr !important;
	gap: 10px !important;
}
#planModal .icms-plan-pay-btn,
#planModal .icms-plan-cancel-btn {
	min-height: 46px !important;
	border-radius: 12px !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	cursor: pointer !important;
}
#planModal .icms-plan-pay-btn {
	background: linear-gradient(135deg, #10b981, #059669) !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: 0 10px 24px rgba(16, 185, 129, 0.26) !important;
}
#planModal .icms-plan-cancel-btn {
	background: #fff !important;
	color: #64748b !important;
	border: 1px solid #dfe6ef !important;
}

#stkModal .icms-stk-modal-box {
	max-width: 420px !important;
	width: min(420px, calc(100vw - 24px)) !important;
	padding: 0 !important;
	overflow: hidden !important;
	border-radius: 18px !important;
	border: 1px solid rgba(226, 232, 240, 0.95) !important;
	background: #fff !important;
	box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24) !important;
}
#stkModal .modal-logo {
	padding: 20px 20px 14px !important;
	margin: 0 !important;
	text-align: left !important;
	background: linear-gradient(135deg, #0a1228 0%, #16233c 100%) !important;
	color: #fff !important;
	display: grid !important;
	grid-template-columns: 48px 1fr !important;
	gap: 12px !important;
	align-items: center !important;
}
#stkModal .modal-logo .icon {
	width: 48px !important;
	height: 48px !important;
	border-radius: 14px !important;
	background: rgba(16, 185, 129, 0.14) !important;
	border: 1px solid rgba(16, 185, 129, 0.28) !important;
	display: grid !important;
	place-items: center !important;
}
#stkModal .modal-logo .icon i {
	color: #34d399 !important;
	font-size: 22px !important;
}
#stkModal .modal-logo h2 {
	margin: 0 0 4px !important;
	font-family: var(--font-display) !important;
	font-size: 1.2rem !important;
	font-weight: 800 !important;
	color: #fff !important;
	line-height: 1.1 !important;
}
#stkModal .modal-logo p {
	grid-column: 2 !important;
	margin: 0 !important;
	font-size: 12px !important;
	line-height: 1.45 !important;
	color: rgba(255, 255, 255, 0.68) !important;
}
#stkModal .icms-stk-modal-box > div:nth-of-type(2) {
	margin: 16px 18px 12px !important;
	padding: 18px !important;
	border-radius: 14px !important;
	background: linear-gradient(180deg, #ecfdf5 0%, #fff 100%) !important;
	border: 1px solid #bbf7d0 !important;
	text-align: center !important;
}
#stkModal .icms-stk-modal-box > div:nth-of-type(2) > div:first-child {
	width: 46px !important;
	height: 46px !important;
	border-width: 3px !important;
	border-color: #10b981 !important;
	border-top-color: transparent !important;
	margin: 0 auto 12px !important;
}
#stkModal .icms-stk-modal-box > div:nth-of-type(2) > div:nth-child(2) {
	font-size: 16px !important;
	font-weight: 900 !important;
	color: #064e3b !important;
	margin-bottom: 4px !important;
}
#stkModal #stkPhoneDisplay {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 28px !important;
	margin: 4px 0 0 !important;
	padding: 5px 10px !important;
	border-radius: 999px !important;
	background: #dcfce7 !important;
	color: #166534 !important;
	font-size: 13px !important;
	font-weight: 800 !important;
}
#stkModal #stkPhoneDisplay + p {
	margin: 10px 0 0 !important;
	font-size: 12.5px !important;
	color: #64748b !important;
}
#stkModal #stkErr {
	margin: 0 18px 12px !important;
}
#stkModal .icms-stk-modal-box > .mbtn {
	width: calc(100% - 36px) !important;
	margin: 0 18px 18px !important;
	min-height: 44px !important;
	border: 1px solid #dfe6ef !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: #64748b !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	box-shadow: none !important;
}
@media (max-width: 520px) {
	#stkModal .icms-stk-modal-box {
		width: calc(100vw - 16px) !important;
		border-radius: 14px !important;
	}
	#stkModal .modal-logo {
		grid-template-columns: 42px 1fr !important;
		padding: 16px !important;
	}
	#stkModal .modal-logo .icon {
		width: 42px !important;
		height: 42px !important;
	}
}

.icms-app-step-actions--back {
	justify-content: flex-start !important;
	margin-top: 16px !important;
	padding-top: 14px !important;
}
.icms-docs-back-upload {
	width: auto !important;
	min-width: 0 !important;
	padding: 10px 16px !important;
	border-radius: 12px !important;
	font-size: 13.5px !important;
	box-shadow: none !important;
}

@media (max-width: 880px) {
	.icms-samples-downloads-row,
	.icms-pricing-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	#planModal .icms-plan-modal-box > div:last-child > div:nth-of-type(1) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 560px) {
	.icms-proof-samples,
	.icms-pricing-polish {
		padding: 38px 0 !important;
	}
	.icms-samples-downloads-row,
	.icms-pricing-grid {
		grid-template-columns: 1fr !important;
	}
	.icms-sample-card {
		min-height: 74px !important;
		flex-direction: row !important;
		justify-content: flex-start !important;
		text-align: left !important;
	}
	#planModal .icms-plan-modal-box {
		width: calc(100vw - 16px) !important;
		max-height: calc(100vh - 16px) !important;
		border-radius: 14px !important;
	}
	#planModal .icms-plan-modal-box > div:first-child > div:nth-child(2) {
		display: none !important;
	}
	#planModal .icms-plan-modal-box > div:last-child > div:nth-of-type(1),
	#planModal .icms-plan-modal-box > div:last-child > div:nth-of-type(5) {
		grid-template-columns: 1fr !important;
	}
	#planModal .plan-option {
		min-height: 104px !important;
	}
	.icms-docs-back-upload {
		width: auto !important;
		max-width: 100% !important;
	}
}

/* v9.5 - harden the plan picker redesign against old inline styles */
#planModal .modal-box.icms-plan-modal-box {
	max-width: 760px !important;
	width: min(760px, calc(100vw - 24px)) !important;
	max-height: calc(100vh - 24px) !important;
	margin: 0 auto !important;
	padding: 0 !important;
	overflow: auto !important;
	border-radius: 18px !important;
	background: #fff !important;
	border: 1px solid rgba(226, 232, 240, 0.95) !important;
	box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24) !important;
}
#planModal .icms-plan-modal-header {
	padding: 16px 18px 14px !important;
	background: linear-gradient(135deg, #0a1228 0%, #16233c 100%) !important;
	color: #fff !important;
}
#planModal .icms-plan-modal-header::before {
	content: "Buy upload credits";
	display: block;
	font-family: var(--font-display);
	font-size: 1.18rem;
	font-weight: 800;
	line-height: 1.1;
}
#planModal .icms-plan-modal-header::after {
	content: "Choose a package, then confirm the M-Pesa STK prompt.";
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.68);
}
#planModal .icms-plan-modal-header > div:first-child {
	display: none !important;
}
#planModal .icms-plan-steps {
	display: flex !important;
	align-items: center !important;
	gap: 7px !important;
	margin-top: 12px !important;
}
#planModal .icms-plan-steps > div:nth-child(odd) {
	background: rgba(255, 255, 255, 0.09) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	color: #dbe4f0 !important;
	border-radius: 999px !important;
	padding: 5px 10px !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: 0 !important;
}
#planModal .icms-plan-steps > div:first-child {
	background: #fbbf24 !important;
	border-color: #fbbf24 !important;
	color: #0a1228 !important;
}
#planModal .icms-plan-steps > div:nth-child(even) {
	height: 1px !important;
	background: rgba(255, 255, 255, 0.18) !important;
}
#planModal .icms-plan-modal-content {
	padding: 16px 18px 18px !important;
	background: #fff !important;
}
#planModal .icms-plan-title {
	margin: 0 0 10px !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	color: #0a1228 !important;
}
#planModal .icms-plan-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 8px !important;
	margin: 0 0 12px !important;
}
#planModal .icms-plan-grid > .plan-option {
	min-height: 118px !important;
	padding: 13px 10px 11px !important;
	border: 1px solid #dfe6ef !important;
	border-radius: 12px !important;
	background: #fff !important;
	box-shadow: none !important;
	transform: none !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	position: relative !important;
}
#planModal .icms-plan-grid > .plan-option:hover {
	border-color: #d4a35a !important;
	background: #fffaf0 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08) !important;
}
#planModal .icms-plan-grid > .plan-option.selected {
	border: 2px solid #d4a35a !important;
	background: linear-gradient(180deg, #fff7e5 0%, #fff 100%) !important;
	box-shadow: 0 12px 26px rgba(212, 163, 90, 0.22) !important;
}
#planModal .icms-plan-grid > .plan-option > div {
	margin-left: auto !important;
	margin-right: auto !important;
}
#planModal .icms-plan-grid > .plan-option > div:nth-child(1) {
	font-family: "JetBrains Mono", monospace !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: #64748b !important;
}
#planModal .icms-plan-grid > .plan-option > div:nth-child(2),
#planModal #plan4 > div:nth-child(3) {
	font-size: 28px !important;
	font-weight: 900 !important;
	color: #0a1228 !important;
	line-height: 1 !important;
}
#planModal .icms-plan-grid > .plan-option > div:nth-child(3),
#planModal #plan4 > div:nth-child(4) {
	font-size: 11px !important;
	color: #64748b !important;
	margin: 4px 0 8px !important;
}
#planModal .icms-plan-grid > .plan-option > div:nth-child(4),
#planModal #plan4 > div:nth-child(5) {
	width: 100% !important;
	border-radius: 999px !important;
	padding: 7px 10px !important;
	background: #0a1228 !important;
	color: #fbbf24 !important;
	font-size: 13px !important;
	font-weight: 900 !important;
}
#planModal #plan4 > div:nth-child(1) {
	position: absolute !important;
	top: -9px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: auto !important;
	background: #16a34a !important;
	color: #fff !important;
	font-size: 8px !important;
	font-weight: 900 !important;
	padding: 3px 8px !important;
	border-radius: 999px !important;
	letter-spacing: 0 !important;
	white-space: nowrap !important;
}
#planModal #plan4 > div:nth-child(2) {
	font-family: "JetBrains Mono", monospace !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: #64748b !important;
	margin-top: 4px !important;
}
#planModal #plan4 > div:nth-child(5) {
	background: #fbbf24 !important;
	color: #0a1228 !important;
}
#planModal #plan4 > div:nth-child(6) {
	width: auto !important;
	padding: 0 !important;
	background: transparent !important;
	color: #16a34a !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	margin-top: 5px !important;
}
#planModal .icms-plan-phone {
	background: #f8fbff !important;
	border: 1px solid #dbeafe !important;
	border-radius: 12px !important;
	padding: 11px 12px !important;
	margin: 0 0 10px !important;
}
#planModal .icms-plan-phone label {
	font-size: 12px !important;
	color: #0f172a !important;
	margin-bottom: 7px !important;
	font-weight: 800 !important;
}
#planModal .icms-plan-phone-field {
	display: flex !important;
	align-items: center !important;
	overflow: hidden !important;
	border-radius: 10px !important;
	border: 1px solid #dfe6ef !important;
	background: #fff !important;
}
#planModal .icms-plan-phone-field span {
	padding: 9px 10px !important;
	font-size: 13px !important;
	background: #f8fafc !important;
}
#planModal #mpesaPhone {
	min-height: 38px !important;
	font-size: 15px !important;
	color: #0a1228 !important;
}
#planModal .icms-plan-note {
	padding: 8px 10px !important;
	margin: 0 0 12px !important;
	border-radius: 10px !important;
	background: #f0fdf4 !important;
	border: 1px solid #bbf7d0 !important;
}
#planModal .icms-plan-note p {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #166534 !important;
}
#planModal .icms-plan-actions {
	display: grid !important;
	grid-template-columns: 1.4fr 1fr !important;
	gap: 10px !important;
}
#planModal .icms-plan-pay-btn,
#planModal .icms-plan-cancel-btn {
	width: 100% !important;
	min-height: 46px !important;
	border-radius: 12px !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	cursor: pointer !important;
}
#planModal .icms-plan-pay-btn {
	background: linear-gradient(135deg, #10b981, #059669) !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: 0 10px 24px rgba(16, 185, 129, 0.26) !important;
}
#planModal .icms-plan-cancel-btn {
	background: #fff !important;
	color: #64748b !important;
	border: 1px solid #dfe6ef !important;
}
@media (max-width: 820px) {
	#planModal .icms-plan-modal-header {
		padding: 12px 16px 10px !important;
	}
	#planModal .icms-plan-steps {
		display: none !important;
	}
	#planModal .icms-plan-modal-content {
		padding: 12px 16px 14px !important;
	}
	#planModal .icms-plan-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 7px !important;
		margin-bottom: 9px !important;
	}
	#planModal .icms-plan-grid > .plan-option {
		min-height: 82px !important;
		padding: 9px 10px 8px !important;
	}
	#planModal .icms-plan-grid > .plan-option > div:nth-child(2),
	#planModal #plan4 > div:nth-child(3) {
		font-size: 22px !important;
	}
	#planModal .icms-plan-grid > .plan-option > div:nth-child(3),
	#planModal #plan4 > div:nth-child(4) {
		margin: 2px 0 6px !important;
	}
	#planModal .icms-plan-grid > .plan-option:not(#plan4) > div:nth-child(4),
	#planModal #plan4 > div:nth-child(5) {
		padding: 6px 10px !important;
	}
	#planModal #selectedPlanSummary {
		padding: 7px 10px !important;
		margin-bottom: 8px !important;
	}
	#planModal .icms-plan-phone {
		padding: 8px 10px !important;
		margin-bottom: 8px !important;
	}
	#planModal .icms-plan-phone label {
		margin-bottom: 5px !important;
		font-size: 11px !important;
	}
	#planModal #mpesaPhone {
		min-height: 34px !important;
		padding: 7px 9px !important;
	}
	#planModal .icms-plan-phone-field span {
		padding: 7px 9px !important;
	}
	#planModal .icms-plan-note {
		padding: 7px 9px !important;
		margin-bottom: 9px !important;
	}
	#planModal .icms-plan-pay-btn,
	#planModal .icms-plan-cancel-btn {
		min-height: 42px !important;
	}
}

/* v9.7 - extra compact plan picker cards */
#planModal .modal-box.icms-plan-modal-box {
	max-width: 720px !important;
}
#planModal .icms-plan-modal-header {
	padding: 12px 16px 10px !important;
}
#planModal .icms-plan-modal-header::before {
	font-size: 1.08rem !important;
}
#planModal .icms-plan-modal-header::after {
	font-size: 11.5px !important;
	margin-top: 3px !important;
}
#planModal .icms-plan-modal-content {
	padding: 12px 16px 14px !important;
}
#planModal .icms-plan-title {
	margin: 0 0 8px !important;
	font-size: 12px !important;
}
#planModal .icms-plan-grid {
	gap: 7px !important;
	margin: 0 0 8px !important;
}
#planModal .icms-plan-grid > .plan-option {
	min-height: 74px !important;
	border-radius: 10px !important;
	padding: 7px 10px !important;
}
#planModal .icms-plan-grid > .plan-option > div:nth-child(1),
#planModal #plan4 > div:nth-child(2) {
	font-size: 8.5px !important;
	letter-spacing: 0.12em !important;
	margin-bottom: 1px !important;
}
#planModal .icms-plan-grid > .plan-option > div:nth-child(2),
#planModal #plan4 > div:nth-child(3) {
	font-size: 20px !important;
	line-height: 1 !important;
}
#planModal .icms-plan-grid > .plan-option > div:nth-child(3),
#planModal #plan4 > div:nth-child(4) {
	font-size: 10px !important;
	margin: 1px 0 5px !important;
}
#planModal .icms-plan-grid > .plan-option:not(#plan4) > div:nth-child(4),
#planModal #plan4 > div:nth-child(5) {
	padding: 4px 9px !important;
	font-size: 11.5px !important;
}
#planModal #plan4 > div:nth-child(1) {
	top: -8px !important;
	font-size: 7px !important;
	padding: 2px 8px !important;
}
#planModal #plan4 > div:nth-child(6) {
	font-size: 9px !important;
	margin-top: 3px !important;
}
#planModal #selectedPlanSummary {
	padding: 6px 10px !important;
	margin-bottom: 7px !important;
	font-size: 13px !important;
}
#planModal .icms-plan-phone {
	padding: 8px 10px !important;
	margin-bottom: 7px !important;
}
#planModal .icms-plan-phone label {
	margin-bottom: 4px !important;
	font-size: 10.5px !important;
}
#planModal .icms-plan-phone-field span {
	padding: 6px 9px !important;
	font-size: 12px !important;
}
#planModal .icms-plan-phone-field input,
#planModal #mpesaPhone {
	min-height: 32px !important;
	padding: 6px 9px !important;
	font-size: 14px !important;
}
#planModal .icms-plan-phone > div:last-child {
	margin-top: 4px !important;
	font-size: 10px !important;
}
#planModal .icms-plan-note {
	padding: 4px 8px !important;
	margin-bottom: 6px !important;
	min-height: 28px !important;
}
#planModal .icms-plan-note p {
	font-size: 10.5px !important;
}
#planModal .icms-plan-pay-btn,
#planModal .icms-plan-cancel-btn {
	min-height: 36px !important;
	font-size: 12.5px !important;
	border-radius: 10px !important;
}
#planModal .icms-plan-actions {
	gap: 8px !important;
}

/* v9.8 - keep plan cards in one compact row except on phones */
#planModal .icms-plan-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
#planModal .icms-plan-grid > .plan-option {
	min-height: 86px !important;
	padding: 8px 8px !important;
}
#planModal .icms-plan-grid > .plan-option > div:nth-child(1),
#planModal #plan4 > div:nth-child(2) {
	font-size: 8px !important;
}
#planModal .icms-plan-grid > .plan-option > div:nth-child(2),
#planModal #plan4 > div:nth-child(3) {
	font-size: 21px !important;
}
#planModal .icms-plan-grid > .plan-option:not(#plan4) > div:nth-child(4),
#planModal #plan4 > div:nth-child(5) {
	padding: 5px 7px !important;
	font-size: 11px !important;
}
@media (max-width: 560px) {
	#planModal .icms-plan-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	#planModal .icms-plan-grid > .plan-option {
		min-height: 74px !important;
	}
}
@media (max-width: 520px) {
	#planModal .modal-box.icms-plan-modal-box {
		width: calc(100vw - 16px) !important;
		border-radius: 14px !important;
	}
	#planModal .icms-plan-steps {
		display: none !important;
	}
	#planModal .icms-plan-grid,
	#planModal .icms-plan-actions {
		grid-template-columns: 1fr !important;
	}
}

/* v9.6 - final plan modal compactness and PRO-card child fixes */
#planModal .icms-plan-modal-header {
	padding: 14px 18px 12px !important;
}
#planModal .icms-plan-modal-content {
	padding: 14px 18px 16px !important;
}
#planModal .icms-plan-grid > .plan-option {
	min-height: 100px !important;
	padding: 11px 10px 10px !important;
}
#planModal .icms-plan-grid > .plan-option > div:nth-child(2),
#planModal #plan4 > div:nth-child(3) {
	font-size: 25px !important;
}
#planModal .icms-plan-grid > .plan-option:not(#plan4) > div:nth-child(4) {
	width: 100% !important;
	border-radius: 999px !important;
	padding: 7px 10px !important;
	background: #0a1228 !important;
	color: #fbbf24 !important;
	font-size: 13px !important;
	font-weight: 900 !important;
}
#planModal #plan4 > div:nth-child(4) {
	width: auto !important;
	padding: 0 !important;
	background: transparent !important;
	color: #64748b !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	margin: 4px 0 8px !important;
}
#planModal #plan4 > div:nth-child(5) {
	width: 100% !important;
	border-radius: 999px !important;
	padding: 7px 10px !important;
	background: #fbbf24 !important;
	color: #0a1228 !important;
	font-size: 13px !important;
	font-weight: 900 !important;
}
#planModal .icms-plan-phone {
	padding: 10px 12px !important;
}
#planModal .icms-plan-phone-field input,
#planModal #mpesaPhone {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	width: 100% !important;
	background: #fff !important;
	padding: 8px 10px !important;
}
#planModal .icms-plan-phone > div:last-child {
	margin-top: 6px !important;
	font-size: 11px !important;
	color: #0369a1 !important;
}

/* v9.9 - final winner: compact 4-up plans, phone fallback only */
#planModal .modal-box.icms-plan-modal-box {
	max-width: 720px !important;
	max-height: calc(100vh - 20px) !important;
	overflow: auto !important;
}
#planModal .icms-plan-modal-header {
	padding: 11px 16px 9px !important;
}
#planModal .icms-plan-modal-header::before {
	font-size: 1.04rem !important;
}
#planModal .icms-plan-modal-header::after {
	font-size: 11px !important;
	margin-top: 2px !important;
}
#planModal .icms-plan-steps {
	margin-top: 8px !important;
}
#planModal .icms-plan-steps > div:nth-child(odd) {
	padding: 4px 9px !important;
	font-size: 9px !important;
}
#planModal .icms-plan-modal-content {
	padding: 11px 16px 12px !important;
}
#planModal .icms-plan-title {
	margin: 0 0 7px !important;
	font-size: 12px !important;
}
#planModal .icms-plan-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 7px !important;
	margin: 0 0 7px !important;
}
#planModal .icms-plan-grid > .plan-option {
	min-height: 64px !important;
	padding: 6px 7px !important;
	border-radius: 10px !important;
}
#planModal .icms-plan-grid > .plan-option > div:nth-child(1),
#planModal #plan4 > div:nth-child(2) {
	font-size: 7.5px !important;
	letter-spacing: 0.1em !important;
	margin-bottom: 1px !important;
}
#planModal .icms-plan-grid > .plan-option > div:nth-child(2),
#planModal #plan4 > div:nth-child(3) {
	font-size: 18px !important;
	line-height: 1 !important;
}
#planModal .icms-plan-grid > .plan-option > div:nth-child(3),
#planModal #plan4 > div:nth-child(4) {
	font-size: 9.5px !important;
	margin: 1px 0 4px !important;
}
#planModal .icms-plan-grid > .plan-option:not(#plan4) > div:nth-child(4),
#planModal #plan4 > div:nth-child(5) {
	padding: 3px 6px !important;
	font-size: 10px !important;
}
#planModal #plan4 > div:nth-child(1) {
	top: -7px !important;
	font-size: 6.5px !important;
	padding: 2px 7px !important;
}
#planModal #plan4 > div:nth-child(6) {
	font-size: 8px !important;
	margin-top: 2px !important;
}
#planModal #selectedPlanSummary {
	padding: 5px 9px !important;
	margin-bottom: 6px !important;
	font-size: 12.5px !important;
}
#planModal .icms-plan-phone {
	padding: 7px 9px !important;
	margin-bottom: 6px !important;
}
#planModal .icms-plan-phone label {
	margin-bottom: 3px !important;
	font-size: 10px !important;
}
#planModal .icms-plan-phone-field span {
	padding: 5px 8px !important;
	font-size: 12px !important;
}
#planModal .icms-plan-phone-field input,
#planModal #mpesaPhone {
	min-height: 30px !important;
	padding: 5px 8px !important;
	font-size: 13.5px !important;
}
#planModal .icms-plan-phone > div:last-child {
	margin-top: 3px !important;
	font-size: 9.5px !important;
}
#planModal .icms-plan-note {
	min-height: 0 !important;
	padding: 4px 8px !important;
	margin-bottom: 6px !important;
}
#planModal .icms-plan-note p {
	font-size: 10px !important;
}
#planModal .icms-plan-actions {
	gap: 8px !important;
}
#planModal .icms-plan-pay-btn,
#planModal .icms-plan-cancel-btn {
	min-height: 35px !important;
	border-radius: 10px !important;
	font-size: 12.5px !important;
}
@media (max-width: 480px) {
	#planModal .icms-plan-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* ===============================================================
   DOCUMENT PREVIEW — small-screen rendering (responsive, CSS-only)
   Keeps the generated curriculum-doc previews (Learning Plan /
   Course Outline / Session Plan) legible and contained on phones &
   tablets. Loads after components.css + icms-app.css, so these
   override the older (illegible ~7pt) <=768px rules there.
   No JS/markup changes — the #icmsDocStyles block used for Word
   export is untouched.
   =============================================================== */
@media (max-width: 768px) {
	/* Reclaim width: trim the output panel + tab padding. */
	.icms-app-output { padding: 14px !important; }
	.icms-app-tabpanel { padding: 8px 0 !important; }

	/* Contain wide previews INSIDE their scroll box so the landscape
	   plan swipes sideways instead of bursting the viewport width. */
	#tabPlan,
	#tabOutline,
	#tabSessions,
	.doc-landscape,
	.doc-outline,
	.doc-portrait {
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.table-scroll {
		max-width: 100%;
		-webkit-overflow-scrolling: touch;
	}

	/* Readable font floor (legacy rules drop these to ~7pt). */
	.doc-landscape table,
	.doc-outline table,
	.doc-portrait table { font-size: 9pt; }
	.doc-landscape th, .doc-landscape td,
	.doc-outline th, .doc-outline td,
	.doc-portrait th, .doc-portrait td {
		font-size: 8.5pt;
		padding: 4px 5px;
		word-break: break-word;
	}
	.doc-meta td { font-size: 8.5pt; padding: 4px 6px; }
}

@media (max-width: 480px) {
	.icms-app-output { padding: 10px !important; border-radius: 12px; }
	.doc-landscape { padding: 8px 6px; }
	.doc-outline,
	.doc-portrait { padding: 10px 8px; }
	/* Hold the floor at ~8pt — readable, not the legacy 6.5pt. */
	.doc-landscape table,
	.doc-outline table,
	.doc-portrait table { font-size: 8.5pt; }
	.doc-landscape th, .doc-landscape td,
	.doc-outline th, .doc-outline td,
	.doc-portrait th, .doc-portrait td {
		font-size: 8pt;
		padding: 3px 4px;
	}
	.doc-meta td { font-size: 8pt; }
}