/**
 * Quran Online School — Design System
 * Bento Grid layout · Deep navy + copper gold
 *
 * @package QuranOnlineSchool
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
	/* Brand */
	--qos-navy-950: #070C16;
	--qos-navy-900: #0F172A;
	--qos-navy-800: #16203A;
	--qos-navy-700: #1E2B4A;
	--qos-navy-600: #2A3A5F;

	--qos-gold-500: #D4A55A;
	--qos-gold-400: #E0BC80;
	--qos-gold-600: #B98A42;
	--qos-gold-glow: rgba(212, 165, 90, 0.18);

	/* Neutrals */
	--qos-ink: #0B111F;
	--qos-body: #3F4A5F;
	--qos-muted: #6B7689;
	--qos-line: #E3E7EE;
	--qos-surface: #FFFFFF;
	--qos-surface-2: #F7F8FB;
	--qos-surface-3: #EFF1F6;

	/* Semantic */
	--qos-success: #14A05F;
	--qos-warning: #D98A16;
	--qos-danger: #D64545;
	--qos-info: #2A6FD6;

	/* Type */
	--qos-font: "Readex Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--qos-font-num: "Readex Pro", ui-monospace, monospace;

	/* Fluid type scale */
	--qos-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
	--qos-text-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
	--qos-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--qos-text-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
	--qos-text-xl: clamp(1.375rem, 1.25rem + 0.55vw, 1.625rem);
	--qos-text-2xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.375rem);
	--qos-text-3xl: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
	--qos-text-4xl: clamp(2.75rem, 2rem + 3.2vw, 4.75rem);

	/* Spacing */
	--qos-gap: clamp(0.875rem, 0.6rem + 1vw, 1.25rem);
	--qos-section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
	--qos-shell: 1280px;
	--qos-shell-pad: clamp(1rem, 0.5rem + 2vw, 2rem);

	/* Radii — Bento uses generous, consistent corners */
	--qos-r-sm: 10px;
	--qos-r-md: 16px;
	--qos-r-lg: 24px;
	--qos-r-xl: 32px;
	--qos-r-pill: 999px;

	/* Elevation */
	--qos-sh-sm: 0 1px 2px rgba(11, 17, 31, 0.05), 0 1px 3px rgba(11, 17, 31, 0.04);
	--qos-sh-md: 0 4px 12px rgba(11, 17, 31, 0.06), 0 2px 4px rgba(11, 17, 31, 0.04);
	--qos-sh-lg: 0 16px 40px rgba(11, 17, 31, 0.1), 0 4px 12px rgba(11, 17, 31, 0.05);
	--qos-sh-glow: 0 0 0 1px var(--qos-gold-glow), 0 20px 50px rgba(212, 165, 90, 0.12);

	--qos-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--qos-dur: 0.42s;
}

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

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	max-width: 100%;
	overflow-x: hidden;
	overflow-wrap: break-word;
	font-family: var(--qos-font);
	font-size: var(--qos-text-base);
	font-weight: 400;
	line-height: 1.75;
	color: var(--qos-body);
	background: var(--qos-surface-2);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	color: var(--qos-ink);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h1 { font-size: var(--qos-text-3xl); font-weight: 700; }
h2 { font-size: var(--qos-text-2xl); }
h3 { font-size: var(--qos-text-xl); }
h4 { font-size: var(--qos-text-lg); }

p {
	margin: 0 0 1.1em;
	text-wrap: pretty;
}

a {
	color: var(--qos-gold-600);
	text-decoration: none;
	transition: color 0.2s var(--qos-ease);
}

a:hover { color: var(--qos-gold-500); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--qos-gold-500);
	outline-offset: 3px;
	border-radius: 4px;
}

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

ul, ol { margin: 0 0 1.1em; padding-inline-start: 1.4em; }
li { margin-bottom: 0.4em; }

hr {
	border: 0;
	height: 1px;
	background: var(--qos-line);
	margin: 2rem 0;
}

::selection {
	background: var(--qos-gold-500);
	color: var(--qos-navy-900);
}

/* Screen reader only */
.qos-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.qos-skip-link {
	position: absolute;
	inset-inline-start: -9999px;
	top: 0;
	z-index: 9999;
	padding: 0.75rem 1.25rem;
	background: var(--qos-navy-900);
	color: #fff;
	border-radius: 0 0 var(--qos-r-sm) 0;
}

.qos-skip-link:focus {
	inset-inline-start: 0;
	color: #fff;
}

/* ==========================================================================
   3. Layout shell
   ========================================================================== */
.qos-shell {
	width: 100%;
	max-width: var(--qos-shell);
	margin-inline: auto;
	padding-inline: var(--qos-shell-pad);
}

.qos-section {
	padding-block: var(--qos-section-y);
}

.qos-section--tight { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); }

.qos-section--navy {
	background: var(--qos-navy-900);
	color: rgba(255, 255, 255, 0.82);
}

.qos-section--navy h1,
.qos-section--navy h2,
.qos-section--navy h3,
.qos-section--navy h4 { color: #fff; }

/* Section heading block */
.qos-head {
	max-width: 62ch;
	margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.qos-head--center {
	margin-inline: auto;
	text-align: center;
}

.qos-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--qos-text-xs);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--qos-gold-600);
	margin-bottom: 0.85rem;
}

.qos-eyebrow::before {
	content: "";
	width: 22px;
	height: 1px;
	background: currentColor;
}

.qos-section--navy .qos-eyebrow { color: var(--qos-gold-500); }

.qos-head p {
	font-size: var(--qos-text-lg);
	color: var(--qos-muted);
	margin-bottom: 0;
}

.qos-section--navy .qos-head p { color: rgba(255, 255, 255, 0.7); }

/* ==========================================================================
   4. Bento grid — the signature layout
   ========================================================================== */
.qos-bento {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--qos-gap);
	grid-auto-rows: minmax(0, auto);
}

/* Column spans */
.qos-b-3  { grid-column: span 3; }
.qos-b-4  { grid-column: span 4; }
.qos-b-5  { grid-column: span 5; }
.qos-b-6  { grid-column: span 6; }
.qos-b-7  { grid-column: span 7; }
.qos-b-8  { grid-column: span 8; }
.qos-b-9  { grid-column: span 9; }
.qos-b-12 { grid-column: span 12; }

/* Row spans for tall tiles */
.qos-b-tall  { grid-row: span 2; }

/* Bento cell */
.qos-cell {
	position: relative;
	background: var(--qos-surface);
	border: 1px solid var(--qos-line);
	border-radius: var(--qos-r-lg);
	padding: clamp(1.35rem, 1rem + 1.2vw, 2.25rem);
	overflow: hidden;
	transition: transform var(--qos-dur) var(--qos-ease),
		box-shadow var(--qos-dur) var(--qos-ease),
		border-color var(--qos-dur) var(--qos-ease);
}

.qos-cell--hover:hover {
	transform: translateY(-4px);
	box-shadow: var(--qos-sh-lg);
	border-color: rgba(212, 165, 90, 0.4);
}

.qos-cell--navy {
	background: var(--qos-navy-900);
	border-color: var(--qos-navy-700);
	color: rgba(255, 255, 255, 0.8);
}

.qos-cell--navy h2,
.qos-cell--navy h3,
.qos-cell--navy h4,
.qos-cell--navy strong { color: #fff; }

.qos-cell--gold {
	background: linear-gradient(150deg, var(--qos-gold-500), var(--qos-gold-600));
	border-color: var(--qos-gold-600);
	color: var(--qos-navy-950);
}

.qos-cell--gold h2,
.qos-cell--gold h3,
.qos-cell--gold h4 { color: var(--qos-navy-950); }

.qos-cell--quiet {
	background: var(--qos-surface-3);
	border-color: transparent;
}

.qos-cell--flush { padding: 0; }

/* Decorative arabesque watermark inside navy cells */
.qos-cell--pattern::after {
	content: "";
	position: absolute;
	inset-block-start: -30%;
	inset-inline-end: -18%;
	width: 62%;
	aspect-ratio: 1;
	background:
		radial-gradient(circle at 50% 50%, var(--qos-gold-glow) 0%, transparent 62%);
	pointer-events: none;
}

/* Bento tile internals */
.qos-cell__icon {
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: var(--qos-r-md);
	background: var(--qos-surface-3);
	color: var(--qos-gold-600);
	font-size: 1.35rem;
	margin-bottom: 1.1rem;
}

.qos-cell--navy .qos-cell__icon {
	background: rgba(212, 165, 90, 0.14);
	color: var(--qos-gold-500);
}

.qos-cell--gold .qos-cell__icon {
	background: rgba(7, 12, 22, 0.14);
	color: var(--qos-navy-950);
}

.qos-cell h3 { margin-bottom: 0.45rem; }

.qos-cell p:last-child { margin-bottom: 0; }

/* Big stat inside a tile */
.qos-stat {
	font-family: var(--qos-font-num);
	font-size: var(--qos-text-3xl);
	font-weight: 700;
	line-height: 1;
	color: var(--qos-ink);
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.qos-cell--navy .qos-stat { color: var(--qos-gold-500); }
.qos-cell--gold .qos-stat { color: var(--qos-navy-950); }

.qos-stat__label {
	display: block;
	margin-top: 0.4rem;
	font-size: var(--qos-text-sm);
	color: var(--qos-muted);
	font-weight: 400;
}

.qos-cell--navy .qos-stat__label { color: rgba(255, 255, 255, 0.62); }
.qos-cell--gold .qos-stat__label { color: rgba(7, 12, 22, 0.68); }

/* Responsive bento collapse */
@media (max-width: 1024px) {
	.qos-b-3 { grid-column: span 6; }
	.qos-b-4 { grid-column: span 6; }
	.qos-b-5 { grid-column: span 12; }
	.qos-b-7 { grid-column: span 12; }
	.qos-b-8 { grid-column: span 12; }
	.qos-b-9 { grid-column: span 12; }
	.qos-b-tall { grid-row: span 1; }
}

@media (max-width: 640px) {
	.qos-b-3,
	.qos-b-4,
	.qos-b-6 { grid-column: span 12; }
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.qos-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.85rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--qos-r-pill);
	font-family: inherit;
	font-size: var(--qos-text-sm);
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s var(--qos-ease), box-shadow 0.2s var(--qos-ease),
		background-color 0.2s var(--qos-ease), color 0.2s var(--qos-ease);
	white-space: nowrap;
}

.qos-btn:active { transform: translateY(1px); }

.qos-btn--primary {
	background: var(--qos-gold-500);
	color: var(--qos-navy-950);
	font-weight: 600;
}

.qos-btn--primary:hover {
	background: var(--qos-gold-400);
	color: var(--qos-navy-950);
	box-shadow: 0 8px 24px rgba(212, 165, 90, 0.32);
}

.qos-btn--dark {
	background: var(--qos-navy-900);
	color: #fff;
}

.qos-btn--dark:hover {
	background: var(--qos-navy-800);
	color: #fff;
	box-shadow: var(--qos-sh-md);
}

.qos-btn--ghost {
	background: transparent;
	border-color: var(--qos-line);
	color: var(--qos-ink);
}

.qos-btn--ghost:hover {
	border-color: var(--qos-gold-500);
	color: var(--qos-gold-600);
	background: rgba(212, 165, 90, 0.05);
}

.qos-btn--ghost-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
}

.qos-btn--ghost-light:hover {
	border-color: var(--qos-gold-500);
	background: rgba(212, 165, 90, 0.12);
	color: #fff;
}

.qos-btn--lg {
	padding: 1.05rem 2.1rem;
	font-size: var(--qos-text-base);
}

.qos-btn--sm {
	padding: 0.5rem 1rem;
	font-size: var(--qos-text-xs);
}

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

.qos-btn[disabled],
.qos-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

/* ==========================================================================
   6. Header
   ========================================================================== */
.qos-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: saturate(180%) blur(18px);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	border-bottom: 1px solid var(--qos-line);
}

.qos-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	min-height: 74px;
}

.qos-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	flex-shrink: 0;
}

.qos-brand__mark {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: var(--qos-r-sm);
	background: var(--qos-navy-900);
	color: var(--qos-gold-500);
	font-size: 1.15rem;
	flex-shrink: 0;
}

.qos-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.qos-brand__name {
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--qos-ink);
	letter-spacing: -0.01em;
}

.qos-brand__tag {
	font-size: 0.6875rem;
	color: var(--qos-muted);
	letter-spacing: 0.06em;
}

/* Primary nav */
.qos-nav ul {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qos-nav li { margin: 0; position: relative; }

.qos-nav a {
	display: block;
	padding: 0.5rem 0.85rem;
	border-radius: var(--qos-r-pill);
	font-size: var(--qos-text-sm);
	font-weight: 400;
	color: var(--qos-body);
	transition: background-color 0.2s var(--qos-ease), color 0.2s var(--qos-ease);
}

.qos-nav a:hover,
.qos-nav .current-menu-item > a {
	background: var(--qos-surface-3);
	color: var(--qos-ink);
}

/* Dropdown */
.qos-nav .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-start: 0;
	min-width: 210px;
	flex-direction: column;
	gap: 2px;
	padding: 0.5rem;
	background: var(--qos-surface);
	border: 1px solid var(--qos-line);
	border-radius: var(--qos-r-md);
	box-shadow: var(--qos-sh-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: all 0.24s var(--qos-ease);
}

.qos-nav li:hover > .sub-menu,
.qos-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.qos-header__actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-shrink: 0;
}

/* Language switcher */
.qos-lang {
	position: relative;
}

.qos-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.8rem;
	background: transparent;
	border: 1px solid var(--qos-line);
	border-radius: var(--qos-r-pill);
	font-family: inherit;
	font-size: var(--qos-text-xs);
	color: var(--qos-body);
	cursor: pointer;
}

.qos-lang__menu {
	position: absolute;
	top: calc(100% + 6px);
	inset-inline-end: 0;
	min-width: 160px;
	padding: 0.4rem;
	margin: 0;
	list-style: none;
	background: var(--qos-surface);
	border: 1px solid var(--qos-line);
	border-radius: var(--qos-r-md);
	box-shadow: var(--qos-sh-lg);
	display: none;
	z-index: 60;
}

.qos-lang__menu[data-open="true"] { display: block; }

.qos-lang__menu a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.7rem;
	border-radius: var(--qos-r-sm);
	font-size: var(--qos-text-sm);
	color: var(--qos-body);
}

.qos-lang__menu a:hover { background: var(--qos-surface-3); }

/* Mobile toggle */
.qos-burger {
	display: none;
	width: 44px;
	height: 44px;
	place-items: center;
	background: transparent;
	border: 1px solid var(--qos-line);
	border-radius: var(--qos-r-sm);
	cursor: pointer;
	color: var(--qos-ink);
}

@media (max-width: 992px) {
	.qos-nav { display: none; }
	.qos-burger { display: grid; }
	.qos-header__actions .qos-btn--ghost { display: none; }
}

/* Mobile drawer */
.qos-drawer {
	position: fixed;
	inset: 0;
	z-index: 900;
	background: rgba(7, 12, 22, 0.55);
	backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s var(--qos-ease), visibility 0.3s;
}

.qos-drawer[data-open="true"] { opacity: 1; visibility: visible; }

.qos-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(360px, 88vw);
	background: var(--qos-surface);
	padding: 1.5rem;
	overflow-y: auto;
	transform: translateX(var(--qos-drawer-x, 100%));
	transition: transform 0.36s var(--qos-ease);
}

[dir="rtl"] .qos-drawer__panel { --qos-drawer-x: -100%; }

.qos-drawer[data-open="true"] .qos-drawer__panel { transform: translateX(0); }

.qos-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--qos-line);
}

.qos-drawer ul {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.qos-drawer li { margin-bottom: 2px; }

.qos-drawer a {
	display: block;
	padding: 0.8rem 0.9rem;
	border-radius: var(--qos-r-sm);
	color: var(--qos-body);
	font-size: var(--qos-text-base);
}

.qos-drawer a:hover { background: var(--qos-surface-3); color: var(--qos-ink); }

/* ==========================================================================
   7. Hero (bento-driven)
   ========================================================================== */
.qos-hero {
	position: relative;
	background: var(--qos-navy-900);
	color: rgba(255, 255, 255, 0.82);
	padding-block: clamp(3rem, 2rem + 5vw, 5.5rem) clamp(3.5rem, 2rem + 6vw, 6.5rem);
	overflow: hidden;
}

.qos-hero::before {
	content: "";
	position: absolute;
	inset-block-start: -40%;
	inset-inline-end: -12%;
	width: 58%;
	aspect-ratio: 1;
	background: radial-gradient(circle at 50% 50%, rgba(212, 165, 90, 0.16) 0%, transparent 60%);
	pointer-events: none;
}

.qos-hero__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--qos-gap);
	align-items: stretch;
}

.qos-hero__lede { grid-column: span 7; }

.qos-hero h1 {
	font-size: var(--qos-text-4xl);
	font-weight: 700;
	color: #fff;
	margin-bottom: 1.1rem;
	letter-spacing: -0.03em;
}

.qos-hero h1 em {
	font-style: normal;
	color: var(--qos-gold-500);
}

.qos-hero__sub {
	font-size: var(--qos-text-lg);
	color: rgba(255, 255, 255, 0.74);
	max-width: 52ch;
	margin-bottom: 2rem;
}

.qos-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.qos-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.qos-hero__trust div { display: flex; flex-direction: column; }

.qos-hero__trust strong {
	font-family: var(--qos-font-num);
	font-size: var(--qos-text-xl);
	font-weight: 700;
	color: var(--qos-gold-500);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.qos-hero__trust span {
	font-size: var(--qos-text-xs);
	color: rgba(255, 255, 255, 0.6);
}

/* Hero price card */
.qos-hero__aside { grid-column: span 5; }

.qos-price-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--qos-r-lg);
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.qos-price-card__badge {
	align-self: flex-start;
	padding: 0.35rem 0.85rem;
	border-radius: var(--qos-r-pill);
	background: var(--qos-gold-500);
	color: var(--qos-navy-950);
	font-size: var(--qos-text-xs);
	font-weight: 600;
	margin-bottom: 1.25rem;
}

.qos-price-card__amount {
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
	margin-bottom: 0.35rem;
}

.qos-price-card__amount b {
	font-family: var(--qos-font-num);
	font-size: clamp(3rem, 2.2rem + 3vw, 4.25rem);
	font-weight: 700;
	color: #fff;
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

.qos-price-card__amount span {
	font-size: var(--qos-text-base);
	color: rgba(255, 255, 255, 0.62);
}

.qos-price-card__meta {
	font-size: var(--qos-text-sm);
	color: var(--qos-gold-400);
	margin-bottom: 1.5rem;
}

.qos-price-card ul {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	flex: 1;
}

.qos-price-card li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.4rem 0;
	font-size: var(--qos-text-sm);
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
}

.qos-price-card li::before {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 0.28em;
	border-radius: 50%;
	background: rgba(212, 165, 90, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4A55A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

@media (max-width: 1024px) {
	.qos-hero__lede,
	.qos-hero__aside { grid-column: span 12; }
}

/* ==========================================================================
   8. Pricing matrix
   ========================================================================== */
.qos-pricing-toggle {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: var(--qos-surface-3);
	border-radius: var(--qos-r-pill);
	margin-bottom: 2.5rem;
}

.qos-pricing-toggle button {
	padding: 0.6rem 1.4rem;
	background: transparent;
	border: 0;
	border-radius: var(--qos-r-pill);
	font-family: inherit;
	font-size: var(--qos-text-sm);
	font-weight: 500;
	color: var(--qos-muted);
	cursor: pointer;
	transition: all 0.24s var(--qos-ease);
}

.qos-pricing-toggle button[aria-selected="true"] {
	background: var(--qos-surface);
	color: var(--qos-ink);
	box-shadow: var(--qos-sh-sm);
}

/* Comparison table */
.qos-matrix {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--qos-surface);
	border: 1px solid var(--qos-line);
	border-radius: var(--qos-r-lg);
	overflow: hidden;
	font-size: var(--qos-text-sm);
}

.qos-matrix caption {
	caption-side: top;
	padding: 1.1rem 1.35rem;
	text-align: start;
	font-weight: 600;
	color: var(--qos-ink);
	background: var(--qos-surface-3);
	border-bottom: 1px solid var(--qos-line);
}

.qos-matrix th,
.qos-matrix td {
	padding: 1rem 1.1rem;
	text-align: center;
	border-bottom: 1px solid var(--qos-line);
}

.qos-matrix thead th {
	background: var(--qos-surface-2);
	font-weight: 600;
	font-size: var(--qos-text-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--qos-muted);
}

.qos-matrix tbody th {
	text-align: start;
	font-weight: 500;
	color: var(--qos-ink);
	background: var(--qos-surface-2);
}

.qos-matrix tbody tr:last-child th,
.qos-matrix tbody tr:last-child td { border-bottom: 0; }

.qos-matrix__price {
	display: block;
	font-family: var(--qos-font-num);
	font-size: var(--qos-text-lg);
	font-weight: 700;
	color: var(--qos-ink);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.qos-matrix__per {
	display: block;
	font-size: 0.75rem;
	color: var(--qos-muted);
	margin-top: 2px;
}

.qos-matrix td[data-anchor="true"] {
	background: rgba(212, 165, 90, 0.08);
	box-shadow: inset 0 0 0 2px var(--qos-gold-500);
}

.qos-matrix__tag {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 8px;
	border-radius: var(--qos-r-pill);
	background: var(--qos-gold-500);
	color: var(--qos-navy-950);
	font-size: 0.6875rem;
	font-weight: 600;
}

.qos-matrix-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Plan cards */
.qos-plan {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--qos-surface);
	border: 1px solid var(--qos-line);
	border-radius: var(--qos-r-lg);
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	transition: transform var(--qos-dur) var(--qos-ease), box-shadow var(--qos-dur) var(--qos-ease);
}

.qos-plan:hover { transform: translateY(-4px); box-shadow: var(--qos-sh-lg); }

.qos-plan--featured {
	background: var(--qos-navy-900);
	border-color: var(--qos-gold-500);
	box-shadow: var(--qos-sh-glow);
	color: rgba(255, 255, 255, 0.8);
}

.qos-plan--featured h3,
.qos-plan--featured .qos-plan__amount b { color: #fff; }

.qos-plan__badge {
	align-self: flex-start;
	padding: 0.3rem 0.8rem;
	border-radius: var(--qos-r-pill);
	background: var(--qos-gold-500);
	color: var(--qos-navy-950);
	font-size: var(--qos-text-xs);
	font-weight: 600;
	margin-bottom: 1rem;
}

.qos-plan--featured .qos-plan__badge { background: var(--qos-gold-500); }

.qos-plan__tagline {
	font-size: var(--qos-text-sm);
	color: var(--qos-muted);
	margin-bottom: 1.5rem;
}

.qos-plan--featured .qos-plan__tagline { color: rgba(255, 255, 255, 0.66); }

.qos-plan__amount {
	display: flex;
	align-items: baseline;
	gap: 0.3rem;
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--qos-line);
}

.qos-plan--featured .qos-plan__amount { border-color: rgba(255, 255, 255, 0.14); }

.qos-plan__amount b {
	font-family: var(--qos-font-num);
	font-size: var(--qos-text-3xl);
	font-weight: 700;
	color: var(--qos-ink);
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.qos-plan__amount span {
	font-size: var(--qos-text-sm);
	color: var(--qos-muted);
}

.qos-plan--featured .qos-plan__amount span { color: rgba(255, 255, 255, 0.6); }

.qos-plan ul {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	flex: 1;
}

.qos-plan li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.38rem 0;
	font-size: var(--qos-text-sm);
	margin: 0;
}

.qos-plan li::before {
	content: "";
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	margin-top: 0.3em;
	border-radius: 50%;
	background: rgba(20, 160, 95, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314A05F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.qos-plan--featured li::before {
	background: rgba(212, 165, 90, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4A55A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* ==========================================================================
   9. Course cards
   ========================================================================== */
.qos-course-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--qos-surface);
	border: 1px solid var(--qos-line);
	border-radius: var(--qos-r-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform var(--qos-dur) var(--qos-ease), box-shadow var(--qos-dur) var(--qos-ease);
}

.qos-course-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--qos-sh-lg);
	color: inherit;
}

.qos-course-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--qos-navy-800);
	overflow: hidden;
}

.qos-course-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--qos-ease);
}

.qos-course-card:hover .qos-course-card__media img { transform: scale(1.04); }

.qos-course-card__media--empty {
	display: grid;
	place-items: center;
	color: rgba(212, 165, 90, 0.4);
	font-size: 2.5rem;
}

.qos-chip {
	position: absolute;
	inset-block-start: 0.85rem;
	inset-inline-end: 0.85rem;
	padding: 0.3rem 0.75rem;
	border-radius: var(--qos-r-pill);
	background: rgba(7, 12, 22, 0.82);
	backdrop-filter: blur(8px);
	color: #fff;
	font-size: var(--qos-text-xs);
	font-weight: 500;
}

.qos-chip--gold { background: var(--qos-gold-500); color: var(--qos-navy-950); }
.qos-chip--free { background: var(--qos-success); color: #fff; }
.qos-chip--start { inset-inline-end: auto; inset-inline-start: 0.85rem; }

.qos-course-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.35rem;
}

.qos-course-card__body h3 {
	font-size: var(--qos-text-lg);
	margin-bottom: 0.5rem;
}

.qos-course-card__excerpt {
	font-size: var(--qos-text-sm);
	color: var(--qos-muted);
	flex: 1;
	margin-bottom: 1.1rem;
}

.qos-course-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	padding-top: 1rem;
	border-top: 1px solid var(--qos-line);
	font-size: var(--qos-text-xs);
	color: var(--qos-muted);
}

.qos-course-card__meta span { display: inline-flex; align-items: center; gap: 0.3rem; }

/* Progress bar */
.qos-progress {
	height: 6px;
	background: var(--qos-surface-3);
	border-radius: var(--qos-r-pill);
	overflow: hidden;
}

.qos-progress__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--qos-gold-600), var(--qos-gold-400));
	border-radius: inherit;
	transition: width 0.6s var(--qos-ease);
}

.qos-progress__label {
	display: flex;
	justify-content: space-between;
	font-size: var(--qos-text-xs);
	color: var(--qos-muted);
	margin-bottom: 0.4rem;
}

/* ==========================================================================
   10. Forms
   ========================================================================== */
.qos-field { margin-bottom: 1.15rem; }

.qos-field label {
	display: block;
	margin-bottom: 0.45rem;
	font-size: var(--qos-text-sm);
	font-weight: 500;
	color: var(--qos-ink);
}

.qos-field .qos-req { color: var(--qos-danger); }

.qos-input,
.qos-select,
.qos-textarea {
	width: 100%;
	padding: 0.8rem 1rem;
	font-family: inherit;
	font-size: var(--qos-text-base);
	color: var(--qos-ink);
	background: var(--qos-surface);
	border: 1px solid var(--qos-line);
	border-radius: var(--qos-r-sm);
	transition: border-color 0.2s var(--qos-ease), box-shadow 0.2s var(--qos-ease);
}

.qos-input:focus,
.qos-select:focus,
.qos-textarea:focus {
	outline: none;
	border-color: var(--qos-gold-500);
	box-shadow: 0 0 0 3px var(--qos-gold-glow);
}

.qos-input[aria-invalid="true"] { border-color: var(--qos-danger); }

.qos-textarea { min-height: 130px; resize: vertical; }

.qos-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7689' stroke-width='2.2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 0.9rem center;
	background-size: 16px;
	padding-inline-end: 1rem;
	padding-inline-start: 2.4rem;
}

[dir="ltr"] .qos-select { background-position: right 0.9rem center; }

.qos-phone-row {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 0.6rem;
}

.qos-hint {
	display: block;
	margin-top: 0.4rem;
	font-size: var(--qos-text-xs);
	color: var(--qos-muted);
}

.qos-check {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: var(--qos-text-sm);
	color: var(--qos-body);
	cursor: pointer;
}

.qos-check input { margin-top: 0.3em; flex-shrink: 0; width: 17px; height: 17px; accent-color: var(--qos-gold-600); }

/* Alerts */
.qos-alert {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 0.95rem 1.15rem;
	border-radius: var(--qos-r-sm);
	font-size: var(--qos-text-sm);
	margin-bottom: 1.35rem;
	border-inline-start: 3px solid;
}

.qos-alert ul { margin: 0.35rem 0 0; padding-inline-start: 1.2rem; }
.qos-alert li { margin-bottom: 0.15rem; }

.qos-alert--error   { background: #FDF2F2; color: #8F2323; border-color: var(--qos-danger); }
.qos-alert--success { background: #EFF9F4; color: #0B6B3E; border-color: var(--qos-success); }
.qos-alert--info    { background: #EFF4FD; color: #1B4E9B; border-color: var(--qos-info); }
.qos-alert--warning { background: #FDF6EC; color: #8A5A0B; border-color: var(--qos-warning); }

/* ==========================================================================
   11. Auth pages
   ========================================================================== */
.qos-auth {
	min-height: 78vh;
	display: grid;
	place-items: center;
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 165, 90, 0.07), transparent 70%),
		var(--qos-surface-2);
}

.qos-auth__card {
	width: min(520px, 100%);
	background: var(--qos-surface);
	border: 1px solid var(--qos-line);
	border-radius: var(--qos-r-xl);
	padding: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
	box-shadow: var(--qos-sh-lg);
}

.qos-auth__head {
	text-align: center;
	margin-bottom: 1.85rem;
}

.qos-auth__mark {
	width: 62px;
	height: 62px;
	display: grid;
	place-items: center;
	margin: 0 auto 1.1rem;
	border-radius: var(--qos-r-md);
	background: var(--qos-navy-900);
	color: var(--qos-gold-500);
	font-size: 1.5rem;
}

.qos-auth__head h1 { font-size: var(--qos-text-2xl); margin-bottom: 0.35rem; }
.qos-auth__head p { font-size: var(--qos-text-sm); color: var(--qos-muted); margin: 0; }

.qos-auth__foot {
	text-align: center;
	margin-top: 1.6rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--qos-line);
	font-size: var(--qos-text-sm);
	color: var(--qos-muted);
}

.qos-auth__foot a { font-weight: 500; }

.qos-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
	font-size: var(--qos-text-sm);
}

/* Role picker */
.qos-role {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.qos-role label { cursor: pointer; margin: 0; }
.qos-role input { position: absolute; opacity: 0; pointer-events: none; }

.qos-role__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: 1.15rem 0.85rem;
	border: 1.5px solid var(--qos-line);
	border-radius: var(--qos-r-md);
	text-align: center;
	transition: all 0.24s var(--qos-ease);
}

.qos-role__box i { font-size: 1.6rem; color: var(--qos-muted); }
.qos-role__box b { font-size: var(--qos-text-sm); font-weight: 600; color: var(--qos-ink); }
.qos-role__box small { font-size: var(--qos-text-xs); color: var(--qos-muted); }

.qos-role input:checked + .qos-role__box {
	border-color: var(--qos-gold-500);
	background: rgba(212, 165, 90, 0.06);
	box-shadow: 0 0 0 3px var(--qos-gold-glow);
}

.qos-role input:checked + .qos-role__box i { color: var(--qos-gold-600); }
.qos-role input:focus-visible + .qos-role__box { outline: 2px solid var(--qos-gold-500); outline-offset: 2px; }

/* Password reveal */
.qos-pwd { position: relative; }

.qos-pwd__toggle {
	position: absolute;
	inset-inline-end: 0.6rem;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--qos-r-sm);
	color: var(--qos-muted);
	cursor: pointer;
}

.qos-pwd__toggle:hover { background: var(--qos-surface-3); color: var(--qos-ink); }
.qos-pwd .qos-input { padding-inline-end: 2.9rem; }

/* ==========================================================================
   12. Portal / dashboard
   ========================================================================== */
.qos-portal {
	display: grid;
	grid-template-columns: 268px 1fr;
	gap: var(--qos-gap);
	align-items: start;
	padding-block: 2rem 4rem;
}

.qos-portal__side {
	position: sticky;
	top: 96px;
	background: var(--qos-surface);
	border: 1px solid var(--qos-line);
	border-radius: var(--qos-r-lg);
	padding: 1.35rem;
}

.qos-portal__user {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding-bottom: 1.15rem;
	margin-bottom: 1.15rem;
	border-bottom: 1px solid var(--qos-line);
}

.qos-avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--qos-navy-900);
	color: var(--qos-gold-500);
	display: grid;
	place-items: center;
	font-weight: 600;
	flex-shrink: 0;
}

.qos-portal__user b { display: block; font-size: var(--qos-text-sm); color: var(--qos-ink); }
.qos-portal__user small { font-size: var(--qos-text-xs); color: var(--qos-muted); }

.qos-portal__nav { list-style: none; margin: 0; padding: 0; }
.qos-portal__nav li { margin-bottom: 2px; }

.qos-portal__nav a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.68rem 0.85rem;
	border-radius: var(--qos-r-sm);
	font-size: var(--qos-text-sm);
	color: var(--qos-body);
	transition: all 0.2s var(--qos-ease);
}

.qos-portal__nav a:hover { background: var(--qos-surface-3); color: var(--qos-ink); }

.qos-portal__nav a[aria-current="page"] {
	background: var(--qos-navy-900);
	color: #fff;
}

.qos-portal__nav i { width: 18px; text-align: center; opacity: 0.8; }

.qos-badge-count {
	margin-inline-start: auto;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	display: grid;
	place-items: center;
	border-radius: var(--qos-r-pill);
	background: var(--qos-danger);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
}

@media (max-width: 900px) {
	.qos-portal { grid-template-columns: 1fr; }
	.qos-portal__side { position: static; }
	.qos-portal__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 4px; }
}

/* ==========================================================================
   13. Lesson player
   ========================================================================== */
.qos-player {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--qos-navy-950);
	border-radius: var(--qos-r-lg);
	overflow: hidden;
}

.qos-player iframe,
.qos-player video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.qos-doc-frame {
	width: 100%;
	height: min(75vh, 760px);
	border: 1px solid var(--qos-line);
	border-radius: var(--qos-r-md);
	background: var(--qos-surface-3);
	overflow: hidden;
}

.qos-doc-frame iframe { width: 100%; height: 100%; border: 0; }

.qos-lesson-list { list-style: none; margin: 0; padding: 0; }

.qos-lesson-list li { margin-bottom: 3px; }

.qos-lesson-list a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.7rem 0.85rem;
	border-radius: var(--qos-r-sm);
	color: var(--qos-body);
	font-size: var(--qos-text-sm);
	transition: background-color 0.2s var(--qos-ease);
}

.qos-lesson-list a:hover { background: var(--qos-surface-3); }

.qos-lesson-list a[aria-current="true"] {
	background: rgba(212, 165, 90, 0.1);
	color: var(--qos-ink);
	font-weight: 500;
}

.qos-lesson-num {
	width: 27px;
	height: 27px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--qos-surface-3);
	color: var(--qos-muted);
	font-size: 0.75rem;
	font-weight: 600;
}

.qos-lesson-num--done { background: var(--qos-success); color: #fff; }
.qos-lesson-num--current { background: var(--qos-navy-900); color: var(--qos-gold-500); }

.qos-lesson-lock { margin-inline-start: auto; color: var(--qos-muted); font-size: 0.8rem; }

/* ==========================================================================
   14. Footer
   ========================================================================== */
.qos-footer {
	background: var(--qos-navy-950);
	color: rgba(255, 255, 255, 0.66);
	padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 0;
}

.qos-footer h4 {
	color: #fff;
	font-size: var(--qos-text-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 1.15rem;
}

.qos-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr);
	gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
	padding-bottom: 3rem;
}

.qos-footer ul { list-style: none; margin: 0; padding: 0; }
.qos-footer li { margin-bottom: 0.6rem; }

.qos-footer a { color: rgba(255, 255, 255, 0.66); font-size: var(--qos-text-sm); }
.qos-footer a:hover { color: var(--qos-gold-500); }

.qos-footer__about p { font-size: var(--qos-text-sm); max-width: 42ch; }

.qos-social {
	display: flex;
	gap: 0.6rem;
	margin-top: 1.35rem;
}

.qos-social a {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: var(--qos-r-sm);
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.75);
	transition: all 0.22s var(--qos-ease);
}

.qos-social a:hover {
	background: var(--qos-gold-500);
	color: var(--qos-navy-950);
	transform: translateY(-2px);
}

.qos-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	font-size: var(--qos-text-xs);
}

.qos-footer__legal nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.35rem;
}

@media (max-width: 900px) {
	.qos-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
	.qos-footer__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   15. Breadcrumbs
   ========================================================================== */
.qos-breadcrumbs {
	padding-block: 1rem;
	font-size: var(--qos-text-xs);
}

.qos-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.qos-breadcrumbs li { margin: 0; display: flex; align-items: center; gap: 0.4rem; }

.qos-breadcrumbs li:not(:last-child)::after {
	content: "›";
	color: var(--qos-muted);
	opacity: 0.6;
}

[dir="rtl"] .qos-breadcrumbs li:not(:last-child)::after { content: "‹"; }

.qos-breadcrumbs a { color: var(--qos-muted); }
.qos-breadcrumbs a:hover { color: var(--qos-gold-600); }
.qos-breadcrumbs [aria-current] { color: var(--qos-ink); font-weight: 500; }

/* ==========================================================================
   16. FAQ accordion
   ========================================================================== */
.qos-faq { display: grid; gap: 0.75rem; }

.qos-faq details {
	background: var(--qos-surface);
	border: 1px solid var(--qos-line);
	border-radius: var(--qos-r-md);
	overflow: hidden;
	transition: border-color 0.24s var(--qos-ease);
}

.qos-faq details[open] { border-color: rgba(212, 165, 90, 0.45); }

.qos-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.35rem;
	font-weight: 500;
	color: var(--qos-ink);
	cursor: pointer;
	list-style: none;
}

.qos-faq summary::-webkit-details-marker { display: none; }

.qos-faq summary::after {
	content: "+";
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--qos-surface-3);
	color: var(--qos-gold-600);
	font-size: 1.1rem;
	line-height: 1;
	transition: transform 0.28s var(--qos-ease);
}

.qos-faq details[open] summary::after { content: "−"; transform: rotate(180deg); }

.qos-faq__body {
	padding: 0 1.35rem 1.25rem;
	font-size: var(--qos-text-sm);
	color: var(--qos-body);
}

.qos-faq__body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   17. Tables (admin-ish views in portal)
   ========================================================================== */
.qos-table-wrap {
	overflow-x: auto;
	background: var(--qos-surface);
	border: 1px solid var(--qos-line);
	border-radius: var(--qos-r-lg);
}

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

.qos-table th,
.qos-table td {
	padding: 0.9rem 1.1rem;
	text-align: start;
	border-bottom: 1px solid var(--qos-line);
	white-space: nowrap;
}

.qos-table thead th {
	background: var(--qos-surface-2);
	font-weight: 600;
	font-size: var(--qos-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--qos-muted);
}

.qos-table tbody tr:last-child td { border-bottom: 0; }
.qos-table tbody tr:hover { background: var(--qos-surface-2); }

.qos-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.22rem 0.65rem;
	border-radius: var(--qos-r-pill);
	font-size: var(--qos-text-xs);
	font-weight: 500;
}

.qos-tag--paid    { background: #EAF7F0; color: #0B6B3E; }
.qos-tag--pending { background: #FDF6EC; color: #8A5A0B; }
.qos-tag--overdue { background: #FDF2F2; color: #8F2323; }
.qos-tag--neutral { background: var(--qos-surface-3); color: var(--qos-muted); }

/* ==========================================================================
   18. Utilities
   ========================================================================== */
.qos-flex { display: flex; }
.qos-wrap { flex-wrap: wrap; }
.qos-items-center { align-items: center; }
.qos-justify-between { justify-content: space-between; }
.qos-gap-sm { gap: 0.5rem; }
.qos-gap-md { gap: 1rem; }
.qos-gap-lg { gap: 1.5rem; }
.qos-text-center { text-align: center; }
.qos-mt-0 { margin-top: 0; }
.qos-mb-0 { margin-bottom: 0; }
.qos-mb-sm { margin-bottom: 0.5rem; }
.qos-mb-md { margin-bottom: 1rem; }
.qos-mb-lg { margin-bottom: 2rem; }
.qos-muted { color: var(--qos-muted); }
.qos-small { font-size: var(--qos-text-sm); }
.qos-xs { font-size: var(--qos-text-xs); }
.qos-num { font-family: var(--qos-font-num); font-variant-numeric: tabular-nums; }
.qos-ltr { direction: ltr; unicode-bidi: isolate; }

/* Empty state */
.qos-empty {
	text-align: center;
	padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 1.5rem;
	background: var(--qos-surface);
	border: 1px dashed var(--qos-line);
	border-radius: var(--qos-r-lg);
}

.qos-empty__icon {
	font-size: 2.75rem;
	color: var(--qos-line);
	margin-bottom: 1rem;
}

.qos-empty h3 { margin-bottom: 0.4rem; }
.qos-empty p { color: var(--qos-muted); font-size: var(--qos-text-sm); margin-bottom: 1.5rem; }

/* WordPress core alignment classes */
.alignleft { float: left; margin-inline-end: 1.5rem; margin-bottom: 1rem; }
.alignright { float: right; margin-inline-start: 1.5rem; margin-bottom: 1rem; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide { width: min(1100px, 100%); margin-inline: auto; }
.alignfull { width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-block-image figcaption {
	font-size: var(--qos-text-xs);
	color: var(--qos-muted);
	text-align: center;
	margin-top: 0.6rem;
}
.sticky, .gallery-caption, .bypostauthor { display: block; }

blockquote {
	margin: 2rem 0;
	padding: 1.25rem 1.6rem;
	border-inline-start: 3px solid var(--qos-gold-500);
	background: var(--qos-surface-3);
	border-radius: 0 var(--qos-r-md) var(--qos-r-md) 0;
	font-size: var(--qos-text-lg);
	color: var(--qos-ink);
}

[dir="ltr"] blockquote { border-radius: var(--qos-r-md) 0 0 var(--qos-r-md); }

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

code, kbd, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
}

code {
	padding: 0.15em 0.45em;
	background: var(--qos-surface-3);
	border-radius: 4px;
	color: var(--qos-navy-800);
}

pre {
	padding: 1.15rem 1.35rem;
	background: var(--qos-navy-950);
	color: #E6EAF2;
	border-radius: var(--qos-r-md);
	overflow-x: auto;
}

pre code { background: none; color: inherit; padding: 0; }

/* ==========================================================================
   Quiet section + prose entry + feature list  (additions)
   ========================================================================== */
.qos-section--quiet {
	background: var(--qos-surface-2);
	border-block: 1px solid var(--qos-line);
}

/* Long-form prose coming out of the editor */
.qos-entry {
	color: var(--qos-body);
	font-size: var(--qos-text-base);
	line-height: 1.85;
}
.qos-entry > *:first-child { margin-top: 0; }
.qos-entry > *:last-child { margin-bottom: 0; }
.qos-entry p { margin-bottom: 1.1em; }
.qos-entry h2 {
	font-size: var(--qos-text-xl);
	margin: 2em 0 0.6em;
}
.qos-entry h3 {
	font-size: var(--qos-text-lg);
	margin: 1.7em 0 0.5em;
}
.qos-entry ul,
.qos-entry ol { margin: 0 0 1.2em; padding-inline-start: 1.35em; }
.qos-entry li { margin-bottom: 0.45em; }
.qos-entry a {
	color: var(--qos-gold-600);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.qos-entry a:hover { color: var(--qos-navy-800); }
.qos-entry blockquote {
	margin: 1.6em 0;
	padding: 1.15rem 1.4rem;
	background: var(--qos-surface-2);
	border-radius: var(--qos-r-md);
	border-inline-start: 3px solid var(--qos-gold-500);
	color: var(--qos-ink);
}
.qos-entry img { border-radius: var(--qos-r-md); }
.qos-entry table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.4em;
	font-size: var(--qos-text-sm);
}
.qos-entry th,
.qos-entry td {
	padding: 0.7rem 0.85rem;
	border-bottom: 1px solid var(--qos-line);
	text-align: start;
}
.qos-entry th { color: var(--qos-ink); font-weight: 600; }

/* Feature / benefit list with tick markers */
.qos-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}
.qos-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: var(--qos-text-sm);
	color: var(--qos-body);
	line-height: 1.6;
}
.qos-cell--navy .qos-list li,
.qos-section--navy .qos-list li { color: rgba(255, 255, 255, 0.78); }

/* ==========================================================================
   Widgets + inline SVG icons  (additions)
   ========================================================================== */
.qos-widget {
	margin-bottom: var(--qos-gap);
}
.qos-widget:last-child { margin-bottom: 0; }

.qos-widget__title {
	margin: 0 0 1rem;
	font-size: var(--qos-text-sm);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--qos-muted);
	font-weight: 600;
}

.qos-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
}
.qos-widget li {
	font-size: var(--qos-text-sm);
	line-height: 1.55;
}
.qos-widget li a {
	color: var(--qos-body);
	text-decoration: none;
}
.qos-widget li a:hover { color: var(--qos-gold-600); }

.qos-widget select,
.qos-widget input[type="search"],
.qos-widget input[type="text"] {
	width: 100%;
	padding: 0.6rem 0.75rem;
	font: inherit;
	font-size: var(--qos-text-sm);
	color: var(--qos-ink);
	background: var(--qos-surface);
	border: 1px solid var(--qos-line);
	border-radius: var(--qos-r-sm);
}

/* Inline SVG icon: inherits the current text colour and sits on the text baseline */
.qos-icon {
	display: inline-block;
	vertical-align: -0.125em;
	flex: none;
}

/* ==========================================================================
   Small phones — 480px and below (iPhone SE, compact Androids)
   ========================================================================== */
@media (max-width: 480px) {
	:root {
		/* Tighten the fluid scale so long Arabic headlines cannot overflow 320px */
		--qos-text-3xl: clamp(1.75rem, 1.35rem + 2.6vw, 2.25rem);
		--qos-text-4xl: clamp(2rem, 1.5rem + 3.2vw, 2.75rem);
		--qos-text-2xl: clamp(1.4rem, 1.15rem + 1.6vw, 1.75rem);
		--qos-gap: 0.75rem;
		--qos-shell-pad: 1rem;
		--qos-section-y: clamp(2.5rem, 1.5rem + 5vw, 3.5rem);
	}

	/* Every bento tile is full width */
	.qos-bento > * { grid-column: span 12 !important; }

	/* Cells breathe less, so content keeps its room */
	.qos-cell { padding: 1.15rem 1.15rem; }

	/* Buttons: full width, and allow the label to wrap instead of being clipped */
	.qos-btn {
		width: 100%;
		white-space: normal;
		padding: 0.8rem 1.1rem;
		text-align: center;
	}
	.qos-btn--sm { width: auto; }

	/* Any inline flex row of buttons stacks */
	.qos-hero .qos-flex,
	.qos-cell .qos-flex { flex-wrap: wrap; }

	/* Sticky sidebars stop sticking — they are stacked now */
	[style*="position:sticky"] { position: static !important; }

	/* Language menu and dropdowns stay inside the viewport */
	.qos-nav .sub-menu,
	.qos-lang__menu {
		min-width: min(210px, calc(100vw - 2rem));
		max-width: calc(100vw - 2rem);
	}

	/* Lesson prev/next tiles drop their 200px floor */
	.qos-cell[style*="min-width:200px"] { min-width: 0 !important; }

	/* Drawer takes almost the whole screen */
	.qos-drawer__panel { width: min(340px, 92vw); }

	/* The pricing matrix keeps its horizontal scroll but loses side padding */
	.qos-matrix th,
	.qos-matrix td { padding: 0.7rem 0.6rem; }
	.qos-matrix caption { padding: 0.85rem 1rem; }

	/* Pricing tab strip scrolls rather than wrapping awkwardly */
	.qos-pricing-toggle {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Document viewer gets a taller share of a short screen */
	.qos-doc-frame { height: min(65vh, 520px); }
}

/* Very small / older devices — 360px and below */
@media (max-width: 360px) {
	:root {
		--qos-text-3xl: clamp(1.55rem, 1.25rem + 2vw, 1.9rem);
		--qos-shell-pad: 0.85rem;
	}
	.qos-cell { padding: 1rem; }
	.qos-matrix th,
	.qos-matrix td { padding: 0.6rem 0.45rem; font-size: 0.8125rem; }
}

/* Landscape phones — keep a short viewport usable */
@media (max-height: 480px) and (orientation: landscape) {
	.qos-hero { padding-block: 2rem 2.5rem; }
	.qos-drawer__panel { padding: 1rem; }
	.qos-doc-frame { height: 80vh; }
}

/* Long unbroken strings (URLs, e-mails, references) never widen the layout */
.qos-cell,
.qos-entry,
.qos-table td,
.qos-matrix td {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Media is never wider than its container */
img,
svg,
video,
iframe,
table {
	max-width: 100%;
}

/* ==========================================================================
   Touch targets — WCAG 2.5.8 / Google "tap targets are sized appropriately"
   Applied on any pointer that is not a precise mouse, so desktop keeps its
   compact chrome while every touch device gets a 44px-tall hit area.
   ========================================================================== */
@media (hover: none), (pointer: coarse) {
	/* Small buttons and header CTAs stop being 35px tall */
	.qos-btn,
	.qos-btn--sm {
		min-height: 44px;
	}

	/* Pricing duration tabs */
	.qos-pricing-toggle button {
		min-height: 44px;
		padding-inline: 1.1rem;
	}

	/* Footer / drawer / widget link lists: pad the anchor itself, not the li,
	   so the whole row is tappable rather than just the glyph height. */
	.qos-footer a,
	.qos-widget li a,
	.qos-drawer a,
	.qos-nav .sub-menu a,
	.qos-lang__menu a,
	.qos-breadcrumbs a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Footer columns keep their rhythm without the extra padding stacking up */
	.qos-footer ul { gap: 0; }
	.qos-footer li { margin-bottom: 0; }

	/* Legal row links sit inline, so give them horizontal breathing room too */
	.qos-footer__legal a { padding-inline: 0.35rem; }

	/* Icon-only controls */
	.qos-burger,
	.qos-lang__btn {
		min-width: 44px;
		min-height: 44px;
	}

	/* Table action links inside the portal */
	.qos-table a,
	.qos-lesson-list a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* Checkbox / radio rows in forms (terms, payment method) */
	.qos-check-row,
	label:has(> input[type="checkbox"]),
	label:has(> input[type="radio"]) {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
	input[type="checkbox"],
	input[type="radio"] {
		min-width: 20px;
		min-height: 20px;
	}
}

/* ==========================================================================
   Floating WhatsApp button
   Sits opposite the reading direction (left in RTL, right in LTR), stays out
   of the way of iOS home indicators, and collapses to a circle on phones.
   ========================================================================== */
.qos-wa-float {
	position: fixed;
	z-index: 880;
	bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
	display: flex;
	align-items: flex-start;
	gap: 0.3rem;

	/* Default (LTR): bottom-right, the corner users reach for. */
	right: calc(1.25rem + env(safe-area-inset-right, 0px));
	left: auto;
	flex-direction: row-reverse;
}

/* RTL mirrors the whole layout, so the button moves to the bottom-left.
   Physical left/right is used deliberately here: inset-inline-start would
   resolve to the RIGHT edge under RTL and the button would never move. */
[dir="rtl"] .qos-wa-float {
	right: auto;
	left: calc(1.25rem + env(safe-area-inset-left, 0px));
	flex-direction: row;
}

.qos-wa-float[hidden] { display: none; }

/* Optional "appear after N seconds" mode. The button is rendered but held
   back visually; JS removes this class on scroll or when the delay elapses.
   Without JS the class is simply never removed — and because the site owner
   opted into a delay, staying hidden is the behaviour they asked for. */
.qos-wa-float--deferred {
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.32s var(--qos-ease), visibility 0.32s,
		transform 0.32s var(--qos-ease);
}

.qos-wa-float__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.35rem;
	border-radius: var(--qos-r-pill);
	background: #25D366;
	color: #06371C;
	font-family: inherit;
	font-size: var(--qos-text-sm);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 10px 28px rgba(37, 211, 102, 0.34), 0 2px 6px rgba(11, 17, 31, 0.16);
	transition: transform 0.24s var(--qos-ease), box-shadow 0.24s var(--qos-ease),
		background-color 0.24s var(--qos-ease);
}

.qos-wa-float__btn:hover,
.qos-wa-float__btn:focus-visible {
	background: #1FBE5A;
	transform: translateY(-2px);
	box-shadow: 0 16px 36px rgba(37, 211, 102, 0.42), 0 3px 8px rgba(11, 17, 31, 0.18);
	color: #06371C;
}

.qos-wa-float__btn:focus-visible {
	outline: 3px solid var(--qos-gold-500);
	outline-offset: 3px;
}

.qos-wa-float__icon {
	display: inline-flex;
	flex: none;
}
.qos-wa-float__icon svg { fill: currentColor; stroke: none; }

.qos-wa-float__text { white-space: nowrap; }

/* Soft attention pulse behind the pill — decorative only. */
.qos-wa-float__pulse {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #25D366;
	opacity: 0.45;
	animation: qos-wa-pulse 2.8s var(--qos-ease) infinite;
	pointer-events: none;
	z-index: -1;
}

@keyframes qos-wa-pulse {
	0%   { transform: scale(1);    opacity: 0.4; }
	70%  { transform: scale(1.16); opacity: 0; }
	100% { transform: scale(1.16); opacity: 0; }
}

/* Dismiss control — small, quiet, only meaningful once the button is shown. */
.qos-wa-float__close {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 1px solid var(--qos-line);
	border-radius: 50%;
	background: var(--qos-surface);
	color: var(--qos-muted);
	cursor: pointer;
	opacity: 0;
	transform: scale(0.7);
	transition: opacity 0.2s var(--qos-ease), transform 0.2s var(--qos-ease);
}

.qos-wa-float:hover .qos-wa-float__close,
.qos-wa-float:focus-within .qos-wa-float__close {
	opacity: 1;
	transform: scale(1);
}

.qos-wa-float__close:hover {
	color: var(--qos-ink);
	border-color: var(--qos-muted);
}

/* Phones: collapse to a circular icon so the pill never crowds the screen. */
@media (max-width: 640px) {
	.qos-wa-float {
		bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
		right: calc(1rem + env(safe-area-inset-right, 0px));
	}
	[dir="rtl"] .qos-wa-float {
		right: auto;
		left: calc(1rem + env(safe-area-inset-left, 0px));
	}
	.qos-wa-float__btn {
		width: 56px;
		height: 56px;
		padding: 0;
		justify-content: center;
		border-radius: 50%;
	}
	.qos-wa-float__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		white-space: nowrap;
	}
	/* Always visible on touch: there is no hover to reveal it. */
	.qos-wa-float__close { opacity: 1; transform: scale(1); }
}

/* Respect a reduced-motion preference: keep the button, drop the pulse. */
@media (prefers-reduced-motion: reduce) {
	.qos-wa-float__pulse { animation: none; opacity: 0; }
	.qos-wa-float__btn:hover { transform: none; }
}

@media print {
	.qos-wa-float { display: none !important; }
}

/* ==========================================================================
   Lesson log — timeline, certificates, teacher form
   ========================================================================== */

/* --- Teacher form grid ------------------------------------------------- */
.qos-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 0 var(--qos-gap);
}
.qos-form-grid .qos-field--wide { grid-column: 1 / -1; }

/* The teacher's record-a-lesson form */
.qos-session-form { margin-top: 1.25rem; }
.qos-session-form .qos-field { margin-bottom: 1rem; }

/* Inline text-style button (delete inside a table row) */
.qos-linkbtn {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--qos-text-sm);
	color: var(--qos-muted);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.qos-linkbtn:hover { color: var(--qos-ink); }
.qos-linkbtn--danger:hover { color: var(--qos-danger); }

.qos-nowrap { white-space: nowrap; }

/* --- Student timeline --------------------------------------------------- */
.qos-timeline {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	position: relative;
}

/* The spine runs down the start edge, so it mirrors correctly in RTL. */
.qos-timeline::before {
	content: "";
	position: absolute;
	inset-block: 0.75rem 1.5rem;
	inset-inline-start: 7px;
	width: 2px;
	background: linear-gradient(var(--qos-gold-500), var(--qos-line));
}

.qos-timeline__item {
	position: relative;
	padding-inline-start: 2.25rem;
	margin-bottom: var(--qos-gap);
}
.qos-timeline__item:last-child { margin-bottom: 0; }

.qos-timeline__dot {
	position: absolute;
	inset-inline-start: 0;
	top: 1.35rem;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--qos-surface);
	border: 3px solid var(--qos-gold-500);
	box-shadow: 0 0 0 4px var(--qos-surface-2);
}
.qos-timeline__item--absent .qos-timeline__dot { border-color: var(--qos-danger); }
.qos-timeline__item--excused .qos-timeline__dot,
.qos-timeline__item--cancelled .qos-timeline__dot { border-color: var(--qos-muted); }
.qos-timeline__item--late .qos-timeline__dot { border-color: var(--qos-warning); }

.qos-timeline__card {
	background: var(--qos-surface);
	border: 1px solid var(--qos-line);
	border-radius: var(--qos-r-lg);
	padding: 1.25rem 1.35rem;
	box-shadow: var(--qos-sh-sm);
}

.qos-timeline__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 0.6rem;
}
.qos-timeline__head time {
	font-size: var(--qos-text-sm);
	font-weight: 600;
	color: var(--qos-ink);
}

.qos-timeline__card h3 {
	font-size: var(--qos-text-base);
	margin: 0 0 0.4rem;
}

.qos-timeline__range {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--qos-text-sm);
	color: var(--qos-gold-600);
	margin: 0 0 0.85rem;
}

.qos-timeline__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 0.85rem;
	margin-bottom: 0.85rem;
}

.qos-timeline__label {
	display: block;
	font-size: var(--qos-text-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--qos-muted);
	margin-bottom: 0.2rem;
}
.qos-timeline__grid p,
.qos-timeline__homework p {
	margin: 0;
	font-size: var(--qos-text-sm);
	line-height: 1.65;
	white-space: pre-line;
}

.qos-timeline__homework {
	padding: 0.85rem 1rem;
	background: rgba(212, 165, 90, 0.09);
	border-radius: var(--qos-r-sm);
	border-inline-start: 3px solid var(--qos-gold-500);
	margin-bottom: 0.85rem;
}

.qos-timeline__notes {
	font-size: var(--qos-text-sm);
	color: var(--qos-muted);
	font-style: italic;
	margin: 0 0 0.85rem;
	white-space: pre-line;
}

.qos-timeline__foot {
	display: flex;
	align-items: center;
	gap: 1.15rem;
	flex-wrap: wrap;
	padding-top: 0.75rem;
	border-top: 1px solid var(--qos-line);
	font-size: var(--qos-text-xs);
	color: var(--qos-muted);
}
.qos-timeline__foot span {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}
.qos-timeline__rating { color: var(--qos-gold-600); letter-spacing: 0.08em; }

/* Attendance chips */
.qos-chip--attended  { background: rgba(20, 160, 95, 0.12);  color: #0E7A47; }
.qos-chip--late      { background: rgba(217, 138, 22, 0.14); color: #96600D; }
.qos-chip--excused   { background: var(--qos-surface-3);     color: var(--qos-muted); }
.qos-chip--absent    { background: rgba(214, 69, 69, 0.12);  color: #A82F2F; }
.qos-chip--cancelled { background: var(--qos-surface-3);     color: var(--qos-muted); }

/* --- Certificate card (in the student's dashboard) ---------------------- */
.qos-cert-card {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1.35rem 1.35rem;
	background:
		radial-gradient(circle at 100% 0, rgba(212, 165, 90, 0.14), transparent 55%),
		var(--qos-surface);
	border: 1px solid var(--qos-gold-500);
	border-radius: var(--qos-r-lg);
	box-shadow: var(--qos-sh-sm);
}

.qos-cert-card__seal {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--qos-gold-500);
	color: var(--qos-navy-950);
	margin-bottom: 1rem;
}

.qos-cert-card h3 {
	font-size: var(--qos-text-base);
	margin: 0 0 0.3rem;
}
.qos-cert-card__level {
	font-size: var(--qos-text-sm);
	color: var(--qos-gold-600);
	margin: 0 0 1rem;
}

.qos-cert-card__meta {
	margin: 0 0 1.25rem;
	display: grid;
	gap: 0.4rem;
	font-size: var(--qos-text-xs);
}
.qos-cert-card__meta > div {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
}
.qos-cert-card__meta dt { color: var(--qos-muted); margin: 0; }
.qos-cert-card__meta dd { margin: 0; font-weight: 600; color: var(--qos-ink); }

.qos-cert-card .qos-btn { margin-top: auto; }

/* --- Standalone certificate page ---------------------------------------- */
.qos-cert-page {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 0.5rem + 2vw, 3rem);
	background: var(--qos-surface-2);
}

.qos-cert-sheet { width: min(860px, 100%); }

.qos-cert-sheet__border {
	position: relative;
	padding: clamp(2rem, 1rem + 5vw, 4.5rem) clamp(1.5rem, 1rem + 4vw, 4rem);
	text-align: center;
	background:
		radial-gradient(circle at 0 0, rgba(212, 165, 90, 0.1), transparent 45%),
		radial-gradient(circle at 100% 100%, rgba(212, 165, 90, 0.1), transparent 45%),
		var(--qos-surface);
	border: 2px solid var(--qos-gold-500);
	border-radius: var(--qos-r-lg);
	box-shadow: var(--qos-sh-lg);
}
/* Inner hairline frame */
.qos-cert-sheet__border::after {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px solid rgba(212, 165, 90, 0.42);
	border-radius: calc(var(--qos-r-lg) - 6px);
	pointer-events: none;
}

.qos-cert-sheet__school {
	display: block;
	font-size: var(--qos-text-sm);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--qos-gold-600);
	font-weight: 600;
}
.qos-cert-sheet__rule {
	display: block;
	width: 64px;
	height: 2px;
	margin: 1rem auto;
	background: var(--qos-gold-500);
}
.qos-cert-sheet__head h1 {
	font-size: var(--qos-text-2xl);
	margin: 0 0 2rem;
	color: var(--qos-navy-900);
}

.qos-cert-sheet__intro {
	font-size: var(--qos-text-sm);
	color: var(--qos-muted);
	margin: 0;
}
.qos-cert-sheet__name {
	font-size: var(--qos-text-2xl);
	font-weight: 700;
	color: var(--qos-navy-900);
	margin: 0.5rem 0 1.35rem;
}
.qos-cert-sheet__title {
	font-size: var(--qos-text-xl);
	font-weight: 600;
	color: var(--qos-gold-600);
	margin: 0.5rem 0 0.35rem;
}
.qos-cert-sheet__level {
	font-size: var(--qos-text-sm);
	color: var(--qos-body);
	margin: 0;
}
.qos-cert-sheet__note {
	max-width: 54ch;
	margin: 1.35rem auto 0;
	font-size: var(--qos-text-sm);
	color: var(--qos-body);
	line-height: 1.75;
}

.qos-cert-sheet__meta {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem;
	margin: 2.5rem 0 0;
	padding-top: 1.75rem;
	border-top: 1px solid var(--qos-line);
}
.qos-cert-sheet__meta dt {
	font-size: var(--qos-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--qos-muted);
	margin: 0 0 0.2rem;
}
.qos-cert-sheet__meta dd {
	margin: 0;
	font-size: var(--qos-text-sm);
	font-weight: 600;
	color: var(--qos-ink);
}

.qos-cert-sheet__foot {
	margin-top: 1.75rem;
	font-size: var(--qos-text-xs);
	color: var(--qos-muted);
}
.qos-cert-sheet__foot p { margin: 0; }

.qos-cert-sheet__actions {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}

.qos-cert-miss {
	max-width: 44ch;
	margin: 0 auto;
	text-align: center;
	color: var(--qos-muted);
}

/* The certificate should print as the page, without the buttons. */
@media print {
	.qos-cert-page { background: #fff; padding: 0; display: block; }
	.qos-cert-sheet { width: 100%; }
	.qos-cert-sheet__actions { display: none !important; }
	.qos-cert-sheet__border { box-shadow: none; border-color: #b98a42; }
}

@media (max-width: 640px) {
	.qos-timeline__item { padding-inline-start: 1.75rem; }
	.qos-timeline__card { padding: 1.1rem; }
	.qos-cert-sheet__meta { gap: 1rem 1.5rem; }
}

/* Print */
@media print {
	.qos-header, .qos-footer, .qos-drawer, .qos-btn { display: none !important; }
	body { background: #fff; color: #000; }
	.qos-cell { border: 1px solid #ccc; box-shadow: none; }
}