/* ==========================================================================
   Sajha Notes — homepage (front-page.php)
   Hero · Papers panel · Features · Testimonials · Call to action
   ========================================================================== */

/* Hero ---------------------------------------------------------------------- */
.sn-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(56px, 9vw, 120px) clamp(48px, 7vw, 88px);
	border-bottom: 1px solid var(--sn-border);
	background:
		radial-gradient(60% 55% at 50% 0%, color-mix(in srgb, var(--sn-primary) 9%, transparent), transparent 70%),
		radial-gradient(40% 40% at 85% 30%, color-mix(in srgb, var(--sn-navy-300) 14%, transparent), transparent 70%),
		var(--sn-bg);
}

/* Faint dot grid, faded out towards the edges. */
.sn-hero__bg {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(color-mix(in srgb, var(--sn-text) 13%, transparent) 1px, transparent 1px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 20%, transparent 75%);
	pointer-events: none;
}

.sn-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.sn-hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.sn-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
	padding: 6px 14px 6px 10px;
	border: 1px solid var(--sn-border);
	border-radius: 999px;
	background: color-mix(in srgb, var(--sn-card) 85%, transparent);
	color: var(--sn-text-soft);
	font-size: 0.8125rem;
	font-weight: 500;
	box-shadow: 0 1px 2px rgba(6, 53, 116, 0.04);
}

.sn-badge__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sn-accent);
	box-shadow: 0 0 0 3px var(--sn-accent-soft);
}

.sn-hero__title {
	isolation: isolate;
	margin: 0;
	font-size: clamp(2.6rem, 7vw, 4.75rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.035em;
}

.sn-hero__accent {
	position: relative;
	white-space: nowrap;
	color: var(--sn-primary);
}

/* Hand-drawn style underline under the highlighted word. */
.sn-hero__accent::after {
	content: "";
	position: absolute;
	right: 0.02em;
	bottom: -0.06em;
	left: 0.02em;
	height: 0.16em;
	border-radius: 999px;
	background: var(--sn-accent);
	opacity: 0.9;
	transform: rotate(-1.5deg);
	z-index: -1;
}

/* Gap under the title scales with it: 22px on computers, 16px on phones
   (where the title is smaller), so title and subtitle read as one group.
   The sum sits in calc() so CSS minifiers (WP Rocket) keep its spaces;
   without them the rule is invalid and the gap collapses to 0. */
.sn-hero__rotator {
	margin: clamp(16px, calc(0.9vw + 12px), 22px) 0 0;
	color: var(--sn-text-soft);
	font-family: var(--sn-font-heading);
	font-size: clamp(1.125rem, 2.2vw, 1.375rem);
	font-weight: 600;
	letter-spacing: -0.015em;
}

.sn-rotator {
	display: inline-block;
	color: var(--sn-primary);
	text-align: left;
	transition: opacity 0.3s, transform 0.3s;
}

.sn-rotator.is-leaving {
	opacity: 0;
	transform: translateY(-6px);
}

.sn-hero__text {
	max-width: 560px;
	margin: 14px 0 0;
	color: var(--sn-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.sn-hero__search {
	width: 100%;
	max-width: 560px;
	margin-top: 32px;
}

/* Prominent but not heavy: 58px tall (44px button), between the 40px header
   search and the headline. */
.sn-search-form--hero-lg {
	padding: 6px 6px 6px 8px;
	border-color: color-mix(in srgb, var(--sn-text) 10%, var(--sn-border));
	box-shadow: 0 1px 2px rgba(6, 53, 116, 0.04), 0 10px 28px rgba(6, 53, 116, 0.07);
}

.sn-search-form--hero-lg .sn-search-form__input {
	padding-block: 9px;
	font-size: 1rem;
}

.sn-search-form--hero-lg .sn-search-form__submit {
	min-height: 44px;
	padding-inline: 22px;
}

.sn-hero__popular {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}

.sn-hero__popular-label {
	margin-right: 2px;
	color: var(--sn-muted);
	font-size: 0.8125rem;
	font-weight: 500;
}

.sn-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 48px 0 0;
}

.sn-stats__item {
	display: flex;
	flex-direction: column-reverse; /* Number above its label. */
	justify-content: flex-end; /* Numbers stay level even if a label wraps. */
	align-items: center;
	text-align: center;
	padding: 0 clamp(18px, 3.5vw, 40px);
}

.sn-stats__item + .sn-stats__item {
	border-left: 1px solid var(--sn-border);
}

.sn-stats dt {
	color: var(--sn-muted);
	font-size: 0.8125rem;
}

.sn-stats dd {
	margin: 0;
	color: var(--sn-text);
	font-family: var(--sn-font-heading);
	font-size: clamp(1.375rem, 2.6vw, 1.75rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

/* Floating subject tiles (decorative, wide screens only). */
/* Floating science tiles (decorative; Customizer → Homepage hero).
   Shown only where there is empty space, so they never touch content. */
.sn-hero__floats {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-hero__float {
	position: absolute;
	isolation: isolate;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border: 1px solid var(--sn-border);
	border-radius: 18px;
	background: var(--sn-card);
	color: var(--sn-primary);
	box-shadow: 0 12px 30px rgba(6, 53, 116, 0.1);
	animation: sn-float 7s ease-in-out infinite;
}

.sn-hero__float::after {
	content: "";
	position: absolute;
	inset: 6px;
	z-index: -1;
	border-radius: 13px;
	background: var(--sn-primary-soft);
}

/* Two of the four tiles pick up the orange of the illustration. */
.sn-hero__float--accent {
	color: var(--sn-accent-ink);
}

.sn-hero__float--accent::after {
	background: var(--sn-accent-soft);
}

[data-theme="dark"] .sn-hero__float--accent {
	color: var(--sn-accent);
}

@keyframes sn-float {
	50% {
		translate: 0 -10px;
	}
}

/* Centred hero (no image): tiles around the headline. */
@media (min-width: 1100px) {
	.sn-hero:not(.sn-hero--split) .sn-hero__floats {
		display: block;
	}
}

.sn-hero:not(.sn-hero--split) .sn-hero__float--1 {
	top: 20%;
	left: max(4%, calc(50% - 600px));
	transform: rotate(-8deg);
}

.sn-hero:not(.sn-hero--split) .sn-hero__float--2 {
	top: 16%;
	right: max(5%, calc(50% - 590px));
	animation-delay: -2s;
	transform: rotate(7deg);
}

.sn-hero:not(.sn-hero--split) .sn-hero__float--3 {
	bottom: 22%;
	left: max(8%, calc(50% - 540px));
	animation-delay: -4s;
	transform: rotate(6deg);
}

.sn-hero:not(.sn-hero--split) .sn-hero__float--4 {
	right: max(9%, calc(50% - 530px));
	bottom: 26%;
	animation-delay: -1s;
	transform: rotate(-6deg);
}

/* Two-column hero: tiles at the four corners of the visual, nowhere else. */
.sn-hero--split .sn-hero__floats {
	display: block;
}

.sn-hero--split .sn-hero__float {
	width: 50px;
	height: 50px;
	border-radius: 15px;
}

.sn-hero--split .sn-hero__float::after {
	border-radius: 10px;
}

.sn-hero--split .sn-hero__float--1 {
	top: 2%;
	left: -22px;
	transform: rotate(-8deg);
}

.sn-hero--split .sn-hero__float--2 {
	top: -14px;
	right: 30%;
	animation-delay: -2s;
	transform: rotate(7deg);
}

.sn-hero--split .sn-hero__float--3 {
	bottom: 30%;
	left: -34px;
	animation-delay: -4s;
	transform: rotate(6deg);
}

.sn-hero--split .sn-hero__float--4 {
	right: -14px;
	bottom: -6px;
	animation-delay: -1s;
	transform: rotate(-6deg);
}

/* Phones: two small tiles are enough. */
@media (max-width: 560px) {
	.sn-hero--split .sn-hero__float {
		width: 42px;
		height: 42px;
	}

	.sn-hero--split .sn-hero__float .sn-icon {
		width: 20px;
		height: 20px;
	}

	.sn-hero--split .sn-hero__float--2,
	.sn-hero--split .sn-hero__float--3 {
		display: none;
	}

	.sn-hero--split .sn-hero__float--1 {
		left: -8px;
	}

	.sn-hero--split .sn-hero__float--4 {
		right: -6px;
	}
}

/* Hero with a visual: two columns ------------------------------------------- */
.sn-hero--split {
	padding-block: clamp(36px, 6vw, 80px);
}

.sn-hero--split .sn-hero__bg {
	-webkit-mask-image: radial-gradient(ellipse 55% 75% at 30% 45%, #000 15%, transparent 70%);
	mask-image: radial-gradient(ellipse 55% 75% at 30% 45%, #000 15%, transparent 70%);
}

/* The text leads (about 55 %); the visual is capped and sits to the right,
   leaving clear space between the two. */
.sn-hero--split .sn-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: clamp(40px, 6vw, 88px);
	align-items: center;
	text-align: left;
}

.sn-hero--split .sn-hero__content {
	align-items: flex-start;
}

/* "Learning, made easy." stays on one line on every phone: the line is about
   9.75 times its font size wide, so below 430px the size follows the screen
   (about 37px on an iPhone 16 Pro, 29px on a 320px phone). */
.sn-hero--split .sn-hero__title {
	font-size: min(clamp(2.5rem, 5vw, 3.75rem), calc((100vw - 2 * var(--sn-gutter)) / 10.1));
}

.sn-hero--split .sn-hero__text {
	max-width: 540px;
}

.sn-hero--split .sn-hero__search {
	max-width: 520px;
	margin-top: 30px;
}

.sn-hero--split .sn-hero__popular {
	justify-content: flex-start;
}

.sn-hero--split .sn-stats {
	flex-wrap: nowrap;
	justify-content: flex-start;
	margin-top: 40px;
}

.sn-hero--split .sn-stats__item {
	align-items: flex-start;
	padding-inline: clamp(16px, 2.2vw, 28px);
}

.sn-hero--split .sn-stats__item:first-child {
	padding-left: 0;
}

/* Visual column */
.sn-hero__media {
	position: relative;
	isolation: isolate;
	justify-self: end;
	width: 100%;
	max-width: 460px;
}

/* Built-in SVG illustration: colours follow the theme tokens. */
.sn-art {
	--sn-art-skin: #d99c70;
	--sn-art-skin-shade: #c2825a;
	--sn-art-hair: #2a1d17;

	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.sn-art-stop-a {
	stop-color: var(--sn-navy-100);
}

.sn-art-stop-b {
	stop-color: var(--sn-navy-200);
	stop-opacity: 0.55;
}

.sn-art-dot {
	fill: var(--sn-navy-300);
	opacity: 0.6;
}

.sn-art-card {
	fill: var(--sn-card);
}

/* Flat offset shadow under each card (cheaper than a blur filter while the cards float). */
.sn-art-shade {
	fill: var(--sn-navy-900);
	opacity: 0.08;
}

.sn-art-soft {
	fill: var(--sn-primary-soft);
}

.sn-art-navy {
	fill: var(--sn-navy-800);
}

.sn-art-mid {
	fill: var(--sn-navy-400);
}

.sn-art-line {
	fill: var(--sn-navy-100);
}

.sn-art-line-strong {
	fill: var(--sn-navy-200);
}

.sn-art-stroke {
	stroke: var(--sn-navy-800);
}

.sn-art-stroke-soft {
	stroke: var(--sn-navy-200);
}

.sn-art-stroke-mid {
	stroke: var(--sn-navy-400);
}

.sn-art-accent {
	fill: var(--sn-accent);
}

.sn-art-accent-stroke {
	stroke: var(--sn-accent-ink);
}

.sn-art-accent-soft {
	fill: var(--sn-orange-100);
}

.sn-art-highlight {
	fill: var(--sn-orange-100);
}

.sn-art-page-back {
	fill: var(--sn-navy-50);
	stroke: var(--sn-border);
	stroke-width: 1.5;
}

.sn-art-sleeve {
	stroke: var(--sn-orange-600);
}

.sn-art-wood {
	fill: var(--sn-orange-200);
}

.sn-art-chair {
	fill: var(--sn-navy-200);
}

.sn-art-desk {
	fill: var(--sn-navy-300);
}

.sn-art-ground {
	fill: var(--sn-navy-900);
	opacity: 0.07;
}

.sn-art-device {
	fill: var(--sn-navy-800);
}

.sn-art-device-edge {
	fill: var(--sn-navy-700);
}

.sn-art-skin {
	fill: var(--sn-art-skin);
}

.sn-art-skin-shade {
	fill: var(--sn-art-skin-shade);
}

.sn-art-hair {
	fill: var(--sn-art-hair);
}

.sn-art-blush {
	fill: var(--sn-accent);
	opacity: 0.22;
}

.sn-art-mouth {
	stroke: #7a3b26;
}

.sn-art-twinkle {
	fill: var(--sn-accent);
}

.sn-art-twinkle--2 {
	fill: var(--sn-navy-400);
}

.sn-art-glyph {
	fill: var(--sn-accent-ink);
	font: 800 16px/1 var(--sn-font-heading);
}

.sn-art-formula {
	fill: var(--sn-text);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 20px;
	font-style: italic;
}

.sn-art-formula--sm {
	font-size: 15px;
}

/* Quiz answers: chemical formulas, upright, the picked one in the accent ink. */
.sn-art-option {
	fill: var(--sn-text-soft);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 13px;
}

.sn-art-option--picked {
	fill: var(--sn-accent-ink);
	font-weight: 700;
}

[data-theme="dark"] .sn-art-option--picked {
	fill: var(--sn-accent);
}

/* Chemical formulas are set upright by convention. */
.sn-art-formula--upright {
	font-style: normal;
}

.sn-art-bubble {
	fill: #fff;
	opacity: 0.85;
}

/* Formula chip: the still frame shows the first subject only. */
.sn-art-subject--next {
	opacity: 0;
}

/* The classmates' avatars overlap; a card-coloured ring keeps them apart. */
.sn-art-avatar > circle:first-child {
	stroke: var(--sn-card);
	stroke-width: 3;
}

[data-theme="dark"] .sn-art-stop-a {
	stop-color: var(--sn-primary-soft);
}

[data-theme="dark"] .sn-art-stop-b {
	stop-color: var(--sn-primary-tint);
}

[data-theme="dark"] .sn-art-edge {
	stroke: var(--sn-border);
	stroke-width: 1.5;
}

[data-theme="dark"] .sn-art-shade {
	fill: #000;
	opacity: 0.25;
}

[data-theme="dark"] .sn-art-line,
[data-theme="dark"] .sn-art-soft {
	fill: var(--sn-surface-2);
}

[data-theme="dark"] .sn-art-line-strong {
	fill: var(--sn-primary-tint);
}

[data-theme="dark"] .sn-art-stroke-soft {
	stroke: var(--sn-primary-tint);
}

[data-theme="dark"] .sn-art-navy {
	fill: var(--sn-navy-300);
}

[data-theme="dark"] .sn-art-stroke {
	stroke: var(--sn-navy-300);
}

[data-theme="dark"] .sn-art-accent-soft,
[data-theme="dark"] .sn-art-highlight {
	fill: var(--sn-accent-soft);
}

[data-theme="dark"] .sn-art-page-back {
	fill: var(--sn-surface-2);
}

[data-theme="dark"] .sn-art-accent-stroke {
	stroke: var(--sn-accent);
}

[data-theme="dark"] .sn-art-glyph {
	fill: var(--sn-accent);
}

[data-theme="dark"] .sn-art-chair {
	fill: var(--sn-primary-tint);
}

[data-theme="dark"] .sn-art-desk {
	fill: var(--sn-navy-700);
}

[data-theme="dark"] .sn-art-ground {
	fill: #000;
	opacity: 0.2;
}

/* The laptop stays dark navy: a light lid would glare on a dark page. */
[data-theme="dark"] .sn-art-device {
	fill: #0a1a33;
}

[data-theme="dark"] .sn-art-device-edge {
	fill: var(--sn-navy-800);
}

/* Motion: slow and small, so it never competes with the headline.
   Only for visitors who have not asked for reduced motion; the still
   drawing is the finished frame (ring filled, answer ticked). */
@media (prefers-reduced-motion: no-preference) {
	.sn-art .sn-art-float,
	.sn-art .sn-art-eyes,
	.sn-art .sn-art-twinkle,
	.sn-art .sn-art-marker,
	.sn-art .sn-art-stamp,
	.sn-art .sn-art-pick,
	.sn-art .sn-art-orbit,
	.sn-art .sn-art-bubble {
		transform-box: fill-box;
		transform-origin: center;
	}

	.sn-art .sn-art-float {
		animation: sn-art-float 7s ease-in-out infinite;
	}

	.sn-art .sn-art-float--4 {
		animation-duration: 8s;
		animation-delay: -5s;
	}

	.sn-art .sn-art-float--5 {
		animation-duration: 7.5s;
		animation-delay: -2s;
	}

	/* Student: a blink every few seconds. */
	.sn-art .sn-art-eyes {
		animation: sn-art-blink 5s infinite;
	}

	/* Notes: a line gets highlighted, holds, and is highlighted again. */
	.sn-art .sn-art-marker {
		transform-origin: left center;
		animation: sn-art-marker 7s ease-out infinite;
	}

	/* Physics: the atom's orbits turn very slowly. */
	.sn-art .sn-art-orbit {
		animation: sn-art-spin 24s linear infinite;
	}

	/* Formula chip: physics, chemistry, biology, maths, 6s each, slower
	   than the headline's rotating word so the two don't compete. */
	.sn-art .sn-art-subject {
		animation: sn-art-subject 24s ease-in-out both infinite;
	}

	.sn-art .sn-art-subject:nth-of-type(2) {
		animation-delay: 6s;
	}

	.sn-art .sn-art-subject:nth-of-type(3) {
		animation-delay: 12s;
	}

	.sn-art .sn-art-subject:nth-of-type(4) {
		animation-delay: 18s;
	}

	/* Past paper: the "solved" stamp lands once when the page opens. */
	.sn-art .sn-art-stamp {
		animation: sn-art-stamp 0.6s 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) both;
	}

	/* Quiz: the answer is picked and ticked, holds, then resets. */
	.sn-art .sn-art-pick {
		animation: sn-art-pick 6s ease-out infinite;
	}

	.sn-art .sn-art-tick {
		stroke-dasharray: 1;
		animation: sn-art-tick 6s ease-out infinite;
	}

	/* Chemistry: bubbles rise in the flask. */
	.sn-art .sn-art-bubble {
		animation: sn-art-bubble 2.4s ease-in infinite;
	}

	.sn-art .sn-art-bubble:nth-of-type(2) {
		animation-delay: -0.8s;
	}

	.sn-art .sn-art-bubble:nth-of-type(3) {
		animation-delay: -1.6s;
	}

	.sn-art .sn-art-twinkle {
		animation: sn-art-twinkle 3s ease-in-out infinite;
	}

	.sn-art .sn-art-twinkle--2 {
		animation-delay: -1.5s;
	}
}

@keyframes sn-art-float {
	50% {
		transform: translateY(-7px);
	}
}

@keyframes sn-art-blink {
	0%,
	92%,
	100% {
		transform: scaleY(1);
	}

	95% {
		transform: scaleY(0.1);
	}
}

@keyframes sn-art-marker {
	0%,
	8% {
		transform: scaleX(0);
	}

	22%,
	88% {
		opacity: 1;
		transform: scaleX(1);
	}

	100% {
		opacity: 0;
		transform: scaleX(1);
	}
}

@keyframes sn-art-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes sn-art-subject {
	0% {
		opacity: 0;
		transform: translateY(5px);
	}

	4%,
	22% {
		opacity: 1;
		transform: none;
	}

	26%,
	100% {
		opacity: 0;
		transform: translateY(-5px);
	}
}

@keyframes sn-art-stamp {
	from {
		opacity: 0;
		transform: scale(1.6);
	}
}

@keyframes sn-art-pick {
	0%,
	20% {
		opacity: 0;
		transform: scale(0.85);
	}

	30%,
	88% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1);
	}
}

@keyframes sn-art-tick {
	0%,
	30% {
		stroke-dashoffset: 1;
	}

	42%,
	88% {
		stroke-dashoffset: 0;
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 0;
	}
}

@keyframes sn-art-bubble {
	0% {
		opacity: 0;
		transform: translateY(2px);
	}

	30% {
		opacity: 0.85;
	}

	100% {
		opacity: 0;
		transform: translateY(-12px);
	}
}

@keyframes sn-art-twinkle {
	50% {
		opacity: 0.4;
		transform: scale(0.7) rotate(20deg);
	}
}

/* Uploaded image: framed card with a soft offset panel behind it. */
.sn-hero--image .sn-hero__media::before {
	content: "";
	position: absolute;
	inset: 18px -18px -18px 18px;
	z-index: -1;
	border-radius: 28px;
	background: linear-gradient(140deg, var(--sn-navy-100), var(--sn-navy-200));
	opacity: 0.8;
}

[data-theme="dark"] .sn-hero--image .sn-hero__media::before {
	background: linear-gradient(140deg, var(--sn-primary-soft), var(--sn-primary-tint));
	opacity: 1;
}

.sn-hero__frame {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--sn-border);
	border-radius: 24px;
	background: var(--sn-navy-50);
	box-shadow: 0 2px 4px rgba(6, 53, 116, 0.04), 0 24px 60px rgba(6, 53, 116, 0.12);
}

.sn-hero__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

[data-theme="dark"] .sn-hero__image {
	filter: brightness(0.92);
}

/* Tablet and phone: stack, text first so search stays above the fold.
   Left-aligned, like every section below it. */
@media (max-width: 1023px) {
	.sn-hero--split .sn-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.sn-hero--split .sn-hero__search {
		max-width: 560px;
	}

	.sn-hero--split .sn-badge {
		margin-bottom: 18px;
	}

	.sn-hero__media {
		justify-self: center;
		max-width: 420px;
	}
}

@media (max-width: 560px) {
	.sn-hero--split .sn-stats {
		justify-content: space-between;
		width: 100%;
		margin-top: 32px;
	}

	.sn-hero--split .sn-stats__item {
		padding-inline: 10px;
	}

	.sn-hero--split .sn-stats__item:first-child {
		padding-left: 0;
	}

	.sn-hero--split .sn-stats__item:last-child {
		padding-right: 0;
	}
}

/* Smallest phones (320-360px): tighter spacing so the four stats fit. */
@media (max-width: 360px) {
	.sn-hero--split .sn-stats__item {
		padding-inline: 7px;
	}

	.sn-hero__media {
		max-width: 320px;
	}

	.sn-hero--image .sn-hero__media::before {
		inset: 12px -8px -12px 8px;
		border-radius: 22px;
	}

	.sn-hero__frame {
		border-radius: 18px;
	}
}

/* Question papers panel ------------------------------------------------------ */
.sn-papers {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
	padding: clamp(28px, 5vw, 56px);
	overflow: hidden;
	border-radius: 28px;
	background:
		radial-gradient(70% 90% at 100% 0%, var(--sn-panel-glow), transparent 60%),
		var(--sn-panel);
	color: var(--sn-panel-text);
}

.sn-papers::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(90deg, #000, transparent 60%);
	mask-image: linear-gradient(90deg, #000, transparent 60%);
	pointer-events: none;
}

[data-theme="dark"] .sn-papers {
	background:
		radial-gradient(70% 90% at 100% 0%, var(--sn-panel-glow), transparent 60%),
		var(--sn-panel);
	border: 1px solid var(--sn-border);
}

.sn-papers__intro {
	position: relative;
}

.sn-papers__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 20px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--sn-orange-300);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sn-papers .sn-section__title {
	margin-bottom: 12px;
	color: #fff;
}

.sn-papers__intro p {
	max-width: 400px;
	margin-bottom: 28px;
	font-size: 1.0625rem;
}

.sn-papers .sn-paper-list {
	position: relative;
}

.sn-papers .sn-paper {
	border-color: rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.05);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.sn-papers .sn-paper:hover {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.09);
	box-shadow: none;
}

.sn-papers .sn-paper__icon {
	background: rgba(246, 128, 36, 0.14);
	color: var(--sn-orange-300);
}

.sn-papers .sn-paper__title a {
	color: #fff;
}

.sn-papers .sn-paper__meta {
	color: var(--sn-navy-300);
}

.sn-papers .sn-paper__cta {
	color: var(--sn-orange-300);
}

@media (max-width: 900px) {
	.sn-papers {
		grid-template-columns: minmax(0, 1fr);
		border-radius: 22px;
	}
}

/* Features ------------------------------------------------------------------- */
/* Why students choose: bento grid ---------------------------------------------
   Wide and narrow cards alternate (2 + 1, then 1 + 2), so the grid reads
   diagonally. Each card shows a small preview of the real feature; the
   previews stay quiet (soft panels, thin lines) so this section doesn't
   compete with the navy papers panel above or the reviews below. */
.sn-bento {
	/* Small orange text on the light-orange chips: a shade deeper than the
	   accent ink so 11-12px labels stay readable (4.5:1+). */
	--sn-bento-chip-ink: color-mix(in srgb, var(--sn-accent-ink) 85%, #000);

	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-bento__card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
	padding: 28px;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-card);
	box-shadow: 0 1px 2px rgba(6, 53, 116, 0.04), 0 12px 32px rgba(6, 53, 116, 0.05);
}

/* Wide cards: text on the left, preview on the right. */
.sn-bento__card--wide {
	display: grid;
	grid-column: span 2;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	align-items: start; /* Text starts at the top, like the narrow cards. */
	gap: 32px;
}

.sn-bento__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 18px;
	border-radius: 12px;
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
}

/* The preview fills the card's height (rows are as tall as their tallest
   card), with its content centred, so no empty band opens up underneath. */
.sn-bento__card--wide > .sn-bento__preview {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: stretch;
	margin-top: 0;
}

.sn-bento__card--wide > .sn-demo-syllabus > * {
	width: 100%;
}

.sn-bento__card--accent .sn-bento__icon {
	background: var(--sn-accent-soft);
	color: var(--sn-accent-ink);
}

[data-theme="dark"] .sn-bento__card--accent .sn-bento__icon {
	color: var(--sn-accent);
}

.sn-bento__title {
	margin: 0 0 8px;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.sn-bento__text {
	margin: 0;
	color: var(--sn-muted);
	font-size: 0.9375rem;
	line-height: 1.65;
}

/* One-line previews for the phone list (below); hidden on larger screens. */
.sn-bento__mini {
	display: none;
}

/* Preview panel: a soft inset "screen" for the feature. */
/* Previews sit a fixed 24px under their text (the card's gap): a visual
   belongs next to what it illustrates. Spare height in a row falls at the
   bottom of the shorter card, never between text and preview. */
.sn-bento__preview {
	padding: 16px;
	border: 1px solid var(--sn-border);
	border-radius: 14px;
	background: var(--sn-surface);
	font-size: 0.875rem;
}

/* Syllabus: chapters in order, two done, one being read. */
.sn-demo-syllabus__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 2px 4px 10px;
	color: var(--sn-primary);
	font-size: 0.8125rem;
	font-weight: 700;
}

.sn-demo-syllabus__list {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-demo-syllabus__list li {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid transparent;
	border-radius: 10px;
	color: var(--sn-muted);
	line-height: 1.3;
}

.sn-demo-syllabus__list li > span {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--sn-border);
	border-radius: 50%;
	background: var(--sn-card);
	color: var(--sn-muted);
	font-size: 0.75rem;
	font-weight: 700;
}

.sn-demo-syllabus__list .is-done {
	color: var(--sn-text-soft);
}

.sn-demo-syllabus__list .is-done > span {
	border-color: transparent;
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
}

.sn-demo-syllabus__list .is-done .sn-icon {
	color: var(--sn-primary);
}

.sn-demo-syllabus__list .is-current {
	border-color: color-mix(in srgb, var(--sn-accent) 35%, var(--sn-border));
	background: var(--sn-card);
	color: var(--sn-text);
	font-weight: 600;
	box-shadow: 0 4px 14px rgba(6, 53, 116, 0.06);
}

.sn-demo-syllabus__list .is-current > span {
	border-color: transparent;
	background: var(--sn-accent-ink); /* White on the deep orange: 4.9:1. */
	color: #fff;
}

[data-theme="dark"] .sn-demo-syllabus__list .is-current > span {
	background: var(--sn-accent);
	color: var(--sn-navy-950);
}

.sn-demo-syllabus__list em {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--sn-accent-soft);
	color: var(--sn-bento-chip-ink);
	font-size: 0.6875rem;
	font-style: normal;
	font-weight: 700;
}

[data-theme="dark"] .sn-demo-syllabus__list em {
	color: var(--sn-accent);
}

/* Revision: the notes' own Exam tip box at preview size. It's framed
   already, so no panel around it. */
.sn-demo-revision {
	padding: 0;
	border: 0;
	background: none;
}

.sn-demo-revision > div {
	padding: 10px 12px 10px 14px;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.sn-demo-revision p {
	margin: 0;
}

/* Report: the same bar that closes every note. */
/* Text and button in one row. No flag here: the card's own icon above is
   already the flag. (The narrowest card is ~270px inside, which fits.) */
.sn-demo-report {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	border-color: color-mix(in srgb, var(--sn-primary) 18%, transparent);
	background: var(--sn-primary-soft);
}

.sn-demo-report__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.35;
}

.sn-demo-report__text strong {
	color: var(--sn-text);
	font-family: var(--sn-font-heading);
}

.sn-demo-report__text span {
	color: var(--sn-text-soft);
	font-size: 0.8125rem;
}

.sn-demo-report__btn {
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--sn-primary);
	color: var(--sn-on-primary);
	font-size: 0.8125rem;
	font-weight: 700;
	white-space: nowrap;
}

/* Practice: a real question that opens, styled like the ones in notes. */
.sn-demo-practice {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sn-demo-practice__hint {
	align-self: flex-start;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--sn-accent-soft);
	color: var(--sn-bento-chip-ink);
	font-size: 0.75rem;
	font-weight: 700;
}

[data-theme="dark"] .sn-demo-practice__hint {
	color: var(--sn-accent);
}

.sn-demo-practice__q {
	border: 1px solid var(--sn-border);
	border-radius: 12px;
	background: var(--sn-card);
	box-shadow: 0 4px 14px rgba(6, 53, 116, 0.06);
}

.sn-demo-practice__q summary {
	position: relative;
	display: block;
	padding: 12px 44px 12px 14px;
	color: var(--sn-text);
	font-weight: 700;
	line-height: 1.45;
	cursor: pointer;
	list-style: none;
}

.sn-demo-practice__q summary::-webkit-details-marker {
	display: none;
}

.sn-demo-practice__q summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid var(--sn-primary);
	border-bottom: 2px solid var(--sn-primary);
	transform: rotate(45deg);
	transition: transform 0.2s;
}

.sn-demo-practice__q[open] summary::after {
	margin-top: -2px;
	transform: rotate(-135deg);
}

.sn-demo-practice__q summary:hover {
	color: var(--sn-primary);
}

.sn-demo-practice__q summary:focus-visible {
	border-radius: 12px;
	outline: 3px solid var(--sn-navy-300);
	outline-offset: 2px;
}

.sn-demo-practice__q[open] summary {
	border-bottom: 1px solid var(--sn-border);
}

.sn-demo-practice__q p {
	margin: 0;
	padding: 10px 14px 12px;
	color: var(--sn-text-soft);
}

/* The next question, faded: hints there are more. */
.sn-demo-practice__more {
	padding: 10px 14px;
	border: 1px dashed var(--sn-border);
	border-radius: 12px;
	color: var(--sn-muted);
	font-weight: 600;
}

/* Tablets and small laptops: two columns; wide cards span both, narrow ones
   pair up. (Three columns only from 1081px: below that the narrow cards get
   too tight for their titles and previews.) */
@media (max-width: 1080px) {
	.sn-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sn-bento__card--wide {
		grid-column: span 2;
	}
}

/* Here the two narrow cards sit side by side, so they share their inner rows
   (subgrid): the text row is as tall as the longer description, and both
   previews start on the same line, end on the same line and match in height,
   whatever the copy length. Each card spans two rows of the main grid: one
   for the text, one for the preview. */
@media (min-width: 730px) and (max-width: 1080px) {
	.sn-bento__card {
		grid-row: span 2;
	}

	.sn-bento__card:not(.sn-bento__card--wide) {
		display: grid;
		grid-template-rows: subgrid;
		row-gap: 24px;
	}

	.sn-bento__card:not(.sn-bento__card--wide) > .sn-bento__preview {
		align-self: stretch;
	}

	/* The Exam tip box fills its share and keeps its text centred. */
	.sn-demo-revision {
		display: flex;
	}

	.sn-demo-revision > div {
		display: flex;
		flex: 1;
		align-items: center;
	}
}

/* Narrow tablets and phones: a compact list, about one screen tall.
   The four points become rows (icon beside the text) inside one card, and
   only the practice question keeps its preview: it's the one you can use,
   and the others get a one-line version instead (chips). */
@media (max-width: 729px) {
	.sn-bento {
		display: block;
		overflow: hidden;
		border: 1px solid var(--sn-border);
		border-radius: var(--sn-radius-lg);
		background: var(--sn-card);
		box-shadow: 0 1px 2px rgba(6, 53, 116, 0.04), 0 12px 32px rgba(6, 53, 116, 0.05);
	}

	.sn-bento__card,
	.sn-bento__card--wide {
		display: block;
		padding: 18px 16px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.sn-bento__card + .sn-bento__card {
		border-top: 1px solid var(--sn-border);
	}

	.sn-bento__body {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 14px;
	}

	.sn-bento__icon {
		grid-row: span 3;
		width: 40px;
		height: 40px;
		margin-bottom: 0;
	}

	.sn-bento__title {
		margin-bottom: 4px;
		font-size: 1.0625rem;
	}

	.sn-bento__preview:not(.sn-demo-practice) {
		display: none;
	}

	/* Every row ends with a one-line proof, all built the same way:
	   small pills in the row's own colours. */
	.sn-bento__mini {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
		margin-top: 10px;
		font-size: 0.75rem;
		font-weight: 700;
		line-height: 1;
	}

	.sn-mini-chapters > span {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 5px 9px;
		border-radius: 999px;
		background: var(--sn-primary-soft);
		color: var(--sn-primary);
	}

	.sn-mini-chapters > .is-current {
		background: var(--sn-accent-soft);
		color: var(--sn-bento-chip-ink);
	}

	/* A soft label like the chapter chips: a filled button here would invite a
	   tap that leads nowhere. */
	.sn-mini-report {
		gap: 5px;
		justify-self: start;
		padding: 5px 10px;
		border-radius: 999px;
		background: var(--sn-primary-soft);
		color: var(--sn-primary);
	}

	[data-theme="dark"] .sn-mini-chapters > .is-current {
		color: var(--sn-accent);
	}

	/* Practice: just the question, under its row and lined up with the text,
	   at the same weight as the other rows' pills. */
	.sn-bento__card--wide > .sn-demo-practice {
		margin: 10px 0 0 54px;
		padding: 0;
		border: 0;
		background: none;
	}

	.sn-demo-practice__hint,
	.sn-demo-practice__more {
		display: none;
	}

	.sn-demo-practice__q {
		box-shadow: none;
	}

	.sn-demo-practice__q summary {
		padding: 10px 40px 10px 12px;
		font-size: 0.875rem;
	}

	.sn-demo-practice__q summary::after {
		right: 14px;
	}

	.sn-demo-practice__q p {
		padding: 8px 12px 10px;
		font-size: 0.875rem;
	}
}

/* Why students choose: "Cards" layout ---------------------------------------
   Simple icon cards, all the same width. Four sit in one row; three, five or
   six use rows of three, with a short last row centred. */
.sn-feature-cards {
	--sn-fc-cols: 3;
	--sn-fc-gap: 20px;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sn-fc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-feature-cards--4 {
	--sn-fc-cols: 4;
}

.sn-feature-cards--1,
.sn-feature-cards--2 {
	--sn-fc-cols: 2;
}

.sn-feature-card {
	flex: 0 0 calc((100% - (var(--sn-fc-cols) - 1) * var(--sn-fc-gap)) / var(--sn-fc-cols));
	min-width: 0;
	padding: 28px;
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-card);
	box-shadow: 0 1px 2px rgba(6, 53, 116, 0.04), 0 12px 32px rgba(6, 53, 116, 0.05);
}

.sn-feature-card__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 18px;
	border-radius: 14px;
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
}

.sn-feature-card--accent .sn-feature-card__icon {
	background: var(--sn-accent-soft);
	color: var(--sn-accent-ink);
}

[data-theme="dark"] .sn-feature-card--accent .sn-feature-card__icon {
	color: var(--sn-accent);
}

.sn-feature-card__title {
	margin: 0 0 8px;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.sn-feature-card__text {
	margin: 0;
	color: var(--sn-muted);
	font-size: 0.9375rem;
	line-height: 1.65;
}

/* Tablets: two per row. */
@media (max-width: 1080px) {
	.sn-feature-cards,
	.sn-feature-cards--4 {
		--sn-fc-cols: 2;
	}
}

/* Phones: one per row, icon beside the text (like the bento list). */
@media (max-width: 729px) {
	.sn-feature-cards,
	.sn-feature-cards--4 {
		--sn-fc-cols: 1;
		--sn-fc-gap: 12px;
	}

	.sn-feature-card {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr);
		column-gap: 14px;
		padding: 20px 18px;
	}

	.sn-feature-card__icon {
		width: 44px;
		height: 44px;
		margin: 0;
	}

	.sn-feature-card__title {
		margin: 2px 0 4px;
		font-size: 1.0625rem;
	}
}

/* Testimonials: swipeable row --------------------------------------------------
   A native scroll-snap strip within the page width: 3 cards on desktop, 2 on
   tablets, 1 plus a peek of the next on phones. Works without JS (swipe,
   trackpad, arrow keys); home.js adds the arrows and dots. */
.sn-reviews__track {
	--sn-reviews-gap: 20px;
	--sn-reviews-per-view: 3;
	position: relative; /* Card offsets are measured from here (home.js). */
	display: flex;
	align-items: stretch; /* Equal-height cards; names line up along the bottom. */
	gap: var(--sn-reviews-gap);
	margin: 0;
	padding: 4px 0 8px; /* Room for focus rings inside the scroll area. */
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.sn-reviews__track::-webkit-scrollbar {
	display: none;
}

.sn-reviews__track:focus {
	outline: none;
}

.sn-reviews__track:focus-visible {
	outline: 3px solid var(--sn-navy-300);
	outline-offset: 4px;
	border-radius: var(--sn-radius-lg);
}

/* While a review is open, don't stretch the other cards to its height. */
.sn-reviews__track:has(.is-open) {
	align-items: flex-start;
}

.sn-reviews__track > .sn-testimonial {
	flex: 0 0 calc((100% - (var(--sn-reviews-per-view) - 1) * var(--sn-reviews-gap)) / var(--sn-reviews-per-view));
	scroll-snap-align: start;
}

.sn-reviews .sn-testimonial__person {
	min-height: 0;
	padding-bottom: 16px;
}

@media (max-width: 1023px) {
	.sn-reviews__track {
		--sn-reviews-per-view: 2;
	}
}

@media (max-width: 640px) {
	.sn-reviews__track {
		--sn-reviews-gap: 12px;
	}

	/* One card plus a peek of the next, so it's clear the row swipes. */
	.sn-reviews__track > .sn-testimonial {
		flex-basis: 86%;
	}
}

/* Previous / next and position dots */
.sn-reviews__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 24px;
}

.sn-reviews__controls[hidden] {
	display: none;
}

.sn-reviews__arrow {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--sn-border);
	border-radius: 50%;
	background: var(--sn-card);
	color: var(--sn-primary);
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.sn-reviews__arrow:hover:not(:disabled) {
	border-color: var(--sn-primary);
	background: var(--sn-primary-soft);
}

.sn-reviews__arrow:disabled {
	color: var(--sn-muted);
	opacity: 0.45;
	cursor: default;
}

.sn-reviews__dots {
	display: flex;
	align-items: center;
}

/* 24px tap area around an 8px dot; the current one stretches into a pill. */
.sn-reviews__dot {
	display: grid;
	place-items: center;
	width: 24px; /* Comfortable tap size (24 x 24 minimum). */
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.sn-reviews__dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--sn-border);
	transition: width 0.25s, background-color 0.25s;
}

.sn-reviews__dot:hover::before {
	background: var(--sn-muted);
}

.sn-reviews__dot.is-active {
	width: 32px;
}

.sn-reviews__dot.is-active::before {
	width: 20px;
	background: var(--sn-primary);
}

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

.sn-testimonial {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px 24px 8px; /* The name area reserves its own space at the bottom. */
	border: 1px solid var(--sn-border);
	border-radius: var(--sn-radius-lg);
	background: var(--sn-card);
}

/* Revealed reviews receive focus; show the ring only for keyboard users. */
.sn-testimonial:focus {
	outline: none;
}

.sn-testimonial:focus-visible {
	outline: 3px solid var(--sn-navy-300);
	outline-offset: 2px;
}

/* Star rating: filled stars in the accent, unfilled ones as quiet outlines. */
.sn-stars {
	display: flex;
	gap: 3px;
	color: var(--sn-border);
}

.sn-stars .sn-icon {
	width: 18px;
	height: 18px;
	fill: currentColor;
	stroke-width: 1.5;
}

.sn-stars .is-on {
	color: var(--sn-accent);
}

.sn-testimonial__text {
	margin: 0;
	color: var(--sn-text);
	font-size: 1rem;
	line-height: 1.7;
}

/* Long reviews: 3 lines, then "Read more" (home.js). Keeps the row's cards
   close to one height, since every card takes the tallest card's height. */
.sn-reviews.is-enhanced .sn-testimonial__text {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.sn-reviews.is-enhanced .sn-testimonial__text.is-open {
	display: block;
	overflow: visible;
	-webkit-line-clamp: unset;
}

.sn-testimonial__text p + p {
	margin-top: 0.6em;
}

.sn-testimonial__toggle {
	align-self: flex-start;
	margin-top: -6px;
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--sn-primary);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.sn-testimonial__toggle:hover {
	text-decoration: underline;
}

.sn-testimonial__text p {
	margin: 0;
}

.sn-testimonial__person {
	margin-top: auto; /* Names line up at the bottom of each row. */
	display: flex;
	align-items: flex-start;
	/* Room for a name plus a two-line school, so names stay level across a row
	   whether or not the school text wraps. */
	min-height: calc(19px + 56px); /* padding + divider, then name + 2 school lines */
	gap: 12px;
	padding-top: 18px;
	border-top: 1px solid var(--sn-border);
}

/* Name + school text. (Excludes the initials circle, which is also a span.) */
.sn-testimonial__person > span:not(.sn-testimonial__avatar) {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.sn-testimonial__person strong {
	font-size: 0.9375rem;
	font-weight: 600;
}

.sn-testimonial__role {
	color: var(--sn-muted);
	font-size: 0.8125rem;
}

.sn-testimonial__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.sn-testimonial__avatar--initial {
	display: grid;
	place-items: center;
	line-height: 1;
	flex-shrink: 0;
	background: var(--sn-primary-soft);
	color: var(--sn-primary);
	font-family: var(--sn-font-heading);
	font-weight: 700;
}

/* Accent touches (orange used only where it guides) -------------------------- */

/* Signature: a short orange rule above each main section heading. */
.sn-main > .sn-section .sn-section__head .sn-section__title::before {
	content: "";
	display: block;
	width: 36px;
	height: 4px;
	margin-bottom: 14px;
	border-radius: 999px;
	background: var(--sn-accent);
}

.sn-main > .sn-section .sn-section__head--center .sn-section__title::before {
	margin-inline: auto;
}

/* Hero: "Free" stat. */
/* Grade finder: the selected grade gets an orange indicator. */
.sn-grade-finder .sn-tabs__tab {
	position: relative;
	white-space: nowrap; /* "Grade 12" never splits over two lines. */
}

/* Phones, where tabs stretch to fill each row: a lone tab on a wrapped last
   row shouldn't stretch across the whole row (at most half, centred). A single
   grade keeps its natural width. */
@media (max-width: 600px) {
	.sn-grade-finder .sn-tabs__tab:not(:only-child) {
		max-width: 50%;
	}
}

.sn-grade-finder .sn-tabs__tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	bottom: 5px;
	left: 50%;
	width: 18px;
	height: 3px;
	border-radius: 999px;
	background: var(--sn-accent);
	transform: translateX(-50%);
}

/* Subject cards: orange arrow and edge on hover/focus. */
.sn-grade-finder .sn-subject-card:hover,
.sn-grade-finder .sn-subject-card:focus-visible {
	border-color: color-mix(in srgb, var(--sn-accent) 55%, var(--sn-border));
}

.sn-grade-finder .sn-subject-card:hover .sn-subject-card__arrow,
.sn-grade-finder .sn-subject-card:focus-visible .sn-subject-card__arrow {
	color: var(--sn-accent);
}

/* The readers number in the reviews tagline. */
.sn-testimonials__count {
	color: var(--sn-text);
	font-weight: 700;
}

/* Recognition line under the reviews heading: a quiet pill, not a banner. */
.sn-reviews-awards {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 10px;
	margin: 16px 0 0;
	padding: 7px 16px;
	border: 1px solid var(--sn-border);
	border-radius: 999px;
	background: var(--sn-card);
	color: var(--sn-text-soft);
	font-size: 0.875rem;
	line-height: 1.45;
}

.sn-reviews-awards > .sn-icon {
	flex-shrink: 0;
	color: var(--sn-accent-ink);
}

[data-theme="dark"] .sn-reviews-awards > .sn-icon {
	color: var(--sn-accent);
}

.sn-reviews-awards a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--sn-link);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.sn-reviews-awards a:hover {
	text-decoration: underline;
}

/* Phones: a centred two-line note instead of a long pill. */
@media (max-width: 560px) {
	.sn-reviews-awards {
		padding: 8px 14px;
		border-radius: 16px;
		text-align: center;
	}
}

/* Testimonials: cards sit on a light tint over white. */
.sn-testimonials .sn-testimonial {
	border-color: transparent;
	background: var(--sn-surface);
}

/* Latest notes: 3 cards on phones (the button leads to the rest). */
@media (max-width: 640px) {
	.sn-latest .sn-grid > :nth-child(n + 4) {
		display: none;
	}
}

/* "Latest notes" is already about new notes; the badge is for mixed listings. */
.sn-latest .sn-card__new {
	display: none;
}

/* Find your notes: tabs sit on the edge of a soft panel holding the subjects,
   giving the section a clear focal area instead of cards floating in space. */
.sn-grade-finder .sn-tabs {
	position: relative;
	z-index: 1;
	/* Never scroll sideways (hidden tabs go unnoticed, and the hidden ones
	   would be the highest grades): when the grades don't fit on one row,
	   they wrap onto more rows, each row filled evenly. One row stays a pill;
	   several rows read as a rounded panel of choices. */
	flex-wrap: wrap;
	justify-content: center;
	overflow: visible;
	border-radius: 24px;
	margin-bottom: -24px;
	background: var(--sn-card);
	box-shadow: 0 6px 18px rgba(6, 53, 116, 0.08);
}

.sn-grade-finder .sn-tabpanel {
	padding: 52px clamp(16px, 3vw, 32px) clamp(24px, 3vw, 32px);
	border: 1px solid var(--sn-border);
	border-radius: 24px;
	background:
		radial-gradient(60% 120% at 50% 0%, color-mix(in srgb, var(--sn-accent) 6%, transparent), transparent 70%),
		var(--sn-surface);
}

.sn-grade-finder .sn-tabs__tab[aria-selected="true"] {
	background: var(--sn-primary-soft);
}

.sn-grade-finder .sn-subject-card {
	box-shadow: 0 1px 2px rgba(6, 53, 116, 0.05);
}

.sn-grade-finder .sn-empty--compact {
	border-color: color-mix(in srgb, var(--sn-text) 12%, var(--sn-border));
	background: var(--sn-card);
}

/* Rotating word in the hero and the "Free" stat: brand orange, treated the
   same in both modes. Light mode uses the orange one step deeper (#DD6A12,
   3.2:1 on the soft background; large bold text needs 3:1); the brand
   orange itself (#F68025) is 2.5:1 there. Dark mode: the brand orange. */
.sn-rotator,
.sn-stats__item--accent dd {
	color: var(--sn-hero-orange, var(--sn-orange-600));
}

.sn-rotator {
	font-weight: 700; /* One step above the line's 600: clear, not shouting. */
}

[data-theme="dark"] .sn-rotator,
[data-theme="dark"] .sn-stats__item--accent dd {
	color: var(--sn-accent);
}

/* Latest notes: cover band on each card --------------------------------------
   See sajhanotes_card_cover(). A subject tint (--sn-cover), a dot pattern, the
   subject icon in a white tile, its name, and a large faded icon. */
.sn-card--cover {
	overflow: hidden;
	padding-top: 0;
}

.sn-cover {
	--sn-cover: var(--sn-subject);
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 116px;
	margin: 0 -22px 8px;
	padding: 0 22px;
	overflow: hidden;
	border-bottom: 1px solid color-mix(in srgb, var(--sn-cover) 14%, var(--sn-border));
	background:
		radial-gradient(color-mix(in srgb, var(--sn-cover) 20%, transparent) 1px, transparent 1.4px) 0 0 / 14px 14px,
		linear-gradient(135deg, color-mix(in srgb, var(--sn-cover) 13%, var(--sn-card)), color-mix(in srgb, var(--sn-cover) 5%, var(--sn-card)));
}

/* A colour per subject (Customize > Sajha Notes > Colours). */
.sn-cover--chemistry { --sn-cover: #0f766e; }
.sn-cover--lab { --sn-cover: #0e7490; }
.sn-cover--physics { --sn-cover: #4f46e5; }
.sn-cover--biology { --sn-cover: #15803d; }
.sn-cover--maths { --sn-cover: #7c3aed; }
.sn-cover--eph { --sn-cover: #be123c; }
.sn-cover--science { --sn-cover: #0369a1; }
.sn-cover--english,
.sn-cover--nepali { --sn-cover: #b45309; }
.sn-cover--computer { --sn-cover: #334155; }
.sn-cover--paper { --sn-cover: var(--sn-navy-800); }

.sn-cover__icon {
	position: relative;
	z-index: 1;
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--sn-card);
	color: var(--sn-cover);
	box-shadow: 0 1px 2px rgba(6, 53, 116, 0.08), 0 6px 16px color-mix(in srgb, var(--sn-cover) 18%, transparent);
	transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.sn-cover__label {
	position: relative;
	z-index: 1;
	min-width: 0;
	color: color-mix(in srgb, var(--sn-cover) 70%, var(--sn-text));
	font-family: var(--sn-font-heading);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
}

.sn-cover__art {
	position: absolute;
	right: -18px;
	bottom: -30px;
	color: var(--sn-cover);
	opacity: 0.12;
	transform: rotate(-12deg);
	transition: transform 0.3s ease, opacity 0.3s;
}

.sn-cover__new {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
	margin: 0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.sn-card--cover:hover .sn-cover__icon {
	background: var(--sn-cover);
	color: #fff;
	transform: scale(1.04);
}

.sn-card--cover:hover .sn-cover__art {
	opacity: 0.18;
	transform: rotate(-4deg) scale(1.05);
}

/* Featured image: a photo fills the band. A PNG (usually a diagram, often
   transparent) sits whole on a small white sheet in the middle of the
   subject's patterned band: nothing is cut off, and it reads in dark mode
   without a glaring full-width white block. */
.sn-cover.sn-cover--image {
	padding: 0;
}

.sn-cover--image:not(.sn-cover--fit) {
	background: var(--sn-surface);
}

.sn-cover__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Category on the left, the diagram on the right: they never overlap. */
.sn-cover.sn-cover--fit {
	flex-direction: row-reverse;
	justify-content: space-between;
	padding: 10px 14px 10px 22px;
}

.sn-cover--fit .sn-cover__tag {
	position: static;
	flex-shrink: 1;
	min-width: 0;
}

.sn-cover--fit .sn-cover__img {
	flex-shrink: 0;
	width: auto;
	max-width: 58%;
	height: 100%;
	padding: 4px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 6px 16px rgba(6, 53, 116, 0.12);
	object-fit: contain;
}

.sn-cover__tag {
	position: absolute;
	bottom: 10px;
	left: 12px;
	padding: 3px 9px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--sn-card) 92%, transparent);
	color: var(--sn-text);
	font-size: 0.75rem;
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.sn-card--cover:hover .sn-cover__img {
	transform: scale(1.03);
}

.sn-cover__img {
	transition: transform 0.3s ease;
}

/* Dark mode: deeper tints, lighter icons. */
[data-theme="dark"] .sn-cover {
	border-bottom-color: color-mix(in srgb, var(--sn-cover) 30%, var(--sn-border));
	background:
		radial-gradient(color-mix(in srgb, var(--sn-cover) 35%, transparent) 1px, transparent 1.4px) 0 0 / 14px 14px,
		linear-gradient(135deg, color-mix(in srgb, var(--sn-cover) 26%, var(--sn-card)), color-mix(in srgb, var(--sn-cover) 10%, var(--sn-card)));
}

[data-theme="dark"] .sn-cover__icon {
	border: 1px solid color-mix(in srgb, var(--sn-cover) 45%, transparent);
	background: color-mix(in srgb, var(--sn-cover) 34%, var(--sn-card));
	color: color-mix(in srgb, var(--sn-cover) 40%, #fff);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .sn-cover__label {
	color: color-mix(in srgb, var(--sn-cover) 35%, #fff);
}

[data-theme="dark"] .sn-cover__art {
	color: color-mix(in srgb, var(--sn-cover) 50%, #fff);
	opacity: 0.1;
}

[data-theme="dark"] .sn-card--cover:hover .sn-cover__icon {
	background: color-mix(in srgb, var(--sn-cover) 60%, #fff);
	color: var(--sn-navy-950);
}

@media (max-width: 640px) {
	.sn-cover {
		height: 96px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sn-cover__icon,
	.sn-cover__art,
	.sn-cover__img {
		transition: none;
	}
}

/* "Find your notes": the icon tile fills on hover, like the Notes menu. */
.sn-grade-finder .sn-subject-card__icon {
	transition: background-color 0.2s, color 0.2s;
}

.sn-grade-finder .sn-subject-card:hover .sn-subject-card__icon,
.sn-grade-finder .sn-subject-card:focus-visible .sn-subject-card__icon {
	background: var(--sn-primary);
	color: var(--sn-on-primary);
}

/* Hero search button: a clear hover (lift, glow, arrow nudge). */
.sn-search-form--hero-lg .sn-search-form__submit::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sn-search-form--hero-lg .sn-search-form__submit:hover {
	box-shadow: 0 6px 18px color-mix(in srgb, var(--sn-primary) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.14);
	transform: translateY(-1px);
}

.sn-search-form--hero-lg .sn-search-form__submit:hover::after {
	transform: translateX(3px);
}

.sn-search-form--hero-lg .sn-search-form__submit:active {
	transform: translateY(0);
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.sn-search-form--hero-lg .sn-search-form__submit:hover,
	.sn-search-form--hero-lg .sn-search-form__submit:hover::after {
		transform: none;
	}
}

/* Button after a section's cards ("Explore more notes"), centred. */
.sn-section__more {
	display: flex;
	justify-content: center;
	margin-top: clamp(28px, 4vw, 40px);
}