/* How It Works page hero uses the shared .page-hero (components.css) —
   same as the pricing, FAQ, and blog pages. */

.hiw-intro { background: #ffffff; padding-bottom: 0; }
.hiw-intro__text {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	font-size: 17px;
	line-height: 1.7;
	color: var(--color-body);
}
.hiw-intro__text a { color: var(--color-purple); text-decoration: underline; font-weight: 600; }

/* Horizontal 4-step timeline: numbered purple circle badges connected by
   a line, on white to match the rest of the page's card sections. Stacks
   to a single column on mobile, where the connecting line is dropped
   since a horizontal line reads as broken once the steps aren't side by
   side. */
.hiw-steps { background: #ffffff; padding-bottom: 80px; }
.hiw-steps__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 56px;
}
/* Single connecting line, positioned behind every step by z-index (0 vs
   each .hiw-step's 1) rather than relying on DOM paint order — a per-step
   line segment approach was tried and rejected: each segment belonged to
   a LATER step, so it painted over the EARLIER step's circle instead of
   sitting behind it. One line for the whole row avoids that entirely.

   The circles are centered within their grid column (not left-aligned),
   which makes the layout symmetric — with 4 equal 1fr columns and this
   grid's 24px gap, each column's rendered width is (100% - 72px)/4, so
   circle 1's center sits at 12.5% - 9px from the left and circle 4's
   center sits the same distance in from the right. That's an exact
   derivation from the actual column math, not a guessed percentage — it
   reaches fully into circle 1 and fully out to circle 4 regardless of
   the section's rendered width. */
.hiw-steps__grid::before {
	content: '';
	position: absolute;
	top: 28px;
	left: calc(12.5% - 9px);
	right: calc(12.5% - 9px);
	height: 2px;
	background: var(--color-border);
	z-index: 0;
}
.hiw-step {
	position: relative;
	z-index: 1;
	text-align: left;
}
.hiw-step__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--color-purple);
	color: #ffffff;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 20px;
	box-shadow: 0 0 0 8px #ffffff, 0 10px 20px -6px rgba(103, 61, 230, 0.45);
}
.hiw-step h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 700; line-height: 24px; color: var(--color-ink); margin-bottom: 12px; }
.hiw-step p { font-size: 15px; line-height: 24px; color: var(--color-body); }

@media (max-width: 900px) {
	.hiw-steps__grid { grid-template-columns: 1fr; gap: 32px; }
	.hiw-steps__grid::before { display: none; }
	.hiw-step__number { margin-left: 0; }
}

/* Narrative section: image + copy + checklist, the same visual pattern
   as the homepage's .authenticity section (home.css, not loaded here) —
   built fresh under its own class names rather than importing home.css. */
.hiw-story { background: #f5f5f6; }
.hiw-story__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hiw-story__media img { border-radius: var(--radius-card); }
.hiw-story__text p { font-size: 16px; line-height: 1.7; color: var(--color-body); margin-bottom: 16px; }
.hiw-story__text .checklist { margin-top: 24px; }

@media (max-width: 900px) {
	.hiw-story__inner { grid-template-columns: 1fr; gap: 32px; }
	.hiw-story__media { order: -1; }
}

/* Value props: same dark section + .audience-card box treatment used on
   the pricing page (defined there in pricing.css, which this page doesn't
   load) — duplicated here rather than pulling in all of pricing.css for
   two rules. */
.value-props { background: #1f1346; }
.value-props__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px;
}

@media (max-width: 900px) {
	.value-props__grid { grid-template-columns: 1fr; }
}

/* Process FAQ: plain white section. .faq-category__list is normally
   defined in faq.css (not loaded on this page) — duplicated here as the
   same small width/centering utility rather than enqueueing the whole
   FAQ-page stylesheet (quicknav styles etc.) just for one rule. The
   .faq-item accordion itself comes from components.css, already loaded. */
.hiw-faq { background: #ffffff; }
.faq-category__list { max-width: 820px; margin: 0 auto; }
.hiw-faq__more { max-width: 820px; margin: 24px auto 0; text-align: center; font-size: 15px; color: var(--color-body); }
.hiw-faq__more a { color: var(--color-purple); font-weight: 600; text-decoration: underline; }

.hiw-cta { text-align: center; }