/**
 * CliniEd — Components
 * Reusable UI pieces. Consumes tokens.css + base.css.
 */

/* ===========================================================================
 * Buttons
 * ======================================================================== */
.ce-btn,
.wp-block-button__link.ce-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ce-space-2);
	padding: 0.8em 1.5em;
	border: 1px solid transparent;
	border-radius: var(--ce-radius-md);
	background: var(--ce-primary);
	color: var(--ce-primary-contrast);
	font-family: var(--ce-font-heading);
	font-size: var(--ce-fs-base);
	font-weight: var(--ce-fw-heading);
	line-height: 1.2;
	letter-spacing: var(--ce-tracking-tight);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: var(--ce-shadow-sm);
	transition:
		background-color var(--ce-dur-fast) var(--ce-ease),
		border-color var(--ce-dur-fast) var(--ce-ease),
		color var(--ce-dur-fast) var(--ce-ease),
		transform var(--ce-dur-fast) var(--ce-ease),
		box-shadow var(--ce-dur-fast) var(--ce-ease);
}

.ce-btn:hover {
	background: var(--ce-primary-hover);
	color: var(--ce-primary-contrast);
	box-shadow: var(--ce-shadow-sm);
}

.ce-btn[aria-disabled="true"],
.ce-btn:disabled {
	opacity: 0.55;
	pointer-events: none;
	box-shadow: none;
}

.ce-btn__icon { width: 1.05em; height: 1.05em; flex: none; }

/* Variants */
.ce-btn--outline {
	background: transparent;
	border-color: var(--ce-accent-solid);
	color: var(--ce-accent-solid);
	box-shadow: none;
}
.ce-btn--outline:hover {
	background: var(--ce-accent-tint);
	border-color: var(--ce-accent-hover);
	color: var(--ce-accent-hover);
}

/*
 * The header's "Log in": a quiet white button with a hairline border, so the
 * violet outline beside it reads as the primary action.
 */
.ce-btn--ghost {
	background: var(--ce-bg);
	border-color: var(--ce-border);
	color: var(--ce-ink);
	box-shadow: none;
}
.ce-btn--ghost:hover { background: var(--ce-surface); border-color: var(--ce-border-strong); color: var(--ce-ink); }

/*
 * On the indigo CTA band. Contract: "white-outline button" — a plain
 * 1px white border, no fill.
 */
.ce-btn--on-dark {
	background: transparent;
	border-color: var(--ce-white);
	color: var(--ce-white);
	box-shadow: none;
}
.ce-btn--on-dark:hover {
	background: var(--ce-white);
	border-color: var(--ce-white);
	color: var(--ce-indigo);
}

/* High-emphasis action on the indigo CTA band. */
.ce-btn--white { background: var(--ce-white); color: var(--ce-indigo); }
.ce-btn--white:hover { background: var(--ce-surface); color: var(--ce-indigo); }

/* Sizes */
.ce-btn--sm { padding: 0.58em 1.15em; font-size: var(--ce-fs-sm); border-radius: var(--ce-radius-sm); }
.ce-btn--lg { padding: 0.95em 1.9em; font-size: var(--ce-fs-md); }
.ce-btn--block { display: flex; width: 100%; }

/* Text link with arrow */
.ce-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--ce-space-2);
	font-family: var(--ce-font-heading);
	font-weight: var(--ce-fw-heading);
	text-decoration: none;
}
.ce-link-arrow svg { transition: transform var(--ce-dur-fast) var(--ce-ease); }
.ce-link-arrow:hover svg { transform: translateX(4px); }

/* ===========================================================================
 * Badges / chips / pills
 * ======================================================================== */
.ce-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--ce-space-2);
	padding: 0.35em 0.7em;
	border-radius: var(--ce-radius-sm);
	background: var(--ce-primary-soft);
	color: var(--ce-primary-hover);
	font-family: var(--ce-font-heading);
	font-size: var(--ce-fs-xs);
	font-weight: var(--ce-fw-bold);
	letter-spacing: 0.02em;
	line-height: 1.4;
	white-space: nowrap;
}

.ce-badge--accent  { background: var(--ce-accent-tint);  color: var(--ce-accent-solid); }
.ce-badge--warning { background: var(--ce-accent-tint); color: var(--ce-accent-solid); }
.ce-badge--danger  { background: var(--ce-negative-soft);  color: var(--ce-negative); }
.ce-badge--info    { background: var(--ce-accent-tint);    color: var(--ce-accent); }
.ce-badge--neutral { background: var(--ce-surface-sunken); color: var(--ce-text-muted); }
.ce-badge--on-dark {
	background: rgba(255, 255, 255, 0.12);
	color: var(--ce-white);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.ce-badge__dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

/* ===========================================================================
 * Cards
 * ======================================================================== */
.ce-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 2.4vw, 2.125rem);
	border: 1px solid var(--ce-border);
	border-radius: var(--ce-radius-lg);
	background: var(--ce-bg);
	box-shadow: var(--ce-shadow-xs);
	transition:
		transform var(--ce-dur) var(--ce-ease-out),
		box-shadow var(--ce-dur) var(--ce-ease-out),
		border-color var(--ce-dur) var(--ce-ease-out);
}

.ce-card--hover:hover {
	border-color: var(--ce-accent-tint);
	box-shadow: var(--ce-shadow-md);
}

.ce-card__title { margin-bottom: var(--ce-space-3); font-size: var(--ce-fs-xl); }
.ce-card__text  { margin-bottom: 0; color: var(--ce-text-muted); }
.ce-card__footer {
	margin-top: auto;
	padding-top: var(--ce-space-5);
}

/* Card whose whole surface is clickable via a stretched link */
.ce-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* Icon tile inside a card */
.ce-icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: var(--ce-space-5);
	border-radius: var(--ce-radius-md);
	background: var(--ce-primary-soft);
	color: var(--ce-primary);
	flex: none;
}
.ce-icon-tile svg { width: 26px; height: 26px; }
.ce-icon-tile--accent  { background: var(--ce-accent-tint);  color: var(--ce-accent-solid); }
.ce-icon-tile--warning { background: var(--ce-accent-tint); color: var(--ce-accent-solid); }
.ce-icon-tile--info    { background: var(--ce-accent-tint);    color: var(--ce-accent); }
.ce-icon-tile--danger  { background: var(--ce-negative-soft);  color: var(--ce-negative); }
.ce-icon-tile--round   { border-radius: 50%; }
.ce-icon-tile--sm { width: 40px; height: 40px; margin-bottom: var(--ce-space-3); }
.ce-icon-tile--sm svg { width: 20px; height: 20px; }

/* Feature card with a coloured top rule */
.ce-card--ruled { overflow: hidden; }
.ce-card--ruled::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 4px;
	background: var(--ce-card-rule, var(--ce-primary));
}

/* Glass card, for use over dark hero backgrounds */
.ce-card--glass {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(14px);
	box-shadow: none;
}
.ce-card--glass :is(h1,h2,h3,h4,h5,h6) { color: var(--ce-white); }
.ce-card--glass .ce-card__text { color: rgba(255, 255, 255, 0.7); }

/* ===========================================================================
 * Exam-track card
 * ======================================================================== */
.ce-track-card {
	--ce-card-rule: var(--ce-primary);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-4);
	padding: clamp(1.5rem, 2.4vw, 2rem);
	border: 1px solid var(--ce-border);
	border-radius: var(--ce-radius-lg);
	background: var(--ce-bg);
	overflow: hidden;
	transition: transform var(--ce-dur) var(--ce-ease-out), box-shadow var(--ce-dur) var(--ce-ease-out);
}
.ce-track-card:hover { transform: translateY(-6px); box-shadow: var(--ce-shadow-lg); }

.ce-track-card::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 4px;
	background: var(--ce-card-rule);
}

.ce-track-card--usmle  { --ce-card-rule: var(--ce-accent); }
.ce-track-card--fcps   { --ce-card-rule: var(--ce-accent); }
.ce-track-card--plab   { --ce-card-rule: var(--ce-accent); }
.ce-track-card--neetpg { --ce-card-rule: var(--ce-accent); }

.ce-track-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ce-space-3); }
.ce-track-card__abbr {
	font-family: var(--ce-font-heading);
	font-size: var(--ce-fs-2xl);
	font-weight: var(--ce-fw-bold);
	letter-spacing: var(--ce-tracking-tight);
	color: var(--ce-card-rule);
	margin: 0;
}
.ce-track-card__name { margin: 0; font-size: var(--ce-fs-base); color: var(--ce-text-muted); font-weight: var(--ce-fw-medium); font-family: var(--ce-font-body); }

.ce-track-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ce-space-2) var(--ce-space-5);
	padding-top: var(--ce-space-4);
	margin-top: auto;
	border-top: 1px solid var(--ce-border);
	font-size: var(--ce-fs-sm);
	color: var(--ce-text-muted);
}
.ce-track-card__meta-item { display: inline-flex; align-items: center; gap: var(--ce-space-2); }
.ce-track-card__meta-item svg { width: 15px; height: 15px; color: var(--ce-card-rule); flex: none; }

/* ===========================================================================
 * Stats
 * ======================================================================== */
.ce-stat { text-align: center; }
.ce-stat__value {
	display: block;
	font-family: var(--ce-font-heading);
	font-size: var(--ce-fs-3xl);
	font-weight: var(--ce-fw-bold);
	line-height: 1.05;
	letter-spacing: var(--ce-tracking-tight);
	color: var(--ce-heading);
}
.ce-stat__label {
	display: block;
	margin-top: var(--ce-space-2);
	font-size: var(--ce-fs-sm);
	color: var(--ce-text-muted);
}
.ce-section--invert .ce-stat__value { color: var(--ce-white); }
.ce-section--invert .ce-stat__label { color: rgba(255, 255, 255, 0.66); }

.ce-stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--ce-space-8) var(--ce-space-6);
}

/* ===========================================================================
 * Steps / process
 * ======================================================================== */
.ce-step { position: relative; padding-left: 4.25rem; }
.ce-step__num {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--ce-primary);
	color: var(--ce-white);
	font-family: var(--ce-font-heading);
	font-size: var(--ce-fs-lg);
	font-weight: var(--ce-fw-bold);
}
.ce-step__title { margin-bottom: var(--ce-space-2); font-size: var(--ce-fs-lg); }
.ce-step__text { margin: 0; color: var(--ce-text-muted); }

/* Connector line between steps in a horizontal row */
.ce-steps { display: grid; gap: var(--ce-space-8); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ===========================================================================
 * Testimonials
 * ======================================================================== */
.ce-quote {
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-5);
	padding: clamp(1.5rem, 2.4vw, 2.125rem);
	border: 1px solid var(--ce-border);
	border-radius: var(--ce-radius-lg);
	background: var(--ce-bg);
	box-shadow: var(--ce-shadow-xs);
	height: 100%;
}
.ce-quote__stars { display: flex; gap: 2px; color: var(--ce-accent); }
.ce-quote__stars svg { width: 17px; height: 17px; }
.ce-quote__text { margin: 0; font-size: var(--ce-fs-base); line-height: var(--ce-lh-relaxed); }
.ce-quote__footer { display: flex; align-items: center; gap: var(--ce-space-3); margin-top: auto; }
.ce-quote__avatar {
	width: 44px; height: 44px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--ce-primary-soft);
	flex: none;
}
.ce-quote__avatar--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ce-font-heading);
	font-weight: var(--ce-fw-bold);
	font-size: var(--ce-fs-sm);
	color: var(--ce-primary);
}
.ce-quote__name { display: block; font-family: var(--ce-font-heading); font-weight: var(--ce-fw-heading); font-size: var(--ce-fs-sm); color: var(--ce-heading); }
.ce-quote__role { display: block; font-size: var(--ce-fs-xs); color: var(--ce-text-muted); }

/* ===========================================================================
 * Accordion / FAQ
 * ======================================================================== */
.ce-accordion { display: flex; flex-direction: column; gap: var(--ce-space-3); }

.ce-accordion__item {
	border: 1px solid var(--ce-border);
	border-radius: var(--ce-radius-md);
	background: var(--ce-bg);
	overflow: hidden;
	transition: border-color var(--ce-dur-fast) var(--ce-ease), box-shadow var(--ce-dur-fast) var(--ce-ease);
}
.ce-accordion__item[open] { border-color: var(--ce-primary-soft); box-shadow: var(--ce-shadow-sm); }

.ce-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ce-space-4);
	width: 100%;
	padding: var(--ce-space-5) var(--ce-space-6);
	background: none;
	border: 0;
	font-family: var(--ce-font-heading);
	font-size: var(--ce-fs-base);
	font-weight: var(--ce-fw-heading);
	color: var(--ce-heading);
	text-align: left;
	cursor: pointer;
	list-style: none;
}
.ce-accordion__trigger::-webkit-details-marker { display: none; }

.ce-accordion__icon {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--ce-primary);
	transition: transform var(--ce-dur) var(--ce-ease);
}
.ce-accordion__item[open] .ce-accordion__icon { transform: rotate(45deg); }

.ce-accordion__panel {
	padding: 0 var(--ce-space-6) var(--ce-space-6);
	color: var(--ce-text-muted);
}
.ce-accordion__panel > :last-child { margin-bottom: 0; }

/* ===========================================================================
 * Pricing
 * ======================================================================== */
.ce-price-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-5);
	padding: clamp(1.75rem, 2.6vw, 2.5rem);
	border: 1px solid var(--ce-border);
	border-radius: var(--ce-radius-lg);
	background: var(--ce-bg);
	box-shadow: var(--ce-shadow-xs);
	transition: transform var(--ce-dur) var(--ce-ease-out), box-shadow var(--ce-dur) var(--ce-ease-out);
}
.ce-price-card:hover { transform: translateY(-5px); box-shadow: var(--ce-shadow-lg); }

.ce-price-card--featured {
	border-color: var(--ce-primary);
	box-shadow: var(--ce-shadow-lg);
}
.ce-price-card--featured::before {
	content: attr(data-ribbon);
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0.42em 1.1em;
	border-radius: var(--ce-radius-pill);
	background: var(--ce-accent-solid);
	color: var(--ce-white);
	font-family: var(--ce-font-heading);
	font-size: var(--ce-fs-xs);
	font-weight: var(--ce-fw-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ce-price-card__name { margin: 0; font-size: var(--ce-fs-lg); }
.ce-price-card__desc { margin: 0; font-size: var(--ce-fs-sm); color: var(--ce-text-muted); }

.ce-price-card__amount {
	display: flex;
	align-items: baseline;
	gap: var(--ce-space-2);
	font-family: var(--ce-font-heading);
	color: var(--ce-heading);
}
.ce-price-card__figure { font-size: var(--ce-fs-4xl); font-weight: var(--ce-fw-bold); letter-spacing: var(--ce-tracking-tight); line-height: 1; }
.ce-price-card__period { font-size: var(--ce-fs-sm); font-weight: var(--ce-fw-medium); color: var(--ce-text-muted); }

.ce-feature-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--ce-space-3); }
.ce-feature-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--ce-space-3);
	font-size: var(--ce-fs-base);
	color: var(--ce-text);
}
.ce-feature-list svg { flex: none; width: 19px; height: 19px; margin-top: 0.18em; color: var(--ce-accent); }
.ce-feature-list li.is-muted { color: var(--ce-text-muted); }
.ce-feature-list li.is-muted svg { color: var(--ce-grey-400); }

.ce-price-card__cta { margin-top: auto; }

/* Billing toggle */
.ce-billing-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--ce-space-2);
	padding: 5px;
	border: 1px solid var(--ce-border);
	border-radius: var(--ce-radius-pill);
	background: var(--ce-surface-alt);
}
.ce-billing-toggle__btn {
	padding: 0.55em 1.3em;
	border: 0;
	border-radius: var(--ce-radius-pill);
	background: transparent;
	font-family: var(--ce-font-heading);
	font-size: var(--ce-fs-sm);
	font-weight: var(--ce-fw-heading);
	color: var(--ce-text-muted);
	transition: background-color var(--ce-dur-fast) var(--ce-ease), color var(--ce-dur-fast) var(--ce-ease);
}
.ce-billing-toggle__btn[aria-selected="true"] {
	background: var(--ce-bg);
	color: var(--ce-heading);
	box-shadow: var(--ce-shadow-sm);
}

/* ===========================================================================
 * Forms
 * ======================================================================== */
.ce-field { display: flex; flex-direction: column; gap: var(--ce-space-2); }

.ce-label {
	font-family: var(--ce-font-heading);
	font-size: var(--ce-fs-sm);
	font-weight: var(--ce-fw-heading);
	color: var(--ce-heading);
}
.ce-label .required { color: var(--ce-negative); }

.ce-input,
.ce-textarea,
.ce-select,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select {
	width: 100%;
	padding: 0.78em 1.05em;
	border: 1px solid var(--ce-border-strong);
	border-radius: var(--ce-radius-sm);
	background: var(--ce-bg);
	color: var(--ce-text);
	font-size: var(--ce-fs-base);
	transition: border-color var(--ce-dur-fast) var(--ce-ease), box-shadow var(--ce-dur-fast) var(--ce-ease);
}

.ce-input:focus,
.ce-textarea:focus,
.ce-select:focus,
input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--ce-primary);
	box-shadow: var(--ce-focus-ring);
}

.ce-input::placeholder,
textarea::placeholder { color: var(--ce-grey-400); }

textarea, .ce-textarea { min-height: 150px; resize: vertical; }

.ce-select, select {
	appearance: none;
	padding-right: 2.6em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7889' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.95em center;
	background-size: 1.05em;
}

.ce-help { font-size: var(--ce-fs-xs); color: var(--ce-text-muted); }
.ce-error { font-size: var(--ce-fs-xs); color: var(--ce-negative); }

/* ===========================================================================
 * Notices
 * ======================================================================== */
.ce-notice {
	display: flex;
	gap: var(--ce-space-3);
	padding: var(--ce-space-4) var(--ce-space-5);
	border: 1px solid var(--ce-border);
	border-left-width: 4px;
	border-radius: var(--ce-radius-sm);
	background: var(--ce-surface-alt);
	font-size: var(--ce-fs-base);
}
.ce-notice svg { flex: none; width: 20px; height: 20px; margin-top: 0.15em; }
.ce-notice--info    { border-left-color: var(--ce-primary); background: var(--ce-primary-soft); }
.ce-notice--success { border-left-color: var(--ce-positive); background: var(--ce-positive-soft); }
.ce-notice--warning { border-left-color: var(--ce-accent); background: var(--ce-accent-tint); }
.ce-notice--danger  { border-left-color: var(--ce-negative);  background: var(--ce-negative-soft); }

/* ===========================================================================
 * Logo strip / trust bar
 * ======================================================================== */
.ce-logo-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.75rem, 5vw, 4rem);
}
.ce-logo-strip__item {
	font-family: var(--ce-font-heading);
	font-size: var(--ce-fs-lg);
	font-weight: var(--ce-fw-bold);
	letter-spacing: var(--ce-tracking-tight);
	color: var(--ce-grey-400);
	opacity: 0.85;
	transition: color var(--ce-dur-fast) var(--ce-ease), opacity var(--ce-dur-fast) var(--ce-ease);
}
.ce-logo-strip__item:hover { color: var(--ce-primary); opacity: 1; }

/* ===========================================================================
 * Breadcrumbs
 * ======================================================================== */
.ce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ce-space-2);
	font-size: var(--ce-fs-sm);
	color: var(--ce-text-muted);
}
.ce-breadcrumb a { color: inherit; text-decoration: none; }
.ce-breadcrumb a:hover { color: var(--ce-primary); }
.ce-breadcrumb__sep { opacity: 0.5; }
.ce-breadcrumb [aria-current="page"] { color: var(--ce-heading); font-weight: var(--ce-fw-medium); }

/* ===========================================================================
 * Pagination
 * ======================================================================== */
.ce-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ce-space-2); margin-top: var(--ce-space-12); }
.ce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 var(--ce-space-3);
	border: 1px solid var(--ce-border);
	border-radius: var(--ce-radius-sm);
	background: var(--ce-bg);
	color: var(--ce-text);
	font-family: var(--ce-font-heading);
	font-weight: var(--ce-fw-heading);
	font-size: var(--ce-fs-sm);
	text-decoration: none;
	transition: all var(--ce-dur-fast) var(--ce-ease);
}
.ce-pagination .page-numbers:hover { border-color: var(--ce-primary); color: var(--ce-primary); }
.ce-pagination .page-numbers.current {
	background: var(--ce-primary);
	border-color: var(--ce-primary);
	color: var(--ce-white);
}
.ce-pagination .page-numbers.dots { border-color: transparent; background: none; }

/* ===========================================================================
 * Tabs
 * ======================================================================== */
.ce-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ce-space-2);
	margin-bottom: var(--ce-space-8);
	padding: 6px;
	border: 1px solid var(--ce-border);
	border-radius: var(--ce-radius-pill);
	background: var(--ce-surface-alt);
	width: fit-content;
	max-width: 100%;
}
.ce-tabs__list--center { margin-inline: auto; }

.ce-tabs__tab {
	padding: 0.62em 1.4em;
	border: 0;
	border-radius: var(--ce-radius-pill);
	background: transparent;
	font-family: var(--ce-font-heading);
	font-size: var(--ce-fs-sm);
	font-weight: var(--ce-fw-heading);
	color: var(--ce-text-muted);
	white-space: nowrap;
	transition: background-color var(--ce-dur-fast) var(--ce-ease), color var(--ce-dur-fast) var(--ce-ease);
}
.ce-tabs__tab:hover { color: var(--ce-heading); }
.ce-tabs__tab[aria-selected="true"] {
	background: var(--ce-bg);
	color: var(--ce-primary);
	box-shadow: var(--ce-shadow-sm);
}
.ce-tabs__panel[hidden] { display: none; }

/* ===========================================================================
 * Media frames
 * ======================================================================== */
.ce-frame {
	position: relative;
	border-radius: var(--ce-radius-lg);
	overflow: hidden;
	box-shadow: var(--ce-shadow-lg);
	background: var(--ce-surface-sunken);
}
.ce-frame img { width: 100%; height: 100%; object-fit: cover; }

.ce-frame--tilt { transform: rotate(-1.4deg); }
.ce-frame--ratio-4-3 { aspect-ratio: 4 / 3; }
.ce-frame--ratio-16-9 { aspect-ratio: 16 / 9; }
.ce-frame--ratio-1-1 { aspect-ratio: 1 / 1; }

/* Placeholder shown until a real image is dropped in */
.ce-frame__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ce-space-3);
	width: 100%;
	height: 100%;
	min-height: 240px;
	padding: var(--ce-space-8);
	background:
		linear-gradient(135deg, var(--ce-surface) 0%, var(--ce-surface) 100%);
	color: var(--ce-grey-400);
	font-family: var(--ce-font-heading);
	font-size: var(--ce-fs-sm);
	font-weight: var(--ce-fw-heading);
	text-align: center;
}
.ce-frame__placeholder svg { width: 38px; height: 38px; opacity: 0.6; }

/* ===========================================================================
 * Flat feature grid ("what is inside")
 * ---------------------------------------------------------------------------
 * The design is explicit that this grid is NOT boxed cards. It is one table
 * of six cells, ruled on both axes by a single hairline, sitting straight on
 * the page ground: no background, no border box, no shadow.
 *
 * The rules are drawn with an outset border on the grid plus a border on
 * every cell, so the last row and last column never leave a stray edge no
 * matter how many columns the breakpoint gives us.
 * ======================================================================== */
.ce-flat-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--ce-divider);
	border-left: 1px solid var(--ce-divider);
}

@media (max-width: 900px) {
	.ce-flat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.ce-flat-grid { grid-template-columns: minmax(0, 1fr); }
}

.ce-flat-item {
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-2);
	padding: var(--ce-space-6) var(--ce-space-6) var(--ce-space-8);
	border-right: 1px solid var(--ce-divider);
	border-bottom: 1px solid var(--ce-divider);
	background: none;
	box-shadow: none;
}

/* The stat line sits at the foot of the cell whatever the copy length. */
.ce-flat-item__stat { margin-top: auto; padding-top: var(--ce-space-4); }

.ce-flat-item__label {
	margin: 0;
	font-size: var(--ce-fs-xxs);
	font-weight: var(--ce-fw-heading);
	letter-spacing: var(--ce-tracking-label);
	text-transform: uppercase;
	color: var(--ce-accent);
}

.ce-flat-item__title {
	margin: 0;
	font-size: var(--ce-fs-lg);
	font-weight: var(--ce-fw-heading);
	line-height: var(--ce-lh-snug);
	color: var(--ce-ink);
}

.ce-flat-item__text {
	margin: 0;
	color: var(--ce-muted);
	line-height: var(--ce-lh-normal);
}

.ce-flat-item__stat {
	margin: 0;
	font-size: var(--ce-fs-sm);
	color: var(--ce-muted);
}

/* ===========================================================================
 * Numbered value props
 * ---------------------------------------------------------------------------
 * Contract: "large bold purple numerals (01/02/03), not icons."
 * ======================================================================== */
.ce-numbered { display: flex; flex-direction: column; gap: var(--ce-space-8); }

.ce-numbered__item {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: var(--ce-space-3);
	align-items: start;
}

.ce-numbered__num {
	margin: 0;
	font-size: var(--ce-fs-xl);
	font-weight: var(--ce-fw-bold);
	line-height: 1.1;
	color: var(--ce-accent);
	font-variant-numeric: tabular-nums;
}

.ce-numbered__title {
	margin: 0 0 var(--ce-space-2);
	font-size: var(--ce-fs-lg);
	font-weight: var(--ce-fw-heading);
	line-height: var(--ce-lh-snug);
	color: var(--ce-ink);
}

.ce-numbered__text { margin: 0; color: var(--ce-muted); }

/* ===========================================================================
 * Demo question card
 * ---------------------------------------------------------------------------
 * White rounded card on the lavender section, matching the live page.
 * ======================================================================== */
.ce-question-card {
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-4);
	padding: var(--ce-space-6);
	border-radius: var(--ce-radius-lg);
	background: var(--ce-bg);
	box-shadow: var(--ce-shadow-md);
}

.ce-question-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ce-space-4);
	flex-wrap: wrap;
}

.ce-question-card__meta {
	margin: 0;
	font-size: var(--ce-fs-xxs);
	letter-spacing: var(--ce-tracking-label);
	text-transform: uppercase;
	color: var(--ce-muted);
}

.ce-question-card__stem { margin: 0; color: var(--ce-ink); line-height: var(--ce-lh-normal); }

.ce-question-card__lead {
	margin: 0;
	font-weight: var(--ce-fw-heading);
	color: var(--ce-ink);
}

/* Laboratory values — a bordered two-column block inside the card. */
.ce-labs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ce-space-3) var(--ce-space-6);
	margin: 0;
	padding: var(--ce-space-4) var(--ce-space-5);
	border: 1px solid var(--ce-divider);
	border-radius: var(--ce-radius-md);
	font-size: var(--ce-fs-sm);
}
@media (max-width: 480px) {
	.ce-labs { grid-template-columns: minmax(0, 1fr); }
}

.ce-labs__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ce-space-4);
	min-width: 0;
}
.ce-labs__row--wide { grid-column: 1 / -1; justify-content: flex-start; gap: var(--ce-space-5); }
.ce-labs dt { margin: 0; color: var(--ce-muted); }
.ce-labs dd { margin: 0; color: var(--ce-ink); font-variant-numeric: tabular-nums; }

/* Options — the letter lives in its own column, as it does in the paper. */
.ce-options {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-2);
	color: var(--ce-ink);
}

.ce-option {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	align-items: center;
	gap: var(--ce-space-3);
	padding: var(--ce-space-3) var(--ce-space-4);
	border: 1px solid var(--ce-divider);
	border-radius: var(--ce-radius-md);
	line-height: var(--ce-lh-snug);
	transition: border-color var(--ce-dur-fast) var(--ce-ease), background-color var(--ce-dur-fast) var(--ce-ease);
}

.ce-option:hover {
	border-color: var(--ce-accent);
	background: var(--ce-accent-tint);
}

.ce-option__letter {
	font-size: var(--ce-fs-sm);
	font-weight: var(--ce-fw-medium);
	color: var(--ce-grey-400);
}

/* ===========================================================================
 * Result tags — the only two the contract defines
 * ======================================================================== */
.ce-tag-pass { color: var(--ce-accent); font-weight: var(--ce-fw-heading); }
.ce-tag-fail { color: var(--ce-muted); font-weight: var(--ce-fw-medium); }

/* ===========================================================================
 * Text link with an arrow-free, quiet treatment
 * ---------------------------------------------------------------------------
 * The design's secondary actions ("See what is inside", "Subscribe") are not
 * buttons: they are accent text sitting beside a button.
 * ======================================================================== */
.ce-link-action {
	display: inline-flex;
	align-items: center;
	gap: var(--ce-space-2);
	font-size: var(--ce-fs-md);
	font-weight: var(--ce-fw-medium);
	color: var(--ce-accent-solid);
	text-decoration: none;
	white-space: nowrap;
}
.ce-link-action:hover { color: var(--ce-accent-hover); text-decoration: underline; }
.ce-link-action svg { flex: none; }

/* ===========================================================================
 * Small pill label
 * ======================================================================== */
.ce-pill {
	display: inline-flex;
	align-items: center;
	padding: var(--ce-space-1) var(--ce-space-3);
	border: 1px solid var(--ce-accent-solid);
	border-radius: var(--ce-radius-md);
	font-size: var(--ce-fs-xs);
	font-weight: var(--ce-fw-medium);
	color: var(--ce-accent-solid);
	white-space: nowrap;
}

/* Status label — filled wash, no outline. */
.ce-pill--soft {
	border-color: transparent;
	background: var(--ce-accent-tint);
}

/* An access state rather than a status: set in small caps. */
.ce-pill--caps {
	font-size: var(--ce-fs-xxs);
	font-weight: var(--ce-fw-heading);
	letter-spacing: var(--ce-tracking-label);
	text-transform: uppercase;
}

/* ===========================================================================
 * Data panel — the white card the dashboards live in
 * ======================================================================== */
.ce-panel {
	padding: var(--ce-space-6);
	border: 1px solid var(--ce-divider);
	border-radius: var(--ce-radius-lg);
	background: var(--ce-bg);
	box-shadow: var(--ce-shadow-sm);
}
.ce-panel--roomy { padding: clamp(1.25rem, 2.5vw, 2rem); }

.ce-panel__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ce-space-5);
	flex-wrap: wrap;
	margin-bottom: var(--ce-space-6);
}

.ce-panel__title {
	margin: 0;
	font-size: var(--ce-fs-lg);
	font-weight: var(--ce-fw-heading);
	color: var(--ce-ink);
}

.ce-panel__meta {
	margin: var(--ce-space-1) 0 0;
	font-size: var(--ce-fs-sm);
	color: var(--ce-muted);
}

.ce-panel__figure { margin: 0; text-align: right; }
.ce-panel__figure-value {
	display: block;
	font-size: var(--ce-fs-3xl);
	font-weight: var(--ce-fw-heading);
	line-height: 1;
	color: var(--ce-accent-solid);
	font-variant-numeric: tabular-nums;
}
.ce-panel__figure-label {
	display: block;
	margin-top: var(--ce-space-1);
	font-size: var(--ce-fs-xs);
	color: var(--ce-muted);
}

/* Panels holding a table need their own padding rhythm. */
.ce-panel > .ce-panel__title + .ce-panel__meta { margin-bottom: var(--ce-space-6); }

/* ===========================================================================
 * Horizontal bar readout
 * ======================================================================== */
.ce-bars {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-5);
}

.ce-bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--ce-space-2) var(--ce-space-4);
	align-items: baseline;
}

.ce-bar__label { font-size: var(--ce-fs-base); color: var(--ce-ink); }
.ce-bar__value {
	font-size: var(--ce-fs-base);
	color: var(--ce-ink);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.ce-bar__track {
	grid-column: 1 / -1;
	height: 6px;
	border-radius: var(--ce-radius-pill);
	background: var(--ce-grey-200);
	overflow: hidden;
}

.ce-bar__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--ce-accent-solid);
}

/*
 * The weakest row is drawn in the lighter end of the same violet. It is the
 * one place a second tone appears, and it is a tint of the single accent —
 * not a new hue — so the one-accent rule holds.
 */
.ce-bar__fill--soft { background: var(--ce-accent-light); }

/* ===========================================================================
 * Tabbed views
 * ---------------------------------------------------------------------------
 * Without JavaScript every panel and note is shown in turn, so nothing is
 * hidden from a reader or a crawler. The script adds `data-ce-tabs-ready`,
 * which is what actually switches to one-at-a-time behaviour.
 * ======================================================================== */
.ce-tabs {
	display: inline-flex;
	padding: 3px;
	margin-bottom: var(--ce-space-5);
	border: 1px solid var(--ce-divider);
	border-radius: var(--ce-radius-md);
	background: var(--ce-bg);
}

.ce-tabs__tab {
	appearance: none;
	border: 0;
	background: transparent;
	padding: var(--ce-space-2) var(--ce-space-4);
	border-radius: var(--ce-radius-sm);
	font: inherit;
	font-size: var(--ce-fs-base);
	color: var(--ce-muted);
	cursor: pointer;
	transition: background-color var(--ce-dur-fast) var(--ce-ease), color var(--ce-dur-fast) var(--ce-ease);
}
.ce-tabs__tab:hover { color: var(--ce-ink); }
.ce-tabs__tab.is-active {
	background: var(--ce-accent-tint);
	color: var(--ce-accent-solid);
	font-weight: var(--ce-fw-medium);
}

.ce-tabs__note { margin: 0 0 var(--ce-space-4); color: var(--ce-muted); font-size: var(--ce-fs-base); }
.ce-tabs__panel + .ce-tabs__panel { margin-top: var(--ce-space-6); }

[data-ce-tabs-ready] .ce-tabs__panel,
[data-ce-tabs-ready] .ce-tabs__note { display: none; }
[data-ce-tabs-ready] .ce-tabs__panel.is-active,
[data-ce-tabs-ready] .ce-tabs__note.is-active { display: block; }
[data-ce-tabs-ready] .ce-tabs__panel + .ce-tabs__panel { margin-top: 0; }

/* ===========================================================================
 * Cohort table
 * ======================================================================== */
.ce-table-scroll { overflow-x: auto; }

.ce-table {
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
	font-size: var(--ce-fs-base);
}

/*
 * The candidate column holds two lines of text. Without a floor it collapses
 * inside the scroller and every name wraps over three lines.
 */
.ce-table :is(th, td):first-child { min-width: 220px; }

.ce-table thead th {
	padding: var(--ce-space-3) var(--ce-space-3);
	border-bottom: 1px solid var(--ce-divider);
	font-size: var(--ce-fs-xxs);
	font-weight: var(--ce-fw-medium);
	letter-spacing: var(--ce-tracking-label);
	text-transform: uppercase;
	color: var(--ce-muted);
	text-align: left;
	white-space: nowrap;
}

.ce-table tbody th,
.ce-table tbody td {
	padding: var(--ce-space-4) var(--ce-space-3);
	border-bottom: 1px solid var(--ce-divider);
	font-weight: var(--ce-fw-body);
	color: var(--ce-ink);
	vertical-align: middle;
}
.ce-table tbody tr:last-child :is(th, td) { border-bottom: 0; }

/*
 * The candidate cell stays a real table cell — the avatar and the two lines
 * are laid out by an inner flex wrapper, so the row's hairline still runs the
 * full width of the table.
 */
.ce-table tbody th { text-align: left; }
.ce-table__cand { display: flex; align-items: center; gap: var(--ce-space-3); }

.ce-table__who { display: flex; flex-direction: column; min-width: 0; }
.ce-table__name { font-weight: var(--ce-fw-medium); color: var(--ce-ink); }
.ce-table__chapter { font-size: var(--ce-fs-sm); color: var(--ce-muted); }

.ce-table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Scoped to tbody td so they outrank the cell's own colour. */
.ce-table tbody td.ce-table__num--good { color: var(--ce-accent-solid); font-weight: var(--ce-fw-medium); }
.ce-table tbody td.ce-table__num--dim  { color: var(--ce-grey-400); }

/*
 * Pass and fail are separated by weight and colour only — the design gives no
 * green or red, and inventing one would break the single-accent rule.
 */
.ce-result { font-weight: var(--ce-fw-medium); }
.ce-result--pass { color: var(--ce-accent-solid); }
.ce-result--fail { color: var(--ce-muted); font-weight: var(--ce-fw-body); }

/* ===========================================================================
 * Avatar chip
 * ======================================================================== */
.ce-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ce-indigo);
	color: var(--ce-white);
	font-size: var(--ce-fs-xs);
	font-weight: var(--ce-fw-heading);
	letter-spacing: 0.02em;
}
.ce-avatar--lg { width: 60px; height: 60px; font-size: var(--ce-fs-lg); }

/* ===========================================================================
 * Donut charts and legends
 * ======================================================================== */
.ce-donut { display: block; width: 88px; height: 88px; margin: var(--ce-space-4) 0; }

.ce-legend {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-2);
	font-size: var(--ce-fs-xs);
	letter-spacing: var(--ce-tracking-label);
	text-transform: uppercase;
	color: var(--ce-muted);
}
.ce-legend li { display: flex; align-items: center; gap: var(--ce-space-2); }
.ce-legend__swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }

.ce-card--chart { padding: var(--ce-space-5); }
.ce-card__title {
	margin: 0;
	font-size: var(--ce-fs-base);
	font-weight: var(--ce-fw-medium);
	color: var(--ce-ink);
}

/* ===========================================================================
 * Candidate profile card
 * ======================================================================== */
.ce-profile { padding: var(--ce-space-6); text-align: left; }
.ce-profile__name {
	margin: var(--ce-space-4) 0 0;
	font-size: var(--ce-fs-lg);
	font-weight: var(--ce-fw-heading);
	color: var(--ce-ink);
}
.ce-profile__meta { margin: var(--ce-space-1) 0 0; font-size: var(--ce-fs-sm); color: var(--ce-muted); }
.ce-profile__mail { margin: var(--ce-space-1) 0 var(--ce-space-5); font-size: var(--ce-fs-sm); color: var(--ce-accent-solid); overflow-wrap: break-word; }

.ce-stat-rows { margin: 0; display: flex; flex-direction: column; gap: var(--ce-space-2); }
.ce-stat-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ce-space-4);
	padding: var(--ce-space-3) var(--ce-space-4);
	border-radius: var(--ce-radius-sm);
	background: var(--ce-grey-100);
}
.ce-stat-row dt {
	margin: 0;
	font-size: var(--ce-fs-xxs);
	letter-spacing: var(--ce-tracking-label);
	text-transform: uppercase;
	color: var(--ce-muted);
}
.ce-stat-row dd { margin: 0; font-weight: var(--ce-fw-medium); color: var(--ce-ink); font-variant-numeric: tabular-nums; }

/* ===========================================================================
 * Two-panel row
 * ======================================================================== */
.ce-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ce-space-6);
	margin-top: var(--ce-space-6);
}
.ce-duo__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ce-space-4); }
@media (max-width: 900px) {
	.ce-duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
	.ce-duo__inner { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
 * Video rail
 * ======================================================================== */
.ce-rail {
	margin: 0;
	padding: 0 0 var(--ce-space-4);
	list-style: none;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(240px, 1fr);
	gap: var(--ce-space-5);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
}
.ce-rail__item { scroll-snap-align: start; min-width: 0; }

/* ===========================================================================
 * Marquee
 * ---------------------------------------------------------------------------
 * The rail slides continuously once the script has cloned the cards. Until
 * then `.ce-marquee` is a transparent wrapper and the rail behaves as an
 * ordinary swipeable scroller, so no-JS and reduced-motion users keep a
 * working section rather than a frozen one.
 * ======================================================================== */
.ce-marquee.is-marquee {
	overflow: hidden;
	/* Fade the edges so cards enter and leave rather than being cut off. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.ce-marquee.is-marquee .ce-marquee__track {
	overflow-x: visible;
	scroll-snap-type: none;
	width: max-content;
	animation: ce-marquee-slide var(--ce-marquee-duration, 40s) linear infinite;
}

/*
 * Pause whenever someone is reading, reaching for a card, or watching one.
 * A rail that slides out from under the cursor is worse than no motion.
 */
.ce-marquee.is-marquee:hover .ce-marquee__track,
.ce-marquee.is-marquee:focus-within .ce-marquee__track,
.ce-marquee.is-marquee.is-paused .ce-marquee__track {
	animation-play-state: paused;
}

@keyframes ce-marquee-slide {
	from { transform: translate3d(0, 0, 0); }
	/* Half, because the script duplicates the cards exactly once. */
	to   { transform: translate3d(-50%, 0, 0); }
}

/*
 * Reduced motion: no automatic slide at all. The rail reverts to the
 * scroller it is in markup.
 */
@media (prefers-reduced-motion: reduce) {
	.ce-marquee.is-marquee {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.ce-marquee.is-marquee .ce-marquee__track {
		width: auto;
		animation: none;
	}
}

.ce-video {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--ce-divider);
	border-radius: var(--ce-radius-md);
	background: var(--ce-bg);
	overflow: hidden;
}

.ce-video__thumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	background-color: var(--ce-indigo);
	background-image: linear-gradient(135deg, #1c1930 0%, #322c56 100%);
	background-size: cover;
	background-position: center;
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
}

.ce-video__play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ce-video__duration {
	position: absolute;
	right: var(--ce-space-2);
	bottom: var(--ce-space-2);
	padding: 2px var(--ce-space-2);
	border-radius: var(--ce-radius-sm);
	background: rgba(0, 0, 0, 0.62);
	color: var(--ce-white);
	font-size: var(--ce-fs-xxs);
	font-variant-numeric: tabular-nums;
}

.ce-video__body {
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-2);
	padding: var(--ce-space-4);
}

.ce-video__label {
	margin: 0;
	font-size: var(--ce-fs-xxs);
	font-weight: var(--ce-fw-heading);
	letter-spacing: var(--ce-tracking-label);
	text-transform: uppercase;
	color: var(--ce-accent-solid);
}

.ce-video__title {
	margin: 0;
	font-size: var(--ce-fs-md);
	font-weight: var(--ce-fw-medium);
	line-height: var(--ce-lh-snug);
	color: var(--ce-ink);
}

.ce-video__when { margin: auto 0 0; font-size: var(--ce-fs-sm); color: var(--ce-muted); }

/*
 * The title is a real link, but it should read as the heading it is, not as
 * body-copy link text. Only the hover state gives it away.
 */
.ce-video__title a {
	color: inherit;
	text-decoration: none;
}

.ce-video__title a:hover,
.ce-video__title a:focus-visible { color: var(--ce-accent-solid); }

/* The play badge only lifts on hover once a card is actually clickable. */
.ce-video__thumb .ce-video__play {
	transition: transform var(--ce-transition, 160ms ease), opacity 160ms ease;
}

.ce-video__thumb:hover .ce-video__play { transform: scale(1.12); }

/*
 * Once playing, the iframe covers the thumbnail entirely — the poster image,
 * play badge and duration all sit behind it.
 */
.ce-video__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ce-video__thumb.is-playing { cursor: default; }
.ce-video__thumb.is-playing .ce-video__play,
.ce-video__thumb.is-playing .ce-video__duration { display: none; }

@media (prefers-reduced-motion: reduce) {
	.ce-video__thumb:hover .ce-video__play { transform: none; }
}

/* ===========================================================================
 * Courses page
 * ---------------------------------------------------------------------------
 * The curriculum on the left, a column of course facts on the right. The
 * chapter list is ruled, not boxed — same treatment as the home page's
 * six-grid, so the two pages read as one system.
 * ======================================================================== */
.ce-course__head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }

.ce-course__title {
	margin: 0 0 var(--ce-space-5);
	font-size: var(--ce-fs-4xl);
	font-weight: var(--ce-fw-heading);
	line-height: var(--ce-lh-tight);
	letter-spacing: var(--ce-tracking-tight);
	color: var(--ce-ink);
}

.ce-course__lead { margin-bottom: 0; max-width: 62ch; }

.ce-course__body {
	display: grid;
	grid-template-columns: minmax(0, 1.23fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.25rem);
	align-items: start;
}
@media (max-width: 900px) {
	.ce-course__body { grid-template-columns: minmax(0, 1fr); }
}

.ce-course__h2 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ce-space-3);
	margin: 0 0 var(--ce-space-2);
	font-size: var(--ce-fs-2xl);
	font-weight: var(--ce-fw-heading);
	line-height: var(--ce-lh-snug);
	color: var(--ce-ink);
}

.ce-course__meta {
	margin: 0 0 var(--ce-space-6);
	font-size: var(--ce-fs-base);
	color: var(--ce-muted);
}

/* --- Curriculum list ---------------------------------------------------- */
.ce-curriculum {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 620px) {
	.ce-curriculum { grid-template-columns: minmax(0, 1fr); }
}

.ce-curriculum__item {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: var(--ce-space-3);
	row-gap: var(--ce-space-2);
	align-items: baseline;
	/*
	 * Grid rows stretch by default, so a taller neighbouring cell would push
	 * this cell's description away from its title by however much taller it
	 * is. Pack the rows at the top instead.
	 */
	align-content: start;
	padding-block: var(--ce-space-5);
	border-top: 1px solid var(--ce-divider);
}

/*
 * The rule between the two columns. Scoped to the two-column state, and
 * cancelled on the full-width mocks row, which has no neighbour.
 */
@media (min-width: 621px) {
	.ce-curriculum__item:nth-child(odd)  { padding-right: var(--ce-space-6); }
	.ce-curriculum__item:nth-child(even) {
		padding-left: var(--ce-space-6);
		border-left: 1px solid var(--ce-divider);
	}
	/*
	 * Specificity has to match the :nth-child rules above, or the mocks row
	 * keeps the column rule and indent it has no neighbour to need.
	 */
	.ce-curriculum .ce-curriculum__item--wide {
		grid-column: 1 / -1;
		border-left: 0;
		padding-inline: 0;
	}
}

.ce-curriculum__num {
	font-size: var(--ce-fs-sm);
	color: var(--ce-grey-400);
	font-variant-numeric: tabular-nums;
}

.ce-curriculum__title {
	margin: 0;
	font-size: var(--ce-fs-md);
	font-weight: var(--ce-fw-heading);
	line-height: var(--ce-lh-snug);
	color: var(--ce-ink);
}

.ce-curriculum__text {
	grid-column: 2 / -1;
	margin: 0;
	color: var(--ce-muted);
	line-height: var(--ce-lh-normal);
}

/* --- Sidebar ------------------------------------------------------------ */
.ce-course__side {
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-6);
}

.ce-panel__label {
	margin: 0 0 var(--ce-space-5);
	font-size: var(--ce-fs-xxs);
	font-weight: var(--ce-fw-heading);
	letter-spacing: var(--ce-tracking-label);
	text-transform: uppercase;
	color: var(--ce-accent-solid);
}

.ce-panel__body {
	margin: var(--ce-space-3) 0 var(--ce-space-5);
	color: var(--ce-muted);
	line-height: var(--ce-lh-normal);
}
.ce-panel__body:last-child { margin-bottom: 0; }

.ce-panel__note {
	margin: var(--ce-space-5) 0 0;
	font-size: var(--ce-fs-sm);
	line-height: var(--ce-lh-relaxed);
	color: var(--ce-muted);
}

/* A panel title that carries a status pill beside it. */
.ce-panel__title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ce-space-3);
}

/* --- Figure list -------------------------------------------------------- */
.ce-stat-list { margin: 0; }

.ce-stat-list__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ce-space-4);
	padding-block: var(--ce-space-4);
	border-bottom: 1px solid var(--ce-divider);
}

.ce-stat-list dt { margin: 0; color: var(--ce-ink); }
.ce-stat-list dd {
	margin: 0;
	font-size: var(--ce-fs-xl);
	font-weight: var(--ce-fw-heading);
	color: var(--ce-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ===========================================================================
 * Question bank page
 * ---------------------------------------------------------------------------
 * The page's job is to show what is open and what is not, so the locked
 * state is carried by muted text, a hairline card and a padlock — never by a
 * new colour, which would break the single-accent rule.
 * ======================================================================== */
.ce-qbank__head { margin-bottom: clamp(2.25rem, 4vw, 3rem); }

/* The lead, with the access status sitting on its last line. */
.ce-qbank__head-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ce-space-6);
}
.ce-qbank__head-row .ce-lead { max-width: 58ch; }
@media (max-width: 760px) {
	.ce-qbank__head-row { flex-direction: column; align-items: flex-start; gap: var(--ce-space-4); }
}

.ce-status {
	display: flex;
	align-items: center;
	gap: var(--ce-space-2);
	margin: 0;
	font-size: var(--ce-fs-base);
	color: var(--ce-muted);
	white-space: nowrap;
}
.ce-status__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ce-accent-solid);
	flex: none;
}

.ce-access + .ce-qbank__block,
.ce-qbank__columns { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.ce-qbank__columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}
/*
 * Only once the two columns have stacked does the second block need space
 * above it — as grid columns they must start on the same line.
 */
@media (max-width: 900px) {
	.ce-qbank__columns { grid-template-columns: minmax(0, 1fr); }
	.ce-qbank__columns > .ce-qbank__block + .ce-qbank__block { margin-top: clamp(2rem, 4vw, 2.5rem); }
}

.ce-qbank .ce-cta-panel { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* --- Section subheading with a status on the right ---------------------- */
.ce-subhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ce-space-4);
	margin-bottom: var(--ce-space-5);
}
.ce-subhead__title {
	margin: 0;
	font-size: var(--ce-fs-2xl);
	font-weight: var(--ce-fw-heading);
	color: var(--ce-ink);
}
.ce-subhead__meta {
	margin: 0;
	font-size: var(--ce-fs-sm);
	color: var(--ce-muted);
	text-align: right;
}

/* --- The two access cards ----------------------------------------------- */
.ce-access {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
	align-items: stretch;
}
@media (max-width: 820px) {
	.ce-access { grid-template-columns: minmax(0, 1fr); }
}

.ce-access__card {
	display: flex;
	flex-direction: column;
	padding: clamp(1.25rem, 2.5vw, 2rem);
	border: 1px solid var(--ce-divider);
	border-radius: var(--ce-radius-lg);
	background: var(--ce-bg);
}

/* The locked half sits on a wash of the accent, not a second hue. */
.ce-access__card--locked {
	background: color-mix(in srgb, var(--ce-accent-tint) 55%, var(--ce-bg));
	border-color: color-mix(in srgb, var(--ce-accent) 16%, var(--ce-divider));
}

.ce-access__status {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ce-space-3);
	margin: 0 0 var(--ce-space-5);
}
.ce-access__note { font-size: var(--ce-fs-sm); color: var(--ce-muted); }

.ce-access__title {
	margin: 0 0 var(--ce-space-3);
	font-size: var(--ce-fs-xl);
	font-weight: var(--ce-fw-heading);
	color: var(--ce-ink);
}

.ce-access__text {
	margin: 0;
	color: var(--ce-muted);
	line-height: var(--ce-lh-normal);
}

/* Whatever the copy length, the action sits at the foot of the card. */
.ce-access__actions { margin-top: auto; padding-top: var(--ce-space-6); }
.ce-access__actions.ce-cluster { align-items: center; gap: var(--ce-space-5); }

/* --- Dash-led list ------------------------------------------------------- */
.ce-dash-list {
	margin: var(--ce-space-5) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-3);
	color: var(--ce-ink);
}
.ce-dash-list li {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: var(--ce-space-3);
	align-items: baseline;
}
.ce-dash-list li::before {
	content: "";
	width: 14px;
	height: 1px;
	background: var(--ce-accent-solid);
	align-self: center;
}

/* --- Locked chapter cards ------------------------------------------------ */
.ce-bank-grid {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ce-space-4);
}
@media (max-width: 900px) { .ce-bank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ce-bank-grid { grid-template-columns: minmax(0, 1fr); } }

.ce-bank-card {
	position: relative;
	padding: var(--ce-space-5);
	padding-right: var(--ce-space-10);
	border: 1px solid var(--ce-divider);
	border-radius: var(--ce-radius-md);
	background: var(--ce-grey-50);
}

.ce-bank-card__num {
	margin: 0 0 var(--ce-space-2);
	font-size: var(--ce-fs-sm);
	color: var(--ce-grey-400);
	font-variant-numeric: tabular-nums;
}

.ce-bank-card__title {
	margin: 0;
	font-size: var(--ce-fs-md);
	font-weight: var(--ce-fw-heading);
	line-height: var(--ce-lh-snug);
	color: var(--ce-ink);
}

.ce-bank-card__lock {
	position: absolute;
	top: var(--ce-space-5);
	right: var(--ce-space-5);
	display: inline-flex;
	color: var(--ce-grey-400);
}

/* --- Locked list rows ---------------------------------------------------- */
.ce-locked-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-3);
}

.ce-locked-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ce-space-4);
	padding: var(--ce-space-4) var(--ce-space-5);
	border: 1px solid var(--ce-divider);
	border-radius: var(--ce-radius-md);
	background: var(--ce-grey-50);
}

.ce-locked-row__body { min-width: 0; }

.ce-locked-row__title {
	margin: 0;
	font-size: var(--ce-fs-md);
	font-weight: var(--ce-fw-heading);
	line-height: var(--ce-lh-snug);
	color: var(--ce-ink);
}

.ce-locked-row__meta {
	margin: var(--ce-space-1) 0 0;
	font-size: var(--ce-fs-sm);
	line-height: var(--ce-lh-snug);
	color: var(--ce-muted);
}

.ce-locked-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--ce-space-2);
	margin: 0;
	flex: none;
	font-size: var(--ce-fs-xxs);
	letter-spacing: var(--ce-tracking-label);
	text-transform: uppercase;
	color: var(--ce-grey-400);
}
.ce-locked-tag svg { flex: none; }

/* ===========================================================================
 * Contained CTA panel
 * ---------------------------------------------------------------------------
 * The same indigo as the home page's closing band, held inside the container
 * for interior pages that end on a prompt rather than a statement.
 * ======================================================================== */
.ce-cta-panel {
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	border-radius: var(--ce-radius-lg);
	background: var(--ce-indigo);
	color: var(--ce-indigo-text);
}

.ce-cta-panel__title {
	margin: 0 0 var(--ce-space-3);
	font-size: var(--ce-fs-2xl);
	font-weight: var(--ce-fw-heading);
	line-height: var(--ce-lh-snug);
	color: var(--ce-white);
}

.ce-cta-panel__text {
	margin: 0 0 var(--ce-space-6);
	max-width: 70ch;
	font-size: var(--ce-fs-md);
	line-height: var(--ce-lh-normal);
	color: var(--ce-indigo-text);
}

/* ===========================================================================
 * Pricing
 * ---------------------------------------------------------------------------
 * Every plan opens the same material, so the cards are not a feature ladder:
 * they are the same offer at three durations. The recommended one is lifted
 * out of the row rather than given a different feature set.
 * ======================================================================== */
/*
 * The headline runs on one line at desktop, so the block is not capped —
 * the supporting line is measured instead.
 */
.ce-pricing__head { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.ce-pricing__head .ce-lead { max-width: 58ch; }

.ce-plans {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	align-items: stretch;
}
@media (max-width: 940px) { .ce-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ce-plans { grid-template-columns: minmax(0, 1fr); } }

.ce-plan {
	display: flex;
	flex-direction: column;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid var(--ce-divider);
	border-radius: var(--ce-radius-lg);
	background: transparent;
}

/*
 * The recommended plan is lifted proud of the row — white against the
 * lavender ground, and taller at both ends.
 */
.ce-plan--featured {
	margin-block: calc(var(--ce-space-6) * -1);
	padding-block: calc(clamp(1.25rem, 2.5vw, 1.75rem) + var(--ce-space-6));
	border-color: transparent;
	background: var(--ce-bg);
	box-shadow: var(--ce-shadow-md);
}
@media (max-width: 640px) {
	.ce-plan--featured { margin-block: 0; padding-block: clamp(1.25rem, 2.5vw, 1.75rem); }
}

.ce-plan__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ce-space-3);
	flex-wrap: wrap;
}

.ce-plan__name {
	margin: 0;
	font-size: var(--ce-fs-xl);
	font-weight: var(--ce-fw-heading);
	color: var(--ce-ink);
}

.ce-plan__term {
	margin: var(--ce-space-4) 0 0;
	font-size: var(--ce-fs-sm);
	color: var(--ce-muted);
}

.ce-plan__price {
	margin: var(--ce-space-3) 0 0;
	font-size: var(--ce-fs-3xl);
	font-weight: var(--ce-fw-heading);
	line-height: 1.05;
	letter-spacing: var(--ce-tracking-tight);
	color: var(--ce-ink);
	font-variant-numeric: tabular-nums;
}

.ce-plan__price-label {
	margin: var(--ce-space-2) 0 0;
	font-size: var(--ce-fs-sm);
	color: var(--ce-muted);
}

.ce-plan__rate {
	margin: var(--ce-space-3) 0 0;
	font-size: var(--ce-fs-base);
	color: var(--ce-accent-solid);
	font-variant-numeric: tabular-nums;
}

.ce-plan__note {
	margin: var(--ce-space-3) 0 0;
	font-size: var(--ce-fs-base);
	color: var(--ce-muted);
}

.ce-plan__points { margin-top: var(--ce-space-6); }

.ce-plan__included {
	margin-top: var(--ce-space-6);
	padding-top: var(--ce-space-6);
	border-top: 1px solid var(--ce-divider);
}

.ce-plan__included-label {
	margin: 0 0 var(--ce-space-4);
	font-size: var(--ce-fs-xxs);
	font-weight: var(--ce-fw-heading);
	letter-spacing: var(--ce-tracking-label);
	text-transform: uppercase;
	color: var(--ce-accent-solid);
}

/* Whatever the copy length, every plan's buttons sit on the same line. */
.ce-plan__actions {
	margin-top: auto;
	padding-top: var(--ce-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-4);
	align-items: center;
}
.ce-plan__demo { font-size: var(--ce-fs-base); }

.ce-pricing__footnote {
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	font-size: var(--ce-fs-sm);
	line-height: var(--ce-lh-relaxed);
	color: var(--ce-muted);
}

/* ===========================================================================
 * How to pay
 * ======================================================================== */
.ce-pay {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
	align-items: start;
}
@media (max-width: 900px) { .ce-pay { grid-template-columns: minmax(0, 1fr); } }

.ce-pay__details,
.ce-pay__steps { padding: 0; }

.ce-pay__method { padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.ce-pay__method + .ce-pay__method { border-top: 1px solid var(--ce-divider); }

.ce-pay__method-title {
	display: flex;
	align-items: center;
	gap: var(--ce-space-3);
	margin: 0 0 var(--ce-space-5);
	font-size: var(--ce-fs-xl);
	font-weight: var(--ce-fw-heading);
	color: var(--ce-ink);
}
.ce-pay__method-title svg { flex: none; color: var(--ce-accent-solid); }

.ce-pay__rows { margin: 0; display: flex; flex-direction: column; }

.ce-pay__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ce-space-4);
	padding-block: var(--ce-space-3);
}

.ce-pay__row dt {
	margin: 0;
	font-size: var(--ce-fs-xxs);
	letter-spacing: var(--ce-tracking-label);
	text-transform: uppercase;
	color: var(--ce-muted);
	white-space: nowrap;
}

.ce-pay__row dd {
	display: flex;
	align-items: center;
	gap: var(--ce-space-3);
	margin: 0;
	min-width: 0;
	color: var(--ce-ink);
	text-align: right;
}

.ce-pay__value { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.ce-pay__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ce-grey-400);
}
button.ce-pay__icon { cursor: pointer; }
button.ce-pay__icon:hover { color: var(--ce-accent-solid); }
button.ce-pay__icon.is-copied { color: var(--ce-accent-solid); }

.ce-pay__foot {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border-top: 1px solid var(--ce-divider);
}

.ce-pay__note {
	margin: 0;
	font-size: var(--ce-fs-sm);
	line-height: var(--ce-lh-relaxed);
	color: var(--ce-muted);
}

.ce-pay__reveal {
	margin-top: var(--ce-space-5);
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--ce-fs-base);
	font-weight: var(--ce-fw-medium);
	cursor: pointer;
}

.ce-pay__steps { padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.ce-pay__steps .ce-panel__title { margin-bottom: var(--ce-space-6); }
.ce-pay__whatsapp { margin-top: var(--ce-space-6); }
.ce-pay__whatsapp svg { flex: none; }
.ce-pay__steps .ce-pay__note { margin-top: var(--ce-space-4); }

/* --- Numbered steps ------------------------------------------------------ */
.ce-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-6);
}

.ce-steps__item {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: var(--ce-space-3);
	align-items: start;
}

.ce-steps__num {
	font-size: var(--ce-fs-md);
	font-weight: var(--ce-fw-heading);
	line-height: var(--ce-lh-snug);
	color: var(--ce-accent-solid);
	font-variant-numeric: tabular-nums;
}

.ce-steps__title {
	margin: 0 0 var(--ce-space-2);
	font-size: var(--ce-fs-md);
	font-weight: var(--ce-fw-heading);
	line-height: var(--ce-lh-snug);
	color: var(--ce-ink);
}

.ce-steps__text {
	margin: 0;
	color: var(--ce-muted);
	line-height: var(--ce-lh-normal);
}

/* ===========================================================================
 * Blog
 * ---------------------------------------------------------------------------
 * Post cards follow the home page's channel cards: an accent category label,
 * the title, then a quiet meta line. The image slot only exists when a post
 * has a featured image, so a text-only post is not given an empty grey box.
 * ======================================================================== */
.ce-blog__head { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.ce-blog__lead { max-width: 62ch; }

.ce-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
	align-items: start;
}
@media (max-width: 940px) { .ce-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ce-post-grid { grid-template-columns: minmax(0, 1fr); } }

.ce-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--ce-divider);
	border-radius: var(--ce-radius-md);
	background: var(--ce-bg);
	overflow: hidden;
	transition: border-color var(--ce-dur-fast) var(--ce-ease), box-shadow var(--ce-dur-fast) var(--ce-ease);
}
.ce-post-card:hover {
	border-color: var(--ce-border-strong);
	box-shadow: var(--ce-shadow-sm);
}

.ce-post-card__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--ce-grey-100);
	overflow: hidden;
}
.ce-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ce-post-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-2);
	padding: var(--ce-space-5);
	flex: 1;
}

.ce-post-card__label {
	margin: 0;
	font-size: var(--ce-fs-xxs);
	font-weight: var(--ce-fw-heading);
	letter-spacing: var(--ce-tracking-label);
	text-transform: uppercase;
	color: var(--ce-accent-solid);
}

.ce-post-card__title {
	margin: 0;
	font-size: var(--ce-fs-lg);
	font-weight: var(--ce-fw-heading);
	line-height: var(--ce-lh-snug);
	color: var(--ce-ink);
}
.ce-post-card__title a { color: inherit; text-decoration: none; }
.ce-post-card__title a:hover { color: var(--ce-accent-solid); }

.ce-post-card__excerpt {
	margin: 0;
	color: var(--ce-muted);
	line-height: var(--ce-lh-normal);
}

/* The meta line sits at the foot of the card whatever the excerpt length. */
.ce-post-card__meta {
	margin: auto 0 0;
	padding-top: var(--ce-space-4);
	font-size: var(--ce-fs-sm);
	color: var(--ce-muted);
}

.ce-blog__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ce-space-4);
	max-width: 620px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
}
.ce-blog__empty .ce-panel__body { margin: 0; }

.ce-blog__cta { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ===========================================================================
 * Dengue Patient Care
 * ======================================================================== */
/* The copy carries a long headline; the phone needs less room than half. */
.ce-dengue__hero {
	align-items: center;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 900px) { .ce-dengue__hero { grid-template-columns: minmax(0, 1fr); } }

.ce-dengue__eyebrow { display: flex; align-items: center; gap: var(--ce-space-4); flex-wrap: wrap; }

/* The pill beside an eyebrow keeps its own case, not the eyebrow's caps. */
.ce-eyebrow .ce-pill {
	text-transform: none;
	letter-spacing: normal;
	font-weight: var(--ce-fw-medium);
}
.ce-dengue__lead { max-width: 56ch; margin-bottom: var(--ce-space-8); }
.ce-dengue__note {
	margin: var(--ce-space-5) 0 0;
	font-size: var(--ce-fs-sm);
	color: var(--ce-muted);
}

.ce-dengue__media { display: flex; flex-direction: column; align-items: center; gap: var(--ce-space-4); }
.ce-dengue__caption { margin: 0; font-size: var(--ce-fs-sm); color: var(--ce-muted); text-align: center; }
.ce-dengue__caption a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ce-dengue__caption a:hover { color: var(--ce-accent-solid); }

/* --- Dash list with rules between items ---------------------------------- */
.ce-dash-list--ruled { gap: 0; }
.ce-dash-list--ruled li {
	padding-block: var(--ce-space-4);
	border-bottom: 1px solid var(--ce-divider);
}
.ce-dash-list--ruled li:first-child { border-top: 1px solid var(--ce-divider); }

/* --- The three phases ---------------------------------------------------- */
.ce-phases__intro { margin: 0 0 var(--ce-space-5); color: var(--ce-muted); line-height: var(--ce-lh-normal); }

.ce-phases__track { display: flex; gap: 4px; margin-bottom: var(--ce-space-6); }
.ce-phases__seg {
	flex: 1;
	height: 6px;
	border-radius: var(--ce-radius-pill);
	background: var(--ce-accent-tint);
}
.ce-phases__seg.is-current { background: var(--ce-accent-solid); }

.ce-phases__list { margin: 0; display: flex; flex-direction: column; gap: var(--ce-space-5); }

.ce-phases__row {
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr);
	gap: var(--ce-space-4);
	align-items: baseline;
}
.ce-phases__row dd { margin: 0; display: flex; flex-direction: column; gap: var(--ce-space-1); }

.ce-phases__days { margin: 0; font-size: var(--ce-fs-sm); color: var(--ce-muted); white-space: nowrap; }
.ce-phases__row.is-current .ce-phases__days { color: var(--ce-accent-solid); }

.ce-phases__name { font-weight: var(--ce-fw-heading); color: var(--ce-ink); }
.ce-phases__text { color: var(--ce-muted); line-height: var(--ce-lh-normal); }

.ce-phases .ce-panel__note {
	margin-top: var(--ce-space-6);
	padding-top: var(--ce-space-5);
	border-top: 1px solid var(--ce-divider);
}

/* ===========================================================================
 * Phone mockup
 * ---------------------------------------------------------------------------
 * A picture of the companion app, which has its own branding. Its palette is
 * declared on .ce-phone and used only by its descendants, so the teal chrome
 * and the red alerts cannot leak into the site's single-violet system. Red is
 * used here because it means danger, which is what the screen is for.
 * ======================================================================== */
.ce-phone {
	--app-teal: #0b5d4e;
	--app-teal-dark: #094c40;
	--app-teal-soft: #14705f;
	--app-mint: #5eead4;
	--app-danger: #d92d20;
	--app-danger-tint: #fef3f2;
	--app-danger-line: #fecdca;
	--app-ok: #a7e8d2;
	--app-warn: #fca5a5;
	--app-ink: #14151f;
	--app-muted: #5a5a68;
	--app-line: #e6e6ee;

	width: min(340px, 100%);
	padding: 12px;
	border-radius: 38px;
	background: #101014;
	box-shadow: var(--ce-shadow-lg);
}

.ce-phone__screen {
	border-radius: 27px;
	overflow: hidden;
	background: var(--ce-bg);
}

.ce-app__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ce-space-3);
	padding: var(--ce-space-5) var(--ce-space-4) var(--ce-space-3);
	background: var(--app-teal);
}

.ce-app__brand { margin: 0; font-size: var(--ce-fs-lg); font-weight: var(--ce-fw-heading); color: #fff; }
.ce-app__brand-accent { color: var(--app-mint); margin-left: 0.35em; }

.ce-app__lang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--app-teal-dark);
	color: #fff;
	font-size: var(--ce-fs-xs);
	flex: none;
}

.ce-app__tabs {
	display: flex;
	gap: 5px;
	padding: 0 var(--ce-space-3) var(--ce-space-3);
	background: var(--app-teal);
}

.ce-app__tab {
	flex: 1;
	padding: 7px 4px;
	border-radius: var(--ce-radius-sm);
	background: var(--app-teal-soft);
	color: rgba(255, 255, 255, 0.92);
	font-size: 10px;
	font-weight: var(--ce-fw-medium);
	text-align: center;
	white-space: nowrap;
}
.ce-app__tab.is-active { background: #fff; color: var(--app-ink); }

.ce-app__body {
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-3);
	padding: var(--ce-space-3);
	background: #eef7f4;
}

.ce-app__card {
	padding: var(--ce-space-4);
	border-radius: var(--ce-radius-md);
	background: #fff;
}

.ce-app__day-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ce-space-2);
	margin-bottom: var(--ce-space-4);
}

.ce-app__day { margin: 0; font-size: var(--ce-fs-md); font-weight: var(--ce-fw-heading); color: var(--app-ink); }

.ce-app__flag {
	padding: 3px 8px;
	border-radius: var(--ce-radius-pill);
	background: var(--app-danger-tint);
	color: var(--app-danger);
	font-size: 9px;
	font-weight: var(--ce-fw-heading);
	letter-spacing: var(--ce-tracking-label);
	text-transform: uppercase;
	white-space: nowrap;
}

/* Day-of-illness strip. The current day is taller, so it reads at a glance. */
.ce-app__strip {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	margin: 0 0 var(--ce-space-4);
	padding: 0;
	list-style: none;
}
.ce-app__strip-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }

.ce-app__bar-seg { width: 100%; height: 7px; border-radius: 3px; }
.ce-app__bar-seg--ok   { background: var(--app-ok); }
.ce-app__bar-seg--warn { background: var(--app-warn); }
.ce-app__bar-seg--now  { height: 26px; background: var(--app-danger); }

.ce-app__strip-num { font-size: 9px; color: var(--app-muted); font-variant-numeric: tabular-nums; }

.ce-app__alert {
	padding: var(--ce-space-3);
	margin-bottom: var(--ce-space-3);
	border: 1px solid var(--app-danger-line);
	border-radius: var(--ce-radius-sm);
	background: var(--app-danger-tint);
}
.ce-app__alert-title { margin: 0 0 4px; font-size: 11px; font-weight: var(--ce-fw-heading); color: var(--app-ink); }
.ce-app__alert-text { margin: 0; font-size: 10px; line-height: 1.5; color: var(--app-muted); }

.ce-app__btn {
	margin: 0 0 var(--ce-space-2);
	padding: 10px;
	border: 1px solid var(--app-line);
	border-radius: var(--ce-radius-sm);
	background: #fff;
	color: var(--app-ink);
	font-size: 11px;
	font-weight: var(--ce-fw-heading);
	text-align: center;
}
.ce-app__btn:last-child { margin-bottom: 0; }
.ce-app__btn--danger { border-color: var(--app-danger); background: var(--app-danger); color: #fff; }

.ce-app__doctor { display: flex; align-items: center; gap: var(--ce-space-3); }
.ce-app__doctor-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ce-app__doctor-name { font-size: 11px; font-weight: var(--ce-fw-heading); color: var(--app-ink); }
.ce-app__doctor-role { font-size: 10px; color: var(--app-muted); }
.ce-app__doctor svg { flex: none; color: var(--app-muted); }

.ce-app__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--app-teal);
	color: #fff;
	font-size: 10px;
	font-weight: var(--ce-fw-heading);
}

.ce-app__section { margin: var(--ce-space-2) 0 0; font-size: var(--ce-fs-md); font-weight: var(--ce-fw-heading); color: var(--app-ink); }

/* ===========================================================================
 * About
 * ======================================================================== */
.ce-about__head { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.ce-about__lead { max-width: 62ch; }

/* --- The three pillars --------------------------------------------------- */
.ce-pillars {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
@media (max-width: 900px) { .ce-pillars { grid-template-columns: minmax(0, 1fr); } }

.ce-pillar {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid var(--ce-divider);
	border-radius: var(--ce-radius-lg);
	background: var(--ce-bg);
}

.ce-pillar__label {
	margin: 0 0 var(--ce-space-4);
	font-size: var(--ce-fs-xxs);
	font-weight: var(--ce-fw-heading);
	letter-spacing: var(--ce-tracking-label);
	text-transform: uppercase;
	color: var(--ce-accent-solid);
}

.ce-pillar__title {
	margin: 0 0 var(--ce-space-3);
	font-size: var(--ce-fs-xl);
	font-weight: var(--ce-fw-heading);
	line-height: var(--ce-lh-snug);
	color: var(--ce-ink);
}

.ce-pillar__text { margin: 0; color: var(--ce-muted); line-height: var(--ce-lh-normal); }

/* --- Founder ------------------------------------------------------------- */
.ce-founder {
	display: grid;
	grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	align-items: start;
}
@media (max-width: 820px) { .ce-founder { grid-template-columns: minmax(0, 1fr); } }

.ce-founder__portrait { border-radius: var(--ce-radius-md); overflow: hidden; }
.ce-founder__portrait img { width: 100%; height: auto; display: block; }

.ce-founder__name {
	margin: 0 0 var(--ce-space-2);
	font-size: var(--ce-fs-3xl);
	font-weight: var(--ce-fw-heading);
	line-height: var(--ce-lh-tight);
	letter-spacing: var(--ce-tracking-tight);
	color: var(--ce-ink);
}

.ce-founder__role { margin: 0 0 var(--ce-space-6); color: var(--ce-muted); }

.ce-founder__text {
	margin: 0 0 var(--ce-space-4);
	color: var(--ce-muted);
	line-height: var(--ce-lh-relaxed);
}
.ce-founder__text:last-of-type { margin-bottom: 0; }

.ce-credentials {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ce-space-5);
	margin: var(--ce-space-8) 0 0;
	padding-top: var(--ce-space-6);
	border-top: 1px solid var(--ce-divider);
}
@media (max-width: 560px) { .ce-credentials { grid-template-columns: minmax(0, 1fr); gap: var(--ce-space-4); } }

.ce-credentials__item { min-width: 0; }
.ce-credentials dt {
	margin: 0 0 var(--ce-space-1);
	font-size: var(--ce-fs-xl);
	font-weight: var(--ce-fw-heading);
	color: var(--ce-accent-solid);
}
.ce-credentials dd { margin: 0; font-size: var(--ce-fs-sm); color: var(--ce-muted); }

/* --- How the bank is written --------------------------------------------- */
.ce-about__photo { margin-top: var(--ce-space-8); border-radius: var(--ce-radius-md); overflow: hidden; }
.ce-about__photo img { width: 100%; height: auto; display: block; }

.ce-process { margin: 0; padding: 0; list-style: none; }

.ce-process__item {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: var(--ce-space-3);
	align-items: start;
	padding-block: var(--ce-space-5);
	border-top: 1px solid var(--ce-divider);
}
.ce-process__item:last-child { border-bottom: 1px solid var(--ce-divider); }

.ce-process__num {
	font-size: var(--ce-fs-md);
	font-weight: var(--ce-fw-heading);
	color: var(--ce-accent-solid);
	font-variant-numeric: tabular-nums;
}

.ce-process__title {
	margin: 0 0 var(--ce-space-2);
	font-size: var(--ce-fs-md);
	font-weight: var(--ce-fw-heading);
	line-height: var(--ce-lh-snug);
	color: var(--ce-ink);
}

.ce-process__text { margin: 0; color: var(--ce-muted); line-height: var(--ce-lh-normal); }

.ce-about__cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* A contained panel with the action beside the copy rather than beneath it. */
.ce-cta-panel--split {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.5rem, 4vw, 3rem);
	flex-wrap: wrap;
}
.ce-cta-panel--split .ce-cta-panel__copy { max-width: 640px; min-width: 0; }
.ce-cta-panel--split .ce-cta-panel__title { margin-bottom: var(--ce-space-2); }
.ce-cta-panel--split .ce-cta-panel__text { margin-bottom: 0; overflow-wrap: break-word; }

/* ===========================================================================
 * Contact & support
 * ======================================================================== */
.ce-contact__head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.ce-contact__lead { max-width: 58ch; }

.ce-contact__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
@media (max-width: 900px) { .ce-contact__body { grid-template-columns: minmax(0, 1fr); } }

/* --- The support facts --------------------------------------------------- */
.ce-support-list { margin: 0; }

.ce-support-row {
	display: grid;
	grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
	gap: var(--ce-space-4);
	padding-block: var(--ce-space-5);
	border-top: 1px solid var(--ce-divider);
}
.ce-support-row:last-child { border-bottom: 1px solid var(--ce-divider); }
@media (max-width: 560px) {
	.ce-support-row { grid-template-columns: minmax(0, 1fr); gap: var(--ce-space-2); }
}

.ce-support-row dt {
	margin: 0;
	font-size: var(--ce-fs-xxs);
	letter-spacing: var(--ce-tracking-label);
	text-transform: uppercase;
	color: var(--ce-muted);
}

.ce-support-row dd { margin: 0; display: flex; flex-direction: column; gap: var(--ce-space-1); min-width: 0; }

.ce-support-row__value {
	font-size: var(--ce-fs-lg);
	font-weight: var(--ce-fw-heading);
	color: var(--ce-ink);
	overflow-wrap: break-word;
}
.ce-support-row__value a { color: inherit; text-decoration: none; }
.ce-support-row__value a:hover { color: var(--ce-accent-solid); }

.ce-support-row__text { color: var(--ce-muted); line-height: var(--ce-lh-normal); }

.ce-contact__faq {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ce-space-3);
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.ce-contact__faq .ce-panel__body { margin: 0; }

/* --- The form ------------------------------------------------------------ */
.ce-contact-form { padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.ce-contact-form .ce-panel__meta { margin-bottom: var(--ce-space-6); }

.ce-form { display: flex; flex-direction: column; gap: var(--ce-space-5); }

.ce-field { margin: 0; }
.ce-field__label {
	font-size: var(--ce-fs-sm);
	color: var(--ce-muted);
}
.ce-field__input { width: 100%; }
.ce-field__input--area { min-height: 132px; resize: vertical; }

/*
 * The honeypot. Taken out of the layout and out of the accessibility tree,
 * but not display:none — some bots skip fields that are not rendered.
 */
.ce-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ce-form-notice {
	margin: 0 0 var(--ce-space-5);
	padding: var(--ce-space-3) var(--ce-space-4);
	border: 1px solid var(--ce-divider);
	border-radius: var(--ce-radius-sm);
	font-size: var(--ce-fs-base);
	line-height: var(--ce-lh-normal);
}
.ce-form-notice--ok {
	border-color: color-mix(in srgb, var(--ce-accent) 30%, var(--ce-divider));
	background: var(--ce-accent-tint);
	color: var(--ce-ink);
}
.ce-form-notice--error {
	border-color: var(--ce-border-strong);
	background: var(--ce-grey-100);
	color: var(--ce-ink);
}

.ce-contact-form__direct {
	margin: var(--ce-space-6) 0 0;
	padding-top: var(--ce-space-5);
	border-top: 1px solid var(--ce-divider);
	font-size: var(--ce-fs-base);
}
.ce-contact-form__direct a { color: var(--ce-muted); text-decoration: none; overflow-wrap: break-word; }
.ce-contact-form__direct a:hover { color: var(--ce-accent-solid); }

/* ===========================================================================
 * Legal pages
 * ---------------------------------------------------------------------------
 * A reference document, not an article: sections are separated by hairlines
 * and the measure is wider than running prose, because these pages are
 * scanned for a clause rather than read straight through.
 * ======================================================================== */
.ce-legal__container { max-width: calc(880px + (var(--ce-gutter) * 2)); }

.ce-legal__head { margin-bottom: var(--ce-space-6); }

.ce-legal__title {
	margin: 0 0 var(--ce-space-3);
	font-size: var(--ce-fs-3xl);
	font-weight: var(--ce-fw-heading);
	line-height: var(--ce-lh-tight);
	letter-spacing: var(--ce-tracking-tight);
	color: var(--ce-ink);
}

.ce-legal__updated { margin: 0; font-size: var(--ce-fs-sm); color: var(--ce-muted); }

.ce-legal__intro {
	margin: 0;
	padding-block: var(--ce-space-6);
	border-top: 1px solid var(--ce-divider);
	color: var(--ce-muted);
	line-height: var(--ce-lh-relaxed);
}

.ce-legal__section {
	padding-block: var(--ce-space-6);
	border-top: 1px solid var(--ce-divider);
}

.ce-legal__heading {
	margin: 0 0 var(--ce-space-4);
	font-size: var(--ce-fs-xl);
	font-weight: var(--ce-fw-heading);
	line-height: var(--ce-lh-snug);
	color: var(--ce-ink);
}

.ce-legal__section p {
	margin: 0 0 var(--ce-space-4);
	color: var(--ce-muted);
	line-height: var(--ce-lh-relaxed);
}
.ce-legal__section p:last-child { margin-bottom: 0; }

.ce-legal__note {
	margin-top: var(--ce-space-8);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.ce-legal__note p { margin: 0; color: var(--ce-muted); line-height: var(--ce-lh-relaxed); }

.ce-legal__switch {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ce-space-3);
	margin-top: var(--ce-space-6);
}

.ce-legal__link {
	padding: var(--ce-space-2) var(--ce-space-4);
	border-color: var(--ce-divider);
	color: var(--ce-muted);
	text-decoration: none;
	white-space: normal;
	transition: border-color var(--ce-dur-fast) var(--ce-ease), color var(--ce-dur-fast) var(--ce-ease);
}
.ce-legal__link:hover { border-color: var(--ce-accent-solid); color: var(--ce-accent-solid); }
.ce-legal__link.is-current { border-color: transparent; color: var(--ce-accent-solid); font-weight: var(--ce-fw-medium); }

/* ===========================================================================
 * FAQ page
 * ---------------------------------------------------------------------------
 * Grouped and open, not an accordion: on a page whose whole job is answering
 * questions, hiding every answer behind a click is the wrong default. The
 * short accordions embedded on other pages keep their toggle.
 * ======================================================================== */
.ce-faq-page__head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.ce-faq-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
@media (max-width: 860px) { .ce-faq-grid { grid-template-columns: minmax(0, 1fr); } }

.ce-faq-group__label {
	margin: 0 0 var(--ce-space-2);
	padding-bottom: var(--ce-space-4);
	border-bottom: 1px solid var(--ce-divider);
	font-size: var(--ce-fs-xxs);
	font-weight: var(--ce-fw-heading);
	letter-spacing: var(--ce-tracking-label);
	text-transform: uppercase;
	color: var(--ce-accent-solid);
}

.ce-faq-list { margin: 0; }

.ce-faq-item { padding-block: var(--ce-space-5); }
.ce-faq-item + .ce-faq-item { border-top: 1px solid var(--ce-divider); }

.ce-faq-item dt {
	margin: 0 0 var(--ce-space-2);
	font-size: var(--ce-fs-lg);
	font-weight: var(--ce-fw-heading);
	line-height: var(--ce-lh-snug);
	color: var(--ce-ink);
}

.ce-faq-item dd { margin: 0; color: var(--ce-muted); line-height: var(--ce-lh-relaxed); }

.ce-faq-page__close {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ce-space-5);
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}
.ce-faq-page__close-text { margin: 0; color: var(--ce-muted); line-height: var(--ce-lh-relaxed); }