/* ============================================================
   FastCow - shared stylesheet
   Every page links this. Tokens live in :root at the top; change
   one here and it moves on every page at once. Extracted verbatim
   from the <style> block that used to sit inside index.html.
   ============================================================ */

/* ============================================
   FastCow - Design Tokens
   ============================================ */
:root {
	/* BLUE PALETTE (site-wide) - cool navy ink, cool-grey paper, blue brand.
	   Matches the homepage theme so every page inherits the same look. */
	--ink: #101828;
	--ink-soft: #232B3D;
	--paper: #F0F3F9;
	--paper-dim: #E9E9F2;
	--white: #FFFFFF;

	/* Brand gradient - blue: royal -> mid -> light */
	--brand-purple: #3D63F5;
	--brand-pink: #6E8CFF;
	--brand-coral: #6E8CFF;
	--brand-gradient: linear-gradient(120deg, #3D63F5 0%, #5E7CFF 55%, #8CA6FF 100%);
	--brand-gradient-diag: linear-gradient(135deg, #3D63F5 0%, #5E7CFF 52%, #8CA6FF 100%);

	/* Single-color aliases for borders/icons/small accents */
	--accent: #3D63F5;
	--accent-dim: #6E8CFF;

	--slate: #6C6980;
	--slate-dark: #46434F;
	--border: #E1DFEC;
	--border-dark: #CFCCDD;

	--font-display: 'Space Grotesk', sans-serif;
	--font-body: 'Inter', sans-serif;
	--font-mono: 'JetBrains Mono', monospace;

	--container: 1400px;
	/* Total height of the floating header: 14px gap + 68px island + 14px gap.
	   The hero pulls itself up by this so its background runs behind the bar. */
	--header-h: 96px;

	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	/* Corner radius of the header island and its docked mega panel.
	   Both read from this so the joined shape can't fall out of sync. */
	--nav-radius: 8px;
	/* Surface colour of the island and its panels. They must match exactly or
	   the join stops reading as one shape. Assumes a dark surface - the nav
	   link and dropdown text colours are set for light-on-dark.
	   Must stay LIGHTER than --ink. The bar floats over the ink WooCommerce
	   band and the ink final CTA; set to --ink it becomes invisible over both,
	   leaving a hairline with links under it. The one stop of separation is
	   what keeps it reading as an object. Tried and reverted. */
	--nav-bg: var(--ink-soft);
	/* Dividers on the nav surface. Translucent white rather than a fixed grey
	   so they hold up whatever --nav-bg is set to. */
	--nav-border: rgba(255, 255, 255, 0.09);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
	font-family: var(--font-body);
	color: var(--ink);
	background: var(--white);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 32px;
}

.eyebrow {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	font-weight: 600;
}

/* Dot removed - the pulsing dot read as a generic AI-startup tell. */

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.95rem;
	padding: 13px 24px;
	border-radius: 12px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary {
	background: #050A1B;
	color: var(--white);
	position: relative;
	z-index: 0;
}
.btn-primary::before { display: none; }
.btn-primary:hover {
	background: #1B2542;
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(15, 21, 38, 0.28);
}

.btn-outline {
	background: transparent;
	color: var(--ink);
	border-color: var(--border-dark);
}
.btn-outline:hover {
	border-color: var(--ink);
	transform: translateY(-1px);
}

.btn-light {
	background: var(--white);
	color: var(--ink);
}
/* inline contextual link (internal linking) */
.copy-link { color: #3D63F5; font-weight: 600; text-decoration: none; }
.copy-link:hover { text-decoration: underline; }

.btn-light:hover {
	background: var(--paper);
	transform: translateY(-1px);
}

.btn-sm { padding: 10px 18px; font-size: 0.875rem; }

/* Section rhythm */
section { padding: 96px 0; }
.section-tight { padding: 64px 0; }

.section-head {
	max-width: 640px;
	margin-bottom: 56px;
}

.section-head.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.section-head h2 {
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	margin-bottom: 16px;
}

.section-head p {
	color: var(--slate-dark);
	font-size: 1.05rem;
}

hr.hairline {
	border: none;
	border-top: 1px solid var(--border);
}

/* For content a screen reader needs and the page doesn't show - table captions,
   mostly. display:none would hide it from assistive tech too. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Utility */
.text-mono { font-family: var(--font-mono); }
.text-slate { color: var(--slate-dark); }
.text-accent { color: var(--accent); }
.text-gradient {
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Reveal-on-scroll (JS toggles .is-visible) */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.4s; }
.reveal-delay-6 { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 768px) {
	section { padding: 64px 0; }
	.container { padding: 0 20px; }
}
/* ============================================
   Header
   ============================================ */
/* Floating "island" header: the bar is a dark, detached pill and the <header>
   is just the transparent frame holding the gap around it.
   NOT sticky - it sits at the top of the document and scrolls away with the
   page. position:relative only so z-index applies and the mega panel can
   overlay the hero beneath it. */
.site-header {
	position: relative;
	z-index: 1000;
	background: transparent;
	padding: 14px 20px;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 68px;
	position: relative;
	/* No padding override - .container's 32px keeps the logo and the CTA
	   aligned with the hero copy and every section below. */
	/* Brand hairline along the top edge, drawn as a background layer rather than
	   a pseudo-element: backgrounds get clipped by border-radius, so the line
	   follows the rounded corners. A 2px-tall ::before can't - its radius would
	   clamp to ~1px and overhang the island's 8px curve, and the island can't
	   use overflow:hidden because the dropdowns must escape it. */
	background:
		var(--brand-gradient) top left / 100% 2px no-repeat,
		var(--nav-bg);
	border-radius: var(--nav-radius);
	/* Inset hairline as well as the drop shadow: --nav-bg sits one stop lighter
	   than --ink so the island still reads over the ink sections. It's an inset
	   shadow rather than a border so it adds no box width and the logo stays
	   aligned with the hero copy. */
	box-shadow:
		0 10px 30px rgba(10, 15, 28, 0.18),
		inset 0 0 0 1px rgba(255, 255, 255, 0.09);
	transition: border-radius 0.2s ease;
}

/* When a mega panel opens it docks flush to the bar, so the bar drops its
   bottom corners and the two read as a single surface. The inset ring's
   bottom edge becomes the divider between the nav row and the panel. */
.header-inner:has(.has-mega:hover),
.header-inner:has(.has-mega:focus-within) {
	border-radius: var(--nav-radius) var(--nav-radius) 0 0;
}

.logo {
	display: flex;
	align-items: center;
}

.logo img {
	height: 22px;
	width: auto;
	display: block;
}

.footer-brand .logo img { height: 24px; }

.main-nav {
	display: flex;
	align-items: center;
	gap: 8px;
}

.nav-item {
	position: relative;
}

.nav-link {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 10px 16px;
	font-size: 0.925rem;
	font-weight: 500;
	color: #C3CAD8;
	border-radius: var(--radius-sm);
	transition: background 0.15s ease, color 0.15s ease;
	position: relative;
}

.nav-link:hover {
	background: rgba(255, 255, 255, 0.07);
	color: var(--white);
}

.dropdown-link strong {
	background: none;
}

.dropdown-link:hover strong {
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.nav-link .chevron {
	width: 10px;
	height: 10px;
	opacity: 0.5;
	transition: transform 0.15s ease;
}

.nav-item:hover .chevron,
.nav-item:focus-within .chevron { transform: rotate(180deg); }

.dropdown {
	position: absolute;
	/* Clears the island's lower edge so the panel reads as detached.
	   The nav-item is shorter than the island, so this offset is measured
	   from the link, not the bar - hence the larger-looking number. */
	top: calc(100% + 26px);
	left: 0;
	background: var(--nav-bg);
	border: 1px solid var(--nav-border);
	border-radius: var(--radius-md);
	box-shadow: 0 20px 50px rgba(10, 15, 28, 0.45);
	min-width: 280px;
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: all 0.18s ease;
}

/* Invisible bridge across the gap between the link and the panel - without it
   the pointer un-hovers mid-travel and the menu closes on the way down. */
.dropdown::before {
	content: '';
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	height: 14px;
}

/* :focus-within so the menu is reachable by keyboard, not hover only */
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dropdown-link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
}

.dropdown-link:hover { background: rgba(255, 255, 255, 0.06); }

.dropdown-link strong {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--white);
}

.dropdown-link span {
	font-size: 0.8rem;
	color: var(--slate);
}

/* ============================================
   Mega menu
   ============================================ */
/* Static so the panel's containing block becomes the island itself and it can
   span the full bar width, rather than hanging off one nav item. */
.nav-item.has-mega { position: static; }

.dropdown.mega {
	/* Docked flush to the island - no gap, so the two form one shape. */
	top: 100%;
	left: 0;
	right: 0;
	min-width: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1.15fr 0.8fr 1fr;
	overflow: hidden;
	border-radius: 0 0 var(--nav-radius) var(--nav-radius);
	/* No top border - that seam is the island's own inset hairline. The sides
	   and bottom continue its outline around the combined shape. */
	border: none;
	border-left: 1px solid var(--nav-border);
	border-right: 1px solid var(--nav-border);
	border-bottom: 1px solid var(--nav-border);
	box-shadow: 0 24px 50px rgba(10, 15, 28, 0.45);
	/* Fade only. Sliding it would tear the seam open mid-transition. */
	transform: none;
}

/* No gap left to bridge, and the bridge would sit over the bar's links. */
.dropdown.mega::before { content: none; }

.mega-col {
	padding: 26px 30px;
	border-right: 1px solid var(--nav-border);
}

/* Link-only variant (About, Blog). Too few links to fill columns, so they
   spread across the docked panel as equal cells instead of one short column. */
.dropdown.mega-row {
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	padding: 18px;
}

.dropdown.mega-row .mega-link {
	margin: 0;
	padding: 14px 16px;
}

.mega-title {
	font-size: 1rem;
	color: var(--white);
	margin-bottom: 16px;
}

.mega-link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 12px;
	margin: 0 -12px;
	border-radius: var(--radius-sm);
	transition: background 0.15s ease;
}

.mega-link:hover { background: rgba(255, 255, 255, 0.06); }

.mega-link strong {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--white);
}

.mega-link span {
	font-size: 0.78rem;
	color: var(--slate);
}

.badge {
	font-family: var(--font-mono);
	font-size: 0.58rem;
	font-weight: 600;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1;
	padding: 3px 7px;
	border-radius: 999px;
}

/* Brand tokens, not the reference's orange - that hue is nowhere in the system */
.badge-new { background: var(--brand-purple); color: var(--ink); }
.badge-hot { background: linear-gradient(90deg, var(--brand-pink), var(--brand-coral)); color: var(--white); }

.mega-promo {
	position: relative;
	overflow: hidden;
	margin: 18px;
	padding: 26px;
	border-radius: var(--radius-md);
	/* The violet end must stay clear of --nav-bg or the card's bottom-right
	   corner dissolves into the panel behind it. */
	background: linear-gradient(140deg, var(--brand-coral) 0%, var(--brand-pink) 48%, #101A3A 100%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	color: var(--white);
}

.mega-promo h4 {
	color: var(--white);
	font-size: 1.15rem;
}

.mega-promo p {
	font-size: 0.82rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
	max-width: 260px;
}

.mega-promo .promo-arrow {
	width: 38px;
	height: 38px;
	margin-top: 4px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.6);
	display: grid;
	place-items: center;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.mega-promo .promo-arrow svg { width: 16px; height: 16px; }

.mega-promo:hover .promo-arrow {
	background: var(--white);
	color: var(--brand-coral);
	border-color: var(--white);
	transform: translateX(3px);
}

/* Reuses the hero art's chevron motif so the watermark isn't a new shape */
.mega-promo .watermark {
	position: absolute;
	right: -34px;
	bottom: -46px;
	width: 190px;
	color: var(--white);
	opacity: 0.13;
	pointer-events: none;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Island buttons. btn-primary is ink by default, which would vanish against
   the island, so both actions are re-cut in brand pink.
   Pink clears AA on ink at 4.87:1 - but only just. If --nav-bg is ever
   lightened, re-check this before anything else. */
.header-actions .btn-outline {
	color: var(--brand-pink);
	border-color: rgba(61, 99, 245, 0.5);
}
.header-actions .btn-outline:hover {
	border-color: var(--brand-pink);
	background: rgba(61, 99, 245, 0.12);
}

.header-actions .btn-primary {
	background: var(--brand-pink);
	color: var(--white);
}
.header-actions .btn-primary:hover {
	box-shadow: 0 8px 20px rgba(61, 99, 245, 0.35);
}

.nav-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}

.nav-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--white);
	margin: 5px 0;
	transition: 0.2s ease;
}

@media (max-width: 1024px) {
	.main-nav { display: none; }
	.header-actions .btn-outline { display: none; }
	.nav-toggle { display: block; }

	/* The toggle sets .is-open on .main-nav; without these rules the class
	   styles nothing and the menu cannot open. Drops out of the island as a
	   panel, with the hover dropdowns flattened into inline sections. */
	.main-nav.is-open {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		position: absolute;
		top: calc(100% + 10px);
		left: 0;
		right: 0;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		background: var(--nav-bg);
		border: 1px solid var(--nav-border);
		border-radius: var(--radius-md);
		box-shadow: 0 20px 50px rgba(10, 15, 28, 0.45);
		padding: 8px;
	}

	.main-nav.is-open .dropdown {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: transparent;
		border: none;
		box-shadow: none;
		min-width: 0;
		padding: 0 0 6px 12px;
	}

	.main-nav.is-open .nav-link .chevron { display: none; }
	.main-nav.is-open .dropdown-link span { display: none; }
	.main-nav.is-open .dropdown-link { padding: 8px 12px; }

	/* The mega panel's grid has no room at this width - the columns would
	   squeeze into unreadable slivers. Unstack it into a plain list. */
	.main-nav.is-open .dropdown.mega { display: block; padding: 0; }

	/* mega-row has no .mega-col to carry the indent, so restore it here */
	.main-nav.is-open .dropdown.mega-row { padding: 0 0 6px 12px; }

	.main-nav.is-open .mega-col {
		border-right: none;
		padding: 6px 0 6px 12px;
	}

	.main-nav.is-open .mega-title {
		font-family: var(--font-mono);
		font-size: 0.7rem;
		text-transform: uppercase;
		letter-spacing: 0.07em;
		color: var(--slate);
		margin-bottom: 4px;
	}

	.main-nav.is-open .mega-link { margin: 0; padding: 8px 12px; }
	.main-nav.is-open .mega-link span { display: none; }

	/* The demo CTA is already in the header on mobile */
	.main-nav.is-open .mega-promo { display: none; }

	/* icon-row mega: unstack into a plain list, drop the grey aside wall */
	.main-nav.is-open .mega-panel { display: block; padding: 0; }
	.main-nav.is-open .mega-head {
		font-family: var(--font-mono);
		font-size: 0.7rem;
		text-transform: uppercase;
		letter-spacing: 0.07em;
		color: var(--slate);
		margin: 6px 0 4px 12px;
	}
	.main-nav.is-open .mrow { margin: 0; padding: 8px 12px; }
	.main-nav.is-open .mrow-txt span { display: none; }
	.main-nav.is-open .mega-side {
		background: transparent;
		border-left: none;
		padding: 6px 0 6px 12px;
	}
	.main-nav.is-open .mside-link { padding: 8px 12px; }
}
/* ============================================
   Hero
   ============================================ */
/* Pulled up under the transparent header so the hero's tint runs behind the
   island instead of stopping at it - otherwise the tinted hero meets plain
   white body in the gap around the island and leaves a seam down the left.
   Padding adds the same amount back so the copy doesn't move. */
.hero {
	margin-top: calc(var(--header-h) * -1);
	padding: calc(88px + var(--header-h)) 0 80px;
	/* Was white with a 6% blue radial over it - the radial was below the
	   threshold of visibility, so the hero and the Solutions grid below it were
	   the same surface and the page opened without an edge. One step to --paper
	   gives the white domain finder, dial and proof cards a ground to sit on,
	   and makes the white section beneath read as a separate band. */
	background: var(--paper);
	overflow: hidden;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 64px;
	align-items: center;
}

/* A bare <img> dropped straight into the hero column (guru-support does this
   with the support artwork). height:auto is load-bearing: the markup's
   width/height attributes become a presentational height, the global
   max-width:100% shrinks the width, and without this the image renders
   squeezed-narrow and stretched-tall.
   Child selector on purpose: framed panels (.mwp-media, .store-media) manage
   their own img sizing and must not be touched. */
.hero-visual > img {
	width: 100%;
	height: auto;
}

/* Announcement line. Deliberately NOT a capsule with a coloured micro-badge
   and a chevron - that shape is the stock template component and reads as
   generated regardless of what it says. A hard-cornered ink tag beside plain
   text reads as a press label instead. */
.hero-announce {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	font-size: 0.86rem;
	color: var(--slate-dark);
}

.hero-announce .tag {
	flex-shrink: 0;
	font-style: normal;
	font-weight: 700;
	font-size: 0.62rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	background: var(--ink);
	color: var(--white);
	padding: 4px 7px;
	border-radius: 3px;
}

.hero-announce b {
	color: var(--ink);
	font-weight: 600;
	transition: color 0.15s ease;
}

.hero-announce:hover b { color: var(--accent); }

.hero-copy h1 {
	font-size: clamp(2.75rem, 5.4vw, 4.4rem);
	margin-bottom: 22px;
	letter-spacing: -0.03em;
}

.hero-copy .highlight {
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	position: relative;
}

.hero-copy p.lead {
	font-size: 1.15rem;
	color: var(--slate-dark);
	max-width: 520px;
	/* auto side-margins so the capped lead stays centred under the title even on
	   pages whose hero-copy isn't a flex column (align-items:center is a no-op
	   there); harmless on the flex homepage hero. */
	margin: 0 auto 32px;
}

.hero-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.hero-stat-row {
	display: flex;
	gap: 36px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
}

.hero-stat { display: flex; flex-direction: column; gap: 2px; }

.hero-stat-value {
	font-family: var(--font-mono);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--ink);
	letter-spacing: -0.01em;
}

.hero-stat-label {
	font-size: 0.8rem;
	color: var(--slate);
}

@media (max-width: 480px) {
	.hero-stat-row { gap: 24px; flex-wrap: wrap; }
}

/* ============================================
   Included-value section
   ============================================ */
/* Contained panel so the section reads as one object rather than another
   stretch of white. The wash is the same one used by the bento security card,
   the review cards and the client strip - a family, not a fourth surface. */
.value-panel {
	background: linear-gradient(120deg, #EEF2FA 0%, #EAF0FB 55%, #E8EEFA 100%);
	border-radius: var(--radius-lg);
	padding: 68px 56px;
}

.value-panel .section-head { margin-bottom: 40px; }

/* Hairlines need more contrast on the wash than they do on white */
.value-panel .value-list .li { border-bottom-color: rgba(10, 15, 28, 0.10); }
.value-panel .value-stat hr { border-top-color: rgba(10, 15, 28, 0.10); }

@media (max-width: 900px) {
	.value-panel { padding: 40px 28px; border-radius: var(--radius-md); }
}

.value-split {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 64px;
	align-items: start;
}

/* The figure is treated exactly like the hero stat row - mono, large, caption
   beneath - so it reads as the same kind of fact. */
.value-stat .n {
	font-family: var(--font-mono);
	font-size: 3.4rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--ink);
}

.value-stat .c {
	margin-top: 8px;
	font-size: 0.85rem;
	color: var(--slate);
}

.value-stat hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: 22px 0;
}

.value-stat p {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--slate-dark);
}

.value-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 44px;
}

.value-list .li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 15px 0;
	border-bottom: 1px solid var(--border);
	font-size: 0.93rem;
}

/* Where a struck-through competitor price goes once the figures are real. */
.value-list .inc {
	font-family: var(--font-mono);
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--accent);
	flex-shrink: 0;
}

@media (max-width: 900px) {
	.value-split { grid-template-columns: 1fr; gap: 36px; }
	.value-list { grid-template-columns: 1fr; }
	.value-stat .n { font-size: 2.8rem; }
}

/* ============================================
   WooCommerce highlight
   ============================================ */
.woo-section {
	background: var(--ink);
	color: var(--white);
	overflow: hidden;
}

.woo-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: center;
}

/* The artwork's edges are transparent and it is flattened onto --ink, so this
   panel must stay ink or the soft edges will show as dark rectangles. */
.woo-media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	display: block;
}

.woo-copy .bento-tag { margin-bottom: 16px; }

.woo-copy h2 {
	color: var(--white);
	font-size: clamp(1.75rem, 3.2vw, 2.4rem);
	margin-bottom: 18px;
	max-width: 16ch;
}

.woo-copy > p {
	color: #A7B0C2;
	font-size: 1rem;
	max-width: 46ch;
	margin-bottom: 28px;
}

.woo-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 32px;
}

.woo-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.95rem;
	color: var(--white);
}

.woo-list .tick {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--brand-gradient-diag);
	display: grid;
	place-items: center;
}

.woo-list .tick svg { width: 10px; height: 10px; stroke: #fff; fill: none; stroke-width: 3; }

@media (max-width: 900px) {
	.woo-row { grid-template-columns: 1fr; gap: 40px; }
	.woo-media { order: 2; }
	.woo-copy { order: 1; }
	.woo-copy h2 { max-width: none; }
}

/* ============================================
   CTA strip - mid-page breather
   ============================================ */
.cta-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 46px 44px;
	min-height: 148px;
	border-radius: var(--radius-lg);
	position: relative;
	overflow: hidden;
	/* coral shoulder on the left falling into ink on the right, with a small
	   pink bloom in the low-left corner. Keep the bloom tight - widen it and
	   it desaturates the coral into dusty mauve. */
	background:
		radial-gradient(ellipse 300px 170px at 2% 128%, rgba(61, 99, 245, 0.5), transparent 70%),
		linear-gradient(98deg, var(--brand-coral) 0%, #2E49B0 24%, #101A3A 56%, #050A1B 100%);
}

.cta-strip p {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--white);
	/* No max-width: flex already caps it against the button, and a ch-cap here
	   forced a two-line wrap with ~300px of empty space beside it. */
}

/* Deliberately a shade deeper than --brand-coral. White on #3D63F5 measures
   4.03:1 - under the 4.5:1 AA floor for 14px text. #3D63F5 is visually the
   same coral at a glance but clears it at 4.92:1. */
.cta-strip .btn {
	flex-shrink: 0;
	background: #3D63F5;
	color: var(--white);
}

.cta-strip .btn:hover {
	background: #2E4FCC;
	box-shadow: 0 8px 22px rgba(61, 99, 245, 0.45);
}

@media (max-width: 780px) {
	.cta-strip {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		padding: 32px 28px;
	}
}

/* ============================================
   Bento feature section
   ============================================ */
.bento {
	display: grid;
	gap: 20px;
}

.bento-hero {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	background: #101828;
	border-radius: var(--radius-lg);
	overflow: hidden;
	min-height: 460px;
}

.bento-copy {
	padding: 56px 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.bento-tag {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--brand-coral);
	margin-bottom: 14px;
}

.bento-hero h2 {
	color: var(--white);
	font-size: clamp(1.75rem, 2.6vw, 2.4rem);
	margin-bottom: 18px;
	max-width: 12ch;
}

.bento-hero p {
	color: #A7B0C2;
	font-size: 0.98rem;
	max-width: 42ch;
	margin-bottom: 28px;
}

.bento-media {
	position: relative;
	min-height: 320px;
}

/* Full-bleed composite - crop rather than letterbox. Anchored to the top:
   the WP logo, the code card and her face are all in the upper half, and the
   crossed arms are meant to run off the bottom. Anchoring bottom decapitates her. */
.bento-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}


/* Support video (20x-faster feature row): looping, muted, controls-free clip of a
   real support agent, with floating "live support" badges kept to the empty left
   side of the frame so they never cover her. */
/* Full-bleed in the column, matching the Support row's night-shift video: no
   frame box, natural aspect, just rounded corners + a soft shadow. .video-full
   strips the .feature-visual frame this row used to sit inside. */
.video-full {
	background: none;
	border: 0;
	aspect-ratio: auto;
	overflow: visible;
	/* Was a flex box that centred a small square; now the video fills the column,
	   so drop the centring - it was offsetting the badges' positioning context. */
	display: block;
}
.support-video {
	position: relative;
	width: 100%;
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 60px rgba(20, 24, 44, 0.20);
}
.sv-media {
	width: 100%;
	height: auto;                 /* natural aspect, fills the column width */
	border-radius: var(--radius-lg);
	display: block;
}
.sv-badge {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 11px;
	background: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-radius: 12px;
	padding: 11px 14px;
	box-shadow: 0 10px 28px rgba(9, 12, 28, 0.22);
	max-width: 224px;
}
.sv-badge-tl { top: 20px; left: 20px; }
.sv-badge-bl { bottom: 20px; left: 20px; }
.sv-txt strong { display: block; font-size: 0.86rem; color: var(--ink); line-height: 1.25; }
.sv-txt .sub { display: block; font-size: 0.72rem; color: var(--slate); margin-top: 1px; }
.sv-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #12B886;
	flex-shrink: 0;
	animation: sv-pulse 2s infinite;
}
@keyframes sv-pulse {
	0% { box-shadow: 0 0 0 0 rgba(18, 184, 134, 0.45); }
	70% { box-shadow: 0 0 0 8px rgba(18, 184, 134, 0); }
	100% { box-shadow: 0 0 0 0 rgba(18, 184, 134, 0); }
}
.sv-ico {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--brand-gradient);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.sv-ico svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .sv-dot { animation: none; } }
@media (max-width: 560px) {
	.sv-badge { max-width: 190px; padding: 9px 12px; }
	.sv-txt strong { font-size: 0.8rem; }
}

.bento-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.bento-card {
	border-radius: var(--radius-lg);
	padding: 44px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	min-height: 300px;
}

.bento-card.light {
	background: linear-gradient(120deg, #EEF2FA 0%, #EAF0FB 55%, #E8EEFA 100%);
}

.bento-card.light h3 {
	font-size: 1.5rem;
	margin-bottom: 16px;
}

.bento-card.light p {
	color: var(--slate-dark);
	font-size: 0.95rem;
	max-width: 46ch;
	margin-bottom: 26px;
}

.bento-card.grad {
	position: relative;
	overflow: hidden;
	background: linear-gradient(145deg, var(--brand-coral) 0%, #1B2B6B 45%, #101A3A 72%, #2540B0 100%);
	color: var(--white);
}

/* Heading + supporting text, matching the security card beside it - this was a
   single display-size sentence, which title case turned into four lines of
   shouting. position:relative on both so they sit above the watermark. */
.bento-card.grad h3 {
	position: relative;
	color: var(--white);
	font-size: 1.5rem;
	margin-bottom: 16px;
}

.bento-card.grad p {
	position: relative;
	font-size: 0.95rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
	max-width: 34ch;
	margin-bottom: 26px;
}

.bento-card.grad .btn { position: relative; }

/* Same chevron motif as the hero art and the mega promo */
.bento-card.grad .watermark {
	position: absolute;
	right: -40px;
	bottom: -60px;
	width: 240px;
	color: var(--white);
	opacity: 0.1;
	pointer-events: none;
}

@media (max-width: 900px) {
	.bento-hero { grid-template-columns: 1fr; }
	.bento-hero .bento-copy { padding: 40px 32px; order: 1; }
	.bento-media { order: 2; min-height: 340px; }
	.bento-row { grid-template-columns: 1fr; }
	.bento-card { padding: 36px 32px; min-height: 0; }
}

/* Floating proof card - shared base. The homepage hero that introduced it is
   gone; the Enterprise and Agency panels still build on this box (see
   .ent-art .art-card), so it stays. */
.art-card {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 9px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 10px 14px;
	white-space: nowrap;
	font-size: clamp(11px, 2.5cqw, 14px);
	line-height: 1.3;
	color: var(--ink);
	font-weight: 500;
}

.art-card b {
	font-family: var(--font-mono);
	font-weight: 600;
}

/* Bare glyph, no badge. A coloured circle around a generic line icon is the
   stock component, and the glyphs weren't carrying information the numbers
   didn't already state - so they sit back and let the figures lead. */
.art-card .ico {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	color: var(--slate);
}

.art-card .ico svg {
	width: 1.2em;
	height: 1.2em;
	stroke-width: 1.75;
	fill: none;
}
/* Shared coral pulse - used by .cp-status on the Enterprise/Agency panels. */
@keyframes pulse-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(61, 99, 245, 0.5); }
	50% { box-shadow: 0 0 0 6px rgba(61, 99, 245, 0); }
}

@media (max-width: 1024px) {
	.hero-grid { grid-template-columns: 1fr; }
}

/* ============================================
   Logo / trust strip
   ============================================ */
/* Client logos. Replaces the old tech-stack list - real customers are stronger
   proof than component names. No tint: the quiet grid sits on the page rather
   than in a band of its own. */
.trust-strip {
	padding: 64px 0 68px;
	border-bottom: 1px solid var(--border);
}


/* Quiet grid of client logos. No band, no cells, no marquee - five across with
   room to breathe. Greyed back so the row reads as one texture rather than ten
   competing brands; full colour on hover. */
.client-cap {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--slate);
	text-align: center;
	margin-bottom: 38px;
}

/* Intro block above the client logos - heading + one line on who we host, so
   the strip reads as a section rather than a bare row of marks. Kept smaller
   than a full section title so the logos stay the focus of the strip. */
.trust-head { margin-bottom: 44px; }
.trust-head .client-cap { margin-bottom: 14px; }
.trust-head h2 { font-size: clamp(1.35rem, 2.2vw, 1.65rem); margin-bottom: 12px; }
.trust-head p { font-size: 0.95rem; color: var(--slate); }

.client-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 44px 30px;
	align-items: center;
	justify-items: center;
}

.client-grid img {
	height: 30px;
	width: auto;
	max-width: 100%;
	opacity: 0.55;
	filter: grayscale(1);
	transition: opacity 0.2s ease, filter 0.2s ease;
}

.client-grid img:hover { opacity: 1; filter: grayscale(0); }

@media (max-width: 900px) {
	.client-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
}
.stack-logos {
	display: flex;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}

.stack-logos span {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	color: var(--slate-dark);
	font-weight: 500;
}

/* ============================================
   Solutions grid
   ============================================ */
.solutions-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

/* Ink cards. The product icons are gradient-filled boxes drawn to sit on a
   dark surface - on white they read as flat swatches, on ink the gradient
   reads as light. Text colours below are all inverted for this. */
.solution-card {
	background: var(--ink-soft);
	padding: 32px;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(10, 15, 28, 0.16);
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.solution-card:hover {
	background: #1A2238;
	transform: translateY(-5px);
	box-shadow: 0 22px 48px rgba(10, 15, 28, 0.28);
}

/* Product icons - rebuilt from the live site's assets as true vectors.
   The originals wrap a 3202x2476 PNG of a plain gradient (980KB each, one copy
   per icon) and punch the glyph out of it. The gradient is just the brand
   ramp, so it's a <linearGradient> here and the glyphs stay as paths. */
.solution-card .icon-art {
	width: 48px;
	height: 48px;
	display: block;
	margin-bottom: 8px;
	transition: transform 0.2s ease;
}

.solution-card:hover .icon-art { transform: translateY(-2px) scale(1.04); }

.solution-card h3 { font-size: 1.1rem; color: var(--white); }

.solution-card p {
	color: #A7B0C2;
	font-size: 0.9rem;
	flex-grow: 1;
}

.solution-card .price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.11);
	margin-top: 4px;
}

.solution-card .price {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	color: var(--white);
}

.solution-card .price .from { color: var(--slate); font-size: 0.75rem; }

/* Was color: var(--blue) - a token that is never defined anywhere, so the
   declaration was invalid and this silently inherited its colour. */
.solution-card .arrow-link {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--brand-purple);
	display: flex;
	align-items: center;
	gap: 4px;
}

/* ============================================
   Split feature rows (Why FastCow)
   ============================================ */
.feature-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	padding: 56px 0;
}

.feature-row:not(:last-child) { border-bottom: 1px solid var(--border); }

.feature-row.reverse .feature-visual { order: 2; }
.feature-row.reverse .feature-copy { order: 1; }

.feature-copy .eyebrow { margin-bottom: 12px; }

/* Same scale as the WooCommerce/Support headlines so all the feature-row
   headings carry equal weight - the base used to sit at 1.6rem, which left the
   Speed row visibly smaller than its Support sibling. */
.feature-copy h3 {
	font-size: clamp(1.75rem, 3.2vw, 2.4rem);
	margin-bottom: 16px;
}

.feature-copy p {
	color: var(--slate-dark);
	margin-bottom: 20px;
}

.feature-copy ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 24px;
}

.feature-copy ul li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.925rem;
	color: var(--ink);
}

.feature-copy ul li svg {
	width: 16px;
	height: 16px;
	/* was var(--green) - never defined anywhere, so this silently inherited ink */
	color: var(--accent);
	flex-shrink: 0;
	margin-top: 3px;
}

.feature-visual {
	background: var(--paper);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	aspect-ratio: 4/3;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

/* Copy left, artwork right. */
.support-row .feature-visual { order: 2; }
.support-row .feature-copy   { order: 1; }

/* Size now comes from the shared .feature-copy h3 rule; the Support headline
   just wants a tighter measure so "never sleeps" wraps cleanly. */
.support-row .feature-copy h3 {
	max-width: 14ch;
}

/* No panel: the section is --paper and .feature-visual is --paper, so the box
   only ever showed its border. The artwork sits straight on the page instead.
   It is flattened onto --paper (32% of it is transparent and JPEG has no
   alpha), so this section must stay --paper. */
.support-media {
	background: none;
	border: 0;
	aspect-ratio: auto;
	overflow: visible;
}

.support-media img {
	width: 100%;
	height: auto;
	display: block;
}

/* The Support row now carries a looping video in place of the transparent
   illustration. A real video is a solid rectangle, so it takes a frame the PNG
   didn't need - rounded corners + a soft shadow to match the rest of the page. */
.support-media video {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 60px rgba(20, 24, 44, 0.18);
}

/* Stacked: copy first, so the argument leads and the artwork follows. */
@media (max-width: 768px) {
	.support-row .feature-visual { order: 2; }
	.support-row .feature-copy   { order: 1; }
}
/* mini bar chart visual for speed section */
.mini-chart {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	height: 140px;
}

.mini-chart .bar {
	width: 34px;
	border-radius: 6px 6px 0 0;
	background: var(--border);
	position: relative;
}

.mini-chart .bar.active { background: var(--brand-gradient); }

.mini-chart .bar .bar-label {
	position: absolute;
	bottom: -28px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-mono);
	font-size: 0.65rem;
	color: var(--slate);
	white-space: nowrap;
}

.mini-chart .bar .bar-value {
	position: absolute;
	top: -22px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--ink);
}

.mini-chart .bar.active .bar-value {
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ============================================
   Trio (security / migration / support)
   ============================================ */
.trio-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.trio-item {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 18px;
	box-shadow: 0 1px 3px rgba(10, 15, 28, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.trio-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 44px rgba(10, 15, 28, 0.11);
	border-color: transparent;
}

/* ---- vignettes ----
   Built in CSS/SVG rather than photographed. The live site uses three stock
   portraits here; these show the thing being described instead, cost a few KB,
   and stay sharp at any size. */
.vig {
	position: relative;
	height: 210px;
	border-radius: var(--radius-md);
	overflow: hidden;
	padding: 22px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	background: linear-gradient(140deg, var(--brand-purple) 0%, var(--brand-pink) 55%, var(--brand-coral) 115%);
}

.vig .chip {
	background: var(--white);
	border-radius: 8px;
	padding: 9px 12px;
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 0.72rem;
	color: var(--ink);
	box-shadow: 0 4px 14px rgba(10, 15, 28, 0.1);
}

.vig .chip svg { width: 13px; height: 13px; flex: none; }

.vig .tick {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--brand-purple);
	display: grid;
	place-items: center;
	flex: none;
}

.vig .tick svg { width: 8px; height: 8px; stroke: #fff; fill: none; stroke-width: 3; }
.vig .mono { font-family: var(--font-mono); }

/* migration dial - same dasharray trick as the hero illustration */
.vig .dial {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 104px;
	height: 104px;
	background: var(--white);
	border-radius: var(--radius-md);
	display: grid;
	place-items: center;
	box-shadow: 0 8px 22px rgba(10, 15, 28, 0.14);
}

.vig .dial svg { width: 64px; height: 64px; }

.vig .dial .t {
	position: absolute;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--brand-coral);
}

/* r=24 -> circumference ~151. This resting value is the finished state, so the
   dial is correct even if the fill animation never runs. */
.vig .dial .arc { stroke-dasharray: 151 151; }

@keyframes dial-fill {
	from { stroke-dasharray: 0 151; }
}

/* Fires when the card scrolls into view (JS adds .is-live), not on page load -
   the section sits well down the page and would otherwise finish unseen. */
@media (prefers-reduced-motion: no-preference) {
	.trio-item.is-live .vig .dial .arc {
		animation: dial-fill 3.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
	}
}

.vig .bars { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 2px; }

/* Inline height + delay per bar: the height is the still fallback, the delay
   staggers them so the meter waves instead of pulsing in unison. */
.vig .bars i {
	width: 5px;
	border-radius: 2px;
	background: var(--brand-purple);
}

/* Colour tracks height because both animate on the same keyframes - a bar is
   purple when it's low and coral when it peaks. */
@keyframes load-bar {
	from { height: 22%; background-color: var(--brand-purple); }
	to   { height: 94%; background-color: var(--brand-coral); }
}

@media (prefers-reduced-motion: no-preference) {
	.vig .bars i { animation-name: load-bar; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; }
}

.vig .line { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.38); }

/* ---- support chat vignette ----
   A real thread that scrolls, rather than three grey placeholder bars. The
   window is masked at the top so messages dissolve instead of clipping. */
/* Fixed height, because the scroll distance below is derived from it. */
.chat-win {
	position: relative;
	flex: none;
	height: 120px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 100%);
}

.chat-track {
	display: flex;
	flex-direction: column;
	gap: 7px;
	position: absolute;
	inset: auto 0 0 0;
}

.chat-msg {
	max-width: 84%;
	padding: 7px 10px;
	border-radius: 10px;
	font-size: 0.68rem;
	line-height: 1.4;
}

/* the customer */
.chat-msg.them {
	align-self: flex-end;
	background: rgba(255, 255, 255, 0.24);
	color: var(--white);
	border-bottom-right-radius: 3px;
}

/* FastCow - white, so the replies are what stands out */
.chat-msg.us {
	align-self: flex-start;
	background: var(--white);
	color: var(--ink);
	border-bottom-left-radius: 3px;
	box-shadow: 0 3px 10px rgba(10, 15, 28, 0.10);
}

.chat-msg .t {
	display: block;
	margin-top: 3px;
	font-family: var(--font-mono);
	font-size: 0.56rem;
	opacity: 0.55;
}

/* Steps with holds, so it reads as replies arriving rather than a crawl.
   The track is bottom-anchored, so translateY(track height - window height)
   parks it at the top of the thread and 0 parks it at the newest message.
   Percentages in translateY resolve against the element's OWN height, so
   calc(100% - 120px) IS that overflow - no hard-coded pixel distance to go
   stale when the card narrows and the messages rewrap. */
@keyframes chat-scroll {
	0%, 14%   { transform: translateY(calc(100% - 120px)); }
	31%, 45%  { transform: translateY(calc(66.667% - 80px)); }
	62%, 76%  { transform: translateY(calc(33.333% - 40px)); }
	93%, 100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
	.chat-track { animation: chat-scroll 15s ease-in-out infinite; }
}

.vig .btn {
	align-self: flex-start;
	background: var(--ink);
	color: var(--white);
	border-radius: 6px;
	padding: 8px 16px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.trio-item .body { padding: 22px 10px 8px; }

.trio-item .tag {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--slate);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 4px 8px;
	margin-bottom: 14px;
}

.trio-item h3 { font-size: 1.2rem; margin-bottom: 10px; }
.trio-item p { color: var(--slate-dark); font-size: 0.9rem; line-height: 1.6; }

/* ============================================
   Case studies
   ============================================ */
.case-studies-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.case-study-card {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.case-study-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(10, 15, 28, 0.08);
}

.case-study-media {
	background: var(--ink);
	padding: 32px;
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.case-study-media .big-stat {
	font-family: var(--font-mono);
	font-size: 2.5rem;
	font-weight: 600;
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.case-study-media .stat-label {
	font-size: 0.85rem;
	color: var(--slate);
}

.case-study-body { padding: 24px 28px 28px; }

.case-study-body h3 { font-size: 1.05rem; margin-bottom: 8px; }
.case-study-body p { color: var(--slate-dark); font-size: 0.9rem; }

/* ============================================================
   Case studies index
   ============================================================
   Editorial, light, reuses .case-study-card for the grid. The
   metric leads every card because the metric is the story - a
   host proves itself in numbers, not adjectives.
   ============================================================ */

/* ---- centred hero with the chevron field ----
   The pattern is the FastCow logo mark tiled, not a stock texture - the same
   chevron used in the nav promo, the CTA watermark and the homepage hero art.
   Faint, brand-tinted, and radial-masked so it's strongest behind the headline
   and dissolves before it reaches the edges, so it never fights the type. */
.cs-hero {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding-top: 88px;
	padding-bottom: 56px;
}

.cs-hero .container { position: relative; z-index: 1; }
.cs-hero .section-head { margin-left: auto; margin-right: auto; }
.cs-hero .eyebrow { justify-content: center; }

/* Slate watermark, not the brand ramp. The first cut tiled the chevrons in the
   same gradient the headline text uses - figure and ground in one palette, and
   they melted together. Ink at 5% reads as a stationery watermark; the
   headline's gradient is now the only colour on stage. */
.cs-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.05;
	pointer-events: none;
	-webkit-mask-image: radial-gradient(ellipse 64% 80% at 50% 36%, #000 20%, transparent 72%);
	mask-image: radial-gradient(ellipse 64% 80% at 50% 36%, #000 20%, transparent 72%);
}

.cs-hero-bg svg { width: 100%; height: 100%; display: block; }

/* Centre the aggregate stats under the centred hero. */
.cs-hero .cs-stats { justify-content: center; border-top: 0; gap: 20px 52px; flex-wrap: wrap; }
.cs-hero .cs-stats .hero-stat { align-items: center; text-align: center; }

/* Category pill on a card, and the filter chips share one look. */
.cs-tag {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	background: rgba(61, 99, 245, 0.09);
	padding: 4px 9px;
	border-radius: 99px;
}

/* ---- featured study ---- */
.cs-featured {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--white);
}

.cs-featured .panel {
	background: var(--ink);
	color: var(--white);
	padding: 48px 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.cs-featured .panel::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 420px 240px at 20% 0%, rgba(181, 144, 241, 0.22), transparent 70%),
		radial-gradient(ellipse 420px 240px at 90% 100%, rgba(61, 99, 245, 0.18), transparent 70%);
	pointer-events: none;
}

.cs-featured .panel > * { position: relative; }

.cs-featured .metric {
	font-family: var(--font-mono);
	font-size: clamp(3rem, 5vw, 4.4rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.cs-featured .metric-label { margin-top: 10px; color: var(--slate); font-size: 0.9rem; }

.cs-featured blockquote {
	margin-top: 32px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 1.05rem;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--white);
	border-top: 1px solid var(--border-dark);
	padding-top: 26px;
}

.cs-featured .attrib { margin-top: 14px; font-size: 0.8rem; color: var(--slate); }
.cs-featured .attrib b { color: var(--white); font-weight: 600; }

.cs-featured .story { padding: 48px 44px; display: flex; flex-direction: column; }
.cs-featured .story .cs-tag { align-self: flex-start; margin-bottom: 18px; }
.cs-featured .story h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 16px; }
.cs-featured .story p { color: var(--slate-dark); font-size: 1rem; line-height: 1.7; margin-bottom: 14px; }
.cs-featured .story .read { margin-top: auto; }

/* ---- filter chips ---- */
.cs-filter {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 32px;
}

.cs-chip {
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--slate-dark);
	background: var(--white);
	border: 1px solid var(--border);
	padding: 9px 18px;
	border-radius: 99px;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.cs-chip:hover { border-color: var(--ink); color: var(--ink); }
.cs-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cs-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* ---- grid cards: tag + client line ---- */
.case-study-card .cs-tag { margin-bottom: 14px; }
.case-study-card .client { margin-top: 14px; font-size: 0.8rem; color: var(--slate); font-family: var(--font-mono); }

/* Hidden by the filter. A plain class the JS toggles, so no inline styles. */
.case-study-card.is-filtered { display: none; }

@media (max-width: 900px) {
	.cs-featured { grid-template-columns: 1fr; }
	.cs-featured .panel { padding: 36px 28px; }
	.cs-featured .story { padding: 32px 28px; }
}

/* ============================================
   Testimonials
   ============================================ */
/* Deeper, brand-tinted base so the light review cards separate and lift. */
.testimonials-section { background: #E7E4EF; }
.testimonials-section .review-card { box-shadow: 0 16px 44px rgba(20, 24, 44, 0.12); }

/* Trustpilot rating badge under the heading */
.tp-rating { display: flex; flex-direction: column; align-items: center; gap: 11px; margin-top: 18px; }
.tp-stars { display: inline-flex; gap: 4px; }
.tp-stars span { width: 26px; height: 26px; background: #00b67a; color: #fff; display: grid; place-items: center; font-size: 16px; line-height: 1; border-radius: 3px; }
.tp-meta { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; color: var(--slate-dark); margin: 0; }
.tp-meta strong { color: var(--ink); }
.tp-word { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink); }
.tp-word svg { width: 16px; height: 16px; }

/* Spotlight rail - one review at a time, portrait alongside.
   Native scroll-snap does the dragging and swiping; the arrows just call
   scrollBy. No carousel library, and it still works with JS disabled. */
.review-rail {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 4px;
	scrollbar-width: none;
}

.review-rail::-webkit-scrollbar { display: none; }

.review-card {
	scroll-snap-align: center;
	flex: none;
	width: 100%;
	/* A floor, not a fixed height: the longest review still sets the real height
	   and every card matches it. Content is centred, so Tony's 60-character
	   review sits balanced rather than stranded at the top. */
	min-height: 380px;
	display: flex;
	align-items: center;
	gap: 44px;
	padding: 60px 64px;
	border-radius: var(--radius-lg);
	background: linear-gradient(120deg, #EEF2FA 0%, #EAF0FB 55%, #E8EEFA 100%);
}

.review-card .review-body { flex: 1; min-width: 0; }

.review-card .stars {
	color: #E8B341;
	letter-spacing: 2px;
	font-size: 0.9rem;
	margin-bottom: 14px;
}

.review-card h3 {
	font-size: 1.6rem;
	margin-bottom: 14px;
}

.review-card p {
	font-size: 1.08rem;
	line-height: 1.6;
	color: var(--slate-dark);
	max-width: 62ch;
}

.review-card p b { color: var(--ink); font-weight: 600; }

.review-who {
	flex: none;
	width: 190px;
	text-align: center;
}

.review-who img {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	margin: 0 auto 14px;
	display: block;
}

/* Only two reviewers have a photograph. The rest get initials drawn in CSS -
   the live site ships a PNG per person for what is literally two letters. */
.review-initials {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	margin: 0 auto 14px;
	display: grid;
	place-items: center;
	background: var(--ink-soft);
	color: var(--white);
	font-family: var(--font-mono);
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.review-who .name { font-weight: 600; font-size: 0.95rem; }
.review-who .role { font-size: 0.8rem; color: var(--slate); margin-top: 2px; }

.review-nav {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: center;
	margin-top: 26px;
}

.review-nav button {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--white);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.review-nav button:hover { border-color: var(--ink); background: var(--paper); }
.review-nav svg { width: 15px; height: 15px; stroke: var(--ink); fill: none; stroke-width: 2; }

.review-count {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	color: var(--slate);
	min-width: 52px;
	text-align: center;
}

@media (max-width: 860px) {
	.review-card {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 24px;
		padding: 34px 28px;
	}
	.review-who { width: auto; text-align: left; display: flex; align-items: center; gap: 12px; }
	.review-who img { width: 56px; height: 56px; margin: 0; }
	.review-initials { width: 56px; height: 56px; margin: 0; font-size: 1rem; }
	.review-card h3 { font-size: 1.25rem; }
	.review-card p { font-size: 0.98rem; }
}

/* ============================================
   Final CTA
   ============================================ */
/* Same brand gradient as .bento-card.grad - the CTA needs to read as the
   site's "closing" surface, not another slab of the footer's flat ink. */
.cta-section {
	background: linear-gradient(145deg, var(--brand-coral) 0%, #1B2B6B 45%, #101A3A 72%, #2540B0 100%);
	color: var(--white);
	text-align: center;
	border-radius: var(--radius-lg);
	margin: 0 32px;
	padding: 72px 32px;
	position: relative;
	overflow: hidden;
}

.cta-section .watermark {
	position: absolute;
	left: 50%;
	bottom: -120px;
	width: 520px;
	transform: translateX(-50%);
	color: var(--white);
	opacity: 0.08;
	pointer-events: none;
}

.cta-section::before {
	content: '';
	position: absolute;
	inset: -10% -60%;
	background: radial-gradient(ellipse 700px 350px at 30% 0%, rgba(255, 255, 255, 0.16), transparent),
		radial-gradient(ellipse 700px 350px at 70% 100%, rgba(255, 255, 255, 0.12), transparent);
	pointer-events: none;
	animation: cta-glow-drift 10s ease-in-out infinite;
}

@keyframes cta-glow-drift {
	0%   { transform: translateX(-35%); }
	50%  { transform: translateX(35%); }
	100% { transform: translateX(-35%); }
}

@media (prefers-reduced-motion: reduce) {
	.cta-section::before { animation: none; }
}

.cta-section h2 {
	color: var(--white);
	font-size: clamp(1.8rem, 3.5vw, 2.5rem);
	margin-bottom: 16px;
	position: relative;
}

.cta-section p {
	color: rgba(255, 255, 255, 0.85);
	max-width: 480px;
	margin: 0 auto 32px;
	position: relative;
}

.cta-actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	position: relative;
}

.cta-actions .btn-outline {
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.4);
}
.cta-actions .btn-outline:hover {
	border-color: var(--white);
	background: rgba(255, 255, 255, 0.12);
	transform: translateY(-1px);
}

/* ============================================================
   ABOUT
   ============================================================
   Light, like the homepage - the dark ground is reserved for
   the Enterprise tier and means something. This is the company,
   not the product.
   ============================================================ */

/* ---- vision / mission / future ---- */
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }

.pillar {
	background: linear-gradient(120deg, #EEF2FA 0%, #EAF0FB 55%, #E8EEFA 100%);
	border-radius: var(--radius-lg);
	padding: 34px 30px;
}

.pillar .n {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	color: var(--accent);
	margin-bottom: 14px;
}

.pillar h3 { font-size: 1.2rem; margin-bottom: 12px; }
.pillar p { font-size: 0.92rem; line-height: 1.7; color: var(--slate-dark); }

/* ---- commitments ---- */
.commit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 28px; }

.commit .ico {
	width: 40px;
	height: 40px;
	border-radius: 9px;
	background: var(--brand-gradient-diag);
	display: grid;
	place-items: center;
	margin-bottom: 18px;
}

.commit .ico svg { width: 20px; height: 20px; color: var(--white); }
.commit h3 { font-size: 1rem; margin-bottom: 10px; }
.commit p { font-size: 0.88rem; line-height: 1.65; color: var(--slate-dark); }

/* ---- stats band ---- */
.stat-band {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	background: var(--ink);
	border-radius: var(--radius-lg);
	padding: 52px 44px;
	position: relative;
	overflow: hidden;
}

.stat-band::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 600px 300px at 12% 0%, rgba(181, 144, 241, 0.2), transparent 70%),
		radial-gradient(ellipse 600px 300px at 88% 100%, rgba(61, 99, 245, 0.16), transparent 70%);
	pointer-events: none;
}

.stat-band > * { position: relative; }
.stat-band .n {
	font-family: var(--font-mono);
	font-size: 2.6rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-variant-numeric: tabular-nums;
}

/* --slate is a mid grey chosen for light backgrounds; on the band's --ink
   ground it lands at 3.35:1, under the 4.5:1 small-text minimum, and reads as
   dark-on-dark. This is the same translucent white the other dark sections
   use for secondary text (hero stat labels), which measures 9.3:1 here. */
.stat-band .k { margin-top: 10px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); }

/* ---- team ----
   No portraits: the section carries names, roles and the words each person
   chose. A small initials disc on the brand ramp anchors the left edge so
   twelve text cards still scan as a grid rather than a wall of paragraphs. */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.team-card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 26px 24px;
}

/* Name and role sit beside the disc, both baselines aligned to it. */
.team-id { display: flex; align-items: center; gap: 14px; }

.team-card .initials {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--brand-gradient-diag);
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	color: var(--white);
}

/* min-width:0 so a long name wraps instead of stretching the flex row. */
.team-who { min-width: 0; }

.team-card h3 { font-size: 1rem; margin: 0 0 3px; line-height: 1.3; }
.team-card .role { font-size: 0.82rem; line-height: 1.4; color: var(--slate-dark); }
.team-card hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0 16px; }
.team-card p { font-size: 0.88rem; line-height: 1.65; color: var(--slate-dark); margin: 0; }

/* ---- history timeline ---- */
.tl { display: grid; gap: 0; }

.tl-row {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 44px;
	padding: 34px 0;
	border-top: 1px solid var(--border);
	align-items: start;
}

.tl-row:last-child { border-bottom: 1px solid var(--border); }

.tl-year {
	font-family: var(--font-mono);
	font-size: 2.4rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-variant-numeric: tabular-nums;
}

.tl-row .body h3 { font-size: 1.15rem; margin-bottom: 10px; }
.tl-row .body p { color: var(--slate-dark); font-size: 0.95rem; line-height: 1.75; max-width: 68ch; }

/* ---- cloud list ---- */
.cloud-list { display: flex; flex-direction: column; gap: 0; }

.cloud-list li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 0;
	border-bottom: 1px solid var(--border);
	font-size: 1rem;
	font-weight: 500;
}

.cloud-list li:first-child { border-top: 1px solid var(--border); }

/* This list only ever sits on the dark .woo-section, where the standard
   --accent blue is 3.64:1 against the ground. --accent-dim is the lighter
   ramp stop kept for exactly this case and measures 5.7:1. */
.cloud-list .num {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--accent-dim);
	flex-shrink: 0;
}

@media (max-width: 1100px) {
	.commit-grid { grid-template-columns: repeat(2, 1fr); }
	.team-grid { grid-template-columns: repeat(2, 1fr); }
	.pillar-grid { grid-template-columns: 1fr; }
	.stat-band { grid-template-columns: repeat(2, 1fr); gap: 34px; }
}

@media (max-width: 768px) {
	.commit-grid { grid-template-columns: 1fr; }
	.tl-row { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; }
	.stat-band { padding: 36px 26px; }
}

@media (max-width: 620px) {
	.team-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MANAGED WORDPRESS
   ============================================================
   A light page, like the homepage. Only two things are new: a
   light colour treatment for the shared .pkg cards (they were
   built colourless and dark-scoped for Enterprise), and the
   monthly/annual billing toggle. Everything else reuses the
   existing components.
   ============================================================ */

/* ---- hero media: the speed panel ----
   speed-panel.jpg has #101828 flattened into its transparent edges (same trap
   as woo-panel), so the frame behind it MUST be that colour or the soft edges
   show as violet rectangles on any other ground. */
.mwp-media {
	background: #101828;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 5 / 4;
	position: relative;
}

.mwp-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

/* ---- duo cards (CDN + Guru support) ---- */
.duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.duo {
	background: linear-gradient(120deg, #EEF2FA 0%, #EAF0FB 55%, #E8EEFA 100%);
	border-radius: var(--radius-lg);
	padding: 40px 36px;
}

.duo .ico {
	width: 46px;
	height: 46px;
	border-radius: 11px;
	background: var(--brand-gradient-diag);
	display: grid;
	place-items: center;
	margin-bottom: 22px;
}

.duo .ico svg { width: 23px; height: 23px; color: var(--white); }
.duo h3 { font-size: 1.3rem; margin-bottom: 12px; }
.duo p { color: var(--slate-dark); font-size: 0.95rem; line-height: 1.7; }

/* ---- included-from-day-one grid ---- */
.incl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 32px; }

.incl-grid span {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 0;
	border-bottom: 1px solid var(--border);
	font-size: 0.95rem;
	font-weight: 500;
}

.incl-grid svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); }

/* ---- billing toggle ---- */
.billing {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 24px auto 0;
	padding: 5px;
	border-radius: 99px;
	background: var(--paper-dim);
	border: 1px solid var(--border);
}

.billing button {
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--slate-dark);
	padding: 9px 20px;
	border-radius: 99px;
	transition: color 0.15s ease, background 0.15s ease;
}

.billing button[aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(10, 15, 28, 0.1); }
.billing button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.billing .save {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--accent);
	padding-right: 12px;
	letter-spacing: 0.02em;
}

/* ---- pricing cards, light ground ----
   Same .pkg-card the Enterprise page uses; only the colour differs. Shared by
   every light product page (managed WP, WooCommerce) via :is(), so the light
   treatment lives once and can never fight the .page-enterprise dark one. */
:is(.page-mwp, .page-woo, .page-agency, .page-blog, .page-edu) .pkg .name { color: var(--slate-dark); }
:is(.page-mwp, .page-woo, .page-agency, .page-blog, .page-edu) .pkg .amt { color: var(--ink); }
:is(.page-mwp, .page-woo, .page-agency, .page-blog, .page-edu) .pkg .per { color: var(--slate); }

:is(.page-mwp, .page-woo, .page-agency, .page-blog, .page-edu) .pkg-card {
	background: var(--white);
	box-shadow: inset 0 0 0 1px var(--border), 0 1px 3px rgba(10, 15, 28, 0.04);
}

:is(.page-mwp, .page-woo, .page-agency, .page-blog, .page-edu) .pkg-card.rec { box-shadow: 0 22px 48px rgba(61, 99, 245, 0.14); }
:is(.page-mwp, .page-woo, .page-agency, .page-blog, .page-edu) .pkg-card li { color: var(--slate-dark); }
:is(.page-mwp, .page-woo, .page-agency, .page-blog, .page-edu) .pkg-card .sub { color: var(--slate); font-size: 0.78rem; margin-top: -8px; }

/* ---- store media (WooCommerce hero) ----
   woo-panel.jpg has --ink flattened into its transparent edges (it lives in the
   homepage's ink .woo-section), so the frame behind it MUST be ink or the soft
   edges show as dark rectangles on any other ground. */
.store-media {
	background: var(--ink);
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 5 / 4;
}

.store-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- video frame ----
   Square (the source is 800x800). Rounded, shadowed, sits in a feature-row
   like any other .feature-visual. Native controls + poster: the poster is a
   real frame so it never shows a black box, and click-to-play keeps the audio
   available without autoplaying at the reader. */
.video-frame {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(10, 15, 28, 0.18);
	background: var(--ink);
}

.video-frame video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- floating proof cards around the video ----
   Reuses .art-card (the homepage/enterprise hero cards). The stage is the
   positioning context; cards hang off the video's edges and stagger in. Kept
   to the right and top/bottom so none reaches back into the copy column. */
.video-stage { position: relative; }

.video-stage .art-card {
	font-size: clamp(10px, 1.15vw, 13px);
	z-index: 3;
	padding: 9px 13px;
	gap: 9px;
}

/* Gradient tile + white glyph, same device as the enterprise hero cards. */
.video-stage .art-card .ico {
	width: 1.9em;
	height: 1.9em;
	border-radius: 5px;
	background: var(--brand-gradient-diag);
	color: var(--white);
}

.video-stage .art-card .ico svg { width: 1.05em; height: 1.05em; stroke-width: 2; }

/* vc-2 lives lower-right, over the shoulder - the whole upper-right of the clip
   is the presenter's face, so anything at mid-height there covers it. */
.video-stage .vc-1 { top: -4%;    left: -12%;  box-shadow: 0 14px 32px rgba(10,15,28,.16); }
.video-stage .vc-2 { bottom: 34%; right: -12%; box-shadow: 0 20px 44px rgba(10,15,28,.20); }
.video-stage .vc-3 { bottom: 24%; left: -13%;  box-shadow: 0 20px 44px rgba(10,15,28,.20); }
.video-stage .vc-4 { bottom: -4%; right: -9%;  box-shadow: 0 14px 32px rgba(10,15,28,.16); }

@media (prefers-reduced-motion: no-preference) {
	.video-stage .art-card {
		opacity: 0;
		transform: translateY(14px) scale(0.95);
		animation: ent-card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	}
	.video-stage .vc-1 { animation-delay: 0.3s; }
	.video-stage .vc-2 { animation-delay: 0.55s; }
	.video-stage .vc-3 { animation-delay: 0.8s; }
	.video-stage .vc-4 { animation-delay: 1.05s; }
}

/* Stacked, there is no room to hang off the edges - the cards flow below the
   video as a centred column instead of overlapping the copy or the viewport. */
@media (max-width: 1024px) {
	.video-stage .art-card { position: static; margin: 10px auto 0; width: fit-content; transform: none; }
}

/* ---- agency dashboard host ----
   The cp-mini was sized inside .ent-art (which supplied width + a container
   context). Standalone it just needs a full-width block to live in. */
.agency-dash { width: 100%; }

/* ---- pricing volume note ----
   Agencies routinely run more than the F10 cap of 10 sites, so the grid is
   followed by an honest route to sales rather than a made-up bigger tier. */
.pkg-note {
	text-align: center;
	margin-top: 26px;
	font-size: 0.92rem;
	color: var(--slate-dark);
}

.pkg-note a { color: var(--accent); font-weight: 600; }
.pkg-note a:hover { text-decoration: underline; }

/* ---- CDN latency panel (hero visual) ----
   The page's whole claim in one picture: 40 edge PoPs, every one under the
   40ms ceiling line. On-message for a CDN page in a way a stock image isn't. */
.cdn-panel {
	background: var(--ink);
	border-radius: var(--radius-lg);
	padding: 26px 28px 30px;
	box-shadow: 0 30px 70px rgba(10, 15, 28, 0.28);
	position: relative;
	overflow: hidden;
}

.cdn-panel::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 500px 260px at 15% 0%, rgba(181, 144, 241, 0.16), transparent 70%),
		radial-gradient(ellipse 500px 260px at 90% 100%, rgba(61, 99, 245, 0.13), transparent 70%);
	pointer-events: none;
}

.cdn-panel > * { position: relative; }

.cdn-panel .cp-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 18px;
}

.cdn-panel .cp-head .t {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--slate);
}

.cdn-panel .cp-head .n {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.cdn-panel svg.plot { width: 100%; height: auto; display: block; }
.cdn-panel .ceil { stroke: rgba(61, 99, 245, 0.6); stroke-width: 1.4; stroke-dasharray: 4 4; }
.cdn-panel .ceil-label { font-family: var(--font-mono); font-size: 14px; fill: #8CA6FF; }
.cdn-panel .axis { font-family: var(--font-mono); font-size: 13px; fill: var(--slate); }

.cdn-panel .foot {
	margin-top: 16px;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--slate);
}

.cdn-panel .foot b { color: var(--white); font-weight: 500; }

/* ---- FAQ accordion ---- */
.faq {
	max-width: 780px;
	margin: 0 auto;
	border-top: 1px solid var(--border);
}

.faq-item { border-bottom: 1px solid var(--border); }

.faq-q {
	width: 100%;
	background: none;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	text-align: left;
	padding: 24px 4px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--ink);
}

.faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.faq-q .icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	position: relative;
	transition: transform 0.25s ease;
}

/* A + that becomes a - when open - two bars, one rotates away. */
.faq-q .icon::before,
.faq-q .icon::after {
	content: '';
	position: absolute;
	background: var(--accent);
	border-radius: 2px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.faq-q .icon::before { width: 14px; height: 2px; }
.faq-q .icon::after { width: 2px; height: 14px; transition: transform 0.25s ease; }
.faq-q[aria-expanded="true"] .icon::after { transform: translate(-50%, -50%) scaleY(0); }

.faq-a {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease;
}

.faq-a p {
	color: var(--slate-dark);
	font-size: 0.98rem;
	line-height: 1.7;
	padding: 0 4px 26px;
	max-width: 66ch;
}

@media (prefers-reduced-motion: reduce) {
	.faq-a, .faq-q .icon, .faq-q .icon::after { transition: none; }
}

/* ---- migration flow (numbered steps) ----
   The four migration steps as a connected sequence. Numbered because the order
   is real information here - you cannot preview before you request - which is
   the one case where 01/02/03 markers earn their place. */
.flow {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	counter-reset: step;
}

.flow-step {
	position: relative;
	padding-top: 30px;
	border-top: 2px solid var(--border);
}

/* The connector tick sits on the top rule, so the row reads as one track. */
.flow-step::before {
	counter-increment: step;
	content: counter(step, decimal-leading-zero);
	position: absolute;
	top: -16px;
	left: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--brand-gradient);
	color: var(--white);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 600;
	display: grid;
	place-items: center;
}

.flow-step h3 { font-size: 1.05rem; margin-bottom: 10px; }
.flow-step p { font-size: 0.9rem; line-height: 1.65; color: var(--slate-dark); }

@media (max-width: 900px) {
	.flow { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}

@media (max-width: 560px) {
	.flow { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
	.duo-grid { grid-template-columns: 1fr; }
	.incl-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.incl-grid { grid-template-columns: 1fr; }
}

/* ============================================
   Pull quote
   ============================================ */
/* Same wash as the value panel and the light bento card, so a quote reads as
   part of that family rather than a fifth surface. No giant decorative quote
   mark: the type is already display-size, and the glyph only competes with it. */
.pull-quote {
	background: linear-gradient(120deg, #EEF2FA 0%, #EAF0FB 55%, #E8EEFA 100%);
	border-radius: var(--radius-lg);
	padding: 64px 56px;
	text-align: center;
}

.pull-quote blockquote {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.25rem, 2.4vw, 1.85rem);
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--ink);
	max-width: 30ch;
	margin: 0 auto 22px;
	text-wrap: balance;
}

.pull-quote .pq-attrib {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pull-quote .pq-name {
	font-weight: 600;
	font-size: 0.92rem;
}

.pull-quote .pq-role {
	font-family: var(--font-mono);
	font-size: 0.76rem;
	color: var(--slate);
}

@media (max-width: 900px) {
	.pull-quote { padding: 40px 28px; border-radius: var(--radius-md); }
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
	background: var(--ink);
	color: var(--slate);
	padding-top: 72px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(4, 1fr);
	gap: 40px;
	padding-bottom: 48px;
}

.footer-brand .logo { color: var(--white); margin-bottom: 16px; }
.footer-brand p { font-size: 0.875rem; color: var(--slate); max-width: 260px; margin-bottom: 20px; }

.footer-social {
	display: flex;
	gap: 12px;
}

.footer-social a {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--border-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.15s ease, background 0.15s ease;
}

/* border-color was var(--green) - a token never defined anywhere, so the
   declaration was invalid and the border simply never changed on hover. */
.footer-social a:hover { border-color: var(--accent); background: var(--ink-soft); }
.footer-social svg { width: 15px; height: 15px; color: var(--slate); }

.footer-col h4 {
	color: var(--white);
	font-size: 0.85rem;
	font-family: var(--font-body);
	font-weight: 600;
	margin-bottom: 18px;
}

.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 0.875rem; color: var(--slate); transition: color 0.15s ease; }
.footer-col a:hover { color: var(--white); }

.footer-bottom {
	border-top: 1px solid var(--border-dark);
	padding: 24px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 0.8rem;
}

.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a:hover { color: var(--white); }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
	.solutions-grid { grid-template-columns: repeat(2, 1fr); }
	.trio-grid { grid-template-columns: 1fr; gap: 32px; }
	.testimonials-grid { grid-template-columns: 1fr 1fr; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
	.feature-row { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
	.feature-row.reverse .feature-visual { order: 1; }
	.feature-row.reverse .feature-copy { order: 2; }
	.solutions-grid { grid-template-columns: 1fr; }
	.case-studies-grid { grid-template-columns: 1fr; }
	.testimonials-grid { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
	.cta-section { margin: 0 20px; padding: 48px 24px; }
}

/* Hairline above a section. Was an inline style on index's case-studies
   section; it needs a different colour on a dark page, and an inline style
   can't be overridden without !important. */
.section-rule { border-top: 1px solid var(--border); }

/* ============================================================
   ENTERPRISE - the premium tier
   ============================================================
   The homepage is paper and daylight. This is the machine room.

   Three decisions carry it, in order of how much they matter:

   1. The ground is #101828 - the bento hero's violet, already in
      the system - taken darker. Not a new colour, a deeper cut of
      one that was here. It stays LIGHTER than --ink so the ink
      footer still reads as the bottom of the page rather than more
      of the same. Check that first if the ground ever moves.
   2. Hairlines carry the brand violet instead of a neutral grey.
      That single substitution is most of why this reads as paid-for
      rather than merely unlit.
   3. Body copy is a violet-tinted slate, not --slate (#8993A6).
      The site's slate is blue-grey and lands as a foreign hue here.

   ALL OF IT is scoped to .page-enterprise on <body>. styles.css is
   shared - an unscoped .hero rule here would take the homepage dark
   along with it.
   ============================================================ */
.page-enterprise {
	/* Converted from the black+purple dark design to the site-wide login
	   palette: ground -> lavender paper, raised -> white, line -> light border,
	   text -> grey. Every rule that reads these tokens flips to light with it. */
	--ent-ground: #F0F3F9;
	--ent-raised: #FFFFFF;
	--ent-line: #E5E1EF;
	--ent-text: #4A4560;
	--slate: #6C6683;
	--slate-dark: #4A4560;
	background: var(--ent-ground);
	color: var(--ent-text);
}

/* Section headings: dark ink on the light ground (the hero keeps its own white
   headings via the .hero override below, since it sits on the gradient). */
.page-enterprise section h1,
.page-enterprise section h2,
.page-enterprise section h3 { color: var(--ink); }
.page-enterprise .hero h1,
.page-enterprise .hero h2,
.page-enterprise .hero h3 { color: #fff; }

/* ---- Hero ---- */
/* The glows sit on the section rather than the page, so brand light
   stays behind the headline instead of washing the whole document. */
.page-enterprise .hero {
	position: relative;
	/* Same login gradient panel as the homepage hero, so the enterprise page
	   opens with the signature ramp instead of the old near-black ground. */
	background: linear-gradient(132deg, #0A1230 0%, #1B2B6B 19%, #2E49B0 39%, #4E72FF 57%, #6E8CFF 76%, #8CA6FF 100%);
}

/* ---- The uptime ledger ----
   2,160 cells: ninety days x twenty-four hours, one per hour we stayed up.

   It is deliberately NOT a panel. Every version of this that lived in a
   rounded card with a hairline border and a stat in the corner read as stock,
   because that anatomy is the stock anatomy - the contents were never the
   problem. So there is no card: the hours are the surface the hero stands on.
   Nothing to lift into another brand, because it isn't a component.

   Four mask layers, intersected:
     1+2  the cell grid - 5px cells on an 8px pitch
     3    fades the field out to the left so the headline has clean ground
     4    clears an ellipse behind the figure, so the note sits in a clearing
          rather than fighting the grid for legibility
   One element. Not 2,160 divs. */
.page-enterprise .hero > * { position: relative; z-index: 2; }

.page-enterprise .hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(100deg, var(--brand-purple) 0%, var(--brand-pink) 52%, var(--brand-coral) 100%);
	/* 0.5 was too hot. The note sits at the coral end of the ramp, so the field
	   was at its brightest exactly where the caption needed to be read - no
	   halo saves 12px mono from that. Dropping to 0.34 keeps the field clearly
	   present and hands the text back its contrast. If this goes up, check the
	   caption first. */
	opacity: 0.34;
	/* No radial clearing here. There was one - a soft ellipse punched behind the
	   note so the caption stayed legible - and it read as a dark smudge sitting
	   on the field, which is a worse fault than the one it fixed. The field
	   stays whole and even; the note earns its own legibility with a halo. */
	-webkit-mask-image:
		repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 8px),
		repeating-linear-gradient(180deg, #000 0 5px, transparent 5px 8px),
		linear-gradient(95deg, transparent 34%, #000 78%);
	-webkit-mask-composite: source-in, source-in;
	mask-image:
		repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 8px),
		repeating-linear-gradient(180deg, #000 0 5px, transparent 5px 8px),
		linear-gradient(95deg, transparent 34%, #000 78%);
	mask-composite: intersect;
}

/* mask-composite is the load-bearing bit. Where it is unsupported the field
   would paint as a solid gradient wash over the whole hero, which is worse
   than nothing - so only draw it where the browser can actually cut cells. */
@supports not ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) {
	.page-enterprise .hero::after { display: none; }
}

/* ---- Hero art: the control panel, compact ----
   The same dashboard the Control Panel section runs further down, cut back to
   fit a hero column and sat on the cell field, with the proof points orbiting
   it. Composition is the homepage's dial-and-cards, so it is a system move
   rather than a new invention.

   Deliberately NOT the same view as the full one below it: no Hosted Sites
   table, no help card, no floating storage card. The hero gets a glimpse, the
   section gets the tour - otherwise the page shows you one screenshot twice. */
.ent-art {
	position: relative;
	width: 100%;
	container-type: inline-size;
}

.cp-mini { border-radius: 15px; padding: 9px; }
.cp-mini .cp-app { grid-template-columns: 128px 1fr; gap: 10px; min-height: 0; }

/* No floating storage card at this size, so the brand no longer has to clear
   one - the nav starts right under it. */
.cp-mini .cp-side { padding: 16px 0; }
.cp-mini .cp-brand { margin-bottom: 20px; padding: 0 13px; font-size: 0.76rem; gap: 8px; }
.cp-mini .cp-brand svg { width: 15px; height: 15px; }
.cp-mini .cp-nav { padding: 0 9px; gap: 2px; }
.cp-mini .cp-nav span { font-size: 0.64rem; padding: 6px 7px; gap: 8px; }
.cp-mini .cp-nav svg { width: 12px; height: 12px; }

.cp-mini .cp-main { gap: 10px; }
.cp-mini .cp-topbar { gap: 8px; }
.cp-mini .cp-search { padding: 8px 13px; font-size: 0.68rem; }
.cp-mini .cp-search svg { width: 12px; height: 12px; }
.cp-mini .cp-icon-btn,
.cp-mini .cp-avatar { width: 30px; height: 30px; font-size: 0.7rem; }
.cp-mini .cp-icon-btn svg { width: 12px; height: 12px; }
.cp-mini .cp-icon-btn .cp-dot { top: 5px; right: 6px; width: 5px; height: 5px; }

/* The quick-action row needs ~420px for five chips; the mini's whole main
   column is about that. It stays in the full panel. */
.cp-mini .cp-actions { display: none; }

/* The status survives, cut to one word. "All systems operational" is ~150px of
   a ~360px search bar; the pulsing dot is doing the work anyway and the word
   just tells you what it means. */
.cp-mini .cp-status { font-size: 0.58rem; padding: 0 2px; gap: 5px; }
.cp-mini .cp-status i { width: 5px; height: 5px; }

/* Three stats across the top, chart beneath - the full one is a 3-column
   layout with a table and a help card, which has nothing like the room here.
   Three rather than two because a third figure costs no height and density is
   most of what makes a panel look like a real one. */
.cp-mini .cp-body { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr; gap: 10px; }
.cp-mini .cp-store { grid-column: 1; grid-row: 1; }
.cp-mini .cp-sites { grid-column: 2; grid-row: 1; }
.cp-mini .cp-cache { grid-column: 3; grid-row: 1; }
.cp-mini .cp-chart { grid-column: 1 / 4; grid-row: 2; }

/* The cache figure is the one stat here that only a host would show - RAM and
   site counts belong to any dashboard; a Redis hit ratio does not. */
.cp-mini .cp-cache .cp-stat {
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.cp-mini .cp-card { padding: 13px; border-radius: 10px; }
.cp-mini .cp-head { font-size: 0.56rem; letter-spacing: 0.06em; }
.cp-mini .cp-head svg { width: 11px; height: 11px; }
.cp-mini .cp-stat { font-size: 1.35rem; margin: 9px 0 4px; }
.cp-mini .cp-sub { font-size: 0.64rem; }
.cp-mini .cp-plot .axis { font-size: 21px; }

/* The points reuse .art-card - white on this ground is the loudest contrast
   the page has, and the component already exists. Each card keeps its own
   vertical band so none can ever cover another. */
.ent-art .art-card { font-size: clamp(11px, 2.5cqw, 13.5px); z-index: 3; padding: 9px 13px; gap: 10px; }

/* Gradient tile with the glyph knocked out in white - the same device as
   .cp-trio .ico further down, shrunk. Sized in em so it tracks the card's
   container-query font-size instead of drifting off it at other widths. */
.ent-art .art-card .ico {
	width: 2em;
	height: 2em;
	border-radius: 5px;
	background: var(--brand-gradient-diag);
	color: var(--white);
}

.ent-art .art-card .ico svg { width: 1.1em; height: 1.1em; stroke-width: 2; }

/* card-sup used to sit at top: 22%, which put it squarely on the Websites
   card's "out of 120". Pushing it right alone could never fix that - the card
   is ~200px wide and there is only ~80px of room outside the frame, so it
   would always overlap by half its width. It moves up instead, clearing the
   frame's top edge entirely, and mirrors card-up across the panel. */
.ent-art .card-up  { top: -5%;    left: -5%;   box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42); }
.ent-art .card-sup { top: -5%;    right: -7%;  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42); }
.ent-art .card-dc  { bottom: 22%; left: -7%;   box-shadow: 0 20px 44px rgba(0, 0, 0, 0.48); }
.ent-art .card-pop { bottom: -5%; right: -5%;  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.48); }

/* The points arrive one at a time. This was 0.12s apart over 0.36s, which is
   below the threshold where a stagger reads as a sequence - it just looked like
   four things appearing at once, slightly blurred. 0.3s apart is slow enough to
   count them in, and the whole run still finishes inside two seconds.
   Starts at 0.45s so the panel lands first and the points arrive onto it. */
@media (prefers-reduced-motion: no-preference) {
	.ent-art .art-card {
		opacity: 0;
		transform: translateY(16px) scale(0.94);
		animation: ent-card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	}
	.ent-art .card-up  { animation-delay: 0.45s; }
	.ent-art .card-sup { animation-delay: 0.75s; }
	.ent-art .card-dc  { animation-delay: 1.05s; }
	.ent-art .card-pop { animation-delay: 1.35s; }
}

@keyframes ent-card-in {
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1024px) {
	/* Stacked, the field has no right-hand column to live in and its fade lands
	   under the copy. Cheaper to drop it than to fight it. */
	.page-enterprise .hero::after { display: none; }
	/* The cards hang off the panel's edges by design; with no column beside
	   them they would hang off the viewport instead. */
	.ent-art .art-card { position: static; margin: 10px auto 0; width: fit-content; }
	/* Dropping the sidebar leaves its 128px track behind, so .cp-main lands in
	   a 128px column and overflows it - the panel renders squeezed into the
	   left third with dead space beside it. Collapse to one column with it. */
	.cp-mini .cp-app { min-width: 0; grid-template-columns: 1fr; }
	.cp-mini .cp-side { display: none; }
}

.page-enterprise .hero-copy p.lead { color: var(--ent-text); }
.page-enterprise .hero-stat-row { border-top-color: var(--ent-line); }
.page-enterprise .hero-stat-value { color: var(--white); }
.page-enterprise .hero-stat-label { color: var(--ent-text); }

/* ---- Buttons ---- */
/* btn-primary is ink by default and would vanish. Same pink re-cut the
   nav island uses, for the same reason. Scoped to `section` so the
   header's own button rules are left alone. */
.page-enterprise section .btn-primary { background: var(--brand-pink); color: var(--white); }
.page-enterprise section .btn-primary:hover { box-shadow: 0 10px 24px rgba(61, 99, 245, 0.35); }
.page-enterprise section .btn-outline { color: var(--white); border-color: rgba(255, 255, 255, 0.28); }
.page-enterprise section .btn-outline:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.1); }

/* ---- Trust strip ---- */
/* Knocked out to white. This flattens each mark to a silhouette - the
   logos stop being brands and become a texture. That is the price of a
   dark ground; full-colour marks on violet is worse. */
.page-enterprise .trust-strip { border-bottom-color: var(--ent-line); }
.page-enterprise .client-cap { color: var(--ent-text); }

.page-enterprise .client-grid img {
	filter: grayscale(1) brightness(0) invert(1);
	opacity: 0.6;
}

.page-enterprise .client-grid img:hover {
	filter: grayscale(1) brightness(0) invert(1);
	opacity: 1;
}

/* ---- Section heads ---- */
.page-enterprise .section-head p { color: var(--ent-text); }
.page-enterprise .section-rule { border-top-color: var(--ent-line); }

/* ---- Feature rows ---- */
.page-enterprise .feature-row:not(:last-child) { border-bottom-color: var(--ent-line); }
.page-enterprise .feature-copy p { color: var(--ent-text); }
.page-enterprise .feature-copy ul li { color: rgba(255, 255, 255, 0.9); }

/* --paper here is a light slab on a dark page. NOTE: this fixes the panel, not
   the artwork - support-panel.jpg has --paper flattened into its pixels (it is
   32% transparent and JPEG has no alpha), so any .support-media on this page
   still shows a grey rectangle. See the comment above .support-media. */
.page-enterprise .feature-visual {
	background: var(--ent-raised);
	border-color: var(--ent-line);
}

.page-enterprise .mini-chart .bar { background: var(--ent-raised); }
.page-enterprise .mini-chart .bar .bar-label { color: var(--ent-text); }
.page-enterprise .mini-chart .bar .bar-value { color: var(--white); }

/* ---- Bento ---- */
/* The light card is a hole punched in a dark page. It becomes a raised
   surface instead, and the gradient card beside it keeps the contrast. */
.page-enterprise .bento-card.light {
	background: var(--ent-raised);
	box-shadow: inset 0 0 0 1px var(--ent-line);
}

.page-enterprise .bento-card.light p { color: var(--ent-text); }

/* ---- Value panel ---- */
.page-enterprise .value-panel {
	position: relative;
	background: var(--ent-raised);
}

/* The gradient hairline ring lifted from .infra-panel. The page's one
   premium tell, reused rather than reinvented - and it lands on the
   panel that states the price, which is where it earns its keep. */
.page-enterprise .value-panel::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--radius-lg);
	padding: 1px;
	background: var(--brand-gradient-diag);
	opacity: 0.5;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.page-enterprise .value-panel > * { position: relative; z-index: 1; }
.page-enterprise .value-stat .n { color: var(--white); }
.page-enterprise .value-stat .c,
.page-enterprise .value-stat p { color: var(--ent-text); }
.page-enterprise .value-panel .value-stat hr { border-top-color: var(--ent-line); }

.page-enterprise .value-panel .value-list .li {
	border-bottom-color: var(--ent-line);
	color: rgba(255, 255, 255, 0.9);
}

/* ---- Solution cards ---- */
/* --ink-soft is blue-black; against a violet ground it reads as a
   different family. Re-cut to the page's own raised surface. */
.page-enterprise .solution-card {
	background: var(--ent-raised);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
}

.page-enterprise .solution-card:hover {
	background: #211852;
	box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
}

.page-enterprise .solution-card p { color: var(--ent-text); }

/* The live icons are 70px gradient tiles with a glyph knocked out of them, not
   48px line drawings - squeezed into the default slot the glyph goes muddy. */
.page-enterprise .solution-card .icon-art { width: 60px; height: 60px; }

/* ---- Pull quote ---- */
.page-enterprise .pull-quote { background: var(--ent-raised); }
.page-enterprise .pull-quote blockquote { color: var(--white); }
.page-enterprise .pull-quote .pq-name { color: var(--white); }
.page-enterprise .pull-quote .pq-role { color: var(--ent-text); }

/* ---- Case studies ---- */
.page-enterprise .case-study-card {
	background: var(--ent-raised);
	border-color: var(--ent-line);
}

.page-enterprise .case-study-card:hover { box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42); }

/* --ink here would be blue-black on violet; a black wash keeps the hue
   and still reads as a well cut into the card. */
.page-enterprise .case-study-media { background: rgba(0, 0, 0, 0.3); }
.page-enterprise .case-study-media .stat-label { color: var(--ent-text); }
.page-enterprise .case-study-body p { color: var(--ent-text); }

/* ============================================================
   Control panel showcase
   ============================================================
   The dashboard is built in markup, not screenshotted. Same reason
   the hero art is: the figures stay real text (selectable, findable,
   translatable), it stays sharp at any size, and it costs a few KB
   rather than a JPEG that goes stale the day the product UI changes.

   The app keeps its own neutral near-black palette rather than the
   page's violet. It is a product UI, not a page surface - same call
   .infra-panel makes by staying ink. Its tokens are namespaced --d-*
   so they can't be confused with the page's.
   ============================================================ */
.cp-section { overflow: hidden; }

.cp-showcase {
	display: grid;
	grid-template-columns: 1.4fr 0.6fr;
	gap: 48px;
	align-items: center;
}

/* No bleed. This was 150% wide pulled -50% left, cropping it against the
   section's overflow the way the live page crops its laptop - but the ~220px
   that went off-screen was the sidebar and the storage card, i.e. the whole
   reason it reads as FastCow's panel. A crop that eats the identity isn't a
   crop, it's a bug. The frame sits square in its column. */
.cp-stage { min-width: 0; }

.cp-copy h2 {
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	margin-bottom: 16px;
}

.cp-copy p {
	font-size: 1rem;
	line-height: 1.7;
	margin-bottom: 28px;
}

.cp-frame {
	--d-bg: #08080C;
	--d-panel: #101016;
	--d-side: #030305;
	--d-line: rgba(255, 255, 255, 0.07);
	--d-text: #ECECF0;
	--d-dim: #6C6C7A;

	background: var(--d-bg);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 12px;
	box-shadow: 0 50px 110px rgba(0, 0, 0, 0.6);
}

.cp-app {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 14px;
	position: relative;
	font-family: var(--font-body);
	color: var(--d-text);
	min-height: 520px;
}

/* ---- sidebar ---- */
.cp-side {
	background: var(--d-side);
	border-radius: 12px;
	padding: 26px 0;
	display: flex;
	flex-direction: column;
}

.cp-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 18px;
	/* Clears the floating storage card, which is absolutely positioned over this
	   column. At 120px the card landed on top of the first nav item. */
	margin-bottom: 176px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
}

.cp-brand svg { width: 20px; height: 20px; flex-shrink: 0; }

.cp-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 14px;
}

.cp-nav span {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px;
	border-radius: 8px;
	font-size: 0.76rem;
	white-space: nowrap;
	color: var(--d-text);
}

.cp-nav svg { width: 16px; height: 16px; color: var(--d-dim); flex-shrink: 0; }

/* ---- floating storage card ----
   Hangs off the sidebar's left edge, which is what tells you the frame is
   cropped rather than just narrow. */
.cp-float {
	position: absolute;
	top: 88px;
	left: -34px;
	width: 190px;
	background: #131319;
	border: 1px solid var(--d-line);
	border-radius: 12px;
	padding: 14px 16px;
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
}

.cp-float .cp-head { margin-bottom: 10px; }

.cp-float .cp-big {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: -0.02em;
	margin-bottom: 12px;
}

.cp-float .cp-big em {
	font-style: normal;
	font-weight: 400;
	font-size: 0.78rem;
	color: var(--d-dim);
	margin-left: 4px;
}

.cp-bar {
	height: 6px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.cp-bar i {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: var(--brand-gradient);
}

/* ---- main column ---- */
.cp-main {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.cp-topbar { display: flex; align-items: center; gap: 12px; }

.cp-search {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--d-panel);
	border: 1px solid var(--d-line);
	border-radius: 99px;
	padding: 12px 18px;
	font-size: 0.8rem;
	color: var(--d-dim);
}

.cp-search svg { width: 15px; height: 15px; }

/* Live status. Reuses the pulse the infra panel used to say "this is a running
   machine, not a screenshot" - the cheapest way to make a static mock breathe.
   Coral rather than green because green is not in this palette, and coral is
   already what .infra-status meant by "live". */
.cp-status {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
	padding: 0 6px;
	font-family: var(--font-mono);
	font-size: 0.66rem;
	color: var(--d-dim);
	white-space: nowrap;
}

.cp-status i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--brand-coral);
	animation: pulse-glow 2s ease-in-out infinite;
}

.cp-icon-btn {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--d-panel);
	border: 1px solid var(--d-line);
	display: grid;
	place-items: center;
	color: var(--d-dim);
	position: relative;
}

.cp-icon-btn svg { width: 15px; height: 15px; }

/* Unread marker. The ring is the panel colour, so the dot reads as sitting on
   the bell rather than punched through it. */
.cp-icon-btn .cp-dot {
	position: absolute;
	top: 8px;
	right: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--brand-coral);
	box-shadow: 0 0 0 2px var(--d-panel);
}

/* ---- quick actions ----
   The thing that most says "hosting panel" rather than "dashboard". No generic
   SaaS product has a purge-cache button; every host does. */
.cp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cp-chip {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	border-radius: 7px;
	background: var(--d-panel);
	border: 1px solid var(--d-line);
	font-size: 0.72rem;
	color: var(--d-text);
	white-space: nowrap;
}

.cp-chip svg { width: 13px; height: 13px; color: var(--d-dim); flex-shrink: 0; }

/* Pushed to the far end - it is state, not an action, and grouping it with the
   buttons would imply clicking it does something on its own. */
.cp-chip.cp-env { margin-left: auto; font-family: var(--font-mono); }
.cp-chip.cp-env b { color: var(--brand-pink); font-weight: 600; }

.cp-avatar {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--brand-purple), var(--brand-pink));
	display: grid;
	place-items: center;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--white);
}

/* ---- card grid ---- */
.cp-body {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto auto auto;
	gap: 12px;
}

.cp-card {
	background: var(--d-panel);
	border: 1px solid var(--d-line);
	border-radius: 12px;
	padding: 18px;
}

.cp-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--d-dim);
}

.cp-head svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.7; }

.cp-stat {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 2rem;
	letter-spacing: -0.03em;
	margin: 18px 0 8px;
}

.cp-sub { font-size: 0.76rem; color: var(--d-dim); }

.cp-store  { grid-column: 1; grid-row: 1; }
.cp-sites  { grid-column: 1; grid-row: 2; }
.cp-chart  { grid-column: 2 / 4; grid-row: 1 / 3; }
.cp-hosted { grid-column: 1 / 3; grid-row: 3; }
.cp-help   { grid-column: 3; grid-row: 3; }

/* ---- visitors chart ---- */
.cp-chart .cp-head { margin-bottom: 6px; }
.cp-chart svg.cp-plot { width: 100%; height: auto; display: block; }
.cp-plot .grid-line { stroke: rgba(255, 255, 255, 0.07); stroke-dasharray: 3 4; }
/* Sized in viewBox units, not pixels. The plot is 640 units wide and renders at
   roughly 395px, so anything set here lands at ~0.62x on screen - 11px would
   arrive as 7px. */
.cp-plot .axis { font-family: var(--font-mono); font-size: 17px; fill: var(--d-dim); }

/* ---- visitor bars ----
   Was a line-and-area plot. Bars carry the brand ramp across the twelve days,
   left to right, so the chart reads as ours rather than as a chart.

   Named cp-vbar, NOT cp-bar - .cp-bar is already the storage-used progress
   track in the sidebar card. Sharing the name gave that progress bar the
   scaleY animation below and set it throbbing. */
.cp-vbar { fill: url(#cpBarRamp); }

@media (prefers-reduced-motion: no-preference) {
	/* Live traffic. scaleY from the bar's own bottom edge - transform-box:
	   fill-box makes the rect its own reference, otherwise the origin resolves
	   against the whole SVG and the bars slide instead of growing.
	   Negative delays start each bar partway through its cycle, which is what
	   makes it a travelling wave rather than twelve things blinking together. */
	.cp-vbar {
		transform-box: fill-box;
		transform-origin: bottom;
		animation: cp-bar-live 2.6s ease-in-out infinite;
	}

	.cp-vbar:nth-of-type(1)  { animation-delay: 0s; }
	.cp-vbar:nth-of-type(2)  { animation-delay: -0.22s; }
	.cp-vbar:nth-of-type(3)  { animation-delay: -0.44s; }
	.cp-vbar:nth-of-type(4)  { animation-delay: -0.65s; }
	.cp-vbar:nth-of-type(5)  { animation-delay: -0.87s; }
	.cp-vbar:nth-of-type(6)  { animation-delay: -1.09s; }
	.cp-vbar:nth-of-type(7)  { animation-delay: -1.31s; }
	.cp-vbar:nth-of-type(8)  { animation-delay: -1.53s; }
	.cp-vbar:nth-of-type(9)  { animation-delay: -1.74s; }
	.cp-vbar:nth-of-type(10) { animation-delay: -1.96s; }
	.cp-vbar:nth-of-type(11) { animation-delay: -2.18s; }
	.cp-vbar:nth-of-type(12) { animation-delay: -2.4s; }

	@keyframes cp-bar-live {
		0%, 100% { transform: scaleY(1); }
		50%      { transform: scaleY(0.62); }
	}
}

/* ---- hosted sites table ---- */
.cp-hosted .cp-head { margin-bottom: 4px; }

.cp-row {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 10px;
	align-items: center;
	padding: 14px 0;
	border-top: 1px dashed rgba(255, 255, 255, 0.09);
}

.cp-row .site { font-size: 0.82rem; font-weight: 500; }
.cp-row .site em { display: block; font-style: normal; font-size: 0.68rem; color: var(--d-dim); margin-top: 2px; white-space: nowrap; }
.cp-row .fig { font-size: 0.82rem; font-weight: 500; }
.cp-row .fig em { display: block; font-style: normal; font-size: 0.68rem; color: var(--d-dim); margin-top: 2px; white-space: nowrap; }

/* ---- help card ---- */
.cp-help {
	background: linear-gradient(150deg, var(--brand-purple) 0%, var(--brand-pink) 55%, #6E8CFF 100%);
	border-color: transparent;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
}

.cp-help .lbl { font-size: 0.72rem; color: rgba(255, 255, 255, 0.8); }

.cp-help p {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--white);
}

.cp-help .cp-btn {
	align-self: flex-start;
	margin-top: 8px;
	background: var(--white);
	color: #3D63F5;
	font-size: 0.76rem;
	font-weight: 600;
	padding: 9px 16px;
	border-radius: 6px;
}

/* ---- trio ---- */
.cp-trio {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 44px;
	margin-top: 96px;
}

.cp-trio .ico {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--brand-gradient-diag);
	display: grid;
	place-items: center;
	margin-bottom: 22px;
}

.cp-trio .ico svg { width: 22px; height: 22px; color: var(--white); }
.cp-trio h3 { font-size: 1.05rem; margin-bottom: 12px; }
.cp-trio p { font-size: 0.9rem; line-height: 1.6; }

/* ---- feature checklist ---- */
.cp-check {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px 32px;
	margin-top: 72px;
	padding-top: 72px;
	border-top: 1px solid var(--border);
}

.cp-check span {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 0.9rem;
}

.cp-check svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--accent); }

@media (max-width: 1100px) {
	.cp-showcase { grid-template-columns: 1fr; gap: 48px; }
	/* Stacked, there is nothing to crop against - the frame sits square in
	   the column and the floating card comes back inside it. */
	.cp-stage { width: 100%; margin-left: 0; overflow-x: auto; }
	.cp-app { min-width: 720px; }
	.cp-float { left: 10px; }
	.cp-trio { grid-template-columns: 1fr; gap: 36px; margin-top: 64px; }
	.cp-check { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.cp-check { grid-template-columns: 1fr; }
}

/* Dark-page colours for the two text blocks. The dashboard above them carries
   its own palette and needs nothing here. */
.page-enterprise .cp-trio p { color: var(--ent-text); }
.page-enterprise .cp-check { border-top-color: var(--ent-line); }
.page-enterprise .cp-check span { color: rgba(255, 255, 255, 0.9); }

/* ============================================================
   Enterprise packages
   ============================================================
   Two treatments, deliberately both: the cards are the decision,
   the table is the receipt. Someone signing off $2,500/mo will
   want the second one even though the first is what sells.

   Structure here is page-agnostic; colour is scoped to
   .page-enterprise below. If a /pricing page ever needs these,
   only the colour block has to be generalised.
   ============================================================ */
.pkg .name {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pkg .amt {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.pkg .per { font-size: 0.78rem; font-weight: 400; }

/* Named pkg-tick, not tick - .woo-list .tick is a gradient-filled circle and
   the two must not collide if a list ever moves. */
.pkg-tick { width: 15px; height: 15px; flex-shrink: 0; color: var(--brand-pink); }

/* ---- A: the cards ---- */
/* Cards stretch to the tallest rather than sizing to their own content - ENT4's
   support line wraps to two lines, and with align-items:start that card grew
   taller than the rest and dragged its button out of line with the row. */
.pkg-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	align-items: stretch;
}

.pkg-card {
	border-radius: 14px;
	padding: 30px 26px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.pkg-card > * { position: relative; z-index: 1; }
.pkg-card .amt { font-size: 2.3rem; line-height: 1; }

/* Takes up the slack, so every Book A Demo lands on the same line. */
.pkg-card ul { list-style: none; display: flex; flex-direction: column; gap: 11px; flex: 1; }

.pkg-card li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 0.85rem;
	line-height: 1.45;
}

.pkg-card .btn { width: 100%; }

/* The recommendation is carried by the gradient ring from .infra-panel, not by
   scaling the card up - a taller card breaks the grid and the row stops
   scanning left-to-right. */
.pkg-card.rec::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 14px;
	padding: 1.5px;
	background: var(--brand-gradient-diag);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.pkg-tag {
	position: absolute;
	top: -10px;
	left: 26px;
	background: var(--brand-gradient);
	color: var(--white);
	font-family: var(--font-mono);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 99px;
	z-index: 2;
}

/* ---- B: the table ---- */
/* Its own scroller, so a narrow viewport scrolls the sheet and never the page. */
.pkg-table-wrap { overflow-x: auto; }

.pkg-table {
	width: 100%;
	min-width: 820px;
	border-collapse: collapse;
}

.pkg-table th,
.pkg-table td { padding: 15px 18px; text-align: center; }
.pkg-table thead th { vertical-align: bottom; }
.pkg-table tbody th { text-align: left; font-weight: 400; font-size: 0.85rem; }
.pkg-table td { font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.pkg-table .amt { font-size: 1.7rem; display: block; }
.pkg-table thead .rec-col { border-radius: 10px 10px 0 0; }
.pkg-table .foot td { border-bottom: 0; padding-top: 22px; }
.pkg-table .pkg-tick { display: inline-block; vertical-align: middle; }

@media (max-width: 1100px) {
	.pkg-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
	.pkg-grid { grid-template-columns: 1fr; }
}

/* ---- colour, dark page ---- */
.page-enterprise .pkg .name { color: #101828; }
.page-enterprise .pkg .amt { color: #101828; }
.page-enterprise .pkg .per { color: var(--slate); }

/* Tier ramp - the surface brightens with the price, so the shape of the range
   is legible before you read a single number.

   Rebased deliberately. The first cut ran #150E31 -> #332577, which put ENT1
   two stops off a #0E0924 ground and sank the cheapest card into the page -
   the exact fault this was meant to cure. The ramp now STARTS clear of the
   ground and climbs from there; ENT1 is the floor, not the background. If you
   ever darken --ent-ground, check ENT1 first.

   ENT2 keeps its ring. The ramp encodes scale, the ring encodes choice - two
   different questions, so two signals is right, not a conflict. */
.page-enterprise .pkg-card { background: #fff; border: 1.5px solid #B9B4C8; box-shadow: none; }
.page-enterprise .pkg-card.rec { border: 1.5px solid transparent; box-shadow: none; }
.page-enterprise .pkg-card li { color: var(--slate-dark); }

.page-enterprise .pkg-table th,
.page-enterprise .pkg-table td { border-bottom: 1px solid var(--border); }
.page-enterprise .pkg-table thead th { border-bottom-color: var(--border-dark); }
.page-enterprise .pkg-table tbody th { color: var(--slate); }
.page-enterprise .pkg-table td { color: #101828; }

/* The same ramp carried down the columns, at lower opacity so it tints the
   sheet rather than turning it into four coloured blocks. The first cell of a
   body row is a <th scope="row">, so td:nth-of-type(1) is ENT1. */
.page-enterprise .pkg-table tbody td.rec-col { background: rgba(61, 99, 245, 0.06); }

/* Header only. The body columns are carrying the ramp, so ENT2 is marked where
   the price is and the sheet below stays readable. */
.page-enterprise .pkg-table thead .rec-col { background: rgba(61, 99, 245, 0.10); }


/* ============================================================
   NAV - two-tier masthead (replaces the floating island)
   ============================================================
   Overrides the dark island above into a solid two-tier bar:
   a thin ink utility strip (live status, support, login) over a
   white main row. The mega + dropdown panels are re-cut LIGHT to
   match the white bar. This block is last in the file so it wins
   the cascade over the original island rules without deleting
   them (kept for reference/rollback).
   ============================================================ */
.site-header { padding: 0; background: transparent; }

/* utility strip */
.tt-util { background: var(--ink); }
.tt-util-row {
	display: flex; align-items: center; justify-content: space-between;
	height: 38px;
	font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em;
}
.tt-util .live { display: flex; align-items: center; gap: 8px; color: #c7cdd8; }
.tt-util .live i {
	width: 6px; height: 6px; border-radius: 50%; background: #5fbf8a;
	box-shadow: 0 0 0 0 rgba(95,191,138,.5); animation: tt-pulse 2s infinite;
}
@keyframes tt-pulse { 50% { box-shadow: 0 0 0 5px rgba(95,191,138,0); } }
.tt-util .u-right { display: flex; gap: 24px; }
.tt-util a { color: #8b93a6; text-decoration: none; transition: color .15s ease; }
.tt-util a:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .tt-util .live i { animation: none; } }

/* white main row */
.tt-main { background: var(--white); border-bottom: 1px solid var(--border); transition: border-color 0.15s ease; }

/* When a full-width mega opens it drops flush from the bar, so the bar's own
   bottom hairline would double up with the panel's top seam. Drop the bar line
   and let the mega carry the single divider - the two read as one surface.
   Scoped to .has-mega (full-width panels); the narrow Features dropdown floats
   with a gap and keeps the bar line intact. */
.tt-main:has(.has-mega:hover),
.tt-main:has(.has-mega:focus-within) { border-bottom-color: transparent; }
.header-inner {
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	height: 72px;
}
/* the island's docked-corner morph is meaningless on a flat bar */
.header-inner:has(.has-mega:hover),
.header-inner:has(.has-mega:focus-within) { border-radius: 0; }

/* nav links: dark ink on white */
.nav-link { color: var(--slate-dark); }
.nav-link:hover { background: transparent; color: var(--ink); }
.nav-link .chevron { opacity: 0.5; }

/* actions: outline login + gradient CTA */
.header-actions .btn-outline { color: var(--ink); border-color: var(--border); background: transparent; }
.header-actions .btn-outline:hover { border-color: var(--ink); background: transparent; }
.header-actions .btn-primary { background: var(--brand-gradient); color: var(--white); }
.header-actions .btn-primary:hover { box-shadow: 0 8px 20px rgba(61, 99, 245, 0.3); }

/* dropdowns: light panels to match the white bar */
.dropdown {
	top: calc(100% + 12px);
	background: var(--white);
	border-color: var(--border);
	box-shadow: 0 20px 50px rgba(10, 15, 28, 0.14);
}
.dropdown-link:hover { background: var(--paper); }
.dropdown-link strong { color: var(--ink); }
.dropdown-link span { color: var(--slate); }

/* mega panel: flush white extension of the bar. Carries the single top hairline
   (the bar drops its own when open) so nav row + panel read as one surface. */
.dropdown.mega {
	top: 100%;
	background: var(--white);
	border-color: var(--border);
	border-top: 1px solid var(--border);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	box-shadow: 0 24px 50px rgba(10, 15, 28, 0.16);
}
.mega-col { border-right-color: var(--border); }
.mega-title { color: var(--ink); }
.mega-link:hover { background: var(--paper); }
.mega-link strong { color: var(--ink); }
.mega-link span { color: var(--slate); }
/* .mega-promo is a gradient card - already reads on any ground, left as-is */

/* ============================================================
   Mega - icon-row layout (Solutions)
   ============================================================
   Two columns of icon + title + description rows under uppercase
   section heads, with a grey aside panel walled off on the right
   for secondary links. Overrides the base .dropdown.mega grid. */
.dropdown.mega.mega-nav {
	grid-template-columns: 1fr 296px;   /* main block + grey aside */
	padding: 0;
}

.mega-panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 28px;
	padding: 30px 34px;
}

.mega-head {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--slate);
	margin-bottom: 14px;
}

.mrow {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 11px 12px;
	margin: 0 -12px;
	border-radius: 10px;
	transition: background 0.15s ease;
}

.mrow:hover { background: var(--paper); }

.mrow-ico {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Matches the solution-card tile's corner: rx=8 in its 60-unit square is a
	   13.3% radius, so on this 32px icon that's ~4.3px - not the softer 8px it
	   had before. */
	border-radius: 4.3px;
	/* The exact solution-card icon tile: its gradient rendered from the real
	   home_sec2icon SVG with the glyph stripped out (a 12KB PNG rather than the
	   1.3MB source). So the mega icons carry the same background as the product
	   cards, pixel for pixel. */
	background: url(images/mega-icon-tile.png) center / cover no-repeat;
	color: #fff;
	box-shadow: 0 2px 6px rgba(61, 99, 245, 0.22);
	transition: background 0.15s ease;
}
.mrow-ico svg { width: 18px; height: 18px; display: block; }

/* Hovering a mega-menu row darkens its icon tile so it stands out against the
   row's own hover background. Specificity (0,3,0) beats each page's
   .page-x .mrow-ico grey override (0,2,0), so this one rule covers every page. */
.mrow:hover .mrow-ico { background: #DCDAE8; }

.mrow-txt { display: flex; flex-direction: column; gap: 3px; }
.mrow-txt strong {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ink);
}
.mrow-txt span { font-size: 0.78rem; line-height: 1.45; color: var(--slate); }

/* grey aside - the reference's "helping others" wall */
.mega-side {
	background: var(--paper);
	border-left: 1px solid var(--border);
	padding: 30px 30px 26px;
}
.mside-link {
	display: block;
	padding: 9px 0;
	font-size: 0.9rem;
	color: var(--slate-dark);
	transition: color 0.15s ease;
}
.mside-link:hover { color: var(--ink); }
.mside-cta { margin-top: 6px; color: var(--accent); font-weight: 600; }
.mside-cta:hover { color: var(--brand-coral); }

/* hamburger: ink bars on the white row */
.nav-toggle span { background: var(--ink); }

/* mobile flyout: light panel so the dark links show */
.main-nav.is-open {
	background: var(--white);
	border-color: var(--border);
	box-shadow: 0 20px 50px rgba(10, 15, 28, 0.16);
}
.main-nav.is-open .mega-title { color: var(--slate); }

@media (max-width: 600px) {
	.tt-util-row { font-size: 0.64rem; justify-content: center; }
	/* The utility links crowd the strip on a phone and duplicate the hamburger
	   menu + footer. Keep only the live-status signal, centred. */
	.tt-util .u-right { display: none; }
}

/* The header is now solid and sits in normal flow, so the hero no longer pulls
   up under a transparent floating island. */
.hero { margin-top: 0; padding-top: 52px; }

/* ============================================================
   Solutions - divided panel (homepage)
   ============================================================
   Replaces the dark floating cards with one bordered panel split
   by hairlines: six cells reading as a single considered object,
   on the page's own light palette so the block stops fighting the
   paper hero. New .sol-* classes - the old .solution-card is left
   for the Enterprise "who it's for" segment, which is dark and has
   no price row. Icons are unchanged.
   ============================================================ */
/* Paper ground so the white cells + hairlines read as a defined object.
   On a white section the whole panel dissolved into the page. */
.sol-section { background: var(--paper); }

.sol-panel {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--border);         /* shows through the 1px gaps as hairlines */
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.sol-cell {
	background: var(--white);
	padding: 32px 30px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: background 0.16s ease;
}

.sol-cell:hover { background: var(--paper); }

.sol-head { display: flex; align-items: center; gap: 14px; }

/* Icons unchanged - the same gradient tiles, sized to the lockup. */
.sol-ico { width: 44px; height: 44px; flex-shrink: 0; }
.sol-ico img, .sol-ico svg { width: 100%; height: 100%; display: block; }

.sol-head h3 {
	font-size: 1.05rem;
	line-height: 1.25;
	color: var(--ink);
}

.sol-cell > p {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--slate-dark);
	flex-grow: 1;   /* pushes the footer to a common baseline across cells */
}

.sol-foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.sol-price { font-family: var(--font-mono); font-size: 0.88rem; color: var(--ink); }
.sol-price .from { color: var(--slate); font-size: 0.72rem; }

.sol-go {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--accent);
	white-space: nowrap;
	transition: transform 0.15s ease;
}

.sol-cell:hover .sol-go { transform: translateX(3px); }

@media (max-width: 1024px) { .sol-panel { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .sol-panel { grid-template-columns: 1fr; } }

/* ---- Infrastructure editorial panel (dark "break the page" band, matches the
   bento colour). Placed before the case studies on the homepage. ---- */
.edp { background:#101828; border-radius:var(--radius-lg); padding:64px 64px 56px; }
.edp .ed-kick { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:10px; }
.edp .ed-head { font-family:'Space Grotesk',var(--font-body); font-weight:700; font-size:clamp(1.9rem,3.2vw,2.6rem); line-height:1.08; letter-spacing:-0.02em; margin:0 0 38px; max-width:18ch; color:#fff; }
.edp .ed-cols { columns:2; column-gap:52px; }
.edp .ed-body { font-family:var(--font-body); font-size:1.02rem; line-height:1.7; margin:0 0 18px; color:#B7BECF; }
.edp .ed-body:first-child::first-letter { font-family:'Space Grotesk',var(--font-body); font-weight:700; float:left; font-size:4rem; line-height:0.8; padding:8px 14px 0 0; background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.edp .ed-stat { break-inside:avoid; padding:16px 0; margin:6px 0 18px; border-top:1px solid rgba(255,255,255,0.22); border-bottom:1px solid rgba(255,255,255,0.22); }
.edp .ed-stat .fig { font-family:'Space Grotesk',var(--font-body); font-weight:700; font-size:3rem; line-height:1; display:block; letter-spacing:-0.02em; color:#fff; }
.edp .ed-stat .cap { font-family:var(--font-body); font-size:0.92rem; color:#9098b3; }
.edp .ed-colophon { margin:26px 0 0; padding-top:16px; border-top:3px double rgba(255,255,255,0.24); font-size:0.82rem; line-height:1.9; color:#9098b3; }
.edp .ed-colophon b { font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; font-weight:600; color:#fff; }
@media (max-width: 760px) {
	.edp { padding:44px 28px 38px; }
	.edp .ed-cols { columns:1; }
}

/* Enterprise CDN link inside the dark infra panel */
.edp a { color:#fff; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:3px; transition:color 0.15s ease; }
.edp a:hover { color:var(--accent); }

/* Spec points listed below the panel (datasheet-style, expands the page) */
.infra-specs { list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0 34px; }
.infra-specs .spec { padding:16px 0 18px; border-top:2px solid var(--ink); }
.infra-specs .t { display:block; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin-bottom:5px; }
.infra-specs .d { font-family:'Space Grotesk',var(--font-body); font-weight:600; font-size:1rem; color:var(--ink); }
@media (max-width:900px) { .infra-specs { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .infra-specs { grid-template-columns:1fr; } }

/* ---- Staggered scroll reveal: the panel's own block stays put, its children
   and the spec points fade/rise in one after another as it enters view. ---- */
.edp.reveal, .infra-specs.reveal { opacity:1; transform:none; }
.edp .ed-kick, .edp .ed-head, .edp .ed-cols {
	opacity:0; transform:translateY(20px);
	transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.edp.is-visible .ed-kick { opacity:1; transform:none; transition-delay:0.05s; }
.edp.is-visible .ed-head { opacity:1; transform:none; transition-delay:0.16s; }
.edp.is-visible .ed-cols { opacity:1; transform:none; transition-delay:0.30s; }
.infra-specs .spec {
	opacity:0; transform:translateY(18px);
	transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.infra-specs.is-visible .spec { opacity:1; transform:none; }
.infra-specs.is-visible .spec:nth-child(1){ transition-delay:0.04s; }
.infra-specs.is-visible .spec:nth-child(2){ transition-delay:0.10s; }
.infra-specs.is-visible .spec:nth-child(3){ transition-delay:0.16s; }
.infra-specs.is-visible .spec:nth-child(4){ transition-delay:0.22s; }
.infra-specs.is-visible .spec:nth-child(5){ transition-delay:0.28s; }
.infra-specs.is-visible .spec:nth-child(6){ transition-delay:0.34s; }
.infra-specs.is-visible .spec:nth-child(7){ transition-delay:0.40s; }
.infra-specs.is-visible .spec:nth-child(8){ transition-delay:0.46s; }
@media (prefers-reduced-motion: reduce) {
	.edp .ed-kick, .edp .ed-head, .edp .ed-cols, .infra-specs .spec { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* Included-value card prose (add-on upsells / renewal costs) + the included
   features listed as check points below the card, staggered in on scroll. */
.value-copy p { font-size:0.98rem; line-height:1.7; color:var(--slate-dark); margin:0 0 16px; }
.value-copy p:last-child { margin-bottom:0; }

.value-included { list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0 34px; }
.value-included li {
	display:flex; align-items:center; gap:10px;
	padding:15px 2px; border-top:2px solid var(--ink);
	font-size:0.92rem; font-weight:500; color:var(--ink);
	opacity:0; transform:translateY(16px);
	transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.value-included .chk { width:16px; height:16px; flex-shrink:0; color:var(--accent); }
.value-included.reveal { opacity:1; transform:none; }
.value-included.is-visible li { opacity:1; transform:none; }
.value-included.is-visible li:nth-child(1){ transition-delay:0.04s; }
.value-included.is-visible li:nth-child(2){ transition-delay:0.10s; }
.value-included.is-visible li:nth-child(3){ transition-delay:0.16s; }
.value-included.is-visible li:nth-child(4){ transition-delay:0.22s; }
.value-included.is-visible li:nth-child(5){ transition-delay:0.28s; }
.value-included.is-visible li:nth-child(6){ transition-delay:0.34s; }
.value-included.is-visible li:nth-child(7){ transition-delay:0.40s; }
.value-included.is-visible li:nth-child(8){ transition-delay:0.46s; }
@media (max-width:900px){ .value-included{ grid-template-columns:repeat(2,1fr); gap:0 24px; } }
@media (max-width:520px){ .value-included{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .value-included li{ opacity:1 !important; transform:none !important; transition:none !important; } }

/* ---- Why FastCow page ---- */
.why-lead { display:grid; grid-template-columns:1fr 1fr; gap:20px 52px; max-width:900px; margin:0 auto; }
.why-lead p { color:var(--slate-dark); font-size:1.05rem; line-height:1.72; margin:0; }

.why-points { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(10,15,28,0.10); border:1px solid rgba(10,15,28,0.10); border-radius:var(--radius-md); overflow:hidden; }
.why-point { background:var(--white); padding:28px 30px; }
.why-point .t { display:flex; align-items:center; gap:12px; font-family:'Space Grotesk',var(--font-body); font-weight:700; font-size:1.1rem; color:var(--ink); margin-bottom:9px; letter-spacing:-0.01em; }
.why-point .num { font-family:var(--font-mono); font-size:0.68rem; font-weight:600; color:var(--accent); border:1px solid var(--border); border-radius:6px; padding:3px 7px; }
.why-point p { color:var(--slate-dark); font-size:0.95rem; line-height:1.62; margin:0; }

.own-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
.own-item .ico { width:46px; height:46px; border-radius:12px; background:var(--brand-gradient); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:18px; box-shadow:0 3px 10px rgba(61, 99, 245,0.22); }
.own-item .ico svg { width:23px; height:23px; }
.own-item h3 { font-family:'Space Grotesk',var(--font-body); font-size:1.12rem; color:var(--ink); margin:0 0 8px; letter-spacing:-0.01em; }
.own-item p { color:var(--slate-dark); font-size:0.95rem; line-height:1.62; margin:0; }
.own-item a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

@media (max-width:760px) {
	.why-lead { grid-template-columns:1fr; gap:16px; }
	.own-grid { grid-template-columns:1fr; gap:22px; }
}
@media (max-width:640px) {
	.why-points { grid-template-columns:1fr; }
}

/* Why FastCow hero - subtle brand-chevron backdrop for lift (not a generic AI wash) */
.why-hero { position:relative; overflow:hidden; padding-top:104px; padding-bottom:104px; }
.why-hero .container { position:relative; z-index:1; }
.why-hero-chev { position:absolute; opacity:0.07; pointer-events:none; }
.why-hero-chev.tr { top:-90px; right:-130px; width:min(46vw,540px); }
.why-hero-chev.bl { bottom:-120px; left:-150px; width:min(42vw,480px); }
@media (max-width:760px) {
	.why-hero { padding-top:72px; padding-bottom:72px; }
	.why-hero-chev.tr { width:64vw; right:-90px; }
	.why-hero-chev.bl { display:none; }
}

/* Why FastCow - techy stats band (dark, to blast the point home) */
.tech-band { background:#101828; border-radius:var(--radius-lg); padding:46px 48px; margin-top:48px; }
.tech-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.tech-stats .ts { border-left:2px solid rgba(255,255,255,0.14); padding-left:22px; }
.tech-stats .ts:first-child { border-left:none; padding-left:0; }
.tech-stats .n { display:block; font-family:'Space Grotesk',var(--font-body); font-weight:700; font-size:clamp(1.9rem,3vw,2.5rem); line-height:1; letter-spacing:-0.02em; color:#fff; }
.tech-stats .n em { font-style:normal; background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.tech-stats .l { display:block; margin-top:10px; font-size:0.82rem; color:#9098b3; }
.tech-tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; padding-top:30px; border-top:1px solid rgba(255,255,255,0.12); }
.tech-tags span { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.02em; color:#B7BECF; border:1px solid rgba(255,255,255,0.18); border-radius:999px; padding:7px 13px; }
.tech-tags span.hot { color:#fff; border-color:var(--accent); background:rgba(61, 99, 245,0.16); font-weight:500; }
@media (max-width:820px) {
	.tech-band { padding:36px 28px; }
	.tech-stats { grid-template-columns:1fr 1fr; gap:26px 20px; }
	.tech-stats .ts:nth-child(3) { border-left:none; padding-left:0; }
}
@media (max-width:460px) {
	.tech-stats { grid-template-columns:1fr 1fr; }
}

/* ---- Why FastCow: comparison table ---- */
.cmp { border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; max-width:900px; margin:0 auto; }
.cmp-row { display:grid; grid-template-columns:1.6fr 1.1fr 1.1fr; align-items:center; border-top:1px solid var(--border); }
.cmp-row:first-child { border-top:none; }
.cmp-row > div { padding:15px 22px; font-size:0.93rem; }
.cmp-head { background:var(--paper); font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate); }
.cmp-head .cmp-us { color:var(--ink); font-weight:600; }
.cmp-feat { color:var(--ink); font-weight:500; }
.cmp-us { background:rgba(61, 99, 245,0.06); border-left:1px solid var(--border); border-right:1px solid var(--border); font-weight:600; color:var(--ink); display:flex; align-items:center; gap:9px; }
.cmp-us .ck { width:17px; height:17px; flex-shrink:0; color:var(--accent); }
.cmp-them { color:var(--slate); }
@media (max-width:640px) {
	.cmp-row { grid-template-columns:1.4fr 1fr 1fr; }
	.cmp-row > div { padding:12px 12px; font-size:0.82rem; }
	.cmp-us { gap:6px; }
	.cmp-us .ck { width:14px; height:14px; }
}

/* ---- Why FastCow: compact testimonial quotes ---- */
.wf-quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.wf-quote { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); padding:28px 26px; display:flex; flex-direction:column; }
.wf-quote .stars { color:#E8B341; letter-spacing:2px; font-size:0.85rem; margin-bottom:13px; }
.wf-quote p { font-size:0.94rem; line-height:1.6; color:var(--slate-dark); margin:0 0 22px; flex-grow:1; }
.wf-quote p b { color:var(--ink); font-weight:600; }
.wf-quote .who { display:flex; align-items:center; gap:12px; }
.wf-quote .ini { width:40px; height:40px; border-radius:50%; background:var(--brand-gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:0.78rem; font-weight:600; flex-shrink:0; }
.wf-quote .name { display:block; font-weight:600; font-size:0.9rem; color:var(--ink); }
.wf-quote .role { display:block; font-size:0.78rem; color:var(--slate); margin-top:1px; }
@media (max-width:900px) { .wf-quotes { grid-template-columns:1fr; } }

/* ---- Why FastCow: guarantees grid (reuses .own-item) ---- */
.guar-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:44px; }
@media (max-width:900px) { .guar-grid { grid-template-columns:1fr 1fr; gap:26px 22px; } }
@media (max-width:480px) { .guar-grid { grid-template-columns:1fr; } }

/* ---- Why FastCow: FAQ accordion ---- */
.faq { max-width:820px; margin:0 auto; border-top:1px solid var(--border); }
.faq details { border-bottom:1px solid var(--border); }
.faq summary { list-style:none; cursor:pointer; padding:20px 4px; font-family:'Space Grotesk',var(--font-body); font-weight:600; font-size:1.05rem; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--font-mono); font-size:1.4rem; line-height:1; color:var(--accent); flex-shrink:0; transition:transform 0.2s ease; }
.faq details[open] summary::after { content:"\2013"; }
.faq details p { margin:0; padding:0 4px 22px; color:var(--slate-dark); font-size:0.98rem; line-height:1.7; max-width:72ch; }

/* ============================================================
   HERO PROOF CARD - one number, light card, faint chevron wash.
   Replaced the dark control-panel mock: a single hero metric reads
   as confidence where a full simulated dashboard read as generic
   filler. Colour is rationed hard - one gradient bar, one gradient
   chip icon, one coral live-dot - which is what keeps it from
   looking generated. Light on --paper so it belongs to the page.
   ============================================================ */
.hero-proof { position: relative; padding: 26px 30px; }

/* Fill sits on the <svg>, not on `path`: keeps parity with the /features
   chevron treatment and survives if the shapes are ever swapped to <use>. */
.hero-proof .hp-bg {
	position: absolute; top: -70px; right: -120px;
	width: 520px; opacity: 0.13; pointer-events: none;
	fill: url(#heroChevGrad);
}

.hero-proof .hp-card {
	position: relative;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 22px 24px 24px;
	box-shadow: 0 26px 60px rgba(10, 15, 28, 0.13);
}

.hero-proof .hp-top { display: flex; align-items: center; margin-bottom: 20px; }
.hero-proof .hp-dots { display: flex; gap: 6px; }
.hero-proof .hp-dots i { width: 9px; height: 9px; border-radius: 50%; background: #dfe3ea; }
.hero-proof .hp-live {
	margin-left: auto;
	display: inline-flex; align-items: center; gap: 7px;
	font-family: var(--font-mono); font-size: 0.62rem; color: var(--slate-dark);
	background: var(--paper); border: 1px solid var(--border);
	border-radius: 99px; padding: 4px 10px;
}
.hero-proof .hp-live i {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--brand-coral); animation: hp-pulse 2s ease-in-out infinite;
}
@keyframes hp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .hero-proof .hp-live i { animation: none; } }

.hero-proof .hp-fig {
	display: flex; align-items: baseline; gap: 3px;
	font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; color: var(--ink);
}
.hero-proof .hp-fig .n { font-size: clamp(3rem, 5.4vw, 4rem); line-height: 1; }
.hero-proof .hp-fig .u { font-size: 1.35rem; color: var(--slate); }
.hero-proof .hp-cap { font-size: 0.86rem; color: var(--slate); margin: 8px 0 0; line-height: 1.5; }
.hero-proof .hp-cap b { color: var(--ink); font-weight: 600; }

.hero-proof .hp-chart { display: flex; align-items: flex-end; gap: 7px; height: 92px; margin-top: 22px; }
.hero-proof .hp-chart i { flex: 1; border-radius: 4px 4px 0 0; background: #E9EEF8; }
.hero-proof .hp-chart i.hi { background: var(--brand-gradient); }   /* the one accent */
.hero-proof .hp-foot { display: flex; justify-content: space-between; margin-top: 9px; font-family: var(--font-mono); font-size: 0.6rem; color: var(--slate); }

/* Two chips, opposite corners, half off the card edge - depth without scatter. */
.hero-proof .hp-chip {
	position: absolute;
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--white); border: 1px solid var(--border);
	border-radius: 11px; padding: 9px 13px;
	font-size: 0.76rem; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.hero-proof .hp-chip .ic {
	width: 22px; height: 22px; border-radius: 6px; flex: none;
	display: grid; place-items: center;
	background: var(--brand-gradient); color: #fff;
}
.hero-proof .hp-chip .ic svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hero-proof .hp-chip.tl { top: -6px; left: -14px; box-shadow: 0 14px 30px rgba(10, 15, 28, 0.13); }
.hero-proof .hp-chip.br { bottom: 2px; right: -16px; box-shadow: 0 18px 38px rgba(10, 15, 28, 0.16); }

/* The chips hang off the edges by design; with no column beside them on a
   phone they would hang off the viewport, so pull them back in. */
@media (max-width: 620px) {
	.hero-proof { padding: 26px 6px; }
	.hero-proof .hp-chip.tl { left: -4px; }
	.hero-proof .hp-chip.br { right: -4px; }
}

/* ============================================================
   HOMEPAGE HEADER (scoped to .page-home).
   The shared .tt-main is a white bar with a bottom hairline, which
   suits the dark-hero product pages. On the homepage the hero is
   --paper, so here the bar takes the same paper, drops its stroke,
   and runs the menu full-width - it dissolves into the hero instead
   of sitting on top of it as a distinct band.
   ============================================================ */
/* Wide, blended header on EVERY page (replicated from the homepage): the main
   bar takes the paper hero surface, drops its bottom stroke, and runs the menu
   full-width - logo hard-left, actions hard-right, past the 1400px column. */
.tt-main {
	background: var(--paper);
	border-bottom: 0;
}
.tt-util > .container,
.tt-main > .container {
	max-width: none;
	padding: 0 56px;
}

/* Enterprise is the one dark-themed page: blend the header into ITS dark hero
   instead of the paper one, and flip the menu to light so it stays legible. */
.page-enterprise .tt-main { background: var(--ent-ground); }
.page-enterprise .nav-link { color: var(--ent-text); }
.page-enterprise .nav-link:hover { color: #fff; }
.page-enterprise .nav-link .chevron { opacity: 0.6; }
.page-enterprise .header-actions .btn-outline { color: #fff; border-color: var(--ent-line); }
.page-enterprise .header-actions .btn-outline:hover { border-color: #fff; background: transparent; }

/* ---- hero client band ----
   Sits in the right column under the proof card. app.js cross-fades two sets of
   five logos on a stagger; the opacity transition is what the rotation rides on.

   Both hero columns are made equal-height flex columns and their last child is
   pushed to the bottom, so the stat row (left) and the logo row (right) land on
   the same line while the h1 and the card stay pinned to the top. Homepage only:
   the product pages share .hero-grid but not this layout. */
.page-home .hero-grid { align-items: stretch; }
.page-home .hero-copy,
.page-home .hero-visual { display: flex; flex-direction: column; }
.page-home .hero-copy .hero-stat-row,
.page-home .hero-clients { margin-top: auto; }

.hero-clients .hc-track {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
}
.hero-clients .hc-logo {
	height: 24px;
	max-width: 104px;
	width: auto;
	object-fit: contain;
	opacity: 0.5;
	filter: grayscale(1);
	transition: opacity 0.5s ease;
}

@media (max-width: 1024px) {
	/* Hero stacks to one column here, so nothing shares a line - drop the
	   bottom-pin and give the logos ordinary spacing under the (now full-width)
	   visual instead of a stretched gap. */
	.page-home .hero-copy .hero-stat-row { margin-top: 20px; }
	.page-home .hero-clients { margin-top: 32px; }
	.hero-clients .hc-track { flex-wrap: wrap; gap: 16px 26px; justify-content: flex-start; }
}

/* ============================================================
   MEGA MENU - compact contained card (all pages).
   The shared mega docked edge-to-edge, which read stretched and hollow -
   worst on the full-width homepage header. It's now a compact ~720px card,
   centred under the nav, with the secondary "Explore" aside dropped for a
   tighter shape. Docked flush (top:100%) so the cursor never crosses a gap.
   ============================================================ */
.dropdown.mega.mega-nav {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	width: min(720px, calc(100vw - 48px));
	top: 100%;
	grid-template-columns: 1fr;   /* single block - no aside column */
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: 0 24px 50px rgba(10, 15, 28, 0.16);
	overflow: hidden;
}
.dropdown.mega.mega-nav .mega-side { display: none; }

/* The open state forces translateY(0); re-assert the centring so the card
   doesn't jump left when it appears. */
.nav-item.has-mega:hover .dropdown.mega.mega-nav,
.nav-item.has-mega:focus-within .dropdown.mega.mega-nav { transform: translateX(-50%); }

/* The card floats now rather than docking flush, so the header keeps its own
   bottom edge instead of morphing it away on hover. (No-op on the homepage,
   whose header is already borderless.) */
.tt-main:has(.has-mega:hover),
.tt-main:has(.has-mega:focus-within) { border-bottom-color: var(--border); }

/* ============================================================
   HOMEPAGE - BLACK + PURPLE THEME
   Token-driven, but --white (62 text / 24 surface uses) and --ink
   (49 text / 14 surface) are OVERLOADED. So: keep --white white so
   white text stays white, and make --ink LIGHT so dark text turns
   light. Then re-darken only the specific homepage SURFACES that
   used those two tokens. Coral is toned to magenta. Scoped to home.
   ============================================================ */
.page-home {
	--paper: #0A0710;
	--paper-dim: #0F0B18;
	--border: rgba(181, 144, 241, 0.14);
	--border-dark: rgba(181, 144, 241, 0.22);
	--slate: #AAAFBA;
	--slate-dark: #CFD2DA;
	--ink: #E9E9F1;
	--ink-soft: #D3D6DE;
	--brand-coral: #3D63F5;
	--brand-gradient: linear-gradient(90deg, #8CA6FF 0%, #5E7CFF 50%, #3D63F5 100%);
	--brand-gradient-diag: linear-gradient(135deg, #8CA6FF 0%, #5E7CFF 50%, #3D63F5 100%);
	background: #0A0710;
	color: #DDE0E6;
}
/* header: dark bar, light nav, blended into the hero */
.page-home .tt-util { background: #07050C; }
.page-home .tt-main { background: #0A0710; }
.page-home .nav-link { color: #C8CAD3; }
.page-home .nav-link:hover { color: #fff; }
.page-home .header-actions .btn-outline { color: #fff; border-color: rgba(181, 144, 241, 0.3); }
.page-home .site-footer { background: #07050C; }
/* SURFACES that used --ink (now light) -> force back to dark */
.page-home .btn-primary { background: var(--brand-gradient-diag); }
.page-home .btn-primary::before { display: none; }
.page-home .hero-announce .tag { background: #241A33; }
.page-home .stat-band { background: #100B1A; }
.page-home .case-study-media,
.page-home .woo-panel,
.page-home .video-frame { background: #15111E; }
/* SURFACES that used --white (kept white) -> dark cards on home */
.page-home .hero-proof .hp-card { background: #15111E; }
.page-home .hero-proof .hp-chip { background: #1B1628; }
.page-home .trio-item { background: #15111E; }
.page-home .sol-cell { background: #15111E; }
.page-home .sol-cell:hover { background: #1B1526; }
.page-home .vig .chip { background: #1B1628; }
.page-home .vig .dial { background: #15111E; }
.page-home .bento-card.light { background: linear-gradient(120deg, #1B1430 0%, #181428 55%, #141120 100%); }
/* purple hero glow on the dark ground */
.page-home .hero {
	background:
		radial-gradient(ellipse 900px 620px at 14% -8%, rgba(181, 144, 241, 0.24), transparent 70%),
		radial-gradient(ellipse 780px 540px at 88% 96%, rgba(149, 119, 245, 0.10), transparent 70%),
		#0A0710;
}
/* seat light-background photos on the dark ground */
.page-home .feature-visual img,
.page-home .support-media img,
.page-home .bento-media img { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); }
/* --ink-background surfaces missed above (now light) -> dark on home */
.page-home .woo-section { background: #0F0B18; }
.page-home .store-media { background: #15111E; }
.page-home .vig .btn { background: var(--brand-gradient-diag); }
.page-home .case-study-media,
.page-home .cdn-panel { background: #15111E; }
/* hardcoded light testimonials band -> dark */
.page-home .testimonials-section { background: #0C0914; }
/* light lavender-gradient panels (value-panel/review-card/pull-quote/pillar/duo)
   -> dark on home */
.page-home .value-panel,
.page-home .review-card,
.page-home .pull-quote,
.page-home .pillar,
.page-home .duo { background: linear-gradient(120deg, #17121F 0%, #14111C 55%, #120F1A 100%); }
/* light CTA button: --ink text went light (invisible on the white pill) and its
   hover used --paper (now dark) - restore dark text + white hover */
.page-home .btn-light { color: #14101D; }
.page-home .btn-light:hover { background: #fff; }
/* client logos: grayscale stays dark on black - invert to soft white marks */
.page-home .hero-clients .hc-logo { filter: brightness(0) invert(1); opacity: 0.5; }
.page-home .client-grid img { filter: brightness(0) invert(1); opacity: 0.5; }
.page-home .client-grid img:hover { opacity: 0.85; filter: brightness(0) invert(1); }
/* client logo strip - moved out of the hero to sit above the Performance bento */
.client-strip { padding: 40px 0 24px; }
.client-strip .client-strip-cap {
	text-align: center; font-family: var(--font-mono); font-size: 0.72rem;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); margin: 0 0 24px;
}
.client-strip .hc-track {
	display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 30px 26px;
}
.client-strip .hc-logo {
	width: 150px; height: 38px; object-fit: contain;
	opacity: 0.55; filter: grayscale(1); transition: opacity 0.5s ease;
}
.page-home .client-strip .hc-logo { filter: brightness(0) invert(1); }
/* mega / dropdown panels on the homepage: the white panel clashed with the dark
   header. Darken it - the row text is already light (--ink/--slate remapped), so
   it reads cleanly on the dark panel. mega-side is hidden by Option C. */
.page-home .dropdown,
.page-home .dropdown.mega {
	background: #14101E;
	border-color: rgba(181, 144, 241, 0.20);
	box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
}
.page-home .mrow:hover,
.page-home .dropdown-link:hover,
.page-home .mega-link:hover { background: rgba(181, 144, 241, 0.12); }
.page-home .mside-link:hover { color: #fff; }
.page-home .main-nav.is-open { background: #14101E; }
/* push the hero illustration down: centre the proof card in its column so it sits
   against the text block instead of poking up above the headline */
.page-home .hero-visual { justify-content: center; }


/* ============================================================
   HOMEPAGE - LOGIN PALETTE (LIVE)
   Navy->violet->coral gradient hero, light lavender body, navy
   headings, coral buttons. This block loads last, so it supersedes
   the earlier .page-home dark theme for every shared selector.
   Ported verbatim from the approved index-login-theme.html preview.
   ============================================================ */
/* ===================================================================
   LOGIN-PALETTE PREVIEW - flips the dark homepage to the sign-in look:
   navy->violet->coral gradient hero, light lavender body, navy
   headings, grey copy, coral buttons, purple accents. Overrides the
   .page-home dark rules (this block loads after styles.css).
   =================================================================== */
.page-home {
	--paper: #F0F3F9;
	--paper-dim: #E9E9F2;
	--white: #FFFFFF;
	--border: #E5E1EF;
	--border-dark: #D6D0E6;
	--slate: #6C6683;
	--slate-dark: #4A4560;
	--ink: #1C1638;
	--ink-soft: #2A2450;
	--brand-purple: #4E72FF;
	--brand-pink: #6E8CFF;
	--brand-coral: #6E8CFF;
	--brand-gradient: linear-gradient(120deg, #3D63F5 0%, #6E8CFF 55%, #8CA6FF 100%);
	--brand-gradient-diag: linear-gradient(135deg, #3D63F5 0%, #6E8CFF 52%, #8CA6FF 100%);
	background: #F0F3F9;
	color: #4A4560;
}

/* ---- header: light bar, dark nav ---- */
.page-home .tt-util { background: #1C1638; }
.page-home .tt-main { background: #F0F3F9; }
.page-home .nav-link { color: #4A4560; }
.page-home .nav-link:hover { color: #1C1638; }
.page-home .header-actions .btn-outline { color: #1C1638; border-color: #E5E1EF; }
.page-home .site-footer { background: #1C1638; }

/* ---- HERO: the login gradient panel, white text ---- */
.page-home .hero {
	background: linear-gradient(132deg, #0A1230 0%, #1B2B6B 19%, #2E49B0 39%, #4E72FF 57%, #6E8CFF 76%, #8CA6FF 100%);
}
.page-home .hero h1 { color: #FFFFFF; }
.page-home .hero h1 .highlight { background: linear-gradient(115deg, #8CA6FF 0%, #6E8CFF 48%, #B9C9FF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.page-home .hero .hero-copy p.lead { color: rgba(255,255,255,0.86); }
.page-home .hero .hero-announce { color: rgba(255,255,255,0.85); }
.page-home .hero .hero-announce .tag { background: rgba(255,255,255,0.16); color: #fff; }
.page-home .hero .hero-stat-value { color: #FFFFFF; }
.page-home .hero .hero-stat-label { color: rgba(255,255,255,0.72); }
.page-home .hero .hero-stat-row { border-top-color: rgba(255,255,255,0.22); }
/* hero buttons on the gradient */
.page-home .hero .btn-outline { color: #fff; border-color: rgba(255,255,255,0.5); }
.page-home .hero .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* ---- proof card: white panel on the gradient ---- */
.page-home .hero-proof .hp-card { background: #FFFFFF; box-shadow: 0 30px 70px rgba(20,16,58,0.35); }
.page-home .hero-proof .hp-chip { background: #FFFFFF; color: #1C1638; }
.page-home .hero-proof .hp-fig { color: #1C1638; }
.page-home .hero-proof .hp-cap b { color: #1C1638; }
.page-home .hero-proof .hp-chart i { background: #ECE7F6; }

/* ---- buttons: coral primary (login) ---- */
.page-home .btn-primary { background: #6E8CFF; color: #fff; }
.page-home .btn-primary::before { display: none; }
.page-home .btn-primary:hover { background: #1B2542; }
.page-home .btn-light { background: #fff; color: #1C1638; }
.page-home .btn-light:hover { background: #F0F3F9; }
.page-home .header-actions .btn-primary { background: #6E8CFF; }
.page-home .vig .btn { background: #6E8CFF; }

/* ---- surfaces back to light ---- */
.page-home .dropdown,
.page-home .dropdown.mega { background: #FFFFFF; border-color: #E5E1EF; box-shadow: 0 24px 50px rgba(28,22,56,0.15); }
.page-home .mrow:hover,
.page-home .dropdown-link:hover,
.page-home .mega-link:hover { background: #F0F3F9; }
.page-home .main-nav.is-open { background: #FFFFFF; }
.page-home .trio-item,
.page-home .sol-cell,
.page-home .vig .chip,
.page-home .vig .dial,
.page-home .store-media,
.page-home .video-frame,
.page-home .case-study-media,
.page-home .cdn-panel { background: #FFFFFF; }
.page-home .sol-cell:hover { background: #FBFAFE; }
.page-home .woo-section { background: #F0F3F9; }
.page-home .testimonials-section { background: #F0F3F9; }
.page-home .stat-band { background: #1C1638; }
.page-home .value-panel,
.page-home .review-card,
.page-home .pull-quote,
.page-home .pillar,
.page-home .duo,
.page-home .bento-card.light { background: linear-gradient(120deg, #EEF2FA 0%, #EAF0FB 55%, #E8EEFA 100%); }

/* ---- client logos: grayscale marks on the light strip ---- */
.page-home .client-strip .hc-logo,
.page-home .hero-clients .hc-logo { filter: grayscale(1); opacity: 0.55; }
.page-home .client-strip .hc-logo:hover { opacity: 0.9; }

/* ---- photos: soft shadow suited to a light ground ---- */
.page-home .feature-visual img,
.page-home .support-media img,
.page-home .bento-media img { box-shadow: 0 20px 50px rgba(28,22,56,0.16); }
.page-home .woo-section { color: #4A4560; }
.page-home .woo-section h2, .page-home .woo-copy h2 { color: #1C1638; }
.page-home .woo-section li { color: #4A4560; }
.page-home .hero .hero-announce b { color: #fff; }

/* ---- animated hero pattern: drifting dot grid + shifting light bloom ---- */
.page-home .hero { position: relative; overflow: hidden; }
.page-home .hero > .container { position: relative; z-index: 2; }
.page-home .hero::after {
	content: ''; position: absolute; inset: -12%; z-index: 0; pointer-events: none;
	background:
		radial-gradient(48% 62% at 68% 36%, rgba(255,255,255,0.36), transparent 66%),
		radial-gradient(48% 60% at 24% 82%, rgba(232,138,110,0.48), transparent 66%),
		radial-gradient(42% 52% at 88% 82%, rgba(176,114,216,0.36), transparent 68%);
	animation: heroBloom 13s ease-in-out infinite alternate;
}
@keyframes heroBloom {
	from { transform: translate(-34px, -22px) scale(1); }
	to   { transform: translate(36px, 26px) scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
	.page-home .hero::after { animation: none; }
}

/* product cards: "Learn more" as a small pill button next to the price */
.page-home .sol-foot { margin-top: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.page-home .sol-price { font-size: 0.9rem; }
.page-home .sol-go {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--font-body); font-size: 0.8rem; font-weight: 600;
	letter-spacing: 0; text-transform: none;
	color: #fff; background: #6E8CFF;
	border-radius: 8px; padding: 7px 14px; white-space: nowrap;
	transition: filter 0.15s ease;
}
.page-home .sol-cell:hover .sol-go { filter: brightness(1.07); }

/* Top Notch Security bento card: warm lavender gradient clashed with the cool
   page bg - make it a clean white card with a defined border + soft shadow */
.page-home .bento-card.light {
	background: #FFFFFF;
	border: 1px solid #E9E5F2;
	box-shadow: 0 16px 44px rgba(28,22,56,0.07);
}

/* "The extras other hosts bill for" value panel: same warm lavender gradient
   clashed with the cool page bg - clean white card, defined border + shadow */
.page-home .value-panel {
	background: #FFFFFF;
	border: 1px solid #E9E5F2;
	box-shadow: 0 16px 44px rgba(28,22,56,0.07);
}

/* Speed video badges: the old translucent-white cards vanished against the
   bright video. Rebuild them as solid dark-navy cards (readable on any frame)
   and float them off the LEFT and RIGHT edges so they overlap the video sides. */
/* Speed section: compact stat trio under the feature list, balancing the copy
   column against the tall video beside it. */
.page-home .feature-stats {
	display: flex;
	gap: 34px;
	margin: 4px 0 26px;
	flex-wrap: wrap;
}
.page-home .feature-stats .fs-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.page-home .feature-stats .fs-num {
	font-family: var(--font-display, var(--font-body));
	font-size: 1.65rem;
	font-weight: 700;
	line-height: 1;
}
.page-home .feature-stats .fs-lab {
	font-size: 0.78rem;
	color: var(--slate);
	letter-spacing: 0.01em;
}

.page-home .feature-visual.video-full { overflow: visible; }
.page-home .support-video { overflow: visible; }
.page-home .sv-badge {
	background: #1C1638;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border: 1px solid rgba(255,255,255,0.10);
	box-shadow: 0 18px 40px rgba(20,16,58,0.42);
	z-index: 5;
}
.page-home .sv-badge .sv-txt strong { color: #FFFFFF; }
.page-home .sv-badge .sv-txt .sub { color: rgba(255,255,255,0.62); }
.page-home .sv-badge-tl { top: 30px; left: -36px; right: auto; }
.page-home .sv-badge-bl { bottom: 30px; right: -36px; left: auto; }
@media (max-width: 700px) {
	.page-home .sv-badge-tl { left: 12px; }
	.page-home .sv-badge-bl { right: 12px; }
}

/* ============================================================
   LOGIN PALETTE - SITE-WIDE CHROME (LIVE)
   Un-scoped overrides that carry the homepage look onto every
   page. Palette tokens already flipped in :root above; these
   handle the few hardcoded/component bits that tokens can't.
   .page-home keeps its own more-specific block, so the homepage
   is unaffected by these.
   ============================================================ */
/* Primary button: solid coral (matches homepage) instead of the ink+gradient */
.btn-primary { background: var(--brand-coral); color: #fff; }
.btn-primary::before { display: none; }
.btn-primary:hover { background: #1B2542; }
.btn-primary:hover::before { opacity: 0; }
.header-actions .btn-primary { background: var(--brand-coral); }

/* ============================================================
   ENTERPRISE PAGE - LIGHT CONVERSION CORRECTIONS
   The page was authored dark; its tokens are now light (above).
   These fix the rules that hardcoded dark-ground assumptions -
   splitting the gradient HERO (white text/buttons) from the
   light body sections (dark text/buttons).
   ============================================================ */
/* Hero sits on the gradient: white copy + white outline button */
.page-enterprise .hero-copy p.lead { color: rgba(255,255,255,0.86); }
.page-enterprise .hero-stat-label { color: rgba(255,255,255,0.72); }
.page-enterprise .hero-stat-value { color: #fff; }
.page-enterprise .hero-stat-row { border-top-color: rgba(255,255,255,0.22); }
.page-enterprise .hero .btn-outline { color: #fff; border-color: rgba(255,255,255,0.5); }
.page-enterprise .hero .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* Body sections are light now: dark outline buttons, coral primary */
.page-enterprise section .btn-primary { background: var(--brand-coral); color: #fff; }
.page-enterprise section .btn-primary:hover { background: #1B2542; box-shadow: 0 10px 24px rgba(231,106,87,0.3); }
.page-enterprise section .btn-outline { color: var(--ink); border-color: var(--border); }
.page-enterprise section .btn-outline:hover { border-color: var(--ink); background: transparent; }

/* --- enterprise: white-on-light text/logos that the token flip couldn't reach --- */
/* Trust-strip marks were knocked out to white for the dark ground; on the light
   page make them grey silhouettes like every other page. */
.page-enterprise .client-grid img { filter: grayscale(1); opacity: 0.55; }
.page-enterprise .client-grid img:hover { filter: grayscale(1); opacity: 0.9; }
/* Feature-row bullets, chart values, value-panel figure + rows, pull quote:
   all hardcoded white - repoint to dark ink on the now-light surfaces. */
.page-enterprise .feature-copy ul li { color: var(--slate-dark); }
.page-enterprise .mini-chart .bar .bar-value { color: var(--ink); }
.page-enterprise .value-stat .n { color: var(--ink); }
.page-enterprise .value-panel .value-list .li { color: var(--slate-dark); }
.page-enterprise .pull-quote blockquote { color: var(--ink); }
.page-enterprise .pull-quote .pq-name { color: var(--ink); }
/* Solution cards hover flipped to a near-black; keep it a light tint now. */
.page-enterprise .solution-card:hover { background: #FBFAFE; box-shadow: 0 22px 48px rgba(28,22,56,0.12); }
/* The ENT pricing cards stay dark (premium accent). Their outline buttons were
   caught by the body-section dark-text rule - restore white on the dark cards. */
/* Enterprise pricing buttons now use the dark solid .pkg-card .btn treatment (see hero-theme block) */

/* --- enterprise: control-panel checklist labels + CDN chart bars --- */
.page-enterprise .cp-check span { color: var(--slate-dark); }
.page-enterprise .mini-chart .bar { background: var(--border); }

/* ============================================================
   DATACENTER PAGE - dotted world map panel ("Host closer to you")
   Dark panel matching the page's other data panels; dots carry the
   brand gradient, coral markers pulse on the datacenter locations.
   ============================================================ */
.page-dc .dc-mapwrap {
	/* One continuous violet wash - low contrast so no discrete shape reads
	   behind the dots. A soft warm centre fades out well before the edges,
	   and the base stays in the same violet family corner-to-corner. */
	background:
		radial-gradient(60% 72% at 50% 45%, rgba(243,150,112,0.15) 0%, rgba(243,150,112,0) 60%),
		radial-gradient(130% 130% at 50% 48%, #2B2252 0%, #241C46 55%, #1E1739 100%);
	border-color: rgba(181, 144, 241, 0.18);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	padding: 22px;
}
.page-dc .dc-mapwrap .dc-map { width: 100%; height: auto; display: block; }
.page-dc .dc-cap {
	position: absolute;
	left: 22px;
	bottom: 16px;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: rgba(233, 233, 241, 0.6);
}
.page-dc .dc-marks .dc-halo {
	transform-box: fill-box;
	transform-origin: center;
	animation: dcPulse 2.6s ease-out infinite;
}
.page-dc .dc-marks .dc-halo:nth-of-type(3) { animation-delay: 0.5s; }
.page-dc .dc-marks .dc-halo:nth-of-type(5) { animation-delay: 1.0s; }
.page-dc .dc-marks .dc-halo:nth-of-type(7) { animation-delay: 1.5s; }
.page-dc .dc-marks .dc-halo:nth-of-type(9) { animation-delay: 0.8s; }
@keyframes dcPulse {
	0%   { transform: scale(1);   opacity: 0.7; }
	70%  { transform: scale(3.2); opacity: 0; }
	100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.page-dc .dc-marks .dc-halo { animation: none; opacity: 0.35; }
}

/* ============================================================
   FOOTER - Option A (bold + CTA strip), applies to all pages
   ============================================================ */
.site-footer { background: #050A1B; color: rgba(255,255,255,0.60); padding-top: 0; }
.footer-cta {
	display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
	padding: 48px 0; border-bottom: 1px solid rgba(255,255,255,0.10);
}
.footer-cta-copy h3 { font-family: 'Space Grotesk', var(--font-body); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 1.95rem); letter-spacing: -0.02em; color: #fff; }
.footer-cta-copy p { color: rgba(255,255,255,0.60); margin-top: 6px; font-size: 0.95rem; }
.footer-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.site-footer .footer-cta .btn-primary { background: #3D63F5; color: #fff; border: 0; border-radius: 12px; }
.site-footer .footer-cta .btn-primary::before { display: none; }
.site-footer .footer-cta .btn-primary:hover { background: #4E72FF; box-shadow: 0 8px 22px rgba(61,99,245,0.32); }
.site-footer .footer-cta .btn-outline { background: transparent; border: 1.5px solid rgba(255,255,255,0.30); color: #fff; border-radius: 12px; }
.site-footer .footer-cta .btn-outline:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.5); }

.footer-grid { grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; padding: 52px 0 46px; }
.footer-brand .logo img { height: 26px; }
.footer-brand p { color: rgba(255,255,255,0.55); font-size: 0.92rem; line-height: 1.6; max-width: 260px; margin: 16px 0 20px; }
.footer-social { gap: 10px; }
.footer-social a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.70); }
.footer-social a:hover { border-color: #3D63F5; background: rgba(61,99,245,0.14); }
.footer-social svg { width: 16px; height: 16px; color: currentColor; }
.footer-col h4 { font-family: 'Space Grotesk', var(--font-body); font-weight: 700; font-size: 1rem; color: #fff; margin-bottom: 16px; }
.footer-col ul { gap: 11px; }
.footer-col a { color: rgba(255,255,255,0.60); font-size: 0.92rem; font-weight: 500; }
.footer-col a:hover { color: #fff; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.10); padding: 22px 0; gap: 20px; }
.footer-status { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); font-family: var(--font-mono); font-weight: 600; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: #4ADE80; }
.footer-status i { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; animation: footStatus 1.7s ease-in-out infinite; flex: none; }
@keyframes footStatus { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 60% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } }
.footer-copy { color: rgba(255,255,255,0.45); font-size: 0.82rem; }
.footer-bottom-links a { color: rgba(255,255,255,0.50); font-weight: 500; font-size: 0.85rem; }
.footer-bottom-links a:hover { color: #fff; }
@media (max-width: 900px) {
	.footer-cta { flex-direction: column; align-items: flex-start; }
	.footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Brand imagery -> blue duotone, so baked-in purple/orange
   composites and mixed-background team portraits match the theme.
   (Editorial blog thumbnails are deliberately left untouched.)
   ============================================================ */
img[src*="speed-panel"],
img[src*="support-panel"],
img[src*="woo-panel"] {
	filter: grayscale(1) sepia(1) hue-rotate(185deg) saturate(1.9) brightness(0.98);
}

/* ============================================================
   FAQ - split layout: heading + contact prompt (left), accordion (right).
   Applied to any <section class="faq-section">; its .container holds exactly
   the .section-head and the .faq as the two grid columns.
   ============================================================ */
.faq-section .container { display: grid; grid-template-columns: 0.82fr 1.4fr; gap: 52px; align-items: start; }
.faq-section .section-head { text-align: left; max-width: none; margin: 0; }
.faq-section .section-head .eyebrow { justify-content: flex-start; }
.faq-section .faq-prompt { color: var(--slate-dark); font-size: 0.95rem; line-height: 1.6; margin: 14px 0 20px; max-width: 32ch; }
.faq-section .faq-cta { border-radius: 12px; }
.faq-section .faq { max-width: none; margin: 0; }
@media (max-width: 860px) {
	.faq-section .container { grid-template-columns: 1fr; gap: 24px; }
}

/* MWP "All the great stuff" panel: dark navy + glow, like the homepage value panel */
.page-mwp .value-panel {
	background:
		radial-gradient(60% 72% at 18% 12%, rgba(61,99,245,0.22), transparent 70%),
		radial-gradient(48% 60% at 92% 96%, rgba(110,140,255,0.14), transparent 72%),
		#050A1B;
	border: 1px solid rgba(255,255,255,0.10);
	box-shadow: 0 30px 70px rgba(6,12,34,0.42);
	color: rgba(255,255,255,0.75);
}
.page-mwp .value-panel h2 { color: #FFFFFF; }
.page-mwp .value-panel .section-head p { color: rgba(255,255,255,0.66); }
.page-mwp .value-panel .incl-grid span { color: rgba(255,255,255,0.9); border-bottom-color: rgba(255,255,255,0.12); }
.page-mwp .value-panel .incl-grid svg { color: #6E8CFF; }

/* ============================================================
   MWP support illustration: 3-screen story (site down -> SSH fix -> restored)
   ============================================================ */
.page-mwp .sup-canvas {
	background:
		radial-gradient(58% 62% at 26% 16%, rgba(61,99,245,0.22), transparent 70%),
		radial-gradient(52% 60% at 90% 92%, rgba(110,140,255,0.15), transparent 72%),
		#050A1B;
	border-color: rgba(255,255,255,0.08);
	--supT: 14s;
}
.page-mwp .sup-stage { position: absolute; inset: 0; }
.page-mwp .sup-screen { position: absolute; inset: 26px; opacity: 0; }
.page-mwp .sup-s1 { animation: sup1 var(--supT) ease infinite; }
.page-mwp .sup-s2 { animation: sup2 var(--supT) ease infinite; }
.page-mwp .sup-s3 { animation: sup3 var(--supT) ease infinite; }
.page-mwp .sup-win { position: absolute; inset: 0; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.02); }
.page-mwp .sup-s1 .sup-win { border-color: rgba(248,113,113,0.4); }
.page-mwp .sup-s3 .sup-win { border-color: rgba(74,222,128,0.35); }
.page-mwp .sup-termwin { background: rgba(4,8,20,0.6); }
.page-mwp .sup-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,0.1); flex: none; }
.page-mwp .sup-dots { display: inline-flex; gap: 5px; }
.page-mwp .sup-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.page-mwp .sup-url { font-family: var(--font-mono); font-size: 0.72rem; color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.06); padding: 4px 12px; border-radius: 6px; }
.page-mwp .sup-tbar-label { font-family: var(--font-mono); font-size: 0.72rem; color: rgba(255,255,255,0.5); }
/* down / restored states */
.page-mwp .sup-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 7px; padding: 20px; }
.page-mwp .sup-badge { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; }
.page-mwp .sup-badge svg { width: 27px; height: 27px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.page-mwp .sup-badge.err { background: rgba(239,68,68,0.16); }
.page-mwp .sup-badge.err svg { stroke: #F87171; }
.page-mwp .sup-badge.ok { background: rgba(74,222,128,0.16); }
.page-mwp .sup-badge.ok svg { stroke: #4ADE80; }
.page-mwp .sup-state b { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff; }
.page-mwp .sup-state span { font-size: 0.84rem; color: rgba(255,255,255,0.6); max-width: 30ch; }
/* terminal */
.page-mwp .sup-term { flex: 1; padding: 14px 16px; font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.95; display: flex; flex-direction: column; }
.page-mwp .sup-line { color: rgba(255,255,255,0.85); white-space: nowrap; opacity: 0; }
.page-mwp .sup-line.ok { color: #4ADE80; }
.page-mwp .sup-line.muted { color: rgba(255,255,255,0.5); }
.page-mwp .sup-l1 { animation: supL1 var(--supT) ease infinite; }
.page-mwp .sup-l2 { animation: supL2 var(--supT) ease infinite; }
.page-mwp .sup-l3 { animation: supL3 var(--supT) ease infinite; }
.page-mwp .sup-l4 { animation: supL4 var(--supT) ease infinite; }
.page-mwp .sup-l5 { animation: supL5 var(--supT) ease infinite; }
.page-mwp .sup-caret { display: inline-block; width: 8px; height: 14px; background: #6E8CFF; vertical-align: -2px; animation: supCaret 1s steps(2) infinite; }
@keyframes sup1 { 0% { opacity: 0; } 3%,28% { opacity: 1; } 32%,100% { opacity: 0; } }
@keyframes sup2 { 0%,31% { opacity: 0; } 35%,70% { opacity: 1; } 74%,100% { opacity: 0; } }
@keyframes sup3 { 0%,73% { opacity: 0; } 77%,97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes supL1 { 0%,35% { opacity: 0; transform: translateY(3px); } 38%,100% { opacity: 1; transform: none; } }
@keyframes supL2 { 0%,42% { opacity: 0; transform: translateY(3px); } 45%,100% { opacity: 1; transform: none; } }
@keyframes supL3 { 0%,51% { opacity: 0; transform: translateY(3px); } 54%,100% { opacity: 1; transform: none; } }
@keyframes supL4 { 0%,60% { opacity: 0; transform: translateY(3px); } 63%,100% { opacity: 1; transform: none; } }
@keyframes supL5 { 0%,65% { opacity: 0; } 68%,100% { opacity: 1; } }
@keyframes supCaret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.page-mwp .sup-screen, .page-mwp .sup-line, .page-mwp .sup-caret { animation: none; }
	.page-mwp .sup-s1, .page-mwp .sup-s3 { opacity: 0; }
	.page-mwp .sup-s2 { opacity: 1; }
	.page-mwp .sup-line { opacity: 1; }
}

/* support terminal: live-engineer avatar (the human tech touch) */
.page-mwp .sup-eng { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 0.68rem; color: rgba(255,255,255,0.7); }
.page-mwp .sup-eng-av { position: relative; width: 20px; height: 20px; border-radius: 50%; background: #2A44C8; color: #fff; font-size: 0.6rem; font-weight: 700; display: grid; place-items: center; }
.page-mwp .sup-eng-av i { position: absolute; right: -1px; bottom: -1px; width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; border: 1.5px solid #0A0F20; animation: cpDot 1.7s ease-in-out infinite; }

/* ============================================================
   MWP migration illustration: 7-screen story
   chat -> transfer files -> export DB -> import DB -> verify -> live -> chat
   ============================================================ */
.page-mwp .mig-canvas {
	background:
		radial-gradient(58% 62% at 26% 16%, rgba(61,99,245,0.22), transparent 70%),
		radial-gradient(52% 60% at 90% 92%, rgba(110,140,255,0.15), transparent 72%),
		#050A1B;
	border-color: rgba(255,255,255,0.08);
	--migT: 21s;
}
.page-mwp .mig-stage { position: absolute; inset: 0; }
.page-mwp .mig-screen { position: absolute; inset: 26px; opacity: 0; }
.page-mwp .mig-s1 { animation: migS1 var(--migT) ease infinite; }
.page-mwp .mig-s2 { animation: migS2 var(--migT) ease infinite; }
.page-mwp .mig-s3 { animation: migS3 var(--migT) ease infinite; }
.page-mwp .mig-s4 { animation: migS4 var(--migT) ease infinite; }
.page-mwp .mig-s5 { animation: migS5 var(--migT) ease infinite; }
.page-mwp .mig-s6 { animation: migS6 var(--migT) ease infinite; }
.page-mwp .mig-s7 { animation: migS7 var(--migT) ease infinite; }
@keyframes migS1 { 0% {opacity:0} 2%,14% {opacity:1} 16%,100% {opacity:0} }
@keyframes migS2 { 0%,15% {opacity:0} 17%,28% {opacity:1} 30%,100% {opacity:0} }
@keyframes migS3 { 0%,29% {opacity:0} 31%,41% {opacity:1} 43%,100% {opacity:0} }
@keyframes migS4 { 0%,42% {opacity:0} 44%,54% {opacity:1} 56%,100% {opacity:0} }
@keyframes migS5 { 0%,55% {opacity:0} 57%,68% {opacity:1} 70%,100% {opacity:0} }
@keyframes migS6 { 0%,69% {opacity:0} 71%,81% {opacity:1} 83%,100% {opacity:0} }
@keyframes migS7 { 0%,82% {opacity:0} 84%,98% {opacity:1} 100% {opacity:0} }

/* ---- chat window (S1 + S7) ---- */
.page-mwp .mig-win { position: absolute; inset: 0; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.02); }
.page-mwp .mig-chead { display: flex; align-items: center; gap: 9px; padding: 12px 15px; border-bottom: 1px solid rgba(255,255,255,0.1); flex: none; }
.page-mwp .mig-ava { width: 24px; height: 24px; border-radius: 50%; background: #2A44C8; color: #fff; font-size: 0.68rem; font-weight: 700; display: grid; place-items: center; }
.page-mwp .mig-cname { font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: #fff; }
.page-mwp .mig-clive { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase; color: #4ADE80; }
.page-mwp .mig-clive i { width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; animation: cpDot 1.7s ease-in-out infinite; }
.page-mwp .mig-cbody { flex: 1; padding: 16px 15px; display: flex; flex-direction: column; gap: 10px; }
.page-mwp .mig-msg { max-width: 82%; padding: 9px 13px; border-radius: 13px; font-size: 0.8rem; line-height: 1.45; opacity: 0; }
.page-mwp .mig-msg.them { align-self: flex-start; background: rgba(255,255,255,0.09); color: #fff; border-bottom-left-radius: 4px; }
.page-mwp .mig-msg.us { align-self: flex-end; background: #3D63F5; color: #fff; border-bottom-right-radius: 4px; }
.page-mwp .mig-cinput { display: flex; align-items: center; gap: 10px; margin: 0 15px 15px; padding: 8px 8px 8px 14px; border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; }
.page-mwp .mig-cph { flex: 1; font-size: 0.76rem; color: rgba(255,255,255,0.4); }
.page-mwp .mig-send { background: #3D63F5; color: #fff; font-size: 0.74rem; font-weight: 600; padding: 6px 14px; border-radius: 7px; }
.page-mwp .mig-mA { animation: migMsg 21s ease infinite; animation-delay: 0s; }
.page-mwp .mig-mB { animation: migMsgB 21s ease infinite; }
.page-mwp .mig-mC { animation: migMsgC 21s ease infinite; }
.page-mwp .mig-mD { animation: migMsgD 21s ease infinite; }
@keyframes migMsg  { 0%,2% {opacity:0; transform: translateY(6px);} 5%,100% {opacity:1; transform:none;} }
@keyframes migMsgB { 0%,7% {opacity:0; transform: translateY(6px);} 10%,100% {opacity:1; transform:none;} }
@keyframes migMsgC { 0%,84% {opacity:0; transform: translateY(6px);} 88%,100% {opacity:1; transform:none;} }
@keyframes migMsgD { 0%,90% {opacity:0; transform: translateY(6px);} 94%,100% {opacity:1; transform:none;} }
/* mouse cursor moves to Send and clicks (S1) */
.page-mwp .mig-cursor { position: absolute; width: 20px; height: 20px; z-index: 6; left: 46%; top: 48%; animation: migCur var(--migT) ease-in-out infinite; }
.page-mwp .mig-cursor svg { width: 20px; height: 20px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45)); }
.page-mwp .mig-cursor::after { content: ''; position: absolute; left: -5px; top: -5px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(140,166,255,0.9); opacity: 0; animation: migClick var(--migT) ease-out infinite; }
@keyframes migCur { 0%,8% { left: 46%; top: 48%; } 12%,16% { left: calc(100% - 58px); top: calc(100% - 34px); } 100% { left: calc(100% - 58px); top: calc(100% - 34px); } }
@keyframes migClick { 0%,10% {opacity:0; transform:scale(0.3);} 12% {opacity:0.6; transform:scale(1);} 15% {opacity:0; transform:scale(1.8);} 100% {opacity:0;} }

/* ---- migration console (S2-S5) ---- */
.page-mwp .mig-step { flex: 1; display: flex; flex-direction: column; }
.page-mwp .mig-steplabel { font-family: var(--font-mono); font-size: 0.72rem; color: #8CA6FF; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.page-mwp .mig-prog { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.1); overflow: hidden; margin: 8px 0; }
.page-mwp .mig-prog i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg,#6E8CFF,#3D63F5); animation: migProg var(--migT) ease-out infinite; }
@keyframes migProg { 0%,16% {width:0;} 27%,100% {width:100%;} }
/* verify checklist (S5) */
.page-mwp .mig-checks { padding: 18px 18px; display: flex; flex-direction: column; gap: 13px; }
.page-mwp .mig-check { display: flex; align-items: center; gap: 11px; font-size: 0.84rem; color: rgba(255,255,255,0.9); opacity: 0; }
.page-mwp .mig-ckico { width: 22px; height: 22px; border-radius: 50%; background: rgba(74,222,128,0.16); color: #4ADE80; display: grid; place-items: center; flex: none; }
.page-mwp .mig-ckico svg { width: 13px; height: 13px; }
.page-mwp .mig-ck1 { animation: migCk1 var(--migT) ease infinite; }
.page-mwp .mig-ck2 { animation: migCk2 var(--migT) ease infinite; }
.page-mwp .mig-ck3 { animation: migCk3 var(--migT) ease infinite; }
@keyframes migCk1 { 0%,57% {opacity:0; transform:translateY(4px);} 60%,100% {opacity:1; transform:none;} }
@keyframes migCk2 { 0%,60% {opacity:0; transform:translateY(4px);} 63%,100% {opacity:1; transform:none;} }
@keyframes migCk3 { 0%,63% {opacity:0; transform:translateY(4px);} 66%,100% {opacity:1; transform:none;} }

@media (prefers-reduced-motion: reduce) {
	.page-mwp .mig-screen, .page-mwp .mig-msg, .page-mwp .mig-cursor, .page-mwp .mig-prog i, .page-mwp .mig-check { animation: none; }
	.page-mwp .mig-s1, .page-mwp .mig-s2, .page-mwp .mig-s3, .page-mwp .mig-s4, .page-mwp .mig-s5, .page-mwp .mig-s7 { opacity: 0; }
	.page-mwp .mig-s6 { opacity: 1; }
}

/* ===== blog post: left table of contents ===== */
.page-blogpost .post-layout { max-width: 1140px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 52px; align-items: start; }
.page-blogpost .post-main { min-width: 0; }
.page-blogpost .post-layout .post-head { max-width: none; margin: 0; padding: 40px 0 0; }
.page-blogpost .post-layout .post-body { max-width: none; margin: 0; padding: 22px 0 0; }
.page-blogpost .post-layout .post-faq,
.page-blogpost .post-layout .post-cta,
.page-blogpost .post-layout .post-back { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.page-blogpost .post-body h2, .page-blogpost .post-body h3, .page-blogpost .post-faq h2 { scroll-margin-top: 90px; }
.page-blogpost .post-toc { position: sticky; top: 96px; align-self: start; margin-top: 52px; }
.page-blogpost .post-toc-inner { border-left: 2px solid var(--border); padding-left: 18px; max-height: calc(100vh - 130px); overflow-y: auto; }
.page-blogpost .post-toc-title { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); margin: 0 0 12px; }
.page-blogpost .post-toc ul { list-style: none; margin: 0; padding: 0; }
.page-blogpost .post-toc li { margin: 0; }
.page-blogpost .post-toc a { display: block; padding: 6px 0; color: var(--slate); font-size: 0.87rem; line-height: 1.4; text-decoration: none; transition: color 0.15s ease; }
.page-blogpost .post-toc a:hover { color: #3D63F5; }
.page-blogpost .post-toc a.active { color: #3D63F5; font-weight: 600; }
@media (max-width: 1000px) {
	.page-blogpost .post-layout { grid-template-columns: 1fr; gap: 0; max-width: 760px; }
	.page-blogpost .post-toc { display: none; }
}



/* ===== Case study detail (.page-case) ===== */
.page-case .cs-cover-sec { padding-top: 56px; }
.page-case .cs-cover { position: relative; width: 100%; max-width: 720px; margin: 0 auto; height: 0; padding-bottom: min(56.25%, 405px); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 56px rgba(20,24,44,0.16); }
.page-case .cs-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.page-case .cs-layout { display: grid; grid-template-columns: 260px 1fr; gap: 54px; align-items: start; }
.page-case .cs-facts { position: sticky; top: 96px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 26px; }
.page-case .cs-facts h2 { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); margin: 0 0 18px; }
.page-case .cs-facts dl { margin: 0; display: grid; gap: 16px; }
.page-case .cs-facts dt { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); margin-bottom: 3px; }
.page-case .cs-facts dd { margin: 0; color: var(--ink); font-size: 0.95rem; font-weight: 500; line-height: 1.4; }
.page-case .cs-facts .cs-facts-metric { color: #3D63F5; font-family: var(--font-mono); font-weight: 600; }
.page-case .cs-body h2 { font-size: clamp(1.5rem, 2.4vw, 1.85rem); letter-spacing: -0.01em; margin: 42px 0 14px; color: var(--ink); }
.page-case .cs-body h2:first-child { margin-top: 0; }
.page-case .cs-body p { color: var(--slate-dark); line-height: 1.75; margin-bottom: 16px; }
.page-case .cs-body a { color: var(--accent); }
.page-case .cs-quote { margin: 30px 0; padding: 22px 28px; background: #F7F8FB; border-left: 3px solid #3D63F5; border-radius: 0 14px 14px 0; }
.page-case .cs-quote blockquote { margin: 0 0 10px; font-size: 1.12rem; line-height: 1.6; color: var(--ink); font-weight: 500; }
.page-case .cs-quote .cs-attrib { color: var(--slate); font-size: 0.9rem; }
.page-case .cs-back { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.66); font-size: 0.9rem; margin-bottom: 16px; }
.page-case .cs-back:hover { color: #fff; }
@media (max-width: 860px) { .page-case .cs-layout { grid-template-columns: 1fr; gap: 30px; } .page-case .cs-facts { position: static; } }

.case-study-media.has-img { position: relative; padding: 0; display: block; height: 0; padding-bottom: 56.25%; overflow: hidden; }
.case-study-media.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   MOBILE RESPONSIVE LAYER
   ------------------------------------------------------------
   Appended last, but source order alone is not enough here: every
   page carries its own inline <style> block (".page-home .main-nav
   { position: static }" and friends) that lands AFTER this file in
   the cascade at equal specificity. Those page blocks were written
   for the desktop mega-nav and silently overrode the mobile rules
   further up this stylesheet - the drawer stopped being positioned
   and every dropdown rendered expanded on top of the next.

   So the declarations that have to beat a page's inline block are
   marked !important. They are all confined to max-width media
   queries, so desktop rendering is untouched.
   ============================================================ */

/* ---- 1. mobile nav: drawer + accordion ---- */

@media (max-width: 1024px) {

	/* The drawer itself: a panel pinned under the header island. */
	.main-nav.is-open {
		position: absolute !important;
		top: calc(100% + 10px) !important;
		left: 12px !important;
		right: 12px !important;
		width: auto !important;
		max-height: calc(100vh - 130px);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 2px !important;
		padding: 8px !important;
		z-index: 200;
	}

	.main-nav.is-open .nav-item { position: static !important; width: 100%; }

	/* Top-level row. The chevron stays - on a phone it is the affordance
	   that says "this opens", so the desktop rule hiding it is reverted. */
	.main-nav.is-open .nav-link {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 13px 12px !important;
		border-radius: 10px;
		font-size: 0.98rem;
	}
	.main-nav.is-open .nav-link .chevron {
		display: block !important;
		width: 11px;
		height: 7px;
		flex-shrink: 0;
		transition: transform 0.2s ease;
	}
	.main-nav.is-open .nav-item.is-expanded > .nav-link .chevron { transform: rotate(180deg); }

	/* Collapsed by default. Hover/focus-within must not reveal these on a
	   touch device - only the .is-expanded class set by app.js does. */
	.main-nav.is-open .dropdown,
	.main-nav.is-open .dropdown.mega,
	.main-nav.is-open .dropdown.mega.mega-nav,
	.main-nav.is-open .dropdown.mega-row {
		display: none !important;
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		padding: 0 0 8px 10px !important;
		margin: 0 !important;
	}
	.main-nav.is-open .nav-item.is-expanded > .dropdown { display: block !important; }
	.main-nav.is-open .dropdown::before,
	.main-nav.is-open .dropdown.mega::before { content: none !important; }

	/* The mega panel is a 3-column desktop layout; stack it. */
	.main-nav.is-open .mega-panel,
	.main-nav.is-open .mega-group,
	.main-nav.is-open .mega-side {
		display: block !important;
		grid-template-columns: 1fr !important;
		max-width: none !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		column-gap: 0 !important;
	}

	.main-nav.is-open .mega-head,
	.main-nav.is-open .mega-title {
		font-family: var(--font-mono);
		font-size: 0.64rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--slate);
		margin: 10px 0 2px 12px !important;
	}

	/* Rows become plain full-width links; the descriptions and the big
	   icon tiles are noise at this width. */
	.main-nav.is-open .mrow,
	.main-nav.is-open .mside-link,
	.main-nav.is-open .mega-link,
	.main-nav.is-open .dropdown-link {
		display: block !important;
		width: 100%;
		margin: 0 !important;
		padding: 11px 12px !important;
		border-radius: 9px;
		font-size: 0.92rem;
	}
	.main-nav.is-open .mrow-ico { display: none !important; }
	.main-nav.is-open .mrow-txt span,
	.main-nav.is-open .mega-link span,
	.main-nav.is-open .dropdown-link span { display: none !important; }
	.main-nav.is-open .mrow-txt strong,
	.main-nav.is-open .dropdown-link strong { font-weight: 500; }
	.main-nav.is-open .mega-promo { display: none !important; }

	/* Contrast. The drawer paints itself white (.main-nav.is-open further up),
	   but the links inside it inherit the white they need against the dark
	   header - so every item was white-on-white. Same story for the burger:
	   ink bars were specified for a white header row that this layout never
	   shows on a phone. */
	.main-nav.is-open .nav-link,
	.main-nav.is-open .mrow-txt strong,
	.main-nav.is-open .dropdown-link strong { color: var(--ink) !important; }

	.main-nav.is-open .mside-link,
	.main-nav.is-open .mega-link,
	.main-nav.is-open .dropdown-link { color: var(--slate-dark) !important; }

	.main-nav.is-open .mside-cta { color: var(--accent) !important; font-weight: 600; }
	.main-nav.is-open .nav-link .chevron { color: var(--slate) !important; }

	.main-nav.is-open .nav-link:hover,
	.main-nav.is-open .nav-item.is-expanded > .nav-link { background: var(--paper) !important; }
	.main-nav.is-open .mrow:hover,
	.main-nav.is-open .mside-link:hover,
	.main-nav.is-open .dropdown-link:hover { background: var(--paper) !important; }

	/* Hamburger: a real 44px target, and it morphs into a close (X). */
	.nav-toggle span { background: var(--white) !important; }

	.nav-toggle {
		width: 44px;
		height: 44px;
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0;
	}
	.nav-toggle span { transform-origin: center; }
	/* The bars sit 12px apart centre-to-centre (2px tall + 5px margins),
	   so that is exactly how far each has to travel to cross in the middle. */
	.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(12px) rotate(45deg); }
	.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }

	/* Stop the page scrolling behind the open drawer. */
	body.nav-locked { overflow: hidden; }
}

/* ---- 2. grids that were pinned by an inline style attribute ----
   Several pages hardcode style="grid-template-columns: repeat(3|4, 1fr)"
   on the element. An inline attribute outranks any stylesheet rule, so
   the existing mobile breakpoints for these grids never applied. */

@media (max-width: 1024px) {
	.commit-grid,
	.flow,
	.case-studies-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 640px) {
	.commit-grid,
	.flow,
	.case-studies-grid { grid-template-columns: 1fr !important; justify-content: stretch !important; }
}

/* ---- 3. wide content tables ----
   app.js wraps every oversized table in .table-scroll. The table keeps a
   sensible minimum so columns stay readable and the wrapper scrolls. */

/* The wrapper is inert on desktop - it must not clip a wide table that
   previously spilled into the page margin, which is how these comparison
   tables have always rendered on a large screen. It only becomes a
   scroller once the viewport is actually too narrow. */
.table-scroll { max-width: 100%; }

@media (max-width: 1024px) {
	.table-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 22px 0;
	}
	.table-scroll > table { margin: 0 !important; }
}

@media (max-width: 820px) {
	.table-scroll > table { min-width: 540px; }
	/* Fallback for the no-JS case: the table itself becomes the scroller. */
	.post-body > table,
	.cs-body > table { display: block; overflow-x: auto; max-width: 100%; }
}

/* ---- 4. home page illustrations ----
   The race / support panels size themselves from fixed-width cards
   (360-460px) inside them. As a grid item with the default
   min-width:auto they refuse to shrink and push the page sideways. */

@media (max-width: 720px) {
	.feature-visual,
	.feature-copy { min-width: 0; }

	.page-home .feature-visual.speed-illus,
	.page-home .feature-visual.support-illus {
		width: auto;
		max-width: 100%;
		min-width: 0;
		overflow: hidden;
	}
	.page-home .feature-visual.speed-illus { padding: 26px 16px; min-height: 300px; }
	.page-home .feature-visual.support-illus { min-height: 360px; }
	.page-home .support-illus .sc-slide { padding: 16px; }

	.page-home .race-card { max-width: 100%; }
	.page-home .support-illus .mc-card,
	.page-home .support-illus .stat-card,
	.page-home .support-illus .chat-card,
	.page-home .support-illus .sw-card {
		width: 100%;
		max-width: 100%;
	}
	.page-home .support-illus .sw-wrap,
	.page-home .support-illus .sw-wrap svg { width: 112px; height: 112px; }

	/* Keep the channel tiles on one line each rather than wrapping the
	   label away from its caption. !important because the page's own
	   inline block declares these at the same specificity but later. */
	.page-home .support-illus .mc-tile { padding: 11px 12px !important; gap: 9px !important; }
	.page-home .support-illus .mc-ico { width: 28px !important; height: 28px !important; }
	.page-home .support-illus .mc-tile b { font-size: 0.75rem !important; }
	.page-home .support-illus .mc-tile .rep { font-size: 0.55rem !important; white-space: nowrap; }
}

/* Below ~360px there is no room for both the channel name and its
   caption; the name is the part that carries the meaning. */
@media (max-width: 360px) {
	.page-home .support-illus .mc-tile .rep { display: none !important; }
}

/* The home page re-declares .infra-specs at higher specificity than the
   shared breakpoints, so it needs its own. */
@media (max-width: 900px) {
	.page-home .infra-specs { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
	.page-home .infra-specs { grid-template-columns: 1fr !important; }
	.page-home .trio-grid { grid-template-columns: 1fr !important; }
}

/* ---- 5. touch targets ----
   Footer and utility links sat at 17-22px tall. 44px is the accessible
   minimum; padding gets them there without moving anything on desktop. */

@media (max-width: 900px) {
	.footer-col a,
	.footer-links a,
	.legal-links a {
		display: inline-block;
		padding-top: 7px;
		padding-bottom: 7px;
		min-height: 24px;
	}
}

/* ---- 5b. header CTA moves into the drawer ----
   Contact Sales crowded the phone header next to the wordmark and the
   burger. It comes out of the bar and reappears as a full-width button at
   the foot of the open menu, where it has room to look deliberate. Without
   that move the CTA would be buried inside a collapsed accordion section,
   which is two taps and a guess away. */

@media (max-width: 1024px) {
	.header-actions .btn-primary { display: none; }
}

.nav-cta { display: none; }

@media (max-width: 1024px) {
	.main-nav.is-open .nav-cta {
		display: block;
		margin: 10px 2px 2px;
		padding: 13px 12px;
		border-radius: 10px;
		background: var(--brand-gradient);
		color: var(--white) !important;
		text-align: center;
		font-weight: 600;
		font-size: 0.95rem;
		min-height: 44px;
	}
	.main-nav.is-open .nav-cta:hover { background: var(--brand-gradient); }
}

/* ---- 6. last-resort overflow guard ----
   Media and embeds are the usual culprits for a stray horizontal
   scrollbar; nothing here changes layout, it only caps runaways. */

@media (max-width: 1024px) {
	html, body { overflow-x: hidden; }
	img, svg, video, iframe, canvas { max-width: 100%; }
	img, video { height: auto; }
	pre { overflow-x: auto; }

	/* Bare URLs pasted into article copy are a single unbreakable token
	   and will push a phone-width column open on their own. */
	.post-body p,
	.post-body li,
	.post-body h1, .post-body h2, .post-body h3,
	.cs-body p,
	.cs-body li { overflow-wrap: anywhere; }
}