/* ===========================================================================
   CompleteStatus — public website layer (site.css)
   ---------------------------------------------------------------------------
   Loaded after brand.css by the public layouts only: marketing, blog (also
   docs, compare, changelog, legal), tools and error pages. brand.css owns the
   tokens (--brand-*, --bg-*, --text-*, --border-*, --status-*, --radius-*,
   --shadow-*); this file only composes them.

   Rhythm (brief): ~70% white/light surfaces, ~20% navy sections, ~10% blue and
   green accents. Dark hero → white → pale gray → white → dark → white → light
   pricing → dark final CTA. Sections breathe: 80–120px vertical padding.

   Prefix: cs- (design system v2). Older wt- and landing- classes still in the
   markup are restyled at the bottom so every page matches while it migrates.
   ========================================================================= */

/* ---- Base ------------------------------------------------------------- */
/* Phones: a real 16px side gutter (Bootstrap's container gives ~10px). */
@media (max-width: 767.98px) {
	.wt-mkt .container,
	.wt-mkt .container-fluid { padding-inline: 16px; }
}
.wt-mkt {
	color: var(--text-primary);
	background: var(--bg-white);
	--cs-nav-h: 72px;
	--cs-gutter: clamp(16px, 4vw, 32px);
}
.wt-mkt h1, .wt-mkt h2, .wt-mkt h3 { text-wrap: balance; }
.wt-mkt p { text-wrap: pretty; }

/* Inline code on the site: Metronic's code:not([class*=language-]) adds a
   0 .5rem margin, a drop shadow and 1rem type to every <code>. Reset it to
   the brief's pale blue-gray chip; pre/code blocks style themselves. */
.wt-mkt :not(pre) > code:not([class*=language-]) {
	margin: 0;
	padding: .1em .4em;
	font-size: .875em;
	font-weight: 500;
	color: #1E2B42;
	background-color: var(--bg-subtle);
	border: 1px solid #E4EAF1;
	border-radius: 5px;
	box-shadow: none;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* ---- Type scale (brief) ------------------------------------------------- */
.cs-display {        /* marketing hero: 56–68px desktop */
	font-size: clamp(38px, 5.2vw, 64px);
	line-height: 1.04;
	font-weight: 800;
	letter-spacing: -.035em;
	margin: 0;
}
.cs-h1 {             /* product / feature page H1: 40–48px */
	font-size: clamp(32px, 4vw, 46px);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -.03em;
	margin: 0;
}
.cs-h2 {             /* section heading: 36–44px */
	font-size: clamp(28px, 3.3vw, 42px);
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: -.025em;
	margin: 0;
}
.cs-h3 {             /* card / sub-section title: 18–20px */
	font-size: 19px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -.01em;
	margin: 0;
}
.cs-lead {           /* supporting paragraph under a heading */
	font-size: clamp(17px, 1.35vw, 19px);
	line-height: 1.6;
	color: var(--text-secondary);
	margin: 0;
}
.cs-body { font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.cs-small { font-size: 14px; line-height: 1.5; color: var(--text-muted-aa); }
.cs-measure { max-width: 64ch; }
.cs-measure-sm { max-width: 52ch; }
.cs-center { text-align: center; margin-inline: auto; }
.cs-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cs-num { font-variant-numeric: tabular-nums; }

/* Eyebrow: a small label above a heading. Blue on light, bright blue on dark.
   --dot adds a small green "operational" dot (the one place green decorates). */
.cs-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--link);
	margin: 0;
}
.cs-eyebrow--dot::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--status-success);
	box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
	flex: 0 0 auto;
}
.cs-dark .cs-eyebrow { color: var(--brand-blue-bright); }
.cs-accent { color: var(--link); }                 /* a highlighted word in a light heading */
.cs-dark .cs-accent { color: var(--brand-blue-bright); }

/* ---- Sections ----------------------------------------------------------- */
.cs-section { padding-block: clamp(64px, 8vw, 112px); position: relative; }
.cs-section--tight { padding-block: clamp(48px, 5.5vw, 72px); }
.cs-section--white { background: var(--bg-white); }
.cs-section--page { background: var(--bg-page); }       /* very light gray */
.cs-section--subtle { background: var(--bg-subtle); }   /* very light blue-gray */
.cs-section--bordered { border-top: 1px solid var(--border-default); }
.cs-section-head { display: grid; gap: 16px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.cs-section-head.cs-center { justify-items: center; text-align: center; }
.cs-section-head .cs-lead { max-width: 62ch; }

/* Navy surfaces: hero, security band, final CTA, footer */
.cs-dark {
	background: var(--brand-navy);
	color: var(--text-on-dark);
	--text-secondary: var(--text-on-dark-muted);
	--text-muted-aa: var(--text-on-dark-muted);
}
.cs-dark h1, .cs-dark h2, .cs-dark h3, .cs-dark h4 { color: var(--text-on-dark); }
.cs-dark .cs-lead, .cs-dark .cs-body { color: var(--text-on-dark-muted); }
.cs-dark a:not(.btn) { color: var(--link-on-dark); }
.cs-dark--gradient { background: linear-gradient(180deg, var(--brand-navy) 0%, var(--bg-dark) 100%); }

/* Hero: navy, a very subtle blue glow behind the product shot only. Under the
   transparent dark header (.cs-nav--dark overlays the first section). */
.cs-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--brand-navy) 0%, #0A1426 70%, var(--bg-dark) 100%);
	color: var(--text-on-dark);
	padding-top: calc(var(--cs-nav-h) + clamp(48px, 7vw, 96px));
	padding-bottom: clamp(56px, 8vw, 104px);
}
.cs-hero--compact {
	padding-top: calc(var(--cs-nav-h) + clamp(40px, 5vw, 64px));
	padding-bottom: clamp(44px, 5.5vw, 72px);
}
.cs-hero > .container { position: relative; z-index: 1; }
/* A hero is always a navy surface: same text tokens as .cs-dark. */
.cs-hero {
	--text-secondary: var(--text-on-dark-muted);
	--text-muted-aa: var(--text-on-dark-muted);
	--bs-text-muted: var(--text-on-dark-muted);
	--bs-text-gray-500: var(--text-on-dark-muted);
	--bs-text-gray-600: var(--text-on-dark-muted);
	--bs-text-primary: var(--link-on-dark);
	--bs-heading-color: var(--text-on-dark);
}
.cs-hero h1, .cs-hero h2, .cs-hero h3 { color: var(--text-on-dark); }
.cs-hero .cs-lead, .cs-hero .cs-body { color: var(--text-on-dark-muted); }
.cs-hero .cs-eyebrow, .cs-hero .cs-accent { color: var(--brand-blue-bright); }
.cs-hero a:not(.btn) { color: var(--link-on-dark); }
/* engineering grid, faded at the edges — texture, not decoration */
.cs-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(170, 180, 194, .055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(170, 180, 194, .055) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(90% 80% at 50% 0%, #000 30%, transparent 75%);
	        mask-image: radial-gradient(90% 80% at 50% 0%, #000 30%, transparent 75%);
	pointer-events: none;
}
.cs-glow { position: relative; isolation: isolate; }
.cs-glow::before {
	content: "";
	position: absolute;
	inset: -12% -8%;
	z-index: -1;
	background: radial-gradient(closest-side, rgba(7, 135, 227, .22), rgba(7, 135, 227, 0));
	filter: blur(8px);
	pointer-events: none;
}
.cs-trust {             /* "Free plan · no credit card" reassurance row */
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	font-size: 14px;
	color: var(--text-on-dark-muted);
	list-style: none;
	padding: 0;
	margin: 0;
}
.cs-trust li { display: inline-flex; align-items: center; gap: 8px; }
.cs-trust li::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; background: var(--cs-check-green) center / 14px no-repeat; }

/* ---- Buttons on the site ------------------------------------------------ */
.wt-mkt .btn { font-weight: 600; }
.wt-mkt .btn.btn-lg,
.btn.cs-btn-lg { padding: 13px 22px !important; font-size: 16px; border-radius: var(--radius-btn); }   /* !important: Metronic pads .btn at (0,9,0) */
.cs-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* Outlined buttons draw their 1px edge as an INSET box-shadow, not a border:
   Metronic zeroes .btn borders with a (0,9,0) selector and pads by +1px to
   compensate, so a real border never shows (or shifts the size). The inset
   edge keeps every size (sm/lg) identical to a solid button. It needs
   !important: Metronic also resets .btn box-shadow at (0,6,0). The
   :focus-visible rules re-add the blue focus ring on top of the edge. */
/* Secondary action on navy: transparent, white edge, light text */
.btn.btn-outline-white,
.btn.cs-btn-ghost {
	--bs-btn-color: var(--text-on-dark);
	--bs-btn-bg: transparent;
	color: var(--text-on-dark);
	background: transparent;
	border-color: transparent;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38) !important;
}
.btn.btn-outline-white:focus-visible,
.btn.cs-btn-ghost:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 3px rgba(25, 165, 248, .3) !important; }
.btn.btn-outline-white:hover:not(.btn-active),
.btn.cs-btn-ghost:hover:not(.btn-active) {
	color: var(--text-on-dark) !important;
	background: rgba(255, 255, 255, .08) !important;
	border-color: transparent !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7) !important;
}
/* Secondary action on light: white with a strong edge */
.btn.cs-btn-secondary {
	color: var(--text-primary);
	background: var(--bg-white);
	border-color: transparent;
	box-shadow: inset 0 0 0 1px var(--border-strong) !important;
}
.btn.cs-btn-secondary:focus-visible { box-shadow: inset 0 0 0 1px var(--focus-outline), var(--focus-ring) !important; }
.btn.cs-btn-secondary:hover:not(.btn-active) {
	color: var(--text-primary) !important;
	background: var(--bg-page) !important;
	border-color: transparent !important;
	box-shadow: inset 0 0 0 1px #B5C1D0 !important;
}
.cs-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--link);
	text-decoration: none;
}
.cs-link-arrow::after {
	/* SVG arrow, not "→": the self-hosted Inter subset has no U+2192 */
	content: "";
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	background: currentColor;
	-webkit-mask: var(--cs-arrow) center / 14px no-repeat;
	        mask: var(--cs-arrow) center / 14px no-repeat;
	transition: transform var(--dur) var(--ease);
}
.cs-link-arrow:hover { color: var(--link-hover); }
.cs-link-arrow:hover::after { transform: translateX(3px); }

/* ---- Cards ----------------------------------------------------------- */
.cs-card {
	background: var(--bg-white);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: clamp(22px, 2.4vw, 30px);
	color: var(--text-primary);
}
.cs-card--lg { border-radius: var(--radius-card-lg); }
.cs-card--flat { box-shadow: none; }
.cs-card--link,
.cs-card--hover { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.cs-card--link { display: block; text-decoration: none; }
.cs-card--link:hover,
.cs-card--link:focus-visible,
.cs-card--hover:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-raised);
	border-color: var(--border-strong);
	color: var(--text-primary);
}
.cs-card--featured {        /* the one card that matters most (flagship tool, Business plan) */
	border: 2px solid var(--action-primary);
	box-shadow: 0 0 0 4px rgba(7, 135, 227, .08), var(--shadow-card);
}
.cs-card-title { font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--text-primary); margin: 0; }
.cs-card-text { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 0; }
.cs-dark .cs-card {
	background: var(--bg-dark-elevated);
	border-color: rgba(255, 255, 255, .08);
	box-shadow: none;
	color: var(--text-on-dark);
}
.cs-grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.cs-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.cs-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.cs-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* Icon tile: navy/blue icons only — no rainbow per item. */
.cs-icon {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--action-light);
	color: var(--brand-blue);
	flex: 0 0 auto;
}
.cs-icon i { font-size: 22px; color: inherit; }
.cs-icon i [class^="path"]::before,
.cs-icon i [class*=" path"]::before { color: currentColor; }
.cs-icon--navy { background: var(--brand-navy); color: #FFFFFF; }
.cs-dark .cs-icon { background: rgba(25, 165, 248, .12); color: var(--brand-blue-bright); }

/* ---- Check lists: green check + text (included / passing) ---------------- */
:root {
	--cs-check-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%2322C55E' fill-opacity='.16'/%3E%3Cpath d='M4.6 8.3l2.2 2.2 4.6-4.9' fill='none' stroke='%2315803D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--cs-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--cs-dash-gray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8h7' stroke='%23788598' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.cs-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cs-checks li {
	position: relative;
	padding-left: 28px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--text-primary);
}
.cs-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	width: 18px;
	height: 18px;
	background: var(--cs-check-green) center / 18px no-repeat;
}
.cs-checks li.is-no::before { background-image: var(--cs-dash-gray); }
.cs-checks li.is-no { color: var(--text-muted-aa); }
.cs-dark .cs-checks li { color: var(--text-on-dark); }
/* On navy the check needs a brighter stroke to read */
.cs-dark,
.cs-hero {
	--cs-check-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%2322C55E' fill-opacity='.2'/%3E%3Cpath d='M4.6 8.3l2.2 2.2 4.6-4.9' fill='none' stroke='%234ADE80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- Product screenshots ------------------------------------------------ */
/* 12px radius, 1px border, very subtle shadow, optional chrome, no 3D tilt. */
.cs-shot {
	position: relative;
	border-radius: var(--radius-card);
	border: 1px solid var(--border-default);
	background: var(--bg-white);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 32px rgba(15, 23, 42, .08);
	overflow: hidden;
	margin: 0;
}
.cs-shot img { display: block; width: 100%; height: auto; }
.cs-shot__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 38px;
	padding: 0 14px;
	background: #F3F6FA;
	border-bottom: 1px solid var(--border-default);
}
.cs-shot__dots { display: inline-flex; gap: 6px; }
.cs-shot__dots i { width: 10px; height: 10px; border-radius: 50%; background: #CCD5E0; }
.cs-shot__url {
	flex: 1;
	max-width: 360px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 10px;
	border-radius: 6px;
	background: var(--bg-white);
	border: 1px solid var(--border-default);
	font-size: 12px;
	color: var(--text-muted-aa);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cs-dark .cs-shot,
.cs-hero .cs-shot {
	border-color: rgba(255, 255, 255, .12);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
}
.cs-dark .cs-shot__bar,
.cs-hero .cs-shot__bar { background: #111926; border-bottom-color: rgba(255, 255, 255, .08); }
.cs-dark .cs-shot__dots i,
.cs-hero .cs-shot__dots i { background: #2E3A4D; }
.cs-dark .cs-shot__url,
.cs-hero .cs-shot__url { background: #0B1220; border-color: rgba(255, 255, 255, .08); color: var(--text-on-dark-muted); }
.cs-shot-caption { margin-top: 14px; font-size: 14px; color: var(--text-muted-aa); text-align: center; }

/* ---- Tags, filters, pills ------------------------------------------------ */
.cs-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 6px;
	background: #EEF2F6;
	color: var(--text-primary);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
a.cs-tag:hover,
.cs-tag.is-active,
.cs-tag[aria-current] { background: var(--action-light); color: var(--link); }
.cs-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--border-default);
	background: var(--bg-white);
	color: var(--text-primary);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cs-filter:hover { border-color: var(--border-strong); color: var(--text-primary); }
.cs-filter.is-active,
.cs-filter[aria-current],
.cs-filter[aria-pressed="true"] { background: var(--action-fill); border-color: var(--action-fill); color: #FFFFFF; }
.cs-filter .cs-count { color: inherit; opacity: .7; font-variant-numeric: tabular-nums; }
.cs-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	background: var(--action-light);
	color: var(--link);
	white-space: nowrap;
}
.cs-badge--solid { background: var(--action-fill); color: #FFFFFF; }
.cs-badge--neutral { background: #EEF2F6; color: #24324A; }
.cs-dark .cs-badge { background: rgba(25, 165, 248, .14); color: var(--brand-blue-bright); }

/* Status dot + label (never colour alone) */
.cs-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.cs-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--status-success); flex: 0 0 auto; }
.cs-status--up { color: var(--status-success-text); }
.cs-status--warn { color: var(--status-warning-text); }
.cs-status--warn::before { background: var(--status-warning); }
.cs-status--down { color: var(--status-danger-text); }
.cs-status--down::before { background: var(--status-danger); }
.cs-dark .cs-status--up { color: #4ADE80; }

/* ---- Dark code / config panel ------------------------------------------ */
.cs-code {
	background: var(--bg-dark);
	border: 1px solid #1E2631;
	border-radius: var(--radius-card);
	color: #D5DCE5;
	overflow: hidden;
	font-size: 13px;
}
.cs-code__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 8px 0 14px;
	min-height: 42px;
	border-bottom: 1px solid #1E2631;
	background: #111720;
}
.cs-code__tabs { display: flex; gap: 2px; overflow-x: auto; }
.cs-code__tab {
	padding: 10px 12px;
	font-size: 13px;
	font-weight: 500;
	color: #8A96A8;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	white-space: nowrap;
}
.cs-code__tab:hover { color: #D5DCE5; }
.cs-code__tab.is-active,
.cs-code__tab[aria-selected="true"] { color: #FFFFFF; border-bottom-color: var(--brand-blue-bright); }
.cs-code pre {
	margin: 0;
	padding: 16px 18px;
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 1.65;
	color: #D5DCE5;
	background: transparent;
	white-space: pre;
	overflow-x: auto;
}
.cs-code code { background: none; color: inherit; padding: 0; font-weight: 400; }
.cs-code .tok-k { color: #7CC4FA; }   /* directive */
.cs-code .tok-s { color: #A5E3B5; }   /* string */
.cs-code .tok-c { color: #6E7A8C; }   /* comment */
.cs-copy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 6px;
	border: 1px solid #2E3744;
	background: transparent;
	color: #AAB4C2;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.cs-copy:hover { color: #FFFFFF; border-color: #44526A; }

/* ---- Finding row (security UI preview) ---------------------------------- */
.cs-finding {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 12px;
	align-items: start;
	padding: 14px 16px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card-sm);
	background: var(--bg-white);
}
.cs-sev {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 5px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	white-space: nowrap;
}
.cs-sev--high { background: var(--status-danger-soft); color: var(--status-danger-text); }
.cs-sev--med { background: var(--status-warning-soft); color: var(--status-warning-text); }
.cs-sev--low { background: var(--status-info-soft); color: var(--status-info-text); }
.cs-sev--pass { background: var(--status-success-soft); color: var(--status-success-text); }

/* Grade chip (A+ … F) — grade-specific semantic colour, text inside */
.cs-grade {
	display: inline-grid;
	place-items: center;
	min-width: 48px;
	height: 48px;
	padding: 0 8px;
	border-radius: 10px;
	font-size: 22px;
	font-weight: 800;
	color: #FFFFFF;
	background: var(--status-neutral);
}
/* One grade scale everywhere (tokens in brand.css, shared with the app's badge) */
.cs-grade--a { background: var(--grade-a); }
.cs-grade--b { background: var(--grade-b); }
.cs-grade--c { background: var(--grade-c); color: var(--text-primary); }
.cs-grade--d { background: var(--grade-d); }
.cs-grade--f { background: var(--grade-f); }

/* ---- Comparison (honest: CompleteStatus blue, competitor neutral) ------- */
.cs-compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.cs-compare th,
.cs-compare td { padding: 14px 16px; border-bottom: 1px solid var(--row-separator); vertical-align: top; text-align: left; }
.cs-compare thead th { font-size: 13px; font-weight: 600; color: var(--text-muted-aa); text-transform: uppercase; letter-spacing: .05em; border-bottom-color: var(--border-default); }
.cs-compare .is-us { background: rgba(234, 245, 253, .55); }
.cs-compare thead .is-us { color: var(--link); background: var(--action-light); border-top: 2px solid var(--action-primary); }
.cs-yes,
.cs-no { display: inline-flex; align-items: flex-start; gap: 8px; }
.cs-yes::before,
.cs-no::before { content: ""; width: 16px; height: 16px; margin-top: .2em; flex: 0 0 auto; background: var(--cs-check-green) center / 16px no-repeat; }
.cs-no { color: var(--text-muted-aa); }
.cs-no::before { background-image: var(--cs-dash-gray); }
.cs-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- Stats / trust strip --------------------------------------------- */
.cs-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 48px; }
.cs-stat { display: flex; align-items: baseline; gap: 10px; }
.cs-stat b { font-size: 26px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cs-stat span { font-size: 15px; color: var(--text-secondary); }
.cs-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; color: var(--text-secondary); font-size: 17px; font-weight: 600; }
.cs-kicker { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted-aa); text-align: center; }

/* ---- Final CTA (navy) ------------------------------------------------ */
.cs-cta {
	background:
		radial-gradient(60% 120% at 50% 0%, rgba(7, 135, 227, .16), rgba(7, 135, 227, 0) 70%),
		var(--brand-navy);
	color: var(--text-on-dark);
	text-align: center;
}

/* ---- Breadcrumbs ------------------------------------------------------ */
.cs-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; color: var(--text-muted-aa); margin: 0 0 20px; padding: 0; list-style: none; }
.cs-crumbs a { color: var(--text-secondary); text-decoration: none; }
.cs-crumbs a:hover { color: var(--link); text-decoration: underline; }
.cs-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--border-strong); }
.cs-dark .cs-crumbs a { color: var(--text-on-dark-muted); }

/* ---- Long-form prose (blog, docs, legal, changelog) --------------------- */
/* 720–800px measure, 16–18px body, 1.65 line height, navy code blocks,
   pale inline code, brand-blue underlined links, bordered tables. */
.cs-prose {
	max-width: 760px;
	font-size: 17px;
	line-height: 1.7;
	color: #24324A;
}
.cs-prose > * + * { margin-top: 1.1em; }
.cs-prose h2 { font-size: 26px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; color: var(--text-primary); margin-top: 2em; margin-bottom: .2em; scroll-margin-top: calc(var(--cs-nav-h) + 16px); }
.cs-prose h3 { font-size: 20px; line-height: 1.35; font-weight: 600; color: var(--text-primary); margin-top: 1.7em; margin-bottom: .1em; scroll-margin-top: calc(var(--cs-nav-h) + 16px); }
.cs-prose h4 { font-size: 17px; font-weight: 600; color: var(--text-primary); margin-top: 1.4em; }
.cs-prose p, .cs-prose li { text-wrap: pretty; }
.cs-prose ul, .cs-prose ol { padding-left: 1.3em; }
.cs-prose li + li { margin-top: .4em; }
.cs-prose li::marker { color: var(--text-muted); }
.cs-prose a { color: var(--link); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.cs-prose a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
.cs-prose strong { color: var(--text-primary); font-weight: 600; }
.cs-prose :not(pre) > code {
	font-family: var(--font-mono);
	font-size: .86em;
	font-weight: 500;
	padding: .12em .4em;
	border-radius: 5px;
	background: var(--bg-subtle);
	border: 1px solid #E4EAF1;
	color: #1E2B42;
	word-break: break-word;
}
.cs-prose pre {
	background: var(--bg-dark);
	color: #D5DCE5;
	border-radius: var(--radius-card-sm);
	border: 1px solid #1E2631;
	padding: 16px 18px;
	font-family: var(--font-mono);
	font-size: 14px;
	line-height: 1.65;
	overflow-x: auto;
	white-space: pre;
}
.cs-prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; font-weight: 400; }
.cs-prose blockquote { margin-inline: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--border-strong); color: var(--text-secondary); }
.cs-prose hr { border: 0; border-top: 1px solid var(--border-default); margin-block: 2.2em; opacity: 1; }
.cs-prose img { max-width: 100%; height: auto; border-radius: var(--radius-card-sm); border: 1px solid var(--border-default); }
.cs-prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; display: block; overflow-x: auto; }
.cs-prose th,
.cs-prose td { border: 1px solid var(--border-default); padding: 10px 12px; text-align: left; vertical-align: top; }
.cs-prose th { background: var(--bg-page); color: var(--text-primary); font-weight: 600; }

/* Callouts inside prose / docs: warning amber, error red, success green, note blue */
.cs-callout { border: 1px solid var(--border-default); border-left-width: 4px; border-radius: var(--radius-card-sm); padding: 14px 16px; background: var(--bg-page); font-size: 15px; line-height: 1.6; }
.cs-callout--note { border-left-color: var(--action-primary); background: #F4FAFE; }
.cs-callout--warn { border-left-color: var(--status-warning); background: var(--status-warning-soft); }
.cs-callout--danger { border-left-color: var(--status-danger); background: var(--status-danger-soft); }
.cs-callout--ok { border-left-color: var(--status-success); background: var(--status-success-soft); }

/* ---- Header -------------------------------------------------------------- */
/* Lightweight, never oversized. Two tones:
     .cs-nav--light  white/translucent, light border, light logo, navy links
     .cs-nav--dark   transparent over the navy hero, dark logo, light links
   Both pick up a subtle blur + thin border once the page scrolls (.is-scrolled,
   set by wt-public.js). The dark tone overlays the first section, which pads
   itself by --cs-nav-h (.cs-hero does). */
.cs-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--cs-nav-h);
	display: flex;
	align-items: center;
	border-bottom: 1px solid transparent;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cs-nav > .container { width: 100%; }
.cs-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cs-nav__brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.cs-nav__links { display: flex; align-items: center; gap: 2px; }
.cs-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 8px;
	border: 0;
	background: none;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.cs-nav__link .cs-caret { width: 10px; height: 10px; opacity: .7; transition: transform var(--dur) var(--ease); }
.cs-nav__link[aria-expanded="true"] .cs-caret { transform: rotate(180deg); }
.cs-nav__actions { display: flex; align-items: center; gap: 8px; }
.cs-nav__signin { font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: 8px; text-decoration: none; }
.cs-nav .btn { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; font-size: 15px; line-height: 1; white-space: nowrap; }
.cs-nav__link,
.cs-nav__signin { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1199.98px) {
	.cs-nav__link { padding: 8px 8px; font-size: 14px; }
	.cs-nav__inner { gap: 12px; }
}
/* Phones: logo + "Start free" + burger must fit 360–430px without overflow. */
@media (max-width: 575.98px) {
	.cs-nav__inner { gap: 12px; }
	.cs-nav__actions { gap: 4px; }
	.cs-nav__brand .wt-logo__full { height: 26px; width: auto; }
	.cs-nav .btn { height: 38px; padding: 0 12px; font-size: 14px; }
	.cs-nav__burger { width: 40px; height: 40px; }
}
@media (max-width: 374.98px) {
	.cs-nav__actions .btn { display: none; }   /* still in the mobile menu */
}
.cs-nav__burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 8px; border: 0; background: none; }

.cs-nav--light { background: rgba(255, 255, 255, .92); border-bottom-color: var(--border-default); }
.cs-nav--light .cs-nav__link,
.cs-nav--light .cs-nav__signin,
.cs-nav--light .cs-nav__burger { color: var(--text-primary); }
.cs-nav--light .cs-nav__link:hover,
.cs-nav--light .cs-nav__link[aria-expanded="true"],
.cs-nav--light .cs-nav__signin:hover { background: var(--bg-page); color: var(--text-primary); }
.cs-nav--light .cs-nav__link.is-active,
.cs-nav--light .cs-nav__link[aria-current="page"] { color: var(--link); }

.cs-nav--dark { background: transparent; margin-bottom: calc(-1 * var(--cs-nav-h)); }
.cs-nav--dark .cs-nav__link,
.cs-nav--dark .cs-nav__signin,
.cs-nav--dark .cs-nav__burger { color: #DCE3EC; }
.cs-nav--dark .cs-nav__link:hover,
.cs-nav--dark .cs-nav__link[aria-expanded="true"],
.cs-nav--dark .cs-nav__signin:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; }
.cs-nav--dark .cs-nav__link.is-active,
.cs-nav--dark .cs-nav__link[aria-current="page"] { color: #FFFFFF; }

.cs-nav.is-scrolled { -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); }
.cs-nav--light.is-scrolled { background: rgba(255, 255, 255, .82); box-shadow: 0 1px 0 rgba(15, 23, 42, .02); }
.cs-nav--dark.is-scrolled { background: rgba(8, 23, 47, .78); border-bottom-color: rgba(255, 255, 255, .08); }
.cs-nav--dark.is-open { background: var(--brand-navy); }
.cs-nav--light.is-open { background: var(--bg-white); }

/* Features dropdown */
.cs-nav .dropdown-menu.cs-menu {
	min-width: 360px;
	padding: 8px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-popover);
	margin-top: 8px !important;
}
/* The items keep Bootstrap's .dropdown-item / .dropdown-toggle hooks (wt-public.js
   arrow-key navigation); neutralise the bits of those classes we restyle. */
.cs-nav__link.dropdown-toggle::after { display: none; }
.cs-menu .dropdown-item { white-space: normal; width: auto; }
.cs-menu__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--text-primary);
}
.cs-menu__item:hover,
.cs-menu__item:focus-visible { background: var(--bg-page); color: var(--text-primary); }
.cs-menu__item[aria-current="page"] { background: var(--action-light); }
.cs-menu__item .cs-icon { width: 36px; height: 36px; border-radius: 8px; }
.cs-menu__item .cs-icon i { font-size: 18px; }
.cs-menu__title { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.cs-menu__desc { display: block; font-size: 13px; color: var(--text-muted-aa); line-height: 1.4; margin-top: 2px; }
.cs-menu__foot { display: block; margin-top: 4px; padding: 10px 12px; border-top: 1px solid var(--border-default); font-size: 14px; font-weight: 600; color: var(--link); text-decoration: none; }
.cs-menu__foot:hover { color: var(--link-hover); }

/* Mobile menu */
.cs-nav__mobile { display: none; }
@media (max-width: 991.98px) {
	.wt-mkt { --cs-nav-h: 64px; }
	.cs-nav__links,
	.cs-nav__signin { display: none; }
	.cs-nav__burger { display: inline-flex; }
	.cs-nav__mobile {
		display: block;
		position: absolute;
		top: var(--cs-nav-h);
		left: 0;
		right: 0;
		padding: 8px var(--cs-gutter) 20px;
		border-bottom: 1px solid var(--border-default);
		background: var(--bg-white);
		box-shadow: var(--shadow-raised);
	}
	.cs-nav__mobile a {
		display: flex;
		align-items: center;
		min-height: 48px;
		font-size: 17px;
		font-weight: 500;
		color: var(--text-primary);
		text-decoration: none;
		border-bottom: 1px solid var(--row-separator);
	}
	.cs-nav__mobile a:last-child { border-bottom: 0; }
	.cs-nav__mobile .btn { margin-top: 12px; width: 100%; min-height: 48px; justify-content: center; }
}

/* ---- Footer (navy) ---------------------------------------------------- */
.cs-footer {
	background: var(--brand-navy);
	color: var(--text-on-dark-muted);
	padding-block: clamp(56px, 7vw, 88px) 32px;
}
.cs-footer__grid { display: grid; grid-template-columns: minmax(240px, 1.4fr) repeat(5, minmax(0, 1fr)); gap: 40px 32px; }
.cs-footer__tagline { font-size: 15px; line-height: 1.6; max-width: 320px; margin: 16px 0 20px; color: var(--text-on-dark-muted); }
.cs-footer__head { font-size: 14px; font-weight: 600; color: var(--text-on-dark); margin: 0 0 14px; }
.cs-footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cs-footer a:not(.btn) { color: var(--text-on-dark-muted); text-decoration: none; font-size: 15px; transition: color var(--dur) var(--ease); }
.cs-footer a:not(.btn):hover,
.cs-footer a:not(.btn):focus-visible { color: #FFFFFF; }
.cs-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: 14px;
}
.cs-footer__bottom a:not(.btn) { font-size: 14px; }
.cs-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 0; }
.cs-footer .btn-primary { font-size: 14px; padding: 8px 14px; }
@media (max-width: 991.98px) {
	.cs-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cs-footer__brand { grid-column: 1 / -1; }
}

/* ---- Motion (restrained; reduced-motion handled globally in brand.css) -- */
@keyframes cs-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cs-rise { animation: cs-rise .5s var(--ease) both; }
.cs-rise--delay { animation-delay: .12s; }

/* ===========================================================================
   Legacy marketing classes, restyled to the v2 system while views migrate
   ========================================================================= */
.wt-ink-band,
.landing-dark-bg { background: var(--brand-navy) !important; }
/* Metronic's decorative curve sliver stays retired (see git history). */
.landing-curve svg { display: none; }
.badge.badge-white { background-color: #FFFFFF; color: var(--link); }
.wt-code-plain code { background: transparent !important; color: inherit !important; padding: 0 !important; border: 0 !important; }
.wt-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--link);
}
.wt-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--status-success);
	box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}
.wt-eyebrow--ink { color: var(--brand-blue-bright); }
.wt-card-tick {
	position: relative;
	border: 1px solid var(--border-default) !important;
	border-radius: var(--radius-card) !important;
	box-shadow: var(--shadow-card) !important;
	transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.wt-card-tick:hover,
.wt-card-tick:focus-visible,
.wt-card-tick:focus-within {
	transform: translateY(-2px);
	border-color: var(--border-strong) !important;
	box-shadow: var(--shadow-raised) !important;
}
.wt-scope-grid { position: relative; }
.wt-scope-grid::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(170, 180, 194, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(170, 180, 194, .05) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(90% 80% at 50% 0%, #000 30%, transparent 75%);
	        mask-image: radial-gradient(90% 80% at 50% 0%, #000 30%, transparent 75%);
	pointer-events: none;
}
.wt-scope-grid > * { position: relative; z-index: 2; }
.wt-mkt h1 { letter-spacing: -.03em; }
.wt-mkt .fs-2hx { letter-spacing: -.025em; }
.wt-mkt .table td.text-end,
.wt-mkt .fs-3x.fw-bolder { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
	.wt-card-tick:hover,
	.cs-card--link:hover,
	.cs-card--hover:hover { transform: none; }
}


/* ###########################################################################
   Content: blog, docs, legal, changelog
   ########################################################################### */

/* ===========================================================================
   CompleteStatus — content surfaces (site-content.css)
   ---------------------------------------------------------------------------
   Blog, docs, legal and changelog: light, content-first reading pages built on
   the site.css primitives (cs-prose, cs-tag, cs-card, cs-crumbs, cs-callout …).
   Loaded after site.css on every public page, so it can refine the long-form
   primitives in place.

     Index pages  (blog, topic, docs, changelog)  light page head + white body
     Reading pages (post, doc, legal, entry)      light header, 720–820px measure
   ========================================================================= */

/* ---- 1. Long-form prose: refinements of the shared .cs-prose ------------ */
/* Brief: 16–18px, line-height 1.65. Every block is spaced by its top margin
   only (Bootstrap's bottom margins would double the rhythm). */
.cs-prose { line-height: 1.65; }
.cs-prose > :first-child { margin-top: 0; }
.cs-prose p,
.cs-prose ul,
.cs-prose ol,
.cs-prose pre,
.cs-prose table,
.cs-prose blockquote,
.cs-prose figure { margin-bottom: 0; }
.cs-prose h2,
.cs-prose h3,
.cs-prose h4 { margin-bottom: 0; }
.cs-prose h2 + *,
.cs-prose h3 + *,
.cs-prose h4 + * { margin-top: .55em; }
.cs-prose li > ul,
.cs-prose li > ol,
.cs-prose li > p + p { margin-top: .4em; }
/* Metronic gives every <code> a 0 .5rem margin, a drop shadow and 1rem size:
   that is the "pill" look. Inline code is pale blue-gray and sits in the line. */
.cs-prose :not(pre) > code {
	margin: 0;
	box-shadow: none;
	font-size: .86em;
	line-height: inherit;
	white-space: normal;
	-webkit-box-decoration-break: clone;   /* a wrapped token keeps its pill on both lines */
	        box-decoration-break: clone;
}
.cs-prose a code { color: inherit; }
.cs-prose pre {
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #2E3744 transparent;
	tab-size: 4;
}
.cs-prose pre code { margin: 0; box-shadow: none; border: 0; }
.cs-prose blockquote { font-style: normal; }
.cs-prose blockquote > :first-child { margin-top: 0; }
.cs-prose img { display: block; }
.cs-prose dt { font-weight: 600; color: var(--text-primary); }

/* Code frame: the dark panel scrolls (and takes keyboard focus); the <pre>
   inside grows to its content so the right padding survives scrolling. */
.cs-prose .cs-pre {
	background: var(--bg-dark);
	border: 1px solid #1E2631;
	border-radius: var(--radius-card-sm);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #2E3744 transparent;
}
.cs-prose .cs-pre > pre {
	display: inline-block;
	min-width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: visible;
	vertical-align: top;
}
.cs-prose .cs-pre:focus-visible { outline-offset: 2px; }

/* Tables: one scroll container per table (the page never scrolls sideways),
   rounded outer frame, visible inner borders, a pale header row. Markdown
   tables are wrapped in .cs-table-scroll by the blog/docs views; the legal
   tables use the same wrapper (plus .cs-table-stack on phones). */
.cs-prose .cs-table-scroll {
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-card-sm);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--bg-white);
}
.cs-prose .cs-table-scroll > table {
	display: table;
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.55;
}
.cs-prose .cs-table-scroll th,
.cs-prose .cs-table-scroll td {
	border: 1px solid var(--border-default);
	padding: 11px 14px;
	text-align: left;
	vertical-align: top;
	color: inherit;
}
.cs-prose .cs-table-scroll th {
	background: var(--bg-page);
	color: var(--text-primary);
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
}
.cs-prose .cs-table-scroll tr > :first-child { border-left: 0; }
.cs-prose .cs-table-scroll tr > :last-child { border-right: 0; }
.cs-prose .cs-table-scroll thead tr:first-child > *,
.cs-prose .cs-table-scroll table:not(:has(thead)) tr:first-child > * { border-top: 0; }
.cs-prose .cs-table-scroll tbody tr:last-child > * { border-bottom: 0; }
.cs-prose .cs-table-scroll td code { white-space: nowrap; }

/* Callouts. Docs write them as "> **Warning:** …"; the docs view tags those
   blockquotes with .cs-callout--* (warning amber, danger red, tip green,
   note blue). The label keeps its text, so the meaning never rests on colour. */
.cs-prose blockquote.cs-callout {
	padding: 14px 18px;
	border: 1px solid var(--border-default);
	border-left-width: 4px;
	border-radius: var(--radius-card-sm);
	color: #24324A;
	font-size: .94em;
	line-height: 1.6;
}
.cs-prose blockquote.cs-callout > * + * { margin-top: .6em; }
.cs-prose blockquote.cs-callout--note { border-color: #CFE6F8; border-left-color: var(--action-primary); background: #F4FAFE; }
.cs-prose blockquote.cs-callout--warn { border-color: #F8DFA8; border-left-color: var(--status-warning); background: var(--status-warning-soft); }
.cs-prose blockquote.cs-callout--danger { border-color: #F6C6D0; border-left-color: var(--status-danger); background: var(--status-danger-soft); }
.cs-prose blockquote.cs-callout--ok { border-color: #BDEBCD; border-left-color: var(--status-success); background: var(--status-success-soft); }
.cs-prose blockquote.cs-callout > p:first-child > strong:first-child { color: var(--text-primary); }
.cs-prose blockquote.cs-callout--note > p:first-child > strong:first-child { color: var(--link); }
.cs-prose blockquote.cs-callout--warn > p:first-child > strong:first-child { color: var(--status-warning-text); }
.cs-prose blockquote.cs-callout--danger > p:first-child > strong:first-child { color: var(--status-danger-text); }
.cs-prose blockquote.cs-callout--ok > p:first-child > strong:first-child { color: var(--status-success-text); }
.cs-prose blockquote.cs-callout :not(pre) > code { background: rgba(255, 255, 255, .7); }

/* ---- 2. Shared bits ------------------------------------------------------- */
/* Arrows are drawn, not typed: the self-hosted Inter subset has no U+2190 /
   U+2192, so "→" fell back to whatever system font was around. */
:root {
	--cs-arrow-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M8.5 3.8 12.7 8l-4.2 4.2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--cs-arrow-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 8h-10M7.5 3.8 3.3 8l4.2 4.2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cs-arrowlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--link);
	text-decoration: none;
	white-space: nowrap;
}
.cs-arrowlink::after,
.cs-back::before,
.cs-docnav__home::before,
.cs-docpager__dir::before,
.cs-docpager__dir::after,
.cs-docdir__link::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--cs-arrow-r) center / contain no-repeat;
	        mask: var(--cs-arrow-r) center / contain no-repeat;
	transition: transform var(--dur) var(--ease);
}
.cs-arrowlink:hover::after { transform: translateX(3px); }
a:hover .cs-arrowlink::after { transform: translateX(3px); }

.cs-content { background: var(--bg-white); }
.cs-content .cs-crumbs { margin-bottom: 18px; }
.cs-crumbs [aria-current] { color: var(--text-secondary); }
.cs-crumbs li { min-width: 0; }
/* The current page is the H1 right below: keep its crumb to one line. */
.cs-article .cs-crumbs li:last-child:not(:first-child),
.cs-doc-head .cs-crumbs li:last-child:not(:first-child),
.cs-legal .cs-crumbs li:last-child:not(:first-child),
.cs-cl-single .cs-crumbs li:last-child:not(:first-child) { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Legal tables on phones: each row becomes a labelled block (the column
   name comes from the cell's data-label), instead of a sideways scroll. */
@media (max-width: 639.98px) {
	.cs-prose .cs-table-stack { border: 0; border-radius: 0; overflow: visible; background: none; }
	.cs-prose .cs-table-stack > table,
	.cs-prose .cs-table-stack tbody,
	.cs-prose .cs-table-stack tr,
	.cs-prose .cs-table-stack td { display: block; width: 100%; }
	.cs-prose .cs-table-stack thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.cs-prose .cs-table-stack tr {
		padding: 14px 16px;
		border: 1px solid var(--border-strong);
		border-radius: var(--radius-card-sm);
		background: var(--bg-white);
	}
	.cs-prose .cs-table-stack tr + tr { margin-top: 12px; }
	.cs-prose .cs-table-stack td { border: 0; padding: 0; }
	.cs-prose .cs-table-stack td + td { margin-top: 10px; }
	.cs-prose .cs-table-stack td:first-child { font-size: 16px; font-weight: 600; color: var(--text-primary); }
	.cs-prose .cs-table-stack td + td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .05em;
		text-transform: uppercase;
		color: var(--text-muted-aa);
	}
}

/* Meta line: date · reading time */
.cs-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-muted-aa);
	margin: 0;
}
.cs-meta__sep { color: var(--border-strong); }
.cs-meta__author { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text-primary); }
.cs-avatar {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--border-default);
	background: var(--bg-white);
	flex: 0 0 auto;
}
.cs-avatar .wt-logo { display: inline-flex; }
.cs-avatar img { width: auto; height: 13px; }

/* RSS link: a quiet secondary control */
.cs-rss {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border-radius: var(--radius-btn);
	border: 1px solid var(--border-strong);
	background: var(--bg-white);
	color: var(--text-primary);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cs-rss:hover,
.cs-rss:focus-visible { background: var(--bg-page); border-color: #B5C1D0; color: var(--text-primary); }
.cs-rss svg { width: 14px; height: 14px; color: var(--brand-blue); flex: 0 0 auto; }

/* Topic tag row (cs-tag from site.css) */
.cs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cs-tags--lg .cs-tag { padding: 6px 12px; font-size: 14px; }
.cs-tag__count { color: var(--text-secondary); font-weight: 500; font-variant-numeric: tabular-nums; }   /* 5.6:1 on #EEF2F6 (muted-aa is 4.45) */
a.cs-tag:hover .cs-tag__count,
.cs-tag.is-active .cs-tag__count,
.cs-tag[aria-current] .cs-tag__count { color: inherit; }
a.cs-tag:focus-visible { background: var(--action-light); color: var(--link); }

.cs-tag--all { background: transparent; color: var(--link); text-decoration: underline; text-underline-offset: .18em; }
a.cs-tag--all:hover { background: var(--action-light); }
.cs-article-width { max-width: 760px; margin-inline: auto; }

/* ---- 3. Page head (index pages) ---------------------------------------- */
/* Light, not a navy hero: the blog/docs/changelog stay content-first. Same
   band as site-pages.css's .cs-pagehead (compare/about/contact) so the
   public site reads as one system; the two can merge into site.css. */
.cs-page-head {
	position: relative;
	background: var(--bg-page);
	border-bottom: 1px solid var(--border-default);
	padding-block: clamp(44px, 6vw, 80px) clamp(36px, 4.5vw, 56px);
}
.cs-page-head > .container { position: relative; }
.cs-page-head__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 32px;
}
.cs-page-head__text { max-width: 760px; min-width: 0; }
.cs-page-head .cs-eyebrow { margin-bottom: 14px; }
.cs-page-head .cs-lead { margin-top: 14px; max-width: 64ch; }
.cs-page-head .cs-tags { margin-top: 28px; }
.cs-page-head .cs-crumbs { margin-bottom: 16px; }

.cs-content-body { padding-block: clamp(40px, 5vw, 64px) clamp(64px, 8vw, 104px); }

/* ---- 4. Blog cards ------------------------------------------------------ */
.cs-post-card,
.cs-feature {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--bg-white);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	color: var(--text-primary);
	text-decoration: none;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cs-post-card { padding: 24px; gap: 12px; }
.cs-post-card:hover,
.cs-post-card:focus-visible,
.cs-feature:hover,
.cs-feature:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--shadow-raised);
	border-color: var(--border-strong);
	color: var(--text-primary);
}
.cs-post-card__tags,
.cs-feature__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-post-card__title {
	font-size: 18px;
	line-height: 1.35;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--text-primary);
	margin: 0;
	transition: color var(--dur) var(--ease);
}
.cs-post-card__text {
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-secondary);
	margin: 0 0 4px;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.cs-post-card .cs-meta { margin-top: auto; font-size: 13px; }
.cs-post-card:hover .cs-post-card__title,
.cs-feature:hover .cs-feature__title { color: var(--link); }

/* Post grids: 1 → 2 → 3 columns (never 4: titles need the width) */
.cs-post-grid { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .cs-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .cs-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-post-card__tags .cs-tag,
.cs-feature__tags .cs-tag { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; }
.cs-feature__tags .cs-badge { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; border-radius: 6px; padding: 3px 8px; }

/* Featured (latest) post */
.cs-feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	padding: clamp(22px, 3vw, 36px);
	margin-bottom: clamp(28px, 3vw, 40px);
}
@media (min-width: 992px) {
	.cs-feature--media { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
}
.cs-feature__body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cs-feature__title {
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.18;
	font-weight: 700;
	letter-spacing: -.025em;
	margin: 0;
	transition: color var(--dur) var(--ease);
}
.cs-feature__text { font-size: 17px; line-height: 1.6; color: var(--text-secondary); margin: 0; }
.cs-feature__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 6px; }
.cs-feature__media {
	margin: 0;
	border-radius: var(--radius-card-sm);
	overflow: hidden;
	border: 1px solid var(--border-default);
	background: var(--brand-navy);
	order: -1;
}
@media (min-width: 992px) { .cs-feature__media { order: 0; } }
.cs-feature__media img { display: block; width: 100%; height: auto; }

/* Pagination (Laravel's Bootstrap 5 view) */
.cs-pager { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 56px); }
.cs-pager > nav { width: 100%; }
.cs-pager .pagination { gap: 6px; flex-wrap: wrap; justify-content: center; }
.cs-pager .page-item { margin: 0; }
.cs-pager .page-item .page-link {
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--radius-btn);
	border: 1px solid var(--border-default);
	background: var(--bg-white);
	color: var(--text-primary);
	font-size: 15px;
	font-weight: 500;
	box-shadow: none;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cs-pager .page-item .page-link:hover { background: var(--bg-page); border-color: var(--border-strong); color: var(--text-primary); }
.cs-pager .page-item.active .page-link { background: var(--action-fill); border-color: var(--action-fill); color: #FFFFFF; }
.cs-pager .page-item.disabled .page-link { color: var(--text-muted); background: var(--bg-white); border-color: var(--border-default); }
.cs-pager p.small { font-size: 14px; color: var(--text-muted-aa) !important; margin: 0; }
.cs-pager .d-sm-flex { gap: 16px; }

/* Topic section on the blog index */
.cs-topic-block { margin-top: clamp(56px, 7vw, 80px); }
.cs-topic-block__title { font-size: 22px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 18px; }

/* ---- 5. End CTAs ------------------------------------------------------- */
/* Index pages end on a contained navy CTA (the navy share of the rhythm);
   reading pages use the light panel so the article stays the focus. */
.cs-endcta {
	margin-top: clamp(56px, 7vw, 88px);
	padding: clamp(36px, 5vw, 64px) clamp(22px, 5vw, 64px);
	border-radius: var(--radius-card-lg);
	text-align: center;
}
.cs-endcta__title { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; font-weight: 700; letter-spacing: -.025em; margin: 0 0 14px; }
.cs-endcta__text { font-size: 17px; line-height: 1.6; max-width: 640px; margin: 0 auto 28px; color: var(--text-secondary); }
.cs-endcta .cs-actions { justify-content: center; }
.cs-endcta.cs-dark .cs-endcta__text { color: var(--text-on-dark-muted); }

/* Light panel: in-article / end-of-doc CTA and the waitlist card */
.cs-panel {
	background: var(--bg-subtle);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card-lg);
	padding: clamp(24px, 4vw, 40px);
}
.cs-panel__title { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--text-primary); margin: 0 0 10px; }
.cs-panel__text { font-size: 16px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 22px; }
.cs-panel--center { text-align: center; }
.cs-panel--center .cs-panel__text { max-width: 600px; margin-inline: auto; }
.cs-panel--center .cs-actions { justify-content: center; }
.cs-panel--row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.cs-panel--row .cs-panel__text { margin: 0; }
.cs-panel--row > div:first-child { flex: 1 1 320px; min-width: 0; }

/* Waitlist / start-free card at the end of posts and topic pages */
.cs-signup { margin-top: clamp(48px, 6vw, 64px); scroll-margin-top: calc(var(--cs-nav-h) + 16px); }
.cs-signup__form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
@media (min-width: 576px) { .cs-signup__form { flex-direction: row; } }
.cs-signup__form .form-control { min-height: 46px; background: var(--bg-white); font-size: 16px; }
.cs-signup__form .btn { min-height: 46px; padding-inline: 22px; }
.cs-signup__error { color: var(--status-danger-text); font-size: 14px; font-weight: 500; margin: 0 0 8px; }
.cs-signup__fine { font-size: 14px; color: var(--text-muted-aa); margin: 16px 0 0; }
.cs-signup__fine a { color: var(--link); }
.cs-signup .alert { margin: 0; }

/* ---- 6. Blog post ------------------------------------------------------ */
.cs-article { max-width: 760px; margin-inline: auto; padding-block: clamp(32px, 5vw, 56px) clamp(48px, 6vw, 72px); }
.cs-article__head { margin-bottom: clamp(28px, 4vw, 40px); }
.cs-article__head .cs-tags { margin-bottom: 18px; }
.cs-article__title {
	font-size: clamp(30px, 4.2vw, 46px);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--text-primary);
	margin: 0;
}
.cs-article__lead { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; color: var(--text-secondary); margin: 16px 0 0; }
.cs-article__head .cs-meta { margin-top: 22px; }
.cs-article__cover {
	margin: 0 0 clamp(28px, 4vw, 40px);
	border-radius: var(--radius-card);
	overflow: hidden;
	border: 1px solid var(--border-default);
	background: var(--brand-navy);
}
.cs-article__cover img { display: block; width: 100%; height: auto; }
.cs-article .cs-prose { max-width: none; font-size: 17.5px; }
.cs-ai-note {
	margin: clamp(36px, 5vw, 48px) 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--border-default);
	font-size: 14px;
	font-style: italic;
	color: var(--text-muted-aa);
}

/* In-article "check this continuously" strip */
.cs-inline-cta {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	margin: 0 0 clamp(28px, 4vw, 40px);
	border: 1px solid #CFE6F8;
	border-radius: var(--radius-card);
	background: #F4FAFE;
}
.cs-inline-cta .cs-icon { background: var(--bg-white); border: 1px solid #CFE6F8; }
.cs-inline-cta__text { flex: 1 1 auto; min-width: 0; }
.cs-inline-cta__title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0; }
.cs-inline-cta__sub { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin: 2px 0 0; }
.cs-inline-cta .btn { flex: 0 0 auto; white-space: nowrap; }

/* Related reading: full-width band under the article */
.cs-related { background: var(--bg-page); border-top: 1px solid var(--border-default); padding-block: clamp(48px, 6vw, 72px); }
.cs-related__title { font-size: clamp(22px, 2.2vw, 26px); font-weight: 700; letter-spacing: -.02em; margin: 0 0 24px; }
.cs-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 15px;
	font-weight: 600;
	color: var(--text-secondary);
	text-decoration: none;
}
.cs-back::before { -webkit-mask-image: var(--cs-arrow-l); mask-image: var(--cs-arrow-l); }
.cs-back:hover { color: var(--link); }
.cs-back:hover::before { transform: translateX(-3px); }
.cs-back-row { text-align: center; margin-top: clamp(32px, 4vw, 44px); }

/* ---- 7. Docs ----------------------------------------------------------- */
/* Three columns on desktop: navigation · content · "On this page". */
.cs-docs {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	padding-block: 24px clamp(64px, 8vw, 96px);
}
@media (min-width: 992px) {
	.cs-docs { grid-template-columns: 236px minmax(0, 1fr); gap: 48px; padding-top: 40px; }
}
@media (min-width: 1200px) {
	.cs-docs { grid-template-columns: 236px minmax(0, 1fr) 196px; gap: 44px; }
}
@media (min-width: 1400px) {
	.cs-docs { grid-template-columns: 252px minmax(0, 1fr) 212px; gap: 56px; }
}
.cs-docs__main { min-width: 0; max-width: 780px; }

/* Left navigation (desktop) */
.cs-docnav { display: none; }
@media (min-width: 992px) {
	.cs-docnav { display: block; border-right: 1px solid var(--border-default); }
}
.cs-docnav__inner {
	position: sticky;
	top: calc(var(--cs-nav-h) + 24px);
	max-height: calc(100vh - var(--cs-nav-h) - 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 16px 32px 0;
	scrollbar-width: thin;
	scrollbar-color: var(--border-strong) transparent;
}
.cs-docnav__home {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	margin: 0 0 14px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
	text-decoration: none;
}
.cs-docnav__home::before { -webkit-mask-image: var(--cs-arrow-l); mask-image: var(--cs-arrow-l); color: var(--text-muted-aa); }
.cs-docnav__home:hover { background: var(--bg-page); color: var(--text-primary); }
.cs-docnav__home:hover::before { transform: translateX(-2px); }
.cs-docnav__group + .cs-docnav__group { margin-top: 22px; }
.cs-docnav__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted-aa);
	padding: 0 12px;
	margin: 0 0 6px;
}
.cs-docnav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.cs-docnav__link {
	position: relative;
	display: block;
	padding: 7px 12px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.4;
	color: #24324A;
	text-decoration: none;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cs-docnav__link:hover { background: var(--bg-page); color: var(--text-primary); }
.cs-docnav__link[aria-current="page"] { background: var(--action-light); color: var(--link); font-weight: 600; }
.cs-docnav__link[aria-current="page"]::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	bottom: 7px;
	width: 2px;
	border-radius: 2px;
	background: var(--brand-blue);
}

/* Right "On this page" */
.cs-toc { display: none; }
@media (min-width: 1200px) { .cs-toc { display: block; } }
.cs-toc__inner {
	position: sticky;
	top: calc(var(--cs-nav-h) + 24px);
	max-height: calc(100vh - var(--cs-nav-h) - 40px);
	overflow-y: auto;
	padding-bottom: 24px;
	scrollbar-width: thin;
}
.cs-toc__title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-primary);
	margin: 6px 0 12px;
}
.cs-toc__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border-default); }
.cs-toc__link {
	display: block;
	margin-left: -1px;
	padding: 5px 0 5px 14px;
	border-left: 2px solid transparent;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--text-secondary);
	text-decoration: none;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cs-toc__item--sub .cs-toc__link { padding-left: 26px; font-size: 13px; }
.cs-toc__link:hover { color: var(--text-primary); border-left-color: var(--border-strong); }
.cs-toc__link.is-active { color: var(--link); border-left-color: var(--brand-blue); font-weight: 500; }

/* Disclosures that replace the side columns on smaller screens */
.cs-disclosure {
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card-sm);
	background: var(--bg-white);
}
.cs-disclosure > summary {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 10px 16px;
	cursor: pointer;
	list-style: none;
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
	border-radius: var(--radius-card-sm);
}
.cs-disclosure > summary::-webkit-details-marker { display: none; }
.cs-disclosure > summary::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-right: 2px solid var(--text-muted-aa);
	border-bottom: 2px solid var(--text-muted-aa);
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--dur) var(--ease);
	flex: 0 0 auto;
}
.cs-disclosure[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.cs-disclosure > summary:hover { background: var(--bg-page); }
.cs-disclosure__meta { font-weight: 500; color: var(--text-muted-aa); font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-disclosure__body { border-top: 1px solid var(--border-default); padding: 12px 8px 14px; }
.cs-disclosure .cs-docnav__link { padding: 10px 12px; font-size: 15px; }
.cs-disclosure .cs-toc__list { margin-left: 8px; }
.cs-disclosure .cs-toc__link { padding-block: 8px; font-size: 15px; }
.cs-disclosure .cs-toc__item--sub .cs-toc__link { font-size: 14px; }
.cs-docnav-m { display: block; }
.cs-toc-m { display: block; margin: 0 0 28px; }
@media (min-width: 992px) { .cs-docnav-m { display: none; } }
@media (min-width: 1200px) { .cs-toc-m { display: none; } }

/* Doc article */
.cs-doc-head { padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--border-default); }
.cs-doc-head__title {
	font-size: clamp(30px, 3.4vw, 42px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--text-primary);
	margin: 0;
}
.cs-doc-head .cs-lead { margin-top: 12px; font-size: 18px; }
.cs-doc-head .cs-meta { margin-top: 16px; }
.cs-toc-m + .cs-prose,
.cs-doc-head + .cs-prose { margin-top: 0; }
.cs-doc-body.cs-prose { max-width: none; font-size: 16.5px; }
.cs-doc-body.cs-prose h2 { font-size: 24px; }
.cs-doc-body.cs-prose h3 { font-size: 19px; }

/* Previous / next guide */
.cs-docpager {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: clamp(48px, 6vw, 64px);
	padding-top: 32px;
	border-top: 1px solid var(--border-default);
}
.cs-docpager__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card-sm);
	background: var(--bg-white);
	text-decoration: none;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cs-docpager__link:hover,
.cs-docpager__link:focus-visible { border-color: var(--action-primary); box-shadow: var(--shadow-card); }
.cs-docpager__link--next { grid-column: 2; text-align: right; align-items: flex-end; }
.cs-docpager__dir { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-muted-aa); }
.cs-docpager__dir::before,
.cs-docpager__dir::after { width: 13px; height: 13px; }
.cs-docpager__link--prev .cs-docpager__dir::before { -webkit-mask-image: var(--cs-arrow-l); mask-image: var(--cs-arrow-l); }
.cs-docpager__link--prev .cs-docpager__dir::after,
.cs-docpager__link--next .cs-docpager__dir::before { display: none; }
.cs-docpager__title { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--link); }
@media (max-width: 575.98px) {
	.cs-docpager { grid-template-columns: minmax(0, 1fr); }
	.cs-docpager__link--next { grid-column: 1; }
}
.cs-docs .cs-panel { margin-top: 32px; }

/* Docs index: a directory of sections */
.cs-docdir { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .cs-docdir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cs-docdir { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-docdir__card {
	background: var(--bg-white);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 22px 20px 14px;
	min-width: 0;
}
@media (min-width: 768px) { .cs-docdir__card--wide { grid-column: span 2; } }
.cs-docdir__head { display: flex; align-items: center; gap: 14px; padding: 0 4px; margin: 0 0 14px; }
.cs-docdir__head .cs-icon { width: 40px; height: 40px; }
.cs-docdir__head .cs-icon i { font-size: 20px; }
.cs-docdir__title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; margin: 0; color: var(--text-primary); }
.cs-docdir__count { font-size: 13px; color: var(--text-muted-aa); margin: 2px 0 0; }
.cs-docdir__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 28px; }
@media (min-width: 768px) { .cs-docdir__card--wide .cs-docdir__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-docdir__list li { border-top: 1px solid var(--row-separator); }
.cs-docdir__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 46px;
	padding: 9px 6px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: #24324A;
	text-decoration: none;
	border-radius: 6px;
	transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.cs-docdir__link::after { color: var(--text-muted); }
.cs-docdir__link:hover { color: var(--link); background: var(--bg-page); }
.cs-docdir__link:hover::after { color: var(--link); transform: translateX(2px); }

/* Lead section (Getting started): full width, the guide as one large link */
.cs-docdir__card--lead { grid-column: 1 / -1; padding: 22px; }
@media (min-width: 768px) {
	.cs-docdir__card--lead { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); align-items: center; gap: 24px; }
	.cs-docdir__card--lead .cs-docdir__head { margin: 0; }
}
.cs-docdir__lead {
	position: relative;
	display: grid;
	gap: 4px;
	padding: 16px 52px 16px 20px;
	border: 1px solid #CFE6F8;
	border-radius: var(--radius-card-sm);
	background: #F4FAFE;
	text-decoration: none;
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.cs-docdir__lead::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background-color: var(--link);
	-webkit-mask: var(--cs-arrow-r) center / contain no-repeat;
	        mask: var(--cs-arrow-r) center / contain no-repeat;
	transition: transform var(--dur) var(--ease);
}
.cs-docdir__lead:hover { border-color: var(--action-primary); background: var(--action-light); }
.cs-docdir__lead:hover::after { transform: translateX(3px); }
.cs-docdir__lead-title { font-size: 17px; font-weight: 600; color: var(--link); line-height: 1.35; }
.cs-docdir__lead-text { font-size: 15px; color: var(--text-secondary); line-height: 1.55; }

/* ---- 8. Legal ---------------------------------------------------------- */
.cs-legal { max-width: 800px; margin-inline: auto; padding-block: clamp(36px, 5.5vw, 64px) clamp(64px, 8vw, 104px); }
.cs-legal__head { padding-bottom: 28px; margin-bottom: 36px; border-bottom: 1px solid var(--border-default); }
.cs-legal__title { font-size: clamp(32px, 4vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; color: var(--text-primary); margin: 0; }
.cs-legal__updated { margin: 12px 0 0; font-size: 15px; color: var(--text-muted-aa); }
.cs-legal .cs-prose { max-width: none; font-size: 16.5px; line-height: 1.7; }
.cs-legal .cs-prose h2 { font-size: 22px; margin-top: 2.1em; letter-spacing: -.015em; }
.cs-legal .cs-prose h3 { font-size: 18px; margin-top: 1.6em; }
.cs-legal .cs-prose li + li { margin-top: .55em; }
.cs-legal__foot {
	margin-top: clamp(40px, 5vw, 56px);
	padding-top: 22px;
	border-top: 1px solid var(--border-default);
	font-size: 15px;
	color: var(--text-secondary);
}
.cs-legal__foot a { color: var(--link); }

/* ---- 9. Changelog ------------------------------------------------------- */
.cs-changelog { max-width: 900px; margin-inline: auto; }
.cs-cl-entry {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	scroll-margin-top: calc(var(--cs-nav-h) + 16px);
}
@media (min-width: 768px) {
	.cs-cl-entry { grid-template-columns: 172px minmax(0, 1fr); }
}
.cs-cl-entry__date {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
	padding-top: 3px;
}
@media (min-width: 768px) {
	.cs-cl-entry__date { position: sticky; top: calc(var(--cs-nav-h) + 24px); align-self: start; padding-right: 28px; text-align: right; }
}
.cs-cl-entry__body {
	position: relative;
	min-width: 0;
	padding: 0 0 48px 32px;
	border-left: 1px solid var(--border-default);
}
.cs-cl-entry__body::before {
	content: "";
	position: absolute;
	top: 6px;
	left: -6px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--bg-white);
	border: 2px solid var(--brand-blue);
}
.cs-cl-entry:last-child .cs-cl-entry__body { padding-bottom: 8px; }
@media (max-width: 767.98px) {
	.cs-cl-entry__date { padding: 0 0 8px 32px; border-left: 1px solid var(--border-default); position: relative; }
	.cs-cl-entry__date::before {
		content: "";
		position: absolute;
		top: 5px;
		left: -6px;
		width: 11px;
		height: 11px;
		border-radius: 50%;
		background: var(--bg-white);
		border: 2px solid var(--brand-blue);
	}
	.cs-cl-entry__body::before { display: none; }
}
.cs-cl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.cs-cl-tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.6;
	background: var(--status-neutral-soft);
	color: #24324A;
}
.cs-cl-tag--new { background: var(--action-light); color: var(--link); }
.cs-cl-tag--improved { background: var(--status-neutral-soft); color: #24324A; }
.cs-cl-tag--fixed { background: var(--status-success-soft); color: var(--status-success-text); }
.cs-cl-entry__title { font-size: clamp(20px, 2vw, 23px); line-height: 1.3; font-weight: 700; letter-spacing: -.015em; margin: 0 0 12px; }
.cs-cl-entry__link { color: var(--text-primary); text-decoration: none; }
.cs-cl-entry__link:hover { color: var(--link); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.cs-cl-entry .cs-prose { max-width: none; font-size: 16px; }

.cs-cl-single { max-width: 760px; margin-inline: auto; padding-block: clamp(32px, 5vw, 56px) clamp(64px, 8vw, 96px); }
.cs-cl-single__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; }
.cs-cl-single__meta time { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.cs-cl-single__meta .cs-cl-tags { margin: 0; }
.cs-cl-single__title { font-size: clamp(30px, 4vw, 44px); line-height: 1.12; font-weight: 800; letter-spacing: -.03em; color: var(--text-primary); margin: 0 0 24px; }
.cs-cl-single .cs-prose { max-width: none; }
.cs-cl-single__foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(40px, 5vw, 56px); padding-top: 28px; border-top: 1px solid var(--border-default); }

/* ---- 10. Phones ---------------------------------------------------------- */
@media (max-width: 767.98px) {
	.cs-inline-cta { flex-wrap: wrap; }
	.cs-inline-cta .cs-icon { display: none; }
	.cs-inline-cta .btn { width: 100%; justify-content: center; }
	.cs-page-head__row { align-items: flex-start; }
	.cs-endcta .cs-actions .btn,
	.cs-panel .cs-actions .btn { flex: 1 1 100%; justify-content: center; }
	.cs-prose pre { border-radius: var(--radius-card-sm); font-size: 13px; padding: 14px 16px; }
	.cs-article .cs-prose { font-size: 17px; }
	.cs-legal .cs-prose,
	.cs-doc-body.cs-prose { font-size: 16px; }
	.cs-pager .page-item .page-link { min-width: 44px; height: 44px; }
	/* Markdown tables keep readable columns and scroll inside their frame */
	.cs-prose .cs-table-scroll:not(.cs-table-stack) td,
	.cs-prose .cs-table-scroll:not(.cs-table-stack) th { min-width: 132px; }
}

@media (prefers-reduced-motion: reduce) {
	.cs-post-card:hover,
	.cs-post-card:focus-visible,
	.cs-feature:hover,
	.cs-feature:focus-visible { transform: none; }
}


/* ###########################################################################
   Homepage
   ########################################################################### */

/* ===========================================================================
   CompleteStatus — homepage layer (site-home.css)
   ---------------------------------------------------------------------------
   Only marketing/landing.blade.php uses these classes (prefix cs-home-), so
   this file is inert on every other public page. Built on the site.css
   primitives (cs-hero, cs-section, cs-h2, cs-lead, cs-shot, cs-code, cs-sev,
   cs-compare …) and the brand.css tokens; no raw hex where a token exists.

   Chapters (brief, "Homepage section rhythm"):
     hero (navy) → live proof (white) → $113 vs $49 (blue-gray --bg-subtle)
     → capabilities (white) → security remediation (navy split)
     → product screens (white) → competitor gaps (pale gray)
     → free tools (white) → pricing (light) → FAQ (white) → final CTA (navy)
   ========================================================================= */

/* ---- Dark-ground check (shared-file request: .cs-dark variant) ---------- */
/* site.css's --cs-check-green strokes #15803D, which nearly disappears on
   navy. On the homepage's navy chapters the same mark uses a brighter green. */
.cs-home-hero,
.cs-home-sec {
	--cs-check-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%2322C55E' fill-opacity='.2'/%3E%3Cpath d='M4.6 8.3l2.2 2.2 4.6-4.9' fill='none' stroke='%234ADE80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- Secondary button on navy (shared-file request) -------------------- */
/* Arrow glyph as a mask (see .cs-home-cap .cs-link-arrow) */
:root {
	--cs-home-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- 1. Hero ------------------------------------------------------------ */
/* Navy, centred copy, and the real dashboard large below it. The shot
   straddles the hero's lower edge: the navy ground stops --cs-home-overlap
   short of the bottom, so the screenshot settles onto the white chapter
   that follows (less navy, and the product is the centre of the page). */
.cs-home-hero {
	--cs-home-overlap: clamp(88px, 15vw, 248px);
	padding-bottom: 0;
	background:
		linear-gradient(180deg, var(--brand-navy) 0%, #0A1426 78%, var(--bg-dark) 100%) top / 100% calc(100% - var(--cs-home-overlap)) no-repeat,
		var(--bg-white);
}
.cs-home-hero::before { bottom: var(--cs-home-overlap); }
.cs-home-hero__copy {
	display: grid;
	justify-items: center;
	text-align: center;
	max-width: 980px;
	margin-inline: auto;
}
.cs-home-hero__copy .cs-eyebrow { margin-bottom: 22px; }
.cs-home-hero__lead {
	max-width: 620px;
	margin-top: 24px;
	color: #C3CCD8;              /* a step brighter than --text-on-dark-muted for the hero lead: 10.6:1 on navy */
}
.cs-home-hero__actions { justify-content: center; margin-top: 36px; }
.cs-home-hero__trust { justify-content: center; margin-top: 22px; }
.cs-home-hero__shot {
	max-width: 1120px;
	margin: clamp(48px, 6vw, 72px) auto 0;
}
/* The glow sits behind the upper (navy) part of the shot only, so it never
   tints the white ground below. Very subtle, never animated. */
.cs-home-hero__shot.cs-glow::before {
	inset: -9% -7% 42% -7%;
	background: radial-gradient(closest-side, rgba(7, 135, 227, .3), rgba(7, 135, 227, 0));
	filter: blur(12px);
}
.cs-home-hero .cs-shot {
	box-shadow: 0 1px 2px rgba(8, 23, 47, .08), 0 28px 56px -16px rgba(8, 23, 47, .38);
}

/* ---- 2. Live proof + trust strip (white) -------------------------------- */
.cs-home-proof {
	background: var(--bg-white);
	padding-block: clamp(56px, 6.5vw, 88px) clamp(64px, 7.5vw, 104px);
}
.cs-home-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 900px;
	margin: 0 auto;
}
.cs-home-stat {
	display: grid;
	justify-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px 20px;
	text-align: center;
}
.cs-home-stat + .cs-home-stat { border-left: 1px solid var(--border-default); }
.cs-home-stat strong {
	font-size: clamp(30px, 3vw, 40px);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -.025em;
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
}
.cs-home-stat span { font-size: 15px; line-height: 1.4; color: var(--text-secondary); }
.cs-home-stack { display: grid; gap: 36px; }
.cs-home-stats + .cs-home-stack {
	margin-top: clamp(40px, 4.5vw, 60px);
	padding-top: clamp(40px, 4.5vw, 60px);
	border-top: 1px solid var(--border-default);
}
.cs-home-stack__group { display: grid; gap: 16px; }
.cs-home-stack__group .cs-kicker { margin: 0; }
.cs-home-stack__names { list-style: none; margin: 0; padding: 0; }

/* ---- Shared: split section head (heading left, lead right) -------------- */
.cs-home-split-head {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 20px clamp(32px, 6vw, 96px);
	align-items: start;
	margin-bottom: clamp(40px, 5vw, 64px);
}
.cs-home-split-head .cs-lead { max-width: 64ch; }

/* ---- 3. $113 vs $49 (very light blue-gray) ------------------------------ */
/* Left: the typical stack in muted gray. Right: CompleteStatus, white, blue
   border, $49 in blue, green checks for what is included. One row grid
   (subgrid) keeps each vendor line level with its checked counterpart. */
.cs-home-math__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: auto repeat(var(--cs-rows, 5), auto) auto;
	column-gap: clamp(20px, 2.4vw, 32px);
}
.cs-home-math__col {
	grid-row: 1 / -1;
	display: grid;
	grid-template-rows: subgrid;
	padding: clamp(24px, 2.6vw, 36px);
	border-radius: var(--radius-card-lg);
	border: 1px solid var(--border-strong);
}
.cs-home-math__rows {
	grid-row: 2 / -2;
	display: grid;
	grid-template-rows: subgrid;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cs-home-math__line {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 4.75rem;
	gap: 16px;
	align-items: center;
	padding-block: 14px;
	border-top: 1px solid var(--border-default);
	font-size: 15px;
	line-height: 1.45;
}
.cs-home-math__line--head {
	align-items: end;
	padding-block: 0 14px;
	border-top: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--text-muted-aa);
}
.cs-home-math__line--total {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px 20px;
	border-top: 1px solid var(--border-strong);
	padding-block: 20px 0;
}
.cs-home-math__line--total .cs-home-math__tool:empty { display: none; }
.cs-home-math__price { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-home-math__price small { font-size: 12px; font-weight: 500; margin-left: 1px; }

/* Left — the stack: muted, flat, no elevation */
.cs-home-math__col--stack {
	background: rgba(255, 255, 255, .5);
	color: var(--text-secondary);
}
.cs-home-math__col--stack .cs-home-math__what { font-weight: 500; color: #44526A; }
.cs-home-math__col--stack .cs-home-math__tool { color: var(--text-secondary); font-size: 14px; }
.cs-home-math__col--stack .cs-home-math__price { font-weight: 600; color: var(--text-secondary); }
.cs-home-math__col--stack .cs-home-math__line--head .cs-home-math__tool { font-size: 12px; color: var(--text-muted-aa); }
.cs-home-math__col--stack .cs-home-math__line--total .cs-home-math__what { font-weight: 600; color: #44526A; }
.cs-home-math__col--stack .cs-home-math__line--total .cs-home-math__price {
	font-size: clamp(26px, 2.4vw, 32px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--text-secondary);
}
.cs-home-math__col--stack .cs-home-math__line--total small { font-size: 14px; }

/* Right — CompleteStatus: white, 2px blue edge (1px border + 1px ring keeps
   the box the same size as the left panel, so the rows stay level) */
.cs-home-math__col--us {
	background: var(--bg-white);
	border-color: var(--action-primary);
	box-shadow: 0 0 0 1px var(--action-primary), 0 0 0 6px rgba(7, 135, 227, .08), 0 16px 40px -12px rgba(7, 135, 227, .22);
	color: var(--text-primary);
}
.cs-home-math__us-head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding-bottom: 14px;
	align-self: end;
	font-size: 15px;
	line-height: 1.45;
	color: var(--text-secondary);
}
.cs-home-math__us-head strong { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.cs-home-math__mark { flex: 0 0 auto; display: inline-flex; padding-bottom: 3px; }
.cs-home-math__inc .cs-home-math__line {
	display: flex;
	gap: 12px;
	font-weight: 500;
	color: var(--text-primary);
}
.cs-home-math__inc .cs-home-math__line::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: var(--cs-check-green) center / 18px no-repeat;
}
.cs-home-math__col--us .cs-home-math__line--total {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 20px;
	border-top-color: var(--border-default);
}
.cs-home-math__us-price {
	margin: 0;
	font-size: clamp(40px, 4vw, 52px);
	line-height: 1;
	font-weight: 800;
	letter-spacing: -.035em;
	color: var(--link);
	font-variant-numeric: tabular-nums;
}
.cs-home-math__us-price small { font-size: 16px; font-weight: 600; letter-spacing: 0; margin-left: 2px; }
.cs-home-math__note {
	margin: 20px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-secondary);     /* 5.7:1 on the blue-gray ground (muted-aa is only 4.5) */
}

/* ---- 4. Core capabilities (white) --------------------------------------- */
/* No boxes: a hairline above each capability, an icon, the title, the text.
   The differentiator ("The gap") is marked by a blue rule, not a colour. */
.cs-home-caps__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(40px, 4.4vw, 60px) clamp(28px, 3.6vw, 52px);
}
.cs-home-cap {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding-top: 28px;
	border-top: 1px solid var(--border-strong);
	color: var(--text-primary);
	text-decoration: none;
}
.cs-home-cap.is-key { border-top: 2px solid var(--action-primary); padding-top: 27px; }
.cs-home-cap__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}
.cs-home-cap__badge { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.cs-home-cap .cs-card-title { transition: color var(--dur) var(--ease); }
.cs-home-cap .cs-card-text { flex: 1 1 auto; }
.cs-home-cap .cs-link-arrow { margin-top: 6px; font-size: 15px; }
/* Drawn arrow: the self-hosted Inter subset has no U+2192, so the text "→"
   falls back to whatever the OS has (or nothing). */
.cs-home-cap .cs-link-arrow::after {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--cs-home-arrow) center / 14px no-repeat;
	        mask: var(--cs-home-arrow) center / 14px no-repeat;
}
.cs-home-cap:hover,
.cs-home-cap:focus-visible { color: var(--text-primary); }
.cs-home-cap:hover .cs-card-title,
.cs-home-cap:focus-visible .cs-card-title { color: var(--link); }
.cs-home-cap:hover .cs-link-arrow::after,
.cs-home-cap:focus-visible .cs-link-arrow::after { transform: translateX(3px); }

/* ---- 5. Security remediation (navy split) ------------------------------- */
.cs-home-sec { background: linear-gradient(180deg, var(--brand-navy) 0%, #0A1426 100%); }
.cs-home-sec__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	gap: clamp(40px, 5.5vw, 88px);
	align-items: center;
}
.cs-home-sec__copy .cs-eyebrow { margin-bottom: 18px; }
.cs-home-sec__text { margin: 22px 0 0; max-width: 60ch; }
.cs-home-sec__text strong { color: var(--text-on-dark); font-weight: 600; }
.cs-home-sec__checks { margin: 28px 0 36px; }

/* The finding, as the product shows it */
.cs-home-finding {
	background: rgba(255, 255, 255, .035);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--radius-card-lg);
	padding: clamp(20px, 2.4vw, 28px);
	box-shadow: 0 24px 64px -24px rgba(0, 0, 0, .5);
}
.cs-home-finding__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.cs-home-finding__label { margin: 0; font-size: 13px; color: var(--text-on-dark-muted); }
.cs-home-finding__target {
	margin: 4px 0 0;
	font-family: var(--font-mono);
	font-size: 15px;
	color: var(--text-on-dark);
	overflow-wrap: anywhere;
}
.cs-home-finding__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--text-on-dark);
}
/* Severity on a dark ground: same hue, a light text step (6.9:1) */
.cs-home-finding .cs-sev--high { background: rgba(232, 61, 91, .18); color: #FF94A8; }
.cs-home-finding__why { margin: 10px 0 22px; font-size: 14px; line-height: 1.6; color: var(--text-on-dark-muted); }
.cs-home-fix__label {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--text-on-dark-muted);
}
.cs-home-fix .cs-code { box-shadow: none; }
.cs-home-fix .cs-code__bar[hidden] { display: none; }
.cs-home-fix .cs-code__tab { min-height: 42px; }
.cs-home-fix .cs-copy { position: relative; min-height: 30px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.cs-home-fix .cs-copy.is-copied { color: #4ADE80; border-color: rgba(74, 222, 128, .45); }   /* success: copied */
.cs-home-fix .cs-copy[hidden] { display: none; }
.cs-home-fix .cs-copy i { font-size: 14px; color: inherit; }
/* A one-line config wraps instead of scrolling: it is read, then pasted. */
.cs-home-fix pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.cs-home-fix__panel:focus-visible { outline-offset: -2px; }

/* ---- 6. Product screenshots (white) ------------------------------------- */
/* The flagship screen large, the two supporting ones stacked beside it. */
.cs-home-shots__grid {
	display: grid;
	grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr);
	gap: clamp(24px, 2.6vw, 36px);
	align-items: start;
}
.cs-home-shot--main { grid-row: 1 / span 2; }
.cs-home-shot__caption {
	margin: 14px 0 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--text-primary);
	letter-spacing: 0;
}
.cs-home-shot--main .cs-home-shot__caption { font-size: 17px; margin-top: 18px; }

/* ---- 7. Competitor gaps (pale gray; neutral, honest) -------------------- */
.cs-home-inline-link { font-weight: 600; color: var(--link); }
.cs-home-gaps__card {
	max-width: 1120px;
	margin-inline: auto;
	background: var(--bg-white);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}
.cs-home-gaps__table { margin: 0; table-layout: fixed; }
.cs-home-gaps__table th,
.cs-home-gaps__table td { padding: 18px clamp(16px, 2vw, 28px); width: 50%; }
.cs-home-gaps__table thead th { padding-block: 14px; }
.cs-home-gaps__table td { line-height: 1.55; }
.cs-home-gaps__table td .cs-no { color: var(--text-secondary); }
.cs-home-gaps__table td.is-us { color: var(--text-primary); font-weight: 500; }
.cs-home-gaps__table tbody tr:last-child td { border-bottom: 0; }
.cs-home-gaps__table thead .is-us { border-top: 0; box-shadow: inset 0 2px 0 var(--action-primary); }

/* ---- 8. Free tools (white) ---------------------------------------------- */
.cs-home-tools__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
}
.cs-home-tools__copy .cs-eyebrow { margin-bottom: 16px; }
.cs-home-tools__copy .cs-lead { margin: 20px 0 32px; }
.cs-home-tools__list {
	list-style: none;
	margin: 0;
	padding: 6px;
	background: var(--bg-white);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}
.cs-home-tools__list li + li { border-top: 1px solid var(--row-separator); }
.cs-home-tool {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 68px;
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary);
	text-decoration: none;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cs-home-tool .cs-icon { width: 40px; height: 40px; }
.cs-home-tool .cs-icon i { font-size: 20px; }
.cs-home-tool__name { flex: 1 1 auto; min-width: 0; }
.cs-home-tool__go { flex: 0 0 auto; color: var(--text-muted); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.cs-home-tool:hover,
.cs-home-tool:focus-visible { background: var(--row-hover); color: var(--link); }
.cs-home-tool:hover .cs-home-tool__go,
.cs-home-tool:focus-visible .cs-home-tool__go { color: var(--link); transform: translateX(3px); }

/* ---- 9. Pricing (light) ------------------------------------------------- */
.cs-home-pricing .cs-lead strong { color: var(--text-primary); font-weight: 600; }
.cs-home-pricing__note {
	max-width: 76ch;
	margin: 36px auto 0;
	text-align: center;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-muted-aa);
}
.cs-home-pricing__more { margin: 14px 0 0; text-align: center; }
.cs-home-pricing__link {
	font-size: 15px;
	font-weight: 600;
	color: var(--link);
	text-decoration: none;
}
.cs-home-pricing__link:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: .18em; }

/* ---- 10. FAQ (white) ---------------------------------------------------- */
/* Heading left, questions right; hairlines, not boxes. */
.cs-home-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 24px clamp(32px, 6vw, 96px);
	align-items: start;
}
.cs-home-faq__head { position: sticky; top: calc(var(--cs-nav-h) + 32px); }
.cs-home-faq .accordion {
	--bs-accordion-bg: transparent;
	--bs-accordion-btn-bg: transparent;
	--bs-accordion-active-bg: transparent;
	--bs-accordion-active-color: var(--text-primary);
	--bs-accordion-btn-color: var(--text-primary);
	--bs-accordion-border-width: 0;
	--bs-accordion-border-radius: 0;
	--bs-accordion-inner-border-radius: 0;
	--bs-accordion-btn-padding-x: 0;
	--bs-accordion-btn-padding-y: 22px;
	--bs-accordion-body-padding-x: 0;
	--bs-accordion-body-padding-y: 0;
	--bs-accordion-btn-icon-width: 16px;
	--bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23536174' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%230675CE' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cs-home-faq .accordion-item {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--border-default);
	border-radius: 0;
}
.cs-home-faq .accordion-item:first-child { border-top: 1px solid var(--border-default); }
.cs-home-faq .accordion-button {
	gap: 20px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--text-primary);
	background: transparent;
	box-shadow: none;
}
.cs-home-faq .accordion-button:not(.collapsed) { box-shadow: none; color: var(--text-primary); }
.cs-home-faq .accordion-button:hover { color: var(--link); }
.cs-home-faq .accordion-body {
	max-width: 70ch;
	padding: 0 36px 24px 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--text-secondary);
}

/* ---- 11. Final CTA (navy) ----------------------------------------------- */
.cs-home-cta { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.cs-home-cta .cs-lead { max-width: 60ch; margin: 20px auto 0; }
.cs-home-cta .cs-actions { justify-content: center; margin-top: 36px; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.cs-home-caps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* $113 panel rows: tool under the label, price on the right (the
	   two-panel row grid gets too narrow for three columns) */
	.cs-home-math__col--stack .cs-home-math__line {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "what price" "tool price";
		gap: 2px 16px;
	}
	.cs-home-math__col--stack .cs-home-math__what { grid-area: what; }
	.cs-home-math__col--stack .cs-home-math__tool { grid-area: tool; }
	.cs-home-math__col--stack .cs-home-math__price { grid-area: price; }
	/* the "Typical tool" header stays for screen readers only */
	.cs-home-math__col--stack .cs-home-math__line--head .cs-home-math__tool {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.cs-home-math__col--stack .cs-home-math__line--head { grid-template-areas: "what price"; }
	.cs-home-math__col--stack .cs-home-math__line--total { grid-template-areas: "what price"; }
}
@media (max-width: 991.98px) {
	.cs-home-split-head,
	.cs-home-sec__grid,
	.cs-home-tools__grid,
	.cs-home-faq__grid { grid-template-columns: minmax(0, 1fr); }
	.cs-home-faq__head { position: static; }

	/* $113 vs $49: the panels stack; no shared rows to keep level */
	.cs-home-math__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 20px; }
	.cs-home-math__col { grid-row: auto; display: block; }
	.cs-home-math__rows { display: block; }

	.cs-home-shots__grid { grid-template-columns: minmax(0, 1fr); }
	.cs-home-shot--main { grid-row: auto; }
	.cs-home-shot--main .cs-home-shot__caption { font-size: 15px; margin-top: 14px; }
}
@media (max-width: 767.98px) {
	.cs-home-caps__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }

	/* Gaps table → stacked pairs: the gap, then our answer on its blue tint */
	.cs-home-gaps__table,
	.cs-home-gaps__table tbody,
	.cs-home-gaps__table tr,
	.cs-home-gaps__table td { display: block; width: 100%; }
	.cs-home-gaps__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.cs-home-gaps__table td { padding: 16px 18px; border-bottom: 0; }
	.cs-home-gaps__table td.is-us { padding-top: 14px; }
	.cs-home-gaps__table tbody tr + tr { border-top: 1px solid var(--border-default); }
}
@media (max-width: 575.98px) {
	/* Hero: buttons full width, 48px touch targets */
	.cs-home-hero__actions { width: 100%; }
	.cs-home-hero__actions .btn { flex: 1 1 100%; min-height: 48px; justify-content: center; }
	.cs-home-hero__trust { gap: 8px 18px; }

	/* Live stats: one line each, number then label */
	.cs-home-stats { grid-template-columns: minmax(0, 1fr); max-width: 320px; }
	.cs-home-stat {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: baseline;
		justify-items: start;
		gap: 12px;
		padding: 12px 0;
		text-align: left;
	}
	.cs-home-stat + .cs-home-stat { border-left: 0; border-top: 1px solid var(--border-default); }
	.cs-home-stat strong { font-size: 26px; min-width: 4.2ch; }
	.cs-home-stack__names { gap: 8px 22px; font-size: 16px; }

	.cs-home-math__col--us .cs-home-math__line--total .btn { flex: 1 1 100%; justify-content: center; }

	.cs-home-sec__copy .cs-actions .btn,
	.cs-home-tools__copy .cs-actions .btn,
	.cs-home-cta .cs-actions .btn { flex: 1 1 100%; justify-content: center; }

	/* Fix panel: four tabs + an icon-only copy button fit 320px */
	.cs-home-finding { padding: 18px 16px; }
	.cs-home-fix .cs-code__bar { padding: 0 6px 0 4px; gap: 6px; }
	.cs-home-fix .cs-code__tab { padding: 10px 9px; }
	.cs-home-fix [data-cs-copy-label] {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.cs-home-fix .cs-copy { min-width: 36px; min-height: 36px; justify-content: center; padding: 5px 8px; }
	.cs-home-fix pre { padding: 14px; }

	.cs-home-faq .accordion { --bs-accordion-btn-padding-y: 18px; }
	.cs-home-faq .accordion-button { font-size: 16px; }
	.cs-home-faq .accordion-body { padding-right: 0; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.cs-home-cap:hover .cs-link-arrow::after,
	.cs-home-tool:hover .cs-home-tool__go { transform: none; }
}


/* ###########################################################################
   Product pages: features, pricing, compare, about, contact
   ########################################################################### */

/* ===========================================================================
   CompleteStatus — product pages layer (site-pages.css)
   ---------------------------------------------------------------------------
   Features (hub + six pillar pages), pricing (+ the pricing-cards partial the
   landing also includes), compare (hub + each comparison), about, contact
   and the bot page. Composes brand.css tokens and site.css primitives; only
   what those don't already cover lives here. Prefix: cs-.
   ========================================================================= */

/* ---- Shared: split hero head ------------------------------------------- */
/* Eyebrow + H1 on the left, the description on the right, CTAs under the
   H1. Phones stack in reading order: eyebrow, H1, description, CTAs. */
.cs-split-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "title" "lead" "cta";
	gap: 20px;
}
.cs-split-head__title { grid-area: title; display: grid; gap: 18px; justify-items: start; }
.cs-split-head__lead { grid-area: lead; max-width: 60ch; }
.cs-split-head__cta { grid-area: cta; margin-top: 8px; }
@media (min-width: 992px) {
	.cs-split-head {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		grid-template-areas: "title lead" "cta lead";
		column-gap: clamp(40px, 5vw, 88px);
		row-gap: 32px;
		align-items: end;
	}
	.cs-split-head__cta { margin-top: 0; }
}

/* ---- Shared: simple page header (compare, about, contact, bot) ---------- */
.cs-pagehead {
	background: var(--bg-page);
	border-bottom: 1px solid var(--border-default);
	padding-block: clamp(44px, 6vw, 80px) clamp(36px, 4.5vw, 56px);
}
.cs-pagehead__inner { display: grid; gap: 16px; justify-items: start; max-width: 860px; }
.cs-pagehead--narrow .cs-pagehead__inner { max-width: 760px; margin-inline: auto; }
.cs-pagehead .cs-lead { max-width: 64ch; }
.cs-pagehead .cs-crumbs { margin: 0; }
.cs-pagehead code { font-size: .9em; padding: .1em .4em; }
.cs-narrow { max-width: 760px; margin-inline: auto; }

/* ---- Shared: final call to action (navy band above the navy footer) ----- */
.cs-final-cta { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.cs-final-cta .cs-h2 { max-width: 24ch; margin-inline: auto; }
.cs-final-cta .cs-lead { max-width: 60ch; margin: 18px auto 0; }
.cs-final-cta .cs-actions { justify-content: center; margin-top: 32px; }
.cs-final-cta .cs-final-cta__back:not(.btn) {
	display: inline-block;
	margin-top: 28px;
	font-size: 15px;
	font-weight: 500;
	color: var(--text-on-dark-muted);
	text-decoration: none;
}
.cs-final-cta .cs-final-cta__back:not(.btn):hover { color: var(--text-on-dark); text-decoration: underline; }

/* Equal-height CTA pairs (primary + ghost) in heroes and final CTAs. */
.cs-split-head__cta .btn.cs-btn-lg,
.cs-final-cta .btn.cs-btn-lg { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; }

/* ---- Shared: FAQ accordion (pricing, compare) --------------------------- */
/* A ruled list, not a stack of boxes. Markup and data-bs-* hooks unchanged. */
.cs-faq { max-width: 860px; margin-inline: auto; }
.cs-faq .accordion-item {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--border-default);
	border-radius: 0 !important;
}
.cs-faq .accordion-item:first-child { border-top: 1px solid var(--border-default); }
.cs-faq .accordion-header { margin: 0; }
.cs-faq .accordion-button,
.cs-faq .accordion-button:not(.collapsed) {
	padding: 20px 4px;
	gap: 16px;
	background: transparent;
	color: var(--text-primary);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	box-shadow: none;
	border-radius: 0 !important;
}
.cs-faq .accordion-button:hover { color: var(--link); }
.cs-faq .accordion-body {
	padding: 0 4px 24px;
	max-width: 72ch;
	color: var(--text-secondary);
	font-size: 16px;
	line-height: 1.65;
}

/* ---- Shared: compact heading for secondary sections --------------------- */
.cs-title-md {
	font-size: clamp(22px, 2.2vw, 28px);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0;
}

/* Small inline check / dash marks (tables): green = included, gray = not. */
.cs-mark {
	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	background: var(--cs-check-green) center / 20px no-repeat;
}
.cs-mark--no { background-image: var(--cs-dash-gray); }

/* ===========================================================================
   Feature pages
   ========================================================================= */
/* Hero: navy; the real product screenshot sits at the bottom and steps down
   onto a white floor, so the shot bridges hero and content. */
.cs-hero.cs-feature-hero { padding-bottom: 0; }
.cs-feature-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: clamp(56px, 13vw, 220px);
	background: var(--bg-white);
}
.cs-feature-eyebrow { flex-wrap: wrap; gap: 8px 10px; }
.cs-feature-eyebrow i { font-size: 18px; color: var(--brand-blue-bright); }
.cs-feature-eyebrow .cs-badge { font-size: 11px; letter-spacing: .06em; padding: 3px 9px; }
.cs-feature-hero__shot {
	position: relative;
	isolation: isolate;
	margin-top: clamp(40px, 5.5vw, 72px);
}
.cs-feature-hero__shot::before {          /* very subtle glow, kept off the white floor */
	content: "";
	position: absolute;
	inset: -6% -5% 35%;
	z-index: -1;
	background: radial-gradient(closest-side, rgba(7, 135, 227, .22), rgba(7, 135, 227, 0));
	filter: blur(8px);
	pointer-events: none;
}
.cs-feature-hero .cs-shot {
	border-color: rgba(170, 180, 194, .28);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 18px 48px rgba(8, 23, 47, .22);
}
@media (max-width: 575.98px) {
	/* Phones: show the shot larger and let it run off the right edge (the
	   hero clips it) rather than shrinking a 1440px screen to 360px. */
	.cs-feature-hero__shot { margin-right: calc(-1 * var(--bs-gutter-x, 1.5rem) * .5); }
	.cs-feature-hero__shot .cs-shot { width: 150%; max-width: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }
}

/* What's included: intro on the left (sticky on wide screens), a ruled
   check list on the right. */
.cs-feature-included { display: grid; gap: 32px; }
.cs-feature-included__intro { display: grid; gap: 16px; justify-items: start; align-content: start; }
.cs-feature-included__intro .cs-body { max-width: 46ch; margin: 0; }
.cs-feature-included__intro .btn { margin-top: 8px; }
@media (min-width: 992px) {
	.cs-feature-included { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); }
	.cs-feature-included__intro { position: sticky; top: calc(var(--cs-nav-h) + 32px); }
}
.cs-feature-list { gap: 0; }
.cs-feature-list li {
	padding: 16px 0 16px 34px;
	border-bottom: 1px solid var(--row-separator);
	font-size: 16px;
	line-height: 1.55;
}
.cs-feature-list li:first-child { padding-top: 4px; }
.cs-feature-list li:last-child { border-bottom: 0; }
.cs-feature-list li::before { top: calc(16px + .2em); width: 20px; height: 20px; background-size: 20px; }
.cs-feature-list li:first-child::before { top: calc(4px + .2em); }

/* How it works: numbered steps joined by a hairline, no boxes. */
.cs-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 28px;
	position: relative;
}
.cs-step { position: relative; display: grid; gap: 8px; align-content: start; padding-left: 60px; }
.cs-step__num {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--bg-white);
	border: 1px solid var(--border-strong);
	color: var(--link);
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	z-index: 1;
}
.cs-step__title { font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--text-primary); padding-top: 8px; }
.cs-step__text { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.cs-step:not(:last-child)::after {        /* phone: vertical rail */
	content: "";
	position: absolute;
	left: 20px;
	top: 40px;
	bottom: -28px;
	border-left: 1px solid var(--border-strong);
}
@media (min-width: 768px) {
	.cs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 40px; }
	.cs-step:not(:last-child)::after { display: none; }
}
@media (min-width: 1200px) {
	.cs-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
	.cs-step { padding-left: 0; padding-top: 60px; }
	.cs-step__title { padding-top: 0; }
	.cs-step:not(:last-child)::after {    /* desktop: horizontal rail */
		display: block;
		left: 48px;
		right: -24px;
		top: 20px;
		bottom: auto;
		border-left: 0;
		border-top: 1px solid var(--border-strong);
	}
}

/* Hub cards: 3 + 3 on wide screens */
.cs-feature-grid { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .cs-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cs-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-feature-card { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.cs-feature-card .cs-icon { margin-bottom: 8px; }
.cs-feature-card .cs-link-arrow { margin-top: auto; padding-top: 10px; }

/* ===========================================================================
   Pricing (light): page + the shared cards partial
   ========================================================================= */
.cs-section.cs-pricing-hero { padding-top: clamp(48px, 6vw, 80px); }
.cs-pricing-hero .cs-section-head { margin-bottom: clamp(28px, 3.5vw, 40px); }
.cs-pricing-hero .cs-lead { max-width: 64ch; }
.cs-pricing-em { color: var(--text-primary); font-weight: 600; }
.cs-pricing-caption { max-width: 72ch; margin: 28px auto 0; text-align: center; }

/* Billing period switch: a segmented control; the selected option is blue. */
.cs-billing { display: flex; justify-content: center; margin-bottom: clamp(36px, 4.5vw, 52px); }
.cs-billing__switch {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: var(--bg-white);
	border: 1px solid var(--border-strong);
	border-radius: 11px;
	box-shadow: var(--shadow-card);
}
.cs-billing__opt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 18px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--text-secondary);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cs-billing__opt:hover { color: var(--text-primary); background: var(--bg-page); }
.cs-billing__opt[aria-pressed="true"],
.cs-billing__opt[aria-pressed="true"]:hover { color: #FFFFFF; background: var(--action-fill); }
.cs-billing__save {
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--action-light);
	color: var(--link);
	font-size: 12px;
	font-weight: 600;
}
.cs-billing__opt[aria-pressed="true"] .cs-billing__save { background: #FFFFFF; color: var(--link); }
@media (max-width: 767.98px) { .cs-billing__opt { min-height: 44px; } }
@media (max-width: 575.98px) {
	.cs-billing__switch { width: 100%; }
	.cs-billing__opt { flex: 1 1 0; justify-content: center; padding: 0 10px; }
}

/* Plan cards. Rows (head / price / CTA / features) line up across the
   cards via subgrid where supported; otherwise each card is a flex column. */
.cs-plans {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}
@media (min-width: 768px) { .cs-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cs-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.cs-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 26px 28px;
	background: var(--bg-white);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	color: var(--text-primary);
}
@supports (grid-template-rows: subgrid) {
	.cs-plan { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}
.cs-plan--featured {
	border: 2px solid var(--action-primary);
	padding: 29px 25px 27px;
	box-shadow: 0 0 0 4px rgba(7, 135, 227, .07), 0 10px 30px rgba(7, 135, 227, .10);
}
.cs-plan__badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 5px 12px;
	font-size: 12px;
	letter-spacing: .03em;
}
.cs-plan__badge.cs-badge--neutral { border: 1px solid var(--border-default); background: var(--bg-white); }
.cs-plan__name { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; margin: 0; color: var(--text-primary); }
.cs-plan__tagline { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin: 6px 0 0; }
.cs-plan__pricing { display: flex; flex-direction: column; margin-top: 24px; }
.cs-plan__figure { margin-bottom: 24px; }
.cs-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; min-height: 48px; }
.cs-plan__amount {
	display: inline-flex;
	align-items: flex-start;
	font-size: 46px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -.035em;
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
}
.cs-plan__cur { font-size: 24px; font-weight: 700; line-height: 1; margin: 4px 2px 0 0; letter-spacing: 0; }
.cs-plan__per { font-size: 15px; font-weight: 500; color: var(--text-muted-aa); }
.cs-plan__was {                            /* the monthly price, struck, in annual view */
	align-self: center;
	margin-right: 4px;
	font-size: 18px;
	font-weight: 600;
	color: var(--text-muted-aa);
	text-decoration-thickness: 1.5px;
}
.cs-plan__note { margin-top: 10px; min-height: 21px; font-size: 14px; line-height: 1.5; color: var(--text-muted-aa); }
.cs-plan__note .js-annual-note { color: var(--text-primary); font-weight: 600; }
.cs-plans:not([data-period="annual"]) .cs-when-annual,
.cs-plans[data-period="annual"] .cs-when-monthly { display: none; }
.cs-plan__cta { margin-top: auto; width: 100%; justify-content: center; min-height: 44px; display: inline-flex; align-items: center; }
.cs-plan__features { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border-default); }
.cs-plan__inherits {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted-aa);
}
.cs-plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.cs-plan__list li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.5; color: var(--text-primary); }
.cs-plan__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .12em;
	width: 18px;
	height: 18px;
	background: var(--cs-check-green) center / 18px no-repeat;
}

/* Enterprise: custom-priced band under the four cards */
.cs-enterprise {
	margin-top: 24px;
	padding: clamp(24px, 3.2vw, 40px);
	background: var(--bg-white);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	color: var(--text-primary);
}
.cs-enterprise__grid { display: grid; gap: 28px; }
@media (min-width: 992px) {
	.cs-enterprise__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
}
.cs-enterprise__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.cs-enterprise__name { font-size: 22px; font-weight: 700; letter-spacing: -.015em; margin: 0; }
.cs-enterprise__tagline { margin: 10px 0 22px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.cs-enterprise__list { display: grid; gap: 11px 28px; }
@media (min-width: 768px) { .cs-enterprise__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-enterprise__quote {
	display: grid;
	justify-items: center;
	gap: 8px;
	padding: 28px 24px;
	text-align: center;
	background: var(--bg-page);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card-sm);
}
.cs-enterprise__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted-aa); }
.cs-enterprise__price { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--text-primary); }
.cs-enterprise__small { font-size: 13px; line-height: 1.5; color: var(--text-muted-aa); max-width: 40ch; margin: 0; }
.cs-enterprise__quote .btn { margin: 10px 0 4px; min-width: 180px; justify-content: center; }
.cs-enterprise__table { margin-top: 32px; }
.cs-enterprise__table table { min-width: 520px; font-size: 14px; }
.cs-enterprise__table th,
.cs-enterprise__table td { padding: 12px 14px; vertical-align: middle; }
.cs-enterprise__table tbody th { font-weight: 500; color: var(--text-secondary); }
.cs-enterprise__table .cs-col-c { text-align: center; }
.cs-enterprise__table td.cs-col-c { color: var(--text-secondary); }
.cs-enterprise__table td.is-ent { color: var(--text-primary); font-weight: 600; }
.cs-enterprise__table .cs-yes,
.cs-enterprise__table .cs-no { justify-content: center; }
.cs-enterprise__table tbody tr:last-child > * { border-bottom: 0; }

/* Security & privacy strip (pricing) */
.cs-assurances { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
@media (min-width: 768px) { .cs-assurances { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cs-assurances { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }
.cs-assurances li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.cs-assurances__title { display: block; font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.cs-assurances__text { display: block; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }

/* Feature-by-tier table (pricing) */
.cs-plan-table {
	background: var(--bg-white);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}
/* position: relative makes the scroller the containing block of the
   .visually-hidden "Included" spans, so they can't widen the page on phones. */
.cs-plan-table .cs-table-scroll,
.cs-enterprise__table { position: relative; }
.cs-plan-table table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.cs-plan-table th,
.cs-plan-table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--row-separator);
	text-align: center;
	vertical-align: middle;
	background: var(--bg-white);
}
.cs-plan-table thead th { padding-top: 22px; padding-bottom: 18px; border-bottom-color: var(--border-default); vertical-align: bottom; }
.cs-plan-table thead th:first-child {
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted-aa);
}
.cs-plan-table tbody th {
	width: 30%;
	text-align: left;
	font-weight: 500;
	color: var(--text-primary);
	padding-left: 24px;
}
.cs-plan-table thead th:first-child { padding-left: 24px; }
.cs-plan-table__plan { display: block; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.cs-plan-table__price { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--text-muted-aa); }
.cs-plan-table__value { font-weight: 600; color: var(--text-primary); }
.cs-plan-table .is-featured { background: #F5FAFE; }
.cs-plan-table thead .is-featured { background: var(--action-light); box-shadow: inset 0 3px 0 var(--action-primary); }
.cs-plan-table thead .is-featured .cs-plan-table__price { color: var(--link); }
.cs-plan-table tbody tr:hover > * { background: var(--row-hover); }
.cs-plan-table tbody tr:hover > .is-featured { background: #EDF6FD; }
.cs-plan-table .cs-plan-table__ctas > * { border-bottom: 0; padding-top: 20px; padding-bottom: 22px; }
.cs-plan-table .cs-plan-table__ctas:hover > * { background: var(--bg-white); }
.cs-plan-table .cs-plan-table__ctas:hover > .is-featured { background: #F5FAFE; }
.cs-plan-table .btn { white-space: nowrap; }
@media (max-width: 767.98px) {
	/* Phones: no sideways scrolling. The plan names form a sticky 4-column
	   header; each row is its label on one line and the four values in
	   columns under it. Explicit ARIA roles keep the table semantics. */
	.cs-plan-table { overflow: visible; }
	.cs-plan-table .cs-table-scroll { overflow: visible; }
	.cs-plan-table table,
	.cs-plan-table thead,
	.cs-plan-table tbody,
	.cs-plan-table th,
	.cs-plan-table td { display: block; }
	.cs-plan-table table { min-width: 0; font-size: 14px; }
	.cs-plan-table tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cs-plan-table thead {
		position: sticky;
		top: var(--cs-nav-h);
		z-index: 2;
		border-radius: var(--radius-card) var(--radius-card) 0 0;
		box-shadow: 0 1px 0 var(--border-default), 0 6px 12px -8px rgba(15, 23, 42, .12);
	}
	.cs-plan-table thead th { padding: 14px 4px 12px; border-bottom: 0; }
	.cs-plan-table thead th:first-child { display: none; }
	.cs-plan-table thead th:nth-child(2) { border-top-left-radius: var(--radius-card); }
	.cs-plan-table thead th:last-child { border-top-right-radius: var(--radius-card); }
	.cs-plan-table__plan { font-size: 14px; }
	.cs-plan-table__price { font-size: 12px; }
	.cs-plan-table tbody th {
		grid-column: 1 / -1;
		width: auto;
		padding: 14px 16px 2px;
		border-bottom: 0;
		font-size: 14px;
		font-weight: 600;
	}
	.cs-plan-table tbody td { padding: 6px 4px 14px; font-size: 13px; line-height: 1.4; }
	.cs-plan-table tbody .is-featured,
	.cs-plan-table tbody tr:hover > .is-featured { background: var(--bg-white); }
	.cs-plan-table tbody tr:hover > * { background: var(--bg-white); }
	.cs-plan-table .cs-plan-table__ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 16px; }
	.cs-plan-table .cs-plan-table__ctas > td { padding: 0; background: transparent; }
	.cs-plan-table .cs-plan-table__ctas > td:first-child { display: none; }
	.cs-plan-table .cs-plan-table__ctas .btn { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

	.cs-enterprise__table table { min-width: 0; }
	.cs-enterprise__table th,
	.cs-enterprise__table td { padding: 10px 8px; }
	.cs-enterprise__table th:first-child { padding-left: 0; }

	.cs-split-head__cta .btn,
	.cs-final-cta .cs-actions .btn { flex: 1 1 100%; }
	.cs-final-cta .cs-actions { max-width: 420px; margin-inline: auto; }
}

/* ===========================================================================
   Compare (neutral and honest: CompleteStatus blue, the competitor gray,
   included = green check + text, not included = gray dash + text)
   ========================================================================= */
.cs-compare-card { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.cs-compare-card .cs-badge { align-self: flex-start; }
.cs-compare-card .cs-card-text { color: var(--text-secondary); }
.cs-compare-card .cs-link-arrow { margin-top: auto; padding-top: 10px; }

.cs-vs-intro { max-width: 70ch; }
.cs-vs-note { margin: 0; }

.cs-vs {
	background: var(--bg-white);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}
.cs-vs__head { padding: 20px 24px; border-bottom: 1px solid var(--border-default); }
.cs-vs__head h2 { font-size: 19px; font-weight: 700; line-height: 1.35; margin: 0; }
.cs-vs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.5; }
.cs-vs-table th,
.cs-vs-table td { padding: 15px 20px; border-bottom: 1px solid var(--row-separator); text-align: left; vertical-align: top; }
.cs-vs-table thead th {
	padding-top: 12px;
	padding-bottom: 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--text-muted-aa);
	background: var(--bg-page);
	border-bottom-color: var(--border-default);
}
.cs-vs-table thead th.is-us { color: var(--link); background: var(--action-light); box-shadow: inset 0 3px 0 var(--action-primary); }
.cs-vs-table tbody th { width: 30%; font-weight: 600; color: var(--text-primary); }
.cs-vs-table td { width: 35%; color: var(--text-secondary); }
.cs-vs-table td.is-us { background: #F5FAFE; color: var(--text-primary); }
.cs-vs-table tbody tr:last-child > * { border-bottom: 0; }
.cs-vs-table .cs-yes::before,
.cs-vs-table .cs-no::before { margin-top: .15em; }
.cs-vs-na { color: var(--text-muted-aa); }
@media (max-width: 767.98px) {
	/* Phones: each row becomes a small block — feature, then both answers,
	   each labelled — instead of a sideways-scrolling three-column table.
	   The explicit ARIA roles keep table semantics for screen readers. */
	.cs-vs-table,
	.cs-vs-table tbody,
	.cs-vs-table tr,
	.cs-vs-table th,
	.cs-vs-table td { display: block; width: auto; }
	.cs-vs-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.cs-vs-table tbody tr { padding: 16px 16px 14px; border-bottom: 1px solid var(--row-separator); }
	.cs-vs-table tbody tr:last-child { border-bottom: 0; }
	.cs-vs-table tbody th,
	.cs-vs-table td { padding: 0; border: 0; }
	.cs-vs-table tbody th { width: auto; font-size: 16px; margin-bottom: 8px; }
	.cs-vs-table td { padding: 8px 10px; border-radius: 8px; }
	.cs-vs-table td + td { margin-top: 4px; }
	.cs-vs-table td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .05em;
		text-transform: uppercase;
		color: var(--text-muted-aa);
	}
	.cs-vs-table td.is-us::before { color: var(--link); }
}

.cs-vs-wedge { display: grid; gap: 12px; align-content: start; }
.cs-vs-wedge .cs-icon { margin-bottom: 4px; }
.cs-faq.cs-faq--start { margin-inline: 0; }

.cs-vs-choice { display: grid; gap: 20px; }
@media (min-width: 768px) { .cs-vs-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-vs-choice .cs-card { display: grid; gap: 10px; align-content: start; }
.cs-vs-choice .cs-card--us { border-color: #B9DDF7; box-shadow: inset 0 3px 0 var(--action-primary), var(--shadow-card); }
.cs-vs-choice .cs-card--us .cs-card-title { color: var(--link); }
.cs-vs-strength { margin-top: 20px; }
.cs-vs-strength strong { color: var(--text-primary); font-weight: 600; }

.cs-vs-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 992px) { .cs-vs-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cs-vs-plan {
	display: grid;
	gap: 4px;
	justify-items: center;
	padding: 22px 16px;
	text-align: center;
	background: var(--bg-white);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card-sm);
}
.cs-vs-plan--featured { border: 2px solid var(--action-primary); padding: 21px 15px; box-shadow: 0 0 0 4px rgba(7, 135, 227, .07); }
.cs-vs-plan__name { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted-aa); }
.cs-vs-plan__price { font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cs-vs-plan__price small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--text-muted-aa); }
.cs-vs-plan__meta { font-size: 13px; color: var(--text-muted-aa); }

.cs-vs-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cs-vs-links li { border-bottom: 1px solid var(--border-default); }
.cs-vs-links li:first-child { border-top: 1px solid var(--border-default); }
.cs-vs-links a { display: flex; padding: 14px 0; font-size: 16px; }

/* Hub: flat pricing strip */
.cs-vs-band { text-align: center; }
.cs-vs-band .cs-vs-plans { max-width: 880px; margin: 28px auto 32px; }

/* ===========================================================================
   About / contact / bot — simple, content-first, one reading column
   ========================================================================= */
.cs-beliefs { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 768px) { .cs-beliefs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cs-beliefs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.cs-beliefs li { display: grid; gap: 12px; align-content: start; }
.cs-beliefs .cs-icon { margin-bottom: 4px; }

.cs-prose .cs-prose-note { font-size: 15px; color: var(--text-muted-aa); }

.cs-contact { max-width: 760px; margin-inline: auto; }
.cs-contact .cs-card { padding: clamp(24px, 3.5vw, 40px); }
.cs-contact .alert { margin-bottom: 24px; }
.cs-contact__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
.cs-contact__foot .cs-small a,
.cs-contact__status a { font-weight: 600; }
.cs-contact__status { margin: 24px 0 0; text-align: center; }
.cs-contact .form-label { font-size: 15px; margin-bottom: 8px; }
.cs-contact .form-control { font-size: 16px; padding: 10px 14px; min-height: 46px; }
.cs-contact textarea.form-control { min-height: 160px; }
@media (max-width: 575.98px) {
	.cs-contact__foot .btn { width: 100%; justify-content: center; }
}
.cs-contact__sent { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
.cs-contact__sent i { font-size: 22px; color: var(--status-success-text); margin-top: 1px; }
.cs-contact__sent strong { display: block; color: var(--text-primary); font-weight: 600; margin-bottom: 2px; }
.cs-contact__sent span { color: var(--text-secondary); }

/* One reading column: the first heading sits flush with the section top. */
.cs-prose.cs-narrow > :first-child { margin-top: 0; }
.cs-pagehead code { margin: 0 1px; }


/* ###########################################################################
   Free tools: hub + tool pages
   ########################################################################### */

/* ===========================================================================
   CompleteStatus — Free tools (site-tools.css)
   ---------------------------------------------------------------------------
   The /tools directory and every tool page (resources/views/tools/**).
   Composes the brand.css tokens and the site.css primitives (cs-card,
   cs-filter, cs-icon, cs-grade, cs-sev, cs-code, cs-callout …); everything
   new is prefixed cs-tool(s)-. No raw hex where a token exists.

   Page pattern (every tool):
     light header → tools strip (.cs-filter pills) → .cs-tool-hero (pale
     workspace ground: eyebrow, H1, lead, the form) → .cs-tool-work (results
     as white panels on the same ground) → .cs-tool-learn (white, the
     explainer) → .cs-tool-faqsec (FAQ + the navy CTA card) → navy footer.
   The hub (/tools) is the one view with a navy .cs-hero + dark header.

   Colour jobs: blue = action/interaction; results use green (pass), amber
   (warning), red (failure), purple (informational), always with a word or an
   icon next to the colour; grades use .cs-grade; copy-paste code is a dark
   #0D1117 panel.
   ========================================================================= */

/* ---- Shared ------------------------------------------------------------ */
.cs-tools-main { background: var(--bg-page); }
.cs-tool-wrap { max-width: 1120px; margin-inline: auto; }
.cs-tool-h2 {
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--text-primary);
	margin: 0;
}
.cs-tool-target {           /* the domain / URL a result is about: data, not a link */
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: .92em;
	letter-spacing: -.01em;
	color: var(--text-primary);
	overflow-wrap: anywhere;
}
.cs-sev--caps { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; padding: 3px 8px; }
.cs-sev--crit { background: var(--status-danger-fill); color: #FFFFFF; }
.cs-sev--neutral { background: var(--status-neutral-soft); color: #24324A; }
.cs-callout--info { border-left-color: var(--status-info); background: var(--status-info-soft); }

/* Inline code: Metronic's code:not([class*=language-]) (0,1,1) adds a 0 .5rem
   margin, a drop shadow and 1rem type to every <code>. In the tools, inline
   code is a quiet pale-blue-gray mono chip; inside dark panels it is bare. */
.cs-tools-main code:not([class*=language-]) {
	margin: 0;
	padding: .1em .4em;
	font-family: var(--font-mono);
	font-size: .875em;
	font-weight: 500;
	color: #1E2B42;
	background-color: var(--bg-subtle);
	border: 1px solid #E4EAF1;
	border-radius: 5px;
	box-shadow: none;
}
.cs-tools-main .cs-code code:not([class*=language-]),
.cs-tools-main .wt-dnsp-tooltip code:not([class*=language-]) {
	padding: 0;
	font-size: inherit;
	font-weight: 400;
	color: inherit;
	background: none;
	border: 0;
}

/* Grade chip sizes (colour comes from .cs-grade--a … --f in site.css) */
.cs-grade { font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.cs-grade--none { background: var(--status-neutral-soft); color: var(--text-muted-aa); }
.cs-grade--sm { min-width: 40px; height: 40px; padding: 0 6px; font-size: 19px; border-radius: 9px; }
.cs-grade--lg { min-width: 72px; height: 72px; padding: 0 10px; font-size: 34px; border-radius: 12px; }
.cs-grade--xl { min-width: 112px; height: 112px; padding: 0 14px; font-size: 52px; border-radius: 14px; letter-spacing: -.04em; }

/* ---- Tools strip (secondary nav) --------------------------------------- */
.cs-tools-strip {
	background: var(--bg-white);
	border-bottom: 1px solid var(--border-default);
}
.cs-tools-strip__scroller {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 4px;
	margin-inline: -4px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.cs-tools-strip__scroller::-webkit-scrollbar { display: none; }
.cs-tools-strip .cs-filter {
	flex: 0 0 auto;
	white-space: nowrap;
	min-height: 34px;
	padding: 5px 14px;
}
.cs-tools-strip .cs-filter:hover:not([aria-current]) { background: var(--bg-page); }
.cs-tools-strip .cs-filter[aria-current]:hover { background: var(--action-fill-hover); border-color: var(--action-fill-hover); color: #FFFFFF; }

/* ---- Hub: hero ----------------------------------------------------------- */
.cs-tools-hub-hero__inner {
	display: grid;
	gap: 18px;
	justify-items: center;
	text-align: center;
	max-width: 820px;
	margin-inline: auto;
}
.cs-tools-hub-hero .cs-lead { max-width: 60ch; }

/* ---- Hub: the directory -------------------------------------------------- */
.cs-tools-dir { padding-block: clamp(40px, 5vw, 64px) clamp(64px, 8vw, 104px); }
.cs-tools-grid {             /* 16 tools: 4 × 4 on desktop, 2-up on tablets, 1-up on phones */
	display: grid;
	gap: clamp(16px, 1.6vw, 20px);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cs-tool-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 24px;
	background: var(--bg-white);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	color: var(--text-primary);
	text-decoration: none;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cs-tool-card:hover,
.cs-tool-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--shadow-raised);
	border-color: var(--border-strong);
	color: var(--text-primary);
}
.cs-tool-card .cs-icon { margin-bottom: 6px; }
.cs-tool-card__title {
	display: block;
	font-size: 18px;
	line-height: 1.35;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--text-primary);
	margin: 0;
}
.cs-tool-card__text { display: block; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.cs-tool-card__kw {
	display: block;
	font-family: var(--font-mono);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--text-muted-aa);
}
.cs-tool-card__go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--link);
}
.cs-tool-card__go::after {     /* SVG arrow (site.css --cs-arrow): the Inter subset has no U+2192 */
	content: "";
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	background: currentColor;
	-webkit-mask: var(--cs-arrow) center / 14px no-repeat;
	        mask: var(--cs-arrow) center / 14px no-repeat;
	transition: transform var(--dur) var(--ease);
}
.cs-tool-card:hover .cs-tool-card__go,
.cs-tool-card:focus-visible .cs-tool-card__go { color: var(--link-hover); }
.cs-tool-card:hover .cs-tool-card__go::after,
.cs-tool-card:focus-visible .cs-tool-card__go::after { transform: translateX(3px); }

/* Flagship: full-width, 2px blue border + a faint blue halo (the Business-plan
   treatment), the grade tile up front, the CTA as a real blue button. */
.cs-tool-card--flagship {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: center;
	gap: clamp(20px, 3vw, 40px);
	padding: clamp(24px, 3vw, 36px) clamp(24px, 3.5vw, 44px);
	border: 2px solid var(--action-primary);
	box-shadow: 0 0 0 4px rgba(7, 135, 227, .08), var(--shadow-card);
	background:
		radial-gradient(70% 140% at 0% 50%, rgba(234, 245, 253, .9), rgba(234, 245, 253, 0) 60%),
		var(--bg-white);
}
.cs-tool-card--flagship:hover,
.cs-tool-card--flagship:focus-visible {
	border-color: var(--action-primary);
	box-shadow: 0 0 0 4px rgba(7, 135, 227, .12), var(--shadow-raised);
}
.cs-tool-card__grade { flex: 0 0 auto; display: inline-flex; }
.cs-tool-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cs-tool-card--flagship .cs-tool-card__title { font-size: clamp(22px, 2.3vw, 30px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.cs-tool-card--flagship .cs-tool-card__text { font-size: 17px; max-width: 62ch; }
.cs-tool-card__cta { flex: 0 0 auto; }

/* ---- Hub: proof band ----------------------------------------------------- */
.cs-tools-proof__inner {
	display: grid;
	gap: 18px;
	justify-items: center;
	text-align: center;
	max-width: 880px;
	margin-inline: auto;
}
.cs-tools-proof .cs-lead strong { color: var(--text-primary); font-weight: 600; }
.cs-tools-proof .cs-actions { justify-content: center; margin-top: 8px; }

/* ---- Tool page: hero + form ---------------------------------------------- */
.cs-tool-hero {
	position: relative;
	padding-block: clamp(40px, 6vw, 72px) clamp(32px, 4.5vw, 48px);
	overflow: hidden;
}
/* The hero's engineering grid, on light: texture, faded at the edges. */
.cs-tool-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(11, 22, 48, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(11, 22, 48, .045) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(70% 90% at 50% 0%, #000 20%, transparent 72%);
	        mask-image: radial-gradient(70% 90% at 50% 0%, #000 20%, transparent 72%);
	pointer-events: none;
}
.cs-tool-hero > .container { position: relative; z-index: 1; }
.cs-tool-hero__inner {
	display: grid;
	gap: 16px;
	justify-items: center;
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
}
.cs-tool-hero .cs-lead { max-width: 60ch; }
.cs-tool-hero .cs-tool-alert { width: 100%; max-width: 680px; text-align: left; }

.cs-tool-form { width: 100%; max-width: 640px; margin-top: 12px; text-align: left; }
.cs-tool-form--wide { max-width: 720px; }
.cs-tool-form__row { display: flex; gap: 10px; align-items: stretch; }
.cs-tool-form__row > .form-control { flex: 1 1 auto; min-width: 0; }
.cs-tool-form .form-control,
.cs-tool-form .form-select {
	height: 44px;
	min-height: 44px;
	font-size: 16px;               /* 16px: iOS never zooms the field */
	background-color: var(--bg-white);
	border-color: var(--border-strong);
	border-radius: var(--radius-input);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.cs-tool-form .form-control { padding: 0 14px; }
.cs-tool-form .form-select { padding: 0 36px 0 12px; }
.cs-tool-form textarea.form-control {
	height: auto;
	padding: 12px 14px;
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 1.6;
	resize: vertical;
}
.cs-tool-form .form-control:focus,
.cs-tool-form .form-select:focus { border-color: var(--focus-outline); box-shadow: var(--focus-ring); }
.cs-tool-form .btn {
	height: 44px;
	padding: 0 20px;
	font-size: 15px;
	white-space: nowrap;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cs-tool-form__port { flex: 0 0 112px !important; }
.cs-tool-form__select { flex: 0 0 auto; width: auto; min-width: 120px; max-width: 240px; }
.cs-tool-form__mono { font-family: var(--font-mono); }
.cs-tool-form__actions { display: flex; justify-content: center; margin-top: 14px; }
.cs-tool-form__hint {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--text-muted-aa);
	text-align: center;
}
.cs-tool-form__hint code { font-size: 13px; }
.cs-tool-form__error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--status-danger-text);
}
.cs-tool-form__error i { font-size: 16px; margin-top: 2px; color: inherit; }
.cs-tool-form__checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin-top: 12px; }
.cs-tool-check {                 /* a checkbox styled as a toggle pill */
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 6px 12px 6px 10px;
	border: 1px solid var(--border-default);
	border-radius: 999px;
	background: var(--bg-white);
	font-size: 14px;
	font-weight: 500;
	color: var(--text-primary);
	cursor: pointer;
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.cs-tool-check:hover { border-color: var(--border-strong); }
.cs-tool-check .form-check-input { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; cursor: pointer; }
.cs-tool-check:has(.form-check-input:checked) { border-color: #B9DDF7; background: var(--action-light); }
.cs-tool-note {                  /* read-only / privacy statement under a form */
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	margin: 12px auto 0;
	max-width: 640px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--text-secondary);
	text-align: left;
}
.cs-tool-note i { font-size: 18px; color: var(--brand-blue); margin-top: 1px; flex: 0 0 auto; }

/* ---- Tool page: workspace (results) ------------------------------------- */
.cs-tool-work { padding-bottom: clamp(48px, 6vw, 80px); }
.cs-tool-stack { display: grid; gap: 20px; }
.cs-tool-stack > * { min-width: 0; margin: 0; }
.cs-tool-result-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.cs-tool-result-title {
	font-size: clamp(20px, 2vw, 24px);
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--text-primary);
	margin: 0;
}

/* Panel: the white result card (app-card language: border + whisper shadow) */
.cs-tool-panel {
	background: var(--bg-white);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	min-width: 0;
}
.cs-tool-panel.is-muted { background: var(--bg-page); box-shadow: none; }
.cs-tool-panel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	padding: 18px 24px;
	border-bottom: 1px solid var(--border-default);
}
.cs-tool-panel__head--plain { border-bottom: 0; padding-bottom: 0; }
.cs-tool-panel__heading { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cs-tool-panel__title {
	font-size: 17px;
	line-height: 1.35;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
	overflow-wrap: anywhere;
}
.cs-tool-panel__sub { display: block; margin: 3px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-muted-aa); }
.cs-tool-panel__body { padding: 20px 24px; }
.cs-tool-panel__body > :last-child { margin-bottom: 0; }
.cs-tool-panel__foot {
	padding: 14px 24px;
	border-top: 1px solid var(--border-default);
	font-size: 14px;
	color: var(--text-muted-aa);
}
.cs-tool-eyebrow {               /* small uppercase label inside panels */
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted-aa);
	margin: 0 0 6px;
}
.cs-tool-muted { color: var(--text-muted-aa); }
.cs-tool-small { font-size: 14px; line-height: 1.55; color: var(--text-muted-aa); }
.cs-tool-text { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 0; }
.cs-tool-text a,
.cs-tool-small a { color: var(--link); }

/* Two- and three-up result grids */
.cs-tool-grid { display: grid; gap: 20px; }
.cs-tool-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-tool-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-tool-grid--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.cs-tool-grid > * { min-width: 0; }

/* Alerts / result callouts: cs-callout + an icon; status never colour alone */
.cs-tool-alert { display: flex; align-items: flex-start; gap: 12px; color: var(--text-primary); font-size: 15px; line-height: 1.6; }
.cs-tool-alert > p,
.cs-tool-alert > div { margin: 0; min-width: 0; }
.cs-tool-alert ul { margin: 6px 0; padding-left: 1.2em; }
.cs-tool-alert__icon { font-size: 22px; flex: 0 0 auto; margin-top: 1px; color: var(--status-neutral); }
.cs-callout--ok .cs-tool-alert__icon { color: var(--status-success-text); }
.cs-callout--warn .cs-tool-alert__icon { color: var(--status-warning-text); }
.cs-callout--danger .cs-tool-alert__icon { color: var(--status-danger-text); }
.cs-callout--info .cs-tool-alert__icon { color: var(--status-info-text); }
.cs-callout--note .cs-tool-alert__icon { color: var(--link); }
.cs-tool-alert__title { display: block; font-weight: 600; margin-bottom: 2px; }
.cs-tool-alert code { font-size: 13px; }

/* Verdict: the one-line answer (UP / DOWN, no listings, the chain verdict) */
.cs-tool-verdict {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 24px;
	background: var(--bg-white);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}
.cs-tool-verdict__body { flex: 1 1 auto; min-width: 0; align-self: center; }
.cs-tool-verdict__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	font-size: 28px;
	background: var(--status-neutral-soft);
	color: var(--status-neutral);
}
.cs-tool-verdict--ok .cs-tool-verdict__icon { background: var(--status-success-soft); color: var(--status-success-text); }
.cs-tool-verdict--warn .cs-tool-verdict__icon { background: var(--status-warning-soft); color: var(--status-warning-text); }
.cs-tool-verdict--fail .cs-tool-verdict__icon { background: var(--status-danger-soft); color: var(--status-danger-text); }
.cs-tool-verdict__icon i { color: inherit; font-size: 28px; }
.cs-tool-verdict__title {
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--text-primary);
	margin: 0;
	overflow-wrap: anywhere;
}
.cs-tool-verdict--ok .cs-tool-verdict__state { color: var(--status-success-text); }
.cs-tool-verdict--fail .cs-tool-verdict__state { color: var(--status-danger-text); }
.cs-tool-verdict__text { margin: 4px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.cs-tool-verdict__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cs-tool-verdict__foot { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-muted-aa); }

/* Stat tiles (status code, latency, expiry …) */
.cs-tool-stats { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-tool-stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 22px;
	background: var(--bg-white);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	min-width: 0;
}
.cs-tool-stat__label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted-aa); }
.cs-tool-stat__value {
	font-size: clamp(28px, 3vw, 36px);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -.025em;
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
	overflow-wrap: anywhere;
}
.cs-tool-stat__value--sm { font-size: 18px; letter-spacing: -.01em; line-height: 1.35; }
.cs-tool-stat__value.is-ok { color: var(--status-success-text); }
.cs-tool-stat__value.is-warn { color: var(--status-warning-text); }
.cs-tool-stat__value.is-fail { color: var(--status-danger-text); }
.cs-tool-stat__unit { margin-left: 4px; font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--text-muted-aa); }
.cs-tool-stat__note { font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.cs-tool-stat--grade { flex-direction: row; align-items: center; gap: 16px; }

/* Key → value table (certificate fields, key headers …) */
.cs-tool-kv { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.cs-tool-kv th {
	width: 220px;
	padding: 12px 20px 12px 0;
	text-align: left;
	vertical-align: top;
	font-weight: 500;
	color: var(--text-muted-aa);
}
.cs-tool-kv td { padding: 12px 0; vertical-align: top; color: var(--text-primary); overflow-wrap: anywhere; }
.cs-tool-kv tr + tr > * { border-top: 1px solid var(--row-separator); }
.cs-tool-kv tr:first-child > * { padding-top: 0; }
.cs-tool-kv tr:last-child > * { padding-bottom: 0; }
.cs-tools-main .cs-tool-kv code { font-size: 13px; }
.cs-tool-kv__sub { display: block; font-size: 13px; color: var(--text-muted-aa); overflow-wrap: anywhere; }

/* Data tables (multi-column): scroll inside their own box on phones */
.cs-tool-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cs-tool-table { width: 100%; margin: 0; font-size: 15px; }
.table.cs-tool-table > thead > tr > th {
	padding: 0 16px 10px 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted-aa);
	border-bottom: 1px solid var(--border-default);
	white-space: nowrap;
}
.table.cs-tool-table > tbody > tr > td,
.table.cs-tool-table > tbody > tr > th { padding: 12px 16px 12px 0; vertical-align: top; border-bottom: 1px solid var(--row-separator); }
.table.cs-tool-table > tbody > tr:last-child > td,
.table.cs-tool-table > tbody > tr:last-child > th { border-bottom: 0; padding-bottom: 0; }
.table.cs-tool-table > :is(thead, tbody) > tr > :last-child { padding-right: 0; }
.cs-tools-main .cs-tool-table code { font-size: 13px; overflow-wrap: anywhere; }
.cs-tool-table .text-end { text-align: right; }
.table.cs-tool-table--compact > tbody > tr > td { padding-block: 10px; }

/* Observed values: light mono (what we SAW). Copy-paste fixes are dark. */
.cs-tools-main code.cs-tool-value {
	display: block;
	margin: 0;
	padding: 8px 12px;
	font-family: var(--font-mono);
	font-size: 13px !important;
	font-weight: 500;
	line-height: 1.55;
	color: #1E2B42 !important;
	background: var(--bg-subtle) !important;
	border: 1px solid #E4EAF1;
	border-radius: 8px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.cs-tool-values { display: grid; gap: 8px; }
.cs-tool-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-tools-main code.cs-tool-chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 6px;
	background: var(--bg-subtle);
	border: 1px solid #E4EAF1;
	font-family: var(--font-mono);
	font-size: 13px;
	color: #1E2B42;
	overflow-wrap: anywhere;
}

/* Dark code / copy-paste panel (cs-code) in result context */
.cs-tool-code { position: relative; }
.cs-tool-code .cs-code__bar { min-height: 44px; }
.cs-tool-code__label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8A96A8; }
.cs-tool-code .cs-code__tab { min-height: 42px; }
.cs-tool-code .cs-code__tab.active { color: #FFFFFF; border-bottom-color: var(--brand-blue-bright); }
.cs-tool-code .cs-code__tab:focus-visible { outline-color: var(--brand-blue-bright) !important; outline-offset: -2px; }
.cs-tool-code pre { padding: 14px 16px; font-size: 13px; }
.cs-tool-code__panel { position: relative; }
.cs-tool-code__panel pre { padding-right: 88px; }
.cs-tool-code__panel .cs-copy { position: absolute; top: 10px; right: 10px; }
.cs-tool-code--wrap pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.cs-copy { min-height: 30px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.cs-copy:focus-visible { outline-color: var(--brand-blue-bright) !important; }
.cs-copy.wt-copied { color: #4ADE80; border-color: rgba(74, 222, 128, .5); }

/* Findings (header checker, DMARC, security-score breakdown) */
.cs-tool-findings { display: grid; gap: 12px; }
.cs-tool-finding {
	padding: 16px 18px;
	background: var(--bg-white);
	border: 1px solid var(--border-default);
	border-left: 3px solid var(--status-neutral);
	border-radius: var(--radius-card-sm);
	min-width: 0;
}
.cs-tool-finding--crit,
.cs-tool-finding--high { border-left-color: var(--status-danger); }
.cs-tool-finding--med { border-left-color: var(--status-warning); }
.cs-tool-finding--low { border-left-color: var(--status-info); }
.cs-tool-finding__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.cs-tool-finding__title { flex: 1 1 220px; min-width: 0; margin: 0; font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--text-primary); }
.cs-tool-finding__text { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.cs-tool-finding__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: 10px; }
.cs-tool-finding__value .cs-tool-eyebrow { margin: 0; }
.cs-tool-finding__fix { margin-top: 14px; }
.cs-tool-finding__fix > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--link);
	cursor: pointer;
	list-style: none;
	border-radius: 6px;
}
.cs-tool-finding__fix > summary::-webkit-details-marker { display: none; }
.cs-tool-finding__fix > summary::marker { content: ""; }
.cs-tool-finding__fix > summary::before {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform var(--dur) var(--ease);
	margin-right: 2px;
}
.cs-tool-finding__fix[open] > summary::before { transform: rotate(45deg) translate(-2px, -1px); }
.cs-tool-finding__fix > summary:hover { color: var(--link-hover); }
.cs-tool-finding__fix > .cs-tool-code { margin-top: 10px; }

/* A finding line: severity chip + one sentence */
.cs-tool-lines { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cs-tool-line { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--text-primary); }
.cs-tool-line > .cs-sev,
.cs-tool-line > .badge { margin-top: 2px; flex: 0 0 auto; }
.cs-tool-line > i { font-size: 18px; margin-top: 2px; flex: 0 0 auto; }
.cs-tool-line > i.is-ok { color: var(--status-success-text); }
.cs-tool-line > i.is-warn { color: var(--status-warning-text); }
.cs-tool-line > i.is-info { color: var(--link); }
.cs-tool-line > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.cs-tool-line > .cs-grade { flex: 0 0 auto; }

/* Meters (security score, SPF lookups) */
.cs-tool-meter { height: 10px; border-radius: 999px; background: var(--bg-subtle); overflow: hidden; }
.cs-tool-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--brand-blue); }
.cs-tool-meter--a > span { background: var(--status-success); }
.cs-tool-meter--b > span { background: #4C9A2A; }
.cs-tool-meter--c > span { background: var(--status-warning); }
.cs-tool-meter--d > span { background: #EA580C; }
.cs-tool-meter--f > span { background: var(--status-danger); }
.cs-tool-progress.progress { height: 10px; border-radius: 999px; background: var(--bg-subtle); }
.cs-tool-progress .progress-bar { border-radius: 999px; }

/* Security-score hero card */
.cs-tool-score {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 20px clamp(20px, 3vw, 40px);
	align-items: center;
	padding: clamp(22px, 3vw, 36px);
}
.cs-tool-score__body { display: grid; gap: 10px; min-width: 0; }
.cs-tool-score__body .badge { justify-self: start; }
.cs-tool-score__num { display: flex; align-items: baseline; gap: 8px; }
.cs-tool-score__num b { font-size: clamp(40px, 4.5vw, 52px); line-height: 1; font-weight: 800; letter-spacing: -.035em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cs-tool-score__num span { font-size: 20px; font-weight: 600; color: var(--text-muted-aa); }
.cs-tool-area__head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.cs-tool-area__label { margin: 0; font-size: 17px; font-weight: 600; color: var(--text-primary); }
.cs-tool-area__weight { display: block; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted-aa); margin-top: 2px; }
.cs-tool-area .cs-tool-lines { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border-default); }
.cs-tool-area .cs-tool-line { font-size: 14px; }
.cs-tool-area .cs-link-arrow { margin-top: 16px; font-size: 14px; }

/* "Fix this first" — the single most important copy-paste fix */
.cs-tool-topfix { border-left: 3px solid var(--status-warning); }
.cs-tool-topfix--crit,
.cs-tool-topfix--high { border-left-color: var(--status-danger); }
.cs-tool-topfix--low { border-left-color: var(--status-info); }
.cs-tool-topfix__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.cs-tool-topfix__head > i { font-size: 24px; color: var(--status-warning-text); }
.cs-tool-topfix--crit .cs-tool-topfix__head > i,
.cs-tool-topfix--high .cs-tool-topfix__head > i { color: var(--status-danger-text); }
.cs-tool-topfix__label { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 0; }
.cs-tool-topfix__area { font-size: 13px; font-weight: 500; color: var(--text-muted-aa); }

/* Status cards (DMARC: SPF / DMARC / DKIM) */
.cs-tool-check-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cs-tool-check-card__icon { font-size: 30px; flex: 0 0 auto; }
.cs-tool-check-card__icon.is-ok { color: var(--status-success-text); }
.cs-tool-check-card__icon.is-warn { color: var(--status-warning-text); }
.cs-tool-check-card__icon.is-fail { color: var(--status-danger-text); }
.cs-tool-check-card__icon.is-neutral { color: var(--status-neutral); }
.cs-tool-check-card__name { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--text-primary); line-height: 1.2; }
.cs-tool-check-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; font-size: 14px; color: var(--text-secondary); }
.cs-tool-check-card code.cs-tool-value { margin-top: 12px; }

/* Redirect hops: a numbered vertical timeline */
.cs-tool-hops { list-style: none; margin: 0; padding: 0; }
.cs-tool-hop { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 12px 0; }
.cs-tool-hop:first-child { padding-top: 0; }
.cs-tool-hop:last-child { padding-bottom: 0; }
.cs-tool-hop:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 14.5px;
	top: 42px;
	bottom: -12px;
	width: 1px;
	background: var(--border-strong);
}
.cs-tool-hop:first-child:not(:last-child)::before { top: 30px; }
.cs-tool-hop__num {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--bg-white);
	border: 1px solid var(--border-strong);
	font-size: 13px;
	font-weight: 700;
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
}
.cs-tool-hop.is-final .cs-tool-hop__num { background: var(--action-fill); border-color: var(--action-fill); color: #FFFFFF; }
.cs-tool-hop__card { min-width: 0; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-card-sm); background: var(--bg-white); }
.cs-tool-hop.is-final .cs-tool-hop__card { border-color: #B9DDF7; background: #F4FAFE; }
.cs-tool-hop__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cs-tools-main .cs-tool-hop__url {
	display: block;
	min-width: 0;
	font-family: var(--font-mono);
	font-size: 13px !important;
	color: var(--text-primary) !important;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cs-tool-hop__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; font-size: 14px; color: var(--text-secondary); }
.cs-tool-hop__meta .badge i { color: inherit; font-size: 10px; }
.cs-tool-hop__err { color: var(--status-danger-text); font-weight: 500; }

/* SPF include tree */
.cs-tool-tree,
.cs-tool-tree ul { list-style: none; margin: 0; padding: 0; }
.cs-tool-tree ul { margin: 10px 0 0 6px; padding-left: 18px; border-left: 1px solid var(--border-strong); }
.cs-tool-tree li + li { margin-top: 10px; }
.cs-tool-tree__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cs-tool-tree__domain { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.cs-tools-main code.cs-tool-tree__record { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted-aa); background: none; border: 0; padding: 0; overflow-wrap: anywhere; }

/* Share box */
.cs-tool-share .cs-tool-panel__title { margin-bottom: 10px; }
.cs-tool-share__row { display: flex; gap: 10px; }
.cs-tool-share__url { flex: 1 1 auto; min-width: 0; height: 44px; font-family: var(--font-mono); font-size: 13px; background: var(--bg-page) !important; }
.cs-tool-share .btn { flex: 0 0 auto; height: 44px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; }


/* Preset gallery (cron) */
.cs-tool-presets { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-tool-preset {
	display: grid;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card-sm);
	background: var(--bg-white);
	color: var(--text-primary);
	text-decoration: none;
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cs-tool-preset:hover,
.cs-tool-preset:focus-visible { border-color: #B9DDF7; background: #F7FBFE; color: var(--text-primary); transform: translateY(-1px); }
.cs-tools-main .cs-tool-preset code { font-size: 15px; font-weight: 600; color: var(--link); background: none; border: 0; padding: 0; }
.cs-tool-preset span { font-size: 14px; color: var(--text-secondary); }

/* Big expression callout (cron) */
.cs-tool-expr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.cs-tools-main .cs-tool-expr code {
	font-size: 18px !important;
	font-weight: 600;
	padding: 6px 12px !important;
	border-radius: 8px;
	background: var(--bg-dark) !important;
	border: 0 !important;
	color: #E6EBF2 !important;
	overflow-wrap: anywhere;
}
.cs-tool-expr__desc { margin: 0; font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; letter-spacing: -.015em; line-height: 1.3; color: var(--text-primary); }

/* ---- Tool page: explainer + FAQ ----------------------------------------- */
.cs-tool-learn {
	background: var(--bg-white);
	border-top: 1px solid var(--border-default);
	padding-block: clamp(56px, 7vw, 96px);
}
.cs-tool-faqsec { padding-block: clamp(56px, 7vw, 96px); }
.cs-tool-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 24px clamp(32px, 5vw, 72px);
	align-items: start;
}
.cs-tool-split__head { position: sticky; top: calc(var(--cs-nav-h) + 24px); }
.cs-tool-split__head .cs-tool-small { margin-top: 12px; }
.cs-tool-prose { max-width: 720px; font-size: 16px; line-height: 1.7; color: #24324A; }
.cs-tool-prose > * { margin: 0; }
.cs-tool-prose > * + * { margin-top: 1em; }
.cs-tool-prose a { color: var(--link); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.cs-tool-prose a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
.cs-tool-prose strong { color: var(--text-primary); font-weight: 600; }

.cs-tool-prose ul { padding-left: 1.2em; }
.cs-tool-prose li + li { margin-top: .5em; }
.cs-tool-defs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; margin-top: 28px; max-width: none; }
.cs-tool-defs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-tool-def { min-width: 0; padding-top: 16px; border-top: 1px solid var(--border-default); }
.cs-tool-def__term { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--text-primary); }
.cs-tool-def__term i { font-size: 20px; color: var(--brand-blue); }
.cs-tool-def__text { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

/* FAQ accordion */
.cs-tool-faq .accordion { --bs-accordion-bg: transparent; --bs-accordion-border-width: 0; display: grid; gap: 12px; }
.cs-tool-faq .accordion-item {
	background: var(--bg-white);
	border: 1px solid var(--border-default) !important;
	border-radius: var(--radius-card-sm) !important;
	overflow: hidden;
}
.cs-tool-faq .accordion-button {
	min-height: 56px;
	padding: 16px 20px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--text-primary);
	background: var(--bg-white);
	box-shadow: none !important;
	border-radius: 0 !important;
}
.cs-tool-faq .accordion-button:not(.collapsed) { color: var(--text-primary); background: var(--bg-white); }
.cs-tool-faq .accordion-button:hover { background: var(--row-hover); }
.cs-tool-faq .accordion-button:focus-visible { outline-offset: -2px; }
.cs-tool-faq .accordion-body { padding: 0 20px 20px; font-size: 15px; line-height: 1.7; color: var(--text-secondary); }

/* Closing CTA: a contained navy card (the page's dark band) */
.cs-tool-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px 48px;
	align-items: center;
	margin-top: clamp(48px, 6vw, 80px);
	padding: clamp(28px, 4.5vw, 52px);
	border-radius: var(--radius-card-lg);
	background:
		radial-gradient(60% 140% at 100% 0%, rgba(7, 135, 227, .2), rgba(7, 135, 227, 0) 70%),
		var(--brand-navy);
	overflow: hidden;
}
.cs-tool-cta__body { display: flex; align-items: flex-start; gap: 18px; min-width: 0; }
.cs-tool-cta__title { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--text-on-dark); margin: 0 0 10px; }
.cs-tool-cta__text { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.65; color: var(--text-on-dark-muted); }
.cs-tool-cta__actions { flex-direction: column; align-items: stretch; min-width: 240px; }
.cs-tool-cta .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	font-size: 16px;
	white-space: nowrap;
}
.cs-tool-cta .btn i { color: inherit; font-size: 16px; }

/* ---- DNS propagation: light map panel ------------------------------------ */
.cs-dnsp-panel {
	position: relative;
	padding: clamp(12px, 2.4vw, 28px);
	background: var(--bg-white);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}
.wt-dnsp-map { display: block; width: 100%; height: auto; }
.wt-dnsp-land { fill: none; stroke: #C9D2DE; stroke-width: 4.6; stroke-linecap: round; }
.wt-dnsp-marker { cursor: pointer; outline: none; }
.wt-dnsp-marker .wt-dnsp-dot { fill: #A3AFC0; stroke: #FFFFFF; stroke-width: 1.5; transition: fill .2s ease; }
.wt-dnsp-marker .wt-dnsp-ring { fill: none; stroke: transparent; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.wt-dnsp-marker:focus-visible .wt-dnsp-dot { stroke: var(--brand-navy); stroke-width: 2.5; }
.wt-dnsp-marker[data-state="checking"] .wt-dnsp-dot { fill: var(--brand-blue); }
.wt-dnsp-marker[data-state="checking"] .wt-dnsp-ring { stroke: var(--brand-blue); animation: cs-dnsp-ping 1.5s ease-out infinite; }
.wt-dnsp-marker[data-state="match"] .wt-dnsp-dot { fill: var(--status-success); }
.wt-dnsp-marker[data-state="differ"] .wt-dnsp-dot { fill: var(--status-warning); }
.wt-dnsp-marker[data-state="fail"] .wt-dnsp-dot { fill: var(--status-danger); }
.wt-dnsp-marker[data-state="none"] .wt-dnsp-dot { fill: var(--status-neutral); }
@keyframes cs-dnsp-ping {
	0% { transform: scale(.6); opacity: .9; }
	100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.wt-dnsp-marker[data-state="checking"] .wt-dnsp-ring { animation: none; stroke: transparent; }
}
.wt-dnsp-tooltip {
	position: absolute;
	z-index: 10;
	display: none;
	max-width: 300px;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--text-primary);
	box-shadow: var(--shadow-popover);
	color: #E6EBF2;
	font-size: 13px;
	line-height: 1.45;
	pointer-events: none;
}
.wt-dnsp-tooltip.is-visible { display: block; }
.wt-dnsp-tooltip code { color: #9ED0FF; background: none; padding: 0; word-break: break-all; }
.wt-dnsp-tooltip .text-muted { color: var(--text-on-dark-muted) !important; }
.wt-dnsp-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 20px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--text-secondary);
}
.wt-dnsp-legend li { display: inline-flex; align-items: center; gap: 7px; }
.wt-dnsp-swatch { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: #A3AFC0; }
.wt-dnsp-swatch.is-checking { background: var(--brand-blue); }
.wt-dnsp-swatch.is-match { background: var(--status-success); }
.wt-dnsp-swatch.is-differ { background: var(--status-warning); }
.wt-dnsp-swatch.is-fail { background: var(--status-danger); }
.wt-dnsp-swatch.is-none { background: var(--status-neutral); }
.wt-dnsp-answer-chip code,
#wt-dnsp-table code { word-break: break-all; }
#wt-dnsp-consensus .badge { font-size: 13px; font-weight: 600; padding: 6px 10px; }
.cs-dnsp-consensus { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.cs-dnsp-consensus__title { font-size: 18px; font-weight: 700; color: var(--text-primary); line-height: 1.4; }
.cs-dnsp-consensus__sub { margin-top: 4px; font-size: 15px; color: var(--text-secondary); line-height: 1.55; }
.cs-dnsp-consensus__progress { font-size: 14px; font-weight: 600; color: var(--text-muted-aa); white-space: nowrap; font-variant-numeric: tabular-nums; }
#wt-dnsp-table td .badge { white-space: nowrap; }

/* ---- SLA calculator ---------------------------------------------------------- */
.cs-sla-card {
	width: 100%;
	max-width: 640px;
	margin-top: 12px;
	padding: clamp(20px, 3vw, 32px);
	text-align: left;
	background: var(--bg-white);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}
/* Segmented control: neutral ground, blue selected (radio inputs, no JS needed) */
.cs-seg {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 4px;
	padding: 4px;
	margin-bottom: 24px;
	border-radius: 10px;
	background: var(--bg-subtle);
}
.cs-seg .btn-check + label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 6px 12px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 600;
	color: #44526A;
	cursor: pointer;
	text-align: center;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cs-seg .btn-check + label:hover { color: var(--text-primary); }
.cs-seg .btn-check:checked + label { background: var(--action-fill); color: #FFFFFF; box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.cs-seg .btn-check:focus-visible + label { outline: 2px solid var(--focus-outline); outline-offset: 2px; }
.cs-seg label i { color: inherit; font-size: 12px; }
.cs-sla-card .form-label { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.cs-sla-card .form-control,
.cs-sla-card .form-select { height: 44px; min-height: 44px; font-size: 16px; }
.cs-sla-card .input-group-text { background: var(--bg-page); border-color: var(--border-strong); color: var(--text-secondary); font-weight: 600; }
.cs-sla-card fieldset { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.cs-sla-card legend { float: none; width: auto; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.cs-sla-unit-label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; color: var(--text-muted-aa); }
.cs-sla-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cs-sla-presets .cs-filter.active { background: var(--action-fill); border-color: var(--action-fill); color: #FFFFFF; }
.cs-sla-error { margin-top: 12px; }
.cs-sla-out {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
.cs-sla-out__cell { padding: 16px; border: 1px solid var(--border-default); border-radius: var(--radius-card-sm); background: var(--bg-page); text-align: center; min-width: 0; }
.cs-sla-out__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted-aa); margin-bottom: 4px; }
.cs-sla-out__value { display: block; font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cs-sla-avail { text-align: center; padding: 8px 0; }
.cs-sla-avail__value { display: block; font-size: clamp(44px, 6vw, 64px); line-height: 1.1; font-weight: 800; letter-spacing: -.035em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cs-sla-avail__sub { margin-top: 6px; font-size: 16px; color: var(--text-secondary); }
.cs-sla-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-default); }
.cs-sla-foot .form-check-label { font-size: 14px; color: var(--text-secondary); }
/* Switches: Metronic's custom/sm switch sizing collapses to a tall pill; restate it. */
.cs-tool-switch.form-check.form-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 24px; padding-left: 0; margin: 0; }
.cs-tool-switch.form-check.form-switch .form-check-input { float: none; flex: 0 0 auto; width: 36px; height: 20px; margin: 0; border-radius: 999px; cursor: pointer; }
.cs-tool-switch.form-check.form-switch .form-check-label { cursor: pointer; }

/* ---- Subnet calculator --------------------------------------------------- */
#wt-subnet-rows code,
#wt-subnet-divide-rows code { word-break: break-all; }
#wt-subnet-rows th { width: 220px; }
.cs-subnet-divide { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 18px; }
.cs-subnet-divide .form-select { min-width: 120px; height: 44px; }
.cs-subnet-divide .btn { height: 44px; }

/* ---- CAA builder ------------------------------------------------------------- */
.cs-caa-builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); }
.cs-caa-builder fieldset { border: 0; margin: 0; padding: 0; min-width: 0; transition: opacity var(--dur) var(--ease); }
.cs-caa-builder legend { float: none; width: auto; margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.cs-caa-builder .form-label { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.cs-caa-builder .form-control { height: 44px; font-size: 16px; }
.cs-caa-group + .cs-caa-group { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border-default); }
.cs-caa-options { display: grid; gap: 10px; }
.cs-caa-option { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15px; color: var(--text-primary); cursor: pointer; }
.cs-caa-option .form-check-input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; float: none; }
.cs-tools-main .cs-caa-option code { font-size: 12.5px; color: var(--text-muted-aa); background: none; border: 0; padding: 0; margin-left: 4px; }
.cs-caa-help { margin: 4px 0 0 28px; font-size: 14px; line-height: 1.55; color: var(--text-muted-aa); }
.cs-caa-help--flush { margin-left: 0; }
.cs-caa-switch { display: flex; align-items: center; gap: 10px; padding-left: 0; margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.cs-caa-switch .form-check-input { float: none; margin: 0; flex: 0 0 auto; }
.cs-tools-main .cs-caa-switch code { font-size: 12.5px; color: var(--text-muted-aa); background: none; border: 0; padding: 0; font-weight: 500; margin-left: 4px; }
.cs-caa-hint { margin: 6px 0 0; font-size: 14px; font-weight: 500; color: var(--status-danger-text); }
.cs-caa-output { position: sticky; top: calc(var(--cs-nav-h) + 24px); align-self: start; }
.cs-caa-output pre#wt-caa-output { min-height: 150px; white-space: pre-wrap; word-break: break-all; }
.cs-caa-flags { display: grid; gap: 10px; margin-top: 18px; padding: 16px; border: 1px solid var(--border-default); border-radius: var(--radius-card-sm); background: var(--bg-page); }
.cs-caa-flags__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.cs-caa-flags .cs-tool-line { font-size: 14px; color: var(--text-secondary); }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.cs-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cs-sla-out { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
	.cs-tool-split { grid-template-columns: minmax(0, 1fr); }
	.cs-tool-split__head { position: static; }
	.cs-tool-cta { grid-template-columns: minmax(0, 1fr); }
	.cs-tool-cta__actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; min-width: 0; padding-left: 62px; }
	.cs-tool-grid--3,
	.cs-tool-grid--1-2 { grid-template-columns: minmax(0, 1fr); }
	.cs-tool-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cs-caa-builder { grid-template-columns: minmax(0, 1fr); }
	.cs-caa-output { position: static; }
	.cs-tool-defs--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
	.cs-tool-card--flagship { flex-direction: column; align-items: flex-start; }
	.cs-tool-card--flagship .cs-grade--xl { min-width: 72px; height: 72px; font-size: 34px; border-radius: 12px; }
	.cs-tool-grid--2,
	.cs-tool-stats { grid-template-columns: minmax(0, 1fr); }
	.cs-tool-stats--3up { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
	.cs-tool-stats--3up .cs-tool-stat { padding: 14px 12px; }
	.cs-tool-stats--3up .cs-tool-stat__value { font-size: 22px; }
	.cs-tool-stats--3up .cs-tool-stat__label { font-size: 11px; letter-spacing: .04em; }
	.cs-tool-score { grid-template-columns: minmax(0, 1fr); justify-items: start; }
	.cs-tool-score .cs-grade--xl { min-width: 88px; height: 88px; font-size: 42px; }
	.cs-tool-defs,
	.cs-tool-defs--3 { grid-template-columns: minmax(0, 1fr); }
	.cs-sla-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cs-tools-strip .cs-filter { min-height: 40px; }
	.cs-copy { min-height: 36px; }
}
@media (max-width: 639.98px) {
	.cs-tools-grid { grid-template-columns: minmax(0, 1fr); }
	.cs-tool-card { padding: 20px; }
	.cs-tool-presets { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
	.cs-tool-form__row,
	.cs-tool-share__row { flex-direction: column; }
	.cs-tool-form .btn,
	.cs-tool-share .btn,
	.cs-tool-card__cta { width: 100%; }
	.cs-tool-form__port,
	.cs-tool-form__select { flex: 0 0 auto !important; width: 100%; max-width: none; }
	.cs-tool-panel__head { padding: 16px; }
	.cs-tool-panel__body { padding: 16px; }
	.cs-tool-verdict { padding: 18px; gap: 4px 14px; }
	.cs-tool-verdict__icon { width: 44px; height: 44px; }
	.cs-tool-verdict__icon i { font-size: 24px; }
	.cs-tool-kv,
	.cs-tool-kv tbody,
	.cs-tool-kv tr,
	.cs-tool-kv th,
	.cs-tool-kv td { display: block; width: auto; }
	.cs-tool-kv th { padding: 12px 0 2px; }
	.cs-tool-kv td { padding: 0 0 12px; }
	.cs-tool-kv tr + tr > td { border-top: 0; }
	.cs-tool-kv tr:first-child > th { padding-top: 0; }
	#wt-subnet-rows th { width: auto; }
	.cs-tool-cta__body { flex-direction: column; }
	.cs-tool-cta__actions { flex-direction: column; align-items: stretch; padding-left: 0; }
	.cs-tool-cta__actions .btn { width: 100%; justify-content: center; }
	.cs-tool-code__panel pre { padding-right: 16px; padding-top: 52px; }
	.cs-sla-out { grid-template-columns: minmax(0, 1fr); }
	.cs-sla-out__cell { display: flex; align-items: baseline; justify-content: space-between; text-align: left; padding: 12px 14px; }
	.cs-sla-out__label { margin: 0; }
	.cs-seg { grid-auto-flow: row; }
}
@media (prefers-reduced-motion: reduce) {
	.cs-tool-card:hover,
	.cs-tool-card:focus-visible,
	.cs-tool-preset:hover { transform: none; }
}

/* ---- Late additions -------------------------------------------------------- */
.cs-tool-finding--plain { border-left-width: 1px; border-left-color: var(--border-default); }
.cs-dnsp-consensus > .min-w-0 { flex: 1 1 420px; }
/* Phones: tool cards put the icon beside the title (16 cards, less scrolling) */
@media (max-width: 639.98px) {
	.cs-tool-card:not(.cs-tool-card--flagship) { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-items: start; }
	.cs-tool-card:not(.cs-tool-card--flagship) > * { grid-column: 2; }
	.cs-tool-card:not(.cs-tool-card--flagship) > .cs-icon { grid-column: 1; grid-row: 1 / span 4; width: 40px; height: 40px; margin: 0; }
	.cs-tool-card:not(.cs-tool-card--flagship) .cs-tool-card__go { padding-top: 4px; }
}
/* Tablets: the flagship's CTA drops under its text so the title keeps one line */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.cs-tool-card--flagship { display: grid; grid-template-columns: auto minmax(0, 1fr); row-gap: 18px; }
	.cs-tool-card--flagship .cs-tool-card__grade { grid-row: span 2; }
	.cs-tool-card--flagship .cs-tool-card__cta { grid-column: 2; justify-self: start; }
}