/* ==========================================================================
   WP Mojster — Plugin page styles (enqueued only on the plugin template)
   The plugin-page pattern: service-template sections reused (hero, intro,
   spec sheet, one-off process, FAQ) — each page sheet carries its own copy
   of shared sections (page-scoped-CSS convention) — plus the pattern's own
   sections: before/with pairs, the plans rate card (no prices; external
   product links) and the adapted on-ink CTA (external trial button, no
   form card). Breakpoints: 640 / 768 / 1024 only (tokens.css rule).
   ========================================================================== */

/* ---- Shared section rhythm & heading scale ---- */
.svc-intro,
.plg-pairs,
.svc-included,
.svc-process,
.plg-plans,
.svc-faq,
.contact-cta {
	padding-top: var(--section-pad-mobile);
	padding-bottom: var(--section-pad-mobile);
}

.svc-intro .eyebrow,
.plg-pairs .eyebrow,
.svc-included .eyebrow,
.svc-process .eyebrow,
.plg-plans .eyebrow,
.svc-faq .eyebrow,
.contact-cta .eyebrow { margin-bottom: 12px; }

.svc-h2 {
	font-size: var(--text-lg);
	font-weight: 700;
	margin-bottom: 12px;
	max-width: 24em;
}
.svc-h2 mark {
	background: var(--color-primary-tint);
	color: var(--color-primary-strong);
	padding: 1px 6px;
	border-radius: 5px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.plg-pairs .lead,
.svc-included .lead,
.svc-process .lead,
.plg-plans .lead,
.svc-faq .lead {
	font-size: 16px;
	color: var(--color-text-muted);
	max-width: 60ch;
}

@media (min-width: 768px) {
	.svc-intro,
	.plg-pairs,
	.svc-included,
	.svc-process,
	.plg-plans,
	.svc-faq,
	.contact-cta {
		padding-top: var(--section-pad);
		padding-bottom: var(--section-pad);
	}
	.svc-h2 { font-size: var(--text-xl); }
	.svc-h2 mark { padding: 1px 8px; border-radius: 6px; }
	.plg-pairs .lead,
	.svc-included .lead,
	.svc-process .lead,
	.plg-plans .lead,
	.svc-faq .lead { font-size: 18px; }
}

/* ==========================================================================
   Hero — paper band with a static petrol-tint radial wash behind the aside
   column. The snapshot panel sits on the report stack: offset sheets
   (pseudo-elements, static transforms, no layout shift) whose count comes
   from the content file (2 = recurring service, 1/0 = one-off).
   ========================================================================== */
.svc-hero {
	padding: 40px 0 48px;
	background:
		radial-gradient(320px 300px at 88% 78%, var(--color-primary-tint) 0%, rgba(227, 240, 243, 0) 72%)
		var(--color-paper);
}
.svc-hero .inner { display: grid; gap: var(--space-8); }

.svc-hero .crumbs { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 16px; }
.svc-hero .crumbs a {
	color: var(--color-primary);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.svc-hero .crumbs a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }
.svc-hero .crumbs .sep { margin: 0 8px; color: var(--color-border); }
.svc-hero .crumbs [aria-current] { font-weight: 500; }

.svc-hero h1 {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.18;
	margin-bottom: 12px;
}
.svc-hero h1 mark {
	background: var(--color-primary-tint);
	color: var(--color-primary-strong);
	padding: 0.02em 0.14em;
	border-radius: 4px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.svc-hero .lead {
	font-size: var(--text-base);
	line-height: 1.55;
	color: var(--color-text-muted);
	max-width: 32em;
	margin-bottom: var(--space-6);
}
.svc-hero .ctas { display: flex; flex-direction: column; gap: 14px; margin-bottom: var(--space-6); }
.svc-hero .ctas .btn { width: 100%; }
.svc-hero .email-alt { font-size: 15px; color: var(--color-text-muted); text-align: center; }
.svc-hero .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Report stack — sheets behind the panel */
.svc-hero .panel-wrap { position: relative; }
.svc-hero .panel-wrap::before,
.svc-hero .panel-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
}
.svc-hero .panel-wrap::before { transform: translate(9px, 9px) rotate(0.5deg); opacity: 0.55; }
.svc-hero .panel-wrap::after { transform: translate(4px, 4px) rotate(0.25deg); opacity: 0.8; }
.svc-hero .panel-wrap--1::before,
.svc-hero .panel-wrap--0::before,
.svc-hero .panel-wrap--0::after { content: none; }

/* Snapshot panel — cadence rows with petrol INFO pills (deliberately not
   the homepage care panel's green statuses) */
.svc-panel {
	position: relative;
	z-index: 1;
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: 0 8px 24px rgba(20, 37, 44, 0.1);
	overflow: hidden;
}
.svc-panel .phead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: 14px 20px;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface);
}
.svc-panel .site { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.svc-panel .tag { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); }
.svc-panel ul { list-style: none; padding: var(--space-2) 0; }
.svc-panel li { display: flex; align-items: center; gap: 12px; padding: 11px 20px; font-size: 15px; }
.svc-panel .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--color-primary); }
.svc-panel .lbl { flex: 1; }
.svc-panel .val {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary-strong);
	background: var(--color-primary-tint);
	border-radius: var(--radius-chip);
	padding: 2px 10px;
	white-space: nowrap;
}
/* Before → after pair rows (example values only — see hero.php):
   amber = the slow "before", success green = the measured "after". */
.svc-panel .vals { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.svc-panel .val--before { color: var(--color-accent); background: var(--color-accent-tint); font-variant-numeric: tabular-nums; }
.svc-panel .val--after { color: var(--color-success); background: var(--color-success-tint); font-variant-numeric: tabular-nums; }
.svc-panel .varrow { font-size: 12px; color: var(--color-text-muted); }
.svc-panel .pfoot {
	padding: 12px 20px 16px;
	border-top: 1px solid var(--color-border);
	font-size: 13px;
	color: var(--color-text-muted);
}
.svc-hero .stack-note {
	margin-top: 16px;
	font-size: 13px;
	color: var(--color-text-muted);
	text-align: right;
	padding-right: 4px;
}

@media (min-width: 640px) {
	.svc-hero .ctas { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-6); }
	.svc-hero .ctas .btn { width: auto; }
	.svc-hero .email-alt { text-align: left; }
}
@media (min-width: 768px) {
	.svc-hero {
		padding: 64px 0 72px;
		background:
			radial-gradient(640px 460px at 82% 42%, var(--color-primary-tint) 0%, rgba(227, 240, 243, 0) 72%)
			var(--color-paper);
	}
	.svc-hero .crumbs { margin-bottom: 20px; }
	.svc-hero h1 { font-size: var(--text-2xl); margin-bottom: 18px; }
	.svc-hero .lead { font-size: var(--text-md); line-height: 1.5; margin-bottom: 28px; }
	.svc-hero .panel-wrap::before { transform: translate(16px, 16px) rotate(0.6deg); }
	.svc-hero .panel-wrap::after { transform: translate(8px, 8px) rotate(0.3deg); }
	.svc-hero .stack-note { margin-top: 26px; }
}
@media (min-width: 1024px) {
	.svc-hero .inner { grid-template-columns: 1.25fr 1fr; gap: var(--space-16); align-items: center; }
}


/* ==========================================================================
   Short intro — surface band: heading + prose left, fit-check panel right
   (hero snapshot anatomy, lighter elevation, halo markers, redirect footer).
   ========================================================================== */
.svc-intro { background: var(--color-surface); border-top: 1px solid var(--color-border); }
.svc-intro .inner { display: grid; gap: var(--space-8); }
.svc-intro .svc-h2 { margin-bottom: 14px; }
.svc-intro .intro-copy { font-size: 16px; color: var(--color-text-muted); line-height: 1.6; }
.svc-intro .intro-copy + .intro-copy { margin-top: 14px; }

.fitpanel {
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: 0 6px 20px rgba(20, 37, 44, 0.07);
	overflow: hidden;
}
.fitpanel .phead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	padding: 14px 18px;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface);
}
.fitpanel .lbl { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.fitpanel .tag { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); white-space: nowrap; }
.fitpanel .fit { list-style: none; }
.fitpanel .fit li { position: relative; padding: 14px 18px 14px 52px; font-size: 15px; color: var(--color-text); }
.fitpanel .fit li + li { border-top: 1px solid var(--color-border); }
/* Halo marker: primary-tint circle + petrol info dot, zero icons */
.fitpanel .fit li::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 17px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--color-primary-tint);
}
.fitpanel .fit li::after {
	content: "";
	position: absolute;
	left: 24px;
	top: 23px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-primary);
}
.fitpanel .fit li b { font-weight: 600; color: var(--color-ink); }
/* Wrong-page redirect — the panel's last row; amber on non-urgent pages */
.fitpanel .redirect {
	background: var(--color-accent-tint);
	border-top: 1px solid var(--color-border);
	padding: 14px 18px;
	font-size: var(--text-sm);
	line-height: 1.6;
	color: var(--color-text);
}
.fitpanel .redirect--plain { background: var(--color-surface); }
.fitpanel .redirect b { font-weight: 600; color: var(--color-ink); }
.fitpanel .redirect b::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent);
	margin-right: 9px;
	vertical-align: 1px;
}
.fitpanel .redirect--plain b::before { background: var(--color-primary); }
.fitpanel .redirect a {
	color: var(--color-primary);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.fitpanel .redirect a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }

@media (min-width: 768px) {
	.svc-intro .intro-copy { font-size: 18px; }
	.svc-intro .intro-copy + .intro-copy { font-size: 16px; }
	.fitpanel .phead { padding: 14px 22px; }
	.fitpanel .fit li { padding: 16px 22px 16px 60px; font-size: 16px; }
	.fitpanel .fit li::before { left: 22px; top: 19px; width: 22px; height: 22px; }
	.fitpanel .fit li::after { left: 29px; top: 26px; }
	.fitpanel .redirect { padding: 16px 22px; font-size: 15px; }
}
@media (min-width: 1024px) {
	.svc-intro .inner { grid-template-columns: 5fr 7fr; gap: var(--space-16); align-items: start; }
}


/* ==========================================================================
   What's included — the spec sheet: CSS-counter line numbers 01–08 in
   petrol tabular numerals, invoice-style sum row under one heavier rule,
   dashed "Agreed separately" boundary tile (dashed = outside this scope).
   ========================================================================== */
.svc-included { background: var(--color-paper); border-top: 1px solid var(--color-border); }
.svc-included .cols { display: grid; gap: 28px; margin-top: var(--space-8); }
.svc-included .speclabel {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	color: var(--color-text-muted);
	margin-bottom: 6px;
}
.svc-included .spec { list-style: none; counter-reset: spec; }
.svc-included .spec li {
	counter-increment: spec;
	display: grid;
	grid-template-columns: 30px 1fr;
	padding: 16px 0 15px;
	border-bottom: 1px solid var(--color-border);
}
.svc-included .spec li::before {
	content: counter(spec, decimal-leading-zero);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary);
	font-variant-numeric: tabular-nums;
	padding-top: 3px;
}
.svc-included .spec li b {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-ink);
	line-height: 1.35;
	margin-bottom: 2px;
}
.svc-included .spec li span { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
.svc-included .spec li b,
.svc-included .spec li span { grid-column: 2; }
/* The sheet's last row drops its hairline — the sum row's heavier rule is
   the closing line (the two would otherwise stack) */
.svc-included .spec li:last-child { border-bottom: none; padding-bottom: 0; }
.svc-included .sum {
	margin-top: var(--space-4);
	border-top: 2px solid var(--color-ink);
	padding: 16px 0 0 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
}
.svc-included .sum b { font-size: 16px; font-weight: 600; color: var(--color-ink); }
.svc-included .sum span { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Agreed separately: the dashed boundary tile */
.svc-included .sep {
	border: 1.5px dashed var(--color-border);
	background: var(--color-surface);
	border-radius: var(--radius-card);
	padding: 20px;
}
.svc-included .seplabel {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	color: var(--color-text-muted);
	margin-bottom: 14px;
}
.svc-included .sep ul { list-style: none; margin-bottom: 18px; }
.svc-included .sep li { position: relative; padding: 7px 0 7px 20px; font-size: 15px; color: var(--color-text); }
.svc-included .sep li::before { content: "—"; position: absolute; left: 0; color: var(--color-text-muted); }
.svc-included .sepnote {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	border-top: 1px dashed var(--color-border);
	padding-top: 16px;
	line-height: 1.6;
}
.svc-included .sepnote b { font-weight: 600; color: var(--color-ink); }

@media (min-width: 768px) {
	.svc-included .cols { margin-top: 44px; }
	.svc-included .spec { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
	.svc-included .spec li { grid-template-columns: 34px 1fr; }
	.svc-included .spec li:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
	.svc-included .spec li b { font-size: 16px; }
	.svc-included .sum { padding-left: 34px; }
	.svc-included .sep { padding: 26px 28px; }
}
@media (min-width: 1024px) {
	.svc-included .cols { grid-template-columns: 7fr 5fr; gap: var(--space-16); align-items: start; }
}


/* ==========================================================================
   Process — the approved timeline anatomy with service steps: handover
   flow line out of step 1, petrol loop field + echo-ring badge + ghost
   dots on a repeating step, mini-level-mark phase labels (only when the
   content provides them). Vertical rail below 1024px.
   ========================================================================== */
.svc-process { background: var(--color-surface); }
.svc-process .lead { margin-bottom: 40px; }
.svc-process .steps { list-style: none; }
.svc-process .step {
	position: relative;
	display: grid;
	grid-template-columns: 40px 1fr;
	column-gap: var(--space-4);
	padding-bottom: 36px;
}
.svc-process .step:last-child { padding-bottom: 0; }
.svc-process .phase {
	grid-column: 1 / -1;
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	color: var(--color-text-muted);
	margin-bottom: 14px;
}
.svc-process .phase::before {
	content: "";
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	margin-bottom: 8px;
}
.svc-process .phase:empty { display: none; }
.svc-process .step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 48px;
	bottom: 10px;
	width: 2px;
	background: var(--color-border);
}
/* Handover flow line: petrol drains out of the segment leaving step 1 */
.svc-process .step:first-child::before {
	top: 92px;
	background: linear-gradient(180deg, var(--color-primary), var(--color-border) 75%);
}
.svc-process .step:has(+ .step--repeat)::before { bottom: 12px; }
.svc-process .badge {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-base);
	font-weight: 700;
	background: var(--color-primary-tint);
	color: var(--color-primary-strong);
}
.svc-process .step:first-child .badge { background: var(--color-primary); color: #fff; }
.svc-process .body { padding-top: 6px; }
.svc-process .you {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	color: var(--color-primary);
	margin-bottom: var(--space-1);
}
.svc-process .you:empty { display: none; }
.svc-process .step h3 { font-size: 18px; font-weight: 600; line-height: 1.3; margin-bottom: 6px; }
.svc-process .step p { font-size: 15px; color: var(--color-text-muted); }
/* Monthly loop field — the recurring step arrives somewhere */
.svc-process .step--repeat {
	background: var(--color-primary-tint);
	border-radius: 14px;
	padding: 18px 16px 26px;
	margin: 6px -16px 0;
}
.svc-process .step--repeat .phase { color: var(--color-primary-strong); }
.svc-process .step--repeat .badge {
	background: var(--color-paper);
	color: var(--color-primary-strong);
	box-shadow:
		0 0 0 5px rgba(11, 114, 133, 0.18),
		0 52px 0 -8px rgba(11, 114, 133, 0.16),
		0 92px 0 -12px rgba(11, 114, 133, 0.09);
}
.svc-process .step--repeat p { color: var(--color-text); }
/* Arrival field — one-off timelines end by arriving (approved card:
   design-reference/service-template/process-oneoff.html): the final step
   sits on the tint with no ghost dots (nothing repeats — the job ends),
   and the rail regains its petrol on approach, mirroring the handover
   drain out of step 1. Scoped to single-phase timelines so maintenance
   pages keep the loop field untouched. */
.svc-process .steps--nophase .step:has(+ .step:last-child)::before {
	bottom: 12px;
	background: linear-gradient(180deg, var(--color-border) 25%, var(--color-primary));
}
.svc-process .steps--nophase .step:last-child {
	background: var(--color-primary-tint);
	border-radius: 14px;
	padding: 18px 16px 24px;
	margin: 6px -16px 0;
}
.svc-process .steps--nophase .step:last-child .badge {
	background: var(--color-paper);
	color: var(--color-primary-strong);
	box-shadow: 0 0 0 5px rgba(11, 114, 133, 0.18);
}
.svc-process .steps--nophase .step:last-child .you { color: var(--color-primary-strong); }
.svc-process .steps--nophase .step:last-child p { color: var(--color-text); }
.svc-process .ctarow {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	margin-top: 40px;
	text-align: center;
}
.svc-process .or { font-size: 15px; color: var(--color-text-muted); }

@media (min-width: 768px) {
	.svc-process .lead { margin-bottom: 56px; }
}
@media (min-width: 1024px) {
	.svc-process .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 32px; }
	.svc-process .step { display: block; padding-bottom: 0; }
	/* Fixed-height phase slot on every step keeps the badges on one line */
	.svc-process .phase,
	.svc-process .phase:empty { display: block; height: 34px; margin-bottom: 10px; }
	.svc-process .phase:empty::before { content: none; }
	.svc-process .step:not(:last-child)::before {
		top: 63px;
		left: 56px;
		right: -32px;
		bottom: auto;
		width: auto;
		height: 2px;
	}
	.svc-process .step:first-child::before {
		background: linear-gradient(90deg, var(--color-primary), var(--color-border) 75%);
	}
	.svc-process .step:has(+ .step--repeat)::before { right: -4px; }
	/* Single-phase timelines (one-off services) render no phase slot, so the
	   connector re-anchors to the badge center: 40px badge / 2, minus 1px. */
	.svc-process .steps--nophase .step:not(:last-child)::before { top: 19px; }
	/* Arrival field, desktop: the connector into the field regains petrol
	   and stops short of its edge; the field takes the column geometry. */
	.svc-process .steps--nophase .step:has(+ .step:last-child)::before {
		right: -4px;
		bottom: auto;
		background: linear-gradient(90deg, var(--color-border) 25%, var(--color-primary));
	}
	.svc-process .steps--nophase .step:last-child { padding: 24px 20px; margin: -24px -20px; }
	.svc-process .badge { margin-bottom: 18px; }
	.svc-process .body { padding-top: 0; }
	.svc-process .you { display: block; min-height: 24px; margin-bottom: 0; }
	.svc-process .you:empty { display: block; }
	.svc-process .step p { max-width: 38ch; }
	.svc-process .step--repeat { padding: 24px 20px; margin: -24px -20px; }
	.svc-process .step--repeat .badge {
		box-shadow:
			0 0 0 5px rgba(11, 114, 133, 0.18),
			56px 0 0 -8px rgba(11, 114, 133, 0.16),
			100px 0 0 -12px rgba(11, 114, 133, 0.09);
	}
	.svc-process .ctarow {
		flex-direction: row;
		align-items: center;
		gap: 20px;
		margin-top: 56px;
		text-align: left;
	}
}


/* ==========================================================================
   Service FAQ — paper band (the homepage FAQ sits on surface; band
   alternation only). Component styles live in tokens.css; layout mirrors
   the homepage: heading left, panel right, "Just ask" under the heading.
   ========================================================================== */
.svc-faq { background: var(--color-paper); border-top: 1px solid var(--color-border); }
.svc-faq .inner { display: grid; gap: 28px; }
.svc-faq .svc-h2 { margin-bottom: 14px; }
.svc-faq .faq-answer { font-size: 15px; }
.svc-faq .ask { font-size: 15px; }

@media (max-width: 639px) {
	.svc-faq .faq-item summary { padding: 15px 18px; font-size: 16px; }
	.svc-faq .faq-item .faq-answer { padding: 0 18px 15px; }
}
@media (min-width: 768px) {
	.svc-faq .ask { font-size: 16px; }
}
@media (min-width: 1024px) {
	.svc-faq .inner {
		grid-template-columns: 5fr 7fr;
		column-gap: var(--space-16);
		row-gap: var(--space-4);
		align-items: start;
	}
	.svc-faq .head { grid-column: 1; grid-row: 1; }
	.svc-faq .faq-list { grid-column: 2; grid-row: 1 / 3; }
	.svc-faq .ask { grid-column: 1; grid-row: 2; align-self: start; }
}


/* Metabox-mock status pills (plugin hero only): green marks a verified
   status (Valid / Created — the sanctioned green use), petrol stays
   informational. Extends the .svc-panel row vocabulary above. */
.svc-panel li.ok .dot { background: var(--color-success); }
.svc-panel .val--ok { color: var(--color-success); background: var(--color-success-tint); }

/* ==========================================================================
   Before / with the plugin — paper band: ONE compressed persuasion section
   (the service template's problems + solutions + benefits trio collapsed).
   Each row pairs the manual routine (amber) with the plugin's flow (green)
   — the wrong→verified duality at section scale. Nothing here is a link.
   ========================================================================== */
.plg-pairs { background: var(--color-paper); border-top: 1px solid var(--color-border); }
.plg-pairs .rows { list-style: none; margin-top: var(--space-8); border-top: 1px solid var(--color-border); }
.plg-pairs .rows li {
	display: grid;
	gap: 6px 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--color-border);
}
.plg-pairs .rows b { font-size: 16px; font-weight: 600; color: var(--color-ink); }
.plg-pairs .pair { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.plg-pairs .p-before,
.plg-pairs .p-after {
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--radius-chip);
	padding: 3px 12px;
}
.plg-pairs .p-before { color: var(--color-accent); background: var(--color-accent-tint); }
.plg-pairs .p-after { color: var(--color-success); background: var(--color-success-tint); }
.plg-pairs .parrow { font-size: 13px; color: var(--color-text-muted); }
.plg-pairs .foot { margin-top: 14px; font-size: 13px; color: var(--color-text-muted); }

@media (min-width: 768px) {
	.plg-pairs .rows li { grid-template-columns: 1.1fr 2fr; align-items: center; }
}

/* ==========================================================================
   Plans — surface band: the rate card without prices. Paper tiles differ
   only in label credits and term; the trial tile leads with the petrol top
   rule + "Start here" and the section's only primary button. Tiles have no
   hover lift and no stretched link — the buttons are the only interactive
   elements (deliberately not the service-card skin).
   ========================================================================== */
.plg-plans { background: var(--color-surface); border-top: 1px solid var(--color-border); }
.plg-plans .plan-grid { list-style: none; display: grid; gap: var(--space-4); margin-top: var(--space-8); }
.plg-plans .plan {
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: 22px;
	display: flex;
	flex-direction: column;
}
.plg-plans .plan--trial { box-shadow: inset 0 3px 0 var(--color-primary); }
.plg-plans .starter {
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	color: var(--color-primary);
	margin-bottom: 10px;
}
.plg-plans .name {
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	color: var(--color-text-muted);
	margin-bottom: 6px;
}
.plg-plans .credits {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--color-ink);
	font-variant-numeric: tabular-nums;
}
.plg-plans .term { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 4px; }
.plg-plans .rule { border: 0; border-top: 1px solid var(--color-border); margin: 18px 0 16px; }
.plg-plans .spacer { flex: 1; }
.plg-plans .plan .btn { width: 100%; }
.plg-plans .offsite { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 14px; }
.plg-plans .trust-row {
	display: grid;
	gap: var(--space-4);
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-8);
	padding-top: 20px;
}
.plg-plans .trust-row p { font-size: 15px; position: relative; padding-left: 18px; }
.plg-plans .trust-row p::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-primary);
}
.plg-plans .trust-row b { font-weight: 600; color: var(--color-ink); }

/* Single-tile variation (withdrawal plugin): a lone plan keeps one column
   at a readable width instead of stretching across the 4-column grid. */
.plg-plans .plan-grid--single { max-width: 420px; }
.plg-plans .plan-grid--single .plan { padding: 26px; }

@media (min-width: 640px) {
	.plg-plans .plan-grid { grid-template-columns: 1fr 1fr; }
	.plg-plans .plan-grid--single { grid-template-columns: 1fr; }
}
@media (min-width: 1024px) {
	.plg-plans .plan-grid { grid-template-columns: repeat(4, 1fr); }
	.plg-plans .plan-grid--single { grid-template-columns: 1fr; }
	.plg-plans .trust-row { grid-template-columns: 1fr 1fr; column-gap: 40px; }

	/* Single-plan section: the trust row moves beside the lone tile —
	   offer left, reassurances right — instead of leaving the band's right
	   half empty. Heading block and the offsite line span both columns. */
	.plg-plans--single .container { display: grid; grid-template-columns: 420px 1fr; column-gap: 72px; }
	.plg-plans--single .eyebrow,
	.plg-plans--single .svc-h2,
	.plg-plans--single .container > .lead,
	.plg-plans--single .offsite { grid-column: 1 / -1; }
	.plg-plans--single .plan-grid--single { grid-column: 1; grid-row: 4; }
	.plg-plans--single .trust-row {
		grid-column: 2;
		grid-row: 4;
		grid-template-columns: 1fr;
		align-self: center;
		border-top: 0;
		margin-top: var(--space-8);
		padding-top: 0;
		gap: 20px;
	}
}

/* ==========================================================================
   Final CTA — the approved on-ink band, plugin variant: external trial
   button + "ask a question first" → the contact page instead of the form
   card (products sell on the plugin site; the form stays the services'
   conversion path). Direct-line tiles unchanged.
   ========================================================================== */
.contact-cta {
	color: var(--color-text-on-ink);
	background:
		radial-gradient(360px 300px at 90% 0%, rgba(11, 114, 133, 0.35), transparent 70%),
		var(--color-ink);
}
.contact-cta .inner { display: grid; gap: var(--space-6); }
.contact-cta .eyebrow { color: var(--color-link-on-ink); }
.contact-cta .svc-h2--cta { font-size: var(--text-xl); color: #fff; margin-bottom: 14px; max-width: none; }
.contact-cta .svc-h2--cta.section-heading::before { background: var(--color-link-on-ink); }
.contact-cta .lead { font-size: 16px; color: var(--color-text-muted-on-ink); max-width: 44ch; }

.contact-cta .ctas { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.contact-cta .ctas .btn { width: 100%; }
.contact-cta .ask-alt { font-size: 15px; color: var(--color-text-muted-on-ink); text-align: center; }
.contact-cta .ask-alt a {
	color: var(--color-link-on-ink);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.contact-cta .ask-alt a:focus-visible { outline: var(--focus-ring-on-ink); outline-offset: var(--focus-offset); border-radius: 2px; }

/* Direct-line tiles */
.contact-cta .tiles { display: grid; gap: var(--space-3); }
.contact-cta .tile {
	border: 1px solid var(--color-border-on-ink);
	border-radius: var(--radius-card);
	padding: 18px 20px;
	background: rgba(255, 255, 255, 0.03);
	transition: border-color var(--transition-fast);
}
.contact-cta .tile:hover { border-color: var(--color-link-on-ink); }
.contact-cta .tile b {
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-eyebrow);
	color: var(--color-text-muted-on-ink);
	margin-bottom: 6px;
}
.contact-cta .tile a {
	color: var(--color-link-on-ink);
	font-weight: 600;
	font-size: 18px;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.contact-cta .tile a:focus-visible { outline: var(--focus-ring-on-ink); outline-offset: var(--focus-offset); border-radius: 2px; }
/* Phone is a tel: link but keeps the card's non-link look */
.contact-cta .tile .tile-phone { color: #fff; text-decoration: none; font-variant-numeric: tabular-nums; }

@media (min-width: 640px) {
	.contact-cta .ctas { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-6); }
	.contact-cta .ctas .btn { width: auto; }
	.contact-cta .ask-alt { text-align: left; }
	.contact-cta .tiles { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}
@media (min-width: 768px) {
	.contact-cta {
		background:
			radial-gradient(640px 420px at 78% 12%, rgba(11, 114, 133, 0.35), transparent 70%),
			radial-gradient(520px 380px at 4% 100%, rgba(11, 114, 133, 0.18), transparent 70%),
			var(--color-ink);
	}
	.contact-cta .svc-h2--cta { font-size: var(--text-2xl); }
	.contact-cta .lead { font-size: 18px; }
	.contact-cta .tile a { font-size: 19px; }
}
@media (min-width: 1024px) {
	.contact-cta .inner {
		grid-template-columns: 6fr 5fr;
		column-gap: var(--space-16);
		row-gap: 28px;
		align-items: center;
	}
	.contact-cta .head { grid-column: 1; }
	.contact-cta .ctas { grid-column: 1; }
	.contact-cta .tiles { grid-column: 2; grid-row: 1 / 3; }
}