/*
 * Synainesi theme: components that follow the Design & Brand Pack v0.4 boards.
 * Tokens come from theme.json. No custom JavaScript; all motion is CSS-only and is
 * disabled for visitors who prefer reduced motion.
 */

:root {
	--sy-rule: 1px solid var(--wp--preset--color--line);
	--sy-radius: 14px;
	--sy-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--sy-lines: url("../art/band-lines.svg");
}

html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; scroll-padding-top: 6rem; }
body { font-kerning: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, .wp-block-post-title { font-optical-sizing: auto; text-wrap: balance; }
p, li { text-wrap: pretty; }
::selection { background: var(--wp--preset--color--pine); color: var(--wp--preset--color--white); }

/* Header, main and footer meet edge to edge; sections set their own spacing. */
.wp-site-blocks > * { margin-block-start: 0 !important; }
main > .wp-block-template-part { margin-block-start: 0 !important; }

/* ---------- Focus and skip link ---------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--indigo-ink);
	outline-offset: 3px;
	border-radius: 4px;
}
:where(.sy-dark, .sy-footer) :where(a, button, input, textarea):focus-visible { outline-color: var(--wp--preset--color--indigo); }
.skip-link.screen-reader-text:focus { background: var(--wp--preset--color--white); color: var(--wp--preset--color--pine); font-weight: 600; padding: 0.9rem 1.2rem; }

a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* ---------- Brand labels (letter-spaced small caps with a short rule, as on the boards) ---------- */

.is-style-eyebrow,
.sy-eyebrow {
	font-size: 0.75rem !important;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	line-height: 1.75;
	color: var(--wp--preset--color--obsidian);
}
.is-style-eyebrow::after,
.sy-eyebrow::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 1px;
	margin-top: 1rem;
	background: currentColor;
	opacity: 0.55;
}
.has-text-align-center.is-style-eyebrow::after { margin-inline: auto; }
.sy-dark .is-style-eyebrow, .sy-dark .sy-eyebrow { color: var(--wp--preset--color--mist); }

.sy-triad {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 3rem;
	margin: 0;
	font-size: 0.75rem !important;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--wp--preset--color--obsidian);
}
@media (max-width: 480px) {
	.sy-triad { column-gap: 1.25rem; }
}

.sy-stack-caps {
	font-size: 0.75rem !important;
	font-weight: 500;
	letter-spacing: 0.26em;
	line-height: 2.3 !important;
	text-transform: uppercase;
}

/* ---------- Buttons: Pine pills with an arrow, as on the boards ---------- */

.wp-element-button,
.wp-block-button__link { transition: background-color 200ms var(--sy-ease), transform 200ms var(--sy-ease); }
.is-style-arrow .wp-block-button__link::after,
.sy-arrow::after { content: "\2192"; display: inline-block; margin-left: 0.75rem; transition: transform 200ms var(--sy-ease); }
.is-style-arrow .wp-block-button__link:hover::after { transform: translateX(3px); }
.wp-block-button.is-style-outline-pill .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--pine);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--pine);
}
.wp-block-button.is-style-quiet .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--obsidian) !important;
	padding: 0.9rem 0.25rem !important;
	font-weight: 500;
}
.wp-block-button.is-style-quiet .wp-block-button__link::before {
	content: "\2192";
	display: inline-grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	margin-right: 0.75rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 0.8rem;
}
.sy-dark .wp-block-button__link { background: var(--wp--preset--color--white); color: var(--wp--preset--color--pine); }
.sy-dark .wp-block-button__link:hover { background: var(--wp--preset--color--mist); color: var(--wp--preset--color--obsidian); }
.sy-dark .wp-block-button.is-style-quiet .wp-block-button__link { color: var(--wp--preset--color--white) !important; }

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

.sy-header { position: relative; z-index: 20; background: var(--wp--preset--color--paper); }
.sy-header .sy-logo { display: block; line-height: 0; }
.sy-header .sy-logo img { height: 52px; width: auto; }
.sy-header .wp-block-navigation { font-size: 0.875rem; font-weight: 400; }
.sy-header .wp-block-navigation__container { gap: clamp(1.25rem, 2.4vw, 2.5rem); }
.sy-header .wp-block-navigation-item__content { padding-block: 0.35rem; color: var(--wp--preset--color--obsidian); }
.sy-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content { box-shadow: inset 0 -1px 0 var(--wp--preset--color--pine); }
.sy-header .sy-header-cta .wp-block-button__link { padding: 0.8rem 1.4rem; box-shadow: 0 0 0 1px var(--wp--preset--color--pine), 0 0 0 3px var(--wp--preset--color--paper), 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--pine) 25%, transparent); }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--paper) !important; padding: 1.5rem clamp(1.25rem, 4vw, 3.5rem); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.2rem; font-family: var(--wp--preset--font-family--serif); font-size: 1.9rem; font-weight: 360; }
.sy-nav-cta-mobile { display: none !important; }
.wp-block-navigation__responsive-container.is-menu-open .sy-nav-cta-mobile { display: flex !important; margin-top: 0.75rem; }
/* The open menu keeps the brand in view (the lockup, where the header shows it) and ends
 * with the call to action as the same pill as the header button. */
.wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: absolute;
	top: 1.4rem;
	left: clamp(1.25rem, 4vw, 3.5rem);
	width: 131px;
	height: 38px;
	background: url("../brand/synainesi-lockup.svg") left center / contain no-repeat;
}
.wp-block-navigation__responsive-container.is-menu-open .sy-nav-cta-mobile .wp-block-navigation-item__content {
	padding: 0.85rem 1.5rem !important;
	border-radius: 999px;
	background: var(--wp--preset--color--pine);
	color: var(--wp--preset--color--white) !important;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	font-weight: 600;
}
.wp-block-navigation__responsive-container.is-menu-open .sy-nav-cta-mobile .wp-block-navigation-item__content::after { content: "\2192"; margin-left: 0.75rem; }
/* Below 1000 px the header collapses to the logo and the menu button (core collapses only
 * below 600 px), so the navigation and the call to action never compete for the width; the
 * open menu ends with the call to action. */
@media (max-width: 999px) {
	.sy-header .sy-header-cta { display: none; }
	.sy-header .sy-logo img { height: 38px; }
}
@media (min-width: 600px) and (max-width: 999px) {
	.sy-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.sy-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* ---------- Home hero: the text left, the mark enlarged beside it ---------- */

.sy-hero { position: relative; isolation: isolate; overflow: hidden; }
/* In the flex column (from 1000 px) the text group keeps its full content width, so its start
 * edge lines up with the header and the sections below. */
.sy-hero > .sy-hero-text { width: 100%; }
.sy-hero .sy-hero-text > * { max-width: 34rem; }
.sy-hero .sy-hero-title {
	margin: 0;
	font-size: clamp(2.9rem, 1.5rem + 3.9vw, 5.1rem) !important;
	font-weight: 360;
	line-height: 1;
	letter-spacing: -0.028em;
}
.sy-hero .sy-hero-lede { max-width: 32rem; margin-top: var(--wp--preset--spacing--40); color: #2B312F; }
.sy-hero .wp-block-buttons { margin-top: var(--wp--preset--spacing--40); }
.sy-hero .sy-triad { margin-top: var(--wp--preset--spacing--60) !important; }

/*
 * The art: the mark (assets/brand/synainesi-mark.svg, 80.81 : 100) enlarged, with the flow of
 * light (assets/art/flow-paper.svg, 1600 : 960, its waist at the centre) and a soft Indigo glow,
 * all centred on the mark's core. The art box is the hero's own box, as a size container, so the
 * composition is worked out from the hero at every width: the mark is a little taller than the
 * hero, but never so wide that it reaches the text.
 */
.sy-hero > .sy-hero-art {
	position: absolute;
	inset: 0;
	z-index: -1;
	max-width: none !important;
	margin: 0 !important;
	container-type: size;
	pointer-events: none;
}
.sy-hero-art > img,
.sy-hero-art::before { position: absolute; left: var(--sy-core-x); top: var(--sy-core-y); translate: -50% -50%; max-width: none; }
.sy-hero-art > .sy-hero-mark { height: var(--sy-mark-h); width: auto; }
.sy-hero-art > .sy-hero-flow {
	width: calc(3.4 * var(--sy-mark-h));
	height: auto;
	/* Fainter towards the text, full strength from the mark's outer bend. */
	-webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.22) 30%, #000 44%);
	mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.22) 30%, #000 44%);
}
/* The glows fall off along a Gaussian curve (a * exp(-(r / 0.5)^2), sampled at nine stops): a
 * two-stop ramp has a kink where it changes slope, which the eye sees as a faint ring. */
.sy-hero-art::before {
	content: "";
	width: calc(0.9 * var(--sy-mark-h));
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(124 140 255 / 0.3), rgb(124 140 255 / 0.274) 15%, rgb(124 140 255 / 0.209) 30%, rgb(124 140 255 / 0.133) 45%, rgb(124 140 255 / 0.071) 60%, rgb(124 140 255 / 0.038) 72%, rgb(124 140 255 / 0.018) 84%, rgb(124 140 255 / 0.009) 93%, rgb(124 140 255 / 0) 100%);
}
@media (min-width: 1000px) {
	.sy-hero { display: flex; flex-direction: column; justify-content: center; min-height: clamp(38rem, calc(100svh - 6.5rem), 56rem); }
	.sy-hero-art {
		--sy-content: min(76rem, 100cqw - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right));
		--sy-text-r: calc((100cqw - var(--sy-content)) / 2 + 36.5rem);
		/* At least half the mark stays on screen; narrower windows crop more of the right form
		 * rather than shrinking it, so the mark always bleeds past the hero, never just short of it. */
		--sy-mark-h: min(112cqh, (100cqw - var(--sy-text-r)) / 0.5);
		--sy-core-x: max(50cqw + 0.28 * var(--sy-content), var(--sy-text-r) + 0.404 * var(--sy-mark-h));
		/* The upper arm always runs up under the header: the mark starts 7% above the hero. */
		--sy-core-y: calc(var(--sy-mark-h) / 2 - 7cqh);
	}
}
/* Below 1000 px the hero stacks: the text, then the art as a full-bleed band. */
@media (max-width: 999px) {
	.sy-hero { padding-bottom: 0 !important; }
	.sy-hero > .sy-hero-art {
		position: relative;
		inset: auto;
		z-index: 0;
		overflow: hidden;
		height: clamp(22rem, 86vw, 38rem);
		margin: var(--wp--preset--spacing--50) calc(-1 * var(--wp--style--root--padding-right)) 0 calc(-1 * var(--wp--style--root--padding-left)) !important;
	}
	.sy-hero-art { --sy-mark-h: 116cqh; --sy-core-x: 50cqw; --sy-core-y: 50cqh; }
	.sy-hero-art > .sy-hero-flow { -webkit-mask-image: none; mask-image: none; }
}
@media (min-width: 1000px) and (max-width: 1279px) {
	.sy-hero .sy-hero-title { font-size: clamp(2.6rem, 0.9rem + 3.4vw, 4rem) !important; }
	.sy-hero .sy-hero-text > * { max-width: 30rem; }
	.sy-hero .sy-hero-lede { max-width: 28rem; font-size: 1.125rem !important; }
	.sy-hero-art { --sy-text-r: calc((100cqw - var(--sy-content)) / 2 + 32.5rem); }
	.sy-hero .sy-triad { margin-top: var(--wp--preset--spacing--50) !important; }
}

/* ---------- Brand panels (sy-brand): the mark's forms enlarged on the dark ground ---------- */

/*
 * A panel is a size container with its art behind the captions: the flow of light
 * (flow-dark.svg) and either one form of the mark (form-light.svg, on the vision card) or the
 * whole mark (synainesi-mark-light.svg, on the Company page), each placed by its centre in the
 * panel's own units. Captions are live text on the dark ground, clear of the flow's waist.
 */
.sy-brand {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	min-height: 24rem;
	container-type: size;
	border-radius: 4px;
	color: var(--wp--preset--color--white);
	background: linear-gradient(135deg, #0B0F0E 0%, #0F2D26 60%, #0C1F1C 100%);
}
.sy-brand > .sy-brand-art { position: absolute; inset: 0; z-index: -1; max-width: none !important; margin: 0 !important; pointer-events: none; }
.sy-brand-art > img { position: absolute; max-width: none; translate: -50% -50%; }
.sy-brand-art > .sy-brand-flow { left: var(--sy-flow-x); top: var(--sy-flow-y); width: var(--sy-flow-w); height: auto; opacity: 0.9; }
.sy-brand-art > .sy-brand-form,
.sy-brand-art > .sy-brand-mark { left: var(--sy-art-x); top: var(--sy-art-y); height: var(--sy-art-h); width: auto; }
/* The form sits right of centre, and never nearer the captions than 2rem: its ink at caption height
 * starts about 0.163 of the form height left of its centre, the captions end 8cqw + 10rem in. */
.sy-brand--form { --sy-flow-x: 30cqw; --sy-flow-y: 58cqh; --sy-flow-w: 170cqw; --sy-art-x: max(64cqw, 8cqw + 12rem + 24.5cqh); --sy-art-y: 48cqh; --sy-art-h: 150cqh; }
.sy-brand--mark { min-height: 0; aspect-ratio: 5 / 4; --sy-flow-x: 50cqw; --sy-flow-y: 50cqh; --sy-flow-w: calc(3.4 * 118cqh); --sy-art-x: 50cqw; --sy-art-y: 50cqh; --sy-art-h: 118cqh; }
.sy-brand--mark .sy-brand-art::before { content: ""; position: absolute; left: 50cqw; top: 50cqh; translate: -50% -50%; width: 84cqh; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(140 155 255 / 0.3), rgb(140 155 255 / 0.274) 15%, rgb(140 155 255 / 0.209) 30%, rgb(140 155 255 / 0.133) 45%, rgb(140 155 255 / 0.071) 60%, rgb(140 155 255 / 0.038) 72%, rgb(140 155 255 / 0.018) 84%, rgb(140 155 255 / 0.009) 93%, rgb(140 155 255 / 0) 100%); }
.sy-brand .sy-brand-caption { position: absolute; z-index: 1; left: 8%; margin: 0; color: var(--wp--preset--color--white); }
.sy-brand .sy-brand-caption::after { background: var(--wp--preset--color--white); }
.sy-brand .sy-brand-caption:first-of-type { top: 12%; }
.sy-brand .sy-brand-caption--low { top: auto; bottom: 10%; }
.sy-brand .sy-brand-caption--low::after { display: none; }

/* Pitch deck cover: text on white, the form panel flush to the card's right edge. */
.sy-cover { background: var(--wp--preset--color--white); border: 1px solid color-mix(in srgb, var(--wp--preset--color--line) 70%, transparent); border-radius: 4px; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(11, 15, 14, 0.25); }
.sy-cover .sy-cover-text { box-sizing: border-box; padding: clamp(1.75rem, 4vw, 4rem); }
.sy-cover .sy-brand { border-radius: 0; }
/* Side by side from 900 px, where the panel takes the card's height; below that the card
 * stacks, as on phones. */
@media (max-width: 899px) {
	.sy-cover.wp-block-columns { flex-wrap: wrap !important; }
	.sy-cover.wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
}
@media (min-width: 900px) {
	.sy-cover .sy-cover-visual { position: relative; box-sizing: border-box; min-height: 24rem; }
	.sy-cover .sy-cover-visual > .sy-brand { position: absolute; inset: 0; }
}

/* ---------- Open by design: the mark opened, its core in the light ---------- */

/* The flow runs past the art box, faded by its mask; the band clips it at the page edges. */
.sy-open { overflow: clip; }
.sy-open .sy-open-art { position: relative; aspect-ratio: 1; container-type: size; max-width: 36rem; margin-inline: auto; }
.sy-open-art > img,
.sy-open-art::before { position: absolute; left: 50cqw; top: 50cqh; translate: -50% -50%; max-width: none; }
.sy-open-art > .sy-open-mark { height: 86cqh; width: auto; }
.sy-open-art > .sy-open-flow {
	width: calc(2.9 * 86cqh);
	height: auto;
	/* Fades out by the edges of the art box, so no line runs behind the text. */
	-webkit-mask-image: radial-gradient(52cqh 44cqh at 50% 50%, #000 55%, transparent);
	mask-image: radial-gradient(52cqh 44cqh at 50% 50%, #000 55%, transparent);
}
.sy-open-art::before { content: ""; width: 74cqh; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(124 140 255 / 0.4), rgb(124 140 255 / 0.366) 15%, rgb(124 140 255 / 0.279) 30%, rgb(124 140 255 / 0.178) 45%, rgb(124 140 255 / 0.095) 60%, rgb(124 140 255 / 0.05) 72%, rgb(124 140 255 / 0.024) 84%, rgb(124 140 255 / 0.013) 93%, rgb(124 140 255 / 0) 100%); }
.sy-open h2 { margin-bottom: 0; }
.sy-open .sy-triad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; counter-reset: sy-open; margin-top: var(--wp--preset--spacing--50) !important; }
.sy-open .sy-triad span { counter-increment: sy-open; padding-top: 1rem; border-top: var(--sy-rule); line-height: 1.7; }
.sy-open .sy-triad span::before { content: counter(sy-open, decimal-leading-zero); display: block; margin-bottom: 0.6rem; font-family: var(--wp--preset--font-family--serif); font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: var(--wp--preset--color--indigo-ink); }
@media (max-width: 781px) {
	.sy-open .sy-open-art { max-width: 26rem; }
	.sy-open .sy-triad { grid-template-columns: 1fr; gap: 0; }
	.sy-open .sy-triad span { padding: 1rem 0; }
}

/* ---------- Product showcase: the screens (inc/screens.php, screens.css) with their labels ---------- */

.sy-shot-label { font-size: 0.7rem !important; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--wp--preset--color--obsidian); margin: 0 0 1rem; }
.sy-shots { align-items: flex-start !important; }
.sy-shot-note { font-size: var(--wp--preset--font-size--small) !important; color: var(--wp--preset--color--stone); }
.sy-dark .sy-shot-note { color: var(--wp--preset--color--mist); }

/* ---------- Page hero (interior pages) ---------- */

.sy-page-hero .wp-block-post-title { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.75rem) !important; font-weight: 360; line-height: 1.02; letter-spacing: -0.025em; max-width: 20ch; }
/* One sentence to a line (functions.php, synainesi_title_sentences). */
.sy-page-hero .wp-block-post-title .sy-line { display: block; }
/* A label above a title keeps the same 2rem from it as the section labels do. */
.sy-page-hero .is-style-eyebrow + .wp-block-post-title { margin-top: var(--wp--preset--spacing--40) !important; }
.sy-page-hero .wp-block-post-excerpt { max-width: 38rem; color: #2B312F; }
.sy-page-hero .wp-block-post-excerpt__excerpt { margin: 0; }
.sy-page-hero .wp-block-breadcrumbs { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; }

/* ---------- Sections on one grid ---------- */

.sy-section { position: relative; }
.sy-section + .sy-section:not(.sy-dark):not(.sy-mist) { border-top: var(--sy-rule); }
.sy-mist { background: var(--wp--preset--color--mist); }
.sy-lede-col p { font-size: var(--wp--preset--font-size--large); line-height: 1.55; color: #2B312F; }

/* White panel with hairline dividers: the boards' "Trust & security" card. */
.sy-panel {
	background: var(--wp--preset--color--white);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--line) 70%, transparent);
	border-radius: 4px;
	box-shadow: 0 30px 60px -40px rgba(11, 15, 14, 0.25);
}

.sy-pillars { gap: 0 !important; }
.sy-pillars > .wp-block-column { padding: clamp(1.25rem, 2vw, 2rem); text-align: center; }
.sy-pillars > .wp-block-column + .wp-block-column { border-left: var(--sy-rule); }
.sy-pillars .sy-icon { width: 44px; height: 44px; margin: 0 auto 1.25rem; color: var(--wp--preset--color--pine); display: block; }
.sy-pillars .sy-pillar-title { font-size: 0.75rem !important; font-weight: 500; letter-spacing: 0.24em; line-height: 1.9; text-transform: uppercase; margin: 0 0 0.85rem; }
.sy-pillars .sy-pillar-text { font-size: 0.95rem; line-height: 1.6; color: #3A413E; margin: 0; }
@media (max-width: 781px) {
	.sy-pillars > .wp-block-column + .wp-block-column { border-left: 0; border-top: var(--sy-rule); }
}

/* Grid of short statements (interior pages). */
.sy-grid { gap: 0 !important; border-top: var(--sy-rule); }
.sy-grid > .wp-block-column { padding: 2rem 2rem 2rem 0; }
.sy-grid > .wp-block-column + .wp-block-column { padding-left: 2rem; border-left: var(--sy-rule); }
/* The rule under each label keeps 1.5rem from the heading below it. */
.sy-grid h3 { font-size: 1.5rem; margin: 1.5rem 0 0.75rem; }
.sy-grid p { margin: 0; color: #3A413E; }
@media (max-width: 781px) {
	.sy-grid > .wp-block-column, .sy-grid > .wp-block-column + .wp-block-column { padding: 1.5rem 0; border-left: 0; }
	.sy-grid > .wp-block-column + .wp-block-column { border-top: var(--sy-rule); }
}

/* ---------- Dark bands with flowing light lines ---------- */

.sy-dark {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: var(--wp--preset--color--mist);
	background-color: #0A1614;
	background-image: linear-gradient(115deg, #0B0F0E 0%, #0F2D26 55%, #0C1F1C 100%);
}
/* The lines layer runs 4% past the right edge, so its slow drift (2.5% of its width, under
 * Motion below) never uncovers the edge. */
.sy-dark::before {
	content: "";
	position: absolute;
	inset: 0 -4% 0 0;
	z-index: -1;
	background: var(--sy-lines) right center / auto 130% no-repeat;
	opacity: 0.95;
}
.sy-dark :where(h1, h2, h3, h4) { color: var(--wp--preset--color--white); }
.sy-dark a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--white); }
.sy-dark .sy-values { list-style: none; padding: 0 !important; margin: 0; }
.sy-dark .sy-values li { font-size: 0.78rem; letter-spacing: 0.26em; text-transform: uppercase; line-height: 2.6; color: var(--wp--preset--color--mist); }

/* Dark card (the boards' "Download the playbook" card), used for the invitation. */
.sy-dark-card { border-radius: 4px; }

/* ---------- Product duo: Desktop for work, Cloud for control ---------- */

/* White cards in a row (the Solutions agents). */
.sy-cards { gap: clamp(1.5rem, 3vw, 3rem) !important; align-items: stretch !important; }
.sy-cards > .wp-block-column { background: var(--wp--preset--color--white); border: var(--sy-rule); border-radius: 4px; padding: clamp(1.75rem, 3vw, 2.75rem); }
.sy-cards .sy-card-kicker { font-size: 0.75rem !important; letter-spacing: 0.26em; text-transform: uppercase; color: var(--wp--preset--color--stone); margin: 0 0 1.25rem; }
.sy-cards h3 { font-size: 1.75rem; margin: 0 0 0.75rem; }

/* Cloud + desktop diagram: the two product surfaces with the sync link between them. */
.sy-duo { gap: clamp(1.25rem, 2.5vw, 2.5rem) !important; align-items: flex-start !important; }
.sy-duo .sy-duo-kicker { font-size: 0.75rem !important; letter-spacing: 0.26em; text-transform: uppercase; color: var(--wp--preset--color--stone); margin: var(--wp--preset--spacing--40) 0 0.75rem; }
.sy-duo h3 { font-size: 2rem; margin: 0 0 0.75rem; }
.sy-duo-link { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; color: var(--wp--preset--color--pine); padding-bottom: 6rem; }
.sy-duo-link::before,
.sy-duo-link::after { content: ""; width: 100%; border-top: 1px dashed color-mix(in srgb, var(--wp--preset--color--indigo-ink) 55%, transparent); order: 0; }
.sy-duo-link::after { display: none; }
.sy-sync { text-align: center; font-size: 0.7rem !important; letter-spacing: 0.3em; text-transform: uppercase; line-height: 2.1 !important; color: var(--wp--preset--color--stone); margin: 0; }
@media (max-width: 781px) {
	.sy-duo-link { padding-bottom: 0; }
	.sy-duo-link::before { display: none; }
}

/* Numbered steps (horizontal on wide screens). */
.sy-steps { counter-reset: sy-step; gap: 0 !important; }
.sy-steps > .wp-block-column { counter-increment: sy-step; padding: 0 2rem 0 0; }
.sy-steps > .wp-block-column::before {
	content: counter(sy-step, decimal-leading-zero);
	display: block;
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--mist) 22%, transparent);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.1rem;
	color: var(--wp--preset--color--indigo);
}
.sy-steps h3 { font-size: 1.4rem; margin: 0 0 0.5rem; }
.sy-steps p { margin: 0; font-size: 0.97rem; }
@media (max-width: 781px) {
	.sy-steps { row-gap: 2.75rem !important; }
	.sy-steps > .wp-block-column { padding-right: 0; }
}

/* ---------- Articles ---------- */

.sy-article-body h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: var(--wp--preset--spacing--50); }
.sy-article-body h3 { font-size: 1.375rem; margin-top: var(--wp--preset--spacing--40); }
.sy-article-meta { color: var(--wp--preset--color--stone); }
.is-style-note { padding: 1rem 1.25rem; border-left: 2px solid var(--wp--preset--color--indigo-ink); background: var(--wp--preset--color--mist); font-size: var(--wp--preset--font-size--small) !important; }
.wp-block-list.is-style-ruled { list-style: none; padding-left: 0 !important; }
.wp-block-list.is-style-ruled > li { padding-block: 0.85rem; border-top: var(--sy-rule); margin: 0; }
.wp-block-list.is-style-ruled > li:last-child { border-bottom: var(--sy-rule); }
.sy-lifecycle { counter-reset: sy-l; list-style: none; padding-left: 0 !important; }
.sy-lifecycle > li { counter-increment: sy-l; position: relative; padding: 0 0 1.4rem 3.25rem; margin: 0; }
.sy-lifecycle > li::before { content: counter(sy-l, decimal-leading-zero); position: absolute; left: 0; top: 0.05rem; font-family: var(--wp--preset--font-family--serif); color: var(--wp--preset--color--indigo-ink); }

.sy-card { background: var(--wp--preset--color--white); border: var(--sy-rule); border-radius: 4px; padding: 1.75rem; height: 100%; box-sizing: border-box; }
/* The rule under a card label keeps 1.5rem from the title below it. */
.sy-card > :is(.is-style-eyebrow, .sy-eyebrow) + * { margin-top: 1.5rem; }
.sy-card .wp-block-post-title a { text-decoration: none; }
.sy-card .wp-block-post-title a:hover { text-decoration: underline; }
.sy-card .wp-block-post-terms a { text-decoration: none; }

/* ---------- Footer: the boards' dark closing band ---------- */

.sy-footer { color: var(--wp--preset--color--mist); }
.sy-footer .sy-logo img { height: 52px; width: auto; }
.sy-footer .sy-tagline { font-size: 0.72rem !important; letter-spacing: 0.3em; text-transform: uppercase; color: var(--wp--preset--color--mist); margin: 0; }
.sy-footer .sy-domain { font-size: 0.72rem !important; letter-spacing: 0.3em; text-transform: uppercase; margin: 0; }
.sy-footer a { color: var(--wp--preset--color--mist); text-decoration: none; }
.sy-footer a:hover { color: var(--wp--preset--color--white); text-decoration: underline; }
.sy-footer .wp-block-navigation { font-size: 0.85rem; }
.sy-footer .wp-block-navigation-item__content { color: var(--wp--preset--color--mist); }
.sy-footer .sy-footer-rule { border: 0; border-top: 1px solid rgba(237, 234, 230, 0.14); opacity: 1; }
.sy-footer .sy-footer-small { font-size: 0.75rem !important; color: #A9B5B1; margin: 0; }
@media (max-width: 781px) { .sy-footer .sy-tagline { letter-spacing: 0.2em; } }

/* ---------- Search, 404 ---------- */

.wp-block-search__input { border: 1px solid var(--wp--preset--color--stone); border-radius: 999px; background: var(--wp--preset--color--white); padding: 0.8rem 1.1rem; font: inherit; }
.wp-block-search__button { margin-left: 0.5rem; }

/* ---------- Expression-of-interest form (plugin markup) ---------- */

.sy-eoi { max-width: 38rem; }
.sy-eoi-field { margin: 0 0 1.35rem; }
.sy-eoi label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.sy-eoi .sy-eoi-optional { font-weight: 400; color: var(--wp--preset--color--stone); }
.sy-eoi .sy-eoi-hint { display: block; margin: 0 0 0.5rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--stone); }
.sy-eoi :where(input[type="email"], input[type="text"], textarea) {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #8A918E;
	border-radius: 8px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--obsidian);
	padding: 0.85rem 1rem;
	font: inherit;
	line-height: 1.4;
}
.sy-eoi :where(input, textarea):hover { border-color: var(--wp--preset--color--pine); }
.sy-eoi textarea { min-height: 7.5rem; resize: vertical; }
.sy-eoi :where(input, textarea)[aria-invalid="true"] { border-color: #A3261B; box-shadow: inset 0 0 0 1px #A3261B; }
.sy-eoi .sy-eoi-error { color: #A3261B; font-weight: 600; font-size: var(--wp--preset--font-size--small); margin: 0.4rem 0 0; }
.sy-eoi .sy-eoi-check { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.6rem; align-items: start; font-weight: 400; }
.sy-eoi .sy-eoi-check input { width: 1.15rem; height: 1.15rem; margin: 0.2rem 0 0; accent-color: var(--wp--preset--color--pine); }
.sy-eoi .sy-eoi-purpose { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--stone); margin-bottom: 1.75rem; }
.sy-eoi .sy-eoi-summary { padding: 1rem 1.25rem; border: 2px solid #A3261B; border-radius: 8px; margin-bottom: 1.6rem; background: var(--wp--preset--color--white); }
.sy-eoi .sy-eoi-summary h2 { font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--medium); font-weight: 600; margin: 0 0 0.5rem; }
.sy-eoi .sy-eoi-summary ul { margin: 0; }
.sy-eoi .sy-eoi-status { padding: 1.5rem 1.75rem; border: var(--sy-rule); border-radius: 8px; background: var(--wp--preset--color--white); }
.sy-eoi button[type="submit"] { cursor: pointer; border: 0; }
.sy-eoi button[type="submit"]::after { content: "\2192"; margin-left: 0.75rem; }
.sy-eoi .sy-eoi-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.sy-eoi .sy-eoi-secondary { background: transparent !important; color: var(--wp--preset--color--pine) !important; box-shadow: inset 0 0 0 1px var(--wp--preset--color--pine); }
.sy-eoi .sy-eoi-secondary::after { content: none !important; }
.sy-eoi .sy-eoi-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.sy-form-panel { background: var(--wp--preset--color--white); border: var(--sy-rule); border-radius: 4px; padding: clamp(1.5rem, 3vw, 3rem); box-shadow: 0 30px 60px -40px rgba(11, 15, 14, 0.25); }

/* ---------- Motion (CSS only; never required to read content) ---------- */

@media (prefers-reduced-motion: no-preference) {
	.sy-hero .sy-hero-title,
	.sy-hero .sy-hero-lede,
	.sy-hero .wp-block-buttons { animation: sy-rise 900ms var(--sy-ease) both; }
	.sy-hero .sy-hero-lede { animation-delay: 80ms; }
	.sy-hero .wp-block-buttons { animation-delay: 160ms; }
	.sy-hero-art { animation: sy-fade 1400ms var(--sy-ease) both; }
	/* The flow of light sways slowly about the core, and the core's glow breathes. */
	.sy-hero-flow, .sy-brand-flow, .sy-open-flow { animation: sy-sway 26s ease-in-out infinite alternate; }
	.sy-hero-art::before, .sy-brand--mark .sy-brand-art::before, .sy-open-art::before { animation: sy-breathe 7s ease-in-out infinite alternate; }
	.sy-dark::before { animation: sy-drift 18s ease-in-out infinite alternate; }
	@supports (animation-timeline: view()) {
		.sy-reveal { animation: sy-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
	}
}
@keyframes sy-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sy-fade { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes sy-drift { from { transform: translateX(0); } to { transform: translateX(-2.5%); } }
@keyframes sy-sway { from { rotate: -1.2deg; } to { rotate: 1.2deg; } }
@keyframes sy-breathe { from { opacity: 0.72; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media print {
	.sy-header, .sy-footer, .wp-block-buttons, .sy-eoi, .sy-hero-art, .sy-brand, .sy-open-art { display: none !important; }
	.sy-dark { background: none !important; color: #000 !important; }
}

/*
 * Narrow elements inside constrained layouts sit on the column's start edge rather than
 * centring (core centres every child of a constrained container with auto margins): page
 * heroes, and any group given the class sy-start (the 404 page, search results).
 */
.sy-page-hero.is-layout-constrained > *,
.sy-start.is-layout-constrained > * {
	margin-left: max(0px, calc((100% - var(--sy-column, var(--wp--style--global--wide-size))) / 2)) !important;
}
.sy-page-hero.sy-col-content { --sy-column: var(--wp--style--global--content-size); }

.sy-eyebrow:empty { display: none; }