/**
 * SchoolCanvas v2 design system – designed pages (templates/designed.php).
 * Direction: Zoho's structure and product proof + Gusto's warmth and typography.
 * Everything is scoped under .v2 / body.sc-v2 so the rest of the theme is unaffected.
 */

@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/fraunces-var-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.sc-v2 {
	--v2-ink: #0f1b33;
	--v2-body: #3b4457;
	--v2-muted: #6b7385;
	--v2-line: rgba(15, 27, 51, 0.1);
	--v2-cream: #faf7f2;
	--v2-cream-2: #f3ede3;
	--v2-white: #fff;
	--v2-blue: #2867b2;
	--v2-blue-deep: #17467f;
	--v2-blue-tint: #e6effa;
	--v2-purple: #523f6f;
	--v2-assist: #5b2a86;
	--v2-assist-2: #8e2d8f;
	--v2-magenta: #c2185b;
	--v2-yellow: #ecb32d;
	--v2-yellow-tint: #fdf2d6;
	--v2-green: #22a06b;
	--v2-green-tint: #def5ea;
	--v2-pink: #e01c5a;
	--v2-pink-tint: #fde4ec;
	--v2-serif: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
	--v2-sans: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
	--v2-text: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--v2-radius: 0.75rem;
	--v2-radius-sm: 0.6rem;
	--v2-shadow: 0 1px 2px rgba(15, 27, 51, 0.06), 0 12px 32px -12px rgba(15, 27, 51, 0.18);
	--v2-shadow-lg: 0 2px 6px rgba(15, 27, 51, 0.06), 0 32px 64px -24px rgba(15, 27, 51, 0.32);
	background: var(--v2-cream);
}

.v2 {
	color: var(--v2-body);
	font-family: var(--v2-text);
	font-size: 1.0625rem;
	line-height: 1.65;
	overflow-x: clip;
}

.v2 *,
.v2 *::before,
.v2 *::after {
	box-sizing: border-box;
}

.v2 img {
	max-width: 100%;
	height: auto;
}

.v2 a {
	color: var(--v2-blue);
}

/* Layout ------------------------------------------------------------------- */

.v2-wrap {
	/* rem, not px: 77.5rem = 1240px at the 16px root, and grows with the large-screen root scaling (theme.css). */
	width: min(100% - 2.5rem, 77.5rem);
	margin-inline: auto;
}

.v2-wrap--narrow {
	width: min(100% - 2.5rem, 55rem);
}

/* Large screens and smart boards (≥1600px): the root font size grows (see "Large screens" in theme.css),
 * so every rem-based size – type, spacing, cards, mock-ups and .v2-wrap – scales together and the page
 * reads like the 1440 layout, only bigger. The side gutters grow with it. */
@media (min-width: 1600px) {
	.v2-wrap { width: min(100% - 5rem, 77.5rem); }
	.v2-wrap--narrow { width: min(100% - 5rem, 55rem); }
}

/* Section rhythm (client, 3 Oct 2026): compact spacing as first tuned on the Transport page.
 * The Assist page keeps the earlier clamp(4rem, 8vw, 7rem) through a page-scoped override. */
.v2-section {
	padding-block: clamp(2.5rem, 4.5vw, 4rem);
}

.v2-section--tight {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.v2-section--white { background: var(--v2-white); }
.v2-section--cream2 { background: var(--v2-cream-2); }
.v2-section--blue { background: var(--v2-blue); color: #fff; }
.v2-section--ink { background: var(--v2-ink); color: rgba(255, 255, 255, 0.82); }
.v2-section--assist {
	background: radial-gradient(80% 60% at 85% 10%, rgba(194, 24, 91, 0.45), transparent 60%),
		radial-gradient(60% 60% at 0% 100%, rgba(40, 103, 178, 0.35), transparent 60%),
		linear-gradient(135deg, #3d1c63 0%, var(--v2-assist) 55%, #6d2482 100%);
	color: rgba(255, 255, 255, 0.86);
}

.v2-grid {
	display: grid;
	gap: 1.5rem;
}

.v2-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

.v2-split--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.v2-split--wide-right { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }

@media (max-width: 991.98px) {
	.v2-split,
	.v2-split--wide-left,
	.v2-split--wide-right {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Type --------------------------------------------------------------------- */

.v2 h1,
.v2 h2,
.v2 h3,
.v2 h4 {
	margin: 0;
	color: var(--v2-ink);
}

.v2-dark h1, .v2-dark h2, .v2-dark h3, .v2-dark h4,
.v2-section--ink h2, .v2-section--ink h3, .v2-section--ink h4,
.v2-section--assist h2, .v2-section--assist h3, .v2-section--assist h4,
.v2-section--blue h2, .v2-section--blue h3 {
	color: #fff;
}

.v2-h1 {
	font-family: var(--v2-serif);
	font-size: clamp(2.75rem, 5.6vw, 4.75rem);
	font-weight: 600;
	font-variation-settings: "opsz" 144;
	line-height: 1.02;
	letter-spacing: -0.025em;
}

.v2-h2 {
	font-family: var(--v2-serif);
	font-size: clamp(2.125rem, 4vw, 3.25rem);
	font-weight: 600;
	font-variation-settings: "opsz" 120;
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.v2-h3 {
	font-family: var(--v2-sans);
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.v2-h4 {
	font-family: var(--v2-sans);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
}

.v2-accent { color: var(--v2-blue); }
.v2-accent--yellow { color: var(--v2-yellow); }
.v2-accent--pink { color: #ff8db5; }

.v2-lead {
	margin: 1.25rem 0 0;
	font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
	line-height: 1.6;
}

.v2-muted { color: var(--v2-muted); }
.v2-small { font-size: 0.875rem; }
.v2-center { text-align: center; }
.v2-center .v2-lead { margin-inline: auto; }
.v2-maxw { max-width: 46rem; }
.v2-center.v2-maxw { margin-inline: auto; }

.v2-head {
	margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.v2-pill {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 1.25rem;
	padding: 0.35rem 0.9rem;
	border: 1px solid rgba(40, 103, 178, 0.28);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.7);
	color: var(--v2-blue-deep);
	font-family: var(--v2-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
}

.v2-pill--dark {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.v2-pill-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--v2-green);
	box-shadow: 0 0 0 4px rgba(34, 160, 107, 0.18);
}

/* Buttons ------------------------------------------------------------------ */

.v2-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.v2-center .v2-btns { justify-content: center; }

.v2-btn {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	padding: 0.9rem 1.5rem;
	border: 2px solid transparent;
	border-radius: 0.5rem; /* less rounded everywhere (client, 5 Oct 2026) */
	font-family: var(--v2-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.v2 a.v2-btn:hover { transform: translateY(-1px); }

.v2 .v2-btn--primary { background: var(--v2-blue); color: #fff; box-shadow: 0 8px 20px -8px rgba(40, 103, 178, 0.6); }
.v2 .v2-btn--primary:hover { background: var(--v2-blue-deep); color: #fff; }
.v2 .v2-btn--ghost { border-color: rgba(15, 27, 51, 0.18); background: #fff; color: var(--v2-ink); }
.v2 .v2-btn--ghost:hover { border-color: var(--v2-ink); color: var(--v2-ink); }
.v2 .v2-btn--yellow { background: var(--v2-yellow); color: var(--v2-ink); }
.v2 .v2-btn--yellow:hover { background: #f5c445; color: var(--v2-ink); }
.v2 .v2-btn--light { border-color: rgba(255, 255, 255, 0.4); background: transparent; color: #fff; }
.v2 .v2-btn--light:hover { border-color: #fff; color: #fff; }

.v2-link {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	font-family: var(--v2-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.v2-link::after {
	content: "→";
	transition: transform 0.15s ease;
}

.v2-link:hover::after { transform: translateX(3px); }

.v2-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--v2-sans);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--v2-ink);
}

.v2-checks li::before,
.v2-list li::before {
	content: "";
	display: inline-block;
	width: 1.1rem;
	height: 1.1rem;
	margin-right: 0.5rem;
	vertical-align: -0.2rem;
	border-radius: 50%;
	background: var(--v2-green) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M6.4 11.2 3.2 8l1.1-1.1 2.1 2.1 5.3-5.3 1.1 1.1z'/></svg>") center / 0.8rem no-repeat;
}

.v2-list {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.v2-list li {
	display: flex;
	align-items: baseline;
	padding: 0.4rem 0;
}

.v2-list li::before {
	flex: 0 0 auto;
	transform: translateY(0.15rem);
}

/* Icons -------------------------------------------------------------------- */

.v2-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0.75rem;
	background: var(--v2-blue);
}

.v2-icon img { width: 1.35rem; height: 1.35rem; }
.v2-icon--sm { width: 2.25rem; height: 2.25rem; border-radius: 0.65rem; }
.v2-icon--sm img { width: 1.1rem; height: 1.1rem; }
.v2-icon--lg { width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; }
.v2-icon--lg img { width: 1.75rem; height: 1.75rem; }
.v2-icon--purple { background: var(--v2-purple); }
.v2-icon--green { background: var(--v2-green); }
.v2-icon--pink { background: var(--v2-pink); }
.v2-icon--yellow { background: var(--v2-yellow); }
.v2-icon--dark { background: var(--v2-ink); }
.v2-icon--assist { background: linear-gradient(135deg, var(--v2-assist), var(--v2-magenta)); }

/* Cards -------------------------------------------------------------------- */

.v2-card {
	position: relative;
	padding: clamp(1.5rem, 2.5vw, 2.25rem);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-radius);
	background: #fff;
}

.v2-card--flat { border: 0; }
.v2-card--shadow { border: 0; box-shadow: var(--v2-shadow); }
.v2-card--yellow { border: 0; background: var(--v2-yellow-tint); }
.v2-card--green { border: 0; background: var(--v2-green-tint); }
.v2-card--blue { border: 0; background: var(--v2-blue-tint); }
.v2-card--pink { border: 0; background: var(--v2-pink-tint); }
.v2-card--cream { border: 0; background: var(--v2-cream-2); }
.v2-card--glass {
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.82);
}

.v2-card p { margin: 0.6rem 0 0; }

/* Hero --------------------------------------------------------------------- */

.v2-hero {
	position: relative;
	padding-block: clamp(3.5rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem);
	isolation: isolate;
}

.v2-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(45% 55% at 92% 18%, rgba(40, 103, 178, 0.16), transparent 70%),
		radial-gradient(35% 45% at 70% 95%, rgba(236, 179, 45, 0.18), transparent 70%),
		radial-gradient(30% 40% at 5% 10%, rgba(224, 28, 90, 0.07), transparent 70%);
}

.v2-hero .v2-lead { max-width: 34rem; }

.v2-hero-visual {
	position: relative;
	min-height: 30rem;
}

.v2-proofbar {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: center;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--v2-line);
}

.v2-proofbar strong {
	display: block;
	color: var(--v2-ink);
	font-family: var(--v2-serif);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1;
}

.v2-proofbar span {
	color: var(--v2-muted);
	font-size: 0.8125rem;
}

/* App window (code-built product screen) ---------------------------------- */

.ui {
	color: var(--v2-ink);
	font-family: var(--v2-sans);
	font-size: 0.75rem;
	line-height: 1.35;
}

.ui-window {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(15, 27, 51, 0.08);
	border-radius: 0.75rem;
	background: #fff;
	box-shadow: var(--v2-shadow-lg);
}

.ui-titlebar {
	display: flex;
	gap: 0.4rem;
	align-items: center;
	padding: 0.6rem 0.9rem;
	border-bottom: 1px solid #eef0f4;
	background: #f7f8fa;
}

.ui-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #e01c5a; }
.ui-dot:nth-child(2) { background: #ecb32d; }
.ui-dot:nth-child(3) { background: #22a06b; }

.ui-url {
	flex: 1;
	margin-left: 0.75rem;
	padding: 0.2rem 0.75rem;
	border-radius: 999px;
	background: #fff;
	color: #8a91a2;
	font-size: 0.6875rem;
}

.ui-app {
	display: grid;
	grid-template-columns: 9.5rem minmax(0, 1fr);
	min-height: 24rem;
}

.ui-side {
	padding: 0.9rem 0.6rem;
	background: #102445;
	color: rgba(255, 255, 255, 0.72);
}

.ui-logo {
	display: flex;
	gap: 0.4rem;
	align-items: center;
	margin: 0 0.4rem 1rem;
	color: #fff;
	font-weight: 700;
	font-size: 0.8125rem;
}

.ui-logo i {
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 0.3rem;
	background: linear-gradient(135deg, #2867b2 50%, #ecb32d 50%);
}

.ui-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ui-nav li {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.42rem 0.55rem;
	border-radius: 0.45rem;
	font-size: 0.6875rem;
}

.ui-nav li::before {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 0.15rem;
	background: rgba(255, 255, 255, 0.28);
}

.ui-nav li.is-on {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.ui-nav li.is-on::before { background: #ecb32d; }

.ui-main {
	padding: 1rem 1.1rem;
	background: #f6f8fb;
}

.ui-greet {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.9rem;
}

.ui-greet b { font-size: 0.9375rem; }
.ui-greet small { display: block; color: #8a91a2; font-size: 0.6875rem; font-weight: 500; }

.ui-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: var(--v2-yellow);
	color: var(--v2-ink);
	font-weight: 700;
	font-size: 0.6875rem;
}

.ui-kpis {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.6rem;
}

.ui-kpi {
	padding: 0.65rem 0.7rem;
	border-radius: 0.65rem;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 27, 51, 0.05);
}

.ui-kpi small { display: block; color: #8a91a2; font-size: 0.625rem; font-weight: 500; }
.ui-kpi b { display: block; margin-top: 0.15rem; font-size: 1rem; }
.ui-kpi em { color: var(--v2-green); font-style: normal; font-size: 0.625rem; font-weight: 600; }
.ui-kpi em.down { color: var(--v2-pink); }

.ui-panels {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 0.6rem;
	margin-top: 0.6rem;
}

.ui-panel {
	padding: 0.75rem 0.8rem;
	border-radius: 0.65rem;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 27, 51, 0.05);
}

.ui-panel-title {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.6rem;
	font-weight: 600;
	font-size: 0.6875rem;
}

.ui-panel-title span { color: #8a91a2; font-weight: 500; }

.ui-bars {
	display: flex;
	gap: 0.35rem;
	align-items: flex-end;
	height: 6.5rem;
	padding-top: 0.3rem;
	border-bottom: 1px solid #eef0f4;
}

.ui-bars i {
	flex: 1;
	border-radius: 0.3rem 0.3rem 0 0;
	background: linear-gradient(180deg, #4b8bd6, var(--v2-blue));
}

.ui-bars i.alt { background: linear-gradient(180deg, #f3c652, var(--v2-yellow)); }

.ui-axis {
	display: flex;
	justify-content: space-between;
	margin-top: 0.3rem;
	color: #a0a6b4;
	font-size: 0.5625rem;
}

.ui-rows { margin: 0; padding: 0; list-style: none; }

.ui-rows li {
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
	align-items: center;
	padding: 0.35rem 0;
	border-bottom: 1px solid #f0f2f6;
	font-size: 0.6875rem;
}

.ui-rows li:last-child { border-bottom: 0; }
.ui-rows span { color: #8a91a2; }

.ui-tag {
	display: inline-block;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	background: var(--v2-green-tint);
	color: #13774c;
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ui-tag--yellow { background: var(--v2-yellow-tint); color: #8a5f00; }
.ui-tag--pink { background: var(--v2-pink-tint); color: #a8103f; }
.ui-tag--blue { background: var(--v2-blue-tint); color: var(--v2-blue-deep); }

.ui-donut {
	--p: 72;
	position: relative;
	width: 5.5rem;
	height: 5.5rem;
	margin: 0.25rem auto 0.5rem;
	border-radius: 50%;
	background: conic-gradient(var(--v2-green) calc(var(--p) * 1%), #eef0f4 0);
}

.ui-donut::after {
	content: attr(data-label);
	position: absolute;
	inset: 0.7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	font-weight: 700;
	font-size: 0.9375rem;
}

/* Floating cards over visuals --------------------------------------------- */

.ui-float {
	position: absolute;
	z-index: 2;
	min-width: 13rem;
	padding: 0.75rem 0.9rem;
	border-radius: 0.75rem;
	background: #fff;
	box-shadow: var(--v2-shadow-lg);
	animation: v2-bob 6s ease-in-out infinite;
}

.ui-float:nth-of-type(2) { animation-delay: -1.5s; }
.ui-float:nth-of-type(3) { animation-delay: -3s; }
.ui-float:nth-of-type(4) { animation-delay: -4.5s; }

.ui-float-row {
	display: flex;
	gap: 0.6rem;
	align-items: center;
}

.ui-float b { display: block; font-size: 0.75rem; }
.ui-float small { display: block; color: #8a91a2; font-size: 0.625rem; }

@keyframes v2-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
	.ui-float { animation: none; }
}

/* Chat bubble (WhatsApp-style) */
.ui-chat {
	max-width: 17rem;
	padding: 0.7rem 0.85rem 0.45rem;
	border-radius: 0.75rem 0.75rem 0.75rem 0.25rem;
	background: #dcf8c6;
	color: #1b2a1b;
	font-size: 0.6875rem;
	line-height: 1.45;
}

.ui-chat--in { background: #fff; border-radius: 0.75rem 0.75rem 0.25rem 0.75rem; }
.ui-chat-meta { display: block; margin-top: 0.25rem; color: #6b8a6b; font-size: 0.5625rem; text-align: right; }
.ui-chat-meta::after { content: " ✓✓"; color: #34b7f1; }
.ui-chat a { color: #0b6bcb; font-weight: 600; }

.ui-phone {
	position: relative;
	width: 15.5rem;
	padding: 0.65rem;
	border-radius: 2.25rem;
	background: #0f1b33;
	box-shadow: var(--v2-shadow-lg);
}

.ui-phone-screen {
	overflow: hidden;
	min-height: 25rem;
	border-radius: 1.75rem;
	background: #ece5dd;
}

.ui-phone-head {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	padding: 1.6rem 0.8rem 0.6rem;
	background: #075e54;
	color: #fff;
	font-size: 0.6875rem;
}

.ui-phone-head i {
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: #fff url("../images/schoolcanvas-logo.png") center / 85% no-repeat;
}

.ui-phone-head b { display: block; font-size: 0.75rem; }
.ui-phone-body { display: grid; gap: 0.5rem; padding: 0.8rem 0.6rem; }

/* Mini map */
.ui-map {
	position: relative;
	overflow: hidden;
	height: 9rem;
	border-radius: 0.65rem;
	background: #e8f0e4;
}

.ui-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.ui-bus {
	position: absolute;
	top: 42%;
	left: 58%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--v2-yellow);
	box-shadow: 0 0 0 6px rgba(236, 179, 45, 0.3);
	font-size: 0.8rem;
	animation: v2-pulse 2s ease-in-out infinite;
}

@keyframes v2-pulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(236, 179, 45, 0.35); }
	50% { box-shadow: 0 0 0 10px rgba(236, 179, 45, 0.1); }
}

/* Logo strip --------------------------------------------------------------- */

.v2-logos {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.v2-logos-track {
	display: flex;
	gap: 1rem;
	width: max-content;
	animation: v2-marquee 60s linear infinite;
}

.v2-logos:hover .v2-logos-track { animation-play-state: paused; }

/* Phones and tablets: no edge fade. iPhone Safari reloads the tab when a mask sits over these long moving strips
   (customer video, 11 Oct 2026); on a small screen the logos simply run to the screen edge. */
@media (hover: none), (max-width: 991.98px) {
	.v2 .v2-logos, .v2 .lg2 .v2-logos { -webkit-mask-image: none; mask-image: none; }
}

@keyframes v2-marquee {
	to { transform: translateX(-50%); }
}

.v2-school {
	display: inline-flex;
	gap: 0.6rem;
	align-items: center;
	padding: 0.75rem 1.1rem;
	border: 1px solid var(--v2-line);
	border-radius: 0.75rem;
	background: #fff;
	color: var(--v2-ink);
	font-family: var(--v2-sans);
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}

.v2-school small {
	display: block;
	color: var(--v2-muted);
	font-size: 0.6875rem;
	font-weight: 500;
}

.v2-crest {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 0.6rem 0.6rem 0.75rem 0.75rem;
	background: var(--c, var(--v2-blue));
	color: #fff;
	font-family: var(--v2-serif);
	font-size: 0.875rem;
	font-weight: 700;
}

/* Real school logos in the crest (client, 11 Oct 2026). */
.v2-crest--logo { background: #fff !important; box-shadow: inset 0 0 0 1px var(--v2-line) !important; padding: 0.15rem; overflow: hidden; }
.v2-crest--logo img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Product directory --------------------------------------------------------- */

.v2-dir {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.v2-dir-item {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.4rem;
	border: 1px solid var(--v2-line);
	border-radius: 0.75rem;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.v2 a.v2-dir-item { color: inherit; }

.v2-dir-item:hover {
	border-color: rgba(40, 103, 178, 0.35);
	box-shadow: var(--v2-shadow);
	transform: translateY(-3px);
}

.v2-dir-item p { margin: 0; color: var(--v2-muted); font-size: 0.9375rem; line-height: 1.55; }

.v2-dir-item .v2-dir-mods {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: auto;
	padding-top: 0.5rem;
}

.v2-dir-mods span {
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	background: var(--v2-cream);
	color: var(--v2-body);
	font-family: var(--v2-sans);
	font-size: 0.6875rem;
	font-weight: 500;
}

.v2-dir-item--assist {
	grid-column: span 3;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: center;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border: 0;
	background: radial-gradient(70% 90% at 100% 0%, rgba(194, 24, 91, 0.55), transparent 60%),
		linear-gradient(135deg, #3d1c63, var(--v2-assist) 60%, #6d2482);
	color: rgba(255, 255, 255, 0.85);
}

.v2 a.v2-dir-item--assist { color: rgba(255, 255, 255, 0.85); }
.v2-dir-item--assist h3 { color: #fff; font-family: var(--v2-serif); font-size: clamp(1.75rem, 3vw, 2.5rem); }
.v2-dir-item--assist p { color: rgba(255, 255, 255, 0.82); font-size: 1.0625rem; }
.v2-dir-item--assist .v2-dir-mods span { background: rgba(255, 255, 255, 0.12); color: #fff; }

.v2-badge-new {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--v2-yellow);
	color: var(--v2-ink);
	font-family: var(--v2-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

@media (max-width: 991.98px) {
	.v2-dir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.v2-dir-item--assist { grid-column: span 2; grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
	.v2-dir { grid-template-columns: minmax(0, 1fr); }
	.v2-dir-item--assist { grid-column: auto; }
}

/* Day timeline ------------------------------------------------------------- */

.v2-day {
	position: relative;
	display: grid;
	gap: clamp(3rem, 6vw, 5rem);
}

.v2-day::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	background: repeating-linear-gradient(180deg, rgba(40, 103, 178, 0.3) 0 8px, transparent 8px 16px);
	transform: translateX(-50%);
}

.v2-day-step {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 7vw, 6rem);
	align-items: center;
}

.v2-day-step:nth-child(even) .v2-day-copy { order: 2; }

.v2-day-time {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	background: var(--v2-ink);
	color: #fff;
	font-family: var(--v2-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	white-space: nowrap;
	transform: translate(-50%, -50%);
}

.v2-day-copy .v2-kicker {
	margin-bottom: 0.5rem;
	color: var(--v2-blue);
	font-family: var(--v2-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.v2-day-copy p { margin: 0.9rem 0 0; }

.v2-day-visual {
	position: relative;
	display: flex;
	justify-content: center;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border-radius: var(--v2-radius);
	background: var(--bg, var(--v2-blue-tint));
}

@media (max-width: 991.98px) {
	.v2-day::before { left: 1rem; }
	.v2-day-step { grid-template-columns: minmax(0, 1fr); padding-left: 2.5rem; }
	.v2-day-step:nth-child(even) .v2-day-copy { order: 0; }
	.v2-day-time { top: -0.5rem; left: 1rem; transform: translate(-50%, -100%); }
}

/* Mini cards inside visuals */
.ui-card {
	width: 100%;
	max-width: 22rem;
	padding: 1rem 1.1rem;
	border-radius: 0.75rem;
	background: #fff;
	box-shadow: var(--v2-shadow);
}

.ui-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
	font-weight: 600;
	font-size: 0.8125rem;
}

.ui-card-head span { color: #8a91a2; font-weight: 500; font-size: 0.6875rem; }

.ui-person {
	display: flex;
	gap: 0.55rem;
	align-items: center;
}

.ui-person i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--c, #c9d8ee);
	color: var(--v2-ink);
	font-style: normal;
	font-weight: 700;
	font-size: 0.5625rem;
}

.ui-toggle {
	display: inline-flex;
	overflow: hidden;
	border: 1px solid #e3e6ec;
	border-radius: 999px;
	font-size: 0.5625rem;
	font-weight: 700;
}

.ui-toggle b,
.ui-toggle s {
	padding: 0.15rem 0.45rem;
	color: #a0a6b4;
	text-decoration: none;
}

.ui-toggle .on-p { background: var(--v2-green); color: #fff; }
.ui-toggle .on-a { background: var(--v2-pink); color: #fff; }

.ui-btn {
	display: block;
	margin-top: 0.75rem;
	padding: 0.5rem;
	border-radius: 0.55rem;
	background: var(--v2-blue);
	color: #fff;
	font-weight: 600;
	font-size: 0.6875rem;
	text-align: center;
}

.ui-btn--green { background: var(--v2-green); }

.ui-progress {
	height: 0.4rem;
	margin-top: 0.4rem;
	overflow: hidden;
	border-radius: 999px;
	background: #eef0f4;
}

.ui-progress i { display: block; height: 100%; border-radius: inherit; background: var(--v2-blue); }

.ui-big {
	font-family: var(--v2-serif);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.1;
}

.ui-note {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin-top: 0.75rem;
	padding: 0.5rem 0.65rem;
	border-radius: 0.6rem;
	background: var(--v2-green-tint);
	color: #13774c;
	font-size: 0.6875rem;
	font-weight: 600;
}

.ui-note--blue { background: var(--v2-blue-tint); color: var(--v2-blue-deep); }
.ui-note--yellow { background: var(--v2-yellow-tint); color: #8a5f00; }

/* Spotlight masonry --------------------------------------------------------- */

.v2-masonry {
	columns: 3 20rem;
	column-gap: 1.25rem;
}

.v2-masonry > * {
	break-inside: avoid;
	margin-bottom: 1.25rem;
}

.v2-spot .ui-card,
.v2-spot .ui-chat {
	max-width: none;
	margin-top: 1.25rem;
}

.v2-spot-visual {
	margin-top: 1.25rem;
	padding: 1rem;
	border-radius: 0.75rem;
	background: var(--bg, var(--v2-cream));
}

.v2-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.v2-chips span {
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: #fff;
	color: var(--v2-ink);
	font-family: var(--v2-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(15, 27, 51, 0.06);
}

.v2-chips span:nth-child(3n+1) { background: var(--v2-yellow); }
.v2-chips span:nth-child(4n+2) { background: var(--v2-blue); color: #fff; }

/* Photo with floating UI (Gusto) */
.v2-photo {
	position: relative;
}

.v2-photo > img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 1rem 6rem 1rem 1rem;
}

.v2-photo .ui-float { animation-duration: 7s; }

/* Assist ------------------------------------------------------------------- */

.v2-pillars {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
}

.v2-pillar {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.07);
}

.v2-pillar h3 { color: #fff; font-family: var(--v2-serif); font-size: 1.75rem; }
.v2-pillar p { margin: 0.5rem 0 1.25rem; color: rgba(255, 255, 255, 0.78); font-size: 0.9375rem; }
.v2-pillar .ui-card { margin-top: auto; max-width: none; }

.v2-pillar-num {
	margin-bottom: 0.75rem;
	color: #f7b6d2;
	font-family: var(--v2-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

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

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

.v2-ai-prompt {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	padding: 0.75rem 0.9rem;
	border-radius: 0.75rem;
	background: #fff;
	color: var(--v2-ink);
	font-family: var(--v2-sans);
	font-size: 0.8125rem;
	box-shadow: var(--v2-shadow-lg);
}

.v2-ai-prompt b {
	margin-left: auto;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--v2-assist), var(--v2-magenta));
	color: #fff;
	font-size: 0.6875rem;
	white-space: nowrap;
}

/* Role tabs ---------------------------------------------------------------- */

.v2-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-bottom: 2rem;
}

.v2-tabs-nav button {
	padding: 0.65rem 1.2rem;
	border: 1px solid var(--v2-line);
	border-radius: 999px;
	background: #fff;
	color: var(--v2-ink);
	font-family: var(--v2-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.v2-tabs-nav button[aria-selected="true"] {
	border-color: var(--v2-ink);
	background: var(--v2-ink);
	color: #fff;
}

.v2-tab-panel[hidden] { display: none; }

.v2-tab-panel {
	padding: clamp(1.75rem, 4vw, 3.5rem);
	border-radius: 1rem;
	background: #fff;
	box-shadow: var(--v2-shadow);
}

.v2-before-after {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1rem;
	margin-top: 1.75rem;
}

.v2-before-after h4 {
	margin-bottom: 0.5rem;
	font-family: var(--v2-sans);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.v2-before { padding: 1.1rem 1.25rem; border-radius: 0.75rem; background: var(--v2-pink-tint); }
.v2-before h4 { color: #a8103f; }
.v2-after { padding: 1.1rem 1.25rem; border-radius: 0.75rem; background: var(--v2-green-tint); }
.v2-after h4 { color: #13774c; }
.v2-before ul, .v2-after ul { margin: 0; padding-left: 1.1rem; font-size: 0.9375rem; }
.v2-before li, .v2-after li { padding: 0.2rem 0; }

@media (max-width: 575.98px) {
	.v2-before-after { grid-template-columns: minmax(0, 1fr); }
}

/* Feature list (India) ------------------------------------------------------ */

.v2-feature-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 2rem;
	margin-top: 2rem;
}

.v2-feature {
	display: flex;
	gap: 1rem;
}

.v2-feature p { margin: 0.3rem 0 0; font-size: 0.9375rem; }

@media (max-width: 575.98px) {
	.v2-feature-list { grid-template-columns: minmax(0, 1fr); }
}

/* Go-live days -------------------------------------------------------------- */

.v2-days {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	counter-reset: day;
}

.v2-dayc {
	position: relative;
	padding: 1.75rem 1.5rem;
	border-radius: 0.75rem;
	background: #fff;
	box-shadow: var(--v2-shadow);
}

.v2-dayc-n {
	display: inline-block;
	margin-bottom: 1rem;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: var(--v2-blue-tint);
	color: var(--v2-blue-deep);
	font-family: var(--v2-sans);
	font-size: 0.75rem;
	font-weight: 700;
}

.v2-dayc p { margin: 0.5rem 0 0; font-size: 0.9375rem; }

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

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

.v2-migrate {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 1.5rem;
	align-items: center;
	margin-top: 1.5rem;
	padding: 1.5rem 1.75rem;
	border-radius: 0.75rem;
	background: var(--v2-yellow-tint);
}

.v2-migrate p { margin: 0.25rem 0 0; }

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

/* Stats --------------------------------------------------------------------- */

.v2-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	align-items: end;
}

.v2-stat {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 16rem;
	padding: 1.75rem 1.5rem;
	border-radius: 999px 999px 1rem 1rem;
	background: var(--bg, var(--v2-blue-tint));
	text-align: center;
}

.v2-stat:nth-child(2) { min-height: 19rem; }
.v2-stat:nth-child(3) { min-height: 22rem; }
.v2-stat:nth-child(4) { min-height: 18rem; }

.v2-stat strong {
	display: block;
	color: var(--v2-ink);
	font-family: var(--v2-serif);
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	font-weight: 600;
	line-height: 1;
}

.v2-stat b {
	display: block;
	margin-top: 0.6rem;
	color: var(--v2-ink);
	font-family: var(--v2-sans);
	font-size: 1rem;
}

.v2-stat span { display: block; margin-top: 0.25rem; color: var(--v2-body); font-size: 0.875rem; }

@media (max-width: 767.98px) {
	.v2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.v2-stat, .v2-stat:nth-child(n) { min-height: 13rem; }
}

/* Testimonials -------------------------------------------------------------- */

.v2-quotes {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 1.25rem;
}

.v2-quote-big {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(2rem, 4vw, 3rem);
	border-radius: 1rem;
	background: var(--v2-ink);
	color: rgba(255, 255, 255, 0.85);
}

.v2-quote-big blockquote {
	margin: 0;
	color: #fff;
	font-family: var(--v2-serif);
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	font-weight: 500;
	line-height: 1.25;
}

.v2-quote-list { display: grid; gap: 1.25rem; }

.v2-quote {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem;
	padding: 1.4rem;
	border-radius: 0.75rem;
	background: #fff;
	box-shadow: var(--v2-shadow);
}

.v2-quote blockquote { margin: 0; color: var(--v2-ink); font-size: 0.9375rem; }
.v2-who { margin-top: 0.6rem; font-family: var(--v2-sans); font-size: 0.8125rem; }
.v2-who b { color: var(--v2-ink); }
.v2-who span { color: var(--v2-muted); }

.v2-face {
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: var(--bg, var(--v2-cream-2));
	object-fit: cover;
}

.v2-placeholder-tag {
	display: inline-block;
	margin-bottom: 0.75rem;
	padding: 0.15rem 0.55rem;
	border: 1px dashed currentColor;
	border-radius: 999px;
	font-family: var(--v2-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	opacity: 0.6;
}

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

/* Integrations --------------------------------------------------------------- */

.v2-integrations {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0.75rem;
}

.v2-int {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	align-items: center;
	padding: 1.1rem 0.75rem;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-family: var(--v2-sans);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
}

.v2-int small { color: rgba(255, 255, 255, 0.7); font-size: 0.6875rem; font-weight: 500; }

.v2-int i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.75rem;
	background: #fff;
	color: var(--c, var(--v2-blue));
	font-style: normal;
	font-weight: 800;
	font-size: 0.9375rem;
}

@media (max-width: 991.98px) {
	.v2-integrations { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Compare table ------------------------------------------------------------- */

.v2-compare {
	overflow-x: auto;
	border-radius: 1rem;
	background: #fff;
	box-shadow: var(--v2-shadow);
}

.v2-compare table {
	width: 100%;
	min-width: 40rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.v2-compare th,
.v2-compare td {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--v2-line);
	text-align: left;
	vertical-align: top;
}

.v2-compare thead th {
	color: var(--v2-ink);
	font-family: var(--v2-sans);
	font-size: 0.875rem;
}

.v2-compare thead th.us {
	background: var(--v2-blue);
	color: #fff;
}

.v2-compare td.us {
	background: rgba(40, 103, 178, 0.05);
	color: var(--v2-ink);
	font-weight: 600;
}

.v2-compare tr:last-child td { border-bottom: 0; }
.v2-yes { color: var(--v2-green); font-weight: 700; }
.v2-no { color: var(--v2-pink); font-weight: 700; }

/* FAQ ----------------------------------------------------------------------- */

.v2-faq {
	display: grid;
	grid-template-columns: 14rem minmax(0, 1fr);
	gap: 0 2rem;
}

.v2-faq-group {
	display: contents;
}

.v2-faq-label {
	padding-top: 1.35rem;
	border-top: 1px solid var(--v2-line);
	color: var(--v2-muted);
	font-family: var(--v2-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.v2-faq-items { border-top: 1px solid var(--v2-line); }

.v2-faq details {
	border-bottom: 1px solid var(--v2-line);
}

.v2-faq details:last-child { border-bottom: 0; }

.v2-faq summary {
	position: relative;
	padding: 1.1rem 2.5rem 1.1rem 0;
	color: var(--v2-ink);
	font-family: var(--v2-sans);
	font-size: 1.0625rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

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

.v2-faq summary::after {
	content: "+";
	position: absolute;
	top: 0.9rem;
	right: 0.25rem;
	color: var(--v2-blue);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.2s ease;
}

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

.v2-faq details p {
	max-width: 46rem;
	margin: 0 0 1.25rem;
}

@media (max-width: 767.98px) {
	.v2-faq { grid-template-columns: minmax(0, 1fr); }
	.v2-faq-label { padding-bottom: 0.25rem; }
	.v2-faq-items { border-top: 0; }
}

/* Demo form ----------------------------------------------------------------- */

.v2-form-card {
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border-radius: 0.75rem;
	background: #fff;
	box-shadow: var(--v2-shadow-lg);
}

.v2-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.9rem 1rem;
	margin-top: 1.5rem;
}

.v2-form .full { grid-column: 1 / -1; }

.v2-form label {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--v2-ink);
	font-family: var(--v2-sans);
	font-size: 0.8125rem;
	font-weight: 600;
}

.v2-form input,
.v2-form select {
	width: 100%;
	padding: 0.8rem 0.9rem;
	border: 1px solid rgba(15, 27, 51, 0.16);
	border-radius: 0.45rem;
	background: #fff;
	color: var(--v2-ink);
	font: inherit;
	font-size: 0.9375rem;
}

.v2-form input:focus,
.v2-form select:focus {
	border-color: var(--v2-blue);
	outline: 3px solid rgba(40, 103, 178, 0.15);
}

.v2-form .check {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	font-weight: 400;
	font-size: 0.8125rem;
}

.v2-form .check input { width: auto; margin-top: 0.2rem; }

.v2-form button {
	padding: 1rem;
	border: 0;
	border-radius: 0.5rem;
	background: var(--v2-blue);
	color: #fff;
	font-family: var(--v2-sans);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}

.v2-form button:hover { background: var(--v2-blue-deep); }

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

/* Closing band -------------------------------------------------------------- */

.v2-actions {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 3rem;
}

.v2-action {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.5rem;
	border-radius: 0.75rem;
	background: var(--bg, #fff);
	color: var(--v2-ink);
	text-decoration: none;
	transition: transform 0.2s ease;
}

.v2 a.v2-action { color: var(--v2-ink); }
.v2-action:hover { transform: translateY(-4px); }
.v2-action b { font-family: var(--v2-sans); font-size: 1.125rem; }
.v2-action span { font-size: 0.875rem; }
.v2-action .v2-link { margin-top: auto; padding-top: 1rem; color: var(--v2-ink); }

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

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

/* Reveal on scroll ------------------------------------------------------------ */

.v2-js .v2-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.v2-js .v2-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.v2-js .v2-reveal { opacity: 1; transform: none; }
	.v2-logos-track { animation: none; }
}

/* Hero visual positions --------------------------------------------------------- */

.v2-hero-visual .ui-window { transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); }
.v2-hero-visual .f1 { top: -1.5rem; left: -2.5rem; }
.v2-hero-visual .f2 { top: 62%; right: -2.25rem; }
.v2-hero-visual .f3 { bottom: -2rem; left: 8%; }
.v2-hero-visual .f4 { bottom: 22%; left: -3rem; }

@media (max-width: 1199.98px) {
	.v2-hero-visual .f4 { display: none; }
}

@media (max-width: 991.98px) {
	.v2-hero-visual { margin-top: 2rem; }
	.v2-hero-visual .ui-window { transform: none; }
	.v2-hero-visual .f1 { left: 0; }
	.v2-hero-visual .f2 { right: 0; }
}

@media (max-width: 575.98px) {
	.ui-app { grid-template-columns: minmax(0, 1fr); }
	.ui-side { display: none; }
	.ui-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ui-panels { grid-template-columns: minmax(0, 1fr); }
	.ui-float { position: relative; inset: auto !important; margin-top: 0.75rem; }
	.v2-day-visual { padding: 1rem; }
}

.v2 blockquote {
	padding: 0;
	border: 0;
}

/* Screenshot / print mode: ?sc-static shows everything without animation. */
.sc-static .v2-reveal { opacity: 1 !important; transform: none !important; }

.v2-form button { width: 100%; }
.v2-form .full .check { display: inline-flex; margin-right: 1.25rem; }

/* Typography: bold sans headlines (client choice, Zoho-style) --------------- */
.v2-h1 {
	font-size: clamp(2.5rem, 4.9vw, 4.125rem);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.035em;
}

.v2-h2 {
	font-size: clamp(2rem, 3.4vw, 2.875rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.03em;
}

.v2-proofbar strong,
.v2-stat strong,
.ui-big,
.v2-pillar h3,
.v2-quote-big blockquote,
.v2-dir-item--assist h3 {
	letter-spacing: -0.02em;
}

.v2-pillar h3 { font-size: 1.5rem; font-weight: 700; }
.v2-quote-big blockquote { font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 600; }

/* Inner-page components (designed-parts.php) -------------------------------- */

.v2-hero--dark {
	background: radial-gradient(60% 70% at 85% 10%, rgba(40, 103, 178, 0.55), transparent 65%), linear-gradient(160deg, #0f1b33, #13284d);
	color: rgba(255, 255, 255, 0.85);
}

.v2-hero--dark::before { display: none; }
.v2-hero--dark .v2-h1 { color: #fff; }
.v2-hero--dark .v2-checks { color: #fff; }

.v2-numbers {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.v2-number {
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--v2-blue);
}

.v2-number:nth-child(2) { border-color: var(--v2-yellow); }
.v2-number:nth-child(3) { border-color: var(--v2-green); }
.v2-number:nth-child(4) { border-color: var(--v2-pink); }

.v2-number strong {
	display: block;
	color: var(--v2-ink);
	font-family: var(--v2-sans);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.v2-number span { display: block; margin-top: 0.35rem; color: var(--v2-muted); font-size: 0.9375rem; }

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

.v2-pains {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.v2-pain {
	padding: 1.5rem;
	border-radius: 0.75rem;
	background: #fff;
	box-shadow: var(--v2-shadow);
}

.v2-pain .v2-h4 { margin-top: 1rem; }
.v2-pain p { margin: 0.5rem 0 0; font-size: 0.9375rem; }

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

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

.v2-mods {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.v2-mod {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 1rem;
	background: #f5f6f8;
	color: var(--v2-body);
}

.v2-mod--wide {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: center;
}

.v2-mod-copy { padding: 1.75rem 1.75rem 0; }
.v2-mod--wide .v2-mod-copy { padding: 2rem; }
.v2-mod .v2-h3 { color: var(--v2-ink); }
.v2-mod p { margin: 0.6rem 0 0; font-size: 0.9375rem; }

.v2-mod-points {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.v2-mod-points li {
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	background: #fff;
	color: var(--v2-ink);
	font-family: var(--v2-sans);
	font-size: 0.75rem;
	font-weight: 600;
}

.v2-mod-visual {
	margin-top: auto;
	padding: 1.5rem 1.75rem 1.75rem;
}

.v2-mod--wide .v2-mod-visual { padding: 2rem; }
.v2-mod-visual .ui-card { max-width: none; }

@media (max-width: 991.98px) {
	.v2-mods { grid-template-columns: minmax(0, 1fr); }
	.v2-mod--wide { grid-template-columns: minmax(0, 1fr); }
}

.v2-dir--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 991.98px) {
	.v2-dir--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
	.v2-dir--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Extra mock-up helpers ------------------------------------------------------- */

.ui-table { width: 100%; border-collapse: collapse; font-size: 0.6875rem; }
.ui-table th { padding: 0.35rem 0.4rem; color: #8a91a2; font-weight: 600; text-align: left; border-bottom: 1px solid #eef0f4; }
.ui-table td { padding: 0.4rem; border-bottom: 1px solid #f3f4f7; }
.ui-table tr:last-child td { border-bottom: 0; }
.ui-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ui-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.ui-muted { color: #8a91a2; }
.ui-stack { display: grid; gap: 0.75rem; width: 100%; max-width: 22rem; }
.ui-chip { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 999px; background: #eef2f8; color: var(--v2-ink); font-size: 0.625rem; font-weight: 600; }
.ui-stars { color: var(--v2-yellow); letter-spacing: 1px; }
.ui-hero-main { padding: 1rem 1.1rem; background: #f6f8fb; }

/* Closing band before the footer: brand-blue card so it never merges with the dark footer. */
.v2 > section.v2-section--ink:last-of-type {
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--v2-cream);
}

.v2 > section.v2-section--ink:last-of-type > .v2-wrap {
	position: relative;
	overflow: hidden;
	padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
	border-radius: 0.75rem;
	background: radial-gradient(60% 90% at 100% 0%, rgba(236, 179, 45, 0.28), transparent 60%),
		radial-gradient(50% 80% at 0% 100%, rgba(224, 28, 90, 0.18), transparent 60%),
		linear-gradient(135deg, #2867b2 0%, #1d4f8f 55%, #17467f 100%);
	color: rgba(255, 255, 255, 0.88);
	box-shadow: 0 30px 60px -30px rgba(23, 70, 127, 0.55);
}

/* Stacked and centred: headline on one line, a separator that fades at both ends, then the lead. */
.v2 > section.v2-section--ink:last-of-type .v2-split {
	display: flex;
	flex-direction: column;
	align-items: center !important;
	gap: 0;
	text-align: center;
}

.v2 > section.v2-section--ink:last-of-type .v2-h2 {
	max-width: none;
	margin-bottom: 0;
	font-size: clamp(1.6rem, 2.7vw, 2.35rem);
}

.v2 > section.v2-section--ink:last-of-type .v2-h2 .v2-accent--yellow {
	display: inline;
}

.v2-close-sep {
	display: block;
	width: min(100%, 44rem);
	height: 1px;
	margin: clamp(1.25rem, 2.5vw, 1.75rem) auto;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55) 50%, transparent);
}

.v2 > section.v2-section--ink:last-of-type .v2-lead {
	max-width: 46rem;
	margin-inline: auto !important;
}

/* Phone and email under the closing headline. */
.v2-close-contact {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.85rem;
}

.v2-close-contact > a,
.v2-close-contact > .v2-close-call {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 3.5rem;
	padding: 0.55rem 1.4rem 0.55rem 0.6rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-family: var(--v2-sans);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.15;
	text-align: left;
	text-decoration: none;
	transition: background 0.2s, transform 0.2s;
}

.v2-close-contact > a:hover,
.v2-close-contact > a:focus-visible {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	transform: translateY(-1px);
}

.v2-close-call a {
	color: #fff;
	text-decoration: none;
}

.v2-close-call a:hover,
.v2-close-call a:focus-visible {
	color: var(--v2-yellow);
	text-decoration: underline;
}

.v2-close-contact svg {
	flex: 0 0 auto;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0.6rem;
	border-radius: 50%;
	background: var(--v2-yellow);
	color: #17467f;
}

.v2-close-contact small {
	display: block;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.75rem;
	font-weight: 500;
}

.v2-close-hours {
	margin: 0.9rem 0 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.875rem;
}

/* Phones (responsive QA 2 Oct): body text at least 16px in the shared builders. */
@media (max-width: 767.98px) {
	.v2-section--tight > .v2-small,
	.v2-feature p,
	.v2-before ul,
	.v2-after ul,
	.v2-pain p,
	.v2-mod p,
	.v2-dir-item p,
	.v2-dayc p,
	.v2-pillar p,
	.v2-quote blockquote,
	.v2-close-hours {
		font-size: 1rem;
	}

	/* 16px fields: iOS Safari no longer zooms the page when a field is tapped. */
	.v2-form input,
	.v2-form select,
	.v2-form textarea {
		font-size: 1rem;
	}
}

/* Small phones (320–479): wider text column in the numbers band; closing pills shrink and wrap inside the card. */
@media (max-width: 479.98px) {
	.v2-numbers { gap: 0.75rem; }
	.v2-number { padding: 0.875rem 0.75rem 0.875rem 0.875rem; }

	.v2 > section.v2-section--ink:last-of-type > .v2-wrap {
		padding-inline: 1rem;
	}

	.v2-close-contact > a,
	.v2-close-contact > .v2-close-call {
		max-width: 100%;
		min-width: 0;
		gap: 0.6rem;
		padding: 0.45rem 0.75rem 0.45rem 0.4rem;
		border-radius: 0.75rem;
		font-size: clamp(0.875rem, 4.4vw, 1rem);
	}

	.v2-close-contact svg {
		width: 2rem;
		height: 2rem;
		padding: 0.5rem;
	}

	.v2-close-contact span {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	/* Each phone number stays whole; the line breaks at the " / ". */
	.v2-close-call a {
		white-space: nowrap;
	}
}

/* Compare table on narrow screens: a soft edge shadow shows there is more to scroll
 * (the white "local" covers hide each shadow once you reach that end). */
@media (max-width: 767.98px) {
	.v2-compare {
		background:
			linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) left center / 2.5rem 100% no-repeat local,
			linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)) right center / 2.5rem 100% no-repeat local,
			radial-gradient(farthest-side at 0 50%, rgba(15, 27, 51, 0.3), rgba(15, 27, 51, 0)) left center / 1.125rem 100% no-repeat scroll,
			radial-gradient(farthest-side at 100% 50%, rgba(15, 27, 51, 0.3), rgba(15, 27, 51, 0)) right center / 1.125rem 100% no-repeat scroll,
			#fff;
		-webkit-overflow-scrolling: touch;
	}
}

/* Anchor jumps (#section links) land below the sticky header, which is about 7rem tall incl. the top strip. */
html { scroll-padding-top: 7.5rem; }

/* Mock-up logo squares never shrink (Firefox crushed them). */
.ui-logo i { flex-shrink: 0; }

/* Mock-up card headers: keep a gap between the title and its grey note, and let them wrap. */
.ui-card-head { flex-wrap: wrap; gap: 0.25rem 0.75rem; }

/* Avoid a single word alone on the last line of leads and tick lists. */
.v2-lead, .v2-checks li, .v2-list li { text-wrap: pretty; }

/* Checkboxes and radios scale with the text on large screens (they stayed native size at 3840). */
.v2-form input[type="checkbox"], .v2-form input[type="radio"] { width: 1.1em; height: 1.1em; flex: none; }

/* Small phones: keep the email whole in the closing card, and balance the hours line. */
@media (max-width: 479.98px) {
	.v2-close-contact > a span { white-space: nowrap; overflow-wrap: normal; word-break: normal; font-size: 0.95rem; }
	.v2-close-hours { text-wrap: balance; }
}

/* "Works even better together": connected hub (client, 3 Oct 2026). */
.v2-rel-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: center; }
.v2-rel-intro .v2-lead { margin-top: 0.75rem; }
.v2-rel-hub { position: relative; height: 12.5rem; max-width: 22rem; margin-top: 1.5rem; }
.v2-rel-hub svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.v2-rel-wire { animation: v2-rel-flow 1.8s linear infinite; }
@keyframes v2-rel-flow { to { stroke-dashoffset: -24; } }
.v2-rel-core { position: absolute; top: 50%; left: 50%; z-index: 1; padding: 0.6rem 1rem; border-radius: 999px; background: #2867b2; color: #fff; font-family: var(--v2-sans); font-size: 0.875rem; font-weight: 700; white-space: nowrap; transform: translate(-50%, -50%); box-shadow: 0 0 0 6px rgba(40, 103, 178, 0.15), 0 14px 28px -14px rgba(23, 70, 127, 0.7); }
.v2-rel-node { position: absolute; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--v2-line); border-radius: 0.75rem; background: #fff; box-shadow: 0 10px 22px -14px rgba(15, 27, 51, 0.45); transform: translate(-50%, -50%); }
.v2-rel-node--tl { left: 12.5%; top: 17%; } .v2-rel-node--tr { left: 87.5%; top: 17%; }
.v2-rel-node--bl { left: 12.5%; top: 83%; } .v2-rel-node--br { left: 87.5%; top: 83%; }
.v2-rel-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--v2-line); border-radius: 0.75rem; background: #fff; overflow: hidden; box-shadow: 0 24px 50px -36px rgba(15, 27, 51, 0.45); }
.v2-rel-list li + li { border-top: 1px solid var(--v2-line); }
.v2-rel-item { display: flex; align-items: center; gap: 1rem; padding: 1.05rem 1.25rem; color: inherit; text-decoration: none; transition: background 0.2s; }
.v2-rel-item:hover, .v2-rel-item:focus-visible { background: #f4f8fd; }
.v2-rel-item > .v2-icon { flex: none; }
.v2-rel-text { flex: 1; min-width: 0; font-family: var(--v2-sans); }
.v2-rel-text b { display: block; color: var(--v2-ink); font-size: 1rem; font-weight: 700; }
.v2-rel-text span { display: block; margin-top: 0.15rem; color: #5d6577; font-size: 0.875rem; line-height: 1.5; }
.v2-rel-go { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--v2-line); border-radius: 50%; color: #2867b2; font-weight: 700; transition: background 0.2s, color 0.2s, transform 0.2s; }
.v2-rel-item:hover .v2-rel-go, .v2-rel-item:focus-visible .v2-rel-go { border-color: #2867b2; background: #2867b2; color: #fff; transform: translateX(3px); }
@media (max-width: 991.98px) { .v2-rel-grid { grid-template-columns: minmax(0, 1fr); } .v2-rel-hub { margin-inline: auto; } }
@media (max-width: 575.98px) { .v2-rel-hub { display: none; } .v2-rel-text span { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { .v2-rel-wire { animation: none; } }
.sc-static .v2-rel-wire { animation: none; }

/* "Works even better together", option B preview (?rel=b): plug-in chain on a dark band. */
.v2-relb { position: relative; overflow: hidden; background: radial-gradient(50% 70% at 50% 0%, rgba(77, 163, 255, 0.18), transparent 70%), #0f1b33; color: rgba(255, 255, 255, 0.82); }
.v2-relb-head { max-width: 44rem; margin: 0 auto clamp(2rem, 3.5vw, 2.75rem); text-align: center; }
.v2-relb-head .v2-h2 { color: #fff; }
.v2-relb-head .v2-lead { margin: 0.75rem auto 0; color: rgba(255, 255, 255, 0.78); }
.v2-relb-chain { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.v2-relb-chain::before { content: ""; position: absolute; top: 1.6rem; left: 2rem; right: 1rem; height: 3px; border-radius: 999px; background: linear-gradient(90deg, #ffd56b, #4da3ff 30%, #4da3ff 70%, rgba(77, 163, 255, 0)); box-shadow: 0 0 14px rgba(77, 163, 255, 0.55); }
.v2-relb-base { position: relative; z-index: 1; display: inline-flex; flex-direction: column; justify-content: center; min-height: 3.2rem; padding: 0.45rem 1.1rem; border-radius: 999px; background: #ffd56b; color: #0f1b33; font-family: var(--v2-sans); font-size: 0.9375rem; font-weight: 800; white-space: nowrap; box-shadow: 0 0 0 6px rgba(255, 213, 107, 0.18); }
.v2-relb-base small { color: rgba(15, 27, 51, 0.65); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.v2-relb-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.v2-relb-cards li { position: relative; padding-top: 3.2rem; }
.v2-relb-plug { position: absolute; top: 0.4rem; left: 1.25rem; z-index: 1; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 3px solid #4da3ff; border-radius: 50%; background: #0f1b33; color: #fff; font-family: var(--v2-sans); font-size: 1.15rem; font-weight: 800; box-shadow: 0 0 16px rgba(77, 163, 255, 0.6); }
.v2-relb-cards a { display: flex; flex-direction: column; gap: 0.45rem; height: 100%; padding: 1.15rem 1.15rem 1rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.75rem; background: rgba(255, 255, 255, 0.06); color: inherit; text-decoration: none; font-family: var(--v2-sans); transition: background 0.2s, transform 0.2s, border-color 0.2s; }
.v2-relb-cards a:hover, .v2-relb-cards a:focus-visible { border-color: rgba(77, 163, 255, 0.6); background: rgba(255, 255, 255, 0.1); transform: translateY(-3px); }
.v2-relb-cards b { color: #fff; font-size: 1rem; }
.v2-relb-cards span:not(.v2-icon) { color: rgba(255, 255, 255, 0.72); font-size: 0.875rem; line-height: 1.5; }
.v2-relb-cards em { margin-top: auto; padding-top: 0.4rem; color: #ffd56b; font-size: 0.8125rem; font-style: normal; font-weight: 700; }
@media (max-width: 1099.98px) { .v2-relb-chain { grid-template-columns: minmax(0, 1fr); } .v2-relb-chain::before { display: none; } .v2-relb-base { justify-self: center; } .v2-relb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .v2-relb-cards { grid-template-columns: minmax(0, 1fr); } .v2-relb-cards span:not(.v2-icon) { font-size: 1rem; } }

/* Demo section, refined left side (client, 3 Oct 2026): agenda, trust chips, call line. */
.v2-agenda { margin-top: 1.5rem; padding: 1.1rem 1.2rem; border: 1px solid var(--v2-line); border-radius: 0.75rem; background: #fff; box-shadow: 0 18px 40px -32px rgba(15, 27, 51, 0.45); font-family: var(--v2-sans); }
.v2-agenda-t { margin: 0 0 0.6rem; color: #2867b2; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.v2-agenda ol { margin: 0; padding: 0; list-style: none; counter-reset: v2ag; }
.v2-agenda li { display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0; color: var(--v2-ink); font-size: 0.9375rem; font-weight: 600; }
.v2-agenda li + li { border-top: 1px dashed var(--v2-line); }
.v2-agenda li::before { counter-increment: v2ag; content: counter(v2ag); flex: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #e8f0fa; color: #17467f; font-size: 0.75rem; font-weight: 800; }
.v2-trust { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1rem 0 0; padding: 0; list-style: none; font-family: var(--v2-sans); }
.v2-trust li { padding: 0.35rem 0.8rem; border-radius: 999px; background: #def5ea; color: #13774c; font-size: 0.8125rem; font-weight: 700; }
.v2-trust li::before { content: "✓ "; }
.v2-callnow { margin: 0.9rem 0 0; color: var(--v2-muted); font-size: 0.875rem; }
.v2-callnow a { color: #2867b2; font-weight: 700; text-decoration: none; }
.v2-callnow a:hover { text-decoration: underline; }
.v2-demo-ctas { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
.v2-demo-ctas .v2-btn { padding-inline: 1.15rem; }
@media (max-width: 575.98px) { .v2-demo-ctas .v2-btn { width: 100%; justify-content: center; } }

/* Demo section: one look on every page (client, 3 Oct 2026); page overrides no longer apply. */
.v2 > section#demo.v2-section { background: var(--v2-blue-tint) !important; }

/* Shared suite patterns frozen on Transport (3 Oct 2026), reused on every suite: sc2_strip (.trs) and sc2_go (.su). */
.trs { padding-block: 1.1rem; border-bottom: 1px solid #e3eaf4; background: #fff; }
/* Logo band after the strip turns soft blue; specific enough to beat older page rules that force the band white. */
.v2 > section.trs + section.v2-section--tight { background: #e8f0fa; }
.trs-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.trs-row li { display: flex; align-items: center; gap: 0.6rem; font-family: var(--v2-sans); }
.trs-row li + li { padding-left: 1rem; border-left: 1px solid #e3eaf4; }
.trs-row b { color: #17467f; font-size: 1.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.trs-row span { color: #4b5263; font-size: 0.8125rem; line-height: 1.3; }
@media (max-width: 1199.98px) { .trs-row { flex-wrap: wrap; justify-content: center; } .trs-row li:nth-child(4) { padding-left: 0; border-left: 0; } }
@media (max-width: 767.98px) {
	.trs-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1rem; }
	.trs-row li, .trs-row li + li { padding-left: 0; border-left: 0; }
	.trs-row li:first-child { grid-column: 1 / -1; }
	.trs-row b { font-size: 1.2rem; }
	.trs-row span { font-size: 0.875rem; }
}
.su { position: relative; overflow: hidden; padding-block: clamp(2.75rem, 5vw, 4.25rem); background: radial-gradient(50% 80% at 100% 0%, rgba(236, 179, 45, 0.18), transparent 60%), radial-gradient(40% 70% at 0% 100%, rgba(77, 163, 255, 0.25), transparent 60%), linear-gradient(135deg, #2867b2 0%, #1d4f8f 55%, #17467f 100%); color: rgba(255, 255, 255, 0.85); }
.su .v2-pill { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1); color: #fff; }
.su .v2-h2 { color: #fff; }
.su .v2-accent { color: #ffd56b; }
.su-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(2rem, 3.5vw, 2.75rem); }
.su-head .v2-lead { margin: 0; color: rgba(255, 255, 255, 0.85); }
.su-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; counter-reset: su; }
.su-steps::before { content: ""; position: absolute; top: 1.4rem; left: 2rem; right: 2rem; border-top: 2px dashed rgba(255, 255, 255, 0.45); }
.su-step { position: relative; display: flex; flex-direction: column; gap: 0.6rem; padding: 3.4rem 1.25rem 1.3rem; border-radius: 0.75rem; background: #fff; color: var(--v2-ink); box-shadow: 0 24px 44px -28px rgba(0, 0, 0, 0.55); font-family: var(--v2-sans); }
.su-n { position: absolute; top: 0; left: 1.25rem; display: inline-grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 4px solid #2867b2; border-radius: 50%; background: #ffd56b; color: #0f1b33; font-size: 1rem; font-weight: 800; transform: translateY(-1.4rem); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25); }
.su-step .v2-icon { position: absolute; top: 1rem; right: 1rem; }
.su-step h3 { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.su-step p { margin: 0; color: #5d6577; font-size: 0.9rem; line-height: 1.55; }
.su-steps { padding-top: 1.4rem; }
.su-live { position: absolute; top: 0; right: 4rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: #22a06b; color: #fff; font-family: var(--v2-sans); font-size: 0.75rem; font-weight: 700; transform: translateY(-50%); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5); }
.su-mig { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(1.75rem, 3vw, 2.25rem); padding: 1rem 1.3rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 0.75rem; background: rgba(15, 31, 61, 0.35); font-family: var(--v2-sans); }
.su-mig b { display: block; color: #fff; font-size: 1rem; }
.su-mig span { color: rgba(255, 255, 255, 0.78); font-size: 0.875rem; }
.su-mig .v2-btn { border-color: transparent; background: #ffd56b; color: #0f1b33; }
.su-mig .v2-btn:hover { background: #fff; color: #0f1b33; }
@media (max-width: 991.98px) {
	.su-head { grid-template-columns: minmax(0, 1fr); }
	.su-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
	.su-steps::before { display: none; }
}
@media (max-width: 575.98px) {
	.su-steps { grid-template-columns: minmax(0, 1fr); }
	.su-step p { font-size: 1rem; }
	.su-mig .v2-btn { width: 100%; }
}

/* Customer band, one thin line on every page (client, 3 Oct 2026): caption on the left, schools scrolling on the
 * right, soft blue-to-lavender background. The home page keeps its own two-row customer section (.lg2). */
.v2 section.v2-section--tight[aria-label="Schools that use Schoolcanvas"] {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: .7rem max(1.25rem, calc((100% - 77.5rem) / 2));
	border-block: 1px solid rgba(40, 103, 178, .1);
	background: linear-gradient(90deg, #edf3fc 0%, #f1effa 100%) !important;
}
.v2 section.v2-section--tight[aria-label="Schools that use Schoolcanvas"] > p {
	flex: 0 1 15rem;
	margin: 0 !important;
	color: #17467f !important;
	font-size: .7rem !important;
	line-height: 1.35;
	text-align: left;
}
.v2 section.v2-section--tight[aria-label="Schools that use Schoolcanvas"] .v2-logos { flex: 1; min-width: 0; }
.v2 section.v2-section--tight[aria-label="Schools that use Schoolcanvas"] .v2-logos-track { gap: .6rem; }
.v2 section.v2-section--tight[aria-label="Schools that use Schoolcanvas"] .v2-school { gap: .5rem; padding: .35rem .8rem .35rem .4rem; border-radius: 999px; font-size: .8rem; }
.v2 section.v2-section--tight[aria-label="Schools that use Schoolcanvas"] .v2-school small { display: none; }
.v2 section.v2-section--tight[aria-label="Schools that use Schoolcanvas"] .v2-crest { width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: .62rem; }
@media (max-width: 767.98px) {
	.v2 section.v2-section--tight[aria-label="Schools that use Schoolcanvas"] { flex-direction: column; align-items: stretch; gap: .5rem; padding-block: .65rem; }
	.v2 section.v2-section--tight[aria-label="Schools that use Schoolcanvas"] > p { flex: none; text-align: center; }
}

/* Pixel QA (11 Oct 2026): shared fixes found in the page-by-page pass. */
/* Mock-up sub-lines (names, notes) at the mock-up text size on every page. */
.ui-person small, small.ui-muted { font-size: 0.6875rem; line-height: 1.35; }
/* Long KPI values no longer widen one column of a three-up mock-up grid. */
.ui-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Closing card: each half of the support hours stays on one line ("6 pm" never splits). */
.v2-close-hours span { white-space: nowrap; }
/* "Plug in the rest" intro: two even lines instead of "plugs in." alone on line 2. */
.v2-relb-head .v2-lead { text-wrap: balance; }
/* Numbers band on tablets (768–991): 2 columns, so figures like "1.5 million+" stay on one line. */
@media (min-width: 768px) and (max-width: 991.98px) { .v2-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Small phones: a long "You are here" name wraps inside its pill instead of running off the screen. */
@media (max-width: 419.98px) { .v2-relb-base { max-width: 100%; white-space: normal; text-align: center; } }
/* 340px phones: "Book a demo for your role" stays on one line. */
@media (max-width: 359.98px) { .v2-tab-panel .v2-btn { padding-inline: 1rem; } }

/* SEO keyword H1s (client, 11 Oct 2026): the page's eyebrow pill moves inside the <h1> and carries the
 * primary keyword ("School fee management software"), so the hero keeps its look. .v2-vh hides the "." (a full stop, so the H1 reads as two sentences)
 * that makes the H1 read as one sentence ("School fee management software: Fees on time. …"). */
.v2-h1 > .v2-h1-kw { display: flex; width: fit-content; max-width: 100%; margin: 0 0 1.25rem; letter-spacing: normal; text-transform: none; -webkit-text-fill-color: currentColor; text-wrap: balance; }
.v2-h1 > .v2-h1-kw--c { margin-inline: auto; }
.v2-h1 > .v2-h1-kw .v2-pill-dot { flex: none; }
.v2-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Guides row (sc2_guides): 2–3 blog post cards above "Plug in the rest" (SEO internal links, 11 Oct 2026). */
.v2-guides { padding-block: clamp(2rem, 3.5vw, 3rem); }
.v2-guides-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 0.5rem 2rem; margin-bottom: 1.4rem; }
.v2-guides-head .v2-pill { margin-bottom: 0.7rem; }
.v2 .v2-guides-h { margin: 0; color: var(--v2-ink); font-family: var(--v2-sans); font-size: clamp(1.4rem, 2.2vw, 1.875rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; }
.v2 a.v2-guides-all { color: var(--v2-blue); font-family: var(--v2-sans); font-size: 0.9375rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.v2 a.v2-guides-all:hover { text-decoration: underline; }
.v2-guides-list { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.v2-guide { position: relative; display: flex; gap: 1rem; align-items: stretch; min-width: 0; padding: 0.75rem; border: 1px solid var(--v2-line); border-radius: 0.75rem; background: #fff; transition: transform 0.15s, box-shadow 0.15s; }
.v2-guide:hover { transform: translateY(-3px); box-shadow: var(--v2-shadow); }
.v2-guide:focus-within { box-shadow: 0 0 0 3px rgba(40, 103, 178, 0.35); }
.v2-guide-img { flex: none; width: 7.5rem; overflow: hidden; border-radius: 0.5rem; }
.v2-guide-img img { display: block; width: 100%; height: 100%; min-height: 6.5rem; object-fit: cover; }
.v2-guide-body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 0.15rem 0.25rem 0.1rem 0; }
.v2-guide-cat { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--c, #2867b2); font-family: var(--v2-sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.v2-guide-cat::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 0.15rem; background: currentColor; }
.v2-guide h3 { margin: 0.35rem 0 0.4rem; font-family: var(--v2-sans); font-size: 1rem; font-weight: 700; line-height: 1.32; letter-spacing: -0.01em; text-wrap: pretty; }
.v2 .v2-guide h3 a { color: var(--v2-ink); text-decoration: none; }
.v2-guide h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.v2-guide h3 a:focus-visible { outline: none; }
.v2-guide-meta { margin-top: auto; color: var(--v2-muted); font-size: 0.8125rem; }
@media (max-width: 991.98px) {
	.v2-guides-list { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
}
@media (max-width: 575.98px) {
	.v2-guide { gap: 0.8rem; padding: 0.6rem; }
	.v2-guide-img { width: 5.75rem; }
	.v2-guide-img img { min-height: 5.75rem; }
	.v2-guide h3 { font-size: 0.9375rem; text-wrap: balance; }
	.v2-guide-meta { font-size: 0.75rem; }
}

/* Big screens (11 Oct 2026) ----------------------------------------------------
 * From 1600px the root font grows (theme.css), so rem sizes scale; fixed-px leftovers are fixed here. */
/* Footer "Service team across India" pin: the SVG has width/height="14" attributes, tiny beside the rem text on 2560–4K. */
.scf-service svg { width: 0.875rem; height: 0.875rem; }