/* Every drop counts (journey page): page frame, hero and the closing breakdown. The pinned stage is in
   droplets-journey-stage.css. Loaded on this page only. Reads --stz-* roles from tokens.css and defines none;
   big surfaces are square, everything inside them is rounded (--stz-radius-card). Without JavaScript the page is
   this stylesheet alone: hero, three stacked chapter cards, breakdown. */

/* Lenis, only while the page uses it */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

.stz-journey {
	--j-pad: var(--stz-space-5);
	--j-max: 72rem;
	max-width: none;
	margin: 0;
	color: var(--stz-text);
	font-family: var(--stz-font);
	background: var(--stz-surface);
	overflow-x: clip;
}

.stz-journey :where(h1, h2, h3, p, dl, dd, ol) {
	margin: 0;
	padding: 0;
}

/* ---- Hero (square, white) ---- */
.stz-journey-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding: var(--stz-section-y) var(--j-pad) var(--stz-section-y-s);
	text-align: center;
	background: var(--stz-surface);
	border-radius: var(--stz-radius-surface);
}

.stz-journey-badge {
	margin-bottom: var(--stz-space-5);
	padding: var(--stz-space-1) var(--stz-space-4);
	border-radius: var(--stz-radius-pill);
	background: var(--stz-fill);
	color: var(--stz-text-2);
	font-size: var(--stz-fs-footnote);
	font-weight: var(--stz-fw-semibold);
	letter-spacing: var(--stz-track-caps);
	text-transform: uppercase;
}

.stz-journey-title {
	max-width: 18ch;
	font-size: var(--stz-fs-display-l);
	font-weight: var(--stz-fw-semibold);
	line-height: var(--stz-lh-display);
	letter-spacing: var(--stz-track-display);
}

.stz-journey-lead {
	max-width: var(--stz-measure);
	margin-top: var(--stz-space-5);
	color: var(--stz-text-2);
	font-size: var(--stz-fs-lead);
	line-height: var(--stz-lh-snug);
	letter-spacing: var(--stz-track-lead);
}

.stz-journey-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: var(--stz-gutter);
	width: 100%;
	max-width: 48rem;
	margin-top: var(--stz-space-8);
}

.stz-metric-pill {
	padding: var(--stz-space-4) var(--stz-space-5);
	border-radius: var(--stz-radius-card);
	background: var(--stz-surface-2);
	text-align: left;
}

.stz-metric-pill dt {
	color: var(--stz-text-2);
	font-size: var(--stz-fs-footnote);
}

.stz-metric-pill dd {
	margin-top: var(--stz-space-1);
	font-size: var(--stz-fs-title2);
	font-weight: var(--stz-fw-semibold);
	letter-spacing: var(--stz-track-title);
}

.stz-metric-pill--end {
	background: var(--stz-cta);
	color: var(--stz-on-cta);
}

.stz-metric-pill--end dt {
	color: var(--stz-on-cta);
}

.stz-journey-note {
	max-width: var(--stz-measure);
	margin-top: var(--stz-space-5);
	color: var(--stz-text-2);
	font-size: var(--stz-fs-footnote);
	line-height: var(--stz-lh-small);
}

.stz-scroll-prompt {
	margin-top: var(--stz-space-8);
	color: var(--stz-text-2);
	font-size: var(--stz-fs-sub);
}

.stz-scroll-prompt::after {
	display: block;
	width: 1px;
	height: var(--stz-space-8);
	margin: var(--stz-space-3) auto 0;
	background: var(--stz-hairline);
	content: "";
}

/* ---- Closing breakdown (square, white) ---- */
.stz-journey-breakdown {
	box-sizing: border-box;
	max-width: var(--j-max);
	margin: 0 auto;
	padding: var(--stz-section-y) var(--j-pad);
}

.stz-breakdown-title {
	max-width: var(--stz-measure);
	font-size: var(--stz-fs-display-s);
	font-weight: var(--stz-fw-semibold);
	line-height: var(--stz-lh-tight);
	letter-spacing: var(--stz-track-display-s);
}

.stz-breakdown-sub {
	max-width: var(--stz-measure);
	margin-top: var(--stz-space-3);
	color: var(--stz-text-2);
	font-size: var(--stz-fs-lead-s);
	line-height: var(--stz-lh-snug);
}

.stz-breakdown-grid {
	display: grid;
	gap: var(--stz-gutter);
	margin-top: var(--stz-space-8);
}

.stz-breakdown-card {
	padding: var(--stz-space-6);
	border-radius: var(--stz-radius-card);
	background: var(--stz-surface-2);
}

.stz-breakdown-card__tag {
	color: var(--stz-text-2);
	font-size: var(--stz-fs-footnote);
	font-weight: var(--stz-fw-semibold);
	letter-spacing: var(--stz-track-caps);
	text-transform: uppercase;
}

.stz-breakdown-card__heading {
	margin-top: var(--stz-space-2);
	font-size: var(--stz-fs-title2);
	font-weight: var(--stz-fw-semibold);
	letter-spacing: var(--stz-track-title);
}

/* Split bar: the deposits share comes from --share (0..1) printed with the card */
.stz-breakdown-card__ratio {
	display: grid;
	grid-template-columns: calc(var(--share, 0.5) * 100%) 1fr;
	height: 2.25rem;
	margin-top: var(--stz-space-5);
	overflow: hidden;
	border-radius: var(--stz-radius-pill);
}

.stz-ratio-box {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--stz-on-cta);
	font-size: var(--stz-fs-footnote);
	font-weight: var(--stz-fw-semibold);
}

.stz-ratio-box--dep,
.stz-key--dep {
	background: var(--stz-cta);
}

.stz-ratio-box--ret,
.stz-key--ret {
	background: var(--stz-positive-bold); /* 5.32:1 on white text */
}

.stz-key {
	display: inline-block;
	width: 0.625rem;
	height: 0.625rem;
	margin-right: var(--stz-space-2);
	border-radius: var(--stz-radius-pill);
}

.stz-breakdown-card__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stz-space-1) var(--stz-space-4);
	margin-top: var(--stz-space-3);
	color: var(--stz-text-2);
	font-size: var(--stz-fs-footnote);
}

.stz-breakdown-card__legend .stz-key:not(:first-child) {
	margin-left: var(--stz-space-2);
}

.stz-breakdown-card__desc {
	margin-top: var(--stz-space-4);
	color: var(--stz-text-2);
	font-size: var(--stz-fs-callout);
	line-height: var(--stz-lh-body);
}

.stz-journey-cta {
	display: grid;
	gap: var(--stz-space-5);
	align-items: center;
	margin-top: var(--stz-gutter);
	padding: var(--stz-space-7) var(--j-pad);
	border-radius: var(--stz-radius-surface);
	background: var(--stz-surface-2);
}

.stz-journey-cta h3 {
	font-size: var(--stz-fs-title1);
	font-weight: var(--stz-fw-semibold);
	letter-spacing: var(--stz-track-title);
}

.stz-journey-cta p {
	max-width: var(--stz-measure);
	margin-top: var(--stz-space-2);
	color: var(--stz-text-2);
	font-size: var(--stz-fs-body);
}

.stz-journey-cta .etf-site-button {
	justify-self: start;
}

.stz-journey-assumptions,
.stz-journey-disclaimer {
	max-width: var(--stz-measure);
	margin-top: var(--stz-space-5);
	color: var(--stz-text-2);
	font-size: var(--stz-fs-footnote);
	line-height: var(--stz-lh-small);
}

@media (width >= 48em) {
	.stz-journey {
		--j-pad: var(--stz-space-7);
	}

	.stz-breakdown-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.stz-journey-cta {
		grid-template-columns: 1fr auto;
	}
}

@media (prefers-contrast: more) {
	.stz-metric-pill,
	.stz-breakdown-card,
	.stz-journey-cta {
		box-shadow: var(--stz-ring-contrast);
	}
}