/* Shared responsive refinements for public pages and account dashboards. */
:root {
	--dashboard-gap: clamp(12px, 1.6vw, 18px);
	--amber: #B89755;
	--amber-bg: #F7F3EA;
	--amber-ink: #695633;
	--amber-line: #E8DFC9;
}

.wrap,
main,
.pagehead,
.dcard,
.kpi,
.form-card,
.auth,
.pricing,
.cols {
	min-width: 0;
}

.pagehead h1,
.dcard h2,
.dcard p,
.kpi,
.week-list .tx,
.hard-list .tx {
	overflow-wrap: anywhere;
}

.block-sec {
	scroll-margin-top: 92px;
}

.dcard {
	position: relative;
	border-radius: 20px;
	box-shadow: 0 2px 6px rgba(36, 22, 71, .035), 0 14px 32px -24px rgba(59, 29, 122, .28);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.dcard h2 {
	padding-bottom: 10px;
	border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}

.rowlink .arr {
	display: grid;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	place-items: center;
	border: 1px solid var(--tint-2);
	border-radius: 12px;
	background: linear-gradient(145deg, #fff, var(--tint));
	color: var(--brand);
	font-size: 0;
	transition: color .2s ease, background .2s ease, transform .2s ease;
}

.rowlink .arr::before {
	content: "←";
	font-family: var(--font);
	font-size: 1rem;
	font-weight: 800;
}

.rowlink:hover .arr {
	background: var(--brand);
	color: #fff;
	transform: translateX(-2px);
}

.go {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--brand);
	font-weight: 800;
}

.go::after {
	display: grid;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	place-items: center;
	border: 1px solid var(--tint-2);
	border-radius: 11px;
	background: linear-gradient(145deg, #fff, var(--tint));
	color: var(--brand);
	content: "←";
	font-family: var(--font);
	font-size: .95rem;
	transition: color .2s ease, background .2s ease, transform .2s ease;
}

.country:hover .go::after,
.country-banner:hover .go::after,
.subj:hover .go::after {
	background: var(--brand);
	color: #fff;
	transform: translateX(-2px);
}

.d-welcome {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-color: var(--tint-2);
	background:
		radial-gradient(ellipse at 10% 110%, color-mix(in srgb, var(--brand-2) 12%, transparent), transparent 48%),
		linear-gradient(125deg, var(--surface) 38%, var(--tint) 100%);
}

.d-welcome::after {
	position: absolute;
	z-index: -1;
	inset-block-start: -64px;
	inset-inline-end: -42px;
	width: 190px;
	height: 190px;
	border: 1px solid color-mix(in srgb, var(--brand-2) 14%, transparent);
	border-radius: 50%;
	box-shadow: 0 0 0 18px color-mix(in srgb, var(--brand-2) 4%, transparent), 0 0 0 38px color-mix(in srgb, var(--brand-2) 3%, transparent);
	content: "";
	pointer-events: none;
}

.d-welcome > * {
	position: relative;
}

.kpi {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 112px;
	border: 1px solid color-mix(in srgb, var(--brand-2) 9%, var(--line));
	box-shadow: 0 2px 8px rgba(36, 22, 71, .035);
}

.kpi::after {
	position: absolute;
	z-index: -1;
	inset-inline-end: -24px;
	inset-block-end: -38px;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--brand-2) 7%, transparent);
	content: "";
}

.kpi.mint::after {
	background: color-mix(in srgb, var(--good) 9%, transparent);
}

.kpi.amber::after {
	background: color-mix(in srgb, var(--amber) 14%, transparent);
}

.kpi-res::after {
	display: none;
}

.kpi > * {
	position: relative;
}

.tw {
	max-width: 100%;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-color: var(--tint-2) transparent;
}

.dcard .empty {
	width: 100%;
}

.dcard .btn,
.kpi .status {
	max-width: 100%;
}

.dcard .status,
.kpi .status {
	overflow-wrap: anywhere;
}

.wrong-list small {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.wrong-list small::after {
	display: inline-grid;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	place-items: center;
	border: 1px solid color-mix(in srgb, var(--bad) 18%, transparent);
	border-radius: 8px;
	background: color-mix(in srgb, var(--bad-bg) 70%, #fff);
	content: "←";
}

.auth-card input,
.form-card input,
.form-card select,
.form-card textarea,
.t-create input,
.t-create select,
.t-create textarea {
	min-width: 0;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.dcard:hover {
		border-color: color-mix(in srgb, var(--brand-2) 35%, var(--line));
		box-shadow: 0 8px 24px -18px rgba(59, 29, 122, .45);
		transform: translateY(-2px);
	}
}

@media (max-width: 900px) {
	.dash,
	.tdash {
		gap: var(--dashboard-gap);
	}

	.kpis {
		gap: 12px;
	}
}

@media (max-width: 680px) {
	.wrap {
		padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
	}

	main {
		padding-bottom: 48px;
	}

	.crumbs {
		padding-block-start: 20px;
	}

	.pagehead {
		gap: 10px;
		margin-bottom: 24px;
	}

	.pagehead > p {
		font-size: 1rem;
	}

	.block-sec {
		margin-top: 38px;
	}

	.dash,
	.tdash {
		gap: 12px;
		margin-top: 16px;
	}

	.dcard {
		padding: clamp(16px, 4vw, 20px);
		border-radius: 18px;
	}

	.d-welcome {
		column-gap: 12px;
	}

	.d-welcome .welcome-bulb {
		width: 46px;
		height: 46px;
	}

	.kpis {
		gap: 10px;
	}

	.kpi {
		min-height: 100px;
		padding: 14px;
		border-radius: 16px;
	}

	.kpi b {
		font-size: clamp(1.45rem, 7vw, 1.9rem);
	}

	.kpi-split {
		gap: 5px;
	}

	.kpi-split .status {
		white-space: normal;
	}

	.week-list li {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 3px 10px;
	}

	.week-list li > b {
		grid-column: 1;
	}

	.week-list li .tx {
		grid-column: 1;
	}

	.week-list li .status {
		grid-column: 2;
		grid-row: 1 / span 2;
		max-width: 108px;
		white-space: normal;
		text-align: center;
	}

	.hard-list li {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.hard-list li .btn {
		grid-column: 2;
		justify-self: start;
	}

	.t-guide {
		position: static;
	}

	.auth-main {
		padding: 32px 24px;
	}

	.form-card {
		padding: 20px;
	}

	.btn {
		min-height: 44px;
	}

	.btn-xs {
		min-height: 36px;
	}
}

@media (max-width: 400px) {
	.kpis {
		grid-template-columns: minmax(0, 1fr);
	}

	.kpi {
		min-height: 84px;
	}

	.d-welcome {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.d-welcome .btn {
		grid-column: 1 / -1;
		width: 100%;
	}

	.dcard-head {
		align-items: flex-start;
	}

	.dcard-head .btn {
		width: 100%;
	}

	.week-list li {
		padding: 9px;
	}

	.heat {
		grid-template-columns: minmax(0, 1fr);
	}

	.auth-main {
		padding: 26px 18px;
	}
}

@media (max-width: 360px) {
	.wrap {
		padding-inline: 14px;
	}

	.country-strip {
		grid-template-columns: minmax(0, 1fr);
	}

	.country-strip a {
		min-width: 0;
	}

	.country-strip .num {
		font-size: .8125rem;
	}

	.dcard,
	.kpi {
		padding: 14px;
	}

	.dtable th,
	.dtable td {
		padding-inline: 8px;
	}
}

.home .hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-block: 22px 14px;
	padding: clamp(28px, 5vw, 58px);
	border: 1px solid color-mix(in srgb, var(--brand) 10%, var(--line));
	border-radius: 30px;
	background:
		radial-gradient(ellipse at 92% 8%, color-mix(in srgb, var(--brand-2) 12%, transparent), transparent 34%),
		linear-gradient(125deg, var(--surface) 36%, var(--tint) 100%);
	box-shadow: 0 22px 54px -42px color-mix(in srgb, var(--brand) 48%, transparent);
}

.home .hero::before {
	position: absolute;
	z-index: -1;
	inset-block-end: -112px;
	inset-inline-start: 39%;
	width: 230px;
	height: 230px;
	border: 1px solid color-mix(in srgb, var(--brand) 12%, transparent);
	border-radius: 50%;
	box-shadow: 0 0 0 22px color-mix(in srgb, var(--brand) 3%, transparent), 0 0 0 48px color-mix(in srgb, var(--brand) 2%, transparent);
	content: "";
	pointer-events: none;
}

.home .hero-copy {
	position: relative;
	z-index: 1;
	gap: 18px;
}

.home .hero .kicker {
	padding: 6px 14px;
	background: color-mix(in srgb, var(--good-bg) 75%, var(--surface));
	font-size: .875rem;
}

.home .hero h1 {
	max-width: 11em;
	font-size: clamp(2.45rem, 4.8vw, 3.75rem);
	line-height: 1.18;
}

.home .hero p.lead {
	max-width: 31em;
	font-size: clamp(1rem, 1.4vw, 1.13rem);
	line-height: 1.9;
}

.home .hero-art {
	min-height: 0;
	padding: clamp(18px, 2.7vw, 32px);
	border: 1px solid color-mix(in srgb, var(--brand) 8%, var(--line));
	background:
		radial-gradient(circle at 12% 90%, color-mix(in srgb, var(--brand-2) 10%, transparent), transparent 35%),
		color-mix(in srgb, var(--tint) 76%, var(--surface));
}

.home .hero-art::after {
	inset-block-start: 19px;
	inset-inline-end: 20px;
	width: 9px;
	height: 9px;
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--good) 12%, transparent);
}

.home .hq {
	position: relative;
	z-index: 1;
	border-color: color-mix(in srgb, var(--brand) 9%, var(--line));
	box-shadow: 0 20px 44px -32px rgba(36, 22, 71, .35);
}

.home .trust-strip {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 0 auto 12px;
	padding: 0;
	background: transparent;
}

.home .trust-strip > div {
	min-width: 0;
	gap: 11px;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--surface);
	box-shadow: 0 8px 24px -22px rgba(36, 22, 71, .32);
}

.home .trust-strip > div + div {
	border-inline-start: 1px solid var(--line);
}

.home .trust-strip .tile {
	width: 40px;
	height: 40px;
	border-radius: 12px;
}

.home .trust-strip b {
	font-size: .9rem;
}

.home .trust-strip small {
	font-size: .8125rem;
	line-height: 1.55;
}

.home .band {
	padding-block: clamp(52px, 6.7vw, 82px);
}

.home .band-white::before {
	border-block-color: color-mix(in srgb, var(--line) 75%, transparent);
}

.home .sec-head {
	gap: 12px;
	margin-bottom: clamp(22px, 3vw, 34px);
}

.home .sec-head h2 {
	max-width: 23em;
	font-size: clamp(1.65rem, 3.2vw, 2.45rem);
	line-height: 1.35;
	letter-spacing: -.025em;
}

.home .sec-head p {
	max-width: 46em;
	line-height: 1.8;
}

.home .sec-head .kicker[data-step]::before {
	display: inline-grid;
	width: 25px;
	height: 25px;
	place-items: center;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	border-radius: 8px;
	content: attr(data-step);
	font-family: var(--font-latin);
	font-size: .68rem;
	font-weight: 800;
}

.home .countries {
	gap: 16px;
}

.home .country {
	border-radius: 20px;
	box-shadow: 0 10px 28px -24px rgba(36, 22, 71, .4);
}

.home .country-body {
	gap: 7px;
	padding: 17px 19px 19px;
}

.home .bento {
	gap: 14px;
}

.home .bento .subj {
	position: relative;
	min-height: 210px;
	align-content: start;
	overflow: hidden;
	border-radius: 20px;
	box-shadow: 0 12px 30px -26px rgba(36, 22, 71, .4);
}

.home .bento .subj-lg {
	min-height: 244px;
	background:
		radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 40%),
		linear-gradient(145deg, var(--surface) 42%, var(--tint) 100%);
}

.home .year-tabs {
	margin-top: 24px;
	border-radius: 20px;
	background: color-mix(in srgb, var(--surface) 70%, var(--bg));
}

.home .timeline {
	gap: 16px;
}

.home .timeline::before {
	inset-inline: 14%;
	top: 42px;
	border-color: color-mix(in srgb, var(--brand) 28%, transparent);
}

.home .timeline li {
	align-content: start;
	min-height: 204px;
	padding: 16px 14px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--surface);
	box-shadow: 0 10px 28px -25px rgba(36, 22, 71, .42);
}

.home .timeline .n {
	width: 52px;
	height: 52px;
	border-color: color-mix(in srgb, var(--brand) 25%, var(--line));
	background: var(--tint);
	box-shadow: 0 0 0 6px var(--tint);
	font-weight: 800;
}

.home .timeline li:nth-child(4) .n {
	border-color: var(--brand);
	background: var(--brand);
	color: #fff;
	box-shadow: 0 0 0 6px var(--tint);
}

.home .timeline h3 {
	margin-top: 7px;
}

.home .timeline p {
	line-height: 1.75;
}

.home .timeline-back {
	margin-top: 14px;
}

.home .timeline-back path {
	stroke: var(--brand-2);
}

.home .timeline-back span {
	background: var(--tint);
	color: var(--heading);
}

.home .tool-tabs .tabs {
	gap: 9px;
	margin-bottom: 16px;
}

.home .tool-tabs .chip {
	padding: 8px 17px;
}

.home .tool-panel {
	min-height: 250px;
	padding: clamp(20px, 3vw, 32px);
	border-color: color-mix(in srgb, var(--brand) 10%, var(--line));
	border-radius: 22px;
	background:
		radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--brand) 6%, transparent), transparent 38%),
		var(--surface);
	box-shadow: 0 18px 42px -36px rgba(36, 22, 71, .45);
}

.home .tp-copy h3 {
	max-width: 17em;
	font-size: clamp(1.25rem, 2.2vw, 1.7rem);
	line-height: 1.5;
}

.home .tp-copy p {
	max-width: 34em;
	line-height: 1.85;
}

.home .tp-demo {
	width: 100%;
	border-radius: 17px;
	box-shadow: 0 12px 32px -28px rgba(36, 22, 71, .45);
}

.home .plan-band {
	gap: clamp(24px, 4vw, 52px);
	padding: clamp(22px, 4vw, 42px);
	border: 1px solid color-mix(in srgb, var(--brand) 9%, var(--line));
	border-radius: 28px;
	background:
		radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--brand) 8%, transparent), transparent 42%),
		color-mix(in srgb, var(--surface) 78%, var(--tint));
	box-shadow: 0 18px 48px -42px rgba(36, 22, 71, .44);
}

.home .plan-copy {
	align-content: center;
}

.home .plan-copy h2 {
	max-width: 16em;
	font-size: clamp(1.8rem, 3.2vw, 2.55rem);
	line-height: 1.35;
}

.home .plan-stage {
	border-radius: 20px;
}

.home #price-h + p {
	margin-top: -2px;
}

.home .article-layout {
	gap: 16px;
}

.home .article-layout .card {
	border-radius: 20px;
	box-shadow: 0 12px 30px -25px rgba(36, 22, 71, .4);
}

.home .article-layout .card-featured {
	border-color: color-mix(in srgb, var(--brand) 12%, var(--line));
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.home .country,
	.home .bento .subj,
	.home .article-layout .card,
	.home .timeline li {
		transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
	}

	.home .country:hover,
	.home .bento .subj:hover,
	.home .article-layout .card:hover,
	.home .timeline li:hover {
		transform: translateY(-4px);
		border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
		box-shadow: 0 20px 38px -28px rgba(59, 29, 122, .42);
	}
}

@media (max-width: 900px) {
	.home .hero {
		gap: 28px;
	}

	.home .trust-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.home .timeline li {
		min-height: 190px;
	}
}

@media (max-width: 760px) {
	.home .hero {
		margin-block: 12px 10px;
		padding: 26px 20px;
		border-radius: 24px;
	}

	.home .hero h1 {
		font-size: clamp(2.2rem, 9vw, 3.4rem);
	}

	.home .trust-strip {
		gap: 9px;
		margin-bottom: 6px;
	}

	.home .trust-strip > div {
		padding: 12px;
	}

	.home .timeline {
		gap: 12px;
		padding-inline-start: 0;
	}

	.home .timeline::before {
		display: none;
	}

	.home .timeline li {
		grid-template-columns: 48px minmax(0, 1fr);
		min-height: 0;
		padding: 15px;
		column-gap: 13px;
		border-radius: 16px;
	}

	.home .timeline .n {
		grid-row: 1 / span 3;
		width: 44px;
		height: 44px;
		box-shadow: none;
	}

	.home .timeline li:nth-child(4) .n {
		box-shadow: none;
	}

	.home .timeline h3 {
		margin: 0;
	}

	.home .timeline p {
		max-width: none;
		margin: 0;
	}

	.home .timeline .pill {
		justify-self: start;
	}

	.home .plan-band {
		padding: 20px;
		border-radius: 22px;
	}

	.home .article-layout .card-featured {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 520px) {
	.home .trust-strip {
		grid-template-columns: minmax(0, 1fr);
	}

	.home .trust-strip > div + div {
		border-top: 1px solid var(--line);
		border-inline-start: 1px solid var(--line);
	}

	.home .trust-strip small {
		font-size: .875rem;
	}

	.home .sec-head.split {
		align-items: flex-start;
	}

	.home .sec-head.split > .tabs {
		width: 100%;
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 5px;
	}

	.home .tool-tabs .tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 5px;
	}

	.home .tool-tabs .chip {
		flex: 0 0 auto;
	}

	.home .tool-panel {
		gap: 18px;
		padding: 17px;
		border-radius: 18px;
	}
}

.dashboard-header {
	position: sticky;
	z-index: 100;
	inset-block-start: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	min-height: 76px;
	padding: 10px clamp(18px, 3vw, 40px);
	border-bottom: 1px solid var(--line);
	background: color-mix(in srgb, var(--surface) 94%, transparent);
	box-shadow: 0 4px 18px rgba(36, 22, 71, .04);
	backdrop-filter: blur(14px);
}

.dashboard-brand,
.dashboard-user,
.dashboard-header-actions,
.dashboard-site-link,
.dashboard-logout {
	display: inline-flex;
	align-items: center;
}

.dashboard-brand {
	width: fit-content;
	gap: 11px;
	color: var(--heading);
	text-decoration: none;
}

.dashboard-brand img {
	width: 42px;
	height: 42px;
	border-radius: 13px;
	object-fit: cover;
}

.dashboard-brand > span,
.dashboard-user > span {
	display: grid;
	gap: 2px;
}

.dashboard-brand b,
.dashboard-user b {
	color: var(--heading);
	font-size: .95rem;
}

.dashboard-brand small,
.dashboard-user small {
	color: var(--ink-2);
	font-size: .8125rem;
}

.dashboard-header-title {
	display: grid;
	justify-items: center;
	gap: 1px;
	color: var(--ink-2);
	font-size: .8125rem;
}

.dashboard-header-title strong {
	color: var(--heading);
	font-size: 1rem;
}

.dashboard-header-actions {
	justify-content: flex-end;
	gap: 12px;
}

.dashboard-site-link,
.dashboard-logout {
	gap: 7px;
	color: var(--ink-2);
	font-size: .875rem;
	font-weight: 700;
	text-decoration: none;
}

.dashboard-site-link svg,
.dashboard-logout svg {
	width: 19px;
	height: 19px;
}

.dashboard-user {
	gap: 9px;
	padding-inline-start: 12px;
	border-inline-start: 1px solid var(--line);
}

.dashboard-avatar {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	object-fit: cover;
}

.dashboard-search {
	width: 40px;
	height: 40px;
}

.dashboard-logout {
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
}

.dashboard-main {
	min-height: calc(100vh - 76px);
	padding: 0;
}

.dashboard-shell {
	display: grid;
	grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 42px);
	width: min(100%, 1680px);
	min-height: calc(100vh - 76px);
	margin-inline: auto;
	padding: 28px clamp(18px, 3vw, 40px);
}

.dashboard-sidebar {
	position: sticky;
	inset-block-start: 100px;
	align-self: start;
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-height: calc(100vh - 124px);
	padding: 17px 12px;
	overflow-y: auto;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: var(--surface);
	box-shadow: 0 6px 24px rgba(36, 22, 71, .035);
}

.dashboard-nav-label {
	margin: 0 10px 12px;
	color: var(--ink-2);
	font-size: .8125rem;
	font-weight: 800;
}

.dashboard-nav {
	display: grid;
	gap: 5px;
}

.dashboard-nav a,
.dashboard-sidebar-bottom > a {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 44px;
	padding: 9px 11px;
	border-radius: 12px;
	color: var(--ink-2);
	font-size: .9rem;
	font-weight: 700;
	text-decoration: none;
	transition: color .18s ease, background .18s ease;
}

.dashboard-nav a:hover,
.dashboard-nav a:focus-visible,
.dashboard-sidebar-bottom > a:hover {
	background: var(--tint);
	color: var(--brand);
}

.dashboard-nav a:focus-visible,
.dashboard-sidebar-bottom > a:focus-visible,
.dashboard-header a:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent);
	outline-offset: 2px;
}

.dashboard-nav svg,
.dashboard-sidebar-bottom svg {
	width: 19px;
	height: 19px;
	flex: 0 0 19px;
}

.dashboard-sidebar-bottom {
	margin-top: auto;
	padding-top: 20px;
}

.dashboard-sidebar-bottom > a {
	border: 1px solid var(--tint-2);
	background: var(--tint);
	color: var(--brand);
}

.dashboard-sidebar-bottom p {
	margin: 10px 11px 0;
	color: var(--ink-2);
	font-size: .8125rem;
	line-height: 1.7;
}

.dashboard-workspace {
	min-width: 0;
}

.dashboard-content {
	min-width: 0;
}

.dashboard-page .dashboard-content [id] {
	scroll-margin-top: 100px;
}

.dashboard-mobile-title {
	display: none;
}

.dashboard-footer {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 32px;
	padding: 18px 0;
	border-top: 1px solid var(--line);
	color: var(--ink-2);
	font-size: .875rem;
}

.dashboard-footer a {
	color: var(--brand);
	font-weight: 700;
	text-decoration: none;
}

@media (min-width: 681px) {
	.admin-bar .dashboard-header {
		inset-block-start: 32px;
	}

	.admin-bar .dashboard-sidebar {
		inset-block-start: 132px;
	}

	.admin-bar .dashboard-content [id] {
		scroll-margin-top: 132px;
	}
}

@media (max-width: 900px) {
	.dashboard-header {
		gap: 14px;
	}

	.dashboard-shell {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 20px;
		padding-inline: 20px;
	}

	.dashboard-site-link span,
	.dashboard-header-title {
		display: none;
	}
}

@media (max-width: 680px) {
	.dashboard-header {
		grid-template-columns: minmax(0, 1fr) auto;
		min-height: 66px;
		gap: 10px;
		padding: 8px 14px;
	}

	.dashboard-brand img {
		width: 38px;
		height: 38px;
	}

	.dashboard-brand b {
		font-size: .87rem;
	}

	.dashboard-brand small,
	.dashboard-user > span,
	.dashboard-site-link,
	.dashboard-search {
		display: none;
	}

	.dashboard-header-actions {
		gap: 9px;
	}

	.dashboard-user {
		padding-inline-start: 0;
		border: 0;
	}

	.dashboard-avatar {
		width: 34px;
		height: 34px;
	}

	.dashboard-logout {
		width: 38px;
		min-height: 38px;
		justify-content: center;
		padding: 0;
	}

	.dashboard-logout span {
		display: none;
	}

	.dashboard-main {
		min-height: calc(100vh - 66px);
		padding-bottom: 32px;
	}

	.dashboard-shell {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		padding: 12px 14px 0;
	}

	.dashboard-sidebar {
		position: sticky;
		z-index: 90;
		inset-block-start: 66px;
		display: block;
		width: 100%;
		max-height: none;
		padding: 7px;
		overflow-x: auto;
		overflow-y: hidden;
		border-radius: 15px;
		scrollbar-width: none;
	}

	.dashboard-sidebar::-webkit-scrollbar {
		display: none;
	}

	.dashboard-nav-label,
	.dashboard-sidebar-bottom {
		display: none;
	}

	.dashboard-nav {
		display: flex;
		width: max-content;
		gap: 5px;
	}

	.dashboard-nav a {
		flex: 0 0 auto;
		min-height: 40px;
		gap: 7px;
		padding: 8px 10px;
		font-size: .875rem;
		white-space: nowrap;
	}

	.dashboard-nav svg {
		width: 17px;
		height: 17px;
		flex-basis: 17px;
	}

	.dashboard-mobile-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 8px 2px 2px;
		color: var(--heading);
	}

	.dashboard-mobile-title b {
		font-size: 1.16rem;
	}

	.dashboard-mobile-title a {
		color: var(--brand);
		font-size: .875rem;
		font-weight: 800;
		text-decoration: none;
	}

	.dashboard-page .dashboard-content [id] {
		scroll-margin-top: 132px;
	}

	.dashboard-footer {
		margin-top: 20px;
		font-size: .8125rem;
	}

	.admin-bar .dashboard-header {
		inset-block-start: 46px;
	}

	.admin-bar .dashboard-sidebar {
		inset-block-start: 112px;
	}

	.admin-bar .dashboard-content [id] {
		scroll-margin-top: 178px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dcard {
		transition: none;
	}

	.rowlink .arr,
	.go::after {
		transition: none;
	}
}

/* ===== 3.1.4: قابلية القراءة، أهداف اللمس، وتنقّل اللوحات ===== */
html { scroll-behavior: smooth; }

.btn-xs { min-height: 36px; }
.btn-sm { min-height: 40px; }
.dcard h2 { font-size: 1.2rem; }

.dashboard-nav a[hidden] { display: none; }

.dashboard-nav a.is-active {
	background: var(--tint);
	color: var(--brand);
	font-weight: 800;
}

@media (max-width: 680px) {
	.dashboard-nav a.is-active {
		background: var(--brand);
		color: #fff;
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Clearer page hierarchy, distinctive actions, and resilient narrow layouts. */
:root {
	--heading-gradient: linear-gradient(110deg, #5B33C6 0%, #3B1D7A 52%, #7C4DE0 100%);
}

.home .hero h1,
.home .sec-head h2,
.pagehead:not(.pagehead-media) h1,
.entry-title,
.card h3 a {
	background-image: var(--heading-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.pagehead:not(.pagehead-media) {
	justify-items: center;
	text-align: center;
}

.pagehead:not(.pagehead-media) > p,
.pagehead:not(.pagehead-media) .search-form {
	margin-inline: auto;
}

.home .hero .btn-brand {
	background: linear-gradient(115deg, var(--brand), var(--brand-2));
	box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--brand) 68%, transparent);
}

.home .hero .btn-brand:hover {
	filter: brightness(1.08);
	transform: translateY(-2px);
}

.home .hq {
	border-color: color-mix(in srgb, var(--brand) 14%, var(--line));
}

.home .hq-q,
.home .hq .opt,
.home .hq .opt bdi {
	min-width: 0;
	overflow-wrap: anywhere;
}

.home .hq [data-hq-next] {
	border-color: color-mix(in srgb, var(--brand) 18%, var(--line));
	background: linear-gradient(135deg, var(--surface), var(--tint));
	color: var(--brand);
}

.article-layout {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
	position: relative;
	min-width: 0;
}

.article-layout .card,
.related .card {
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.card::before {
	position: absolute;
	z-index: 1;
	inset-block-start: 0;
	inset-inline-start: 20px;
	width: 42px;
	height: 3px;
	border-radius: 0 0 4px 4px;
	background: var(--heading-gradient);
	content: "";
	pointer-events: none;
	transition: width .22s ease;
}

.card:focus-within {
	border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
	box-shadow: var(--shadow-lg);
}

.card h3 a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: .2em;
}

.page-numbers {
	display: inline-flex;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.page-numbers.current {
	background: linear-gradient(120deg, var(--brand), var(--brand-2));
	border-color: transparent;
	color: #fff;
}

.page-numbers:focus-visible {
	outline-offset: 3px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.article-layout .card:hover,
	.related .card:hover {
		transform: translateY(-3px);
		border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
		box-shadow: var(--shadow-lg);
	}

	.card:hover::before {
		width: calc(100% - 40px);
	}

	.page-numbers:not(.current):hover {
		transform: translateY(-2px);
		border-color: var(--brand);
		background: var(--tint);
	}
}

@media (max-width: 900px) {
	.home .hero-copy {
		width: min(100%, 48rem);
		justify-items: center;
		margin-inline: auto;
		text-align: center;
	}

	.home .hero h1 {
		max-width: 16em;
	}

	.home .hero .cta-row {
		justify-content: center;
	}

	.home .hero-note {
		justify-content: center;
	}

	.home .hero-art {
		width: min(100%, 760px);
		justify-self: center;
	}

	.nav a {
		display: flex;
		min-height: 44px;
		align-items: center;
	}
}

@media (max-width: 640px) {
	.article-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.home .hero {
		padding-inline: clamp(16px, 5vw, 24px);
	}

	.home .hero h1 {
		font-size: clamp(2rem, 8.5vw, 3rem);
	}

	.home .hq {
		padding: clamp(14px, 4vw, 20px);
		gap: 12px;
	}

	.home .hq-top {
		flex-wrap: wrap;
	}

	.home .hq .opt {
		padding-inline: 10px;
	}

	.pagehead:not(.pagehead-media) {
		padding-inline: 8px;
	}

	.pagehead:not(.pagehead-media) h1 {
		font-size: clamp(1.8rem, 7vw, 2.5rem);
	}

	.pagination,
	.nav-links {
		gap: 6px;
	}
}

@media (max-width: 380px) {
	.home .hero .cta-row {
		width: 100%;
	}

	.home .hero .cta-row .btn {
		width: 100%;
		padding-inline: 16px;
	}

	.home .hq-foot {
		gap: 8px;
	}

	.home .hq-foot .btn {
		width: 100%;
	}
}

@media (forced-colors: active) {
	.home .hero h1,
	.home .sec-head h2,
	.pagehead:not(.pagehead-media) h1,
	.entry-title,
	.card h3 a {
		background: none;
		color: CanvasText;
		-webkit-text-fill-color: CanvasText;
	}
}

@media (prefers-reduced-motion: reduce) {
	.card::before,
	.page-numbers {
		transition: none;
	}
}

@media (max-width: 1100px) {
	.top-in {
		flex-wrap: wrap;
		padding-block: 10px;
	}

	.nav-toggle {
		display: inline-flex;
		order: 2;
		margin-inline-start: auto;
	}

	.top-actions {
		order: 3;
	}

	.top-actions .btn-line {
		display: none;
	}

	.nav {
		display: none;
		order: 5;
		width: 100%;
		margin: 0;
	}

	.nav.open {
		display: block;
	}

	.nav ul {
		flex-direction: column;
	}

	.nav ul ul {
		position: static;
		display: flex;
		border: 0;
		box-shadow: none;
		padding-inline-start: 14px;
	}
}

.home #choose-country,
.home #subjects,
.home #how-h {
	scroll-margin-top: 92px;
}

/* Dashboard sections behave as focused, addressable pages. */
.dashboard-student .dashboard-content #overview > section,
.dashboard-teacher .dashboard-content > .dashboard-home,
.dashboard-teacher .dashboard-content > .tdash > * {
	display: none;
}

.dashboard-student .dashboard-content #overview > section {
	grid-column: 1 / -1;
}

.dashboard-student.dashboard-section-welcome .dashboard-content #overview > #welcome,
.dashboard-student.dashboard-section-daily-limit .dashboard-content #overview > #daily-limit,
.dashboard-student.dashboard-section-weekly-plan .dashboard-content #overview > #weekly-plan,
.dashboard-student.dashboard-section-mastery .dashboard-content #overview > #mastery,
.dashboard-student.dashboard-section-results .dashboard-content #overview > #results,
.dashboard-student.dashboard-section-wrong-answers .dashboard-content #overview > #wrong-answers,
.dashboard-student.dashboard-section-performance .dashboard-content #overview > #performance,
.dashboard-student.dashboard-section-subscription .dashboard-content #overview > #subscription,
.dashboard-student.dashboard-section-recommendations .dashboard-content #overview > #recommendations {
	display: grid;
}

.dashboard-teacher.dashboard-section-welcome .dashboard-content > .dashboard-home {
	display: block;
}

.dashboard-teacher.dashboard-section-resources .dashboard-content > .tdash > #resources,
.dashboard-teacher.dashboard-section-teacher-performance .dashboard-content > .tdash > #teacher-performance,
.dashboard-teacher.dashboard-section-hard-questions .dashboard-content > .tdash > #hard-questions,
.dashboard-teacher.dashboard-section-student-feedback .dashboard-content > .tdash > #student-feedback,
.dashboard-teacher.dashboard-section-create .dashboard-content > .tdash > #create,
.dashboard-teacher.dashboard-section-create .dashboard-content > .tdash > #create-guide {
	display: grid;
	grid-column: 1 / -1;
}

.dashboard-home {
	padding: clamp(20px, 3.5vw, 36px);
	border: 1px solid color-mix(in srgb, var(--brand) 13%, var(--line));
	border-radius: 24px;
	background:
		radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--brand-2) 12%, transparent), transparent 40%),
		linear-gradient(130deg, var(--surface) 44%, var(--tint) 100%);
	box-shadow: var(--shadow);
}

.dashboard-home-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 24px;
}

.dashboard-home .pagehead {
	margin: 0;
}

.dashboard-home .pagehead h1 {
	font-size: clamp(1.7rem, 3.3vw, 2.5rem);
}

.dashboard-clock {
	display: grid;
	flex: 0 0 auto;
	gap: 3px;
	justify-items: center;
	min-width: 154px;
	padding: 13px 18px;
	border: 1px solid color-mix(in srgb, var(--brand) 13%, var(--line));
	border-radius: 18px;
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	box-shadow: 0 10px 24px -20px rgba(36, 22, 71, .5);
}

.dashboard-clock time {
	color: var(--heading);
	font-family: var(--font-latin);
	font-size: 1.65rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.25;
	direction: ltr;
}

.dashboard-clock span {
	color: var(--ink-2);
	font-size: .8125rem;
	text-align: center;
}

.dashboard-home .kpis {
	margin-top: 0;
}

.dashboard-sidebar .dashboard-nav a[aria-current="page"] {
	background: linear-gradient(110deg, var(--tint), color-mix(in srgb, var(--tint) 45%, var(--surface)));
	color: var(--brand);
	font-weight: 800;
	box-shadow: inset 3px 0 0 var(--brand-2);
}

@media (max-width: 900px) {
	.dashboard-shell {
		grid-template-columns: minmax(0, 1fr);
	}

	.dashboard-sidebar {
		position: static;
		display: block;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: thin;
	}

	.dashboard-nav-label,
	.dashboard-sidebar-bottom {
		display: none;
	}

	.dashboard-nav {
		display: flex;
		width: max-content;
		gap: 6px;
	}

	.dashboard-nav a {
		flex: 0 0 auto;
		min-height: 42px;
		white-space: nowrap;
	}
}

@media (max-width: 680px) {
	.dashboard-sidebar {
		position: sticky;
		z-index: 90;
	}

	.dashboard-home {
		padding: 20px 16px;
		border-radius: 20px;
	}

	.dashboard-home-head {
		align-items: stretch;
		flex-direction: column;
		gap: 16px;
		margin-bottom: 18px;
	}

	.dashboard-clock {
		width: 100%;
		min-width: 0;
		grid-template-columns: 1fr auto;
		align-items: center;
		justify-items: start;
		padding: 10px 14px;
	}

	.dashboard-clock time {
		font-size: 1.35rem;
	}

	.dashboard-clock span {
		text-align: end;
	}

	.dashboard-sidebar .dashboard-nav a[aria-current="page"] {
		background: var(--brand);
		color: #fff;
		box-shadow: none;
	}

	.dashboard-student .dashboard-content #overview {
		margin-top: 14px;
	}
}

@media (max-width: 400px) {
	.dashboard-shell {
		padding-inline: 12px;
	}

	.dashboard-sidebar {
		padding: 6px;
	}

	.dashboard-nav a {
		min-height: 40px;
		padding-inline: 9px;
		font-size: .8125rem;
	}

	.dashboard-student .d-welcome {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
	}

	.dashboard-student .d-welcome .btn {
		grid-column: 1;
		width: 100%;
	}
}

/* Consistent finishing across public pages. */
main:not(.dashboard-main) {
	--page-gutter: clamp(16px, 3vw, 28px);
}

.pagehead h1,
.entry-title {
	background-image: var(--heading-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.pagehead-media {
	gap: clamp(20px, 4vw, 44px);
	margin-block: 12px clamp(36px, 5vw, 56px);
	padding: clamp(22px, 4vw, 46px);
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--brand) 10%, var(--line));
	border-radius: clamp(20px, 3vw, 30px);
	background:
		radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--brand-2) 10%, transparent), transparent 38%),
		linear-gradient(125deg, var(--surface) 42%, var(--tint) 100%);
	box-shadow: 0 18px 44px -36px color-mix(in srgb, var(--brand) 38%, transparent);
}

.pagehead-media .ph-copy {
	min-width: 0;
	gap: 16px;
}

.pagehead-media .ph-copy h1 {
	font-size: clamp(2rem, 4.2vw, 3.2rem);
	line-height: 1.25;
}

.pagehead-media .ph-copy > p {
	max-width: 38em;
	line-height: 1.85;
}

.pagehead-media .ph-media img {
	max-height: 380px;
	border: 1px solid color-mix(in srgb, var(--brand) 10%, var(--line));
	box-shadow: 0 16px 36px -24px rgba(36, 22, 71, .35);
}

.crumbs {
	min-height: 44px;
}

.pagehead:not(.pagehead-media) {
	max-width: 900px;
	margin-inline: auto;
	padding-inline: 12px;
}

.pagehead:not(.pagehead-media) > p {
	max-width: 42em;
	line-height: 1.85;
}

.block-sec {
	margin-top: clamp(44px, 7vw, 76px);
}

.cols {
	gap: clamp(20px, 3vw, 36px);
}

.side,
.form-card,
.feature,
.exam-card,
.plan,
.unit,
.station-card,
.exam-item,
.rowlink,
.qrow,
.faq details,
.country-block,
.tool-panel {
	min-width: 0;
}

.form-card,
.side,
.feature,
.exam-card,
.plan,
.tool-panel {
	border-color: color-mix(in srgb, var(--brand) 8%, var(--line));
	box-shadow: 0 8px 26px -22px rgba(36, 22, 71, .38);
}

.form-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-card select,
.form-card textarea,
.filters select,
.auth-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.search-form input[type="search"],
.comment-respond input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.comment-respond textarea {
	min-width: 0;
	min-height: 48px;
	max-width: 100%;
}

.form-card textarea,
.comment-respond textarea {
	min-height: 132px;
}

.filters {
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	gap: 12px;
	padding: clamp(14px, 2vw, 20px);
}

.filters .f {
	min-width: 0;
}

.filters select {
	min-height: 48px;
}

.filters .f-actions {
	flex-wrap: wrap;
}

.btn,
.chip,
.page-numbers,
.icon-btn {
	-webkit-tap-highlight-color: transparent;
}

.btn {
	min-height: 46px;
}

.btn-xs {
	min-height: 38px;
}

.nav a,
.country,
.subj,
.unit,
.rowlink,
.station-card,
.exam-link,
.exam-item,
.urow,
.feature,
.exam-card,
.plan,
.side,
.faq details,
.tool-panel {
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}

.country:focus-visible,
.subj:focus-visible,
.unit:focus-visible,
.rowlink:focus-visible,
.station-card:focus-visible,
.exam-link:focus-visible,
.nav a:focus-visible {
	outline-offset: 3px;
}

.faq summary {
	position: relative;
	padding-inline-end: 30px;
	list-style: none;
}

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

.faq summary::marker {
	content: "";
}

.faq summary::after {
	position: absolute;
	inset-inline-end: 2px;
	top: .35em;
	width: 9px;
	height: 9px;
	border-inline-end: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	content: "";
	transform: rotate(45deg);
	transition: transform .18s ease;
}

.faq details[open] summary::after {
	transform: rotate(225deg);
}

.site-footer {
	padding-block-start: clamp(36px, 5vw, 56px);
}

.site-footer .footer-grid {
	gap: clamp(20px, 3vw, 36px);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.country:hover,
	.subj:hover,
	.unit:hover,
	.rowlink:hover,
	.station-card:hover,
	.exam-link:hover,
	.exam-item:hover,
	.urow:hover,
	.feature:hover,
	.exam-card:hover,
	.plan:hover,
	.side:hover,
	.faq details:hover {
		transform: translateY(-2px);
		border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
		box-shadow: 0 16px 34px -26px rgba(59, 29, 122, .38);
	}
}

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

	.filters .f-actions {
		grid-column: 1 / -1;
	}

	.feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.price-faq {
		gap: 22px;
	}

	.post-cols {
		gap: 24px;
	}
}

@media (max-width: 640px) {
	.pagehead-media {
		grid-template-columns: minmax(0, 1fr);
		margin-block: 10px 32px;
		padding: 18px;
		border-radius: 22px;
	}

	.pagehead-media .ph-media {
		order: -1;
	}

	.pagehead-media .ph-media img {
		max-height: none;
		border-radius: 16px;
	}

	.pagehead-media .ph-copy h1 {
		font-size: clamp(1.8rem, 8vw, 2.5rem);
	}

	.pagehead:not(.pagehead-media) {
		padding-inline: 4px;
	}

	.pagehead:not(.pagehead-media) > p {
		font-size: 1rem;
	}

	.feature-grid,
	.filters {
		grid-template-columns: minmax(0, 1fr);
	}

	.filters .f-actions {
		grid-column: auto;
	}

	.filters .f-actions > * {
		flex: 1 1 auto;
	}

	.exam-item {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
		padding: 14px;
	}

	.exam-actions {
		grid-column: 1 / -1;
		width: 100%;
	}

	.exam-actions .btn {
		flex: 1 1 0;
	}

	.form-card .btn {
		width: 100%;
		justify-self: stretch;
	}

	.faq-groups {
		gap: 26px;
	}

	.faq details {
		padding: 14px 16px;
	}

	.site-footer .footer-brand img {
		height: 76px;
	}
}

@media (max-width: 380px) {
	.wrap {
		padding-inline: max(14px, env(safe-area-inset-left, 0px)) max(14px, env(safe-area-inset-right, 0px));
	}

	.pagehead-media {
		padding: 14px;
	}

	.form-card {
		padding: 18px 14px;
	}

	.filters .f-actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.exam-actions {
		flex-wrap: wrap;
	}

	.exam-actions .btn {
		min-width: 0;
		padding-inline: 10px;
		font-size: .875rem;
	}
}

@media (forced-colors: active) {
	.pagehead h1,
	.entry-title {
		background: none;
		color: CanvasText;
		-webkit-text-fill-color: CanvasText;
	}

	.faq summary::after {
		border-color: CanvasText;
	}
}

@media (prefers-reduced-motion: reduce) {
	.faq summary::after,
	.nav a,
	.country,
	.subj,
	.unit,
	.rowlink,
	.station-card,
	.exam-link,
	.exam-item,
	.urow,
	.feature,
	.exam-card,
	.plan,
	.side,
	.faq details,
	.tool-panel {
		transition: none;
	}
}

/* Homepage visual rhythm and a more balanced hero scale. */
.home .hero {
	grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
	gap: clamp(24px, 4vw, 48px);
	margin-block: 16px 12px;
	padding: clamp(24px, 4vw, 46px);
	border-radius: 28px;
}

.home .hero h1 {
	max-width: 13em;
	font-size: clamp(2.15rem, 3.8vw, 3.2rem);
	line-height: 1.3;
	letter-spacing: -.035em;
}

.home .hero h1 .marker path {
	stroke: var(--brand-2);
}

.home .hero .kicker {
	border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--line));
	background: color-mix(in srgb, var(--tint) 78%, var(--surface));
	color: var(--heading);
}

.home .hero-art {
	border-radius: 24px;
}

.home .trust-strip {
	margin-block: 0 clamp(16px, 2vw, 24px);
}

.home .trust-strip > div + div {
	border-inline-start: 0;
}

.home .band {
	padding-block: clamp(48px, 6vw, 72px);
}

.home .sec-head {
	gap: 11px;
	margin-bottom: clamp(22px, 2.8vw, 32px);
}

.home .sec-head h2 {
	max-width: 24em;
	font-size: clamp(1.55rem, 2.8vw, 2.2rem);
	line-height: 1.4;
	letter-spacing: -.025em;
}

.home .sec-head .kicker {
	color: var(--brand);
}

.home .country,
.home .bento .subj,
.home .tool-panel,
.home .plan-band,
.home .article-layout .card {
	border-radius: 20px;
}

@media (max-width: 900px) {
	.home .hero {
		padding: clamp(24px, 4.5vw, 38px);
	}

	.home .hero h1 {
		font-size: clamp(2rem, 5.2vw, 2.8rem);
	}

	.home .band {
		padding-block: clamp(44px, 6vw, 60px);
	}
}

@media (max-width: 640px) {
	.home .hero {
		gap: 22px;
		margin-block: 10px 8px;
		padding: 22px 18px;
		border-radius: 22px;
	}

	.home .hero h1 {
		font-size: clamp(1.8rem, 7.2vw, 2.45rem);
		line-height: 1.35;
	}

	.home .hero-art {
		padding: 16px;
		border-radius: 18px;
	}

	.home .band {
		padding-block: 40px;
	}

	.home .sec-head {
		margin-bottom: 22px;
	}

	.home .sec-head h2 {
		font-size: clamp(1.45rem, 6vw, 1.85rem);
	}

	.home .trust-strip > div + div {
		border-top: 1px solid var(--line);
		border-inline-start: 0;
	}

	.home .plan-band {
		border-radius: 20px;
	}
}

@media (max-width: 380px) {
	.home .hero {
		padding: 18px 14px;
	}

	.home .hero h1 {
		font-size: clamp(1.7rem, 8vw, 2rem);
	}
}

/* ===== 3.1.11: تدقيق الخطوط والتدرجات والألوان ===== */
:root {
	--teal-deep: #0E7A70;   /* نص أبيض وأيقونات: 5.2:1 */
	--amber-deep: #8F6B25;  /* أشرطة وحلقات التقدم: 3.7:1 على المسار */
	--on-amber: #2E1566;    /* نص على الذهبي: 5.4:1 */
	--heading-gradient: linear-gradient(250deg, #3B1D7A 0%, #5B33C6 100%); /* يبدأ داكنًا من جهة بداية القراءة (يمين) */
}

/* العربية: أي letter-spacing يفكّك وصل الحروف ويعطّل لام-ألف */
.hero h1,
.home .hero h1,
.home .sec-head h2 { letter-spacing: 0; }

/* عناوين البطاقات: لون صلب كي يعمل hover (النص الشفاف كان يلغيه) */
.card h3 a {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: currentColor;
	color: var(--heading);
}
.card h3 a:hover { color: var(--brand); }

/* النص الثانوي الذي يُقرأ كجملة: 14px كحد أدنى */
.dashboard-sidebar-bottom p,
.dashboard-footer,
.ap-note,
.mock-note,
.palette-hint,
.year-list small,
.exam-link small,
.footer-menu small,
.home .trust-strip small { font-size: .875rem; }

.mini-ring svg { width: 44px; height: 44px; }
.mini-ring .num { font-size: .75rem; }
.home .sec-head .kicker[data-step]::before { font-size: .75rem; }

/* تباين: أبيض/أيقونات على تيل، وأشرطة التقدم على مسارها */
.tile.teal,
.opt.right .l,
.station.st-ok .dot,
.step:nth-child(3) .n,
.dots i.on { background: var(--teal-deep); }

.assure .ico,
.auth-teach .ico,
.checks.dark li::before { color: var(--teal-deep); }

.bar > span,
.mastery .ms-ok .bar > span { background: var(--teal-deep); }
.bar.amber > span,
.mastery .ms-weak .bar > span { background: var(--amber-deep); }
.mini-ring circle.v,
.hq-ring circle.v { stroke: var(--teal-deep); }
.today-ring circle.v { stroke: var(--amber-deep); }

/* الطباعة (وضع ?print=1 وطباعة المتصفح): العنوان بتدرج شفاف يختفي عند إيقاف خلفيات الطباعة */
@media print {
	.home .hero h1,
	.home .sec-head h2,
	.pagehead h1,
	.entry-title {
		background: none !important;
		-webkit-text-fill-color: currentColor !important;
		color: var(--heading) !important;
	}
}

/* ===== 3.1.12: هوية مستمدة من اللوغو + حيوية وحركة سلسة ===== */
:root {
	/* من اللوغو: المصباح (ذهبي) وصفحات الكتاب (تيل→نعناع) وشريط M (بنفسجي متدرج) */
	--amber: #F6B012;
	--amber-bg: #FFF4D6;
	--amber-ink: #7A4B00;
	--amber-line: #F5DFA3;
	--on-amber: #2E1566;      /* على الذهبي: 7.9:1 */
	--amber-deep: #B46F00;    /* أشرطة التقدم على مسارها: 3:1 */
	--mint: #66D2A2;
	--bg: #F8F6FE;            /* خلفية بصبغة بنفسجية خفيفة بدل الرمادي المحايد */
	--grad-ribbon: linear-gradient(135deg, #4E2AA2 0%, #5B33C6 45%, #7242DE 100%);
	--grad-pages: linear-gradient(135deg, #1FA89A 0%, #66D2A2 100%);
	--grad-spark: linear-gradient(135deg, #FBC531 0%, #F29E0C 100%);
	--ease-out: cubic-bezier(.2, .7, .2, 1);
}

/* أزرار رئيسية: تدرج شريط الـ M، ويتحرك الضوء فيه عند المرور */
.btn-brand,
a.btn-brand,
.btn-amber,
a.btn-amber,
.home .hero .btn-brand {
	background-image: var(--grad-ribbon);
	background-size: 200% 100%;
	background-position: 0 0;
	transition: background-position .5s var(--ease-out), transform .15s, box-shadow .15s, filter .15s;
}

.btn-brand:hover,
a.btn-brand:hover,
.btn-amber:hover,
a.btn-amber:hover,
.home .hero .btn-brand:hover { background-position: 100% 0; }

/* الخلفية الداكنة قليلًا للأقسام الملوّنة، بتدرج ناعم بدل لون مسطّح */
.band-tint { --band-bg: linear-gradient(180deg, var(--tint) 0%, #F6F2FE 100%); }

/* البطل: وهج ذهبي (المصباح) وتيل (الصفحات) خلف المحتوى، وخط إبراز ذهبي تحت الكلمة */
.home .hero::after {
	position: absolute;
	z-index: -1;
	inset: 0;
	content: "";
	pointer-events: none;
	background:
		radial-gradient(220px 220px at 6% 10%, rgba(246, 176, 18, .20), transparent 70%),
		radial-gradient(300px 300px at 98% 100%, rgba(31, 168, 154, .15), transparent 70%);
}

.home .hero h1 .marker path { stroke: var(--amber); opacity: .7; }

/* شريط المزايا: لمسة ذهبية للمصباح بين البنفسجي والنعناعي */
.home .trust-strip > div:nth-child(3) .tile {
	background: var(--amber-bg);
	color: var(--amber-ink);
}

.home .trust-strip > div { transition: transform .25s var(--ease-out), box-shadow .25s, border-color .25s; }
.home .trust-strip .tile { transition: transform .3s var(--ease-out); }

@media (hover: hover) {
	.home .trust-strip > div:hover {
		transform: translateY(-3px);
		border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
		box-shadow: 0 16px 30px -22px rgba(59, 29, 122, .45);
	}
	.home .trust-strip > div:hover .tile { transform: rotate(-6deg) scale(1.08); }
}

/* على اللمس: لا نترك حالة hover عالقة بعد النقر */
@media (hover: none) {
	.card:hover,
	.country:hover { transform: none; }
}

/* قراءة أنعم: توازن أسطر العناوين العربية، وتجنّب كلمة يتيمة في آخر الفقرة */
h1, h2, h3 { text-wrap: balance; }
.lead, .sec-head p { text-wrap: pretty; }

/* الروابط الداخلية لا تختفي تحت الترويسة الثابتة */
.home .band[id] { scroll-margin-top: 84px; }

/* حركة: دخول البطل بتتابع، وظهور الأقسام عند التمرير */
@keyframes mqGlow { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
	.home .hero::after { animation: mqGlow 7s ease-in-out infinite; }

	.home .hero-copy > * { animation: mqFade .7s var(--ease-out) both; }
	.home .hero-copy > :nth-child(2) { animation-delay: .08s; }
	.home .hero-copy > :nth-child(3) { animation-delay: .16s; }
	.home .hero-copy > :nth-child(4) { animation-delay: .24s; }
	.home .hero-copy > :nth-child(5) { animation-delay: .32s; }
	.home .hero-art { animation: mqFade .8s .18s var(--ease-out) both; }

	.reveal-ready .home .band > * {
		transition: opacity .6s ease, transform .7s var(--ease-out);
	}
	.reveal-ready .home .band > *:not(.is-in) {
		opacity: 0;
		transform: translateY(20px);
	}
}