/* ============================================================
   GoWP marketing site: shared design system
   Forest ground, lime action color, Newsreader display serif over
   Figtree, pill controls, inset rounded panels, soft shadows.
   ============================================================ */

:root {
	--ink: #0b1f1b;
	--forest: #123529;
	--forest-deep: #0c281f;
	--paper: #ffffff;
	--ground: #f4f6f2;
	--border: #e4eae2;
	--muted: #5c6a62;
	--sage: #a9c4b4;
	--sage-dim: #7e9c8b;
	--accent: #0b8a62;
	--accent-hover: #0a7754;
	--lime: #d9f760;
	--lime-hover: #e6ff7d;
	--sans: "Figtree Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--serif: "Lora Variable", Georgia, "Times New Roman", serif;
	--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
	--radius: 18px;
	--radius-panel: 28px;
	--shadow-card: 0 1px 2px rgba(11, 31, 27, 0.03), 0 20px 44px -18px rgba(11, 31, 27, 0.14);
	--shadow-float: 0 2px 8px rgba(0, 0, 0, 0.16), 0 36px 80px -12px rgba(0, 0, 0, 0.34);
}

* { margin: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	font-family: var(--sans);
	background: var(--paper);
	color: var(--ink);
	font-size: 16.5px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
h1, h2 {
	font-family: var(--serif);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
h3 { line-height: 1.2; text-wrap: balance; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}
.on-dark a:focus-visible, .on-dark button:focus-visible, .on-dark input:focus-visible {
	outline-color: var(--lime);
}

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	font-family: var(--sans);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 9%, #fff);
	border-radius: 999px;
	padding: 6px 14px;
}
.on-dark .eyebrow {
	color: var(--lime);
	background: rgba(217, 247, 96, 0.12);
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--sans);
	font-size: 15.5px;
	font-weight: 600;
	padding: 13px 26px;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
	white-space: nowrap;
}
.btn-primary:hover, .btn-lime:hover { box-shadow: 0 10px 24px -8px rgba(11, 31, 27, 0.35); }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { border-color: var(--border); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }
.on-dark .btn-primary, .on-dark .btn-lime, .btn-lime { background: var(--lime); color: var(--forest-deep); }
.on-dark .btn-primary:hover, .on-dark .btn-lime:hover, .btn-lime:hover { background: var(--lime-hover); }
.on-dark .btn-ghost { border-color: rgba(255, 255, 255, 0.22); color: #fff; background: transparent; }
.on-dark .btn-ghost:hover { border-color: rgba(255, 255, 255, 0.55); }

/* ---------- Dark shell (nav + hero share the forest ground) ---------- */
.shell {
	background:
		radial-gradient(1100px 600px at 82% -10%, rgba(217, 247, 96, 0.07), transparent 55%),
		radial-gradient(900px 520px at -8% 108%, rgba(11, 138, 98, 0.25), transparent 55%),
		var(--forest);
	color: #fff;
	/* No overflow clip here: it would crop the Features dropdown on pages
	   with a short hero. Horizontal bleed is already handled by
	   `body { overflow-x: clip }`. */
}

nav .nav-inner {
	display: flex;
	align-items: center;
	gap: 36px;
	height: 80px;
}
.logo { display: flex; align-items: center; }
.logo:hover { text-decoration: none; }
.logo img {
	height: 40px;
	width: auto;
	display: block;
	transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.logo:hover img { transform: translateY(-1px) scale(1.03); }
.nav-links {
	display: flex;
	align-items: center;
	gap: 2px;
	font-size: 15px;
	font-weight: 500;
	margin: 0 auto;
}
.nav-links > a, .nav-links .menu-label {
	color: rgba(255, 255, 255, 0.78);
	padding: 9px 15px;
	border-radius: 999px;
	transition: color 0.18s ease, background 0.18s ease;
}
.nav-links > a:hover, .nav-links .menu-label:hover { color: #fff; text-decoration: none; }
.nav-links > a:hover, .nav-links > a.active { background: rgba(255, 255, 255, 0.09); color: #fff; }
.nav-links > a.active { font-weight: 600; }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-cta .btn { padding: 9px 18px; font-size: 14.5px; }

/* Mobile nav (hamburger + slide-down panel, <=960px) */
.nav-burger {
	display: none;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 10px;
	width: 42px;
	height: 42px;
	padding: 0;
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.nav-burger i {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: #fff;
	transition: transform 0.22s ease, opacity 0.22s ease;
}
.nav-burger[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-menu {
	display: none;
	position: absolute;
	top: 80px;
	left: 0;
	right: 0;
	background: var(--forest-deep);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	padding: 10px 24px 22px;
	z-index: 70;
	box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.5);
}
.mobile-menu.open { display: block; }
.mm-label {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sage-dim);
	margin: 18px 0 6px;
}
.mobile-menu a {
	display: block;
	color: rgba(255, 255, 255, 0.85);
	font-size: 16px;
	font-weight: 500;
	padding: 9px 0;
}
.mobile-menu a:hover { color: #fff; text-decoration: none; }
.mm-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.mm-cta {
	display: flex;
	gap: 12px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mm-cta .btn { flex: 1; justify-content: center; text-align: center; }
@media (max-width: 960px) {
	nav { position: relative; }
	.nav-burger { display: inline-flex; }
	.nav-cta .btn-ghost { display: none; }
}

/* Features dropdown (CSS-only, hover + keyboard focus) */
.has-menu { position: relative; }
.menu-label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: none;
	border: none;
	font: inherit;
	cursor: pointer;
}
.has-menu:hover .menu-label,
.has-menu:focus-within .menu-label {
	background: rgba(255, 255, 255, 0.09);
	color: #fff;
}
.menu-label::after {
	content: "";
	width: 6px; height: 6px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.has-menu:hover .menu-label::after,
.has-menu:focus-within .menu-label::after { transform: translateY(1px) rotate(225deg); }

.menu {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	width: 620px;
	max-width: calc(100vw - 40px);
	background: #fff;
	color: var(--ink);
	border: 1px solid rgba(11, 31, 27, 0.06);
	border-radius: 20px;
	box-shadow:
		0 1px 2px rgba(11, 31, 27, 0.05),
		0 34px 80px -20px rgba(11, 31, 27, 0.45);
	padding: 12px;
	z-index: 60;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-8px) scale(0.985);
	transform-origin: top center;
	transition:
		opacity 0.2s ease,
		transform 0.26s cubic-bezier(0.2, 0.7, 0.3, 1),
		visibility 0.26s;
}
/* invisible bridge so the pointer can cross the gap without closing */
.menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
/* caret pointing back at the trigger */
.menu::after {
	content: "";
	position: absolute;
	top: -6.5px; left: 50%;
	width: 12px; height: 12px;
	margin-left: -6px;
	background: #fff;
	border-left: 1px solid rgba(11, 31, 27, 0.06);
	border-top: 1px solid rgba(11, 31, 27, 0.06);
	border-radius: 3px 0 0 0;
	transform: rotate(45deg);
}
.has-menu:hover .menu, .has-menu:focus-within .menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0) scale(1);
}

.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.menu-grid a {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 11px 12px;
	border-radius: 13px;
	color: var(--ink);
	transition: background 0.16s ease, transform 0.16s ease;
}
.menu-grid a:hover { background: var(--ground); text-decoration: none; transform: translateY(-1px); }
.m-icon {
	flex: none;
	width: 34px; height: 34px;
	border-radius: 11px;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--accent) 10%, #fff);
	color: var(--accent);
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.m-icon svg { width: 17px; height: 17px; }
.menu-grid a:hover .m-icon { background: var(--accent); color: #fff; transform: scale(1.07); }
.m-title { font-weight: 650; font-size: 14px; display: block; letter-spacing: -0.01em; }
.m-sub { font-size: 12.5px; color: var(--muted); display: block; line-height: 1.4; }

.menu-foot {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-top: 8px;
	padding: 13px 15px;
	border-radius: 15px;
	color: #fff;
	background: linear-gradient(100deg, var(--forest) 0%, #18432f 100%);
	transition: filter 0.18s ease;
}
.menu-foot:hover { text-decoration: none; filter: brightness(1.14); }
.mf-badge {
	flex: none;
	background: var(--lime);
	color: var(--forest-deep);
	font-size: 10px; font-weight: 800;
	letter-spacing: 0.09em; text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 999px;
}
.mf-text { font-size: 12.5px; color: rgba(255, 255, 255, 0.72); line-height: 1.4; }
.mf-text strong { display: block; color: #fff; font-weight: 650; font-size: 14px; }
.mf-arrow { margin-left: auto; color: var(--lime); font-size: 17px; transition: transform 0.2s ease; }
.menu-foot:hover .mf-arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
	.logo img, .menu, .menu-label::after, .menu-grid a, .m-icon, .mf-arrow { transition: none; }
}

/* ---------- Home hero ---------- */
.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
	gap: 48px;
	align-items: center;
	padding: 72px 0 88px;
}
.kicker {
	display: inline-flex;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	padding: 7px 16px;
	font-family: var(--sans);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--sage);
}
.hero h1 {
	font-size: clamp(3rem, 6.2vw, 4.7rem);
	font-weight: 580;
	letter-spacing: -0.012em;
	color: #f4f7ef;
	margin: 18px 0 22px;
}
/* A hero heading with a manual break promises exactly two lines; size it so
   the longer line fits the text column at every viewport (the .wrap plateau
   caps the column near 526px, so the ceiling is what keeps laptops at two
   lines). Browsers without :has() fall back to the wrapped layout above. */
.hero h1:has(br) { font-size: clamp(2rem, 4vw, 3.2rem); }
.hero .sub {
	font-size: 18.5px;
	line-height: 1.6;
	color: var(--sage);
	max-width: 46ch;
}
.hero .sub strong { color: #fff; font-weight: 600; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.capture {
	display: flex;
	margin-top: 32px;
	max-width: 500px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 12px;
	padding: 5px;
	gap: 5px;
}
.capture input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	color: #fff;
	font-family: var(--sans);
	font-size: 15.5px;
	padding: 10px 14px;
}
.capture input::placeholder { color: rgba(255, 255, 255, 0.45); }
.capture input:focus { outline: none; }
.capture .btn { border-radius: 999px; }
.capture-note {
	margin-top: 14px;
	font-size: 13.5px;
	color: var(--sage-dim);
	max-width: 52ch;
}
.on-dark .capture-note strong { color: #fff; font-weight: 600; }
.hero-fineprint {
	margin-top: 18px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sage-dim);
}

/* ---------- Feature-page hero (compact dark) ---------- */
.page-hero { padding: 64px 0 72px; }
.page-hero h1 {
	font-size: clamp(2.3rem, 4.6vw, 3.5rem);
	color: #f4f7ef;
	margin: 18px 0 18px;
	max-width: 22ch;
}
.page-hero .sub {
	font-size: 18px;
	line-height: 1.6;
	color: var(--sage);
	max-width: 56ch;
}
.page-hero .hero-ctas { margin-top: 28px; }
.statbar {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 52px;
}
.stat {
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	padding: 18px 20px;
}
.stat .s-big {
	font-family: var(--serif);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--lime);
	/* Proportional figures: these are standalone display numbers, not a
	   column, and Lora's tabular digits leave a gap in "Since 2014". */
	font-variant-numeric: proportional-nums;
}
.stat .s-sub { font-size: 13.5px; color: var(--sage); line-height: 1.5; margin-top: 4px; }

/* ---------- Sections ----------
   Tinted and dark sections render as inset rounded panels floating
   on the white page (the Lattice rhythm); plain sections stay
   full-bleed white. */
section { padding: 80px 0; }
.ground-section,
.band,
.agency-band,
.final {
	width: min(1280px, calc(100% - 32px));
	margin-inline: auto;
	border-radius: var(--radius-panel);
	padding: 64px 0;
}
section + .ground-section,
section + .band,
section + .agency-band,
section + .final,
.ground-section + section,
.band + section,
.agency-band + section { margin-top: 8px; }
.final { margin-bottom: 28px; }
.ground-section { background: var(--ground); }

/* Gentle rise-and-fade as panels enter the viewport (script in Base).
   Short and early: the observer fires while the section is still below
   the fold, so a visitor never scrolls onto a blank panel. The resting
   state of every element is its complete state. */
html.js :is(body, main, .wp-block-post-content) > section {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
html.js :is(body, main, .wp-block-post-content) > section.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html.js :is(body, main, .wp-block-post-content) > section { opacity: 1; transform: none; transition: none; }
}

.section-head {
	max-width: 680px;
	margin: 0 auto 56px;
	text-align: center;
}
.section-head h2 {
	font-size: clamp(1.9rem, 3.4vw, 2.7rem);
	margin: 16px 0 14px;
}
.section-head p { color: var(--muted); font-size: 17px; max-width: 56ch; margin-inline: auto; }

.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 72px;
	align-items: center;
}
.split h2 {
	font-size: clamp(1.8rem, 3.2vw, 2.5rem);
	margin: 16px 0 16px;
}
.split p.body, .story p.body { color: var(--muted); font-size: 16.5px; max-width: 50ch; }
.split p.body + p.body, .story p.body + p.body { margin-top: 12px; }
.split p.body strong, .story p.body strong { color: var(--ink); }
/* A narrative section with no facing column. It uses the full wrap, so the
   prose runs as two columns rather than one very long line; the paragraphs
   drop their .split measure because the column itself now sets it. */
.story-cols {
	columns: 2;
	column-gap: 64px;
	margin-top: 30px;
}
.story-cols p.body { max-width: none; break-inside: avoid; margin-top: 0; }
.story-cols p.body + p.body { margin-top: 14px; }
@media (max-width: 780px) {
	.story-cols { columns: 1; }
}
.split .cta-row { margin-top: 26px; }
.cta-row--center { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.band .split p.body { color: var(--sage); }
.band .split p.body strong { color: #fff; }
.band .split h2 { color: #f2f6ee; }

.checklist { list-style: none; padding: 0; margin: 20px 0 0; }
.checklist li {
	padding: 7px 0 7px 30px;
	position: relative;
	font-size: 15.5px;
	font-weight: 500;
}
.checklist li::before {
	content: "";
	position: absolute;
	left: 0; top: 10px;
	width: 18px; height: 18px;
	border-radius: 50%;
	background-color: #e7f4ee;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230b8a62" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
	background-size: 10px;
	background-position: center;
	background-repeat: no-repeat;
}

/* Pain strip: the "why it matters" callout */
.pain {
	border-left: 3px solid var(--accent);
	background: var(--ground);
	border-radius: 0 12px 12px 0;
	padding: 22px 26px;
	max-width: 760px;
}
.pain-list { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; max-width: 46ch; }
.pain-list li { font-size: 15.5px; color: var(--ink); padding-left: 22px; position: relative; }
.pain-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
@media (max-width: 600px) {
	.pain-list { grid-template-columns: minmax(0, 1fr); }
}
.pain .p-label {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 8px;
}
.pain h3 {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0 0 8px;
	max-width: 40ch;
}
.pain p { font-size: 16.5px; color: var(--ink); max-width: 62ch; }

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 26px 24px;
	background: var(--paper);
	box-shadow: var(--shadow-card);
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.card:hover { transform: translateY(-2px); border-color: #c8d6d0; }
.card .icon {
	width: 38px; height: 38px;
	border-radius: 10px;
	background: #e7f4ee;
	color: var(--accent);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 16px;
}
.card .icon svg { width: 18px; height: 18px; }
.card h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 6px; }
.card p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }

/* Grouped card grids (free tier vs paid add-on) */
.tier-group + .tier-group { margin-top: 40px; }
.tier-group .tier-label {
	font-family: var(--mono);
	font-size: 12px; font-weight: 600;
	letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 16px;
}

/* Compact feature tiles (eight-grid & rails) */
.eight-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.thing {
	background: var(--paper);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 20px;
	box-shadow: var(--shadow-card);
	display: block;
	color: var(--ink);
}
a.thing:hover { text-decoration: none; border-color: var(--accent); }
.thing .th-head {
	display: flex; align-items: center; gap: 9px;
	font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
	margin-bottom: 6px;
}
.thing .th-head svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
.thing p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* NEXT cards at feature page foot */
.next-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.next-card {
	display: block;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--paper);
	padding: 22px 24px;
	color: var(--ink);
	box-shadow: var(--shadow-card);
}
.next-card:hover { text-decoration: none; border-color: var(--accent); }
.next-card .n-label {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 6px;
}
.next-card h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 4px; }
.next-card p { font-size: 14px; color: var(--muted); }

/* Plan-inclusion note band */
.plan-note {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--paper);
	box-shadow: var(--shadow-card);
	padding: 28px 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.plan-note h3 { font-size: 18px; font-weight: 750; letter-spacing: -0.02em; }
.plan-note p { font-size: 14.5px; color: var(--muted); max-width: 58ch; margin-top: 4px; }

/* findings list (visibility) */
.findings { display: grid; gap: 10px; }
.finding {
	display: flex;
	gap: 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--paper);
	padding: 13px 16px;
	align-items: baseline;
}
.finding .f-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; transform: translateY(-1px); }
.f-warn { background: #d99b2b; }
.f-ok { background: #23a06e; }
.finding h4 { font-size: 14px; font-weight: 700; }
.finding p { font-size: 13px; color: var(--muted); }
/* Agencies "Portfolio" section: the findings sit in a framed card beside
   the copy (.split) so the section fills its width on a white ground. */
.portfolio-shot { padding: 18px; border-color: var(--border); box-shadow: var(--shadow-card); }
.portfolio-shot .findings { gap: 10px; }

/* receipt (agencies AI-editor math) */
.receipt {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius);
	padding: 26px 28px;
	font-family: var(--mono);
	font-size: 13.5px;
	line-height: 2.1;
	color: var(--sage);
}
.receipt .row { display: flex; justify-content: space-between; gap: 16px; }
.receipt .row .val { color: #fff; font-weight: 600; white-space: nowrap; }
.receipt .divider { border-top: 1px dashed rgba(255, 255, 255, 0.2); margin: 10px 0; }
.receipt .strike { text-decoration: line-through; opacity: 0.55; }
.receipt .highlight .val { color: var(--lime); }

/* floating hero mock stage (home) */
.hero-visual { position: relative; min-width: 0; }
.float-stage { transform: none; }

/* Real product screenshots, framed */
.shot-card {
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--shadow-float);
	border: 1px solid rgba(255, 255, 255, 0.35);
}
.shot-card img { display: block; width: 100%; height: auto; }
.main-shot { width: 94%; margin-left: auto; }
.activity-shot {
	max-width: 540px;
	justify-self: center;
	border-color: var(--border);
	box-shadow: var(--shadow-card);
}
.editor-shot {
	max-width: 440px;
	justify-self: center;
	border-color: var(--border);
	box-shadow: var(--shadow-card);
}

.hero-proof { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 40px 0 46px; }
.trust-stats { margin-top: 0; gap: 20px; }
.trust-stats .stat {
	border: none;
	background: transparent;
	padding: 0;
	text-align: center;
}
.trust-stats .stat .s-big { font-size: clamp(28px, 3.4vw, 42px); }
.trust-stats .stat .s-sub { font-size: 15px; color: var(--sage); margin-top: 6px; }
.hero-proof .lede { font-size: 14.5px; color: var(--sage); }
.hero-proof .stats {
	display: flex; flex-wrap: wrap; gap: 10px 28px;
	font-family: var(--mono);
	font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--sage-dim);
}

/* brand switcher (agencies hero) */
.brand-switch { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.brand-switch .label {
	font-family: var(--mono);
	font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}
.brand-chip {
	font-size: 13px; font-weight: 600;
	font-family: var(--sans);
	color: rgba(255, 255, 255, 0.85);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 99px;
	padding: 6px 14px;
	cursor: pointer;
	display: inline-flex; align-items: center; gap: 7px;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.brand-chip .swatch { width: 9px; height: 9px; border-radius: 50%; }
.brand-chip:hover { background: rgba(255, 255, 255, 0.16); }
.brand-chip[aria-pressed="true"] { background: #fff; color: var(--forest-deep); border-color: #fff; }

/* ---------- Bands / pricing / quotes / FAQ / steps / final ---------- */
.band { background: var(--forest); color: #fff; }
.band .eyebrow { color: var(--lime); }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.step {
	background: var(--paper);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 26px 24px;
	box-shadow: var(--shadow-card);
}
.step .s-num {
	font-family: var(--mono);
	font-size: 12px; font-weight: 700;
	color: var(--accent);
	letter-spacing: 0.1em;
	margin-bottom: 14px;
}
.step h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 6px; }
.step p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }

.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.price-card {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--paper);
	padding: 30px 28px;
	display: flex; flex-direction: column;
	box-shadow: var(--shadow-card);
}
.price-card.featured { border-color: var(--accent); border-width: 1.5px; position: relative; }
/* The Astro markup put the badge text in a data-badge attribute and drew it
   with ::before. Block markup cannot carry arbitrary data attributes, so the
   badge is a real .p-badge element here; both spellings share one ruleset. */
.price-card.featured:has(.p-badge)::before { content: none; }
.price-card.featured::before,
.price-card .p-badge {
	position: absolute;
	top: -11px; left: 24px;
	background: var(--accent); color: #fff;
	font-family: var(--mono);
	font-size: 10.5px; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 99px;
}
.price-card.featured::before { content: attr(data-badge); }
.price-card .p-badge { display: block; width: max-content; }
.price-card .p-label {
	font-family: var(--mono);
	font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 14px;
}
.price-card .p-num {
	font-family: var(--serif);
	font-size: 40px; font-weight: 600; letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}
.price-card .p-num .unit { font-size: 14.5px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.price-card p.desc { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin-top: 10px; }
.price-card ul { list-style: none; padding: 0; margin: 18px 0 0; font-size: 14px; color: var(--ink); }
.price-card ul li { padding: 6px 0 6px 26px; position: relative; }
.price-card ul li::before {
	content: "";
	position: absolute;
	left: 0; top: 11px;
	width: 15px; height: 15px;
	border-radius: 50%;
	background-color: #e7f4ee;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230b8a62" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
	background-size: 9px;
	background-position: center;
	background-repeat: no-repeat;
}
.price-card .btn { margin-top: auto; }
/* :nth-last-child(2) is whatever sits above the CTA (desc or feature list),
   it guarantees a minimum gap while the auto margin equalizes button rows. */
.price-card > :nth-last-child(2) { margin-bottom: 22px; }
.price-note { margin-top: 26px; font-size: 14.5px; color: var(--muted); max-width: 68ch; }

/* comparison table */
.compare-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-card); }
table.compare { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 14px; }
.compare th, .compare td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--border); }
.compare thead th { background: var(--ground); font-weight: 700; font-size: 13.5px; }
.compare thead th:not(:first-child), .compare td:not(:first-child) { text-align: center; width: 15%; }
.compare .group td {
	font-family: var(--mono);
	font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--accent);
	background: #fbfdfc;
	padding: 8px 18px;
}
.compare .yes { color: var(--accent); font-weight: 700; }
.compare .no { color: #b9c6c0; }
.compare tbody tr:last-child td { border-bottom: none; }

.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.quote {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--paper);
	padding: 30px;
	box-shadow: var(--shadow-card);
}
.quote blockquote {
	font-family: var(--serif);
	font-size: 19px;
	font-weight: 520;
	letter-spacing: 0;
	line-height: 1.5;
}
.quote .attr { display: flex; align-items: center; margin-top: 20px; }
.quote .q-name { font-weight: 700; font-size: 14.5px; }
.quote .q-org { font-size: 13px; color: var(--muted); }
.quote-note { margin-top: 24px; font-size: 14px; color: var(--muted); font-style: italic; max-width: 60ch; }

.faq { max-width: 760px; margin-inline: auto; }
details { border-bottom: 1px solid var(--border); }
details summary {
	list-style: none;
	cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: 22px 4px;
	font-weight: 600;
	font-size: 16.5px;
	letter-spacing: -0.01em;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
	content: "+";
	font-size: 22px; font-weight: 400;
	color: var(--muted);
	flex: none;
	transition: transform 0.15s ease;
}
details[open] summary::after { transform: rotate(45deg); }
details .answer, .faq details > p { padding: 0 4px 24px; color: var(--muted); font-size: 15.5px; max-width: 62ch; }

.final { background: var(--forest-deep); color: #fff; text-align: center; }
.final h2 {
	font-size: clamp(2.1rem, 4.4vw, 3.2rem);
	color: #f4f7ef;
	margin-bottom: 16px;
}
.final p { color: var(--sage); max-width: 46ch; margin: 0 auto 30px; }
.final .cta-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.final .fine {
	margin-top: 18px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sage-dim);
}

/* Pre-footer audit band: the one conversion that needs no install. */
.audit-band {
	width: min(1280px, calc(100% - 32px));
	margin: 8px auto 28px;
	border: 1px solid var(--border);
	background: var(--ground);
	border-radius: 18px;
	padding: 22px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}
.audit-band p { margin: 0; font-size: 15.5px; color: var(--ink); }
.audit-band p strong { font-weight: 700; }
.audit-band .ab-sub { display: block; font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.audit-band .btn { flex: none; }
@media (max-width: 600px) {
	.audit-band { display: block; }
	.audit-band .btn { margin-top: 14px; width: 100%; text-align: center; }
}

footer {
	background: var(--forest-deep);
	color: rgba(255, 255, 255, 0.45);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding: 56px 0 30px;
	font-size: 14px;
}
.footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));
	gap: 44px;
}
.f-brand img { height: 34px; width: auto; display: block; }
.f-brand p {
	margin: 16px 0 0;
	max-width: 30ch;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.55);
}
/* The parent name links out from inside the copyright line, so it keeps that
   line's colour and marks itself with a quiet underline instead of the site's
   accent green, which reads as an error on the dark footer. */
.f-bottom .parent-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.3);
	text-underline-offset: 2px;
}
.f-bottom .parent-link:hover {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, 0.6);
}
/* Keep the registered mark from shouting: raised and small, the way it is
   set in print, without dragging the line box open. */
.tm {
	font-size: 0.68em;
	vertical-align: 0.42em;
	line-height: 1;
}
.f-social { display: flex; gap: 10px; margin-top: 20px; }
.f-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 9px;
	color: rgba(255, 255, 255, 0.7);
	transition: color 0.18s ease, border-color 0.18s ease;
}
.f-social a:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); text-decoration: none; }
.f-social svg { width: 16px; height: 16px; }
.f-col h4 {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	margin: 0 0 14px;
}
.f-col a {
	display: block;
	color: rgba(255, 255, 255, 0.68);
	padding: 4.5px 0;
	font-size: 14px;
}
.f-col a:hover { color: #fff; text-decoration: none; }
.f-bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 44px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.45);
}
.f-bottom a { color: rgba(255, 255, 255, 0.6); }
@media (max-width: 860px) {
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 480px) {
	.footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- Motion & responsive ---------- */
@media (prefers-reduced-motion: reduce) {
	.btn, .card { transition: none; }
	html { scroll-behavior: auto; }
}

@media (max-width: 1020px) {
	.hero-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; padding: 56px 24px 100px; }
	.float-stage { transform: none; max-width: 620px; }
	.hero-visual { padding-bottom: 40px; }
}
@media (max-width: 960px) {
	section { padding: 56px 0; }
	.ground-section, .band, .agency-band, .final {
		width: calc(100% - 20px);
		border-radius: 22px;
		padding: 48px 0;
	}
	.kicker { white-space: normal; border-radius: 18px; }
	.nav-links { display: none; }
	.split { grid-template-columns: minmax(0, 1fr); gap: 44px; }
	.eight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.card-grid, .card-grid.two { grid-template-columns: minmax(0, 1fr); }
	.trio { grid-template-columns: minmax(0, 1fr); }
	.steps { grid-template-columns: minmax(0, 1fr); }
	.price-grid { grid-template-columns: minmax(0, 1fr); }
	.quote-grid { grid-template-columns: minmax(0, 1fr); }
	.statbar { grid-template-columns: minmax(0, 1fr); }
	.next-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.eight-grid { grid-template-columns: minmax(0, 1fr); }
	.tiles { grid-template-columns: repeat(2, 1fr); }
	.capture { flex-direction: column; }
	.capture .btn { width: 100%; }
	.overlay-shot { position: static; width: auto; margin-top: 14px; }
	.main-shot { width: 100%; }
	.hero-visual { padding-bottom: 0; }
}

/* ============================================================
   WordPress adaptations (not in the Astro source)
   ============================================================ */

/* Nav overlay: on marketing templates the header shell goes transparent and
   floats over the page's own .hero-shell group, which carries the forest
   ground + corner gradients that Astro's Base layout .shell provided. */
:root { --nav-h: 80px; }
body[class*="page-template-page-marketing"] .shell {
	background: none;
	position: relative;
	z-index: 30;
}
.hero-shell {
	background:
		radial-gradient(1100px 600px at 82% -10%, rgba(217, 247, 96, 0.07), transparent 55%),
		radial-gradient(900px 520px at -8% 108%, rgba(11, 138, 98, 0.25), transparent 55%),
		var(--forest);
	color: #fff;
	margin-top: calc(-1 * var(--nav-h));
	/* The wrapper is a <section>, so kill the generic `section` padding;
	   the hero markup inside carries its own spacing, exactly as in Astro. */
	padding: var(--nav-h) 0 0;
}
/* Astro's hero sat inside a div.shell, so `section + .ground-section`-style
   sibling rules never fired after it; hero-shell is a <section>, so undo. */
.hero-shell + .ground-section,
.hero-shell + .band,
.hero-shell + .agency-band,
.hero-shell + .final { margin-top: 0; }
/* The hero is part of the shell, not a revealed section. */
html.js :is(body, main, .wp-block-post-content) > section.hero-shell {
	opacity: 1;
	transform: none;
	transition: none;
}

/* WP resets we rely on: the admin bar pushes html down via its own CSS. */
.wp-site-blocks { padding: 0; }

/* The Astro site's eyebrow chips were <span>; in WP they are editable
   paragraphs, so element-qualified rules like `.section-head p` would
   override the chip styling. Re-assert it (appended last on purpose;
   `.on-dark .eyebrow` and `.band .eyebrow` still win on specificity). */
p.eyebrow {
	font-size: 12.5px;
	color: var(--accent);
	max-width: none;
	margin-inline: 0;
}

/* ---------- Generic content templates (blog, legacy pages) ----------
   The marketing pages carry their own layout; these rules give existing
   gowp.com content (posts, case studies, legal pages) clean typography in
   the new design. site.css zeroes all margins globally, so prose spacing
   is restored explicitly here. */
.gowp-plain { padding: 56px 0 80px; }
.gowp-page-title {
	font-size: clamp(2rem, 4vw, 2.8rem);
	margin-bottom: 18px;
}
/* Legacy content sits on the same 1140px grid as the marketing pages, so
   titles, images, and card lists line up with the nav and footer. Only the
   running text keeps a readable measure, anchored to the grid's left edge
   rather than floating in a narrow centred column. */
/* No max-width here: these elements also carry .wrap, which sets the
   1140px grid. Overriding it would take them full-bleed. */
.gowp-article .gowp-page-title,
.gowp-article .gowp-post-meta { max-width: 900px; }
.gowp-post-meta {
	display: flex;
	gap: 14px;
	font-size: 14px;
	color: var(--muted);
	margin-bottom: 28px;
}
.gowp-featured img {
	border-radius: var(--radius);
	margin-bottom: 28px;
	width: 100%;
	max-height: 420px;
	object-fit: cover;
}

.gowp-prose { max-width: 760px; }
.gowp-prose > * + * { margin-block-start: 1.1em; }
.gowp-prose h2 { font-size: 1.7rem; margin-block-start: 1.6em; }
.gowp-prose h3 { font-size: 1.25rem; margin-block-start: 1.4em; font-weight: 700; }
.gowp-prose h4 { font-weight: 700; }
.gowp-prose ul, .gowp-prose ol { padding-inline-start: 1.4em; }
.gowp-prose li + li { margin-block-start: 0.4em; }
.gowp-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.gowp-prose blockquote {
	border-left: 3px solid var(--sage);
	padding-left: 18px;
	color: var(--muted);
	font-style: italic;
}
.gowp-prose pre, .gowp-prose code {
	font-family: var(--mono);
	font-size: 0.9em;
	background: var(--ground);
	border-radius: 6px;
}
.gowp-prose pre { padding: 16px 18px; overflow-x: auto; }
.gowp-prose code { padding: 2px 6px; }
.gowp-prose pre code { padding: 0; background: none; }
.gowp-prose figure figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.gowp-prose hr { border: none; border-top: 1px solid var(--border); margin-block: 2em; }
.gowp-prose table { border-collapse: collapse; width: 100%; }
.gowp-prose th, .gowp-prose td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }

.gowp-post-card {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	border-bottom: 1px solid var(--border);
	padding-block: 30px;
}
.gowp-post-card-body { flex: 1; min-width: 0; }
.gowp-post-card-body p { max-width: 760px; }
.gowp-post-cats { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.gowp-post-cats a { color: var(--accent); }
.gowp-post-cats a:hover { text-decoration: none; }
.gowp-post-card h2 { font-size: 1.4rem; }
.gowp-post-card h2 a { color: var(--ink); }
.gowp-post-card h2 a:hover { color: var(--accent); text-decoration: none; }
.gowp-post-card .gowp-post-meta { margin: 6px 0 8px; }
.gowp-post-card p { color: var(--muted); font-size: 15.5px; }
.gowp-post-thumb { flex: none; width: 280px; margin: 0; }
.gowp-post-thumb img {
	width: 100%;
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}
.gowp-post-thumb:empty { display: none; }
@media (max-width: 620px) {
	.gowp-post-card { flex-direction: column-reverse; gap: 16px; }
	.gowp-post-thumb { width: 100%; }
}

.gowp-pagination { margin-top: 34px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.gowp-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 8px;
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--ink);
	font-size: 14.5px;
	font-weight: 600;
}
.gowp-pagination a.page-numbers:hover { border-color: var(--ink); text-decoration: none; }
.gowp-pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.gowp-pagination .page-numbers.dots { border: none; min-width: auto; color: var(--muted); }
.gowp-pagination .wp-block-query-pagination-numbers { display: flex; gap: 8px; align-items: center; }
.gowp-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	font-size: 14.5px;
	font-weight: 600;
}
.gowp-search { max-width: 480px; margin-block: 18px 28px; }
.gowp-search .wp-block-search__input {
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 10px 18px;
	font-family: var(--sans);
	font-size: 15px;
}
.gowp-search .wp-block-search__button {
	background: var(--accent);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 10px 22px;
	font-weight: 600;
	cursor: pointer;
}
.gowp-search .wp-block-search__button:hover { background: var(--accent-hover); }
.gowp-post-nav {
	margin-top: 44px;
	padding-top: 22px;
	border-top: 1px solid var(--border);
	font-size: 14.5px;
}
.gowp-404 { text-align: center; padding-block: 40px; }
.gowp-404 .gowp-search { margin-inline: auto; }

/* In Astro, .audit-band's 8px top margin collapsed into .final's 28px
   bottom margin; WP's template-part wrappers prevent that collapse, so
   drop the top margin instead (every marketing page ends with .final). */
.audit-band { margin-top: 0; }

/* The audit hero carried three inline styles in the Astro markup; block
   markup keeps structure in classes so the copy stays editable. Values are
   copied verbatim from src/pages/ai-visibility.astro. */
.hero-grid--audit { padding-bottom: 88px; }
.hero h1.h1-audit { font-size: clamp(2.3rem, 4.6vw, 3.3rem); }
.shot-card--audit { max-width: 430px; border-color: var(--border); }

/* Mobile fix (diverges from the Astro build, which has this bug):
   .receipt .row .val is nowrap, so the long values on /ai-visibility/
   ("Re-tested with the same questions") pushed the page to 428px wide at
   a 375px viewport and the whole page scrolled sideways. Let those values
   wrap on narrow screens; the two-column row is preserved. */
@media (max-width: 620px) {
	.receipt .row { flex-wrap: wrap; }
	.receipt .row .val { white-space: normal; text-align: right; }
}

/* ---------- Resource card grid (webinars, podcast episodes) ----------
   These listings are cover-art led, not excerpt led: the images are 5:3
   event banners with type in them (cropping to a square eats the words)
   and the excerpts range from empty to a full paragraph. A row layout
   made that raggedness obvious, so they use an even card grid instead,
   sharing the .card visual language from the marketing pages. */
.gowp-card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.gowp-card-grid > li {
	display: flex;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--paper);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.gowp-card-grid > li:hover { transform: translateY(-2px); border-color: #c8d6d0; }
.gowp-res-card { display: flex; flex-direction: column; width: 100%; }
.gowp-res-thumb { margin: 0; display: block; }
.gowp-res-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 3;      /* matches the 800x480 covers: no cropped text */
	object-fit: cover;
	background: var(--ground);
}
.gowp-res-thumb:empty { display: none; }
.gowp-res-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.gowp-res-body h2,
.gowp-res-body h3 {
	font-family: var(--sans);
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
}
.gowp-res-body h2 a, .gowp-res-body h3 a { color: var(--ink); }
.gowp-res-body h2 a:hover, .gowp-res-body h3 a:hover { color: var(--accent); text-decoration: none; }
.gowp-res-body .gowp-post-meta { margin: 0; font-size: 13px; }
/* Excerpts vary from empty to a paragraph; clamp so every card lines up. */
.gowp-res-body p {
	font-size: 14.5px;
	color: var(--muted);
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.gowp-res-more { margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 600; }

@media (max-width: 960px) {
	.gowp-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.gowp-card-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Legacy GenerateBlocks grids, converted to core groups. GB stored explicit
   column widths per breakpoint; an auto-fit track keeps the side-by-side
   arrangement responsive without carrying that machinery over. */
.gowp-legacy-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 28px;
	align-items: start;
}
.gowp-legacy-grid > .wp-block-group > *:first-child { margin-block-start: 0; }
.gowp-prose .gowp-legacy-grid { margin-block: 1.4em; }
.gowp-prose .gowp-legacy-grid img { border-radius: 12px; }
@media (max-width: 620px) {
	.gowp-legacy-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ---------- About page: people cards ---------- */
.bio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bio-card {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--paper);
	box-shadow: var(--shadow-card);
	padding: 26px 24px;
}
.bio-photo {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	background: var(--forest);
	color: var(--lime);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 22px;
	overflow: hidden;
	margin-bottom: 16px;
}
.bio-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bio-card h3 { font-size: 16.5px; margin: 0 0 2px; }
.bio-card p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.bio-card p.bio-role {
	font-family: var(--mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 10px;
}
.bio-card.founder { text-align: center; padding: 36px 28px; max-width: 420px; margin-inline: auto; }
.bio-card.founder .bio-photo { width: 116px; height: 116px; font-size: 34px; margin: 0 auto 18px; }
@media (max-width: 960px) {
	.bio-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Gravity Forms ----------
   The legacy-markup forms (support tickets, billing requests) came over from
   the old theme carrying only Gravity Forms' own reset stylesheet, so they
   rendered as raw browser controls. These rules dress them in the site's
   design system. Everything is scoped under .gform_wrapper so it cannot leak
   into the domain-capture input or any other form. The attribute selectors
   are deliberate: they carry enough specificity to beat the plugin's legacy
   formsmain.css without resorting to !important. */
.gform_wrapper { max-width: 640px; margin-block: 30px; }
.gform_wrapper .gform_fields { list-style: none; margin: 0; padding: 0; }
.gform_wrapper .gfield { margin-bottom: 22px; }
.gform_wrapper .gfield_label {
	display: block;
	font-family: var(--sans);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 7px;
}
.gform_wrapper .gfield_required { color: #d64545; margin-left: 3px; }

.gform_wrapper .gform_fields input[type="text"],
.gform_wrapper .gform_fields input[type="email"],
.gform_wrapper .gform_fields input[type="tel"],
.gform_wrapper .gform_fields input[type="url"],
.gform_wrapper .gform_fields input[type="number"],
.gform_wrapper .gform_fields input[type="password"],
.gform_wrapper .gform_fields select,
.gform_wrapper .gform_fields textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--sans);
	font-size: 15.5px;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 12px 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gform_wrapper .gform_fields textarea { min-height: 170px; resize: vertical; line-height: 1.6; }
.gform_wrapper .gform_fields ::placeholder { color: var(--muted); opacity: 1; }
.gform_wrapper .gform_fields :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(11, 138, 98, 0.14);
}

/* Sub-labels under split fields (First/Last, Enter/Confirm Email). */
.gform_wrapper .ginput_complex label,
.gform_wrapper .gfield_description {
	font-family: var(--sans);
	font-size: 12.5px;
	color: var(--muted);
}
.gform_wrapper .ginput_complex label { display: block; margin-top: 5px; }
.gform_wrapper .gfield_description { margin-top: 6px; line-height: 1.5; }

/* Submit: the site's pill button, matching .btn / .btn-primary. */
.gform_wrapper .gform_footer { margin-top: 28px; padding: 0; }
.gform_wrapper .gform_footer button[type="submit"],
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer .gform_button,
.gform_wrapper .gform_page_footer button,
.gform_wrapper .gform_page_footer input[type="button"],
.gform_wrapper .gform_page_footer input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sans);
	font-size: 15.5px;
	font-weight: 600;
	color: #fff;
	background: var(--accent);
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 13px 30px;
	cursor: pointer;
	width: auto;
	transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.gform_wrapper .gform_footer button[type="submit"]:hover,
.gform_wrapper .gform_footer .gform_button:hover,
.gform_wrapper .gform_footer input[type="submit"]:hover {
	background: var(--accent-hover);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -8px rgba(11, 31, 27, 0.35);
}

/* File upload: the native control can't be restyled, so frame its row. */
.gform_wrapper .ginput_container_fileupload input[type="file"] {
	font-family: var(--sans);
	font-size: 14px;
	color: var(--muted);
	padding: 10px 0;
}
.gform_wrapper .gform_fileupload_rules { font-size: 13px; color: var(--muted); }

/* Validation. */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select { border-color: #d64545; }
.gform_wrapper .validation_message {
	font-size: 13.5px;
	font-weight: 500;
	color: #d64545;
	margin-top: 6px;
}
.gform_wrapper .gform_validation_errors {
	background: #fdf0f0;
	border: 1px solid #f2d0d0;
	border-radius: var(--radius);
	padding: 16px 20px;
	margin-bottom: 24px;
}
.gform_wrapper .gform_validation_errors h2 { font-size: 16px; color: #a63333; margin: 0; }

.gform_confirmation_message {
	background: var(--ground);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 22px 24px;
	font-size: 16px;
	line-height: 1.6;
}

@media (max-width: 600px) {
	.gform_wrapper .gform_footer button[type="submit"],
	.gform_wrapper .gform_footer .gform_button,
	.gform_wrapper .gform_footer input[type="submit"] { width: 100%; }
}

/* ---------- Health-check teaser (patterns/page-health-check.php, platform #1000) ----------
   The hero form runs the platform's public teaser API; site.js renders the
   checks into .teaser-results. Hidden until it has content. */
/* /health-check/ ends on its conversion band instead of a .final;
   give it the same breathing room before the footer. */
.wp-block-post-content > .band:last-child { margin-bottom: 28px; }

.teaser-results { display: none; }
.teaser-results.has-results {
	display: block;
	background: #fff;
	color: var(--ink);
	border-radius: 18px;
	box-shadow: var(--shadow-card);
	padding: 26px 28px;
	margin: 0 auto;
	max-width: 760px;
}
/* The card is the section's last child, so a bottom margin on it would
   collapse through the section and land as white space below the band.
   site.js flags the section instead; the padding keeps 72px of forest
   under the card and separates it from the white section that follows. */
.hero-shell.has-teaser-results { padding-bottom: 72px; }
.teaser-loading { color: var(--muted); font-size: 15px; }
.teaser-error p { margin: 0 0 14px; font-size: 15.5px; }

.teaser-verdict {
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 18px;
	border: 1px solid transparent;
}
.teaser-verdict .tv-label { font-weight: 700; font-size: 16.5px; }
.teaser-verdict .tv-domain { font-size: 13px; color: var(--muted); margin-top: 2px; }
.teaser-verdict--good { background: #ecfdf3; border-color: #bbe7c9; }
.teaser-verdict--needs_attention { background: #fff8e6; border-color: #f2dfa4; }
.teaser-verdict--urgent { background: #fdecec; border-color: #f2b8b5; }

.teaser-checks { list-style: none; margin: 0; padding: 0; }
.teaser-check { display: flex; gap: 12px; padding: 12px 2px; border-top: 1px solid rgba(11, 31, 27, 0.07); }
.teaser-check:first-child { border-top: 0; }
.tc-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: #9ca3af; }
.teaser-check[data-status="good"] .tc-dot { background: #16a34a; }
.teaser-check[data-status="warn"] .tc-dot { background: #d97706; }
.teaser-check[data-status="bad"] .tc-dot { background: #dc2626; }
.tc-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tc-title { font-weight: 600; font-size: 15px; }
.tc-status { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.tc-status--bad { color: #dc2626; }
.tc-status--warn { color: #b45309; }
.tc-status--good { color: #15803d; }
.tc-detail { margin: 3px 0 0; font-size: 13.5px; color: var(--muted); max-width: 60ch; }

.teaser-locked-head { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(11, 31, 27, 0.07); font-weight: 700; font-size: 14.5px; }
.teaser-locked { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 18px; }
.teaser-locked-item { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; color: var(--muted); }
.tl-lock { flex: none; width: 9px; height: 11px; border: 1.5px solid #b3beb7; border-radius: 2px 2px 3px 3px; position: relative; top: 1px; }
.tl-lock::before { content: ""; position: absolute; left: 1px; right: 1px; top: -5px; height: 5px; border: 1.5px solid #b3beb7; border-bottom: 0; border-radius: 4px 4px 0 0; }

.teaser-cta { margin-top: 20px; text-align: center; }
.teaser-cta .btn { display: inline-block; }
.teaser-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }

.check-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 22px; }
.check-grid li { font-size: 14px; color: var(--muted); line-height: 1.5; }
.check-grid li strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 3px; }
.on-dark .check-grid li { color: rgba(255, 255, 255, 0.72); }
.on-dark .check-grid li strong { color: #fff; }
.check-grid--deep { margin-top: 56px; }

@media (max-width: 900px) {
	.check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.check-grid, .teaser-locked { grid-template-columns: minmax(0, 1fr); }
	.teaser-results.has-results { padding: 20px 16px; }
}

/* ---------- Health-check: scanning state, live hero card, share row ----------
   Review round 3. site.js drives all of it: .teaser-steps under the form
   while the platform scan runs, .is-scanning / .is-live on the hero
   Site Health mock (overrides live here so the generated
   blocks/mock/style.css stays untouched), and .teaser-share after the
   results. */
.teaser-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.teaser-step {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14.5px;
	color: var(--muted);
	opacity: 0.55;
	transition: opacity 0.25s ease, color 0.25s ease;
}
.teaser-step.is-active, .teaser-step.is-done { opacity: 1; }
.teaser-step.is-active { color: var(--ink); font-weight: 600; }
.ts-mark { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #c9d4ce; position: relative; box-sizing: border-box; }
.teaser-step.is-active .ts-mark { border-color: #1c6b4d; border-top-color: transparent; animation: gowp-teaser-spin 0.8s linear infinite; }
.teaser-step.is-done .ts-mark { border-color: #1c6b4d; background: #1c6b4d; }
.teaser-step.is-done .ts-mark::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 7px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.teaser-steps-note { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
@keyframes gowp-teaser-spin { to { transform: rotate(360deg); } }
@keyframes gowp-teaser-shimmer { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes gowp-teaser-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Hero card while a scan runs: the ring sweeps, the tiles wait. */
.hero-shell .gowp-mock--site-health.is-scanning .ring svg { animation: gowp-teaser-spin 1.1s linear infinite; }
.hero-shell .gowp-mock--site-health.is-scanning .r-fill { animation: none; stroke-dashoffset: 200; stroke: #9fc4b3; }
.hero-shell .gowp-mock--site-health.is-scanning .r-num,
.hero-shell .gowp-mock--site-health.is-scanning .r-den,
.hero-shell .gowp-mock--site-health.is-scanning .v-head,
.hero-shell .gowp-mock--site-health.is-scanning .hc-verdict p,
.hero-shell .gowp-mock--site-health.is-scanning .hc-tile { animation: none; opacity: 1; transform: none; }
.hero-shell .gowp-mock--site-health.is-scanning .r-num { color: #8fa099; }
.hero-shell .gowp-mock--site-health.is-scanning .v-head { color: #6d7d76; }
.hero-shell .gowp-mock--site-health.is-scanning .hc-tile { border-color: #e8eeeb; background: #fff; }
.hero-shell .gowp-mock--site-health.is-scanning .t-status { color: #8fa099; }
.hero-shell .gowp-mock--site-health.is-scanning .t-icon {
	background: #edf2ef;
	color: #8fa099;
	animation: gowp-teaser-shimmer 1.4s ease-in-out infinite;
	animation-delay: calc(var(--i) * 0.18s);
}

/* Hero card once it shows the checked site. */
.hero-shell .gowp-mock--site-health .hc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.hero-shell .gowp-mock--site-health.is-live .r-fill { animation: none; transition: stroke-dashoffset 1.2s cubic-bezier(0.2, 0.8, 0.3, 1); }
.hero-shell .gowp-mock--site-health.is-live .r-fill.warn { stroke: #d9a441; }
.hero-shell .gowp-mock--site-health.is-live .r-fill.bad { stroke: #d64545; }
.hero-shell .gowp-mock--site-health.is-live .r-num,
.hero-shell .gowp-mock--site-health.is-live .r-den,
.hero-shell .gowp-mock--site-health.is-live .v-head,
.hero-shell .gowp-mock--site-health.is-live .hc-verdict p { animation: none; opacity: 1; transform: none; }
.hero-shell .gowp-mock--site-health.is-live .v-head.warn { color: #b7791f; }
.hero-shell .gowp-mock--site-health.is-live .v-head.bad { color: #c0392b; }
.hero-shell .gowp-mock--site-health.is-live .hc-tile { animation: gowp-teaser-rise 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) calc(var(--i) * 0.11s) both; }
.hero-shell .gowp-mock--site-health .hc-tile.bad { border-color: #f3c9c6; background: #fff8f7; }
.hero-shell .gowp-mock--site-health .hc-tile.bad .t-icon { background: #fde4e2; color: #c0392b; }
.hero-shell .gowp-mock--site-health .hc-tile.bad .t-status { color: #c0392b; }
.hero-shell .gowp-mock--site-health .hc-tile.unknown .t-icon { background: #edf2ef; color: #8fa099; }
.hero-shell .gowp-mock--site-health .hc-tile.unknown .t-status { color: #8fa099; }

/* Results reveal + extras. */
.teaser-results.is-revealed .teaser-verdict { animation: gowp-teaser-rise 0.45s ease both; }
.teaser-results.is-revealed .teaser-check { animation: gowp-teaser-rise 0.45s ease calc(0.1s + var(--i) * 0.06s) both; }
.teaser-note-wp { margin: 10px 0 0; font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.teaser-share {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(11, 31, 27, 0.07);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 10px;
}
.teaser-share .ts-label { font-size: 13px; color: var(--muted); margin-right: 4px; }
.teaser-share .ts-btn {
	appearance: none;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 7px 14px;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.teaser-share .ts-btn:hover { border-color: #c8d6d0; background: var(--ground); }
.teaser-share .ts-btn.is-copied { border-color: #bbe7c9; background: #ecfdf3; color: #15803d; }

@media (prefers-reduced-motion: reduce) {
	.teaser-step.is-active .ts-mark,
	.hero-shell .gowp-mock--site-health.is-scanning .ring svg,
	.hero-shell .gowp-mock--site-health.is-scanning .t-icon { animation: none; }
	.hero-shell .gowp-mock--site-health.is-live .hc-tile,
	.teaser-results.is-revealed .teaser-verdict,
	.teaser-results.is-revealed .teaser-check { animation: none; opacity: 1; transform: none; }
	.hero-shell .gowp-mock--site-health.is-live .r-fill { transition: none; }
}