/* Path page — Digital Detox */

.path {
	min-height: 100svh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4xl) var(--space-xl);
	background: var(--bg);
}

/* Full-bleed hero — the image fills the viewport, with the eyebrow +
   title anchored near the bottom over a dark scrim. Nav floats over the
   top of this. */
.path-hero {
	position: relative;
	width: 100%;
	height: 100svh;
	height: 100svh;
	overflow: hidden;
}

.path-hero progressive-image {
	position: absolute;
	inset: 0;
	/* Subtle pin — mirrors the home hero. The image translates down at
	   0.15× scroll so the scrim + title slide away naturally while the
	   photo feels anchored to the viewport. */
	scale: 1.04;
	transform-origin: 50% 0%;
	will-change: translate;
}

@supports (animation-timeline: scroll()) {
	.path-hero progressive-image {
		animation: path-hero-pin linear forwards;
		animation-timeline: scroll(root);
		animation-range: 0 100vh;
	}
	@keyframes path-hero-pin {
		from { translate: 0 0; }
		to { translate: 0 15vh; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.path-hero progressive-image {
		animation: none !important;
		translate: none !important;
	}
}

.path-hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* Two-stop gradient: a soft darkening at the top to protect the nav
	   pills, plus a stronger fade at the bottom for the title block. */
	background:
		linear-gradient(to bottom, rgba(14, 20, 17, 0.35) 0%, rgba(14, 20, 17, 0) 18%),
		linear-gradient(to bottom, rgba(14, 20, 17, 0) 45%, rgba(14, 20, 17, 0.5) 72%, rgba(14, 20, 17, 0.85) 100%);
}

.path-hero__text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--space-4xl) var(--space-xl) var(--space-3xl);
	color: var(--bg);
	text-align: center;
}

.path__inner {
	max-width: 680px;
	width: 100%;
	text-align: center;
}

/* Eyebrow sits above the title on the dark scrim — uses cream ink with
   amber dots. Slightly transparent so it reads as metadata, not a peer
   of the title. */
.path__eyebrow {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-sm);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 0.55em;
	font-family: var(--serif-sc);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(242, 243, 239, 0.78);
}

.path__eyebrow li {
	display: inline-flex;
	align-items: center;
}

.path__eyebrow li + li::before {
	content: "·";
	margin-right: 0.55em;
	color: var(--amber);
	opacity: 0.9;
	font-size: 1.1em;
	line-height: 1;
}

/* Title sits on the image in cream, with a whisper of text-shadow to
   protect legibility on bright horizons behind the scrim. */
.path__title {
	font-size: 4.5rem;
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0;
	color: var(--bg);
	text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

/* Multi-paragraph body. Narrower than the outer container so lines
   stay in the ideal 60–70 char measure for reading. */
.path__desc {
	font-size: 1.025rem;
	line-height: 1.75;
	color: var(--secondary);
	text-align: left;
	max-width: 560px;
	margin: 0 auto var(--space-3xl);
}

.path__desc p + p {
	margin-top: 1.1em;
}

/* Daily rhythm — horizontal 3-step flow with amber connectors. Stacks
   vertically on narrow viewports. */
.path__daily {
	margin-top: var(--space-xl);
}

.path__daily-label {
	font-family: var(--serif-sc);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--amber);
	opacity: 0.9;
	margin-bottom: var(--space-md);
	text-align: center;
}

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

.path__daily-flow {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
}

.path__daily-step {
	flex: 0 1 180px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-sm);
}

/* Thin amber connector between steps — visually ties the flow together. */
.path__daily-connector {
	flex: 0 1 48px;
	height: 1px;
	background: var(--divider);
	margin-top: 1.15rem;   /* vertical center of the italic number */
	align-self: flex-start;
}

.path__daily-num {
	font-family: var(--serif);
	font-size: 1.8rem;
	font-weight: 400;
	font-style: italic;
	color: var(--amber);
	opacity: 0.9;
	line-height: 1;
}

.path__daily-name {
	font-family: var(--serif-sc);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
	line-height: 1.6;
	max-width: 160px;
}

@media (max-width: 768px) {
	.path {
		padding: var(--space-3xl) var(--space-lg);
	}
	.path-hero__text {
		padding: var(--space-3xl) var(--space-lg) var(--space-2xl);
	}
	.path__title {
		font-size: 2.6rem;
	}
	.path__desc {
		font-size: 1rem;
		line-height: 1.75;
		max-width: 100%;
		margin-bottom: var(--space-2xl);
	}
	.path__daily-flow {
		flex-direction: column;
		gap: var(--space-lg);
		align-items: center;
	}
	.path__daily-connector {
		display: none;
	}
	.path__daily-step {
		flex: none;
		max-width: 100%;
	}
	.path__daily-name {
		max-width: none;
	}
}

/* ═══════════════════════════════════════
   SCAFFOLD — content sections below hero.
   ═══════════════════════════════════════ */
.path-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;
}

.path-page--alt {
	background: var(--white);
}

/* Deep forest-green variant — used for the closing "Questions?" CTA so
   it lands differently from the cream/white chapter pages. */
.path-page--ink {
	background: var(--ink);
}

.path-page--ink .path-page__label {
	color: var(--amber);
	opacity: 0.95;
}

.path-page--ink .path-page__headline {
	font-style: italic;
	color: var(--bg);
}

.path-page--ink .path-page__body {
	color: rgba(242, 243, 239, 0.92);
}

.path-page--ink .path-page__rule {
	background: color-mix(in srgb, var(--amber) 75%, transparent);
}

/* Daily-rhythm flow sitting on the green variant — step names flip to
   cream (the amber numbers already read fine against the forest). */
.path-page--ink .path__daily-name {
	color: var(--bg);
	opacity: 0.9;
}

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

.path-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);
}

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

.path-page__headline {
	font-family: var(--serif);
	font-size: 2.6rem;
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--ink);
	margin: 0;
}

.path-page__body {
	font-size: 1.1rem;
	line-height: 1.75;
	color: var(--secondary);
	max-width: 560px;
	margin: 0 auto;
	text-align: left;
}

.path-page__body > p {
	margin: 0;
}

.path-page__body > p + p {
	margin-top: 1.1em;
}

/* Short amber hairline — sits between the headline and the body/flow as
   a visual pause. */
.path-page__rule {
	width: 40px;
	height: 1px;
	background: var(--divider);
	margin: var(--space-xl) auto;
}

/* When the body follows the headline directly (no rule between), keep
   the breathing room the rule used to provide. */
.path-page__headline + .path-page__body {
	margin-top: var(--space-xl);
}

/* Inline link inside a body paragraph — amber, no underline. Reads as
   a gentle pull, not a blaring CTA. */
.path-page__body-link {
	color: var(--amber);
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s ease;
}

.path-page__body-link:hover {
	color: #a88a35;
}

/* Signup form inside a path-page section — sits below the body with
   generous breathing room. Bumps the base .signup spacing for the
   larger context of a full-viewport CTA section. */
/* Bumped specificity to .signup.path-page__signup so the base
   `.signup { margin: 0 auto }` rule (later in the file) doesn't
   clobber this margin-top. */
.signup.path-page__signup {
	margin-top: var(--space-xl);
}

/* Slightly stronger border on the green variant so the input reads as
   a discrete field rather than a faint shape. */
.path-page--ink .path-page__signup .signup__input {
	border-color: rgba(242, 243, 239, 0.35);
}

/* On the green (--ink) variant, invert the form colors so the input
   and button read against the forest backdrop. */
.path-page--ink .signup__input {
	background: rgba(242, 243, 239, 0.06);
	border-color: rgba(242, 243, 239, 0.25);
	color: var(--bg);
}

.path-page--ink .signup__input::placeholder {
	color: rgba(242, 243, 239, 0.5);
}

.path-page--ink .signup__input:focus {
	border-color: var(--amber);
}

.path-page--ink .signup__btn {
	background: var(--amber);
	color: var(--ink);
}

.path-page--ink .signup__btn:hover {
	background: #d4b45a;
	color: var(--ink);
}

/* ═══════════════════════════════════════
   OTHER PROGRAMS — grid of card tiles at the bottom of each path page,
   linking to the sibling programs.
   ═══════════════════════════════════════ */

/* Wider inner container so the 2-card grid has room without feeling cramped. */
.path-page__inner--wide {
	max-width: 720px;
}

.other-paths__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	width: 100%;
}

@media (max-width: 640px) {
	.other-paths__grid {
		grid-template-columns: 1fr;
	}
}

/* Card — mirrors .card on home.css (duplicated here because home.css
   isn't loaded on path pages). Tiles link to a sibling path. */
.card {
	background: var(--bg);
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--border);
	text-decoration: none;
	color: var(--ink);
	display: block;
	text-align: left;
	transition: transform 600ms cubic-bezier(0.32, 0.72, 0, 1),
		box-shadow 600ms cubic-bezier(0.32, 0.72, 0, 1);
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 60px rgba(45, 74, 62, 0.12);
	color: var(--ink);
}

.card__hero {
	position: relative;
	height: 180px;
	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-family: var(--serif);
	font-size: 1.15rem;
	font-weight: 400;
	margin: 0 0 8px;
	color: var(--ink);
}

.card p {
	font-size: 0.85rem;
	color: var(--secondary);
	line-height: 1.65;
	margin: 0;
}

/* How-it-works steps — numbered list with hairline dividers. */
.path-steps {
	display: flex;
	flex-direction: column;
	margin-top: var(--space-xl);
	text-align: left;
}

.path-step {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: var(--space-lg);
	padding: var(--space-lg) 0;
	border-bottom: 1px solid var(--border-light);
}

.path-step:last-child {
	border-bottom: none;
}

.path-step__num {
	font-family: var(--serif);
	font-size: 1.6rem;
	font-weight: 300;
	font-style: italic;
	color: var(--amber);
	opacity: 0.75;
	line-height: 1;
}

.path-step__title {
	font-family: var(--serif);
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--ink);
	margin-bottom: var(--space-xs);
}

.path-step__body {
	font-size: 0.95rem;
	line-height: 1.8;
	color: var(--secondary);
}

/* FAQ — stacked question/answer with hairline dividers. */
.path-faq {
	margin-top: var(--space-xl);
	text-align: left;
}

.path-faq__item {
	padding: var(--space-lg) 0;
	border-bottom: 1px solid var(--border-light);
}

.path-faq__item:last-child {
	border-bottom: none;
}

.path-faq__q {
	font-family: var(--serif);
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--ink);
	margin-bottom: var(--space-sm);
}

.path-faq__a {
	font-size: 0.95rem;
	line-height: 1.85;
	color: var(--secondary);
}

@media (max-width: 768px) {
	.path-page { padding: var(--space-3xl) var(--space-lg); }
	.path-page__headline { font-size: 1.9rem; }
	.path-page__body { font-size: 1rem; }
	.path-cta__headline { font-size: 1.8rem; }
	.path-step { grid-template-columns: 48px 1fr; gap: var(--space-md); }
}


/* ═══════════════════════════════════════
   STAY-IN-THE-LOOP CTA (home.css parity)
   Lifted verbatim from /'s CTA so path pages share the same signup
   pattern. Keeping it duplicated here rather than in app.css so any
   path-specific tweaks stay scoped to the path stylesheets.
   ═══════════════════════════════════════ */
.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;
}