:root {
	--ifba-primary-50: #F1F7F6;
	--ifba-primary-100: #DDECEB;
	--ifba-primary-200: #BCD9D6;
	--ifba-primary-300: #91C0BC;
	--ifba-primary-400: #579F9A;
	--ifba-primary-500: #2C867F;
	--ifba-primary-600: #0F766E;
	--ifba-primary-700: #0D655F;
	--ifba-primary-800: #0B534D;
	--ifba-primary-900: #08403B;
	--ifba-accent-50: #F4F3FC;
	--ifba-accent-100: #E5E3F8;
	--ifba-accent-200: #CAC7F0;
	--ifba-accent-300: #A9A3E7;
	--ifba-accent-400: #7B74DA;
	--ifba-accent-500: #5A50D0;
	--ifba-accent-600: #4338CA;
	--ifba-accent-700: #3A30AE;
	--ifba-accent-800: #2F278D;
	--ifba-accent-900: #241E6D;
	--ifba-on-primary: #FFFFFF;
	--ifba-on-accent: #FFFFFF;

	/* Neutrals — slate */
	--ifba-white: #FFFFFF;
	--ifba-n-50: #F8FAFC;
	--ifba-n-100: #F1F5F9;
	--ifba-n-200: #E2E8F0;
	--ifba-n-300: #CBD5E1;
	--ifba-n-400: #94A3B8;
	--ifba-n-500: #64748B;
	--ifba-n-600: #475569;
	--ifba-n-700: #334155;
	--ifba-n-800: #1E293B;
	--ifba-n-900: #0F172A;
	--ifba-n-950: #020617;

	/* Semantic */
	--ifba-success: #059669;
	--ifba-success-bg: #ECFDF5;
	--ifba-success-border: #A7F3D0;
	--ifba-warning: #B45309;
	--ifba-warning-bg: #FFFBEB;
	--ifba-warning-border: #FDE68A;
	--ifba-danger: #BE123C;
	--ifba-danger-bg: #FFF1F2;
	--ifba-danger-border: #FECDD3;
	--ifba-info: #0369A1;
	--ifba-info-bg: #F0F9FF;
	--ifba-info-border: #BAE6FD;

	/* Surfaces */
	--ifba-bg: #FFFFFF;
	--ifba-bg-subtle: #F8FAFC;
	--ifba-bg-muted: #F1F5F9;
	--ifba-surface: #FFFFFF;
	--ifba-border: #E2E8F0;
	--ifba-border-strong: #CBD5E1;
	--ifba-text: #1E293B;
	--ifba-text-muted: #64748B;
	--ifba-text-subtle: #94A3B8;
	--ifba-text-inverse: #FFFFFF;

	/* Typography */
	--ifba-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ifba-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--ifba-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	--ifba-text-2xs: 0.6875rem;
	--ifba-text-xs: 0.75rem;
	--ifba-text-sm: 0.875rem;
	--ifba-text-base: 1rem;
	--ifba-text-lg: 1.125rem;
	--ifba-text-xl: 1.25rem;
	--ifba-text-2xl: 1.5rem;
	--ifba-text-3xl: 1.875rem;
	--ifba-text-4xl: 2.25rem;
	--ifba-leading-tight: 1.25;
	--ifba-leading-snug: 1.4;
	--ifba-leading-normal: 1.6;
	--ifba-leading-relaxed: 1.75;
	--ifba-tracking-tight: -0.018em;
	--ifba-tracking-wide: 0.04em;
	--ifba-tracking-caps: 0.12em;

	/* Spacing — 4px base */
	--ifba-space-1: 0.25rem;
	--ifba-space-2: 0.5rem;
	--ifba-space-3: 0.75rem;
	--ifba-space-4: 1rem;
	--ifba-space-5: 1.25rem;
	--ifba-space-6: 1.5rem;
	--ifba-space-8: 2rem;
	--ifba-space-10: 2.5rem;
	--ifba-space-12: 3rem;
	--ifba-space-16: 4rem;

	/* Radii */
	--ifba-radius-sm: 6px;
	--ifba-radius: 10px;
	--ifba-radius-md: 12px;
	--ifba-radius-lg: 16px;
	--ifba-radius-xl: 22px;
	--ifba-radius-full: 9999px;

	/* Elevation */
	--ifba-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
	--ifba-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
	--ifba-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -2px rgba(15, 23, 42, 0.05);
	--ifba-shadow-md: 0 10px 24px -6px rgba(15, 23, 42, 0.12), 0 4px 10px -4px rgba(15, 23, 42, 0.06);
	--ifba-shadow-lg: 0 20px 45px -12px rgba(15, 23, 42, 0.18);
	--ifba-shadow-focus: 0 0 0 3px var(--ifba-primary-200);

	/* Motion */
	--ifba-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ifba-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ifba-duration-fast: 120ms;
	--ifba-duration: 200ms;
	--ifba-duration-slow: 320ms;

	/* Layout */
	--ifba-container: 1120px;
	--ifba-container-wide: 1320px;
	--ifba-rail-width: 320px;
	--ifba-header-height: 64px;

	/* Layers */
	--ifba-z-sticky: 100;
	--ifba-z-rail: 200;
	--ifba-z-dropdown: 400;
	--ifba-z-modal: 600;
	--ifba-z-toast: 800;
	--ifba-z-tooltip: 900;
}

/* Opt-in dark mode: add data-ifba-theme="dark" to <html> or .ifba-root */
[data-ifba-theme="dark"] {
	--ifba-bg: #0B1220;
	--ifba-bg-subtle: #111C2E;
	--ifba-bg-muted: #16233A;
	--ifba-surface: #131F33;
	--ifba-border: #24334D;
	--ifba-border-strong: #33455F;
	--ifba-text: #E8EDF6;
	--ifba-text-muted: #9FB0C9;
	--ifba-text-subtle: #7488A5;
	--ifba-shadow-focus: 0 0 0 3px var(--ifba-primary-800);
}

/* =========================================================================
   BASE / RESET — scoped so the parent theme is untouched
   ====================================================================== */
.ifba-root {
	font-family: var(--ifba-font);
	font-size: var(--ifba-text-base);
	line-height: var(--ifba-leading-normal);
	color: var(--ifba-text);
	background: var(--ifba-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-variant-numeric: tabular-nums;
}
.ifba-root *,
.ifba-root *::before,
.ifba-root *::after { box-sizing: border-box; }

.ifba-root h1, .ifba-root h2, .ifba-root h3,
.ifba-root h4, .ifba-root h5, .ifba-root h6 {
	font-family: var(--ifba-font-display);
	color: var(--ifba-n-900);
	line-height: var(--ifba-leading-tight);
	letter-spacing: var(--ifba-tracking-tight);
	margin: 0 0 var(--ifba-space-3);
	font-weight: 650;
}
.ifba-root h1 { font-size: var(--ifba-text-3xl); }
.ifba-root h2 { font-size: var(--ifba-text-2xl); }
.ifba-root h3 { font-size: var(--ifba-text-xl); }
.ifba-root h4 { font-size: var(--ifba-text-lg); }
.ifba-root p { margin: 0 0 var(--ifba-space-4); }
.ifba-root p:last-child { margin-bottom: 0; }
.ifba-root a { color: var(--ifba-primary-700); text-decoration: none; }
.ifba-root a:hover { text-decoration: underline; }
.ifba-root img { max-width: 100%; height: auto; }
.ifba-root hr {
	border: 0; height: 1px; background: var(--ifba-border);
	margin: var(--ifba-space-6) 0;
}

[data-ifba-theme="dark"] .ifba-root h1,
[data-ifba-theme="dark"] .ifba-root h2,
[data-ifba-theme="dark"] .ifba-root h3,
[data-ifba-theme="dark"] .ifba-root h4 { color: var(--ifba-text); }

/* Accessibility */
.ifba-root :focus-visible,
.ifba-root [data-ifba-focusable]:focus-visible {
	outline: 2px solid var(--ifba-primary-600);
	outline-offset: 2px;
	border-radius: var(--ifba-radius-sm);
}
.ifba-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.ifba-skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--ifba-primary-700); color: #fff;
	padding: var(--ifba-space-3) var(--ifba-space-4);
	z-index: var(--ifba-z-tooltip); border-radius: 0 0 var(--ifba-radius) 0;
}
.ifba-skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
	.ifba-root *,
	.ifba-root *::before,
	.ifba-root *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   LAYOUT
   ====================================================================== */
.ifba-container { width: 100%; max-width: var(--ifba-container); margin-inline: auto; padding-inline: var(--ifba-space-5); }
.ifba-container--wide { max-width: var(--ifba-container-wide); }
.ifba-container--narrow { max-width: 760px; }

.ifba-stack > * + * { margin-top: var(--ifba-space-4); }
.ifba-stack--sm > * + * { margin-top: var(--ifba-space-2); }
.ifba-stack--lg > * + * { margin-top: var(--ifba-space-8); }

.ifba-cluster { display: flex; flex-wrap: wrap; gap: var(--ifba-space-3); align-items: center; }
.ifba-cluster--between { justify-content: space-between; }
.ifba-cluster--end { justify-content: flex-end; }
.ifba-cluster--tight { gap: var(--ifba-space-2); }

.ifba-grid { display: grid; gap: var(--ifba-space-5); }
.ifba-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ifba-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ifba-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ifba-grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

@media (max-width: 900px) {
	.ifba-grid--3, .ifba-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.ifba-grid--2, .ifba-grid--3, .ifba-grid--4 { grid-template-columns: minmax(0, 1fr); }
	.ifba-container { padding-inline: var(--ifba-space-4); }
}

/* =========================================================================
   TYPOGRAPHY HELPERS
   ====================================================================== */
.ifba-eyebrow {
	font-size: var(--ifba-text-2xs); font-weight: 700;
	letter-spacing: var(--ifba-tracking-caps); text-transform: uppercase;
	color: var(--ifba-primary-700);
}
.ifba-lede { font-size: var(--ifba-text-lg); color: var(--ifba-text-muted); line-height: var(--ifba-leading-relaxed); }
.ifba-muted { color: var(--ifba-text-muted); }
.ifba-subtle { color: var(--ifba-text-subtle); }
.ifba-text-sm { font-size: var(--ifba-text-sm); }
.ifba-text-xs { font-size: var(--ifba-text-xs); }
.ifba-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifba-clamp-2 {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}

/* =========================================================================
   ICONS
   ====================================================================== */
.ifba-icon { display: inline-block; vertical-align: middle; flex: none; }
.ifba-icon--spin { animation: ifba-spin 900ms linear infinite; }
@keyframes ifba-spin { to { transform: rotate(360deg); } }

/* =========================================================================
   BUTTONS
   ====================================================================== */
.ifba-root .ifba-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: var(--ifba-space-2);
	font-family: var(--ifba-font); font-size: var(--ifba-text-sm); font-weight: 600;
	line-height: 1; text-decoration: none; white-space: nowrap;
	padding: 0.72rem 1.15rem;
	border-radius: var(--ifba-radius);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--ifba-duration) var(--ifba-ease),
				border-color var(--ifba-duration) var(--ifba-ease),
				color var(--ifba-duration) var(--ifba-ease),
				box-shadow var(--ifba-duration) var(--ifba-ease),
				transform var(--ifba-duration-fast) var(--ifba-ease);
	background: var(--ifba-n-100); color: var(--ifba-n-800);
	-webkit-appearance: none; appearance: none;
}
.ifba-root .ifba-btn:hover { text-decoration: none; }
.ifba-root .ifba-btn:active { transform: translateY(1px); }
.ifba-root .ifba-btn[disabled],
.ifba-root .ifba-btn[aria-disabled="true"],
.ifba-root .ifba-btn.is-loading {
	opacity: 0.6; cursor: not-allowed; pointer-events: none;
}

.ifba-root .ifba-btn--primary {
	background: var(--ifba-primary-600); color: var(--ifba-on-primary);
	box-shadow: var(--ifba-shadow-xs);
}
.ifba-root .ifba-btn--primary:hover { background: var(--ifba-primary-700); box-shadow: var(--ifba-shadow-sm); }

.ifba-root .ifba-btn--accent {
	background: var(--ifba-accent-600); color: var(--ifba-on-accent);
}
.ifba-root .ifba-btn--accent:hover { background: var(--ifba-accent-700); }

.ifba-root .ifba-btn--secondary {
	background: var(--ifba-surface); color: var(--ifba-n-800);
	border-color: var(--ifba-border-strong); box-shadow: var(--ifba-shadow-xs);
}
.ifba-root .ifba-btn--secondary:hover { background: var(--ifba-n-50); border-color: var(--ifba-n-400); }

.ifba-root .ifba-btn--ghost { background: transparent; color: var(--ifba-n-700); }
.ifba-root .ifba-btn--ghost:hover { background: var(--ifba-n-100); }

.ifba-root .ifba-btn--danger { background: var(--ifba-danger); color: #fff; }
.ifba-root .ifba-btn--danger:hover { filter: brightness(0.94); }

.ifba-root .ifba-btn--link {
	background: transparent; color: var(--ifba-primary-700);
	padding-inline: 0; border-radius: 0;
}
.ifba-root .ifba-btn--link:hover { text-decoration: underline; }

.ifba-root .ifba-btn--sm { font-size: var(--ifba-text-xs); padding: 0.5rem 0.8rem; border-radius: var(--ifba-radius-sm); }
.ifba-root .ifba-btn--lg { font-size: var(--ifba-text-base); padding: 0.95rem 1.6rem; border-radius: var(--ifba-radius-md); }
.ifba-root .ifba-btn--block { display: flex; width: 100%; }
.ifba-root .ifba-btn--icon { padding: 0.6rem; border-radius: var(--ifba-radius-sm); }

.ifba-btn__spinner { display: none; }
.ifba-btn.is-loading .ifba-btn__spinner { display: inline-block; animation: ifba-spin 900ms linear infinite; }
.ifba-btn.is-loading .ifba-btn__label { opacity: 0.75; }

/* =========================================================================
   CARDS
   ====================================================================== */
.ifba-card {
	background: var(--ifba-surface);
	border: 1px solid var(--ifba-border);
	border-radius: var(--ifba-radius-lg);
	box-shadow: var(--ifba-shadow-xs);
	overflow: hidden;
	transition: box-shadow var(--ifba-duration) var(--ifba-ease),
				border-color var(--ifba-duration) var(--ifba-ease),
				transform var(--ifba-duration) var(--ifba-ease);
}
.ifba-card--interactive { cursor: pointer; }
.ifba-card--interactive:hover {
	box-shadow: var(--ifba-shadow-md);
	border-color: var(--ifba-primary-200);
	transform: translateY(-2px);
}
.ifba-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--ifba-n-100); overflow: hidden; }
.ifba-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ifba-card__body { padding: var(--ifba-space-5); }
.ifba-card__header {
	padding: var(--ifba-space-5); border-bottom: 1px solid var(--ifba-border);
	display: flex; align-items: center; justify-content: space-between; gap: var(--ifba-space-3);
}
.ifba-card__footer {
	padding: var(--ifba-space-4) var(--ifba-space-5);
	border-top: 1px solid var(--ifba-border); background: var(--ifba-bg-subtle);
}
.ifba-card__title { font-size: var(--ifba-text-lg); margin: 0 0 var(--ifba-space-2); }

/* =========================================================================
   BADGES & PILLS
   ====================================================================== */
.ifba-badge {
	display: inline-flex; align-items: center; gap: 0.35em;
	font-size: var(--ifba-text-2xs); font-weight: 700;
	letter-spacing: var(--ifba-tracking-wide); text-transform: uppercase;
	padding: 0.3rem 0.6rem; border-radius: var(--ifba-radius-full);
	background: var(--ifba-n-100); color: var(--ifba-n-700);
	border: 1px solid transparent; white-space: nowrap;
}
.ifba-badge--primary { background: var(--ifba-primary-50); color: var(--ifba-primary-800); border-color: var(--ifba-primary-100); }
.ifba-badge--success { background: var(--ifba-success-bg); color: var(--ifba-success); border-color: var(--ifba-success-border); }
.ifba-badge--warning { background: var(--ifba-warning-bg); color: var(--ifba-warning); border-color: var(--ifba-warning-border); }
.ifba-badge--danger  { background: var(--ifba-danger-bg); color: var(--ifba-danger); border-color: var(--ifba-danger-border); }
.ifba-badge--info    { background: var(--ifba-info-bg); color: var(--ifba-info); border-color: var(--ifba-info-border); }
.ifba-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* =========================================================================
   PROGRESS — linear
   ====================================================================== */
.ifba-progress {
	position: relative; width: 100%; height: 8px;
	background: var(--ifba-n-200); border-radius: var(--ifba-radius-full); overflow: hidden;
}
.ifba-progress__bar {
	height: 100%; width: 0;
	background: linear-gradient(90deg, var(--ifba-primary-500), var(--ifba-primary-700));
	border-radius: inherit;
	transition: width var(--ifba-duration-slow) var(--ifba-ease-out);
}
.ifba-progress--sm { height: 5px; }
.ifba-progress--lg { height: 12px; }
.ifba-progress--success .ifba-progress__bar { background: linear-gradient(90deg, #10B981, var(--ifba-success)); }

.ifba-progress-meta {
	display: flex; justify-content: space-between; align-items: center;
	font-size: var(--ifba-text-xs); color: var(--ifba-text-muted);
	margin-bottom: var(--ifba-space-2);
}

/* PROGRESS — ring */
.ifba-ring { display: inline-grid; place-items: center; position: relative; }
.ifba-ring svg { transform: rotate(-90deg); display: block; }
.ifba-ring__track { stroke: var(--ifba-n-200); fill: none; }
.ifba-ring__fill {
	stroke: var(--ifba-primary-600); fill: none; stroke-linecap: round;
	transition: stroke-dashoffset var(--ifba-duration-slow) var(--ifba-ease-out);
}
.ifba-ring__label {
	position: absolute; font-size: var(--ifba-text-sm); font-weight: 700;
	color: var(--ifba-n-800);
}

/* =========================================================================
   FORMS
   ====================================================================== */
.ifba-field { display: block; margin-bottom: var(--ifba-space-4); }
.ifba-label {
	display: block; font-size: var(--ifba-text-sm); font-weight: 600;
	color: var(--ifba-n-800); margin-bottom: var(--ifba-space-2);
}
.ifba-label__hint { font-weight: 400; color: var(--ifba-text-subtle); margin-left: 0.35em; }

.ifba-root .ifba-input,
.ifba-root .ifba-select,
.ifba-root .ifba-textarea {
	display: block; width: 100%;
	font-family: var(--ifba-font); font-size: var(--ifba-text-sm);
	color: var(--ifba-text); background: var(--ifba-surface);
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--ifba-border-strong);
	border-radius: var(--ifba-radius);
	transition: border-color var(--ifba-duration) var(--ifba-ease),
				box-shadow var(--ifba-duration) var(--ifba-ease);
	-webkit-appearance: none; appearance: none;
}
.ifba-root .ifba-textarea { min-height: 120px; resize: vertical; line-height: var(--ifba-leading-normal); }
.ifba-root .ifba-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 0.8rem center;
	padding-right: 2.4rem;
}
.ifba-root .ifba-input:focus,
.ifba-root .ifba-select:focus,
.ifba-root .ifba-textarea:focus {
	outline: none;
	border-color: var(--ifba-primary-500);
	box-shadow: var(--ifba-shadow-focus);
}
.ifba-root .ifba-input::placeholder,
.ifba-root .ifba-textarea::placeholder { color: var(--ifba-text-subtle); }
.ifba-root .ifba-input[aria-invalid="true"],
.ifba-root .ifba-textarea[aria-invalid="true"] { border-color: var(--ifba-danger); }

.ifba-field__error {
	display: flex; align-items: center; gap: 0.4em;
	font-size: var(--ifba-text-xs); color: var(--ifba-danger);
	margin-top: var(--ifba-space-2);
}
.ifba-field__help { font-size: var(--ifba-text-xs); color: var(--ifba-text-muted); margin-top: var(--ifba-space-2); }

/* Choice controls — used heavily by the quiz engine */
.ifba-choice {
	display: flex; align-items: flex-start; gap: var(--ifba-space-3);
	padding: var(--ifba-space-4);
	border: 1px solid var(--ifba-border);
	border-radius: var(--ifba-radius-md);
	background: var(--ifba-surface);
	cursor: pointer;
	transition: border-color var(--ifba-duration) var(--ifba-ease),
				background-color var(--ifba-duration) var(--ifba-ease),
				box-shadow var(--ifba-duration) var(--ifba-ease);
}
.ifba-choice:hover { border-color: var(--ifba-primary-300); background: var(--ifba-primary-50); }
.ifba-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ifba-choice__marker {
	flex: none; width: 22px; height: 22px; margin-top: 1px;
	border: 2px solid var(--ifba-border-strong);
	border-radius: 50%;
	display: grid; place-items: center;
	transition: all var(--ifba-duration) var(--ifba-ease);
	background: var(--ifba-surface);
}
.ifba-choice--multi .ifba-choice__marker { border-radius: var(--ifba-radius-sm); }
.ifba-choice__marker::after {
	content: ""; width: 9px; height: 9px; border-radius: 50%;
	background: var(--ifba-on-primary); transform: scale(0);
	transition: transform var(--ifba-duration) var(--ifba-ease-out);
}
.ifba-choice--multi .ifba-choice__marker::after { border-radius: 2px; }
.ifba-choice input:checked ~ .ifba-choice__marker {
	border-color: var(--ifba-primary-600); background: var(--ifba-primary-600);
}
.ifba-choice input:checked ~ .ifba-choice__marker::after { transform: scale(1); }
.ifba-choice input:focus-visible ~ .ifba-choice__marker { box-shadow: var(--ifba-shadow-focus); }
.ifba-choice:has(input:checked) { border-color: var(--ifba-primary-500); background: var(--ifba-primary-50); }
.ifba-choice__body { flex: 1; font-size: var(--ifba-text-sm); line-height: var(--ifba-leading-snug); }
.ifba-choice__label { font-weight: 600; color: var(--ifba-n-500); margin-right: 0.4em; }

.ifba-choice.is-correct { border-color: var(--ifba-success); background: var(--ifba-success-bg); }
.ifba-choice.is-incorrect { border-color: var(--ifba-danger); background: var(--ifba-danger-bg); }

/* Switch */
.ifba-switch { display: inline-flex; align-items: center; gap: var(--ifba-space-3); cursor: pointer; }
.ifba-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ifba-switch__track {
	width: 42px; height: 24px; border-radius: var(--ifba-radius-full);
	background: var(--ifba-n-300); position: relative;
	transition: background-color var(--ifba-duration) var(--ifba-ease);
}
.ifba-switch__track::after {
	content: ""; position: absolute; top: 3px; left: 3px;
	width: 18px; height: 18px; border-radius: 50%; background: #fff;
	box-shadow: var(--ifba-shadow-xs);
	transition: transform var(--ifba-duration) var(--ifba-ease-out);
}
.ifba-switch input:checked ~ .ifba-switch__track { background: var(--ifba-primary-600); }
.ifba-switch input:checked ~ .ifba-switch__track::after { transform: translateX(18px); }
.ifba-switch input:focus-visible ~ .ifba-switch__track { box-shadow: var(--ifba-shadow-focus); }

/* =========================================================================
   ALERTS
   ====================================================================== */
.ifba-alert {
	display: flex; gap: var(--ifba-space-3);
	padding: var(--ifba-space-4);
	border-radius: var(--ifba-radius-md);
	border: 1px solid var(--ifba-border);
	background: var(--ifba-bg-subtle);
	font-size: var(--ifba-text-sm);
	line-height: var(--ifba-leading-snug);
}
.ifba-alert__icon { flex: none; margin-top: 1px; }
.ifba-alert__title { font-weight: 700; margin-bottom: 0.2em; }
.ifba-alert--success { background: var(--ifba-success-bg); border-color: var(--ifba-success-border); color: #065F46; }
.ifba-alert--warning { background: var(--ifba-warning-bg); border-color: var(--ifba-warning-border); color: #7C4A12; }
.ifba-alert--danger  { background: var(--ifba-danger-bg); border-color: var(--ifba-danger-border); color: #9F1239; }
.ifba-alert--info    { background: var(--ifba-info-bg); border-color: var(--ifba-info-border); color: #075985; }

/* =========================================================================
   TABS
   ====================================================================== */
.ifba-tabs__list {
	display: flex; gap: var(--ifba-space-1);
	border-bottom: 1px solid var(--ifba-border);
	overflow-x: auto; scrollbar-width: none;
}
.ifba-tabs__list::-webkit-scrollbar { display: none; }
.ifba-root .ifba-tabs__tab {
	position: relative; background: none; border: 0; cursor: pointer;
	font-family: var(--ifba-font); font-size: var(--ifba-text-sm); font-weight: 600;
	color: var(--ifba-text-muted);
	padding: var(--ifba-space-3) var(--ifba-space-4);
	white-space: nowrap;
	transition: color var(--ifba-duration) var(--ifba-ease);
}
.ifba-root .ifba-tabs__tab:hover { color: var(--ifba-n-800); }
.ifba-root .ifba-tabs__tab[aria-selected="true"] { color: var(--ifba-primary-700); }
.ifba-root .ifba-tabs__tab[aria-selected="true"]::after {
	content: ""; position: absolute; left: var(--ifba-space-3); right: var(--ifba-space-3); bottom: -1px;
	height: 2px; background: var(--ifba-primary-600); border-radius: 2px 2px 0 0;
}
.ifba-tabs__panel { padding-top: var(--ifba-space-5); }
.ifba-tabs__panel[hidden] { display: none; }

/* =========================================================================
   ACCORDION
   ====================================================================== */
.ifba-accordion__item { border-bottom: 1px solid var(--ifba-border); }
.ifba-root .ifba-accordion__trigger {
	display: flex; align-items: center; justify-content: space-between; gap: var(--ifba-space-3);
	width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
	font-family: var(--ifba-font); font-size: var(--ifba-text-base); font-weight: 600;
	color: var(--ifba-n-800);
	padding: var(--ifba-space-4) 0;
}
.ifba-root .ifba-accordion__trigger:hover { color: var(--ifba-primary-700); }
.ifba-accordion__chevron { transition: transform var(--ifba-duration) var(--ifba-ease); color: var(--ifba-text-muted); }
.ifba-accordion__trigger[aria-expanded="true"] .ifba-accordion__chevron { transform: rotate(180deg); }
.ifba-accordion__panel { padding: 0 0 var(--ifba-space-4); color: var(--ifba-text-muted); font-size: var(--ifba-text-sm); }
.ifba-accordion__panel[hidden] { display: none; }

/* =========================================================================
   MODAL
   ====================================================================== */
.ifba-modal {
	position: fixed; inset: 0; z-index: var(--ifba-z-modal);
	display: grid; place-items: center;
	padding: var(--ifba-space-4);
}
.ifba-modal[hidden] { display: none; }
.ifba-modal__backdrop {
	position: absolute; inset: 0;
	background: rgba(2, 6, 23, 0.55);
	backdrop-filter: blur(2px);
	animation: ifba-fade-in var(--ifba-duration) var(--ifba-ease);
}
.ifba-modal__dialog {
	position: relative; width: 100%; max-width: 520px;
	max-height: calc(100vh - 2 * var(--ifba-space-8));
	display: flex; flex-direction: column;
	background: var(--ifba-surface);
	border-radius: var(--ifba-radius-lg);
	box-shadow: var(--ifba-shadow-lg);
	animation: ifba-modal-in var(--ifba-duration-slow) var(--ifba-ease-out);
	overflow: hidden;
}
.ifba-modal--lg .ifba-modal__dialog { max-width: 780px; }
.ifba-modal--sm .ifba-modal__dialog { max-width: 400px; }
.ifba-modal__header {
	display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ifba-space-4);
	padding: var(--ifba-space-5); border-bottom: 1px solid var(--ifba-border);
}
.ifba-modal__title { margin: 0; font-size: var(--ifba-text-lg); }
.ifba-modal__body { padding: var(--ifba-space-5); overflow-y: auto; flex: 1; }
.ifba-modal__footer {
	display: flex; justify-content: flex-end; gap: var(--ifba-space-3);
	padding: var(--ifba-space-4) var(--ifba-space-5);
	border-top: 1px solid var(--ifba-border); background: var(--ifba-bg-subtle);
}
.ifba-root .ifba-modal__close {
	background: none; border: 0; cursor: pointer; color: var(--ifba-text-muted);
	padding: var(--ifba-space-1); border-radius: var(--ifba-radius-sm); line-height: 0;
	transition: color var(--ifba-duration) var(--ifba-ease), background-color var(--ifba-duration) var(--ifba-ease);
}
.ifba-root .ifba-modal__close:hover { color: var(--ifba-n-900); background: var(--ifba-n-100); }

body.ifba-modal-open { overflow: hidden; }

@keyframes ifba-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ifba-modal-in {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to { opacity: 1; transform: none; }
}

/* =========================================================================
   TOASTS
   ====================================================================== */
.ifba-toasts {
	position: fixed; z-index: var(--ifba-z-toast);
	bottom: var(--ifba-space-6); right: var(--ifba-space-6);
	display: flex; flex-direction: column; gap: var(--ifba-space-3);
	max-width: min(380px, calc(100vw - 2 * var(--ifba-space-6)));
	pointer-events: none;
}
.ifba-toast {
	display: flex; align-items: flex-start; gap: var(--ifba-space-3);
	padding: var(--ifba-space-4);
	background: var(--ifba-n-900); color: #fff;
	border-radius: var(--ifba-radius-md);
	box-shadow: var(--ifba-shadow-lg);
	font-size: var(--ifba-text-sm); line-height: var(--ifba-leading-snug);
	pointer-events: auto;
	animation: ifba-toast-in var(--ifba-duration-slow) var(--ifba-ease-out);
}
.ifba-toast.is-leaving { animation: ifba-toast-out var(--ifba-duration) var(--ifba-ease) forwards; }
.ifba-toast--success { background: #065F46; }
.ifba-toast--danger { background: #9F1239; }
.ifba-toast--warning { background: #7C4A12; }
.ifba-toast__icon { flex: none; margin-top: 1px; }
.ifba-toast__body { flex: 1; }
.ifba-root .ifba-toast__close {
	background: none; border: 0; color: inherit; opacity: 0.7;
	cursor: pointer; padding: 0; line-height: 0;
}
.ifba-root .ifba-toast__close:hover { opacity: 1; }

@keyframes ifba-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ifba-toast-out { to { opacity: 0; transform: translateY(8px); } }

@media (max-width: 640px) {
	.ifba-toasts {
		left: var(--ifba-space-4); right: var(--ifba-space-4);
		bottom: var(--ifba-space-4); max-width: none;
	}
}

/* =========================================================================
   TOOLTIP
   ====================================================================== */
.ifba-tooltip {
	position: fixed; z-index: var(--ifba-z-tooltip);
	background: var(--ifba-n-900); color: #fff;
	font-size: var(--ifba-text-xs); line-height: 1.4;
	padding: 0.45rem 0.65rem; border-radius: var(--ifba-radius-sm);
	max-width: 260px; pointer-events: none;
	box-shadow: var(--ifba-shadow-md);
	animation: ifba-fade-in var(--ifba-duration-fast) var(--ifba-ease);
}
.ifba-tooltip[hidden] { display: none; }

/* =========================================================================
   SKELETON
   ====================================================================== */
.ifba-skeleton {
	background: linear-gradient(90deg, var(--ifba-n-100) 25%, var(--ifba-n-200) 37%, var(--ifba-n-100) 63%);
	background-size: 400% 100%;
	animation: ifba-shimmer 1.4s ease infinite;
	border-radius: var(--ifba-radius-sm);
}
.ifba-skeleton--text { height: 0.85em; margin-bottom: 0.5em; }
.ifba-skeleton--title { height: 1.4em; width: 55%; margin-bottom: 0.75em; }
.ifba-skeleton--block { height: 140px; border-radius: var(--ifba-radius-md); }
@keyframes ifba-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* =========================================================================
   EMPTY STATE
   ====================================================================== */
.ifba-empty { text-align: center; padding: var(--ifba-space-12) var(--ifba-space-5); }
.ifba-empty__icon {
	width: 56px; height: 56px; margin: 0 auto var(--ifba-space-4);
	display: grid; place-items: center;
	background: var(--ifba-primary-50); color: var(--ifba-primary-700);
	border-radius: var(--ifba-radius-lg);
}
.ifba-empty__title { font-size: var(--ifba-text-lg); margin-bottom: var(--ifba-space-2); }
.ifba-empty__text { color: var(--ifba-text-muted); font-size: var(--ifba-text-sm); max-width: 42ch; margin: 0 auto var(--ifba-space-5); }

/* =========================================================================
   AVATAR
   ====================================================================== */
.ifba-avatar {
	width: 40px; height: 40px; border-radius: 50%;
	display: inline-grid; place-items: center; flex: none;
	background: var(--ifba-primary-100); color: var(--ifba-primary-800);
	font-weight: 700; font-size: var(--ifba-text-sm);
	overflow: hidden;
}
.ifba-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ifba-avatar--sm { width: 30px; height: 30px; font-size: var(--ifba-text-xs); }
.ifba-avatar--lg { width: 56px; height: 56px; font-size: var(--ifba-text-lg); }

/* =========================================================================
   DIVIDER WITH LABEL
   ====================================================================== */
.ifba-divider { display: flex; align-items: center; gap: var(--ifba-space-3); color: var(--ifba-text-subtle); font-size: var(--ifba-text-xs); }
.ifba-divider::before, .ifba-divider::after { content: ""; flex: 1; height: 1px; background: var(--ifba-border); }

/* =========================================================================
   PRINT — certificates
   ====================================================================== */
@media print {
	.ifba-no-print, .ifba-toasts, .ifba-modal { display: none !important; }
	.ifba-root { background: #fff; }
	.ifba-card { box-shadow: none; border-color: #ddd; }
}
/* =========================================================================
   BREADCRUMBS (Snippet 05)
   ====================================================================== */
.ifba-breadcrumbs { margin-bottom: var(--ifba-space-4); }
.ifba-breadcrumbs__list {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--ifba-space-1);
	list-style: none; margin: 0; padding: 0;
	font-size: var(--ifba-text-sm); color: var(--ifba-text-muted);
}
.ifba-breadcrumbs__item { display: flex; align-items: center; gap: var(--ifba-space-1); }
.ifba-breadcrumbs__item a { color: var(--ifba-text-muted); }
.ifba-breadcrumbs__item a:hover { color: var(--ifba-primary-700); }
.ifba-breadcrumbs__item [aria-current="page"] { color: var(--ifba-n-800); font-weight: 600; }
.ifba-breadcrumbs__sep { display: inline-flex; color: var(--ifba-text-subtle); }
/* =========================================================================
   LESSON VIEW (Snippet 12)
   ====================================================================== */
.ifba-lesson-view { max-width: 860px; }
.ifba-lesson-view__header { margin-bottom: var(--ifba-space-6); }
.ifba-lesson-view__title { font-size: var(--ifba-text-3xl); margin-bottom: var(--ifba-space-3); }
.ifba-lesson-view__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--ifba-space-4);
	font-size: var(--ifba-text-sm); color: var(--ifba-text-muted);
}
.ifba-lesson-view__type, .ifba-lesson-view__duration { display: inline-flex; align-items: center; gap: var(--ifba-space-2); }
.ifba-lesson-view__body { font-size: var(--ifba-text-base); line-height: var(--ifba-leading-relaxed); }
.ifba-lesson-view__footer {
	margin-top: var(--ifba-space-8); padding-top: var(--ifba-space-5);
	border-top: 1px solid var(--ifba-border);
	display: flex; justify-content: flex-end;
}

.ifba-prose > *:first-child { margin-top: 0; }
.ifba-prose h2 { font-size: var(--ifba-text-xl); margin-top: var(--ifba-space-8); }
.ifba-prose h3 { font-size: var(--ifba-text-lg); margin-top: var(--ifba-space-6); }
.ifba-prose ul, .ifba-prose ol { padding-left: 1.4em; margin-bottom: var(--ifba-space-4); }
.ifba-prose li { margin-bottom: var(--ifba-space-2); }
.ifba-prose blockquote {
	margin: var(--ifba-space-5) 0; padding: var(--ifba-space-4) var(--ifba-space-5);
	border-left: 3px solid var(--ifba-primary-500); background: var(--ifba-bg-subtle);
	border-radius: 0 var(--ifba-radius) var(--ifba-radius) 0;
}

/* Reading assignments */
.ifba-readings {
	margin-top: var(--ifba-space-6); padding: var(--ifba-space-5);
	background: var(--ifba-bg-subtle); border: 1px solid var(--ifba-border);
	border-radius: var(--ifba-radius-lg);
}
.ifba-readings__title { font-size: var(--ifba-text-base); margin-bottom: var(--ifba-space-4); }
.ifba-readings__list { list-style: none; margin: 0; padding: 0; }
.ifba-readings__item {
	display: flex; align-items: flex-start; gap: var(--ifba-space-3);
	padding: var(--ifba-space-3) 0; border-bottom: 1px solid var(--ifba-border);
	font-size: var(--ifba-text-sm); flex-wrap: wrap;
}
.ifba-readings__item:last-child { border-bottom: 0; }
.ifba-readings__item .ifba-icon { color: var(--ifba-primary-600); margin-top: 2px; }
.ifba-readings__ext { font-size: var(--ifba-text-xs); color: var(--ifba-text-subtle); }

/* Video */
.ifba-video__frame { position: relative; border-radius: var(--ifba-radius-lg); overflow: hidden; background: #000; }
.ifba-video__frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.ifba-video__player { width: 100%; border-radius: var(--ifba-radius-lg); background: #000; display: block; }

/* Knowledge check */
.ifba-kc {
	margin-top: var(--ifba-space-6); padding: var(--ifba-space-5);
	border: 1px solid var(--ifba-primary-200); border-radius: var(--ifba-radius-lg);
	background: linear-gradient(180deg, var(--ifba-primary-50), var(--ifba-surface));
}
.ifba-kc__head {
	display: inline-flex; align-items: center; gap: var(--ifba-space-2);
	font-size: var(--ifba-text-2xs); font-weight: 700; text-transform: uppercase;
	letter-spacing: var(--ifba-tracking-caps); color: var(--ifba-primary-700);
	margin-bottom: var(--ifba-space-3);
}
.ifba-kc__question { font-size: var(--ifba-text-lg); font-weight: 600; color: var(--ifba-n-900); margin-bottom: var(--ifba-space-4); }
.ifba-kc__options { display: flex; flex-direction: column; gap: var(--ifba-space-2); }
.ifba-kc__actions { display: flex; gap: var(--ifba-space-3); margin-top: var(--ifba-space-4); }
.ifba-kc__feedback {
	margin-top: var(--ifba-space-4); padding: var(--ifba-space-4);
	border-radius: var(--ifba-radius-md); font-size: var(--ifba-text-sm);
	line-height: var(--ifba-leading-snug);
}
.ifba-kc__feedback.is-correct { background: var(--ifba-success-bg); border: 1px solid var(--ifba-success-border); color: #065F46; }
.ifba-kc__feedback.is-incorrect { background: var(--ifba-warning-bg); border: 1px solid var(--ifba-warning-border); color: #7C4A12; }
.ifba-kc__verdict { font-weight: 700; display: block; margin-bottom: var(--ifba-space-1); }
.ifba-kc.is-answered .ifba-choice { pointer-events: none; }
/* =========================================================================
   SLIDE DECK (Snippet 13)
   ====================================================================== */
.ifba-deck {
	border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-lg);
	background: var(--ifba-surface); overflow: hidden;
	box-shadow: var(--ifba-shadow-sm);
}
.ifba-deck__bar {
	display: flex; align-items: center; justify-content: space-between; gap: var(--ifba-space-3);
	padding: var(--ifba-space-3) var(--ifba-space-4);
	border-bottom: 1px solid var(--ifba-border); background: var(--ifba-bg-subtle);
	flex-wrap: wrap;
}
.ifba-deck__nav { display: flex; align-items: center; gap: var(--ifba-space-2); }
.ifba-deck__tools { display: flex; align-items: center; gap: var(--ifba-space-2); }
.ifba-deck__counter { display: inline-flex; align-items: center; gap: var(--ifba-space-1); font-size: var(--ifba-text-sm); }
.ifba-root .ifba-deck__jump {
	width: 4.5em; text-align: center; padding: 0.35rem 0.4rem;
	border: 1px solid var(--ifba-border-strong); border-radius: var(--ifba-radius-sm);
	font-family: var(--ifba-font); font-size: var(--ifba-text-sm); background: var(--ifba-surface);
	color: var(--ifba-text); -moz-appearance: textfield;
}
.ifba-deck__jump::-webkit-outer-spin-button,
.ifba-deck__jump::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ifba-deck__total { color: var(--ifba-text-muted); }

.ifba-deck__stage { position: relative; background: var(--ifba-n-900); }
.ifba-deck__stage:focus-visible { outline: 3px solid var(--ifba-primary-500); outline-offset: -3px; }
.ifba-deck__frame { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; }
.ifba-deck__image {
	max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;
	-webkit-user-select: none; user-select: none; -webkit-user-drag: none;
	transition: opacity var(--ifba-duration) var(--ifba-ease);
}
.ifba-deck.is-loading .ifba-deck__image { opacity: 0.25; }
.ifba-deck__spinner {
	position: absolute; inset: 0; display: none; place-items: center; color: #fff; pointer-events: none;
}
.ifba-deck.is-loading .ifba-deck__spinner { display: grid; }

/* Transparent layer over the image: blocks the long-press/right-click save
   affordance. A deterrent only — the real control is the signed endpoint. */
.ifba-deck__shield { position: absolute; inset: 0; }

.ifba-deck__watermark {
	position: absolute; inset: 0; display: grid; place-items: center;
	pointer-events: none; overflow: hidden;
}
.ifba-deck__watermark span {
	font-size: clamp(11px, 1.6vw, 15px); letter-spacing: .08em; color: rgba(255,255,255,.22);
	transform: rotate(-24deg); white-space: nowrap; font-weight: 600;
}

.ifba-deck__progress { border-radius: 0; }
.ifba-deck__transcript {
	padding: var(--ifba-space-4) var(--ifba-space-5);
	border-top: 1px solid var(--ifba-border); background: var(--ifba-bg-subtle);
	font-size: var(--ifba-text-sm); line-height: var(--ifba-leading-relaxed);
	max-height: 260px; overflow-y: auto;
}
.ifba-deck__transcript[hidden] { display: none; }
.ifba-deck__transcript-title {
	font-size: var(--ifba-text-2xs); text-transform: uppercase; letter-spacing: var(--ifba-tracking-caps);
	color: var(--ifba-text-muted); margin-bottom: var(--ifba-space-2);
}

.ifba-deck:fullscreen, .ifba-deck:-webkit-full-screen { border-radius: 0; display: flex; flex-direction: column; }
.ifba-deck:fullscreen .ifba-deck__stage { flex: 1; }
.ifba-deck:fullscreen .ifba-deck__frame { height: 100%; aspect-ratio: auto; }

@media (max-width: 640px) {
	.ifba-deck__bar { justify-content: center; }
	.ifba-deck__tools span { display: none; }
}
/* =========================================================================
   AUTH (Snippet 20)
   ====================================================================== */
.ifba-auth { max-width: 460px; margin-inline: auto; }
.ifba-auth--profile { max-width: 620px; }
.ifba-auth__form {
	background: var(--ifba-surface); border: 1px solid var(--ifba-border);
	border-radius: var(--ifba-radius-lg); padding: var(--ifba-space-8);
	box-shadow: var(--ifba-shadow-sm);
}
.ifba-auth__title { font-size: var(--ifba-text-2xl); margin-bottom: var(--ifba-space-2); }
.ifba-auth__lede { color: var(--ifba-text-muted); font-size: var(--ifba-text-sm); margin-bottom: var(--ifba-space-6); }
.ifba-auth__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ifba-space-4); }
.ifba-auth__row {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--ifba-space-3); margin-bottom: var(--ifba-space-5); flex-wrap: wrap;
}
.ifba-auth__remember { display: inline-flex; align-items: center; gap: var(--ifba-space-2); font-size: var(--ifba-text-sm); }
.ifba-auth__link { font-size: var(--ifba-text-sm); }
.ifba-auth__alt {
	margin-top: var(--ifba-space-5); text-align: center;
	font-size: var(--ifba-text-sm); color: var(--ifba-text-muted);
}
.ifba-auth .ifba-alert { margin-bottom: var(--ifba-space-4); }
.ifba-auth .ifba-divider { margin: var(--ifba-space-6) 0 var(--ifba-space-4); }
@media (max-width: 560px) {
	.ifba-auth__grid { grid-template-columns: 1fr; }
	.ifba-auth__form { padding: var(--ifba-space-5); }
}
/* =========================================================================
   DASHBOARD (Snippet 22)
   ====================================================================== */
.ifba-dashboard { max-width: var(--ifba-container); margin-inline: auto; }
.ifba-dashboard__header {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: var(--ifba-space-4); margin-bottom: var(--ifba-space-6); flex-wrap: wrap;
}
.ifba-dashboard__title { font-size: var(--ifba-text-3xl); margin: var(--ifba-space-2) 0 0; }
.ifba-dashboard__subtitle {
	font-size: var(--ifba-text-lg); margin-bottom: var(--ifba-space-4);
}
.ifba-dashboard__course { margin-top: var(--ifba-space-8); }
.ifba-dashboard__outline { margin-top: var(--ifba-space-6); }

.ifba-dashboard__stats {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ifba-space-3); margin-bottom: var(--ifba-space-6);
}
.ifba-stat {
	background: var(--ifba-surface); border: 1px solid var(--ifba-border);
	border-radius: var(--ifba-radius-lg); padding: var(--ifba-space-4);
	display: flex; flex-direction: column; gap: var(--ifba-space-1);
}
.ifba-stat__icon {
	width: 34px; height: 34px; border-radius: var(--ifba-radius);
	background: var(--ifba-primary-50); color: var(--ifba-primary-700);
	display: grid; place-items: center; margin-bottom: var(--ifba-space-2);
}
.ifba-stat__value {
	font-family: var(--ifba-font-display); font-size: var(--ifba-text-2xl);
	font-weight: 700; color: var(--ifba-n-900); line-height: 1.1;
}
.ifba-stat__label { font-size: var(--ifba-text-xs); color: var(--ifba-text-muted); }

/* Course card */
.ifba-course-card { overflow: hidden; }
.ifba-course-card__body { padding: var(--ifba-space-6); }
.ifba-course-card__head {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: var(--ifba-space-4); margin-bottom: var(--ifba-space-4);
}
.ifba-course-card__title { font-size: var(--ifba-text-xl); margin: var(--ifba-space-3) 0 0; }
.ifba-course-card__subtitle {
	color: var(--ifba-text-muted); font-size: var(--ifba-text-sm);
	margin: var(--ifba-space-2) 0 0;
}
.ifba-course-card__ring { flex: none; }
.ifba-course-card__facts {
	display: flex; flex-wrap: wrap; gap: var(--ifba-space-4);
	font-size: var(--ifba-text-sm); color: var(--ifba-text-muted);
	margin-bottom: var(--ifba-space-5);
}
.ifba-course-card__facts span { display: inline-flex; align-items: center; gap: var(--ifba-space-2); }
.ifba-course-card__footer {
	padding: var(--ifba-space-4) var(--ifba-space-6);
	border-top: 1px solid var(--ifba-border); background: var(--ifba-bg-subtle);
	display: flex; align-items: center; gap: var(--ifba-space-4); flex-wrap: wrap;
}
.ifba-course-card__next { font-size: var(--ifba-text-sm); color: var(--ifba-text-muted); }

/* Outline */
.ifba-outline {
	border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-lg);
	background: var(--ifba-surface); overflow: hidden;
}
.ifba-outline__item { border-bottom: 1px solid var(--ifba-border); }
.ifba-outline__item:last-child { border-bottom: 0; }
.ifba-outline__heading { margin: 0; }
.ifba-root .ifba-outline__trigger { padding: var(--ifba-space-4) var(--ifba-space-5); }
.ifba-outline__label { display: flex; align-items: center; gap: var(--ifba-space-3); min-width: 0; }
.ifba-outline__index {
	flex: none; width: 26px; height: 26px; border-radius: var(--ifba-radius-sm);
	background: var(--ifba-primary-50); color: var(--ifba-primary-800);
	display: grid; place-items: center;
	font-size: var(--ifba-text-xs); font-weight: 700;
}
.ifba-outline__title { text-align: left; }
.ifba-outline__meta {
	display: flex; align-items: center; gap: var(--ifba-space-3);
	font-size: var(--ifba-text-xs); color: var(--ifba-text-muted); flex: none;
}
.ifba-outline__done { color: var(--ifba-success); display: inline-flex; }
.ifba-outline__panel { padding: 0 var(--ifba-space-5) var(--ifba-space-4); }
.ifba-outline__lessons { list-style: none; margin: 0; padding: 0; }
.ifba-outline__lesson {
	display: flex; align-items: center; gap: var(--ifba-space-3);
	padding: var(--ifba-space-3) 0; border-top: 1px solid var(--ifba-border);
	font-size: var(--ifba-text-sm);
}
.ifba-outline__lesson:first-child { border-top: 0; }
.ifba-outline__state {
	flex: none; width: 20px; height: 20px; border-radius: 50%;
	border: 2px solid var(--ifba-border-strong); background: var(--ifba-surface);
	display: grid; place-items: center;
}
.ifba-outline__state--done { background: var(--ifba-success); border-color: var(--ifba-success); color: #fff; }
.ifba-outline__state--active { border-color: var(--ifba-primary-600); box-shadow: inset 0 0 0 3px var(--ifba-primary-200); }
.ifba-outline__state--locked { border-color: var(--ifba-border); color: var(--ifba-text-subtle); background: var(--ifba-bg-muted); }
.ifba-outline__link {
	display: flex; align-items: center; gap: var(--ifba-space-2);
	flex: 1; min-width: 0; color: var(--ifba-text);
}
.ifba-outline__link:hover { color: var(--ifba-primary-700); text-decoration: none; }
.ifba-outline__lesson-icon { color: var(--ifba-text-subtle); display: inline-flex; }
.ifba-outline__lesson-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifba-outline__lesson-meta { font-size: var(--ifba-text-xs); color: var(--ifba-text-subtle); flex: none; }
.ifba-outline__lesson.is-locked .ifba-outline__link { color: var(--ifba-text-subtle); cursor: default; }
.ifba-outline__lesson.is-completed .ifba-outline__lesson-title { color: var(--ifba-text-muted); }

@media (max-width: 900px) {
	.ifba-dashboard__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.ifba-course-card__head { flex-direction: column-reverse; align-items: flex-start; }
	.ifba-course-card__body, .ifba-course-card__footer { padding: var(--ifba-space-4); }
	.ifba-outline__lesson-meta { display: none; }
}

/* =========================================================================
   COURSE CATALOGUE
   Every rule is scoped to .ifcs: the design system styles .ifba-root a, p
   and headings more specifically than a lone class.
   ====================================================================== */
.ifcs { max-width: 1180px; margin: 0 auto; padding: 0 var(--ifba-space-4) var(--ifba-space-8); }
.ifcs .ifcs-hero {
	position: relative; overflow: hidden; display: grid; grid-template-columns: 1.3fr auto; align-items: end; gap: var(--ifba-space-6);
	margin: var(--ifba-space-6) 0 var(--ifba-space-6); padding: clamp(28px, 5vw, 56px); border-radius: var(--ifba-radius-xl); color: #fff;
	background: radial-gradient(110% 140% at 90% 0%, rgba(94,234,212,.28), transparent 55%), linear-gradient(150deg, #0B3F49, #08313A 55%, #062830);
}
.ifcs .ifcs-eyebrow { margin: 0 0 var(--ifba-space-2); font-size: var(--ifba-text-xs); font-weight: 800; letter-spacing: var(--ifba-tracking-caps); text-transform: uppercase; color: #5EEAD4; }
.ifcs .ifcs-h1 { margin: 0 0 var(--ifba-space-3); font-size: clamp(28px, 4vw, 44px); line-height: 1.1; letter-spacing: -.025em; color: #fff; }
.ifcs .ifcs-lede { margin: 0; max-width: 52ch; font-size: var(--ifba-text-lg); line-height: 1.6; color: rgba(255,255,255,.8); }
.ifcs .ifcs-stats { display: flex; gap: var(--ifba-space-3); margin: 0; }
.ifcs .ifcs-stats div { min-width: 104px; padding: var(--ifba-space-4); border-radius: var(--ifba-radius-lg); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.ifcs .ifcs-stats dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.ifcs .ifcs-stats dd { margin: 4px 0 0; font-size: 26px; font-weight: 800; color: #fff; }

/* ---------- filters ---------- */
.ifcs .ifcs-filters {
	position: sticky; top: 96px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ifba-space-3);
	margin-bottom: var(--ifba-space-5); padding: var(--ifba-space-3); border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-xl);
	background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
	box-shadow: 0 14px 34px -24px rgba(15,23,42,.4);
}
.ifcs .ifcs-filters[hidden] { display: none; }
.ifcs .ifcs-search { position: relative; flex: 1 1 220px; display: flex; align-items: center; }
.ifcs .ifcs-search svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--ifba-text-muted); pointer-events: none; }
.ifcs .ifcs-search input {
	width: 100%; min-height: 44px; padding: 0 14px 0 42px; border: 1px solid var(--ifba-border); border-radius: 999px;
	background: var(--ifba-surface); font: inherit; color: var(--ifba-text); transition: border-color .18s ease, box-shadow .18s ease;
}
.ifcs .ifcs-search input:focus { outline: none; border-color: var(--ifba-primary-600); box-shadow: 0 0 0 4px rgba(13,148,136,.16); }
.ifcs .ifcs-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 999px; background: var(--ifba-bg-muted); }
.ifcs .ifcs-chip {
	min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ifba-text-muted);
	font: 600 var(--ifba-text-sm)/1 inherit; cursor: pointer; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.ifcs .ifcs-chip:hover { color: var(--ifba-text); }
.ifcs .ifcs-chip[aria-pressed="true"] { background: var(--ifba-surface); color: #0B6F68; box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 0 0 1px var(--ifba-primary-100); }
.ifcs .ifcs-chip:focus-visible, .ifcs .ifcs-sort select:focus-visible, .ifcs .ifcs-btn:focus-visible { outline: 3px solid var(--ifba-primary-600); outline-offset: 2px; }
.ifcs .ifcs-sort { display: flex; align-items: center; gap: 8px; font-size: var(--ifba-text-sm); color: var(--ifba-text-muted); }
.ifcs .ifcs-sort select { min-height: 40px; padding: 0 12px; border: 1px solid var(--ifba-border); border-radius: 10px; background: var(--ifba-surface); font: inherit; color: var(--ifba-text); }
.ifcs .ifcs-count { margin: 0 0 0 auto; font-size: var(--ifba-text-sm); font-weight: 600; color: var(--ifba-text-muted); }

/* ---------- cards ---------- */
.ifcs .ifcs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--ifba-space-5); }
.ifcs .ifcs-card {
	display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-xl);
	background: var(--ifba-surface); box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease, border-color .22s ease;
}
.ifcs .ifcs-card[hidden] { display: none; }
.ifcs .ifcs-card:hover { transform: translateY(-4px); border-color: var(--ifba-primary-100); box-shadow: 0 24px 48px -28px rgba(15,23,42,.5); }
.ifcs .ifcs-card__cover {
	position: relative; display: flex; align-items: flex-end; justify-content: space-between; height: 150px; padding: var(--ifba-space-4);
	background: radial-gradient(90% 120% at 85% 10%, rgba(94,234,212,.45), transparent 60%), linear-gradient(135deg, #0D9488, #08313A);
	overflow: hidden;
}
.ifcs .ifcs-card__cover::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent); transform: translateX(-160%);
}
.ifcs .ifcs-card__letter { font-size: 64px; font-weight: 800; line-height: .8; color: rgba(255,255,255,.92); letter-spacing: -.04em; }
.ifcs .ifcs-card__badge { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: 12px; font-weight: 700; }
.ifcs .ifcs-card__body { display: flex; flex-direction: column; flex: 1; gap: var(--ifba-space-3); padding: var(--ifba-space-5); }
.ifcs .ifcs-card__title { margin: 0; font-size: var(--ifba-text-lg); line-height: 1.3; }
.ifcs .ifcs-card__title a { color: var(--ifba-text); text-decoration: none; }
.ifcs .ifcs-card__title a:hover { color: #0B6F68; text-decoration: none; }
.ifcs .ifcs-card__summary { margin: 0; color: var(--ifba-text-muted); line-height: 1.6; }
.ifcs .ifcs-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ifcs .ifcs-card__meta li { padding: 4px 10px; border-radius: 999px; background: var(--ifba-bg-muted); font-size: 12.5px; font-weight: 600; color: var(--ifba-text-muted); }
.ifcs .ifcs-progress { display: flex; align-items: center; gap: 10px; }
.ifcs .ifcs-progress__bar { flex: 1; height: 8px; border-radius: 99px; background: var(--ifba-bg-muted); overflow: hidden; }
.ifcs .ifcs-progress__bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0D9488, #0B6F68); }
.ifcs .ifcs-progress__label { font-size: 12.5px; font-weight: 700; color: #0B6F68; }
.ifcs .ifcs-btn {
	display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 44px; margin-top: auto; padding: 0 20px;
	border-radius: 999px; background: #0B6F68; color: #fff; font-weight: 700; text-decoration: none; transition: background-color .18s ease, transform .18s ease;
}
.ifcs .ifcs-btn:hover { background: #08564F; color: #fff; text-decoration: none; transform: translateY(-1px); }
.ifcs .ifcs-btn--ghost { background: transparent; color: #0B6F68; box-shadow: inset 0 0 0 1.5px #0B6F68; }
.ifcs .ifcs-btn--ghost:hover { background: var(--ifba-primary-50); color: #0B6F68; }
.ifcs .ifcs-empty { padding: var(--ifba-space-8) var(--ifba-space-5); text-align: center; border: 1.5px dashed var(--ifba-border); border-radius: var(--ifba-radius-xl); }
.ifcs .ifcs-empty[hidden] { display: none; }
.ifcs .ifcs-empty p { margin: 0 0 var(--ifba-space-4); color: var(--ifba-text-muted); }

@keyframes ifcs-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ifcs-sheen { to { transform: translateX(380%); } }
@media (prefers-reduced-motion: no-preference) {
	.ifcs .ifcs-card { animation: ifcs-rise .5s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
	.ifcs .ifcs-card:hover .ifcs-card__cover::after { animation: ifcs-sheen .9s ease; }
}
@media (max-width: 860px) {
	.ifcs .ifcs-hero { grid-template-columns: minmax(0, 1fr); }
	.ifcs .ifcs-filters { position: static; }
	.ifcs .ifcs-count { margin-left: 0; width: 100%; }
}
/* =========================================================================
   LOCKED STATE (Snippet 24)
   ====================================================================== */
.ifba-locked { opacity: 0.6; }
.ifba-lock-badge {
	display: inline-flex; align-items: center; gap: 0.35em;
	font-size: var(--ifba-text-2xs); font-weight: 600;
	color: var(--ifba-text-subtle);
}
.ifba-lock-badge .ifba-icon { width: 13px; height: 13px; }
/* =========================================================================
   NOTES (Snippet 25)
   ====================================================================== */
.ifba-notes {
	margin-top: var(--ifba-space-6); padding: var(--ifba-space-5);
	background: var(--ifba-bg-subtle); border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-lg);
}
.ifba-notes__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ifba-space-3); margin-bottom: var(--ifba-space-3); }
.ifba-notes__title { display: flex; align-items: center; gap: var(--ifba-space-2); font-size: var(--ifba-text-base); margin: 0; }
.ifba-root .ifba-notes__bookmark[aria-pressed="true"] { background: var(--ifba-warning-bg); color: var(--ifba-warning); border-color: var(--ifba-warning-border); }
.ifba-root .ifba-notes__box { width: 100%; resize: vertical; min-height: 96px; background: var(--ifba-surface); }
.ifba-notes__foot { display: flex; align-items: center; gap: var(--ifba-space-3); margin-top: var(--ifba-space-3); flex-wrap: wrap; }
.ifba-notes__status { font-size: var(--ifba-text-xs); color: var(--ifba-text-muted); min-width: 7em; }
.ifba-notes__status.is-saved { color: var(--ifba-success); }
.ifba-notes__all { margin-left: auto; font-size: var(--ifba-text-sm); }
.ifba-notes__slides { display: flex; flex-direction: column; gap: var(--ifba-space-2); margin-top: var(--ifba-space-4); }

.ifba-slide-note {
	position: relative; display: flex; align-items: flex-start; gap: var(--ifba-space-3);
	padding: var(--ifba-space-3) var(--ifba-space-4); padding-right: var(--ifba-space-8);
	background: var(--ifba-surface); border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-md);
}
.ifba-slide-note__badge {
	flex: none; font-size: var(--ifba-text-2xs); font-weight: 700; text-transform: uppercase;
	letter-spacing: var(--ifba-tracking-wide); color: var(--ifba-primary-800);
	background: var(--ifba-primary-50); padding: 3px 8px; border-radius: var(--ifba-radius-sm);
}
.ifba-slide-note__body { margin: 0; font-size: var(--ifba-text-sm); color: var(--ifba-text); }
.ifba-root .ifba-slide-note__remove {
	position: absolute; top: 8px; right: 8px; background: none; border: 0; cursor: pointer;
	color: var(--ifba-text-subtle); padding: 4px; border-radius: var(--ifba-radius-sm); line-height: 0;
}
.ifba-root .ifba-slide-note__remove:hover { color: var(--ifba-danger); background: var(--ifba-danger-bg); }

.ifba-notes-page { max-width: var(--ifba-container); margin-inline: auto; }
.ifba-notes-page__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ifba-space-4); flex-wrap: wrap; }
.ifba-notes-page__title { font-size: var(--ifba-text-3xl); margin: var(--ifba-space-2) 0 var(--ifba-space-1); }
.ifba-notes-page__filters { display: flex; gap: var(--ifba-space-2); margin: var(--ifba-space-5) 0; flex-wrap: wrap; }
.ifba-root .ifba-chip {
	display: inline-block; padding: 0.35rem 0.85rem; border-radius: var(--ifba-radius-full);
	background: var(--ifba-bg-muted); color: var(--ifba-text-muted); font-size: var(--ifba-text-sm); text-decoration: none;
}
.ifba-root .ifba-chip.is-active { background: var(--ifba-primary-700); color: var(--ifba-on-primary); }
.ifba-notes-page__module { font-size: var(--ifba-text-xs); text-transform: uppercase; letter-spacing: var(--ifba-tracking-caps); color: var(--ifba-text-muted); margin: var(--ifba-space-6) 0 var(--ifba-space-2); }
.ifba-note-card { background: var(--ifba-surface); border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-lg); padding: var(--ifba-space-5); margin-bottom: var(--ifba-space-3); }
.ifba-note-card__lesson { font-size: var(--ifba-text-lg); margin: 0 0 var(--ifba-space-3); }
.ifba-note-card__item { padding: var(--ifba-space-3) 0; border-top: 1px solid var(--ifba-border); }
.ifba-note-card__item:first-of-type { border-top: 0; padding-top: 0; }
.ifba-note-card__flag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ifba-text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ifba-tracking-wide); color: var(--ifba-warning); margin-left: var(--ifba-space-2); }
.ifba-note-card__body { margin: var(--ifba-space-2) 0 var(--ifba-space-1); line-height: var(--ifba-leading-relaxed); }
.ifba-note-card__time { font-size: var(--ifba-text-xs); color: var(--ifba-text-subtle); }

@media print {
	.ifba-notes-page__filters, .ifba-notes-page__head .ifba-btn, .ifba-help-fab { display: none !important; }
	.ifba-note-card { break-inside: avoid; border-color: #ccc; }
}
/* =========================================================================
   SPLIT AUTH (Snippet 26)
   ====================================================================== */
.ifba-split {
	display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch;
	min-height: min(760px, 88vh); border-radius: var(--ifba-radius-xl);
	overflow: hidden; border: 1px solid var(--ifba-border);
	background: var(--ifba-surface); box-shadow: var(--ifba-shadow-lg);
}

/* ---------- brand side ---------- */
.ifba-split__brand {
	position: relative; overflow: hidden; display: flex; align-items: center;
	padding: clamp(2rem, 4vw, 3.5rem);
	background: linear-gradient(150deg, var(--ifba-primary-900) 0%, var(--ifba-primary-700) 42%, var(--ifba-accent-700) 100%);
	color: #fff; isolation: isolate;
}
.ifba-split__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ifba-split__video {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	object-fit: cover; opacity: .3;
}
/* The wash is what makes the copy legible over moving footage. It is not
   decoration — without it the contrast depends on the frame. */
.ifba-split__wash {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	background:
		linear-gradient(150deg, rgba(8,49,58,.94) 0%, rgba(13,148,136,.74) 52%, rgba(67,56,202,.70) 100%);
}
.ifba-constellation {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	color: var(--ifba-accent-200, #C7D2FE); opacity: .5;
}
.ifba-constellation__links line { stroke: currentColor; stroke-width: .7; opacity: .22; }
.ifba-constellation__nodes circle { fill: currentColor; opacity: .55; }
.ifba-split__sweep {
	position: absolute; top: -40%; left: -60%; width: 45%; height: 180%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
	transform: rotate(14deg); pointer-events: none;
}
.ifba-blob {
	position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5;
	will-change: transform;
}
.ifba-blob--1 { width: 46%; padding-bottom: 46%; left: -12%; top: -10%; background: var(--ifba-accent-400); }
.ifba-blob--2 { width: 40%; padding-bottom: 40%; right: -10%; bottom: -6%; background: var(--ifba-primary-300); }
.ifba-blob--3 { width: 30%; padding-bottom: 30%; left: 32%; bottom: 18%; background: #7DD3FC; opacity: .32; }
.ifba-split__grid {
	position: absolute; inset: 0; opacity: .16;
	background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
	background-size: 46px 46px;
	mask-image: radial-gradient(ellipse at 30% 20%, #000 10%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 10%, transparent 70%);
}
.ifba-orbit {
	position: absolute; right: -14%; top: 50%; transform: translateY(-50%);
	width: min(560px, 74%); height: auto; color: rgba(255,255,255,.30);
}
.ifba-orbit__rings { opacity: .8; }
.ifba-orbit__spin1, .ifba-orbit__spin2, .ifba-orbit__spin3 { transform-origin: 200px 200px; }

.ifba-split__inner { position: relative; z-index: 1; max-width: 46ch; }
.ifba-split__eyebrow {
	font-size: var(--ifba-text-xs); font-weight: 700; letter-spacing: var(--ifba-tracking-caps);
	text-transform: uppercase; opacity: .82; margin: 0 0 var(--ifba-space-4);
}
.ifba-split__brand .ifba-split__headline {
	font-size: clamp(1.7rem, 2.6vw, 2.45rem); line-height: 1.14; font-weight: 700;
	letter-spacing: -.02em; margin: 0 0 var(--ifba-space-4);
}
/* The design system colours every heading inside .ifba-root, which is a more
   specific selector than a single class — so dark text would land on the dark
   panel. Everything in here is white. */
.ifba-root .ifba-split__brand,
.ifba-root .ifba-split__brand h1,
.ifba-root .ifba-split__brand h2,
.ifba-root .ifba-split__brand h3,
.ifba-root .ifba-split__brand p,
.ifba-root .ifba-split__brand strong,
.ifba-root .ifba-split__brand span { color: #fff; }
.ifba-split__lede { font-size: var(--ifba-text-base); line-height: var(--ifba-leading-relaxed); opacity: .9; margin: 0 0 var(--ifba-space-8); }

.ifba-split__points { list-style: none; margin: 0 0 var(--ifba-space-8); padding: 0; display: grid; gap: var(--ifba-space-4); }
.ifba-split__point { display: flex; gap: var(--ifba-space-3); align-items: flex-start; }
.ifba-split__pointicon {
	flex: none; width: 34px; height: 34px; border-radius: var(--ifba-radius-md);
	display: grid; place-items: center; background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.2); color: #fff;
}
.ifba-split__point strong { display: block; font-size: var(--ifba-text-sm); font-weight: 650; margin-bottom: 2px; }
.ifba-split__point span span { font-size: var(--ifba-text-sm); opacity: .82; line-height: var(--ifba-leading-snug); }

.ifba-split__stats { display: flex; gap: clamp(1.25rem, 3vw, 2.25rem); margin-bottom: var(--ifba-space-6); flex-wrap: wrap; }
.ifba-split__stat { display: flex; flex-direction: column; }
.ifba-split__statvalue { font-size: var(--ifba-text-2xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ifba-split__statlabel { font-size: var(--ifba-text-2xs); text-transform: uppercase; letter-spacing: var(--ifba-tracking-wide); opacity: .72; margin-top: 4px; }
.ifba-split__footnote { font-size: var(--ifba-text-xs); opacity: .68; line-height: var(--ifba-leading-snug); margin: 0; max-width: 42ch; }

/* ---------- form side ---------- */
.ifba-split__panel { display: flex; align-items: center; justify-content: center; padding: clamp(1.75rem, 4vw, 3.25rem); background: var(--ifba-surface); }
.ifba-split__form { width: 100%; max-width: 420px; }
.ifba-split__tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--ifba-bg-muted); border-radius: var(--ifba-radius-full); margin-bottom: var(--ifba-space-6); }
.ifba-root .ifba-split__tab {
	padding: 0.5rem 1.1rem; border-radius: var(--ifba-radius-full); font-size: var(--ifba-text-sm);
	font-weight: 600; color: var(--ifba-text-muted); text-decoration: none; transition: all .18s ease;
}
.ifba-root .ifba-split__tab:hover { color: var(--ifba-text); }
.ifba-root .ifba-split__tab.is-active { background: var(--ifba-surface); color: var(--ifba-primary-700); box-shadow: var(--ifba-shadow-sm); }
.ifba-split__title { font-size: var(--ifba-text-2xl); margin: 0 0 var(--ifba-space-1); letter-spacing: -.015em; }
.ifba-split__subtitle { color: var(--ifba-text-muted); font-size: var(--ifba-text-sm); margin: 0 0 var(--ifba-space-6); }
.ifba-split__back { margin: var(--ifba-space-6) 0 0; font-size: var(--ifba-text-sm); text-align: center; }

/* The form from Snippet 20 sits inside the panel, so drop its own frame. */
.ifba-split__form .ifba-auth { max-width: none; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.ifba-split__form .ifba-auth__form { padding: 0; background: none; border: 0; box-shadow: none; }

/* ---------- motion ----------
   Content is visible by default; motion is layered on only where it is
   welcome. Animating in from opacity 0 would hide the panel permanently
   anywhere animations do not run. */
@keyframes ifba-drift-a { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(12%,8%,0) scale(1.14); } }
@keyframes ifba-drift-b { 0%,100% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(-10%,-9%,0) scale(.92); } }
@keyframes ifba-drift-c { 0%,100% { transform: translate3d(0,0,0) scale(.95); } 50% { transform: translate3d(8%,-12%,0) scale(1.2); } }
@keyframes ifba-orbit { to { transform: rotate(360deg); } }
@keyframes ifba-pulse { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.22); } }
@keyframes ifba-rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@keyframes ifba-node { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }
@keyframes ifba-link { 0%, 100% { opacity: .10; } 50% { opacity: .34; } }
@keyframes ifba-sweep { 0%, 82% { left: -60%; } 100% { left: 130%; } }
@keyframes ifba-float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (prefers-reduced-motion: no-preference) {
	.ifba-constellation { animation: ifba-float-y 18s ease-in-out infinite; }
	.ifba-constellation__nodes circle { animation: ifba-node 4.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
	.ifba-constellation__links line { animation: ifba-link 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
	.ifba-split__sweep { animation: ifba-sweep 11s ease-in-out infinite; }

	.ifba-blob--1 { animation: ifba-drift-a 22s ease-in-out infinite; }
	.ifba-blob--2 { animation: ifba-drift-b 28s ease-in-out infinite; }
	.ifba-blob--3 { animation: ifba-drift-c 34s ease-in-out infinite; }
	.ifba-orbit__spin1 { animation: ifba-orbit 26s linear infinite; }
	.ifba-orbit__spin2 { animation: ifba-orbit 38s linear infinite reverse; }
	.ifba-orbit__spin3 { animation: ifba-orbit 52s linear infinite; }
	.ifba-orbit__core { animation: ifba-pulse 4.5s ease-in-out infinite; }

	.ifba-split__inner > * { animation: ifba-rise-in .6s cubic-bezier(.22,.61,.36,1) both; }
	.ifba-split__inner > *:nth-child(1) { animation-delay: .04s; }
	.ifba-split__inner > *:nth-child(2) { animation-delay: .10s; }
	.ifba-split__inner > *:nth-child(3) { animation-delay: .16s; }
	.ifba-split__inner > *:nth-child(4) { animation-delay: .22s; }
	.ifba-split__inner > *:nth-child(5) { animation-delay: .28s; }
	.ifba-split__inner > *:nth-child(6) { animation-delay: .34s; }
	.ifba-split__point { animation: ifba-rise-in .5s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(.24s + var(--i) * .08s); }
	.ifba-split__stat { animation: ifba-rise-in .5s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(.36s + var(--i) * .07s); }
}

/* A learner who chose reduced motion in Display settings (Snippet 91)
   overrides the device preference. */
html[data-ifba-motion="reduced"] .ifba-constellation,
html[data-ifba-motion="reduced"] .ifba-constellation__nodes circle,
html[data-ifba-motion="reduced"] .ifba-constellation__links line,
html[data-ifba-motion="reduced"] .ifba-split__sweep,
html[data-ifba-motion="reduced"] .ifba-blob,
html[data-ifba-motion="reduced"] .ifba-orbit__spin1,
html[data-ifba-motion="reduced"] .ifba-orbit__spin2,
html[data-ifba-motion="reduced"] .ifba-orbit__spin3,
html[data-ifba-motion="reduced"] .ifba-orbit__core,
html[data-ifba-motion="reduced"] .ifba-split__inner > *,
html[data-ifba-motion="reduced"] .ifba-split__point,
html[data-ifba-motion="reduced"] .ifba-split__stat {
	animation: none !important; opacity: 1 !important; transform: none !important;
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
	.ifba-split { grid-template-columns: 1fr; min-height: 0; }
	.ifba-split__video, .ifba-constellation, .ifba-split__sweep { display: none; }
	.ifba-split__brand { padding: clamp(1.75rem, 6vw, 2.5rem); }
	.ifba-split__inner { max-width: none; }
	.ifba-split__points, .ifba-split__footnote { display: none; }
	.ifba-split__lede { margin-bottom: var(--ifba-space-5); }
	.ifba-orbit { right: -30%; opacity: .7; }
}
@media (max-width: 560px) {
	.ifba-split__stats { gap: var(--ifba-space-5); }
	.ifba-split__headline { font-size: 1.45rem; }
	.ifba-split__lede { font-size: var(--ifba-text-sm); }
}
@media print { .ifba-split__brand { display: none; } .ifba-split { border: 0; box-shadow: none; } }

/* The split panel already supplies the page heading and one line of context
   for every view it wraps — sign in, register, reset, new password. Snippet
   20's forms carry their own title and lede for when they are used on their
   own, and inside the panel those only repeat what is directly above them:
   on the reset view, almost word for word. Hidden here, and here only. */
.ifba-split .ifba-auth__title,
.ifba-split .ifba-auth__lede { display: none; }

/* =========================================================================
   SIGN IN & SIGN UP — FORM SIDE
   Styling only; the forms, their fields and their handling are unchanged.
   Scoped to .ifba-split so the design system's .ifba-root link, heading and
   paragraph rules cannot win.
   ====================================================================== */
/* The right-hand column: a soft tinted field with the form centred in it. */
.ifba-split .ifba-split__panel {
	display: flex; align-items: center; justify-content: center; padding: clamp(24px, 5vw, 64px);
	background:
		radial-gradient(90% 70% at 100% 0%, rgba(13,148,136,.09), transparent 60%),
		radial-gradient(70% 60% at 0% 100%, rgba(94,234,212,.09), transparent 60%),
		#F7FAFA;
}
/* The form is the card. (.ifba-split__inner is the left panel's content and keeps its own look.) */
.ifba-split .ifba-split__form {
	width: 100%; max-width: 460px; margin: 0 auto; padding: clamp(26px, 4vw, 40px);
	background: #fff; border: 1px solid rgba(8,49,58,.08); border-radius: 22px;
	box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 30px 60px -40px rgba(8,49,58,.45);
}
.ifba-split .ifba-split__back { color: #5B7076; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.ifba-split .ifba-split__back:hover { color: #0B6F68; text-decoration: none; }

/* sign in / create account: a segmented switch */
.ifba-split .ifba-split__tabs {
	display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 24px; padding: 4px;
	border-radius: 14px; background: #EEF3F3;
}
.ifba-split .ifba-split__tab {
	display: flex; align-items: center; justify-content: center; min-height: 42px; border-radius: 11px;
	color: #5B7076; font-weight: 700; font-size: 14px; text-decoration: none; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.ifba-split .ifba-split__tab:hover { color: #0B3F49; text-decoration: none; }
.ifba-split .ifba-split__tab[aria-current="page"], .ifba-split .ifba-split__tab.is-active {
	background: #fff; color: #0B3F49; box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 6px 16px -10px rgba(8,49,58,.4);
}
.ifba-split .ifba-split__title { margin: 0 0 6px; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -.02em; color: #0B3F49; }
.ifba-split .ifba-split__subtitle { margin: 0 0 24px; color: #5B7076; line-height: 1.55; }

/* fields */
.ifba-split .ifba-field { margin: 0 0 16px; }
.ifba-split .ifba-label { display: block; margin: 0 0 7px; font-size: 13px; font-weight: 700; color: #0B3F49; }
.ifba-split .ifba-input {
	width: 100%; min-height: 48px; padding: 0 14px; border: 1.5px solid #DCE6E6; border-radius: 12px;
	background: #F8FBFB; color: #0B1F24; font: inherit; font-size: 15px;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.ifba-split .ifba-input:hover { border-color: #B9CFCF; }
.ifba-split .ifba-input:focus { outline: none; border-color: #0D9488; background: #fff; box-shadow: 0 0 0 4px rgba(13,148,136,.15); }
.ifba-split .ifba-input::placeholder { color: #5B7076; }
.ifba-split .ifba-field__help { margin: 6px 0 0; font-size: 12.5px; color: #5B7076; }
.ifba-split .ifba-password { position: relative; }
.ifba-split .ifba-password .ifba-input { padding-right: 52px; }
.ifba-split .ifba-password button {
	position: absolute; top: 50%; right: 6px; transform: translateY(-50%); min-width: 40px; height: 36px;
	border: 0; border-radius: 9px; background: transparent; color: #5B7076; cursor: pointer;
}
.ifba-split .ifba-password button:hover { background: #EEF3F3; color: #0B3F49; }
.ifba-split .ifba-password button:focus-visible { outline: 2px solid #0D9488; outline-offset: 1px; }

/* remember me and the forgotten-password link, on one line */
.ifba-split .ifba-auth__remember { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #33474C; }
.ifba-split .ifba-auth__remember input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: #0D9488; }
.ifba-split .ifba-auth__link, .ifba-split .ifba-auth__alt a { color: #0B6F68; font-weight: 700; text-decoration: none; }
.ifba-split .ifba-auth__link:hover, .ifba-split .ifba-auth__alt a:hover { text-decoration: underline; }
.ifba-split .ifba-auth__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* the main button */
.ifba-split .ifba-auth__form .ifba-btn--primary, .ifba-split .ifba-auth__form button[type="submit"] {
	width: 100%; min-height: 50px; justify-content: center; border: 0; border-radius: 12px;
	background: linear-gradient(135deg, #0B6F68, #08564F); color: #fff; font-size: 15.5px; font-weight: 700;
	box-shadow: 0 14px 28px -16px rgba(11,111,104,.8); cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.ifba-split .ifba-auth__form .ifba-btn--primary:hover, .ifba-split .ifba-auth__form button[type="submit"]:hover {
	transform: translateY(-1px); box-shadow: 0 18px 32px -16px rgba(11,111,104,.9); filter: brightness(1.05); color: #fff;
}
.ifba-split .ifba-auth__form .ifba-btn--primary:active, .ifba-split .ifba-auth__form button[type="submit"]:active { transform: translateY(0) scale(.99); }
.ifba-split .ifba-auth__form .ifba-btn--primary:focus-visible, .ifba-split .ifba-auth__form button[type="submit"]:focus-visible { outline: 3px solid #5EEAD4; outline-offset: 3px; }
.ifba-split .ifba-auth__alt { margin: 20px 0 0; text-align: center; font-size: 14px; color: #5B7076; }

/* ---------- motion: opt-in, never load-bearing ---------- */
@keyframes ifba-auth-rise { from { opacity: 0; transform: translateY(16px) scale(.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	.ifba-split .ifba-split__form { animation: ifba-auth-rise .55s cubic-bezier(.22, 1, .36, 1) .08s both; }
	.ifba-split .ifba-auth__form .ifba-btn--primary:hover::after, .ifba-split .ifba-auth__form button[type="submit"]:hover::after { animation: ifba-auth-sheen .9s ease; }
}
/* a light sheen across the main button on hover */
.ifba-split .ifba-auth__form .ifba-btn--primary, .ifba-split .ifba-auth__form button[type="submit"] { position: relative; overflow: hidden; }
.ifba-split .ifba-auth__form .ifba-btn--primary::after, .ifba-split .ifba-auth__form button[type="submit"]::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-18deg);
}
@keyframes ifba-auth-sheen { to { left: 130%; } }
@media (max-width: 560px) {
	.ifba-split .ifba-split__form { border-radius: 18px; padding: 22px; }
}
/* =========================================================================
   DASHBOARD SHELL (Snippet 27)
   ====================================================================== */
.ifba-dash {
	display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: var(--ifba-space-6);
	align-items: start; max-width: var(--ifba-container); margin-inline: auto;
}

/* ---------- sidebar ---------- */
.ifba-dash__side {
	position: sticky; top: var(--ifba-space-6); display: flex; flex-direction: column;
	background: var(--ifba-surface); border: 1px solid var(--ifba-border);
	border-radius: var(--ifba-radius-lg); padding: var(--ifba-space-5); box-shadow: var(--ifba-shadow-sm);
}
.ifba-dash__identity { display: flex; align-items: center; gap: var(--ifba-space-3); padding-bottom: var(--ifba-space-4); border-bottom: 1px solid var(--ifba-border); }
.ifba-dash__avatar { position: relative; flex: none; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.ifba-dash__ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.ifba-dash__ringtrack { fill: none; stroke: var(--ifba-bg-muted); stroke-width: 4; }
.ifba-dash__ringfill { fill: none; stroke: var(--ifba-primary-600); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .8s var(--ifba-ease, ease); }
.ifba-dash__initial {
	width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--ifba-primary-50); color: var(--ifba-primary-800);
	font-weight: 700; font-size: var(--ifba-text-lg);
}
.ifba-dash__who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ifba-dash__name { font-size: var(--ifba-text-sm); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifba-dash__role { font-size: var(--ifba-text-2xs); text-transform: uppercase; letter-spacing: var(--ifba-tracking-wide); color: var(--ifba-primary-700); font-weight: 700; }
.ifba-dash__pct { font-size: var(--ifba-text-xs); color: var(--ifba-text-muted); }

.ifba-dash__navgroup {
	font-size: var(--ifba-text-2xs); text-transform: uppercase; letter-spacing: var(--ifba-tracking-caps);
	color: var(--ifba-text-subtle); font-weight: 700; margin: var(--ifba-space-5) 0 var(--ifba-space-2);
}
.ifba-dash__navlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ifba-root .ifba-dash__navlink {
	display: flex; align-items: center; gap: var(--ifba-space-3);
	padding: 0.55rem 0.7rem; border-radius: var(--ifba-radius-md);
	font-size: var(--ifba-text-sm); font-weight: 550; color: var(--ifba-text-muted);
	text-decoration: none; transition: background .15s ease, color .15s ease;
}
.ifba-root .ifba-dash__navlink:hover { background: var(--ifba-bg-subtle); color: var(--ifba-text); }
.ifba-root .ifba-dash__navlink.is-active { background: var(--ifba-primary-50); color: var(--ifba-primary-800); font-weight: 650; }
.ifba-root .ifba-dash__navlink.is-active svg { color: var(--ifba-primary-600); }

.ifba-root .ifba-dash__adminlink {
	display: flex; align-items: center; gap: var(--ifba-space-2); margin-top: var(--ifba-space-5);
	padding: 0.55rem 0.7rem; border-radius: var(--ifba-radius-md); background: var(--ifba-bg-subtle);
	font-size: var(--ifba-text-sm); font-weight: 600; text-decoration: none; color: var(--ifba-text);
}
.ifba-root .ifba-dash__adminlink:hover { background: var(--ifba-bg-muted); }
.ifba-root .ifba-dash__signout { margin-top: var(--ifba-space-4); font-size: var(--ifba-text-sm); color: var(--ifba-text-muted); text-decoration: none; }
.ifba-root .ifba-dash__signout:hover { color: var(--ifba-danger); }
.ifba-dash__toggle { display: none; }

/* ---------- content ---------- */
.ifba-dash__main { min-width: 0; }
.ifba-dash__main:focus { outline: none; }
.ifba-dash__head { margin-bottom: var(--ifba-space-5); }
.ifba-dash__title { font-size: var(--ifba-text-3xl); margin: 0; letter-spacing: -.02em; }
.ifba-dash__section {
	background: var(--ifba-surface); border: 1px solid var(--ifba-border);
	border-radius: var(--ifba-radius-lg); padding: var(--ifba-space-5); margin-bottom: var(--ifba-space-4);
}
.ifba-dash__sectiontitle { font-size: var(--ifba-text-lg); margin: 0 0 var(--ifba-space-1); }
.ifba-dash__sectionnote { color: var(--ifba-text-muted); font-size: var(--ifba-text-sm); margin: 0 0 var(--ifba-space-4); }
.ifba-dash__list { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--ifba-space-2); font-size: var(--ifba-text-sm); }
.ifba-dash__aside { margin-top: var(--ifba-space-4); font-size: var(--ifba-text-sm); color: var(--ifba-text-muted); }
.ifba-dash__resume { margin: 0 0 var(--ifba-space-5); }

/* The Overview tab reuses Snippet 22's dashboard, which brings its own
   header — redundant inside the shell. */
/* ---------- learner analytics ---------- */
.ifba-dframe { margin-bottom: var(--ifba-space-6); }
.ifba-dframe__intro {
	margin: 0 0 var(--ifba-space-4); font-size: var(--ifba-text-base);
	color: var(--ifba-text-muted); max-width: 70ch; line-height: var(--ifba-leading-relaxed);
}
.ifba-dframe .ifba-dstats { margin-bottom: 0; }
.ifba-dframe:last-child { margin-bottom: 0; }

.ifba-dpanel {
	background: var(--ifba-surface); border: 1px solid var(--ifba-border);
	border-radius: var(--ifba-radius-xl); padding: var(--ifba-space-6);
	margin-bottom: var(--ifba-space-6); box-shadow: var(--ifba-shadow-sm);
}
.ifba-dpanel__grid { display: grid; grid-template-columns: 200px 1fr; gap: var(--ifba-space-6); align-items: center; }
.ifba-dpanel__ring { text-align: center; }
.ifba-dpanel__ringnote { margin: var(--ifba-space-2) 0 0; font-size: var(--ifba-text-sm); color: var(--ifba-text-muted); }
.ifba-dpanel__figures { display: flex; flex-direction: column; gap: var(--ifba-space-5); min-width: 0; }
.ifba-dpanel__trendtitle {
	margin: 0 0 var(--ifba-space-2); font-size: var(--ifba-text-xs); font-weight: 700;
	letter-spacing: var(--ifba-tracking-caps); text-transform: uppercase; color: var(--ifba-text-muted);
}

.ifba-dchart--ring { position: relative; width: 150px; margin: 0 auto; }
.ifba-dchart--ring svg { width: 100%; height: auto; transform: rotate(-90deg); }
.ifba-dchart__track { fill: none; stroke: var(--ifba-bg-muted); stroke-width: 10; }
.ifba-dchart__fill {
	fill: none; stroke: var(--ifba-primary-600); stroke-width: 10; stroke-linecap: round;
	transition: stroke-dashoffset .9s cubic-bezier(.22, 1, .36, 1);
}
.ifba-dchart__centre {
	position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
	display: flex; flex-direction: column; align-items: center; line-height: 1.1;
}
.ifba-dchart__centre b { font-size: 30px; font-weight: 700; color: var(--ifba-text); font-variant-numeric: tabular-nums; }
.ifba-dchart__centre i { font-style: normal; font-size: var(--ifba-text-xs); color: var(--ifba-text-muted); }

.ifba-dchart--spark { width: 100%; }
.ifba-dchart--spark svg { width: 100%; height: 90px; overflow: visible; }
.ifba-dchart__area { fill: var(--ifba-primary-100); opacity: .55; }
.ifba-dchart__line { fill: none; stroke: var(--ifba-primary-600); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ifba-dchart__dot { fill: var(--ifba-surface); stroke: var(--ifba-primary-600); stroke-width: 2; vector-effect: non-scaling-stroke; }

.ifba-dstats { display: flex; flex-wrap: wrap; gap: var(--ifba-space-3); }
.ifba-dstat {
	flex: 1 1 110px; min-width: 0; padding: var(--ifba-space-3) var(--ifba-space-4);
	background: var(--ifba-bg-muted); border-radius: var(--ifba-radius-md);
	display: flex; flex-direction: column; gap: 2px;
}
.ifba-dstat__value { font-size: 20px; font-weight: 700; color: var(--ifba-text); font-variant-numeric: tabular-nums; }
.ifba-dstat__label { font-size: var(--ifba-text-xs); color: var(--ifba-text-muted); }
.ifba-dstat.is-ok .ifba-dstat__value { color: var(--ifba-primary-700); }
.ifba-dstat.is-warm .ifba-dstat__value { color: #B45309; }

.ifba-dbars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ifba-space-3); }
.ifba-dbars li { display: grid; grid-template-columns: minmax(90px, 200px) 1fr auto; align-items: center; gap: var(--ifba-space-3); }
.ifba-dbars__label { font-size: var(--ifba-text-sm); color: var(--ifba-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifba-dbars__track { height: 8px; background: var(--ifba-bg-muted); border-radius: 4px; overflow: hidden; }
.ifba-dbars__fill { display: block; height: 8px; border-radius: 4px; background: var(--ifba-primary-600); }
.ifba-dbars__value { font-size: var(--ifba-text-sm); font-weight: 650; color: var(--ifba-text); font-variant-numeric: tabular-nums; }

/* Panels fade in on switch. Added, never required: without motion the panel
   is simply there. */
@keyframes ifba-dfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	.ifba-danim, .ifba-dash__body > * { animation: ifba-dfade .42s cubic-bezier(.22, 1, .36, 1) both; }
	.ifba-dbars__fill { transform-origin: left; animation: ifba-dgrow .7s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--d, 0s); }
	.ifba-dstat { animation: ifba-dfade .4s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--d, 0s); }
}
@keyframes ifba-dgrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 720px) {
	.ifba-dpanel { padding: var(--ifba-space-4); }
	.ifba-dpanel__grid { grid-template-columns: 1fr; gap: var(--ifba-space-4); }
	.ifba-dchart--ring { width: 130px; }
	.ifba-dbars li { grid-template-columns: 1fr; gap: 4px; }
	.ifba-dbars__value { justify-self: end; margin-top: -22px; }
}

.ifba-dash__body .ifba-dashboard__header { display: none; }

.ifba-dash__requests { display: grid; gap: var(--ifba-space-3); }
.ifba-dash__request {
	display: flex; align-items: center; justify-content: space-between; gap: var(--ifba-space-4);
	padding: var(--ifba-space-4); border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-md);
	background: var(--ifba-bg-subtle); flex-wrap: wrap;
}
.ifba-dash__request p { margin: 4px 0 0; max-width: 52ch; }
.ifba-root .ifba-btn--danger { color: var(--ifba-danger); border-color: var(--ifba-danger-border); }
.ifba-root .ifba-btn--danger:hover { background: var(--ifba-danger-bg); }

.ifba-dash__search { display: flex; gap: var(--ifba-space-2); margin-bottom: var(--ifba-space-4); }
.ifba-root .ifba-dash__search .ifba-input { flex: 1; max-width: 360px; }
.ifba-dash__tablewrap { overflow-x: auto; border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-lg); background: var(--ifba-surface); }
.ifba-dash__table { width: 100%; border-collapse: collapse; font-size: var(--ifba-text-sm); }
.ifba-dash__table th {
	text-align: left; font-size: var(--ifba-text-2xs); text-transform: uppercase;
	letter-spacing: var(--ifba-tracking-wide); color: var(--ifba-text-muted);
	padding: var(--ifba-space-3) var(--ifba-space-4); border-bottom: 1px solid var(--ifba-border); white-space: nowrap;
}
.ifba-dash__table td { padding: var(--ifba-space-3) var(--ifba-space-4); border-bottom: 1px solid var(--ifba-border); vertical-align: middle; }
.ifba-dash__table tr:last-child td { border-bottom: 0; }
.ifba-dash__bar { display: inline-block; width: 110px; height: 7px; background: var(--ifba-bg-muted); border-radius: 99px; overflow: hidden; vertical-align: middle; }
.ifba-dash__bar > span { display: block; height: 100%; background: var(--ifba-primary-600); border-radius: 99px; }
.ifba-dash__barnum { margin-left: var(--ifba-space-2); font-size: var(--ifba-text-xs); color: var(--ifba-text-muted); }

.ifba-dash__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--ifba-space-3); }
.ifba-dash__tile {
	background: var(--ifba-surface); border: 1px solid var(--ifba-border);
	border-radius: var(--ifba-radius-lg); padding: var(--ifba-space-4); display: flex; flex-direction: column; gap: 4px;
}
.ifba-dash__tilevalue { font-size: var(--ifba-text-2xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ifba-dash__tilelabel { font-size: var(--ifba-text-2xs); text-transform: uppercase; letter-spacing: var(--ifba-tracking-wide); color: var(--ifba-text-muted); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.ifba-dash { grid-template-columns: 1fr; gap: var(--ifba-space-4); }
	.ifba-dash__side { position: static; padding: var(--ifba-space-4); }
	.ifba-root .ifba-dash__toggle {
		display: flex; align-items: center; gap: var(--ifba-space-2); width: 100%;
		margin-top: var(--ifba-space-4); padding: 0.6rem 0.8rem; cursor: pointer;
		background: var(--ifba-bg-subtle); border: 1px solid var(--ifba-border);
		border-radius: var(--ifba-radius-md); font-family: var(--ifba-font);
		font-size: var(--ifba-text-sm); font-weight: 600; color: var(--ifba-text);
	}
	.ifba-dash__nav { display: none; }
	.ifba-dash__nav.is-open { display: block; }
	.ifba-dash__title { font-size: var(--ifba-text-2xl); }
}
@media (max-width: 560px) {
	.ifba-dash__request { flex-direction: column; align-items: flex-start; }
	.ifba-dash__search { flex-direction: column; }
	.ifba-root .ifba-dash__search .ifba-input { max-width: none; }
}
@media print {
	.ifba-dash { grid-template-columns: 1fr; }
	.ifba-dash__side { display: none; }
}

/* =========================================================================
   DASHBOARD DESIGN LAYER
   Every tab is filled by a different snippet, each designed as its own
   standalone page. Inside one dashboard that meant twelve visual languages,
   duplicated headings, a sign-in card for the profile, and content sitting
   bare on the page. Everything below is scoped to .ifba-dash, so those
   snippets' own pages are untouched — and no markup changes, so every form
   still saves exactly as before.
   ====================================================================== */

/* ---------- the shell ---------- */
.ifba-dash { grid-template-columns: 272px minmax(0, 1fr); gap: var(--ifba-space-6); padding: var(--ifba-space-6) 0 var(--ifba-space-8); }
.ifba-dash__side {
	top: 96px; padding: var(--ifba-space-5); border-radius: var(--ifba-radius-xl);
	box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -18px rgba(15,23,42,.18);
}
.ifba-dash__navgroup {
	margin: var(--ifba-space-5) 0 var(--ifba-space-2); padding: 0 var(--ifba-space-3);
	font-size: 11px; font-weight: 700; letter-spacing: var(--ifba-tracking-caps); text-transform: uppercase; color: var(--ifba-text-subtle);
}
.ifba-dash__navlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ifba-dash__navlink {
	position: relative; display: flex; align-items: center; gap: 11px;
	padding: 10px var(--ifba-space-3); border-radius: var(--ifba-radius-md);
	color: var(--ifba-text-muted); font-size: var(--ifba-text-sm); font-weight: 550; text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}
.ifba-dash__navlink .ifba-icon { flex: none; opacity: .75; transition: opacity .18s ease; }
.ifba-dash__navlink:hover { background: var(--ifba-bg-muted); color: var(--ifba-text); }
.ifba-dash__navlink:hover .ifba-icon { opacity: 1; }
.ifba-dash__navlink.is-active { background: var(--ifba-primary-50); color: var(--ifba-primary-700); font-weight: 650; }
.ifba-dash__navlink.is-active .ifba-icon { opacity: 1; color: var(--ifba-primary-600); }
/* An indicator bar on the card's own edge marks where you are. */
.ifba-dash__navlink.is-active::before {
	content: ""; position: absolute; left: calc(-1 * var(--ifba-space-5)); top: 8px; bottom: 8px; width: 3px;
	border-radius: 0 3px 3px 0; background: var(--ifba-primary-600);
}
.ifba-dash__navlink:focus-visible { outline: 2px solid var(--ifba-primary-600); outline-offset: 1px; }

/* The main column is a surface too, so the two halves read as one interface. */
.ifba-dash__main {
	background: var(--ifba-surface); border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-xl);
	padding: var(--ifba-space-8) calc(var(--ifba-space-8) + 4px); min-height: 560px;
	box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -18px rgba(15,23,42,.18);
}
.ifba-dash__head { margin: 0; }
.ifba-dash__title { margin: 0; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.02em; color: var(--ifba-text); }
.ifba-dash__body { margin-top: var(--ifba-space-2); }
/* The frame's intro and figures belong to the heading, so the rule sits under them. */
.ifba-dash__body > .ifba-dframe:first-child {
	margin-bottom: var(--ifba-space-6); padding-bottom: var(--ifba-space-6); border-bottom: 1px solid var(--ifba-border);
}
.ifba-dash__body > .ifba-dframe:first-child .ifba-dframe__intro { margin-bottom: var(--ifba-space-4); }
.ifba-dash__body > .ifba-dframe:first-child .ifba-dframe__intro:last-child { margin-bottom: 0; }

/* ---------- one heading per tab ----------
   The shell already names the tab. These are each snippet's own page
   titles, which inside the dashboard only repeat it. */
.ifba-dash__body .ifba-notes-page__head .ifba-eyebrow,
.ifba-dash__body .ifba-notes-page__title,
.ifba-dash__body .ifba-achieve > .ifba-dashboard__subtitle:first-child,
.ifba-dash__body .ifba-certs > .ifba-dashboard__subtitle:first-child,
.ifba-dash__body .ifba-auth__title { display: none; }
.ifba-dash__body .ifba-notes-page__head { justify-content: flex-end; margin-bottom: var(--ifba-space-4); }

/* ---------- standalone page wrappers, flattened ---------- */
.ifba-dash__body .ifba-dashboard,
.ifba-dash__body .ifba-notes-page,
.ifba-dash__body .ifba-auth,
.ifba-dash__body .ifba-auth--profile { max-width: none; margin: 0; }
.ifba-dash__body .ifba-achieve,
.ifba-dash__body .ifba-certs { margin-top: 0; }

/* ---------- settings: profile, notifications ----------
   These were the sign-in card — narrow, centred, framed. Here they are a
   settings panel: full width, fields in two columns, actions set apart. */
.ifba-dash__body .ifba-auth__form {
	margin: 0; padding: var(--ifba-space-6); border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-lg);
	background: var(--ifba-surface); box-shadow: none;
}
.ifba-dash__body .ifba-auth__lede { margin: 0 0 var(--ifba-space-5); color: var(--ifba-text-muted); max-width: 70ch; }
.ifba-dash__body .ifba-auth__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ifba-space-4) var(--ifba-space-5); }
.ifba-dash__body .ifba-field { margin: 0; }
.ifba-dash__body .ifba-label { font-size: var(--ifba-text-sm); font-weight: 600; color: var(--ifba-text); margin-bottom: 6px; }
.ifba-dash__body .ifba-input { width: 100%; }
.ifba-dash__body .ifba-divider { margin: var(--ifba-space-6) 0; border: 0; border-top: 1px solid var(--ifba-border); }
.ifba-dash__body .ifba-auth__row {
	display: flex; align-items: center; justify-content: flex-end; gap: var(--ifba-space-3); flex-wrap: wrap;
	margin-top: var(--ifba-space-6); padding-top: var(--ifba-space-5); border-top: 1px solid var(--ifba-border);
}
.ifba-dash__body .ifba-auth__remember { display: flex; align-items: flex-start; gap: 10px; padding: var(--ifba-space-3) 0; }

/* ---------- one card language ---------- */
.ifba-dash__body .ifba-note-card,
.ifba-dash__body .ifba-cert-card,
.ifba-dash__body .ifba-badge-tile,
.ifba-dash__body .ifba-outline__item,
.ifba-dash__body .ifba-stat {
	border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-lg); background: var(--ifba-surface);
	box-shadow: 0 1px 2px rgba(15,23,42,.04);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ifba-dash__body .ifba-note-card:hover,
.ifba-dash__body .ifba-cert-card:hover,
.ifba-dash__body .ifba-badge-tile:hover {
	border-color: var(--ifba-primary-100); box-shadow: 0 10px 26px -16px rgba(15,23,42,.28);
}
.ifba-dash__body .ifba-cert-card, .ifba-dash__body .ifba-note-card { padding: var(--ifba-space-5); }
.ifba-dash__body .ifba-cert-card + .ifba-cert-card,
.ifba-dash__body .ifba-note-card + .ifba-note-card { margin-top: var(--ifba-space-3); }
.ifba-dash__body .ifba-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--ifba-space-3); }
.ifba-dash__body .ifba-badge-tile { padding: var(--ifba-space-5) var(--ifba-space-4); text-align: center; }
.ifba-dash__body .ifba-outline__item + .ifba-outline__item { margin-top: var(--ifba-space-3); }
.ifba-dash__body .ifba-outline__item { overflow: hidden; }

/* Section headings inside a tab, where a tab has several sections. */
.ifba-dash__body .ifba-dashboard__subtitle {
	margin: var(--ifba-space-8) 0 var(--ifba-space-4); font-size: var(--ifba-text-lg); letter-spacing: -.01em; color: var(--ifba-text);
}

/* ---------- tables, wherever a tab has one ---------- */
.ifba-dash__body table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ifba-text-sm); }
.ifba-dash__body thead th {
	padding: 11px 14px; text-align: left; background: var(--ifba-bg-muted); color: var(--ifba-text-muted);
	font-size: 11px; font-weight: 700; letter-spacing: var(--ifba-tracking-caps); text-transform: uppercase;
	border-bottom: 1px solid var(--ifba-border);
}
.ifba-dash__body thead th:first-child { border-top-left-radius: var(--ifba-radius-md); }
.ifba-dash__body thead th:last-child { border-top-right-radius: var(--ifba-radius-md); }
.ifba-dash__body tbody td { padding: 13px 14px; border-bottom: 1px solid var(--ifba-border); color: var(--ifba-text); vertical-align: middle; }
.ifba-dash__body tbody tr { transition: background-color .15s ease; }
.ifba-dash__body tbody tr:hover { background: var(--ifba-bg-muted); }
/* Wide tables scroll inside their own box rather than stretching the page. */
.ifba-dash__body .ifba-table-wrap, .ifba-dash__body .ifba-results { overflow-x: auto; }

/* ---------- empty states: designed, not bare ---------- */
.ifba-dash__body .ifba-empty {
	padding: var(--ifba-space-8) var(--ifba-space-6); text-align: center;
	border: 1.5px dashed var(--ifba-border); border-radius: var(--ifba-radius-lg); background: var(--ifba-bg-muted);
}

/* ---------- smaller screens ---------- */
@media (max-width: 1024px) {
	.ifba-dash__main { padding: var(--ifba-space-6); }
}
@media (max-width: 860px) {
	.ifba-dash { grid-template-columns: minmax(0, 1fr); padding-top: var(--ifba-space-4); }
	.ifba-dash__side { position: static; }
	.ifba-dash__navlink.is-active::before { display: none; }
	.ifba-dash__main { padding: var(--ifba-space-5); border-radius: var(--ifba-radius-lg); min-height: 0; }
	.ifba-dash__body .ifba-auth__grid { grid-template-columns: 1fr; }
	.ifba-dash__body .ifba-auth__row { justify-content: stretch; }
	.ifba-dash__body .ifba-auth__row .ifba-btn { flex: 1 1 auto; }
}

/* =========================================================================
   DASHBOARD SECTIONS
   ====================================================================== */
.ifba-dash__navlink { gap: 10px; }
.ifba-dash__navicon {
	flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
	border-radius: 9px; background: var(--ifba-bg-muted); color: var(--ifba-text-muted);
	transition: background-color .2s ease, color .2s ease, transform .2s cubic-bezier(.22, 1, .36, 1);
}
.ifba-dash__navlink .ifba-icon { opacity: 1; }
.ifba-dash__navlabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifba-dash__navlink:hover .ifba-dash__navicon { background: var(--ifba-primary-50); color: var(--ifba-primary-700); transform: translateY(-1px); }

/* the section you are on */
.ifba-dash__navlink.is-active {
	background: linear-gradient(100deg, var(--ifba-primary-50), var(--ifba-surface) 92%);
	box-shadow: inset 0 0 0 1px var(--ifba-primary-100);
}
.ifba-dash__navlink.is-active .ifba-dash__navicon {
	background: linear-gradient(135deg, var(--ifba-primary-600), var(--ifba-primary-800)); color: #fff;
}
.ifba-dash__navlink.is-active .ifba-dash__navicon .ifba-icon { color: #fff; }
.ifba-dash__navgroup { display: flex; align-items: center; gap: 10px; }
.ifba-dash__navgroup::after { content: ""; flex: 1; height: 1px; background: var(--ifba-border); }

/* ---------- motion, opt-in ---------- */
@keyframes ifba-dbar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ifba-dpop { from { transform: scale(.82); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
	.ifba-dash__navlink.is-active::before { transform-origin: center; animation: ifba-dbar .45s cubic-bezier(.22, 1, .36, 1) both; }
	.ifba-dash__navlink.is-active .ifba-dash__navicon { animation: ifba-dpop .4s cubic-bezier(.22, 1, .36, 1) both; }
	/* The panel's own blocks arrive in order rather than all at once. */
	.ifba-dash__body > *:nth-child(2) { animation-delay: 60ms; }
	.ifba-dash__body > *:nth-child(3) { animation-delay: 120ms; }
	.ifba-dash__body > *:nth-child(4) { animation-delay: 180ms; }
	.ifba-dash__body > *:nth-child(n+5) { animation-delay: 240ms; }
}

/* ---------- small screens: a strip you can see yourself in ----------
   The list used to hide behind a button, so the section you were on was a tap
   away from being visible. It is now a strip that scrolls sideways, with the
   current section scrolled into view — and it needs no script to be usable. */
@media (max-width: 860px) {
	.ifba-dash .ifba-dash__toggle { display: none; }
	.ifba-dash__side { padding: var(--ifba-space-3); }
	.ifba-dash__nav, .ifba-dash__nav.is-open {
		display: flex; flex-wrap: nowrap; gap: var(--ifba-space-2); overflow-x: auto; overflow-y: hidden;
		margin: var(--ifba-space-3) calc(-1 * var(--ifba-space-3)) 0; padding: 2px var(--ifba-space-3) var(--ifba-space-3);
		scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.ifba-dash__nav::-webkit-scrollbar { display: none; }
	.ifba-dash__navgroup { display: none; }
	.ifba-dash__navlist { display: flex; flex-direction: row; gap: var(--ifba-space-2); margin: 0; padding: 0; }
	.ifba-dash__navlink {
		flex: none; scroll-snap-align: center; min-height: 44px; padding: 8px 14px 8px 8px; border-radius: 999px;
		background: var(--ifba-bg-muted); white-space: nowrap;
	}
	.ifba-dash__navlink.is-active {
		background: linear-gradient(120deg, var(--ifba-primary-700), var(--ifba-primary-600)); color: #fff; box-shadow: none;
	}
	.ifba-dash__navlink.is-active .ifba-dash__navicon { background: rgba(255,255,255,.22); }
	.ifba-dash__navlink.is-active .ifba-dash__navlabel { color: #fff; }
	.ifba-dash__navicon { width: 28px; height: 28px; }
}

/* =========================================================================
   APP SHELL — the dashboard uses the whole window
   A sidebar rail flush to the left edge, running the height of the screen,
   and the rest of the window as a tinted canvas holding white cards.
   ====================================================================== */
.ifba-dash {
	/* Out of the theme's centred column, to the full width of the window.
	   --ifba-sbw is the scrollbar's width, measured by the script, so 100vw
	   never pushes the page sideways where scrollbars take up room. */
	width: calc(100vw - var(--ifba-sbw, 0px)); max-width: none;
	margin-left: calc(50% - 50vw + var(--ifba-sbw, 0px) / 2); margin-right: 0;
	grid-template-columns: 280px minmax(0, 1fr); gap: 0; padding: 0;
	min-height: calc(100vh - var(--ifba-dash-top, 72px)); background: #F4F6F8;
}
.ifba-dash .ifba-dash__side {
	position: sticky; top: var(--ifba-dash-top, 72px); align-self: start;
	height: calc(100vh - var(--ifba-dash-top, 72px)); overflow-y: auto; overscroll-behavior: contain;
	margin: 0; padding: 28px 18px; border: 0; border-right: 1px solid var(--ifba-border); border-radius: 0;
	background: var(--ifba-surface); box-shadow: none;
}
.ifba-dash .ifba-dash__main {
	margin: 0; padding: clamp(28px, 3.6vw, 56px); min-height: 0;
	border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.ifba-dash .ifba-dash__title { font-size: clamp(26px, 2.4vw, 34px); }

/* the section you are on: a filled pill */
.ifba-dash .ifba-dash__navlink.is-active { background: #0B3F49; color: #fff; box-shadow: none; }
.ifba-dash .ifba-dash__navlink.is-active .ifba-dash__navlabel { color: #fff; }
.ifba-dash .ifba-dash__navlink.is-active .ifba-dash__navicon { background: rgba(255,255,255,.14); }
.ifba-dash .ifba-dash__navlink.is-active::before { display: none; }

/* each tab's figures: white stat cards spread across the row */
.ifba-dash .ifba-dash__body > .ifba-dframe:first-child { border-bottom: 0; padding-bottom: 0; }
.ifba-dash .ifba-dstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; }
.ifba-dash .ifba-dstat {
	padding: 22px 24px; border: 1px solid var(--ifba-border); border-radius: 14px; background: var(--ifba-surface);
	box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: transform .2s ease, box-shadow .2s ease;
}
.ifba-dash .ifba-dstat:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -24px rgba(15,23,42,.45); }
.ifba-dash .ifba-dstat__label { font-size: 13px; color: var(--ifba-text-muted); }
.ifba-dash .ifba-dstat__value { font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--ifba-text); }
/* tables sit on a card, not straight on the canvas */
.ifba-dash .ifba-dash__body table { background: var(--ifba-surface); border: 1px solid var(--ifba-border); border-radius: 14px; overflow: hidden; }

/* tablets and phones: the rail becomes a block above the content */
@media (max-width: 860px) {
	.ifba-dash { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.ifba-dash .ifba-dash__side { position: static; height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--ifba-border); padding: 16px; }
	.ifba-dash .ifba-dash__main { padding: 22px 16px 36px; }
}

/* Opening a tab moves focus to its content, so screen readers start there.
   The browser then drew its focus ring around the whole panel — the blue
   border on every tab. A container focused by script needs no ring; links
   and buttons keep theirs. */
.ifba-dash [tabindex="-1"]:focus, .ifba-dash [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

/* Sign out: the account's last action, set apart by a hairline, aligned with
   the links above it, and turning red only when you mean it. */
.ifba-dash .ifba-dash__signout {
	position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 22px 0 0; padding: 10px var(--ifba-space-3);
	border-radius: var(--ifba-radius-md); color: var(--ifba-text-muted); font-size: var(--ifba-text-sm); font-weight: 550; text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}
.ifba-dash .ifba-dash__signout::before { content: ""; position: absolute; top: -12px; left: var(--ifba-space-3); right: var(--ifba-space-3); height: 1px; background: var(--ifba-border); }
.ifba-dash .ifba-dash__signout:hover { background: #FEF2F2; color: #B91C1C; text-decoration: none; }
.ifba-dash .ifba-dash__signout:hover .ifba-dash__navicon { background: #FEE2E2; color: #B91C1C; }
.ifba-dash .ifba-dash__signout:focus-visible { outline: 2px solid #B91C1C; outline-offset: 1px; }
/* =========================================================================
   COURSE LANDING (Snippet 30)
   ====================================================================== */
.ifba-landing { max-width: var(--ifba-container); margin-inline: auto; }
.ifba-landing__hero {
	display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--ifba-space-8);
	align-items: start; padding: var(--ifba-space-8) 0 var(--ifba-space-6);
}
.ifba-landing__title { font-size: var(--ifba-text-4xl); margin: var(--ifba-space-3) 0 var(--ifba-space-3); }
.ifba-landing__subtitle { font-size: var(--ifba-text-lg); color: var(--ifba-text-muted); line-height: var(--ifba-leading-relaxed); max-width: 60ch; }
.ifba-landing__facts {
	list-style: none; margin: var(--ifba-space-5) 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: var(--ifba-space-4);
	font-size: var(--ifba-text-sm); color: var(--ifba-text-muted);
}
.ifba-landing__facts li { display: inline-flex; align-items: center; gap: var(--ifba-space-2); }
.ifba-landing__facts .ifba-icon { color: var(--ifba-primary-600); }

.ifba-landing__cta { position: sticky; top: var(--ifba-space-5); }
.ifba-landing__price {
	font-family: var(--ifba-font-display); font-size: var(--ifba-text-3xl); font-weight: 700;
	color: var(--ifba-n-900); margin-bottom: var(--ifba-space-4);
	display: flex; align-items: baseline; gap: var(--ifba-space-3);
}
.ifba-landing__price span { font-family: var(--ifba-font); font-size: var(--ifba-text-sm); font-weight: 400; color: var(--ifba-text-muted); }
.ifba-landing__includes {
	list-style: none; margin: var(--ifba-space-5) 0 0; padding: 0;
	display: flex; flex-direction: column; gap: var(--ifba-space-2);
	font-size: var(--ifba-text-sm); color: var(--ifba-text-muted);
}
.ifba-landing__includes li { display: flex; align-items: center; gap: var(--ifba-space-2); }
.ifba-landing__includes .ifba-icon { color: var(--ifba-success); }

.ifba-landing__body { max-width: 760px; }
.ifba-landing__section { margin-bottom: var(--ifba-space-10); }
.ifba-landing__section h2 { font-size: var(--ifba-text-2xl); margin-bottom: var(--ifba-space-4); }
.ifba-landing__objectives {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ifba-space-3);
}
.ifba-landing__objectives li {
	display: flex; gap: var(--ifba-space-3); align-items: flex-start;
	padding: var(--ifba-space-3); border: 1px solid var(--ifba-border);
	border-radius: var(--ifba-radius-md); background: var(--ifba-surface);
	font-size: var(--ifba-text-sm); line-height: var(--ifba-leading-snug);
}
.ifba-landing__objectives .ifba-icon { color: var(--ifba-primary-600); flex: none; margin-top: 1px; }

.ifba-blueprint { display: flex; flex-direction: column; gap: var(--ifba-space-3); margin-top: var(--ifba-space-4); }
.ifba-blueprint__row { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 56px; align-items: center; gap: var(--ifba-space-3); font-size: var(--ifba-text-sm); }
.ifba-blueprint__label { color: var(--ifba-n-800); font-weight: 600; }
.ifba-blueprint__track { height: 12px; background: var(--ifba-n-100); border-radius: var(--ifba-radius-full); overflow: hidden; }
.ifba-blueprint__bar { display: block; height: 100%; background: linear-gradient(90deg, var(--ifba-primary-500), var(--ifba-primary-700)); border-radius: inherit; }
.ifba-blueprint__value { text-align: right; font-weight: 700; color: var(--ifba-n-800); font-variant-numeric: tabular-nums; }

@media (max-width: 960px) {
	.ifba-landing__hero { grid-template-columns: 1fr; }
	.ifba-landing__cta { position: static; }
	.ifba-landing__title { font-size: var(--ifba-text-3xl); }
}
@media (max-width: 640px) {
	.ifba-landing__objectives { grid-template-columns: 1fr; }
	.ifba-blueprint__row { grid-template-columns: 1fr 48px; }
	.ifba-blueprint__label { grid-column: 1 / -1; }
}

/* =========================================================================
   COURSE PAGE — DESIGN LAYER
   Styles only; the markup, enrolment and progress logic are unchanged.
   Scoped to .ifba-landing so the design system's .ifba-root heading, link
   and paragraph rules cannot win.
   ====================================================================== */
.ifba-landing .ifba-landing__hero {
	position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 380px); gap: var(--ifba-space-8);
	align-items: start; margin: var(--ifba-space-6) 0 var(--ifba-space-8); padding: clamp(28px, 5vw, 60px);
	border-radius: var(--ifba-radius-xl); color: #fff;
	background:
		radial-gradient(90% 120% at 12% 0%, rgba(94,234,212,.22), transparent 55%),
		radial-gradient(80% 110% at 100% 100%, rgba(13,148,136,.35), transparent 60%),
		linear-gradient(150deg, #0B3F49, #08313A 55%, #062830);
}
.ifba-landing .ifba-landing__hero-main { padding-top: var(--ifba-space-2); }
.ifba-landing .ifba-landing__hero .ifba-eyebrow { color: #5EEAD4; }
.ifba-landing .ifba-landing__title { margin: 0 0 var(--ifba-space-3); font-size: clamp(30px, 4.4vw, 50px); line-height: 1.06; letter-spacing: -.028em; color: #fff; }
.ifba-landing .ifba-landing__subtitle { margin: 0 0 var(--ifba-space-5); max-width: 58ch; font-size: var(--ifba-text-lg); line-height: 1.6; color: rgba(255,255,255,.8); }
.ifba-landing .ifba-landing__facts { display: flex; flex-wrap: wrap; gap: var(--ifba-space-2); margin: 0; padding: 0; list-style: none; }
.ifba-landing .ifba-landing__facts li {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: var(--ifba-text-sm); font-weight: 600;
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff;
}
.ifba-landing .ifba-landing__facts .ifba-icon { color: #5EEAD4; }

/* the enrolment card: lifted off the dark panel, and it follows you down */
.ifba-landing .ifba-landing__cta {
	position: sticky; top: 110px; overflow: hidden; border: 0; border-radius: var(--ifba-radius-xl); background: var(--ifba-surface); color: var(--ifba-text);
	box-shadow: 0 30px 60px -30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
}
.ifba-landing .ifba-landing__cta .ifba-card__media img { display: block; width: 100%; height: auto; }
.ifba-landing .ifba-landing__price { margin: 0 0 var(--ifba-space-4); font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--ifba-text); }
.ifba-landing .ifba-landing__cta .ifba-btn { width: 100%; justify-content: center; min-height: 48px; }
.ifba-landing .ifba-landing__includes { display: grid; gap: 10px; margin: var(--ifba-space-5) 0 0; padding: var(--ifba-space-5) 0 0; list-style: none; border-top: 1px solid var(--ifba-border); }
.ifba-landing .ifba-landing__includes li { display: flex; align-items: center; gap: 10px; font-size: var(--ifba-text-sm); color: var(--ifba-text-muted); }
.ifba-landing .ifba-landing__includes .ifba-icon {
	flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--ifba-primary-50); color: var(--ifba-primary-700);
}

/* ---------- sections below ---------- */
.ifba-landing .ifba-landing__section { margin-bottom: var(--ifba-space-8); }
.ifba-landing .ifba-landing__section > h2 { margin: 0 0 var(--ifba-space-4); font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.015em; color: var(--ifba-text); }
.ifba-landing .ifba-landing__objectives { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ifba-space-3); margin: 0; padding: 0; list-style: none; }
.ifba-landing .ifba-landing__objectives li {
	position: relative; padding: var(--ifba-space-4) var(--ifba-space-4) var(--ifba-space-4) 52px; border: 1px solid var(--ifba-border);
	border-radius: var(--ifba-radius-lg); background: var(--ifba-surface); line-height: 1.55; color: var(--ifba-text);
}
.ifba-landing .ifba-landing__objectives li::before {
	content: ""; position: absolute; left: 16px; top: 17px; width: 22px; height: 22px; border-radius: 50%;
	background: var(--ifba-primary-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* the curriculum: each module a card, each lesson a row */
.ifba-landing .ifba-curriculum details {
	margin-bottom: var(--ifba-space-3); border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-lg);
	background: var(--ifba-surface); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease;
}
.ifba-landing .ifba-curriculum details[open] { border-color: var(--ifba-primary-100); box-shadow: 0 16px 36px -26px rgba(15,23,42,.45); }
.ifba-landing .ifba-curriculum summary { display: flex; align-items: center; gap: var(--ifba-space-3); padding: var(--ifba-space-4) var(--ifba-space-5); font-weight: 700; color: var(--ifba-text); cursor: pointer; list-style: none; }
.ifba-landing .ifba-curriculum summary::-webkit-details-marker { display: none; }
.ifba-landing .ifba-curriculum summary::after {
	content: ""; margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--ifba-text-muted); border-bottom: 2px solid var(--ifba-text-muted);
	transform: rotate(45deg); transition: transform .2s ease;
}
.ifba-landing .ifba-curriculum details[open] summary::after { transform: rotate(225deg); }
.ifba-landing .ifba-curriculum summary:hover { background: var(--ifba-bg-muted); }
.ifba-landing .ifba-curriculum summary:focus-visible { outline: 3px solid var(--ifba-primary-600); outline-offset: -3px; }
.ifba-landing .ifba-curriculum li { border-top: 1px solid var(--ifba-border); }
.ifba-landing .ifba-curriculum li a { color: var(--ifba-text); text-decoration: none; }
.ifba-landing .ifba-curriculum li a:hover { color: #0B6F68; text-decoration: none; }

/* ---------- motion: opt-in, never load-bearing ---------- */
@keyframes ifba-land-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	.ifba-landing .ifba-landing__hero-main { animation: ifba-land-rise .6s cubic-bezier(.22, 1, .36, 1) both; }
	.ifba-landing .ifba-landing__cta { animation: ifba-land-rise .6s cubic-bezier(.22, 1, .36, 1) .12s both; }
	.ifba-landing .ifba-landing__section { animation: ifba-land-rise .55s cubic-bezier(.22, 1, .36, 1) .2s both; }
	.ifba-landing .ifba-curriculum summary::after { transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
}

@media (max-width: 960px) {
	.ifba-landing .ifba-landing__hero { grid-template-columns: minmax(0, 1fr); }
	.ifba-landing .ifba-landing__cta { position: static; }
}
/* =========================================================================
   APP SHELL (Snippet 31)
   ====================================================================== */
body.ifba-app-body { margin: 0; background: var(--ifba-bg-subtle); }
.ifba-app { min-height: 100vh; display: flex; flex-direction: column; background: var(--ifba-bg-subtle); }

.ifba-app__bar {
	position: sticky; top: 0; z-index: var(--ifba-z-sticky);
	height: var(--ifba-header-height);
	display: flex; align-items: center; justify-content: space-between; gap: var(--ifba-space-4);
	padding: 0 var(--ifba-space-5);
	background: var(--ifba-surface); border-bottom: 1px solid var(--ifba-border);
	box-shadow: var(--ifba-shadow-xs);
}
.admin-bar .ifba-app__bar { top: 32px; }
@media (max-width: 782px) { .admin-bar .ifba-app__bar { top: 46px; } }
.ifba-app__bar-left, .ifba-app__bar-right { display: flex; align-items: center; gap: var(--ifba-space-3); min-width: 0; }
.ifba-app__brand {
	display: inline-flex; align-items: center; gap: var(--ifba-space-2);
	font-family: var(--ifba-font-display); font-weight: 700; color: var(--ifba-n-900);
	white-space: nowrap; text-decoration: none;
}
.ifba-app__brand .ifba-icon { color: var(--ifba-primary-600); }
.ifba-app__brand:hover { text-decoration: none; color: var(--ifba-primary-700); }
.ifba-root .ifba-app__rail-toggle {
	background: none; border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-sm);
	width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
	color: var(--ifba-n-700); transition: background-color var(--ifba-duration) var(--ifba-ease);
}
.ifba-root .ifba-app__rail-toggle:hover { background: var(--ifba-n-100); }
.ifba-app__bar-progress { display: inline-flex; align-items: center; gap: var(--ifba-space-2); font-size: var(--ifba-text-sm); font-weight: 600; color: var(--ifba-n-700); }

.ifba-app__body { flex: 1; display: flex; min-height: 0; }

/* Rail */
.ifba-rail {
	width: var(--ifba-rail-width); flex: none;
	position: sticky; top: var(--ifba-header-height);
	height: calc(100vh - var(--ifba-header-height));
	overflow-y: auto; overscroll-behavior: contain;
	background: var(--ifba-surface); border-right: 1px solid var(--ifba-border);
	transition: margin-left var(--ifba-duration-slow) var(--ifba-ease), transform var(--ifba-duration-slow) var(--ifba-ease);
}
.admin-bar .ifba-rail { top: calc(var(--ifba-header-height) + 32px); height: calc(100vh - var(--ifba-header-height) - 32px); }
.ifba-app.rail-collapsed .ifba-rail { margin-left: calc(-1 * var(--ifba-rail-width)); }

.ifba-rail__head { padding: var(--ifba-space-5); border-bottom: 1px solid var(--ifba-border); }
.ifba-rail__course {
	display: block; font-family: var(--ifba-font-display); font-weight: 700;
	color: var(--ifba-n-900); font-size: var(--ifba-text-base); line-height: var(--ifba-leading-snug);
	margin-bottom: var(--ifba-space-3);
}
.ifba-rail__course:hover { color: var(--ifba-primary-700); text-decoration: none; }
.ifba-rail__meta { display: block; margin-top: var(--ifba-space-2); font-size: var(--ifba-text-xs); color: var(--ifba-text-muted); }

.ifba-rail__nav { padding: var(--ifba-space-2) 0 var(--ifba-space-8); }
.ifba-rail__module { border-bottom: 1px solid var(--ifba-border); }
.ifba-root .ifba-rail__module-btn {
	display: grid; grid-template-columns: 24px 1fr auto auto; align-items: center; gap: var(--ifba-space-2);
	padding: var(--ifba-space-3) var(--ifba-space-4); font-size: var(--ifba-text-sm);
}
.ifba-rail__module.is-active .ifba-rail__module-btn { color: var(--ifba-primary-800); }
.ifba-rail__module-index {
	width: 24px; height: 24px; border-radius: var(--ifba-radius-sm);
	background: var(--ifba-n-100); color: var(--ifba-n-600);
	display: grid; place-items: center; font-size: var(--ifba-text-2xs); font-weight: 700;
}
.ifba-rail__module.is-active .ifba-rail__module-index { background: var(--ifba-primary-600); color: var(--ifba-on-primary); }
.ifba-rail__module-title { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifba-rail__module-count { font-size: var(--ifba-text-2xs); color: var(--ifba-text-subtle); font-variant-numeric: tabular-nums; }
.ifba-rail__lessons { padding: 0 var(--ifba-space-2) var(--ifba-space-2); }
.ifba-rail__lesson {
	display: grid; grid-template-columns: 18px 16px 1fr auto; align-items: center; gap: var(--ifba-space-2);
	padding: var(--ifba-space-2) var(--ifba-space-3); border-radius: var(--ifba-radius-sm);
	font-size: var(--ifba-text-sm); color: var(--ifba-n-700); text-decoration: none;
	transition: background-color var(--ifba-duration-fast) var(--ifba-ease);
}
a.ifba-rail__lesson:hover { background: var(--ifba-n-100); text-decoration: none; color: var(--ifba-n-900); }
.ifba-rail__lesson.is-current { background: var(--ifba-primary-50); color: var(--ifba-primary-900); font-weight: 600; }
.ifba-rail__lesson.is-locked { color: var(--ifba-text-subtle); cursor: default; }
.ifba-rail__lesson.is-completed .ifba-rail__lesson-title { color: var(--ifba-text-muted); }
.ifba-rail__lesson.is-current.is-completed .ifba-rail__lesson-title { color: var(--ifba-primary-900); }
.ifba-rail__state {
	width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ifba-border-strong);
	display: grid; place-items: center; background: var(--ifba-surface);
}
.ifba-rail__lesson.is-in-progress .ifba-rail__state { border-color: var(--ifba-primary-500); box-shadow: inset 0 0 0 2px var(--ifba-primary-100); }
.ifba-rail__state--done { background: var(--ifba-success); border-color: var(--ifba-success); color: #fff; }
.ifba-rail__state--locked { border-color: var(--ifba-border); background: var(--ifba-bg-muted); color: var(--ifba-text-subtle); }
.ifba-rail__lesson-icon { color: var(--ifba-text-subtle); display: inline-flex; }
.ifba-rail__lesson-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifba-rail__lesson-time { font-size: var(--ifba-text-2xs); color: var(--ifba-text-subtle); }

/* Stage */
.ifba-stage { flex: 1; min-width: 0; }
.ifba-stage__inner { max-width: 960px; margin: 0 auto; padding: var(--ifba-space-8) var(--ifba-space-6) var(--ifba-space-12); }
.ifba-stage__content { margin-top: var(--ifba-space-2); }
.ifba-stage__footer {
	display: flex; align-items: center; justify-content: space-between; gap: var(--ifba-space-3);
	margin-top: var(--ifba-space-10); padding-top: var(--ifba-space-6);
	border-top: 1px solid var(--ifba-border); flex-wrap: wrap;
}

/* Course page inside the shell */
.ifba-app__page { flex: 1; padding: var(--ifba-space-6) 0 var(--ifba-space-12); }

/* Mobile: rail becomes a drawer */
.ifba-app__scrim {
	display: none; position: fixed; inset: 0; z-index: calc(var(--ifba-z-rail) - 1);
	background: rgba(2, 6, 23, 0.45);
}
@media (max-width: 960px) {
	.ifba-rail {
		position: fixed; left: 0; top: var(--ifba-header-height); z-index: var(--ifba-z-rail);
		height: calc(100vh - var(--ifba-header-height));
		transform: translateX(-100%); margin-left: 0 !important;
		box-shadow: var(--ifba-shadow-lg);
	}
	.ifba-app.rail-open .ifba-rail { transform: translateX(0); }
	.ifba-app.rail-open .ifba-app__scrim { display: block; }
	.ifba-stage__inner { padding: var(--ifba-space-5) var(--ifba-space-4) var(--ifba-space-10); }
	.ifba-app__bar-progress span { display: none; }
	.ifba-app__bar .ifba-btn span { display: none; }
}
/* =========================================================================
   PLAYER NAVIGATION (Snippet 32)
   ====================================================================== */
.ifba-player-nav__centre { display: flex; flex-direction: column; align-items: center; gap: var(--ifba-space-2); }
.ifba-player-nav__position { font-size: var(--ifba-text-xs); color: var(--ifba-text-subtle); }
.ifba-player-nav__spacer { min-width: 96px; }
.ifba-player-nav .ifba-lesson-view__footer { margin: 0; padding: 0; border: 0; }

.ifba-root .ifba-btn.is-pulse { animation: ifba-pulse 1.4s var(--ifba-ease) 2; }
@keyframes ifba-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(15, 118, 110, 0); }
	50% { box-shadow: 0 0 0 6px var(--ifba-primary-200); }
}

.ifba-upnext {
	display: flex; align-items: center; justify-content: space-between; gap: var(--ifba-space-4);
	margin-top: var(--ifba-space-5); padding: var(--ifba-space-5);
	background: linear-gradient(120deg, var(--ifba-primary-50), var(--ifba-surface));
	border: 1px solid var(--ifba-primary-200); border-radius: var(--ifba-radius-lg);
	animation: ifba-modal-in var(--ifba-duration-slow) var(--ifba-ease-out);
}
.ifba-upnext[hidden] { display: none; }
.ifba-upnext__body { display: flex; flex-direction: column; gap: var(--ifba-space-1); min-width: 0; }
.ifba-upnext__title { font-size: var(--ifba-text-lg); color: var(--ifba-n-900); }

@media (max-width: 640px) {
	.ifba-player-nav__label { display: none; }
	.ifba-player-nav__spacer { min-width: 44px; }
	.ifba-upnext { flex-direction: column; align-items: stretch; }
}
.ifba-home{--ifh-display:"Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--ifh-body:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}
/* =========================================================================
   HOMEPAGE (Snippet 33)
   ====================================================================== */
.ifba-home {
	--ifh-ink: #08313A; --ifh-primary: #0D9488; --ifh-light: #5EEAD4;
	--ifh-amber: #F59E0B; --ifh-paper: #F7FAFA; --ifh-white: #FFFFFF;
	/* A deeper teal for text on the pale backgrounds. The brand teal measures
	   3.57:1 on #F7FAFA, under the 4.5:1 floor; this one is 5.74:1. */
	--ifh-primary-deep: #0B6F68;
	--ifh-line: #E2ECEB; --ifh-muted: #5B7076;
	--ifh-ease: cubic-bezier(.22, 1, .36, 1);
	--ifh-shadow: 0 1px 2px rgba(8,49,58,.04), 0 12px 32px -12px rgba(8,49,58,.12);
	font-family: var(--ifh-body); color: var(--ifh-ink); line-height: 1.65;
	font-size: 17px; -webkit-font-smoothing: antialiased;
}
.ifba-home *, .ifba-home *::before, .ifba-home *::after { box-sizing: border-box; }
.ifh-wrap { max-width: 1240px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.ifh-sec { padding: 120px 0; position: relative; }
.ifba-home h1, .ifba-home h2, .ifba-home h3 { font-family: var(--ifh-display); line-height: 1.15; letter-spacing: -.02em; margin: 0; color: var(--ifh-ink); }
/* Scoped, because .ifba-home h2 is (0,1,1) and a lone .ifh-h2 is (0,1,0) —
   the base rule's margin:0 was winning and every section heading sat flat
   against the line beneath it. */
.ifba-home .ifh-h2 { font-size: clamp(28px, 3.6vw, 44px); margin-bottom: 22px; }
/* .ifba-home h2 is (0,1,1) and out-specifies a lone class, so a plain
   .ifh-h2--light lost and every heading on a dark band rendered ink on ink.
   Scoping the modifier puts it back in front. */
.ifba-home .ifh-h2--light, .ifba-home .ifh-lede--light { color: #fff; }
.ifh-p { color: var(--ifh-muted); margin: 0 0 16px; }
.ifh-lede { color: var(--ifh-muted); font-size: 19px; max-width: 62ch; margin: 0 0 8px; }
/* A lede is a subtitle of the heading above it, so the pair should read as
   one unit. It was sitting 22px from its heading and 8px from the content
   below — closer to what it does not belong to. Pulling it up and pushing
   the content down fixes the grouping. Only applies where a lede actually
   follows a heading, so lede-less sections keep their 22px. */
.ifba-home .ifh-h2 + .ifh-lede { margin-top: -10px; margin-bottom: 44px; }
/* text-align centres the words inside the box; auto margins centre the box
   itself. Without these the lede sat left of the heading above it. */
.ifh-cert .ifh-lede, .ifh-final .ifh-lede, .ifm-cta .ifh-lede { margin-left: auto; margin-right: auto; }
.ifba-home .ifh-lede--light { color: rgba(255,255,255,.82); }
.ifba-home .ifh-link { color: var(--ifh-primary); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.ifh-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; pointer-events: none; }
.ifh-progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ifh-primary), var(--ifh-light)); }

/* buttons */
.ifba-home .ifh-btn {
	display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px;
	border-radius: 14px; font-family: var(--ifh-body); font-weight: 600; font-size: 16px;
	text-decoration: none; border: 1px solid transparent; cursor: pointer;
	transition: transform .18s var(--ifh-ease), box-shadow .18s var(--ifh-ease), background .18s var(--ifh-ease);
	min-height: 48px;
}
.ifba-home .ifh-btn--primary { background: var(--ifh-primary); color: #fff; box-shadow: 0 10px 28px -12px rgba(13,148,136,.7); }
.ifba-home .ifh-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(13,148,136,.85); }
.ifba-home .ifh-btn--ghost { background: transparent; color: var(--ifh-ink); border-color: var(--ifh-line); }
.ifba-home .ifh-btn--light { color: #fff; border-color: rgba(255,255,255,.34); }
.ifba-home .ifh-btn--brand {
	color: var(--ifh-primary-deep); border-color: rgba(13,148,136,.4); background: transparent;
}
.ifba-home .ifh-btn--brand:hover { background: rgba(13,148,136,.09); border-color: var(--ifh-primary-deep); color: var(--ifh-primary-deep); }

.ifba-home .ifh-btn--light:hover { background: rgba(255,255,255,.1); }
.ifba-home .ifh-btn--lg { padding: 18px 34px; font-size: 17px; }
.ifh-btn__play { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid currentColor; }
.ifh-btn__play .ifba-home__icon, .ifh-btn__play .ifh-home__icon { width: 15px; height: 15px; }
.ifba-home__icon { width: 20px; height: 20px; flex: none; }

/* hero */
.ifh-hero { position: relative; min-height: 92vh; display: flex; align-items: center; background: var(--ifh-ink); color: #fff; overflow: hidden; padding: 120px 0 90px; }
.ifh-hero__bg { position: absolute; inset: 0; overflow: hidden; }
.ifh-hero__poster, .ifh-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.ifh-hero__fade { position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to bottom, transparent, var(--ifh-ink)); }
.ifh-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .42; }
.ifh-blob--1 { width: 46vw; height: 46vw; left: -12%; top: -18%; background: var(--ifh-primary); }
.ifh-blob--2 { width: 38vw; height: 38vw; right: -10%; bottom: -14%; background: var(--ifh-light); opacity: .26; }
.ifh-grid {
	position: absolute; inset: 0; opacity: .04;
	background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
	background-size: 54px 54px;
}
.ifh-hero__inner { position: relative; display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; width: 100%; }
.ifh-hero__copy { max-width: 46rem; }
.ifh-pill {
	display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px;
	background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
	font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 24px; color: #fff;
}
.ifh-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ifh-light); }
.ifba-home .ifh-hero__title { font-size: clamp(36px, 5.4vw, 64px); font-weight: 700; color: #fff; margin-bottom: 22px; }
.ifh-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.ifh-word > span { display: inline-block; }
.ifh-hero__lede { color: rgba(255,255,255,.8); font-size: 19px; max-width: 54ch; margin: 0 0 32px; }
.ifh-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.ifh-hero__stats { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.ifh-hero__stats li { display: flex; flex-direction: column; }
.ifh-hero__stats strong { font-family: var(--ifh-display); font-size: 26px; font-variant-numeric: tabular-nums; }
.ifh-hero__stats span { font-size: 13px; color: rgba(255,255,255,.66); }
.ifh-scroll { position: absolute; left: 50%; bottom: 26px; width: 1px; height: 46px; background: rgba(255,255,255,.22); }
.ifh-scroll > span { position: absolute; top: 0; left: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--ifh-light); }

/* preview card */
.ifh-hero__card { perspective: 1000px; }
.ifh-card {
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 20px;
	padding: 22px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
	box-shadow: 0 30px 60px -24px rgba(0,0,0,.55); transform: rotate(-6deg);
}
.ifh-card__head { display: flex; align-items: center; gap: 7px; margin-bottom: 18px; }
.ifh-card__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.3); }
.ifh-card__title { margin-left: 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.ifh-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ifh-card__list li { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; }
.ifh-card__name { font-size: 14px; font-weight: 600; color: #fff; }
.ifh-card__meta { font-size: 12px; color: rgba(255,255,255,.55); }
.ifh-ring { width: 38px; height: 38px; }
.ifh-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ifh-ring__t { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 3; }
.ifh-ring__f { fill: none; stroke: var(--ifh-light); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 94.2; stroke-dashoffset: calc(94.2 - (94.2 * var(--p)) / 100); }

/* credibility */
.ifh-cred { background: var(--ifh-paper); border-top: 1px solid var(--ifh-line); border-bottom: 1px solid var(--ifh-line); padding: 26px 0; }
.ifba-home .ifh-cred p { margin: 0; text-align: center; color: var(--ifh-muted); font-size: 15px; }

/* why */
.ifh-why__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.ifh-eyebrow {
	margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: var(--ifh-primary);
}
.ifba-home .ifh-why__lead {
	/* Scoped: as an <h3> the base rule's margin:0 would otherwise win.
	   The photo's offset frame extends 16px below its box, so this clears
	   that as well as leaving a gap. */
	margin: 80px 0 26px; font-family: var(--ifh-display); font-size: clamp(18px, 2vw, 22px);
	font-weight: 600; color: var(--ifh-ink);
}
.ifh-why__outcomes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ifh-outcome {
	background: var(--ifh-white); border: 1px solid var(--ifh-line); border-radius: 18px; padding: 24px;
	box-shadow: var(--ifh-shadow);
	transition: transform .28s var(--ifh-ease), border-color .28s var(--ifh-ease), box-shadow .28s var(--ifh-ease);
}
.ifh-outcome:hover { transform: translateY(-5px); border-color: var(--ifh-primary); box-shadow: 0 22px 44px -22px rgba(8,49,58,.3); }
.ifh-outcome__icon {
	display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
	border-radius: 13px; background: rgba(13,148,136,.1); color: var(--ifh-primary); margin-bottom: 15px;
}
.ifba-home .ifh-outcome__title { font-size: 17px; margin-bottom: 7px; }
.ifh-outcome__note { margin: 0; font-size: 14.5px; color: var(--ifh-muted); }
.ifh-why__media { position: relative; }
.ifh-why__media::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 2px solid var(--ifh-primary); border-radius: 20px; opacity: .45; }
.ifba-home .ifh-home__img, .ifba-home__img { position: relative; display: block; width: 100%; height: auto; border-radius: 20px; overflow: hidden; }
.ifba-home__ph { line-height: 0; }
.ifba-home__ph svg { display: block; width: 100%; height: auto; }
.ifh-outcomes { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ifh-outcomes--stack { grid-template-columns: 1fr; }
.ifh-outcomes li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 500; }
.ifh-outcomes .ifba-home__icon { color: var(--ifh-primary); margin-top: 2px; }

/* the AMP framework */
.ifh-amp { margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--ifh-line); }
.ifh-amp__lead {
	margin: 0 0 24px; font-size: 13px; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--ifh-primary);
}
.ifh-amp__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ifh-amp__stage {
	position: relative; padding: 26px 26px 26px 78px;
	background: var(--ifh-white); border: 1px solid var(--ifh-line); border-radius: 20px;
	box-shadow: var(--ifh-shadow);
	transition: transform .28s var(--ifh-ease), border-color .28s var(--ifh-ease);
}
.ifh-amp__stage:hover { transform: translateY(-4px); border-color: var(--ifh-primary); }
/* The connector reads as a sequence rather than three unrelated cards. */
.ifh-amp__stage:not(:last-child)::after {
	content: ""; position: absolute; top: 50%; right: -22px; width: 22px; height: 1px;
	background: var(--ifh-line);
}
.ifh-amp__letter {
	position: absolute; left: 26px; top: 26px;
	width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
	border-radius: 12px; background: linear-gradient(135deg, var(--ifh-ink), var(--ifh-primary));
	color: #fff; font-family: var(--ifh-display); font-size: 17px; font-weight: 700;
}
.ifba-home .ifh-amp__title { font-size: 19px; margin: 0 0 7px; }
.ifh-amp__body { margin: 0; font-size: 14.5px; color: var(--ifh-muted); }

/* structure */
.ifh-struct { background: var(--ifh-ink); color: #fff; overflow: hidden; }
.ifh-struct__glyphs {
	position: absolute; right: -4%; top: 6%; font-family: var(--ifh-display); font-weight: 700;
	font-size: 17vw; letter-spacing: .14em; color: #fff; opacity: .018; pointer-events: none; white-space: nowrap;
}
.ifh-struct__intro { max-width: 60ch; margin-bottom: 42px; }
.ifh-struct__intro .ifh-lede { margin: 0; }
.ifh-struct__grid { display: grid; grid-template-columns: 340px 1fr; gap: 44px; position: relative; align-items: start; }

/* rail — a row per domain rather than a line of text */
.ifh-struct__rail { position: relative; display: flex; flex-direction: column; gap: 8px; }
.ifba-home .ifh-tab {
	position: relative; display: flex; align-items: center; gap: 14px; width: 100%;
	text-align: left; cursor: pointer; padding: 15px 16px;
	background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
	font-family: var(--ifh-body); color: rgba(255,255,255,.66);
	transition: background .26s var(--ifh-ease), border-color .26s var(--ifh-ease), color .26s var(--ifh-ease), transform .26s var(--ifh-ease);
}
.ifba-home .ifh-tab:hover { background: rgba(255,255,255,.07); color: #fff; }
.ifba-home .ifh-tab.is-active {
	background: linear-gradient(135deg, rgba(13,148,136,.26), rgba(94,234,212,.10));
	border-color: rgba(94,234,212,.42); color: #fff; transform: translateX(4px);
}
.ifh-tab__letter {
	flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
	border-radius: 12px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.72);
	font-family: var(--ifh-display); font-size: 17px; font-weight: 700;
	transition: background .26s var(--ifh-ease), color .26s var(--ifh-ease);
}
.ifh-tab.is-active .ifh-tab__letter { background: var(--ifh-light); color: var(--ifh-ink); }
.ifh-tab__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ifh-tab__name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.ifh-tab__meta { font-size: 12.5px; color: rgba(255,255,255,.46); }
.ifh-tab__chev {
	flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(-45deg); opacity: 0; transition: opacity .26s var(--ifh-ease), transform .26s var(--ifh-ease);
}
.ifh-tab.is-active .ifh-tab__chev { opacity: .8; transform: rotate(-45deg) translate(2px, -2px); }
.ifh-tab__marker { display: none; }

/* panel — fills the column instead of trailing off */
.ifh-panel { display: none; position: relative; }
.ifh-panel.is-active { display: block; }
.ifh-struct__panels {
	position: relative; min-height: 340px; padding: 34px 38px;
	background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 22px;
	overflow: hidden;
}
.ifh-panel__mark {
	position: absolute; right: -6px; top: -34px; font-family: var(--ifh-display); font-weight: 700;
	font-size: 190px; line-height: 1; color: #fff; opacity: .04; pointer-events: none;
}
.ifh-panel__head { position: relative; max-width: 56ch; }
.ifba-home .ifh-panel__title { font-size: clamp(22px, 2.6vw, 30px); color: #fff; margin-bottom: 10px; }
.ifh-panel__lede { color: rgba(255,255,255,.72); margin: 0 0 26px; font-size: 16px; }
.ifh-panel__list {
	position: relative; list-style: none; margin: 0 0 28px; padding: 0;
	display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px;
}
.ifh-panel__list li { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.88); font-size: 15px; }
/* Numbered rather than ticked. A row of checkmarks beside lessons nobody has
   started reads as progress that has not happened; a number reads as order. */
.ifh-panel__num {
	flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
	border-radius: 8px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
	color: var(--ifh-light); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ifh-panel__lesson { min-width: 0; }
.ifh-panel__list .ifba-home__icon { color: var(--ifh-light); margin-top: 2px; flex: none; }
.ifh-panel__stats {
	position: relative; display: flex; flex-wrap: wrap; gap: 32px;
	padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1);
}
.ifh-panel__stat { display: flex; flex-direction: column; font-size: 12.5px; color: rgba(255,255,255,.5); }
.ifh-panel__stat b {
	font-family: var(--ifh-display); font-size: 26px; font-weight: 700; color: #fff;
	line-height: 1.1; font-variant-numeric: tabular-nums;
}
.ifh-struct .ifh-link { position: relative; display: inline-block; margin-top: 22px; color: var(--ifh-light); }

/* full-bleed video band.

   These rules were previously missing entirely: only the small-screen
   overrides made it into the stylesheet, so above 860px the band had no
   background, no wash and no layout — the video sat at its natural size on a
   white page with the copy invisible on top of it. */
.ifh-band {
	position: relative; overflow: hidden;
	background: var(--ifh-ink); color: #fff;
	padding: 128px 0; text-align: center;
}
.ifh-band__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
.ifh-band__video {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	object-fit: cover; opacity: .55;
}
/* The wash is what makes the copy readable over moving footage — without it
   the contrast depends on whatever frame is showing. */
.ifh-band__wash {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	background: linear-gradient(120deg, rgba(8,49,58,.93) 0%, rgba(8,49,58,.74) 46%, rgba(13,148,136,.60) 100%);
}
.ifh-band__inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.ifh-band__inner .ifh-h2 { margin-bottom: 14px; }
.ifh-band__inner .ifh-lede { margin: 0 auto 22px; text-align: center; max-width: 60ch; }
.ifh-band__inner .ifh-pill { margin-bottom: 20px; }

/* steps */
.ifh-steps { background: var(--ifh-paper); }
.ifh-steps__lede { margin: 0 0 48px; }
.ifh-steps__more { margin: 34px 0 0; text-align: center; }
.ifh-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; position: relative; }
.ifh-steps__line { position: absolute; top: 27px; left: 10%; right: 10%; height: 2px; background: var(--ifh-line); border-radius: 2px; }
.ifh-steps__line > span {
	position: relative; display: block; height: 100%; width: var(--fill, 0%); border-radius: 2px;
	background: linear-gradient(90deg, var(--ifh-primary), var(--ifh-light));
	transition: width .6s cubic-bezier(.22, 1, .36, 1);
}
/* A head on the fill, so the eye can see where the sequence has reached. */
.ifh-steps__line > span::after {
	content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
	border-radius: 50%; background: var(--ifh-light);
	box-shadow: 0 0 0 4px rgba(94,234,212,.28); opacity: 0;
	transition: opacity .4s var(--ifh-ease);
}
.ifh-steps__line > span[style*="--fill"]::after { opacity: 1; }
.ifh-step { position: relative; display: flex; flex-direction: column; align-items: center; }
.ifh-step__node {
	position: relative; z-index: 1; flex: none;
	display: flex; align-items: center; justify-content: center; width: 54px; height: 54px;
	border-radius: 50%; border: 2px solid var(--ifh-line); background: var(--ifh-paper);
	font-family: var(--ifh-display); font-size: 18px; font-weight: 700; color: var(--ifh-muted);
	margin-bottom: 20px;
	transition: background .34s var(--ifh-ease), border-color .34s var(--ifh-ease), color .34s var(--ifh-ease), transform .34s var(--ifh-ease), box-shadow .34s var(--ifh-ease);
}
.ifh-step.is-on .ifh-step__node {
	background: var(--ifh-primary); border-color: var(--ifh-primary); color: #fff; transform: scale(1.06);
	box-shadow: 0 10px 24px -10px rgba(13,148,136,.7);
}
.ifh-step__card {
	width: 100%; flex: 1; display: flex; flex-direction: column;
	background: var(--ifh-white); border: 1px solid var(--ifh-line); border-radius: 18px;
	overflow: hidden; box-shadow: var(--ifh-shadow);
	transition: transform .34s var(--ifh-ease), border-color .34s var(--ifh-ease), box-shadow .34s var(--ifh-ease);
}
.ifh-step.is-on .ifh-step__card { border-color: rgba(13,148,136,.4); box-shadow: 0 20px 38px -22px rgba(8,49,58,.34); }
.ifh-step__card:hover { transform: translateY(-4px); }
.ifh-step__text { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.ifba-home .ifh-step__title { font-size: 16.5px; margin-bottom: 7px; }
.ifh-step__body { font-size: 14px; color: var(--ifh-muted); margin: 0 0 14px; flex: 1; }
.ifh-step__meta {
	align-self: flex-start; padding: 5px 11px; border-radius: 999px;
	background: rgba(13,148,136,.09); color: var(--ifh-primary);
	font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
}

/* per-step sketches */
/* A fixed media height, not height:auto. Auto ties the sketch to the column
   width, so the five cards would get different image heights and their
   titles would not line up — and at full width the sketch balloons. */
.ifh-art { display: block; height: 118px; padding: 10px 0; background: linear-gradient(160deg, #EDF5F4, #E2EFEE); border-bottom: 1px solid var(--ifh-line); }
.ifh-art svg { display: block; width: 100%; height: 100%; }
.ifh-art__pane { fill: #fff; stroke: var(--ifh-line); stroke-width: 1.5; }
.ifh-art__paper { fill: #FEFDFB; stroke: var(--ifh-primary); stroke-width: 1.5; }
.ifh-art__bar { fill: var(--ifh-line); }
.ifh-art__rail { fill: rgba(13,148,136,.12); }
.ifh-art__row { fill: #fff; stroke: var(--ifh-line); stroke-width: 1.2; }
.ifh-art__row--on { fill: rgba(13,148,136,.12); stroke: var(--ifh-primary); }
.ifh-art__go { fill: var(--ifh-primary); }
.ifh-art__tick { fill: none; stroke: var(--ifh-primary); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ifh-art__ringtrack { fill: none; stroke: var(--ifh-line); stroke-width: 5; }
.ifh-art__ring {
	fill: none; stroke: var(--ifh-primary); stroke-width: 5; stroke-linecap: round;
	stroke-dasharray: 107; stroke-dashoffset: 27;
}
.ifh-art__seal { fill: var(--ifh-amber); }


/* features */
.ifh-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ifh-tile {
	background: var(--ifh-white); border: 1px solid var(--ifh-line); border-radius: 20px; padding: 26px;
	box-shadow: var(--ifh-shadow); transition: transform .28s var(--ifh-ease), border-color .28s var(--ifh-ease), box-shadow .28s var(--ifh-ease);
}
.ifh-tile:hover { transform: translateY(-6px); border-color: var(--ifh-primary); box-shadow: 0 22px 44px -20px rgba(8,49,58,.28); }
.ifh-tile--lg { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
.ifh-tile--wide { grid-column: span 2; display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; }
.ifh-tile__icon { display: inline-flex; width: 46px; height: 46px; border-radius: 13px; background: rgba(13,148,136,.1); color: var(--ifh-primary); align-items: center; justify-content: center; margin-bottom: 16px; }
.ifba-home .ifh-tile__title { font-size: 19px; margin-bottom: 8px; }
.ifh-tile__body { color: var(--ifh-muted); font-size: 15px; margin: 0; }
.ifh-chat { margin-top: auto; padding-top: 22px; display: grid; gap: 12px; }
.ifh-chat__q, .ifh-chat__a { margin: 0; font-size: 14.5px; padding: 14px 16px; border-radius: 16px; }
.ifh-chat__q { background: var(--ifh-ink); color: #fff; border-bottom-right-radius: 5px; justify-self: end; max-width: 88%; }
.ifh-chat__a { background: var(--ifh-paper); border: 1px solid var(--ifh-line); border-bottom-left-radius: 5px; max-width: 94%; }
.ifh-chat__cite { display: block; margin-top: 8px; font-size: 12px; color: var(--ifh-primary); font-weight: 600; }
.ifh-verify { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ifh-verify__field {
	display: inline-flex; align-items: center; min-width: 190px; padding: 12px 15px;
	border: 1px solid var(--ifh-line); border-radius: 13px; background: var(--ifh-paper);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; color: var(--ifh-ink);
}
.ifh-verify__caret { width: 2px; height: 17px; background: var(--ifh-primary); margin-left: 3px; }
.ifh-verify__badge {
	display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 999px;
	background: rgba(13,148,136,.12); color: var(--ifh-primary); font-size: 13.5px; font-weight: 700;
}

/* certificate */
.ifh-cert { background: linear-gradient(to bottom, var(--ifh-ink) 58%, var(--ifh-paper) 58%); text-align: center; }
.ifh-cert__stage { position: relative; max-width: 760px; margin: 56px auto 0; perspective: 1200px; }
.ifh-cert__img { box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.ifh-cert__sheen { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; pointer-events: none; }
.ifh-cert__sheen::after { content: ""; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); transform: rotate(18deg); }
.ifh-cert__seal {
	position: absolute; right: -14px; bottom: -14px; width: 76px; height: 76px; border-radius: 50%;
	background: var(--ifh-amber); color: #fff; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 14px 30px -10px rgba(245,158,11,.75);
}
.ifba-home .ifh-cert__points { text-align: center; }
.ifh-cert__points { list-style: none; margin: 52px 0 22px; padding: 0; display: flex; justify-content: center; gap: 34px; flex-wrap: wrap; }
.ifh-cert__points li { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; }
.ifh-cert__points .ifba-home__icon { color: var(--ifh-primary); }
/* text-align is set here rather than inherited from .ifh-cert. Inheritance
   loses to any direct rule, and a block theme styling its own paragraphs
   would silently left-align this. 64ch reads better centred than 70ch. */
.ifba-home .ifh-cert__note {
	color: var(--ifh-muted); font-size: 14px; max-width: 64ch;
	margin: 0 auto 30px; text-align: center;
}
.ifba-home .ifh-cert__verify { margin: 0; text-align: center; }

/* drawn certificate */
.ifh-doc {
	position: relative; width: 100%; padding: 4.4% 5.2%; text-align: center; overflow: hidden;
	border-radius: 14px; color: #123640;
	background: linear-gradient(158deg, #FEFDFB 0%, #F6F2E9 52%, #FBF8F2 100%);
	box-shadow: 0 40px 80px -30px rgba(0,0,0,.62), 0 1px 0 rgba(255,255,255,.8) inset;
}
.ifh-doc__guilloche { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .32; }
.ifh-doc__guilloche ellipse { fill: none; stroke: var(--ifh-primary); stroke-width: .5; opacity: .3; }
.ifh-doc__frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ifh-doc__frame-outer, .ifh-doc__frame-inner { fill: none; stroke: var(--ifh-primary); }
.ifh-doc__frame-outer { stroke-width: 2.5; opacity: .55; }
.ifh-doc__frame-inner { stroke-width: .9; opacity: .38; }
.ifh-doc__body { position: relative; display: flex; flex-direction: column; align-items: center; }
.ifh-doc__org {
	margin: 0; font-size: clamp(9px, 1.05vw, 12px); font-weight: 700;
	letter-spacing: .2em; text-transform: uppercase; color: var(--ifh-primary);
}
.ifh-doc__kind {
	margin: .5em 0 0; font-family: var(--ifh-display); font-size: clamp(17px, 2.6vw, 31px);
	font-weight: 700; letter-spacing: -.01em; color: #0B2B33;
}
.ifh-doc__rule { display: block; width: 92px; height: 2px; margin: .75em 0 1em; background: var(--ifh-amber); border-radius: 2px; }
.ifh-doc__intro { margin: 0; font-size: clamp(9px, 1.15vw, 13px); color: #5B7076; font-style: italic; }
.ifh-doc__name {
	position: relative; margin: .35em 0 .3em; font-family: var(--ifh-display);
	font-size: clamp(20px, 3.4vw, 40px); font-weight: 700; color: #0B2B33; letter-spacing: -.02em;
}
.ifh-doc__name > span { display: inline-block; }
.ifh-doc__course {
	margin: .3em 0 0; font-family: var(--ifh-display); font-size: clamp(12px, 1.7vw, 19px);
	font-weight: 600; color: var(--ifh-primary);
}
.ifh-doc__foot {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 4%;
	width: 100%; margin-top: 6%;
}
.ifh-doc__cell { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
.ifh-doc__cell--sign { flex: 1.3; }
.ifh-doc__label {
	font-size: clamp(7px, .82vw, 9.5px); letter-spacing: .14em; text-transform: uppercase; color: #8296A0;
}
.ifh-doc__value { font-size: clamp(9px, 1.15vw, 13px); font-weight: 650; color: #123640; }
.ifh-doc__signature {
	font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", cursive;
	font-size: clamp(13px, 1.9vw, 22px); color: #123640; line-height: 1;
}
.ifh-doc__sigline { display: block; width: 100%; max-width: 210px; height: 1px; background: #B9C6CC; margin: .45em 0 .35em; }
.ifh-doc__uid {
	margin: 4% 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: clamp(7.5px, .92vw, 11px); letter-spacing: .1em; color: #8296A0;
}
.ifh-doc__seal {
	/* Width and height both set rather than aspect-ratio: a percentage height
	   would resolve against the card's height, and aspect-ratio is missing on
	   the older Android browsers a good share of this audience uses. */
	position: absolute; right: 5%; bottom: 7%;
	/* Plain pixels first so a browser without clamp() still gets a circle
	   rather than a seal shaped by its own text. */
	width: 68px; height: 68px;
	width: clamp(48px, 7.2vw, 88px); height: clamp(48px, 7.2vw, 88px);
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%; color: #fff;
	background: radial-gradient(circle at 34% 30%, #F8C566, var(--ifh-amber) 62%, #C97F06);
	box-shadow: 0 8px 20px -6px rgba(180,110,10,.7), 0 1px 0 rgba(255,255,255,.55) inset;
}
.ifh-doc__seal svg { position: absolute; width: 100%; height: 100%; }
.ifh-doc__seal-ring, .ifh-doc__seal-ring2 { fill: none; stroke: rgba(255,255,255,.62); }
.ifh-doc__seal-ring { stroke-width: 1.6; }
.ifh-doc__seal-ring2 { stroke-width: .8; stroke-dasharray: 3 5; }
.ifh-doc__seal-text {
	position: relative; font-family: var(--ifh-display); font-weight: 700;
	font-size: clamp(9px, 1.5vw, 17px); letter-spacing: .04em;
}
.ifh-doc__specimen {
	position: absolute; left: 5%; bottom: 7%;
	font-size: clamp(7px, .85vw, 10px); letter-spacing: .26em; text-transform: uppercase;
	color: #A9B7BE;
}

/* numbers */
.ifh-nums { background: rgba(13,148,136,.08); border-top: 1px solid var(--ifh-line); border-bottom: 1px solid var(--ifh-line); padding: 56px 0; }
.ifh-nums__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.ifh-nums__list li { border-left: 1px solid var(--ifh-line); }
.ifh-nums__list li:first-child { border-left: 0; }
.ifh-nums__list strong { display: block; font-family: var(--ifh-display); font-size: clamp(30px, 4vw, 46px); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ifh-ink); }
.ifh-nums__list span { font-size: 14px; color: var(--ifh-muted); }

/* audience — on paper so it stays distinct from the white FAQ that now
   follows it, and so its white cards stand off the background. */
.ifh-aud { background: var(--ifh-paper); }
/* audience */
.ifh-aud__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ifh-aud__card { background: var(--ifh-white); border: 1px solid var(--ifh-line); border-radius: 20px; overflow: hidden; box-shadow: var(--ifh-shadow); transition: transform .28s var(--ifh-ease), box-shadow .28s var(--ifh-ease); }
.ifh-aud__card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -22px rgba(8,49,58,.3); }
.ifh-aud__media .ifba-home__img { border-radius: 0; }
.ifh-aud__body { padding: 24px; }
.ifba-home .ifh-aud__title { font-size: 19px; margin-bottom: 10px; }
.ifh-aud__points { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.ifh-aud__points li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ifh-muted); }
.ifh-aud__points .ifba-home__icon { width: 17px; height: 17px; color: var(--ifh-primary); }

/* look inside */
.ifh-look { background: var(--ifh-paper); }
.ifh-look__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.ifh-look__frame { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -26px rgba(8,49,58,.4); background: var(--ifh-ink); }
.ifh-shot { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ifh-ease); }
.ifh-shot:first-child { position: relative; }
.ifh-shot.is-active { opacity: 1; }
.ifh-look__frame .ifba-home__img { border-radius: 0; }

/* pinned scroller.

   The tall height and the sticky viewport are applied ONLY when the script
   has set data-pinned, and only where there is room for it. That ordering
   matters: if the script never runs, this stays an ordinary section that
   scrolls past in one screen, rather than several screens of empty space
   nobody can get out of. */
.ifh-look__sticky { position: relative; }
.ifh-look[data-pinned="1"] { padding: 0; }
.ifh-look[data-pinned="1"] .ifh-look__sticky {
	position: -webkit-sticky; position: sticky; top: 0;
	min-height: 100vh; display: flex; align-items: center; padding: 96px 0;
}
.ifh-steps__labels .ifh-steps__label { transition: opacity .3s var(--ifh-ease), transform .3s var(--ifh-ease); }
.ifh-look[data-pinned="1"] .ifh-steps__label { opacity: .42; }
.ifh-look[data-pinned="1"] .ifh-steps__label.is-current { opacity: 1; transform: translateX(3px); }
.ifh-look[data-pinned="1"] .ifh-steps__label.is-current .ifba-home__icon { color: var(--ifh-primary); }
.ifh-look__progress { display: none; align-items: center; gap: 14px; margin: 26px 0 0; }
.ifh-look[data-pinned="1"] .ifh-look__progress { display: flex; }
.ifh-look__count { font-size: 13px; font-weight: 600; color: var(--ifh-muted); font-variant-numeric: tabular-nums; }
.ifh-look__count b { color: var(--ifh-ink); }
.ifh-look__dots { display: inline-flex; gap: 7px; }
.ifh-look__dots i {
	width: 7px; height: 7px; border-radius: 50%; background: var(--ifh-line);
	transition: background .3s var(--ifh-ease), transform .3s var(--ifh-ease);
}
.ifh-look__dots i.is-on { background: var(--ifh-primary); transform: scale(1.3); }

/* live platform demo */
.ifh-look__frame { background: var(--ifh-ink); }
.ifh-ui { position: relative; }
.ifh-ui__bar {
	display: flex; align-items: center; gap: 7px; padding: 11px 14px;
	background: #0A2730; border-bottom: 1px solid rgba(255,255,255,.08);
}
.ifh-ui__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); flex: none; }
.ifh-ui__url {
	margin-left: 10px; padding: 4px 14px; border-radius: 999px; background: rgba(255,255,255,.07);
	font-size: 11.5px; color: rgba(255,255,255,.5); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ifh-ui__stage { position: relative; height: 330px; padding: 20px 22px; color: #fff; }
.ifh-ui__scene { display: flex; flex-direction: column; gap: 9px; padding: 20px 22px; }
.ifh-ui__step {
	align-self: flex-start; padding: 5px 12px; border-radius: 999px;
	background: rgba(94,234,212,.14); color: var(--ifh-light);
	font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.ifh-ui__title { margin: 4px 0 2px; font-family: var(--ifh-display); font-size: 17px; font-weight: 650; color: #fff; }
.ifh-ui__note { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 4px; }

/* scene 1 — the lesson */
.ifh-ui__split { display: flex; gap: 18px; flex: 1; min-height: 0; }
.ifh-ui__rail { display: flex; flex-direction: column; gap: 7px; width: 40%; max-width: 190px; }
.ifh-ui__rail-row {
	display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px;
	background: rgba(255,255,255,.05); font-size: 12px; color: rgba(255,255,255,.62);
}
.ifh-ui__rail-row i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.22); flex: none; }
.ifh-ui__rail-row.is-done i { background: var(--ifh-light); }
.ifh-ui__rail-row.is-now { background: rgba(94,234,212,.12); color: #fff; }
.ifh-ui__rail-row.is-now i { background: var(--ifh-light); box-shadow: 0 0 0 3px rgba(94,234,212,.25); }
.ifh-ui__main { flex: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.ifh-ui__line { display: block; height: 9px; border-radius: 5px; background: rgba(255,255,255,.11); width: var(--w, 90%); }

/* scene 2 — the knowledge check */
.ifh-ui__q { margin: 4px 0 6px; font-size: 15px; font-weight: 600; color: #fff; }
.ifh-ui__opt {
	display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 11px;
	background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
	font-size: 13px; color: rgba(255,255,255,.76);
}
.ifh-ui__opt i { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.3); flex: none; }
.ifh-ui__opt.is-pick { background: rgba(94,234,212,.14); border-color: var(--ifh-light); color: #fff; }
.ifh-ui__opt.is-pick i { background: var(--ifh-light); border-color: var(--ifh-light); }
.ifh-ui__why {
	margin-top: 4px; padding: 10px 13px; border-radius: 11px; border-left: 3px solid var(--ifh-light);
	background: rgba(94,234,212,.09); font-size: 12.5px; color: rgba(255,255,255,.82);
}

/* scene 3 — progress */
.ifh-ui__bar { display: block; height: 9px; border-radius: 5px; background: rgba(255,255,255,.1); overflow: hidden; }
/* An explicit height rather than 100%: a percentage height inside a
   fixed-height span is resolved inconsistently, and the fill vanished. */
.ifh-ui__bar > i { display: block; height: 9px; width: 68%; border-radius: 5px; background: linear-gradient(90deg, var(--ifh-primary), var(--ifh-light)); }
.ifh-ui__pct { font-size: 12px; color: rgba(255,255,255,.55); }
.ifh-ui__ticks { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ifh-ui__tick { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: rgba(255,255,255,.76); }
.ifh-ui__tick .ifba-home__icon { width: 16px; height: 16px; color: var(--ifh-light); flex: none; }

/* scene 4 — the certificate */
.ifh-ui__cert {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
	/* Extra right padding so the name never runs under the seal. */
	margin-top: 6px; padding: 22px 64px 22px 18px; border-radius: 12px;
	background: linear-gradient(158deg, #FEFDFB, #F4F0E7); color: #123640; text-align: center;
	box-shadow: 0 18px 34px -18px rgba(0,0,0,.6);
}
.ifh-ui__cert-org { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ifh-primary); }
.ifh-ui__cert-kind { font-family: var(--ifh-display); font-size: 16px; font-weight: 700; color: #0B2B33; }
.ifh-ui__cert-rule { display: block; width: 54px; height: 2px; background: var(--ifh-amber); border-radius: 2px; margin: 3px 0; }
.ifh-ui__cert-name { font-family: var(--ifh-display); font-size: 19px; font-weight: 700; color: #0B2B33; }
.ifh-ui__cert-seal {
	position: absolute; right: 14px; bottom: 14px;
	width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: radial-gradient(circle at 34% 30%, #F8C566, var(--ifh-amber) 64%, #C97F06);
	color: #fff; font-family: var(--ifh-display); font-size: 10.5px; font-weight: 700;
	box-shadow: 0 6px 14px -4px rgba(180,110,10,.7);
}

/* faq beside the contact form */
.ifh-faq__layout { display: grid; grid-template-columns: 1fr 420px; gap: 56px; align-items: start; margin-top: 40px; }
.ifh-faq__col { min-width: 0; }
.ifh-faq__more { margin-top: 26px; }

/* contact */
.ifh-contact { position: sticky; top: 100px; }
.ifh-contact__card {
	position: relative; overflow: hidden;
	background: var(--ifh-ink); color: #fff; border-radius: 22px; padding: 30px;
	box-shadow: 0 30px 60px -28px rgba(8,49,58,.55);
}
.ifh-contact__glow {
	position: absolute; top: -40%; right: -30%; width: 70%; height: 90%;
	background: radial-gradient(circle, var(--ifh-primary) 0%, transparent 65%);
	opacity: .5; pointer-events: none;
}
.ifba-home .ifh-contact__title { position: relative; color: #fff; font-size: 23px; margin-bottom: 8px; }
.ifh-contact__lede { position: relative; margin: 0 0 22px; font-size: 14.5px; color: rgba(255,255,255,.72); }
.ifh-contact__form { position: relative; display: flex; flex-direction: column; gap: 14px; }
.ifh-field { display: flex; flex-direction: column; gap: 6px; }
.ifh-field label { font-size: 12.5px; font-weight: 650; color: rgba(255,255,255,.82); }
.ifba-home .ifh-field input, .ifba-home .ifh-field select, .ifba-home .ifh-field textarea {
	width: 100%; padding: 12px 14px; border-radius: 12px;
	border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); color: #fff;
	font-family: inherit; font-size: 14.5px; line-height: 1.5;
}
.ifba-home .ifh-field textarea { resize: vertical; min-height: 96px; }
.ifba-home .ifh-field input::placeholder, .ifba-home .ifh-field textarea::placeholder { color: rgba(255,255,255,.4); }
.ifba-home .ifh-field input:focus, .ifba-home .ifh-field select:focus, .ifba-home .ifh-field textarea:focus {
	outline: none; border-color: var(--ifh-light); background: rgba(255,255,255,.12);
	box-shadow: 0 0 0 3px rgba(94,234,212,.18);
}
.ifba-home .ifh-field select option { color: #123640; }
.ifba-home .ifh-field.is-wrong input, .ifba-home .ifh-field.is-wrong textarea { border-color: #F4A5A0; }
.ifba-home .ifh-contact__send { justify-content: center; width: 100%; margin-top: 4px; }
.ifba-home .ifh-contact__send[disabled] { opacity: .6; cursor: default; }
.ifh-contact__status { margin: 0; font-size: 13.5px; min-height: 1.2em; color: rgba(255,255,255,.72); }
.ifh-contact__status.is-good { color: var(--ifh-light); }
.ifh-contact__status.is-bad { color: #F4A5A0; }
.ifh-contact__alt { position: relative; margin: 18px 0 0; font-size: 13px; color: rgba(255,255,255,.55); }
.ifba-home .ifh-contact__alt a { color: rgba(255,255,255,.85); }
/* Off-screen rather than display:none — scripts skip hidden fields. */
.ifh-hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.ifh-faq__item { border-bottom: 1px solid var(--ifh-line); }
.ifba-home .ifh-faq__q { margin: 0; font-size: inherit; }
.ifba-home .ifh-faq__q button {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
	background: none; border: 0; cursor: pointer; padding: 22px 0; text-align: left;
	font-family: var(--ifh-display); font-size: 17px; font-weight: 600; color: var(--ifh-ink); min-height: 48px;
}
.ifba-home .ifh-faq__q .ifba-home__icon { color: var(--ifh-primary); transition: transform .26s var(--ifh-ease); flex: none; }
.ifba-home .ifh-faq__q button[aria-expanded="true"] .ifba-home__icon { transform: rotate(45deg); }
.ifh-faq__a { overflow: hidden; }
.ifh-faq__a p { margin: 0 0 22px; color: var(--ifh-muted); font-size: 15.5px; max-width: 58ch; }
.ifh-faq__more { margin-top: 32px; }

/* final */
.ifh-final { position: relative; background: var(--ifh-ink); color: #fff; padding: 120px 0; overflow: hidden; text-align: center; }
.ifh-final__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; }
/* The wash is what keeps the heading readable over moving footage — without
   it the contrast depends on whichever frame is showing. */
.ifh-final__wash {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	background: linear-gradient(140deg, rgba(8,49,58,.93) 0%, rgba(8,49,58,.74) 48%, rgba(13,148,136,.62) 100%);
}
.ifh-final__inner { position: relative; }
.ifh-final__cta { position: relative; display: inline-block; margin: 40px 0 18px; }
.ifh-final__rings { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; border: 1px solid rgba(94,234,212,.3); }
.ifba-home .ifh-final__note { color: rgba(255,255,255,.6); font-size: 14px; margin: 0; text-align: center; }

/* ---------- motion: added, never required ---------- */
@keyframes ifh-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes ifh-word { from { transform: translateY(105%); } to { transform: none; } }
@keyframes ifh-float { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-14px); } }
@keyframes ifh-drift { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(8%, 6%) scale(1.15); } }
@keyframes ifh-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.5); } }
@keyframes ifh-dot { 0% { top: 0; opacity: 0; } 30% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes ifh-sheen { 0%, 88% { left: -60%; } 100% { left: 120%; } }
@keyframes ifh-rings { 0% { transform: scale(.6); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes ifh-draw { from { stroke-dashoffset: var(--len, 2600); } to { stroke-dashoffset: 0; } }
@keyframes ifh-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ifh-stamp { 0% { opacity: 0; transform: scale(1.5) rotate(-14deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes ifh-widen { from { width: 0; } to { width: 92px; } }
@keyframes ifh-sigline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ifh-pick { from { transform: scale(1); } 50% { transform: scale(1.03); } to { transform: scale(1); } }
@keyframes ifh-fill { from { width: 0; } to { width: 68%; } }
@keyframes ifh-rise-cert { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ifh-ping { 0%, 100% { box-shadow: 0 0 0 3px rgba(94,234,212,.25); } 50% { box-shadow: 0 0 0 6px rgba(94,234,212,.08); } }
@keyframes ifh-pop-soft { from { transform: scale(.85); } to { transform: scale(1); } }
@keyframes ifh-draw-tick { from { stroke-dashoffset: 18; } to { stroke-dashoffset: 0; } }
@keyframes ifh-art-slide { from { transform: translateX(-6px); opacity: .25; } to { transform: none; opacity: 1; } }
@keyframes ifh-art-press { 0% { transform: scale(.9); opacity: .3; } 60% { transform: scale(1.04); } 100% { transform: none; opacity: 1; } }
@keyframes ifh-art-stamp { 0% { transform: scale(1.5); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes ifh-ring-fill { from { stroke-dashoffset: 107; } to { stroke-dashoffset: 27; } }
@keyframes ifh-fade-mark { from { opacity: 0; transform: translateY(12px); } to { opacity: .04; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
	/* Hidden only while <html> carries ifba-motion. A script in the head adds
	   it, then takes it away again after three seconds unless the reveal code
	   has run — so if anything stops that code, the content shows rather than
	   staying invisible. */
	html.ifba-motion .ifh-reveal { opacity: 0; transform: translateY(28px); }
	html.ifba-motion .ifh-reveal.is-in { animation: ifh-rise .7s var(--ifh-ease) both; animation-delay: var(--d, 0ms); }
	.ifh-word > span { animation: ifh-word .8s var(--ifh-ease) both; animation-delay: var(--d, 0ms); }
	.ifh-card { animation: ifh-float 8s ease-in-out infinite; }
	.ifh-card__list li { opacity: 0; animation: ifh-rise .6s var(--ifh-ease) both; animation-delay: var(--d, 0ms); }
	.ifh-blob { animation: ifh-drift 24s ease-in-out infinite; }
	.ifh-blob--2 { animation-duration: 30s; animation-direction: reverse; }
	.ifh-pill__dot { animation: ifh-pulse 2.6s ease-in-out infinite; }
	.ifh-scroll > span { animation: ifh-dot 2.4s ease-in-out infinite; }
	.ifh-cert__sheen::after { animation: ifh-sheen 6s ease-in-out infinite; }
	.ifh-final__rings { animation: ifh-rings 4s ease-out infinite; }
	.ifh-outcomes li, .ifh-cert__points li { opacity: 0; animation: ifh-rise .6s var(--ifh-ease) both; animation-delay: var(--d, 0ms); }
	.ifh-step.is-on .ifh-art__go, .ifh-step.is-on .ifh-art__seal { animation: ifh-pop-soft .5s var(--ifh-ease) both; }
	.ifh-step.is-on .ifh-art__tick { stroke-dasharray: 18; animation: ifh-draw-tick .45s var(--ifh-ease) .12s both; }
	.ifh-step.is-on .ifh-art__ring { animation: ifh-ring-fill .9s var(--ifh-ease) both; }

	/* The other three artworks were static while steps 3 and 4 animated,
	   which made the row look half-finished as it came alive. */
	/* An SVG element scales from the viewport origin by default, not its own
	   centre — without fill-box these fly across the artwork instead of
	   growing in place. */
	.ifh-art__go, .ifh-art__row--on, .ifh-art__seal { transform-box: fill-box; transform-origin: center; }
	.ifh-step.is-on .ifh-art__go { animation: ifh-art-press .5s var(--ifh-ease) .22s both; }
	.ifh-step.is-on .ifh-art__bar { animation: ifh-art-slide .5s var(--ifh-ease) both; }
	.ifh-step.is-on .ifh-art__bar:nth-of-type(2) { animation-delay: .08s; }
	.ifh-step.is-on .ifh-art__bar:nth-of-type(3) { animation-delay: .16s; }
	.ifh-step.is-on .ifh-art__bar:nth-of-type(4) { animation-delay: .24s; }
	.ifh-step.is-on .ifh-art__rail { animation: ifh-art-slide .5s var(--ifh-ease) both; }
	.ifh-step.is-on .ifh-art__row--on { animation: ifh-art-press .5s var(--ifh-ease) .3s both; }
	.ifh-step.is-on .ifh-art__seal { animation: ifh-art-stamp .6s cubic-bezier(.34, 1.4, .5, 1) .35s both; }
	.ifh-step.is-on .ifh-step__node b { display: inline-block; animation: ifh-pop-soft .4s var(--ifh-ease) both; }
	.ifh-nums__list li { opacity: 0; animation: ifh-rise .6s var(--ifh-ease) both; animation-delay: var(--d, 0ms); }

	/* The badge stamps in only where the animation will actually run. Hiding
	   it unconditionally would leave it invisible wherever it does not. */
	.ifh-verify__badge { opacity: 0; transform: scale(1.35); }
	.ifh-verify__badge.is-on { opacity: 1; transform: scale(1); transition: all .44s var(--ifh-ease); }

	/* Certificate. Each step is keyed to the section entering the viewport,
	   so it plays once, in order, and only when someone is looking at it. */
	.ifh-cert__stage.is-in .ifh-doc__frame-outer,
	.ifh-cert__stage.is-in .ifh-doc__frame-inner {
		stroke-dasharray: 2620; animation: ifh-draw 1.5s var(--ifh-ease) .1s both; --len: 2620;
	}
	.ifh-cert__stage.is-in .ifh-doc__frame-inner { animation-duration: 1.7s; animation-delay: .22s; }
	.ifh-cert__stage.is-in .ifh-doc__guilloche ellipse { opacity: 0; animation: ifh-fade-soft 1s var(--ifh-ease) both; animation-delay: var(--d, 0s); }
	.ifh-cert__stage.is-in .ifh-doc__org,
	.ifh-cert__stage.is-in .ifh-doc__kind,
	.ifh-cert__stage.is-in .ifh-doc__intro,
	.ifh-cert__stage.is-in .ifh-doc__course,
	.ifh-cert__stage.is-in .ifh-doc__cell,
	.ifh-cert__stage.is-in .ifh-doc__uid {
		opacity: 0; animation: ifh-rise .55s var(--ifh-ease) both; animation-delay: var(--d, 0s);
	}
	.ifh-cert__stage.is-in .ifh-doc__rule { width: 0; animation: ifh-widen .5s var(--ifh-ease) .22s both; }
	.ifh-cert__stage.is-in .ifh-doc__name > span { animation: ifh-write .9s var(--ifh-ease) .36s both; }
	.ifh-cert__stage.is-in .ifh-doc__sigline { transform-origin: left; animation: ifh-sigline .5s var(--ifh-ease) .8s both; }
	.ifh-cert__stage.is-in .ifh-doc__seal { animation: ifh-stamp .7s cubic-bezier(.34, 1.4, .5, 1) .95s both; }

	/* The platform demo. Each scene animates when it becomes the active one,
	   so the sequence replays every time it comes round. */
	.ifh-ui__scene.is-active .ifh-ui__step { animation: ifh-rise .45s var(--ifh-ease) both; }
	.ifh-ui__scene.is-active .ifh-ui__rail-row,
	.ifh-ui__scene.is-active .ifh-ui__line,
	.ifh-ui__scene.is-active .ifh-ui__opt,
	.ifh-ui__scene.is-active .ifh-ui__tick { animation: ifh-rise .5s var(--ifh-ease) both; animation-delay: var(--d, 0s); }
	.ifh-ui__scene.is-active .ifh-ui__note { animation: ifh-rise .5s var(--ifh-ease) both; animation-delay: var(--d, .4s); }
	.ifh-ui__scene.is-active .ifh-ui__opt.is-pick { animation: ifh-rise .5s var(--ifh-ease) both, ifh-pick .5s var(--ifh-ease) .75s both; }
	.ifh-ui__scene.is-active .ifh-ui__why { animation: ifh-rise .5s var(--ifh-ease) 1.05s both; }
	.ifh-ui__scene.is-active .ifh-ui__bar > i { animation: ifh-fill 1.1s var(--ifh-ease) .2s both; }
	.ifh-ui__scene.is-active .ifh-ui__cert { animation: ifh-rise-cert .6s cubic-bezier(.34, 1.3, .5, 1) .15s both; }
	.ifh-ui__scene.is-active .ifh-ui__cert-seal { animation: ifh-stamp .6s cubic-bezier(.34, 1.4, .5, 1) .6s both; }
	.ifh-ui__rail-row.is-now i { animation: ifh-ping 2.4s ease-in-out infinite; }

	/* Domain panels settle in when their tab is chosen. */
	.ifh-panel.is-active .ifh-panel__head { animation: ifh-rise .45s var(--ifh-ease) both; }
	.ifh-panel.is-active .ifh-panel__list li { animation: ifh-rise .45s var(--ifh-ease) both; animation-delay: var(--d, 0s); }
	.ifh-panel.is-active .ifh-panel__stats { animation: ifh-rise .5s var(--ifh-ease) .22s both; }
	.ifh-panel.is-active .ifh-panel__mark { animation: ifh-fade-mark .7s var(--ifh-ease) both; }
}
@keyframes ifh-fade-soft { from { opacity: 0; } to { opacity: .3; } }

/* ---------- responsive ---------- */
/* Five columns leaves roughly 190px of content per card, which is not enough
   for artwork, a heading, a sentence and a chip. The vertical timeline has
   room, so switch to it well before the phone breakpoint. */
@media (max-width: 1180px) {
	.ifh-steps__list { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 1024px) {
	.ifh-bento { grid-template-columns: repeat(2, 1fr); }
	.ifh-tile--lg, .ifh-tile--wide { grid-column: span 2; grid-row: auto; }
	.ifh-struct__grid { grid-template-columns: 1fr; gap: 24px; }
	.ifh-struct__rail { flex-direction: row; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
	.ifba-home .ifh-tab { min-width: 236px; flex: none; }
	.ifba-home .ifh-tab.is-active { transform: none; }
	.ifh-struct__panels { padding: 26px 24px; min-height: 0; }
	.ifh-panel__list { grid-template-columns: 1fr; }
	.ifh-panel__mark { font-size: 130px; top: -22px; }
	/* Steps switch earlier — see the 1180px query below. */
	/* Kept, not dropped: the thread between stages is the point of the
	   section, and a phone needs it more than a wide screen does. */
	.ifh-steps__line {
		top: 34px; bottom: 34px; left: 26px; right: auto; width: 2px; height: auto;
		background: var(--ifh-line);
	}
	.ifh-steps__line > span {
		width: 2px; height: var(--fill, 0%);
		background: linear-gradient(180deg, var(--ifh-primary), var(--ifh-light));
		transition: height .6s cubic-bezier(.22, 1, .36, 1);
	}
	.ifh-steps__line > span::after { right: -4px; top: auto; bottom: -5px; margin-top: 0; }
	.ifh-step { flex-direction: row; align-items: flex-start; gap: 18px; }
	.ifh-step__node { margin-bottom: 0; width: 54px; }
	.ifh-step { flex-direction: row; align-items: flex-start; gap: 16px; }
	.ifh-step__node { width: 44px; height: 44px; font-size: 16px; margin-bottom: 0; }
	.ifh-step:not(:last-child)::after {
		content: ""; position: absolute; left: 21px; top: 52px; bottom: -20px; width: 2px;
		background: var(--ifh-line); border-radius: 2px;
	}
	.ifh-step.is-on:not(:last-child)::after { background: linear-gradient(var(--ifh-primary), var(--ifh-line)); }
	.ifh-art { display: none; }
	.ifh-why__grid, .ifh-look__grid { grid-template-columns: 1fr; gap: 36px; }
	.ifh-amp__list { grid-template-columns: 1fr; gap: 16px; }
	.ifh-amp__stage:not(:last-child)::after { display: none; }
	.ifh-why__outcomes { grid-template-columns: 1fr 1fr; }
	.ifba-home .ifh-why__lead { margin-top: 48px; }
	.ifh-ui__stage { height: 380px; }
	/* Never pin on a narrow screen: several viewport-heights of a held
	   section is a poor trade on a phone. */
	.ifh-look[data-pinned="1"] { height: auto !important; padding: 72px 0; }
	.ifh-look[data-pinned="1"] .ifh-look__sticky { position: static; min-height: 0; padding: 0; }
	.ifh-look[data-pinned="1"] .ifh-look__progress { display: none; }
	.ifh-look[data-pinned="1"] .ifh-steps__label { opacity: 1; }
	.ifh-ui__split { flex-direction: column; }
	.ifh-ui__rail { width: 100%; max-width: none; flex-direction: row; overflow: hidden; }
	.ifh-aud__grid { grid-template-columns: 1fr; }
	.ifh-faq__layout { grid-template-columns: 1fr; gap: 40px; }
	.ifh-contact { position: static; }
}
@media (max-width: 860px) {
	.ifh-sec, .ifh-final { padding: 72px 0; }
	.ifh-hero { min-height: auto; padding: 88px 0 64px; }
	.ifh-hero__inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
	.ifh-hero__copy { max-width: none; }
	.ifh-hero__cta, .ifh-hero__stats { justify-content: center; }
	.ifh-hero__lede { margin-left: auto; margin-right: auto; }
	.ifh-card { transform: none; }
	.ifh-hero__video, .ifh-band__video, .ifh-final__video { display: none; }
	.ifh-band { padding: 84px 0; }
	.ifh-nums__list { grid-template-columns: 1fr 1fr; gap: 28px 0; }
	.ifh-nums__list li:nth-child(3) { border-left: 0; }
	.ifh-tile--wide { grid-template-columns: 1fr; }
	.ifh-why__media::before { display: none; }
	.ifh-why__outcomes { grid-template-columns: 1fr; }
	.ifba-home { font-size: 16px; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
	.ifh-card { animation: none; }
}
/* =========================================================================
   SITE HEADER AND FOOTER (Snippet 34)
   ====================================================================== */
.ifba-chrome {
	--ifc-ink: #08313A; --ifc-primary: #0D9488; --ifc-light: #5EEAD4;
	--ifc-paper: #F7FAFA; --ifc-line: #E2ECEB; --ifc-muted: #5B7076;
	--ifc-ease: cubic-bezier(.22, 1, .36, 1);
	font-family: var(--ifh-body, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	line-height: 1.6;
}
.ifba-chrome *, .ifba-chrome *::before, .ifba-chrome *::after { box-sizing: border-box; }

/* ---------- skip link ---------- */
.ifba-chrome .ifc-skip {
	position: absolute; left: -9999px; top: 0; z-index: 100001;
	padding: 12px 20px; background: var(--ifc-ink); color: #fff;
	font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 0 0 10px 0;
}
.ifba-chrome .ifc-skip:focus { left: 0; }

/* ---------- header ---------- */
.ifc-head {
	position: fixed; top: 0; left: 0; right: 0; z-index: 9990;
	transition: background .3s var(--ifc-ease), box-shadow .3s var(--ifc-ease), border-color .3s var(--ifc-ease);
	border-bottom: 1px solid transparent;
}
body.admin-bar .ifc-head { top: 32px; }
.ifc-head__inner {
	max-width: 1240px; margin: 0 auto; padding: 0 20px;
	display: flex; align-items: center; gap: 28px; height: 88px;
	transition: height .3s var(--ifc-ease);
}
.ifc-head.is-solid, .ifc-head.is-stuck {
	background: rgba(255,255,255,.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
	border-bottom-color: var(--ifc-line); box-shadow: 0 1px 2px rgba(8,49,58,.04);
}
.ifc-head.is-stuck .ifc-head__inner { height: 68px; }
.ifc-spacer { height: 88px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ifc-head.is-solid, .ifc-head.is-stuck { background: #fff; }
}

/* brand */
.ifba-chrome .ifc-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.ifc-brand__mark {
	width: 30px; height: 30px; border-radius: 9px; flex: none;
	background: linear-gradient(135deg, var(--ifc-primary), var(--ifc-light));
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.ifc-brand__name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ifc-ink); white-space: nowrap; }
.ifc-brand__logo { display: block; height: 34px; width: auto; }
.ifc-head.is-over .ifc-brand__name { color: #fff; }
.ifc-head.is-over.is-stuck .ifc-brand__name { color: var(--ifc-ink); }

/* nav */
.ifc-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ifba-chrome .ifc-nav__link {
	position: relative; padding: 9px 14px; font-size: 15px; font-weight: 550;
	color: var(--ifc-ink); text-decoration: none; border-radius: 9px;
}
.ifc-head.is-over .ifc-nav__link { color: rgba(255,255,255,.88); }
.ifc-head.is-over.is-stuck .ifc-nav__link { color: var(--ifc-ink); }
.ifba-chrome .ifc-nav__link::after {
	content: ""; position: absolute; left: 50%; right: 50%; bottom: 3px; height: 2px;
	background: var(--ifc-primary); border-radius: 2px; transition: left .22s var(--ifc-ease), right .22s var(--ifc-ease);
}
.ifba-chrome .ifc-nav__link:hover::after { left: 14px; right: 14px; }
.ifc-head.is-over:not(.is-stuck) .ifc-nav__link::after { background: var(--ifc-light); }

/* buttons */
.ifc-head__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.ifba-chrome .ifc-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 11px 18px; border-radius: 12px; font-size: 14.5px; font-weight: 600;
	text-decoration: none; border: 1px solid transparent; white-space: nowrap; min-height: 44px;
	transition: transform .18s var(--ifc-ease), background .18s var(--ifc-ease), color .18s var(--ifc-ease);
}
.ifba-chrome .ifc-btn--ghost { color: var(--ifc-ink); border-color: var(--ifc-line); }
.ifba-chrome .ifc-btn--ghost:hover { background: var(--ifc-paper); }
.ifc-head.is-over .ifc-btn--ghost { color: #fff; border-color: rgba(255,255,255,.32); }
.ifc-head.is-over .ifc-btn--ghost:hover { background: rgba(255,255,255,.12); }
.ifc-head.is-over.is-stuck .ifc-btn--ghost { color: var(--ifc-ink); border-color: var(--ifc-line); }
.ifc-head.is-over.is-stuck .ifc-btn--ghost:hover { background: var(--ifc-paper); }
.ifba-chrome .ifc-btn--solid {
	background: var(--ifc-primary); color: #fff;
	box-shadow: 0 8px 22px -10px rgba(13,148,136,.75);
}
.ifba-chrome .ifc-btn--solid:hover { transform: translateY(-1px); color: #fff; }

/* burger */
.ifba-chrome .ifc-burger {
	display: none; flex-direction: column; justify-content: center; gap: 5px;
	width: 46px; height: 46px; padding: 0 11px; margin-left: auto;
	background: none; border: 0; cursor: pointer;
}
.ifc-burger span { display: block; height: 2px; border-radius: 2px; background: var(--ifc-ink); transition: transform .26s var(--ifc-ease), opacity .2s var(--ifc-ease); }
.ifc-head.is-over:not(.is-stuck) .ifc-burger span { background: #fff; }
.ifc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ifc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ifc-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile panel */
.ifc-panel {
	position: fixed; inset: 0; z-index: 9989; padding: 108px 24px 40px;
	background: rgba(8,49,58,.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	overflow-y: auto;
}
body.admin-bar .ifc-panel { top: 32px; }
.ifc-panel__nav { display: flex; flex-direction: column; gap: 2px; }
.ifba-chrome .ifc-panel__link {
	padding: 16px 4px; font-size: 21px; font-weight: 600; color: #fff; text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,.12); min-height: 44px;
}
.ifc-panel__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.ifc-panel__actions .ifc-btn { width: 100%; padding: 15px 20px; font-size: 16px; }
.ifc-panel__actions .ifc-btn--ghost { color: #fff; border-color: rgba(255,255,255,.3); }

/* ---------- footer ---------- */
.ifc-foot { background: var(--ifc-ink); color: rgba(255,255,255,.76); margin-top: 0; }
.ifc-foot__inner {
	max-width: 1240px; margin: 0 auto; padding: 72px 20px 48px;
	display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
}
.ifc-foot .ifc-brand__name { color: #fff; }
.ifc-foot__mission { margin: 16px 0 0; font-size: 14.5px; max-width: 38ch; color: rgba(255,255,255,.66); }
.ifc-foot__title { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.ifba-chrome .ifc-foot__toggle {
	display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0;
	font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: default;
}
.ifc-foot__chev { display: none; }
.ifc-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ifc-foot__list li { font-size: 14.5px; }
.ifba-chrome .ifc-foot__list a { color: rgba(255,255,255,.76); text-decoration: none; }
.ifba-chrome .ifc-foot__list a:hover { color: #fff; text-decoration: underline; }
.ifc-foot__bar { border-top: 1px solid rgba(255,255,255,.12); }
.ifc-foot__barinner {
	max-width: 1240px; margin: 0 auto; padding: 22px 20px;
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	font-size: 13.5px; color: rgba(255,255,255,.55);
}
.ifc-foot__barinner p { margin: 0; }
.ifba-chrome .ifc-foot__legal a { color: rgba(255,255,255,.72); text-decoration: none; }
.ifba-chrome .ifc-foot__legal a:hover { color: #fff; }
.ifc-foot__sep { margin: 0 9px; opacity: .5; }

/* keep the floating buttons clear of the footer bar */
body:has(.ifc-foot) .ifba-help-fab, body:has(.ifc-foot) .ifba-ai-fab { bottom: 24px; }

/* ---------- motion ---------- */
@keyframes ifc-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	.ifc-panel[data-open="1"] .ifc-panel__link,
	.ifc-panel[data-open="1"] .ifc-panel__actions { animation: ifc-fade-up .42s var(--ifc-ease) both; animation-delay: var(--d, 0ms); }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
	.ifc-nav, .ifc-head__actions { display: none; }
	.ifba-chrome .ifc-burger { display: flex; }
	.ifc-head__inner { height: 72px; gap: 16px; }
	.ifc-head.is-stuck .ifc-head__inner { height: 62px; }
	.ifc-spacer { height: 72px; }
	.ifc-foot__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 720px) {
	.ifc-foot__inner { grid-template-columns: 1fr; gap: 4px; padding: 48px 20px 32px; }
	.ifc-foot__brand { margin-bottom: 24px; }
	.ifc-foot__col { border-top: 1px solid rgba(255,255,255,.12); padding: 4px 0; }
	.ifc-foot__title { margin: 0; }
	.ifba-chrome .ifc-foot__toggle { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; cursor: pointer; min-height: 44px; }
	.ifc-foot__chev {
		display: block; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: rotate(45deg); transition: transform .26s var(--ifc-ease); margin-top: -4px;
	}
	.ifba-chrome .ifc-foot__toggle[aria-expanded="true"] .ifc-foot__chev { transform: rotate(-135deg); margin-top: 4px; }
	.ifc-foot__list { padding-bottom: 18px; }
	.ifc-foot__barinner { justify-content: flex-start; }
}
@media print { .ifc-head, .ifc-panel, .ifc-spacer, .ifc-foot { display: none !important; } }

/* =========================================================================
   HEADER & FOOTER, UPGRADED
   ====================================================================== */
.ifba-chrome { --ifc-top-h: 0px; }
.ifba-chrome.has-top { --ifc-top-h: 44px; }
.ifba-chrome.has-top.is-scrolled { --ifc-top-h: 0px; }
.ifc-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ifc-ico { width: 18px; height: 18px; flex: none; }

/* ---------- top bar ---------- */
.ifc-top {
	position: fixed; top: 0; left: 0; right: 0; z-index: 9991; height: 44px; overflow: hidden;
	/* Depth rather than a flat strip: a deep base, a teal lift on the right,
	   and a hairline where it meets the header. */
	background:
		radial-gradient(120% 220% at 88% 50%, rgba(13,148,136,.55), transparent 60%),
		linear-gradient(94deg, #05242B, #08313A 46%, #0A414A);
	color: rgba(255,255,255,.86); font-size: 13px;
	box-shadow: inset 0 -1px 0 rgba(255,255,255,.09);
	transition: transform .3s var(--ifc-ease);
}
/* A slow sheen crossing the bar. Decorative, and only with motion welcome. */
.ifc-top::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(94,234,212,.16), transparent);
	transform: translateX(-140%);
}
body.admin-bar .ifc-top { top: 32px; }
.ifba-chrome.is-scrolled .ifc-top { transform: translateY(-100%); }
.ifc-top__inner { max-width: 1240px; height: 44px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 18px; }
.ifc-top__msg { margin: 0; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ifc-top__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ifc-light); box-shadow: 0 0 0 3px rgba(94,234,212,.22); }
.ifc-top__msg { font-weight: 500; letter-spacing: .01em; }
.ifc-top__links { display: flex; align-items: center; gap: 18px; flex: none; }
.ifba-chrome .ifc-top__links a {
	display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
	color: rgba(255,255,255,.86); text-decoration: none; transition: background-color .18s ease, color .18s ease;
}
.ifba-chrome .ifc-top__links a:hover { background: rgba(255,255,255,.12); color: #fff; }
.ifba-chrome .ifc-top__links a:focus-visible { outline: 2px solid var(--ifc-light); outline-offset: 1px; }
.ifc-top__links { gap: 6px; }
.ifc-top__links .ifc-ico { width: 15px; height: 15px; }
.ifba-chrome .ifc-top__close { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: rgba(255,255,255,.7); cursor: pointer; }
.ifba-chrome .ifc-top__close:hover { background: rgba(255,255,255,.1); color: #fff; }
.ifc-top__close .ifc-ico { width: 15px; height: 15px; }

/* the header and the space it reserves follow the bar */
.ifc-head { top: var(--ifc-top-h); transition: top .3s var(--ifc-ease), background .3s var(--ifc-ease), box-shadow .3s var(--ifc-ease), border-color .3s var(--ifc-ease); }
body.admin-bar .ifc-head { top: calc(32px + var(--ifc-top-h)); }
.ifc-spacer { height: calc(88px + var(--ifc-top-h)); }

/* ---------- navigation ---------- */
.ifc-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ifc-nav__item { position: relative; }
.ifc-nav__item.is-mega { position: static; }
.ifc-head__inner { position: relative; }
.ifba-chrome .ifc-nav__trigger {
	display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; cursor: pointer; font-family: inherit;
}
.ifc-nav__trigger .ifc-ico { width: 15px; height: 15px; transition: transform .22s var(--ifc-ease); }
.ifc-nav__item.is-open > .ifc-nav__trigger .ifc-ico { transform: rotate(180deg); }
.ifc-nav__item.is-open > .ifc-nav__link::after { left: 14px; right: 14px; }

/* ---------- dropdown panels ---------- */
.ifc-drop {
	position: absolute; top: calc(100% + 12px); z-index: 9992;
	background: #fff; color: var(--ifc-ink); border: 1px solid var(--ifc-line); border-radius: 18px;
	box-shadow: 0 30px 70px -28px rgba(8,49,58,.45), 0 2px 6px rgba(8,49,58,.05);
}
/* A panel that sets display must still honour [hidden]. */
.ifc-drop[hidden] { display: none; }
/* An invisible bridge over the gap, so the pointer never "leaves" on its way down. */
.ifc-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.ifc-sub { left: 50%; width: 328px; margin-left: -164px; padding: 8px; }
.ifc-sub__head {
	margin: 4px 6px 8px; padding: 0 6px 10px; border-bottom: 1px solid var(--ifc-line);
	font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ifc-muted);
}
.ifc-sub__list { display: flex; flex-direction: column; gap: 2px; }

.ifba-chrome .ifc-mi {
	display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 12px;
	background: transparent; color: var(--ifc-ink); text-align: left; text-decoration: none; cursor: pointer; font: inherit;
	transition: background-color .15s ease;
}
.ifba-chrome .ifc-mi[hidden] { display: none; }
.ifba-chrome .ifc-mi:hover, .ifba-chrome .ifc-mi:focus-visible { background: var(--ifc-paper); }
.ifc-mi__icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(13,148,136,.1); color: var(--ifc-primary); transition: transform .2s var(--ifc-ease); }
.ifba-chrome .ifc-mi:hover .ifc-mi__icon { transform: scale(1.06); }
.ifc-mi__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ifc-mi__label { font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.ifc-mi__note { font-size: 12.5px; color: var(--ifc-muted); line-height: 1.35; overflow-wrap: anywhere; }

/* ---------- the mega menu ---------- */
/* Centred on the header without min() or a transform — the drop-in
   animation owns transform, and min() is missing from older engines. */
.ifc-mega { left: 0; right: 0; margin: 0 auto; width: 640px; max-width: calc(100% - 20px); padding: 22px; }
.ifc-mega__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr); gap: 22px; }
.ifc-mega__title { margin: 0 0 12px; padding: 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ifc-muted); }
.ifc-mega__domains { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ifba-chrome .ifc-dom { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; color: var(--ifc-ink); text-decoration: none; transition: background-color .15s ease; }
.ifba-chrome .ifc-dom:hover, .ifba-chrome .ifc-dom:focus-visible { background: var(--ifc-paper); }
.ifc-dom__badge {
	flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
	background: linear-gradient(135deg, var(--ifc-primary), var(--ifc-ink)); color: #fff; font-weight: 800; font-size: 14px;
	transition: transform .2s var(--ifc-ease);
}
.ifba-chrome .ifc-dom:hover .ifc-dom__badge { transform: rotate(-6deg) scale(1.05); }
.ifc-dom__text { display: flex; flex-direction: column; min-width: 0; }
.ifc-dom__title { font-size: 14px; font-weight: 650; line-height: 1.3; }
.ifc-dom__meta { font-size: 12px; color: var(--ifc-muted); }
.ifba-chrome .ifc-mega__all { display: inline-block; margin: 10px 4px 0; font-size: 13.5px; font-weight: 700; color: #0B6F68; text-decoration: none; }
.ifba-chrome .ifc-mega__all::after { content: " →"; }
.ifc-mega__links { display: flex; flex-direction: column; gap: 2px; }
.ifc-mega__card {
	position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
	padding: 20px; border-radius: 14px; color: #fff; min-height: 220px;
	background: radial-gradient(circle at 85% 10%, rgba(94,234,212,.35), transparent 55%), linear-gradient(160deg, var(--ifc-primary), var(--ifc-ink) 70%);
}
.ifc-mega__cardeyebrow { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ifc-light); }
.ifc-mega__cardtitle { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
.ifc-mega__cardnote { margin: 0; font-size: 12.5px; color: rgba(255,255,255,.75); }
.ifba-chrome .ifc-mega__cta { margin-top: 6px; align-self: flex-start; background: #fff; color: var(--ifc-ink); transition: color .18s ease, transform .18s ease; }
/* Green on hover. #047857 reads 5.48:1 on the white button; the brand teal
   would be 3.74:1, too faint for a label this size. */
.ifba-chrome .ifc-mega__cta:hover, .ifba-chrome .ifc-mega__cta:focus-visible { background: #fff; color: #047857; }
.ifc-bar { display: block; height: 7px; border-radius: 99px; background: rgba(255,255,255,.22); overflow: hidden; }
.ifc-bar > span { display: block; height: 7px; border-radius: 99px; background: var(--ifc-light); }

/* ---------- the account menu ---------- */
.ifc-user { position: relative; }
.ifba-chrome .ifc-user__btn {
	display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px; border: 1px solid var(--ifc-line); border-radius: 999px;
	background: #fff; color: var(--ifc-ink); font: 600 14.5px/1 inherit; cursor: pointer; transition: box-shadow .2s ease, border-color .2s ease;
}
.ifba-chrome .ifc-user__btn:hover, .ifc-user.is-open .ifc-user__btn { border-color: rgba(13,148,136,.4); box-shadow: 0 6px 18px -10px rgba(8,49,58,.35); }
.ifc-user__btn .ifc-ico { width: 15px; height: 15px; transition: transform .22s var(--ifc-ease); }
.ifc-user.is-open .ifc-user__btn .ifc-ico { transform: rotate(180deg); }
.ifc-av {
	flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
	background: linear-gradient(135deg, var(--ifc-primary), var(--ifc-ink)); color: #fff; font-weight: 800; font-size: 14px;
}
.ifc-av--lg { width: 44px; height: 44px; font-size: 17px; }
.ifc-user__menu { right: 0; width: 300px; padding: 10px; }
.ifc-user__head { display: flex; align-items: center; gap: 12px; padding: 8px 8px 14px; border-bottom: 1px solid var(--ifc-line); }
.ifc-user__who { display: flex; flex-direction: column; min-width: 0; }
.ifc-user__who strong { font-size: 15px; color: var(--ifc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ifc-user__who span { font-size: 12.5px; color: var(--ifc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ifba-chrome .ifc-user__progress { display: block; margin: 10px 4px 6px; padding: 12px; border-radius: 12px; background: var(--ifc-paper); text-decoration: none; }
.ifc-user__plabel { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 12.5px; font-weight: 650; color: var(--ifc-ink); }
.ifc-user__plabel span { color: #0B6F68; }
.ifc-user__progress .ifc-bar { background: var(--ifc-line); }
.ifc-user__progress .ifc-bar > span { background: var(--ifc-primary); }
.ifc-user__links { list-style: none; margin: 6px 0 0; padding: 0; }
.ifba-chrome .ifc-user__links a, .ifba-chrome .ifc-user__out {
	display: flex; align-items: center; gap: 11px; padding: 10px 10px; border-radius: 10px;
	color: var(--ifc-ink); font-size: 14px; font-weight: 550; text-decoration: none; transition: background-color .15s ease;
}
.ifba-chrome .ifc-user__links a:hover, .ifba-chrome .ifc-user__links a:focus-visible { background: var(--ifc-paper); }
.ifc-user__links .ifc-ico, .ifc-user__out .ifc-ico { color: var(--ifc-muted); }
.ifba-chrome .ifc-user__out { margin-top: 6px; border-top: 1px solid var(--ifc-line); border-radius: 0 0 10px 10px; color: #9F1D14; }
.ifba-chrome .ifc-user__out:hover { background: #FDF2F1; }
.ifc-user__out .ifc-ico { color: currentColor; }
.ifc-head.is-over:not(.is-stuck) .ifc-user__btn { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; }

/* ---------- the drawer ---------- */
.ifc-panel { background: transparent; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: hidden; }
.ifc-panel[hidden] { display: none; }
.ifc-panel__scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(8,49,58,.5); }
.ifc-panel__sheet {
	position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 100%); overflow-y: auto;
	background: #fff; padding: 18px 22px 32px; box-shadow: -30px 0 60px -30px rgba(8,49,58,.5);
}
.ifc-panel__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--ifc-line); }
.ifc-panel__top .ifc-brand__name { color: var(--ifc-ink); }
.ifba-chrome .ifc-panel__x { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--ifc-paper); color: var(--ifc-ink); cursor: pointer; }
.ifc-panel__me { display: flex; align-items: center; gap: 12px; margin: 10px 0 6px; padding: 14px; border-radius: 14px; background: var(--ifc-paper); }
.ifba-chrome .ifc-panel__link {
	display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 4px; min-height: 48px;
	border: 0; border-bottom: 1px solid var(--ifc-line); background: transparent; color: var(--ifc-ink);
	font: 650 17px/1.3 inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.ifc-acc__btn .ifc-ico { transition: transform .22s var(--ifc-ease); }
.ifc-acc__btn[aria-expanded="true"] .ifc-ico { transform: rotate(180deg); }
.ifc-acc__body { padding: 6px 0 10px 8px; }
.ifc-acc__body[hidden] { display: none; }
.ifba-chrome .ifc-acc__link {
	display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 10px; border: 0; border-radius: 10px;
	background: transparent; color: var(--ifc-ink); font: 550 15px/1.3 inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.ifba-chrome .ifc-acc__link[hidden] { display: none; }
.ifba-chrome .ifc-acc__link:hover { background: var(--ifc-paper); }
.ifc-acc__link .ifc-ico { color: var(--ifc-muted); }
.ifba-chrome .ifc-acc__link--out { color: #9F1D14; }
.ifc-panel__account { margin-top: 18px; }
.ifc-panel__label { margin: 0 0 6px; padding: 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ifc-muted); }
.ifba-chrome .ifc-panel__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }

/* ---------- the footer ---------- */
.ifc-foot {
	position: relative; overflow: hidden;
	/* A graded base rather than one flat colour: lighter towards the top
	   left, deepening into the corner. */
	background:
		radial-gradient(130% 120% at 12% -10%, #0B3F49 0%, #08313A 42%, #062830 100%);
}
/* The hairline where the page meets the footer. */
.ifc-foot::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(94,234,212,.55), transparent);
}
/* Two slow-drifting lights. Both are plain radial gradients moved by
   transform, so the animation stays on the compositor and costs no layout. */
.ifc-foot__glow { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; overflow: hidden; }
.ifc-foot__glow::before, .ifc-foot__glow::after { content: ""; position: absolute; border-radius: 50%; }
.ifc-foot__glow::before {
	top: -55%; right: -12%; width: 62vw; height: 62vw; max-width: 880px; max-height: 880px;
	background: radial-gradient(circle at 50% 50%, rgba(13,148,136,.5), rgba(13,148,136,.16) 45%, transparent 68%);
}
.ifc-foot__glow::after {
	bottom: -60%; left: -14%; width: 56vw; height: 56vw; max-width: 760px; max-height: 760px;
	background: radial-gradient(circle at 50% 50%, rgba(94,234,212,.24), rgba(94,234,212,.08) 45%, transparent 66%);
}
.ifc-foot__wrap { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.ifc-foot__cta { position: relative; border-bottom: 1px solid rgba(255,255,255,.1); }
.ifc-foot__ctainner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 44px; padding-bottom: 44px; }
.ifc-foot__ctatitle { margin: 0 0 4px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; color: #fff; letter-spacing: -.01em; }
.ifc-foot__ctanote { margin: 0; font-size: 14.5px; color: rgba(255,255,255,.7); }
.ifba-chrome .ifc-btn--light, .ifc-foot .ifc-btn--light { background: #fff; color: var(--ifc-ink); border-color: #fff; }
.ifc-foot .ifc-foot__main { display: grid; grid-template-columns: 1.25fr 2fr; gap: 44px; padding-top: 68px; padding-bottom: 48px; }
.ifc-foot .ifc-foot__brand { margin: 0; }
.ifc-foot__blurb { margin: 16px 0 18px; max-width: 40ch; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.72); }
.ifc-foot .ifc-foot__col .ifc-foot__mail { display: inline-flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.ifc-foot .ifc-foot__col .ifc-foot__mail::after { display: none; }
.ifc-foot__mail .ifc-ico { width: 16px; height: 16px; color: var(--ifc-light); }
.ifc-foot__org { font-size: 14.5px; color: rgba(255,255,255,.8); }
.ifc-foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.ifc-foot .ifc-foot__col { border: 0; padding: 0; }
.ifc-foot .ifc-foot__title { margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ifc-light); }
.ifc-foot__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ifc-foot .ifc-foot__col a { position: relative; color: rgba(255,255,255,.8); font-size: 14.5px; text-decoration: none; transition: color .15s ease; }
.ifc-foot .ifc-foot__col a:hover { color: #fff; }
.ifc-foot .ifc-foot__col a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1.5px; background: var(--ifc-light); transition: right .25s var(--ifc-ease); }
.ifc-foot .ifc-foot__col a:hover::after { right: 0; }
.ifc-foot__trust { list-style: none; margin: 0; padding: 20px 0 30px; display: flex; flex-wrap: wrap; gap: 12px 28px; border-top: 1px solid rgba(255,255,255,.1); }
.ifc-foot__trust li { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: rgba(255,255,255,.78); }
.ifc-foot__trust .ifc-ico { color: var(--ifc-light); }
.ifc-foot__bottom { position: relative; border-top: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.14); }
.ifc-foot__bottominner { display: flex; align-items: center; gap: 18px; padding-top: 18px; padding-bottom: 18px; font-size: 13px; color: rgba(255,255,255,.62); }
.ifc-foot__bottominner p { margin: 0; }
.ifc-foot__legal { margin-left: auto !important; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ifc-foot .ifc-foot__legal a { color: rgba(255,255,255,.75); text-decoration: none; }
.ifc-foot .ifc-foot__legal a:hover { color: #fff; }
.ifc-foot__sep { opacity: .4; }
.ifba-chrome .ifc-top-btn, .ifc-foot .ifc-top-btn {
	flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 12px;
	background: rgba(255,255,255,.06); color: #fff; cursor: pointer; transition: background-color .2s ease, transform .2s var(--ifc-ease);
}
.ifc-foot .ifc-top-btn:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.ifc-foot .ifc-top-btn:focus-visible, .ifc-foot a:focus-visible, .ifc-foot button:focus-visible { outline: 2px solid var(--ifc-light); outline-offset: 2px; }

/* ---------- motion, opt-in ---------- */
@keyframes ifc-drop-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ifc-sheet-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes ifc-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ifc-drift-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-7%, 9%, 0) scale(1.14); } }
@keyframes ifc-drift-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.04); } 50% { transform: translate3d(9%, -7%, 0) scale(.94); } }
@keyframes ifc-sheen { 0% { transform: translateX(-140%); } 55%, 100% { transform: translateX(420%); } }
@media (prefers-reduced-motion: no-preference) {
	.ifc-drop:not([hidden]) { animation: ifc-drop-in .22s var(--ifc-ease) both; transform-origin: top center; }
	.ifc-panel[data-open="1"] .ifc-panel__sheet { animation: ifc-sheet-in .34s var(--ifc-ease) both; }
	.ifc-panel[data-open="1"] .ifc-panel__scrim { animation: ifc-scrim-in .3s ease both; }
	.ifc-panel[data-open="1"] .ifc-acc { animation: ifc-fade-up .42s var(--ifc-ease) both; animation-delay: var(--d, 0ms); }
	.ifc-foot__glow::before { animation: ifc-drift-a 26s ease-in-out infinite; will-change: transform; }
	.ifc-foot__glow::after { animation: ifc-drift-b 34s ease-in-out infinite; will-change: transform; }
	.ifc-top::after { animation: ifc-sheen 14s ease-in-out infinite; will-change: transform; }
	.ifc-top__dot { animation: ifc-glow 3s ease-in-out infinite; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
	.ifc-spacer { height: calc(72px + var(--ifc-top-h)); }
	.ifc-foot .ifc-foot__main { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 720px) {
	.ifc-top__links { display: none; }
	.ifc-foot__cols { grid-template-columns: 1fr 1fr; gap: 26px; }
	.ifc-foot__bottominner { flex-wrap: wrap; }
	.ifc-foot__legal { margin-left: 0 !important; width: 100%; order: 3; }
}
@media (max-width: 460px) {
	.ifc-foot__cols { grid-template-columns: 1fr; }
}
@media print {
	.ifc-top { display: none !important; }
}

/* ---------- footer: brand, links, newsletter ---------- */
.ifc-foot .ifc-foot__main { grid-template-columns: 1.05fr 1.3fr minmax(300px, 1.25fr); gap: 40px; align-items: start; }
.ifc-foot .ifc-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* links with icons: a tile that lights up, text that steps forward */
.ifc-foot .ifc-foot__col .ifc-foot__link { display: inline-flex; align-items: center; gap: 10px; }
.ifc-foot .ifc-foot__col .ifc-foot__link::after { display: none; }
.ifc-foot .ifc-foot__linkicon {
	flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 9px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09); color: var(--ifc-light);
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.ifc-foot .ifc-foot__linkicon .ifc-ico { width: 15px; height: 15px; }
.ifc-foot .ifc-foot__col .ifc-foot__link span:last-child { transition: transform .2s ease; }
.ifc-foot .ifc-foot__col .ifc-foot__link:hover .ifc-foot__linkicon { background: rgba(94,234,212,.16); border-color: rgba(94,234,212,.35); transform: translateY(-1px); }
.ifc-foot .ifc-foot__col .ifc-foot__link:hover span:last-child { transform: translateX(3px); }
.ifc-foot .ifc-foot__col ul { gap: 12px; }

/* the newsletter card */
.ifc-foot .ifc-news {
	position: relative; padding: 24px; border-radius: 20px;
	background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
	border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 48px -32px rgba(0,0,0,.6);
}
.ifc-foot .ifc-news__icon {
	width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
	border-radius: 13px; color: #fff; background: linear-gradient(135deg, #14B8A6, #0B6F68);
	box-shadow: 0 10px 24px -8px rgba(20,184,166,.6);
}
.ifc-foot .ifc-news__title { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: #fff; }
.ifc-foot .ifc-news__text { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.72); }
.ifc-foot .ifc-news__field {
	display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 16px; border-radius: 14px;
	background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.12); transition: border-color .18s ease, box-shadow .18s ease;
}
.ifc-foot .ifc-news__field:focus-within { border-color: rgba(94,234,212,.6); box-shadow: 0 0 0 4px rgba(94,234,212,.14); }
.ifc-foot .ifc-news__field input {
	flex: 1; min-width: 0; min-height: 40px; border: 0; background: transparent; color: #fff; font: inherit; font-size: 14.5px; outline: none;
}
.ifc-foot .ifc-news__field input::placeholder { color: rgba(255,255,255,.62); }
.ifc-foot .ifc-news__send {
	flex: none; min-height: 40px; padding: 0 18px; border: 0; border-radius: 10px; cursor: pointer;
	background: #5EEAD4; color: #062A31; font: inherit; font-size: 14.5px; font-weight: 800;
	transition: transform .15s ease, filter .15s ease;
}
.ifc-foot .ifc-news__send:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ifc-foot .ifc-news__send:disabled { opacity: .7; cursor: progress; transform: none; }
.ifc-foot .ifc-news__send:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ifc-foot .ifc-news__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ifc-foot .ifc-news__consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.72); cursor: pointer; }
.ifc-foot .ifc-news__consent input { flex: none; width: 17px; height: 17px; margin: 2px 0 0; accent-color: #5EEAD4; }
.ifc-foot .ifc-news__status { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.8); }
.ifc-foot .ifc-news__status:empty { margin: 0; }
.ifc-foot .ifc-news__status.is-ok { color: #5EEAD4; }
.ifc-foot .ifc-news__status.is-error { color: #FCA5A5; }
.ifc-foot .ifc-news__apps-title { margin: 20px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.ifc-foot .ifc-news__apps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ifc-foot .ifc-news__app {
	display: flex; flex-direction: column; padding: 10px 14px; border-radius: 12px; text-decoration: none;
	background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.12); transition: border-color .18s ease, transform .18s ease;
}
.ifc-foot .ifc-news__app:hover { border-color: rgba(94,234,212,.5); transform: translateY(-1px); }
.ifc-foot .ifc-news__appkicker { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #5EEAD4; }
.ifc-foot .ifc-news__appname { font-size: 15px; font-weight: 800; color: #fff; }
@media (max-width: 1024px) {
	.ifc-foot .ifc-foot__main { grid-template-columns: 1fr 1fr; }
	.ifc-foot .ifc-news { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
	.ifc-foot .ifc-foot__main { grid-template-columns: 1fr; }
}

/* =========================================================================
   FOOTER — REFINED
   Restraint over decoration: quieter icons, clear headings, more air, and
   a bottom bar in three balanced parts.
   ====================================================================== */
.ifc-foot .ifc-foot__main { padding-top: 76px; padding-bottom: 56px; gap: 56px; }
.ifc-foot .ifc-foot__blurb { max-width: 36ch; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.7); }

/* column headings: white, spaced, with a short brand rule beneath */
.ifc-foot .ifc-foot__title {
	position: relative; margin: 0 0 22px; padding-bottom: 12px;
	font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff;
}
.ifc-foot .ifc-foot__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; border-radius: 2px; background: var(--ifc-light); }

/* links: a fine teal glyph beside each, no boxes */
.ifc-foot .ifc-foot__col ul { gap: 14px; }
.ifc-foot .ifc-foot__col .ifc-foot__link { gap: 12px; font-size: 14.5px; color: rgba(255,255,255,.74); }
.ifc-foot .ifc-foot__col .ifc-foot__link:hover { color: #fff; }
.ifc-foot .ifc-foot__linkicon { width: 18px; height: 18px; border: 0; border-radius: 0; background: transparent; color: var(--ifc-light); opacity: .8; }
.ifc-foot .ifc-foot__linkicon .ifc-ico { width: 17px; height: 17px; }
.ifc-foot .ifc-foot__col .ifc-foot__link:hover .ifc-foot__linkicon { background: transparent; border: 0; opacity: 1; transform: none; }

/* the promises: one quiet line, divided */
.ifc-foot .ifc-foot__trust { justify-content: center; gap: 0; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.08); }
.ifc-foot .ifc-foot__trust li { padding: 4px 22px; font-size: 13px; color: rgba(255,255,255,.7); }
.ifc-foot .ifc-foot__trust li + li { border-left: 1px solid rgba(255,255,255,.12); }

/* bottom bar: copyright | legal | back to top */
.ifc-foot .ifc-foot__bottom { background: rgba(0,0,0,.18); border-top: 1px solid rgba(255,255,255,.06); }
.ifc-foot .ifc-foot__bottominner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.ifc-foot .ifc-foot__bottominner > p:first-child { justify-self: start; }
.ifc-foot .ifc-foot__legal { margin: 0 !important; justify-self: center; }
.ifc-foot .ifc-top-btn { justify-self: end; }

@media (max-width: 720px) {
	.ifc-foot .ifc-foot__main { padding-top: 56px; gap: 40px; }
	.ifc-foot .ifc-foot__trust { justify-content: flex-start; }
	.ifc-foot .ifc-foot__trust li { width: 100%; padding: 6px 0; }
	.ifc-foot .ifc-foot__trust li + li { border-left: 0; }
	.ifc-foot .ifc-foot__bottominner { grid-template-columns: 1fr auto; }
	.ifc-foot .ifc-foot__legal { grid-column: 1 / -1; justify-self: start; }
}
/* =========================================================================
   ASSISTANT (Snippet 35)
   ====================================================================== */
.ifba-asst {
	--ifa-ink: #08313A; --ifa-teal: #0D9488; --ifa-light: #5EEAD4;
	--ifa-paper: #F7FAFA; --ifa-line: #E2ECEB; --ifa-muted: #5B7076;
	--ifa-ease: cubic-bezier(.22, 1, .36, 1);
	font-family: var(--ifh-body, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
.ifba-asst *, .ifba-asst *::before, .ifba-asst *::after { box-sizing: border-box; }

/* launcher — round, showing the assistant's picture */
.ifba-asst .ifa-launch {
	/* --ifa-y is the distance from the bottom edge the visitor chose by
	   dragging; without it, the usual corner. */
	position: fixed; right: 22px; bottom: var(--ifa-y, 22px); z-index: 9995;
	touch-action: none; -webkit-user-select: none; user-select: none;
	width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	/* Sits behind the picture: shows through transparent areas, and is what
	   remains if the image ever fails to load. */
	background: linear-gradient(135deg, var(--ifa-teal), var(--ifa-ink));
	color: #fff; font-family: inherit;
	box-shadow: 0 14px 34px -12px rgba(8,49,58,.6), 0 0 0 3px #fff;
	transition: transform .22s var(--ifa-ease), box-shadow .22s var(--ifa-ease);
}
.ifba-asst .ifa-launch:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 22px 42px -14px rgba(8,49,58,.65), 0 0 0 3px #fff; }
.ifba-asst .ifa-launch:focus-visible { outline: 3px solid var(--ifa-light); outline-offset: 4px; }
.ifa-launch__img {
	display: block; width: 100%; height: 100%; border-radius: 50%;
	object-fit: cover; object-position: center;
}
.ifa-launch__icon { width: 26px; height: 26px; flex: none; }
.ifa-launch__ring {
	position: absolute; top: -5px; right: -5px; bottom: -5px; left: -5px; border-radius: 50%;
	border: 2px solid var(--ifa-teal); opacity: 0; pointer-events: none;
}
/* An "available" dot, the convention people read without thinking. */
.ifa-launch__dot {
	position: absolute; right: 1px; bottom: 1px; width: 15px; height: 15px; border-radius: 50%;
	background: #22C55E; border: 3px solid #fff; pointer-events: none;
}
.ifa-launch__tip {
	position: absolute; right: calc(100% + 14px); top: 50%;
	transform: translateY(-50%) translateX(6px);
	padding: 8px 13px; border-radius: 10px; white-space: nowrap; pointer-events: none;
	background: var(--ifa-ink); color: #fff; font-size: 13px; font-weight: 600;
	box-shadow: 0 10px 24px -10px rgba(8,49,58,.5);
	opacity: 0; transition: opacity .18s var(--ifa-ease), transform .18s var(--ifa-ease);
}
.ifba-asst .ifa-launch:hover .ifa-launch__tip,
.ifba-asst .ifa-launch:focus-visible .ifa-launch__tip { opacity: 1; transform: translateY(-50%); }
@media (hover: none) { .ifa-launch__tip { display: none; } }
@media (prefers-reduced-motion: no-preference) {
	/* The glide home: a transform, with a touch of overshoot, so it settles
	   against the edge like something with weight rather than stopping dead. */
	.ifba-asst .ifa-launch.is-settling { transition: transform .52s cubic-bezier(.2, 1.3, .4, 1), box-shadow .3s ease; will-change: transform; }
}
.ifba-asst .ifa-launch[aria-expanded="true"] { transform: scale(.88); opacity: 0; pointer-events: none; }

/* moved to the left edge */
.ifba-asst.is-left .ifa-launch { right: auto; left: 22px; }
.ifba-asst.is-left .ifa-launch__tip { right: auto; left: calc(100% + 14px); transform: translateY(-50%) translateX(-6px); }
.ifba-asst.is-left .ifa-launch:hover .ifa-launch__tip,
.ifba-asst.is-left .ifa-launch:focus-visible .ifa-launch__tip { transform: translateY(-50%); }
.ifba-asst.is-left .ifa-panel { right: auto; left: 22px; }

/* being dragged: follows the pointer with no easing, lifted a little */
.ifba-asst .ifa-launch.is-dragging {
	/* No easing while held: the button must sit exactly under the pointer,
	   or it trails behind and feels like it is being dragged through mud. */
	cursor: grabbing; transition: none; will-change: transform;
	box-shadow: 0 26px 48px -16px rgba(8,49,58,.7), 0 0 0 3px #fff;
}
.ifba-asst .ifa-launch.is-dragging .ifa-launch__tip { opacity: 0; }
.ifa-panel.is-dragging { -webkit-user-select: none; user-select: none; transition: none; will-change: transform; }

/* panel */
/* An author rule always beats the browser's own [hidden] { display: none },
   so a component that sets display MUST restate it — otherwise the panel is
   permanently visible and the close button appears to do nothing. */
.ifa-panel[hidden] { display: none; }
.ifa-panel {
	/* Opens level with the launcher; the script clamps it on screen. */
	position: fixed; right: 22px; bottom: var(--ifa-panel-y, 22px); z-index: 9996;
	width: 392px; max-width: calc(100vw - 32px); height: 580px; max-height: calc(100vh - 44px);
	display: flex; flex-direction: column; overflow: hidden;
	background: #fff; border: 1px solid var(--ifa-line); border-radius: 20px;
	box-shadow: 0 32px 70px -24px rgba(8,49,58,.45);
}
.ifa-panel__head {
	display: flex; align-items: center; gap: 12px; padding: 16px 18px;
	background: linear-gradient(135deg, var(--ifa-ink), var(--ifa-teal)); color: #fff; flex: none;
}
.ifa-avatar-wrap { position: relative; flex: none; width: 42px; height: 42px; }
.ifa-avatar {
	display: block; width: 42px; height: 42px; border-radius: 50%;
	background: linear-gradient(135deg, var(--ifa-light), rgba(255,255,255,.35));
	box-shadow: 0 0 0 2px rgba(255,255,255,.75);
}
.ifa-avatar--img { object-fit: cover; object-position: center; }
.ifa-avatar__dot {
	position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%;
	background: #22C55E; border: 2px solid var(--ifa-teal);
}
/* the same picture beside each answer */
.ifa-msg.has-avatar { flex-direction: row; align-items: flex-end; gap: 9px; max-width: 92%; }
.ifa-msg__face {
	flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
	background: linear-gradient(135deg, var(--ifa-teal), var(--ifa-ink));
	box-shadow: 0 0 0 2px #fff, 0 2px 6px -2px rgba(8,49,58,.3);
}
.ifa-msg__body { display: flex; flex-direction: column; min-width: 0; }
.ifa-panel__who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.ifa-panel__who strong { font-size: 15px; font-weight: 650; }
.ifa-panel__who span { font-size: 12px; opacity: .78; }
.ifba-asst .ifa-panel__close, .ifba-asst .ifa-panel__move {
	margin-left: auto; width: 34px; height: 34px; flex: none; display: grid; place-items: center;
	background: rgba(255,255,255,.14); border: 0; border-radius: 10px; color: #fff; cursor: pointer;
}
.ifba-asst .ifa-panel__move + .ifa-panel__close { margin-left: 0; }
.ifba-asst .ifa-panel__close svg, .ifba-asst .ifa-panel__move svg { width: 17px; height: 17px; }
.ifba-asst .ifa-panel__close:hover, .ifba-asst .ifa-panel__move:hover { background: rgba(255,255,255,.26); }
.ifba-asst .ifa-panel__close:focus-visible, .ifba-asst .ifa-panel__move:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* The header is the handle on screens where the panel floats. */
@media (min-width: 561px) {
	.ifa-panel__head { cursor: grab; touch-action: none; }
	.ifa-panel.is-dragging .ifa-panel__head { cursor: grabbing; }
}

/* log */
.ifa-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; background: var(--ifa-paper); }
.ifa-msg { display: flex; flex-direction: column; max-width: 86%; }
.ifa-msg--them { align-self: flex-start; }
.ifa-msg--me { align-self: flex-end; align-items: flex-end; }
.ifa-bubble {
	padding: 12px 15px; border-radius: 16px; font-size: 14.5px; line-height: 1.6;
	white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
}
.ifa-msg--them .ifa-bubble { background: #fff; border: 1px solid var(--ifa-line); border-bottom-left-radius: 5px; color: var(--ifa-ink); }
.ifa-msg--me .ifa-bubble { background: var(--ifa-teal); color: #fff; border-bottom-right-radius: 5px; }
.ifa-msg--them.is-refusal .ifa-bubble { background: #FEF6E7; border-color: #F6D9A0; }
.ifba-asst .ifa-bubble a { color: inherit; text-decoration: underline; word-break: break-all; }
.ifa-tag {
	align-self: flex-start; margin-top: 6px; font-size: 11px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; color: var(--ifa-muted);
}
.ifa-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.ifba-asst .ifa-chip {
	padding: 8px 13px; border-radius: 999px; border: 1px solid var(--ifa-line);
	background: #fff; color: var(--ifa-ink); font-family: inherit; font-size: 13px;
	cursor: pointer; min-height: 36px;
}
.ifba-asst .ifa-chip:hover { border-color: var(--ifa-teal); color: var(--ifa-teal); }

/* typing */
.ifa-typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.ifa-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ifa-muted); opacity: .4; }

/* form */
.ifa-form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--ifa-line); background: #fff; flex: none; }
.ifba-asst .ifa-input {
	flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid var(--ifa-line); border-radius: 12px;
	font-family: inherit; font-size: 14.5px; color: var(--ifa-ink); background: var(--ifa-paper);
}
.ifba-asst .ifa-input:focus { outline: none; border-color: var(--ifa-teal); box-shadow: 0 0 0 3px rgba(13,148,136,.12); }
.ifba-asst .ifa-send {
	width: 46px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px;
	background: var(--ifa-teal); color: #fff; cursor: pointer; min-height: 44px;
}
.ifba-asst .ifa-send svg { width: 19px; height: 19px; }
.ifba-asst .ifa-send:disabled { opacity: .5; cursor: default; }
.ifa-panel__foot { margin: 0; padding: 0 14px 12px; font-size: 11.5px; color: var(--ifa-muted); background: #fff; flex: none; }

/* motion — added, never required for anything to be readable */
@keyframes ifa-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ifa-ring { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes ifa-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
	.ifa-panel[data-open="1"] { animation: ifa-pop .34s var(--ifa-ease) both; }
	.ifa-msg { animation: ifa-pop .3s var(--ifa-ease) both; }
	.ifa-launch__ring { animation: ifa-ring 3.2s ease-out infinite; }
	.ifa-typing span { animation: ifa-blink 1.2s infinite; }
	.ifa-typing span:nth-child(2) { animation-delay: .18s; }
	.ifa-typing span:nth-child(3) { animation-delay: .36s; }
}

@media (max-width: 560px) {
	/* Full screen whichever side the button lives on. The .is-left rule is
	   more specific, so it has to be named here to be overridden. */
	.ifba-asst .ifa-panel, .ifba-asst.is-left .ifa-panel { left: 0; right: 0; bottom: 0; width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; border: 0; }
	.ifba-asst .ifa-launch { right: 16px; bottom: var(--ifa-y, 16px); width: 58px; height: 58px; }
	.ifba-asst.is-left .ifa-launch { right: auto; left: 16px; }
}
@media print { .ifba-asst { display: none !important; } }

/* ---------- contact hub ---------- */
/* Views switch on one attribute rather than hidden on many parts, so no
   author display rule can ever out-rank the switch. */
.ifa-panel[data-view="hub"] [data-asst-chatpart] { display: none; }
.ifa-panel[data-view="chat"] .ifa-hub { display: none; }
.ifa-panel[data-view="hub"] .ifa-panel__who--chat,
.ifa-panel[data-view="chat"] .ifa-panel__who--hub { display: none; }

.ifba-asst .ifa-panel__back {
	width: 34px; height: 34px; flex: none; display: grid; place-items: center; margin-right: -4px;
	background: rgba(255,255,255,.14); border: 0; border-radius: 10px; color: #fff; cursor: pointer;
}
.ifba-asst .ifa-panel__back[hidden] { display: none; }
.ifba-asst .ifa-panel__back:hover { background: rgba(255,255,255,.26); }
.ifba-asst .ifa-panel__back:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ifba-asst .ifa-panel__back svg { width: 18px; height: 18px; }

.ifa-hub { flex: 1; overflow-y: auto; padding: 18px; background: var(--ifa-paper); display: flex; flex-direction: column; gap: 14px; }
.ifa-hub__lede { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ifa-muted); }
.ifa-hub__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ifba-asst .ifa-ch {
	display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box;
	padding: 13px 14px; border: 1px solid var(--ifa-line); border-radius: 16px; background: #fff;
	color: var(--ifa-ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
	box-shadow: 0 1px 2px rgba(8,49,58,.05);
	transition: transform .2s var(--ifa-ease), box-shadow .2s var(--ifa-ease), border-color .2s var(--ifa-ease);
}
.ifba-asst .ifa-ch:hover, .ifba-asst .ifa-ch:focus-visible {
	transform: translateY(-2px); border-color: rgba(13,148,136,.35);
	box-shadow: 0 16px 30px -18px rgba(8,49,58,.4);
}
.ifba-asst .ifa-ch:focus-visible { outline: 2px solid var(--ifa-teal); outline-offset: 2px; }
.ifa-ch__icon {
	flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: #fff;
	transition: transform .25s var(--ifa-ease);
}
.ifa-ch__icon svg { width: 22px; height: 22px; }
.ifba-asst .ifa-ch:hover .ifa-ch__icon { transform: scale(1.07) rotate(-4deg); }
.ifa-ch--assistant .ifa-ch__icon { background: linear-gradient(135deg, var(--ifa-teal), var(--ifa-ink)); }
.ifa-ch--whatsapp .ifa-ch__icon { background: #1FAF55; }
.ifa-ch--phone .ifa-ch__icon { background: linear-gradient(135deg, #2563EB, #1E40AF); }
.ifa-ch--email .ifa-ch__icon { background: linear-gradient(135deg, #F59E0B, #C2410C); }
.ifba-asst .ifa-ch--assistant { background: linear-gradient(135deg, rgba(13,148,136,.09), #fff 70%); border-color: rgba(13,148,136,.28); }
.ifa-ch__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ifa-ch__text strong { font-size: 15px; font-weight: 650; line-height: 1.25; }
.ifa-ch__text span { font-size: 13px; color: var(--ifa-muted); line-height: 1.3; overflow-wrap: anywhere; }
.ifa-ch__go { flex: none; margin-left: auto; color: var(--ifa-muted); transition: transform .2s var(--ifa-ease), color .2s var(--ifa-ease); }
.ifa-ch__go svg { width: 18px; height: 18px; display: block; }
.ifba-asst .ifa-ch:hover .ifa-ch__go { transform: translateX(3px); color: var(--ifa-teal); }
.ifa-hub__hours { margin: 2px 0 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ifa-muted); }
.ifa-hub__hours svg { width: 16px; height: 16px; flex: none; color: var(--ifa-teal); }

@keyframes ifa-hub-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	.ifa-panel[data-view="hub"][data-open="1"] .ifa-hub__list li { animation: ifa-hub-in .38s var(--ifa-ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
	.ifa-panel[data-view="chat"][data-open="1"] [data-asst-chatpart] { animation: ifa-hub-in .3s var(--ifa-ease) both; }
}
@media (max-width: 560px) {
	.ifa-hub { padding: 16px; }
	.ifba-asst .ifa-ch { padding: 15px 14px; }
}

/* =========================================================================
   CONTACT BAR
   ====================================================================== */
.ifa-bar {
	position: fixed; right: 22px; bottom: calc(var(--ifa-y, 22px) + 80px); z-index: 9996;
	display: flex; flex-direction: column; align-items: flex-end; gap: 10px; max-width: calc(100vw - 32px);
}
/* A bar that sets display must still honour [hidden]. */
.ifa-bar[hidden] { display: none; }
.ifba-asst.is-left .ifa-bar { right: auto; left: 22px; align-items: flex-start; }
.ifa-bar__head {
	display: flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; border-radius: 999px;
	background: linear-gradient(135deg, var(--ifa-ink), var(--ifa-teal)); color: #fff;
	box-shadow: 0 16px 36px -16px rgba(8,49,58,.6);
}
.ifa-bar__av { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.2); box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.ifa-bar__who { display: flex; flex-direction: column; line-height: 1.25; }
.ifa-bar__who strong { font-size: 14px; }
.ifa-bar__who span { font-size: 12px; color: rgba(255,255,255,.78); }
.ifa-bar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ifba-asst.is-left .ifa-bar__list { align-items: flex-start; }
/* The copy button sits on the inner side, so every icon circle lines up in
   one column along the edge the button lives on. */
.ifa-bar__list li { display: flex; flex-direction: row-reverse; align-items: center; gap: 8px; }
.ifba-asst.is-left .ifa-bar__list li { flex-direction: row; }
.ifba-asst .ifa-bar__item {
	display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 18px; border: 1px solid rgba(8,49,58,.08); border-radius: 999px;
	background: #fff; color: var(--ifa-ink); font: inherit; text-align: right; text-decoration: none; cursor: pointer;
	box-shadow: 0 14px 32px -16px rgba(8,49,58,.5); transition: transform .18s ease, box-shadow .18s ease;
}
.ifba-asst.is-left .ifa-bar__item { flex-direction: row-reverse; padding: 6px 18px 6px 6px; text-align: left; }
.ifba-asst .ifa-bar__item:hover { transform: translateX(-4px); box-shadow: 0 18px 38px -16px rgba(8,49,58,.6); }
.ifba-asst.is-left .ifa-bar__item:hover { transform: translateX(4px); }
.ifba-asst .ifa-bar__item:focus-visible, .ifba-asst .ifa-bar__copy:focus-visible { outline: 3px solid var(--ifa-teal); outline-offset: 2px; }
.ifa-bar__text { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.ifa-bar__text strong { font-size: 14px; }
.ifa-bar__text span { font-size: 12px; color: #5B7076; }
/* White glyphs on deep tints, each at or above 4.5:1. */
.ifa-bar__icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.ifa-bar__icon svg { width: 21px; height: 21px; }
.ifa-bar__item--assistant .ifa-bar__icon { background: linear-gradient(135deg, var(--ifa-teal), var(--ifa-ink)); }
.ifa-bar__item--whatsapp .ifa-bar__icon { background: #0B7A6D; }
.ifa-bar__item--phone .ifa-bar__icon { background: #0E7490; }
.ifa-bar__item--email .ifa-bar__icon { background: #B45309; }
.ifba-asst .ifa-bar__copy {
	flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0;
	border: 1px solid rgba(8,49,58,.1); border-radius: 50%; background: #fff; color: var(--ifa-ink); cursor: pointer;
	box-shadow: 0 8px 20px -12px rgba(8,49,58,.45); transition: transform .18s ease;
}
.ifba-asst .ifa-bar__copy:hover { transform: scale(1.08); }
.ifa-bar__copy svg { width: 16px; height: 16px; }
.ifa-bar__status { margin: 0; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #fff; }
.ifa-bar__status:not(:empty) { padding: 7px 14px; background: var(--ifa-ink); }

/* the button becomes a close mark while the bar is open */
.ifa-launch__x {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--ifa-ink); color: #fff; opacity: 0; transform: rotate(-90deg) scale(.6); pointer-events: none;
}
.ifa-launch__x svg { width: 24px; height: 24px; }
.ifa-launch.is-bar-open .ifa-launch__x { opacity: 1; transform: none; }
.ifa-launch.is-bar-open .ifa-launch__dot, .ifa-launch.is-bar-open .ifa-launch__tip { opacity: 0; }
/* aria-expanded hides the button while the chat window is open; with the
   bar the button stays, as its close control. */
.ifba-asst .ifa-launch.is-bar-open[aria-expanded="true"] { transform: none; opacity: 1; pointer-events: auto; }

@keyframes ifa-bar-in { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	.ifa-bar:not([hidden]) .ifa-bar__head, .ifa-bar:not([hidden]) .ifa-bar__list li { animation: ifa-bar-in .32s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
	.ifa-launch__x { transition: opacity .2s ease, transform .28s cubic-bezier(.22, 1, .36, 1); }
}
@media (max-width: 560px) {
	.ifa-bar { right: 16px; bottom: calc(var(--ifa-y, 16px) + 72px); }
	.ifba-asst.is-left .ifa-bar { left: 16px; }
}

/* Pictures inside things you can drag must never be dragged themselves:
   the browser's image-drag would cancel moving the button or the panel. */
.ifba-asst .ifa-launch img, .ifba-asst .ifa-panel__head img {
	-webkit-user-drag: none; user-drag: none; pointer-events: none; -webkit-user-select: none; user-select: none;
}
.ifba-asst .ifa-launch { -webkit-touch-callout: none; }
/* =========================================================================
   MARKETING PAGES (Snippet 37)
   ====================================================================== */
.ifm-hero { position: relative; overflow: hidden; background: var(--ifh-ink); color: #fff; padding: 128px 0 96px; text-align: center; }
.ifm-hero__inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.ifba-home .ifm-hero__title {
	font-family: var(--ifh-display); font-size: clamp(32px, 4.6vw, 54px); font-weight: 700;
	letter-spacing: -.02em; color: #fff; margin: 14px 0 16px;
}
.ifm-hero .ifh-lede { text-align: center; margin: 0 auto; }
/* Same grouping as the homepage: the lede belongs to the title above it. */
.ifba-home .ifm-hero__title + .ifh-lede { margin-top: -4px; }

/* stages */
.ifm-stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; counter-reset: none; }
.ifm-stage { display: grid; grid-template-columns: 66px 1fr; gap: 24px; align-items: start; }
.ifm-stage__marker { display: flex; align-items: center; justify-content: center; position: relative; }
.ifm-stage__marker > span {
	display: flex; align-items: center; justify-content: center; width: 54px; height: 54px;
	border-radius: 50%; background: var(--ifh-ink); color: #fff;
	font-family: var(--ifh-display); font-size: 20px; font-weight: 700;
}
.ifm-stage:not(:last-child) .ifm-stage__marker::after {
	content: ""; position: absolute; top: 60px; bottom: -34px; left: 50%; width: 2px;
	margin-left: -1px; background: linear-gradient(var(--ifh-primary), var(--ifh-line));
}
.ifm-stage__body {
	background: var(--ifh-white); border: 1px solid var(--ifh-line); border-radius: 20px;
	padding: 24px 26px; box-shadow: var(--ifh-shadow);
}
.ifm-stage__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.ifba-home .ifm-stage__title { font-size: clamp(18px, 2.1vw, 23px); margin: 0; }
.ifm-stage__time {
	flex: none; padding: 5px 12px; border-radius: 999px; background: rgba(13,148,136,.1);
	color: var(--ifh-primary); font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
}
.ifm-stage__notes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.ifm-stage__notes li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; color: var(--ifh-muted); }
.ifm-stage__notes .ifba-home__icon { width: 17px; height: 17px; color: var(--ifh-primary); margin-top: 2px; flex: none; }

/* what you need */
.ifm-need { background: var(--ifh-paper); }
.ifm-need__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* specimen */
.ifm-specimen__stage { position: relative; max-width: 820px; margin: 0 auto; perspective: 1200px; }

/* what it is / is not */
.ifm-truth { background: var(--ifh-paper); }
.ifm-truth__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ifm-truth__col { background: var(--ifh-white); border: 1px solid var(--ifh-line); border-radius: 20px; padding: 28px; box-shadow: var(--ifh-shadow); }
.ifm-truth__col--is { border-top: 3px solid var(--ifh-primary); }
.ifm-truth__col--isnt { border-top: 3px solid var(--ifh-amber); }
.ifba-home .ifm-truth__title { font-size: 20px; margin-bottom: 16px; }
.ifm-truth__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.ifm-truth__list li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; }
.ifm-truth__col--is .ifba-home__icon { color: var(--ifh-primary); }
.ifm-truth__col--isnt .ifba-home__icon { color: var(--ifh-amber); transform: rotate(45deg); }
.ifm-truth__list .ifba-home__icon { flex: none; margin-top: 2px; }
.ifm-truth__note { margin: 18px 0 0; font-size: 14px; color: var(--ifh-muted); font-style: italic; }

/* verification */
.ifm-verify { text-align: center; }
.ifm-verify .ifh-lede { margin: 0 auto 28px; text-align: center; }
.ifm-verify__box {
	max-width: 620px; margin: 0 auto; background: var(--ifh-white); border: 1px solid var(--ifh-line);
	border-radius: 20px; padding: 28px; box-shadow: var(--ifh-shadow); text-align: left;
}

/* closing call to action */
.ifm-cta { background: var(--ifh-ink); color: #fff; padding: 96px 0; text-align: center; }
.ifm-cta__note { margin: 14px 0 0; font-size: 14px; color: rgba(255,255,255,.6); }

@media (max-width: 900px) {
	.ifm-hero { padding: 92px 0 68px; }
	.ifm-need__grid, .ifm-truth__grid { grid-template-columns: 1fr; }
	.ifm-stage { grid-template-columns: 48px 1fr; gap: 16px; }
	.ifm-stage__marker > span { width: 42px; height: 42px; font-size: 17px; }
	.ifm-stage:not(:last-child) .ifm-stage__marker::after { top: 48px; bottom: -32px; }
	.ifm-stage__body { padding: 20px; }
	.ifm-cta { padding: 68px 0; }
}
/* =========================================================================
   VERIFY & HELP PAGES (Snippet 38)
   ====================================================================== */
.ifm-hero--compact { padding: 96px 0 64px; }
.ifm-hero--verify { padding-bottom: 104px; }
/* room for the search box to sit across the hero's lower edge */
.ifm-hero--help { padding-bottom: 150px; }

/* ---------- verify: layout ---------- */
.ifv-main { padding-top: 64px; }
.ifv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; }
.ifv-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.ifv-card {
	background: var(--ifh-white); border: 1px solid var(--ifh-line); border-radius: 22px;
	padding: 30px; box-shadow: 0 26px 50px -30px rgba(8,49,58,.35);
}
.ifv-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.ifv-card__icon {
	flex: none; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
	background: rgba(13,148,136,.1); color: var(--ifh-primary-deep);
}
.ifba-home .ifv-card__title { font-size: 21px; margin: 0; }
.ifv-card__sub { margin: 3px 0 0; font-size: 13.5px; color: var(--ifh-muted); }

/* the form from Snippet 50, given room */
.ifv .ifba-verify { margin: 0; }
.ifv .ifba-verify__form .ifba-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 650; color: var(--ifh-ink); }
.ifv .ifba-verify__row { display: flex; gap: 10px; flex-wrap: wrap; }
.ifv .ifba-verify__row .ifba-input {
	flex: 1 1 240px; min-width: 0; height: 58px; padding: 0 18px; border-radius: 14px;
	border: 1.5px solid var(--ifh-line); background: var(--ifh-paper);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 17px;
	letter-spacing: .06em; text-transform: uppercase; color: var(--ifh-ink);
	transition: border-color .2s var(--ifh-ease), box-shadow .2s var(--ifh-ease), background .2s var(--ifh-ease);
}
.ifv .ifba-verify__row .ifba-input::placeholder { color: #8FA3A8; letter-spacing: .04em; }
.ifv .ifba-verify__row .ifba-input:focus {
	outline: none; border-color: var(--ifh-primary); background: var(--ifh-white);
	box-shadow: 0 0 0 4px rgba(13,148,136,.14);
}
.ifv .ifba-verify__row .ifba-btn { height: 58px; padding: 0 28px; border-radius: 14px; font-size: 16px; font-weight: 650; }

/* ---------- verify: the result ---------- */
.ifv-result { outline: none; border-radius: 24px; }
.ifv-result:focus-visible { box-shadow: 0 0 0 4px rgba(13,148,136,.25); }
.ifv .ifba-verify__result {
	position: relative; overflow: hidden; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px;
	padding: 30px; border-radius: 24px; border: 1.5px solid var(--ifh-line); background: var(--ifh-white);
	box-shadow: 0 30px 60px -34px rgba(8,49,58,.4);
}
.ifv .ifba-verify__result > svg {
	width: 64px; height: 64px; padding: 16px; border-radius: 50%; box-sizing: border-box;
}
.ifba-home .ifv .ifba-verify__result h3 { font-size: 24px; margin: 6px 0 4px; }
.ifv .ifba-verify__result p { margin: 4px 0 0; color: var(--ifh-muted); }

/* Colours measured against their own backgrounds: each passes 4.5:1. */
.ifv .ifba-verify__result.is-valid { border-color: #86D5AE; background: linear-gradient(160deg, #F0FBF5 0%, #FFFFFF 62%); }
.ifv .ifba-verify__result.is-valid > svg { background: #D5F2E3; color: #0C7E46; }
/* The brightest green that still clears 4.5:1 on this tint (4.85) — a
   success heading should read as green at a glance, not near-black. */
.ifba-home .ifv .ifba-verify__result.is-valid h3 { color: #0C7E46; }
.ifv .ifba-verify__result.is-revoked { border-color: #F2C27A; background: linear-gradient(160deg, #FFF8EC 0%, #FFFFFF 62%); }
.ifv .ifba-verify__result.is-revoked > svg { background: #FCE7C4; color: #92400E; }
.ifba-home .ifv .ifba-verify__result.is-revoked h3 { color: #92400E; }
.ifv .ifba-verify__result.is-invalid { border-color: #F0B7B2; background: linear-gradient(160deg, #FDF3F2 0%, #FFFFFF 62%); }
.ifv .ifba-verify__result.is-invalid > svg { background: #FADAD6; color: #A1261B; }
.ifba-home .ifv .ifba-verify__result.is-invalid h3 { color: #A1261B; }

.ifv .ifba-verify__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; }
.ifv .ifba-verify__details > div {
	padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.8); border: 1px solid var(--ifh-line);
}
.ifv .ifba-verify__details dt { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ifh-muted); }
.ifv .ifba-verify__details dd { margin: 4px 0 0; font-size: 16px; font-weight: 650; color: var(--ifh-ink); word-break: break-word; }
.ifv .ifba-verify__details code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .04em; background: none; padding: 0; }

.ifv-tips {
	list-style: none; margin: 16px 0 0; padding: 20px 22px; border-radius: 18px;
	background: var(--ifh-paper); border: 1px dashed var(--ifh-line); display: grid; gap: 10px;
}
.ifv-tips li { position: relative; padding-left: 20px; font-size: 14.5px; color: var(--ifh-ink); }
.ifv-tips li::before {
	content: ""; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; border-radius: 50%;
	background: var(--ifh-primary);
}
.ifba-home .ifv-tips a { color: var(--ifh-primary-deep); }

/* ---------- verify: aside ---------- */
.ifv-aside {
	position: sticky; top: 100px; background: var(--ifh-ink); color: #fff;
	border-radius: 22px; padding: 28px; box-shadow: 0 30px 60px -30px rgba(8,49,58,.6);
}
.ifba-home .ifv-aside__title { color: #fff; font-size: 19px; margin: 0 0 18px; }
.ifv-aside__note { margin: 18px 0 0; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.72); }

.ifv-mini {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 22px 18px 16px; border-radius: 12px; background: linear-gradient(158deg, #FEFDFB, #F2EDE3);
	box-shadow: inset 0 0 0 2px #9ED8CF, inset 0 0 0 6px #FEFDFB, inset 0 0 0 7px #C9E9E4;
	color: #123640; text-align: center;
}
.ifv-mini__org { font-size: 8.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #0B6F68; }
.ifv-mini__kind { font-family: var(--ifh-display); font-size: 14px; font-weight: 700; color: #0B2B33; }
.ifv-mini__rule { width: 40px; height: 2px; border-radius: 2px; background: var(--ifh-amber); margin: 2px 0; }
.ifv-mini__name { width: 58%; height: 9px; border-radius: 5px; background: rgba(11,43,51,.22); margin-top: 2px; }
.ifv-mini__line { width: 72%; height: 5px; border-radius: 3px; background: rgba(11,43,51,.1); }
.ifv-mini__line--short { width: 44%; }
.ifv-mini__foot { display: flex; align-items: center; justify-content: space-between; align-self: stretch; margin-top: 10px; }
.ifv-mini__seal {
	width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: radial-gradient(circle at 34% 30%, #F8C566, var(--ifh-amber) 64%, #C97F06); color: #fff;
	font-family: var(--ifh-display); font-size: 7.5px; font-weight: 700;
}
/* the thing the aside is about */
.ifv-mini__id {
	display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 6px 9px; border-radius: 8px;
	background: #FFF7E6; box-shadow: 0 0 0 2px var(--ifh-amber);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; font-weight: 700;
	color: #0B2B33; letter-spacing: .03em;
}
.ifv-mini__id i { font-style: normal; font-family: var(--ifh-body, inherit); font-size: 7.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #92400E; }
.ifv-mini__verify { align-self: stretch; margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(11,43,51,.1); font-size: 8px; color: #5B7076; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.ifv-confirms { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ifv-confirms li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: rgba(255,255,255,.8); }
.ifv-confirms b { color: #fff; }
.ifv-confirms__icon {
	flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
	background: rgba(94,234,212,.12); color: var(--ifh-light);
}

/* ---------- verify: how it works ---------- */
.ifv-how { background: var(--ifh-paper); }
.ifv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: none; }
.ifv-step {
	position: relative; background: var(--ifh-white); border: 1px solid var(--ifh-line); border-radius: 20px;
	padding: 28px 24px 24px; box-shadow: var(--ifh-shadow);
	transition: transform .25s var(--ifh-ease), box-shadow .25s var(--ifh-ease);
}
.ifv-step:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -22px rgba(8,49,58,.3); }
.ifv-step__num {
	display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
	background: var(--ifh-ink); color: #fff; font-family: var(--ifh-display); font-weight: 700; font-size: 17px; margin-bottom: 16px;
}
.ifba-home .ifv-step__title { font-size: 18px; margin: 0 0 6px; }
.ifv-step__body { margin: 0; font-size: 14.5px; color: var(--ifh-muted); }

/* ---------- verify: assurances ---------- */
.ifv-trust { padding: 34px 0 60px; }
.ifv-trust__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; }
.ifv-trust__list li { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--ifh-ink); }
.ifv-trust__list svg { color: var(--ifh-primary-deep); flex: none; }

/* ---------- help: search across the hero edge ---------- */
.ifhc .ifhc-body { position: relative; padding: 0 0 40px; }
.ifhc .ifba-help { position: relative; }
.ifhc .ifba-help__search {
	position: relative; z-index: 3; max-width: 760px; margin: -46px auto 0;
	background: var(--ifh-white); border-radius: 22px; padding: 10px;
	box-shadow: 0 34px 70px -30px rgba(8,49,58,.55), 0 0 0 1px rgba(8,49,58,.06);
}
.ifhc .ifba-help__search-row { display: flex; align-items: center; gap: 12px; padding: 0 12px 0 18px; color: var(--ifh-primary-deep); }
.ifhc .ifba-help__search-row .ifba-input {
	flex: 1; min-width: 0; height: 64px; border: 0; background: transparent; box-shadow: none;
	font-size: 18px; color: var(--ifh-ink); padding: 0;
}
.ifhc .ifba-help__search-row .ifba-input:focus { outline: none; }
.ifhc .ifba-help__search:focus-within { box-shadow: 0 34px 70px -30px rgba(8,49,58,.55), 0 0 0 3px rgba(13,148,136,.3); }
.ifhc .ifba-help__results { margin: 6px 6px 4px; border-top: 1px solid var(--ifh-line); padding-top: 8px; }
.ifhc .ifba-help__results[hidden] { display: none; }

/* ---------- help: topics ---------- */
.ifhc .ifhc-topics {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px;
	max-width: 1060px; margin: 44px auto 56px;
}
.ifhc .ifhc-topic {
	display: flex; flex-direction: column; gap: 4px; padding: 22px; border-radius: 18px; text-decoration: none;
	background: var(--ifh-white); border: 1px solid var(--ifh-line); box-shadow: var(--ifh-shadow);
	transition: transform .22s var(--ifh-ease), box-shadow .22s var(--ifh-ease), border-color .22s var(--ifh-ease);
}
.ifhc .ifhc-topic:hover, .ifhc .ifhc-topic:focus-visible {
	transform: translateY(-4px); border-color: rgba(13,148,136,.45);
	box-shadow: 0 24px 44px -22px rgba(8,49,58,.3); outline: none;
}
.ifhc .ifhc-topic__icon {
	width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
	background: rgba(13,148,136,.1); color: var(--ifh-primary-deep); margin-bottom: 10px;
	transition: background .22s var(--ifh-ease), color .22s var(--ifh-ease);
}
.ifhc .ifhc-topic:hover .ifhc-topic__icon, .ifhc .ifhc-topic:focus-visible .ifhc-topic__icon { background: var(--ifh-primary); color: #fff; }
.ifhc .ifhc-topic__label { font-family: var(--ifh-display); font-size: 17px; font-weight: 650; color: var(--ifh-ink); }
.ifhc .ifhc-topic__count { font-size: 13px; color: var(--ifh-muted); }

/* ---------- help: questions ---------- */
.ifhc .ifba-tabs { max-width: 860px; margin: 0 auto; }
.ifhc .ifba-tabs__list {
	display: inline-flex; gap: 4px; padding: 5px; border-radius: 14px; background: var(--ifh-paper);
	border: 1px solid var(--ifh-line); margin-bottom: 28px;
}
.ifhc .ifba-tabs__tab {
	border: 0; background: transparent; padding: 10px 20px; border-radius: 10px; cursor: pointer;
	font: inherit; font-size: 14.5px; font-weight: 650; color: var(--ifh-muted);
	transition: background .2s var(--ifh-ease), color .2s var(--ifh-ease), box-shadow .2s var(--ifh-ease);
}
.ifhc .ifba-tabs__tab[aria-selected="true"] { background: var(--ifh-white); color: var(--ifh-ink); box-shadow: 0 4px 12px -6px rgba(8,49,58,.3); }
.ifba-home .ifhc .ifba-help__category {
	font-size: 20px; margin: 40px 0 14px; padding-top: 4px; scroll-margin-top: 110px;
	display: flex; align-items: center; gap: 12px;
}
.ifba-home .ifhc .ifba-help__category::after { content: ""; flex: 1; height: 1px; background: var(--ifh-line); }
.ifba-home .ifhc .ifba-tabs__panel > .ifba-help__category:first-child { margin-top: 0; }
.ifhc .ifba-accordion__item {
	background: var(--ifh-white); border: 1px solid var(--ifh-line); border-radius: 16px; margin-bottom: 10px;
	transition: border-color .2s var(--ifh-ease), box-shadow .2s var(--ifh-ease);
}
.ifhc .ifba-accordion__item:hover { border-color: rgba(13,148,136,.35); box-shadow: 0 14px 30px -20px rgba(8,49,58,.25); }
.ifba-home .ifhc .ifba-accordion__heading { margin: 0; font-size: 16px; }
.ifhc .ifba-accordion__trigger {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
	padding: 18px 22px; border: 0; background: transparent; cursor: pointer; text-align: left;
	font: inherit; font-size: 16px; font-weight: 650; color: var(--ifh-ink);
}
.ifhc .ifba-accordion__chevron { color: var(--ifh-primary-deep); transition: transform .25s var(--ifh-ease); flex: none; }
.ifhc .ifba-accordion__trigger[aria-expanded="true"] .ifba-accordion__chevron { transform: rotate(180deg); }
.ifhc .ifba-accordion__panel { padding: 0 22px 20px; color: var(--ifh-muted); }
.ifhc .ifba-accordion__panel[hidden] { display: none; }
.ifhc .ifba-glossary__letter {
	font-family: var(--ifh-display); font-size: 26px; font-weight: 700; color: var(--ifh-primary-deep);
	margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--ifh-line);
}
.ifhc .ifba-glossary__term { padding: 12px 0; border-bottom: 1px dashed var(--ifh-line); }
.ifhc .ifba-glossary__term dt { font-weight: 700; color: var(--ifh-ink); }
.ifhc .ifba-glossary__term dd { margin: 4px 0 0; color: var(--ifh-muted); }

/* ---------- help: still stuck ---------- */
.ifhc .ifhc-stuck { background: var(--ifh-paper); }
.ifhc .ifhc-stuck .ifh-wrap { text-align: center; }
.ifba-home .ifhc .ifhc-stuck .ifh-lede { margin-left: auto; margin-right: auto; text-align: center; }
.ifhc .ifhc-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; text-align: left; }
.ifhc .ifhc-way {
	display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 28px; border-radius: 20px;
	background: var(--ifh-white); border: 1px solid var(--ifh-line); box-shadow: var(--ifh-shadow);
	transition: transform .22s var(--ifh-ease), box-shadow .22s var(--ifh-ease);
}
/* A display value here would otherwise override the hidden attribute. */
.ifhc .ifhc-way[hidden] { display: none; }
.ifhc .ifhc-way:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -22px rgba(8,49,58,.3); }
.ifhc .ifhc-way__icon {
	width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
	background: var(--ifh-ink); color: var(--ifh-light); margin-bottom: 8px;
}
.ifba-home .ifhc .ifhc-way__title { font-size: 19px; margin: 0; }
.ifhc .ifhc-way__body { margin: 0 0 12px; font-size: 14.5px; color: var(--ifh-muted); flex: 1; word-break: break-word; }

/* ---------- motion, all opt-in ---------- */
@keyframes ifv-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes ifv-ring { 0% { box-shadow: 0 0 0 0 rgba(12,126,70,.35); } 100% { box-shadow: 0 0 0 18px rgba(12,126,70,0); } }
@keyframes ifv-lift { from { transform: translateY(14px); } to { transform: none; } }
@keyframes ifv-glow { 0%, 100% { box-shadow: 0 0 0 2px var(--ifh-amber); } 50% { box-shadow: 0 0 0 2px var(--ifh-amber), 0 0 0 7px rgba(245,158,11,.22); } }

@media (prefers-reduced-motion: no-preference) {
	/* The result is never hidden to animate — it only moves. */
	.ifv .ifba-verify__result { animation: ifv-lift .55s var(--ifh-ease) both; }
	.ifv .ifba-verify__result > svg { animation: ifv-pop .6s cubic-bezier(.34, 1.4, .5, 1) .15s both; }
	.ifv .ifba-verify__result.is-valid > svg { animation: ifv-pop .6s cubic-bezier(.34, 1.4, .5, 1) .15s both, ifv-ring 1.4s ease-out .7s 2; }
	.ifv .ifba-verify__details > div { animation: ifv-lift .5s var(--ifh-ease) both; }
	.ifv .ifba-verify__details > div:nth-child(2) { animation-delay: .06s; }
	.ifv .ifba-verify__details > div:nth-child(3) { animation-delay: .12s; }
	.ifv .ifba-verify__details > div:nth-child(4) { animation-delay: .18s; }
	.ifv .ifba-verify__details > div:nth-child(5) { animation-delay: .24s; }
	.ifv-mini__id { animation: ifv-glow 2.4s ease-in-out infinite; }
}

@media (max-width: 1000px) {
	.ifv-grid { grid-template-columns: minmax(0, 1fr); }
	.ifv-aside { position: static; }
	.ifv-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.ifm-hero--help { padding-bottom: 120px; }
	.ifv-card, .ifv-aside { padding: 22px; }
	.ifv .ifba-verify__result { grid-template-columns: minmax(0, 1fr); padding: 22px; }
	.ifv .ifba-verify__details { grid-template-columns: minmax(0, 1fr); }
	.ifv .ifba-verify__row .ifba-btn { flex: 1 1 100%; }
	.ifhc .ifba-help__search { margin-top: -40px; }
	.ifhc .ifba-help__search-row .ifba-input { height: 56px; font-size: 16px; }
}

/* ---------- the seal ---------- */
/* Seated on the card's top edge like a medallion, so it reads as the
   record's own seal rather than something floating above it. */
.ifv-seal { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 4px 0 -46px; }
.ifv-seal__svg {
	position: relative; z-index: 1; display: block; width: 88px; height: 88px; padding: 12px;
	box-sizing: border-box; border-radius: 50%; background: #fff;
	box-shadow: 0 12px 28px -14px rgba(8,49,58,.45), 0 0 0 1px rgba(8,49,58,.06);
}
.ifv--valid .ifv-result .ifba-verify__result, .ifv--revoked .ifv-result .ifba-verify__result { padding-top: 64px; }
/* Drawn in full by default. Motion, below, only animates towards this. */
.ifv-seal__shield { stroke-width: 2.6; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.ifv-seal__mark { fill: none; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.ifv-seal--valid .ifv-seal__shield { fill: rgba(15,118,110,.09); stroke: var(--ifh-primary-deep); }
.ifv-seal--valid .ifv-seal__mark { stroke: var(--ifh-primary-deep); }
.ifv-seal--revoked .ifv-seal__shield { fill: rgba(180,83,9,.09); stroke: #B45309; }
.ifv-seal--revoked .ifv-seal__mark { stroke: #B45309; }
.ifv-seal__dot { fill: #B45309; }
.ifv-seal__pulse {
	position: absolute; top: 0; left: 50%; width: 88px; height: 88px; margin-left: -44px;
	border-radius: 50%; pointer-events: none; opacity: 0;
}
.ifv-seal--valid .ifv-seal__pulse { box-shadow: 0 0 0 0 rgba(13,148,136,.45); }
.ifv-seal--revoked .ifv-seal__pulse { box-shadow: 0 0 0 0 rgba(180,83,9,.4); }
/* Measured: #0B6F68 on the pale tint is 5.2:1, #92400E is 6.3:1 — both clear the 4.5:1 floor. */
.ifv-seal__label {
	padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 800;
	letter-spacing: .12em; text-transform: uppercase;
}
.ifv-seal--valid .ifv-seal__label { background: rgba(13,148,136,.12); color: var(--ifh-primary-deep); }
.ifv-seal--revoked .ifv-seal__label { background: rgba(245,158,11,.16); color: #92400E; }
/* Snippet 50's own icon is superseded by the seal. */
.ifv--valid .ifv-result .ifba-verify__result > svg:first-child,
.ifv--valid .ifv-result .ifba-verify__result > .ifba-icon:first-child,
.ifv--revoked .ifv-result .ifba-verify__result > svg:first-child,
.ifv--revoked .ifv-result .ifba-verify__result > .ifba-icon:first-child { display: none; }
.ifv--valid .ifv-result, .ifv--revoked .ifv-result { text-align: center; }
.ifv--valid .ifv-result .ifba-verify__details, .ifv--revoked .ifv-result .ifba-verify__details { text-align: left; }

/* ---------- evidence ---------- */
.ifba-home .ifv-stamp { margin: 18px 0 0; font-size: 13px; color: var(--ifh-muted); text-align: center; }
.ifv-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.ifv-actions[hidden] { display: none; }
.ifba-home .ifv-action { padding: 11px 18px; font-size: 14px; }
.ifv-actions__status { flex-basis: 100%; min-height: 1.2em; margin: 0; font-size: 13px; font-weight: 600; color: var(--ifh-primary-deep); text-align: center; }

/* ---------- checking ---------- */
.ifv .ifba-verify__form button.is-checking { position: relative; padding-left: 42px; cursor: progress; opacity: .92; }
.ifv .ifba-verify__form button.is-checking::before {
	content: ""; position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
	border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
}

/* ---------- help search ---------- */
.ifv-kbd {
	position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
	min-width: 26px; padding: 3px 8px; border-radius: 7px; text-align: center; pointer-events: none;
	border: 1px solid var(--ifh-line); border-bottom-width: 2px; background: var(--ifh-white);
	font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ifh-muted);
	transition: opacity .15s ease;
}
.ifba-help__search-row:focus-within .ifv-kbd,
.ifba-help__search-row input:not(:placeholder-shown) + .ifv-kbd { opacity: 0; }
@media (hover: none) { .ifv-kbd { display: none; } }
.ifba-help__search-row { border-radius: 14px; transition: box-shadow .25s ease; }
.ifba-help__search-row:focus-within { box-shadow: 0 0 0 4px rgba(13,148,136,.16); }

/* ---------- motion, opt-in ---------- */
@keyframes ifv-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes ifv-pop { 0% { transform: scale(.6); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes ifv-pulse { 0% { opacity: 1; box-shadow: 0 0 0 0 var(--ifv-pulse, rgba(13,148,136,.45)); } 100% { opacity: 0; box-shadow: 0 0 0 26px rgba(13,148,136,0); } }
@keyframes ifv-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
@keyframes ifv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
	.ifv-seal__svg { animation: ifv-pop .55s cubic-bezier(.34, 1.4, .5, 1) both; }
	.ifv-seal__shield { animation: ifv-draw .9s cubic-bezier(.65, 0, .35, 1) .1s both; }
	.ifv-seal__mark { animation: ifv-draw .45s cubic-bezier(.65, 0, .35, 1) .8s both; }
	.ifv-seal__dot { animation: ifv-pop .35s cubic-bezier(.34, 1.4, .5, 1) 1.1s both; }
	.ifv-seal__pulse { animation: ifv-pulse 1.3s ease-out 1.05s both; }
	.ifv-seal__label { animation: ifv-pop .45s cubic-bezier(.34, 1.4, .5, 1) 1.15s both; }
	.ifv--invalid .ifv-result { animation: ifv-shake .5s cubic-bezier(.36, .07, .19, .97) .15s both; }
	.ifv .ifba-verify__form button.is-checking::before { animation: ifv-spin .7s linear infinite; }
}

/* ---------- print: the record alone ---------- */
@media print {
	html.ifv-printing body * { visibility: hidden !important; }
	html.ifv-printing .ifv-result, html.ifv-printing .ifv-result * { visibility: visible !important; }
	html.ifv-printing .ifv-result { position: absolute; top: 0; left: 0; width: 100%; box-shadow: none !important; border: 1px solid #999 !important; }
	html.ifv-printing .ifv-actions { display: none !important; }
}

/* =========================================================================
   HELP PAGE
   Scoped to .ifhc: the design system styles .ifba-root a, p and headings more
   specifically than a lone class, so unscoped rules here would lose.
   Nothing fades in from a script either — this is the page people reach when
   they are already stuck.
   ====================================================================== */
.ifhc .ifhc-stuck {
	position: relative; overflow: hidden; margin-top: var(--ifba-space-8); padding: clamp(32px, 5vw, 60px) 0;
	background:
		radial-gradient(110% 130% at 88% 0%, rgba(13,148,136,.16), transparent 60%),
		linear-gradient(180deg, var(--ifba-bg-muted), var(--ifba-surface));
	border-top: 1px solid var(--ifba-border);
}
.ifhc .ifhc-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--ifba-space-5); margin-top: var(--ifba-space-6); }
.ifhc .ifhc-way {
	display: flex; flex-direction: column; align-items: flex-start; gap: var(--ifba-space-2);
	padding: var(--ifba-space-6); border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-xl);
	background: var(--ifba-surface); box-shadow: 0 1px 2px rgba(15,23,42,.04);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.22, 1, .36, 1);
}
.ifhc .ifhc-way:hover { border-color: var(--ifba-primary-100); box-shadow: 0 18px 40px -24px rgba(15,23,42,.45); transform: translateY(-3px); }
.ifhc .ifhc-way__icon {
	width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--ifba-space-2);
	border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--ifba-primary-600), var(--ifba-primary-800));
	transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}
.ifhc .ifhc-way:hover .ifhc-way__icon { transform: rotate(-6deg) scale(1.06); }
.ifhc .ifhc-way__title { margin: 0; font-size: var(--ifba-text-lg); color: var(--ifba-text); }
.ifhc .ifhc-way__body { margin: 0 0 var(--ifba-space-3); color: var(--ifba-text-muted); line-height: 1.6; }
.ifhc .ifhc-way .ifh-btn { margin-top: auto; }

/* The entrance is CSS, so the page is readable whether or not a script runs. */
.ifhc @keyframes ifhc-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	.ifhc .ifhc-in { animation: ifhc-in .5s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--d, 0ms); }
}

@media (max-width: 600px) {
	.ifhc .ifhc-way { padding: var(--ifba-space-5); }
}
/* =========================================================================
   QUIZ PLAYER (Snippet 42)
   ====================================================================== */
.ifba-quiz { max-width: 860px; }
.ifba-quiz__intro {
	background: var(--ifba-surface); border: 1px solid var(--ifba-border);
	border-radius: var(--ifba-radius-lg); padding: var(--ifba-space-8);
}
.ifba-quiz__badge {
	display: inline-flex; align-items: center; gap: var(--ifba-space-2);
	font-size: var(--ifba-text-2xs); font-weight: 700; text-transform: uppercase;
	letter-spacing: var(--ifba-tracking-caps); color: var(--ifba-accent-700);
	margin-bottom: var(--ifba-space-3);
}
.ifba-quiz__title { font-size: var(--ifba-text-2xl); margin-bottom: var(--ifba-space-3); }
.ifba-quiz__description { color: var(--ifba-text-muted); }
.ifba-quiz__facts {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ifba-space-3);
	margin: var(--ifba-space-6) 0;
}
.ifba-quiz__facts > div { background: var(--ifba-bg-subtle); border-radius: var(--ifba-radius); padding: var(--ifba-space-3) var(--ifba-space-4); }
.ifba-quiz__facts dt { font-size: var(--ifba-text-2xs); text-transform: uppercase; letter-spacing: var(--ifba-tracking-wide); color: var(--ifba-text-muted); }
.ifba-quiz__facts dd { margin: 2px 0 0; font-weight: 700; color: var(--ifba-n-900); }
.ifba-quiz__best { display: flex; align-items: center; gap: var(--ifba-space-3); margin-bottom: var(--ifba-space-5); font-size: var(--ifba-text-sm); }

/* attempt */
.ifba-quiz__bar {
	display: flex; align-items: center; justify-content: space-between; gap: var(--ifba-space-3);
	padding: var(--ifba-space-3) var(--ifba-space-4);
	background: var(--ifba-surface); border: 1px solid var(--ifba-border);
	border-radius: var(--ifba-radius-lg); margin-bottom: var(--ifba-space-4);
	position: sticky; top: var(--ifba-space-2); z-index: var(--ifba-z-sticky);
}
.ifba-quiz__counter { font-size: var(--ifba-text-sm); font-weight: 600; }
.ifba-quiz__timer {
	display: inline-flex; align-items: center; gap: var(--ifba-space-2);
	font-family: var(--ifba-font-mono); font-size: var(--ifba-text-sm); font-weight: 600;
	padding: 0.35rem 0.7rem; border-radius: var(--ifba-radius-full);
	background: var(--ifba-bg-muted); color: var(--ifba-n-800);
}
.ifba-quiz__timer.is-warning { background: var(--ifba-warning-bg); color: var(--ifba-warning); }
.ifba-quiz__timer.is-danger { background: var(--ifba-danger-bg); color: var(--ifba-danger); animation: ifba-pulse 1s ease infinite; }
@keyframes ifba-pulse { 50% { opacity: 0.55; } }

.ifba-quiz__question {
	background: var(--ifba-surface); border: 1px solid var(--ifba-border);
	border-radius: var(--ifba-radius-lg); padding: var(--ifba-space-6);
}
.ifba-quiz__question[hidden] { display: none; }
.ifba-quiz__type { font-size: var(--ifba-text-2xs); text-transform: uppercase; letter-spacing: var(--ifba-tracking-caps); color: var(--ifba-text-muted); margin-bottom: var(--ifba-space-2); }
.ifba-quiz__stem { font-size: var(--ifba-text-lg); font-weight: 600; color: var(--ifba-n-900); margin-bottom: var(--ifba-space-5); line-height: var(--ifba-leading-snug); }
.ifba-quiz__options { display: flex; flex-direction: column; gap: var(--ifba-space-2); }
.ifba-quiz__hint { font-size: var(--ifba-text-xs); color: var(--ifba-text-subtle); margin-top: var(--ifba-space-3); }
.ifba-quiz__question-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--ifba-space-3); margin-top: var(--ifba-space-6); flex-wrap: wrap; }
.ifba-quiz__nav { display: flex; gap: var(--ifba-space-2); }
.ifba-root .ifba-quiz__flag[aria-pressed="true"] { background: var(--ifba-warning-bg); color: var(--ifba-warning); border-color: var(--ifba-warning-border); }

.ifba-quiz__palette {
	display: flex; flex-wrap: wrap; gap: var(--ifba-space-2);
	margin-top: var(--ifba-space-5); padding: var(--ifba-space-4);
	background: var(--ifba-bg-subtle); border-radius: var(--ifba-radius-lg);
	border: 1px solid var(--ifba-border);
}
.ifba-root .ifba-quiz__dot {
	width: 34px; height: 34px; border-radius: var(--ifba-radius-sm);
	border: 1px solid var(--ifba-border-strong); background: var(--ifba-surface);
	font-size: var(--ifba-text-xs); font-weight: 700; color: var(--ifba-n-700); cursor: pointer;
	font-family: var(--ifba-font);
}
.ifba-root .ifba-quiz__dot.is-answered { background: var(--ifba-primary-600); border-color: var(--ifba-primary-600); color: var(--ifba-on-primary); }
.ifba-root .ifba-quiz__dot.is-flagged { box-shadow: inset 0 0 0 2px var(--ifba-warning); }
.ifba-root .ifba-quiz__dot.is-current { outline: 2px solid var(--ifba-accent-600); outline-offset: 2px; }
.ifba-quiz__palette-legend { width: 100%; display: flex; gap: var(--ifba-space-4); font-size: var(--ifba-text-xs); color: var(--ifba-text-muted); margin-top: var(--ifba-space-2); }

.ifba-quiz__submit-row { display: flex; justify-content: flex-end; gap: var(--ifba-space-3); margin-top: var(--ifba-space-5); }

/* result */
.ifba-quiz__score {
	display: flex; align-items: center; gap: var(--ifba-space-6);
	padding: var(--ifba-space-8); border-radius: var(--ifba-radius-lg);
	border: 1px solid var(--ifba-border); background: var(--ifba-surface);
	margin-bottom: var(--ifba-space-6); flex-wrap: wrap;
}
.ifba-quiz__score.is-pass { border-color: var(--ifba-success-border); background: linear-gradient(135deg, var(--ifba-success-bg), var(--ifba-surface) 70%); }
.ifba-quiz__score.is-fail { border-color: var(--ifba-warning-border); background: linear-gradient(135deg, var(--ifba-warning-bg), var(--ifba-surface) 70%); }
.ifba-quiz__score-copy { flex: 1; min-width: 220px; }
.ifba-quiz__score-title { font-size: var(--ifba-text-2xl); margin-bottom: var(--ifba-space-2); }
.ifba-quiz__score-meta { display: flex; gap: var(--ifba-space-4); flex-wrap: wrap; font-size: var(--ifba-text-sm); color: var(--ifba-text-muted); margin-bottom: var(--ifba-space-4); }
.ifba-quiz__score-actions { display: flex; gap: var(--ifba-space-3); flex-wrap: wrap; }

.ifba-quiz__review { display: flex; flex-direction: column; gap: var(--ifba-space-4); }
.ifba-quiz__review-item {
	border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-lg);
	padding: var(--ifba-space-5); background: var(--ifba-surface);
}
.ifba-quiz__review-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ifba-space-3); margin-bottom: var(--ifba-space-3); }
.ifba-quiz__review-num { font-size: var(--ifba-text-xs); font-weight: 700; color: var(--ifba-text-muted); text-transform: uppercase; letter-spacing: var(--ifba-tracking-wide); }
.ifba-quiz__review-stem { font-weight: 600; color: var(--ifba-n-900); margin-bottom: var(--ifba-space-3); }
.ifba-quiz__review .ifba-choice { pointer-events: none; }
.ifba-quiz__explanation {
	margin-top: var(--ifba-space-4); padding: var(--ifba-space-4);
	background: var(--ifba-info-bg); border: 1px solid var(--ifba-info-border);
	border-radius: var(--ifba-radius-md); font-size: var(--ifba-text-sm); color: #075985;
}
.ifba-quiz__explanation b { display: block; margin-bottom: 0.25em; }

@media (max-width: 640px) {
	.ifba-quiz__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ifba-quiz__intro, .ifba-quiz__question, .ifba-quiz__score { padding: var(--ifba-space-5); }
}

/* =========================================================================
   QUIZ — DESIGN LAYER
   Styles only: grading, timing, saving and the script are unchanged.
   Scoped to .ifba-quiz so the design system's .ifba-root heading, link and
   paragraph rules cannot win.
   ====================================================================== */
.ifba-quiz { max-width: 880px; margin: 0 auto; }

/* ---------- the intro: a hero, not a form ---------- */
.ifba-quiz .ifba-quiz__intro {
	position: relative; overflow: hidden; padding: clamp(26px, 5vw, 52px); border-radius: var(--ifba-radius-xl); color: #fff;
	background: radial-gradient(90% 130% at 100% 0%, rgba(94,234,212,.3), transparent 55%), linear-gradient(150deg, #0B3F49, #08313A 55%, #062830);
	box-shadow: 0 30px 60px -36px rgba(8,49,58,.7);
}
.ifba-quiz .ifba-quiz__title { margin: 0 0 var(--ifba-space-3); font-size: clamp(26px, 3.6vw, 38px); line-height: 1.12; letter-spacing: -.02em; color: #fff; }
.ifba-quiz .ifba-quiz__description { margin: 0 0 var(--ifba-space-5); max-width: 60ch; color: rgba(255,255,255,.8); line-height: 1.6; }
.ifba-quiz .ifba-quiz__facts { display: flex; flex-wrap: wrap; gap: var(--ifba-space-2); margin: 0 0 var(--ifba-space-5); padding: 0; list-style: none; }
.ifba-quiz .ifba-quiz__facts li { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); font-size: var(--ifba-text-sm); font-weight: 600; color: #fff; }
.ifba-quiz .ifba-quiz__best, .ifba-quiz .ifba-quiz__attempt { margin: 0 0 var(--ifba-space-3); color: rgba(255,255,255,.78); font-size: var(--ifba-text-sm); }
.ifba-quiz .ifba-quiz__intro-actions { display: flex; flex-wrap: wrap; gap: var(--ifba-space-3); margin-top: var(--ifba-space-5); }
.ifba-quiz .ifba-quiz__intro .ifba-btn--primary { background: #fff; color: #0B3F49; border-color: #fff; min-height: 50px; padding: 0 28px; }
.ifba-quiz .ifba-quiz__intro .ifba-btn--primary:hover { color: #047857; background: #fff; }

/* ---------- the running header: where you are, how long is left ---------- */
.ifba-quiz .ifba-quiz__bar {
	/* The header row: "Question 1 of 6" and, on timed quizzes, the clock. */
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ifba-space-3);
	margin: 0 0 var(--ifba-space-4); padding: 12px 14px 12px 18px; min-height: 56px;
	border: 1px solid var(--ifba-primary-100); border-radius: var(--ifba-radius-lg);
	background: linear-gradient(120deg, var(--ifba-primary-50), var(--ifba-surface) 72%);
	box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 28px -24px rgba(11,111,104,.5);
}
.ifba-quiz .ifba-quiz__counter {
	display: inline-flex; align-items: center; gap: 10px; margin: 0;
	font-size: var(--ifba-text-sm); font-weight: 750; letter-spacing: .01em; color: #0B3F49;
}
.ifba-quiz .ifba-quiz__counter::before {
	content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
	background: #0D9488; box-shadow: 0 0 0 4px rgba(13,148,136,.18);
}
.ifba-quiz .ifba-quiz__timer {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
	background: var(--ifba-bg-muted); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ifba-text);
}
.ifba-quiz .ifba-quiz__timer.is-warning { background: #FEF3C7; color: #92400E; }
.ifba-quiz .ifba-quiz__timer.is-danger { background: #FEE2E2; color: #991B1B; }

/* the palette: every question at a glance */
.ifba-quiz .ifba-quiz__palette { display: flex; flex-wrap: wrap; gap: 8px; }
.ifba-quiz .ifba-quiz__dot {
	min-width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid var(--ifba-border); background: var(--ifba-surface);
	font-weight: 700; color: var(--ifba-text-muted); cursor: pointer; transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.ifba-quiz .ifba-quiz__dot:hover { transform: translateY(-2px); border-color: #0D9488; }
.ifba-quiz .ifba-quiz__dot.is-answered { background: var(--ifba-primary-50); border-color: var(--ifba-primary-100); color: #0B6F68; }
.ifba-quiz .ifba-quiz__dot.is-current { background: #0B6F68; border-color: #0B6F68; color: #fff; box-shadow: 0 6px 16px -8px rgba(11,111,104,.8); }
.ifba-quiz .ifba-quiz__dot.is-flagged { box-shadow: inset 0 -3px 0 #D97706; }
.ifba-quiz .ifba-quiz__dot:focus-visible { outline: 3px solid #0D9488; outline-offset: 2px; }

/* ---------- the question ---------- */
.ifba-quiz .ifba-quiz__question {
	padding: clamp(22px, 4vw, 36px); border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-xl);
	background: var(--ifba-surface); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 24px 48px -36px rgba(15,23,42,.45);
}
.ifba-quiz .ifba-quiz__type {
	display: inline-block; margin-bottom: var(--ifba-space-3); padding: 5px 12px; border-radius: 999px;
	background: var(--ifba-primary-50); color: #0B6F68; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.ifba-quiz .ifba-quiz__stem { margin: 0 0 var(--ifba-space-5); font-size: clamp(18px, 2.2vw, 22px); line-height: 1.45; font-weight: 650; color: var(--ifba-text); }
.ifba-quiz .ifba-quiz__hint { margin: 0 0 var(--ifba-space-4); padding: 10px 14px; border-radius: var(--ifba-radius-md); background: var(--ifba-bg-muted); color: var(--ifba-text-muted); font-size: var(--ifba-text-sm); }
.ifba-quiz .ifba-quiz__options { display: grid; gap: var(--ifba-space-3); }

/* choices: large, tappable, unmistakable when chosen */
.ifba-quiz .ifba-choice {
	display: flex; align-items: center; gap: var(--ifba-space-3); min-height: 58px; padding: 12px 16px;
	border: 1.5px solid var(--ifba-border); border-radius: var(--ifba-radius-lg); background: var(--ifba-surface); cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ifba-quiz .ifba-choice:hover { border-color: #0D9488; box-shadow: 0 10px 24px -18px rgba(11,111,104,.7); transform: translateY(-1px); }
.ifba-quiz .ifba-choice:has(input:checked) { border-color: #0B6F68; background: var(--ifba-primary-50); box-shadow: 0 0 0 3px rgba(13,148,136,.16); }
.ifba-quiz .ifba-choice:has(input:focus-visible) { outline: 3px solid #0D9488; outline-offset: 2px; }
.ifba-quiz .ifba-choice__marker { flex: none; }
.ifba-quiz .ifba-choice__label { font-weight: 700; color: #0B6F68; }
.ifba-quiz .ifba-choice__body { color: var(--ifba-text); line-height: 1.45; }

/* the explanation after answering */
.ifba-quiz .ifba-quiz__explanation {
	margin-top: var(--ifba-space-4); padding: 14px 16px; border-left: 4px solid #0D9488; border-radius: 0 var(--ifba-radius-md) var(--ifba-radius-md) 0;
	background: var(--ifba-primary-50); color: var(--ifba-text); line-height: 1.6;
}

/* moving on */
.ifba-quiz .ifba-quiz__question-footer, .ifba-quiz .ifba-quiz__nav, .ifba-quiz .ifba-quiz__submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ifba-space-3); }
.ifba-quiz .ifba-quiz__question-footer { justify-content: space-between; margin-top: var(--ifba-space-5); padding-top: var(--ifba-space-4); border-top: 1px solid var(--ifba-border); }
.ifba-quiz .ifba-quiz__flag { border-radius: 999px; }
.ifba-quiz .ifba-quiz__flag[aria-pressed="true"] { background: #FEF3C7; border-color: #D97706; color: #92400E; }
.ifba-quiz .ifba-quiz__submit-row { justify-content: flex-end; margin-top: var(--ifba-space-5); }

/* ---------- the result ---------- */
.ifba-quiz .ifba-quiz__result { text-align: center; }
.ifba-quiz .ifba-quiz__score {
	display: flex; flex-direction: column; align-items: center; gap: var(--ifba-space-4); text-align: center;
	padding: clamp(26px, 5vw, 48px); border-radius: var(--ifba-radius-xl); color: #fff;
	background: linear-gradient(150deg, #0B3F49, #08313A);
}
/* The percentage is drawn by the design system's ring, dark by default:
   on this dark card it needs a light track, a bright arc and white text. */
.ifba-quiz .ifba-quiz__score .ifba-ring { color: #fff; }
.ifba-quiz .ifba-quiz__score .ifba-ring svg circle:first-of-type { stroke: rgba(255,255,255,.18); }
.ifba-quiz .ifba-quiz__score .ifba-ring svg circle:last-of-type { stroke: #5EEAD4; }
.ifba-quiz .ifba-quiz__score.is-pass .ifba-ring svg circle:last-of-type { stroke: #fff; }
.ifba-quiz .ifba-quiz__score .ifba-ring text, .ifba-quiz .ifba-quiz__score .ifba-ring span { fill: #fff; color: #fff; font-weight: 800; }
.ifba-quiz .ifba-quiz__score.is-pass { background: radial-gradient(90% 120% at 50% 0%, rgba(94,234,212,.35), transparent 60%), linear-gradient(150deg, #047857, #064E3B); }
.ifba-quiz .ifba-quiz__score.is-fail { background: radial-gradient(90% 120% at 50% 0%, rgba(253,230,138,.28), transparent 60%), linear-gradient(150deg, #0B3F49, #08313A); }
.ifba-quiz .ifba-quiz__score-title { margin: 0 0 var(--ifba-space-2); font-size: clamp(22px, 3vw, 30px); color: #fff; }
.ifba-quiz .ifba-quiz__score-copy { max-width: 56ch; margin: 0 auto; color: rgba(255,255,255,.85); }
/* Score, pass mark, attempt and time were four bare spans that ran together
   ("Attempt 11h 22m"); each is now its own chip. */
.ifba-quiz .ifba-quiz__score-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: var(--ifba-space-3) 0 0; }
.ifba-quiz .ifba-quiz__score-meta span {
	padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
	color: #fff; font-size: var(--ifba-text-sm); font-weight: 600; font-variant-numeric: tabular-nums;
}
.ifba-quiz .ifba-quiz__score-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ifba-space-3); margin-top: var(--ifba-space-5); }
.ifba-quiz .ifba-quiz__score .ifba-btn--primary { background: #fff; color: #0B3F49; border-color: #fff; }
.ifba-quiz .ifba-quiz__score .ifba-btn--primary:hover { background: #fff; color: #047857; }
/* The other actions ("My learning") are outlined in white, never dark on dark. */
.ifba-quiz .ifba-quiz__score .ifba-btn:not(.ifba-btn--primary), .ifba-quiz .ifba-quiz__score-actions a:not(.ifba-btn) {
	background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); border-radius: 999px; padding: 0 20px; min-height: 44px;
	display: inline-flex; align-items: center; text-decoration: none;
}
.ifba-quiz .ifba-quiz__score .ifba-btn:not(.ifba-btn--primary):hover, .ifba-quiz .ifba-quiz__score-actions a:not(.ifba-btn):hover { background: rgba(255,255,255,.12); color: #fff; }

/* the review: every answer, marked */
.ifba-quiz .ifba-quiz__review { margin-top: var(--ifba-space-6); text-align: left; }
.ifba-quiz .ifba-quiz__review-item {
	position: relative; margin-bottom: var(--ifba-space-3); padding: var(--ifba-space-4) var(--ifba-space-5) var(--ifba-space-4) calc(var(--ifba-space-5) + 6px);
	border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-lg); background: var(--ifba-surface); overflow: hidden;
}
.ifba-quiz .ifba-quiz__review-item::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: var(--ifba-border); }
.ifba-quiz .ifba-quiz__review-item.is-correct::before { background: #047857; }
.ifba-quiz .ifba-quiz__review-item.is-incorrect::before { background: #B91C1C; }
.ifba-quiz .ifba-quiz__review-head { display: flex; align-items: center; gap: var(--ifba-space-3); margin-bottom: var(--ifba-space-2); }
.ifba-quiz .ifba-quiz__review-num {
	flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--ifba-bg-muted); font-weight: 800; font-size: 13px; color: var(--ifba-text);
}
.ifba-quiz .ifba-quiz__review-item.is-correct .ifba-quiz__review-num { background: #047857; color: #fff; }
.ifba-quiz .ifba-quiz__review-item.is-incorrect .ifba-quiz__review-num { background: #B91C1C; color: #fff; }
.ifba-quiz .ifba-quiz__review-stem { margin: 0; font-weight: 650; color: var(--ifba-text); }

/* ---------- motion: opt-in, never load-bearing ---------- */
@keyframes ifba-quiz-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ifba-quiz-pop { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: none; } }
@keyframes ifba-quiz-urgent { 0%, 100% { box-shadow: 0 0 0 0 rgba(185,28,28,.35); } 50% { box-shadow: 0 0 0 6px rgba(185,28,28,0); } }
@media (prefers-reduced-motion: no-preference) {
	.ifba-quiz .ifba-quiz__intro, .ifba-quiz .ifba-quiz__question, .ifba-quiz .ifba-quiz__score { animation: ifba-quiz-in .45s cubic-bezier(.22, 1, .36, 1) both; }
	.ifba-quiz .ifba-quiz__score .ifba-ring { animation: ifba-quiz-pop .6s cubic-bezier(.22, 1, .36, 1) .15s both; }
	.ifba-quiz .ifba-quiz__timer.is-danger { animation: ifba-quiz-urgent 1.4s ease-in-out infinite; }
	.ifba-quiz .ifba-choice:active { transform: scale(.99); }
}
@media (max-width: 600px) {
	.ifba-quiz .ifba-quiz__question-footer { flex-direction: column-reverse; align-items: stretch; }
	.ifba-quiz .ifba-quiz__question-footer .ifba-btn, .ifba-quiz .ifba-quiz__submit-row .ifba-btn { width: 100%; justify-content: center; }
}
/* =========================================================================
   RESULTS HISTORY (Snippet 43)
   ====================================================================== */
.ifba-history { margin-top: var(--ifba-space-8); }
.ifba-history__title { font-size: var(--ifba-text-lg); margin-bottom: var(--ifba-space-3); }
.ifba-table {
	width: 100%; border-collapse: collapse; font-size: var(--ifba-text-sm);
	background: var(--ifba-surface); border: 1px solid var(--ifba-border);
	border-radius: var(--ifba-radius-lg); overflow: hidden;
}
.ifba-table th, .ifba-table td { padding: var(--ifba-space-3) var(--ifba-space-4); text-align: left; border-bottom: 1px solid var(--ifba-border); }
.ifba-table th { font-size: var(--ifba-text-2xs); text-transform: uppercase; letter-spacing: var(--ifba-tracking-wide); color: var(--ifba-text-muted); background: var(--ifba-bg-subtle); }
.ifba-table tr:last-child td { border-bottom: 0; }
.ifba-quiz--review > .ifba-btn { margin-bottom: var(--ifba-space-4); }
@media (max-width: 640px) {
	.ifba-table th:nth-child(2), .ifba-table td:nth-child(2) { display: none; }
}
/* =========================================================================
   ACTIVITY CARDS (Snippet 45)
   ====================================================================== */
.ifba-activity { max-width: var(--ifba-container); }
.ifba-activity__head {
	background: var(--ifba-surface); border: 1px solid var(--ifba-border);
	border-radius: var(--ifba-radius-lg); padding: var(--ifba-space-6); margin-bottom: var(--ifba-space-5);
}
.ifba-activity__title { font-size: var(--ifba-text-2xl); margin-bottom: var(--ifba-space-2); }
.ifba-activity__instructions { color: var(--ifba-text-muted); max-width: 70ch; }
.ifba-activity__meta { display: flex; flex-wrap: wrap; gap: var(--ifba-space-4); align-items: center; font-size: var(--ifba-text-sm); color: var(--ifba-text-muted); margin-top: var(--ifba-space-3); }

.ifba-activity__board { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: var(--ifba-space-5); align-items: start; }
.ifba-activity__tray {
	position: sticky; top: var(--ifba-space-3);
	background: var(--ifba-surface); border: 1px solid var(--ifba-border);
	border-radius: var(--ifba-radius-lg); padding: var(--ifba-space-4);
	max-height: calc(100vh - 2 * var(--ifba-space-6)); overflow-y: auto;
}
.ifba-activity__tray-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--ifba-space-3); font-size: var(--ifba-text-sm); font-weight: 600; }
.ifba-activity__tray-count { color: var(--ifba-text-muted); font-weight: 400; }
.ifba-activity__tray.is-dragover { border-color: var(--ifba-primary-500); box-shadow: var(--ifba-shadow-focus); }

.ifba-card-item {
	background: var(--ifba-surface); border: 1px solid var(--ifba-border-strong);
	border-radius: var(--ifba-radius-md); padding: var(--ifba-space-3) var(--ifba-space-4);
	font-size: var(--ifba-text-sm); line-height: var(--ifba-leading-snug);
	cursor: grab; margin-bottom: var(--ifba-space-2); display: flex; gap: var(--ifba-space-3);
	transition: box-shadow var(--ifba-duration) var(--ifba-ease), border-color var(--ifba-duration) var(--ifba-ease), transform var(--ifba-duration-fast) var(--ifba-ease);
	-webkit-user-select: none; user-select: none;
}
.ifba-card-item:hover { box-shadow: var(--ifba-shadow); }
.ifba-card-item:focus-visible { outline: 2px solid var(--ifba-primary-600); outline-offset: 2px; }
.ifba-card-item.is-selected { border-color: var(--ifba-accent-600); box-shadow: 0 0 0 3px var(--ifba-accent-100); }
.ifba-card-item.is-dragging { opacity: 0.45; transform: scale(0.98); }
.ifba-card-item__id {
	flex: none; width: 28px; height: 28px; border-radius: var(--ifba-radius-sm);
	background: var(--ifba-n-100); color: var(--ifba-n-700); font-size: var(--ifba-text-xs); font-weight: 700;
	display: grid; place-items: center;
}
.ifba-card-item.is-correct { border-color: var(--ifba-success); background: var(--ifba-success-bg); cursor: default; }
.ifba-card-item.is-wrong { border-color: var(--ifba-danger); background: var(--ifba-danger-bg); cursor: default; }
.ifba-card-item__hint { display: block; width: 100%; font-size: var(--ifba-text-xs); color: var(--ifba-danger); margin-top: var(--ifba-space-1); }

.ifba-activity__buckets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ifba-space-3); }
.ifba-bucket {
	background: var(--ifba-bg-subtle); border: 2px dashed var(--ifba-border-strong);
	border-radius: var(--ifba-radius-lg); padding: var(--ifba-space-3); min-height: 120px;
	transition: border-color var(--ifba-duration) var(--ifba-ease), background-color var(--ifba-duration) var(--ifba-ease);
}
.ifba-bucket.is-dragover, .ifba-bucket.is-target { border-color: var(--ifba-primary-500); background: var(--ifba-primary-50); border-style: solid; }
.ifba-bucket__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--ifba-space-2); }
.ifba-bucket__title { font-size: var(--ifba-text-sm); font-weight: 700; color: var(--ifba-n-900); }
.ifba-bucket__count { font-size: var(--ifba-text-xs); color: var(--ifba-text-muted); background: var(--ifba-surface); border-radius: var(--ifba-radius-full); padding: 2px 8px; }
.ifba-root .ifba-bucket__assign { width: 100%; margin-top: var(--ifba-space-2); }
.ifba-bucket__empty { font-size: var(--ifba-text-xs); color: var(--ifba-text-subtle); text-align: center; padding: var(--ifba-space-3); }

.ifba-activity__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--ifba-space-3); align-items: center; }
.ifba-activity__progress { flex: 1; font-size: var(--ifba-text-sm); color: var(--ifba-text-muted); }

@media (max-width: 820px) {
	.ifba-activity__board { grid-template-columns: 1fr; }
	.ifba-activity__tray { position: static; max-height: none; }
	.ifba-activity__buckets { grid-template-columns: 1fr; }
}
/* =========================================================================
   GRAND TEST (Snippet 46)
   ====================================================================== */
.ifba-grand {
	border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-lg);
	padding: var(--ifba-space-6); margin-bottom: var(--ifba-space-5);
	background: var(--ifba-surface);
}
.ifba-grand.is-ready { border-color: var(--ifba-accent-200); background: linear-gradient(135deg, var(--ifba-accent-50), var(--ifba-surface) 60%); }
.ifba-grand.is-passed { border-color: var(--ifba-success-border); background: linear-gradient(135deg, var(--ifba-success-bg), var(--ifba-surface) 60%); }
.ifba-grand__head { display: flex; gap: var(--ifba-space-4); align-items: flex-start; }
.ifba-grand__icon {
	flex: none; width: 46px; height: 46px; border-radius: var(--ifba-radius-md);
	display: grid; place-items: center; background: var(--ifba-n-100); color: var(--ifba-n-700);
}
.ifba-grand.is-ready .ifba-grand__icon { background: var(--ifba-accent-600); color: var(--ifba-on-accent); }
.ifba-grand.is-passed .ifba-grand__icon { background: var(--ifba-success); color: #fff; }
.ifba-grand__title { font-size: var(--ifba-text-xl); margin: var(--ifba-space-1) 0 var(--ifba-space-2); }
.ifba-grand__text { color: var(--ifba-text-muted); margin: 0; }
.ifba-grand .ifba-progress { margin-top: var(--ifba-space-4); }
.ifba-grand__remaining { list-style: none; margin: var(--ifba-space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ifba-space-1) var(--ifba-space-4); font-size: var(--ifba-text-sm); color: var(--ifba-text-muted); }
.ifba-grand__remaining li { display: flex; align-items: center; gap: var(--ifba-space-2); }
.ifba-grand__blueprint { display: flex; flex-wrap: wrap; gap: var(--ifba-space-2); margin-top: var(--ifba-space-4); }
.ifba-grand__chip { font-size: var(--ifba-text-xs); padding: 0.3rem 0.65rem; border-radius: var(--ifba-radius-full); background: var(--ifba-bg-muted); color: var(--ifba-n-700); }
.ifba-grand__chip b { color: var(--ifba-n-900); }
@media (max-width: 560px) { .ifba-grand__remaining { grid-template-columns: 1fr; } }
/* =========================================================================
   CERTIFICATES (Snippet 50)
   ====================================================================== */
.ifba-certs { margin-top: var(--ifba-space-8); }
.ifba-cert-card {
	display: flex; align-items: center; gap: var(--ifba-space-4);
	background: linear-gradient(135deg, var(--ifba-success-bg), var(--ifba-surface) 55%);
	border: 1px solid var(--ifba-success-border); border-radius: var(--ifba-radius-lg);
	padding: var(--ifba-space-5); margin-bottom: var(--ifba-space-3); flex-wrap: wrap;
}
.ifba-cert-card__icon {
	flex: none; width: 52px; height: 52px; border-radius: var(--ifba-radius-md);
	background: var(--ifba-success); color: #fff; display: grid; place-items: center;
}
.ifba-cert-card__body { flex: 1; min-width: 200px; }
.ifba-cert-card__title { font-size: var(--ifba-text-lg); margin: 0 0 var(--ifba-space-1); }
.ifba-cert-card__meta { font-size: var(--ifba-text-sm); color: var(--ifba-text-muted); margin: 0; }
.ifba-cert-card__actions { display: flex; gap: var(--ifba-space-2); flex-wrap: wrap; }

.ifba-verify { max-width: 620px; }
.ifba-verify__form { margin-bottom: var(--ifba-space-5); }
.ifba-verify__row { display: flex; gap: var(--ifba-space-2); }
.ifba-verify__row .ifba-input { flex: 1; text-transform: uppercase; font-family: var(--ifba-font-mono); letter-spacing: .06em; }
.ifba-verify__result {
	display: flex; gap: var(--ifba-space-4); align-items: flex-start;
	padding: var(--ifba-space-5); border-radius: var(--ifba-radius-lg); border: 1px solid var(--ifba-border);
}
.ifba-verify__result h3 { margin: 0 0 var(--ifba-space-2); font-size: var(--ifba-text-lg); }
.ifba-verify__result p { margin: 0; color: var(--ifba-text-muted); font-size: var(--ifba-text-sm); }
.ifba-verify__result.is-valid { background: var(--ifba-success-bg); border-color: var(--ifba-success-border); color: var(--ifba-success); }
.ifba-verify__result.is-invalid { background: var(--ifba-danger-bg); border-color: var(--ifba-danger-border); color: var(--ifba-danger); }
.ifba-verify__result.is-revoked { background: var(--ifba-warning-bg); border-color: var(--ifba-warning-border); color: var(--ifba-warning); }
.ifba-verify__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ifba-space-3); margin: var(--ifba-space-2) 0 0; }
.ifba-verify__details dt { font-size: var(--ifba-text-2xs); text-transform: uppercase; letter-spacing: var(--ifba-tracking-wide); color: var(--ifba-text-muted); }
.ifba-verify__details dd { margin: 2px 0 0; color: var(--ifba-n-900); font-weight: 600; }
@media (max-width: 560px) { .ifba-verify__details { grid-template-columns: 1fr; } .ifba-verify__row { flex-direction: column; } }
/* =========================================================================
   ACHIEVEMENTS (Snippet 60)
   ====================================================================== */
.ifba-achieve { margin-top: var(--ifba-space-8); }
.ifba-achieve__stats { display: grid; grid-template-columns: 1fr auto; gap: var(--ifba-space-4); margin-bottom: var(--ifba-space-5); }
.ifba-achieve__level {
	background: linear-gradient(135deg, var(--ifba-accent-50), var(--ifba-surface) 60%);
	border: 1px solid var(--ifba-accent-100); border-radius: var(--ifba-radius-lg);
	padding: var(--ifba-space-5); display: flex; flex-direction: column; gap: var(--ifba-space-1);
}
.ifba-achieve__level-name { font-family: var(--ifba-font-display); font-size: var(--ifba-text-2xl); color: var(--ifba-n-900); }
.ifba-achieve__points { font-size: var(--ifba-text-sm); color: var(--ifba-text-muted); }
.ifba-achieve__level .ifba-progress { margin-top: var(--ifba-space-3); }
.ifba-achieve__next { font-size: var(--ifba-text-xs); color: var(--ifba-text-subtle); margin-top: var(--ifba-space-1); }
.ifba-achieve__streak {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ifba-space-1);
	min-width: 130px; padding: var(--ifba-space-5); border-radius: var(--ifba-radius-lg);
	background: var(--ifba-bg-muted); color: var(--ifba-text-muted); border: 1px solid var(--ifba-border);
}
.ifba-achieve__streak.is-active { background: var(--ifba-warning-bg); border-color: var(--ifba-warning-border); color: var(--ifba-warning); }
.ifba-achieve__streak strong { font-size: var(--ifba-text-3xl); line-height: 1; color: inherit; }
.ifba-achieve__streak span { font-size: var(--ifba-text-xs); }

.ifba-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--ifba-space-3); }
.ifba-badge-tile {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ifba-space-2);
	padding: var(--ifba-space-4) var(--ifba-space-3);
	background: var(--ifba-surface); border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-lg);
}
.ifba-badge-tile__icon {
	width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
	background: var(--ifba-n-100); color: var(--ifba-text-subtle);
}
.ifba-badge-tile.is-earned .ifba-badge-tile__icon { background: linear-gradient(135deg, var(--ifba-primary-500), var(--ifba-accent-600)); color: #fff; box-shadow: var(--ifba-shadow); }
.ifba-badge-tile.is-locked { opacity: 0.55; }
.ifba-badge-tile__label { font-size: var(--ifba-text-sm); font-weight: 600; color: var(--ifba-n-900); }
.ifba-badge-tile__desc { font-size: var(--ifba-text-xs); color: var(--ifba-text-muted); line-height: var(--ifba-leading-snug); }
@media (max-width: 560px) { .ifba-achieve__stats { grid-template-columns: 1fr; } }
/* =========================================================================
   HELP CENTRE (Snippet 63)
   ====================================================================== */
.ifba-help { max-width: 820px; }
.ifba-help__search { margin-bottom: var(--ifba-space-6); }
.ifba-help__search-row { position: relative; display: flex; align-items: center; }
.ifba-help__search-row > .ifba-icon { position: absolute; left: 14px; color: var(--ifba-text-subtle); pointer-events: none; }
.ifba-root .ifba-help__search-row .ifba-input { padding-left: 44px; font-size: var(--ifba-text-base); }
.ifba-help--modal .ifba-help__search-row .ifba-input { padding-left: var(--ifba-space-4); }
.ifba-help__results { margin-top: var(--ifba-space-3); border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-lg); background: var(--ifba-surface); overflow: hidden; }
.ifba-help__results[hidden] { display: none; }
.ifba-help__hit { border-bottom: 1px solid var(--ifba-border); }
.ifba-help__hit:last-child { border-bottom: 0; }
.ifba-root .ifba-help__hit-btn {
	width: 100%; text-align: left; background: none; border: 0; padding: var(--ifba-space-3) var(--ifba-space-4);
	display: grid; grid-template-columns: auto 1fr; gap: var(--ifba-space-1) var(--ifba-space-3); cursor: pointer; font-family: var(--ifba-font);
}
.ifba-root .ifba-help__hit-btn:hover { background: var(--ifba-bg-subtle); }
.ifba-help__hit-type { grid-row: 1 / span 2; align-self: start; font-size: var(--ifba-text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ifba-tracking-wide); color: var(--ifba-accent-700); background: var(--ifba-accent-50); padding: 3px 7px; border-radius: var(--ifba-radius-sm); margin-top: 2px; }
.ifba-help__hit-title { font-weight: 600; color: var(--ifba-n-900); }
.ifba-help__hit-excerpt { font-size: var(--ifba-text-sm); color: var(--ifba-text-muted); }
.ifba-help__hit-body { padding: 0 var(--ifba-space-4) var(--ifba-space-4) calc(var(--ifba-space-4) + 52px); font-size: var(--ifba-text-sm); }
.ifba-help__hit-body[hidden] { display: none; }
.ifba-help__empty { padding: var(--ifba-space-4); font-size: var(--ifba-text-sm); color: var(--ifba-text-muted); }
.ifba-help__more { margin-top: var(--ifba-space-4); font-size: var(--ifba-text-sm); }
.ifba-help__category { font-size: var(--ifba-text-lg); margin: var(--ifba-space-6) 0 var(--ifba-space-3); }
.ifba-help__contact { display: flex; gap: var(--ifba-space-3); align-items: flex-start; margin-top: var(--ifba-space-8); padding: var(--ifba-space-4) var(--ifba-space-5); background: var(--ifba-bg-subtle); border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-lg); font-size: var(--ifba-text-sm); color: var(--ifba-text-muted); }
.ifba-help__contact .ifba-icon { color: var(--ifba-primary-600); flex: none; margin-top: 2px; }

.ifba-glossary { margin: 0; }
.ifba-glossary__letter { font-size: var(--ifba-text-2xs); font-weight: 700; letter-spacing: var(--ifba-tracking-caps); color: var(--ifba-text-subtle); margin: var(--ifba-space-5) 0 var(--ifba-space-2); padding-bottom: var(--ifba-space-1); border-bottom: 1px solid var(--ifba-border); }
.ifba-glossary__term { padding: var(--ifba-space-3) 0; }
.ifba-glossary__term dt { font-weight: 700; color: var(--ifba-n-900); }
.ifba-glossary__term dd { margin: var(--ifba-space-1) 0 0; color: var(--ifba-text-muted); font-size: var(--ifba-text-sm); line-height: var(--ifba-leading-relaxed); }
.ifba-glossary__term dd p { margin: 0; }

.ifba-root .ifba-help-fab {
	position: fixed; right: 20px; bottom: 20px; z-index: var(--ifba-z-toast);
	display: inline-flex; align-items: center; gap: var(--ifba-space-2);
	padding: 0.7rem 1rem; border-radius: var(--ifba-radius-full); border: 0; cursor: pointer;
	background: var(--ifba-primary-700); color: var(--ifba-on-primary); font-family: var(--ifba-font); font-weight: 600; font-size: var(--ifba-text-sm);
	box-shadow: var(--ifba-shadow-lg);
}
.ifba-root .ifba-help-fab:hover { background: var(--ifba-primary-800); }
.ifba-root .ifba-help-fab:focus-visible { outline: 3px solid var(--ifba-accent-500); outline-offset: 2px; }
@media (max-width: 560px) { .ifba-root .ifba-help-fab span { display: none; } .ifba-root .ifba-help-fab { padding: 0.8rem; } }
/* =========================================================================
   AI ASSISTANT (Snippet 82)
   ====================================================================== */
.ifba-root .ifba-ai-fab {
	position: fixed; right: 20px; bottom: 20px; z-index: var(--ifba-z-toast);
	display: inline-flex; align-items: center; gap: var(--ifba-space-2);
	padding: 0.7rem 1rem; border-radius: var(--ifba-radius-full); border: 0; cursor: pointer;
	background: linear-gradient(135deg, var(--ifba-accent-600), var(--ifba-primary-700));
	color: #fff; font-family: var(--ifba-font); font-weight: 600; font-size: var(--ifba-text-sm);
	box-shadow: var(--ifba-shadow-lg);
}
.ifba-root .ifba-ai-fab:hover { filter: brightness(1.08); }
.ifba-root .ifba-ai-fab:focus-visible { outline: 3px solid var(--ifba-accent-400); outline-offset: 2px; }
/* When both buttons are present, the help button sits to the left. */
body:has(.ifba-ai-fab) .ifba-root .ifba-help-fab { right: 128px; }

.ifba-ai { display: flex; flex-direction: column; min-height: 340px; max-height: 60vh; }
.ifba-ai__log { flex: 1; overflow-y: auto; padding-right: var(--ifba-space-2); }
.ifba-ai__intro {
	font-size: var(--ifba-text-sm); color: var(--ifba-text-muted);
	background: var(--ifba-bg-subtle); border: 1px solid var(--ifba-border);
	border-radius: var(--ifba-radius-md); padding: var(--ifba-space-4); margin-bottom: var(--ifba-space-3);
}
.ifba-ai__intro strong { color: var(--ifba-n-900); }
.ifba-ai__suggestions { display: flex; flex-wrap: wrap; gap: var(--ifba-space-2); margin-top: var(--ifba-space-3); }
.ifba-root .ifba-ai__suggestion {
	background: var(--ifba-surface); border: 1px solid var(--ifba-border-strong); border-radius: var(--ifba-radius-full);
	padding: 0.3rem 0.75rem; font-size: var(--ifba-text-xs); font-family: var(--ifba-font);
	color: var(--ifba-text); cursor: pointer;
}
.ifba-root .ifba-ai__suggestion:hover { background: var(--ifba-primary-50); border-color: var(--ifba-primary-500); }

.ifba-ai__turn { margin-bottom: var(--ifba-space-4); }
.ifba-ai__q {
	background: var(--ifba-primary-700); color: var(--ifba-on-primary);
	padding: var(--ifba-space-3) var(--ifba-space-4); border-radius: var(--ifba-radius-lg);
	border-bottom-right-radius: var(--ifba-radius-sm); font-size: var(--ifba-text-sm);
	margin-left: auto; max-width: 85%; width: fit-content;
}
.ifba-ai__a {
	background: var(--ifba-bg-subtle); border: 1px solid var(--ifba-border);
	padding: var(--ifba-space-4); border-radius: var(--ifba-radius-lg);
	border-bottom-left-radius: var(--ifba-radius-sm);
	font-size: var(--ifba-text-sm); line-height: var(--ifba-leading-relaxed);
	margin-top: var(--ifba-space-2); white-space: pre-wrap;
}
.ifba-ai__a.is-error { background: var(--ifba-warning-bg); border-color: var(--ifba-warning-border); white-space: normal; }
.ifba-ai__sources { margin-top: var(--ifba-space-3); padding-top: var(--ifba-space-3); border-top: 1px solid var(--ifba-border); font-size: var(--ifba-text-xs); }
.ifba-ai__sources-title { text-transform: uppercase; letter-spacing: var(--ifba-tracking-wide); color: var(--ifba-text-muted); font-weight: 700; margin-bottom: var(--ifba-space-1); }
.ifba-ai__sources a { display: block; padding: 2px 0; }
.ifba-ai__form { display: flex; gap: var(--ifba-space-2); margin-top: var(--ifba-space-3); }
.ifba-root .ifba-ai__input { flex: 1; }
.ifba-ai__note { font-size: var(--ifba-text-2xs); color: var(--ifba-text-subtle); margin-top: var(--ifba-space-2); }
.ifba-ai__thinking { display: inline-flex; gap: 4px; align-items: center; }
.ifba-ai__thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--ifba-text-subtle); animation: ifba-ai-blink 1.2s infinite; }
.ifba-ai__thinking span:nth-child(2) { animation-delay: 0.2s; }
.ifba-ai__thinking span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ifba-ai-blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
@media (max-width: 560px) {
	.ifba-root .ifba-ai-fab span { display: none; }
	.ifba-root .ifba-ai-fab { padding: 0.8rem; }
	body:has(.ifba-ai-fab) .ifba-root .ifba-help-fab { right: 84px; }
}
/* =========================================================================
   ACCESSIBILITY (Snippet 91)
   ====================================================================== */

/* Skip links: off-screen until focused. */
.ifba-skip { position: absolute; top: 0; left: 0; z-index: 100000; }
.ifba-root .ifba-skip__link {
	position: absolute; left: -9999px; top: 0;
	padding: 0.75rem 1.25rem; background: var(--ifba-primary-800); color: #fff;
	font-family: var(--ifba-font); font-size: var(--ifba-text-sm); font-weight: 600;
	text-decoration: none; border-radius: 0 0 var(--ifba-radius) 0; white-space: nowrap;
}
.ifba-root .ifba-skip__link:focus {
	left: 0; outline: 3px solid var(--ifba-accent-400); outline-offset: -3px;
}
.ifba-root .ifba-skip__link:focus ~ .ifba-skip__link:focus { left: 0; }

/* Text scaling: the design system is token-based, so one variable moves everything. */
html[data-ifba-text="large"] .ifba-root { font-size: 112.5%; }
html[data-ifba-text="larger"] .ifba-root { font-size: 125%; }
html[data-ifba-text="large"] .ifba-deck__stage,
html[data-ifba-text="larger"] .ifba-deck__stage { font-size: 100%; }

/* High contrast: darker text, stronger borders, no decorative gradients. */
html[data-ifba-contrast="high"] .ifba-root {
	--ifba-text: #000000;
	--ifba-text-muted: #1F2937;
	--ifba-text-subtle: #374151;
	--ifba-border: #4B5563;
	--ifba-border-strong: #111827;
	--ifba-bg-subtle: #FFFFFF;
	--ifba-bg-muted: #F3F4F6;
}
html[data-ifba-contrast="high"] .ifba-root .ifba-landing__hero,
html[data-ifba-contrast="high"] .ifba-root .ifba-quiz__score,
html[data-ifba-contrast="high"] .ifba-root .ifba-cert-card,
html[data-ifba-contrast="high"] .ifba-root .ifba-grand,
html[data-ifba-contrast="high"] .ifba-root .ifba-achieve__level { background-image: none; }
html[data-ifba-contrast="high"] .ifba-root a { text-decoration: underline; }
html[data-ifba-contrast="high"] .ifba-root .ifba-btn { border-width: 2px; }

/* Motion: honour the device, and the learner's own override. */
@media (prefers-reduced-motion: reduce) {
	.ifba-root *, .ifba-root *::before, .ifba-root *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}
html[data-ifba-motion="reduced"] .ifba-root *,
html[data-ifba-motion="reduced"] .ifba-root *::before,
html[data-ifba-motion="reduced"] .ifba-root *::after {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	scroll-behavior: auto !important;
}

/* A visible focus ring everywhere, even where a component forgot one. */
.ifba-root :focus-visible {
	outline: 3px solid var(--ifba-accent-500);
	outline-offset: 2px;
	border-radius: var(--ifba-radius-sm);
}
html[data-ifba-contrast="high"] .ifba-root :focus-visible { outline-color: #000; outline-width: 4px; }

/* Controls */
.ifba-a11y {
	border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-lg);
	padding: var(--ifba-space-5); background: var(--ifba-surface);
}
.ifba-a11y:focus { outline: none; }
.ifba-a11y--compact { border: 0; padding: 0; background: none; }
.ifba-a11y__title { font-size: var(--ifba-text-lg); margin: 0 0 var(--ifba-space-1); }
.ifba-a11y__lede { color: var(--ifba-text-muted); font-size: var(--ifba-text-sm); margin-bottom: var(--ifba-space-4); }
.ifba-a11y__set { display: flex; align-items: center; gap: var(--ifba-space-4); padding: var(--ifba-space-2) 0; flex-wrap: wrap; }
.ifba-a11y__label { min-width: 8em; font-size: var(--ifba-text-sm); font-weight: 600; }
.ifba-a11y__choices { display: inline-flex; border: 1px solid var(--ifba-border-strong); border-radius: var(--ifba-radius); overflow: hidden; }
.ifba-root .ifba-a11y__choice {
	background: var(--ifba-surface); border: 0; border-right: 1px solid var(--ifba-border);
	padding: 0.45rem 0.9rem; font-family: var(--ifba-font); font-size: var(--ifba-text-sm);
	color: var(--ifba-text-muted); cursor: pointer;
}
.ifba-root .ifba-a11y__choice:last-child { border-right: 0; }
.ifba-root .ifba-a11y__choice:hover { background: var(--ifba-bg-subtle); color: var(--ifba-text); }
.ifba-root .ifba-a11y__choice[aria-pressed="true"] { background: var(--ifba-primary-700); color: var(--ifba-on-primary); font-weight: 600; }
.ifba-a11y-statement { max-width: 70ch; }
@media (max-width: 560px) { .ifba-a11y__label { min-width: 100%; } }

/* =========================================================================
   ACCESSIBILITY PAGE
   The drawings are decorative and the words carry every meaning, so nothing
   here needs motion, colour or JavaScript to be understood.
   ====================================================================== */
.ifac { max-width: 1120px; margin: 0 auto; padding: 0 var(--ifba-space-4); }
.ifac .ifac-eyebrow { margin: 0 0 var(--ifba-space-2); font-size: var(--ifba-text-xs); font-weight: 800; letter-spacing: var(--ifba-tracking-caps); text-transform: uppercase; color: var(--ifba-primary-200); }
.ifac .ifac-h1 { margin: 0 0 var(--ifba-space-3); font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -.025em; color: #fff; }
.ifac .ifac-lede { margin: 0; max-width: 46ch; font-size: var(--ifba-text-lg); line-height: 1.6; color: rgba(255,255,255,.78); }
.ifac .ifac-h2 { margin: 0 0 var(--ifba-space-3); font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.015em; color: var(--ifba-text); }
.ifac .ifac-note { margin: 0; color: var(--ifba-text-muted); max-width: 62ch; line-height: 1.6; }

/* Headings are scoped to the page: the design system styles
   .ifba-root h1/h2/h3 at a higher specificity than a lone class, which left
   the white hero heading dark on a dark panel. */
/* The design system styles .ifba-root a and p, which outrank a lone class:
   every rule below is scoped to .ifac so the page's own colours win. */
.ifac a, .ifac a:hover { text-decoration: none; }

/* ---------- hero ---------- */
.ifac .ifac-hero {
	position: relative; overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--ifba-space-8);
	margin: var(--ifba-space-6) 0 var(--ifba-space-8); padding: clamp(28px, 5vw, 56px); border-radius: var(--ifba-radius-xl);
	background:
		radial-gradient(120% 130% at 85% 0%, rgba(13,148,136,.55), transparent 58%),
		linear-gradient(150deg, #0B3F49, #08313A 55%, #062830);
}
.ifac .ifac-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ifba-space-3); margin-top: var(--ifba-space-5); }
.ifac .ifac-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--ifba-space-5);
	border-radius: 999px; font-weight: 650; text-decoration: none; border: 1px solid transparent;
	transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.ifac .ifac-btn--solid { background: #fff; color: #0B3F49; }
.ifac .ifac-btn--solid:hover { color: #047857; transform: translateY(-1px); }
.ifac .ifac-btn--ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.ifac .ifac-btn--ghost:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); }
.ifac .ifac-btn:focus-visible { outline: 3px solid #5EEAD4; outline-offset: 3px; }
.ifac .ifac-stamp { margin: var(--ifba-space-5) 0 0; font-size: var(--ifba-text-sm); color: rgba(255,255,255,.62); }
.ifac .ifac-hero__art { justify-self: center; width: 100%; max-width: 420px; }
.ifac .ifac-art { display: block; width: 100%; height: auto; }
.ifac .ifac-art--hero { filter: drop-shadow(0 18px 30px rgba(0,0,0,.28)); }

/* ---------- the controls ---------- */
.ifac .ifac-panel {
	margin-bottom: var(--ifba-space-8); padding: clamp(22px, 3.4vw, 34px); border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-xl);
	background: var(--ifba-surface); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 44px -28px rgba(15,23,42,.3);
}
.ifac .ifac-panel:focus { outline: none; }
.ifac .ifac-panel:focus-visible { outline: 3px solid var(--ifba-primary-600); outline-offset: 4px; }
.ifac .ifac-panel__head { margin-bottom: var(--ifba-space-5); }

/* ---------- what we have done ---------- */
.ifac .ifac-section { margin-bottom: var(--ifba-space-8); }
.ifac .ifac-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ifba-space-5); margin-top: var(--ifba-space-5); }
.ifac .ifac-card {
	padding: var(--ifba-space-5); border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-lg); background: var(--ifba-surface);
	box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ifac .ifac-card:hover { border-color: var(--ifba-primary-100); box-shadow: 0 16px 36px -22px rgba(15,23,42,.45); transform: translateY(-2px); }
.ifac .ifac-card__art { margin-bottom: var(--ifba-space-4); border-radius: var(--ifba-radius-md); background: var(--ifba-bg-muted); padding: var(--ifba-space-3); }
.ifac .ifac-card__title { margin: 0 0 var(--ifba-space-2); font-size: var(--ifba-text-lg); color: var(--ifba-text); }
.ifac .ifac-card__body { margin: 0; color: var(--ifba-text-muted); line-height: 1.6; }
.ifac .ifac-list { margin: var(--ifba-space-5) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--ifba-space-3); }
.ifac .ifac-list li { position: relative; padding-left: 28px; color: var(--ifba-text-muted); line-height: 1.55; }
.ifac .ifac-list li::before {
	content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
	background: var(--ifba-primary-50); box-shadow: inset 0 0 0 2px var(--ifba-primary-600);
}

/* ---------- where we fall short ---------- */
.ifac .ifac-gaps { padding: clamp(22px, 3.4vw, 34px); border: 1px solid #FCD9A6; border-left: 5px solid #B45309; border-radius: var(--ifba-radius-lg); background: #FFFBF3; }
.ifac .ifac-gaps__list { margin: var(--ifba-space-4) 0 0; padding-left: var(--ifba-space-5); color: var(--ifba-text); line-height: 1.65; }
.ifac .ifac-gaps__list li + li { margin-top: var(--ifba-space-3); }

/* ---------- telling us ---------- */
.ifac .ifac-tell { padding: clamp(22px, 3.4vw, 34px); border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-xl); background: var(--ifba-bg-muted); }
.ifac .ifac-tell p { margin: 0 0 var(--ifba-space-5); color: var(--ifba-text-muted); max-width: 62ch; line-height: 1.6; }
.ifac .ifac-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--ifba-space-3); }
.ifac .ifac-way {
	display: flex; flex-direction: column; gap: 2px; padding: var(--ifba-space-4); border: 1px solid var(--ifba-border); border-radius: var(--ifba-radius-lg);
	background: var(--ifba-surface); text-decoration: none; transition: border-color .2s ease, transform .2s ease;
}
.ifac .ifac-way strong { color: var(--ifba-text); }
.ifac .ifac-way span { font-size: var(--ifba-text-sm); color: var(--ifba-text-muted); overflow-wrap: anywhere; }
.ifac .ifac-way:hover { border-color: var(--ifba-primary-600); transform: translateY(-2px); }
.ifac .ifac-way:focus-visible { outline: 3px solid var(--ifba-primary-600); outline-offset: 3px; }

/* ---------- motion: opt-in, and never load-bearing ---------- */
@keyframes ifac-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ifac-ring { 0%, 22% { transform: translateX(0); } 33%, 55% { transform: translateX(98px); } 66%, 88% { transform: translateX(196px); } 100% { transform: translateX(0); } }
@keyframes ifac-hop { 0%, 18% { transform: translate(0, 0); } 28%, 44% { transform: translate(84px, 0); } 54%, 70% { transform: translate(140px, 56px); } 80%, 96% { transform: translate(56px, 88px); } 100% { transform: translate(0, 0); } }
@keyframes ifac-sweep { 0%, 100% { width: 60px; } 50% { width: 150px; } }
@keyframes ifac-orbit { to { transform: rotate(360deg); } }
@keyframes ifac-wave { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes ifac-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
	.ifac .ifac-hero__text, .ifac .ifac-hero__art { animation: ifac-rise .6s cubic-bezier(.22, 1, .36, 1) both; }
	.ifac .ifac-hero__art { animation-delay: .12s; }
	.ifac .ifac-card { animation: ifac-rise .55s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--d, 0ms); }
	.ifac .ifac-line { animation: ifac-fade .8s ease both; animation-delay: var(--d, 0ms); }
	.ifac .ifac-ring { animation: ifac-ring 7s steps(1, end) infinite; }
	.ifac .ifac-hop { animation: ifac-hop 6s ease-in-out infinite; }
	.ifac .ifac-sweep { animation: ifac-sweep 5s ease-in-out infinite; }
	.ifac .ifac-orbit { animation: ifac-orbit 9s linear infinite; transform-origin: 120px 75px; }
	.ifac .ifac-wave { animation: ifac-wave 2.4s ease-in-out infinite; animation-delay: var(--d, 0ms); }
	.ifac .ifac-half { transform-origin: 352px 214px; animation: ifac-orbit 22s linear infinite; }
}

/* ---------- smaller screens ---------- */
@media (max-width: 900px) {
	.ifac .ifac-hero { grid-template-columns: minmax(0, 1fr); }
	.ifac .ifac-hero__art { max-width: 340px; justify-self: start; }
	.ifac .ifac-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.ifac .ifac-hero__actions .ifac-btn { flex: 1 1 100%; }
}