/*
 * AutoSmart theme styles that theme.json can't express.
 * Tokens (colours, fonts, sizes) come from theme.json presets.
 * Direction-neutral properties (inline/block) keep the theme RTL-safe.
 */

:root {
	--as-radius-card: 24px;
	--as-glow: 0 1px 20px -3px rgba(228, 81, 38, 0.3);
	--as-header-h: 72px;
}

/* Links and buttons that point within the same page glide there instead of jumping (off for reduced motion, below). */
html { scroll-behavior: smooth; }

/* ---------- Shared ---------- */

.as-grad {
	background: var(--wp--preset--gradient--brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.as-section {
	padding-block: var(--wp--preset--spacing--70);
}

.as-section--cream { background: var(--wp--preset--color--cream); }

/* No default gap between header, main and footer; each part owns its spacing. */
.wp-site-blocks > * { margin-block-start: 0; }

/* Two plain white sections in a row: don't double the padding between them. */
.as-section--plain + .as-section--plain { padding-block-start: 0; }
.as-section--peach { background: var(--wp--preset--color--peach); }

.as-section > h2.has-text-align-center {
	margin-block-end: var(--wp--preset--spacing--50);
}

.as-eyebrow {
	color: var(--wp--preset--color--orange-red);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--wp--preset--font-size--small);
	margin-block-end: 0.5rem;
}

.as-lead { color: var(--wp--preset--color--body); }

.as-more a {
	font-weight: 700;
	text-decoration: none;
}

.as-card {
	background: var(--wp--preset--color--white);
	border-radius: var(--as-radius-card);
	padding: var(--wp--preset--spacing--40);
	box-shadow: 0 2px 24px -8px rgba(19, 26, 26, 0.12);
}

.as-card h3 { color: var(--wp--preset--color--title); }

.as-card > * + * { margin-block-start: 0.75rem; }

/* Card hover: a light flash sweeps across, then the card fills with the brand gradient. */
.as-card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}

.as-card::before,
.as-card::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.as-card::before {
	inset: 0;
	z-index: -1;
	background: var(--wp--preset--gradient--brand-angled);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.as-card::after {
	inset: -50%;
	z-index: 1;
	background: linear-gradient(115deg, transparent 42%, rgba(255, 236, 200, 0.75) 50%, transparent 58%);
	transform: translateX(-100%);
}

.as-card:is(:hover, :focus-within) {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -16px rgba(221, 34, 40, 0.45);
}

.as-card:is(:hover, :focus-within)::before { opacity: 1; }

.as-card:is(:hover, :focus-within)::after { animation: as-card-flash 0.8s ease-out; }

.as-card:is(:hover, :focus-within) :is(h3, p, a) { color: var(--wp--preset--color--white); }

.as-card:is(:hover, :focus-within) a::after { color: var(--wp--preset--color--white); }


@keyframes as-card-flash {
	from { transform: translateX(-100%); }
	to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
	.as-card:is(:hover, :focus-within) { transform: none; }
	.as-card:is(:hover, :focus-within)::after { animation: none; }
}

/* Placeholders for images, video and logos until real assets arrive. */
.as-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(45deg, #f6f6f6 0 12px, #efefef 12px 24px);
	border: 1px dashed var(--wp--preset--color--faint);
	border-radius: 16px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.as-ph p { margin: 0; }


.as-ph--shot { aspect-ratio: 16 / 10; }


/* ---------- Header ---------- */

.as-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--white);
	border-block-end: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 6px 24px -12px rgba(19, 26, 26, 0.18);
}

.admin-bar .as-site-header { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .as-site-header { top: 46px; }
}

/* Below 600px the admin bar scrolls away with the page, so the header sticks to the very top. */
@media (max-width: 600px) {
	.admin-bar .as-site-header { top: 0; }
}

.as-header { padding-block: 0.75rem; }

.as-header__bar { gap: 1.5rem; min-height: calc(var(--as-header-h) - 1.5rem); }

.as-logo { margin: 0; line-height: 1; }

.as-logo a {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.as-logo img {
	flex: none;
	width: 40px;
	height: 40px;
}

.as-logo__text {
	display: inline-flex;
	flex-direction: column;
	line-height: 1;
}

.as-logo__text span {
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--orange);
}

.as-logo__text strong {
	font-size: 1.5rem;
	font-weight: 700;
	background: var(--wp--preset--gradient--brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.as-nav { flex: 1; }

.as-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--orange); }

.as-nav .wp-block-navigation__submenu-container {
	border: 0 !important;
	border-radius: 16px;
	box-shadow: 0 8px 32px -8px rgba(19, 26, 26, 0.2);
	padding: 0.5rem;
}

.as-header__cta .wp-block-button__link { white-space: nowrap; }

/*
 * Under 1024px the links don't fit on one row, so the hamburger takes over (core only switches
 * under 600px). Layout: logo on the left; Book a Demo, then the menu button, on the right.
 */
@media (max-width: 1023px) {
	.as-header__bar { gap: 0.75rem; }
	.as-header__bar .as-logo { margin-inline-end: auto; }
	.as-header__cta { order: 2; }
	.as-nav { flex: none; order: 3; }
	.as-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.as-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.as-nav .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }
}

@media (max-width: 600px) {
	.as-header__cta .wp-block-button__link {
		padding: 0.5rem 1rem;
		font-size: var(--wp--preset--font-size--small);
	}
}

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

.as-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--60);
}

.as-hero__cols { gap: var(--wp--preset--spacing--60); }

.as-hero > * { position: relative; z-index: 1; }

/* Faint grid fading out from the centre, plus a warm glow behind the product window. */
.as-hero > .as-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	max-width: none !important;
	margin: 0 !important;
	pointer-events: none;
	background:
		radial-gradient(42% 60% at 74% 52%, rgba(239, 152, 32, 0.30), rgba(223, 34, 41, 0.10) 45%, transparent 75%),
		linear-gradient(rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px;
	-webkit-mask-image: radial-gradient(70% 90% at 72% 50%, #000 35%, transparent 100%);
	mask-image: radial-gradient(70% 90% at 72% 50%, #000 35%, transparent 100%);
}

.as-hero__badge {
	display: inline-flex !important;
	align-items: center;
	gap: 0.6rem;
	padding: 0.35rem 0.9rem 0.35rem 0.35rem;
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.35);
	box-shadow: var(--as-glow);
	color: var(--wp--preset--color--title);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.as-hero__badge:hover {
	color: var(--wp--preset--color--title);
	border-color: rgba(223, 34, 41, 0.6);
	transform: translateY(-1px);
}

.as-hero__badge-new {
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--white);
	font-size: 0.75rem;
	font-weight: 700;
}

h1.as-hero__title {
	margin: 1.25rem 0 0 !important;
	font-size: clamp(2.375rem, 4.4vw, 3.75rem);
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--ink);
}

.as-hero__lead {
	max-width: 520px;
	margin: 1.25rem 0 0 !important;
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

.as-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-start: var(--wp--preset--spacing--40);
}

.as-btn--primary {
	background: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--white) !important;
	box-shadow: 0 12px 28px -12px rgba(223, 34, 41, 0.7);
}

.as-btn--primary:hover { box-shadow: 0 16px 32px -12px rgba(223, 34, 41, 0.8); }

.as-btn--ghost {
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(19, 26, 26, 0.15);
	color: var(--wp--preset--color--ink) !important;
}

.as-btn--ghost:hover { border-color: rgba(19, 26, 26, 0.35); }

.as-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.as-hero__points li::before {
	content: "\2713";
	margin-inline-end: 0.4rem;
	font-weight: 700;
	color: var(--wp--preset--color--orange);
}

/* Product video framed as an app window. */
.as-hero__media { margin: 0; }

.as-window {
	position: relative;
	border-radius: 18px;
	padding: 0 6px 6px;
	background: linear-gradient(180deg, #FFFFFF, #FBF5EE);
	border: 1px solid rgba(237, 135, 35, 0.25);
	box-shadow:
		0 2px 4px rgba(19, 26, 26, 0.04),
		0 40px 80px -30px rgba(223, 34, 41, 0.45),
		0 20px 50px -20px rgba(19, 26, 26, 0.25);
}

.as-window__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding-inline: 10px;
}

.as-window__bar i {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #F1E3D3;
}

.as-window__bar i:first-child { background: #F2826B; }
.as-window__bar i:nth-child(2) { background: #F6C35C; }
.as-window__bar i:nth-child(3) { background: #8FD19E; }

.as-window__bar span {
	flex: 1;
	margin-inline-end: 39px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.as-window__screen {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	background: var(--wp--preset--color--cream);
}

.as-window__screen video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 832 / 464;
}

/* A YouTube hero video inside the window: the window's own rounded corners do the clipping. */
.as-window__screen .as-yt { border-radius: 0; }

.as-window__play {
	display: none;
	position: absolute;
	inset: 0;
	margin: auto;
	width: max-content;
	height: max-content;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 1.25rem 0.5rem 0.5rem;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 20px 40px -16px rgba(19, 26, 26, 0.45);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.as-window__play svg {
	box-sizing: content-box;
	padding: 14px 13px 14px 15px;
	border-radius: 50%;
	background: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--white);
}

.as-window__play:hover { transform: scale(1.04); }

.as-window__screen.is-ready .as-window__play { display: inline-flex; }

.as-window__screen.is-playing .as-window__play { display: none; }

@media (max-width: 600px) {
	.as-hero__actions .as-btn { flex: 1 1 100%; }
	.as-window__bar span { margin-inline-end: 0; }
	.as-window__play span { display: none; }
	.as-window__play { padding: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.as-hero__badge:hover, .as-window__play:hover { transform: none; }
}

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

.as-logos {
	padding-block: var(--wp--preset--spacing--50);
	border-block: 1px solid var(--wp--preset--color--line);
}

.as-logos__label {
	margin: 0 0 1.5rem;
	color: var(--wp--preset--color--muted);
}

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

.as-marquee__track {
	display: flex;
	width: max-content;
	animation: as-marquee 45s linear infinite;
}

.as-marquee:hover .as-marquee__track { animation-play-state: paused; }

.as-marquee__list {
	display: flex;
	align-items: center;
	gap: 3.5rem;
	margin: 0;
	padding: 0 3.5rem 0 0;
	list-style: none;
}

.as-marquee__list img {
	display: block;
	width: auto;
	height: 36px;
	max-width: 150px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.as-marquee__list img:hover {
	filter: none;
	opacity: 1;
}

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

@media (prefers-reduced-motion: reduce) {
	.as-marquee { -webkit-mask-image: none; mask-image: none; }
	.as-marquee__track { animation: none; width: auto; }
	.as-marquee__list { flex-wrap: wrap; justify-content: center; gap: 1.5rem 2.5rem; padding: 0; }
	.as-marquee__list[aria-hidden="true"] { display: none; }
}

/* ---------- Features (bento) ---------- */

.as-feat {
	background:
		radial-gradient(700px circle at 50% 0%, rgba(239, 152, 32, 0.12), transparent 60%),
		var(--wp--preset--color--white);
}

.as-feat h2.has-text-align-center { margin-block: 0.5rem 0.75rem; }

.as-bento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.as-bento__tile {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--as-radius-card);
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.2);
	box-shadow: 0 1px 2px rgba(19, 26, 26, 0.05), 0 16px 40px -18px rgba(19, 26, 26, 0.22);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.as-bento__tile:is(:hover, :focus-within) {
	transform: translateY(-4px);
	border-color: rgba(239, 152, 32, 0.55);
	box-shadow: 0 24px 50px -20px rgba(223, 34, 41, 0.35);
}

/* Hero: spans two columns, copy beside the illustration. */
.as-bento__tile--hero {
	grid-column: span 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	background:
		radial-gradient(500px circle at 100% 0%, rgba(239, 152, 32, 0.18), transparent 60%),
		linear-gradient(160deg, #FFF8EE, var(--wp--preset--color--white));
}

.as-bento__copy h3 {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--title);
}


.as-bento__tile--hero .as-bento__copy h3 { font-size: var(--wp--preset--font-size--x-large); }

.as-bento__copy p { margin: 0 0 0.75rem; }

.as-bento__more {
	font-weight: 700;
	text-decoration: none;
}

/* Mini illustrations (decorative). */
.as-mock {
	border-radius: 16px;
	background: #FBF7F2;
	border: 1px solid var(--wp--preset--color--line);
	padding: 1rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--title);
}

.as-mock em {
	font-style: normal;
	font-weight: 700;
	font-size: 0.6875rem;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	white-space: nowrap;
}

.as-mock em.ok { background: #E3F6EA; color: #1E7A43; }
.as-mock em.bad { background: #FDE4E4; color: #B42326; }
.as-mock em.warn { background: #FFF1D6; color: #9A5B00; }

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

.as-mock__tiers span {
	display: flex;
	flex-direction: column;
	padding: 0.6rem 0.75rem;
	border-radius: 12px;
	color: #fff;
	font-size: 0.75rem;
}

.as-mock__tiers b { font-size: 1.375rem; line-height: 1.1; }
.as-mock__tiers .t-plat { background: linear-gradient(135deg, #6C63E8, #4F46D6); }
.as-mock__tiers .t-gold { background: linear-gradient(135deg, #F6C744, #E8A800); }
.as-mock__tiers .t-silver { background: linear-gradient(135deg, #B9C2C7, #8E989E); }
.as-mock__tiers .t-bronze { background: linear-gradient(135deg, #D2552F, #B1361C); }

.as-mock__dashrow {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 1.25rem;
	margin-block-start: 1rem;
	padding: 1rem;
	border-radius: 12px;
	background: #fff;
}

.as-mock__ring {
	display: grid;
	place-items: center;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: conic-gradient(#EF9820 0, #DF2229 calc(var(--v) * 1%), #F1ECE6 0);
}

.as-mock__ring span {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: #fff;
	text-align: center;
	font-size: 0.6875rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.2;
}

.as-mock__ring b { display: block; font-size: 1.375rem; color: var(--wp--preset--color--ink); }

.as-mock__bars { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.625rem; }

.as-mock__bars li {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr) 2.5rem;
	align-items: center;
	gap: 0.625rem;
}

.as-mock__bars i,
.as-mock__progress span {
	position: relative;
	display: block;
	height: 8px;
	border-radius: 999px;
	background: #F1ECE6;
	overflow: hidden;
}

.as-mock__bars i::after,
.as-mock__progress span::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--w);
	border-radius: inherit;
	background: var(--c, var(--wp--preset--gradient--brand));
}

.as-mock__bars b { text-align: end; }

.as-mock__item,
.as-mock__task {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.625rem;
	border-radius: 10px;
	background: #fff;
}

.as-mock__item + .as-mock__item,
.as-mock__task + .as-mock__task { margin-block-start: 0.4rem; }

.as-mock__item span,
.as-mock__task span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.as-mock__photo {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: linear-gradient(135deg, #F7B267, #DF2229);
}

.as-mock__task img {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(237, 135, 35, 0.4);
}

.as-mock__task i {
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wp--preset--gradient--brand-angled);
	color: #fff;
	font-style: normal;
	font-size: 0.625rem;
	font-weight: 700;
}

.as-mock__progress { margin-block-start: 0.75rem; }
.as-mock__progress b { display: block; margin-block-start: 0.35rem; font-size: 0.75rem; color: var(--wp--preset--color--muted); }

.as-mock__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: #131A1A;
	color: #fff;
	font-weight: 700;
	font-size: 0.75rem;
}

.as-mock__note { margin: 0.75rem 0 0; color: var(--wp--preset--color--muted); font-size: 0.75rem; }
.as-mock__note b { display: block; color: var(--wp--preset--color--title); font-size: 0.8125rem; }

.as-mock__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }

.as-mock__days span {
	display: grid;
	place-items: center;
	height: 36px;
	border-radius: 10px;
	background: #fff;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
}

.as-mock__days span.on { background: var(--wp--preset--gradient--brand-angled); color: #fff; }

.as-bento__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0 0 0.75rem;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: var(--wp--preset--gradient--brand);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

/* The highlight tile's ticked points: titles only, with room around them. */
.as-bento__points {
	display: grid;
	gap: 0.9rem;
	margin: 1.25rem 0 1.75rem;
	padding: 0;
	list-style: none;
}

.as-bento__points li {
	padding-inline-start: 1.75rem;
	position: relative;
	font-weight: 700;
	color: var(--wp--preset--color--title);
}

.as-bento__points li::before {
	content: "\2713";
	position: absolute;
	inset-inline-start: 0;
	font-weight: 700;
	color: var(--wp--preset--color--orange);
}

.as-bento__points b { display: block; color: var(--wp--preset--color--title); }

/* Action plan illustration in the highlight tile: header, three actions with owners, progress. */
.as-mock--plan { display: grid; gap: 0.5rem; }
.as-mock--plan .as-mock__task + .as-mock__task { margin-block-start: 0; }
.as-mock--plan .as-mock__task { padding-block: 0.6rem; }
.as-mock--plan .as-mock__task span { color: var(--wp--preset--color--muted); }
.as-mock--plan .as-mock__task span b { display: block; color: var(--wp--preset--color--title); }
.as-mock--plan .as-mock__progress { margin-block-start: 0.25rem; }

.as-mock em.ai { background: #131A1A; color: #fff; }

.as-mock--ai { display: grid; gap: 0.5rem; }

.as-mock__voice {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	border-radius: 12px;
	background: #fff;
}

.as-mock__voice p { margin: 0; font-style: italic; }

.as-mock__wave { display: inline-flex; align-items: center; gap: 3px; height: 28px; }

.as-mock__wave i {
	width: 3px;
	border-radius: 2px;
	background: var(--wp--preset--gradient--brand);
	animation: as-wave 1.2s ease-in-out infinite;
}

.as-mock__wave i:nth-child(1) { height: 30%; }
.as-mock__wave i:nth-child(2) { height: 70%; animation-delay: -0.2s; }
.as-mock__wave i:nth-child(3) { height: 100%; animation-delay: -0.4s; }
.as-mock__wave i:nth-child(4) { height: 55%; animation-delay: -0.6s; }
.as-mock__wave i:nth-child(5) { height: 85%; animation-delay: -0.8s; }
.as-mock__wave i:nth-child(6) { height: 40%; animation-delay: -1s; }
.as-mock__wave i:nth-child(7) { height: 65%; animation-delay: -1.1s; }

@keyframes as-wave {
	50% { transform: scaleY(0.4); }
}

.as-mock__item span b { display: block; }

.as-mock__item--photo span { white-space: normal; }

.as-mock__photo--lg { width: 44px; height: 44px; border-radius: 8px; }

/* Evidence photo in the scoring tile: a real showroom shot with its capture time. */
.as-mock__shot { position: relative; margin: 0.4rem 0; border-radius: 10px; overflow: hidden; }
.as-mock__shot img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 5 / 2; object-fit: cover; }
.as-mock__shot figcaption { position: absolute; inset-inline-start: 0.5rem; inset-block-end: 0.5rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(19, 26, 26, 0.78); color: #fff; font-size: 0.6875rem; font-weight: 700; }

.as-mock--dashmini {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.875rem;
}

.as-mock__ring--sm { width: 84px; height: 84px; }
.as-mock__ring--sm span { width: 62px; height: 62px; font-size: 0.625rem; }
.as-mock__ring--sm b { font-size: 1rem; }

.as-mock__bars--sm li { grid-template-columns: 2.75rem minmax(0, 1fr) 2.25rem; gap: 0.4rem; font-size: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
	.as-mock__wave i { animation: none; }
}

@media (max-width: 1024px) {
	.as-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-bento__tile--hero { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
	.as-bento { grid-template-columns: minmax(0, 1fr); }
	.as-bento__tile--hero { grid-column: auto; }
	.as-mock__tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-mock__dashrow { grid-template-columns: minmax(0, 1fr); justify-items: center; }
	.as-mock__bars { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.as-bento__tile:is(:hover, :focus-within) { transform: none; }
}

/* ---------- How it works ---------- */

.as-how {
	background:
		radial-gradient(640px circle at 8% 0%, rgba(239, 152, 32, 0.16), transparent 60%),
		radial-gradient(560px circle at 95% 100%, rgba(223, 34, 41, 0.10), transparent 60%),
		var(--wp--preset--color--cream);
}

.as-how h2.has-text-align-center { margin-block: 0.5rem 0.75rem; }

.as-section__intro {
	max-width: 640px;
	margin-inline: auto !important;
	margin-block-end: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--muted);
}

.as-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

/* Dashed connector between the steps, visible in the gaps between the cards. */
.as-steps::before {
	content: "";
	position: absolute;
	inset-inline: 8%;
	top: 52px;
	border-top: 2px dashed rgba(237, 135, 35, 0.45);
}

/* WordPress's flow layout adds a top margin to every card after the first; the grid gap handles spacing. */
.as-steps > .as-step { margin-block: 0; }

.as-step {
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border: 1px solid rgba(237, 135, 35, 0.22);
	box-shadow: 0 1px 2px rgba(19, 26, 26, 0.06), 0 16px 40px -16px rgba(19, 26, 26, 0.24);
}

.as-step__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.as-step__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--wp--preset--gradient--brand-angled);
	color: var(--wp--preset--color--white);
	box-shadow: var(--as-glow);
	transition: background 0.35s ease, color 0.35s ease;
}

.as-step__num {
	font-size: 4rem;
	font-weight: 700;
	line-height: 0.9;
	color: rgba(237, 135, 35, 0.14);
	transition: color 0.35s ease;
}

.as-step h3 { margin-block-start: 1.25rem; }

.as-step__points {
	list-style: none;
	margin: auto 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--wp--preset--color--line);
	display: grid;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--title);
	transition: border-color 0.35s ease;
}

.as-step__points li {
	display: flex;
	gap: 0.5rem;
}

.as-step__points li::before {
	content: "\2713";
	flex: none;
	font-weight: 700;
	color: var(--wp--preset--color--orange);
}

.as-step:is(:hover, :focus-within) .as-step__icon {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--red);
}

.as-step:is(:hover, :focus-within) .as-step__num { color: rgba(255, 255, 255, 0.3); }

.as-step:is(:hover, :focus-within) .as-step__points { border-top-color: rgba(255, 255, 255, 0.35); }

.as-step:is(:hover, :focus-within) .as-step__points { color: var(--wp--preset--color--white); }

.as-step:is(:hover, :focus-within) .as-step__points li::before { color: var(--wp--preset--color--white); }

@media (max-width: 781px) {
	.as-steps { grid-template-columns: minmax(0, 1fr); }
	.as-steps::before { display: none; }
}

/* ---------- Testimonials (dark showcase) ---------- */

.as-proof {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(700px circle at 0% 0%, rgba(239, 152, 32, 0.28), transparent 60%),
		radial-gradient(700px circle at 100% 100%, rgba(223, 34, 41, 0.26), transparent 60%),
		#131A1A;
	color: rgba(255, 255, 255, 0.78);
}

.as-proof h2 { color: var(--wp--preset--color--white); margin-block: 0.5rem var(--wp--preset--spacing--50); }

.as-proof .as-eyebrow { color: #F7B267; }

.as-proof__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.as-proof__card {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-radius: var(--as-radius-card);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
	border: 1px solid rgba(255, 255, 255, 0.12);
	transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.as-proof__card:is(:hover, :focus-within) {
	transform: translateY(-4px);
	border-color: rgba(239, 152, 32, 0.6);
	box-shadow: 0 24px 60px -24px rgba(223, 34, 41, 0.55);
}

/* With the customer's site photo (user, 2026-10-13: like the industry cards): the photo fills the card behind the text
   under a dark gradient, darker where the quote sits; it zooms in slightly on hover. */
.as-proof__card.has-photo { position: relative; overflow: hidden; isolation: isolate; background: var(--wp--preset--color--ink); }
.as-proof__photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.as-proof__photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 0.6s ease; }
.as-proof__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 26, 26, 0.5) 0%, rgba(19, 26, 26, 0.78) 35%, rgba(19, 26, 26, 0.93) 70%, rgba(19, 26, 26, 0.96) 100%); }
.as-proof__card:is(:hover, :focus-within) .as-proof__photo img { transform: scale(1.04); }

.as-proof__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.as-proof__logo {
	display: inline-flex;
	align-items: center;
	height: 52px;
	padding: 0.5rem 1rem;
	border-radius: 12px;
	background: var(--wp--preset--color--white);
}

.as-proof__logo img {
	height: 32px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
}

.as-proof__link {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: #F7B267 !important;
	text-decoration: none;
	white-space: nowrap;
}

.as-proof__link:hover { color: var(--wp--preset--color--white) !important; }

.as-proof__metric {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding-block-end: 1.25rem;
	border-block-end: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.7);
}

.as-proof__metric span {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	background: linear-gradient(90deg, #F7B267 0%, #EF9820 40%, #F25C3B 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.as-proof__quote {
	flex: 1;
	margin: 0;
	padding: 0;
	border: 0;
}

.as-proof__quote p {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.9);
}

.as-proof__by {
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

.as-proof__by img {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 0 3px rgba(239, 152, 32, 0.45);
}

.as-proof__by span {
	display: flex;
	flex-direction: column;
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, 0.65);
}

.as-proof__by strong {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--white);
}

.as-proof__all { margin-block-start: var(--wp--preset--spacing--50); }

.as-proof__all a {
	font-weight: 700;
	color: var(--wp--preset--color--white);
	text-decoration: none;
	border-block-end: 2px solid #EF9820;
	padding-block-end: 2px;
}

@media (max-width: 781px) {
	.as-proof__grid { grid-template-columns: minmax(0, 1fr); }
	.as-proof__card { padding: var(--wp--preset--spacing--40); }
}

@media (prefers-reduced-motion: reduce) {
	.as-proof__card:is(:hover, :focus-within) { transform: none; }
}

/* ---------- Industries ---------- */

.as-industries {
	background:
		radial-gradient(640px circle at 100% 0%, rgba(239, 152, 32, 0.16), transparent 60%),
		radial-gradient(560px circle at 0% 100%, rgba(223, 34, 41, 0.08), transparent 60%),
		var(--wp--preset--color--cream);
}

.as-industries h2.has-text-align-center { margin-block: 0.5rem 0.75rem; }

.as-ind {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

/* Five industries: the first (Automotive) spans two columns so the rows balance (2+1, then 3). */
.as-ind > .as-ind__card:first-child { grid-column: span 2; }

.as-ind__card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--as-radius-card);
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.2);
	box-shadow: 0 1px 2px rgba(19, 26, 26, 0.05), 0 16px 40px -18px rgba(19, 26, 26, 0.22);
	color: var(--wp--preset--color--body);
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}


.as-ind__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 0.5rem;
}

.as-ind__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--wp--preset--gradient--brand-angled);
	color: var(--wp--preset--color--white);
	box-shadow: var(--as-glow);
	transition: background 0.35s ease, color 0.35s ease;
}

.as-ind__go {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #FFE9D2;
	color: var(--wp--preset--color--red);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}

/* Shares the site-wide card hover (orange flash + gradient fill); adapt the inner parts. */
.as-ind__card > * + * { margin-block-start: 0; }

.as-ind__card:is(:hover, :focus-within) :is(.as-ind__name, .as-ind__text) { color: var(--wp--preset--color--white); }

.as-ind__card:is(:hover, :focus-within) .as-ind__icon {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--red);
	box-shadow: none;
}

.as-ind__card:is(:hover, :focus-within) .as-ind__go {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--red);
	transform: translateX(3px);
}

.as-ind__card:is(:hover, :focus-within) .as-ind__chips span {
	background: rgba(255, 255, 255, 0.22);
	color: var(--wp--preset--color--white);
}

.as-ind__name {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--wp--preset--color--title);
}

.as-ind__text { flex: 1; }

.as-ind__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-block-start: 0.25rem;
}

.as-ind__chips span {
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: #FFF4E5;
	color: #9A4A0B;
	font-size: 0.75rem;
	font-weight: 700;
}

/* Cards with the industry photo (user, 2026-10-13): the photo fills the card under a dark gradient, text turns white,
   chips become glass; on hover the brand gradient tints the photo instead of covering it, and the photo zooms in. */
.as-ind__card.has-photo { min-block-size: 300px; justify-content: flex-end; border-color: transparent; background: var(--wp--preset--color--ink); }
.as-ind__card.has-photo .as-ind__top { margin-block-end: auto; }
.as-ind__photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.as-ind__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 0.6s ease; }
.as-ind__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 26, 26, 0.2) 0%, rgba(19, 26, 26, 0.45) 40%, rgba(19, 26, 26, 0.9) 100%); }
.as-ind__card.has-photo :is(.as-ind__name, .as-ind__text) { color: var(--wp--preset--color--white); }
.as-ind__card.has-photo .as-ind__text { flex: 0 0 auto; color: rgba(255, 255, 255, 0.85); }
.as-ind__card.has-photo .as-ind__chips span { background: rgba(255, 255, 255, 0.16); color: var(--wp--preset--color--white); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.as-ind__card.has-photo .as-ind__go { background: rgba(255, 255, 255, 0.18); color: var(--wp--preset--color--white); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.as-ind__card.has-photo:is(:hover, :focus-within)::before { opacity: 0.55; }
.as-ind__card.has-photo:is(:hover, :focus-within) .as-ind__photo img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
	.as-ind__card.has-photo:is(:hover, :focus-within) .as-ind__photo img { transform: none; }
}

.as-askbar {
	display: flex;
	align-items: center;
	gap: 1rem 1.25rem;
	flex-wrap: wrap;
	margin-block-start: var(--wp--preset--spacing--40);
	padding: 1rem 1rem 1rem 1.25rem;
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	border: 1px dashed rgba(237, 135, 35, 0.55);
}

.as-askbar__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #FFE9D2;
	color: var(--wp--preset--color--red);
}

.as-askbar__text {
	flex: 1;
	min-width: 240px;
	margin: 0;
}

.as-askbar__text strong { color: var(--wp--preset--color--ink); }

.as-askbar__actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.as-askbar__btn {
	padding: 0.7rem 1.4rem;
	border-radius: 999px;
	background: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--white) !important;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.as-askbar__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -10px rgba(223, 34, 41, 0.6);
}

.as-askbar__link {
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

@media (max-width: 781px) {
	.as-askbar { border-radius: var(--as-radius-card); padding: 1.25rem; }
	.as-askbar__actions { width: 100%; flex-wrap: wrap; }
}

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

@media (max-width: 600px) {
	.as-ind { grid-template-columns: minmax(0, 1fr); }
	.as-ind > .as-ind__card:first-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.as-ind__card:is(:hover, :focus-within) .as-ind__go { transform: none; }
}

/* ---------- Use-case tiles ---------- */

.as-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

/* Flow layout adds a top margin to every tile after the first; the grid gap handles spacing. */
.as-tiles > .as-tile { margin-block: 0; }

.as-tile {
	border: 1px solid rgba(237, 135, 35, 0.18);
}

.as-tile__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(239, 152, 32, 0.16), rgba(223, 34, 41, 0.12));
	color: var(--wp--preset--color--red);
	transition: background 0.35s ease, color 0.35s ease;
}

.as-tile h3 { margin-block-start: 1rem; }

.as-tile:is(:hover, :focus-within) .as-tile__icon {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--red);
}

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

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

.as-tile h3 a {
	color: inherit;
	text-decoration: none;
}

.as-tile h3 a::after { content: "\00a0\2192"; color: var(--wp--preset--color--orange); }



/* ---------- Latest posts ---------- */

.as-blog {
	background:
		radial-gradient(600px circle at 0% 0%, rgba(239, 152, 32, 0.14), transparent 60%),
		var(--wp--preset--color--cream);
}

/* Right after the cream industries section (home, since 2026-10-15): one cream band, so don't double the padding. */
.as-industries + .as-blog { padding-block-start: 0; }

.as-blog__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-block-end: var(--wp--preset--spacing--50);
}

.as-blog__head .as-eyebrow { margin: 0; }

.as-blog__head h2 { margin: 0.5rem 0 0; }

.as-blog__all { font-weight: 700; text-decoration: none; white-space: nowrap; }

.as-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.as-post {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--as-radius-card);
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.2);
	box-shadow: 0 1px 2px rgba(19, 26, 26, 0.05), 0 16px 40px -18px rgba(19, 26, 26, 0.22);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.as-post:is(:hover, :focus-within) {
	transform: translateY(-4px);
	border-color: rgba(239, 152, 32, 0.6);
	box-shadow: 0 24px 50px -20px rgba(223, 34, 41, 0.35);
}

.as-post__cover {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	color: rgba(255, 255, 255, 0.95);
	background-size: 140% 140%;
	transition: background-position 0.6s ease;
}

.as-post:hover .as-post__cover { background-position: 100% 100%; }

.as-post__cover--a { background-image: linear-gradient(135deg, #F7B267, #EF9820 45%, #DF2229); }
.as-post__cover--b { background-image: linear-gradient(135deg, #2B3236, #131A1A 55%, #5A2A1E); }
.as-post__cover--c { background-image: linear-gradient(135deg, #F25C3B, #DF2229 50%, #8E1B1F); }

/* Cover photo: fills the 16:9 frame, a warm shade at the bottom edge, a slow zoom on hover. */
.as-post__cover--photo {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--title);
}

.as-post__cover--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(19, 26, 26, 0.35));
	pointer-events: none;
}

.as-post__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.as-post:hover .as-post__img { transform: scale(1.05); }

.as-post__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
	padding: var(--wp--preset--spacing--40);
}

.as-post__body p { margin: 0; }

.as-post__cat {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange-red);
}

.as-post__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.35;
}

.as-post__title a {
	color: var(--wp--preset--color--title);
	text-decoration: none;
}

/* Whole card is clickable through the title link. */
.as-post__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.as-post:hover .as-post__title a { color: var(--wp--preset--color--red); }

.as-post__excerpt { flex: 1; font-size: var(--wp--preset--font-size--small); }

.as-post__meta { font-size: 0.8125rem; color: var(--wp--preset--color--muted); }

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

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

@media (prefers-reduced-motion: reduce) {
	.as-post:is(:hover, :focus-within) { transform: none; }
	.as-post:hover .as-post__img { transform: none; }
}

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

.as-faq { display: grid; gap: 0.75rem; }

.as-faq__item {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: 1rem 1.25rem;
	margin: 0;
}

.as-faq__item summary {
	cursor: pointer;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

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

.as-faq__item summary::after {
	content: "+";
	color: var(--wp--preset--color--orange);
	font-weight: 700;
}

.as-faq__item[open] summary::after { content: "−"; }

.as-faq__item p { margin-block: 0.75rem 0; }

/* ---------- Final CTA ---------- */

.as-cta__card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--60) clamp(1.5rem, 5vw, 4.5rem);
	border-radius: 32px;
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 48px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 48px),
		linear-gradient(125deg, #EF9820 0%, #F25C3B 45%, #DF2229 100%);
	box-shadow: 0 30px 80px -30px rgba(223, 34, 41, 0.6);
	color: var(--wp--preset--color--white);
}

/* Soft drifting light blobs. */
.as-cta__glow {
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(60px);
	pointer-events: none;
}

.as-cta__glow--a {
	width: 420px;
	height: 420px;
	top: -160px;
	left: -120px;
	background: rgba(255, 214, 150, 0.55);
	animation: as-drift 14s ease-in-out infinite alternate;
}

.as-cta__glow--b {
	width: 360px;
	height: 360px;
	bottom: -180px;
	right: 10%;
	background: rgba(255, 255, 255, 0.28);
	animation: as-drift 18s ease-in-out infinite alternate-reverse;
}

@keyframes as-drift {
	to { transform: translate(60px, 40px) scale(1.1); }
}

.as-cta__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

.as-cta__title {
	margin: 0.75rem 0 1rem;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.1;
	color: var(--wp--preset--color--white);
}

.as-cta__lead {
	margin: 0;
	max-width: 520px;
	font-size: var(--wp--preset--font-size--medium);
	color: rgba(255, 255, 255, 0.9);
}

.as-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-start: var(--wp--preset--spacing--40);
}

.as-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.875rem 1.75rem;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.as-btn:hover { transform: translateY(-2px); }

.as-btn--light {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--red) !important;
	box-shadow: 0 10px 24px -10px rgba(19, 26, 26, 0.45);
}

.as-btn--outline {
	border: 2px solid rgba(255, 255, 255, 0.85);
	color: var(--wp--preset--color--white) !important;
}

.as-btn--outline:hover { background: rgba(255, 255, 255, 0.15); }

.as-cta__points {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, 0.92);
}

.as-cta__points li::before {
	content: "\2713";
	margin-inline-end: 0.4rem;
	font-weight: 700;
}

.as-cta__visual img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 24px 40px rgba(19, 26, 26, 0.35));
}

@media (max-width: 781px) {
	.as-cta__card { grid-template-columns: minmax(0, 1fr); text-align: center; }
	.as-cta__lead { margin-inline: auto; }
	.as-cta__buttons, .as-cta__points { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.as-cta__glow { animation: none; }
	.as-btn:hover { transform: none; }
}

/* ---------- Footer ---------- */

.as-footer {
	position: relative;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--70) 0;
	background:
		radial-gradient(600px circle at 0% 0%, rgba(239, 152, 32, 0.16), transparent 60%),
		radial-gradient(500px circle at 100% 100%, rgba(223, 34, 41, 0.08), transparent 60%),
		var(--wp--preset--color--cream);
	border-block-start: 1px solid rgba(237, 135, 35, 0.2);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.as-footer a {
	color: var(--wp--preset--color--body);
	text-decoration: none;
	transition: color 0.2s ease;
}

.as-footer a:hover { color: var(--wp--preset--color--orange); }

.as-footer__inner { position: relative; z-index: 1; }

.as-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
	gap: var(--wp--preset--spacing--60);
}

.as-footer__tagline {
	margin: 1.25rem 0;
	max-width: 340px;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--title);
}

.as-footer__offices,
.as-footer__social,
.as-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.as-footer__offices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.as-footer__offices li {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.as-footer__offices svg { color: #EF9820; }

.as-footer__social {
	display: flex;
	gap: 0.625rem;
	margin-block-start: 1.5rem;
}

.as-footer__social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(237, 135, 35, 0.35);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--title);
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.as-footer__social a:hover {
	background: var(--wp--preset--gradient--brand);
	border-color: transparent;
	color: var(--wp--preset--color--white);
}

.as-footer__nav {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.as-footer__heading {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.as-footer__col ul {
	display: grid;
	gap: 0.625rem;
}

.as-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--30);
	border-block-start: 1px solid rgba(19, 26, 26, 0.1);
	color: var(--wp--preset--color--muted);
}

.as-footer__bottom p { margin: 0; }

.as-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
}

.as-footer__lang {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--wp--preset--color--body);
}



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

/* Five link columns are too narrow on tablets: three per row. */
@media (max-width: 800px) {
	.as-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.as-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Mobile menu overlay: submenus are plain lists, not floating cards. */
.as-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	box-shadow: none;
	padding: 0;
}

/* ---------- Shared: breadcrumb, pill, section heading, YouTube video ---------- */

.as-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.as-crumbs li + li::before { content: "/"; margin-inline-end: 0.4rem; color: var(--wp--preset--color--faint); }
.as-crumbs a { color: var(--wp--preset--color--body); text-decoration: none; }
.as-crumbs a:hover { color: var(--wp--preset--color--orange-red); }

.as-pill {
	display: inline-block;
	margin: 0 0 1.25rem;
	padding: 0.4rem 0.95rem;
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.35);
	box-shadow: var(--as-glow);
	color: var(--wp--preset--color--orange-red);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Section heading row (autosmart_section_head()): eyebrow + H2 left, link or filter right. */
.as-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	margin-block-end: var(--wp--preset--spacing--50);
}

.as-head .as-eyebrow { margin: 0 0 0.6rem; font-weight: 700; }

.as-head h2 {
	margin: 0;
	max-inline-size: 30ch;
	font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.as-head__link {
	font-weight: 700;
	color: var(--wp--preset--color--orange-red);
	text-decoration: none;
}

/* Click-to-load YouTube (inc/case-studies.php + assets/js/youtube.js). */
.as-yt {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 28px;
	background: var(--wp--preset--color--ink);
}

.as-yt__link, .as-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.as-yt__link img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.as-yt__link:hover img { transform: scale(1.04); }

.as-yt__play {
	position: absolute;
	inset: 50% auto auto 50%;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--white);
	box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 18px 36px -10px rgba(223, 34, 41, 0.7);
	transition: transform 0.3s ease;
}

.as-yt__link:hover .as-yt__play { transform: translate(-50%, -50%) scale(1.08); }

/* "▶ Watch" button (autosmart_video_button()) and the pop-up player it opens. */
.as-watch {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.55rem;
	padding: 0.4rem 0.95rem 0.4rem 0.4rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--wp--preset--color--white) !important;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
	transition: background 0.25s ease;
}

.as-watch:hover { background: rgba(255, 255, 255, 0.18); }

.as-watch__icon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--white);
}

.as-yt-dialog {
	width: min(960px, 92vw);
	padding: 0;
	overflow: visible;
	border: 0;
	border-radius: 20px;
	background: var(--wp--preset--color--ink);
	box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.6);
}

.as-yt-dialog::backdrop { background: rgba(19, 26, 26, 0.75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.as-yt-dialog__frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px; }
.as-yt-dialog__frame iframe { display: block; width: 100%; height: 100%; border: 0; }

.as-yt-dialog__close {
	position: absolute;
	inset-block-start: -18px;
	inset-inline-end: -18px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5);
}

@media (max-width: 600px) {
	.as-yt-dialog__close { inset-block-start: -50px; inset-inline-end: 0; }
}

/* ---------- Case studies hub (templates/page-case-studies.html) ---------- */

/* Hero: text left, collage of real results right, stats bar below. */
.as-hubhero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	background:
		radial-gradient(55% 70% at 85% 35%, rgba(239, 152, 32, 0.22), transparent 70%),
		radial-gradient(40% 60% at 0% 100%, rgba(223, 34, 41, 0.08), transparent 70%),
		var(--wp--preset--color--cream);
}

.as-hubhero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px;
	-webkit-mask-image: radial-gradient(60% 80% at 75% 40%, #000 30%, transparent 100%);
	mask-image: radial-gradient(60% 80% at 75% 40%, #000 30%, transparent 100%);
}

.as-hubhero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

.as-hubhero__title {
	margin: 0 0 1.25rem;
	font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
}

.as-hubhero__lead {
	max-inline-size: 34rem;
	margin: 0 0 2rem;
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--wp--preset--color--body);
}

.as-hubhero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

.as-hubhero__jump {
	font-weight: 700;
	color: var(--wp--preset--color--title);
	text-decoration: none;
	border-block-end: 2px solid rgba(237, 135, 35, 0.5);
	padding-block-end: 2px;
}

.as-hubhero__jump:hover { color: var(--wp--preset--color--orange-red); border-color: currentColor; }

.as-hubhero__faces {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-block-start: 2.25rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.as-hubhero__faces strong { color: var(--wp--preset--color--title); }
.as-hubhero__avatars { display: flex; flex: none; }

.as-hubhero__avatars img {
	width: 44px;
	height: 44px;
	margin-inline-start: -12px;
	border: 3px solid var(--wp--preset--color--white);
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 6px 14px -6px rgba(19, 26, 26, 0.4);
}

.as-hubhero__avatars img:first-child { margin-inline-start: 0; }

.as-hubhero__video { position: relative; margin: 0; }

.as-hubhero__glow {
	position: absolute;
	inset: -10% -8%;
	z-index: -1;
	background: radial-gradient(closest-side, rgba(239, 152, 32, 0.45), rgba(223, 34, 41, 0.16) 60%, transparent);
	filter: blur(24px);
}

.as-hubhero__video .as-yt {
	box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.65), 0 40px 80px -30px rgba(19, 26, 26, 0.55);
}

.as-hubhero__video figcaption {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: fit-content;
	max-width: 100%;
	margin: 1.75rem auto 0;
	padding: 0.85rem 1.1rem;
	border-radius: 18px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 24px 50px -24px rgba(19, 26, 26, 0.45);
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
}

.as-hubhero__video figcaption strong { display: block; font-size: 0.9375rem; color: var(--wp--preset--color--title); }

.as-hubhero__live {
	flex: none;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--white);
	font-weight: 700;
}

.as-hubhero__logo {
	display: flex;
	flex: none;
	align-items: center;
	padding-inline-start: 1rem;
	border-inline-start: 1px solid var(--wp--preset--color--line);
}

.as-hubhero__logo img { width: auto; max-width: 120px; height: 34px; object-fit: contain; }

.as-featstory__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }

.as-featstory__actions .as-watch {
	align-self: center;
	background: #FFF4E5;
	border-color: rgba(237, 135, 35, 0.3);
	color: var(--wp--preset--color--title) !important;
}

.as-featstory__actions .as-watch:hover { background: #FFE9D2; }

.as-collage { position: relative; min-height: 460px; }

.as-collage__glow {
	position: absolute;
	inset: 8% 6%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(239, 152, 32, 0.38), rgba(223, 34, 41, 0.14) 45%, transparent 70%);
	filter: blur(12px);
}

.as-collage__card {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 230px;
	padding: 1.25rem 1.5rem;
	border-radius: 22px;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.22);
	box-shadow: 0 30px 60px -30px rgba(19, 26, 26, 0.4), 0 2px 6px rgba(19, 26, 26, 0.05);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	animation: as-float 8s ease-in-out infinite;
}

.as-collage__logo { margin-block-end: 0.4rem; }
.as-collage__logo img { width: auto; max-width: 130px; height: 28px; object-fit: contain; }

.as-collage__card strong {
	font-size: 2.25rem;
	line-height: 1.05;
	letter-spacing: -0.02em;
	background: var(--wp--preset--gradient--brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.as-collage__card--1 { top: 0; left: 2%; }

.as-collage__card--2 {
	top: 24%;
	right: 0;
	z-index: 2;
	animation-delay: -2.5s;
	background: radial-gradient(260px circle at 100% 0%, rgba(239, 152, 32, 0.4), transparent 60%), var(--wp--preset--color--ink);
	border-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.72);
}

.as-collage__card--2 .as-collage__logo { align-self: flex-start; padding: 0.4rem 0.6rem; border-radius: 10px; background: var(--wp--preset--color--white); }
.as-collage__card--2 strong { background: linear-gradient(90deg, #FFD9A8, #F7B267 40%, #F25C3B); -webkit-background-clip: text; background-clip: text; }

.as-collage__card--3 { bottom: 20%; left: 0; animation-delay: -5s; }

.as-collage__bubble {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	max-width: 300px;
	padding: 1rem 1.1rem;
	border-radius: 20px 20px 6px 20px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 30px 60px -30px rgba(19, 26, 26, 0.45);
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--wp--preset--color--title);
	animation: as-float 8s ease-in-out infinite;
	animation-delay: -1.2s;
}

.as-collage__bubble img { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.as-collage__bubble p { margin: 0; }
.as-collage__bubble span { display: block; margin-block-start: 0.35rem; font-size: 0.75rem; font-weight: 700; color: var(--wp--preset--color--muted); }

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

/* Featured story: spotlight card with a video or a dark story poster. */
.as-featstory__card {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
	padding: clamp(0.75rem, 1.5vw, 1rem);
	padding-inline-end: clamp(1.5rem, 4vw, 3.5rem);
	border-radius: 36px;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.22);
	box-shadow: 0 40px 80px -40px rgba(223, 34, 41, 0.35), 0 2px 6px rgba(19, 26, 26, 0.05);
}

.as-featstory__card:has(.as-yt) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }

.as-poster {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	min-height: 440px;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border-radius: 28px;
	background:
		radial-gradient(560px circle at 0% 0%, rgba(239, 152, 32, 0.45), transparent 55%),
		radial-gradient(560px circle at 100% 100%, rgba(223, 34, 41, 0.42), transparent 55%),
		var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.75);
}

.as-poster::before,
.as-story__cover::before,
.as-hubquote::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 40px 40px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 40px 40px;
	-webkit-mask-image: radial-gradient(80% 80% at 70% 30%, #000 20%, transparent 100%);
	mask-image: radial-gradient(80% 80% at 70% 30%, #000 20%, transparent 100%);
}

/* With a featured image: the photo fills the poster / card cover under a dark gradient, so the text stays readable. */
.as-cover-photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.as-poster--photo::before,
.as-story__cover--photo::before {
	z-index: -1;
	background:
		radial-gradient(500px circle at 0% 0%, rgba(239, 152, 32, 0.3), transparent 60%),
		linear-gradient(180deg, rgba(19, 26, 26, 0.45) 0%, rgba(19, 26, 26, 0.35) 30%, rgba(19, 26, 26, 0.84) 62%, rgba(19, 26, 26, 0.94) 100%);
	-webkit-mask-image: none;
	mask-image: none;
}

/* The poster's result sits mid-height, so its scrim is evenly dark. */
.as-poster--photo::before {
	background:
		radial-gradient(560px circle at 0% 0%, rgba(239, 152, 32, 0.3), transparent 60%),
		linear-gradient(180deg, rgba(19, 26, 26, 0.6) 0%, rgba(19, 26, 26, 0.72) 45%, rgba(19, 26, 26, 0.92) 100%);
}

.as-story__link:is(:hover, :focus-visible) .as-cover-photo { transform: scale(1.05); }

.as-poster__top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }

.as-poster__logo,
.as-story__logo,
.as-hubquote__logo {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 0.85rem;
	border-radius: 14px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5);
}

.as-poster__logo img { width: auto; max-width: 150px; height: 32px; object-fit: contain; }

.as-poster__chip,
.as-story__video {
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--wp--preset--color--white);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.as-poster__metric { display: flex; flex-direction: column; gap: 0.5rem; font-size: 1.0625rem; }

.as-poster__metric strong,
.as-story__metric strong,
.as-hubquote__metric strong {
	line-height: 0.95;
	letter-spacing: -0.03em;
	background: linear-gradient(90deg, #FFD9A8, #F7B267 35%, #F25C3B);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.as-poster__metric strong { font-size: clamp(3rem, 2rem + 4vw, 5.25rem); }

.as-poster__person { display: flex; align-items: center; gap: 0.85rem; font-size: var(--wp--preset--font-size--small); }
.as-poster__person img { width: 52px; height: 52px; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 50%; object-fit: cover; }
.as-poster__person strong { display: block; font-size: 1rem; color: var(--wp--preset--color--white); }

.as-featstory__body > * { margin-block: 0 1.25rem; }
.as-featstory__body > :last-child { margin-block-end: 0; }
.as-featstory__body .as-btn { gap: 0.5rem; }

.as-featstory__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.as-featstory__chips span {
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	background: #FFF4E5;
	color: #9A4A0B;
	font-size: 0.8125rem;
	font-weight: 700;
}

.as-featstory__chips span:first-child,
.as-featstory__chips .is-video { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); }

.as-featstory__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1.2; letter-spacing: -0.015em; }

.as-featstory__metric { display: flex; flex-direction: column; color: var(--wp--preset--color--muted); }
.as-featstory__metric strong { font-size: 3rem; line-height: 1; }

.as-featstory__quote {
	position: relative;
	margin-inline: 0;
	padding-block-start: 2.25rem;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--wp--preset--color--body);
}

.as-featstory__quote::before {
	content: "\201C";
	position: absolute;
	inset-block-start: -0.6rem;
	inset-inline-start: -0.2rem;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 5rem;
	line-height: 1;
	background: var(--wp--preset--gradient--brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.as-featstory__quote p { margin: 0; }
.as-featstory__quote footer { margin-block-start: 0.75rem; font-size: var(--wp--preset--font-size--small); font-weight: 700; color: var(--wp--preset--color--title); }

/* All stories: cards with a dark cover and the result front and centre. */
.as-stories {
	background:
		radial-gradient(640px circle at 100% 0%, rgba(239, 152, 32, 0.16), transparent 60%),
		radial-gradient(560px circle at 0% 100%, rgba(223, 34, 41, 0.08), transparent 60%),
		var(--wp--preset--color--cream);
}

.as-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.as-filter__pill {
	padding: 0.5rem 1.1rem;
	border-radius: 999px;
	border: 1px solid rgba(237, 135, 35, 0.35);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--title);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.as-filter__pill:hover { border-color: var(--wp--preset--color--orange); }
.as-filter__pill[aria-pressed="true"] { border-color: transparent; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); }

.as-stories__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.as-story[hidden] { display: none; }

/* Exactly two stories: two wide columns, each card with its cover beside the text. */
.as-stories__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.as-stories__grid--two .as-story__link { flex-direction: row; }
.as-stories__grid--two .as-story__cover { flex: 0 0 44%; min-height: 320px; }
.as-stories__grid--two .as-story__metric strong { font-size: clamp(1.75rem, 1.3rem + 1vw, 2.25rem); }

.as-story__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 28px;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.18);
	box-shadow: 0 1px 2px rgba(19, 26, 26, 0.05), 0 24px 50px -30px rgba(19, 26, 26, 0.35);
	color: var(--wp--preset--color--body);
	text-decoration: none;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.as-story__link:is(:hover, :focus-visible) {
	transform: translateY(-6px);
	box-shadow: 0 1px 2px rgba(19, 26, 26, 0.05), 0 40px 70px -35px rgba(223, 34, 41, 0.45);
}

.as-story__cover {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.75rem;
	min-height: 210px;
	padding: 1.25rem 1.5rem 1.5rem;
	background:
		radial-gradient(420px circle at 100% 0%, rgba(239, 152, 32, 0.5), transparent 60%),
		radial-gradient(380px circle at 0% 100%, rgba(223, 34, 41, 0.38), transparent 60%),
		var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--wp--preset--font-size--small);
}

.as-story:nth-child(3n + 2) .as-story__cover {
	background:
		radial-gradient(420px circle at 0% 0%, rgba(239, 152, 32, 0.5), transparent 60%),
		radial-gradient(380px circle at 100% 100%, rgba(223, 34, 41, 0.4), transparent 60%),
		var(--wp--preset--color--ink);
}

.as-story:nth-child(3n) .as-story__cover {
	background:
		radial-gradient(460px circle at 50% 120%, rgba(239, 152, 32, 0.55), transparent 60%),
		radial-gradient(300px circle at 100% 0%, rgba(223, 34, 41, 0.35), transparent 60%),
		var(--wp--preset--color--ink);
}

.as-story__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(300px circle at 50% 0%, rgba(255, 217, 168, 0.3), transparent 70%);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.as-story__link:is(:hover, :focus-visible) .as-story__cover::after { opacity: 1; }

.as-story__coverTop { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.as-story__logo { padding: 0.45rem 0.7rem; border-radius: 12px; }
.as-story__logo img { width: auto; max-width: 110px; height: 24px; object-fit: contain; }

.as-story__metric { display: flex; flex-direction: column; gap: 0.35rem; }
.as-story__metric strong { font-size: clamp(2.25rem, 1.8rem + 1.2vw, 2.875rem); }

.as-story__body { display: flex; flex: 1; flex-direction: column; gap: 0.9rem; padding: 1.5rem; }
.as-story__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.as-story__tags span {
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	background: #FFF4E5;
	color: #9A4A0B;
	font-size: 0.75rem;
	font-weight: 700;
}

.as-story__title { margin: 0; font-size: 1.1875rem; font-weight: 600; line-height: 1.35; color: var(--wp--preset--color--title); }

.as-story__quote {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

.as-story__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-block-start: auto;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.as-story__by { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8125rem; color: var(--wp--preset--color--muted); }
.as-story__by img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.as-story__by strong { display: block; color: var(--wp--preset--color--title); }

.as-story__go {
	display: grid;
	flex: none;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #FFE9D2;
	color: var(--wp--preset--color--red);
	font-weight: 700;
	transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.as-story__link:is(:hover, :focus-visible) .as-story__go {
	background: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--white);
	transform: translateX(3px);
}

/* Quote band: dark, separate from the sections around it. */
.as-hubquote {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(700px circle at 0% 0%, rgba(239, 152, 32, 0.28), transparent 60%),
		radial-gradient(700px circle at 100% 100%, rgba(223, 34, 41, 0.26), transparent 60%),
		var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.75);
}

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

.as-hubquote__fig { margin: 0; }

.as-hubquote__mark {
	display: block;
	height: 3.25rem;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 7rem;
	line-height: 0.9;
	background: var(--wp--preset--gradient--brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.as-hubquote__fig blockquote { margin: 0 0 2rem; }

.as-hubquote__fig blockquote p {
	margin: 0 0 1rem;
	font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--white);
}

.as-hubquote__fig figcaption { display: flex; align-items: center; gap: 1rem; font-size: var(--wp--preset--font-size--small); }

.as-hubquote__fig figcaption img {
	width: 64px;
	height: 64px;
	padding: 3px;
	border-radius: 50%;
	background: var(--wp--preset--gradient--brand);
	object-fit: cover;
}

.as-hubquote__fig figcaption strong { display: block; font-size: 1rem; color: var(--wp--preset--color--white); }

.as-hubquote__result {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border-radius: 28px;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.as-hubquote__logo { align-self: flex-start; }
.as-hubquote__logo img { width: auto; max-width: 140px; height: 28px; object-fit: contain; }

.as-hubquote__metric { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; }
.as-hubquote__metric strong { font-size: clamp(2.75rem, 2rem + 2.5vw, 4rem); }

.as-hubquote__link { font-weight: 700; color: var(--wp--preset--color--white); text-decoration: none; }
.as-hubquote__link:hover { color: #F7B267; }

/* Browse: two panels of icon tiles. */
.as-browse__panels {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.as-panel {
	position: relative;
	overflow: hidden;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: 28px;
	background: linear-gradient(180deg, #FFF8EE, var(--wp--preset--color--white) 55%);
	border: 1px solid rgba(237, 135, 35, 0.2);
	box-shadow: 0 24px 50px -34px rgba(19, 26, 26, 0.3);
}

.as-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--wp--preset--gradient--brand); }

.as-panel__title { display: flex; flex-direction: column; gap: 0.25rem; margin: 0 0 1.5rem; font-size: var(--wp--preset--font-size--large); }
.as-panel__title span { font-size: var(--wp--preset--font-size--small); font-weight: 400; color: var(--wp--preset--color--muted); }

.as-panel__tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.as-panel__tiles li { display: flex; margin: 0; }

.as-panel__tile {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.85rem;
	padding: 0.8rem 1rem;
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--title);
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.as-panel__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: linear-gradient(135deg, #FFF1DF, #FFE3D6);
	color: var(--wp--preset--color--orange-red);
	transition: background 0.25s ease, color 0.25s ease;
}

.as-panel__name { flex: 1; font-size: 0.9375rem; line-height: 1.3; }
.as-panel__arrow { color: var(--wp--preset--color--faint); transition: color 0.25s ease, transform 0.25s ease; }

.as-panel__tile:is(:hover, :focus-visible) {
	transform: translateY(-2px);
	border-color: rgba(237, 135, 35, 0.45);
	box-shadow: 0 14px 30px -18px rgba(223, 34, 41, 0.4);
}

.as-panel__tile:is(:hover, :focus-visible) .as-panel__icon { background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); }
.as-panel__tile:is(:hover, :focus-visible) .as-panel__arrow { color: var(--wp--preset--color--orange-red); transform: translateX(3px); }

.as-panel__all { font-weight: 700; color: var(--wp--preset--color--orange-red); text-decoration: none; }

@media (max-width: 1024px) {
	.as-hubhero__inner { grid-template-columns: minmax(0, 1fr); }
	.as-stories__grid--two .as-story__link { flex-direction: column; }
	.as-stories__grid--two .as-story__cover { flex-basis: auto; min-height: 210px; }
	.as-collage { width: 100%; max-width: 560px; min-height: 420px; margin-inline: auto; }
	.as-stories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 781px) {
	.as-featstory__card { grid-template-columns: minmax(0, 1fr); padding-inline-end: clamp(0.75rem, 1.5vw, 1rem); padding-block-end: 1.75rem; }
	.as-featstory__body { padding-inline: 0.75rem; }
	.as-poster { min-height: 340px; }
	.as-hubquote__inner, .as-browse__panels { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
	.as-stories__grid, .as-panel__tiles { grid-template-columns: minmax(0, 1fr); }
	.as-hubhero__video figcaption { flex-direction: column; gap: 0.6rem; text-align: center; }
	.as-hubhero__logo { padding-inline-start: 0; border-inline-start: 0; }
	.as-hubhero__actions .as-btn { flex: 1 1 100%; }
	.as-collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; min-height: 0; }
	.as-collage__glow { display: none; }
	.as-collage__card, .as-collage__bubble { position: static; min-width: 0; rotate: none; animation: none; }
	.as-collage__card strong { font-size: 1.75rem; }
	.as-collage__card--3, .as-collage__bubble { grid-column: 1 / -1; }
	.as-collage__bubble { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.as-collage__card, .as-collage__bubble { animation: none; }
	.as-story__link:is(:hover, :focus-visible), .as-panel__tile:is(:hover, :focus-visible), .as-yt__link:hover img, .as-story__link:is(:hover, :focus-visible) .as-cover-photo { transform: none; }
}

/* ---------- Blog (templates home.html, category.html, search.html) ---------- */

/* Author initials in a brand-gradient circle (no author photos yet). */
.as-avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--gradient--brand-angled);
	color: var(--wp--preset--color--white);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* Author photo (assets/img/team/, via autosmart_author_avatar()): fills the round avatar, thin brand ring. */
.as-avatar.has-photo { overflow: hidden; padding: 2px; }
.as-avatar.has-photo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.as-head__count { margin: 0; font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--muted); }

/* Hero: text and search left, topic tiles right. */
.as-bloghero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	background:
		radial-gradient(55% 70% at 85% 30%, rgba(239, 152, 32, 0.22), transparent 70%),
		radial-gradient(40% 60% at 0% 100%, rgba(223, 34, 41, 0.08), transparent 70%),
		var(--wp--preset--color--cream);
}

.as-bloghero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px;
	-webkit-mask-image: radial-gradient(60% 80% at 75% 40%, #000 30%, transparent 100%);
	mask-image: radial-gradient(60% 80% at 75% 40%, #000 30%, transparent 100%);
}

.as-bloghero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

.as-bloghero__title {
	margin: 0 0 1.25rem;
	font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
}

.as-bloghero__lead {
	max-inline-size: 34rem;
	margin: 0 0 2rem;
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--wp--preset--color--body);
}

/* Pill search box with the button inside. */
.as-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-inline-size: 34rem;
	padding: 0.4rem 0.4rem 0.4rem 1.1rem;
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.3);
	box-shadow: 0 18px 40px -24px rgba(223, 34, 41, 0.45);
}

.as-search:focus-within { border-color: var(--wp--preset--color--orange); }
.as-search__icon { display: flex; color: var(--wp--preset--color--muted); }

.as-search input {
	flex: 1;
	min-width: 0;
	padding: 0.6rem 0;
	border: 0;
	background: transparent;
	font: inherit;
	color: var(--wp--preset--color--title);
	outline: none;
}

.as-search .as-btn { padding: 0.7rem 1.4rem; }

/* "Inside the blog": dark showcase card with glows and grid texture, big numbers, a bar per topic, the authors. */
.as-blogstats {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: 32px;
	background:
		radial-gradient(420px circle at 100% 0%, rgba(239, 152, 32, 0.38), transparent 60%),
		radial-gradient(360px circle at 0% 100%, rgba(223, 34, 41, 0.3), transparent 60%),
		var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.78);
	box-shadow: 0 40px 80px -36px rgba(19, 26, 26, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.as-blogstats::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px;
	-webkit-mask-image: linear-gradient(160deg, #000 20%, transparent 75%);
	mask-image: linear-gradient(160deg, #000 20%, transparent 75%);
}

.as-blogstats__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange);
}

.as-blogstats__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 1.5rem; }

.as-blogstats__nums > div {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.2rem;
	padding: 0.9rem 1rem;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.as-blogstats__nums dt { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); }

.as-blogstats__nums dd {
	margin: 0;
	font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--white);
}

.as-blogstats__nums dd small { font-size: 0.9375rem; font-weight: 600; color: rgba(255, 255, 255, 0.6); }

.as-blogstats__label { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 600; color: rgba(255, 255, 255, 0.6); }

.as-blogstats__bars { display: grid; gap: 0.55rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }

.as-blogstats__bars li {
	display: grid;
	grid-template-columns: 24px minmax(0, 11rem) minmax(0, 1fr) 2ch;
	gap: 0.65rem;
	align-items: center;
	font-size: 0.875rem;
}

.as-blogstats__icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(239, 152, 32, 0.16); color: var(--wp--preset--color--orange); }
.as-blogstats__name { overflow: hidden; color: var(--wp--preset--color--white); text-overflow: ellipsis; white-space: nowrap; }

/* Track plus a gradient fill sized by the topic's share (--share, set inline, biggest topic = 100%). */
.as-blogstats__bar {
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
}

.as-blogstats__bar::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--share, 0%);
	border-radius: inherit;
	background: var(--wp--preset--gradient--brand);
	box-shadow: 0 0 14px rgba(239, 152, 32, 0.5);
}

.as-blogstats__count { font-weight: 700; color: var(--wp--preset--color--white); text-align: end; }

.as-blogstats__authors {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.as-blogstats__authors p { margin: 0; font-size: 0.875rem; line-height: 1.45; }
.as-blogstats__authors strong { color: var(--wp--preset--color--white); }
.as-blogstats__faces { display: flex; flex: none; }
.as-blogstats__faces .as-avatar { width: 36px; height: 36px; font-size: 0.75rem; box-shadow: 0 0 0 3px var(--wp--preset--color--ink); }
.as-blogstats__faces .as-avatar + .as-avatar { margin-inline-start: -6px; }

/* Filter bar above the grid: sticks under the header so readers can switch topic or search mid-scroll. */
.as-articles { scroll-margin-block-start: var(--as-header-h); }

.as-filterbar {
	position: sticky;
	inset-block-start: calc(var(--as-header-h) + 0.75rem);
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
	padding: 0.5rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.86);
	border: 1px solid rgba(237, 135, 35, 0.22);
	box-shadow: 0 22px 44px -28px rgba(19, 26, 26, 0.45);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.admin-bar .as-filterbar { inset-block-start: calc(var(--as-header-h) + 32px + 0.75rem); }

.as-filterbar__topics { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.as-filterbar__topics::-webkit-scrollbar { display: none; }
.as-filterbar__topics ul { display: flex; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }

.as-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 0.95rem;
	border-radius: 999px;
	color: var(--wp--preset--color--title);
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.as-chip svg { color: var(--wp--preset--color--orange-red); }
.as-chip:is(:hover, :focus-visible) { background: #FFF4E5; }
.as-chip.is-current { background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); box-shadow: 0 10px 22px -12px rgba(223, 34, 41, 0.7); }
.as-chip.is-current svg { color: currentColor; }

.as-filterbar__search {
	display: flex;
	flex: none;
	align-items: center;
	gap: 0.45rem;
	inline-size: 2.75rem;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
	transition: inline-size 0.3s ease, border-color 0.2s ease;
}

/* Icon only until clicked (the icon is the field's label), then it opens; the chips scroll to make room. */
.as-filterbar__search:is(:focus-within, :has(input:not(:placeholder-shown))) { inline-size: 14rem; border-color: var(--wp--preset--color--orange); }
.as-filterbar__search label { display: flex; flex: none; cursor: pointer; }
.as-filterbar__search input { opacity: 0; transition: opacity 0.2s ease; }
.as-filterbar__search:is(:focus-within, :has(input:not(:placeholder-shown))) input { opacity: 1; }
.as-filterbar__search label:hover { color: var(--wp--preset--color--orange-red); }

.as-filterbar__search input {
	flex: 1;
	min-width: 0;
	padding: 0.35rem 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 0.9rem;
	color: var(--wp--preset--color--title);
	outline: none;
}

/* Featured article: spotlight card. */
.as-featpost__card {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
	padding: clamp(0.75rem, 1.5vw, 1rem);
	padding-inline-end: clamp(1.5rem, 4vw, 3.5rem);
	border-radius: 36px;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.22);
	box-shadow: 0 40px 80px -40px rgba(223, 34, 41, 0.35), 0 2px 6px rgba(19, 26, 26, 0.05);
}

.as-featpost__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: 28px;
	background: var(--wp--preset--color--ink);
}

.as-featpost__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.as-featpost__card:hover .as-featpost__img { transform: scale(1.04); }

.as-featpost__poster,
.as-article__poster {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
		radial-gradient(420px circle at 0% 0%, rgba(239, 152, 32, 0.5), transparent 60%),
		radial-gradient(380px circle at 100% 100%, rgba(223, 34, 41, 0.42), transparent 60%),
		var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* No cover image yet: the topic icon in a glowing glass tile. */
.as-featpost__poster svg,
.as-article__poster svg {
	box-sizing: content-box;
	width: 34px;
	height: 34px;
	padding: 22px;
	border-radius: 24px;
	background: linear-gradient(145deg, rgba(239, 152, 32, 0.9), rgba(223, 34, 41, 0.85));
	box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.06), 0 20px 50px -10px rgba(239, 152, 32, 0.6);
	transition: transform 0.4s ease;
}

.as-featpost__poster svg { width: 44px; height: 44px; padding: 30px; border-radius: 30px; }
.as-article__link:is(:hover, :focus-visible) .as-article__poster svg { transform: scale(1.08); }

.as-featpost__ribbon {
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-start: 1rem;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	background: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--white);
	font-size: 0.8125rem;
	font-weight: 700;
	box-shadow: 0 10px 24px -10px rgba(223, 34, 41, 0.7);
}

.as-featpost__body > * { margin-block: 0 1.1rem; }
.as-featpost__body > :last-child { margin-block-end: 0; }
.as-featpost__body .as-btn { gap: 0.5rem; }

.as-featpost__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.as-featpost__chips > * {
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	background: #FFF4E5;
	color: #9A4A0B;
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
}

.as-featpost__chips > a { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); }

.as-featpost__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1.2; letter-spacing: -0.015em; }
.as-featpost__title a { color: var(--wp--preset--color--title); text-decoration: none; }
.as-featpost__title a:hover { color: var(--wp--preset--color--orange-red); }
.as-featpost__excerpt { font-size: 1.0625rem; line-height: 1.65; color: var(--wp--preset--color--body); }

.as-featpost__by,
.as-article__by { display: flex; align-items: center; gap: 0.75rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }

.as-featpost__by strong,
.as-article__by strong { display: block; color: var(--wp--preset--color--title); }

/* Article grid. */
.as-articles {
	background:
		radial-gradient(640px circle at 100% 0%, rgba(239, 152, 32, 0.16), transparent 60%),
		radial-gradient(560px circle at 0% 100%, rgba(223, 34, 41, 0.08), transparent 60%),
		var(--wp--preset--color--cream);
}

.as-articles__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.as-article__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 24px;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.18);
	box-shadow: 0 1px 2px rgba(19, 26, 26, 0.05), 0 24px 50px -30px rgba(19, 26, 26, 0.35);
	color: var(--wp--preset--color--body);
	text-decoration: none;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.as-article__link:is(:hover, :focus-visible) {
	transform: translateY(-6px);
	box-shadow: 0 1px 2px rgba(19, 26, 26, 0.05), 0 40px 70px -35px rgba(223, 34, 41, 0.45);
}

.as-article__media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--wp--preset--color--ink); }
.as-article__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.as-article__link:is(:hover, :focus-visible) .as-article__img { transform: scale(1.05); }

.as-article__topic {
	position: absolute;
	inset-block-start: 0.85rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
}

.as-article__topic {
	inset-inline-start: 0.85rem;
	max-width: calc(100% - 1.7rem);
	overflow: hidden;
	background: rgba(19, 26, 26, 0.72);
	color: var(--wp--preset--color--white);
	white-space: nowrap;
	text-overflow: ellipsis;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}


.as-article__body { display: flex; flex: 1; flex-direction: column; gap: 0.75rem; padding: 1.4rem 1.5rem 1.5rem; }

.as-article__title {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--title);
}

.as-article__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

.as-article__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-block-start: auto;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.as-article__by .as-avatar { width: 34px; height: 34px; font-size: 0.75rem; }

.as-article__go {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #FFE9D2;
	color: var(--wp--preset--color--red);
	font-weight: 700;
	transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.as-article__link:is(:hover, :focus-visible) .as-article__go {
	background: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--white);
	transform: translateX(3px);
}

.as-articles__empty {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 2rem;
	border-radius: 24px;
	background: var(--wp--preset--color--white);
	border: 1px dashed rgba(237, 135, 35, 0.5);
}

.as-articles__empty p { margin: 0; }

/* Paging: ← 1 2 3 → */
.as-pager ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: var(--wp--preset--spacing--50) 0 0; padding: 0; list-style: none; }

.as-pager .page-numbers {
	display: grid;
	place-items: center;
	min-width: 46px;
	height: 46px;
	padding: 0 0.9rem;
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.25);
	color: var(--wp--preset--color--title);
	font-weight: 700;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.as-pager a.page-numbers:hover { border-color: var(--wp--preset--color--orange); box-shadow: 0 10px 24px -14px rgba(223, 34, 41, 0.5); }
.as-pager .page-numbers.current { border-color: transparent; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); }
.as-pager .page-numbers.dots { border: 0; background: transparent; }

/* Newsletter: dark band with a form card. */
.as-newsletter {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(700px circle at 0% 0%, rgba(239, 152, 32, 0.28), transparent 60%),
		radial-gradient(700px circle at 100% 100%, rgba(223, 34, 41, 0.26), transparent 60%),
		var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.75);
}

.as-newsletter::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 40px 40px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 40px 40px;
	-webkit-mask-image: radial-gradient(70% 80% at 30% 40%, #000 20%, transparent 100%);
	mask-image: radial-gradient(70% 80% at 30% 40%, #000 20%, transparent 100%);
}

.as-newsletter__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.as-newsletter__text .as-eyebrow { margin: 0 0 0.6rem; font-weight: 700; }
.as-newsletter__text h2 { margin: 0 0 1rem; font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1.1; color: var(--wp--preset--color--white); }
.as-newsletter__lead { max-inline-size: 34rem; margin: 0 0 1.5rem; font-size: 1.0625rem; line-height: 1.6; }

.as-newsletter__points { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }

.as-newsletter__points li { display: flex; align-items: center; gap: 0.6rem; color: var(--wp--preset--color--white); font-weight: 600; }

.as-newsletter__points li::before {
	content: "\2713";
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--white);
	font-size: 0.75rem;
}

.as-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: 28px;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.as-newsletter__form label { font-weight: 700; color: var(--wp--preset--color--white); }

.as-newsletter__form input {
	padding: 0.95rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.95);
	font: inherit;
	color: var(--wp--preset--color--title);
}

.as-newsletter__form .as-btn[disabled] { cursor: not-allowed; opacity: 0.75; }
.as-newsletter__note { margin: 0; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); }

/* Newsletter sign-up (Zoho): two names side by side, labels above fields, a custom consent tick, thank-you card. */
.as-nlform { position: relative; }
.as-nlform label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.875rem; }
.as-nlform label abbr { text-decoration: none; color: var(--wp--preset--color--orange); }
.as-nlform input:not([type="checkbox"]) { padding: 0.8rem 1rem; }
.as-nlform input:focus-visible { outline: 2px solid var(--wp--preset--color--orange); outline-offset: 2px; }
.as-nlform__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.as-nlform .as-nlform__consent { flex-direction: row; align-items: flex-start; gap: 0.6rem; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, 0.8); }
.as-nlform__consent input { flex: none; inline-size: 18px; block-size: 18px; margin: 0.15rem 0 0; padding: 0; accent-color: var(--wp--preset--color--orange); }
.as-nlform__consent a { color: var(--wp--preset--color--white); text-decoration-color: var(--wp--preset--color--orange); text-underline-offset: 3px; }
.as-nlform .as-btn { gap: 0.45rem; margin-block-start: 0.25rem; }
.as-nlform textarea { padding: 0.8rem 1rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 14px; background: rgba(255, 255, 255, 0.95); font: inherit; color: var(--wp--preset--color--title); resize: vertical; }
.as-nlform textarea:focus-visible { outline: 2px solid var(--wp--preset--color--orange); outline-offset: 2px; }
.as-newsletter__done { align-items: flex-start; }
.as-newsletter__done-icon { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 50%; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); box-shadow: 0 12px 26px -10px rgba(223, 34, 41, 0.7); }
.as-newsletter__done-title { margin: 0; font-size: 1.375rem; font-weight: 800; color: var(--wp--preset--color--white); }
@media (max-width: 600px) { .as-nlform__row { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 1024px) {
	.as-bloghero__inner { grid-template-columns: minmax(0, 1fr); }
	/* Chips scroll sideways here; fade the right edge so it's clear there's more. */
	.as-filterbar__topics { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
	.as-articles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 782px) {
	.admin-bar .as-filterbar { inset-block-start: calc(var(--as-header-h) + 46px + 0.5rem); }
}

@media (max-width: 781px) {
	.as-filterbar { inset-block-start: calc(var(--as-header-h) + 0.5rem); margin-inline: -0.25rem; }
	.as-filterbar__search:is(:focus-within, :has(input:not(:placeholder-shown))) { inline-size: 11rem; }
	.as-featpost__card { grid-template-columns: minmax(0, 1fr); padding-inline-end: clamp(0.75rem, 1.5vw, 1rem); padding-block-end: 1.75rem; }
	.as-featpost__body { padding-inline: 0.75rem; }
	.as-newsletter__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
	.as-articles__grid { grid-template-columns: minmax(0, 1fr); }
	.as-search .as-btn { padding-inline: 1rem; }
}

@media (max-width: 600px) {
	.admin-bar .as-filterbar { inset-block-start: calc(var(--as-header-h) + 0.5rem); }
	/* Phones: keep the hero short; the sticky chip bar already lists the topics. */
	.as-blogstats__label, .as-blogstats__bars { display: none; }
}

@media (max-width: 480px) {
	.as-blogstats__nums { gap: 0.5rem; }
	.as-blogstats__nums > div { padding: 0.75rem; }
	.as-blogstats__bars li { grid-template-columns: 24px minmax(0, 8.5rem) minmax(0, 1fr) 2ch; }
}

@media (prefers-reduced-motion: reduce) {
	.as-article__link:is(:hover, :focus-visible),
	.as-featpost__card:hover .as-featpost__img, .as-article__link:is(:hover, :focus-visible) .as-article__img { transform: none; }
}

/* ---------- Blog post (templates/single-post.html, patterns post-*.php) ----------
 * Section: One article: hero with cover, sticky contents + demo card beside the text, download box, FAQ, author, related, CTA.
 * SEO: One H1 (post title); H2 ids for in-page links; readable 17px text at ~70 characters a line; no layout shift (cover has an aspect ratio).
 */

/* Hero: same warm glows and grid texture as the blog hub hero. */
.as-posthero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	background:
		radial-gradient(55% 70% at 85% 30%, rgba(239, 152, 32, 0.22), transparent 70%),
		radial-gradient(40% 60% at 0% 100%, rgba(223, 34, 41, 0.08), transparent 70%),
		var(--wp--preset--color--cream);
}

.as-posthero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px;
	-webkit-mask-image: radial-gradient(60% 80% at 75% 40%, #000 30%, transparent 100%);
	mask-image: radial-gradient(60% 80% at 75% 40%, #000 30%, transparent 100%);
}

.as-posthero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.as-posthero__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1.25rem; }

.as-posthero__chips > * {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
}

.as-posthero__topic { border-color: rgba(237, 135, 35, 0.4) !important; color: var(--wp--preset--color--orange-red) !important; text-decoration: none; }
.as-posthero__topic:hover { background: #FFF4E5 !important; }

.as-posthero__title {
	margin: 0 0 1.1rem;
	font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.as-posthero__lead { max-inline-size: 40rem; margin: 0 0 1.75rem; font-size: 1.125rem; line-height: 1.6; color: var(--wp--preset--color--body); }

.as-posthero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-inline-size: 40rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid rgba(19, 26, 26, 0.1);
}

.as-posthero__by { display: flex; align-items: center; gap: 0.75rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.as-posthero__by strong { display: block; color: var(--wp--preset--color--title); }

/* Share: round icon buttons. */
.as-share { display: flex; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

.as-share a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--title);
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.as-share a:is(:hover, :focus-visible) { background: var(--wp--preset--gradient--brand); border-color: transparent; color: var(--wp--preset--color--white); transform: translateY(-2px); }

/* Cover: featured image or the dark topic poster, with a glow and a glass badge. */
.as-posthero__cover {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 32px;
	background: var(--wp--preset--color--ink);
	box-shadow: 0 40px 80px -36px rgba(223, 34, 41, 0.45), 0 0 0 8px rgba(255, 255, 255, 0.6);
}

.as-posthero__img { width: 100%; height: 100%; object-fit: cover; }
.as-posthero__poster svg { width: 48px; height: 48px; padding: 32px; border-radius: 32px; }

.as-posthero__badge {
	position: absolute;
	inset-block-end: 1rem;
	inset-inline-start: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: var(--wp--preset--color--white);
	font-size: 0.8125rem;
	font-weight: 700;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* Body: sidebar left, article right. */
.as-postpage__wrap { padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70); }

.as-postpage__grid {
	display: grid;
	grid-template-columns: 270px minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: start;
}

.as-postpage__main { min-width: 0; max-inline-size: 46rem; }

.as-postpage__aside {
	position: sticky;
	inset-block-start: calc(var(--as-header-h) + 1.5rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-block-size: calc(100vh - var(--as-header-h) - 3rem);
}

/* The cards keep their size; the contents list takes what's left and scrolls inside itself. */
.as-postpage__aside > * { flex: none; }
.as-postpage__aside > .as-toc { display: flex; flex: 0 1 auto; flex-direction: column; min-block-size: 0; }

/* Short screens: not enough room to pin everything, so the sidebar scrolls with the page. */
@media (max-height: 680px) {
	.as-postpage__aside { position: static; max-block-size: none; }
	.as-postpage__aside > .as-toc { display: block; }
}

.admin-bar .as-postpage__aside { inset-block-start: calc(var(--as-header-h) + 32px + 1.5rem); }

/* "On this page": numbered links in a cream card. */
.as-toc {
	padding: 1.25rem;
	border-radius: 20px;
	background: var(--wp--preset--color--cream);
	border: 1px solid rgba(237, 135, 35, 0.18);
	font-size: 0.875rem;
}

.as-toc__title { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.75rem; font-weight: 700; color: var(--wp--preset--color--title); }
.as-toc__title svg { color: var(--wp--preset--color--orange-red); }
/* A long list scrolls inside the card (the sidebar's flex layout decides how much room it gets). */
.as-toc ol { min-block-size: 4rem; margin: 0; padding: 0; overflow-y: auto; list-style: none; counter-reset: toc; scrollbar-width: thin; }
.as-toc li { counter-increment: toc; }

.as-toc a {
	display: grid;
	grid-template-columns: 1.6rem minmax(0, 1fr);
	padding: 0.4rem 0.5rem 0.4rem 0;
	border-radius: 8px;
	color: var(--wp--preset--color--body);
	line-height: 1.35;
	text-decoration: none;
}

.as-toc a::before { content: counter(toc, decimal-leading-zero); font-size: 0.75rem; font-weight: 700; color: var(--wp--preset--color--faint); padding-block-start: 0.1rem; }
.as-toc a:is(:hover, :focus-visible) { color: var(--wp--preset--color--orange-red); }
.as-toc a:is(:hover, :focus-visible)::before { color: var(--wp--preset--color--orange-red); }

/* Small download link card in the sidebar. */
.as-dlmini {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem;
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.3);
	color: var(--wp--preset--color--title);
	font-size: 0.875rem;
	line-height: 1.3;
	text-decoration: none;
}

.as-dlmini small { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--orange-red); }
.as-dlmini__icon { display: grid; flex: none; place-items: center; width: 40px; height: 48px; border-radius: 8px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); font-size: 0.6875rem; font-weight: 800; }
.as-dlmini:hover { border-color: var(--wp--preset--color--orange); }

/* Demo card: dark with glows and grid texture, like the home's dark sections. */
.as-democard {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: 1.4rem;
	border-radius: 20px;
	background:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
		radial-gradient(260px circle at 100% 0%, rgba(239, 152, 32, 0.45), transparent 60%),
		radial-gradient(220px circle at 0% 100%, rgba(223, 34, 41, 0.35), transparent 60%),
		var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.75);
}

.as-democard__eyebrow { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.6rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--orange); }
.as-democard__title { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--wp--preset--color--white); }
.as-democard__text { margin: 0 0 1rem; font-size: 0.875rem; line-height: 1.5; }
.as-democard .as-btn { box-sizing: border-box; width: 100%; justify-content: center; }

/* Article text. */
.as-prose { font-size: 1.0625rem; line-height: 1.75; color: var(--wp--preset--color--body); }
.as-prose > * { margin-block: 0 1.25rem; }
.as-prose > :first-child { margin-block-start: 0; }

.as-prose h2 {
	margin-block: 2.75rem 1rem;
	font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
	line-height: 1.25;
	letter-spacing: -0.015em;
	scroll-margin-block-start: calc(var(--as-header-h) + 1.5rem);
}

.as-prose h3 { margin-block: 2rem 0.75rem; font-size: 1.25rem; line-height: 1.35; scroll-margin-block-start: calc(var(--as-header-h) + 1.5rem); }
.as-prose h4 { margin-block: 1.5rem 0.5rem; font-size: 1.0625rem; }
.as-prose :is(h2, h3, h4) { color: var(--wp--preset--color--title); }
.as-prose strong { color: var(--wp--preset--color--title); }

.as-prose a { color: var(--wp--preset--color--orange-red); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.as-prose a:hover { text-decoration-thickness: 2px; }

.as-prose :is(ul, ol) { padding-inline-start: 1.4rem; }
.as-prose li { margin-block-end: 0.5rem; }
.as-prose li::marker { color: var(--wp--preset--color--orange-red); font-weight: 700; }

.as-prose blockquote {
	margin-inline: 0;
	padding: 1.25rem 1.5rem;
	border-inline-start: 4px solid var(--wp--preset--color--orange);
	border-radius: 0 16px 16px 0;
	background: var(--wp--preset--color--cream);
	font-size: 1.125rem;
	color: var(--wp--preset--color--title);
}

.as-prose img { max-width: 100%; height: auto; border-radius: 16px; }
.as-prose figcaption { margin-block-start: 0.5rem; font-size: 0.875rem; color: var(--wp--preset--color--muted); }

/* Tables: rounded frame, first row as the header, sideways scroll on small screens. */
.as-prose .wp-block-table { overflow-x: auto; border-radius: 16px; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white); }
.as-prose table { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
/* Replace WordPress's default dark cell borders with light row and column lines inside the rounded frame. */
.as-prose :is(td, th) { padding: 0.75rem 1rem; border: 0; border-block-end: 1px solid var(--wp--preset--color--line); text-align: start; vertical-align: top; }
.as-prose :is(td, th) + :is(td, th) { border-inline-start: 1px solid var(--wp--preset--color--line); }
.as-prose .wp-block-table :is(thead, tfoot) { border: 0; }
.as-prose tr:first-child :is(td, th), .as-prose thead :is(td, th) { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--title); font-weight: 700; }
.as-prose tr:last-child td { border-block-end: 0; }
.as-prose .wp-block-group.is-nowrap { flex-wrap: wrap; }

/* Download box after the article. */
.as-download {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 1.25rem 1.5rem;
	align-items: center;
	margin-block: 3rem 0;
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: 24px;
	background:
		radial-gradient(320px circle at 100% 0%, rgba(239, 152, 32, 0.18), transparent 60%),
		var(--wp--preset--color--cream);
	border: 1px solid rgba(237, 135, 35, 0.3);
	scroll-margin-block-start: calc(var(--as-header-h) + 1.5rem);
}

.as-download__file {
	display: grid;
	place-items: center;
	gap: 0.2rem;
	width: 76px;
	height: 92px;
	border-radius: 14px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--orange);
	box-shadow: 0 18px 36px -18px rgba(19, 26, 26, 0.6);
}

.as-download__file span { font-size: 0.75rem; font-weight: 800; color: var(--wp--preset--color--white); }
.as-download__eyebrow { margin: 0 0 0.25rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--orange-red); }
.as-download__title { margin: 0 0 0.35rem; font-size: 1.25rem; line-height: 1.3; }
.as-download__sub { margin: 0 0 0.35rem; font-size: 0.9375rem; line-height: 1.5; color: var(--wp--preset--color--body); }
.as-download__meta { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--wp--preset--color--muted); }
.as-download__btn { white-space: nowrap; }

/* FAQ after the article (the accordion itself is the shared .as-faq). */
.as-postfaq { margin-block-start: 3.5rem; scroll-margin-block-start: calc(var(--as-header-h) + 1.5rem); }
.as-postfaq__title { margin: 0 0 1.25rem; font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem); }
.as-postfaq .as-faq__item p { line-height: 1.65; }

/* About the author: dark card with glows. */
.as-postauthor { padding-block-start: 0; }

.as-authorcard {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: 28px;
	background:
		radial-gradient(380px circle at 100% 0%, rgba(239, 152, 32, 0.35), transparent 60%),
		radial-gradient(320px circle at 0% 100%, rgba(223, 34, 41, 0.28), transparent 60%),
		var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.75);
	box-shadow: 0 40px 80px -40px rgba(19, 26, 26, 0.6);
}

.as-authorcard__avatar { width: 72px; height: 72px; font-size: 1.375rem; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08); }
.as-authorcard__text > * { margin: 0; }
.as-authorcard__eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--orange); }
.as-authorcard__name { margin-block-start: 0.35rem !important; font-size: 1.5rem; font-weight: 700; color: var(--wp--preset--color--white); }
.as-authorcard__meta { font-size: 0.875rem; color: rgba(255, 255, 255, 0.55); }
.as-authorcard__title { font-size: 0.9375rem; font-weight: 600; color: var(--wp--preset--color--orange); }
.as-authorcard__bio { margin-block-start: 0.85rem !important; line-height: 1.6; }
.as-authorcard__link { display: inline-block; margin-block-start: 1rem !important; font-weight: 700; color: var(--wp--preset--color--orange); text-decoration: none; }

/* Related articles: the blog grid's cards; "More on <topic>" link in the heading row. */
.as-link { font-weight: 700; color: var(--wp--preset--color--orange-red); text-decoration: none; white-space: nowrap; }
.as-link:hover { text-decoration: underline; }

@media (max-width: 1024px) {
	.as-posthero__inner { grid-template-columns: minmax(0, 1fr); }
	.as-posthero__cover { aspect-ratio: 16 / 9; }
	.as-postpage__grid { grid-template-columns: minmax(0, 1fr); }
	.as-postpage__aside { display: none; }
	.as-postpage__main { max-inline-size: none; }
}

@media (max-width: 600px) {
	.as-download { grid-template-columns: auto minmax(0, 1fr); }
	.as-download__btn { grid-column: 1 / -1; justify-content: center; }
	.as-authorcard { grid-template-columns: minmax(0, 1fr); }
	.as-posthero__meta { flex-direction: column; align-items: flex-start; }
}

/* ---------- Case study page (templates/single-case_study.html, patterns cs-page-*.php, cs-story-sections.php) ----------
 * Section: One customer story: hero with video or key result, at-a-glance facts, quote band, the story sections, more stories, CTA.
 * SEO: One H1 (the story title); one H2 per story section, H3 per pain point; no layout shift (video has a fixed ratio).
 */

/* Hero: warm glows and grid texture, like the other heroes. */
.as-cshero2 {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	background:
		radial-gradient(55% 70% at 85% 30%, rgba(239, 152, 32, 0.22), transparent 70%),
		radial-gradient(40% 60% at 0% 100%, rgba(223, 34, 41, 0.08), transparent 70%),
		var(--wp--preset--color--cream);
}

.as-cshero2::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px;
	-webkit-mask-image: radial-gradient(60% 80% at 75% 40%, #000 30%, transparent 100%);
	mask-image: radial-gradient(60% 80% at 75% 40%, #000 30%, transparent 100%);
}

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

.as-cshero2__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-block-end: 1.25rem; }
.as-cshero2__brand .as-pill { margin: 0; }

.as-cshero2__logo {
	display: grid;
	place-items: center;
	height: 56px;
	padding-inline: 1rem;
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 14px 30px -20px rgba(19, 26, 26, 0.45);
}

.as-cshero2__logo img { width: auto; max-width: 140px; height: auto; max-height: 34px; object-fit: contain; }

.as-cshero2__title { margin: 0 0 1.1rem; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); line-height: 1.1; letter-spacing: -0.02em; }
.as-cshero2__lead { max-inline-size: 36rem; margin: 0 0 1.5rem; font-size: 1.125rem; line-height: 1.6; color: var(--wp--preset--color--body); }

/* Headline result: big gradient number in a white pill card. */
.as-cshero2__result {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.75rem;
	margin: 0 0 1.75rem;
	padding: 0.85rem 1.25rem;
	border-radius: 18px;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.3);
	box-shadow: 0 18px 40px -26px rgba(223, 34, 41, 0.5);
}

.as-cshero2__result strong {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	line-height: 1;
	background: var(--wp--preset--gradient--brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.as-cshero2__result span { font-size: 0.9375rem; font-weight: 600; color: var(--wp--preset--color--muted); }
.as-cshero2__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Video: framed with a glow; the person in a card under it. */
.as-cshero2__video { margin: 0; }

.as-cshero2__video .as-yt {
	overflow: hidden;
	border-radius: 28px;
	box-shadow: 0 40px 80px -36px rgba(223, 34, 41, 0.5), 0 0 0 8px rgba(255, 255, 255, 0.6);
}

.as-cshero2__video figcaption {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: fit-content;
	margin: 1.25rem auto 0;
	padding: 0.6rem 1.1rem 0.6rem 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.as-cshero2__video figcaption img { border-radius: 50%; object-fit: cover; }
.as-cshero2__video figcaption strong { display: block; color: var(--wp--preset--color--title); }

/* No video: dark Key result card. */
.as-keyresult {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	border-radius: 32px;
	background:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
		radial-gradient(420px circle at 100% 0%, rgba(239, 152, 32, 0.45), transparent 60%),
		radial-gradient(360px circle at 0% 100%, rgba(223, 34, 41, 0.35), transparent 60%),
		var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.75);
	box-shadow: 0 40px 80px -36px rgba(19, 26, 26, 0.65);
}

.as-keyresult__eyebrow { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 1.25rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--orange); }
.as-keyresult__metric { margin: 0; font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--wp--preset--color--white); }
.as-keyresult__label { margin: 0.5rem 0 0; font-size: 1.125rem; }

/* With the customer's site photo behind it: a dark scrim (darker at the bottom, where the person sits) keeps the result readable. */
.as-keyresult--photo { background: var(--wp--preset--color--ink); }
.as-keyresult--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at 100% 0%, rgba(239, 152, 32, 0.35), transparent 60%), linear-gradient(180deg, rgba(19, 26, 26, 0.55) 0%, rgba(19, 26, 26, 0.7) 45%, rgba(19, 26, 26, 0.92) 100%); }

.as-keyresult__by {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block-start: 2rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--wp--preset--font-size--small);
}

.as-keyresult__by img { border-radius: 50%; object-fit: cover; }
.as-keyresult__by strong { display: block; color: var(--wp--preset--color--white); }

/* Quote band straight after the hero: no gap, full width (the result shows in the hero and the sidebar). */
.as-csquote { margin-block-start: 0; }
.as-csquote .as-hubquote__inner { grid-template-columns: minmax(0, 1fr); max-inline-size: 60rem; }

.as-cshero2__video figcaption { padding: 0.55rem 1.1rem; font-weight: 700; color: var(--wp--preset--color--title); }
.as-cshero2__play { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); font-size: 0.625rem; }

/* Body: sticky dark sidebar on the left, the story in a readable column on the right. */
.as-cspage__body {
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	background:
		radial-gradient(700px circle at 100% 0%, rgba(239, 152, 32, 0.08), transparent 60%),
		var(--wp--preset--color--white);
}

.as-cspage__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }

/* Sidebar: dark card with glows and grid texture. */
.as-rail {
	position: sticky;
	inset-block-start: calc(var(--as-header-h) + 1.5rem);
	overflow: hidden;
	isolation: isolate;
	padding: 1.6rem;
	border-radius: 28px;
	background:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
		radial-gradient(320px circle at 100% 0%, rgba(239, 152, 32, 0.42), transparent 60%),
		radial-gradient(280px circle at 0% 100%, rgba(223, 34, 41, 0.34), transparent 60%),
		var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.72);
	box-shadow: 0 40px 80px -40px rgba(19, 26, 26, 0.7);
}

.admin-bar .as-rail { inset-block-start: calc(var(--as-header-h) + 32px + 1.5rem); }

.as-rail__eyebrow { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 1rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--orange); }
.as-rail__facts { margin: 0; }

.as-rail__fact {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	column-gap: 0.75rem;
	align-items: center;
	padding-block: 0.75rem;
	border-block-end: 1px solid rgba(255, 255, 255, 0.09);
}

.as-rail__icon { display: grid; grid-row: 1 / span 2; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: rgba(239, 152, 32, 0.14); color: var(--wp--preset--color--orange); }
.as-rail__fact dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.as-rail__fact dd { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--wp--preset--color--white); }
.as-rail__fact dd a { color: var(--wp--preset--color--orange); text-decoration: none; }
.as-rail__fact dd a:hover { text-decoration: underline; }

.as-rail__result { padding-block: 1.25rem; border-block-end: 1px solid rgba(255, 255, 255, 0.09); }
.as-rail__result > * { margin: 0; }

.as-rail__metric {
	font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	background: linear-gradient(90deg, #FFC27A, #EF9820 45%, #F05A3C);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.as-rail__label { margin-block-start: 0.35rem !important; font-size: 0.875rem; }
.as-rail__cta { padding-block-start: 1.25rem; }
.as-rail__cta p { margin: 0 0 0.75rem; font-weight: 700; color: var(--wp--preset--color--white); }
.as-rail__cta .as-btn { box-sizing: border-box; width: 100%; justify-content: center; }

/* The story column: numbered section labels, editorial type. */
.as-csbody { max-inline-size: 52rem; font-size: 1.0625rem; line-height: 1.75; color: var(--wp--preset--color--body); counter-reset: csec; }
.as-csec { margin-block: 0 clamp(3.5rem, 7vw, 5rem); counter-increment: csec; }
.as-csec > * { margin-block: 0 1.1rem; }

/* Eyebrow: "01" in a gradient chip, the label, then a hairline to the edge. */
.as-csec .as-eyebrow { display: flex; align-items: center; gap: 0.75rem; margin-block-end: 0.85rem; }

.as-csec .as-eyebrow::before {
	content: counter(csec, decimal-leading-zero);
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--white);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.as-csec .as-eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(237, 135, 35, 0.35), transparent); }
.as-csec h2 { margin-block-end: 1.25rem; font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.625rem); line-height: 1.15; letter-spacing: -0.02em; }

/* About: heading left and the logo right on one row; the first paragraph reads as a lead. */
.as-csec__side { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; margin-block-end: 1.5rem; }
.as-csec__side > .as-eyebrow { flex-basis: 100%; margin: 0; }
.as-csec__side > h2 { flex: 1 1 18rem; margin: 0; }

.as-csec__logo {
	display: grid;
	flex: none;
	place-items: center;
	height: 68px;
	padding-inline: 1.25rem;
	border-radius: 18px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 18px 36px -24px rgba(19, 26, 26, 0.45);
}

.as-csec__logo img { width: auto; max-width: 160px; height: auto; max-height: 40px; object-fit: contain; }
.as-csec--about > p:first-of-type { font-size: 1.25rem; line-height: 1.65; color: var(--wp--preset--color--title); }

/* Challenge: an editorial numbered list with big gradient numerals and hairlines. */
.as-csec--challenge > p:not(.as-eyebrow) { max-inline-size: 44rem; }
.as-cpains { margin-block-start: 1.5rem; border-block-start: 1px solid var(--wp--preset--color--line); counter-reset: pain; }
.as-cpains > * { margin: 0; }

.as-cpain {
	position: relative;
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	column-gap: 1rem;
	padding: 1.5rem 1rem 1.5rem 0;
	border-block-end: 1px solid var(--wp--preset--color--line);
	counter-increment: pain;
	transition: background 0.25s ease, padding 0.25s ease;
}

.as-cpain::before {
	content: counter(pain, decimal-leading-zero);
	grid-row: 1 / span 2;
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	background: var(--wp--preset--gradient--brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.as-cpain > * { grid-column: 2; margin: 0; }
.as-cpain h3 { margin-block-end: 0.35rem; font-size: 1.1875rem; line-height: 1.35; color: var(--wp--preset--color--title); }
.as-cpain p { line-height: 1.65; }
.as-cpain:hover { padding-inline-start: 0.75rem; background: linear-gradient(90deg, #FFF6EC, transparent 80%); }

/* What we did together: dark showcase card with a soft ring of light. */
.as-csec--together {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: 32px;
	background:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
		radial-gradient(520px circle at 100% 0%, rgba(239, 152, 32, 0.35), transparent 60%),
		radial-gradient(460px circle at 0% 100%, rgba(223, 34, 41, 0.3), transparent 60%),
		var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.8);
	box-shadow: 0 40px 80px -40px rgba(19, 26, 26, 0.6);
}

.as-csec--together::after {
	content: "";
	position: absolute;
	inset-block-start: -120px;
	inset-inline-end: -120px;
	z-index: -1;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	border: 1px solid rgba(239, 152, 32, 0.35);
	box-shadow: 0 0 0 40px rgba(239, 152, 32, 0.05), 0 0 0 80px rgba(239, 152, 32, 0.03);
}

.as-csec--together h2 { color: var(--wp--preset--color--white); }
.as-csec--together .as-eyebrow { color: var(--wp--preset--color--orange); }
.as-csec--together .as-eyebrow::after { background: linear-gradient(90deg, rgba(239, 152, 32, 0.5), transparent); }
.as-csec--together > :last-child { margin-block-end: 0; }

/* Results: the three numbers on a warm panel with hairline dividers, then the outcome. */
.as-cstats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-block: 0.5rem 1.75rem;
	border-radius: 24px;
	background:
		radial-gradient(360px circle at 100% 0%, rgba(239, 152, 32, 0.22), transparent 60%),
		var(--wp--preset--color--cream);
	border: 1px solid rgba(237, 135, 35, 0.22);
}

.as-cstats > * { margin: 0; }
.as-cstat { padding: 1.5rem 1.4rem; }
.as-cstat + .as-cstat { border-inline-start: 1px solid rgba(237, 135, 35, 0.2); }
.as-cstat > * { margin: 0; }

.as-cstat__num {
	font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
	background: var(--wp--preset--gradient--brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.as-cstat__label { margin-block-start: 0.45rem !important; font-size: 0.875rem; font-weight: 600; line-height: 1.4; color: var(--wp--preset--color--muted); }

/* What changed: a white card with a gradient hairline border; a check tile per outcome, hairlines between. */
.as-cchanged {
	margin-block-start: 2rem;
	padding: clamp(1.5rem, 3.5vw, 2.25rem);
	border-radius: 24px;
	border: 1px solid transparent;
	background: linear-gradient(var(--wp--preset--color--white), var(--wp--preset--color--white)) padding-box, linear-gradient(135deg, rgba(239, 152, 32, 0.7), rgba(223, 34, 41, 0.35), rgba(237, 135, 35, 0.15)) border-box;
	box-shadow: 0 30px 60px -40px rgba(223, 34, 41, 0.45);
}

.as-cchanged__title { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.75rem; font-size: 1.25rem; font-weight: 700; color: var(--wp--preset--color--title); }
.as-cchanged__title::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--wp--preset--gradient--brand); box-shadow: 0 0 0 5px rgba(239, 152, 32, 0.15); }
.as-cchanged ul { margin: 0; padding: 0; list-style: none; }

.as-cchanged li {
	position: relative;
	margin: 0;
	padding: 0.9rem 0 0.9rem 2.6rem;
	border-block-end: 1px solid var(--wp--preset--color--line);
	line-height: 1.6;
}

.as-cchanged li:last-child { border-block-end: 0; padding-block-end: 0; }

.as-cchanged li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.95rem;
	inset-inline-start: 0;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 8px;
	background: var(--wp--preset--gradient--brand);
	box-shadow: 0 8px 16px -8px rgba(223, 34, 41, 0.7);
}

.as-cchanged li::after {
	content: "";
	position: absolute;
	inset-block-start: 1.37rem;
	inset-inline-start: 0.52rem;
	width: 0.5rem;
	height: 0.27rem;
	border-inline-start: 2px solid #fff;
	border-block-end: 2px solid #fff;
	transform: rotate(-45deg);
}

@media (max-width: 1024px) {
	.as-cshero2__inner { grid-template-columns: minmax(0, 1fr); }
	.as-cspage__grid { grid-template-columns: minmax(0, 1fr); }
	.as-rail { position: static; }
	.as-rail__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
	.as-csbody { max-inline-size: none; }
}

@media (max-width: 781px) {
	.as-cstats { grid-template-columns: minmax(0, 1fr); }
	.as-cstat + .as-cstat { border-inline-start: 0; border-block-start: 1px solid rgba(237, 135, 35, 0.2); }
	.as-cpain { grid-template-columns: 3.25rem minmax(0, 1fr); }
	.as-cpain::before { font-size: 1.875rem; }
}

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

/* ---------- Industries hub (templates/page-industries.html, patterns ind-hub-*.php) ----------
 * Section: The hub for every industry: centred hero with an industry dock, bento grid, dark "adapts" band, results, audit types + talk to us, FAQ, CTA.
 * SEO: One H1 on the hub's own term; H2 per section, H3 per industry and column; every industry card is one descriptive internal link.
 */

/* Hero: centred, warm glows, grid texture and soft orbit rings behind the title. */
.as-indhero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	text-align: center;
	background:
		radial-gradient(50% 60% at 50% 0%, rgba(239, 152, 32, 0.24), transparent 70%),
		radial-gradient(35% 50% at 100% 100%, rgba(223, 34, 41, 0.1), transparent 70%),
		radial-gradient(35% 50% at 0% 100%, rgba(239, 152, 32, 0.12), transparent 70%),
		var(--wp--preset--color--cream);
}

.as-indhero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px;
	-webkit-mask-image: radial-gradient(60% 70% at 50% 40%, #000 25%, transparent 100%);
	mask-image: radial-gradient(60% 70% at 50% 40%, #000 25%, transparent 100%);
}

.as-indhero::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	z-index: -1;
	width: 900px;
	height: 900px;
	border-radius: 50%;
	border: 1px solid rgba(237, 135, 35, 0.18);
	box-shadow: 0 0 0 90px rgba(239, 152, 32, 0.035), 0 0 0 180px rgba(239, 152, 32, 0.025);
	transform: translate(-50%, -55%);
	pointer-events: none;
}

.as-indhero__inner { display: flex; flex-direction: column; align-items: center; }
.as-indhero .as-crumbs ol { justify-content: center; }
.as-indhero .as-pill { margin-inline: auto; }

.as-indhero__title {
	max-inline-size: 16ch;
	margin: 0.5rem auto 1.25rem;
	font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);
	line-height: 1.04;
	letter-spacing: -0.03em;
}

.as-indhero__lead { max-inline-size: 44rem; margin: 0 auto 2rem; font-size: 1.1875rem; line-height: 1.65; color: var(--wp--preset--color--body); }
.as-indhero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-block-end: clamp(2.5rem, 5vw, 3.5rem); }

/* Industry dock: glass tiles, one per industry. */
.as-indhero__dock ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }

.as-indhero__dock a {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.6rem 1.1rem 0.6rem 0.6rem;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid rgba(237, 135, 35, 0.22);
	box-shadow: 0 18px 36px -24px rgba(223, 34, 41, 0.45);
	color: var(--wp--preset--color--title);
	font-weight: 700;
	text-decoration: none;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.as-indhero__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg, #FFF1DF, #FFE3D6); color: var(--wp--preset--color--orange-red); transition: background 0.25s ease, color 0.25s ease; }
.as-indhero__dock a:is(:hover, :focus-visible) { transform: translateY(-3px); border-color: rgba(237, 135, 35, 0.55); box-shadow: 0 24px 44px -24px rgba(223, 34, 41, 0.55); }
.as-indhero__dock a:is(:hover, :focus-visible) .as-indhero__icon { background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); }

/* Split hero (Industries, Solutions and Features hubs, layout.md 31): text left, UI card right, dock above the fold. */
.as-indhero--split { padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); text-align: start; background: radial-gradient(45% 60% at 72% 10%, rgba(239, 152, 32, 0.24), transparent 70%), radial-gradient(35% 50% at 100% 100%, rgba(223, 34, 41, 0.1), transparent 70%), radial-gradient(35% 50% at 0% 100%, rgba(239, 152, 32, 0.12), transparent 70%), var(--wp--preset--color--cream); }
.as-indhero--split::before { -webkit-mask-image: radial-gradient(60% 75% at 65% 40%, #000 25%, transparent 100%); mask-image: radial-gradient(60% 75% at 65% 40%, #000 25%, transparent 100%); }
.as-indhero--split::after { inset-inline-start: 74%; width: 720px; height: 720px; transform: translate(-50%, -62%); }
.as-indhero--split .as-indhero__inner { align-items: stretch; }
.as-indhero__split { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: var(--wp--preset--spacing--60); margin-block-end: clamp(2rem, 4vw, 2.75rem); }
.as-indhero--split .as-crumbs { margin-block-end: 1rem; }
.as-indhero--split .as-crumbs ol { justify-content: flex-start; }
.as-indhero--split .as-pill { margin-inline: 0; }
.as-indhero--split .as-indhero__title { max-inline-size: 18ch; margin: 0.5rem 0 1rem; font-size: clamp(2.25rem, 1.5rem + 2.3vw, 3.4rem); }
.as-indhero--split .as-indhero__lead { max-inline-size: 36rem; margin: 0 0 1.75rem; font-size: 1.125rem; }
.as-indhero--split .as-indhero__cta { justify-content: flex-start; margin-block-end: 0; }

/* The UI card in the app window, kept short so the dock stays in view. */
.as-indhero__media { min-width: 0; margin: 0; }
.as-indhero__screen { display: grid; place-items: center; padding: 1rem; background: linear-gradient(180deg, var(--wp--preset--color--cream), var(--wp--preset--color--white)); }
.as-indhero__img { display: block; inline-size: auto; max-inline-size: 100%; block-size: auto; max-block-size: 400px; }

/* Dock under both columns, aligned with the text. */
.as-indhero.as-indhero--split .as-indhero__dock ul { justify-content: flex-start; max-inline-size: none; margin-inline: 0; }

@media (max-width: 1024px) {
	.as-indhero__split { grid-template-columns: minmax(0, 1fr); }
	.as-indhero--split .as-indhero__title { max-inline-size: 20ch; }
}

/* Industries grid: bento with a dark flagship card. */
.as-indgrid {
	background:
		radial-gradient(700px circle at 100% 0%, rgba(239, 152, 32, 0.1), transparent 60%),
		var(--wp--preset--color--white);
}

.as-indgrid__head { max-inline-size: 46rem; margin-block-end: clamp(2rem, 4vw, 3rem); }
.as-indgrid__head h2 { margin: 0.4rem 0 0.75rem; }
.as-indgrid__head p:last-child { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--wp--preset--color--body); }

.as-indgrid__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.as-indcard { display: flex; }
.as-indcard--flagship { grid-column: span 2; }

.as-indcard__link {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.75rem;
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: 28px;
	background:
		radial-gradient(260px circle at 100% 0%, rgba(239, 152, 32, 0.12), transparent 60%),
		var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.2);
	box-shadow: 0 24px 50px -36px rgba(19, 26, 26, 0.4);
	color: var(--wp--preset--color--body);
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Gradient line along the top that grows on hover. */
.as-indcard__link::after {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 64px;
	height: 4px;
	border-radius: 0 0 4px 0;
	background: var(--wp--preset--gradient--brand);
	transition: width 0.4s ease;
}

.as-indcard__link:is(:hover, :focus-visible) { transform: translateY(-4px); border-color: rgba(237, 135, 35, 0.45); box-shadow: 0 34px 60px -34px rgba(223, 34, 41, 0.45); }
.as-indcard__link:is(:hover, :focus-visible)::after { width: 100%; }

.as-indcard__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(135deg, #FFF1DF, #FFE3D6); color: var(--wp--preset--color--orange-red); }
.as-indcard__name { margin: 0.25rem 0 0; font-size: 1.375rem; line-height: 1.25; color: var(--wp--preset--color--title); }
.as-indcard__text { line-height: 1.6; }
.as-indcard__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: 0.25rem; }
.as-indcard__chips span { padding: 0.3rem 0.7rem; border-radius: 999px; background: #FFF4E5; color: #9A4A0B; font-size: 0.8125rem; font-weight: 600; }
.as-indcard__go { margin-block-start: auto; padding-block-start: 0.75rem; font-weight: 700; color: var(--wp--preset--color--orange-red); }

/* Flagship: dark with glows and grid texture, bigger type, customer logos. */
.as-indcard--flagship .as-indcard__link {
	background:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 36px 36px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 36px 36px,
		radial-gradient(520px circle at 100% 0%, rgba(239, 152, 32, 0.45), transparent 60%),
		radial-gradient(420px circle at 0% 100%, rgba(223, 34, 41, 0.35), transparent 60%),
		var(--wp--preset--color--ink);
	border-color: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.78);
	box-shadow: 0 40px 80px -40px rgba(19, 26, 26, 0.7);
}

.as-indcard--flagship .as-indcard__icon { width: 64px; height: 64px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.06), 0 18px 40px -12px rgba(239, 152, 32, 0.6); }
.as-indcard--flagship .as-indcard__name { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); color: var(--wp--preset--color--white); }
.as-indcard--flagship .as-indcard__text { max-inline-size: 34rem; font-size: 1.0625rem; }
.as-indcard--flagship .as-indcard__chips span { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); }
.as-indcard--flagship .as-indcard__go { color: var(--wp--preset--color--orange); }
/* Photos. Light cards: a cover across the top, the icon tile overlapping its lower edge. */
.as-indcard__photo { display: block; overflow: hidden; margin: calc(-1 * clamp(1.5rem, 3vw, 2rem)) calc(-1 * clamp(1.5rem, 3vw, 2rem)) 0; aspect-ratio: 16 / 9; }
.as-indcard__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.as-indcard__link:is(:hover, :focus-visible) .as-indcard__img { transform: scale(1.05); }
.as-indcard__link.has-photo > .as-indcard__icon { position: relative; z-index: 1; margin-block-start: -2.75rem; border: 4px solid var(--wp--preset--color--white); box-sizing: content-box; }
.as-indcard__link.has-photo::after { z-index: 2; }

/* Flagship: the photo fills the card behind a dark gradient, so the text and panel stay readable. */
.as-indcard--flagship .as-indcard__photo { position: absolute; inset: 0; z-index: -1; margin: 0; aspect-ratio: auto; }
.as-indcard--flagship .as-indcard__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(19, 26, 26, 0.94) 22%, rgba(19, 26, 26, 0.62) 55%, rgba(19, 26, 26, 0.2)), radial-gradient(420px circle at 0% 100%, rgba(223, 34, 41, 0.35), transparent 60%); }
.as-indcard--flagship .as-indcard__link.has-photo > .as-indcard__icon { margin-block-start: 0; border: 0; }

/* Flagship layout: text on the left, the illustrative audit panel on the right. */
.as-indcard--flagship .as-indcard__link { display: grid; grid-template-columns: minmax(0, 1fr) 260px; column-gap: 2rem; row-gap: 0.75rem; align-content: start; }
.as-indcard--flagship .as-indcard__link > * { grid-column: 1; }
.as-indcard--flagship .as-indcard__go { align-self: end; }

.as-indcard__mock {
	display: flex !important;
	grid-column: 2 !important;
	grid-row: 1 / span 6;
	flex-direction: column;
	gap: 0.55rem;
	align-self: center;
	padding: 1.1rem;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
	transform: none;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: transform 0.4s ease;
}

.as-indcard__link:is(:hover, :focus-visible) .as-indcard__mock { transform: translateY(-4px); }
.as-indcard__mock-head { display: flex; align-items: center; gap: 0.75rem; padding-block-end: 0.55rem; border-block-end: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); }
.as-indcard__mock-head strong { display: block; font-size: 0.9375rem; color: var(--wp--preset--color--white); }

/* Score ring: a conic gradient filled to 92%. */
.as-indcard__ring { display: grid; flex: none; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: conic-gradient(#EF9820 0 92%, rgba(255, 255, 255, 0.12) 92% 100%); }
.as-indcard__ring span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--wp--preset--color--ink); font-size: 0.75rem; font-weight: 800; color: var(--wp--preset--color--white); }

.as-indcard__mock-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.65rem; border-radius: 10px; background: rgba(255, 255, 255, 0.05); font-size: 0.8125rem; color: rgba(255, 255, 255, 0.85); }
.as-indcard__mock-row em { flex: none; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.6875rem; font-style: normal; font-weight: 700; white-space: nowrap; }
.as-indcard__mock-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-indcard__mock-row.is-ok em { background: rgba(52, 199, 120, 0.18); color: #6EE7A8; }
.as-indcard__mock-row.is-open em { background: rgba(239, 152, 32, 0.2); color: #FFC27A; }

/* "Adapts" band: dark showcase with three translucent columns and capability pills. */
.as-indadapt {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(700px circle at 0% 0%, rgba(239, 152, 32, 0.28), transparent 60%),
		radial-gradient(640px circle at 100% 100%, rgba(223, 34, 41, 0.26), transparent 60%),
		var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.78);
}

.as-indadapt::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px;
	-webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000 30%, transparent 100%);
	mask-image: radial-gradient(70% 80% at 50% 50%, #000 30%, transparent 100%);
}

.as-indadapt__head { max-inline-size: 44rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.as-indadapt__head .as-eyebrow { color: var(--wp--preset--color--orange); }
.as-indadapt__head h2 { margin: 0.4rem 0 0; color: var(--wp--preset--color--white); }
.as-indadapt__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }

.as-indadapt__cols li {
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.as-indadapt__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-block-end: 1.1rem; border-radius: 16px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); box-shadow: 0 16px 32px -12px rgba(239, 152, 32, 0.6); }
.as-indadapt__cols h3 { margin: 0 0 0.5rem; font-size: 1.25rem; color: var(--wp--preset--color--white); }
.as-indadapt__cols p { margin: 0; line-height: 1.65; }
/* "In every industry": one glass bar, the six items evenly spaced with ticks and hairline dividers. */
.as-indadapt__bar {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-block-start: clamp(1.75rem, 3.5vw, 2.5rem);
	padding: 1rem 1.5rem;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.as-indadapt__bar-label { flex: none; margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--orange); }
.as-indadapt__caps { display: grid; flex: 1; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }

.as-indadapt__caps li {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	padding-inline: 0.5rem;
	color: var(--wp--preset--color--white);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
}

.as-indadapt__caps li + li { border-inline-start: 1px solid rgba(255, 255, 255, 0.12); }
.as-indadapt__caps svg { flex: none; color: var(--wp--preset--color--orange); }

/* Browse by audit type: equal tiles in a 4-column grid, then the "Don't see your industry?" banner across the full width. */
.as-indbrowse__head { margin-block-end: 1.5rem; }
.as-indbrowse__head h2 { margin: 0.4rem 0 0; }
.as-indbrowse__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem; margin: 0; padding: 0; list-style: none; }
.as-indbrowse__tiles li { display: flex; }

.as-indbrowse__tiles a {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.75rem;
	min-height: 4.25rem;
	padding: 0.85rem 1rem;
	border-radius: 18px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 14px 30px -26px rgba(19, 26, 26, 0.5);
	color: var(--wp--preset--color--title);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.as-indbrowse__icon { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #FFF1DF, #FFE3D6); color: var(--wp--preset--color--orange-red); transition: background 0.2s ease, color 0.2s ease; }
.as-indbrowse__name { flex: 1; }
.as-indbrowse__go { color: var(--wp--preset--color--faint); transition: color 0.2s ease, transform 0.2s ease; }
.as-indbrowse__tiles a:is(:hover, :focus-visible) { border-color: rgba(237, 135, 35, 0.5); transform: translateY(-2px); box-shadow: 0 20px 36px -24px rgba(223, 34, 41, 0.45); }
.as-indbrowse__tiles a:is(:hover, :focus-visible) .as-indbrowse__icon { background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); }
.as-indbrowse__tiles a:is(:hover, :focus-visible) .as-indbrowse__go { color: var(--wp--preset--color--orange-red); transform: translateX(3px); }

.as-indbrowse__talk {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-block-start: clamp(1.5rem, 3vw, 2rem);
	padding: 1.25rem 1.5rem;
	border-radius: 22px;
	border: 1px solid transparent;
	background:
		radial-gradient(420px circle at 100% 0%, rgba(239, 152, 32, 0.2), transparent 60%) padding-box,
		linear-gradient(var(--wp--preset--color--cream), var(--wp--preset--color--cream)) padding-box,
		linear-gradient(135deg, rgba(239, 152, 32, 0.75), rgba(223, 34, 41, 0.4), rgba(237, 135, 35, 0.15)) border-box;
	box-shadow: 0 24px 48px -36px rgba(223, 34, 41, 0.5);
}

.as-indbrowse__talk-icon { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); }
.as-indbrowse__talk-text { flex: 1; }
.as-indbrowse__talk-text p { margin: 0; line-height: 1.55; }
.as-indbrowse__talk-title { margin-block-end: 0.2rem !important; font-size: 1.1875rem; font-weight: 700; color: var(--wp--preset--color--title); }
.as-indbrowse__talk .as-btn { flex: none; }

/* FAQ heading, centred like the home FAQ. */
.as-indfaq__head { margin-block-end: 1.75rem; text-align: center; }
.as-indfaq__head h2 { margin: 0.4rem 0 0; }

@media (max-width: 1024px) {
	.as-indgrid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-indadapt__cols { grid-template-columns: minmax(0, 1fr); }
	.as-indbrowse__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-indcard--flagship .as-indcard__link { grid-template-columns: minmax(0, 1fr) 220px; }
	.as-indadapt__bar { flex-direction: column; align-items: flex-start; }
	.as-indadapt__caps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0.75rem; width: 100%; }
	.as-indadapt__caps li:nth-child(4) { border-inline-start: 0; }
}

@media (max-width: 600px) {
	.as-indgrid__grid { grid-template-columns: minmax(0, 1fr); }
	.as-indcard--flagship { grid-column: auto; }
	.as-indcard--flagship .as-indcard__link { grid-template-columns: minmax(0, 1fr); }
	.as-indcard__mock { display: none !important; }
	.as-indbrowse__tiles { grid-template-columns: minmax(0, 1fr); }
	.as-indbrowse__talk { flex-direction: column; align-items: flex-start; }
	.as-indadapt__caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-indadapt__caps li { justify-content: flex-start; border-inline-start: 0 !important; }
	.as-indhero__dock a { padding-inline-end: 0.9rem; font-size: 0.9375rem; }
}

@media (prefers-reduced-motion: reduce) {
	.as-indcard__link:is(:hover, :focus-visible), .as-indhero__dock a:is(:hover, :focus-visible), .as-indbrowse__tiles a:is(:hover, :focus-visible), .as-indcard__mock { transform: none !important; }
}

/* ---------- Industry page (templates/single-industry.html, patterns ind-page-*.php, body from content/industries/) ----------
 * Section: One industry: photo hero with a floating audit card, challenges, how AutoSmart helps (screenshot rows), what an audit covers (dark), photo band, standards, FAQ, other industries, CTA.
 * SEO: One H1 on the page's own term; H2 per section, H3 per card; photos sized and lazy below the fold; FAQ answers in the HTML.
 */

/* Hero: warm glows and grid texture; text left, framed photo right. */
.as-iphero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
	background:
		radial-gradient(55% 70% at 85% 30%, rgba(239, 152, 32, 0.22), transparent 70%),
		radial-gradient(40% 60% at 0% 100%, rgba(223, 34, 41, 0.08), transparent 70%),
		var(--wp--preset--color--cream);
}

.as-iphero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px;
	-webkit-mask-image: radial-gradient(60% 80% at 75% 40%, #000 30%, transparent 100%);
	mask-image: radial-gradient(60% 80% at 75% 40%, #000 30%, transparent 100%);
}

.as-iphero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.as-iphero .as-pill { display: inline-flex; align-items: center; gap: 0.4rem; }
.as-iphero__title { margin: 0.25rem 0 1.1rem; font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); line-height: 1.08; letter-spacing: -0.025em; }
.as-iphero__lead { max-inline-size: 38rem; margin: 0 0 1.75rem; font-size: 1.125rem; line-height: 1.65; color: var(--wp--preset--color--body); }
.as-iphero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-end: 1.75rem; }
.as-iphero__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.as-iphero__chips li { padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.25); color: #9A4A0B; font-size: 0.8125rem; font-weight: 600; }

.as-iphero__visual { position: relative; padding-block-end: 2rem; }

.as-iphero__frame {
	overflow: hidden;
	aspect-ratio: 16 / 11;
	border-radius: 32px;
	background: var(--wp--preset--color--ink);
	box-shadow: 0 50px 90px -40px rgba(223, 34, 41, 0.5), 0 0 0 8px rgba(255, 255, 255, 0.65);
}

.as-iphero__img { width: 100%; height: 100%; object-fit: cover; }

/* Floating illustrative audit card over the photo's lower-left corner. */
.as-iphero__card {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: -1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	width: 270px;
	padding: 1.1rem;
	border-radius: 20px;
	background: rgba(19, 26, 26, 0.88);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 30px 60px -24px rgba(19, 26, 26, 0.7);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* Body sections. */
.as-indpage__body { padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40); }
.as-indbody > * { margin-block: 0; }
.as-isec { margin-block-end: clamp(4rem, 8vw, 6rem) !important; }
.as-isec > * { margin-block: 0 1rem; }
.as-isec h2 { max-inline-size: 40rem; margin-block-end: 0.85rem; font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.625rem); line-height: 1.15; letter-spacing: -0.02em; }
.as-isec__intro { max-inline-size: 46rem; margin-block-end: clamp(1.75rem, 3.5vw, 2.5rem) !important; font-size: 1.0625rem; line-height: 1.65; color: var(--wp--preset--color--body); }

/* Challenges: three quote cards with a gradient quote mark. */
.as-ichallenges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.as-ichallenges > *, .as-icovers > *, .as-istandards > * { margin: 0; }

.as-ichallenge {
	position: relative;
	padding: 3.25rem 1.75rem 1.75rem;
	border-radius: 24px;
	background:
		radial-gradient(260px circle at 100% 0%, rgba(239, 152, 32, 0.12), transparent 60%),
		var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.2);
	box-shadow: 0 24px 48px -34px rgba(19, 26, 26, 0.45);
}

.as-ichallenge::before {
	content: "\201C";
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-start: 1.5rem;
	font-size: 4rem;
	font-weight: 800;
	line-height: 1;
	background: var(--wp--preset--gradient--brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.as-ichallenge > * { margin: 0; }
.as-ichallenge h3 { margin-block-end: 0.6rem; font-size: 1.1875rem; line-height: 1.35; color: var(--wp--preset--color--title); }
.as-ichallenge p { line-height: 1.65; color: var(--wp--preset--color--body); }

/* How AutoSmart helps: alternating screenshot rows. */
.as-irow { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-block: 0 clamp(2.5rem, 5vw, 4rem) !important; }
.as-irow--flip { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.as-irow--flip .as-irow__media { order: 2; }

.as-irow__media {
	display: grid !important;
	place-items: center;
	margin: 0 !important;
	padding: clamp(1rem, 2.5vw, 1.75rem);
	border-radius: 28px;
	background:
		linear-gradient(rgba(19, 26, 26, 0.04) 1px, transparent 1px) 0 0 / 28px 28px,
		linear-gradient(90deg, rgba(19, 26, 26, 0.04) 1px, transparent 1px) 0 0 / 28px 28px,
		radial-gradient(420px circle at 100% 0%, rgba(239, 152, 32, 0.28), transparent 60%),
		radial-gradient(380px circle at 0% 100%, rgba(223, 34, 41, 0.12), transparent 60%),
		var(--wp--preset--color--cream);
	border: 1px solid rgba(237, 135, 35, 0.2);
}

/* UI card images carry their own corners and shadow; they show at their designed width, shrinking only on small screens. */
.as-irow__media img { display: block; max-width: 100%; height: auto; }
.as-irow__text > * { margin: 0 0 0.85rem; }
.as-irow__label { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.as-irow__text h3 { font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem); line-height: 1.25; color: var(--wp--preset--color--title); }
.as-irow__text p:not(.as-irow__label) { font-size: 1.0625rem; line-height: 1.7; color: var(--wp--preset--color--body); }
.as-irow__points { margin: 0.5rem 0 0 !important; padding: 0; list-style: none; }
.as-irow__points li { position: relative; margin: 0 0 0.55rem; padding-inline-start: 1.9rem; font-weight: 600; color: var(--wp--preset--color--title); }
.as-irow__points li::before { content: ""; position: absolute; inset-block-start: 0.15rem; inset-inline-start: 0; width: 1.25rem; height: 1.25rem; border-radius: 6px; background: var(--wp--preset--gradient--brand); }
.as-irow__points li::after { content: ""; position: absolute; inset-block-start: 0.45rem; inset-inline-start: 0.36rem; width: 0.45rem; height: 0.24rem; border-inline-start: 2px solid #fff; border-block-end: 2px solid #fff; transform: rotate(-45deg); }

/* What an audit covers: a dark showcase panel with six translucent cards. */
.as-isec--covers {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(2rem, 5vw, 3.75rem);
	border-radius: 36px;
	background:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 48px 48px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 48px 48px,
		radial-gradient(620px circle at 100% 0%, rgba(239, 152, 32, 0.32), transparent 60%),
		radial-gradient(560px circle at 0% 100%, rgba(223, 34, 41, 0.28), transparent 60%),
		var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.78);
	box-shadow: 0 50px 100px -50px rgba(19, 26, 26, 0.7);
}

.as-isec--covers h2 { color: var(--wp--preset--color--white); }
.as-isec--covers .as-eyebrow { color: var(--wp--preset--color--orange); }
.as-isec--covers .as-isec__intro { color: rgba(255, 255, 255, 0.72); }
.as-icovers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: cover; }

.as-icover {
	padding: 1.5rem;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	counter-increment: cover;
}

.as-icover > * { margin: 0; }
.as-icover h3 { display: flex; align-items: center; gap: 0.6rem; margin-block-end: 0.85rem; font-size: 1.125rem; color: var(--wp--preset--color--white); }
.as-icover h3::before { content: counter(cover, decimal-leading-zero); padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--wp--preset--gradient--brand); font-size: 0.75rem; font-weight: 800; }
.as-icover ul { margin: 0; padding: 0; list-style: none; }
.as-icover li { position: relative; margin: 0 0 0.45rem; padding-inline-start: 1.1rem; font-size: 0.9375rem; line-height: 1.5; }
.as-icover li::before { content: ""; position: absolute; inset-block-start: 0.55rem; inset-inline-start: 0; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--wp--preset--color--orange); box-shadow: 0 0 8px rgba(239, 152, 32, 0.8); }

/* Photo band: a wide rounded photo with a dark fade and a line of text over it. */
.as-iband { position: relative; overflow: hidden; margin-block: 0 clamp(4rem, 8vw, 6rem) !important; border-radius: 36px; box-shadow: 0 50px 90px -50px rgba(19, 26, 26, 0.7); }
.as-iband > * { margin: 0 !important; }
.as-iband__img img { display: block; width: 100%; height: clamp(260px, 32vw, 440px); object-fit: cover; }
.as-iband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19, 26, 26, 0.85), rgba(19, 26, 26, 0.2) 70%); pointer-events: none; }

.as-iband__text {
	position: absolute;
	inset-block-end: clamp(1.5rem, 4vw, 3rem);
	inset-inline-start: clamp(1.5rem, 4vw, 3rem);
	z-index: 1;
	max-inline-size: 30rem;
	font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--white);
}

/* Standards: badge cards. */
.as-istandards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }

.as-istandard {
	position: relative;
	padding: 1.4rem 1.4rem 1.4rem 4.5rem;
	border-radius: 20px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 16px 32px -26px rgba(19, 26, 26, 0.45);
}

.as-istandard::before {
	content: "";
	position: absolute;
	inset-block-start: 1.3rem;
	inset-inline-start: 1.25rem;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4v5c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V7l8-4z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / 1.3rem no-repeat,
		var(--wp--preset--gradient--brand);
	box-shadow: 0 10px 20px -10px rgba(223, 34, 41, 0.7);
}

.as-istandard > * { margin: 0; }
.as-istandard__name { margin-block-end: 0.3rem !important; font-weight: 700; color: var(--wp--preset--color--title); }
.as-istandard__text { font-size: 0.9375rem; line-height: 1.55; color: var(--wp--preset--color--body); }

/* Links inside section intros (e.g. automotive pointing to the solution pages). */
.as-isec__intro a { color: var(--wp--preset--color--orange-red); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Results from real case studies: three gradient numbers on a warm panel, each linking to its story. */
.as-iproofs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-block-start: 1.5rem;
	border-radius: 28px;
	background:
		radial-gradient(420px circle at 100% 0%, rgba(239, 152, 32, 0.24), transparent 60%),
		radial-gradient(380px circle at 0% 100%, rgba(223, 34, 41, 0.1), transparent 60%),
		var(--wp--preset--color--cream);
	border: 1px solid rgba(237, 135, 35, 0.22);
}

.as-iproofs > * { margin: 0; }
/* Column per result: the story link sits at the bottom, so the links line up across columns. */
.as-iproof { display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.25rem); }
.as-iproof__link { margin-block-start: auto !important; }
.as-iproof + .as-iproof { border-inline-start: 1px solid rgba(237, 135, 35, 0.2); }
.as-iproof > * { margin: 0; }

.as-iproof__num {
	font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.875rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
	background: var(--wp--preset--gradient--brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.as-iproof__label { margin-block: 0.5rem 1rem !important; font-weight: 600; color: var(--wp--preset--color--title); }
.as-iproof__link a { font-weight: 700; color: var(--wp--preset--color--orange-red); text-decoration: none; }
.as-iproof__link a:hover { text-decoration: underline; }

/* FAQ: centred column. */
.as-isec--faq { max-inline-size: 860px; margin-inline: auto !important; }
.as-isec--faq > .as-eyebrow, .as-isec--faq > h2 { margin-inline: auto; text-align: center; }
.as-isec--faq .as-faq { margin-block-start: 1.5rem; }
.as-isec--faq .as-faq > * { margin-block: 0; }

/* Other industries: small photo cards. */
.as-ipothers { background: var(--wp--preset--color--cream); }
.as-ipothers__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.as-ipothers__grid li { display: flex; }

.as-ipother {
	display: flex;
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	border-radius: 22px;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.18);
	box-shadow: 0 20px 40px -32px rgba(19, 26, 26, 0.45);
	color: var(--wp--preset--color--body);
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.as-ipother__photo { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--wp--preset--color--ink); }
.as-ipother__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.as-ipother__icon { position: absolute; inset-block-end: -1.25rem; inset-inline-start: 1.25rem; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--orange-red); box-shadow: 0 10px 20px -10px rgba(19, 26, 26, 0.5); }
.as-ipother__name { margin: 1.75rem 1.25rem 0.35rem; font-size: 1.125rem; color: var(--wp--preset--color--title); }
.as-ipother__go { margin: 0 1.25rem 1.25rem; font-weight: 700; color: var(--wp--preset--color--orange-red); }
.as-ipother:is(:hover, :focus-visible) { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(223, 34, 41, 0.45); }
.as-ipother:is(:hover, :focus-visible) .as-ipother__photo img { transform: scale(1.05); }

@media (max-width: 1024px) {
	.as-iphero__inner, .as-irow { grid-template-columns: minmax(0, 1fr); }
	.as-irow--flip .as-irow__media { order: 0; }
	.as-ichallenges, .as-icovers, .as-istandards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-iproofs { grid-template-columns: minmax(0, 1fr); }
	.as-iproof + .as-iproof { border-inline-start: 0; border-block-start: 1px solid rgba(237, 135, 35, 0.2); }
	.as-ipothers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-iphero__card { inset-inline-start: 1rem; }
}

@media (max-width: 600px) {
	.as-ichallenges, .as-icovers, .as-istandards, .as-ipothers__grid { grid-template-columns: minmax(0, 1fr); }
	.as-iphero__card { position: relative; inset: auto; width: auto; margin-block-start: -2.5rem; margin-inline: 1rem; }
	.as-iphero__visual { padding-block-end: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.as-ipother:is(:hover, :focus-visible), .as-ipother:is(:hover, :focus-visible) .as-ipother__photo img { transform: none; }
}

/* ---------- Solutions hub (templates/page-solutions.html, patterns sol-hub-*.php) ----------
 * Section: The hub for every solution page: hero (Industries hub hero styles), filterable solution cards (as-indcard), audit-type tiles (as-indbrowse), dark featured showcase, four-step flow, proof band, industries dock, FAQ, CTA.
 * SEO: One H1 on the hub's own term; H2 per section, H3 per solution and step; every card and tile is a descriptive internal link to the page that owns the term.
 */

/* Hero: the dock wraps to two rows of four on desktop. */
.as-solhero .as-indhero__dock ul { max-inline-size: 64rem; margin-inline: auto; }

/* Solutions grid: heading on the left, role filter on the right, cards in two columns. */
.as-solgrid__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-block-end: clamp(2rem, 4vw, 3rem); }
.as-solgrid__head .as-indgrid__head { margin-block-end: 0; }
.as-solgrid__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.as-solcard[hidden] { display: none; }
.as-solcard__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.as-solcard__roles { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-align: end; text-transform: uppercase; color: var(--wp--preset--color--faint); }
.as-solcard .as-indcard__link:is(:hover, :focus-visible) .as-indcard__icon { background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); }
.as-solcard .as-indcard__icon { transition: background 0.3s ease, color 0.3s ease; }

/* Audit-type tiles: warm band, each tile names the audit and, below it, the solution it leads to. */
.as-solaudits {
	background:
		radial-gradient(600px circle at 0% 100%, rgba(239, 152, 32, 0.14), transparent 60%),
		radial-gradient(500px circle at 100% 0%, rgba(223, 34, 41, 0.07), transparent 60%),
		var(--wp--preset--color--cream);
}

.as-solaudits__lead { margin: 0.6rem 0 0; font-size: 1.0625rem; color: var(--wp--preset--color--body); }
.as-solaudits__to { display: block; margin-block-start: 0.15rem; font-size: 0.8125rem; font-weight: 500; color: var(--wp--preset--color--faint); }
.as-solaudits .as-indbrowse__tiles a:is(:hover, :focus-visible) .as-solaudits__to { color: var(--wp--preset--color--orange-red); }

/* Featured solution: dark showcase with grid texture, the product visual on glass on the left. */
.as-solfeat {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(700px circle at 100% 0%, rgba(239, 152, 32, 0.3), transparent 60%),
		radial-gradient(640px circle at 0% 100%, rgba(223, 34, 41, 0.28), transparent 60%),
		var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.78);
}

.as-solfeat::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px;
	-webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000 30%, transparent 100%);
	mask-image: radial-gradient(70% 80% at 50% 50%, #000 30%, transparent 100%);
}

.as-solfeat__head { margin-block-end: clamp(2rem, 4vw, 3rem); text-align: center; }
.as-solfeat__head .as-eyebrow { color: var(--wp--preset--color--orange); }
.as-solfeat__head h2 { margin: 0.4rem 0 0; color: var(--wp--preset--color--white); }
.as-solfeat__body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.as-solfeat__body.is-text-only { grid-template-columns: minmax(0, 1fr); max-inline-size: 44rem; margin-inline: auto; text-align: center; }

.as-solfeat__visual {
	padding: clamp(0.75rem, 2vw, 1.25rem);
	border-radius: 28px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7), 0 0 0 10px rgba(255, 255, 255, 0.03);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.as-solfeat__img { display: block; width: 100%; height: auto; border-radius: 18px; }
.as-solfeat__pill { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.35rem 0.85rem 0.35rem 0.4rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.8125rem; font-weight: 700; color: var(--wp--preset--color--white); }
.as-solfeat__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); }
.as-solfeat__name { margin: 1rem 0 0.75rem; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1.15; color: var(--wp--preset--color--white); }
.as-solfeat__lead { margin: 0 0 1.25rem; font-size: 1.0625rem; line-height: 1.65; }
.as-solfeat__ticks { display: flex; flex-direction: column; gap: 0.6rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.as-solfeat__body.is-text-only .as-solfeat__ticks { align-items: center; }
.as-solfeat__ticks li { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; color: var(--wp--preset--color--white); }
.as-solfeat .as-btn { gap: 0.45rem; }
.as-solfeat__ticks svg { flex: none; padding: 4px; border-radius: 50%; background: rgba(239, 152, 32, 0.18); color: var(--wp--preset--color--orange); box-sizing: content-box; }

/* Four steps: numbered cards on a soft warm band, joined by a gradient line on desktop. */
.as-solsteps {
	background:
		radial-gradient(700px circle at 50% 0%, rgba(239, 152, 32, 0.1), transparent 60%),
		var(--wp--preset--color--white);
}

.as-solsteps__head { max-inline-size: 44rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.as-solsteps__head h2 { margin: 0.4rem 0 0.75rem; }
.as-solsteps__head p:last-child { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--wp--preset--color--body); }
.as-solsteps__list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }

/* The connecting line behind the icons. */
.as-solsteps__list::before {
	content: "";
	position: absolute;
	inset-block-start: calc(clamp(1.25rem, 2.5vw, 1.75rem) + 26px);
	inset-inline: 12%;
	height: 2px;
	background: linear-gradient(90deg, rgba(239, 152, 32, 0.15), rgba(239, 152, 32, 0.8), rgba(223, 34, 41, 0.8), rgba(223, 34, 41, 0.15));
}

.as-solstep {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(237, 135, 35, 0.2);
	box-shadow: 0 24px 50px -36px rgba(19, 26, 26, 0.4);
}

.as-solstep__top { display: flex; align-items: center; justify-content: space-between; }
.as-solstep__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); box-shadow: 0 0 0 6px var(--wp--preset--color--white), 0 16px 32px -12px rgba(239, 152, 32, 0.6); }
.as-solstep__num { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: rgba(237, 135, 35, 0.25); }
.as-solstep__title { margin: 1.1rem 0 0.5rem; font-size: 1.25rem; }
.as-solstep__text { margin: 0 0 1rem; line-height: 1.6; color: var(--wp--preset--color--body); }
.as-solstep__links { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: auto 0 0; padding-block-start: 0.85rem; border-block-start: 1px solid var(--wp--preset--color--line); font-size: 0.8125rem; }
.as-solstep__links span { inline-size: 100%; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--faint); }
.as-solstep__links a { padding: 0.25rem 0.65rem; border-radius: 999px; background: #FFF4E5; color: #9A4A0B; font-weight: 600; text-decoration: none; }
.as-solstep__links a:is(:hover, :focus-visible) { background: var(--wp--preset--color--orange-red); color: var(--wp--preset--color--white); }

/* Proof band: dark card with glows, three gradient figures divided by hairlines. */
.as-solproof__card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.5rem);
	border-radius: 32px;
	background:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
		radial-gradient(520px circle at 100% 100%, rgba(223, 34, 41, 0.35), transparent 60%),
		var(--wp--preset--color--ink);
	box-shadow: 0 40px 80px -40px rgba(19, 26, 26, 0.7);
}

.as-solproof__card .as-cta__glow--a { background: rgba(239, 152, 32, 0.4); }
/* Sits right under the steps: no extra top padding on top of theirs. */
.as-section.as-solproof { padding-block-start: 0; }
.as-solproof__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.as-solproof__stats li { position: relative; display: flex; flex-direction: column; gap: 0.4rem; padding-inline: clamp(1rem, 3vw, 2.5rem); }

/* Hover: a light-yellow glow lights up the figure's own area, like the card's top-left corner (clipped by the card). */
.as-solproof__stats li::before {
	content: "";
	position: absolute;
	inset: -6rem -2rem;
	z-index: -1;
	background: radial-gradient(closest-side, rgba(255, 214, 150, 0.4), transparent);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.as-solproof__stats li:hover::before { opacity: 1; }
.as-solproof__stats li + li { border-inline-start: 1px solid rgba(255, 255, 255, 0.12); }
.as-solproof__num { font-size: clamp(2.75rem, 2rem + 2.5vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; background: linear-gradient(120deg, #FFC27A, #EF9820 45%, #F25C3B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.as-solproof__label { font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, 0.8); }
.as-solproof__link { margin-block-start: 0.35rem; font-size: 0.875rem; font-weight: 700; color: var(--wp--preset--color--orange); text-decoration: none; }
.as-solproof__link:hover { text-decoration: underline; }

/* Browse by industry: the hero's glass dock, left-aligned under the heading. */
.as-solind__dock { margin-block-start: 1.5rem; }
.as-solind__dock ul { justify-content: flex-start; }

@media (max-width: 1024px) {
	.as-solsteps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-solsteps__list::before { display: none; }
	.as-solfeat__body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
	.as-solgrid__grid, .as-solsteps__list { grid-template-columns: minmax(0, 1fr); }
	.as-solproof__stats { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.as-solproof__stats li + li { padding-block-start: 1.5rem; border-inline-start: 0; border-block-start: 1px solid rgba(255, 255, 255, 0.12); }
	.as-solcard__roles { display: none; }
}

/* ---------- Solution page (templates/single-use_case.html, patterns sol-page-*.php, body from content/use-cases/) ----------
 * Section: One solution: home-style hero (text left, video right), logo strip, body sections shared with the industry pages plus before/after and who it's for, related solutions, CTA.
 * SEO: One H1 on the page's own term; H2 per body section, H3 per item; FAQPage read from the body; video loads only on play.
 */

/* Hero: the home hero's look, text left and the video frame right. */
.as-sphero__inner { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: var(--wp--preset--spacing--60); }
.as-sphero .as-crumbs { margin-block-end: 1rem; }
.as-sphero__media { min-width: 0; }

/* Empty video frame: 16:9 placeholder with the faint grid texture, holding the video's place. */
.as-sphero__slot {
	aspect-ratio: 832 / 464;
	background:
		linear-gradient(rgba(19, 26, 26, 0.04) 1px, transparent 1px) 0 0 / 32px 32px,
		linear-gradient(90deg, rgba(19, 26, 26, 0.04) 1px, transparent 1px) 0 0 / 32px 32px,
		radial-gradient(60% 70% at 50% 50%, rgba(239, 152, 32, 0.12), transparent 70%),
		var(--wp--preset--color--cream);
}

.as-sphero .as-window__screen video { background: var(--wp--preset--color--cream); }

/* The FAQ (last body section) runs straight into Related solutions: no stacked bottom margins and paddings. */
.as-solpage .as-indbody > :last-child { margin-block-end: 0 !important; }
.as-solpage .as-indpage__body { padding-block-end: 0; }
.as-section.as-spothers { padding-block-start: var(--wp--preset--spacing--60); }

/* Before and after: dashed "without" column, gradient-bordered "with" column. */
.as-icompare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-block-start: 1.5rem; }
.as-icompare > * { margin: 0; }
.as-icompare__col { padding: clamp(1.5rem, 3vw, 2rem); border-radius: 24px; }
.as-icompare__col > * { margin: 0; }
.as-icompare__col h3 { margin-block-end: 1rem; font-size: 1.25rem; }
.as-icompare__col ul { display: flex; flex-direction: column; gap: 0.75rem; padding: 0; list-style: none; }
.as-icompare__col li { position: relative; padding-inline-start: 2rem; line-height: 1.55; }
.as-icompare__col li::before { position: absolute; inset-inline-start: 0; inset-block-start: 0.05rem; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; font-size: 0.75rem; font-weight: 800; }
.as-icompare__col--before { border: 2px dashed rgba(19, 26, 26, 0.18); background: var(--wp--preset--color--white); color: var(--wp--preset--color--body); }
.as-icompare__col--before h3 { color: var(--wp--preset--color--muted); }
.as-icompare__col--before li::before { content: "\2715"; background: rgba(19, 26, 26, 0.07); color: var(--wp--preset--color--muted); }

.as-icompare__col--after {
	border: 2px solid transparent;
	background:
		radial-gradient(360px circle at 100% 0%, rgba(239, 152, 32, 0.16), transparent 60%) padding-box,
		linear-gradient(var(--wp--preset--color--white), var(--wp--preset--color--white)) padding-box,
		var(--wp--preset--gradient--brand) border-box;
	box-shadow: 0 30px 60px -40px rgba(223, 34, 41, 0.55);
	color: var(--wp--preset--color--title);
}

.as-icompare__col--after li::before { content: "\2713"; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); }

/* Who it's for: three cards with a gradient corner number. */
.as-iroles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-block-start: 1.5rem; counter-reset: role; }
.as-iroles > * { margin: 0; }

.as-irole {
	position: relative;
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: 24px;
	background:
		radial-gradient(240px circle at 100% 0%, rgba(239, 152, 32, 0.12), transparent 60%),
		var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.2);
	box-shadow: 0 24px 50px -36px rgba(19, 26, 26, 0.4);
	counter-increment: role;
}

.as-irole::before { content: "0" counter(role); display: block; margin-block-end: 0.75rem; font-size: 1.75rem; font-weight: 800; line-height: 1; background: var(--wp--preset--gradient--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.as-irole > * { margin: 0; }
.as-irole h3 { margin-block-end: 0.5rem; font-size: 1.1875rem; }
.as-irole p { line-height: 1.65; color: var(--wp--preset--color--body); }

@media (max-width: 1024px) {
	.as-sphero__inner { grid-template-columns: minmax(0, 1fr); }
	.as-iroles { grid-template-columns: minmax(0, 1fr); }
}

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

/* ---------- About us (templates/page-about-us.html, patterns about-*.php, data inc/about.php) ----------
 * Section: Who AutoSmart is: arched founder hero with quote and proof bar, founder story, beliefs, dark industry orbit, team, offices, results, trust links, facts FAQ, CTA.
 * SEO: One H1 on the brand; H2 per section, H3 per chapter, belief, person and office; AboutPage + Organization + FAQPage from the same data.
 */

/* Initials avatar: shown until a person's photo is added to assets/img/team/. */
.as-avatar--initials {
	display: grid;
	place-items: center;
	background:
		linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 18px 18px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 18px 18px,
		var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--white);
	font-weight: 800;
	letter-spacing: -0.03em;
}

/* No sideways scroll on phones from decorative glows (clip, unlike hidden, keeps the sticky founder card working). */
.as-about { overflow-x: clip; }
.as-abfounder { contain: paint; }

/* Initials stay centred inside every frame (the frames' own classes set display: block for photos). */
.as-abhero__photo.as-avatar--initials, .as-abfounder__photo.as-avatar--initials, .as-abperson__photo.as-avatar--initials { display: grid; place-items: center; line-height: 1; }

/* Buttons with an arrow: a gap before the arrow. */
.as-abhero__cta .as-btn, .as-abnet .as-btn { gap: 0.45rem; }

/* Hero: warm glows, grid texture, text left, arched founder frame right, proof bar under both. */
.as-abhero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	background:
		radial-gradient(45% 60% at 80% 40%, rgba(239, 152, 32, 0.28), transparent 70%),
		radial-gradient(35% 50% at 0% 100%, rgba(223, 34, 41, 0.08), transparent 70%),
		var(--wp--preset--color--cream);
}

.as-abhero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px;
	-webkit-mask-image: radial-gradient(70% 80% at 60% 40%, #000 25%, transparent 100%);
	mask-image: radial-gradient(70% 80% at 60% 40%, #000 25%, transparent 100%);
}

.as-abhero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: var(--wp--preset--spacing--60); }
.as-abhero .as-crumbs { margin-block-end: 1rem; }
.as-abhero__title { max-inline-size: 15ch; margin: 0.75rem 0 1.25rem; font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem); line-height: 1.04; letter-spacing: -0.03em; }
.as-abhero__lead { max-inline-size: 36rem; margin: 0 0 2rem; font-size: 1.1875rem; line-height: 1.65; color: var(--wp--preset--color--body); }
.as-abhero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* The arched frame: gradient ring, soft glow behind, the photo or initials inside. */
/* Room under the photo so the quote card only overlaps its bottom edge, not the faces. */
.as-abhero__visual { position: relative; justify-self: center; inline-size: min(100%, 580px); padding: 0 0 9rem 2.5rem; }
.as-abhero__visual::before { content: ""; position: absolute; inset: 8% 0 18% 18%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(239, 152, 32, 0.55), transparent); filter: blur(30px); }

.as-abhero__frame {
	aspect-ratio: 4 / 3;
	padding: 6px;
	border-radius: 36px;
	background: var(--wp--preset--gradient--brand);
	box-shadow: 0 40px 80px -36px rgba(223, 34, 41, 0.6), 0 0 0 10px rgba(255, 255, 255, 0.55);
}

.as-abhero__photo { display: block; inline-size: 100%; block-size: 100%; border-radius: 30px; object-fit: cover; object-position: center 45%; }
.as-abhero__frame .as-avatar--initials { font-size: clamp(5rem, 4rem + 4vw, 8rem); }

/* Floating glass quote card, bottom left, overlapping the frame. */
.as-abhero__quote {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	max-inline-size: 380px;
	margin: 0;
	padding: 1.1rem 1.25rem;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(237, 135, 35, 0.25);
	box-shadow: 0 30px 60px -30px rgba(19, 26, 26, 0.45);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.as-abhero__quote blockquote { margin: 0; }
.as-abhero__quote p { margin: 0 0 0.6rem; font-size: 0.9375rem; line-height: 1.55; color: var(--wp--preset--color--title); }
.as-abhero__quote figcaption { font-size: 0.8125rem; color: var(--wp--preset--color--muted); }
.as-abhero__quote figcaption strong { display: block; color: var(--wp--preset--color--title); }

/* Floating figure chip, top right. */
.as-abhero__chip { position: absolute; inset-block-start: 46%; inset-inline-end: -0.75rem; margin: 0; padding: 0.55rem 1rem; border-radius: 999px; background: var(--wp--preset--color--white); box-shadow: 0 18px 40px -18px rgba(223, 34, 41, 0.5); font-size: 0.875rem; font-weight: 600; color: var(--wp--preset--color--body); }
.as-abhero__chip span { font-weight: 800; background: var(--wp--preset--gradient--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Proof bar: white card with four gradient figures. */
.as-abproof {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	margin: clamp(2.5rem, 5vw, 4rem) auto 0 !important;
	padding: 1.5rem 0;
	border-radius: 28px;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(237, 135, 35, 0.2);
	box-shadow: 0 30px 70px -40px rgba(223, 34, 41, 0.45);
	list-style: none;
}

.as-abproof li { display: flex; flex-direction: column; gap: 0.25rem; padding-inline: clamp(1rem, 2.5vw, 2rem); }
.as-abproof li + li { border-inline-start: 1px solid rgba(237, 135, 35, 0.2); }
.as-abproof__num { font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; background: var(--wp--preset--gradient--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.as-abproof__label { font-size: 0.9375rem; color: var(--wp--preset--color--body); }

/* Our story: sticky dark founder card, chapters on a gradient line. */
.as-abstory { background: radial-gradient(700px circle at 100% 0%, rgba(239, 152, 32, 0.08), transparent 60%), var(--wp--preset--color--white); }
.as-abstory__inner { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: start; gap: clamp(2.5rem, 6vw, 5rem); }

.as-abfounder {
	position: sticky;
	inset-block-start: calc(var(--as-header-h) + 2rem);
	overflow: hidden;
	isolation: isolate;
	padding: 2rem 1.75rem;
	border-radius: 28px;
	background:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
		var(--wp--preset--color--ink);
	box-shadow: 0 40px 80px -40px rgba(19, 26, 26, 0.7);
	color: rgba(255, 255, 255, 0.78);
	text-align: center;
}

/* Logged in: the WordPress admin bar sits above the sticky header, so the card stops lower. */
.admin-bar .as-abfounder { inset-block-start: calc(var(--as-header-h) + 32px + 2rem); }

.as-abfounder__glow { position: absolute; inset: -30% -30% auto auto; z-index: -1; inline-size: 260px; block-size: 260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(239, 152, 32, 0.45), transparent); }
.as-abfounder__photo { inline-size: 120px; block-size: 120px; margin: 0 auto 1rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--wp--preset--color--ink), 0 0 0 7px rgba(239, 152, 32, 0.8); }
.as-abfounder__photo.as-avatar--initials { font-size: 2.5rem; }
.as-abfounder__name { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--wp--preset--color--white); }
.as-abfounder__role { margin: 0.2rem 0 0; font-size: 0.875rem; font-weight: 600; color: var(--wp--preset--color--orange); }
.as-abfounder__link { display: inline-block; margin-block-start: 0.6rem; font-size: 0.875rem; font-weight: 700; color: var(--wp--preset--color--white); }
.as-abfounder__quote { margin: 1.25rem 0 0; padding-block-start: 1.25rem; border-block-start: 1px solid rgba(255, 255, 255, 0.12); font-size: 1.0625rem; font-style: italic; line-height: 1.5; color: var(--wp--preset--color--white); }

.as-abstory__body h2 { margin: 0.4rem 0 clamp(1.75rem, 3vw, 2.5rem); }
.as-abchapters { position: relative; display: flex; flex-direction: column; gap: clamp(1.75rem, 3vw, 2.5rem); margin: 0; padding: 0 0 0 4.5rem; list-style: none; }
.as-abchapters::before { content: ""; position: absolute; inset-block: 1.5rem 1.5rem; inset-inline-start: 1.5rem; inline-size: 2px; background: linear-gradient(180deg, rgba(239, 152, 32, 0.9), rgba(223, 34, 41, 0.6), rgba(223, 34, 41, 0.1)); }
.as-abchapter { position: relative; }
.as-abchapter__num { position: absolute; inset-block-start: -0.2rem; inset-inline-start: -4.5rem; display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: var(--wp--preset--gradient--brand); box-shadow: 0 0 0 6px var(--wp--preset--color--white), 0 14px 28px -10px rgba(223, 34, 41, 0.6); font-size: 0.9375rem; font-weight: 800; color: var(--wp--preset--color--white); }
.as-abchapter h3 { margin: 0 0 0.5rem; font-size: 1.375rem; }
.as-abchapter p { margin: 0; font-size: 1.0625rem; line-height: 1.75; color: var(--wp--preset--color--body); }

/* What we believe: 2×2 rich cards on a warm band. */
.as-abbeliefs { background: radial-gradient(600px circle at 0% 0%, rgba(239, 152, 32, 0.14), transparent 60%), radial-gradient(500px circle at 100% 100%, rgba(223, 34, 41, 0.07), transparent 60%), var(--wp--preset--color--cream); }
.as-abbeliefs__head { max-inline-size: 44rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.as-abbeliefs__head h2 { margin: 0.4rem 0 0; }
.as-abbeliefs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }

.as-abbelief {
	position: relative;
	overflow: hidden;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: 28px;
	background: radial-gradient(280px circle at 100% 0%, rgba(239, 152, 32, 0.12), transparent 60%), var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.2);
	box-shadow: 0 24px 50px -36px rgba(19, 26, 26, 0.4);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.as-abbelief::after { content: ""; position: absolute; inset: 0 auto auto 0; inline-size: 64px; block-size: 4px; background: var(--wp--preset--gradient--brand); transition: inline-size 0.4s ease; }
.as-abbelief:hover { transform: translateY(-4px); border-color: rgba(237, 135, 35, 0.45); box-shadow: 0 34px 60px -34px rgba(223, 34, 41, 0.45); }
.as-abbelief:hover::after { inline-size: 100%; }
.as-abbelief__top { display: flex; align-items: center; justify-content: space-between; margin-block-end: 1.25rem; }
.as-abbelief__icon { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 18px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); box-shadow: 0 16px 32px -12px rgba(239, 152, 32, 0.6); }
.as-abbelief__num { font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: rgba(237, 135, 35, 0.18); }
.as-abbelief h3 { margin: 0 0 0.5rem; font-size: 1.375rem; }
.as-abbelief p { margin: 0; line-height: 1.7; color: var(--wp--preset--color--body); }

/* From dealer networks to every network: dark band, text left, industry orbit right. */
.as-abnet {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(700px circle at 100% 50%, rgba(239, 152, 32, 0.3), transparent 60%),
		radial-gradient(600px circle at 0% 100%, rgba(223, 34, 41, 0.25), transparent 60%),
		var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.78);
}

.as-abnet::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: radial-gradient(70% 80% at 60% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 80% at 60% 50%, #000 30%, transparent 100%); }
.as-abnet__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.as-abnet__text .as-eyebrow { color: var(--wp--preset--color--orange); }
.as-abnet__text h2 { margin: 0.4rem 0 1rem; color: var(--wp--preset--color--white); }
.as-abnet__text p { margin: 0 0 1.75rem; font-size: 1.0625rem; line-height: 1.75; }

/* The orbit: two dashed rings, the logo at the centre, tiles placed around the circle with CSS trigonometry. */
.as-abnet__orbit { position: relative; inline-size: min(100%, 520px); aspect-ratio: 1; margin-inline: auto; }
.as-abnet__orbit::before, .as-abnet__orbit::after { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.2); }
.as-abnet__orbit::after { inset: 30%; border-style: solid; border-color: rgba(239, 152, 32, 0.25); }
.as-abnet__core { position: absolute; inset: 50% auto auto 50%; z-index: 1; display: grid; place-items: center; inline-size: 116px; block-size: 116px; border-radius: 50%; background: var(--wp--preset--color--white); box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.06), 0 0 0 26px rgba(239, 152, 32, 0.08), 0 30px 60px -20px rgba(239, 152, 32, 0.7); transform: translate(-50%, -50%); }
.as-abnet__core img { inline-size: 64px; block-size: auto; }
.as-abnet__orbit ul { margin: 0; padding: 0; list-style: none; }

.as-abnet__orbit li {
	--a: calc(360deg / var(--n) * var(--i) - 90deg);
	position: absolute;
	inset-block-start: calc(50% + sin(var(--a)) * 41%);
	inset-inline-start: calc(50% + cos(var(--a)) * 41%);
	z-index: 2;
	transform: translate(-50%, -50%);
}

.as-abnet__orbit a { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.95rem 0.5rem 0.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--wp--preset--color--white); font-size: 0.875rem; font-weight: 700; white-space: nowrap; text-decoration: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }
.as-abnet__icon { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); }
.as-abnet__orbit a:is(:hover, :focus-visible) { background: rgba(255, 255, 255, 0.16); border-color: rgba(239, 152, 32, 0.6); transform: scale(1.05); }

/* Founders: one full-width card each, ringed photo left, name, role, description and LinkedIn right. */
.as-abteam__head { margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.as-abteam__head h2 { margin: 0.4rem 0 0; }
.as-abteam__grid { display: flex; flex-direction: column; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }

.as-abperson {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 3rem);
	border-radius: 28px;
	background: radial-gradient(360px circle at 0% 50%, rgba(239, 152, 32, 0.14), transparent 65%), var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.2);
	box-shadow: 0 24px 50px -36px rgba(19, 26, 26, 0.4);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Gradient line down the left edge that fills on hover. */
.as-abperson::after { content: ""; position: absolute; inset: 0 auto 0 0; inline-size: 4px; block-size: 64px; background: var(--wp--preset--gradient--brand); transition: block-size 0.4s ease; }
.as-abperson:hover { transform: translateY(-3px); border-color: rgba(237, 135, 35, 0.45); box-shadow: 0 34px 60px -34px rgba(223, 34, 41, 0.45); }
.as-abperson:hover::after { block-size: 100%; }
.as-abperson__frame { display: block; inline-size: 168px; block-size: 168px; padding: 4px; border-radius: 50%; background: var(--wp--preset--gradient--brand); box-shadow: 0 24px 48px -24px rgba(223, 34, 41, 0.55); }
.as-abperson__photo { display: block; inline-size: 100%; block-size: 100%; border-radius: 50%; border: 4px solid var(--wp--preset--color--white); object-fit: cover; box-sizing: border-box; }
.as-abperson__photo.as-avatar--initials { font-size: 3rem; }
.as-abperson__text > * { margin: 0; }
.as-abperson__name { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); }
.as-abperson__role { margin-block-start: 0.25rem !important; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.02em; color: var(--wp--preset--color--orange-red); }
.as-abperson__bio { max-inline-size: 62rem; margin-block-start: 0.85rem !important; font-size: 1.0625rem; line-height: 1.7; color: var(--wp--preset--color--body); }

/* LinkedIn button: dark pill with the "in" mark. */
.as-abperson__link { display: inline-flex; align-items: center; gap: 0.55rem; margin-block-start: 1.1rem !important; padding: 0.4rem 1rem 0.4rem 0.4rem; border-radius: 999px; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); font-size: 0.875rem; font-weight: 700; text-decoration: none; transition: transform 0.2s ease, background 0.2s ease; }
.as-abperson__link span { display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%; background: #0A66C2; font-size: 0.75rem; font-weight: 800; }
.as-abperson__link:is(:hover, :focus-visible) { background: #0A66C2; transform: translateY(-1px); }

@media (max-width: 600px) {
	/* Phones: the photo above the text, centred. */
	.as-abperson { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
	.as-abperson__frame { inline-size: 136px; block-size: 136px; }
}

/* Offices: cards on a dotted band. */
.as-aboffices { background: radial-gradient(rgba(237, 135, 35, 0.22) 1.2px, transparent 1.4px) 0 0 / 22px 22px, var(--wp--preset--color--cream); }
.as-aboffices__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.as-aboffice { padding: clamp(1.5rem, 3vw, 2rem); border-radius: 24px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.2); box-shadow: 0 24px 50px -36px rgba(19, 26, 26, 0.4); }
.as-aboffice__pin { display: grid; place-items: center; inline-size: 48px; block-size: 48px; margin-block-end: 1.25rem; border-radius: 50% 50% 50% 8px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); box-shadow: 0 14px 28px -12px rgba(223, 34, 41, 0.6); }
.as-aboffice__city { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.02em; }
.as-aboffice__country { margin: 0.2rem 0 1rem; color: var(--wp--preset--color--body); }
.as-aboffice__tz { display: inline-block; margin: 0; padding: 0.3rem 0.75rem; border-radius: 999px; background: #FFF4E5; color: #9A4A0B; font-size: 0.8125rem; font-weight: 600; }

/* How we work: two wide link cards with a gradient border on hover. */
.as-abwork__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.as-abwork__grid li { display: flex; }

.as-abwork__card {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 1.25rem;
	padding: 1.5rem 1.75rem;
	border: 1px solid transparent;
	border-radius: 24px;
	background: linear-gradient(var(--wp--preset--color--white), var(--wp--preset--color--white)) padding-box, linear-gradient(rgba(237, 135, 35, 0.25), rgba(237, 135, 35, 0.25)) border-box;
	box-shadow: 0 24px 50px -36px rgba(19, 26, 26, 0.4);
	color: var(--wp--preset--color--body);
	text-decoration: none;
	transition: transform 0.3s ease, background 0.3s ease;
}

.as-abwork__card:is(:hover, :focus-visible) { transform: translateY(-3px); background: radial-gradient(320px circle at 100% 0%, rgba(239, 152, 32, 0.12), transparent 60%) padding-box, linear-gradient(var(--wp--preset--color--white), var(--wp--preset--color--white)) padding-box, var(--wp--preset--gradient--brand) border-box; }
.as-abwork__icon { display: grid; flex: none; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 18px; background: linear-gradient(135deg, #FFF1DF, #FFE3D6); color: var(--wp--preset--color--orange-red); }
.as-abwork__text { flex: 1; }
.as-abwork__text h3 { margin: 0 0 0.3rem; font-size: 1.1875rem; color: var(--wp--preset--color--title); }
.as-abwork__text p { margin: 0; line-height: 1.55; }
.as-abwork__go { font-size: 1.25rem; color: var(--wp--preset--color--orange-red); transition: transform 0.2s ease; }
.as-abwork__card:is(:hover, :focus-visible) .as-abwork__go { transform: translateX(4px); }

/* Milestones (shown once real dates exist): a gradient line with dated stops. */
.as-abmiles__list { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 1rem; margin: 0; padding: 2rem 0 0; border-block-start: 2px solid rgba(237, 135, 35, 0.4); list-style: none; }
.as-abmiles__list li { position: relative; display: flex; flex-direction: column; gap: 0.3rem; }
.as-abmiles__list li::before { content: ""; position: absolute; inset-block-start: calc(-2rem - 8px); inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--wp--preset--gradient--brand); box-shadow: 0 0 0 5px var(--wp--preset--color--white); }
.as-abmiles__year { font-size: 1.5rem; font-weight: 800; background: var(--wp--preset--gradient--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.as-abmiles__text { line-height: 1.55; color: var(--wp--preset--color--body); }

@media (max-width: 1024px) {
	.as-abhero__inner, .as-abstory__inner, .as-abnet__inner { grid-template-columns: minmax(0, 1fr); }
	.as-abfounder { position: static; max-inline-size: 420px; }
	.as-abproof { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; }
	.as-abproof li:nth-child(odd) { border-inline-start: 0; }
	.as-aboffices__grid { grid-template-columns: minmax(0, 1fr); }
	.as-abmiles__list { grid-auto-flow: row; }
}

@media (max-width: 600px) {
	.as-abbeliefs__grid, .as-abwork__grid { grid-template-columns: minmax(0, 1fr); }
	/* Phones: the photo centred full width, the quote card under it, inset evenly on both sides. */
	.as-abhero__visual { inline-size: 100%; padding: 0 0 9.5rem; }
	.as-abhero__quote { inset-inline: 0.75rem; max-inline-size: none; }
	.as-abhero__chip { inset-block-start: 0.75rem; inset-inline-end: 0.75rem; }
	.as-abchapters { padding-inline-start: 3.75rem; }
	.as-abchapter__num { inset-inline-start: -3.75rem; inline-size: 2.5rem; block-size: 2.5rem; font-size: 0.8125rem; }
	.as-abchapters::before { inset-inline-start: 1.25rem; }
	/* Phones: the orbit becomes a two-column grid of tiles under the logo. */
	.as-abnet__orbit { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
	.as-abnet__orbit::before, .as-abnet__orbit::after { display: none; }
	.as-abnet__core { position: static; transform: none; }
	.as-abnet__orbit ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
	.as-abnet__orbit li { position: static; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.as-abbelief:hover, .as-abperson:hover, .as-abwork__card:is(:hover, :focus-visible), .as-abnet__orbit a:is(:hover, :focus-visible) { transform: none; }
}

/* ---------- Industry Insights (hub: page-industry-insights.html, ins-hub-*.php; paper: single-insights.html, ins-paper-*.php;
 * paper blocks: paper-*.php; Further reading: ins-further.php) ----------
 * Section: Long-form papers: dark editorial heroes, generated covers, numbered sections, stat rows, pull quotes, takeaway boxes, cite.
 * SEO: One H1 per page; numbered H2 sections with anchors; covers are decorative (the same text is on the page).
 */

/* Pill on dark backgrounds. */
.as-pill--dark { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); box-shadow: none; color: var(--wp--preset--color--orange); }

/* Shared dark editorial hero background: ink, warm glows, grid texture. */
.as-inshero, .as-paperhero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(55% 70% at 85% 10%, rgba(239, 152, 32, 0.32), transparent 70%),
		radial-gradient(45% 60% at 0% 100%, rgba(223, 34, 41, 0.26), transparent 70%),
		var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.78);
}

.as-inshero::before, .as-paperhero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: radial-gradient(70% 80% at 50% 40%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 80% at 50% 40%, #000 30%, transparent 100%); }
.as-inshero .as-crumbs a, .as-paperhero .as-crumbs a, .as-inshero .as-crumbs li, .as-paperhero .as-crumbs li, .as-inshero .as-crumbs span, .as-paperhero .as-crumbs span { color: rgba(255, 255, 255, 0.65); }

/* Hub hero: centred. */
.as-inshero { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); text-align: center; }
.as-inshero__inner { display: flex; flex-direction: column; align-items: center; }
.as-inshero .as-crumbs ol { justify-content: center; }
.as-inshero__title { max-inline-size: 16ch; margin: 0.5rem auto 1.25rem; font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem); line-height: 1.04; letter-spacing: -0.03em; color: var(--wp--preset--color--white); }
.as-inshero__lead { max-inline-size: 42rem; margin: 0 auto 2rem; font-size: 1.1875rem; line-height: 1.65; }
.as-inshero__cta .as-btn { gap: 0.45rem; }
.as-inshero__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.75rem; margin: 2rem 0 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.as-inshero__facts li::before { content: ""; display: inline-block; inline-size: 6px; block-size: 6px; margin-inline-end: 0.6rem; border-radius: 50%; background: var(--wp--preset--color--orange); vertical-align: middle; }
.as-inshero__facts strong { color: var(--wp--preset--color--white); }

/* Generated cover: dark panel, glow position varies with the paper number (v0–v3), grid lines, number, segment, title, mark. */
.as-cover {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(1.1rem, 2.5vw, 1.6rem);
	border-radius: 20px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.as-cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 28px 28px; -webkit-mask-image: linear-gradient(160deg, #000, transparent 75%); mask-image: linear-gradient(160deg, #000, transparent 75%); }
.as-cover::after { content: ""; position: absolute; z-index: -1; inline-size: 120%; block-size: 120%; border-radius: 50%; filter: blur(10px); }
.as-cover--v0::after { inset: -40% -60% auto auto; background: radial-gradient(closest-side, rgba(239, 152, 32, 0.6), transparent); }
.as-cover--v1::after { inset: auto auto -50% -50%; background: radial-gradient(closest-side, rgba(223, 34, 41, 0.55), transparent); }
.as-cover--v2::after { inset: -30% auto auto -40%; background: radial-gradient(closest-side, rgba(242, 92, 59, 0.55), transparent); }
.as-cover--v3::after { inset: auto -50% -60% auto; background: radial-gradient(closest-side, rgba(239, 152, 32, 0.55), transparent); }
.as-cover--lg { aspect-ratio: 4 / 5; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 28px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.as-cover--sm { aspect-ratio: 16 / 10; border-radius: 20px 20px 0 0; }
.as-cover__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.as-cover__no { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--orange); }
.as-cover--lg .as-cover__no { font-size: 1rem; }
.as-cover__seg { padding: 0.25rem 0.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.as-cover__title { font-size: clamp(1.125rem, 0.9rem + 0.8vw, 1.375rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.as-cover--lg .as-cover__title { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
.as-cover__foot { display: flex; align-items: center; gap: 0.5rem; padding-block-start: 0.75rem; border-block-start: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.as-cover__foot img { inline-size: 20px; block-size: 20px; padding: 3px; border-radius: 50%; background: var(--wp--preset--color--white); }
.as-cover--sm .as-cover__foot { display: none; }
/* Photo covers (guidebooks, Industry Insights): the stock photo fills the frame under a darkening gradient, the label and chip stay on top. */
.as-cover--photo::before { background: linear-gradient(180deg, rgba(19, 26, 26, 0.6) 0%, rgba(19, 26, 26, 0.05) 36%, rgba(19, 26, 26, 0.05) 60%, rgba(19, 26, 26, 0.72) 100%); }
.as-cover--photo::after { display: none; }
.as-cover--photo .as-cover__no,
.as-cover--photo .as-cover__seg:not(.as-cover__seg--region),
.as-cover--photo .as-cover__foot { background: rgba(19, 26, 26, 0.66); color: var(--wp--preset--color--white); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.as-cover--photo .as-cover__no { padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.75rem; }
.as-cover--photo .as-cover__foot { align-self: flex-start; padding: 0.3rem 0.8rem 0.3rem 0.35rem; border-block-start: 0; border-radius: 999px; }

/* Latest paper: one large card overlapping the hero's bottom edge. */
.as-inslatest { padding-block-start: 0 !important; }
.as-inslatest__card { position: relative; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); margin-block-start: calc(-1 * var(--wp--preset--spacing--50)); padding: clamp(1.25rem, 3vw, 2rem); border-radius: 32px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.2); box-shadow: 0 40px 80px -48px rgba(19, 26, 26, 0.55); }
.as-inslatest__cover { display: block; text-decoration: none; transition: transform 0.4s ease; }
.as-inslatest__cover:hover { transform: translateY(-4px); }
.as-inslatest__label { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.as-inslatest__label span { color: var(--wp--preset--color--orange-red); }
.as-inslatest__title { margin: 0 0 1rem; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; }
.as-inslatest__title a { color: var(--wp--preset--color--title); text-decoration: none; }
.as-inslatest__title a:hover { color: var(--wp--preset--color--orange-red); }
.as-inslatest__lead { margin: 0 0 1.5rem; font-size: 1.125rem; line-height: 1.6; color: var(--wp--preset--color--body); }
.as-inslatest__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 1.75rem; }
.as-inslatest__cta .as-btn, .as-paperhero__actions .as-btn, .as-cite__row .as-btn { gap: 0.45rem; }
.as-inslatest__cta small, .as-paperhero__actions small, .as-cite__row small { font-weight: 500; opacity: 0.75; }

/* Paper cards (hub grid, More insights, Further reading). */
.as-insgrid { background: radial-gradient(700px circle at 100% 0%, rgba(239, 152, 32, 0.08), transparent 60%), var(--wp--preset--color--white); }
/* Straight after the featured paper (the popular section hides below 4 papers): one gap, not two paddings stacked. */
.as-inslatest + .as-insgrid { padding-block-start: 0; }
.as-papers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.as-paper { display: flex; }
.as-paper[hidden] { display: none; }
.as-paper__link { display: flex; flex: 1; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.2); box-shadow: 0 24px 50px -36px rgba(19, 26, 26, 0.4); color: var(--wp--preset--color--body); text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.as-paper__link:is(:hover, :focus-visible) { transform: translateY(-4px); border-color: rgba(237, 135, 35, 0.45); box-shadow: 0 34px 60px -34px rgba(223, 34, 41, 0.45); }
.as-paper__body { display: flex; flex: 1; flex-direction: column; gap: 0.6rem; padding: 1.25rem 1.4rem 1.4rem; }
.as-paper__seg { align-self: flex-start; padding: 0.25rem 0.7rem; border-radius: 999px; background: #FFF4E5; color: #9A4A0B; font-size: 0.75rem; font-weight: 700; }
.as-paper__title { margin: 0; font-size: 1.25rem; line-height: 1.25; color: var(--wp--preset--color--title); }
.as-paper__text { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.6; }
.as-paper__meta { display: flex; align-items: center; gap: 0.65rem; margin: auto 0 0; padding-block-start: 0.85rem; border-block-start: 1px solid var(--wp--preset--color--line); font-size: 0.8125rem; }
.as-paper__meta strong { display: block; color: var(--wp--preset--color--title); }
.as-paper__meta .as-avatar { inline-size: 36px; block-size: 36px; font-size: 0.75rem; }

/* Further reading with one paper: one wide card, cover on the left. */
.as-papers--one { grid-template-columns: minmax(0, 1fr); }
.as-papers--one .as-paper__link { flex-direction: row; }
.as-papers--one .as-cover--sm { flex: 0 0 38%; aspect-ratio: auto; min-block-size: 220px; border-radius: 22px 0 0 22px; }
.as-papers--one .as-paper__body { justify-content: center; padding: 1.75rem 2rem; }
.as-papers--one .as-paper__title { font-size: 1.5rem; }

/* How we write these papers: four principles on a warm band. */
.as-insprinciples { background: radial-gradient(600px circle at 0% 0%, rgba(239, 152, 32, 0.14), transparent 60%), radial-gradient(500px circle at 100% 100%, rgba(223, 34, 41, 0.07), transparent 60%), var(--wp--preset--color--cream); }
.as-insprinciples__head { max-inline-size: 44rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.as-insprinciples__head h2 { margin: 0.4rem 0 0; }
.as-insprinciples__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.as-insprinciples__grid li { padding: clamp(1.25rem, 2.5vw, 1.75rem); border-radius: 24px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.2); box-shadow: 0 24px 50px -36px rgba(19, 26, 26, 0.4); }
.as-insprinciples__icon { display: grid; place-items: center; inline-size: 48px; block-size: 48px; margin-block-end: 1rem; border-radius: 15px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); box-shadow: 0 14px 28px -12px rgba(239, 152, 32, 0.6); }
.as-insprinciples__grid h3 { margin: 0 0 0.4rem; font-size: 1.125rem; }
.as-insprinciples__grid p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--wp--preset--color--body); }

/* Paper hero: text left, cover right. */
.as-paperhero { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
.as-paperhero__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.as-paperhero .as-crumbs { margin-block-end: 1.25rem; }
.as-paperhero__label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0 0 1rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.as-paperhero__label span { padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); }
.as-paperhero__title { margin: 0 0 1.25rem; font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--wp--preset--color--white); }
.as-paperhero__lead { max-inline-size: 40rem; margin: 0 0 1.75rem; font-size: 1.1875rem; line-height: 1.6; }
.as-paperhero__by { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-block-end: 1.75rem; font-size: 0.9375rem; }
.as-paperhero__by strong { display: block; color: var(--wp--preset--color--white); }
.as-paperhero__by .as-avatar { inline-size: 48px; block-size: 48px; }
.as-paperhero__when { padding-inline-start: 1rem; border-inline-start: 1px solid rgba(255, 255, 255, 0.2); }
.as-paperhero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.as-paperhero__share, .as-cite__share { display: inline-flex; align-items: center; gap: 0.5rem; }
.as-paperhero__share a { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--wp--preset--color--white); transition: background 0.2s ease; }
.as-paperhero__share a:hover { background: rgba(255, 255, 255, 0.18); }
.as-paperhero__cover { justify-self: center; inline-size: min(100%, 360px); }

/* Reading progress: a thin gradient bar fixed under the header. */
.as-progress { position: fixed; inset-block-start: var(--as-header-h); inset-inline: 0; z-index: 40; block-size: 3px; pointer-events: none; }
.admin-bar .as-progress { inset-block-start: calc(var(--as-header-h) + 32px); }
.as-progress__bar { display: block; block-size: 100%; background: var(--wp--preset--gradient--brand); transform: scaleX(0); transform-origin: 0 50%; }

/* In brief: numbered takeaways in a gradient-bordered box at the top of the text. */
.as-brief { margin-block-end: 2.5rem; padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem); border: 1px solid transparent; border-radius: 24px; background: radial-gradient(360px circle at 100% 0%, rgba(239, 152, 32, 0.16), transparent 60%) padding-box, linear-gradient(var(--wp--preset--color--cream), var(--wp--preset--color--cream)) padding-box, linear-gradient(135deg, rgba(239, 152, 32, 0.75), rgba(223, 34, 41, 0.35)) border-box; }
.as-brief__title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--orange-red); }
.as-brief__list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; counter-reset: brief; }
.as-brief__list li { position: relative; padding-inline-start: 2.5rem; font-size: 1.0625rem; font-weight: 600; line-height: 1.5; color: var(--wp--preset--color--title); counter-increment: brief; }
.as-brief__list li::before { content: counter(brief); position: absolute; inset-inline-start: 0; inset-block-start: -0.05rem; display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); font-size: 0.8125rem; font-weight: 800; }

/* Contents: the paper's own section numbers (the summary and sources get a dot) instead of the blog's running count. */
.as-papertoc a { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.35rem; }
.as-papertoc a::before { content: none; }
.as-papertoc__num { font-size: 0.75rem; font-weight: 800; padding-block-start: 0.1rem; color: var(--wp--preset--color--orange-red); }

/* Paper text: numbered sections, leads, notes. */
.as-paperbody { counter-reset: section; }
.as-paperbody > h2 { position: relative; margin-block-start: 3.5rem; padding-block-start: 1.75rem; border-block-start: 1px solid var(--wp--preset--color--line); }
.as-paperbody > h2:first-of-type, .as-paperbody > .as-papernote + h2 { margin-block-start: 0; padding-block-start: 0; border: 0; }
.as-paperbody > h2:not(.is-unnumbered) { counter-increment: section; }
.as-paperbody > h2:not(.is-unnumbered)::before { content: "Section " counter(section, decimal-leading-zero); display: block; margin-block-end: 0.5rem; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--orange-red); }
.as-paperbody > h2.is-unnumbered::before { content: ""; display: block; inline-size: 48px; block-size: 4px; margin-block-end: 0.85rem; border-radius: 4px; background: var(--wp--preset--gradient--brand); }
.as-paperbody .as-paperlead { font-size: 1.25rem; line-height: 1.55; font-weight: 600; color: var(--wp--preset--color--title); }
.as-paperbody .as-papernote { padding: 0.85rem 1.1rem; border-inline-start: 3px solid var(--wp--preset--color--orange); border-radius: 0 12px 12px 0; background: #FFF8EF; font-size: 0.9375rem; font-style: italic; color: var(--wp--preset--color--muted); }

/* Stat row: big gradient figures with what they mean. */
.as-paperstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-block: 2rem !important; }
.as-paperstats > * { margin: 0; }
.as-paperstat { padding: 1.25rem 1.25rem 1.1rem; border-radius: 20px; background: var(--wp--preset--color--ink); box-shadow: 0 24px 48px -32px rgba(19, 26, 26, 0.7); }
.as-paperstat > * { margin: 0; }
.as-paperstat__num { font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; background: linear-gradient(120deg, #FFC27A, #EF9820 45%, #F25C3B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.as-paperstat__label { margin-block-start: 0.6rem !important; font-size: 0.875rem; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }

/* Pull quote: large, with a gradient quote mark. */
.as-prose .as-paperquote { position: relative; margin-block: 2.25rem !important; padding: 0.5rem 0 0 3.75rem; border: 0; border-radius: 0; background: none; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; color: var(--wp--preset--color--title); }
.as-prose .as-paperquote::before { content: "\201C"; position: absolute; inset-inline-start: 0; inset-block-start: -0.6rem; font-size: 5rem; font-weight: 800; line-height: 1; background: var(--wp--preset--gradient--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.as-prose .as-paperquote p { margin: 0 0 0.75rem; }
.as-prose .as-paperquote cite { display: block; font-size: 0.875rem; font-style: normal; font-weight: 600; color: var(--wp--preset--color--muted); }
.as-prose .as-paperquote cite::before { content: "— "; }

/* Take this back to your network: warm box; the "in practice" example is dark. */
.as-practice { margin-block: 2rem !important; padding: 1.25rem 1.5rem; border-radius: 20px; background: var(--wp--preset--color--cream); border: 1px solid rgba(237, 135, 35, 0.3); }
.as-practice > * { margin: 0 0 0.6rem; }
.as-practice > :last-child { margin-block-end: 0; }
.as-practice .as-practice__label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--orange-red); }
.as-practice .as-practice__label::before { content: "\2192"; display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); font-size: 0.8125rem; letter-spacing: 0; }
.as-practice--example { background: radial-gradient(420px circle at 100% 0%, rgba(239, 152, 32, 0.3), transparent 60%), var(--wp--preset--color--ink); border-color: transparent; color: rgba(255, 255, 255, 0.82); }
.as-practice--example .as-practice__label { color: var(--wp--preset--color--orange); }

/* Figures: chart images with caption; until a chart image is added, a framed caption with a link to the PDF page. */
.as-prose .as-paperfig { margin-block: 2rem !important; }
.as-prose .as-paperfig img { border: 1px solid var(--wp--preset--color--line); }
.as-prose .as-paperfig figcaption { font-size: 0.875rem; line-height: 1.5; }
.as-paperfig--pdf { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.25rem 1rem; padding: 1rem 1.25rem; border: 1px dashed rgba(237, 135, 35, 0.6); border-radius: 18px; background: repeating-linear-gradient(135deg, rgba(239, 152, 32, 0.05) 0 12px, transparent 12px 24px), var(--wp--preset--color--white); }
.as-paperfig--pdf::before { content: ""; grid-row: 1 / span 2; inline-size: 44px; block-size: 44px; border-radius: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 15v3M12 10v8M17 6v12'/%3E%3C/svg%3E") center / 55% no-repeat, var(--wp--preset--gradient--brand); }
.as-paperfig--pdf > * { margin: 0 !important; }
.as-paperfig__caption { font-size: 0.9375rem; line-height: 1.5; color: var(--wp--preset--color--body); }
.as-paperfig__link { font-size: 0.875rem; font-weight: 700; }

/* Tables in papers: header row tinted. */
.as-prose .as-papertable { margin-block: 2rem !important; }
.as-prose .as-papertable thead th { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); }
/* Papers' tables have a real header row, so the first body row is an ordinary row (unlike blog tables). */
.as-prose .as-papertable tbody tr:first-child td { background: none; color: inherit; font-weight: inherit; }
.as-prose .as-papertable tbody td:first-child { font-weight: 700; color: var(--wp--preset--color--title); }

/* Demo card inside the text: dark, button on the right. */
.as-papercta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-block: 2.5rem !important; padding: 1.25rem 1.5rem; border-radius: 20px; background: radial-gradient(420px circle at 100% 0%, rgba(239, 152, 32, 0.35), transparent 60%), var(--wp--preset--color--ink); color: rgba(255, 255, 255, 0.8); }
.as-papercta > * { margin: 0 !important; }
.as-papercta .as-papercta__text { flex: 1 1 22rem; font-size: 1rem; line-height: 1.55; }
.as-papercta .as-papercta__text strong { color: var(--wp--preset--color--white); }
.as-prose .as-papercta .wp-block-button__link { padding: 0.75rem 1.5rem; border-radius: 999px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); font-weight: 700; text-decoration: none; }

/* Cite this paper. */
.as-cite { margin-block-start: 3rem; padding-block-start: 2rem; border-block-start: 1px solid var(--wp--preset--color--line); }
.as-cite__box { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 1rem; padding: 1.1rem 1.25rem; border-radius: 18px; background: var(--wp--preset--color--cream); }
.as-cite__title { grid-column: 1; margin: 0; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--orange-red); }
.as-cite__text { grid-column: 1; margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--wp--preset--color--title); overflow-wrap: anywhere; }
.as-cite__copy { grid-column: 2; grid-row: 1 / span 2; padding: 0.55rem 1.1rem; border: 1px solid rgba(19, 26, 26, 0.15); border-radius: 999px; background: var(--wp--preset--color--white); font: inherit; font-size: 0.875rem; font-weight: 700; color: var(--wp--preset--color--ink); cursor: pointer; }
.as-cite__copy:hover { border-color: var(--wp--preset--color--orange); }
.as-cite__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-block-start: 1.25rem; }
.as-cite__share > span { font-size: 0.875rem; font-weight: 700; color: var(--wp--preset--color--muted); }
.as-cite__share a { display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 50%; border: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--ink); }
.as-cite__share a:hover { border-color: var(--wp--preset--color--orange); color: var(--wp--preset--color--orange-red); }

/* More insights: related page links under the cards. */
.as-insmorepapers__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 1.5rem 0 0; }
.as-insmorepapers__links > span { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.as-insmorepapers__links a { padding: 0.45rem 0.95rem; border-radius: 999px; background: #FFF4E5; color: #9A4A0B; font-size: 0.875rem; font-weight: 700; text-decoration: none; }
.as-insmorepapers__links a:hover { background: var(--wp--preset--color--orange-red); color: var(--wp--preset--color--white); }

@media (max-width: 1024px) {
	.as-papers, .as-insprinciples__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-paperhero__inner, .as-inslatest__card { grid-template-columns: minmax(0, 1fr); }
	.as-paperhero__cover { inline-size: min(100%, 300px); }
	.as-inslatest__cover { max-inline-size: 360px; }
	.as-abwork__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
	.as-papers, .as-insprinciples__grid { grid-template-columns: minmax(0, 1fr); }
	.as-papers--one .as-paper__link { flex-direction: column; }
	.as-papers--one .as-cover--sm { flex: none; aspect-ratio: 16 / 10; min-block-size: 0; border-radius: 22px 22px 0 0; }
	.as-paperhero__when { padding-inline-start: 0; border: 0; }
	.as-prose .as-paperquote { padding-inline-start: 2.75rem; }
	.as-prose .as-paperquote::before { font-size: 4rem; }
	.as-cite__box { grid-template-columns: minmax(0, 1fr); }
	.as-cite__copy { grid-column: 1; grid-row: auto; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
	.as-paper__link:is(:hover, :focus-visible), .as-inslatest__cover:hover { transform: none; }
}

/* ---------- Legal pages (templates/page-legal.html) ----------
 * Section: Privacy Policy and Terms: title band, sticky contents list, readable text column.
 * SEO: Post title is the only H1, numbered H2s carry anchor ids for the contents links; pages stay indexed.
 */

.as-legal__hero {
	background:
		radial-gradient(60% 120% at 100% 0%, rgba(237, 135, 35, 0.16), transparent 60%),
		var(--wp--preset--color--cream);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.as-legal__title {
	margin-block: 0;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
}

.as-legal__wrap { padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70); }

/* Contents list on the left (sticky on desktop), text on the right. */
.as-legal__body {
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr);
	column-gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.as-legal__body > * {
	grid-column: 2;
	max-inline-size: 46rem;
	margin-block: 0 1rem;
}

.as-legal__meta {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	padding-block-end: 1.5rem;
	margin-block-end: 2rem !important;
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.as-legal__body > h2 {
	font-size: var(--wp--preset--font-size--large);
	margin-block: 2.5rem 1rem;
	scroll-margin-block-start: calc(var(--as-header-h) + 1.5rem);
}

.as-legal__body > h3 {
	font-size: var(--wp--preset--font-size--medium);
	margin-block: 1.75rem 0.75rem;
}

.as-legal__body ul,
.as-legal__body ol:not(.as-legal__toc ol) { padding-inline-start: 1.25rem; }

.as-legal__body li { margin-block-end: 0.5rem; }

.as-legal__body li::marker { color: var(--wp--preset--color--orange-red); }

/* Data tables (the sub-processors list): keep the columns readable on a phone and let the
   table scroll inside its frame, instead of squeezing cells down to one word per line. */
.as-legal__body .wp-block-table table { min-width: 34rem; }

.as-legal__body > .as-legal__toc {
	grid-column: 1;
	grid-row: 1 / span 400;
	position: sticky;
	inset-block-start: calc(var(--as-header-h) + 1.5rem);
	max-block-size: calc(100vh - var(--as-header-h) - 3rem);
	overflow-y: auto;
	padding: 1.25rem;
	border-radius: 16px;
	background: var(--wp--preset--color--cream);
	font-size: var(--wp--preset--font-size--small);
}

.as-legal__toc-title {
	margin: 0 0 0.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--title);
}

.as-legal__toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.as-legal__toc li { margin: 0; }

.as-legal__toc a {
	display: block;
	padding-block: 0.35rem;
	color: var(--wp--preset--color--body);
	text-decoration: none;
}

.as-legal__toc a:hover { color: var(--wp--preset--color--orange-red); }

@media (max-width: 900px) {
	.as-legal__body { grid-template-columns: minmax(0, 1fr); }
	.as-legal__body > *,
	.as-legal__body > .as-legal__toc { grid-column: 1; }
	.as-legal__body > .as-legal__toc {
		grid-row: auto;
		position: static;
		max-block-size: none;
		margin-block-end: 2rem;
	}
}

/* ---------- Accessibility ---------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:where(a, button, summary, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--orange-red);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition: none !important; }
}

/* ---------- Checklists library (hub: page-library.html, topic pages: taxonomy-checklist_topic.html, patterns lib-hub-*.php;
 * checklist: single-libraries.html, patterns lib-page-*.php; check rows and product card: inc/checklists.php) ----------
 * Section: Free audit checklists: dark hero with a floating checklist card, live "Most popular" band, filter panel beside a
 * scrolling grid, dark product band; checklist pages with a warm hero, sticky "At a glance", numbered check rows, PDF band.
 * SEO: One H1 per page; every checklist card is real HTML with one link; filters only hide cards; topic links are real links.
 */

/* Hub hero: ink with warm glows and grid texture (same background as the Industry Insights hero), text left, card right. */
.as-libhero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
	background:
		radial-gradient(50% 70% at 82% 30%, rgba(239, 152, 32, 0.34), transparent 70%),
		radial-gradient(45% 60% at 0% 100%, rgba(223, 34, 41, 0.26), transparent 70%),
		var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.78);
}
.as-libhero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: radial-gradient(75% 85% at 60% 40%, #000 30%, transparent 100%); mask-image: radial-gradient(75% 85% at 60% 40%, #000 30%, transparent 100%); }
.as-libhero .as-crumbs a, .as-libhero .as-crumbs li, .as-libhero .as-crumbs span { color: rgba(255, 255, 255, 0.65); }
.as-libhero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.as-libhero__title { margin: 0.25rem 0 1.25rem; font-size: clamp(2.375rem, 1.5rem + 3.2vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; color: var(--wp--preset--color--white); }
.as-libhero__lead { max-inline-size: 36rem; margin: 0 0 1.75rem; font-size: 1.1875rem; line-height: 1.6; }
.as-libhero__facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.as-libhero__facts li::before { content: ""; display: inline-block; inline-size: 6px; block-size: 6px; margin-inline-end: 0.55rem; border-radius: 50%; background: var(--wp--preset--color--orange); vertical-align: middle; }
.as-libhero__facts strong { color: var(--wp--preset--color--white); }

/* Search: pill field with the button inside (hero and panel). */
.as-libsearch { display: flex; align-items: center; gap: 0.6rem; max-inline-size: 34rem; padding: 0.4rem 0.4rem 0.4rem 1.1rem; border-radius: 999px; background: var(--wp--preset--color--white); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.6); color: var(--wp--preset--color--muted); }
.as-libsearch input { flex: 1; min-inline-size: 0; border: 0; background: none; font: inherit; font-size: 1rem; color: var(--wp--preset--color--title); outline: none; }
.as-libsearch .as-btn { padding: 0.7rem 1.4rem; }

/* Floating coded checklist card (hub and checklist hero): white card, ticks, a score ring; decorative. */
.as-libhero__visual { position: relative; justify-self: center; inline-size: min(100%, 440px); padding-block: 2rem; }
.as-libmock { position: relative; padding: 1.4rem; border-radius: 24px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--body); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1); }
.as-libmock--light { transform: none; box-shadow: 0 30px 60px -30px rgba(19, 26, 26, 0.35), 0 0 0 1px rgba(19, 26, 26, 0.06); }
.as-libmock__head { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1rem; padding-block-end: 0.9rem; border-block-end: 1px solid var(--wp--preset--color--line); font-size: 0.8125rem; line-height: 1.35; color: var(--wp--preset--color--muted); }
.as-libmock__head strong { display: block; font-size: 0.9375rem; color: var(--wp--preset--color--title); }
.as-libmock__icon { display: grid; place-items: center; flex: none; inline-size: 40px; block-size: 40px; border-radius: 12px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); }
.as-libmock__list { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--wp--preset--color--title); }
.as-libmock__list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 12px; background: var(--wp--preset--color--cream); }
.as-libmock__list li svg { margin-inline-start: auto; flex: none; color: var(--wp--preset--color--orange-red); }
.as-libmock__box { position: relative; flex: none; inline-size: 18px; block-size: 18px; border-radius: 6px; border: 2px solid rgba(19, 26, 26, 0.25); background: var(--wp--preset--color--white); }
.as-libmock__list .is-pass .as-libmock__box { border-color: transparent; background: #1f9d6b; }
.as-libmock__list .is-fail .as-libmock__box { border-color: transparent; background: var(--wp--preset--color--red); }
.as-libmock__list .is-pass .as-libmock__box::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 5px; inline-size: 5px; block-size: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.as-libmock__list .is-fail .as-libmock__box::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; color: #fff; }
.as-libmock__foot { display: flex; align-items: center; gap: 0.85rem; margin: 1rem 0 0; font-size: 0.8125rem; color: var(--wp--preset--color--muted); }
.as-libmock__foot strong { display: block; color: var(--wp--preset--color--title); }
.as-libmock__ring { display: grid; place-items: center; flex: none; inline-size: 52px; block-size: 52px; border-radius: 50%; background: conic-gradient(var(--wp--preset--color--orange) 0 80%, var(--wp--preset--color--line) 80% 100%); }
.as-libmock__ring span { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--wp--preset--color--white); font-size: 0.8125rem; font-weight: 800; color: var(--wp--preset--color--title); }
.as-libmock__chip { position: absolute; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 0.8125rem; font-weight: 600; color: var(--wp--preset--color--white); }
.as-libmock__chip svg { color: var(--wp--preset--color--orange); }
.as-libmock__chip--a { inset-block-start: 0; inset-inline-end: -0.5rem; }
.as-libmock__chip--b { inset-block-end: 0.25rem; inset-inline-start: -1.25rem; }

/* Most popular: dark band with glows; three ranked cards with a big gradient number. */
.as-libpop { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--wp--preset--spacing--60); background: radial-gradient(40% 70% at 100% 0%, rgba(239, 152, 32, 0.22), transparent 70%), #0d1313; color: rgba(255, 255, 255, 0.75); }
.as-libpop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%); }
.as-libpop .as-head h2 { color: var(--wp--preset--color--white); }
.as-libpop__badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.9rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.8125rem; font-weight: 600; color: rgba(255, 255, 255, 0.8); }
.as-libpop__badge.is-live { color: var(--wp--preset--color--white); }
.as-libpop__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: #2fd38a; box-shadow: 0 0 0 4px rgba(47, 211, 138, 0.2); animation: as-livepulse 2s ease-in-out infinite; }
@keyframes as-livepulse { 50% { box-shadow: 0 0 0 7px rgba(47, 211, 138, 0); } }
.as-libpop__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.as-libpop__card { position: relative; display: flex; flex-direction: column; gap: 0.6rem; block-size: 100%; box-sizing: border-box; padding: 1.6rem; border-radius: var(--as-radius-card); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: inherit; text-decoration: none; transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; }
.as-libpop__card:hover { transform: translateY(-4px); border-color: rgba(239, 152, 32, 0.55); background: rgba(255, 255, 255, 0.08); }
.as-libpop__rank { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; background: var(--wp--preset--gradient--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.as-libpop__topic { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--orange); }
.as-libpop__title { margin: 0; font-size: 1.25rem; line-height: 1.25; color: var(--wp--preset--color--white); }
.as-libpop__text { flex: none; max-block-size: 4.65em; font-size: 0.9375rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.as-libpop__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin-block-start: auto; padding-block-start: 1rem; border-block-start: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.8125rem; }
.as-libpop__go { font-weight: 700; color: var(--wp--preset--color--white); }
.as-libpop__note { margin: 1.25rem 0 0; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); }

/* All checklists: filter panel left, grid right in a fixed-height area that scrolls on its own. */
.as-lib__layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.as-lib__panel { position: sticky; inset-block-start: calc(var(--as-header-h) + 1.25rem); padding: 1.1rem; border-radius: 20px; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); box-shadow: 0 2px 24px -12px rgba(19, 26, 26, 0.18); }
.as-lib__panelhead { display: none; }
.as-lib__search { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; padding: 0.6rem 0.85rem; border-radius: 12px; background: var(--wp--preset--color--cream); color: var(--wp--preset--color--muted); }
.as-lib__search input { flex: 1; min-inline-size: 0; border: 0; background: none; font: inherit; font-size: 0.9375rem; color: var(--wp--preset--color--title); outline: none; }
.as-lib__label { margin: 0.25rem 0.5rem 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.as-lib__topics, .as-lib__markets, .as-lib__inds { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.as-lib__topics a, .as-lib__markets button, .as-lib__inds button { box-sizing: border-box; display: flex; align-items: center; gap: 0.6rem; inline-size: 100%; padding: 0.55rem 0.65rem; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 0.9375rem; text-align: start; color: var(--wp--preset--color--title); text-decoration: none; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.as-lib__topics a svg { flex: none; color: var(--wp--preset--color--muted); }
.as-lib__topics a span, .as-lib__markets button, .as-lib__inds button { flex: 1; }
.as-lib__topics em, .as-lib__markets em, .as-lib__inds em { margin-inline-start: auto; font-style: normal; font-size: 0.8125rem; color: var(--wp--preset--color--muted); }
.as-lib__topics a:hover, .as-lib__markets button:hover, .as-lib__inds button:hover { background: var(--wp--preset--color--cream); }
.as-lib__topics a[aria-current="true"] { background: rgba(237, 135, 35, 0.12); color: var(--wp--preset--color--orange-red); font-weight: 700; }
.as-lib__topics a[aria-current="true"] svg, .as-lib__topics a[aria-current="true"] em { color: var(--wp--preset--color--orange-red); }
.as-lib__markets { margin: 0.25rem 0 0.4rem 1.6rem; padding-inline-start: 0.6rem; border-inline-start: 2px solid var(--wp--preset--color--line); }
.as-lib__markets button { padding-block: 0.4rem; font-size: 0.875rem; }
.as-lib__markets[hidden] { display: none; }
.as-lib__markets button[aria-pressed="true"], .as-lib__inds button[aria-pressed="true"] { color: var(--wp--preset--color--orange-red); font-weight: 700; }
.as-lib__inds { margin-block-start: 0.25rem; }
.as-lib__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.85rem; }
.as-lib__count { margin: 0; font-size: 0.9375rem; color: var(--wp--preset--color--muted); }
.as-lib__count strong { color: var(--wp--preset--color--title); }
.as-lib__sort { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--wp--preset--color--muted); }
.as-lib__sort select { padding: 0.45rem 2rem 0.45rem 0.8rem; border: 1px solid var(--wp--preset--color--line); border-radius: 10px; background: var(--wp--preset--color--white); font: inherit; color: var(--wp--preset--color--title); }
.as-lib__filterbtn { display: none; }
.as-lib__scroll { position: relative; block-size: 720px; overflow-y: auto; overscroll-behavior: contain; padding: 0.35rem 0.6rem 2.5rem 0.35rem; margin: -0.35rem -0.6rem 0 -0.35rem; scrollbar-width: thin; scrollbar-color: rgba(19, 26, 26, 0.25) transparent; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent); }
.as-lib__scroll:focus-visible { outline: 2px solid var(--wp--preset--color--orange); outline-offset: 4px; border-radius: 12px; }
.as-lib__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.as-lib__empty { margin: 1rem 0; padding: 1.5rem; border-radius: 16px; background: var(--wp--preset--color--cream); text-align: center; }
.as-lib__more { display: block; margin: 1.25rem auto 0; }
.as-lib__more[hidden] { display: none; }

/* Checklist card: topic, title, one line, meta; lifts with a warm edge on hover. */
.as-chk[hidden] { display: none; }
.as-chk__link { display: flex; flex-direction: column; gap: 0.5rem; block-size: 100%; box-sizing: border-box; padding: 1.15rem 1.2rem 1.1rem; border-radius: 18px; background: var(--wp--preset--color--white); border: 1px solid rgba(19, 26, 26, 0.1); box-shadow: 0 1px 2px rgba(19, 26, 26, 0.04), 0 10px 24px -16px rgba(19, 26, 26, 0.35); color: inherit; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
/* Same lift as the guidebook and paper cards (user, 2026-10-15). */
.as-chk__link { transition-duration: 0.3s; }
.as-chk__link:is(:hover, :focus-visible) { transform: translateY(-4px); border-color: rgba(237, 135, 35, 0.5); box-shadow: 0 34px 60px -34px rgba(223, 34, 41, 0.45); }
.as-chk__topic { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--orange-red); }
.as-chk__title { margin: 0; font-size: 1.0625rem; line-height: 1.3; color: var(--wp--preset--color--title); }
.as-chk__text { flex: none; max-block-size: 3em; font-size: 0.875rem; line-height: 1.5; color: var(--wp--preset--color--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.as-chk__meta { display: inline-flex; align-items: center; gap: 0.4rem; margin-block-start: auto; padding-block-start: 0.6rem; font-size: 0.8125rem; font-weight: 600; color: var(--wp--preset--color--title); }
.as-chk__meta svg { color: var(--wp--preset--color--orange-red); }

/* Request card under the library. */
.as-lib__request { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-block-start: 2rem; padding: 1.25rem 1.5rem; border-radius: 20px; background: var(--wp--preset--color--cream); border: 1px dashed rgba(237, 135, 35, 0.45); }
.as-lib__request p { margin: 0; color: var(--wp--preset--color--body); }
.as-lib__request strong { color: var(--wp--preset--color--title); }

/* Run any checklist in AutoSmart: dark band, three steps with small coded UI cards. */
.as-librun { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--wp--preset--spacing--70); background: radial-gradient(45% 70% at 0% 0%, rgba(223, 34, 41, 0.25), transparent 70%), radial-gradient(40% 60% at 100% 100%, rgba(239, 152, 32, 0.25), transparent 70%), var(--wp--preset--color--ink); color: rgba(255, 255, 255, 0.75); }
.as-librun::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 80% at 50% 50%, #000 30%, transparent 100%); }
.as-librun .as-head h2 { color: var(--wp--preset--color--white); }
.as-librun__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.as-librun__step { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; border-radius: var(--as-radius-card); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.as-librun__num { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; background: var(--wp--preset--gradient--brand); font-weight: 800; color: var(--wp--preset--color--white); }
.as-librun__step h3 { margin: 0.25rem 0 0; font-size: 1.1875rem; color: var(--wp--preset--color--white); }
.as-librun__step p { margin: 0; font-size: 0.9375rem; line-height: 1.55; }
.as-librun__ui { margin-block-start: auto; padding-block-start: 1rem; }
.as-librun__pick, .as-librun__edit, .as-librun__phone { display: grid; gap: 0.45rem; margin: 0; padding: 0.9rem; border-radius: 16px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--title); font-size: 0.8125rem; list-style: none; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.7); }
.as-librun__pick li { padding: 0.5rem 0.7rem; border-radius: 10px; background: var(--wp--preset--color--cream); }
.as-librun__pick li.is-on { background: rgba(237, 135, 35, 0.14); font-weight: 700; color: var(--wp--preset--color--orange-red); }
.as-librun__edit > span:first-child { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.as-librun__row { display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 0.6rem; border-radius: 10px; background: var(--wp--preset--color--cream); }
.as-librun__row em { font-style: normal; color: var(--wp--preset--color--muted); }
.as-librun__row i { inline-size: 30px; block-size: 18px; border-radius: 999px; background: var(--wp--preset--color--line); position: relative; }
.as-librun__row i.is-on { background: var(--wp--preset--gradient--brand); }
.as-librun__row i.is-on::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-end: 2px; inline-size: 14px; block-size: 14px; border-radius: 50%; background: #fff; }
.as-librun__phone span { padding: 0.5rem 0.7rem; border-radius: 10px; font-weight: 600; }
.as-librun__ok { background: rgba(31, 157, 107, 0.12); color: #127552; }
.as-librun__no { background: rgba(223, 34, 41, 0.1); color: var(--wp--preset--color--red); }
.as-librun__sync { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--muted); font-weight: 500 !important; }
.as-librun__cta { margin: 2rem 0 0; text-align: center; }

/* Checklist page hero: warm, light, grid texture fading from the preview card. */
.as-chkhero { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); background: linear-gradient(180deg, var(--wp--preset--color--cream), var(--wp--preset--color--white)); }
.as-chkhero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 60% at 80% 45%, rgba(239, 152, 32, 0.28), rgba(223, 34, 41, 0.08) 45%, transparent 75%), linear-gradient(rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: radial-gradient(70% 90% at 75% 50%, #000 35%, transparent 100%); mask-image: radial-gradient(70% 90% at 75% 50%, #000 35%, transparent 100%); }
.as-chkhero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.as-chkhero__label { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0.5rem 0 0.75rem; padding: 0.4rem 0.9rem; border-radius: 999px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.35); box-shadow: var(--as-glow); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--orange-red); }
.as-chkhero__title { margin: 0 0 1rem; font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.375rem); line-height: 1.06; letter-spacing: -0.025em; color: var(--wp--preset--color--ink); }
.as-chkhero__lead { max-inline-size: 38rem; margin: 0 0 1.25rem; font-size: 1.125rem; line-height: 1.6; color: var(--wp--preset--color--muted); }
.as-chkhero__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0 0 1.75rem; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--wp--preset--color--muted); }
.as-chkhero__meta li::before { content: ""; display: inline-block; inline-size: 6px; block-size: 6px; margin-inline-end: 0.5rem; border-radius: 50%; background: var(--wp--preset--color--orange); vertical-align: middle; }
.as-chkhero__meta strong { color: var(--wp--preset--color--title); }
.as-chkhero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.as-chkhero__visual { justify-self: center; inline-size: min(100%, 420px); }

/* Checklist body: sticky "At a glance" left, the checks and text right. */
.as-chkpage__wrap { padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40); }
.as-chkpage__grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: start; }
.as-chkpage__main { max-inline-size: 760px; }
.as-glance { position: sticky; inset-block-start: calc(var(--as-header-h) + 1.5rem); overflow: hidden; isolation: isolate; padding: 1.5rem; border-radius: var(--as-radius-card); background: radial-gradient(70% 50% at 100% 0%, rgba(239, 152, 32, 0.35), transparent 70%), var(--wp--preset--color--ink); color: rgba(255, 255, 255, 0.78); }
.as-glance::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px; -webkit-mask-image: linear-gradient(160deg, #000, transparent 70%); mask-image: linear-gradient(160deg, #000, transparent 70%); }
.admin-bar .as-glance { inset-block-start: calc(var(--as-header-h) + 32px + 1.5rem); }
.as-glance__title { margin: 0 0 1rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--orange); }
.as-glance__list { display: grid; gap: 0.85rem; margin: 0 0 1.35rem; }
.as-glance__list div { padding-block-end: 0.85rem; border-block-end: 1px solid rgba(255, 255, 255, 0.1); }
.as-glance__list dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.as-glance__list dd { margin: 0.2rem 0 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.45; color: var(--wp--preset--color--white); }
.as-glance__list a { color: var(--wp--preset--color--white); text-decoration: underline; text-decoration-color: rgba(239, 152, 32, 0.7); text-underline-offset: 3px; }
.as-glance__src { display: inline-block; margin-block-start: 0.2rem; font-size: 0.8125rem; font-weight: 500; }
.as-glance__btn { inline-size: 100%; box-sizing: border-box; }

/* AutoSmart tip from the checklist's PDF: a warm callout under the introduction. */
.as-chkbody .as-chktip { padding: 1rem 1.25rem; border-radius: 16px; border-inline-start: 4px solid var(--wp--preset--color--orange); background: var(--wp--preset--color--cream); font-size: 1rem; color: var(--wp--preset--color--title); }

/* The checks: numbered sections, each check a row with a tick box, the check, what good looks like and a photo marker. */
.as-chkbody .as-checks { counter-reset: as-checksec; display: grid; gap: 1.25rem; margin-block: 1.25rem 2rem; }
.as-chkbody .as-checksec { counter-increment: as-checksec; padding: 1.25rem 1.25rem 0.75rem; border-radius: 20px; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); box-shadow: 0 2px 20px -12px rgba(19, 26, 26, 0.15); }
.as-chkbody .as-checksec h3 { display: flex; align-items: center; gap: 0.75rem; margin: 0; font-size: 1.125rem; }
.as-chkbody .as-checksec h3::before { content: counter(as-checksec, decimal-leading-zero); display: grid; place-items: center; flex: none; inline-size: 36px; block-size: 36px; border-radius: 12px; background: var(--wp--preset--gradient--brand); font-size: 0.875rem; font-weight: 800; color: var(--wp--preset--color--white); }
.as-chkbody .as-checksec ul { margin: 0; padding: 0; list-style: none; }
.as-check { display: flex; align-items: flex-start; gap: 0.85rem; margin: 0 !important; padding: 0.8rem 0.25rem; border-block-start: 1px solid var(--wp--preset--color--line); line-height: 1.5; }
.as-check:first-child { border-block-start: 0; }
.as-check__no { flex: none; inline-size: 2rem; padding-block-start: 0.1rem; font-size: 0.8125rem; font-weight: 800; color: var(--wp--preset--color--orange-red); font-variant-numeric: tabular-nums; }
.as-check__body { display: grid; gap: 0.2rem; flex: 1; }
.as-check__text { font-weight: 600; color: var(--wp--preset--color--title); }
.as-check__good { font-size: 0.9375rem; color: var(--wp--preset--color--muted); }
.as-check__good::before { content: "✓ "; font-weight: 700; color: #1f9d6b; }
.as-check__photo { display: grid; place-items: center; flex: none; inline-size: 30px; block-size: 30px; border-radius: 10px; background: rgba(237, 135, 35, 0.12); color: var(--wp--preset--color--orange-red); }
.as-chkbody ol li::marker { color: var(--wp--preset--color--orange-red); }

/* "Run this checklist in AutoSmart": dark card after the checks, a coded phone screen and the product's points. */
.as-runcard { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1.75rem; align-items: center; margin-block: 0 2.5rem; padding: 1.75rem; overflow: hidden; isolation: isolate; position: relative; border-radius: var(--as-radius-card); background: radial-gradient(60% 80% at 0% 100%, rgba(223, 34, 41, 0.3), transparent 70%), radial-gradient(50% 60% at 100% 0%, rgba(239, 152, 32, 0.3), transparent 70%), var(--wp--preset--color--ink); color: rgba(255, 255, 255, 0.78); }
.as-runcard__phone { position: relative; display: grid; gap: 0.4rem; padding: 1.4rem 0.7rem 0.8rem; border-radius: 26px; background: var(--wp--preset--color--white); border: 5px solid #2a3333; color: var(--wp--preset--color--title); font-size: 0.6875rem; box-shadow: 0 30px 50px -25px rgba(0, 0, 0, 0.8); }
.as-runcard__notch { position: absolute; inset-block-start: 0.45rem; inset-inline-start: 50%; inline-size: 44px; block-size: 6px; border-radius: 999px; background: #2a3333; transform: translateX(-50%); }
.as-runcard__bar { display: grid; padding-block-end: 0.35rem; border-block-end: 1px solid var(--wp--preset--color--line); }
.as-runcard__bar strong { font-size: 0.75rem; line-height: 1.25; }
.as-runcard__bar em { font-style: normal; color: var(--wp--preset--color--muted); }
.as-runcard__phone ul { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.as-runcard__phone li { display: flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0.35rem 0.4rem; border-radius: 8px; background: var(--wp--preset--color--cream); line-height: 1.3; }
.as-runcard__phone li span { flex: none; inline-size: 10px; block-size: 10px; border-radius: 3px; border: 1.5px solid rgba(19, 26, 26, 0.3); }
.as-runcard__phone li.is-pass span { border-color: transparent; background: #1f9d6b; }
.as-runcard__phone li.is-fail span { border-color: transparent; background: var(--wp--preset--color--red); }
.as-runcard__snap { display: inline-flex; align-items: center; gap: 0.3rem; justify-self: start; padding: 0.3rem 0.5rem; border-radius: 999px; background: rgba(237, 135, 35, 0.14); font-weight: 700; color: var(--wp--preset--color--orange-red); }
.as-runcard .as-eyebrow { margin: 0 0 0.35rem; color: var(--wp--preset--color--orange); }
.as-runcard__title { margin: 0 0 0.85rem; font-size: 1.375rem; font-weight: 800; line-height: 1.2; color: var(--wp--preset--color--white); }
.as-runcard__ticks { display: grid; gap: 0.45rem; margin: 0 0 1.25rem !important; padding: 0 !important; list-style: none; font-size: 0.9375rem; }
.as-runcard__ticks li { position: relative; margin: 0; padding-inline-start: 1.6rem; }
.as-runcard__ticks li::before { content: ""; position: absolute; inset-block-start: 0.4rem; inset-inline-start: 0.2rem; inline-size: 0.5rem; block-size: 0.28rem; border-inline-start: 2px solid var(--wp--preset--color--orange); border-block-end: 2px solid var(--wp--preset--color--orange); transform: rotate(-45deg); }
.as-runcard .as-btn { text-decoration: none; }

/* Not written yet: what it covers and an honest note. */
.as-chkstub h2 { margin-block: 0 1rem; font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem); color: var(--wp--preset--color--title); }
.as-chkstub > p { font-size: 1.0625rem; line-height: 1.75; }
.as-chkstub__note { margin-block-start: 1.5rem; padding: 1.5rem; border-radius: 20px; background: var(--wp--preset--color--cream); border: 1px dashed rgba(237, 135, 35, 0.45); }
.as-chkstub__note p { margin: 0 0 1rem; }
.as-chkstub__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 !important; }

/* PDF band: dark card with glows, a document icon and the download button. */
.as-chkpdf__card { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(1.75rem, 4vw, 3rem); border-radius: var(--as-radius-card); background: radial-gradient(50% 120% at 100% 0%, rgba(239, 152, 32, 0.35), transparent 70%), radial-gradient(40% 100% at 0% 100%, rgba(223, 34, 41, 0.3), transparent 70%), var(--wp--preset--color--ink); color: rgba(255, 255, 255, 0.75); }
.as-chkpdf__text .as-eyebrow { color: var(--wp--preset--color--orange); }
.as-chkpdf__text h2 { margin: 0 0 0.6rem; font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--wp--preset--color--white); }
.as-chkpdf__text p:not(.as-eyebrow) { margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.6; }

/* Related: the library's cards, then link cards to the solution, blog guide and case study. */
.as-chkrel__grid { margin-block-end: 1.25rem; }
.as-chkrel__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.as-chkrel__links a { display: flex; align-items: center; gap: 0.85rem; block-size: 100%; box-sizing: border-box; padding: 1rem 1.15rem; border-radius: 18px; background: var(--wp--preset--color--cream); color: var(--wp--preset--color--title); text-decoration: none; transition: transform 0.2s ease, background 0.2s ease; }
.as-chkrel__links a:hover { transform: translateY(-2px); background: var(--wp--preset--color--peach); }
.as-chkrel__links a > span:nth-child(2) { display: grid; flex: 1; gap: 0.15rem; }
.as-chkrel__links em { font-style: normal; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--orange-red); }
.as-chkrel__links strong { font-size: 0.9375rem; line-height: 1.35; }
.as-chkrel__icon { display: grid; place-items: center; flex: none; inline-size: 40px; block-size: 40px; border-radius: 12px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--orange-red); }

/* Tablets: two cards per row; the hero card moves under the text; "At a glance" above the checks. */
@media (max-width: 1024px) {
	.as-libhero__inner, .as-chkhero__inner { grid-template-columns: minmax(0, 1fr); }
	.as-libhero__visual { inline-size: min(100%, 420px); }
	.as-lib__layout { grid-template-columns: 230px minmax(0, 1fr); }
	.as-lib__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-libpop__list, .as-librun__steps { grid-template-columns: minmax(0, 1fr); }
	.as-chkpage__grid { grid-template-columns: minmax(0, 1fr); }
	/* relative, not static: the panel's ::before texture must stay inside it, or it covers (and blocks taps on) the checks below */
	.as-glance, .admin-bar .as-glance { position: relative; inset-block-start: auto; }
	.as-chkpage__main { max-inline-size: none; }
}

/* Phones: the panel becomes a sheet opened by "Filter"; the grid has no fixed height (12 cards, then "Show more"). */
@media (max-width: 781px) {
	.as-lib__layout { grid-template-columns: minmax(0, 1fr); }
	.as-lib__panel { position: fixed; inset: auto 0 0 0; z-index: 200; max-block-size: 82vh; overflow-y: auto; border-radius: 24px 24px 0 0; transform: translateY(105%); visibility: hidden; transition: transform 0.3s ease, visibility 0s linear 0.3s; box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.45); }
	/* Closed sheet is hidden from keyboard and screen readers too; visibility switches after the slide-out. */
	.as-lib__panel.is-open { transform: none; visibility: visible; transition: transform 0.3s ease, visibility 0s; }
	.as-lib__panelhead { display: flex; align-items: center; justify-content: space-between; margin: 0 0 0.75rem; font-weight: 800; color: var(--wp--preset--color--title); }
	.as-lib__panelhead p { margin: 0; }
	.as-lib__close { inline-size: 40px; block-size: 40px; border: 0; border-radius: 50%; background: var(--wp--preset--color--cream); font-size: 1.5rem; line-height: 1; cursor: pointer; }
	.as-lib__filterbtn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1rem; border: 1px solid var(--wp--preset--color--line); border-radius: 999px; background: var(--wp--preset--color--white); font: inherit; font-size: 0.9375rem; font-weight: 700; color: var(--wp--preset--color--title); cursor: pointer; }
	.as-lib__filterbtn svg { color: var(--wp--preset--color--orange-red); }
	.as-lib__scroll { block-size: auto; overflow: visible; padding: 0; margin: 0; -webkit-mask-image: none; mask-image: none; }
	.as-lib__grid { grid-template-columns: minmax(0, 1fr); }
	body.as-lib-locked { overflow: hidden; }
	.as-libmock { transform: none; }
	.as-libmock__chip--b { inset-inline-start: 0; }
	.as-libmock__chip--a { inset-inline-end: 0; }
	.as-runcard { grid-template-columns: minmax(0, 1fr); }
	.as-runcard__phone { max-inline-size: 220px; justify-self: center; }
	.as-chkrel__links { grid-template-columns: minmax(0, 1fr); }
	.as-libsearch .as-btn { padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.as-libpop__dot { animation: none; }
	.as-chk__link:is(:hover, :focus-visible), .as-libpop__card:hover, .as-chkrel__links a:hover { transform: none; }
	.as-lib__panel { transition: none; }
}

/* ---------- Checklist page polish (2026-10-12, user: "looks very basic") ----------
 * Section: Scorecard hero card, stats strip, numbered checks with score circles, "How the scoring works", PDF parts.
 * SEO: All decorative visuals are aria-hidden HTML; the figures shown are counted from the page's own checks.
 */

/* Hero chips on the light hero. */
.as-chkhero .as-libmock__chip { background: var(--wp--preset--color--white); border-color: rgba(19, 26, 26, 0.08); box-shadow: 0 12px 28px -14px rgba(19, 26, 26, 0.35); color: var(--wp--preset--color--title); }
.as-chkhero__visual { position: relative; padding-block: 1.75rem; }
.as-chkhero { padding-block-end: calc(var(--wp--preset--spacing--60) + 3rem); }

/* Example scorecard: this checklist's categories with bars, a total ring and the band. */
.as-scorecard { padding: 1.4rem; border-radius: 24px; background: var(--wp--preset--color--white); box-shadow: 0 30px 60px -30px rgba(19, 26, 26, 0.4), 0 0 0 1px rgba(19, 26, 26, 0.06); }
.as-scorecard__head { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1rem; padding-block-end: 0.9rem; border-block-end: 1px solid var(--wp--preset--color--line); font-size: 0.8125rem; color: var(--wp--preset--color--muted); }
.as-scorecard__head strong { display: block; font-size: 0.9375rem; color: var(--wp--preset--color--title); }
.as-scorecard__rows { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; }
.as-scorecard__rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 0.75rem; font-size: 0.8125rem; color: var(--wp--preset--color--title); }
.as-scorecard__rows span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.as-scorecard__rows em { font-style: normal; font-weight: 700; color: var(--wp--preset--color--muted); font-variant-numeric: tabular-nums; }
.as-scorecard__rows b { grid-column: 1 / -1; position: relative; block-size: 8px; border-radius: 999px; background: var(--wp--preset--color--cream); overflow: hidden; }
.as-scorecard__rows b::after { content: ""; position: absolute; inset: 0 auto 0 0; inline-size: var(--w); border-radius: inherit; background: var(--wp--preset--gradient--brand); }
.as-scorecard__total { display: flex; align-items: center; gap: 0.85rem; margin: 1.1rem 0 0; padding-block-start: 1rem; border-block-start: 1px solid var(--wp--preset--color--line); font-size: 0.8125rem; color: var(--wp--preset--color--muted); }
.as-scorecard__total strong { display: block; font-size: 0.9375rem; color: var(--wp--preset--color--title); }
.as-scorecard__total i { display: inline-block; margin-block-start: 0.25rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-style: normal; font-size: 0.75rem; font-weight: 700; }
.as-scorecard__total i.is-green { background: rgba(31, 157, 107, 0.12); color: #127552; }
.as-scorecard__total i.is-amber { background: rgba(239, 152, 32, 0.16); color: #a35c07; }
.as-scorecard__total i.is-red { background: rgba(223, 34, 41, 0.1); color: var(--wp--preset--color--red); }
.as-scorecard__ring { display: grid; place-items: center; flex: none; inline-size: 56px; block-size: 56px; border-radius: 50%; background: conic-gradient(var(--wp--preset--color--orange) 0 var(--p), var(--wp--preset--color--line) var(--p) 100%); }
.as-scorecard__ring span { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--wp--preset--color--white); font-weight: 800; color: var(--wp--preset--color--title); }

/* Stats strip: white card overlapping the hero's lower edge, four figures with icons. */
.as-chkstats { position: relative; z-index: 2; margin-block-start: -3.25rem; }
.as-chkstats__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; padding: 0; list-style: none; border-radius: 22px; background: var(--wp--preset--color--white); box-shadow: 0 24px 50px -28px rgba(19, 26, 26, 0.35), 0 0 0 1px rgba(19, 26, 26, 0.06); }
.as-chkstats__list li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.85rem; align-items: center; padding: 1.25rem 1.5rem; }
.as-chkstats__list li + li { border-inline-start: 1px solid var(--wp--preset--color--line); }
.as-chkstats__icon { grid-row: 1 / 3; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 14px; background: rgba(237, 135, 35, 0.12); color: var(--wp--preset--color--orange-red); }
.as-chkstats__list strong { font-size: 1.75rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; background: var(--wp--preset--gradient--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.as-chkstats__list li > span:last-child { font-size: 0.875rem; color: var(--wp--preset--color--muted); }

/* Checks: section heading with its count; each check numbered, with Yes / No / Maybe buttons under the text. */
.as-checksec__meta { margin: 0.35rem 0 0.6rem 3rem !important; font-size: 0.8125rem; font-weight: 600; color: var(--wp--preset--color--muted); }
.as-check__answer { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: 0.55rem; }
.as-check__answer[hidden] { display: none; }
.as-check__answer button { min-inline-size: 4.25rem; padding: 0.35rem 0.9rem; border-radius: 999px; border: 1.5px solid rgba(19, 26, 26, 0.18); background: var(--wp--preset--color--white); font: inherit; font-size: 0.8125rem; font-weight: 700; line-height: 1.2; color: var(--wp--preset--color--muted); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; }
.as-check__answer button:hover { border-color: var(--wp--preset--color--orange); color: var(--wp--preset--color--title); }
.as-check__answer button:focus-visible { outline: 2px solid var(--wp--preset--color--orange); outline-offset: 2px; }
.as-check__answer button[aria-pressed="true"] { color: var(--wp--preset--color--white); border-color: transparent; }
.as-check__answer button[data-answer="yes"][aria-pressed="true"] { background: #1f9d6b; }
.as-check__answer button[data-answer="no"][aria-pressed="true"] { background: var(--wp--preset--color--red); }
.as-check__answer button[data-answer="maybe"][aria-pressed="true"] { background: #ef9820; color: var(--wp--preset--color--title); }
/* The short disclaimer above the checks. */
.as-chkbody .as-checks__note { margin: 0 !important; padding: 0.85rem 1.1rem; border-radius: 16px; border-inline-start: 4px solid var(--wp--preset--color--orange); background: var(--wp--preset--color--cream); font-size: 0.9375rem; line-height: 1.55; color: var(--wp--preset--color--title); }
.as-chkbody .as-checks__note a { font-weight: 700; color: var(--wp--preset--color--orange-red); }

/* How the scoring works: scale, bands, tracker. */
.as-score { margin-block: 0 2.5rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--as-radius-card); background: linear-gradient(180deg, var(--wp--preset--color--cream), var(--wp--preset--color--white)); border: 1px solid rgba(237, 135, 35, 0.22); }
.as-score .as-eyebrow { margin: 0 0 0.35rem; }
.as-score h2 { margin: 0 0 0.75rem !important; }
.as-score__lead { margin: 0 0 1.5rem !important; }
.as-score__scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; margin: 0 0 1.25rem !important; padding: 0 !important; list-style: none; }
.as-score__scale li { display: grid; justify-items: center; gap: 0.35rem; margin: 0 !important; padding: 0.85rem 0.5rem; border-radius: 16px; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); text-align: center; }
.as-score__scale li::marker { content: none; }
.as-score__scale strong { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; font-size: 1rem; color: var(--wp--preset--color--white); }
.as-score__scale .is-1 strong { background: #c9cfcf; color: var(--wp--preset--color--title); }
.as-score__scale .is-2 strong { background: #f5c48a; color: var(--wp--preset--color--title); }
.as-score__scale .is-3 strong { background: #ef9820; }
.as-score__scale .is-4 strong { background: #e45126; }
.as-score__scale .is-5 strong { background: var(--wp--preset--gradient--brand); }
.as-score__scale span { font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--wp--preset--color--title); }
.as-score__rag { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 2rem !important; padding: 0 !important; list-style: none; }
.as-score__rag li { display: grid; align-content: start; gap: 0.25rem; margin: 0 !important; padding: 1rem 1.1rem; border-radius: 16px; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-block-start: 4px solid; font-size: 0.875rem; line-height: 1.45; }
.as-score__rag .is-green { border-block-start-color: #1f9d6b; }
.as-score__rag .is-amber { border-block-start-color: #ef9820; }
.as-score__rag .is-red { border-block-start-color: var(--wp--preset--color--red); }
.as-score__rag strong { font-size: 1rem; color: var(--wp--preset--color--title); }
.as-score__rag em { font-style: normal; font-weight: 700; color: var(--wp--preset--color--title); font-variant-numeric: tabular-nums; }
.as-score__dot { display: none; }
.as-score__sub { margin: 0 0 0.25rem !important; }
.as-score__note { margin: 0 0 1rem !important; }
.as-score__track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 0 !important; padding: 0 !important; list-style: none; counter-reset: none; }
.as-score__track::before { content: ""; position: absolute; inset-block-start: 18px; inset-inline: 12% 12%; border-block-start: 2px dashed rgba(237, 135, 35, 0.45); }
.as-score__track li { position: relative; display: grid; align-content: start; justify-items: center; gap: 0.3rem; margin: 0 !important; text-align: center; font-size: 0.8125rem; line-height: 1.4; }
.as-score__track li::marker { content: none; }
.as-score__step { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; background: var(--wp--preset--gradient--brand); font-weight: 800; color: var(--wp--preset--color--white); box-shadow: 0 0 0 5px var(--wp--preset--color--white); }
.as-score__track strong { font-size: 0.9375rem; color: var(--wp--preset--color--title); }

/* PDF parts list in the dark band. */
.as-chkpdf__card.is-simple { grid-template-columns: minmax(0, 1fr); }
.as-chkpdf__parts { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.as-chkpdf__parts li { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.15rem; border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.as-chkpdf__icon { display: grid; place-items: center; flex: none; inline-size: 42px; block-size: 42px; border-radius: 12px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); }
.as-chkpdf__part { display: grid; gap: 0.15rem; font-size: 0.9375rem; line-height: 1.5; }
.as-chkpdf__part em { font-style: normal; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--orange); }
.as-chkpdf__part strong { font-size: 1.0625rem; color: var(--wp--preset--color--white); }

/* "Learn more": always three links in one row under the related checklists. */
.as-chkrel__label { margin: 2rem 0 0.75rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.as-chkrel__grid { margin-block-end: 0; }

@media (max-width: 1024px) {
	.as-chkpdf__card { grid-template-columns: minmax(0, 1fr); }
	.as-chkstats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-chkstats__list li:nth-child(3) { border-inline-start: 0; }
	.as-chkstats__list li:nth-child(n + 3) { border-block-start: 1px solid var(--wp--preset--color--line); }
}

@media (max-width: 600px) {
	.as-chkstats__list li { padding: 1rem; }
	.as-chkstats__list strong { font-size: 1.375rem; }
	.as-score__scale { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.3rem; }
	.as-score__scale li { padding: 0.6rem 0.2rem; }
	.as-score__scale span { font-size: 0.6875rem; }
	.as-score__rag, .as-score__track { grid-template-columns: minmax(0, 1fr); }
	.as-score__track::before { display: none; }
	.as-score__track li { grid-template-columns: auto 1fr; justify-items: start; text-align: start; column-gap: 0.75rem; }
	.as-score__track li > :not(.as-score__step) { grid-column: 2; }
	.as-score__step { grid-row: 1 / 3; }
	.as-checksec__meta { margin-inline-start: 0 !important; }
}

/* ---------- Contact us (templates/page-contact.html, patterns contact-*.php, data inc/contact.php) ----------
 * Section: Every way to reach AutoSmart: warm hero with route cards and a dark contact card, the message form with
 * "What happens next", office cards with live local time, logo strip, contact questions, CTA.
 * SEO: One H1 on contacting AutoSmart; H2 per section, H3 per office; ContactPage + Organization (contact points, offices) + FAQPage from the same data.
 */

/* No sideways scroll on phones from the decorative glows. */
.as-contact { overflow-x: clip; }

/* Hero: warm glows and grid texture (as the About hero), text and route cards left, dark contact card right. */
.as-cthero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	background:
		radial-gradient(45% 60% at 85% 35%, rgba(239, 152, 32, 0.28), transparent 70%),
		radial-gradient(35% 50% at 0% 100%, rgba(223, 34, 41, 0.08), transparent 70%),
		var(--wp--preset--color--cream);
}

.as-cthero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px;
	-webkit-mask-image: radial-gradient(70% 80% at 60% 40%, #000 25%, transparent 100%);
	mask-image: radial-gradient(70% 80% at 60% 40%, #000 25%, transparent 100%);
}

.as-cthero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: var(--wp--preset--spacing--60); }
.as-cthero .as-crumbs { margin-block-end: 1rem; }
.as-cthero__title { max-inline-size: 14ch; margin: 0.75rem 0 1.25rem; font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem); line-height: 1.04; letter-spacing: -0.03em; }
.as-cthero__lead { max-inline-size: 36rem; margin: 0 0 2rem; font-size: 1.1875rem; line-height: 1.65; color: var(--wp--preset--color--body); }

/* Route cards: white rows with a gradient icon, the gradient border shows on hover. */
.as-ctroutes { display: grid; gap: 0.75rem; max-inline-size: 36rem; margin: 0; padding: 0; list-style: none; }

.as-ctroute {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 1.25rem 0.9rem 0.9rem;
	border: 1px solid transparent;
	border-radius: 20px;
	background: linear-gradient(var(--wp--preset--color--white), var(--wp--preset--color--white)) padding-box, linear-gradient(rgba(237, 135, 35, 0.25), rgba(237, 135, 35, 0.25)) border-box;
	box-shadow: 0 20px 40px -32px rgba(19, 26, 26, 0.45);
	color: var(--wp--preset--color--body);
	text-decoration: none;
	transition: transform 0.25s ease, background 0.25s ease;
}

.as-ctroute:is(:hover, :focus-visible) { transform: translateX(4px); background: linear-gradient(var(--wp--preset--color--white), var(--wp--preset--color--white)) padding-box, var(--wp--preset--gradient--brand) border-box; }
.as-ctroute__icon { display: grid; flex: none; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 15px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); box-shadow: 0 12px 24px -12px rgba(223, 34, 41, 0.6); }
.as-ctroute__text { display: flex; flex: 1; flex-direction: column; gap: 0.1rem; font-size: 0.9375rem; }
.as-ctroute__text strong { font-size: 1.0625rem; color: var(--wp--preset--color--title); }
.as-ctroute__go { font-size: 1.25rem; color: var(--wp--preset--color--orange-red); transition: transform 0.2s ease; }
.as-ctroute:is(:hover, :focus-visible) .as-ctroute__go { transform: translateX(3px); }

/* Dark contact card: grid texture, two glows, big click-to-call rows. */
.as-ctcard {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	justify-self: center;
	box-sizing: border-box;
	inline-size: min(100%, 560px);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border-radius: 32px;
	background:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
		var(--wp--preset--color--ink);
	box-shadow: 0 50px 90px -40px rgba(19, 26, 26, 0.75), 0 0 0 10px rgba(255, 255, 255, 0.5);
	color: rgba(255, 255, 255, 0.78);
}

.as-ctcard__glow { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.as-ctcard__glow--a { inset: -35% -30% auto auto; inline-size: 320px; block-size: 320px; background: radial-gradient(closest-side, rgba(239, 152, 32, 0.5), transparent); }
.as-ctcard__glow--b { inset: auto auto -30% -25%; inline-size: 260px; block-size: 260px; background: radial-gradient(closest-side, rgba(223, 34, 41, 0.35), transparent); }
.as-ctcard__eyebrow { margin: 0 0 1.25rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--orange); }
.as-ctcard__list { display: grid; gap: 0.65rem; margin: 0; padding: 0; list-style: none; }

.as-ctcard__list a {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 1rem;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--wp--preset--color--white);
	font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
	font-weight: 700;
	text-decoration: none;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.as-ctcard__list a:is(:hover, :focus-visible) { background: rgba(255, 255, 255, 0.12); border-color: rgba(239, 152, 32, 0.6); }
.as-ctcard small { display: block; margin-block-end: 0.1rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.as-ctcard__icon { display: grid; flex: none; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); }
.as-ctcard__offices { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0 0; padding: 1.25rem 1rem 0; border-block-start: 1px solid rgba(255, 255, 255, 0.12); font-weight: 700; color: var(--wp--preset--color--white); }
.as-ctcard__offices .as-ctcard__icon { background: rgba(255, 255, 255, 0.1); color: var(--wp--preset--color--orange); }

/* Message: white form card left, dark "What happens next" card right, on a soft warm band. */
.as-ctform { background: radial-gradient(700px circle at 0% 0%, rgba(239, 152, 32, 0.1), transparent 60%), radial-gradient(600px circle at 100% 100%, rgba(223, 34, 41, 0.06), transparent 60%), var(--wp--preset--color--white); }
.as-ctform__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); align-items: start; gap: clamp(1.5rem, 3vw, 2.5rem); }

.as-ctform__card {
	position: relative;
	overflow: hidden;
	padding: clamp(1.5rem, 3.5vw, 2.75rem);
	border-radius: 32px;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.22);
	box-shadow: 0 40px 80px -50px rgba(19, 26, 26, 0.5);
}

.as-ctform__card::after { content: ""; position: absolute; inset: 0 auto auto 0; inline-size: 120px; block-size: 4px; background: var(--wp--preset--gradient--brand); }
.as-ctform__card h2 { margin: 0.4rem 0 1.5rem; }
/* The message form (posts to Zoho): labelled fields, warm focus ring, red border only after a visitor leaves a field wrong. */
.as-ctform__form { display: grid; gap: 1rem; }
.as-ctform__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.as-ctform__form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.875rem; font-weight: 600; color: var(--wp--preset--color--title); }
.as-ctform__form abbr { margin-inline-start: 0.15rem; color: var(--wp--preset--color--orange-red); text-decoration: none; }

.as-ctform__form :is(input, textarea) {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 50px;
	padding: 0.75rem 1rem;
	border-radius: 14px;
	background: #FBF8F4;
	border: 1px solid #ECE4DA;
	font: inherit;
	font-size: 1rem;
	font-weight: 400;
	color: var(--wp--preset--color--title);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.as-ctform__form textarea { min-block-size: 140px; resize: vertical; }
.as-ctform__form :is(input, textarea):hover { border-color: #DDCFBF; }
.as-ctform__form :is(input, textarea):focus { outline: none; background: var(--wp--preset--color--white); border-color: var(--wp--preset--color--orange); box-shadow: 0 0 0 4px rgba(239, 152, 32, 0.18); }
.as-ctform__form :is(input, textarea):user-invalid { border-color: var(--wp--preset--color--orange-red); box-shadow: 0 0 0 4px rgba(223, 34, 41, 0.12); }
/* Spam trap: kept off screen (not display: none, which some bots skip). */
.as-ctform__trap { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.as-ctform__consent { margin: 0.25rem 0 0.5rem; font-size: 0.875rem; line-height: 1.5; color: var(--wp--preset--color--body); }
.as-ctform__form .as-btn { justify-self: start; gap: 0.45rem; border: 0; cursor: pointer; font: inherit; font-weight: 700; }

/* Thank-you card shown when Zoho sends the visitor back (?sent=1). */
.as-ctform__done { padding: clamp(1.5rem, 3vw, 2rem); border-radius: 22px; background: radial-gradient(320px circle at 100% 0%, rgba(239, 152, 32, 0.14), transparent 60%), #FFF8EF; border: 1px solid rgba(237, 135, 35, 0.25); }
.as-ctform__done-icon { display: grid; place-items: center; inline-size: 56px; block-size: 56px; margin-block-end: 1rem; border-radius: 50%; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); box-shadow: 0 14px 28px -12px rgba(223, 34, 41, 0.6); }
.as-ctform__done p { margin: 0; line-height: 1.6; color: var(--wp--preset--color--body); }
.as-ctform__done .as-ctform__done-title { margin-block-end: 0.4rem; font-size: 1.25rem; font-weight: 700; color: var(--wp--preset--color--title); }

/* What happens next: dark card, numbered steps on a gradient line. */
.as-ctnext {
	position: sticky;
	inset-block-start: calc(var(--as-header-h) + 2rem);
	overflow: hidden;
	isolation: isolate;
	padding: clamp(1.75rem, 3vw, 2.25rem);
	border-radius: 28px;
	background:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
		var(--wp--preset--color--ink);
	box-shadow: 0 40px 80px -40px rgba(19, 26, 26, 0.7);
	color: rgba(255, 255, 255, 0.75);
}

.admin-bar .as-ctnext { inset-block-start: calc(var(--as-header-h) + 32px + 2rem); }
.as-ctnext__glow { position: absolute; inset: -30% -30% auto auto; z-index: -1; inline-size: 260px; block-size: 260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(239, 152, 32, 0.45), transparent); }
.as-ctnext__eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--orange); }
.as-ctnext__title { margin: 0.4rem 0 1.5rem; font-size: 1.5rem; color: var(--wp--preset--color--white); }
.as-ctnext__steps { position: relative; display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.as-ctnext__steps::before { content: ""; position: absolute; inset-block: 1.25rem 1.25rem; inset-inline-start: 1.15rem; inline-size: 2px; background: linear-gradient(180deg, rgba(239, 152, 32, 0.9), rgba(223, 34, 41, 0.2)); }
.as-ctnext__steps li { position: relative; display: flex; gap: 1rem; }
.as-ctnext__num { display: grid; flex: none; place-items: center; inline-size: 2.3rem; block-size: 2.3rem; border-radius: 50%; background: var(--wp--preset--gradient--brand); box-shadow: 0 0 0 5px var(--wp--preset--color--ink); font-size: 0.875rem; font-weight: 800; color: var(--wp--preset--color--white); }
.as-ctnext__steps h4 { margin: 0.3rem 0 0.25rem; font-size: 1.0625rem; color: var(--wp--preset--color--white); }
.as-ctnext__steps p { margin: 0; font-size: 0.9375rem; line-height: 1.55; }
.as-ctnext__alt { margin: 1.75rem 0 0; padding-block-start: 1.25rem; border-block-start: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.9375rem; }
.as-ctnext__alt a { font-weight: 700; color: var(--wp--preset--color--white); }

/* Offices: the About cards plus a live local-time line. */
.as-ctoffice__time { margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--wp--preset--color--muted); }
.as-ctoffice__time time { margin-inline-start: 0.3rem; font-size: 1.125rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--wp--preset--color--title); }

@media (max-width: 1024px) {
	.as-cthero__inner, .as-ctform__inner { grid-template-columns: minmax(0, 1fr); }
	.as-ctnext { position: static; }
}

@media (max-width: 600px) {
	.as-ctform__row { grid-template-columns: minmax(0, 1fr); }
	.as-ctcard { box-shadow: 0 40px 80px -40px rgba(19, 26, 26, 0.75); }
}

@media (prefers-reduced-motion: reduce) {
	.as-ctroute:is(:hover, :focus-visible), .as-ctroute:is(:hover, :focus-visible) .as-ctroute__go { transform: none; }
}

/* ---------- Become a Partner (templates/page-our-partners.html, patterns partner-*.php, data inc/partners.php) ----------
 * Section: The partner programme: dark hero with stacked programme cards, who it's for, three programme cards, a dark
 * mutual-benefit band, partner logos (WP admin → Partners), compare table, steps, dark apply band, FAQ, CTA.
 * SEO: One H1 on the AutoSmart partner programme; H2 per section, H3 per audience, programme, benefit and step; WebPage + Organization + FAQPage.
 */

/* No sideways scroll on phones from the decorative glows. */
.as-partners { overflow-x: clip; }

/* Hero: dark ink with warm glows and a grid texture; text left, stacked glass programme cards right. */
.as-pthero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	background:
		radial-gradient(45% 60% at 85% 30%, rgba(239, 152, 32, 0.32), transparent 70%),
		radial-gradient(40% 55% at 0% 100%, rgba(223, 34, 41, 0.28), transparent 70%),
		var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.78);
}

.as-pthero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 56px 56px;
	-webkit-mask-image: radial-gradient(70% 80% at 60% 40%, #000 25%, transparent 100%);
	mask-image: radial-gradient(70% 80% at 60% 40%, #000 25%, transparent 100%);
}

.as-pthero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: var(--wp--preset--spacing--60); }
.as-pthero .as-crumbs { margin-block-end: 1rem; }
.as-pthero .as-crumbs :is(a, li, span) { color: rgba(255, 255, 255, 0.65); }
.as-pthero__title { max-inline-size: 13ch; margin: 0.75rem 0 1.25rem; font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem); line-height: 1.04; letter-spacing: -0.03em; color: var(--wp--preset--color--white); }
.as-pthero__lead { max-inline-size: 38rem; margin: 0 0 2rem; font-size: 1.1875rem; line-height: 1.65; }
.as-pthero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.as-pthero__cta .as-btn { gap: 0.45rem; }

/* Each programme's own colour (warm brand family only, design.md), used for icons, headers and tints. Equal weight:
   no programme is highlighted over another (user, 2026-10-12). */
.as-pt--referral { --pt-a: #F4A531; --pt-b: #ED8723; --pt-tint: #FFF7EA; --pt-ink: #9A5B07; }
.as-pt--solutions { --pt-a: #ED8723; --pt-b: #ED5421; --pt-tint: #FFF1E8; --pt-ink: #A43A0C; }
.as-pt--reseller { --pt-a: #ED5421; --pt-b: #DD2228; --pt-tint: #FFEEEC; --pt-ink: #A3161B; }

/* The three programmes as equal glass cards, fanned slightly; each with its coloured icon and side stripe. */
.as-pthero__visual { position: relative; display: grid; gap: 0.9rem; justify-self: center; inline-size: min(100%, 480px); }
.as-pthero__visual::before { content: ""; position: absolute; inset: 10% 0 10% 10%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(239, 152, 32, 0.45), transparent); filter: blur(30px); }

.as-ptstack {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.35rem;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.as-ptstack::before { content: ""; position: absolute; inset: 0 auto 0 0; inline-size: 4px; background: linear-gradient(180deg, var(--pt-a), var(--pt-b)); }
.as-ptstack--2 { margin-inline-start: 1.5rem; }
.as-ptstack--3 { margin-inline-start: 3rem; }
.as-ptstack p { margin: 0; }
.as-ptstack__icon { display: grid; flex: none; place-items: center; inline-size: 46px; block-size: 46px; border-radius: 14px; background: linear-gradient(135deg, var(--pt-a), var(--pt-b)); color: var(--wp--preset--color--white); box-shadow: 0 12px 24px -12px var(--pt-b); }
.as-ptstack__name { font-size: 1.125rem; font-weight: 800; color: var(--wp--preset--color--white); }
.as-ptstack__line { margin-block-start: 0.15rem !important; font-size: 0.9375rem; }
.as-pthero__visual .as-ptstack__note { justify-self: end; margin: 0.25rem 0 0; padding: 0.45rem 0.95rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.8125rem; font-weight: 700; color: var(--wp--preset--color--orange); }

/* Proof bar on the dark hero (the About page's bar, solid white so the dark doesn't show through). */
.as-ptproof { position: relative; background: var(--wp--preset--color--white); }

/* Who we partner with: four white tiles with a gradient icon. */
.as-ptwho { background: radial-gradient(700px circle at 100% 0%, rgba(239, 152, 32, 0.1), transparent 60%), var(--wp--preset--color--white); }
.as-ptwho__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }

.as-ptwho__tile {
	position: relative;
	overflow: hidden;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border-radius: 24px;
	background: radial-gradient(240px circle at 100% 0%, rgba(239, 152, 32, 0.12), transparent 60%), var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.2);
	box-shadow: 0 24px 50px -36px rgba(19, 26, 26, 0.4);
	transition: transform 0.3s ease, border-color 0.3s ease;
}

.as-ptwho__tile:hover { transform: translateY(-4px); border-color: rgba(237, 135, 35, 0.45); }
.as-ptwho__icon { display: grid; place-items: center; inline-size: 52px; block-size: 52px; margin-block-end: 1.1rem; border-radius: 16px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); box-shadow: 0 14px 28px -12px rgba(223, 34, 41, 0.6); }
.as-ptwho__tile h3 { margin: 0 0 0.4rem; font-size: 1.1875rem; }
.as-ptwho__tile p { margin: 0; line-height: 1.6; color: var(--wp--preset--color--body); }

/* Three ways to partner: rich cards on a warm band, the middle one lifted with a gradient border. */
.as-ptprog { background: radial-gradient(600px circle at 0% 0%, rgba(239, 152, 32, 0.14), transparent 60%), radial-gradient(500px circle at 100% 100%, rgba(223, 34, 41, 0.07), transparent 60%), var(--wp--preset--color--cream); }
.as-ptprog__head { max-inline-size: 44rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.as-ptprog__head h2 { margin: 0.4rem 0 0.75rem; }
.as-ptprog__head p:last-child { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--wp--preset--color--body); }
.as-ptprog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }

/* Programme card: equal weight, its own colour as a top band, icon and "how you work" chip; lifts on hover only. */
.as-ptcard {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: 28px;
	background: radial-gradient(320px circle at 100% 0%, var(--pt-tint), transparent 70%), var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.2);
	box-shadow: 0 24px 50px -36px rgba(19, 26, 26, 0.4);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.as-ptcard::before { content: ""; position: absolute; inset: 0 0 auto; block-size: 6px; background: linear-gradient(90deg, var(--pt-a), var(--pt-b)); }
.as-ptcard:hover { transform: translateY(-6px); border-color: var(--pt-a); box-shadow: 0 40px 70px -40px var(--pt-b); }
.as-ptcard__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 1.25rem; }
.as-ptcard__icon { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 18px; background: linear-gradient(135deg, var(--pt-a), var(--pt-b)); color: var(--wp--preset--color--white); box-shadow: 0 16px 30px -14px var(--pt-b); }
.as-ptcard__mode { margin: 0; padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--pt-tint); border: 1px solid color-mix(in srgb, var(--pt-a) 35%, transparent); font-size: 0.8125rem; font-weight: 700; color: var(--pt-ink); }
.as-ptcard h3 { margin: 0; font-size: 1.5rem; }
.as-ptcard__line { margin: 0.35rem 0 1.25rem; font-weight: 600; color: var(--wp--preset--color--title); }
.as-ptcard__facts { display: grid; gap: 0.9rem; margin: 0 0 1.5rem; padding-block-start: 1.25rem; border-block-start: 1px solid rgba(237, 135, 35, 0.2); }
.as-ptcard__facts dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pt-ink); }
.as-ptcard__facts dd { margin: 0.2rem 0 0; line-height: 1.6; color: var(--wp--preset--color--body); }
.as-ptcard__cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-block-start: auto; font-weight: 700; color: var(--pt-ink); text-decoration: none; }

/* "Something else in mind?" note under the cards. */
.as-ptprog__note { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.6rem; inline-size: fit-content; max-inline-size: 100%; margin: clamp(1.75rem, 3vw, 2.5rem) auto 0; padding: 0.75rem 1.25rem; border-radius: 999px; background: var(--wp--preset--color--white); border: 1px dashed rgba(237, 135, 35, 0.5); color: var(--wp--preset--color--body); text-align: center; }
.as-ptprog__note-icon { display: inline-grid; flex: none; color: var(--wp--preset--color--orange-red); }
.as-ptprog__note a { font-weight: 700; color: var(--wp--preset--color--orange-red); white-space: nowrap; }
.as-ptcard__cta span { transition: transform 0.2s ease; }
.as-ptcard__cta:is(:hover, :focus-visible) span { transform: translateX(4px); }

/* Built on mutual benefit: dark showcase band, text left, glass tiles right. */
.as-ptben {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(700px circle at 100% 50%, rgba(239, 152, 32, 0.28), transparent 60%),
		radial-gradient(600px circle at 0% 100%, rgba(223, 34, 41, 0.25), transparent 60%),
		var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.78);
}

.as-ptben::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: radial-gradient(70% 80% at 60% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 80% at 60% 50%, #000 30%, transparent 100%); }
.as-ptben__inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.as-ptben__text .as-eyebrow { color: var(--wp--preset--color--orange); }
.as-ptben__text h2 { margin: 0.4rem 0 1rem; color: var(--wp--preset--color--white); }
.as-ptben__text p { margin: 0 0 1.75rem; font-size: 1.0625rem; line-height: 1.75; }
.as-ptben__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.as-ptben__tile { padding: 1.25rem 1.35rem; border-radius: 20px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); transition: background 0.25s ease, border-color 0.25s ease; }
.as-ptben__tile:first-child { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(239, 152, 32, 0.2), rgba(223, 34, 41, 0.14)); border-color: rgba(239, 152, 32, 0.45); }
.as-ptben__tile:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(239, 152, 32, 0.5); }
.as-ptben__icon { display: grid; place-items: center; inline-size: 42px; block-size: 42px; margin-block-end: 0.75rem; border-radius: 50%; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); }
.as-ptben__tile h3 { margin: 0 0 0.25rem; font-size: 1.0625rem; color: var(--wp--preset--color--white); }
.as-ptben__tile p { margin: 0; font-size: 0.9375rem; line-height: 1.55; }

/* Our partners: white logo tiles on a dotted band, logos in colour. */
.as-ptlogos { background: radial-gradient(rgba(237, 135, 35, 0.22) 1.2px, transparent 1.4px) 0 0 / 22px 22px, var(--wp--preset--color--cream); }
.as-ptlogos__head { max-inline-size: 44rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.as-ptlogos__head h2 { margin: 0.4rem 0 0.75rem; }
.as-ptlogos__head p:last-child { margin: 0; color: var(--wp--preset--color--body); }
.as-ptlogos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }

.as-ptlogo {
	display: grid;
	place-items: center;
	block-size: 112px;
	padding: 1.25rem 1.5rem;
	border-radius: 20px;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.18);
	box-shadow: 0 20px 40px -32px rgba(19, 26, 26, 0.45);
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.as-ptlogo:hover { transform: translateY(-3px); border-color: rgba(237, 135, 35, 0.45); box-shadow: 0 28px 50px -32px rgba(223, 34, 41, 0.45); }
.as-ptlogo a { display: grid; place-items: center; inline-size: 100%; block-size: 100%; }
.as-ptlogo img { display: block; max-inline-size: 100%; max-block-size: 56px; inline-size: auto; block-size: auto; object-fit: contain; }

/* Compare table: a warm band; each programme is its own coloured column (gradient header tile, tinted cells), with
   gaps between columns so none looks like the "main" one; an icon per row. */
.as-ptcompare { background: radial-gradient(700px circle at 0% 0%, rgba(239, 152, 32, 0.14), transparent 60%), radial-gradient(600px circle at 100% 100%, rgba(223, 34, 41, 0.08), transparent 60%), var(--wp--preset--color--cream); }
.as-ptcompare__head { max-inline-size: 44rem; margin: 0 auto clamp(1.75rem, 3vw, 2.5rem); text-align: center; }
.as-ptcompare__head h2 { margin: 0.4rem 0 0.75rem; }
.as-ptcompare__head p:last-child { margin: 0; color: var(--wp--preset--color--body); }
.as-ptcompare__table { inline-size: 100%; border-collapse: separate; border-spacing: 12px 0; margin-inline: -12px; inline-size: calc(100% + 24px); font-size: 0.9375rem; }
.as-ptcompare__table :is(th, td) { padding: 1.05rem 1.25rem; text-align: start; vertical-align: top; line-height: 1.55; }

/* Column headers: a gradient tile per programme with its icon and "how you work". */
.as-ptcompare__table thead th { padding: 1.4rem 1.25rem 1.25rem; border-radius: 20px 20px 0 0; background: linear-gradient(135deg, var(--pt-a), var(--pt-b)); color: var(--wp--preset--color--white); box-shadow: 0 24px 40px -30px var(--pt-b); }
.as-ptcompare__icon { display: grid; place-items: center; inline-size: 44px; block-size: 44px; margin-block-end: 0.75rem; border-radius: 14px; background: rgba(255, 255, 255, 0.22); }
.as-ptcompare__name { display: block; font-size: 1.125rem; font-weight: 800; }
.as-ptcompare__mode { display: inline-block; margin-block-start: 0.4rem; padding: 0.2rem 0.65rem; border-radius: 999px; background: rgba(255, 255, 255, 0.2); font-size: 0.75rem; font-weight: 700; }

/* The whole table sits in one white card, so labels and columns read as one piece. */
.as-ptcompare__wrap { padding: 10px; border-radius: 30px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.2); box-shadow: 0 50px 90px -60px rgba(19, 26, 26, 0.55); }
.as-ptcompare__table :is(tbody th, td) { vertical-align: middle; }

/* Row labels: icon and label on one line, in the card's first column, with the same divider as the cells. */
.as-ptcompare__table tbody th { inline-size: 22%; padding: 1.05rem 0.75rem 1.05rem 1rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wp--preset--color--title); border-block-end: 1px dashed rgba(237, 135, 35, 0.25); }
.as-ptcompare__table tbody tr:last-child th { border-block-end: 0; }
.as-ptcompare__rowlabel { display: flex; align-items: center; gap: 0.75rem; }
.as-ptcompare__rowicon { display: grid; flex: none; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 12px; background: #FFF1E2; color: var(--wp--preset--color--orange-red); }

/* Corner cell: an "Equal standing" note card, the same height as the programme headers. */
.as-ptcompare__table td.as-ptcompare__corner { padding: 0; vertical-align: top; background: none; border: 0; }
.as-ptcompare__equal { display: flex; flex-direction: column; gap: 0.35rem; box-sizing: border-box; block-size: 100%; min-block-size: 100%; padding: 1.25rem; border-radius: 20px; background: radial-gradient(220px circle at 0% 0%, rgba(239, 152, 32, 0.18), transparent 70%), var(--wp--preset--color--cream); border: 1px dashed rgba(237, 135, 35, 0.45); font-size: 0.875rem; line-height: 1.5; color: var(--wp--preset--color--body); }
.as-ptcompare__equal strong { font-size: 1.0625rem; color: var(--wp--preset--color--title); }
.as-ptcompare__equal-icon { display: grid; place-items: center; inline-size: 40px; block-size: 40px; margin-block-end: 0.35rem; border-radius: 12px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); }

/* Cells: tinted in the column's colour, a soft divider between rows, rounded at the bottom of each column. */
.as-ptcompare__table td { background: var(--pt-tint); color: var(--wp--preset--color--body); border-block-end: 1px dashed color-mix(in srgb, var(--pt-a) 35%, transparent); }
.as-ptcompare__table tbody tr:last-child td { border-block-end: 0; border-radius: 0 0 20px 20px; }
/* Equal programme columns (fixed layout), so no column looks bigger than another. */
@media (min-width: 761px) { .as-ptcompare__table { table-layout: fixed; } }

/* How partnering works: four numbered steps on a gradient line. */
.as-ptsteps { background: radial-gradient(700px circle at 0% 100%, rgba(239, 152, 32, 0.1), transparent 60%), var(--wp--preset--color--white); }
.as-ptsteps__list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.as-ptsteps__list::before { content: ""; position: absolute; inset-block-start: 1.6rem; inset-inline: 1.6rem 12%; block-size: 2px; background: linear-gradient(90deg, rgba(239, 152, 32, 0.9), rgba(223, 34, 41, 0.2)); }
.as-ptsteps__list li { position: relative; }
.as-ptsteps__num { display: grid; place-items: center; inline-size: 3.2rem; block-size: 3.2rem; margin-block-end: 1rem; border-radius: 50%; background: var(--wp--preset--gradient--brand); box-shadow: 0 0 0 6px var(--wp--preset--color--white), 0 14px 28px -10px rgba(223, 34, 41, 0.6); font-weight: 800; color: var(--wp--preset--color--white); }
.as-ptsteps__list h3 { margin: 0 0 0.35rem; font-size: 1.1875rem; }
.as-ptsteps__list p { margin: 0; line-height: 1.6; color: var(--wp--preset--color--body); }

/* Apply band: dark, glows, the form card left and "Prefer to talk?" right. */
.as-ptapply {
	position: relative;
	overflow: clip; /* clip, unlike hidden, keeps the sticky "Prefer to talk?" panel working */
	isolation: isolate;
	background:
		radial-gradient(700px circle at 0% 0%, rgba(239, 152, 32, 0.25), transparent 60%),
		radial-gradient(600px circle at 100% 100%, rgba(223, 34, 41, 0.25), transparent 60%),
		var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.78);
}

.as-ptapply::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: radial-gradient(70% 80% at 40% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 80% at 40% 50%, #000 30%, transparent 100%); }
/* Heading across the top; the form card and "Prefer to talk?" side by side below it, both aligned to the top. */
.as-ptapply__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); align-items: start; column-gap: clamp(1.5rem, 4vw, 3rem); }
.as-ptapply__main { grid-column: 1 / -1; }

/* "Prefer to talk?" slides along beside the form while the visitor scrolls (like the About page's founder card). */
.as-ptapply__talk { position: sticky; inset-block-start: calc(var(--as-header-h) + 2rem); }
.admin-bar .as-ptapply__talk { inset-block-start: calc(var(--as-header-h) + 32px + 2rem); }
.as-ptapply__main .as-eyebrow { color: var(--wp--preset--color--orange); }
.as-ptapply__main h2 { margin: 0.4rem 0 0.75rem; color: var(--wp--preset--color--white); }
.as-ptapply__lead { max-inline-size: 40rem; margin: 0 0 1.75rem; font-size: 1.0625rem; line-height: 1.65; }
/* The form card: dark glass with a gradient edge and a warm glow, so it belongs to the band instead of a white box. */
.as-ptapply__card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	border: 1px solid transparent;
	border-radius: 28px;
	background: linear-gradient(160deg, rgba(40, 46, 46, 0.92), rgba(24, 30, 30, 0.96)) padding-box, linear-gradient(135deg, rgba(237, 135, 35, 0.8), rgba(255, 255, 255, 0.08) 45%, rgba(221, 34, 40, 0.7)) border-box;
	box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.8);
}

.as-ptapply__card::before { content: ""; position: absolute; inset: -40% -20% auto auto; z-index: -1; inline-size: 360px; block-size: 360px; border-radius: 50%; background: radial-gradient(closest-side, rgba(239, 152, 32, 0.25), transparent); }
.as-ptapply__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.as-ptapply__chips li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.8125rem; font-weight: 700; color: var(--wp--preset--color--white); }
.as-ptapply__chips li::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--wp--preset--gradient--brand); }

/* Form fields on the dark card: translucent fields, light labels, warm focus ring. */
.as-ptform { display: grid; gap: 1rem; }
.as-ptform__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.as-ptform label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.875rem; font-weight: 600; color: rgba(255, 255, 255, 0.88); }
.as-ptform abbr { margin-inline-start: 0.15rem; color: var(--wp--preset--color--orange); text-decoration: none; }

.as-ptform :is(input, select, textarea) {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 50px;
	padding: 0.75rem 1rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	font: inherit;
	font-size: 1rem;
	font-weight: 400;
	color: var(--wp--preset--color--white);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.as-ptform ::placeholder { color: rgba(255, 255, 255, 0.4); }
.as-ptform textarea { min-block-size: 120px; resize: vertical; }
.as-ptform select { appearance: none; padding-inline-end: 2.75rem; background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.7) 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.7) 50%, transparent 50%); background-position: calc(100% - 1.4rem) 50%, calc(100% - 1.05rem) 50%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
.as-ptform select option { color: var(--wp--preset--color--title); }
.as-ptform :is(input, select, textarea):hover { border-color: rgba(255, 255, 255, 0.3); }
.as-ptform :is(input, select, textarea):focus { outline: none; background-color: rgba(255, 255, 255, 0.1); border-color: var(--wp--preset--color--orange); box-shadow: 0 0 0 4px rgba(239, 152, 32, 0.22); }
.as-ptform :is(input, textarea):user-invalid { border-color: #FF6B5E; box-shadow: 0 0 0 4px rgba(255, 107, 94, 0.18); }
.as-ptform__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-block-start: 0.25rem; }
.as-ptform__consent { flex: 1 1 18rem; margin: 0; font-size: 0.8125rem; line-height: 1.5; color: rgba(255, 255, 255, 0.62); }
.as-ptform__consent a { color: var(--wp--preset--color--white); }
.as-ptform .as-btn { gap: 0.45rem; border: 0; cursor: pointer; font: inherit; font-weight: 700; }

/* Thank-you card after Zoho sends the applicant back (?applied=1). */
.as-ptapply__done p { margin: 0; line-height: 1.6; }
.as-ptapply__done .as-ptapply__done-title { margin-block: 1rem 0.4rem; font-size: 1.25rem; font-weight: 700; color: var(--wp--preset--color--white); }
.as-ptapply__done a { color: var(--wp--preset--color--white); }
.as-ptapply__talk { padding: clamp(1.5rem, 3vw, 2rem); border-radius: 24px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.as-ptapply__talk h3 { margin: 0; font-size: 1.375rem; color: var(--wp--preset--color--white); }
.as-ptapply__talk > p { margin: 0.25rem 0 1.25rem; }
.as-ptapply__talk ul { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.as-ptapply__talk a { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0.85rem; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); font-weight: 700; color: var(--wp--preset--color--white); text-decoration: none; transition: background 0.25s ease, border-color 0.25s ease; }
.as-ptapply__talk a:is(:hover, :focus-visible) { background: rgba(255, 255, 255, 0.12); border-color: rgba(239, 152, 32, 0.6); }
.as-ptapply__talk small { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.as-ptapply__icon { display: grid; flex: none; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); }

@media (max-width: 1024px) {
	.as-pthero__inner, .as-ptben__inner, .as-ptapply__inner { grid-template-columns: minmax(0, 1fr); }
	.as-ptapply__inner { row-gap: 1.5rem; }
	.as-ptapply__talk { position: static; }
	.as-ptwho__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-ptprog__grid { grid-template-columns: minmax(0, 1fr); max-inline-size: 640px; margin-inline: auto; }
	.as-ptprog__note { border-radius: 20px; }
	.as-ptsteps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
	.as-ptsteps__list::before { display: none; }
}

@media (max-width: 760px) {
	/* Phones: the compare table becomes one card per row, each value labelled with its programme. */
	.as-ptcompare__wrap { padding: 0; background: none; border: 0; box-shadow: none; }
	.as-ptcompare__table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.as-ptcompare__table { margin-inline: 0; inline-size: 100%; border-spacing: 0; }
	.as-ptcompare__table, .as-ptcompare__table tbody, .as-ptcompare__table tr, .as-ptcompare__table th, .as-ptcompare__table td { display: block; }
	.as-ptcompare__table tr { margin-block-end: 1rem; overflow: hidden; border-radius: 22px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.22); box-shadow: 0 24px 50px -36px rgba(19, 26, 26, 0.4); }
	.as-ptcompare__table tbody th { display: flex; align-items: center; gap: 0.75rem; inline-size: auto; padding: 0.9rem 1.25rem; background: var(--wp--preset--color--white); }
	.as-ptcompare__rowicon { margin: 0; }
	.as-ptcompare__table td { border-block-end: 0; border-inline-start: 5px solid var(--pt-b); }
	.as-ptcompare__table tbody tr:last-child td { border-radius: 0; box-shadow: none; }
	.as-ptcompare__table td::before { content: attr(data-label); display: block; margin-block-end: 0.15rem; font-size: 0.75rem; font-weight: 700; color: var(--pt-ink); }
}

@media (max-width: 600px) {
	.as-ptwho__grid, .as-ptben__grid, .as-ptsteps__list, .as-ptform__row { grid-template-columns: minmax(0, 1fr); }
	.as-ptstack--2, .as-ptstack--3 { margin-inline-start: 0; }
	.as-ptlogos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-ptlogo { block-size: 92px; padding: 1rem; }
	.as-ptlogo img { max-block-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.as-ptwho__tile:hover, .as-ptlogo:hover, .as-ptcard__cta:is(:hover, :focus-visible) span { transform: none; }
}

/* ---------- Pricing (templates/page-pricing.html, patterns pricing-*.php, data inc/pricing.php + inc/pricing-table.json) ----------
 * Section: How AutoSmart Audit is priced: warm hero, four plan cards with one quote bar under them, what every plan
 * includes, the full comparison table with tips, logo strip, pricing FAQ, CTA.
 * SEO: One H1 on AutoSmart Audit pricing; H2 per section, H3 per plan and included item; a semantic comparison table; WebPage + FAQPage.
 */

/* No sideways scroll on phones from the decorative glows (clip keeps the sticky table header working). */
.as-pricing { overflow-x: clip; }

/* Hero: warm glows and grid texture, centred; extra room at the bottom for the plan cards to overlap. */
.as-prhero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--50) clamp(7rem, 12vw, 9rem);
	background:
		radial-gradient(40% 60% at 50% 20%, rgba(239, 152, 32, 0.3), transparent 70%),
		radial-gradient(30% 50% at 100% 100%, rgba(223, 34, 41, 0.1), transparent 70%),
		radial-gradient(30% 50% at 0% 100%, rgba(239, 152, 32, 0.12), transparent 70%),
		var(--wp--preset--color--cream);
	text-align: center;
}

.as-prhero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px;
	-webkit-mask-image: radial-gradient(60% 80% at 50% 40%, #000 25%, transparent 100%);
	mask-image: radial-gradient(60% 80% at 50% 40%, #000 25%, transparent 100%);
}

.as-prhero__inner { max-inline-size: 52rem; margin-inline: auto; }
.as-prhero .as-crumbs { margin-block-end: 1.25rem; }
.as-prhero .as-crumbs ol { justify-content: center; }
.as-prhero__title { margin: 0.75rem auto 1.25rem; font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem); line-height: 1.04; letter-spacing: -0.03em; }
.as-prhero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.as-prhero__chips li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem 0.5rem 0.6rem; border-radius: 999px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.25); box-shadow: 0 14px 30px -20px rgba(223, 34, 41, 0.5); font-size: 0.9375rem; font-weight: 700; color: var(--wp--preset--color--title); }
.as-prhero__chips svg { inline-size: 26px; block-size: 26px; padding: 4px; border-radius: 50%; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); box-sizing: border-box; }
.as-prhero__lead { max-inline-size: 38rem; margin: 0 auto; font-size: 1.125rem; line-height: 1.65; color: var(--wp--preset--color--body); }

/* Plans: four equal cards pulled up over the hero; the AI plan is a dark card with a glow. */
.as-prplans { position: relative; z-index: 1; margin-block-start: clamp(-6rem, -9vw, -4.5rem); padding-block-end: var(--wp--preset--spacing--60); }
.as-prplans__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }

.as-prplan {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border-radius: 28px;
	background: radial-gradient(260px circle at 100% 0%, rgba(239, 152, 32, 0.12), transparent 65%), var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.22);
	box-shadow: 0 40px 70px -50px rgba(19, 26, 26, 0.55);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.as-prplan::before { content: ""; position: absolute; inset: 0 0 auto; block-size: 5px; background: var(--wp--preset--gradient--brand); }
.as-prplan:hover { transform: translateY(-6px); border-color: rgba(237, 135, 35, 0.5); box-shadow: 0 50px 80px -50px rgba(223, 34, 41, 0.55); }
.as-prplan__icon { display: grid; place-items: center; inline-size: 54px; block-size: 54px; margin-block-end: 1.1rem; border-radius: 17px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); box-shadow: 0 16px 30px -14px rgba(223, 34, 41, 0.6); }
.as-prplan__name { margin: 0; font-size: 1.75rem; letter-spacing: -0.02em; }
.as-prplan__for { min-block-size: 3em; margin: 0.35rem 0 1.25rem; line-height: 1.5; color: var(--wp--preset--color--body); }
.as-prplan__builds { margin: 0 0 0.75rem; padding-block-start: 1.1rem; border-block-start: 1px solid rgba(237, 135, 35, 0.2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--orange-red); }
.as-prplan__list { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.as-prplan__list li { position: relative; padding-inline-start: 1.75rem; line-height: 1.45; color: var(--wp--preset--color--title); }
.as-prplan__list li::before { content: ""; position: absolute; inset-block-start: 0.1rem; inset-inline-start: 0; inline-size: 18px; block-size: 18px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.3 5.1 8.4 9.2 3.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat, var(--wp--preset--gradient--brand); }

/* The AI plan: dark ink with a warm glow and grid texture. */
.as-prplan--ai { background: radial-gradient(320px circle at 100% 0%, rgba(239, 152, 32, 0.35), transparent 65%), linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px, var(--wp--preset--color--ink); border-color: rgba(239, 152, 32, 0.45); }
.as-prplan--ai .as-prplan__name, .as-prplan--ai .as-prplan__list li { color: var(--wp--preset--color--white); }
.as-prplan--ai .as-prplan__for { color: rgba(255, 255, 255, 0.72); }
.as-prplan--ai .as-prplan__builds { color: var(--wp--preset--color--orange); border-color: rgba(255, 255, 255, 0.14); }

/* The one quote bar under the plans: dark, glowing, text left and the single "Get a quote" right. */
.as-prquote {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	margin-block-start: 1.5rem;
	padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 3rem);
	border-radius: 28px;
	background: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px, var(--wp--preset--color--ink);
	box-shadow: 0 40px 80px -45px rgba(19, 26, 26, 0.75);
	color: rgba(255, 255, 255, 0.75);
}

.as-prquote__glow { position: absolute; inset: -60% auto auto -10%; z-index: -1; inline-size: 420px; block-size: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(239, 152, 32, 0.4), transparent); }
.as-prquote__text { flex: 1 1 28rem; }
.as-prquote__text p { margin: 0; line-height: 1.6; }
.as-prquote .as-prquote__title { margin-block-end: 0.35rem; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); font-weight: 800; letter-spacing: -0.02em; color: var(--wp--preset--color--white); }
.as-prquote__btn { gap: 0.45rem; padding-inline: 2rem; }

/* Every plan includes: six tiles on a warm band, icon left. */
.as-princ { background: radial-gradient(rgba(237, 135, 35, 0.2) 1.2px, transparent 1.4px) 0 0 / 22px 22px, var(--wp--preset--color--cream); }
.as-princ__head { margin: 0 auto clamp(2rem, 4vw, 2.75rem); text-align: center; }
.as-princ__head h2 { margin: 0.4rem 0 0; }
.as-princ__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.as-princ__tile { display: flex; align-items: flex-start; gap: 1rem; padding: 1.35rem 1.5rem; border-radius: 22px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.2); box-shadow: 0 24px 50px -38px rgba(19, 26, 26, 0.45); }
.as-princ__icon { display: grid; flex: none; place-items: center; inline-size: 46px; block-size: 46px; border-radius: 14px; background: linear-gradient(135deg, #FFF1DF, #FFE3D6); color: var(--wp--preset--color--orange-red); }
.as-princ__tile h3 { margin: 0 0 0.25rem; font-size: 1.0625rem; }
.as-princ__tile p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--wp--preset--color--body); }

/* Compare plans: a white card holding the table; plan names stick under the header while scrolling. */
.as-prcompare__head { max-inline-size: 44rem; margin: 0 auto clamp(1.75rem, 3vw, 2.5rem); text-align: center; }
.as-prcompare__head h2 { margin: 0.4rem 0 0.75rem; }
.as-prcompare__head p:last-child { margin: 0; color: var(--wp--preset--color--body); }
.as-prcompare__swipe { display: none; margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 700; text-align: end; color: var(--wp--preset--color--orange-red); }
.as-prcompare__wrap { border-radius: 28px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.22); box-shadow: 0 50px 90px -60px rgba(19, 26, 26, 0.55); overflow: clip; }
.as-prtable { inline-size: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 0.9375rem; }
.as-prtable :is(th, td) { padding: 0.8rem 1rem; border-block-end: 1px solid #F3ECE3; text-align: center; vertical-align: middle; }
.as-prtable thead th { position: sticky; inset-block-start: var(--as-header-h); z-index: 2; padding-block: 1.1rem; background: rgba(255, 255, 255, 0.96); border-block-end: 2px solid rgba(237, 135, 35, 0.3); font-size: 1.0625rem; font-weight: 800; color: var(--wp--preset--color--title); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.admin-bar .as-prtable thead th { inset-block-start: calc(var(--as-header-h) + 32px); }
.as-prtable thead .as-prtable__corner { inline-size: 34%; text-align: start; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.as-prtable__icon { display: grid; place-items: center; inline-size: 36px; block-size: 36px; margin: 0 auto 0.4rem; border-radius: 12px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); }
.as-prtable__icon svg { inline-size: 20px; block-size: 20px; }
.as-prtable__plan--ai .as-prtable__icon { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--orange); }
.as-prtable__group th { padding-block: 0.7rem; background: #FFF6EA; text-align: start; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--orange-red); }
.as-prtable tbody th[scope="row"] { text-align: start; font-weight: 600; color: var(--wp--preset--color--title); }
.as-prtable tbody tr:not(.as-prtable__group):hover :is(th, td) { background: #FFFBF6; }
.as-prtable__feature { display: inline-flex; align-items: center; gap: 0.4rem; }
.as-prtable__tick { display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); box-shadow: 0 6px 14px -6px rgba(223, 34, 41, 0.6); }
.as-prtable__dash { color: #CFC6BC; font-weight: 700; }
.as-prtable tbody:last-child tr:last-child :is(th, td) { border-block-end: 0; }

/* Feature tips: a small "i" that opens a dark bubble on hover or keyboard focus. */
.as-prtip { position: relative; display: inline-grid; cursor: help; border-radius: 50%; }
.as-prtip:focus-visible { outline: 2px solid var(--wp--preset--color--orange); outline-offset: 2px; }
.as-prtip__dot { display: inline-grid; place-items: center; inline-size: 16px; block-size: 16px; border-radius: 50%; background: #F1E8DD; font-size: 0.6875rem; font-weight: 800; font-style: italic; color: var(--wp--preset--color--muted); }
.as-prtip__box { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; z-index: 3; inline-size: max-content; max-inline-size: 260px; padding: 0.6rem 0.75rem; border-radius: 12px; background: var(--wp--preset--color--ink); box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.6); font-size: 0.8125rem; font-weight: 400; line-height: 1.45; text-align: start; color: var(--wp--preset--color--white); opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; pointer-events: none; }
.as-prtip:is(:hover, :focus) .as-prtip__box { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.as-prtip:is(:hover, :focus) .as-prtip__dot { background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); }

@media (max-width: 1100px) {
	.as-prplans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-princ__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	/* Phones: the table scrolls sideways inside its card with the feature column fixed; the header row no longer sticks. */
	.as-prcompare__wrap { overflow-x: auto; }
	.as-prcompare__swipe { display: block; }
	.as-prtable { min-inline-size: 620px; table-layout: auto; }
	.as-prtable thead th { position: static; }
	.as-prtable thead .as-prtable__corner, .as-prtable tbody th[scope="row"] { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--wp--preset--color--white); box-shadow: 6px 0 10px -8px rgba(19, 26, 26, 0.25); }
	.as-prtable thead .as-prtable__corner { inline-size: 40%; }
	.as-prtip__box { inset-inline-start: 0; transform: translate(0, 4px); }
	.as-prtip:is(:hover, :focus) .as-prtip__box { transform: translate(0, 0); }
}

@media (max-width: 600px) {
	.as-prplans__grid, .as-princ__grid { grid-template-columns: minmax(0, 1fr); }
	.as-prplan__for { min-block-size: 0; }
	.as-prquote__btn { inline-size: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.as-prplan:hover { transform: none; }
}

/* ---------- 404 page (templates/404.html, patterns/notfound.php) ----------
 * Section: Page not found: a big gradient 404 with a playful "audit result" card, article search, home link, and six
 * tiles to the main sections.
 * SEO: Real 404 status and noindex; one H1; plain internal links to the hubs.
 */

/* No sideways scroll from the decorative glows. */
.as-notfound { overflow-x: clip; }

/* Hero: warm glows and grid texture, centred. */
.as-nfhero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	background:
		radial-gradient(40% 60% at 50% 30%, rgba(239, 152, 32, 0.32), transparent 70%),
		radial-gradient(30% 50% at 100% 100%, rgba(223, 34, 41, 0.1), transparent 70%),
		var(--wp--preset--color--cream);
	text-align: center;
}

.as-nfhero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px;
	-webkit-mask-image: radial-gradient(60% 80% at 50% 40%, #000 25%, transparent 100%);
	mask-image: radial-gradient(60% 80% at 50% 40%, #000 25%, transparent 100%);
}

.as-nfhero__inner { max-inline-size: 46rem; margin-inline: auto; }

/* The big 404 with the audit card floating over its right side. */
.as-nfhero__code { position: relative; display: inline-block; margin-block-end: 1rem; }
.as-nfhero__num { display: block; font-size: clamp(7rem, 4rem + 14vw, 13rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.06em; background: var(--wp--preset--gradient--brand); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 30px 40px rgba(223, 34, 41, 0.25)); }

.as-nfhero__card {
	position: absolute;
	inset-block-end: -1.25rem;
	inset-inline-end: -14.5rem;
	inline-size: 220px;
	padding: 0.9rem 1rem;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(237, 135, 35, 0.25);
	box-shadow: 0 30px 60px -30px rgba(19, 26, 26, 0.5);
	text-align: start;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.as-nfhero__card p { margin: 0; }
.as-nfhero__card-title { margin-block-end: 0.5rem !important; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--orange-red); }
.as-nfhero__row { display: flex; justify-content: space-between; gap: 0.75rem; padding-block: 0.35rem; border-block-start: 1px dashed rgba(237, 135, 35, 0.3); font-size: 0.8125rem; color: var(--wp--preset--color--body); }
.as-nfhero__row b { color: var(--wp--preset--color--title); text-align: end; }
.as-nfhero__row .is-fail { padding: 0.05rem 0.55rem; border-radius: 999px; background: #FDE4E2; color: #B3161C; }

.as-nfhero__title { margin: 0.5rem 0 1rem; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.08; letter-spacing: -0.03em; }
.as-nfhero__lead { max-inline-size: 36rem; margin: 0 auto 1.75rem; font-size: 1.125rem; line-height: 1.65; color: var(--wp--preset--color--body); }

/* Article search: a pill-shaped field with the button inside. */
.as-nfhero__search { display: flex; gap: 0.5rem; max-inline-size: 32rem; margin: 0 auto 1.25rem; padding: 0.4rem; border-radius: 999px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.3); box-shadow: 0 20px 40px -26px rgba(223, 34, 41, 0.5); }
.as-nfhero__search input { flex: 1; min-inline-size: 0; padding: 0.6rem 1rem; border: 0; background: none; font: inherit; font-size: 1rem; color: var(--wp--preset--color--title); }
.as-nfhero__search input:focus { outline: none; }
.as-nfhero__search:focus-within { border-color: var(--wp--preset--color--orange); box-shadow: 0 0 0 4px rgba(239, 152, 32, 0.18); }
.as-nfhero__search .as-btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.as-nfhero__home { font-weight: 700; color: var(--wp--preset--color--orange-red); text-decoration: none; }
.as-nfhero__home:is(:hover, :focus-visible) { text-decoration: underline; }

/* Popular places: six link tiles, the gradient border shows on hover. */
.as-nfplaces__head { margin: 0 auto clamp(2rem, 4vw, 2.75rem); text-align: center; }
.as-nfplaces__head h2 { margin: 0.4rem 0 0; }
.as-nfplaces__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.as-nfplaces__grid li { display: flex; }

.as-nfplace {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 22px;
	background: linear-gradient(var(--wp--preset--color--white), var(--wp--preset--color--white)) padding-box, linear-gradient(rgba(237, 135, 35, 0.25), rgba(237, 135, 35, 0.25)) border-box;
	box-shadow: 0 24px 50px -38px rgba(19, 26, 26, 0.45);
	color: var(--wp--preset--color--body);
	text-decoration: none;
	transition: transform 0.25s ease, background 0.25s ease;
}

.as-nfplace:is(:hover, :focus-visible) { transform: translateY(-3px); background: radial-gradient(260px circle at 100% 0%, rgba(239, 152, 32, 0.12), transparent 60%) padding-box, linear-gradient(var(--wp--preset--color--white), var(--wp--preset--color--white)) padding-box, var(--wp--preset--gradient--brand) border-box; }
.as-nfplace__icon { display: grid; flex: none; place-items: center; inline-size: 50px; block-size: 50px; border-radius: 16px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); box-shadow: 0 14px 28px -12px rgba(223, 34, 41, 0.55); }
.as-nfplace__text { display: flex; flex: 1; flex-direction: column; gap: 0.15rem; font-size: 0.9375rem; line-height: 1.45; }
.as-nfplace__text strong { font-size: 1.0625rem; color: var(--wp--preset--color--title); }
.as-nfplace__go { font-size: 1.25rem; color: var(--wp--preset--color--orange-red); transition: transform 0.2s ease; }
.as-nfplace:is(:hover, :focus-visible) .as-nfplace__go { transform: translateX(4px); }

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

@media (max-width: 760px) {
	/* Phones: the audit card sits under the 404 instead of beside it. */
	.as-nfhero__card { position: relative; inset: auto; margin: -0.5rem auto 0; }
}

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

@media (prefers-reduced-motion: reduce) {
	.as-nfplace:is(:hover, :focus-visible), .as-nfplace:is(:hover, :focus-visible) .as-nfplace__go { transform: none; }
}

/* ---------- Code of Conduct and Ethics (templates/page-ethics.html, patterns ethics-*.php, text content/legal/ethics.md) ----------
 * Section: The Code as a readable document: warm hero, nine principle tiles, the legal-page text column with "Our
 * principle" highlights, "In practice" boxes and law chips, a dark "Report a concern" card, related pages; prints cleanly.
 * SEO: One H1; H2 per section with anchors for the contents list and the tiles; WebPage published by the Organization.
 */

/* No sideways scroll from the decorative glows. */
.as-code { overflow-x: clip; }

/* Hero: warm glows and grid texture; text left, a "9 principles" seal card right. */
.as-codehero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	background:
		radial-gradient(45% 60% at 85% 35%, rgba(239, 152, 32, 0.26), transparent 70%),
		radial-gradient(35% 50% at 0% 100%, rgba(223, 34, 41, 0.07), transparent 70%),
		var(--wp--preset--color--cream);
}

.as-codehero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px;
	-webkit-mask-image: radial-gradient(70% 80% at 60% 40%, #000 25%, transparent 100%);
	mask-image: radial-gradient(70% 80% at 60% 40%, #000 25%, transparent 100%);
}

.as-codehero__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); align-items: center; gap: var(--wp--preset--spacing--60); }
.as-codehero .as-crumbs { margin-block-end: 1rem; }
.as-codehero__title { max-inline-size: 17ch; margin: 0.75rem 0 1rem; font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem); line-height: 1.05; letter-spacing: -0.03em; }
.as-codehero__lead { max-inline-size: 38rem; margin: 0 0 1.5rem; font-size: 1.125rem; line-height: 1.65; color: var(--wp--preset--color--body); }
.as-codehero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; font-weight: 600; color: var(--wp--preset--color--body); }
.as-codehero__meta li { display: inline-flex; align-items: center; gap: 0.45rem; }
.as-codehero__meta svg { inline-size: 18px; block-size: 18px; color: var(--wp--preset--color--orange-red); }
.as-codehero__print { gap: 0.45rem; cursor: pointer; font: inherit; font-weight: 700; }
.as-codehero__print[hidden] { display: none; }

.as-codehero__seal { position: relative; justify-self: center; inline-size: min(100%, 340px); padding: 1.75rem; border-radius: 28px; background: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px, var(--wp--preset--color--ink); box-shadow: 0 40px 80px -40px rgba(19, 26, 26, 0.7), 0 0 0 10px rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.72); }
.as-codehero__seal p { margin: 0; font-size: 0.875rem; line-height: 1.7; }
.as-codehero__seal-icon { display: grid; place-items: center; inline-size: 60px; block-size: 60px; margin-block-end: 1rem; border-radius: 18px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); box-shadow: 0 16px 30px -12px rgba(223, 34, 41, 0.7); }
.as-codehero__seal .as-codehero__seal-title { margin-block-end: 0.4rem; font-size: 1.5rem; font-weight: 800; color: var(--wp--preset--color--white); }

/* At a glance: nine numbered principle tiles that jump to their section. */
.as-codeglance { background: var(--wp--preset--color--white); padding-block-end: 0; }
.as-codeglance__head { margin: 0 auto clamp(1.75rem, 3vw, 2.5rem); text-align: center; }
.as-codeglance__head h2 { margin: 0.4rem 0 0; }
.as-codeglance__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.as-codeglance__grid li { display: flex; }

.as-codetile {
	position: relative;
	display: grid;
	flex: 1;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 1rem;
	padding: 1.25rem 1.35rem;
	border: 1px solid transparent;
	border-radius: 22px;
	background: linear-gradient(var(--wp--preset--color--white), var(--wp--preset--color--white)) padding-box, linear-gradient(rgba(237, 135, 35, 0.22), rgba(237, 135, 35, 0.22)) border-box;
	box-shadow: 0 24px 50px -40px rgba(19, 26, 26, 0.45);
	color: var(--wp--preset--color--body);
	text-decoration: none;
	transition: transform 0.25s ease, background 0.25s ease;
}

.as-codetile:is(:hover, :focus-visible) { transform: translateY(-3px); background: radial-gradient(240px circle at 100% 0%, rgba(239, 152, 32, 0.12), transparent 60%) padding-box, linear-gradient(var(--wp--preset--color--white), var(--wp--preset--color--white)) padding-box, var(--wp--preset--gradient--brand) border-box; }
.as-codetile__icon { grid-row: 1 / 3; display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 15px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); box-shadow: 0 12px 24px -12px rgba(223, 34, 41, 0.6); }
.as-codetile__num { position: absolute; inset-block-start: 0.9rem; inset-inline-end: 1.1rem; font-size: 1.5rem; font-weight: 800; line-height: 1; color: rgba(237, 135, 35, 0.2); }
.as-codetile h3 { margin: 0.1rem 2rem 0.2rem 0; font-size: 1.0625rem; }
.as-codetile p { margin: 0; font-size: 0.875rem; line-height: 1.5; }

/* The Code: the legal-page layout plus its own pieces. The meta line is in the hero on screen (kept for print). */
.as-code__wrap { background: var(--wp--preset--color--white); }
.as-code__body > .as-legal__meta { display: none; }
.as-code__body > h2 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); padding-block-start: 1.75rem; border-block-start: 1px solid rgba(237, 135, 35, 0.2); }
.as-code__body > h2:first-of-type { padding-block-start: 0; border: 0; }
.as-code__body .as-legal__toc a[aria-current] { color: var(--wp--preset--color--orange-red); font-weight: 700; }
.as-code__body .as-legal__toc a { border-inline-start: 2px solid transparent; padding-inline-start: 0.6rem; margin-inline-start: -0.6rem; }
.as-code__body .as-legal__toc a[aria-current] { border-color: var(--wp--preset--color--orange-red); }

.as-code__body > .as-code__principle {
	position: relative;
	padding: 1.1rem 1.25rem 1.1rem 1.5rem;
	border-radius: 16px;
	background: radial-gradient(260px circle at 100% 0%, rgba(239, 152, 32, 0.16), transparent 65%), #FFF6EA;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.55;
	color: var(--wp--preset--color--title);
}

.as-code__body > .as-code__principle::before { content: ""; position: absolute; inset-block: 0.9rem; inset-inline-start: 0; inline-size: 4px; border-radius: 4px; background: var(--wp--preset--gradient--brand); }
.as-code__principle strong { display: block; margin-block-end: 0.25rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--orange-red); }

.as-code__body > .as-code__example { padding: 1rem 1.25rem; border-radius: 16px; background: var(--wp--preset--color--white); border: 1px dashed rgba(237, 135, 35, 0.5); box-shadow: 0 16px 34px -28px rgba(19, 26, 26, 0.45); line-height: 1.65; }
.as-code__example strong { display: inline-flex; align-items: center; gap: 0.4rem; margin-inline-end: 0.35rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--wp--preset--color--ink); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--wp--preset--color--white); }

.as-code__body > .as-code__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-end: 1rem; padding: 0; list-style: none; }
.as-code__chips li { margin: 0; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--wp--preset--color--cream); border: 1px solid rgba(237, 135, 35, 0.3); font-size: 0.8125rem; font-weight: 700; color: #9A4A0B; }

/* Report a concern: dark card with glow, text and the email button. */
.as-codereport__card { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.5rem 2rem; padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: 32px; background: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 32px 32px, var(--wp--preset--color--ink); box-shadow: 0 50px 90px -50px rgba(19, 26, 26, 0.75); color: rgba(255, 255, 255, 0.75); }
.as-codereport__glow { position: absolute; inset: -50% -10% auto auto; z-index: -1; inline-size: 420px; block-size: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(239, 152, 32, 0.4), transparent); }
.as-codereport__icon { display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 20px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); box-shadow: 0 18px 34px -14px rgba(223, 34, 41, 0.7); }
.as-codereport__eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--orange); }
.as-codereport__text h2 { margin: 0.3rem 0 0.6rem; color: var(--wp--preset--color--white); }
.as-codereport__text p { margin: 0; max-inline-size: 44rem; line-height: 1.65; }
.as-codereport__points { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.as-codereport__points li { padding: 0.3rem 0.8rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.8125rem; font-weight: 700; color: var(--wp--preset--color--white); }
.as-codereport__btn { gap: 0.5rem; white-space: nowrap; }
.as-codereport__btn svg { inline-size: 20px; block-size: 20px; }

/* Related pages: three link cards. */
.as-codeset { background: radial-gradient(rgba(237, 135, 35, 0.2) 1.2px, transparent 1.4px) 0 0 / 22px 22px, var(--wp--preset--color--cream); }
.as-codeset__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.as-codeset__grid li { display: flex; }
.as-codeset__card { display: flex; flex: 1; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; border-radius: 22px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.2); box-shadow: 0 24px 50px -38px rgba(19, 26, 26, 0.45); color: var(--wp--preset--color--body); text-decoration: none; transition: transform 0.25s ease, border-color 0.25s ease; }
.as-codeset__card:is(:hover, :focus-visible) { transform: translateY(-3px); border-color: rgba(237, 135, 35, 0.5); }
.as-codeset__icon { display: grid; flex: none; place-items: center; inline-size: 46px; block-size: 46px; border-radius: 14px; background: linear-gradient(135deg, #FFF1DF, #FFE3D6); color: var(--wp--preset--color--orange-red); }
.as-codeset__text { flex: 1; font-size: 0.9375rem; line-height: 1.5; }
.as-codeset__text h3 { margin: 0 0 0.2rem; font-size: 1.0625rem; }
.as-codeset__go { font-size: 1.25rem; color: var(--wp--preset--color--orange-red); }

@media (max-width: 1024px) {
	.as-codehero__inner { grid-template-columns: minmax(0, 1fr); }
	.as-codehero__seal { justify-self: start; }
	.as-codeglance__grid, .as-codeset__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-codereport__card { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
	.as-codeglance__grid, .as-codeset__grid { grid-template-columns: minmax(0, 1fr); }
	.as-codereport__btn { white-space: normal; }
}

/* Print / "Save as PDF": just the Code, in black on white, with its date. */
@media print {
	.as-site-header, footer, .as-codehero__seal, .as-codehero__meta, .as-codehero .as-pill, .as-crumbs, .as-codeglance, .as-codereport, .as-codeset, .as-legal__toc { display: none !important; }
	.as-codehero { padding: 0 0 1rem; background: none; }
	.as-codehero::before { display: none; }
	.as-codehero__inner { display: block; }
	.as-code__body { display: block; }
	.as-code__body > * { max-inline-size: none; }
	.as-code__body > .as-legal__meta { display: block; }
	.as-code__body > .as-code__principle, .as-code__body > .as-code__example { background: none; border: 1px solid #999; box-shadow: none; break-inside: avoid; }
	.as-code__example strong { background: none; color: #000; padding: 0; }
	.as-grad { -webkit-text-fill-color: currentColor; background: none; color: #000; }
}

@media (prefers-reduced-motion: reduce) {
	.as-codetile:is(:hover, :focus-visible), .as-codeset__card:is(:hover, :focus-visible) { transform: none; }
}

/* ---------- Book a demo (templates/page-book-a-demo.html, patterns demo-*.php, data inc/demo.php) ----------
 * Section: The conversion page: warm split hero with the Zoho Bookings card, logo strip, demo steps, dark customer
 * quotes, questions before booking. The header's own "Book a Demo" button is hidden here.
 * SEO: One H1 on the AutoSmart Audit demo; H2 per section; FAQPage; the booking iframe loads lazily.
 */

/* The header button would link to this same page. */
.as-on-demo .as-header__cta { visibility: hidden; }
.as-demo { overflow-x: clip; }

/* Hero: warm glows and grid texture; text left, the booking card right. */
.as-dmhero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	background:
		radial-gradient(45% 60% at 80% 40%, rgba(239, 152, 32, 0.3), transparent 70%),
		radial-gradient(35% 50% at 0% 100%, rgba(223, 34, 41, 0.08), transparent 70%),
		var(--wp--preset--color--cream);
}

.as-dmhero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px;
	-webkit-mask-image: radial-gradient(70% 80% at 60% 40%, #000 25%, transparent 100%);
	mask-image: radial-gradient(70% 80% at 60% 40%, #000 25%, transparent 100%);
}

.as-dmhero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--wp--preset--spacing--60); }
.as-dmhero .as-crumbs { margin-block-end: 1rem; }
.as-dmhero__title { max-inline-size: 14ch; margin: 0.75rem 0 1rem; font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; }
.as-dmhero__lead { max-inline-size: 34rem; margin: 0 0 1.75rem; font-size: 1.1875rem; line-height: 1.65; color: var(--wp--preset--color--body); }
.as-dmhero__agenda-title { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--orange-red); }
.as-dmhero__agenda { display: grid; gap: 0.65rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.as-dmhero__agenda li { position: relative; padding-inline-start: 2rem; font-size: 1.0625rem; line-height: 1.5; color: var(--wp--preset--color--title); }
.as-dmhero__agenda li::before { content: ""; position: absolute; inset-block-start: 0.1rem; inset-inline-start: 0; inline-size: 22px; block-size: 22px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.3 5.1 8.4 9.2 3.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat, var(--wp--preset--gradient--brand); box-shadow: 0 6px 14px -6px rgba(223, 34, 41, 0.6); }
.as-dmhero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.as-dmhero__proof p { margin: 0; font-size: 0.9375rem; color: var(--wp--preset--color--body); }
.as-dmhero__faces { display: flex; }
.as-dmhero__faces span { display: grid; place-items: center; inline-size: 40px; block-size: 40px; margin-inline-start: -10px; border-radius: 50%; border: 3px solid var(--wp--preset--color--cream); background: var(--wp--preset--gradient--brand); font-size: 0.75rem; font-weight: 800; color: var(--wp--preset--color--white); }
.as-dmhero__faces span:first-child { margin-inline-start: 0; }
.as-dmhero__faces span { overflow: hidden; }
.as-dmhero__faces img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Booking card: white, glowing ring; the Zoho Bookings calendar or its empty slot. */
.as-dmbook {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: 30px;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.25);
	box-shadow: 0 50px 90px -50px rgba(223, 34, 41, 0.55), 0 0 0 10px rgba(255, 255, 255, 0.55);
	scroll-margin-block-start: calc(var(--as-header-h) + 1.5rem);
}

.as-dmbook::before { content: ""; position: absolute; inset: 0 0 auto; block-size: 5px; background: var(--wp--preset--gradient--brand); }
.as-dmbook__glow { position: absolute; inset: -30% -30% auto auto; z-index: -1; inline-size: 300px; block-size: 300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(239, 152, 32, 0.18), transparent); }
.as-dmbook__head { margin-block-end: 1.25rem; }
.as-dmbook__head p { margin: 0; color: var(--wp--preset--color--body); }
.as-dmbook__head .as-dmbook__title { margin-block-end: 0.2rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--wp--preset--color--title); }
.as-dmbook__frame { display: block; inline-size: 100%; min-block-size: 620px; border: 0; }
.as-dmbook__slot { display: grid; place-items: center; align-content: center; gap: 0.4rem; min-block-size: 420px; padding: 2rem; border-radius: 20px; background: repeating-linear-gradient(-45deg, #FFF8EF 0 12px, #FFFDF9 12px 24px); border: 2px dashed rgba(237, 135, 35, 0.4); text-align: center; color: var(--wp--preset--color--muted); }
.as-dmbook__slot p { margin: 0; }
.as-dmbook__slot-icon { display: grid; place-items: center; inline-size: 56px; block-size: 56px; margin-block-end: 0.5rem; border-radius: 18px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--orange-red); box-shadow: 0 12px 24px -14px rgba(223, 34, 41, 0.5); }
.as-dmbook__slot .as-dmbook__slot-title { font-size: 1.125rem; font-weight: 800; color: var(--wp--preset--color--title); }
/* Booking is live: the calendar icon, a short line and the "Pick a time" button that opens the Zoho pop-up. */
.as-dmbook__open { display: grid; place-items: center; align-content: center; gap: 0.5rem; min-block-size: 320px; padding: 2rem; border-radius: 20px; background: linear-gradient(180deg, var(--wp--preset--color--cream), var(--wp--preset--color--white)); border: 1px solid rgba(237, 135, 35, 0.22); text-align: center; }
.as-dmbook__open p { margin: 0; color: var(--wp--preset--color--body); }
.as-dmbook__open .as-dmbook__slot-title { font-size: 1.125rem; font-weight: 800; color: var(--wp--preset--color--title); }
.as-dmbook__open .as-btn { margin-block-start: 0.75rem; }
/* cal.com's inline calendar: full card width, rounded like the slot it replaces; the loading note goes once it's ready. */
.as-dmbook__inline.is-loaded { overflow: hidden; border-radius: 20px; border: 1px solid rgba(237, 135, 35, 0.22); }
.as-dmbook__inline.is-loaded .as-dmbook__open { display: none; }
.as-dmbook__inline iframe { display: block; inline-size: 100% !important; border: 0; }
.as-dmbook__alt { margin: 1rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--wp--preset--color--body); }
.as-dmbook__alt a { font-weight: 700; color: var(--wp--preset--color--orange-red); white-space: nowrap; }
.as-dmfaq__contact a { white-space: nowrap; }

/* What happens in the demo: three numbered steps on a gradient line. */
.as-dmsteps__head { margin: 0 auto clamp(2rem, 4vw, 2.75rem); text-align: center; }
.as-dmsteps__head h2 { margin: 0.4rem 0 0; }
.as-dmsteps__list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; text-align: center; }
.as-dmsteps__list::before { content: ""; position: absolute; inset-block-start: 1.75rem; inset-inline: 16%; block-size: 2px; background: linear-gradient(90deg, rgba(239, 152, 32, 0.9), rgba(223, 34, 41, 0.4)); }
.as-dmsteps__list li { position: relative; }
.as-dmsteps__num { display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; margin: 0 auto 1rem; border-radius: 50%; background: var(--wp--preset--gradient--brand); box-shadow: 0 0 0 8px var(--wp--preset--color--white), 0 14px 28px -10px rgba(223, 34, 41, 0.6); font-size: 1.125rem; font-weight: 800; color: var(--wp--preset--color--white); }
.as-dmsteps__list h3 { margin: 0 0 0.35rem; font-size: 1.25rem; }
.as-dmsteps__list p { max-inline-size: 22rem; margin: 0 auto; line-height: 1.6; color: var(--wp--preset--color--body); }

/* Hero button down to the calendar section. */
.as-dmhero__cta { margin-block-start: 1.75rem; }

/* G2 panel beside the hero heading (user, 2026-10-15): white card, overall figures, up to 2 reviews, link to G2. */
.as-g2 {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: 30px;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(237, 135, 35, 0.25);
	box-shadow: 0 50px 90px -50px rgba(223, 34, 41, 0.55), 0 0 0 10px rgba(255, 255, 255, 0.55);
}
.as-g2::before { content: ""; position: absolute; inset: 0 0 auto; block-size: 5px; background: var(--wp--preset--gradient--brand); }
.as-g2__head { display: flex; align-items: center; gap: 0.9rem; margin-block-end: 1.25rem; }
.as-g2__head p { margin: 0; }
.as-g2__mark { display: grid; place-items: center; flex: none; inline-size: 48px; block-size: 48px; border-radius: 50%; background: #FF492C; font-size: 1.125rem; font-weight: 800; color: var(--wp--preset--color--white); box-shadow: 0 12px 24px -12px rgba(255, 73, 44, 0.7); }
.as-g2__title { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--wp--preset--color--title); }
.as-g2__score { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.9375rem; color: var(--wp--preset--color--body); }
.as-g2__score strong { color: var(--wp--preset--color--title); }
.as-g2__stars { display: inline-flex; gap: 2px; }
.as-g2__star { inline-size: 16px; block-size: 16px; background: #E4E2DE; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7L12 17.3 5.8 21l1.6-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7L12 17.3 5.8 21l1.6-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.as-g2__star.is-full { background: var(--wp--preset--color--orange-red); }
.as-g2__star.is-half { background: linear-gradient(90deg, var(--wp--preset--color--orange-red) 50%, #E4E2DE 50%); }
.as-g2__list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.as-g2__review { padding: 1.25rem; border-radius: 20px; background: linear-gradient(180deg, var(--wp--preset--color--cream), var(--wp--preset--color--white)); border: 1px solid rgba(237, 135, 35, 0.22); }
.as-g2__headline { margin: 0.6rem 0 0.4rem; font-size: 1.0625rem; font-weight: 800; line-height: 1.35; color: var(--wp--preset--color--title); }
.as-g2__quote { margin: 0; padding: 0; border: 0; }
.as-g2__quote p { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; font-size: 0.9375rem; line-height: 1.6; color: var(--wp--preset--color--body); }
.as-g2__who { display: flex; align-items: center; gap: 0.75rem; margin-block-start: 1rem; }
.as-g2__who img, .as-g2__who > span { display: grid; place-items: center; flex: none; inline-size: 40px; block-size: 40px; border-radius: 50%; object-fit: cover; background: var(--wp--preset--gradient--brand); font-size: 0.75rem; font-weight: 800; color: var(--wp--preset--color--white); }
.as-g2__who p { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--wp--preset--color--muted); }
.as-g2__who strong { display: block; font-size: 0.9375rem; color: var(--wp--preset--color--title); }
.as-g2__all { display: inline-flex; gap: 0.35rem; font-weight: 700; color: var(--wp--preset--color--orange-red); text-decoration: none; }
.as-g2__all:hover { text-decoration: underline; }
/* Footer row: the link to G2 on the left, arrows and dots on the right. */
.as-g2__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-block-start: 1.25rem; }
/* Without JS: the first 2 reviews stacked, no arrows. */
.as-g2:not(.is-slider) .as-g2__review:nth-child(n+3), .as-g2:not(.is-slider) .as-g2__nav { display: none; }
/* Slider: every review in the same place (the panel keeps the tallest one's height), only the active one visible. */
.as-g2.is-slider .as-g2__list { grid-template-areas: "slide"; }
.as-g2.is-slider .as-g2__review { grid-area: slide; visibility: hidden; opacity: 0; transition: opacity 0.35s ease, visibility 0.35s; }
.as-g2.is-slider .as-g2__review.is-active { visibility: visible; opacity: 1; }
.as-g2__nav { display: flex; align-items: center; gap: 0.6rem; }
.as-g2__arrow { display: grid; place-items: center; inline-size: 40px; block-size: 40px; padding: 0; border-radius: 50%; border: 1px solid rgba(237, 135, 35, 0.35); background: var(--wp--preset--color--white); color: var(--wp--preset--color--title); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.as-g2__arrow:hover, .as-g2__arrow:focus-visible { border-color: transparent; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); }
.as-g2__dots { display: flex; gap: 0.4rem; }
.as-g2__dot { inline-size: 8px; block-size: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(19, 26, 26, 0.18); cursor: pointer; transition: inline-size 0.25s, background 0.25s; }
.as-g2__dot.is-active { inline-size: 22px; background: var(--wp--preset--gradient--brand); }
@media (prefers-reduced-motion: reduce) {
	.as-g2.is-slider .as-g2__review, .as-g2__dot { transition: none; }
}

/* Booking section (user, 2026-10-15): the calendar full width on a dark band, right below the customer logos. */
.as-dmcal {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(40% 55% at 85% 10%, rgba(239, 152, 32, 0.28), transparent 70%),
		radial-gradient(35% 50% at 5% 95%, rgba(223, 34, 41, 0.22), transparent 70%),
		var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}
.as-dmcal::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 56px 56px;
	-webkit-mask-image: radial-gradient(70% 80% at 50% 30%, #000 25%, transparent 100%);
	mask-image: radial-gradient(70% 80% at 50% 30%, #000 25%, transparent 100%);
}
.as-dmcal__head { max-inline-size: 44rem; margin: 0 auto clamp(1.75rem, 3.5vw, 2.5rem); text-align: center; }
.as-dmcal__head h2 { margin: 0.4rem 0 0.75rem; color: var(--wp--preset--color--white); }
.as-dmcal__head p:last-child { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: rgba(255, 255, 255, 0.75); }
/* The card goes dark with cal.com's dark calendar (user, 2026-10-15), keeping the brand line on top. */
.as-dmcal__card { background: #141414; border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 60px 110px -50px rgba(0, 0, 0, 0.7), 0 0 0 10px rgba(255, 255, 255, 0.06); }
.as-dmcal .as-dmbook__inline.is-loaded { border-color: rgba(255, 255, 255, 0.1); }
.as-dmcal .as-dmbook__open, .as-dmcal .as-dmbook__slot { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); }
.as-dmcal .as-dmbook__open p, .as-dmcal .as-dmbook__slot p, .as-dmcal .as-dmbook__alt { color: rgba(255, 255, 255, 0.75); }
.as-dmcal .as-dmbook__open .as-dmbook__slot-title, .as-dmcal .as-dmbook__slot .as-dmbook__slot-title { color: var(--wp--preset--color--white); }

/* The G2 panel sits in the middle of the hero's height, beside the heading. */
.as-dmhero__inner > .as-g2 { align-self: center; }

/* Questions before booking, then the contact line. */
.as-dmfaq__contact { margin: 1.75rem 0 0; text-align: center; color: var(--wp--preset--color--body); }
.as-dmfaq__contact a { font-weight: 700; color: var(--wp--preset--color--orange-red); }

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

@media (max-width: 760px) {
	.as-dmsteps__list { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.as-dmsteps__list::before { display: none; }
}

/* ---------- FAQs (templates/page-faqs.html, patterns faqs-*.php, data inc/faqs.php + inc/faqs.json) ----------
 * Section: A help-centre page: warm hero with search and topic pills, answers grouped by topic with a sticky
 * "Can't find your answer?" card, CTA.
 * SEO: One H1; H2 per topic; every question in the HTML and in FAQPage schema; deep links to each question.
 */

.as-faqs { overflow-x: clip; }

/* Hero: warm glows and grid texture, centred; search box and topic pills. */
.as-fqhero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	background:
		radial-gradient(40% 60% at 50% 20%, rgba(239, 152, 32, 0.3), transparent 70%),
		radial-gradient(30% 50% at 100% 100%, rgba(223, 34, 41, 0.1), transparent 70%),
		var(--wp--preset--color--cream);
	text-align: center;
}

.as-fqhero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
		linear-gradient(90deg, rgba(19, 26, 26, 0.05) 1px, transparent 1px) 0 0 / 56px 56px;
	-webkit-mask-image: radial-gradient(60% 80% at 50% 40%, #000 25%, transparent 100%);
	mask-image: radial-gradient(60% 80% at 50% 40%, #000 25%, transparent 100%);
}

.as-fqhero__inner { max-inline-size: 60rem; margin-inline: auto; }
.as-fqhero .as-crumbs ol { justify-content: center; }
.as-fqhero .as-crumbs { margin-block-end: 1.25rem; }
.as-fqhero__title { max-inline-size: 18ch; margin: 0.75rem auto 0.75rem; font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem); line-height: 1.05; letter-spacing: -0.03em; }
.as-fqhero__lead { margin: 0 auto 1.75rem; font-size: 1.125rem; color: var(--wp--preset--color--body); }

/* Search: a big pill field with a search icon. */
.as-fqsearch { display: flex; align-items: center; gap: 0.75rem; max-inline-size: 40rem; margin: 0 auto 1.75rem; padding: 0.4rem 0.5rem 0.4rem 1.25rem; border-radius: 999px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.3); box-shadow: 0 24px 50px -30px rgba(223, 34, 41, 0.5); }
.as-fqsearch[hidden] { display: none; }
.as-fqsearch svg { flex: none; color: var(--wp--preset--color--orange-red); }
.as-fqsearch input { flex: 1; min-inline-size: 0; padding: 0.85rem 0.25rem; border: 0; background: none; font: inherit; font-size: 1.0625rem; color: var(--wp--preset--color--title); }
.as-fqsearch input:focus { outline: none; }
.as-fqsearch:focus-within { border-color: var(--wp--preset--color--orange); box-shadow: 0 0 0 4px rgba(239, 152, 32, 0.18), 0 24px 50px -30px rgba(223, 34, 41, 0.5); }

/* Topic pills: icon, name and count; wrap onto two lines on desktop. */
.as-fqtopics ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.as-fqtopics a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem 0.5rem 0.75rem; border-radius: 999px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.25); font-size: 0.9375rem; font-weight: 700; color: var(--wp--preset--color--title); text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease; }
.as-fqtopics a:is(:hover, :focus-visible) { border-color: var(--wp--preset--color--orange); transform: translateY(-2px); }
.as-fqtopics svg { inline-size: 18px; block-size: 18px; color: var(--wp--preset--color--orange-red); }
.as-fqtopics a span { display: grid; place-items: center; min-inline-size: 1.6rem; block-size: 1.6rem; padding-inline: 0.35rem; border-radius: 999px; background: #FFF1E2; font-size: 0.75rem; color: #9A4A0B; }

/* The answers: topic sections in the main column, the help card sticky on the right. */
.as-fqlist { background: radial-gradient(700px circle at 100% 0%, rgba(239, 152, 32, 0.08), transparent 60%), var(--wp--preset--color--white); }
.as-fqlist__inner { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: clamp(2rem, 5vw, 4rem); }
.as-fqlist__main { display: grid; gap: clamp(2.5rem, 4vw, 3.5rem); }
.as-fqtopic { scroll-margin-block-start: calc(var(--as-header-h) + 1.5rem); }
.as-fqtopic[hidden], .as-fqtopic .as-faq__item[hidden], .as-fqlist__none[hidden] { display: none; }
.as-fqtopic__title { display: flex; align-items: center; gap: 0.85rem; margin: 0 0 1.25rem; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); }
.as-fqtopic__icon { display: grid; flex: none; place-items: center; inline-size: 46px; block-size: 46px; border-radius: 14px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); box-shadow: 0 12px 24px -12px rgba(223, 34, 41, 0.6); }
.as-fqtopic__count { margin-inline-start: auto; padding: 0.2rem 0.65rem; border-radius: 999px; background: #FFF1E2; font-size: 0.8125rem; font-weight: 700; color: #9A4A0B; }
.as-fqtopic .as-faq__item { scroll-margin-block-start: calc(var(--as-header-h) + 1.5rem); }
.as-fqitem__link { margin-block-start: 0.25rem; }
.as-fqitem__link a { font-weight: 700; color: var(--wp--preset--color--orange-red); text-decoration: none; }
.as-fqitem__link a:is(:hover, :focus-visible) { text-decoration: underline; }
.as-fqlist__none { margin: 0; padding: 1.25rem 1.5rem; border-radius: 18px; background: #FFF6EA; border: 1px dashed rgba(237, 135, 35, 0.45); text-align: center; color: var(--wp--preset--color--body); }
.as-fqlist__none a { font-weight: 700; color: var(--wp--preset--color--orange-red); }

/* "Can't find your answer?": dark card with glow, sticky beside the answers. */
.as-fqhelp {
	position: sticky;
	inset-block-start: calc(var(--as-header-h) + 2rem);
	overflow: hidden;
	isolation: isolate;
	padding: 1.75rem;
	border-radius: 26px;
	background: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 28px 28px, var(--wp--preset--color--ink);
	box-shadow: 0 40px 80px -40px rgba(19, 26, 26, 0.7);
	color: rgba(255, 255, 255, 0.75);
}

.admin-bar .as-fqhelp { inset-block-start: calc(var(--as-header-h) + 32px + 2rem); }
.as-fqhelp__glow { position: absolute; inset: -40% -40% auto auto; z-index: -1; inline-size: 260px; block-size: 260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(239, 152, 32, 0.45), transparent); }
.as-fqhelp p { margin: 0 0 1.25rem; line-height: 1.6; }
.as-fqhelp .as-fqhelp__eyebrow { margin-block-end: 0.35rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--orange); }
.as-fqhelp__title { margin: 0 0 0.6rem; font-size: 1.375rem; color: var(--wp--preset--color--white); }
.as-fqhelp .as-btn { box-sizing: border-box; inline-size: 100%; justify-content: center; }
.as-fqhelp .as-fqhelp__alt { margin: 1rem 0 0; font-size: 0.875rem; text-align: center; }
.as-fqhelp__alt a { font-weight: 700; color: var(--wp--preset--color--white); }

@media (max-width: 1024px) {
	.as-fqlist__inner { grid-template-columns: minmax(0, 1fr); }
	.as-fqhelp { position: static; }
}

@media (max-width: 600px) {
	/* Phones: topic pills scroll sideways in one line. */
	.as-fqtopics ul { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-block-end: 0.5rem; margin-inline: -1rem; padding-inline: 1rem; scrollbar-width: none; }
	.as-fqtopics li { flex: none; }
	.as-fqtopic__count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.as-fqtopics a:is(:hover, :focus-visible) { transform: none; }
}

/* ---------- Guidebooks hub (templates/page-guidebooks.html, patterns gb-hub-*.php, data inc/guidebooks.php) ----------
 * Section: Dark hero with a large generated cover, the region and topic filter bar and guidebook cards (covers in the
 * Industry Insights style), the request band, CTA.
 * SEO: One H1; H2 for the grid, H3 per guidebook; noindex only while there is no guidebook.
 */

.as-guidebooks { overflow-x: clip; }

/* Hero: dark ink, warm glows, grid texture; text left, the big cover right. */
.as-gbhero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	background:
		radial-gradient(45% 60% at 85% 35%, rgba(239, 152, 32, 0.3), transparent 70%),
		radial-gradient(40% 55% at 0% 100%, rgba(223, 34, 41, 0.25), transparent 70%),
		var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.78);
}

.as-gbhero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: radial-gradient(70% 80% at 60% 40%, #000 25%, transparent 100%); mask-image: radial-gradient(70% 80% at 60% 40%, #000 25%, transparent 100%); }
.as-gbhero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: var(--wp--preset--spacing--60); }
.as-gbhero .as-crumbs { margin-block-end: 1rem; }
.as-gbhero .as-crumbs :is(a, li, span) { color: rgba(255, 255, 255, 0.65); }
.as-gbhero__title { margin: 0.75rem 0 1.25rem; font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem); line-height: 1.04; letter-spacing: -0.03em; color: var(--wp--preset--color--white); }
.as-gbhero__lead { max-inline-size: 36rem; margin: 0 0 2rem; font-size: 1.1875rem; line-height: 1.65; }
.as-gbhero__cta .as-btn { gap: 0.45rem; }
.as-gbhero__facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1.75rem 0 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.as-gbhero__facts li { display: inline-flex; align-items: center; gap: 0.5rem; }
.as-gbhero__facts li::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--wp--preset--gradient--brand); }
.as-gbhero__visual { position: relative; justify-self: center; inline-size: min(100%, 380px); }
.as-gbhero__visual::before { content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; z-index: -1; border-radius: 28px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.as-gbhero .as-cover--lg { display: flex; }

/* "Coming soon" badge on covers. */
.as-gbsoon { position: absolute; inset-block-start: 0.85rem; inset-inline-end: 0.85rem; z-index: 2; padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--wp--preset--color--white); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; color: var(--wp--preset--color--orange-red); }
.as-gbsoon--lg { inset-block-start: auto; inset-block-end: -0.9rem; inset-inline-end: 1.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; }

/* The grid: white cards with a cover on top. */
.as-gbgrid { background: radial-gradient(700px circle at 100% 0%, rgba(239, 152, 32, 0.1), transparent 60%), var(--wp--preset--color--white); }
/* Filter bar: Region and Topic dropdowns, the count and Clear in one white bar; chips for the chosen filters under it. */
.as-gbfilter { margin-block-end: 1.75rem; }
.as-gbfilter[hidden] { display: none; }
.as-gbfilter__bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; padding: 1rem 1.25rem; border-radius: 22px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.22); box-shadow: 0 24px 50px -40px rgba(19, 26, 26, 0.45); }
.as-gbfilter__field { display: flex; flex-direction: column; gap: 0.3rem; min-inline-size: 13rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--orange-red); }
.as-gbfilter__field select { appearance: none; min-block-size: 46px; padding: 0.6rem 2.5rem 0.6rem 0.9rem; border-radius: 14px; background-color: #FBF8F4; border: 1px solid #ECE4DA; font: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--wp--preset--color--title); cursor: pointer; }
.as-gbfilter__field select { background-image: linear-gradient(45deg, transparent 50%, #9A4A0B 50%), linear-gradient(135deg, #9A4A0B 50%, transparent 50%); background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9rem) 50%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
.as-gbfilter__field select:focus { outline: none; border-color: var(--wp--preset--color--orange); box-shadow: 0 0 0 4px rgba(239, 152, 32, 0.18); }
.as-gbfilter__count { margin: 0 0 0.7rem auto; font-size: 0.9375rem; color: var(--wp--preset--color--body); }
.as-gbfilter__count strong { color: var(--wp--preset--color--title); }
.as-gbfilter__clear { margin-block-end: 0.55rem; padding: 0.45rem 1rem; border: 1px solid rgba(237, 135, 35, 0.4); border-radius: 999px; background: none; font: inherit; font-size: 0.875rem; font-weight: 700; color: var(--wp--preset--color--orange-red); cursor: pointer; }
.as-gbfilter__clear[hidden] { display: none; }
.as-gbfilter__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.as-gbfilter__chips:empty { display: none; }
.as-gbfilter__toggle { display: none; }

@media (max-width: 600px) {
	/* Phones: one "Filters" button opens both dropdowns; the count stays visible next to it. */
	.as-gbfilter__bar { padding: 0.75rem 0.9rem; }
	.as-gbfilter__toggle { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border: 0; border-radius: 999px; background: var(--wp--preset--gradient--brand); font: inherit; font-size: 0.9375rem; font-weight: 700; color: var(--wp--preset--color--white); cursor: pointer; }
	.as-gbfilter__count { margin: 0 0 0 auto; align-self: center; }
	.as-gbfilter__field, .as-gbfilter__clear { display: none; }
	.as-gbfilter.is-open .as-gbfilter__field { display: flex; flex: 1 1 100%; min-inline-size: 0; }
	.as-gbfilter.is-open .as-gbfilter__clear:not([hidden]) { display: inline-flex; }
}
.as-gbfilter__chips button { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.8rem; border: 0; border-radius: 999px; background: var(--wp--preset--color--ink); font: inherit; font-size: 0.8125rem; font-weight: 700; color: var(--wp--preset--color--white); cursor: pointer; }
.as-gbfilter__chips button::after { content: "✕"; font-size: 0.6875rem; color: var(--wp--preset--color--orange); }

/* Region tag on the cover: white so it reads as "where this applies". */
.as-cover__seg--region { background: rgba(255, 255, 255, 0.92); border-color: transparent; color: var(--wp--preset--color--title); font-weight: 800; }

/* "Coming soon" pill in the card body (instead of on the cover, where it hid the region). */
.as-gbcard__soon { align-self: flex-start; margin-block-start: 0.5rem; padding: 0.3rem 0.8rem; border-radius: 999px; background: #FFF1E2; font-size: 0.8125rem; font-weight: 800; color: #9A4A0B; }
.as-gbgrid__empty { margin: 0; padding: 1.25rem; border-radius: 16px; background: #FFF6EA; text-align: center; color: var(--wp--preset--color--body); }
.as-gbgrid__empty[hidden] { display: none; }
.as-gbgrid__empty button { border: 0; background: none; font: inherit; font-weight: 700; color: var(--wp--preset--color--orange-red); text-decoration: underline; cursor: pointer; }
.as-gbgrid__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.as-gbcard { display: flex; }
.as-gbcard[hidden] { display: none; }
.as-gbcard__link { display: flex; flex: 1; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.2); box-shadow: 0 24px 50px -38px rgba(19, 26, 26, 0.5); color: var(--wp--preset--color--body); text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
a.as-gbcard__link:is(:hover, :focus-visible) { transform: translateY(-4px); border-color: rgba(237, 135, 35, 0.5); box-shadow: 0 34px 60px -34px rgba(223, 34, 41, 0.45); }
.as-gbcard__cover { position: relative; display: block; }
.as-gbcard__cover .as-cover--sm { display: flex; }
.as-gbcard__body { display: flex; flex: 1; flex-direction: column; gap: 0.4rem; padding: 1.25rem 1.4rem 1.4rem; }
.as-gbcard__topic { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--orange-red); }
/* "PDF in Spanish": a small tag after the topic on cards for guidebooks whose PDF is not in English. */
.as-gbcard__topic { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.as-gblang { padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(237, 135, 35, 0.12); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: none; color: var(--wp--preset--color--orange-red); }
.as-gbcard__title { margin: 0; font-size: 1.1875rem; line-height: 1.3; color: var(--wp--preset--color--title); }
.as-gbcard__line { flex: 1; font-size: 0.9375rem; line-height: 1.55; }
.as-gbcard__cta { margin-block-start: 0.5rem; font-size: 0.875rem; font-weight: 700; color: var(--wp--preset--color--orange-red); }
.as-gbgrid__note { margin: 2rem auto 0; max-inline-size: 44rem; padding: 1rem 1.25rem; border-radius: 16px; background: #FFF6EA; border: 1px dashed rgba(237, 135, 35, 0.45); text-align: center; color: var(--wp--preset--color--body); }
.as-gbgrid__note a { font-weight: 700; color: var(--wp--preset--color--orange-red); }

@media (max-width: 1024px) {
	.as-gbhero__inner { grid-template-columns: minmax(0, 1fr); }
	.as-gbhero__visual { inline-size: min(100%, 320px); }
	.as-gbgrid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

@media (prefers-reduced-motion: reduce) {
	a.as-gbcard__link:is(:hover, :focus-visible) { transform: none; }
}

/* Card meta line (standards, checkpoints, PDF pages), like the checklist cards'. */
.as-gbcard__meta { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 600; color: var(--wp--preset--color--title); }
.as-gbcard__meta svg { flex: none; color: var(--wp--preset--color--orange-red); }

/* Hero cover links to the first guidebook; it lifts on hover (never tilts). */
.as-gbhero__book { display: block; border-radius: 22px; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; }
/* Long guidebook titles on the big covers: smaller type so the footer stays inside the cover. */
.as-cover--lg.is-long .as-cover__title { font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem); line-height: 1.2; }
.as-gbhero__book:is(:hover, :focus-visible) { transform: translateY(-4px); box-shadow: 0 40px 70px -40px rgba(239, 152, 32, 0.6); }

/* ---------- Guidebook page (templates/single-guidebook.html, patterns gb-page-*.php, gb-request.php) ----------
 * Section: Dark cover hero, key numbers pulled over it, contents sidebar, at-a-glance card and the summary, standards
 * and steps in the Insights paper body style, the dark PDF band, checklists and more guidebooks, the request band, CTA.
 * SEO: One H1; numbered H2 sections with anchors; the steps are an ordered list (HowTo schema in inc/seo.php).
 */

.as-gbpage { overflow-x: clip; }

/* Hero: the Insights paper hero, with room at the bottom for the key numbers to overlap, and a smaller title for long names. */
.as-gbpagehero { padding-block-end: calc(var(--wp--preset--spacing--60) + 3.5rem); }
.as-gbpagehero__title { font-size: clamp(2rem, 1.35rem + 2.2vw, 3.125rem); line-height: 1.08; }
.as-gbpagehero__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0 0 1.75rem; padding: 0; list-style: none; font-size: 0.9375rem; }
.as-gbpagehero__meta li { display: inline-flex; align-items: center; gap: 0.45rem; }
.as-gbpagehero__meta svg { flex: none; color: var(--wp--preset--color--orange); }
.as-gbpagehero__meta .as-gbpagehero__lang { padding: 0.3rem 0.75rem; border-radius: 999px; background: rgba(239, 152, 32, 0.16); border: 1px solid rgba(239, 152, 32, 0.4); font-weight: 700; color: var(--wp--preset--color--white); }

/* Key numbers: three white cards pulled up over the hero, big gradient number and its meaning. */
.as-gbfacts { position: relative; z-index: 2; margin-block-start: -3.5rem; }
.as-gbfacts__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.as-gbfacts__list li { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.4rem 1.5rem; border-radius: 22px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.22); box-shadow: 0 30px 60px -38px rgba(19, 26, 26, 0.55); }
.as-gbfacts__list strong { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.as-gbfacts__list span { font-size: 0.9375rem; line-height: 1.5; color: var(--wp--preset--color--body); }

/* At a glance: a warm light card at the top of the main column, two columns of facts. */
.as-gbglance { position: relative; overflow: hidden; isolation: isolate; margin-block-end: 2.75rem; padding: 1.5rem 1.6rem; border-radius: var(--as-radius-card); background: radial-gradient(60% 80% at 100% 0%, rgba(239, 152, 32, 0.16), transparent 70%), #FFF8EF; border: 1px solid rgba(237, 135, 35, 0.22); }
.as-gbglance::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(237, 135, 35, 0.08) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(237, 135, 35, 0.08) 1px, transparent 1px) 0 0 / 28px 28px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 65%); mask-image: linear-gradient(200deg, #000, transparent 65%); }
.as-gbglance__title { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 1rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--orange-red); }
.as-gbglance__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.5rem; margin: 0; }
.as-gbglance__list div { padding-block-end: 0.85rem; border-block-end: 1px solid rgba(237, 135, 35, 0.18); }
.as-gbglance__list div.is-wide { grid-column: 1 / -1; }
.as-gbglance__list dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #9A4A0B; }
.as-gbglance__list dd { margin: 0.2rem 0 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.45; color: var(--wp--preset--color--title); }

/* Body: the step-by-step list as numbered cards on a gradient line. */
.as-gbbody .as-gbsteps { counter-reset: gbstep; position: relative; display: grid; gap: 0.85rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.as-gbbody .as-gbsteps::before { content: ""; position: absolute; inset-block: 1.25rem; inset-inline-start: 1.25rem; inline-size: 2px; background: linear-gradient(var(--wp--preset--color--orange), var(--wp--preset--color--orange-red)); opacity: 0.35; }
.as-gbbody .as-gbsteps li { counter-increment: gbstep; position: relative; margin: 0; padding: 1rem 1.25rem 1rem 3.75rem; border-radius: 18px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.2); box-shadow: 0 20px 40px -36px rgba(19, 26, 26, 0.5); }
.as-gbbody .as-gbsteps li::before { content: counter(gbstep); position: absolute; inset-block-start: 0.95rem; inset-inline-start: 0.4rem; display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: var(--wp--preset--gradient--brand); font-size: 0.9375rem; font-weight: 800; color: var(--wp--preset--color--white); box-shadow: 0 0 0 5px var(--wp--preset--color--white); }
.as-gbbody .as-gbsteps strong { display: block; margin-block-end: 0.2rem; color: var(--wp--preset--color--title); }

/* Body: programmes (Dealer Standards, Saudi overview) as cards with a brand edge. */
.as-gbbody .as-gbgroups { display: grid; gap: 0.75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.as-gbbody .as-gbgroups li { margin: 0; padding: 1rem 1.25rem; border-radius: 0 16px 16px 0; border-inline-start: 4px solid var(--wp--preset--color--orange); background: #FFF8EF; font-size: 0.9375rem; line-height: 1.6; }
.as-gbbody .as-gbgroups strong { display: block; margin-block-end: 0.15rem; font-size: 1rem; color: var(--wp--preset--color--title); }

/* Body: who it's for, ticked; and the closing not-legal-advice note. */
.as-gbbody .as-gbwho { padding: 0; list-style: none; }
.as-gbbody .as-gbwho li { position: relative; padding-inline-start: 2rem; }
.as-gbbody .as-gbwho li::before { content: "\2713"; position: absolute; inset-inline-start: 0; inset-block-start: 0.15rem; display: grid; place-items: center; inline-size: 1.35rem; block-size: 1.35rem; border-radius: 50%; background: var(--wp--preset--gradient--brand); font-size: 0.6875rem; font-weight: 800; color: var(--wp--preset--color--white); }
.as-gbbody .as-gbnote { margin-block-start: 2rem; padding: 0.85rem 1.1rem; border-inline-start: 3px solid var(--wp--preset--color--orange); border-radius: 0 12px 12px 0; background: #FFF8EF; font-size: 0.875rem; color: var(--wp--preset--color--body); }

/* Fix-time column: a small pill so the urgency reads at a glance. */
.as-gbbody .as-gbtable td:last-child { white-space: nowrap; font-weight: 700; color: #9A4A0B; }
/* Standard codes (CP-01…) never break; only tables with a code column have three columns. */
.as-gbbody .as-gbtable:has(th:nth-child(3)) td:first-child { white-space: nowrap; }
/* The paper table leaves its first row plain; guidebook tables style every row the same. */
.as-prose .as-gbtable tbody tr:first-child td:first-child { font-weight: 700; color: var(--wp--preset--color--title); }
.as-prose .as-gbtable tbody tr:first-child td:last-child { font-weight: 700; color: #9A4A0B; }

/* Related: the "More guidebooks" row under the checklists and links. */
.as-gbrel__more { margin-block-start: var(--wp--preset--spacing--60); }

/* Request band: the newsletter card holds two fields; links in the note stay readable on the dark card. */
.as-gbreq .as-newsletter__note a { font-weight: 700; color: var(--wp--preset--color--white); text-decoration-color: var(--wp--preset--color--orange); text-underline-offset: 3px; }

@media (max-width: 1024px) {
	.as-gbfacts__list { grid-template-columns: minmax(0, 1fr); }
	.as-gbfacts__list li { flex-direction: row; align-items: baseline; gap: 1rem; }
	.as-gbfacts__list strong { flex: none; min-inline-size: 7rem; }
}

@media (max-width: 600px) {
	.as-gbglance__list { grid-template-columns: minmax(0, 1fr); }
	.as-gbfacts__list li { flex-direction: column; gap: 0.25rem; }
	.as-gbbody .as-gbtable td:last-child { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
	.as-gbhero__book:is(:hover, :focus-visible) { transform: none; }
}

/* ---------- AutoSmart Audit Connect (T18, layout.md 22): templates/page-autosmart-connect.html, patterns connect-*.php ---------- */

/* Hero: dark with grid texture and glows; text left, the coded marketplace diagram right. */
.as-cnhero { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70); background: radial-gradient(45% 60% at 85% 35%, rgba(239, 152, 32, 0.3), transparent 70%), radial-gradient(40% 55% at 0% 100%, rgba(223, 34, 41, 0.28), transparent 70%), var(--wp--preset--color--ink); color: rgba(255, 255, 255, 0.78); }
.as-cnhero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: radial-gradient(70% 80% at 60% 40%, #000 25%, transparent 100%); mask-image: radial-gradient(70% 80% at 60% 40%, #000 25%, transparent 100%); }
.as-cnhero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: var(--wp--preset--spacing--60); }
.as-cnhero .as-crumbs { margin-block-end: 1rem; }
.as-cnhero .as-crumbs :is(a, li, span) { color: rgba(255, 255, 255, 0.65); }
.as-cnhero__pill { display: inline-flex; align-items: center; gap: 0.55rem; }
.as-cnhero__new { padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--wp--preset--gradient--brand); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--white); }
.as-cnhero__title { max-inline-size: 17ch; margin: 0.85rem 0 1.25rem; font-size: clamp(2.4rem, 1.5rem + 3vw, 4rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--wp--preset--color--white); }
.as-cnhero__lead { max-inline-size: 38rem; margin: 0 0 2rem; font-size: 1.1875rem; line-height: 1.65; }
.as-cnhero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.as-cnhero__cta .as-btn { gap: 0.45rem; }
.as-cnhero__note { display: flex; align-items: center; gap: 0.5rem; margin: 1.25rem 0 0; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.7); }
.as-cnhero__note svg { flex: none; color: #2fd38a; }

/* The marketplace diagram: brands (free), Connect, partners (membership), with labelled two-way arrows. */
.as-cnmap { position: relative; box-sizing: border-box; display: grid; gap: 0.25rem; justify-self: center; inline-size: min(100%, 500px); padding: 1.25rem; border-radius: 28px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.as-cnmap::before { content: ""; position: absolute; inset: 8% -6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(239, 152, 32, 0.45), transparent); filter: blur(34px); }
.as-cnmap__party { padding: 1rem 1.1rem 1.1rem; border-radius: 18px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--body); box-shadow: 0 20px 40px -26px rgba(0, 0, 0, 0.8); }
.as-cnmap__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.65rem; }
.as-cnmap__head strong { font-size: 1.125rem; color: var(--wp--preset--color--title); }
.as-cnmap__tag { padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.as-cnmap__tag--free { background: #e5f6ec; color: #1f8a4c; }
.as-cnmap__tag--member { background: #fdebdc; color: #a8520c; }
.as-cnmap__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.as-cnmap__chips span { padding: 0.3rem 0.65rem; border-radius: 999px; background: #f4f1ec; font-size: 0.8125rem; color: var(--wp--preset--color--body); }
.as-cnmap__flow { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; padding: 0.45rem 0.25rem; }
.as-cnmap__arrow { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 600; color: rgba(255, 255, 255, 0.78); }
.as-cnmap__arrow--down { justify-content: flex-start; flex-direction: row-reverse; text-align: end; }
.as-cnmap__arrow--down svg { color: var(--wp--preset--color--orange); }
.as-cnmap__arrow--up svg { color: #F25C3B; }
.as-cnmap__hub { display: flex; align-items: center; gap: 1rem; padding: 1.1rem; border-radius: 20px; background: linear-gradient(135deg, #222a2c, #121819); border: 1px solid rgba(239, 152, 32, 0.4); box-shadow: 0 0 0 6px rgba(239, 152, 32, 0.08), 0 24px 50px -24px rgba(223, 34, 41, 0.6); }
.as-cnmap__hub img { flex: none; padding: 8px; border-radius: 14px; background: var(--wp--preset--color--white); }
.as-cnmap__name { margin: 0 0 0.55rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; color: var(--wp--preset--color--white); }
.as-cnmap__chips--dark span { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); }

/* What it is: definition left, three fact tiles right. */
.as-cnwhat__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--wp--preset--spacing--60); align-items: center; }
.as-cnwhat__text h2 { margin: 0.5rem 0 1.25rem; font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; }
.as-cnwhat__text p { font-size: 1.0625rem; line-height: 1.7; }
.as-cnwhat__text .as-cnwhat__lead { font-size: 1.1875rem; color: var(--wp--preset--color--title); }
.as-cnwhat__facts { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; }
.as-cnwhat__facts li { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: 20px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.22); box-shadow: 0 1px 2px rgba(19, 26, 26, 0.05), 0 18px 40px -24px rgba(19, 26, 26, 0.3); }
.as-cnwhat__facts strong { display: block; font-size: 1.0625rem; color: var(--wp--preset--color--title); }
.as-cnwhat__facts li > span:last-child { font-size: 0.9375rem; color: var(--wp--preset--color--muted); }
.as-cnwhat__icon { display: grid; place-items: center; flex: none; inline-size: 48px; block-size: 48px; border-radius: 14px; background: var(--wp--preset--gradient--brand-angled); color: var(--wp--preset--color--white); box-shadow: 0 10px 22px -10px rgba(223, 34, 41, 0.6); }

/* Both sides: warm band with grid texture; the switch; two cards (side by side until the script switches them). */
.as-cnsides { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(45% 80% at 100% 0%, rgba(239, 152, 32, 0.16), transparent 70%), var(--wp--preset--color--cream); }
.as-cnsides::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(19, 26, 26, 0.045) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(19, 26, 26, 0.045) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: radial-gradient(70% 90% at 50% 30%, #000 20%, transparent 100%); mask-image: radial-gradient(70% 90% at 50% 30%, #000 20%, transparent 100%); }
.as-cnsides__head { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-block-end: var(--wp--preset--spacing--50); text-align: center; }
.as-cnsides__head .as-eyebrow { margin: 0; }
.as-cnsides__head h2 { margin: 0; font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; }
.as-cnswitch { display: inline-flex; gap: 0.25rem; margin-block-start: 1rem; padding: 0.3rem; border-radius: 999px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.25); box-shadow: 0 10px 30px -18px rgba(19, 26, 26, 0.35); }
.as-cnswitch[hidden] { display: none; }
.as-cnswitch__btn { padding: 0.65rem 1.3rem; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 0.9375rem; font-weight: 700; color: var(--wp--preset--color--body); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.as-cnswitch__btn:hover { color: var(--wp--preset--color--orange-red); }
.as-cnswitch__btn[aria-pressed="true"] { background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); box-shadow: 0 8px 18px -8px rgba(223, 34, 41, 0.6); }
.as-cnswitch__btn:focus-visible { outline: 2px solid var(--wp--preset--color--orange); outline-offset: 2px; }
.as-cnsides__panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.as-cnsides__inner.is-switched .as-cnsides__panels { grid-template-columns: minmax(0, 1fr); max-inline-size: 760px; margin-inline: auto; }
[data-cn-side][hidden] { display: none; }
.as-cnside { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 28px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.22); box-shadow: 0 1px 2px rgba(19, 26, 26, 0.05), 0 30px 60px -36px rgba(19, 26, 26, 0.4); animation: as-cnfade 0.35s ease; }
.as-cnside__label { margin: 0; padding: 0.3rem 0.8rem; border-radius: 999px; background: rgba(237, 135, 35, 0.12); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--orange-red); }
.as-cnside__title { margin: 0.25rem 0 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); line-height: 1.2; color: var(--wp--preset--color--title); }
.as-cnside__who { margin: 0; color: var(--wp--preset--color--muted); }
.as-cnside__list { display: grid; gap: 0.7rem; margin: 0.5rem 0 1rem; padding: 0; list-style: none; }
.as-cnside__list li, .as-cnmember__list li { display: flex; align-items: flex-start; gap: 0.75rem; line-height: 1.5; color: var(--wp--preset--color--body); }
.as-cnside .as-btn, .as-cnmember .as-btn { gap: 0.45rem; }
.as-cnside__tick { display: grid; place-items: center; flex: none; inline-size: 24px; block-size: 24px; margin-block-start: 0.05rem; border-radius: 50%; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); }
@keyframes as-cnfade { from { opacity: 0; transform: translateY(8px); } }

/* How it works: numbered timelines with a gradient rail; once switched, one journey as a 3 x 2 grid of step cards. */
.as-cnsteps { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 28px; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); box-shadow: 0 2px 30px -18px rgba(19, 26, 26, 0.3); animation: as-cnfade 0.35s ease; }
.as-cnsteps__title { margin: 0 0 1.25rem; font-size: 1.25rem; color: var(--wp--preset--color--title); }
.as-cnsteps__list { position: relative; display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.as-cnsteps__list::before { content: ""; position: absolute; inset-block: 1.25rem; inset-inline-start: 19px; inline-size: 2px; background: linear-gradient(180deg, #ED8723, #DD2228); opacity: 0.35; }
.as-cnsteps__step { position: relative; display: flex; align-items: flex-start; gap: 1rem; }
.as-cnsteps__step strong { display: block; color: var(--wp--preset--color--title); }
.as-cnsteps__step > span:last-child { padding-block-start: 0.45rem; line-height: 1.5; color: var(--wp--preset--color--muted); }
.as-cnsteps__num { position: relative; display: grid; place-items: center; flex: none; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--wp--preset--gradient--brand); font-weight: 800; color: var(--wp--preset--color--white); box-shadow: 0 0 0 5px var(--wp--preset--color--white), 0 10px 20px -10px rgba(223, 34, 41, 0.7); }
.as-cnhow__inner.is-switched .as-cnsides__panels { grid-template-columns: minmax(0, 1fr); }
.as-cnhow__inner.is-switched .as-cnsteps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.as-cnhow__inner.is-switched .as-cnsteps__list::before { display: none; }
.as-cnhow__inner.is-switched .as-cnsteps__step { flex-direction: column; gap: 0.6rem; padding: 1.25rem; border-radius: 18px; background: var(--wp--preset--color--cream); }
.as-cnhow__inner.is-switched .as-cnsteps__step > span:last-child { padding-block-start: 0; }
.as-cnhow__inner.is-switched .as-cnsteps__num { box-shadow: 0 10px 20px -10px rgba(223, 34, 41, 0.7); }

/* Sealed bids: dark band; text left, "Partners see / Stays private" cards and a sealed-bid strip right. */
.as-cnsealed { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(45% 70% at 0% 0%, rgba(223, 34, 41, 0.25), transparent 70%), radial-gradient(40% 60% at 100% 100%, rgba(239, 152, 32, 0.25), transparent 70%), var(--wp--preset--color--ink); color: rgba(255, 255, 255, 0.78); }
.as-cnsealed::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 80% at 50% 50%, #000 30%, transparent 100%); }
.as-cnsealed__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--wp--preset--spacing--60); align-items: center; }
.as-cnsealed__text h2 { margin: 0.5rem 0 1.25rem; font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--wp--preset--color--white); }
.as-cnsealed__text p { font-size: 1.0625rem; line-height: 1.7; }
.as-cnsealed__text .as-cnsealed__lead { font-size: 1.1875rem; color: var(--wp--preset--color--white); }
.as-cnsealed__quote { display: inline-block; margin: 0.5rem 0 0; padding: 0.6rem 1.1rem; border-radius: 14px; border-inline-start: 3px solid var(--wp--preset--color--orange); background: rgba(255, 255, 255, 0.06); font-weight: 700; color: var(--wp--preset--color--white); }
.as-cnsealed__visual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.as-cnpriv { padding: 1.5rem; border-radius: 22px; }
.as-cnpriv--see { background: var(--wp--preset--color--white); color: var(--wp--preset--color--title); }
.as-cnpriv--private { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--wp--preset--color--white); }
.as-cnpriv__title { margin: 0 0 1rem; font-size: 1.25rem; color: inherit; }
.as-cnpriv ul { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.as-cnpriv li { display: flex; align-items: center; gap: 0.7rem; font-size: 1rem; }
.as-cnpriv__icon { display: grid; place-items: center; flex: none; inline-size: 28px; block-size: 28px; border-radius: 50%; }
.as-cnpriv--see .as-cnpriv__icon { background: #e5f6ec; color: #1f8a4c; }
.as-cnpriv--private .as-cnpriv__icon { background: rgba(239, 152, 32, 0.18); color: var(--wp--preset--color--orange); }
.as-cnbids { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.9rem 1rem; border-radius: 18px; background: rgba(255, 255, 255, 0.04); border: 1px dashed rgba(255, 255, 255, 0.2); font-size: 0.8125rem; }
.as-cnbids__label { margin-inline-end: 0.25rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.as-cnbids__bid { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: var(--wp--preset--color--white); }
.as-cnbids__bid svg { color: var(--wp--preset--color--orange); }
.as-cnbids__arrow { display: inline-flex; color: rgba(255, 255, 255, 0.5); }
.as-cnbids__brand { padding: 0.35rem 0.75rem; border-radius: 10px; background: var(--wp--preset--gradient--brand); font-weight: 700; color: var(--wp--preset--color--white); }

/* Membership and checks: cream band, two rich cards. */
.as-cntrust { background: linear-gradient(180deg, var(--wp--preset--color--cream), var(--wp--preset--color--white)); }
.as-cntrust__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
.as-cnmember, .as-cncheck { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.75rem, 3vw, 2.5rem); border-radius: 28px; overflow: hidden; }
.as-cnmember .as-eyebrow, .as-cncheck .as-eyebrow { margin: 0; }
.as-cnmember h2, .as-cncheck h2 { margin: 0.5rem 0 1rem; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.15; letter-spacing: -0.02em; }
.as-cnmember { background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.3); box-shadow: 0 30px 60px -36px rgba(223, 34, 41, 0.45); }
.as-cnmember::before { content: ""; position: absolute; inset-block-start: -120px; inset-inline-end: -120px; inline-size: 280px; block-size: 280px; border-radius: 50%; background: radial-gradient(closest-side, rgba(239, 152, 32, 0.22), transparent); pointer-events: none; }
.as-cnmember__price { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.75rem; }
.as-cnmember__price strong { font-size: clamp(2.75rem, 2rem + 2.5vw, 3.75rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; background: var(--wp--preset--gradient--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.as-cnmember__price span { font-size: 1.0625rem; font-weight: 600; color: var(--wp--preset--color--muted); }
.as-cnmember__intro { margin: 0 0 0.75rem; font-weight: 600; color: var(--wp--preset--color--title); }
.as-cnmember__list { display: grid; gap: 0.6rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.as-cnmember__free { display: flex; align-items: center; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0.75rem 1rem; border-radius: 14px; background: #e5f6ec; font-size: 0.9375rem; font-weight: 600; color: #1f6b3d; }
.as-cnmember__free svg { flex: none; }
.as-cncheck { background: radial-gradient(60% 60% at 100% 0%, rgba(239, 152, 32, 0.25), transparent 70%), var(--wp--preset--color--ink); color: rgba(255, 255, 255, 0.78); }
.as-cncheck h2 { color: var(--wp--preset--color--white); }
.as-cncheck__seal { position: absolute; inset-block-start: 1.75rem; inset-inline-end: 1.75rem; display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 20px; background: var(--wp--preset--gradient--brand-angled); color: var(--wp--preset--color--white); box-shadow: 0 16px 30px -14px rgba(223, 34, 41, 0.7); }
.as-cncheck__list { display: grid; gap: 0.9rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.as-cncheck__list li { padding-inline-start: 1rem; border-inline-start: 2px solid rgba(239, 152, 32, 0.6); line-height: 1.55; }
.as-cncheck__list strong { display: block; color: var(--wp--preset--color--white); }
.as-cncheck__label { margin: auto 0 0.6rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.65); }
.as-cncheck__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; }
.as-cncheck__chips span { padding: 0.4rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.8125rem; font-weight: 600; color: var(--wp--preset--color--white); }

/* Audits you can source: three cards, each with a warm top edge and an icon tile. */
.as-cnsrc__aside { max-inline-size: 22rem; margin: 0; color: var(--wp--preset--color--muted); }
.as-cnsrc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.as-cnsrc__card { position: relative; padding: 1.75rem; border-radius: var(--as-radius-card); background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.2); box-shadow: 0 1px 2px rgba(19, 26, 26, 0.05), 0 16px 40px -18px rgba(19, 26, 26, 0.22); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.as-cnsrc__card::before { content: ""; position: absolute; inset: 0 0 auto; block-size: 4px; background: var(--wp--preset--gradient--brand); }
.as-cnsrc__card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -20px rgba(223, 34, 41, 0.3); }
.as-cnsrc__icon { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 16px; background: rgba(237, 135, 35, 0.12); color: var(--wp--preset--color--orange-red); }
.as-cnsrc__title { margin: 1rem 0 0.85rem; font-size: 1.3125rem; color: var(--wp--preset--color--title); }
.as-cnsrc__list { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.as-cnsrc__list li { position: relative; padding-inline-start: 1.1rem; line-height: 1.5; color: var(--wp--preset--color--body); }
.as-cnsrc__list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.6em; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--wp--preset--gradient--brand); }
.as-cnsrc__list a { font-weight: 700; color: var(--wp--preset--color--orange-red); text-decoration: none; }
.as-cnsrc__list a:hover { text-decoration: underline; }

/* Final CTA visual: the AutoSmart mark with three floating chips. */
.as-cncta__visual { position: relative; display: grid; place-items: center; min-block-size: 260px; }
.as-cncta__logo { display: grid; place-items: center; inline-size: 132px; block-size: 132px; border-radius: 34px; background: var(--wp--preset--color--white); box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.16), 0 0 0 30px rgba(255, 255, 255, 0.08), 0 30px 60px -20px rgba(19, 26, 26, 0.45); }
.as-cta__visual .as-cncta__logo img { inline-size: 72px; block-size: 72px; filter: none; }
.as-cncta__chip { position: absolute; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border-radius: 999px; background: var(--wp--preset--color--white); font-size: 0.875rem; font-weight: 700; color: var(--wp--preset--color--title); box-shadow: 0 14px 30px -14px rgba(19, 26, 26, 0.5); }
.as-cncta__chip svg { color: var(--wp--preset--color--orange-red); }
.as-cncta__chip--a { inset-block-start: 8%; inset-inline-start: 8%; }
.as-cncta__chip--b { inset-block-start: 22%; inset-inline-end: 4%; }
.as-cncta__chip--c { inset-block-end: 8%; inset-inline-start: 22%; }

@media (max-width: 1024px) {
	.as-cnhero__inner, .as-cnwhat__inner, .as-cnsealed__inner { grid-template-columns: minmax(0, 1fr); }
	.as-cnmap { justify-self: start; }
	.as-cnsrc__grid { grid-template-columns: minmax(0, 1fr); }
	.as-cnhow__inner.is-switched .as-cnsteps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 781px) {
	.as-cnsides__panels, .as-cntrust__inner { grid-template-columns: minmax(0, 1fr); }
	.as-cncta__visual { min-block-size: 220px; }
}

@media (max-width: 600px) {
	.as-cnsealed__visual { grid-template-columns: minmax(0, 1fr); }
	.as-cnhow__inner.is-switched .as-cnsteps__list { grid-template-columns: minmax(0, 1fr); }
	.as-cnswitch__btn { padding: 0.6rem 0.9rem; font-size: 0.875rem; }
	.as-cncheck__seal { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.as-cnside, .as-cnsteps { animation: none; }
	.as-cnsrc__card:hover { transform: none; }
}

/* ---------- Most read (layout.md 29): blog hub, post sidebar, Industry Insights hub ---------- */

/* Blog hub: warm band with grid texture; four cards, each with its cover and a big gradient rank number. */
.as-mostread { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(45% 80% at 0% 0%, rgba(239, 152, 32, 0.16), transparent 70%), radial-gradient(40% 70% at 100% 100%, rgba(223, 34, 41, 0.1), transparent 70%), var(--wp--preset--color--cream); }
.as-mostread::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(19, 26, 26, 0.045) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(19, 26, 26, 0.045) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: radial-gradient(70% 90% at 50% 40%, #000 20%, transparent 100%); mask-image: radial-gradient(70% 90% at 50% 40%, #000 20%, transparent 100%); }
.as-mostread__note { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0.45rem 0.9rem; border-radius: 999px; background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.25); font-size: 0.8125rem; font-weight: 600; color: var(--wp--preset--color--body); }
.as-mostread__note svg { color: var(--wp--preset--color--orange-red); }
.as-mostread__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.as-mostread__item { display: flex; }
.as-mostread__card { display: flex; flex: 1; flex-direction: column; overflow: hidden; border-radius: var(--as-radius-card); background: var(--wp--preset--color--white); border: 1px solid rgba(237, 135, 35, 0.2); box-shadow: 0 1px 2px rgba(19, 26, 26, 0.05), 0 16px 40px -18px rgba(19, 26, 26, 0.22); color: inherit; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.as-mostread__card:is(:hover, :focus-visible) { transform: translateY(-4px); border-color: rgba(239, 152, 32, 0.6); box-shadow: 0 24px 50px -20px rgba(223, 34, 41, 0.35); }
.as-mostread__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--wp--preset--color--title); }
.as-mostread__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 40%, rgba(13, 19, 19, 0.75)); pointer-events: none; }
.as-mostread__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 0.6s ease; }
.as-mostread__card:hover .as-mostread__img { transform: scale(1.05); }
.as-mostread__poster { display: grid; place-items: center; block-size: 100%; color: rgba(255, 255, 255, 0.9); background: linear-gradient(135deg, #2B3236, #131A1A 55%, #5A2A1E); }
.as-mostread__rank { position: absolute; z-index: 1; inset-block-end: 0.35rem; inset-inline-start: 1rem; font-size: 4rem; font-weight: 800; line-height: 1; letter-spacing: -0.05em; background: var(--wp--preset--gradient--brand); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35)); }
.as-mostread__body { display: flex; flex: 1; flex-direction: column; gap: 0.5rem; padding: 1.15rem 1.25rem 1.2rem; }
.as-mostread__topic { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--orange-red); }
.as-mostread__title { margin: 0; font-size: 1.0625rem; line-height: 1.35; color: var(--wp--preset--color--title); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.as-mostread__card:hover .as-mostread__title { color: var(--wp--preset--color--red); }
.as-mostread__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-block-start: auto; padding-block-start: 0.75rem; border-block-start: 1px solid var(--wp--preset--color--line); font-size: 0.8125rem; color: var(--wp--preset--color--muted); }
.as-mostread__go { font-weight: 700; color: var(--wp--preset--color--orange-red); transition: transform 0.2s ease; }
.as-mostread__card:hover .as-mostread__go { transform: translateX(3px); }

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

/* Phones: compact rows, a square photo with the rank on the left. */
@media (max-width: 600px) {
	.as-mostread__list { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
	.as-mostread__card { flex-direction: row; }
	.as-mostread__media { flex: 0 0 112px; aspect-ratio: auto; min-block-size: 112px; }
	.as-mostread__rank { inset-inline-start: 0.6rem; inset-block-end: 0.2rem; font-size: 2.75rem; }
	.as-mostread__body { padding: 0.85rem 1rem; gap: 0.35rem; }
	.as-mostread__title { font-size: 0.9375rem; }
	.as-mostread__meta { padding-block-start: 0.4rem; }
}

/* Post sidebar: a compact numbered list under "On this page", numbers in the brand gradient. */
.as-sidepop { padding: 1.1rem 1.25rem; border-radius: 20px; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); box-shadow: 0 2px 24px -14px rgba(19, 26, 26, 0.2); font-size: 0.875rem; }
.as-sidepop__title { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.6rem; font-weight: 700; color: var(--wp--preset--color--title); }
.as-sidepop__title svg { color: var(--wp--preset--color--orange-red); }
.as-sidepop ol { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; counter-reset: pop; }
.as-sidepop li { counter-increment: pop; }
.as-sidepop a { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); align-items: baseline; padding: 0.35rem 0; color: var(--wp--preset--color--body); line-height: 1.35; text-decoration: none; }
.as-sidepop a > * { min-inline-size: 0; }
.as-sidepop a::before { content: counter(pop); font-size: 1.05rem; font-weight: 800; background: var(--wp--preset--gradient--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.as-sidepop a:is(:hover, :focus-visible) { color: var(--wp--preset--color--orange-red); }

/* Industry Insights hub: dark band with glows; three paper covers with a round gradient rank badge. */
.as-inspop { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(40% 70% at 100% 0%, rgba(239, 152, 32, 0.22), transparent 70%), radial-gradient(40% 70% at 0% 100%, rgba(223, 34, 41, 0.18), transparent 70%), #0d1313; color: rgba(255, 255, 255, 0.75); }
.as-inspop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%); }
.as-inspop .as-head h2 { color: var(--wp--preset--color--white); }
.as-inspop .as-mostread__note { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.8); }
.as-inspop__item .as-paper__link { position: relative; }
.as-inspop__rank { position: absolute; z-index: 2; inset-block-start: 0.9rem; inset-inline-end: 0.9rem; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--wp--preset--gradient--brand); box-shadow: 0 10px 24px -8px rgba(223, 34, 41, 0.6); font-size: 1.25rem; font-weight: 800; color: var(--wp--preset--color--white); }

@media (prefers-reduced-motion: reduce) {
	.as-mostread__card:is(:hover, :focus-visible), .as-mostread__card:hover .as-mostread__img, .as-mostread__card:hover .as-mostread__go { transform: none; }
}

/* ---------- Home spotlight ("What's new", patterns/home-spotlight.php; edited in WP admin → AutoSmart → Home spotlights) ---------- */

/* Dark card with a gradient edge, grid texture and drifting glow; text left, picture or coded visual right. */
.as-spot { padding-block: var(--wp--preset--spacing--50); }
.as-spot__card { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: var(--wp--preset--spacing--50); padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.5rem, 4.5vw, 4rem); border-radius: 32px; background: radial-gradient(50% 90% at 100% 50%, rgba(239, 152, 32, 0.28), transparent 70%), radial-gradient(40% 80% at 0% 100%, rgba(223, 34, 41, 0.22), transparent 70%), var(--wp--preset--color--ink); color: rgba(255, 255, 255, 0.78); box-shadow: 0 40px 80px -40px rgba(223, 34, 41, 0.55); }
.as-spot__card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; background: linear-gradient(120deg, rgba(239, 152, 32, 0.9), rgba(255, 255, 255, 0.08) 40%, rgba(223, 34, 41, 0.8)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.as-spot__card::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 48px 48px; -webkit-mask-image: radial-gradient(60% 90% at 75% 50%, #000 20%, transparent 100%); mask-image: radial-gradient(60% 90% at 75% 50%, #000 20%, transparent 100%); }
.as-spot__glow { position: absolute; z-index: -1; inset-block-start: -40%; inset-inline-end: -10%; inline-size: 420px; block-size: 420px; border-radius: 50%; background: rgba(239, 152, 32, 0.25); filter: blur(70px); animation: as-drift 16s ease-in-out infinite alternate; pointer-events: none; }
.as-spot__tag { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; padding: 0.35rem 0.9rem 0.35rem 0.35rem; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--orange); }
.as-spot__badge { padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--wp--preset--gradient--brand); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; color: var(--wp--preset--color--white); box-shadow: 0 0 0 4px rgba(239, 152, 32, 0.18); }
.as-spot__title { max-inline-size: 22ch; margin: 0 0 1rem; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--wp--preset--color--white); }
.as-spot__lead { max-inline-size: 36rem; margin: 0; font-size: 1.0625rem; line-height: 1.65; }
.as-spot__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 1.75rem; }
.as-spot__cta .as-btn { gap: 0.45rem; }

/* Picture side: the featured image in a glowing frame, or the icon tile with rings and floating chips. */
.as-spot__visual { position: relative; display: grid; place-items: center; min-block-size: 260px; }
.as-spot__img { display: block; inline-size: 100%; block-size: auto; max-block-size: 340px; object-fit: cover; border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.as-spot__rings { position: absolute; inline-size: 240px; block-size: 240px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 40px rgba(255, 255, 255, 0.025), 0 0 0 80px rgba(255, 255, 255, 0.015); }
.as-spot__icon { position: relative; display: grid; place-items: center; inline-size: 112px; block-size: 112px; border-radius: 32px; background: var(--wp--preset--gradient--brand-angled); color: var(--wp--preset--color--white); box-shadow: 0 0 0 10px rgba(239, 152, 32, 0.14), 0 30px 60px -20px rgba(223, 34, 41, 0.75); }
.as-spot__chip { position: absolute; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border-radius: 999px; background: var(--wp--preset--color--white); font-size: 0.875rem; font-weight: 700; color: var(--wp--preset--color--title); white-space: nowrap; box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.7); animation: as-spotfloat 6s ease-in-out infinite alternate; }
.as-spot__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--wp--preset--gradient--brand); }
.as-spot__chip--1 { inset-block-start: 10%; inset-inline-start: 4%; }
.as-spot__chip--2 { inset-block-start: 42%; inset-inline-end: 0; animation-delay: -2s; }
.as-spot__chip--3 { inset-block-end: 8%; inset-inline-start: 14%; animation-delay: -4s; }
@keyframes as-spotfloat { to { transform: translateY(-8px); } }

@media (max-width: 781px) {
	.as-spot__card { grid-template-columns: minmax(0, 1fr); }
	.as-spot__visual { min-block-size: 230px; }
}

@media (prefers-reduced-motion: reduce) {
	.as-spot__glow, .as-spot__chip { animation: none; }
}

/* Checklist and guidebook PDF form (#get-pdf, autosmart_pdf_download_form()): email and button side by side, consent under. */
.as-chkpdf__card { scroll-margin-block-start: calc(var(--as-header-h) + 1.5rem); }
.as-pdfform { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; max-inline-size: 34rem; }
.as-pdfform__email { flex: 1 1 15rem; }
.as-pdfform__email input { box-sizing: border-box; inline-size: 100%; padding: 0.9rem 1.1rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: rgba(255, 255, 255, 0.95); font: inherit; color: var(--wp--preset--color--title); }
.as-pdfform__email input:focus-visible { outline: 2px solid var(--wp--preset--color--orange); outline-offset: 2px; }
.as-pdfform .as-btn { flex: none; gap: 0.35rem; }
.as-pdfform__consent { display: flex; align-items: flex-start; gap: 0.55rem; flex-basis: 100%; font-size: 0.875rem; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.as-pdfform__consent input { flex: none; inline-size: 18px; block-size: 18px; margin: 0.1rem 0 0; accent-color: var(--wp--preset--color--orange); }
.as-pdfform__consent a { color: var(--wp--preset--color--white); text-decoration-color: var(--wp--preset--color--orange); text-underline-offset: 3px; }
.as-pdfform--ready { flex-direction: column; align-items: flex-start; }
.as-pdfform__title { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--wp--preset--color--white); }
.as-pdfform__title svg { color: #2fd38a; }

/* ==========================================================================
   Features: T8 feature pages (single-feature.html) and the T9 Features hub (page-features.html). Built on the
   solution page and Solutions hub styles; only what they don't have is here.
   ========================================================================== */

/* Feature hero: the plans line under the buttons, the UI card in the app window, or the dark icon panel. */
.as-fhero__plans { display: flex; align-items: flex-start; gap: 0.5rem; margin: 1.25rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--wp--preset--color--muted); }
.as-fhero__plans svg { flex: none; margin-block-start: 0.2rem; color: var(--wp--preset--color--orange-red); }
.as-fhero__plans strong { color: var(--wp--preset--color--title); }
.as-fhero__screen { display: grid; place-items: center; padding: 1rem; background: linear-gradient(180deg, var(--wp--preset--color--cream), var(--wp--preset--color--white)); }
.as-fhero__img { display: block; inline-size: auto; max-inline-size: 100%; block-size: auto; max-block-size: 520px; }
.as-fpanel { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; aspect-ratio: 5 / 4; padding: 2rem; border-radius: 28px; background: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 40px 40px, var(--wp--preset--color--ink); box-shadow: 0 50px 100px -50px rgba(19, 26, 26, 0.7); text-align: center; }
.as-fpanel__glow { position: absolute; inset: -30% -20% auto auto; z-index: -1; inline-size: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(239, 152, 32, 0.45), transparent); }
.as-fpanel__icon { display: grid; place-items: center; inline-size: 104px; block-size: 104px; border-radius: 30px; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); box-shadow: 0 30px 60px -24px rgba(223, 34, 41, 0.8); }
.as-fpanel__name { font-size: clamp(1.375rem, 1rem + 1vw, 1.875rem); font-weight: 800; letter-spacing: -0.02em; color: var(--wp--preset--color--white); }
.as-fpanel__flow { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.as-fpanel__flow span { padding: 0.4rem 0.9rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.8125rem; font-weight: 700; color: rgba(255, 255, 255, 0.72); }
.as-fpanel__flow span.is-on { border-color: transparent; background: var(--wp--preset--gradient--brand); color: var(--wp--preset--color--white); }

/* "What is ...?": the answer-first definition beside the At a glance box. */
.as-fwhat { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.as-fwhat > * { margin: 0; }
.as-fwhat__def > * { margin: 0; }
.as-fwhat__lead { font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.65; color: var(--wp--preset--color--title); }
.as-fglance { padding: 1.5rem 1.6rem; border-radius: 24px; background: linear-gradient(180deg, var(--wp--preset--color--cream), var(--wp--preset--color--white)); border: 1px solid rgba(237, 135, 35, 0.22); box-shadow: 0 30px 60px -40px rgba(223, 34, 41, 0.35); }
.as-fglance > * { margin: 0; }
.as-fglance__title { margin-block-end: 0.5rem !important; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--orange-red); }
.as-fglance__row { padding-block: 0.75rem; border-block-start: 1px solid var(--wp--preset--color--line); font-size: 0.9375rem; line-height: 1.5; color: var(--wp--preset--color--title); }
.as-fglance__row strong { display: block; margin-block-end: 0.15rem; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.as-fglance__link { padding-block-start: 0.85rem; border-block-start: 1px solid var(--wp--preset--color--line); }
.as-fglance__link a { font-weight: 700; color: var(--wp--preset--color--orange-red); text-decoration: none; }

/* Capabilities without a UI card: the numbered light cards, two per row, with a short tick list. */
.as-fcaps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.as-irole__points { margin: 0.85rem 0 0 !important; padding: 0; list-style: none; }
.as-irole__points li { position: relative; margin: 0 0 0.35rem; padding-inline-start: 1.4rem; font-size: 0.9375rem; font-weight: 600; color: var(--wp--preset--color--title); }
.as-irole__points li::before { content: ""; position: absolute; inset-block-start: 0.3rem; inset-inline-start: 0.15rem; inline-size: 0.35rem; block-size: 0.65rem; border: solid var(--wp--preset--color--orange-red); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* "Where it is used": solution and industry chips. */
.as-fused { display: grid; gap: 1rem; padding: 1.5rem 1.6rem; border-radius: 24px; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); box-shadow: 0 2px 20px -12px rgba(19, 26, 26, 0.15); }
.as-fused > * { margin: 0; }
.as-fused__row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; align-items: center; }
.as-fused__row > * { margin: 0; }
.as-fused__label { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.as-fused__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.as-fused__chips li { margin: 0; }
.as-fused__chips a { display: inline-block; padding: 0.5rem 1rem; border-radius: 999px; background: var(--wp--preset--color--cream); border: 1px solid rgba(237, 135, 35, 0.22); font-size: 0.9375rem; font-weight: 700; color: var(--wp--preset--color--title); text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease; }
.as-fused__chips a:hover { border-color: var(--wp--preset--color--orange); color: var(--wp--preset--color--orange-red); }

/* Hub cards: the plans line; related features: three cards above the other tiles; browse labels. */
.as-featcard__plans { display: block; padding-block-start: 0.75rem; border-block-start: 1px dashed var(--wp--preset--color--line); font-size: 0.8125rem; line-height: 1.45; color: var(--wp--preset--color--muted); }
.as-featgrid .as-solgrid__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.as-frelated__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.as-featbrowse__label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.75rem 0 0.85rem; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.as-featbrowse__label .as-link { letter-spacing: 0; text-transform: none; }
/* Browse tiles on an even grid (user, 2026-10-15): solutions 4 per row, industries 5, every tile the same width and height. */
.as-featbrowse .as-solind__dock ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.as-featbrowse .as-featbrowse__ind ul { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.as-featbrowse .as-solind__dock a { block-size: 100%; box-sizing: border-box; }
.as-featbrowse .as-indhero__icon { flex: none; }
.as-featpage .as-icovers:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1024px) {
	.as-featgrid .as-solgrid__grid, .as-frelated__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-featgrid .as-solgrid__grid > :last-child:nth-child(odd), .as-frelated__cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
	.as-featbrowse .as-solind__dock ul, .as-featbrowse .as-featbrowse__ind ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-featbrowse .as-solind__dock li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
	.as-fwhat, .as-fcaps { grid-template-columns: minmax(0, 1fr); }
	.as-fused__row { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
	.as-featpage .as-icovers:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
	.as-featgrid .as-solgrid__grid, .as-frelated__cards { grid-template-columns: minmax(0, 1fr); }
	.as-fpanel { aspect-ratio: auto; min-block-size: 300px; }
	.as-featbrowse .as-solind__dock ul, .as-featbrowse .as-featbrowse__ind ul { grid-template-columns: minmax(0, 1fr); }
}

/* Guidebooks hub pages (2026-10-14): the shared ← 1 2 3 → pager, drawn as buttons by assets/js/guidebooks.js. */
.as-pager[hidden] { display: none; }
.as-pager button.page-numbers { font: inherit; font-weight: 700; cursor: pointer; }
.as-pager button.page-numbers:hover { border-color: var(--wp--preset--color--orange); box-shadow: 0 10px 24px -14px rgba(223, 34, 41, 0.5); }
.as-pager button.page-numbers:focus-visible { outline: 2px solid var(--wp--preset--color--orange); outline-offset: 2px; }

/* ---------- Feature page fixes (2026-10-14, user: too much white space; results off-theme; related cards disorganised) ----------
 * Section: Overview beside At a glance; Results as the dark showcase card; one even grid of the other features.
 * SEO: Layout only; headings, link text and order of the text content are unchanged apart from Results moving up.
 */

/* Overview: eyebrow, H2 and definition on the left, At a glance centred beside them, no gap under a short definition. */
.as-featpage .as-fwhat { align-items: center; }
.as-featpage .as-fwhat__def .as-eyebrow { margin-block-end: 0.75rem; }
.as-featpage .as-fwhat__def h2 { margin-block-end: 1rem; }

/* Results: the site's dark showcase card (grid texture, warm glows), like the Solutions and Features hub numbers; solution and industry pages too (user 2026-10-14 and 2026-10-15: the cream strip was off-theme). */
.as-featpage .as-isec--proof, .as-solpage .as-isec--proof, .as-indpage .as-isec--proof {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(2rem, 5vw, 3.25rem) clamp(1.5rem, 5vw, 3.5rem);
	border-radius: 36px;
	background:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 48px 48px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 48px 48px,
		radial-gradient(560px circle at 0% 0%, rgba(239, 152, 32, 0.34), transparent 60%),
		radial-gradient(520px circle at 100% 100%, rgba(223, 34, 41, 0.32), transparent 60%),
		var(--wp--preset--color--ink);
	box-shadow: 0 50px 100px -50px rgba(19, 26, 26, 0.7);
}
.as-featpage .as-isec--proof h2, .as-solpage .as-isec--proof h2, .as-indpage .as-isec--proof h2 { color: var(--wp--preset--color--white); }
.as-featpage .as-isec--proof .as-eyebrow, .as-solpage .as-isec--proof .as-eyebrow, .as-indpage .as-isec--proof .as-eyebrow { color: var(--wp--preset--color--orange); }
.as-featpage .as-isec--proof .as-iproofs, .as-solpage .as-isec--proof .as-iproofs, .as-indpage .as-isec--proof .as-iproofs { margin-block: 1.25rem 0; border: 0; border-radius: 0; background: none; }
.as-featpage .as-isec--proof .as-iproof, .as-solpage .as-isec--proof .as-iproof, .as-indpage .as-isec--proof .as-iproof { padding: 0.5rem clamp(1rem, 3vw, 2.25rem); }
.as-featpage .as-isec--proof .as-iproof:first-child, .as-solpage .as-isec--proof .as-iproof:first-child, .as-indpage .as-isec--proof .as-iproof:first-child { padding-inline-start: 0; }
.as-featpage .as-isec--proof .as-iproof + .as-iproof, .as-solpage .as-isec--proof .as-iproof + .as-iproof, .as-indpage .as-isec--proof .as-iproof + .as-iproof { border-inline-start: 1px solid rgba(255, 255, 255, 0.12); }
.as-featpage .as-isec--proof .as-iproof__num, .as-solpage .as-isec--proof .as-iproof__num, .as-indpage .as-isec--proof .as-iproof__num { font-size: clamp(2.5rem, 1.8rem + 2.2vw, 3.5rem); background: linear-gradient(120deg, #FFC27A, #EF9820 45%, #F25C3B); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }
.as-featpage .as-isec--proof .as-iproof__label, .as-solpage .as-isec--proof .as-iproof__label, .as-indpage .as-isec--proof .as-iproof__label { color: rgba(255, 255, 255, 0.8); }
.as-featpage .as-isec--proof .as-iproof__link a, .as-solpage .as-isec--proof .as-iproof__link a, .as-indpage .as-isec--proof .as-iproof__link a { color: var(--wp--preset--color--orange); }

/* Works with the rest: one card size in a three-column grid, with the audit stage as a small chip. */
.as-frelated__cards { margin: 0; }
.as-frelated__stage { padding: 0.3rem 0.75rem; border-radius: 999px; background: #FFF4E5; border: 1px solid rgba(237, 135, 35, 0.22); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #9A4A0B; }

/* Results stack at 1024px (as .as-iproofs does): dividers turn horizontal. */
@media (max-width: 1024px) {
	.as-featpage .as-isec--proof .as-iproof, .as-featpage .as-isec--proof .as-iproof:first-child, .as-solpage .as-isec--proof .as-iproof, .as-solpage .as-isec--proof .as-iproof:first-child, .as-indpage .as-isec--proof .as-iproof, .as-indpage .as-isec--proof .as-iproof:first-child { padding: 1.25rem 0; }
	.as-featpage .as-isec--proof .as-iproof + .as-iproof, .as-solpage .as-isec--proof .as-iproof + .as-iproof, .as-indpage .as-isec--proof .as-iproof + .as-iproof { border-inline-start: 0; border-block-start: 1px solid rgba(255, 255, 255, 0.12); }
}

/* ---------- Legal pages, one column (2026-10-14, user: the contents panel stuck at the top left looked ugly) ----------
 * Section: Privacy Policy, Terms and Sub-processors (templates/page-legal.html): one centred reading column, the
 * contents as a row of chips under the date, data tables in the site's card style. The Code of Conduct keeps its own layout.
 * SEO: Layout only; the H1, the numbered H2 anchors and the contents links are unchanged.
 */

/* Title band and text share one centred column. */
.as-legal .as-legal__hero > .alignwide,
.as-legal .as-legal__body { max-inline-size: 46rem; margin-inline: auto !important; }
.as-legal .as-legal__body { display: block; }
.as-legal .as-legal__body > * { max-inline-size: none; }

/* Date line, then the contents chips, then a divider before the first section. */
.as-legal .as-legal__meta { padding-block-end: 0; margin-block-end: 1.25rem !important; border: 0; }
.as-legal .as-legal__body > .as-legal__toc {
	position: static;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 0.75rem;
	max-block-size: none;
	overflow: visible;
	margin-block: 0 2rem;
	padding: 0 0 1.75rem;
	border-radius: 0;
	border-block-end: 1px solid var(--wp--preset--color--line);
	background: none;
}
.as-legal .as-legal__toc-title { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.as-legal .as-legal__toc ol { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.as-legal .as-legal__toc a {
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	border: 1px solid rgba(237, 135, 35, 0.22);
	background: var(--wp--preset--color--cream);
	font-weight: 600;
	color: var(--wp--preset--color--title);
	transition: border-color 0.2s ease, color 0.2s ease;
}
.as-legal .as-legal__toc a:hover { border-color: var(--wp--preset--color--orange); color: var(--wp--preset--color--orange-red); }
.as-legal .as-legal__body > h2:first-of-type { margin-block-start: 0; }

/* Data tables (Sub-processors): a rounded card with a cream header row and soft row lines, not black grid borders. */
.as-legal__body .wp-block-table { overflow-x: auto; border: 1px solid rgba(237, 135, 35, 0.22); border-radius: 16px; background: var(--wp--preset--color--white); }
.as-legal__body .wp-block-table table { inline-size: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.as-legal__body .wp-block-table thead { border: 0; }
.as-legal__body .wp-block-table th,
.as-legal__body .wp-block-table td { padding: 0.8rem 1rem; border: 0; border-block-end: 1px solid var(--wp--preset--color--line); text-align: start; vertical-align: top; }
.as-legal__body .wp-block-table th { background: var(--wp--preset--color--cream); font-weight: 700; color: var(--wp--preset--color--title); white-space: nowrap; }
.as-legal__body .wp-block-table td:first-child { font-weight: 600; color: var(--wp--preset--color--title); }
.as-legal__body .wp-block-table tbody tr:last-child td { border-block-end: 0; }

/* Footer "Cookie settings" (2026-10-14): a button that reopens the cookie card (AutoSmart Core), styled as the legal links. */
.as-footer__cookies { padding: 0; border: 0; background: none; font: inherit; color: var(--wp--preset--color--body); cursor: pointer; transition: color 0.2s ease; }
.as-footer__cookies[hidden] { display: none; }
.as-footer__cookies:hover { color: var(--wp--preset--color--orange); }
.as-footer__cookies:focus-visible { outline: 2px solid var(--wp--preset--color--orange); outline-offset: 2px; }

/* Contact card "Make your first email count" and partner "Useful to include" (2026-10-14, user: no phone numbers;
   these take their place so the cards don't look empty). Ticks in the brand orange on the dark cards. */
.as-ctcard__tips { margin: 1.1rem 0 0; padding: 1.1rem 1.1rem 1rem; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px dashed rgba(239, 152, 32, 0.4); }
.as-ctcard__tipstitle { margin: 0 0 0.65rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.as-ctcard__tips ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.as-ctcard__tips li { position: relative; padding-inline-start: 1.6rem; font-weight: 600; color: var(--wp--preset--color--white); }
.as-ctcard__tips li::before { content: ""; position: absolute; inset-block-start: 0.3rem; inset-inline-start: 0.35rem; inline-size: 0.35rem; block-size: 0.7rem; border: solid var(--wp--preset--color--orange); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.as-ctcard__tipsnote { margin: 0.8rem 0 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); }

.as-ptapply__talk > .as-ptapply__tipstitle { margin: 1.5rem 0 0.75rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.as-ptapply__talk ol.as-ptapply__tips { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; counter-reset: as-pttip; }
.as-ptapply__tips li { counter-increment: as-pttip; display: flex; align-items: center; gap: 0.7rem; font-weight: 600; color: var(--wp--preset--color--white); }
.as-ptapply__tips li::before { content: counter(as-pttip); display: grid; place-items: center; flex: none; inline-size: 1.6rem; block-size: 1.6rem; border-radius: 8px; background: var(--wp--preset--gradient--brand); font-size: 0.75rem; font-weight: 800; color: var(--wp--preset--color--white); }