/* =========================================================================
   Carely 2026 2 — design system, base, header/footer, then one block per
   section. Figma: "Carely Base" file, page Direction. Design width 1728px;
   container 1360px. No build step — edit this file directly.
   ========================================================================= */

/* ---- Tokens (Figma variables) ------------------------------------------- */
:root {
	/* Colour */
	--c-ink: #23252c;        /* Black */
	--c-accent: #3347f4;     /* Accent 800 / Color */
	--c-accent-ink: #2a39c9; /* accent, darkened for hover */
	--c-dark: #2a2d59;       /* Dark */
	--c-deep: #2e2f89;       /* Deep */
	--c-blue-900: #353b6f;   /* Blue 900 */
	--c-sub: #546078;        /* Sub */
	--c-white: #fff;         /* White / Neutral Light 100% */
	--c-car-1: #e8a47d;      /* Car 1 */
	--c-car-2: #c880b3;      /* Car 2 */
	--c-car-3: #3948f2;      /* Car 3 */
	--c-hero-hi: #f195bd;    /* hero heading highlight */
	--c-fade: #e1e1e1;       /* text the gradient sweep has not reached yet */
	--c-body: #54565b;       /* long-form body copy on white */
	--c-muted: #a2a4aa;      /* de-emphasised card footnotes */
	--c-line: #e7e7e7;       /* card hairline */
	--c-cream: #fff9f3;      /* warm section band */
	--c-orange: #f49448;     /* "the challenge" accent + card icons */
	--c-sky: #49bcfe;        /* advantage card icons */
	--c-ice: #f5f9fe;        /* cool section band */
	--c-ice-2: #e7eef6;      /* muted feature tile */
	--c-ice-ink: #778ba4;    /* muted feature title */
	--c-iso: #e30613;        /* ISO 27001 wordmark */
	--c-indigo: #424dee;     /* founders heading accent */
	--c-blue-bright: #0566ea; /* Managed CTA + "blue" insight tag */
	--c-ok: #12b76a;         /* subscribe success — a new hue, see DESIGN-NOTES */
	--c-tag-amber: #f9a603;
	--c-tag-purple: #d15cfe;
	--c-card-line: #f3f3f3;  /* insight card hairline */
	--c-mail-bg: #f2f9ff;    /* newsletter card */
	--c-mail-line: #e7f1ff;

	/* Elevation */
	--shadow-card: 0 -3px 22px rgba(29, 99, 138, 0.1);
	--c-frame: #f5f5f5;      /* screenshot frame */
	--c-nav-ink: #f3f3f3;
	--c-glass: rgba(2, 1, 90, 0.2);

	/* Type */
	--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--fs-h0: clamp(3rem, 5.09vw, 5.5rem);        /* 88px @1728 */
	--fs-h1: clamp(2.25rem, 3.704vw, 4rem);      /* 64px @1728 */
	--fs-h2: clamp(1.75rem, 2.778vw, 3rem);      /* 48px @1728 */
	--fs-lead: clamp(1.0625rem, 1.273vw, 1.375rem); /* 22px @1728 */
	--fs-body: 1rem;                              /* 16/24 */
	--fs-small: 0.875rem;

	/* Layout — Figma spacing scale */
	--s-16: 16px;
	--s-24: 24px;
	--s-32: 32px;
	--s-48: 48px;
	--s-64: 64px;
	--s-80: 80px;
	--s-120: 120px;
	--container: 1360px;
	--pad-x: clamp(16px, 1.157vw, 20px);
	--section-y: clamp(3.5rem, 6.94vw, 7.5rem);
	--radius-2: 8px;
	--radius-pill: 100px;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	/* GSAP power4.inOut, which Figma's general-animation note specifies. */
	--ease-reveal: cubic-bezier(0.77, 0, 0.175, 1);
}

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

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

body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--c-sub);
	background: var(--c-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* clip, not hidden: hidden would make body a scroll container and break the
	   sticky stacking cards in the record section. */
	overflow-x: clip;
}

body.no-scroll { overflow: hidden; }

h1, h2, h3, h4 { color: var(--c-ink); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 0.5em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

p { margin: 0 0 1rem; }
a { color: var(--c-accent); text-decoration: none; }
img, svg { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid rgba(51, 71, 244, 0.45); outline-offset: 2px; border-radius: 4px; }

/* --container is the CONTENT measure (Figma's 1360px content blocks), so the
   box grows by the gutters. Some sections — and the header pill — sit on
   Figma's narrower measure instead, where 1360 INCLUDES the gutters. */
.container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--pad-x));
	margin-inline: auto;
	padding-inline: var(--pad-x);
}

.container--narrow { max-width: var(--container); }

/* Figma's widest measure: 80px gutters ("Content Padding/12 Columns"), giving
   1568px of content at the 1728px design width. Capped there so it does not
   keep growing on very wide displays. */
.container--wide {
	max-width: 1728px;
	padding-inline: clamp(20px, 4.63vw, var(--s-80));
}

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

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

.skip-link:focus {
	position: fixed; top: 8px; left: 8px;
	z-index: 100;
	width: auto; height: auto;
	margin: 0; padding: 10px 16px;
	clip-path: none;
	background: var(--c-white); color: var(--c-ink);
	border-radius: var(--radius-2);
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	white-space: nowrap;
	border-radius: var(--radius-pill);
	transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.btn:hover { transform: translateY(-1px); }

.btn--light {
	background: var(--c-white);
	color: var(--c-ink);
	padding: 12px 24px;
	font-size: var(--fs-body);
}

.btn--outline {
	background: rgba(10, 13, 20, 0.01);
	color: var(--c-white);
	border: 1.5px solid #fdfdfd;
	padding: 12px 24px;
	font-size: var(--fs-body);
}

.btn--outline:hover { background: rgba(255, 255, 255, 0.14); }

.btn--outline-accent {
	background: rgba(10, 13, 20, 0.01);
	color: var(--c-accent);
	border: 1.5px solid var(--c-accent);
	padding: 17px 36px;
	font-size: clamp(1.0625rem, 1.157vw, 1.25rem);   /* 20px @1728 */
	line-height: 24px;
	border-radius: 50px;
}

.btn--outline-accent:hover { background: rgba(51, 71, 244, 0.06); }

/* White pill with an accent hairline + accent label, for use on the accent field. */
.btn--on-accent {
	background: var(--c-white);
	color: var(--c-accent);
	border: 1.5px solid var(--c-accent);
	padding: 16px 28px;
	font-size: clamp(1rem, 1.042vw, 1.125rem);   /* 18px @1728 */
	line-height: 24px;
	letter-spacing: -0.0222em;
}

.btn--dark { background: var(--c-ink); color: var(--c-white); padding: 12px 24px; }

.btn--accent {
	background: var(--c-accent);
	color: var(--c-white);
	padding: 18px 36px;
	font-size: clamp(1.0625rem, 1.157vw, 1.25rem);   /* 20px @1728 */
	line-height: 24px;
}

/* ---- Site header (Figma 40000324:20334) --------------------------------- */
.site-header { width: 100%; padding-top: var(--s-32); z-index: 20; }

.site-header--over { position: absolute; top: 0; left: 0; right: 0; }


.site-header__pill {
	display: flex;
	align-items: center;
	gap: var(--s-24);
	position: relative;
	min-height: 55px;
	padding: 4px 4px 4px var(--s-32);
	border-radius: 1000px;
	background: var(--c-glass);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
}

/* Off the gradient there is nothing to frost against, so go solid brand blue. */
.site-header--solid .site-header__pill { background: var(--c-accent); }

.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand__mark { width: 30px; height: 30px; color: var(--c-white); }
.brand__name {
	font-size: 22.983px;
	line-height: 26.266px;
	font-weight: 700;
	letter-spacing: -0.4776px;
	color: var(--c-white);
}

.nav {
	/* Centred on the pill, not on the space left over by brand + CTA. */
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 30px;
}

.nav__link { display: inline-flex; flex-direction: column; align-items: center; }

.nav__label {
	font-size: var(--fs-body);
	line-height: 28.08px;
	font-weight: 500;
	color: var(--c-nav-ink);
	white-space: nowrap;
}

.nav__rule {
	display: block;
	width: 0;
	height: 2px;
	background: var(--c-white);
	transition: width 0.25s var(--ease);
}

.nav__link:hover .nav__rule,
.nav__link:focus-visible .nav__rule { width: 100%; }

.nav__group {
	display: inline-flex;
	align-items: center;
	gap: 30px;
	padding: 12px 28px;
	border-radius: 70px;
	background: var(--c-glass);
}

.site-header__cta { flex: 0 0 auto; margin-left: auto; }

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px; height: 44px;
	margin-left: auto;
	padding: 0;
	background: none; border: 0;
	cursor: pointer;
}

.nav-toggle__bar { display: block; width: 22px; height: 2px; margin-inline: auto; background: var(--c-white); }

/* ---- Mobile drawer ------------------------------------------------------ */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 30;
	padding: 96px var(--pad-x) var(--s-32);
	background: var(--c-accent);
	overflow-y: auto;
}

.mobile-menu__nav { display: flex; flex-direction: column; gap: var(--s-24); }
.mobile-menu__link { font-size: 1.375rem; font-weight: 600; color: var(--c-white); }
.mobile-menu__cta { margin-top: var(--s-16); }

/* ---- Hero (Figma 40000275:18529) ---------------------------------------- */
.hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
	padding-top: clamp(128px, 10.648vw, 184px);
	overflow: hidden;
	background: var(--c-white);
}

/* -- layer 1: gradient wash + blurred blobs + decorations -- */
.hero__bg {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 1;
	height: 1296px;
	overflow: hidden;
	pointer-events: none;
	/* No base wash: the four blobs span 2620px around the centre, so they cover
	   any realistic viewport on their own and their blurred edges are the
	   falloff Figma actually draws. */
}

.hero__blob { position: absolute; max-width: none; }

/* Rects are the Figma layer geometry, x measured from the 1728px frame centre. */
.hero__blob--3 { left: calc(50% - 80.96px);   top: -529.23px; width: 1364.04px; height: 1760.4px; }
.hero__blob--4 { left: calc(50% - 1337.13px); top: -495.67px; width: 1915.56px; height: 1631.41px; }
.hero__blob--1 { left: calc(50% - 424.1px);   top: -636.92px; width: 2119.37px; height: 1639.86px; }
.hero__blob--2 {
	left: calc(50% + 182.31px); top: -542px;
	width: 917.2px; height: 1362.21px;
	transform: rotate(61.32deg) skewX(7.4deg);
}

.hero__avatar {
	position: absolute;
	width: 68.121px; height: 68.121px;
	border-radius: 50%;
}

.hero__avatar--1 { left: calc(50% - 544.3px); top: 248.5px; }
.hero__avatar--2 { left: calc(50% + 430.9px); top: 261px; }
.hero__avatar--3 { left: calc(50% - 436.4px); top: 521.7px; }

.hero__chip {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 30.6px;
	font-size: 12.81px;
	line-height: 30.6px;
	letter-spacing: -0.5571px;
	color: var(--c-white);
	white-space: nowrap;
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.09);
}

.hero__chip-dot { position: absolute; width: 8.773px; height: 8.773px; }

/* Chips left of centre point their tail up-right. */
.hero__chip--marketing,
.hero__chip--treatment {
	padding: 0 var(--s-16) 0 10px;
	border-radius: 50px 6px 50px 50px;
}

.hero__chip--marketing .hero__chip-dot,
.hero__chip--treatment .hero__chip-dot { right: -22.77px; top: -8.89px; }

.hero__chip--marketing { left: calc(50% - 554px);    top: 444px; }
.hero__chip--treatment { left: calc(50% - 620.83px); top: 557.4px; }

/* Chips right of centre point their tail up-left and are centred on their anchor. */
.hero__chip--personalisation,
.hero__chip--premium,
.hero__chip--continuity {
	padding: 0 10px 0 var(--s-16);
	border-radius: 6px 50px 50px 50px;
	transform: translateX(-50%);
}

.hero__chip--personalisation .hero__chip-dot,
.hero__chip--premium .hero__chip-dot,
.hero__chip--continuity .hero__chip-dot { left: -16px; top: -11.89px; }

.hero__chip--personalisation { left: calc(50% + 402px);    top: 474.6px; }
.hero__chip--premium         { left: calc(50% + 545px);    top: 368px; }
.hero__chip--continuity      { left: calc(50% + 602.67px); top: 568.3px; }

/* -- layer 1 motion -- */
/* The avatars and chips were the only part of the hero that sat still while the
   copy revealed, which read as a static backdrop behind a moving foreground.

   They animate on the INDIVIDUAL `translate` and `scale` properties, never on
   `transform`: the three right-hand chips already use `transform:
   translateX(-50%)` to centre on their anchor, and the individual properties
   compose with it rather than overwriting it. Animating `transform` here would
   throw those three chips half their own width to the right.

   Two animations per element — a one-shot entrance, then a drift that runs
   forever. The drift's delay is the entrance delay plus its duration, so the
   two never fight over `translate`; during its delay it has no fill and the
   entrance's held end value wins. Each element carries its own timing so the
   group breathes out of step instead of pulsing as one block. */
.hero__avatar,
.hero__chip {
	opacity: 0;
	animation:
		hero-rise 0.8s var(--ease-reveal) var(--in-delay, 0.3s) both,
		hero-drift var(--drift-dur, 9s) ease-in-out calc(var(--in-delay, 0.3s) + 0.8s) infinite alternate;
}

@keyframes hero-rise {
	from { opacity: 0; translate: 0 24px; scale: 0.92; }
	to   { opacity: 1; translate: 0 0;    scale: 1; }
}

@keyframes hero-drift {
	from { translate: 0 0; }
	to   { translate: var(--drift-x, 0) var(--drift-y, -10px); }
}

/* Entrance order runs outward from the headline rather than left-to-right, so
   the chips appear to be thrown off by the copy landing. Durations are
   deliberately coprime-ish: equal ones visibly resynchronise every few cycles. */
.hero__avatar--1 { --in-delay: 0.34s; --drift-dur: 8.2s;  --drift-y: -12px; }
.hero__avatar--2 { --in-delay: 0.40s; --drift-dur: 9.7s;  --drift-y: -9px;  }
.hero__avatar--3 { --in-delay: 0.52s; --drift-dur: 7.3s;  --drift-y: -14px; }

.hero__chip--marketing       { --in-delay: 0.46s; --drift-dur: 10.4s; --drift-y: -8px;  --drift-x: 3px;  }
.hero__chip--premium         { --in-delay: 0.50s; --drift-dur: 8.9s;  --drift-y: -11px; --drift-x: -3px; }
.hero__chip--personalisation { --in-delay: 0.58s; --drift-dur: 11.3s; --drift-y: -7px;  --drift-x: -4px; }
.hero__chip--treatment       { --in-delay: 0.62s; --drift-dur: 9.1s;  --drift-y: -13px; --drift-x: 4px;  }
.hero__chip--continuity      { --in-delay: 0.68s; --drift-dur: 12.1s; --drift-y: -9px;  --drift-x: -3px; }

/* The connector dot is the one part that reads as a signal rather than a label,
   so it pulses outward and settles instead of drifting. Rest state is the dot
   exactly as it was — full opacity, unscaled — so the hero at rest is unchanged. */
.hero__chip-dot {
	animation: hero-dot 3.4s ease-in-out var(--dot-delay, 1.6s) infinite;
}

.hero__chip--marketing .hero__chip-dot       { --dot-delay: 1.5s; }
.hero__chip--premium .hero__chip-dot         { --dot-delay: 2.1s; }
.hero__chip--personalisation .hero__chip-dot { --dot-delay: 1.8s; }
.hero__chip--treatment .hero__chip-dot       { --dot-delay: 2.6s; }
.hero__chip--continuity .hero__chip-dot      { --dot-delay: 2.3s; }

@keyframes hero-dot {
	0%, 100% { opacity: 1;   scale: 1; }
	50%      { opacity: 0.6; scale: 1.45; }
}

/* -- layer 3: copy -- */
.hero__text {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 69px;
	width: 920px;
	max-width: 100%;
	padding-inline: var(--pad-x);
	text-align: center;
}

.hero__intro { display: flex; flex-direction: column; align-items: center; width: 100%; }

.hero__badge {
	margin: 0 0 var(--s-16);
	padding: 6px var(--s-16);
	font-size: var(--fs-body);
	line-height: 25px;
	font-weight: 700;
	color: var(--c-white);
	background: rgba(255, 255, 255, 0.1);
	border: 1.5px solid rgba(255, 255, 255, 0.4);
	border-radius: 50px;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.hero__title {
	margin: 0;
	font-size: var(--fs-h1);
	line-height: 1.125;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--c-white);
}

.hero__hi { color: var(--c-hero-hi); }

.hero__lead {
	max-width: 707px;
	margin: 30px 0 0;
	font-size: var(--fs-lead);
	line-height: 1.227;    /* Figma: 27px line box at 22px */
	font-weight: 500;
	color: var(--c-white);
}

.hero__actions { display: flex; flex-direction: column; align-items: center; gap: 30px; }

.hero__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }

.hero__buttons .btn--light {
	padding: 18px 36px;
	font-size: clamp(1.0625rem, 1.157vw, 1.25rem);
	line-height: 24px;
	letter-spacing: -0.02em;
}

.hero__buttons .btn--outline {
	padding: 17px 36px;
	font-size: clamp(1.0625rem, 1.157vw, 1.25rem);
	line-height: 24px;
	letter-spacing: -0.02em;
	border-radius: 50px;
}

.hero__fine {
	margin: 0;
	font-size: var(--fs-body);
	line-height: 1.25;
	font-weight: 500;
	color: var(--c-white);
	opacity: 0.6;
}

/* -- layer 2: product screenshot -- */
.hero__shot {
	position: relative;
	z-index: 2;
	width: 100%;
	height: clamp(280px, 31.71vw, 548px);
}

.hero__shot-frame {
	position: absolute;
	top: 7px;
	left: 50%;
	transform: translateX(-50%);
	width: min(1364px, calc(100% - 2 * var(--pad-x)));
	aspect-ratio: 1364 / 1000;
	border: 23px solid var(--c-frame);
	/* Figma's 23px stroke sits outside a 35px-radius rect, so the outer radius
	   is 58 and CSS derives the 35px inner radius from the border width. */
	border-radius: 58px;
	background: var(--c-frame);
}

.hero__shot-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	border-radius: 35px;
}

/* The 2px white hairline Figma draws on the inner edge of the light frame. */
.hero__shot-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--c-white);
	border-radius: 35px;
	pointer-events: none;
}

.hero__shot-fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.5) 69%, #fff 95%);
}

/* ---- Statement / transition (Figma 40000371:45929) ---------------------- */
.statement {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(320px, 28.36vw, 490px);
	padding-inline: var(--pad-x);
	overflow: hidden;
}

.statement__text {
	max-width: 898px;
	margin: 0;
	font-size: clamp(1.375rem, 2.014vw, 2.175rem);   /* 34.8px @1728 */
	line-height: 1.5;
	font-weight: 500;
	letter-spacing: -0.0559em;                        /* -1.944px @34.8px */
	text-align: center;
	color: var(--c-ink);
}

/* Figma's frame is a snapshot of the gradient wave mid-travel (note
   40000598:141200), not a static treatment: ink behind the wave, its two hues
   at the head, pale ahead of it. So colour comes from the animation rather than
   a fixed gradient. Until JS splits the text the copy stays plain ink, which is
   also the reduced-motion and no-JS state. */
.statement__word { white-space: nowrap; }

.js .statement__text.is-split .statement__char { color: var(--c-fade); }

.js .statement__text.is-split .statement__char.is-lit {
	animation: statement-wave 0.4s var(--ease) forwards;
}

/* Travel order read off Figma's gradient, right to left: a character goes from
   pale, through pink and then blue, and settles on ink. */
@keyframes statement-wave {
	0%   { color: var(--c-fade); }
	30%  { color: var(--c-car-2); }
	60%  { color: var(--c-car-3); }
	100% { color: var(--c-ink); }
}

/* ---- Outcomes (Figma 40000282:41187) ------------------------------------ */
.outcomes { padding-block: var(--s-80); }

.outcomes__inner { display: flex; flex-direction: column; gap: 40px; }

.outcomes__row {
	display: grid;
	grid-template-columns: 1fr 540px;   /* 771 + 49 gap + 540 = 1360 */
	gap: 49px;
	align-items: start;
	min-height: 170px;
}

.outcomes__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.968vw, 2.125rem);   /* 34px @1728 */
	line-height: 0.946;                            /* 32.16px @34px */
	font-weight: 700;
	letter-spacing: 0;
	color: var(--c-ink);
}

.outcomes__lead--blue { color: var(--c-car-3); }
.outcomes__lead--pink { color: var(--c-car-2); }
.outcomes__lead--sand { color: var(--c-car-1); }

.outcomes__desc {
	max-width: 540px;
	margin: 0;
	font-size: clamp(1rem, 1.042vw, 1.125rem);     /* 18px @1728 */
	line-height: 1.56;                              /* 28.08px @18px */
	font-weight: 500;
	color: var(--c-body);
}

/* ---- Case report (Figma 40000371:46413) --------------------------------- */
.case {
	padding-block: var(--s-80);
	/* Figma note 40000598:141194 specifies this section's entrance: each element
	   rises 50px over 700ms ease-out, 100ms apart. */
	--reveal-y: 50px;
	--reveal-dur: 0.7s;
	--reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.case__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-32); }

.case__kicker {
	margin: 0;
	font-size: clamp(1rem, 1.042vw, 1.125rem);   /* 18px @1728 */
	line-height: 1.56;                            /* 28.08px @18px */
	font-weight: 700;
	text-transform: uppercase;
	color: var(--c-accent);
}

.case__title {
	max-width: 590px;
	margin: 0;
	font-size: var(--fs-h2);
	line-height: 1.1667;          /* 56px @48px */
	font-weight: 700;
	letter-spacing: -0.0104em;    /* -0.5px @48px */
	color: var(--c-dark);
}

.case__body { max-width: 590px; }

.case__body p {
	margin: 0;
	font-size: clamp(1rem, 1.042vw, 1.125rem);
	line-height: 1.56;
	font-weight: 500;
	color: var(--c-body);
}

/* Figma separates the two paragraphs with one blank line. */
.case__body p + p { margin-top: 1.56em; }

.case__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: clamp(1rem, 1.042vw, 1.125rem);
	line-height: 24px;
	font-weight: 500;
	letter-spacing: -0.0222em;    /* -0.4px @18px */
	color: var(--c-accent);
}

.case__link img { width: 15px; height: 19px; transition: transform 0.25s var(--ease); }
.case__link:hover img { transform: translateX(3px); }

.case__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--s-48);
	margin-top: var(--s-80);
}

/* Figma sizes each block to its label; the gaps depend on these widths. */
.case__stat { flex: 0 0 auto; }
.case__stat:nth-child(1) { width: 224px; }
.case__stat:nth-child(2) { width: 227px; }
.case__stat:nth-child(3) { width: 240px; }

.case__value {
	margin: 0 0 var(--s-24);
	font-size: var(--fs-h0);
	line-height: 1;               /* 88px @88px */
	font-weight: 400;
	letter-spacing: -0.0227em;    /* -2px @88px */
}

.case__value--sand { color: var(--c-car-1); }
.case__value--pink { color: var(--c-car-2); }
.case__value--blue { color: var(--c-car-3); }

.case__label {
	margin: 0;
	font-size: var(--fs-body);
	line-height: 1.5;             /* 24px @16px */
	font-weight: 300;
	color: var(--c-dark);
}

/* A 256px-tall band showing the bottom of a 479px graph; the tall bars on the
   right overflow upward into the whitespace beside the stats. */
.case__graph {
	position: relative;
	margin-top: var(--s-120);
	aspect-ratio: 1360 / 256;
}

/* Scroll-driven bar growth (Figma note 40000598:141194). Each bar scales from
   its own baseline; main.js scrubs --bar per bar against scroll position. The
   collapsed default only applies once JS adds .is-growing, so no-JS and
   reduced-motion visitors keep the chart at full height. */
.case__graph.is-growing > svg path {
	transform-box: fill-box;
	transform-origin: bottom;
	transform: scaleY(var(--bar, 1));
}

.case__graph > svg {
	position: absolute;
	bottom: 0;
	left: -8px;
	width: calc(100% + 16px);
	max-width: none;
	height: auto;
}

/* ---- The challenge (Figma 40000359:31751) ------------------------------- */
.challenge { padding-block: var(--s-120); background: var(--c-cream); }

.challenge__head { display: flex; flex-direction: column; align-items: flex-start; max-width: 800px; }

.challenge__kicker {
	margin: 0 0 18px;
	font-size: clamp(1rem, 1.042vw, 1.125rem);   /* 18px @1728 */
	line-height: 1.56;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--c-orange);
}

.challenge__title {
	/* Figma inserts an 8px top pad above the heading's own line box. */
	max-width: 716px;
	margin: 8px 0 0;
	font-size: clamp(1.875rem, 3.009vw, 3.25rem);   /* 52px @1728 */
	line-height: 1.16;                               /* 60.32px @52px */
	font-weight: 700;
	letter-spacing: -0.02em;                         /* -1.04px @52px */
	color: var(--c-ink);
}

.challenge__lead {
	margin: 40px 0 0;
	font-size: clamp(1.0625rem, 1.157vw, 1.25rem);   /* 20px @1728 */
	line-height: 1.6;                                 /* 32px @20px */
	font-weight: 500;
	color: var(--c-body);
}

.challenge__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-24);
	margin-top: var(--s-48);
}

.challenge__card {
	display: flex;
	flex-direction: column;
	gap: var(--s-32);
	min-height: 320px;
	padding: var(--s-32);
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: 20px;
}

.challenge__icon { width: 40px; height: 40px; }

/* `icon-user-multiple` paints with currentColor; Figma tints the challenge
   glyphs with the section's warm accent. The other cards' icons carry their own
   colours, so this only reaches the one that asks for it. */
.challenge__icon { color: #f49448; }

/* Longevity's first card is a composed chip, not a 40px glyph. */
.challenge__icon--chip { width: 110px; height: 62px; margin: -11px 0; }

.challenge__card-body {
	display: flex;
	flex: 1 0 0%;
	flex-direction: column;
	justify-content: space-between;
}

.challenge__card-text { display: flex; flex-direction: column; gap: 18px; }

.challenge__card-title {
	margin: 0;
	font-size: clamp(1.25rem, 1.389vw, 1.5rem);      /* 24px @1728 */
	line-height: 1.34;                                /* 32.16px @24px */
	font-weight: 700;
	letter-spacing: 0;
	color: var(--c-ink);
}

.challenge__card-desc,
.challenge__card-meta {
	margin: 0;
	font-size: clamp(1rem, 1.042vw, 1.125rem);
	line-height: 1.56;                                /* 28.08px @18px */
	font-weight: 500;
}

.challenge__card-desc { color: var(--c-body); }
.challenge__card-meta { color: var(--c-muted); }

.challenge__closing {
	margin: 70px 0 0;
	font-size: clamp(1.0625rem, 1.157vw, 1.25rem);
	line-height: 1.6;
	font-weight: 500;
	color: var(--c-body);
}

/* ---- One record (Figma 40000598:141611) --------------------------------- */
/* Deliberately NOT a flex column: as a flex item the container's content-based
   automatic minimum (the cards' fixed 1194px inner width) overrides its
   max-width, which widens the panel and shifts every card 11px right. */
.record { padding-block: var(--s-80); }

.record__cta { margin-top: var(--s-80); text-align: center; }

.record__head { display: flex; flex-direction: column; align-items: center; text-align: center; }

.record__title {
	max-width: 798px;
	margin: 0;
	font-size: clamp(1.875rem, 3.009vw, 3.25rem);   /* 52px @1728 */
	line-height: 1.16;                               /* 60.32px @52px */
	font-weight: 700;
	letter-spacing: -0.02em;                         /* -1.04px @52px */
	color: var(--c-ink);
}

.record__title-accent { color: var(--c-accent); }

.record__lead {
	max-width: 723px;
	margin: 40px 0 0;
	font-size: clamp(1.0625rem, 1.157vw, 1.25rem);
	line-height: 1.6;
	font-weight: 500;
	color: var(--c-body);
}

.record__cards { margin-top: 10px; padding-top: var(--s-48); }

/* Each card sticks under the one before it, 60px lower, so the stack reads as
   a pile. No ancestor may create a scroll container or this silently degrades. */
.record__card {
	position: sticky;
	top: 0;
	display: flex;
	align-items: flex-start;
	padding-top: 60px;
	filter: drop-shadow(var(--shadow-card));
}

.record__card + .record__card { margin-top: 60px; }

.record__card--1 { height: 578px; }
.record__card--2 { height: 486px; }
.record__card--3 { height: 538px; }

.record__panel {
	display: grid;
	grid-template-columns: 490px 704px;   /* 490 + 704 = the 1194.36 content box */
	/* One explicit row the height of the panel, so the text centres against the
	   card height and the taller illustration overflows and is clipped, exactly
	   as Figma does it. minmax(0,...) so the taller image cannot inflate it. */
	grid-template-rows: minmax(0, 1fr);
	height: 100%;
	/* Figma authors 74px, but its 490+704 content is 22px wider than that
	   leaves, and Figma centres the overflow. 62.82px is the rendered result
	   and needs no overflow to reproduce it. */
	padding: 40px 62.82px;
	overflow: clip;
	background: var(--c-white);
	border-radius: 20px;
}

.record__text {
	align-self: center;
	display: flex;
	flex-direction: column;
	gap: 27px;
	padding-right: 40px;
}

.record__card-title {
	margin: 0;
	font-size: clamp(1.5rem, 1.968vw, 2.125rem);   /* 34px @1728 */
	line-height: 1.39;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--c-ink);
}

.record__accent--blue { color: var(--c-car-3); }
.record__accent--pink { color: var(--c-car-2); }
.record__accent--sand { color: var(--c-car-1); }

.record__card-desc {
	margin: 0;
	font-size: clamp(1rem, 1.042vw, 1.125rem);
	line-height: 1.56;
	font-weight: 500;
	color: var(--c-body);
}

/* The exports carry a 16px bleed margin so the connector lines that overflow
   Figma's 704x450 illustration box are not shaved off. */
.record__figure { align-self: start; min-width: 0; }

.record__figure img { width: 704px; max-width: none; height: auto; }

/* ---- The Carely advantage (Figma 40000598:134719) ----------------------- */
.advantage { padding-block: var(--s-120); background: var(--c-ice); }

.advantage__kicker {
	margin: 0 0 var(--s-16);
	font-size: clamp(1rem, 1.042vw, 1.125rem);   /* 18px @1728 */
	line-height: 1.56;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--c-accent);
}

.advantage__title {
	max-width: 651px;
	margin: 0;
	font-size: clamp(1.875rem, 3.009vw, 3.25rem);   /* 52px @1728 */
	line-height: 1.16;                               /* 60.32px @52px */
	font-weight: 700;
	letter-spacing: -0.02em;                         /* -1.04px @52px */
	color: var(--c-ink);
}

.advantage__title-accent { color: var(--c-accent); }

.advantage__lead {
	max-width: 768px;
	margin: 44px 0 0;
	font-size: clamp(1.0625rem, 1.157vw, 1.25rem);
	line-height: 1.6;
	font-weight: 500;
	color: var(--c-body);
}

.advantage__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 743px;
	gap: 8px;
	align-items: start;
}

/* Scroll-pinned steps. Inert until main.js adds .is-pinning, and it only does
   so when the sticky block fits the viewport — so the stacked mobile layout,
   short viewports, reduced motion and no-JS all fall back to plain scrolling.
   The margin lives here rather than on the grid: a top margin on the first
   child of a sticky box collapses through it and offsets the pinning. */
.advantage__pin {
	position: relative;
	margin-top: var(--s-64);
	/* Pins this far below the window top rather than flush against it. 80px is
	   the theme's own step (--s-80), so the gap matches the page's rhythm; the
	   section's ice band fills it while pinned. */
	--pin-top: var(--s-80);
	--pin-step: 25vh;
}

.advantage__pin-spacer { height: 0; }

.advantage__pin.is-pinning > .advantage__sticky { position: sticky; top: var(--pin-top); }

.advantage__pin.is-pinning > .advantage__pin-spacer {
	height: calc(var(--pin-step) * var(--pin-steps, 3));
}

/* An accordion of three: whichever item is open absorbs the slack and the
   closed ones sit at 88px, so the column always matches the 680px photo. That
   is Figma's own composition (a 1fr row plus two auto rows in a fixed 680px
   column) and the reason only one item's copy is visible at a time. */
.advantage__features {
	--adv-pad-y: 54px;
	--adv-pad-x: 44px;
	--adv-gap-y: 36px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 680px;
}

.advantage__feature {
	flex: 0 0 auto;
	border-radius: var(--radius-2);
	background: var(--c-ice-2);
	overflow: hidden;
}

.advantage__feature[open] { flex: 1 1 auto; min-height: 0; background: var(--c-white); }

/* The open row grows to fill the column and turns white; both are animated so
   the card expands rather than jumping. flex-grow is what interpolates here —
   the basis stays auto in both states. */
.advantage__feature {
	transition: flex-grow 0.34s var(--ease), background-color 0.34s var(--ease);
}

.advantage__feature-summary {
	display: flex;
	align-items: center;
	gap: var(--s-24);
	min-height: 88px;
	padding: var(--s-24);
	cursor: pointer;
	list-style: none;
}

/* Safari still draws the default triangle without this. */
.advantage__feature-summary::-webkit-details-marker { display: none; }

.advantage__feature[open] .advantage__feature-summary {
	align-items: flex-start;
	min-height: 0;
	padding: var(--adv-pad-y) var(--adv-pad-x) 0;
}


/* Indented to sit under the title: the x padding plus the 40px icon and its gap. */
.advantage__feature-body {
	display: flex;
	flex-direction: column;
	gap: var(--adv-gap-y);
	min-width: 0;
	padding: var(--adv-gap-y) var(--adv-pad-x) var(--adv-pad-y) calc(var(--adv-pad-x) + 40px + var(--s-24));
}

/* Closed state. The same element is restyled when open rather than swapped for
   a different one, so the heading outline is identical in both states. */
.advantage__feature-title {
	margin: 0;
	font-size: clamp(1.25rem, 1.389vw, 1.5rem);   /* 24px @1728 */
	line-height: 1.1667;                           /* 28px @24px */
	font-weight: 700;
	letter-spacing: -0.0208em;                     /* -0.5px @24px */
	color: var(--c-ice-ink);
}

.advantage__feature[open] .advantage__feature-title {
	font-size: clamp(1.5rem, 1.968vw, 2.125rem);   /* 34px @1728 */
	line-height: 1.5;
	letter-spacing: -0.0147em;                      /* -0.5px @34px */
	color: var(--c-ink);
}

/* Same treatment as the FAQ panel — see the comment there. */
.advantage__feature::details-content {
	display: grid;
	grid-template-rows: minmax(0, 0fr);
	overflow: hidden;
	transition: grid-template-rows 0.34s var(--ease), content-visibility 0.34s allow-discrete;
}

.advantage__feature[open]::details-content { grid-template-rows: minmax(0, 1fr); }

.advantage__feature-body { min-height: 0; opacity: 0; transition: opacity 0.24s var(--ease); }
.advantage__feature[open] .advantage__feature-body { opacity: 1; transition-delay: 0.12s; }

/* The title grows from 24px to 34px and darkens as the row opens. */
.advantage__feature-title {
	transition: font-size 0.34s var(--ease), line-height 0.34s var(--ease),
		letter-spacing 0.34s var(--ease), color 0.34s var(--ease);
}

/* Figma draws no affordance on the muted rows, but they are now controls, so
   the closed ones get the same chevron the FAQ uses. Invisible when open, which
   leaves the expanded card pixel-identical to the design — opacity rather than
   display:none so it can fade out with the rest of the row. */
.advantage__chevron {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-left: auto;
	overflow: hidden;
	color: var(--c-ice-ink);
	transition: opacity 0.24s var(--ease), width 0.34s var(--ease),
		transform 0.34s var(--ease);
}

/* Collapsed to zero width, not display:none, so it shrinks away with the row —
   and so the open card's layout is identical to what display:none produced. */
.advantage__feature[open] .advantage__chevron {
	width: 0;
	opacity: 0;
	transform: rotate(180deg);
	pointer-events: none;
}

.advantage__feature-desc {
	margin: 0;
	font-size: clamp(1rem, 1.042vw, 1.125rem);
	line-height: 1.56;
	font-weight: 500;
	color: var(--c-body);
}

.advantage__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: clamp(1rem, 1.042vw, 1.125rem);
	line-height: 24px;
	font-weight: 500;
	letter-spacing: -0.0222em;
	color: var(--c-accent);
}

.advantage__link img { width: 15px; height: 19px; transition: transform 0.25s var(--ease); }
.advantage__link:hover img { transform: translateX(3px); }

.advantage__photo {
	width: 743px;
	height: 680px;
	object-fit: cover;
	border-radius: var(--radius-2);
}

.advantage__cta { margin-top: var(--s-64); text-align: center; }

/* ---- Engineered for healthcare (Figma 40000542:130131) ------------------ */
.trust { padding-block: var(--s-120); background: var(--c-ice); }

.trust__head { text-align: center; }

.trust__title {
	max-width: 840px;
	margin: 0 auto;
	font-size: clamp(1.875rem, 3.009vw, 3.25rem);   /* 52px @1728 */
	line-height: 1.16;                               /* 60.32px @52px */
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--c-ink);
}

.trust__lead {
	max-width: 906px;
	margin: 30px auto 0;
	font-size: clamp(1.0625rem, 1.157vw, 1.25rem);   /* 20px @1728 */
	line-height: 1.6;
	font-weight: 400;
	color: var(--c-body);
}

/* The diagram is one fixed composition. Its own container-query context lets
   every child size and position in cqw/%, so it scales as a unit. */
.trust__diagram {
	position: relative;
	container-type: inline-size;
	width: 100%;
	max-width: 688.805px;
	margin: 100px auto 0;
	aspect-ratio: 688.805 / 564.793;
}

.trust__ring {
	position: absolute;
	width: 73.552%;    /* 506.629 / 688.805 */
	aspect-ratio: 1;
	border: 0.29cqw solid var(--c-deep);   /* 2px @688.805 */
	border-radius: 50%;
	opacity: 0.21;
}

.trust__ring--a { left: 16.359%; top: 5.034%; }
.trust__ring--b { left: 12.294%; top: 6.805%; }

.trust__gdpr {
	position: absolute;
	left: 75.036%;
	top: 20.984%;
	width: 19.923%;    /* 137.227 / 688.805 */
	height: auto;
}

.trust__iso {
	position: absolute;
	left: 8.256%;
	top: 24.209%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.452cqw;     /* 10px @688.805 */
	width: 14.664%;    /* 101 / 688.805 */
}

.trust__iso img { width: 100%; height: auto; }

.trust__iso-text {
	font-size: 3.056cqw;   /* 21.05px @688.805 */
	line-height: normal;
	color: var(--c-iso);
	white-space: nowrap;
}

.trust__label {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 8.316cqw;              /* 57.276px @688.805 */
	padding-inline: 5.091cqw;      /* 35.067px @688.805 */
	/* Figma reports 28.11px, but the Circle Label instances are scaled 0.854;
	   measured cap height in the export puts the rendered size at 24px. */
	font-size: 3.484cqw;           /* 24px @688.805 */
	line-height: 1;
	color: var(--c-white);
	white-space: nowrap;
	background: var(--c-deep);
	border-radius: 50px;
}

.trust__label--eu    { left: 30.552%; top: 1.733%; }
.trust__label--ai    { left: 25.300%; top: 89.505%; }
.trust__label--human { left: 68.785%; top: 64.980%; }
.trust__label--train { left: -1.452%; top: 65.132%; }

.trust__mark {
	position: absolute;
	left: 45.397%;
	top: 39.790%;
	width: 14.072%;    /* 96.926 / 688.805 */
	height: auto;
	color: var(--c-accent);
}

.trust__closing {
	max-width: 1070px;
	margin: 100px auto 0;
	font-size: clamp(1.0625rem, 1.157vw, 1.25rem);
	line-height: 1.6;
	font-weight: 400;
	text-align: center;
	color: var(--c-body);
}

/* ---- Built by clinic founders (Figma 40000275:21196) -------------------- */
.founders { padding-block: var(--s-80); }

.founders__title {
	/* Figma pads 8px above the heading's own line box. */
	max-width: 765px;
	margin: 0 auto;
	padding-top: 8px;
	font-size: clamp(1.875rem, 3.009vw, 3.25rem);   /* 52px @1728 */
	line-height: 1.16;                               /* 60.32px @52px */
	font-weight: 700;
	letter-spacing: -0.02em;
	text-align: center;
	color: var(--c-ink);
}

.founders__title-accent { color: var(--c-indigo); }

.founders__photo {
	width: 100%;
	/* 1320 x 612 at the design measure; scales proportionally below it so the
	   crop stays the same instead of tightening. */
	aspect-ratio: 1320 / 612;
	height: auto;
	margin-top: var(--s-48);
	object-fit: cover;
	border-radius: 20px;
}

.founders__footer {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: var(--s-48);
	padding-block: 4px;
}

.founders__body {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	font-size: clamp(1.0625rem, 1.157vw, 1.25rem);   /* 20px @1728 */
	line-height: 1.6;                                 /* 32px @20px */
	font-weight: 500;
	color: var(--c-body);
}

.founders__action { flex: 0 0 auto; width: 655px; display: flex; justify-content: flex-end; }

/* ---- Main CTA (Figma 40000319:10452) ------------------------------------ */
.cta { padding-block: var(--s-80); }

.cta__card {
	position: relative;
	container-type: inline-size;
	aspect-ratio: 1320 / 524;
	overflow: hidden;
	background: var(--c-accent);
	border-radius: 20px;
}

/* Figma's own render of the gradient wash: the hero's Component 27 stretched
   1.39 x 1.44 and rotated, which does not reproduce from the blob SVGs. */
.cta__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The framed dashboard bleeds off the card's right edge. */
.cta__shot {
	position: absolute;
	/* Figma's 14.983px stroke is outside the frame, so the visible box starts
	   14.983px up and left of the node's own origin. */
	left: 52.28%;
	top: 12.79%;
	width: 67.42%;
}

.cta__shot-frame {
	aspect-ratio: 889.888 / 651.455;
	/* 14.983px stroke sits outside a 13.029px-radius rect, so the outer radius
	   is 28.01 and CSS derives the inner one from the border width. */
	border: 1.135cqw solid var(--c-frame);
	border-radius: 2.122cqw;
	background: var(--c-frame);
}

.cta__shot-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top left;
	border-radius: 0.987cqw;
}

.cta__text {
	position: absolute;
	left: 9.09%;
	top: 50%;
	transform: translateY(-50%);
	width: 531px;
	max-width: calc(100% - 18.18%);
	color: var(--c-white);
}

.cta__title {
	margin: 0;
	font-size: clamp(1.625rem, 2.315vw, 2.5rem);   /* 40px @1728 */
	line-height: 1.2;                               /* 48px @40px */
	font-weight: 700;
	letter-spacing: -0.02em;                        /* -0.8px @40px */
	color: inherit;
}

.cta__body {
	margin: 20px 0 0;
	font-size: clamp(1rem, 1.042vw, 1.125rem);      /* 18px @1728 */
	line-height: 1.5;
	font-weight: 400;
	color: inherit;
}

.cta__buttons { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 40px; }

.cta__buttons .btn--outline {
	padding: 16px 28px;
	font-size: clamp(1rem, 1.042vw, 1.125rem);
	line-height: 24px;
	letter-spacing: -0.0222em;
	border-radius: 50px;
}

.cta__fine {
	margin: 18px 0 0;
	font-size: 0.8125rem;   /* 13px */
	line-height: normal;
	font-weight: 400;
	opacity: 0.5;
	color: inherit;
}

/* ---- Managed by Carely (Figma 40000321:17934) --------------------------- */
.managed { padding-block: var(--s-80); }

.managed__title {
	/* Figma pads 8px above the heading's own line box. */
	margin: 0;
	padding-top: 8px;
	font-size: clamp(1.875rem, 3.009vw, 3.25rem);   /* 52px @1728 */
	line-height: 1.16;                               /* 60.32px @52px */
	font-weight: 700;
	letter-spacing: -0.02em;
	text-align: center;
	color: var(--c-ink);
}

.managed__lead {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 12px;
	font-size: clamp(1.0625rem, 1.157vw, 1.25rem);   /* 20px @1728 */
	line-height: 1.6;                                 /* 32px @20px */
	font-weight: 500;
	text-align: center;
	color: var(--c-body);
}

.managed__cta { margin-top: 62px; text-align: center; }

/* Figma gives this one button its own blue, unlike every other filled CTA.
   Scoped rather than promoted to a variant — see DESIGN-NOTES palette drift. */
.managed .btn--accent { background: var(--c-blue-bright); }

/* ---- Insights (Figma 40000286:2920) ------------------------------------- */
.insights { padding-block: var(--s-80); }

.insights__head { text-align: center; }

.insights__kicker {
	margin: 0;
	padding-bottom: 8px;
	font-size: clamp(1rem, 1.042vw, 1.125rem);   /* 18px @1728 */
	line-height: 1.56;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--c-accent);
}

.insights__title {
	margin: 0;
	font-size: clamp(1.875rem, 3.009vw, 3.25rem);   /* 52px @1728 */
	line-height: 1.16;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--c-ink);
}

.insights__lead {
	max-width: 800px;
	margin: 30px auto 0;
	font-size: clamp(1.0625rem, 1.157vw, 1.25rem);
	line-height: 1.6;
	font-weight: 500;
	color: var(--c-body);
}

.insights__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-48) var(--s-24);
	margin-top: var(--s-48);
}

.insights__card {
	border: 1px solid var(--c-card-line);
	border-radius: 14px;
	overflow: hidden;
}

.insights__link { display: flex; flex-direction: column; height: 100%; color: inherit; }

.insights__media {
	display: block;
	aspect-ratio: 422 / 316;
	overflow: hidden;
	/* Posts without a featured image keep the card's proportions. */
	background: linear-gradient(135deg, var(--c-ice) 0%, var(--c-ice-2) 100%);
}

.insights__media img { width: 100%; height: 100%; object-fit: cover; }

/* Posts with no featured image get the brand mark on the gradient above. Must
   live here, not in a page-scoped stylesheet: this partial also renders on the
   front page, on single posts as "Related Posts", and on the Insights page. */
.insights__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.insights__placeholder-mark {
	width: 22%;
	max-width: 96px;
	height: auto;
	color: var(--c-ice-ink);
	opacity: 0.32;
}

.insights__body { display: block; padding: var(--s-24); }

.insights__tag {
	display: inline-flex;
	align-items: center;
	padding: 8px 12px;
	font-size: var(--fs-body);
	line-height: 24.32px;
	font-weight: 500;
	text-transform: capitalize;
	border-radius: var(--radius-2);
}

/* Figma tints each tag's own colour at 12%. */
.insights__tag--amber  { color: var(--c-tag-amber);   background: rgba(249, 166, 3, 0.12); }
.insights__tag--purple { color: var(--c-tag-purple);  background: rgba(209, 92, 254, 0.12); }
.insights__tag--blue   { color: var(--c-blue-bright); background: rgba(5, 102, 234, 0.12); }

.insights__text { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }

.insights__post-title {
	font-size: clamp(1.25rem, 1.389vw, 1.5rem);   /* 24px @1728 */
	line-height: 1.34;                             /* 32.16px @24px */
	font-weight: 700;
	color: var(--c-ink);
}

.insights__date {
	font-size: clamp(1rem, 1.042vw, 1.125rem);
	line-height: 1.56;
	font-weight: 500;
	color: var(--c-body);
}

.insights__card:hover,
.insights__card:focus-within { border-color: var(--c-accent); }

.insights__cta { margin-top: var(--s-48); text-align: right; }

.insights__more {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: clamp(1rem, 1.042vw, 1.125rem);
	line-height: 24px;
	font-weight: 500;
	letter-spacing: -0.0222em;
	color: var(--c-accent);
}

.insights__more img { width: 15px; height: 19px; transition: transform 0.25s var(--ease); }
.insights__more:hover img { transform: translateX(3px); }

/* ---- Newsletter (Figma 40000598:141542) --------------------------------- */
.mailing { padding-block: var(--s-80); }

.mailing__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: var(--s-80) clamp(24px, 6.94vw, var(--s-120));
	text-align: center;
	background: var(--c-mail-bg);
	border-bottom: 1px solid var(--c-mail-line);
	border-radius: 20px;
}

.mailing__head { display: flex; flex-direction: column; gap: var(--s-16); max-width: 720px; }

.mailing__title {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-16);
	margin: 0;
	font-size: clamp(1.5rem, 1.852vw, 2rem);   /* 32px @1728 */
	line-height: normal;
	font-weight: 700;
	letter-spacing: -0.03em;                    /* -0.96px @32px */
	color: var(--c-ink);
}

/* Figma fills this run with the brand peach->purple->blue ramp as an image;
   a two-stop CSS gradient misses it by ~45/255, so the export is used. */
.mailing__title-accent {
	background-image: url("../img/mail-headline.png");
	background-size: cover;
	background-position: center;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.mailing__lead {
	margin: 0;
	font-size: var(--fs-body);   /* 16px */
	line-height: 1.6;
	font-weight: 400;
	color: var(--c-blue-900);
}

.mailing__form { width: 420px; max-width: 100%; }

/* The submit is centred on this, not on the form, so the status line below
   cannot push it off-centre. */
.mailing__field { position: relative; }

.mailing__input {
	width: 100%;
	height: 60px;
	padding: 16px 150px 16px 30px;
	font-family: inherit;
	font-size: clamp(1rem, 1.042vw, 1.125rem);   /* 18px @1728 */
	font-weight: 500;
	color: var(--c-ink);
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: 1000px;
}

.mailing__input::placeholder { color: var(--c-sub); opacity: 1; }

.mailing__submit {
	position: absolute;
	right: 7px;
	top: 50%;
	transform: translateY(-50%);
	padding: 9px 22px;
	font-family: inherit;
	font-size: clamp(1rem, 1.042vw, 1.125rem);
	line-height: 28.08px;
	font-weight: 700;
	color: var(--c-white);
	background: var(--c-accent);
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background-color 0.25s var(--ease);
}

.mailing__submit:hover { background: var(--c-accent-ink); }

/* Inside the form now, so one JS module can scope to it and the message sits
   with the field it describes. Empty until there is something to say. */
.mailing__status { margin: 12px 0 0; font-size: var(--fs-small); font-weight: 500; text-align: left; }
.mailing__status:empty { display: none; }
.mailing__status.is-ok { color: var(--c-ok); }
.mailing__status.is-error { color: #b4232a; }

.site-footer__status { margin: 0; font-size: var(--fs-small); font-weight: 500; }
.site-footer__status:empty { display: none; }
.site-footer__status.is-ok { color: #7ee2b0; }
.site-footer__status.is-error { color: #ffb4b4; }

/* Confirmed state, shared by both subscribe buttons. */
.mailing__submit.is-subscribed,
.site-footer__submit.is-subscribed {
	background: var(--c-ok);
	cursor: default;
	opacity: 1;
}

.mailing__submit.is-subscribed:hover,
.site-footer__submit.is-subscribed:hover { background: var(--c-ok); }

.mailing__input[aria-invalid="true"],
.site-footer__input[aria-invalid="true"] { outline: 2px solid #b4232a; outline-offset: 1px; }

.mailing__notes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-16);
	margin: 0;
	font-size: 0.8125rem;   /* 13px */
	line-height: normal;
	color: var(--c-blue-900);
}

.mailing__note { display: inline-flex; align-items: center; gap: 6px; opacity: 0.8; }
.mailing__icon { width: 14px; height: 14px; color: var(--c-accent); }
.mailing__sep { opacity: 0.3; }

/* ---- FAQ (Figma 40000319:3032) ------------------------------------------ */
.faq { padding-block: var(--s-80); }

.faq__kicker {
	margin: 0;
	font-size: clamp(1rem, 1.042vw, 1.125rem);   /* 18px @1728 */
	line-height: 1.56;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--c-accent);
}

.faq__title {
	/* Figma pads 8px above the heading's own line box. */
	margin: 0;
	padding-top: 8px;
	font-size: clamp(1.875rem, 3.009vw, 3.25rem);   /* 52px @1728 */
	line-height: 1.16;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--c-ink);
}

.faq__list { width: 920px; max-width: 100%; margin: var(--s-48) auto 0; }

.faq__item { border-bottom: 1.5px solid var(--c-line); }

/* Figma marks the open row with the bright blue rule. */
.faq__item[open] { border-bottom-color: var(--c-blue-bright); }

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-24);
	padding-block: var(--s-32);
	font-size: clamp(1.0625rem, 1.157vw, 1.25rem);   /* 20px @1728 */
	line-height: 1.24;                                /* 24.8px @20px */
	font-weight: 700;
	letter-spacing: -0.004em;                         /* -0.08px @20px */
	color: var(--c-ink);
	cursor: pointer;
	list-style: none;
}

.faq__question::-webkit-details-marker { display: none; }

.faq__chevron {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: var(--c-ink);
	transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}

.faq__item[open] .faq__chevron { transform: rotate(180deg); color: var(--c-blue-bright); }

/* Figma clips the answer to 100px, cutting mid-sentence; shown in full here. */
.faq__answer { max-width: 660px; padding-bottom: var(--s-32); }

.faq__answer p {
	margin: 0;
	font-size: clamp(1rem, 1.042vw, 1.125rem);   /* 18px @1728 */
	line-height: 1.56;                            /* 28.08px @18px */
	font-weight: 500;
	color: var(--c-body);
}

/* The question's own bottom padding already supplies the gap above the answer. */
.faq__item[open] .faq__question { padding-bottom: 0; }
.faq__item[open] .faq__answer { padding-top: var(--s-16); }

/* Open and close the answer instead of snapping it.

   ::details-content is the box the UA wraps everything after <summary> in, so
   it can be made a grid and its single row animated from 0fr to 1fr — that
   interpolates natively, where height 0 -> auto would need interpolate-size.
   The track has to be minmax(0, Nfr): a bare 0fr keeps an automatic min-content
   minimum, so the panel does not actually collapse (verified both ways).
   content-visibility has to ride along with allow-discrete, or the UA hides
   the content at once and only the opening animates.

   Browsers without ::details-content keep today's instant toggle and still
   get the fade below, so nothing depends on this. */
.faq__item::details-content {
	display: grid;
	grid-template-rows: minmax(0, 0fr);
	overflow: hidden;
	transition: grid-template-rows 0.32s var(--ease), content-visibility 0.32s allow-discrete;
}

.faq__item[open]::details-content { grid-template-rows: minmax(0, 1fr); }

/* Lets the row actually reach 0. */
.faq__answer { min-height: 0; opacity: 0; transition: opacity 0.22s var(--ease); }

/* Held back until the panel is most of the way open. */
.faq__item[open] .faq__answer { opacity: 1; transition-delay: 0.1s; }

.faq__note {
	margin: var(--s-48) 0 0;
	font-size: clamp(1rem, 1.042vw, 1.125rem);
	line-height: 1.56;
	font-weight: 500;
	text-align: center;
	color: var(--c-body);
}

.faq__note a { color: var(--c-accent); text-decoration: underline; }

/* ---- Footer (Figma 40000324:20414) -------------------------------------- */
.site-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 556px;
	padding-top: var(--s-80);
	padding-bottom: 60px;
	overflow: hidden;
	background: var(--c-blue-900);
	color: var(--c-white);
}

.site-footer__inner {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--s-64);
}

.site-footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-48); }

.site-footer__brand {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--s-48);
	align-self: stretch;
	max-width: 420px;
}

.site-footer__logo { display: inline-flex; align-items: center; gap: 18.089px; color: inherit; }

.site-footer__mark { width: 54.266px; height: 54.266px; color: var(--c-white); }

.site-footer__wordmark {
	font-size: clamp(2rem, 2.406vw, 2.598rem);   /* 41.572px @1728 */
	line-height: 1.143;                           /* 47.511px @41.572px */
	font-weight: 700;
	letter-spacing: -0.0208em;
}

.site-footer__form { display: flex; flex-direction: column; gap: 8px; width: 420px; max-width: 100%; }

.site-footer__form-label {
	font-size: clamp(1rem, 1.042vw, 1.125rem);   /* 18px @1728 */
	line-height: 1.56;
	font-weight: 700;
}

.site-footer__field { position: relative; }

.site-footer__input {
	width: 100%;
	height: 60px;
	padding: 16px 150px 16px 31px;
	font-family: inherit;
	font-size: clamp(1rem, 1.042vw, 1.125rem);
	font-weight: 500;
	color: var(--c-ink);
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: 1000px;
}

.site-footer__input::placeholder { color: var(--c-sub); opacity: 1; }

.site-footer__submit {
	position: absolute;
	right: 11px;
	top: 50%;
	transform: translateY(-50%);
	padding: 9px 22px;
	font-family: inherit;
	font-size: clamp(1rem, 1.042vw, 1.125rem);
	line-height: 28.08px;
	font-weight: 700;
	color: var(--c-white);
	background: var(--c-accent);
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background-color 0.25s var(--ease);
}

.site-footer__submit:hover { background: var(--c-accent-ink); }

.site-footer__cols {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-32);
	width: 710px;
	max-width: 100%;
}

.site-footer__col { flex: 1 1 0; min-width: 0; }

.site-footer__col-title {
	margin: 0;
	font-size: clamp(1rem, 1.042vw, 1.125rem);
	line-height: 1.56;                            /* 28.08px @18px */
	font-weight: 700;
}

.site-footer__links { display: flex; flex-direction: column; gap: var(--s-16); padding-top: var(--s-24); }

/* Block-level flex, not inline-flex: as inline content the <li>'s own line-box
   strut pads each row and the 34px rhythm becomes 40px. */
.site-footer__links a,
.site-footer__links .site-footer__consent,
.site-footer__contact a,
.site-footer__place {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: clamp(1rem, 1.042vw, 1.125rem);
	font-weight: 500;
	color: inherit;
}

.site-footer__links a,
.site-footer__links .site-footer__consent { line-height: 1; }   /* 18px @18px */

.site-footer__links a:hover,
.site-footer__links .site-footer__consent:hover,
.site-footer__contact a:hover { text-decoration: underline; }

.site-footer__contact { display: flex; flex-direction: column; gap: var(--s-16); flex: 0 0 auto; }

.site-footer__contact a,
.site-footer__place { line-height: 1.48; }   /* 26.64px @18px */

.site-footer__icon { flex: 0 0 auto; width: 20px; height: 20px; }
.site-footer__icon--lg { width: 24px; height: 24px; }

.site-footer__bottom { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-24); padding-top: 15px; }

.site-footer__bottom p {
	margin: 0;
	font-size: var(--fs-body);   /* 16px */
	line-height: 1.52;            /* 24.32px @16px */
	font-weight: 400;
}

/* ---- Reveal on scroll --------------------------------------------------- */
/* Scoped to .js (set inline in <head>) so a no-JS visitor sees the resting
   state and there is no flash of hidden content. */
/* Defaults are Osmo's: 2em of travel over 0.8s on power4.inOut. Sections
   override per-block by setting these variables on any ancestor. */
.js [data-reveal],
.js [data-reveal-stagger] > * {
	opacity: 0;
	transform: translateY(var(--reveal-y, 2em));
}

.js [data-reveal].is-revealed,
.js [data-reveal-stagger] > .is-revealed {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--reveal-dur, 0.8s) var(--reveal-ease, var(--ease-reveal)) var(--reveal-d, 0ms),
		transform var(--reveal-dur, 0.8s) var(--reveal-ease, var(--ease-reveal)) var(--reveal-d, 0ms);
}

/* ---- Responsive --------------------------------------------------------- */

/* Below the widest measure the 743px photo stops fitting beside the features. */
@media (max-width: 1568px) {
	.advantage__grid { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); align-items: stretch; }
	.advantage__features { height: auto; }
	.advantage__photo { width: 100%; height: auto; min-height: 420px; align-self: stretch; }
	.advantage__features {
		--adv-pad-y: clamp(24px, 3.1vw, 54px);
		--adv-pad-x: clamp(24px, 2.5vw, 44px);
		--adv-gap-y: clamp(20px, 2.1vw, 36px);
	}
}


/* The chips are anchored to the 1728px design centre, so they leave the viewport
   one by one as it narrows. Drop each just before it would clip. */
@media (max-width: 1400px) {
	.hero__chip--continuity { display: none; }
}

/* Below the design measure the card's fixed 490 + 704 columns stop fitting. */
@media (max-width: 1360px) {
	.record__panel {
		grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
		padding: 40px clamp(24px, 4.6vw, 62.82px);
	}
	.record__text { padding-right: clamp(16px, 2.9vw, 40px); }

	/* A fixed 655px action column leaves the paragraph too narrow here. */
	.founders__action { width: auto; }

	/* Below the design measure the card can no longer hold the copy at a fixed
	   ratio, so it grows with the text and the screenshot just keeps bleeding. */
	.cta__card { aspect-ratio: auto; }
	.cta__text {
		position: relative;
		/* left/top must be reset too: as a relative offset, left:9.09% would
		   shove a full-width box off the card instead of positioning it. */
		left: auto;
		top: auto;
		transform: none;
		width: auto;
		/* margin, not padding: padding would come out of max-width and squeeze
		   the buttons onto two rows. */
		margin-left: 9.09%;
		max-width: 44%;
		padding-block: var(--s-64);
	}
	.record__figure img { width: 100%; }
	.record__card,
	.record__card--1,
	.record__card--2,
	.record__card--3 { height: auto; }
}

@media (max-width: 1300px) {
	.hero__chip--premium, .hero__chip--treatment { display: none; }
}

/* Brand + centred nav + CTA stop fitting on one pill here. */
@media (max-width: 1280px) {
	.nav { display: none; }
	.nav-toggle { display: flex; margin-left: auto; }
	.site-header__cta { display: none; }
	.site-header__pill { padding-right: var(--s-16); }
}

@media (max-width: 1120px) {
	.hero__chip, .hero__avatar { display: none; }

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

	.site-footer__top { flex-direction: column; }
	.site-footer__brand { max-width: none; align-self: auto; }
	.site-footer__cols { width: 100%; }

	.advantage__grid { grid-template-columns: minmax(0, 1fr); }
	.advantage__photo { width: 100%; height: clamp(300px, 46vw, 560px); min-height: 0; align-self: auto; }
	.advantage__lead { margin-top: var(--s-32); }
}

/* The 540px description column stops leaving room for the heading. */
@media (max-width: 900px) {
	.outcomes__inner { gap: var(--s-48); }
	.outcomes__row { grid-template-columns: 1fr; gap: var(--s-16); min-height: 0; }
	.outcomes__desc { max-width: 62ch; }

	/* Side-by-side text and illustration stop working; stack them and drop the
	   sticky pile, which reads badly once the cards are tall. */
	.record__card { position: static; padding-top: 0; filter: none; box-shadow: var(--shadow-card); border-radius: 20px; }
	.record__card + .record__card { margin-top: var(--s-24); }
	/* Plain block flow, not a one-column grid: the grid's fr row is sized
	   against an indefinite height and collapses, and the opaque illustration
	   then paints over the overflowing copy. */
	.record__panel { display: block; height: auto; padding: var(--s-24); }
	.record__text { padding-right: 0; }
	.record__figure { margin-top: var(--s-24); }
	.record__cards { margin-top: 0; padding-top: var(--s-32); }
	.record__cta { margin-top: var(--s-48); }

	.cta__shot { display: none; }
	.cta__text { margin-left: 0; max-width: none; padding: var(--s-48) var(--s-32); }

	.trust__diagram { margin-top: var(--s-64); }
	.trust__closing { margin-top: var(--s-64); }

	.founders__footer { flex-direction: column; align-items: flex-start; gap: var(--s-32); }
	.founders__action { width: 100%; justify-content: flex-start; }

	/* Three 424px cards need the full 1320px measure. */
	.challenge__cards { grid-template-columns: 1fr; }
	.challenge__card { min-height: 0; }
	/* Without the 320px card, space-between no longer separates the footnote. */
	.challenge__card-body { gap: var(--s-24); }

	/* Figma's pinned stat widths only add up at the design measure. */
	.case__stat:nth-child(1),
	.case__stat:nth-child(2),
	.case__stat:nth-child(3) { width: auto; flex: 1 1 180px; }
	.case__label { max-width: 240px; }
}

@media (max-width: 720px) {
	/* Figma's line break is cut for the desktop measure; let it reflow instead. */
	.statement__text br { display: none; }

	.case__stats { margin-top: var(--s-48); gap: var(--s-32); }
	.advantage { padding-block: var(--s-80); }
	.trust { padding-block: var(--s-80); }
	.founders { padding-block: var(--s-64); }
	.managed { padding-block: var(--s-64); }
	.insights { padding-block: var(--s-64); }
	.mailing { padding-block: var(--s-64); }
	.faq { padding-block: var(--s-64); }
	.site-footer { min-height: 0; padding-top: var(--s-64); padding-bottom: var(--s-48); }
	.site-footer__inner { gap: var(--s-48); }
	.site-footer__cols { flex-wrap: wrap; gap: var(--s-32); }
	.site-footer__col { flex: 1 1 45%; }
	.site-footer__contact { flex: 1 1 100%; }
	.site-footer__bottom { flex-direction: column; gap: var(--s-16); }
	.faq__list { margin-top: var(--s-32); }
	.faq__question { padding-block: var(--s-24); }
	.faq__note { margin-top: var(--s-32); }
	.mailing__card { padding-block: var(--s-48); gap: var(--s-32); }
	.insights__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-32); }
	.insights__cta { text-align: left; }
	.managed__cta { margin-top: var(--s-48); }
	.founders__photo { margin-top: var(--s-32); border-radius: 14px; }
	.founders__footer { margin-top: var(--s-32); }
	.trust__lead { margin-top: var(--s-16); }
	.trust__diagram { margin-top: var(--s-48); }
	.trust__closing { margin-top: var(--s-48); }
	.advantage__pin { margin-top: var(--s-48); }
	.advantage__cta { margin-top: var(--s-48); }
	.challenge { padding-block: var(--s-80); }
	.challenge__card { padding: var(--s-24); }
	.challenge__lead { margin-top: var(--s-24); }
	.challenge__closing { margin-top: var(--s-48); }
	/* Too little width left to crop the graph; show all of it. */
	.case__graph { margin-top: var(--s-64); aspect-ratio: 1376 / 479; }

	.hero { gap: 40px; }
	.hero__text { gap: 40px; }
	.hero__lead { margin-top: 20px; }
	.hero__buttons { width: 100%; flex-direction: column; gap: 12px; }
	.hero__buttons .btn { width: 100%; padding-inline: 24px; }
	.hero__shot-frame { border-width: 10px; border-radius: 26px; top: 4px; }
	.hero__shot-frame::after { border-radius: 16px; }
	.hero__shot-frame img { border-radius: 16px; }
	.hero__bg { height: 900px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
	/* ::details-content is not matched by the universal selector above. */
	details::details-content { transition-duration: 0.001ms !important; }

	/* Resting state outright, so nothing depends on the observer firing. */
	.js [data-reveal],
	.js [data-reveal-stagger] > * { opacity: 1; transform: none; }

	/* The hero background motion is switched off rather than sped up. The rule
	   above only shortens durations, which leaves an `infinite` animation
	   looping thousands of times a second — busywork the compositor does
	   forever for someone who asked for less movement. `transform` is left
	   alone: it carries the -50% centring on three of the chips. */
	.hero__avatar,
	.hero__chip,
	.hero__chip-dot {
		animation: none;
		opacity: 1;
		translate: none;
		scale: none;
	}
}

/* ---- Cookie consent (inc/consent.php) ----------------------------------- */
/* Not a Figma frame — built from the site's own tokens. A bottom-left card
   rather than a full-width bar: it has to be noticeable without behaving like
   a cookie wall, so it never covers the content or blocks interaction. */
.consent {
	position: fixed;
	left: var(--s-24);
	bottom: var(--s-24);
	z-index: 200;
	width: min(420px, calc(100vw - 2 * var(--s-24)));
}

.consent__box {
	max-height: min(70vh, 640px);
	overflow-y: auto;
	padding: var(--s-24);
	border: 1px solid var(--c-line);
	border-radius: 20px;
	background: var(--c-white);
	box-shadow: 0 18px 48px rgba(35, 37, 44, 0.16);
}

.consent__title {
	margin: 0;
	font-size: 1.125rem;                              /* 18px */
	line-height: 1.45;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--c-ink);
}

.consent__text {
	margin: 8px 0 0;
	font-size: 0.9375rem;                             /* 15px */
	line-height: 1.6;
	font-weight: 400;
	color: var(--c-body);
}

.consent__policy { color: var(--c-accent); text-decoration: underline; }

/* Layer two. */
.consent__details {
	margin-top: var(--s-16);
	padding-top: var(--s-16);
	border-top: 1px solid var(--c-line);
}

.consent__cat + .consent__cat { margin-top: var(--s-16); }

.consent__cat-head {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.consent__cat-head:has(.consent__check:disabled) { cursor: default; }

.consent__check { width: 16px; height: 16px; margin: 0; accent-color: var(--c-accent); }

.consent__cat-title {
	font-size: 0.9375rem;
	line-height: 1.5;
	font-weight: 700;
	color: var(--c-ink);
}

.consent__always {
	margin-left: auto;
	font-size: 0.75rem;                               /* 12px */
	line-height: 1.6;
	font-weight: 500;
	color: var(--c-muted);
}

.consent__cat-body {
	margin: 4px 0 0 26px;
	font-size: 0.8125rem;                             /* 13px */
	line-height: 1.55;
	color: var(--c-body);
}

/* Accept and reject are the same control, deliberately: refusing must not be
   visually discouraged relative to agreeing. */
.consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--s-24);
}

.consent__btn {
	flex: 1 1 auto;
	padding: 11px 16px;
	border: 1px solid var(--c-accent);
	border-radius: 100px;
	background: var(--c-accent);
	font: inherit;
	font-size: 0.9375rem;
	line-height: 1.2;
	font-weight: 700;
	color: var(--c-white);
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.consent__btn:hover { opacity: 0.88; }

.consent__btn--ghost {
	flex: 0 0 auto;
	border-color: var(--c-line);
	background: transparent;
	color: var(--c-body);
}

.consent__btn--save { flex: 1 1 100%; }

/* The footer's withdrawal control, styled as the links beside it. */
/* A button so it can reopen the panel in place, styled as the links beside it
   (it joins their shared selectors above for the type ramp). */
.site-footer__consent {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	color: inherit;
	cursor: pointer;
	text-align: left;
}

@media (max-width: 600px) {
	.consent {
		left: var(--s-16);
		right: var(--s-16);
		bottom: var(--s-16);
		width: auto;
	}
	.consent__box { padding: var(--s-16); }
	.consent__btn { flex: 1 1 100%; }
}