/**
 * OpenLoop landing-page blade styles.
 * Brand tokens sampled from the Figma master template.
 */

:root {
	--ol-pink: #e90153;
	--ol-pink-deep: #8a0248;
	--ol-plum: #1c0130;
	--ol-tint: #fef2f6;
	--ol-hero-gradient: linear-gradient(155deg, #e90153 0%, #8a0248 58%, #1c0130 115%);
	--ol-ink: #241a2b;
	--ol-muted: #6b6473;
	--ol-radius: 16px;
	--ol-container: 1160px;
	--ol-gap: clamp(28px, 4vw, 64px);
}

/* ---------- Primitives ---------- */

.ol-landing {
	margin: 0;
	color: var(--ol-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.ol-container {
	width: 100%;
	max-width: var(--ol-container);
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 40px);
}

.ol-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: .9em 1.9em;
	border-radius: 999px;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.ol-btn--primary {
	background: var(--ol-pink);
	color: #fff;
}

.ol-btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 26px rgba(233, 1, 83, .35);
}

.ol-btn--secondary {
	background: transparent;
	color: var(--ol-pink);
	border-color: currentColor;
}

.ol-btn--secondary:hover {
	background: var(--ol-tint);
}

.ol-notice {
	margin: 1rem;
	padding: 2rem;
	text-align: center;
	background: var(--ol-tint);
	color: var(--ol-pink-deep);
	border: 1px dashed var(--ol-pink);
	border-radius: var(--ol-radius);
}

/* ---------- Minimal landing header / footer ---------- */

.ol-lp-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 18px;
}

.ol-lp-header__logo {
	font-weight: 800;
	font-size: 1.4rem;
	color: var(--ol-ink);
	text-decoration: none;
}

.ol-lp-header__logo img {
	max-height: 40px;
	width: auto;
}

.ol-lp-footer {
	padding-block: 40px;
	color: var(--ol-muted);
	font-size: .9rem;
	text-align: center;
}

/* ---------- Blade: Hero ---------- */

.ol-hero {
	color: #fff;
	overflow: hidden;
}

.ol-hero--bg-gradient { background: var(--ol-hero-gradient); }
.ol-hero--bg-solid { background: var(--ol-pink-deep); }
.ol-hero--bg-image { background-size: cover; background-position: center; }

.ol-hero__inner {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: var(--ol-gap);
	align-items: center;
	padding-block: clamp(48px, 7vw, 100px);
}

.ol-hero--right-none .ol-hero__inner {
	grid-template-columns: 1fr;
	max-width: 820px;
}

.ol-hero__eyebrow {
	margin: 0 0 1rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 700;
	font-size: .85rem;
	opacity: .85;
}

.ol-hero__heading {
	margin: 0 0 1.25rem;
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	line-height: 1.07;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.ol-hero__subtext {
	font-size: 1.12rem;
	line-height: 1.6;
	opacity: .92;
	max-width: 50ch;
}

.ol-hero__subtext p { margin: 0 0 .75em; }

.ol-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 2rem;
}

.ol-hero--right-form .ol-hero__aside {
	background: #fff;
	color: var(--ol-ink);
	border-radius: var(--ol-radius);
	padding: 28px;
	box-shadow: 0 30px 60px rgba(28, 1, 48, .25);
}

.ol-hero__image {
	width: 100%;
	height: auto;
	border-radius: var(--ol-radius);
	display: block;
}

/* Basic legibility for an embedded form on the white card. */
.ol-hero__aside .gform_wrapper { margin: 0; }
.ol-hero__aside input:not([type=submit]),
.ol-hero__aside textarea,
.ol-hero__aside select {
	width: 100%;
	padding: .7em .9em;
	border: 1px solid #ddd;
	border-radius: 10px;
	font-size: 1rem;
}

@media (max-width: 860px) {
	.ol-hero__inner { grid-template-columns: 1fr; }
	.ol-hero__aside { order: 2; }
}

/* ---------- Shared section scaffolding ---------- */

.ol-section { padding-block: clamp(48px, 6vw, 88px); }

.ol-section__head { max-width: 760px; margin: 0 auto clamp(32px, 4vw, 56px); text-align: center; }

.ol-eyebrow {
	margin: 0 0 .75rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 700;
	font-size: .8rem;
	color: var(--ol-pink);
}

.ol-section__heading {
	margin: 0;
	font-size: clamp(1.6rem, 3.2vw, 2.5rem);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--ol-plum);
}

.ol-section__actions { display: flex; justify-content: center; margin-top: 2.5rem; }
.ol-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Stat Bar ---------- */
.ol-stat-bar { background: var(--ol-tint); }
.ol-stat-bar__grid {
	display: grid;
	grid-template-columns: repeat(var(--ol-cols, 3), 1fr);
	gap: var(--ol-gap);
	text-align: center;
}
.ol-stat__value { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800; color: var(--ol-pink); line-height: 1; }
.ol-stat__label { margin-top: .5rem; color: var(--ol-muted); font-weight: 600; }
.ol-stat-bar__footnote { margin: 2rem 0 0; text-align: center; font-size: .8rem; color: var(--ol-muted); }

/* ---------- Steps ---------- */
.ol-steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ol-gap); }
.ol-step__num {
	width: 44px; height: 44px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--ol-pink); color: #fff; font-weight: 800; margin-bottom: 1rem;
}
.ol-step__title { margin: 0 0 .5rem; font-size: 1.25rem; color: var(--ol-plum); }
.ol-step__desc { margin: 0; color: var(--ol-muted); line-height: 1.6; }

/* ---------- Card Grid ---------- */
.ol-card-grid__grid {
	display: grid;
	grid-template-columns: repeat(var(--ol-cols, 3), 1fr);
	gap: clamp(16px, 2vw, 28px);
}
.ol-card {
	background: #fff;
	border: 1px solid #efe6ec;
	border-radius: var(--ol-radius);
	padding: 28px;
	box-shadow: 0 10px 30px rgba(28, 1, 48, .05);
}
.ol-card__title { margin: 0 0 .5rem; font-size: 1.2rem; color: var(--ol-plum); }
.ol-card__desc { margin: 0; color: var(--ol-muted); line-height: 1.6; }
.ol-card__link { display: inline-block; margin-top: 1rem; color: var(--ol-pink); font-weight: 600; text-decoration: none; }

/* ---------- Media & Text ---------- */
.ol-media-text--bg-tint { background: var(--ol-tint); }
.ol-media-text--bg-brand { background: var(--ol-hero-gradient); color: #fff; }
.ol-media-text--bg-brand .ol-media-text__heading { color: #fff; }
.ol-media-text__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ol-gap); align-items: center; }
.ol-media-text--left .ol-media-text__media { order: -1; }
.ol-media-text__heading { margin: 0 0 1rem; font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--ol-plum); }
.ol-media-text__body { color: var(--ol-muted); line-height: 1.7; }
.ol-media-text--bg-brand .ol-media-text__body { color: rgba(255, 255, 255, .9); }
.ol-media-text__img { width: 100%; height: auto; border-radius: var(--ol-radius); display: block; }
.ol-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--ol-radius); overflow: hidden; background: #000; }
.ol-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ol-media-placeholder, .ol-form__placeholder {
	display: grid; place-items: center; min-height: 240px;
	background: repeating-linear-gradient(45deg, #f6eef3, #f6eef3 12px, #fff 12px, #fff 24px);
	border-radius: var(--ol-radius); color: var(--ol-muted); font-weight: 600; text-align: center; padding: 24px;
}

/* ---------- Logos ---------- */
.ol-logos { background: var(--ol-tint); }
.ol-logos__row { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 56px); align-items: center; justify-content: center; }
.ol-logos__item { display: inline-flex; align-items: center; color: var(--ol-plum); text-decoration: none; opacity: .8; }
.ol-logos__name { font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; }
.ol-logos__img { max-height: 40px; width: auto; }

/* ---------- FAQ ---------- */
.ol-faq__inner { max-width: 820px; }
.ol-faq__item { border-bottom: 1px solid #ece3e9; }
.ol-faq__q { cursor: pointer; list-style: none; padding: 1.1rem 2rem 1.1rem 0; font-weight: 700; color: var(--ol-plum); position: relative; }
.ol-faq__q::-webkit-details-marker { display: none; }
.ol-faq__q::after { content: "+"; position: absolute; right: 0; top: .9rem; font-size: 1.4rem; color: var(--ol-pink); }
.ol-faq__item[open] .ol-faq__q::after { content: "\2013"; }
.ol-faq__a { padding: 0 0 1.2rem; color: var(--ol-muted); line-height: 1.7; }

/* ---------- Testimonials ---------- */
.ol-testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.ol-testimonial { margin: 0; background: #fff; border: 1px solid #efe6ec; border-radius: var(--ol-radius); padding: 28px; box-shadow: 0 10px 30px rgba(28, 1, 48, .05); }
.ol-testimonial__stars { color: #f5a623; letter-spacing: 2px; margin-bottom: 1rem; }
.ol-testimonial__quote { margin: 0 0 1.25rem; font-size: 1.05rem; line-height: 1.6; color: var(--ol-ink); }
.ol-testimonial__by { display: flex; align-items: center; gap: 12px; }
.ol-testimonial__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ol-testimonial__avatar--initials { display: grid; place-items: center; background: var(--ol-pink); color: #fff; font-weight: 800; }
.ol-testimonial__meta { display: flex; flex-direction: column; }
.ol-testimonial__name { font-weight: 700; color: var(--ol-plum); }
.ol-testimonial__title { font-size: .85rem; color: var(--ol-muted); }

/* ---------- CTA Banner ---------- */
.ol-cta-banner { color: #fff; }
.ol-cta-banner--bg-brand { background: var(--ol-hero-gradient); }
.ol-cta-banner--bg-solid { background: var(--ol-pink-deep); }
.ol-cta-banner__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ol-gap); padding-block: clamp(40px, 5vw, 64px); }
.ol-cta-banner__heading { margin: 0; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; max-width: 22ch; }
.ol-cta-banner__sub { margin: .75rem 0 0; opacity: .9; }
.ol-cta-banner__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.ol-cta-banner .ol-btn--primary { background: #fff; color: var(--ol-pink-deep); }
.ol-cta-banner .ol-btn--secondary { color: #fff; border-color: rgba(255, 255, 255, .6); }

/* ---------- Form ---------- */
.ol-form--bg-tint { background: var(--ol-tint); }
.ol-form__inner { max-width: 720px; }
.ol-form__intro { text-align: center; color: var(--ol-muted); margin-bottom: 2rem; }
.ol-form__embed { background: #fff; border-radius: var(--ol-radius); padding: clamp(20px, 3vw, 36px); box-shadow: 0 20px 50px rgba(28, 1, 48, .08); }

/* ---------- Rich Text ---------- */
.ol-rich-text--narrow .ol-container { max-width: 760px; }
.ol-prose { line-height: 1.75; color: var(--ol-ink); }
.ol-prose h2, .ol-prose h3 { color: var(--ol-plum); }
.ol-prose a { color: var(--ol-pink); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.ol-stat-bar__grid,
	.ol-steps__grid,
	.ol-card-grid__grid,
	.ol-testimonials__grid { grid-template-columns: 1fr 1fr; }
	.ol-media-text__inner { grid-template-columns: 1fr; }
	.ol-media-text--left .ol-media-text__media { order: 0; }
}
@media (max-width: 560px) {
	.ol-stat-bar__grid,
	.ol-steps__grid,
	.ol-card-grid__grid,
	.ol-testimonials__grid { grid-template-columns: 1fr; }
}

/* ---------- Polish & contrast on dark / brand backgrounds ---------- */

.ol-landing *, .ol-landing *::before, .ol-landing *::after { box-sizing: border-box; }
.ol-landing img { max-width: 100%; height: auto; }

/* Secondary buttons read white on the hero + brand gradients. */
.ol-hero .ol-btn--secondary,
.ol-media-text--bg-brand .ol-btn--secondary {
	color: #fff;
	border-color: rgba(255, 255, 255, .6);
}
.ol-hero .ol-btn--secondary:hover,
.ol-media-text--bg-brand .ol-btn--secondary:hover {
	background: rgba(255, 255, 255, .12);
}

/* Brand-background Media & Text: white eyebrow + inverted primary button. */
.ol-media-text--bg-brand .ol-eyebrow { color: rgba(255, 255, 255, .85); }
.ol-media-text--bg-brand .ol-btn--primary { background: #fff; color: var(--ol-pink-deep); }

/* CTA banner stacks cleanly on small screens. */
@media (max-width: 720px) {
	.ol-cta-banner__inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- Type scale (landing is isolated from the parent 62.5% base) ---------- */

.ol-landing { font-size: 17px; line-height: 1.6; }
.ol-eyebrow, .ol-hero__eyebrow { font-size: .95rem; }
.ol-section__heading { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.ol-hero__heading { font-size: clamp(2.3rem, 4.8vw, 3.6rem); }
.ol-hero__subtext { font-size: 1.2rem; }
.ol-card__desc, .ol-step__desc, .ol-media-text__body, .ol-faq__a, .ol-form__intro { font-size: 1.1rem; line-height: 1.65; }
.ol-step__title, .ol-card__title { font-size: 1.35rem; }
.ol-btn { font-size: 1.05rem; }
.ol-testimonial__quote { font-size: 1.18rem; line-height: 1.6; }
.ol-faq__q { font-size: 1.15rem; }
.ol-logos__name { font-size: 1.6rem; }

/* ---------- Stat Bar — brand-gradient callout card ---------- */

.ol-stat-bar { background: transparent; }
.ol-stat-bar__card {
	display: grid;
	grid-template-columns: minmax(260px, 1fr) 1.5fr;
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
	background: linear-gradient(100deg, #8a0248 0%, #c4127c 55%, #e90153 100%);
	color: #fff;
	border-radius: clamp(24px, 3vw, 44px);
	padding: clamp(32px, 4vw, 60px);
}
.ol-stat-bar__heading { margin: 0; font-size: clamp(1.7rem, 2.7vw, 2.4rem); font-weight: 800; line-height: 1.12; }
.ol-stat-bar__footnote { margin: 1.1rem 0 0; font-size: .85rem; line-height: 1.5; color: rgba(255, 255, 255, .8); max-width: 46ch; }
.ol-stat-bar__stats { display: flex; align-items: center; }
.ol-stat-bar__stats .ol-stat { flex: 1; padding-inline: clamp(14px, 2vw, 30px); }
.ol-stat-bar__stats .ol-stat + .ol-stat { border-left: 1px solid rgba(255, 255, 255, .3); }
.ol-stat-bar .ol-stat__value { font-size: clamp(2.6rem, 4.6vw, 3.8rem); font-weight: 800; color: #fff; line-height: 1; }
.ol-stat-bar .ol-stat__label { margin-top: .55rem; color: rgba(255, 255, 255, .92); font-weight: 600; font-size: 1rem; }

@media (max-width: 860px) {
	.ol-stat-bar__card { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.ol-stat-bar__stats { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
	.ol-stat-bar__stats .ol-stat + .ol-stat { border-left: 0; }
}

/* ---------- Header logo ---------- */
.ol-lp-header__img { height: 34px; width: auto; display: block; }

/* ---------- Logo / press strip (image logos) ---------- */
.ol-logos__row { gap: clamp(28px, 5vw, 72px); }
.ol-logos__img { max-height: 46px; width: auto; transition: filter .2s, opacity .2s; }
/* Design shows full-colour press logos — no grayscale overlay. */

/* ---------- Testimonials (polish) ---------- */
.ol-testimonials__grid { gap: clamp(20px, 2.4vw, 32px); }
.ol-testimonial { padding: 32px; border-radius: 20px; border-color: #f0e7ee; box-shadow: 0 16px 40px rgba(28, 1, 48, .08); display: flex; flex-direction: column; }
.ol-testimonial__stars { font-size: 1.15rem; letter-spacing: 3px; margin-bottom: 1.1rem; }
.ol-star { color: #f5a623; }
.ol-star--off { color: #e3dce6; }
.ol-testimonial__quote { flex: 1 1 auto; color: var(--ol-ink); }
.ol-testimonial__by { gap: 14px; margin-top: 1.5rem; }
.ol-testimonial__avatar { width: 52px; height: 52px; font-size: 1.15rem; }
.ol-testimonial__name { font-size: 1.05rem; }

/* ---------- Aggregate rating badges ---------- */
.ol-ratings { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px, 4vw, 56px); margin-top: clamp(32px, 4vw, 52px); }
.ol-rating { display: flex; align-items: center; gap: 10px; }
.ol-rating__stars { color: #f5a623; font-size: 1.2rem; letter-spacing: 2px; }
.ol-rating__score { font-size: 1.4rem; font-weight: 800; color: var(--ol-plum); }
.ol-rating__source { color: var(--ol-muted); font-weight: 600; }

/* =========================================================================
 * v0.4 — gradient system + design-match fixes
 * ====================================================================== */

/* ---------- Gradient surfaces consume the per-blade --ol-grad ---------- */
.ol-hero--bg-gradient { background: var(--ol-grad, var(--ol-hero-gradient)); }
.ol-stat-bar__card { background: var(--ol-grad, var(--ol-hero-gradient)); }
.ol-cta-banner--bg-brand { background: var(--ol-grad, var(--ol-hero-gradient)); }

/* ---------- .ol-on-light: dark text on light gradients ---------- */
.ol-hero.ol-on-light .ol-hero__heading,
.ol-hero.ol-on-light .ol-hero__subtext { color: var(--ol-plum); }
.ol-hero.ol-on-light .ol-hero__eyebrow { color: var(--ol-pink-deep); opacity: 1; }
.ol-hero.ol-on-light .ol-btn--secondary { color: var(--ol-pink-deep); border-color: var(--ol-pink-deep); }
.ol-hero.ol-on-light .ol-btn--secondary:hover { background: rgba(140, 2, 72, .08); }

.ol-stat-bar__card.ol-on-light,
.ol-stat-bar__card.ol-on-light .ol-stat-bar__heading,
.ol-stat-bar__card.ol-on-light .ol-stat__value { color: var(--ol-plum); }
.ol-stat-bar__card.ol-on-light .ol-stat__label,
.ol-stat-bar__card.ol-on-light .ol-stat-bar__footnote { color: var(--ol-muted); }
.ol-stat-bar__card.ol-on-light .ol-stat-bar__stats .ol-stat + .ol-stat { border-left-color: rgba(28, 1, 48, .15); }

.ol-cta-banner.ol-on-light .ol-cta-banner__heading,
.ol-cta-banner.ol-on-light .ol-cta-banner__sub { color: var(--ol-plum); }
.ol-cta-banner.ol-on-light .ol-btn--primary { background: var(--ol-pink); color: #fff; }

/* ---------- Media & Text — split panel (image on light, text on gradient) ---------- */
.ol-media-text--bg-brand { background: transparent; }
.ol-media-text--bg-brand .ol-media-text__text {
	background: var(--ol-grad, var(--ol-hero-gradient));
	color: #fff;
	border-radius: var(--ol-radius);
	padding: clamp(28px, 4vw, 48px);
}
.ol-media-text--bg-brand .ol-media-text__heading { color: #fff; }
.ol-media-text--bg-brand .ol-media-text__body { color: rgba(255, 255, 255, .92); }
.ol-media-text--bg-brand.ol-on-light .ol-media-text__text { color: var(--ol-ink); }
.ol-media-text--bg-brand.ol-on-light .ol-media-text__heading { color: var(--ol-plum); }
.ol-media-text--bg-brand.ol-on-light .ol-media-text__body { color: var(--ol-muted); }
.ol-media-text--bg-brand.ol-on-light .ol-eyebrow { color: var(--ol-pink-deep); }
.ol-media-text__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.75rem; }

/* ---------- Steps — image/placeholder thumbnails (no number badges) ---------- */
.ol-step { text-align: left; }
.ol-step__media { margin-bottom: 1.25rem; }
.ol-step__img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; display: block; }
.ol-step__placeholder {
	display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 14px;
	background: repeating-linear-gradient(45deg, #f6eef3, #f6eef3 14px, #fbf4f8 14px, #fbf4f8 28px);
}

/* ---------- Cards — icon ---------- */
.ol-card__icon { margin-bottom: 1.1rem; }
.ol-card__icon-img { width: 48px; height: 48px; object-fit: contain; display: block; }
.ol-card__icon-ph { display: block; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #ffd9e7, #ff8fc0); }

/* ---------- Section CTA placed above a grid ---------- */
.ol-section__actions--top { margin-top: 0; margin-bottom: clamp(32px, 4vw, 48px); }

/* ---------- Logos subtext ---------- */
.ol-logos__sub { margin: .75rem auto 0; max-width: 46ch; color: var(--ol-muted); font-size: 1.05rem; }

/* ---------- Testimonials — avatar/name/date header at top ---------- */
.ol-testimonial { text-align: left; }
.ol-testimonial__head { display: flex; align-items: center; gap: 12px; margin-bottom: 1.1rem; }
.ol-testimonial__date { margin-left: auto; align-self: flex-start; font-size: .8rem; color: var(--ol-muted); }
.ol-testimonial__quote { margin: 0; }

/* =========================================================================
 * v0.5 — typography (Archivo / Inter), heading colour, testimonial tiles
 * ====================================================================== */

.ol-landing {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #0f1125;
}

.ol-landing h1, .ol-landing h2, .ol-landing h3,
.ol-hero__heading, .ol-section__heading, .ol-stat-bar__heading,
.ol-media-text__heading, .ol-cta-banner__heading, .ol-step__title,
.ol-card__title, .ol-faq__q, .ol-prose h2, .ol-prose h3 {
	font-family: 'Archivo', sans-serif;
}

/* Section headings are brand pink on light backgrounds. */
.ol-section__heading { color: #e90154; font-weight: 700; }

/* Body copy colours to match the design. */
.ol-card__desc, .ol-step__desc, .ol-media-text__body, .ol-faq__a { color: #4a4b57; }
.ol-card__title, .ol-step__title { color: #0f1125; }

/* ---------- Testimonial tiles ---------- */
.ol-testimonials__grid { gap: 24px; align-items: start; }
.ol-testimonial {
	background: #fff;
	border: 0;
	border-radius: 22px;
	box-shadow: 0 18px 44px rgba(15, 17, 37, .10);
	padding: 28px;
	text-align: left;
}
.ol-testimonial__head { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
.ol-testimonial__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.ol-testimonial__avatar--initials {
	display: grid; place-items: center;
	background: var(--ol-pink); color: #fff;
	font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 1.2rem;
}
.ol-testimonial__meta { display: flex; flex-direction: column; }
.ol-testimonial__name { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.05rem; color: #0f1125; }
.ol-testimonial__title { font-size: .82rem; color: #717276; }
.ol-testimonial__date { margin-left: auto; align-self: flex-start; font-size: .82rem; color: #717276; }
.ol-testimonial__stars { font-size: 1.05rem; letter-spacing: 2px; margin-bottom: .85rem; }
.ol-testimonial__stars .ol-star { color: #1ec773; }
.ol-testimonial__stars .ol-star--off { color: #d7f3e5; }
.ol-testimonial__quote { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 1.02rem; line-height: 1.6; color: #0f1125; margin: 0; }

/* Rating badges (Trustpilot / Google style). */
.ol-ratings { margin-top: clamp(36px, 4vw, 56px); }
.ol-rating__stars { color: #00b67a; }
.ol-rating__score { font-family: 'Archivo', sans-serif; color: #0f1125; }
.ol-rating__source { color: #717276; }

/* =========================================================================
 * v0.6 — asymmetric testimonials, real review badges, exact hero colour
 * ====================================================================== */

/* Brand stars are magenta (not green). */
.ol-testimonial__stars .ol-star { color: #e90154; }
.ol-testimonial__stars .ol-star--off { color: #f6c9dc; }

/* Asymmetric layout: featured card left, two stacked compact cards right. */
@media (min-width: 861px) {
	.ol-testimonials__grid {
		grid-template-columns: 0.85fr 1.15fr;
		grid-template-rows: auto auto;
		align-items: stretch;
	}
	.ol-testimonial:first-child  { grid-column: 1; grid-row: 1 / span 2; }
	.ol-testimonial:nth-child(2) { grid-column: 2; grid-row: 1; }
	.ol-testimonial:nth-child(3) { grid-column: 2; grid-row: 2; }
	.ol-testimonial:not(:first-child) .ol-testimonial__stars { display: none; }
	.ol-testimonial:not(:first-child) { padding: 24px 28px; }
}

/* Real Trustpilot / Google badge graphic. */
.ol-testimonials__badges { text-align: center; margin-top: clamp(36px, 4vw, 56px); }
.ol-review-badges { width: 100%; max-width: 720px; height: auto; }

/* Hero heading exact colour from the file. */
.ol-hero.ol-on-light .ol-hero__heading { color: #1f1f1f; }

/* =========================================================================
 * v0.7 — chiro fidelity: light hero, pink media headings, tight panels, split logos
 * ====================================================================== */

/* Hero light / near-white background (form heroes). */
.ol-hero--bg-light { background: #fffaff; }

/* Media & Text heading: pink on light, white on the brand panel. */
.ol-media-text__heading { color: #e90154; }
.ol-media-text--bg-brand .ol-media-text__heading { color: #fff; }

/* Tighten spacing between stacked brand panels (design gaps ~15–35px). */
.ol-media-text { padding-block: clamp(14px, 1.6vw, 22px); }

/* Logos — "split" layout: heading + subtext left, logo grid right. */
.ol-logos--split .ol-logos__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ol-gap);
	align-items: center;
}
.ol-logos--split .ol-logos__head { text-align: left; margin: 0; max-width: none; }
.ol-logos--split .ol-logos__row {
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: clamp(24px, 3vw, 40px) clamp(36px, 4vw, 64px);
	justify-content: center;
	justify-items: center;
	align-items: center;
}
@media (max-width: 860px) {
	.ol-logos--split .ol-logos__inner { grid-template-columns: 1fr; }
	.ol-logos--split .ol-logos__head { text-align: center; }
	.ol-logos--split .ol-logos__row { justify-content: center; }
}

/* =========================================================================
 * v0.8 — wider container, white/green buttons, bubble FAQ
 * ====================================================================== */

/* Content column widened to match the design (~1256px). */
:root { --ol-container: 1256px; }

/* CTA palette: white + green (this template uses only these). */
.ol-btn--white { background: #fff; color: var(--ol-pink-deep); border-color: transparent; }
.ol-btn--white:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 0, 0, .16); }
.ol-btn--green { background: #46b9a7; color: #fff; border-color: transparent; }
.ol-btn--green:hover { background: #3aa593; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(70, 185, 167, .4); }

/* FAQ — bordered "bubble" cards (design: white, 1px #1f1f1f, r~23). */
.ol-faq__inner { max-width: 960px; }
.ol-faq__list { display: flex; flex-direction: column; gap: 16px; }
.ol-faq__item { border: 1px solid #1f1f1f; border-radius: 23px; background: #fff; padding: 2px 28px; }
.ol-faq__q { padding: 1.15rem 2rem 1.15rem 0; }
.ol-faq__q::after { top: 1.15rem; }
.ol-faq__a { padding: 0 0 1.15rem; }

/* =========================================================================
 * v0.9 — chiro POC: FAQ soft border, narrower FAQ + reviews, rounded CTA top
 * ====================================================================== */

/* FAQ accordion cards: match the design's soft border (1px rgba(31,31,31,.2))
 * plus a subtle elevation, replacing the hard black 1px border. */
.ol-faq__item {
	border: 1px solid rgba(31, 31, 31, .2);
	box-shadow: 0 8px 24px rgba(15, 17, 37, .06);
}

/* Shared narrower content width for the FAQ + Reviews blades. The design runs
 * both at ~955px against ~1200px standard sections (~80%); mapped to the dev
 * container (1256px) that is ~950px. */
:root { --ol-container-narrow: 950px; }
.ol-faq__inner,
.ol-testimonials .ol-container { max-width: var(--ol-container-narrow); }

/* Ending CTA: full-bleed band with rounded top corners only
 * (design: border-radius 69px 69px 0 0). */
.ol-cta-banner { border-radius: clamp(36px, 4.5vw, 60px) clamp(36px, 4.5vw, 60px) 0 0; }

/* Logos "split" ("Built for your brand"): top-align the text column with the
 * logo grid, and keep the subtext flush-left under the heading (design has the
 * eyebrow/heading/subtext all left-aligned at the same x). */
.ol-logos--split .ol-logos__inner { align-items: center; }
.ol-logos--split .ol-logos__head .ol-logos__sub { margin-inline: 0; }
@media (max-width: 860px) {
	/* Stacked: restore centered subtext alongside the centered head. */
	.ol-logos--split .ol-logos__head .ol-logos__sub { margin-inline: auto; }
}

/* =========================================================================
 * v0.10 — typography fidelity (measured against Figma type styles)
 *   Hero heading  : Archivo SemiBold 600, ~57.5px, line-height 1.2, -0.02em, #1F1F1F
 *   Hero subtext  : Inter 400, 20px, line-height 1.4, #5F605F
 *   Eyebrow label : Archivo Medium 500, 32px, line-height 1.2, no caps, #1F1F1F
 *   Section head  : Archivo SemiBold 600, 50px, line-height 1.2, #E90154
 * ====================================================================== */

/* Hero heading — was 800/1.07/-0.01em. */
.ol-hero__heading { font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }

/* Hero subtext — was 1.12rem/1.6/.92 opacity, plum colour from the on-light rule. */
.ol-hero__subtext { font-size: 1.25rem; line-height: 1.4; opacity: 1; }
.ol-hero.ol-on-light .ol-hero__subtext { color: #5f605f; }

/* Eyebrow label — design uses a large Archivo Medium dark label, not a small
 * uppercase pink kicker. (Brand-background eyebrows keep their own colour via
 * higher-specificity rules.) */
.ol-eyebrow {
	font-family: 'Archivo', sans-serif;
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: #1f1f1f;
	margin-bottom: .5rem;
}

/* Section heading — bump to 50px and SemiBold 600, no negative tracking. */
.ol-section__heading {
	font-size: clamp(2rem, 3.6vw, 3.125rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
}

/* Brand-pink emphasis span inside headings (editors mark a phrase with
 * *asterisks*). Design hero accent = #EE1D52. */
.ol-em { color: #ee1d52; }

/* Hero subtext column width from the design (446px). */
.ol-hero__subtext { max-width: 446px; }

/* Hero form placeholder — shown to editors when no HubSpot Form ID is set. */
.ol-hero__form-placeholder {
	background: rgba(255, 255, 255, .75);
	border: 2px dashed rgba(28, 1, 48, .25);
	border-radius: var(--ol-radius);
	padding: clamp(28px, 4vw, 44px);
	text-align: center;
	color: var(--ol-muted);
}
.ol-hero__form-placeholder-badge {
	display: inline-block;
	font-family: 'Archivo', sans-serif;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ol-pink);
	background: var(--ol-tint);
	padding: 4px 12px;
	border-radius: 999px;
	margin-bottom: 1rem;
}
.ol-hero__form-placeholder-title {
	font-family: 'Archivo', sans-serif;
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--ol-plum);
	margin: 0 0 .5rem;
}
.ol-hero__form-placeholder-text { margin: 0; font-size: .95rem; line-height: 1.6; }

/* "How it works" steps — white card with a light-red icon panel (per Figma:
 * card radius 23px / soft layered shadow / padding ~42px; panel fill
 * rgba(254,238,246,.45) radius 20px; text centered). */
.ol-step {
	background: #fff;
	border-radius: 23px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .01), 0 20px 40px rgba(0, 0, 0, .03), 0 60px 72px rgba(0, 0, 0, .02);
	padding: 0 clamp(22px, 2.6vw, 36px) clamp(26px, 3vw, 38px);
	text-align: center;
	overflow: hidden;
}
.ol-step__media {
	/* Full-width panel: flush to the card's top + side edges. */
	margin: 0 calc(-1 * clamp(22px, 2.6vw, 36px)) clamp(22px, 2.6vw, 32px);
	background: rgba(254, 238, 246, .45);
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(28px, 3.6vw, 52px);
}
.ol-step__media .ol-step__img {
	width: auto;
	height: clamp(96px, 9vw, 132px);
	max-width: 100%;
	aspect-ratio: auto;
	object-fit: contain;
	border-radius: 0;
}

/* CTA banner — button on the left (1/3), heading on the right (2/3). */
.ol-cta-banner__inner { justify-content: space-between; align-items: center; }
.ol-cta-banner__actions { flex: 1 1 0; }
.ol-cta-banner__text { flex: 2 1 0; text-align: right; }
/* Let the heading fill the full width of its (2/3) column. */
.ol-cta-banner__text .ol-cta-banner__heading { max-width: none; }

/* Media & Text heading — match the design's 50px Archivo SemiBold (was ~35px). */
.ol-media-text__heading { font-size: clamp(2rem, 3.6vw, 3.125rem); font-weight: 600; line-height: 1.2; }

/* Media & Text disclaimer — small italic small-print at the bottom of the blade. */
.ol-media-text__disclaimer {
	margin: clamp(20px, 2.5vw, 32px) 0 0;
	font-size: .78rem;
	font-style: italic;
	line-height: 1.55;
	color: var(--ol-muted);
}