/* ═══════════════════════════════════════════════════════════════════════
   PERSEUS — STAGES DESIGN SYSTEM
   Shared by clinicstages.html and the four stage-*.html pages.

   Built to match problemssolved.html and deliverables.html exactly:
   same Inter Tight scale, same hero stage gradient, same section rhythm,
   same purple. Everything stage-specific is prefixed sg-.

   These pages do NOT load style.css or glass-cards.css. The whole system
   lives here so the five pages cannot drift apart from each other.
   ═══════════════════════════════════════════════════════════════════════ */

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

:root {
	--purple: #6938ef;
	--purple-hover: #5527cc;
	--purple-deep: #451C46;
	--purple-bg: rgba(105,56,239,0.07);
	--purple-border: rgba(105,56,239,0.14);
	--text: #111111;
	--muted: #666666;
	--card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 28px rgba(0,0,0,0.06);
	--nav-h: 65px;

	/* The only red and green on these pages. Both are pulled from the
	   problemssolved gauge so a leak bar on a stage page is the same red
	   as a leak bar on the problems page. Nothing glows. */
	--bad: #cf1d1d;
	--bad-bar: linear-gradient(90deg, #f87171, #dc2626);
	--bad-tint: rgba(220,38,38,0.055);
	--bad-line: rgba(220,38,38,0.16);
	--good: #15803d;
	--good-bar: linear-gradient(90deg, #4ade80, #16a34a);
	--good-tint: rgba(22,163,74,0.055);
	--good-line: rgba(22,163,74,0.18);
}

html {
	scroll-behavior: smooth; background-color: #fff;
	-webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body {
	font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: #ffffff;
	color: var(--text);
	overflow-x: hidden;
	-webkit-tap-highlight-color: rgba(105,56,239,0.16);
}

.hl-purple {
	background: linear-gradient(135deg, #6938ef 0%, #7c3aed 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	/* negative letter-spacing clips the last glyph out of the paint box */
	padding-right: 0.08em;
	margin-right: -0.08em;
}

/* ═══════════════════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════════════════ */
.hp-nav-outer {
	position: sticky; top: 0; z-index: 9999;
	isolation: isolate;
	background: transparent;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255,255,255,0.09);
	transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.hp-nav {
	max-width: 1360px; margin: 0 auto;
	padding: 16px 40px;
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; position: relative; z-index: 2;
}
.hp-nav-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; }
.hp-nav-logo img { height: 30px; width: 30px; }
.hp-nav-logo span { font-size: 1rem; font-weight: 800; color: #ffffff; letter-spacing: -0.02em; }
.hp-nav-links { display: flex; align-items: center; gap: 28px; list-style: none; flex: 1; justify-content: center; }
.hp-nav-links a {
	font-size: 0.93rem; font-weight: 500; color: rgba(219,209,250,0.82);
	text-decoration: none; transition: color 0.15s; white-space: nowrap;
}
.hp-nav-links a:hover { color: #ffffff; }
.hp-nav-ctas { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn-nav-ghost {
	font-size: 0.84rem; font-weight: 600; color: #efeaff;
	background: transparent; border: 1.5px solid rgba(199,183,255,0.36);
	border-radius: 100px; padding: 7px 16px; text-decoration: none;
	transition: border-color 0.15s, color 0.15s; white-space: nowrap;
}
.btn-nav-ghost:hover { border-color: #c4b5fd; color: #ffffff; }
.btn-nav-dark {
	font-size: 0.84rem; font-weight: 700; color: #180a33;
	background: #ffffff; border-radius: 100px; padding: 8px 18px;
	text-decoration: none; transition: background 0.18s, color 0.18s; white-space: nowrap;
}
.btn-nav-dark:hover { background: #c4b5fd; color: #14062b; }

.hp-dd-wrap { position: relative; display: flex; align-items: center; }
.hp-dd-trigger { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.hp-dd-trigger svg { opacity: 0.6; transition: transform 0.2s; }
.hp-dd-wrap:hover .hp-dd-trigger svg { transform: rotate(180deg); opacity: 0.9; }
.hp-dd {
	position: absolute; top: calc(100% + 10px); left: 50%;
	transform: translateX(-50%) translateY(-4px);
	background: #fff; border: 1px solid rgba(17,17,17,0.09);
	border-radius: 14px; padding: 6px 0; min-width: 210px;
	box-shadow: 0 22px 60px rgba(20,8,48,0.28), 0 3px 10px rgba(20,8,48,0.12);
	opacity: 0; visibility: hidden;
	transition: opacity 0.18s, visibility 0.18s, transform 0.18s;
	z-index: 10000;
}
.hp-dd-wrap:hover .hp-dd { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.hp-dd a {
	display: flex; align-items: center; gap: 9px;
	padding: 9px 16px; font-size: 0.84rem; color: #43434d;
	text-decoration: none; transition: color 0.12s, background 0.12s;
}
.hp-dd a:hover { color: var(--purple); background: rgba(105,56,239,0.05); }
/* the dropdown always sits on white, so it keeps dark type in both nav states */
.nav-lit .hp-dd a { color: #43434d; }
.nav-lit .hp-dd a:hover { color: var(--purple); }
.dd-num { font-size: 0.6rem; font-weight: 700; color: var(--purple); letter-spacing: 0.1em; min-width: 16px; }
/* the stage you are already on is marked in its own menu */
.hp-dd a.dd-here { background: rgba(105,56,239,0.07); color: var(--purple); font-weight: 700; }

.hp-toggle {
	display: none; place-items: center;
	width: 44px; height: 44px; margin-right: -10px;
	background: none; border: none; cursor: pointer; padding: 0;
}
.hp-ham, .hp-ham::before, .hp-ham::after {
	display: block; width: 22px; height: 2px;
	background: #ffffff; border-radius: 2px; transition: all 0.25s;
}
.hp-ham { position: relative; }
.hp-ham::before, .hp-ham::after { content: ''; position: absolute; left: 0; }
.hp-ham::before { top: -7px; }
.hp-ham::after { top: 7px; }

.hp-nav-outer.nav-lit {
	background: rgba(250,248,255,0.94);
	border-bottom-color: rgba(105,56,239,0.10);
	box-shadow: 0 6px 28px rgba(43,20,90,0.07);
}
.nav-lit .hp-nav-logo span { color: #111111; }
.nav-lit .hp-nav-links > li > a { color: #555555; }
.nav-lit .hp-nav-links > li > a:hover { color: var(--purple); }
.nav-lit .hp-dd-trigger svg { opacity: 0.45; }
.nav-lit .btn-nav-ghost { color: #111111; border-color: rgba(0,0,0,0.18); }
.nav-lit .btn-nav-ghost:hover { border-color: var(--purple); color: var(--purple); }
.nav-lit .btn-nav-dark { background: var(--purple); color: #ffffff; }
.nav-lit .btn-nav-dark:hover { background: var(--purple-hover); }
.nav-lit .hp-ham, .nav-lit .hp-ham::before, .nav-lit .hp-ham::after { background: #111111; }
.hp-nav-outer:not(.nav-lit) .hp-nav-logo img { filter: brightness(1.35) saturate(1.2); }

.hp-mobile-nav {
	display: none; flex-direction: column; gap: 0;
	background: #fff; border-bottom: 1px solid rgba(0,0,0,0.07);
	padding: 8px 0;
}
.hp-mobile-nav.open { display: flex; }
.hp-mobile-nav a {
	padding: 12px 40px; font-size: 0.9rem; font-weight: 500;
	color: #43434d; text-decoration: none; transition: color 0.14s;
}
.hp-mobile-nav a:hover { color: var(--purple); }
.hp-mobile-nav .hp-mobile-cta {
	margin: 8px 40px; background: var(--purple); color: #fff;
	font-weight: 700; border-radius: 100px; text-align: center;
	padding: 11px 20px; transition: background 0.18s;
}
.hp-mobile-cta:hover { background: var(--purple-hover) !important; }
.hp-mobile-acc-wrap { display: flex; flex-direction: column; }
.hp-mobile-acc-trigger {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 40px; background: none; border: none; cursor: pointer;
	text-align: left; width: 100%; font-family: inherit;
}
.hp-mobile-acc-trigger span { font-size: 0.9rem; font-weight: 500; color: #43434d; transition: color 0.14s; }
.acc-chevron { opacity: 0.4; transition: transform 0.22s, opacity 0.22s; flex-shrink: 0; stroke: #555; }
.hp-mobile-acc-wrap.acc-open .acc-chevron { transform: rotate(180deg); opacity: 0.8; stroke: #6938ef; }
.hp-mobile-acc-items { display: none; flex-direction: column; border-left: 2px solid rgba(105,56,239,0.18); margin: 0 40px 4px; }
.hp-mobile-acc-items.acc-items-open { display: flex; }
.hp-mobile-acc-items a { padding: 9px 16px !important; font-size: 0.82rem !important; color: #595963 !important; font-weight: 500 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   SHARED FURNITURE
   ═══════════════════════════════════════════════════════════════════════ */
.sec-badge {
	display: inline-flex; align-items: center; gap: 7px;
	background: rgba(105,56,239,0.05);
	border: 1px solid rgba(105,56,239,0.14);
	border-radius: 100px; padding: 3px 12px 3px 3px;
	margin-bottom: 18px;
}
.sec-badge-pill {
	background: var(--purple); color: #fff;
	font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em;
	text-transform: uppercase; padding: 3px 9px; border-radius: 100px;
}
.sec-badge-text { font-size: 0.76rem; font-weight: 500; color: #595963; }

.hp-hero { padding: 88px 40px 92px; max-width: 1360px; margin: 0 auto; text-align: center; position: relative; }
.hp-hero > * { position: relative; z-index: 1; }
/* the dropdowns only render above 1100px and the tallest reaches ~228px
   down the page, so the hero needs headroom or an open menu lands on the badge */
@media (min-width: 1101px) { .hp-hero { padding-top: 150px; } }
.hp-hero h1 {
	font-size: clamp(2.9rem, 6.6vw, 5.9rem);
	font-weight: 900; line-height: 1.07; letter-spacing: -0.016em; word-spacing: 0.04em;
	color: #111; margin-bottom: 22px;
}
.hp-hero-sub {
	font-size: clamp(1.06rem, 1.7vw, 1.42rem);
	color: #666; max-width: 760px; margin: 0 auto 38px;
	line-height: 1.68; font-weight: 400;
}
.hp-hero-sub strong { color: #111; font-weight: 700; }
.hp-hero-note { margin: 26px auto 0; max-width: 720px; font-size: 0.9rem; color: #9a9a9a; line-height: 1.6; }
.hp-ctas { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.btn-dark {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--purple); color: #fff; font-size: 1rem; font-weight: 700;
	padding: 15px 30px; border-radius: 100px; text-decoration: none;
	transition: background 0.18s, transform 0.18s; letter-spacing: -0.01em; border: none;
	font-family: inherit; cursor: pointer;
}
.btn-dark:hover { background: var(--purple-hover); }
.btn-outline {
	display: inline-flex; align-items: center; gap: 8px;
	background: transparent; color: var(--purple); font-size: 0.94rem; font-weight: 500;
	padding: 13px 26px; border-radius: 100px; text-decoration: none;
	border: 1.5px solid var(--purple); transition: border-color 0.18s, color 0.18s, background 0.18s;
	letter-spacing: -0.01em; font-family: inherit; cursor: pointer;
}
.btn-outline:hover { background: var(--purple); color: #fff; }

.hp-section { padding: 112px 40px; max-width: 1360px; margin: 0 auto; position: relative; }
.hp-section-hdr { text-align: center; margin-bottom: 52px; }
.hp-section-hdr h2 {
	font-size: clamp(2.9rem, 6.2vw, 5.4rem);
	font-weight: 900; line-height: 1.09; letter-spacing: -0.016em; word-spacing: 0.04em;
	color: #111; margin-bottom: 14px;
}
.hp-section-hdr p { font-size: 1.14rem; color: #52525c; max-width: 680px; margin: 0 auto; line-height: 1.7; }
.hp-section-hdr p strong { color: #111; font-weight: 700; }
.hp-text-link {
	display: inline-flex; align-items: center; gap: 6px;
	color: #595963; font-size: 0.94rem; font-weight: 500;
	text-decoration: none; transition: color 0.18s; letter-spacing: -0.01em;
}
.hp-text-link:hover { color: var(--purple); }
.hp-text-link svg { transition: transform 0.18s; }
.hp-text-link:hover svg { transform: translateX(3px); }

.scroll-target { scroll-margin-top: 92px; }

/* ── Scroll reveal ── */
.rv { opacity: 0; transform: translateY(28px); transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.75s cubic-bezier(0.22,1,0.36,1); }
.rv.rv-in { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════════════════
   DARK PURPLE HERO STAGE
   Identical ramp to problemssolved.html so the three pages share a top.
   ═══════════════════════════════════════════════════════════════════════ */
.hero-stage {
	position: relative; overflow: hidden;
	margin-top: calc(-1 * var(--nav-h));
	padding-top: var(--nav-h);
	background:
		radial-gradient(ellipse 80% 52% at 50% -8%, rgba(154,120,255,0.42) 0%, transparent 62%),
		linear-gradient(180deg,
			#120625 0%,
			#190b33 11%,
			#22114b 25%,
			#30186e 40%,
			#452396 55%,
			#5b32b0 70%,
			#7b57cc 86%,
			#c0b1ec 93%,
			#f5f2fd 97%,
			#ffffff 100%);
}
.hero-stage .hp-hero { padding-bottom: 80px; }
.hero-stage .hp-hero h1 { color: #ffffff; }
.hero-stage .hp-hero .hl-purple {
	background: linear-gradient(120deg, #efe9ff 0%, #bda4ff 44%, #dccfff 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
}
.hero-stage .hp-hero-sub { color: rgba(224,215,252,0.90); }
.hero-stage .hp-hero-sub strong { color: #ffffff; }
.hero-stage .hp-hero-note { color: rgba(255,255,255,0.80); }
.hero-stage .sec-badge {
	background: rgba(255,255,255,0.07);
	border-color: rgba(183,158,255,0.30);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero-stage .sec-badge-pill { background: #7c4dff; }
.hero-stage .sec-badge-text { color: rgba(224,215,252,0.86); }
.hero-stage .btn-dark { background: #ffffff; color: #180a33; }
.hero-stage .btn-dark:hover { background: #c4b5fd; color: #14062b; }
.hero-stage .btn-outline { color: #e7deff; border-color: rgba(199,183,255,0.46); }
.hero-stage .btn-outline:hover { background: #ffffff; color: #180a33; border-color: #ffffff; }

.hero-canvas {
	position: absolute; top: 0; bottom: 0; left: 50%;
	width: 100vw; transform: translateX(-50%);
	overflow: hidden; pointer-events: none; z-index: 0;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0.55) 78%, transparent 92%);
	        mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0.55) 78%, transparent 92%);
}
.hc-grid {
	position: absolute; inset: -4%;
	background-image:
		linear-gradient(rgba(183,158,255,0.10) 1px, transparent 1px),
		linear-gradient(90deg, rgba(183,158,255,0.10) 1px, transparent 1px);
	background-size: 66px 66px;
	-webkit-mask-image: radial-gradient(ellipse 96% 78% at 50% 8%, #000 18%, transparent 76%);
	        mask-image: radial-gradient(ellipse 96% 78% at 50% 8%, #000 18%, transparent 76%);
}
.hc-orb { position: absolute; border-radius: 50%; filter: blur(84px); }
.hc-orb-1 {
	width: 640px; height: 640px; top: -260px; left: -140px;
	background: radial-gradient(circle, rgba(139,92,246,0.50), transparent 70%);
	animation: hcDrift 24s ease-in-out infinite;
}
.hc-orb-2 {
	width: 560px; height: 560px; top: 40px; right: -180px;
	background: radial-gradient(circle, rgba(105,56,239,0.52), transparent 70%);
	animation: hcDrift 29s ease-in-out -8s infinite reverse;
}
.hc-orb-3 {
	width: 700px; height: 480px; bottom: -180px; left: 50%; margin-left: -350px;
	background: radial-gradient(circle, rgba(167,139,250,0.30), transparent 68%);
	animation: hcDrift 34s ease-in-out -16s infinite;
}
@keyframes hcDrift { 0%, 100% { translate: 0 0; } 50% { translate: 46px 34px; } }
@media (max-width: 1100px) { .hero-stage .hp-hero { padding-bottom: 62px; } }

/* ── Scroll cue ── */
.scroll-cue {
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	width: fit-content; margin: 38px auto 0; text-decoration: none;
}
.scroll-cue > span {
	font-size: 0.7rem; font-weight: 800; letter-spacing: 0.13em;
	text-transform: uppercase; color: #6f6a84;
	transition: color 0.2s; text-align: center;
}
.scroll-cue > i {
	width: 44px; height: 44px; border-radius: 50%;
	display: grid; place-items: center;
	border: 1.5px solid rgba(105,56,239,0.22);
	background: rgba(105,56,239,0.05); color: var(--purple);
	animation: cueBob 2.2s ease-in-out infinite;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.scroll-cue:hover > span { color: var(--purple); }
.scroll-cue:hover > i { background: var(--purple); border-color: var(--purple); color: #ffffff; animation-play-state: paused; }
.scroll-cue:focus-visible { outline: 2px solid var(--purple); outline-offset: 6px; border-radius: 14px; }
@keyframes cueBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.scroll-cue.on-wash > span { color: #ffffff; }
.scroll-cue.on-wash > i {
	background: #ffffff; border-color: rgba(105,56,239,0.26);
	color: var(--purple); box-shadow: 0 8px 22px rgba(43,20,90,0.16);
}
.scroll-cue.on-wash:hover > span { color: #ffffff; }
.scroll-cue.on-wash:hover > i { background: var(--purple); border-color: var(--purple); color: #ffffff; }

/* ═══════════════════════════════════════════════════════════════════════
   PROSE BLOCK (matches .pw on problemssolved)
   ═══════════════════════════════════════════════════════════════════════ */
.sg-pw { max-width: 1020px; margin: 0 auto; }
.sg-lede {
	position: relative; padding-left: 26px; margin-bottom: 34px;
	font-size: clamp(1.24rem, 1.85vw, 1.62rem);
	font-weight: 600; line-height: 1.52; letter-spacing: -0.017em; color: #16121f;
}
.sg-lede::before {
	content: ''; position: absolute; left: 0; top: 0.28em; bottom: 0.22em;
	width: 3px; border-radius: 3px;
	background: linear-gradient(180deg, #8b6aff, #6938ef);
}
.sg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 46px; padding-left: 26px; }
.sg-cols p { font-size: 1.04rem; line-height: 1.78; color: #6b6675; }
.sg-cols p strong { color: #26212f; font-weight: 700; }
@media (max-width: 860px) {
	.sg-cols { grid-template-columns: 1fr; gap: 16px; padding-left: 18px; }
	.sg-lede { padding-left: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOTION PANEL
   The animated diagram that opens every stage page. One canvas, four
   different scenes. Each scene is inert SVG until .mp-live is set, so
   nothing animates off screen and reduced-motion holds the end state.
   ═══════════════════════════════════════════════════════════════════════ */
.sg-motion {
	position: relative; max-width: 1100px; margin: 0 auto;
	border-radius: 28px; overflow: hidden;
	background: linear-gradient(165deg, #150a2c 0%, #1d0f43 46%, #2a1560 100%);
	border: 1px solid rgba(167,139,250,0.20);
	box-shadow: 0 30px 90px -40px rgba(43,20,90,0.65);
}
.sg-motion::after {
	/* fine grid over the scene, same texture as the hero canvas */
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background-image:
		linear-gradient(rgba(183,158,255,0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(183,158,255,0.055) 1px, transparent 1px);
	background-size: 52px 52px;
	-webkit-mask-image: radial-gradient(ellipse 92% 80% at 50% 40%, #000 0%, transparent 82%);
	        mask-image: radial-gradient(ellipse 92% 80% at 50% 40%, #000 0%, transparent 82%);
}
.sg-motion-hd {
	position: relative; z-index: 2;
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 18px; flex-wrap: wrap;
	padding: 22px 28px 0;
}
.sg-motion-hd b { font-size: 1.02rem; font-weight: 800; color: #ffffff; letter-spacing: -0.02em; }
.sg-motion-hd span {
	font-size: 0.62rem; font-weight: 800; letter-spacing: 0.13em;
	text-transform: uppercase; color: rgba(196,181,253,0.72);
}
.sg-motion svg { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.sg-motion-cap {
	position: relative; z-index: 2;
	padding: 0 28px 24px; margin-top: -6px;
	font-size: 0.95rem; line-height: 1.65; color: rgba(216,204,250,0.76); max-width: 74ch;
}
.sg-motion-cap strong { color: #ffffff; font-weight: 700; }
@media (max-width: 640px) {
	.sg-motion-hd { padding: 18px 20px 0; }
	.sg-motion-cap { padding: 0 20px 20px; font-size: 0.89rem; }
}

/* shared scene primitives */
.mp-node { transition: opacity 0.5s ease; }
.mp-lbl { font-family: 'Inter Tight', sans-serif; font-weight: 700; fill: rgba(224,215,252,0.86); }
.mp-lbl-sm { font-family: 'Inter Tight', sans-serif; font-weight: 800; letter-spacing: 0.09em; fill: rgba(196,181,253,0.62); }
.mp-val { font-family: 'Inter Tight', sans-serif; font-weight: 900; fill: #ffffff; font-variant-numeric: tabular-nums; }

/* stroke draw: dasharray is set per element, offset animates to 0 */
.mp-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.mp-live .mp-draw { animation: mpDraw 1.5s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes mpDraw { to { stroke-dashoffset: 0; } }

/* pulse travelling along a path. Without offset-path support the dot has
   no cx/cy and would blink in the corner of the viewBox, so it is dropped
   entirely rather than left to sit somewhere meaningless. */
@supports not (offset-path: path('M 0 0 L 1 1')) {
	.mp-pulse { display: none; }
}
.mp-pulse { opacity: 0; }
.mp-live .mp-pulse { animation: mpPulse 2.6s linear infinite; }
@keyframes mpPulse {
	0%   { opacity: 0; offset-distance: 0%; }
	8%   { opacity: 1; }
	78%  { opacity: 1; }
	100% { opacity: 0; offset-distance: 100%; }
}

/* bar that grows to its --w */
.mp-bar { width: 0; transition: none; }
.mp-live .mp-grow { animation: mpGrow 1.25s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes mpGrow { to { width: var(--w); } }

.mp-fade { opacity: 0; }
.mp-live .mp-fade { animation: mpFade 0.7s ease forwards; }
@keyframes mpFade { to { opacity: 1; } }

.mp-blink { animation: none; }
.mp-live .mp-blink { animation: mpBlink 2.4s ease-in-out infinite; }
@keyframes mpBlink { 0%, 100% { opacity: 1; } 46%, 54% { opacity: 0.18; } }

.mp-drip { opacity: 0; }
.mp-live .mp-drip { animation: mpDrip 2.8s ease-in infinite; }
@keyframes mpDrip {
	0%   { opacity: 0; transform: translateY(0); }
	12%  { opacity: 0.95; }
	72%  { opacity: 0.95; }
	100% { opacity: 0; transform: translateY(38px); }
}

/* the cost of the drip, falling away underneath it */
.mp-money {
	font-family: 'Inter Tight', sans-serif; font-weight: 900;
	font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
	fill: #f87171; opacity: 0;
}
.mp-live .mp-money { animation: mpMoney 2.8s ease-in infinite; }
@keyframes mpMoney {
	0%   { opacity: 0; transform: translateY(-4px); }
	14%  { opacity: 0.92; }
	66%  { opacity: 0.92; }
	100% { opacity: 0; transform: translateY(42px); }
}

.mp-orbit { transform-box: fill-box; transform-origin: center; }
.mp-live .mp-orbit { animation: mpSpin 26s linear infinite; }
@keyframes mpSpin { to { transform: rotate(360deg); } }

.mp-breathe { transform-box: fill-box; transform-origin: center; }
.mp-live .mp-breathe { animation: mpBreathe 3.4s ease-in-out infinite; }
@keyframes mpBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* a location that keeps falling over */
.mp-shake { transform-box: fill-box; transform-origin: center; }
.mp-live .mp-shake { animation: mpShake 5.6s ease-in-out infinite; }
@keyframes mpShake {
	0%, 58%, 78%, 100% { transform: translate(0, 0) rotate(0deg); }
	60% { transform: translate(-3.5px, 1.5px) rotate(-0.45deg); }
	63% { transform: translate(3.5px, -1.5px) rotate(0.45deg); }
	66% { transform: translate(-2.5px, -1px) rotate(-0.3deg); }
	69% { transform: translate(2.5px, 1px) rotate(0.3deg); }
	73% { transform: translate(-1.5px, 0) rotate(-0.15deg); }
}

/* status toast that pops in, hangs, then clears */
.mp-pop { opacity: 0; transform-box: fill-box; transform-origin: center; }
.mp-live .mp-pop { animation: mpPop 5.6s ease-in-out infinite; }
@keyframes mpPop {
	0%, 100% { opacity: 0; transform: scale(0.82); }
	5%       { opacity: 1; transform: scale(1.07); }
	10%      { opacity: 1; transform: scale(1); }
	42%      { opacity: 1; transform: scale(1); }
	50%      { opacity: 0; transform: scale(0.9); }
}

.mp-flicker { transform-box: fill-box; transform-origin: bottom center; }
.mp-live .mp-flicker { animation: mpFlicker 1.15s ease-in-out infinite; }
@keyframes mpFlicker {
	0%, 100% { transform: scale(1, 1);       opacity: 0.94; }
	28%      { transform: scale(0.93, 1.16); opacity: 1; }
	54%      { transform: scale(1.07, 0.9);  opacity: 0.8; }
	79%      { transform: scale(0.97, 1.09); opacity: 1; }
}

.mp-sweep { opacity: 0; }
.mp-live .mp-sweep { animation: mpSweep 4.2s ease-in-out infinite; }
@keyframes mpSweep {
	0%   { opacity: 0; transform: translateX(-40px); }
	20%  { opacity: 0.7; }
	80%  { opacity: 0.7; }
	100% { opacity: 0; transform: translateX(400px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   THE SELF CHECK
   Tickable statements with a live verdict underneath. This is the device
   that makes a visitor place themselves, so it is the same interaction on
   the hub page and on every stage page.
   ═══════════════════════════════════════════════════════════════════════ */
.sg-check { max-width: 1020px; margin: 0 auto; }
.sg-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 800px) { .sg-check-grid { grid-template-columns: 1fr; } }

.sg-tick {
	display: flex; align-items: flex-start; gap: 13px; width: 100%;
	text-align: left; cursor: pointer; font-family: inherit;
	background: #fff; border: 1px solid rgba(0,0,0,0.08);
	border-radius: 16px; padding: 17px 19px;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.2s;
	box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.sg-tick:hover { border-color: rgba(105,56,239,0.3); transform: translateY(-1px); box-shadow: 0 10px 30px -14px rgba(105,56,239,0.4); }
.sg-tick:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.sg-tick-box {
	flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px;
	border: 1.5px solid rgba(0,0,0,0.16); background: #fff;
	display: grid; place-items: center; margin-top: 1px;
	transition: background 0.2s, border-color 0.2s;
}
.sg-tick-box svg { opacity: 0; transform: scale(0.6); transition: opacity 0.18s, transform 0.18s; }
.sg-tick-txt { font-size: 0.98rem; font-weight: 500; line-height: 1.55; color: #3c3846; letter-spacing: -0.008em; }
.sg-tick.is-on {
	border-color: rgba(105,56,239,0.44);
	background: linear-gradient(180deg, rgba(105,56,239,0.06) 0%, rgba(105,56,239,0) 60%), #fff;
	box-shadow: 0 12px 34px -18px rgba(105,56,239,0.5);
}
.sg-tick.is-on .sg-tick-box { background: var(--purple); border-color: var(--purple); }
.sg-tick.is-on .sg-tick-box svg { opacity: 1; transform: scale(1); }
.sg-tick.is-on .sg-tick-txt { color: #16121f; font-weight: 600; }

/* verdict panel */
.sg-verdict {
	margin-top: 22px; border-radius: 26px; overflow: hidden;
	border: 1px solid rgba(105,56,239,0.16);
	background: linear-gradient(180deg, rgba(105,56,239,0.05), rgba(105,56,239,0.02));
}
.sg-verdict-top {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px;
	align-items: center; padding: 30px 34px;
}
.sg-verdict-score { text-align: center; min-width: 132px; }
.sg-verdict-score b {
	display: block; font-size: 4.2rem; font-weight: 900; line-height: 1;
	letter-spacing: -0.05em; white-space: nowrap;
	background: linear-gradient(135deg, #6938ef 0%, #9c6bff 100%);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
	font-variant-numeric: tabular-nums;
}
.sg-verdict-score > span {
	display: block; margin-top: 8px; font-size: 0.64rem; font-weight: 800;
	letter-spacing: 0.12em; text-transform: uppercase; color: #8f8aa4;
	white-space: nowrap;
}
.sg-verdict-copy h3 {
	font-size: clamp(1.24rem, 2.2vw, 1.72rem); font-weight: 800;
	letter-spacing: -0.026em; line-height: 1.24; color: #111; margin-bottom: 9px;
}
.sg-verdict-copy p { font-size: 1rem; color: #56515f; line-height: 1.68; }
.sg-verdict-foot {
	display: flex; align-items: center; justify-content: space-between;
	gap: 18px; flex-wrap: wrap;
	padding: 18px 34px; border-top: 1px solid rgba(105,56,239,0.14);
	background: rgba(255,255,255,0.5);
}
/* the foot is hidden until something is ticked. An author display value
   beats the UA sheet rule for [hidden], so it has to be restated here or
   the panel shows on load with an empty verdict. */
.sg-verdict-foot[hidden] { display: none; }
.sg-verdict-foot .hp-ctas { justify-content: flex-start; }
.sg-verdict-foot .btn-dark { font-size: 0.92rem; padding: 12px 24px; }
@media (max-width: 700px) {
	.sg-verdict-top { grid-template-columns: 1fr; gap: 16px; padding: 26px 22px; text-align: center; }
	.sg-verdict-foot { padding: 18px 22px; justify-content: center; }
	.sg-verdict-foot .hp-ctas { justify-content: center; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   GAUGE
   Where you are now against where the top tier of your stage sits.
   Red and green here are the only red and green on the page.
   ═══════════════════════════════════════════════════════════════════════ */
.sg-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1060px; margin: 0 auto; }
@media (max-width: 860px) { .sg-gauges { grid-template-columns: 1fr; } }
.sg-gauge {
	background: rgba(105,56,239,0.028);
	border: 1px solid rgba(105,56,239,0.12);
	border-radius: 20px; padding: 22px 24px 20px;
	transition: border-color 0.25s, box-shadow 0.25s;
}
.sg-gauge:hover { border-color: rgba(105,56,239,0.26); box-shadow: 0 14px 40px -22px rgba(105,56,239,0.45); }
.sg-gauge-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sg-gauge-hd b { font-size: 1rem; font-weight: 800; color: #111; letter-spacing: -0.018em; }
.sg-gauge-hd > span {
	font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em;
	text-transform: uppercase; color: #9a95ad; white-space: nowrap;
}
.sg-mrow { display: grid; grid-template-columns: 128px minmax(0, 1fr) 78px; gap: 12px; align-items: center; margin-bottom: 10px; }
.sg-mrow:last-of-type { margin-bottom: 0; }
.sg-mlbl { font-size: 0.82rem; color: #65616f; font-weight: 500; }
.sg-track { height: 9px; border-radius: 6px; background: rgba(17,17,17,0.06); overflow: hidden; }
.sg-track i { display: block; height: 100%; width: 0; border-radius: 6px; transition: width 1.1s cubic-bezier(0.22,1,0.36,1) 0.15s; }
.sg-track i.is-bad  { background: var(--bad-bar); }
.sg-track i.is-good { background: var(--good-bar); }
.rv-in .sg-track i, .sg-gauge.rv-in .sg-track i { width: var(--w); }
.sg-mval { font-size: 0.9rem; font-weight: 900; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.sg-mval.bad { color: var(--bad); }
.sg-mval.good { color: var(--good); }
.sg-gauge-note {
	margin-top: 15px; padding-top: 13px; border-top: 1px dashed rgba(105,56,239,0.18);
	font-size: 0.87rem; color: #6b6675; line-height: 1.6;
}
.sg-gauge-note strong { color: #26212f; font-weight: 700; }

@media (max-width: 480px) {
	/* label and value on one row, bar full width underneath */
	.sg-mrow {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "lbl val" "bar bar";
		row-gap: 6px; column-gap: 10px; margin-bottom: 14px;
	}
	.sg-mlbl  { grid-area: lbl; }
	.sg-mval  { grid-area: val; }
	.sg-track { grid-area: bar; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LEAK / LIFT LISTS
   The paired "what it costs you" and "what the top tier does" columns.
   Tinted background carries the colour identity, not a coloured border.
   ═══════════════════════════════════════════════════════════════════════ */
.sg-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1060px; margin: 0 auto; }
@media (max-width: 860px) { .sg-split { grid-template-columns: 1fr; } }
.sg-panel { border-radius: 22px; padding: 26px 28px; border: 1px solid rgba(0,0,0,0.07); background: #fff; }
.sg-panel.is-leak { background: var(--bad-tint); border-color: var(--bad-line); }
.sg-panel.is-lift { background: var(--good-tint); border-color: var(--good-line); }
.sg-panel-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sg-panel-hd i {
	width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0;
}
.sg-panel.is-leak .sg-panel-hd i { background: rgba(220,38,38,0.12); color: var(--bad); }
.sg-panel.is-lift .sg-panel-hd i { background: rgba(22,163,74,0.13); color: var(--good); }
.sg-panel-hd b { font-size: 1.14rem; font-weight: 800; color: #111; letter-spacing: -0.024em; }
.sg-panel > p { font-size: 0.92rem; color: #6b6675; line-height: 1.62; margin-bottom: 18px; }
.sg-panel ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
/* Hanging indent rather than a grid. These items are a bold lead-in
   followed by loose text, and a grid would put the trailing text run in
   its own anonymous cell, breaking it one word per line. */
.sg-panel li {
	display: block; position: relative; padding-left: 27px;
	font-size: 0.95rem; line-height: 1.58; color: #3c3846;
}
.sg-panel li svg { position: absolute; left: 0; top: 4px; }
.sg-panel.is-leak li svg { color: var(--bad); }
.sg-panel.is-lift li svg { color: var(--good); }
.sg-panel li b { font-weight: 700; color: #16121f; }

/* ═══════════════════════════════════════════════════════════════════════
   TIMELINE — what Perseus does at this stage
   ═══════════════════════════════════════════════════════════════════════ */
.sg-steps { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.sg-step {
	display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 24px;
	padding: 26px 0; position: relative;
	border-bottom: 1px solid rgba(0,0,0,0.06);
}
.sg-step:last-child { border-bottom: none; }
.sg-step-num {
	position: relative;
	font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em;
	color: var(--purple); background: rgba(105,56,239,0.07);
	border: 1px solid rgba(105,56,239,0.16);
	border-radius: 12px; padding: 11px 0; text-align: center;
	height: fit-content;
	transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.sg-step:hover .sg-step-num { background: var(--purple); color: #fff; border-color: var(--purple); }
.sg-step h3 { font-size: clamp(1.2rem, 2vw, 1.56rem); font-weight: 800; letter-spacing: -0.026em; color: #111; margin-bottom: 10px; line-height: 1.24; }
.sg-step p { font-size: 1.01rem; color: #5d5868; line-height: 1.72; max-width: 68ch; }
.sg-step-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.sg-tag {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 0.78rem; font-weight: 600; color: #3e3e4a;
	background: rgba(105,56,239,0.05); border: 1px solid rgba(105,56,239,0.13);
	border-radius: 100px; padding: 6px 13px 6px 10px;
}
.sg-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--purple); opacity: 0.65; flex-shrink: 0; }
@media (max-width: 620px) {
	.sg-step { grid-template-columns: 1fr; gap: 14px; }
	.sg-step-num { width: 78px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK SLAB — the top tier band
   Purple is a masked layer so it never seams against the white page.
   ═══════════════════════════════════════════════════════════════════════ */
.sg-slab { position: relative; overflow: hidden; --fade: 230px; padding: var(--fade) 0; background: transparent; }
.sg-slab-fx {
	position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
	background:
		radial-gradient(ellipse 58% 30% at 14% 24%, rgba(139,106,255,0.22) 0%, transparent 64%),
		radial-gradient(ellipse 54% 28% at 90% 58%, rgba(105,56,239,0.24) 0%, transparent 62%),
		linear-gradient(180deg,
			#cbbaf6 0,
			#a98ce9 calc(var(--fade) * 0.30),
			#7d59ce calc(var(--fade) * 0.60),
			#4d2ca0 calc(var(--fade) * 0.92),
			#2c1660 calc(var(--fade) * 1.5),
			#1f1044 calc(var(--fade) * 2.4),
			#180c37 50%,
			#1f1044 calc(100% - var(--fade) * 2.4),
			#2c1660 calc(100% - var(--fade) * 1.5),
			#4d2ca0 calc(100% - var(--fade) * 0.92),
			#7d59ce calc(100% - var(--fade) * 0.60),
			#a98ce9 calc(100% - var(--fade) * 0.30),
			#cbbaf6 100%);
	-webkit-mask-image: linear-gradient(180deg,
		transparent 0, rgba(0,0,0,0.16) calc(var(--fade) * 0.24),
		rgba(0,0,0,0.56) calc(var(--fade) * 0.52), rgba(0,0,0,0.87) calc(var(--fade) * 0.76),
		#000 var(--fade), #000 calc(100% - var(--fade)),
		rgba(0,0,0,0.87) calc(100% - var(--fade) * 0.76), rgba(0,0,0,0.56) calc(100% - var(--fade) * 0.52),
		rgba(0,0,0,0.16) calc(100% - var(--fade) * 0.24), transparent 100%);
	        mask-image: linear-gradient(180deg,
		transparent 0, rgba(0,0,0,0.16) calc(var(--fade) * 0.24),
		rgba(0,0,0,0.56) calc(var(--fade) * 0.52), rgba(0,0,0,0.87) calc(var(--fade) * 0.76),
		#000 var(--fade), #000 calc(100% - var(--fade)),
		rgba(0,0,0,0.87) calc(100% - var(--fade) * 0.76), rgba(0,0,0,0.56) calc(100% - var(--fade) * 0.52),
		rgba(0,0,0,0.16) calc(100% - var(--fade) * 0.24), transparent 100%);
}
.sg-slab-fx .sgrid {
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(183,158,255,0.075) 1px, transparent 1px),
		linear-gradient(90deg, rgba(183,158,255,0.075) 1px, transparent 1px);
	background-size: 74px 74px;
	-webkit-mask-image: radial-gradient(ellipse 92% 60% at 50% 30%, #000 0%, transparent 78%);
	        mask-image: radial-gradient(ellipse 92% 60% at 50% 30%, #000 0%, transparent 78%);
}
.sg-slab-sec { position: relative; z-index: 1; padding: 0 40px; max-width: 1360px; margin: 0 auto; }
.sg-slab .hp-section-hdr h2 { color: #ffffff; }
.sg-slab .hp-section-hdr p { color: rgba(216,204,250,0.76); }
.sg-slab .hp-section-hdr p strong { color: #ffffff; }
.sg-slab .hl-purple {
	background: linear-gradient(120deg, #efe9ff 0%, #bda4ff 46%, #dccfff 100%);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sg-slab .sec-badge { background: rgba(255,255,255,0.06); border-color: rgba(183,158,255,0.28); }
.sg-slab .sec-badge-pill { background: #7c4dff; }
.sg-slab .sec-badge-text { color: rgba(224,215,252,0.86); }

/* benchmark rows inside the slab */
.sg-bench { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 860px) { .sg-bench { grid-template-columns: 1fr; } }
.sg-bench-row {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
	padding: 17px 22px; border-radius: 16px;
	background: rgba(255,255,255,0.055);
	border: 1px solid rgba(183,158,255,0.16);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	transform: translateZ(0);
	transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.sg-bench-row:hover { background: rgba(255,255,255,0.10); border-color: rgba(183,158,255,0.34); transform: translateY(-2px); }
@supports not (backdrop-filter: blur(1px)) { .sg-bench-row { background: rgba(38,20,74,0.72); } }
.sg-bench-row > span { font-size: 0.96rem; color: rgba(226,216,252,0.88); line-height: 1.5; word-spacing: 0.16em; }
.sg-bench-row > b {
	font-size: 1.02rem; font-weight: 900; color: #ffffff; white-space: nowrap;
	font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.sg-bench-row > b.is-good { color: #6ee79b; }

.sg-slab-note {
	max-width: 1060px; margin: 26px auto 0;
	display: flex; align-items: flex-start; gap: 15px;
	padding: 22px 26px; border-radius: 18px;
	background: rgba(255,255,255,0.05); border: 1px solid rgba(183,158,255,0.18);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform: translateZ(0);
}
.sg-slab-note svg { flex-shrink: 0; margin-top: 2px; color: #c4b5fd; }
.sg-slab-note p { font-size: 0.97rem; color: rgba(216,204,250,0.82); line-height: 1.7; }
.sg-slab-note strong { color: #ffffff; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════
   GRADUATION — what moving up actually requires
   ═══════════════════════════════════════════════════════════════════════ */
.sg-grad { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .sg-grad { grid-template-columns: 1fr; } }
.sg-grad-card {
	background: #fff; border: 1px solid rgba(0,0,0,0.07); border-radius: 22px;
	padding: 28px 26px; box-shadow: var(--card-shadow);
	transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.sg-grad-card:hover { border-color: rgba(105,56,239,0.26); box-shadow: 0 18px 50px -26px rgba(105,56,239,0.45); transform: translateY(-3px); }
.sg-grad-card > i {
	display: grid; place-items: center; width: 42px; height: 42px;
	border-radius: 13px; background: rgba(105,56,239,0.07);
	border: 1px solid rgba(105,56,239,0.15); color: var(--purple); margin-bottom: 16px;
}
.sg-grad-card h3 { font-size: 1.22rem; font-weight: 800; letter-spacing: -0.024em; color: #111; margin-bottom: 10px; line-height: 1.26; }
.sg-grad-card p { font-size: 0.97rem; color: #5d5868; line-height: 1.7; }

/* ═══════════════════════════════════════════════════════════════════════
   STAGE RAIL — where this stage sits in the four
   Appears on every stage page so a visitor always knows the shape of the
   whole path and can step forward or back without using the nav.
   ═══════════════════════════════════════════════════════════════════════ */
.sg-rail { max-width: 1100px; margin: 0 auto; }
.sg-rail-track {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
	position: relative; margin-bottom: 26px;
}
.sg-rail-seg {
	display: block; text-decoration: none; position: relative;
	padding: 20px 18px 18px; border-radius: 18px;
	border: 1px solid rgba(0,0,0,0.07); background: #fff;
	transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s, background 0.25s;
}
.sg-rail-seg:hover { border-color: rgba(105,56,239,0.3); transform: translateY(-3px); box-shadow: 0 16px 42px -22px rgba(105,56,239,0.45); }
.sg-rail-seg em {
	display: block; font-style: normal;
	font-size: 0.62rem; font-weight: 800; letter-spacing: 0.13em;
	text-transform: uppercase; color: #9a95ad; margin-bottom: 7px;
}
.sg-rail-seg b { display: block; font-size: 1.04rem; font-weight: 800; letter-spacing: -0.022em; color: #111; line-height: 1.24; margin-bottom: 7px; }
.sg-rail-seg span { display: block; font-size: 0.84rem; color: #6b6675; line-height: 1.5; }
.sg-rail-seg.is-here {
	background: linear-gradient(180deg, rgba(105,56,239,0.07) 0%, rgba(105,56,239,0) 62%), #fff;
	border-color: rgba(105,56,239,0.45);
	box-shadow: 0 18px 46px -24px rgba(105,56,239,0.5);
}
.sg-rail-seg.is-here em { color: var(--purple); }
.sg-rail-seg.is-done { opacity: 0.72; }
@media (max-width: 900px) { .sg-rail-track { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sg-rail-track { grid-template-columns: 1fr; } }

.sg-rail-move { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sg-rail-move a {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 0.94rem; font-weight: 600; color: #43434d; text-decoration: none;
	padding: 12px 20px; border-radius: 100px;
	border: 1px solid rgba(0,0,0,0.1); background: #fff;
	transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
.sg-rail-move a:hover { border-color: var(--purple); color: var(--purple); transform: translateY(-1px); }
.sg-rail-move a svg { flex-shrink: 0; opacity: 0.5; transition: opacity 0.2s; }
.sg-rail-move a:hover svg { opacity: 1; }
.sg-rail-move .is-blank { visibility: hidden; }

/* ═══════════════════════════════════════════════════════════════════════
   HUB PAGE ONLY — the four stage dossiers
   ═══════════════════════════════════════════════════════════════════════ */
.sg-list { display: flex; flex-direction: column; gap: 18px; max-width: 1160px; margin: 0 auto; }
.sg-card {
	position: relative; background: #fff;
	border: 1px solid rgba(0,0,0,0.07); border-radius: 28px;
	padding: 32px 36px 26px; box-shadow: var(--card-shadow);
	transition: border-color 0.25s, box-shadow 0.25s;
}
.sg-card:hover { border-color: rgba(105,56,239,0.26); box-shadow: 0 18px 54px -26px rgba(105,56,239,0.4); }
.sg-card-head {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 22px; align-items: start;
	padding-bottom: 22px; margin-bottom: 24px;
	border-bottom: 1px solid rgba(0,0,0,0.06);
}
.sg-card-num {
	font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em;
	color: var(--purple); background: rgba(105,56,239,0.07);
	border: 1px solid rgba(105,56,239,0.16);
	border-radius: 12px; padding: 10px 12px;
}
.sg-card-cat {
	display: block; font-size: 0.62rem; font-weight: 800;
	letter-spacing: 0.13em; text-transform: uppercase; color: #8f8aa4; margin-bottom: 8px;
}
.sg-card-head h3 {
	font-size: clamp(1.5rem, 2.5vw, 2.15rem); font-weight: 900;
	letter-spacing: -0.032em; line-height: 1.14; color: #111;
}
.sg-card-head > div > p { font-size: 1.02rem; color: #5d5868; line-height: 1.68; margin-top: 12px; max-width: 62ch; }
.sg-card-chip { text-align: right; white-space: nowrap; }
.sg-card-chip > span {
	display: block; font-size: 0.58rem; font-weight: 800;
	letter-spacing: 0.1em; text-transform: uppercase; color: #9a95ad; margin-bottom: 5px;
}
.sg-card-chip b {
	display: block; font-size: 1.3rem; font-weight: 900; letter-spacing: -0.03em; color: #111;
	font-variant-numeric: tabular-nums;
}
.sg-card-chip em { display: block; font-style: normal; font-size: 0.78rem; color: #7d7789; margin-top: 4px; }

.sg-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px; }
@media (max-width: 940px) { .sg-card-body { grid-template-columns: 1fr; } }
.sg-lbl {
	display: block; font-size: 0.62rem; font-weight: 800;
	letter-spacing: 0.13em; text-transform: uppercase; color: #8f8aa4; margin-bottom: 11px;
}
.sg-said { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.sg-said q {
	display: block; quotes: none;
	font-size: 1.01rem; font-style: italic; font-weight: 500; color: #37323f;
	line-height: 1.55; padding: 12px 16px; border-radius: 12px;
	background: rgba(105,56,239,0.045); border: 1px solid rgba(105,56,239,0.22);
}
.sg-said q::before { content: '\201C'; }
.sg-said q::after  { content: '\201D'; }

.sg-card-foot {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	padding-top: 20px; margin-top: 24px; border-top: 1px solid rgba(0,0,0,0.06);
}
.sg-card-go {
	display: inline-flex; align-items: center; gap: 9px;
	background: var(--purple); color: #fff; font-size: 0.92rem; font-weight: 700;
	padding: 12px 24px; border-radius: 100px; text-decoration: none;
	transition: background 0.18s; letter-spacing: -0.01em;
}
.sg-card-go:hover { background: var(--purple-hover); }
.sg-card-go svg { transition: transform 0.18s; }
.sg-card-go:hover svg { transform: translateX(3px); }
.sg-card-meta { font-size: 0.86rem; color: #7d7789; }
.sg-card-meta strong { color: #16121f; font-weight: 700; }

@media (max-width: 780px) {
	.sg-card { padding: 26px 22px 22px; }
	.sg-card-head { grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
	.sg-card-chip { grid-column: 1 / -1; text-align: left; margin-top: 4px; }
}

/* the seven-day test strip */
.sg-test { max-width: 1060px; margin: 0 auto; }
.sg-test-q {
	text-align: center; margin-bottom: 26px;
	font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800;
	letter-spacing: -0.028em; line-height: 1.3; color: #111;
}
.sg-test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 820px) { .sg-test-grid { grid-template-columns: 1fr; } }
.sg-test-card {
	display: block; text-decoration: none; text-align: center;
	padding: 30px 24px; border-radius: 22px;
	background: #fff; border: 1px solid rgba(0,0,0,0.07);
	box-shadow: var(--card-shadow);
	transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.sg-test-card:hover { border-color: rgba(105,56,239,0.32); box-shadow: 0 18px 48px -24px rgba(105,56,239,0.45); transform: translateY(-3px); }
.sg-test-card q {
	display: block; quotes: none; font-size: 1.24rem; font-weight: 800;
	letter-spacing: -0.026em; color: #111; margin-bottom: 12px;
}
.sg-test-card q::before { content: '\201C'; }
.sg-test-card q::after  { content: '\201D'; }
.sg-test-card p { font-size: 0.94rem; color: #6b6675; line-height: 1.6; margin-bottom: 16px; }
.sg-test-card span {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 0.82rem; font-weight: 700; color: var(--purple);
}
.sg-test-card span svg { transition: transform 0.2s; }
.sg-test-card:hover span svg { transform: translateX(3px); }

/* ═══════════════════════════════════════════════════════════════════════
   FAQ, BOOK, FOOTER
   ═══════════════════════════════════════════════════════════════════════ */
.hp-faq { max-width: 820px; margin: 0 auto; }
.hp-faq-item { border-bottom: 1px solid rgba(0,0,0,0.08); }
.hp-faq-item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 20px 4px; cursor: pointer; list-style: none;
	font-size: 1.1rem; font-weight: 700; color: #111; letter-spacing: -0.015em;
}
.hp-faq-item summary::-webkit-details-marker { display: none; }
.hp-faq-item summary svg { flex-shrink: 0; stroke: #bbb; transition: transform 0.22s, stroke 0.22s; }
.hp-faq-item[open] summary svg { transform: rotate(180deg); stroke: var(--purple); }
.hp-faq-item[open] summary { color: var(--purple); }
.hp-faq-answer { padding: 0 4px 24px; font-size: 0.99rem; color: #52525c; line-height: 1.75; }
.hp-faq-answer strong { color: #111; font-weight: 700; }

.hp-book { padding: 20px 40px 90px; max-width: 1360px; margin: 0 auto; }
.hp-book-card {
	background: rgba(105,56,239,0.04);
	border: 1px solid rgba(105,56,239,0.12);
	border-radius: 32px; padding: 64px 40px 48px; text-align: center;
}
.hp-book-card h2 {
	font-size: clamp(2.9rem, 6.2vw, 5.4rem);
	font-weight: 900; letter-spacing: -0.016em; word-spacing: 0.04em; line-height: 1.09;
	color: #111; margin-bottom: 14px;
}
.hp-book-card > p { font-size: 1.08rem; color: #52525c; max-width: 640px; margin: 0 auto 40px; line-height: 1.7; }
.hp-book-note { margin-top: 22px; font-size: 0.86rem; color: #8f8aa4; }

.hp-footer {
	border-top: 1px solid rgba(105,56,239,0.10);
	background: linear-gradient(180deg, #ffffff 0%, #f8f5ff 26%, #ece4fd 58%, #dacdfa 100%);
}
.hp-footer-grid {
	max-width: 1360px; margin: 0 auto; padding: 52px 40px 32px;
	display: grid; grid-template-columns: 1.2fr 2fr 1fr 1.3fr; gap: 48px;
}
.hp-footer-brand-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; margin-bottom: 12px; }
.hp-footer-brand-logo img { height: 26px; width: 26px; }
.hp-footer-brand-logo span { font-size: 0.95rem; font-weight: 800; color: #111; letter-spacing: -0.02em; }
.hp-footer-tagline { font-size: 0.83rem; color: #65656f; line-height: 1.65; max-width: 260px; }
.hp-footer-col h4 {
	font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em;
	text-transform: uppercase; color: #6a6a74; margin-bottom: 14px;
}
.hp-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.hp-footer-col ul li { white-space: nowrap; }
.hp-footer-col ul li a { font-size: 0.85rem; color: #52525c; text-decoration: none; transition: color 0.14s; }
.hp-footer-col ul li a:hover { color: var(--purple); }
.footer-links-cols { display: flex; gap: 40px; }
.hp-footer-contact-list { display: flex; flex-direction: column; gap: 10px; }
.hp-footer-cr { display: flex; align-items: center; gap: 8px; }
.hp-footer-cr svg { opacity: 0.35; flex-shrink: 0; }
.hp-footer-cr a, .hp-footer-cr span { font-size: 0.84rem; color: #52525c; text-decoration: none; transition: color 0.14s; }
.hp-footer-cr a:hover { color: var(--purple); }
.hp-footer-bottom {
	max-width: 1360px; margin: 0 auto; padding: 20px 40px;
	border-top: 1px solid rgba(105,56,239,0.16);
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 8px;
}
.hp-footer-bottom p { font-size: 0.76rem; color: #4b4459; }
.hp-footer-bottom a { color: #4b4459; text-decoration: none; transition: color 0.14s; }
.hp-footer-bottom a:hover { color: var(--purple); }


/* Touch targets, keyed on the input device rather than the screen width.
   An iPad Pro is 834px wide and every one of these links is still hit with
   a fingertip, so a width breakpoint misses the devices that need it. */
@media (pointer: coarse) {
.hp-footer-bottom a { display: inline-block; padding: 11px 0; }
/* block, not inline-block: a link reading "FAQ" is only 24px wide as inline
   content, so the target has to span the column to be hittable */
.hp-footer-links a, .hp-footer-col a { display: block; padding: 10px 0; }
.hp-nav-logo, .hp-footer-logo { padding: 8px 0; }
.hp-nav { padding-top: 10px; padding-bottom: 10px; }
/* horizontal padding too: a nav link reading "Blog" is 25px of word and
   nothing else to aim at. The row pays for it out of its own gap and a
   slightly smaller label, so the bar still fits a 1024px tablet. */
.hp-nav-links { gap: 10px; }
.hp-nav-links > li > a { display: inline-block; padding: 13px 9px; font-size: 0.8rem; }
.hp-dd a { padding-top: 11px; padding-bottom: 11px; }
.hp-mobile-nav a { padding-top: 12px; padding-bottom: 12px; }
.hp-toggle { padding: 10px; min-width: 44px; min-height: 44px; }
}

/* Touch targets. On a phone these legal links are a 15px tall line of text,
   well under the 44px minimum. Padding alone left them at 37px, so the box
   is pinned to 44 and the text centred inside it. */
@media (max-width: 768px) {
	.hp-footer-bottom a,
	.hp-footer-links a, .hp-footer-col a {
		display: inline-flex; align-items: center; min-height: 44px;
	}
	.hp-nav-logo, .hp-footer-logo { padding: 8px 0; }
	.hp-mobile-nav a { padding-top: 12px; padding-bottom: 12px; }
	.hp-toggle { padding: 10px; min-width: 44px; min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOTION PANELS ON SMALL SCREENS
   Each scene is a 1100 to 1240 unit wide dashboard. Scaled into a phone
   its type lands between 2px and 6px, which is unreadable at any size, and
   no amount of scrolling or zooming fixes a diagram that wide. So below
   860px the scene is swapped for the same data as a vertical stack built
   from real elements, which reflows to any width from 280px up.
   ═══════════════════════════════════════════════════════════════════════ */
.sg-motion-m { display: none; }
@media (max-width: 1100px) {
	.sg-motion > svg { display: none; }
	/* the column is capped so that on a landscape tablet the stack still reads
	   as a deliberate layout rather than four very wide stretched rows */
	.sg-motion-m { display: block; position: relative; z-index: 1; padding: 20px 18px 0; max-width: 560px; margin: 0 auto; }
	/* the caption is pulled up under the scene by a negative margin, which
	   would run it straight into the stack, so it gets its own separation */
	.sg-motion-m + .sg-motion-cap {
		margin-top: 22px; padding-top: 20px;
		border-top: 1px solid rgba(183,158,255,0.16);
	}
}
@media (max-width: 400px) {
	.sg-motion-m { padding: 18px 14px 0; }
}

.sgm-rail {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	font-size: 0.64rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase;
	color: rgba(196,181,253,0.62);
	padding-bottom: 11px; margin-bottom: 15px;
	border-bottom: 1px solid rgba(183,158,255,0.22);
}
.sgm-rail > span:last-child { text-align: right; color: rgba(216,204,250,0.82); }
.sgm-list { display: flex; flex-direction: column; gap: 10px; }

.sgm-card {
	padding: 14px 15px; border-radius: 15px;
	background: rgba(255,255,255,0.055);
	border: 1px solid rgba(183,158,255,0.18);
}
.sgm-card.is-good { background: rgba(74,222,128,0.07); border-color: rgba(74,222,128,0.34); }
.sgm-card.is-warn { background: rgba(245,158,11,0.07); border-color: rgba(245,158,11,0.38); }
.sgm-card.is-bad  { background: rgba(220,38,38,0.13); border-color: rgba(248,113,113,0.50); }

.sgm-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sgm-top > b { font-size: 1rem; font-weight: 800; color: #ffffff; letter-spacing: -0.015em; }

.sgm-chip {
	flex-shrink: 0; white-space: nowrap;
	font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
	padding: 5px 10px; border-radius: 100px;
	background: rgba(183,158,255,0.16); border: 1px solid rgba(183,158,255,0.3);
	color: rgba(216,204,250,0.9);
}
.sgm-chip.is-good { background: rgba(74,222,128,0.16); border-color: rgba(74,222,128,0.45); color: #86efac; }
.sgm-chip.is-warn { background: rgba(245,158,11,0.16); border-color: rgba(245,158,11,0.45); color: #fcd34d; }
.sgm-chip.is-bad  { background: rgba(220,38,38,0.24); border-color: rgba(248,113,113,0.55); color: #fca5a5; }

.sgm-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
/* on a folded phone two metric columns stop fitting side by side */
@media (max-width: 340px) {
	.sgm-pair { grid-template-columns: 1fr; gap: 12px; }
	.sgm-top { flex-wrap: wrap; }
}
.sgm-metric > b {
	display: block; font-size: 1.32rem; font-weight: 900; letter-spacing: -0.03em;
	color: #ffffff; font-variant-numeric: tabular-nums; line-height: 1.15;
}
.sgm-metric > span {
	display: block; margin-top: 4px;
	font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
	color: rgba(196,181,253,0.62);
}
.sgm-metric.is-good > b { color: #6ee79b; }
.sgm-metric.is-warn > b { color: #fcd34d; }
.sgm-metric.is-bad  > b { color: #f87171; }

.sgm-foot {
	margin-top: 12px;
	font-size: 0.63rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
	color: rgba(196,181,253,0.62);
}
.sgm-foot.is-good { color: rgba(134,239,172,0.80); }
.sgm-foot.is-warn { color: rgba(252,211,77,0.80); }
.sgm-foot.is-bad  { color: rgba(248,113,113,0.85); }

/* label on the left, number on the right */
.sgm-row {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 12px 14px; border-radius: 13px;
	background: rgba(255,255,255,0.05); border: 1px solid rgba(183,158,255,0.16);
}
.sgm-row > span { font-size: 0.86rem; color: rgba(226,216,252,0.88); line-height: 1.4; }
.sgm-row > b { flex-shrink: 0; font-size: 0.88rem; font-weight: 900; color: #ffffff; font-variant-numeric: tabular-nums; }
.sgm-row.is-good { background: rgba(74,222,128,0.07); border-color: rgba(74,222,128,0.30); }
.sgm-row.is-good > b { color: #6ee79b; }
.sgm-row.is-bad  { background: rgba(220,38,38,0.09); border-color: rgba(248,113,113,0.32); }
.sgm-row.is-bad  > b { color: #f87171; }
.sgm-row i {
	display: inline-block; margin-left: 8px; vertical-align: 1px; font-style: normal;
	font-size: 0.64rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
	padding: 3px 7px; border-radius: 100px;
}
.sgm-row.is-good i { background: rgba(74,222,128,0.18); color: #86efac; }
.sgm-row.is-bad  i { background: rgba(220,38,38,0.22); color: #fca5a5; }

/* proportion bars */
.sgm-bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.sgm-bar.has-key { grid-template-columns: 34px 1fr auto; }
.sgm-bar > em { font-style: normal; font-size: 0.78rem; font-weight: 700; color: rgba(224,215,252,0.72); }
.sgm-bar > i { display: block; height: 10px; border-radius: 6px; background: rgba(255,255,255,0.08); }
.sgm-bar > i > s { display: block; height: 100%; border-radius: 6px; text-decoration: none; background: #a78bfa; }
.sgm-bar > i > s.is-good { background: #4ade80; }
.sgm-bar > i > s.is-warn { background: #fcd34d; }
.sgm-bar > i > s.is-bad  { background: #f87171; }
.sgm-bar > u {
	text-decoration: none; min-width: 40px; text-align: right;
	font-size: 0.78rem; font-weight: 800; color: rgba(224,215,252,0.72);
	font-variant-numeric: tabular-nums;
}

/* wrapping pill lists */
.sgm-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sgm-tags > span {
	font-size: 0.78rem; font-weight: 600; color: rgba(226,216,252,0.86);
	padding: 8px 13px; border-radius: 100px;
	background: rgba(255,255,255,0.055); border: 1px solid rgba(183,158,255,0.20);
}
.sgm-errs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sgm-errs > span {
	font-size: 0.62rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
	padding: 5px 9px; border-radius: 100px;
	background: rgba(220,38,38,0.20); border: 1px solid rgba(248,113,113,0.50); color: #fca5a5;
}

/* the single node everything arrives at */
.sgm-orb {
	margin: 18px auto 0; width: 146px; height: 146px; border-radius: 50%;
	display: grid; place-content: center; text-align: center;
}
.sgm-orb > b { display: block; font-size: 1.3rem; font-weight: 900; color: #ffffff; letter-spacing: 0.01em; }
.sgm-orb > span {
	display: block; margin-top: 4px;
	font-size: 0.62rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase;
	color: rgba(255,255,255,0.84);
}
.sgm-orb.is-owner {
	background: radial-gradient(circle at 50% 36%, #f0abab 0%, #dc2626 55%, #991b1b 100%);
	box-shadow: 0 0 0 11px rgba(220,38,38,0.10), 0 0 0 22px rgba(220,38,38,0.055);
}
.sgm-orb.is-hub {
	background: radial-gradient(circle at 50% 36%, #c4b5fd 0%, #7c3aed 60%, #4c1d95 100%);
	box-shadow: 0 0 0 11px rgba(167,139,250,0.11), 0 0 0 22px rgba(167,139,250,0.06);
}

.sgm-fire { display: flex; justify-content: center; align-items: flex-end; gap: 12px; margin-top: 14px; }
/* the panel-wide `.sg-motion svg { width: 100% }` would blow these up, so the
   flames are pinned back to their own attribute size */
.sgm-fire svg { display: block; width: auto; flex-shrink: 0; }

.sgm-sum {
	margin-top: 18px; padding-top: 16px;
	border-top: 1px dashed rgba(220,38,38,0.32);
	text-align: center;
}
.sgm-sum > span {
	display: block;
	font-size: 0.64rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase;
	color: rgba(248,113,113,0.80);
}
.sgm-sum > b {
	display: block; margin-top: 9px;
	font-size: 1.18rem; font-weight: 900; letter-spacing: -0.025em; color: #f87171; line-height: 1.3;
}
.sgm-sum > em {
	display: block; margin-top: 8px; font-style: normal;
	font-size: 0.85rem; color: rgba(216,204,250,0.78); line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
	.hp-nav-links { display: none; }
	.hp-nav-ctas { display: flex; }
	.hp-nav-ctas .btn-nav-ghost { display: none; }
	.hp-nav-ctas .btn-nav-dark { font-size: 0.78rem; padding: 8px 15px; }
	.hp-toggle { display: grid; }
}
@media (max-width: 960px) {
	.hp-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
	.hp-nav, .hp-hero, .hp-section, .hp-book, .hp-footer-grid, .hp-footer-bottom, .sg-slab-sec {
		padding-left: max(20px, env(safe-area-inset-left));
		padding-right: max(20px, env(safe-area-inset-right));
	}
	.hp-hero h1 { font-size: clamp(2.3rem, 9.4vw, 3rem); }
	/* every section heading drops together so none of them outgrows another */
	.hp-section-hdr h2, .hp-book-card h2 { font-size: clamp(1.95rem, 8.6vw, 2.9rem); }
	.hp-section { padding-top: 76px; padding-bottom: 76px; }
	.hp-book-card { padding: 40px 20px 36px; }
	.hp-footer-grid { grid-template-columns: 1fr; }
	.footer-links-cols { gap: 26px; }
	.hp-section-hdr p { font-size: 1.02rem; }
	.sg-lede { font-size: 1.16rem; }
	.sg-slab { --fade: 150px; }
}

/* Touch devices at any width. A phone held sideways is 844px wide but
   still a thumb, so these key on the pointer as well as the viewport. */
@media (max-width: 1100px), (pointer: coarse) {
	.sec-badge-pill { font-size: 0.72rem; }
	.sec-badge-text { font-size: 0.78rem; }
	.sg-lbl, .sg-card-cat, .sg-rail-seg em { font-size: 0.7rem; }
	.sg-card-chip > span, .sg-gauge-hd > span, .sg-verdict-score span, .sg-motion-hd span { font-size: 0.7rem; }
	.scroll-cue > span { font-size: 0.72rem; }
	.hp-footer-col h4 { font-size: 0.74rem; }

	/* 44px minimum on anything a thumb has to hit */
	.sg-tick { min-height: 44px; }
	.hp-text-link { min-height: 44px; }
	.hp-faq-item summary { padding-top: 18px; padding-bottom: 18px; }
	.hp-nav-logo { padding: 7px; margin-left: -7px; }
	.hp-footer-brand-logo { padding: 9px 0; }
	.btn-nav-dark, .btn-nav-ghost { display: inline-flex; align-items: center; min-height: 44px; }
	.btn-dark, .btn-outline, .sg-card-go, .hp-mobile-cta {
		display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
	}
	.hp-footer-col ul { gap: 2px; }
	.hp-footer-col ul li a, .hp-footer-cr a { display: inline-flex; align-items: center; min-height: 44px; }
	/* the legal links sit outside .hp-footer-col, so they need naming too */
	.hp-footer-bottom a, .hp-footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 420px) {
	.hp-nav { gap: 12px; }
	.hp-nav-ctas .btn-nav-dark { font-size: 0.76rem; padding: 8px 14px; }
	.hp-mobile-nav a, .hp-mobile-acc-trigger { padding-left: 20px; padding-right: 20px; }
	.hp-mobile-nav .hp-mobile-cta { margin-left: 20px; margin-right: 20px; }
	.hp-mobile-acc-items { margin-left: 20px; margin-right: 20px; }
	.sg-card { padding: 22px 18px 18px; }
	.sg-panel { padding: 22px 20px; }
	.sg-gauge { padding: 20px 18px 18px; }
	.hp-ctas .btn-dark, .hp-ctas .btn-outline { width: 100%; justify-content: center; }
}

/* below this the wordmark plus both controls stop fitting on one row */
@media (max-width: 340px) {
	.hp-nav { padding-left: 14px; padding-right: 14px; gap: 8px; }
	.hp-nav-logo span { display: none; }
	.hp-nav-ctas .btn-nav-dark { font-size: 0.72rem; padding: 8px 12px; }
}

@media (max-width: 960px) and (orientation: landscape) {
	.hp-nav, .hp-hero, .hp-section, .hp-book, .hp-footer-grid, .hp-footer-bottom {
		padding-left: max(24px, env(safe-area-inset-left));
		padding-right: max(24px, env(safe-area-inset-right));
	}
}

@media (min-width: 1600px) {
	.hp-nav, .hp-hero, .hp-section, .hp-book, .hp-footer-grid, .hp-footer-bottom, .sg-slab-sec { max-width: 1520px; }
	.hp-section { padding-top: 128px; padding-bottom: 128px; }
	.hp-hero-sub { max-width: 800px; font-size: 1.46rem; }
	.hp-section-hdr p { max-width: 740px; font-size: 1.2rem; }
	.hp-hero-note { max-width: 780px; font-size: 0.94rem; }
	.sg-cols p { font-size: 1.08rem; }
	.sg-step p { font-size: 1.06rem; }
	.sg-tick-txt { font-size: 1.02rem; }
	.hp-faq-item summary { font-size: 1.18rem; }
	.hp-faq-answer { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
	.rv { opacity: 1 !important; transform: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
	.hc-orb, .scroll-cue > i { animation: none !important; }
	.sg-track i { transition: none !important; }
	.mp-draw { stroke-dashoffset: 0 !important; animation: none !important; }
	.mp-pulse, .mp-drip, .mp-sweep { display: none !important; }
	.mp-money { opacity: 0.9 !important; animation: none !important; transform: none !important; }
	.mp-fade { opacity: 1 !important; animation: none !important; }
	.mp-blink, .mp-orbit, .mp-breathe { animation: none !important; }
	.mp-shake, .mp-flicker { animation: none !important; transform: none !important; }
	.mp-pop { opacity: 1 !important; animation: none !important; transform: none !important; }
	.mp-live .mp-grow { animation: none !important; width: var(--w) !important; }
}

/* ── Sitewide nav corrections ──────────────────────────────────────
   1. Dropdown links live inside .hp-nav-links, so `.hp-dd a` ties with
      `.hp-nav-links a` on specificity and the winner came down to source
      order. Where the nav rule landed later it painted the menu near
      white on a white panel. Scoping to .hp-nav-links .hp-dd settles it.
   2. Book an Audit: the treatment from glass-cards.css, which only four
      pages loaded. Now identical on every page and in both nav states.
   3. One nav type scale at every width, on every page.
   4. Glassmorphism indicator on the current page's nav item. */
.hp-nav-links .hp-dd a,
.nav-lit .hp-nav-links .hp-dd a { color: #43434d; }
.hp-nav-links .hp-dd a:hover,
.nav-lit .hp-nav-links .hp-dd a:hover { color: #6938ef; background: rgba(105,56,239,0.05); }
.hp-nav-links .hp-dd .dd-num,
.nav-lit .hp-nav-links .hp-dd .dd-num { color: #6938ef; }

/* inline-flex, not the default inline: mobile adds min-height 44px for tap
   targets, and on a non-flex box that extra height all lands at the bottom
   and pushes the label off centre inside the pill. */
.hp-nav-ctas .btn-nav-dark,
.hp-nav-ctas .btn-nav-ghost {
	display: inline-flex; align-items: center; justify-content: center;
}
.hp-nav-ctas .btn-nav-dark,
.nav-lit .hp-nav-ctas .btn-nav-dark {
	position: relative; isolation: isolate; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; color: #ffffff;
	background: linear-gradient(135deg, rgba(139,99,255,0.94) 0%, rgba(105,56,239,0.86) 55%, rgba(76,33,192,0.92) 100%);
	-webkit-backdrop-filter: blur(14px) saturate(170%);
	backdrop-filter: blur(14px) saturate(170%);
	border: 1px solid rgba(255,255,255,0.30);
	border-radius: 100px; padding: 8px 18px;
	text-decoration: none; white-space: nowrap;
	transform: translateZ(0); will-change: transform;
	animation: navCtaPulse 2.8s ease-in-out infinite;
	transition: transform 0.18s, filter 0.18s;
}
.hp-nav-ctas .btn-nav-dark::after,
.hp-mobile-nav .hp-mobile-cta::after {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(105deg, transparent 36%, rgba(255,255,255,0.55) 50%, transparent 64%);
	transform: translateX(-130%);
	animation: navCtaShine 3.6s ease-in-out infinite;
}
.hp-nav-ctas .btn-nav-dark:hover,
.nav-lit .hp-nav-ctas .btn-nav-dark:hover {
	background: linear-gradient(135deg, rgba(139,99,255,0.94) 0%, rgba(105,56,239,0.86) 55%, rgba(76,33,192,0.92) 100%);
	color: #ffffff; transform: translateY(-1px); filter: brightness(1.12);
}
.hp-mobile-nav .hp-mobile-cta {
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	margin: 8px 40px; color: #ffffff;
	background: linear-gradient(135deg, rgba(139,99,255,0.94) 0%, rgba(105,56,239,0.86) 55%, rgba(76,33,192,0.92) 100%);
	-webkit-backdrop-filter: blur(14px) saturate(170%);
	backdrop-filter: blur(14px) saturate(170%);
	border: 1px solid rgba(255,255,255,0.30);
	font-weight: 700; border-radius: 100px; text-align: center;
	padding: 11px 20px; transform: translateZ(0);
	animation: navCtaPulse 2.8s ease-in-out infinite;
	transition: filter 0.18s;
}
.hp-mobile-nav .hp-mobile-cta:hover { color: #ffffff; filter: brightness(1.12); }

@keyframes navCtaShine {
	0% { transform: translateX(-130%); }
	55%, 100% { transform: translateX(130%); }
}
@keyframes navCtaPulse {
	0%, 100% { box-shadow: 0 4px 14px rgba(105,56,239,0.30), 0 0 0 0 rgba(139,99,255,0.42), inset 0 1px 0 rgba(255,255,255,0.36); }
	50% { box-shadow: 0 8px 24px rgba(105,56,239,0.46), 0 0 0 7px rgba(139,99,255,0), inset 0 1px 0 rgba(255,255,255,0.50); }
}
@media (prefers-reduced-motion: reduce) {
	.hp-nav-ctas .btn-nav-dark, .hp-nav-ctas .btn-nav-dark::after,
	.hp-mobile-nav .hp-mobile-cta, .hp-mobile-nav .hp-mobile-cta::after { animation: none; }
}

/* One type scale. The nav carried two base sizes, 0.93rem on nine pages
   and 0.86rem on the rest, plus a shrink to 0.79rem below 1180px, so the
   header changed size both between pages and while resizing.
   Selector is .hp-nav .hp-nav-links > li > a because glass-cards.css
   shrinks with `.hp-nav-links > li > a`, which outranks a plain
   `.hp-nav-links a` no matter where it sits in the cascade.
   Gap and padding are deliberately left responsive: tightening the
   spacing is what lets the type stay one size down to the breakpoint. */
.hp-nav .hp-nav-links > li > a { font-size: 0.86rem; }
.hp-nav .hp-nav-ctas .btn-nav-dark,
.hp-nav .hp-nav-ctas .btn-nav-ghost { font-size: 0.84rem; }
.hp-nav .hp-nav-logo span { font-size: 1rem; }

/* The full row cannot hold a fixed size below roughly 1100px, so it hands
   over to the hamburger there rather than shrinking the type. Pages used
   to collapse at 960px, at 1100px, or never. */
@media (max-width: 1100px) {
	.hp-nav-links { display: none; }
	.hp-nav-ctas .btn-nav-ghost { display: none; }
	.hp-toggle { display: grid; }
}

/* Current page indicator. Every top level item carries the pill geometry
   and only the active one is painted, so nothing reflows between pages.
   The negative margin cancels the padding, keeping the row width and
   height identical to before. Purple glass rather than white or dark so
   the same treatment reads on the dark nav and the scrolled light nav. */
.hp-nav-links > li > a { padding: 6px 12px; margin: -6px -12px; border-radius: 100px; }
.hp-nav-links > li > a.is-here,
.nav-lit .hp-nav-links > li > a.is-here {
	background: rgba(139,99,255,0.18);
	border: 1px solid rgba(139,99,255,0.34);
	-webkit-backdrop-filter: blur(10px) saturate(170%);
	backdrop-filter: blur(10px) saturate(170%);
	box-shadow: 0 4px 14px rgba(105,56,239,0.18), inset 0 1px 0 rgba(255,255,255,0.30);
}
.hp-nav-links .hp-dd a.is-here,
.nav-lit .hp-nav-links .hp-dd a.is-here {
	color: #6938ef; background: rgba(105,56,239,0.07);
}
/* Contact Us sits in the CTA group, not the link list */
.hp-nav .hp-nav-ctas .btn-nav-ghost.is-here,
.nav-lit .hp-nav .hp-nav-ctas .btn-nav-ghost.is-here {
	background: rgba(139,99,255,0.18);
	border-color: rgba(139,99,255,0.50);
	-webkit-backdrop-filter: blur(10px) saturate(170%);
	backdrop-filter: blur(10px) saturate(170%);
	box-shadow: 0 4px 14px rgba(105,56,239,0.18), inset 0 1px 0 rgba(255,255,255,0.30);
}
.hp-mobile-nav a.is-here { color: #6938ef; }
/* ── end sitewide nav corrections ── */