/* Explicatos design system. */

/* Tokens — aliases only. */

:root {
	--ex-ink: var(--wp--preset--color--ink);
	--ex-ink-2: var(--wp--preset--color--ink-2);
	--ex-ink-3: var(--wp--preset--color--ink-3);
	--ex-ink-4: var(--wp--preset--color--ink-4);
	--ex-blue: var(--wp--preset--color--blue);
	--ex-blue-2: var(--wp--preset--color--blue-2);
	--ex-blue-3: var(--wp--preset--color--blue-3);
	--ex-paper: var(--wp--preset--color--paper);
	--ex-paper-2: var(--wp--preset--color--paper-2);
	--ex-text: var(--wp--preset--color--text);
	--ex-muted: var(--wp--preset--color--muted);
	--ex-grey: var(--wp--preset--color--grey);
	--ex-line: var(--wp--preset--color--line);
	--ex-display: var(--wp--preset--font-family--display);
	--ex-body: var(--wp--preset--font-family--body);
	--ex-mono: var(--wp--preset--font-family--mono);
	--ex-wrap: 1180px;
	--ex-gutter: 28px;
	--ex-section-y: 104px;
	--ex-radius: 3px;

	/* Type — one scale for the whole site. Every component reads these instead of picking its own rem value. */
	--fs-micro: 0.75rem;
	--fs-small: 0.875rem;
	--fs-body: 1rem;
	--fs-lede: 1.1875rem;
	--fs-h4: 1.125rem;
	--fs-h3: 1.5rem;
	--fs-h2: clamp(2rem, 3.6vw, 3rem);
	--fs-h1: clamp(2.75rem, 6vw, 5rem);
	--fs-display: clamp(3rem, 8vw, 5.5rem);

	--lh-tight: 1.05;
	--lh-snug: 1.2;
	--lh-body: 1.6;
	--lh-loose: 1.7;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;

	--tr-tighter: -0.035em;
	--tr-tight: -0.02em;
	--tr-normal: 0;
	--tr-label: 0.14em;

	/* On a dark section these three flip, and every component reads them instead of hard-coding a colour. */
	--ex-surface: var(--ex-paper);
	--ex-on-surface: var(--ex-text);
	--ex-on-surface-muted: var(--ex-muted);
	--ex-rule: var(--ex-line);
	--ex-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ex-dur: 0.7s;
}

/* Reset */

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

html {
	scroll-behavior: smooth;
	text-size-adjust: 100%;
}

img,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
}

button {
	font: inherit;
	color: inherit;
}

/* Base */

body {
	-webkit-font-smoothing: antialiased;
	background: var(--ex-paper);
	color: var(--ex-text);
	font-family: var(--ex-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-feature-settings: "ss01" 1, "kern" 1;
}

a {
	color: inherit;
}

a:hover {
	color: var(--ex-blue);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--ex-display);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tr-tight);
	line-height: var(--lh-tight);
}

h1 {
	font-size: var(--fs-h1);
	letter-spacing: var(--tr-tighter);
}

h2 {
	font-size: var(--fs-h2);
	line-height: var(--lh-snug);
}

h3 {
	font-size: var(--fs-h3);
	line-height: var(--lh-snug);
}

p {
	margin: 0 0 1rem;
}

/* blockGap is 0, so flex layouts that relied on it declare their own gap. */
.wp-block-buttons {
	gap: 14px;
}

:is(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--ex-blue-2);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	z-index: 999;
	top: 12px;
	left: 12px;
	padding: 12px 20px;
	background: var(--ex-paper);
	color: var(--ex-ink);
	clip-path: none;
	width: auto;
	height: auto;
}

/* Split column rhythm. A split column is a core Group. */

.ex-split .wp-block-group > .is-style-lede {
	margin-block-start: 18px;
}

.ex-split .wp-block-group > .ex-panels--feature {
	margin-block-start: 32px;
}

.ex-split .wp-block-group > .is-style-mono {
	margin-block-start: 20px;
}

.ex-split .wp-block-group > .ex-notice {
	margin-block-start: 26px;
}

.ex-split .wp-block-group > .ex-list {
	margin-block: 28px 0;
}

.ex-split .wp-block-group > h3 {
	margin-block: 30px 14px;
}

.ex-split .wp-block-group > h3:first-child {
	margin-block-start: 0;
}

.ex-split .wp-block-group > .wp-block-buttons {
	margin-block-start: 22px;
}

/* Body copy in a column is secondary text, a step below the section lede. */
.ex-split .wp-block-group > p:not(.ex-eyebrow) {
	margin-block-end: 1rem;
}

.ex-split .wp-block-group > p:not(.is-style-lede, .is-style-mono, .is-style-note, .ex-eyebrow) {
	color: var(--ex-on-surface-muted);
	font-size: var(--fs-body);
}

/* Layout */

.ex-wrap {
	max-width: var(--ex-wrap);
	margin-inline: auto;
	padding-inline: var(--ex-gutter);
}

.ex-section {
	padding-block: var(--ex-section-y);
	background: var(--ex-surface);
	color: var(--ex-on-surface);
}

.ex-section--space-tight {
	padding-block: calc(var(--ex-section-y) * 0.6);
}

.ex-section--space-none {
	padding-block: 0;
}

.ex-section--tint {
	--ex-surface: var(--ex-paper-2);
}

.ex-section--dark {
	--ex-surface: var(--ex-ink);
	--ex-on-surface: #dce7f0;
	--ex-on-surface-muted: #9fb5c8;
	--ex-rule: rgb(255 255 255 / 14%);
}

.ex-section--dark :is(h1, h2, h3, h4) {
	color: #fff;
}

.ex-split {
	display: grid;
	gap: 64px;
	align-items: center;
}

.ex-split--gap-medium {
	gap: 34px;
}

.ex-split--align-start {
	align-items: start;
}

@media (width >= 961px) {
	.ex-split--equal { grid-template-columns: 1fr 1fr; }
	.ex-split--wide-right { grid-template-columns: 1fr 1.1fr; }
	.ex-split--wide-left { grid-template-columns: 1.05fr 0.95fr; }
	.ex-split--narrow-left { grid-template-columns: 0.9fr 1.1fr; }
}

/* A one-column split. */
.ex-split--single {
	grid-template-columns: 1fr;
}

.ex-sec-head {
	max-width: 64ch;
	margin-block-end: 56px;
}

.ex-sec-head > * + * {
	margin-block-start: 18px;
}

/* Section head — style variants. Registered as block styles in section-head/block.json; rules live here so they load without per-block asset registration. */
.ex-sec-head.is-style-full {
	max-width: none;
}

/* Heading stays at the readable measure. Paragraph (.is-style-lede) breaks out to the full section width. */
.ex-sec-head.is-style-full > :is(h1, h2, h3, .wp-block-heading) {
	/* ch scales with the heading's own font size, so 64ch on a display h2 is ~2000px — useless. Use a fixed measure matching what the default 64ch container gives at root font size (~40rem = 640px). */
	max-width: 40rem;
}

.ex-sec-head.is-style-full > :is(p, .wp-block-paragraph, .is-style-lede) {
	max-width: none;
}

.ex-sec-head.is-style-with-cta {
	position: relative;
	max-width: none;

	/* Reserve horizontal room for the CTA on the right so heading/paragraph never run under it. Actual button lives absolutely-positioned, bottom-right aligned. */
	padding-inline-end: 260px;
}

.ex-sec-head.is-style-with-cta > :is(.wp-block-buttons, .wp-block-button) {
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: 0;
	margin-block-start: 0;
}

@media (width <= 768px) {
	.ex-sec-head.is-style-with-cta {
		padding-inline-end: 0;
	}

	.ex-sec-head.is-style-with-cta > :is(.wp-block-buttons, .wp-block-button) {
		position: static;
		margin-block-start: 18px;
	}
}

/* Type scale utilities. Visual size is a CLASS, never the element. */

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: var(--ex-display);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
}

.h1 {
	font-size: var(--fs-h1);
	letter-spacing: var(--tr-tighter);
}

.h2 {
	font-size: var(--fs-h2);
	letter-spacing: var(--tr-tight);
	line-height: var(--lh-snug);
}

.h3 {
	font-size: var(--fs-h3);
	letter-spacing: var(--tr-tight);
	line-height: var(--lh-snug);
}

.h4 {
	font-size: var(--fs-h4);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tr-tight);
	line-height: var(--lh-snug);
}

.h5 {
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tr-normal);
	line-height: var(--lh-snug);
}

.h6 {
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tr-normal);
	line-height: var(--lh-snug);
}

/* Body line-height on a heading-sized element, for titles that read as prose rather than as headings — a pricing tier name, for example. */
.lh-body {
	line-height: var(--lh-body);
}

/* Typographic primitives */

.ex-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	color: var(--ex-blue);
	font-family: var(--ex-body);
	font-size: var(--fs-micro);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tr-label);
	line-height: var(--lh-snug);
	text-transform: uppercase;
}

.ex-eyebrow::before {
	content: "";
	display: block;
	width: 26px;
	height: 1px;
	background: currentcolor;
	flex: none;
}

.is-style-lede {
	max-width: 60ch;
	color: var(--ex-on-surface-muted);
	font-size: var(--fs-lede);
	line-height: var(--lh-body);
}

/* Mono keeps exactly one job: contact and legal metadata (email, address, tabular ledger lines). */
.is-style-mono {
	color: var(--ex-on-surface-muted);
	font-family: var(--ex-mono);
	font-size: var(--fs-small);
	line-height: var(--lh-loose);
	font-feature-settings: "tnum" 1;
}

/* Consecutive mono lines read as one block of contact detail: */
.is-style-mono + .is-style-mono {
	margin-block-start: 0;
}

.ex-split .wp-block-group > .is-style-mono:has(+ .is-style-mono),
.is-style-mono:has(+ .is-style-mono) {
	margin-block-end: 0;
}

.is-style-note {
	margin-block-start: 30px;
	padding-block-start: 22px;
	border-block-start: 1px solid var(--ex-rule);
	color: var(--ex-on-surface-muted);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

.is-style-kicker {
	color: var(--ex-blue);
	font-family: var(--ex-body);
	font-size: var(--fs-micro);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
}

/* Buttons */

.ex-btn,
.wp-block-button__link {
	display: inline-block;
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: 2px;
	font-family: var(--ex-body);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.ex-btn--primary,
.wp-block-button:not(.is-style-ghost, .is-style-dark, .is-style-arrow) .wp-block-button__link {
	background: var(--ex-blue);
	color: #fff;
}

.ex-btn--primary:hover,
.wp-block-button:not(.is-style-ghost, .is-style-dark, .is-style-arrow) .wp-block-button__link:hover {
	background: var(--ex-blue-3);
}

.is-style-ghost .wp-block-button__link {
	background: transparent;
	border-color: rgb(255 255 255 / 30%);
	color: #fff;
}

.is-style-ghost .wp-block-button__link:hover {
	border-color: #fff;
	background: rgb(255 255 255 / 7%);
}

.is-style-dark .wp-block-button__link {
	background: var(--ex-ink);
	color: #fff;
}

.is-style-dark .wp-block-button__link:hover {
	background: var(--ex-ink-3);
}

.is-style-arrow .wp-block-button__link {
	/* Core centres button text. */
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	background: none;
	color: var(--ex-blue);
	font-family: var(--ex-body);
	font-size: var(--fs-micro);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tr-label);
	text-align: start;
	text-transform: uppercase;
}

/* Hero */

/* Cross-block: sticky positioning goes on the TEMPLATE PART WRAPPER, not on .ex-header. */
.wp-block-template-part:has(> .ex-header) {
	position: sticky;
	top: 0;
	z-index: 60;
}

/* Cross-block: the hero re-tones the rule colour for any stat grid inside it. */
.ex-hero .ex-stats {
	--ex-rule: rgb(255 255 255 / 14%);
}

.ex-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--ex-ink);

	--ex-on-surface-muted: #b4c8d9;
}

.ex-hero__canvas {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
}

.ex-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(ellipse 70% 60% at 22% 40%, rgb(62 143 212 / 22%), transparent 70%),
		linear-gradient(180deg, rgb(7 26 43 / 0%) 55%, rgb(7 26 43 / 95%) 100%);
}

.ex-hero__inner {
	position: relative;
	z-index: 2;
	padding-block: 120px 96px;
}

.ex-hero :is(h1, h2) {
	max-width: 17ch;
	color: #fff;
}

/* Hero H1 emphasis: Bricolage ships only roman, so oblique-synthesis is off the table.
   Emphasis rides on weight contrast (400 against a 600 base) plus a tone shift, not italic. */
.ex-hero h1 em {
	color: var(--ex-blue-2);
	font-style: normal;
	font-weight: var(--fw-regular);
}

.ex-hero .is-style-lede {
	max-width: 56ch;
	margin-block-start: 26px;
	color: #b4c8d9;
	font-size: var(--fs-lede);
}

.ex-hero .wp-block-buttons {
	margin-block-start: 38px;
}

/* Platform columns */

.ex-platforms {
	margin-block-start: 34px;
	gap: 34px;
}

.ex-platforms .wp-block-column {
	border-block-start: 2px solid var(--ex-blue);
	padding-block-start: 18px;
}

.ex-platforms h3 {
	margin: 0 0 8px;
	font-size: var(--fs-h4);
	/* The source renders this as a div, so it inherits the body line-height rather than the tighter heading one. */
	line-height: var(--lh-body);
	letter-spacing: var(--tr-tight);
}

.ex-platforms p {
	margin-block-end: 14px;
	color: var(--ex-on-surface-muted);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

/* A platform column is a core Column block, so its children get the uniform blockGap; the heading already owns its 8px and the list starts flush. */
.ex-platforms .wp-block-column > * {
	margin-block-start: 0;
}

.ex-platforms .ex-list {
	margin: 0;
}

/* The design's platform list is a step tighter than the card lists the ex-list block is tuned for: */
.ex-platforms .ex-list--dot {
	gap: 8px;
}

/* Matches the block's own `.wp-block-explicatos-ex-list.ex-list--dot .ex-list__item` at three classes. */
.ex-platforms .ex-list--dot .ex-list__item {
	margin-block-end: 0;
	padding-inline-start: 19px;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

/* The section lost its second column, so the two platform panels now have the full container to share, and the design holds them as a pair down to 560px. */
@media (width <= 560px) {
	.ex-platforms.wp-block-columns {
		/* stylelint-disable-next-line declaration-no-important -- answers core's own !important; there is no other way back to a stacked layout once is-not-stacked-on-mobile is set. */
		flex-wrap: wrap !important;
		gap: 28px;
	}

	.ex-platforms.wp-block-columns > .wp-block-column {
		flex-basis: 100%;
	}
}

/* Footer */

.ex-footer {
	padding: 64px 0 34px;
	background: var(--ex-ink-4);
	color: #7e97ac;
	font-size: var(--fs-small);
	line-height: var(--lh-body);

	--ex-rule: rgb(255 255 255 / 14%);
}

.ex-footer a {
	color: #7e97ac;
	text-decoration: none;
}

.ex-footer a:hover {
	color: var(--ex-blue-2);
}

.ex-footer__top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 40px;
	padding-block-end: 40px;
	border-block-end: 1px solid var(--ex-rule);
}

.ex-footer .ex-brand__name {
	margin: 0;
	line-height: var(--lh-snug);
	color: #fff;
	font-family: var(--ex-display);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
}

.ex-footer .ex-brand__sub {
	margin: 2px 0 0;
	line-height: var(--lh-snug);
	color: var(--ex-blue-2);
	font-family: var(--ex-body);
	font-size: var(--fs-micro);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
}

.ex-footer__blurb {
	max-width: 36ch;
	margin: 16px 0 0;
}

.ex-footer__title {
	margin: 0 0 16px;
	color: #fff;
	font-family: var(--ex-body);
	font-size: var(--fs-micro);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tr-label);
	line-height: var(--lh-snug);
	text-transform: uppercase;
}

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

.ex-footer__list li {
	margin-block-end: 9px;
}

/* The legal row reads as one line of separated links rather than a column, so the separator is generated between items instead of typed into the menu. */
.ex-footer__col--inline .ex-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
}

.ex-footer__col--inline .ex-footer__list li {
	margin-block-end: 0;
}

.ex-footer__col--inline .ex-footer__list li + li::before {
	content: "·";
	margin-inline-end: 8px;
	color: #5e7891;
}

.ex-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	padding-block-start: 26px;
	font-size: var(--fs-small);
}

.ex-footer__bottom p {
	margin: 0;
}

.ex-empty {
	padding: 20px;
	border: 1px solid var(--ex-line);
	color: var(--ex-muted);
}

/* Utilities */

/* Content must never depend on JavaScript to become visible. */
@media (scripting: enabled) {
	.ex-rv {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity var(--ex-dur) ease, transform var(--ex-dur) var(--ex-ease);
	}

	.ex-rv.is-in {
		opacity: 1;
		transform: none;
	}
}

/* Responsive */

@media (width <= 960px) {
	:root {
		--ex-section-y: 74px;
	}

	.ex-hero__inner { padding-block: 76px 64px; }

	.ex-footer__top { grid-template-columns: 1fr; }
}

@media (width <= 560px) {
	.ex-platforms { gap: 28px; }

}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	/* stylelint-disable declaration-no-important -- a motion preference has to beat any animation a component declares, including future ones. */
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	/* stylelint-enable declaration-no-important */

	.ex-rv {
		opacity: 1;
		transform: none;
	}
}

/* Editor canvas: */
.block-editor-block-list__layout .ex-rv,
.editor-styles-wrapper .ex-rv,
.ex-editor-ssr .ex-rv {
	opacity: 1;
	transform: none;
}

/* Prose for long-form pages. */

.ex-prose {
	max-width: 76ch;
}

.ex-prose > * + * {
	margin-block-start: 1rem;
}

.ex-prose > :is(h2, h3, h4) {
	margin-block-start: 2.4rem;
}

.ex-prose > h2 {
	font-size: 1.6rem;
}

.ex-prose > h3 {
	font-size: 1.2rem;
}

.ex-prose > ul,
.ex-prose > ol {
	padding-inline-start: 1.2rem;
}

.ex-prose > ul > li,
.ex-prose > ol > li {
	margin-block-end: 0.4rem;
}

.ex-prose > .ex-callout {
	padding: 20px 24px;
	border-inline-start: 2px solid var(--ex-blue);
	background: var(--ex-paper-2);
	color: var(--ex-muted);
	font-size: 0.93rem;
}

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

.ex-prose :is(th, td) {
	padding: 10px 16px 10px 0;
	border-block-end: 1px solid var(--ex-line);
	text-align: start;
	vertical-align: top;
}

/* Version and effective-date line under a legal document's title. */
.ex-prose > .ex-doc-meta {
	margin-block-end: 2rem;
	color: var(--ex-on-surface-muted);
	font-family: var(--ex-mono);
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Language disclaimer at the head of a translated legal page. */
.ex-prose > .ex-lang-note {
	padding: 16px 20px;
	border-inline-start: 2px solid var(--ex-blue);
	background: var(--ex-paper-2);
	font-size: 0.92rem;
}