@font-face {
			font-family: "Gilroy";
			src: url("fonts/Gilroy-Light.woff2") format('woff2');
			font-weight: 300;
			font-style: normal;
			font-display: swap;
		}
		@font-face {
			font-family: "Gilroy";
			src: url("fonts/Gilroy-LightItalic.woff2") format('woff2');
			font-weight: 300;
			font-style: italic;
			font-display: swap;
		}
		@font-face {
			font-family: "Gilroy";
			src: url("fonts/Gilroy-Regular.woff2") format('woff2');
			font-weight: 400;
			font-style: normal;
			font-display: swap;
		}
		@font-face {
			font-family: "Gilroy";
			src: url("fonts/Gilroy-RegularItalic.woff2") format('woff2');
			font-weight: 400;
			font-style: italic;
			font-display: swap;
		}
		@font-face {
			font-family: "Gilroy";
			src: url("fonts/Gilroy-Medium.woff2") format('woff2');
			font-weight: 500;
			font-style: normal;
			font-display: swap;
		}
		@font-face {
			font-family: "Gilroy";
			src: url("fonts/Gilroy-SemiBold.woff2") format('woff2');
			font-weight: 600;
			font-style: normal;
			font-display: swap;
		}
		@font-face {
			font-family: "Gilroy";
			src: url("fonts/Gilroy-Bold.woff2") format('woff2');
			font-weight: 700;
			font-style: normal;
			font-display: swap;
		}

/* ── RESET ── */
		*,
		*::before,
		*::after {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		img {
			max-width: 100%;
			height: auto;
		}

		/* ── LIGHT MODE (default) ── */
		:root {
			--bg: #f6f4ed;
			--surface: #ffffff;
			--text: #000000;
			--text-light: #666666;
			--border: rgba(0, 0, 0, 0.07);
			--teal: #8caaab;
			--teal-dark: #6e8b8d;
			--white: #ffffff;
			--dark-bg: #1f1f1f;
			--dark-card: #2a2a2a;
			--dark-subtext: #bcbcbc;
			--nav-border: rgba(0, 0, 0, 0.06);
			--divider: rgba(0, 0, 0, 0.07);
			--sp-card-bg: #ffffff;
			--sc-card-bg: #ffffff;
			--wa-is-bg: #ffffff;
			--wa-is-row-border: rgba(0, 0, 0, 0.06);
			--input-border: rgba(0, 0, 0, 0.12);
			--input-bg: #ffffff;
			--toggle-bg: rgba(0, 0, 0, 0.08);
			--toggle-icon-color: #555;
		}

		/* ── DARK MODE ── */
		html.dark {
			--bg: #1f1f1f;
			--surface: #2a2a2a;
			--text: #ffffff;
			--text-light: #bcbcbc;
			--border: rgba(255, 255, 255, 0.07);
			--nav-border: rgba(255, 255, 255, 0.06);
			--divider: rgba(255, 255, 255, 0.07);
			--sp-card-bg: #2a2a2a;
			--sc-card-bg: #2a2a2a;
			--wa-is-bg: #2a2a2a;
			--wa-is-row-border: rgba(255, 255, 255, 0.07);
			--input-border: rgba(255, 255, 255, 0.15);
			--input-bg: #2a2a2a;
			--toggle-bg: rgba(255, 255, 255, 0.1);
			--toggle-icon-color: #bcbcbc;
		}

		html {
			scroll-behavior: smooth;
			background: var(--bg);
			transition: background 0.3s ease;
			overflow-x: clip;
		}

		body {
			font-family: "Gilroy", sans-serif;
			font-weight: 300;
			background: var(--bg);
			color: var(--text);
			overflow-x: clip;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			transition: background 0.3s ease, color 0.3s ease;
		}

		/* ── NAV ── */
		nav {
			position: sticky;
			top: 0;
			z-index: 100;
			background: var(--bg);
			padding: 18px 32px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid var(--nav-border);
			transition: background 0.3s ease, border-color 0.3s ease;
		}

		.nav-logo {
			font-family: "Gilroy", sans-serif;
			font-size: 22px;
			font-weight: 400;
			letter-spacing: 0.02em;
			color: var(--text);
			text-decoration: none;
			transition: color 0.3s ease;
		}
		.nav-blog-link {
			font-family: "Gilroy", sans-serif;
			font-size: 13px;
			font-weight: 300;
			color: var(--text-light);
			text-decoration: none;
			letter-spacing: 0.02em;
			margin-left: auto;
			margin-right: 20px;
			transition: color 0.2s ease;
		}
		.nav-blog-link:hover {
			color: var(--text);
		}

		/* Dark mode toggle */
		.dm-toggle {
			width: 36px;
			height: 36px;
			border-radius: 50%;
			background: var(--toggle-bg);
			border: none;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: background 0.2s ease, transform 0.2s ease;
			flex-shrink: 0;
		}

		.dm-toggle:hover {
			transform: scale(1.1);
		}

		.dm-toggle svg {
			display: block;
			transition: opacity 0.2s ease, transform 0.3s ease;
		}

		.dm-toggle .icon-moon {
			display: block;
		}

		.dm-toggle .icon-sun {
			display: none;
		}

		html.dark .dm-toggle .icon-moon {
			display: none;
		}

		html.dark .dm-toggle .icon-sun {
			display: block;
		}

		/* ── HERO ── */
		.hero {
			text-align: center;
			padding: 64px 24px 16px;
		}

		.hero h1 {
			font-family: "Gilroy", sans-serif;
			font-size: clamp(30px, 6vw, 56px);
			font-weight: 400;
			line-height: 1.15;
			letter-spacing: -0.01em;
			max-width: 580px;
			margin: 0 auto 18px;
			color: var(--text);
			transition: color 0.3s;
		}

		.hero p {
			font-family: "Gilroy", sans-serif;
			font-size: clamp(14px, 2vw, 16px);
			font-weight: 300;
			color: var(--text-light);
			max-width: 360px;
			margin: 0 auto 30px;
			line-height: 1.7;
			transition: color 0.3s;
		}

		.hero-btn {
			font-family: "Gilroy", sans-serif;
			display: inline-flex;
			align-items: center;
			gap: 8px;
			background: var(--teal);
			color: var(--white);
			padding: 14px 28px;
			border-radius: 50px;
			font-size: 15px;
			font-weight: 400;
			text-decoration: none;
			transition: background 0.2s, transform 0.2s;
		}

		.hero-btn:hover {
			background: var(--teal-dark);
			transform: translateY(-2px);
		}

		.hero-sub {
			font-family: "Gilroy", sans-serif;
			display: block;
			margin-top: 12px;
			margin-bottom: 20px;
			font-size: 13px;
			font-weight: 300;
			color: var(--text-light);
			font-style: italic;
		}

		/* ── PHONE CLUSTER ── */
		.phone-cluster {
			position: relative;
			max-width: 480px;
			margin: 44px auto 0;
			height: 400px;
			padding: 0 8px;
			perspective: 1000px;
		}

		/* Phone cluster bottom gradient removed — phones use drop-shadows instead */

		.phone-cluster-inner {
			position: relative;
			width: 100%;
			height: 100%;
			transform-style: preserve-3d;
			will-change: transform;
			z-index: 1;
		}

		.phone-shell.shell-left {
			position: absolute;
			bottom: 16px;
			left: 52px;
			z-index: 2;
			width: 138px;
			transform: rotate(-8deg);
			transform-origin: bottom center;
		}

		.phone-shell.shell-right {
			position: absolute;
			bottom: 16px;
			right: 52px;
			z-index: 2;
			width: 138px;
			transform: rotate(8deg);
			transform-origin: bottom center;
		}

		.phone-shell.centre-shell {
			position: absolute;
			bottom: 0;
			left: 50%;
			z-index: 3;
			width: 170px;
			transform: translateX(-50%);
		}

		.phone-shell.shell-left img,
		.phone-shell.shell-right img {
			width: 100%;
			border-radius: 22px;
			display: block;
			filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.22));
		}

		.phone-shell.centre-shell img {
			width: 100%;
			border-radius: 26px;
			display: block;
			filter: drop-shadow(0 24px 64px rgba(0, 0, 0, 0.28));
		}

		.phone-cluster:hover .centre-shell img {
			filter: drop-shadow(0 32px 80px rgba(140, 170, 171, 0.38)) drop-shadow(0 8px 24px rgba(0, 0, 0, 0.25)) !important;
		}

		.phone-cluster:hover .side-shell img {
			filter: drop-shadow(0 20px 48px rgba(140, 170, 171, 0.2)) drop-shadow(0 6px 16px rgba(0, 0, 0, 0.2)) !important;
		}

		/* ── PROBLEM CARDS — cascading scroll animation ── */
		.problems {
			padding: 48px 20px 0;
			display: block;
			max-width: 680px;
			margin: 0 auto;
			padding-bottom: 64px;
		}

		/* Each card sticks as you scroll past it */
		.problem-card {
			border-radius: 20px;
			overflow: hidden;
			width: 100%;
			height: 60vh;
			box-shadow: 0 8px 40px rgba(0, 0, 0, 0.14);
			position: sticky;
			margin-bottom: 16px;
			transform-origin: top center;
			will-change: transform;
		}

		.problem-card:nth-child(1) {
			top: 80px;
			z-index: 1;
		}

		.problem-card:nth-child(2) {
			top: 128px;
			z-index: 2;
		}

		.problem-card:nth-child(3) {
			top: 176px;
			z-index: 3;
			margin-bottom: 0;
		}

		.problem-card img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
			border-radius: 20px;
		}

		/* ── SOCIAL PROOF ── */
		.social-proof {
			max-width: 600px;
			margin: 40px auto 0;
			padding: 0 24px;
		}

		.sp-label {
			font-family: "Gilroy", sans-serif;
			font-size: 11px;
			font-weight: 500;
			letter-spacing: 0.12em;
			text-transform: uppercase;
			color: var(--teal-dark);
			text-align: center;
			margin-bottom: 32px;
			display: block;
		}

		.sp-grid {
			display: grid;
			grid-template-columns: 1fr;
			gap: 12px;
		}

		@media (min-width: 560px) {
			.sp-grid {
				grid-template-columns: repeat(3, 1fr);
			}
		}

		.sp-card {
			background: var(--sp-card-bg);
			border-radius: 16px;
			padding: 20px 18px;
			transition: background 0.3s ease;
		}

		.sp-quote {
			font-family: "Gilroy", sans-serif;
			font-size: 14px;
			font-weight: 300;
			color: var(--text);
			line-height: 1.65;
			font-style: italic;
			margin-bottom: 12px;
			transition: color 0.3s;
		}

		.sp-dots {
			display: flex;
			gap: 3px;
			margin-bottom: 10px;
		}

		.sp-dot {
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: var(--teal);
		}

		.sp-source {
			font-family: "Gilroy", sans-serif;
			font-size: 11px;
			font-weight: 400;
			color: var(--text-light);
			letter-spacing: 0.04em;
			transition: color 0.3s;
		}

		/* ── WHAT AROA IS & ISN'T ── */
		.what-aroa-section {
			padding: 80px 24px;
			max-width: 680px;
			margin: 0 auto;
		}

		.wa-heading {
			font-family: "Gilroy", sans-serif;
			font-size: clamp(26px, 5vw, 38px);
			font-weight: 400;
			line-height: 1.2;
			margin-bottom: 10px;
			color: var(--text);
			transition: color 0.3s;
			text-align: center;
		}

		.wa-subhead {
			font-family: "Gilroy", sans-serif;
			font-size: clamp(15px, 2vw, 17px);
			font-weight: 300;
			color: var(--text-light);
			line-height: 1.78;
			max-width: 520px;
			margin: 0 auto 48px;
			transition: color 0.3s;
			text-align: center;
		}

		.wa-subhead strong {
			font-weight: 400;
			color: var(--text);
			transition: color 0.3s;
		}

		.wa-panel {
			display: grid;
			grid-template-columns: 1fr 1fr;
			border-radius: 24px;
			overflow: hidden;
			box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
			margin-bottom: 40px;
		}

		@media (max-width: 520px) {
			.wa-panel {
				grid-template-columns: 1fr;
			}
		}

		.wa-is {
			background: var(--wa-is-bg);
			padding: 36px 32px;
			transition: background 0.3s ease;
		}

		.wa-side-label {
			font-family: "Gilroy", sans-serif;
			font-size: 10px;
			font-weight: 500;
			letter-spacing: 0.14em;
			text-transform: uppercase;
			margin-bottom: 28px;
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.wa-side-label.is-label {
			color: var(--teal-dark);
		}

		.wa-side-label.isnt-label {
			color: rgba(255, 255, 255, 0.3);
		}

		.wa-side-label::before {
			content: "";
			display: block;
			width: 18px;
			height: 2px;
			border-radius: 2px;
			background: currentColor;
			flex-shrink: 0;
		}

		.wa-is-row {
			display: flex;
			align-items: flex-start;
			gap: 14px;
			padding: 16px 0;
			border-bottom: 1px solid var(--wa-is-row-border);
			transition: border-color 0.3s;
		}

		.wa-is-row:first-of-type {
			border-top: 1px solid var(--wa-is-row-border);
		}

		.wa-is-row:last-of-type {
			border-bottom: none;
		}

		.wa-is-check {
			width: 24px;
			height: 24px;
			border-radius: 50%;
			background: rgba(140, 170, 171, 0.12);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			margin-top: 2px;
		}

		.wa-is-title {
			font-family: "Gilroy", sans-serif;
			font-size: 15px;
			font-weight: 400;
			color: var(--text);
			line-height: 1.3;
			transition: color 0.3s;
		}

		.wa-is-sub {
			font-family: "Gilroy", sans-serif;
			font-size: 12px;
			font-weight: 300;
			color: var(--text-light);
			margin-top: 3px;
			line-height: 1.55;
			transition: color 0.3s;
		}

		.wa-isnt {
			background: var(--dark-bg);
			padding: 36px 32px;
		}

		.wa-isnt-row {
			display: flex;
			align-items: center;
			gap: 14px;
			padding: 14px 0;
			border-bottom: 1px solid rgba(255, 255, 255, 0.05);
		}

		.wa-isnt-row:first-of-type {
			border-top: 1px solid rgba(255, 255, 255, 0.05);
		}

		.wa-isnt-row:last-of-type {
			border-bottom: none;
		}

		.wa-isnt-x {
			width: 24px;
			height: 24px;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.06);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
		}

		.wa-isnt-text {
			font-family: "Gilroy", sans-serif;
			font-size: 15px;
			font-weight: 300;
			color: rgba(255, 255, 255, 0.45);
			line-height: 1.4;
		}

		.wa-closing-main {
			font-family: "Gilroy", sans-serif;
			font-size: clamp(18px, 3vw, 22px);
			font-weight: 400;
			color: var(--text);
			line-height: 1.4;
			transition: color 0.3s;
			text-align: center;
		}

		.wa-closing-sub {
			font-family: "Gilroy", sans-serif;
			font-size: clamp(15px, 2vw, 17px);
			font-weight: 300;
			color: var(--text-light);
			transition: color 0.3s;
			text-align: center;
			margin-top: 4px;
		}

		/* ── SECTION DIVIDER ── */
		.section-divider {
			max-width: 600px;
			margin: 0 auto;
			height: 1px;
			background: var(--divider);
			transition: background 0.3s;
		}

		/* ── SCENARIO SECTION ── */
		.scenario-section {
			padding: 80px 24px;
			max-width: 600px;
			margin: 0 auto;
			text-align: center;
		}

		.scenario-section h2 {
			font-family: "Gilroy", sans-serif;
			font-size: clamp(24px, 5vw, 38px);
			font-weight: 400;
			line-height: 1.2;
			margin-bottom: 16px;
			color: var(--text);
			transition: color 0.3s;
		}

		

		.scenario-cards {
			display: grid;
			grid-template-columns: 1fr;
			gap: 12px;
			text-align: left;
		}

		@media (min-width: 640px) {
			.scenario-cards {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		.sc-card {
			background: var(--sc-card-bg);
			border-radius: 18px;
			padding: 24px 22px;
			transition: background 0.3s ease;
		
				border-left: 3px solid var(--teal);
			}

		.sc-time {
			font-family: "Gilroy", sans-serif;
			font-size: 11px;
			font-weight: 500;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			color: var(--teal-dark);
			margin-bottom: 10px;
			display: block;
		}

		.sc-text {
			font-family: "Gilroy", sans-serif;
			font-size: 14px;
			font-weight: 300;
			color: var(--text);
			line-height: 1.7;
			transition: color 0.3s;
		}

		.sc-text em {
			font-style: normal;
			font-weight: 400;
		}

		/* ── FEATURES (restored) ── */
		.features {
			padding: 80px 24px 40px;
			text-align: center;
		}

		.features h2 {
			font-family: "Gilroy", sans-serif;
			font-size: clamp(24px, 5vw, 38px);
			font-weight: 400;
			line-height: 1.2;
			color: var(--text);
			transition: color 0.3s;
		}

		.features .sub {
			font-family: "Gilroy", sans-serif;
			font-size: 14px;
			font-weight: 300;
			color: var(--text-light);
			max-width: 320px;
			margin: 10px auto 40px;
			line-height: 1.7;
			transition: color 0.3s;
		}

		.features-grid {
			display: grid;
			grid-template-columns: 1fr;
			max-width: 820px;
			margin: 0 auto;
			align-items: center;
		}

		@media (min-width: 640px) {
			.features-grid {
				grid-template-columns: 1fr auto 1fr;
				gap: 0 32px;
			}
		}

		.feature-list {
			display: flex;
			flex-direction: column;
			gap: 28px;
			text-align: left;
		}

		@media (max-width: 639px) {
			.feature-list {
				margin-bottom: 32px;
			}

			.feature-list.right {
				margin-top: 32px;
				margin-bottom: 0;
			}
		}

		.feature-item h4 {
			font-family: "Gilroy", sans-serif;
			font-size: 16px;
			font-weight: 400;
			margin-bottom: 5px;
			color: var(--text);
			transition: color 0.3s;
		}

		.feature-item p {
			font-family: "Gilroy", sans-serif;
			font-size: 13px;
			font-weight: 300;
			color: var(--text-light);
			line-height: 1.65;
			transition: color 0.3s;
		}

		.center-phone {
			width: 180px;
			margin: 0 auto;
		}

		.center-phone img {
			width: 100%;
			border-radius: 26px;
			display: block;
			box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
		}

		

		

		

		

		

		

		

		

		.cp-action-btn span {
			font-family: "Gilroy", sans-serif;
			font-size: 9px;
			font-weight: 400;
			color: #fff;
		}

		.cp-action-btn small {
			font-family: "Gilroy", sans-serif;
			font-size: 7.5px;
			font-weight: 300;
			color: #666;
			display: block;
			margin-top: 1px;
		}

		

		

		

		.cp-tab.active {
			color: var(--teal);
		}

		/* ── HOW IT WORKS ── */
		.how-it-works {
			background: var(--dark-bg);
			border-radius: 24px;
			margin: 20px 16px;
			padding: 52px 24px;
			text-align: center;
			color: var(--white);
		}

		@media (min-width: 640px) {
			.how-it-works {
				margin: 24px 32px;
				padding: 64px 52px 60px;
				border-radius: 32px;
			}
		}

		.how-it-works h2 {
			font-family: "Gilroy", sans-serif;
			font-size: clamp(22px, 4vw, 34px);
			font-weight: 400;
		}

		.how-it-works .sub {
			font-family: "Gilroy", sans-serif;
			font-size: 14px;
			font-weight: 300;
			color: var(--dark-subtext);
			max-width: 360px;
			margin: 10px auto 40px;
			line-height: 1.7;
		}

		.steps {
			display: grid;
			grid-template-columns: 1fr;
			gap: 32px;
			max-width: 680px;
			margin: 0 auto;
		}

		@media (min-width: 560px) {
			.steps {
				grid-template-columns: repeat(3, 1fr);
				gap: 20px;
			}
		}

		.step {
			text-align: center;
		}

		.step-num {
			font-family: "Gilroy", sans-serif;
			width: 36px;
			height: 36px;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.07);
			color: var(--dark-subtext);
			font-size: 12px;
			font-weight: 400;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 12px;
		}

		.step-icon {
			font-size: 22px;
			margin-bottom: 10px;
		}

		.step h4 {
			font-family: "Gilroy", sans-serif;
			font-size: 16px;
			font-weight: 400;
			color: #fff;
			margin-bottom: 8px;
		}

		.step p {
			font-family: "Gilroy", sans-serif;
			font-size: 13px;
			font-weight: 300;
			color: var(--dark-subtext);
			line-height: 1.65;
		}

		.trial-blurb {
			max-width: 480px;
			margin: 48px auto 0;
			padding: 32px;
			background: rgba(255, 255, 255, 0.05);
			border-radius: 20px;
			border: 1px solid rgba(255, 255, 255, 0.08);
			text-align: left;
		}

		.trial-eyebrow {
			font-family: "Gilroy", sans-serif;
			font-size: 11px;
			font-weight: 500;
			letter-spacing: 0.12em;
			text-transform: uppercase;
			color: var(--teal);
			margin-bottom: 16px;
			display: block;
		}

		.trial-blurb p {
			font-family: "Gilroy", sans-serif;
			font-size: clamp(14px, 2vw, 15px);
			font-weight: 300;
			color: var(--dark-subtext);
			line-height: 1.78;
		}

		.trial-blurb p+p {
			margin-top: 12px;
		}

		

		.hiw-cta {
			font-family: "Gilroy", sans-serif;
			display: inline-flex;
			align-items: center;
			gap: 8px;
			background: var(--teal);
			color: #fff;
			padding: 14px 28px;
			border-radius: 50px;
			font-size: 15px;
			font-weight: 400;
			text-decoration: none;
			margin-top: 36px;
			transition: background 0.2s;
		}

		.hiw-cta:hover {
			background: var(--teal-dark);
		}

		/* ── FINAL CTA / WAITLIST ── */
		.final-cta {
			padding: 80px 24px 64px;
			text-align: center;
		}

		.final-cta h2 {
			font-family: "Gilroy", sans-serif;
			font-size: clamp(26px, 5vw, 44px);
			font-weight: 400;
			line-height: 1.2;
			color: var(--text);
			transition: color 0.3s;
		}

		.final-cta 

		

		.waitlist-sub {
			font-family: "Gilroy", sans-serif;
			font-size: 14px;
			font-weight: 300;
			color: var(--text-light);
			margin-bottom: 28px;
			display: block;
			transition: color 0.3s;
		}

		.waitlist-form {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			flex-wrap: wrap;
			max-width: 400px;
			margin: 0 auto 32px;
		}

		.waitlist-input {
			font-family: "Gilroy", sans-serif;
			flex: 1;
			min-width: 200px;
			padding: 13px 18px;
			border-radius: 50px;
			border: 1.5px solid var(--input-border);
			background: var(--input-bg);
			font-size: 14px;
			font-weight: 300;
			color: var(--text);
			outline: none;
			transition: border-color 0.2s, background 0.3s, color 0.3s;
		}

		.waitlist-input::placeholder {
			color: #aaa;
		}

		.waitlist-input:focus {
			border-color: var(--teal);
		}

		.waitlist-btn {
			font-family: "Gilroy", sans-serif;
			padding: 13px 24px;
			border-radius: 50px;
			background: var(--teal);
			color: #fff;
			border: none;
			font-size: 14px;
			font-weight: 400;
			cursor: pointer;
			transition: background 0.2s, transform 0.2s;
			white-space: nowrap;
		}

		.waitlist-btn:hover {
			background: var(--teal-dark);
			transform: translateY(-1px);
		}

		.waitlist-success {
			font-family: "Gilroy", sans-serif;
			font-size: 14px;
			font-weight: 300;
			color: var(--teal-dark);
			display: none;
			margin-bottom: 24px;
		}


		.coming-soon-chip {
			font-family: "Gilroy", sans-serif;
			display: inline-block;
			font-size: 12px;
			font-weight: 400;
			color: var(--teal-dark);
			background: rgba(110, 139, 141, 0.1);
			border: 1px solid rgba(110, 139, 141, 0.25);
			border-radius: 50px;
			padding: 5px 16px;
			margin-top: 18px;
		}

		/* ── FOOTER ── */
		footer {
			font-family: "Gilroy", sans-serif;
			background: #1f1f1f;
			color: var(--dark-subtext);
			padding: 32px;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 12px;
		}

		.footer-tagline {
			font-family: "Gilroy", sans-serif;
			font-size: 13px;
			font-weight: 300;
			color: rgba(255, 255, 255, 0.25);
			font-style: italic;
			letter-spacing: 0.02em;
		}

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

		.footer-links a {
			font-family: "Gilroy", sans-serif;
			color: var(--dark-subtext);
			font-size: 12px;
			text-decoration: none;
			transition: color 0.2s;
		}

		.footer-links a:hover {
			color: #fff;
		}

		/* ── ANIMATIONS ── */
		@keyframes fadeUp {
			from {
				opacity: 0;
				transform: translateY(24px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.hero {
			animation: fadeUp 0.7s ease both;
		}

		.phone-cluster {
			animation: fadeUp 0.85s 0.12s ease both;
		}

		.fade-in {
			opacity: 0;
			transform: translateY(20px);
			transition: opacity 0.65s ease, transform 0.65s ease;
		}

		.fade-in.visible {
			opacity: 1;
			transform: none;
		}

		@media (max-width: 400px) {
			nav {
				padding: 16px 20px;
			}
		}

		@media (min-width: 768px) {
			.problems {
				max-width: 720px;
			}

			.what-aroa-section {
				max-width: 720px;
			}
		}

		/* ── MOBILE: reduce vertical padding on content sections ── */
		@media (max-width: 639px) {
			.what-aroa-section {
				padding: 48px 20px;
			}
			.scenario-section {
				padding: 48px 20px;
			}
			.features {
				padding: 48px 20px 24px;
			}
			.final-cta {
				padding: 56px 20px 48px;
			}
			.social-proof {
				margin-top: 24px;
			}
			.phone-cluster {
				height: 340px;
			}
			/* Problem cards — let images breathe at natural proportions */
			.problems {
				padding-bottom: 120px;
			}
			.problem-card {
				height: auto;
			}
			/* Tighter 24 px stagger on mobile (cards are shorter) */
			.problem-card:nth-child(2) {
				top: 104px;
			}
			.problem-card:nth-child(3) {
				top: 128px;
			}
			.trial-blurb {
				padding: 24px 20px;
			}
			.waitlist-form {
				gap: 8px;
			}
			.waitlist-input {
				min-width: 0;
				width: 100%;
			}
			.waitlist-btn {
				width: 100%;
			}
		}

		/* ── TINY PHONES (≤380px) ── */
		@media (max-width: 380px) {
			.hero {
				padding: 48px 16px 12px;
			}
			.phone-cluster {
				height: 280px;
			}
			.hero h1 {
				font-size: 26px;
			}
			.blog-strip-header {
				padding: 0 16px;
			}
			.blog-strip-heading {
				padding: 0 16px;
			}
			.blog-scroll-track {
				padding: 4px 16px;
			}
		}

		/* ════════════════════════════════════════
		   BLOG SCROLL STRIP
		   ════════════════════════════════════════ */
		.blog-strip {
			padding: 64px 0 72px;
			overflow: hidden;
		}
		.blog-strip-header {
			display: flex;
			align-items: baseline;
			justify-content: space-between;
			padding: 0 40px;
			margin-bottom: 28px;
		}
		.blog-strip-eyebrow {
			font-family: "Gilroy", sans-serif;
			font-size: 11px;
			font-weight: 400;
			letter-spacing: 0.16em;
			text-transform: uppercase;
			color: var(--teal);
			transition: color 0.3s;
		}
		.blog-strip-heading {
			font-family: "Gilroy", sans-serif;
			font-size: clamp(22px, 3vw, 28px);
			font-weight: 300;
			color: var(--text);
			margin-top: 6px;
			transition: color 0.3s;
			padding: 0 40px;
			margin-bottom: 32px;
		}
		.blog-strip-link {
			font-family: "Gilroy", sans-serif;
			font-size: 13px;
			font-weight: 400;
			color: #6e8b8d;
			text-decoration: none;
			display: inline-flex;
			align-items: center;
			gap: 5px;
			transition: gap 0.2s ease, color 0.2s ease;
		}
		.blog-strip-link:hover { gap: 9px; }
		.blog-scroll-track-wrap {
			overflow: hidden;
			width: 100%;
		}
		.blog-scroll-track {
			display: flex;
			gap: 20px;
			width: max-content;
			animation: blogScroll 28s linear infinite;
			padding: 4px 40px;
		}
		.blog-scroll-track-wrap:hover .blog-scroll-track {
			animation-play-state: paused;
		}
		@keyframes blogScroll {
			0%   { transform: translateX(0); }
			100% { transform: translateX(-50%); }
		}
		.bsc {
			flex-shrink: 0;
			width: 300px;
			height: 200px;
			border-radius: 16px;
			overflow: hidden;
			position: relative;
			text-decoration: none;
			display: block;
			transition: transform 0.3s ease, box-shadow 0.3s ease;
		}
		.bsc:hover {
			transform: translateY(-4px);
			box-shadow: 0 16px 48px rgba(0,0,0,0.18);
		}
		.bsc img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
			transition: transform 0.5s ease;
		}
		.bsc:hover img { transform: scale(1.04); }
		.bsc-overlay {
			position: absolute;
			inset: 0;
			background: linear-gradient(
				to top,
				rgba(0,0,0,0.72) 0%,
				rgba(0,0,0,0.28) 50%,
				rgba(0,0,0,0.04) 100%
			);
		}
		.bsc-num {
			position: absolute;
			top: 14px;
			left: 14px;
			width: 32px;
			height: 32px;
			border-radius: 50%;
			border: 1.5px solid rgba(255,255,255,0.55);
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: "Gilroy", sans-serif;
			font-size: 11px;
			font-weight: 700;
			color: rgba(255,255,255,0.9);
		}
		.bsc-tag {
			position: absolute;
			top: 14px;
			right: 14px;
			font-family: "Gilroy", sans-serif;
			font-size: 9px;
			font-weight: 400;
			letter-spacing: 0.12em;
			text-transform: uppercase;
			color: rgba(255,255,255,0.85);
			background: rgba(140,170,171,0.55);
			padding: 3px 8px;
			border-radius: 50px;
			backdrop-filter: blur(4px);
		}
		.bsc-title {
			position: absolute;
			bottom: 14px;
			left: 14px;
			right: 14px;
			font-family: "Gilroy", sans-serif;
			font-size: 14px;
			font-weight: 400;
			color: #ffffff;
			line-height: 1.35;
		}
		@media (max-width: 680px) {
			.blog-strip-header { padding: 0 20px; }
			.blog-strip-heading { padding: 0 20px; }
			.blog-scroll-track { padding: 4px 20px; }
			.bsc { width: 240px; height: 168px; }
			.blog-strip { padding: 48px 0 56px; }
		}
	

		.phone-fig {
			display: contents;
		}
		.phone-caption {
			display: block;
			font-size: 11px;
			font-weight: 300;
			color: var(--text-light);
			text-align: center;
			margin-top: 8px;
			letter-spacing: 0.04em;
			transition: color 0.3s ease;
		}

		/* ── Honeypot (hidden from humans, visible to bots) ── */
		.hp-field {
			position: absolute;
			left: -9999px;
			opacity: 0;
			pointer-events: none;
			tab-index: -1;
			height: 0;
			width: 0;
			overflow: hidden;
		}