/* ---------- Shared container ----------
   --gl-inset is the one formula every section below uses to line its
   content up with everything else on the page: header, footer, hero copy,
   feature grid, both solution-page sections, and the generic-page prose
   column. It reads its two raw numbers — 1400px content width, 24px
   minimum gutter — from theme.json's settings.custom (--wp--custom--
   content-width / --wp--custom--gutter-min), so both live as real design
   tokens in exactly one place, not copy-pasted across a dozen rules.
   Content caps at 1400px and stays centered on wide screens, with the
   24px gutter also becoming the mobile-safe side padding once the
   viewport drops below 1400 + 2*24.

   Before this, every section declared its own one-off width (1200px,
   1000px, 680px...) plus separately-compounding CSS padding, so nothing
   lined up — the left edge jumped by up to 200px between sections on the
   same page. Fixing that then left --gl-inset's formula itself copy-pasted
   verbatim into four different rules (and a fifth, equivalent-but-
   differently-expressed version using max-width+margin:auto instead of
   padding, achieving the same result through different-looking code) —
   consolidated here into one custom property the rest of the file reads
   instead of redefining. */

:root {
	--gl-inset: max(
		var(--wp--custom--gutter-min),
		calc(
			(100% - var(--wp--custom--content-width) - 2 * var(--wp--custom--gutter-min)) / 2
				+ var(--wp--custom--gutter-min)
		)
	);
}

.site-header__inner,
.site-footer,
.feature-grid,
.page-hero__split,
.solution-split,
.solution-usecases,
.solution-usecases__heading {
	padding-left: var(--gl-inset);
	padding-right: var(--gl-inset);
	box-sizing: border-box;
}

/* ---------- Product accent colours ----------
   Each of the four products has its own accent (theme.json palette). On
   its page, and on its card in the home feature grid, the product colour
   simply takes over the accent token, so every accent-coloured detail —
   eyebrow, title suffix, icons, hover states, focus rings, the primary
   button hover — follows it without per-element rules. The header and
   footer (template parts) keep the GrowthLoom brand accent. */

body.gl-product--loombuilder .wp-site-blocks > :not(.wp-block-template-part),
.feature-card--loombuilder {
	--wp--preset--color--accent: var(--wp--preset--color--loombuilder);
}

body.gl-product--loomagent .wp-site-blocks > :not(.wp-block-template-part),
.feature-card--loomagent {
	--wp--preset--color--accent: var(--wp--preset--color--loomagent);
}

body.gl-product--loomagent .wp-site-blocks > :not(.wp-block-template-part) {
	padding-bottom: 0.5rem;
}

body.gl-product--loomstudio .wp-site-blocks > :not(.wp-block-template-part),
.feature-card--loomstudio {
	--wp--preset--color--accent: var(--wp--preset--color--loomstudio);
}

body.gl-product--loomleads .wp-site-blocks > :not(.wp-block-template-part),
.feature-card--loomleads {
	--wp--preset--color--accent: var(--wp--preset--color--loomleads);
}

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

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--background) 72%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--foreground) 8%, transparent);
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

.site-header__inner {
	width: 100%;
	gap: 2rem;
}

.site-header__logo {
	font-size: 1.5rem !important;
}

.site-header__logo a {
	text-decoration: none;
	letter-spacing: -0.01em;
}

/* Logo: every few seconds a thread of light runs through the letters, like
   a lit strand passing through a loom, and a fine glowing line draws beneath
   the name and fades. Hover plays it straight away. The text stays real
   text; only its fill is a moving gradient. */
.site-header__logo a {
	position: relative;
	display: inline-block;
	background: linear-gradient(
		100deg,
		var(--wp--preset--color--foreground) 0%,
		var(--wp--preset--color--foreground) 38%,
		var(--wp--preset--color--accent) 45%,
		#ffffff 50%,
		var(--wp--preset--color--accent) 55%,
		var(--wp--preset--color--foreground) 62%,
		var(--wp--preset--color--foreground) 100%
	);
	background-size: 300% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: gl-logo-thread 7s cubic-bezier(0.4, 0, 0.2, 1) infinite 1.5s;
}

.site-header__logo a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--accent), transparent);
	box-shadow: 0 0 8px var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	opacity: 0;
	animation: gl-logo-line 7s cubic-bezier(0.4, 0, 0.2, 1) infinite 1.5s;
}

.site-header__logo a:hover,
.site-header__logo a:hover::after {
	animation-duration: 1.6s;
	animation-delay: 0s;
	animation-iteration-count: 1;
}

@keyframes gl-logo-thread {
	0%,
	60% {
		background-position: 100% 0;
		filter: drop-shadow(0 0 0 transparent);
	}

	75% {
		filter: drop-shadow(0 0 7px color-mix(in srgb, var(--wp--preset--color--accent) 70%, transparent));
	}

	90%,
	100% {
		background-position: 0% 0;
		filter: drop-shadow(0 0 0 transparent);
	}
}

@keyframes gl-logo-line {
	0%,
	60% {
		transform: scaleX(0);
		opacity: 0;
	}

	75% {
		transform: scaleX(1);
		opacity: 0.9;
	}

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

@media (prefers-reduced-motion: reduce) {
	.site-header__logo a,
	.site-header__logo a::after {
		animation: none;
	}
}

.site-header__nav .wp-block-navigation__container {
	gap: 2.75rem;
	list-style: none;
}

.site-header__nav a {
	font-size: 0.9375rem;
	text-decoration: none;
}

.site-header__cta .wp-block-button__link {
	font-size: 0.9375rem;
	padding: 0.75rem 1.75rem;
}

/* Accent-filled buttons: the header CTA and any button given the "accent"
   style. The accent token follows the product colour on product pages. */
.site-header__cta .wp-block-button__link,
.is-style-accent .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	font-weight: 600;
}

.site-header__cta .wp-block-button__link:hover,
.is-style-accent .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 80%, white);
}

@media (max-width: 781px) {
	.site-header__nav {
		margin-left: auto;
	}
}

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

/* No room beside the logo and menu on phones; every page opens with its
   own consultation button just below. */
@media (max-width: 600px) {
	.site-header .site-header__cta.wp-block-buttons {
		display: none;
	}
}

/* ---------- Eyebrow label ---------- */

.eyebrow {
	/* display:table (not inline-block): shrink-wraps to the text either
	   way, but a plain margin:0 auto — used by feature-grid-intro and
	   consultation-section__inner to center THEMSELVES as a whole block —
	   only actually centers a block-level box. On inline-block it silently
	   resolves to 0. Block-level display also means this stays flush with
	   its sibling heading wherever it's used un-centered (hero, page-hero,
	   entry-content): both then start at their shared parent's left edge,
	   rather than each getting independently centered on its own width —
	   which, for two elements of different widths, produces two different
	   left edges even though both are "centered" by the same rule. */
	display: table;
	padding: 0.45rem 1.1rem;
	margin-bottom: 1.75rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
	border-radius: 999px;
	color: var(--wp--preset--color--accent);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 6%, transparent);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.7rem;
	font-weight: 500;
}

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

.hero {
	padding-top: clamp(2.5rem, 5vw, 4.5rem);
	padding-bottom: clamp(1rem, 2vw, 1.5rem);
}

/* Copy on the left, the "Start with your business" card floating over the
   weave on the right. */
.hero__top {
	position: relative;
}

/* The strip sets the hero's foot, so it no longer needs hero-weave.css's
   tall minimum height. The ground is the promo video's own colour, so its
   opening frame (.hero__bg) and the video itself sit on it seamlessly. */
.hw-hero.hero {
	min-height: 0;
	background: #080c10;
}

/* The promo video's opening frame, logo painted out: full width at 16:9,
   matching where the video lands when "See how it works" opens it. The
   wrapper fades it out towards the foot of the hero, wherever that falls. */
.hw-hero.hero > .hero__bg-wrap {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
	mask-image: linear-gradient(to bottom, #000 78%, transparent);
}

/* The full 16:9 video frame. .hero__bg is measured by promo-video.js to
   open the video exactly over it. */
.hero__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.hero__bg {
	display: block;
	width: 100%;
	height: 100%;
}

/* The ribbon's own 3D motion (hero-ribbon-loop.mp4): the video's pixels
   1060-1920 x 52-948, placed back at that spot in the frame. The mask is a
   soft circle around the ribbon, inside its even glow, so the edge never
   shows. Hidden until it is actually playing; the still frame beneath is
   the same image. */
.hero__loop {
	position: absolute;
	left: 55.2083%;
	top: 4.8148%;
	width: 44.7917%;
	height: 82.963%;
	object-fit: fill;
	-webkit-mask-image: radial-gradient(51.16% 49.11% at 52.09% 50%, #000 82%, transparent);
	mask-image: radial-gradient(51.16% 49.11% at 52.09% 50%, #000 82%, transparent);
	opacity: 0;
}

.hero__loop.is-playing {
	opacity: 1;
}

/* Phones: an enlarged frame shifted left, so the ribbon sits behind the
   copy. Still 16:9, so the loop and the video hand-off line up as on
   desktop. */
@media (max-width: 860px) {
	.hero__frame {
		left: -126%;
		width: 250%;
	}

	.hw-hero.hero > .hero__bg-wrap {
		opacity: 0.35;
	}
}

/* Wider than the default hero column so the headline sets on two lines; the
   scrim keeps it legible where it overlaps the weave. */
.hero__top .hero__copy {
	max-width: min(calc(760px + var(--gl-inset)), 56%);
	padding-right: 0;
}

.hero__copy {
	/* Left gutter matches the header logo's inset via the shared --gl-inset
	   token (see top of file). Width is also capped to the 42% of the
	   section the canvas doesn't occupy (it sits in the right 58%, see
	   .hw-hero hero-weave below), so copy never runs under it on
	   ultra-wide viewports. */
	max-width: min(calc(620px + var(--gl-inset) + 40px), calc(42% - 24px));
	margin: 0;
	padding-left: var(--gl-inset);
	padding-right: 40px;
	box-sizing: border-box;
}

.hero__eyebrow {
	color: var(--wp--preset--color--accent);
	font-size: 1.0625rem;
	font-weight: 500;
	margin: 0 0 1.25rem;
}

.hero__headline {
	/* Narrower clamp than the xx-large token: this column sits beside the
	   hero-weave canvas (right 58%), not full-width, so the generic
	   full-bleed headline scale wraps too aggressively here. */
	font-size: clamp(2.5rem, 3.9vw, 4rem) !important;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.08;
	margin-bottom: 1.75rem;
}

.hero__headline-accent {
	display: block;
	color: var(--wp--preset--color--accent);
}

@media (max-width: 860px) {
	/* Below 860px hero-weave.css switches the canvas to a full-width,
	   low-opacity background (no more 58% side column to yield to), so the
	   42%-cap and wide gutter above no longer apply — revert to a normal
	   full-width column with modest side padding. */
	.hero__copy {
		max-width: none;
		padding-left: var(--wp--custom--gutter-min);
		padding-right: var(--wp--custom--gutter-min);
	}
}

.hero__subhead {
	max-width: 24em;
	margin-bottom: 0;
	color: color-mix(in srgb, var(--wp--preset--color--foreground) 85%, transparent);
}

.hero__ctas {
	margin-top: 2.25rem;
	gap: 1rem 2rem;
	align-items: center;
}

.hero__ctas .is-style-accent .wp-block-button__link {
	font-size: 1.0625rem;
	padding: 1.05rem 2.5rem;
}

.hero__secondary .wp-block-button__link {
	color: var(--wp--preset--color--foreground);
	font-size: 1.0625rem;
}

.hero__note {
	margin-top: 1.5rem;
	margin-bottom: 0;
}

.hero__card {
	position: absolute;
	right: calc(var(--gl-inset) + 12%);
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1.25rem 2rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
	border-radius: 16px;
	background: color-mix(in srgb, var(--wp--preset--color--background) 78%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.hero__card-icon {
	display: inline-flex;
	color: var(--wp--preset--color--accent);
}

.hero__card-title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 500;
}

.hero__card-copy {
	margin: 0.15rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
}

/* Three outcomes in one bordered strip along the foot of the hero. */
.hero__strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: clamp(2.5rem, 4vw, 3.5rem) max(var(--wp--custom--gutter-min), calc(var(--gl-inset) - 2.5rem)) 0;
	padding: 1.6rem 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--foreground) 10%, transparent);
	border-radius: 18px;
	background: color-mix(in srgb, var(--wp--preset--color--surface) 88%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.hero__strip-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	font-size: 1.0625rem;
	padding: 0.4rem 1rem;
}

.hero__strip-item + .hero__strip-item {
	border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--foreground) 12%, transparent);
}

.hero__strip-icon {
	display: inline-flex;
	color: var(--wp--preset--color--accent);
}

/* Mid widths: the card moves to the right edge so it clears the copy. */
@media (max-width: 1200px) {
	.hero__top .hero__copy {
		max-width: 54%;
	}

	.hero__card {
		right: var(--gl-inset);
		padding: 1rem 1.5rem;
	}
}

@media (max-width: 860px) {
	.hero__top .hero__copy {
		max-width: none;
		padding-right: var(--wp--custom--gutter-min);
	}

	.hero__card {
		position: static;
		margin: 2.5rem var(--wp--custom--gutter-min) 0;
	}

	.hero__strip {
		grid-template-columns: 1fr;
		padding: 0.5rem 1.5rem;
	}

	.hero__strip-item {
		justify-content: flex-start;
		padding: 1rem 0;
	}

	.hero__strip-item + .hero__strip-item {
		border-left: none;
		border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--foreground) 12%, transparent);
	}
}

/* ---------- Home: numbered steps ---------- */

.home-steps {
	padding: clamp(2rem, 4vw, 3rem) var(--gl-inset) clamp(3rem, 6vw, 5rem);
	scroll-margin-top: 5rem;
}

.home-steps__heading {
	font-size: clamp(2rem, 3.2vw, 2.75rem) !important;
	font-weight: 400;
	margin-bottom: 1.75rem;
}

.home-steps__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.home-steps__card {
	display: flex;
	gap: 1.5rem;
	padding: 1.75rem 2rem 2rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--foreground) 10%, transparent);
	border-radius: 16px;
	background: color-mix(in srgb, var(--wp--preset--color--surface) 70%, transparent);
}

.home-steps__number {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 50%, transparent);
	border-radius: 999px;
	color: var(--wp--preset--color--accent);
	font-size: 1.125rem;
	font-weight: 500;
}

.home-steps__title {
	margin: 0.6rem 0 0.75rem;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.35;
}

.home-steps__copy {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 860px) {
	.home-steps__list {
		grid-template-columns: 1fr;
	}
}

#how-we-help,
#solutions {
	scroll-margin-top: 5rem;
}

.is-style-text-link .wp-block-button__link {
	background: none;
	color: var(--wp--preset--color--muted);
	padding-left: 0;
	padding-right: 0;
}

.is-style-text-link .wp-block-button__link:hover {
	color: var(--wp--preset--color--accent);
	background: none;
}

/* ---------- Section divider ---------- */

.is-style-section-divider {
	border: none;
	height: 1px;
	background: var(--wp--preset--color--foreground);
	opacity: 0.12;
	margin: 0;
}

/* ---------- Feature grid ---------- */

.feature-grid-section {
	padding-top: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.feature-grid-intro {
	/* Left-justified, not centered: same --gl-inset token as everywhere
	   else on the site, so this heading starts at the same x as the
	   feature cards right below it. */
	max-width: calc(680px + var(--gl-inset) + 24px);
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	padding-left: var(--gl-inset);
	padding-right: 24px;
	box-sizing: border-box;
}

.feature-grid-intro__heading {
	margin-bottom: 1rem;
	font-size: clamp(2rem, 3.2vw, 2.75rem) !important;
	font-weight: 400;
}

/* Home: "Spending too much time…" at the same sizes as the solutions intro
   above: heading, large paragraphs, column width and section padding. */
.home-problem {
	padding-top: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.home-problem .solution-prose {
	max-width: calc(680px + var(--gl-inset) + 24px);
}

.home-problem .solution-prose > h2 {
	margin-bottom: 1rem;
	font-size: clamp(2rem, 3.2vw, 2.75rem) !important;
	font-weight: 400;
}

.home-problem .solution-prose > p {
	font-size: var(--wp--preset--font-size--large);
}

.feature-grid.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

@media (max-width: 1100px) {
	.feature-grid.wp-block-columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.feature-grid.wp-block-columns {
		grid-template-columns: 1fr;
	}
}

/* Each card takes its product colour through the accent token (see
   "Product accent colours" at the top of this file). */
.feature-grid .feature-card.wp-block-column {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.75rem 1.75rem 1.5rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent);
	border-radius: 20px;
	background:
		radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent), transparent 70%),
		var(--wp--preset--color--surface);
	overflow: hidden;
	transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

/* A thin glowing edge along the top in the product colour. */
.feature-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 1.5rem;
	right: 1.5rem;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--accent), transparent);
	opacity: 0.8;
}

.feature-card:hover,
.feature-card:focus-within {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent);
	box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
}

.feature-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: 60px;
	height: 60px;
	margin-bottom: 1.5rem;
	border-radius: 16px;
	color: var(--wp--preset--color--accent);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent);
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent),
		0 0 28px -6px color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
}

.feature-card__title {
	margin: 0 0 0.6rem;
	font-size: 1.375rem !important;
	font-weight: 500;
}

.feature-card__title a {
	text-decoration: none;
	color: var(--wp--preset--color--foreground);
}

/* The title link covers the whole card. */
.feature-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.feature-card__title a:focus-visible {
	outline: none;
}

.feature-card:has(.feature-card__title a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.feature-card__title-suffix {
	color: var(--wp--preset--color--accent);
}

.feature-card__copy {
	margin: 0 0 1.5rem;
}

.feature-card__more {
	margin-top: auto;
	color: var(--wp--preset--color--accent);
	font-size: 0.9375rem;
	font-weight: 500;
}

.feature-card__arrow {
	display: inline-block;
	transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.feature-card:hover .feature-card__arrow {
	transform: translateX(4px);
}

/* ---------- Feature grid: icon motion ----------
   Small looping movements, one per product, out of step with each other.
   SVG parts transform around their own box. */

.feature-card__icon svg * {
	transform-box: fill-box;
	transform-origin: center;
}

/* LoomBuilder: the quote's lines write themselves in turn. */
.fc-line {
	stroke-dasharray: 7;
	stroke-dashoffset: 7;
	animation: fc-write 4s ease-in-out infinite;
}

.fc-line--2 { animation-delay: 0.35s; }
.fc-line--3 { animation-delay: 0.7s; }

@keyframes fc-write {
	0%, 8% { stroke-dashoffset: 7; }
	30%, 80% { stroke-dashoffset: 0; }
	95%, 100% { stroke-dashoffset: 7; }
}

/* LoomAgent: the antenna bobs and the eyes blink. */
.fc-antenna {
	animation: fc-bob 2.4s ease-in-out infinite;
}

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

.fc-eyes {
	animation: fc-blink 4.5s ease-in-out infinite 0.6s;
}

@keyframes fc-blink {
	0%, 90%, 100% { transform: scaleY(1); }
	94% { transform: scaleY(0.1); }
}

/* LoomStudio: two sparkles twinkle out of step. */
.fc-spark {
	animation: fc-twinkle 3s ease-in-out infinite;
}

.fc-spark--small {
	animation-delay: -1.5s;
}

@keyframes fc-twinkle {
	0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
	50% { transform: scale(0.72) rotate(45deg); opacity: 0.7; }
}

/* LoomLeads: a ping spreads out from the target. */
.fc-ping {
	animation: fc-ping 2.8s cubic-bezier(0.2, 0, 0, 1) infinite;
}

@keyframes fc-ping {
	0% { transform: scale(1); opacity: 0.9; }
	100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.fc-line,
	.fc-antenna,
	.fc-eyes,
	.fc-spark,
	.fc-ping {
		animation: none;
	}

	.fc-line {
		stroke-dashoffset: 0;
	}

	.fc-ping {
		opacity: 0;
	}

	.feature-grid .feature-card.wp-block-column,
	.feature-card__arrow {
		transition: none;
	}

	.feature-card:hover,
	.feature-card:focus-within {
		transform: none;
	}
}

/* ---------- Consultation CTA ---------- */

.consultation-section {
	background:
		radial-gradient(50% 90% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent), transparent 70%),
		var(--wp--preset--color--surface);
	padding-top: clamp(3rem, 6vw, 5rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.consultation-section__inner {
	/* Left-justified, not centered — see .feature-grid-intro above. */
	max-width: calc(680px + var(--gl-inset) + 24px);
	margin: 0;
	padding-left: var(--gl-inset);
	padding-right: 24px;
	box-sizing: border-box;
}

.consultation-section__heading {
	margin-bottom: 1.25rem;
	font-weight: 500;
	letter-spacing: -0.03em;
}

.consultation-section__copy {
	max-width: 42em;
	margin-bottom: 2rem;
}

/* ---------- Generic page header ---------- */

.page-hero {
	padding-top: clamp(3rem, 7vw, 5.5rem);
	padding-bottom: 0.5rem;
}

.page-hero__title-suffix {
	color: var(--wp--preset--color--accent);
}

.page-hero__subhead {
	margin-top: 0.5rem;
	max-width: 42em;
}

.page-hero__split {
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.page-hero__graphic-col {
	display: flex;
	justify-content: center;
}

.page-hero__graphic {
	position: relative;
	width: 100%;
	max-width: 360px;
	height: 400px;
}

.page-main {
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* Generic pages (About, Contact) — single-column
   prose, so unlike page-hero/solution-section this stays reading-width
   rather than the full 1400px, but the left edge still uses the exact same
   gutter formula so it lines up with the header logo and every other page.
   Previously templates/page.html centered this at a flat 820px with no
   regard for where anything else on the site starts. */
.entry-content {
	max-width: calc(760px + var(--gl-inset) + 24px);
	margin: 0;
	padding-left: var(--gl-inset);
	padding-right: 24px;
	box-sizing: border-box;
}

.solution-section {
	padding-top: clamp(2rem, 4vw, 3rem);
	padding-bottom: clamp(2rem, 4vw, 3rem);
}

.solution-split {
	gap: clamp(2rem, 4vw, 3rem);
}

.solution-usecases__heading {
	margin-bottom: 1.5rem;
}

/* Reading-width prose inside a solution-section (LoomBuilder, LoomLeads): same width
   and left edge as .entry-content, so it lines up with the page-hero copy
   and the card rows either side of it. */
.solution-prose {
	max-width: calc(760px + var(--gl-inset) + 24px);
	margin: 0;
	padding-left: var(--gl-inset);
	padding-right: 24px;
	box-sizing: border-box;
}

.solution-prose > h2 {
	margin-bottom: 1.25rem;
}

.solution-prose__ctas {
	margin-top: 1.5rem;
}

/* ---------- Home: what the consultation covers ----------
   One rounded panel with a soft accent glow: intro, four icon cards, and a
   closing strip with the booking button. */

.home-cover {
	padding: clamp(2rem, 4vw, 3rem) var(--gl-inset);
	scroll-margin-top: 5rem;
}

.home-cover__panel {
	position: relative;
	overflow: hidden;
	padding: clamp(1.75rem, 4vw, 3.5rem);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent);
	border-radius: 24px;
	background:
		radial-gradient(55% 75% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 20%, transparent), transparent 70%),
		color-mix(in srgb, var(--wp--preset--color--surface) 85%, transparent);
}

.home-cover__intro {
	max-width: 48rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.home-cover__eyebrow {
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--accent);
	font-size: 1rem;
	font-weight: 500;
}

.home-cover__heading {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	font-weight: 400;
}

.home-cover__lead {
	margin: 0;
	font-size: 1.1875rem;
	color: color-mix(in srgb, var(--wp--preset--color--foreground) 80%, transparent);
}

.home-cover__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-cover__card {
	padding: 1.75rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--foreground) 10%, transparent);
	border-radius: 18px;
	background: color-mix(in srgb, var(--wp--preset--color--background) 55%, transparent);
	transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), border-color 0.25s ease, background-color 0.25s ease;
}

.home-cover__card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 5%, var(--wp--preset--color--background));
}

.home-cover__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 1.25rem;
	border-radius: 14px;
	color: var(--wp--preset--color--accent);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
}

.home-cover__title {
	margin: 0 0 0.6rem;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.3;
}

.home-cover__copy {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.home-cover__outro {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	margin-top: 1rem;
	padding: 1.25rem 1.25rem 1.25rem 1.75rem;
	border-radius: 18px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent);
}

.home-cover__promise {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin: 0;
	flex: 1 1 22rem;
	font-size: 1.0625rem;
}

.home-cover__check {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	color: var(--wp--preset--color--background);
	background: var(--wp--preset--color--accent);
}

@media (max-width: 760px) {
	.home-cover {
		padding-left: 16px;
		padding-right: 16px;
	}

	.home-cover__panel {
		padding: 1.5rem 1.25rem;
		border-radius: 20px;
	}

	.home-cover__grid {
		grid-template-columns: 1fr;
	}

	.home-cover__card {
		padding: 1.25rem;
	}

	.home-cover__icon {
		width: 44px;
		height: 44px;
		margin-bottom: 1rem;
	}

	.home-cover__outro {
		padding: 1.25rem;
	}
}

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

	.home-cover__card:hover {
		transform: none;
	}
}

.page-hero__media-col {
	min-width: 0;
}

/* The recording carries its own dark ground and rounded app frame, so the
   video gets no border or radius of its own. */
.demo-video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--surface);
	cursor: pointer;
}

.demo-video:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.page-hero__ctas {
	margin-top: 2rem;
}

.faq-item {
	padding-top: 1.25rem;
	margin-top: 1.25rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--foreground) 10%, transparent);
}

.faq-item__question {
	margin-bottom: 0.4rem;
}

.faq-item__answer {
	margin: 0;
}

.solution-usecases {
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.usecase-card {
	padding: 1.5rem 0 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--foreground) 10%, transparent);
}

.usecase-card__icon {
	display: inline-flex;
	margin-bottom: 1rem;
	color: var(--wp--preset--color--accent);
}

.usecase-card__title {
	margin-bottom: 0.4rem;
}

.usecase-card__copy {
	margin-bottom: 0;
}

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

/* Same surface fill as the consultation band above it, so the CTA and the
   footer read as one closing block at the foot of every page. The root
   block gap would otherwise leave a 24px strip of background between them. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

.site-footer {
	background: var(--wp--preset--color--surface);
	padding-top: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: 2.5rem;
}

.site-footer__grid {
	margin-top: 2.5rem;
	gap: 2rem;
}

.site-footer__heading {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--muted);
	margin-bottom: 1rem;
}

.site-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.site-footer__list a {
	text-decoration: none;
}

.site-footer__copyright {
	margin-top: 2.5rem;
}

/* ---------- Contact form ---------- */

.wpcf7-form p {
	margin-bottom: 1.25rem;
}

.wpcf7-form label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	background: var(--wp--preset--color--surface);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--foreground) 15%, transparent);
	border-radius: 8px;
	padding: 0.75rem 1rem;
	color: var(--wp--preset--color--foreground);
	font-family: inherit;
	font-size: 0.9375rem;
}

.wpcf7-form textarea {
	min-height: 140px;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
}

.wpcf7-form input[type="submit"] {
	background: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
	border: none;
	border-radius: 999px;
	padding: 0.9rem 1.75rem;
	font-weight: 500;
	cursor: pointer;
}

.wpcf7-form input[type="submit"]:hover {
	background: var(--wp--preset--color--accent);
}

.wpcf7-not-valid-tip {
	color: var(--wp--preset--color--error);
	font-size: 0.8125rem;
	margin-top: 0.35rem;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* ---------- Home: promo video ----------
   "See how it works" crossfades the page into a full-screen video
   (assets/js/promo-video.js). The dialog's ground is the video's own
   background colour, so letterboxing on any screen shape is invisible. */

.hw-hero.hero > dialog.promo {
	position: fixed;
	inset: 0;
	z-index: auto;
	width: 100vw;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	background: #080c10;
	color: var(--wp--preset--color--foreground);
	opacity: 0;
	transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.promo::backdrop {
	background: transparent;
}

.hw-hero.hero > dialog.promo.is-visible {
	opacity: 1;
}

/* Contain-fit 16:9 stage, centred, so the end-frame link can be placed in
   video coordinates. */
.promo__stage {
	position: absolute;
	inset: 0;
	margin: auto;
	width: min(100vw, calc(100dvh * 16 / 9));
	height: min(100dvh, calc(100vw * 9 / 16));
	transform-origin: 0 0;
}

/* After the fade, glide from over the hero image to full screen. */
.promo.is-settling .promo__stage {
	transition: transform 0.9s cubic-bezier(0.2, 0, 0, 1);
}

.promo__video {
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

/* Sits exactly over the button in the video's final frame. */
.promo__cta {
	position: absolute;
	left: 8.33%;
	top: 51.67%;
	width: 34.22%;
	height: 9.9%;
	border-radius: 999px;
	font-size: 0;
	color: transparent;
	visibility: hidden;
	transition: box-shadow 0.2s ease;
}

.promo.is-ended .promo__cta {
	visibility: visible;
}

.promo__cta:hover,
.promo__cta:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px #080c10, 0 0 0 5px var(--wp--preset--color--accent), 0 0 32px color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
}

.promo__bar {
	position: absolute;
	top: max(1rem, env(safe-area-inset-top));
	right: max(1rem, env(safe-area-inset-right));
	display: flex;
	gap: 0.5rem;
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.promo__bar:hover,
.promo__bar:focus-within,
.promo.is-ended .promo__bar,
.promo.is-paused .promo__bar {
	opacity: 1;
}

.promo__bar button {
	padding: 0.6rem 1.1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--foreground) 18%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, #080c10 70%, transparent);
	color: inherit;
	font: inherit;
	font-size: 0.875rem;
	cursor: pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.promo__bar button:hover,
.promo__bar button:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.promo__bar button[hidden] {
	display: none;
}

.promo__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: color-mix(in srgb, var(--wp--preset--color--foreground) 8%, transparent);
}

.promo__progress span {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
}

/* The page fades under the video as it fades in. On the
   way back the page waits for the video to half fade, so the two layouts'
   headlines don't overlap. */
.hw-hero > :not(.promo),
.site-header {
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, transform 1.1s cubic-bezier(0.2, 0, 0, 1);
}

.promo-open .hw-hero > :not(.promo),
.promo-open .site-header {
	transition-delay: 0s;
}

.promo-open {
	overflow: hidden;
}

.promo-open .hw-hero > :not(.promo):not(.hero__bg-wrap),
.promo-open .site-header {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.hw-hero.hero > dialog.promo,
	.promo__stage,
	.hw-hero > :not(.promo),
	.site-header {
		transition: none;
	}
}

/* ---------- Scroll reveal ----------
   assets/js/reveal.js marks below-the-fold items .reveal and adds .is-in as
   each scrolls into view. Uses the individual translate/scale properties,
   not transform, so card hover lifts still work after the reveal. */

.reveal:not(.is-in) {
	opacity: 0;
}

.reveal.is-in {
	animation: gl-reveal 0.8s cubic-bezier(0.2, 0, 0, 1) var(--reveal-delay, 0ms) both;
}

.home-steps__card.reveal.is-in,
.home-cover__card.reveal.is-in,
.feature-card.reveal.is-in,
.usecase-card.reveal.is-in {
	animation-name: gl-reveal-card;
	animation-duration: 0.9s;
}

@keyframes gl-reveal {
	from {
		opacity: 0;
		translate: 0 28px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes gl-reveal-card {
	from {
		opacity: 0;
		translate: 0 40px;
		scale: 0.96;
	}

	to {
		opacity: 1;
		translate: 0 0;
		scale: 1;
	}
}

/* ---------- Product pages ----------
   The four solution pages (body.gl-product) in the homepage's bolder style,
   with each page's own colour carried through as the accent token (set per
   page under "Product accent colours" at the top of this file). */

/* Hero: a soft glow in the product colour behind it. */
.gl-product .page-hero {
	position: relative;
	background:
		radial-gradient(45% 65% at 80% 35%, color-mix(in srgb, var(--wp--preset--color--accent) 13%, transparent), transparent 70%),
		radial-gradient(35% 50% at 0% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 7%, transparent), transparent 70%);
}

/* "Loom/agent": the product name as a pill, with a glowing dot. */
.gl-product .page-hero__product {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.1rem 0.5rem 0.9rem;
	color: var(--wp--preset--color--foreground);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	text-transform: none;
	letter-spacing: 0;
	font-size: 1rem;
	font-weight: 500;
}

.gl-product .page-hero__product::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	margin-right: 0.6rem;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 12px var(--wp--preset--color--accent);
}

.page-hero__product-suffix,
.page-hero__title-accent {
	color: var(--wp--preset--color--accent);
}

.gl-product .page-hero__title {
	font-size: clamp(2.25rem, 3.8vw, 3.5rem) !important;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.08;
	margin-bottom: 1.5rem;
}

.gl-product .page-hero__subhead {
	color: color-mix(in srgb, var(--wp--preset--color--foreground) 80%, transparent);
}

.gl-product .page-hero__ctas .is-style-accent .wp-block-button__link {
	font-size: 1.0625rem;
	padding: 1rem 2.25rem;
}

/* A glow in the product colour behind the demo video. */
.gl-product .page-hero__media-col {
	position: relative;
	isolation: isolate;
}

.gl-product .page-hero__media-col::before {
	content: "";
	position: absolute;
	inset: 12% 8%;
	z-index: -1;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
	filter: blur(70px);
}

/* Section headings at the homepage's size, prose headings with a short bar
   in the product colour. */
.gl-product .solution-usecases__heading,
.gl-product .solution-prose > h2 {
	font-size: clamp(2rem, 3.2vw, 2.75rem) !important;
	font-weight: 400;
}

.gl-product .solution-prose > h2::before {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	margin-bottom: 1.25rem;
	border-radius: 3px;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 14px color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent);
}

.gl-product .solution-usecases__heading {
	margin-bottom: 1.75rem;
}

.gl-product .solution-usecases {
	gap: 1rem;
}

/* The step cards (the row with icons), numbered like the homepage's
   "A conversation, then a clear next step". */
.gl-product .solution-usecases:has(.usecase-card__icon) {
	counter-reset: gl-step;
}

.gl-product .usecase-card:has(.usecase-card__icon) {
	counter-increment: gl-step;
	padding: 1.75rem 2rem 2rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent);
	border-radius: 18px;
	background:
		radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent), transparent 70%),
		var(--wp--preset--color--surface);
}

.gl-product .usecase-card__icon {
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 1.25rem;
	border-radius: 15px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent);
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent),
		0 0 26px -6px color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
}

.gl-product .usecase-card:has(.usecase-card__icon) .usecase-card__title::before {
	content: "Step " counter(gl-step, decimal-leading-zero);
	display: block;
	margin-bottom: 0.4rem;
	color: var(--wp--preset--color--accent);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gl-product .usecase-card__title {
	font-size: 1.25rem !important;
	font-weight: 500;
	line-height: 1.3;
}

/* The benefit cards (no icon): each gets a tick in the product colour. */
.gl-product .usecase-card:not(:has(.usecase-card__icon)) {
	padding: 1.5rem 1.5rem 1.75rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent);
	border-radius: 18px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 5%, var(--wp--preset--color--surface));
}

.gl-product .usecase-card:not(:has(.usecase-card__icon))::before {
	content: "✓";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-bottom: 1.1rem;
	border-radius: 999px;
	color: var(--wp--preset--color--background);
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 18px -2px color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent);
	font-size: 1rem;
	font-weight: 700;
}

.gl-product .usecase-card,
.gl-product .home-steps__card {
	transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), border-color 0.3s ease;
}

.gl-product .usecase-card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 50%, transparent);
}

/* "See how…": the story section straight after the steps, as a panel. */
.gl-product .solution-section:has(.usecase-card__icon) + .solution-section {
	margin-left: var(--gl-inset);
	margin-right: var(--gl-inset);
	padding: clamp(1.75rem, 4vw, 3.25rem);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent);
	border-radius: 24px;
	background:
		radial-gradient(55% 80% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent), transparent 70%),
		color-mix(in srgb, var(--wp--preset--color--surface) 85%, transparent);
}

.gl-product .solution-section:has(.usecase-card__icon) + .solution-section .solution-prose {
	max-width: 52rem;
	padding: 0;
}

.gl-product .solution-section:has(.usecase-card__icon) + .solution-section .solution-prose p {
	color: color-mix(in srgb, var(--wp--preset--color--foreground) 80%, transparent);
	font-size: 1.125rem;
}

.gl-product .is-style-text-link .wp-block-button__link {
	color: var(--wp--preset--color--accent);
	font-weight: 500;
}

/* FAQ and the closing band pick up the product colour. */
.gl-product .faq-item {
	border-top-color: color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent);
}

.gl-product .faq-item__question {
	font-weight: 500;
}

.gl-product .consultation-section {
	background:
		radial-gradient(50% 90% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent), transparent 70%),
		var(--wp--preset--color--surface);
}

@media (max-width: 781px) {
	.gl-product .solution-section:has(.usecase-card__icon) + .solution-section {
		margin-left: 16px;
		margin-right: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gl-product .usecase-card {
		transition: none;
	}

	.gl-product .usecase-card:hover {
		transform: none;
	}
}

/* ---------- About page ----------
   Home-page style: a hero with the woven ribbon faint on the right, then
   the shared .home-steps cards and a .home-cover panel for the founders. */

.about-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
	background:
		radial-gradient(40% 60% at 85% 40%, color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent), transparent 70%),
		#080c10;
}

.about-hero__ribbon {
	position: absolute;
	top: 50%;
	right: 0;
	width: min(70%, 1100px);
	height: auto;
	translate: 0 -50%;
	opacity: 0.55;
	pointer-events: none;
	-webkit-mask-image: radial-gradient(30% 52% at 78.5% 46%, #000 60%, transparent);
	mask-image: radial-gradient(30% 52% at 78.5% 46%, #000 60%, transparent);
}

.about-hero__copy {
	position: relative;
	max-width: calc(780px + var(--gl-inset));
	padding-left: var(--gl-inset);
	padding-right: var(--wp--custom--gutter-min);
	box-sizing: border-box;
}

.about-hero__title {
	font-size: clamp(2.5rem, 4.4vw, 4.25rem) !important;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.08;
	margin-bottom: 1.75rem;
}

.about-hero__lead {
	max-width: 36em;
	margin: 0;
	font-size: 1.1875rem;
	color: color-mix(in srgb, var(--wp--preset--color--foreground) 82%, transparent);
}

@media (max-width: 860px) {
	.about-hero__ribbon {
		width: 160%;
		right: -70%;
		opacity: 0.3;
	}
}

/* Founders: a card each, with an initial in an accent badge. */
.about-team__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-team__card {
	padding: 1.5rem 1.75rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--foreground) 10%, transparent);
	border-radius: 18px;
	background: color-mix(in srgb, var(--wp--preset--color--background) 55%, transparent);
	transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), border-color 0.25s ease;
}

.about-team__card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
}

.about-team__head {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.about-team__bio {
	margin: 1.25rem 0 0;
	color: var(--wp--preset--color--muted);
}

/* Later paragraphs of a multi-paragraph bio sit closer to the one above. */
.about-team__bio + .about-team__bio {
	margin-top: 0.85rem;
}

.about-team__avatar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	color: var(--wp--preset--color--accent);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent),
		0 0 28px -6px color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	font-size: 1.5rem;
	font-weight: 500;
}

/* A drawn portrait: larger, with the line art glowing in the accent. */
.about-team__avatar--photo {
	width: 96px;
	height: 96px;
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent), transparent 70%),
		color-mix(in srgb, var(--wp--preset--color--background) 70%, transparent);
}

.about-team__avatar--photo img {
	display: block;
	width: 86%;
	height: 86%;
	margin-top: 8%;
	object-fit: contain;
	filter: drop-shadow(0 0 4px color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent));
}

.about-team__name {
	margin: 0 0 0.2rem;
	font-size: 1.375rem;
	font-weight: 500;
}

.about-team__role {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.about-team__draft {
	margin: 1.25rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}

@media (max-width: 600px) {
	.about-team__grid {
		grid-template-columns: 1fr;
	}
}

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

	.about-team__card:hover {
		transform: none;
	}
}

/* ---------- Home: client review ----------
   "What our clients say": one large card with five glowing stars, a big
   accent quote mark, the client's words and their name. */

.home-testimonial {
	padding: clamp(2.5rem, 5vw, 4rem) var(--gl-inset) clamp(3rem, 6vw, 5rem);
}

.home-testimonial__intro {
	max-width: 680px;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.home-testimonial__heading {
	margin: 0;
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	font-weight: 400;
}

.home-testimonial__card {
	position: relative;
	margin: 0;
	padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4.5rem);
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent);
	border-radius: 24px;
	background:
		radial-gradient(50% 80% at 0% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent), transparent 70%),
		radial-gradient(40% 70% at 100% 100%, color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent), transparent 70%),
		var(--wp--preset--color--surface);
}

/* A large glowing quote mark behind the top-right of the card. */
.home-testimonial__mark {
	position: absolute;
	top: -0.12em;
	right: 0.12em;
	color: var(--wp--preset--color--accent);
	font-size: clamp(10rem, 22vw, 18rem);
	font-family: Georgia, "Times New Roman", serif;
	line-height: 1;
	opacity: 0.16;
	text-shadow: 0 0 40px var(--wp--preset--color--accent);
	pointer-events: none;
}

.home-testimonial__stars {
	position: relative;
	display: flex;
	gap: 0.35rem;
	margin: 0 0 1.75rem;
}

/* Filled stars that glow, the glow rippling across them in turn. */
.home-testimonial__star {
	display: inline-flex;
	color: var(--wp--preset--color--accent);
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--wp--preset--color--accent) 70%, transparent));
	animation: gl-star-glow 3.2s ease-in-out infinite;
}

.home-testimonial__star:nth-child(2) { animation-delay: 0.15s; }
.home-testimonial__star:nth-child(3) { animation-delay: 0.3s; }
.home-testimonial__star:nth-child(4) { animation-delay: 0.45s; }
.home-testimonial__star:nth-child(5) { animation-delay: 0.6s; }

@keyframes gl-star-glow {
	0%,
	70%,
	100% {
		filter: drop-shadow(0 0 6px color-mix(in srgb, var(--wp--preset--color--accent) 70%, transparent));
		transform: scale(1);
	}

	35% {
		filter: drop-shadow(0 0 14px var(--wp--preset--color--accent));
		transform: scale(1.12);
	}
}

.home-testimonial__quote {
	position: relative;
	max-width: 52rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.home-testimonial__quote p {
	margin: 0 0 1.25rem;
	font-size: 1.1875rem;
	line-height: 1.65;
	color: color-mix(in srgb, var(--wp--preset--color--foreground) 82%, transparent);
}

.home-testimonial__quote .home-testimonial__highlight {
	margin: 1.75rem 0 0;
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	line-height: 1.35;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--foreground);
}

.home-testimonial__author {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--foreground) 10%, transparent);
}

.home-testimonial__avatar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 999px;
	color: var(--wp--preset--color--accent);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent),
		0 0 24px -6px color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	font-size: 1.25rem;
	font-weight: 500;
}

.home-testimonial__name {
	display: block;
	font-size: 1.125rem;
	font-weight: 500;
}

.home-testimonial__company {
	display: block;
	color: var(--wp--preset--color--accent);
	font-size: 0.9375rem;
}

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

/* ---------- Privacy page ----------
   The About hero without the ribbon, then long-form legal prose at the
   shared reading width (.solution-prose). */

.legal-hero__updated {
	margin: 1.25rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.legal {
	padding-top: clamp(2rem, 4vw, 3rem);
}

.legal-prose {
	color: var(--wp--preset--color--muted);
}

.legal-prose h2 {
	margin: 3rem 0 1rem;
	color: var(--wp--preset--color--foreground);
	scroll-margin-top: 6rem;
}

.legal-prose h3 {
	margin: 1.75rem 0 0.5rem;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--foreground);
}

.legal-prose strong {
	color: var(--wp--preset--color--foreground);
	font-weight: 600;
}

.legal-prose ul,
.legal-prose ol {
	padding-left: 1.25rem;
}

.legal-prose li + li {
	margin-top: 0.4rem;
}

.legal-prose a {
	color: var(--wp--preset--color--accent);
}

.legal-prose__contents {
	padding: 1.25rem 1.5rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--border) 12%, transparent);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
}

.legal-prose__contents-heading {
	margin: 0 0 0.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--foreground);
}

.legal-prose__contents ol {
	margin: 0;
	columns: 2;
	column-gap: 2rem;
}

.legal-prose__contents li {
	break-inside: avoid;
}

@media (max-width: 600px) {
	.legal-prose__contents ol {
		columns: 1;
	}
}

.legal-prose__table {
	overflow-x: auto;
	margin: 1.5rem 0;
}

.legal-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.legal-prose th,
.legal-prose td {
	padding: 0.75rem 1rem 0.75rem 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--border) 12%, transparent);
}

.legal-prose th {
	color: var(--wp--preset--color--foreground);
	font-weight: 600;
}

.legal-prose td:first-child {
	width: 45%;
	color: var(--wp--preset--color--foreground);
}