/* Home page — hero, about, programs, cta */

.hero {
	position: relative;
	height: var(--vh-stable, 100svh);
	min-height: 500px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;

	/* Sizing system: one source of truth per viewport class. Every
	   breakpoint below redefines these variables; .hero__title and
	   .hero__subtitle READ them verbatim.

	   SUBTITLE = 2× SUBTITLE-SMALL, by DEFINITION. Both read off a
	   single --hero-subtitle-small-size variable so it is
	   mathematically impossible for "Accountability Partner Matching"
	   to render any larger than 2× "For Pornography Recovery…". Since
	   subtitle-small is always ≤ 1rem and title is always ≥ 2.8rem,
	   this guarantees the subtitle can never exceed the title size. */
	--hero-title-size: clamp(4.2rem, calc(7 * var(--vh-unit, 1vh)), 10rem);
	--hero-subtitle-small-size: 1rem;
	--hero-subtitle-size: calc(var(--hero-subtitle-small-size) * 2);
}

.hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Inverted parallax: the image feels pinned to the viewport while the
	   title + subtitle scroll away faster. We accomplish this by translating
	   the bg DOWN as the user scrolls (canceling out the scroll, so bg
	   appears stationary), while the text above gets a secondary translate
	   UP (making it scroll off faster than the page). */
	scale: 1.04;
	transform-origin: 50% 0%;
	will-change: translate;
}

/* Scroll-driven parallax: the compositor syncs the translate to native scroll
   position, which is the smoothest option on iOS (Lenis is disabled there).
   Multiplier is 0.15 — same gentle magnitude as .image-page parallax, so a
   fast scroll-to-top doesn't feel jarring relative to other sections.
   `translate` is animated independently of `scale` so they compose cleanly. */
@supports (animation-timeline: scroll()) {
	/* Parallax ONLY on the hero bg image — gradients and text scroll at
	   normal page speed so they move in lockstep with the next section
	   that slides up from below. */
	.hero__bg {
		animation: hero-pin linear forwards;
		animation-timeline: scroll(root);
		animation-range: 0 100vh;
	}
	@keyframes hero-pin {
		from { translate: 0 0; }
		to { translate: 0 15vh; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__bg {
		animation: none !important;
		translate: none !important;
	}
}

/* Hero image is preloaded — skip the progressive-image fade-in
   so it doesn't fight the parallax transform. */
.hero__bg progressive-image img {
	opacity: 1;
	transition: none;
}

.hero__top-gradient {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 240px;
	z-index: 1;
	/* Starts as SOLID cream — no hard line between body-cream and gradient
	   on top of the bg image. Then fades to transparent over the remaining
	   length so the trees below stay crisp. */
	background: linear-gradient(
		to bottom,
		var(--bg) 0%,
		var(--bg) 30%,
		rgba(242, 243, 239, 0.7) 55%,
		rgba(242, 243, 239, 0.2) 80%,
		transparent 100%
	);
}

.hero__bottom-gradient {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: clamp(280px, calc(34 * var(--vh-unit, 1vh)), 660px);
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(45, 74, 62, 0.95) 0%,
		rgba(45, 74, 62, 0.75) 35%,
		rgba(45, 74, 62, 0.35) 65%,
		transparent 100%
	);
}

.hero__top {
	position: relative;
	z-index: 2;
	text-align: center;
	padding-top: 88px;
}

.hero__eyebrow {
	font-family: var(--serif-sc);
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--amber);
	margin-bottom: var(--space-md);
}

.hero__title {
	display: block;
	font-size: var(--hero-title-size);
	font-weight: 300;
	color: var(--ink);
	letter-spacing: -0.04em;
	line-height: 1;
	margin-bottom: 6px;
	text-decoration: none;
}

.hero__title:hover {
	color: var(--ink);
}

.hero__tagline {
	font-size: 1.2rem;
	color: var(--ink);
	opacity: 0.5;
	line-height: 1.6;
}

.hero__bottom {
	position: absolute;
	bottom: 16px;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding: 0 var(--space-xl);
}

.hero__bottom-line {
	width: 32px;
	height: 1px;
	background: var(--divider);
	margin-bottom: var(--space-lg);
}


.hero__subtitle {
	font-size: var(--hero-subtitle-size);
	font-weight: 300;
	text-align: center;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin-bottom: 8px;
	color: var(--bg);
	opacity: 0.9;
	mix-blend-mode: difference;
	filter:
		drop-shadow(0 0 18px rgba(128, 128, 128, 0.85))
		drop-shadow(0 0 48px rgba(128, 128, 128, 0.55));
	white-space: nowrap;
}

.hero__subtitle-small {
	font-size: var(--hero-subtitle-small-size);
	color: var(--bg);
	opacity: 0.65;
	mix-blend-mode: difference;
	filter:
		drop-shadow(0 0 14px rgba(128, 128, 128, 0.8))
		drop-shadow(0 0 36px rgba(128, 128, 128, 0.5));
	text-align: center;
	line-height: 1.5;
	margin-bottom: var(--space-lg);
}

.hero__actions {
	display: flex;
	gap: 16px;
	justify-content: center;
}

/* About section */
.about__inner {
	max-width: 680px;
	text-align: center;
}

.about__line {
	width: 32px;
	height: 1px;
	/* Fade baked into the color so `.reveal.in-view > *` opacity:1 doesn't
	   override the intended 40% amber. See note on .text-page__line. */
	background: var(--divider);
	margin: 0 auto var(--space-2xl);
}

.about__actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	margin-top: var(--space-xl);
}

.about__text {
	font-size: 1.65rem;
	font-weight: 300;
	line-height: 1.55;
	color: var(--ink);
	opacity: 0.65;
	letter-spacing: -0.01em;
}

/* Text-page shell (shared across pages) */
.text-page {
	min-height: 100svh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4xl) var(--space-xl);
	background: var(--bg);
	position: relative;
}

.text-page__inner {
	max-width: 580px;
	text-align: center;
}

.text-page__label {
	font-family: var(--serif-sc);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--secondary);
	margin-bottom: var(--space-lg);
}

.text-page__headline {
	font-size: 3.2rem;
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin-bottom: var(--space-xl);
}

.text-page__line {
	width: 32px;
	height: 1px;
	background: var(--divider);
	margin: 0 auto var(--space-xl);
}

.text-page__body {
	font-size: 1.1rem;
	line-height: 2;
	color: var(--ink);
	opacity: 0.48;
}

.text-page__body strong {
	opacity: 1;
	color: var(--ink);
}

/* Image pages (full-bleed photo between text) */
.image-page {
	height: var(--vh-stable, 100svh);
	overflow: hidden;
	padding: 0;
}

.image-page img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Reveal */
.reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: all 0.9s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal.in-view {
	opacity: 1;
	transform: translateY(0);
}

/* Programs */
.programs {
	min-height: 100svh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--space-4xl) var(--space-xl);
	background: var(--white);
	position: relative;
}

.programs__header {
	text-align: center;
	margin-bottom: var(--space-3xl);
}

.programs__header h2 {
	margin-top: var(--space-md);
}

.programs__sub {
	font-size: 1rem;
	color: var(--secondary);
	margin-top: var(--space-sm);
}

.programs__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 960px;
	width: 100%;
}

.card {
	background: var(--bg);
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--border);
	text-decoration: none;
	color: var(--ink);
	transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover {
	transform: translateY(-6px);
	box-shadow: 0 32px 80px rgba(45, 74, 62, 0.1);
	color: var(--ink);
}

.card__hero {
	position: relative;
	height: 200px;
	overflow: hidden;
}

.card__hero progressive-image {
	width: 100%;
	height: 100%;
	transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover .card__hero progressive-image {
	transform: scale(1.04);
}

.card__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 30%, rgba(45, 74, 62, 0.4) 100%);
}

.card__body {
	padding: 20px 20px 24px;
}

.card__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
}

.card__dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--pencil);
}

.card h3 {
	font-size: 1.15rem;
	margin-bottom: 8px;
}

.card p {
	font-size: 0.82rem;
	color: var(--secondary);
	line-height: 1.7;
}

/* CTA */
.cta {
	min-height: 100svh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4xl) var(--space-xl);
	background: var(--bg);
	position: relative;
}

.cta__inner {
	max-width: 600px;
	text-align: center;
}

.cta h2 {
	font-size: 2.8rem;
	line-height: 1.15;
	margin-bottom: 0;
}

.cta__line {
	width: 32px;
	height: 1px;
	background: var(--divider);
	margin: var(--space-xl) auto;
}

.cta__label {
	font-family: var(--serif-sc);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--secondary);
	margin-bottom: var(--space-lg);
}

.cta__lede {
	color: var(--secondary);
	font-size: 1.05rem;
	line-height: 1.9;
	margin-bottom: var(--space-2xl);
}

.signup {
	display: flex;
	gap: 8px;
	max-width: 440px;
	margin: 0 auto;
}

.signup__input {
	flex: 1;
	padding: 14px 20px;
	border: 1px solid var(--border);
	border-radius: 100px;
	background: transparent;
	font-family: var(--serif);
	font-size: 0.9rem;
	color: var(--ink);
	transition: border-color 0.2s ease;
}

.signup__input::placeholder {
	color: var(--secondary);
	opacity: 0.5;
}

.signup__input:focus {
	outline: none;
	border-color: var(--amber);
}

.signup__btn {
	padding: 14px 28px;
	background: var(--ink);
	color: var(--bg);
	border: none;
	border-radius: 100px;
	font-family: var(--serif);
	font-size: 0.85rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.25s ease;
	white-space: nowrap;
}

.signup__btn:hover {
	background: #1e3a30;
	transform: translateY(-1px);
}

.cta__fineprint {
	margin-top: var(--space-lg);
	font-size: 0.8rem;
	color: color-mix(in srgb, var(--secondary) 60%, transparent);
}

.cta__fineprint a {
	color: var(--amber);
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s ease;
}

.cta__fineprint a:hover {
	color: #a88a35;
}

/* Stats preview */
.home-stat {
	min-height: 100svh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4xl) var(--space-xl);
	background: var(--bg);
}

.home-stat--ink {
	background: var(--ink);
}

.home-stat--ink .home-stat__num {
	color: var(--amber);
}

.home-stat--ink .home-stat__desc {
	color: var(--bg);
}

.home-stat--ink .home-stat__topic {
	color: var(--bg);
	opacity: 0.5;
}

.home-stat--ink .home-stat__cite {
	color: var(--amber);
}

.home-stat--ink .home-stat__link {
	color: var(--bg);
	border-color: rgba(242, 243, 239, 0.2);
}

.home-stat--ink .home-stat__link:hover {
	border-color: rgba(242, 243, 239, 0.4);
	color: var(--bg);
}

.home-stat__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 640px;
}

.home-stat__topic {
	font-family: var(--serif-sc);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--secondary);
	margin-bottom: var(--space-lg);
}

.home-stat__line {
	width: 32px;
	height: 1px;
	background: var(--divider);
	margin-bottom: var(--space-xl);
}

.home-stat__lead {
	font-family: var(--serif);
	font-size: 1.15rem;
	color: var(--ink);
	opacity: 0.7;
	margin-bottom: var(--space-sm);
}

.home-stat__num {
	font-family: var(--serif);
	font-size: clamp(5rem, 13vw, 9rem);
	font-weight: 300;
	font-style: italic;
	line-height: 0.85;
	letter-spacing: -0.04em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	margin-bottom: var(--space-xl);
}

.home-stat__desc {
	font-family: var(--serif);
	font-size: 1.15rem;
	line-height: 1.55;
	color: var(--ink);
	opacity: 0.7;
	max-width: 480px;
	margin-bottom: var(--space-md);
}

.home-stat__desc strong {
	font-weight: 400;
	color: var(--amber);
	font-variant-numeric: tabular-nums;
}

.home-stat__cite {
	font-style: normal;
	font-family: var(--serif-sc);
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--amber);
	opacity: 0.6;
}

.home-stat__divider {
	width: 32px;
	height: 1px;
	background: var(--divider);
	margin: var(--space-3xl) 0;
}

.home-stat__link {
	margin-top: var(--space-2xl);
}

.home-slider {
	margin: var(--space-xl) 0 var(--space-md);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	width: 100%;
	max-width: 340px;
}

.home-slider__track {
	position: relative;
	width: 100%;
	padding: 26px 0 10px;
}

.home-slider__input {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 2px;
	background: rgba(45, 74, 62, 0.18);
	border-radius: 999px;
	outline: none;
	cursor: pointer;
	position: relative;
	z-index: 2;
	margin: 0;
}

.home-slider__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--amber);
	border: 2px solid var(--white);
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(201, 168, 76, 0.45);
	transition: transform 0.2s ease;
}

.home-slider__input::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--amber);
	border: 2px solid var(--white);
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(201, 168, 76, 0.45);
	transition: transform 0.2s ease;
}

.home-slider__input:active::-webkit-slider-thumb {
	transform: scale(1.15);
}

.home-slider__tick {
	position: absolute;
	top: 22px;
	bottom: 6px;
	left: calc(4 / 15 * (100% - 18px) + 9px);
	width: 2px;
	background: var(--amber);
	opacity: 0.65;
	border-radius: 999px;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 1;
}

.home-slider__hint {
	font-family: var(--serif-sc);
	font-size: 0.55rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--secondary);
	opacity: 0.6;
	margin: 0;
	text-align: center;
}

.home-slider__avg {
	position: absolute;
	top: 4px;
	left: calc(4 / 15 * (100% - 18px) + 9px);
	transform: translateX(-50%);
	font-family: var(--serif-sc);
	font-size: 0.5rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--amber);
	opacity: 0.85;
	white-space: nowrap;
	pointer-events: none;
}

/* Responsive — hero tuning keyed off aspect-ratio (DPR-independent). See
   memory: project_hero_test_criteria.md for the criteria these values meet
   (title centered in clouds, subtitle ≥ 60% of title, shoulders below line,
   feet above buttons, etc.). */

@media (max-width: 1024px) {
	.programs__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop default — 16/10 (majority MBP/laptop). Padding tuned so title
   center lands in the middle of the cloud + white band. */
@media (min-width: 1024px) and (min-aspect-ratio: 16/10) {
	.hero__top { padding-top: calc(11 * var(--vh-unit, 1vh)); }
}

/* 16/9 and up (typical external monitors) */
@media (min-width: 1024px) and (min-aspect-ratio: 16/9) {
	.hero__top { padding-top: calc(11 * var(--vh-unit, 1vh)); }
}

/* Narrow desktop (aspect < 16/10 — e.g. 3:2, 4:3) */
@media (min-width: 1024px) and (max-aspect-ratio: 16/10) {
	.hero__top { padding-top: calc(11 * var(--vh-unit, 1vh)); }
}

/* Very short hero (≤720px tall) — tighten padding; KEEP the "Coming soon"
   eyebrow since there's usually still sky room for it. */
@media (max-height: 720px) and (min-width: 600px) {
	.hero__top { padding-top: calc(9 * var(--vh-unit, 1vh)); }
}

/* Tall viewports (4K/5K): cloud band grows, push title down proportionally. */
@media (min-height: 2000px) {
	.hero__top { padding-top: calc(13 * var(--vh-unit, 1vh)); }
}

/* Tall portrait tablets (iPad 10/11/mini, Galaxy Tab, Fold open, Tesla
   vertical) — portrait aspect. Cloud band is big, title needs extra
   padding to land in the middle AND bigger font so title_fills_clouds
   stays ≥0.18. 14vh + 8vh pair tuned to keep ratio ≈0.5 and fills ≈0.2
   across the full portrait range. */
@media (min-width: 700px) and (max-aspect-ratio: 1/1) {
	.hero__top { padding-top: calc(14 * var(--vh-unit, 1vh)); }
	.hero {
		/* Cap raised to 16rem so the title keeps filling ≥18% of the
		   cloud band on very tall portraits (1600×2560, 2000×3000). */
		--hero-title-size: clamp(4.2rem, calc(8 * var(--vh-unit, 1vh)), 16rem);
		/* Subtitle stays = 2 × subtitle-small (via the calc). */
	}
}

/* Default ALL-viewport white-band treatment — push bg image down by a few
   vh and shrink its height equally (inset + height: auto) so walker feet
   stay anchored to the container bottom (vs. the old `top: X` that left
   height: 100% and pushed feet off-screen). Cream body shows through
   above; top gradient covers the band with a soft fade into the image. */
.hero__bg {
	inset: calc(4 * var(--vh-unit, 1vh)) 0 0 0;
	height: auto;
}
.hero__top-gradient { top: 0; height: clamp(200px, calc(10 * var(--vh-unit, 1vh)), 360px); }

/* Mid/short-height and narrow viewports — bigger white band. */
@media (max-width: 1024px), (max-height: 900px) {
	.hero__bg { inset: calc(7 * var(--vh-unit, 1vh)) 0 0 0; height: auto; }
	/* Floor lowered from 240px → min(240px, 30vh) so on SHORT viewports
	   (400px tall, 500px tall, etc.) the gradient can't overflow into
	   the trees — it scales down with viewport height. */
	.hero__top-gradient { height: clamp(min(240px, calc(30 * var(--vh-unit, 1vh))), calc(18 * var(--vh-unit, 1vh)), 480px); }
}

@media (max-width: 768px), (max-height: 720px) and (min-width: 600px) and (max-width: 800px) {
	.hero__bg { inset: calc(7 * var(--vh-unit, 1vh)) 0 0 0; height: auto; }
	.hero__top-gradient { height: clamp(min(240px, calc(30 * var(--vh-unit, 1vh))), calc(18 * var(--vh-unit, 1vh)), 460px); }
	.hero__top { padding-top: calc(14 * var(--vh-unit, 1vh)); }
}

/* Short LANDSCAPE DESKTOP (769-1400 wide × ≤760 tall) — placed AFTER
   the short-mobile rule above so its 5vh padding + small inset wins
   the cascade even for viewports that also match max-height: 720.
   Covers 790×530 reported tagline-bleeds-into-trees and similar
   narrow/short landscape windows. */
@media (min-width: 769px) and (max-width: 1400px) and (max-height: 760px) and (min-aspect-ratio: 1/1) {
	.hero__bg { inset: calc(5 * var(--vh-unit, 1vh)) 0 0 0; height: auto; }
	/* Floor scales with vh so the gradient can't bleed into trees on
	   very short viewports (e.g. 998×502). */
	.hero__top-gradient { height: clamp(min(180px, calc(28 * var(--vh-unit, 1vh))), calc(14 * var(--vh-unit, 1vh)), 320px); }
	.hero__top { padding-top: calc(5 * var(--vh-unit, 1vh)); }
	.hero {
		/* Shrink title so title + tagline still fit above the treeline
		   on short-landscape viewports where the cloud band is only
		   ~150–200px tall (e.g. 998×502, 790×530). 4rem cap + 6vh
		   preferred keeps Camino compact without looking anemic. */
		--hero-title-size: clamp(2.8rem, calc(6 * var(--vh-unit, 1vh)), 4rem);
	}
}

/* Short-but-not-super-short landscape (769–1400 wide × 621–760 tall) —
   the Short LANDSCAPE DESKTOP block above was tuned for 998×502 / 790×530
   (very short), which leaves too little cloud space. At 800×659 the
   viewport has more vertical room, so bump padding + title size so the
   mark lands centered rather than jammed near the top. Regression test:
   800x659_short_landscape_window in tests/analyze_hero.py. */
@media (min-width: 769px) and (max-width: 1400px) and (min-height: 621px) and (max-height: 760px) and (min-aspect-ratio: 1/1) {
	.hero__top { padding-top: calc(9 * var(--vh-unit, 1vh)); }
	.hero {
		--hero-title-size: clamp(2.8rem, calc(7 * var(--vh-unit, 1vh)), 5rem);
	}
}

/* Mid-width portrait (~600–800 wide, aspect ≤ 5/6, e.g. 651×828 resized
   Safari window) — the default max-width:768 branch above sets 14vh
   padding, which jams Camino too near the top on taller aspects because
   the cloud band is bigger there. Bump padding + title size so the title
   lands centered in the clouds and fills ≥18%. Regression test:
   651x828_tagline_too_high in tests/analyze_hero.py. */
@media (min-width: 600px) and (max-width: 800px) and (max-aspect-ratio: 5/6) {
	.hero__top { padding-top: calc(24 * var(--vh-unit, 1vh)); }
	.hero {
		--hero-title-size: clamp(4.2rem, calc(9.5 * var(--vh-unit, 1vh)), 12rem);
	}
}

@media (max-width: 480px) {
	.hero__bg { inset: calc(8 * var(--vh-unit, 1vh)) 0 0 0; height: auto; }
	/* On narrow-portrait phones the image's visible SKY extends well
	   below the cream strip (container is taller than image, image is
	   width-fit). The gradient needs to cover the sky-colored strip of
	   the image too — otherwise you see an extra cream-ish "band"
	   continuing past where the gradient ends. Scales with viewport
	   height so the gradient reaches the treeline on short viewports. */
	.hero__top-gradient { height: min(calc(40 * var(--vh-unit, 1vh)), 440px); }
	.hero__top { padding-top: calc(16 * var(--vh-unit, 1vh)); }
}

/* Ultrawide (aspect ≥ 2:1) — the image at this aspect can't show both
   enough sky AND walker feet. Solution: push the image way down with a
   BIG cream strip + tall top-gradient at the top — the strip IS the sky.
   Title lands cleanly above the treeline regardless of how the image
   crops. Placed AFTER the default .hero__bg so it wins the cascade. */
@media (min-aspect-ratio: 2/1) {
	/* Ultrawide: NO cream band. Image fills the hero edge-to-edge.
	   Above the title, a translucent-cream gradient fades over the
	   top of the image (never fully opaque — no "bar" look) giving
	   Camino + tagline enough contrast to read. */
	.hero__bg { inset: 0; height: 100%; }
	.hero__bg progressive-image img { object-position: 47.2% 100%; }
	.hero__top-gradient {
		height: calc(38 * var(--vh-unit, 1vh));
		background: linear-gradient(
			to bottom,
			rgba(242, 243, 239, 0.88) 0%,
			rgba(242, 243, 239, 0.72) 25%,
			rgba(242, 243, 239, 0.4) 55%,
			rgba(242, 243, 239, 0.15) 80%,
			transparent 100%
		);
	}
	.hero__top { padding-top: calc(7 * var(--vh-unit, 1vh)); }
	.hero {
		--hero-title-size: clamp(2.8rem, calc(5 * var(--vh-unit, 1vh)), 5rem);
	}
	/* Diffuse trick on tagline — once the cream gradient thins toward
	   the bottom, the tagline can land over forest; mix-blend-mode +
	   drop-shadow lets it pop against either background. */
	.hero__tagline {
		mix-blend-mode: difference;
		color: var(--bg);
		opacity: 0.9;
		filter:
			drop-shadow(0 0 12px rgba(128, 128, 128, 0.75))
			drop-shadow(0 0 32px rgba(128, 128, 128, 0.45));
	}
}

/* Ultrawide (≥2:1) OR ultra-hotdog (landscape ≤ 360 tall) — at these
   aspects the cream cloud-band is too thin for the big Camino + tagline
   to sit in cleanly. Hide the in-hero title entirely; the nav's
   brand-pill handles "Camino" branding (it morphs into the scroll-up
   chevron on scroll, just like on other pages). Also drop the top
   cream gradient since there's no hero title to frame. */
@media (min-aspect-ratio: 2/1), (orientation: landscape) and (max-height: 360px) {
	.hero__title,
	.hero__eyebrow,
	.hero__tagline,
	.hero__top-gradient {
		display: none;
	}
	.hero__top {
		padding-top: 0;
		min-height: 0;
	}
	/* Image fills the hero top-to-bottom — with the gradient hidden,
	   any cream body inset would read as an un-faded solid band at
	   the top. Setting inset: 0 guarantees there's nothing to see
	   there: image only, then the bottom content. */
	.hero__bg { inset: 0; height: 100%; }
}

/* Extremely high-res displays (4K+ height) — bump title a notch so
   Camino doesn't look lost in a huge viewport. */
@media (min-height: 2000px) and (max-aspect-ratio: 2/1) {
	.hero {
		--hero-title-size: clamp(6rem, calc(8.5 * var(--vh-unit, 1vh)), 14rem);
	}
}

/* Tall portrait (aspect < 3/4 e.g. 430x932 iPhone Pro Max) — title sizing
   stays modest; just nudge padding so title sits in the cloud band. */
@media (max-width: 480px) and (max-aspect-ratio: 3/4) {
	.hero__top { padding-top: calc(14 * var(--vh-unit, 1vh)); }
}

/* Non-fullscreen desktop windows + tablets (769–1199) — the default
   2.1rem floor stretches "Accountability Partner Programs" to 60–70% of
   viewport width, making it feel cramped when the browser isn't
   maximized. Scale with width here so it stays comfortably centered. */
@media (min-width: 769px) and (max-width: 1199px) {
	/* Subtitle = 2 × subtitle-small via the base calc. Keep both at
	   their defaults; shrinking subtitle-small here is how we shrink
	   the subtitle, because the rule is rigid. */
}

@media (max-width: 768px) {
	.hero {
		/* Cap 10rem so tall phones AND 1:3-aspect portraits at width 600
		   (600×1800) can let 9vh breathe and title fills ≥18% of cloud. */
		--hero-title-size: clamp(2.8rem, calc(9 * var(--vh-unit, 1vh)), 10rem);
		/* Shrink subtitle-small on narrow phones — subtitle follows via
		   the 2× rule (so subtitle is 1.8rem ≈ 32px on mobile). */
		--hero-subtitle-small-size: 0.9rem;
	}
	.hero__subtitle {
		padding: 0 8px;
	}
	.hero__tagline { font-size: 0.95rem; }
	.hero__top { padding-top: calc(12 * var(--vh-unit, 1vh)); }
	.hero__bottom { bottom: 16px; padding: 0 var(--space-lg); }
	.hero__bottom-line { margin-bottom: var(--space-md); }
	.hero__subtitle-small { margin-bottom: var(--space-md); }
	.hero__actions { flex-direction: row; justify-content: center; gap: 10px; }

	.text-page__headline { font-size: 2.2rem; }
	.text-page__body { font-size: 1rem; line-height: 1.85; }
	.text-page { min-height: 100svh; padding: var(--space-3xl) var(--space-lg); }

	.about__actions { flex-direction: column; align-items: center; }
	.about__text { font-size: 1.2rem; line-height: 1.5; }

	.image-page { height: var(--vh-stable, 100svh); }
	.man-walking img { object-position: 55% 15%; }

	.programs__grid { grid-template-columns: 1fr; max-width: 100%; }
	.programs { min-height: 100svh; padding: var(--space-3xl) var(--space-lg); }
	.programs__header { margin-bottom: var(--space-xl); }
	.card__hero { height: 220px; }

	.cta h2 { font-size: 1.8rem; }
	.cta { min-height: 100svh; padding: var(--space-3xl) var(--space-lg); }
	.cta p { font-size: 0.95rem; }
	.signup { flex-direction: column; max-width: 320px; }
	.signup__btn { width: 100%; }
}

/* Hotdog landscape phones / ultra-short (≤450px) — hide buttons, compact.
   Must come AFTER the max-width: 768 block so its title + subtitle sizes
   actually win the cascade on viewports that match both. */
@media (orientation: landscape) and (max-height: 450px) {
	/* .hero's 500px min-height would push subtitle/buttons off a 360px
	   viewport. Drop the floor so the hero collapses to viewport height. */
	.hero { min-height: 0; }
	.hero__bottom .hero__actions { display: none; }
	/* subtitle-small stays visible — per design rule, "For Pornography
	   Recovery, Digital Detox, and More" is never hidden. */
	.hero__bottom-line { margin-bottom: 6px; }
	.hero__subtitle { margin-bottom: 0; white-space: normal; padding: 0; }
	/* Push title high so it sits above the tight cloud band on short
	   landscape viewports — 4vh tuned so title has both (a) center-in-
	   clouds and (b) ≥60px clearance above the treeline. */
	.hero__top { padding-top: calc(4 * var(--vh-unit, 1vh)); }
	.hero {
		/* Title bumped to 2.2rem floor so it still fills ≥18% of cloud
		   on very short landscape (360-420 tall). Subtitle small fixed
		   so it's subordinate but readable. */
		--hero-title-size: clamp(2.2rem, calc(8 * var(--vh-unit, 1vh)), 3rem);
		--hero-subtitle-small-size: 0.625rem;  /* subtitle = 2× = 1.25rem */
	}
	.hero__tagline { font-size: clamp(0.7rem, calc(2 * var(--vh-unit, 1vh)), 1rem); }
}