@import url("/shared/theme_settings/theme_settings.css");
@import url("theme_settings/theme_settings.css");
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..900,0..100,0..1;1,9..144,300..900,0..100,0..1&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap");

/* ==========================================================================
   EDLIO - Platform Theme & Typography
   ========================================================================== */

:root {
	/* Fonts */
	--serif: "Fraunces", Georgia, serif;
	--sans: "Instrument Sans", system-ui, sans-serif;

	/* Color Tokens */
	--color-1: var(--color-1-theme, #d12923);
	--color-2: var(--color-2-theme, #ece5b6);
	--color-over-1: var(--color-over-1-theme, #ffffff);
	--color-over-2: var(--color-over-2-theme, #000000);

	/* Brand palette: the only colours the site uses (the example-school mockups keep their own school colours) */
	--red: var(--color-1);          /* brand red (the CMS theme colour, #d12923): buttons, accents, icons */
	--red-ink: #b42a20;             /* red hover / pressed, red text on light backgrounds */
	--ink: #2b2421;                 /* all headings and body text */
	--ink-2: #5c524d;               /* secondary text */
	--white: #fffdf9;               /* cards, white sections */
	--cream: #f7f4ee;               /* alternate sections */
	--beige: #f2ece1;               /* hero, footer, soft buttons on white */
	--line: rgba(43, 36, 33, 0.12); /* hairlines and dividers */
	--butter: #f5c84a;
	--butter-soft: #fbe9b8;         /* highlights */
	--sage: #bfd9c7;
	--sage-soft: #dcebe2;
	--success: #2f6b4a;             /* ticks and "done" states */
	--sky: #a7cbe8;                 /* module accent (the Messages dot) */
	--sky-soft: #e4effa;            /* soft-button hover: the only blue in buttons, never in titles */

	/* Type */
	--h2: clamp(2.125rem, 3.4vw, 3rem);         /* every section title: 34px phones, 48px desktop */
	--lead: clamp(1.0625rem, 1.25vw, 1.125rem); /* section intro paragraphs: 17-18px */

	/* Buttons: one pill shape, two sizes, 600 weight */
	--btn-pad: 14px 26px;
	--btn-pad-lg: 17px 32px;
	--btn-font: 600 15px/1.2 var(--sans);
	--btn-shadow: 0 1px 2px rgba(43, 36, 33, 0.06), 0 8px 20px -8px rgba(43, 36, 33, 0.28); /* soft buttons: no outlines */

	/* Spacing */
	--section-y: clamp(4rem, 6vw, 6rem);        /* top and bottom of every section: 64px phones, 96px desktop */

	--site-max-width: 1920px;
	--site-header-height: 80px;
	--site-bg-light: var(--cream);
	--site-bg-subtle: var(--beige);
	--site-text-dark: var(--ink);
	--site-text-muted: var(--ink-2);
	--site-border-color: var(--line);
}

/* Numbers never use the serif: wrap figures inside a serif heading (e.g. K–12) in <span class="num"> */
.num {
	font-family: var(--sans);
	font-weight: 500;
	font-size: 0.86em;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* Arrows in buttons and links: one glyph (→), one style and one hover nudge everywhere.
   Mark every arrow up as <span class="btn-arrow" aria-hidden="true">&rarr;</span> */
.btn-arrow {
	display: inline-block;
	font-family: var(--sans);
	font-size: 1em;
	font-weight: 600;
	line-height: 1;
	transition: transform 0.2s ease;
}

a:hover .btn-arrow,
a:focus-visible .btn-arrow,
button:hover .btn-arrow,
button:focus-visible .btn-arrow {
	transform: translateX(3px);
}

/* Bold text is never heavier than 600 */
b,
strong {
	font-weight: 600;
}

/* Global Reset & Box Sizing */
*, *::before, *::after {
	box-sizing: border-box;
}

/* Reduced motion baseline. Neutralize non-essential transitions,
   animations, and smooth scrolling for users requesting reduced motion. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


body {
	margin: 0;
	padding: 0;
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.55;
	font-weight: 400;
	color: var(--site-text-dark);
	background-color: #ffffff;
	font-variation-settings: "SOFT" 100, "WONK" 0;
	overflow-x: clip;
}

/* Lead paragraphs */
.site-lead,
.site-hero-block__body {
	font-size: 19px;
	line-height: 1.6;
}

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

/* Headings (Fraunces serif) */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--serif);
	font-weight: 600;
	font-variation-settings: "SOFT" 100, "WONK" 0;
	letter-spacing: -0.015em;
	font-optical-sizing: auto;
	color: inherit;
}

/* Container */
.site-container {
	width: 100%;
	max-width: var(--site-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* Skip link */
.site-skip-link {
	position: absolute;
	top: -999px;
	left: 1rem;
	background: var(--red);
	color: var(--color-over-1, #ffffff) !important;
	padding: 0.5rem 1rem;
	z-index: 9999;
	text-decoration: none;
	border-radius: 4px;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 600;
}
.site-skip-link:focus {
	top: 1rem;
}

/* ==========================================================================
   Header & Navigation (Floating Pill Layout)
   ========================================================================== */
/* Header pulls up over the hero on both homepage and inside pages */
.site-header {
	background: transparent;
	position: sticky;
	top: 1.25rem;
	z-index: 1000;
	pointer-events: none;
	padding: 0 1.5rem;
	margin-bottom: -5.25rem;
}

/* Ensure all inside page content & heroes have proper breathing room below the sticky header */
.site-page-header,
.ep-hero,
.ew-hero,
.ma-hero,
.mc-hero,
.ada-hero,
.doc-hero,
.widget-hero,
.agent-hero,
.acct-hero,
.show-news {
	padding-top: calc(5.25rem + 3rem) !important;
}

/* Native CMS category lists & feeds that lack custom heroes */
main#content_main:has(.news-list) {
	padding-top: calc(5.25rem + 3rem) !important;
	padding-bottom: 5rem !important;
	max-width: 1440px !important;
	margin: 0 auto !important;
	padding-left: clamp(1.5rem, 6vw, 6rem) !important;
	padding-right: clamp(1.5rem, 6vw, 6rem) !important;
	box-sizing: border-box !important;
}

main#content_main:has(.news-list) #news_control_panel {
	clear: both !important;
	padding-bottom: 3rem !important;
	padding-left: 28px !important;
}

main#content_main:has(.news-list) > .pageTitle {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 28px !important;
	padding-right: 28px !important;
	font-family: var(--serif, "Fraunces", Georgia, serif) !important;
	font-size: clamp(2.5rem, 4.5vw, 3.75rem) !important;
	font-weight: 600 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em !important;
	color: var(--site-text, #2B2421) !important;
	margin-bottom: 2rem !important;
	text-align: left !important;
}

#content_main:not(:has(.eh)):not(:has(.news-list)) {
	padding-top: 0 !important;
}

/* Header container styles across all pages */
.site-header__container {
	max-width: 100%;
	margin: 0;
	padding: 0.5rem 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	gap: 2rem;
	background: rgba(255, 253, 249, 0.92);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 9999px;
	border: 0;
	box-shadow: 0 12px 32px -4px rgba(43, 36, 33, 0.1), 0 4px 12px -2px rgba(43, 36, 33, 0.05);
	pointer-events: auto;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header__brand {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
}

.site-logo-link {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.site-logo-img {
	display: block;
	height: 28px;
	width: auto;
	max-width: 110px;
}

/* ==========================================================================
   Navigation — accessible-menu (Desktop & Mobile)
   ========================================================================== */

.site-nav {
	display: flex;
	align-items: center;
}

.site-nav .dropdown-toggle {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--site-text-dark, #2b2421);
	transition: color 0.2s ease;
}

.site-nav .dropdown-toggle::after {
	display: inline-block;
	font-family: 'Material Symbols Outlined';
	font-size: 1.25rem;
	line-height: 1;
	content: '\e5cf'; /* expand_more */
	transition: transform 0.25s ease;
}

.site-nav .dropdown-toggle[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

/* [Structural] Level-2 holder watches .show; level-3 sub-menu carries it. */
.site-nav .sub-menu-holder               { display: none; }
.site-nav .sub-menu-holder:has(.sub-menu.show) { display: block; }
.site-nav .sub-menu .sub-menu            { display: none; }
.site-nav .sub-menu .sub-menu.show       { display: block; }

/* --------------------------------------------------------------------------
   Desktop Navigation (min-width: 992px)
   -------------------------------------------------------------------------- */
.site-nav--desktop {
	display: none;
}

@media (min-width: 992px) {
	.site-nav--desktop {
		display: flex;
		align-items: center;
	}

	.site-nav--desktop .nav-menu {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		gap: 1.25rem;
		flex-wrap: nowrap;
	}

	.site-nav--desktop .nav-item {
		position: relative;
		display: grid;
		grid-template-columns: 1fr;
		align-items: center;
		border-radius: 999px;
		transition: background-color 0.2s ease;
	}

	.site-nav--desktop .nav-item:hover,
	.site-nav--desktop .nav-item:focus-within {
		background-color: transparent;
	}

	.site-nav--desktop .nav-item-inner {
		font-family: var(--sans);
		font-size: 15px;
		font-weight: 600;
		color: var(--site-text-dark);
		text-decoration: none;
		padding: 0.5rem 0.65rem;
		display: inline-block;
		white-space: nowrap;
		transition: color 0.2s ease;
		cursor: pointer;
	}

	.site-nav--desktop a.nav-item-inner:hover,
	.site-nav--desktop a.nav-item-inner:focus {
		color: var(--color-1, #d12923);
		text-decoration: underline;
	}

	/* [Structural] Top-level overlay pattern: label and toggle share one cell */
	.site-nav--desktop .nav-item.dropdown > a.nav-item-inner,
	.site-nav--desktop .nav-item.dropdown > div.nav-item-inner {
		grid-column: 1;
		grid-row: 1;
		margin-right: 1.75rem;
		position: relative;
		z-index: 1;
	}

	.site-nav--desktop .nav-item.dropdown > div.nav-item-inner {
		pointer-events: none;
	}

	.site-nav--desktop .nav-item.dropdown > .dropdown-toggle {
		grid-column: 1;
		grid-row: 1;
		width: 100%;
		justify-content: flex-end;
		padding-right: 0.35rem;
	}

	@media (max-width: 1240px) {
		.site-header__container {
			padding: 0.5rem 1.35rem;
			gap: 0.75rem;
		}
		.site-nav--desktop .nav-menu {
			gap: 0.5rem;
		}
		.site-nav--desktop .nav-item-inner {
			font-size: 13.5px;
			padding: 0.45rem 0.35rem;
		}
		.site-nav--desktop .nav-item.dropdown > a.nav-item-inner,
		.site-nav--desktop .nav-item.dropdown > div.nav-item-inner {
			margin-right: 1.5rem;
		}
	}

	/* Level-2 dropdown panel: solid, no outline, warm shadow; it fades and drops in, and fades out */
	.site-nav--desktop .sub-menu-holder {
		position: absolute;
		top: calc(100% + 0.75rem);
		left: 0;
		right: auto;
		display: block;
		background: var(--white);
		border: 0;
		border-radius: 20px;
		box-shadow: 0 24px 48px -16px rgba(43, 36, 33, 0.28), 0 2px 6px rgba(43, 36, 33, 0.06);
		padding: 0.5rem;
		min-width: 240px;
		z-index: 1001;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-6px);
		pointer-events: none;
		transition: opacity 0.15s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	}

	.site-nav--desktop .sub-menu-holder:has(> .sub-menu.show) {
		display: block;
		visibility: visible;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
	}

	/* an invisible bridge over the gap under the menu item, so the dropdown stays open as the mouse moves down to it */
	.site-nav--desktop .sub-menu-holder::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 0.75rem;
	}

	/* [Directional] Drop-left: right-half items align right edge to prevent viewport overflow */
	.site-nav--desktop .drop-left > .sub-menu-holder {
		left: auto;
		right: 0;
	}

	.site-nav--desktop .sub-menu {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.site-nav--desktop .sub-menu-item {
		position: relative;
		display: grid;
		grid-template-columns: 1fr;
	}

	.site-nav--desktop .sub-menu-item.dropdown {
		grid-template-columns: 1fr auto;
	}

	.site-nav--desktop .sub-menu-item > .nav-item-inner,
	.site-nav--desktop .sub-menu-item > a {
		font-family: var(--sans);
		font-size: 15px;
		font-weight: 500;
		color: var(--ink);
		text-decoration: none;
		padding: 0.65rem 0.9rem;
		display: block;
		border-radius: 12px;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	/* items: no lines between them, a light blue rounded highlight on hover and keyboard focus */
	.site-nav--desktop .sub-menu-item > a:hover,
	.site-nav--desktop .sub-menu-item > a:focus-visible,
	.site-nav--desktop .sub-menu-item:hover > .nav-item-inner,
	.site-nav--desktop .sub-menu-item:focus-within > .nav-item-inner {
		background-color: var(--sky-soft);
		color: var(--ink);
		text-decoration: none;
	}

	.site-nav--desktop .sub-menu-item.dropdown > .dropdown-toggle {
		grid-column: 2;
		grid-row: 1;
		width: auto;
		padding-inline: 0.5rem;
	}

	.site-nav--desktop .sub-menu-item.dropdown > .dropdown-toggle::after {
		content: '\e5cc'; /* chevron_right */
	}

	.site-nav--desktop .drop-left .sub-menu-item.dropdown > .dropdown-toggle::after {
		content: '\e5cb'; /* chevron_left */
	}

	/* [Structural] Level-3 flyout */
	.site-nav--desktop .sub-menu .sub-menu {
		position: absolute;
		top: 0;
		left: 100%;
		right: auto;
		min-width: 220px;
		background: var(--white);
		border: 0;
		border-radius: 16px;
		box-shadow: 0 24px 48px -16px rgba(43, 36, 33, 0.28), 0 2px 6px rgba(43, 36, 33, 0.06);
		padding: 0.5rem;
		z-index: 1002;
	}

	.site-nav--desktop .drop-left .sub-menu-item.dropdown > .sub-menu {
		right: 100%;
		left: auto;
	}
}

/* --------------------------------------------------------------------------
   Mobile Navigation (<992px)
   -------------------------------------------------------------------------- */
.site-nav--mobile {
	display: block;
}

@media (min-width: 992px) {
	.site-nav--mobile {
		display: none;
	}
}

.site-nav--mobile .menu-toggle {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	margin-left: auto;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	transition: background 0.2s ease;
	color: var(--site-text-dark, #2b2421);
}

.site-nav--mobile .menu-toggle:hover {
	background: rgba(43, 36, 33, 0.06);
}

.site-nav--mobile .menu-toggle::before,
.site-nav--mobile .menu-toggle::after {
	grid-area: 1 / 1;
	display: inline-block;
	font-family: 'Material Symbols Outlined';
	font-size: 1.85rem;
	line-height: 1;
	transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* the menu icon and the close icon cross-fade with a small turn */
.site-nav--mobile .menu-toggle::before {
	content: '\e5d2'; /* menu */
}

.site-nav--mobile .menu-toggle::after {
	content: '\e5cd'; /* close */
	opacity: 0;
	transform: rotate(-90deg) scale(0.8);
}

.site-nav--mobile .menu-toggle[aria-expanded="true"]::before {
	opacity: 0;
	transform: rotate(90deg) scale(0.8);
}

.site-nav--mobile .menu-toggle[aria-expanded="true"]::after {
	opacity: 1;
	transform: none;
}

/* [Structural] The library toggles .show on the mobile menu element. The panel stays in the layout and
   fades in and out (it's hidden from screen readers and keyboard focus while closed) */
.site-nav--mobile .nav-menu {
	display: flex;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px) scale(0.98);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.site-nav--mobile .nav-menu.show {
	visibility: visible;
	opacity: 1;
	transform: none;
	pointer-events: auto;
	transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}

.site-nav--mobile .nav-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	right: 0;
	background: var(--white);
	border-radius: 24px;
	border: 0;
	box-shadow: 0 24px 48px -16px rgba(43, 36, 33, 0.28);
	padding: 0.5rem;
	max-height: calc(100svh - 176px);   /* ends above the accessibility and chatbot buttons; longer menus scroll inside */
	overflow-y: auto;
	overscroll-behavior: contain;
	z-index: 1000;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	list-style: none;
	margin: 0;
	transform-origin: top center;
}

@media (min-width: 600px) {
	.site-nav--mobile .nav-menu {
		left: auto;
		width: min(400px, 100%);
	}
}

.site-nav--mobile .nav-item,
.site-nav--mobile .sub-menu-item {
	display: grid;
	grid-template-columns: 1fr;
	border-radius: 14px;
	transition: background 0.2s ease;
}

/* no divider lines: a row softly highlights while its submenu is open, and turns light blue on hover */
.site-nav--mobile .nav-item:has(> .dropdown-toggle[aria-expanded="true"]) {
	background: rgba(43, 36, 33, 0.04);
}

.site-nav--mobile .nav-item:hover {
	background: var(--sky-soft);
}

.site-nav--mobile .nav-item.dropdown,
.site-nav--mobile .sub-menu-item.dropdown {
	grid-template-columns: 1fr auto;
	align-items: center;
}

.site-nav--mobile .nav-item-inner {
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 600;
	color: var(--site-text-dark);
	text-decoration: none;
	padding: 0.85rem 0.75rem 0.85rem 1rem;
	display: block;
	box-sizing: border-box;
	min-width: 0;
	overflow-wrap: break-word;
}

.site-nav--mobile .dropdown-toggle {
	width: 44px;
	height: 44px;
	margin: 0.25rem 0.25rem 0.25rem 0;
	background: transparent;
	border-radius: 50%;
	justify-self: end;
}

.site-nav--mobile .sub-menu-holder {
	grid-column: 1 / -1;
	display: grid;
	grid-template-rows: 0fr;
	padding-bottom: 0;
	visibility: hidden;
	opacity: 0;
	transition: grid-template-rows 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.3s ease, opacity 0.2s ease, visibility 0s linear 0.3s;
}

.site-nav--mobile .sub-menu-holder:has(> .sub-menu.show) {
	display: grid;
	grid-template-rows: 1fr;
	padding-bottom: 0.5rem;
	visibility: visible;
	opacity: 1;
	transition: grid-template-rows 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.35s ease, opacity 0.3s ease 0.05s, visibility 0s;
}

.site-nav--mobile .sub-menu-holder > .sub-menu {
	min-height: 0;
	overflow: hidden;
}

.site-nav--mobile .sub-menu {
	list-style: none;
	margin: 0 0.5rem;
	padding: 0;
	border-radius: 12px;
	background: var(--cream);
}

.site-nav--mobile .sub-menu-item > a,
.site-nav--mobile .sub-menu-item > div {
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 500;
	color: var(--ink-2);
	text-decoration: none;
	padding: 0.7rem 1rem;
	display: block;
	border-radius: 12px;
	transition: color 0.2s ease, background 0.2s ease;
}

.site-nav--mobile .sub-menu-item > a:hover {
	color: var(--ink);
	background: var(--sky-soft);
}

.site-nav--mobile .sub-menu .sub-menu .sub-menu-item > a {
	padding-left: 3.25rem;
}

.site-nav--mobile .sub-menu .sub-menu {
	grid-column: 1 / -1;
}

@media (max-width: 991px) {
	.site-header {
		padding: 0 1rem;
		top: 0.75rem;
		margin-bottom: -4.5rem;
	}

	/* On homepage mobile, the header floats over the hero (no white bar); the card sits below it via --ty */
	.site-header:has(+ #content_main .eh.live) {
		margin-bottom: -62px !important;
	}

	.site-page-header,
	.ep-hero,
	.ew-hero,
	.ma-hero,
	.mc-hero,
	.ada-hero,
	.doc-hero,
	.widget-hero,
	.agent-hero,
	.acct-hero,
	.show-news {
		padding-top: calc(4.5rem + 2rem) !important;
	}

	#content_main:not(:has(.eh)) {
		padding-top: 0 !important;
	}

	.site-header__container {
		padding: 0.5rem 1.25rem;
		min-height: 54px;
	}

	.site-logo-text {
		font-size: 1.85rem;
	}
}

/* ==========================================================================
   Buttons & Tags
   ========================================================================== */
a.site-btn,
button.site-btn {
	display: inline-block;
	font-family: var(--sans);
	padding: 0.85rem 1.75rem;
	font-size: 15px;
	font-weight: 600;
	border-radius: 6px;
	text-decoration: none !important;
	transition: all 0.2s ease;
	cursor: pointer;
	text-align: center;
}

a.site-btn--primary,
a.site-btn--primary:link,
a.site-btn--primary:visited {
	background-color: var(--color-1, #d12923);
	color: var(--color-over-1, #ffffff) !important;
	border: 2px solid transparent;
}

a.site-btn--primary:hover,
a.site-btn--primary:focus {
	filter: brightness(1.1);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(209, 41, 35, 0.25);
	color: var(--color-over-1, #ffffff) !important;
}

a.site-btn--secondary,
a.site-btn--secondary:link,
a.site-btn--secondary:visited {
	background-color: var(--site-text-dark);
	color: #ffffff !important;
	border: 2px solid transparent;
}

a.site-btn--secondary:hover,
a.site-btn--secondary:focus {
	filter: brightness(1.2);
	transform: translateY(-2px);
	color: #ffffff !important;
}

a.site-btn--outline,
a.site-btn--outline:link,
a.site-btn--outline:visited {
	background-color: transparent;
	color: #ffffff !important;
	border: 2px solid rgba(255, 255, 255, 0.7);
}

a.site-btn--outline:hover,
a.site-btn--outline:focus {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: #ffffff;
	color: #ffffff !important;
}

a.site-btn--lg {
	padding: 1rem 2.25rem;
	font-size: 16px;
	font-weight: 600;
}

/* Labels and UI text: 13-16px, weight 500-600 */
.site-feature-tag {
	display: inline-block;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-1, #d12923);
	margin-bottom: 0.75rem;
}

/* Section h2: clamp(36px, 4.2vw, 60px), line-height ~1.02–1.04 */
.site-section__heading {
	font-family: var(--serif);
	font-size: clamp(36px, 4.2vw, 60px);
	font-weight: 600;
	font-variation-settings: "SOFT" 100, "WONK" 0;
	letter-spacing: -0.015em;
	font-optical-sizing: auto;
	color: var(--site-text-dark);
	margin: 0 0 1.25rem;
	line-height: 1.04;
}

.site-section__heading--center {
	text-align: center;
}

.site-rich-text {
	font-size: 17px;
	color: #495057;
	line-height: 1.6;
	margin-bottom: 2rem;
}

.site-rich-text p {
	margin: 0 0 1.25rem;
}

.site-rich-text ul {
	margin: 0 0 1.5rem 1.25rem;
	padding: 0;
}

.site-rich-text li {
	margin-bottom: 0.6rem;
}

/* Italic accent lines using Fraunces italic, weight 500, SOFT 100, WONK 1 */
em, i, .site-italic-accent {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 500;
	font-variation-settings: "SOFT" 100, "WONK" 1;
}

/* ==========================================================================
   1. Hero Section ("School Day" Video Story Component)
   ========================================================================== */
/* Intro Red Brand Overlay - Retired in favor of in-hero .eh.live.intro */
/* (Styles moved directly to .eh.live.intro) */

/* ---------- tokens ---------- */
.eh{
  --edge:24px;  /* expanded frame's inset from the screen sides and bottom */
  --top:calc(84px + var(--edge));   /* expanded frame's top edge: clears header bottom (84px) + equal edge gap */
  position:relative;background:var(--beige);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;font-variation-settings:"SOFT" 100,"WONK" 0}
.eh *,.eh *::before,.eh *::after{box-sizing:border-box}
.eh h1,.eh h3{margin:0;font-family:var(--serif);font-weight:600;letter-spacing:-.015em;font-variation-settings:"SOFT" 100,"WONK" 0}
.eh p{margin:0}
.eh-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.eh-nw{white-space:nowrap}
.eh :focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.eh-btn{display:inline-flex;align-items:center;gap:8px;padding:var(--btn-pad);border-radius:999px;background:var(--white);color:var(--ink) !important;border:0;box-shadow:var(--btn-shadow);font:var(--btn-font);text-decoration:none;transition:background .2s,color .2s,transform .2s}
.eh-btn:hover{background:var(--sky-soft);color:var(--ink) !important;transform:translateY(-1px)}
.eh-btn:focus-visible{outline-offset:4px;border-radius:999px}
/* play/pause: icon only; the word stays for screen readers and the script keeps an aria-label in sync */
.eh-play{flex:none;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border-radius:999px;border:1.5px solid currentColor;background:transparent;color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.eh-play i{width:11px;height:12px;border-left:3.5px solid currentColor;border-right:3.5px solid currentColor}
.eh-play[aria-pressed="true"] i{width:0;height:0;border:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.eh-play span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- still layout: phones, reduced motion and no JavaScript. Headline beside the video, every moment listed under it ---------- */
.eh-pin{display:grid;grid-template-columns:1fr 1fr;align-items:start}
.eh-copy{display:flex;flex-direction:column;justify-content:center;gap:26px;min-width:0;padding:120px 36px 72px max(32px,calc((100vw - 1280px) / 2 + 32px))}
.eh-h1{font-size:clamp(28px,3.4vw,56px);line-height:1.08}
.eh-h1 > span{display:block}
.eh-h1 em{display:block;font-style:italic;font-weight:500;font-variation-settings:"SOFT" 100,"WONK" 1}
.eh-cta{display:flex;flex-direction:column;gap:26px}
.eh-p{font-size:18px;line-height:1.55;color:var(--ink-2);max-width:40ch}
.eh-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.eh-sym{display:none !important}
.eh-frame{position:relative;overflow:hidden;background:var(--ink);display:flex;flex-direction:column;min-width:0}
.eh-media{position:relative;height:min(60vh,520px);flex:none}
.eh-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.eh-vid[data-k="0"]{opacity:1}
.eh-panel{color:var(--white);padding:24px 24px 26px}
.eh-ctrls{display:flex;justify-content:flex-end;margin-bottom:14px}
.eh-ctrls .eh-play{color:var(--white);border-color:rgba(255,253,249,.65)}
.eh-ctrls .eh-play:hover{background:var(--white);color:var(--ink)}
.eh-panel :focus-visible{outline-color:var(--butter-soft)}
.eh-rail{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.eh-dot{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:0;font:inherit;color:var(--white);cursor:default}
.eh-node{width:14px;height:14px;border-radius:50%;background:var(--butter-soft);flex:none}
.eh-time,
.eh.live .eh-time {
	font-family: var(--sans, "Instrument Sans", sans-serif) !important;
	font-style: normal !important;
	font-weight: 600 !important;
	font-feature-settings: "tnum" 1 !important;
	font-size: 15px !important;
	letter-spacing: -0.01em !important;
	color: var(--butter-soft) !important;
	white-space: nowrap !important;
}
.eh-prod{font-size:13px;font-weight:600;color:rgba(255,253,249,.88)}
.eh-body{margin-top:8px}
.eh-name{font-family:var(--serif, "Fraunces", serif);font-weight:600;font-size:21px;line-height:1.12;color:var(--white)}
.eh-name em{font-style:italic}
.eh-body p,.eh-sum p{font-size:15px;line-height:1.5;color:rgba(255,253,249,.88);margin-top:8px;max-width:60ch}
.eh-sum{margin-top:24px}
.eh-sum .eh-name{color:var(--butter-soft)}
@media (max-width:860px){.eh-pin{grid-template-columns:1fr}.eh-copy{padding:104px 16px 40px}.eh-media{height:min(52vh,420px)}}

/* ---------- live layout (desktop, motion allowed): the script adds .live ---------- */
/* the opening card: bigger than the old tile, centred 40px below the middle to clear the nav */
.eh.live{height:calc(115vh + var(--bands,5) * 65vh);--tw:min(72vw,1100px);--th:min(100vh - 170px,720px);--tx:calc(50% - var(--tw) / 2);--ty:calc(50% - var(--th) / 2 + 40px)}
.eh.live .eh-pin{position:sticky;top:0;height:100vh;height:100svh;display:block;overflow:hidden}
.eh.live .eh-frame{position:absolute;z-index:2;display:block;left:var(--tx);top:var(--ty);width:var(--tw);height:var(--th);border-radius:28px;box-shadow:0 40px 80px -40px rgba(43,36,33,.6);
  animation:none;
  transition:left .95s cubic-bezier(.65,0,.35,1),top .95s cubic-bezier(.65,0,.35,1),width .95s cubic-bezier(.65,0,.35,1),height .95s cubic-bezier(.65,0,.35,1),border-radius .95s cubic-bezier(.65,0,.35,1),box-shadow .95s ease}
.eh.live:not(.wide) .eh-frame{background:var(--red)}        /* red, not black, before the video's first frame */
.eh.live:not(.wide) .eh-frame::after{opacity:0}             /* no dark wash on the card: the cover replaces it */

/* one scroll grows the tile into the framed story (a timed transition, never scrubbed by the scroll) */
.eh.live.wide .eh-frame{left:var(--edge);top:var(--top);width:calc(100% - var(--edge) * 2);height:calc(100% - var(--top) - var(--edge))}
.eh.live .eh-media{position:absolute;inset:0;height:auto;animation:ehZoom 2.6s .7s cubic-bezier(.2,.7,.2,1) both}
/* film grain and a soft vignette over the footage */
.eh.live .eh-frame::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.42;mix-blend-mode:soft-light;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(ellipse 75% 70% at 50% 45%,transparent 55%,rgba(20,16,14,.4))}
/* a dark wash rising from the bottom keeps text readable over any footage: white stays above 3:1 and butter above 4.5:1 even on a white frame */
.eh.live .eh-frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .6s ease;background:linear-gradient(to top,rgba(22,18,16,.86) 0%,rgba(22,18,16,.68) 52%,rgba(22,18,16,.14) 92%)}
.eh.live.wide .eh-frame::after{opacity:0;background:linear-gradient(to top,rgba(22,18,16,.9) 0%,rgba(22,18,16,.78) 58%,rgba(22,18,16,0) 92%)}
.eh.live.wide.open .eh-frame::after{opacity:1}

/* the cover: a see-through Edlio red over the playing video, lighter at the top, fuller behind the type. Once the card has
   finished growing into the frame, it fades away (0.85s delay); scrolling back brings it straight back */
.eh-cover{display:none}
.eh.live .eh-cover{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(180,42,32,.95) 0%,rgba(180,42,32,.92) 50%,rgba(209,41,35,.88) 100%);transition:opacity .45s ease}   /* red-ink under the paragraph and buttons keeps white text at AA (4.5:1) */
.eh.live.wide .eh-cover{opacity:0;transition:opacity .7s .85s ease}
.eh.live .eh-open{z-index:3}                                /* the click target stays above the cover */

/* each moment rolls in: the new video wipes up over the last (down when scrolling back) */
.eh.live .eh-vid{opacity:1;clip-path:inset(100% 0 0 0);transform:scale(1.06);transition:clip-path .95s cubic-bezier(.65,0,.35,1),transform 1.4s cubic-bezier(.2,.7,.2,1)}
.eh.live .eh-vid.was{z-index:1;clip-path:inset(0);transform:none;transition:none}
.eh.live .eh-vid.on{z-index:2;clip-path:inset(0);transform:none}
.eh.live .eh-media.back .eh-vid:not(.on):not(.was){clip-path:inset(0 0 100% 0)}

/* the copy: everything centred on the card; the motto, the summary, then the buttons */
.eh.live .eh-copy{position:absolute;z-index:4;left:var(--tx);top:var(--ty);width:var(--tw);height:var(--th);padding:clamp(28px,3.6vw,52px);justify-content:center;align-items:center;text-align:center;gap:clamp(16px,2.4vh,24px);pointer-events:none;color:var(--white);
  transition:opacity .45s ease,transform .45s ease,left .95s cubic-bezier(.65,0,.35,1),top .95s cubic-bezier(.65,0,.35,1),width .95s cubic-bezier(.65,0,.35,1),height .95s cubic-bezier(.65,0,.35,1)}
.eh.live .eh-copy a,.eh.live .eh-copy button{pointer-events:auto}
.eh.live.wide .eh-copy,
.eh.live.open .eh-copy{opacity:0 !important;pointer-events:none !important;visibility:hidden !important}
.eh.live.wide .eh-copy a,.eh.live.wide .eh-copy button,
.eh.live.open .eh-copy a,.eh.live.open .eh-copy button{pointer-events:none !important}
.eh-h1 > *{display:block;text-wrap:balance}
.eh.live .eh-h1{font-size:min(calc(var(--tw) * .054),8vh,66px);line-height:1;letter-spacing:-.028em;color:var(--white);text-shadow:none;transform-origin:center;transition:scale .95s cubic-bezier(.65,0,.35,1)}
.eh.live .eh-h1 em{color:var(--butter-soft)}
.eh.live .eh-h1 > :nth-child(1){animation-delay:.45s}.eh.live .eh-h1 > :nth-child(2){animation-delay:.8s}.eh.live .eh-h1 > :nth-child(3){animation-delay:1.15s}
.eh.live .eh-cta{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3vh,28px);max-height:320px;transition:opacity .6s .5s ease,max-height .95s cubic-bezier(.65,0,.35,1)}
.eh.live .eh-p{font-size:18px;max-width:70ch;color:var(--white);text-wrap:pretty}
.eh.live .eh-p2{display:block}                              /* one sentence per line */
.eh.live .eh-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.eh.live .eh-copy .eh-btn{background:var(--white);color:var(--ink) !important}
.eh.live .eh-copy .eh-btn:hover{background:var(--sky-soft);color:var(--ink) !important}
.eh.live .eh-copy .eh-btn.line{background:transparent;color:var(--white) !important;box-shadow:inset 0 0 0 1.5px rgba(255,253,249,.8)}
.eh.live .eh-copy .eh-btn.line:hover{background:var(--sky-soft);color:var(--ink) !important;box-shadow:none}
.eh.live .eh-copy .eh-play{position:absolute;right:clamp(20px,2.5vw,36px);bottom:clamp(20px,2.5vh,36px);display:inline-flex;color:var(--white);border-color:rgba(255,253,249,.8)}
.eh.live .eh-copy .eh-play:hover{background:var(--white);color:var(--ink)}
.eh.live .eh-copy :focus-visible{outline-color:var(--butter-soft)}

/* the logo: centred above the motto during the intro only, then folded away so the type sits in the true centre */
.eh-logo{display:none}
.eh-logo svg{display:block;height:.82em;width:auto}
.eh.live .eh-logo{display:inline-flex;align-self:center;overflow:hidden;color:var(--white);font-size:min(calc(var(--tw) * .066),7.6vh,72px);
  max-height:1em;margin-bottom:.3em;transform-origin:center bottom;animation:ehText .9s .1s cubic-bezier(.2,.8,.2,1) both;
  transition:scale .95s cubic-bezier(.65,0,.35,1),max-height .95s cubic-bezier(.65,0,.35,1),margin .95s cubic-bezier(.65,0,.35,1)}
.eh.live .eh-logo svg{transition:opacity .5s ease}
.eh.live:not(.intro) .eh-logo{max-height:0;margin-bottom:calc(-1 * clamp(16px,2.4vh,24px))}   /* cancels the column gap */
.eh.live:not(.intro) .eh-logo svg{opacity:0}

/* the intro: full screen, nav out of the way, type a touch larger; the summary and buttons take no space yet */
.eh.live.intro .eh-frame,.eh.live.intro .eh-copy{left:0;top:0;width:100%;height:100%}
.eh.live.intro .eh-frame{border-radius:0;box-shadow:none}
.eh.live.intro .eh-logo,.eh.live.intro .eh-h1{scale:1.3}
.eh.live.intro .eh-cta{opacity:0;max-height:0;transition:none}
.eh.live.intro .eh-peek{opacity:0}
/* fixed header navigation bar slide-in transition */
.site-header__container{transition:opacity .6s .45s ease,transform .6s .45s ease}
body:has(.eh.live.intro) .site-header__container{opacity:0;transform:translateY(-14px);pointer-events:none;transition:none}

/* the product cards: four matching white cards in front of the red card's edges, two a side, the right pair a step lower.
   They hold still (the video is the only thing moving) and clear away when the card grows into the story */
.eh-peek{display:none}
.eh.live .eh-peek{display:block;position:absolute;inset:0;z-index:5;pointer-events:none;transition:opacity .5s ease,transform .9s cubic-bezier(.65,0,.35,1);
  --cw:clamp(148px,13vw,220px);--over:min(1.5vw,26px)}    /* card width; how far a card reaches over the red card */
.eh-peek > *{position:absolute;animation:ehCardIn .8s var(--d) cubic-bezier(.2,.8,.2,1) both}
@keyframes ehCardIn{from{opacity:0;scale:.86}}
.eh-card{margin:0;width:var(--cw);padding:8px 8px 14px;border-radius:20px;background:var(--white);box-shadow:0 26px 48px -22px rgba(43,36,33,.6);transform:rotate(var(--r))}
.eh-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;filter:saturate(.85)}
.eh-card figcaption{padding:10px 6px 0;font:600 13px/1.3 var(--sans);color:var(--ink);text-wrap:balance}
.eh-card figcaption i{display:block;margin-bottom:3px;font-family:var(--serif);font-weight:500;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:15px;color:var(--red-ink)}
.eh-card-ic{position:absolute;top:-14px;left:-14px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--ink);box-shadow:0 12px 22px -12px rgba(43,36,33,.55)}
.eh-card-ic svg{width:21px;height:21px}
.eh-card.c1 .eh-card-ic{color:var(--white)}   /* white icon on the red Payments circle */
.eh-card.c3 .eh-card-ic,.eh-card.c4 .eh-card-ic{left:auto;right:-14px}
.eh-card.c1,.eh-card.c2{left:calc(var(--tx) - var(--cw) + var(--over))}
.eh-card.c3,.eh-card.c4{right:calc(var(--tx) - var(--cw) + var(--over))}
.eh-card.c1{top:calc(var(--ty) + var(--th) * .05);--r:-3deg;--d:.3s}
.eh-card.c2{top:calc(var(--ty) + var(--th) * .53);--r:2deg;--d:.45s}
.eh-card.c3{top:calc(var(--ty) + var(--th) * .12);--r:3deg;--d:.6s}
.eh-card.c4{top:calc(var(--ty) + var(--th) * .6);--r:-2deg;--d:.75s}
.eh.live.intro .eh-card{animation-delay:calc(var(--d) + 3.2s)}
.eh.live.wide .eh-peek{opacity:0;transform:scale(1.12)}
@media (max-width:1000px){.eh.live .eh-peek{display:none}}   /* no room beside the card */

/* phones (still layout): the longer motto, a little smaller and balanced */
@media (max-width:860px){
  /* Mobile: remove motto intro overlay scale/delay overrides, simple hero fade-in on load */
  .eh.live .eh-frame{
    animation: ehMobileHeroFade .85s cubic-bezier(.16, 1, 0.3, 1) both;
  }
  .eh.live .eh-copy{
    animation: ehMobileHeroFade .75s .15s cubic-bezier(.16, 1, 0.3, 1) both;
  }
  .eh.live .eh-logo{
    display: none !important;
  }
  .eh.live .eh-h1,
  .eh.live .eh-h1 > *{
    animation: none !important;
  }
  .eh.live.intro .eh-frame,
  .eh.live.intro .eh-copy{
    left: var(--tx) !important;
    top: var(--ty) !important;
    width: var(--tw) !important;
    height: var(--th) !important;
    border-radius: 24px !important;
  }
  .eh.live.intro .eh-h1{
    scale: 1 !important;
  }
  .eh.live.intro .eh-cta{
    opacity: 1 !important;
    max-height: 320px !important;
  }

  .eh:not(.live) .eh-h1{font-size:clamp(30px,8.6vw,42px);line-height:1.04}

  /* mobile live experience: matched to desktop card & story flow */
  .eh.live{
    --tw:calc(100vw - 24px);
    --th:calc(100svh - 176px);
    --tx:12px;
    --ty:84px;
  }
  .eh.live .eh-frame{
    border-radius:24px;
    clip-path:inset(0 round 24px);
    -webkit-clip-path:inset(0 round 24px);
  }
  .eh.live.wide .eh-frame{
    border-radius:24px;
    left:var(--tx);
    top:var(--ty);
    width:var(--tw);
    height:var(--th);
  }
  .eh.live .eh-copy{
    padding:clamp(20px,4vh,32px) 16px 72px;
    gap:clamp(10px,2vh,16px);
  }
  .eh.live .eh-h1{
    font-size:clamp(22px,6.8vw,32px);
    line-height:1.08;
    letter-spacing:-.02em;
  }
  .eh.live .eh-cta{
    gap:clamp(10px,2vh,16px);
    width:100%;
  }
  .eh.live .eh-p{
    font-size:15px;
    line-height:1.4;
    max-width:48ch;   /* fills a phone card, stays a comfortable width on tablets */
    text-wrap:balance;
  }
  .eh.live .eh-actions{
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
  }
  .eh.live .eh-copy .eh-btn{
    flex:0 0 auto;
    width:min(100%,260px);
    justify-content:center;
    font-size:15px;
    padding:var(--btn-pad);
    white-space:nowrap;
    letter-spacing:-.01em;
  }
  .eh.live .eh-copy .eh-play{
    position:absolute;
    right:16px;
    bottom:16px;
  }
  .eh.live .eh-panel{
    padding:0 20px 20px;
  }
  .eh.live .eh-name{
    font-size:clamp(20px,5.8vw,26px);
    line-height:1.15;
    max-width:100%;
  }
  .eh.live .eh-body,.eh.live .eh-sum{
    left:0;
    right:0;
    bottom:calc(100% + 16px);
  }
  .eh.live .eh-sum{
    left:20px;
    right:20px;
    bottom:24px;
  }
  .eh.live.final .eh-rail{
    opacity:0;
    pointer-events:none;
    transform:translateY(12px);
  }
  .eh.live .eh-body p,.eh.live .eh-sum p{
    font-size:13.5px;
    line-height:1.38;
    margin-top:8px;
    max-width:100%;
  }
  .eh.live .eh-rail{
    margin-top:clamp(90px,18vh,130px);
    margin-bottom:46px;
    gap:0;
  }
  .eh.live .eh-prod{
    display:none !important;
  }
  .eh.live .eh-time{
    font-size:13px !important;
  }
  .eh.live .eh-ctrls{
    right:16px;
    bottom:16px;
  }
}

/* the tile itself is a button that opens the story */
.eh.live:not(.wide) .eh-open{display:block;position:absolute;inset:0;z-index:3;width:100%;border:0;padding:0;background:transparent;cursor:pointer;border-radius:inherit}
.eh.live .eh-open:focus-visible{outline:3px solid var(--ink);outline-offset:4px}

/* sneak peek: product cards in front of the red card */
.eh.paused .eh-peek > *{animation-play-state:paused}

/* the story panel: no box, one big caption at a time over the wash, with the timeline across the bottom */
.eh.live .eh-panel{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 clamp(28px,4vw,56px) 24px;visibility:hidden;opacity:0;transform:translateY(16px);
  transition:opacity .4s ease,transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s .6s}
.eh.live.open .eh-panel{visibility:visible;opacity:1;transform:none;transition:opacity .5s .2s ease,transform .7s .2s cubic-bezier(.2,.8,.2,1),visibility 0s}
.eh.live .eh-ctrls{position:absolute;z-index:2;margin:0;right:clamp(28px,4vw,56px);bottom:24px}
.eh.live .eh-ctrls .eh-play{background:rgba(43,36,33,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.eh.live .eh-ctrls .eh-play:hover{background:var(--white)}
/* the rail: positioned above the pause button row, caption space above it is sized to the longest moment */
.eh.live .eh-rail{position:relative;grid-template-columns:repeat(var(--n,4),1fr);gap:0;margin-top:var(--ch,150px);margin-bottom:56px;transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1)}
.eh.live.final .eh-rail{opacity:0;pointer-events:none;transform:translateY(16px)}
.eh.live .eh-rail::before,.eh.live .eh-rail::after{content:"";position:absolute;top:9px;height:3px;border-radius:2px;left:calc(50% / var(--n,4))}
.eh.live .eh-rail::before{right:calc(50% / var(--n,4));background:rgba(255,253,249,.25)}
.eh.live .eh-rail::after{width:var(--fill,0px);background:var(--butter);transition:width .6s cubic-bezier(.65,0,.35,1)}
.eh.live .eh-item{text-align:center}
.eh.live .eh-dot{position:relative;z-index:1;flex-direction:column;gap:6px;padding:0 6px 4px;cursor:pointer}
.eh.live .eh-node{width:21px;height:21px;background:rgba(43,36,33,.95);box-shadow:inset 0 0 0 2.5px rgba(255,253,249,.6);transition:background .3s .2s,box-shadow .3s .2s}
.eh.live .eh-item.done .eh-node,.eh.live .eh-item.on .eh-node{background:var(--butter);box-shadow:none}
.eh.live .eh-item.on .eh-node{box-shadow:0 0 0 6px rgba(255,253,249,.28)}
.eh.live .eh-dot:hover .eh-prod{text-decoration:underline;text-underline-offset:3px}
.eh.live .eh-body,.eh.live .eh-sum{position:absolute;left:0;right:150px;bottom:calc(100% + 34px);margin:0;text-align:left;text-shadow:0 1px 20px rgba(0,0,0,.3)}
.eh.live .eh-sum{left:clamp(28px,4vw,56px);bottom:clamp(36px,5vh,64px)}
.eh.live .eh-name{font-family:var(--serif);font-weight:500;font-size:clamp(30px,2.8vw,42px);line-height:1.12;letter-spacing:-.015em;color:var(--white);max-width:22ch;text-wrap:balance}
.eh.live .eh-name em{font-weight:400;letter-spacing:-.02em}
.eh.live .eh-body p:not(.eh-name),.eh.live .eh-sum p:not(.eh-name){font-family:var(--sans);font-weight:400;font-size:clamp(17px,1.4vw,21px);line-height:1.4;letter-spacing:0;color:var(--white);margin-top:14px;max-width:46ch}   /* the summary under each headline: about half its size */
/* only the current moment shows; the others stay available to screen readers */
.eh.live .eh-item:not(.on) .eh-body,.eh.live:not(.final) .eh-sum{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.eh.live .eh-item.on .eh-body,.eh.live.final .eh-sum{animation:ehRollIn .6s .2s cubic-bezier(.2,.8,.2,1) both}
.eh.live.back .eh-item.on .eh-body,.eh.live.back.final .eh-sum{animation-name:ehRollBack}
@media (max-height:780px){.eh.live .eh-name{font-size:clamp(28px,2.6vw,38px)}.eh.live .eh-body p:not(.eh-name),.eh.live .eh-sum p:not(.eh-name){font-size:18px}}

@keyframes ehText{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes ehTile{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ehZoom{from{transform:scale(1.14)}to{transform:none}}
@keyframes ehRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ehPeek{from{opacity:0}}
@keyframes ehDrift{from{translate:0 0}to{translate:0 -14px}}
@keyframes ehRollIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes ehRollBack{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
@keyframes ehMobileHeroFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.eh *,.eh *::before,.eh *::after{animation:none!important;transition:none!important}}

/* 2. Stats Section */
.site-section--stats {
	background-color: var(--cream);
	border-bottom: none;
	padding-top: var(--section-y);
	padding-bottom: var(--section-y);
	scroll-margin-top: 5rem;
}

.site-stats-header {
	text-align: center;
	margin-bottom: 4.5rem;
}

.site-stats-headline {
	font-family: var(--serif, "Fraunces", Georgia, serif);
	font-weight: 600;
	font-size: var(--h2);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0;
}

.site-stats-headline em {
	font-style: italic;
	font-weight: 400;
	font-variation-settings: "SOFT" 100, "WONK" 1;
}

.site-stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 1.75rem;
	row-gap: 1.75rem;
	text-align: center;
	max-width: 1040px;
	margin: 0 auto;
}

.site-stat-card {
	background: var(--white);
	border-radius: 20px;
	padding: 2.25rem 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-shadow: 0 10px 30px rgba(43, 36, 33, 0.05);
}

/* Big figures: always the sans (numbers never use the serif) */
.site-stat-card__number {
	font-family: var(--sans);
	font-weight: 600;
	letter-spacing: -0.02em;
	font-size: clamp(2.1rem, 2.8vw, 2.75rem);
	color: var(--red);
	line-height: 1.1;
	margin: 0 0 0.75rem;
}

.site-stat-card__label {
	font-family: var(--sans, "Instrument Sans", system-ui, sans-serif);
	font-size: 15px;
	line-height: 1.4;
	font-weight: 500;
	color: var(--ink);
	max-width: 22ch;
}

/* ==========================================================================
   2. Logo Carousel / Trusted by Bar (.site-logo-showcase)
   ========================================================================== */
.site-logo-showcase {
	margin-top: 7rem;
	padding-top: 0;
	border-top: none;
	text-align: center;
}

.site-trusted-bar {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	max-width: 1280px;
	margin: 0 auto;
}

.site-trusted-label {
	font-family: var(--sans, "Instrument Sans", system-ui, sans-serif);
	font-size: 16px;
	font-weight: 500;
	color: var(--ink-2);
	white-space: nowrap;
	flex-shrink: 0;
	letter-spacing: -0.01em;
}

.site-trusted-divider {
	display: block;
	width: 1px;
	height: 36px;
	background: var(--line);
	flex-shrink: 0;
}

@media (max-width: 1024px) {
	.site-trusted-divider {
		display: none;
	}
}

.site-marquee {
	position: relative;
	flex: 1;
	overflow: hidden;
	padding: 0.5rem 0;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.site-marquee.is-paused .site-marquee__group {
	animation-play-state: paused !important;
}

.site-marquee__track {
	display: flex;
	width: max-content;
}

.site-marquee__group {
	display: flex;
	align-items: center;
	gap: 3.5rem;
	padding-right: 3.5rem;
	animation: siteMarqueeScroll 38s linear infinite;
	will-change: transform;
}

.site-marquee:hover .site-marquee__group {
	animation-play-state: paused;
}

.site-marquee__item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	min-width: 64px;
}

.site-marquee__item img {
	display: block;
	max-height: 56px;
	max-width: 120px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1) opacity(0.7) contrast(1.05);
	transition: filter 0.28s ease, transform 0.28s ease;
}

.site-marquee__item:hover img {
	filter: grayscale(0) opacity(1) contrast(1);
	transform: scale(1.08);
}

.site-trusted-pause {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--ink-2);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.site-trusted-pause:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--white);
}

.site-trusted-pause svg {
	width: 14px;
	height: 14px;
}

@keyframes siteMarqueeScroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}

@media (max-width: 768px) {
	.site-section--stats {
		padding-top: 5rem;
		padding-bottom: 4rem;
	}
	.site-stats-header {
		margin-bottom: 3rem;
	}
	.site-logo-showcase {
		margin-top: 4.5rem;
	}
	.site-trusted-bar {
		flex-wrap: wrap;
		gap: 1rem;
		justify-content: space-between;
	}
	.site-marquee {
		order: 3;
		width: 100%;
		flex: none;
	}
	.site-marquee__group {
		gap: 2.25rem;
		padding-right: 2.25rem;
		animation-duration: 28s;
	}
	.site-marquee__item {
		height: 56px;
	}
	.site-marquee__item img {
		max-height: 48px;
		max-width: 100px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-marquee__group {
		animation: none;
	}
	.site-marquee {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* ==========================================================================
   2b. Fixed Bottom Demo Bar (.site-fixed-demo-bar)
   ========================================================================== */
.site-fixed-demo-bar {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translate(-50%, calc(100% + 40px));
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, visibility 0.35s;
}

.site-fixed-demo-bar.is-visible {
	transform: translate(-50%, 0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.site-fixed-demo-bar__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--btn-pad);
	border-radius: 999px;
	background: var(--red);
	color: #ffffff !important;
	font-family: var(--sans, "Instrument Sans", sans-serif);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.01em;
	text-decoration: none;
	box-shadow: none;
	transition: background 0.2s ease, transform 0.2s ease;
	border: 0;
}

.site-fixed-demo-bar__btn:hover {
	background: var(--sky-soft);
	transform: translateY(-1px);
	box-shadow: none;
	color: var(--ink) !important;
}

@media (max-width: 600px) {
	.site-fixed-demo-bar {
		bottom: 24px;
		width: calc(100% - 176px);
		max-width: 340px;
	}
	.site-fixed-demo-bar__btn {
		width: 100%;
		justify-content: center;
		padding: var(--btn-pad);
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-fixed-demo-bar {
		transition: opacity 0.2s ease, visibility 0.2s;
		transform: translate(-50%, 0) !important;
	}
	.site-fixed-demo-bar:not(.is-visible) {
		display: none;
	}
}

/* ==========================================================================
   3 & 4. Features (Accounting & Accessible Docs)
   ========================================================================== */
.site-section--feature {
	padding: 5rem 0;
}

.site-section--accounting {
	background-color: #ffffff;
}

.site-section--accessible-docs {
	background-color: var(--site-bg-light);
}

.site-feature-card {
	max-width: 800px;
	margin: 0 auto;
	background: #ffffff;
	border-radius: 12px;
	padding: 3.5rem;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
	border-left: 6px solid var(--color-1, #d12923);
}

.site-feature-card--alt {
	border-left-color: #212529;
}

.site-feature-card--cms {
	border-left-color: var(--color-1, #d12923);
}

/* ==========================================================================
   5. Document Types
   ========================================================================== */
.site-section--doc-types {
	background-color: #ffffff;
	padding: 4.5rem 0;
	border-top: 1px solid var(--site-border-color);
	border-bottom: 1px solid var(--site-border-color);
}

.site-doc-types-header {
	text-align: center;
	margin-bottom: 2.5rem;
}

.site-doc-types-caption {
	font-family: var(--sans);
	font-size: 18px;
	color: var(--site-text-muted);
	margin: 0.5rem 0 0;
}

.site-doc-types-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.site-doc-type-pill {
	background: var(--site-bg-light);
	border: 1px solid var(--site-border-color);
	border-radius: 8px;
	padding: 1.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--sans);
	font-weight: 600;
	font-size: 16px;
	color: var(--site-text-dark);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.site-doc-type-pill:hover {
	transform: translateY(-2px);
	border-color: var(--color-1, #d12923);
}

.site-doc-type-pill__icon {
	font-size: 1.5rem;
}

/* ==========================================================================
   6. Intro Band
   ========================================================================== */
.site-section--intro-band {
	background: var(--color-1, #d12923);
	color: var(--color-over-1, #ffffff);
	text-align: center;
	padding: 4.5rem 0;
}

.site-intro-band {
	max-width: 800px;
	margin: 0 auto;
}

.site-intro-band__title {
	font-family: var(--serif);
	font-size: clamp(32px, 3.8vw, 48px);
	font-weight: 600;
	font-variation-settings: "SOFT" 100, "WONK" 0;
	line-height: 1.04;
	color: var(--color-2, #ece5b6);
	margin: 0 0 1.25rem;
}

.site-intro-band__body {
	font-family: var(--sans);
	font-size: 19px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   7 & 9. Split Grid (Payments & Partner)
   ========================================================================== */
.site-section--split {
	padding: 5rem 0;
	background-color: #ffffff;
}

/* ==========================================================================
   9. Partner Section (Why Partner With Edlio)
   ========================================================================== */
.site-section--partner {
	padding: var(--section-y) 0 0;
	background-color: var(--site-bg-light, #FAF8F5);
	overflow: visible;
}

.site-partner-header {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 3.5rem;
	align-items: start;
	margin-bottom: 4rem;
}

@media (max-width: 960px) {
	.site-partner-header {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		margin-bottom: 2.5rem;
		max-width: min(620px, 100%);
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.site-partner-header__copy {
		align-items: center;
	}
}

.site-partner-header__title {
	font-family: var(--serif);
	font-size: var(--h2);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0;
}

.site-partner-header__title em {
	font-style: italic;
	font-weight: 400;
	color: var(--red);
}

.site-partner-header__copy {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.site-partner-header__sub {
	font-family: var(--sans);
	font-size: var(--lead);
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0;
}

.site-partner-header__action {
	margin-top: 2.25rem;
}

.site-btn-partner-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: var(--btn-pad);
	background-color: var(--white);
	color: var(--ink) !important;
	border: 0;
	border-radius: 9999px;
	font: var(--btn-font);
	text-decoration: none;
	width: fit-content;
	box-shadow: var(--btn-shadow);
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.site-btn-partner-cta:hover {
	background-color: var(--sky-soft);
	color: var(--ink) !important;
	transform: translateY(-1px);
	box-shadow: var(--btn-shadow);
}

/* Partner close. Colours and fonts come from the design system */
.pc,.pc *{box-sizing:border-box}
.pc :where(h3,p,ol,ul,li){margin:0;padding:0}
.pc{font-family:var(--sans);-webkit-font-smoothing:antialiased}
/* the partner close as a stack of cards: each reason is a framed photo card that sticks just under the header while you scroll;
   the next card slides up over it, and the card underneath eases back (a little smaller and dimmer, on a timed transition)
   with a sliver of its top edge still showing, like a deck. Each card's module plays its small animation when the card arrives */
.pc{--top:88px;--bottom:16px;--peek:12px;--pcx:max(clamp(24px,4vw,56px),calc((100vw - 1248px) / 2));
  position:relative;width:100vw;margin:56px 0 0 calc(50% - 50vw);padding:0 16px 16px}
.pc-card{position:sticky;top:calc(var(--top) + var(--i,0) * var(--peek));height:calc(100vh - var(--top) - var(--bottom) - var(--i,0) * var(--peek));height:calc(100svh - var(--top) - var(--bottom) - var(--i,0) * var(--peek))}
.pc-card + .pc-card{margin-top:30vh}   /* each card holds on its own for a moment before the next arrives */
.pc-frame{position:relative;height:100%;border-radius:28px;overflow:hidden;background:var(--beige);box-shadow:0 40px 80px -40px rgba(43,36,33,.5);
  transform-origin:50% 0;transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .6s ease}
.pc-card.under .pc-frame{transform:scale(.94);filter:brightness(.55)}
.pc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* a deeper wash under the caption so white text holds strong contrast on any photo */
.pc-frame::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(to top,rgba(10,10,10,.92) 0%,rgba(10,10,10,.8) 30%,rgba(10,10,10,.45) 55%,rgba(10,10,10,0) 80%)}
.pc-step h3,.pc-step p{text-shadow:0 1px 18px rgba(0,0,0,.35)}
/* the caption at the bottom left, its module card on the right, centred on the caption (wide screens: both line up with the
   page's content column while the photo stays full-bleed) */
.pc-cap{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:0 var(--pcx) clamp(36px,3vw,56px);color:var(--white);display:flex;align-items:center;justify-content:space-between;gap:48px}
.pc-step{max-width:46ch}
.pc-step h3{font-family:var(--serif);font-weight:500;font-variation-settings:"SOFT" 100,"WONK" 0;font-size:clamp(28px,2.9vw,54px);line-height:1.08;letter-spacing:-.015em;color:var(--white)}
.pc-step p{margin-top:14px;font-family:var(--sans);font-weight:400;font-size:clamp(17px,1.4vw,21px);line-height:1.45;color:rgba(255,253,249,.92)}
.pc-cta{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:var(--btn-pad);border-radius:999px;background:var(--white);color:var(--ink);box-shadow:var(--btn-shadow);font:var(--btn-font);text-decoration:none;transition:background .2s,transform .2s}
.pc-cta:hover{background:var(--sky-soft);color:var(--ink);transform:translateY(-1px)}
.pc-cta:focus-visible{outline:3px solid var(--butter-soft);outline-offset:4px}
/* the module card: frosted glass, so the photo shows through, blurred, and the card stays crisp and readable over any image */
.pc-mods{flex:none;width:min(440px,35vw)}
.pc-mod{background:rgba(255,253,249,.72);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);color:var(--ink);border-radius:28px;padding:24px 24px 22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(255,255,255,.4),0 40px 80px -32px rgba(0,0,0,.55);
  opacity:0;transform:translateY(24px);transition:opacity .6s ease .2s,transform .9s cubic-bezier(.2,.8,.2,1) .2s}
.pc-card.go .pc-mod{opacity:1;transform:none}
.pc-mcap{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);margin-bottom:15px}
.pc-mcap em{font-family:var(--sans);font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:999px;background:var(--butter);color:var(--ink)}
/* 1: four apps drift together into one sign-in */
.pc-apps{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pc-apps span{display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:14px;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);font-size:15.5px;font-weight:600;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s ease}
.pc-apps i{width:11px;height:11px;border-radius:50%;background:var(--c)}
.pc-apps span:nth-child(1){transform:translate(-26px,-18px)}.pc-apps span:nth-child(2){transform:translate(26px,-18px)}.pc-apps span:nth-child(3){transform:translate(-26px,18px)}.pc-apps span:nth-child(4){transform:translate(26px,18px)}
.pc-apps span{opacity:.4}
.pc-card.go .pc-apps span{transform:none;opacity:1;transition-delay:.6s}
.pc-once{display:flex;align-items:center;gap:10px;margin-top:15px;font-size:15px;font-weight:600;opacity:0;transition:opacity .5s ease}
.pc-once b,.pc-tasks b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sage);flex:none}
.pc-once svg,.pc-tasks svg{width:16px;height:16px}
.pc-card.go .pc-once{opacity:1;transition-delay:1.4s}
/* 2: the question, the bot typing, then the answer */
.pc-q{margin-left:auto;max-width:86%;padding:12px 16px;border-radius:14px 14px 4px 14px;background:var(--ink);color:var(--white);font-size:15.5px;line-height:1.35;width:fit-content;opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.pc-a{display:grid;margin-top:12px;max-width:90%}
.pc-a > *{grid-area:1/1;align-self:start}
.pc-a p{padding:13px 16px;border-radius:16px 16px 16px 4px;background:rgba(255,255,255,.65);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);font-size:15.5px;line-height:1.4;opacity:0;transition:opacity .5s ease}
.pc-typing{display:inline-flex;gap:4px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.65);width:fit-content;opacity:0;transition:opacity .3s ease}
.pc-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-2);animation:pcType 1s infinite ease-in-out}
.pc-typing i:nth-child(2){animation-delay:.15s}.pc-typing i:nth-child(3){animation-delay:.3s}
@keyframes pcType{0%,100%{opacity:.3;transform:none}50%{opacity:1;transform:translateY(-2px)}}
.pc-card.go .pc-q{opacity:1;transform:none;transition-delay:.6s}
.pc-card.go .pc-typing{opacity:1;transition:opacity .3s ease 1.1s;animation:pcHide 0s 2s forwards}
.pc-card.go .pc-a p{opacity:1;transition-delay:2s}
@keyframes pcHide{to{opacity:0}}
/* 3: the busywork ticks itself off */
.pc-tasks{list-style:none;display:grid;gap:11px}
.pc-tasks li{display:flex;align-items:center;gap:12px;font-size:15.5px;font-weight:600;color:var(--ink-2);transition:color .4s}
.pc-tasks b{background:rgba(255,255,255,.6);color:transparent;transition:background .4s ease,color .4s ease}
.pc-card.go .pc-tasks li{color:var(--ink)}
.pc-card.go .pc-tasks li b{background:var(--sage);color:var(--ink)}
.pc-card.go .pc-tasks li:nth-child(1),.pc-card.go .pc-tasks li:nth-child(1) b{transition-delay:.6s}
.pc-card.go .pc-tasks li:nth-child(2),.pc-card.go .pc-tasks li:nth-child(2) b{transition-delay:1s}
.pc-card.go .pc-tasks li:nth-child(3),.pc-card.go .pc-tasks li:nth-child(3) b{transition-delay:1.4s}
.pc-zero{display:inline-block;margin-top:16px;font-size:13px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--sage-soft);opacity:0;transition:opacity .5s ease}
.pc-card.go .pc-zero{opacity:1;transition-delay:1.8s}
/* 4: the support team */
.pc-who{display:flex;align-items:center;gap:14px}
.pc-av{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--red);color:var(--white);font-weight:600;font-size:15px;flex:none}
.pc-who b{display:block;font-size:17.5px;font-weight:600}.pc-who i{font-family:var(--sans);font-style:normal;font-size:14.5px;color:var(--ink-2)}
.pc-call{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 15px;border-radius:14px;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);font-size:15px;font-weight:600;opacity:0;transition:opacity .5s ease}
.pc-dot-live{width:8px;height:8px;border-radius:50%;background:#2f9d63;box-shadow:0 0 0 4px rgba(47,157,99,.18)}
.pc-card.go .pc-call{opacity:1;transition-delay:.8s}
/* big screens: a larger module card (its contents scale with it) */
@media (min-width:1680px){.pc .pc-mods{width:500px}.pc .pc-mod{zoom:1.1}}
/* phones and tablets: the module card sits under the caption, compact (each card's secondary line drops out); every card ends
   above the accessibility and chatbot buttons */
@media (max-width:860px){
  .pc{--top:84px;--bottom:92px;--peek:10px;margin-top:40px;padding:0 8px 8px}
  .pc-frame{border-radius:22px}
  .pc-cap{flex-direction:column;align-items:stretch;justify-content:flex-end;gap:18px;padding:0 20px 20px}
  .pc-step h3{font-size:26px}.pc-step p{font-size:17px;margin-top:10px}
  .pc-mods{width:auto}
  .pc-mod{padding:13px 14px 12px;border-radius:18px}
  .pc-m1 .pc-once,.pc-m3 .pc-zero{display:none}
  .pc-mcap{margin-bottom:8px;font-size:12px}
  .pc-apps{gap:8px}.pc-apps span{padding:9px 11px;font-size:14px}
  .pc-q,.pc-a p,.pc-tasks li{font-size:14px}.pc-q,.pc-a p{padding:10px 13px}
  .pc-tasks{gap:9px}.pc-call{font-size:13.5px;margin-top:10px;padding:9px 12px}
  .pc-av{width:44px;height:44px}.pc-who b{font-size:16px}.pc-who i{font-size:13px}
  .pc-once b,.pc-tasks b{width:24px;height:24px}
}
/* shorter phones (most iPhones in Safari with the toolbars showing): tighter spacing so the caption, button and card all fit */
@media (max-width:860px) and (max-height:760px){
  .pc-cap{gap:12px}
  .pc-step h3{font-size:24px}.pc-step p{font-size:16px}
  .pc-cta{margin-top:14px}
}
/* the shortest phones (e.g. iPhone SE in Safari): the module card steps aside so the words always fit */
@media (max-width:860px) and (max-height:640px){
  .pc-mods{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pc *{transition:none!important}
  .pc-card.under .pc-frame{transform:none;filter:none}
  .pc-mod,.pc-apps span{transform:none!important;opacity:1}
  .pc-once,.pc-q,.pc-a p,.pc-call,.pc-zero{opacity:1!important;transform:none!important}
  .pc-typing{display:none}
  .pc-tasks li b{background:var(--sage);color:var(--ink)}.pc-tasks li{color:var(--ink)}
}


/* ==========================================================================
   8. Feature: CMS + Communications
   ========================================================================== */
.site-section--feature-cms {
	background-color: #ffffff;
	padding: 5rem 0;
}

/* ==========================================================================
   10. CTA Banner
   ========================================================================== */
.site-section--cta-banner {
	background-color: var(--site-bg-light, #FAF8F5);
	padding: var(--section-y) 0;
}

.site-cta-card {
	background: var(--red);
	color: var(--white);
	border-radius: 36px;
	padding: 5rem 3rem;
	text-align: center;
	box-shadow: 0 16px 48px rgba(209, 41, 35, 0.18), 0 4px 16px rgba(0, 0, 0, 0.06);
	position: relative;
	overflow: hidden;
}

.site-cta-card::before {
	content: "";
	position: absolute;
	top: -120px;
	right: -120px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
	pointer-events: none;
}

.site-cta-card__inner {
	max-width: 820px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

.site-cta-banner__title {
	font-family: var(--serif);
	font-size: var(--h2);
	font-weight: 600;
	font-variation-settings: "SOFT" 100, "WONK" 0;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--white);
	margin: 0 0 1.35rem;
}

.site-cta-banner__title em {
	font-style: italic;
	font-weight: 400;
	color: var(--butter-soft);
}

.site-cta-banner__body {
	font-family: var(--sans);
	font-size: var(--lead);
	line-height: 1.6;
	margin-bottom: 2.5rem;
	color: var(--white);
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.site-btn-cta-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--white);
	color: var(--ink) !important;
	padding: var(--btn-pad-lg);
	border-radius: 9999px;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none !important;
	box-shadow: var(--btn-shadow);
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-btn-cta-pill:hover {
	transform: translateY(-1px);
	box-shadow: var(--btn-shadow);
	background: var(--sky-soft);
	color: var(--ink) !important;
}

.site-btn-cta-pill--line {
	background: transparent;
	color: var(--white) !important;
	box-shadow: inset 0 0 0 1.5px rgba(255, 253, 249, 0.8);
}

.site-btn-cta-pill--line:hover {
	box-shadow: none;
}

.site-cta-card__actions {
	display: flex;
	gap: 1.5rem;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

@media (max-width: 768px) {
	.site-cta-card {
		padding: 3.5rem 1.5rem;
		border-radius: 24px;
	}
	.site-btn-cta-pill {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   11. Footer
   ========================================================================== */
.site-footer {
	background-color: var(--beige);
	color: var(--ink);
	padding: var(--section-y) 0 7rem; /* room below the copyright for the Book a Demo bar */
	border-top: none;
}

.site-footer__inner {
	max-width: var(--site-max-width, 1920px);
	margin: 0 auto;
	padding: 0 2rem;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1.1fr 1fr 1.3fr;
	gap: 4rem;
	padding-bottom: 3.5rem;
}

.site-footer__col--brand {
	padding-right: 1.5rem;
}

.site-footer__logo-link {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	margin-bottom: 1.25rem;
}

.site-footer__logo-img {
	display: block;
	height: 42px;
	width: auto;
	max-width: 140px;
}

.site-footer__mission {
	font-family: var(--sans);
	margin: 0 0 2rem;
	color: var(--ink-2);
	font-size: 16px;
	line-height: 1.6;
	max-width: 340px;
}

.site-footer__cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--white);
	color: var(--ink) !important;
	border: 0;
	padding: var(--btn-pad);
	border-radius: 9999px;
	font: var(--btn-font);
	text-decoration: none !important;
	box-shadow: var(--btn-shadow);
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.site-footer__cta-btn:hover,
.site-footer__cta-btn:focus {
	background-color: var(--sky-soft);
	color: var(--ink) !important;
	transform: translateY(-1px);
	box-shadow: var(--btn-shadow);
}

/* Small uppercase labels (footer column headings): 13px, weight 600, letter-spacing 0.1em */
.site-footer__heading {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.site-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__list li {
	margin-bottom: 0.85rem;
}

.site-footer__list a {
	position: relative;
	display: inline-block;
	font-family: var(--sans);
	color: var(--ink-2);
	text-decoration: none;
	font-size: 15px;
	padding-bottom: 2px;
	transition: color 0.2s ease;
}

/* Short underline that grows out on hover */
.site-footer__list a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 18px;
	height: 1.5px;
	background-color: var(--red);
	border-radius: 1px;
	transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}

.site-footer__list a:hover,
.site-footer__list a:focus {
	color: var(--ink);
	text-decoration: none;
}

.site-footer__list a:hover::after,
.site-footer__list a:focus::after {
	width: 100%;
	background-color: var(--red);
}

/* Column 4: Contact Blocks & Social */
.site-footer__contact-block {
	margin-bottom: 1.5rem;
}

.site-footer__contact-sub {
	display: block;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink-2);
	margin-bottom: 0.25rem;
}

.site-footer__phone {
	font-family: var(--sans, "Instrument Sans", sans-serif);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
	text-decoration: none;
	letter-spacing: -0.01em;
	transition: color 0.2s ease;
}

.site-footer__phone:hover,
.site-footer__phone:focus {
	color: var(--red);
	text-decoration: underline;
}

.site-footer__social {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.site-footer__social-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: var(--red);
	color: var(--white) !important;
	border: none;
	text-decoration: none !important;
	box-shadow: 0 2px 6px rgba(209, 41, 35, 0.25);
	transition: all 0.2s ease;
}

.site-footer__social-btn svg {
	width: 32px;
	height: 32px;
	color: var(--white);
}

.site-footer__social-btn:hover,
.site-footer__social-btn:focus {
	background-color: var(--red-ink);
	color: var(--white) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(209, 41, 35, 0.4);
}

.site-footer__bottom {
	padding-top: 2rem;
	border-top: 1px solid rgba(0, 0, 0, 0.07);
	text-align: center;
}

.site-footer__copyright {
	font-family: var(--sans);
	color: var(--ink-2);
	font-size: 12px;
	margin: 0;
	letter-spacing: 0.04em;
}

@media (max-width: 1024px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
	}
}

@media (max-width: 640px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.site-footer {
		padding: var(--section-y) 0 7rem; /* room below the copyright for the Book a Demo bar */
	}
}

@media (max-width: 800px) {
	.site-hero-block__title {
		font-size: clamp(36px, 8vw, 56px);
	}

	.site-stats-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.site-doc-types-grid {
		grid-template-columns: 1fr 1fr;
	}

	.site-split-grid {
		grid-template-columns: 1fr;
	}

	.site-hero-block__cta {
		flex-direction: column;
		align-items: center;
	}

	.site-feature-card {
		padding: 2rem;
	}

	.nav-menu {
		gap: 0.75rem;
	}

	.nav-item-inner {
		font-size: 14px;
	}
}

/* ==========================================================================
   6. Tabbed Section: Collect. Account. Communicate.
   ========================================================================== */
.site-section--tabs,
.site-section--spotlight-tabs {
	background-color: var(--color-2, #f5f4ee);
	padding: 6.5rem 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.site-tabs-header {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 3.5rem;
	align-items: flex-end;
	margin-bottom: 3rem;
}

.site-tabs-header__title {
	font-family: var(--serif);
	font-size: clamp(34px, 4.4vw, 56px);
	font-weight: 600;
	font-variation-settings: "SOFT" 100, "WONK" 0;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--color-over-2, #22221e);
	margin: 0;
}

.site-tabs-header__circle-wrap {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.site-tabs-header__circle-word {
	position: relative;
	z-index: 2;
}

.site-tabs-header__circle-svg {
	position: absolute;
	top: -30%;
	left: -8%;
	width: 122%;
	height: 165%;
	z-index: 1;
	pointer-events: none;
	overflow: visible;
}

.site-tabs-header__subtext {
	font-family: var(--sans);
	font-size: 19px;
	line-height: 1.55;
	color: #555550;
	margin: 0;
	padding-bottom: 0.5rem;
}

/* Tabs Pill Row */
.site-tabs-nav {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.75rem;
	flex-wrap: wrap;
}

.site-tab-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.65rem 1.25rem;
	border-radius: 9999px;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid rgba(0, 0, 0, 0.12);
	background: rgba(255, 255, 255, 0.5);
	color: var(--color-over-2, #22221e);
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	outline-offset: 2px;
}

.site-tab-pill:hover {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.25);
	transform: translateY(-1px);
}

.site-tab-pill.is-active {
	background: #ffffff;
	color: #0f4c81;
	border-color: #93cbfb;
	box-shadow: 0 4px 14px rgba(147, 203, 251, 0.3);
}

.site-tab-pill__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
}

.site-tab-pill__dot--payments {
	background-color: var(--color-1, #d12923);
}
.site-tab-pill:not(.is-active) .site-tab-pill__dot--payments {
	background-color: var(--color-1, #d12923);
}

.site-tab-pill__dot--accounting {
	background-color: #88c2a8;
}

.site-tab-pill__dot--cms {
	background-color: #eed588;
}

/* Main White Container Card */
.site-tabs-card {
	background: #ffffff;
	border-radius: 28px;
	padding: 3.5rem;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.02);
	border: 1px solid rgba(0, 0, 0, 0.04);
}

.site-tab-panel {
	display: none;
}

.site-tab-panel.is-active {
	display: block;
	animation: tabFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes tabFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.site-tab-panel__layout {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 4.5rem;
	align-items: center;
}

/* Left Content */
.site-tab-panel__title {
	margin: 0 0 1.25rem;
	font-family: var(--serif);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.site-tab-panel__title-line {
	display: block;
	font-size: clamp(30px, 3.2vw, 42px);
	font-weight: 700;
	font-variation-settings: "SOFT" 100, "WONK" 0;
	color: var(--color-over-2, #22221e);
}

.site-tab-panel__title-italic {
	display: block;
	font-size: clamp(30px, 3.2vw, 42px);
	font-style: italic;
	font-weight: 500;
	font-variation-settings: "SOFT" 100, "WONK" 1;
	color: var(--color-over-2, #22221e);
	margin-top: 0.2rem;
}

.site-tab-panel__desc {
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.6;
	color: #444440;
	margin: 0 0 2rem;
}

/* Checklist with rust/terracotta checkmarks */
.site-tab-checklist {
	list-style: none;
	padding: 0;
	margin: 0 0 2.5rem;
	border-top: 1px solid #ebeae5;
}

.site-tab-checklist__item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid #ebeae5;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 600;
	color: var(--color-over-2, #22221e);
}

.site-tab-checklist__icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-1, #d12923);
}

.site-tab-checklist__icon svg {
	width: 18px;
	height: 18px;
}

/* CTA Pill Button */
.site-btn-dark-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--white);
	color: var(--ink) !important;
	border: 0;
	padding: var(--btn-pad);
	border-radius: 9999px;
	font: var(--btn-font);
	text-decoration: none !important;
	box-shadow: var(--btn-shadow);
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-btn-dark-pill:hover {
	transform: translateY(-1px);
	box-shadow: var(--btn-shadow);
	background: var(--sky-soft);
	color: var(--ink) !important;
}

.site-btn-dark-pill--line {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px rgba(43, 36, 33, 0.28);
}

.site-btn-dark-pill--line:hover {
	box-shadow: none;
}

.site-tab-panel__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 0.85rem;
}

/* Right Side Graphic Container (Muted Sage Green Stage) */
.site-mockup-stage {
	background: #dde8e0;
	border-radius: 20px;
	padding: 2.75rem 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	position: relative;
}

.site-mockup-stage--accounting {
	background: #e1ebec;
}

.site-mockup-stage--cms {
	background: #faeedb;
}

/* Phone Mockup */
.site-phone {
	flex-shrink: 0;
	width: 250px;
}

.site-phone__bezel {
	background: #1a1a18;
	border-radius: 36px;
	padding: 10px;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.site-phone__screen {
	background: #fbfbfa;
	border-radius: 28px;
	padding: 1.25rem 1rem 1.15rem;
	color: #1a1a18;
	font-family: var(--sans);
}

.site-phone__sub {
	font-size: 11px;
	color: #615a54;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.site-phone__cart-title {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-bottom: 0.85rem;
}

.site-phone__items {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.site-phone__item {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 10px;
	padding: 0.6rem 0.75rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.site-phone__item-name {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #1a1a18;
}

.site-phone__item-detail {
	display: block;
	font-size: 10px;
	color: #777770;
}

.site-phone__item-price {
	font-family: var(--sans, "Instrument Sans", sans-serif);
	font-feature-settings: 'tnum' 1;
	font-size: 13px;
	font-weight: 700;
	color: #1a1a18;
}

.site-phone__btn {
	width: 100%;
	background: #ffffff;
	color: #1a1816;
	border: 1px solid rgba(43, 36, 33, 0.15);
	border-radius: 9999px;
	padding: 0.65rem 0.75rem;
	font-size: 12px;
	font-weight: 600;
	font-family: var(--sans);
	font-feature-settings: 'tnum' 1;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.site-phone__btn:hover {
	background-color: #f0f7ff;
	border-color: #93cbfb;
	color: #0f4c81;
	box-shadow: 0 4px 12px rgba(147, 203, 251, 0.35);
}

/* Workflow / Flow Tags */
.site-flow-tags {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1;
}

.site-flow-tag {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	border-radius: 9999px;
	padding: 0.75rem 1.25rem;
	font-family: var(--sans);
	font-size: 13.5px;
	font-weight: 600;
	color: #22221e;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.8);
	white-space: nowrap;
}

/* Accounting & CMS Mockup Variants */
.site-accounting-preview,
.site-cms-preview {
	background: #ffffff;
	border-radius: 16px;
	padding: 1.5rem;
	width: 250px;
	flex-shrink: 0;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
	font-family: var(--sans);
}

.site-accounting-preview__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
}

.site-accounting-preview__badge,
.site-cms-preview__badge {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: var(--color-1, #d12923);
	color: #ffffff;
	padding: 0.2rem 0.5rem;
	border-radius: 4px;
}

.site-accounting-preview__date {
	font-size: 11px;
	color: #777770;
}

.site-accounting-preview__metric {
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #ebeae5;
}

.site-accounting-preview__metric-label {
	display: block;
	font-size: 11px;
	color: #777770;
}

.site-accounting-preview__metric-val {
	font-family: var(--sans, "Instrument Sans", sans-serif);
	font-feature-settings: 'tnum' 1;
	font-size: 20px;
	font-weight: 700;
	color: #22221e;
}

.site-accounting-preview__rows {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.site-accounting-row {
	display: flex;
	flex-direction: column;
	background: #fbfbfa;
	padding: 0.5rem 0.65rem;
	border-radius: 6px;
	font-size: 11px;
}

.site-accounting-row__school {
	font-weight: 600;
	color: #22221e;
}

.site-accounting-row__fund {
	color: #777770;
	font-size: 10px;
}

.site-accounting-row__status {
	align-self: flex-end;
	margin-top: -12px;
	color: #287d55;
	font-weight: 600;
	font-size: 10px;
}

/* CMS Preview Mockup */
.site-cms-preview__bar {
	display: flex;
	align-items: center;
	gap: 5px;
	padding-bottom: 0.75rem;
	margin-bottom: 0.75rem;
	border-bottom: 1px solid #ebeae5;
}

.site-cms-preview__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #d4d3cc;
}

.site-cms-preview__url {
	margin-left: 8px;
	font-size: 10px;
	color: #888880;
}

.site-cms-preview__title {
	font-size: 13px;
	font-weight: 700;
	color: #22221e;
	margin: 0.5rem 0 0.85rem;
	line-height: 1.3;
}

.site-cms-preview__channels {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.site-cms-preview__ch {
	font-size: 11px;
	background: #fbfbfa;
	padding: 0.35rem 0.55rem;
	border-radius: 4px;
	color: #444440;
	font-weight: 500;
}

/* Responsive adjustments for Tabbed Section */
@media (max-width: 991px) {
	.site-tabs-header {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.site-tab-panel__layout {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
	.site-tabs-card {
		padding: 2.5rem 1.75rem;
	}
	.site-mockup-stage {
		flex-direction: column;
		padding: 2rem 1.5rem;
	}
	.site-phone,
	.site-accounting-preview,
	.site-cms-preview {
		width: 100%;
		max-width: 280px;
	}
	.site-flow-tags {
		width: 100%;
	}
	.site-flow-tag {
		text-align: center;
	}
}

/* ==========================================================================
   Internal Section Page Template Styles
   ========================================================================== */

.site-page-header {
	background: linear-gradient(180deg, var(--site-bg-light) 0%, #ffffff 100%);
	border-bottom: 1px solid var(--site-border-color);
	padding: 4rem 0 3.5rem;
}

.site-page-header__breadcrumb {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 14px;
	font-weight: 500;
	color: var(--site-text-muted);
	margin-bottom: 1.25rem;
}

.site-page-header__breadcrumb a {
	position: relative;
	display: inline-block;
	padding-bottom: 2px;
	color: var(--site-text-muted);
	text-decoration: none;
	transition: color 0.2s ease;
}

/* Short underline that grows out on hover, same as the footer links */
.site-page-header__breadcrumb a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 18px;
	height: 1.5px;
	background-color: var(--red);
	border-radius: 1px;
	transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-page-header__breadcrumb a:hover,
.site-page-header__breadcrumb a:focus {
	color: var(--ink);
}

.site-page-header__breadcrumb a:hover::after,
.site-page-header__breadcrumb a:focus::after {
	width: 100%;
}

.site-page-header__breadcrumb-sep {
	opacity: 0.5;
}

.site-page-header__eyebrow {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--red-ink);
	margin-bottom: 0.75rem;
}

.site-page-header__title {
	font-family: var(--serif, "Fraunces", Georgia, serif);
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0 0 1.25rem 0;
	max-width: 850px;
	text-wrap: balance;
}

.site-page-header__lead {
	font-family: var(--sans);
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0 0 2rem 0;
	max-width: 760px;
}

.site-page-header__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.site-page-body {
	padding: 4rem 0 5rem;
}

.site-page-card {
	background-color: #ffffff;
	border: 1px solid var(--site-border-color);
	border-radius: 12px;
	padding: 2.5rem;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
	margin-bottom: 2.5rem;
}

.site-page-card__title {
	font-family: var(--serif);
	font-size: 1.75rem;
	font-weight: 600;
	margin: 0 0 1rem 0;
	color: var(--site-text-dark);
}

.site-page-card__text {
	font-size: 17px;
	line-height: 1.65;
	color: #495057;
	margin: 0 0 1.5rem 0;
}

.site-page-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.75rem;
	margin-top: 2rem;
}

.site-feature-box {
	background-color: var(--site-bg-light);
	border: 1px solid var(--site-border-color);
	border-radius: 8px;
	padding: 1.75rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-feature-box:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.site-feature-box__icon {
	font-size: 28px;
	color: var(--color-1, #d12923);
	margin-bottom: 0.75rem;
	display: inline-block;
}

.site-feature-box__title {
	font-family: var(--sans);
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 0.5rem 0;
	color: var(--site-text-dark);
}

.site-feature-box__text {
	font-size: 15px;
	line-height: 1.55;
	color: #6c757d;
	margin: 0;
}

/* ==========================================================================
   Section 1: CMS + Communications ("Engage every family. Every day.")
   Stacked rounded sheet container with interactive alert bar, browser mockup,
   and mobile phone preview.
   ========================================================================== */

.site-section--sheet {
	background: var(--white);
	border-radius: 0;
	box-shadow: none;
	margin: 0 auto;
	padding: var(--section-y) 0;
	min-height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.site-section--cms-comms {
	padding: clamp(5rem, 7.5vw, 7rem) 0;
	min-height: auto;
	border: none;
	margin-top: 0;
	margin-bottom: 0;
}

.sec-comms-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 4rem;
	align-items: center;
}

/* --- Left Stage: Visual Composition --- */
.sec-comms-stage {
	position: relative;
	min-width: 0;
}

/* Engage: one alert, sent once, reaches the school website, the app, email and text. The module plays itself (time-based, never
   tied to scroll) and nothing in it ever changes size while it plays, so the section never jumps.
   Colours and fonts come from the design system: --ink, --ink-2, --white, --cream, --beige, --line, --red, --butter,
   --butter-soft, --sage-soft, --sans (see the mapping in the instructions) */
.wv,.wv *{box-sizing:border-box}
.wv :where(div,p,ul,li,b,span,i,button){margin:0;padding:0}
.wv{position:relative;display:grid;gap:18px;min-width:0;color:var(--ink);font-size:17px;line-height:1.55}

/* the send card */
.wv-send{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px 18px;background:var(--white);border-radius:18px;box-shadow:0 0 0 1px var(--line)}
.wv-msg{display:flex;align-items:center;gap:10px;flex:1 1 260px;min-width:0}
.wv-msg b{font-size:15px}
/* every draft message (and every tag word) sits in one shared cell with only the current one visible, so the card is always as
   tall as the longest; the button holds both its labels the same way */
.wv-msg b,.wv-tag{display:grid;justify-items:center}
.wv-msg b{justify-items:start}
.wv-msg b > span,.wv-tag > span{grid-area:1/1;visibility:hidden}
.wv-msg b > span.on,.wv-tag > span.on{visibility:visible}
.wv-tag{flex:none;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--butter);color:var(--ink)}
/* the label on the card: what the admin would press. It isn't a control here (the demo plays itself; its only control is the
   pause button): white with a thin grey outline, turning sage green once the alert is sent */
.wv-btn{flex:none;display:inline-grid;justify-items:center;padding:12px 20px;border-radius:999px;background:var(--white);color:var(--ink);
  font:600 15px/1.55 var(--sans);box-shadow:var(--btn-shadow);cursor:default;transition:background .6s ease}
.wv.sent .wv-btn{background:var(--sage)}
.wv-btn > span{grid-area:1/1}
.wv-btn .wv-b2,.wv.sent .wv-btn .wv-b1{visibility:hidden}
.wv.sent .wv-btn .wv-b2{visibility:visible}
/* the channels wait, dimmed, until the alert goes out, then tick off one after another */
.wv-channels{list-style:none;display:flex;flex-wrap:wrap;gap:8px;flex:1 1 calc(100% - 60px)}
.wv-channels li{font-size:13px;font-weight:600;padding:5px 12px 5px 10px;border-radius:999px;background:var(--beige);color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;transition:background .5s,color .5s,opacity .5s}
.wv:not(.sent) .wv-channels li{opacity:.55}
.wv-channels li::before{content:"";width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 2px currentColor}
.wv.sent .wv-channels li{background:var(--sage-soft);color:var(--ink)}
/* the tick takes the same 9px as the ring it replaces (5px + its 2px border + 1px either side), so the chips never shift */
.wv.sent .wv-channels li::before{width:5px;height:9px;margin:0 1px;border-radius:0;box-shadow:none;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(40deg) translate(-1px,-1px)}
.wv.sent .wv-channels li:nth-child(2){transition-delay:.4s}.wv.sent .wv-channels li:nth-child(3){transition-delay:.8s}.wv.sent .wv-channels li:nth-child(4){transition-delay:1.2s}
/* the status line holds its space: the draft and delivered lines share one cell and cross-fade */
.wv-status{display:grid;flex-basis:100%;font-size:14px;font-weight:600;color:var(--ink)}
.wv-status span{grid-area:1/1;transition:opacity .6s ease}
.wv-status span:first-child{color:var(--ink-2);font-weight:500}
.wv-status span:last-child,.wv.sent .wv-status span:first-child{opacity:0}
.wv.sent .wv-status span:last-child{opacity:1}
/* each new draft arrives softly */
@keyframes wvIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.wv-msg.swap > *{animation:wvIn .7s ease both}

/* the pause button: icon only; its ring fills toward the next step */
.dp{flex:none;position:relative;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s}
.dp[hidden]{display:none}
.dp:hover{background:var(--ink);color:var(--white)}
.dp:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.dp svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke-width:1.5}
.dp circle{stroke:rgba(43,36,33,.22)}
.dp .dp-ring{stroke:currentColor;stroke-dasharray:100;stroke-dashoffset:100}
.dp.tick .dp-ring{animation:dpRing var(--dur,3s) linear forwards}
.dp.held .dp-ring{animation-play-state:paused}
@keyframes dpRing{to{stroke-dashoffset:0}}
.dp i{width:9px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.dp[aria-pressed="true"] i{width:0;height:0;border:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}

/* the school website (in the school's own colours) and the phone */
.wv-stage{position:relative;padding-right:120px}
.wv-browser{border-radius:16px;overflow:hidden;background:var(--white);box-shadow:0 30px 60px -32px rgba(43,36,33,.45),0 0 0 1px var(--line)}
.wv-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--beige)}
.wv-bar i{width:9px;height:9px;border-radius:50%;background:rgba(43,36,33,.2)}
.wv-bar span{flex:1;margin-left:10px;font-size:12px;color:var(--ink-2);background:var(--white);padding:3px 12px;border-radius:999px}
.wv-site{--school:#1f3a6b;--school-ink:#14284d;position:relative}
.wv-top{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--school);color:#fff}
.wv-top svg{width:34px;height:34px;flex:none}
.wv-top b{font-size:18px}
.wv-nav{display:flex;gap:18px;padding:10px 18px;background:var(--school-ink);color:#fff;font-size:13px}
/* the website banner drops over the page (it's an overlay, so nothing below it moves) */
.wv-alert{position:absolute;z-index:1;left:0;right:0;box-shadow:0 8px 16px -10px rgba(20,40,77,.6);display:flex;align-items:center;gap:10px;max-height:0;overflow:hidden;padding:0 18px;background:var(--butter);color:var(--ink);font-size:14px;font-weight:600;transition:max-height .7s ease,padding .7s ease}
.wv-alert i{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}
.wv.sent .wv-alert{max-height:60px;padding:10px 18px}
.wv-hero{height:190px;display:flex;align-items:flex-end;padding:18px;background:linear-gradient(0deg,rgba(20,40,77,.85),rgba(20,40,77,.15) 75%),var(--img) center/cover;color:#fff}
.wv-hero b{font-size:26px;line-height:1.1}
.wv-links{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px;background:var(--cream)}
.wv-links span{display:grid;place-items:center;background:var(--white);border-radius:10px;padding:10px;text-align:center;font-size:13px;font-weight:600}
.wv-phone{position:absolute;z-index:2;right:0;bottom:-28px;width:190px;padding:7px;border-radius:30px;background:var(--ink);box-shadow:0 30px 60px -28px rgba(43,36,33,.6)}
.wv-screen{position:relative;overflow:hidden;background:var(--white);border-radius:24px;padding:14px 12px;height:330px}
.wv-screen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(rgba(255,253,249,0),var(--white));pointer-events:none}
.wv-app{display:flex;align-items:center;gap:8px;font-size:14px}
.wv-app svg{width:24px;height:24px}
.wv-h{display:block;font-size:17px;margin:12px 0 6px}
.wv-list{list-style:none}
.wv-list li{padding:9px 2px;border-bottom:1px solid var(--line);font-size:13px}
.wv-list li b{display:block;font-size:13.5px}
.wv-list li span{color:var(--ink-2);font-size:12px}
/* the new message arrives as a notification over the top of the screen, so the list underneath never moves */
.wv-new{position:absolute;z-index:2;top:10px;left:7px;right:7px;background:var(--butter-soft);border-radius:12px;padding:10px 11px!important;border-bottom:0!important;
  box-shadow:0 14px 26px -12px rgba(43,36,33,.55),0 0 0 1px rgba(43,36,33,.06);opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .3s ease,transform .3s ease,visibility 0s .3s}
.wv.sent .wv-new{opacity:1;visibility:visible;transform:none;transition:opacity .7s ease .6s,transform .8s cubic-bezier(.2,.8,.2,1) .6s,visibility 0s .6s}
.wv-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* the link to the portfolio, under the buttons: three real client sites stacked like cards, fanning out on hover.
   The thin ring around each thumbnail is the section's background colour (white here) */
.wv-more{display:flex;align-items:center;gap:14px;width:max-content;max-width:100%;margin-top:22px;color:var(--ink);font-size:15px;font-weight:600;border-radius:12px;text-decoration:none}
.wv-thumbs{display:flex;flex:none;padding-left:14px}
.wv-thumbs img{width:58px;height:36px;margin-left:-14px;object-fit:cover;object-position:top;border-radius:7px;background:var(--beige);box-shadow:0 0 0 2px #fff,0 6px 14px -8px rgba(43,36,33,.5);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.wv-thumbs img:nth-child(1){transform:rotate(-5deg)}.wv-thumbs img:nth-child(3){transform:rotate(4deg)}
.wv-more:hover .wv-thumbs img:nth-child(1){transform:rotate(-8deg) translateX(-6px)}
.wv-more:hover .wv-thumbs img:nth-child(3){transform:rotate(7deg) translateX(6px)}
.wv-more-t{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;transition:text-decoration-color .2s}
.wv-more:hover .wv-more-t{text-decoration-color:var(--ink)}
.wv-more:focus-visible{outline:3px solid var(--ink);outline-offset:5px}

/* when the section goes to one column (960px and below here; use your breakpoint): the phone tucks in under the website */
@media (max-width:960px){.wv-stage{padding-right:0;padding-bottom:40px}.wv-phone{width:150px;right:-6px;bottom:0}.wv-screen{height:250px}.wv-links{grid-template-columns:repeat(2,1fr)}.wv-nav{gap:12px;overflow:hidden}.wv-hero{height:150px}.wv-hero b{font-size:20px}}
/* phones: the module is pared down to what tells the story. The send card stays whole (the pause button joins the label's row
   so the four channels fit on one line); the website is cropped to its header and a short photo, where the banner lands, without
   its menu or quick links; a smaller phone overlaps its corner, where the notification lands. Fixed sizes, so it never jumps */
@media (max-width:600px){
  .wv{gap:14px}
  .wv-send{padding:12px 10px 10px;gap:10px 8px;border-radius:16px}
  .wv-msg b{font-size:14px}
  .wv-btn{padding:10px 14px;font-size:14px}
  .wv-btn{order:1}.wv .dp{order:2;margin-left:auto}.wv-channels{order:3;flex-basis:100%;gap:8px;flex-wrap:nowrap;justify-content:flex-start}.wv-status{order:4}
  .wv-channels li{font-size:12.5px;padding:4px 7px 4px 6px;gap:5px}
  .wv-status{font-size:13px}
  .wv-stage{padding:0 0 22px}
  .wv-browser{border-radius:14px;margin-right:76px}
  .wv-bar{padding:7px 10px}.wv-bar i{width:7px;height:7px}.wv-bar span{font-size:12px;padding:2px 10px}
  .wv-top{padding:9px 12px;gap:8px}.wv-top svg{width:24px;height:24px}.wv-top b{font-size:13px}
  .wv-nav,.wv-links{display:none}
  .wv-hero{height:118px;padding:12px}.wv-hero b{font-size:15px}
  .wv-alert{font-size:12px;gap:8px;padding:0 12px}.wv.sent .wv-alert{padding:8px 12px}
  .wv-phone{width:142px;right:0;bottom:0;padding:5px;border-radius:22px}
  .wv-screen{height:196px;padding:9px 8px;border-radius:18px}
  .wv-app{font-size:12px;gap:5px}.wv-app svg{width:16px;height:16px}
  .wv-h{font-size:13px;margin:6px 0 2px}
  .wv-list li{padding:6px 1px;font-size:12.5px}.wv-list li b{font-size:12.5px}.wv-list li span{font-size:12px}
  .wv-list li:nth-child(n+4){display:none}
  .wv-new{top:7px;left:5px;right:5px;padding:7px 8px!important;border-radius:10px}
}
@media (prefers-reduced-motion:reduce){.wv *,.wv *::before,.wv-more *{animation:none!important;transition:none!important}.wv-new{transform:none}}

/* --- Right Column: Content & Typography --- */
.sec-comms-content {
	max-width: 620px;
}

.sec-comms-title {
	font-family: var(--serif);
	font-size: var(--h2);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0 0 1.5rem;
}

.sec-comms-title em {
	font-style: italic;
	font-weight: 400;
	color: var(--red);
}

.sec-comms-desc {
	font-size: var(--lead);
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0 0 2rem;
}

.sec-comms-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 0.85rem;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
	.sec-comms-layout {
		grid-template-columns: 1fr;
		gap: 3.5rem;
	}
	.sec-comms-stage {
		max-width: 620px;
		margin: 0 auto;
	}
	.sec-comms-content {
		max-width: min(620px, 100%);
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.sec-comms-cta {
		justify-content: center;
	}
	.wv-more {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 640px) {
	.site-section--sheet {
		border-radius: 0;
		padding: var(--section-y) 0;   /* same 24px side margin as every other section */
	}
	.sec-comms-title {
		font-size: var(--h2);
	}
}

@media (max-width: 600px) {
	.sec-comms-layout {
		grid-template-columns: minmax(0, 1fr);
	}
	.sec-comms-stage {
		order: 0;
		width: 100%;
		max-width: 100%;
	}
	.sec-comms-content {
		order: 1;
	}
}

/* ==========================================================================
   Section 2: School & District Accounting ("Full financial control")
   Rounded sheet container with left value checklist and right interactive
   district rollup dashboard card with count-up & expandable sub-funds.
   ========================================================================== */

.site-section--accounting-ledger {
	border: none;
	margin-top: 0;
	margin-bottom: 0;
	z-index: 10;
}

.sec-acct-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr);
	gap: 4.5rem;
	align-items: center;
}

/* --- Left Column: Typography, Checklist & CTA --- */
.sec-acct-content {
	max-width: 620px;
}

.sec-acct-title {
	font-family: var(--serif);
	font-size: var(--h2);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0 0 1.5rem;
}

.sec-acct-title em {
	font-style: italic;
	font-weight: 400;
	color: var(--red);
}

.sec-acct-desc {
	font-size: var(--lead);
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0 0 2rem;
}

.sec-acct-checklist {
	list-style: none;
	padding: 0;
	margin: 0 0 2.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sec-acct-checklist__item {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	font-size: 1.02rem;
	font-weight: 500;
	color: var(--ink);
	line-height: 1.45;
}

.sec-acct-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--red);
	flex-shrink: 0;
	margin-top: 0.2rem;
}

.sec-acct-check svg {
	width: 15px;
	height: 15px;
}

.sec-acct-cta {
	display: flex;
	align-items: center;
}

/* --- Right Column: Example School Finance Demo (.acct-viz) --- */
.sec-acct-stage {
	position: relative;
	width: 100%;
}

.acct-viz, .acct-viz * { box-sizing: border-box; }
.acct-viz :where(div, p, ul, li, b, span, i, button) { margin: 0; }
.acct-viz {
	position: relative;
	color: var(--ink, #2b2421);
	font-size: 17px;
	line-height: 1.55;
	background: var(--white, #fffdf9);
	border-radius: 24px;
	padding: 28px 28px 20px;
	box-shadow: 0 30px 60px -36px rgba(43, 36, 33, .4), 0 0 0 1px var(--line);
}

.dv-head {
	display: grid;
	gap: 4px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--line);
}
.dv-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-2);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
}
.acct-viz:has(.dp:not([hidden])) .dv-label {
	padding-right: 44px;
}
.dv-ex {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--butter-soft);
	color: var(--ink);
	font-size: 12px;
}
.dv-who {
	white-space: nowrap;
}
.dv-total {
	font-family: var(--sans);
	font-weight: 600;
	font-size: clamp(40px, 4vw, 56px);
	line-height: 1.05;
	letter-spacing: -.025em;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}
.dv-sub {
	font-size: 15px;
	color: var(--ink-2);
}
.dv-rec {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}
.dv-meter {
	flex: 1;
	max-width: 240px;
	height: 8px;
	border-radius: 4px;
	background: var(--beige);
	overflow: hidden;
}
.dv-meter i {
	display: block;
	height: 100%;
	width: 99.1%;
	background: var(--sage);
	border-radius: 4px;
	box-shadow: inset 0 0 0 1px rgba(43, 36, 33, .15);
}

/* Roll-up connector line */
.dv-schools {
	list-style: none;
	position: relative;
	margin-top: 14px;
	padding-left: 22px;
}
.dv-schools::before {
	content: "";
	position: absolute;
	left: 6px;
	top: -14px;
	height: 14px;
	width: 2px;
	background: var(--ink);
	opacity: .55;
}
.dv-row {
	position: relative;
}
.dv-row::after {
	content: "";
	position: absolute;
	left: -16px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--ink);
	opacity: .55;
}
.dv-row:last-child::after {
	bottom: auto;
	height: 26px;
	border-radius: 0 0 1px 1px;
}
.dv-row::before {
	content: "";
	position: absolute;
	left: -16px;
	top: 24px;
	width: 12px;
	height: 2px;
	background: var(--ink);
	opacity: .55;
}

.dv-school {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto 28px;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 12px 6px;
	border: 0;
	background: none;
	font: inherit;
	color: var(--ink);
	text-align: left;
	border-radius: 10px;
	cursor: default;
}
.dv-name {
	font-size: 15px;
	font-weight: 600;
}
.dv-bar {
	height: 10px;
	border-radius: 5px;
	background: var(--beige);
	overflow: hidden;
}
.dv-bar i {
	display: block;
	height: 100%;
	width: var(--w);
	background: var(--red);
	border-radius: 5px;
	transform-origin: left;
}
.acct-viz.go .dv-bar i {
	animation: dvGrow 1.3s cubic-bezier(.2, .8, .2, 1) both;
	animation-delay: calc(.3s + var(--i) * .14s);
}
@keyframes dvGrow {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}
.dv-amt {
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

/* Round +/− button */
.dv-chev {
	position: relative;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: var(--beige);
	transform: none !important;
	transition: background .2s, color .2s, box-shadow .2s, transform .2s;
}
.dv-chev::before,
.dv-chev::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	border-radius: 1px;
	background: var(--ink);
	transition: transform .25s, background .2s;
}
.dv-chev::after {
	transform: rotate(90deg);
}
.dv-school[aria-expanded="true"] .dv-chev::after {
	transform: rotate(0);
}
.dv-school[aria-expanded="true"] .dv-chev {
	background: var(--ink);
}
.dv-school[aria-expanded="true"] .dv-chev::before,
.dv-school[aria-expanded="true"] .dv-chev::after {
	background: var(--white);
}

/* Opened fund panel */
.dv-funds {
	list-style: none;
	margin: 0 6px 8px;
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--cream);
	display: grid;
	gap: 6px;
}
.dv-funds[hidden] {
	display: none;
}
.dv-funds:not([hidden]) {
	animation: dvIn .6s ease both;
}
@keyframes dvIn {
	from { opacity: 0; transform: translateY(-5px); }
	to { opacity: 1; transform: none; }
}
.dv-funds li {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	color: var(--ink-2);
}
.dv-funds b {
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

/* Pause button */
.acct-viz .dp {
	position: absolute;
	top: 20px;
	right: 20px;
}
.dp {
	flex: none;
	position: relative;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.dp[hidden] {
	display: none;
}
.dp:hover {
	background: var(--ink);
	color: var(--white);
}
.dp:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
}
.dp svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	fill: none;
	stroke-width: 1.5;
}
.dp circle {
	stroke: rgba(43, 36, 33, .22);
}
.dp .dp-ring {
	stroke: currentColor;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
}
.dp.tick .dp-ring {
	animation: dpRing var(--dur, 3s) linear forwards;
}
.dp.held .dp-ring {
	animation-play-state: paused;
}
@keyframes dpRing {
	to { stroke-dashoffset: 0; }
}
.dp i {
	width: 9px;
	height: 10px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}
.dp[aria-pressed="true"] i {
	width: 0;
	height: 0;
	border: 0;
	border-left: 9px solid currentColor;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	margin-left: 2px;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
	.sec-acct-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 3.5rem;
	}
	.sec-acct-content {
		max-width: min(620px, 100%);
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	/* the list sits centred as a block; its ticks stay lined up on the left */
	.sec-acct-checklist {
		width: fit-content;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}
	.sec-acct-cta {
		justify-content: center;
	}
	.sec-acct-stage {
		max-width: 620px;
		margin: 0 auto;
	}
}

@media (max-width: 960px) {
	.acct-viz {
		padding: 22px 18px 16px;
	}
	.dv-school {
		grid-template-columns: minmax(0, 1fr) auto 28px;
	}
	.dv-bar {
		display: none;
	}
}

@media (max-width: 640px) {
	.sec-acct-title {
		font-size: var(--h2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.acct-viz *,
	.acct-viz *::before,
	.acct-viz *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   Section 3: Document Accessibility ("Every document accessible")
   Stacked rounded sheet card containing left editorial content and right
   interactive 4-step document workspace mockup card, plus lower converging graphic.
   ========================================================================== */

.site-section--doc-accessibility {
	background: #ffffff;
	border: none;
	border-radius: 0;
	box-shadow: none;
	margin: 0 auto;
	padding: clamp(5rem, 7.5vw, 7rem) 0;
	min-height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	overflow: hidden;
	z-index: 15;
}

.sec-docs-layout {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: 4.5rem;
	align-items: center;
	margin-bottom: 0;
}

.sec-docs-stage {
	order: -1;
}

.sec-docs-content {
	order: 1;
}

@media (max-width: 1024px) {
	.sec-docs-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 3.5rem;
	}
	.sec-docs-content {
		max-width: min(620px, 100%);
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		order: 1;
	}
	.sec-docs-content .docs-converge-cards {
		max-width: 620px;
		margin-left: auto;
		margin-right: auto;
	}
	/* the list sits centred as a block; its ticks stay lined up on the left */
	.sec-docs-checklist {
		width: fit-content;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.sec-docs-checklist__item {
		text-align: left;
	}
	.sec-docs-cta {
		justify-content: center;
	}
	.sec-docs-stage {
		max-width: 620px;
		margin: 0 auto;
		order: 2;
	}
}

/* --- Left Column: Typography, Checklist & CTA --- */
.sec-docs-content {
	max-width: 620px;
}

.sec-docs-title {
	font-family: var(--serif);
	font-size: var(--h2);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0 0 1.5rem;
}

.sec-docs-title em {
	font-style: italic;
	font-weight: 400;
	color: var(--red);
}

.sec-docs-desc {
	font-size: var(--lead);
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0 0 1.5rem;
}

.sec-docs-content .docs-converge-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.75rem;
	width: 100%;
	margin-bottom: 2rem;
}

@media (max-width: 540px) {
	.sec-docs-content .docs-converge-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.65rem;
	}
}

.sec-docs-content .docs-conv-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 0.95rem 0.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sec-docs-content .docs-conv-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.sec-docs-content .docs-conv-card__icon svg {
	width: 22px;
	height: 22px;
	display: block;
}

.sec-docs-content .docs-conv-card__label {
	font-size: 0.8rem;
	font-weight: 600;
	color: #2b2421;
	line-height: 1.2;
}

.sec-docs-checklist {
	list-style: none;
	padding: 0;
	margin: 0 0 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.95rem;
}

.sec-docs-checklist__item {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	font-size: 1.02rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--ink);
}

.sec-docs-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--red);
	flex-shrink: 0;
	margin-top: 0.2rem;
}

.sec-docs-check svg {
	width: 15px;
	height: 15px;
}

.sec-docs-cta {
	display: flex;
	align-items: center;
}

/* --- Left Column: Animated Demo (.ad-work) --- */
.sec-docs-stage {
	position: relative;
	width: 100%;
}

.ad-work, .ad-work * { box-sizing: border-box; }
.ad-work :where(div, p, ol, ul, li, b, span, i, button) { margin: 0; }
.ad-work {
	position: relative;
	color: var(--ink);
	font-size: 17px;
	line-height: 1.55;
	background: var(--white);
	border-radius: 24px;
	padding: 22px 22px 18px;
	box-shadow: 0 30px 60px -36px rgba(43, 36, 33, 0.45), 0 0 0 1px var(--line);
}
.ad-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(43, 36, 33, 0.14);
}
.ad-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: 15px;
}
.ad-e {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--red);
	color: #ffffff;
	font-family: 'Fraunces', serif;
	font-weight: 800;
	font-size: 16px;
	line-height: 1;
}
.ad-e span {
	display: block;
	transform: rotate(-6deg) translateY(-1px);
}
.ad-state {
	font-size: 13px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 999px;
	background: #f2ece1;
	color: #2b2421;
}
.ad-file {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 2px;
}
.ad-pdf {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 9px;
	background: var(--red);
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.ad-file b {
	display: block;
	font-size: 15px;
}
.ad-file span span {
	font-size: 13px;
	color: #5c524d;
}

/* the document */
.ad-doc {
	position: relative;
	margin-top: 14px;
	padding: 20px 22px;
	border-radius: 16px;
	background: #f7f4ee;
	box-shadow: inset 0 0 0 1px rgba(43, 36, 33, 0.14);
	min-height: 250px;
}
.ad-line {
	display: flex;
	align-items: center;
	gap: 8px;
}
.ad-h1 b {
	font-family: 'Fraunces', serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 1.15;
}
.ad-meta {
	font-size: 13px;
	color: #5c524d;
	margin: 4px 0 12px;
}
.ad-bar {
	height: 8px;
	border-radius: 4px;
	background: rgba(43, 36, 33, 0.1);
	margin: 8px 0;
}
.ad-field {
	display: grid;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 13px;
}
.ad-field i {
	height: 30px;
	border-radius: 6px;
	background: #ffffff;
	box-shadow: inset 0 0 0 1px rgba(43, 36, 33, 0.14);
}
.ad-img i {
	height: 44px;
	background: #dcebe2;
	overflow: hidden;
}
.ad-map svg {
	display: block;
	width: 100%;
	height: 100%;
}
.ad-tag {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 2px 6px;
	border-radius: 4px;
	background: #2b2421;
	color: #ffffff;
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.8s, transform 0.8s;
}
.ad-mark {
	font-family: var(--sans, 'Instrument Sans', sans-serif);
	font-weight: 600;
	font-size: 13px;
	color: #b42a20;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.8s;
}
.ad-h1 .ad-mark {
	margin-left: auto;
}
.ad-body {
	position: relative;
}
.ad-stamp {
	position: absolute;
	z-index: 1;
	right: 4px;
	top: 50%;
	margin-top: -13px;
	font-family: var(--sans, 'Instrument Sans', sans-serif);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--success);
	border: 2px solid var(--success);
	border-radius: 10px;
	padding: 1px 10px;
	transform: rotate(-6deg) scale(0.6);
	opacity: 0;
	transition: opacity 0.5s, transform 0.7s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.ad-state, .ad-say {
	display: grid;
}
.ad-state {
	justify-items: center;
	text-align: center;
}
.ad-state > span, .ad-say > span {
	grid-area: 1/1;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease, visibility 0s 0.3s;
}
.ad-state > span.on, .ad-say > span.on {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.6s ease 0.35s, visibility 0s 0.35s;
}
.ad-work[data-step="1"] .ad-state {
	background: #fbe9b8;
}
.ad-work[data-step="2"] .ad-state,
.ad-work[data-step="3"] .ad-state {
	background: #dcebe2;
}
.ad-fname {
	display: grid;
}
.ad-up {
	display: block;
	height: 4px;
	margin-top: 6px;
	border-radius: 2px;
	background: #f2ece1;
	overflow: hidden;
	width: min(220px, 100%);
	opacity: 0;
	transition: opacity 0.4s;
}
.ad-up i {
	display: block;
	height: 100%;
	width: 100%;
	background: #2b2421;
	transform: scaleX(0);
	transform-origin: left;
}
.ad-work[data-step="0"] .ad-up {
	opacity: 1;
}
.ad-work[data-step="0"].go .ad-up i {
	animation: adUp 3s 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes adUp {
	to { transform: scaleX(1); }
}

.ad-prog {
	list-style: none;
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 4px 0 2px;
	counter-reset: ad;
}
.ad-prog::before {
	content: "";
	position: absolute;
	left: 12.5%;
	right: 12.5%;
	top: 11px;
	height: 2px;
	background: rgba(43, 36, 33, 0.14);
}
.ad-prog li {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 6px;
	counter-increment: ad;
	font-size: 13px;
	color: #5c524d;
}
.ad-prog i {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #f2ece1;
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	color: #5c524d;
	transition: background 0.8s, color 0.8s;
}
.ad-prog i::before {
	content: counter(ad);
}
.ad-prog b {
	font-weight: 600;
}
.ad-work[data-step="0"] .ad-prog li:nth-child(1) i,
.ad-work[data-step="1"] .ad-prog li:nth-child(2) i,
.ad-work[data-step="2"] .ad-prog li:nth-child(3) i,
.ad-work[data-step="3"] .ad-prog li:nth-child(4) i {
	background: #2b2421;
	color: #ffffff;
}
.ad-work[data-step="0"] .ad-prog li:nth-child(1) b,
.ad-work[data-step="1"] .ad-prog li:nth-child(2) b,
.ad-work[data-step="2"] .ad-prog li:nth-child(3) b,
.ad-work[data-step="3"] .ad-prog li:nth-child(4) b {
	color: #2b2421;
}
.ad-work[data-step="1"] .ad-prog li:nth-child(-n+1) i,
.ad-work[data-step="2"] .ad-prog li:nth-child(-n+2) i,
.ad-work[data-step="3"] .ad-prog li:nth-child(-n+3) i {
	background: #bfd9c7;
}
.ad-work[data-step="1"] .ad-prog li:nth-child(-n+1) i::before,
.ad-work[data-step="2"] .ad-prog li:nth-child(-n+2) i::before,
.ad-work[data-step="3"] .ad-prog li:nth-child(-n+3) i::before {
	content: "";
	width: 5px;
	height: 9px;
	margin-top: -2px;
	border: solid #2b2421;
	border-width: 0 2px 2px 0;
	transform: rotate(40deg);
}

.ad-issue {
	border-radius: 8px;
	padding: 5px 8px;
	margin-left: -8px;
	margin-right: -8px;
	outline: 2px dashed transparent;
	outline-offset: 0;
	transition: outline-color 1s;
}
.ad-h1 + .ad-meta {
	margin-top: 10px;
}
.ad-work[data-step="1"] .ad-issue {
	outline-color: var(--red);
}
.ad-work[data-step="2"] .ad-issue {
	outline: 2px solid var(--success);
}
.ad-work[data-step="1"] .ad-mark {
	opacity: 1;
}
.ad-work[data-step="2"] .ad-tag,
.ad-work[data-step="3"] .ad-tag {
	opacity: 1;
	transform: none;
	background: var(--success);
}
.ad-work[data-step="3"] .ad-stamp {
	opacity: 1;
	transform: rotate(-6deg) scale(1);
}
.ad-say {
	margin-top: 14px;
	font-size: 14px;
	line-height: 1.45;
	color: #2b2421;
}

.ad-line.ad-h1 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
}
.ad-h1 b {
	grid-column: 1;
	grid-row: 1;
}
.ad-h1 .ad-tag,
.ad-h1 .ad-mark {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	margin: 0;
}
.ad-field {
	grid-template-columns: 120px minmax(0, 1fr) auto;
}
.ad-field > span:not(.ad-tag):not(.ad-mark) {
	grid-column: 1;
	grid-row: 1;
}
.ad-field > i {
	grid-column: 2;
	grid-row: 1;
}
.ad-field .ad-tag,
.ad-field .ad-mark {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
}

.ad-head .ad-state {
	margin-left: auto;
	white-space: nowrap;
}
.ad-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Pause Button */
.dp {
	flex: none;
	position: relative;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #2b2421;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.dp[hidden] {
	display: none;
}
.dp:hover {
	background: #2b2421;
	color: #ffffff;
}
.dp:focus-visible {
	outline: 3px solid #2b2421;
	outline-offset: 3px;
}
.dp svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	fill: none;
	stroke-width: 1.5;
}
.dp circle {
	stroke: rgba(43, 36, 33, 0.22);
}
.dp .dp-ring {
	stroke: currentColor;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
}
.dp.tick .dp-ring {
	animation: dpRing var(--dur, 3s) linear forwards;
}
.dp.held .dp-ring {
	animation-play-state: paused;
}
@keyframes dpRing {
	to { stroke-dashoffset: 0; }
}
.dp i {
	width: 9px;
	height: 10px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}
.dp[aria-pressed="true"] i {
	width: 0;
	height: 0;
	border: 0;
	border-left: 9px solid currentColor;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	margin-left: 2px;
}

@media (max-width: 960px) {
	.ad-field {
		grid-template-columns: 96px minmax(0, 1fr) auto;
	}
}

@media (max-width: 600px) {
	.ad-work {
		padding: 16px 14px 14px;
		border-radius: 20px;
	}
	.ad-file {
		padding: 10px 2px;
	}
	.ad-pdf {
		width: 34px;
		height: 34px;
		font-size: 12px;
	}
	.ad-file b {
		font-size: 14px;
	}
	.ad-prog li {
		font-size: 12px;
	}
	.ad-doc {
		padding: 14px 14px 12px;
		min-height: 0;
		margin-top: 12px;
	}
	.ad-h1 b {
		font-size: 17px;
	}
	.ad-meta {
		margin: 10px 0 8px;
		font-size: 12px;
	}
	.ad-bar {
		height: 6px;
		margin: 6px 0;
	}
	.ad-bar + .ad-bar + .ad-bar {
		display: none;
	}
	.ad-body {
		min-height: 30px;
	}
	.ad-field {
		grid-template-columns: minmax(0, 1fr) auto auto !important;
		margin-top: 10px;
		font-size: 12px;
	}
	.ad-field i {
		display: none;
	}
	.ad-img i {
		display: block;
		width: 52px;
		height: 30px;
		border-radius: 5px;
	}
	.ad-field > span:not(.ad-tag):not(.ad-mark) {
		white-space: nowrap;
	}
	.ad-field .ad-mark {
		font-size: 12px;
	}
	.ad-stamp {
		font-size: 12px;
		right: 0;
		margin-top: -12px;
	}
	.ad-say {
		font-size: 13px;
		margin-top: 12px;
	}
}

@media (max-width: 520px) {
	.ad-name {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (max-width: 360px) {
	.ad-img i {
		width: 40px;
		height: 26px;
	}
	.ad-field {
		gap: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ad-work *, .ad-work *::before {
		animation: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   EDLIO - Payments Page Styles (.ep-*)
   ========================================================================== */
.ep-hero {
	padding: 5rem 0 var(--section-y);
	background: var(--beige);
	border-bottom: 0;
}

.ep-hero .site-container {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: center;
}

.ep-hero__content {
	max-width: 640px;
}

.ep-hero__visual {
	position: relative;
}

.ep-hero__visual--card {
	display: flex;
	justify-content: center;
	padding: 4.5rem 0;
}

.ep-hero__visual--card .ep-hero-mockup {
	position: relative;
	z-index: 1;
	max-width: 360px;
}

/* Floating photos around the card: decorative, each with its own size, spot and tilt */
.ep-hero-float {
	position: absolute;
	z-index: 0;
	width: var(--size, 150px);
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 20px;
	box-shadow: 0 18px 40px rgba(43, 36, 33, 0.18);
	transform: rotate(var(--tilt, 0deg));
	animation: epFloat 8s ease-in-out infinite alternate;
}

.ep-hero-float--1 { --size: 150px; --tilt: -5deg; top: 0; left: 0; }
.ep-hero-float--2 { --size: 140px; --tilt: 4deg; top: 44%; right: -4%; animation-delay: -3s; }
.ep-hero-float--3 { --size: 130px; --tilt: 3deg; bottom: 0; left: 4%; animation-delay: -6s; }

@keyframes epFloat {
	from { transform: translateY(0) rotate(var(--tilt, 0deg)); }
	to { transform: translateY(-6px) rotate(var(--tilt, 0deg)); }
}

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

/* The clip: rounded with clip-path so iPhone Safari keeps the corners on video */
.ep-hero-media {
	position: relative;
	width: 60%;
	height: min(580px, 66vh);
	border-radius: 24px;
	clip-path: inset(0 round 24px);
	background: var(--ink);
	box-shadow: 0 24px 56px rgba(43, 36, 33, 0.18);
}

.ep-hero-media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

.ep-hero-media .ew-video-toggle {
	right: auto;
	left: 1.15rem;
}

/* The payment card sits to the right, overlapping only the clip's empty right edge */
.ep-hero-media + .ep-hero-mockup {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-45%);
	width: min(360px, 62%);
	padding: 1.5rem;
	background: rgba(255, 253, 249, 0.9);
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
	backdrop-filter: blur(18px) saturate(1.2);
}

.ep-hero-mockup__row {
	animation: epRowIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ep-hero-mockup__row:nth-child(2) { animation-delay: 0.8s; }
.ep-hero-mockup__row:nth-child(3) { animation-delay: 1.4s; }
.ep-hero-mockup__row:nth-child(4) { animation-delay: 2s; }

@keyframes epRowIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ep-hero-mockup__row { animation: none; }
}

.ep-hero-mockup {
	background: var(--white);
	border: 0;
	border-radius: 24px;
	padding: 2rem;
	width: 100%;
	max-width: 440px;
	box-shadow: 0 24px 56px rgba(43, 36, 33, 0.1), 0 4px 16px rgba(43, 36, 33, 0.04);
	position: relative;
}

.ep-hero-mockup__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--sage-soft);
	color: var(--success);
	margin-bottom: 1rem;
}

.ep-hero-mockup__badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--success);
}

.ep-hero-mockup__title {
	font-family: var(--serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--site-text-dark);
	margin: 0 0 0.5rem;
	line-height: 1.25;
}

.ep-hero-mockup__sub {
	font-size: 13px;
	color: var(--site-text-muted);
	margin: 0 0 1.25rem;
}

.ep-hero-mockup__channels {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.65rem;
	margin-bottom: 1.25rem;
}

.ep-hero-mockup__channel-item {
	background: var(--cream);
	border: 0;
	border-radius: 12px;
	padding: 0.75rem 0.5rem;
	text-align: center;
}

.ep-hero-mockup__channel-item strong {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--site-text-dark);
	margin-top: 4px;
}

.ep-hero-mockup__channel-item span {
	display: block;
	font-size: 12px;
	line-height: 1.3;
	color: var(--site-text-muted);
}

.ep-hero-mockup__recent {
	border-top: 1px solid var(--line);
	padding-top: 1rem;
}

.ep-hero-mockup__recent-header {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	font-weight: 600;
	color: var(--site-text-muted);
	margin-bottom: 0.75rem;
}

.ep-hero-mockup__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0;
	font-size: 13px;
}

.ep-hero-mockup__row-info strong {
	display: block;
	font-size: 13px;
	color: var(--site-text-dark);
}

.ep-hero-mockup__row-info span {
	font-size: 12px;
	color: var(--site-text-muted);
}

.ep-hero-mockup__row-amt {
	font-family: var(--sans);
	font-weight: 600;
	font-feature-settings: 'tnum' 1;
	color: var(--success);
}

.ep-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: 999px;
	background: var(--color-1, #d12923) !important;
	color: #ffffff !important;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(209, 41, 35, 0.28);
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.ep-btn-primary:hover {
	background: #b5221d !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(209, 41, 35, 0.38);
}

.ep-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	border-radius: 999px;
	background: #ffffff !important;
	border: 1.5px solid rgba(43, 36, 33, 0.2);
	color: var(--site-text-dark) !important;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.ep-btn-ghost:hover {
	border-color: var(--site-text-dark);
	background: #fbf9f4 !important;
	transform: translateY(-1px);
}

/* Payments page spacing. Everything grows smoothly with the screen:
   side margins 24px on phones to 96px on large screens, content never wider than 1248px,
   card padding 24px to 40px, small gaps 20px to 32px */
.ep-imported-page {
	--section-y: clamp(4.5rem, 7.5vw, 7.5rem); /* section top/bottom: 72px phones to 120px large screens */
	--ep-pad: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
	--ep-gap: clamp(1.25rem, 0.75rem + 1.2vw, 2rem);
}

.ep-imported-page .site-container {
	max-width: 1440px;
	padding-left: clamp(1.5rem, 6vw, 6rem);
	padding-right: clamp(1.5rem, 6vw, 6rem);
}

.ep-page-body {
	background: var(--cream);
}

.ep-section {
	margin: 0 auto;
	padding: var(--section-y) 0;
}

.ep-section-header {
	text-align: center;
	max-width: 1000px;
	margin: 0 auto clamp(2.5rem, 1.5rem + 2.5vw, 4rem);
}

.ep-section-eyebrow {
	display: none;
}

.ep-section-title {
	font-family: var(--serif, "Fraunces", Georgia, serif);
	font-size: var(--h2);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0 0 1rem;
	text-wrap: balance;
}

.ep-section-lead {
	font-family: var(--sans);
	font-size: var(--lead);
	line-height: 1.6;
	color: var(--ink-2);
	max-width: 680px;
	margin: 0 auto;
	text-wrap: pretty;
}

/* 3-column & 4-column Card Grids */
.ep-card-grid {
	display: grid;
	gap: clamp(1.25rem, 0.5rem + 1.8vw, 2.25rem);
}

.ep-card-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.ep-card-grid--4 {
	grid-template-columns: 1.25fr 1fr 1fr;
}

.ep-card-grid--4up {
	grid-template-columns: repeat(4, 1fr);
}

.ep-card {
	background: var(--cream);
	border: 0;
	border-radius: 20px;
	padding: calc(var(--ep-pad) + 0.25rem) var(--ep-pad);
	box-shadow: none;
}

.ep-card__icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
}

.ep-card__icon--red {
	background: rgba(209, 41, 35, 0.1);
	color: var(--red);
}

.ep-card__icon--blue {
	background: var(--sky-soft);
	color: var(--ink);
}

.ep-card__icon--gold {
	background: var(--butter-soft);
	color: var(--ink);
}

.ep-card__icon--green {
	background: var(--sage-soft);
	color: var(--ink);
}

.ep-card__title {
	font-family: var(--serif, "Fraunces", Georgia, serif);
	font-size: 1.35rem;
	font-weight: 600;
	color: #2b2421;
	margin: 0 0 0.85rem;
	line-height: 1.25;
}

.ep-card__text {
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0;
}

/* Split Rows (Store & Forms) */
.ep-split-row {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(3rem, 1rem + 4vw, 6rem);
	align-items: center;
}

.ep-split-row + .ep-split-row {
	margin-top: var(--section-y);
}

.ep-split-row--reverse {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}

.ep-split-row--reverse .ep-split-row__content {
	order: 2;
}

.ep-split-row--reverse .ep-split-row__card-mockup {
	order: 1;
}

.ep-split-row__title {
	font-family: var(--serif, "Fraunces", Georgia, serif);
	font-size: var(--h2);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0 0 1.25rem;
	text-wrap: balance;
}

.ep-split-row__lead {
	font-family: var(--sans);
	font-size: var(--lead);
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0 0 2rem;
}

/* Checklists */
.ep-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ep-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink);
}

.ep-checklist__icon {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: none;
	color: var(--red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 600;
	flex-shrink: 0;
	margin-top: 2px;
}

/* Visual Mockup Cards */
.ep-mockup-card {
	background: var(--white);
	border: 0;
	border-radius: 24px;
	padding: 2.25rem;
	box-shadow: 0 20px 48px rgba(43, 36, 33, 0.08), 0 4px 12px rgba(43, 36, 33, 0.03);
}

.ep-mockup-card--form {
	background: var(--white);
	border-top: 4px solid var(--success);
}

.ep-mockup-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	padding-bottom: 1.25rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--line);
}

.ep-mockup-card__badge {
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(209, 41, 35, 0.1);
	color: var(--red-ink);
}

.ep-mockup-card__badge--green {
	background: var(--sage-soft);
	color: var(--success);
}

.ep-mockup-card__sub {
	font-size: 13px;
	color: var(--site-text-muted);
}

.ep-mockup-card__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 0;
	border-bottom: 1px dashed var(--line);
}

.ep-mockup-card__item-info strong {
	display: block;
	font-size: 15px;
	color: var(--site-text-dark);
}

.ep-mockup-card__item-info span {
	font-size: 13px;
	color: var(--site-text-muted);
}

.ep-mockup-card__price {
	font-family: var(--sans);
	font-weight: 600;
	font-size: 16px;
	font-feature-settings: 'tnum' 1;
	color: var(--site-text-dark);
}

.ep-mockup-card__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 1.5rem;
	margin-top: 0.5rem;
	font-size: 16px;
	font-weight: 600;
	color: var(--site-text-dark);
}

.ep-mockup-card__total-amt {
	font-family: var(--sans);
	font-size: 24px;
	font-weight: 600;
	font-feature-settings: 'tnum' 1;
	color: var(--color-1, #d12923);
}

.ep-mockup-form-step {
	padding: 1rem 1.25rem;
	background: var(--cream);
	border-radius: 12px;
	margin-bottom: 0.85rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.25rem 1rem;
	font-size: 14px;
}

.ep-mockup-form-step__label {
	color: var(--site-text-muted);
}

.ep-mockup-form-step__val {
	font-weight: 600;
	color: var(--site-text-dark);
}

.ep-mockup-card__status {
	margin-top: 1.25rem;
	padding: 0.75rem 1rem;
	border-radius: 10px;
	background: var(--sage-soft);
	color: var(--success);
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ep-mockup-card__status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--success);
}

/* Feature Boxes (4-grid) */
.ep-feature-box {
	background: var(--cream);
	border: 0;
	border-radius: 20px;
	padding: 0 0 var(--ep-pad);
	box-shadow: none;
	overflow: hidden;
}

/* Photo across the top of each box, edge to edge; the text keeps its side padding */
.ep-feature-box__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	margin: 0 0 var(--ep-gap);
	background: var(--beige);
}

.ep-feature-box > :not(.ep-feature-box__img) {
	padding-left: var(--ep-pad);
	padding-right: var(--ep-pad);
}

.ep-feature-box__tag {
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-1, #d12923);
	margin-bottom: 0.85rem;
}

.ep-feature-box__title {
	font-family: var(--serif, "Fraunces", Georgia, serif);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 0.85rem;
	line-height: 1.25;
}

.ep-feature-box__text {
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0;
}

/* Bento: the tall tile. The photo fills it; the text sits on a dark wash that runs most of the way down, so white text keeps AA contrast over any photo, at every width */
.ep-feature-box--tall {
	grid-row: span 2;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 440px;
	padding: calc(var(--ep-pad) + 0.25rem) 0;
	background: var(--ink);
}

.ep-feature-box--tall .ep-feature-box__img {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
	object-position: 50% 100%;
	margin: 0;
}

.ep-feature-box--tall::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(28, 22, 20, 0.9) 0%, rgba(28, 22, 20, 0.75) 50%, rgba(28, 22, 20, 0.62) 80%, rgba(28, 22, 20, 0.15) 100%);
}

.ep-feature-box--tall > :not(.ep-feature-box__img) {
	position: relative;
	z-index: 1;
	padding-left: calc(var(--ep-pad) + 0.25rem);
	padding-right: calc(var(--ep-pad) + 0.25rem);
}

.ep-feature-box--tall .ep-feature-box__title {
	font-size: clamp(1.75rem, 2.4vw, 2.25rem);
	color: var(--white);
}

.ep-feature-box--tall .ep-feature-box__text {
	max-width: 36ch;
	font-size: 16px;
	color: var(--white);
}

/* Bento: the wide tile. Photo on the left, text on the right */
.ep-feature-box--wide {
	grid-column: span 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(var(--ep-pad), 1fr) auto auto minmax(var(--ep-pad), 1fr);
	padding: 0;
}

.ep-feature-box--wide .ep-feature-box__img {
	grid-column: 1;
	grid-row: 1 / -1;
	height: 100%;
	min-height: 240px;
	aspect-ratio: auto;
	margin: 0;
}

.ep-feature-box--wide > :not(.ep-feature-box__img) {
	grid-column: 2;
}

.ep-feature-box--wide .ep-feature-box__title {
	grid-row: 2;
}

.ep-feature-box--wide .ep-feature-box__text {
	grid-row: 3;
}

/* Testimonial Section */
.ep-testimonial-section {
	padding: var(--section-y) 0;
	background: var(--white);
}

.ep-testimonial-card {
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	padding: 0 1.5rem;
}

.ep-testimonial-quote-mark {
	font-family: var(--serif);
	font-size: 6rem;
	line-height: 1;
	color: var(--color-1, #d12923);
	opacity: 0.2;
	margin-bottom: -2.5rem;
}

.ep-testimonial-text {
	font-family: var(--serif, "Fraunces", Georgia, serif);
	font-style: normal;
	font-size: clamp(1.2rem, 2vw, 1.55rem);
	line-height: 1.55;
	color: var(--ink);
	margin: 0 0 2rem;
}

.ep-testimonial-name {
	display: block;
	font-family: var(--sans);
	font-size: 17px;
	font-weight: 600;
	color: var(--site-text-dark);
}

.ep-testimonial-role {
	font-size: 14px;
	color: var(--site-text-muted);
}

/* Quote carousel: testimonials share one spot and cross-fade; the track is as tall as the longest quote, so the page doesn't jump */
.ep-quotes {
	max-width: 860px;
	margin: 0 auto;
}

.ep-quotes__track {
	display: grid;
}

.ep-quotes__slide {
	grid-area: 1 / 1;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transform: translateX(24px);
	transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.6s;
}

.ep-quotes__slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.ep-quotes__slide .ep-section-lead {
	margin: -0.5rem auto 2rem;
}

.ep-quotes__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 2.5rem;
}

.ep-quotes__arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	font-family: var(--sans);
	font-size: 18px;
	color: var(--ink);
	background: var(--white);
	border: 1px solid rgba(43, 36, 33, 0.2);
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.ep-quotes__arrow:hover {
	background: var(--cream);
	border-color: var(--ink);
}

.ep-quotes__dots {
	display: flex;
	gap: 2px;
}

/* each dot is a 24px target with a small pill inside; the current one is a longer red pill */
.ep-quotes__dot {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.ep-quotes__dot::before {
	content: "";
	width: 8px;
	height: 8px;
	background: rgba(43, 36, 33, 0.35);
	border-radius: 999px;
	transition: width 0.3s ease, background 0.3s ease;
}

.ep-quotes__dot[aria-current="true"] {
	width: 36px;
}

.ep-quotes__dot[aria-current="true"]::before {
	width: 28px;
	background: var(--color-1, #d12923);
}

.ep-quotes__arrow:focus-visible,
.ep-quotes__dot:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.ep-quotes__slide .ep-section-lead {
		margin-left: 0;
	}
	.ep-quotes__nav {
		justify-content: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ep-quotes__slide,
	.ep-quotes__dot::before {
		transition: none;
	}
}

/* Bottom CTA adjustment */
.ep-bottom-cta {
	margin-top: 0;
	background: var(--white);
}

/* The banner title fits on one line on laptops and larger; when it has to wrap, the lines are balanced */
.ep-bottom-cta .site-cta-card__inner {
	max-width: 960px;
}

.ep-bottom-cta .site-cta-banner__title {
	text-wrap: balance;
}

/* AOS (Animate on Scroll): a gentler move than the library default of 100px */
.ep-imported-page [data-aos="fade-up"] {
	transform: translate3d(0, 28px, 0);
}

.ep-imported-page [data-aos="fade-down"] {
	transform: translate3d(0, -18px, 0);
}

/* Responsive Rules for Payments */
@media (max-width: 1200px) {
	.ep-hero .site-container {
		grid-template-columns: min(620px, 100%);
		justify-content: center;
		gap: 2.5rem;
	}
	.ep-hero__visual {
		justify-content: flex-start;
	}
	.ep-hero-media {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
	}
	.ep-hero-media video {
		object-position: 50% 45%;
	}
	.ep-hero-media .ew-video-toggle {
		left: auto;
		right: 1.15rem;
		top: 1.15rem;
		bottom: auto;
	}
	.ep-hero-media + .ep-hero-mockup {
		position: relative;
		top: auto;
		transform: none;
		width: auto;
		max-width: none;
		margin: -3rem 1rem 0;
	}
	.ep-card-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
	.ep-feature-box--tall,
	.ep-feature-box--wide {
		grid-column: 1 / -1;
	}
	.ep-feature-box--tall {
		grid-row: auto;
		min-height: 560px;
	}
	/* stacked: the photos sit in a staggered row above the card, just touching its top edge */
	.ep-hero__visual--card {
		padding: calc(var(--row, 120px) - 1rem) 0 0;
	}
	.ep-hero__visual--card .ep-hero-mockup {
		max-width: none;
	}
	.ep-hero-float { --size: var(--row, 120px); top: 0; bottom: auto; right: auto; }
	.ep-hero-float--1 { left: 4%; }
	.ep-hero-float--2 { left: calc(50% - var(--row, 120px) / 2); top: -0.75rem; }
	.ep-hero-float--3 { left: auto; right: 4%; }
	.ep-card-grid--4up {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1024px) {
	.ep-split-row,
	.ep-split-row--reverse {
		grid-template-columns: min(620px, 100%);
		justify-content: center;
		gap: 3rem;
	}
	.ep-split-row--reverse .ep-split-row__content {
		order: 1;
	}
	.ep-split-row--reverse .ep-split-row__card-mockup {
		order: 2;
	}
}

@media (max-width: 768px) {
	.ep-card-grid {
		max-width: 620px;
		margin-left: auto;
		margin-right: auto;
	}
	.ep-card-grid--3 {
		grid-template-columns: 1fr;
	}
	.ep-hero {
		padding: 3.5rem 0 var(--section-y);
	}
}

@media (max-width: 600px) {
	.ep-card-grid--4,
	.ep-card-grid--4up {
		grid-template-columns: 1fr;
	}
	.ep-hero__visual--card {
		--row: 96px;
	}
	.ep-feature-box--tall {
		min-height: 420px;
	}
	.ep-feature-box--wide {
		display: block;
		padding: 0 0 var(--ep-pad);
	}
	.ep-feature-box--wide .ep-feature-box__img {
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 10;
		margin: 0 0 var(--ep-gap);
	}
	.ep-section-header,
	.ep-testimonial-card {
		text-align: left;
	}
	.ep-testimonial-card {
		padding: 0;
	}
	.ep-hero-mockup,
	.ep-mockup-card {
		padding: 1.5rem 1.25rem;
	}
	.ep-hero-media {
		aspect-ratio: 1 / 1;
	}
	.ep-hero-media + .ep-hero-mockup {
		margin: -2.5rem 0 0;
		padding: 1.5rem 1.25rem;
	}
	.ep-hero-mockup__channels {
		gap: 0.5rem;
	}
	.ep-hero-mockup__channel-item {
		padding: 0.75rem 0.25rem;
	}
}



/* ==========================================================================
   EDLIO - News article (.show-news): the CMS news template, "Classic" layout.
   Beige title band (breadcrumb + title), then a white area with the summary
   and story on the left and the attached image as a card on the right.
   Styles the CMS markup as it is; uses the same tokens, column and spacing
   as the inner pages. The CMS's own news styles (web_apps pack) are matched
   at the same strength where needed, so there is no !important here.
   ========================================================================== */
.show-news {
	--news-gutter: clamp(1.5rem, 6vw, 6rem);       /* same side margins as the inner pages */
	--news-img: clamp(260px, 24vw, 300px);         /* the CMS image is 300px wide: never shown larger */
	padding-bottom: 0;
	background: var(--beige);
	font-family: var(--sans);
	color: var(--ink);
}

/* breadcrumb and article sit in the inner-page content column (1248px max) */
.show-news > #breadcrumbs,
.show-news > article {
	display: block;
	box-sizing: border-box;
	max-width: 1440px;
	margin: 0 auto;
	padding-left: var(--news-gutter);
	padding-right: var(--news-gutter);
}

.show-news > #breadcrumbs {
	margin-bottom: 1.25rem;
}

/* breadcrumb: the inner-page look (short red underline on links) */
.show-news .breadcrumb {
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.show-news .breadcrumb a {
	position: relative;
	display: inline-block;
	padding-bottom: 2px;
	font-size: inherit;
	color: var(--ink-2);
	text-decoration: none;
	transition: color 0.2s ease;
}

.show-news .breadcrumb a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 18px;
	height: 1.5px;
	background: var(--red);
	border-radius: 1px;
	transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.show-news .breadcrumb a:hover,
.show-news .breadcrumb a:focus {
	color: var(--ink);
}

.show-news .breadcrumb a:hover::after,
.show-news .breadcrumb a:focus::after {
	width: 100%;
}

.show-news .breadcrumb-delimiter {
	margin: 0 0.5rem;
	opacity: 0.5;
}

/* title: bottom of the beige band */
.show-news .pageTitle {
	max-width: 20ch;
	margin: 0 0 clamp(2.5rem, 4vw, 4rem);
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--ink);
	text-wrap: balance;
}

/* the white story area: full width, story left, image card right */
.show-news article > .article-container {
	padding: clamp(2.5rem, 5vw, 4.5rem) 0 var(--section-y);
	background: var(--white);
	box-shadow: 0 0 0 100vmax var(--white);
	clip-path: inset(0 -100vmax);
}

.show-news article > .article-container > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--news-img);
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: start;
}

.show-news .article-content {
	grid-column: 1;
	grid-row: 1;
}

/* the CMS outputs an empty extra container inside the story */
.show-news .article-content .article-container {
	display: none;
}

/* summary: an intro paragraph (the CMS sets small italics) */
.show-news .article-content .summary {
	max-width: 60ch;
	margin: 0 0 1.75rem;
	font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
	font-style: normal;
	line-height: 1.55;
	color: var(--ink-2);
}

/* story text (rich text from the CMS) */
.show-news .article-content .body {
	max-width: 68ch;
	margin-bottom: 0;
	font-size: 17px;
	line-height: 1.75;
}

.show-news .body p,
.show-news .body > div {
	margin: 0 0 1.2em;
}

.show-news .body h2 {
	margin: 2em 0 0.6em;
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	line-height: 1.2;
}

.show-news .body h3 {
	margin: 1.6em 0 0.5em;
	font-family: var(--serif);
	font-weight: 600;
	font-size: 1.35rem;
	line-height: 1.25;
}

.show-news .body a {
	font-size: inherit;
	color: var(--red-ink);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.show-news .body ul,
.show-news .body ol {
	margin: 0 0 1.2em;
	padding-left: 1.25em;
}

.show-news .body li {
	margin-bottom: 0.4em;
}

.show-news .body blockquote {
	margin: 1.5em 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--red);
	font-family: var(--serif);
	font-size: 1.25rem;
	line-height: 1.5;
}

.show-news .article-content .body img {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
}

/* date and share rows (on articles that have them) */
.show-news .article-content .data {
	font-size: 14px;
	color: var(--ink-2);
	border-color: var(--line);
}

.show-news .article-content .data .date.published {
	color: var(--ink-2);
}

/* attached image: a rounded card on the right that stays in view; it still opens the full-size image */
.show-news .attached-images {
	display: contents; /* the CMS sets an inline 250px width on this wrapper; the link below is the card */
}

.show-news .link-to-bigger-image {
	grid-column: 2;
	grid-row: 1;
	position: sticky;
	top: 7rem;
	display: block;
	width: var(--news-img);
	max-width: 100%;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 24px 56px rgba(43, 36, 33, 0.14), 0 4px 14px rgba(43, 36, 33, 0.05);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.show-news .link-to-bigger-image:hover,
.show-news .link-to-bigger-image:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 30px 64px rgba(43, 36, 33, 0.18), 0 4px 14px rgba(43, 36, 33, 0.06);
}

.show-news .attached-images .link-to-bigger-image img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}

/* tablets and phones: one column, image card first */
@media (max-width: 860px) {
	.show-news article > .article-container > div {
		grid-template-columns: minmax(0, 1fr);
	}
	.show-news .link-to-bigger-image {
		grid-column: 1;
		grid-row: 1;
		position: static;
	}
	.show-news .article-content {
		grid-row: 2;
	}
}

/* ==========================================================================
   Inner-page template, more blocks (first used on the Websites page):
   the slim-device hero, the site carousel, cards on cream, the two-column checklist
   ========================================================================== */

/* Hero with slim device frames: a desktop screen and a phone showing the same school site, as still screenshots.
   Slim light-silver frames, no laptop base; the phone overlaps the screen's bottom-right corner */
/* the devices get the bigger column and reach into the right margin on wide screens */
.ep-hero .site-container:has(.ep-hero__visual--devices) {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}

.ep-hero__visual--devices {
	position: relative;
	padding: 0 3.5rem 3rem 0;
	margin-right: calc((1.5rem - clamp(1.5rem, 6vw, 6rem)) / 2);
}

.ep-device {
	position: relative;
	overflow: hidden;
	padding: 5px;
	border-radius: 14px;
	/* slim light-silver frame: a soft metallic gradient with a fine highlight and edge */
	background: linear-gradient(140deg, #eef0f2 0%, #cfd3d8 38%, #e4e7ea 62%, #bfc4ca 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 0 1px rgba(43, 36, 33, 0.12), 0 32px 64px -28px rgba(43, 36, 33, 0.4), 0 2px 6px rgba(43, 36, 33, 0.08);
}

.ep-device img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 9px;
}

/* link to the live site, under the devices on the left; short red underline like the footer links */
.ep-hero__live-link {
	position: absolute;
	left: 0;
	bottom: 0.35rem;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 2px;
	font: 600 14px/1.3 var(--sans);
	color: var(--ink);
	text-decoration: none;
}

.ep-hero__live-link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 18px;
	height: 1.5px;
	border-radius: 1px;
	background: var(--red);
	transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ep-hero__live-link:hover::after,
.ep-hero__live-link:focus-visible::after {
	width: 100%;
}

.ep-device--phone {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 27%;
	padding: 4px;
	border-radius: 18px;
}

.ep-device--phone img {
	border-radius: 14px;
}

@media (max-width: 1200px) {
	.ep-hero .site-container:has(.ep-hero__visual--devices) { grid-template-columns: min(620px, 100%); }
	.ep-hero__visual--devices { margin-right: 0; padding-bottom: 4.5rem; }
}

@media (max-width: 600px) {
	.ep-hero__visual--devices { padding: 0 1.5rem 1.5rem 0; }
	.ep-device { padding: 3px; border-radius: 10px; }
	.ep-device img { border-radius: 7px; }
	/* phones: the live link sits on its own row under the devices */
	.ep-hero__live-link { position: relative; bottom: auto; margin: 2.5rem 0 0; }
	.ep-device--phone { bottom: 3.75rem; padding: 3px; border-radius: 13px; }
	.ep-device--phone img { border-radius: 10px; }
}

/* Site carousel: the active school website sits large in the centre with its phone version
   rising beside it; neighbours sit smaller to each side with a slight turn. Hovering the active site pans down the page.
   Positions are set by the page script through data-pos (-2 … 2) */
.ep-carousel {
	/* full width: reaches past the container padding (and pads back in by the same amount),
	   so the side sites' shadows have room instead of being clipped at the container edge */
	margin-inline: calc(-1 * clamp(1.5rem, 6vw, 6rem));
	padding: 0.5rem clamp(1.5rem, 6vw, 6rem) 0;
	overflow-x: clip;
}

.ep-carousel__stage {
	display: grid;
	margin: 0;
	padding: 0 0 clamp(2.5rem, 5vw, 4rem);
	list-style: none;
	perspective: 1800px;
}

.ep-carousel__slide {
	grid-area: 1 / 1;
	justify-self: center;
	position: relative;
	/* sized so the side sites sit fully inside the container */
	width: min(56%, 740px);
	transform-style: preserve-3d;
	transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.24, 1), opacity 0.5s ease, filter 0.5s ease;
	opacity: 0;
	pointer-events: none;
}

.ep-carousel__slide.is-active { z-index: 3; opacity: 1; pointer-events: auto; }
.ep-carousel__slide[data-pos="-1"],
.ep-carousel__slide[data-pos="1"] { z-index: 2; opacity: 0.85; filter: saturate(0.7) brightness(0.96); pointer-events: auto; cursor: pointer; }
.ep-carousel__slide[data-pos="-1"] { transform: translateX(-44%) scale(0.82) rotateY(4deg); }
.ep-carousel__slide[data-pos="1"] { transform: translateX(44%) scale(0.82) rotateY(-4deg); }
.ep-carousel__slide[data-pos="-2"] { transform: translateX(-80%) scale(0.68) rotateY(5deg); }
.ep-carousel__slide[data-pos="2"] { transform: translateX(80%) scale(0.68) rotateY(-5deg); }

.ep-carousel__screen img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: 50% 0;
	/* the return to the top is quick; the pan down (on hover) is set below */
	transition: object-position 0.9s ease-out;
}

.ep-carousel__slide.is-active:hover .ep-carousel__screen img,
.ep-carousel__slide.is-active:focus-within .ep-carousel__screen img {
	object-position: 50% 100%;
	transition: object-position 6s cubic-bezier(0.45, 0, 0.3, 1);
}

.ep-carousel__phone {
	position: absolute;
	right: -5%;
	bottom: -12%;
	width: 21%;
	padding: 4px;
	border-radius: 16px;
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.ep-carousel__phone img {
	aspect-ratio: 1 / 2;
	object-fit: cover;
	object-position: 50% 0;
	border-radius: 12px;
}

.ep-carousel__slide.is-active .ep-carousel__phone {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s ease 0.45s, transform 0.7s cubic-bezier(0.22, 0.8, 0.24, 1) 0.45s;
}

/* school name with "Visit site" under it on the left; arrows on the right */
.ep-carousel__bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem 1.5rem;
	width: min(56%, 740px);
	margin: 0 auto;
}

.ep-carousel__caption {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	text-wrap: balance;
}

.ep-carousel__tag {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-2);
}

.ep-carousel__name {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: clamp(1.35rem, 2vw, 1.6rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--ink);
}

.ep-carousel__visit {
	grid-column: 1;
	justify-self: start;
}

.ep-carousel__nav {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ep-carousel__count {
	min-width: 3.2em;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	color: var(--ink-2);
	font-variant-numeric: tabular-nums;
}

.ep-carousel__arrow {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(43, 36, 33, 0.25);
	border-radius: 50%;
	background: var(--white);
	color: var(--ink);
	font-size: 18px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ep-carousel__arrow:hover {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--white);
}

.ep-carousel__arrow:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.ep-carousel__slide,
	.ep-carousel__phone,
	.ep-carousel__slide.is-active .ep-carousel__phone,
	.ep-carousel__screen img,
	.ep-carousel__slide.is-active:hover .ep-carousel__screen img,
	.ep-carousel__slide.is-active:focus-within .ep-carousel__screen img {
		transition: none;
	}
	.ep-carousel__slide.is-active:hover .ep-carousel__screen img,
	.ep-carousel__slide.is-active:focus-within .ep-carousel__screen img {
		object-position: 50% 0;
	}
}

@media (max-width: 768px) {
	.ep-carousel__slide { width: 72%; }
	.ep-carousel__bar { width: 100%; }
	.ep-carousel__slide[data-pos="-1"] { transform: translateX(-29%) scale(0.8) rotateY(4deg); }
	.ep-carousel__slide[data-pos="1"] { transform: translateX(29%) scale(0.8) rotateY(-4deg); }
	.ep-carousel__phone { right: -3%; width: 26%; padding: 3px; border-radius: 12px; }
	.ep-carousel__phone img { border-radius: 9px; }
	/* phones: name across the top, then "Visit site" and the arrows share a row */
	.ep-carousel__caption { grid-column: 1 / -1; }
	.ep-carousel__nav { grid-row: 2; }
}

/* Cards always contrast with their section: cream on white sections (default), white on cream sections */
.ep-section:not(.site-section--sheet) .ep-card,
.ep-section:not(.site-section--sheet) .ep-feature-box:not(.ep-feature-box--tall) {
	background: var(--white);
}

/* Two-column checklist (e.g. "Everything your school website needs") */
.ep-checklist-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem clamp(2rem, 5vw, 4.5rem);
	max-width: 1040px;
	margin: 0 auto;
}

.ep-checklist-grid .ep-checklist strong {
	font-weight: 600;
	color: var(--ink);
}


/* Video on a template page (first used on Accounting): looping silent clips in the device frame,
   one in the hero with photos around it, one under a card grid */
.acv-workflow-video {
	max-width: 760px;
	margin: clamp(2.5rem, 4vw, 3.5rem) auto 0;
	padding: 5px;
}

.acv-workflow-video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 10px;
	background: var(--red);
}

.acv-hero {
	display: block;
	position: relative;
	padding: 9rem 0 1rem;
}

/* the overview plays in the device frame */
.acv-hero-video {
	position: relative;
	z-index: 1;
	width: calc(100% + 4rem);
	margin: 0 -1.5rem 0 -2.5rem;
	padding: 5px;
}

.acv-hero-video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 10px;
	background: var(--red);
}

/* three accounting thumbnails stacked like cards behind the video's top edge:
   the middle one larger and in front, the two side ones smaller, tucked behind it and fanned out */
.acv-hero .ep-hero-float { z-index: 0; --size: 124px; }
.acv-hero .ep-hero-float--1 { --tilt: -4deg; top: 3rem; bottom: auto; left: calc(50% - 0.5rem - 202px); right: auto; }
.acv-hero .ep-hero-float--2 { --tilt: 4deg; top: 3rem; bottom: auto; left: calc(50% - 0.5rem + 78px); right: auto; }
.acv-hero .ep-hero-float--3 { --size: 156px; --tilt: 0deg; top: 1.5rem; bottom: auto; left: calc(50% - 0.5rem - 78px); right: auto; }

@media (max-width: 600px) {
	.acv-workflow-video { padding: 3px; }
	.acv-workflow-video video { border-radius: 7px; }
	/* phones: the video full width, the thumbnail stack a little smaller */
	.acv-hero-video { width: 100%; margin: 0; }
	.acv-hero { padding: 5rem 0 3rem; }
	.acv-hero .ep-hero-float { --size: 84px; }
	.acv-hero .ep-hero-float--1 { top: 1.5rem; left: calc(50% - 134px); }
	.acv-hero .ep-hero-float--2 { top: 1.5rem; left: calc(50% + 50px); }
	.acv-hero .ep-hero-float--3 { --size: 104px; top: 0.5rem; left: calc(50% - 52px); }
}

/* ============================================================
   Websites Product Page (ew-*)
   ============================================================ */


.ew-hero {
	background: #fbf9f4;
	border-bottom: 1px solid rgba(43, 36, 33, 0.08);
	padding: 5rem 0 4rem;
	text-align: center;
}

.ew-bottom-cta-banner {
	padding: 4.5rem 0 5rem;
}

.ew-hero .site-container {
	max-width: 820px;
	margin: 0 auto;
}

.ew-hero .site-page-header__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 2rem;
	flex-wrap: wrap;
}

.ew-section-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 3rem;
}

.ew-eyebrow {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-1, #d12923);
	margin-bottom: 0.75rem;
}

.ew-title {
	font-family: var(--serif);
	font-size: clamp(2rem, 3.2vw, 2.65rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--site-text-dark);
	margin: 0 0 1rem;
}

.ew-subtitle {
	font-size: 17px;
	line-height: 1.6;
	color: var(--site-text-muted);
	margin: 0;
}

/* Portfolio Grid */
.ew-portfolio {
	padding: 4.5rem 0;
	background: #ffffff;
}

.ew-portfolio__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

.ew-portfolio__cta {
	display: flex;
	justify-content: center;
	margin-top: 3.5rem;
}

.ew-portfolio__cta .wv-more {
	margin-top: 0;
	font-size: 16px;
}

@media (max-width: 1200px) {
	.ew-portfolio__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.ew-portfolio__grid {
		grid-template-columns: 1fr;
	}
}

.ew-portfolio-card {
	background: #ffffff;
	border: 1px solid rgba(43, 36, 33, 0.1);
	border-radius: 18px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ew-portfolio-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
	border-color: rgba(209, 41, 35, 0.3);
}

.ew-portfolio-card__media {
	width: 100%;
	aspect-ratio: 16 / 10;
	background: #eee8dc;
	overflow: hidden;
	position: relative;
}

.ew-portfolio-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.ew-portfolio-card:hover .ew-portfolio-card__media img {
	transform: scale(1.04);
}

.ew-portfolio-card__body {
	padding: 1.5rem 1.75rem 1.75rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.ew-portfolio-card__tag {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-1, #d12923);
	margin-bottom: 0.5rem;
}

.ew-portfolio-card__title {
	font-family: var(--serif);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--site-text-dark);
	margin: 0 0 0.65rem;
}

.ew-portfolio-card__desc {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--site-text-muted);
	margin: 0 0 1.25rem;
	flex-grow: 1;
}

.ew-portfolio-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sans);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--color-1, #d12923);
	text-decoration: none;
	transition: gap 0.2s ease;
}

.ew-portfolio-card__link:hover {
	gap: 10px;
}

/* Features Grid */
.ew-features {
	background: #fbf9f4;
	padding: 4.5rem 0;
	border-top: 1px solid rgba(43, 36, 33, 0.08);
	border-bottom: 1px solid rgba(43, 36, 33, 0.08);
}

.ew-features__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.ew-feature-card {
	background: #ffffff;
	border: 1px solid rgba(43, 36, 33, 0.08);
	border-radius: 16px;
	padding: 2rem 1.5rem;
}

.ew-feature-card__icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--surface-subtle, #f5f2eb);
	color: var(--color-1, #d12923);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
}

.ew-feature-card__icon svg {
	width: 22px;
	height: 22px;
	display: block;
}

.ew-feature-card h3 {
	font-family: var(--serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--site-text-dark);
	margin: 0 0 0.65rem;
}

.ew-feature-card p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--site-text-muted);
	margin: 0;
}

/* Checklist Section */
.ew-checklist-sec {
	padding: 4.5rem 0;
	background: #ffffff;
}

.ew-checklist-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.5rem;
	max-width: 960px;
	margin: 0 auto;
}

.ew-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
}

.ew-checklist li {
	position: relative;
	padding-left: 28px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--site-text-dark);
}

.ew-checklist li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 800;
	color: #047857;
}

/* Websites Split Feature Rows (Chatbot & Design Agent) */
.ew-split-sec {
	padding: 5.5rem 0 3.5rem;
	background: #ffffff;
}

.ew-split-row {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 4.5rem;
	align-items: center;
	margin-bottom: 5.5rem;
}

.ew-split-row:last-child {
	margin-bottom: 0;
}

.ew-split-row--reverse {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}

.ew-split-row--reverse .ew-split-row__content {
	order: 2;
}

.ew-split-row--reverse .ew-split-row__media {
	order: 1;
}

.ew-split-row__title {
	font-family: var(--serif, "Fraunces", Georgia, serif);
	font-size: clamp(2rem, 3.2vw, 2.65rem);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: #2b2421;
	margin: 0 0 1.25rem;
}

.ew-split-row__lead {
	font-family: var(--sans);
	font-size: 1.12rem;
	line-height: 1.6;
	color: #574e47;
	margin: 0 0 1.85rem;
}

.ew-feature-bullets {
	list-style: none;
	padding: 0;
	margin: 0 0 2.25rem;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.ew-feature-bullets li {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	font-size: 0.98rem;
	line-height: 1.55;
	color: #574e47;
}

.ew-feature-bullets li svg {
	flex-shrink: 0;
	color: var(--site-primary, #D12923);
	margin-top: 3px;
}

.ew-feature-bullets li strong {
	color: #2b2421;
	font-weight: 600;
}

.ew-split-row__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* Placeholder Video Embed Cards */
.ew-video-card {
	background: transparent;
	border: none;
	border-radius: 1.25rem;
	padding: 0;
	box-shadow: 0 20px 40px -12px rgba(43, 36, 33, 0.12);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ew-video-card__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 1.25rem;
	overflow: hidden;
	background: #18191d;
}

.ew-video-card__frame .ew-video-player {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 1.25rem;
	background: #000000;
	cursor: pointer;
}

/* Play/Pause Button overlay matching homepage (.eh-play) transparent circular container */
.ew-video-toggle {
	position: absolute;
	right: 1.15rem;
	bottom: 1.15rem;
	z-index: 4;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 999px;
	border: 1.5px solid rgba(255, 253, 249, 0.75);
	background: rgba(43, 36, 33, 0.45);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #ffffff;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.ew-video-toggle:hover,
.ew-video-toggle:focus-visible {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--ink, #2b2421);
	transform: scale(1.06);
	outline: none;
}

/* Pause icon: two vertical parallel bars */
.ew-video-toggle i {
	display: inline-block;
	width: 11px;
	height: 12px;
	border-left: 3.5px solid currentColor;
	border-right: 3.5px solid currentColor;
	box-sizing: border-box;
}

/* Play icon: right-pointing triangle when paused (aria-pressed="true") */
.ew-video-toggle[aria-pressed="true"] i {
	width: 0;
	height: 0;
	border: 0;
	border-left: 12px solid currentColor;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	margin-left: 3px;
}

.ew-video-card__frame .ew-video-embed {
	width: 100%;
	height: 100%;
	display: flex;
}

.ew-video-card__frame .ew-video-embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0.85rem;
}

.ew-video-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, #2b2421 0%, #1a1513 100%);
	color: #ffffff;
	padding: 1.5rem;
	text-align: center;
}

.ew-video-placeholder__badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.3rem 0.65rem;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 9999px;
	color: #ffffff;
}

.ew-video-placeholder__play-btn {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--site-primary, #D12923);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 24px rgba(209, 41, 35, 0.4);
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
	cursor: pointer;
}

.ew-video-card:hover .ew-video-placeholder__play-btn {
	transform: scale(1.08);
	background: #b8211c;
}

.ew-video-placeholder__play-btn svg {
	margin-left: 3px;
}

.ew-video-placeholder__caption {
	margin: 1.15rem 0 0;
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.75);
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* Design Agent Product Shot Showcase */
.ew-agent-product-shot {
	margin-top: 5rem;
	padding: 0;
	display: flex;
	justify-content: center;
}

.ew-agent-product-shot__figure {
	margin: 0;
	max-width: 1020px;
	width: 100%;
	border-radius: 1.25rem;
	overflow: hidden;
	background: #0b1120;
	box-shadow: 0 20px 40px -12px rgba(11, 17, 32, 0.16), 0 6px 14px -4px rgba(11, 17, 32, 0.06);
	border: 1px solid rgba(43, 36, 33, 0.08);
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ew-agent-product-shot__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Websites Page ADA Feature Section */
.ew-ada-feature-sec {
	padding: 5.5rem 0;
	background: linear-gradient(180deg, #FFFFFF 0%, #FAF7F2 50%, #FFFFFF 100%);
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.ew-ada-feature-sec .ada-hero__title {
	font-family: var(--serif, "Fraunces", Georgia, serif);
	font-size: clamp(2rem, 3.2vw, 2.65rem);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: #2b2421;
	margin: 0 0 1.25rem;
}

.ew-ada-feature-sec .ada-hero__lead {
	font-family: var(--sans);
	font-size: 1.12rem;
	line-height: 1.6;
	color: #574e47;
	margin: 0 0 1.85rem;
	max-width: 54ch;
}

@media (max-width: 1024px) {
	.ew-split-row,
	.ew-split-row--reverse {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		margin-bottom: 4rem;
	}
	.ew-split-row--reverse .ew-split-row__content {
		order: 1;
	}
	.ew-split-row--reverse .ew-split-row__media {
		order: 2;
	}
	.ew-features__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.ew-checklist-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

@media (max-width: 640px) {
	.ew-features__grid {
		grid-template-columns: 1fr;
	}
	.ew-portfolio__grid {
		grid-template-columns: 1fr;
	}
}


/* ============================================================
   Mobile App Product Page (ma-*)
   ============================================================ */

.ma-eyebrow {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-1, #d12923);
	margin-bottom: 0.75rem;
}

.ma-hero {
	background: #fbf9f4;
	border-bottom: 1px solid rgba(43, 36, 33, 0.08);
	padding: 5rem 0 4.5rem;
}

.ma-hero__container {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 3.5rem;
	align-items: center;
}

.ma-hero__title {
	font-family: var(--serif);
	font-size: clamp(2.2rem, 3.8vw, 3.1rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--site-text-dark);
	margin: 0 0 1.25rem;
}

.ma-hero__lead {
	font-size: 18px;
	line-height: 1.6;
	color: var(--site-text-muted);
	margin: 0 0 2rem;
	max-width: 58ch;
}

.ma-hero__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Hero: a wall of real Edlio app screenshots in three staggered columns,
   with the app's alert, a class post and a chat floating lightly over its edges */
.ma-hero__visual {
	position: relative;
	padding: 2.5rem 0 3rem;
}

.ma-app-wall {
	display: grid;
	grid-template-columns: 27% 35% 27%;
	justify-content: center;
	align-content: center;
	align-items: center;
	gap: 1rem;
	padding: 0 1.5rem;
	height: 580px;
	overflow: hidden;
	border-radius: 28px;
	background: var(--sage-soft);
}

/* a mosaic: whole screens in three staggered columns with even gaps; the panel crops whatever runs past its edges */
.ma-app-wall__col {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* each column is centred in the panel, with a light stagger */
.ma-app-wall__col:nth-child(1) { transform: translateY(-2rem); }
.ma-app-wall__col:nth-child(3) { transform: translateY(2rem); }

.ma-app-wall__phone {
	flex-shrink: 0;
}

.ma-app-wall__phone--center {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 0 1px rgba(43, 36, 33, 0.12), 0 36px 60px -24px rgba(43, 36, 33, 0.5);
}

/* each screen sits in the template's slim light-silver device frame, rounded like a phone */
.ma-app-wall .ep-device {
	padding: 4px;
	border-radius: 11% / 5.2%;
}

.ma-app-wall .ep-device img {
	border-radius: 10% / 4.6%;
}

/* floating cards: small, frosted like the Payments hero card, drifting gently (still for reduced motion) */
.ma-float {
	position: absolute;
	z-index: 1;
	width: 250px;
	padding: 0.75rem;
	border-radius: 18px;
	background: rgba(255, 253, 249, 0.9);
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
	backdrop-filter: blur(18px) saturate(1.2);
	box-shadow: 0 0 0 1px var(--line), 0 24px 44px -20px rgba(43, 36, 33, 0.4);
	animation: epFloat 7s ease-in-out infinite alternate;
}

.ma-float .ma-app-card {
	padding: 0;
	background: none;
	box-shadow: none;
}

/* a diagonal flow, top left to bottom right: the alert, then the hall pass across the middle, then the chat */
.ma-float--alert { top: 1rem; left: -2.5rem; }
.ma-float--post { top: 44%; left: 24%; width: 240px; animation-delay: -2.5s; }
.ma-float--chat { bottom: 0.5rem; right: -2rem; width: 230px; animation-delay: -5s; }

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

.ma-app-card {
	background: var(--white);
	border-radius: 14px;
	padding: 0.85rem 0.9rem;
	box-shadow: 0 1px 2px rgba(43, 36, 33, 0.06), 0 6px 16px -8px rgba(43, 36, 33, 0.18);
}

/* cards with a type icon: icon on the left, text on the right */
.ma-app-card:has(.ma-app-card__icon) {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 0.7rem;
	align-items: start;
}

.ma-app-card__icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--butter-soft);
	color: var(--ink);
}

.ma-app-card__icon svg {
	width: 18px;
	height: 18px;
}

.ma-app-card--urgent .ma-app-card__icon {
	background: var(--red);
	color: var(--white);
}

.ma-app-card__tag {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--red-ink);
	margin-bottom: 4px;
}

.ma-app-card__title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
	text-wrap: balance;
}

.ma-app-card__time {
	font-size: 12px;
	color: var(--ink-2);
	margin-top: 5px;
}

/* the action under a post, as a small button */
.ma-app-card__meta {
	display: inline-block;
	margin-top: 8px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--sky-soft);
	font-size: 12px;
	font-weight: 600;
	color: var(--ink);
}

.ma-app-card--chat {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ma-chat-bubble {
	font-size: 13px;
	line-height: 1.35;
	padding: 7px 11px;
	border-radius: 14px;
	max-width: 85%;
	text-wrap: balance;
}

.ma-chat-bubble--in {
	background: var(--sky-soft);
	color: var(--ink);
	align-self: flex-start;
	border-bottom-left-radius: 4px;
}

.ma-chat-bubble--out {
	background: var(--red);
	color: var(--white);
	align-self: flex-end;
	border-bottom-right-radius: 4px;
}

/* Feature cards with an app screen on top ("Built specifically for school districts and family life."):
   the top of a framed screen peeks up from a sage panel, so each card shows what it describes */
.ma-media-card {
	padding-top: var(--ep-pad);
}

.ma-card-media {
	display: flex;
	justify-content: center;
	height: 220px;
	margin: 0 0 1.5rem;
	padding-top: 1.5rem;
	overflow: hidden;
	border-radius: 16px;
	background: var(--sage-soft);
}

.ma-card-media .ep-device {
	width: 58%;
	height: max-content;
	padding: 4px;
	border-radius: 11% / 5.2%;
}

.ma-card-media .ep-device img {
	border-radius: 10% / 4.6%;
}

/* the lock screen, with its school notification popping out past the phone's edges */
.ma-card-media--lock {
	position: relative;
}

.ma-card-media__notice {
	position: absolute;
	z-index: 1;
	top: 58%;
	left: 50%;
	width: 88%;
	height: auto;
	transform: translateX(-50%);
	filter: drop-shadow(0 10px 18px rgba(43, 36, 33, 0.22));
}

/* a photo instead of a framed screen: it fills the rounded panel */
.ma-card-media--photo {
	padding-top: 0;
}

.ma-card-media--photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* a standalone product shot: no device frame, it floats up from the panel with rounded corners and a soft shadow */
.ma-card-media--shot img {
	display: block;
	width: 64%;
	height: max-content;
	border-radius: 14px;
	box-shadow: 0 0 0 1px var(--line), 0 18px 36px -18px rgba(43, 36, 33, 0.35);
}

/* Three branded app home screens beside "Your colors. Your mascot.", laid out like the Websites carousel
   (the centre one large, the other two smaller behind it with a slight turn), without the controls */
.ma-brand-trio {
	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
	align-items: center;
	perspective: 1800px;
}

/* each screen sits in the template's slim light-silver device frame, rounded like a phone */
.ma-brand-trio .ep-device {
	padding: 4px;
	border-radius: 11% / 5.2%;
}

.ma-brand-trio .ep-device img {
	border-radius: 10% / 4.6%;
}

.ma-brand-trio__phone {
	grid-area: 1 / 1;
	width: 42%;
}

.ma-brand-trio__phone--center { position: relative; z-index: 2; }
.ma-brand-trio__phone--left { transform: translateX(-62%) scale(0.82) rotateY(10deg); filter: saturate(0.85); }
.ma-brand-trio__phone--right { transform: translateX(62%) scale(0.82) rotateY(-10deg); filter: saturate(0.85); }

@media (max-width: 1200px) {
	.ma-float--alert { left: -1rem; }
	.ma-float--chat { right: -1rem; }
}

@media (max-width: 600px) {
	.ma-app-wall { height: 460px; }
	/* phones: the floating cards go compact, so the screens show through */
	.ma-float { width: 58%; padding: 0.55rem 0.6rem; border-radius: 14px; }
	.ma-float--alert { top: 0.5rem; left: -0.5rem; }
	.ma-float--post { top: 42%; left: 20%; width: 56%; }
	.ma-float--chat { right: -0.5rem; bottom: 0; width: 52%; }
	.ma-app-card:has(.ma-app-card__icon) { grid-template-columns: 26px minmax(0, 1fr); gap: 0.5rem; }
	.ma-app-card__icon { width: 26px; height: 26px; border-radius: 8px; }
	.ma-app-card__icon svg { width: 14px; height: 14px; }
	.ma-app-card__tag { margin-bottom: 2px; letter-spacing: 0.03em; }
	.ma-app-card__title { font-size: 13px; }
	.ma-app-card__time { margin-top: 2px; }
	.ma-app-card__meta { margin-top: 5px; padding: 2px 8px; }
	.ma-chat-bubble { padding: 5px 9px; font-size: 12px; }
}



/* ==========================================================================
   Mass Communication Product Page (.mc-*)
   ========================================================================== */

.mc-hero {
	background: linear-gradient(180deg, #FAF7F2 0%, #FFFFFF 100%);
	padding: 5rem 0 4rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.mc-hero__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.95fr;
	gap: 3.5rem;
	align-items: center;
}

.mc-breadcrumbs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: #666;
	margin-bottom: 1.25rem;
}

.mc-breadcrumbs a {
	color: #444;
	text-decoration: none;
}

.mc-breadcrumbs a:hover {
	color: var(--color-1, #D12923);
}

.mc-eyebrow {
	display: inline-block;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-1, #D12923);
	margin-bottom: 0.75rem;
}

.mc-hero__title {
	font-family: 'Fraunces', serif;
	font-size: clamp(2.2rem, 4.2vw, 3.4rem);
	font-weight: 500;
	line-height: 1.15;
	color: #111;
	letter-spacing: -0.02em;
	margin: 0 0 1.25rem;
}

.mc-hero__lead {
	font-size: 1.15rem;
	line-height: 1.6;
	color: #4A4A4A;
	margin-bottom: 2rem;
	max-width: 54ch;
}

.mc-hero__actions {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;
}

.mc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.75rem;
	border-radius: 9999px;
	font-family: 'Instrument Sans', sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: all 0.2s ease;
}

.mc-btn--primary {
	background: var(--color-1, #D12923);
	color: #FFF !important;
	box-shadow: 0 4px 14px rgba(209, 41, 35, 0.25);
}

.mc-btn--primary:hover {
	background: #B5221D;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(209, 41, 35, 0.35);
}

.mc-btn--secondary {
	background: #FFF;
	color: #222 !important;
	border: 1px solid rgba(0, 0, 0, 0.15);
}

.mc-btn--secondary:hover {
	border-color: #222;
	background: #F9F9F9;
}

.mc-btn--ghost {
	background: transparent;
	color: #FFF !important;
	border: 1px solid rgba(255, 255, 255, 0.4);
}

.mc-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: #FFF;
}

/* Broadcast Card Mockup */
/* Hero: a "Create Message" card and, larger, the app's message summary on a phone,
   both centred on one line; the card slightly overlays the phone's left edge */
.mc-hero__visual {
	display: grid;
	align-items: center;
	padding: 1rem 0 2rem;
}

.mc-compose,
.mc-hero__phone {
	grid-area: 1 / 1;
}

.mc-compose {
	position: relative;
	z-index: 2;
	justify-self: start;
	width: 58%;
	padding: 1.1rem 1.2rem 1.25rem;
	border-radius: 18px;
	background: var(--white);
	box-shadow: 0 0 0 1px var(--line), 0 28px 56px -28px rgba(43, 36, 33, 0.4);
}

.mc-compose__title {
	margin: 0 0 0.75rem;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
}

.mc-compose__grid {
	display: grid;
	gap: 0.75rem;
}

.mc-compose__msg {
	margin: 0 0 0.75rem;
	padding: 0.6rem 0.75rem;
	border-radius: 11px;
	background: var(--cream);
	box-shadow: inset 0 0 0 1px var(--line);
	font-size: 13px;
	line-height: 1.4;
	color: var(--ink);
}

.mc-compose__msg strong {
	font-weight: 600;
}

.mc-compose__label {
	margin: 0 0 0.35rem;
	font-size: 12px;
	font-weight: 600;
	color: var(--ink);
}

.mc-compose__list {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: var(--ink);
}

.mc-compose__list li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-wrap: balance;
}

.mc-compose__check {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border-radius: 5px;
	background: var(--sage-soft);
	color: var(--success);
}

.mc-compose__check svg {
	width: 11px;
	height: 11px;
}

.mc-compose__check--off {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px rgba(43, 36, 33, 0.3);
}

.mc-compose__list--channels {
	grid-template-columns: 1fr 1fr;
	gap: 0.35rem 0.6rem;
}

.mc-compose__side {
	display: grid;
	gap: 0.75rem;
	padding-top: 0.7rem;
	border-top: 1px solid var(--line);
}

.mc-compose__send {
	justify-self: start;
	width: max-content;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--red);
	color: var(--white);
	font-size: 13px;
	font-weight: 600;
}

/* small status badge (the language card's "Automatic") */
.mc-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.mc-badge--success {
	background: var(--success);
	color: var(--white);
}

/* the app's message summary screen, in the template's slim light-silver device frame */
.mc-hero__phone {
	position: relative;
	z-index: 1;
	justify-self: end;
	width: 47%;
	padding: 4px;
	border-radius: 11% / 5.2%;
}

.mc-hero__phone img {
	border-radius: 10% / 4.6%;
}


@media (max-width: 600px) {
	/* phones: the phone first, centred and large; the compact card floats over its lower-left corner */
	.mc-hero__visual { padding: 0 0 6rem; }
	.mc-hero__phone { justify-self: end; width: 74%; }
	.mc-compose { align-self: end; width: 70%; margin-bottom: -6rem; padding: 0.85rem 0.9rem 0.95rem; border-radius: 16px; }
	.mc-compose__title { margin-bottom: 0.55rem; }
	.mc-compose__msg { margin-bottom: 0.55rem; padding: 0.5rem 0.65rem; }
	.mc-compose__grid { gap: 0.55rem; }
	.mc-compose__list { gap: 0.25rem; }
	.mc-compose__side { gap: 0.55rem; padding-top: 0.55rem; }
	.mc-compose__send { padding: 6px 14px; font-size: 12px; }
}

/* Section Common Header */
.mc-section-header {
	text-align: center;
	max-width: 65ch;
	margin: 0 auto 3.5rem;
}

.mc-section-title {
	font-family: 'Fraunces', serif;
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	font-weight: 500;
	color: #111;
	line-height: 1.2;
	margin: 0.5rem 0 1rem;
	letter-spacing: -0.01em;
}

.mc-section-desc {
	font-size: 1.1rem;
	line-height: 1.55;
	color: #555;
	margin: 0;
}

/* 3-Pillar Section */
.mc-pillars {
	padding: 5rem 0;
	background: #FFF;
}

.mc-pillars__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.mc-pillar-card {
	background: #FAF8F5;
	border-radius: 16px;
	padding: 2.25rem 2rem;
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.mc-pillar-card__icon {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: #FFF;
	color: var(--color-1, #D12923);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.mc-pillar-card__title {
	font-family: 'Fraunces', serif;
	font-size: 1.4rem;
	font-weight: 500;
	color: #111;
	margin: 0 0 0.85rem;
}

.mc-pillar-card__text {
	font-size: 0.98rem;
	line-height: 1.55;
	color: #555;
	margin: 0;
}

/* Split Deep-Dive Section */
.mc-split {
	padding: 5.5rem 0;
	background: #FFF;
}

.mc-split--alt {
	background: #FAF7F2;
}

.mc-split__grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 4.5rem;
	align-items: center;
}

.mc-split__grid--reverse {
	grid-template-columns: 1.05fr 1fr;
}

.mc-split__title {
	font-family: 'Fraunces', serif;
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	font-weight: 500;
	color: #111;
	line-height: 1.2;
	margin: 0.5rem 0 1.25rem;
	letter-spacing: -0.01em;
}

.mc-split__text {
	font-size: 1.08rem;
	line-height: 1.6;
	color: #4A4A4A;
	margin: 0 0 1.75rem;
}

.mc-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.mc-checklist li {
	position: relative;
	padding-left: 1.75rem;
	font-size: 0.96rem;
	line-height: 1.5;
	color: #444;
}

.mc-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--color-1, #D12923);
	font-weight: 800;
	font-size: 1.1rem;
}

/* Deliverability Mockup Card */
.mc-deliver-card,
.mc-translate-card {
	padding: 1.5rem;
	border-radius: 20px;
	background: var(--white);
	box-shadow: 0 1px 2px rgba(43, 36, 33, 0.06), 0 24px 48px -24px rgba(43, 36, 33, 0.28);
}

/* Delivery card, drawn like Edlio's own reporting screens: a reach ring and a total tile, then a bar per channel */
.mc-deliver-card__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.mc-deliver-card__top h3 {
	margin: 0;
	font-family: var(--serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--ink);
}

.mc-deliver-tag {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--cream);
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-2);
	white-space: nowrap;
}

.mc-deliver-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

/* each figure in its own tile */
.mc-deliver-stat {
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 0.35rem;
	padding: 1rem 0.75rem;
	border-radius: 16px;
	background: var(--cream);
	text-align: center;
}

.mc-deliver-stat__num {
	font-family: var(--sans);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1;
	color: var(--ink);
}

/* the delivered share as a ring, like the reach rings in the app */
.mc-deliver-stat--ring .mc-deliver-stat__num {
	display: grid;
	place-items: center;
	width: 104px;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle closest-side, var(--cream) 76%, transparent 77%),
		conic-gradient(var(--success) var(--pct), var(--line) 0);
	font-size: 1.35rem;
}

.mc-deliver-stat__label {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink-2);
}

/* one bar per channel: delivered as a share of all recipients */
.mc-deliver-breakdown {
	display: grid;
	gap: 0.85rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.mc-deliver-breakdown li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.35rem 1rem;
	color: var(--ink-2);
}

.mc-deliver-breakdown li::after {
	content: "";
	flex-basis: 100%;
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--success) var(--share), var(--sage-soft) 0);
}

.mc-deliver-breakdown li strong {
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
}

.mc-translate-card__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
	font-family: var(--serif);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--ink);
}

.mc-translate-preview {
	display: grid;
	gap: 0.6rem;
	margin-bottom: 1rem;
}

.mc-lang-row {
	padding: 0.8rem 1rem;
	border-radius: 14px;
	background: var(--cream);
}

.mc-lang-pill {
	display: inline-block;
	margin-bottom: 0.35rem;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--sky-soft);
	font-size: 12px;
	font-weight: 600;
	color: var(--ink);
}

.mc-lang-row p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink);
}

.mc-sis-badge {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 0.85rem;
	border-radius: 12px;
	background: var(--sage-soft);
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
}

.mc-sis-badge svg {
	flex-shrink: 0;
	color: var(--success);
}

/* Bottom CTA Banner */
.mc-cta {
	padding: 3rem 0 6rem;
	background: #FAF7F2;
}

.mc-cta__box {
	background: var(--color-1, #D12923);
	color: #FFF;
	border-radius: 24px;
	padding: 4.5rem 3rem;
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.15);
}

.mc-cta__eyebrow {
	display: inline-block;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 0.75rem;
}

.mc-cta__title {
	font-family: 'Fraunces', serif;
	font-size: clamp(2rem, 3.4vw, 2.85rem);
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 1rem;
	color: #FFF;
}

.mc-cta__desc {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 0.75);
	max-width: 52ch;
	margin: 0 auto 2.25rem;
	line-height: 1.55;
}

.mc-cta__actions {
	display: flex;
	gap: 1.5rem;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

/* Responsive Rules */
@media (max-width: 991px) {
	.mc-hero__grid,
	.mc-split__grid,
	.mc-split__grid--reverse {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.mc-pillars__grid {
		grid-template-columns: 1fr;
	}

	.mc-split__visual {
		order: -1;
	}

	.mc-cta__box {
		padding: 3rem 1.5rem;
	}
}

/* ==========================================================================
   School ADA Compliance Product Page (.ada-*)
   ========================================================================== */

.ada-hero {
	background: linear-gradient(180deg, #FAF7F2 0%, #FFFFFF 100%);
	padding: 5rem 0 4rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ada-hero__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.95fr;
	gap: 3.5rem;
	align-items: center;
}

.ada-breadcrumbs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: #666;
	margin-bottom: 1.25rem;
}

.ada-breadcrumbs a {
	color: #444;
	text-decoration: none;
}

.ada-breadcrumbs a:hover {
	color: var(--color-1, #D12923);
}

.ada-eyebrow {
	display: inline-block;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-1, #D12923);
	margin-bottom: 0.75rem;
}

.ada-hero__title {
	font-family: 'Fraunces', serif;
	font-size: clamp(2.2rem, 4.2vw, 3.4rem);
	font-weight: 500;
	line-height: 1.15;
	color: #111;
	letter-spacing: -0.02em;
	margin: 0 0 1.25rem;
}

.ada-hero__lead {
	font-size: 1.15rem;
	line-height: 1.6;
	color: #4A4A4A;
	margin-bottom: 2rem;
	max-width: 54ch;
}

.ada-hero__actions {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;
}

.ada-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.75rem;
	border-radius: 9999px;
	font-family: 'Instrument Sans', sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: all 0.2s ease;
}

.ada-btn--primary {
	background: var(--color-1, #D12923);
	color: #FFF !important;
	box-shadow: 0 4px 14px rgba(209, 41, 35, 0.25);
}

.ada-btn--primary:hover {
	background: #B5221D;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(209, 41, 35, 0.35);
}

.ada-btn--secondary {
	background: #FFF;
	color: #222 !important;
	border: 1px solid rgba(0, 0, 0, 0.15);
}

.ada-btn--secondary:hover {
	border-color: #222;
	background: #F9F9F9;
}

.ada-btn--ghost {
	background: transparent;
	color: #FFF !important;
	border: 1px solid rgba(255, 255, 255, 0.4);
}

.ada-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: #FFF;
}

/* Audit Card Mockup */
.ada-audit-card {
	position: relative;
	z-index: 1;
	width: min(100%, 440px);
	overflow: hidden;
	border-radius: 22px;
	background: var(--white);
	box-shadow: 0 0 0 1px var(--line), 0 32px 64px -28px rgba(43, 36, 33, 0.45), 0 2px 6px rgba(43, 36, 33, 0.08);
}

.ada-audit-card__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1.25rem;
	background: var(--ink);
	color: var(--white);
}

.ada-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.ada-badge--live {
	background: var(--success);
	color: var(--white);
}

.ada-audit-card__score {
	font-size: 13px;
	font-weight: 600;
	color: var(--sage);
}

.ada-audit-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding: 1.1rem 1.25rem;
}

.ada-scan-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 0.75rem;
	align-items: center;
	padding: 0.75rem 0.85rem;
	border-radius: 14px;
	background: var(--cream);
}

.ada-scan-item__icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--sage-soft);
	color: var(--success);
}

.ada-scan-item__details strong {
	display: block;
	margin-bottom: 0.15rem;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}

.ada-scan-item__details p {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--ink-2);
}

.ada-scan-tag {
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--sky-soft);
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
}

.ada-audit-card__footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.3rem 0.75rem;
	padding: 0.75rem 1.25rem;
	border-top: 1px solid var(--line);
	background: var(--cream);
	font-size: 13px;
	color: var(--ink-2);
}

.ada-audit-card__footer strong {
	font-weight: 600;
	color: var(--success);
}

@media (max-width: 600px) {
	.ada-scan-item { grid-template-columns: auto minmax(0, 1fr); }
	.ada-scan-tag { grid-column: 2; justify-self: start; }
}

/* Common Section Headers */
.ada-section-header {
	text-align: center;
	max-width: 65ch;
	margin: 0 auto 3.5rem;
}

.ada-section-title {
	font-family: 'Fraunces', serif;
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	font-weight: 500;
	color: #111;
	line-height: 1.2;
	margin: 0.5rem 0 1rem;
	letter-spacing: -0.01em;
}

.ada-section-desc {
	font-size: 1.1rem;
	line-height: 1.55;
	color: #555;
	margin: 0;
}

/* Urgency / Mandate Grid */
.ada-urgency {
	padding: 5rem 0;
	background: #FFF;
}

.ada-urgency__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.ada-urgency-card {
	background: #FAF8F5;
	border-radius: 16px;
	padding: 2.25rem 2rem;
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.ada-urgency-card--highlight {
	background: #FFF8F7;
	border-color: rgba(209, 41, 35, 0.25);
}

.ada-urgency-card__num {
	margin: 0 0 0.75rem;
	font-family: var(--serif);
	font-size: clamp(1.75rem, 2.4vw, 2.1rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--red-ink);
}

.ada-urgency-card__title {
	font-family: 'Fraunces', serif;
	font-size: 1.35rem;
	font-weight: 500;
	color: #111;
	margin: 0 0 0.85rem;
}

.ada-urgency-card__text {
	font-size: 0.98rem;
	line-height: 1.55;
	color: #555;
	margin: 0;
}

/* 6-Point Capabilities Grid */
.ada-capabilities {
	padding: 5.5rem 0;
	background: #FAF7F2;
}

.ada-caps__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

.ada-cap-card {
	background: #FFF;
	border-radius: 14px;
	padding: 2rem;
	border: 1px solid rgba(0, 0, 0, 0.06);
}

.ada-cap-card--accent {
	background: #F0FDF4;
	border-color: #BBF7D0;
}

.ada-cap-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	background: #FAF8F5;
	color: var(--color-1, #D12923);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
}

.ada-cap-card--accent .ada-cap-card__icon {
	background: #DCFCE7;
	color: #15803D;
}

.ada-cap-card__title {
	font-family: 'Fraunces', serif;
	font-size: 1.25rem;
	font-weight: 500;
	color: #111;
	margin: 0 0 0.65rem;
}

.ada-cap-card__text {
	font-size: 0.92rem;
	line-height: 1.55;
	color: #555;
	margin: 0;
}

/* Testimonial Spotlight */
.ada-testimonial {
	padding: 5.5rem 0;
	background: #FFF;
}

.ada-quote-card {
	max-width: 860px;
	margin: 0 auto;
	background: #FAF8F5;
	border-left: 4px solid var(--color-1, #D12923);
	border-radius: 0 20px 20px 0;
	padding: 3rem 3.5rem;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.04);
}

.ada-quote-card__badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-1, #D12923);
	margin-bottom: 1rem;
}

.ada-quote-card__quote {
	font-family: 'Fraunces', serif;
	font-size: clamp(1.15rem, 1.8vw, 1.35rem);
	line-height: 1.6;
	color: #222;
	margin: 0 0 2rem;
	font-style: normal;
}

.ada-quote-card__author {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* the founder's note: the template section intro with a signature under it */


.ada-quote-card__author strong {
	display: block;
	font-size: 0.95rem;
	color: #111;
}

.ada-quote-card__author span {
	font-size: 0.82rem;
	color: #666;
}

/* Founder's Perspective */
.ada-mission {
	padding: 3rem 0 5rem;
	background: #FFF;
}

.ada-mission__box {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
	padding: 3.5rem 2.5rem;
	background: #FAF7F2;
	border-radius: 20px;
}

.ada-mission__title {
	font-family: 'Fraunces', serif;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	font-weight: 500;
	line-height: 1.25;
	color: #111;
	margin: 0.75rem 0 1.25rem;
	letter-spacing: -0.01em;
}

.ada-mission__text {
	font-size: 1.05rem;
	line-height: 1.6;
	color: #4A4A4A;
	max-width: 62ch;
	margin: 0 auto 1.75rem;
}

.ada-mission__sig strong {
	display: block;
	font-size: 0.95rem;
	color: #111;
}

.ada-mission__sig span {
	font-size: 0.82rem;
	color: #666;
}

/* Bottom CTA Banner */
.ada-cta {
	padding: 3rem 0 6rem;
	background: #FAF7F2;
}

.ada-cta__box {
	background: var(--color-1, #D12923);
	color: #FFF;
	border-radius: 24px;
	padding: 4.5rem 3rem;
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.15);
}

.ada-cta__eyebrow {
	display: inline-block;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 0.75rem;
}

.ada-cta__title {
	font-family: 'Fraunces', serif;
	font-size: clamp(2rem, 3.4vw, 2.85rem);
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 1rem;
	color: #FFF;
}

.ada-cta__desc {
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 0.75);
	max-width: 52ch;
	margin: 0 auto 2.25rem;
	line-height: 1.55;
}

.ada-cta__actions {
	display: flex;
	gap: 1.5rem;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

/* Responsive Rules */
@media (max-width: 991px) {
	.ada-hero__grid {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.ada-urgency__grid,
	.ada-caps__grid {
		grid-template-columns: 1fr;
	}

	.ada-quote-card {
		padding: 2rem 1.5rem;
	}

	.ada-cta__box {
		padding: 3rem 1.5rem;
	}
}

/* ==========================================================================
   Accessible Documents Product Page (.doc-*)
   ========================================================================== */

.doc-hero {
	background: linear-gradient(180deg, #FAF7F2 0%, #FFFFFF 100%);
	padding: 5rem 0 4rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.doc-hero__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.95fr;
	gap: 3.5rem;
	align-items: center;
}

.doc-hero__title {
	font-family: 'Fraunces', serif;
	font-size: clamp(2.2rem, 4.2vw, 3.4rem);
	font-weight: 500;
	line-height: 1.15;
	color: #111;
	letter-spacing: -0.02em;
	margin: 0 0 1.25rem;
}

.doc-hero__lead {
	font-size: 1.15rem;
	line-height: 1.6;
	color: #4A4A4A;
	margin-bottom: 2rem;
	max-width: 52ch;
}

.doc-hero__actions {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;
}

.doc-preview-card {
	background: #FFF;
	border-radius: 20px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

.doc-preview-card__header {
	background: #1E293B;
	padding: 1rem 1.5rem;
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.doc-tag {
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.25rem 0.65rem;
	border-radius: 4px;
	letter-spacing: 0.03em;
}

.doc-tag--html {
	background: #059669;
	color: #FFF;
}

.doc-tag--pdf {
	background: rgba(255, 255, 255, 0.15);
	color: #DDD;
}

.doc-preview-card__body {
	padding: 1.75rem 1.5rem;
}

.doc-file-info {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: #FAF8F5;
	padding: 1rem;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.04);
	margin-bottom: 1.25rem;
}

.doc-file-info__icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: #FEE2E2;
	color: #DC2626;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.doc-file-info strong {
	display: block;
	font-size: 0.92rem;
	color: #111;
	margin-bottom: 0.15rem;
}

.doc-file-info span {
	font-size: 0.78rem;
	color: #666;
}

.doc-chat-snippet {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.doc-chat-snippet__bubble {
	padding: 0.85rem 1rem;
	border-radius: 12px;
	font-size: 0.85rem;
	line-height: 1.45;
}

.doc-chat-snippet__bubble.user {
	align-self: flex-end;
	background: #E0F2FE;
	color: #0369A1;
	max-width: 85%;
	border-bottom-right-radius: 2px;
}

.doc-chat-snippet__bubble.ai {
	align-self: flex-start;
	background: #F3F4F6;
	color: #374151;
	max-width: 90%;
	border-bottom-left-radius: 2px;
	border-left: 3px solid #059669;
}

.doc-chat-snippet__bubble.ai strong {
	display: block;
	color: #111;
	margin-bottom: 0.25rem;
	font-size: 0.82rem;
}

.doc-preview-card__footer {
	background: #F9FAFB;
	padding: 0.85rem 1.5rem;
	border-top: 1px solid #E5E7EB;
	font-size: 0.8rem;
	color: #059669;
	font-weight: 600;
}

.doc-badge-status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

/* Two pillar cards (template cards), each with a soft tag and a ticked list */
.doc-pillars {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 991px) {
	.doc-pillars {
		grid-template-columns: 1fr;
	}
}

.doc-pillar__tag {
	display: inline-block;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ink);
	background: var(--sky-soft);
	border-radius: 999px;
	padding: 0.35rem 0.85rem;
	margin-bottom: 1.25rem;
}

.doc-pillar__tag--sage {
	background: var(--sage-soft);
}

.doc-pillar .ep-card__title {
	font-size: clamp(1.45rem, 1rem + 1vw, 1.75rem);
}

.doc-pillar__list {
	margin-top: 1.75rem;
}

.doc-pillar__list li {
	font-size: 15px;
	color: var(--ink-2);
}

.doc-pillar__list strong {
	font-weight: 600;
	color: var(--ink);
}

/* Deployment: a large photo panel (as big as the homepage hero frame) with the text and the Remediate PDFs screen over it */
.doc-stage {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 580px);
	gap: clamp(2rem, 1rem + 3vw, 4rem);
	align-items: center;
	min-height: 680px;
	padding: clamp(2rem, 1rem + 4vw, 4.5rem);
	border-radius: 28px;
	overflow: hidden;
	background: var(--ink);
}

.doc-stage__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-width: 100%; /* the CMS page styles force images to their natural height; the minimums keep the photo filling the panel */
	min-height: 100%;
	object-fit: cover;
}

/* a dark wash on the text side, so the white text keeps AA contrast */
.doc-stage::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(28, 22, 20, 0.88) 0%, rgba(28, 22, 20, 0.72) 45%, rgba(28, 22, 20, 0.2) 100%);
}

.doc-stage__content,
.doc-stage__demo {
	position: relative;
	z-index: 1;
}

.doc-stage .ep-split-row__title,
.doc-stage .ep-split-row__lead {
	color: var(--white);
}

@media (max-width: 991px) {
	.doc-stage {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.doc-stage::after {
		background: linear-gradient(180deg, rgba(28, 22, 20, 0.88) 0%, rgba(28, 22, 20, 0.72) 40%, rgba(28, 22, 20, 0.35) 100%);
	}
}

@media (max-width: 600px) {
	.doc-stage {
		padding: 2rem 1rem 1rem;
		border-radius: 22px;
	}
}

/* The Remediate PDFs review screen, recreated from the product (its own blue and green, kept close to the app) */
.doc-app {
	font-family: var(--sans);
	color: #1f2937;
	background: var(--white);
	border-radius: 18px;
	padding: 14px 16px 16px;
	box-shadow: 0 30px 60px -30px rgba(28, 22, 20, 0.6);
}

.doc-app__crumbs {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #6b7280;
	padding-bottom: 10px;
	border-bottom: 1px solid #eef0f3;
}

.doc-app__crumbs i {
	font-family: var(--sans);
	font-style: normal;
}

.doc-app__crumbs b {
	font-weight: 500;
	color: #1f2937;
}

.doc-app__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px 0 10px;
}

.doc-app__tile {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: #e6f7f3;
	color: #0f9b84;
}

.doc-app__tile svg,
.doc-app__fileicon svg {
	width: 18px;
	height: 18px;
}

.doc-app__heading {
	display: flex;
	flex-direction: column;
	min-width: 0;
	font-size: 12px;
	line-height: 1.35;
	color: #6b7280;
}

.doc-app__heading b {
	font-size: 16px;
	font-weight: 600;
	color: #111827;
}

.doc-app__feedback {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	flex: none;
	font-size: 12px;
	font-weight: 500;
	color: #111827;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 5px 8px;
}

.doc-app__feedback svg {
	width: 13px;
	height: 13px;
}

.doc-app__steps {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font-size: 12px;
	color: #6b7280;
}

.doc-app__steps span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.doc-app__steps span + span::before {
	content: "";
	width: 22px;
	height: 1px;
	margin-right: 3px;
	background: #e5e7eb;
}

.doc-app__steps i {
	display: grid;
	font-family: var(--sans);
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-style: normal;
	background: #eef0f3;
	color: #4b5563;
}

.doc-app__steps .is-on {
	color: #2563eb;
}

.doc-app__steps .is-on i {
	background: #2563eb;
	color: #fff;
}

.doc-app__panel {
	border: 1px solid #eef0f3;
	border-radius: 10px;
	padding: 10px;
}

.doc-app__file {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 9px;
	font-size: 12px;
}

.doc-app__fileicon {
	flex: none;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background: #e6f7f3;
	color: #0f9b84;
}

.doc-app__fileicon svg {
	width: 14px;
	height: 14px;
}

.doc-app__file b {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	color: #111827;
}

.doc-app__count {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	flex: none;
	color: #6b7280;
}

.doc-app__count i {
	display: grid;
	place-items: center;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #2563eb;
	color: #fff;
}

.doc-app__count svg {
	width: 10px;
	height: 10px;
}

.doc-app__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 8px;
}

.doc-app__checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.doc-app__checks li {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	line-height: 1.2;
	color: #111827;
	border: 1px solid #eef0f3;
	border-radius: 7px;
	padding: 5px 7px;
}

.doc-app__checks li::before {
	content: "›";
	color: #9ca3af;
}

.doc-app__checks em {
	margin-left: auto;
	font-family: var(--sans); /* never the headline serif, even though <em> picks it up elsewhere */
	font-style: normal;
	white-space: nowrap;
	font-weight: 500;
	color: #15803d;
	background: #dcfce7;
	border-radius: 999px;
	padding: 2px 7px;
}

.doc-app__checks em::before {
	content: "✓";
	margin-right: 3px;
}

.doc-app__checks .doc-app__done {
	color: #15803d;
	background: #f0fdf4;
	border-color: #bbf7d0;
}

.doc-app__checks .doc-app__done::before {
	content: "✓";
	color: #15803d;
}

.doc-app__preview {
	border: 1px solid #eef0f3;
	border-radius: 8px;
	padding: 6px;
	min-width: 0;
	overflow: hidden;
}

.doc-app__pager {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #6b7280;
	margin-bottom: 6px;
}

.doc-app__pager b {
	font-weight: 400;
}

.doc-app__pager span {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border: 1px solid #e5e7eb;
	border-radius: 5px;
	color: #111827;
}

.doc-app__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 6px;
}

.doc-app__legend span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	white-space: nowrap;
	color: #374151;
	border: 1px solid #eef0f3;
	border-radius: 999px;
	padding: 1px 6px;
}

.doc-app__legend span::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
}

.doc-app__legend .c-img::before { color: #a855f7; }
.doc-app__legend .c-link::before { color: #3b82f6; }
.doc-app__legend .c-head::before { color: #10b981; }
.doc-app__legend .c-table::before { color: #f59e0b; }

.doc-app__page {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #111827;
}

@media (max-width: 600px) {
	.doc-app {
		padding: 12px;
	}
	.doc-app__feedback,
	.doc-app__count,
	.doc-app__legend {
		display: none;
	}
	.doc-app__grid {
		grid-template-columns: 1fr;
	}
	.doc-app__page {
		max-width: 220px;
		margin: 0 auto;
	}
}

/* Deployment pills under the intro, on the photo panel */
.doc-deploy__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.doc-deploy-pill {
	display: inline-block;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ink);
	background: var(--white);
	border-radius: 999px;
	padding: 0.55rem 1.1rem;
}

/* ==========================================================================
   Edlio Agents Product Page (.agent-*)
   ========================================================================== */

.agent-hero {
	background: linear-gradient(180deg, #FAF7F2 0%, #FFFFFF 100%);
	padding: 5rem 0 4rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.agent-hero__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.95fr;
	gap: 3.5rem;
	align-items: center;
}

.agent-hero__title {
	font-family: 'Fraunces', serif;
	font-size: clamp(2.2rem, 4.2vw, 3.4rem);
	font-weight: 500;
	line-height: 1.15;
	color: #111;
	letter-spacing: -0.02em;
	margin: 0 0 1.25rem;
}

.agent-hero__lead {
	font-size: 1.15rem;
	line-height: 1.6;
	color: #4A4A4A;
	margin-bottom: 2rem;
	max-width: 52ch;
}

.agent-hero__actions {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;
}

/* Interactive Terminal Visual */
.agent-terminal {
	background: #111827;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	color: #FFF;
	font-family: 'Instrument Sans', sans-serif;
}

.agent-terminal__header {
	background: #101114;
	padding: 0.85rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.agent-terminal__dots {
	display: flex;
	gap: 6px;
}

.agent-terminal__dots span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #444;
}

.agent-terminal__dots span:nth-child(1) { background: #EF4444; }
.agent-terminal__dots span:nth-child(2) { background: #F59E0B; }
.agent-terminal__dots span:nth-child(3) { background: #10B981; }

.agent-terminal__title {
	font-size: 0.78rem;
	color: #888;
	flex-grow: 1;
	margin-left: 0.5rem;
}

.agent-terminal__status {
	font-size: 0.72rem;
	font-weight: 700;
	color: #10B981;
	background: rgba(16, 185, 129, 0.15);
	padding: 0.2rem 0.5rem;
	border-radius: 4px;
	text-transform: uppercase;
}

.agent-terminal__body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.agent-msg {
	font-size: 0.88rem;
	line-height: 1.5;
}

.agent-msg.user {
	background: rgba(255, 255, 255, 0.04);
	padding: 0.85rem 1rem;
	border-radius: 10px;
	border-left: 3px solid #3B82F6;
}

.agent-msg.agent {
	background: rgba(255, 255, 255, 0.02);
	padding: 0.85rem 1rem;
	border-radius: 10px;
	border-left: 3px solid #10B981;
}

.agent-msg__author {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	color: #93CBFB;
	margin-bottom: 0.35rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.agent-msg.agent .agent-msg__author {
	color: #6EE7B7;
}

.agent-checklist {
	list-style: none;
	padding: 0;
	margin: 0.75rem 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-size: 0.82rem;
	color: #BBB;
}

.agent-checklist li.done::before {
	content: "✓ ";
	color: #10B981;
	font-weight: 700;
}

.agent-terminal__footer {
	background: #101114;
	padding: 0.75rem 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.78rem;
	color: #777;
}

.agent-terminal__link {
	color: #93CBFB;
	text-decoration: none;
	font-weight: 600;
}

.agent-terminal__link:hover {
	text-decoration: underline;
}

/* Agent Architecture & Differences */
.agent-overview {
	padding: 5.5rem 0;
	background: #FFF;
}

.agent-diff__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.agent-diff-card {
	background: #FAF8F5;
	border-radius: 16px;
	padding: 2.25rem 2rem;
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.agent-diff-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: #FFF;
	color: var(--color-1, #D12923);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
	margin-bottom: 1.25rem;
}

.agent-diff-card__title {
	font-family: 'Fraunces', serif;
	font-size: 1.35rem;
	font-weight: 500;
	color: #111;
	margin: 0 0 0.85rem;
}

.agent-diff-card__text {
	font-size: 0.95rem;
	line-height: 1.55;
	color: #555;
	margin: 0;
}

/* Design Agent Spotlight */
.agent-spotlight {
	padding: 5.5rem 0;
	background: #FAF7F2;
}

.agent-spotlight__box {
	background: #FFF;
	border-radius: 24px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	padding: 4rem 3.5rem;
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 3.5rem;
	align-items: center;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
}

.agent-spotlight__title {
	font-family: 'Fraunces', serif;
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	font-weight: 500;
	color: #111;
	margin: 0.5rem 0 1rem;
	line-height: 1.2;
}

.agent-spotlight__lead {
	font-size: 1.1rem;
	line-height: 1.6;
	color: #4A4A4A;
	margin-bottom: 2rem;
}

.agent-features {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.agent-features li {
	font-size: 0.95rem;
	line-height: 1.5;
	color: #555;
}

.agent-features strong {
	display: block;
	color: #111;
	font-size: 1rem;
	margin-bottom: 0.2rem;
}

/* Mockup preview */
.agent-phone-mockup {
	background: #111827;
	border-radius: 24px;
	padding: 12px;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
	max-width: 320px;
	margin: 0 auto;
}

.agent-phone-mockup__screen {
	background: #FAF8F5;
	border-radius: 16px;
	padding: 1.5rem 1rem;
	min-height: 380px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.agent-mockup-badge {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #059669;
	background: #DCFCE7;
	padding: 0.2rem 0.5rem;
	border-radius: 4px;
	align-self: flex-start;
}

.agent-mockup-header {
	height: 32px;
	background: #002B49;
	border-radius: 6px;
}

.agent-mockup-hero {
	background: #FFF;
	border-radius: 10px;
	padding: 1.25rem 1rem;
	border: 1px solid rgba(0, 0, 0, 0.05);
	text-align: center;
}

.agent-mockup-hero strong {
	display: block;
	font-family: 'Fraunces', serif;
	font-size: 1.15rem;
	color: #002B49;
}

.agent-mockup-hero p {
	font-size: 0.8rem;
	color: #666;
	margin: 0.35rem 0 0;
}

.agent-mockup-cards {
	display: flex;
	gap: 0.5rem;
}

.agent-mockup-cards span {
	flex: 1;
	height: 60px;
	background: #FFF;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.05);
}

@media (max-width: 991px) {
	.doc-hero__grid,
	.doc-dual__grid,
	.doc-deploy__box,
	.agent-hero__grid,
	.agent-diff__grid,
	.agent-spotlight__box {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

/* ==========================================================================
   Edlio Chatbot Module (.agent-chatbot-*)
   ========================================================================== */

.agent-chatbot {
	padding: 5.5rem 0;
	background: #FFFFFF;
}

.agent-chatbot__box {
	background: #FAF6EF;
	border-radius: 2rem;
	padding: 4rem 3.5rem;
	border: 1px solid rgba(0, 0, 0, 0.06);
}

.agent-chatbot__header {
	max-width: 780px;
	margin-bottom: 3.5rem;
}

.agent-chatbot__title {
	font-family: var(--serif, "Fraunces", serif);
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	line-height: 1.15;
	color: #1F2937;
	margin: 0.75rem 0 1.25rem;
	letter-spacing: -0.015em;
}

.agent-chatbot__lead {
	font-size: 1.125rem;
	line-height: 1.6;
	color: #4B5563;
}

.agent-chatbot__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
}

.agent-chatbot__col {
	background: #FFFFFF;
	border-radius: 1.25rem;
	padding: 2.25rem;
	border: 1px solid rgba(0, 0, 0, 0.05);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.agent-chatbot__audience {
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	padding-bottom: 1.25rem;
}

.agent-chatbot__tag {
	display: inline-block;
	background: rgba(209, 41, 35, 0.08);
	color: var(--color-1, #D12923);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.35rem 0.85rem;
	border-radius: 9999px;
	margin-bottom: 0.5rem;
}

.agent-chatbot__subheading {
	font-family: var(--serif, "Fraunces", serif);
	font-size: 1.35rem;
	color: #1F2937;
	margin: 0;
}

.agent-chatbot__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1.35rem;
}

.agent-chatbot__list li {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.agent-chatbot__list li svg {
	flex-shrink: 0;
	color: var(--color-1, #D12923);
	margin-top: 0.2rem;
}

.agent-chatbot__list li strong {
	display: block;
	font-size: 1rem;
	color: #1F2937;
	margin-bottom: 0.2rem;
}

.agent-chatbot__list li p {
	font-size: 0.9375rem;
	color: #6B7280;
	line-height: 1.45;
	margin: 0;
}

@media (max-width: 860px) {
	.agent-chatbot__box {
		padding: 2.5rem 1.75rem;
	}
	.agent-chatbot__grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}


/* ==========================================================================
   Our Story Page Styles (.os-*)
   ========================================================================== */

.os-page {
	background: #ffffff;
	color: var(--ink, #1F2937);
	min-height: 100vh;
}

.os-hero {
	padding-top: calc(5.5rem + 2rem);
	padding-bottom: 4.5rem;
	background: #FAF7F2;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.os-hero__grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 3.5rem;
	align-items: center;
}

.os-hero__title {
	font-family: var(--serif, "Fraunces", Georgia, serif);
	font-size: clamp(2.25rem, 4.5vw, 3.5rem);
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #2b2421;
	margin: 0 0 1.5rem;
}

.os-hero__lead {
	font-family: var(--sans);
	font-size: 1.1875rem;
	line-height: 1.6;
	color: #574e47;
	margin: 0 0 2.5rem;
}

.os-hero__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	align-items: center;
}

/* Hero: a photo of the Edlio team, with each of the four figures in its own small frosted card floating over the photo's corners */
.os-hero__media {
	position: relative;
	width: calc(100% - 2rem);
	max-width: 520px;
	margin: 3rem auto;
}

.os-hero__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: 24px;
	box-shadow: 0 30px 60px -36px rgba(43, 36, 33, 0.45);
}

.os-hero__card {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.os-stat-badge {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.85rem 1.1rem 0.9rem;
	background: rgba(255, 253, 249, 0.9);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-radius: 16px;
	box-shadow: 0 18px 40px -18px rgba(28, 22, 20, 0.45);
	pointer-events: auto;
}

/* two cards straddle the top edge and two the bottom edge, staggered, so they only touch the photo's sky and floor, never the people */
.os-stat-badge:nth-child(1) { top: -3rem; left: -1.25rem; }
.os-stat-badge:nth-child(2) { top: -2.25rem; right: -1.25rem; }
.os-stat-badge:nth-child(3) { bottom: -2.25rem; left: 6%; }
.os-stat-badge:nth-child(4) { bottom: -3rem; right: -1.25rem; }

.os-stat-badge__num {
	font-family: var(--serif);
	font-size: clamp(1.4rem, 1rem + 0.9vw, 1.75rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--red-ink);
}

.os-stat-badge__label {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--ink-2);
}

/* phones: smaller cards, side by side on the top and bottom edges */
@media (max-width: 600px) {
	.os-hero__media {
		width: calc(100% - 1rem);
		margin: 2.5rem auto;
	}
	.os-stat-badge {
		gap: 0.2rem;
		max-width: calc(50% - 0.25rem);
		padding: 0.6rem 0.75rem 0.65rem;
		border-radius: 13px;
	}
	.os-stat-badge:nth-child(1) { top: -2.5rem; left: -0.5rem; }
	.os-stat-badge:nth-child(2) { top: -2.5rem; right: -0.5rem; }
	.os-stat-badge:nth-child(3) { bottom: -2.5rem; left: -0.5rem; }
	.os-stat-badge:nth-child(4) { bottom: -2.5rem; right: -0.5rem; }
	.os-stat-badge__num {
		font-size: 1.25rem;
	}
	.os-stat-badge__label {
		font-size: 12px;
		white-space: normal;
	}
}

/* Mission Section */
.os-mission {
	padding: 6rem 0;
	background: #FFFFFF;
	text-align: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.os-mission__inner {
	max-width: 860px;
	margin: 0 auto;
}

.os-mission__quote {
	font-family: var(--serif, "Fraunces", Georgia, serif);
	font-size: clamp(1.85rem, 3.2vw, 2.75rem);
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: #2b2421;
	margin: 0 0 1.75rem;
}

.os-mission__desc {
	font-family: var(--sans);
	font-size: 1.125rem;
	line-height: 1.7;
	color: #574e47;
	margin: 0;
}

/* Values Section */
.os-values {
	padding: 6rem 0;
	background: #ffffff;
}

.os-section-head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 4rem;
}

.os-section-title {
	font-family: var(--serif, "Fraunces", Georgia, serif);
	font-size: clamp(2rem, 3vw, 2.75rem);
	line-height: 1.2;
	font-weight: 600;
	color: #2b2421;
	margin: 0;
}

.os-values__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 2rem;
}

.os-value-card {
	background: #FFFFFF;
	padding: 2.5rem 2rem;
	border-radius: 20px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.04);
}

.os-value-card__num {
	margin: 0 0 1rem;
	font-family: var(--serif);
	font-size: clamp(1.75rem, 2.4vw, 2.1rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--red-ink);
}

/* The principles as a stack of full-screen photo cards, like the homepage partner stack: each card fills the screen under the header
   and sticks there while you scroll; the next one slides up over it, and the card underneath eases back (a little smaller and
   dimmer, on a timed transition) with a sliver of its top edge still showing. Each photo carries its number, title and text
   on a dark wash. Same measurements as the homepage stack (88px under the header, 16px from the bottom, 12px peek) */
.os-stack {
	--top: 88px;
	--bottom: 16px;
	--peek: 12px;
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 0 16px 16px;
}

.os-stack__card {
	position: sticky;
	top: calc(var(--top) + var(--i, 0) * var(--peek));
	height: calc(100vh - var(--top) - var(--bottom) - var(--i, 0) * var(--peek));
	height: calc(100svh - var(--top) - var(--bottom) - var(--i, 0) * var(--peek));
}

.os-stack__card + .os-stack__card {
	margin-top: 30vh;
}

.os-stack__card:nth-child(2) { --i: 1; }
.os-stack__card:nth-child(3) { --i: 2; }
.os-stack__card:nth-child(4) { --i: 3; }

.os-stack__frame {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: end;
	gap: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);
	height: 100%;
	padding: clamp(1.75rem, 1rem + 3vw, 4rem) max(clamp(24px, 4vw, 56px), calc((100vw - 1248px) / 2));
	overflow: hidden;
	background: var(--ink);
	border-radius: 28px;
	box-shadow: 0 40px 80px -40px rgba(43, 36, 33, 0.5);
	transform-origin: 50% 0;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
}

.os-stack__card.under .os-stack__frame {
	transform: scale(0.94);
	filter: brightness(0.55);
}

.os-stack__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	object-fit: cover;
}

/* a deep wash along the bottom, so the white text keeps strong contrast on any photo */
.os-stack__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(28, 22, 20, 0.92) 0%, rgba(28, 22, 20, 0.8) 30%, rgba(28, 22, 20, 0.25) 62%, rgba(28, 22, 20, 0) 100%);
}

.os-stack__frame > :not(.os-stack__img) {
	position: relative;
	z-index: 1;
}

.os-stack .os-value-card__num {
	margin: 0;
	font-family: var(--sans);
	font-weight: 700;
	letter-spacing: -0.02em;
	font-size: clamp(2.75rem, 2rem + 3vw, 5rem);
	color: #FBE9B8;
}

.os-stack .ep-card__title {
	font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.75rem);
	margin-bottom: 0.85rem;
	color: var(--white);
}

.os-stack .ep-card__text {
	max-width: 56ch;
	font-size: clamp(16px, 0.9rem + 0.3vw, 19px);
	color: var(--white);
}

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

@media (max-width: 600px) {
	.os-stack {
		--top: 80px;
		--bottom: 12px;
		--peek: 10px;
		padding: 0 10px 12px;
	}
	.os-stack__frame {
		grid-template-columns: 1fr;
		gap: 0.75rem;
		padding: 1.5rem 1.25rem;
		border-radius: 22px;
	}
	/* a taller, deeper wash on phones, where the text takes up more of the card */
	.os-stack__frame::after {
		background: linear-gradient(to top, rgba(28, 22, 20, 0.94) 0%, rgba(28, 22, 20, 0.86) 45%, rgba(28, 22, 20, 0.3) 78%, rgba(28, 22, 20, 0) 100%);
	}
}

/* Moments from the Edlio team at NSPRA 2026, under the mission */
.os-moments {
	display: grid;
	grid-template-columns: 1fr 1.7fr 1fr;
	gap: clamp(0.75rem, 0.4rem + 1vw, 1.25rem);
	margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.os-moments img {
	display: block;
	width: 100%;
	height: clamp(180px, 10rem + 8vw, 300px);
	object-fit: cover;
	border-radius: 20px;
}

@media (max-width: 600px) {
	.os-moments {
		grid-template-columns: 1fr 1fr;
	}
	.os-moments img {
		height: 160px;
	}
	.os-moments img:nth-child(2) {
		grid-column: 1 / -1;
		order: -1;
	}
}

/* Founder photo above his name in the quote */
.os-founder__photo {
	display: block;
	width: 72px;
	height: 72px;
	margin: 0 auto 0.85rem;
	border-radius: 50%;
	object-fit: cover;
}

.os-value-card__title {
	font-family: var(--serif, "Fraunces", Georgia, serif);
	font-size: 1.35rem;
	font-weight: 600;
	color: #2b2421;
	margin: 0 0 0.85rem;
}

.os-value-card__text {
	font-family: var(--sans);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #574e47;
	margin: 0;
}

/* Founder Card */
.os-founder {
	padding: 3rem 0 6rem;
	background: #ffffff;
}

.os-founder__card {
	background: var(--color-1, #d12923);
	color: #FFFFFF;
	border-radius: 28px;
	padding: clamp(2.5rem, 5vw, 4.5rem);
	position: relative;
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgba(209, 41, 35, 0.25);
}

.os-founder__quote-mark {
	position: absolute;
	top: -20px;
	right: 40px;
	font-family: var(--serif, "Fraunces", Georgia, serif);
	font-size: 12rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.06);
	pointer-events: none;
}

.os-founder__quote {
	font-family: var(--serif, "Fraunces", Georgia, serif);
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	line-height: 1.5;
	font-weight: 400;
	margin: 0 0 2.5rem;
	position: relative;
	z-index: 1;
	max-width: 900px;
}

.os-founder__author {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	position: relative;
	z-index: 1;
}

.os-founder__avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	border: 1.5px solid rgba(255, 255, 255, 0.4);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: 0.05em;
}

.os-founder__info strong {
	display: block;
	font-size: 1.0625rem;
	font-weight: 600;
	color: #FFFFFF;
}

.os-founder__info span {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.7);
}

/* Testimonial Section */
.os-testimonial-section,
.mc-testimonial-section {
	padding: 5rem 0;
	background: #ffffff;
}

.os-testimonial-card,
.mc-testimonial-card {
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	padding: 0 1.5rem;
}

.os-testimonial-quote-mark,
.mc-testimonial-quote-mark {
	font-family: var(--serif, "Fraunces", Georgia, serif);
	font-size: 6rem;
	line-height: 1;
	color: var(--color-1, #d12923);
	opacity: 0.2;
	margin-bottom: -2.5rem;
}

.os-testimonial-text,
.mc-testimonial-text {
	font-family: var(--serif, "Fraunces", Georgia, serif);
	font-style: normal;
	font-size: clamp(1.2rem, 2vw, 1.55rem);
	line-height: 1.55;
	color: #2b2421;
	margin: 0 0 2rem;
}

.os-testimonial-author,
.mc-testimonial-author {
	display: block;
}

.os-testimonial-name,
.mc-testimonial-name {
	display: block;
	font-family: var(--sans);
	font-size: 17px;
	font-weight: 700;
	color: var(--site-text-dark, #2b2421);
}

.os-testimonial-role,
.mc-testimonial-role {
	display: block;
	font-family: var(--sans);
	font-size: 14px;
	color: var(--site-text-muted, #726861);
	margin-top: 0.25rem;
}

/* Bottom CTA Banner */
.os-bottom-cta-banner {
	padding: 5.5rem 0;
	background: #ffffff;
}

/* Our Story FAQ Section (.os-faq-*) */
.os-faq-section {
	padding: 5.5rem 0 6rem;
	background: #ffffff;
	border-top: 1px solid rgba(43, 36, 33, 0.08);
}

.os-faq-head {
	text-align: center;
	max-width: 48rem;
	margin: 0 auto 3.5rem;
}

.os-faq-lead {
	font-family: var(--sans);
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--site-text-muted, #726861);
	margin-top: 0.75rem;
}

.os-faq-container {
	max-width: 58rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 3.5rem;
}

.os-faq-category {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.os-faq-category__title {
	font-family: var(--serif, 'Fraunces', Georgia, serif);
	font-size: 1.625rem;
	font-weight: 600;
	color: var(--site-text-dark, #2b2421);
	letter-spacing: -0.015em;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid rgba(209, 41, 35, 0.25);
}

.os-faq-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.os-faq-item {
	background: #FAF6EF;
	border: 1px solid rgba(43, 36, 33, 0.08);
	border-radius: 12px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	overflow: hidden;
}

.os-faq-item:hover {
	border-color: rgba(209, 41, 35, 0.28);
	box-shadow: 0 4px 14px rgba(43, 36, 33, 0.05);
}

.os-faq-item[open] {
	background: #ffffff;
	border-color: rgba(209, 41, 35, 0.4);
	box-shadow: 0 6px 20px rgba(43, 36, 33, 0.07);
}

.os-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.15rem 1.4rem;
	cursor: pointer;
	user-select: none;
	list-style: none;
	transition: background-color 0.15s ease;
}

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

.os-faq-question__text {
	font-family: var(--sans);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--site-text-dark, #2b2421);
	line-height: 1.4;
	text-align: left;
}

.os-faq-item[open] .os-faq-question__text {
	color: var(--red-ink, #D12923);
}

.os-faq-question__icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(43, 36, 33, 0.06);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.os-faq-question:hover .os-faq-question__icon {
	background: rgba(209, 41, 35, 0.12);
}

.os-faq-item[open] .os-faq-question__icon {
	background: #D12923;
	transform: rotate(45deg);
}

.os-faq-question__icon::before,
.os-faq-question__icon::after {
	content: '';
	position: absolute;
	background: #2b2421;
	border-radius: 2px;
	transition: background-color 0.2s ease;
}

.os-faq-item[open] .os-faq-question__icon::before,
.os-faq-item[open] .os-faq-question__icon::after {
	background: #ffffff;
}

.os-faq-question__icon::before {
	width: 12px;
	height: 2px;
}

.os-faq-question__icon::after {
	width: 2px;
	height: 12px;
}

.os-faq-answer {
	padding: 0 1.4rem 1.25rem;
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--site-text-dark, #2b2421);
	animation: osFaqFade 0.25s ease-out;
}

.os-faq-answer p {
	margin: 0;
}

@keyframes osFaqFade {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.os-faq-note {
	font-family: var(--sans);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--site-text-muted, #726861);
	padding: 0.5rem 0.75rem;
	margin: 0.25rem 0 0;
	font-style: italic;
}

.os-faq-link {
	color: var(--red-ink, #D12923);
	text-decoration: underline;
	font-style: normal;
	font-weight: 600;
}

.os-faq-link:hover {
	color: #a81c17;
}

@media (max-width: 768px) {
	.os-faq-section {
		padding: 4rem 0;
	}

	.os-faq-head {
		margin-bottom: 2.5rem;
	}

	.os-faq-category__title {
		font-size: 1.35rem;
	}

	.os-faq-question {
		padding: 1rem 1.15rem;
	}

	.os-faq-question__text {
		font-size: 0.975rem;
	}

	.os-faq-answer {
		padding: 0 1.15rem 1rem;
		font-size: 0.9375rem;
	}
}

@media (max-width: 991px) {
	.os-hero__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.os-hero {
		padding-top: calc(4.5rem + 1.5rem);
	}
}


/* ==========================================================================
   Blog Page Styles (.blog-*)
   ========================================================================== */

.blog-page {
	min-height: 100vh;
}

/* Hero: three small floating modules that show what the blog covers (a guide, a tip, a platform update), set like plays in a
   playbook: each is numbered, and a faint X-and-O play diagram sits behind them like a watermark. The cards are frosted, with a deeper shadow. Decorative */
.blog-hero__modules {
	position: relative;
	min-height: 420px;
}

/* the whole drawing always fits inside the hero visual, so no mark is ever cut off */
.blog-hero__play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	color: rgba(43, 36, 33, 0.12);
}

.blog-mod {
	position: absolute;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.25rem 1.35rem;
	font-family: var(--sans);
	color: var(--ink);
	background: rgba(255, 253, 249, 0.9);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-radius: 18px;
	box-shadow: 0 30px 60px -24px rgba(43, 36, 33, 0.5), 0 2px 8px rgba(43, 36, 33, 0.08);
}

.blog-mod--guide {
	top: 1.5rem;
	left: 4%;
	width: min(320px, 62%);
}

.blog-mod--tip {
	top: 0;
	right: 0;
	width: min(250px, 46%);
	transform: rotate(2deg);
}

.blog-mod--update {
	right: 2%;
	bottom: 1rem;
	width: min(280px, 52%);
}

.blog-mod__top {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.blog-mod__play {
	font-family: var(--serif);
	font-size: 1rem;
	font-weight: 600;
	color: var(--red-ink);
}

.blog-mod__tag {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: var(--sky-soft);
}

.blog-mod__tag--butter {
	background: var(--butter-soft);
}

.blog-mod__tag--sage {
	background: var(--sage-soft);
}

.blog-mod__title {
	margin: 0;
	font-family: var(--serif);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.2;
}

.blog-mod__list {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.blog-mod__list li::before {
	content: "✓";
	margin-right: 0.5rem;
	font-weight: 600;
	color: var(--red);
}

.blog-mod__meta {
	font-size: 12px;
	color: var(--ink-2);
}

.blog-mod__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
}

.blog-mod__text strong {
	font-weight: 600;
}

/* tablets and phones: the three plays stack like a loose deck, each overlapping the one above and offset left or right */
@media (max-width: 991px) {
	.blog-hero__modules {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 560px;
		min-height: 0;
		margin: 0 auto;
		padding: 0.5rem 0 1rem;
	}
	.blog-mod {
		position: relative;
		inset: auto;
	}
	.blog-mod--guide {
		width: 80%;
		transform: rotate(-1deg);
	}
	.blog-mod--tip {
		align-self: flex-end;
		width: 66%;
		margin-top: -1.25rem;
		transform: rotate(1.5deg);
	}
	.blog-mod--update {
		align-self: center;
		width: 74%;
		margin-top: -1rem;
		transform: none;
	}
}

@media (max-width: 600px) {
	.blog-mod--guide { width: 90%; }
	.blog-mod--tip { width: 82%; }
	.blog-mod--update { width: 88%; }
}

/* Article cards from the CMS news loop, on the template: cream cards on white, no outlines, a soft tag, the headline serif
   for titles. The first article is the wide featured card (photo left, text right) */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ep-gap);
}

.blog-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--cream);
	border: 0;
	border-radius: 20px;
	box-shadow: none;
	transition: background-color 0.3s ease;
}

/* on hover the card fades to light blue (its image zooms and the line under "Read article" grows); the card itself stays still */
.blog-card:hover {
	background: var(--sky-soft);
}

.blog-card[hidden] {
	display: none;
}

/* the first article: a wide card, half image and half text, no taller than a 16:9 image */
.blog-card--featured {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
}

/* the image sits in a rounded panel inset from the card's edges, like the other media cards: equal space above and beside it
   (on the featured card, all around it). Post graphics are shown whole: most are 16:9, a square one sits centred on the tan panel */
.blog-card__media-link {
	display: block;
	padding: var(--ep-pad) var(--ep-pad) 0;
}

.blog-card--featured .blog-card__media-link {
	padding: var(--ep-pad) 0 var(--ep-pad) var(--ep-pad);
}

.blog-card__media {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: color-mix(in srgb, var(--beige), var(--ink) 4%); /* a darker tan, mixed from the brand beige and ink */
	border-radius: 16px;
}

.blog-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.4s ease;
}

.blog-card:hover .blog-card__media img {
	transform: scale(1.03);
}

.blog-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: var(--ep-pad);
}

.blog-card--featured .blog-card__body {
	justify-content: center;
	padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
}

/* every post carries the same tag, so the tag row is hidden */
.blog-card__meta {
	display: none;
}

.blog-card__tag {
	display: inline-block;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ink);
	background: var(--sky-soft);
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
}

.blog-card__date {
	font-family: var(--sans);
	font-size: 13px;
	color: var(--ink-2);
}

.blog-card__title {
	margin: 0 0 0.85rem;
	font-family: var(--serif);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
}

.blog-card--featured .blog-card__title {
	font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
	line-height: 1.15;
}

.blog-card__title a {
	color: var(--ink);
	text-decoration: none;
	transition: color 0.15s ease;
}

.blog-card__title a:hover {
	color: var(--red-ink);
}

/* summaries stop at three lines; "Read article" sits at the bottom, so cards in a row line up */
.blog-card__summary {
	display: -webkit-box;
	overflow: hidden;
	margin: 0 0 1.5rem;
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-2);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.blog-card--featured .blog-card__summary {
	font-size: 17px;
	line-height: 1.65;
}

.blog-card__read-more {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.5rem;
	margin-top: auto;
	position: relative;
	padding-bottom: 2px;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	color: var(--red-ink);
	text-decoration: none;
}

/* "Read article" has the short red underline used by the footer links; it grows out to full width
   when the card (or the link) is hovered or focused */
.blog-card__read-more::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 18px;
	height: 1.5px;
	border-radius: 1px;
	background: var(--red);
	transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-card:hover .blog-card__read-more::after,
.blog-card__read-more:hover::after,
.blog-card__read-more:focus-visible::after {
	width: 100%;
}

/* "Load more articles": the page script shows 12 more articles at a time */
.blog-more {
	display: flex;
	justify-content: center;
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.blog-empty {
	text-align: center;
	padding: 4rem 2rem;
	background: var(--cream);
	border-radius: 20px;
	color: var(--ink-2);
}

@media (max-width: 991px) {
	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}

	.blog-card--featured {
		grid-template-columns: 1fr;
	}

	.blog-card--featured .blog-card__media-link {
		padding: var(--ep-pad) var(--ep-pad) 0;
	}
}

@media (max-width: 640px) {
	.blog-grid {
		grid-template-columns: 1fr;
	}
}


/* ==========================================================================
   Portfolio Page Styles (.pf-*)
   ========================================================================== */

.pf-page {
	min-height: 100vh;
}

/* Hero: a big tilted wall of Edlio school sites on desktop screens that glides as you scroll, like a template gallery; the page script fills it with the portfolio screenshots and moves the columns */
.pf-hero {
	position: relative;
	overflow: hidden;
}

.pf-hero .site-container {
	position: relative;
	z-index: 1;
	min-height: 520px;
}

.pf-wall {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 58%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%);
	mask-image: linear-gradient(90deg, transparent 0, #000 24%);
}

.pf-wall__track {
	position: absolute;
	top: -40%;
	left: 2%;
	display: flex;
	gap: 22px;
	transform: rotate(-10deg);
	transform-origin: 0 0;
}

.pf-wall__col {
	flex: 0 0 clamp(320px, 28vw, 480px);
	will-change: transform;
}

/* mosaic: alternate columns are narrower, and every third screen is a little taller */
.pf-wall__col:nth-child(even) {
	flex-basis: clamp(250px, 21vw, 360px);
}

.pf-wall__shot {
	margin-bottom: 22px;
}

.pf-wall__shot img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: 50% 0;
}

.pf-wall__shot:nth-child(3n + 2) img {
	aspect-ratio: 4 / 3;
}

/* tablets and phones: the wall becomes a full-width band under the headline */
@media (max-width: 1200px) {
	.pf-hero {
		padding-bottom: 0;
	}
	.pf-hero .site-container {
		min-height: 0;
	}
	.pf-wall {
		position: relative;
		width: 100%;
		height: clamp(300px, 55vw, 460px);
		margin-top: 2.5rem;
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
		mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
	}
	.pf-wall__track {
		top: -20%;
		left: -6%;
		gap: 16px;
	}
	.pf-wall__col {
		flex-basis: clamp(240px, 48vw, 380px);
	}
	.pf-wall__col:nth-child(even) {
		flex-basis: clamp(190px, 37vw, 290px);
	}
	.pf-wall__shot {
		margin-bottom: 16px;
	}
}

/* Browse: a "Browse by type" sidebar beside the results on wide screens */
.pf-browse {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 3vw, 4rem);
	align-items: start;
}

/* the group's label is for screen readers; the tabs line up with the top of the cards */
.pf-filters__title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.pf-filters__list {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.pf-filter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	padding: 0.65rem 0.9rem;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 500;
	text-align: left;
	color: var(--ink);
	background: transparent;
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	transition: background 0.2s ease;
}

.pf-filter:hover {
	background: var(--cream);
}

.pf-filter[aria-pressed="true"] {
	font-weight: 600;
	background: var(--sky-soft);
}

/* Site cards from the CMS news loop: screenshot first, in a browser frame; the screenshot scrolls slowly on hover */
.pf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: clamp(2rem, 1.25rem + 1.5vw, 3rem) var(--ep-gap);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

/* switching tabs: the grid fades out, then the matching cards fade up one after another */
.pf-grid.is-fading {
	opacity: 0;
	transform: translateY(8px);
}

.pf-card.is-entering {
	animation: pf-card-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pf-card-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pf-grid,
	.pf-card.is-entering {
		transition: none;
		animation: none;
	}
	.pf-grid.is-fading {
		opacity: 1;
		transform: none;
	}
}

.pf-card {
	display: flex;
	flex-direction: column;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.pf-card[hidden] {
	display: none;
}

.pf-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	padding: 5px;
	border-radius: 14px;
	/* the slim light-silver device frame from the Websites page (.ep-device); the CMS loop markup can't take the class, so it's matched here */
	background: linear-gradient(140deg, #eef0f2 0%, #cfd3d8 38%, #e4e7ea 62%, #bfc4ca 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 0 1px rgba(43, 36, 33, 0.12), 0 32px 64px -28px rgba(43, 36, 33, 0.4), 0 2px 6px rgba(43, 36, 33, 0.08);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* the screenshot zooms in gently on mouse hover */
.pf-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
	border-radius: 9px;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* lift and zoom only with a mouse, and not for visitors who turn motion off; on touch screens the card stays still */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.pf-card:hover .pf-card__media {
		transform: translateY(-4px);
	}
	.pf-card:hover .pf-card__media img {
		transform: scale(1.05);
	}
}

.pf-card__placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	background: var(--beige);
	border-radius: 9px;
	font-family: var(--serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--ink-2);
	background: var(--cream);
}

.pf-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 1.25rem 0.25rem 0;
}

.pf-card__tag {
	display: inline-block;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ink);
	background: var(--butter-soft);
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
}

.pf-card__title {
	margin: 0.25rem 0 0;
	font-family: var(--serif);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ink);
	text-wrap: balance;
}

.pf-card__desc {
	margin: 0;
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-2);
}

.pf-card__link {
	margin-top: 0.35rem;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	color: var(--red-ink);
	text-decoration: none;
}

.pf-card__link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* tablets and phones: the filters become a scrolling chip row above the results */
@media (max-width: 1099px) {
	.pf-browse {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
	.pf-filters {
		position: static;
	}
	.pf-filters__list {
		flex-direction: row;
		gap: 0.5rem;
		margin: 0 calc(-1 * clamp(1.5rem, 6vw, 6rem));
		padding: 0.25rem clamp(1.5rem, 6vw, 6rem) 0.5rem;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.pf-filters__list::-webkit-scrollbar {
		display: none;
	}
	.pf-filter {
		flex: none;
		width: auto;
		padding: 0.55rem 1rem;
		background: var(--cream);
		border-radius: 999px;
	}
}

/* ==========================================================================
   Free Accessibility Widget Product Page (.widget-*)
   ========================================================================== */

.widget-landing {
	background: #FAF7F2;
	color: var(--ink, #1F2937);
	min-height: 100vh;
}

/* Hero */
.widget-hero {
	padding: 3rem 0 5rem;
	background: linear-gradient(180deg, #FFFFFF 0%, #FAF7F2 100%);
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.widget-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 4rem;
	align-items: center;
}

.widget-breadcrumbs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: #6B7280;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}

.widget-breadcrumbs a {
	color: #6B7280;
	text-decoration: none;
	transition: color 0.15s ease;
}

.widget-breadcrumbs a:hover {
	color: var(--red, #D12923);
}

.widget-eyebrow {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--red, #D12923);
	margin-bottom: 0.85rem;
}

.widget-hero__title {
	font-family: var(--serif, "Fraunces", serif);
	font-size: clamp(2.25rem, 4.2vw, 3.4rem);
	line-height: 1.15;
	font-weight: 500;
	color: #111827;
	margin: 0 0 1.25rem;
	letter-spacing: -0.02em;
}

.widget-hero__lead {
	font-size: clamp(1.1rem, 1.8vw, 1.25rem);
	line-height: 1.6;
	color: #4B5563;
	margin: 0 0 2rem;
	max-width: 54ch;
}

.widget-hero__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	align-items: center;
}

/* Buttons */
.widget-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.875rem 1.85rem;
	border-radius: 9999px;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	cursor: pointer;
	white-space: nowrap;
}

.widget-btn--primary {
	background: var(--red, #D12923);
	color: #FFFFFF !important;
	border: 1px solid var(--red, #D12923);
	box-shadow: 0 4px 14px rgba(209, 41, 35, 0.25);
}

.widget-btn--primary:hover {
	background: #b8231e;
	border-color: #b8231e;
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(209, 41, 35, 0.35);
}

.widget-btn--secondary {
	background: #FFFFFF;
	color: #1F2937 !important;
	border: 1px solid rgba(0, 0, 0, 0.12);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.widget-btn--secondary:hover {
	background: #F9FAFB;
	border-color: rgba(0, 0, 0, 0.25);
	transform: translateY(-1px);
}

.widget-btn--white {
	background: #FFFFFF;
	color: var(--red, #D12923) !important;
	border: 1px solid #FFFFFF;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.widget-btn--white:hover {
	background: #FAF6EF;
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.widget-btn--ghost {
	background: transparent;
	color: #FFFFFF !important;
	border: 1px solid rgba(255, 255, 255, 0.4);
}

.widget-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #FFFFFF;
}

/* Preview Frame */
/* Hero: the widget preview in the template's slim light-silver frame (ep-device), with a small browser bar on the frame */
.widget-preview-frame {
	position: relative;
	z-index: 1;
	width: min(100%, 420px);
	margin: 0 auto;
}

.widget-preview-frame__bar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.35rem 0.6rem 0.6rem;
}

.widget-preview-frame__dots {
	display: inline-block;
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(43, 36, 33, 0.28);
	box-shadow: 13px 0 0 rgba(43, 36, 33, 0.28), 26px 0 0 rgba(43, 36, 33, 0.28);
}

.widget-preview-frame__label {
	margin-left: 1.75rem;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	color: var(--ink);
}

/* Section Header Utility */
.widget-section-header {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 3.5rem;
}

.widget-section-title {
	font-family: var(--serif, "Fraunces", serif);
	font-size: clamp(2rem, 3.4vw, 2.75rem);
	line-height: 1.2;
	font-weight: 500;
	color: #111827;
	margin: 0 0 1rem;
	letter-spacing: -0.015em;
}

.widget-section-desc {
	font-size: 1.125rem;
	line-height: 1.6;
	color: #4B5563;
	margin: 0;
}

/* 12 Settings Grid */
.widget-settings {
	padding: 6rem 0;
	background: #FFFFFF;
}

.widget-settings__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

.widget-card {
	background: #FAF7F2;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 18px;
	padding: 2rem 1.75rem;
	display: flex;
	flex-direction: column;
}

.widget-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: #FFFFFF;
	color: var(--red, #D12923);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.04);
}

.widget-card__title {
	font-family: var(--serif, "Fraunces", serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: #111827;
	margin: 0 0 0.5rem;
}

.widget-card__text {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #4B5563;
	margin: 0;
	flex-grow: 1;
}

/* Customization Showcase Section (.widget-custom) */
.widget-custom {
	padding: 6rem 0;
	background: #FAF7F2;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.widget-custom__grid {
	display: flex;
	flex-direction: column;
	gap: 3.5rem;
	max-width: 1060px;
	margin: 0 auto;
}

.widget-custom-card {
	background: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr);
	align-items: center;
}

.widget-custom-card--reverse {
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.15fr);
}

.widget-custom-card--reverse .widget-custom-card__body {
	order: 2;
}

.widget-custom-card--reverse .widget-custom-card__visual {
	order: 1;
}

.widget-custom-card__body {
	padding: 3rem 2.75rem;
}

.widget-custom-card__tag {
	display: inline-block;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ink);
	background: var(--sky-soft);
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	margin-bottom: 1.25rem;
}

.widget-custom-card__title {
	font-family: var(--serif, "Fraunces", serif);
	font-size: clamp(1.4rem, 2.2vw, 1.85rem);
	line-height: 1.25;
	font-weight: 600;
	color: #111827;
	margin: 0 0 1rem;
	letter-spacing: -0.015em;
}

.widget-custom-card__text {
	font-size: 1.025rem;
	line-height: 1.65;
	color: #4B5563;
	margin: 0;
}

.widget-custom-card__visual {
	padding: 2rem;
	background: #F4F0E8;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.widget-custom-card__img-frame {
	background: #FFFFFF;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 0, 0, 0.06);
	width: 100%;
	display: flex;
}

.widget-custom-card__img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}

/* Highlights Grid */
.widget-highlights {
	padding: 6rem 0;
	background: #FFFFFF;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.widget-highlights__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.75rem;
	max-width: 1060px;
	margin: 0 auto;
}

.widget-highlight-item {
	background: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 20px;
	padding: 2.25rem;
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
}

.widget-highlight-item--full {
	grid-column: 1 / -1;
}

.widget-highlight-item__icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(209, 41, 35, 0.08);
	color: var(--red, #D12923);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.widget-highlight-item__title {
	font-family: var(--serif, "Fraunces", serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: #111827;
	margin: 0 0 0.4rem;
}

.widget-highlight-item__text {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #4B5563;
	margin: 0;
}

/* Free for Schools Banner */
.widget-free {
	padding: 2rem 0 5rem;
	background: #FAF7F2;
}

.widget-free__box {
	background: #FFFFFF;
	border-radius: 24px;
	padding: 3.5rem 3rem;
	border: 1px solid rgba(209, 41, 35, 0.15);
	box-shadow: 0 15px 35px -10px rgba(209, 41, 35, 0.08);
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
}

.widget-free__badge {
	display: inline-block;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ink);
	background: var(--butter-soft);
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	margin-bottom: 1.25rem;
}

.widget-free__title {
	font-family: var(--serif, "Fraunces", serif);
	font-size: clamp(1.85rem, 3vw, 2.5rem);
	font-weight: 600;
	color: #111827;
	margin: 0 0 1rem;
}

.widget-free__desc {
	font-size: 1.15rem;
	line-height: 1.65;
	color: #4B5563;
	margin: 0 auto;
	max-width: 65ch;
}

/* Conversion CTA Banner */
.widget-cta {
	padding: 0 0 6rem;
	background: #FAF7F2;
}

.widget-cta__box {
	background: var(--red, #D12923);
	color: #FFFFFF;
	border-radius: 28px;
	padding: clamp(3rem, 5vw, 4.5rem);
	text-align: center;
	box-shadow: 0 25px 50px -12px rgba(209, 41, 35, 0.35);
}

.widget-cta__eyebrow {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 0.85rem;
}

.widget-cta__title {
	font-family: var(--serif, "Fraunces", serif);
	font-size: clamp(2rem, 3.4vw, 2.85rem);
	line-height: 1.2;
	font-weight: 600;
	color: #FFFFFF;
	margin: 0 auto 1rem;
	max-width: 720px;
}

.widget-cta__desc {
	font-size: 1.125rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
	margin: 0 auto 2.25rem;
	max-width: 620px;
}

.widget-cta__actions {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 1024px) {
	.widget-settings__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 991px) {
	.widget-hero__grid {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.widget-custom-card,
	.widget-custom-card--reverse {
		grid-template-columns: 1fr;
	}

	.widget-custom-card--reverse .widget-custom-card__body {
		order: 1;
	}

	.widget-custom-card--reverse .widget-custom-card__visual {
		order: 2;
	}

	.widget-custom-card__body {
		padding: 2.25rem 2rem;
	}

	.widget-custom-card__visual {
		padding: 1.5rem;
	}

	.widget-highlights__grid {
		grid-template-columns: 1fr;
	}

	.widget-highlight-item--full {
		grid-column: auto;
	}
}

@media (max-width: 640px) {
	.widget-settings__grid {
		grid-template-columns: 1fr;
	}

	.widget-highlight-item {
		flex-direction: column;
		gap: 1rem;
	}

	.widget-free__box {
		padding: 2.5rem 1.5rem;
	}
}

/* Full-width standalone layout strictly scoped to CMS Pages utilizing the import field */

/* ==========================================================================
   EDLIO - Accounting Page Styles (.ea-*)
   ========================================================================== */
.ea-hero {
	padding: 7.5rem 0 4rem;
	background: #fbf9f4;
	border-bottom: 1px solid var(--site-border-color);
}

.ea-hero .site-container {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 3.5rem;
	align-items: center;
}

.ea-hero__content {
	max-width: 640px;
}

.ea-hero__visual {
	display: flex;
	justify-content: center;
	width: 100%;
}

.ea-hero__visual .ew-video-card,
.ada-hero__visual .ew-video-card,
.doc-hero__visual .ew-video-card {
	width: 100%;
	max-width: 560px;
}

.ea-hero-mockup {
	background: #ffffff;
	border: 1px solid rgba(43, 36, 33, 0.08);
	border-radius: 24px;
	padding: 2rem;
	width: 100%;
	max-width: 440px;
	box-shadow: 0 24px 56px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.03);
	position: relative;
}

.ea-hero-mockup__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(4, 120, 87, 0.1);
	color: #047857;
	margin-bottom: 1rem;
}

.ea-hero-mockup__badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #047857;
}

.ea-hero-mockup__title {
	font-family: var(--serif);
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 0.25rem;
	color: var(--site-text-color);
}

.ea-hero-mockup__sub {
	font-family: var(--sans);
	font-size: 12px;
	color: var(--site-text-muted);
	margin: 0 0 1.25rem;
}

.ea-hero-mockup__metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
	padding: 1rem;
	background: #fbf9f4;
	border-radius: 12px;
	margin-bottom: 1.25rem;
}

.ea-hero-mockup__metric-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ea-hero-mockup__metric-item span {
	font-size: 11px;
	font-family: var(--sans);
	color: var(--site-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ea-hero-mockup__metric-item strong {
	font-size: 16px;
	font-family: var(--sans);
	font-weight: 700;
	color: var(--site-text-color);
	font-variant-numeric: tabular-nums;
}

.ea-hero-mockup__ledger {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.ea-hero-mockup__ledger-header {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	font-family: var(--sans);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--site-text-muted);
	padding-bottom: 0.25rem;
	border-bottom: 1px solid rgba(43, 36, 33, 0.06);
}

.ea-hero-mockup__ledger-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.ea-hero-mockup__ledger-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ea-hero-mockup__ledger-info strong {
	font-size: 13px;
	font-family: var(--sans);
	font-weight: 600;
	color: var(--site-text-color);
}

.ea-hero-mockup__ledger-info span {
	font-size: 11px;
	font-family: var(--sans);
	color: var(--site-text-muted);
}

.ea-hero-mockup__ledger-amt {
	font-size: 13px;
	font-family: var(--sans);
	font-weight: 700;
	color: var(--site-text-color);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Section Shared Rules */
.ea-section {
	padding: 5rem 0;
}

.ea-section-header {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 3.5rem;
}

.ea-section-eyebrow {
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-1, #d12923);
	margin-bottom: 0.5rem;
}

.ea-section-title {
	font-family: var(--serif);
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.2;
	font-weight: 600;
	margin: 0 0 1rem;
	color: var(--site-text-color);
}

.ea-section-lead {
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--site-text-muted);
	margin: 0;
}

/* Card Grids */
.ea-card-grid {
	display: grid;
	gap: 1.75rem;
}

.ea-card-grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

.ea-card {
	background: #ffffff;
	border: 1px solid rgba(43, 36, 33, 0.08);
	border-radius: 16px;
	padding: 2rem 1.75rem;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.ea-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
}

.ea-card__icon--blue {
	background: rgba(37, 99, 235, 0.1);
	color: #2563eb;
}

.ea-card__icon--red {
	background: rgba(209, 41, 35, 0.1);
	color: #d12923;
}

.ea-card__icon--gold {
	background: rgba(217, 119, 6, 0.1);
	color: #d97706;
}

.ea-card__icon--green {
	background: rgba(5, 150, 105, 0.1);
	color: #059669;
}

.ea-card__title {
	font-family: var(--sans);
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: var(--site-text-color);
}

.ea-card__text {
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.55;
	color: var(--site-text-muted);
	margin: 0;
}

/* Core Workflows Showcase Video */
.ea-workflows-showcase {
	margin-top: 3.5rem;
	display: flex;
	justify-content: center;
	width: 100%;
}

.ea-workflows-showcase .ew-video-card {
	width: 100%;
	max-width: 1020px;
}

/* Split Rows */
.ea-split-row {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 4.5rem;
	align-items: center;
	margin-bottom: 5.5rem;
}

.ea-split-row:last-child {
	margin-bottom: 0;
}

.ea-split-row--reverse {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}

.ea-split-row__title {
	font-family: var(--serif);
	font-size: clamp(1.75rem, 3vw, 2.35rem);
	line-height: 1.2;
	font-weight: 600;
	margin: 0 0 1rem;
	color: var(--site-text-color);
}

.ea-split-row__lead {
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--site-text-muted);
	margin: 0 0 1.75rem;
}

.ea-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.ea-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.45;
	color: var(--site-text-color);
}

.ea-checklist__icon {
	color: #047857;
	font-weight: 700;
	flex-shrink: 0;
}

/* Mockup Cards for Split Rows */
.ea-mockup-card {
	background: #ffffff;
	border: 1px solid rgba(43, 36, 33, 0.08);
	border-radius: 20px;
	padding: 2rem;
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.06);
	width: 100%;
	max-width: 440px;
}

.ea-mockup-card__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid rgba(43, 36, 33, 0.06);
}

.ea-mockup-card__badge {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(4, 120, 87, 0.1);
	color: #047857;
}

.ea-mockup-card__badge--blue {
	background: rgba(37, 99, 235, 0.1);
	color: #2563eb;
}

.ea-mockup-card__sub {
	font-family: var(--sans);
	font-size: 12px;
	color: var(--site-text-muted);
}

.ea-sync-flow {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: center;
	margin-bottom: 1.25rem;
}

.ea-sync-step {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: 1rem;
	background: var(--cream);
	border: 0;
	border-radius: 12px;
}

.ea-sync-step--active {
	background: var(--sage-soft);
}

.ea-sync-step__icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--white);
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	color: var(--red);
	flex-shrink: 0;
}

.ea-sync-step--active .ea-sync-step__icon {
	color: var(--success);
}

.ea-sync-step__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ea-sync-step__text strong {
	font-size: 14px;
	font-family: var(--sans);
	font-weight: 600;
	color: var(--ink);
}

.ea-sync-step__text span {
	font-size: 12px;
	font-family: var(--sans);
	color: var(--site-text-muted);
}

.ea-sync-arrow {
	font-size: 16px;
	color: var(--site-text-muted);
}

.ea-report-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 0;
	border-bottom: 1px dashed var(--line);
	font-family: var(--sans);
	font-size: 14px;
	color: var(--ink-2);
}

.ea-report-row strong {
	font-weight: 600;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.ea-report-row--total {
	border-bottom: none;
	border-top: 1.5px solid var(--line);
	padding-top: 0.85rem;
	font-weight: 600;
	color: var(--ink);
}

.ea-mockup-card__footer {
	margin-top: 1.25rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--line);
	font-size: 12px;
	font-family: var(--sans);
	color: var(--success);
	font-weight: 600;
	text-align: center;
}

/* Deployment Options Grid */
.ea-deployment-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.25rem, 0.5rem + 1.8vw, 2.25rem);
}

.ea-deployment-card {
	background: var(--cream);
	border: 0;
	border-radius: 20px;
	padding: calc(var(--ep-pad, 2.5rem) + 0.25rem) var(--ep-pad, 2.5rem);
	box-shadow: none;
	position: relative;
}

.ea-deployment-card--standalone {
	background: var(--cream);
}

.ea-deployment-card__badge {
	display: inline-block;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(209, 41, 35, 0.1);
	color: var(--red-ink);
	margin-bottom: 1.25rem;
}

.ea-deployment-card__badge--outline {
	background: var(--sky-soft);
	color: var(--ink);
}

.ea-deployment-card__title {
	font-family: var(--serif);
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 0.85rem;
	color: var(--ink);
}

.ea-deployment-card__desc {
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0 0 1.5rem;
}

/* Leadership Testimonial */
.ea-testimonial-section {
	padding: 4rem 0 5rem;
	background: #fbf9f4;
}

.ea-testimonial-card {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
	position: relative;
}

.ea-testimonial-quote-mark {
	font-family: var(--serif);
	font-size: 5rem;
	line-height: 1;
	color: var(--color-1, #d12923);
	opacity: 0.25;
	margin-bottom: -1.5rem;
}

.ea-testimonial-text {
	font-family: var(--serif);
	font-size: clamp(1.2rem, 2.2vw, 1.45rem);
	line-height: 1.5;
	font-style: normal;
	color: var(--site-text-color);
	margin: 0 0 1.5rem;
}

.ea-testimonial-author {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ea-testimonial-name {
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 700;
	color: var(--site-text-color);
}

.ea-testimonial-role {
	font-family: var(--sans);
	font-size: 13px;
	color: var(--site-text-muted);
}

.ea-bottom-cta-banner {
	padding: 2.5rem 0 5rem;
	background: #ffffff;
}

/* Responsive Rules for Accounting */
@media (max-width: 1024px) {
	.ea-hero .site-container {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.ea-hero__visual {
		justify-content: flex-start;
	}
	.ea-card-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
	.ea-split-row {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
	.ea-split-row--reverse .ea-split-row__content {
		order: 1;
	}
	.ea-split-row--reverse .ea-split-row__card-mockup {
		order: 2;
	}
	.ea-deployment-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.ea-card-grid--4 {
		grid-template-columns: 1fr;
	}
	.ea-hero {
		padding: 6rem 0 2.5rem;
	}
}

#content_main:has(.cms-imported-page) > .hero-wrapper {
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	display: none !important;
}

#content_main:has(.cms-imported-page) > #breadcrumbs,
#content_main:has(.cms-imported-page) > .pageTitle,
#content_main:has(.cms-imported-page) .pages-right-column {
	display: none !important;
}

#content_main:has(.cms-imported-page) .pages-left-column-wrapper,
#content_main:has(.cms-imported-page) .pages-left-column {
	margin-left: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
}

#content_main:has(.cms-imported-page) .pages-content-wrapper {
	margin-top: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* ==========================================================================
   Inside Pages (.cms-imported-page) Normalization: Fluid Vertical Rhythm
   Neutralizes forced min-heights and enforces balanced section padding
   ========================================================================== */
.cms-imported-page .site-section--sheet {
	min-height: auto !important;
	padding: var(--section-y) 0 !important;
}

.cms-imported-page .ea-section {
	margin: clamp(3.5rem, 5vw, 5rem) auto !important;
	padding: 0 !important;
}

.cms-imported-page .site-section--cta-banner,
.cms-imported-page .ew-bottom-cta-banner,
.cms-imported-page .ea-bottom-cta-banner,
.cms-imported-page .ep-bottom-cta,
.cms-imported-page .ma-bottom-cta-banner,
.cms-imported-page .mc-bottom-cta-banner,
.cms-imported-page .ada-bottom-cta-banner,
.cms-imported-page .os-bottom-cta-banner,
.cms-imported-page .pf-bottom-cta-banner,
.cms-imported-page .blog-bottom-cta-banner {
	padding: clamp(3.5rem, 5.5vw, 5rem) 0 !important;
}

.cms-imported-page .ea-testimonial-section,
.cms-imported-page .os-testimonial-section,
.cms-imported-page .ada-testimonial {
	padding: clamp(3rem, 4.5vw, 4.5rem) 0 !important;
}

.cms-imported-page .ew-portfolio,
.cms-imported-page .ew-features,
.cms-imported-page .ew-split-sec,
.cms-imported-page .ew-ada-feature-sec,
.cms-imported-page .ew-checklist-sec,
.cms-imported-page .widget-settings,
.cms-imported-page .widget-custom,
.cms-imported-page .widget-highlights,
.cms-imported-page .widget-free,
.cms-imported-page .widget-cta,
.cms-imported-page .ada-urgency,
.cms-imported-page .ada-capabilities,
.cms-imported-page .ada-mission,
.cms-imported-page .mc-pillars,
.cms-imported-page .mc-split,
.cms-imported-page .ma-pillars,
.cms-imported-page .ma-split,
.cms-imported-page .ma-safety,
.cms-imported-page .doc-dual,
.cms-imported-page .doc-deploy,
.cms-imported-page .os-mission,
.cms-imported-page .os-values,
.cms-imported-page .os-founder,
.cms-imported-page .pf-grid-section,
.cms-imported-page .blog-grid-section {
	padding: clamp(3.5rem, 5vw, 5rem) 0 !important;
}

/* ==========================================================================
   EDLIO - Accounting Unified Experience Component (.au-*)
   Section 3: One unified experience (Dashboard + Floating Story Cards)
   ========================================================================== */

.au-section {
	padding: 1.5rem 0 2rem;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background: #FAF7F2;
	color: #2B2421;
	border-bottom: 1px solid rgba(43, 36, 33, 0.08);
	scroll-margin-top: 4rem;
	overflow: visible;
}

.au-container {
	width: 100%;
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 1.5rem;
	box-sizing: border-box;
}

/* Interactive Stage */
.au-stage {
	position: relative;
	max-width: 820px;
	margin: 0 auto;
	padding: 1rem 0;
}

/* Dashboard Mockup Frame */
.au-dashboard {
	position: relative;
	margin: 0;
	padding: 0;
	border-radius: 18px;
	background: #FFFFFF;
	box-shadow: 0 20px 50px -12px rgba(43, 36, 33, 0.14),
	            0 8px 20px -4px rgba(43, 36, 33, 0.08),
	            0 0 0 1px rgba(43, 36, 33, 0.08);
	overflow: hidden;
}

.au-dashboard__frame {
	position: relative;
	width: 100%;
	background: #FFFFFF;
	display: block;
	line-height: 0;
}

.au-dashboard__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	line-height: 0;
}

/* Floating Story Cards */
.au-cards {
	pointer-events: none;
}

.au-card {
	position: absolute;
	z-index: 10;
	background: #FFFFFF;
	border-radius: 28px;
	box-shadow: 0 22px 45px -10px rgba(43, 36, 33, 0.18),
	            0 8px 20px -5px rgba(43, 36, 33, 0.1),
	            0 0 0 1px rgba(43, 36, 33, 0.06);
	pointer-events: auto;
	box-sizing: border-box;
}

/* Card 1: Left Integration Card */
.au-card--integration {
	top: 6%;
	left: -120px;
	width: 320px;
	padding: 1.75rem 1.75rem 1.85rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Card 3: Right Reporting Card */
.au-card--reporting {
	bottom: 5%;
	right: -120px;
	width: 330px;
	padding: 1.75rem 1.75rem 1.85rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Card Headings & Body */
.au-card__title {
	font-family: var(--serif, "Fraunces", Georgia, serif);
	font-size: 1.55rem;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #2B2421;
	margin: 0;
	font-variation-settings: "SOFT" 100, "WONK" 0;
}

.au-card__body {
	font-family: var(--sans, "Instrument Sans", system-ui, sans-serif);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #374151;
	margin: 0;
}

/* Stacked Pills */
.au-card__pills {
	list-style: none;
	margin: 0.25rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

.au-card__pills li {
	margin: 0;
	padding: 0;
}

.au-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.9rem 0.45rem 0.75rem;
	border-radius: 9999px;
	font-family: var(--sans, "Instrument Sans", system-ui, sans-serif);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	box-sizing: border-box;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.au-pill:hover {
	transform: translateY(-1px);
}

.au-pill:focus-visible {
	outline: 2px solid #D12923;
	outline-offset: 2px;
}

.au-pill--solid {
	background: #D12923;
	color: #FFFFFF;
	border: 1px solid #D12923;
}

.au-pill--solid .au-pill__icon {
	stroke: #FFFFFF;
}

.au-pill--outline {
	background: #FFFFFF;
	color: #2B2421;
	border: 1px solid #D1D5DB;
}

.au-pill--outline:hover {
	border-color: #9CA3AF;
	background: #F9FAFB;
}

.au-pill--outline .au-pill__icon {
	stroke: #D12923;
}

.au-pill__icon {
	display: inline-block;
	flex-shrink: 0;
}

/* Center Popovers Container */
.au-tooltips {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Popover Cards */
.au-card--tooltip {
	position: absolute;
	width: 300px;
	padding: 1.25rem 1.4rem;
	border-radius: 18px;
	box-shadow: 0 18px 36px -8px rgba(43, 36, 33, 0.22),
	            0 6px 14px -3px rgba(43, 36, 33, 0.1),
	            0 0 0 1px rgba(43, 36, 33, 0.08);
	opacity: 0;
	transform: translateY(6px) scale(0.97);
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
	            visibility 0.22s;
}

/* Tooltips originating from Card 1 (Left Card pills) -> open to the right of Card 1 */
.au-card--tooltip[data-side="left"] {
	top: 220px;
	left: 170px;
	z-index: 12;
}

/* Tooltips originating from Card 3 (Right Card pills) -> open to the left of Card 3 */
.au-card--tooltip[data-side="right"] {
	bottom: 120px;
	right: 180px;
	z-index: 12;
}

.au-card--tooltip.is-active {
	opacity: 1;
	transform: translateY(0) scale(1);
	visibility: visible;
	pointer-events: auto;
}

.au-card__tooltip-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.au-card__tooltip-title {
	font-family: var(--serif, "Fraunces", Georgia, serif);
	font-size: 1.15rem;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: #2B2421;
	margin: 0;
	font-variation-settings: "SOFT" 100, "WONK" 0;
}

.au-card__tooltip-close {
	appearance: none;
	background: none;
	border: none;
	padding: 4px;
	margin: -4px -4px 0 0;
	color: #6B7280;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: color 0.18s, background-color 0.18s;
}

.au-card__tooltip-close:hover,
.au-card__tooltip-close:focus-visible {
	color: #111827;
	background-color: rgba(0, 0, 0, 0.06);
	outline: none;
}

.au-card__tooltip-body {
	font-family: var(--sans, "Instrument Sans", system-ui, sans-serif);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #4B5563;
	margin: 0;
}

/* Responsive Rules for Unified Accounting Stage */
@media (max-width: 1200px) {
	.au-card--integration {
		left: -40px;
		width: 290px;
	}

	.au-card--reporting {
		right: -40px;
		width: 300px;
	}

	.au-card--tooltip {
		left: 20%;
		width: 280px;
	}
}

@media (max-width: 960px) {
	.au-section {
		min-height: auto;
		padding: 3.5rem 0 4.5rem;
		display: block;
	}

	.au-stage {
		padding: 0;
		max-width: 100%;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.au-cards {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
		pointer-events: auto;
	}

	.au-tooltips {
		position: static;
		inset: auto;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		pointer-events: auto;
	}

	.au-card {
		position: static;
		width: 100% !important;
		max-width: 100%;
		border-radius: 22px;
		padding: 1.5rem;
	}

	.au-card--tooltip {
		transform: none !important;
	}

	.au-card--tooltip[hidden] {
		display: none !important;
	}

	.au-card--integration {
		order: 1;
	}

	.au-tooltips {
		order: 2;
	}

	.au-card--reporting {
		order: 3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.au-card,
	.au-pill,
	.au-dashboard {
		transition: none !important;
	}
}



/* ==========================================================================
   EDLIO - Contact Us Page Styles
   ========================================================================== */

.contact-hero {
	padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(4rem, 6vw, 6rem);
	background: #FFFFFF;
}

.contact-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: center;
	margin-bottom: clamp(3rem, 5vw, 5rem);
}

.contact-hero__title {
	font-family: var(--serif, 'Fraunces', serif);
	font-size: clamp(2.5rem, 4.5vw, 3.75rem);
	line-height: 1.15;
	font-weight: 500;
	color: #111827;
	margin: 0 0 1.25rem;
	letter-spacing: -0.02em;
}

.contact-hero__lead {
	font-family: var(--sans, 'Instrument Sans', sans-serif);
	font-size: clamp(1.1rem, 1.8vw, 1.25rem);
	line-height: 1.6;
	color: #4B5563;
	margin: 0;
	max-width: 52ch;
}

.contact-hero__visual {
	display: flex;
	justify-content: center;
	align-items: center;
}

.contact-hero__img {
	width: 100%;
	height: auto;
	max-height: 480px;
	object-fit: cover;
	border-radius: 1.25rem;
	box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08);
}

.contact-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 2.5vw, 2.5rem);
}

.contact-card {
	background: #FAF7F2;
	border-radius: 1.25rem;
	padding: clamp(1.75rem, 2.5vw, 2.25rem);
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(0, 0, 0, 0.04);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.08);
}

.contact-card__icon-wrapper {
	width: 56px;
	height: 56px;
	border-radius: 0.75rem;
	background-color: var(--color-1, #D12923);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
}

.contact-card__icon-img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.contact-card__title {
	font-family: var(--serif, 'Fraunces', serif);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--color-1, #D12923);
	margin: 0 0 1rem;
	line-height: 1.25;
}

.contact-card__body {
	font-family: var(--sans, 'Instrument Sans', sans-serif);
	font-size: 1rem;
	line-height: 1.6;
	color: #374151;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.contact-card__body p {
	margin: 0;
}

.contact-card__link {
	color: inherit;
	text-decoration: underline;
	transition: color 0.15s ease;
}

.contact-card__link:hover {
	color: var(--color-1, #D12923);
}

.contact-card__phone {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.contact-card__phone:hover {
	color: var(--color-1, #D12923);
	text-decoration: underline;
}

@media (max-width: 991px) {
	.contact-hero__grid {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.contact-hero__lead {
		margin: 0 auto;
	}
	.contact-hero__visual {
		order: -1;
		max-width: 500px;
		margin: 0 auto;
	}
	.contact-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Standard CMS Pages Container Normalization (Privacy Policy, Legal, etc.)
   ========================================================================== */
#content_main > .pages-content-wrapper,
#content_main > .breadcrumb,
#content_main > .pageTitle {
	max-width: 1200px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(1.25rem, 4vw, 2.5rem);
	padding-right: clamp(1.25rem, 4vw, 2.5rem);
	box-sizing: border-box;
}

#content_main > .pages-content-wrapper {
	padding-top: clamp(6.5rem, 8vw, 7.5rem) !important;
	padding-bottom: clamp(3rem, 5vw, 5rem) !important;
}

#content_main .pages-left-column,
#content_main .pages-right-column {
	box-sizing: border-box;
}

/* Ensure embedded tables and content inside standard CMS pages remain responsive */
#content_main .page-block-text {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

#content_main .page-block-text table {
	max-width: 100%;
}

@media (max-width: 991px) {
	#content_main > .pages-content-wrapper {
		display: flex !important;
		flex-direction: column !important;
		padding-top: calc(5rem + 1.5rem) !important;
	}

	#content_main .pages-left-column-wrapper,
	#content_main .pages-left-column {
		width: 100% !important;
		margin: 0 !important;
		float: none !important;
	}

	#content_main .pages-right-column {
		width: 100% !important;
		margin: 2rem 0 0 !important;
		float: none !important;
		order: 2;
	}
}

/* Ensure Edlio Websearch Chatbot floats above all page sections */
#react-app-root > div.fixed {
	z-index: 10000 !important;
}


/* ==========================================================================
   Homepage hero — phones. Keep this block at the very END of the file so it
   comes after the base .eh rules it adjusts.
   ========================================================================== */
@media (max-width:860px){
  .eh.live .eh-media{
    border-radius:inherit;
    overflow:hidden;
  }
  .eh.live .eh-body{
    right:0;
  }
  .eh.live .eh-sum{
    left:20px;
    right:20px;
    bottom:76px;
  }
  .eh.live .eh-body .eh-name,
  .eh.live .eh-sum .eh-name{
    font-size:clamp(24px,7vw,30px);
    line-height:1.1;
    max-width:none;
  }
  .eh.live .eh-body p:not(.eh-name),
  .eh.live .eh-sum p:not(.eh-name){
    font-size:16px;
    line-height:1.4;
    margin-top:10px;
    max-width:none;
  }
}
/* tablets: the two hero buttons sit side by side again (phones stack them) */
@media (min-width:601px) and (max-width:860px){
  .eh.live .eh-actions{
    flex-direction:row;
  }
  .eh.live .eh-copy .eh-btn{
    width:auto;
  }
}
/* chatbot launcher: same size and spacing as the accessibility button (56px, 20px from the
   bottom and side) on every screen size, so the two sit level in opposite corners */
#react-app-root > .fixed.right-4.size-16{
  width:56px;
  height:56px;
  right:20px;
  bottom:20px;
}
#react-app-root > .fixed.right-4.size-16 > button{
  width:100%;
  height:100%;
}
#react-app-root > .fixed.right-4.size-16 > button svg{
  width:34px;
  height:34px;
}

/* ==========================================================================
   Homepage sections, phones: longer text reads left-aligned. Keep this block at
   the very END of the file so it comes after the tablet (centred) rules.
   ========================================================================== */
@media (max-width: 600px) {
	.sec-comms-content,
	.sec-acct-content,
	.sec-docs-content,
	.site-partner-header,
	.site-cta-card__inner {
		text-align: left;
	}
	.sec-acct-checklist,
	.sec-docs-checklist,
	.wv-more {
		margin-left: 0;
		margin-right: 0;
	}
	.sec-comms-cta,
	.sec-acct-cta,
	.sec-docs-cta,
	.site-cta-card__actions {
		justify-content: flex-start;
	}
	.site-partner-header__copy {
		align-items: flex-start;
	}
}


/* Accessibility widget: keep see-through overlay layers see-through in light/dark contrast modes.
   The widget paints every element solid white/black; these full-screen click-through layers would otherwise cover the page. */
html[data-ea11y-contrast] #hs-web-interactives-top-anchor,
html[data-ea11y-contrast] .eh-peek {
	background-color: transparent !important;
}


/* Hero closing line ("One platform for the whole school day."): centered in the video frame, fading up into place.
   --fh (the frame's height) is set by the hero script; the panel's bottom lines up with the frame's bottom. */
.eh.live .eh-sum{left:clamp(20px,4vw,56px);right:clamp(20px,4vw,56px);bottom:calc(var(--fh,100%) / 2);translate:0 50%;text-align:center}
.eh.live .eh-sum .eh-name,.eh.live .eh-sum p:not(.eh-name){margin-left:auto;margin-right:auto}
.eh.live.final .eh-sum{animation:ehSumIn .9s .2s cubic-bezier(.2,.8,.2,1) both}
.eh.live.back.final .eh-sum{animation-name:ehRollBack}
@keyframes ehSumIn{from{opacity:0;transform:translateY(64px)}to{opacity:1;transform:none}}