.page-main { padding-top: calc(var(--header-h) + 40px); }

.section { padding: clamp(64px, 10vh, 128px) 0; }
.section .eyebrow { color: var(--ash); margin-bottom: 24px; }
.section .hx { margin-bottom: 28px; }
.section .sub { color: #252a26; }

/* --- problem: full-bleed coherence field, copy floats over it --- */
.section--problem {
	position: relative;
	border-top: 1px solid var(--bone-hair);
	overflow: hidden;
	min-height: clamp(560px, 92vh, 920px);
	display: flex;
	align-items: center;
}
.problem-field { position: absolute; inset: 0; }
.problem-field canvas { display: block; width: 100%; height: 100%; }
.section--problem .section-inner { position: relative; z-index: 1; width: 100%; }
@media (max-width: 760px) {
	.section--problem { align-items: flex-start; padding-bottom: clamp(340px, 95vw, 480px); }
}

.page-hero { padding: clamp(48px, 8vh, 96px) 0 clamp(24px, 4vh, 48px); }

.entry { max-width: 68ch; }

/* dark sections invert the surface */
.section--dark { background: var(--coal); color: var(--bone); }
.section--dark .eyebrow { color: var(--smoke); }
.section--dark .sub { color: var(--smoke); }

/* --- two ways --- */
.two-ways-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(24px, 4vw, 56px);
	margin: clamp(32px, 5vh, 56px) 0;
}
.way { border-top: 1px solid var(--bone-hair); padding-top: 20px; }
.way-title { margin: 0 0 12px; font-size: clamp(20px, 2vw, 26px); font-weight: 700; text-transform: lowercase; }
.way p { margin: 0 0 18px; font-size: var(--fs-sub); }
.way-link {
	display: inline-flex;
	gap: 10px;
	font-weight: 600;
	font-size: 15px;
	text-transform: lowercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.two-ways-note { color: var(--ash); font-style: normal; }

/* --- product cards --- */
.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 2px;
	margin-top: clamp(32px, 5vh, 56px);
}
.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 320px;
	padding: 24px 22px;
	background: var(--bone);
	color: var(--ink);
	text-decoration: none;
	transition: background 0.3s ease, color 0.3s ease;
}
.product-card:hover, .product-card:focus-visible { background: var(--almond); }
.product-card .idx { font-size: 10px; letter-spacing: 0.14em; color: var(--ash); }
.card-name { margin: 0; font-size: clamp(20px, 1.8vw, 24px); font-weight: 800; font-stretch: 87%; text-transform: lowercase; }
.card-line { margin: 0; font-weight: 600; font-size: 15px; }
.card-copy { margin: 0; font-size: 14px; color: #252a26; flex: 1; }
.product-card .way-link { align-self: flex-start; }

/* --- platform --- */
.platform-list {
	margin: clamp(28px, 4vh, 44px) 0;
	padding: 0;
	list-style: none;
	max-width: 60ch;
}
.platform-list li {
	padding: 14px 0 14px 34px;
	border-bottom: 1px solid var(--bone-hair);
	position: relative;
	font-size: var(--fs-sub);
}
.platform-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 18px;
	height: 5px;
	background: var(--gold);
	transform: translateY(-50%);
}
.platform-list li:nth-child(2)::before { width: 8px; }

/* --- delivery steps --- */
.delivery-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(20px, 3vw, 40px);
	margin: clamp(32px, 5vh, 56px) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.step { border-top: 1px solid rgba(241, 243, 243, 0.24); padding-top: 16px; }
.step .idx { color: var(--gold); font-size: 10px; letter-spacing: 0.14em; }
.step-name { margin: 10px 0 8px; font-size: clamp(19px, 1.8vw, 24px); font-weight: 800; font-stretch: 87%; text-transform: lowercase; }
.step-copy { margin: 0; font-size: 14px; color: var(--smoke); }

/* --- transformation --- */
.section--transformation .sub { margin-bottom: 18px; }
.section--transformation .cta { margin-top: 16px; }

/* --- final cta ---
   Aquamarine band: separates the closing move from the onyx footer —
   the page descends light → aqua → onyx. */
.section--final {
	position: relative;
	overflow: hidden;
	text-align: left;
	background: var(--aqua);
	color: var(--ink);
}
.section--final .sub { color: rgba(9, 17, 1, 0.72); }
.section--final .section-inner { position: relative; z-index: 1; }
.section--final .rings-bg { color: var(--ink); }

/* --- growth rings (decorative background) ---
   Rings are born at the heart and grow outward — arbor and signal at once.
   Glacial cycle; staggered negative delays keep the field always populated. */
.rings-bg {
	position: absolute;
	top: 50%;
	right: clamp(-180px, -8vw, -60px);
	width: min(560px, 62vw);
	height: auto;
	transform: translateY(-50%);
	pointer-events: none;
	opacity: 0.35;
}
.rings-bg path {
	fill: none;
	stroke: currentColor;
	transform-origin: center;
	transform-box: fill-box;
	animation: ring-grow 26s ease-out infinite;
}
.rings-bg path:nth-child(1) { animation-delay: 0s; }
.rings-bg path:nth-child(2) { animation-delay: -3.7s; }
.rings-bg path:nth-child(3) { animation-delay: -7.4s; }
.rings-bg path:nth-child(4) { animation-delay: -11.1s; }
.rings-bg path:nth-child(5) { animation-delay: -14.9s; }
.rings-bg path:nth-child(6) { animation-delay: -18.6s; }
.rings-bg path:nth-child(7) { animation-delay: -22.3s; }

@keyframes ring-grow {
	0%   { transform: scale(0.55); opacity: 0; }
	18%  { opacity: 0.9; }
	78%  { opacity: 0.45; }
	100% { transform: scale(1.12); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.rings-bg path { animation: none; opacity: 0.5; }
}
.final-ctas { margin-top: clamp(28px, 4vh, 44px); display: flex; gap: 14px; flex-wrap: wrap; }
.cta--light { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.cta--light:hover, .cta--light:focus-visible { background: transparent; color: var(--ink); }