/* ==========================================================================
   W1 - How It Works Page
   ==========================================================================

   Editorial-confidence aesthetic inherited from page-about.php (see about.css
   for the canonical reference). W1's distinctive lifts: a horizontal
   task-lifecycle diagram, a 4-card QA rubric grid (Sitehandle's wedge), and
   a bottom inline 3-field form replacing the chatbot CTA.

   All values pull from design-system.css. No raw hex or px outside that file.
   Mobile-first responsive. BEM with w1- prefix.

   See also:
     - design brief: projects/sitehandle/seo/batch-01/w1-how-it-works/design-brief.md
     - DCD:          projects/sitehandle/seo/batch-01/w1-how-it-works/dcd.md
   ========================================================================== */

.w1-page {
	background-color: var(--color-surface);
	color: var(--color-text);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Global anchor offset so any in-page jump lands below the sticky header.
   Applies to every section with an id, including those that have their own
   scroll-margin-top declared (this gets overridden where needed). */
.w1-page section[id] {
	scroll-margin-top: var(--header-height, 88px);
}

.w1-page p {
	line-height: var(--leading-relaxed);
}

.w1-page h2 {
	font-family: var(--font-body);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: var(--leading-tight);
	color: var(--color-text);
}

.w1-page h3 {
	font-family: var(--font-body);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--color-text);
}

/* Shared eyebrow rhythm reused across sections that introduce a discrete unit
   (cards, days, etc). */
.w1-page strong {
	font-weight: 700;
}

/* ──────────────────────────────────────────────────────────────────────────
   S-W1-01 Hero
   ────────────────────────────────────────────────────────────────────────── */

.w1-hero {
	position: relative;
	padding: clamp(4.5rem, 3rem + 4vw, 7rem) var(--space-xl) clamp(3rem, 2rem + 1.5vw, 4rem);
	overflow: hidden;
	isolation: isolate;
}

.w1-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 65% 50% at 50% 75%, rgba(16, 158, 145, 0.18) 0%, transparent 65%),
		radial-gradient(ellipse 70% 45% at 50% 18%, rgba(16, 158, 145, 0.09) 0%, transparent 60%),
		radial-gradient(ellipse 80% 50% at 90% 90%, rgba(217, 119, 87, 0.07) 0%, transparent 60%);
	z-index: -2;
	pointer-events: none;
}

.w1-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='2' cy='2' r='0.7' fill='%23141413' fill-opacity='0.07'/%3E%3C/svg%3E");
	background-size: 28px 28px;
	z-index: -1;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 75%);
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 75%);
}

.w1-hero__inner {
	max-width: 920px;
	margin: 0 auto;
	text-align: center;
}

.w1-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-small);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin-bottom: var(--space-xl);
}

.w1-hero__eyebrow-dot {
	position: relative;
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

.w1-hero__eyebrow-dot::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid var(--color-brand);
	opacity: 0;
	transform: scale(1);
	animation: w1-hero-dot-pulse 2.5s ease-out infinite;
	pointer-events: none;
}

.w1-hero__title {
	font-size: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.035em;
	margin: 0 0 var(--space-md);
	text-wrap: balance;
}

.w1-hero__underline {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.w1-hero__underline::before {
	content: "";
	position: absolute;
	left: -0.02em;
	right: -0.08em;
	top: 55%;
	height: 45%;
	background-color: var(--color-brand);
	opacity: 0.4;
	z-index: -1;
	transform: skewX(-2deg) scaleX(0);
	transform-origin: left center;
	animation: w1-hero-underline-draw 0.7s var(--ease-spring) 0.5s forwards;
}

.w1-hero__sub {
	font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.4375rem);
	font-weight: 500;
	color: var(--color-text);
	margin: 0 auto var(--space-lg);
	max-width: 44ch;
	text-wrap: balance;
	letter-spacing: -0.005em;
	line-height: 1.5;
}

.w1-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	justify-content: center;
	align-items: center;
	margin-bottom: var(--space-2xl);
}

.w1-hero__cta-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1.5rem;
	background-color: var(--color-brand);
	color: var(--color-white);
	font-weight: 600;
	font-size: var(--text-body);
	border-radius: var(--radius-pill);
	text-decoration: none;
	box-shadow: var(--shadow-md);
	transition: transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-fast) var(--ease-spring), background-color var(--duration-fast) ease;
}

.w1-hero__cta-primary:hover,
.w1-hero__cta-primary:focus-visible {
	background-color: var(--color-brand-dark);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
	color: var(--color-white);
}

.w1-hero__cta-secondary {
	color: var(--color-text);
	font-weight: 600;
	font-size: var(--text-body);
	text-decoration: none;
	border-bottom: 1.5px solid var(--color-text);
	padding-bottom: 0.125rem;
	transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.w1-hero__cta-secondary:hover,
.w1-hero__cta-secondary:focus-visible {
	color: var(--color-brand);
	border-color: var(--color-brand);
}

/* Dashboard mockup centerpiece removed 2026-04-26 per Sean. Code-built UI mockups
   are off the table for Sitehandle (see feedback_no_code_built_ui_mockups.md).
   Hero is currently copy-driven; if a graphic is added, generate via Kie. */

/* Entrance animation: staggered fade + slide-up on hero children.
   Pure CSS (page-load trigger). Honors prefers-reduced-motion. */
.w1-hero__inner > * {
	opacity: 0;
	transform: translateY(12px);
	animation: w1-hero-rise 0.6s var(--ease-spring) forwards;
}

.w1-hero__inner > .w1-hero__eyebrow { animation-delay: 0ms; }
.w1-hero__inner > .w1-hero__title   { animation-delay: 80ms; }
.w1-hero__inner > .w1-hero__sub     { animation-delay: 160ms; }
.w1-hero__inner > .w1-hero__ctas    { animation-delay: 240ms; }

@keyframes w1-hero-rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes w1-hero-underline-draw {
	from {
		transform: skewX(-2deg) scaleX(0);
	}
	to {
		transform: skewX(-2deg) scaleX(1);
	}
}

@keyframes w1-hero-dot-pulse {
	0% {
		transform: scale(1);
		opacity: 0.4;
	}
	80% {
		transform: scale(1.6);
		opacity: 0;
	}
	100% {
		transform: scale(1.6);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.w1-hero__inner > * {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.w1-hero__underline::before {
		transform: skewX(-2deg) scaleX(1);
		animation: none;
	}

	.w1-hero__eyebrow-dot::before {
		animation: none;
	}

}

/* ──────────────────────────────────────────────────────────────────────────
   S-W1-02 Pain-then-solution intro
   ────────────────────────────────────────────────────────────────────────── */

.w1-pain-solution {
	position: relative;
	background:
		linear-gradient(180deg, var(--color-surface-alt) 0%, var(--color-card-surface) 100%);
	padding: clamp(4.5rem, 3rem + 3vw, 7rem) var(--space-xl);
	overflow: hidden;
	isolation: isolate;
}

.w1-pain-solution::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23141413' fill-opacity='0.05'/%3E%3C/svg%3E");
	background-size: 32px 32px;
	z-index: -1;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
	-webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
}

.w1-pain-solution__inner {
	max-width: var(--container-max);
	margin: 0 auto;
}

.w1-pain-solution__head {
	max-width: 760px;
	margin: 0 auto var(--space-2xl);
	text-align: center;
}

.w1-pain-solution__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-md);
}

.w1-pain-solution__eyebrow-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

.w1-pain-solution__title {
	font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 auto var(--space-md);
	max-width: 18ch;
	text-wrap: balance;
}

.w1-pain-solution__underline {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.w1-pain-solution__underline::before {
	content: "";
	position: absolute;
	left: -0.02em;
	right: -0.06em;
	top: 60%;
	height: 38%;
	background-color: var(--color-brand);
	opacity: 0.32;
	z-index: -1;
	transform: skewX(-2deg);
}

.w1-pain-solution__lede {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	color: var(--color-text-muted);
	margin: 0 auto;
	max-width: 56ch;
	line-height: 1.55;
}

.w1-pain-solution__pains {
	list-style: none;
	margin: 0 0 var(--space-2xl);
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

@media (min-width: 768px) {
	.w1-pain-solution__pains {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-xl);
	}
}

.w1-pain-solution__pain {
	position: relative;
	background-color: #FCFAF1;
	border: 1px solid rgba(16, 80, 75, 0.08);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 1.25rem + 0.5vw, 1.85rem);
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	overflow: hidden;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 4px rgba(20, 20, 19, 0.06),
		0 24px 60px -20px rgba(16, 80, 75, 0.22);
	transition: transform var(--duration-normal) var(--ease-spring),
	            box-shadow var(--duration-normal) var(--ease-spring),
	            border-color var(--duration-normal) ease;
}

.w1-pain-solution__pain::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 70% 60% at 0% 0%, rgba(16, 158, 145, 0.045) 0%, transparent 65%),
		radial-gradient(ellipse 50% 35% at 100% 100%, rgba(20, 20, 19, 0.03) 0%, transparent 70%);
	z-index: 0;
	pointer-events: none;
}

.w1-pain-solution__pain:hover {
	transform: translateY(-6px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 6px rgba(20, 20, 19, 0.07),
		0 32px 72px -22px rgba(16, 80, 75, 0.34);
	border-color: rgba(16, 158, 145, 0.22);
}

.w1-pain-solution__pain-top {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: 0.85rem;
}

.w1-pain-solution__pain-num {
	font-family: var(--font-body);
	font-size: clamp(2.75rem, 2.1rem + 1.8vw, 3.75rem);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.05em;
	color: var(--color-brand);
	background: linear-gradient(135deg, #14B8A6 0%, var(--color-brand) 50%, #0F766E 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.w1-pain-solution__pain-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background-color: rgba(16, 158, 145, 0.10);
	color: var(--color-brand-dark);
	flex-shrink: 0;
}

.w1-pain-solution__pain-title {
	position: relative;
	z-index: 1;
	font-size: clamp(1.25rem, 1rem + 0.5vw, 1.5rem);
	font-weight: 700;
	color: var(--color-text);
	margin: 0;
	letter-spacing: -0.012em;
	line-height: 1.22;
}

.w1-pain-solution__pain-body {
	position: relative;
	z-index: 1;
	font-size: 1rem;
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.55;
}

/* Full-bleed solution band: section-level (sibling of __inner), edge-to-edge.
   Solid dark teal with a subtle vignette (no skeuomorphic gradient). H3 fixed
   with `h3.` selector to beat the global `.w1-page h3` color rule. */
.w1-pain-solution__solution {
	position: relative;
	background-color: #0E4945;
	color: var(--color-white);
	margin-top: clamp(2.5rem, 1.5rem + 2vw, 4rem);
	padding: clamp(3rem, 2rem + 2vw, 4.5rem) var(--space-xl);
	overflow: hidden;
	isolation: isolate;
}

.w1-pain-solution__solution::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 50% 90% at 50% -20%, rgba(94, 234, 212, 0.10) 0%, transparent 60%);
	z-index: -1;
	pointer-events: none;
}

.w1-pain-solution__solution::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
	pointer-events: none;
}

.w1-pain-solution__solution-inner {
	position: relative;
	max-width: 920px;
	margin: 0 auto;
}

.w1-pain-solution__solution-eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #5EEAD4;
	margin: 0 0 1rem;
}

h3.w1-pain-solution__solution-title {
	font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.625rem);
	font-weight: 800;
	letter-spacing: -0.022em;
	line-height: 1.15;
	color: var(--color-white);
	margin: 0 0 var(--space-xl);
	max-width: 26ch;
	text-wrap: balance;
}

.w1-pain-solution__solution-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 1rem;
}

.w1-pain-solution__solution-item {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.86);
	line-height: 1.5;
}

.w1-pain-solution__solution-item strong {
	color: var(--color-white);
	font-weight: 700;
}

.w1-pain-solution__solution-check {
	flex-shrink: 0;
	color: #5EEAD4;
	margin-top: 2px;
}

/* ──────────────────────────────────────────────────────────────────────────
   S-W1-03 Lifecycle visualization (vertical timeline with center spine)

   Structural primitive: vertical spine running down the center of the
   container with step markers as circles on the spine and cards alternating
   left/right of the spine on desktop. Mobile collapses the spine to the
   left edge with all cards aligned right of it. Different from the rejected
   horizontal-pill-chain primitive (the previous iteration's repeated source
   of issues) because each step now has its own vertical breathing room.
   ────────────────────────────────────────────────────────────────────────── */

.w1-lifecycle {
	position: relative;
	background-color: var(--color-surface);
	padding: clamp(4.5rem, 3rem + 3vw, 7rem) var(--space-xl);
	overflow: hidden;
	isolation: isolate;
}

.w1-lifecycle::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23141413' fill-opacity='0.05'/%3E%3C/svg%3E");
	background-size: 32px 32px;
	z-index: -1;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
}

.w1-lifecycle__inner {
	max-width: 1080px;
	margin: 0 auto;
}

.w1-lifecycle__head {
	max-width: 720px;
	margin: 0 auto var(--space-2xl);
	text-align: center;
}

.w1-lifecycle__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-md);
}

.w1-lifecycle__eyebrow-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

h2.w1-lifecycle__title {
	font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 auto var(--space-md);
	max-width: 18ch;
	text-wrap: balance;
	color: var(--color-text);
}

.w1-lifecycle__lede {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	color: var(--color-text-muted);
	margin: 0 auto;
	max-width: 52ch;
	line-height: 1.55;
}

/* Timeline container: vertical center spine */
.w1-lifecycle__timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.w1-lifecycle__timeline::before {
	content: "";
	position: absolute;
	top: 28px;
	bottom: 28px;
	left: 28px;
	width: 2px;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(16, 158, 145, 0.4) 6%,
		rgba(16, 158, 145, 0.4) 94%,
		transparent 100%);
	border-radius: 1px;
	z-index: 0;
}

/* Step row */
.w1-lifecycle__step {
	position: relative;
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: var(--space-lg);
	margin-bottom: var(--space-xl);
}

.w1-lifecycle__step:last-child {
	margin-bottom: 0;
}

/* Marker circle on the spine */
.w1-lifecycle__marker {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, #14B8A6 0%, var(--color-brand) 50%, #0F766E 100%);
	color: var(--color-white);
	box-shadow:
		0 0 0 5px var(--color-surface),
		0 0 0 6px rgba(16, 158, 145, 0.20),
		0 8px 20px -8px rgba(16, 80, 75, 0.45);
	flex-shrink: 0;
}

.w1-lifecycle__marker--alt {
	background: linear-gradient(135deg, #0E4945 0%, #0A6B62 50%, #074E47 100%);
	box-shadow:
		0 0 0 5px var(--color-surface),
		0 0 0 6px rgba(7, 78, 71, 0.30),
		0 8px 20px -8px rgba(7, 78, 71, 0.55);
}

.w1-lifecycle__marker-num {
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

/* Card */
.w1-lifecycle__card {
	position: relative;
	background-color: var(--color-card-surface);
	border: 1px solid rgba(16, 80, 75, 0.08);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 1.25rem + 0.5vw, 1.85rem);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 4px rgba(20, 20, 19, 0.05),
		0 18px 48px -20px rgba(16, 80, 75, 0.18);
	transition: transform var(--duration-normal) var(--ease-spring),
	            box-shadow var(--duration-normal) var(--ease-spring),
	            border-color var(--duration-normal) ease;
}

.w1-lifecycle__card:hover {
	transform: translateY(-3px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 6px rgba(20, 20, 19, 0.07),
		0 28px 60px -22px rgba(16, 80, 75, 0.30);
	border-color: rgba(16, 158, 145, 0.20);
}

.w1-lifecycle__card--alt {
	background-color: #0E4945;
	border-color: rgba(255, 255, 255, 0.10);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.10) inset,
		0 24px 60px -24px rgba(7, 78, 71, 0.55);
}

.w1-lifecycle__card--alt:hover {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.14) inset,
		0 32px 72px -24px rgba(7, 78, 71, 0.65);
	border-color: rgba(94, 234, 212, 0.30);
}

/* Chips */
.w1-lifecycle__chip {
	display: inline-block;
	padding: 0.22rem 0.65rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border-radius: var(--radius-pill);
	margin-bottom: 0.85rem;
}

.w1-lifecycle__chip--you {
	color: var(--color-warning-dark);
	background-color: var(--color-warning-subtle);
}

.w1-lifecycle__chip--we {
	color: var(--color-brand-dark);
	background-color: var(--color-brand-subtle);
}

.w1-lifecycle__chip--alt {
	color: var(--color-card-surface);
	background-color: rgba(255, 255, 255, 0.16);
	letter-spacing: 0.18em;
}

/* Content */
h3.w1-lifecycle__step-name {
	font-size: clamp(1.25rem, 1rem + 0.5vw, 1.5rem);
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 0.5rem;
	letter-spacing: -0.012em;
	line-height: 1.22;
}

.w1-lifecycle__card--alt h3.w1-lifecycle__step-name {
	color: var(--color-white);
}

.w1-lifecycle__step-body {
	font-size: 1rem;
	color: var(--color-text-muted);
	margin: 0 0 0.85rem;
	line-height: 1.55;
}

.w1-lifecycle__card--alt .w1-lifecycle__step-body {
	color: rgba(255, 255, 255, 0.78);
}

.w1-lifecycle__time {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-mono);
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--color-brand-dark);
	letter-spacing: -0.005em;
	padding: 0.2rem 0.55rem;
	background-color: rgba(16, 158, 145, 0.10);
	border: 1px solid rgba(16, 158, 145, 0.18);
	border-radius: var(--radius-pill);
}

.w1-lifecycle__card--alt .w1-lifecycle__time {
	color: #5EEAD4;
	background-color: rgba(94, 234, 212, 0.12);
	border-color: rgba(94, 234, 212, 0.25);
}

/* Desktop: alternating layout with center spine */
@media (min-width: 880px) {
	.w1-lifecycle__timeline::before {
		left: 50%;
		transform: translateX(-1px);
	}

	.w1-lifecycle__step {
		grid-template-columns: 1fr 56px 1fr;
		gap: 0;
		margin-bottom: var(--space-2xl);
	}

	.w1-lifecycle__step--right .w1-lifecycle__marker {
		grid-column: 2;
	}

	.w1-lifecycle__step--right .w1-lifecycle__card {
		grid-column: 3;
		margin-left: var(--space-xl);
	}

	.w1-lifecycle__step--right .w1-lifecycle__card::before {
		content: "";
		position: absolute;
		left: calc(var(--space-xl) * -1);
		top: 28px;
		width: var(--space-xl);
		height: 2px;
		background: linear-gradient(90deg, rgba(16, 158, 145, 0.4) 0%, transparent 100%);
		z-index: 0;
	}

	.w1-lifecycle__step--left .w1-lifecycle__marker {
		grid-column: 2;
	}

	.w1-lifecycle__step--left .w1-lifecycle__card {
		grid-column: 1;
		grid-row: 1;
		margin-right: var(--space-xl);
	}

	.w1-lifecycle__step--left .w1-lifecycle__card::after {
		content: "";
		position: absolute;
		right: calc(var(--space-xl) * -1);
		top: 28px;
		width: var(--space-xl);
		height: 2px;
		background: linear-gradient(270deg, rgba(16, 158, 145, 0.4) 0%, transparent 100%);
		z-index: 0;
	}
}

/* S-W1-04 dropped 2026-04-26 per Sean: subsumed into FAQ. */

/* ──────────────────────────────────────────────────────────────────────────
   S-W1-05 The QA rubric (the wedge)
   ────────────────────────────────────────────────────────────────────────── */

.w1-rubric {
	position: relative;
	padding: clamp(5rem, 4rem + 4vw, 8rem) var(--space-xl) var(--space-section);
	background: linear-gradient(180deg, var(--color-brand-subtle) 0%, var(--color-surface) 100%);
	overflow: hidden;
	isolation: isolate;
}

.w1-rubric::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23141413' fill-opacity='0.04'/%3E%3C/svg%3E");
	background-size: 32px 32px;
	z-index: -1;
	pointer-events: none;
}

.w1-rubric__inner {
	max-width: 1080px;
	margin: 0 auto;
}

.w1-rubric__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-md);
	width: 100%;
	justify-content: center;
}

.w1-rubric__eyebrow-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

h2.w1-rubric__title {
	font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	text-align: center;
	max-width: 22ch;
	margin: 0 auto var(--space-lg);
	text-wrap: balance;
	color: var(--color-text);
}

.w1-rubric__intro {
	max-width: 640px;
	margin: 0 auto var(--space-2xl);
	text-align: center;
}

.w1-rubric__intro p {
	margin: 0 0 var(--space-md);
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	color: var(--color-text-muted);
	line-height: 1.55;
}

.w1-rubric__intro a {
	color: var(--color-brand-dark);
	font-weight: 600;
	border-bottom: 1px solid rgba(16, 158, 145, 0.4);
}

.w1-rubric__intro a:hover {
	border-bottom-color: var(--color-brand);
}

/* 2-column grid on tablet/desktop. Previous 4-column at 1200+ caused
   text-cramping with 5 dense check items per card. 2x2 gives each card
   ~520-540px which holds the content cleanly. */
.w1-rubric__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	margin: 0 0 var(--space-2xl);
}

@media (min-width: 768px) {
	.w1-rubric__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-xl);
	}
}

.w1-rubric__card {
	position: relative;
	background-color: var(--color-card-surface);
	border: 1px solid rgba(16, 80, 75, 0.08);
	border-radius: var(--radius-lg);
	padding: clamp(1.75rem, 1.4rem + 0.6vw, 2.25rem);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 4px rgba(20, 20, 19, 0.05),
		0 20px 50px -22px rgba(16, 80, 75, 0.20);
	transition: transform var(--duration-normal) var(--ease-spring),
	            box-shadow var(--duration-normal) var(--ease-spring),
	            border-color var(--duration-normal) ease;
	overflow: hidden;
}

.w1-rubric__card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 45% at 100% 0%, rgba(16, 158, 145, 0.05) 0%, transparent 65%);
	z-index: 0;
	pointer-events: none;
}

.w1-rubric__card:hover {
	transform: translateY(-4px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 6px rgba(20, 20, 19, 0.07),
		0 32px 64px -22px rgba(16, 80, 75, 0.32);
	border-color: rgba(16, 158, 145, 0.20);
}

.w1-rubric__card-icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background-color: rgba(16, 158, 145, 0.10);
	color: var(--color-brand-dark);
	margin-bottom: var(--space-md);
}

h3.w1-rubric__card-title {
	position: relative;
	z-index: 1;
	font-size: clamp(1.375rem, 1.1rem + 0.6vw, 1.625rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--color-text);
	margin: 0 0 var(--space-md);
	padding-bottom: 0;
	border-bottom: 0;
	display: block;
}

.w1-rubric__checks {
	position: relative;
	z-index: 1;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.w1-rubric__checks li {
	position: relative;
	padding-left: 1.85rem;
	font-size: 0.9875rem;
	color: var(--color-text);
	line-height: 1.5;
}

.w1-rubric__checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: rgba(16, 158, 145, 0.14);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D7D73' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 12px 12px;
	background-position: center;
}

/* "and many more" closer to each rubric card list */
.w1-rubric__checks li.w1-rubric__checks-more {
	font-style: italic;
	color: var(--color-text-muted);
	opacity: 0.78;
	font-size: 0.9rem;
}

.w1-rubric__checks li.w1-rubric__checks-more::before {
	background-image: none;
	background-color: transparent;
	width: 14px;
	height: 14px;
	top: 0.55em;
	left: 3px;
	border-top: 1px solid rgba(16, 158, 145, 0.5);
	border-radius: 0;
}

.w1-rubric__close {
	text-align: center;
	font-size: var(--text-h4);
	font-weight: 600;
	color: var(--color-text);
	max-width: 56ch;
	margin: 0 auto;
	padding: var(--space-lg) var(--space-xl);
	background-color: var(--color-card-surface);
	border-left: 4px solid var(--color-brand);
	border-radius: var(--radius-md);
	text-wrap: balance;
	box-shadow: var(--shadow-sm);
}

/* S-W1-06 dropped 2026-04-26 per Sean: operational nitty-gritty hurts more than helps on a marketing page. */

/* ──────────────────────────────────────────────────────────────────────────
   S-W1-07 Communication model
   ────────────────────────────────────────────────────────────────────────── */

.w1-communication {
	position: relative;
	background-color: var(--color-surface-alt);
	padding: clamp(4.5rem, 3rem + 3vw, 7rem) var(--space-xl);
	overflow: hidden;
	isolation: isolate;
}

.w1-communication::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23141413' fill-opacity='0.05'/%3E%3C/svg%3E");
	background-size: 32px 32px;
	z-index: -1;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
}

.w1-communication__inner {
	max-width: 1080px;
	margin: 0 auto;
}

.w1-communication__head {
	max-width: 720px;
	margin: 0 auto var(--space-2xl);
	text-align: center;
}

.w1-communication__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-md);
}

.w1-communication__eyebrow-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

h2.w1-communication__title {
	font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 auto var(--space-md);
	max-width: 18ch;
	text-wrap: balance;
	color: var(--color-text);
}

.w1-communication__lede {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	color: var(--color-text-muted);
	margin: 0 auto;
	max-width: 50ch;
	line-height: 1.55;
}

/* Featured Dashboard panel — full-bleed dark teal, mirrors the Solution panel
   visual language so "Dashboard = system of record" reads as a primary moment. */
.w1-communication__featured {
	position: relative;
	background-color: var(--color-brand-dark);
	background-image:
		radial-gradient(ellipse 80% 70% at 0% 0%, rgba(20, 184, 166, 0.18) 0%, transparent 60%),
		radial-gradient(ellipse 70% 60% at 100% 100%, rgba(15, 118, 110, 0.22) 0%, transparent 60%);
	border-radius: var(--radius-xl);
	padding: clamp(2rem, 1.5rem + 1.5vw, 3rem);
	color: var(--color-white);
	max-width: 920px;
	margin: 0 auto var(--space-xl);
	overflow: hidden;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.08) inset,
		0 2px 4px rgba(0, 0, 0, 0.10),
		0 24px 64px -24px rgba(15, 118, 110, 0.50);
}

.w1-communication__featured::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E");
	background-size: 32px 32px;
	opacity: 0.6;
	pointer-events: none;
}

.w1-communication__featured-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	background-color: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	padding: 0.4rem 0.85rem;
	margin-bottom: var(--space-md);
}

.w1-communication__featured-grid {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
	align-items: start;
}

.w1-communication__featured-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 18px;
	background-color: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.24);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.18) inset,
		0 12px 28px -12px rgba(0, 0, 0, 0.35);
	color: var(--color-white);
	flex-shrink: 0;
}

.w1-communication__featured-copy {
	min-width: 0;
}

h3.w1-communication__featured-title {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--color-white);
	margin: 0 0 0.5rem;
	line-height: 1.15;
}

.w1-communication__featured-text {
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	color: rgba(255, 255, 255, 0.86);
	margin: 0;
	line-height: 1.55;
	max-width: 56ch;
}

@media (max-width: 540px) {
	.w1-communication__featured-grid {
		grid-template-columns: 1fr;
	}
}

.w1-communication__or {
	max-width: 720px;
	margin: 0 auto;
	margin-top: clamp(1.5rem, 1rem + 1vw, 2.25rem);
	margin-bottom: clamp(1.5rem, 1rem + 1vw, 2.25rem);
	text-align: center;
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.w1-communication__or::before,
.w1-communication__or::after {
	content: "";
	flex: 1;
	height: 1.5px;
	background-color: rgba(16, 80, 75, 0.18);
}

.w1-communication__channels {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 720px) {
	.w1-communication__channels {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-lg);
	}
}

.w1-communication__channel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	background-color: var(--color-card-surface);
	border: 1px solid rgba(16, 80, 75, 0.08);
	border-radius: var(--radius-lg);
	padding: clamp(1.1rem, 1rem + 0.3vw, 1.4rem);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 4px rgba(20, 20, 19, 0.05),
		0 14px 36px -18px rgba(16, 80, 75, 0.16);
	transition: transform var(--duration-normal) var(--ease-spring),
	            box-shadow var(--duration-normal) var(--ease-spring),
	            border-color var(--duration-normal) ease;
	overflow: hidden;
}

.w1-communication__channel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 45% at 100% 0%, rgba(16, 158, 145, 0.06) 0%, transparent 65%);
	z-index: 0;
	pointer-events: none;
}

.w1-communication__channel:hover {
	transform: translateY(-3px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 6px rgba(20, 20, 19, 0.07),
		0 22px 48px -20px rgba(16, 80, 75, 0.26);
	border-color: rgba(16, 158, 145, 0.20);
}

.w1-communication__channel-icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background-color: rgba(16, 158, 145, 0.10);
	color: var(--color-brand-dark);
	flex-shrink: 0;
}

.w1-communication__channel-copy {
	position: relative;
	z-index: 1;
	min-width: 0;
}

h3.w1-communication__channel-name {
	font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--color-text);
	margin: 0 0 0.18rem;
	line-height: 1.2;
}

.w1-communication__channel-text {
	font-size: 0.9375rem;
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.45;
}

/* ──────────────────────────────────────────────────────────────────────────
   S-W1-08 Analytics report description
   ────────────────────────────────────────────────────────────────────────── */

.w1-analytics {
	position: relative;
	background-color: var(--color-surface);
	padding: clamp(4.5rem, 3rem + 3vw, 7rem) var(--space-xl);
	overflow: hidden;
	isolation: isolate;
}

.w1-analytics::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23141413' fill-opacity='0.05'/%3E%3C/svg%3E");
	background-size: 32px 32px;
	z-index: -1;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
}

.w1-analytics__inner {
	max-width: 920px;
	margin: 0 auto;
}

.w1-analytics__head {
	max-width: 720px;
	margin: 0 auto var(--space-2xl);
	text-align: center;
}

.w1-analytics__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-md);
}

.w1-analytics__eyebrow-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

h2.w1-analytics__title {
	font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 auto var(--space-md);
	max-width: 22ch;
	text-wrap: balance;
	color: var(--color-text);
}

.w1-analytics__intro {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	color: var(--color-text-muted);
	margin: 0 auto;
	max-width: 60ch;
	line-height: 1.55;
}

.w1-analytics__intro a,
.w1-analytics__tier-link {
	color: var(--color-brand-dark);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(16, 158, 145, 0.4);
}

.w1-analytics__intro a:hover,
.w1-analytics__intro a:focus-visible {
	border-bottom-color: var(--color-brand);
}

.w1-analytics__deliverables {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-md);
}

.w1-analytics__deliverable {
	position: relative;
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: var(--space-lg);
	align-items: flex-start;
	background-color: var(--color-card-surface);
	border: 1px solid rgba(16, 80, 75, 0.08);
	border-radius: var(--radius-lg);
	padding: clamp(1.25rem, 1rem + 0.5vw, 1.65rem) clamp(1.5rem, 1.25rem + 0.5vw, 1.85rem);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 4px rgba(20, 20, 19, 0.04),
		0 14px 36px -18px rgba(16, 80, 75, 0.16);
	transition: transform var(--duration-normal) var(--ease-spring),
	            box-shadow var(--duration-normal) var(--ease-spring),
	            border-color var(--duration-normal) ease;
	overflow: hidden;
}

.w1-analytics__deliverable::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 50% 40% at 100% 0%, rgba(16, 158, 145, 0.05) 0%, transparent 65%);
	z-index: 0;
	pointer-events: none;
}

.w1-analytics__deliverable:hover {
	transform: translateY(-2px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 6px rgba(20, 20, 19, 0.06),
		0 22px 48px -18px rgba(16, 80, 75, 0.26);
	border-color: rgba(16, 158, 145, 0.18);
}

.w1-analytics__deliverable--featured {
	background:
		radial-gradient(ellipse 60% 80% at 100% 0%, rgba(94, 234, 212, 0.18) 0%, transparent 55%),
		linear-gradient(135deg, #0E4945 0%, #0A6B62 60%, #074E47 100%);
	border-color: rgba(255, 255, 255, 0.10);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.14) inset,
		0 24px 56px -22px rgba(7, 78, 71, 0.50);
}

.w1-analytics__deliverable--featured::before {
	display: none;
}

.w1-analytics__deliverable--featured:hover {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.18) inset,
		0 32px 72px -22px rgba(7, 78, 71, 0.60);
	border-color: rgba(94, 234, 212, 0.30);
}

.w1-analytics__deliverable-icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background-color: rgba(16, 158, 145, 0.10);
	color: var(--color-brand-dark);
	flex-shrink: 0;
}

.w1-analytics__deliverable--featured .w1-analytics__deliverable-icon {
	background-color: rgba(94, 234, 212, 0.18);
	color: #5EEAD4;
}

.w1-analytics__deliverable-content {
	position: relative;
	z-index: 1;
	min-width: 0;
}

h3.w1-analytics__deliverable-title {
	font-size: clamp(1.125rem, 1rem + 0.3vw, 1.3125rem);
	font-weight: 800;
	letter-spacing: -0.012em;
	color: var(--color-text);
	margin: 0 0 0.4rem;
	line-height: 1.25;
}

.w1-analytics__deliverable--featured h3.w1-analytics__deliverable-title {
	color: var(--color-white);
}

.w1-analytics__deliverable-body {
	font-size: 1rem;
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.5;
}

.w1-analytics__deliverable--featured .w1-analytics__deliverable-body {
	color: rgba(255, 255, 255, 0.78);
}

/* ──────────────────────────────────────────────────────────────────────────
   S-W1-09 Scale tier preview
   ────────────────────────────────────────────────────────────────────────── */

.w1-scale {
	position: relative;
	background-color: var(--color-surface-alt);
	padding: clamp(4.5rem, 3rem + 3vw, 7rem) var(--space-xl);
	overflow: hidden;
	isolation: isolate;
}

.w1-scale::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23141413' fill-opacity='0.05'/%3E%3C/svg%3E");
	background-size: 32px 32px;
	z-index: -1;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
}

.w1-scale__inner {
	max-width: 920px;
	margin: 0 auto;
}

.w1-scale__head {
	max-width: 720px;
	margin: 0 auto var(--space-2xl);
	text-align: center;
}

.w1-scale__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-md);
}

.w1-scale__eyebrow-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

h2.w1-scale__title {
	font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 auto var(--space-md);
	max-width: 22ch;
	text-wrap: balance;
	color: var(--color-text);
}

.w1-scale__intro {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	color: var(--color-text-muted);
	margin: 0 auto;
	max-width: 60ch;
	line-height: 1.55;
}

.w1-scale__intro a {
	color: var(--color-brand-dark);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(16, 158, 145, 0.4);
}

.w1-scale__intro a:hover {
	border-bottom-color: var(--color-brand);
}

.w1-scale__upgrades {
	list-style: none;
	margin: 0 0 var(--space-xl);
	padding: 0;
	display: grid;
	gap: var(--space-md);
}

@media (min-width: 768px) {
	.w1-scale__upgrades {
		grid-template-columns: repeat(2, 1fr);
	}

	.w1-scale__upgrade--featured {
		grid-column: 1 / -1;
	}
}

.w1-scale__upgrade {
	position: relative;
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: var(--space-md);
	align-items: flex-start;
	background-color: var(--color-card-surface);
	border: 1px solid rgba(16, 80, 75, 0.08);
	border-radius: var(--radius-lg);
	padding: clamp(1.25rem, 1rem + 0.5vw, 1.5rem);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 4px rgba(20, 20, 19, 0.04),
		0 14px 36px -18px rgba(16, 80, 75, 0.16);
	transition: transform var(--duration-normal) var(--ease-spring),
	            box-shadow var(--duration-normal) var(--ease-spring),
	            border-color var(--duration-normal) ease;
	overflow: hidden;
}

.w1-scale__upgrade:hover {
	transform: translateY(-2px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 6px rgba(20, 20, 19, 0.06),
		0 22px 48px -18px rgba(16, 80, 75, 0.26);
	border-color: rgba(16, 158, 145, 0.18);
}

.w1-scale__upgrade--featured {
	background:
		radial-gradient(ellipse 60% 80% at 100% 0%, rgba(94, 234, 212, 0.18) 0%, transparent 55%),
		linear-gradient(135deg, #0E4945 0%, #0A6B62 60%, #074E47 100%);
	border-color: rgba(255, 255, 255, 0.10);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.14) inset,
		0 24px 56px -22px rgba(7, 78, 71, 0.50);
}

.w1-scale__upgrade--featured:hover {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.18) inset,
		0 32px 72px -22px rgba(7, 78, 71, 0.60);
	border-color: rgba(94, 234, 212, 0.30);
}

.w1-scale__upgrade-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background-color: rgba(16, 158, 145, 0.10);
	color: var(--color-brand-dark);
	flex-shrink: 0;
}

.w1-scale__upgrade--featured .w1-scale__upgrade-icon {
	background-color: rgba(94, 234, 212, 0.18);
	color: #5EEAD4;
}

.w1-scale__upgrade-content {
	min-width: 0;
}

h3.w1-scale__upgrade-title {
	font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.25rem);
	font-weight: 800;
	letter-spacing: -0.012em;
	color: var(--color-text);
	margin: 0 0 0.3rem;
	line-height: 1.25;
}

.w1-scale__upgrade--featured h3.w1-scale__upgrade-title {
	color: var(--color-white);
}

.w1-scale__upgrade-body {
	font-size: 0.9875rem;
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.5;
}

.w1-scale__upgrade--featured .w1-scale__upgrade-body {
	color: rgba(255, 255, 255, 0.78);
}

.w1-scale__close {
	font-size: 1.0625rem;
	color: var(--color-text);
	text-align: center;
	max-width: 60ch;
	margin: 0 auto;
	line-height: 1.55;
}

.w1-scale__link {
	color: var(--color-brand-dark);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid rgba(16, 158, 145, 0.4);
	white-space: nowrap;
}

.w1-scale__link:hover,
.w1-scale__link:focus-visible {
	color: var(--color-brand);
	border-bottom-color: var(--color-brand);
}

/* ──────────────────────────────────────────────────────────────────────────
   S-W1-10 Onboarding day cards
   ────────────────────────────────────────────────────────────────────────── */

.w1-onboarding {
	position: relative;
	background-color: var(--color-surface);
	padding: clamp(4.5rem, 3rem + 3vw, 7rem) var(--space-xl);
	overflow: hidden;
	isolation: isolate;
}

.w1-onboarding::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23141413' fill-opacity='0.05'/%3E%3C/svg%3E");
	background-size: 32px 32px;
	z-index: -1;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
}

.w1-onboarding__inner {
	max-width: 1080px;
	margin: 0 auto;
}

.w1-onboarding__head {
	max-width: 720px;
	margin: 0 auto var(--space-2xl);
	text-align: center;
}

.w1-onboarding__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-md);
}

.w1-onboarding__eyebrow-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

h2.w1-onboarding__title {
	font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 auto var(--space-md);
	max-width: 18ch;
	text-wrap: balance;
	color: var(--color-text);
}

.w1-onboarding__sub {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	color: var(--color-text-muted);
	margin: 0 auto;
	max-width: 56ch;
	line-height: 1.55;
}

.w1-onboarding__days {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	position: relative;
}

@media (min-width: 768px) {
	.w1-onboarding__days {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.w1-onboarding__days {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-md);
	}
}

.w1-onboarding__day {
	position: relative;
	background-color: var(--color-card-surface);
	border: 1px solid rgba(16, 80, 75, 0.08);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 1.25rem + 0.5vw, 1.85rem);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 4px rgba(20, 20, 19, 0.04),
		0 18px 48px -20px rgba(16, 80, 75, 0.18);
	transition: transform var(--duration-normal) var(--ease-spring),
	            box-shadow var(--duration-normal) var(--ease-spring),
	            border-color var(--duration-normal) ease;
	overflow: hidden;
}

.w1-onboarding__day::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 45% at 100% 0%, rgba(16, 158, 145, 0.06) 0%, transparent 65%);
	z-index: 0;
	pointer-events: none;
}

.w1-onboarding__day:hover {
	transform: translateY(-3px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 6px rgba(20, 20, 19, 0.06),
		0 28px 60px -22px rgba(16, 80, 75, 0.30);
	border-color: rgba(16, 158, 145, 0.18);
}

.w1-onboarding__day-marker {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, #14B8A6 0%, var(--color-brand) 50%, #0F766E 100%);
	color: var(--color-white);
	box-shadow:
		0 0 0 4px var(--color-card-surface),
		0 0 0 5px rgba(16, 158, 145, 0.20),
		0 8px 16px -6px rgba(16, 80, 75, 0.40);
	margin-bottom: var(--space-md);
}

.w1-onboarding__day-num {
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

.w1-onboarding__day-num::before {
	content: "Day ";
	font-weight: 600;
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	display: block;
	opacity: 0.85;
	margin-bottom: 0.05rem;
}

.w1-onboarding__day-icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background-color: rgba(16, 158, 145, 0.10);
	color: var(--color-brand-dark);
	margin-bottom: 0.75rem;
}

h3.w1-onboarding__day-title {
	position: relative;
	z-index: 1;
	font-size: clamp(1.125rem, 1rem + 0.3vw, 1.3125rem);
	font-weight: 800;
	letter-spacing: -0.012em;
	color: var(--color-text);
	margin: 0 0 0.4rem;
	line-height: 1.25;
}

.w1-onboarding__day-body {
	position: relative;
	z-index: 1;
	font-size: 0.9875rem;
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────────────────────
   S-W1-11 Pause-cancel honest section
   ────────────────────────────────────────────────────────────────────────── */

.w1-pause-cancel {
	position: relative;
	background-color: var(--color-surface-alt);
	padding: clamp(4.5rem, 3rem + 3vw, 7rem) var(--space-xl);
	overflow: hidden;
	isolation: isolate;
}

.w1-pause-cancel::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23141413' fill-opacity='0.05'/%3E%3C/svg%3E");
	background-size: 32px 32px;
	z-index: -1;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
}

.w1-pause-cancel__inner {
	max-width: 1080px;
	margin: 0 auto;
}

.w1-pause-cancel__head {
	max-width: 720px;
	margin: 0 auto clamp(2.5rem, 2rem + 2vw, 4rem);
	text-align: center;
}

.w1-pause-cancel__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-md);
}

.w1-pause-cancel__eyebrow-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

h2.w1-pause-cancel__title {
	font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 auto var(--space-md);
	max-width: 22ch;
	text-wrap: balance;
	color: var(--color-text);
}

.w1-pause-cancel__lede {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	color: var(--color-text-muted);
	margin: 0 auto;
	max-width: 56ch;
	line-height: 1.55;
}

/* Single horizontal "guarantee" panel — split into two halves with a center
   divider that carries an "or" chip. Confident, declarative, visually distinct
   from the two-card grids elsewhere on the page.
   - Full-height brand-teal rail spans the entire left edge (no fadeout)
   - Each half centers its content within its column for symmetric balance
   - Subtle "Guaranteed" seal in top-right corner adds confidence without copy */
.w1-pause-cancel__guarantee {
	position: relative;
	max-width: 920px;
	margin: 0 auto;
	background-color: var(--color-card-surface);
	border-radius: var(--radius-xl);
	padding: clamp(2rem, 1.5rem + 1.5vw, 2.75rem) clamp(1.5rem, 1rem + 1.5vw, 2.5rem) clamp(2rem, 1.5rem + 1.5vw, 2.75rem) clamp(2rem, 1.5rem + 2vw, 3.5rem);
	overflow: hidden;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 6px rgba(20, 20, 19, 0.06),
		0 30px 64px -28px rgba(16, 80, 75, 0.32);
	border: 1px solid rgba(16, 158, 145, 0.16);
	display: flex;
	align-items: stretch;
	gap: 0;
}

.w1-pause-cancel__guarantee::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 80% at 0% 50%, rgba(16, 158, 145, 0.10) 0%, transparent 55%),
		radial-gradient(ellipse 50% 70% at 100% 50%, rgba(20, 184, 166, 0.07) 0%, transparent 60%);
	pointer-events: none;
}

.w1-pause-cancel__guarantee::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 5px;
	background: linear-gradient(180deg, #14B8A6 0%, var(--color-brand) 50%, #0F766E 100%);
}

.w1-pause-cancel__half {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
	min-width: 0;
	flex: 1 1 0;
}

.w1-pause-cancel__icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(16, 158, 145, 0.18) 0%, rgba(16, 158, 145, 0.08) 100%);
	border: 1px solid rgba(16, 158, 145, 0.24);
	color: var(--color-brand-dark);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.85) inset,
		0 8px 16px -8px rgba(16, 80, 75, 0.32);
	flex-shrink: 0;
}

.w1-pause-cancel__copy {
	min-width: 0;
}

h3.w1-pause-cancel__label {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--color-text);
	margin: 0 0 0.25rem;
	line-height: 1.05;
}

.w1-pause-cancel__meta {
	font-size: clamp(0.9875rem, 0.95rem + 0.15vw, 1.0625rem);
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.4;
}

.w1-pause-cancel__divider {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1px;
	margin: 0 clamp(0.5rem, 0.25rem + 0.5vw, 1rem);
	align-self: stretch;
	background: linear-gradient(180deg, transparent 0%, rgba(16, 80, 75, 0.18) 20%, rgba(16, 80, 75, 0.18) 80%, transparent 100%);
}

.w1-pause-cancel__divider-or {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: var(--color-card-surface);
	border: 1px solid rgba(16, 80, 75, 0.14);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	box-shadow: 0 2px 4px rgba(20, 20, 19, 0.04);
}

@media (max-width: 720px) {
	.w1-pause-cancel__guarantee {
		flex-direction: column;
		gap: 0;
		padding: clamp(2rem, 1.5rem + 1.5vw, 2.5rem) clamp(1.25rem, 1rem + 1vw, 2rem);
	}

	.w1-pause-cancel__half {
		padding: clamp(0.5rem, 0.25rem + 0.5vw, 0.75rem) 0;
		flex: 0 0 auto;
		justify-content: flex-start;
	}

	.w1-pause-cancel__guarantee::after {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		width: 100%;
		height: 5px;
		background: linear-gradient(90deg, #14B8A6 0%, var(--color-brand) 50%, #0F766E 100%);
	}

	.w1-pause-cancel__divider {
		width: 100%;
		height: 1px;
		margin: clamp(1rem, 0.75rem + 1vw, 1.5rem) 0;
		background: linear-gradient(90deg, transparent 0%, rgba(16, 80, 75, 0.16) 20%, rgba(16, 80, 75, 0.16) 80%, transparent 100%);
	}
}

/* ──────────────────────────────────────────────────────────────────────────
   S-W1-12 Tool stack logo wall
   ────────────────────────────────────────────────────────────────────────── */

.w1-tools {
	position: relative;
	background-color: var(--color-surface);
	padding: clamp(4.5rem, 3rem + 3vw, 7rem) var(--space-xl);
	overflow: hidden;
	isolation: isolate;
}

.w1-tools::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23141413' fill-opacity='0.05'/%3E%3C/svg%3E");
	background-size: 32px 32px;
	z-index: -1;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
}

.w1-tools__inner {
	max-width: var(--container-max);
	margin: 0 auto;
}

.w1-tools__head {
	max-width: 720px;
	margin: 0 auto var(--space-2xl);
	text-align: center;
}

.w1-tools__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-md);
}

.w1-tools__eyebrow-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

h2.w1-tools__title {
	font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 auto var(--space-md);
	max-width: 22ch;
	text-wrap: balance;
	color: var(--color-text);
}

.w1-tools__intro {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	color: var(--color-text-muted);
	margin: 0 auto;
	max-width: 56ch;
	line-height: 1.55;
}

.w1-tools__grid {
	list-style: none;
	margin: 0 0 var(--space-xl);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
}

@media (min-width: 768px) {
	.w1-tools__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.w1-tools__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.w1-tools__item {
	background-color: var(--color-card-surface);
	border: 1px solid var(--color-card-border);
	border-radius: var(--radius-md);
	padding: var(--space-md) var(--space-lg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	font-weight: 600;
	font-size: var(--text-small);
	color: var(--color-text);
	transition: transform var(--duration-fast) var(--ease-spring), border-color var(--duration-fast) ease;
}

.w1-tools__item:hover,
.w1-tools__item:focus-within {
	transform: translateY(-2px);
	color: var(--color-brand);
	border-color: var(--color-brand);
}

.w1-tools__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
}

.w1-tools__logo svg {
	width: 40px;
	height: 40px;
	display: block;
	color: var(--color-text-muted);
	fill: currentColor;
	transition: color var(--duration-fast) ease, fill var(--duration-fast) ease;
}

.w1-tools__logo svg path,
.w1-tools__logo svg circle {
	fill: currentColor;
}

.w1-tools__logo--mono svg {
	color: var(--color-text-muted);
}

.w1-tools__logo--mono svg rect:first-child {
	fill: currentColor;
}

.w1-tools__logo--mono svg text {
	fill: var(--color-surface);
}

.w1-tools__item:hover .w1-tools__logo svg,
.w1-tools__item:focus-within .w1-tools__logo svg {
	color: var(--color-brand);
}

.w1-tools__note {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	font-style: italic;
}

/* ──────────────────────────────────────────────────────────────────────────
   S-W1-13 Related services link cluster
   ────────────────────────────────────────────────────────────────────────── */

.w1-related {
	position: relative;
	background-color: var(--color-surface-alt);
	padding: clamp(4.5rem, 3rem + 3vw, 7rem) var(--space-xl) clamp(3.5rem, 2.5rem + 2vw, 5.5rem);
	overflow: hidden;
	isolation: isolate;
}

.w1-related::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23141413' fill-opacity='0.05'/%3E%3C/svg%3E");
	background-size: 32px 32px;
	z-index: -1;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
}

.w1-related__inner {
	max-width: 1080px;
	margin: 0 auto;
}

.w1-related__head {
	max-width: 720px;
	margin: 0 auto var(--space-2xl);
	text-align: center;
}

.w1-related__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-md);
}

.w1-related__eyebrow-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

h2.w1-related__title {
	font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 auto var(--space-md);
	max-width: 22ch;
	text-wrap: balance;
	color: var(--color-text);
}

.w1-related__intro {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	color: var(--color-text-muted);
	margin: 0 auto;
	max-width: 56ch;
	line-height: 1.55;
}

/* Categorized 3-column link cluster — sitemap-style density, scannable.
   Section headers in small caps, links in compact rows with brand-teal accent
   on hover. Optimized for displaying many destinations in limited vertical space. */
.w1-related__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 1.5rem + 1.5vw, 3rem);
	max-width: 1080px;
	margin: 0 auto;
}

@media (min-width: 720px) {
	.w1-related__columns {
		grid-template-columns: 1fr 1.4fr 1fr;
		gap: clamp(2.5rem, 2rem + 2vw, 4rem);
		align-items: start;
	}
}

.w1-related__column {
	min-width: 0;
}

h3.w1-related__column-title {
	font-size: var(--text-small);
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand-dark);
	margin: 0 0 1rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid rgba(16, 80, 75, 0.16);
	line-height: 1.2;
}

@media (max-width: 480px) {
	h3.w1-related__column-title {
		border-bottom-color: rgba(16, 80, 75, 0.12);
	}
}

.w1-related__column-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.w1-related__column-list > li {
	border-bottom: 1px dashed rgba(16, 80, 75, 0.10);
}

.w1-related__column-list > li:last-child {
	border-bottom: none;
}

.w1-related__link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.85rem 0.25rem 0.85rem 0;
	text-decoration: none;
	color: var(--color-text);
	transition: padding-left var(--duration-normal) var(--ease-spring),
	            color var(--duration-normal) ease;
}

.w1-related__link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 1px;
	background-color: var(--color-brand);
	transform: translateY(-50%);
	transition: width var(--duration-normal) var(--ease-spring);
}

.w1-related__link:hover,
.w1-related__link:focus-visible {
	padding-left: 1.1rem;
	color: var(--color-brand-dark);
}

.w1-related__link:hover::before,
.w1-related__link:focus-visible::before {
	width: 0.7rem;
}

.w1-related__link-label {
	font-size: clamp(0.9875rem, 0.95rem + 0.15vw, 1.0625rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: inherit;
	line-height: 1.3;
}

.w1-related__link-meta {
	font-size: 0.875rem;
	color: var(--color-text-muted);
	line-height: 1.4;
}

/* ──────────────────────────────────────────────────────────────────────────
   S-W1-14 FAQ
   ────────────────────────────────────────────────────────────────────────── */

.w1-faq {
	padding: var(--space-section) var(--space-xl);
}

.w1-faq__inner {
	max-width: 760px;
	margin: 0 auto;
}

.w1-faq__title {
	font-size: var(--text-h2);
	text-align: center;
	margin: 0 0 var(--space-2xl);
}

.w1-faq__list {
	margin: 0;
	padding: 0;
}

.w1-faq__item {
	border-bottom: 1px solid var(--color-divider-warm);
	border-left: 2px solid transparent;
	padding-left: var(--space-md);
	transition: border-left-color var(--duration-fast) ease;
}

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

.w1-faq__item[open] {
	border-left-color: var(--color-brand);
}

.w1-faq__question {
	font-size: var(--text-h4);
	font-weight: 700;
	color: var(--color-text);
	letter-spacing: -0.01em;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-lg) 0;
	transition: color var(--duration-fast) ease;
}

.w1-faq__question::-webkit-details-marker {
	display: none;
}

.w1-faq__question::after {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23109E91" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
	background-size: 20px 20px;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform var(--duration-fast) var(--ease-spring);
}

.w1-faq__item[open] .w1-faq__question::after {
	transform: rotate(180deg);
}

.w1-faq__question:hover,
.w1-faq__question:focus-visible {
	color: var(--color-brand);
	outline: none;
}

.w1-faq__answer {
	font-size: var(--text-body);
	color: var(--color-text);
	margin: 0;
	padding: 0 0 var(--space-lg);
	line-height: var(--leading-relaxed);
}

/* ──────────────────────────────────────────────────────────────────────────
   S-W1-15 Final CTA - inline 3-field form
   ────────────────────────────────────────────────────────────────────────── */

.w1-cta-form {
	padding: clamp(5rem, 4rem + 4vw, 8rem) var(--space-xl);
	background:
		linear-gradient(135deg, var(--color-brand-subtle) 0%, var(--color-surface) 60%);
	scroll-margin-top: var(--space-xl);
}

.w1-cta-form__inner {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2xl);
	align-items: start;
}

@media (min-width: 1024px) {
	.w1-cta-form__inner {
		grid-template-columns: 1fr 1.4fr;
		gap: var(--space-3xl);
	}
}

.w1-cta-form__copy {
	max-width: 480px;
	position: relative;
}

/* Decorative dot grid watermark behind the copy column at desktop.
   Subtle teal pattern that adds visual interest without competing with form usability. */
@media (min-width: 1024px) {
	.w1-cta-form__copy::before {
		content: "";
		position: absolute;
		left: -24px;
		top: -32px;
		width: 220px;
		height: 220px;
		background-image: radial-gradient(var(--color-brand) 1.5px, transparent 1.5px);
		background-size: 18px 18px;
		opacity: 0.18;
		pointer-events: none;
		z-index: 0;
		mask-image: radial-gradient(ellipse at top left, #000 0%, transparent 70%);
		-webkit-mask-image: radial-gradient(ellipse at top left, #000 0%, transparent 70%);
	}

	.w1-cta-form__copy > * {
		position: relative;
		z-index: 1;
	}
}

.w1-cta-form__title {
	font-size: var(--text-h2);
	margin: 0 0 var(--space-lg);
}

.w1-cta-form__lede {
	font-size: var(--text-body);
	color: var(--color-text);
	margin: 0;
}

.w1-cta-form__form {
	background-color: var(--color-card-surface);
	border: 1px solid var(--color-card-border);
	border-radius: var(--radius-lg);
	padding: var(--space-2xl);
	box-shadow: var(--shadow-md);
	display: grid;
	gap: var(--space-lg);
}

.w1-cta-form__submit {
	margin-top: var(--space-xs);
}

.w1-cta-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.w1-cta-form__label {
	font-size: var(--text-small);
	font-weight: 600;
	color: var(--color-text);
}

.w1-cta-form__input {
	font-family: var(--font-body);
	font-size: var(--text-body);
	padding: 0.75rem 1rem;
	background-color: var(--color-white);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-input);
	color: var(--color-text);
	transition: box-shadow var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.w1-cta-form__input:focus {
	outline: none;
	border-color: var(--color-brand);
	box-shadow: var(--shadow-input-focus);
}

.w1-cta-form__input:user-invalid {
	border-color: var(--color-error);
}

.w1-cta-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 1.5rem;
	background-color: var(--color-brand);
	color: var(--color-white);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-body);
	border: none;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-md);
	cursor: pointer;
	transition: transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.w1-cta-form__submit:hover:not(:disabled),
.w1-cta-form__submit:focus-visible:not(:disabled) {
	background-color: var(--color-brand-dark);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.w1-cta-form__submit:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

.w1-cta-form__status {
	font-size: var(--text-small);
	min-height: 1.25em;
}

.w1-cta-form__status--error {
	color: var(--color-error);
}

.w1-cta-form__success {
	background-color: var(--color-card-surface);
	border: 1px solid var(--color-brand);
	border-radius: var(--radius-lg);
	padding: var(--space-2xl);
	text-align: center;
	box-shadow: var(--shadow-md);
}

.w1-cta-form__success-title {
	font-size: var(--text-h3);
	font-weight: 700;
	color: var(--color-brand);
	margin: 0 0 var(--space-sm);
}

.w1-cta-form__success-body {
	font-size: var(--text-body);
	color: var(--color-text);
	margin: 0;
}

.w1-cta-form__alt-paths {
	grid-column: 1 / -1;
	margin-top: var(--space-xl);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-lg);
	justify-content: center;
	color: var(--color-text-muted);
	font-size: var(--text-small);
}

.w1-cta-form__alt-paths-item {
	margin: 0;
}

.w1-cta-form__alt-paths a {
	color: var(--color-brand);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--color-brand);
}

.w1-cta-form__alt-paths a:hover,
.w1-cta-form__alt-paths a:focus-visible {
	color: var(--color-brand-dark);
}

/* ──────────────────────────────────────────────────────────────────────────
   Systematic entrance animations (Fix B)
   --------------------------------------------------------------------------
   Page-load fade + rise on direct children of every non-hero w1 section's
   __inner wrapper. Hero has its own keyframes and is excluded. Stagger via
   :nth-child delays. Honors prefers-reduced-motion.
   ────────────────────────────────────────────────────────────────────────── */

.w1-pain-solution__inner > *,
.w1-lifecycle__inner > *,
.w1-rubric__inner > *,
.w1-communication__inner > *,
.w1-analytics__inner > *,
.w1-scale__inner > *,
.w1-onboarding__inner > *,
.w1-pause-cancel__inner > *,
.w1-tools__inner > *,
.w1-related__inner > *,
.w1-faq__inner > *,
.w1-cta-form__inner > * {
	opacity: 0;
	transform: translateY(12px);
	animation: w1-rise 0.6s var(--ease-spring) forwards;
}

/* Stagger direct children up to 8 deep. Most sections have 2-5 direct
   children; this covers all expected counts without per-section overrides. */
.w1-pain-solution__inner > *:nth-child(1),
.w1-lifecycle__inner > *:nth-child(1),
.w1-rubric__inner > *:nth-child(1),
.w1-communication__inner > *:nth-child(1),
.w1-analytics__inner > *:nth-child(1),
.w1-scale__inner > *:nth-child(1),
.w1-onboarding__inner > *:nth-child(1),
.w1-pause-cancel__inner > *:nth-child(1),
.w1-tools__inner > *:nth-child(1),
.w1-related__inner > *:nth-child(1),
.w1-faq__inner > *:nth-child(1),
.w1-cta-form__inner > *:nth-child(1) { animation-delay: 0ms; }

.w1-pain-solution__inner > *:nth-child(2),
.w1-lifecycle__inner > *:nth-child(2),
.w1-rubric__inner > *:nth-child(2),
.w1-communication__inner > *:nth-child(2),
.w1-analytics__inner > *:nth-child(2),
.w1-scale__inner > *:nth-child(2),
.w1-onboarding__inner > *:nth-child(2),
.w1-pause-cancel__inner > *:nth-child(2),
.w1-tools__inner > *:nth-child(2),
.w1-related__inner > *:nth-child(2),
.w1-faq__inner > *:nth-child(2),
.w1-cta-form__inner > *:nth-child(2) { animation-delay: 80ms; }

.w1-pain-solution__inner > *:nth-child(3),
.w1-lifecycle__inner > *:nth-child(3),
.w1-rubric__inner > *:nth-child(3),
.w1-communication__inner > *:nth-child(3),
.w1-analytics__inner > *:nth-child(3),
.w1-scale__inner > *:nth-child(3),
.w1-onboarding__inner > *:nth-child(3),
.w1-pause-cancel__inner > *:nth-child(3),
.w1-tools__inner > *:nth-child(3),
.w1-related__inner > *:nth-child(3),
.w1-faq__inner > *:nth-child(3),
.w1-cta-form__inner > *:nth-child(3) { animation-delay: 160ms; }

.w1-pain-solution__inner > *:nth-child(4),
.w1-lifecycle__inner > *:nth-child(4),
.w1-rubric__inner > *:nth-child(4),
.w1-communication__inner > *:nth-child(4),
.w1-analytics__inner > *:nth-child(4),
.w1-scale__inner > *:nth-child(4),
.w1-onboarding__inner > *:nth-child(4),
.w1-pause-cancel__inner > *:nth-child(4),
.w1-tools__inner > *:nth-child(4),
.w1-related__inner > *:nth-child(4),
.w1-faq__inner > *:nth-child(4),
.w1-cta-form__inner > *:nth-child(4) { animation-delay: 240ms; }

.w1-pain-solution__inner > *:nth-child(5),
.w1-lifecycle__inner > *:nth-child(5),
.w1-rubric__inner > *:nth-child(5),
.w1-communication__inner > *:nth-child(5),
.w1-analytics__inner > *:nth-child(5),
.w1-scale__inner > *:nth-child(5),
.w1-onboarding__inner > *:nth-child(5),
.w1-pause-cancel__inner > *:nth-child(5),
.w1-tools__inner > *:nth-child(5),
.w1-related__inner > *:nth-child(5),
.w1-faq__inner > *:nth-child(5),
.w1-cta-form__inner > *:nth-child(5) { animation-delay: 320ms; }

.w1-pain-solution__inner > *:nth-child(n+6),
.w1-lifecycle__inner > *:nth-child(n+6),
.w1-rubric__inner > *:nth-child(n+6),
.w1-communication__inner > *:nth-child(n+6),
.w1-analytics__inner > *:nth-child(n+6),
.w1-scale__inner > *:nth-child(n+6),
.w1-onboarding__inner > *:nth-child(n+6),
.w1-pause-cancel__inner > *:nth-child(n+6),
.w1-tools__inner > *:nth-child(n+6),
.w1-related__inner > *:nth-child(n+6),
.w1-faq__inner > *:nth-child(n+6),
.w1-cta-form__inner > *:nth-child(n+6) { animation-delay: 400ms; }

@keyframes w1-rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.w1-pain-solution__inner > *,
	.w1-lifecycle__inner > *,
	.w1-rubric__inner > *,
	.w1-communication__inner > *,
	.w1-analytics__inner > *,
	.w1-scale__inner > *,
	.w1-onboarding__inner > *,
	.w1-pause-cancel__inner > *,
	.w1-tools__inner > *,
	.w1-related__inner > *,
	.w1-faq__inner > *,
	.w1-cta-form__inner > * {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.w1-pain-solution__underline::before {
		transform: none;
	}
}