/* =========================================================================
   Platform — sections unique to template-platform.php.

   Same conventions as main.css and journey.css: one banner-comment block per
   section, tokens and container measures from main.css's :root, BEM names.
   Sections the home page shares (managed, main CTA, FAQ) are styled in
   main.css and only overridden here if the Platform instance differs.
   ========================================================================= */

:root {
	/* Platform-only additions. Kept here rather than in main.css so the two
	   pages being built in parallel do not contend over one file. */
	--c-plat-rose: #ce85aa;   /* Platform hero heading accent */
	--c-plat-slate: #6b7280;  /* Platform feature body copy — a sixth grey */
	--c-plat-panel: #f5f8ff;  /* Marketing diagram panel — NOT --c-ice #f5f9fe */
}

/* ---- Platform hero (Figma 40000371:48878) ------------------------------- */
.phero {
	position: relative;
	isolation: isolate;
	padding-block: clamp(7rem, 12.96vw, 14rem) var(--s-80);   /* 224px @1728 */
	overflow: hidden;
	background: var(--c-white);
}

/* Figma composes this from the home hero's four blob SVGs, rotated and masked
   into a different arrangement and clipped at 694px. Rebuilt as a flat export
   from Figma's render of THIS section, with the text gutter inpainted — see
   DESIGN-NOTES. */
.phero__bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
	height: 694px;
	overflow: hidden;
	pointer-events: none;
}

/* Same treatment as journey.css: scales with the viewport past the 1728px
   design width so the wash never ends in a hard edge; below it the render
   stays centred and is cropped. */
.phero__bg img {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	min-width: 1728px;
	max-width: none;
	height: auto;
}

.phero__inner { display: flex; flex-direction: column; align-items: center; gap: 50px; }

.phero__text { display: flex; flex-direction: column; gap: 30px; width: 764px; max-width: 100%; }

.phero__head { display: flex; flex-direction: column; gap: 20px; }

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

.phero__title {
	margin: 0;
	font-size: var(--fs-h1);                      /* 64px @1728 */
	line-height: 1.12;                            /* 71.68px @64px */
	font-weight: 700;
	letter-spacing: -0.03em;                      /* -1.92px @64px */
	text-align: center;
	color: var(--c-ink);
}

.phero__title-accent { color: var(--c-plat-rose); }

.phero__lead {
	margin: 0;
	padding-top: 12px;
	font-size: clamp(1rem, 1.042vw, 1.125rem);
	line-height: 1.56;                            /* 28.08px @18px */
	font-weight: 500;
	text-align: center;
	color: var(--c-body);
}

.phero__actions { display: flex; flex-direction: column; align-items: center; gap: 20px; }

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

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

/* ---- Relationship layer (Figma 40000321:10478) -------------------------- */
.player { padding-block: var(--s-80); }

/* 610 + 100 gap + 610 = the 1320 measure. The left column is shorter and
   Figma centres it against the illustration. */
.player__grid {
	display: grid;
	grid-template-columns: 610px 610px;
	gap: 100px;
	align-items: center;
}

/* Figma nests these: 24px between heading and body, 50px before the link. */
.player__text { display: flex; flex-direction: column; gap: 50px; align-items: flex-start; }

/* The 12px top pad is Figma's; without it the column is 338 not 350 tall and
   the grid's vertical centring lands 6px off. */
.player__copy { display: flex; flex-direction: column; gap: var(--s-24); padding-top: 12px; }

.player__title {
	/* Figma holds the heading to 430px inside the 610px column. */
	max-width: 430px;
	margin: 0;
	font-size: clamp(1.5rem, 1.852vw, 2rem);   /* 32px @1728 */
	line-height: 1.24;                          /* 39.68px @32px */
	font-weight: 700;
	letter-spacing: -0.03em;                    /* -0.96px @32px */
	color: var(--c-ink);
}

.player__body { display: flex; flex-direction: column; gap: 0; }

.player__body p {
	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);
}

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

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

.player__iso { width: 100%; height: auto; }

/* ---- Experience that differentiates (Figma 40000598:142227) ------------- */
/* Block A of section 3. Figma pads the section 120px top and bottom and leaves
   180px between its three blocks, so each block carries half of that gap. */
.pexp { padding-top: var(--s-120); padding-bottom: 90px; }

.pexp__head {
	display: flex;
	flex-direction: column;
	gap: var(--s-24);
	width: 800px;
	max-width: 100%;
}

.pexp__title {
	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);
}

.pexp__lead {
	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);
}

.pexp__grid { display: flex; flex-direction: column; gap: var(--s-24); margin-top: var(--s-48); }

.pexp__row { display: flex; gap: var(--s-24); }

/* --grow carries the Figma column width (747/549 then 535/761), so the ratios
   stay exact without percentage arithmetic against the 24px gutter. */
.pexp__card {
	position: relative;
	flex-grow: 0;
	flex-shrink: 0;
	/* 747+549 and 535+761 both total 1296, the row minus its one 24px gutter. */
	flex-basis: calc((100% - var(--s-24)) * var(--grow) / 1296);
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	min-height: 440px;
	padding: 56px 52px 46px;
	border: 1px solid var(--c-line);
	border-radius: 20px;
	background: var(--c-ice);
	overflow: clip;
}

/* Out of flow, so the card's flex flow bottom-aligns the text and the artwork
   sits under it. It only scales down once the card is narrower than the export. */
.pexp__ill {
	position: absolute;
	top: var(--ill-top);
	left: 50%;
	transform: translateX(-50%);
	max-width: 100%;
	height: auto;
}

/* Positioned, so it paints above the absolute illustration the way Figma's
   paint order does — on cards 2 and 3 the title overlaps the artwork. */
.pexp__text {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	text-align: center;
}

.pexp__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;
	color: var(--c-ink);
}

.pexp__card-body {
	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);
}

/* ---- Marketing that proves itself (Figma 40000598:144420) --------------- */
/* Block B of section 3, so it carries half of the 180px gap on both sides. */
.pmkt { padding-block: 90px; }

/* 610 + 100 + 610 = the 1320 measure. Both columns are 556 tall in Figma and
   top-aligned, unlike .player__grid which centres its short column. */
.pmkt__grid {
	display: grid;
	grid-template-columns: 610px 610px;
	gap: 100px;
	align-items: start;
}

/* Figma's 12px top pad on the head group. */
.pmkt__copy { padding-top: 12px; }

.pmkt__title {
	/* Held to 430px inside the 610px column, same as .player__title. */
	max-width: 430px;
	/* 12px bottom pad on the heading's margin box + 12px group gap. */
	margin: 0 0 var(--s-24);
	font-size: clamp(1.5rem, 1.852vw, 2rem);   /* 32px @1728 */
	line-height: 1.25;                          /* Figma renders a 40px line box */
	font-weight: 700;
	letter-spacing: -0.03em;                    /* -0.96px @32px */
	color: var(--c-ink);
}

.pmkt__lead {
	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);
}

.pmkt__features { display: flex; flex-direction: column; gap: 36px; padding-top: 40px; }

.pmkt__feature { display: flex; flex-direction: column; gap: 8px; }

.pmkt__feature-title {
	margin: 0;
	font-size: clamp(1.0625rem, 1.157vw, 1.25rem);   /* 20px @1728 */
	/* Figma authors `normal` but renders a 24px line box at 20px. */
	line-height: 1.2;
	font-weight: 700;
	color: var(--c-ink);
}

.pmkt__feature-body {
	margin: 0;
	font-size: var(--fs-body);   /* 16px */
	/* Figma authors 1.6 but renders 26px lines (52 = 2x26, 78 = 3x26). */
	line-height: 1.625;
	font-weight: 400;
	color: var(--c-plat-slate);
}

/* --- the diagram ---
   One flat export at the panel's own 610x556, so it scales as one piece. */
.pmkt__viz {
	width: 100%;
	height: auto;
	align-self: start;
}

/* ---- Relationships that compound (Figma 40000598:144449) ---------------- */
/* Block C, the section's last, so it carries half the 180px block gap on top
   and Figma's 120px section padding at the bottom. */
.prel { padding-top: 90px; padding-bottom: var(--s-120); }

/* Mirrors .pmkt__grid. The copy is first in the DOM — see the partial — and is
   placed into column 2, so the visual sits left without reversing the stacked
   reading order. The visual is 484 tall against the copy's 714 and Figma
   offsets it by exactly half the difference, so centring reproduces it. */
.prel__grid {
	display: grid;
	grid-template-columns: 610px 610px;
	gap: 100px;
	align-items: center;
}

.prel__viz { grid-column: 1; grid-row: 1; width: 100%; height: auto; }
.prel__copy { grid-column: 2; grid-row: 1; padding-top: 12px; }

.prel__title {
	max-width: 430px;
	margin: 0 0 var(--s-24);
	font-size: clamp(1.5rem, 1.852vw, 2rem);   /* 32px @1728 */
	line-height: 1.25;                          /* Figma renders a 40px line box */
	font-weight: 700;
	letter-spacing: -0.03em;                    /* -0.96px @32px */
	color: var(--c-ink);
}

.prel__lead {
	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);
}

.prel__features { display: flex; flex-direction: column; gap: 36px; padding-top: 40px; }

.prel__feature { display: flex; flex-direction: column; gap: 8px; }

.prel__feature-title {
	margin: 0;
	font-size: clamp(1rem, 1.042vw, 1.125rem);   /* 18px @1728 — block B uses 20px */
	/* Figma authors `normal` but renders a 22px line box at 18px. */
	line-height: 1.2222;
	font-weight: 700;
	color: var(--c-ink);
}

.prel__feature-body {
	margin: 0;
	font-size: var(--fs-body);   /* 16px */
	line-height: 1.625;          /* Figma renders 26px lines (52 = 2x26, 78 = 3x26) */
	font-weight: 400;
	color: var(--c-plat-slate);
}

/* main.css:93 tracks every h1-h4 at -0.02em, but Figma authors no tracking on
   these smaller headings — at 20px that is -0.4px a character, which rendered
   the titles ~4.5% narrow. One rule, since it is one cause. */
.pexp__card-title,
.pmkt__feature-title,
.prel__feature-title { letter-spacing: normal; }

/* ---- Trust / section 4 (Figma 40000542:129694) -------------------------- */
/* The section itself is the home page's `trust` partial, reused with $args, and
   is already styled in main.css: ice band, 120px padding, the 1070px closing
   paragraph at margin-top 100px, and `.btn--outline-accent` matches Figma's
   button exactly (1.5px accent hairline, 17/36 padding, 50px radius, 20px bold
   at -0.4px tracking). Only the gap under the paragraph is new.

   It lives here rather than in main.css because the button is Platform-only and
   main.css is being edited in parallel. Move it to the `.trust` block in
   main.css once that settles. */
.trust__cta { margin-top: 62px; text-align: center; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1240px) {
	.prel__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-48); }

	/* The two fixed 610px columns plus a 100px gutter stop fitting. */
	.pmkt__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-48); }

	/* Asymmetric columns stop reading once they are this narrow. */
	.pexp__card { flex-basis: calc((100% - var(--s-24)) / 2); }

	/* The two fixed 610px columns plus a 100px gap stop fitting. */
	.player__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-48); }
	.player__text { gap: var(--s-32); }
	.player__copy { gap: var(--s-16); }
}

@media (max-width: 900px) {
	.prel { padding-top: var(--s-64); padding-bottom: var(--s-80); }
	/* Single column: let the copy fall back to DOM order, ahead of the visual. */
	.prel__grid { grid-template-columns: minmax(0, 1fr); }
	.prel__copy, .prel__viz { grid-column: auto; grid-row: auto; }
	.prel__title { max-width: none; }
	.prel__viz { max-width: 610px; }

	.pmkt { padding-block: var(--s-64); }
	.pmkt__grid { grid-template-columns: minmax(0, 1fr); }
	.pmkt__title { max-width: none; }
	/* Keep the diagram legible rather than letting it fill a phone's width. */
	.pmkt__viz { max-width: 610px; justify-self: center; }

	.pexp { padding-top: var(--s-80); padding-bottom: var(--s-64); }
	.pexp__row { flex-direction: column; }

	/* Stacked: the artwork rejoins the flow above the text, so the fixed row
	   height and the absolute offset both go. */
	.pexp__card {
		min-height: 0;
		justify-content: flex-start;
		gap: var(--s-24);
		padding: var(--s-32) var(--s-24);
	}

	.pexp__ill { position: static; transform: none; }

	.player__grid { grid-template-columns: minmax(0, 1fr); }
	.player__title { max-width: none; }
	.player__iso { max-width: 610px; }

	.phero__inner { gap: var(--s-32); }
	.phero__text { gap: var(--s-24); }
}

@media (max-width: 720px) {
	/* `.btn` is `white-space: nowrap` and this label is long: left alone it is
	   425px wide and pushes the document's scroll width to 441 on a 390 viewport. */
	.trust__cta .btn { white-space: normal; max-width: 100%; text-align: center; }

	.player { padding-block: var(--s-64); }

	.phero__bg { height: 520px; }
	.phero__buttons { width: 100%; flex-direction: column; }
	.phero__buttons .btn { width: 100%; }
}