/* =============================================================================
   SpyderAPI — design system (Framer direction)
   ---------------------------------------------------------------------------
   Light canvas with slow-drifting colour blobs, a chunky display face, glossy
   three-dimensional icon tiles, colour-coded bento cards and playful,
   physical hover motion (tilt, lift, magnetic buttons).

   Brand blue #3647FF (from the wordmark) leads, with violet, indigo and
   sky-blue tones (no orange, turquoise or red); the token names peach, cyan and
   pink are kept so components follow
   give each card and tracker its own colour.
   ========================================================================== */

:root {
	--sp-bg: #f6f6fb;
	--sp-surface: #ffffff;
	--sp-glass: rgba(255, 255, 255, .82);
	--sp-header-bg: #ffffff; /* solid, so page text never shows through the header */
	--sp-dark: #0c0c1d;      /* dark surfaces: cards, footer, dark buttons */
	--sp-ink: #0c0c1d;
	--sp-ink-2: #3d3d5c;
	--sp-muted: #6e6e8a;
	--sp-faint: #a3a3bb;
	--sp-line: #e7e7f1;
	--sp-line-2: #d9d9e8;

	--sp-blue: #3647ff;
	--sp-blue-600: #2433e0;
	--sp-blue-50: #eef0ff;
	--sp-blue-100: #dde1ff;
	--sp-violet: #8b5cf6;
	--sp-violet-50: #f2edff;
	/* The former lime accent now uses the brand blue; the token name is kept
	   so every component that referenced it follows. */
	--sp-lime: #3647ff;
	--sp-lime-50: #eef0ff;
	--sp-peach: #6366f1;
	--sp-peach-50: #eeeffe;
	--sp-cyan: #3b82f6;
	--sp-cyan-50: #eaf2ff;
	--sp-pink: #a855f7;

	--sp-ok: #3647ff;
	--sp-warn: #8b5cf6;
	--sp-err: #6d28d9;

	--sp-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
	--sp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--sp-max: 1240px;
	--sp-gutter: 28px;
	--sp-section: clamp(88px, 10vw, 140px);

	--sp-r-sm: 12px;
	--sp-r: 20px;
	--sp-r-lg: 28px;
	--sp-r-xl: 36px;

	--sp-shadow-sm: 0 1px 2px rgba(12, 12, 29, .05), 0 2px 6px rgba(12, 12, 29, .04);
	--sp-shadow: 0 2px 4px rgba(12, 12, 29, .04), 0 12px 32px -8px rgba(12, 12, 29, .12);
	--sp-shadow-lg: 0 4px 10px rgba(12, 12, 29, .04), 0 30px 70px -18px rgba(12, 12, 29, .22);
	--sp-shadow-blue: 0 10px 30px -8px rgba(54, 71, 255, .55);

	--sp-ease: cubic-bezier(.22, .61, .36, 1);
	--sp-spring: cubic-bezier(.34, 1.56, .64, 1);
	--sp-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------------------------------------------------------------- Dark mode */
/* Set on <html> before first paint (header.php) from the visitor's choice or
   their system setting; the toggle in the header switches it. */
html[data-theme="dark"] {
	color-scheme: dark;
	--sp-bg: #09091a;
	--sp-surface: #131329;
	--sp-glass: rgba(19, 19, 41, .8);
	--sp-header-bg: #131329;
	--sp-dark: #1a1a36;
	--sp-ink: #f1f1fb;
	--sp-ink-2: #c9c9e0;
	--sp-muted: #9a9ab8;
	--sp-faint: #6c6c8c;
	--sp-line: rgba(255, 255, 255, .09);
	--sp-line-2: rgba(255, 255, 255, .16);
	--sp-blue-50: rgba(54, 71, 255, .17);
	--sp-blue-100: rgba(54, 71, 255, .28);
	--sp-violet-50: rgba(139, 92, 246, .17);
	--sp-lime-50: rgba(54, 71, 255, .17);
	--sp-peach-50: rgba(99, 102, 241, .16);
	--sp-cyan-50: rgba(59, 130, 246, .15);
	--sp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .3);
	--sp-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 32px -8px rgba(0, 0, 0, .6);
	--sp-shadow-lg: 0 4px 10px rgba(0, 0, 0, .3), 0 30px 70px -18px rgba(0, 0, 0, .75);
}
html[data-theme="dark"] .sp-dots { background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.3px); }
html[data-theme="dark"] .sp-blob { opacity: .32; }
html[data-theme="dark"] .sp-header .sp-logo--single img { filter: brightness(0) invert(1); }
html[data-theme="dark"] .sp-logo .sp-logo__main:not(:only-child),
html[data-theme="dark"] .sp-page3d__brand .sp-page3d__logo--light { display: none; }
html[data-theme="dark"] .sp-logo .sp-logo__alt,
html[data-theme="dark"] .sp-page3d__brand .sp-page3d__logo--dark { display: block; }
html[data-theme="dark"] .sp-footer__card,
html[data-theme="dark"] .sp-reach,
html[data-theme="dark"] .sp-about,
html[data-theme="dark"] .sp-card--ink,
html[data-theme="dark"] .sp-tk-value,
html[data-theme="dark"] .sp-tk-tile--ink { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
html[data-theme="dark"] .sp-card,
html[data-theme="dark"] .sp-why__card,
html[data-theme="dark"] .sp-aud,
html[data-theme="dark"] .sp-step,
html[data-theme="dark"] .sp-stage__main,
html[data-theme="dark"] .sp-form-sheet,
html[data-theme="dark"] .sp-accordion__item,
html[data-theme="dark"] .sp-tk-card { border-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .sp-input,
html[data-theme="dark"] .sp-select,
html[data-theme="dark"] .sp-textarea { background: rgba(255, 255, 255, .04); color: var(--sp-ink); }
/* Tracker charts draw their labels with fixed dark fills. */
html[data-theme="dark"] .sp-tk-flow [fill="#0C0C1D"] { fill: #e6e6f5; }
html[data-theme="dark"] .sp-tk-flow [fill="#6E6E8A"] { fill: #9a9ab8; }

/* Accent text: the brand blue is too dark to read as text on near-black, so
   dark mode uses a lighter tint of it for text only (buttons and surfaces
   keep #3647ff). */
html[data-theme="dark"] h1 em,
html[data-theme="dark"] h2 em,
html[data-theme="dark"] h3 em,
html[data-theme="dark"] .sp-404__title em,
html[data-theme="dark"] .sp-stage__label,
html[data-theme="dark"] .sp-tk-story__label,
html[data-theme="dark"] .sp-404__tracker small,
html[data-theme="dark"] .sp-link,
html[data-theme="dark"] .sp-prose a,
html[data-theme="dark"] .sp-privacy-note a,
html[data-theme="dark"] .sp-chip--blue,
html[data-theme="dark"] .sp-chip--ok,
html[data-theme="dark"] .sp-peek--links span { color: #8a94ff; }
html[data-theme="dark"] .sp-tracker-card { --tone: #8a94ff; }
/* The CTA card is brand blue: its accent stays white in both themes. */
html[data-theme="dark"] .sp-cta h2 em { color: #fff; }
html[data-theme="dark"] .sp-statement .sp-w.is-lit em,
html[data-theme="dark"] .sp-statement em { color: #8a94ff; }

/* Dark pills would vanish on dark cards: lift them. */
html[data-theme="dark"] .sp-menu__toggle { background: var(--sp-blue); }
html[data-theme="dark"] .sp-menu__toggle i { background: #fff; color: var(--sp-blue); }
html[data-theme="dark"] .sp-btn--dark,
html[data-theme="dark"] .sp-tracker-card__cta,
html[data-theme="dark"] .sp-tk-action--dark,
html[data-theme="dark"] .sp-burger,
html[data-theme="dark"] .sp-404__tracker i { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
html[data-theme="dark"] .sp-tracker-card:hover .sp-tracker-card__cta i { color: #fff; }

/* Glass edges and soft panels that were tuned for a white page. */
html[data-theme="dark"] .sp-header__bar,
html[data-theme="dark"] .sp-tracker-feature__panel,
html[data-theme="dark"] .sp-404__tracker,
html[data-theme="dark"] .sp-tk-search { border-color: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .sp-note-card { background: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .sp-accordion__sign { background: rgba(255, 255, 255, .08); }

/* Theme toggle in the header. */
.sp-theme-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 42px;
	height: 42px;
	margin-left: 4px;
	border: 1px solid var(--sp-line-2);
	border-radius: 50%;
	background: var(--sp-surface);
	color: var(--sp-ink);
	cursor: pointer;
	overflow: hidden;
	transition: background .3s, border-color .3s, transform .45s var(--sp-spring);
}
.sp-theme-toggle:hover { transform: rotate(-12deg) scale(1.06); border-color: var(--sp-blue); }
.sp-theme-toggle svg { position: absolute; width: 18px; height: 18px; transition: transform .55s var(--sp-spring), opacity .3s; }
.sp-theme-toggle .sp-theme-toggle__moon { transform: translateY(130%) rotate(-60deg); opacity: 0; }
html[data-theme="dark"] .sp-theme-toggle .sp-theme-toggle__sun { transform: translateY(-130%) rotate(60deg); opacity: 0; }
html[data-theme="dark"] .sp-theme-toggle .sp-theme-toggle__moon { transform: none; opacity: 1; color: #c4a6ff; }

/* Page transitions between pages of the site (supported browsers only; others
   simply load the page). The header stays put while the content cross-fades. */
@view-transition { navigation: auto; }
.sp-header { view-transition-name: sp-header; }
::view-transition-old(root) { animation: sp-vt-out .28s var(--sp-ease) both; }
::view-transition-new(root) { animation: sp-vt-in .42s var(--sp-out) both; }
@keyframes sp-vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes sp-vt-in { from { opacity: 0; transform: translateY(14px); } }
/* The theme switch reveals the new colours in a circle from the toggle. */
html.sp-theme-switch::view-transition-old(root),
html.sp-theme-switch::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 110px;
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--sp-bg);
	color: var(--sp-ink-2);
	font-family: var(--sp-font);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 {
	margin: 0 0 .5em;
	font-family: var(--sp-display);
	color: var(--sp-ink);
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1.02;
}
h1 { font-size: clamp(3rem, 1.6rem + 5.6vw, 6.6rem); font-weight: 800; letter-spacing: -.035em; word-spacing: .06em; line-height: .98; }
h2 { font-size: clamp(2.3rem, 1.4rem + 3.2vw, 4.2rem); letter-spacing: -.03em; word-spacing: .05em; }
h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); letter-spacing: -.025em; line-height: 1.15; }
h4 { font-size: 1.05rem; letter-spacing: -.015em; line-height: 1.3; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--sp-blue); text-decoration: none; transition: color .2s var(--sp-ease); }
a:hover { color: var(--sp-blue-600); }

ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
::selection { background: var(--sp-blue); color: #fff; }
:focus-visible { outline: 3px solid var(--sp-blue); outline-offset: 3px; border-radius: 8px; }

/* --------------------------------------------------------------- Utilities */
.sp-container { width: 100%; max-width: var(--sp-max); margin-inline: auto; padding-inline: var(--sp-gutter); }
.sp-container--narrow { max-width: 860px; }
.sp-section { position: relative; padding-block: var(--sp-section); }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sp-skip-link {
	position: absolute; left: -9999px; top: 12px; z-index: 300;
	background: var(--sp-blue); color: #fff; padding: 12px 22px; border-radius: 999px; font-weight: 600;
}
.sp-skip-link:focus { left: 20px; color: #fff; }

/* A pill label that opens most sections. */
.sp-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 16px 7px 8px;
	border-radius: 999px;
	background: var(--sp-surface);
	border: 1px solid var(--sp-line);
	box-shadow: var(--sp-shadow-sm);
	font-size: .85rem;
	font-weight: 600;
	color: var(--sp-ink);
	margin: 0 0 26px;
}
.sp-badge__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	padding: 0 9px;
	border-radius: 999px;
	background: var(--sp-blue);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .02em;
}

.sp-lede { font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem); line-height: 1.6; color: var(--sp-muted); max-width: 60ch; }

/* A highlighted phrase in brand gradient. */
.sp-hl {
	position: relative;
	display: inline-block;
	font-style: normal;
	color: transparent;
	background: linear-gradient(100deg, var(--sp-blue) 10%, var(--sp-violet) 90%);
	-webkit-background-clip: text;
	background-clip: text;
	padding: 0 .04em;
}
h1 em, h2 em, h3 em { font-style: normal; }
h2 em { color: var(--sp-blue); }

/* A hand-drawn underline that draws itself. */
.sp-scribble { position: relative; display: inline-block; white-space: nowrap; }
.sp-scribble svg {
	position: absolute;
	left: -2%;
	bottom: -.1em;
	width: 104%;
	height: .3em;
	overflow: visible;
	z-index: -1;
}
.sp-scribble path {
	fill: none;
	stroke: var(--sp-lime);
	stroke-width: 12;
	stroke-linecap: round;
	stroke-dasharray: 700;
	stroke-dashoffset: 0;
}
.sp-js .sp-scribble path { stroke-dashoffset: 700; }
.sp-js .is-in .sp-scribble path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--sp-out) .8s; }

.sp-section-head { max-width: 820px; margin-bottom: clamp(48px, 5vw, 72px); }
.sp-section-head--center { margin-inline: auto; text-align: center; }
.sp-section-head--center .sp-lede { margin-inline: auto; }
.sp-section-head h2 { margin-bottom: 18px; }

/* ------------------------------------------------------------- Colour blobs */
.sp-blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.sp-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: .55;
	animation: sp-drift 18s ease-in-out infinite alternate;
}
.sp-blob--blue { background: #7d88ff; width: 560px; height: 560px; top: -180px; left: -120px; }
.sp-blob--violet { background: #c4a6ff; width: 480px; height: 480px; top: -80px; right: -120px; animation-delay: -6s; }
.sp-blob--lime { background: #b9c0ff; width: 420px; height: 420px; bottom: -160px; left: 30%; animation-delay: -11s; opacity: .7; }
.sp-blob--peach { background: #c7c9ff; width: 360px; height: 360px; bottom: 10%; right: 12%; animation-delay: -3s; }
.sp-blob--cyan { background: #bcd4ff; width: 380px; height: 380px; top: 30%; left: 8%; animation-delay: -8s; }
@keyframes sp-drift {
	0% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(60px, 40px) scale(1.12); }
	100% { transform: translate(-40px, 70px) scale(.94); }
}

/* Faint dot grid, masked to fade out. */
.sp-dots {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	background-image: radial-gradient(rgba(12, 12, 29, .12) 1px, transparent 1.3px);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 20%, transparent 75%);
}

/* ---------------------------------------------------------------- Buttons */
.sp-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 8px 8px 8px 24px;
	min-height: 56px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-family: var(--sp-font);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: background .25s var(--sp-ease), color .25s var(--sp-ease), box-shadow .3s var(--sp-ease), border-color .25s var(--sp-ease);
	will-change: transform;
}
.sp-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex: none;
	transition: transform .4s var(--sp-spring);
}
.sp-btn__icon svg { width: 17px; height: 17px; }
.sp-btn:hover .sp-btn__icon { transform: rotate(-45deg); }

.sp-btn--primary { background: var(--sp-blue); color: #fff; box-shadow: var(--sp-shadow-blue); }
.sp-btn--primary .sp-btn__icon { background: #fff; color: var(--sp-blue); }
.sp-btn--primary:hover { background: var(--sp-blue-600); color: #fff; }

.sp-btn--dark { background: var(--sp-dark); color: #fff; }
.sp-btn--dark .sp-btn__icon { background: var(--sp-lime); color: #fff; }
.sp-btn--dark:hover { color: #fff; background: #1e1e38; }

.sp-btn--light { background: #fff; color: var(--sp-dark); box-shadow: var(--sp-shadow); }
.sp-btn--light .sp-btn__icon { background: var(--sp-dark); color: #fff; }
.sp-btn--light:hover { color: var(--sp-ink); }

.sp-btn--ghost { background: var(--sp-glass); color: var(--sp-ink); border-color: var(--sp-line-2); backdrop-filter: blur(8px); }
.sp-btn--ghost .sp-btn__icon { background: var(--sp-bg); color: var(--sp-ink); }
.sp-btn--ghost:hover { color: var(--sp-ink); border-color: var(--sp-ink); }

/* Plain, compact buttons used inside forms and tools. */
.sp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 26px;
	border-radius: 999px;
	border: 0;
	background: var(--sp-blue);
	color: #fff;
	font-family: var(--sp-font);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: var(--sp-shadow-blue);
	transition: background .2s var(--sp-ease), transform .2s var(--sp-ease);
}
.sp-button:hover { background: var(--sp-blue-600); color: #fff; transform: translateY(-1px); }
.sp-button[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.sp-button--block { width: 100%; }
.sp-button--ghost { background: var(--sp-bg); color: var(--sp-ink); box-shadow: none; }
.sp-button--ghost:hover { background: var(--sp-line); color: var(--sp-ink); }

.sp-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--sp-ink); }
.sp-link svg { width: 16px; height: 16px; transition: transform .3s var(--sp-spring); }
.sp-link:hover { color: var(--sp-blue); }
.sp-link:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------- 3D icons */
/* A glossy tile: base gradient, specular highlight, inner rim and a soft
   contact shadow. The glyph sits slightly embossed on top. */
.sp-i3d {
	--c1: #6f7bff;
	--c2: #3647ff;
	--c3: #1f2bc2;
	--glow: rgba(54, 71, 255, .5);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 20px;
	background:
		radial-gradient(120% 90% at 30% 12%, rgba(255, 255, 255, .6), transparent 45%),
		linear-gradient(155deg, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
	box-shadow:
		inset 0 2px 1px rgba(255, 255, 255, .6),
		inset 0 -6px 12px rgba(0, 0, 0, .18),
		0 14px 22px -10px var(--glow),
		0 4px 8px -2px rgba(12, 12, 29, .12);
	transition: transform .5s var(--sp-spring);
}
.sp-i3d::after {
	content: "";
	position: absolute;
	inset: 6% 16% auto 16%;
	height: 32%;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
	pointer-events: none;
}
.sp-i3d__glyph { position: relative; z-index: 1; display: flex; color: #fff; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .22)); }
.sp-i3d__glyph svg { width: 28px; height: 28px; stroke-width: 2.1; }
.sp-i3d--lg { width: 84px; height: 84px; border-radius: 26px; }
.sp-i3d--lg .sp-i3d__glyph svg { width: 36px; height: 36px; }
.sp-i3d--xl { width: 112px; height: 112px; border-radius: 34px; }
.sp-i3d--xl .sp-i3d__glyph svg { width: 48px; height: 48px; }

.sp-i3d--violet { --c1: #c3a4ff; --c2: #8b5cf6; --c3: #5b2fd1; --glow: rgba(139, 92, 246, .5); }
.sp-i3d--lime { --c1: #6f7bff; --c2: #3647ff; --c3: #1f2bc2; --glow: rgba(54, 71, 255, .5); }
.sp-i3d--peach { --c1: #b8bbff; --c2: #6366f1; --c3: #4338ca; --glow: rgba(99, 102, 241, .5); }
.sp-i3d--cyan { --c1: #a9c8ff; --c2: #3b82f6; --c3: #1d4ed8; --glow: rgba(59, 130, 246, .5); }
.sp-i3d--pink { --c1: #dcc2ff; --c2: #a855f7; --c3: #7e22ce; --glow: rgba(168, 85, 247, .5); }
.sp-i3d--ink { --c1: #50507a; --c2: #1b1b33; --c3: #06060f; --glow: rgba(12, 12, 29, .5); }

/* Icons wobble when their card is hovered. */
.sp-card:hover .sp-i3d,
.sp-tracker-card:hover .sp-i3d,
.sp-aud:hover .sp-i3d,
.sp-step:hover .sp-i3d { transform: translateY(-4px) rotate(-10deg) scale(1.08); }

/* ------------------------------------------------------------------ Header */
.sp-header {
	position: fixed;
	top: 14px;
	left: 0;
	right: 0;
	z-index: 100;
	pointer-events: none;
	transition: top .35s var(--sp-ease);
}

/* Logged-in visitors: sit below the WordPress admin bar (32px, 46px on
   small screens; below 600px it scrolls away with the page). */
.admin-bar .sp-header { top: 46px; }
@media screen and (max-width: 782px) {
	.admin-bar .sp-header,
	.admin-bar .sp-header.is-stuck { top: 56px; }
}
@media screen and (max-width: 600px) {
	.admin-bar .sp-header.is-stuck { top: 10px; }
}
.sp-header__bar {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 20px;
	width: calc(100% - 2 * var(--sp-gutter));
	max-width: 1180px;
	margin-inline: auto;
	padding: 8px 8px 8px 22px;
	background: var(--sp-header-bg);
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: 999px;
	box-shadow: 0 1px 0 rgba(12, 12, 29, .04), 0 10px 40px -12px rgba(12, 12, 29, .18);
	transition: max-width .5s var(--sp-out);
}

.sp-logo { display: inline-flex; align-items: center; flex: none; }
.sp-logo img { height: 35px; width: auto; }
.sp-logo .sp-logo__alt,
.sp-page3d__brand .sp-page3d__logo--dark { display: none; }

.sp-nav { margin-left: auto; }
.sp-nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.sp-nav a {
	display: block;
	padding: 9px 14px;
	border-radius: 999px;
	font-size: .92rem;
	font-weight: 500;
	color: var(--sp-ink-2);
	white-space: nowrap;
	transition: background .2s var(--sp-ease), color .2s var(--sp-ease);
}
.sp-nav a:hover { background: var(--sp-blue-50); color: var(--sp-blue); }

/* "View your report": a direct link, or a menu when several trackers are public. */
.sp-menu { position: relative; flex: none; }
.sp-menu__toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	padding: 0 7px 0 20px;
	border: 0;
	border-radius: 999px;
	background: var(--sp-dark);
	color: #fff;
	font-family: var(--sp-font);
	font-size: .92rem;
	font-weight: 600;
	cursor: pointer;
}
.sp-menu__toggle i {
	display: inline-flex;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--sp-lime);
	color: #fff;
	align-items: center;
	justify-content: center;
	transition: transform .4s var(--sp-spring);
}
.sp-menu__toggle i svg { width: 15px; height: 15px; }
.sp-menu__toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.sp-menu__toggle--link { text-decoration: none; }
.sp-menu__toggle--link:hover { color: #fff; }
.sp-menu__toggle--link:hover i { transform: rotate(-45deg); }
.sp-menu__panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	width: 340px;
	padding: 10px;
	background: var(--sp-surface);
	border: 1px solid var(--sp-line);
	border-radius: 24px;
	box-shadow: var(--sp-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) scale(.96);
	transform-origin: top right;
	transition: opacity .25s var(--sp-ease), transform .4s var(--sp-spring), visibility .25s;
}
.sp-menu.is-open .sp-menu__panel { opacity: 1; visibility: visible; transform: none; }
.sp-menu__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px;
	border-radius: 16px;
	color: var(--sp-ink);
	transition: background .2s var(--sp-ease);
}
.sp-menu__item:hover { background: var(--sp-bg); color: var(--sp-ink); }
.sp-menu__item:hover .sp-i3d { transform: rotate(-10deg) scale(1.08); }
.sp-menu__item .sp-i3d { width: 46px; height: 46px; border-radius: 14px; }
.sp-menu__item .sp-i3d__glyph svg { width: 20px; height: 20px; }
.sp-menu__item b { display: block; font-family: var(--sp-display); font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; }
.sp-menu__item small { display: block; font-size: .8rem; color: var(--sp-muted); }

.sp-burger {
	display: none;
	flex: none;
	margin-left: auto;
	width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	background: var(--sp-dark);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
}
.sp-burger span { display: block; position: relative; width: 16px; height: 2px; background: #fff; border-radius: 2px; }
.sp-burger span::before, .sp-burger span::after {
	content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: #fff; border-radius: 2px;
	transition: transform .35s var(--sp-spring);
}
.sp-burger span::before { top: -5px; }
.sp-burger span::after { top: 5px; }
.sp-burger[aria-expanded="true"] span { background: transparent; }
.sp-burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.sp-burger[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

.sp-mobile-nav {
	display: none;
	pointer-events: auto;
	width: calc(100% - 2 * var(--sp-gutter));
	margin: 10px auto 0;
	padding: 12px;
	background: var(--sp-surface);
	border-radius: 28px;
	box-shadow: var(--sp-shadow-lg);
	max-height: calc(100svh - 110px);
	overflow-y: auto;
}
.sp-mobile-nav.is-open { display: block; animation: sp-pop .4s var(--sp-spring); }
.sp-mobile-nav ul { list-style: none; margin: 0 0 8px; padding: 0; }
.sp-mobile-nav ul a { display: block; padding: 13px 12px; font-size: 1.05rem; font-weight: 500; color: var(--sp-ink); border-radius: 14px; }
.sp-mobile-nav ul a:hover { background: var(--sp-bg); }
.sp-mobile-nav__trackers { border-top: 1px solid var(--sp-line); padding-top: 8px; }
@keyframes sp-pop { from { opacity: 0; transform: translateY(-10px) scale(.96); } }

@media (max-width: 1080px) {
	.sp-nav, .sp-menu { display: none; }
	.sp-burger { display: flex; }
}

/* -------------------------------------------------------------------- Hero */
.sp-hero {
	position: relative;
	padding: calc(110px + clamp(40px, 5vw, 70px)) 0 clamp(60px, 7vw, 100px);
	overflow: hidden;
	isolation: isolate;
}
.sp-hero__inner { position: relative; text-align: center; }
.sp-hero h1 { max-width: none; margin: 0 auto 28px; font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.6rem); }
@media (max-width: 1080px) { .sp-hero__br { display: none; } .sp-hero h1 { max-width: 14ch; } }
.sp-hero__lede { font-size: clamp(1.08rem, 1rem + .35vw, 1.26rem); color: var(--sp-muted); max-width: 62ch; margin: 0 auto 38px; }
.sp-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.sp-hero__note { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: .9rem; color: var(--sp-muted); }
.sp-hero__note svg { width: 18px; height: 18px; color: var(--sp-ok); }

/* Hero composition: a sample report with readouts floating around it. */
.sp-stage {
	position: relative;
	max-width: 1080px;
	margin: clamp(56px, 6vw, 90px) auto 0;
	perspective: 1600px;
}
.sp-stage__main {
	position: relative;
	z-index: 2;
	width: min(780px, 100%);
	margin-inline: auto;
	background: var(--sp-surface);
	border: 1px solid var(--sp-line);
	border-radius: 30px;
	box-shadow: var(--sp-shadow-lg);
	padding: 12px;
	text-align: left;
	transform: rotateX(14deg) scale(.96);
	transform-origin: center top;
	transition: transform 1.4s var(--sp-out) .3s;
}
.sp-stage.is-in .sp-stage__main { transform: none; }
.sp-stage__chrome { display: flex; align-items: center; gap: 7px; padding: 6px 10px 14px; }
.sp-stage__chrome i { width: 11px; height: 11px; border-radius: 50%; }
.sp-stage__chrome i:nth-child(1) { background: #c4b5fd; }
.sp-stage__chrome i:nth-child(2) { background: #8b5cf6; }
.sp-stage__chrome i:nth-child(3) { background: var(--sp-blue); }
.sp-stage__chrome span {
	margin-inline: auto;
	padding: 5px 18px;
	border-radius: 999px;
	background: var(--sp-bg);
	font-size: .76rem;
	color: var(--sp-muted);
}
.sp-stage__body { background: var(--sp-bg); border-radius: 22px; padding: clamp(18px, 2.4vw, 28px); }
.sp-stage__head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 18px; }
.sp-stage__label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-blue); }
.sp-stage__title { font-family: var(--sp-display); font-weight: 700; font-size: clamp(1rem, .9rem + .5vw, 1.3rem); letter-spacing: -.02em; color: var(--sp-ink); line-height: 1.2; margin: 6px 0 0; max-width: 30ch; }
.sp-stage__id { flex: none; padding: 7px 13px; border-radius: 999px; background: var(--sp-blue); color: #fff; font-size: .78rem; font-weight: 600; }
.sp-stage__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.sp-tile { border-radius: 16px; padding: 14px; color: #fff; }
.sp-tile b { display: block; font-family: var(--sp-display); font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.sp-tile span { display: block; margin-top: 6px; font-size: .72rem; opacity: .85; }
.sp-tile--blue { background: var(--sp-blue); }
.sp-tile--violet { background: var(--sp-violet); }
.sp-tile--lime { background: var(--sp-lime); color: #fff; }
.sp-tile--ink { background: var(--sp-dark); }
.sp-stage__rows { display: grid; gap: 7px; }
.sp-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	background: var(--sp-surface);
	border-radius: 14px;
	font-size: .84rem;
	color: var(--sp-ink);
	font-weight: 500;
}
.sp-row__n { width: 24px; height: 24px; border-radius: 50%; background: var(--sp-blue-50); color: var(--sp-blue); font-size: .7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sp-row__url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 600;
	background: var(--sp-bg);
	color: var(--sp-muted);
	white-space: nowrap;
}
.sp-chip--blue { background: var(--sp-blue-50); color: var(--sp-blue); }
.sp-chip--ok { background: var(--sp-blue-50); color: var(--sp-blue); }
.sp-chip--ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Floating readouts around the report, moved by the pointer (see motion.js). */
.sp-float { position: absolute; z-index: 3; will-change: transform; }
.sp-float__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px 12px 12px;
	background: var(--sp-surface);
	border: 1px solid var(--sp-line);
	border-radius: 20px;
	box-shadow: var(--sp-shadow-lg);
	animation: sp-bob 6s ease-in-out infinite;
	white-space: nowrap;
}
.sp-float__inner .sp-i3d { width: 46px; height: 46px; border-radius: 14px; }
.sp-float__inner .sp-i3d__glyph svg { width: 21px; height: 21px; }
.sp-float b { display: block; font-family: var(--sp-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; color: var(--sp-ink); line-height: 1; }
.sp-float small { display: block; font-size: .78rem; color: var(--sp-muted); margin-top: 3px; }
.sp-float--a { top: 16%; left: -1%; }
.sp-float--b { top: 2%; right: 0; }
.sp-float--b .sp-float__inner { animation-delay: -2s; }
.sp-float--c { bottom: 30%; right: -9%; }
.sp-float--c .sp-float__inner { animation-delay: -4s; }
.sp-float--d { bottom: -5%; left: -4%; }
.sp-float--d .sp-float__inner { animation-delay: -1s; padding: 10px; gap: 6px; }
@keyframes sp-bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }

.sp-lang { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px; font-size: .74rem; font-weight: 800; color: #fff; }
.sp-lang:nth-child(1) { background: var(--sp-blue); }
.sp-lang:nth-child(2) { background: var(--sp-violet); }
.sp-lang:nth-child(3) { background: var(--sp-peach); }
.sp-lang:nth-child(4) { background: var(--sp-cyan); }
.sp-lang:nth-child(5) { background: var(--sp-dark); }

/* Glossy file tiles. */
.sp-file {
	position: absolute;
	z-index: 1;
	width: 92px;
	height: 112px;
	border-radius: 18px;
	display: flex;
	align-items: flex-end;
	padding: 14px;
	font-family: var(--sp-display);
	font-weight: 800;
	font-size: 1.05rem;
	color: #fff;
	overflow: hidden;
	box-shadow: inset 0 2px 1px rgba(255, 255, 255, .5), inset 0 -8px 14px rgba(0, 0, 0, .15), var(--sp-shadow-lg);
}
.sp-file::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	border-radius: 0 0 0 12px;
	background: rgba(255, 255, 255, .35);
}
.sp-file--xls { background: linear-gradient(155deg, #7d88ff, var(--sp-blue)); }
.sp-file--pdf { background: linear-gradient(155deg, #9aa3ff, #4338ca); }
.sp-file--url { background: linear-gradient(155deg, #c3a4ff, var(--sp-violet)); }
.sp-stage .sp-file { animation: sp-bob 7s ease-in-out infinite; }
.sp-stage .sp-file--xls { left: 5%; top: 46%; animation-delay: -3s; }
.sp-stage .sp-file--pdf { right: 7%; top: 18%; animation-delay: -5s; }

/* Hero live demo: an illustration, typed and built by home.js. */
.sp-demo-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	padding: 6px 6px 6px 14px;
	background: var(--sp-surface);
	border: 1.5px solid var(--sp-line);
	border-radius: 999px;
	color: var(--sp-muted);
	overflow: hidden;
	transition: border-color .25s, box-shadow .25s;
}
.sp-demo-search > svg { width: 18px; height: 18px; flex: none; }
.sp-demo-search__field { position: relative; flex: 1; display: flex; align-items: center; min-height: 24px; font-size: .95rem; font-weight: 600; color: var(--sp-ink); }
.sp-demo-search__ph { position: absolute; left: 0; font-weight: 400; color: var(--sp-faint); opacity: 0; transition: opacity .2s; }
.sp-demo-search__caret { display: none; width: 2px; height: 18px; margin-left: 2px; background: var(--sp-blue); animation: sp-caret 1s steps(1) infinite; }
@keyframes sp-caret { 50% { opacity: 0; } }
.sp-demo-search__btn { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 5px 5px 5px 14px; border-radius: 999px; background: var(--sp-blue); color: #fff; font-size: .8rem; font-weight: 600; transition: transform .25s var(--sp-spring), box-shadow .25s; }
.sp-demo-search__btn i { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--sp-blue); }
.sp-demo-search__btn svg { width: 13px; height: 13px; }
.sp-demo-search__bar { position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--sp-blue), var(--sp-violet)); }
@keyframes sp-turn { to { transform: rotate(360deg); } }

.sp-stage.is-demo.is-empty .sp-demo-search__ph { opacity: 1; }
.sp-stage.is-demo.is-empty .sp-demo-search__caret,
.sp-stage.is-demo.is-typing .sp-demo-search__caret { display: inline-block; }
.sp-stage.is-demo.is-typing .sp-demo-search { border-color: var(--sp-blue); box-shadow: 0 0 0 4px var(--sp-blue-50); }
.sp-stage.is-demo.is-pressed .sp-demo-search__btn { transform: scale(.92); box-shadow: 0 0 0 6px var(--sp-blue-50); }
.sp-stage.is-demo.is-loading .sp-demo-search__btn i { animation: sp-turn .8s linear infinite; }
.sp-stage.is-demo.is-loading .sp-demo-search__bar { width: 100%; transition: width .9s var(--sp-ease); }

.sp-stage.is-demo .sp-stage__head,
.sp-stage.is-demo .sp-tile,
.sp-stage.is-demo .sp-stage__rows .sp-row { opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .4s var(--sp-ease), transform .7s var(--sp-spring); }
.sp-stage.is-demo .sp-float,
.sp-stage.is-demo > .sp-file { opacity: 0; transition: opacity .5s var(--sp-ease); }
.sp-stage.is-demo.is-built .sp-stage__head,
.sp-stage.is-demo.is-built .sp-tile,
.sp-stage.is-demo.is-built .sp-stage__rows .sp-row { opacity: 1; transform: none; transition-delay: var(--dd, 0ms); }
.sp-stage.is-demo.is-built .sp-float,
.sp-stage.is-demo.is-built > .sp-file { opacity: 1; transition-delay: var(--dd, 0ms); }


/* ---------------------------------------------------------- Logo wall */
.sp-services { padding: clamp(44px, 5vw, 72px) 0 clamp(8px, 2vw, 24px); }
.sp-services__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 30px; margin-bottom: 22px; }
.sp-services__label { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--sp-font); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-muted); }
.sp-services__count { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 8px; background: var(--sp-blue); color: #fff; font-family: var(--sp-display); font-size: .82rem; letter-spacing: 0; }
.sp-services__body { margin: 0; font-size: .95rem; color: var(--sp-muted); }
.sp-services__text { max-width: 640px; }
.sp-services__help { margin: 6px 0 0; font-size: .9rem; color: var(--sp-muted); }
.sp-services__help a { font-weight: 600; color: var(--sp-blue); text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="dark"] .sp-services__help a { color: #8a94ff; }
.sp-services__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--sp-surface);
	border: 1px solid var(--sp-line-2);
	border-radius: 28px;
	overflow: hidden;
	box-shadow: var(--sp-shadow-sm);
}
.sp-services__grid li { border-right: 1px solid var(--sp-line); border-bottom: 1px solid var(--sp-line); }
.sp-services__grid li:nth-child(4n) { border-right: 0; }
.sp-services__grid li:nth-last-child(-n + 4) { border-bottom: 0; }
.sp-service-cell {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 156px;
	padding: 28px 22px;
	overflow: hidden;
	isolation: isolate;
	color: var(--sp-ink);
	transition: background .4s var(--sp-ease);
}
.sp-service-cell::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(54, 71, 255, .09), transparent 70%);
	opacity: 0;
	transition: opacity .4s var(--sp-ease);
}
.sp-service-cell::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--sp-blue), var(--sp-violet));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .55s var(--sp-out);
}
.sp-service-cell img {
	height: calc(var(--h, 40px) * 1.15);
	width: auto;
	max-width: 86%;
	object-fit: contain;
	filter: grayscale(1) contrast(1.15);
	opacity: .62;
	transition: filter .45s var(--sp-ease), opacity .45s var(--sp-ease), transform .6s var(--sp-spring);
}
.sp-service-cell__n { position: absolute; top: 14px; left: 16px; font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: var(--sp-faint); transition: color .3s; }
.sp-service-cell__name { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: .74rem; font-weight: 600; color: var(--sp-muted); opacity: 0; transform: translateY(8px); transition: opacity .35s var(--sp-ease), transform .5s var(--sp-spring); }
.sp-service-cell__go { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sp-blue); color: #fff; opacity: 0; transform: scale(.4) rotate(-45deg); transition: opacity .3s, transform .5s var(--sp-spring); }
.sp-service-cell__go svg { width: 14px; height: 14px; }
.sp-service-cell:hover,
.sp-service-cell:focus-visible { color: var(--sp-ink); }
.sp-service-cell:hover::before,
.sp-service-cell:focus-visible::before { opacity: 1; }
.sp-service-cell:hover::after,
.sp-service-cell:focus-visible::after { transform: scaleX(1); }
.sp-service-cell:hover img,
.sp-service-cell:focus-visible img { filter: none; opacity: 1; transform: translateY(-8px) scale(1.05); }
.sp-service-cell:hover .sp-service-cell__name,
.sp-service-cell:focus-visible .sp-service-cell__name { opacity: 1; transform: none; }
.sp-service-cell:hover .sp-service-cell__go,
.sp-service-cell:focus-visible .sp-service-cell__go { opacity: 1; transform: none; }
.sp-service-cell:hover .sp-service-cell__n { color: var(--sp-blue); }
@media (hover: none) {
	.sp-service-cell img { filter: none; opacity: 1; }
}
/* Dark mode: white marks by default; on hover the logo shows in colour on a
   light plate, since several marks have dark lettering. */
html[data-theme="dark"] .sp-service-cell img { filter: grayscale(1) brightness(0) invert(1); opacity: .62; }
html[data-theme="dark"] .sp-service-cell:hover,
html[data-theme="dark"] .sp-service-cell:focus-visible { background: #f4f4fb; }
html[data-theme="dark"] .sp-service-cell:hover img,
html[data-theme="dark"] .sp-service-cell:focus-visible img { filter: none; opacity: 1; }
html[data-theme="dark"] .sp-service-cell:hover .sp-service-cell__name { color: #3d3d5c; }
@media (hover: none) {
	html[data-theme="dark"] .sp-service-cell img { filter: grayscale(1) brightness(0) invert(1); opacity: .8; }
}

/* ------------------------------------------------- Coverage board (reach) */
.sp-reach-wrap { padding-top: 0; }
.sp-boardsec { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.sp-boardsec__text h2 { margin: 18px 0 16px; font-size: clamp(2rem, 1.15rem + 2.3vw, 3.3rem); }
.sp-boardsec__text h2 em { display: inline; }
.sp-boardsec__text h2 em { color: transparent; background: linear-gradient(90deg, var(--sp-blue), var(--sp-violet)); -webkit-background-clip: text; background-clip: text; }
.sp-boardsec__text .sp-badge svg { width: 16px; height: 16px; color: var(--sp-blue); }
.sp-boardsec__features { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.sp-boardsec__features li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--sp-surface); border: 1px solid var(--sp-line); box-shadow: var(--sp-shadow-sm); font-size: .86rem; font-weight: 600; color: var(--sp-ink); }
.sp-boardsec__features svg { width: 15px; height: 15px; color: var(--sp-blue); }
.sp-boardsec__caption { margin: 18px 0 0; font-size: .8rem; color: var(--sp-faint); }

.sp-board {
	--tile: clamp(15px, .45vw + 10.5px, 18px);
	position: relative;
	padding: clamp(14px, 1.6vw, 22px);
	border-radius: 30px;
	background: linear-gradient(180deg, #13132a, #0b0b1a);
	box-shadow: var(--sp-shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .08);
	color: rgba(255, 255, 255, .62);
	font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
	overflow: hidden;
}
.sp-board::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(600px 220px at 50% -40px, rgba(54, 71, 255, .3), transparent 70%);
	pointer-events: none;
}
.sp-board__clocks { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.sp-board__clock { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); }
.sp-board__clock small { font-size: .62rem; font-weight: 700; letter-spacing: .16em; color: rgba(255, 255, 255, .45); }
.sp-board__clock b { font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; color: #fff; font-variant-numeric: tabular-nums; }
.sp-board__bar { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sp-board__live { display: inline-flex; align-items: center; gap: 8px; color: #8a94ff; }
.sp-board__live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #8a94ff; }
.sp-board__live i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #8a94ff; animation: sp-ping 2s cubic-bezier(0, 0, .2, 1) infinite; }
.sp-board__table { position: relative; }
.sp-board__head,
.sp-board__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px; }
.sp-board__head { padding-top: 6px; padding-bottom: 6px; font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .38); }
.sp-board__head span:nth-child(1) { width: calc(14 * (var(--tile) + 2px)); }
.sp-board__head span:nth-child(2) { width: calc(10 * (var(--tile) + 2px)); }
.sp-board__head span:nth-child(3) { width: calc(4 * (var(--tile) + 2px)); }
.sp-board__row { padding-top: 7px; padding-bottom: 7px; border-top: 1px solid rgba(255, 255, 255, .05); transition: background .6s; border-radius: 8px; }
.sp-board__row.is-new { animation: sp-row-glow 1.6s var(--sp-ease); }
@keyframes sp-row-glow { 0% { background: rgba(54, 71, 255, .22); } 100% { background: transparent; } }
.sp-flap { display: inline-flex; gap: 2px; perspective: 300px; }
.sp-flap i {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tile);
	height: calc(var(--tile) * 1.5);
	border-radius: 3px;
	background: linear-gradient(180deg, #24244a 0 50%, #1d1d3d 50% 100%);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .04);
	color: #f1f1fb;
	font-size: calc(var(--tile) * .78);
	font-style: normal;
	font-weight: 700;
	line-height: 1;
}
.sp-flap i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .55); }
.sp-flap i.is-flip { animation: sp-flip .14s ease-in-out; }
@keyframes sp-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(-75deg); filter: brightness(1.4); } 100% { transform: rotateX(0); } }
.sp-board__status .sp-flap i { background: linear-gradient(180deg, #2a2f86 0 50%, #242977 50% 100%); color: #c9ceff; }
@media (max-width: 1080px) {
	.sp-boardsec { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
	.sp-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 22px; }
	.sp-services__grid li:nth-child(4n) { border-right: 1px solid var(--sp-line); }
	.sp-services__grid li:nth-child(2n) { border-right: 0; }
	.sp-services__grid li:nth-last-child(-n + 4) { border-bottom: 1px solid var(--sp-line); }
	.sp-services__grid li:nth-last-child(-n + 2) { border-bottom: 0; }
	.sp-service-cell { height: 118px; padding: 22px 14px; }
	.sp-service-cell img { max-width: 88%; height: calc(var(--h, 40px) * .82); }
	.sp-board { --tile: 15px; border-radius: 22px; }
	.sp-board__clocks { gap: 4px; }
	.sp-board__clock b { font-size: .86rem; }
	.sp-board__row .sp-flap:nth-child(2),
	.sp-board__head span:nth-child(2) { display: none; }
}

/* --------------------------------------------- Why: before / after */
.sp-why2__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 80px); align-items: end; }
.sp-why2__head h2 { margin: 18px 0 0; }
.sp-why2__head .sp-statement { font-size: clamp(1.25rem, .95rem + 1vw, 1.85rem); }
.sp-compare {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr);
	gap: 28px;
	align-items: stretch;
	margin-top: clamp(40px, 5vw, 64px);
}
.sp-compare__side { padding: clamp(26px, 3vw, 40px); border-radius: 30px; }
.sp-compare__side--before { background: var(--sp-surface); border: 1.5px dashed var(--sp-line-2); color: var(--sp-muted); }
.sp-compare__side--after {
	position: relative;
	overflow: hidden;
	background: linear-gradient(150deg, #4b5aff, var(--sp-blue) 55%, #2a37d9);
	color: #fff;
	box-shadow: var(--sp-shadow-blue), var(--sp-shadow-lg);
}
.sp-compare__side--after::before {
	content: "";
	position: absolute;
	width: 360px;
	height: 360px;
	right: -120px;
	top: -160px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 70%);
	pointer-events: none;
}
.sp-compare__label { display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; font-family: var(--sp-display); font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; color: var(--sp-ink); }
.sp-compare__side--after .sp-compare__label { color: #fff; }
.sp-compare__label span { align-self: flex-start; padding: 5px 11px; border-radius: 999px; font-family: var(--sp-font); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--sp-bg); color: var(--sp-muted); }
.sp-compare__side--after .sp-compare__label span { background: rgba(255, 255, 255, .18); color: #fff; }
.sp-compare__list { margin: 0; padding: 0; list-style: none; }
.sp-compare__list li { position: relative; display: flex; align-items: center; gap: 14px; padding: 15px 0; border-top: 1px dashed var(--sp-line-2); font-size: 1rem; }
.sp-compare__side--after .sp-compare__list li { border-top-color: rgba(255, 255, 255, .22); font-weight: 600; }
.sp-compare__list i { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; }
.sp-compare__list svg { width: 14px; height: 14px; }
.sp-compare__side--before .sp-compare__list i { background: var(--sp-bg); color: var(--sp-faint); }
.sp-compare__side--after .sp-compare__list i { background: #fff; color: var(--sp-blue); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35); }
/* Old way: each line is struck through as the panel comes into view. */
.sp-strike { text-decoration: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / 0 1.5px; transition: background-size .9s var(--sp-out) var(--d, 0ms); }
.sp-compare.is-in .sp-strike { background-size: 100% 1.5px; }
/* New way: each line arrives with its check. */
.sp-js .sp-compare__side--after .sp-compare__list li { opacity: 0; transform: translateX(-14px); transition: opacity .5s var(--sp-ease) var(--d, 0ms), transform .7s var(--sp-spring) var(--d, 0ms); }
.sp-js .sp-compare.is-in .sp-compare__side--after .sp-compare__list li { opacity: 1; transform: none; }
.sp-compare__pivot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; }
.sp-compare__pivot span {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: var(--sp-surface);
	color: var(--sp-blue);
	box-shadow: var(--sp-shadow-lg), 0 0 0 8px var(--sp-bg);
}
.sp-compare__pivot span::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--sp-blue); opacity: 0; animation: sp-ping 2.6s cubic-bezier(0, 0, .2, 1) infinite; }
.sp-compare__pivot svg { width: 22px; height: 22px; animation: sp-nudge 1.8s var(--sp-ease) infinite; }
@keyframes sp-nudge { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(4px); } }
.sp-why2__close { max-width: 72ch; margin: clamp(30px, 4vw, 44px) auto 0; text-align: center; font-size: 1.05rem; color: var(--sp-ink-2); }

/* -------------------------------- Distribution ID: ticket and wires */
.sp-connect__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 4vw, 60px); }
.sp-connect__head h2 { margin: 18px 0 0; }
.sp-connect__head .sp-lede { margin: 0; }
.sp-connect__head .sp-callout { margin-top: 20px; }
.sp-connect { display: grid; grid-template-columns: minmax(0, 330px) minmax(90px, 1fr) minmax(0, 1.5fr); align-items: stretch; }
.sp-connect__ticket-wrap { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.sp-connect__list-title { margin: 0; font-size: 1rem; color: var(--sp-muted); text-align: center; }
.sp-ticket {
	position: relative;
	padding: 22px 22px 18px;
	border-radius: 24px;
	background: linear-gradient(155deg, #4b5aff, var(--sp-blue) 55%, #2a37d9);
	color: #fff;
	box-shadow: var(--sp-shadow-blue), var(--sp-shadow-lg);
	overflow: hidden;
	isolation: isolate;
}
.sp-ticket::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%) no-repeat;
	background-size: 250% 100%;
	animation: sp-ticket-shine 5.5s ease-in-out infinite;
}
@keyframes sp-ticket-shine { 0%, 55% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
.sp-ticket__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 24px; }
.sp-ticket__brand { font-family: var(--sp-display); font-weight: 800; letter-spacing: -.02em; }
.sp-ticket__tag { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sp-ticket__label { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.sp-ticket__id { margin: 4px 0 0; font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.7rem); font-weight: 700; letter-spacing: .06em; line-height: 1.1; }
.sp-ticket__perf { position: relative; height: 1px; margin: 20px -22px 16px; border-top: 2px dashed rgba(255, 255, 255, .35); }
.sp-ticket__perf::before,
.sp-ticket__perf::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--sp-bg); }
.sp-ticket__perf::before { left: -11px; }
.sp-ticket__perf::after { right: -11px; }
.sp-ticket__bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .74rem; font-weight: 600; color: rgba(255, 255, 255, .78); }
.sp-ticket__code { display: inline-flex; align-items: stretch; gap: 2px; height: 26px; }
.sp-ticket__code i { display: block; background: rgba(255, 255, 255, .85); border-radius: 1px; }

.sp-connect__wire-box { position: relative; min-height: 0; }
.sp-connect__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Wires: a faint gradient track, and a single pulse that runs from the
   ticket to each item in turn; the item's port lights up as it arrives. */
.sp-wire { fill: none; stroke: url(#sp-wire-grad); stroke-width: 1.5; stroke-linecap: round; opacity: .32; }
.sp-wire--pulse {
	opacity: 1;
	stroke: url(#sp-pulse-grad);
	stroke-width: 3;
	stroke-dasharray: 22 300;
	stroke-dashoffset: 22;
	filter: drop-shadow(0 0 5px rgba(54, 71, 255, .75));
	animation: sp-pulse 3.4s cubic-bezier(.5, 0, .25, 1) var(--wd, 0s) infinite;
}
@keyframes sp-pulse {
	0% { stroke-dashoffset: 22; opacity: 0; }
	5% { opacity: 1; }
	48% { stroke-dashoffset: -100; opacity: 1; }
	54%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
.sp-wire__origin { fill: var(--sp-blue); stroke: var(--sp-bg); stroke-width: 3; }
.sp-connect__item::before { animation: sp-port 3.4s var(--sp-ease) var(--wd, 0s) infinite; }
@keyframes sp-port {
	0%, 42% { transform: scale(1); box-shadow: 0 0 0 4px var(--sp-blue-50); }
	50% { transform: scale(1.45); box-shadow: 0 0 0 9px rgba(54, 71, 255, .22), 0 0 14px rgba(54, 71, 255, .6); }
	64%, 100% { transform: scale(1); box-shadow: 0 0 0 4px var(--sp-blue-50); }
}
.sp-connect__item { animation: sp-hit 3.4s var(--sp-ease) var(--wd, 0s) infinite; }
@keyframes sp-hit {
	0%, 44%, 72%, 100% { border-color: var(--sp-line); }
	52% { border-color: rgba(54, 71, 255, .55); }
}
.sp-connect__list { display: grid; grid-auto-rows: 1fr; margin: 0; padding: 0; list-style: none; }
.sp-connect__list li { display: flex; align-items: center; padding: 6px 0; }
.sp-connect__item {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border-radius: 18px;
	background: var(--sp-surface);
	border: 1px solid var(--sp-line);
	box-shadow: var(--sp-shadow-sm);
	font-size: .98rem;
	font-weight: 500;
	color: var(--sp-ink-2);
	transition: transform .45s var(--sp-spring), border-color .3s;
}
.sp-connect__item::before { content: ""; position: absolute; left: -6px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--sp-blue); box-shadow: 0 0 0 4px var(--sp-blue-50); }
.sp-connect__item:hover { transform: translateX(6px); border-color: var(--sp-blue); }
.sp-connect__item .sp-i3d { width: 42px; height: 42px; border-radius: 13px; }
.sp-connect__item .sp-i3d__glyph svg { width: 19px; height: 19px; }

/* Mid-width desktops: a little more room so each item stays on one line. */
@media (min-width: 1081px) and (max-width: 1279px) {
	.sp-connect { grid-template-columns: minmax(0, 300px) minmax(60px, .7fr) minmax(0, 1.5fr); }
	.sp-connect__item { gap: 12px; padding: 12px 14px; font-size: .95rem; }
}

@media (max-width: 1080px) {
	.sp-why2__head,
	.sp-connect__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.sp-compare { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.sp-compare__pivot { height: 28px; }
	.sp-compare__pivot span { transform: rotate(90deg); }
	.sp-connect { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.sp-connect__ticket-wrap { max-width: 360px; width: 100%; margin-inline: auto; }
	.sp-connect__wire-box { display: none; }
	.sp-connect__list { margin-left: 12px; padding-left: 20px; border-left: 2px dashed var(--sp-line-2); }
	.sp-connect__item::before { left: -27px; }
}

/* ------------------------------------------- About: 3D report pages */
.sp-about4__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 80px); align-items: end; margin-bottom: clamp(30px, 4vw, 56px); }
.sp-about4__head h2 { margin: 18px 0 0; }
.sp-about4__lead { margin: 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.65; color: var(--sp-ink-2); }
.sp-about4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.sp-about4__stage { position: sticky; top: 130px; }

.sp-pages { position: relative; height: 560px; perspective: 1900px; perspective-origin: 50% 25%; animation: sp-float 7s ease-in-out infinite; }
.sp-pages__shadow { position: absolute; left: 50%; top: 64%; width: 420px; height: 140px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(54, 71, 255, .28), transparent 70%); filter: blur(14px); z-index: 0; }
.sp-pages__stack {
	position: absolute;
	z-index: 1;
	left: 56%;
	top: 50%;
	width: 320px;
	height: 420px;
	margin: -170px 0 0 -160px;
	transform-style: preserve-3d;
	transform: rotateX(52deg) rotateZ(-32deg);
}
.sp-page3d {
	--z: 0;
	position: absolute;
	inset: 0;
	padding: 22px;
	border-radius: 18px;
	background: var(--sp-surface);
	border: 1px solid var(--sp-line);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 26px 40px -24px rgba(12, 12, 29, .45);
	overflow: hidden;
	transform: translateZ(calc(var(--z) * 1px));
	transition: transform 1s var(--sp-out), filter .6s var(--sp-ease), box-shadow .6s var(--sp-ease);
}
.sp-page3d[data-page="3"] { --z: 0; }
.sp-page3d[data-page="2"] { --z: 30; }
.sp-page3d[data-page="1"] { --z: 60; }
.sp-page3d[data-page="0"] { --z: 90; }
/* The active page lifts out of the stack; pages above it fan aside. */
.sp-pages[data-active="0"] [data-page="0"] { transform: translateZ(140px) translate(10px, -10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 50px 60px -30px rgba(54, 71, 255, .55); }
.sp-pages[data-active="1"] [data-page="0"] { transform: translateZ(90px) translate(-120px, 80px) rotateZ(-7deg); filter: saturate(.8) brightness(.97); }
.sp-pages[data-active="1"] [data-page="1"] { transform: translateZ(150px) translate(46px, -26px) rotateZ(3deg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 50px 60px -30px rgba(54, 71, 255, .55); }
.sp-pages[data-active="2"] [data-page="0"] { transform: translateZ(90px) translate(-150px, 110px) rotateZ(-9deg); filter: saturate(.8) brightness(.97); }
.sp-pages[data-active="2"] [data-page="1"] { transform: translateZ(60px) translate(-90px, 60px) rotateZ(-5deg); filter: saturate(.8) brightness(.97); }
.sp-pages[data-active="2"] [data-page="2"] { transform: translateZ(160px) translate(52px, -30px) rotateZ(3deg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 50px 60px -30px rgba(54, 71, 255, .55); }
.sp-pages[data-active="3"] [data-page="0"] { transform: translateZ(90px) translate(-170px, 125px) rotateZ(-11deg); filter: saturate(.8) brightness(.97); }
.sp-pages[data-active="3"] [data-page="1"] { transform: translateZ(60px) translate(-120px, 85px) rotateZ(-7deg); filter: saturate(.8) brightness(.97); }
.sp-pages[data-active="3"] [data-page="2"] { transform: translateZ(30px) translate(-65px, 45px) rotateZ(-3deg); filter: saturate(.8) brightness(.97); }
.sp-pages[data-active="3"] [data-page="3"] { transform: translateZ(170px) translate(56px, -34px) rotateZ(3deg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 50px 60px -30px rgba(54, 71, 255, .55); }
/* Fee receipt, export chips and the estimate tag on the pages. */
.sp-page3d__line-item, .sp-page3d__total { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px dashed var(--sp-line-2); font-size: .78rem; color: var(--sp-ink-2); }
.sp-page3d__line-item b, .sp-page3d__total b { font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace; color: var(--sp-ink); }
.sp-page3d__total { margin-top: 6px; border-bottom: 0; border-top: 2px solid var(--sp-ink); font-weight: 700; font-size: .86rem; color: var(--sp-ink); }
.sp-page3d__total b { color: var(--sp-blue); font-size: 1.05rem; }
.sp-page3d__exports { display: flex; gap: 8px; margin-top: 18px; }
.sp-page3d__exports span { padding: 6px 12px; border-radius: 8px; background: var(--sp-blue); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .06em; }
.sp-page3d__exports span + span { background: var(--sp-violet); }
.sp-page3d__estimate { position: absolute; right: 18px; bottom: 18px; padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--sp-violet); color: var(--sp-violet); font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.sp-page3d__title { margin: 0 0 14px; font-family: var(--sp-display); font-size: 1rem; font-weight: 700; color: var(--sp-ink); }
/* Cover */
.sp-page3d__brand { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-page3d__brand img { height: 16px; width: auto; }
.sp-page3d__brand span { padding: 4px 9px; border-radius: 999px; background: var(--sp-blue-50); color: var(--sp-blue); font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sp-page3d__label { margin: 54px 0 4px; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-muted); }
.sp-page3d__id { margin: 0 0 22px; font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace; font-size: 2.3rem; font-weight: 700; letter-spacing: .04em; color: var(--sp-blue); line-height: 1; }
.sp-page3d__line { display: block; height: 7px; margin-top: 9px; border-radius: 4px; background: var(--sp-line); }
.sp-page3d__line--short { width: 62%; }
.sp-page3d__band { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; background: linear-gradient(120deg, var(--sp-blue), var(--sp-violet)); }
.sp-page3d__band::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 14px); }
/* Summary */
.sp-page3d__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.sp-page3d__tiles span { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; border-radius: 12px; color: rgba(255, 255, 255, .85); font-size: .6rem; font-weight: 600; }
.sp-page3d__tiles span:nth-child(1) { background: var(--sp-blue); }
.sp-page3d__tiles span:nth-child(2) { background: var(--sp-violet); }
.sp-page3d__tiles span:nth-child(3) { background: var(--sp-peach); }
.sp-page3d__tiles b { font-family: var(--sp-display); font-size: 1.45rem; font-weight: 800; color: #fff; line-height: 1; }
.sp-page3d__bars { display: grid; gap: 9px; }
.sp-page3d__bars i { display: block; height: 11px; border-radius: 6px; background: linear-gradient(90deg, var(--sp-blue), var(--sp-violet)); }
.sp-page3d__bars i:nth-child(even) { background: linear-gradient(90deg, var(--sp-cyan), var(--sp-blue)); }
/* Links */
.sp-page3d__row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px dashed var(--sp-line-2); }
.sp-page3d__row i { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--sp-blue-50); color: var(--sp-blue); font-size: .6rem; font-style: normal; font-weight: 700; }
.sp-page3d__row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; font-weight: 600; color: var(--sp-ink-2); }
.sp-page3d__row em { flex: none; padding: 3px 7px; border-radius: 999px; background: var(--sp-blue-50); color: var(--sp-blue); font-size: .58rem; font-style: normal; font-weight: 700; }
.sp-page3d__stamp { position: absolute; right: 16px; bottom: 20px; padding: 6px 12px; border: 2px solid var(--sp-blue); border-radius: 8px; color: var(--sp-blue); font-family: var(--sp-display); font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; transform: rotate(-10deg); background: var(--sp-surface); }

/* The principles beside the stack. */
.sp-about4__steps { display: grid; gap: 12px; }
.sp-about4__step {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	gap: 14px;
	padding: 26px 26px 26px 22px;
	border-radius: 24px;
	border: 1px solid transparent;
	transition: background .5s var(--sp-ease), border-color .5s, box-shadow .5s, opacity .5s;
}
.sp-js .sp-about4__step { opacity: .5; }
.sp-js .sp-about4__step.is-active { opacity: 1; background: var(--sp-surface); border-color: var(--sp-line); box-shadow: var(--sp-shadow); }
.sp-about4__n { font-family: var(--sp-display); font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: transparent; background: linear-gradient(135deg, var(--sp-blue), var(--sp-violet)); -webkit-background-clip: text; background-clip: text; }
.sp-about4__step h3 { margin: 4px 0 10px; font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); }
.sp-about4__step p { margin: 0; font-size: .97rem; line-height: 1.68; color: var(--sp-muted); text-align: justify; text-justify: inter-word; hyphens: manual; }
.sp-about4__step p + p { margin-top: .75em; }
.sp-about4__pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.sp-about4__pills li { padding: 5px 10px; border-radius: 999px; background: var(--sp-blue-50); color: var(--sp-blue); font-size: .74rem; font-weight: 600; }
.sp-about4__quote { position: relative; margin: 10px 0 0; padding: 26px 28px 26px 30px; border-radius: 24px; background: linear-gradient(150deg, #4b5aff, var(--sp-blue) 55%, #2a37d9); color: #fff; box-shadow: var(--sp-shadow-blue); overflow: hidden; }
.sp-about4__quote--plain > span { display: none; }
.sp-about4__quote > span { position: absolute; right: 18px; top: -8px; font-family: var(--sp-display); font-size: 6rem; line-height: 1; color: rgba(255, 255, 255, .18); }
.sp-about4__quote p { position: relative; margin: 0; font-family: var(--sp-display); font-size: clamp(1rem, .92rem + .35vw, 1.16rem); font-weight: 500; line-height: 1.55; }
html[data-theme="dark"] .sp-about4__pills li,
html[data-theme="dark"] .sp-page3d__row i,
html[data-theme="dark"] .sp-page3d__row em,
html[data-theme="dark"] .sp-page3d__brand span { color: #8a94ff; }
html[data-theme="dark"] .sp-page3d__id { color: #8a94ff; }
html[data-theme="dark"] .sp-page3d { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 26px 40px -24px rgba(0, 0, 0, .8); }
@media (max-width: 1080px) {
	.sp-about4__head,
	.sp-about4 { grid-template-columns: minmax(0, 1fr); }
	.sp-about4__stage { position: static; }
	.sp-pages { height: 470px; }
	.sp-js .sp-about4__step { opacity: 1; background: var(--sp-surface); border-color: var(--sp-line); box-shadow: var(--sp-shadow-sm); }
	.sp-pages__stack { transform: rotateX(52deg) rotateZ(-32deg) scale(.86); }
}
@media (max-width: 720px) {
	.sp-pages { height: 350px; }
	.sp-pages__stack { left: 52%; transform: rotateX(52deg) rotateZ(-32deg) scale(.54); }
	.sp-about4__step { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 22px; }
}

/* ----------------------------------------------------------------- Marquee */
.sp-marquee-label { text-align: center; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-faint); margin: 0 0 22px; }
.sp-marquee {
	overflow: hidden;
	padding-block: 6px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.sp-marquee__track { display: flex; width: max-content; animation: sp-marquee 40s linear infinite; }
.sp-marquee:hover .sp-marquee__track { animation-play-state: paused; }
.sp-marquee__group { display: flex; gap: 14px; padding-right: 14px; flex: none; }
.sp-service {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 24px 12px 12px;
	background: var(--sp-surface);
	border: 1px solid var(--sp-line);
	border-radius: 999px;
	font-family: var(--sp-display);
	font-weight: 700;
	font-size: 1.12rem;
	letter-spacing: -.02em;
	color: var(--sp-ink);
	white-space: nowrap;
	box-shadow: var(--sp-shadow-sm);
	transition: transform .4s var(--sp-spring);
}
.sp-service:hover { transform: translateY(-3px) rotate(-2deg); }
.sp-service i { width: 30px; height: 30px; border-radius: 10px; flex: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -3px 6px rgba(0, 0, 0, .15); }
.sp-service:nth-child(6n + 1) i { background: linear-gradient(135deg, #7d88ff, var(--sp-blue)); }
.sp-service:nth-child(6n + 2) i { background: linear-gradient(135deg, #c3a4ff, var(--sp-violet)); }
.sp-service:nth-child(6n + 3) i { background: linear-gradient(135deg, #b9c0ff, var(--sp-blue)); }
.sp-service:nth-child(6n + 4) i { background: linear-gradient(135deg, #b8bbff, var(--sp-peach)); }
.sp-service:nth-child(6n + 5) i { background: linear-gradient(135deg, #a9c8ff, var(--sp-cyan)); }
.sp-service:nth-child(6n + 6) i { background: linear-gradient(135deg, #dcc2ff, var(--sp-pink)); }
@keyframes sp-marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------- Stats */
.sp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sp-stat {
	position: relative;
	padding: 30px 28px;
	border-radius: var(--sp-r-lg);
	overflow: hidden;
	transition: transform .5s var(--sp-spring);
}
.sp-stat:hover { transform: translateY(-6px) rotate(-1.5deg); }
.sp-stat:nth-child(1) { background: var(--sp-blue-50); }
.sp-stat:nth-child(2) { background: var(--sp-lime-50); }
.sp-stat:nth-child(3) { background: var(--sp-violet-50); }
.sp-stat:nth-child(4) { background: var(--sp-peach-50); }
.sp-stat__value { display: block; font-family: var(--sp-display); font-size: clamp(3rem, 2rem + 3vw, 4.8rem); font-weight: 800; letter-spacing: -.06em; line-height: .9; color: var(--sp-ink); }
.sp-stat__value sup { font-size: .45em; vertical-align: top; position: relative; top: .25em; margin-right: 2px; }
.sp-stat__label { display: block; margin-top: 14px; font-size: .95rem; font-weight: 500; color: var(--sp-ink-2); max-width: 20ch; line-height: 1.4; }

/* ------------------------------------------------------------------- Why */
.sp-why { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.sp-statement {
	font-family: var(--sp-display);
	font-size: clamp(1.45rem, 1.05rem + 1.4vw, 2.3rem);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.25;
	color: var(--sp-ink);
	margin: 0;
}
.sp-statement .sp-w { transition: opacity .35s var(--sp-ease); }
.sp-js .sp-statement .sp-w { opacity: .16; }
.sp-js .sp-statement .sp-w.is-lit { opacity: 1; }
.sp-statement em { font-style: normal; color: var(--sp-blue); }
.sp-why__card { position: relative; padding: 34px 30px 30px; background: var(--sp-surface); border-radius: var(--sp-r-xl); box-shadow: var(--sp-shadow); }
.sp-why__card .sp-i3d { margin-bottom: 22px; }
.sp-why__card p { font-size: 1rem; color: var(--sp-ink-2); }

/* --------------------------------------------------------- Tracker cards */
.sp-trackers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sp-tracker-card {
	--tone: var(--sp-blue);
	--tone-bg: var(--sp-blue-50);
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 460px;
	padding: 32px;
	border-radius: var(--sp-r-xl);
	background: var(--tone-bg);
	color: var(--sp-ink);
	overflow: hidden;
	isolation: isolate;
	transition: box-shadow .4s var(--sp-ease);
}
.sp-tracker-card:hover { color: var(--sp-ink); box-shadow: var(--sp-shadow-lg); }
.sp-tracker-card--violet { --tone: var(--sp-violet); --tone-bg: var(--sp-violet-50); }
.sp-tracker-card--lime { --tone: var(--sp-blue); --tone-bg: var(--sp-blue-50); }
.sp-tracker-card::before {
	content: "";
	position: absolute;
	width: 320px;
	height: 320px;
	right: -110px;
	bottom: -130px;
	border-radius: 50%;
	background: var(--tone);
	opacity: .14;
	z-index: -1;
	transition: transform .8s var(--sp-out);
}
.sp-tracker-card:hover::before { transform: scale(1.4); }
.sp-tracker-card__kicker { display: inline-flex; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--sp-surface); font-size: .78rem; font-weight: 700; color: var(--tone); margin: 26px 0 16px; }
.sp-tracker-card h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.15rem); letter-spacing: -.035em; margin-bottom: 14px; }
.sp-tracker-card p { font-size: .98rem; color: var(--sp-ink-2); margin-bottom: 22px; }
.sp-tracker-card__features { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.sp-tracker-card__features span { padding: 7px 12px; border-radius: 999px; background: var(--sp-glass); font-size: .8rem; font-weight: 600; color: var(--sp-ink-2); }
.sp-tracker-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 8px 8px 22px;
	min-height: 56px;
	border-radius: 999px;
	background: var(--sp-dark);
	color: #fff;
	font-weight: 600;
}
.sp-tracker-card__cta i { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--sp-dark); align-items: center; justify-content: center; transition: transform .45s var(--sp-spring), background .3s; }
.sp-tracker-card__cta i svg { width: 17px; height: 17px; }
.sp-tracker-card:hover .sp-tracker-card__cta i { transform: rotate(-45deg); background: var(--sp-lime); color: #fff; }

/* One public tracker: a single featured card with what the report contains. */
.sp-tracker-feature {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	min-height: 0;
	padding: clamp(28px, 4vw, 52px);
}
.sp-tracker-feature::before { width: 520px; height: 520px; right: -160px; bottom: -220px; }
.sp-tracker-feature__main { display: flex; flex-direction: column; }
.sp-tracker-feature h3 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.sp-tracker-feature p { font-size: 1.05rem; max-width: 46ch; }
.sp-tracker-feature .sp-tracker-card__cta { margin-top: 6px; align-self: flex-start; min-width: 240px; }
.sp-tracker-feature__panel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	padding: 14px;
	border-radius: 30px;
	background: var(--sp-glass);
	border: 1px solid rgba(255, 255, 255, .9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.sp-tracker-feature__item {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	border-radius: 22px;
	background: var(--sp-surface);
	box-shadow: var(--sp-shadow-sm);
	font-weight: 600;
	font-size: .95rem;
	color: var(--sp-ink);
	transition: transform .45s var(--sp-spring);
}
.sp-tracker-feature__item:nth-child(odd) { transform: translateY(-6px); }
.sp-tracker-feature:hover .sp-tracker-feature__item:nth-child(odd) { transform: translateY(-12px); }
.sp-tracker-feature:hover .sp-tracker-feature__item:nth-child(even) { transform: translateY(4px); }

/* ----------------------------------------------------------------- Bento */
.sp-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.sp-bento > * { grid-column: span 3; }
.sp-bento > .sp-bento--wide { grid-column: span 4; }
.sp-bento > .sp-bento--narrow { grid-column: span 2; }

.sp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(26px, 2.8vw, 38px);
	border-radius: var(--sp-r-xl);
	background: var(--sp-surface);
	color: var(--sp-ink-2);
	overflow: hidden;
	isolation: isolate;
	transition: box-shadow .4s var(--sp-ease);
}
.sp-card:hover { box-shadow: var(--sp-shadow-lg); }
.sp-card h3 { margin-bottom: 12px; }
.sp-card p { font-size: .98rem; margin: 0; }
.sp-card--blue { background: linear-gradient(160deg, #5564ff, var(--sp-blue) 55%, #2331d6); color: rgba(255, 255, 255, .85); }
.sp-card--blue h3 { color: #fff; }
.sp-card--ink { background: var(--sp-dark); color: rgba(255, 255, 255, .72); }
.sp-card--ink h3 { color: #fff; }
.sp-card--lime { background: var(--sp-lime); color: rgba(255, 255, 255, .85); }
.sp-card--violet { background: var(--sp-violet-50); }
.sp-card--peach { background: var(--sp-peach-50); }
.sp-card--cyan { background: var(--sp-cyan-50); }
.sp-card__visual { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 200px; margin-bottom: 26px; }

/* Glare that follows the cursor on tilting cards. */
.sp-glare {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .45), transparent 45%);
	opacity: 0;
	transition: opacity .3s var(--sp-ease);
	z-index: 5;
	mix-blend-mode: soft-light;
}
[data-tilt]:hover > .sp-glare { opacity: 1; }

/* Bento visual: lookup log. */
.sp-log {
	width: 100%;
	max-width: 460px;
	padding: 18px 22px;
	border-radius: 22px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .22);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .86rem;
	line-height: 2.1;
	color: rgba(255, 255, 255, .85);
}
.sp-log__line { display: flex; gap: 12px; }
.sp-js .sp-log__line { opacity: 0; transform: translateX(-8px); }
.sp-js .is-in .sp-log__line { opacity: 1; transform: none; transition: opacity .5s var(--sp-ease) var(--d), transform .5s var(--sp-out) var(--d); }
.sp-log__line b { color: #fff; font-weight: 600; }
.sp-log__ok { color: #fff; }

/* Bento visual: structured rows. */
.sp-mini { width: 100%; display: grid; gap: 8px; }
.sp-mini .sp-row { box-shadow: var(--sp-shadow-sm); }
.sp-js .sp-mini .sp-row { opacity: 0; transform: translateY(12px); }
.sp-js .is-in .sp-mini .sp-row { opacity: 1; transform: none; transition: opacity .5s var(--sp-ease) var(--d), transform .7s var(--sp-spring) var(--d); }

/* Bento visual: export files. */
/* Exports card: each file previews what it holds (hover, or a gentle cycle). */
.sp-card__visual--exports { align-items: flex-end; min-height: 250px; }
.sp-exports { display: flex; gap: 14px; align-items: flex-end; }
.sp-export { position: relative; display: flex; justify-content: center; }
.sp-exports .sp-file { position: relative; z-index: 2; width: 84px; height: 104px; font-size: .95rem; transition: transform .55s var(--sp-spring); }
.sp-export--xls .sp-file { transform: rotate(-8deg); }
.sp-export--pdf .sp-file { transform: translateY(-10px); }
.sp-export--url .sp-file { transform: rotate(8deg); }
.sp-export.is-peek .sp-file { transform: translateY(8px) scale(.94); }

.sp-peek {
	position: absolute;
	z-index: 1;
	bottom: calc(100% - 22px);
	opacity: 0;
	pointer-events: none;
	transform: translateY(26px) scale(.86);
	transition: opacity .3s var(--sp-ease), transform .6s var(--sp-spring);
}
.sp-export--xls .sp-peek { left: -6px; transform-origin: bottom left; }
.sp-export--pdf .sp-peek { left: 50%; margin-left: -55px; transform-origin: bottom center; }
.sp-export--url .sp-peek { right: -6px; transform-origin: bottom right; }
.sp-export.is-peek .sp-peek { opacity: 1; transform: none; }

.sp-peek--sheet { width: 196px; padding: 6px; display: grid; gap: 3px; background: var(--sp-surface); border-radius: 12px; box-shadow: var(--sp-shadow-lg); }
.sp-peek__row { display: grid; grid-template-columns: 1.7fr 1fr .55fr; gap: 3px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .45s var(--sp-spring); }
.sp-peek__row i { font-style: normal; padding: 4px 6px; border-radius: 4px; background: var(--sp-bg); color: var(--sp-ink-2); font-size: .6rem; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-peek__row--head i { background: var(--sp-blue); color: #fff; font-weight: 700; }
.sp-export.is-peek .sp-peek__row { opacity: 1; transform: none; }
.sp-export.is-peek .sp-peek__row:nth-child(2) { transition-delay: .08s; }
.sp-export.is-peek .sp-peek__row:nth-child(3) { transition-delay: .16s; }
.sp-export.is-peek .sp-peek__row:nth-child(4) { transition-delay: .24s; }

.sp-peek--pages { width: 110px; height: 138px; perspective: 700px; }
.sp-page { position: absolute; inset: 0; background: var(--sp-surface); border-radius: 8px; box-shadow: var(--sp-shadow); transition: transform .6s var(--sp-spring); }
.sp-export.is-peek .sp-page:nth-child(1) { transform: rotate(-11deg) translate(-16px, 6px); }
.sp-export.is-peek .sp-page:nth-child(2) { transform: rotate(7deg) translate(12px, 4px); }
.sp-page--top { display: flex; flex-direction: column; gap: 6px; padding: 12px 11px; transform-origin: left center; }
.sp-export.is-peek .sp-page--top { animation: sp-page-flip 2.6s ease-in-out .3s infinite; }
@keyframes sp-page-flip { 0%, 30% { transform: rotateY(0); } 50%, 62% { transform: rotateY(-150deg); } 85%, 100% { transform: rotateY(0); } }
.sp-page--top b { font-family: var(--sp-display); font-size: .62rem; color: var(--sp-blue); }
.sp-page--top i { height: 5px; border-radius: 3px; background: var(--sp-line); }
.sp-page--top i:nth-of-type(2) { width: 82%; }
.sp-page--top i:nth-of-type(3) { width: 64%; }
.sp-page--top em { margin-top: auto; height: 34px; border-radius: 6px; background: linear-gradient(90deg, var(--sp-blue) 0 34%, var(--sp-violet) 34% 58%, var(--sp-peach) 58% 78%, var(--sp-cyan) 78%); }

.sp-peek--links { display: grid; gap: 5px; width: 172px; }
.sp-peek--links span { display: block; padding: 6px 11px; border-radius: 999px; background: var(--sp-surface); box-shadow: var(--sp-shadow-sm); font-size: .64rem; font-weight: 600; color: var(--sp-blue); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateX(12px); transition: opacity .3s, transform .5s var(--sp-spring); }
.sp-export.is-peek .sp-peek--links span { opacity: 1; transform: none; }
.sp-export.is-peek .sp-peek--links span:nth-child(2) { transition-delay: .08s; }
.sp-export.is-peek .sp-peek--links span:nth-child(3) { transition-delay: .16s; }

/* Bento visual: the zero. */
.sp-zero { font-family: var(--sp-display); font-size: clamp(6rem, 4rem + 7vw, 10rem); font-weight: 800; letter-spacing: -.08em; line-height: .8; color: #fff; }
.sp-zero small { font-size: .38em; color: var(--sp-lime); vertical-align: top; position: relative; top: .2em; }

/* ---------------------------------------------------------- How it works */
.sp-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sp-steps__line {
	position: absolute;
	top: 66px;
	left: 14%;
	right: 14%;
	height: 3px;
	z-index: 0;
	background: repeating-linear-gradient(90deg, var(--sp-blue) 0 10px, transparent 10px 20px);
	transform-origin: left;
	opacity: .35;
}
.sp-js .sp-steps__line { transform: scaleX(0); }
.sp-js .sp-steps.is-in .sp-steps__line { transform: scaleX(1); transition: transform 1.4s var(--sp-out) .3s; }
.sp-step {
	position: relative;
	z-index: 1;
	padding: 34px 30px;
	border-radius: var(--sp-r-xl);
	background: var(--sp-surface);
	box-shadow: var(--sp-shadow-sm);
	overflow: hidden;
	isolation: isolate;
}
.sp-step__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.sp-step__num { font-family: var(--sp-display); font-size: 4.2rem; font-weight: 800; letter-spacing: -.06em; line-height: 1; color: var(--sp-line-2); }
.sp-step h3 { margin-bottom: 12px; font-size: clamp(1rem, .88rem + .4vw, 1.24rem); }
.sp-step p { font-size: .98rem; margin: 0; }
.sp-step p,
.sp-note-card p,
.sp-aud p { text-align: justify; text-justify: inter-word; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal; }
.sp-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.sp-note-card { display: flex; gap: 20px; align-items: flex-start; padding: 28px; border-radius: var(--sp-r-lg); background: rgba(255, 255, 255, .55); border: 1.5px dashed var(--sp-line-2); }
.sp-note-card .sp-i3d { width: 48px; height: 48px; border-radius: 15px; }
.sp-note-card .sp-i3d__glyph svg { width: 21px; height: 21px; }
.sp-note-card h4 { margin-bottom: 6px; }
.sp-note-card p { font-size: .95rem; margin: 0; }
.sp-center-cta { display: flex; justify-content: center; margin-top: 40px; }

/* ------------------------------------------------- Distribution ID split */
.sp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.sp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sp-checks li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 20px 14px 14px;
	border-radius: 22px;
	background: var(--sp-surface);
	box-shadow: var(--sp-shadow-sm);
	font-weight: 500;
	color: var(--sp-ink);
	transition: transform .45s var(--sp-spring);
}
.sp-checks li:hover { transform: translateX(8px); }
.sp-checks .sp-i3d { width: 42px; height: 42px; border-radius: 13px; }
.sp-checks .sp-i3d__glyph svg { width: 19px; height: 19px; }
.sp-callout { display: flex; gap: 16px; align-items: flex-start; margin-top: 30px; padding: 20px 22px; border-radius: 22px; background: var(--sp-lime-50); color: var(--sp-ink-2); font-size: .95rem; }
.sp-callout svg { width: 22px; height: 22px; flex: none; color: var(--sp-blue); margin-top: 2px; }

/* --------------------------------------------------------- Audience grid */
.sp-auds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* Five audiences: three over two, the second row centred. */
@media (min-width: 1081px) {
	.sp-auds { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.sp-auds > .sp-aud { grid-column: span 2; }
	.sp-auds > .sp-aud:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
}
.sp-auds__closing { max-width: 64ch; margin: 30px auto 0; text-align: center; font-size: 1.02rem; color: var(--sp-ink-2); }
.sp-aud {
	position: relative;
	padding: 32px;
	border-radius: var(--sp-r-xl);
	background: var(--sp-surface);
	box-shadow: var(--sp-shadow-sm);
	overflow: hidden;
	isolation: isolate;
	transition: box-shadow .35s var(--sp-ease);
}
.sp-aud:hover { box-shadow: var(--sp-shadow-lg); }
.sp-aud .sp-i3d { margin-bottom: 28px; }
.sp-aud h3 { margin-bottom: 10px; font-size: clamp(1rem, .88rem + .4vw, 1.24rem); }
.sp-aud p { font-size: .96rem; margin: 0; }
.sp-aud__n { position: absolute; top: 28px; right: 30px; font-family: var(--sp-display); font-weight: 800; font-size: .9rem; color: var(--sp-faint); }

/* ----------------------------------------------------------------- About */
.sp-about {
	position: relative;
	padding: clamp(40px, 6vw, 80px);
	border-radius: 44px;
	background: var(--sp-dark);
	color: rgba(255, 255, 255, .72);
	overflow: hidden;
	isolation: isolate;
}
.sp-about .sp-blob { opacity: .32; }
.sp-about .sp-badge { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .15); color: #fff; box-shadow: none; }
.sp-about h2 { color: #fff; max-width: 16ch; }
.sp-about__lead { font-family: var(--sp-display); font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.25; color: #fff; max-width: 34ch; margin: 26px 0 48px; }
.sp-about__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sp-about__col { padding: 28px; border-radius: 26px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.sp-about__col h3 { color: #fff; font-size: 1.25rem; margin: 22px 0 10px; }
.sp-about__col p { font-size: .94rem; }
.sp-about__col p + p { margin-top: .8em; }
.sp-about__close { margin: 48px 0 0; max-width: 72ch; font-size: 1.05rem; color: rgba(255, 255, 255, .7); }
.sp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.sp-pills li { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .8rem; font-weight: 600; color: #fff; }

/* ------------------------------------------------------------------- FAQ */
.sp-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.sp-faq__aside { position: sticky; top: 120px; }
.sp-faq__help { margin-top: 30px; padding: 26px; border-radius: 26px; background: var(--sp-violet-50); }
.sp-faq__help .sp-i3d { margin-bottom: 18px; }
.sp-faq__help p { color: var(--sp-ink-2); margin-bottom: 18px; }
.sp-accordion { display: grid; gap: 10px; }
.sp-accordion__item { background: var(--sp-surface); border-radius: 22px; box-shadow: var(--sp-shadow-sm); overflow: hidden; transition: box-shadow .3s var(--sp-ease); }
.sp-accordion__item:hover { box-shadow: var(--sp-shadow); }
.sp-accordion__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 20px 20px 20px 26px;
	background: none;
	border: 0;
	font-family: var(--sp-display);
	font-size: 1.12rem;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--sp-ink);
	text-align: left;
	cursor: pointer;
}
.sp-accordion__sign {
	position: relative;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--sp-bg);
	transition: background .3s var(--sp-ease), transform .5s var(--sp-spring);
}
.sp-accordion__sign::before, .sp-accordion__sign::after {
	content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 2px; border-radius: 2px;
	background: var(--sp-ink); transform: translate(-50%, -50%); transition: transform .4s var(--sp-spring), background .3s;
}
.sp-accordion__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.sp-accordion__btn[aria-expanded="true"] .sp-accordion__sign { background: var(--sp-blue); transform: rotate(180deg); }
.sp-accordion__btn[aria-expanded="true"] .sp-accordion__sign::before,
.sp-accordion__btn[aria-expanded="true"] .sp-accordion__sign::after { background: #fff; }
.sp-accordion__btn[aria-expanded="true"] .sp-accordion__sign::after { transform: translate(-50%, -50%) rotate(0); }
.sp-accordion__panel { height: 0; overflow: hidden; transition: height .35s var(--sp-ease); }
.sp-accordion__panel-inner { padding: 0 26px 24px; font-size: 1rem; color: var(--sp-ink-2); max-width: 66ch; }

/* ------------------------------------------------------------------- CTA */
.sp-cta {
	position: relative;
	padding: clamp(56px, 8vw, 110px) clamp(28px, 6vw, 80px);
	border-radius: 44px;
	background: linear-gradient(140deg, #4f5eff 0%, var(--sp-blue) 45%, #6d3ff0 100%);
	color: rgba(255, 255, 255, .85);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}
.sp-cta .sp-blob { opacity: .4; }
.sp-cta .sp-dots { background-image: radial-gradient(rgba(255, 255, 255, .25) 1px, transparent 1.3px); }
.sp-cta__inner { position: relative; }
.sp-cta h2 { color: #fff; font-size: clamp(2.1rem, 1.2rem + 3vw, 4rem); max-width: none; margin: 0 auto 22px; }
.sp-cta h2 em { display: block; }
/* The card is brand blue, so its accent phrase stays white. */
.sp-cta h2 em { color: #fff; }
.sp-cta .sp-lede { color: rgba(255, 255, 255, .82); margin: 0 auto 38px; }
.sp-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.sp-cta__note { margin: 26px 0 0; font-size: .9rem; color: rgba(255, 255, 255, .75); }
.sp-cta .sp-badge { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .25); color: #fff; box-shadow: none; }
.sp-cta .sp-badge__dot { background: #fff; color: var(--sp-blue); }
.sp-sticker {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 122px;
	height: 122px;
	border-radius: 50%;
	background: #fff;
	color: var(--sp-blue);
	font-family: var(--sp-display);
	font-weight: 800;
	font-size: .82rem;
	line-height: 1.05;
	text-align: center;
	top: 34px;
	right: 44px;
	box-shadow: inset 0 2px 1px rgba(255, 255, 255, .6), inset 0 -6px 12px rgba(0, 0, 0, .12), var(--sp-shadow-lg);
	animation: sp-wobble 5s ease-in-out infinite;
}
.sp-sticker b { display: block; font-size: 2.4rem; letter-spacing: -.06em; line-height: .9; }
@keyframes sp-wobble { 0%, 100% { transform: rotate(10deg) scale(1); } 50% { transform: rotate(-6deg) scale(1.06); } }

/* --------------------------------------------------------------- Contact */
.sp-contact { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.sp-contact__points { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; }
.sp-contact__points li { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 22px; background: var(--sp-surface); box-shadow: var(--sp-shadow-sm); color: var(--sp-ink); font-weight: 500; font-size: .95rem; }
.sp-contact__points .sp-i3d { width: 44px; height: 44px; border-radius: 14px; }
.sp-contact__points .sp-i3d__glyph svg { width: 20px; height: 20px; }
.sp-form-sheet { padding: clamp(26px, 3vw, 42px); border-radius: var(--sp-r-xl); background: var(--sp-surface); box-shadow: var(--sp-shadow); }
.sp-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sp-form-grid .sp-field--full { grid-column: 1 / -1; }
.sp-field { position: relative; }
.sp-field__label { display: block; font-size: .88rem; font-weight: 600; color: var(--sp-ink); margin-bottom: 8px; }
.sp-field__req { color: var(--sp-blue); margin-left: 2px; }
.sp-input, .sp-select, .sp-textarea {
	width: 100%;
	font-family: var(--sp-font);
	font-size: 1rem;
	color: var(--sp-ink);
	background: var(--sp-bg);
	border: 1.5px solid transparent;
	border-radius: 16px;
	padding: 15px 18px;
	transition: border-color .2s var(--sp-ease), background .2s var(--sp-ease), box-shadow .2s var(--sp-ease);
	appearance: none;
}
.sp-textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.sp-input::placeholder, .sp-textarea::placeholder { color: var(--sp-faint); }
.sp-input:focus, .sp-select:focus, .sp-textarea:focus { outline: none; background: var(--sp-surface); border-color: var(--sp-blue); box-shadow: 0 0 0 5px var(--sp-blue-50); }
.sp-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e8a' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 18px;
	padding-right: 46px;
	cursor: pointer;
}
.sp-field__help { display: block; font-size: .82rem; color: var(--sp-muted); margin-top: 8px; }
.sp-field__error { display: none; font-size: .84rem; color: var(--sp-err); margin-top: 8px; font-weight: 500; }
.sp-field.has-error .sp-input, .sp-field.has-error .sp-select, .sp-field.has-error .sp-textarea { border-color: var(--sp-err); }
.sp-field.has-error .sp-field__error { display: block; }
.sp-honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sp-form-submit { margin-top: 24px; }
.sp-privacy-note { font-size: .84rem; color: var(--sp-muted); margin-top: 16px; }
.sp-form-status { margin-top: 20px; }
.sp-alert { padding: 18px 20px; border-radius: 18px; font-size: .95rem; }
.sp-alert h4 { font-family: var(--sp-font); font-size: .95rem; font-weight: 700; margin: 0 0 6px; }
.sp-alert p { margin: 0; }
.sp-alert p + p { margin-top: 8px; }
.sp-alert--success { background: var(--sp-blue-50); color: #1f2bc2; }
.sp-alert--success h4 { color: #1f2bc2; }
.sp-alert--error { background: #f1ebff; color: #5b21b6; }
.sp-alert--error h4 { color: #5b21b6; }
.sp-alert--info { background: var(--sp-blue-50); color: var(--sp-blue-600); }
.sp-alert--info h4 { color: var(--sp-blue-600); }
.is-busy { opacity: .6; pointer-events: none; }

/* ----------------------------------------------------------------- Footer */
.sp-footer { padding: 0 var(--sp-gutter) var(--sp-gutter); }
.sp-footer__card {
	position: relative;
	max-width: 1320px;
	margin-inline: auto;
	padding: clamp(36px, 3.4vw, 48px) clamp(26px, 4.4vw, 60px) 22px;
	border-radius: 40px;
	background:
		radial-gradient(1100px 460px at 50% 115%, rgba(54, 71, 255, .38), transparent 62%),
		var(--sp-dark);
	color: rgba(255, 255, 255, .62);
	overflow: hidden;
	isolation: isolate;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

/* Background effects: drifting grid, a light travelling along the top edge, blobs. */
.sp-footer__fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sp-footer__fx .sp-blob--blue { opacity: .26; top: auto; bottom: -320px; left: -220px; }
.sp-footer__fx .sp-blob--violet { opacity: .2; top: -280px; }
.sp-footer__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 10%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 10%, transparent 75%);
	animation: sp-grid-drift 24s linear infinite;
}
@keyframes sp-grid-drift { to { background-position: 56px 56px, 56px 56px; } }
.sp-footer__beam {
	position: absolute;
	top: 0;
	left: 8%;
	right: 8%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(125, 136, 255, .95), rgba(196, 166, 255, .95), transparent) no-repeat;
	background-size: 35% 100%;
	animation: sp-beam 7s ease-in-out infinite;
}
.sp-footer__beam::after {
	content: "";
	position: absolute;
	inset: -14px 0 auto;
	height: 28px;
	background: inherit;
	background-size: inherit;
	animation: inherit;
	filter: blur(14px);
	opacity: .7;
}
@keyframes sp-beam { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }

.sp-footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 2fr); gap: clamp(30px, 4vw, 64px); padding-bottom: 26px; }
.sp-footer__logo img { height: 30px; width: auto; }
.sp-footer__closing { margin: 14px 0 14px; font-size: 1.05rem; line-height: 1.6; color: rgba(255, 255, 255, .72); max-width: 34ch; text-align: justify; text-justify: inter-word; hyphens: manual; }
.sp-footer__pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 16px;
	padding: 6px 14px 6px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	font-size: .82rem;
	font-weight: 600;
	color: #fff;
}
.sp-footer__pill i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #7d88ff; }
.sp-footer__pill i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #7d88ff; animation: sp-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes sp-ping { 0% { transform: scale(.6); opacity: 1; } 80%, 100% { transform: scale(1.8); opacity: 0; } }
.sp-footer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.sp-footer__mail { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-weight: 600; font-size: .95rem; }
.sp-footer__mail svg { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); transition: background .3s, transform .45s var(--sp-spring); }
.sp-footer__mail small { display: block; font-size: .74rem; font-weight: 500; color: rgba(255, 255, 255, .5); }
.sp-footer__mail:hover { color: #fff; }
.sp-footer__mail:hover svg { background: var(--sp-blue); transform: rotate(-8deg) scale(1.06); }
.sp-footer__social { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.sp-footer__social li { margin: 0; }
.sp-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	color: rgba(255, 255, 255, .8);
	transition: background .3s, color .3s, transform .45s var(--sp-spring);
}
.sp-footer__social a::before, .sp-footer__social a::after { content: none; }
.sp-footer__social a:hover { background: var(--sp-blue); border-color: var(--sp-blue); color: #fff; transform: translateY(-3px); }

.sp-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.sp-footer h4 { font-family: var(--sp-font); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .42); margin-bottom: 16px; }
.sp-footer ul { list-style: none; margin: 0; padding: 0; }
.sp-footer li { margin-bottom: 10px; }
.sp-footer li a {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: rgba(255, 255, 255, .78);
	font-size: .96rem;
	transition: color .25s var(--sp-ease), transform .45s var(--sp-spring);
}
.sp-footer li a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: linear-gradient(90deg, #7d88ff, #c4a6ff);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s var(--sp-out);
}
.sp-footer li a::after {
	content: "\2197";
	position: absolute;
	left: 100%;
	margin-left: 6px;
	font-size: .85em;
	opacity: 0;
	transform: translate(-6px, 4px);
	transition: opacity .3s, transform .45s var(--sp-spring);
}
.sp-footer li a:hover { color: #fff; transform: translateX(3px); }
.sp-footer li a:hover::before { transform: scaleX(1); }
.sp-footer li a:hover::after { opacity: 1; transform: none; }

/* The big gradient wordmark. Room below the baseline keeps descenders (the
   "y") whole; it rises into view and its gradient slowly shifts. */
.sp-wordmark {
	display: block;
	margin: 0 0 12px;
	padding: .04em 0 .2em;
	font-family: var(--sp-display);
	font-size: clamp(2.8rem, .4rem + 8vw, 9rem);
	font-weight: 800;
	letter-spacing: -.07em;
	line-height: .9;
	text-align: center;
	white-space: nowrap;
	color: transparent;
	background: linear-gradient(90deg, #7d88ff, var(--sp-blue) 25%, var(--sp-violet) 50%, var(--sp-blue) 75%, #7d88ff);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	user-select: none;
	animation: sp-shimmer 12s linear infinite;
}
@keyframes sp-shimmer { to { background-position: -200% 0; } }
.sp-js .sp-footer__mark .sp-wordmark {
	opacity: 0;
	transform: translateY(28%);
	clip-path: inset(100% -5% -30% -5%);
	transition: opacity .8s var(--sp-ease), transform 1.3s var(--sp-out), clip-path 1.3s var(--sp-out);
}
.sp-js .sp-footer__mark.is-in .sp-wordmark { opacity: 1; transform: none; clip-path: inset(-20% -5% -30% -5%); }

.sp-footer__bottom { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .86rem; color: rgba(255, 255, 255, .55); }
.sp-footer__bottom p { margin: 0; }
.sp-footer__legal { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.sp-footer__legal a { color: rgba(255, 255, 255, .7); }
.sp-footer__legal a:hover { color: #fff; }
.sp-footer__top-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	cursor: pointer;
	transition: background .3s, border-color .3s, transform .45s var(--sp-spring);
}
.sp-footer__top-btn svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.sp-footer__top-btn:hover { background: var(--sp-blue); border-color: var(--sp-blue); transform: translateY(-4px); }
.sp-footer__top-btn:hover svg { animation: sp-nudge-up .8s var(--sp-spring) infinite; }
@keyframes sp-nudge-up { 0%, 100% { transform: rotate(-90deg) translateX(0); } 50% { transform: rotate(-90deg) translateX(3px); } }

/* ------------------------------------------------------------ Card motion */
/* A light follows the pointer around each card's edge (motion.js adds the
   ring and the --mx / --my position), and card icons float gently. */
.sp-spot { position: relative; }
.sp-ring {
	--ring: rgba(54, 71, 255, .85);
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	padding: 2px;
	background: radial-gradient(var(--ring-size, 320px) circle at var(--mx, 50%) var(--my, 50%), var(--ring), transparent 70%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s var(--sp-ease);
}
.sp-spot:hover > .sp-ring { opacity: 1; }
.sp-card--ink > .sp-ring,
.sp-card--blue > .sp-ring,
.sp-card--lime > .sp-ring,
.sp-about__col > .sp-ring,
.sp-tk-tile--ink > .sp-ring { --ring: rgba(255, 255, 255, .8); }
.sp-footer__card > .sp-ring { --ring: rgba(125, 136, 255, .9); --ring-size: 520px; }

.sp-card .sp-card__visual > .sp-i3d,
.sp-why__card > .sp-i3d,
.sp-aud .sp-i3d,
.sp-step .sp-i3d { animation: sp-float 6s ease-in-out infinite; }
.sp-bento > :nth-child(2n) .sp-i3d,
.sp-why__cards > :nth-child(2n) > .sp-i3d,
.sp-auds > :nth-child(2n) .sp-i3d,
.sp-steps > :nth-child(2n) .sp-i3d { animation-delay: -3s; }
@keyframes sp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.sp-textlink { background: none; border: 0; padding: 0; font: inherit; color: rgba(255, 255, 255, .7); cursor: pointer; }
.sp-textlink:hover { color: #fff; }

/* ---------------------------------------------------------- Cookie notice */
.sp-cookie {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 150;
	width: min(440px, calc(100vw - 40px));
	padding: 22px;
	background: var(--sp-surface);
	border-radius: 26px;
	box-shadow: var(--sp-shadow-lg);
	display: none;
}
.sp-cookie.is-visible { display: block; animation: sp-pop .45s var(--sp-spring); }
.sp-cookie__text { font-size: .9rem; line-height: 1.6; margin: 0 0 16px; color: var(--sp-ink-2); }
.sp-cookie__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sp-cookie__actions .sp-button { min-height: 42px; padding: 0 18px; font-size: .88rem; box-shadow: none; }
.sp-cookie__manage { background: none; border: 0; padding: 8px 6px; font-family: var(--sp-font); font-size: .86rem; font-weight: 600; color: var(--sp-blue); cursor: pointer; }
.sp-cookie__prefs { display: none; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sp-line); }
.sp-cookie__prefs.is-open { display: block; }
.sp-cookie__pref { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 10px 0; }
.sp-cookie__pref h4 { font-family: var(--sp-font); font-size: .9rem; margin: 0 0 3px; }
.sp-cookie__pref p { font-size: .82rem; margin: 0; color: var(--sp-muted); }
.sp-cookie__state { font-size: .76rem; font-weight: 700; color: var(--sp-ok); flex: none; }
.sp-switch { position: relative; flex: none; width: 46px; height: 26px; }
.sp-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.sp-switch__track { position: absolute; inset: 0; border-radius: 999px; background: var(--sp-line-2); transition: background .25s; pointer-events: none; }
.sp-switch__track::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--sp-shadow-sm); transition: transform .4s var(--sp-spring); }
.sp-switch input:checked + .sp-switch__track { background: var(--sp-blue); }
.sp-switch input:checked + .sp-switch__track::before { transform: translateX(20px); }

/* ------------------------------------------------------------------ Toasts */
.sp-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 160; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: min(400px, calc(100vw - 40px)); }
.sp-toast {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 14px 22px 14px 16px;
	border-radius: 999px;
	background: var(--sp-dark);
	color: #fff;
	font-size: .9rem;
	font-weight: 500;
	box-shadow: var(--sp-shadow-lg);
	pointer-events: auto;
	animation: sp-pop .45s var(--sp-spring);
}
.sp-toast::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sp-blue-100); }
.sp-toast--success::before { background: var(--sp-lime); }
.sp-toast--error::before { background: var(--sp-err); }
.sp-toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }

/* ------------------------------------------------------------ Page chrome */
.sp-page-hero { position: relative; padding: calc(110px + clamp(40px, 5vw, 70px)) 0 clamp(40px, 5vw, 60px); overflow: hidden; isolation: isolate; text-align: center; }
.sp-page-hero h1 { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.8rem); margin: 0 auto; max-width: 16ch; }
.sp-page-body { padding-bottom: var(--sp-section); }
.sp-prose { background: var(--sp-surface); border-radius: var(--sp-r-xl); padding: clamp(28px, 5vw, 64px); box-shadow: var(--sp-shadow-sm); font-size: 1.04rem; line-height: 1.8; }
.sp-prose h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 2em 0 .6em; }
.sp-prose h3 { font-size: 1.2rem; margin: 1.8em 0 .5em; }
.sp-prose h2:first-child, .sp-prose h3:first-child { margin-top: 0; }
.sp-prose li { margin-bottom: .5em; }
.sp-prose blockquote { margin: 1.6em 0; padding: 18px 24px; border-radius: 18px; background: var(--sp-blue-50); color: var(--sp-ink); }
.sp-404 { position: relative; min-height: 92svh; display: grid; place-items: center; text-align: center; padding: 150px 0 90px; overflow: hidden; isolation: isolate; }
.sp-404__inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.sp-404__stage { position: relative; display: inline-block; margin-bottom: 18px; }
.sp-404__code {
	display: block;
	font-family: var(--sp-display);
	font-size: clamp(7rem, 20vw, 14rem);
	font-weight: 800;
	letter-spacing: -.08em;
	line-height: .9;
	padding: 0 .06em .08em 0;
	color: transparent;
	background: linear-gradient(110deg, #7d88ff, var(--sp-blue) 30%, var(--sp-violet) 60%, var(--sp-blue) 85%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	animation: sp-shimmer 9s linear infinite;
}
.sp-404__float { position: absolute; }
.sp-404__float .sp-i3d { animation: sp-bob 6s ease-in-out infinite; }
.sp-404__float--a { left: -14%; top: 4%; }
.sp-404__float--b { right: -10%; top: -6%; }
.sp-404__float--b .sp-i3d { animation-delay: -2s; }
.sp-404__float--c { right: -4%; bottom: 0; }
.sp-404__float--c .sp-i3d { animation-delay: -4s; }
.sp-404__title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); max-width: 18ch; margin: 18px auto 14px; }
.sp-404__title em { color: var(--sp-blue); }
.sp-404 .sp-lede { margin: 0 auto 30px; max-width: 52ch; }
.sp-404__tracker {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	width: min(640px, 100%);
	padding: 20px 20px 20px 22px;
	border-radius: 28px;
	background: var(--sp-glass);
	border: 1px solid #fff;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: var(--sp-shadow-lg);
	color: var(--sp-ink);
	text-align: left;
	overflow: hidden;
}
.sp-404__tracker:hover { color: var(--sp-ink); }
.sp-404__tracker-text { flex: 1; min-width: 0; }
.sp-404__tracker small { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-blue); }
.sp-404__tracker b { display: block; margin: 4px 0 2px; font-family: var(--sp-display); font-size: 1.35rem; letter-spacing: -.02em; }
.sp-404__tracker-text > span { display: block; font-size: .92rem; color: var(--sp-muted); }
.sp-404__tracker i { display: inline-flex; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--sp-dark); color: #fff; align-items: center; justify-content: center; transition: transform .45s var(--sp-spring), background .3s; }
.sp-404__tracker i svg { width: 18px; height: 18px; }
.sp-404__tracker:hover i { transform: rotate(-45deg); background: var(--sp-blue); }
.sp-404__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.sp-404__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; margin-top: 26px; font-size: .9rem; color: var(--sp-muted); }
.sp-404__links a { padding: 7px 14px; border-radius: 999px; background: var(--sp-surface); box-shadow: var(--sp-shadow-sm); color: var(--sp-ink-2); font-weight: 500; transition: transform .45s var(--sp-spring), color .2s; }
.sp-404__links a:hover { transform: translateY(-3px); color: var(--sp-blue); }
@media (max-width: 720px) {
	.sp-404__float--a { left: -6%; }
	.sp-404__float--a .sp-i3d { width: 56px; height: 56px; border-radius: 18px; }
	.sp-404__tracker { gap: 14px; padding: 16px; align-items: flex-start; }
	.sp-404__tracker .sp-i3d { width: 52px; height: 52px; border-radius: 16px; }
	.sp-404__tracker .sp-i3d__glyph svg { width: 24px; height: 24px; }
	.sp-404__tracker i { width: 36px; height: 36px; }
	.sp-404__tracker b { font-size: 1.15rem; }
}

/* ------------------------------------------------------------- Reveal system */
.sp-js [data-anim] { opacity: 0; }
.sp-js [data-anim="up"] { transform: translateY(40px); }
.sp-js [data-anim="scale"] { transform: scale(.9); }
.sp-js [data-anim="pop"] { transform: translateY(34px) scale(.94) rotate(-2deg); }
.sp-js [data-anim].is-in {
	opacity: 1;
	transform: none;
	transition: opacity .9s var(--sp-out) var(--sp-delay, 0ms), transform 1s var(--sp-spring) var(--sp-delay, 0ms);
}
[data-stagger] > * { --sp-delay: calc(var(--i, 0) * 90ms); }

.sp-word { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .03em .14em; margin-bottom: -.14em; }
.sp-word > span { display: inline-block; }
.sp-js .sp-word > span { transform: translateY(115%); }
.sp-js .is-in .sp-word > span { transform: none; transition: transform 1s var(--sp-out) var(--sp-delay, 0ms); }

/* ------------------------------------------------------------- Breakpoints */
@media (max-width: 1080px) {
	.sp-why, .sp-split, .sp-faq, .sp-contact { grid-template-columns: minmax(0, 1fr); }
	.sp-faq__aside { position: static; }
	.sp-trackers { grid-template-columns: minmax(0, 1fr); }
	.sp-tracker-card { min-height: 0; }
	.sp-tracker-feature { grid-template-columns: minmax(0, 1fr); }
	.sp-bento > *, .sp-bento > .sp-bento--wide, .sp-bento > .sp-bento--narrow { grid-column: span 3; }
	.sp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sp-steps { grid-template-columns: minmax(0, 1fr); }
	.sp-steps__line { display: none; }
	.sp-auds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sp-about__cols { grid-template-columns: minmax(0, 1fr); }
	.sp-footer__top { grid-template-columns: minmax(0, 1fr); }
	.sp-float--a, .sp-float--c, .sp-stage .sp-file { display: none; }
}

@media (max-width: 720px) {
	:root { --sp-gutter: 16px; }
	body { font-size: 16px; }
	.sp-header { top: 10px; }
	.sp-header__bar { padding-left: 16px; }
	.sp-bento > *, .sp-bento > .sp-bento--wide, .sp-bento > .sp-bento--narrow { grid-column: span 6; }
	.sp-stats, .sp-auds, .sp-notes, .sp-form-grid { grid-template-columns: minmax(0, 1fr); }
	.sp-stage__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sp-stage__head { flex-direction: column; }
	.sp-float { display: none; }
	.sp-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sp-footer__bottom { flex-direction: column; align-items: flex-start; }
	.sp-cta, .sp-about, .sp-footer__card { border-radius: 30px; }
	.sp-sticker { display: none; }
	.sp-hero__actions .sp-btn { width: 100%; justify-content: space-between; }
	.sp-cookie { left: 10px; right: 10px; bottom: 10px; width: auto; }
	.sp-toasts { left: 10px; right: 10px; bottom: 10px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.sp-js [data-anim], .sp-js .sp-word > span, .sp-js .sp-log__line, .sp-js .sp-mini .sp-row { opacity: 1 !important; transform: none !important; }
	.sp-js .sp-statement .sp-w { opacity: 1 !important; }
	.sp-js .sp-scribble path { stroke-dashoffset: 0 !important; }
	.sp-js .sp-steps__line { transform: none !important; }
	.sp-stage__main { transform: none !important; }
	.sp-marquee__track { animation: none !important; }
	.sp-js .sp-compare__side--after .sp-compare__list li { opacity: 1 !important; transform: none !important; }
	.sp-strike { background-size: 100% 1.5px !important; }
	.sp-js .sp-footer__mark .sp-wordmark { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

@media print {
	.sp-header, .sp-footer, .sp-cookie, .sp-toasts, .sp-blobs, .sp-dots { display: none !important; }
	body { background: #fff; }
	.sp-js [data-anim] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------- Hero: particle wave */
/* Light theme: a pale backdrop with blue/violet particles. Dark theme: the
   night version below. home.js recolours the particles to match. */
.sp-hero--wave { background: linear-gradient(180deg, #eef0ff 0%, #f4f4fd 55%, var(--sp-bg) 100%); }
.sp-wavebg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sp-wavebg__glow { position: absolute; left: 50%; top: -320px; width: 1200px; height: 760px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(54, 71, 255, .2), rgba(139, 92, 246, .08) 55%, transparent); }
.sp-wavebg__grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(54, 71, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(54, 71, 255, .06) 1px, transparent 1px);
	background-size: 72px 72px;
	background-position: center top;
	-webkit-mask-image: radial-gradient(60% 45% at 50% 18%, #000, transparent 80%);
	mask-image: radial-gradient(60% 45% at 50% 18%, #000, transparent 80%);
}
.sp-wavebg__canvas {
	position: absolute;
	left: 0;
	top: 560px;
	width: 100%;
	height: 720px;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 70%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 70%, transparent 100%);
}

html[data-theme="dark"] .sp-hero--wave { background: linear-gradient(180deg, #07071a 0%, #08081f 58%, #0b0b26 74%, var(--sp-bg) 100%); color: rgba(255, 255, 255, .7); }
html[data-theme="dark"] .sp-wavebg__glow { background: radial-gradient(closest-side, rgba(54, 71, 255, .42), rgba(139, 92, 246, .12) 55%, transparent); }
html[data-theme="dark"] .sp-wavebg__grid { background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); }
html[data-theme="dark"] .sp-hero--wave h1 { color: #fff; }
html[data-theme="dark"] .sp-hero--wave .sp-hl { background: linear-gradient(100deg, #8a94ff 10%, #c4a6ff 90%); -webkit-background-clip: text; background-clip: text; }
html[data-theme="dark"] .sp-hero--wave .sp-hero__lede,
html[data-theme="dark"] .sp-hero--wave .sp-hero__note { color: rgba(255, 255, 255, .66); }
html[data-theme="dark"] .sp-hero--wave .sp-hero__note svg { color: #8a94ff; }
html[data-theme="dark"] .sp-hero--wave .sp-hero__inner > .sp-badge { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; backdrop-filter: blur(8px); }
html[data-theme="dark"] .sp-hero--wave .sp-btn--ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .2); }
html[data-theme="dark"] .sp-hero--wave .sp-btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .35); }
html[data-theme="dark"] .sp-hero--wave .sp-btn--ghost .sp-btn__icon { background: #fff; color: #0c0c1d; }
@media (max-width: 720px) {
	.sp-wavebg__canvas { top: 640px; height: 480px; }
	.sp-wavebg__glow { width: 700px; height: 520px; top: -260px; }
}

/* Justified body text (no hyphenation, words never split). */
.sp-tracker-card p,
.sp-boardsec__text .sp-lede,
.sp-card p,
.sp-connect__head .sp-lede,
.sp-connect__head .sp-callout span,
.sp-about4__lead,
.sp-about4__quote p,
.sp-accordion__panel-inner p,
.sp-contact .sp-lede,
.sp-why2__head .sp-statement,
#trackers .sp-section-head .sp-lede,
.sp-services__body,
.sp-why2__close,
.sp-cta .sp-lede {
	text-align: justify;
	text-justify: inter-word;
	hyphens: manual;
	-webkit-hyphens: manual;
	overflow-wrap: normal;
	word-break: normal;
}

/* Centred blocks keep their last line centred when justified. */
#trackers .sp-section-head .sp-lede,
.sp-why2__close,
.sp-cta .sp-lede { text-align-last: center; }

/* Audiences heading: two lines on wide screens, natural wrapping below. */
.sp-br-wide { display: none; }
@media (min-width: 1024px) {
	.sp-br-wide { display: inline; }
	#who-it-serves .sp-section-head,
	#who-it-serves .sp-section-head h2 { max-width: none; }
}


/* ------------------------------------------------------------ Refinements */
/* Blobs fade out before the hero ends, so its edge never cuts one in half. */
.sp-hero .sp-blobs,
.sp-tk-hero .sp-blobs,
.sp-page-hero .sp-blobs {
	-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

/* Legal pages: status line. */
.sp-prose .sp-legal-status { font-size: .9rem; color: var(--sp-muted); }

/* ------------------------------------------------ Tablet and phone fixes
   Everything below applies only to screens 1080px wide or narrower, or to
   touch screens. Laptop and desktop layouts are unchanged. */

@media (max-width: 1080px) {
	/* Sample report rows: keep the column to the card width so long URLs
	   end in an ellipsis instead of running past the card. */
	.sp-stage__rows { grid-template-columns: minmax(0, 1fr); }
	/* The language chip sat flush against the screen edge on tablets. */
	.sp-float--d { left: 0; }
}

@media (max-width: 480px) {
	/* More room for the URL in the sample report rows. */
	.sp-stage__rows .sp-chip--ok { display: none; }
}

/* Small phones (iPhone SE, 320px wide). */
@media (max-width: 374px) {
	.sp-header__bar { gap: 8px; padding-left: 12px; }
	.sp-header .sp-logo img { height: 30px; }
	.sp-hero h1 { font-size: 2.15rem; }
	.sp-demo-search { gap: 8px; }
	.sp-demo-search__btn { gap: 0; padding: 5px; font-size: 0; }
	.sp-board { --tile: 11.5px; padding: 10px; }
	.sp-board__head,
	.sp-board__row { gap: 8px; }
}

/* Touch screens: footer links get finger-sized tap targets (44px). */
@media (pointer: coarse) {
	.sp-footer li { margin-bottom: 0; }
	.sp-footer li a { padding-block: 10px; }
	.sp-footer__legal a,
	.sp-footer__legal button { padding-block: 10px; }
	/* Contact section: the whole tracker card is the link, not just its text. */
	.sp-contact__points li { position: relative; }
	.sp-contact__points li > a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
}