/*
 * Plinth site — shared styles.
 *
 * Colours, fonts and sizes come from theme.json (Appearance → Editor → Styles),
 * so change them there. This file maps them to short names, switches them for
 * light mode, and styles the block styles listed in inc/setup.php.
 */

/* ---------- Tokens ---------- */
:root {
	--bg: var(--wp--preset--color--bg);
	--surface: var(--wp--preset--color--surface);
	--card: var(--wp--preset--color--card);
	--raised: var(--wp--preset--color--raised);
	--border: var(--wp--preset--color--border);
	--border2: var(--wp--preset--color--border-strong);
	--text: var(--wp--preset--color--text);
	--text2: var(--wp--preset--color--text-2);
	--text3: var(--wp--preset--color--text-3);
	--amber: var(--wp--preset--color--amber);
	--on-amber: var(--wp--preset--color--on-amber);
	--amber-ink: var(--wp--preset--color--amber-ink);
	--amber-soft: var(--wp--preset--color--amber-soft);
	--good: var(--wp--preset--color--good);
	--good-soft: var(--wp--preset--color--good-soft);
	--crit: var(--wp--preset--color--crit);
	--dot: var(--wp--preset--color--dot);
	--font-display: var(--wp--preset--font-family--display);
	--font-body: var(--wp--preset--font-family--body);
	--font-mono: var(--wp--preset--font-family--mono);
	--display-stretch: var(--wp--custom--display-stretch, 112%);
	--shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
	--pop-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
	--plinth-gutter: 32px;
	--plinth-section: 112px;
	--plinth-section-s: 104px;
	color-scheme: dark;
}

/* Light mode: every colour preset points at its "Light mode ·" twin. */
:root[data-theme='light'] {
	--wp--preset--color--bg: var(--wp--preset--color--light-bg);
	--wp--preset--color--surface: var(--wp--preset--color--light-surface);
	--wp--preset--color--card: var(--wp--preset--color--light-card);
	--wp--preset--color--raised: var(--wp--preset--color--light-raised);
	--wp--preset--color--border: var(--wp--preset--color--light-border);
	--wp--preset--color--border-strong: var(--wp--preset--color--light-border-strong);
	--wp--preset--color--text: var(--wp--preset--color--light-text);
	--wp--preset--color--text-2: var(--wp--preset--color--light-text-2);
	--wp--preset--color--text-3: var(--wp--preset--color--light-text-3);
	--wp--preset--color--amber-ink: var(--wp--preset--color--light-amber-ink);
	--wp--preset--color--amber-soft: var(--wp--preset--color--light-amber-soft);
	--wp--preset--color--good: var(--wp--preset--color--light-good);
	--wp--preset--color--good-soft: var(--wp--preset--color--light-good-soft);
	--wp--preset--color--crit: var(--wp--preset--color--light-crit);
	--wp--preset--color--dot: var(--wp--preset--color--light-dot);
	--shadow: 0 32px 80px rgba(21, 23, 26, 0.14);
	--pop-shadow: 0 16px 40px rgba(21, 23, 26, 0.16);
	color-scheme: light;
}

/* ---------- Base ---------- */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Anchor jumps and keyboard focus land below the sticky header (72 px + 16). */
	scroll-padding-top: calc(88px + var(--wp-admin--admin-bar--height, 0px));
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}
:where(h1, h2, .dsp, .has-display-font-family) {
	font-stretch: var(--display-stretch);
}
p {
	text-wrap: pretty;
}
img,
svg {
	max-width: 100%;
}
button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}
button {
	cursor: pointer;
}
:focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 2px;
}
::selection {
	background: rgba(217, 130, 15, 0.35);
}
[hidden] {
	display: none !important;
}

/* Sections stack edge to edge; nothing between header, main and footer. */
.wp-site-blocks > * {
	margin-block-start: 0;
}
.wp-block-post-content > .alignfull,
.entry-content > .alignfull,
.is-root-container > .alignfull {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}
main#main {
	margin: 0;
}

/* ---------- Helpers ---------- */
.sr-only,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.skip {
	position: absolute;
	left: 16px;
	top: -60px;
	z-index: 100;
	height: 44px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	border-radius: 10px;
	background: var(--amber);
	color: var(--on-amber);
	font-weight: 650;
	text-decoration: none;
}
.skip:focus {
	top: 14px;
}
.dsp {
	font-family: var(--font-display);
	font-stretch: var(--display-stretch);
	letter-spacing: -0.028em;
}
.mono,
.has-mono-font-family {
	font-family: var(--font-mono);
}
.ui {
	font-family: var(--font-body);
}
.nw {
	white-space: nowrap;
}
.tnum {
	font-variant-numeric: tabular-nums;
}
.wrap {
	width: 100%;
	max-width: calc(1136px + 2 * var(--plinth-gutter));
	margin: 0 auto;
	padding: 0 var(--plinth-gutter);
}
.dots,
.is-style-section-dots {
	background-image: radial-gradient(var(--dot) 1px, transparent 1.5px);
	background-size: 24px 24px;
}
.scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.ml-auto,
.footer-fine > .ml-auto {
	margin-left: auto !important;
}
.only-phone {
	display: none;
}
.only-wide {
	display: flex;
}
.only-narrow {
	display: none;
}
.ph {
	color: var(--amber-ink);
	font-weight: 600;
}
.ic {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
	display: block;
}
:root[data-theme='light'] .slab {
	fill: currentColor;
}
.kbd {
	padding: 1px 6px;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-family: var(--font-mono);
	font-size: 0.86em;
}
.is-vcenter {
	align-items: center !important;
}
.is-vstart {
	align-items: start !important;
}
.min-w-0 {
	min-width: 0;
}

/* ---------- Links and buttons ---------- */
.lnk {
	color: var(--text2);
	text-decoration: none;
}
.lnk:hover {
	color: var(--text);
}
.lnk[aria-current='page'] {
	color: var(--text);
	font-weight: 600;
}
.btn-p:hover {
	filter: brightness(1.08);
}
.btn-g:hover {
	background: var(--raised) !important;
}
.ink-link {
	color: var(--amber-ink);
	text-decoration: underline;
}

/* Core buttons: Primary (default), Primary with arrow, Secondary, Text link with arrow. */
.wp-block-button .wp-block-button__link {
	min-height: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	white-space: nowrap;
	transition: filter 0.12s ease, background-color 0.12s ease;
}
.wp-block-button:not(.is-style-ghost):not(.is-style-text-arrow) .wp-block-button__link:hover {
	filter: brightness(1.08);
}
.wp-block-button.is-style-arrow .wp-block-button__link::after,
.wp-block-button.is-style-text-arrow .wp-block-button__link::after {
	content: '';
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: var(--icon-arrow) center / contain no-repeat;
	mask: var(--icon-arrow) center / contain no-repeat;
}
.wp-block-button.is-style-ghost .wp-block-button__link {
	border: 1px solid var(--border2);
	background: var(--surface);
	color: var(--text);
	font-weight: 600;
	padding-top: 12px;
	padding-bottom: 12px;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: var(--raised);
}
.wp-block-button.is-style-text-arrow .wp-block-button__link {
	min-height: 44px;
	padding: 0;
	background: transparent;
	color: var(--amber-ink);
	font-weight: 600;
	gap: 8px;
}
.wp-block-button.is-style-text-arrow .wp-block-button__link::after {
	width: 16px;
	height: 16px;
}
.wp-block-button.is-style-text-arrow .wp-block-button__link:hover {
	text-decoration: underline;
}
.wp-block-buttons.is-small .wp-block-button__link {
	min-height: 46px;
	padding: 0 18px;
}
.wp-block-button.is-style-full .wp-block-button__link,
.wp-block-buttons.is-full,
.wp-block-buttons.is-full .wp-block-button,
.wp-block-buttons.is-full .wp-block-button__link {
	width: 100%;
}

:root {
	--icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
	--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
	--icon-undo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11'/%3E%3C/svg%3E");
}

/* ---------- Text styles ---------- */
.is-style-eyebrow {
	font-family: var(--font-mono);
	font-size: 12.5px;
	line-height: 1.5;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--amber-ink);
}
.is-style-pill,
.is-style-pill-dot,
.is-style-pill-good {
	position: relative;
	align-self: flex-start;
	width: fit-content;
	max-width: 100%;
	padding: 0 12px;
	display: block;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	font-family: var(--font-mono);
	font-size: 12.5px;
	line-height: 28px;
	color: var(--text2);
}
.is-style-pill-dot,
.is-style-pill-good {
	padding-left: 27px;
}
.has-text-align-center.is-style-pill,
.has-text-align-center.is-style-pill-dot,
.has-text-align-center.is-style-pill-good {
	align-self: center;
	margin-left: auto !important;
	margin-right: auto !important;
}
.is-style-pill-dot::before,
.is-style-pill-good::before {
	content: '';
	position: absolute;
	left: 12px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
	background: var(--amber);
}
.is-style-pill-good::before {
	background: var(--good);
}
.is-style-muted {
	color: var(--text3);
	font-size: 14px;
}
.is-style-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--text3);
}
.is-style-number {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--amber-ink);
}
.is-style-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	color: var(--text3);
}
.is-style-price strong {
	font-family: var(--font-display);
	font-stretch: var(--display-stretch);
	letter-spacing: -0.028em;
	font-size: 48px;
	line-height: 1.6;
	font-weight: 700;
	color: var(--text);
}
.is-style-price.is-small strong {
	font-size: 44px;
}
.is-style-chip {
	align-self: flex-start;
	width: fit-content;
	min-height: 36px;
	padding: 0 12px;
	display: flex;
	align-items: center;
	border-radius: 8px;
	background: var(--raised);
	font-weight: 600;
}
.is-style-badge {
	width: fit-content;
	min-height: 24px;
	padding: 0 10px;
	display: flex;
	align-items: center;
	border-radius: 999px;
	background: var(--amber);
	color: var(--on-amber);
	font-size: 12.5px;
	font-weight: 650;
	line-height: 1.4;
}
.is-style-callout {
	padding: 16px 18px 16px 50px;
	position: relative;
	border: 1px solid var(--border2);
	border-radius: 12px;
	background: var(--amber-soft);
	color: var(--text);
	font-size: 15.5px;
}
.is-style-callout::before {
	content: '';
	position: absolute;
	left: 18px;
	top: 18px;
	width: 20px;
	height: 20px;
	background: var(--amber-ink);
	-webkit-mask: var(--icon-info) center / contain no-repeat;
	mask: var(--icon-info) center / contain no-repeat;
}
.is-style-callout.is-undo::before {
	-webkit-mask-image: var(--icon-undo);
	mask-image: var(--icon-undo);
}
.has-display-font-family {
	letter-spacing: -0.028em;
}
.wp-block-heading.has-body-font-family {
	letter-spacing: normal;
}

/* Inline tags written with {{tag:…}} tokens */
.tag {
	padding: 1px 9px;
	border-radius: 999px;
	background: var(--raised);
	color: var(--text2);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	font-family: var(--font-body);
	letter-spacing: normal;
}
.tag-amber {
	background: var(--amber-soft);
	color: var(--amber-ink);
}
.tag-good {
	background: var(--good-soft);
	color: var(--good);
}
.tags {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}
.tick {
	display: inline-block;
	width: 18px;
	height: 18px;
	vertical-align: -4px;
	color: var(--amber-ink);
}
.dash {
	color: var(--text3);
}

/* ---------- Groups ---------- */
.is-style-section {
	border-bottom: 1px solid var(--border);
}
.is-style-section-dots {
	border-bottom: 1px solid var(--border);
}
.is-style-card,
.is-style-card-amber,
.is-style-panel,
.is-style-callout-box {
	border: 1px solid var(--border);
	border-radius: 16px;
	background: var(--card);
}
.is-style-card-amber {
	border-color: var(--amber);
	box-shadow: 0 0 0 1px var(--amber);
}
.is-style-panel {
	background: var(--surface);
}
.is-style-callout-box {
	border-color: var(--border2);
	border-radius: 14px;
	background: var(--amber-soft);
}
a.is-style-card,
.is-style-card.is-link {
	color: inherit;
	text-decoration: none;
}
.is-style-card.is-link:hover {
	background: var(--raised);
}
.is-style-card.is-link a {
	color: inherit;
	text-decoration: none;
}
.is-style-card.is-link a::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.is-style-card.is-link {
	position: relative;
}
.is-style-card .card-links a,
.card-links a {
	color: var(--amber-ink);
	text-decoration: none;
}
.card-links a:hover {
	text-decoration: underline;
}
.soon {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--text3);
}
.soon-tag {
	padding: 0 7px;
	border-radius: 999px;
	background: var(--raised);
	color: var(--text3);
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	white-space: nowrap;
}
.is-style-frame {
	border: 1px solid var(--border2);
	border-radius: 16px;
	background: var(--bg);
	box-shadow: var(--shadow);
	overflow: hidden;
}

/* An icon tile beside a title and text (Faster to get around). */
.feature-row {
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
}
.feature-row > .wp-block-group {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---------- Lists ---------- */
.is-style-checks,
.is-style-clock,
.is-style-bullets,
.is-style-links,
.is-style-chips,
.is-style-screens,
.is-style-pill-nav,
.is-style-inline-icons {
	list-style: none;
	padding-left: 0 !important;
}
.is-style-checks {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.is-style-checks > li,
.is-style-clock > li {
	position: relative;
	padding-left: 32px;
}
.is-style-checks > li::before,
.is-style-clock > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 3px;
	width: 20px;
	height: 20px;
	background: var(--amber-ink);
	-webkit-mask: var(--icon-check) center / contain no-repeat;
	mask: var(--icon-check) center / contain no-repeat;
}
.is-style-checks.is-compact {
	gap: 8px;
	color: var(--text2);
}
.is-style-checks.is-compact > li {
	padding-left: 28px;
}
.is-style-checks.is-compact > li::before {
	width: 18px;
	height: 18px;
	top: 4px;
}
.is-style-clock {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--text2);
}
.is-style-clock > li {
	padding-left: 26px;
}
.is-style-clock > li::before {
	width: 16px;
	height: 16px;
	top: 4px;
	background: var(--text3);
	-webkit-mask-image: var(--icon-clock);
	mask-image: var(--icon-clock);
}
.is-style-bullets {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.is-style-bullets > li {
	position: relative;
	padding-left: 18px;
	color: var(--text2);
}
.is-style-bullets > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 10px;
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: var(--border2);
}
.is-style-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.is-style-chips > li {
	min-height: 44px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	border: 1px solid var(--border2);
	border-radius: 10px;
	background: var(--surface);
	font-weight: 600;
}
.is-style-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.is-style-links a {
	color: var(--text2);
	text-decoration: none;
}
.is-style-links a:hover {
	color: var(--text);
}
.is-style-links a[aria-current='page'] {
	color: var(--text);
	font-weight: 600;
}
/* Screen cards on the Tour: a bold name, then a line. */
.is-style-screens {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
	gap: 12px;
}
.is-style-screens > li {
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--card);
	color: var(--text2);
	font-size: 15px;
	line-height: 1.55;
}
.is-style-screens > li strong {
	display: block;
	color: var(--text);
	font-size: 16px;
	font-weight: 600;
}
/* Area links on the Tour: a row of pills that scrolls sideways on phones. */
.is-style-pill-nav {
	display: flex;
	gap: 8px;
	padding-bottom: 2px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.is-style-pill-nav > li:first-child {
	margin-left: auto;
}
.is-style-pill-nav > li:last-child {
	margin-right: auto;
}
.is-style-pill-nav a {
	height: 44px;
	padding: 0 16px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface);
	font-size: 14.5px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--text);
	text-decoration: none;
}
.is-style-pill-nav a:hover {
	background: var(--raised);
}
.is-style-pill-nav > li {
	flex-shrink: 0;
}
/* Facts in a row, each with an amber icon (Pricing hero). */
.is-style-inline-icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 28px;
	font-size: 14.5px;
	color: var(--text2);
}
.is-style-inline-icons > li {
	position: relative;
	padding-left: 24px;
}
.is-style-inline-icons > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -8px;
	width: 16px;
	height: 16px;
	background: var(--amber-ink);
	-webkit-mask: var(--icon-check) center / contain no-repeat;
	mask: var(--icon-check) center / contain no-repeat;
}
ol.is-style-steps {
	list-style: none;
	padding-left: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
	counter-reset: step;
}
ol.is-style-steps > li {
	position: relative;
	padding-left: 26px;
	color: var(--text2);
	counter-increment: step;
}
ol.is-style-steps > li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--font-mono);
	color: var(--amber-ink);
}

/* ---------- Questions (Details block, style "Question") ---------- */
.wp-block-details.is-style-faq {
	border-bottom: 1px solid var(--border);
	margin: 0;
}
.is-style-faq + .is-style-faq {
	margin-block-start: 0 !important;
}
.faq-list {
	border-top: 1px solid var(--border);
}
.faq-list > * {
	margin-block-start: 0 !important;
}
.wp-block-details.is-style-faq > summary {
	min-height: 68px;
	display: flex;
	align-items: center;
	gap: 16px;
	list-style: none;
	cursor: pointer;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}
.faq-list.is-small .wp-block-details.is-style-faq > summary {
	min-height: 64px;
	font-size: 17px;
}
.wp-block-details.is-style-faq > summary::-webkit-details-marker {
	display: none;
}
.wp-block-details.is-style-faq > summary::after {
	content: '';
	margin-left: auto;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background: var(--text3);
	-webkit-mask: var(--icon-chevron) center / contain no-repeat;
	mask: var(--icon-chevron) center / contain no-repeat;
	transition: transform 0.15s ease;
}
.wp-block-details.is-style-faq[open] > summary::after {
	transform: rotate(180deg);
}
.wp-block-details.is-style-faq > :not(summary) {
	margin: 0;
	padding: 0 0 22px;
	color: var(--text2);
	max-width: 720px;
}

/* ---------- Tables ---------- */
.wp-block-table.is-style-plinth,
.wp-block-table.is-style-compare,
.wp-block-table.is-style-settings {
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: var(--card);
}
.wp-block-table.is-style-settings {
	border-radius: 14px;
}
.wp-block-table.is-style-plinth table,
.wp-block-table.is-style-compare table,
.wp-block-table.is-style-settings table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	font-size: 15px;
	table-layout: auto;
}
.wp-block-table.is-style-plinth table {
	min-width: 820px;
}
.wp-block-table.is-style-compare table {
	min-width: 680px;
}
.wp-block-table.is-style-plinth :is(th, td),
.wp-block-table.is-style-compare :is(th, td),
.wp-block-table.is-style-settings :is(th, td) {
	border: 0;
	border-bottom: 1px solid var(--border);
	text-align: left;
	vertical-align: top;
}
.wp-block-table.is-style-plinth thead,
.wp-block-table.is-style-compare thead {
	border-bottom: 0;
}
.wp-block-table.is-style-plinth thead th {
	padding: 14px 20px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text3);
}
.wp-block-table.is-style-plinth td {
	padding: 18px 20px;
	color: var(--text2);
}
.wp-block-table.is-style-plinth td:first-child {
	color: var(--text);
	font-weight: 600;
}
.wp-block-table.is-style-plinth td code,
.wp-block-table code {
	font-family: var(--font-mono);
	font-size: 13px;
	background: none;
	padding: 0;
	color: inherit;
}
.wp-block-table.is-style-compare th {
	padding: 16px 20px;
	font-weight: 650;
	color: var(--text);
}
.wp-block-table.is-style-compare thead th:first-child {
	color: var(--text3);
	font-weight: 600;
}
.wp-block-table.is-style-compare td {
	padding: 16px 20px;
	color: var(--text2);
}
.wp-block-table.is-style-compare td + td {
	color: var(--text);
}
.wp-block-table.is-style-compare tr.grp td,
.wp-block-table.is-style-compare td .grp {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text3);
}
.wp-block-table.is-style-settings th,
.wp-block-table.is-style-settings td {
	padding: 14px 18px;
	line-height: 1.55;
	font-size: 15.5px;
}
.wp-block-table.is-style-settings td:first-child {
	width: 30%;
	color: var(--text);
	font-weight: 600;
}
.wp-block-table.is-style-settings td + td {
	color: var(--text2);
}
.wp-block-table :is(tbody tr:last-child) :is(td, th) {
	border-bottom: 0;
}
.wp-block-table figcaption {
	color: var(--text3);
	font-size: 14px;
}

/* ---------- Header ---------- */
.site-header {
	border-bottom: 1px solid var(--border);
	background: var(--bg);
}
/*
 * Sticky header: the template part's <header> sticks (the block inside it
 * can't, its parent is only as tall as itself). Same 72 px in both states.
 */
.wp-site-blocks > header:has(> .site-header) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.wp-site-blocks > header:has(> .site-header) > .site-header {
		background: rgba(13, 14, 16, 0.84);
		-webkit-backdrop-filter: saturate(150%) blur(14px);
		backdrop-filter: saturate(150%) blur(14px);
	}
	:root[data-theme='light'] .wp-site-blocks > header:has(> .site-header) > .site-header {
		background: rgba(244, 245, 246, 0.86);
	}
	/* With the phone menu open, the header is solid so the links read cleanly. */
	.wp-site-blocks > header:has(> .site-header) > .site-header:has(.site-menu:not([hidden])) {
		background: var(--bg);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}
@media (max-width: 600px) {
	/* WordPress's admin bar scrolls away on phones. */
	.wp-site-blocks > header:has(> .site-header) {
		top: 0;
	}
}
@media print {
	.wp-site-blocks > header:has(> .site-header) {
		position: static;
	}
}
.hdr-row {
	height: 72px;
	display: flex;
	align-items: center;
	gap: 36px;
}
.hdr-logo,
.plinth-logo {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 10px;
	color: var(--text);
	text-decoration: none;
	width: fit-content;
}
.plinth-logo .word {
	font-family: var(--font-display);
	font-stretch: var(--display-stretch);
	letter-spacing: -0.028em;
	font-weight: 700;
	line-height: 1;
}
.hdr-nav {
	display: flex;
	align-items: center;
	gap: 28px;
	font-size: 14.5px;
	font-weight: 500;
	white-space: nowrap;
}
.hdr-actions {
	margin-left: auto;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 10px;
}
.hdr-icon {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface);
}
.theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text2);
}
.hdr-search {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 196px;
	height: 40px;
	padding: 0 8px 0 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface);
	color: var(--text3);
	font-size: 14px;
}
.hdr-kbd {
	margin-left: auto;
	height: 22px;
	padding: 0 6px;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-size: 11.5px;
	line-height: 20px;
}
.hdr-buy {
	height: 40px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--text);
	text-decoration: none;
}
.hdr-demo {
	height: 40px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	border-radius: 10px;
	background: var(--amber);
	color: var(--on-amber);
	font-size: 14.5px;
	font-weight: 650;
	white-space: nowrap;
	text-decoration: none;
}
.hdr-demo-short {
	display: none;
}
.menu-toggle {
	color: var(--text);
}
.menu-toggle .ic {
	margin: 0 auto;
}
.mlink {
	min-height: 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-bottom: 1px solid var(--border);
	font-size: 18px;
	font-weight: 600;
	color: var(--text);
	text-decoration: none;
}
.mlink[aria-current] {
	color: var(--amber-ink);
}
.mlink .ic {
	color: var(--text3);
}
.site-menu {
	border-top: 1px solid var(--border);
	background: var(--bg);
}
.site-menu .wrap {
	padding-top: 4px;
	padding-bottom: 24px;
	display: flex;
	flex-direction: column;
}
.menu-search {
	margin-top: 20px;
	height: 48px;
	padding: 0 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
	color: var(--text3);
	font-size: 15px;
}
.theme-toggle .i-moon {
	display: none;
}
:root[data-theme='light'] .theme-toggle .i-sun {
	display: none;
}
:root[data-theme='light'] .theme-toggle .i-moon {
	display: block;
}
.menu-toggle .i-x {
	display: none;
}
.menu-toggle[aria-expanded='true'] .i-menu {
	display: none;
}
.menu-toggle[aria-expanded='true'] .i-x {
	display: block;
}
@media (max-width: 1140px) {
	.hdr-row {
		gap: 24px;
	}
	.hdr-nav {
		gap: 20px;
	}
	.hdr-search {
		width: 40px;
		padding: 0;
		justify-content: center;
	}
	.hdr-kbd,
	.hdr-buy {
		display: none !important;
	}
	.hdr-search-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}
@media (max-width: 860px) {
	.hdr-row {
		gap: 16px;
	}
	.hdr-actions {
		gap: 8px;
	}
}
@media (max-width: 430px) {
	.hdr-demo {
		padding: 0 14px;
	}
	.hdr-demo-long {
		display: none;
	}
	.hdr-demo-short {
		display: inline;
	}
}
@media (max-width: 359px) {
	.hdr-demo {
		display: none;
	}
}

/* ---------- Footer ---------- */
.site-footer {
	border-top: 1px solid var(--border);
	margin-top: -1px !important;
	position: relative;
}
.site-footer a {
	text-decoration: none;
}
.site-footer .is-style-links {
	gap: 8px;
	font-size: 14.5px;
}
.footer-fine {
	font-size: 13px;
	color: var(--text3);
}
.footer-fine > * {
	margin: 0 !important;
}
.footer-fine a {
	color: var(--text2);
}
.footer-fine a:hover {
	color: var(--text);
}

/* ---------- Command palette caret (Faster section) ---------- */
.caret {
	animation: plcaret 1s steps(1) infinite;
}
@keyframes plcaret {
	50% {
		opacity: 0;
	}
}

/* ---------- Product mocks ---------- */
.plinth-mock {
	min-width: 0;
}
.dash.d-dark {
	--dbg: #0d0e10;
	--dchrome: #131417;
	--dcard: #16181b;
	--draised: #1e2024;
	--dborder: #24262b;
	--dtext: #edeef0;
	--dtext2: #a6aab1;
	--dtext3: #878c94;
	--dgood: #46c685;
	--dwarn: #e8a13a;
}
.dash.d-light {
	--dbg: #f4f5f6;
	--dchrome: #ffffff;
	--dcard: #ffffff;
	--draised: #eef0f2;
	--dborder: #e3e5e8;
	--dtext: #15171a;
	--dtext2: #4b5058;
	--dtext3: #656b74;
	--dgood: #187a43;
	--dwarn: #9a5a06;
}
.seg > button {
	position: relative;
	background: transparent;
	color: var(--text2);
}
/* The buttons look 30px tall; the tap area is 44px, like the swatches beside them. */
.seg > button::after {
	content: '';
	position: absolute;
	inset: -7px 0;
}
.seg > button[aria-pressed='true'] {
	background: var(--raised);
	color: var(--text);
}
.swatch {
	width: 44px;
	height: 44px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
}
.swatch > span {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--sw);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.swatch[aria-pressed='true'] > span {
	box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--sw);
}
.tabbtn {
	border: 1px solid var(--border);
	background: transparent;
	color: var(--text2);
}
.tabbtn[aria-selected='true'] {
	border-color: var(--border2);
	background: var(--raised);
	color: var(--text);
}
.chipbtn {
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text2);
}
.chipbtn[aria-pressed='true'] {
	border-color: var(--border2);
	background: var(--raised);
	color: var(--text);
}
[role='tabpanel']:focus-visible {
	outline-offset: 6px;
	border-radius: 12px;
}
.st-side,
.st-wide {
	display: flex;
}

/*
 * Before and after (homepage, 861 px and up): the whole screen is the slider.
 * The frame takes the pointer (site.js); the invisible range on top is for
 * the keys and screen readers, so it lets the pointer through.
 */
.cmp {
	cursor: ew-resize;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}
.cmp-range {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
}
.cmp-div {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	z-index: 1;
	width: 2px;
	margin-left: -1px;
	background: #d9820f;
	/* A faint dark edge, so the line shows on the light stock screen too. */
	box-shadow: 0 0 0 1px rgba(11, 12, 14, 0.25);
	pointer-events: none;
}
/*
 * The handle sits on the line but stops short of the frame's edges, so it
 * and its focus ring are never cut off; at 0% and 100% the line runs on to
 * the edge without it.
 */
.cmp-knob {
	position: absolute;
	top: 50%;
	left: clamp(34px, var(--pos), calc(100% - 34px));
	z-index: 1;
	width: 48px;
	height: 48px;
	margin: -24px 0 0 -24px;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	border: 3px solid #0b0c0e;
	border-radius: 50%;
	background: #d9820f;
	color: #0b0c0e;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
	transition: transform 0.15s ease;
}
.cmp-knob .ic {
	width: 15px;
	height: 15px;
	stroke-width: 2.25;
}
@media (hover: hover) {
	.cmp:hover .cmp-knob {
		transform: scale(1.08);
	}
}
.cmp.is-dragging .cmp-knob {
	transform: scale(0.96);
}
/* Keyboard focus: a white ring round the handle, edged in near-black so it shows on light screens too. */
.cmp-range:focus-visible ~ .cmp-knob {
	outline: 3px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 7px #0b0c0e, 0 6px 20px rgba(0, 0, 0, 0.4);
}
/* The label buttons glide the line to their end; a drag never does. */
.cmp.is-gliding .cmp-div {
	transition: left 0.25s ease;
}
.cmp.is-gliding .cmp-after {
	transition: clip-path 0.25s ease;
}
.cmp.is-gliding .cmp-knob {
	transition: left 0.25s ease, transform 0.15s ease;
}
/* The pills look 40 px tall; the tap area is 44 px. */
.cmp-end {
	position: relative;
	flex-shrink: 0;
}
.cmp-end::after {
	content: '';
	position: absolute;
	inset: -2px 0;
}
/* The pill whose side is showing in full: an amber ring outside a gap in the page colour. */
.cmp-end[aria-pressed='true'] {
	box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #d9820f;
}
/* Keyboard focus on a pressed pill goes outside that ring. */
.cmp-end[aria-pressed='true']:focus-visible {
	outline-offset: 6px;
}
@media (prefers-reduced-motion: reduce) {
	.cmp-knob,
	.cmp.is-gliding .cmp-div,
	.cmp.is-gliding .cmp-after,
	.cmp.is-gliding .cmp-knob {
		transition: none;
	}
}

/* ---------- Tabs block ---------- */
.plinth-tabs {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.plinth-tabs__list {
	display: flex;
	gap: 8px;
	padding-bottom: 2px;
	overflow-x: auto;
}
.plinth-tabs__list .tabbtn {
	height: 44px;
	padding: 0 18px;
	flex-shrink: 0;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- Docs ---------- */
.docs-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: flex-start;
}
.docs-layout > .docs-main {
	flex: 999 1 560px;
	min-width: 0;
}
.side {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.side nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.side a {
	display: block;
	padding: 6px 10px;
	border-radius: 8px;
	color: var(--text2);
	font-size: 14.5px;
	text-decoration: none;
}
.side a:hover {
	background: var(--raised);
	color: var(--text);
}
.side a[aria-current='page'] {
	background: var(--raised);
	color: var(--text);
	font-weight: 600;
}
.side .soon {
	display: flex;
	padding: 6px 10px;
	font-size: 14.5px;
}
.side-h {
	padding: 0 10px 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--text3);
}
.toc {
	flex: 0 0 190px;
	flex-direction: column;
	gap: 4px;
	position: sticky;
	top: calc(88px + var(--wp-admin--admin-bar--height, 0px));
}
.toc a {
	display: block;
	padding: 4px 0 4px 12px;
	border-left: 1px solid var(--border);
	color: var(--text3);
	font-size: 14px;
	text-decoration: none;
}
.toc a:hover {
	color: var(--text);
}
.toc a[aria-current='true'] {
	color: var(--text);
	border-left-color: var(--amber);
}
.tocm {
	min-height: 44px;
	display: flex;
	align-items: center;
	border-top: 1px solid var(--border);
	color: var(--text2);
	font-size: 15.5px;
	text-decoration: none;
}
details > summary {
	cursor: pointer;
}
.toc-narrow > summary {
	list-style: none;
}
.toc-narrow > summary::-webkit-details-marker {
	display: none;
}
.toc-narrow[open] .chev {
	transform: rotate(180deg);
}
.chev {
	transition: transform 0.15s ease;
}
.doc-header {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.doc-header p.lead {
	color: var(--text2);
	font-size: 17px;
	line-height: 1.7;
	max-width: 720px;
}
.doc-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 14px;
	color: var(--text3);
}
:is(.doc-body, .post-type-plinth_doc .is-root-container) > * + * {
	margin-block-start: 14px;
}
:is(.doc-body, .post-type-plinth_doc .is-root-container) > h2 {
	margin-block-start: 48px;
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: -0.02em;
}
:is(.doc-body, .post-type-plinth_doc .is-root-container) > h2:first-child {
	margin-block-start: 0;
}
:is(.doc-body, .post-type-plinth_doc .is-root-container) > h3 {
	font-size: 19px;
	margin-block-start: 22px;
}
:is(.doc-body, .post-type-plinth_doc .is-root-container) p,
:is(.doc-body, .post-type-plinth_doc .is-root-container) > ul > li,
:is(.doc-body, .post-type-plinth_doc .is-root-container) > ol > li {
	color: var(--text2);
	font-size: 17px;
	line-height: 1.7;
	max-width: 720px;
}
:is(.doc-body, .post-type-plinth_doc .is-root-container) > ul:not([class*='is-style']) {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 720px;
}
:is(.doc-body, .post-type-plinth_doc .is-root-container) > ul:not([class*='is-style']) > li {
	position: relative;
	padding-left: 18px;
	font-size: 16.5px;
	line-height: 1.6;
}
:is(.doc-body, .post-type-plinth_doc .is-root-container) > ul:not([class*='is-style']) > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 10px;
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: var(--border2);
}
:is(.doc-body, .post-type-plinth_doc .is-root-container) ol.is-style-steps > li {
	font-size: 16.5px;
}
:is(.doc-body, .post-type-plinth_doc .is-root-container) :not(pre) > code {
	font-family: var(--font-mono);
	font-size: 0.88em;
	padding: 1px 6px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--raised);
	color: var(--text);
}
.doc-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
}
.doc-pager a {
	flex: 1 1 240px;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--card);
	color: var(--text);
	text-decoration: none;
}
.doc-pager a.next {
	align-items: flex-end;
	text-align: right;
}
.doc-pager a span {
	font-size: 13px;
	color: var(--text3);
}
.docs-search {
	max-width: 640px;
	height: 56px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 12px 0 18px;
	border: 1px solid var(--border2);
	border-radius: 14px;
	background: var(--card);
	box-shadow: var(--shadow);
}
.docs-search input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	outline: none;
	background: transparent;
	font-size: 16px;
	color: var(--text);
}
.docs-search .k {
	height: 26px;
	padding: 0 8px;
	display: flex;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: 7px;
	font-size: 12px;
	color: var(--text3);
}

/* ---------- Changelog ---------- */
.rel {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 48px;
	padding: 40px 0;
	border-bottom: 1px solid var(--border);
}
.rel-meta {
	flex: 0 0 200px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.rel-meta .v {
	font-family: var(--font-mono);
	font-size: 20px;
	font-weight: 500;
}
.rel-meta .d {
	font-size: 14px;
	color: var(--text3);
}
.rel-body {
	flex: 999 1 480px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.rel-body ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.rel-body li {
	position: relative;
	padding-left: 18px;
	color: var(--text2);
	font-size: 16px;
	line-height: 1.6;
}
.rel-body li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 10px;
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: var(--border2);
}
.rel-body p {
	color: var(--text2);
	margin: 0;
}
.rel-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.rel-head h2 {
	font-size: 24px;
	line-height: 1.6;
	margin: 0;
}
.rel-t {
	font-family: var(--font-display);
	font-stretch: var(--display-stretch);
	letter-spacing: -0.02em;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}
.rel.old {
	padding: 32px 0;
}
.rel.old .rel-meta .v {
	font-size: 18px;
}
.rel.last {
	border-bottom: 0;
}
.tag-new {
	padding: 1px 9px;
	border-radius: 999px;
	background: var(--amber-soft);
	color: var(--amber-ink);
	font-size: 12.5px;
	font-weight: 600;
}
.tag-fix {
	padding: 1px 9px;
	border-radius: 999px;
	background: var(--raised);
	color: var(--text2);
	font-size: 12.5px;
	font-weight: 600;
}
.series {
	padding-top: 56px;
	padding-bottom: 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	border-bottom: 1px solid var(--border);
}
.series h3 {
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--amber-ink);
	margin: 0;
}
.series span {
	font-size: 14px;
	color: var(--text3);
}
.jump {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.jump a {
	min-height: 36px;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text2);
	text-decoration: none;
}
.jump a:hover {
	color: var(--text);
	background: var(--raised);
}
.cl-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.cl-badges > * {
	height: 32px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text2);
	text-decoration: none;
}
.cl-badges .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--amber);
}

/* ---------- Legal ---------- */
.legal-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.legal-nav a {
	height: 44px;
	padding: 0 12px;
	display: flex;
	align-items: center;
	border-radius: 10px;
	color: var(--text2);
	font-size: 15.5px;
	font-weight: 500;
	text-decoration: none;
}
.legal-nav a:hover {
	background: var(--raised);
	color: var(--text);
}
.legal-nav a[aria-current='page'] {
	background: var(--raised);
	color: var(--text);
	font-weight: 600;
}
.legal-nav .is-style-label,
.legal-nav .side-h {
	padding: 0 12px 8px;
}
.legal-body > h2 {
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin-block-start: 32px;
}
.legal-body > h2:first-child {
	margin-block-start: 0;
}
.legal-body > h2 + * {
	margin-block-start: 10px;
}
.legal-body p {
	color: var(--text2);
	font-size: 17px;
	line-height: 1.7;
	max-width: 720px;
}

/* ---------- Forms ---------- */
.field:focus {
	border-color: var(--amber) !important;
	outline: none;
}

/* ---------- Search dialog ---------- */
.palette {
	width: min(640px, calc(100vw - 32px));
	max-height: min(560px, calc(100vh - 96px));
	margin: 12vh auto auto;
	padding: 0;
	border: 1px solid var(--border2);
	border-radius: 16px;
	background: var(--card);
	color: var(--text);
	box-shadow: var(--shadow);
	overflow: hidden;
}
.palette[open] {
	display: flex;
	flex-direction: column;
}
.palette::backdrop {
	background: rgba(5, 6, 8, 0.6);
	backdrop-filter: blur(2px);
}
:root[data-theme='light'] .palette::backdrop {
	background: rgba(21, 23, 26, 0.32);
}
.palette input[type='search']::-webkit-search-cancel-button {
	display: none;
}
.pal-row {
	min-height: 52px;
	padding: 6px 10px;
	display: flex;
	align-items: center;
	gap: 12px;
	border-radius: 10px;
	color: var(--text);
	text-decoration: none;
}
.pal-row[aria-selected='true'] {
	background: var(--raised);
}
.pal-row[aria-selected='true'] .pal-go {
	visibility: visible;
}
.pal-go {
	visibility: hidden;
}
.pal-h {
	padding: 10px 10px 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--text3);
}

/* ---------- Full-height pages (launch page, 404) ---------- */
.is-fill {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
.is-fill > main {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.only-wide {
		display: none !important;
	}
	.only-narrow {
		display: block;
	}
}
@media (max-width: 860px) {
	:root {
		--plinth-section: 72px;
		--plinth-section-s: 72px;
	}
	.only-desk {
		display: none !important;
	}
	.only-phone {
		display: block;
	}
	.ml-auto,
	.footer-fine > .ml-auto {
		margin-left: 0 !important;
	}
	.arrow {
		display: none !important;
	}
	.rel {
		padding: 28px 0;
	}
	.rel.old {
		padding: 24px 0;
	}
	/* Phone tap targets: links at least 44 px tall. */
	.site-footer .is-style-links {
		gap: 0;
	}
	.site-footer .is-style-links a,
	.footer-fine a,
	.card-links a,
	.card-links .soon,
	.jump a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
	.site-footer .is-style-links a {
		display: flex;
	}
	.footer-fine .ftr-links {
		gap: 0 20px;
	}
}
@media (max-width: 700px) {
	.st-side,
	.st-wide {
		display: none !important;
	}
}
@media (max-width: 600px) {
	:root {
		--plinth-gutter: 16px;
	}
	.wp-block-table.is-style-settings td:first-child {
		width: 38%;
	}
}
@media (prefers-reduced-motion: reduce) {
	.caret {
		animation: none;
	}
	* {
		scroll-behavior: auto !important;
	}
}

/* ---------- Icon block ---------- */
.plinth-icon {
	display: flex;
	width: fit-content;
	color: var(--amber-ink);
	flex-shrink: 0;
}
.plinth-icon.is-tile {
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--amber-soft);
}
.plinth-icon.is-muted {
	color: var(--text3);
}
.plinth-icon.is-tile.is-muted {
	background: var(--raised);
	color: var(--text2);
}
.plinth-logo.aligncenter {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ---------- Resets inside product screens and theme blocks ---------- */
.plinth-mock :where(p, h1, h2, h3, h4, ul, ol, figure, dl, dd, blockquote, form),
.site-header :where(p, ul, ol, nav),
.plinth-releases :where(h2, h3, h4, p, figure),
.changelog-intro :where(p),
.doc-header :where(h1, p),
.plinth-waitlist :where(form, p) {
	margin: 0;
}
.plinth-mock :where(ul, ol) {
	padding: 0;
	list-style: none;
}
.plinth-mock a {
	color: inherit;
	text-decoration: none;
}
.plinth-mock button {
	font-family: inherit;
}
.plinth-mock .wrap {
	padding: 0;
}

/* ---------- Full-height pages: the launch page and 404 ---------- */
.is-fill-page .wp-site-blocks {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-image: radial-gradient(var(--dot) 1px, transparent 1.5px);
	background-size: 24px 24px;
}
.is-fill-page .wp-site-blocks > main {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.is-fill-page .site-footer {
	background: var(--bg);
}

/* ---------- Width and spacing helpers (Advanced → Additional CSS class) ---------- */
.mw-520.mw-520 { max-width: 520px !important; }
.mw-540.mw-540 { max-width: 540px !important; }
.mw-560.mw-560 { max-width: 560px !important; }
.mw-620.mw-620 { max-width: 620px !important; }
.mw-640.mw-640 { max-width: 640px !important; }
.mw-680.mw-680 { max-width: 680px !important; }
.mw-720.mw-720 { max-width: 720px !important; }
.mw-760.mw-760 { max-width: 760px !important; }
.mw-780.mw-780 { max-width: 780px !important; }
.mw-820.mw-820 { max-width: 820px !important; }
.mw-860.mw-860 { max-width: 860px !important; }
.mw-900.mw-900 { max-width: 900px !important; }
.mw-940.mw-940 { max-width: 940px !important; }
.mw-980.mw-980 { max-width: 980px !important; }
.mw-1000.mw-1000 { max-width: 1000px !important; }
.has-text-align-center[class*='mw-'] { margin-left: auto !important; margin-right: auto !important; }
.mt-auto { margin-top: auto !important; }
.flex-1 { flex: 1 1 420px; min-width: 0; }
.is-style-display {
	font-family: var(--font-display);
	font-stretch: var(--display-stretch);
	font-weight: 700;
	letter-spacing: -0.028em;
	line-height: 1.1;
}


/* ---------- Page-specific details ---------- */
/* Plan cards: names and prices keep the design's roomy line height. */
.is-plan h2,
.is-plan h3,
.is-style-card-amber h3,
.is-style-card h3.is-style-display {
	line-height: 1.6;
}
/* Tables: column widths from the design. */
.wp-block-table.is-style-plinth:not(.is-changes) th:nth-child(1) { width: 22%; }
.wp-block-table.is-style-plinth:not(.is-changes) th:nth-child(2) { width: 14%; }
.wp-block-table.is-style-plinth:not(.is-changes) th:nth-child(3) { width: 30%; }
.wp-block-table.is-style-plinth.is-changes th:nth-child(1) { width: 34%; }
.wp-block-table.is-style-plinth.is-changes th:nth-child(2) { width: 36%; }
.wp-block-table.is-style-plinth.is-changes td:last-child { color: var(--text3); }
.wp-block-table.is-style-plinth.is-changes td:last-child code { color: var(--text2); }
.wp-block-table.is-style-plinth td:nth-child(2) code { font-size: 13.5px; }
.wp-block-table.is-style-compare th:first-child { width: 40%; }
.wp-block-table td .tag + .tag { margin-left: 2px; }
.wp-block-table .grp {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text3);
}
/* Compatibility: arrows between the three layers on wide screens. */
@media (min-width: 1100px) {
	.is-steps {
		column-gap: 44px !important;
	}
	.is-steps > * {
		position: relative;
	}
	.is-steps > * + *::before {
		content: '';
		position: absolute;
		left: -32px;
		top: 50%;
		width: 20px;
		height: 20px;
		margin-top: -10px;
		background: var(--text3);
		-webkit-mask: var(--icon-arrow) center / contain no-repeat;
		mask: var(--icon-arrow) center / contain no-repeat;
	}
}
/* Pricing facts: one icon each. */
:root {
	--icon-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E");
	--icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
	--icon-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E");
}
.pricing-facts > li:nth-child(1)::before { -webkit-mask-image: var(--icon-refresh); mask-image: var(--icon-refresh); }
.pricing-facts > li:nth-child(2)::before { -webkit-mask-image: var(--icon-undo); mask-image: var(--icon-undo); }
.pricing-facts > li:nth-child(3)::before { -webkit-mask-image: var(--icon-lock); mask-image: var(--icon-lock); }
.pricing-facts > li:nth-child(4)::before { -webkit-mask-image: var(--icon-file); mask-image: var(--icon-file); }
/* Docs home cards. */
.card-title {
	font-size: 18px;
	font-weight: 650;
	line-height: 1.4;
}
.card-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	font-size: 14.5px;
}
.help-box h2 {
	font-family: var(--font-body);
}
.being-built {
	border-color: var(--border2) !important;
	border-radius: 14px !important;
}
/* Launch page: the product still and its cards. */
.waitlist-still {
	width: 100%;
	max-width: 1000px !important;
	margin-top: 48px !important;
	text-align: left;
}
.waitlist-still figure {
	margin: 0;
}
/* Legal pages: the side menu and the article. */
.legal-layout > .legal-nav {
	flex: 1 1 220px;
	max-width: 260px;
}
.legal-layout > .legal-main {
	flex: 999 1 560px;
	min-width: 0;
}
.legal-body .is-style-callout {
	padding: 22px 24px 22px 60px;
	border-radius: 14px;
	font-size: 17px;
}
.legal-body .is-style-callout::before {
	left: 24px;
	top: 24px;
	width: 22px;
	height: 22px;
}
.legal-body p.is-style-muted {
	font-size: 14px;
	color: var(--text3);
}
/* One-line footer links. */
.footer-fine .ftr-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* ---------- Back to top ---------- */
.to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 60;
	width: 44px;
	height: 44px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border2);
	border-radius: 12px;
	background: var(--surface);
	color: var(--text);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.to-top[hidden] {
	display: none;
}
.to-top.is-on {
	opacity: 1;
}
.to-top:hover {
	border-color: #d9820f;
	color: var(--amber-ink);
}
@media (max-width: 600px) {
	.to-top {
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom));
	}
}
@media (prefers-reduced-motion: reduce) {
	.to-top {
		transition: none;
	}
}
@media print {
	.to-top {
		display: none !important;
	}
}