/**
 * CRMTeardown — bold, high-contrast section styling (WP Kraken inspired).
 * Palette: black + white + brand green. theme.json holds the design tokens;
 * this file adds the components block markup relies on. Kept small and fast.
 */

/* =========================================================================
 * Type scale — the single source of truth for every font-size on the site.
 *
 * Before this block there were 59 distinct font-size values in this file,
 * thirteen of them crammed between 10px and 16px (10, 10.5, 11, 11.5, 12,
 * 12.5, 13, 13.5, 14, 14.5, 15, 15.5, 16). Half-pixel steps are invisible to
 * a reader but each one is a separate thing to maintain, so they collapse
 * here into 13 steps. Nothing in the small sizes moves by more than 1px.
 *
 * 11px is the floor. Below that, mono + uppercase + wide letter-spacing —
 * which is how nearly every micro label on this site is set — stops being
 * comfortably readable.
 *
 * Mirrored in theme.json's fontSizes so the block editor offers the same
 * scale the front end uses. Change one, change the other.
 * ====================================================================== */
:root {
	--fs-micro:   11px;                      /* eyebrow, badge, table head, tag */
	--fs-caption: 13px;                      /* meta, source note, breadcrumb   */
	--fs-small:   15px;                      /* card body, nav, small button    */
	--fs-body:    16px;                      /* default body copy               */
	--fs-lead:    18px;                      /* lead paragraph, small heading   */
	--fs-card:    21px;                      /* card heading                    */
	--fs-lead-lg: clamp(19px, 2vw, 26px);    /* pull quote, article h3          */
	--fs-card-lg: 26px;                      /* large card heading, year        */
	--fs-h3:      clamp(24px, 2.6vw, 32px);  /* sub-section heading             */
	--fs-h2:      clamp(28px, 3.4vw, 44px);  /* section heading                 */
	--fs-h1:      clamp(34px, 5vw, 62px);    /* hero                            */
	--fs-num:     clamp(30px, 3.4vw, 42px);  /* big stat / price number         */
	--fs-display: clamp(46px, 6vw, 72px);    /* headline price, statement       */

	/* Brand green as TEXT on a light ground. `green` (#7c3aed) is 1.9:1 on
	   white and `green-dark` (#5430d1) is 2.94:1, so neither clears AA for
	   words. Both stay as they are for fills, rules and dots, where contrast
	   does not apply. This darker step is only ever a text colour: 5.19:1 on
	   white, 4.70:1 on the soft paper. Reach for it whenever green ink lands
	   on a light background. */
	/* #5430d1 (--green-dark) measures 2.66:1 on --soft and 2.87:1 on white, so
	   it fails WCAG AA for text at any size. This is the green that text uses:
	   4.70:1 on --soft, 5.19:1 on white. --green-dark stays in the palette for
	   borders and fills, where contrast rules do not apply. */
	--green-text: #6d28d9;

	/* Same idea for the cyan accent. `cyan` is 2.0:1 on white and `cyan-dark`
	   is 3.62:1, fine for a large number and not for an 11px label. This one
	   is 5.39:1 on white, 4.88:1 on soft. */
	--cyan-text: #6342e5;

	/* The edge on anything filled with `green-tint`. There was no single value
	   for this and it showed: on the home page alone the same tint carried a
	   cyan border on the featured cards, green at 40% on the wide card and
	   green at 45% on the pricing card. One fill, three edges. Every tinted
	   card takes this now. */
	--tint-line: rgb(124 58 237 / 40%);
}

/* ------------------------------------------------------------------ *
 * Base
 * ------------------------------------------------------------------ */
:where(body) {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Big display headings: never hyphenate or break mid-word */
h1, h2, .wp-block-heading {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

/* Clip only the main content's horizontal overflow — never html/body, which
 * would break the sticky header. */
main { overflow-x: clip; }

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */
/* The sticky element must be the template-part WRAPPER, not .ds-header.
 * `wp:template-part` wraps parts/header.html in <header class="wp-block-
 * template-part">, and that wrapper is exactly as tall as the header itself.
 * A sticky box can only travel inside its parent, so with zero travel room
 * .ds-header scrolled away with the page. Sticking the wrapper instead gives
 * it the whole .wp-site-blocks column to travel in. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 999;
}
.ds-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: rgba(255, 255, 255, 0.92) !important;
	backdrop-filter: saturate(160%) blur(8px);
}
/* ---- Custom nav + mega menu ---- */
.ds-mainnav { position: relative; }
.ds-menu {
	list-style: none;
	margin: 0;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	gap: 6px;
	border: 1.5px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
}
.ds-menu > li { position: relative; }
.ds-menu > li > a {
	display: block;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: var(--fs-small);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 9px 20px;
	border-radius: 999px;
	transition: background-color 0.16s ease, color 0.16s ease;
}
/* Subtle grey pill on hover */
.ds-menu > li > a:hover {
	background: var(--wp--preset--color--soft-2);
	color: var(--wp--preset--color--contrast);
}
/* Open mega trigger = solid black pill (active state, like Kraken) */
.ds-menu > li.ds-has-mega:hover > a,
.ds-menu > li.ds-has-mega:focus-within > a {
	background: var(--wp--preset--color--contrast);
	color: #ffffff;
}

/* Mega panel — desktop only.
   Everything positional lives inside the min-width query on purpose. When these
   sat outside it, the mobile block had to undo them, and it lost: the reveal
   rule ".ds-has-mega:focus-within .ds-mega" is (0,3,0) against a plain
   ".ds-mega" (0,1,0), so tapping the sub-menu toggle put focus inside the item
   and re-applied translateX(-50%), sliding the whole panel half its width off
   the left edge of the phone. Scoping by width means there is nothing to undo. */
@media (min-width: 981px) {
	/* Panel centres on the whole nav (≈ page centre), not on the Services link */
	.ds-menu > li.ds-has-mega { position: static; }
	.ds-menu > li.ds-has-mega > a { position: relative; }
	.ds-mega {
		position: absolute;
		top: calc(100% + 18px);
		left: 50%;
		transform: translateX(-50%) translateY(8px);
		/* Sized for three columns. Dropping the fourth without narrowing the
		   panel would have stretched every card by a third. */
		width: min(820px, 92vw);
		background: #ffffff;
		border: 1.5px solid var(--wp--preset--color--contrast);
		border-radius: 24px;
		padding: 28px;
		box-shadow: 0 24px 60px rgba(22,16,60, 0.18);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
		z-index: 1000;
	}
	/* Hover bridge on the trigger LINK, not the (static) <li>. The link keeps
	   its hover state down through the pill's bottom padding and across the gap
	   to the panel, so the mouse never crosses a dead zone that hides the mega
	   mid-move — that gap was the flicker. Scoped to the link's own width (±24px)
	   so hovering below Home/Blog/About no longer opens Services. */
	.ds-has-mega > a::after {
		content: "";
		position: absolute;
		top: 100%;
		left: -24px;
		right: -24px;
		height: 34px;
	}
	.ds-has-mega:hover .ds-mega,
	.ds-has-mega:focus-within .ds-mega {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(-50%) translateY(0);
	}
}
.ds-mega-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.ds-mega-h {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: var(--fs-body);
	color: var(--wp--preset--color--contrast);
	margin: 0 0 14px;
}
.ds-mega-ic { font-size: var(--fs-lead); line-height: 1; }
.ds-mega-card {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 14px;
	margin-bottom: 10px;
	transition: border-color 0.16s ease, transform 0.16s ease;
}
.ds-mega-card:hover { border-color: var(--wp--preset--color--contrast); transform: translateX(2px); }
.ds-mega-card strong {
	display: block;
	font-weight: 700;
	font-size: var(--fs-small);
	color: var(--wp--preset--color--contrast);
	margin-bottom: 3px;
}
.ds-mega-card em {
	display: block;
	font-style: normal;
	font-size: var(--fs-caption);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}
.ds-mega-card .ds-arrow {
	flex: 0 0 auto;
	font-size: var(--fs-body);
	color: var(--wp--preset--color--contrast);
	transition: transform 0.16s ease;
}
.ds-mega-card:hover .ds-arrow { transform: translateX(3px); }
.ds-mega-card--accent { background: var(--wp--preset--color--green-tint); border-color: var(--tint-line); }

/* Hamburger + sub-menu chevron (mobile only; the chevron is injected by JS) */
.ds-burger, .ds-subtoggle { display: none; }

/* Freeze the page behind the open drawer, so a swipe scrolls the menu and not
   the article underneath it. */
html.ds-nav-lock, html.ds-nav-lock body { overflow: hidden; }
/* backdrop-filter makes .ds-header the containing block for any position:fixed
   descendant, which collapsed the drawer to the header's own 92px. Dropping it
   while the drawer is open hands the viewport back. The blur is only there for
   content scrolling under a closed header anyway. */
html.ds-nav-lock .ds-header {
	backdrop-filter: none;
	background-color: var(--wp--preset--color--base) !important;
	/* overflow:hidden on <html> above freezes the scroll but also kills the
	   sticky header (it drops to its scrolled-away flow position, leaving page
	   content bleeding above the drawer). Pin it to the top for the duration of
	   the open menu. A fixed ancestor does NOT trap the fixed drawer — only
	   transform/filter would, and backdrop-filter is dropped just above. */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1001;
}

/* Mobile nav: hamburger + full-height drawer (placed AFTER base nav so it wins the cascade) */
@media (max-width: 980px) {
	.ds-header-cta { display: none !important; }
	.ds-burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 48px;
		height: 48px;
		padding: 0 12px;
		background: var(--wp--preset--color--contrast);
		border: 0;
		border-radius: 999px;
		cursor: pointer;
	}
	.ds-burger span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
	.ds-mainnav.is-open .ds-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.ds-mainnav.is-open .ds-burger span:nth-child(2) { opacity: 0; }
	.ds-mainnav.is-open .ds-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* Drawer, not a floating dropdown. The old panel was position:absolute and
	   ~1400px tall, so it ran off the bottom of the screen, scrolled with the
	   page instead of itself, and buried Blog/About/Contact under ten service
	   cards. Now it is fixed below the header, scrolls internally, and Services
	   collapses behind a toggle. */
	.ds-menu {
		position: fixed;
		top: var(--ds-headerh, 92px);
		left: 0;
		right: 0;
		bottom: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		width: auto;
		padding: 10px 16px calc(24px + env(safe-area-inset-bottom));
		border-radius: 0;
		background: #fff;
		box-shadow: 0 24px 60px rgba(22,16,60, 0.18);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		display: none;
	}
	.ds-mainnav.is-open .ds-menu { display: flex; }
	.ds-menu > li { border-bottom: 1px solid var(--wp--preset--color--line); }
	.ds-menu > li:last-child { border-bottom: 0; }
	.ds-menu > li > a { display: block; padding: 15px 4px; font-size: var(--fs-body); }
	/* The desktop hover state paints the Services pill black; on a stacked list
	   that reads as "this item is selected". */
	.ds-menu > li.ds-has-mega:hover > a,
	.ds-menu > li.ds-has-mega:focus-within > a {
		background: transparent;
		color: var(--wp--preset--color--contrast);
	}

	/* Same problem, the other items. A grey pill is right on a horizontal bar
	   where it hugs the label; in a stacked drawer every row is full width, so
	   the pill becomes a beige block across the whole screen and reads as a
	   selected page rather than a hover hint. Colour only here, and drop the
	   999px radius so no stray rounded corner can show. Gated on (hover:hover)
	   so a tap on a phone does not leave the state stuck on the last item;
	   touch gets :active instead. */
	.ds-menu > li > a { border-radius: 0; }
	@media (hover: hover) {
		.ds-menu > li > a:hover {
			background: transparent;
			color: var(--green-text);
		}
	}
	.ds-menu > li > a:active,
	.ds-menu > li > a:focus-visible {
		background: transparent;
		color: var(--green-text);
	}

	/* Services row: link on the left, chevron button on the right. */
	.ds-menu > li.ds-has-mega { display: grid; grid-template-columns: 1fr auto; align-items: center; }
	.ds-subtoggle {
		display: block;
		grid-column: 2;
		width: 44px;
		height: 44px;
		padding: 0;
		background: none;
		border: 0;
		cursor: pointer;
		position: relative;
	}
	.ds-subtoggle::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 9px;
		height: 9px;
		margin: -6px 0 0 -5px;
		border-right: 2px solid var(--wp--preset--color--contrast);
		border-bottom: 2px solid var(--wp--preset--color--contrast);
		transform: rotate(45deg);
		transition: transform 0.2s ease;
	}
	.ds-mainnav.is-sub-open .ds-subtoggle::before { transform: rotate(-135deg); margin-top: -2px; }
	/* Keep the focus ring for keyboard users, drop it after a tap. */
	.ds-subtoggle:focus:not(:focus-visible) { outline: none; }

	/* Mega is an inline stacked list, hidden until the toggle is tapped. It
	   carries no positioning here because the desktop rules are width-scoped,
	   so a plain display toggle is the whole story. */
	.ds-mega {
		grid-column: 1 / -1;
		max-width: 100%;
		/* Breathing room so the first group heading ("Maintenance & Care") is not
		   glued to the green open-Services row above it. */
		padding: 16px 0 14px;
		display: none;
	}
	.ds-mainnav.is-sub-open .ds-mega { display: block; }
	.ds-mega-grid { grid-template-columns: 1fr; gap: 14px; }
	.ds-mega-h { font-size: var(--fs-caption); margin-bottom: 8px; color: var(--wp--preset--color--muted); text-transform: uppercase; letter-spacing: .06em; }
	.ds-mega-card { padding: 12px 14px; margin-bottom: 8px; }
	.ds-mega-card strong { font-size: var(--fs-small); }
	.ds-mega-card em { font-size: var(--fs-caption); }
	.ds-has-mega::after { display: none; }

	/* Keep the header row from overflowing narrow screens */
	.ds-header > .alignwide { gap: 12px; }
	.ds-header .wp-block-site-logo { max-width: 150px; }
	.ds-hero-rating { display: block; font-size: var(--fs-small); }
	.ds-hero-rating .ds-stars { font-size: var(--fs-small); display: inline; }
}

/* ------------------------------------------------------------------ *
 * Buttons — pill shapes
 * ------------------------------------------------------------------ */
/* Every button gets a hard "border under it" (3px offset shadow) and presses
 * down on hover — the tactile Kraken look. */
.wp-block-button__link {
	box-shadow: 0 3px 0 0 var(--wp--preset--color--contrast);
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.13s ease, box-shadow 0.13s ease;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	transform: translateY(3px);
	box-shadow: 0 0 0 0 var(--wp--preset--color--contrast);
}
/* On dark sections the under-border is light so it stays visible */
.has-dark-background-color .wp-block-button__link,
.has-dark-2-background-color .wp-block-button__link,
.has-dark-brand-gradient-background .wp-block-button__link,
.ds-cta .wp-block-button__link,
.ds-dark-panel .wp-block-button__link {
	box-shadow: 0 3px 0 0 rgba(255, 255, 255, 0.55);
}
.has-dark-background-color .wp-block-button__link:hover,
.has-dark-2-background-color .wp-block-button__link:hover,
.has-dark-brand-gradient-background .wp-block-button__link:hover,
.ds-cta .wp-block-button__link:hover,
.ds-dark-panel .wp-block-button__link:hover { box-shadow: 0 0 0 0 transparent; }

/* Brand (green) */
.wp-block-button.is-style-brand .wp-block-button__link {
	background: var(--wp--preset--color--green);
	color: #ffffff;
	border-radius: 999px;
	font-weight: 700;
}
.wp-block-button.is-style-brand .wp-block-button__link:hover,
.wp-block-button.is-style-brand .wp-block-button__link:focus {
	background: #16103c;
	color: #ffffff;
}
/* On dark sections a black hover disappears — invert to white bg / black text */
.has-dark-background-color .wp-block-button.is-style-brand .wp-block-button__link:hover,
.has-dark-background-color .wp-block-button.is-style-brand .wp-block-button__link:focus,
.has-dark-2-background-color .wp-block-button.is-style-brand .wp-block-button__link:hover,
.has-dark-2-background-color .wp-block-button.is-style-brand .wp-block-button__link:focus,
.has-dark-brand-gradient-background .wp-block-button.is-style-brand .wp-block-button__link:hover,
.has-dark-brand-gradient-background .wp-block-button.is-style-brand .wp-block-button__link:focus,
.ds-cta .wp-block-button.is-style-brand .wp-block-button__link:hover,
.ds-cta .wp-block-button.is-style-brand .wp-block-button__link:focus,
.ds-dark-panel .wp-block-button.is-style-brand .wp-block-button__link:hover,
.ds-dark-panel .wp-block-button.is-style-brand .wp-block-button__link:focus {
	background: #ffffff;
	color: #16103c;
}

/* Ghost (outline) — black border comes from theme.json button border */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1.5px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
	font-weight: 700;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus {
	background: var(--wp--preset--color--contrast);
	color: #ffffff;
}
/* Ghost on dark sections */
.has-dark-background-color .wp-block-button.is-style-ghost .wp-block-button__link,
.has-dark-2-background-color .wp-block-button.is-style-ghost .wp-block-button__link,
.has-dark-brand-gradient-background .wp-block-button.is-style-ghost .wp-block-button__link {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.6);
}
.has-dark-background-color .wp-block-button.is-style-ghost .wp-block-button__link:hover,
.has-dark-2-background-color .wp-block-button.is-style-ghost .wp-block-button__link:hover,
.has-dark-brand-gradient-background .wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: var(--wp--preset--color--green);
	color: #ffffff;
	border-color: var(--wp--preset--color--green);
}

/* ------------------------------------------------------------------ *
 * Eyebrow — pill tag label
 * ------------------------------------------------------------------ */
.ds-eyebrow {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: var(--fs-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	line-height: 1;
}
/* A small green marker before the eyebrow label */
.ds-eyebrow::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--green);
	border: 1.5px solid #16103c;
	vertical-align: baseline;
}
.ds-eyebrow.has-text-align-center { display: block; }
/* Eyebrow on dark sections turns white */
.has-dark-background-color .ds-eyebrow,
.has-dark-2-background-color .ds-eyebrow,
.has-dark-brand-gradient-background .ds-eyebrow,
.ds-cta .ds-eyebrow,
.ds-dark-panel .ds-eyebrow { color: #ffffff; }

/* --- Card grids that square off their last row -------------------------
   WordPress lays these groups out as auto-fill minmax(300px, 1fr), which gives
   three columns and leaves a short final row sitting next to a hole. Six
   tracks instead: every card takes two, so the rows still read as three
   across, and when the count leaves two cards on the last row those two take
   three tracks each and the row runs the full width.

   `:last-child:nth-child(3n+2)` is the count-mod-3-is-2 test. It matches when
   the grid holds 5, 8, 11 ... children and nothing else, so a six or nine card
   grid is left alone and the whole thing falls back to a plain grid if a card
   is added or removed.

   Was scoped to `.ds-dark-panel`, which was the only place it existed when it
   was written. The five cards on /services/ sit on white and need it too, so
   the scope is now the class itself. Two class names because the layout rule
   WordPress prints for these blocks is a single class and lands after this
   file. */
@media (min-width: 981px) {
	.wp-block-group.ds-svc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.wp-block-group.ds-svc-grid > * { grid-column: span 2; }
	.wp-block-group.ds-svc-grid:has(> :last-child:nth-child(3n+2)) > :nth-last-child(-n+2) {
		grid-column: span 3;
	}
}

/* Hero brand artwork */
.ds-hero-art { max-width: 460px; margin-left: auto; margin-right: auto; }
.ds-hero-art svg { display: block; width: 100%; height: auto; }

/* Hero rating line (plain, sentence case, black stars) */
.ds-hero-rating {
	color: var(--wp--preset--color--contrast);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.ds-hero-rating .ds-stars {
	color: #16103c;
	letter-spacing: 2px;
	font-size: var(--fs-card);
	line-height: 1;
}
.ds-hero-rating strong { font-weight: 700; }

/* ------------------------------------------------------------------ *
 * Cards — bold bordered box with hard-offset hover
 * ------------------------------------------------------------------ */
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--preset--color--contrast);
	border-radius: 22px;
	padding: 32px;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.wp-block-group.is-style-card:hover {
	transform: translate(-4px, -4px);
	box-shadow: 6px 6px 0 0 var(--wp--preset--color--green);
}
/* Cards keep their white face even on dark sections (Kraken look) */

/* ------------------------------------------------------------------ *
 * Icon chip — bordered box
 * ------------------------------------------------------------------ */
.ds-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--wp--preset--color--green);
	color: #ffffff;
	border: 1.5px solid #16103c;
	margin-bottom: 6px;
}
.ds-icon svg { display: block; }

/* Process step number badge */
.ds-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--wp--preset--color--green);
	color: #ffffff;
	border: 1.5px solid #16103c;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: var(--fs-card-lg);
	line-height: 1;
}

/* =======================================================================
 * Trust strip logos
 *
 * Six names set as bare 21px words in a wide flex row read as a logo wall.
 * Eleven do not: they wrap into ragged lines with no edge to sit against,
 * and the row stops looking like a deliberate list. Each name is a chip
 * now — the wrap is the point rather than a failure of it, and the row
 * reads the same at six names or fifteen.
 *
 * The selector carries three class names on purpose. WP prints both the
 * flex layout and `.alignwide`'s 1220px cap as two-class rules in the head,
 * after this stylesheet, so a two-class selector here loses on source order
 * and the max-width below is silently ignored — which is also what the
 * `row-gap: 20px !important` this replaces was working around.
 * ==================================================================== */
.wp-block-group.ds-logos.alignwide {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	/* Narrower than the 1220px container on purpose: it turns one long line
	   with a single orphan under it into two balanced rows. */
	max-width: 720px;
	margin-inline: auto;
}
.ds-logos-item {
	margin: 0;
	padding: 9px 18px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: var(--fs-small);
	line-height: 1.4;
	color: var(--wp--preset--color--ink-2);
	letter-spacing: -0.01em;
	white-space: nowrap;
	transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.ds-logos-item:hover {
	color: var(--green-text);
	border-color: var(--tint-line);
	background: var(--wp--preset--color--green-tint);
}
.ds-logos-sep { color: var(--wp--preset--color--line); }

/* ------------------------------------------------------------------ *
 * Check list
 * ------------------------------------------------------------------ */
.wp-block-list.is-style-check { list-style: none; padding-left: 0; line-height: 1.6 !important; }
.wp-block-list.is-style-check li {
	position: relative;
	padding-left: 34px;
	margin-bottom: 14px;
}
.wp-block-list.is-style-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--green);
	border: 1.5px solid #16103c;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}
.wp-block-list.is-style-no-bullet { list-style: none; padding-left: 0; }

/* ------------------------------------------------------------------ *
 * Image — large rounded
 * ------------------------------------------------------------------ */
.wp-block-image.is-style-rounded-lg img { border-radius: 22px; }

/* ------------------------------------------------------------------ *
 * Pricing — popular plan emphasis (dark card)
 * ------------------------------------------------------------------ */
.ds-plan { border: 1.5px solid var(--wp--preset--color--contrast); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.ds-plan--popular { box-shadow: 6px 6px 0 0 var(--wp--preset--color--green); }
@media (min-width: 782px) {
	.ds-plan--popular { transform: translateY(-12px); }
}

/* ------------------------------------------------------------------ *
 * FAQ accordion (native <details>)
 * ------------------------------------------------------------------ */
.ds-faq .wp-block-details { transition: box-shadow 0.16s ease; }
.ds-faq .wp-block-details[open] { box-shadow: 5px 5px 0 0 var(--wp--preset--color--green); }
.ds-faq summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: var(--fs-lead);
	color: var(--wp--preset--color--contrast);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
}
.ds-faq summary::-webkit-details-marker { display: none; }
.ds-faq summary::after {
	content: "+";
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 400;
	font-size: var(--fs-card);
	line-height: 1;
	color: #ffffff;
	background: var(--wp--preset--color--green);
	border: 1.5px solid #16103c;
	border-radius: 50%;
	transition: transform 0.2s ease;
}
.ds-faq .wp-block-details[open] summary::after { content: "\2212"; }

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */
.ds-footer a { color: var(--wp--preset--color--soft-2); transition: color 0.16s ease; }
.ds-footer a:hover { color: var(--wp--preset--color--green); }
.ds-footer h4 { margin-bottom: 16px; }

/* ------------------------------------------------------------------ *
 * Scroll reveal (progressive enhancement)
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	.ds-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
	.ds-reveal.is-visible { opacity: 1; transform: none; }
}




/* -------------------------------------------------------------------------
 * Breadcrumbs (SEO engine renderer)
 * ---------------------------------------------------------------------- */
.ds-breadcrumbs { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-caption); letter-spacing: 0.02em; color: var(--wp--preset--color--muted); }
.ds-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ds-breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; }
.ds-breadcrumbs li + li::before { content: "/"; color: var(--wp--preset--color--line); }
.ds-breadcrumbs a { color: var(--wp--preset--color--muted); text-decoration: none; }
.ds-breadcrumbs a:hover { color: var(--green-text); }
.ds-breadcrumbs [aria-current="page"] { color: var(--wp--preset--color--contrast); font-weight: 500; }

/* -------------------------------------------------------------------------
 * Contact form (inc/contact-form.php)
 * ---------------------------------------------------------------------- */
/* Remove the root block-gap between the sticky header and the first section */
.wp-site-blocks > main { margin-block-start: 0 !important; }

.ds-form { display: flex; flex-direction: column; gap: 22px; }
.ds-form > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.ds-form__title { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-card); }
.ds-form__row { display: grid; grid-template-columns: 1fr; gap: 22px; }
.ds-field input, .ds-field select, .ds-field textarea { border-color: #c6c0de !important; }
.ds-field { display: flex; flex-direction: column; gap: 7px; }
.ds-field label { font-size: var(--fs-small); font-weight: 600; color: var(--wp--preset--color--contrast); letter-spacing: 0.01em; }
.ds-req { color: var(--green-text); }
.ds-field input, .ds-field select, .ds-field textarea {
	box-sizing: border-box; max-width: 100%;
	width: 100%; font: inherit; font-size: var(--fs-body); color: var(--wp--preset--color--ink-2);
	background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 12px; padding: 13px 16px; transition: border-color .15s ease, box-shadow .15s ease;
}
.ds-field textarea { resize: vertical; min-height: 130px; }
.ds-field input:focus, .ds-field select:focus, .ds-field textarea:focus {
	outline: none; border-color: var(--wp--preset--color--green);
	box-shadow: 0 0 0 3px rgba(124,58,237,.18);
}
.ds-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ds-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.ds-form__submit { cursor: pointer; }
.ds-form__submit[disabled] { opacity: .6; cursor: progress; }
.ds-form__status { margin: 0; font-size: var(--fs-small); font-weight: 500; }
.ds-form__status.is-pending { color: var(--wp--preset--color--muted); }
.ds-form__status.is-ok { color: var(--green-text); }
.ds-form__status.is-error { color: #d63638; }
/* On dark panels the labels/inputs invert */
.has-dark-background-color .ds-form .ds-field label,
.ds-dark-panel .ds-form .ds-field label,
.ds-cta .ds-form .ds-field label { color: #fff; }
.has-dark-background-color .ds-form .ds-field input,
.has-dark-background-color .ds-form .ds-field select,
.has-dark-background-color .ds-form .ds-field textarea,
.ds-dark-panel .ds-form .ds-field input,
.ds-dark-panel .ds-form .ds-field select,
.ds-dark-panel .ds-form .ds-field textarea {
	background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff;
}
@media (max-width: 680px) { .ds-form__row { grid-template-columns: 1fr !important; } }

/* -------------------------------------------------------------------------
 * Policy / legal pages (radionations-style card + callouts)
 * ---------------------------------------------------------------------- */
.ds-policy {
	max-width: 880px; margin: 0 auto;
	border: 1.5px solid var(--wp--preset--color--contrast); border-radius: 28px;
	padding: clamp(28px, 4vw, 56px);
	background: var(--wp--preset--color--base);
}
.ds-policy > .wp-block-heading:first-child,
.ds-policy > h1:first-child { margin-top: 0; }
/* Title */
.ds-policy h1 {
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: var(--fs-h2) !important; text-transform: none !important;
	letter-spacing: -0.01em !important; line-height: 1.05 !important;
}
/* Section headings: sentence-case Poppins, not the huge uppercase display */
.ds-policy h2 {
	font-family: var(--wp--preset--font-family--sans) !important;
	font-weight: 700 !important; font-size: var(--fs-lead-lg) !important;
	text-transform: none !important; letter-spacing: -0.01em !important; line-height: 1.2 !important;
	margin-top: 2em; margin-bottom: .5em;
}
.ds-policy h3 {
	font-family: var(--wp--preset--font-family--sans) !important;
	font-weight: 700 !important; font-size: var(--fs-lead) !important; margin-top: 1.4em; margin-bottom: .3em;
}
.ds-policy p, .ds-policy li { font-size: var(--fs-lead); line-height: 1.7; color: var(--wp--preset--color--ink-2); }
.ds-policy ul { padding-left: 20px; }
.ds-policy li { margin-bottom: 8px; }
.ds-policy a { color: var(--green-text); text-decoration: underline; text-underline-offset: 2px; }
.ds-policy code {
	background: var(--wp--preset--color--soft-2); padding: 2px 7px; border-radius: 6px;
	font-family: var(--wp--preset--font-family--mono); font-size: 0.9em;
}
.ds-policy .ds-updated { color: var(--wp--preset--color--muted); font-size: var(--fs-small); margin-top: 6px; }

/* Callout boxes */
.ds-callout { border-radius: 18px; padding: clamp(20px, 2.4vw, 30px); margin: 26px 0; }
.ds-callout > :first-child { margin-top: 0; }
.ds-callout > :last-child { margin-bottom: 0; }
.ds-callout .ds-callout__title { font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: var(--fs-lead); margin: 0 0 12px; text-transform: none; letter-spacing: 0; color: var(--wp--preset--color--contrast); }
.ds-callout--note { background: #fbf3d9; }
.ds-callout--ok { background: var(--wp--preset--color--green-tint); }
.ds-callout--warn { background: #fdeaea; }

/* -------------------------------------------------------------------------
 * Floating WhatsApp / help button
 * ---------------------------------------------------------------------- */
.ds-float {
	position: fixed; right: 20px; bottom: 20px; z-index: 60;
	display: inline-flex; align-items: center; gap: 10px;
	padding: 13px 20px 13px 16px; border-radius: 999px;
	background: var(--wp--preset--color--contrast); color: #fff;
	font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: var(--fs-small);
	text-decoration: none; box-shadow: 0 6px 22px rgba(22,16,60,.28);
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ds-float:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(22,16,60,.34); color: #fff; }
.ds-float--wa { background: #25D366; color: #0a2e17; }
.ds-float--wa:hover { background: #20bd5a; color: #0a2e17; }
.ds-float svg { flex: none; }
@media (max-width: 600px) {
	.ds-float { padding: 13px; right: 16px; bottom: 16px; }
	.ds-float__text { display: none; }
}

/* =========================================================================
 * Kraken-match: Contact / About / Blog pages
 * ====================================================================== */

/* ---- Contact: centered form ---------------------------------------- */
.ds-form--centered { max-width: 860px; margin-left: auto; margin-right: auto; }
.ds-form--centered .ds-form__consent,
.ds-form--centered .ds-form__actions { text-align: center; }
.ds-form--centered .ds-form__actions { flex-direction: column; justify-content: center; }
.ds-form__consent { margin: 4px 0 0; font-size: var(--fs-caption); color: var(--wp--preset--color--muted); }
.ds-form__consent a { color: var(--wp--preset--color--ink-2); text-decoration: underline; text-underline-offset: 2px; }
/* Green submit (standalone <button>, no .wp-block-button parent) */
.ds-form__submit.is-style-brand { background: var(--wp--preset--color--green); color: #ffffff; border-color: var(--wp--preset--color--green); }
.ds-form__submit.is-style-brand:hover, .ds-form__submit.is-style-brand:focus { background: #16103c; color: #fff; border-color: #16103c; }
/* On a dark panel the brand button must NOT hover to black (black-on-dark is invisible) — go to white instead */
.ds-dark-panel .ds-form__submit.is-style-brand:hover,
.ds-dark-panel .ds-form__submit.is-style-brand:focus,
.has-dark-background-color .ds-form__submit.is-style-brand:hover,
.has-dark-background-color .ds-form__submit.is-style-brand:focus { background: #fff; color: #16103c; border-color: #fff; }
.ds-form--centered .ds-form__submit { min-width: 210px; }
/* Larger, softer fields to match Kraken */
.ds-form .ds-field input, .ds-form .ds-field select, .ds-form .ds-field textarea { border-radius: 14px; padding: 15px 18px; border-color: #d8d3ec; line-height: 1.5; }
.ds-form .ds-field textarea { min-height: 190px; }
/* Select: strip native chrome so its height matches the inputs exactly, + custom chevron */
.ds-form .ds-field select {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	height: auto; cursor: pointer; padding-right: 48px;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%230e0e10'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 18px center; background-size: 20px;
}
.ds-form .ds-field select:invalid,
.ds-form .ds-field select option[value=""] { color: var(--wp--preset--color--muted); }
.ds-form .ds-field select option { color: var(--wp--preset--color--ink-2); }

/* ---- Contact: "visit us" details card ------------------------------ */
.ds-contact-details { border: 1.5px solid var(--wp--preset--color--contrast); border-radius: 22px; padding: clamp(24px,3vw,38px); background: var(--wp--preset--color--base); }
.ds-contact-details h3 { font-family: var(--wp--preset--font-family--sans); font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--muted); margin: 0 0 6px; }
.ds-contact-details .ds-cd-big { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-h3); line-height: 1.1; margin: 0 0 18px; }

/* ---- About: big dark stat cards ------------------------------------ */
.ds-statcards { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.ds-statcard { background: var(--wp--preset--color--contrast); border-radius: 26px; padding: clamp(24px,2.6vw,34px); min-height: 300px; display: flex; flex-direction: column; }
.ds-statcard__icon { font-size: var(--fs-num); line-height: 1; }
.ds-statcard__num { margin-top: auto; font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-h1); line-height: 1; color: var(--wp--preset--color--green); }
.ds-statcard__label { margin-top: 12px; font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: var(--fs-lead); color: #fff; }
@media (max-width: 860px){ .ds-statcards { grid-template-columns: 1fr; } .ds-statcard { min-height: 0; } }

/* ---- About: mission statement doodle ------------------------------- */
.ds-mission { max-width: 760px; margin: 0 auto; text-align: center; }
.ds-mission p { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-h2); line-height: 1.16; }

/* ---- Blog: featured + cards --------------------------------------- */
.ds-postmeta { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-caption); color: var(--wp--preset--color--muted); letter-spacing: 0.01em; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ds-postmeta .wp-block-post-terms a, .ds-cat-pill { display: inline-block; background: var(--wp--preset--color--green); color: #ffffff; font-weight: 500; padding: 3px 12px; border-radius: 999px; text-decoration: none; font-size: var(--fs-caption); }
.ds-postmeta .sep { opacity: .55; }

/* post cards (used in index/archive query loop) */
.wp-block-query .is-style-card { padding: 0; border: none; background: transparent; box-shadow: none; }
.wp-block-query .is-style-card:hover { transform: none; box-shadow: none; }
.wp-block-query .is-style-card .wp-block-post-featured-image { margin: 0 0 16px; }
.wp-block-query .is-style-card .wp-block-post-featured-image img { border-radius: 18px; width: 100%; aspect-ratio: 16/10; object-fit: cover; border: 1.5px solid var(--wp--preset--color--line); }
.wp-block-query .is-style-card .wp-block-post-title { line-height: 1.22; letter-spacing: -0.01em; }
.wp-block-query .is-style-card .wp-block-post-title a { color: var(--wp--preset--color--contrast); }
.wp-block-query .is-style-card .wp-block-post-title a:hover { color: var(--green-text); }

/* featured (first) post — big split */
.ds-featured .wp-block-post-featured-image img { border-radius: 22px; aspect-ratio: 16/11; object-fit: cover; width: 100%; border: 1.5px solid var(--wp--preset--color--line); }
.ds-featured .wp-block-post-title { font-family: var(--wp--preset--font-family--sans); font-weight: 700; letter-spacing: -0.015em; }

/* Blog: first post in the loop becomes a full-width featured split */
.wp-block-query .wp-block-post-template.is-layout-grid { gap: clamp(28px,3.5vw,48px) clamp(24px,3vw,40px); }
.wp-block-query .wp-block-post-template.is-layout-grid > li:first-child { grid-column: 1 / -1; }
.wp-block-query .wp-block-post-template.is-layout-grid > li:first-child > .wp-block-group {
	display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px,3.5vw,52px); align-items: center;
}
.wp-block-query .wp-block-post-template.is-layout-grid > li:first-child .wp-block-post-featured-image { margin: 0; }
.wp-block-query .wp-block-post-template.is-layout-grid > li:first-child .wp-block-post-featured-image img { aspect-ratio: 16/11; }
.wp-block-query .wp-block-post-template.is-layout-grid > li:first-child .wp-block-post-title { font-size: var(--fs-h3); }
@media (max-width: 800px){
	.wp-block-query .wp-block-post-template.is-layout-grid > li:first-child > .wp-block-group { grid-template-columns: 1fr; }
}

/* =========================================================================
 * Header: truly-centered nav (logo | nav | cta grid)
 * ====================================================================== */
@media (min-width: 981px) {
	.ds-header .wp-block-group.ds-header-inner {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}
	.ds-header .ds-header-inner > .wp-block-site-logo { justify-self: start; margin: 0; }
	.ds-header .ds-header-inner > .ds-mainnav { justify-self: center; }
	.ds-header .ds-header-inner > .ds-header-cta { justify-self: end; }
}

/* =========================================================================
 * Single post — clean editorial article
 * ====================================================================== */
.ds-article-head { max-width: 820px; margin-left: auto; margin-right: auto; }
.ds-article-head .wp-block-post-title {
	font-family: var(--wp--preset--font-family--sans) !important;
	font-weight: 700 !important;
	font-size: var(--fs-h2) !important;
	line-height: 1.12 !important;
	letter-spacing: -0.015em !important;
	text-transform: none !important;
}
.ds-article-cat a { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-caption); letter-spacing: 0.02em; color: var(--green-text); text-transform: none; }
.ds-article-meta { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-small); color: var(--wp--preset--color--muted); }
.ds-article-meta .wp-block-post-author-name a, .ds-article-meta .wp-block-post-author-name { color: var(--wp--preset--color--contrast); font-weight: 500; }
.ds-article-body { font-size: var(--fs-lead); line-height: 1.75; }
.ds-article-body p, .ds-article-body ul, .ds-article-body ol, .ds-article-body h2, .ds-article-body h3, .ds-article-body blockquote, .ds-article-body figure { margin-left: auto; margin-right: auto; }
.ds-article-body > * { max-width: 720px; }
.ds-article-body > .alignwide { max-width: 1000px; }
.ds-article-body > .alignfull { max-width: none; }
.ds-article-body h2 { margin-top: 1.6em; font-size: var(--fs-h3); }
.ds-article-body h3 { margin-top: 1.4em; }
/* Posts written before the relaunch carry hardcoded pixel widths — 550px,
   641px, 644px — so on a 390px phone the right-hand side of every screenshot
   was being clipped, and the container settling to its final width scored
   0.33 CLS. max-width plus height:auto keeps the aspect ratio the width and
   height attributes already declare, so nothing shifts while they load. */
.ds-article-body img { border-radius: 14px; max-width: 100%; height: auto; }
.ds-article-body figure { margin-top: 1.5em; margin-bottom: 1.5em; }
/* Figures in the research posts are charts, not decoration, and their captions
   carry the read date the post argues no figure should travel without. Without
   a rule the caption inherits --fs-lead and reads as another paragraph. */
.ds-article-body figcaption { margin-top: 12px; font-size: var(--fs-small); line-height: 1.55; color: var(--wp--preset--color--muted); text-align: center; }
.ds-article-body figcaption strong { color: var(--wp--preset--color--ink-2); font-weight: 600; }
.ds-article-tags { max-width: 720px; margin-left: auto; margin-right: auto; }
/* author / cta box under article */
.ds-article-cta { max-width: 720px; margin: 0 auto; border: 1.5px solid var(--wp--preset--color--contrast); border-radius: 20px; }

/* =========================================================================
 * uxstudio-style blog: category tabs + uniform 3-col cards + editorial single
 * (overrides the earlier Kraken blog rules)
 * ====================================================================== */

/* ---- Category filter tabs ------------------------------------------ */
.ds-blogtabs { border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); }
.ds-blogtabs__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; padding: 16px 2px; }
.ds-blogtab { font-family: var(--wp--preset--font-family--sans); font-size: var(--fs-body); font-weight: 500; color: var(--wp--preset--color--ink-2); text-decoration: none; white-space: nowrap; transition: color .15s ease; }
.ds-blogtab:hover { color: var(--green-text); }
.ds-blogtab.is-active { color: var(--green-text); font-weight: 600; }

/* ---- Neutralise the old Kraken "featured first post" split ---------- */
.wp-block-query .ds-blog-grid.is-layout-grid { gap: clamp(32px,3.4vw,48px) clamp(22px,2.4vw,32px); }
.wp-block-query .ds-blog-grid.is-layout-grid > li:first-child { grid-column: auto; }
.wp-block-query .ds-blog-grid.is-layout-grid > li:first-child > .wp-block-group { display: flex; flex-direction: column; gap: 0; grid-template-columns: none; align-items: stretch; }
.wp-block-query .ds-blog-grid.is-layout-grid > li:first-child .wp-block-post-title { font-size: var(--fs-card); }

/* The cards used WP's constrained layout, which forces margin-left/right:auto
   with !important on every child. Harmless in block flow, but the rule above
   turns the FIRST card into a flex column, and auto side margins centre a
   shrink-to-fit flex item, which is why only that card's byline drifted to the
   middle. The templates now use flow layout instead; this belt-and-braces rule
   keeps the cards left-aligned if the layout type is ever changed back. */
.ds-blog-card.wp-block-group > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none; }

/* ---- Blog cards: bordered card, image flush at top, padded body ----
   Each post reads as its own card (border + surface), the way the service
   cards do, so the grid does not run together as one wall of images. The
   image sits flush to the top edge (the card clips it), and the title gets
   the card's padding, which is also the gap the image and title needed. */
.ds-blog-card { gap: 0; border: 1px solid var(--wp--preset--color--line); border-radius: 16px; background: var(--wp--preset--color--base); overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.ds-blog-card:hover { border-color: var(--wp--preset--color--green); box-shadow: 0 8px 26px rgba(22,16,60,.07); transform: translateY(-3px); }
/* 16/9 = 1.778, measured off uxstudioteam.com's .featured-img (359x202).
   Flush to the card edges; the card's overflow:hidden does the corner. */
.ds-blog-card .wp-block-post-featured-image { margin: 0; aspect-ratio: 16/9; border-radius: 0 !important; overflow: hidden; }
.ds-blog-card .wp-block-post-featured-image a { display: block; width: 100%; height: 100%; }
.ds-blog-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0 !important; }
.ds-blog-card .ds-card-date { margin: 0; padding: 20px 22px 0; font-family: var(--wp--preset--font-family--sans); color: var(--wp--preset--color--muted); }
.ds-blog-card .ds-card-title { margin: 0; padding: 22px 22px 24px; line-height: 1.28; letter-spacing: -0.01em; }
.ds-blog-card .ds-card-date + .ds-card-title { padding-top: 10px; }
/* The excerpt block carried no padding of its own, so while the title sat
   22px inside the card the summary under it ran flush to the left, right and
   bottom borders — the last line's descenders touching the rule. It takes the
   title's own 22px gutter, and the title gives up most of its bottom padding
   when an excerpt follows it, so the two read as one text block rather than
   two padded ones stacked. */
.ds-blog-card .wp-block-post-excerpt {
	margin: 0;
	padding: 0 22px 24px;
}
.ds-blog-card .wp-block-post-excerpt p,
.ds-blog-card .wp-block-post-excerpt__excerpt { margin: 0; }
.ds-blog-card .ds-card-title:has(+ .wp-block-post-excerpt) { padding-bottom: 12px; }
.ds-blog-card .ds-card-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.ds-blog-card .ds-card-title a:hover { color: var(--green-text); }
.ds-blog-card .ds-card-author.wp-block-post-author { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.ds-blog-card .ds-card-author .wp-block-post-author__avatar { line-height: 0; }
.ds-blog-card .ds-card-author .wp-block-post-author__avatar img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.ds-blog-card .ds-card-author .wp-block-post-author__name { margin: 0; font-weight: 500; color: var(--wp--preset--color--ink-2); }
.ds-blog-card .ds-card-author .wp-block-post-author__byline { display: none; }

/* ---- Two or more writers on one post (uxstudio "authors-wrap") ----- */
.wp-block-post-author.ds-authors { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; }
.wp-block-post-author.ds-authors .ds-author { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.wp-block-post-author.ds-authors .wp-block-post-author__avatar { line-height: 0; flex: none; }
.wp-block-post-author.ds-authors .wp-block-post-author__name { margin: 0; }
.wp-block-post-author.ds-authors a { color: inherit; text-decoration: none; }
.wp-block-post-author.ds-authors a:hover { color: var(--green-text); }
.ds-blog-card .ds-card-author.ds-authors .wp-block-post-author__avatar img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.ds-post-author.ds-authors .wp-block-post-author__avatar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }

/* ---- Editorial single post (uxstudio) ----------------------------- */
.ds-post { max-width: 800px; margin: 0 auto 0 0; }
.ds-post-meta { align-items: center; gap: 14px; }
.ds-post-cat.wp-block-post-terms { display: inline-flex; gap: 6px; }
.ds-post-cat.wp-block-post-terms a { background: var(--wp--preset--color--soft-2); color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--sans); font-size: var(--fs-caption); font-weight: 500; padding: 5px 13px; border-radius: 999px; text-decoration: none; }
.ds-post-cat.wp-block-post-terms a:hover { background: var(--wp--preset--color--green); color: #ffffff; }
/* The date is metadata, and every other piece of small metadata on this site is
   set in mono — dsr-updated, dsr-hero-note, dsr-chrono-foot, table heads. In
   Poppins it was also near-identical to the category chips sitting beside it at
   the same 13px, so the line read as one control instead of two different
   things. Size and colour still come from the block's own small/muted presets,
   which WordPress emits with !important. */
.ds-post-updated,
.ds-post-updated.wp-block-post-date {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: .02em;
	font-size: var(--fs-small);
	color: var(--wp--preset--color--muted);
}
.ds-post-updated .ds-post-updated-label { font-weight: 500; }
.ds-post-title.wp-block-post-title {
	font-family: var(--wp--preset--font-family--sans) !important;
	font-weight: 700 !important;
	font-size: var(--fs-h2) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em !important;
	text-transform: none !important;
}
.ds-post-author.wp-block-post-author { display: flex; align-items: center; gap: 12px; }
.ds-post-author .wp-block-post-author__avatar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ds-post-author .wp-block-post-author__name { margin: 0; font-weight: 600; }
.ds-post-author .wp-block-post-author__byline { display: none; }

/* article body: readable, fills the left column */
.ds-article-body { font-size: var(--fs-lead); line-height: 1.78; }
.ds-article-body > * { max-width: none; margin-left: 0; margin-right: 0; }
.ds-article-body > p:first-of-type { font-size: var(--fs-card); font-weight: 600; color: var(--wp--preset--color--contrast); line-height: 1.6; }
.ds-article-body h2 { font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -0.01em; margin-top: 1.7em; margin-bottom: .4em; }
.ds-article-body h3 { font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: var(--fs-lead-lg); margin-top: 1.4em; }
.ds-article-body a { color: var(--green-text); text-decoration: underline; text-underline-offset: 2px; }
.ds-article-body img { border-radius: 14px; }
.ds-article-body blockquote { border-left: 3px solid var(--wp--preset--color--green); margin: 1.6em 0; padding: 4px 0 4px 24px; font-weight: 600; color: var(--wp--preset--color--contrast); }

/* --- Tables inside a post body ------------------------------------------
   Posts are written elsewhere and arrive as plain HTML, so a table comes
   through as a bare <table> with no block wrapper and nothing for the
   stylesheet to hang a scroll container on. The wrapper, and the data-th
   attribute the stacked layout below reads, are added at render time by
   crmteardown_wrap_content_tables(). The stored post is untouched.

   The heads are set in the body face, not in mono. Mono uppercase with wide
   tracking is how every micro label elsewhere on the site is set, and it works
   there because those labels are one or two short words. A blog table heading
   is a sentence ("Profile A, 2 users, 12,000 contacts"), and in mono it ran
   about 40% wider than the same words in Figtree, which is what forced the
   sideways scroll and squeezed the prose columns down to one word per line. */
.ds-article-body .ds-table-wrap {
	margin: 1.9em 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	border: 1.5px solid #cfc9e6;
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	-webkit-overflow-scrolling: touch;
}
/* macOS hides overlay scrollbars until you scroll, so a table that runs wider
   than the column gives no sign that there is more to the right. A thin track
   that is always drawn is the whole affordance. */
.ds-article-body .ds-table-wrap::-webkit-scrollbar { height: 9px; }
.ds-article-body .ds-table-wrap::-webkit-scrollbar-track { background: var(--wp--preset--color--soft); border-radius: 0 0 12px 12px; }
.ds-article-body .ds-table-wrap::-webkit-scrollbar-thumb { background: #c6bfe4; border-radius: 999px; }
.ds-article-body .ds-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--wp--preset--color--green); }
.ds-article-body table {
	width: 100%;
	min-width: 580px;
	border-collapse: collapse;
	font-size: var(--fs-small);
	line-height: 1.55;
	margin: 0;
}
.ds-article-body thead tr { background: var(--wp--preset--color--soft-2); }
.ds-article-body th {
	padding: 13px 17px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--fs-caption);
	font-weight: 700;
	letter-spacing: -0.005em;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
	text-align: left;
	vertical-align: bottom;
}
.ds-article-body thead th { border-bottom: 1.5px solid #d8d2ee; }
.ds-article-body td {
	padding: 13px 17px;
	color: var(--wp--preset--color--ink-2);
	border-top: 1px solid var(--wp--preset--color--line);
	vertical-align: top;
	/* break-word, not anywhere. `anywhere` also drops the cell's min-content
	   width to a single character, so the column-width algorithm treats that
	   column as infinitely squeezable and hands its space to the neighbours:
	   the source URLs ended up in a 105px column reading "hubspot.co /
	   m/pricing/sa / les". This keeps the longest word as the column's floor
	   and still breaks anything that genuinely cannot fit. */
	overflow-wrap: break-word;
	font-variant-numeric: tabular-nums;
}
.ds-article-body tbody tr:first-child td { border-top: 0; }
.ds-article-body tbody tr:nth-child(even) td { background: var(--wp--preset--color--soft); }
/* The first column is the row's name, so it carries the weight of a heading
   while the values beside it stay quiet. */
.ds-article-body tbody td:first-child { font-weight: 600; color: var(--wp--preset--color--contrast); }
.ds-article-body td strong { color: var(--wp--preset--color--contrast); font-weight: 700; }
.ds-article-body th + th,
.ds-article-body td + td { border-left: 1px solid var(--wp--preset--color--line); }
/* Filenames and figures read better without a mid-word wrap. */
.ds-article-body td code { font-size: .92em; white-space: nowrap; }

/* Phones: a grid becomes a stack of cards.
   Five columns will not fit a 390px screen at any font size worth reading, and
   a sideways scroll inside a column of prose is something readers miss. Each
   row becomes its own card instead, the first cell is its title, and every
   other cell prints the column heading above the value so a number is never
   stranded without the question it answers. Only tables that actually had a
   header row get this; see crmteardown_render_content_table(). */
@media (max-width: 700px) {
	.ds-article-body .ds-table-stack {
		border: 0;
		border-radius: 0;
		overflow: visible;
		background: none;
		margin: 1.6em 0;
	}
	.ds-article-body .ds-table-stack table { display: block; min-width: 0; }
	.ds-article-body .ds-table-stack thead { display: none; }
	.ds-article-body .ds-table-stack tbody { display: block; }
	.ds-article-body .ds-table-stack tr {
		display: block;
		margin-bottom: 14px;
		border: 1.5px solid #cfc9e6;
		border-radius: 14px;
		overflow: hidden;
		background: var(--wp--preset--color--base);
	}
	.ds-article-body .ds-table-stack tr:last-child { margin-bottom: 0; }
	.ds-article-body .ds-table-stack td,
	.ds-article-body .ds-table-stack tbody tr:nth-child(even) td {
		display: block;
		border: 0;
		border-top: 1px solid var(--wp--preset--color--line);
		padding: 11px 16px;
		background: none;
		font-size: var(--fs-small);
	}
	.ds-article-body .ds-table-stack td::before {
		content: attr(data-th);
		display: block;
		margin-bottom: 3px;
		font-size: var(--fs-caption);
		font-weight: 600;
		line-height: 1.35;
		color: var(--wp--preset--color--muted);
	}
	/* The card title. It repeats the first column heading in every card, which
	   the reader does not need once, let alone five times. */
	.ds-article-body .ds-table-stack tbody td:first-child,
	.ds-article-body .ds-table-stack tbody tr:nth-child(even) td:first-child {
		border-top: 0;
		background: var(--wp--preset--color--soft-2);
		font-size: var(--fs-lead);
		font-weight: 700;
		line-height: 1.3;
		padding: 12px 16px;
	}
	.ds-article-body .ds-table-stack tbody td:first-child::before { content: none; }
	/* A cell the author left empty would otherwise be a heading with nothing
	   under it. */
	.ds-article-body .ds-table-stack td:empty { display: none; }
}
.ds-article-tags, .ds-article-cta, .ds-post .wp-block-comments { max-width: none; }

/* Fallback thumbnail (posts without a featured image) — title on brand color */
.ds-thumb-fallback { margin: 0 0 16px; }
.ds-thumb-fallback a {
	display: flex; align-items: flex-start; aspect-ratio: 16/9; border-radius: 12px;
	padding: 20px 22px; text-decoration: none; overflow: hidden;
}
.ds-thumb-fallback span {
	font-family: var(--wp--preset--font-family--display); font-weight: 800;
	font-size: var(--fs-card); line-height: 1.12; letter-spacing: -0.01em;
	display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.ds-thumb--green a { background: var(--wp--preset--color--green); }
.ds-thumb--green span { color: #16103c; }
.ds-thumb--dark a { background: var(--wp--preset--color--contrast); }
.ds-thumb--dark span { color: #fff; }
.ds-thumb--paper a { background: var(--wp--preset--color--soft-2); border: 1.5px solid var(--wp--preset--color--line); }
.ds-thumb--paper span { color: #16103c; }

/* Cards that print their own <h2> underneath were showing the headline twice:
   once inside this cover panel and once as the card title. Posts here rarely
   carry a featured image, so that duplication was the normal case rather than
   the edge one. Keep the coloured panel as a plain cover and let the real
   title do the talking. */
.ds-blog-card:has(.ds-card-title) .ds-thumb-fallback span { display: none; }
.ds-blog-card:has(.ds-card-title) .ds-thumb-fallback a { aspect-ratio: 16/7; }


/* Smaller uxstudio-scale card title */
.ds-blog-card .ds-card-title { font-size: var(--fs-card) !important; }

/* ---- Blog: Prev/Next pagination as buttons ------------------------ */
.ds-pagination.wp-block-query-pagination { gap: 14px; }
.ds-pagination .wp-block-query-pagination-previous,
.ds-pagination .wp-block-query-pagination-next {
	display: inline-block; border: 1.5px solid var(--wp--preset--color--contrast); border-radius: 999px;
	padding: 13px 28px; font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: var(--fs-small);
	text-transform: uppercase; letter-spacing: 0.02em; color: var(--wp--preset--color--contrast); text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* Flat, and hovering to the same deep green every other button on the site
   hovers to. It kept the retired hard under-border and the press-down travel
   long after the CTAs dropped both. */
.ds-pagination .wp-block-query-pagination-previous:hover,
.ds-pagination .wp-block-query-pagination-next:hover,
.ds-pagination .wp-block-query-pagination-previous:focus,
.ds-pagination .wp-block-query-pagination-next:focus {
	background: var(--green-text); border-color: var(--green-text); color: #ffffff;
}

/* ---- Single: author box at the end of the post -------------------- */
.ds-post-author-box { align-items: center; gap: 14px; }
.ds-post-author-box .wp-block-post-author { display: flex; align-items: center; gap: 14px; margin: 0; }
.ds-post-author-box .wp-block-post-author__avatar { line-height: 0; }
.ds-post-author-box .wp-block-post-author__avatar img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.ds-post-author-box .wp-block-post-author__byline { display: block !important; font-size: var(--fs-caption); color: var(--wp--preset--color--muted); margin: 0 0 2px; }
.ds-post-author-box .wp-block-post-author__name { font-weight: 700; font-size: var(--fs-lead); margin: 0; }

/* =========================================================================
 * Reference-faithful service page sections (dsr-*) — quote-card hero,
 * stat strip, cost stat cards, tabbed "included", timeline, ROI vs-box.
 * Brand palette (green + cyan + ink), refined type scale.
 * ====================================================================== */
.dsr-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.dsr-sec { padding: clamp(56px, 7vw, 88px) 0; }
.dsr-label { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-caption); letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-text); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.dsr-label::before { content: ""; width: 22px; height: 1px; background: var(--wp--preset--color--green); }
.dsr-label.is-cyan { color: var(--wp--preset--color--cyan-dark); }
.dsr-label.is-cyan::before { background: var(--wp--preset--color--cyan); }
.dsr-title { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.025em; color: var(--wp--preset--color--contrast); margin: 0 0 14px; }
.dsr-sub { font-size: var(--fs-body); line-height: 1.7; color: var(--wp--preset--color--muted); max-width: 580px; margin: 0 0 40px; }
/* section intros run full width under the title — home + every service page (18 and its children) */
body.home .dsr-sub, body.page-id-18 .dsr-sub, body.parent-pageid-18 .dsr-sub,
body.home .dsr-proof-note, body.page-id-18 .dsr-proof-note, body.parent-pageid-18 .dsr-proof-note,
body.home .dsr-compare .dsr-cmp-intro, body.page-id-18 .dsr-compare .dsr-cmp-intro, body.parent-pageid-18 .dsr-compare .dsr-cmp-intro,
body.home .dsr-proof-caption, body.page-id-18 .dsr-proof-caption, body.parent-pageid-18 .dsr-proof-caption { max-width: none; }
/* Pricing notes below the tables read full-width and left-aligned on the service
   pages, matching the section intros instead of a centred 640px column. */
body.page-id-18 .dsr-plans .dsr-plan-note,
body.parent-pageid-18 .dsr-plans .dsr-plan-note { max-width: none; text-align: left; margin-left: 0; margin-right: 0; }
.dsr-hl { color: var(--wp--preset--color--green); }
.dsr-hl2 { color: var(--wp--preset--color--cyan); }

/* ---- Hero ---- */
.dsr-hero { background: var(--wp--preset--color--soft); }
.dsr-hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.dsr-hero h1 { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-h1); line-height: 1.03; letter-spacing: -0.03em; color: var(--wp--preset--color--contrast); margin: 0 0 20px; }
.dsr-hero .dsr-hsub { font-size: var(--fs-lead); line-height: 1.7; color: var(--wp--preset--color--ink-2); max-width: 540px; margin: 0 0 26px; }
.dsr-ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.dsr-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: var(--fs-small); padding: 14px 26px; border-radius: 999px; text-decoration: none; transition: transform .15s ease, background-color .15s ease, color .15s ease, box-shadow .13s ease; cursor: pointer; border: 1.5px solid var(--wp--preset--color--contrast); }
.dsr-btn-primary { background: var(--wp--preset--color--green); color: #ffffff; border-color: var(--wp--preset--color--green); box-shadow: 0 3px 0 0 var(--wp--preset--color--contrast); }
.dsr-btn-primary:hover { background: #16103c; color: #fff; border-color: #16103c; transform: translateY(3px); box-shadow: 0 0 0 0 var(--wp--preset--color--contrast); }
.dsr-btn-ghost { background: transparent; color: var(--wp--preset--color--contrast); }
.dsr-btn-ghost:hover { background: var(--wp--preset--color--contrast); color: #fff; }
.dsr-hero-note { margin: 16px 0 0; font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-caption); letter-spacing: .02em; color: var(--wp--preset--color--muted); }
.dsr-quote { background: var(--wp--preset--color--contrast); color: #fff; border-radius: 20px; padding: clamp(26px, 3vw, 36px); position: relative; }
.dsr-quote::before { content: "\201C"; position: absolute; top: 6px; left: 22px; font-family: var(--wp--preset--font-family--display); font-size: 90px; line-height: 1; color: var(--wp--preset--color--green); opacity: .35; }
.dsr-quote p.q { font-size: var(--fs-body); line-height: 1.75; color: rgba(255,255,255,.86); font-style: italic; margin: 8px 0 18px; position: relative; }
.dsr-quote .qa { font-size: var(--fs-caption); color: rgba(255,255,255,.5); }
.dsr-quote .qa b { color: var(--wp--preset--color--green); font-weight: 600; }
.dsr-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1.5px solid var(--wp--preset--color--line); border-radius: 16px; overflow: hidden; margin-top: clamp(40px, 5vw, 60px); background: var(--wp--preset--color--base); }
/* A trimmed stats row should fill its width, not hug the left of a four-column
   grid. The WooCommerce row lost two unverifiable figures (2026-09-01), leaving
   two; :has scopes this to exactly-two and exactly-three rows, so four-stat rows
   are untouched. */
.dsr-stats:has(> .dsr-stat:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.dsr-stats:has(> .dsr-stat:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.dsr-stat { padding: 22px 24px; border-right: 1.5px solid var(--wp--preset--color--line); }
.dsr-stat:last-child { border-right: none; }
.dsr-stat .n { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-h3); color: var(--green-text); line-height: 1; margin-bottom: 6px; }
.dsr-stat:nth-child(2) .n { color: var(--wp--preset--color--cyan-dark); }
.dsr-stat .l { font-size: var(--fs-caption); color: var(--wp--preset--color--muted); line-height: 1.4; }

/* ---- Cost ---- */
.dsr-cost { background: var(--wp--preset--color--base); }
.dsr-cost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
/* An editorial aside, not a slab. The fill used to be --soft, which is also
   the section background on half the pages this appears on, so the box showed
   up on /services/wordpress-seo/ and vanished on /services/wordpress-maintenance/.
   A rule reads the same on every background, and it stops the note competing
   with the bordered card grid that usually sits directly below it. The old
   `border-radius: 0 12px 12px 0` also made the box look cropped rather than
   deliberate wherever it did show. */
.dsr-note { margin-top: 26px; padding: 2px 0 2px 24px; background: none; border-left: 3px solid var(--wp--preset--color--green); border-radius: 0; }
/* 1.3 rather than the inherited 1.7: this is 900-weight display type, and at
   body line-height a bold sentence that wraps to three lines outweighed the
   H2 sitting next to it. */
.dsr-note strong { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-lead); line-height: 1.3; color: var(--wp--preset--color--contrast); margin: 10px 0; letter-spacing: -0.015em; }
.dsr-note p { font-size: var(--fs-small); line-height: 1.68; color: var(--wp--preset--color--ink-2); margin: 0; }
.dsr-scards { display: flex; flex-direction: column; gap: 14px; }
.dsr-scard { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; padding: 22px 24px; background: var(--wp--preset--color--soft); border: 1.5px solid var(--wp--preset--color--line); border-radius: 16px; }
.dsr-scard .sn { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-h2); color: var(--green-text); line-height: 1; white-space: nowrap; }
.dsr-scard:nth-child(2) .sn { color: var(--wp--preset--color--cyan-dark); }
.dsr-scard .st { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 5px; font-family: var(--wp--preset--font-family--mono); }
.dsr-scard .sd { font-size: var(--fs-small); line-height: 1.6; color: var(--wp--preset--color--ink-2); margin: 0; }

/* ---- Why ---- */
.dsr-why { background: var(--wp--preset--color--soft); }
.dsr-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 44px; }
.dsr-card { background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 18px; padding: 26px; transition: transform .2s ease, box-shadow .2s ease; }
.dsr-card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(22,16,60,.08); }
.dsr-card .ic { width: 44px; height: 44px; border-radius: 11px; background: var(--wp--preset--color--green-tint); display: flex; align-items: center; justify-content: center; font-size: var(--fs-card); margin-bottom: 16px; }
.dsr-card h3 { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-lead); line-height: 1.2; letter-spacing: -0.01em; color: var(--wp--preset--color--contrast); margin: 0 0 8px; }
.dsr-card p { font-size: var(--fs-small); line-height: 1.68; color: var(--wp--preset--color--muted); margin: 0; }

/* ---- What's included: tabs ---- */
.dsr-inc { background: var(--wp--preset--color--contrast); }
.dsr-inc .dsr-label { color: var(--wp--preset--color--green); }
.dsr-inc .dsr-title { color: #fff; }
.dsr-inc .dsr-sub { color: rgba(255,255,255,.6); }
.dsr-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 32px 0 24px; }
.dsr-tab { padding: 9px 20px; border-radius: 999px; font-family: var(--wp--preset--font-family--sans); font-weight: 600; font-size: var(--fs-small); cursor: pointer; border: 1.5px solid rgba(255,255,255,.16); color: rgba(255,255,255,.6); background: transparent; transition: all .15s ease; }
.dsr-tab:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.dsr-tab.is-active { background: var(--wp--preset--color--green); border-color: var(--wp--preset--color--green); color: #ffffff; }
.dsr-panel { display: none; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dsr-panel.is-active { display: grid; }
.dsr-item { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 20px; transition: background .15s ease; }
.dsr-item:hover { background: rgba(255,255,255,.09); }
.dsr-item h4 { font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: var(--fs-small); color: #fff; margin: 0 0 6px; }
.dsr-item p { font-size: var(--fs-caption); line-height: 1.6; color: rgba(255,255,255,.52); margin: 0; }

/* ---- Plans ---- */
.dsr-plans { background: var(--wp--preset--color--soft); }
.dsr-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.dsr-plan { background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 20px; padding: 30px 28px; display: flex; flex-direction: column; }
/* pricing card hover lift — must out-specify the scroll-reveal transform on .ds-r */
.dsr-plan { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.dsr-plan:hover { transform: translateY(-5px); box-shadow: 0 18px 46px rgba(22,16,60,.10); border-color: var(--wp--preset--color--green); }
.dsr-plan.featured:hover { box-shadow: 0 22px 54px rgba(99,168,20,.18); }
.ds-motion .is-revealed .dsr-plan { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.ds-motion .is-revealed .dsr-plan:hover { transform: translateY(-5px); }
@media (prefers-reduced-motion: reduce) { .dsr-plan:hover, .ds-motion .is-revealed .dsr-plan:hover { transform: none; } }
.dsr-plan.featured { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); }
.dsr-plan .pbadge { display: inline-block; font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; background: var(--wp--preset--color--green); color: #ffffff; border-radius: 999px; margin-bottom: 16px; align-self: flex-start; }
.dsr-plan .pname { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-card); letter-spacing: -0.01em; color: var(--wp--preset--color--contrast); margin: 0 0 4px; }
.dsr-plan.featured .pname { color: #fff; }
.dsr-plan .ptag { font-size: var(--fs-caption); color: var(--wp--preset--color--muted); margin: 0 0 16px; line-height: 1.5; }
.dsr-plan.featured .ptag { color: rgba(255,255,255,.5); }
.dsr-plan .pprice { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-num); letter-spacing: -0.02em; color: var(--wp--preset--color--contrast); line-height: 1; margin-bottom: 4px; }
.dsr-plan.featured .pprice { color: var(--wp--preset--color--green); }
.dsr-plan .pprice .per { font-family: var(--wp--preset--font-family--sans); font-size: var(--fs-small); font-weight: 500; color: var(--wp--preset--color--muted); letter-spacing: 0; }
.dsr-plan .pfor { font-size: var(--fs-caption); color: var(--wp--preset--color--muted); line-height: 1.55; margin: 14px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--wp--preset--color--line); }
.dsr-plan.featured .pfor { color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.14); }
.dsr-plan ul { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
/* Not display:flex — the tick used to be a flex item, which made every inline
   <strong> inside the li its own flex item too, so a bolded number in the
   middle of a line ("optimised end to end — 12") was pushed to the far right
   on its own row. Same trap as .dsr-fitbox li. Absolute tick, normal text flow. */
.dsr-plan li { position: relative; padding-left: 22px; font-size: var(--fs-caption); line-height: 1.5; color: var(--wp--preset--color--ink-2); }
.dsr-plan.featured li { color: rgba(255,255,255,.8); }
.dsr-plan li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green-text); font-weight: 700; }
.dsr-plan.featured li::before { color: var(--wp--preset--color--green); }
.dsr-plan li strong { color: var(--wp--preset--color--contrast); font-weight: 600; }
.dsr-plan.featured li strong { color: #fff; }
/* not-included features (dash) */
.dsr-plan li.dsr-x::before { content: "—"; color: var(--wp--preset--color--line); }
.dsr-plan.featured li.dsr-x::before { color: rgba(255,255,255,.46); }
.dsr-plan li.dsr-x { color: var(--wp--preset--color--muted); }
.dsr-plan.featured li.dsr-x { color: rgba(255,255,255,.46); }
/* pricing footnotes under the grid */
.dsr-plans .dsr-plan-note { text-align: center; font-size: var(--fs-small); line-height: 1.6; color: var(--wp--preset--color--muted); margin: 10px auto 0; max-width: 640px; }
.dsr-plans .dsr-plan-grid + .dsr-plan-note { margin-top: 40px; }
.dsr-plans .dsr-plan-note a { color: var(--green-text); font-weight: 600; }
/* "not sure?" box inside the dark not-a-fit card */
.dsr-fitbox .dsr-fitnote { margin-top: 20px; padding: 16px 18px; background: rgba(255,255,255,.06); border-radius: 10px; font-size: var(--fs-caption); line-height: 1.65; color: rgba(255,255,255,.62); }
.dsr-fitbox .dsr-fitnote a { color: var(--wp--preset--color--green); font-weight: 600; }
.dsr-plan .dsr-btn { justify-content: center; width: 100%; }
/* billing toggle (Monthly / Yearly) — home pricing */
.dsr-billtoggle { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.dsr-billseg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 999px; padding: 4px; }
/* sliding highlight that animates between Monthly and Yearly */
.dsr-billseg::before { content: ""; grid-column: 1; grid-row: 1; border-radius: 999px; background: var(--wp--preset--color--contrast); transition: transform .34s cubic-bezier(.34, 1.35, .5, 1); z-index: 0; }
.dsr-plans.is-yearly .dsr-billseg::before { transform: translateX(100%); }
.dsr-billseg.no-anim::before { transition: none; }
.dsr-billbtn { grid-row: 1; position: relative; z-index: 1; appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer; font-family: var(--wp--preset--font-family--sans); font-size: var(--fs-small); font-weight: 600; color: var(--wp--preset--color--ink-2); padding: 8px 22px; border-radius: 999px; transition: color .2s ease; }
.dsr-billbtn:nth-child(1) { grid-column: 1; }
.dsr-billbtn:nth-child(2) { grid-column: 2; }
.dsr-billbtn:hover { color: var(--wp--preset--color--contrast); }
.dsr-billbtn.is-active, .dsr-billbtn.is-active:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .dsr-billseg::before { transition: none; } }
.dsr-billnote { text-align: center; margin: 14px auto 0; max-width: 520px; font-size: var(--fs-small); line-height: 1.5; color: var(--wp--preset--color--ink-2); }
.dsr-billnote strong { color: var(--green-text); font-weight: 700; }
/* price swap: monthly shown by default, yearly on .is-yearly */
.dsr-plan .pprice .py, .dsr-plan .pbill { display: none; }
.dsr-plans.is-yearly .dsr-plan .pprice .pm { display: none; }
.dsr-plans.is-yearly .dsr-plan .pprice .py { display: inline; }
.dsr-plans.is-yearly .dsr-plan .pbill { display: block; }
.dsr-plan .pbill { font-size: var(--fs-caption); font-weight: 600; color: var(--green-text); margin: 6px 0 0; }
.dsr-plan.featured .pbill { color: var(--wp--preset--color--green); }

/* ---- Process timeline ---- */
.dsr-process { background: var(--wp--preset--color--base); }
.dsr-split { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
/* A .dsr-split is a new sub-block with its own h3, so when one follows a card
   grid it needs a real break. On /services/white-label-wordpress-support/ the
   three "Scaling fast? / Ready to level up? / Already have a team?" cards sat
   flush against "Your first two weeks" — the measured gap was 0px, because
   neither .dsr-grid3 nor .dsr-split carries a margin on that edge. Same value
   as .dsr-logos, which is the same kind of break. */
.dsr-grid2 + .dsr-split, .dsr-grid3 + .dsr-split, .dsr-grid4 + .dsr-split { margin-top: clamp(48px, 6vw, 72px); }
.dsr-sticky { position: sticky; top: 96px; }
.dsr-sticky p { font-size: var(--fs-small); color: var(--wp--preset--color--muted); line-height: 1.7; margin: 0 0 24px; }
.dsr-timeline { display: flex; flex-direction: column; }
.dsr-step { display: grid; grid-template-columns: 44px 1fr; gap: 22px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.dsr-step:last-child { border-bottom: none; }
.dsr-step .num { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--wp--preset--color--line); display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: var(--fs-small); color: var(--wp--preset--color--muted); transition: all .2s ease; }
.dsr-step:hover .num { background: var(--wp--preset--color--green); border-color: var(--wp--preset--color--green); color: #ffffff; }
.dsr-step .stag { display: inline-block; font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-bottom: 8px; }
.dsr-step .stag.day { background: var(--wp--preset--color--green-tint); color: var(--green-text); }
.dsr-step .stag.inc { background: var(--wp--preset--color--cyan-tint); color: var(--wp--preset--color--cyan-dark); }
.dsr-step h4 { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-lead); letter-spacing: -0.01em; color: var(--wp--preset--color--contrast); margin: 0 0 7px; }
.dsr-step p { font-size: var(--fs-small); line-height: 1.72; color: var(--wp--preset--color--muted); margin: 0; max-width: 620px; }

/* ---- Fit ---- */
.dsr-fit { background: var(--wp--preset--color--soft); }
.dsr-fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.dsr-fitbox { border-radius: 18px; padding: 32px; border: 1.5px solid var(--wp--preset--color--line); background: var(--wp--preset--color--base); }
.dsr-fitbox.no { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); }
.dsr-fitbox h3 { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-lead); margin: 0 0 18px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.01em; }
.dsr-fitbox.yes h3 { color: var(--green-text); }
.dsr-fitbox.no h3 { color: rgba(255,255,255,.85); }
.dsr-fitbox ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dsr-fitbox li { position: relative; padding-left: 22px; font-size: var(--fs-small); line-height: 1.55; }
.dsr-fitbox.yes li { color: var(--wp--preset--color--ink-2); }
.dsr-fitbox.no li { color: rgba(255,255,255,.62); }
.dsr-fitbox li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.dsr-fitbox.yes li::before { content: "→"; color: var(--wp--preset--color--green); }
.dsr-fitbox.no li::before { content: "—"; color: rgba(255,255,255,.46); }
/* Inline links inside dark fit/panel cards must stay visible (green, never dark-on-dark). */
.dsr-fitbox.yes li a { color: var(--green-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.dsr-fitbox.no li a { color: var(--wp--preset--color--green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.dsr-fitbox.no li a:hover { color: #fff; }

/* ---- Testimonials ---- */
.dsr-test { background: var(--wp--preset--color--base); }
.dsr-tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
/* White + a soft lift, not beige: on the beige (soft) sections (home, services,
   maintenance) a beige card vanished into the background. White with a gentle
   shadow reads consistently on both beige and white sections. */
.dsr-tcard { background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; box-shadow: 0 10px 30px -18px rgba(22,16,60, .20); }
.dsr-tcard .stars { color: var(--wp--preset--color--green); font-size: var(--fs-small); letter-spacing: 2px; margin-bottom: 14px; }
.dsr-tcard .tq { font-size: var(--fs-small); line-height: 1.72; color: var(--wp--preset--color--ink-2); font-style: italic; flex: 1; margin: 0 0 18px; }
.dsr-tcard .tmeta { border-top: 1px solid var(--wp--preset--color--line); padding-top: 14px; }
.dsr-tcard .tn { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-small); color: var(--wp--preset--color--contrast); }
.dsr-tcard .tr { font-size: var(--fs-caption); color: var(--wp--preset--color--muted); margin-top: 2px; }

/* ---- ROI ---- */
.dsr-roi { background: var(--wp--preset--color--contrast); }
.dsr-roi .dsr-label { color: var(--wp--preset--color--cyan); }
.dsr-roi .dsr-label::before { background: var(--wp--preset--color--cyan); }
.dsr-roi .dsr-title { color: #fff; }
.dsr-roi .dsr-sub { color: rgba(255,255,255,.6); }
.dsr-roi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 60px); align-items: center; margin-top: 40px; }
.dsr-roi-lead { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 18px; }
.dsr-rcost { display: flex; gap: 15px; align-items: flex-start; padding: 18px 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; margin-bottom: 12px; }
.dsr-rcost .ri { font-size: var(--fs-card); flex-shrink: 0; line-height: 1; }
.dsr-rcost .rt { font-size: var(--fs-caption); font-weight: 700; color: rgba(255,255,255,.55); margin: 0 0 3px; }
.dsr-rcost .rd { font-size: var(--fs-caption); line-height: 1.6; color: rgba(255,255,255,.82); margin: 0; }
.dsr-vsbox { background: var(--wp--preset--color--green); border-radius: 22px; padding: clamp(30px, 3.4vw, 44px); text-align: center; }
.dsr-vsbox .pn { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(22,16,60,.7); }
.dsr-vsbox .price { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-display); color: #16103c; line-height: 1; margin: 12px 0 6px; }
.dsr-vsbox .desc { font-size: var(--fs-small); line-height: 1.65; color: rgba(22,16,60,.82); margin: 14px 0 0; }
.dsr-vsbox .math { font-size: var(--fs-caption); color: rgba(22,16,60,.72); font-style: italic; margin-top: 10px; } /* .6 was 3.85:1 on the green card */

/* ---- Final CTA ---- */
.dsr-cta { background: var(--wp--preset--color--contrast); }
.dsr-cta-inner { max-width: 680px; margin: 0 auto; text-align: center; }
.dsr-cta .dsr-label { justify-content: center; color: var(--wp--preset--color--green); }
.dsr-cta h2 { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-h2); letter-spacing: -0.028em; line-height: 1.08; color: #fff; margin: 0 0 16px; }
.dsr-cta p { font-size: var(--fs-body); line-height: 1.7; color: rgba(255,255,255,.62); margin: 0 0 30px; }
.dsr-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.dsr-cta .dsr-btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.dsr-cta .dsr-btn-ghost:hover { background: #fff; color: #16103c; border-color: #fff; }
.dsr-cta-note { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); letter-spacing: .04em; color: rgba(255,255,255,.46); margin-top: 18px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.dsr-hero-grid, .dsr-cost-grid, .dsr-split, .dsr-roi-grid, .dsr-fit-grid { grid-template-columns: 1fr; }
	.dsr-plan-grid, .dsr-tgrid { grid-template-columns: 1fr; }
	.dsr-panel.is-active { grid-template-columns: 1fr 1fr; }
	.dsr-stats { grid-template-columns: repeat(2, 1fr); }
	.dsr-stat:nth-child(2) { border-right: none; }
	.dsr-stat:nth-child(1), .dsr-stat:nth-child(2) { border-bottom: 1.5px solid var(--wp--preset--color--line); }
	.dsr-sticky { position: static; }
}
@media (max-width: 560px) {
	.dsr-panel.is-active { grid-template-columns: 1fr; }
	.dsr-scard { grid-template-columns: 1fr; gap: 8px; }
	.dsr-ctas .dsr-btn, .dsr-cta-btns .dsr-btn { width: 100%; justify-content: center; }
}

/* ---- Native-block adjustments for dsr sections (editable in Gutenberg) ---- */
/* "What's included" as a dark accordion (native core/details) */
.dsr-inc .dsr-acc { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; }
.dsr-inc .wp-block-details { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 2px 22px; }
.dsr-inc .wp-block-details summary { color: #fff; font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: var(--fs-small); padding: 16px 0; cursor: pointer; list-style: none; }
.dsr-inc .wp-block-details summary::-webkit-details-marker { display: none; }
.dsr-inc .wp-block-details summary::after { content: "+"; float: right; color: var(--wp--preset--color--green); font-weight: 700; font-size: var(--fs-card); line-height: 1; }
.dsr-inc .wp-block-details[open] summary::after { content: "\2212"; }
.dsr-inc .wp-block-details[open] summary { border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 14px; }
.dsr-inc .wp-block-details .wp-block-list { columns: 2; column-gap: 30px; list-style: none; padding: 0 0 14px; margin: 0; }
.dsr-inc .wp-block-details li { color: rgba(255,255,255,.58); font-size: var(--fs-caption); line-height: 1.6; margin-bottom: 12px; break-inside: avoid; padding-left: 18px; position: relative; }
.dsr-inc .wp-block-details li::before { content: "\2713"; position: absolute; left: 0; color: var(--wp--preset--color--green); font-weight: 700; }
.dsr-inc .wp-block-details li strong { color: #fff; font-weight: 700; }
@media (max-width: 700px) { .dsr-inc .wp-block-details .wp-block-list { columns: 1; } }

/* Native buttons on dark dsr sections stay visible on hover */
.dsr-cta .wp-block-button.is-style-ghost .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.3); }
.dsr-cta .wp-block-button.is-style-ghost .wp-block-button__link:hover { background: #fff; color: #16103c; border-color: #fff; }
.dsr-cta .wp-block-button.is-style-brand .wp-block-button__link:hover { background: #fff; color: #16103c; }
/* process step base tag = muted mono label */
.dsr-step .stag { color: var(--wp--preset--color--muted); }
/* dsr sections: native buttons keep the pill look; drop extra bottom gap on last child */
.dsr-plan .wp-block-buttons { margin-top: auto; }
.dsr-plan .wp-block-button { width: 100%; }
.dsr-plan .wp-block-button__link { width: 100%; text-align: center; }

/* ---- native-block spacing/centering fixes for dsr ---- */
.dsr-stat .l, .dsr-quote .qa, .dsr-tcard .tmeta, .dsr-vsbox .pn { margin: 0; }
.dsr-faqwrap { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.dsr-cta-btns .wp-block-buttons { justify-content: center; }
.dsr-cta-btns { display: block; }
.dsr-hero-left, .dsr-cost-left { min-width: 0; }
/* keep hero left buttons spaced from note */
.dsr-hero .wp-block-buttons { margin-bottom: 4px; }

/* Inline text-color marks: no default yellow highlight background */
mark.has-inline-color, .wp-block-heading mark { background-color: transparent; }

/* ---- fixes: featured plan button hover + FAQ full-card click ---- */
/* Growth (featured/dark) plan button stays visible on hover (was going black) */
.dsr-plan.featured .wp-block-button.is-style-brand .wp-block-button__link:hover,
.dsr-plan.featured .wp-block-button.is-style-brand .wp-block-button__link:focus { background: #fff; color: #16103c; border-color: #fff; }
/* FAQ: relocate the card padding from <details> onto <summary> so the whole
   question row (not just the text) is clickable */
.ds-faq .wp-block-details { padding: 0; }
.ds-faq summary { padding: 22px 26px; }
.ds-faq .wp-block-details > *:not(summary) { padding: 0 26px 22px; margin-top: 0; }

/* ---- fixes round 2: section gaps, CTA heading size, FAQ +icon overflow ---- */
/* Remove the 24px block-gap injected between full-bleed sections (showed as
   white bands at light↔dark boundaries) */
.dsr-sec { margin-block: 0 !important; }
/* CTA heading: match the other section titles (was oversized at 50px) */
.dsr-cta h2 { font-size: var(--fs-h2); margin-bottom: 14px; }
.dsr-cta p { margin-bottom: 32px; }
.dsr-cta-note { margin-top: 20px; }
/* FAQ summary: border-box so width:100% + padding stays inside the card
   (keeps the + icon within the card, not overflowing right) */
.ds-faq summary { box-sizing: border-box; }
/* Footer should abut the last section (remove injected 24px block-gap that
   showed as a white band before the dark footer) */
.wp-site-blocks > footer { margin-block-start: 0 !important; }

/* ---- CTA as a LIGHT section matching the hero (was dark, merged with footer) ---- */
.dsr-cta { background: var(--wp--preset--color--base); }
.dsr-cta .dsr-label { color: var(--green-text); }
.dsr-cta h2 { color: var(--wp--preset--color--contrast); font-size: var(--fs-h2); margin-bottom: 16px; }
.dsr-cta p { color: var(--wp--preset--color--ink-2); margin-bottom: 30px; }
/* note styled exactly like the hero note (small, muted, mono) with breathing room */
.dsr-cta-note { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-caption); letter-spacing: .02em; color: var(--wp--preset--color--muted); margin-top: 18px; }
.dsr-cta .dsr-cta-btns { margin-bottom: 40px; }
/* guarantee (malware page): give the CTA button room below the promise cards */
.dsr-guar .dsr-cta-btns { margin-top: clamp(28px, 4vw, 40px); }
/* buttons: ghost is dark-on-light again (undo the dark-section overrides); brand hover goes dark */
.dsr-cta .wp-block-button.is-style-ghost .wp-block-button__link { color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); }
.dsr-cta .wp-block-button.is-style-ghost .wp-block-button__link:hover { background: var(--wp--preset--color--contrast); color: #fff; border-color: var(--wp--preset--color--contrast); }
.dsr-cta .wp-block-button.is-style-brand .wp-block-button__link:hover { background: #16103c; color: #fff; }
/* note + heading: higher specificity so the hero-style note size wins over .dsr-cta p */
.dsr-cta h2 { font-size: var(--fs-h2); }
.dsr-cta .dsr-cta-note { font-size: var(--fs-caption); color: var(--wp--preset--color--muted); margin-top: 40px; }

/* CTA headline + intro: even out the wrap. Without this the /work/ heading
   broke as "…you are worried" / "about", leaving one word alone on line two.
   `balance` splits the lines evenly instead of filling line one to the edge;
   `pretty` on the paragraph does the same job for its last line. Both are
   ignored by browsers that do not know them, so the fallback is today's wrap. */
.dsr-cta h2 { text-wrap: balance; }
.dsr-cta .dsr-cta-inner > p { text-wrap: pretty; }

/* ── /blog/ hero ──
   The sub sits under a headline that runs the full wrap, so the shared 540px
   cap left it as a narrow ragged column against a very wide title. Here it
   runs the same width as the headline and lands on one line. */
/* `pretty` keeps the last line from ending on a single orphaned word. */
.dsr-bloghero .dsr-hsub { max-width: none; text-wrap: pretty; }
/* `balance` evens the two title lines. Without it the wrap fell after "and",
   splitting "maintenance, security and / speed," and leaving the conjunction
   dangling at the end of line one. */
.dsr-bloghero .dsr-htitle { text-wrap: balance; }

/* =========================================================================
 * Emergency-support page components (reuses the dsr-* system, same palette):
 * live-status card, trust strip, callout, service/comparison/specialist/price
 * cards, guarantee + maintenance-upsell dark cards. All light-theme.
 * ====================================================================== */
/* shared reusable check list */
.dsr-checks { list-style: none; margin: 0; padding: 0; }
.dsr-checks li { position: relative; padding: 9px 0 9px 26px; font-size: var(--fs-small); color: var(--wp--preset--color--ink-2); line-height: 1.5; border-bottom: 1px solid var(--wp--preset--color--line); list-style: none; }
.dsr-checks li:last-child { border-bottom: none; }
.dsr-checks li::before { content: "✓"; position: absolute; left: 0; top: 9px; color: var(--green-text); font-weight: 700; font-size: var(--fs-caption); }

/* hero live-status card (dark, sits in the light hero right column) */
.dsr-status { background: var(--wp--preset--color--contrast); color: #fff; border-radius: 20px; padding: clamp(26px, 3vw, 34px); }
.dsr-status .st-title { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 18px; display: flex; align-items: center; gap: 10px; }
.dsr-status .st-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--green); box-shadow: 0 0 0 4px rgba(124,58,237,.22); }
.dsr-status .st-stat { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.dsr-status .st-stat:last-child { border-bottom: none; padding-bottom: 0; }
.dsr-status .st-stat .l { font-size: var(--fs-caption); color: rgba(255,255,255,.5); margin: 0 0 4px; }
.dsr-status .st-stat .v { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-card-lg); line-height: 1; color: #fff; margin: 0; }
.dsr-status .st-stat .v.g { color: var(--wp--preset--color--green); }
.dsr-status .st-stat .s { font-size: var(--fs-micro); color: rgba(255,255,255,.46); margin: 4px 0 0; }

/* trust strip under the hero (5 facts, bordered like the stat strip) */
.dsr-trust { display: grid; grid-template-columns: repeat(5, 1fr); border: 1.5px solid var(--wp--preset--color--line); border-radius: 16px; overflow: hidden; margin-top: clamp(40px, 5vw, 56px); background: var(--wp--preset--color--base); }
.dsr-trust .tb { padding: 20px 18px; border-right: 1.5px solid var(--wp--preset--color--line); }
.dsr-trust .tb:last-child { border-right: none; }
.dsr-trust .tt { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-small); letter-spacing: -0.01em; color: var(--wp--preset--color--contrast); margin: 0 0 3px; }
.dsr-trust .ts { font-size: var(--fs-caption); color: var(--wp--preset--color--muted); line-height: 1.4; margin: 0; }

/* centered closing callout (e.g. "don't see your issue?") */
.dsr-callout { margin-top: 26px; text-align: center; padding: 18px 26px; background: var(--wp--preset--color--green-tint); border: 1px solid var(--tint-line); border-radius: 14px; font-size: var(--fs-small); line-height: 1.6; color: var(--wp--preset--color--ink-2); }
.dsr-callout strong { color: var(--green-text); }

/* section backgrounds for emergency page */
.dsr-prob { background: var(--wp--preset--color--base); }
.dsr-srv { background: var(--wp--preset--color--soft); }
.dsr-cmp { background: var(--wp--preset--color--soft); }
.dsr-spec { background: var(--wp--preset--color--soft); }
.dsr-price { background: var(--wp--preset--color--base); }
.dsr-upsell { background: var(--wp--preset--color--base); }
.dsr-cta.dsr-cta-soft { background: var(--wp--preset--color--soft); }

/* service cards: category badge + check list inside a dsr-card */
.dsr-card .dsr-badge { display: inline-block; font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 5px 11px; background: var(--wp--preset--color--green-tint); color: var(--green-text); border-color: var(--tint-line); border-radius: 999px; margin-bottom: 16px; }
.dsr-card .dsr-checks li { font-size: var(--fs-caption); }

/* "what's different" comparison cards (them vs us) */
.dsr-cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.dsr-cmpcard { background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 18px; padding: 26px; }
.dsr-cmpcard .ct { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-lead); letter-spacing: -0.01em; color: var(--wp--preset--color--contrast); margin: 0 0 3px; }
.dsr-cmpcard .cs { font-size: var(--fs-caption); color: var(--wp--preset--color--muted); margin: 0 0 16px; }
.dsr-cmp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dsr-cmp-col { border-radius: 12px; padding: 14px 16px; font-size: var(--fs-caption); line-height: 1.55; }
.dsr-cmp-col.them { background: var(--wp--preset--color--soft-2); color: var(--wp--preset--color--muted); }
.dsr-cmp-col.us { background: var(--wp--preset--color--green-tint); color: var(--wp--preset--color--ink-2); }
.dsr-cmp-col .lbl { display: block; font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.dsr-cmp-col.them .lbl { color: var(--wp--preset--color--muted); }
.dsr-cmp-col.us .lbl { color: var(--green-text); }

/* testimonial category tag */
/* align-self is required, not decorative: .dsr-tcard is a flex column, so a
   blockified inline-block child stretches to the full card width without it.
   Only the services hub uses .ttag today, which is why it never showed. */
.dsr-tcard .ttag { display: inline-block; align-self: flex-start; font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; margin-bottom: 14px; background: var(--wp--preset--color--cyan-tint); color: var(--wp--preset--color--cyan-dark); }

/* specialist cards (WooCommerce / agency) */
.dsr-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.dsr-speccard { background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 18px; padding: 32px; box-shadow: inset 0 3px 0 var(--wp--preset--color--cyan); }
.dsr-speccard.g { border-top-color: var(--wp--preset--color--green); }
.dsr-speccard h3 { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-card); line-height: 1.18; letter-spacing: -0.015em; color: var(--wp--preset--color--contrast); margin: 0 0 12px; }
.dsr-speccard p { font-size: var(--fs-small); line-height: 1.7; color: var(--wp--preset--color--muted); margin: 0 0 14px; }
.dsr-speccard .dsr-checks { margin-bottom: 22px; }

/* pricing: 3 number-step cards + dark guarantee box */
.dsr-pricegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.dsr-pricecard { background: var(--wp--preset--color--soft); border: 1.5px solid var(--wp--preset--color--line); border-radius: 18px; padding: 28px 26px; }
.dsr-pricecard .pnum { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-num); color: var(--green-text); line-height: 1; margin: 0 0 12px; }
.dsr-pricecard h4 { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-lead); letter-spacing: -0.01em; color: var(--wp--preset--color--contrast); margin: 0 0 8px; }
.dsr-pricecard p { font-size: var(--fs-small); line-height: 1.65; color: var(--wp--preset--color--muted); margin: 0; }
.dsr-guarantee { display: flex; align-items: center; gap: 22px; margin-top: 20px; padding: clamp(24px, 3vw, 32px); border-radius: 18px; }
.dsr-guarantee .gi { width: 56px; height: 56px; border-radius: 50%; background: rgba(124,58,237,.18); display: flex; align-items: center; justify-content: center; font-size: var(--fs-card-lg); flex-shrink: 0; }
.dsr-guarantee .gt { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-lead); letter-spacing: -0.01em; color: #fff; margin: 0 0 6px; }
.dsr-guarantee .gb { font-size: var(--fs-small); line-height: 1.65; color: rgba(255,255,255,.62); margin: 0; }
.dsr-guarantee .gb strong { color: #fff; }

/* maintenance upsell: 2-col with dark "what's included" card */
.dsr-upsell-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 56px); align-items: center; }
.dsr-upsell-grid h2 { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -0.02em; color: var(--wp--preset--color--contrast); margin: 0 0 14px; }
.dsr-upsell-grid .up-left p { font-size: var(--fs-small); line-height: 1.7; color: var(--wp--preset--color--muted); margin: 0 0 14px; }
.dsr-upsell-grid .up-left .dsr-checks { margin: 20px 0 24px; }
.dsr-uplist { background: var(--wp--preset--color--contrast); border-radius: 20px; padding: clamp(26px, 3vw, 32px); }
.dsr-uplist .ut { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 6px; }
.dsr-upitem { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.dsr-upitem:last-child { border-bottom: none; padding-bottom: 0; }
.dsr-upitem .ui { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; font-size: var(--fs-body); flex-shrink: 0; }
.dsr-upitem .ul-t { font-size: var(--fs-small); font-weight: 600; color: #fff; margin: 0; }
.dsr-upitem .ul-s { font-size: var(--fs-caption); color: rgba(255,255,255,.45); margin: 2px 0 0; }

/* CTA perks (centered check list inside the light CTA) */
.dsr-cta .dsr-cta-perks { list-style: none; max-width: 440px; margin: 0 auto 26px; padding: 0; text-align: left; }
.dsr-cta .dsr-cta-perks li { position: relative; padding: 8px 0 8px 26px; font-size: var(--fs-small); color: var(--wp--preset--color--ink-2); border: none; }
.dsr-cta .dsr-cta-perks li::before { content: "✓"; position: absolute; left: 0; top: 8px; color: var(--green-text); font-weight: 700; }

/* emergency-page responsive */
@media (max-width: 900px) {
	.dsr-cmp-grid, .dsr-spec-grid, .dsr-upsell-grid, .dsr-pricegrid { grid-template-columns: 1fr; }
	.dsr-trust { grid-template-columns: repeat(2, 1fr); }
	.dsr-trust .tb:nth-child(2) { border-right: none; }
	.dsr-guarantee { flex-direction: column; text-align: center; }
}
@media (max-width: 560px) {
	.dsr-cmp-cols { grid-template-columns: 1fr; }
	.dsr-trust { grid-template-columns: 1fr; }
}
/* contact CTA: 2-col copy + embedded form card (form auto-inverts on dark) */
.dsr-contact { background: var(--wp--preset--color--soft); }
.dsr-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 56px); align-items: start; }
.dsr-contact-copy .dsr-checks { margin: 22px 0 22px; max-width: 460px; }
.dsr-contact-alt { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.dsr-contact-alt p { font-size: var(--fs-caption); color: var(--wp--preset--color--muted); margin: 0; }
.dsr-contact-alt strong { color: var(--wp--preset--color--ink-2); font-weight: 600; }
.dsr-formcard { background: var(--wp--preset--color--contrast); border-radius: 20px; padding: clamp(26px, 3vw, 34px); }
.dsr-formcard .fc-title { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-card); letter-spacing: -0.01em; color: #fff; margin: 0 0 6px; }
.dsr-formcard .fc-sub { font-size: var(--fs-caption); color: rgba(255,255,255,.5); margin: 0 0 22px; }
.dsr-formcard .ds-form__consent { color: rgba(255,255,255,.45); }
.dsr-formcard .ds-form__consent a { color: rgba(255,255,255,.75); }
@media (max-width: 900px) { .dsr-contact-grid { grid-template-columns: 1fr; } }

/* =========================================================================
 * WordPress-maintenance page extras (same dsr-* light system): pain numbers,
 * services header note, comparison table, quick-fix bar, cyan plan badge.
 * ====================================================================== */
.dsr-note.is-cyan { border-left-color: var(--wp--preset--color--cyan); }
.dsr-srv .dsr-svc-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 52px); align-items: center; }
.dsr-srv .dsr-svc-head .dsr-title { margin-bottom: 0; }
.dsr-srv .dsr-svc-head .dsr-note { margin-top: 0; }
@media (max-width: 900px) { .dsr-srv .dsr-svc-head { grid-template-columns: 1fr; } }
/* pain cards: mono number chip instead of emoji */
.dsr-prob .dsr-card .ic { font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: var(--fs-small); color: var(--green-text); }
/* service cards: badge above the icon */
.dsr-srv .dsr-card .dsr-badge { display: inline-block; font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green-text); border: 1px solid var(--tint-line); padding: 3px 9px; border-radius: 4px; margin-bottom: 14px; }

/* cyan plan badge (Agency) */
.dsr-plan .pbadge.is-cyan { background: var(--wp--preset--color--cyan); color: #0e0e10; }

/* quick-fix bar under the pricing grid */
.dsr-quickfix { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding: 16px 22px; border: 1.5px solid var(--wp--preset--color--line); border-radius: 14px; background: var(--wp--preset--color--base); }
.dsr-quickfix .q { font-size: var(--fs-caption); color: var(--wp--preset--color--muted); margin: 0; }
.dsr-quickfix .a { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-caption); font-weight: 700; color: var(--green-text); margin: 0; }
.dsr-quickfix .a a { color: var(--green-text); }

/* comparison section + table */
.dsr-compare { background: var(--wp--preset--color--base); }
.dsr-compare .dsr-cmp-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: end; }
.dsr-compare .dsr-cmp-head .dsr-title { margin-bottom: 0; }
.dsr-compare .dsr-cmp-intro { font-size: var(--fs-small); line-height: 1.7; color: var(--wp--preset--color--muted); max-width: 460px; margin: 0; }
/* The frame lives on the WRAPPER, not on <table>. With border-collapse:collapse
   the table's own border collapses into the cell borders and the left and
   bottom edges simply never paint, and border-radius + overflow:hidden are not
   reliably honoured on a table element either. The wrapper is a plain box, so
   its border, radius and clipping all behave. It already scrolls on narrow
   screens, which means the frame stays put while the columns move inside it. */
/* A step darker than --line (#e5e2f2), which sits at roughly 1.2:1 on white
   and reads as no frame at all. Deliberately only the outer edge: the
   internal rules stay on --line so the table keeps a hierarchy (frame,
   then header divider, then cell rules) instead of looking like a
   spreadsheet. */
.dsr-cmptable { margin: 40px 0 32px; overflow-x: auto; border: 1.5px solid #cfc9e6; border-radius: 14px; }
.dsr-cmptable table { width: 100%; border-collapse: collapse; border: none; }
.dsr-cmptable thead tr { background: var(--wp--preset--color--soft-2); }
.dsr-cmptable th { padding: 14px 18px; font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--muted); text-align: center; }
.dsr-cmptable th:first-child { text-align: left; }
.dsr-cmptable th:last-child { color: var(--green-text); }
.dsr-cmptable td { padding: 13px 18px; font-size: var(--fs-caption); text-align: center; color: var(--wp--preset--color--muted); border-top: 1px solid var(--wp--preset--color--line); }
.dsr-cmptable td:first-child { text-align: left; color: var(--wp--preset--color--ink-2); font-weight: 500; }
.dsr-cmptable tbody tr:nth-child(even) td { background: var(--wp--preset--color--soft); }

/* Column rules. Without them the table has only horizontal lines, so on a
   dsr-bg-base (white) section the odd rows have no edges at all and the whole
   thing dissolves into the page. With five columns of mostly one-glyph values
   the eye also loses which value belongs to which column. */
.dsr-cmptable th, .dsr-cmptable td { border-right: 1px solid var(--wp--preset--color--line); }
.dsr-cmptable th:last-child, .dsr-cmptable td:last-child { border-right: none; }
.dsr-cmptable thead th { border-bottom: 1.5px solid var(--wp--preset--color--line); }
/* thead's bottom border is the divider under the header, so the first body row
   must not add its own on top of it. */
.dsr-cmptable tbody tr:first-child td { border-top: none; }

/* The last column is CRMTeardown on every comparison table on the site (on the
   custom-development "what you need" table it is "Custom build", which is the
   same argument). Tinting it turns the table into one readable answer instead
   of a grid the reader has to solve. The tint has to beat the nth-child zebra
   above, hence the tbody tr qualifier. */
.dsr-cmptable th:last-child { background: rgba(124,58,237,.14); }
.dsr-cmptable tbody tr td:last-child,
.dsr-cmptable tbody tr:nth-child(even) td:last-child { background: rgba(124,58,237,.07); }
.dsr-cmptable th:last-child, .dsr-cmptable tbody tr td:last-child { border-left: 1.5px solid rgba(124,58,237,.45); }

.dsr-cmptable .tok { color: var(--green-text); font-weight: 700; }
/* was #bdbdb2, roughly 2:1 on white and barely visible next to a green tick */
.dsr-cmptable .tno { color: #7b7596; }
.dsr-cmptable .tmid { color: var(--wp--preset--color--cyan-dark); font-weight: 600; font-size: var(--fs-caption); }
@media (max-width: 900px) { .dsr-compare .dsr-cmp-head { grid-template-columns: 1fr; align-items: start; } }

/* alternating section-background utilities (2-class → beats component defaults) */
.dsr-sec.dsr-bg-soft { background: var(--wp--preset--color--soft); }
.dsr-sec.dsr-bg-base { background: var(--wp--preset--color--base); }

/* "In plain terms" answer / definition PANEL (AEO/GEO) — a bordered card:
   big lead statement on top, 2-col body below, pills footer row */
.dsr-answerbox { margin-top: 12px; border: 1.5px solid var(--wp--preset--color--line); border-radius: 22px; background: var(--wp--preset--color--soft); padding: clamp(28px, 4vw, 48px); position: relative; overflow: hidden; }
.dsr-answerbox::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--wp--preset--color--green), var(--wp--preset--color--cyan)); }
.dsr-answer-lead { font-size: var(--fs-lead-lg); line-height: 1.5; font-weight: 500; color: var(--wp--preset--color--contrast); margin: 0 0 26px; padding-bottom: 26px; border-bottom: 1px solid var(--wp--preset--color--line); max-width: 880px; }
.dsr-answer-lead b, .dsr-answer-lead strong { color: var(--green-text); font-weight: 600; }
.dsr-answer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 4vw, 44px); }
.dsr-answer-cols p { font-size: var(--fs-small); line-height: 1.8; color: var(--wp--preset--color--muted); margin: 0; }
.dsr-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; }
.dsr-pill { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); letter-spacing: .03em; color: var(--green-text); border: 1px solid var(--tint-line); padding: 6px 12px; border-radius: 6px; background: var(--wp--preset--color--base); }
@media (max-width: 760px) { .dsr-answer-cols { grid-template-columns: 1fr; gap: 16px; } }
/* FAQ answers that contain a bullet list */
.ds-faq .wp-block-details .wp-block-list { margin: 6px 0 0; padding-left: 20px; list-style: disc; }
.ds-faq .wp-block-details .wp-block-list li { margin-bottom: 6px; }

/* misc emergency-page tidy */
.dsr-cmp-col p { margin: 0; }
.dsr-hero .dsr-hbody { font-size: var(--fs-small); line-height: 1.72; color: var(--wp--preset--color--muted); max-width: 540px; margin: 0 0 12px; }
.dsr-hero .dsr-hbody strong { color: var(--wp--preset--color--contrast); font-weight: 600; }
.dsr-hero .dsr-hbody + .wp-block-buttons, .dsr-hero .dsr-hbody + .dsr-ctas { margin-top: 20px; }
.dsr-upsell-grid .up-left .wp-block-buttons { margin-top: 4px; }
.dsr-guarantee .dsr-g-text { min-width: 0; }
.dsr-prob .dsr-callout, .dsr-callout { max-width: none; margin-left: 0; margin-right: 0; }
/* cyan-tint callout variant (e.g. custom-dev handover "nothing here is conditional") */
.dsr-callout.is-cyan { background: var(--wp--preset--color--cyan-tint); border-color: rgb(41 182 211 / 40%); }
.dsr-callout.is-cyan strong { color: var(--cyan-text); }
/* small caption inside an answerbox (e.g. "deliberately standard" note) */
.dsr-answerbox .dsr-answer-note { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--wp--preset--color--line); font-size: var(--fs-caption); line-height: 1.7; color: var(--wp--preset--color--muted); max-width: none; }

/* "In plain terms" 2-col DEFINITION (custom-dev): text left, self-contained dark pill card right */
.dsr-def { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 4vw, 52px); align-items: start; margin-top: 24px; }
.dsr-def-main .dsr-def-lead { font-size: var(--fs-card); line-height: 1.55; font-weight: 500; color: var(--wp--preset--color--contrast); border-left: 3px solid var(--wp--preset--color--green); padding-left: 20px; margin: 0 0 22px; }
.dsr-def-main .dsr-def-lead b, .dsr-def-main .dsr-def-lead strong { color: var(--green-text); font-weight: 600; }
.dsr-def-main p { font-size: var(--fs-small); line-height: 1.8; color: var(--wp--preset--color--muted); margin: 0 0 14px; }
.dsr-def-main p:last-child { margin-bottom: 0; }
.dsr-def-main p strong { color: var(--wp--preset--color--ink-2); font-weight: 600; }
.dsr-def-aside { border-radius: 20px; padding: clamp(26px, 3vw, 34px) clamp(24px, 2.5vw, 30px); }
.dsr-def-aside h3 { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 400; margin: 0 0 18px; }
.dsr-def-aside .dsr-pills { gap: 8px; margin: 0; }
.dsr-def-aside .dsr-pill { font-size: var(--fs-micro); color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.05); }
.dsr-def-aside .dsr-note-sm { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: var(--fs-caption); line-height: 1.7; color: rgba(255,255,255,.5); }
@media (max-width: 820px) { .dsr-def { grid-template-columns: 1fr; gap: 22px; } }

/* ── Speed page: before/after PROOF table ── */
.dsr-proof-note { font-size: var(--fs-small); line-height: 1.7; color: var(--wp--preset--color--muted); max-width: 560px; margin: 0 0 8px; }
/* Same frame-on-the-wrapper rule as .dsr-cmptable above, and for the same
   reason: with border-collapse:collapse a border on <table> loses its left and
   bottom edges, and radius + overflow:hidden are unreliable on a table. This
   one really does scroll (the table has min-width:620px), so keeping the frame
   on the wrapper also means it stays put while the columns move inside it. */
.dsr-prooftable { margin: 40px 0 0; overflow-x: auto; border: 1.5px solid #cfc9e6; border-radius: 14px; }
.dsr-prooftable table { width: 100%; border-collapse: collapse; border: none; min-width: 620px; }
.dsr-prooftable thead tr { background: var(--wp--preset--color--soft-2); }
.dsr-prooftable th { padding: 14px 20px; font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--muted); text-align: left; }
/* The three data columns are centred, matching .dsr-cmptable. Right-aligned
   numbers only help when readers compare down a column of like units; here
   the rows mix scores, seconds, milliseconds and counts, so there is nothing
   to line up on and the values just drifted away from their headers. */
.dsr-prooftable th.num { text-align: center; }
.dsr-prooftable td { padding: 15px 20px; font-size: var(--fs-small); color: var(--wp--preset--color--ink-2); border-top: 1px solid var(--wp--preset--color--line); }
.dsr-prooftable tbody tr:nth-child(even) td { background: var(--wp--preset--color--soft); }

/* Column rules. Three of the four columns are right-aligned numbers, so without
   them the numbers float in space and it is hard to tell before from after. */
.dsr-prooftable th, .dsr-prooftable td { border-right: 1px solid var(--wp--preset--color--line); }
.dsr-prooftable th:last-child, .dsr-prooftable td:last-child { border-right: none; }
.dsr-prooftable thead th { border-bottom: 1.5px solid var(--wp--preset--color--line); }
.dsr-prooftable tbody tr:first-child td { border-top: none; }

/* "After" is the outcome column, the equivalent of the CRMTeardown column on
   .dsr-cmptable. All three tables that use this component are metric | before |
   after | change, so the header cell is reliably the third. */
.dsr-prooftable thead th:nth-child(3) { background: rgba(124,58,237,.14); color: var(--green-text); }
.dsr-prooftable tbody tr td.pafter,
.dsr-prooftable tbody tr:nth-child(even) td.pafter { background: rgba(124,58,237,.07); }
.dsr-prooftable thead th:nth-child(3),
.dsr-prooftable tbody tr td.pafter { border-left: 1.5px solid rgba(124,58,237,.45); border-right-color: rgba(124,58,237,.45); }
.dsr-prooftable .pmetric { font-weight: 500; color: var(--wp--preset--color--contrast); }
.dsr-prooftable .pmetric small { display: block; color: var(--wp--preset--color--muted); font-weight: 400; font-size: var(--fs-micro); margin-top: 3px; }
.dsr-prooftable .pbefore { text-align: center; font-family: var(--wp--preset--font-family--mono); color: #c34a28; font-size: var(--fs-caption); }
.dsr-prooftable .pafter { text-align: center; font-family: var(--wp--preset--font-family--mono); color: var(--green-text); font-weight: 700; }
.dsr-prooftable .pdelta { text-align: center; font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--cyan-dark); font-size: var(--fs-caption); }
.dsr-proof-caption { margin-top: 18px; font-size: var(--fs-caption); line-height: 1.6; color: var(--wp--preset--color--muted); max-width: 720px; }

/* ── Speed page: cost-of-slow CALCULATOR ── */
.dsr-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1.5px solid var(--wp--preset--color--line); border-radius: 18px; overflow: hidden; margin-top: clamp(40px, 5vw, 52px); }
.dsr-calc-in { background: var(--wp--preset--color--base); padding: clamp(26px, 3vw, 36px); }
.dsr-calc-out { background: var(--wp--preset--color--contrast); color: #fff; padding: clamp(26px, 3vw, 36px); position: relative; }
.dsr-calc-f { margin-bottom: 22px; }
.dsr-calc-f:last-child { margin-bottom: 0; }
.dsr-calc-f label { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-caption); font-weight: 500; color: var(--wp--preset--color--ink-2); margin-bottom: 10px; }
.dsr-calc-f label .val { font-family: var(--wp--preset--font-family--mono); color: var(--green-text); font-size: var(--fs-caption); }
.dsr-calc-f input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; height: 4px; background: var(--wp--preset--color--line); border-radius: 4px; outline: none; }
.dsr-calc-f input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--wp--preset--color--green); cursor: pointer; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.dsr-calc-f input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--wp--preset--color--green); cursor: pointer; border: 3px solid #fff; }
.dsr-calc-lbl { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 8px; }
.dsr-calc-big { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-h1); color: var(--wp--preset--color--green); letter-spacing: -0.02em; line-height: 1; margin: 0 0 6px; }
.dsr-calc-sub { font-size: var(--fs-caption); color: rgba(255,255,255,.55); margin: 0 0 26px; }
.dsr-calc-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.1); }
.dsr-calc-row span:first-child { font-size: var(--fs-caption); color: rgba(255,255,255,.6); }
.dsr-calc-row span:last-child { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-small); font-weight: 700; color: #fff; }
.dsr-calc-row .accent { color: var(--wp--preset--color--cyan); }
.dsr-calc-note { margin-top: 20px; font-size: var(--fs-micro); line-height: 1.6; color: rgba(255,255,255,.46); }
@media (max-width: 820px) { .dsr-calc { grid-template-columns: 1fr; } }

/* ── Malware page: hero CONSOLE / cleanup-log panel (dark) ── */
.dsr-console { align-self: center; background: var(--wp--preset--color--contrast); border-radius: 16px; overflow: hidden; font-family: var(--wp--preset--font-family--mono); border: 1px solid rgba(255,255,255,.08); }
.dsr-console .cbar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.dsr-console .cbar .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dsr-console .cbar .r { background: #E5695f; } .dsr-console .cbar .y { background: #E3b34a; } .dsr-console .cbar .g { background: #4fbf8b; }
.dsr-console .cbar .ct { margin-left: 6px; font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.46); }
.dsr-console .cbody { padding: 20px 18px 22px; font-size: var(--fs-caption); line-height: 1.9; color: #C7D6CC; }
.dsr-console .cbody p { margin: 0; color: #C7D6CC; }
.dsr-console .cbody .cx { color: #E5695f; } .dsr-console .cbody .ck { color: #4fbf8b; } .dsr-console .cbody .ca { color: #6f8377; }
.dsr-console .cstatus { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.dsr-console .cstatus .l { font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.46); margin: 0; }
.dsr-console .cstatus .v { font-weight: 700; font-size: var(--fs-caption); color: #57cf98; display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.dsr-console .cstatus .v::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #57cf98; box-shadow: 0 0 0 4px rgba(87,207,152,.18); }

/* ── generic 2-col grid (who / promises / included) ── */
.dsr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
@media (max-width: 760px) { .dsr-grid2 { grid-template-columns: 1fr; } }
/* 4-up grid (e.g. a 4-card "Sound familiar?" row) — always one row on desktop */
.dsr-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
@media (max-width: 980px) { .dsr-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dsr-grid4 { grid-template-columns: 1fr; } }

/* ── Malware page: symptom alert chips ── */
.dsr-symptoms { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
.dsr-symptoms .sym { display: flex; gap: 12px; align-items: flex-start; padding: 15px 18px; background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 12px; }
.dsr-symptoms .sym::before { content: "⚠"; color: #c34a28; flex: none; font-size: var(--fs-small); line-height: 1.55; }
.dsr-symptoms .sym p { margin: 0; font-size: var(--fs-small); color: var(--wp--preset--color--ink-2); line-height: 1.5; }
@media (max-width: 700px) { .dsr-symptoms { grid-template-columns: 1fr; } }

/* ── Malware page: big-number stat cards ── */
.dsr-statcard { background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 16px; padding: 26px 24px; }
.dsr-statcard .big { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-num); line-height: 1; color: var(--green-text); margin: 0 0 14px; }
.dsr-statcard h3 { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-lead); letter-spacing: -0.01em; color: var(--wp--preset--color--contrast); margin: 0 0 8px; }
.dsr-statcard p { font-size: var(--fs-caption); line-height: 1.6; color: var(--wp--preset--color--muted); margin: 0; }
.dsr-statcard .src { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); color: var(--wp--preset--color--muted); margin: 12px 0 0; opacity: .8; }

/* ── Malware page: single flat-fee price card ── */
.dsr-onefee { max-width: 560px; margin: 44px auto 0; text-align: center; background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 22px; padding: clamp(30px, 4vw, 44px) clamp(24px, 3vw, 36px); }
.dsr-onefee .tag { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--green-text); margin: 0 0 8px; }
.dsr-onefee .amount { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-display); letter-spacing: -0.02em; color: var(--wp--preset--color--contrast); margin: 0 0 6px; }
.dsr-onefee .amount small { font-size: var(--fs-body); font-weight: 400; color: var(--wp--preset--color--muted); }
.dsr-onefee .ptext { font-size: var(--fs-small); line-height: 1.6; color: var(--wp--preset--color--muted); margin: 0 auto 20px; max-width: 400px; }
.dsr-onefee .dsr-checks { max-width: 340px; margin: 0 auto 24px; text-align: left; }
.dsr-onefee .wp-block-buttons { justify-content: center; }

/* ── dark quote stars (used on malware "why" section) ── */
.dsr-quote .stars { color: #E3b34a; font-size: var(--fs-small); letter-spacing: 2px; margin: 0 0 4px; }

/* =========================================================================
 * HOME PAGE extras (same dsr-* light system):
 * "In plain terms" four-word anatomy, service-card read-more links,
 * ROI source captions, /mo suffix in the vs-box price.
 * ====================================================================== */

/* ── "In plain terms": four-word anatomy (definition + 4 panels + dark caveat) ── */
.dsr-anat-top { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 5vw, 60px); align-items: center; margin-bottom: clamp(38px, 5vw, 50px); }
.dsr-anat-lead { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; letter-spacing: -0.015em; color: var(--wp--preset--color--contrast); margin: 0; border-left: 3px solid var(--wp--preset--color--green); padding-left: 20px; }
.dsr-anat-lead em, .dsr-anat-lead strong { font-style: normal; color: var(--green-text); font-weight: 900; }
.dsr-anat-side p { font-size: var(--fs-body); line-height: 1.8; color: var(--wp--preset--color--muted); margin: 0 0 12px; }
.dsr-anat-side p:last-child { margin-bottom: 0; }
.dsr-anat-side strong { color: var(--wp--preset--color--ink-2); font-weight: 600; }
.dsr-anat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.dsr-anat-card { border: 1.5px solid var(--wp--preset--color--line); border-radius: 18px; padding: 26px 24px; background: var(--wp--preset--color--base); position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.dsr-anat-card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(22,16,60,.08); }
.dsr-anat-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--wp--preset--color--green); }
.dsr-anat-card:nth-child(even)::before { background: var(--wp--preset--color--cyan); }
.dsr-anat-card .qn { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em; color: var(--wp--preset--color--muted); margin: 0 0 10px; }
.dsr-anat-card h3 { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-card); letter-spacing: -0.015em; color: var(--wp--preset--color--contrast); margin: 0 0 10px; }
.dsr-anat-card p { font-size: var(--fs-small); line-height: 1.68; color: var(--wp--preset--color--muted); margin: 0 0 16px; }
.dsr-anat-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.dsr-anat-card li { font-size: var(--fs-caption); line-height: 1.5; color: var(--wp--preset--color--ink-2); padding-left: 20px; position: relative; list-style: none; }
.dsr-anat-card li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--green-text); font-weight: 700; font-size: var(--fs-caption); }
.dsr-anat-strip { margin-top: 20px; border-radius: 18px; padding: clamp(24px, 3vw, 32px); display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.dsr-anat-strip .si { width: 52px; height: 52px; border-radius: 50%; background: rgba(124,58,237,.18); display: flex; align-items: center; justify-content: center; font-size: var(--fs-card-lg); flex: none; margin: 0; }
.dsr-anat-strip .st { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-lead); color: #fff; margin: 0 0 6px; letter-spacing: -0.01em; }
.dsr-anat-strip .sb { font-size: var(--fs-small); line-height: 1.7; color: rgba(255,255,255,.66); margin: 0; }
.dsr-anat-strip .sb strong { color: var(--wp--preset--color--green); font-weight: 600; }
@media (max-width: 1000px) { .dsr-anat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .dsr-anat-top { grid-template-columns: 1fr; } }
@media (max-width: 560px)  { .dsr-anat-grid { grid-template-columns: 1fr; } .dsr-anat-strip { grid-template-columns: 1fr; } }

/* ── service-card read-more link ── */
.dsr-more { margin: 14px 0 0 !important; font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-caption); font-weight: 700; }
.dsr-more a { color: var(--green-text); text-decoration: none; }
.dsr-more a:hover { text-decoration: underline; }

/* ── ROI cost cards: small source caption ── */
.dsr-rcost .rs { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); color: rgba(255,255,255,.46); margin: 6px 0 0; }
/* ── vs-box price: "/mo" suffix in body font ── */
.dsr-vsbox .price span { font-family: var(--wp--preset--font-family--sans); font-size: var(--fs-body); font-weight: 500; }

/* ── home: breathing room between the section h2 and the anatomy lead ── */
.dsr-anat .dsr-anat-top { margin-top: 36px; }

/* ── home: full-width "free audit" card closing the services grid ──
   The 10th card sat alone in a 3-up row. It now spans the grid as a
   horizontal banner: icon left, copy centre, button right. */
.dsr-grid3 > .dsr-card.dsr-card-wide,
.dsr-grid4 > .dsr-card.dsr-card-wide { grid-column: 1 / -1; background: var(--wp--preset--color--green-tint); border-color: var(--tint-line); display: grid; grid-template-columns: auto 1fr auto; gap: clamp(20px, 3vw, 38px); align-items: center; padding: 28px 32px; }
.dsr-card-wide:hover { transform: none; box-shadow: none; }
.dsr-card-wide .cw-ic { width: 62px; height: 62px; border-radius: 16px; background: var(--wp--preset--color--base); display: flex; align-items: center; justify-content: center; font-size: var(--fs-card-lg); margin: 0; flex: none; }
.dsr-card-wide .cw-body { min-width: 0; }
.dsr-card-wide .cw-body .dsr-badge { margin-bottom: 8px; background: var(--wp--preset--color--base); }
.dsr-card-wide .cw-body h3 { margin-bottom: 6px; font-size: var(--fs-card); }
.dsr-card-wide .cw-body p { margin: 0; max-width: 780px; }
.dsr-card-wide .cw-cta { flex: none; }
.dsr-card-wide .cw-cta .wp-block-buttons { margin: 0; }
@media (max-width: 900px) {
	.dsr-grid3 > .dsr-card.dsr-card-wide, .dsr-grid4 > .dsr-card.dsr-card-wide { grid-template-columns: 1fr; gap: 18px; }
	.dsr-card-wide .cw-ic { width: 52px; height: 52px; font-size: var(--fs-card-lg); }
}

/* ── service cards: icon and category badge share one row ──
   They used to stack (badge, then icon), which left the whole width beside
   the icon empty and pushed the title down. */
.dsr-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dsr-card-head .ic { margin-bottom: 0; flex: none; }
.dsr-srv .dsr-card-head .dsr-badge { margin-bottom: 0; }
.dsr-card-head .dsr-badge { margin-bottom: 0; }
/* The handover cards pair the number chip with the title instead of a badge, so
   the h3 has to drop the bottom margin it carries when it stands alone. */
.dsr-card-head h3 { margin: 0; }

/* ── home pricing: one-line one-time price footnote ──
   The plan grid is the only decision this section asks for, so the one-time
   prices sit under it as a single quiet line. No rule, no box: a border turned
   it into a floating block, and boxes made it compete with the plan cards.
   The WooCommerce and white-label routes were dropped here because both already
   have their own card in "What we handle". .dsr-quickfix is untouched; five
   service pages still use it. */
.dsr-planfoot { text-align: center; font-size: var(--fs-caption); line-height: 1.7; color: var(--wp--preset--color--muted); margin: 30px auto 0; max-width: 920px; }
.dsr-planfoot a { color: var(--green-text); font-weight: 600; text-decoration: none; }
.dsr-planfoot a:hover { text-decoration: underline; }

/* ── featured cards: light, not a black slab ──
   Every .dsr-card.featured sits alone inside a light card grid (dsr-prob on six
   service pages and the home pain grid, dsr-why on the WooCommerce page,
   dsr-srv on home). Filled with the contrast colour it stopped being "the one
   worth reading" and became the only thing on screen. It keeps that job with a
   green-tint body and cyan accents instead: tinted so it still reads as the
   odd one out, without the weight. The icon tile goes white so it separates
   from the tint. */
.dsr-card.featured { background: var(--wp--preset--color--green-tint); border-color: var(--tint-line); }
.dsr-card.featured:hover { box-shadow: 0 14px 40px rgb(124 58 237 / 20%); }
.dsr-card.featured h3 { color: var(--wp--preset--color--contrast); }
.dsr-card.featured p { color: var(--wp--preset--color--muted); }
.dsr-card.featured .ic { background: var(--wp--preset--color--base); }
.dsr-prob .dsr-card.featured .ic { color: rgb(144 97 249); }
.dsr-card.featured .dsr-badge { color: var(--green-text); border-color: var(--tint-line); background: transparent; }
.dsr-card.featured .dsr-more a { color: rgb(144 97 249); }
.dsr-card.featured .dsr-more a:hover { color: var(--wp--preset--color--cyan-dark); }

/* ── services hub (page 18) additions ──
   Four components the /services/ hub needs and no other page had. Named to
   avoid the existing dsr-guar (malware page, dark box) and dsr-price rules. */

/* price line inside a service card, sits under the h3 */
.dsr-srv-price { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .02em; color: var(--wp--preset--color--contrast); margin: 0 0 10px; }
.dsr-srv-price span { color: var(--wp--preset--color--muted); font-weight: 400; }
.dsr-card.featured .dsr-srv-price { color: var(--wp--preset--color--cyan-dark); }

/* guarantee cards: three promises, each with its terms attached. Light on
   purpose — the malware page's dark .dsr-guar box is a different component. */
.dsr-promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.dsr-promise .pc { background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 18px; padding: 28px; box-shadow: inset 0 3px 0 var(--wp--preset--color--green); }
.dsr-bg-base .dsr-promise .pc { background: var(--wp--preset--color--soft); }
.dsr-promise .pc .pk { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green-text); margin: 0 0 12px; }
.dsr-promise .pc h3 { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-card); letter-spacing: -.015em; color: var(--wp--preset--color--contrast); margin: 0 0 10px; line-height: 1.2; }
.dsr-promise .pc p { font-size: var(--fs-small); line-height: 1.7; color: var(--wp--preset--color--muted); margin: 0 0 12px; }
.dsr-promise .pc .pterm { font-size: var(--fs-caption); line-height: 1.6; color: var(--wp--preset--color--ink-2); border-top: 1px solid var(--wp--preset--color--line); padding-top: 12px; margin: 0; }
.dsr-promise .pc .pterm b { color: var(--wp--preset--color--contrast); font-weight: 600; }
@media (max-width: 900px) { .dsr-promise { grid-template-columns: 1fr; } }

/* verifiable source link on a testimonial: the one thing WP Buffs does that
   nobody else in the competitive set does. */
.dsr-tcard .tsrc { display: inline-block; margin-top: 8px; font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em; color: var(--green-text); text-decoration: none; }
.dsr-tcard .tsrc:hover { text-decoration: underline; }

/* freshness line under the final CTA */
.dsr-updated { margin: 34px 0 0; font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); letter-spacing: .04em; color: var(--wp--preset--color--muted); text-align: center; }

/* ── footer v2 (Wavespace / Design Monks style) ──
   Everything here is driven by native blocks in parts/footer.html, so the
   Site Editor can change every string, link, address and image.
   Link + heading typography is measured from designmonks.co, not guessed:
   links 16px/400, line-height 24px, letter-spacing .32px, #a3a3a3, 16px gap;
   headings 18px/700, sentence case (NOT mono uppercase), #fafafa, 24px below. */
.ds-footer { overflow: hidden; }

.ds-footer .ds-foot-h { font-family: var(--wp--preset--font-family--sans); font-size: var(--fs-lead); font-weight: 700; letter-spacing: normal; text-transform: none; color: #fafafa; margin: 0 0 24px; }
.ds-footer .ds-foot-links { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ds-footer .ds-foot-links li { margin: 0; }
.ds-footer .ds-foot-links a { font-family: var(--wp--preset--font-family--sans); font-size: var(--fs-body); font-weight: 400; line-height: 24px; letter-spacing: .32px; color: #a3a3a3; text-decoration: none; }
.ds-footer .ds-foot-links a:hover { color: var(--wp--preset--color--green); }

/* --- Footer brand column: reversed logo + one-paragraph description ------ */
.ds-footer .ds-foot-logo { margin: 0 0 20px; }
.ds-footer .ds-foot-logo img { width: 210px; height: auto; display: block; }
.ds-footer .ds-foot-desc {
	max-width: 46ch;
	margin: 0;
	font-size: var(--fs-body);
	line-height: 28px;
	letter-spacing: .32px;
	color: #a3a3a3;
}

/* --- Footer social row --------------------------------------------------
   Rendered by [crmteardown_social], which prints nothing at all when no
   profile URL has been saved. The :has guard then folds the empty column away
   instead of leaving a gap between the brand and Company columns. */
.ds-footer .ds-foot-social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ds-footer .ds-foot-social li { margin: 0; }
.ds-footer .ds-foot-social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.16);
	color: #d6d3e6;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.ds-footer .ds-foot-social a:hover,
.ds-footer .ds-foot-social a:focus-visible {
	background: var(--wp--preset--color--green);
	border-color: var(--wp--preset--color--green);
	color: #fff;
}
.ds-footer .ds-foot-social svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.ds-footer .wp-block-columns > .wp-block-column:not(:has(*)) { display: none; }
/* Keeps Company hard right whether the social column is showing or folded. */
.ds-footer .ds-foot-company { margin-left: auto; }

@media (max-width: 781px) {
	.ds-footer .ds-foot-desc { max-width: none; }
	.ds-footer .ds-foot-logo img { width: 180px; }
}

/* office cards */
.ds-foot-offices { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ds-foot-office { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 16px; padding: 22px 24px; }
.ds-foot-office .oc-country { display: flex; align-items: center; gap: 9px; font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-lead); letter-spacing: -.01em; color: #fff; margin: 0 0 8px; }
.ds-foot-office .oc-addr { font-size: var(--fs-small); line-height: 24px; letter-spacing: .32px; color: #a3a3a3; margin: 0; }
@media (max-width: 700px) { .ds-foot-offices { grid-template-columns: 1fr; } }

/* review / trust bar */
.ds-foot-trust { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 16px; padding: 20px 26px; }
.ds-foot-trust .tname { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-lead); letter-spacing: -.01em; color: #fff; margin: 0; }
.ds-foot-trust .tstars { font-size: var(--fs-small); letter-spacing: 3px; color: var(--wp--preset--color--green); margin: 0; }
.ds-foot-trust .tnote { font-size: var(--fs-small); line-height: 24px; letter-spacing: .32px; color: #a3a3a3; margin: 0; }
.ds-foot-trust .tcta a { font-size: var(--fs-small); font-weight: 600; letter-spacing: .32px; color: var(--wp--preset--color--green); text-decoration: none; }
.ds-foot-trust .tcta a:hover { text-decoration: underline; }

/* bottom bar */
.ds-footer .ds-foot-bottom p, .ds-footer .ds-foot-bottom a { font-size: var(--fs-small); line-height: 24px; letter-spacing: .32px; color: #a3a3a3; }

/* =======================================================================
 * Full-width sections butt up against each other
 *
 * `blockGap: 1.5rem` in theme.json reaches every top-level block as
 * `margin-block-start`, including the full-width sections. Each section
 * already sets its own top and bottom padding, so that 24px only ever
 * showed as a band of body white between two coloured sections: unnoticed
 * between two light ones, and a hard white stripe above the dark stats
 * band. Scoped to the full-width sections a page's post-content lays out;
 * `.ds-article-body`, where a blog post's own full-width blocks do want the
 * gap between them, is excluded by name.
 * ==================================================================== */
main > .alignfull,
main .wp-block-post-content:not(.ds-article-body) > .alignfull {
	margin-block-start: 0;
}

/* =======================================================================
 * .ds-pledge — the four terms on the dark band
 *
 * Was four loose numbers floating on the gradient with nothing holding
 * them: no heading above them, no edge around them, and the labels
 * wrapping to two lines under the wider ones. It reads as a panel now —
 * one translucent card, hairline dividers between the cells, the number
 * set in the display face at --fs-num and the label pinned to a fixed
 * baseline so all four line up whether the label wraps or not.
 * ==================================================================== */
/* The block's own grid layout is auto-fill at 240px, which lands on three
   columns at some widths and makes the divider rules below unreadable. Two
   class names outrank the single-class layout rule WordPress prints inline,
   so the column count is fixed here and the breakpoints stay predictable. */
.wp-block-group.ds-pledge { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .wp-block-group.ds-pledge { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .wp-block-group.ds-pledge { grid-template-columns: 1fr; } }

.ds-pledge {
	background: rgb(255 255 255 / 7%);
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: 20px;
	overflow: hidden;
	backdrop-filter: blur(2px);
}
.ds-pledge__item {
	padding: clamp(26px, 3vw, 34px) clamp(24px, 2.2vw, 30px);
	text-align: center;
	position: relative;
}
/* Dividers as insets rather than borders, so they stop short of the card's
   rounded corners instead of running into them. */
.ds-pledge__item + .ds-pledge__item::before {
	content: "";
	position: absolute;
	inset-block: 18%;
	inset-inline-start: 0;
	width: 1px;
	background: rgb(255 255 255 / 18%);
}
.ds-pledge__n {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: var(--fs-num);
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--cyan);
}
.ds-pledge-section > .is-layout-constrained > h2,
.ds-pledge-section > .is-layout-constrained > p {
	text-wrap: balance;
}
.ds-pledge__l {
	margin: 14px 0 0;
	font-size: var(--fs-small);
	line-height: 1.45;
	color: rgb(255 255 255 / 78%);
	text-wrap: balance;
}
/* Two per row before the dividers get too narrow to read between; the
   vertical rule on the first of each pair goes, a horizontal one arrives
   under the top row. */
@media (max-width: 900px) {
	.ds-pledge__item:nth-child(odd)::before { display: none; }
	.ds-pledge__item:nth-child(-n+2)::after {
		content: "";
		position: absolute;
		inset-inline: 12%;
		inset-block-end: 0;
		height: 1px;
		background: rgb(255 255 255 / 18%);
	}
}
@media (max-width: 520px) {
	.ds-pledge__item::before { display: none; }
	.ds-pledge__item:not(:last-child)::after {
		content: "";
		position: absolute;
		inset-inline: 12%;
		inset-block-end: 0;
		height: 1px;
		background: rgb(255 255 255 / 18%);
	}
}

/* Giant text wordmark, clipped by the bottom edge of the footer. Live text
   rather than an image: it scales to any viewport, needs no re-export, and
   dodges the cropped-source problem in CRMTeardown-Logo-W.
   The negative bottom margin is what pushes the glyphs off the edge. It has to
   be larger than it looks because line-height .8 already shrinks the line box;
   at -.16em there was still a black gap under the letters.
   Sized in vw so the word spans the 1220px container at desktop and shrinks
   with the viewport; .ds-footer already has overflow:hidden and 0 bottom
   padding, both of which this depends on. */
.ds-footer .ds-foot-wordmark {
	margin: clamp(34px,5vw,60px) 0 -.26em;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	/* Two things were keeping this on two lines.
	   The width: 5.16em is a Poppins figure and the footer sets Figtree.
	   Measured off assets/fonts/figtree-latin.woff2 at wght 700, "CRM TEARDOWN"
	   advances 8.242em, or 7.882em once the -.03em tracking comes off twelve
	   characters — half again as wide as the old number assumed, so at 236px
	   the word ran to about 1860px and broke after "CRM". 1220/7.882 = 154.8,
	   and the vw term is (100vw - 48px)/7.882, shaded down to 12.5 so every
	   viewport keeps a few pixels of air rather than landing on the edge.
	   The box: a plain paragraph in a constrained layout is capped at the
	   760px content size, which no font-size fits this word inside, so
	   `max-width: none` below lets it use the full 1220px container. nowrap
	   makes a fallback face clip at the footer's edge rather than wrap.
	   Re-measure both numbers if the word, the face or the tracking changes. */
	font-size: min(calc(12.5vw - 6.1px), 154px);
	white-space: nowrap;
	max-width: none;
	line-height: .8;
	letter-spacing: -.03em;
	text-transform: uppercase;
	text-align: center;
	user-select: none;
	background: linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(124,58,237,.30) 62%, rgba(124,58,237,.06) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
@media (max-width: 700px) { .ds-foot-wordmark { margin-bottom: -.2em; } }

/* ── about page: founder cards ──
   Two bio cards, one per founder, distinguished by the accent on the top
   border / avatar ring / role line (green for the first, cyan for the second
   via .is-cyan). .fava holds initials today; swapping in a real 74px photo
   only needs an <img> inside it — the object-fit rule below already handles it.
   Namespaced under .dsr-founder because .fava/.fname/.frole are short names. */
.dsr-founder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; }
@media (max-width: 900px) { .dsr-founder-grid { grid-template-columns: 1fr; } }

.dsr-founder { display: flex; flex-direction: column; background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 20px; padding: 34px 32px; box-shadow: inset 0 3px 0 var(--wp--preset--color--green); }
.dsr-founder.is-cyan { border-top-color: var(--wp--preset--color--cyan); }
.dsr-founder .dsr-founder-head { display: flex; gap: 18px; align-items: center; margin-bottom: 22px; }
.dsr-founder .fava { width: 92px; height: 92px; border-radius: 50%; flex: none; background: var(--wp--preset--color--green-tint); border: 2px solid var(--wp--preset--color--green); display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-card-lg); line-height: 1; color: var(--green-text); overflow: hidden; margin: 0; padding: 3px; }
.dsr-founder.is-cyan .fava { background: var(--wp--preset--color--cyan-tint); border-color: var(--wp--preset--color--cyan); color: var(--wp--preset--color--cyan-dark); }
/* Portraits load desaturated and come up in colour on hover, so the two cards
   read as one quiet system until you engage with one. The filter is on the img,
   not the figure, so the accent ring keeps its colour throughout. */
.dsr-founder .fava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; filter: grayscale(1); transition: filter .35s ease; }
.dsr-founder:hover .fava img, .dsr-founder .fava:focus-within img { filter: grayscale(0); }
@media (prefers-reduced-motion: reduce) { .dsr-founder .fava img { transition: none; } }
/* wp:image renders a <figure>, which carries a default margin the flex row would
   otherwise inherit. */
.dsr-founder figure.fava { margin: 0; }
.dsr-founder .fname { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-card); line-height: 1.15; letter-spacing: -0.02em; color: var(--wp--preset--color--contrast); margin: 0 0 5px; }
.dsr-founder .frole { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-text); margin: 0; }
.dsr-founder.is-cyan .frole { color: var(--wp--preset--color--cyan-dark); }
.dsr-founder p { font-size: var(--fs-small); line-height: 1.78; color: var(--wp--preset--color--ink-2); margin: 0 0 14px; }
.dsr-founder .fbio:last-of-type { margin-bottom: 24px; }

/* profile links: mono pills, tinted to the card's accent */
.dsr-founder .dsr-links { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--wp--preset--color--line); display: flex; flex-wrap: wrap; gap: 8px; }
.dsr-founder .dsr-links a { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); font-weight: 700; color: var(--green-text); text-decoration: none; border: 1px solid rgba(124,58,237,.4); padding: 7px 14px; border-radius: 999px; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.dsr-founder .dsr-links a:hover { background: var(--wp--preset--color--green); color: #ffffff; border-color: var(--wp--preset--color--green); }
.dsr-founder.is-cyan .dsr-links a { color: var(--wp--preset--color--cyan-dark); border-color: rgba(41,182,211,.42); }
.dsr-founder.is-cyan .dsr-links a:hover { background: var(--wp--preset--color--cyan); color: #0e0e10; border-color: var(--wp--preset--color--cyan); }

/* numbered step cards: same shell as .dsr-card, but the .ic chip carries a
   mono "01" instead of an emoji, and the middle card switches to cyan so the
   three read as a sequence rather than three of the same thing. */
.dsr-numgrid .dsr-card .ic { font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: var(--fs-small); color: var(--green-text); }
.dsr-numgrid .dsr-card:nth-child(2) .ic { background: var(--wp--preset--color--cyan-tint); color: var(--wp--preset--color--cyan-dark); }
.dsr-numgrid .dsr-card { padding: 30px 28px; }
.dsr-numgrid .dsr-card h3 { font-size: var(--fs-card); margin-bottom: 10px; }
.dsr-numgrid .dsr-card p { line-height: 1.72; }

/* the freshness line also has to win against .dsr-cta p when it sits inside
   the final CTA (as it does on /about-us/), which is a 2-class selector. */
.dsr-cta .dsr-updated { font-size: var(--fs-micro); line-height: 1.6; color: var(--wp--preset--color--muted); margin: 34px 0 0; }
/* inline links inside the light CTA's mono note need to read as links */
.dsr-cta .dsr-cta-note a { color: var(--green-text); text-decoration: underline; text-underline-offset: 2px; }
.dsr-cta .dsr-cta-note a:hover { color: var(--wp--preset--color--contrast); }

/* history note (/about/): deliberately the quietest block on the page. The
   facts are there for anyone who goes looking and out of the way for everyone
   else, so the section gets roughly half the usual dsr-sec padding. */
.dsr-histsec { padding: clamp(30px, 4vw, 46px) 0; }
.dsr-histsec .dsr-note { margin: 0 auto; max-width: 780px; }
.dsr-histsec .dsr-note strong { font-size: var(--fs-small); margin-bottom: 6px; }
.dsr-histsec .dsr-note p { font-size: var(--fs-small); line-height: 1.72; color: var(--wp--preset--color--muted); }

/* ── dsr-chrono: the hero panel on /about/ ──
   Replaces a flat four-row stat block. Three of the four facts were years, so
   the honest shape for them is a chronology, not a stat list — and that gives
   the motion something to mean: the rail draws downward through time and each
   node lands as the line reaches it. The last node is the present and keeps
   pulsing.
   Only used on /about/. .dsr-status (emergency, speed, seo, malware) is
   untouched.
   All motion lives inside prefers-reduced-motion:no-preference, matching the
   .ds-reveal pattern above — with motion reduced, everything is simply drawn
   in its final state. The panel carries .ds-reveal, so theme.js's existing
   IntersectionObserver supplies the .is-visible hook; no new JS. */
.dsr-chrono { background: var(--wp--preset--color--contrast); color: #fff; border-radius: 20px; padding: clamp(26px, 3vw, 34px); }
.dsr-chrono .st-title { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 22px; display: flex; align-items: center; gap: 10px; }
.dsr-chrono .st-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--green); box-shadow: 0 0 0 4px rgba(124,58,237,.22); flex: none; }

.dsr-chrono-list { position: relative; }
/* The rail is drawn as one segment per gap rather than a single line down the
   whole list, for two reasons: it terminates exactly at the last node instead
   of overshooting past "Today", and each segment can animate on its own, so
   the line visibly travels from node to node instead of wiping over them. */
.dsr-chrono-item:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 34px; bottom: -20px; width: 2px; background: linear-gradient(180deg, rgba(124,58,237,.9), rgba(124,58,237,.45)); border-radius: 2px; }

.dsr-chrono-item { position: relative; padding: 14px 0 16px 34px; }
.dsr-chrono-item + .dsr-chrono-item { border-top: 1px solid rgba(255,255,255,.08); }
/* the node */
/* box-sizing:border-box so the 2px border is inside the 14px — without it the
   ring renders 18px and its centre lands at 12px while the rail sits at 10px,
   so the line runs through the left edge of every node instead of its centre. */
.dsr-chrono-item::before { content: ""; box-sizing: border-box; position: absolute; left: 3px; top: 20px; width: 14px; height: 14px; border-radius: 50%; background: var(--wp--preset--color--contrast); border: 2px solid var(--wp--preset--color--green); }
.dsr-chrono-item.is-now::before { background: var(--wp--preset--color--green); border-color: var(--wp--preset--color--green); }

.dsr-chrono .cyear { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: var(--fs-card-lg); line-height: 1; color: #fff; margin: 0 0 6px; letter-spacing: -.01em; }
.dsr-chrono .is-now .cyear { color: var(--wp--preset--color--green); }
.dsr-chrono .clabel { font-size: var(--fs-caption); line-height: 1.5; color: rgba(255,255,255,.78); margin: 0 0 4px; }
.dsr-chrono .cnote { font-size: var(--fs-micro); line-height: 1.55; color: rgba(255,255,255,.46); margin: 0; }

.dsr-chrono-foot { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); line-height: 1.6; letter-spacing: .04em; color: rgba(255,255,255,.46); }

@media (prefers-reduced-motion: no-preference) {
	/* Node lands, then its segment draws down to the next node, then that node
	   lands. Segment delays sit .05s after their own node and run for .25s, so
	   the line arrives just as the next dot pops. Retune all three together. */
	.dsr-chrono-item::after { transform: scaleY(0); transform-origin: top; transition: transform .25s linear; }
	.dsr-chrono.is-visible .dsr-chrono-item::after { transform: scaleY(1); }

	.dsr-chrono-item::before { transform: scale(0); transition: transform .42s cubic-bezier(.34,1.56,.64,1); }
	.dsr-chrono-item > * { opacity: 0; transform: translateY(9px); transition: opacity .5s ease, transform .5s ease; }
	.dsr-chrono.is-visible .dsr-chrono-item::before { transform: scale(1); }
	.dsr-chrono.is-visible .dsr-chrono-item > * { opacity: 1; transform: none; }

	.dsr-chrono.is-visible .dsr-chrono-item:nth-child(1)::before, .dsr-chrono.is-visible .dsr-chrono-item:nth-child(1) > * { transition-delay: .20s; }
	.dsr-chrono.is-visible .dsr-chrono-item:nth-child(2)::before, .dsr-chrono.is-visible .dsr-chrono-item:nth-child(2) > * { transition-delay: .45s; }
	.dsr-chrono.is-visible .dsr-chrono-item:nth-child(3)::before, .dsr-chrono.is-visible .dsr-chrono-item:nth-child(3) > * { transition-delay: .70s; }
	.dsr-chrono.is-visible .dsr-chrono-item:nth-child(4)::before, .dsr-chrono.is-visible .dsr-chrono-item:nth-child(4) > * { transition-delay: .95s; }
	.dsr-chrono.is-visible .dsr-chrono-item:nth-child(1)::after { transition-delay: .25s; }
	.dsr-chrono.is-visible .dsr-chrono-item:nth-child(2)::after { transition-delay: .50s; }
	.dsr-chrono.is-visible .dsr-chrono-item:nth-child(3)::after { transition-delay: .75s; }

	.dsr-chrono-foot { opacity: 0; transition: opacity .5s ease 1.15s; }
	.dsr-chrono.is-visible .dsr-chrono-foot { opacity: 1; }

	/* the present keeps breathing once the line has reached it */
	.dsr-chrono.is-visible .dsr-chrono-item.is-now::before { animation: dsr-chrono-pulse 2.4s ease-out 1.4s infinite; }
	@keyframes dsr-chrono-pulse {
		0%   { box-shadow: 0 0 0 0 rgba(124,58,237,.5); }
		70%  { box-shadow: 0 0 0 11px rgba(124,58,237,0); }
		100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); }
	}
}

/* ── hero headline reveal ──
   theme.js wraps every word of .dsr-htitle in .ds-w > i and gives all the
   words that landed on one visual line the same --d, so the headline rises a
   line at a time. Per word rather than per line because the headline carries
   <mark> elements that colour it — see the note in theme.js.

   Scoped to .ds-hsplit / .dsr-hero.is-in, both added by the script, so a JS
   failure leaves an ordinary headline rather than a hidden one. Deliberately
   not scoped to .ds-motion: that class is set by the section-reveal block
   further down, and depending on it would make this animation's start depend
   on the order two independent blocks happen to run in.

   The overflow box is padded by .12em and pulled back by the same amount, or
   the mask would clip the descenders on g, y and p. */
@media (prefers-reduced-motion: no-preference) {
	.ds-hsplit .ds-w { display: inline-block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
	.ds-hsplit .ds-w > i { display: inline-block; font-style: normal; transform: translateY(115%); transition: transform .72s cubic-bezier(.22,.61,.36,1) var(--d, 0ms); }
	.dsr-hero.is-in .ds-hsplit .ds-w > i { transform: none; }

	.dsr-hero .ds-hfade { opacity: 0; transform: translateY(12px); transition: opacity .55s ease var(--d, 0ms), transform .55s cubic-bezier(.22,.61,.36,1) var(--d, 0ms); }
	.dsr-hero.is-in .ds-hfade { opacity: 1; transform: none; }
}

/* ── section scroll reveal (dsr-* pages) ──
   theme.js tags the targets with .ds-r, writes a per-element --d delay, and
   flips .is-revealed on the section. Everything below is scoped to
   body.ds-motion, which that script adds only after it has successfully run —
   so a JS failure leaves the page fully visible rather than blank.
   Motion sits inside prefers-reduced-motion:no-preference, matching .ds-reveal
   and .dsr-chrono. */
@media (prefers-reduced-motion: no-preference) {
	.ds-motion .ds-r { opacity: 0; transform: translateY(14px); transition: opacity .55s ease var(--d, 0ms), transform .55s cubic-bezier(.22,.61,.36,1) var(--d, 0ms); }
	.ds-motion .is-revealed .ds-r { opacity: 1; transform: none; }

	/* Process steps get the /about/ chronology treatment: the number chip lands
	   with a little overshoot, then the connector draws down to the next step.
	   The rail is per-gap, so it stops at the last step instead of running past
	   it — see .dsr-chrono-item::after for the same reasoning. */
	.ds-motion .dsr-timeline .dsr-step .num { transform: scale(.72); transition: transform .42s cubic-bezier(.34,1.56,.64,1) var(--d, 0ms), background-color .2s ease, border-color .2s ease, color .2s ease; }
	.ds-motion .is-revealed .dsr-timeline .dsr-step .num { transform: scale(1); }
	.ds-motion .dsr-timeline .dsr-step::after { transform: scaleY(0); transition: transform .3s linear var(--d, 0ms); }
	.ds-motion .is-revealed .dsr-timeline .dsr-step::after { transform: scaleY(1); }
}

/* The connector itself is not motion, so it renders for everyone, including
   reduced-motion users. 21px puts it on the centre line of the 44px .num. */
.ds-motion .dsr-timeline .dsr-step { position: relative; }
/* .num is 44px tall and sits 24px down (the step's own padding), so it ends
   at 68px. Starting at 74px and running to -18px leaves a 6px gap under this
   chip and 6px above the next one — the -18px is what carries the line across
   the step separator into the following step, which a positive value cannot
   do. Retune both if .dsr-step padding or .num size changes. */
.ds-motion .dsr-timeline .dsr-step:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 74px; bottom: -18px; width: 2px; background: linear-gradient(180deg, rgba(124,58,237,.75), rgba(124,58,237,.3)); border-radius: 2px; transform-origin: top; }

/* =========================================================================
 * Blog reading rail — contents, CTA, share (inc/blog-sidebar.php)
 *
 * The rail is a real grid column rather than a float, so the article keeps its
 * own measure and the two never fight over width. Below 1080px the grid
 * collapses to one column and the rail moves above the article, where the
 * contents list turns into a collapsed disclosure so it costs one line
 * instead of a screenful before the reader reaches the first paragraph.
 * ====================================================================== */
.ds-post-wrap {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}
/* The article column had its own outer max-width when it was alone on the
   page; inside the grid the column already bounds it. */
.ds-post-wrap .ds-post { max-width: none; margin: 0; min-width: 0; }

.ds-side {
	position: sticky;
	/* --ds-headerh is measured by theme.js; the fallback covers first paint. */
	top: calc(var(--ds-headerh, 78px) + 24px);
	align-self: start;
	max-height: calc(100vh - var(--ds-headerh, 78px) - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding-right: 2px;
}

/* ---- Table of contents ---- */
.ds-toc {
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: 20px 20px 14px;
	background: var(--wp--preset--color--base);
}
.ds-toc-h {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--fs-lead);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 12px;
}
.ds-toc-toggle { display: none; }
.ds-toc-list { list-style: none; margin: 0; padding: 0; }
.ds-toc-i { margin: 0; }
.ds-toc-i a {
	display: flex;
	gap: 8px;
	padding: 7px 0;
	font-size: var(--fs-small);
	line-height: 1.45;
	color: var(--wp--preset--color--ink-2);
	text-decoration: none;
	transition: color .15s ease;
}
/* The arrow is decorative, so it is drawn rather than written into the text. */
.ds-toc-i a::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	margin-top: .45em;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .45;
	transition: opacity .15s ease;
}
.ds-toc-l3 a { padding-left: 16px; font-size: var(--fs-caption); color: var(--wp--preset--color--muted); }
.ds-toc-i a:hover { color: var(--green-text); }
.ds-toc-i a:hover::before { opacity: 1; }
.ds-toc-i.is-current a { color: var(--green-text); font-weight: 600; }
.ds-toc-i.is-current a::before { opacity: 1; }

/* Long posts run to a dozen headings, which turns the rail into a wall and
   pushes the CTA off screen. Five are shown; the rest sit behind the toggle.
   They stay in the DOM (not display:none on load) so the anchors are still
   crawlable and so JS can reveal one when the reader scrolls into it. */
.ds-toc-i.is-extra { display: none; }
.ds-toc.is-expanded .ds-toc-i.is-extra { display: block; }
.ds-toc-more {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 9px 0 2px;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	background: none;
	text-align: left;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
}
.ds-toc-more:hover { color: var(--wp--preset--color--contrast); }
/* The reader is inside one of the hidden entries. The toggle says so with a
   dot instead of the list opening itself: expanding is the reader's call, and
   a rail that grows mid-scroll shifts the CTA underneath it. */
.ds-toc:not(.is-expanded) .ds-toc-more.is-beyond { color: var(--green-text); }
.ds-toc:not(.is-expanded) .ds-toc-more.is-beyond::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--green);
	vertical-align: 1px;
}
.ds-toc-more .ds-toc-less { display: none; }
.ds-toc.is-expanded .ds-toc-more .ds-toc-less { display: inline; }
.ds-toc.is-expanded .ds-toc-more .ds-toc-show { display: none; }

/* ---- Sidebar CTA ---- */
.ds-sidecta {
	border-radius: 16px;
	padding: 22px;
	background: linear-gradient(160deg, #16103c 0%, #141416 58%, #12251a 100%);
	color: #fff;
}
.ds-sidecta-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green);
	margin: 0 0 10px;
}
.ds-sidecta-h {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: var(--fs-card);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0 0 10px;
}
.ds-sidecta-p {
	font-size: var(--fs-caption);
	line-height: 1.6;
	color: rgba(255, 255, 255, .68);
	margin: 0 0 18px;
}
.ds-sidecta-btn {
	display: inline-block;
	background: var(--wp--preset--color--green);
	color: #ffffff;
	font-weight: 700;
	font-size: var(--fs-small);
	padding: 12px 22px;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .15s ease, transform .15s ease;
}
/* Never to black on a dark card — it would read as a disabled button. */
.ds-sidecta-btn:hover { background: #96e02c; color: #16103c; transform: translateY(-1px); }

/* ---- Share row ---- */
.ds-share-h {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 12px;
}
.ds-share-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ds-share-b {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.ds-share-b:hover {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: #fff;
}
.ds-copied {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--fs-micro);
	background: var(--wp--preset--color--contrast);
	color: #fff;
	padding: 5px 9px;
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}
.ds-copy.is-copied .ds-copied { opacity: 1; }

/* =========================================================================
 * Summarise-with-AI hand-off
 * ====================================================================== */
/* Full column width and flush left. Everything else in the article column —
   title, author, body, the closing CTA — runs the full 874px; this box was the
   only thing carrying a 720px max-width with auto margins, which pushed it 52px
   in from the text above and below it. */
.ds-aibox {
	max-width: none;
	margin: 30px 0 0;
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: var(--wp--preset--color--soft);
	padding: 22px 24px;
}
.ds-aibox-h {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--fs-lead);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 14px;
}
.ds-aibox-row { display: flex; flex-wrap: wrap; gap: 10px; }
/* flex-grow rather than a fixed pill width: six labels of very different
   lengths ("Grok" against "Perplexity") left a ragged gap at the right end of
   the row. Growing them to share the leftover space fills the row exactly, and
   any row they wrap onto fills too. */
.ds-aibtn {
	display: inline-flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 11px 16px;
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.005em;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.ds-aibtn svg { flex: none; width: 19px; height: 19px; opacity: .78; }
.ds-aibtn:hover {
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
	transform: translateY(-1px);
}
.ds-aibtn:hover svg { opacity: 1; }

/* =========================================================================
 * Rail: one column below 1080px
 * ====================================================================== */
@media (max-width: 1080px) {
	.ds-post-wrap { grid-template-columns: 1fr; gap: 28px; }
	/* display:contents dissolves the aside so its three children become flex
	   items of .ds-post-wrap directly. That is what lets the CTA and share row
	   sit *below* the article on narrow screens using `order` alone.
	   theme.js used to achieve the same thing by moving those two blocks into
	   the article after load, which shifted everything under them and cost
	   0.33 CLS on every blog post — a 98 desktop score but 80 on mobile. */
	.ds-side { display: contents; }
	.ds-toc, .ds-sidecta, .ds-share {
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}
	.ds-toc     { order: -1; }
	.ds-post    { order: 0; }
	.ds-sidecta { order: 1; }
	.ds-share   { order: 2; }
	/* Contents collapses to a single tappable line above the article. */
	.ds-toc { padding: 0; border-radius: 14px; overflow: hidden; }
	.ds-toc-h { display: none; }
	.ds-toc-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 15px 18px;
		border: 0;
		background: var(--wp--preset--color--base);
		font-family: var(--wp--preset--font-family--sans);
		font-size: var(--fs-small);
		font-weight: 700;
		color: var(--wp--preset--color--contrast);
		cursor: pointer;
	}
	.ds-toc-toggle::after {
		content: "";
		width: 9px;
		height: 9px;
		border-bottom: 1.8px solid currentColor;
		border-right: 1.8px solid currentColor;
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform .2s ease;
	}
	.ds-toc-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
	.ds-toc-list { max-height: 0; overflow: hidden; padding: 0 18px; transition: max-height .25s ease, padding .25s ease; }
	.ds-toc.is-open .ds-toc-list { max-height: 60vh; overflow-y: auto; padding: 4px 18px 14px; }
	/* The whole list already sits behind the Contents disclosure here, so a
	   second "see more" inside it is one tap too many — opening shows all. */
	.ds-toc-more { display: none; }
	.ds-toc-i.is-extra { display: block; }
	/* Contents stays above the article; the CTA and the share row are moved
	   below it by theme.js, because asking for the click before the first
	   paragraph is asking too early — and mobile is where sharing happens,
	   so hiding the row instead was not an option. */
	.ds-post-wrap { display: flex; flex-direction: column; }
	.ds-side { order: -1; }
	/* With the rail's audit card moved down here, the article's own closing CTA
	   would be the second ask in a row. The dark card is the more specific of
	   the two and it carries the share row with it, so the generic one goes.
	   Desktop keeps both — there they are in separate columns, not stacked. */
	.ds-post-wrap .ds-article-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ds-toc-list, .ds-toc-toggle::after, .ds-aibtn, .ds-sidecta-btn { transition: none; }
}

/* =========================================================================
 * Contact page — route cards, form/calendar split, booking panel
 * ====================================================================== */

.dsr-badge-red { background: #fdeaea !important; color: #b3341a !important; }

.ds-book { border: 1.5px solid var(--wp--preset--color--line); border-radius: 20px; background: var(--wp--preset--color--base); overflow: hidden; }
.ds-calendly { width: 100%; }
/* Calendly blocked, offline, or refused: say so instead of leaving a tall
   empty box that reads as a broken page. */
.ds-calendly.is-failed::after {
	content: "The booking calendar could not load. Email hello@crmteardown.com and we will send you times.";
	display: block; padding: 26px; font-size: var(--fs-small); line-height: 1.6;
	color: var(--wp--preset--color--muted);
}
.ds-book--fallback { padding: clamp(22px, 2.6vw, 30px); }
.ds-book-note { font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-text); margin: 0 0 10px; }
.ds-book-sub { font-size: var(--fs-small); line-height: 1.6; color: var(--wp--preset--color--muted); margin: 0 0 20px; }

@media (max-width: 900px) {
	.dsr-contact-split { grid-template-columns: 1fr; gap: 14px; align-items: start; }
	/* Stacked, the second heading would sit far from its panel, so each
	   heading pair collapses into the panel row it belongs to. */
	.dsr-contact-split:not(.dsr-contact-split--panels) { display: none; }
	.dsr-contact-split--panels { gap: 40px; }
	.dsr-contact-split--panels .dsr-contact-form::before { content: "Send a message"; }
	.dsr-contact-split--panels .dsr-contact-book::before { content: "Book a 30 minute call"; }
	.dsr-contact-split--panels > div::before {
		display: block; margin: 0 0 14px;
		font-family: var(--wp--preset--font-family--display); font-weight: 900;
		font-size: var(--fs-card); letter-spacing: -0.015em;
		color: var(--wp--preset--color--contrast);
	}
}

/* The one-line price note that replaced the closing CTA on /contact/. */
.dsr-contact-note {
	margin: 26px 0 0;
	padding-bottom: clamp(56px, 7vw, 88px);
	font-size: var(--fs-small);
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}
.dsr-contact-note a { color: var(--green-text); text-decoration: underline; text-underline-offset: 2px; }
/* The split above it already pays the section's bottom padding; without this
   the two stack and leave a gap the size of an empty section. */
.dsr-contact-split--panels { padding-bottom: 0; }

/* The one-line price note that replaced the closing CTA on /contact/. */
.dsr-contact-note {
	margin: 26px 0 0;
	padding-bottom: clamp(56px, 7vw, 88px);
	font-size: var(--fs-small);
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}
.dsr-contact-note a { color: var(--green-text); text-decoration: underline; text-underline-offset: 2px; }
/* The split above it already pays the section's bottom padding; without this
   the two stack and leave a gap the size of an empty section. */
.dsr-contact-split--panels { padding-bottom: 0; }

/* Emergency line, above the H1 on /contact/. One row instead of a card, so it
   costs ~50px of the first fold rather than a whole grid. */
.dsr-emergency {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 26px;
	padding: 12px 18px;
	border: 1.5px solid rgba(179, 52, 26, .28);
	border-radius: 999px;
	background: #fdeaea;
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease;
}
.dsr-emergency:hover { border-color: #b3341a; transform: translateY(-1px); }
.dsr-emergency-tag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: #b3341a;
}
.dsr-emergency-txt { font-size: var(--fs-small); font-weight: 600; color: var(--wp--preset--color--contrast); }
.dsr-emergency-arrow { margin-left: auto; font-size: var(--fs-lead); color: #b3341a; }

/* The hero holds the form now, so it cannot keep the hero's tall padding or
   the 540px measure that the sub-headline uses on service pages. */
.dsr-contact-hero { padding-top: clamp(28px, 3vw, 40px); }
/* Two thirds of the space above the form was the headline. A contact page is a
   utility page; 62px of display type here only pushed the fields down, so this
   H1 drops to the section-heading step the rest of the site uses for h2. */
.dsr-contact-hero h1 { font-size: var(--fs-h2); margin-bottom: 12px; }
/* Wide enough that the sub stays on one line down to about 1200px. */
.dsr-contact-hero .dsr-hsub { max-width: 820px; margin-bottom: 30px; }
.dsr-contact-hero .dsr-contact-split--panels { margin-top: 16px; }
@media (max-width: 900px) {
	.dsr-emergency-arrow { margin-left: 0; }
}

/* ---- Booking card, popup mode -------------------------------------- */
.ds-book--popup { display: flex; flex-direction: column; }
.ds-book-facts { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ds-book-facts li { position: relative; padding-left: 28px; font-size: var(--fs-small); line-height: 1.55; color: var(--wp--preset--color--ink-2); }
.ds-book-facts li::before {
	content: "";
	position: absolute; left: 2px; top: .42em;
	width: 11px; height: 6px;
	border-left: 2px solid var(--wp--preset--color--green-dark);
	border-bottom: 2px solid var(--wp--preset--color--green-dark);
	transform: rotate(-45deg);
}
/* Matches `is-style-brand` on a light section, token for token: the values come
   from theme.json's button element (16px, 700, uppercase, .02em, 1.5px radius
   999px) so this button and every other CTA on the site are one component.
   The hard 3px offset shadow this used to carry was retired from the light
   buttons and only survives on dark sections, in white at 55%. */
.ds-book-btn {
	align-self: flex-start;
	border: 1.5px solid var(--wp--preset--color--green);
	background: var(--wp--preset--color--green);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 17px 34px;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* Hover is the deeper green the rest of the site moved to, not black —
   `.ds-form__submit` right next to it on this page does exactly this. */
.ds-book-btn:hover,
.ds-book-btn:focus {
	background: var(--green-text);
	color: #ffffff;
	border-color: var(--green-text);
}
.ds-book-alt { margin: 16px 0 0; font-size: var(--fs-caption); color: var(--wp--preset--color--muted); }
.ds-book-alt a { color: var(--green-text); text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================================
 * Contact hero — argument left, form right, tool logos underneath
 * ====================================================================== */
.dsr-contact-hero { padding-top: clamp(30px, 3.4vw, 44px); padding-bottom: 0; background: var(--wp--preset--color--soft); }
/* Three children, not two: the copy and the booking card are separate cells so
   that on one column the form can slot between them. Stacked in DOM order the
   form landed 849px down a phone screen, behind the whole left rail. */
.dsr-contact-cols { display: grid; grid-template-columns: 1fr 1.05fr; column-gap: clamp(32px, 4.5vw, 64px); align-items: start; }
.dsr-contact-copy, .dsr-contact-booking, .dsr-contact-right { min-width: 0; }
.dsr-contact-copy    { grid-column: 1; grid-row: 1; }
.dsr-contact-booking { grid-column: 1; grid-row: 2; margin-top: 30px; }
.dsr-contact-right   { grid-column: 2; grid-row: 1 / span 2; }

/* The second line is the same sentence continuing, so it stays inside the h1
   and only changes weight and colour. */
.dsr-contact-hero h1 { font-size: var(--fs-h2); line-height: 1.1; margin: 0 0 14px; }
.dsr-contact-lead { margin: 0 0 26px; font-size: var(--fs-lead); line-height: 1.6; color: var(--wp--preset--color--ink-2); max-width: 30em; }
/* The lead-in of each point is the claim; the rest is the qualifier. */
.dsr-checkpoints li strong { color: var(--wp--preset--color--contrast); font-weight: 700; }

.dsr-checkpoints { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.dsr-checkpoints li { position: relative; padding-left: 32px; font-size: var(--fs-small); line-height: 1.6; color: var(--wp--preset--color--ink-2); }
.dsr-checkpoints li::before {
	content: "";
	position: absolute; left: 0; top: .1em;
	width: 19px; height: 19px; border-radius: 5px;
	background: var(--wp--preset--color--contrast);
}
.dsr-checkpoints li::after {
	content: "";
	position: absolute; left: 5px; top: .48em;
	width: 9px; height: 5px;
	border-left: 2px solid #fff; border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}
.dsr-emergency-line { margin: 0; font-size: var(--fs-caption); color: var(--wp--preset--color--muted); }
.dsr-emergency-line a { color: #b3341a; text-decoration: underline; text-underline-offset: 2px; }


/* ---- Booking card (left column) ------------------------------------
 * White, with the green top rule that .dsr-founder uses. That is the site's
 * other card with faces on it, so the two read as the same object in two
 * places. Earlier passes tried solid black and then a green-to-cyan tint;
 * both sat outside the design rather than in it.
 * ------------------------------------------------------------------- */
.dsr-bookcard {
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 20px;
	padding: 28px;
	box-shadow: inset 0 3px 0 var(--wp--preset--color--green);
}
/* .ds-book carries its own card when the widget stands alone elsewhere;
   inside this one that surface has to go. */
.dsr-bookcard .ds-book { border: 0; border-radius: 0; background: none; overflow: visible; }
.dsr-bookcard .bc-faces { display: flex; margin: 0 0 18px; }
.dsr-bookcard .bc-faces img {
	width: 46px; height: 46px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	border: 2px solid var(--wp--preset--color--base);
	background: var(--wp--preset--color--soft);
}
/* Overlap, so two people read as one team rather than two portraits. */
.dsr-bookcard .bc-faces img + img { margin-left: -14px; }
.dsr-bookcard .bc-title {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: var(--fs-card);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
}
.dsr-bookcard .bc-sub { margin: 0 0 22px; font-size: var(--fs-caption); line-height: 1.6; color: var(--wp--preset--color--muted); }

/* Full width inside the card; everything else is inherited from .ds-book-btn
   above, which is the site's standard brand button. */
.dsr-bookcard .ds-book-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 17px 26px;
}
/* green-dark measures 2.87:1 on white, so the secondary link stays ink. */
.dsr-bookcard .ds-book-alt { text-align: center; margin-top: 14px; }
.dsr-bookcard .ds-book-alt a { color: var(--wp--preset--color--ink-2); }
.dsr-bookcard .ds-book-alt a:hover { color: var(--wp--preset--color--contrast); }

/* ---- Form card (right column) -------------------------------------- */
.dsr-contact-right .ds-form { background: var(--wp--preset--color--base); border: 1.5px solid var(--wp--preset--color--line); border-radius: 20px; padding: clamp(24px, 2.8vw, 34px); }

/* ---- Tool logos ----------------------------------------------------- */
.dsr-logos { margin-top: clamp(48px, 6vw, 72px); }
.dsr-logos-h { margin: 0 0 18px; font-family: var(--wp--preset--font-family--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.dsr-logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.dsr-logo-card {
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: 24px 18px;
	text-align: center;
	transition: border-color .15s ease, transform .15s ease;
}
.dsr-logo-card:hover { border-color: var(--wp--preset--color--contrast); transform: translateY(-2px); }
.dsr-logo-card img {
	width: 56px; height: 56px;
	object-fit: contain;
	margin: 0 auto 14px;
	display: block;
	/* Grey until the card is hovered. The brightness lift stops the darker
	   marks (Tutor's navy square) from turning into a black block. */
	filter: grayscale(1) brightness(1.06);
	transition: filter .3s ease;
}
.dsr-logo-card:hover img { filter: grayscale(0); }
.dsr-logo-card p { margin: 0; font-size: var(--fs-caption); font-weight: 600; line-height: 1.4; color: var(--wp--preset--color--ink-2); }

@media (prefers-reduced-motion: reduce) {
	.dsr-logo-card, .dsr-logo-card img { transition: none; }
}
@media (max-width: 980px) {
	/* Copy, then the form, then the booking card. */
	.dsr-contact-cols { display: flex; flex-direction: column; gap: 30px; }
	.dsr-contact-copy    { order: 1; }
	.dsr-contact-right   { order: 2; }
	.dsr-contact-booking { order: 3; }
	.dsr-logo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
	.dsr-logo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.dsr-logo-card { padding: 18px 12px; }
}

/* =========================================================================
 * Website audit page — hero form card (v1.33.0)
 *
 * The audit hero puts the form in the right column instead of a quote or a
 * status panel, because the whole offer is "send us an address" and the two
 * competitors both make the reader scroll past a screen of argument to reach
 * their form. Sitting it beside the H1 keeps it in the first fold.
 * ====================================================================== */
.dsr-hero-right { align-self: start; }

.dsr-auditcard {
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 20px;
	padding: 28px;
	box-shadow: 0 18px 40px -28px rgba(22,16,60, .35);
	position: relative;
	overflow: hidden;
}
/* Green top accent as a clipped strip — a border-top of a different width
   leaves an ugly diagonal seam where it meets the thinner side borders at the
   radius; this follows the corner cleanly instead. */
.dsr-auditcard::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--wp--preset--color--green);
}
.dsr-auditcard .ac-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--fs-micro);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--green-text);
	margin: 0 0 8px;
}
.dsr-auditcard .ac-title {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: var(--fs-lead);
	line-height: 1.32;
	margin: 0 0 20px;
	color: var(--wp--preset--color--contrast);
}
.dsr-auditcard .ac-note {
	margin: 14px 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--fs-caption);
	color: var(--wp--preset--color--muted);
	text-align: center;
}

/* Lean form: three fields, labels visible (the full form hides them). */
.ds-form-lean { display: flex; flex-direction: column; gap: 15px; }
.ds-form-lean .ds-field { margin: 0; }
.ds-form-lean label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--fs-micro);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 7px;
}
.ds-form-lean .ds-opt { text-transform: none; letter-spacing: 0; color: #a2a29a; }
.ds-form-lean input,
.ds-form-lean textarea {
	width: 100%;
	font-family: inherit;
	font-size: var(--fs-small);
	padding: 13px 15px;
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	color: inherit;
	resize: vertical;
}
.ds-form-lean input::placeholder,
.ds-form-lean textarea::placeholder { color: #a8a89f; }
.ds-form-lean input:focus,
.ds-form-lean textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--green);
	box-shadow: 0 0 0 3px rgba(124,58,237, .18);
}
.ds-form-lean .ds-form__actions { margin-top: 2px; }
.ds-form-lean .ds-form__submit { width: 100%; text-align: center; }
.ds-form-lean .ds-form__status:empty { display: none; }

@media (max-width: 900px) {
	.dsr-auditcard { margin-top: 30px; }
}

/* -------------------------------------------------------------------------
 * FAQ on a white section (v1.34.0)
 *
 * The accordion rows are white cards with no border, which reads well on the
 * soft ground every other service page gives them. On a `dsr-bg-base` section
 * they have no edges at all and the accordion falls apart into loose lines of
 * text with a green plus floating on the right.
 *
 * Same fix as dsr-cmptable and dsr-prooftable got: draw the edge, and use
 * #cfc9e6 rather than --line, which is about 1.2:1 on white and invisible.
 * Scoped to `.dsr-bg-base` so no existing page changes; all nine service pages
 * put their FAQ on soft today.
 * ---------------------------------------------------------------------- */
.dsr-bg-base .ds-faq .wp-block-details {
	border: 1.5px solid #cfc9e6;
}
.dsr-bg-base .ds-faq .wp-block-details[open] {
	border-color: var(--wp--preset--color--contrast);
}

/* =======================================================================
 * Hero right-hand panel, light treatment (v1.35.0)
 *
 * The service heroes each put a data panel beside the H1: a customer quote
 * (maintenance, security, woocommerce), a stat readout (emergency, speed,
 * seo, custom development, services hub) or a terminal log (malware). All
 * three were black cards sitting on the soft hero ground, which turned the
 * top of every page into a heavy dark slab and pulled the eye away from the
 * headline and the buttons.
 *
 * The audit page proved the lighter version reads better: a white card with
 * a green top rule, the same shell the form card uses. These rules give the
 * other three panels that shell.
 *
 * Opt-in through `.is-light` rather than restyling `.dsr-status` and friends
 * outright, because the same classes appear elsewhere. The malware page has
 * a second `.dsr-quote` further down as a testimonial, and the home page
 * hero keeps its dark panel for now. Adding the class in the block markup is
 * the switch; nothing changes for a panel that does not carry it.
 * ======================================================================= */

/* Shared shell, identical to .dsr-auditcard. */
.dsr-quote.is-light,
.dsr-hero .dsr-status.is-light,
.dsr-hero .dsr-console.is-light {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink-2);
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 20px;
	/* Green top accent as an inset shadow, not a 3px border-top: a differing
	   border width leaves a diagonal seam where it meets the 1.5px sides at the
	   radius. The inset shadow follows the rounded corner cleanly. (::before is
	   taken by the quote glyph on .dsr-quote, so a pseudo-element is out here.) */
	box-shadow: inset 0 3px 0 var(--wp--preset--color--green), 0 18px 40px -28px rgba(22,16,60, .35);
}
.dsr-quote.is-light,
.dsr-hero .dsr-status.is-light { padding: 28px; }

/* --- Quote ------------------------------------------------------------ */
.dsr-quote.is-light::before {
	color: var(--wp--preset--color--green);
	opacity: .32;
	font-size: 62px;
	top: 12px;
	left: 24px;
}
.dsr-quote.is-light p.q {
	color: var(--wp--preset--color--ink-2);
	margin: 44px 0 18px;
}
.dsr-quote.is-light .qa { color: var(--wp--preset--color--muted); }
.dsr-quote.is-light .qa b,
.dsr-quote.is-light .qa strong {
	color: var(--green-text);
	font-weight: 600;
}
.dsr-quote.is-light .stars { color: #96690a; } /* #c08a12 was 3.05:1 on white */

/* --- Status readout --------------------------------------------------- */
.dsr-hero .dsr-status.is-light .st-title {
	color: var(--green-text);
	letter-spacing: .13em;
}
.dsr-hero .dsr-status.is-light .st-stat { border-bottom: 1px solid var(--wp--preset--color--line); }
.dsr-hero .dsr-status.is-light .st-stat:last-child { border-bottom: none; }
.dsr-hero .dsr-status.is-light .st-stat .l { color: var(--wp--preset--color--ink-2); }
.dsr-hero .dsr-status.is-light .st-stat .v { color: var(--wp--preset--color--contrast); }
.dsr-hero .dsr-status.is-light .st-stat .v.g { color: var(--green-text); }
.dsr-hero .dsr-status.is-light .st-stat .s { color: var(--wp--preset--color--muted); }

/* --- Console ---------------------------------------------------------- */
/* Reads as a light editor pane. The dot colours survive; everything that
   carries words is darkened so it clears 4.5:1 on white. */
.dsr-hero .dsr-console.is-light { border-top-width: 3px; overflow: hidden; }
.dsr-hero .dsr-console.is-light .cbar {
	background: var(--wp--preset--color--soft);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.dsr-hero .dsr-console.is-light .cbar .r { background: #d0574c; }
.dsr-hero .dsr-console.is-light .cbar .y { background: #d69a1f; }
.dsr-hero .dsr-console.is-light .cbar .g { background: #4aa87a; }
.dsr-hero .dsr-console.is-light .cbar .ct { color: var(--wp--preset--color--muted); }
.dsr-hero .dsr-console.is-light .cbody { color: var(--wp--preset--color--ink-2); }
.dsr-hero .dsr-console.is-light .cbody p { color: var(--wp--preset--color--ink-2); }
.dsr-hero .dsr-console.is-light .cbody .cx { color: #c0392e; }
.dsr-hero .dsr-console.is-light .cbody .ck { color: #1f7a52; }
.dsr-hero .dsr-console.is-light .cbody .ca { color: var(--wp--preset--color--muted); }
.dsr-hero .dsr-console.is-light .cstatus {
	background: var(--wp--preset--color--soft);
	border: 1px solid var(--wp--preset--color--line);
}
.dsr-hero .dsr-console.is-light .cstatus .l { color: var(--wp--preset--color--muted); }
.dsr-hero .dsr-console.is-light .cstatus .v { color: var(--green-text); }
.dsr-hero .dsr-console.is-light .cstatus .v::before {
	background: var(--wp--preset--color--green);
	box-shadow: 0 0 0 4px rgba(124,58,237, .22);
}

@media (max-width: 900px) {
	.dsr-quote.is-light,
	.dsr-hero .dsr-status.is-light,
	.dsr-hero .dsr-console.is-light { margin-top: 30px; }
}

/* =======================================================================
 * Home page, moving off black (v1.36.0)
 *
 * The home page carried five dark blocks: the hero readout, the "one thing
 * we will not claim" strip, the whole arithmetic section, the "not a fit"
 * column and the audit form. Stacked down one page that is a lot of black,
 * and it made the green accent fight for attention every time it appeared.
 *
 * Each one goes light through the same `.is-light` opt-in the service hero
 * panels use (v1.35.0), so the dark version stays available and nothing
 * changes on a page that has not been converted.
 *
 * Two of these keep a colour rather than going plain white, on purpose:
 *
 *   - the anat strip stays on soft paper, because it sits inside a white
 *     section and a white strip on white has no edges;
 *   - the "not a fit" column also stays on soft, because the yes/no split
 *     is the whole point of that section and two identical white cards
 *     throw the comparison away.
 * ======================================================================= */

/* --- "One thing we will not claim" ------------------------------------ */
.dsr-anat-strip.is-light {
	background: var(--wp--preset--color--soft);
	border: 1.5px solid var(--wp--preset--color--line);
}
.dsr-anat-strip.is-light .si { background: var(--wp--preset--color--green-tint); }
.dsr-anat-strip.is-light .st { color: var(--wp--preset--color--contrast); }
.dsr-anat-strip.is-light .sb { color: var(--wp--preset--color--ink-2); }
.dsr-anat-strip.is-light .sb strong { color: var(--green-text); }

/* --- The arithmetic --------------------------------------------------- */
/* A whole section rather than a card, so the section ground moves too. It
   lands between two white sections, which is why it takes soft. */
.dsr-roi.is-light { background: var(--wp--preset--color--soft); }
.dsr-roi.is-light .dsr-label { color: var(--cyan-text); }
.dsr-roi.is-light .dsr-label::before { background: var(--wp--preset--color--cyan); }
.dsr-roi.is-light .dsr-title { color: var(--wp--preset--color--contrast); }
.dsr-roi.is-light .dsr-sub { color: var(--wp--preset--color--muted); }
.dsr-roi.is-light .dsr-roi-lead { color: var(--wp--preset--color--muted); }
.dsr-roi.is-light .dsr-rcost {
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--preset--color--line);
}
.dsr-roi.is-light .dsr-rcost .rt { color: var(--wp--preset--color--contrast); }
.dsr-roi.is-light .dsr-rcost .rd { color: var(--wp--preset--color--ink-2); }
.dsr-roi.is-light .dsr-rcost .rs { color: var(--wp--preset--color--muted); }
/* .dsr-vsbox is already green with dark text. On a light ground it stops
   being one panel among several and becomes the section's one accent. */

/* --- "Not a fit" ------------------------------------------------------ */
.dsr-fitbox.no.is-light {
	/* Recessed rather than raised: the "yes" card is white and lifts off the
	   soft section, this one sits back into it. Same distinction the black
	   card was making, without the weight. `--line` is too faint against soft
	   to hold an edge, so the border takes the darker hairline. */
	background: var(--wp--preset--color--soft);
	border-color: #cfc9e6;
}
.dsr-fitbox.no.is-light h3 { color: var(--wp--preset--color--muted); }
.dsr-fitbox.no.is-light li { color: var(--wp--preset--color--ink-2); }
.dsr-fitbox.no.is-light li::before { color: var(--wp--preset--color--muted); }
.dsr-fitbox.no.is-light li a { color: var(--green-text); }
.dsr-fitbox.no.is-light li a:hover { color: var(--wp--preset--color--contrast); }
.dsr-fitbox.no.is-light .dsr-fitnote {
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink-2);
}
.dsr-fitbox.no.is-light .dsr-fitnote a { color: var(--green-text); }

/* --- The audit form --------------------------------------------------- */
/* The `ds-dark-panel` class comes off the block at the same time, which is
   what returns the inputs to their light styling. Only the shell is left. */
.dsr-formcard.is-light {
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--preset--color--line);
	box-shadow: inset 0 3px 0 var(--wp--preset--color--green), 0 18px 40px -28px rgba(22,16,60, .35);
}
.dsr-formcard.is-light .fc-title { color: var(--wp--preset--color--contrast); }
.dsr-formcard.is-light .fc-sub { color: var(--wp--preset--color--muted); }
.dsr-formcard.is-light .ds-form__consent { color: var(--wp--preset--color--muted); }
.dsr-formcard.is-light .ds-form__consent a { color: var(--wp--preset--color--ink-2); }

/* =======================================================================
 * Featured plan, light (v1.37.0)
 *
 * The Growth card was black so it would separate from the two white plans
 * either side of it. That works, and it is also the last black block on the
 * home page.
 *
 * It goes to green tint rather than white, because white would leave three
 * identical cards and no "most popular" at all. The theme already has this
 * device: `.dsr-card.featured` uses green-tint for exactly this reason. The
 * card still separates, just by hue instead of by weight.
 * ======================================================================= */
.dsr-plan.featured.is-light {
	background: var(--wp--preset--color--green-tint);
	border-color: var(--tint-line);
	box-shadow: 0 18px 44px -30px rgba(22,16,60, .4);
}
.dsr-plan.featured.is-light .pname { color: var(--wp--preset--color--contrast); }
.dsr-plan.featured.is-light .ptag { color: var(--wp--preset--color--muted); }
.dsr-plan.featured.is-light .pprice { color: var(--green-text); }
.dsr-plan.featured.is-light .pprice .per { color: var(--wp--preset--color--muted); }
.dsr-plan.featured.is-light .pbill { color: var(--green-text); }
.dsr-plan.featured.is-light .pfor {
	color: var(--wp--preset--color--muted);
	border-color: var(--tint-line);
}
.dsr-plan.featured.is-light li { color: var(--wp--preset--color--ink-2); }
.dsr-plan.featured.is-light li strong { color: var(--wp--preset--color--contrast); }
.dsr-plan.featured.is-light li::before { color: var(--green-text); }
.dsr-plan.featured.is-light li.dsr-x { color: var(--wp--preset--color--muted); }
.dsr-plan.featured.is-light li.dsr-x::before { color: var(--wp--preset--color--muted); }
/* The card is no longer dark, so the white hover that was protecting the
   button here has to come back off. Black hover is the site default and it
   reads fine on tint. */
.dsr-plan.featured.is-light .wp-block-button.is-style-brand .wp-block-button__link:hover,
.dsr-plan.featured.is-light .wp-block-button.is-style-brand .wp-block-button__link:focus {
	background: #16103c;
	color: #ffffff;
	border-color: #16103c;
}

/* =======================================================================
 * The arithmetic price card, on a light section (v1.38.0)
 *
 * `.dsr-vsbox` is a solid #7c3aed slab about 460 by 500. Against the black
 * section it read as the one bright thing in the room, which was the point.
 * On the soft ground it has nothing to push against and just glares.
 *
 * It goes to the same green tint every other highlighted card on the page
 * uses. That is not only easier to look at: the card IS the Growth plan, so
 * matching the Growth pricing card further down the page is the honest
 * relationship between the two.
 *
 * Scoped to `.dsr-roi.is-light`, so wherever the section is still dark the
 * card stays solid green, which is right there.
 * ======================================================================= */
.dsr-roi.is-light .dsr-vsbox {
	background: var(--wp--preset--color--green-tint);
	border: 1.5px solid var(--tint-line);
}
.dsr-roi.is-light .dsr-vsbox .pn { color: var(--wp--preset--color--muted); }
.dsr-roi.is-light .dsr-vsbox .price { color: var(--green-text); }
.dsr-roi.is-light .dsr-vsbox .price span { color: var(--wp--preset--color--muted); }
.dsr-roi.is-light .dsr-vsbox .desc { color: var(--wp--preset--color--ink-2); }
.dsr-roi.is-light .dsr-vsbox .math { color: var(--wp--preset--color--muted); }

/* =======================================================================
 * Buttons, site-wide (v1.41.0)
 *
 * Two changes, both asked for after seeing 1.39.0 on the page.
 *
 * The hard bar is gone. It was a 3px slab of solid #16103c sitting under
 * every button, and with the rest of the page lightened it was carrying
 * more weight than the buttons themselves. The press-down travel goes with
 * it: without a bar to collapse into, a button that drops 3px is just
 * moving for no reason. Hover is now a colour change on its own.
 *
 * And the second brand colour is doing work. The logo is green and cyan;
 * only the green had ever appeared on a control. So: green means the
 * primary action, cyan means the secondary one. The two buttons that sit
 * side by side all over this page finally have a reason to look different
 * from each other, instead of the same shape twice in the same colour.
 *
 * Hovers get brighter or deeper in their own hue. Nothing inverts to a
 * dark fill, which is the whole point of the exercise.
 *
 * Contrast, measured, all against their own fill:
 *   green #7c3aed + #16103c ink      9.0:1  (primary rest)
 *   green-text #6d28d9 + #ffffff     5.2:1  (primary hover)
 *   cyan-text #6342e5 label on white 5.4:1  (secondary rest label)
 *   cyan-dark #6342e5 outline        3.6:1  (clears the 3:1 a control edge
 *                                            needs; the bright #9061f9 is
 *                                            only 2.0 and cannot hold an
 *                                            edge on white, let alone text)
 *   cyan-text #6342e5 + #ffffff      5.4:1  (secondary hover)
 *
 * Hover puts WHITE on the label, which sets the fills: white needs 4.5:1 to
 * be read, and neither #7c3aed (2.4) nor #5430d1 (2.9) nor #9061f9 (2.4) can
 * carry it. So the hovers land on the deepest step of each hue, the same two
 * text tokens the rest of the page uses. The bright logo cyan stays where it
 * does work: fills with dark ink, chips, and the H1.
 *
 * Was scoped to the home page for a round; now site-wide, header included.
 * The dark-section overrides further up the file still outrank these three
 * classes, so a button that lands on a dark ground keeps its own treatment.
 * ======================================================================= */

/* No bar, and nothing to press into, so no travel either. */
.wp-block-button .wp-block-button__link,
.ds-form .ds-form__submit,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.ds-form .ds-form__submit:hover,
.ds-form .ds-form__submit:focus {
	box-shadow: none;
	transform: none;
}

/* Primary: green. Hover deepens it; the label stays white.
   `green` (#7c3aed) is a mid purple, not a light one: the old #16103c ink on it
   measured 3.15:1, which is why the label read as a smudge. White on the same
   fill is 5.69:1, and 7.11:1 on the --green-text hover. */
.wp-block-button.is-style-brand .wp-block-button__link,
.ds-form__submit.is-style-brand {
	background: var(--wp--preset--color--green);
	color: #ffffff;
	border-color: var(--wp--preset--color--green);
}
.wp-block-button.is-style-brand .wp-block-button__link:hover,
.wp-block-button.is-style-brand .wp-block-button__link:focus,
.ds-form__submit.is-style-brand:hover,
.ds-form__submit.is-style-brand:focus {
	background: var(--green-text);
	color: #ffffff;
	border-color: var(--green-text);
}

/* Secondary: cyan outline, filling with the logo cyan on hover. The label
   and the edge take different steps of the hue because they answer to
   different thresholds, 4.5:1 for words and 3:1 for a control's boundary. */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--cyan-text);
	border-color: var(--wp--preset--color--cyan-dark);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus {
	background: var(--cyan-text);
	color: #ffffff;
	border-color: var(--cyan-text);
}

/* The Growth card's button carried a black-hover override from when that card
   was black. It is tinted now, so it follows the primary rule. */
.dsr-plan.featured.is-light .wp-block-button.is-style-brand .wp-block-button__link:hover,
.dsr-plan.featured.is-light .wp-block-button.is-style-brand .wp-block-button__link:focus {
	background: var(--green-text);
	color: #ffffff;
	border-color: var(--green-text);
}

/* =======================================================================
 * The last seven dark blocks (v1.41.0)
 *
 * Rolling the home page treatment across the rest of the site turned up
 * seven components the home page never had. Each one maps onto a shape
 * already decided here, so none of them needed a new idea:
 *
 *   .dsr-guarantee   emergency          a note strip, same as .dsr-anat-strip
 *   .dsr-uplist      emergency          a panel, same as .dsr-status
 *   .dsr-chrono      about              a panel, same as .dsr-status
 *   .dsr-calc-out    speed, seo, custom the answer half of a calculator
 *   .dsr-def-aside   custom             an aside, so it sits back
 *   .dsr-inc         woocommerce        a whole section, same as .dsr-roi
 *
 * The seventh is the mid-page testimonial on the malware page, which the
 * hero-panel pass deliberately skipped. Its rule lost the `.dsr-hero`
 * prefix instead of gaining a new one.
 *
 * Two of them keep a colour instead of going white, for reasons already
 * established: a strip inside a white section needs an edge, and a card
 * that is meant to read as secondary needs to sit back rather than lift.
 * ======================================================================= */

/* --- Guarantee strip (= anat strip) ----------------------------------- */
.dsr-guarantee.is-light {
	background: var(--wp--preset--color--soft);
	border: 1.5px solid var(--wp--preset--color--line);
}
.dsr-guarantee.is-light .gi { background: var(--wp--preset--color--green-tint); }
.dsr-guarantee.is-light .gt { color: var(--wp--preset--color--contrast); }
.dsr-guarantee.is-light .gb { color: var(--wp--preset--color--ink-2); }
.dsr-guarantee.is-light .gb strong { color: var(--green-text); }

/* --- Uplist panel (= status panel) ------------------------------------ */
.dsr-uplist.is-light {
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--preset--color--line);
	box-shadow: inset 0 3px 0 var(--wp--preset--color--green), 0 18px 40px -28px rgba(22,16,60, .35);
}
.dsr-uplist.is-light .ut { color: var(--green-text); }
.dsr-uplist.is-light li { color: var(--wp--preset--color--ink-2); }
.dsr-uplist.is-light p { color: var(--wp--preset--color--ink-2); }

/* --- Chronology panel (= status panel) -------------------------------- */
.dsr-chrono.is-light {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink-2);
	border: 1.5px solid var(--wp--preset--color--line);
	/* green top accent via inset shadow, not border-top:3px — see the shell-card
	   note above; a differing top border leaves a seam at the rounded corners. */
	box-shadow: inset 0 3px 0 var(--wp--preset--color--green), 0 18px 40px -28px rgba(22,16,60, .35);
}
.dsr-chrono.is-light .st-title { color: var(--green-text); }
.dsr-chrono.is-light .dsr-chrono-item + .dsr-chrono-item { border-top-color: var(--wp--preset--color--line); }
/* The node sits on the card now, not on black. */
.dsr-chrono.is-light .dsr-chrono-item::before { background: var(--wp--preset--color--base); }
.dsr-chrono.is-light .dsr-chrono-item.is-now::before { background: var(--wp--preset--color--green); }
.dsr-chrono.is-light .cyear { color: var(--wp--preset--color--contrast); }
.dsr-chrono.is-light .is-now .cyear { color: var(--green-text); }
.dsr-chrono.is-light .clabel { color: var(--wp--preset--color--ink-2); }
.dsr-chrono.is-light .cnote { color: var(--wp--preset--color--muted); }
.dsr-chrono.is-light .dsr-chrono-foot {
	color: var(--wp--preset--color--muted);
	border-top-color: var(--wp--preset--color--line);
}

/* --- Calculator output ------------------------------------------------ */
/* The sliders half is white; this half is the answer, so it takes the tint
   every other "this is the one to look at" surface uses. */
.dsr-calc-out.is-light {
	background: var(--wp--preset--color--green-tint);
	color: var(--wp--preset--color--ink-2);
	border-left: 1.5px solid var(--tint-line);
}
.dsr-calc-out.is-light .dsr-calc-lbl { color: var(--wp--preset--color--muted); }
.dsr-calc-out.is-light .dsr-calc-big { color: var(--green-text); }
.dsr-calc-out.is-light .dsr-calc-sub { color: var(--wp--preset--color--muted); }
.dsr-calc-out.is-light .dsr-calc-row { border-top-color: var(--tint-line); }
.dsr-calc-out.is-light .dsr-calc-row span:first-child { color: var(--wp--preset--color--muted); }
.dsr-calc-out.is-light .dsr-calc-row span:last-child { color: var(--wp--preset--color--contrast); }
.dsr-calc-out.is-light .dsr-calc-row .accent { color: var(--cyan-text); }
.dsr-calc-out.is-light .dsr-calc-note { color: var(--wp--preset--color--muted); }

/* --- Definition aside ------------------------------------------------- */
.dsr-def-aside.is-light {
	background: var(--wp--preset--color--soft);
	border: 1.5px solid var(--wp--preset--color--line);
}
.dsr-def-aside.is-light h3 { color: var(--wp--preset--color--muted); }
.dsr-def-aside.is-light .dsr-pill {
	color: var(--green-text);
	border-color: var(--tint-line);
	background: var(--wp--preset--color--base);
}
.dsr-def-aside.is-light .dsr-note-sm {
	color: var(--wp--preset--color--muted);
	border-top-color: var(--wp--preset--color--line);
}

/* --- "What we actually do every month" section (= the arithmetic) ----- */
.dsr-inc.is-light { background: var(--wp--preset--color--soft); }
.dsr-inc.is-light .dsr-label { color: var(--green-text); }
.dsr-inc.is-light .dsr-title { color: var(--wp--preset--color--contrast); }
.dsr-inc.is-light .dsr-sub { color: var(--wp--preset--color--muted); }
.dsr-inc.is-light .dsr-tab {
	color: var(--wp--preset--color--ink-2);
	border-color: #cfc9e6;
}
.dsr-inc.is-light .dsr-tab:hover {
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--muted);
}
.dsr-inc.is-light .dsr-tab.is-active {
	background: var(--wp--preset--color--green);
	border-color: var(--wp--preset--color--green);
	color: #ffffff;
}
.dsr-inc.is-light .dsr-item {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--line);
}
.dsr-inc.is-light .dsr-item:hover { background: var(--wp--preset--color--soft-2); }
.dsr-inc.is-light .dsr-item h4 { color: var(--wp--preset--color--contrast); }
.dsr-inc.is-light .dsr-item p { color: var(--wp--preset--color--ink-2); }
.dsr-inc.is-light .wp-block-details {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--line);
}
.dsr-inc.is-light .wp-block-details summary { color: var(--wp--preset--color--contrast); }
.dsr-inc.is-light .wp-block-details summary::after { color: var(--green-text); }
.dsr-inc.is-light .wp-block-details[open] summary { border-bottom-color: var(--wp--preset--color--line); }
.dsr-inc.is-light .wp-block-details li { color: var(--wp--preset--color--ink-2); }
.dsr-inc.is-light .wp-block-details li::before { color: var(--green-text); }

/* =======================================================================
 * Optical centring and two leftovers from the black look (v1.42.0)
 *
 * 1. BUTTON LABELS SAT HIGH. Measured off the rendered pixels rather than
 *    the box model: the cap ink ended 21.83px below the top of the pill and
 *    22.83px above the bottom. Equal padding does not centre uppercase type,
 *    because the line box reserves room for descenders that ALL-CAPS text
 *    never uses, so the visible block of caps floats up by half that gap.
 *    Correcting in `em` rather than px so it holds at any button size.
 *
 * 2. THE FAQ MARKER. A "+" glyph sits on the maths axis, which is above the
 *    centre of its em box, so centring the glyph does not centre the cross
 *    you can see. The "−" it swaps to on open sits somewhere else again, so
 *    the marker moved when you opened a row. Drawing the cross out of two
 *    gradient bars fixes both: it is centred by construction, the open state
 *    is the same bars minus one, and it can rotate on the way.
 *
 * 3. THE OPEN-ROW SHADOW. `5px 5px 0 0 green` was the same hard-offset trick
 *    the buttons used, and it went for the same reason. An open row now
 *    reads as open through its green edge and a soft lift.
 *
 * 4. THE MEGA-MENU TRIGGER went solid black on hover. Last black left in the
 *    header.
 * ======================================================================= */

/* --- 1. Button labels ------------------------------------------------- */
.wp-block-button__link,
.ds-form__submit {
	padding-top: calc(17px + 0.03em);
	padding-bottom: calc(17px - 0.03em);
}
/* The nav pill is smaller and sets its own padding. */
.ds-menu > li > a {
	padding-top: calc(9px + 0.03em);
	padding-bottom: calc(9px - 0.03em);
}

/* --- 2. FAQ marker: a drawn cross, not a glyph ------------------------ */
.ds-faq summary::after {
	content: "";
	background:
		linear-gradient(#ffffff, #ffffff) center / 12px 2px no-repeat,
		linear-gradient(#ffffff, #ffffff) center / 2px 12px no-repeat,
		var(--wp--preset--color--green);
	transition: transform 0.2s ease, background-size 0.2s ease;
}
/* Open: drop the upright bar and turn the remaining one a half turn. */
.ds-faq .wp-block-details[open] summary::after {
	content: "";
	background:
		linear-gradient(#ffffff, #ffffff) center / 12px 2px no-repeat,
		linear-gradient(#ffffff, #ffffff) center / 0 12px no-repeat,
		var(--wp--preset--color--green);
	transform: rotate(180deg);
}

/* The question text has the same cap-height lift as the buttons. Shifting
   the whole row down would take the marker with it, so the marker is pulled
   back by the same amount and stays where it is. */
.ds-faq summary {
	padding-top: calc(22px + 0.06em);
	padding-bottom: calc(22px - 0.06em);
}
.ds-faq summary::after { margin-top: calc(-0.06em); }

/* --- 3. Open row ------------------------------------------------------ */
.ds-faq .wp-block-details[open] {
	box-shadow: 0 14px 34px -22px rgba(22,16,60, .45);
	border-color: var(--wp--preset--color--green);
}
.dsr-bg-base .ds-faq .wp-block-details[open] { border-color: var(--wp--preset--color--green); }
.ds-faq .wp-block-details { transition: box-shadow 0.16s ease, border-color 0.16s ease; }

/* --- 4. Mega-menu trigger --------------------------------------------- */
.ds-menu > li.ds-has-mega:hover > a,
.ds-menu > li.ds-has-mega:focus-within > a {
	background: var(--wp--preset--color--green-tint);
	color: var(--green-text);
}

/* =======================================================================
 * The last dark gradients, and the tables (v1.43.0)
 *
 * TWO DARK BLOCKS SURVIVED THE SWEEP because they are painted with a
 * gradient, and the audit that found the other 27 only read
 * `background-color`. A gradient leaves that transparent, so `.ds-cta` at
 * the foot of the blog and `.ds-sidecta` in the single-post rail never
 * showed up. Both are CTAs, so they take the tint the rest of the site uses
 * for "look at this one".
 *
 * THE TABLES were not dark, they were flat. Their body rows had no fill, so
 * the paper of the section showed through, and the zebra stripe was `soft`
 * on `soft`: invisible. The green outcome column was then a 7% wash over
 * beige, which is where the muddy olive came from. Giving the body a white
 * ground fixes all three at once. The stripe has something to contrast
 * with, the green column reads as green, and the table separates from the
 * section instead of dissolving into it.
 *
 * While in there, the token colours: `.tno` was 2.95:1, and the greens and
 * cyans were the pre-`--green-text` values that do not clear AA as ink.
 * ======================================================================= */

/* --- Blog footer CTA -------------------------------------------------- */
/* The gradient, the heading's inline #ffffff and the paragraph's soft-2
   preset all came out of templates/index.html and patterns/cta.php, because
   an inline style and a preset colour class both outrank a stylesheet. The
   card's colours belong here, not baked into the markup. */
.ds-cta {
	background: var(--wp--preset--color--green-tint);
	border: 1.5px solid var(--tint-line);
}
.ds-cta .ds-eyebrow { color: var(--green-text); }
.ds-cta h2, .ds-cta .wp-block-heading { color: var(--wp--preset--color--contrast); }
.ds-cta p { color: var(--wp--preset--color--ink-2); }

/* --- Single-post rail CTA --------------------------------------------- */
.ds-sidecta {
	background: var(--wp--preset--color--green-tint);
	border: 1.5px solid var(--tint-line);
	color: var(--wp--preset--color--ink-2);
}
.ds-sidecta-eyebrow { color: var(--green-text); }
.ds-sidecta-h { color: var(--wp--preset--color--contrast); }
.ds-sidecta-p { color: var(--wp--preset--color--ink-2); }
/* The card is light now, so the button follows the site rule: deepen on
   hover, white label. The old rule went to a brighter green because black
   would have vanished into the dark card. */
.ds-sidecta-btn:hover,
.ds-sidecta-btn:focus {
	background: var(--green-text);
	color: #ffffff;
	transform: none;
}

/* --- Tables: a white body under the stripes --------------------------- */
.dsr-cmptable table,
.dsr-prooftable table { background: var(--wp--preset--color--base); }
.dsr-cmptable tbody tr:nth-child(even) td,
.dsr-prooftable tbody tr:nth-child(even) td { background: var(--wp--preset--color--soft); }

/* The outcome column, now over white rather than over paper. */
.dsr-cmptable th:last-child { background: var(--wp--preset--color--green-tint); }
.dsr-cmptable tbody tr td:last-child,
.dsr-cmptable tbody tr:nth-child(even) td:last-child { background: #f3efff; }
.dsr-cmptable th:last-child,
.dsr-cmptable tbody tr td:last-child { border-left: 1.5px solid var(--tint-line); }

.dsr-prooftable thead th:nth-child(3) {
	background: var(--wp--preset--color--green-tint);
	color: var(--green-text);
}
.dsr-prooftable tbody tr td.pafter,
.dsr-prooftable tbody tr:nth-child(even) td.pafter { background: #f3efff; }
.dsr-prooftable thead th:nth-child(3),
.dsr-prooftable tbody tr td.pafter {
	border-left: 1.5px solid var(--tint-line);
	border-right-color: var(--tint-line);
}

/* Cell ink. Every one of these was set before `--green-text` existed. */
.dsr-cmptable th:last-child { color: var(--green-text); }
.dsr-cmptable .tok { color: var(--green-text); }
.dsr-cmptable .tno { color: var(--wp--preset--color--muted); }   /* was #7b7596, 2.95:1 */
.dsr-cmptable .tmid { color: var(--cyan-text); }
.dsr-prooftable .pafter { color: var(--green-text); }
.dsr-prooftable .pbefore { color: #a83c1f; }                     /* was #c34a28, 3.9:1 */
.dsr-prooftable .pdelta { color: var(--cyan-text); }

/* =============================================================
   WHITE LABEL page (3191) — three small components.
   Names grep-checked against the whole file before use:
   dsr-numgrid and .sn were already taken, dsr-ph / dsr-h3 /
   dsr-spectable were free.
   ============================================================= */

/* Unfilled brand facts. Deliberately loud so a placeholder cannot
   reach production unnoticed. Delete the rule once none are left. */
.dsr-ph {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--fs-caption);
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--soft-2);
	border: 1px dashed #c8c2e0;
	border-radius: 6px;
	padding: 1px 7px;
	white-space: nowrap;
}
.dsr-plan .dsr-ph { font-size: var(--fs-lead); }
/* In a one-fee card the amount line is display type at --fs-display, so a
   caption-sized chip sitting in it looks broken rather than pending. */
.dsr-onefee .dsr-ph { font-size: var(--fs-num); }

/* A sub-heading inside a section that already used its h2. */
.dsr-h3 {
	font-size: var(--fs-h3);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	letter-spacing: -0.02em;
	margin: 46px 0 22px;
}

/* Capability cards carry a lead line then four checks. */
.dsr-card .dsr-checks { margin: 14px 0 0; }
.dsr-card .dsr-checks li { font-size: var(--fs-small); }

/* Two-column commitments table. dsr-cmptable is built for five columns
   and hands a min-width to the table, which makes a two-column one
   scroll for no reason. Values read left, not centred, because they are
   sentences rather than one-glyph ticks. */
.dsr-spectable table { min-width: 0; }
.dsr-spectable td { text-align: left; }

/* Whole-card link, used by the nine-service catalogue. It lived only in the
   standalone audit reference until now. The note takes --green-text rather
   than green-dark: green-dark is 2.94:1 on white and fails AA for words. */
.dsr-maplink {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dsr-maplink:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--green);
	box-shadow: 0 8px 0 -4px rgb(124 58 237 / 35%);
}
.dsr-maplink h3 { font-size: var(--fs-lead); }
.dsr-maplink p {
	color: var(--green-text);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--fs-caption);
	margin: 0;
}
@media (prefers-reduced-motion: reduce) { .dsr-maplink { transition: none; } }

/* ---- Hero heading levels ----
   On every service hero the eyebrow label is the <h1> and the headline below it
   is an <h2>. Tags changed for semantics only — size, weight and colour stay
   exactly as they were when the label was a <p> and the headline an <h1>. */
.dsr-hero h1.dsr-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--fs-caption);
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--green-text);
	margin: 0 0 14px;
}
.dsr-hero h2.dsr-htitle {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: var(--fs-h1);
	line-height: 1.03;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 20px;
}

/* -------------------------------------------------------------------------
 * End-of-post author box + "Keep reading" related posts (single.html)
 * The author block moved out from under the title to the foot of the article;
 * the generic CTA was dropped in favour of related posts.
 * ---------------------------------------------------------------------- */
.ds-post-author-box { max-width: 1000px; margin: var(--wp--preset--spacing--70) auto 0; padding-top: 32px; border-top: 1px solid var(--wp--preset--color--line); display: flex; align-items: flex-start; gap: 18px; }
.ds-post-author-box .ds-author-av { flex: 0 0 auto; line-height: 0; }
.ds-post-author-box .ds-author-av img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.ds-post-author-box .ds-author-name { font-weight: 700; font-size: var(--fs-lead); margin: 2px 0 6px; color: var(--wp--preset--color--contrast); }
.ds-post-author-box .ds-author-bio { font-size: var(--fs-small); color: var(--wp--preset--color--muted); line-height: 1.6; margin: 0; max-width: 64ch; }
/* Same markup as the footer row, sized down and on a light ground. */
.ds-post-author-box .ds-author-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
.ds-post-author-box .ds-author-social li { margin: 0; }
.ds-post-author-box .ds-author-social a {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.ds-post-author-box .ds-author-social a:hover,
.ds-post-author-box .ds-author-social a:focus-visible {
	background: var(--wp--preset--color--green);
	border-color: var(--wp--preset--color--green);
	color: #fff;
}
.ds-post-author-box .ds-author-social svg { width: 16px; height: 16px; fill: currentColor; display: block; }
/* The photo is a real portrait now, not a 60px Gravatar blob. */
.ds-post-author-box .ds-author-av img { width: 84px; height: 84px; }

.ds-related { max-width: 1000px; margin: var(--wp--preset--spacing--60) auto 0; }
.ds-related-h { font-family: var(--wp--preset--font-family--sans); font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 22px; color: var(--wp--preset--color--contrast); }
.ds-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.ds-rel-card { display: flex; flex-direction: column; text-decoration: none; border: 1px solid var(--wp--preset--color--line); border-radius: 16px; background: var(--wp--preset--color--base); overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.ds-rel-card:hover { border-color: var(--wp--preset--color--green); box-shadow: 0 8px 26px rgba(22,16,60,.07); transform: translateY(-3px); }
.ds-rel-thumb { display: block; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.ds-rel-thumb img, .ds-rel-noimg { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ds-rel-noimg { background: var(--wp--preset--color--soft, #efecfb); }
.ds-rel-title { font-family: var(--wp--preset--font-family--sans); font-size: var(--fs-card); line-height: 1.32; letter-spacing: -0.01em; margin: 0; padding: 22px 22px 24px; color: var(--wp--preset--color--contrast); }
.ds-rel-card:hover .ds-rel-title { color: var(--green-text); }
@media (max-width: 760px) {
	.ds-rel-grid { grid-template-columns: 1fr; gap: 20px; max-width: 460px; margin-left: auto; margin-right: auto; }
	.ds-post-author-box { max-width: none; }
}