/*!
 * JurisAtlas Law - main stylesheet
 *
 * Mobile-first. No framework, no build step, no runtime CSS-in-JS.
 * Sections:
 *   1.  Design tokens
 *   2.  Reset & base
 *   3.  Accessibility helpers
 *   4.  Layout
 *   5.  Buttons
 *   6.  Header & navigation
 *   7.  Hero
 *   8.  Sections, cards & grids
 *   9.  Upgrade banner & locked state
 *   10. Dashboard
 *   11. Tables
 *   12. Forms & auth
 *   13. Exam interface & timer
 *   14. Results
 *   15. Articles & prose
 *   16. Footer
 *   17. Quiz Maker overrides
 *   18. Motion & print
 */

/* ------------------------------------------------------------------ *
 * 1. Design tokens
 * ------------------------------------------------------------------ */
:root {
	/* Palette */
	--jal-navy: #0f2547;
	--jal-navy-deep: #0a1b34;
	--jal-navy-soft: #1c3a68;
	--jal-gold: #b6862c;
	--jal-gold-bright: #d4a344;
	--jal-gold-dark: #8f6a22;   /* hover/active state for gold links */
	--jal-gold-soft: #f6efe0;
	--jal-white: #ffffff;
	--jal-gray-50: #f8fafc;
	--jal-gray-100: #f4f6f9;
	--jal-gray-200: #e5e9f0;
	--jal-gray-300: #cfd6e2;
	--jal-gray-500: #6b7484;
	--jal-gray-600: #565e6c;   /* darker body grey; was referenced but never declared */
	--jal-charcoal: #2b2f36;
	--jal-success: #1f7a4d;
	--jal-success-bg: #e8f5ee;
	--jal-error: #b3261e;
	--jal-error-bg: #fdeceb;
	--jal-info-bg: #eef3fb;

	/* Typography */
	--jal-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--jal-font-serif: Georgia, "Times New Roman", "Liberation Serif", serif;

	--jal-text: 1.0625rem;      /* 17px - comfortable for long study sessions */
	--jal-text-lg: 1.1875rem;   /* referenced but never declared */
	--jal-text-sm: 0.9375rem;
	--jal-text-xs: 0.8125rem;
	--jal-lh: 1.65;

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

	/* Shape */
	--jal-radius: 10px;
	--jal-radius-sm: 6px;
	--jal-radius-lg: 16px;

	--jal-shadow-sm: 0 1px 2px rgba(15, 37, 71, 0.06), 0 1px 3px rgba(15, 37, 71, 0.08);
	--jal-shadow: 0 4px 12px rgba(15, 37, 71, 0.08);
	--jal-shadow-lg: 0 16px 40px rgba(15, 37, 71, 0.14);

	--jal-container: 1180px;
	--jal-container-narrow: 820px;

	--jal-transition: 160ms ease;
}

/* ------------------------------------------------------------------ *
 * 2. Reset & base
 * ------------------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--jal-font-sans);
	font-size: var(--jal-text);
	line-height: var(--jal-lh);
	color: var(--jal-charcoal);
	background: var(--jal-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--jal-sp-4);
	font-family: var(--jal-font-serif);
	color: var(--jal-navy);
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.15rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + 0.6vw, 1.4rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 var(--jal-sp-4); }

a {
	color: var(--jal-navy);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--jal-transition);
}

a:hover,
a:focus {
	color: var(--jal-gold);
}

:focus-visible {
	outline: 3px solid var(--jal-gold);
	outline-offset: 2px;
	border-radius: 3px;
}

ul, ol { padding-left: 1.25rem; }

hr {
	border: 0;
	border-top: 1px solid var(--jal-gray-200);
	margin: var(--jal-sp-6) 0;
}

/* ------------------------------------------------------------------ *
 * 3. Accessibility helpers
 * ------------------------------------------------------------------ */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

.jal-skip-link:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	display: block;
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--jal-navy);
	color: var(--jal-white);
	border-radius: var(--jal-radius-sm);
	font-weight: 600;
	text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * 4. Layout
 * ------------------------------------------------------------------ */
.jal-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.jal-main {
	flex: 1 0 auto;
	padding: var(--jal-sp-7) 0 var(--jal-sp-8);
}

.jal-main--home { padding-top: 0; }

.jal-container {
	width: 100%;
	max-width: var(--jal-container);
	margin: 0 auto;
	padding: 0 var(--jal-sp-4);
}

.jal-container--narrow { max-width: var(--jal-container-narrow); }

.jal-layout { display: block; }

@media (min-width: 900px) {
	.jal-layout--sidebar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: var(--jal-sp-7);
		align-items: start;
	}
}

.jal-layout__content { min-width: 0; }

.jal-sidebar .widget {
	background: var(--jal-gray-100);
	border-radius: var(--jal-radius);
	padding: var(--jal-sp-5);
	margin-bottom: var(--jal-sp-5);
}

.jal-sidebar .widget-title {
	font-size: 1.05rem;
	margin-bottom: var(--jal-sp-3);
}

.jal-pagehead {
	background: var(--jal-gray-100);
	border-bottom: 1px solid var(--jal-gray-200);
	padding: var(--jal-sp-7) 0 var(--jal-sp-6);
}

.jal-pagehead__title { margin-bottom: var(--jal-sp-2); }

.jal-pagehead__subtitle,
.jal-pagehead__meta {
	margin: 0;
	color: var(--jal-gray-500);
	font-size: 1.05rem;
	max-width: 62ch;
}

.jal-pagehead__eyebrow {
	margin: 0 0 var(--jal-sp-2);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: var(--jal-text-xs);
	font-weight: 700;
	color: var(--jal-gold);
}

.jal-pagehead__eyebrow a { color: inherit; }

.jal-pagehead--exam {
	background: var(--jal-navy);
	border-bottom: 3px solid var(--jal-gold);
}

.jal-pagehead--exam .jal-pagehead__title { color: var(--jal-white); }
.jal-pagehead--exam .jal-pagehead__eyebrow { color: var(--jal-gold-bright); }

.jal-pagehead__facts {
	list-style: none;
	margin: var(--jal-sp-4) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--jal-sp-2) var(--jal-sp-5);
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--jal-text-sm);
}

.jal-pagehead__facts li { position: relative; }

/* ------------------------------------------------------------------ *
 * 5. Buttons
 * ------------------------------------------------------------------ */
.jal-btn,
button.jal-btn,
input[type="submit"].jal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--jal-sp-2);
	padding: 0.75rem 1.4rem;
	border: 2px solid transparent;
	border-radius: var(--jal-radius-sm);
	font-family: var(--jal-font-sans);
	font-size: var(--jal-text-sm);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.2;
	text-align: center;
	transition: background-color var(--jal-transition), color var(--jal-transition),
		border-color var(--jal-transition), transform var(--jal-transition), box-shadow var(--jal-transition);
}

.jal-btn:hover,
.jal-btn:focus-visible {
	transform: translateY(-1px);
	box-shadow: var(--jal-shadow);
}

.jal-btn:active { transform: translateY(0); }

.jal-btn--navy {
	background: var(--jal-navy);
	border-color: var(--jal-navy);
	color: var(--jal-white);
}

.jal-btn--navy:hover,
.jal-btn--navy:focus-visible {
	background: var(--jal-navy-deep);
	border-color: var(--jal-navy-deep);
	color: var(--jal-white);
}

.jal-btn--gold {
	background: var(--jal-gold);
	border-color: var(--jal-gold);
	color: var(--jal-navy-deep);
}

.jal-btn--gold:hover,
.jal-btn--gold:focus-visible {
	background: var(--jal-gold-bright);
	border-color: var(--jal-gold-bright);
	color: var(--jal-navy-deep);
}

.jal-btn--ghost {
	background: transparent;
	border-color: var(--jal-gray-300);
	color: var(--jal-navy);
}

.jal-btn--ghost:hover,
.jal-btn--ghost:focus-visible {
	border-color: var(--jal-navy);
	background: var(--jal-gray-100);
	color: var(--jal-navy);
}

.jal-btn--outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--jal-white);
}

.jal-btn--outline-light:hover,
.jal-btn--outline-light:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--jal-white);
	color: var(--jal-white);
}

.jal-btn--lg {
	padding: 0.95rem 1.9rem;
	font-size: 1rem;
}

.jal-btn--sm {
	padding: 0.45rem 0.9rem;
	font-size: var(--jal-text-xs);
}

.jal-btn--block { width: 100%; }

/* ------------------------------------------------------------------ *
 * 6. Header & navigation
 * ------------------------------------------------------------------ */
.jal-header {
	background: var(--jal-white);
	border-bottom: 1px solid var(--jal-gray-200);
	position: sticky;
	top: 0;
	z-index: 60;
}

.jal-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jal-sp-4);
	min-height: 72px;
	flex-wrap: wrap;
}

.jal-brand { margin: 0; }

.jal-brand__link {
	display: inline-flex;
	align-items: center;
	gap: var(--jal-sp-3);
	text-decoration: none;
	color: var(--jal-navy);
}

.jal-brand__mark {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: var(--jal-radius-sm);
	background: var(--jal-navy);
	color: var(--jal-gold-bright);
	flex: none;
}

.jal-brand__text { display: flex; flex-direction: column; }

.jal-brand__name {
	font-family: var(--jal-font-serif);
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

.jal-brand__tagline {
	font-size: var(--jal-text-xs);
	color: var(--jal-gray-500);
	line-height: 1.3;
}

.custom-logo { max-height: 56px; width: auto; }

.jal-nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--jal-sp-2);
	background: transparent;
	border: 2px solid var(--jal-gray-300);
	border-radius: var(--jal-radius-sm);
	padding: 0.55rem 0.85rem;
	font-weight: 700;
	font-size: var(--jal-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--jal-navy);
	cursor: pointer;
}

.jal-nav-toggle__bars,
.jal-nav-toggle__bars::before,
.jal-nav-toggle__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	transition: transform var(--jal-transition), opacity var(--jal-transition);
}

.jal-nav-toggle__bars { position: relative; }

.jal-nav-toggle__bars::before,
.jal-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.jal-nav-toggle__bars::before { top: -6px; }
.jal-nav-toggle__bars::after { top: 6px; }

.jal-nav-toggle[aria-expanded="true"] .jal-nav-toggle__bars { background: transparent; }
.jal-nav-toggle[aria-expanded="true"] .jal-nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.jal-nav-toggle[aria-expanded="true"] .jal-nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

.jal-header__nav {
	display: none;
	width: 100%;
	padding-bottom: var(--jal-sp-4);
}

.jal-header__nav.is-open { display: block; }

.jal-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--jal-sp-1);
}

.jal-menu a {
	display: block;
	padding: 0.7rem 0.25rem;
	text-decoration: none;
	font-weight: 600;
	font-size: var(--jal-text-sm);
	border-bottom: 1px solid var(--jal-gray-200);
}

.jal-menu--account {
	margin-top: var(--jal-sp-3);
	padding-top: var(--jal-sp-3);
	border-top: 2px solid var(--jal-gray-200);
}

.jal-nav .current-menu-item > a,
.jal-nav .current_page_item > a {
	color: var(--jal-gold);
}

/* Sub-menus */
.jal-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding-left: var(--jal-sp-4);
}

/*
 * Desktop navigation starts at 1200px, not 1000px.
 *
 * The header carries two menus side by side (primary + account). Below this
 * width they overflow the viewport and the last account link gets clipped off
 * the right edge, so mid-size laptops keep the toggle instead.
 */
@media (min-width: 1200px) {
	.jal-nav-toggle { display: none; }

	.jal-header__nav {
		display: flex !important;
		width: auto;
		align-items: center;
		gap: var(--jal-sp-5);
		padding-bottom: 0;
		flex-wrap: wrap;
		justify-content: flex-end;
		min-width: 0;
	}

	.jal-menu {
		flex-direction: row;
		align-items: center;
		gap: var(--jal-sp-4);
		flex-wrap: wrap;
	}

	.jal-menu a {
		padding: 0.35rem 0;
		border-bottom: 2px solid transparent;
	}

	.jal-menu a:hover,
	.jal-menu a:focus-visible {
		border-bottom-color: var(--jal-gold);
	}

	.jal-menu--account {
		margin: 0;
		padding: 0 0 0 var(--jal-sp-4);
		border-top: 0;
		border-left: 1px solid var(--jal-gray-200);
		gap: var(--jal-sp-3);
	}

	.jal-menu--account .menu-item--cta a {
		padding: 0.55rem 1.1rem;
		background: var(--jal-navy);
		color: var(--jal-white);
		border-radius: var(--jal-radius-sm);
		border-bottom: 0;
	}

	.jal-menu--account .menu-item--cta a:hover { background: var(--jal-navy-deep); }

	/* Dropdowns */
	.jal-menu .menu-item-has-children { position: relative; }

	.jal-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		background: var(--jal-white);
		border: 1px solid var(--jal-gray-200);
		border-radius: var(--jal-radius-sm);
		box-shadow: var(--jal-shadow);
		padding: var(--jal-sp-2);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity var(--jal-transition), transform var(--jal-transition), visibility var(--jal-transition);
		z-index: 70;
	}

	.jal-menu .menu-item-has-children:hover > .sub-menu,
	.jal-menu .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.jal-menu .sub-menu a {
		padding: 0.5rem 0.7rem;
		border-radius: var(--jal-radius-sm);
		border-bottom: 0;
	}

	.jal-menu .sub-menu a:hover { background: var(--jal-gray-100); }
}

/* ------------------------------------------------------------------ *
 * 7. Hero
 * ------------------------------------------------------------------ */
.jal-hero {
	background: linear-gradient(160deg, var(--jal-navy-deep) 0%, var(--jal-navy) 55%, var(--jal-navy-soft) 100%);
	color: var(--jal-white);
	padding: var(--jal-sp-8) 0 var(--jal-sp-9);
	position: relative;
	overflow: hidden;
}

.jal-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 4px;
	background: linear-gradient(90deg, var(--jal-gold) 0%, var(--jal-gold-bright) 50%, var(--jal-gold) 100%);
}

.jal-hero__inner {
	display: grid;
	gap: var(--jal-sp-7);
	align-items: center;
}

@media (min-width: 980px) {
	.jal-hero__inner { grid-template-columns: 1.15fr 1fr; }
}

.jal-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.11em;
	font-size: var(--jal-text-xs);
	font-weight: 700;
	color: var(--jal-gold-bright);
	margin-bottom: var(--jal-sp-3);
}

.jal-hero__title {
	color: var(--jal-white);
	margin-bottom: var(--jal-sp-4);
	max-width: 16ch;
}

.jal-hero__text {
	font-size: 1.15rem;
	color: rgba(255, 255, 255, 0.86);
	max-width: 56ch;
	margin-bottom: var(--jal-sp-6);
}

.jal-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jal-sp-3);
	margin-bottom: var(--jal-sp-6);
}

.jal-hero__trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--jal-sp-2) var(--jal-sp-5);
	font-size: var(--jal-text-sm);
	color: rgba(255, 255, 255, 0.75);
}

.jal-hero__trust li { position: relative; padding-left: 1.35rem; }

.jal-hero__trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--jal-gold-bright);
}

/* Decorative exam preview panel */
.jal-hero__panel {
	background: var(--jal-white);
	border-radius: var(--jal-radius-lg);
	box-shadow: var(--jal-shadow-lg);
	padding: var(--jal-sp-5);
	color: var(--jal-charcoal);
	max-width: 420px;
	margin-inline: auto;
}

.jal-hero__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jal-sp-3);
	padding-bottom: var(--jal-sp-3);
	border-bottom: 1px solid var(--jal-gray-200);
	margin-bottom: var(--jal-sp-4);
}

.jal-hero__panel-title {
	font-family: var(--jal-font-serif);
	font-weight: 700;
	color: var(--jal-navy);
	font-size: 0.95rem;
}

.jal-hero__panel-timer {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--jal-gold);
	background: var(--jal-gold-soft);
	padding: 0.2rem 0.55rem;
	border-radius: var(--jal-radius-sm);
	font-size: 0.9rem;
}

.jal-hero__panel-q {
	font-size: var(--jal-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--jal-gray-500);
	font-weight: 700;
	margin-bottom: var(--jal-sp-3);
}

.jal-hero__panel-choices {
	list-style: none;
	margin: 0 0 var(--jal-sp-4);
	padding: 0;
	display: grid;
	gap: var(--jal-sp-2);
}

.jal-hero__panel-choices li {
	display: flex;
	align-items: center;
	gap: var(--jal-sp-3);
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--jal-gray-200);
	border-radius: var(--jal-radius-sm);
	background: var(--jal-gray-50);
}

.jal-hero__panel-choices li span {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--jal-white);
	border: 2px solid var(--jal-gray-300);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--jal-gray-500);
}

.jal-hero__panel-choices li.is-active {
	border-color: var(--jal-navy);
	background: var(--jal-info-bg);
}

.jal-hero__panel-choices li.is-active span {
	border-color: var(--jal-navy);
	background: var(--jal-navy);
	color: var(--jal-white);
}

.jal-hero__panel-bar {
	height: 6px;
	border-radius: 999px;
	background: var(--jal-gray-200);
	overflow: hidden;
}

.jal-hero__panel-bar span {
	display: block;
	height: 100%;
	background: var(--jal-gold);
}

/* ------------------------------------------------------------------ *
 * 8. Sections, cards & grids
 * ------------------------------------------------------------------ */
.jal-section { padding: var(--jal-sp-8) 0; }

.jal-section--offer { background: var(--jal-white); }
.jal-section--steps { background: var(--jal-gray-100); }
.jal-section--books { background: var(--jal-white); }

.jal-section__head {
	max-width: 62ch;
	margin: 0 auto var(--jal-sp-7);
	text-align: center;
}

.jal-section__title { margin-bottom: var(--jal-sp-3); }

.jal-section__lede {
	color: var(--jal-gray-500);
	font-size: 1.08rem;
	margin: 0;
}

.jal-grid {
	display: grid;
	gap: var(--jal-sp-5);
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.jal-grid--2,
	.jal-grid--3,
	.jal-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 940px) {
	.jal-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.jal-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.jal-card {
	background: var(--jal-white);
	border: 1px solid var(--jal-gray-200);
	border-radius: var(--jal-radius);
	padding: var(--jal-sp-5);
	display: flex;
	flex-direction: column;
	gap: var(--jal-sp-3);
	transition: box-shadow var(--jal-transition), transform var(--jal-transition), border-color var(--jal-transition);
}

.jal-card:hover {
	box-shadow: var(--jal-shadow);
	border-color: var(--jal-gray-300);
}

.jal-card__head { display: flex; flex-direction: column; gap: var(--jal-sp-1); }

.jal-card__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: var(--jal-text-xs);
	font-weight: 700;
	color: var(--jal-gold);
}

.jal-card__title {
	margin: 0;
	font-size: 1.2rem;
}

.jal-card__title a { text-decoration: none; }

.jal-card__text {
	margin: 0;
	color: var(--jal-gray-500);
	font-size: var(--jal-text-sm);
}

.jal-card__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: var(--jal-radius-sm);
	background: var(--jal-info-bg);
	color: var(--jal-navy);
	margin-bottom: var(--jal-sp-1);
}

.jal-card__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--jal-sp-2);
}

.jal-card__meta li {
	font-size: var(--jal-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--jal-navy);
	background: var(--jal-gray-100);
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
}

.jal-card__meta-lock {
	background: var(--jal-gold-soft) !important;
	color: var(--jal-gold) !important;
}

.jal-card__status {
	margin: 0;
	font-size: var(--jal-text-xs);
	color: var(--jal-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
}

.jal-card__foot { margin-top: auto; padding-top: var(--jal-sp-2); }

.jal-card__link {
	font-size: var(--jal-text-sm);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid var(--jal-gold);
	align-self: flex-start;
	padding-bottom: 2px;
}

/* Locked-card footer line. Deliberately quiet - it is information, not a
   call to action; the section's banner is the only thing being clicked. */
.jal-card__note {
	margin: 0;
	font-size: var(--jal-text-sm);
	font-weight: 600;
	color: var(--jal-gray-500);
}

/* A plain bulleted list inside a card, where .jal-prose is not in play. */
.jal-list {
	margin: 0;
	padding-left: 1.15em;
	font-size: var(--jal-text-sm);
	color: var(--jal-gray-600);
	line-height: 1.65;
}

.jal-list li + li { margin-top: 0.5em; }

/* The support address: large enough to read aloud over the phone. */
.jal-contact__email {
	font-size: var(--jal-text-lg);
	font-weight: 700;
	color: var(--jal-navy);
	text-decoration: none;
	border-bottom: 2px solid var(--jal-gold);
	word-break: break-word;
}

.jal-contact__email:hover,
.jal-contact__email:focus { color: var(--jal-gold-dark, var(--jal-gold)); }

.jal-card--exam.is-locked {
	background: var(--jal-gray-50);
	border-style: dashed;
}

.jal-card--exam.is-locked .jal-card__title { color: var(--jal-gray-500); }

.jal-card--post { padding: 0; overflow: hidden; }
.jal-card--post .jal-card__body { padding: var(--jal-sp-5); display: flex; flex-direction: column; gap: var(--jal-sp-3); }
.jal-card--post .jal-card__media img { width: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.jal-card__meta-line { margin: 0; font-size: var(--jal-text-xs); color: var(--jal-gray-500); }

.jal-postlist {
	display: grid;
	gap: var(--jal-sp-5);
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.jal-postlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Steps */
.jal-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--jal-sp-5);
	counter-reset: jal-step;
}

@media (min-width: 720px) { .jal-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .jal-steps { grid-template-columns: repeat(4, 1fr); } }

.jal-step {
	background: var(--jal-white);
	border-radius: var(--jal-radius);
	padding: var(--jal-sp-5);
	border-top: 3px solid var(--jal-gold);
	box-shadow: var(--jal-shadow-sm);
}

.jal-step__num {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--jal-navy);
	color: var(--jal-white);
	font-weight: 700;
	font-size: 0.95rem;
	margin-bottom: var(--jal-sp-3);
}

.jal-step__title { font-size: 1.08rem; margin-bottom: var(--jal-sp-2); }
.jal-step__text { margin: 0; font-size: var(--jal-text-sm); color: var(--jal-gray-500); }

/* Notices */
.jal-notice {
	border-radius: var(--jal-radius);
	padding: var(--jal-sp-4) var(--jal-sp-5);
	margin: 0 0 var(--jal-sp-5);
	border-left: 4px solid var(--jal-navy);
	background: var(--jal-info-bg);
}

.jal-notice p:last-child { margin-bottom: 0; }
.jal-notice--slim { padding: var(--jal-sp-3) var(--jal-sp-4); font-size: var(--jal-text-sm); }
.jal-notice--success { background: var(--jal-success-bg); border-left-color: var(--jal-success); }
.jal-notice--error { background: var(--jal-error-bg); border-left-color: var(--jal-error); }
.jal-notice--warning { background: var(--jal-gold-soft); border-left-color: var(--jal-gold); }
.jal-notice__admin { font-size: var(--jal-text-xs); color: var(--jal-gray-500); font-style: italic; }

.jal-noresults {
	background: var(--jal-gray-100);
	border-radius: var(--jal-radius);
	padding: var(--jal-sp-6);
	text-align: center;
}

/* Suite summary strip */
.jal-suite-summary {
	background: var(--jal-navy);
	color: var(--jal-white);
	border-radius: var(--jal-radius-lg);
	padding: var(--jal-sp-5);
	display: grid;
	gap: var(--jal-sp-5);
	margin-bottom: var(--jal-sp-6);
}

@media (min-width: 860px) {
	.jal-suite-summary {
		grid-template-columns: 1.4fr auto;
		align-items: center;
	}
}

.jal-suite-summary__stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--jal-sp-4);
}

@media (min-width: 620px) { .jal-suite-summary__stats { grid-template-columns: repeat(4, 1fr); } }

.jal-suite-summary__stats li { display: flex; flex-direction: column; }
.jal-suite-summary__stats strong { font-size: 1.8rem; font-family: var(--jal-font-serif); color: var(--jal-gold-bright); line-height: 1.1; }
.jal-suite-summary__stats span { font-size: var(--jal-text-xs); text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255,255,255,0.7); }

.jal-suite-summary__buy { text-align: left; }
.jal-suite-summary__price { font-size: 1.6rem; font-weight: 700; margin: 0 0 var(--jal-sp-3); font-family: var(--jal-font-serif); }
.jal-suite-summary__price span { font-size: var(--jal-text-xs); text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255,255,255,0.7); font-family: var(--jal-font-sans); }

/* ------------------------------------------------------------------ *
 * 9. Upgrade banner & locked state
 * ------------------------------------------------------------------ */
.jal-upgrade {
	background: linear-gradient(135deg, var(--jal-navy) 0%, var(--jal-navy-soft) 100%);
	color: var(--jal-white);
	border-radius: var(--jal-radius-lg);
	margin: var(--jal-sp-7) 0;
	overflow: hidden;
	position: relative;
}

.jal-upgrade::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--jal-gold);
}

.jal-upgrade__inner {
	display: grid;
	gap: var(--jal-sp-6);
	padding: var(--jal-sp-6) var(--jal-sp-5);
}

@media (min-width: 900px) {
	.jal-upgrade__inner {
		grid-template-columns: 1.35fr 1fr;
		align-items: center;
		padding: var(--jal-sp-7) var(--jal-sp-7);
	}
}

.jal-upgrade__title { color: var(--jal-white); margin-bottom: var(--jal-sp-2); font-size: clamp(1.4rem, 1.2rem + 1vw, 1.95rem); }

.jal-upgrade__subtitle {
	color: var(--jal-gold-bright);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--jal-text-sm);
	margin-bottom: var(--jal-sp-4);
}

.jal-upgrade__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--jal-sp-2);
	font-size: var(--jal-text-sm);
	color: rgba(255, 255, 255, 0.9);
}

@media (min-width: 620px) { .jal-upgrade__list { grid-template-columns: repeat(2, 1fr); } }

.jal-upgrade__list li { position: relative; padding-left: 1.6rem; }

.jal-upgrade__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 14px;
	height: 8px;
	border-left: 2px solid var(--jal-gold-bright);
	border-bottom: 2px solid var(--jal-gold-bright);
	transform: rotate(-45deg);
}

.jal-upgrade__action {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--jal-radius);
	padding: var(--jal-sp-5);
	text-align: center;
}

.jal-upgrade__price { margin: 0 0 var(--jal-sp-4); display: flex; flex-direction: column; gap: 2px; }

.jal-upgrade__amount {
	font-family: var(--jal-font-serif);
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--jal-white);
	line-height: 1;
}

.jal-upgrade__terms {
	font-size: var(--jal-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--jal-gold-bright);
	font-weight: 700;
}

.jal-upgrade__note {
	margin: var(--jal-sp-3) 0 0;
	font-size: var(--jal-text-xs);
	color: rgba(255, 255, 255, 0.62);
}

.jal-upgrade--compact .jal-upgrade__inner { padding: var(--jal-sp-5); gap: var(--jal-sp-4); }
.jal-upgrade--compact .jal-upgrade__list { display: none; }

.jal-locked {
	text-align: center;
	background: var(--jal-gray-100);
	border: 2px dashed var(--jal-gray-300);
	border-radius: var(--jal-radius-lg);
	padding: var(--jal-sp-7) var(--jal-sp-5);
	margin: var(--jal-sp-6) 0;
}

.jal-locked__icon {
	display: inline-grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--jal-white);
	color: var(--jal-gold);
	margin-bottom: var(--jal-sp-4);
	box-shadow: var(--jal-shadow-sm);
}

.jal-locked__title { margin-bottom: var(--jal-sp-2); }
.jal-locked__exam { font-weight: 700; color: var(--jal-navy); margin-bottom: var(--jal-sp-3); }
.jal-locked__text { color: var(--jal-gray-500); max-width: 52ch; margin-inline: auto; }
.jal-locked .jal-btn { margin-top: var(--jal-sp-3); }

/* Auth wall */
.jal-authwall {
	text-align: center;
	background: var(--jal-gray-100);
	border-radius: var(--jal-radius-lg);
	padding: var(--jal-sp-8) var(--jal-sp-5);
}

.jal-authwall__text { color: var(--jal-gray-500); max-width: 48ch; margin-inline: auto; }

.jal-authwall__actions,
.jal-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jal-sp-3);
	justify-content: center;
	margin-top: var(--jal-sp-5);
}

/* ------------------------------------------------------------------ *
 * 10. Dashboard
 * ------------------------------------------------------------------ */
.jal-main--dashboard { background: var(--jal-gray-50); }

.jal-dash__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--jal-sp-4);
	margin-bottom: var(--jal-sp-6);
}

.jal-dash__eyebrow {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: var(--jal-text-xs);
	font-weight: 700;
	color: var(--jal-gold);
}

.jal-dash__title { margin: 0; }

.jal-badge {
	margin: 0;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	font-size: var(--jal-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

.jal-badge--premium { background: var(--jal-gold); color: var(--jal-navy-deep); }
.jal-badge--free { background: var(--jal-gray-200); color: var(--jal-gray-500); }

.jal-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--jal-sp-4);
	margin-bottom: var(--jal-sp-6);
}

@media (min-width: 860px) { .jal-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.jal-stat {
	background: var(--jal-white);
	border: 1px solid var(--jal-gray-200);
	border-radius: var(--jal-radius);
	padding: var(--jal-sp-5);
	display: flex;
	flex-direction: column;
	gap: var(--jal-sp-1);
}

.jal-stat__value {
	font-family: var(--jal-font-serif);
	font-size: 2.1rem;
	font-weight: 700;
	color: var(--jal-navy);
	line-height: 1;
}

.jal-stat__label {
	font-size: var(--jal-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--jal-gray-500);
	font-weight: 600;
}

.jal-panel {
	background: var(--jal-white);
	border: 1px solid var(--jal-gray-200);
	border-radius: var(--jal-radius);
	padding: var(--jal-sp-5);
	margin-bottom: var(--jal-sp-6);
}

.jal-panel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--jal-sp-3);
}

.jal-panel__title { font-size: 1.25rem; margin-bottom: var(--jal-sp-4); }
.jal-panel__note { font-size: var(--jal-text-xs); color: var(--jal-gray-500); text-transform: uppercase; letter-spacing: 0.06em; }
.jal-panel__empty { color: var(--jal-gray-500); font-size: var(--jal-text-sm); }

/* One module per subject on the dashboard. */
.jal-panel--book { border-top: 3px solid var(--jal-gold); }

.jal-panel--book .jal-panel__head {
	align-items: center;
	margin-bottom: var(--jal-sp-4);
}

.jal-panel--book .jal-panel__title { margin-bottom: 0; }

.jal-panel__foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jal-sp-3);
	align-items: center;
	margin-top: var(--jal-sp-4);
	padding-top: var(--jal-sp-4);
	border-top: 1px solid var(--jal-gray-200);
}

.jal-panel__foot:empty { display: none; }

.jal-progress { margin-bottom: var(--jal-sp-4); }
.jal-progress:last-child { margin-bottom: 0; }

.jal-progress__meta {
	display: flex;
	justify-content: space-between;
	gap: var(--jal-sp-3);
	margin-bottom: var(--jal-sp-2);
	font-size: var(--jal-text-sm);
}

.jal-progress__label { font-weight: 600; color: var(--jal-charcoal); }
.jal-progress__count { font-weight: 700; color: var(--jal-navy); font-variant-numeric: tabular-nums; }

.jal-progress__track {
	height: 10px;
	border-radius: 999px;
	background: var(--jal-gray-200);
	overflow: hidden;
}

.jal-progress__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--jal-navy) 0%, var(--jal-gold) 100%);
	transition: width 400ms ease;
}

.jal-recent { list-style: none; margin: 0; padding: 0; }

.jal-recent__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--jal-sp-3);
	padding: var(--jal-sp-3) 0;
	border-bottom: 1px solid var(--jal-gray-200);
}

.jal-recent__item:last-child { border-bottom: 0; }
.jal-recent__name { font-weight: 600; }
.jal-recent__score { font-variant-numeric: tabular-nums; color: var(--jal-navy); font-weight: 700; }
.jal-recent__score em { font-style: normal; color: var(--jal-gold); margin-left: var(--jal-sp-2); }
.jal-recent__date { font-size: var(--jal-text-xs); color: var(--jal-gray-500); }

.jal-linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jal-sp-2); }
.jal-linklist a { font-weight: 600; font-size: var(--jal-text-sm); }

.jal-pill {
	display: inline-block;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	font-size: var(--jal-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: var(--jal-gray-100);
	color: var(--jal-gray-500);
}

.jal-pill--done { background: var(--jal-success-bg); color: var(--jal-success); }
.jal-pill--locked { background: var(--jal-gold-soft); color: var(--jal-gold); }

/* ------------------------------------------------------------------ *
 * 11. Tables
 * ------------------------------------------------------------------ */
.jal-table-wrap { overflow-x: auto; }

.jal-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--jal-text-sm);
}

.jal-table th,
.jal-table td {
	padding: var(--jal-sp-3) var(--jal-sp-3);
	text-align: left;
	border-bottom: 1px solid var(--jal-gray-200);
	vertical-align: middle;
}

.jal-table thead th {
	background: var(--jal-gray-100);
	font-size: var(--jal-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--jal-gray-500);
	font-weight: 700;
	border-bottom: 2px solid var(--jal-gray-200);
	white-space: nowrap;
}

.jal-table tbody tr:hover { background: var(--jal-gray-50); }
.jal-table tbody th { font-weight: 600; color: var(--jal-navy); }

/* Stacked table on small screens */
@media (max-width: 719px) {
	.jal-table thead { display: none; }
	.jal-table, .jal-table tbody, .jal-table tr, .jal-table th, .jal-table td { display: block; width: 100%; }

	.jal-table tr {
		border: 1px solid var(--jal-gray-200);
		border-radius: var(--jal-radius-sm);
		margin-bottom: var(--jal-sp-3);
		padding: var(--jal-sp-2);
	}

	.jal-table th,
	.jal-table td {
		border-bottom: 0;
		display: flex;
		justify-content: space-between;
		gap: var(--jal-sp-3);
		padding: var(--jal-sp-2);
	}

	.jal-table td::before,
	.jal-table tbody th::before {
		content: attr(data-label);
		font-size: var(--jal-text-xs);
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--jal-gray-500);
		font-weight: 700;
		flex: none;
	}
}

/* ------------------------------------------------------------------ *
 * 12. Forms & auth
 * ------------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 2px solid var(--jal-gray-300);
	border-radius: var(--jal-radius-sm);
	font-family: inherit;
	font-size: var(--jal-text);
	color: var(--jal-charcoal);
	background: var(--jal-white);
	transition: border-color var(--jal-transition), box-shadow var(--jal-transition);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--jal-navy);
	outline: none;
	box-shadow: 0 0 0 3px rgba(15, 37, 71, 0.12);
}

label { font-weight: 600; font-size: var(--jal-text-sm); }

.jal-form__row { margin-bottom: var(--jal-sp-4); }
.jal-form__label { display: block; margin-bottom: var(--jal-sp-2); }
.jal-form__hint { display: block; margin-top: var(--jal-sp-1); font-size: var(--jal-text-xs); color: var(--jal-gray-500); }
.jal-form__actions { margin-top: var(--jal-sp-5); }
.jal-form__hp { position: absolute !important; left: -9999px; }
.jal-req { color: var(--jal-error); }

.jal-auth {
	display: grid;
	gap: var(--jal-sp-6);
	max-width: 980px;
	margin: 0 auto;
}

@media (min-width: 880px) { .jal-auth { grid-template-columns: 1.15fr 0.85fr; align-items: start; } }

.jal-auth__panel {
	background: var(--jal-white);
	border: 1px solid var(--jal-gray-200);
	border-radius: var(--jal-radius-lg);
	padding: var(--jal-sp-6);
	box-shadow: var(--jal-shadow-sm);
}

.jal-auth__title { margin-bottom: var(--jal-sp-2); }
.jal-auth__text { color: var(--jal-gray-500); font-size: var(--jal-text-sm); }
.jal-auth__actions { display: flex; flex-wrap: wrap; gap: var(--jal-sp-3); margin-top: var(--jal-sp-4); }

.jal-auth__links {
	margin: var(--jal-sp-4) 0 0;
	font-size: var(--jal-text-sm);
	display: flex;
	flex-wrap: wrap;
	gap: var(--jal-sp-2);
	align-items: center;
}

.jal-auth__aside {
	background: var(--jal-navy);
	color: var(--jal-white);
	border-radius: var(--jal-radius-lg);
	padding: var(--jal-sp-6);
}

.jal-auth__aside-title { color: var(--jal-white); font-size: 1.2rem; }

.jal-auth__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--jal-sp-3);
	font-size: var(--jal-text-sm);
	color: rgba(255, 255, 255, 0.85);
}

.jal-auth__list li { position: relative; padding-left: 1.6rem; }

.jal-auth__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 14px;
	height: 8px;
	border-left: 2px solid var(--jal-gold-bright);
	border-bottom: 2px solid var(--jal-gold-bright);
	transform: rotate(-45deg);
}

/* Core login form */
#jal-loginform p { margin-bottom: var(--jal-sp-4); }
#jal-loginform label { display: block; margin-bottom: var(--jal-sp-2); }
#jal-loginform .login-remember label { display: flex; align-items: center; gap: var(--jal-sp-2); font-weight: 500; }
#jal-loginform .login-remember input { width: auto; }

#jal-loginform .login-submit input[type="submit"] {
	width: 100%;
	padding: 0.95rem 1.9rem;
	border: 2px solid var(--jal-navy);
	background: var(--jal-navy);
	color: var(--jal-white);
	border-radius: var(--jal-radius-sm);
	font-weight: 700;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color var(--jal-transition);
}

#jal-loginform .login-submit input[type="submit"]:hover { background: var(--jal-navy-deep); }

/* Search */
.jal-search { display: flex; gap: var(--jal-sp-2); margin-bottom: var(--jal-sp-5); }
.jal-search__field { flex: 1 1 auto; }
.jal-search__submit { flex: none; }

/* Lead gate */
.jal-gate {
	background: var(--jal-gold-soft);
	border: 2px solid var(--jal-gold);
	border-radius: var(--jal-radius-lg);
	padding: var(--jal-sp-6);
	margin-bottom: var(--jal-sp-6);
}

.jal-gate__title { margin-bottom: var(--jal-sp-2); }
.jal-gate__text { color: var(--jal-charcoal); font-size: var(--jal-text-sm); max-width: 58ch; }
.jal-gate__text + .jal-gate__text { margin-top: var(--jal-sp-3); }

.jal-gate__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jal-sp-3);
	margin: var(--jal-sp-5) 0 0;
}

/* Confirmation that the book was recognised, before the ask. */
.jal-gate__text--good {
	font-weight: 700;
	color: var(--jal-success);
}

/*
 * The one thing to press. On a phone a full-width target is unmissable and
 * cannot be half-tapped, which matters because this is the first screen a
 * reader sees after opening a book they have paid for.
 */
.jal-btn--block {
	display: block;
	width: 100%;
	text-align: center;
}

/* Signing in is for the returning minority, so it is a line, not a button. */
.jal-gate__secondary {
	margin: var(--jal-sp-4) 0 0;
	font-size: var(--jal-text-sm);
	color: var(--jal-gray-600);
}

.jal-gate__secondary a {
	font-weight: 700;
	color: var(--jal-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 600px) {
	.jal-gate { padding: var(--jal-sp-5) var(--jal-sp-4); }
	.jal-gate__title { font-size: 1.35rem; line-height: 1.3; }
	.jal-gate__actions { margin-top: var(--jal-sp-4); }

	/* Comfortably above the 44px minimum touch target. */
	.jal-gate .jal-btn--lg { padding: 1rem 1.1rem; font-size: 1rem; }
}

/*
 * The gate is an explanation, not a form.
 *
 * It previously rendered the field names as white pill shapes, which read as
 * empty input boxes - people tried to type into them and looked for a submit
 * button. It is now plainly a sentence, and the real fields come from Quiz
 * Maker's own information form.
 */
.jal-gate__note {
	margin: 0;
	font-size: var(--jal-text-sm);
	color: var(--jal-charcoal);
	display: flex;
	align-items: flex-start;
	gap: var(--jal-sp-2);
}

.jal-gate__note::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	margin-top: 0.5em;
	border-radius: 50%;
	background: var(--jal-gold);
}

/* ------------------------------------------------------------------ *
 * 13. Exam interface & timer
 * ------------------------------------------------------------------ */
.jal-main--exam { background: var(--jal-gray-50); }

.jal-examnote {
	background: var(--jal-white);
	border: 1px solid var(--jal-gray-200);
	border-left: 4px solid var(--jal-navy);
	border-radius: var(--jal-radius);
	padding: var(--jal-sp-5);
	margin-bottom: var(--jal-sp-5);
}

.jal-examnote__title { font-size: 1.1rem; margin-bottom: var(--jal-sp-3); }
.jal-examnote__list { margin: 0; padding-left: 1.2rem; font-size: var(--jal-text-sm); color: var(--jal-gray-500); display: grid; gap: var(--jal-sp-2); }

.jal-exam {
	background: var(--jal-white);
	border: 1px solid var(--jal-gray-200);
	border-radius: var(--jal-radius-lg);
	overflow: hidden;
	box-shadow: var(--jal-shadow-sm);
}

/* The bar is the first thing in the card - nothing sits above it. */
.jal-exam__bar { margin-top: 0; }

/*
 * NOT sticky.
 *
 * A sticky bar sits on top of whatever scrolls under it, and Quiz Maker
 * renders its own timer and progress row directly beneath - those were being
 * clipped mid-exam. The bar scrolls away normally instead; Quiz Maker's timer
 * stays visible on its own, so nothing is lost.
 */
.jal-exam__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--jal-sp-3);
	padding: var(--jal-sp-4) var(--jal-sp-5);
	background: var(--jal-navy);
	color: var(--jal-white);
	position: relative;
}

.jal-exam__identity { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.jal-exam__name {
	font-family: var(--jal-font-serif);
	font-weight: 700;
	font-size: 1.05rem;
}

.jal-exam__count {
	font-size: var(--jal-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: rgba(255, 255, 255, 0.7);
}

/*
 * The exam clock.
 *
 * Quiz Maker's timer is switched off for these exams, so this is the only
 * countdown on the page and the one that submits the paper at zero. It shifts
 * amber under five minutes and red under one.
 */
.jal-exam__timer {
	display: flex;
	align-items: center;
	gap: var(--jal-sp-3);
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--jal-radius-sm);
	padding: 0.4rem 0.9rem;
	transition: background-color var(--jal-transition), border-color var(--jal-transition);
}

.jal-exam__timer-label {
	font-size: var(--jal-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: rgba(255, 255, 255, 0.7);
}

.jal-exam__timer-value {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: 0.02em;
	min-width: 4.5ch;
	text-align: right;
}

/* Under five minutes. */
.jal-exam__timer.is-low {
	background: var(--jal-gold);
	border-color: var(--jal-gold);
	color: var(--jal-navy-deep);
}

.jal-exam__timer.is-low .jal-exam__timer-label { color: rgba(10, 27, 52, 0.75); }

/* Under one minute. */
.jal-exam__timer.is-critical {
	background: var(--jal-error);
	border-color: var(--jal-error);
	color: var(--jal-white);
	animation: jal-pulse 1.4s ease-in-out infinite;
}

.jal-exam__timer.is-critical .jal-exam__timer-label { color: rgba(255, 255, 255, 0.85); }

.jal-exam__timer.is-expired { animation: none; }

/* Held: paused by the student, or frozen site-wide by an administrator. */
.jal-exam__timer.is-paused {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.25);
	color: rgba(255, 255, 255, 0.75);
	animation: none;
}

.jal-exam__timer.is-paused .jal-exam__timer-value { opacity: 0.65; }

.jal-exam__pause {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: inherit;
	border-radius: var(--jal-radius-sm);
	padding: 0.25rem 0.7rem;
	font: 700 var(--jal-text-xs)/1.2 var(--jal-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
}

.jal-exam__pause:hover { background: rgba(255, 255, 255, 0.14); }

.jal-exam__frozen-note {
	font-size: var(--jal-text-xs);
	color: var(--jal-gold-bright);
	margin-left: var(--jal-sp-3);
}

@keyframes jal-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.72; }
}

/*
 * If the submit control could not be found at zero, the paper is frozen
 * rather than left answerable after time has expired.
 */
.jal-exam__body--expired {
	position: relative;
	pointer-events: none;
	opacity: 0.55;
}

.jal-exam__body--expired::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.4);
}

.jal-exam__body { padding: var(--jal-sp-5); }

.jal-exam__note {
	margin: 0;
	padding: var(--jal-sp-3) var(--jal-sp-5) var(--jal-sp-4);
	font-size: var(--jal-text-xs);
	color: var(--jal-gray-500);
	border-top: 1px solid var(--jal-gray-200);
}

.jal-exam__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jal-sp-3);
	margin-top: var(--jal-sp-6);
}

@media (max-width: 999px) {
	.jal-exam__bar { top: 0; }
}

/* ------------------------------------------------------------------ *
 * 14. Results
 * ------------------------------------------------------------------ */
.jal-results {
	background: var(--jal-white);
	border: 1px solid var(--jal-gray-200);
	border-radius: var(--jal-radius-lg);
	padding: var(--jal-sp-6);
	text-align: center;
	box-shadow: var(--jal-shadow-sm);
}

.jal-results__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.11em;
	font-size: var(--jal-text-xs);
	font-weight: 700;
	color: var(--jal-gold);
	margin-bottom: var(--jal-sp-2);
}

.jal-results__title { margin-bottom: var(--jal-sp-5); }

.jal-results__score {
	display: inline-flex;
	flex-direction: column;
	gap: var(--jal-sp-1);
	padding: var(--jal-sp-5) var(--jal-sp-7);
	border-radius: var(--jal-radius-lg);
	background: var(--jal-gray-100);
	border: 2px solid var(--jal-gray-200);
	margin-bottom: var(--jal-sp-5);
}

.jal-results__score.is-pass { background: var(--jal-success-bg); border-color: var(--jal-success); }
.jal-results__score.is-review { background: var(--jal-gold-soft); border-color: var(--jal-gold); }

.jal-results__score-label {
	font-size: var(--jal-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-weight: 700;
	color: var(--jal-gray-500);
}

.jal-results__score-fraction {
	font-family: var(--jal-font-serif);
	font-size: clamp(2.2rem, 1.8rem + 2vw, 3.2rem);
	font-weight: 700;
	color: var(--jal-navy);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.jal-results__score-percent {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--jal-gold);
}

.jal-results__breakdown {
	list-style: none;
	margin: 0 0 var(--jal-sp-5);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--jal-sp-4);
}

@media (min-width: 720px) { .jal-results__breakdown { grid-template-columns: repeat(4, 1fr); } }

.jal-results__breakdown li {
	display: flex;
	flex-direction: column;
	gap: var(--jal-sp-1);
	padding: var(--jal-sp-4);
	border-radius: var(--jal-radius);
	background: var(--jal-gray-50);
	border: 1px solid var(--jal-gray-200);
}

.jal-results__breakdown li.is-correct { border-color: var(--jal-success); background: var(--jal-success-bg); }
.jal-results__breakdown li.is-incorrect { border-color: var(--jal-error); background: var(--jal-error-bg); }

.jal-results__num {
	font-family: var(--jal-font-serif);
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1;
	color: var(--jal-navy);
}

.jal-results__breakdown li.is-correct .jal-results__num { color: var(--jal-success); }
.jal-results__breakdown li.is-incorrect .jal-results__num { color: var(--jal-error); }

.jal-results__cap {
	font-size: var(--jal-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--jal-gray-500);
	font-weight: 600;
}

.jal-results__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jal-sp-3);
	justify-content: center;
	margin-top: var(--jal-sp-5);
}

/* ------------------------------------------------------------------ *
 * 15. Articles & prose
 * ------------------------------------------------------------------ */
.jal-article { margin-bottom: var(--jal-sp-6); }
.jal-article__media { margin: 0 0 var(--jal-sp-5); border-radius: var(--jal-radius); overflow: hidden; }

.jal-prose { max-width: 68ch; }
.jal-prose--intro { margin-bottom: var(--jal-sp-6); color: var(--jal-gray-500); }
.jal-prose > *:last-child { margin-bottom: 0; }

.jal-prose h2 { margin-top: var(--jal-sp-6); }
.jal-prose h3 { margin-top: var(--jal-sp-5); }
.jal-prose ul, .jal-prose ol { margin-bottom: var(--jal-sp-4); }
.jal-prose li { margin-bottom: var(--jal-sp-2); }

.jal-prose blockquote {
	margin: var(--jal-sp-5) 0;
	padding: var(--jal-sp-4) var(--jal-sp-5);
	border-left: 4px solid var(--jal-gold);
	background: var(--jal-gray-100);
	border-radius: 0 var(--jal-radius-sm) var(--jal-radius-sm) 0;
	font-family: var(--jal-font-serif);
	font-size: 1.1rem;
}

.jal-prose blockquote p:last-child { margin-bottom: 0; }

.jal-prose code {
	background: var(--jal-gray-100);
	padding: 0.15em 0.4em;
	border-radius: 4px;
	font-size: 0.9em;
}

.jal-prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--jal-sp-5); }
.jal-prose th, .jal-prose td { border: 1px solid var(--jal-gray-200); padding: var(--jal-sp-3); text-align: left; }
.jal-prose thead th { background: var(--jal-gray-100); }

.jal-tags { list-style: none; margin: var(--jal-sp-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--jal-sp-2); }
.jal-tags a { font-size: var(--jal-text-xs); background: var(--jal-gray-100); padding: 0.25rem 0.7rem; border-radius: 999px; text-decoration: none; }

.jal-404 { text-align: center; max-width: 620px; margin: var(--jal-sp-7) auto; }
.jal-404__code { font-family: var(--jal-font-serif); font-size: 5rem; font-weight: 700; color: var(--jal-gray-300); line-height: 1; margin: 0; }
.jal-404__text { color: var(--jal-gray-500); }

/* Pagination & post navigation */
.pagination,
.navigation.pagination {
	margin-top: var(--jal-sp-6);
	display: flex;
	justify-content: center;
}

.nav-links { display: flex; flex-wrap: wrap; gap: var(--jal-sp-2); align-items: center; }

.page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.6rem;
	border: 1px solid var(--jal-gray-200);
	border-radius: var(--jal-radius-sm);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--jal-text-sm);
}

.page-numbers.current { background: var(--jal-navy); color: var(--jal-white); border-color: var(--jal-navy); }
.page-numbers:hover:not(.current) { background: var(--jal-gray-100); }

.post-navigation .nav-links {
	display: grid;
	gap: var(--jal-sp-3);
	margin-top: var(--jal-sp-6);
}

@media (min-width: 720px) { .post-navigation .nav-links { grid-template-columns: 1fr 1fr; } }

.post-navigation a {
	display: block;
	padding: var(--jal-sp-4);
	border: 1px solid var(--jal-gray-200);
	border-radius: var(--jal-radius);
	text-decoration: none;
}

.post-navigation a:hover { background: var(--jal-gray-50); }
.jal-postnav__label { display: block; font-size: var(--jal-text-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--jal-gold); font-weight: 700; }
.jal-postnav__title { display: block; font-weight: 600; color: var(--jal-navy); }
.post-navigation .nav-next { text-align: right; }

/* Comments */
.jal-comments { margin-top: var(--jal-sp-7); padding-top: var(--jal-sp-6); border-top: 1px solid var(--jal-gray-200); }
.jal-comments__list { list-style: none; padding: 0; margin: 0 0 var(--jal-sp-6); }
.jal-comments__list .children { list-style: none; padding-left: var(--jal-sp-5); }
.jal-comments .comment-body { padding: var(--jal-sp-4); border: 1px solid var(--jal-gray-200); border-radius: var(--jal-radius); margin-bottom: var(--jal-sp-3); }
.jal-comments .comment-form-comment textarea { min-height: 140px; }

/* ------------------------------------------------------------------ *
 * 16. Footer
 * ------------------------------------------------------------------ */
.jal-footer {
	background: var(--jal-navy-deep);
	color: rgba(255, 255, 255, 0.72);
	padding: var(--jal-sp-8) 0 var(--jal-sp-5);
	margin-top: auto;
	font-size: var(--jal-text-sm);
}

.jal-footer__cols {
	display: grid;
	gap: var(--jal-sp-6);
	grid-template-columns: 1fr;
	padding-bottom: var(--jal-sp-6);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 620px) { .jal-footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .jal-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.jal-footer__title {
	color: var(--jal-white);
	font-size: 1.05rem;
	margin-bottom: var(--jal-sp-3);
}

.jal-footer__about { margin: 0; max-width: 34ch; }

.jal-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jal-sp-2); }

.jal-footer__menu a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
}

.jal-footer__menu a:hover,
.jal-footer__menu a:focus-visible {
	color: var(--jal-gold-bright);
	text-decoration: underline;
}

.jal-footer__disclaimer {
	padding: var(--jal-sp-5) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.jal-footer__disclaimer p {
	margin: 0;
	font-size: var(--jal-text-xs);
	color: rgba(255, 255, 255, 0.55);
	max-width: 90ch;
	line-height: 1.7;
}

.jal-footer__bottom { padding-top: var(--jal-sp-4); }

.jal-footer__bottom p {
	margin: 0;
	font-size: var(--jal-text-xs);
	color: rgba(255, 255, 255, 0.5);
}

/* ------------------------------------------------------------------ *
 * 17. Quiz Maker (AYS Pro) overrides
 *
 * Cosmetic only - selectors are scoped inside .jal-exam__body so nothing
 * leaks, and no plugin behaviour is altered.
 * ------------------------------------------------------------------ */
.jal-exam__body .ays-quiz-container,
.jal-exam__body .ays_quiz_container {
	max-width: 100% !important;
	box-shadow: none !important;
	border: 0 !important;
	background: transparent !important;
	font-family: var(--jal-font-sans) !important;
}

.jal-exam__body .ays-quiz-question,
.jal-exam__body .ays_quiz_question {
	font-family: var(--jal-font-serif) !important;
	font-size: 1.2rem !important;
	color: var(--jal-navy) !important;
	line-height: 1.45 !important;
}

.jal-exam__body .ays-field,
.jal-exam__body .ays_quiz_answers label {
	border-radius: var(--jal-radius-sm) !important;
	transition: background-color var(--jal-transition), border-color var(--jal-transition) !important;
}

.jal-exam__body .ays-field:hover,
.jal-exam__body .ays_quiz_answers label:hover {
	background: var(--jal-info-bg) !important;
}

.jal-exam__body .ays_quiz_answers input[type="radio"],
.jal-exam__body .ays_quiz_answers input[type="checkbox"] {
	accent-color: var(--jal-navy);
	width: auto;
}

.jal-exam__body .ays-quiz-next-button,
.jal-exam__body .ays-quiz-prev-button,
.jal-exam__body .ays-quiz-submit,
.jal-exam__body .ays_quiz_start_button,
.jal-exam__body input[type="submit"],
.jal-exam__body button[type="submit"] {
	background: var(--jal-navy) !important;
	border: 2px solid var(--jal-navy) !important;
	color: var(--jal-white) !important;
	border-radius: var(--jal-radius-sm) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
	padding: 0.75rem 1.4rem !important;
	font-family: var(--jal-font-sans) !important;
	cursor: pointer;
}

.jal-exam__body .ays-quiz-next-button:hover,
.jal-exam__body .ays-quiz-prev-button:hover,
.jal-exam__body .ays-quiz-submit:hover,
.jal-exam__body .ays_quiz_start_button:hover {
	background: var(--jal-navy-deep) !important;
	border-color: var(--jal-navy-deep) !important;
}

.jal-exam__body .ays_quiz_start_button,
.jal-exam__body .ays-quiz-submit {
	background: var(--jal-gold) !important;
	border-color: var(--jal-gold) !important;
	color: var(--jal-navy-deep) !important;
}

/* Correct / incorrect states */
.jal-exam__body .ays-quiz-correct,
.jal-exam__body .correct,
.jal-exam__body .ays_correct {
	color: var(--jal-quiz-correct, var(--jal-success)) !important;
	border-color: var(--jal-quiz-correct, var(--jal-success)) !important;
	background: var(--jal-success-bg) !important;
}

.jal-exam__body .ays-quiz-incorrect,
.jal-exam__body .wrong,
.jal-exam__body .ays_wrong {
	color: var(--jal-quiz-incorrect, var(--jal-error)) !important;
	border-color: var(--jal-quiz-incorrect, var(--jal-error)) !important;
	background: var(--jal-error-bg) !important;
}

/*
 * Quiz Maker's own timer is hidden.
 *
 * The theme now owns the countdown - it is the clock that warns, persists
 * across a refresh and submits the paper at zero. Quiz Maker's timer is
 * sticky, so when it was left switched on it slid underneath the exam bar and
 * showed as a half-cut gold strip, and its placeholder left a gap above the
 * bar. Hiding it here means only one clock is ever visible, whether or not
 * the setting is switched off inside Quiz Maker.
 *
 * If you would rather use Quiz Maker's timer instead, delete this block and
 * turn off the theme's timer on the exam.
 */
.jal-exam__body .ays_quiz_timer,
.jal-exam__body .ays-quiz-timer,
.jal-exam__body .ays_quiz_timer_container,
.jal-exam__body .ays-quiz-timer-container,
.jal-exam__body [class*="ays"][class*="timer"] {
	display: none !important;
}

/*
 * Nothing inside the quiz may stick.
 *
 * Sticky children escape the card and slide under the exam bar. The bar is
 * the only fixed point on this screen.
 */
.jal-exam__body [style*="position: sticky"],
.jal-exam__body [style*="position:sticky"],
.jal-exam__body [class*="ays"][class*="sticky"] {
	position: static !important;
	top: auto !important;
}

/* No dead space between the bar and the first question. */
.jal-exam__body > *:first-child,
.jal-exam__body .ays-quiz-container > *:first-child,
.jal-exam__body .ays_quiz_container > *:first-child {
	margin-top: 0 !important;
}

/* Progress bar */
.jal-exam__body .ays_quiz_progress_bar,
.jal-exam__body .ays-progress-bar {
	background: var(--jal-navy) !important;
}

/* Lead capture form inside the quiz */
.jal-exam__body .ays-quiz-information-form input[type="text"],
.jal-exam__body .ays-quiz-information-form input[type="email"] {
	border: 2px solid var(--jal-gray-300) !important;
	border-radius: var(--jal-radius-sm) !important;
	padding: 0.7rem 0.9rem !important;
}

/* ------------------------------------------------------------------ *
 * 18. Motion & print
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.jal-header,
	.jal-footer,
	.jal-upgrade,
	.jal-nav-toggle,
	.jal-exam__timer,
	.jal-skip-link { display: none !important; }

	body { font-size: 12pt; color: #000; background: #fff; }
	.jal-container { max-width: none; padding: 0; }
	a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}