/*
 * LiftCode theme styles ("Logbuch"): warm paper, black ink, lime as a highlighter, handwritten notes.
 * Loaded on the front end and in the editor. Tokens come from theme.json; this file adds layout,
 * components and motion.
 */

:root {
	--lc-paper: var(--wp--preset--color--paper, #F5F2EA);
	--lc-sheet: var(--wp--preset--color--sheet, #FCFBF7);
	--lc-linen: var(--wp--preset--color--linen, #ECE7DB);
	--lc-rule: var(--wp--preset--color--rule, #D8D2C3);
	--lc-rule-strong: #B9B2A2;
	--lc-ink: var(--wp--preset--color--ink, #1A1915);
	--lc-ink-soft: var(--wp--preset--color--ink-soft, #46443C);
	--lc-muted: var(--wp--preset--color--muted, #6A675D);
	--lc-pencil: var(--wp--preset--color--pencil, #3D3B35);
	--lc-lime: var(--wp--preset--color--lime, #C6F043);
	--lc-lime-deep: #B4DE2C;
	--lc-amber: var(--wp--preset--color--amber, #B45309);
	--lc-orange: var(--wp--preset--color--orange, #FF9500);
	--lc-sans: var(--wp--preset--font-family--schibsted, "Helvetica Neue", Arial, sans-serif);
	--lc-hand: var(--wp--preset--font-family--hand, "Bradley Hand", cursive);
	--lc-mono: var(--wp--preset--font-family--mono, ui-monospace, Menlo, monospace);
	--lc-radius: 4px;
	--lc-gap: 24px;
	--lc-section-y: clamp(4rem, 2.5rem + 5vw, 7rem);
	--lc-ease: cubic-bezier(.2, .7, .2, 1);
	--lc-shadow-paper: 0 1px 0 rgba(26, 25, 21, .06), 0 16px 34px rgba(60, 48, 20, .14);
	--lc-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='1' width='22' height='22' rx='4' fill='%23C6F043' stroke='%231A1915' stroke-width='1.5'/%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%231A1915' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--lc-lime);
	color: var(--lc-ink);
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--lc-ink);
	outline-offset: 3px;
}

h1, h2, h3, h4 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Header, main and footer sit flush; sections bring their own spacing. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Links read like a marker stroke under the words. */
a:where(:not(.wp-element-button)) {
	text-decoration-color: var(--lc-lime);
	text-decoration-thickness: .3em;
	text-underline-offset: .18em;
	text-decoration-skip-ink: none;
	transition: text-decoration-color .2s ease;
}

a:where(:not(.wp-element-button)):hover {
	text-decoration-color: var(--lc-ink);
}

/* Highlighter behind a word: <mark class="lc-mark">. Draws itself once. */
mark.lc-mark,
.lc-mark {
	padding: 0 .06em;
	margin: 0 -.06em;
	color: inherit;
	background-color: transparent;
	background-image: linear-gradient(var(--lc-lime), var(--lc-lime));
	background-repeat: no-repeat;
	background-position: 0 88%;
	background-size: 100% .38em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	animation: lc-mark .9s cubic-bezier(.6, 0, .2, 1) .3s both;
}

.lc-js mark.lc-mark:not(.is-inview) {
	animation-play-state: paused;
}

/* Hand-drawn lime loop around a word: <mark class="lc-circle">. Draws itself once in view. */
@property --lc-sweep {
	syntax: "<angle>";
	inherits: false;
	initial-value: 360deg;
}

mark.lc-circle {
	position: relative;
	padding: 0;
	color: inherit;
	background: none;
}

mark.lc-circle::after {
	content: "";
	position: absolute;
	top: -.2em;
	right: -.3em;
	bottom: -.16em;
	left: -.26em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M112 8 C 164 6, 196 26, 194 52 C 192 82, 142 96, 94 94 C 42 92, 6 74, 8 48 C 10 22, 52 6, 126 12' fill='none' stroke='%23C6F043' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	-webkit-mask: conic-gradient(from 20deg, #000 var(--lc-sweep), transparent 0);
	mask: conic-gradient(from 20deg, #000 var(--lc-sweep), transparent 0);
	transition: --lc-sweep 1.2s cubic-bezier(.6, 0, .2, 1) .3s;
	pointer-events: none;
}

.lc-js mark.lc-circle:not(.is-inview)::after {
	--lc-sweep: 0deg;
}

/* In headlines the loop needs room so it does not touch the neighbouring words. */
:is(h1, h2) mark.lc-circle {
	margin-left: .16em;
}

/* BodyLytics accent for text on paper: the darker orange keeps 4.5:1 contrast. */
.lc-orange {
	color: var(--lc-amber) !important;
}

.lc-lime,
.lc-accent {
	color: var(--lc-ink) !important;
	background-image: linear-gradient(var(--lc-lime), var(--lc-lime));
	background-repeat: no-repeat;
	background-position: 0 88%;
	background-size: 100% .45em;
}

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

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.lc-header {
	position: relative;
	background: rgba(245, 242, 234, .94);
	border-bottom: 1px solid var(--lc-rule);
}

/* The blur sits on its own layer: on the header itself, backdrop-filter would make the header the
   containing block of the fixed mobile menu, which then shrank to the height of the bar. */
.lc-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.lc-header__bar {
	min-height: 84px;
	gap: 24px;
}

.lc-header__nav {
	gap: clamp(1rem, 2.5vw, 2.25rem);
}

.lc-nav .wp-block-navigation-item__content {
	color: var(--lc-ink-soft);
	text-decoration: none;
}

.lc-nav .wp-block-navigation-item__content:hover,
.lc-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--lc-ink);
	text-decoration: underline;
	text-decoration-color: var(--lc-lime);
	text-decoration-thickness: .3em;
	text-underline-offset: .18em;
}

.lc-header__cta .wp-block-button__link {
	padding: .75rem 1.1rem;
	font-size: .9375rem;
}

/* The menu button only shows on phones (core decides when); here it gets a 44 px square. */
.lc-header .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--lc-ink);
	border: 1.5px solid var(--lc-ink);
	border-radius: var(--lc-radius);
}

/* Mobile overlay menu: full screen on paper, large entries from the left, the call to action at the end. */
.lc-nav .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	padding: 10px var(--wp--custom--gutter, 20px) 2rem;
}

.lc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	padding-top: 5.5rem;
}

.lc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: .35rem;
	width: 100%;
}

.lc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding-block: .3rem;
	color: var(--lc-ink);
	font-size: clamp(2rem, 9vw, 2.6rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.03em;
}

/* Close button: the same 44 px square as the menu button, in its place. */
.lc-nav .wp-block-navigation__responsive-container-close {
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--lc-ink);
	border: 1.5px solid var(--lc-ink);
	border-radius: var(--lc-radius);
}

/* "Projekt anfragen" lives in the header bar on wide screens and in the menu on phones. */
.lc-nav .wp-block-navigation-item.lc-nav__cta {
	display: none;
}

.lc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.lc-nav__cta {
	display: flex;
	margin-top: 1.5rem;
}

.lc-nav .wp-block-navigation__responsive-container.is-menu-open .lc-nav__cta .wp-block-navigation-item__content {
	padding: .95rem 1.4rem;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0;
	text-decoration: none;
	background: var(--lc-lime);
	border-radius: var(--lc-radius);
}

/* An open menu covers everything, the cookie card included. */
html.has-modal-open .lc-cookie {
	display: none;
}

@media (max-width: 600px) {
	.lc-header__bar {
		min-height: 64px;
	}

	.wp-block-buttons.lc-header__cta {
		display: none;
	}
}

/* ---------- Brand ---------- */

.lc-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--lc-ink);
	text-decoration: none;
}

.lc-brand:hover {
	color: var(--lc-ink);
}

.lc-brand__mark {
	width: 40px;
	height: 24px;
	fill: currentColor;
	flex-shrink: 0;
}

.lc-brand__word {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.lc-brand.is-mark .lc-brand__mark {
	width: 32px;
	height: 19px;
}

@media (max-width: 600px) {
	.lc-brand__mark {
		width: 32px;
		height: 19px;
	}

	.lc-brand__word {
		font-size: 19px;
	}
}

/* ---------- Text styles ---------- */

.is-style-eyebrow {
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--lc-ink-soft);
}

.is-style-status {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	width: fit-content;
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--lc-ink) !important;
}

.is-style-status::before {
	content: "";
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--lc-lime);
	box-shadow: 0 0 0 1.5px var(--lc-ink);
}

/* "Stempel": a rubber stamp on the page. */
.is-style-badge {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: .35rem .75rem;
	color: var(--lc-ink);
	border: 2px solid currentColor;
	border-radius: var(--lc-radius);
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .08em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	transform: rotate(-3deg);
}

.is-style-badge.lc-lime {
	background: var(--lc-lime);
	border-color: var(--lc-ink);
}

/* "Handnotiz": a pencil note in the margin. */
.is-style-note {
	width: fit-content;
	color: var(--lc-pencil) !important;
	font-family: var(--lc-hand);
	font-size: clamp(1.5rem, 1.3rem + .5vw, 1.8rem);
	font-weight: 600;
	line-height: 1.05;
	transform: rotate(-2deg);
}

.is-style-mono {
	color: var(--lc-ink-soft);
	font-family: var(--lc-mono);
	font-size: .875rem;
}

.lc-big {
	color: var(--lc-ink) !important;
	font-size: clamp(2.25rem, 1.6rem + 2vw, 4rem);
	font-weight: 800;
	letter-spacing: -.045em;
	line-height: .95;
}

.lc-more a,
p.lc-more {
	color: var(--lc-ink);
	font-weight: 700;
}

.lc-more a::after,
p.lc-more:not(:has(a))::after {
	content: " →";
}

.lc-lead {
	max-width: 640px;
	color: var(--lc-ink-soft) !important;
	font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem);
	line-height: 1.55;
}

.lc-fineprint {
	color: var(--lc-muted) !important;
	font-size: .875rem;
	line-height: 1.6;
}

.lc-mail {
	font-size: 1rem;
	font-weight: 600;
}

.lc-meta {
	color: var(--lc-muted) !important;
	font-size: .9375rem;
	font-weight: 600;
}

.is-style-checks {
	display: grid;
	gap: .9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.is-style-checks li {
	position: relative;
	padding-left: 2.15rem;
	color: var(--lc-ink);
	line-height: 1.45;
}

.is-style-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .05em;
	width: 1.375rem;
	height: 1.375rem;
	background: var(--lc-check) center / contain no-repeat;
}

/* ---------- Buttons ---------- */

.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--lc-ink);
	box-shadow: inset 0 0 0 1.5px var(--lc-ink);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus-visible {
	background: var(--lc-ink);
	color: var(--lc-paper);
}

.wp-block-button.is-style-ink .wp-block-button__link {
	background: var(--lc-ink);
	color: var(--lc-paper);
}

.wp-block-button.is-style-ink .wp-block-button__link:hover,
.wp-block-button.is-style-ink .wp-block-button__link:focus-visible {
	background: #000000;
	color: var(--lc-paper);
}

/* ---------- Sections and heads ---------- */

.lc-section {
	padding-block: var(--lc-section-y);
}

.lc-section--tight {
	padding-block: calc(var(--lc-section-y) * .35) var(--lc-section-y);
}

.lc-band {
	background: var(--lc-linen);
}

.lc-section p:not([class*="is-style-"]):not(.lc-big) {
	color: var(--lc-ink-soft);
}

/* Logbook head: a strong rule, the entry number and the title. */
.lc-head {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--lc-gap);
	row-gap: 1.25rem;
	margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
	padding-top: 1.5rem;
	border-top: 2px solid var(--lc-ink);
}

.lc-head > * {
	margin: 0 !important;
}

.lc-head > .lc-head__num {
	grid-column: 1;
	grid-row: 1 / span 2;
	padding-top: .85rem;
	color: var(--lc-ink) !important;
	font-size: 1.375rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.lc-head > h2 {
	grid-column: 2 / -1;
}

.lc-head > p:not(.lc-head__num) {
	grid-column: 2 / span 7;
	max-width: 680px;
	font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
}

.lc-head.is-small > h2 {
	font-size: clamp(2rem, 1.6rem + 1.4vw, 3.25rem);
}

.lc-head.is-small > .lc-head__num {
	padding-top: .55rem;
}

/* Section intro on the product and service pages: same rule, no number. */
.lc-intro,
.lc-stack,
.lc-section-head__title {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.lc-intro > *,
.lc-stack > * {
	margin-block: 0 !important;
}

.lc-intro {
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
	padding-top: 1.5rem;
	border-top: 2px solid var(--lc-ink);
}

/* Section heads span the content width like the logbook heads on the home page; the narrower FAQ
   list starts at the same left edge instead of sitting centred under them. */
.is-layout-constrained > .lc-faq {
	margin-left: max(0px, (100% - var(--wp--style--global--content-size, 1296px)) / 2) !important;
}

.lc-intro > p:not([class*="is-style-"]) {
	max-width: 820px;
	font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
}

.lc-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	align-items: center;
}

.lc-split.is-stage {
	grid-template-columns: minmax(0, 1fr) minmax(0, 636px);
	gap: clamp(2rem, 1rem + 2vw, 3rem);
}

.lc-split > * {
	margin-block: 0 !important;
}

/* Headings in a half-width column stay a size smaller than full-width titles. */
.lc-split h1 {
	font-size: clamp(3rem, 1.9rem + 3.4vw, 5.5rem);
}

.lc-split h2 {
	font-size: clamp(2.25rem, 1.6rem + 2.2vw, 4rem);
	line-height: 1.02;
}

.lc-actions {
	gap: 1rem;
}

.lc-kicker {
	gap: .75rem;
	align-items: center;
}

.lc-kicker > * {
	margin: 0 !important;
}

.lc-kicker img {
	display: block;
	width: 36px;
	height: 36px;
	border-radius: 9px;
}

.lc-kicker p {
	color: var(--lc-ink) !important;
	font-size: 1rem;
	font-weight: 700;
}

@media (max-width: 1200px) {
	.lc-split.is-stage {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 1080px) {
	.lc-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 781px) {
	.lc-head {
		grid-template-columns: minmax(0, 1fr);
		row-gap: .9rem;
	}

	.lc-head > .lc-head__num,
	.lc-head > h2,
	.lc-head > p:not(.lc-head__num) {
		grid-column: 1;
		grid-row: auto;
		padding-top: 0;
	}

	.lc-head > .lc-head__num {
		font-size: 1.0625rem;
	}
}

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

.lc-hero {
	padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem) clamp(3rem, 2rem + 4vw, 6rem);
	border-bottom: 1px solid var(--lc-rule);
}

/* Constrained layout: children span the content width. */
.lc-hero > * {
	width: 100%;
}

.lc-hero > * + * {
	margin-block-start: clamp(1.5rem, 1rem + 1.6vw, 2.5rem) !important;
}

.lc-hero__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--lc-gap);
	row-gap: 2.25rem;
	align-items: center;
}

.lc-hero__grid > * {
	margin: 0 !important;
}

.lc-hero__copy {
	grid-column: span 5;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding-bottom: .5rem;
}

.lc-hero__copy > * {
	margin: 0 !important;
}

.lc-hero__lead {
	color: var(--lc-ink-soft) !important;
	font-size: clamp(1.125rem, 1rem + .45vw, 1.3125rem);
	line-height: 1.55;
}

.lc-hero__stage {
	position: relative;
	grid-column: span 7;
}

.lc-hero__stage > * {
	margin: 0 !important;
}

/* The pause switch sits in the corner of the sheet. */
.lc-hero__stage > .lc-motion-toggle.is-icon {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
}

@media (max-width: 1080px) {
	.lc-hero__copy,
	.lc-hero__stage {
		grid-column: 1 / -1;
	}

	.lc-hero__copy {
		max-width: 680px;
	}
}

.lc-hero--404 .lc-hero__grid {
	align-items: center;
}

/* ---------- Signal sheet (hero animation) ---------- */

.lc-signal-canvas {
	--lc-note-size: 31px;
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 17 / 10;
}

.lc-signal-canvas canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.lc-signal-note {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	color: var(--lc-pencil);
	font-family: var(--lc-hand);
	font-size: var(--lc-note-size);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
}

.lc-signal-note span {
	display: block;
}

.lc-signal-note svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 1em;
	height: 1em;
	overflow: visible;
}

.lc-signal-note path {
	fill: none;
	stroke: var(--lc-pencil);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lc-signal-note.is-noise span {
	transform: rotate(-4deg);
}

.lc-signal-note.is-trend span {
	transform: rotate(3deg);
}

.lc-signal-note.is-mark span {
	transform: rotate(-3deg);
}

@media (max-width: 600px) {
	.lc-signal-canvas {
		aspect-ratio: 7 / 5;
	}
}

/* Editor preview of the animation block. */
.lc-signal-canvas.is-preview {
	display: grid;
	place-items: center;
	pointer-events: auto;
	border: 1px dashed var(--lc-rule-strong);
	border-radius: var(--lc-radius);
}

.lc-signal-canvas__preview {
	display: grid;
	justify-items: center;
	gap: .75rem;
	color: var(--lc-ink-soft);
	font-size: .875rem;
	font-weight: 600;
}

/* ---------- Tiles, sheets and graph paper ---------- */

.is-style-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(1.4rem, 1rem + 1vw, 2.25rem);
	background: var(--lc-sheet);
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
}

.is-style-tile > * {
	margin-block: 0 !important;
}

.lc-chart-tile {
	background: var(--lc-sheet);
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
}

.lc-stretch a {
	color: inherit;
	text-decoration: none;
}

.lc-stretch a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.lc-stretch a:focus-visible {
	outline: none;
}

.lc-entry:has(.lc-stretch a:focus-visible),
.is-style-tile:has(.lc-stretch a:focus-visible) {
	outline: 2px solid var(--lc-ink);
	outline-offset: 4px;
}

.lc-app-icon {
	margin: 0;
}

.lc-app-icon img {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 15px;
}

/* ---------- Project entries ---------- */

.lc-entry-feature {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--lc-gap);
	row-gap: 2rem;
	align-items: center;
}

.lc-entry-feature > * {
	margin: 0 !important;
}

.lc-entry-feature > .lc-phone-panel {
	grid-column: span 6;
}

.lc-entry-feature > .lc-entry__body {
	grid-column: 8 / span 5;
}

.lc-phone-panel {
	position: relative;
	height: 540px;
	overflow: hidden;
	background: var(--lc-linen);
	border-radius: var(--lc-radius);
}

.lc-phone-panel > * {
	margin: 0 !important;
}

.lc-phone-panel > .lc-app-icon {
	position: absolute;
	top: 36px;
	left: 36px;
}

.lc-phone-panel > .is-style-phone {
	position: absolute;
	top: 56px;
	left: calc(50% - 140px);
	width: 280px;
}

.wp-block-image.is-style-phone {
	padding: 10px;
	background: #141412;
	border-radius: 44px;
	box-shadow: 0 1px 0 rgba(26, 25, 21, .08), 0 18px 40px rgba(60, 48, 20, .18);
}

.wp-block-image.is-style-phone img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 35px;
}

.lc-entry__body {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.lc-entry__body > * {
	margin: 0 !important;
}

.lc-entry__body h3 {
	font-size: clamp(2.5rem, 1.9rem + 2vw, 3.75rem);
	letter-spacing: -.04em;
}

.lc-entry__body h3 a {
	color: inherit;
	text-decoration: none;
}

.lc-entry__body > p:not([class*="is-style-"]):not(.lc-meta):not(.lc-more) {
	font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
}

.lc-entries {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--lc-gap);
	margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}

/* The grid gap spaces the entries; the flow layout's block gap would push all but the first down. */
.lc-entries > * {
	margin-block: 0 !important;
}

.lc-entry {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	transition: transform .3s var(--lc-ease);
}

.lc-entry > * {
	margin: 0 !important;
}

.lc-entry:has(.lc-stretch a):hover {
	transform: translateY(-4px);
}

.lc-entry__visual {
	height: 252px;
	margin: 0;
	overflow: hidden;
	background: var(--lc-sheet);
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
}

.lc-entry__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.lc-entry__visual.is-placeholder {
	background: var(--lc-linen);
	border: 0;
}

.lc-entry__visual.is-photo img {
	object-position: center;
}

/* Keep the label of a placeholder image in view. */
.lc-entry__visual.is-placeholder img,
.lc-service-item__visual img[src*="placeholder"],
.lc-photo img[src*="placeholder"],
.lc-portrait img[src*="placeholder"] {
	object-position: left bottom;
}

.lc-entry__panel {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	height: 252px;
	padding: 28px;
	background: var(--lc-linen);
	border-radius: var(--lc-radius);
}

.lc-entry__panel > * {
	margin: 0 !important;
}

.lc-entry__head {
	gap: .75rem;
	padding-top: 1rem;
	border-top: 1px solid var(--lc-ink);
}

.lc-entry__head > * {
	margin: 0 !important;
}

.lc-entry__head h3 {
	font-size: clamp(1.5rem, 1.35rem + .4vw, 1.75rem);
}

.lc-entry > p:not([class*="is-style-"]) {
	font-size: 1.0625rem;
}

@media (max-width: 1080px) {
	.lc-entry-feature > .lc-phone-panel,
	.lc-entry-feature > .lc-entry__body {
		grid-column: 1 / -1;
	}

	.lc-entry-feature > .lc-entry__body {
		max-width: 680px;
	}
}

@media (max-width: 900px) {
	.lc-entries {
		grid-template-columns: minmax(0, 1fr);
		gap: 3rem;
	}

	.lc-entry__visual,
	.lc-entry__panel {
		height: auto;
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 600px) {
	.lc-phone-panel {
		height: 420px;
	}

	.lc-phone-panel > .lc-app-icon {
		top: 20px;
		left: 20px;
	}

	.lc-phone-panel > .lc-app-icon img {
		width: 52px;
		height: 52px;
		border-radius: 12px;
	}

	.lc-phone-panel > .is-style-phone {
		top: 48px;
		left: calc(50% - 115px);
		width: 230px;
		padding: 8px;
		border-radius: 36px;
	}

	.lc-phone-panel > .is-style-phone img {
		border-radius: 29px;
	}

	.lc-entry__panel {
		padding: 22px;
	}
}

/* ---------- Sparkline ---------- */

.lc-sparkline svg {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

.lc-sparkline.is-large svg {
	max-width: 640px;
}

.lc-sparkline.is-small svg {
	max-width: 300px;
}

.lc-sparkline__dots {
	fill: var(--lc-ink);
	opacity: .4;
}

.lc-sparkline__trend {
	fill: none;
	stroke: var(--lc-orange);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-dasharray: 100;
	animation: lc-draw 6s cubic-bezier(.6, 0, .2, 1) infinite;
}

.lc-sparkline.is-small .lc-sparkline__trend {
	stroke-width: 3.5;
}

.lc-sparkline.is-lime .lc-sparkline__trend {
	stroke: var(--lc-ink);
}

/* ---------- Browser deck (pages that slide through) ---------- */

/* Offsets in percent of the card, so the back cards peek out at every size, as in the design. */
.lc-deck {
	--bx: 8.6%;
	--by: -10.4%;
	--mx: 4.3%;
	--my: -5.2%;
	--ex: -19%;
	--ey: 16%;
	position: relative;
	width: 100%;
	aspect-ratio: 465 / 330;
}

.lc-deck.is-wide {
	--bx: 14.6%;
	--by: -7.8%;
	--mx: 7.3%;
	--my: -3.9%;
	--ex: -18.3%;
	--ey: 15%;
	aspect-ratio: 683 / 350;
}

.lc-deck__card {
	position: absolute;
	top: 11%;
	left: 0;
	width: 90%;
	margin: 0;
	overflow: hidden;
	background: var(--lc-sheet);
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
	box-shadow: var(--lc-shadow-paper);
}

.lc-deck.is-wide .lc-deck__card {
	top: 8%;
	left: 6%;
	width: 72%;
}

.lc-deck__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 12px;
	background: var(--lc-paper);
	border-bottom: 1px solid #E3DDCF;
}

.lc-deck__bar i {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	box-sizing: border-box;
	border: 1px solid var(--lc-muted);
	border-radius: 50%;
}

.lc-deck__bar span {
	flex: 1;
	min-width: 0;
	margin-left: 8px;
	overflow: hidden;
	color: var(--lc-muted);
	font-size: 11px;
	line-height: 1;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lc-deck__card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top;
}

/* Resting stack, also the state without motion. */
.lc-deck__card:nth-child(1) {
	z-index: 3;
}

.lc-deck__card:nth-child(2) {
	z-index: 1;
	opacity: .55;
	transform: translate(var(--bx), var(--by)) scale(.88);
}

.lc-deck__card:nth-child(3) {
	z-index: 2;
	opacity: .8;
	transform: translate(var(--mx), var(--my)) scale(.94);
}

.lc-deck.has-3 .lc-deck__card {
	animation: lc-deck 9s cubic-bezier(.6, 0, .2, 1) infinite;
}

.lc-deck.has-3 .lc-deck__card:nth-child(2) {
	animation-delay: -3s;
}

.lc-deck.has-3 .lc-deck__card:nth-child(3) {
	animation-delay: -6s;
}

@media (max-width: 781px) {
	.lc-deck,
	.lc-deck.is-wide {
		--bx: 8.4%;
		--by: -9.9%;
		--mx: 4.2%;
		--my: -5%;
		--ex: -17.5%;
		--ey: 15%;
		aspect-ratio: 350 / 254;
	}

	.lc-deck .lc-deck__card,
	.lc-deck.is-wide .lc-deck__card {
		top: 13%;
		left: 4%;
		width: 83%;
	}

	.lc-deck__bar {
		height: 24px;
	}
}

.lc-block-hint {
	padding: 1rem;
	color: var(--lc-ink-soft);
	font-size: .875rem;
	border: 1px dashed var(--lc-rule-strong);
	border-radius: var(--lc-radius);
}

/* ---------- Phone stage: tilted, floating phone with pencil notes ---------- */

.lc-phone-stage {
	position: relative;
	width: 100%;
	max-width: 636px;
	height: 700px;
	margin-inline: auto;
	perspective: 1400px;
}

.lc-phone-stage__shadow {
	position: absolute;
	top: 646px;
	left: calc(50% - 130px);
	width: 260px;
	height: 30px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(60, 48, 20, .3), rgba(60, 48, 20, 0));
	animation: lc-shadow 8s ease-in-out infinite;
}

.lc-phone {
	position: absolute;
	top: 40px;
	left: calc(50% - 140px);
	width: 280px;
	aspect-ratio: 280 / 582;
	padding: 11px;
	box-sizing: border-box;
	background: #141412;
	border-radius: 46px;
	box-shadow: 0 1px 0 rgba(26, 25, 21, .1), 0 30px 60px rgba(60, 48, 20, .2);
	transform: rotateY(-12deg) rotateX(4deg);
	transform-style: preserve-3d;
	animation: lc-float 8s ease-in-out infinite;
}

.lc-phone-stage.is-front .lc-phone {
	transform: rotateX(6deg);
	animation-name: lc-float-front;
}

.lc-phone__screen {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #0E1116;
	border-radius: 36px;
}

.lc-phone__video,
.lc-phone__poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lc-phone__toggle {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: #F5F2EA;
	background: rgba(20, 20, 18, .6);
	border: 1px solid rgba(245, 242, 234, .3);
	border-radius: 50%;
	cursor: pointer;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.lc-phone__toggle svg {
	fill: currentColor;
}

.lc-phone__toggle .lc-icon-pause,
.lc-phone-stage.is-playing .lc-phone__toggle .lc-icon-play {
	display: none;
}

.lc-phone-stage.is-playing .lc-phone__toggle .lc-icon-pause {
	display: block;
}

.lc-phone-stage__notes {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lc-pin {
	position: absolute;
	width: 160px;
	color: var(--lc-pencil);
	font-family: var(--lc-hand);
	font-size: 29px;
	font-weight: 600;
	line-height: 1.02;
}

.lc-pin--1 {
	top: 150px;
	right: calc(50% + 158px);
	transform: rotate(-3deg);
}

.lc-pin--2 {
	top: 92px;
	left: calc(50% + 168px);
	width: 150px;
	transform: rotate(2deg);
}

.lc-pin--3 {
	top: 478px;
	right: calc(50% + 158px);
	transform: rotate(-2deg);
}

.lc-pin--4 {
	top: 528px;
	left: calc(50% + 168px);
	width: 150px;
	transform: rotate(3deg);
}

.lc-phone-stage__arrows {
	position: absolute;
	top: 0;
	left: calc(50% - 318px);
	width: 636px;
	height: 700px;
	overflow: visible;
	pointer-events: none;
}

.lc-phone-stage__arrows path {
	fill: none;
	stroke: var(--lc-pencil);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lc-phone-stage__arrows.is-small {
	display: none;
}

@media (max-width: 700px) {
	.lc-phone-stage {
		max-width: 350px;
		height: 640px;
		perspective: 1100px;
	}

	.lc-phone-stage__shadow {
		top: 556px;
		left: calc(50% - 100px);
		width: 200px;
		height: 22px;
	}

	.lc-phone {
		top: 70px;
		left: calc(50% - 110px);
		width: 220px;
		padding: 9px;
		border-radius: 36px;
		transform: rotateY(-9deg) rotateX(3deg);
		animation-name: lc-float-small;
	}

	.lc-phone__screen {
		border-radius: 28px;
	}

	.lc-pin {
		width: 170px;
		font-size: 23px;
	}

	.lc-pin--1 {
		top: 0;
		right: auto;
		left: calc(50% - 175px);
	}

	.lc-pin--2 {
		top: 0;
		left: calc(50% + 35px);
		width: 140px;
		text-align: right;
	}

	.lc-pin--3 {
		top: 586px;
		right: auto;
		left: calc(50% - 175px);
	}

	.lc-pin--4 {
		top: 586px;
		left: calc(50% + 35px);
		width: 140px;
		text-align: right;
	}

	.lc-phone-stage__arrows.is-wide {
		display: none;
	}

	.lc-phone-stage__arrows.is-small {
		display: block;
		left: calc(50% - 175px);
		width: 350px;
		height: 640px;
	}
}

/* ---------- Services on the home page ---------- */

.lc-services {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 48px;
	row-gap: clamp(3rem, 2rem + 3vw, 4rem);
}

.lc-services > * {
	margin: 0 !important;
}

.lc-service-lead {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--lc-gap);
	row-gap: 2rem;
	align-items: center;
	padding-top: 1.25rem;
	border-top: 1px solid var(--lc-ink);
}

.lc-service-lead > * {
	margin: 0 !important;
}

.lc-service-lead > .lc-service__text {
	grid-column: span 5;
}

.lc-service-lead > .wp-block-liftcode-browser-deck {
	grid-column: 7 / span 6;
}

.lc-service__text,
.lc-service-item {
	display: flex;
	flex-direction: column;
	gap: .9rem;
}

.lc-service__text > *,
.lc-service-item > * {
	margin: 0 !important;
}

.lc-service-lead h3 {
	font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);
	letter-spacing: -.04em;
}

.lc-service-lead p:not([class*="is-style-"]):not(.lc-ref) {
	font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
}

.lc-service-item h3 {
	font-size: clamp(1.75rem, 1.5rem + .6vw, 2.125rem);
}

.lc-service-item h3,
.lc-service-lead h3 {
	padding-top: 1rem;
	border-top: 1px solid var(--lc-ink);
}

.lc-service-lead h3 {
	padding-top: 0;
	border-top: 0;
}

.lc-service-item h3 a,
.lc-service-lead h3 a {
	color: inherit;
	text-decoration: none;
}

.lc-num {
	margin-right: .6rem;
	color: var(--lc-ink);
	font-size: .9375rem;
	font-weight: 800;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	vertical-align: .35em;
}

.lc-ref {
	color: var(--lc-muted) !important;
	font-size: .875rem;
	font-weight: 600;
}

.lc-service-item__visual {
	position: relative;
	height: 220px;
	margin: 0;
	overflow: hidden;
	background: var(--lc-linen);
	border-radius: var(--lc-radius);
}

.lc-service-item__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.lc-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.lc-pills > p {
	margin: 0 !important;
	padding: 7px 13px;
	color: var(--lc-ink) !important;
	font-size: .9375rem;
	font-weight: 500;
	border: 1.5px solid var(--lc-ink);
	border-radius: var(--lc-radius);
}

.lc-pills > p.is-focus {
	font-weight: 600;
	background: var(--lc-lime);
}

.lc-indent {
	padding-left: calc((100% - 11 * var(--lc-gap)) / 12 + var(--lc-gap));
}

.lc-section > .lc-more {
	margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

@media (max-width: 1080px) {
	.lc-services {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lc-service-lead > .lc-service__text,
	.lc-service-lead > .wp-block-liftcode-browser-deck {
		grid-column: 1 / -1;
	}

	.lc-service-lead > .wp-block-liftcode-browser-deck {
		max-width: 640px;
	}
}

@media (max-width: 781px) {
	.lc-services {
		grid-template-columns: minmax(0, 1fr);
	}

	.lc-indent {
		padding-left: 0;
	}
}

/* Browser frame for screenshots (block style), and the text parts of the shop and search mock-ups. */
.wp-block-image.is-style-browser {
	position: relative;
	overflow: hidden;
	padding-top: 28px;
	background: var(--lc-paper);
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
	box-shadow: var(--lc-shadow-paper);
}

.wp-block-image.is-style-browser::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 12px;
	width: 40px;
	height: 8px;
	background: radial-gradient(circle at 4px 4px, transparent 2.6px, var(--lc-muted) 3px, var(--lc-muted) 3.8px, transparent 4.2px) 0 0 / 14px 8px repeat-x;
}

.wp-block-image.is-style-browser img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top;
	border-top: 1px solid #E3DDCF;
	border-radius: 0;
}

.lc-mock-shop__brand {
	color: var(--lc-muted) !important;
	font-size: .6875rem !important;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.lc-mock-shop__title {
	color: var(--lc-ink) !important;
	font-size: 1.1875rem !important;
	font-weight: 700;
	line-height: 1.25;
}

/* Colour swatches drawn from the text line; the text stays for screen readers. */
.lc-mock-shop__swatches {
	position: relative;
	height: 18px;
	overflow: hidden;
	font-size: 0 !important;
}

.lc-mock-shop__button {
	align-self: flex-start;
	padding: 10px 16px;
	color: var(--lc-ink) !important;
	font-size: .8125rem !important;
	font-weight: 700;
	white-space: nowrap;
	background: var(--lc-lime);
	border-radius: var(--lc-radius);
}

.lc-mock-seo__search {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 18px;
	color: var(--lc-ink) !important;
	font-size: .9375rem !important;
	background: var(--lc-sheet);
	border: 1px solid var(--lc-rule);
	border-radius: 999px;
}

.lc-mock-seo__search::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background: var(--lc-muted);
	-webkit-mask: 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'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: 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'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lc-mock-seo__result {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px;
	background: var(--lc-sheet);
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
}

.lc-mock-seo__result > * {
	margin: 0 !important;
}

.lc-mock-seo__url {
	color: var(--lc-muted) !important;
	font-size: .75rem !important;
}

.lc-mock-seo__title {
	color: var(--lc-ink) !important;
	font-size: 1.1875rem !important;
	font-weight: 700;
	line-height: 1.25;
}

.lc-mock-seo__snippet {
	color: var(--lc-ink-soft) !important;
	font-size: .875rem !important;
	line-height: 1.5;
}

/* ---------- Steps (a training plan on a line) ---------- */

.lc-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--lc-gap);
	padding-top: 56px;
}

.lc-steps::before {
	content: "";
	position: absolute;
	top: 20px;
	right: 0;
	left: 0;
	height: 2px;
	background: var(--lc-ink);
}

.lc-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.lc-step > * {
	margin: 0 !important;
}

.lc-step h3 {
	font-size: clamp(1.5rem, 1.3rem + .5vw, 1.875rem);
}

p.lc-step__num {
	color: var(--lc-muted) !important;
	font-size: .875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

p.lc-step__num::before {
	content: "";
	position: absolute;
	top: -42px;
	left: 0;
	width: 16px;
	height: 16px;
	box-sizing: border-box;
	background: var(--lc-paper);
	border: 2px solid var(--lc-ink);
	border-radius: 50%;
}

.lc-band p.lc-step__num::before {
	background: var(--lc-linen);
}

.lc-step:first-child p.lc-step__num::before {
	background: var(--lc-lime);
}

.lc-steps--orange .lc-step:first-child p.lc-step__num::before {
	background: var(--lc-orange);
}

.lc-steps--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Pencil note on the first step, pointing at its dot. */
.lc-step .is-style-note {
	position: absolute;
	top: -106px;
	left: 96px;
	white-space: nowrap;
}

.lc-step .is-style-note::before {
	content: "";
	position: absolute;
	top: 24px;
	left: -84px;
	width: 84px;
	height: 40px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 40'%3E%3Cg fill='none' stroke='%233D3B35' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M80 4 C 56 2, 30 12, 8 32'/%3E%3Cpath d='M8 32 l 2 -9 M8 32 l 9 -2.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	transform: rotate(2deg);
}

@media (max-width: 900px) {
	.lc-steps,
	.lc-steps--3 {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
		padding-top: 0;
		padding-left: 34px;
	}

	.lc-steps::before {
		top: 6px;
		bottom: 6px;
		left: 7px;
		right: auto;
		width: 2px;
		height: auto;
	}

	p.lc-step__num::before {
		top: 2px;
		left: -34px;
	}

	.lc-step .is-style-note {
		position: static;
		margin-top: .25rem !important;
	}

	.lc-step .is-style-note::before {
		display: none;
	}
}

/* ---------- About ---------- */

.lc-about {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--lc-gap);
	row-gap: 2.5rem;
	align-items: start;
}

.lc-about > * {
	margin: 0 !important;
}

.lc-about__media {
	grid-column: span 5;
	display: flex;
	flex-direction: column;
	gap: .9rem;
}

.lc-about__media > * {
	margin: 0 !important;
}

.lc-about__media .is-style-note {
	margin-left: .5rem !important;
}

.lc-about__text {
	grid-column: 7 / span 6;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--lc-ink);
}

.lc-about__text > * {
	margin: 0 !important;
}

.lc-about__text .is-style-eyebrow {
	color: var(--lc-ink) !important;
	font-weight: 700;
}

.lc-about__text h2 {
	font-size: clamp(2rem, 1.5rem + 2vw, 3.625rem);
	line-height: 1.04;
}

.lc-about__text p:not([class*="is-style-"]) {
	font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
	line-height: 1.7;
}

.lc-portrait {
	margin: 0;
}

.lc-portrait img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--lc-radius);
}

@media (max-width: 1080px) {
	.lc-about__media,
	.lc-about__text {
		grid-column: 1 / -1;
	}

	.lc-about__media {
		max-width: 520px;
	}
}

/* ---------- About: the career as two strands (fitness, code) that meet in LiftCode ---------- */

.lc-cv {
	--lc-cv-year: clamp(1.75rem, 1.35rem + 1.2vw, 2.5rem);
	--lc-cv-gutter: 112px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--lc-cv-gutter) minmax(0, 1fr);
	grid-template-areas:
		"fit . code"
		"merge merge merge";
	margin-block-start: 0 !important;
}

.lc-cv > * {
	margin: 0 !important;
}

.lc-cv__lane {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	padding-bottom: 3.5rem;
}

.lc-cv__lane > * {
	margin: 0 !important;
}

.lc-cv__lane.is-fitness {
	grid-area: fit;
	align-items: flex-end;
	text-align: right;
}

.lc-cv__lane.is-code {
	grid-area: code;
}

/* The strand itself: a 2px ink line in the gutter, drawn top to bottom once in view. */
.lc-cv__lane::before {
	content: "";
	position: absolute;
	top: .55rem;
	bottom: 0;
	width: 2px;
	background: var(--lc-ink);
	transform-origin: top;
	transition: transform 1.3s cubic-bezier(.6, 0, .2, 1) .1s;
}

.lc-cv__lane.is-fitness::before {
	right: calc(var(--lc-cv-gutter) / -4 - 1px);
}

.lc-cv__lane.is-code::before {
	left: calc(var(--lc-cv-gutter) / -4 - 1px);
	transition-delay: .3s;
}

.lc-js .lc-cv__lane:not(.is-inview)::before {
	transform: scaleY(0);
}

p.lc-cv__strand {
	color: var(--lc-ink) !important;
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .14em;
	line-height: 1.2;
	text-transform: uppercase;
}

.lc-cv__lane.is-code p.lc-cv__strand {
	font-family: var(--lc-mono);
	font-weight: 700;
	letter-spacing: .08em;
}

.lc-cv__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .45rem;
	max-width: 470px;
}

.lc-cv__item > * {
	margin: 0 !important;
}

.lc-cv__lane.is-fitness .lc-cv__item {
	align-items: flex-end;
}

/* One dot per entry, sitting on the strand at the height of the year. */
.lc-cv__item::before {
	content: "";
	position: absolute;
	top: calc(var(--lc-cv-year) / 2 - 8px);
	width: 16px;
	height: 16px;
	box-sizing: border-box;
	background: var(--lc-paper);
	border: 2px solid var(--lc-ink);
	border-radius: 50%;
	transition: transform .45s cubic-bezier(.3, 1.6, .5, 1);
}

.lc-cv__lane.is-fitness .lc-cv__item::before {
	right: calc(var(--lc-cv-gutter) / -4 - 8px);
}

.lc-cv__lane.is-code .lc-cv__item::before {
	left: calc(var(--lc-cv-gutter) / -4 - 8px);
}

.lc-js .lc-cv__lane:not(.is-inview) .lc-cv__item::before {
	transform: scale(0);
}

.lc-cv__lane .lc-cv__item:nth-child(2)::before {
	transition-delay: .35s;
}

.lc-cv__lane .lc-cv__item:nth-child(3)::before {
	transition-delay: .8s;
}

.lc-cv__lane .lc-cv__item:nth-child(4)::before {
	transition-delay: 1.25s;
}

p.lc-cv__year {
	color: var(--lc-ink) !important;
	font-size: var(--lc-cv-year);
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.lc-cv__item h3 {
	font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.5rem);
	line-height: 1.2;
}

.lc-cv__item > p:not(.lc-cv__year) {
	color: var(--lc-ink-soft) !important;
	font-size: clamp(1rem, .95rem + .2vw, 1.0625rem);
	line-height: 1.6;
}

/* Where both strands meet: they bend into one line that ends in the lime dot of today's entry. */
.lc-cv__merge {
	grid-area: merge;
	position: relative;
	display: flex;
	justify-content: center;
	padding-top: 88px;
}

.lc-cv__merge > * {
	margin: 0 !important;
}

.lc-cv__merge::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(50% - 29px);
	width: 58px;
	height: 88px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 88'%3E%3Cpath d='M1 0 V20 C1 52 29 44 29 76 V88 M57 0 V20 C57 52 29 44 29 76' fill='none' stroke='%231A1915' stroke-width='2'/%3E%3C/svg%3E") center / 58px 88px no-repeat;
	clip-path: inset(0 0 0 0);
	transition: clip-path .9s cubic-bezier(.6, 0, .2, 1) .5s;
}

.lc-js .lc-cv__merge:not(.is-inview)::before {
	clip-path: inset(0 0 100% 0);
}

p.lc-cv__note {
	position: absolute;
	top: 12px;
	left: calc(50% + 72px);
	white-space: nowrap;
}

p.lc-cv__note::before {
	content: "";
	position: absolute;
	top: 24px;
	left: -84px;
	width: 84px;
	height: 40px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 40'%3E%3Cg fill='none' stroke='%233D3B35' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M80 4 C 56 2, 30 12, 8 32'/%3E%3Cpath d='M8 32 l 2 -9 M8 32 l 9 -2.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	transform: rotate(2deg);
}

.lc-cv__now {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 2rem 3rem;
	width: min(100%, 920px);
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
	background: var(--lc-sheet);
	border: 2px solid var(--lc-ink);
	border-radius: var(--lc-radius);
	box-shadow: var(--lc-shadow-paper);
}

.lc-cv__now > * {
	margin: 0 !important;
}

/* Today's dot: lime, on the top edge of the card, where the joined strand arrives. */
.lc-cv__now::before {
	content: "";
	position: absolute;
	top: -11px;
	left: calc(50% - 10px);
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	background: var(--lc-lime);
	border: 2px solid var(--lc-ink);
	border-radius: 50%;
	box-shadow: 0 0 0 6px rgba(198, 240, 67, .35);
	transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) 1.2s;
}

.lc-js .lc-cv__merge:not(.is-inview) .lc-cv__now::before {
	transform: scale(0);
}

.lc-cv__now .lc-cv__item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	column-gap: 1rem;
	row-gap: .45rem;
	align-content: start;
	max-width: none;
}

/* The LiftCode mark as a tile next to the year: decoration, so it lives in CSS. */
.lc-cv__now .lc-cv__item::before {
	position: static;
	grid-row: 1 / span 2;
	grid-column: 1;
	align-self: center;
	width: 56px;
	height: 56px;
	background: var(--lc-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='30 55 132 80'%3E%3Cg fill='%23C6F043'%3E%3Crect x='30' y='55' width='17' height='80' rx='6'/%3E%3Crect x='145' y='55' width='17' height='80' rx='6'/%3E%3Crect x='47' y='86' width='98' height='18' rx='7'/%3E%3Crect x='66' y='62' width='60' height='12' rx='6'/%3E%3Crect x='66' y='116' width='60' height='12' rx='6'/%3E%3C/g%3E%3C/svg%3E") center / 64% auto no-repeat;
	border: 0;
	border-radius: 13px;
	transform: none;
	transition: none;
}

.lc-cv__now .lc-cv__item > p:not(.lc-cv__year) {
	grid-column: 1 / -1;
	margin-top: .5rem !important;
}

.lc-cv mark.lc-mark {
	animation-delay: 1.4s;
}

.lc-cv__gain {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-left: 3rem;
	border-left: 1px solid var(--lc-rule);
}

.lc-cv__gain > * {
	margin: 0 !important;
}

.lc-cv__gain .is-style-eyebrow {
	color: var(--lc-ink) !important;
	font-weight: 700;
}

.lc-cv__gain .is-style-checks {
	gap: .8rem;
	font-size: clamp(1rem, .95rem + .2vw, 1.0625rem);
}

@media (max-width: 900px) {
	.lc-cv {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"fit"
			"code"
			"merge";
	}

	.lc-cv__lane,
	.lc-cv__lane.is-fitness {
		align-items: flex-start;
		gap: 2rem;
		padding-bottom: 2.5rem;
		padding-left: 44px;
		text-align: left;
	}

	.lc-cv__lane.is-fitness::before,
	.lc-cv__lane.is-code::before {
		right: auto;
		left: 7px;
	}

	/* One continuous line on small screens: the code strand picks up where fitness ends. */
	.lc-cv__lane.is-code::before {
		top: 0;
	}

	.lc-cv__lane.is-fitness .lc-cv__item,
	.lc-cv__lane .lc-cv__item {
		align-items: flex-start;
		max-width: none;
	}

	.lc-cv__lane.is-fitness .lc-cv__item::before,
	.lc-cv__lane.is-code .lc-cv__item::before {
		right: auto;
		left: -44px;
	}

	.lc-cv__merge {
		display: block;
		padding-top: 64px;
	}

	.lc-cv__merge::before {
		left: 7px;
		width: 2px;
		height: 64px;
		background: var(--lc-ink);
	}

	p.lc-cv__note {
		top: 14px;
		left: 44px;
	}

	p.lc-cv__note::before {
		display: none;
	}

	.lc-cv__now {
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
	}

	.lc-cv__now::before {
		left: -2px;
	}

	.lc-cv__gain {
		padding-top: 1.5rem;
		padding-left: 0;
		border-top: 1px solid var(--lc-rule);
		border-left: 0;
	}
}

/* ---------- About page ---------- */

.lc-split.is-portrait {
	grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
}

.lc-portrait-stack {
	display: flex;
	flex-direction: column;
	gap: .9rem;
}

.lc-portrait-stack > * {
	margin: 0 !important;
}

.lc-portrait-stack .is-style-note {
	margin-left: .5rem !important;
}

.lc-split.is-facts {
	grid-template-columns: minmax(0, 1fr) minmax(0, 680px);
	align-items: start;
}

/* Fact sheet: an index card taped to the board, with an ink head, ruled rows, highlighted key facts
   and a stamp. */
.lc-facts {
	--lc-facts-px: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(1.25rem, 1rem + 1vw, 2rem);
	padding: 0 var(--lc-facts-px) 1.5rem;
	background: var(--lc-sheet);
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
	box-shadow: var(--lc-shadow-paper);
}

@media (min-width: 1081px) {
	.lc-facts {
		transform: rotate(-1deg);
	}
}

.lc-facts > * {
	margin: 0 !important;
}

/* Masking tape, shared by the fact sheet and the style tile. */
.lc-facts::before,
.lc-facts::after,
.lc-styletile::before {
	content: "";
	position: absolute;
	top: -13px;
	z-index: 2;
	width: 96px;
	height: 28px;
	background: rgba(250, 247, 238, .8);
	box-shadow: 0 1px 2px rgba(60, 48, 20, .16);
	clip-path: polygon(2% 8%, 98% 0, 96% 30%, 100% 58%, 97% 100%, 3% 94%, 0 64%, 3% 36%);
}

.lc-facts::before {
	left: 22px;
	transform: rotate(-6deg);
}

.lc-facts::after {
	right: 22px;
	transform: rotate(5deg);
}

/* Ink head with the LiftCode mark and a handwritten title. */
.lc-facts__head {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: .85rem;
	margin: 0 calc(var(--lc-facts-px) * -1) .4rem !important;
	padding: 1.05rem var(--lc-facts-px) .95rem;
	background: var(--lc-ink);
	border-radius: 3px 3px 0 0;
}

.lc-facts__head > * {
	margin: 0 !important;
}

.lc-facts__head::before {
	content: "";
	flex: none;
	width: 40px;
	height: 24px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='30 55 132 80'%3E%3Cg fill='%23C6F043'%3E%3Crect x='30' y='55' width='17' height='80' rx='6'/%3E%3Crect x='145' y='55' width='17' height='80' rx='6'/%3E%3Crect x='47' y='86' width='98' height='18' rx='7'/%3E%3Crect x='66' y='62' width='60' height='12' rx='6'/%3E%3Crect x='66' y='116' width='60' height='12' rx='6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

p.lc-facts__title {
	color: var(--lc-paper) !important;
	font-family: var(--lc-hand);
	font-size: clamp(1.75rem, 1.5rem + .6vw, 2.125rem);
	font-weight: 600;
	line-height: 1;
	transform: rotate(-2deg);
}

.lc-facts__row {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding-block: 1rem;
	border-bottom: 1px solid var(--lc-rule);
}

.lc-facts__row > * {
	margin: 0 !important;
}

.lc-facts__row:nth-last-child(-n + 2 of .lc-facts__row) {
	border-bottom: 0;
}

p.lc-facts__label {
	color: var(--lc-muted) !important;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.3;
	text-transform: uppercase;
}

p.lc-facts__value {
	color: var(--lc-ink) !important;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
}

/* The key facts get the highlighter one after another. */
.lc-facts mark.lc-mark {
	animation-delay: .5s;
}

.lc-facts__row:nth-child(4 of .lc-facts__row) mark.lc-mark {
	animation-delay: .9s;
}

.lc-facts__row:nth-child(6 of .lc-facts__row) mark.lc-mark {
	animation-delay: 1.3s;
}

.lc-facts__row:nth-child(9 of .lc-facts__row) mark.lc-mark {
	animation-delay: 1.7s;
}

p.lc-facts__stamp {
	position: absolute;
	right: 26px;
	bottom: -17px;
	z-index: 2;
	transform: rotate(-5deg);
}

.lc-split.is-story {
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	align-items: start;
}

.lc-story {
	margin: 0;
}

/* The motto in a ruled box, with a pencil note underneath. */
.lc-quote {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
	background: var(--lc-sheet);
	border: 2px solid var(--lc-ink);
	border-radius: var(--lc-radius);
}

.lc-quote > * {
	margin: 0 !important;
}

p.lc-quote__text {
	color: var(--lc-ink) !important;
	font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.1;
	text-wrap: balance;
}

p.lc-quote__by {
	color: var(--lc-muted) !important;
	font-size: .9375rem;
	font-weight: 700;
}

.lc-quote .is-style-note {
	margin-top: .5rem !important;
}

/* So arbeite ich: cards on the ink band; the design card is twice as wide and holds a style tile. */
.lc-ink-band .lc-intro {
	border-top-color: var(--lc-paper);
}

.lc-ink-band .lc-intro .is-style-eyebrow {
	color: #CFC9BA !important;
	font-weight: 700;
}

.lc-principles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--lc-gap);
}

.lc-principles > * {
	margin: 0 !important;
}

.lc-principle,
.lc-principle__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .8rem;
}

.lc-principle {
	padding: clamp(1.5rem, 1.1rem + 1vw, 2.25rem);
	background: #24231E;
	border: 1px solid rgba(245, 242, 234, .14);
	border-radius: var(--lc-radius);
}

.lc-principle > *,
.lc-principle__text > * {
	margin: 0 !important;
}

.lc-principle.is-feature {
	grid-column: span 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
	align-items: center;
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.lc-ink-band .lc-principle .is-style-badge {
	color: var(--lc-lime);
}

.lc-principle h3 {
	font-size: clamp(1.3125rem, 1.15rem + .55vw, 1.75rem);
	line-height: 1.15;
}

.lc-principle.is-feature h3 {
	font-size: clamp(1.625rem, 1.3rem + 1vw, 2.375rem);
	line-height: 1.08;
}

.lc-principle > p:not([class*="is-style-"]),
.lc-principle__text > p:not([class*="is-style-"]) {
	max-width: 560px;
	font-size: clamp(1rem, .95rem + .2vw, 1.0625rem);
	line-height: 1.65;
}

/* Style tile: a paper sheet with the type and colours of this site, taped into the design card. */
.lc-styletile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem 1.35rem 1.35rem;
	color: var(--lc-ink);
	background: var(--lc-sheet);
	border-radius: var(--lc-radius);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .38);
	transform: rotate(2deg);
}

.lc-styletile > * {
	margin: 0 !important;
}

.lc-styletile::before {
	left: calc(50% - 48px);
	transform: rotate(-4deg);
}

p.lc-styletile__label {
	color: var(--lc-muted) !important;
	font-family: var(--lc-mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.lc-styletile__type {
	display: flex;
	align-items: flex-end;
	gap: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--lc-rule);
}

.lc-styletile__type > * {
	margin: 0 !important;
}

p.lc-specimen {
	display: flex;
	flex-direction: column;
	color: var(--lc-ink) !important;
	line-height: 1;
}

p.lc-specimen.is-sans {
	font-size: 3.25rem;
	font-weight: 800;
	letter-spacing: -.04em;
}

p.lc-specimen.is-hand {
	color: var(--lc-pencil) !important;
	font-family: var(--lc-hand);
	font-size: 3.5rem;
	font-weight: 600;
}

p.lc-specimen span {
	margin-top: .45rem;
	color: var(--lc-muted);
	font-family: var(--lc-sans);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: 0;
}

.lc-styletile__chips {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .55rem;
}

.lc-styletile__chips > * {
	margin: 0 !important;
}

p.lc-chip {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	color: var(--lc-ink-soft) !important;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.2;
}

p.lc-chip::before {
	content: "";
	display: block;
	aspect-ratio: 1;
	background: var(--lc-chip, var(--lc-paper));
	border: 1px solid rgba(26, 25, 21, .14);
	border-radius: 3px;
	transition: transform .5s cubic-bezier(.3, 1.6, .5, 1);
}

p.lc-chip.is-paper {
	--lc-chip: var(--lc-paper);
}

p.lc-chip.is-ink {
	--lc-chip: var(--lc-ink);
}

p.lc-chip.is-lime {
	--lc-chip: var(--lc-lime);
}

p.lc-chip.is-amber {
	--lc-chip: var(--lc-amber);
}

/* The swatches drop onto the sheet one after another once it is in view. */
.lc-js .lc-styletile:not(.is-inview) p.lc-chip::before {
	transform: scale(.3);
}

.lc-styletile__chips > :nth-child(2)::before {
	transition-delay: .12s;
}

.lc-styletile__chips > :nth-child(3)::before {
	transition-delay: .24s;
}

.lc-styletile__chips > :nth-child(4)::before {
	transition-delay: .36s;
}

@media (max-width: 1080px) {
	.lc-split.is-portrait,
	.lc-split.is-facts,
	.lc-split.is-story {
		grid-template-columns: minmax(0, 1fr);
	}

	.lc-portrait-stack {
		max-width: 460px;
	}

	.lc-principles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.lc-principles {
		grid-template-columns: minmax(0, 1fr);
	}

	.lc-principle.is-feature {
		grid-column: auto;
		grid-template-columns: minmax(0, 1fr);
	}

	.lc-styletile {
		justify-self: center;
		width: min(100%, 320px);
		margin-top: .75rem !important;
	}
}

@media (max-width: 600px) {
	.lc-facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.lc-facts__row:nth-last-child(2 of .lc-facts__row) {
		border-bottom: 1px solid var(--lc-rule);
	}
}

/* ---------- Outlook ---------- */

.lc-outlook {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 48px;
	row-gap: 2.5rem;
}

.lc-outlook__card {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--lc-ink);
}

.lc-outlook__card > * {
	margin: 0 !important;
}

.lc-outlook__card .lc-big {
	font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem);
}

.lc-outlook__card h3 {
	margin-top: .5rem !important;
	font-size: clamp(1.375rem, 1.25rem + .4vw, 1.625rem);
	letter-spacing: -.02em;
}

@media (max-width: 781px) {
	.lc-outlook {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Inquiry ---------- */

.lc-cta {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--lc-gap);
	row-gap: 2rem;
	align-items: end;
	padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
	border-top: 2px solid var(--lc-ink);
}

.lc-cta > * {
	margin: 0 !important;
}

.lc-cta > h2 {
	grid-column: span 9;
	font-size: clamp(2.5rem, 1.4rem + 3.8vw, 5.25rem);
	line-height: .98;
	letter-spacing: -.045em;
}

.lc-cta__side {
	grid-column: span 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.1rem;
	padding-bottom: .6rem;
}

.lc-cta__side > * {
	margin: 0 !important;
}

@media (max-width: 1080px) {
	.lc-cta > h2,
	.lc-cta__side {
		grid-column: 1 / -1;
	}

	.lc-cta__side {
		max-width: 560px;
	}
}

/* Lime box, still available as a block style. */
.is-style-panel-lime {
	padding: clamp(2rem, 1rem + 4vw, 5rem) clamp(1.5rem, 1rem + 4vw, 5rem);
	color: var(--lc-ink);
	background: var(--lc-lime);
	border-radius: var(--lc-radius);
}

.lc-section .is-style-panel-lime p:not([class*="is-style-"]) {
	color: var(--lc-ink);
}

.is-style-panel-lime .wp-block-button__link {
	color: var(--lc-lime);
	background: var(--lc-ink);
}

/* ---------- Footer: a call to talk, three link columns and the big wordmark, on ink ---------- */

.lc-footer {
	padding-top: clamp(3.5rem, 2.5rem + 3vw, 4.5rem);
	color: #D9D4C7;
	font-size: .9375rem;
	background: var(--lc-ink);
	overflow-x: clip;
}

.lc-footer p {
	margin: 0;
	color: #D9D4C7;
}

.lc-footer__top {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--lc-gap);
	row-gap: 2.5rem;
	align-items: start;
}

.lc-footer__top > *,
.lc-footer__cta > *,
.lc-footer__col > * {
	margin: 0 !important;
}

.lc-footer__cta {
	grid-column: span 5;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}

.lc-footer p.lc-footer__claim {
	color: var(--lc-paper);
	font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3rem);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.02;
	text-wrap: balance;
}

.lc-footer__mail a {
	color: var(--lc-paper);
	font-size: clamp(1.25rem, 1.1rem + .4vw, 1.375rem);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--lc-lime);
	text-decoration-thickness: 5px;
	text-underline-offset: 6px;
	transition: text-decoration-color .2s ease;
}

.lc-footer__mail a:hover {
	text-decoration-color: var(--lc-paper);
}

.lc-footer p.lc-footer__stamp {
	margin-top: .4rem !important;
	color: var(--lc-ink);
}

.lc-footer__col {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .9rem;
}

.lc-footer__cta + .lc-footer__col {
	grid-column: 7 / span 2;
}

.lc-footer p.lc-footer__label {
	margin-bottom: .2rem !important;
	color: #A8A293;
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.lc-footer p.lc-footer__soon {
	color: #A8A293;
	font-size: 1rem;
}

.lc-footer-nav {
	font-size: 1rem;
}

.lc-footer-nav .wp-block-navigation__container {
	gap: .9rem;
}

/* Links fill with the highlighter on hover; the text turns to ink for contrast. */
.lc-footer-nav .wp-block-navigation-item__content {
	margin: 0 -4px;
	padding: 1px 4px;
	color: var(--lc-paper);
	text-decoration: none;
	background: linear-gradient(var(--lc-lime), var(--lc-lime)) 0 100% / 0% 100% no-repeat;
	border-radius: 2px;
	transition: background-size .3s cubic-bezier(.6, 0, .2, 1), color .3s ease;
}

.lc-footer-nav .wp-block-navigation-item__content:hover,
.lc-footer-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--lc-ink);
	background-size: 100% 100%;
}

.lc-footer__bar {
	margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem) !important;
	padding-block: 1.4rem 1.75rem;
	gap: 1rem 1.5rem;
	border-top: 1px solid #3A3832;
}

.lc-footer__bar > * {
	margin: 0 !important;
}

.lc-footer p.lc-footer__note {
	font-family: var(--lc-hand);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
	transform: rotate(-2deg);
}

/* The wordmark: one span per letter, a slow weight wave, the highlighter under "Code". */
.lc-wordmark {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 3.5rem) !important;
	color: var(--lc-paper);
	font-size: clamp(3.5rem, 12vw, 10.5rem);
	font-weight: 800;
	letter-spacing: -.05em;
	line-height: .8;
	white-space: nowrap;
	-webkit-user-select: none;
	user-select: none;
	overflow-x: clip;
}

.lc-wordmark__part {
	display: inline-flex;
}

.lc-wordmark__part.is-code {
	position: relative;
	z-index: 0;
}

.lc-wordmark__part.is-code::before {
	content: "";
	position: absolute;
	right: -.03em;
	bottom: .08em;
	left: .02em;
	z-index: -1;
	height: .26em;
	background: var(--lc-lime);
	border-radius: 4px 14px 5px 16px;
	transform-origin: left center;
	transition: transform 1s cubic-bezier(.6, 0, .2, 1) .3s;
}

.lc-js .lc-wordmark:not(.is-inview) .lc-wordmark__part.is-code::before {
	transform: scaleX(0);
}

.lc-wordmark__char {
	display: inline-block;
	animation: lc-wordmark-wave 4.8s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -.48s);
	animation-play-state: paused;
}

.lc-wordmark.is-visible .lc-wordmark__char {
	animation-play-state: running;
}

.lc-wordmark.is-tracking .lc-wordmark__char {
	animation: none;
	transition: font-weight .2s ease-out;
}

@media (max-width: 1080px) {
	.lc-footer__cta {
		grid-column: 1 / -1;
	}

	.lc-footer__col,
	.lc-footer__cta + .lc-footer__col {
		grid-column: span 4;
	}
}

@media (max-width: 600px) {
	.lc-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.25rem;
		row-gap: 2rem;
	}

	.lc-footer__col,
	.lc-footer__cta + .lc-footer__col {
		grid-column: span 1;
	}

	/* The last column (LiftCode) runs across the full width as one wrapping row. */
	.lc-footer__col:last-child {
		grid-column: 1 / -1;
	}

	.lc-footer__col:last-child .lc-footer-nav .wp-block-navigation__container {
		flex-direction: row;
		flex-wrap: wrap;
		gap: .75rem 1.4rem;
	}

	.lc-footer__bar {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- Motion toggle ---------- */

.lc-motion-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	color: #D9D4C7;
	font: 600 .8125rem/1 var(--lc-sans);
	background: transparent;
	border: 1px solid rgba(245, 242, 234, .3);
	border-radius: var(--lc-radius);
	cursor: pointer;
}

.lc-motion-toggle:hover {
	color: var(--lc-paper);
	border-color: var(--lc-paper);
}

.lc-motion-toggle[aria-pressed="true"] {
	color: var(--lc-lime);
	border-color: var(--lc-lime);
}

.lc-motion-toggle svg {
	flex-shrink: 0;
	fill: currentColor;
}

.lc-motion-toggle .lc-icon-play,
.lc-motion-toggle[aria-pressed="true"] .lc-icon-pause {
	display: none;
}

.lc-motion-toggle[aria-pressed="true"] .lc-icon-play {
	display: block;
}

/* Icon version on paper, e.g. in the corner of the hero sheet. */
.lc-motion-toggle.is-icon {
	position: relative;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: var(--lc-ink);
	background: var(--lc-sheet);
	border-color: var(--lc-rule);
}

.lc-motion-toggle.is-icon:hover,
.lc-motion-toggle.is-icon[aria-pressed="true"] {
	color: var(--lc-ink);
	border-color: var(--lc-ink);
}

.lc-motion-toggle.is-icon[aria-pressed="true"] {
	background: var(--lc-lime);
}

.lc-motion-toggle.is-icon .lc-motion-toggle__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Text pages (legal, support) ---------- */

.lc-page {
	padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}

.lc-page__title {
	margin-bottom: 2rem;
}

.lc-page p,
.lc-page li {
	color: var(--lc-ink-soft);
}

.lc-page h2 {
	margin-top: 2.5rem;
	font-size: var(--wp--preset--font-size--x-large);
}

.lc-page h3 {
	margin-top: 1.75rem;
	font-size: var(--wp--preset--font-size--large);
}

/* ---------- Product and service pages ---------- */

.lc-page-hero {
	padding-block: clamp(3rem, 2rem + 5vw, 6rem) var(--lc-section-y);
}

.lc-product-hero {
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	border-bottom: 1px solid var(--lc-rule);
}

.lc-split.is-media {
	grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
}

.lc-split.is-service {
	grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
}

.lc-split.is-contact {
	grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
	align-items: start;
}

@media (min-width: 1081px) {
	.lc-split.is-reverse > :first-child {
		order: 2;
	}
}

.lc-photo {
	margin: 0;
}

.lc-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--lc-radius);
}

.lc-chart-tile {
	gap: 1.25rem;
	padding: clamp(1.4rem, 1rem + 1vw, 2.25rem);
}

.lc-legend {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin: 0;
	color: var(--lc-ink-soft) !important;
	font-size: .875rem !important;
	font-weight: 600;
}

.lc-legend span {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
}

.lc-legend__dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(26, 25, 21, .45);
}

.lc-legend__line::before {
	content: "";
	width: 22px;
	height: 3px;
	border-radius: 2px;
	background: var(--lc-orange);
}

.lc-features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.lc-feature::before {
	content: "";
	display: block;
	width: 26px;
	height: 26px;
	background: var(--lc-amber);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.lc-feature h3 {
	font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem);
	letter-spacing: -.02em;
}

.lc-feature--trend::before {
	-webkit-mask-image: 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='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M14 7h7v7'/%3E%3C/svg%3E");
	mask-image: 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='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M14 7h7v7'/%3E%3C/svg%3E");
}

.lc-feature--kalorien::before {
	-webkit-mask-image: 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%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3C/svg%3E");
	mask-image: 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%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3C/svg%3E");
}

.lc-feature--koerper::before {
	-webkit-mask-image: 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%3Ccircle cx='12' cy='5' r='2.5'/%3E%3Cpath d='M12 8v7M8 22l4-7 4 7M6 11h12'/%3E%3C/svg%3E");
	mask-image: 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%3Ccircle cx='12' cy='5' r='2.5'/%3E%3Cpath d='M12 8v7M8 22l4-7 4 7M6 11h12'/%3E%3C/svg%3E");
}

.lc-feature--rekomp::before {
	-webkit-mask-image: 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='M7 20V8M3 12l4-4 4 4M17 4v12M13 12l4 4 4-4'/%3E%3C/svg%3E");
	mask-image: 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='M7 20V8M3 12l4-4 4 4M17 4v12M13 12l4 4 4-4'/%3E%3C/svg%3E");
}

.lc-feature--coach::before {
	-webkit-mask-image: 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='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M8 10h8M8 13h5'/%3E%3C/svg%3E");
	mask-image: 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='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M8 10h8M8 13h5'/%3E%3C/svg%3E");
}

.lc-feature--zyklus::before {
	-webkit-mask-image: 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 12a8 8 0 1 1-3-6.2'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E");
	mask-image: 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 12a8 8 0 1 1-3-6.2'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E");
}

.lc-also {
	max-width: 900px;
	margin-top: 2rem !important;
}

.lc-also strong {
	color: var(--lc-ink);
	font-weight: 700;
}

.lc-gallery {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(200px, 250px);
	gap: var(--lc-gap);
	overflow-x: auto;
	padding-bottom: 14px;
	scroll-snap-type: x mandatory;
	scrollbar-color: var(--lc-rule-strong) transparent;
}

.lc-gallery > * {
	margin: 0 !important;
}

.lc-shot {
	scroll-snap-align: start;
}

.lc-shot img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--lc-rule);
	border-radius: 24px;
}

.lc-shot figcaption {
	margin-top: .85rem;
	color: var(--lc-ink-soft);
	font-size: .9375rem;
	line-height: 1.45;
}

.lc-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.lc-price__amount {
	color: var(--lc-ink) !important;
	font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem) !important;
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.1;
}

.lc-price__amount span {
	display: block;
	margin-top: .35rem;
	color: var(--lc-ink-soft);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0;
}

.lc-price.is-premium {
	border: 2px solid var(--lc-amber);
}

.lc-section > .lc-fineprint {
	margin-top: 1.5rem;
}

.lc-faq {
	max-width: 900px;
}

.lc-faq > * {
	margin: 0 !important;
}

.lc-faq details {
	padding-block: 1.15rem;
	border-bottom: 1px solid var(--lc-rule);
}

.lc-faq details:first-child {
	border-top: 1px solid var(--lc-ink);
}

.lc-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	color: var(--lc-ink);
	font-size: 1.1875rem;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.lc-faq summary::-webkit-details-marker {
	display: none;
}

.lc-faq summary::after {
	content: "+";
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 28px;
	height: 28px;
	color: var(--lc-ink);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	background: var(--lc-lime);
	border-radius: var(--lc-radius);
}

.lc-faq details[open] summary::after {
	content: "−";
}

.lc-faq details p {
	max-width: 760px;
	margin: .75rem 0 0;
}

.lc-download {
	align-items: center;
	gap: 1rem;
	max-width: 760px;
	margin-inline: auto;
	padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
	text-align: center;
	background: var(--lc-sheet);
}

.lc-download__icon {
	margin: 0;
}

.lc-download__icon img {
	display: block;
	width: 88px;
	height: 88px;
	border-radius: 20px;
}

.lc-download__links a {
	color: var(--lc-ink-soft);
}

.lc-form-tile {
	gap: 1.25rem;
}

.lc-form-slot {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 1.5rem;
	border: 1.5px dashed var(--lc-rule-strong);
	border-radius: var(--lc-radius);
}

.lc-form-slot > * {
	margin: 0 !important;
}

/* WPForms on the contact page, on paper. */
.lc-form-tile .wpforms-container {
	margin: 0 !important;
}

.lc-form-tile .wpforms-field-label,
.lc-form-tile .wpforms-field-sublabel {
	color: var(--lc-ink) !important;
	font-weight: 700 !important;
}

.lc-form-tile .wpforms-field input,
.lc-form-tile .wpforms-field select,
.lc-form-tile .wpforms-field textarea {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	padding: .8rem 1rem !important;
	color: var(--lc-ink) !important;
	font-family: inherit !important;
	font-size: 1.0625rem !important;
	line-height: 1.45 !important;
	background-color: var(--lc-paper) !important;
	border: 1.5px solid var(--lc-rule-strong) !important;
	border-radius: var(--lc-radius) !important;
}

/* WPForms draws selects without the native arrow; the theme adds its own in ink. */
.lc-form-tile .wpforms-field select {
	padding-right: 2.75rem !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231A1915' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 1rem center !important;
	background-size: 12px 8px !important;
	cursor: pointer;
}

.lc-form-tile .wpforms-field textarea {
	min-height: 10rem !important;
}

.lc-form-tile .wpforms-field input:focus,
.lc-form-tile .wpforms-field select:focus,
.lc-form-tile .wpforms-field textarea:focus {
	border-color: var(--lc-ink) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(198, 240, 67, .6) !important;
}

.lc-form-tile .wpforms-submit {
	height: auto !important;
	padding: 1rem 1.6rem !important;
	color: var(--lc-ink) !important;
	font: 700 1.0625rem/1.2 var(--lc-sans) !important;
	background: var(--lc-lime) !important;
	border: 0 !important;
	border-radius: var(--lc-radius) !important;
}

.lc-form-tile .wpforms-confirmation-container-full {
	color: var(--lc-ink) !important;
	background: var(--lc-lime) !important;
	border: 0 !important;
	border-radius: var(--lc-radius) !important;
}

@media (max-width: 1080px) {
	.lc-split.is-media,
	.lc-split.is-service,
	.lc-split.is-contact {
		grid-template-columns: minmax(0, 1fr);
	}

	.lc-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.lc-duo {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.lc-features {
		grid-template-columns: minmax(0, 1fr);
	}

	.lc-faq summary {
		font-size: 1.0625rem;
	}
}

/* ---------- Typing code ---------- */

.wp-block-code.is-style-typing {
	margin: 0;
	padding: 1rem 1.15rem;
	overflow: hidden;
	white-space: nowrap;
}

.wp-block-code.is-style-typing code {
	display: inline-block;
	width: calc(var(--lc-chars, 26) * 1ch);
	overflow: hidden;
	vertical-align: bottom;
	white-space: nowrap;
	animation: lc-type 6s steps(var(--lc-chars, 26)) infinite;
}

.wp-block-code.is-style-typing::after {
	content: "";
	display: inline-block;
	width: .55em;
	height: 1.1em;
	margin-left: 2px;
	vertical-align: middle;
	background: var(--lc-ink);
	animation: lc-caret 1s steps(1) infinite;
}

/* ---------- Coaching on ink ---------- */

.lc-entry__panel.is-ink {
	color: var(--lc-paper);
	background: var(--lc-ink);
}

.lc-entry__panel.is-ink .is-style-badge {
	color: var(--lc-lime);
}

.lc-entry__panel.is-ink .lc-big {
	color: var(--lc-paper) !important;
}

/* ---------- Code bench: the formula types itself, the trend draws itself ---------- */

.lc-code-bench {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(1.5rem, 1rem + 3vw, 4rem);
	align-items: center;
	margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
	padding: clamp(1.5rem, 1rem + 2.5vw, 3.25rem);
	color: var(--lc-paper);
	background: var(--lc-ink);
	border-radius: var(--lc-radius);
}

.lc-code-bench > *,
.lc-code-bench__text > * {
	margin: 0 !important;
}

.lc-code-bench__text {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

p.lc-code-bench__label {
	color: var(--lc-lime) !important;
	font-size: .9375rem;
	font-weight: 700;
}

.lc-code-bench .wp-block-code {
	padding: .9rem 1.1rem;
	color: var(--lc-lime);
	font-size: clamp(1rem, .9rem + .4vw, 1.25rem);
	background: #2A2924;
	border-radius: var(--lc-radius);
}

.lc-code-bench .wp-block-code.is-style-typing::after {
	background: var(--lc-paper);
}

.lc-code-bench p:not([class*="is-style-"]):not(.lc-code-bench__label):not(.lc-more) {
	color: #D9D4C7 !important;
	font-size: 1.0625rem;
}

.lc-code-bench .lc-more a {
	color: var(--lc-paper);
}

.lc-code-bench .lc-sparkline svg {
	max-width: none;
}

.lc-code-bench .lc-sparkline__dots {
	fill: var(--lc-paper);
	opacity: .35;
}

/* Beats the ink stroke of the lime variant on paper: on the dark bench the line is lime. */
.lc-code-bench .lc-sparkline.is-lime .lc-sparkline__trend {
	stroke: var(--lc-lime);
}

@media (max-width: 900px) {
	.lc-code-bench {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.lc-code-bench {
		padding: 22px 18px;
	}

	.lc-code-bench .wp-block-code {
		padding: .75rem .8rem;
		font-size: .875rem;
	}
}

/* ---------- Service mock-ups ---------- */

/* Shop card: the bottle changes colour, the selection ring follows, the cart button ticks.
   The drawn bottle stands in until the real product photo arrives. */
.lc-service-item__visual.is-shop {
	overflow: visible;
	background: none;
}

.lc-shopcard {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	box-sizing: border-box;
	height: 100%;
	padding: 18px;
	background: var(--lc-sheet);
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
	box-shadow: var(--lc-shadow-paper);
}

.lc-shopcard > *,
.lc-shopcard__info > * {
	margin: 0 !important;
}

.lc-shopcard__photo {
	position: relative;
	align-self: stretch;
	min-height: 150px;
	overflow: hidden;
	background: var(--lc-linen);
	border-radius: var(--lc-radius);
}

.lc-shopcard__photo::before {
	content: "";
	position: absolute;
	top: 14%;
	left: 39%;
	width: 22%;
	height: 10%;
	background: var(--lc-ink);
	border-radius: 4px 4px 2px 2px;
}

.lc-shopcard__photo::after {
	content: "";
	position: absolute;
	top: 24%;
	left: 30%;
	width: 40%;
	height: 64%;
	box-sizing: border-box;
	background-color: var(--lc-ink);
	background-image: linear-gradient(var(--lc-sheet), var(--lc-sheet));
	background-position: center 55%;
	background-repeat: no-repeat;
	background-size: 66% 28%;
	border: 2px solid var(--lc-ink);
	border-radius: 22% / 12%;
	animation: lc-bottle 9s ease-in-out infinite;
}

/* Turntable video or photo from the media library fills the picture area. */
.lc-shopcard__photo.has-media::before,
.lc-shopcard__photo.has-media::after {
	content: none;
}

.lc-product__video,
.lc-product__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lc-shopcard__photo.has-media + .lc-shopcard__info .lc-mock-shop__swatches::after {
	animation: none;
}

/* Loop video (liftcode/loop-video): the clip covers the still photo, which only shows with less motion. */
.lc-loop {
	position: relative;
	margin: 0;
	overflow: hidden;
}

.lc-loop .lc-loop__still,
.lc-loop .lc-loop__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.lc-loop.has-video .lc-loop__still {
	display: none;
}

/* Editor preview: the block wrapper is a div with the size, the rendered figure fills it. */
div.wp-block-liftcode-loop-video > div,
div.wp-block-liftcode-loop-video .lc-loop {
	height: 100%;
}

.lc-shopcard__info {
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-width: 0;
}

.lc-shopcard .lc-mock-shop__title {
	font-size: 1rem !important;
}

.lc-shopcard .lc-mock-shop__swatches {
	width: 44px;
	height: 18px;
	overflow: visible;
	background:
		radial-gradient(circle at 9px 9px, #FCFBF7 4.6px, #1A1915 5.2px, #1A1915 5.6px, transparent 6px),
		radial-gradient(circle at 35px 9px, #1A1915 5.5px, transparent 6px);
	background-repeat: no-repeat;
}

.lc-shopcard .lc-mock-shop__swatches::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	border: 2px solid var(--lc-ink);
	border-radius: 50%;
	animation: lc-swatch 9s ease-in-out infinite;
}

.lc-shopcard .lc-mock-shop__button {
	position: relative;
	padding: 9px 14px;
	font-size: .8125rem !important;
	animation: lc-cart 9s ease-in-out infinite;
}

.lc-shopcard.is-large {
	gap: 28px;
	min-height: 360px;
	padding: 28px;
}

.lc-shopcard.is-large .lc-shopcard__photo {
	min-height: 300px;
}

.lc-shopcard.is-large .lc-mock-shop__title {
	font-size: 1.375rem !important;
}

/* App: the phone floats, tilted, and the app icon bobs next to it. */
.lc-service-item__visual.is-app {
	perspective: 900px;
}

.lc-service-item__visual.is-app > * {
	margin: 0 !important;
}

.lc-service-item__visual.is-app .is-style-phone {
	position: absolute;
	top: 26px;
	left: calc(50% - 60px);
	width: 140px;
	padding: 6px;
	border-radius: 26px;
	transform: rotateY(-12deg) rotateX(4deg);
	animation: lc-float-small 8s ease-in-out infinite;
}

.lc-service-item__visual.is-app .is-style-phone img {
	border-radius: 20px;
}

.lc-service-item__visual.is-app .lc-app-icon,
.lc-service-visual.is-app .lc-app-icon {
	position: absolute;
	z-index: 2;
	animation: lc-bob 5s ease-in-out infinite;
}

.lc-service-item__visual.is-app .lc-app-icon {
	top: 28px;
	left: 24px;
}

.lc-service-item__visual.is-app .lc-app-icon img {
	width: 58px;
	height: 58px;
	border-radius: 14px;
	box-shadow: 0 12px 26px rgba(60, 48, 20, .22);
}

/* Content & SEO: the search types itself, the result slides in, the marker finds the title. */
.lc-seo {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	background: var(--lc-sheet);
	border: 1px solid var(--lc-rule);
	border-radius: var(--lc-radius);
}

.lc-seo > * {
	margin: 0 !important;
}

.lc-seo .lc-mock-seo__search {
	height: 40px;
	padding: 0 14px;
	font-size: .875rem !important;
}

.lc-seo .lc-mock-seo__search::after {
	content: "";
	flex-shrink: 0;
	width: 2px;
	height: 1.1em;
	margin-left: -8px;
	background: var(--lc-ink);
	animation: lc-caret 1s steps(1) infinite;
}

.lc-seo .lc-type {
	display: inline-block;
	width: 24ch;
	overflow: hidden;
	vertical-align: bottom;
	white-space: nowrap;
	animation: lc-type-seo 9s steps(24) infinite;
}

.lc-seo .lc-mock-seo__result {
	padding: 12px 14px;
	animation: lc-seo-result 9s ease-in-out infinite;
}

.lc-seo .lc-mock-seo__title {
	width: fit-content;
	font-size: 1rem !important;
	background-image: linear-gradient(var(--lc-lime), var(--lc-lime));
	background-position: 0 88%;
	background-repeat: no-repeat;
	background-size: 100% .38em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	animation: lc-seo-mark 9s ease-in-out infinite;
}

.lc-seo.is-large {
	gap: 16px;
	padding: 32px;
	box-shadow: var(--lc-shadow-paper);
}

.lc-seo.is-large .lc-mock-seo__search {
	height: 52px;
	font-size: 1.0625rem !important;
}

.lc-seo.is-large .lc-mock-seo__title {
	font-size: 1.375rem !important;
}

/* Visual column on the service page: no box around the mock-up. */
.lc-service-visual {
	position: relative;
}

.lc-service-visual > * {
	margin: 0 !important;
}

.lc-service-visual.is-app .lc-app-icon {
	top: 64px;
	left: 4%;
}

.lc-service-visual.is-app .lc-app-icon img {
	width: 84px;
	height: 84px;
	border-radius: 20px;
	box-shadow: 0 14px 30px rgba(60, 48, 20, .22);
}

/* Pinned to the lower right corner of the card, clear of the turntable video on the left. */
.lc-detail-photo {
	position: absolute;
	right: -24px;
	bottom: -116px;
	z-index: 2;
	width: 26%;
	max-width: 150px;
	margin: 0 !important;
	padding: 8px 8px 6px;
	background: var(--lc-sheet);
	border-radius: var(--lc-radius);
	box-shadow: var(--lc-shadow-paper);
	transform: rotate(4deg);
}

.lc-detail-photo::before {
	content: "";
	position: absolute;
	top: -12px;
	left: calc(50% - 38px);
	z-index: 1;
	width: 76px;
	height: 24px;
	background: rgba(250, 247, 238, .8);
	box-shadow: 0 1px 2px rgba(60, 48, 20, .16);
	clip-path: polygon(2% 8%, 98% 0, 96% 30%, 100% 58%, 97% 100%, 3% 94%, 0 64%, 3% 36%);
	transform: rotate(3deg);
}

.lc-detail-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 2px;
}

.lc-detail-photo figcaption {
	margin: 6px 0 0;
	color: var(--lc-pencil);
	font-family: var(--lc-hand);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
}

/* Single column with the page stack: the stack is the last thing in the section, so the photo hangs
   only a little below it and stays inside the section. */
@media (min-width: 782px) and (max-width: 1080px) {
	.lc-service-visual.is-shop .lc-detail-photo {
		right: -12px;
		bottom: -40px;
	}
}

@media (max-width: 781px) {
	/* On phones it joins the flow below the card, right-aligned, so it covers nothing. */
	.lc-detail-photo {
		position: relative;
		right: auto;
		bottom: auto;
		width: 44%;
		margin: -22px 10px 0 auto !important;
	}
}

.lc-service-visual .lc-phone-stage {
	height: 660px;
}

/* ---------- Steps: the walking marker and the lit step ---------- */

.lc-steps__marker {
	position: absolute;
	top: 12px;
	left: 0;
	z-index: 2;
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	background: var(--lc-lime);
	border: 2px solid var(--lc-ink);
	border-radius: 50%;
	box-shadow: 0 0 0 6px rgba(198, 240, 67, .35);
	transform: translateX(var(--lc-step-x, 0px));
	transition: transform .9s cubic-bezier(.6, 0, .2, 1);
	pointer-events: none;
}

.lc-steps--orange .lc-steps__marker {
	background: var(--lc-orange);
	box-shadow: 0 0 0 6px rgba(255, 149, 0, .25);
}

.lc-steps.is-live .lc-step:first-child p.lc-step__num::before {
	background: var(--lc-paper);
}

.lc-band .lc-steps.is-live .lc-step:first-child p.lc-step__num::before {
	background: var(--lc-linen);
}

.lc-step {
	isolation: isolate;
}

.lc-step::after {
	content: "";
	position: absolute;
	inset: -16px -14px -20px;
	z-index: -1;
	background: rgba(198, 240, 67, .2);
	border-radius: var(--lc-radius);
	opacity: 0;
	transition: opacity .6s ease;
}

.lc-steps--orange .lc-step::after {
	background: rgba(255, 149, 0, .12);
}

.lc-steps.is-live .lc-step.is-active::after {
	opacity: 1;
}

@media (max-width: 900px) {
	.lc-steps__marker {
		top: 1px;
		transform: translateY(var(--lc-step-y, 0px));
	}

	.lc-step::after {
		inset: -10px -12px -12px -16px;
	}
}

/* ---------- Ink band and roadmap (outlook) ---------- */

.lc-ink-band {
	color: var(--lc-paper);
	background: var(--lc-ink);
}

.lc-ink-band .lc-head {
	border-top-color: var(--lc-paper);
}

.lc-ink-band .lc-head > .lc-head__num,
.lc-ink-band h2,
.lc-ink-band h3 {
	color: var(--lc-paper) !important;
}

.lc-ink-band p:not([class*="is-style-"]):not(.lc-big):not(.lc-styletile *) {
	color: #CFC9BA !important;
}

.lc-ink-band .lc-big {
	color: var(--lc-lime) !important;
}

.lc-roadmap {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 11fr);
	column-gap: var(--lc-gap);
	padding-top: 44px;
}

.lc-roadmap > * {
	margin: 0 !important;
}

.lc-roadmap::before {
	content: "";
	position: absolute;
	top: 16px;
	right: 0;
	left: 0;
	height: 2px;
	background: repeating-linear-gradient(90deg, rgba(245, 242, 234, .55) 0 10px, transparent 10px 18px);
	transform-origin: left center;
	transition: transform 1.6s cubic-bezier(.6, 0, .2, 1) .2s;
}

.lc-js .lc-roadmap:not(.is-inview)::before {
	transform: scaleX(0);
}

p.lc-roadmap__now {
	position: relative;
	color: var(--lc-lime) !important;
	font-family: var(--lc-hand);
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1;
}

p.lc-roadmap__now::before {
	content: "";
	position: absolute;
	top: -37px;
	left: 0;
	width: 18px;
	height: 18px;
	background: var(--lc-lime);
	border-radius: 50%;
	box-shadow: 0 0 0 6px rgba(198, 240, 67, .25);
}

.lc-roadmap .lc-outlook__card {
	position: relative;
	padding-top: 0;
	border-top: 0;
}

.lc-roadmap .lc-outlook__card::before {
	content: "";
	position: absolute;
	top: -37px;
	left: 0;
	width: 16px;
	height: 16px;
	box-sizing: border-box;
	background: var(--lc-ink);
	border: 2px solid var(--lc-paper);
	border-radius: 50%;
}

.lc-outlook__visual {
	position: relative;
	height: 170px;
	margin: 0 0 .75rem !important;
	overflow: hidden;
	background: #2A2924;
	border-radius: var(--lc-radius);
}

.lc-outlook__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

/* The derfitness.guru banner keeps its claim readable on narrow cards. */
.lc-outlook__visual:not(.is-app) {
	background: #0C0C0C;
}

.lc-outlook__visual:not(.is-app) img {
	object-fit: contain;
}

.lc-outlook__visual.is-app > * {
	margin: 0 !important;
}

.lc-outlook__visual.is-app .is-style-phone {
	position: absolute;
	top: 22px;
	left: 46%;
	width: 120px;
	padding: 6px;
	border-radius: 22px;
	box-shadow: 0 0 0 1px #3A3934;
}

.lc-outlook__visual.is-app .is-style-phone img {
	height: auto;
	border-radius: 17px;
	object-fit: initial;
}

.lc-outlook__visual.is-app .lc-app-icon {
	position: absolute;
	top: 40px;
	left: 24%;
}

.lc-outlook__visual.is-app .lc-app-icon img {
	width: 64px;
	height: 64px;
	border-radius: 15px;
}

@media (max-width: 781px) {
	.lc-roadmap {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2rem;
		padding-top: 0;
	}

	.lc-roadmap::before,
	p.lc-roadmap__now::before,
	.lc-roadmap .lc-outlook__card::before {
		display: none;
	}
}

/* ---------- Switchers: screenshot carousel and beginner/pro switch ---------- */

.lc-gallery.is-carousel.is-ready {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-flow: row;
	overflow: visible;
	padding: 0;
	scroll-snap-type: none;
}

.lc-gallery.is-carousel.is-ready > .lc-shot,
.lc-duo.is-switch.is-ready > .lc-slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease, visibility 0s linear .6s;
}

.lc-gallery.is-carousel.is-ready > .lc-shot.is-active,
.lc-duo.is-switch.is-ready > .lc-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .6s ease;
}

.lc-gallery.is-carousel.is-ready > .lc-shot {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	column-gap: clamp(2rem, 1rem + 5vw, 6rem);
	align-items: center;
}

.lc-gallery.is-carousel.is-ready .lc-shot img {
	box-sizing: border-box;
	width: 100%;
	padding: 10px;
	background: #141412;
	border: 0;
	border-radius: 44px;
	box-shadow: var(--lc-shadow-paper);
}

.lc-gallery.is-carousel.is-ready .lc-shot figcaption {
	margin: 0;
	color: var(--lc-ink);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.06;
	text-wrap: balance;
}

.lc-switch-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 1.75rem;
	padding-left: calc(300px + clamp(2rem, 1rem + 5vw, 6rem));
}

.lc-switch-arrow {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	color: var(--lc-ink);
	background: transparent;
	border: 1.5px solid var(--lc-ink);
	border-radius: var(--lc-radius);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.lc-switch-arrow:hover {
	color: var(--lc-paper);
	background: var(--lc-ink);
}

.lc-switch-count {
	min-width: 4.5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.lc-switch-dots {
	display: flex;
	gap: 2px;
	margin-left: 8px;
}

.lc-switch-dot {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.lc-switch-dot::before {
	content: "";
	width: 10px;
	height: 10px;
	box-sizing: border-box;
	border: 1.5px solid var(--lc-ink);
	border-radius: 50%;
}

.lc-switch-dot[aria-current="true"]::before {
	background: var(--lc-lime);
}

.lc-switch-tabs {
	display: inline-flex;
	margin-bottom: 2.25rem;
	overflow: hidden;
	border: 1.5px solid var(--lc-ink);
	border-radius: var(--lc-radius);
}

.lc-switch-tab {
	min-height: 48px;
	padding: .75rem 1.5rem;
	color: var(--lc-ink);
	font: 700 1rem/1.2 var(--lc-sans);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.lc-switch-tab + .lc-switch-tab {
	border-left: 1.5px solid var(--lc-ink);
}

.lc-switch-tab[aria-pressed="true"] {
	background: var(--lc-lime);
}

.lc-duo.is-switch.is-ready {
	grid-template-columns: minmax(0, 1fr);
}

.lc-slide {
	display: grid;
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	column-gap: clamp(2rem, 1rem + 5vw, 6rem);
	align-items: center;
}

.lc-slide > *,
.lc-slide__text > * {
	margin: 0 !important;
}

.lc-slide__text {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 640px;
}

.lc-slide__text p:not([class*="is-style-"]) {
	font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
	line-height: 1.6;
}

.lc-duo.is-switch:not(.is-ready) > .lc-slide {
	grid-template-columns: minmax(0, 1fr);
	row-gap: 1.5rem;
}

@media (max-width: 781px) {
	.lc-gallery.is-carousel.is-ready > .lc-shot,
	.lc-slide {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 1.5rem;
		justify-items: center;
		text-align: center;
	}

	.lc-gallery.is-carousel.is-ready .lc-shot img,
	.lc-slide .is-style-phone {
		max-width: 240px;
	}

	.lc-switch-bar {
		justify-content: center;
		padding-left: 0;
	}

	.lc-slide__text {
		align-items: center;
	}
}

/* ---------- Keyframes ---------- */

@keyframes lc-wordmark-wave {
	0%, 100% { font-weight: 520; }
	50% { font-weight: 840; }
}

@keyframes lc-mark {
	from { background-size: 0% .38em; }
	to { background-size: 100% .38em; }
}

@keyframes lc-draw {
	0% { stroke-dashoffset: 100; }
	40%, 80% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: -100; }
}

@keyframes lc-type {
	0% { width: 0; }
	55%, 100% { width: calc(var(--lc-chars, 26) * 1ch); }
}

@keyframes lc-caret {
	50% { opacity: 0; }
}

@keyframes lc-float {
	0%, 100% { transform: rotateY(-16deg) rotateX(6deg) translateY(0); }
	50% { transform: rotateY(-8deg) rotateX(3deg) translateY(-16px); }
}

@keyframes lc-float-small {
	0%, 100% { transform: rotateY(-12deg) rotateX(5deg) translateY(0); }
	50% { transform: rotateY(-6deg) rotateX(2deg) translateY(-10px); }
}

@keyframes lc-float-front {
	0%, 100% { transform: rotateX(9deg) translateY(0); }
	50% { transform: rotateX(3deg) translateY(-18px); }
}

@keyframes lc-shadow {
	0%, 100% { transform: scaleX(1); opacity: 1; }
	50% { transform: scaleX(.84); opacity: .6; }
}

@keyframes lc-bob {
	50% { transform: translateY(-8px); }
}

@keyframes lc-bottle {
	0%, 45% { background-color: #FCFBF7; }
	50%, 95% { background-color: #1A1915; }
	100% { background-color: #FCFBF7; }
}

@keyframes lc-swatch {
	0%, 45% { transform: translateX(0); }
	50%, 95% { transform: translateX(26px); }
	100% { transform: translateX(0); }
}

@keyframes lc-cart {
	0%, 18%, 30%, 100% { box-shadow: 0 0 0 0 rgba(26, 25, 21, 0); }
	22% { box-shadow: 0 0 0 4px rgba(26, 25, 21, .9); }
}

@keyframes lc-type-seo {
	0%, 4% { width: 0; }
	26%, 92% { width: 24ch; }
	100% { width: 0; }
}

@keyframes lc-seo-result {
	0%, 28% { opacity: 0; transform: translateY(8px); }
	34%, 90% { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(0); }
}

@keyframes lc-seo-mark {
	0%, 38% { background-size: 0% .38em; }
	48%, 90% { background-size: 100% .38em; }
	100% { background-size: 100% .38em; }
}

/* Card cycle: front, slide out, back, middle, front again. */
@keyframes lc-deck {
	0%, 24.4% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; z-index: 3; }
	33.3% { transform: translate(var(--ex), var(--ey)) scale(1) rotate(-9deg); opacity: 0; z-index: 4; }
	33.4% { transform: translate(var(--bx), var(--by)) scale(.88) rotate(0deg); opacity: 0; z-index: 1; }
	38.9%, 57.8% { transform: translate(var(--bx), var(--by)) scale(.88) rotate(0deg); opacity: .55; z-index: 1; }
	66.7%, 91.1% { transform: translate(var(--mx), var(--my)) scale(.94) rotate(0deg); opacity: .8; z-index: 2; }
	100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; z-index: 3; }
}

/* ---------- Cookie notice: a small index card at the bottom left ---------- */

.lc-cookie {
	position: fixed;
	bottom: max(16px, env(safe-area-inset-bottom, 0px));
	left: max(16px, env(safe-area-inset-left, 0px));
	z-index: 90;
	box-sizing: border-box;
	width: min(380px, calc(100vw - 32px));
	padding: 1.1rem 1.25rem 1rem;
	color: var(--lc-ink);
	background: var(--lc-sheet);
	border: 1.5px solid var(--lc-ink);
	border-radius: var(--lc-radius);
	box-shadow: var(--lc-shadow-paper);
	animation: lc-cookie-in .45s var(--lc-ease) both;
}

.lc-cookie[hidden] {
	display: none;
}

.lc-cookie p {
	margin: 0;
}

.lc-cookie__title {
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.3;
}

.lc-cookie__text {
	margin-top: .35rem !important;
	color: var(--lc-ink-soft);
	font-size: .9375rem;
	line-height: 1.5;
}

.lc-cookie__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1.25rem;
	align-items: center;
	margin-top: .9rem !important;
}

.lc-cookie__ok {
	padding: .65rem 1.15rem;
	color: var(--lc-ink);
	font: 700 .9375rem/1.2 var(--lc-sans);
	background: var(--lc-lime);
	border: 0;
	border-radius: var(--lc-radius);
	cursor: pointer;
}

.lc-cookie__ok:hover {
	background: #B6E032;
}

.lc-cookie__ok:focus-visible,
.lc-cookie__more:focus-visible {
	outline: 2px solid var(--lc-ink);
	outline-offset: 3px;
}

.lc-cookie__more {
	color: var(--lc-ink);
	font-size: .9375rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 600px) {
	.lc-cookie {
		right: 12px;
		bottom: max(12px, env(safe-area-inset-bottom, 0px));
		left: 12px;
		width: auto;
		padding: .85rem 1rem .8rem;
	}

	.lc-cookie__text {
		font-size: .875rem;
	}

	.lc-cookie__actions {
		margin-top: .7rem !important;
	}
}

@keyframes lc-cookie-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Less motion ---------- */
/* System setting "reduce motion" and the site-wide toggle both stop every animation.
   Elements fall back to designed still states (tilted phone, stacked deck, full marker, full trend line). */

@media (prefers-reduced-motion: reduce) {
	.lc-shopcard__photo::after,
	.lc-mock-shop__swatches::after,
	.lc-mock-shop__button,
	.lc-seo .lc-type,
	.lc-seo .lc-mock-seo__search::after,
	.lc-seo .lc-mock-seo__result,
	.lc-seo .lc-mock-seo__title,
	.lc-app-icon,
	.lc-service-item__visual.is-app .is-style-phone,
	.lc-mark,
	mark.lc-mark,
	.lc-sparkline__trend,
	.lc-deck__card,
	.lc-phone,
	.lc-phone-stage__shadow,
	.wp-block-code.is-style-typing code,
	.wp-block-code.is-style-typing::after {
		animation: none !important;
	}

	.lc-entry {
		transition: none;
	}

	.lc-entry:has(.lc-stretch a):hover {
		transform: none;
	}

	.lc-cookie {
		animation: none;
	}

	.lc-loop.has-still .lc-loop__still {
		display: block;
	}

	.lc-loop.has-still .lc-loop__video {
		display: none;
	}
}

.lc-motion-off .lc-cookie,
.lc-motion-off .wp-block-navigation__responsive-container.is-menu-open {
	animation: none;
}

.lc-motion-off .lc-loop.has-still .lc-loop__still {
	display: block;
}

.lc-motion-off .lc-loop.has-still .lc-loop__video {
	display: none;
}

.lc-motion-off .lc-shopcard__photo::after,
.lc-motion-off .lc-mock-shop__swatches::after,
.lc-motion-off .lc-mock-shop__button,
.lc-motion-off .lc-seo .lc-type,
.lc-motion-off .lc-seo .lc-mock-seo__search::after,
.lc-motion-off .lc-seo .lc-mock-seo__result,
.lc-motion-off .lc-seo .lc-mock-seo__title,
.lc-motion-off .lc-app-icon,
.lc-motion-off .lc-service-item__visual.is-app .is-style-phone,
.lc-motion-off .lc-mark,
.lc-motion-off mark.lc-mark,
.lc-motion-off .lc-sparkline__trend,
.lc-motion-off .lc-deck__card,
.lc-motion-off .lc-phone,
.lc-motion-off .lc-phone-stage__shadow,
.lc-motion-off .wp-block-code.is-style-typing code,
.lc-motion-off .wp-block-code.is-style-typing::after {
	animation: none !important;
}

.lc-motion-off .lc-entry,
.lc-motion-off .lc-steps__marker {
	transition: none;
}

.lc-motion-off mark.lc-circle::after,
.lc-motion-off .lc-roadmap::before {
	transition: none;
}

.lc-motion-off .lc-wordmark__char {
	animation: none;
	transition: none;
}

.lc-motion-off .lc-wordmark__part.is-code::before {
	transition: none;
	transform: none !important;
}

.lc-motion-off .lc-cv__lane::before,
.lc-motion-off .lc-cv__item::before,
.lc-motion-off .lc-cv__merge::before,
.lc-motion-off .lc-cv__now::before,
.lc-motion-off p.lc-chip::before {
	transition: none;
	transform: none !important;
	clip-path: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.lc-steps__marker,
	mark.lc-circle::after,
	.lc-roadmap::before {
		transition: none;
	}

	.lc-wordmark__char {
		animation: none;
		transition: none;
	}

	.lc-wordmark__part.is-code::before {
		transition: none;
		transform: none !important;
	}

	.lc-cv__lane::before,
	.lc-cv__item::before,
	.lc-cv__merge::before,
	.lc-cv__now::before,
	p.lc-chip::before {
		transition: none;
		transform: none !important;
		clip-path: none !important;
	}
}