/* perennial — home
   The nine sections. Every section carries its own .pn-container, so all nine
   share one left edge. Values come from the tokens; no gradients, no shadows,
   no radius except inputs and dots.

   Lines and dots are kept for things that mean something — the plan's three
   step markers, the hairline that separates one record from the next, the nav
   dot marking the current page. There is no decorative rail down the page. */

/* ── 1 · Hero ──────────────────────────────────────────────────────────── */
.pn-hero { display: flex; align-items: center; }
.pn-hero__grid { width: 100%; align-items: center; }
.pn-hero__text { grid-column: 1 / -1; }
.pn-hero__media { grid-column: 1 / -1; order: -1; }
.pn-hero__cta { margin-top: var(--space-6); }
.pn-hero__cta .pn-btn { width: 100%; }

@media (min-width: 768px) {
	.pn-hero__text { grid-column: 1 / span 7; }
	.pn-hero__media { grid-column: 8 / span 5; order: 0; }
	.pn-hero__cta .pn-btn { width: auto; }
}

@media (min-width: 1024px) {
	.pn-hero { min-height: 80vh; }
}

@media (min-width: 1280px) {
	.pn-hero__text { grid-column: 1 / span 6; }
	.pn-hero__media { grid-column: 8 / span 5; }
}

/* ── 2 · Problem ───────────────────────────────────────────────────────── */
.pn-problem__text { grid-column: 1 / -1; }
.pn-problem__text .pn-h2 + .pn-body { margin-top: var(--space-6); }
.pn-problem__text .pn-body + .pn-body { margin-top: var(--space-4); }

@media (min-width: 768px)  { .pn-problem__text { grid-column: 1 / span 8; } }
@media (min-width: 1280px) { .pn-problem__text { grid-column: 1 / span 6; } }

/* ── 3 · Guide ─────────────────────────────────────────────────────────── */
.pn-guide__grid { align-items: start; }
.pn-guide__media { grid-column: 1 / -1; }
.pn-guide__text { grid-column: 1 / -1; }

@media (min-width: 768px) {
	.pn-guide__media { grid-column: 1 / span 4; }
	.pn-guide__text { grid-column: 6 / span 7; }
}

/* ── 4 · Plan ──────────────────────────────────────────────────────────── */
.pn-plan__head { grid-column: 1 / -1; }
.pn .pn-plan__steps {
	position: relative;
	display: grid;
	gap: var(--space-6);
	margin-top: var(--space-7);
}

/* Mobile: the line runs down the left with the text beside it. */
.pn .pn-plan__steps::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--dot-size-lg) / 2);
	width: var(--line-weight);
	background: var(--line-hair);
}
.pn .pn-plan__step {
	position: relative;
	padding-left: calc(var(--dot-size-lg) + var(--space-4));
}
.pn-plan__dot {
	position: absolute;
	left: calc(var(--dot-size-lg) / 2);
	top: calc(var(--pn-text-h3) * var(--lh-h3) / 2);
	transform: translate(-50%, -50%);
}
.pn .pn-plan__body { margin-top: var(--space-3); }

/* Tablet and up: the three steps thread onto one horizontal line. */
@media (min-width: 768px) {
	.pn .pn-plan__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--grid-gap);
	}
	.pn .pn-plan__steps::before {
		top: calc(var(--dot-size-lg) / 2);
		bottom: auto;
		left: 0;
		right: 0;
		width: auto;
		height: var(--line-weight);
	}
	.pn .pn-plan__step {
		padding-left: 0;
		padding-top: calc(var(--dot-size-lg) + var(--space-5));
	}
	.pn-plan__dot {
		left: calc(var(--dot-size-lg) / 2);
		top: calc(var(--dot-size-lg) / 2);
	}
}

/* ── 5 · Start here ────────────────────────────────────────────────────── */
.pn-start__head { grid-column: 1 / -1; }
.pn-start__head .pn-h2 { margin-top: var(--space-4); }

.pn .pn-start__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--grid-gap);
	row-gap: var(--space-6);
	margin-top: var(--space-7);
}
/* One loop in the DOM: 4 on mobile, 6 on tablet, all 8 from 1024. */
.pn .pn-start__item { display: none; }
.pn .pn-start__item:nth-child(-n + 4) { display: block; }

.pn .pn-start__more { margin-top: var(--space-6); }
.pn .pn-start__link--seasonal { display: none; }

@media (min-width: 768px) {
	.pn .pn-start__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pn .pn-start__item:nth-child(-n + 6) { display: block; }
}

@media (min-width: 1024px) {
	.pn .pn-start__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pn .pn-start__item { display: block; }
	.pn .pn-start__link--seasonal { display: inline; }
	.pn .pn-start__link--all { display: none; }
}

/* Product card: paper, 1px hairline, image bleeding to the edges. */
.pn-card {
	display: block;
	background: var(--surface-card);
	border: var(--line-weight) solid var(--surface-card-border);
	transition: opacity var(--dur-fast) var(--ease-out);
}
.pn-card:hover { opacity: var(--hover-opacity); }
.pn-card__media { overflow: hidden; }
.pn-card__media img { transition: transform var(--dur-slow) var(--ease-out); }
.pn-card:hover .pn-card__media img { transform: scale(var(--image-hover-scale)); }
.pn-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-3);
	font-size: var(--text-small);
	line-height: var(--lh-small);
}
.pn-card__price { color: var(--text-secondary); }
.pn .pn-card__price :is(del, ins) { background: none; text-decoration-thickness: var(--line-weight); }
.pn .pn-card__price ins { text-decoration: none; }
.pn-card--empty { pointer-events: none; }
.pn-card--empty .pn-card__name { color: var(--text-tertiary); }

/* ── Magazine ──────────────────────────────────────────────────────────── */
.pn-magazine__grid { align-items: center; }
.pn-magazine__text { grid-column: 1 / -1; }
.pn-magazine__media { grid-column: 1 / -1; order: -1; }
.pn .pn-magazine__article { margin-top: var(--space-6); }

@media (min-width: 768px) {
	.pn-magazine__text { grid-column: 1 / span 5; }
	.pn-magazine__media { grid-column: 7 / span 6; order: 0; }
}

/* ── Testimonial ───────────────────────────────────────────────────────── */
.pn-testimonial__figure { grid-column: 1 / -1; }
.pn .pn-testimonial__by { margin-top: var(--space-5); color: var(--text-secondary); }

@media (min-width: 768px) {
	.pn-testimonial__figure { grid-column: 1 / span 8; }
}

/* ── Membership (inverse) ──────────────────────────────────────────────── */
.pn-membership { padding-block: var(--space-9); }
.pn-membership__text { grid-column: 1 / -1; }
.pn-membership__cta { margin-top: var(--space-6); }
.pn-membership__cta .pn-btn { width: 100%; }

@media (min-width: 768px) {
	.pn-membership__text { grid-column: 1 / span 7; }
	.pn-membership__cta .pn-btn { width: auto; }
}

@media (min-width: 1024px) {
	.pn-membership { padding-block: var(--space-10); }
}

/* ── Mobile sticky CTA ─────────────────────────────────────────────────── */
.pn-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	background: var(--bg-page);
	border-top: var(--line-weight) solid var(--line-hair);
	padding: var(--space-3) var(--pn-gutter);
	padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
	visibility: hidden;
	transform: translateY(110%);
	transition:
		transform var(--dur-base) var(--ease-out),
		visibility 0s linear var(--dur-base);
}
.pn-sticky.is-visible {
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}
.pn-sticky__btn { width: 100%; }

@media (min-width: 768px) {
	.pn-sticky { display: none; }
}

/* ── Reveal (JavaScript adds .is-in) ──────────────────────────────────── */
.pn-js .pn-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
}
.pn-js .pn-reveal.is-in { opacity: 1; transform: none; }

.pn-js .pn-media img { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.pn-js .pn-media img.is-in,
.pn-js .pn-reveal.is-in .pn-media img { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.pn-js .pn-reveal { transform: none; transition: opacity var(--dur-base) linear; }
	.pn-js .pn-reveal.is-in { transform: none; }
	.pn-sticky { transition: none; }
}