/*
 * Leaf Products theme styles.
 * Tokens: assets/css/tokens.css (inlined ahead of this file).
 * Order: base > type > links > buttons > header > footer > sections > cards >
 *        pricing > content > components > motion.
 * Rule of thumb: nothing decorative. Weight comes from type, spacing and rules.
 */

/* 1. Base ------------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--lf-header-h) + 1.5rem);
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-optical-sizing: auto;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

img, svg, video, canvas { max-width: 100%; height: auto; }
svg { flex: none; }

:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p, li, dd, figcaption, blockquote) { text-wrap: pretty; }

::selection { background: var(--lf-accent); color: var(--lf-ground); }

:focus-visible {
	outline: 2px solid var(--lf-accent);
	outline-offset: 3px;
	border-radius: 2px;
}
.wp-site-blocks .skip-link:focus { outline-offset: 0; }

/* Keep the header, main and footer flush; the footer sits at the bottom of short pages. */
.wp-site-blocks {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}
.wp-site-blocks > main { flex: 1 0 auto; }
.wp-site-blocks > * { margin-block: 0; }

/* Full-bleed sections span the viewport (their parents have no side padding) and carry
 * the page gutter themselves. Their inner content is centred and capped by each group's
 * own layout width, so bands run edge to edge while text stays on the grid. */
.wp-site-blocks > header > .alignfull,
.wp-site-blocks > footer > .alignfull,
main > .alignfull,
main > .wp-block-post-content > .alignfull,
.entry-content > .alignfull {
	padding-inline: var(--lf-gutter);
}
/* Specificity note: WordPress sets block-gap margins with :root :where(.is-layout-flow) > *,
 * so these need a class in the selector to win. Sections butt against each other; each
 * section owns its own vertical padding. */
.wp-site-blocks main > *,
.wp-site-blocks main > .wp-block-post-content > *,
.wp-site-blocks .entry-content > .alignfull { margin-block: 0; }

/* 2. Type ------------------------------------------------------------------ */

.lf-eyebrow,
.is-style-lf-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--lf-text-2);
	margin-block: 0;
}

.is-style-lf-lede {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: var(--lf-text-2);
	max-width: 52ch;
}

h1 em, h2 em, h3 em, h4 em,
.lf-lockup em {
	font-style: italic;
	color: var(--lf-accent);
}

.is-style-lf-display {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.02;
	letter-spacing: -0.025em;
}

.lf-tnum, .lf-num { font-variant-numeric: tabular-nums; }
.lf-measure { max-width: 62ch; }
.lf-narrow { max-width: 34rem; }
.lf-serif { font-family: var(--wp--preset--font-family--serif); }
.lf-mono { font-family: var(--wp--preset--font-family--mono); }

/* 3. Links ----------------------------------------------------------------- */

:where(a) {
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--lf-accent) 65%, transparent);
	transition: color 0.15s var(--lf-ease), text-decoration-color 0.15s var(--lf-ease);
}
:where(a):hover { text-decoration-color: currentColor; }

/* A link that reads as a plain label with an arrow. */
.lf-arrow-link { font-weight: 500; text-decoration: none; }
.lf-arrow-link::after {
	content: "\2192";
	display: inline-block;
	margin-inline-start: 0.35em;
	transition: transform 0.18s var(--lf-ease);
}
.lf-arrow-link:hover::after { transform: translateX(3px); }

/* 4. Buttons --------------------------------------------------------------- */

.wp-element-button, .wp-block-button__link {
	transition: background-color 0.15s var(--lf-ease), color 0.15s var(--lf-ease), border-color 0.15s var(--lf-ease);
	border: 1px solid transparent;
	cursor: pointer;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--lf-text);
	border: 1px solid var(--lf-text);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--lf-text);
	color: var(--lf-ground);
}
.wp-block-button.is-style-lf-ghost > .wp-block-button__link {
	background: transparent;
	color: var(--lf-text);
	border-color: transparent;
	padding-inline: 0.9em;
}
.wp-block-button.is-style-lf-ghost > .wp-block-button__link:hover { background: var(--lf-panel); color: var(--lf-text); }

/* On the deep band the primary button inverts: ivory on canopy becomes canopy on ivory. */
.is-style-lf-band .wp-block-button:not(.is-style-outline):not(.is-style-lf-ghost) > .wp-block-button__link,
.lf-header--band .wp-block-button:not(.is-style-outline):not(.is-style-lf-ghost) > .wp-block-button__link {
	background: var(--lf-ivory);
	color: var(--lf-canopy);
}
.is-style-lf-band .wp-block-button:not(.is-style-outline):not(.is-style-lf-ghost) > .wp-block-button__link:hover { background: #fff; color: var(--lf-canopy); }
.is-style-lf-band .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--lf-on-deep); border-color: color-mix(in srgb, var(--lf-on-deep) 55%, transparent); }
.is-style-lf-band .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--lf-on-deep); color: var(--lf-canopy); border-color: var(--lf-on-deep); }
.is-style-lf-band .wp-block-button.is-style-lf-ghost > .wp-block-button__link { color: var(--lf-on-deep); }
.is-style-lf-band .wp-block-button.is-style-lf-ghost > .wp-block-button__link:hover { background: color-mix(in srgb, var(--lf-on-deep) 12%, transparent); color: var(--lf-on-deep); }

.wp-block-buttons { gap: 0.75rem; }

/* 5. Header ---------------------------------------------------------------- */

.lf-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: var(--lf-ground);
	border-bottom: 1px solid var(--lf-line);
}
.lf-header__bar {
	min-height: var(--lf-header-h);
	gap: 1.5rem;
}
.lf-header__nav { flex: 1 1 auto; justify-content: flex-start; }
.lf-header__actions { gap: 0.5rem; flex: none; }
.lf-header__actions .wp-block-button__link { padding: 0.6em 1.1em; }

.lf-lockup {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--lf-text);
	text-decoration: none;
	white-space: nowrap;
}
.lf-lockup:hover { color: var(--lf-text); }
.lf-lockup__mark { width: 0.95em; height: 0.95em; color: var(--lf-text); }
.lf-lockup em { color: var(--lf-accent); }

/* Navigation. The mobile overlay is core's; these rules only set colours and spacing. */
.lf-header .wp-block-navigation { font-size: var(--wp--preset--font-size--small); }
.lf-header .wp-block-navigation__container { gap: 0.25rem 1.5rem; }
.lf-header .wp-block-navigation-item__content {
	padding-block: 0.5rem;
	text-decoration: none;
	color: var(--lf-text);
}
.lf-header .wp-block-navigation-item__content:hover { color: var(--lf-accent); }
.lf-header .wp-block-navigation__submenu-container {
	background: var(--lf-card);
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius);
	box-shadow: var(--lf-shadow-lg);
	padding: 0.5rem;
	min-width: 14rem;
}
.lf-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.55rem 0.75rem; border-radius: var(--lf-radius); }
.lf-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--lf-panel); }
/* Submenu toggle: core draws a 9px arrow; give it a 24px tap area (WCAG 2.5.8). */
.lf-header .wp-block-navigation__submenu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	padding: 0;
}
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--lf-ground);
	color: var(--lf-text);
	padding: 1.5rem;
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { color: var(--lf-text); }

.lf-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: transparent;
	color: var(--lf-text);
	border: 1px solid transparent;
	border-radius: var(--lf-radius);
	cursor: pointer;
	transition: background-color 0.15s var(--lf-ease);
}
.lf-theme-toggle:hover { background: var(--lf-panel); }
.lf-theme-toggle[hidden] { display: none; }
/* Show the icon for the theme you would switch to. */
.lf-theme-toggle .lf-icon--sun { display: none; }
.lf-theme-toggle .lf-icon--moon { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .lf-theme-toggle .lf-icon--sun { display: block; }
	:root:not([data-theme="light"]) .lf-theme-toggle .lf-icon--moon { display: none; }
}
:root[data-theme="dark"] .lf-theme-toggle .lf-icon--sun { display: block; }
:root[data-theme="dark"] .lf-theme-toggle .lf-icon--moon { display: none; }
:root[data-theme="light"] .lf-theme-toggle .lf-icon--sun { display: none; }
:root[data-theme="light"] .lf-theme-toggle .lf-icon--moon { display: block; }

/* WordPress collapses the menu into a button below 600px. This header needs more room
 * than that (lockup, five links, toggle, account buttons), so between 600 and 899px it
 * behaves as on a phone: the same button and overlay, using core's own markup. */
@media (min-width: 600px) and (max-width: 899px) {
	.lf-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.lf-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (max-width: 899px) {
	.lf-header__actions .lf-portal-link { display: none; }
	/* Order on small screens: lockup, theme toggle, menu button. */
	.lf-header__actions { order: 2; margin-inline-start: auto; }
	.lf-header__nav { order: 3; flex: none; }
}
/* Sign in and Create account: hidden in the header bar on small screens, so they live in the
 * opened menu instead. They never show in the inline desktop menu (the header has buttons). */
.lf-header .lf-nav-account { display: none; }
.lf-header .is-menu-open .lf-nav-account { display: block; }

.lf-product-hero .lf-split { align-items: start; }

/* 6. Footer ---------------------------------------------------------------- */

.lf-footer {
	background: var(--lf-panel);
	border-top: 1px solid var(--lf-line);
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
}
.lf-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60);
}
.lf-footer__lede { color: var(--lf-text-2); max-width: 30ch; margin-block-start: 1rem; }
.lf-footer h2, .lf-footer .lf-footer__heading {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lf-text-2);
	margin: 0 0 1rem;
}
.lf-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.lf-footer a { text-decoration: none; }
.lf-footer a:hover { text-decoration: underline; }
.lf-footer__base {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: center;
	justify-content: space-between;
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--lf-line);
	color: var(--lf-text-2);
}
.lf-footer__base p { margin: 0; }
@media (max-width: 781px) {
	.lf-footer__grid { grid-template-columns: 1fr 1fr; }
	.lf-footer__grid > :first-child { grid-column: 1 / -1; }
}

/* 7. Sections -------------------------------------------------------------- */

.lf-section { padding-block: var(--wp--preset--spacing--80); }
.lf-section--tight { padding-block: var(--wp--preset--spacing--70); }
.lf-section--flush-top { padding-block-start: 0; }

.wp-block-group.is-style-lf-panel { background: var(--lf-panel); }
.wp-block-group.is-style-lf-band {
	background: var(--lf-deep);
	color: var(--lf-on-deep);
	--lf-text: var(--lf-on-deep);
	--lf-text-2: var(--lf-on-deep-2);
	--lf-accent: var(--lf-brass-on-deep);
	--lf-line: color-mix(in srgb, var(--lf-on-deep) 22%, transparent);
	--lf-panel: color-mix(in srgb, var(--lf-on-deep) 8%, transparent);
	position: relative;
	isolation: isolate;
}
.is-style-lf-band :where(h1, h2, h3, h4, h5, h6, p, li, a, .wp-block-heading) { color: inherit; }
.is-style-lf-band :where(.lf-eyebrow, .is-style-lf-eyebrow, .is-style-lf-lede) { color: var(--lf-on-deep-2); }
.is-style-lf-band :where(a):hover { color: var(--lf-brass-on-deep); }

.lf-sechead { display: grid; gap: 1rem; margin-block-end: var(--wp--preset--spacing--60); }
.lf-sechead > * { margin-block: 0; }
.lf-sechead h2 { max-width: 20ch; }
.lf-sechead .is-style-lf-lede { max-width: 56ch; }

.lf-split {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	align-items: center;
}
.lf-split > * { margin-block: 0; }
.lf-split--start { align-items: start; }
@media (max-width: 899px) { .lf-split { grid-template-columns: minmax(0, 1fr); } }

.lf-rule { border: 0; border-top: 1px solid var(--lf-line); margin-block: 0; }

/* 8. Hero ------------------------------------------------------------------ */

.lf-hero { padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--80); overflow: clip; }
.lf-hero > .lf-split { margin-block-start: 0; }
.lf-hero h1 {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.02;
	letter-spacing: -0.025em;
	max-width: 14ch;
}
.lf-hero__body > * { margin-block: 0; }
.lf-hero__body { display: grid; gap: 1.5rem; align-content: start; }
.lf-hero__mark {
	position: absolute;
	inset-block-end: -8%;
	inset-inline-end: -4%;
	width: min(46vw, 34rem);
	height: auto;
	color: var(--lf-on-deep);
	opacity: 0.05;
	z-index: -1;
	pointer-events: none;
}

/* The example panel: a picture of the product's own voice, labelled as an example. */
.lf-example {
	margin: 0;
	background: var(--lf-card);
	color: var(--lf-text);
	border: 1px solid var(--lf-line-strong);
	border-radius: var(--lf-radius-lg);
	box-shadow: var(--lf-shadow-lg);
	padding: 1.25rem 1.25rem 1rem;
	--lf-text: light-dark(#18201A, #EEEADB);
	--lf-text-2: light-dark(#4B5749, #A9B5A3);
	--lf-line: light-dark(#D8D3C0, #26392C);
	--lf-accent: light-dark(#7F5F28, #C9A566);
}
@supports not (color: light-dark(#000, #fff)) {
	.lf-example { --lf-text: #18201A; --lf-text-2: #4B5749; --lf-line: #D8D3C0; --lf-accent: #7F5F28; }
}
.lf-example .lf-eyebrow { color: var(--lf-text-2); }
.lf-example__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 0.75rem; }
.lf-example__title { font-family: var(--wp--preset--font-family--serif); font-size: 1.375rem; font-weight: 500; line-height: 1.2; margin: 0 0 1rem; color: var(--lf-text); }
.lf-example table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.lf-example th, .lf-example td { padding: 0.65rem 0; border-top: 1px solid var(--lf-line); text-align: start; vertical-align: baseline; }
.lf-example th { font-weight: 400; color: var(--lf-text-2); }
.lf-example td { text-align: end; font-variant-numeric: tabular-nums; font-family: var(--wp--preset--font-family--mono); font-size: 0.875rem; }
.lf-example figcaption {
	margin-block-start: 0.75rem;
	padding-block-start: 0.75rem;
	border-top: 1px solid var(--lf-line);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lf-text-2);
}

/* 9. Pills, cards, grids ---------------------------------------------------- */

.lf-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.15rem 0.7rem;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.5;
	background: color-mix(in srgb, var(--lf-text) 9%, transparent);
	color: var(--lf-text);
	text-decoration: none;
	white-space: nowrap;
}
.lf-pill--good { background: var(--lf-positive-bg); color: var(--lf-positive); }
.lf-pill--warn { background: var(--lf-warning-bg); color: var(--lf-warning); }
.lf-pill--bad { background: var(--lf-error-bg); color: var(--lf-error); }
.lf-pill--info { background: var(--lf-info-bg); color: var(--lf-info); }

.wp-block-group.is-style-lf-card,
.lf-card {
	background: var(--lf-card);
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius);
	padding: var(--wp--preset--spacing--50);
	position: relative;
	transition: border-color 0.18s var(--lf-ease), transform 0.18s var(--lf-ease), box-shadow 0.18s var(--lf-ease);
}
.wp-block-group.is-style-lf-card:has(a):hover,
.lf-card:has(.lf-card__link):hover {
	border-color: var(--lf-text);
	box-shadow: var(--lf-shadow-lg);
}
@media (prefers-reduced-motion: no-preference) {
	.lf-card:has(.lf-card__link):hover { transform: translateY(-2px); }
}
.lf-card > * { margin-block: 0; }
.lf-card > * + * { margin-block-start: 0.75rem; }
.lf-card h2, .lf-card h3 { font-size: var(--wp--preset--font-size--medium); line-height: 1.2; }

/* The whole card is one target: the title link stretches over it. */
.lf-card__link a, a.lf-card__link { text-decoration: none; }
.lf-card__link a::after, a.lf-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.lf-card a:not(.lf-card__link a):not(.lf-card__link) { position: relative; z-index: 2; }

/* Numbered cards: 01, 02, 03 set in mono, from a CSS counter. */
.lf-numbered { counter-reset: lf-n; }
/* WordPress makes the product grid list a size container, which scopes counters to it. */
.lf-numbered .wp-block-post-template { counter-reset: lf-n; }
.lf-numbered .lf-card, .lf-numbered.lf-cards > .lf-card { counter-increment: lf-n; }
/* In a query grid each card sits in its own <li>, inside a containment root: count the items. */
.lf-numbered .wp-block-post-template .lf-card { counter-increment: none; }
.lf-numbered .wp-block-post-template > li { counter-increment: lf-n; }
.lf-numbered .lf-card::before {
	content: counter(lf-n, decimal-leading-zero);
	display: block;
	margin-block-end: 1.25rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	color: var(--lf-accent);
}

.lf-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.lf-cards > *, .lf-pillars > *, .lf-rows > *, .lf-plans > *, .lf-footer__grid > *, .lf-docs > * { margin-block: 0; }

/* Query Loop grids */
.wp-block-post-template.is-layout-grid { gap: 1.25rem; }
.wp-block-post-template > li { margin: 0; }
.wp-block-post-template.is-layout-grid > li { display: flex; }
.wp-block-post-template.is-layout-grid > li > .lf-card { width: 100%; }

.lf-meta { margin: 0; }
.lf-meta--tagline { color: var(--lf-text-2); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.lf-meta--status { line-height: 1; }
.lf-terms { font-family: var(--wp--preset--font-family--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lf-text-2); }
.lf-terms a { text-decoration: none; }

/* Filter chips: term links above the product grid, no JavaScript. */
.lf-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.lf-chips a {
	display: inline-flex;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--lf-line-strong);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	color: var(--lf-text);
}
.lf-chips a:hover, .lf-chips a[aria-current="page"] { background: var(--lf-text); color: var(--lf-ground); border-color: var(--lf-text); }

/* Pillars: three principles with a hairline above each. */
.lf-pillars { display: grid; gap: var(--wp--preset--spacing--60); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.lf-pillar { border-top: 1px solid var(--lf-text); padding-block-start: 1rem; }
.lf-pillar > * { margin-block: 0; }
.lf-pillar > * + * { margin-block-start: 0.6rem; }
.lf-pillar h3 { font-size: var(--wp--preset--font-size--large); }
.lf-pillar p { color: var(--lf-text-2); }
.lf-pillar .lf-eyebrow { color: var(--lf-accent); }

/* Definition-style rows: label left, statement right. */
.lf-rows { display: grid; }
.lf-row { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 0.5rem 2rem; padding-block: 1.25rem; border-top: 1px solid var(--lf-line); }
.lf-row:last-child { border-bottom: 1px solid var(--lf-line); }
.lf-row > * { margin: 0; }
.lf-row h3 { font-size: var(--wp--preset--font-size--medium); }
@media (max-width: 699px) { .lf-row { grid-template-columns: 1fr; } }

/* 10. Pricing --------------------------------------------------------------- */

.lf-plans { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); align-items: stretch; }
.lf-plan { display: flex; flex-direction: column; gap: 1rem; }
.lf-plan > * { margin-block: 0; }
.lf-plan h3 { font-size: var(--wp--preset--font-size--large); }
.lf-plan__price { font-family: var(--wp--preset--font-family--serif); font-size: 2.25rem; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lf-plan__note { font-size: var(--wp--preset--font-size--small); color: var(--lf-text-2); }
.lf-plan ul { margin: 0; }
.lf-plan .wp-block-buttons { margin-block-start: auto; }
.lf-plan--featured { border-color: var(--lf-text); box-shadow: var(--lf-shadow-lg); }

/* 11. Content typography ---------------------------------------------------- */

.entry-content > * + * { margin-block-start: 1.25em; }
.entry-content > :where(h2) { margin-block-start: 1.6em; }
.entry-content > :where(h3) { margin-block-start: 1.4em; }
.entry-content > :where(h2, h3, h4) + * { margin-block-start: 0.75em; }
.entry-content > .alignfull, .entry-content > .wp-block-group.alignfull { margin-block-start: 0; }
.entry-content :where(h2, h3)[id] { scroll-margin-top: calc(var(--lf-header-h) + 1.5rem); }

:where(.wp-block-list, .entry-content ul, .entry-content ol) { padding-inline-start: 1.25em; }
:where(.wp-block-list li + li) { margin-block-start: 0.4em; }
.wp-block-list.is-style-lf-plain, ul.is-style-lf-plain { list-style: none; padding: 0; }
.wp-block-list.is-style-lf-checks, ul.is-style-lf-checks { list-style: none; padding: 0; }
.is-style-lf-checks > li { position: relative; padding-inline-start: 1.6em; }
.is-style-lf-checks > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.55em;
	width: 0.9em;
	height: 0.5em;
	border-inline-start: 2px solid var(--lf-positive);
	border-block-end: 2px solid var(--lf-positive);
	transform: rotate(-45deg) scale(0.85);
	transform-origin: center;
}

.wp-block-quote { border-inline-start: 2px solid var(--lf-accent); padding-inline-start: 1.25rem; margin-inline: 0; }
.wp-block-quote cite { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lf-text-2); }
.wp-block-quote.is-style-lf-pull { border: 0; padding: 0; font-size: var(--wp--preset--font-size--large); letter-spacing: -0.01em; line-height: 1.25; }

.wp-block-separator { border-width: 0 0 1px; border-color: var(--lf-line); opacity: 1; }

/* Code */
:where(code, kbd, samp) {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875em;
}
:where(p, li, td, dd) > code {
	background: var(--lf-panel);
	border: 1px solid var(--lf-line);
	border-radius: 3px;
	padding: 0.1em 0.35em;
}
.wp-block-code {
	position: relative;
	background: var(--lf-panel);
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius);
	padding: 1.1rem 1.25rem;
	overflow-x: auto;
	tab-size: 2;
}
.wp-block-code code { background: none; border: 0; padding: 0; font-size: inherit; }
.lf-copy {
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-end: 0.5rem;
	padding: 0.25rem 0.6rem;
	font: 500 0.6875rem/1.4 var(--wp--preset--font-family--mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lf-text-2);
	background: var(--lf-card);
	border: 1px solid var(--lf-line-strong);
	border-radius: 3px;
	cursor: pointer;
}
.lf-copy:hover { color: var(--lf-text); border-color: var(--lf-text); }

/* Tables */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table table :where(th, td),
.wp-block-table table th,
.wp-block-table table td { padding: 0.8rem 1rem 0.8rem 0; border: 0; border-bottom: 1px solid var(--lf-line); text-align: start; vertical-align: top; }
.wp-block-table thead { border: 0; }
.wp-block-table table th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lf-text-2);
	border-bottom: 1px solid var(--lf-text);
}
.wp-block-table table td { font-variant-numeric: tabular-nums; }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--lf-panel); }
.wp-block-table.is-style-lf-compare td:first-child, .wp-block-table.is-style-lf-compare th:first-child { font-weight: 500; }

/* FAQ: details styled as ruled rows */
.wp-block-details { border-top: 1px solid var(--lf-line); padding-block: 1.1rem; margin-block: 0; }
.wp-block-details:last-of-type { border-bottom: 1px solid var(--lf-line); }
.wp-block-details summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.3;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+";
	flex: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.25rem;
	color: var(--lf-accent);
	transition: transform 0.18s var(--lf-ease);
}
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > *:not(summary) { margin-block-start: 0.75rem; color: var(--lf-text-2); max-width: 62ch; }

/* Callouts */
.wp-block-group.is-style-lf-callout,
.wp-block-group.is-style-lf-warning {
	border: 1px solid var(--lf-line);
	border-inline-start-width: 3px;
	border-radius: var(--lf-radius);
	padding: 1rem 1.25rem;
	background: var(--lf-info-bg);
	border-inline-start-color: var(--lf-info);
	color: var(--lf-text);
}
.wp-block-group.is-style-lf-warning { background: var(--lf-warning-bg); border-inline-start-color: var(--lf-warning); }
.is-style-lf-callout > *, .is-style-lf-warning > * { margin-block: 0; }
.is-style-lf-callout > * + *, .is-style-lf-warning > * + * { margin-block-start: 0.5rem; }

.wp-block-image img, .wp-block-post-featured-image img { border-radius: var(--lf-radius); }
figure { margin: 0; }

/* 12. Components ------------------------------------------------------------ */

.lf-breadcrumbs { font-size: var(--wp--preset--font-size--small); color: var(--lf-text-2); }
.lf-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0; padding: 0; list-style: none; }
.lf-breadcrumbs li { display: inline-flex; gap: 0.5rem; margin: 0; max-width: 100%; }
.lf-breadcrumbs li + li::before { content: "/"; color: var(--lf-line-strong); }
.lf-breadcrumbs a { display: inline-flex; align-items: center; min-height: 24px; color: inherit; text-decoration: none; }
.lf-breadcrumbs a:hover { color: var(--lf-text); text-decoration: underline; }
.lf-breadcrumbs [aria-current] { color: var(--lf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lf-page-head { padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60); border-bottom: 1px solid var(--lf-line); }
.lf-page-head > * { margin-block: 0; }
.lf-page-head > * + * { margin-block-start: 1rem; }
.lf-page-head h1 { max-width: 18ch; }

/* Product page */
.lf-product-hero { padding-block: var(--wp--preset--spacing--70); border-bottom: 1px solid var(--lf-line); }
.lf-product-hero__main { display: grid; gap: 1.25rem; align-content: start; }
.lf-product-hero__main > * { margin-block: 0; }
.lf-product-hero h1 { max-width: 16ch; }
.lf-product-hero .lf-meta--tagline { font-size: var(--wp--preset--font-size--medium); max-width: 40ch; }

.lf-facts { margin: 0; padding: 1.25rem; background: var(--lf-card); border: 1px solid var(--lf-line); border-radius: var(--lf-radius); display: grid; gap: 0; }
.lf-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 0.7rem; border-top: 1px solid var(--lf-line); }
.lf-facts > div:first-child { border-top: 0; padding-block-start: 0; }
.lf-facts > div:last-child { padding-block-end: 0; }
.lf-facts dt {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lf-text-2);
}
.lf-facts dd { margin: 0; text-align: end; font-size: var(--wp--preset--font-size--small); }
.lf-facts__note { color: var(--lf-text-2); }

.lf-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Changelog */
.lf-release { padding-block: var(--wp--preset--spacing--50); border-top: 1px solid var(--lf-line); display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0.5rem 2rem; }
.lf-release > * { margin-block: 0; }
.lf-release__aside { display: grid; gap: 0.5rem; align-content: start; }
.lf-release__aside > * { margin: 0; }
.lf-release .lf-meta--version { font-family: var(--wp--preset--font-family--mono); font-size: 0.875rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.lf-release .wp-block-post-date { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lf-text-2); }
.lf-release .lf-meta--product { font-size: var(--wp--preset--font-size--small); }
.lf-release .lf-meta--product a { color: var(--lf-text-2); }
.lf-release__body > * + * { margin-block-start: 0.75em; }
@media (max-width: 699px) { .lf-release { grid-template-columns: 1fr; } }

/* Pagination and search */
.wp-block-query-pagination { gap: 1rem; margin-block-start: var(--wp--preset--spacing--60); font-size: var(--wp--preset--font-size--small); }
.wp-block-query-pagination a { text-decoration: none; }
.wp-block-query-pagination .page-numbers.current { font-weight: 600; text-decoration: underline; }
.wp-block-search__inside-wrapper { gap: 0.5rem; }
.wp-block-search__input {
	padding: 0.7rem 0.9rem;
	font: inherit;
	color: var(--lf-text);
	background: var(--lf-card);
	border: 1px solid var(--lf-line-strong);
	border-radius: var(--lf-radius);
}
.wp-block-search__input:focus { outline: 2px solid var(--lf-accent); outline-offset: 0; border-color: var(--lf-accent); }
.wp-block-search__button {
	background: var(--lf-action);
	color: var(--lf-on-action);
	border: 1px solid var(--lf-action);
	border-radius: var(--lf-radius);
	padding: 0.7rem 1.1rem;
	font: 500 var(--wp--preset--font-size--small)/1.3 var(--wp--preset--font-family--sans);
	cursor: pointer;
}
.wp-block-search__button:hover { background: var(--lf-action-hover); border-color: var(--lf-action-hover); }

/* Empty states say what will appear here and how to start it. */
.lf-empty { padding: 2.5rem 1.5rem; text-align: center; color: var(--lf-text-2); border: 1px dashed var(--lf-line-strong); border-radius: var(--lf-radius); }
.lf-empty > * { margin-block: 0; }
.lf-empty > * + * { margin-block-start: 0.5rem; }
.lf-empty__title { font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--medium); font-weight: 500; line-height: 1.3; color: var(--lf-text); }

/* Blog cards */
.lf-post-card { display: grid; gap: 0.6rem; padding-block: 1.5rem; border-top: 1px solid var(--lf-line); }
.lf-post-card > * { margin-block: 0; }
.lf-post-card h2 { font-size: var(--wp--preset--font-size--large); }
.lf-post-card .wp-block-post-date { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lf-text-2); }

/* Post and doc meta rows */
.lf-post-meta { gap: 0.25rem 1.25rem; align-items: center; }
.lf-post-meta > * { margin-block: 0; }
.lf-post-meta :where(.wp-block-post-date, .wp-block-post-author-name, .lf-meta) {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lf-text-2);
}
.lf-doc-updated { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: var(--wp--preset--spacing--60) 0; padding-block-start: 1rem; border-top: 1px solid var(--lf-line); }

/* A product with no releases shows no "Recent releases" section at all. */
.lf-releases-section { margin-block-start: var(--wp--preset--spacing--70); }
.lf-releases-section:not(:has(.lf-release)) { display: none; }
.lf-releases-section h2 { margin-block-end: 1rem; }

/* Narrow elements (a headline capped at 18ch) inside a centred 76rem column align to the
 * column's left edge, not to the middle of the page. Core centres them with auto margins. */
.lf-page-head > *, .lf-cta > *, .lf-product-hero > * {
	margin-inline-start: max(0px, calc((100% - 76rem) / 2)) !important;
	margin-inline-end: auto !important;
}

/* Reading columns inside a section (product body, doc, release, page) also start at the
 * column's left edge, so hero, headings and body share one line. */
.lf-section > .wp-block-post-content,
.lf-section > .wp-block-post-featured-image,
.lf-section > .lf-releases-section {
	margin-inline-start: max(0px, calc((100% - 76rem) / 2)) !important;
	margin-inline-end: auto !important;
}

/* Final call to action */
.lf-cta { text-align: start; }
.lf-cta h2 { font-size: var(--wp--preset--font-size--xx-large); line-height: 1.05; max-width: 16ch; }
.lf-cta > * { margin-block: 0; }
.lf-cta > * + * { margin-block-start: 1.5rem; }

/* 13. Motion ---------------------------------------------------------------- */

/* Cross-document page transitions where supported. Off for reduced motion. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.16s; }
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Quiet reveal as sections enter the viewport: opacity and 12px of travel, once.
 * Pure CSS scroll-driven animation; browsers without support show the content. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.lf-reveal > * {
			animation: lf-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 35%;
		}
		@keyframes lf-rise {
			from { opacity: 0; transform: translateY(12px); }
			to { opacity: 1; transform: none; }
		}
	}
}

/* Forced colours: keep boundaries visible. */
@media (forced-colors: active) {
	.lf-card, .lf-facts, .lf-example, .wp-block-code { border: 1px solid CanvasText; }
	.lf-pill { border: 1px solid CanvasText; }
}