/* =============================================================================
   OutreachPortal — landing page

   The palette is the app's own dark theme, copied token for token from
   OutreachPortal/public/pages/assets/css/impact.css and kept under the same
   names (--ip-*), so a colour here can be checked against the app line by
   line. When the app's palette changes, change it here too.

   Landing-only values — display type sizes, section spacing, the effects the
   app is too dense to want — are --lp-*, so it is always clear which values
   are ours and which are borrowed.
   ============================================================================= */

@font-face {
	font-family: Manrope;
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: Manrope;
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* --- The app's dark theme (impact.css, :root[data-theme="dark"]) --- */
	--ip-bg:            #0e1112;
	--ip-canvas:        #080808;
	--ip-surface:       #171b1d;
	--ip-surface-sunk:  #1c2123;
	--ip-header-bg:     rgba(14, 17, 18, 0.72);
	--ip-ink:           #eef1f0;
	--ip-ink-soft:      #dee3e2;
	--ip-label:         #b3bcba;
	--ip-muted:         #95a09e;
	--ip-faint:         #78837f;
	--ip-nav-fg:        #c3cbc9;

	--ip-border:        #2b3235;
	--ip-border-soft:   #232a2c;
	--ip-border-input:  #363f42;
	--ip-rule:          #202628;

	--ip-teal:          #3fbfae;
	--ip-teal-rgb:      63, 191, 174;
	--ip-teal-dark:     #63d3c3;
	--ip-teal-pale:     #2f6f68;
	--ip-mint:          #14312d;
	--ip-mint-deep:     #1b453f;

	--ip-amber:         #e0a355;
	--ip-amber-bg:      #35270f;
	--ip-amber-fg:      #f0c07a;
	--ip-blue:          #93b4ff;
	--ip-blue-bg:       #17233d;
	--ip-violet:        #c0aefc;
	--ip-violet-bg:     #241c40;
	--ip-pink:          #f0a2c6;
	--ip-pink-bg:       #37162a;

	--ip-track:         #262d2f;
	--ip-on-accent:     #06231f;
	--ip-veil-hover:    rgba(255, 255, 255, 0.09);

	--ip-texture-line:  rgba(255, 255, 255, 0.08);
	--ip-glow:          20, 184, 166;
	--ip-glow-violet:   80, 30, 140;

	--ip-shadow-3:      rgba(0, 0, 0, 0.50);
	--ip-shadow-4:      rgba(0, 0, 0, 0.60);

	/* FIRST's program colours — theirs, not ours, and the same in both themes. */
	--ip-frc: #009cd7;  --ip-ftc: #f57e25;  --ip-fll: #ffc107;  --ip-fgc: #00a651;
	--ip-prog-fg: #222222;

	--ip-font-xs:   0.75rem;
	--ip-font-sm:   0.875rem;
	--ip-font-base: 1rem;
	--ip-font-h3:   1.125rem;
	--ip-font-h2:   1.25rem;
	--ip-font-h1:   1.5rem;
	--ip-icon-nudge: 0.07em;   /* lowercase sits below its line's middle */
	--ip-icon-scale: 0.875em;  /* a glyph fills its whole box; text does not */

	--ip-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* --- The brand mark's own colours (assets/brand/mark-dark.svg) --- */
	--lp-mark:       #5eead0;
	--lp-mark-from:  #22a38b;
	--lp-mark-to:    #7df5dd;

	/* --- Landing only --- */
	--lp-display-xl: clamp(2.75rem, 1.4rem + 6.2vw, 6rem);
	--lp-display-md: clamp(2.25rem, 1.3rem + 4.2vw, 4.25rem);
	--lp-h2:         clamp(2rem, 1.35rem + 2.9vw, 3.5rem);
	--lp-lede:       clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
	--lp-wrap:       1200px;
	--lp-gutter:     clamp(16px, 4vw, 40px);
	--lp-section:    clamp(96px, 12vw, 168px);
	/* The app's seg-control easing: settles without bouncing. */
	--lp-ease:       cubic-bezier(0.32, 0.72, 0, 1);
	--lp-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);

	color-scheme: dark;
}

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

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

html {
	background: var(--ip-canvas);
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 80px;
}
body {
	margin: 0;
	color: var(--ip-ink);
	font-family: var(--ip-sans);
	font-size: var(--ip-font-base);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Transparent so the ground's glows, at z-index -1, show — as in the app. */
	background: transparent;
	overflow-x: clip;
	text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
em { font-style: italic; }
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--ip-teal); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(var(--ip-teal-rgb), 0.35); color: var(--ip-ink); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.18); border-radius: 4px; }

.lp-wrap {
	width: 100%;
	max-width: calc(var(--lp-wrap) + var(--lp-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--lp-gutter);
}

.lp-skip {
	position: absolute;
	left: 16px;
	top: -60px;
	z-index: 100;
	padding: 10px 14px;
	background: var(--ip-teal);
	color: var(--ip-on-accent);
	border-radius: 9px;
	font-weight: 600;
	text-decoration: none;
	transition: top 200ms var(--lp-ease);
}
.lp-skip:focus { top: 16px; }

@media (max-width: 40em) { .lp-hide-sm { display: none; } }
@media (min-width: 40.0625em) { .lp-show-sm { display: none; } }

/* -----------------------------------------------------------------------------
   Ground — the app's dark background, with room to breathe.
   The 50px grid and the teal glow rising from the bottom are lifted from the
   app's "Background" rules. Here the grid fades out toward the edges and the
   glow drifts, which a working screen should never do and a cover can.
   -------------------------------------------------------------------------- */

.lp-ground {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}
.lp-ground__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--ip-texture-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--ip-texture-line) 1px, transparent 1px);
	background-size: 50px 50px;
	background-position: center top;
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 85%);
	        mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 85%);
	opacity: 0.75;
}
.lp-ground__aurora {
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(40% 35% at 50% 0%, rgba(var(--ip-glow), 0.20) 0%, transparent 70%),
		radial-gradient(30% 30% at 15% 25%, rgba(var(--ip-glow), 0.06) 0%, transparent 70%),
		radial-gradient(35% 30% at 85% 70%, rgba(var(--ip-glow-violet), 0.10) 0%, transparent 70%),
		radial-gradient(60% 40% at 50% 110%, rgba(var(--ip-glow), 0.16) 0%, transparent 70%);
	animation: lp-drift 28s ease-in-out infinite alternate;
}
@keyframes lp-drift {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(2%, 1.5%, 0) scale(1.04); }
	100% { transform: translate3d(-2%, -1%, 0) scale(1.02); }
}

/* -----------------------------------------------------------------------------
   Header — the app's translucent top bar, rule drawn only once scrolled.
   -------------------------------------------------------------------------- */

.lp-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	padding-top: env(safe-area-inset-top);
	border-bottom: 1px solid transparent;
	transition: background-color 240ms ease, border-color 240ms ease, backdrop-filter 240ms ease;
}
.lp-header.is-scrolled {
	background: var(--ip-header-bg);
	border-bottom-color: var(--ip-border-soft);
	-webkit-backdrop-filter: saturate(160%) blur(16px);
	        backdrop-filter: saturate(160%) blur(16px);
}
/* Every translucent surface goes solid together, not just the header: the
   floating award card, the hero pill and the ghost buttons are see-through too. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
	.lp-header.is-scrolled { background: var(--ip-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
	.lp-pill,
	.lp-btn--ghost,
	.lp-prog,
	.app-award { background: var(--ip-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
	.lp-pill, .lp-btn--ghost, .lp-prog, .lp-tile, .lp-plan, .lp-crit, .lp-step__ui { border-color: #4a5457; }
	.lp-sub, .lp-fine, .lp-footnote, .lp-footer__legal { color: var(--ip-label); }
}
.lp-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	height: 68px;
	max-width: calc(var(--lp-wrap) + var(--lp-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--lp-gutter);
}

.lp-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	flex: none;
}
.lp-brand__mark { width: 28px; height: 28px; }
.lp-brand__name {
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ip-ink);
}
.lp-brand__name span { color: var(--lp-mark); }

.lp-nav {
	display: flex;
	gap: 4px;
	margin-inline: auto;
}
.lp-nav a {
	padding: 8px 12px;
	border-radius: 8px;
	color: var(--ip-label);
	font-size: var(--ip-font-sm);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color 160ms ease, background-color 160ms ease;
	-webkit-tap-highlight-color: transparent;
}
.lp-nav a:hover { color: var(--ip-ink); background: var(--ip-veil-hover); }
.lp-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lp-nav + .lp-header__actions { margin-left: 0; }
/* With the nav gone it is no longer the thing pushing the buttons right. */
@media (max-width: 53.75em) {
	.lp-nav { display: none; }
	.lp-nav + .lp-header__actions { margin-left: auto; }
}

/* Signed in or not. Both versions of each control are in the markup and the
   class on <html> picks one — set before first paint from what was true last
   time, then corrected by main.js once the app has answered. */
.is-signed-in [data-when="signed-out"],
:root:not(.is-signed-in) [data-when="signed-in"] { display: none !important; }
.lp-header__actions > [data-when] { animation: lp-fade 240ms ease both; }
@keyframes lp-fade { from { opacity: 0; } }

/* Who the portal button opens, beside it. Read-only, so not a control. */
.lp-signed {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 240px;
	color: var(--ip-muted);
	font-size: var(--ip-font-sm);
	font-weight: 500;
	white-space: nowrap;
}
.lp-signed > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lp-signed::before {
	content: '';
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ip-teal);
	box-shadow: 0 0 10px rgba(var(--ip-teal-rgb), 0.8);
}
@media (max-width: 40em) { .lp-signed { display: none !important; } }
/* A phone fits both buttons only once the gaps tighten, the arrow goes and the
   brand is its mark alone. Sign in is what a returning person needs here; the
   name is already on the page below. In em, like every breakpoint, so a larger
   text setting reaches this layout sooner rather than overflowing the wide one.
   Translations land here too: "Jetzt loslegen" is longer than "Get started". */
@media (max-width: 27.5em) {
	.lp-header__inner { gap: 12px; }
	.lp-header__actions { gap: 6px; }
	.lp-header .lp-btn--sm { --pad-x: 11px; }
	.lp-header .lp-btn--sm .bi { display: none; }
	.lp-brand__name {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}
/* Narrower still — a small phone at a large text setting — one button is all
   that fits. Sign in stays; the hero's first button, just below, is sign-up. */
@media (max-width: 19.5em) {
	.lp-header__actions > .lp-btn--primary[data-when="signed-out"] { display: none; }
}

/* -----------------------------------------------------------------------------
   Buttons — .ip-btn's proportions, scaled for a cover.
   -------------------------------------------------------------------------- */

.lp-btn {
	--pad-y: 10px; --pad-x: 15px; --r: 9px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	padding: var(--pad-y) var(--pad-x);
	border-radius: var(--r);
	border: 1px solid var(--ip-border-input);
	background: var(--ip-surface);
	color: var(--ip-ink);
	font: inherit;
	font-size: var(--ip-font-base);
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease, box-shadow 240ms ease, transform 160ms var(--lp-ease);
	-webkit-tap-highlight-color: transparent;
}
/* The app's own fix (.ip-btn > .bi): Bootstrap Icons drop their glyph .125em to
   sit on a text baseline, which in a flex button left the arrow off the
   label's middle. Centred on its box instead, then nudged down, since
   lowercase text sits below the middle of its line and a truly centred icon
   reads as high. `top`, not a transform, so the hover's slide is untouched. */
.lp-btn .bi {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	top: var(--ip-icon-nudge);
	font-size: var(--ip-icon-scale);
	line-height: 1;
	transition: transform 240ms var(--lp-ease);
}
.lp-btn .bi::before { vertical-align: 0; }
.lp-btn:active { transform: scale(0.96); }
.lp-btn--sm { --pad-y: 7px; --pad-x: 13px; --r: 8px; font-size: var(--ip-font-sm); }
.lp-btn--lg { --pad-y: 14px; --pad-x: 22px; --r: 11px; font-size: 1.0625rem; }
.lp-btn--block { width: 100%; }
/* The big and full-width buttons may wrap. On one line they set a minimum
   width for whatever holds them, so a long translation ("Mit Starter beginnen,
   jederzeit upgraden") or a large text setting pushed a plan card, or the
   hero, past the edge of a phone. */
.lp-btn--lg,
.lp-btn--block { white-space: normal; text-align: center; text-wrap: balance; }

.lp-btn--primary {
	background: var(--ip-teal);
	border-color: var(--ip-teal);
	color: var(--ip-on-accent);
	box-shadow:
		0 0 0 1px rgba(var(--ip-teal-rgb), 0.15),
		0 8px 28px -8px rgba(var(--ip-teal-rgb), 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.lp-btn--ghost {
	background: rgba(23, 27, 29, 0.6);
	-webkit-backdrop-filter: blur(8px);
	        backdrop-filter: blur(8px);
}
@media (hover: hover) {
	.lp-btn--primary:hover {
		background: var(--ip-teal-dark);
		border-color: var(--ip-teal-dark);
		box-shadow:
			0 0 0 1px rgba(var(--ip-teal-rgb), 0.25),
			0 12px 40px -8px rgba(var(--ip-teal-rgb), 0.75),
			inset 0 1px 0 rgba(255, 255, 255, 0.3);
	}
	.lp-btn--primary:hover .bi-arrow-right { transform: translateX(3px); }
	.lp-btn--ghost:hover { background: var(--ip-surface-sunk); border-color: #4a5457; }
}
@media (pointer: coarse) { .lp-btn { min-height: 44px; } }

/* -----------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

/* Display type follows the reader's text size, but never past the width of the
   screen: the min() with vw keeps the longest word ("outreach,", "happening.")
   on one line at any text setting, where the rem-based clamp alone ran it off
   a phone's edge.

   Tracking is size-specific: -0.045em is right at 96px, where letters drift
   apart, and too tight at a phone's 46px, so it starts at -0.03em and tightens
   only on wide screens, where the type is large. */
.lp-display {
	font-size: min(var(--lp-display-xl), 12.5vw);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.03em;
	text-wrap: balance;
}
.lp-display--md { font-size: min(var(--lp-display-md), 9.5vw); line-height: 1.02; letter-spacing: -0.025em; }
@media (min-width: 60em) {
	.lp-display { letter-spacing: -0.045em; }
	.lp-display--md { letter-spacing: -0.04em; }
}
.lp-line { display: block; }

.lp-accent-text {
	background: linear-gradient(100deg, var(--lp-mark-from) 0%, var(--lp-mark) 45%, var(--lp-mark-to) 100%);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
	/* The descender of a comma or g would be clipped off by the box otherwise. */
	padding-bottom: 0.08em;
}

.lp-h2 {
	font-size: min(var(--lp-h2), 10vw);
	line-height: 1.04;
	letter-spacing: -0.025em;
	text-wrap: balance;
}
@media (min-width: 60em) { .lp-h2 { letter-spacing: -0.04em; } }
.lp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	color: var(--ip-teal);
	font-size: var(--ip-font-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
}
.lp-eyebrow::before {
	content: '';
	width: 18px;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}
.lp-sub {
	margin-top: 20px;
	max-width: 38rem;
	color: var(--ip-muted);
	font-size: var(--lp-lede);
	line-height: 1.6;
	text-wrap: pretty;
}
.lp-lede {
	max-width: 40rem;
	margin: 28px auto 0;
	color: var(--ip-label);
	font-size: var(--lp-lede);
	line-height: 1.6;
	text-wrap: pretty;
}
.lp-fine { margin-top: 18px; color: var(--ip-faint); font-size: var(--ip-font-sm); }
.lp-footnote { margin-top: 28px; text-align: center; color: var(--ip-faint); font-size: var(--ip-font-sm); }

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

.lp-hero {
	position: relative;
	padding-top: calc(68px + clamp(56px, 9vw, 120px));
}
.lp-hero__copy { text-align: center; }

/* Half its one-line height for a radius rather than 999px: identical on one
   line, and when a narrow screen wraps it, a rounded box rather than a
   capsule standing on end. The program list wraps as one piece. */
.lp-pill {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 2px 10px;
	margin-bottom: 30px;
	padding: 7px 14px 7px 12px;
	border: 1px solid var(--ip-border);
	border-radius: 19px;
	background: rgba(23, 27, 29, 0.55);
	-webkit-backdrop-filter: blur(10px);
	        backdrop-filter: blur(10px);
	color: var(--ip-label);
	font-size: var(--ip-font-sm);
	font-weight: 500;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Still, on purpose: a pulsing dot says "live", and nothing here is. */
.lp-pill__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lp-mark);
	box-shadow: 0 0 12px var(--lp-mark);
}
.lp-prog-inline { color: var(--ip-ink); font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }

.lp-cta-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 40px;
}
@media (max-width: 30em) {
	.lp-cta-row { flex-direction: column; align-items: stretch; }
}

/* The page's entrance: each line rises out of a soft blur, one after another.
   Kept short, because the buttons are last in the order and they are the
   point of the page: they have started arriving by 300ms. */
.lp-rise {
	display: inline-block;
	animation: lp-rise 900ms var(--lp-ease-out) both;
	animation-delay: calc(var(--d, 0) * 50ms + 40ms);
}
p.lp-rise, div.lp-rise { display: block; }
.lp-pill.lp-rise { display: inline-flex; }
.lp-cta-row.lp-rise { display: flex; }
@keyframes lp-rise {
	from { opacity: 0; transform: translateY(24px); filter: blur(10px); }
	to   { opacity: 1; transform: none; filter: blur(0); }
}

/* --- The stage: the product, tilted back, settling flat as you scroll --- */

.lp-stage {
	--p: 0;
	position: relative;
	max-width: 1320px;
	margin: clamp(56px, 8vw, 96px) auto 0;
	padding-inline: var(--lp-gutter);
	perspective: 1800px;
	perspective-origin: 50% 0%;
	animation: lp-stage-in 1600ms var(--lp-ease-out) 500ms both;
}
@keyframes lp-stage-in {
	from { opacity: 0; transform: translateY(80px); }
	to   { opacity: 1; transform: none; }
}
.lp-stage__glow {
	position: absolute;
	left: 50%;
	top: 10%;
	width: 90%;
	height: 80%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(var(--ip-glow), 0.30) 0%, rgba(var(--ip-glow), 0.08) 40%, transparent 70%);
	filter: blur(40px);
	opacity: calc(0.55 + var(--p) * 0.45);
	pointer-events: none;
}
.lp-stage__tilt {
	transform-style: preserve-3d;
	transform-origin: 50% 0%;
	transform:
		rotateX(calc((1 - var(--p)) * 26deg))
		scale(calc(0.9 + var(--p) * 0.1));
	will-change: transform;
}

.lp-shot {
	--s: 1;
	position: relative;
	aspect-ratio: 1240 / 680;
	border-radius: calc(16px * var(--s) + 4px);
	background: var(--ip-canvas);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.06),
		0 1px 0 0 rgba(255, 255, 255, 0.08) inset,
		0 50px 120px -30px rgba(0, 0, 0, 0.9),
		0 30px 80px -20px rgba(var(--ip-glow), 0.20);
	transform-style: preserve-3d;
}
/* A highlight along the top edge, as glass catches light. */
.lp-shot::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(180deg, rgba(var(--ip-teal-rgb), 0.55), rgba(255, 255, 255, 0.06) 30%, transparent 70%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	z-index: 3;
}
/* The mockup is drawn at a fixed 1240×680 and scaled to fit, so it reads as
   a screenshot at every width rather than reflowing into a different app.

   Being a picture, its type is in pixels: the app's scale redefined at the
   default 16px, here only. In rem it grew with the reader's text setting inside
   a canvas that does not, and the sidebar and tiles fell apart. Its words are
   described in the stage's aria-label, which does follow that setting. */
.lp-shot__canvas {
	--ip-font-xs:   12px;
	--ip-font-sm:   14px;
	--ip-font-base: 16px;
	--ip-font-h3:   18px;
	--ip-font-h2:   20px;
	--ip-font-h1:   24px;
	font-size: 16px;
	position: absolute;
	top: 0;
	left: 0;
	width: 1240px;
	height: 680px;
	transform: scale(var(--s));
	transform-origin: 0 0;
	transform-style: preserve-3d;
}
.lp-shot .app {
	position: absolute;
	inset: 0;
	border-radius: 16px;
	overflow: hidden;
	/* A glimpse of the app's own grid, inside the window. */
	background:
		linear-gradient(var(--ip-texture-line) 1px, transparent 1px) 0 0 / 50px 50px,
		linear-gradient(90deg, var(--ip-texture-line) 1px, transparent 1px) 0 0 / 50px 50px,
		radial-gradient(ellipse at 50% 120%, rgba(var(--ip-glow), 0.16), transparent 60%),
		var(--ip-canvas);
}
/* Fade the window's foot into the page, so it reads as continuing below. */
.lp-shot .app::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 30%;
	background: linear-gradient(to bottom, transparent, rgba(8, 8, 8, 0.85));
	pointer-events: none;
}

/* -----------------------------------------------------------------------------
   The app, in miniature. Class names follow the real components they copy
   (app-kpi ← .ip-kpi, app-seg ← .ip-seg, app-nav ← #sidebar .nav-link …), at
   the app's own sizes, since the canvas is drawn at 1:1 and scaled as a whole.
   -------------------------------------------------------------------------- */

.app {
	display: grid;
	grid-template-columns: 250px 1fr;
	font-size: var(--ip-font-base);
	color: var(--ip-ink);
	text-align: left;
	line-height: 1.4;
}
.app .bi { line-height: 1; }

.app-side {
	display: grid;
	grid-template-rows: auto 1fr auto;
	background: var(--ip-surface);
	border-right: 1px solid var(--ip-border);
	color: var(--ip-nav-fg);
	position: relative;
	z-index: 1;
}
.app-side__brand {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 20px 18px 18px;
}
.app-side__org { font-weight: 600; font-size: var(--ip-font-base); color: var(--ip-ink); letter-spacing: -0.01em; }
.app-side__season { font-size: var(--ip-font-xs); color: var(--ip-muted); margin-top: 1px; }
.app-nav { padding: 6px 12px; display: flex; flex-direction: column; gap: 2px; }
.app-nav li {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
}
.app-nav li > .bi:first-child { width: 1.25em; text-align: center; font-size: 16px; }
.app-nav li.is-active { background: var(--ip-teal); color: var(--ip-on-accent); font-weight: 600; }
.app-nav__chev { margin-left: auto; opacity: 0.55; font-size: 0.8em; }
.app-count {
	margin-left: auto;
	height: 19px;
	display: inline-flex;
	align-items: center;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--ip-rule);
	color: var(--ip-muted);
	font-size: var(--ip-font-xs);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.app-count + .app-nav__chev { margin-left: 6px; }
.app-nav__rule { height: 1px; padding: 0 !important; margin: 10px 12px; background: var(--ip-border-soft); }
.app-side__foot { padding: 14px; border-top: 1px solid var(--ip-border-soft); }

.app-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 9px 15px;
	border-radius: 9px;
	border: 1px solid var(--ip-border-input);
	background: var(--ip-surface);
	color: var(--ip-ink);
	font-size: var(--ip-font-base);
	font-weight: 500;
	white-space: nowrap;
}
.app-btn--primary { background: var(--ip-teal); border-color: var(--ip-teal); color: var(--ip-on-accent); font-weight: 600; }
.app-btn--block { width: 100%; }
.app-btn--sm { padding: 5px 11px; font-size: var(--ip-font-sm); border-radius: 8px; }

.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 28px;
	background: var(--ip-header-bg);
	border-bottom: 1px solid var(--ip-border-soft);
}
.app-top__title { font-size: var(--ip-font-h1); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.app-top__sub { font-size: var(--ip-font-sm); color: var(--ip-muted); margin-top: 2px; }
.app-top__tools { display: flex; align-items: center; gap: 8px; }

.app-seg {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: var(--ip-surface);
	border: 1px solid var(--ip-border);
	border-radius: 9px;
}
.app-seg > span {
	padding: 6px 11px;
	border-radius: 6px;
	font-size: var(--ip-font-sm);
	font-weight: 500;
	color: var(--ip-label);
	white-space: nowrap;
}
.app-seg > span.is-active { background: var(--ip-teal); color: var(--ip-on-accent); }
/* The bar's three controls are one height, 34px, as in the app
   (.app-topbar__tools): the window control stretches its options to it rather
   than growing to fit their padding. */
.app-top__tools .app-seg { height: 34px; align-items: stretch; }
.app-top__tools .app-seg > span { display: inline-flex; align-items: center; padding: 0 11px; }
.app-select {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 34px;
	padding: 0 12px;
	border: 1px solid var(--ip-border);
	border-radius: 9px;
	background: var(--ip-surface);
	font-size: var(--ip-font-sm);
	font-weight: 500;
}
.app-select .bi { font-size: 0.75em; opacity: 0.6; }
.app-round {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--ip-border);
	background: var(--ip-surface);
	color: var(--ip-label);
	font-size: var(--ip-font-sm);
}

.app-body { padding: 22px 28px; display: flex; flex-direction: column; gap: 16px; }
.app-row { display: flex; align-items: center; gap: 10px; }
.app-seg-label { font-size: var(--ip-font-xs); color: var(--ip-faint); font-weight: 600; }
.app-hint { font-size: var(--ip-font-xs); color: var(--ip-muted); }

.app-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.app-kpi {
	background: var(--ip-surface);
	border: 1px solid var(--ip-border);
	border-radius: 12px;
	padding: 16px 16px 14px;
}
.app-kpi__label { font-size: var(--ip-font-xs); color: var(--ip-muted); font-weight: 500; }
.app-kpi__value {
	margin-top: 6px;
	font-size: var(--ip-font-h1);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.app-kpi__delta { margin-top: 7px; font-size: var(--ip-font-xs); color: var(--ip-teal); font-weight: 500; }

.app-split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; }
.app-card {
	background: var(--ip-surface);
	border: 1px solid var(--ip-border);
	border-radius: 12px;
	padding: 18px;
}
.app-card__title { font-size: var(--ip-font-h3); font-weight: 600; }
.app-card__meta { font-size: var(--ip-font-xs); color: var(--ip-muted); margin-top: 3px; }

.app-bars {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 210px;
	margin-top: 20px;
}
.app-bars > span {
	flex: 1;
	height: var(--h);
	position: relative;
	border-radius: 5px 5px 2px 2px;
	background: var(--ip-teal-pale);
	transform-origin: bottom;
}
.app-bars > span.is-peak { background: var(--ip-teal); box-shadow: 0 0 24px rgba(var(--ip-teal-rgb), 0.45); }
.app-bars b {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 6px);
	transform: translateX(-50%);
	font-size: var(--ip-font-xs);
	font-weight: 500;
	color: var(--ip-muted);
	font-variant-numeric: tabular-nums;
}

.app-meters { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.app-meters > div {
	display: grid;
	grid-template-columns: 1fr auto;
	row-gap: 7px;
	font-size: var(--ip-font-sm);
	color: var(--ip-label);
}
.app-meters b { font-weight: 600; color: var(--ip-ink); font-variant-numeric: tabular-nums; }
.app-meters i {
	grid-column: 1 / -1;
	position: relative;
	height: 7px;
	border-radius: 4px;
	background: var(--ip-track);
	overflow: hidden;
}
.app-meters i::after {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--w);
	border-radius: 4px;
	background: var(--ip-teal-pale);
	transform-origin: left;
}
.app-meters i.is-peak::after { background: var(--ip-teal); }

/* The award card that floats in front, as on the share image. */
.app-award {
	position: absolute;
	left: 520px;
	bottom: -54px;
	width: 470px;
	padding: 20px 22px;
	border-radius: 14px;
	background: rgba(23, 27, 29, 0.86);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	        backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid rgba(var(--ip-teal-rgb), 0.45);
	box-shadow:
		0 30px 80px -10px rgba(0, 0, 0, 0.75),
		0 0 0 1px rgba(255, 255, 255, 0.03) inset,
		0 0 60px -10px rgba(var(--ip-teal-rgb), 0.35);
	transform: translateZ(90px);
	text-align: left;
	color: var(--ip-ink);
	z-index: 4;
}
.app-award__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-bottom: 14px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--ip-border-soft);
}
.app-award__title { font-size: var(--ip-font-h3); font-weight: 600; }
.app-award__meta { font-size: var(--ip-font-xs); color: var(--ip-muted); margin-top: 2px; }
.app-award__score { font-size: var(--ip-font-h1); font-weight: 700; color: var(--ip-amber); line-height: 1; letter-spacing: -0.02em; }
.app-award__score span { font-size: var(--ip-font-xs); color: var(--ip-muted); font-weight: 600; margin-left: 1px; }
.app-award__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-size: var(--ip-font-sm);
	color: var(--ip-ink-soft);
}
.app-award__list b { margin-left: auto; font-size: var(--ip-font-xs); color: var(--ip-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.app-award__list .is-good { color: var(--ip-teal); }
.app-award__list .is-warn { color: var(--ip-amber); }

/* -----------------------------------------------------------------------------
   Programs strip
   -------------------------------------------------------------------------- */

.lp-programs { padding-top: clamp(120px, 14vw, 200px); }
.lp-programs__title {
	text-align: center;
	color: var(--ip-muted);
	font-size: var(--ip-font-sm);
	font-weight: 500;
}
.lp-programs__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 14px;
	margin-top: 22px;
}
.lp-prog {
	--c: var(--ip-frc);
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 18px 10px 10px;
	border: 1px solid var(--ip-border);
	border-radius: 999px;
	background: rgba(23, 27, 29, 0.55);
	color: var(--ip-label);
	font-size: var(--ip-font-sm);
	font-weight: 500;
	transition: border-color 240ms ease, box-shadow 240ms ease;
}
.lp-prog b {
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--c);
	color: var(--ip-prog-fg);
	font-size: var(--ip-font-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
}
@media (hover: hover) {
	.lp-prog:hover {
		border-color: color-mix(in srgb, var(--c) 55%, transparent);
		box-shadow: 0 0 30px -8px color-mix(in srgb, var(--c) 60%, transparent);
	}
}
.lp-prog--frc { --c: var(--ip-frc); }
.lp-prog--ftc { --c: var(--ip-ftc); }
.lp-prog--fll { --c: var(--ip-fll); }
.lp-prog--fgc { --c: var(--ip-fgc); }

/* The app's .ip-prog tag, for a program shown inline. */
.prog {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: var(--ip-font-xs);
	font-weight: 700;
	color: var(--ip-prog-fg);
	letter-spacing: 0.02em;
	line-height: 1.5;
}
.prog--frc { background: var(--ip-frc); }
.prog--ftc { background: var(--ip-ftc); }
.prog--fll { background: var(--ip-fll); }
.prog--fgc { background: var(--ip-fgc); }

/* -----------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.lp-section { padding-top: var(--lp-section); }
.lp-section__head { max-width: 760px; margin-bottom: clamp(48px, 6vw, 72px); }
.lp-section__head--center { margin-inline: auto; text-align: center; }
.lp-section__head--center .lp-sub { margin-inline: auto; }

/* Raised surfaces: .ip-card, with a hairline of light along the top edge. */
.lp-surface,
.lp-step__ui,
.lp-tile,
.lp-plan,
.lp-crit {
	position: relative;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%),
		var(--ip-surface);
	border: 1px solid var(--ip-border);
	border-radius: 16px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 50px -24px rgba(0, 0, 0, 0.7);
}

/* --- How it works --- */

.lp-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	counter-reset: step;
}
@media (max-width: 60em) { .lp-steps { grid-template-columns: 1fr; max-width: 560px; } }

/* Each step spans two rows of the parent grid, so the three cards share a
   height and the copy under them starts on one line. */
.lp-step { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 26px; }
.lp-step__ui {
	padding: 22px;
	min-height: 236px;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.lp-step__ui::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(70% 60% at 50% 0%, rgba(var(--ip-glow), 0.10), transparent 70%);
	pointer-events: none;
}
.lp-step__copy { padding-inline: 4px; }
.lp-step__n {
	display: block;
	margin-bottom: 10px;
	color: var(--ip-teal);
	font-size: var(--ip-font-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}
.lp-step h3 { font-size: var(--ip-font-h2); letter-spacing: -0.02em; line-height: 1.25; }
.lp-step p { margin-top: 10px; color: var(--ip-muted); line-height: 1.6; }

/* Small app fragments inside the step cards. */
.mini-card {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: var(--ip-font-sm);
}
.mini-label { font-size: var(--ip-font-xs); color: var(--ip-muted); font-weight: 600; margin-bottom: 6px; }
.mini-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr)); gap: 6px; }
.mini-type {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 9px;
	border: 1px solid var(--ip-border);
	border-radius: 9px;
	background: var(--ip-surface-sunk);
	font-size: var(--ip-font-xs);
	font-weight: 500;
	color: var(--ip-label);
}
.mini-type.is-on { border-color: var(--ip-teal); background: var(--ip-mint); color: var(--ip-ink); }
.mini-type b {
	display: grid;
	place-items: center;
	width: 24px;
	height: 22px;
	border-radius: 6px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.t-teal   { background: var(--ip-mint-deep); color: var(--ip-teal); }
.t-blue   { background: var(--ip-blue-bg);   color: var(--ip-blue); }
.t-pink   { background: var(--ip-pink-bg);   color: var(--ip-pink); }
.t-violet { background: var(--ip-violet-bg); color: var(--ip-violet); }
.mini-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 80px), max-content)); gap: 10px 24px; }
.mini-input {
	padding: 8px 11px;
	border: 1px solid var(--ip-border-input);
	border-radius: 9px;
	background: #111516;
	color: var(--ip-ink-soft);
	font-size: var(--ip-font-xs);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mini-input.mono { font-variant-numeric: tabular-nums; font-weight: 600; }
.mini-avatars { display: flex; }
.mini-avatars span,
.av {
	display: grid;
	place-items: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ip-mint-deep);
	color: var(--ip-teal);
	font-size: 0.6875rem;
	font-weight: 700;
	box-shadow: 0 0 0 2px var(--ip-surface);
}
.mini-avatars span + span { margin-left: -7px; }
.mini-avatars .more { background: var(--ip-rule); color: var(--ip-muted); }

.mini-file {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--ip-border);
	border-radius: 11px;
	background: var(--ip-surface-sunk);
}
.mini-file > div { min-width: 0; flex: 1; }
.mini-file b, .mini-file small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-file b { font-weight: 600; font-size: var(--ip-font-xs); color: var(--ip-ink); }
.mini-file small { font-size: var(--ip-font-xs); color: var(--ip-muted); }
.mini-file > .bi { color: var(--ip-teal); }
.mini-file__ext {
	flex: none;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--ip-pink-bg);
	color: var(--ip-pink);
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.04em;
}
.mini-file__ext.is-img { background: var(--ip-blue-bg); color: var(--ip-blue); }
.mini-file__ext.is-web { background: var(--ip-amber-bg); color: var(--ip-amber-fg); }

.mini-ready { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.mini-ready b { display: block; font-size: var(--ip-font-base); font-weight: 600; }
.mini-ready small { color: var(--ip-muted); font-size: var(--ip-font-xs); }
.mini-ready__ring {
	--p: 75;
	position: relative;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: conic-gradient(var(--ip-teal) calc(var(--p) * 1%), var(--ip-track) 0);
	flex: none;
}
.mini-ready__ring::before {
	content: '';
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	background: var(--ip-surface);
}
.mini-ready__ring span { position: relative; font-size: var(--ip-font-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.mini-meter { display: grid; grid-template-columns: 1fr; gap: 6px; font-size: var(--ip-font-xs); color: var(--ip-label); }
.mini-meter i { position: relative; height: 7px; border-radius: 4px; background: var(--ip-track); overflow: hidden; }
.mini-meter i::after {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--w);
	border-radius: 4px;
	background: var(--ip-teal-pale);
	transform-origin: left;
}
.mini-meter i.is-peak::after { background: var(--ip-teal); }

/* --- Features (bento) --- */

.lp-bento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.lp-tile--wide { grid-column: span 2; }
@media (max-width: 60em) {
	.lp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40em) {
	.lp-bento { grid-template-columns: 1fr; }
	.lp-tile--wide { grid-column: auto; }
}

.lp-tile {
	--mx: 50%; --my: 0%;
	padding: 26px;
	overflow: hidden;
	transition: border-color 240ms ease, transform 400ms var(--lp-ease);
}
/* A soft light that follows the pointer across a tile. */
.lp-tile::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(420px circle at var(--mx) var(--my), rgba(var(--ip-teal-rgb), 0.09), transparent 45%);
	opacity: 0;
	transition: opacity 300ms ease;
	pointer-events: none;
}
@media (hover: hover) {
	.lp-tile:hover { border-color: #3a4346; }
	.lp-tile:hover::before { opacity: 1; }
}
.lp-tile > * { position: relative; }
.lp-tile__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 18px;
	border-radius: 11px;
	background: var(--ip-mint);
	border: 1px solid var(--ip-mint-deep);
	color: var(--ip-teal);
	font-size: 1.125rem;
}
.lp-tile h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--ip-font-h3);
	font-weight: 600;
	letter-spacing: -0.015em;
}
.lp-tile p { margin-top: 8px; color: var(--ip-muted); font-size: 0.9375rem; line-height: 1.6; max-width: 34rem; }

.lp-tile__art {
	display: flex;
	align-items: flex-end;
	gap: 24px;
	margin-top: 26px;
}
.app-seg--lg { flex: none; }
.mini-bars {
	flex: 1;
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 92px;
}
.mini-bars i {
	flex: 1;
	height: var(--h);
	border-radius: 4px 4px 2px 2px;
	background: var(--ip-teal-pale);
	transform-origin: bottom;
}
.mini-bars i.is-peak { background: var(--ip-teal); box-shadow: 0 0 20px rgba(var(--ip-teal-rgb), 0.4); }
@media (max-width: 40em) {
	.lp-tile__art { flex-direction: column; align-items: stretch; }
	/* In a column, flex: 1 would size the chart along its height — to nothing. */
	.mini-bars { flex: none; }
	.app-seg--lg { align-self: flex-start; }
}

/* The app's .ip-tag, in its five hues. Read-only, never clickable. */
.lp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.tag {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--ip-rule);
	color: var(--ip-muted);
	font-size: var(--ip-font-xs);
	font-weight: 500;
	white-space: nowrap;
}
.tag--teal   { background: var(--ip-mint);      color: var(--ip-teal); }
.tag--blue   { background: var(--ip-blue-bg);   color: var(--ip-blue); }
.tag--amber  { background: var(--ip-amber-bg);  color: var(--ip-amber-fg); }
.tag--violet { background: var(--ip-violet-bg); color: var(--ip-violet); }
.tag--pink   { background: var(--ip-pink-bg);   color: var(--ip-pink); }

.lp-teams { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.lp-teams > div {
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border: 1px solid var(--ip-border-soft);
	border-radius: 10px;
	background: var(--ip-surface-sunk);
	font-size: var(--ip-font-sm);
}
.lp-teams b { font-variant-numeric: tabular-nums; font-weight: 600; }
.lp-teams small { color: var(--ip-muted); font-size: var(--ip-font-xs); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lp-board { display: flex; flex-direction: column; gap: 4px; margin-top: 20px; counter-reset: rank; }
.lp-board li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	border-radius: 10px;
	font-size: var(--ip-font-sm);
	counter-increment: rank;
}
.lp-board li::before {
	content: counter(rank);
	width: 14px;
	color: var(--ip-faint);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	font-size: var(--ip-font-xs);
}
.lp-board li:first-child { background: var(--ip-mint); }
.lp-board li:first-child::before { color: var(--ip-teal); }
.lp-board b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-board .av { width: 26px; height: 26px; box-shadow: none; }

.lp-approve {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
	padding: 12px;
	border: 1px solid var(--ip-border);
	border-radius: 11px;
}
.lp-approve > div { flex: 1 1 140px; min-width: 0; }
.lp-approve b, .lp-approve small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-approve b { font-size: var(--ip-font-sm); font-weight: 600; }
.lp-approve small { font-size: var(--ip-font-xs); color: var(--ip-muted); }

.lp-tile--impact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	column-gap: 32px;
	align-items: center;
}
.lp-tile--impact > :not(.lp-doc) { grid-column: 1; }
.lp-tile--impact .lp-doc { grid-column: 2; grid-row: 1 / span 3; }
@media (max-width: 47.5em) {
	.lp-tile--impact { grid-template-columns: 1fr; }
	.lp-tile--impact .lp-doc { grid-column: 1; grid-row: auto; margin-top: 24px; }
}
.lp-doc {
	position: relative;
	height: 190px;
	-webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent);
	        mask-image: linear-gradient(to bottom, #000 65%, transparent);
}
.lp-doc__page {
	position: absolute;
	inset: 6px 0 auto 0;
	padding: 20px 22px;
	border-radius: 10px;
	background: #f6f7f7;
	color: #2c3134;
	box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.6);
	transform: rotate(-1.5deg);
	font-size: var(--ip-font-xs);
	line-height: 1.6;
}
.lp-doc__page b { display: block; font-size: var(--ip-font-sm); color: #16191b; margin-bottom: 8px; }
.lp-doc__page p { margin: 0 0 12px; color: #4b5563; font-size: var(--ip-font-xs); }
.lp-doc__page mark { background: #d7f0ec; color: #0b5951; padding: 0 3px; border-radius: 3px; font-weight: 600; }
.lp-doc__page i { display: block; height: 7px; margin-top: 8px; border-radius: 4px; background: #eaeeec; }
.lp-doc__page i.short { width: 60%; }

/* --- Awards spotlight --- */

.lp-awards__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(40px, 6vw, 88px);
	align-items: center;
}
@media (max-width: 60em) { .lp-awards__grid { grid-template-columns: minmax(0, 1fr); } }

.lp-checks { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.lp-checks li { display: flex; align-items: center; gap: 12px; color: var(--ip-label); }
.lp-checks .bi {
	display: grid;
	place-items: center;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--ip-mint);
	color: var(--ip-teal);
	font-size: 0.8rem;
}

.lp-awards__visual { position: relative; }
.lp-awards__visual::before {
	content: '';
	position: absolute;
	inset: -10% -6%;
	background: radial-gradient(ellipse at center, rgba(var(--ip-glow), 0.22), transparent 65%);
	filter: blur(30px);
	pointer-events: none;
}
.lp-crit {
	padding: 8px;
	border-color: rgba(var(--ip-teal-rgb), 0.35);
	box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}
.lp-crit__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	padding: 18px 18px 20px;
	border-bottom: 1px solid var(--ip-border-soft);
	margin-bottom: 6px;
}
.lp-crit__head b { display: block; margin-top: 10px; font-size: var(--ip-font-h2); font-weight: 600; letter-spacing: -0.02em; }
.lp-crit__head small { display: block; margin-top: 2px; font-size: var(--ip-font-xs); color: var(--ip-muted); }
.lp-crit__score {
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--ip-amber);
	font-variant-numeric: tabular-nums;
}
.lp-crit__score small { font-size: var(--ip-font-base); color: var(--ip-muted); letter-spacing: 0; margin-left: 2px; }
.lp-crit__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: 11px;
	transition: background-color 200ms ease;
}
.lp-crit__row > div { flex: 1; min-width: 0; }
.lp-crit__row b { display: block; font-size: 0.9375rem; font-weight: 600; }
.lp-crit__row small { display: block; font-size: var(--ip-font-xs); color: var(--ip-muted); margin-top: 1px; }
.lp-crit__row > .bi { font-size: 1.125rem; }
.lp-crit__row.is-done > .bi { color: var(--ip-teal); }
.lp-crit__row.is-gap { background: var(--ip-amber-bg); }
.lp-crit__row.is-gap > .bi,
.lp-crit__row.is-gap small { color: var(--ip-amber-fg); }
@media (hover: hover) { .lp-crit__row:not(.is-gap):hover { background: var(--ip-veil-hover); } }

/* --- Plans --- */

.lp-plans {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	max-width: 940px;
	margin-inline: auto;
}
@media (max-width: 47.5em) { .lp-plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }

.lp-plan {
	display: flex;
	flex-direction: column;
	padding: 32px;
}
.lp-plan h3 { font-size: var(--ip-font-h2); font-weight: 600; letter-spacing: -0.01em; color: var(--ip-label); }
.lp-plan__price {
	margin-top: 14px;
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.05;
}
.lp-plan__price small { font-size: var(--ip-font-base); font-weight: 500; color: var(--ip-muted); letter-spacing: 0; }
.lp-plan__blurb { margin-top: 12px; color: var(--ip-muted); }
.lp-plan ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 28px 0 32px;
	padding-top: 28px;
	border-top: 1px solid var(--ip-border-soft);
	flex: 1;
}
.lp-plan li { display: flex; gap: 12px; font-size: 0.9375rem; color: var(--ip-ink-soft); line-height: 1.45; }
.lp-plan li .bi { color: var(--ip-teal); flex: none; margin-top: 1px; }

.lp-plan--impact {
	border-color: rgba(var(--ip-teal-rgb), 0.5);
	background:
		radial-gradient(100% 60% at 50% 0%, rgba(var(--ip-glow), 0.14), transparent 70%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%),
		var(--ip-surface);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.05) inset,
		0 30px 80px -30px rgba(var(--ip-glow), 0.45);
}
.lp-plan--impact h3 { color: var(--ip-teal); }
.lp-plan__badge {
	position: absolute;
	top: 30px;
	right: 28px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--ip-mint);
	color: var(--ip-teal);
	font-size: var(--ip-font-xs);
	font-weight: 600;
}
@media (max-width: 26.25em) { .lp-plan__badge { position: static; align-self: flex-start; margin-bottom: 14px; } .lp-plan { padding: 26px 22px; } }

/* --- Closing --- */

.lp-final {
	position: relative;
	padding: calc(var(--lp-section) * 1.1) 0 calc(var(--lp-section) * 0.9);
	text-align: center;
	overflow: hidden;
}
.lp-final::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -30%;
	width: min(1200px, 140%);
	aspect-ratio: 2 / 1;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at bottom center, rgba(var(--ip-glow), 0.30) 0%, rgba(var(--ip-glow), 0.06) 45%, transparent 70%);
	pointer-events: none;
	z-index: -1;
}
.lp-final__mark {
	width: 72px;
	height: 72px;
	margin: 0 auto 36px;
	filter: drop-shadow(0 0 30px rgba(94, 234, 208, 0.45));
}
/* One turn as the section arrives, then still. Spinning forever was motion
   with no meaning, and it pulled the eye from the buttons beneath it. */
.js .lp-final__mark { transform: rotate(-360deg); transition: transform 1600ms var(--lp-ease-out) 120ms; }
.js .is-in .lp-final__mark { transform: none; }
.lp-cta-row--center { justify-content: center; margin-top: 44px; }

/* --- Footer --- */

.lp-footer {
	border-top: 1px solid var(--ip-border-soft);
	padding: 40px 0 calc(32px + env(safe-area-inset-bottom));
	background: rgba(8, 8, 8, 0.6);
}
.lp-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.lp-footer__brand { display: flex; align-items: center; gap: 20px; color: var(--ip-faint); font-size: var(--ip-font-xs); line-height: 1.6; }
.lp-footer__wordmark img { width: 130px; height: auto; opacity: 0.9; transition: opacity 200ms ease; }
.lp-footer__wordmark:hover img { opacity: 1; }
.lp-footer__links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.lp-footer__links a { color: var(--ip-muted); font-size: var(--ip-font-sm); text-decoration: none; transition: color 160ms ease; -webkit-tap-highlight-color: transparent; }
.lp-footer__links a:hover { color: var(--ip-ink); }
/* 44px tall under a finger, as every control in the app is (DESIGN.md, "Touch"). */
@media (pointer: coarse) {
	.lp-footer__links { gap: 0 20px; }
	.lp-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* --ip-faint at full strength: faded further it fell to about 3.6:1, short
   of the 4.5:1 that 12px text needs. */
.lp-footer__legal { margin-top: 28px; color: var(--ip-faint); font-size: var(--ip-font-xs); line-height: 1.6; }
@media (max-width: 40em) { .lp-footer__brand { flex-direction: column; align-items: flex-start; gap: 12px; } }

/* -----------------------------------------------------------------------------
   Scroll reveals. Hidden only once the script has said it will reveal them,
   so a page whose script never runs shows everything.
   -------------------------------------------------------------------------- */

/* Opacity and position only, which the compositor moves on its own. A blur here
   re-rasterised whole cards every frame, which a cheap phone drops frames on;
   the hero keeps its blur, being one short moment at the top of the page. */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 900ms var(--lp-ease-out),
		transform 1100ms var(--lp-ease-out);
	transition-delay: calc(var(--d, 0) * 110ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Charts grow once the chart itself is well in view (.is-drawn, from main.js),
   not when its card first shows: a chart at the foot of a tall card, or the
   hero's mockup below the fold, otherwise finished growing off screen. The
   meters' group is whatever holds them, marked by the script as well. */
.js .app-bars > span,
.js .mini-bars i { transform: scaleY(0); transition: transform 1000ms var(--lp-ease-out); }
.js .app-meters i::after,
.js .mini-meter i::after { transform: scaleX(0); transition: transform 1100ms var(--lp-ease-out); }
.js .app-bars.is-drawn > span,
.js .mini-bars.is-drawn i { transform: none; }
.js .app-meters.is-drawn i::after,
.js .is-drawn > .mini-meter i::after { transform: none; }
.app-bars > span:nth-child(n) { transition-delay: calc(var(--i, 0) * 45ms + 80ms); }
.mini-bars i:nth-child(n),
.app-meters > div:nth-child(n) i::after,
.mini-meter:nth-child(n) i::after { transition-delay: calc(var(--i, 0) * 60ms + 100ms); }

/* -----------------------------------------------------------------------------
   Reduced motion: everything arrives in place, nothing drifts or spins.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0ms !important;
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}
	.lp-stage { --p: 1 !important; }
	.lp-ground__aurora { animation: none !important; }
	.js .lp-final__mark { transform: none; }
}