/* ════════════════════════════════════════════════════════════════════════════
   Count Your Wealth - marketing site

   Tokens and surface treatments are kept in step with the app's site.css so the
   site and the product read as one thing: the same navy/primary pair, the same
   card (1px border, large radius, two-part shadow), the same tinted icon chip,
   the same delta pill, the same segmented switch.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
	--cyw-primary: #0c9fed;
	--cyw-navy: #032b4c;
	--cyw-primary-hover: #087fbd;
	--cyw-primary-soft: #e7f5fd;
	--cyw-gray: #374151;
	--cyw-text-muted: #6b7280;
	--cyw-page: #f4f7fb;
	--cyw-surface: #ffffff;
	--cyw-surface-subtle: #f8fafc;
	--cyw-surface-muted: #eef2f7;
	--cyw-border: #dce4ee;
	--cyw-border-strong: #c7d3e0;
	--cyw-positive: #16794b;
	--cyw-positive-soft: #e8f7ef;
	--cyw-negative: #c93745;
	--cyw-negative-soft: #fdf0f1;
	--cyw-text-faint: #a9b4c2;

	--cyw-radius-sm: 0.5rem;
	--cyw-radius: 0.875rem;
	--cyw-radius-lg: 1.25rem;
	--cyw-shadow-sm: 0 1px 2px rgba(3, 43, 76, 0.06);
	--cyw-shadow-card: 0 1px 2px rgba(3, 43, 76, 0.05), 0 12px 26px -20px rgba(3, 43, 76, 0.55);
	--cyw-shadow-lift: 0 1px 2px rgba(3, 43, 76, 0.05), 0 20px 38px -22px rgba(3, 43, 76, 0.6);

	--cyw-wide: 1160px;
	--cyw-gutter: 2rem;
}

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

html {
	scroll-behavior: smooth;
	/* Anchored sections land below the sticky nav rather than under it. */
	scroll-padding-top: 5rem;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--cyw-gray);
	line-height: 1.6;
	background: var(--cyw-surface);
	-webkit-font-smoothing: antialiased;
}

/* height:auto matters: the width/height attributes are there to reserve layout space,
   and without it they also fix the rendered height and squash every aspect ratio. */
img {
	display: block;
	max-width: 100%;
	height: auto;
}

.shell {
	width: 100%;
	max-width: var(--cyw-wide);
	margin: 0 auto;
	padding-inline: var(--cyw-gutter);
}

/* ── Motion ───────────────────────────────────────────────────────────────────
   The app staggers its cards in on load; here the same curve fires as each block
   scrolls into view. Applied by JS so a no-JS visitor never sees hidden content. */

@keyframes cyw-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
}

.js .reveal {
	opacity: 0;
}

.js .reveal.is-in {
	opacity: 1;
	animation: cyw-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
	animation-delay: calc(var(--reveal-order, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.js .reveal,
	.js .reveal.is-in {
		opacity: 1;
		animation: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ── Shared vocabulary ────────────────────────────────────────────────────── */

/* The app's tinted icon chip, verbatim. */
.insight-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	border-radius: 0.7rem;
	background: linear-gradient(140deg, rgba(12, 159, 237, 0.18), rgba(3, 43, 76, 0.07));
	color: var(--cyw-primary);
	font-size: 0.95rem;
}

.on-navy .insight-icon {
	background: rgba(255, 255, 255, 0.12);
	color: #7fd0f8;
}

.card {
	border: 1px solid var(--cyw-border);
	border-radius: var(--cyw-radius-lg);
	background: linear-gradient(180deg, var(--cyw-surface) 0%, #fbfdff 100%);
	box-shadow: var(--cyw-shadow-card);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a.card:hover,
a.card:focus-visible {
	border-color: rgba(12, 159, 237, 0.5);
	box-shadow: var(--cyw-shadow-lift);
	transform: translateY(-3px);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.9rem 1.6rem;
	border: 1px solid transparent;
	border-radius: 0.7rem;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary {
	background: var(--cyw-primary);
	color: #fff;
}

.btn-primary:hover {
	background: var(--cyw-primary-hover);
	transform: translateY(-2px);
}

.btn-ghost {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.btn-ghost:hover {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.45);
}

.btn i {
	font-size: 0.85em;
}

:focus-visible {
	outline: 3px solid rgba(12, 159, 237, 0.45);
	outline-offset: 3px;
}

.on-navy :focus-visible {
	outline-color: rgba(150, 220, 255, 0.85);
}

/* ── Navigation ───────────────────────────────────────────────────────────── */

.public-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Set by JS once the page scrolls: the bar only earns an edge when content
   passes beneath it. */
.public-nav.is-stuck {
	border-bottom-color: var(--cyw-border);
	box-shadow: 0 4px 20px -12px rgba(3, 43, 76, 0.45);
}

.nav-inner {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding-block: 0.7rem;
}

.nav-brand,
.nav-actions,
.nav-links {
	display: flex;
	align-items: center;
}

.nav-brand {
	gap: 0.6rem;
	color: var(--cyw-navy);
	font-weight: 750;
	text-decoration: none;
	letter-spacing: -0.01em;
}

/* The real wordmark rather than the icon plus type-set text, which was only ever an
   approximation of it. The icon stands in on narrow screens, where the full lockup
   would crowd out the two buttons beside it. */
.nav-logo {
	height: 38px;
	width: auto;
}

.nav-mark {
	display: none;
	width: 36px;
	height: 36px;
}

.nav-links {
	gap: 1.6rem;
	margin-left: auto;
}

.nav-links a,
.nav-login {
	color: var(--cyw-text-muted);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-login:hover {
	color: var(--cyw-navy);
}

.nav-actions {
	gap: 0.8rem;
}

.nav-signup {
	padding: 0.5rem 1rem;
	border-radius: var(--cyw-radius-sm);
	background: var(--cyw-primary);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 2px 4px rgba(12, 159, 237, 0.2);
	transition: background-color 0.2s ease;
}

.nav-signup:hover {
	background: var(--cyw-primary-hover);
	color: #fff;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

/* Layered radial lights over a navy base - the same construction as the app's
   net-worth panel, scaled up to a page. */
.hero {
	position: relative;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(80rem 34rem at 12% -8%, rgba(12, 159, 237, 0.42) 0%, rgba(12, 159, 237, 0) 62%),
		radial-gradient(56rem 30rem at 96% 8%, rgba(22, 121, 75, 0.28) 0%, rgba(22, 121, 75, 0) 66%),
		linear-gradient(150deg, #04263f 0%, #064672 54%, #042f4e 100%);
}

/* A single raking highlight, so the band reads as lit rather than filled. */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(118deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 44%);
}

.hero-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: 4rem;
	padding-block: 5.5rem 6rem;
}

.hero h1 {
	font-size: clamp(2.4rem, 4.6vw, 3.9rem);
	font-weight: 780;
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-shadow: 0 2px 22px rgba(3, 24, 43, 0.45);
}

.hero h1 .highlight {
	color: #4cbdf7;
}

.hero-lead {
	max-width: 34rem;
	margin-top: 1.35rem;
	font-size: 1.12rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.85);
}

.hero-cta-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 2.2rem;
}

.hero-reassurance {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 1.35rem;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.68);
}

/* ── Device frames ────────────────────────────────────────────────────────── */

.hero-stage {
	position: relative;
	/* Leaves room for the phone, which hangs past the browser frame's corner. */
	padding-bottom: 4rem;
}

/* Above the container's own width the frame runs off the right edge: a window onto
   something larger than the page, and it buys the screenshot a few hundred usable
   pixels. Below that the viewport, not the container, is the constraint - the bleed
   would simply be clipped, taking the liabilities tile with it. */
@media (min-width: 1300px) {
	.hero-stage .browser-frame {
		width: calc(100% + 6rem);
	}
}

.browser-frame {
	border-radius: 0.9rem;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: #f2f6fa;
	box-shadow: 0 40px 80px -30px rgba(0, 14, 28, 0.85), 0 2px 6px rgba(0, 14, 28, 0.35);
}

.browser-bar {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 0.8rem;
	background: linear-gradient(180deg, #ffffff 0%, #eef3f8 100%);
	border-bottom: 1px solid var(--cyw-border);
}

.browser-bar span {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: #cbd5e1;
	flex: none;
}

.browser-url {
	flex: 1;
	margin-left: 0.5rem;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background: var(--cyw-surface-muted);
	color: var(--cyw-text-muted);
	font-size: 0.68rem;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.browser-frame img {
	width: 100%;
}

.phone-frame {
	width: 100%;
	max-width: 15rem;
	padding: 0.3rem;
	border-radius: 2rem;
	background: linear-gradient(160deg, #0b1c2c 0%, #05121e 100%);
	box-shadow: 0 30px 60px -24px rgba(0, 14, 28, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.phone-frame img {
	width: 100%;
	border-radius: 1.5rem;
}

/* The phone overlaps the browser's bottom-left corner: one product, two shapes. */
/* Sits low enough to clear the net worth figure it is overlapping. */
.hero-stage .phone-frame {
	position: absolute;
	left: -2rem;
	bottom: -2rem;
	width: 24%;
	max-width: 9rem;
	transform: rotate(-4deg);
}

/* ── Trust strip ──────────────────────────────────────────────────────────── */

.trust-strip {
	border-bottom: 1px solid var(--cyw-border);
	background: var(--cyw-page);
}

.trust-items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 2.5rem;
	padding-block: 1.15rem;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--cyw-text-muted);
}

.trust-items span {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.trust-items i {
	color: var(--cyw-positive);
	font-size: 0.85rem;
}

/* ── Sections ─────────────────────────────────────────────────────────────── */

.section {
	padding-block: 5.5rem;
}

.section-alt {
	background: var(--cyw-page);
	border-block: 1px solid var(--cyw-border);
}

.section-dark {
	position: relative;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(60rem 26rem at 18% 0%, rgba(12, 159, 237, 0.3), transparent 66%),
		linear-gradient(150deg, #04263f 0%, #064672 55%, #042f4e 100%);
}

.section-head {
	max-width: 40rem;
	margin: 0 auto 3rem;
	text-align: center;
}

.section-eyebrow {
	display: inline-block;
	margin-bottom: 0.85rem;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--cyw-primary);
}

.section-dark .section-eyebrow {
	color: #7fd0f8;
}

.section-title {
	font-size: clamp(1.75rem, 3vw, 2.35rem);
	font-weight: 750;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: var(--cyw-navy);
}

.section-dark .section-title {
	color: #fff;
}

.section-subtitle {
	margin-top: 0.9rem;
	font-size: 1.05rem;
	color: var(--cyw-text-muted);
}

.section-dark .section-subtitle {
	color: rgba(255, 255, 255, 0.78);
}

/* ── Showcase (tabbed screenshots) ────────────────────────────────────────── */

.showcase-switch {
	display: flex;
	justify-content: center;
	margin-bottom: 2rem;
}

/* The app's RangeSwitch: one segmented control, because it is one choice. */
.segmented {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0.25rem;
	border: 1px solid var(--cyw-border);
	border-radius: 999px;
	background: var(--cyw-surface-subtle);
}

.segmented button {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 1.1rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--cyw-text-muted);
	font: inherit;
	font-size: 0.86rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.segmented button:hover[aria-selected="false"] {
	color: var(--cyw-navy);
}

.segmented button[aria-selected="true"] {
	background: var(--cyw-navy);
	color: #fff;
	box-shadow: 0 2px 8px -2px rgba(3, 43, 76, 0.5);
}

.showcase-panel {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	align-items: center;
	gap: 3.5rem;
}

.showcase-panel[hidden] {
	display: none;
}

.showcase-copy h3 {
	font-size: 1.5rem;
	font-weight: 720;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--cyw-navy);
}

.showcase-copy p {
	margin-top: 0.9rem;
	color: var(--cyw-text-muted);
}

.showcase-points {
	margin-top: 1.4rem;
	list-style: none;
	display: grid;
	gap: 0.7rem;
}

.showcase-points li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: 0.95rem;
}

.showcase-points i {
	margin-top: 0.35rem;
	color: var(--cyw-positive);
	font-size: 0.8rem;
}

/* ── Phone band ───────────────────────────────────────────────────────────── */

.phone-band {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 4rem;
}

.phone-pair {
	display: flex;
	gap: 1.5rem;
	/* Without this the frames stretch to a common height, and the offset on the second
	   one leaves the first as bezel below its screenshot. */
	align-items: flex-start;
}

.phone-pair .phone-frame:last-child {
	margin-top: 2.5rem;
}

.phone-copy h2 {
	font-size: clamp(1.7rem, 2.8vw, 2.2rem);
	font-weight: 750;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.phone-copy p {
	margin-top: 1rem;
	max-width: 30rem;
	color: rgba(255, 255, 255, 0.8);
}

.phone-copy .btn {
	margin-top: 2rem;
}

/* ── Steps ────────────────────────────────────────────────────────────────── */

.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: 1.5rem;
}

.step {
	position: relative;
	padding: 2rem 1.75rem 1.75rem;
	border: 1px solid var(--cyw-border);
	border-radius: var(--cyw-radius-lg);
	background: var(--cyw-surface);
	box-shadow: var(--cyw-shadow-card);
}

/* The accent bar is the card's only colour commitment. */
.step::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	border-radius: var(--cyw-radius-lg) var(--cyw-radius-lg) 0 0;
	background: linear-gradient(90deg, var(--cyw-primary), rgba(12, 159, 237, 0));
}

.step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 1.1rem;
	border-radius: 0.8rem;
	background: linear-gradient(140deg, rgba(12, 159, 237, 0.2), rgba(3, 43, 76, 0.08));
	color: var(--cyw-primary);
	font-size: 1.05rem;
	font-weight: 750;
}

.step h3 {
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--cyw-navy);
	margin-bottom: 0.45rem;
}

.step p {
	font-size: 0.95rem;
	color: var(--cyw-text-muted);
}

/* ── Promise columns ──────────────────────────────────────────────────────── */

.promise-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	gap: 1.5rem;
	max-width: 56rem;
	margin: 0 auto;
}

.promise {
	padding: 2rem;
	border: 1px solid var(--cyw-border);
	border-radius: var(--cyw-radius-lg);
	background: var(--cyw-surface);
	box-shadow: var(--cyw-shadow-card);
}

.promise-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.35rem;
}

.promise-head h3 {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--cyw-navy);
}

.promise ul {
	list-style: none;
	display: grid;
	gap: 0.85rem;
}

.promise li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.96rem;
}

.promise li i {
	margin-top: 0.3rem;
	flex: none;
	width: 1.1rem;
	font-size: 0.85rem;
	text-align: center;
}

.promise li strong {
	color: var(--cyw-navy);
	font-weight: 650;
}

.promise--yes li i {
	color: var(--cyw-positive);
}

.promise--no li i {
	color: var(--cyw-negative);
}

.promise--no .insight-icon {
	background: linear-gradient(140deg, rgba(201, 55, 69, 0.16), rgba(3, 43, 76, 0.06));
	color: var(--cyw-negative);
}

/* ── Track-anything chips ─────────────────────────────────────────────────── */

.type-cloud {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.65rem;
	max-width: 52rem;
	margin: 0 auto;
}

.type-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1rem;
	border: 1px solid var(--cyw-border);
	border-radius: 999px;
	background: var(--cyw-surface);
	box-shadow: var(--cyw-shadow-sm);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--cyw-navy);
}

.type-chip i {
	color: var(--cyw-primary);
	font-size: 0.85rem;
}

.type-chip.is-liability i {
	color: var(--cyw-negative);
}

.currency-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 2.25rem;
	font-size: 0.95rem;
	color: var(--cyw-text-muted);
	text-align: center;
}

.currency-note i {
	color: var(--cyw-primary);
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.faq {
	max-width: 46rem;
	margin: 0 auto;
	display: grid;
	gap: 0.75rem;
}

.faq details {
	border: 1px solid var(--cyw-border);
	border-radius: var(--cyw-radius);
	background: var(--cyw-surface);
	box-shadow: var(--cyw-shadow-sm);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq details[open] {
	border-color: rgba(12, 159, 237, 0.45);
	box-shadow: var(--cyw-shadow-card);
}

.faq summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.35rem;
	font-size: 1rem;
	font-weight: 650;
	color: var(--cyw-navy);
	cursor: pointer;
	list-style: none;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	content: "\f078"; /* chevron-down */
	margin-left: auto;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.7rem;
	color: var(--cyw-text-faint);
	transition: transform 0.2s ease, color 0.2s ease;
}

.faq details[open] summary::after {
	transform: rotate(180deg);
	color: var(--cyw-primary);
}

.faq .faq-answer {
	padding: 0 1.35rem 1.25rem;
	color: var(--cyw-text-muted);
	font-size: 0.97rem;
}

.faq .faq-answer p + p {
	margin-top: 0.75rem;
}

/* ── Guides ───────────────────────────────────────────────────────────────── */

.guide-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	gap: 1.5rem;
}

.guide-card {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 1.75rem;
	text-decoration: none;
	color: inherit;
}

.guide-card h3 {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--cyw-navy);
}

.guide-card p {
	flex: 1;
	font-size: 0.93rem;
	line-height: 1.6;
	color: var(--cyw-text-muted);
}

.guide-read-more {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--cyw-primary);
}

.guide-read-more i {
	font-size: 0.75rem;
	margin-left: 0.3rem;
	transition: transform 0.2s ease;
}

.guide-card:hover .guide-read-more i {
	transform: translateX(4px);
}

/* ── Closing CTA ──────────────────────────────────────────────────────────── */

.cta-banner {
	text-align: center;
}

.cta-banner .section-title {
	max-width: 34rem;
	margin: 0 auto;
}

.cta-banner p {
	max-width: 34rem;
	margin: 1rem auto 2.2rem;
	font-size: 1.08rem;
	color: rgba(255, 255, 255, 0.82);
}

.cta-actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.cta-fineprint {
	margin-top: 1.5rem;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.6);
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.footer {
	background: #021e36;
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.9rem;
}

.footer-top {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
	gap: 2.5rem;
	padding-block: 3.5rem 2.5rem;
}

.footer-brand {
	display: inline-flex;
	margin-bottom: 1.1rem;
}

/* The reversed wordmark, so the footer carries the real lockup rather than the icon
   plus a line of type. Taller than the nav's copy: this is a two-line lockup, and
   below about 50px the "WEALTH" rule under it stops being legible. */
.footer-brand img {
	height: 56px;
	width: auto;
}

.footer-blurb {
	max-width: 24rem;
	line-height: 1.65;
}

.footer h4 {
	margin-bottom: 0.9rem;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.footer ul {
	list-style: none;
	display: grid;
	gap: 0.6rem;
}

.footer a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer a:hover {
	color: var(--cyw-primary);
}

.footer-bottom {
	padding-block: 1.35rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.5);
}

/* ════════════════════════════════════════════════════════════════════════════
   Guide article pages
   ════════════════════════════════════════════════════════════════════════════ */

body:has(.article-page) {
	background: var(--cyw-page);
	overflow-x: hidden;
}

.article-page {
	max-width: 48rem;
	margin: 0 auto;
	padding: 0 var(--cyw-gutter) 6rem;
}

.article-header {
	position: relative;
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
	margin-bottom: 3rem;
	padding: 5rem var(--cyw-gutter) 4rem;
	text-align: center;
	color: #fff;
	background:
		radial-gradient(60rem 26rem at 18% 0%, rgba(12, 159, 237, 0.32), transparent 66%),
		linear-gradient(150deg, #04263f 0%, #064672 55%, #042f4e 100%);
}

.article-header h1 {
	max-width: 44rem;
	margin: 0 auto 1.25rem;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	font-weight: 750;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.article-header .article-lead {
	max-width: 38rem;
	margin: 0 auto;
	font-size: 1.1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.82);
}

.article-epigraph {
	max-width: 38rem;
	margin: 0 auto 2.5rem;
	padding: 2rem 2.5rem;
	text-align: center;
	border: 1px solid var(--cyw-border);
	border-radius: var(--cyw-radius-lg);
	background: var(--cyw-surface);
	box-shadow: var(--cyw-shadow-card);
}

.article-epigraph p {
	margin-bottom: 0.75rem;
	font-size: 1.1rem;
	font-style: italic;
	line-height: 1.75;
	color: var(--cyw-navy);
}

.article-epigraph cite {
	font-size: 0.78rem;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--cyw-primary);
}

.article-body {
	padding: 2.5rem;
	border: 1px solid var(--cyw-border);
	border-radius: var(--cyw-radius-lg);
	background: var(--cyw-surface);
	box-shadow: var(--cyw-shadow-card);
}

.article-body h2 {
	margin: 2.5rem 0 1rem;
	font-size: 1.4rem;
	font-weight: 720;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--cyw-navy);
}

.article-body > h2:first-child {
	margin-top: 0;
}

.article-body p {
	margin-bottom: 1.25rem;
	font-size: 1.05rem;
	line-height: 1.8;
}

.article-body ul,
.article-body ol {
	margin: 0 0 1.25rem 1.5rem;
}

.article-body li {
	margin-bottom: 0.4rem;
	font-size: 1.05rem;
	line-height: 1.8;
}

.article-body blockquote {
	margin: 2rem 0;
	padding: 1.15rem 1.5rem;
	border-left: 4px solid var(--cyw-primary);
	border-radius: 0 var(--cyw-radius) var(--cyw-radius) 0;
	background: var(--cyw-primary-soft);
}

.article-body blockquote p {
	margin: 0;
	font-size: 1.08rem;
	font-style: italic;
	color: var(--cyw-navy);
}

/* Sits partway down a guide. The end-of-article CTA only reaches people who finish;
   most don't. */
.inline-cta {
	display: flex;
	align-items: center;
	gap: 1.15rem;
	margin: 2.5rem 0;
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--cyw-border);
	border-left: 4px solid var(--cyw-primary);
	border-radius: var(--cyw-radius);
	background: linear-gradient(120deg, var(--cyw-primary-soft) 0%, var(--cyw-surface-subtle) 70%);
}

.inline-cta-text {
	flex: 1;
	min-width: 0;
	font-size: 0.97rem;
	line-height: 1.55;
	color: var(--cyw-navy);
}

.inline-cta-text strong {
	display: block;
	font-weight: 700;
}

.inline-cta-text span {
	color: var(--cyw-text-muted);
}

.inline-cta .btn {
	flex: none;
	padding: 0.7rem 1.2rem;
	font-size: 0.92rem;
}

@media (max-width: 560px) {
	.inline-cta {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}

.article-cta {
	margin-top: 3.5rem;
	padding: 2.75rem 2rem;
	border-radius: var(--cyw-radius-lg);
	text-align: center;
	color: #fff;
	overflow: hidden;
	background:
		radial-gradient(34rem 18rem at 14% 0%, rgba(12, 159, 237, 0.36), transparent 68%),
		linear-gradient(150deg, #04263f 0%, #064672 55%, #042f4e 100%);
	box-shadow: 0 26px 50px -30px rgba(3, 43, 76, 0.85);
}

.article-cta h2 {
	font-size: 1.6rem;
	font-weight: 740;
	letter-spacing: -0.02em;
	margin-bottom: 0.75rem;
}

.article-cta p {
	max-width: 30rem;
	margin: 0 auto 1.75rem;
	color: rgba(255, 255, 255, 0.82);
}

.more-guides {
	margin-top: 4rem;
	padding-top: 3rem;
	border-top: 1px solid var(--cyw-border);
}

.more-guides h2 {
	margin-bottom: 1.75rem;
	text-align: center;
	font-size: 1.35rem;
	font-weight: 720;
	letter-spacing: -0.015em;
	color: var(--cyw-navy);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
	.hero-inner {
		gap: 2.5rem;
	}

	.showcase-panel {
		gap: 2.5rem;
	}
}

@media (max-width: 900px) {
	:root {
		--cyw-gutter: 1.5rem;
	}

	.hero-inner {
		grid-template-columns: 1fr;
		padding-block: 4rem 4.5rem;
	}

	.hero-lead {
		max-width: none;
	}

	.hero-stage {
		padding-bottom: 0;
	}

	/* Stacked, the stage spans the whole container, so the overlapping phone would
	   hang off the left edge of the screen. The phone band below carries the mobile
	   story at these widths anyway. */
	.hero-stage .phone-frame {
		display: none;
	}

	.showcase-panel {
		grid-template-columns: 1fr;
	}

	/* Copy first, then the evidence for it. */
	.showcase-shot {
		order: 2;
	}

	.phone-band {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.phone-pair {
		justify-content: center;
	}

	.footer-top {
		grid-template-columns: 1fr 1fr;
	}

	.footer-brand-col {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.section {
		padding-block: 4rem;
	}

	.nav-inner {
		gap: 0.75rem;
	}

	.nav-links,
	.nav-logo {
		display: none;
	}

	.nav-mark {
		display: block;
	}

	.nav-actions {
		margin-left: auto;
	}

	/* With the links collapsed, Log in becomes a button so returning users still
	   have a one-tap way in beside Start free. */
	.nav-login {
		padding: 0.5rem 0.9rem;
		border: 1px solid var(--cyw-border);
		border-radius: var(--cyw-radius-sm);
		color: var(--cyw-navy);
	}

	/* A 1440px-wide screenshot is unreadable at phone width; the phone shot tells
	   the same story at a size that survives. */
	.hero-stage .browser-frame {
		display: none;
	}

	/* Overrides the hide above: with the browser frame gone, the phone is the shot. */
	.hero-stage .phone-frame {
		display: block;
		position: static;
		width: 100%;
		max-width: 14rem;
		margin: 0 auto;
		transform: none;
	}

	.hero-cta-row .btn {
		width: 100%;
	}

	.phone-pair .phone-frame:last-child {
		display: none;
	}

	.phone-pair .phone-frame {
		max-width: 16rem;
	}

	.article-body,
	.article-epigraph {
		padding: 1.5rem;
	}

	.footer-top {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}