/* Hero */
.hero { background: var(--color-hero-bg); padding-top: 40px; padding-bottom: 40px; }
.hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 30px;
}
/* Verified via _elementor_data: the hero content column is a flex column with
   flex_gap row:15px between the eyebrow/heading/checklist/button — not
   per-element margins. */
.hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
}
.hero__content .eyebrow,
.hero__content .checklist { margin: 0; }
.hero__title { font-size: 48px; font-weight: 900; line-height: 56px; color: #151516; letter-spacing: -0.5px; margin-bottom: 0; }
.hero__media img { border-radius: var(--radius-card); }

@media (max-width: 768px) {
	/* At 48px the title wraps to 3 lines and pushes the ⚡ onto its own
	   line — scale it down so "Fast ⚡" fits its line like every other. */
	.hero__title { font-size: 34px; line-height: 40px; }
	/* width:65% is correct for the desktop column but on a narrow mobile
	   column it forces the pill to wrap onto two lines — let it size to
	   its content instead. */
	.eyebrow--hero { width: auto; }
}

/* Press strip */
.press-strip { padding-top: 24px; padding-bottom: 24px; text-align: center; border-top: 1px solid #d1cefe; }
.press-strip__label { font-family: var(--font-heading); font-size: 14px; font-weight: 400; color: #151516; margin-bottom: 24px; }
.press-strip__viewport { overflow: hidden; }
/* justify-content:center matters on desktop, where .press-strip__logos is
   now a flex item (shrinks to content width) instead of a full-width block
   — without this it hugs the left edge instead of centering under the
   label. On mobile the track is width:max-content so there's no extra
   space to distribute and this is a no-op. */
.press-strip__track { display: flex; align-items: center; justify-content: center; }
.press-strip__logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 32px 40px;
}
.press-strip__logos img { width: 117px; height: auto; }
/* Hidden on desktop — the static wrapped row above is enough there. On
   mobile this duplicate becomes visible and the track scrolls -50% of its
   own width, which is exactly one copy's width, so the loop is seamless. */
.press-strip__logos--dup { display: none; }

@media (max-width: 900px) {
	.press-strip__track {
		gap: 40px;
		width: max-content;
		animation: press-strip-marquee 40s linear infinite;
	}
	.press-strip__logos { flex-wrap: nowrap; }
	.press-strip__logos--dup { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
	.press-strip__track { animation: none; }
}

@keyframes press-strip-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* How it Works: verified via _elementor_data (container id "how-it-works") */
.how-it-works { background: #1f1346; color: #ffffff; padding-top: 60px; padding-bottom: 60px; }
.how-it-works .section-title { color: #ffffff; }
.how-it-works .eyebrow {
	font-weight: 700;
	color: #1d1e20;
	background: #faf8ff;
	border: none;
	padding: 4px 12px;
	text-transform: none;
}
/* Internal link to the full /how-it-works/ page, sitting next to the
   pricing CTA in this section's footer — overridden to white (not the
   shared .link-cta's purple) since this section has a dark background,
   same treatment as the section's other text/checklist colors. */
.how-it-works .section-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; }
.how-it-works .link-cta { color: #ffffff; text-decoration-color: rgba(255, 255, 255, 0.5); margin-top: 0; }
.how-it-works .link-cta:hover { text-decoration-color: #ffffff; }
.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 24px;
}
.steps__item {
	background: #2f1c6a;
	border-radius: var(--radius-card);
	padding: 32px;
}
.steps__icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: #673de6;
	border-radius: 6px;
	margin-bottom: 15px;
}
.steps__icon { width: 24px; height: 24px; }
.steps__item h3 { color: #ffffff; font-family: var(--font-heading); font-size: 18px; font-weight: 700; line-height: 24px; margin-bottom: 12px; }
.steps__item p { color: #ffffff; font-size: 16px; line-height: 24px; }

/* Ethical commitment: verified via _elementor_data (container id 6f682fc,
   nested inside the shared "pricing" outer container). Card is 69% of the
   1140px content width ≈ 787px, padding 24px (not 48), border 1px #D5DFFF,
   radius 20px, NO box-shadow — that was an unverified addition. */
.commitment { background: #f5f5f6; padding-top: 0; }
.commitment__card {
	max-width: 787px;
	margin: 0 auto;
	background: #ffffff;
	border: 1px solid #d5dfff;
	border-radius: 20px;
	padding: 24px;
	text-align: center;
}
/* Title: DM Sans 20px/700/32 line-height (verified). Mobile is 22px — larger
   than desktop, unusual but that's the real value. */
.commitment__title {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
}
.commitment__title u { text-decoration: underline; }
/* Image is 47% of the card width with margin-top:-30px (verified) — it
   deliberately overlaps up into the gap below the title. */
.commitment__media { max-width: 47%; margin: -30px auto 24px; }
.commitment__media img { border-radius: var(--radius-card); }
/* Paragraph: 16px/400/32 line-height (verified) — the tight default line
   spacing we had before didn't match this site's actual leading. */
.commitment__text { font-size: 16px; font-weight: 400; line-height: 32px; color: var(--color-body); margin-bottom: 24px; }
.commitment__text strong { font-weight: 700; color: var(--color-ink); }
.commitment__text em { font-style: italic; }
/* Button: DM Sans 16px/700/24, bg #673DE6, radius 50px (pill), padding
   10px/40px (verified) — all already match the shared .btn/.btn--primary
   classes except the exact 40px horizontal padding, so override here. */
.commitment__cta { display: inline-block; padding: 10px 40px; }

@media (max-width: 768px) {
	.commitment__title { font-size: 22px; }
	/* The -30px pull-up is tuned for the desktop title's line count; at
	   22px the title wraps to 2 lines and the pull-up eats into the
	   second line instead of the whitespace below it. 47% (sized for the
	   desktop two-column-ish layout) reads as tiny and off-balance next to
	   the full-width paragraph below it on mobile — match its width. */
	.commitment__media { margin-top: 16px; max-width: 100%; }
}

/* Feature grid */
.features__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 48px;
}
.feature-card {
	text-align: left;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: 28px;
	font-family: var(--font-heading);
}
.feature-card__icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: #eef0ff;
	border-radius: 10px;
	margin-bottom: 16px;
}
.feature-card__icon { width: 24px; height: 24px; }
.feature-card h3 { font-size: 18px; margin-bottom: 10px; }
.feature-card p { font-size: 16px; font-weight: 400; color: var(--color-ink); }

/* Audience: verified dark section (#1F1346) via _elementor_data; cards are
   plain (no border/bg), white text */
.audience { background: #1f1346; color: #ffffff; }
.audience .section-title { color: #ffffff; }
/* This heading is longer than the shared 720px cap allows on one line at
   36px/700 — widen just this instance instead of loosening the shared rule. */
.audience .section-title--center { max-width: none; }
.audience .section-cta .btn { padding-left: 40px; padding-right: 40px; }
.audience__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px;
}

/* Testimonials */
.testimonials .section-cta .btn { padding-left: 40px; padding-right: 40px; }
/* Wraps to 2 lines at the shared 720px cap (already removed above via
   section-title--center's max-width:none override) — keep it on one line
   on desktop; mobile's smaller 20px title (global.css) still wraps fine. */
@media (min-width: 769px) {
	.testimonials .section-title--center { white-space: nowrap; }
}
/* A slider on every breakpoint, not just mobile: overflow-x + scroll-snap.
   On desktop the 3 cards fit the container width exactly (33.333% each)
   so nothing looks different, but it's still draggable/scrollable; on
   narrower screens flex:0 0 82% below takes over and gives a swipe peek. */
.testimonials__grid {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 24px;
	margin-top: 48px;
	margin-left: -24px;
	margin-right: -24px;
	padding: 0 24px 8px;
}
.testimonials__grid::-webkit-scrollbar { display: none; }
.testimonial-card {
	scroll-snap-align: center;
	flex: 0 0 calc(33.333% - 16px);
	margin: 0;
	background: var(--color-hero-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: 28px;
}
@media (max-width: 768px) {
	.testimonials .section-title--center { max-width: none; }
	.testimonial-card { flex: 0 0 82%; max-width: 360px; }
}
.testimonial-card figcaption { display: flex; flex-direction: column; margin-bottom: 12px; }
.testimonial-card__name { font-weight: 700; font-size: 15px; color: var(--color-ink); }
/* #666e8f — same hue/saturation as the reference's #888faa, darkened to
   clear WCAG AA's 4.5:1 text contrast ratio against the card's #f4f5ff bg. */
.testimonial-card__role { font-family: var(--font-heading); font-size: 14px; font-weight: 400; line-height: 24px; color: #666e8f; }
.testimonial-card__rating { display: flex; gap: 4px; margin-bottom: 16px; }
.testimonial-card__star { width: 22px; height: 22px; fill: var(--color-teal); }
.testimonial-card blockquote { margin: 0; font-size: 15px; line-height: 1.7; }

/* Stats */
.stats { background: #1f1346; color: #ffffff; padding-bottom: 0; }
.stats .section-title--center { max-width: none; }
.stats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px;
}
.stat {
	display: block;
	background: var(--color-navy);
	border-radius: var(--radius-card);
	padding: 32px;
}
.stat__icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--color-purple);
	border-radius: 10px;
	margin-bottom: 16px;
}
.stat__icon { width: 24px; height: 24px; color: #ffffff; }
.stat__number { display: block; font-family: var(--font-heading); font-size: 18px; font-weight: 700; line-height: 24px; color: #ffffff; margin-bottom: 15px; }
.stat__label { display: block; font-family: var(--font-heading); font-size: 16px; font-weight: 400; line-height: 24px; color: #ffffff; }

@media (max-width: 900px) {
	/* Icon + number sit side by side instead of stacked; the label wraps
	   onto its own row via flex-basis:100%. */
	.stat {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 16px;
		row-gap: 12px;
	}
	.stat__icon-box,
	.stat__number { margin-bottom: 0; }
	.stat__label { flex-basis: 100%; }
}

/* Authenticity */
/* Authenticity: verified dark section (#1F1346) via _elementor_data */
.authenticity { background: #1f1346; color: #ffffff; }
.authenticity .section-title { color: #ffffff; }
.authenticity__inner {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 48px;
	align-items: center;
}
.authenticity__media img { border-radius: var(--radius-card); }
.authenticity .checklist li { margin-bottom: 20px; }
.authenticity .checklist li::before { border-color: #ffffff; }
.authenticity .checklist li::after { border-left-color: #ffffff; border-bottom-color: #ffffff; }

@media (max-width: 900px) {
	.hero__inner,
	.authenticity__inner { grid-template-columns: 1fr; }
	.authenticity__media { order: -1; }
	.commitment__card { padding: 24px 20px 32px; }
	.steps,
	.features__grid { grid-template-columns: repeat(2, 1fr); }
	.audience__grid,
	.stats__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.steps,
	.features__grid { grid-template-columns: 1fr; }
}

/* "Browse the full FAQ" link under the homepage's short general FAQ —
   this section is on a plain white background so the shared .link-cta
   purple works fine as-is, no override needed here. */
.home-faq__more { margin-top: 16px; font-size: 15px; color: var(--color-body); }
.home-faq__more a { color: var(--color-purple); font-weight: 600; text-decoration: underline; }