/**
 * SignalMind — Platform page
 *
 * Two layers:
 *
 *   1. `.sm-mock`  — the illustration primitives. One panel shell plus rows,
 *                    meters, tiles, bars, sparklines, a ring, segments, a check
 *                    list and a heat grid. All nine dashboard illustrations on
 *                    this page are compositions of these; a tenth costs markup,
 *                    not CSS.
 *   2. `.sm-pp-*`  — the page sections themselves.
 *
 * Loaded on the Platform template only.
 *
 * @package SignalMind
 */

/* ==========================================================================
   1 — Illustration primitives
   ========================================================================== */

.sm-mock {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--sm-radius-xl);
	background-color: rgba(11, 15, 21, 0.82);
	backdrop-filter: blur(var(--sm-blur-md));
	-webkit-backdrop-filter: blur(var(--sm-blur-md));
	box-shadow: var(--sm-shadow-xl);
	font-size: 12px;
	line-height: 1.4;
	color: var(--sm-color-text-secondary);
}

/* Gradient hairline, masked to the panel edge. */
.sm-mock::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: var(--sm-z-raised);
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(150deg, var(--sm-alpha-white-16), var(--sm-alpha-white-4) 42%, transparent 64%, var(--sm-alpha-primary-24));
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	pointer-events: none;
}

.sm-mock__chrome {
	display: flex;
	align-items: center;
	gap: 0.9em;
	padding: 0.8em 1em;
	border-bottom: var(--sm-border-width) solid var(--sm-alpha-white-8);
	background-color: var(--sm-alpha-white-2);
}

.sm-mock__dots {
	display: inline-flex;
	gap: 0.4em;
}

.sm-mock__dots i {
	width: 0.58em;
	height: 0.58em;
	border-radius: var(--sm-radius-circle);
	background-color: var(--sm-alpha-white-16);
}

.sm-mock__url {
	flex: 1 1 auto;
	padding: 0.3em 0.9em;
	border-radius: var(--sm-radius-pill);
	background-color: var(--sm-alpha-white-4);
	font-size: 0.82em;
	color: var(--sm-color-text-subtle);
	text-align: center;
}

.sm-mock__body {
	display: flex;
	flex-direction: column;
	gap: 0.85em;
	padding: 1em;
}

.sm-mock__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.7em;
	padding-bottom: 0.7em;
	border-bottom: var(--sm-border-width) solid var(--sm-alpha-white-6);
}

.sm-mock__title {
	font-size: 0.95em;
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-text);
}

.sm-mock__tag,
.sm-mock__note {
	font-size: 0.78em;
	color: var(--sm-color-text-subtle);
}

.sm-mock__label {
	font-size: 0.76em;
	letter-spacing: var(--sm-tracking-wide);
	color: var(--sm-color-text-subtle);
}

/* Pills */

.sm-mock__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.2em 0.55em;
	border-radius: 0.35em;
	font-size: 0.74em;
	font-weight: var(--sm-weight-bold);
	letter-spacing: 0.05em;
	background-color: var(--sm-alpha-white-6);
	color: var(--sm-color-text-muted);
	white-space: nowrap;
}

.sm-mock__pill.is-buy { background-color: var(--sm-color-success-surface); color: var(--sm-color-bull); }
.sm-mock__pill.is-sell { background-color: var(--sm-color-danger-surface); color: var(--sm-color-bear); }
.sm-mock__pill.is-ok { background-color: var(--sm-color-primary-subtle); color: var(--sm-color-primary); }
.sm-mock__pill.is-live { background-color: var(--sm-color-primary-subtle); color: var(--sm-color-primary); }

.sm-mock__pill.is-live i {
	width: 0.4em;
	height: 0.4em;
	border-radius: var(--sm-radius-circle);
	background-color: currentColor;
	animation: sm-pulse 2.2s var(--sm-ease-in-out) infinite;
}

/* Rows */

.sm-mock__rows {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}

.sm-mock__row {
	display: flex;
	align-items: center;
	gap: 0.65em;
	padding: 0.45em 0.55em;
	border-radius: 0.5em;
	background-color: var(--sm-alpha-white-2);
}

.sm-mock__sym {
	font-size: 0.86em;
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-text);
	white-space: nowrap;
}

.sm-mock__sym--wide { min-width: 6.2em; }
.sm-mock__sym--grow { flex: 1 1 auto; }

.sm-mock__val {
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
	color: var(--sm-color-text-muted);
	margin-left: auto;
	white-space: nowrap;
}

.sm-mock__val.is-near { color: var(--sm-color-warning); font-weight: var(--sm-weight-semibold); }
.sm-mock__val.is-watch { color: var(--sm-color-text-muted); }
.sm-mock__val.is-idle { color: var(--sm-color-text-disabled); }
.sm-mock__val.is-up { color: var(--sm-color-bull); }
.sm-mock__val.is-down { color: var(--sm-color-bear); }
.sm-mock__val.is-ok { color: var(--sm-color-primary); }
.sm-mock__val.is-muted { color: var(--sm-color-text-disabled); margin-left: 0; }

/* Meters */

.sm-mock__meter {
	display: block;
	flex: 1 1 auto;
	min-width: 2em;
	max-width: 16em;
	height: 0.32em;
	border-radius: var(--sm-radius-pill);
	background-color: var(--sm-alpha-white-8);
	overflow: hidden;
}

.sm-mock__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background-image: var(--sm-gradient-brand);
}

.sm-mock__fill.is-warn {
	background-image: linear-gradient(90deg, var(--sm-warning-500), var(--sm-warning-400));
}

.sm-mock__fill.is-w95 { width: 95%; }
.sm-mock__fill.is-w92 { width: 92%; }
.sm-mock__fill.is-w88 { width: 88%; }
.sm-mock__fill.is-w81 { width: 81%; }
.sm-mock__fill.is-w74 { width: 74%; }
.sm-mock__fill.is-w66 { width: 66%; }
.sm-mock__fill.is-w47 { width: 47%; }
.sm-mock__fill.is-w33 { width: 33%; }

/* Tiles */

.sm-mock__tiles {
	display: grid;
	gap: 0.6em;
}

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

.sm-mock__tile {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	padding: 0.65em;
	min-width: 0;
	border: var(--sm-border-width) solid var(--sm-alpha-white-6);
	border-radius: 0.6em;
	background-color: var(--sm-alpha-white-2);
}

.sm-mock__tile-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4em;
}

.sm-mock__num {
	font-size: 1.15em;
	font-weight: var(--sm-weight-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	color: var(--sm-color-text);
}

.sm-mock__num.is-brand { color: var(--sm-color-primary); }
.sm-mock__num.is-warn { color: var(--sm-color-warning); }
.sm-mock__num.is-down { color: var(--sm-color-bear); }

.sm-mock__delta {
	font-size: 0.74em;
	font-weight: var(--sm-weight-semibold);
	font-variant-numeric: tabular-nums;
}

.sm-mock__delta.is-up { color: var(--sm-color-bull); }
.sm-mock__delta.is-down { color: var(--sm-color-bear); }

/* Sparklines — area fill plus a stroke traced 7% lower along the same points. */

.sm-mock__spark {
	position: relative;
	display: block;
	height: 2.1em;
	margin-top: 0.1em;
}

.sm-mock__spark::before,
.sm-mock__spark::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sm-mock__spark::before {
	background-image: linear-gradient(180deg, currentColor 0%, transparent 88%);
	opacity: 0.22;
}

.sm-mock__spark::after { background-color: currentColor; }

.sm-mock__spark.is-up { color: var(--sm-color-bull); }
.sm-mock__spark.is-down { color: var(--sm-color-bear); }

.sm-mock__spark--a::before { clip-path: polygon(0% 76%, 16.6% 62%, 33.3% 68%, 50% 48%, 66.6% 40%, 83.3% 30%, 100% 18%, 100% 100%, 0% 100%); }
.sm-mock__spark--a::after {
	clip-path: polygon(0% 76%, 16.6% 62%, 33.3% 68%, 50% 48%, 66.6% 40%, 83.3% 30%, 100% 18%,
		100% 25%, 83.3% 37%, 66.6% 47%, 50% 55%, 33.3% 75%, 16.6% 69%, 0% 83%);
}

.sm-mock__spark--b::before { clip-path: polygon(0% 70%, 16.6% 66%, 33.3% 58%, 50% 62%, 66.6% 50%, 83.3% 44%, 100% 34%, 100% 100%, 0% 100%); }
.sm-mock__spark--b::after {
	clip-path: polygon(0% 70%, 16.6% 66%, 33.3% 58%, 50% 62%, 66.6% 50%, 83.3% 44%, 100% 34%,
		100% 41%, 83.3% 51%, 66.6% 57%, 50% 69%, 33.3% 65%, 16.6% 73%, 0% 77%);
}

.sm-mock__spark--c::before { clip-path: polygon(0% 34%, 16.6% 42%, 33.3% 38%, 50% 52%, 66.6% 60%, 83.3% 56%, 100% 70%, 100% 100%, 0% 100%); }
.sm-mock__spark--c::after {
	clip-path: polygon(0% 34%, 16.6% 42%, 33.3% 38%, 50% 52%, 66.6% 60%, 83.3% 56%, 100% 70%,
		100% 77%, 83.3% 63%, 66.6% 67%, 50% 59%, 33.3% 45%, 16.6% 49%, 0% 41%);
}

/* Bars */

.sm-mock__bars {
	display: flex;
	align-items: flex-end;
	gap: 0.28em;
	height: 4em;
	flex: 1 1 auto;
	min-width: 0;
}

.sm-mock__bars i {
	flex: 1 1 0;
	min-width: 0;
	border-radius: 0.14em 0.14em 0 0;
	background-image: linear-gradient(180deg, var(--sm-alpha-primary-40), var(--sm-alpha-primary-8));
	box-shadow: inset 0 1px 0 var(--sm-color-primary);
}

.sm-mock__bars i.is-h36 { height: 36%; }
.sm-mock__bars i.is-h42 { height: 42%; }
.sm-mock__bars i.is-h49 { height: 49%; }
.sm-mock__bars i.is-h55 { height: 55%; }
.sm-mock__bars i.is-h58 { height: 58%; }
.sm-mock__bars i.is-h62 { height: 62%; }
.sm-mock__bars i.is-h71 { height: 71%; }
.sm-mock__bars i.is-h77 { height: 77%; }
.sm-mock__bars i.is-h84 { height: 84%; }
.sm-mock__bars i.is-h93 { height: 93%; }

/* Inline bar series used in rows: short, and patterned per row. */
.sm-mock__bars--a,
.sm-mock__bars--b,
.sm-mock__bars--c,
.sm-mock__bars--d {
	height: 1.5em;
	gap: 0.16em;
}

.sm-mock__bars--a i:nth-child(1) { height: 38%; }
.sm-mock__bars--a i:nth-child(2) { height: 55%; }
.sm-mock__bars--a i:nth-child(3) { height: 46%; }
.sm-mock__bars--a i:nth-child(4) { height: 70%; }
.sm-mock__bars--a i:nth-child(5) { height: 62%; }
.sm-mock__bars--a i:nth-child(6) { height: 86%; }
.sm-mock__bars--a i:nth-child(7) { height: 100%; }

.sm-mock__bars--b i:nth-child(1) { height: 52%; }
.sm-mock__bars--b i:nth-child(2) { height: 40%; }
.sm-mock__bars--b i:nth-child(3) { height: 64%; }
.sm-mock__bars--b i:nth-child(4) { height: 50%; }
.sm-mock__bars--b i:nth-child(5) { height: 78%; }
.sm-mock__bars--b i:nth-child(6) { height: 68%; }
.sm-mock__bars--b i:nth-child(7) { height: 92%; }

.sm-mock__bars--c i:nth-child(1) { height: 66%; }
.sm-mock__bars--c i:nth-child(2) { height: 48%; }
.sm-mock__bars--c i:nth-child(3) { height: 58%; }
.sm-mock__bars--c i:nth-child(4) { height: 42%; }
.sm-mock__bars--c i:nth-child(5) { height: 54%; }
.sm-mock__bars--c i:nth-child(6) { height: 46%; }
.sm-mock__bars--c i:nth-child(7) { height: 60%; }

.sm-mock__bars--d i:nth-child(1) { height: 74%; }
.sm-mock__bars--d i:nth-child(2) { height: 60%; }
.sm-mock__bars--d i:nth-child(3) { height: 68%; }
.sm-mock__bars--d i:nth-child(4) { height: 44%; }
.sm-mock__bars--d i:nth-child(5) { height: 52%; }
.sm-mock__bars--d i:nth-child(6) { height: 36%; }
.sm-mock__bars--d i:nth-child(7) { height: 42%; }

/* Check list */

.sm-mock__list {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	margin: 0;
	padding-top: 0.6em;
	border-top: var(--sm-border-width) solid var(--sm-alpha-white-6);
	list-style: none;
}

.sm-mock__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	margin-top: 0;
	font-size: 0.84em;
	line-height: 1.45;
	color: var(--sm-color-text-muted);
}

.sm-mock__list .sm-icon {
	margin-top: 0.2em;
	color: var(--sm-color-primary);
}

/* Stat rows */

.sm-mock__stat {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
}

.sm-mock__stat-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	font-size: 0.82em;
	color: var(--sm-color-text-subtle);
}

.sm-mock__stat-row .sm-mock__val { margin-left: 0; }

/* Ring */

.sm-mock__ring {
	position: relative;
	display: grid;
	place-items: center;
	width: 6em;
	height: 6em;
	margin-inline: auto;
	border-radius: var(--sm-radius-circle);
	background-image: conic-gradient(from 180deg,
		var(--sm-primary-500) 0deg, var(--sm-accent-500) 190deg,
		var(--sm-alpha-white-8) 259deg, var(--sm-alpha-white-8) 360deg);
}

.sm-mock__ring::before {
	content: "";
	position: absolute;
	inset: 0.6em;
	border-radius: var(--sm-radius-circle);
	background-color: #0b0f15;
	box-shadow: inset 0 0 0 1px var(--sm-alpha-white-6);
}

.sm-mock__ring-core {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.1;
}

.sm-mock__ring-value {
	font-size: 1.5em;
	font-weight: var(--sm-weight-bold);
	font-variant-numeric: tabular-nums;
	color: var(--sm-color-text);
}

.sm-mock__ring-label {
	font-size: 0.64em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sm-color-text-subtle);
}

/* Segments */

.sm-mock__seg {
	display: flex;
	gap: 0.3em;
}

.sm-mock__seg i {
	flex: 1 1 0;
	height: 0.35em;
	border-radius: var(--sm-radius-pill);
	background-color: var(--sm-alpha-white-8);
}

.sm-mock__seg i.is-on { background-color: var(--sm-color-warning); }

/* Heat grid */

/* Capped in em rather than left to fill the panel: these illustrations are
   wider than the ones on the home page, and square cells stretched across
   600px stop reading as a heat grid. */
.sm-mock__heat {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 0.24em;
	max-width: 22em;
}

.sm-mock__heat span {
	aspect-ratio: 1;
	border-radius: 0.2em;
}

.sm-mock__heat .is-u3 { background-color: rgba(0, 229, 168, 0.85); }
.sm-mock__heat .is-u2 { background-color: rgba(0, 229, 168, 0.52); }
.sm-mock__heat .is-u1 { background-color: rgba(0, 229, 168, 0.26); }
.sm-mock__heat .is-f { background-color: rgba(255, 255, 255, 0.07); }
.sm-mock__heat .is-d1 { background-color: rgba(242, 75, 75, 0.26); }
.sm-mock__heat .is-d2 { background-color: rgba(242, 75, 75, 0.52); }

/* Channel chip, switch and toast */

.sm-mock__chip {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.8em;
	height: 1.8em;
	border-radius: 0.4em;
	background-color: var(--sm-alpha-white-4);
	color: var(--sm-color-text-muted);
}

.sm-mock__switch {
	position: relative;
	flex: none;
	width: 1.9em;
	height: 1.05em;
	border-radius: var(--sm-radius-pill);
	background-color: var(--sm-alpha-white-12);
}

.sm-mock__switch i {
	position: absolute;
	top: 0.12em;
	left: 0.14em;
	width: 0.8em;
	height: 0.8em;
	border-radius: var(--sm-radius-circle);
	background-color: var(--sm-neutral-0);
}

.sm-mock__switch.is-on { background-color: var(--sm-color-primary); }
.sm-mock__switch.is-on i { transform: translateX(0.82em); }

.sm-mock__toast {
	display: flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.6em;
	border: var(--sm-border-width) solid var(--sm-color-border-brand);
	border-radius: 0.5em;
	background-color: var(--sm-color-primary-subtle);
	font-size: 0.82em;
	color: var(--sm-color-text-muted);
}

.sm-mock__toast strong {
	color: var(--sm-color-text);
	font-weight: var(--sm-weight-semibold);
}

/* ==========================================================================
   2 — Page sections
   ========================================================================== */

.sm-pp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sm-space-2);
	padding: var(--sm-space-1-5) var(--sm-space-3-5);
	border: var(--sm-border-width) solid var(--sm-color-border-brand);
	border-radius: var(--sm-radius-pill);
	background-color: var(--sm-color-primary-subtle);
	font-size: var(--sm-text-xs);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-wider);
	text-transform: uppercase;
	color: var(--sm-color-primary);
}

.sm-pp-eyebrow__dot {
	width: 6px;
	height: 6px;
	border-radius: var(--sm-radius-circle);
	background-color: currentColor;
	box-shadow: 0 0 0 3px var(--sm-alpha-primary-16);
	animation: sm-pulse 2.6s var(--sm-ease-in-out) infinite;
}

/* Shared glass card used by the deep-dive, benefit and technology grids. */
.sm-pp-spec,
.sm-pp-benefit,
.sm-pp-tech-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-3);
	padding: var(--sm-space-6);
	border-radius: var(--sm-radius-xl);
	background-color: var(--sm-color-surface-glass);
	backdrop-filter: blur(var(--sm-blur-md));
	-webkit-backdrop-filter: blur(var(--sm-blur-md));
	box-shadow: var(--sm-shadow-lg);
	transition: transform var(--sm-duration-base) var(--sm-ease-out),
		box-shadow var(--sm-duration-base) var(--sm-ease-standard);
}

.sm-pp-spec::before,
.sm-pp-benefit::before,
.sm-pp-tech-card::before,
.sm-pp-row__visual::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(150deg, var(--sm-alpha-white-16), var(--sm-alpha-white-4) 42%, transparent 64%, var(--sm-alpha-primary-24));
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	pointer-events: none;
}

.sm-pp-spec:hover,
.sm-pp-benefit:hover,
.sm-pp-tech-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sm-shadow-xl), 0 0 38px -16px var(--sm-alpha-primary-40);
}

/* Shared icon plate. */
.sm-pp-row__icon,
.sm-pp-spec__icon,
.sm-pp-benefit__icon,
.sm-pp-tech-card__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: var(--sm-radius-lg);
	border: var(--sm-border-width) solid var(--sm-color-border);
	background-image: var(--sm-gradient-brand-soft);
	color: var(--sm-color-primary);
}

.sm-pp-spec__icon {
	width: 32px;
	height: 32px;
	border-radius: var(--sm-radius-md);
}

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

.sm-pp-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: calc(var(--sm-header-height) + var(--sm-space-12)) var(--sm-section-y);
}

.sm-pp-hero__bg {
	position: absolute;
	inset: 0;
	z-index: var(--sm-z-behind);
	pointer-events: none;
}

.sm-pp-hero__orb {
	position: absolute;
	border-radius: var(--sm-radius-circle);
}

.sm-pp-hero__orb--a {
	top: -24%;
	left: -10%;
	width: 52vw;
	height: 52vw;
	max-width: 780px;
	max-height: 780px;
	background: radial-gradient(circle at center, rgba(0, 229, 168, 0.18) 0%, transparent 64%);
}

.sm-pp-hero__orb--b {
	top: -18%;
	right: -12%;
	width: 48vw;
	height: 48vw;
	max-width: 720px;
	max-height: 720px;
	background: radial-gradient(circle at center, rgba(0, 194, 255, 0.16) 0%, transparent 66%);
}

.sm-pp-hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
	background-size: 68px 68px;
	mask-image: radial-gradient(110% 80% at 50% 0%, #000 0%, transparent 78%);
	-webkit-mask-image: radial-gradient(110% 80% at 50% 0%, #000 0%, transparent 78%);
}

.sm-pp-hero__layout {
	display: grid;
	gap: var(--sm-space-10);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

@media (min-width: 1024px) {
	.sm-pp-hero__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: var(--sm-space-12);
	}
}

.sm-pp-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sm-space-5);
	max-width: 34rem;
}

.sm-pp-hero__title {
	font-size: var(--sm-text-h1);
	font-weight: var(--sm-weight-extrabold);
	line-height: 1.14;
	letter-spacing: -0.03em;
	color: var(--sm-color-text);
	text-wrap: balance;
}

.sm-pp-hero__accent {
	display: block;
	background-image: linear-gradient(96deg, var(--sm-primary-300) 0%, var(--sm-accent-300) 58%, var(--sm-accent-200) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	padding-bottom: 0.08em;
}

.sm-pp-hero__text {
	font-size: var(--sm-text-md);
	line-height: var(--sm-leading-relaxed);
	color: var(--sm-color-text-muted);
}

.sm-pp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sm-space-3);
	margin-top: var(--sm-space-2);
}

.sm-pp-hero__preview {
	position: relative;
}

.sm-pp-hero__preview::before {
	content: "";
	position: absolute;
	inset: 10% -6% -12%;
	z-index: var(--sm-z-behind);
	border-radius: var(--sm-radius-circle);
	background: radial-gradient(closest-side, rgba(0, 229, 168, 0.16), transparent 78%);
}

.sm-pp-hero__preview .sm-mock {
	font-size: 12.5px;
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.sm-pp-hero__preview .sm-mock {
		animation: sm-pp-float 9s var(--sm-ease-in-out) infinite;
	}
}

/* --------------------------------------------------------------------------
   Showcase rows
   -------------------------------------------------------------------------- */

.sm-pp-showcase__head,
.sm-pp-dive__head,
.sm-pp-flow__head,
.sm-pp-benefits__head,
.sm-pp-tech__head,
.sm-pp-faq__head {
	margin-bottom: var(--sm-space-14);
}

.sm-pp-showcase__rows {
	display: flex;
	flex-direction: column;
	gap: var(--sm-section-y-sm);
}

.sm-pp-row {
	display: grid;
	gap: var(--sm-space-8);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

@media (min-width: 900px) {
	.sm-pp-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--sm-space-12);
	}

	/* Alternate which side the illustration sits on. Source order stays
	   copy-then-visual, so the reading order is unchanged. */
	.sm-pp-row--flip .sm-pp-row__copy { order: 2; }
	.sm-pp-row--flip .sm-pp-row__visual { order: 1; }
}

.sm-pp-row__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sm-space-3);
	max-width: 32rem;
}

.sm-pp-row__eyebrow {
	font-size: var(--sm-text-2xs);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-widest);
	text-transform: uppercase;
	color: var(--sm-color-primary);
}

.sm-pp-row__title {
	font-size: var(--sm-text-h2);
	font-weight: var(--sm-weight-bold);
	line-height: var(--sm-leading-tight);
	letter-spacing: var(--sm-tracking-tight);
	color: var(--sm-color-text);
	text-wrap: balance;
}

.sm-pp-row__text {
	font-size: var(--sm-text-md);
	line-height: var(--sm-leading-relaxed);
	color: var(--sm-color-text-muted);
}

.sm-pp-row__benefits {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-2-5);
	margin: var(--sm-space-2) 0 0;
	padding: 0;
	list-style: none;
}

.sm-pp-row__benefits li {
	display: flex;
	align-items: flex-start;
	gap: var(--sm-space-2-5);
	margin-top: 0;
	font-size: var(--sm-text-sm);
	line-height: var(--sm-leading-normal);
	color: var(--sm-color-text-secondary);
}

.sm-pp-check {
	display: grid;
	place-items: center;
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border-radius: var(--sm-radius-circle);
	background-color: var(--sm-color-primary-subtle);
	color: var(--sm-color-primary);
	box-shadow: inset 0 0 0 1px var(--sm-alpha-primary-24);
}

.sm-pp-row__visual {
	position: relative;
	padding: var(--sm-space-5);
	border-radius: var(--sm-radius-2xl);
	background-image: var(--sm-gradient-brand-soft);
}

/* --------------------------------------------------------------------------
   Deep dive
   -------------------------------------------------------------------------- */

.sm-pp-dive__grid,
.sm-pp-benefits__grid,
.sm-pp-tech__grid {
	display: grid;
	gap: var(--sm-grid-gap);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
	.sm-pp-dive__grid,
	.sm-pp-benefits__grid,
	.sm-pp-tech__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.sm-pp-dive__grid,
	.sm-pp-benefits__grid,
	.sm-pp-tech__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.sm-pp-spec__head {
	display: flex;
	align-items: center;
	gap: var(--sm-space-3);
}

.sm-pp-spec__title {
	font-size: var(--sm-text-h5);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-snug);
	color: var(--sm-color-text);
}

.sm-pp-spec__text {
	font-size: var(--sm-text-sm);
	line-height: var(--sm-leading-relaxed);
	color: var(--sm-color-text-muted);
}

.sm-pp-spec__list {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-2);
	margin: auto 0 0;
	padding-top: var(--sm-space-4);
	border-top: var(--sm-border-width) solid var(--sm-color-divider);
}

.sm-pp-spec__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sm-space-3);
	font-size: var(--sm-text-xs);
}

.sm-pp-spec__item dt {
	font-weight: var(--sm-weight-medium);
	color: var(--sm-color-text-subtle);
}

.sm-pp-spec__item dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var(--sm-color-text-secondary);
}

/* --------------------------------------------------------------------------
   Workflow
   -------------------------------------------------------------------------- */

.sm-pp-flow {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.sm-pp-flow__bg {
	position: absolute;
	inset: 0;
	z-index: var(--sm-z-behind);
	pointer-events: none;
}

.sm-pp-flow__bg span {
	position: absolute;
	top: 30%;
	left: 50%;
	width: min(72rem, 130%);
	aspect-ratio: 3 / 1;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, var(--sm-alpha-primary-8) 0%, transparent 68%);
}

.sm-pp-flow__list {
	position: relative;
	display: grid;
	gap: var(--sm-space-6);
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

/*
 * The connector is drawn once on the list, inset so it starts at the first node
 * and stops at the last. Drawing it per step would leave a line trailing off the
 * end of the final one.
 */
.sm-pp-flow__list::before {
	content: "";
	position: absolute;
	z-index: var(--sm-z-behind);
	left: 19px;
	top: 19px;
	bottom: 19px;
	width: 2px;
	background-image: linear-gradient(180deg, var(--sm-alpha-primary-40), var(--sm-alpha-accent-24), transparent);
}

.sm-pp-step {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	grid-template-areas:
		"node title"
		"node text";
	column-gap: var(--sm-space-4);
	row-gap: var(--sm-space-1);
	margin-top: 0;
}

.sm-pp-step__node {
	grid-area: node;
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--sm-radius-circle);
	border: var(--sm-border-width) solid var(--sm-color-border-brand);
	background-color: var(--sm-color-bg);
	background-image: var(--sm-gradient-brand-soft);
	color: var(--sm-color-primary);
}

.sm-pp-step__index {
	position: absolute;
	right: -4px;
	bottom: -6px;
	padding: 1px 5px;
	border-radius: var(--sm-radius-pill);
	background-color: var(--sm-color-surface-overlay);
	border: var(--sm-border-width) solid var(--sm-color-border);
	font-size: 9px;
	font-weight: var(--sm-weight-bold);
	font-variant-numeric: tabular-nums;
	color: var(--sm-color-text-subtle);
}

.sm-pp-step__title {
	grid-area: title;
	align-self: center;
	font-size: var(--sm-text-h5);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-snug);
	color: var(--sm-color-text);
}

.sm-pp-step__text {
	grid-area: text;
	font-size: var(--sm-text-sm);
	line-height: var(--sm-leading-normal);
	color: var(--sm-color-text-muted);
}

/* Horizontal rail once there is room for seven columns. */
@media (min-width: 1100px) {
	.sm-pp-flow__list {
		grid-template-columns: repeat(7, minmax(0, 1fr));
		gap: var(--sm-space-4);
	}

	.sm-pp-flow__list::before {
		left: 7%;
		right: 7%;
		top: 20px;
		bottom: auto;
		width: auto;
		height: 2px;
		background-image: linear-gradient(90deg, transparent, var(--sm-alpha-primary-40) 12%, var(--sm-alpha-accent-24) 88%, transparent);
	}

	.sm-pp-step {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"node"
			"title"
			"text";
		justify-items: center;
		row-gap: var(--sm-space-3);
		text-align: center;
	}

	.sm-pp-step__title {
		font-size: var(--sm-text-base);
	}

	.sm-pp-step__text {
		font-size: var(--sm-text-xs);
	}
}

/* --------------------------------------------------------------------------
   Benefits and technology
   -------------------------------------------------------------------------- */

.sm-pp-benefit__title,
.sm-pp-tech-card__title {
	font-size: var(--sm-text-h5);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-snug);
	color: var(--sm-color-text);
}

.sm-pp-benefit__text,
.sm-pp-tech-card__text {
	font-size: var(--sm-text-sm);
	line-height: var(--sm-leading-relaxed);
	color: var(--sm-color-text-muted);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.sm-pp-faq__accordion {
	background-color: var(--sm-color-surface-glass);
	backdrop-filter: blur(var(--sm-blur-md));
	-webkit-backdrop-filter: blur(var(--sm-blur-md));
}

.sm-pp-faq__accordion .sm-accordion__trigger {
	font-size: var(--sm-text-md);
	font-weight: var(--sm-weight-semibold);
}

/* --------------------------------------------------------------------------
   Closing call to action
   -------------------------------------------------------------------------- */

.sm-pp-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--sm-section-y);
	border-top: var(--sm-border-width) solid var(--sm-color-border);
	background-color: var(--sm-color-bg-alt);
	text-align: center;
}

.sm-pp-cta__bg {
	position: absolute;
	inset: 0;
	z-index: var(--sm-z-behind);
	pointer-events: none;
}

.sm-pp-cta__glow {
	position: absolute;
	bottom: -60%;
	left: 50%;
	width: min(70rem, 140%);
	aspect-ratio: 2 / 1;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, var(--sm-alpha-primary-16) 0%, transparent 66%);
}

.sm-pp-cta__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: 60px 60px;
	mask-image: radial-gradient(80% 100% at 50% 100%, #000 0%, transparent 76%);
	-webkit-mask-image: radial-gradient(80% 100% at 50% 100%, #000 0%, transparent 76%);
}

.sm-pp-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sm-space-5);
}

.sm-pp-cta__title {
	font-size: var(--sm-text-h1);
	font-weight: var(--sm-weight-extrabold);
	line-height: var(--sm-leading-tight);
	letter-spacing: var(--sm-tracking-tighter);
	color: var(--sm-color-text);
	text-wrap: balance;
}

.sm-pp-cta__text {
	max-width: var(--sm-measure);
	font-size: var(--sm-text-md);
	line-height: var(--sm-leading-relaxed);
	color: var(--sm-color-text-muted);
}

/* ==========================================================================
   Motion
   ========================================================================== */

@keyframes sm-pp-float {
	0%,
	100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, -8px, 0); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1099px) {
	.sm-pp-showcase__head,
	.sm-pp-dive__head,
	.sm-pp-flow__head,
	.sm-pp-benefits__head,
	.sm-pp-tech__head,
	.sm-pp-faq__head {
		margin-bottom: var(--sm-space-10);
	}
}

@media (max-width: 899px) {
	.sm-pp-hero {
		padding-block: calc(var(--sm-header-height) + var(--sm-space-8)) var(--sm-section-y-sm);
	}

	.sm-pp-row__visual {
		padding: var(--sm-space-4);
	}
}

@media (max-width: 599px) {
	.sm-mock {
		font-size: 10.5px;
	}

	.sm-pp-spec,
	.sm-pp-benefit,
	.sm-pp-tech-card {
		padding: var(--sm-space-5);
	}

	/* Four data columns do not fit a phone; the gross figure goes and the net
	   one — the number that matters — stays. */
	.sm-mock--paper .sm-mock__val.is-muted {
		display: none;
	}
}