/* =============================================================
   HOMEPAGE
   Loaded only on the front page. Section styles built from the
   homepage brief. Uses design tokens from tokens.css.
   ============================================================= */

/* =============================================================
   HERO
   ============================================================= */

/* Hero + trusted-by fill one viewport as a flex column (like a real hero).
   Uses min-height so short screens can still grow instead of clipping. */
.home-hero-screen {
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* fallback for browsers without svh */
	min-height: 100svh;
	background: linear-gradient(180deg, var(--color-teal-50), var(--color-background));
}

.home-hero {
	flex: 1 0 auto;
	display: flex;
	align-items: center;
	padding-block: clamp(var(--space-6), 4vh, var(--space-12));
}

/* The trusted-by strip lives inside the hero (under the headline), so it drops
   its section chrome and aligns left with the copy. */
.home-hero .trusted-by {
	padding: 0;
	border: 0;
	margin-top: var(--space-8);
}

.home-hero .trusted-by__label {
	text-align: left;
	margin-bottom: var(--space-4);
	color: var(--color-text-muted);
}

.home-hero .trusted-by__marquee {
	max-width: 32rem;
}

.home-hero__inner {
	width: 100%;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--space-12);
	align-items: center;
}

.home-hero h1 {
	font-family: 'Poppins', var(--font-heading);
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
	margin-bottom: 0;
}

/* "Never waste spend" reads 10% larger, "with" 10% smaller, so the emphasis
   builds toward the linked "Decisive Marketing" line below. */
.home-hero__lead {
	font-size: 1.1em;
}

.home-hero__with {
	font-size: 0.7em;
}

/* Emphasised, clickable phrase in the headline: keeps the CTA colour but
   reads as a link (subtle underline that thickens on hover/focus). */
.home-hero__dm-link {
	display: block; /* drop "Decisive Marketing" onto its own line */
	font-size: 1.3em; /* 30% larger than the rest of the title */
	color: var(--color-cta);
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.12em;
	transition: text-decoration-thickness var(--transition), color var(--transition);
}

.home-hero__dm-link:hover,
.home-hero__dm-link:focus-visible {
	color: var(--color-cta-hover);
	text-decoration-thickness: 0.14em;
}

/* "Free sample" hero callout box (right column). */
.fs-callout {
	background: var(--color-background);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-sm);
	padding: var(--space-8);
}

/* The callout leads with the value proposition as its headline. */
.fs-callout__title {
	font-size: var(--text-h4);
	line-height: var(--leading-snug);
	margin-bottom: var(--space-6);
}

.fs-callout__tell-more {
	display: inline;
	font-family: var(--font-heading);
	font-size: 0.9em;
	font-weight: var(--weight-heading);
	color: var(--brand-secondary);
	text-decoration: none;
	white-space: nowrap;
}

.fs-callout__tell-more::after {
	content: " →";
}

.fs-callout__tell-more:hover {
	color: var(--brand-secondary-hover);
	text-decoration: underline;
}

.fs-callout__body {
	color: var(--color-text-muted);
	font-size: var(--text-base);
	margin-bottom: var(--space-4);
}

.fs-callout__body:last-of-type {
	margin-bottom: var(--space-6);
}

/* The callout already provides the framed card, so the inline free-sample
   form drops its own border/padding/shadow and fills the callout width. */
.fs-callout .free-sample {
	max-width: none;
	margin-inline: 0;
}

.fs-callout .free-sample__form {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	gap: var(--space-4);
}

/* Video placeholder (16:9). */
.video-placeholder {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--color-teal-800);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-card);
	display: grid;
	place-items: center;
	overflow: hidden;
}

.video-placeholder__play {
	width: 72px;
	height: 72px;
	border-radius: var(--radius-full);
	background: var(--color-cta);
	display: grid;
	place-items: center;
	box-shadow: var(--shadow-lg);
}

.video-placeholder__play::before {
	content: "";
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent #ffffff;
	margin-left: 4px;
}

.video-placeholder__label {
	position: absolute;
	bottom: var(--space-3);
	right: var(--space-4);
	color: var(--color-teal-100);
	font-size: var(--text-small);
	font-weight: var(--weight-label);
}

/* =============================================================
   WHAT'S IN MY FREE SAMPLE (video)
   ============================================================= */
.home-whats-in-sample {
	text-align: center;
}

.home-whats-in-sample__media {
	max-width: 56rem;
	margin-inline: auto;
}

/* =============================================================
   PROOF ("How well does Decisive Marketing work?")
   ============================================================= */
.home-proof {
	text-align: center;
}

/* Three case study cards */
.proof-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-bottom: 3rem;
	text-align: left;
}

.proof-card {
	display: flex;
	flex-direction: column;
	background: var(--color-background);
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--transition), transform var(--transition);
}

.proof-card:hover {
	box-shadow: var(--shadow);
	transform: translateY(-3px);
	text-decoration: none;
}

/* Draft indicator — visible only to logged-in editors */
.proof-card--draft {
	border-style: dashed;
	opacity: 0.75;
}

/* Cover photo — full-bleed top image */
.proof-card__cover {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	flex-shrink: 0;
}

.proof-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.proof-card:hover .proof-card__cover img {
	transform: scale(1.04);
}

/* Card body — title + footer */
.proof-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.25rem 1.5rem 1.5rem;
	gap: 1rem;
}

/* Editorial headline */
.proof-card__title {
	font-family: 'Poppins', var(--font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-dark);
	margin: 0;
	flex: 1;
}

/* Footer row: client logo left, CTA right */
.proof-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--color-hairline);
}

/* Client logo */
.proof-card__client-logo {
	height: 32px;
	width: auto;
	max-width: 120px;
	display: block;
	object-fit: contain;
	object-position: left center;
}

.proof-card__client {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-text-muted);
}

/* "Find out how →" */
.proof-card__read {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--link-color);
	white-space: nowrap;
	flex-shrink: 0;
}

.proof-card:hover .proof-card__read {
	text-decoration: underline;
}

.home-proof__actions {
	display: flex;
	gap: var(--space-4);
	justify-content: center;
	flex-wrap: wrap;
}

/* =============================================================
   PROCESS (3 steps)
   ============================================================= */
.home-process {
	background: var(--color-muted-bg);
}

.home-process__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

.step-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	background: var(--color-background);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-card);
	padding: var(--space-8);
}

.step-card__num {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: var(--text-h3);
	color: var(--color-primary);
	line-height: 1;
}

.step-card h3 {
	margin: 0;
}

.step-card p {
	color: var(--color-text-muted);
	margin: 0;
}

.step-card__graphic {
	aspect-ratio: 4 / 3;
	margin-top: var(--space-2);
}

.step-card__how {
	margin-top: auto;
	font-family: var(--font-label);
	font-weight: var(--weight-label);
	color: var(--brand-primary);
}

.step-card__how::after {
	content: " \2192"; /* right arrow */
}

/* =============================================================
   DECISIVE MARKETING CYCLE
   ============================================================= */
/* =============================================================
   CYCLE (What is Decisive Marketing?)
   ============================================================= */
.home-cycle {
	text-align: center;
}

.home-cycle h2 a {
	color: inherit;
	text-decoration: none;
	border-bottom: 2px solid var(--color-primary);
}

.home-cycle h2 a:hover {
	color: var(--color-primary);
}

/* Shared icon circle — same component at two scales.
   .dm-icon--sm  : cycle nodes (56px, white bg, teal border)
   .dm-icon--lg  : graphic box first node (56px, dark-adapted, teal) */
.dm-icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
}

.dm-icon svg {
	width: 100%;
	height: 100%;
}

.dm-icon--sm {
	width: 36px;
	height: 36px;
	color: var(--color-primary);
}

.dm-icon--lg {
	width: 56px;
	height: 56px;
	color: var(--color-teal-300);
}

/* Title-row icon (matches sm, just sits beside the h3) */
.pillar__icon.dm-icon--sm {
	width: 40px;
	height: 40px;
}

/* ---- Pillar card base (icon-left + name-right bordered card) ---- */
.dm-pillar-card {
	display: flex;
	align-items: center;
	gap: var(--space-xl);
	padding: var(--space-xl) var(--space-2xl);
	background: var(--color-background);
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-sm);
}

.dm-pillar-card__icon.dm-icon {
	width: 64px;
	height: 64px;
	color: var(--color-teal-400);
	flex-shrink: 0;
}

.dm-pillar-card__name {
	font-family: 'Poppins', var(--font-heading);
	font-weight: 700;
	font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.375rem);
	color: var(--color-dark);
	line-height: 1.25;
}

/* ---- Cycle layout (triangle of pillar cards + SVG arcs) ---- */
.dm-cycle-layout {
	position: relative;
	max-width: 520px;
	margin-inline: auto;
	aspect-ratio: 480 / 380;
}

.dm-cycle-layout__arcs {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}

/* Cards at triangle vertices — 40% smaller than the base card */
.dm-cycle-layout .dm-pillar-card {
	position: absolute;
	transform: translate(-50%, -50%);
	z-index: 1;
	padding: 0.75rem 1rem;
	gap: 0.625rem;
}

.dm-cycle-layout .dm-pillar-card__icon.dm-icon {
	width: 38px;
	height: 38px;
}

.dm-cycle-layout .dm-pillar-card__name {
	font-size: 0.875rem;
	white-space: nowrap;
}

.dm-pillar-card--top {
	top: 17.1%;   /* 65 / 380 */
	left: 50%;    /* 240 / 480 */
}

.dm-pillar-card--br {
	top: 64.5%;   /* 245 / 380 */
	left: 71.7%;  /* 344 / 480 */
}

.dm-pillar-card--bl {
	top: 64.5%;   /* 245 / 380 */
	left: 28.3%;  /* 136 / 480 */
}

/* =============================================================
   PILLARS (three split problem / solution sections)
   ============================================================= */
.home-pillars .pillar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.home-pillars .pillar + .pillar {
	margin-top: 5rem;
}

.pillar--reverse .pillar__problem {
	order: 2;
}

/* Problem quote */
.pillar__quote {
	margin: 0;
	padding-left: 1.25rem;
	border-left: 4px solid var(--color-primary);
}

.pillar__quote p {
	margin: 0;
	font-weight: 500;
	line-height: 1.45;
	font-size: clamp(1.2rem, 1rem + 1vw, 1.75rem);
	color: #2b2b2b;
}

.pillar__quote p::before { content: "\201C"; }
.pillar__quote p::after  { content: "\201D"; }

/* Solution side */
.pillar__title-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

.pillar__icon {
	width: 2rem;
	height: 2rem;
	color: var(--color-primary);
	flex-shrink: 0;
}

.pillar__icon svg {
	width: 100%;
	height: 100%;
}

.pillar__title {
	margin: 0;
}

.pillar__lead {
	color: var(--color-text-muted, #64748b);
	font-size: 1.0625rem;
	margin-bottom: 1.5rem;
	margin-top: 0.25rem;
}

.pillar__how {
	display: inline-block;
	font-weight: 600;
	color: #0d9488;
	font-size: 0.9375rem;
}

.pillar__how::after {
	content: " \2192";
}

.pillar__how:hover {
	color: var(--color-link-hover, var(--color-primary));
	text-decoration: none;
}

/* =============================================================
   PILLAR GRAPHIC CARDS  (pgc)
   Bordered card with header (icon + title + sub) above a divider
   and a mini illustration below showing each step in action.
   ============================================================= */

/* Local fallbacks for design-system tokens not yet in WP tokens.css */
.pgc {
	--pgc-border: var(--color-hairline, #D7DCE2);
	--pgc-muted-bg: #EBEFF4;
	--pgc-muted-text: var(--color-text-muted, #595959);
}

/* Card wrapper */
.pgc {
	border: 1px solid var(--pgc-border);
	border-radius: var(--radius-card);
	padding: 1.25rem;
	background: var(--color-background);
	margin-bottom: 1.25rem;
}

/* Header: icon + title + sub stacked */
.pgc__header {
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

.pgc__icon.dm-icon {
	width: 40px;
	height: 40px;
	color: var(--color-teal-400);
	flex-shrink: 0;
}

.pgc__text {
	flex: 1;
	min-width: 0;
}

.pgc__title {
	margin: 0;
	font-family: 'Poppins', var(--font-heading);
	font-weight: 600;
	font-size: var(--text-base, 1rem);
	color: var(--color-dark);
	line-height: 1.3;
}

.pgc__sub {
	margin: 2px 0 0;
	font-size: var(--text-sm, 0.875rem);
	color: var(--pgc-muted-text);
	line-height: 1.45;
}

/* Divider */
.pgc__hr {
	border: 0;
	border-top: 1px solid var(--pgc-border);
	margin: 1rem 0;
}

/* Body: flex row containing step columns */
.pgc__body {
	display: flex;
	align-items: center;
	gap: 1rem;
	overflow-x: auto;
}

.pgc__body--center {
	justify-content: center;
}

/* Step column */
.pgc__step {
	flex-shrink: 0;
}

.pgc__step--flex {
	flex: 1;
	min-width: 0;
}

.pgc__step--center {
	text-align: center;
}

/* Small all-caps label above a graphic element */
.pgc__label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pgc-muted-text);
	margin-bottom: 0.5rem;
}

/* Connectors */
.pgc__arrow {
	color: var(--color-teal-500);
	font-size: 1.375rem;
	flex-shrink: 0;
	line-height: 1;
}

.pgc-bolt {
	color: var(--color-cta);
	flex-shrink: 0;
	display: flex;
}

/* ---- Placeholder bars ---- */
.pgc-bar {
	width: 100%;
	height: 5px;
	border-radius: 3px;
	background: var(--pgc-muted-bg);
}

.pgc-bar + .pgc-bar { margin-top: 3px; }

.pgc-bar--h6  { height: 6px; }
.pgc-bar--h7  { height: 7px; }
.pgc-bar--teal { background: var(--color-teal-300); }
.pgc-bar--w50  { width: 50%; }
.pgc-bar--w60  { width: 60%; }
.pgc-bar--w70  { width: 70%; }
.pgc-bar--w75  { width: 75%; }
.pgc-bar--w85  { width: 85%; }

/* ---- Trend-up icon ---- */
.pgc-trend {
	color: var(--color-teal-600, var(--color-primary));
	flex-shrink: 0;
	display: block;
}

/* ---- Customer persona mock ---- */
.pgc-persona {
	width: 170px;
	border: 1px solid var(--pgc-border);
	border-radius: 8px;
	padding: 10px;
}

.pgc-persona__hd {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.pgc-persona__av {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--color-teal-50);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pgc-persona__name {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pgc-persona__rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 8px;
	border-top: 1px solid var(--pgc-border);
}

.pgc-detail {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pgc-detail__l {
	width: 28px;
	height: 4px;
	border-radius: 3px;
	background: var(--pgc-muted-bg);
	flex-shrink: 0;
}

.pgc-detail__b {
	flex: 1;
	height: 5px;
	border-radius: 3px;
	background: var(--pgc-muted-bg);
}

.pgc-detail--hi .pgc-detail__b,
.pgc-detail__b--teal {
	background: var(--color-teal-400);
}

/* ---- Mini Google ad mock ---- */
.pgc-ad-mini {
	width: 130px;
	border: 1px solid var(--pgc-border);
	border-radius: 8px;
	padding: 10px;
}

.pgc-ad-mini__tag {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 7px;
}

.pgc-ad-mini__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--color-teal-100);
	flex-shrink: 0;
}

.pgc-ad-mini__spon {
	font-size: 8px;
	font-weight: 700;
	background: var(--pgc-muted-bg);
	padding: 1px 4px;
	border-radius: 3px;
}

.pgc-ad-mini__hl {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 7px;
}

.pgc-ad-mini__bd {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* ---- Mini landing page mock ---- */
.pgc-landing-mini {
	width: 140px;
	border: 1px solid var(--pgc-border);
	border-radius: 8px;
	overflow: hidden;
}

.pgc-landing-mini__chrome {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 4px 7px;
	background: var(--pgc-muted-bg);
	border-bottom: 1px solid var(--pgc-border);
}

.pgc-dots {
	display: flex;
	gap: 3px;
	flex-shrink: 0;
}

.pgc-dots i {
	display: block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-teal-300);
	font-style: normal;
}

.pgc-url-bar {
	flex: 1;
	height: 9px;
	border-radius: 5px;
	background: var(--color-background);
	border: 1px solid var(--pgc-border);
}

.pgc-landing-mini__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 8px;
	border-bottom: 1px solid var(--pgc-border);
}

.pgc-landing-mini__logo {
	width: 20px;
	height: 5px;
	border-radius: 3px;
	background: var(--color-teal-400);
}

.pgc-landing-mini__cta-dot {
	width: 22px;
	height: 10px;
	border-radius: 3px;
	background: var(--color-teal-500);
}

.pgc-landing-mini__body {
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.pgc-landing-mini__btn {
	width: 54px;
	height: 12px;
	border-radius: 3px;
	background: var(--color-teal-500);
	margin-top: 4px;
}

/* ---- Ideate: two mocks side by side ---- */
.pgc-ideate-mocks {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	justify-content: center;
}

/* ---- Badged mock (icon overlapping top-centre) ---- */
.pgc-badged {
	position: relative;
	padding-top: 18px;
	display: inline-block;
}

.pgc-badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	width: 32px;
	height: 32px;
}

.pgc-badge svg {
	width: 100%;
	height: 100%;
}

.pgc-badge--orange {
	color: var(--color-cta);
}

/* ---- Results panel ---- */
.pgc-results {
	width: 190px;
	border: 1px solid var(--pgc-border);
	border-radius: 8px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pgc-result-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pgc-result-row__label {
	width: 30px;
	font-size: 10px;
	font-weight: 600;
	color: var(--pgc-muted-text);
	flex-shrink: 0;
}

.pgc-result-row__track {
	flex: 1;
	height: 6px;
	border-radius: 3px;
	background: var(--color-teal-100);
	overflow: hidden;
}

.pgc-result-row__fill {
	height: 100%;
	background: var(--color-teal-400);
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
	.pgc-persona,
	.pgc-results { width: 100%; }
	.pgc__body { gap: 0.625rem; }
	.pgc-ad-mini { width: 110px; }
	.pgc-landing-mini { width: 120px; }
}

/* =============================================================
   (Legacy) dark teal graphic panel — no longer rendered,
   keeping rule so stale HTML in cache doesn't break.
   ============================================================= */
.pillar-graphic {
	background: linear-gradient(145deg, #1f3d39, #142e2a);
	border-radius: 10px;
	padding: 1.75rem 1.5rem;
	color: #e8dcc8;
	overflow: hidden;
}

/* Flow layout used by interpret-ideate and do-deliver */
.pg-flow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.pg-node {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
}

.pg-node__label {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #e8dcc8;
	opacity: 0.75;
}

.pg-arrow {
	color: #d9a066;
	font-size: 1.25rem;
	font-weight: 800;
	flex-shrink: 0;
}

/* Customer avatar circle */
.pg-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 2px solid rgba(232, 220, 200, 0.3);
	overflow: hidden;
	background: rgba(255,255,255,0.06);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}

.pg-avatar svg {
	width: 100%;
	height: 100%;
}

/* dm-icon inside the dark graphic box is .dm-icon--lg (defined above) */

/* Pain Point tile */
.pg-pain-tile {
	background: #fff;
	border-radius: 6px;
	padding: 0.5rem 0.6rem;
	width: 78px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	text-align: center;
}

.pg-pain-tile__icon {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fef3c7;
	border: 1.5px solid #d97706;
	color: #d97706;
	font-weight: 800;
	font-size: 11px;
	display: grid;
	place-items: center;
	flex-shrink: 0;
}

.pg-pain-tile__title {
	font-size: 7px;
	font-weight: 700;
	color: #1a1a1a;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.pg-pain-tile__sub {
	font-size: 6px;
	color: #666;
	line-height: 1.3;
}

/* Google Ad card + Web Page card (reusable) */
.pg-card {
	background: #fff;
	border-radius: 5px;
	padding: 0.5rem;
	width: 84px;
	color: #1a1a1a;
	position: relative;
}

.pg-card--ad .pg-card__tag {
	font-size: 6px;
	color: #188038;
	font-weight: 600;
	margin-bottom: 2px;
}

.pg-card--ad .pg-card__url {
	font-size: 6px;
	color: #555;
	margin-bottom: 3px;
}

.pg-card--ad .pg-card__headline {
	font-size: 7.5px;
	font-weight: 700;
	color: #1a0dab;
	line-height: 1.2;
	margin-bottom: 2px;
}

.pg-card--ad .pg-card__desc {
	font-size: 6px;
	color: #444;
	line-height: 1.3;
}


/* Web Page card */
.pg-card--page .pg-card__dots {
	display: flex;
	gap: 2px;
	margin-bottom: 4px;
}

.pg-card--page .pg-card__dots span {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #e0e0e0;
}

.pg-card--page .pg-card__nav-bar {
	height: 3px;
	background: #f0f0f0;
	border-radius: 1px;
	margin-bottom: 4px;
}

.pg-card--page .pg-card__hero-block {
	height: 22px;
	background: linear-gradient(135deg, #1f3d39, #142e2a);
	border-radius: 3px;
	margin-bottom: 5px;
}

.pg-card--page .pg-card__cta-btn {
	height: 8px;
	width: 36px;
	background: var(--color-primary);
	border-radius: 2px;
}


/* Speed badge ("Days, not months") between Web Page and Website */
.pg-speed-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	background: rgba(217,160,102,0.15);
	border: 1px solid rgba(217,160,102,0.4);
	border-radius: 6px;
	padding: 0.35rem 0.5rem;
}

.pg-speed-badge__icon {
	font-size: 1rem;
	line-height: 1;
}

.pg-speed-badge__label {
	font-size: 0.5625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #d9a066;
	white-space: nowrap;
}

/* Website globe icon */
.pg-website-icon {
	width: 48px;
	height: 48px;
}

.pg-website-icon svg {
	width: 100%;
	height: 100%;
}

/* Report and Refine layout */
.pg-refine-layout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.pg-roi-compare {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.pg-roi-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	text-align: center;
}

.pg-roi-item__label {
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #e8dcc8;
	opacity: 0.6;
}

.pg-roi-item--before .pg-roi-item__value {
	color: rgba(232,220,200,0.6);
}

.pg-roi-item--after .pg-roi-item__value {
	color: #d9a066;
	font-weight: 700;
}

.pg-roi-item__value {
	font-size: 0.75rem;
	line-height: 1.3;
}

.pg-roi-arrow {
	color: #d9a066;
	font-size: 1rem;
	flex-shrink: 0;
}

.pg-plan {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.pg-plan__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(232,220,200,0.15);
	border-radius: 999px;
	padding: 0.3rem 0.75rem;
	color: #e8dcc8;
	white-space: nowrap;
}

.pg-plan__item--up .pg-plan__arrow {
	color: #6ee7b7;
}

.pg-plan__item--down .pg-plan__arrow {
	color: #d9a066;
}

/* =============================================================
   PEOPLE
   ============================================================= */
.home-people__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-12);
	align-items: center;
}

.home-people__photo {
	aspect-ratio: 4 / 3;
	background: var(--color-teal-100);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-card);
	display: grid;
	place-items: center;
	color: var(--color-teal-700);
	font-weight: var(--weight-label);
}

.home-people__badge {
	display: inline-block;
	background: var(--color-teal-100);
	color: var(--color-teal-700);
	border-radius: var(--radius-full);
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-small);
	font-weight: var(--weight-label);
	margin-bottom: var(--space-4);
}

.home-people p {
	color: var(--color-text-muted);
}

.home-people .team-grid {
	margin-top: var(--space-12);
}

/* =============================================================
   FAQ
   ============================================================= */
.home-faq__inner {
	max-width: 48rem;
	margin-inline: auto;
}

.faq-item {
	border-bottom: var(--border-width) solid var(--color-hairline);
}

.faq-item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
	padding-block: var(--space-4);
	cursor: pointer;
	list-style: none;
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--text-h4);
	color: var(--color-heading);
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::after {
	content: "+";
	color: var(--color-primary);
	font-size: var(--text-h3);
	line-height: 1;
	flex-shrink: 0;
}

.faq-item[open] summary::after {
	content: "\2013"; /* en dash */
}

.faq-item__answer {
	padding-bottom: var(--space-4);
	color: var(--color-text-muted);
	margin: 0;
}

/* =============================================================
   TRUSTED BY (logo marquee)
   ============================================================= */
.trusted-by {
	padding-block: var(--space-12);
	border-bottom: var(--border-width) solid var(--color-hairline);
}

.trusted-by__label {
	text-align: center;
	font-family: var(--font-label);
	font-size: var(--text-label);
	font-weight: var(--weight-label);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-muted-text);
	margin-bottom: var(--space-8);
}

.trusted-by__marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.trusted-by__track {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	width: max-content;
	animation: decima-marquee 30s linear infinite;
}

.trusted-by__item {
	display: inline-flex;
	align-items: center;
}

.trusted-by__item img {
	height: 40px;
	width: auto;
}

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

@media (prefers-reduced-motion: reduce) {
	.trusted-by__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-8);
	}
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 900px) {
	.home-hero__inner,
	.home-people__inner,
	.home-pillars .pillar {
		grid-template-columns: 1fr;
	}

	.home-process__grid {
		grid-template-columns: 1fr;
	}

	/* Stack pillars in reading order (problem quote first). */
	.pillar--reverse .pillar__problem {
		order: 0;
	}

	.pg-flow {
		gap: 0.5rem;
	}

	.pg-refine-layout {
		flex-direction: column;
		gap: 1rem;
	}
}

@media (max-width: 700px) {
	.proof-cards,
	.team-grid {
		grid-template-columns: 1fr;
	}

	.pg-flow {
		flex-direction: column;
	}

	.pg-flow .pg-arrow {
		transform: rotate(90deg);
	}

	/* Collapse cycle triangle to a vertical stack */
	.dm-cycle-layout {
		aspect-ratio: unset;
		display: flex;
		flex-direction: column;
		gap: var(--space-md);
		max-width: 360px;
	}

	.dm-cycle-layout__arcs {
		display: none;
	}

	.dm-cycle-layout .dm-pillar-card {
		position: static;
		transform: none;
	}
}