@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

/* ── Light theme (default) ── */
:root {
	--sa-bg: #F0EFEE;
	--sa-bg-soft: #E8E7E6;
	--sa-surface: #FFFFFF;
	--sa-surface-2: #F8F7F6;
	--sa-elevated: #FFFFFF;
	--sa-border: #E5E7EB;
	--sa-border-md: #D1D5DB;
	--sa-border-focus: rgba(249, 115, 22, 0.5);
	--sa-green: #22C55E;
	--sa-green-bg: rgba(34, 197, 94, 0.08);
	--sa-green-border: rgba(34, 197, 94, 0.25);
	--sa-green-dark: #052e16;
	--sa-red: #EF4444;
	--sa-red-bg: rgba(239, 68, 68, 0.08);
	--sa-red-border: rgba(239, 68, 68, 0.25);
	--sa-amber: #F59E0B;
	--sa-amber-bg: rgba(245, 158, 11, 0.08);
	--sa-amber-border: rgba(245, 158, 11, 0.25);
	--sa-text: #1A1D21;
	--sa-muted: #6B7280;
	--sa-hint: #9CA3AF;
	--sa-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	--sa-mono: "JetBrains Mono", "Fira Mono", "Cascadia Code", monospace;
	--sa-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 12px;
	/* Accent (orange) */
	--sa-accent: #F97316;
	--sa-accent-hover: #EA6C0A;
	--sa-accent-text: #FFFFFF;
	/* Sidebar (always dark charcoal in both themes, per spec) */
	--sa-sidebar-bg: #1A1D21;
	--sa-sidebar-text: #FFFFFF;
	--sa-sidebar-muted: #6B7280;
	--sa-sidebar-hover: #2D3139;
	--sa-sidebar-active: #F97316;
	--sa-sidebar-active-text: #FFFFFF;
	--sa-sidebar-border: rgba(255, 255, 255, 0.07);
}

/* ── Dark theme override ── */
html.dark {
	--sa-bg: #111317;
	--sa-bg-soft: #191B1F;
	--sa-surface: #1E2025;
	--sa-surface-2: #24272D;
	--sa-elevated: #2A2D34;
	--sa-border: rgba(255, 255, 255, 0.08);
	--sa-border-md: rgba(255, 255, 255, 0.13);
	--sa-border-focus: rgba(249, 115, 22, 0.5);
	--sa-green: #22C55E;
	--sa-green-bg: rgba(34, 197, 94, 0.10);
	--sa-green-border: rgba(34, 197, 94, 0.28);
	--sa-green-dark: #052e16;
	--sa-red: #EF4444;
	--sa-red-bg: rgba(239, 68, 68, 0.10);
	--sa-red-border: rgba(239, 68, 68, 0.28);
	--sa-amber: #F59E0B;
	--sa-amber-bg: rgba(245, 158, 11, 0.10);
	--sa-amber-border: rgba(245, 158, 11, 0.28);
	--sa-text: #E8E6E3;
	--sa-muted: #6B7280;
	--sa-hint: #9CA3AF;
	--sa-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
	/* Accent stays orange — same as light */
	--sa-accent: #F97316;
	--sa-accent-hover: #EA6C0A;
	--sa-accent-text: #FFFFFF;
	/* Sidebar stays charcoal — same as light */
	--sa-sidebar-bg: #1A1D21;
	--sa-sidebar-text: #FFFFFF;
	--sa-sidebar-muted: #6B7280;
	--sa-sidebar-hover: #2D3139;
	--sa-sidebar-active: #F97316;
	--sa-sidebar-active-text: #FFFFFF;
	--sa-sidebar-border: rgba(255, 255, 255, 0.07);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--sa-sans);
	background: var(--sa-bg);
	color: var(--sa-text);
	line-height: 1.6;
}
body.app-menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }

.mono { font-family: var(--sa-mono); }
.text-green  { color: var(--sa-green); }
.text-red    { color: var(--sa-red); }
.text-amber  { color: var(--sa-amber); }
.text-muted  { color: var(--sa-muted); }
.text-hint   { color: var(--sa-hint); }
.text-center { text-align: center; }
.muted { color: var(--sa-muted); }

.container,
.container--narrow {
	width: min(1140px, calc(100% - 56px));
	margin: 0 auto;
}
.container--narrow { width: min(760px, calc(100% - 56px)); }

.site-main,
.admin-main {
	width: min(1140px, calc(100% - 56px));
	margin: 0 auto;
	padding: 0 0 80px;
}

.section { padding: 48px 0; width: 100%; }
.section--flush { padding-top: 72px; width: 100%; }
.section__eyebrow {
	font-family: var(--sa-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--sa-accent);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}
.section__eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sa-accent);
	box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.10);
}
.section__heading {
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.12;
	letter-spacing: -0.03em;
	margin: 0 0 14px;
	font-weight: 500;
}
.section__sub {
	font-size: 15px;
	color: var(--sa-muted);
	line-height: 1.75;
	max-width: 640px;
	margin: 0 0 30px;
}

.card,
.panel,
.url-table-card,
.alert-feed,
.history-card,
.metric-card,
.pricing-card,
.faq-item,
.enterprise-bar,
.site-shell,
.admin-bar {
	background: var(--sa-surface);
	border: 0.5px solid var(--sa-border);
	box-shadow: var(--sa-shadow);
}
.card,
.panel,
.url-table-card,
.alert-feed,
.history-card,
.metric-card,
.pricing-card,
.faq-item,
.enterprise-bar {
	border-radius: var(--radius-md);
}
.panel {
	padding: 24px;
}
.plan-card__metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
	gap: 10px 12px;
}
.plan-card__metrics--tight {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px 10px;
}
.plan-card__metrics--four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px 10px;
}
.plans-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}
.plan-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.plan-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.plan-card__feature-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.plan-card__blurb {
	display: grid;
	gap: 6px;
}
.plan-card__feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px 12px;
}
.plan-tabs {
	display: grid;
	gap: 12px;
}
.plan-tab-panels {
	display: grid;
	gap: 16px;
}
.plan-tab-panel {
	display: grid;
	gap: 18px;
	overflow: hidden;
	opacity: 0;
	max-height: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity 220ms ease, transform 220ms ease, max-height 260ms ease;
	will-change: opacity, transform, max-height;
}
.plan-tab-panel.is-active,
.plan-tab-panel.is-exiting {
	max-height: 40000px;
}
.plan-tab-panel.is-active {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
.plan-card__metrics + .plan-card__metrics {
	margin-top: -2px;
}
.plan-card__sync {
	padding: 12px;
	border-radius: 12px;
	border: 0.5px solid var(--sa-border);
	background: var(--sa-surface-2);
}
.plan-card__summary {
	font-size: 12px;
	line-height: 1.6;
}
.feature-pill {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 0.5px solid var(--sa-border-md);
	background: var(--sa-surface-2);
	font-size: 12px;
	line-height: 1.35;
}
.feature-pill input {
	margin-top: 2px;
	accent-color: var(--sa-accent);
}
.feature-pill strong {
	display: block;
	font-size: 12px;
}
.feature-pill--inactive {
	opacity: 0.6;
}
.feature-table-wrap {
	margin-top: 12px;
	overflow-x: auto;
	border-radius: 14px;
	border: 0.5px solid var(--sa-border);
	background: var(--sa-surface-2);
}
.feature-table {
	width: 100%;
	min-width: 1080px;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 12px;
}
.feature-table th,
.feature-table td {
	padding: 8px 10px;
	border-bottom: 0.5px solid var(--sa-border);
	vertical-align: middle;
}
.feature-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--sa-surface-2);
	text-align: left;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sa-muted);
}
.feature-table__sort {
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}
.feature-table__row--new {
	background: rgba(249, 115, 22, 0.04);
}
.feature-table__row--stripe-a {
	background: rgba(255, 255, 255, 0.02);
}
.feature-table__row--stripe-b {
	background: rgba(90, 90, 90, 0.12);
}
.feature-table__row--stripe-a > td {
	background: rgba(255, 255, 255, 0.02);
}
.feature-table__row--stripe-b > td {
	background: rgba(90, 90, 90, 0.12);
}
.feature-table__group--stripe-a > tr > td {
	background: rgba(255, 255, 255, 0.02);
}
.feature-table__group--stripe-b > tr > td {
	background: rgba(90, 90, 90, 0.12);
}
.feature-table__group--inactive {
	opacity: 0.72;
}
.feature-table__cell--state,
.feature-table__col-state {
	width: 118px;
}
.feature-table__col-sort {
	width: 120px;
}
.feature-table__col-actions {
	width: 96px;
	text-align: right;
}
.feature-table__cell--ghost {
	padding: 0;
	border-bottom: 0;
	background: transparent;
}
.feature-table__cell--desc {
	padding-top: 4px;
	padding-bottom: 28px;
}
.feature-table__row--desc td {
	border-bottom: 0;
}
.feature-table__row--gap td {
	height: 32px;
	padding: 0;
	border-bottom: 0;
	background: transparent;
}
.feature-table__inline-check {
	width: auto;
	height: auto;
	margin-top: 0;
	border: 0;
	background: transparent;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	color: var(--sa-text);
	white-space: nowrap;
}
.feature-table__inline-check input {
	width: 16px;
	height: 16px;
	accent-color: var(--sa-accent);
}
.feature-table__input {
	width: 100%;
	min-width: 0;
	height: 32px;
	padding: 6px 8px;
	font-size: 12px;
}
.feature-table__input--name {
	min-width: 150px;
}
.feature-table__input--slug {
	min-width: 140px;
	font-family: var(--sa-mono);
}
.feature-table__input--sort {
	min-width: 84px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.feature-table__input--short {
	min-width: 180px;
}
.feature-table__input--desc {
	min-width: 260px;
	flex: 1 1 auto;
}
.feature-table__update-line {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
}
.feature-table__new-body .feature-table__cell {
	background: rgba(255, 255, 255, 0.03);
}

/* ── Feature table drag-and-drop ── */
.feature-table__col-drag {
	width: 32px;
	padding: 0 !important;
}
.feature-table__cell--drag {
	width: 32px;
	padding: 0 !important;
	text-align: center;
	vertical-align: middle;
}
.feature-table__drag-handle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	cursor: grab;
	color: var(--sa-hint);
	border-radius: var(--radius-sm);
	transition: color 0.15s, background 0.15s;
}
.feature-table__drag-handle:active {
	cursor: grabbing;
}
.feature-table__drag-handle:hover {
	color: var(--sa-accent);
	background: rgba(249, 115, 22, 0.08);
}
.feature-table__group[draggable="true"] {
	cursor: default;
}
.feature-table__group--dragging {
	opacity: 0.45;
}
.feature-table__group--drag-over {
	border-top: 2px solid var(--sa-accent);
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.btn,
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	padding: 10px 18px;
	min-height: 42px;
	border-radius: var(--radius-md);
	border: 0.5px solid transparent;
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}
.btn:hover,
.button:hover { transform: translateY(-1px); }
.btn--primary,
.button {
	background: var(--sa-accent);
	color: var(--sa-accent-text);
	border-color: var(--sa-accent);
}
.btn--primary:hover,
.button:hover { background: var(--sa-accent-hover); }
.btn--ghost {
	background: transparent;
	color: var(--sa-muted);
	border-color: var(--sa-border-md);
}
.btn--ghost:hover { color: var(--sa-text); border-color: var(--sa-border-md); }
html.dark .btn--ghost:hover { border-color: rgba(255, 255, 255, 0.2); }
.btn--sm { min-height: 34px; padding: 7px 12px; font-size: 11px; }
.btn--lg { min-height: 48px; padding: 12px 24px; font-size: 14px; }
.btn--full { width: 100%; }
.btn:disabled,
.button:disabled {
	background: var(--sa-hint);
	color: var(--sa-muted);
	border-color: transparent;
	cursor: not-allowed;
	transform: none;
}

.badge,
.sev,
.pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: 999px;
	padding: 4px 8px;
	font-size: 10px;
	line-height: 1;
	font-family: var(--sa-mono);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.badge--green,
.pill--green { background: var(--sa-green-bg); color: var(--sa-green); border: 0.5px solid var(--sa-green-border); }
.badge--red,
.pill--red { background: var(--sa-red-bg); color: var(--sa-red); border: 0.5px solid var(--sa-red-border); }
.badge--amber,
.pill--amber { background: var(--sa-amber-bg); color: var(--sa-amber); border: 0.5px solid var(--sa-amber-border); }
.badge--muted { background: var(--sa-surface-2); color: var(--sa-muted); border: 0.5px solid var(--sa-border-md); }
.badge--blue { background: #eff6ff; color: #3b82f6; border: 0.5px solid #bfdbfe; }
.sev--high { color: var(--sa-red); background: var(--sa-red-bg); border: 0.5px solid var(--sa-red-border); }
.sev--medium { color: var(--sa-amber); background: var(--sa-amber-bg); border: 0.5px solid var(--sa-amber-border); }

.sa-nav,
.signup-nav,
.site-shell,
.admin-bar {
	position: sticky;
	top: 0;
	z-index: 100;
	width: min(1140px, calc(100% - 56px));
	margin: 16px auto 0;
	height: 60px;
	display: flex;
	align-items: center;
	padding: 0 18px;
	border-radius: 999px;
	border: 0.5px solid var(--sa-border);
}
.sa-nav {
	background: var(--sa-surface);
}
.sa-nav.scrolled {
	background: var(--sa-surface);
	border-color: var(--sa-border-md);
}
.sa-nav__logo,
.site-brand,
.admin-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.02em;
	margin-right: auto;
}
.sa-nav__logo-icon {
	width: 22px;
	height: 22px;
	border: 1.5px solid var(--sa-accent);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.sa-nav__logo-icon svg,
.sa-nav__mobile-logo-icon svg { width: 12px; height: 12px; }
.sa-nav__logo-accent { color: var(--sa-accent); }
.sa-nav__links,
.sa-nav__actions,
.site-nav {
	display: flex;
	align-items: center;
	gap: 4px;
}
.sa-nav__link,
.site-nav a {
	font-size: 13px;
	color: var(--sa-muted);
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 0.15s ease, background 0.15s ease;
}
.sa-nav__link:hover,
.site-nav a:hover {
	color: var(--sa-text);
	background: var(--sa-surface-2);
}
.sa-nav__link--active {
	color: var(--sa-text);
	background: var(--sa-surface-2);
}
.sa-nav__hamburger,
.sa-nav__mobile-close {
	display: none;
}
.admin-bar__mobile-toggle {
	display: none;
}
.sa-nav__mobile-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: var(--sa-surface);
	z-index: 200;
	flex-direction: column;
	padding: 20px;
}
.sa-nav__mobile-overlay.open { display: flex; }
.sa-nav__mobile-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 28px;
}
.sa-nav__mobile-links {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}
.sa-nav__mobile-link {
	font-size: 15px;
	color: var(--sa-muted);
	padding: 14px 10px;
	border-bottom: 0.5px solid var(--sa-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.sa-nav__mobile-cta { margin-top: 24px; }

.app-mobile-bar {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: min(1140px, calc(100% - 56px));
	margin: 12px auto 0;
	padding: 12px 16px;
	border-radius: 18px;
	background: var(--sa-surface);
	border: 0.5px solid var(--sa-border);
	box-shadow: var(--sa-shadow);
}
.app-mobile-bar__brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--sa-text);
}
.app-mobile-bar__brand span { color: var(--sa-accent); }
.app-mobile-bar__menu {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 999px;
	border: 0.5px solid var(--sa-border-md);
	background: var(--sa-surface-2);
	color: var(--sa-text);
	font-size: 12px;
}
.app-mobile-bar__menu i { font-size: 14px; color: var(--sa-accent); }

.app-menu-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 260;
	background: var(--sa-bg);
	padding: 16px;
	flex-direction: column;
}
.app-menu-overlay.open { display: flex; }
.app-menu-overlay__panel {
	width: min(420px, 100%);
	margin: 0 auto;
	padding: 18px;
	border-radius: 22px;
	background: var(--sa-surface);
	border: 0.5px solid var(--sa-border-md);
	box-shadow: var(--sa-shadow);
}
.app-menu-overlay__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}
.app-menu-overlay__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.app-menu-overlay__title span { color: var(--sa-accent); }
.app-menu-overlay__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 0.5px solid var(--sa-border-md);
	background: var(--sa-surface-2);
	color: var(--sa-text);
}
.app-menu-overlay__links {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.app-menu-overlay__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 14px;
	border-radius: 14px;
	background: var(--sa-bg);
	border: 0.5px solid var(--sa-border);
	color: var(--sa-text);
	font-size: 13px;
}
.app-menu-overlay__link.active {
	color: var(--sa-text);
	background: var(--sa-surface-2);
	border-color: var(--sa-border-md);
}
.app-menu-overlay__link span {
	color: var(--sa-muted);
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.app-menu-overlay__footer {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 0.5px solid var(--sa-border);
	font-size: 11px;
	color: var(--sa-muted);
}

.hero {
	padding: 80px 0 56px;
	margin-top: 0;
}
.hero > .panel + .panel,
.hero > .panel + .grid,
.hero > .grid + .panel,
.hero > .grid + .grid,
.hero > .panel + .plans-grid,
.hero > .plans-grid + .panel,
.hero > .plans-grid + .plans-grid {
	margin-top: 18px;
}
.hero__inner {
	display: grid;
	grid-template-columns: 1fr 272px;
	gap: 40px;
	align-items: start;
}
.hero__inner--wide {
	grid-template-columns: 1fr 420px;
}
.hero__finding-stack {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 10px;
}
.hero__grade-card {
	background: var(--sa-surface);
	border: 0.5px solid var(--sa-border-md);
	border-radius: var(--radius-md);
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.hero__grade-letter {
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	color: var(--sa-amber);
}
.hero__grade-score {
	font-size: 14px;
	font-weight: 600;
	color: var(--sa-text);
}
.hero__grade-sub {
	font-size: 10px;
	color: var(--sa-muted);
	margin-top: 2px;
}
.hero__grade-pills {
	display: flex;
	gap: 5px;
	margin-top: 5px;
	flex-wrap: wrap;
}
.hero__finding-card {
	background: var(--sa-surface);
	border: 0.5px solid var(--sa-border-md);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.hero__finding-head {
	padding: 8px 12px;
	background: var(--sa-surface-2);
	border-bottom: 0.5px solid var(--sa-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.hero__finding-title {
	font-size: 11px;
	font-weight: 600;
	color: var(--sa-text);
}
.hero__finding-sev {
	font-size: 9px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 3px;
	flex-shrink: 0;
	background: var(--sa-red-bg);
	color: var(--sa-red);
	border: 0.5px solid var(--sa-red-border);
}
.hero__finding-body {
	padding: 8px 12px;
}
.hero__finding-label {
	font-size: 9px;
	font-weight: 700;
	color: var(--sa-muted);
	letter-spacing: 0.06em;
	margin-bottom: 2px;
}
.hero__finding-text {
	font-size: 10px;
	color: var(--sa-text);
	line-height: 1.5;
	margin-bottom: 6px;
}
.hero__finding-text:last-child {
	margin-bottom: 0;
}
.hero__finding-code {
	background: var(--sa-bg);
	padding: 1px 4px;
	border-radius: 3px;
	font-family: var(--sa-mono);
	font-size: 9px;
}
.check-table {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 32px;
}
.check-group {
	background: var(--sa-surface);
	border: 0.5px solid var(--sa-border-md);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.check-group__header {
	padding: 14px 16px;
	border-bottom: 0.5px solid var(--sa-border);
	display: flex;
	align-items: center;
	gap: 10px;
}
.check-group__icon {
	font-size: 18px;
	color: var(--sa-accent);
	flex-shrink: 0;
}
.check-group__title {
	font-size: 13px;
	font-weight: 600;
	color: var(--sa-text);
}
.check-group__count {
	margin-left: auto;
	font-size: 10px;
	font-weight: 700;
	color: var(--sa-muted);
	background: var(--sa-surface-2);
	padding: 2px 8px;
	border-radius: 999px;
	white-space: nowrap;
	font-family: var(--sa-mono);
}
.check-group__items {
	padding: 10px 16px 14px;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.check-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	font-size: 12px;
	color: var(--sa-muted);
	border-bottom: 0.5px solid var(--sa-border);
}
.check-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.check-item:first-child {
	padding-top: 0;
}
.check-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sa-border-md);
	flex-shrink: 0;
}
.hero__eyebrow {
	font-family: var(--sa-mono);
	font-size: 11px;
	color: var(--sa-accent);
	letter-spacing: 0.07em;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.hero__eyebrow-dot,
.pulse {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sa-accent);
	box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.45);
	animation: saPulse 2.2s infinite;
}
.hero__h1 {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 500;
	color: var(--sa-text);
	letter-spacing: -0.025em;
	line-height: 1.18;
	margin: 0 0 18px;
}
.hero__h1 em { font-style: normal; color: var(--sa-accent); }
.hero__sub {
	font-size: 15px;
	color: var(--sa-muted);
	line-height: 1.7;
	max-width: 460px;
	margin-bottom: 30px;
}
.hero__input-row,
.url-add-wrap {
	display: flex;
	gap: 8px;
}
.hero__url-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	background: var(--sa-surface);
	border: 0.5px solid var(--sa-border-md);
	border-radius: var(--radius-md);
	overflow: hidden;
	height: 44px;
}
.hero__url-prefix,
.url-prefix-box {
	font-family: var(--sa-mono);
	font-size: 12px;
	color: var(--sa-muted);
	padding: 0 10px 0 14px;
	border-right: 0.5px solid var(--sa-border);
	height: 100%;
	display: flex;
	align-items: center;
	white-space: nowrap;
	flex-shrink: 0;
}
.hero__url-input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	font-family: var(--sa-mono);
	font-size: 13px;
	color: var(--sa-text);
	padding: 0 14px;
	height: 100%;
}
.hero__url-input::placeholder { color: var(--sa-hint); }
.hero__note,
.ob-free-note,
.final-cta__sub {
	font-size: 11px;
	color: var(--sa-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}
.hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border-top: 0.5px solid var(--sa-border);
	padding-top: 28px;
}
.hero__stat {
	padding-right: 24px;
	border-right: 0.5px solid var(--sa-border);
	margin-right: 24px;
}
.hero__stat:last-child {
	border-right: none;
	margin-right: 0;
	padding-right: 0;
}
.hero__stat-n {
	font-size: 22px;
	font-weight: 500;
	color: var(--sa-text);
	letter-spacing: -0.025em;
	line-height: 1;
	margin-bottom: 4px;
}
.hero__stat-l {
	font-size: 11px;
	color: var(--sa-muted);
	line-height: 1.4;
}

.terminal,
.report-chrome {
	background: var(--sa-surface);
	border: 0.5px solid var(--sa-border-md);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.terminal__bar,
.report-header,
.alert-feed__header,
.history-card__header,
.url-table-card__header {
	padding: 14px 20px;
	border-bottom: 0.5px solid var(--sa-border);
	display: flex;
	align-items: center;
	gap: 10px;
}
.terminal__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}
.terminal__title,
.report-header__logo,
.history-card__title,
.alert-feed__title,
.url-table-card__title {
	font-size: 13px;
	font-weight: 500;
	color: var(--sa-text);
	letter-spacing: -0.01em;
}
.terminal__body {
	padding: 18px 20px 20px;
	font-family: var(--sa-mono);
	font-size: 11px;
	line-height: 1.85;
}
.terminal__line {
	margin-bottom: 2px;
	color: var(--sa-muted);
}
.terminal__cursor {
	display: inline-block;
	width: 7px;
	height: 12px;
	margin-left: 4px;
	background: var(--sa-accent);
	animation: saCursor 1.1s steps(1) infinite;
}
.scan-progress-wrap {
	height: 2px;
	background: var(--sa-border);
	border-radius: 1px;
	overflow: hidden;
	margin: 6px 0 10px;
}
.scan-progress-bar {
	height: 100%;
	background: var(--sa-accent);
	border-radius: 1px;
	width: 0%;
	transition: width 0.4s ease;
}
#results-block {
	display: none;
	flex-direction: column;
	gap: 0;
}

.logo-strip {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 24px;
}
.logo-strip__label {
	font-size: 10px;
	letter-spacing: 0.08em;
	color: var(--sa-hint);
	text-transform: uppercase;
	font-family: var(--sa-mono);
}
.logo-strip__logos {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
}
.logo-strip__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 12px;
	border: 0.5px solid var(--sa-border);
	border-radius: var(--radius-md);
	background: var(--sa-surface-2);
	font-size: 12px;
	color: var(--sa-muted);
}

.hiw-steps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
.hiw-step {
	display: flex;
	flex-direction: column;
}
.hiw-step__num-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}
.hiw-step__num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--sa-surface-2);
	border: 0.5px solid var(--sa-border-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sa-mono);
	font-size: 11px;
	color: var(--sa-muted);
}
.hiw-step__line {
	height: 0.5px;
	flex: 1;
	background: var(--sa-border);
}
.hiw-step__icon {
	width: 50px;
	height: 50px;
	border-radius: 14px;
	background: rgba(249, 115, 22, 0.08);
	border: 0.5px solid rgba(249, 115, 22, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: var(--sa-accent);
	margin-bottom: 14px;
}
.hiw-step__title {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.02em;
	margin-bottom: 8px;
}
.hiw-step__desc {
	font-size: 13px;
	color: var(--sa-muted);
	line-height: 1.7;
	margin-bottom: 14px;
}
.hiw-flow {
	background: var(--sa-surface);
	border: 0.5px solid var(--sa-border);
	border-radius: var(--radius-md);
	padding: 20px 24px;
	display: flex;
	align-items: center;
	gap: 0;
	margin-top: 28px;
}
.hiw-flow__block {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 20px;
	border-right: 0.5px solid var(--sa-border);
}
.hiw-flow__block:first-child { padding-left: 0; }
.hiw-flow__block:last-child { border-right: none; }
.hiw-flow__label {
	font-family: var(--sa-mono);
	font-size: 10px;
	color: var(--sa-hint);
	letter-spacing: 0.05em;
	margin-bottom: 8px;
}
.hiw-flow__check {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--sa-muted);
	margin-bottom: 4px;
}
.hiw-flow__check i {
	font-size: 13px;
	color: var(--sa-accent);
}

.step-detail {
	background: var(--sa-surface);
	border: 0.5px solid var(--sa-border);
	border-radius: var(--radius-md);
	padding: 12px;
	width: 100%;
	margin-top: 4px;
}
.step-detail__row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	font-family: var(--sa-mono);
	font-size: 11px;
	color: var(--sa-muted);
	border-bottom: 0.5px solid var(--sa-border);
}
.step-detail__row:last-child { border-bottom: none; }
.step-detail__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

.pricing-page { padding: 72px 0 80px; }
.pricing-header { text-align: center; margin-bottom: 36px; }
.billing-toggle-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 44px;
}
.billing-label {
	font-size: 13px;
	color: var(--sa-muted);
	transition: color 0.15s;
}
.billing-label.active { color: var(--sa-text); }
.toggle-track {
	width: 44px;
	height: 24px;
	border-radius: 12px;
	background: var(--sa-hint);
	border: 0.5px solid var(--sa-border-md);
	cursor: pointer;
	position: relative;
	transition: background 0.2s;
	flex-shrink: 0;
}
.toggle-track.on {
	background: rgba(249, 115, 22, 0.12);
	border-color: rgba(249, 115, 22, 0.3);
}

.toggle-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--sa-muted);
	position: absolute;
	top: 2px;
	left: 3px;
	transition: transform 0.2s, background 0.2s;
}
.toggle-track.on .toggle-thumb {
	transform: translateX(20px);
	background: var(--sa-accent);
}
.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.pricing-card {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
.pricing-card__top { padding: 24px; }
.pricing-card__tier {
	font-family: var(--sa-mono);
	font-size: 11px;
	letter-spacing: 0.07em;
	color: var(--sa-muted);
	margin-bottom: 10px;
}
.pricing-card__price-row {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 4px;
}
.pricing-card__price { font-size: 40px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.pricing-card__price-per { font-size: 12px; color: var(--sa-muted); }
.pricing-card__ann { min-height: 18px; font-size: 10px; color: var(--sa-muted); font-family: var(--sa-mono); }
.pricing-card__scans { font-size: 11px; color: var(--sa-accent); margin-top: 10px; font-family: var(--sa-mono); white-space: pre-line; }
.pricing-card__divider { height: 0.5px; background: var(--sa-border); margin: 0 24px; }
.pricing-card__features {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 24px 24px;
	flex: 1;
}
.pricing-card__feat { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--sa-muted); }
.pricing-card__feat .check { color: var(--sa-accent); }
.pricing-card__feat .dash { color: var(--sa-hint); }
.pricing-card__feat--highlight { color: var(--sa-text); }
.pricing-card__foot { padding: 0 24px 24px; margin-top: auto; }
/* ── Feature comparison grid ── */
.feat-compare {
	margin: 16px auto 0;
	width: 100%;
}
.feat-compare__header {
	margin-bottom: 20px;
}
.feat-compare__title {
	font-size: 18px;
	font-weight: 600;
	color: var(--sa-text);
	letter-spacing: -0.02em;
}
.feat-compare__scroll-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--radius-xl);
	border: 0.5px solid var(--sa-border);
	background: var(--sa-surface);
}
.feat-compare__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
/* column sizing */
.feat-compare__label-col {
	width: 30%;
	min-width: 160px;
}
.feat-compare__plan-col {
	text-align: center;
	vertical-align: top;
	padding: 14px 12px 12px;
	border-left: 0.5px solid var(--sa-border);
}
.feat-compare__plan-col--highlight {
	background: rgba(249, 115, 22, 0.04);
	border-left-color: rgba(249, 115, 22, 0.2);
	border-right: 0.5px solid rgba(249, 115, 22, 0.2);
}
/* plan header badge */
.feat-compare__plan-badge {
	font-family: var(--sa-mono);
	font-size: 9px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--sa-accent-text);
	background: var(--sa-green);
	border-radius: 4px;
	padding: 2px 7px;
	display: inline-block;
	margin-bottom: 8px;
}
.feat-compare__plan-badge--empty {
	background: transparent;
	color: transparent;
}
.feat-compare__plan-name {
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	color: var(--sa-muted);
	text-transform: uppercase;
	margin-bottom: 8px;
}
/* price display */
.feat-compare__price-main {
	display: block;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.04em;
	color: var(--sa-text);
	line-height: 1;
}
.feat-compare__plan-per {
	font-size: 11px;
	font-weight: 400;
	color: var(--sa-muted);
	letter-spacing: 0;
}
.feat-compare__plan-ann {
	min-height: 15px;
	font-size: 10px;
	color: var(--sa-green);
	font-family: var(--sa-mono);
	margin-top: 4px;
	font-weight: 500;
}
/* group header row */
.feat-compare__group-label {
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--sa-accent-text);
	background: var(--sa-accent);
	padding: 8px 16px;
	font-weight: 500;
}
/* feature rows */
.feat-compare__row {
	border-top: 0.5px solid var(--sa-border);
}
.feat-compare__row:hover {
	background: var(--sa-surface-2);
}
.feat-compare__feat-label {
	padding: 11px 16px;
	font-size: 12px;
	color: var(--sa-text);
	font-weight: 400;
	white-space: nowrap;
}
.feat-compare__cell {
	text-align: center;
	padding: 10px 8px;
	border-left: 0.5px solid var(--sa-border);
	vertical-align: middle;
}
.feat-compare__cell--highlight {
	background: rgba(249, 115, 22, 0.04);
	border-left-color: rgba(249, 115, 22, 0.2);
	border-right: 0.5px solid rgba(249, 115, 22, 0.2);
}
.feat-compare__cell--value {
	font-size: 12px;
	color: var(--sa-text);
	font-family: var(--sa-mono);
}
.feat-compare__val {
	display: inline-block;
}
.feat-compare__check,
.feat-compare__dash {
	display: inline-block;
	vertical-align: middle;
}
/* CTA row */
.feat-compare__cta-row td {
	padding: 14px 8px;
	border-top: 0.5px solid var(--sa-border);
}
.feat-compare__cell--cta {
	text-align: center;
	border-left: 0.5px solid var(--sa-border);
}
.feat-compare__cell--cta.feat-compare__cell--highlight {
	background: rgba(249, 115, 22, 0.04);
	border-left-color: rgba(249, 115, 22, 0.2);
	border-right: 0.5px solid rgba(249, 115, 22, 0.2);
}
.feat-compare__cta-btn {
	font-size: 11px;
	padding: 6px 12px;
	white-space: nowrap;
}
/* Billing page variant — full width, no outer margin */
.feat-compare--billing {
	width: 100%;
	margin-top: 0;
}
/* Current plan column */
.feat-compare__plan-badge--current {
	background: var(--sa-accent);
}
.feat-compare__plan-col--current {
	background: rgba(249, 115, 22, 0.06);
	border-left-color: rgba(249, 115, 22, 0.3);
	border-right: 0.5px solid rgba(249, 115, 22, 0.3);
}
.feat-compare__cell--current {
	background: rgba(249, 115, 22, 0.04);
	border-left-color: rgba(249, 115, 22, 0.2);
	border-right: 0.5px solid rgba(249, 115, 22, 0.2);
}
/* JS-selected column highlight */
.feat-compare__plan-col--selected {
	background: rgba(249, 115, 22, 0.10) !important;
	border-left-color: rgba(249, 115, 22, 0.4) !important;
	border-right: 0.5px solid rgba(249, 115, 22, 0.4) !important;
}
.feat-compare__cell--selected {
	background: rgba(249, 115, 22, 0.07) !important;
	border-left-color: rgba(249, 115, 22, 0.3) !important;
	border-right: 0.5px solid rgba(249, 115, 22, 0.3) !important;
}

.pricing-faq {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 36px 0;
}
.faq-item {
	padding: 16px 18px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.faq-item i {
	font-size: 16px;
	color: var(--sa-accent);
	flex-shrink: 0;
	margin-top: 2px;
}
.faq-item__title {
	font-size: 12px;
	font-weight: 500;
	color: var(--sa-text);
	margin-bottom: 4px;
}
.faq-item__desc {
	font-size: 11px;
	color: var(--sa-muted);
	line-height: 1.6;
}
.enterprise-bar {
	padding: 20px 24px;
	display: flex;
	align-items: center;
	gap: 20px;
}
.enterprise-bar__left { flex: 1; }
.enterprise-bar__title {
	font-size: 14px;
	font-weight: 500;
	color: var(--sa-text);
	margin-bottom: 4px;
}
.enterprise-bar__sub {
	font-size: 12px;
	color: var(--sa-muted);
	margin-bottom: 10px;
}
.enterprise-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.enterprise-pill {
	font-family: var(--sa-mono);
	font-size: 10px;
	color: var(--sa-muted);
	background: var(--sa-surface-2);
	padding: 2px 8px;
	border-radius: 4px;
	border: 0.5px solid var(--sa-border);
}

.signup-wrap,
.auth-shell {
	min-height: calc(100vh - 120px);
	display: flex;
	flex-direction: column;
}
.signup-panels {
	flex: 1;
	padding: 28px 20px 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}
.signup-panel {
	width: 100%;
	max-width: 420px;
	display: none;
	flex-direction: column;
}
.signup-panel.active { display: flex; }
.panel-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	font-size: 14px;
	font-weight: 500;
	color: var(--sa-text);
	letter-spacing: -0.02em;
	margin-bottom: 26px;
}
.panel-logo__icon {
	width: 22px;
	height: 22px;
	border: 1.5px solid var(--sa-accent);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.panel-logo__icon svg { width: 12px; height: 12px; }
.panel-logo__accent { color: var(--sa-accent); }
.panel-heading {
	font-size: 20px;
	font-weight: 500;
	color: var(--sa-text);
	text-align: center;
	letter-spacing: -0.02em;
	margin-bottom: 6px;
}
.panel-sub {
	font-size: 13px;
	color: var(--sa-muted);
	text-align: center;
	line-height: 1.6;
	margin-bottom: 28px;
}
.name-row,
.ob-plan-grid {
	display: grid;
	gap: 10px;
}
.name-row { grid-template-columns: 1fr 1fr; }
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.team-invite-form {
	display: flex;
	gap: 12px;
	align-items: flex-end;
	flex-wrap: wrap;
}
.team-invite-field {
	flex: 1 1 220px;
	min-width: 180px;
}
.team-invite-field--role {
	flex-basis: 160px;
}
.team-invite-field--button {
	flex: 0 0 170px;
	margin-left: auto;
}
.team-invite-field--button .btn {
	width: 100%;
}
.team-table-wrap {
	overflow-x: auto;
}
.team-table {
	width: 100%;
	min-width: 980px;
	border-collapse: collapse;
}
.team-table thead th {
	padding: 12px 12px;
	text-align: left;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sa-muted);
	border-bottom: 1px solid var(--sa-border);
}
.team-table tbody td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--sa-border);
	vertical-align: top;
}
.team-table tbody tr:hover {
	background: var(--sa-surface-2);
}
.team-member {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.team-member__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.team-row-form {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: nowrap;
	justify-content: flex-start;
	white-space: nowrap;
}
.team-row-form__select {
	min-width: 94px;
	width: 94px;
}
.team-row-form .btn {
	white-space: nowrap;
}
@media (max-width: 900px) {
	.team-row-form {
		flex-wrap: wrap;
	}
	.team-row-form__select {
		width: auto;
		min-width: 110px;
	}
}
.ob-plan-grid { grid-template-columns: repeat(3, 1fr); margin-bottom: 14px; }
.sa-checkbox-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 20px;
	font-size: 12px;
	color: var(--sa-muted);
	line-height: 1.55;
}
.sa-checkbox {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	margin-top: 1px;
	border-radius: 4px;
	border: 0.5px solid var(--sa-border-md);
	background: var(--sa-surface-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: transparent;
}
.sa-checkbox.checked {
	background: var(--sa-accent);
	border-color: var(--sa-accent);
	color: var(--sa-accent-text);
}
.pw-strength {
	display: none;
	margin-top: 8px;
}
.pw-bars {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	margin-bottom: 6px;
}
.pw-bar {
	height: 4px;
	border-radius: 999px;
	background: var(--sa-border);
}
.pw-bar.on.weak { background: var(--sa-red); }
.pw-bar.on.fair { background: var(--sa-amber); }
.pw-bar.on.strong { background: var(--sa-green); }
.pw-label {
	font-size: 11px;
	color: var(--sa-muted);
	font-family: var(--sa-mono);
}
.sa-input,
.sa-input-wrap input,
.url-add-wrap input {
	width: 100%;
	height: 42px;
	background: var(--sa-surface);
	border: 0.5px solid var(--sa-border-md);
	border-radius: var(--radius-md);
	font-size: 13px;
	color: var(--sa-text);
	padding: 0 40px 0 14px;
	outline: none;
	transition: border-color 0.15s, background 0.15s;
}
.sa-textarea {
	height: auto;
	min-height: 96px;
	padding: 10px 14px;
	resize: vertical;
	line-height: 1.5;
}
.sa-input::placeholder { color: var(--sa-hint); }
.sa-input:focus { border-color: var(--sa-border-focus); }
.sa-input.valid { border-color: var(--sa-green-border); }
.sa-input.error { border-color: var(--sa-red-border); }
.sa-input-wrap { position: relative; display: flex; align-items: center; }
.sa-input-icon {
	position: absolute;
	right: 12px;
	font-size: 15px;
	color: var(--sa-hint);
	pointer-events: none;
	transition: color 0.15s;
}
.sa-input-icon.valid { color: var(--sa-accent); }
.sa-input-icon.error { color: var(--sa-red); }
.sa-field-error { font-size: 11px; color: var(--sa-red); display: none; }
.sa-field-error.visible { display: block; }
.auth-state {
	display: grid;
	gap: 16px;
	margin-bottom: 20px;
}
.auth-state__icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	margin: 0 auto;
}
.auth-state__icon--success {
	background: var(--sa-green-bg);
	border: 0.5px solid var(--sa-green-border);
	color: var(--sa-green);
}
/* verify/success icons keep green (semantic) */
.auth-state__icon--error {
	background: var(--sa-red-bg);
	border: 0.5px solid var(--sa-red-border);
	color: var(--sa-red);
}
.auth-state__title {
	font-size: 20px;
	font-weight: 500;
	color: var(--sa-text);
	text-align: center;
	letter-spacing: -0.02em;
	margin: 0;
}
.auth-state__sub {
	font-size: 13px;
	color: var(--sa-muted);
	text-align: center;
	line-height: 1.6;
	margin: 0;
}
.auth-state__note {
	padding: 14px;
	border-radius: var(--radius-md);
	border: 0.5px solid var(--sa-border);
	background: var(--sa-surface);
	display: grid;
	gap: 8px;
}
.auth-state__note-label {
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sa-hint);
}
.auth-state__note-value {
	font-family: var(--sa-mono);
	font-size: 11px;
	line-height: 1.6;
	word-break: break-word;
	color: var(--sa-text);
}
.auth-state__actions {
	display: grid;
	gap: 10px;
}
.sa-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0 18px;
}
.sa-divider__line { height: 0.5px; flex: 1; background: var(--sa-border); }
.sa-divider__text {
	font-size: 10px;
	color: var(--sa-hint);
	font-family: var(--sa-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.sso-row {
	display: grid;
	gap: 10px;
}
.sso-btn {
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--sa-surface);
	border: 0.5px solid var(--sa-border-md);
	border-radius: var(--radius-md);
	color: var(--sa-text);
	font-size: 12px;
}
.verify-icon,
.success-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--sa-green-bg);
	border: 0.5px solid var(--sa-green-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: var(--sa-green);
	margin: 0 auto 20px;
}
.verify-email-display { text-align: center; font-family: var(--sa-mono); font-size: 11px; color: var(--sa-hint); margin-bottom: 20px; }
.verify-resend { text-align: center; font-size: 12px; color: var(--sa-muted); margin: 10px 0 20px; }
.otp-row {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
	margin-bottom: 20px;
}
.otp-input {
	height: 44px;
	background: var(--sa-surface);
	border: 0.5px solid var(--sa-border-md);
	border-radius: var(--radius-md);
	text-align: center;
	color: var(--sa-text);
	font-family: var(--sa-mono);
	font-size: 16px;
}
.ob-plan {
	border: 0.5px solid var(--sa-border-md);
	border-radius: var(--radius-md);
	padding: 12px 10px;
	cursor: pointer;
	transition: all 0.15s;
	background: var(--sa-surface);
}
.ob-plan:hover { border-color: var(--sa-border-md); }
.ob-plan.selected {
	border-color: var(--sa-accent);
	background: rgba(249, 115, 22, 0.06);
}

.ob-plan__name {
	font-family: var(--sa-mono);
	font-size: 10px;
	color: var(--sa-muted);
	letter-spacing: 0.05em;
	margin-bottom: 6px;
}
.ob-plan.selected .ob-plan__name { color: var(--sa-accent); }
.ob-plan__price {
	font-size: 16px;
	font-weight: 500;
	color: var(--sa-text);
	letter-spacing: -0.02em;
}
.ob-plan__scans {
	font-size: 11px;
	color: var(--sa-muted);
	margin-top: 2px;
}
.ob-plan__check {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 0.5px solid var(--sa-border-md);
	margin-top: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ob-plan.selected .ob-plan__check {
	background: var(--sa-accent);
	border-color: var(--sa-accent);
}

.ob-plan.selected .ob-plan__check i { display: block; }
.ob-plan__check i {
	font-size: 10px;
	color: var(--sa-accent-text);
	display: none;
}
.url-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
	min-height: 14px;
}
.url-chip {
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: var(--sa-mono);
	font-size: 11px;
	color: var(--sa-accent);
	background: rgba(249, 115, 22, 0.08);
	border: 0.5px solid rgba(249, 115, 22, 0.25);
	padding: 4px 10px;
	border-radius: 5px;
}
.url-chip--deprecated {
	flex-wrap: wrap;
	gap: 8px;
}
.url-chip i { font-size: 12px; cursor: pointer; color: var(--sa-muted); }
.url-chip i:hover { color: var(--sa-red); }
.skip-link {
	text-align: center;
	font-size: 12px;
	color: var(--sa-muted);
	cursor: pointer;
	margin-top: 6px;
}
.skip-link:hover { color: var(--sa-text); }
.success-checks {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 24px;
}
.success-check-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 14px;
	border-radius: var(--radius-md);
	background: var(--sa-surface);
	border: 0.5px solid var(--sa-border);
}
.success-check-item i {
	font-size: 15px;
	color: var(--sa-green);
	flex-shrink: 0;
	margin-top: 1px;
}
.success-check-item__text { font-size: 12px; color: var(--sa-muted); line-height: 1.5; }
.success-check-item__text strong { color: var(--sa-text); font-weight: 500; }

.dashboard {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	min-height: 100vh;
	gap: 0;
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
}
.sidebar {
	background: var(--sa-sidebar-bg);
	border-right: 1px solid var(--sa-sidebar-border);
	border-radius: 0;
	padding: 18px;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	position: sticky;
	top: 0;
}
.sidebar__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px 18px;
	margin-bottom: 8px;
	border-bottom: 0.5px solid var(--sa-sidebar-border);
}
.sidebar__logo-icon {
	width: 22px;
	height: 22px;
	border: 1.5px solid var(--sa-sidebar-active);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sidebar__logo-text {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--sa-sidebar-text);
}
.sidebar__logo-text span { color: var(--sa-sidebar-active); }
.sidebar__nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 0;
	flex: 1;
}
.sidebar__section-label {
	font-family: var(--sa-mono);
	font-size: 10px;
	color: var(--sa-sidebar-muted);
	letter-spacing: 0.06em;
	padding: 14px 10px 6px;
}
.sidebar__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	color: var(--sa-sidebar-muted);
	font-size: 13px;
}
.sidebar__link:hover {
	color: var(--sa-sidebar-text);
	background: var(--sa-sidebar-hover);
}
.sidebar__link.active {
	color: var(--sa-sidebar-active-text);
	background: var(--sa-sidebar-active);
	border-radius: 0;
}
.sidebar__badge { margin-left: auto; }
.sidebar__footer {
	padding-top: 14px;
	border-top: 0.5px solid var(--sa-sidebar-border);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sidebar__plan {
	font-family: var(--sa-mono);
	font-size: 10px;
	color: var(--sa-sidebar-active);
	letter-spacing: 0.08em;
	display: flex;
	align-items: center;
	gap: 6px;
}
.sidebar__user {
	display: flex;
	align-items: center;
	gap: 10px;
}
.sidebar__avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(249, 115, 22, 0.15);
	border: 0.5px solid rgba(249, 115, 22, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--sa-sidebar-active);
}

.sidebar__user-name {
	font-size: 12px;
	color: var(--sa-sidebar-muted);
	word-break: break-word;
}
.dash-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 18px 80px;
}
.dash-topbar {
	background: var(--sa-surface);
	border: 0.5px solid var(--sa-border);
	border-radius: var(--radius-lg);
	padding: 16px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	box-shadow: var(--sa-shadow);
}
.dash-topbar__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.dash-topbar__title {
	margin: 0;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.03em;
}
.dash-export-menu {
	position: relative;
}
.dash-export-menu > summary {
	list-style: none;
}
.dash-export-menu > summary::-webkit-details-marker {
	display: none;
}
.dash-export-menu__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 20;
	min-width: 260px;
	padding: 10px;
	border-radius: var(--radius-lg);
	border: 0.5px solid var(--sa-border-md);
	background: var(--sa-surface);
	box-shadow: var(--sa-shadow);
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.dash-export-menu__link {
	padding: 10px 12px;
	border-radius: var(--radius-md);
	color: var(--sa-text);
	font-size: 13px;
}
.dash-export-menu__link:hover {
	background: var(--sa-surface-2);
}
.dash-export-menu__hint {
	padding: 8px 12px 4px;
	color: var(--sa-muted);
	font-size: 11px;
	line-height: 1.45;
}
.dash-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.is-loading[data-ajax-fragment],
.panel.is-loading,
form.is-loading {
	position: relative;
}
.is-loading[data-ajax-fragment]::before,
.panel.is-loading::before,
form.is-loading::before {
	content: "Refreshing dashboard data...";
	position: absolute;
	inset: 14px;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 22px;
	border-radius: 22px;
	background: var(--sa-surface);
	border: 0.5px solid var(--sa-border-md);
	backdrop-filter: blur(10px);
	font-family: var(--sa-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--sa-accent);
	box-shadow: var(--sa-shadow);
}
.ajax-status {
	margin-bottom: 0;
}
.ajax-status__title {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.02em;
	margin-bottom: 4px;
}
.ajax-status__message {
	font-size: 12px;
	color: var(--sa-muted);
	line-height: 1.6;
}
.ajax-status--error {
	border-color: var(--sa-red-border);
	background: var(--sa-red-bg);
}
.ajax-status--error .ajax-status__title {
	color: var(--sa-red);
}
.sa-modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 1200;
}
.sa-modal[hidden] {
	display: none;
}
.sa-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 19, 23, 0.58);
	backdrop-filter: blur(8px);
}
.sa-modal__dialog {
	position: relative;
	width: min(560px, 100%);
	background: var(--sa-surface);
	border: 0.5px solid var(--sa-border);
	border-radius: 18px;
	box-shadow: var(--sa-shadow);
	padding: 24px;
	z-index: 1;
}
.sa-modal__title {
	margin: 0 0 10px;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.03em;
}
.sa-modal__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 20px;
}
.dashboard-settings__hero {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.dashboard-settings__title {
	font-size: clamp(28px, 3vw, 38px);
	line-height: 1.08;
	letter-spacing: -0.04em;
	margin: 0;
}
.dashboard-settings__chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.dashboard-settings__feature-list {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.dashboard-settings__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.dashboard-settings__security,
.dashboard-settings__danger {
	grid-column: 1 / -1;
}
.dashboard-settings__form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
.dashboard-settings__danger-form {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.metric-strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.metric-card {
	padding: 16px 18px;
}
.metric-card__label {
	font-family: var(--sa-mono);
	font-size: 10px;
	color: var(--sa-hint);
	letter-spacing: 0.06em;
	margin-bottom: 10px;
}
.metric-card__value {
	font-size: 34px;
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1;
	margin-bottom: 8px;
}
.metric-card__sub {
	font-size: 11px;
	color: var(--sa-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}
.metric-card__sub.up { color: var(--sa-green); }
.metric-card__sub.down { color: var(--sa-red); }
.dash-mid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 292px;
	gap: 12px;
}
.sites-section + .sites-section {
	margin-top: 12px;
}
.sites-add-form {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
}
.sites-add-form__field {
	flex: 1 1 240px;
	margin-bottom: 0;
}
.sites-add-form__actions {
	display: flex;
	align-items: flex-end;
}
.sites-table-wrap {
	overflow-x: auto;
}
.sites-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 860px;
}
.sites-table--compact {
	min-width: 0;
	table-layout: fixed;
}
.sites-table--compact th:first-child,
.sites-table--compact td:first-child {
	width: 72%;
}
.sites-table--compact th:nth-child(2),
.sites-table--compact td:nth-child(2) {
	width: 14%;
}
.sites-table--compact th:nth-child(3),
.sites-table--compact td:nth-child(3) {
	width: 14%;
}
.sites-table--compact td:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sites-table th,
.sites-table td {
	padding: 12px 0;
	border-bottom: 0.5px solid var(--sa-border);
	vertical-align: top;
	text-align: left;
}
.sites-table th {
	padding-top: 0;
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sa-hint);
}
.sites-table tbody tr:last-child td {
	border-bottom: 0;
}
.sites-table th:not(:first-child),
.sites-table td:not(:first-child) {
	padding-left: 12px;
}
.sites-table__input {
	height: 38px;
}
.sites-table__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	font-family: var(--sa-mono);
	font-size: 10px;
	color: var(--sa-muted);
	padding-top: 9px;
}
.sites-table__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.url-table-card,
.alert-feed {
	overflow: hidden;
}
.url-table-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 14px 10px;
}
.url-table-card__title {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.url-table-filter {
	min-width: 158px;
	height: 34px;
	padding: 0 12px;
	border-radius: var(--radius-md);
	border: 0.5px solid var(--sa-border-md);
	background: var(--sa-bg);
	color: var(--sa-text);
}
.audit-log-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.audit-log-title {
	font-size: 24px;
	line-height: 1.15;
	letter-spacing: -0.03em;
	margin: 0 0 6px;
	font-weight: 500;
}
.audit-log-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
}
.audit-log-filter {
	display: grid;
	gap: 6px;
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--sa-hint);
}
.audit-log-filter .url-table-filter {
	min-width: 140px;
}
.url-col-headers {
	display: grid;
	grid-template-columns: 18px 108px minmax(0, 1fr) 96px 96px 104px 128px 28px;
	gap: 0 10px;
	padding: 6px 14px;
	border-bottom: 0.5px solid var(--sa-border);
}
.url-col-header {
	font-family: var(--sa-mono);
	font-size: 9px;
	color: var(--sa-hint);
	letter-spacing: 0.05em;
}
.url-row {
	display: grid;
	grid-template-columns: 18px 108px minmax(0, 1fr) 96px 96px 104px 128px 28px;
	gap: 0 10px;
	align-items: center;
	padding: 9px 14px;
	border-bottom: 0.5px solid var(--sa-border);
}
.url-row:hover { background: var(--sa-surface-2); }
.url-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot-green { background: var(--sa-green); }
.dot-red   { background: var(--sa-red); }
.dot-amber { background: var(--sa-amber); }
.dot-muted { background: var(--sa-muted); }
.url-domain {
	font-family: var(--sa-mono);
	font-size: 11px;
	color: var(--sa-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.audit-log-type {
	min-width: 0;
	display: grid;
	gap: 2px;
}
.audit-log-type__title {
	font-size: 11px;
	font-weight: 500;
	color: var(--sa-text);
	line-height: 1.2;
}
.audit-log-type__sub {
	font-family: var(--sa-mono);
	font-size: 10px;
	color: var(--sa-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.audit-score {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	text-align: right;
}
.audit-score__label {
	font-family: var(--sa-mono);
	font-size: 9px;
	color: var(--sa-hint);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.1;
}
.audit-score__value {
	font-size: 11px;
	font-weight: 500;
	line-height: 1.1;
}
.url-next  { font-family: var(--sa-mono); font-size: 10px; color: var(--sa-muted); text-align: right; }
.url-issues { font-family: var(--sa-mono); font-size: 10px; text-align: right; }
.url-chevron { font-size: 12px; color: var(--sa-hint); text-align: right; }
.url-table-more {
	padding: 8px 14px;
	border-top: 0.5px solid var(--sa-border);
	font-family: var(--sa-mono);
	font-size: 10px;
	color: var(--sa-hint);
}
.audit-log-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.audit-log-pager {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.audit-log-pager__label {
	color: var(--sa-hint);
}
.audit-log-page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 30px;
	padding: 0 10px;
	border-radius: var(--radius-md);
	border: 0.5px solid var(--sa-border-md);
	background: var(--sa-bg);
	color: var(--sa-text);
	font-size: 11px;
	line-height: 1;
	white-space: nowrap;
}
.audit-log-page-link:hover {
	background: var(--sa-surface-2);
}
.audit-log-page-link--disabled {
	opacity: 0.45;
}
.audit-log-page-link--current {
	background: var(--sa-accent);
	border-color: transparent;
	color: var(--sa-accent-text);
}
.url-empty-state {
	padding: 22px 18px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
.url-empty-state__title {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.url-empty-state__text {
	font-size: 12px;
	color: var(--sa-muted);
	max-width: 360px;
}
.url-empty-state__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.alert-feed {
	display: flex;
	flex-direction: column;
}
.alert-item {
	padding: 10px 14px;
	border-bottom: 0.5px solid var(--sa-border);
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.alert-item__top {
	display: flex;
	align-items: center;
	gap: 6px;
}
.alert-item__domain {
	font-family: var(--sa-mono);
	font-size: 10px;
	color: var(--sa-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.alert-item__msg {
	font-size: 11px;
	color: var(--sa-text);
	line-height: 1.4;
}
.alert-item__ts {
	font-family: var(--sa-mono);
	font-size: 10px;
	color: var(--sa-hint);
}
.alert-feed__more,
.history-card__footer,
.url-table-more {
	padding: 10px 14px;
	border-top: 0.5px solid var(--sa-border);
	font-family: var(--sa-mono);
	font-size: 10px;
	color: var(--sa-hint);
}
.history-card { padding: 0; }
.history-card__header { margin-bottom: 0; }
.history-legend { display: flex; gap: 12px; margin-left: auto; flex-wrap: wrap; }
.history-legend__item { display: flex; align-items: center; gap: 4px; font-family: var(--sa-mono); font-size: 10px; color: var(--sa-muted); }
.history-legend__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.history-legend__dot--good { background: var(--sa-green); }
.history-legend__dot--warn { background: var(--sa-amber); }
.history-legend__dot--critical { background: var(--sa-red); }
.spark-wrap { display: flex; gap: 4px; align-items: flex-end; height: 44px; padding: 16px 18px 18px; }
.spark-bar {
	flex: 1;
	border-radius: 999px 999px 2px 2px;
	background: linear-gradient(180deg, var(--sa-green), var(--sa-green-bg));
	min-height: 8px;
}
.spark-bar--good {
	background: linear-gradient(180deg, var(--sa-green), var(--sa-green-bg));
}
.spark-bar--warn {
	background: linear-gradient(180deg, var(--sa-amber), var(--sa-amber-bg));
}
.spark-bar--critical {
	background: linear-gradient(180deg, var(--sa-red), var(--sa-red-bg));
}

.csp-audit-page {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.csp-page-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
}
.csp-page-header__main {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.csp-page-header__title {
	margin: 0;
	font-size: clamp(22px, 3vw, 32px);
	letter-spacing: -0.03em;
	line-height: 1.1;
	font-weight: 500;
}
.csp-page-header__meta {
	font-size: 12px;
	color: var(--sa-muted);
	line-height: 1.6;
}
.csp-page-header__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}
.csp-page-header__siteform,
.csp-page-header__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
}
.csp-page-header__siteform {
	align-items: center;
}
.csp-inline-message {
	padding: 14px 18px;
}
.csp-inline-message--success {
	border-color: var(--sa-green-border);
}
.csp-scan-status {
	position: sticky;
	top: 16px;
	z-index: 18;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
	margin-bottom: 14px;
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.12);
}
.csp-scan-status--running {
	border-color: var(--sa-amber-border);
	background: linear-gradient(135deg, var(--sa-amber-bg), rgba(245, 158, 11, 0.03));
}
.csp-scan-status--success {
	border-color: var(--sa-green-border);
	background: linear-gradient(135deg, var(--sa-green-bg), rgba(34, 197, 94, 0.03));
}
.csp-scan-status--error {
	border-color: var(--sa-red-border);
	background: linear-gradient(135deg, var(--sa-red-bg), rgba(239, 68, 68, 0.03));
}
.csp-scan-status__badge {
	flex: 0 0 auto;
	padding-top: 1px;
}
.csp-scan-status__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.csp-scan-status__title {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.csp-scan-status__message {
	font-size: 12px;
	line-height: 1.6;
	color: var(--sa-muted);
}
.csp-exec-summary {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
	gap: 12px;
}
#site-scan-main .csp-exec-summary {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.csp-score-card {
	padding: 24px 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#site-scan-main .csp-score-card {
	padding: 15px 16px 14px;
	gap: 6px;
}
.csp-score-card__eyebrow {
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sa-hint);
}
.csp-score-card__grade {
	font-size: clamp(56px, 8vw, 88px);
	line-height: 0.92;
	font-weight: 600;
	letter-spacing: -0.06em;
}
#site-scan-main .csp-score-card__grade {
	font-size: clamp(30px, 3.8vw, 46px);
	line-height: 0.96;
}
.csp-score-card__score {
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.03em;
}
#site-scan-main .csp-score-card__score {
	font-size: 14px;
}
.csp-score-card__issues {
	font-family: var(--sa-mono);
	font-size: 11px;
	color: var(--sa-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
#site-scan-main .csp-score-card__issues {
	font-size: 10px;
	letter-spacing: 0.04em;
}
.csp-score-card__risk {
	font-size: 13px;
	line-height: 1.7;
	color: var(--sa-muted);
	max-width: 46rem;
}
.csp-summary-stack {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 12px;
}
#site-scan-main .csp-summary-stack {
	display: contents;
}
.csp-summary-card {
	padding: 18px 20px;
}
.csp-findings-section,
.csp-viewer,
.csp-remediation,
.csp-advanced {
	padding: 18px 20px 20px;
}
.csp-section-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}
.csp-section-head__title {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.25;
}
.csp-section-head__meta {
	margin-top: 4px;
	font-size: 12px;
	color: var(--sa-muted);
	letter-spacing: 0.01em;
}
.csp-surface-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 12px;
}
.csp-surface-card {
	padding: 16px;
	border-radius: var(--radius-md);
	border: 0.5px solid var(--sa-border);
	background: var(--sa-surface-2);
}
.csp-surface-card--critical {
	border-color: var(--sa-red-border);
	background: rgba(232, 93, 36, 0.06);
}
.csp-surface-card--high {
	border-color: var(--sa-amber-border);
	background: rgba(232, 184, 78, 0.05);
}
.csp-surface-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.csp-surface-card__title {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.03em;
}
.csp-surface-card__summary {
	font-size: 12px;
	color: var(--sa-muted);
	line-height: 1.6;
	margin-top: 4px;
}
.csp-finding-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.csp-finding-card {
	padding: 14px;
	border-radius: var(--radius-md);
	border: 0.5px solid var(--sa-border);
	background: var(--sa-surface-2);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.csp-finding-card__top {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.csp-finding-card__title {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.csp-finding-card__meta,
.csp-finding-card__label {
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--sa-hint);
}
.csp-finding-card__body {
	font-size: 12px;
	line-height: 1.7;
	color: var(--sa-muted);
	display: grid;
	gap: 4px;
}
.csp-finding-card__body div:last-child {
	color: var(--sa-text);
}
.csp-finding-card__details,
.csp-advanced-card,
.csp-raw-block {
	border-radius: var(--radius-md);
	border: 0.5px solid var(--sa-border);
	background: var(--sa-surface-2);
}
.csp-finding-card__details {
	padding: 10px 12px;
}
.csp-finding-card__details summary,
.csp-advanced-card summary,
.csp-raw-block summary {
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	color: var(--sa-text);
}
.csp-finding-card__details-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
	padding-top: 12px;
	font-size: 12px;
	color: var(--sa-muted);
}
.csp-finding-card__details-grid span {
	display: block;
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--sa-hint);
	margin-bottom: 4px;
}
.csp-viewer {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.csp-viewer__hint {
	font-size: 12px;
	color: var(--sa-muted);
}
.csp-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 4px;
	margin-bottom: 8px;
}
.csp-tab {
	padding: 8px 12px;
	border-radius: 999px;
	border: 0.5px solid var(--sa-border-md);
	background: var(--sa-surface-2);
	color: var(--sa-muted);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.csp-tab.is-active {
	border-color: rgba(249, 115, 22, 0.3);
	color: var(--sa-accent);
	background: rgba(249, 115, 22, 0.08);
}
.csp-tab-panels {
	display: grid;
	gap: 12px;
}
.csp-tab-panels > [hidden],
[data-csp-audit-panel][hidden],
[data-site-scan-panel][hidden] {
	display: none !important;
}
.csp-tab-panel {
	display: grid;
	gap: 12px;
}
.csp-overview-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}
.csp-overview-card {
	padding: 16px;
	display: grid;
	gap: 6px;
}
.csp-overview-card__title,
.csp-policy-preview__label,
.csp-remediation-card__label {
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sa-hint);
}
.csp-overview-card__text {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.3;
}
.csp-overview-card__sub {
	font-size: 12px;
	line-height: 1.7;
	color: var(--sa-muted);
}
.csp-policy-preview {
	display: grid;
	gap: 10px;
	padding-top: 4px;
}
.csp-code-block {
	margin: 0;
	padding: 14px 16px;
	border-radius: var(--radius-md);
	border: 0.5px solid var(--sa-border-md);
	background: var(--sa-surface-2);
	font-family: var(--sa-mono);
	font-size: 11px;
	line-height: 1.75;
	white-space: pre-wrap;
	word-break: break-word;
	overflow-x: auto;
}
.csp-policy-preview__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.csp-directive-table-wrap {
	overflow-x: auto;
}
.csp-directive-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 900px;
}
.csp-directive-table th,
.csp-directive-table td {
	padding: 12px 0;
	border-bottom: 0.5px solid var(--sa-border);
	text-align: left;
	vertical-align: top;
}
.csp-directive-table th {
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sa-hint);
	padding-top: 0;
}
.csp-directive-table td:not(:first-child),
.csp-directive-table th:not(:first-child) {
	padding-left: 12px;
}
.csp-directive-table__directive {
	font-size: 13px;
	font-weight: 500;
}
.csp-directive-table__sources,
.csp-directive-table__recommendation {
	font-size: 12px;
	color: var(--sa-muted);
	line-height: 1.6;
}
.csp-directive-table__recommendation {
	color: var(--sa-text);
}
.csp-raw-block {
	padding: 12px 14px;
}
.csp-source-map {
	display: grid;
	gap: 10px;
}
.csp-source-map__row {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr) 110px;
	gap: 12px;
	align-items: start;
	padding: 12px 14px;
	border-radius: var(--radius-md);
	border: 0.5px solid var(--sa-border);
	background: var(--sa-surface-2);
}
.csp-source-map__directive {
	font-size: 13px;
	font-weight: 500;
}
.csp-source-map__sources {
	font-size: 12px;
	line-height: 1.6;
	color: var(--sa-muted);
	word-break: break-word;
}
.csp-source-map__meta {
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sa-hint);
	text-align: right;
}
.csp-remediation {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.csp-remediation-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 12px;
}
.csp-remediation-card {
	padding: 16px;
	border-radius: var(--radius-md);
	border: 0.5px solid var(--sa-border);
	background: var(--sa-surface-2);
	display: grid;
	gap: 12px;
}
.csp-remediation-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}
.csp-remediation-card__title {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.03em;
}
.csp-remediation-card__sub {
	font-size: 12px;
	color: var(--sa-muted);
}
.csp-remediation-card__section {
	display: grid;
	gap: 6px;
	font-size: 12px;
	line-height: 1.7;
	color: var(--sa-muted);
}
.csp-remediation-card__section--hint {
	padding: 12px 14px;
	border-radius: var(--radius-md);
	background: var(--sa-surface-2);
	border-left: 2px solid var(--sa-green-border);
}
.csp-remediation-card__steps {
	margin: 0;
	padding-left: 18px;
	display: grid;
	gap: 6px;
}
.csp-advanced {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.csp-advanced-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
}
.csp-advanced-card {
	padding: 12px 14px;
}
.csp-advanced-card__body {
	padding-top: 12px;
	display: grid;
	gap: 10px;
}
.csp-advanced-card__row {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 10px;
	font-size: 12px;
	color: var(--sa-muted);
}
.csp-advanced-card__row span {
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--sa-hint);
}
.csp-advanced-card__text {
	font-size: 12px;
	line-height: 1.7;
	color: var(--sa-muted);
}
.csp-advanced-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.csp-empty-state,
.csp-empty-shell {
	padding: 18px 20px;
}
.csp-empty-state {
	font-size: 12px;
	line-height: 1.7;
	color: var(--sa-muted);
}
.csp-audit-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: flex-end;
	justify-content: space-between;
}
.csp-audit-toolbar__group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: flex-end;
}
.csp-audit-select {
	min-width: 180px;
	height: 34px;
	padding: 0 10px;
	border-radius: var(--radius-md);
	border: 0.5px solid var(--sa-border-md);
	background: var(--sa-bg);
	color: var(--sa-text);
}
.csp-audit-select:focus {
	outline: none;
	border-color: var(--sa-border-focus);
	box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}
.csp-results-card {
	overflow: hidden;
}
.csp-results-head,
.csp-results-row {
	display: grid;
	grid-template-columns: 84px minmax(180px, 1.2fr) minmax(180px, 1.1fr) minmax(180px, 1.1fr) 90px;
	gap: 10px;
	align-items: center;
	padding: 10px 14px;
}
.csp-results-head {
	border-bottom: 0.5px solid var(--sa-border);
	font-family: var(--sa-mono);
	font-size: 9px;
	color: var(--sa-hint);
	letter-spacing: 0.05em;
}
.csp-results-row {
	border-bottom: 0.5px solid var(--sa-border);
}
.csp-results-row:hover {
	background: var(--sa-surface-2);
}
.csp-results-row--fail {
	background: var(--sa-red-bg);
}
.csp-results-row--warn {
	background: var(--sa-amber-bg);
}
.csp-results-row__badge {
	justify-self: start;
}
.csp-results-row__title {
	font-size: 12px;
	color: var(--sa-text);
}
.csp-results-row__meta,
.csp-results-row__fix,
.csp-results-row__evidence {
	font-size: 11px;
	color: var(--sa-muted);
	line-height: 1.5;
}
.csp-results-row__fix {
	color: var(--sa-text);
}
.csp-results-row__score {
	font-family: var(--sa-mono);
	font-size: 11px;
	color: var(--sa-muted);
	justify-self: end;
}
.csp-results-row__stack {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.csp-audit-summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.csp-audit-summary .metric-card__value {
	font-size: 30px;
}
.csp-audit-spark {
	padding: 16px 18px 18px;
}
.csp-audit-spark .spark-wrap {
	padding: 0;
}

.site-footer {
	width: min(1140px, calc(100% - 56px));
	margin: 0 auto;
	padding: 18px 0 40px;
	font-size: 12px;
	color: var(--sa-muted);
}
.sa-footer {
	padding: 48px 0 34px;
	border-top: 0.5px solid var(--sa-border);
}
.sa-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: 18px;
}
.sa-footer__brand-logo {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.03em;
	display: inline-block;
	margin-bottom: 12px;
}
.sa-footer__brand-logo span { color: var(--sa-accent); }
.sa-footer__tagline {
	color: var(--sa-muted);
	font-size: 13px;
	line-height: 1.7;
	max-width: 320px;
}
.sa-footer__col-title {
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-family: var(--sa-mono);
	color: var(--sa-hint);
	margin-bottom: 10px;
}
.sa-footer__link {
	display: block;
	color: var(--sa-muted);
	font-size: 13px;
	padding: 4px 0;
}
.sa-footer__link:hover { color: var(--sa-text); }
.sa-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 18px;
	margin-top: 22px;
	border-top: 0.5px solid var(--sa-border);
	font-size: 12px;
	color: var(--sa-muted);
}
.sa-footer__status {
	display: flex;
	align-items: center;
	gap: 8px;
}
.sa-footer__status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sa-green);
	box-shadow: 0 0 0 4px var(--sa-green-bg);
}

.panel code {
	font-family: var(--sa-mono);
	font-size: 11px;
}

.reference-page {
	padding: 72px 0 80px;
}
.reference-hero {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 28px;
}
.reference-hero__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.reference-hero__title {
	margin: 0;
	font-size: clamp(34px, 4vw, 50px);
	line-height: 1.05;
	letter-spacing: -0.04em;
	font-weight: 500;
	max-width: 780px;
}
.reference-hero__sub {
	max-width: 760px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--sa-muted);
	margin: 0;
}
.reference-search {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 4px;
}
.reference-search__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.reference-search__input {
	flex: 1 1 340px;
	min-width: 240px;
}
.reference-search__count {
	font-family: var(--sa-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sa-hint);
}
.reference-jumps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.reference-jump {
	padding: 8px 11px;
	border-radius: 999px;
	border: 0.5px solid var(--sa-border-md);
	background: rgba(255, 255, 255, 0.02);
	font-size: 11px;
	color: var(--sa-text);
}
.reference-jump:hover {
	border-color: rgba(249, 115, 22, 0.3);
	color: var(--sa-accent);
}
.reference-quickstart {
	margin: 28px 0 22px;
}
.reference-quickstart__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}
.reference-quickstart__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 100%;
	scroll-margin-top: 92px;
}
.reference-quickstart__name {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.reference-quickstart__summary {
	font-size: 12px;
	line-height: 1.7;
	color: var(--sa-muted);
}
.reference-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.reference-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}
.reference-card {
	padding: 18px 20px;
	scroll-margin-top: 92px;
}
.reference-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.reference-card__name {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.reference-card__anchor {
	color: var(--sa-text);
}
.reference-card__anchor:hover {
	color: var(--sa-accent);
}
.reference-card__group {
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sa-hint);
}
.reference-card__summary {
	font-size: 13px;
	line-height: 1.7;
	color: var(--sa-muted);
	margin: 0 0 14px;
}
.reference-card__values-label {
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sa-hint);
	margin-bottom: 8px;
}
.reference-card__values {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.reference-card__value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 8px;
	border-radius: 999px;
	border: 0.5px solid var(--sa-border-md);
	background: var(--sa-surface-2);
	font-family: var(--sa-mono);
	font-size: 10px;
	line-height: 1.4;
	color: var(--sa-text);
}
.reference-card__value--button {
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	text-align: left;
}
.reference-card__value--button:hover {
	border-color: rgba(249, 115, 22, 0.35);
	background: rgba(255, 255, 255, 0.04);
}
.reference-card__value--button:focus-visible {
	outline: 2px solid rgba(249, 115, 22, 0.5);
	outline-offset: 2px;
}
.reference-card__note {
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.02);
	border-left: 2px solid var(--sa-green-border);
	font-size: 12px;
	line-height: 1.7;
	color: var(--sa-muted);
}
.reference-card__example-label {
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sa-hint);
	margin-bottom: 8px;
}
.reference-card__example {
	margin: 0;
	padding: 14px 16px;
	border-radius: var(--radius-md);
	border: 0.5px solid var(--sa-border-md);
	background: rgba(255, 255, 255, 0.02);
	overflow-x: auto;
}
.reference-card__example code {
	display: block;
	font-family: var(--sa-mono);
	font-size: 11px;
	line-height: 1.7;
	white-space: pre-wrap;
	word-break: break-word;
}
.reference-note {
	margin-top: 18px;
	padding: 16px 18px;
	border-radius: var(--radius-md);
	border: 0.5px solid var(--sa-border);
	background: rgba(255, 255, 255, 0.02);
	font-size: 12px;
	line-height: 1.7;
	color: var(--sa-muted);
}
.reference-note a {
	color: var(--sa-accent);
}
.reference-syntax-callout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 18px;
	margin: 18px 0 24px;
	flex-wrap: wrap;
}
.reference-syntax-callout__eyebrow {
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sa-hint);
	margin-bottom: 4px;
}
.reference-syntax-callout__text {
	font-size: 13px;
	line-height: 1.6;
	color: var(--sa-muted);
	max-width: 760px;
}
.reference-syntax-page {
	padding: 72px 0 80px;
}
.reference-syntax-hero {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 22px;
}
.reference-syntax-hero__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.reference-syntax-layout {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 22px;
}
.reference-syntax-panel {
	padding: 18px 20px;
}
.reference-syntax-panel__eyebrow,
.reference-syntax-section .section__eyebrow {
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.reference-syntax-rule {
	display: flex;
	gap: 14px;
	padding: 12px 0;
	border-top: 0.5px solid var(--sa-border);
}
.reference-syntax-rule:first-of-type {
	border-top: 0;
	padding-top: 0;
}
.reference-syntax-rule__index {
	flex: 0 0 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(249, 115, 22, 0.10);
	border: 0.5px solid rgba(249, 115, 22, 0.3);
	color: var(--sa-accent);
	font-family: var(--sa-mono);
	font-size: 10px;
}
.reference-syntax-rule__title {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.02em;
	margin-bottom: 4px;
}
.reference-syntax-rule__text {
	font-size: 12px;
	line-height: 1.7;
	color: var(--sa-muted);
}
.reference-syntax-rule__text code {
	font-family: var(--sa-mono);
	font-size: 11px;
	color: var(--sa-text);
}
.reference-syntax-example {
	margin: 0;
	padding: 16px 18px;
	border-radius: var(--radius-md);
	border: 0.5px solid var(--sa-border-md);
	background: rgba(255, 255, 255, 0.02);
	overflow-x: auto;
}
.reference-syntax-example code {
	display: block;
	font-family: var(--sa-mono);
	font-size: 11px;
	line-height: 1.75;
	white-space: pre-wrap;
	word-break: break-word;
}
.reference-syntax-note {
	margin-top: 12px;
	font-size: 12px;
	line-height: 1.7;
	color: var(--sa-muted);
}
.reference-syntax-section {
	margin-top: 22px;
}
.reference-syntax-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}
.reference-syntax-card {
	padding: 16px 18px;
}
.reference-syntax-card__form {
	font-family: var(--sa-mono);
	font-size: 12px;
	letter-spacing: 0.02em;
	margin-bottom: 8px;
}
.reference-syntax-card__summary {
	font-size: 12px;
	line-height: 1.7;
	color: var(--sa-muted);
}
.reference-syntax-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.reference-syntax-tag {
	padding: 8px 11px;
	border-radius: 999px;
	border: 0.5px solid var(--sa-border-md);
	background: rgba(255, 255, 255, 0.02);
	font-size: 11px;
	color: var(--sa-text);
}
.reference-syntax-tag:hover {
	border-color: rgba(249, 115, 22, 0.3);
	color: var(--sa-accent);
}
@media (max-width: 900px) {
	.reference-syntax-layout {
		grid-template-columns: 1fr;
	}
}
.reference-empty {
	padding: 18px 20px;
	border-radius: var(--radius-md);
	border: 0.5px solid var(--sa-amber-border);
	background: var(--sa-amber-bg);
	margin-bottom: 12px;
}
.reference-empty__title {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 4px;
}
.reference-empty__text {
	font-size: 12px;
	color: var(--sa-muted);
}
.policy-editor-page {
	padding-bottom: 40px;
}
.policy-editor-overview {
	margin-bottom: 14px;
}
.policy-editor-overview__panel {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.policy-editor-overview__title {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.policy-editor-overview__meta {
	font-size: 12px;
	color: var(--sa-muted);
	font-family: var(--sa-mono);
	letter-spacing: 0.02em;
}
.policy-editor-import {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.policy-editor-import__textarea,
.policy-editor-textarea {
	min-height: 100px;
	height: auto;
	resize: vertical;
	padding: 12px 14px;
	line-height: 1.6;
	font-family: var(--sa-mono);
}
.policy-editor-import__textarea {
	min-height: 124px;
}
.policy-editor-import__actions,
.policy-editor-actions,
.policy-editor-output__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.policy-editor-source {
	margin-bottom: 14px;
}
.policy-editor-source__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}
.policy-editor-source__title {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.policy-editor-source__text {
	font-size: 12px;
	line-height: 1.7;
	color: var(--sa-muted);
}
.policy-editor-source__code,
.policy-editor-output__code {
	margin: 0;
	padding: 16px 18px;
	border-radius: var(--radius-md);
	border: 0.5px solid var(--sa-border-md);
	background: rgba(255, 255, 255, 0.02);
	overflow-x: auto;
}
.policy-editor-source__code code,
.policy-editor-output__code code {
	display: block;
	font-family: var(--sa-mono);
	font-size: 11px;
	line-height: 1.75;
	white-space: pre-wrap;
	word-break: break-word;
}
.policy-editor-form {
	margin-top: 14px;
}
.policy-editor-grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.policy-editor-row {
	display: flex;
	gap: 18px;
	padding: 18px 20px;
	align-items: flex-start;
}
.policy-editor-row--error {
	border-color: var(--sa-red-border);
	box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.12) inset;
}
.policy-editor-row__meta {
	flex: 0 0 280px;
	max-width: 320px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.policy-editor-row__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.policy-editor-row__name {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.policy-editor-row__summary {
	font-size: 12px;
	line-height: 1.65;
	color: var(--sa-muted);
}
.policy-editor-row__summary--deprecated {
	color: var(--sa-amber);
}
.policy-editor-row__group {
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sa-hint);
}
.policy-editor-bare {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--radius-md);
	border: 0.5px solid var(--sa-border-md);
	background: rgba(255, 255, 255, 0.02);
	font-size: 13px;
	color: var(--sa-text);
}
.policy-editor-bare input {
	accent-color: var(--sa-accent);
}
.policy-editor-guidance {
	display: grid;
	gap: 6px;
	padding: 12px 14px;
	border-radius: var(--radius-md);
	border-left: 2px solid var(--sa-border-md);
	background: rgba(255, 255, 255, 0.02);
	font-size: 12px;
	line-height: 1.6;
	color: var(--sa-muted);
}
.policy-editor-guidance--warn {
	border-left-color: var(--sa-amber-border);
}
.policy-editor-guidance--error {
	border-left-color: var(--sa-red-border);
}
.policy-editor-guidance__label {
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sa-hint);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}
.policy-editor-guidance__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sa-hint);
	font: inherit;
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}
.policy-editor-guidance__toggle:hover {
	color: var(--sa-text);
}
.policy-editor-guidance__toggle i {
	font-size: 13px;
	transition: transform 0.15s ease;
}
.policy-editor-guidance__toggle.is-expanded i {
	transform: rotate(180deg);
}
.policy-editor-guidance__label-value {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	flex-wrap: wrap;
}
.policy-editor-guidance__action {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.policy-editor-guidance__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border-radius: 999px;
	border: 1px solid var(--sa-border);
	background: var(--sa-surface-2);
	color: var(--sa-text);
	flex: 0 0 auto;
	cursor: pointer;
}
.policy-editor-guidance__icon-btn:hover {
	border-color: rgba(249, 115, 22, 0.3);
	color: var(--sa-accent);
}
.policy-editor-guidance__action-label {
	min-width: 48px;
	color: var(--sa-hint);
	font-family: var(--sa-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.policy-editor-guidance__value {
	color: var(--sa-text);
	font-family: var(--sa-mono);
	font-size: 11px;
	word-break: break-word;
}
.policy-editor-guidance__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 800;
	border: 1px solid transparent;
	white-space: nowrap;
}
.policy-editor-guidance__badge--critical {
	color: #ffd7d7;
	background: rgba(239, 68, 68, 0.14);
	border-color: rgba(239, 68, 68, 0.35);
}
.policy-editor-guidance__badge--warn {
	color: #ffe8b3;
	background: rgba(245, 158, 11, 0.14);
	border-color: rgba(245, 158, 11, 0.35);
}
.policy-editor-guidance__points {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 800;
	border: 1px solid var(--sa-green-border);
	color: var(--sa-green-dark);
	background: var(--sa-green-bg);
	white-space: nowrap;
}
.policy-editor-guidance__points--red {
	border-color: var(--sa-red-border);
	color: var(--sa-red);
	background: var(--sa-red-bg);
}
.policy-editor-guidance__reason {
	font-size: 11px;
	color: var(--sa-muted);
	line-height: 1.6;
}
.policy-editor-guidance__remediation {
	display: grid;
	gap: 10px;
	padding-top: 8px;
	margin-top: 4px;
	border-top: 1px solid var(--sa-border);
}
.policy-editor-guidance__remediation-label {
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sa-hint);
}
.policy-editor-guidance__remediation-item {
	display: grid;
	gap: 4px;
	font-size: 11px;
	line-height: 1.6;
	color: var(--sa-muted);
}
.policy-editor-guidance__remediation-item-label {
	font-family: var(--sa-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sa-hint);
}
.policy-editor-guidance__remediation-item-value {
	color: var(--sa-text);
}
.paranoid-req-list {
	margin: 2px 0 0 16px;
	padding: 0;
	font-size: 0.85em;
	color: var(--sa-text);
}
.paranoid-req-list li {
	margin-bottom: 2px;
}
.policy-editor-output {
	margin-top: 14px;
}
.policy-editor-alert {
	margin-bottom: 14px;
}
.policy-editor-alert--success {
	border-color: var(--sa-green-border);
}
.policy-editor-alert--error {
	border-color: var(--sa-red-border);
}
.csp-site-detail {
	padding-bottom: 44px;
}
.csp-metric-strip {
	margin-bottom: 14px;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
.site-scan-metric-strip {
	margin-bottom: 14px;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
.csp-raw-panel,
.csp-directive-editor {
	margin-bottom: 14px;
}
.csp-panel-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.csp-panel-title {
	font-size: 15px;
	line-height: 1.65;
	color: var(--sa-muted);
	max-width: 760px;
	margin-top: 6px;
}
.csp-panel-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.csp-panel-actions--directive {
	align-items: center;
}
.csp-remediation-toggle {
	white-space: nowrap;
}
.csp-panel-note {
	margin-top: 12px;
	font-size: 12px;
	line-height: 1.65;
	color: var(--sa-muted);
}
.csp-panel-note.is-error {
	color: var(--sa-red);
}
.csp-raw-editor__textarea {
	min-height: 220px;
	font-size: 12px;
	line-height: 1.75;
}
.csp-directive-grid {
	gap: 12px;
}
.csp-directive-row .policy-editor-row__name {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.csp-directive-row__name-text {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.csp-directive-validation-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 800;
	border: 1px solid transparent;
	white-space: nowrap;
}
.csp-directive-validation-pill--fail {
	color: #ffd7d7;
	background: rgba(239, 68, 68, 0.14);
	border-color: rgba(239, 68, 68, 0.35);
}
.csp-directive-pass {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	border: 1px solid var(--sa-green-border);
	background: var(--sa-green-bg);
	color: var(--sa-green);
	flex: 0 0 auto;
}
.csp-directive-pass[hidden],
.csp-directive-validation-pill[hidden],
.policy-editor-guidance__remediation-item[hidden] {
	display: none;
}
.csp-directive-pass i {
	font-size: 13px;
	line-height: 1;
}
.csp-directive-row {
	margin: 0;
}
.csp-directive-toggle {
	width: 100%;
}
.csp-directive-input {
	min-height: 88px;
}
.csp-field-highlight-wrap {
	position: relative;
	display: block;
}
.csp-field-highlight-backdrop {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	padding: 12px 14px;
	border: 0.5px solid transparent;
	border-radius: var(--radius-md);
	font-size: 13px;
	font-family: var(--sa-mono);
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
	overflow: hidden;
	pointer-events: none;
	color: transparent;
	box-sizing: border-box;
}
.csp-directive-input.csp-field--has-highlights {
	background: transparent;
	position: relative;
	z-index: 1;
}
.csp-hl-basic {
	background-color: #fefce8;
	color: transparent;
	border-radius: 2px;
}
.csp-hl-paranoid {
	background-color: #fef2f2;
	color: transparent;
	border-radius: 2px;
}
.csp-directive-editor .policy-editor-guidance {
	margin-top: 2px;
}
@media (max-width: 900px) {
	.policy-editor-row {
		flex-direction: column;
	}
	.policy-editor-row__meta {
		flex: 0 0 auto;
		max-width: none;
	}
	.csp-panel-head {
		flex-direction: column;
	}
	.csp-panel-actions {
		width: 100%;
		justify-content: flex-start;
	}
}

.csp-site-detail .policy-editor-guidance__remediation[hidden] {
	display: none;
}
.csp-back-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 140;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	border: 0.5px solid var(--sa-border-md);
	background: var(--sa-surface);
	color: var(--sa-green);
	box-shadow: var(--sa-shadow);
	transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.csp-back-to-top:hover {
	transform: translateY(-2px);
	border-color: var(--sa-green-border);
	color: var(--sa-green);
	background: var(--sa-elevated);
}
.csp-back-to-top i {
	font-size: 18px;
}
@media (max-width: 768px) {
	.csp-back-to-top {
		right: 14px;
		bottom: 14px;
		width: 42px;
		height: 42px;
	}
}

/* ── Theme toggle buttons ── */
.sa-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: var(--radius-md);
	border: 0.5px solid var(--sa-border-md);
	background: transparent;
	color: var(--sa-muted);
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
	flex-shrink: 0;
}
.sa-theme-toggle:hover {
	color: var(--sa-text);
	background: var(--sa-surface-2);
}
.plan-expiry-banner {
	font-size: 11px;
	line-height: 1.5;
	border-radius: 6px;
	padding: 8px 10px;
	display: flex;
	align-items: flex-start;
	gap: 7px;
}
.plan-expiry-banner i { flex-shrink: 0; margin-top: 1px; }
.plan-expiry-banner__body { display: flex; flex-direction: column; gap: 3px; }
.plan-expiry-banner__body a { color: inherit; font-weight: 600; text-decoration: underline; }
.plan-expiry-banner--cull {
	background: var(--sa-amber-bg);
	color: var(--sa-amber);
	border: 0.5px solid var(--sa-amber-border);
}
.plan-expiry-banner--soft {
	background: var(--sa-surface-2);
	color: var(--sa-muted);
	border: 0.5px solid var(--sa-border-md);
}

.sidebar__theme-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: var(--radius-md);
	border: 0.5px solid var(--sa-sidebar-border);
	background: transparent;
	color: var(--sa-sidebar-muted);
	cursor: pointer;
	font-size: 12px;
	width: 100%;
	transition: color 0.15s, background 0.15s;
}
.sidebar__theme-toggle:hover {
	color: var(--sa-sidebar-text);
	background: var(--sa-sidebar-hover);
}
.sidebar__theme-toggle i {
	font-size: 14px;
	flex-shrink: 0;
}

.admin-shell {
	background: var(--sa-bg);
}
.admin-bar {
	border-radius: 24px;
}
.admin-main {
	padding: 10px 18px 80px;
}

@keyframes saPulse {
	0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.45); }
	70% { box-shadow: 0 0 0 8px rgba(249, 115, 22, 0); }
	100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

@keyframes saCursor {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

@media (max-width: 1120px) {
	.dashboard {
		grid-template-columns: 1fr;
	}
	.sidebar {
		min-height: auto;
	}
}
@media (max-width: 900px) {
	.metric-strip,
	.pricing-grid,
	.logo-strip__logos,
	.sa-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
	.hero__inner,
	.hero__inner--wide,
	.dash-mid,
	.check-table {
		grid-template-columns: 1fr;
	}
	.csp-exec-summary,
	.csp-overview-grid,
	.csp-remediation-grid,
	.csp-advanced-grid {
		grid-template-columns: 1fr;
	}
	.terminal { display: none; }
}
@media (max-width: 768px) {
	.container,
	.container--narrow,
	.site-main,
	.admin-main,
	.site-shell,
	.admin-bar,
	.sa-nav,
	.signup-nav,
	.site-footer {
		width: calc(100% - 24px);
	}
	.sa-nav,
	.signup-nav,
	.site-shell,
	.admin-bar {
		margin-top: 12px;
		padding: 0 14px;
		height: 56px;
	}
	.sa-nav__links,
	.sa-nav__actions {
		display: none;
	}
	.sa-nav__hamburger,
	.sa-nav__mobile-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 8px;
		color: var(--sa-muted);
	}
	.app-mobile-bar {
		display: flex;
		width: calc(100% - 24px);
		margin-top: 12px;
	}
	.app-menu-overlay__panel {
		padding: 16px;
	}
	.hero,
	.panel,
	.metric-card,
	.pricing-card,
	.faq-item,
	.enterprise-bar,
	.url-table-card,
	.alert-feed,
	.history-card,
	.card {
		border-radius: 16px;
	}
	.hero__stats,
	.hero__input-row,
	.url-add-wrap,
	.price-grid,
	.pricing-faq,
	.plan-card__metrics,
	.plans-grid,
	.feature-catalog-grid,
	.feature-form__grid,
	.plan-card__feature-grid,
	.billing-toggle-wrap,
	.metric-strip,
	.logo-strip__logos,
	.sa-footer__grid,
	.ob-plan-grid,
	.name-row,
	.sso-row {
		grid-template-columns: 1fr;
	}
	.hero__input-row,
	.url-add-wrap,
	.enterprise-bar {
		flex-direction: column;
	}
	.hero__input-row .btn,
	.url-add-wrap .btn,
	.enterprise-bar .btn {
		width: 100%;
	}
	.hero__url-wrap {
		width: 100%;
	}
	.billing-toggle-wrap {
		align-items: stretch;
	}
	.hero__stat {
		border-right: none;
		margin-right: 0;
		padding-right: 0;
		margin-bottom: 14px;
	}
	.hiw-steps {
		grid-template-columns: 1fr;
	}
	.hiw-flow {
		flex-direction: column;
	}
	.hiw-flow__block {
		border-right: none;
		border-bottom: 0.5px solid var(--sa-border);
		padding: 0 0 16px;
		margin-bottom: 16px;
	}
	.hiw-flow__block:last-child {
		border-bottom: none;
		margin-bottom: 0;
	}
	.pricing-grid,
	.pricing-faq,
	.metric-strip,
	.dash-mid,
	.dashboard-settings__grid,
	.dashboard-settings__form-grid,
	.dashboard {
		grid-template-columns: 1fr;
	}
	.feat-compare {
		width: 100%;
	}
	.feat-compare__label-col,
	.feat-compare__feat-label {
		min-width: 130px;
	}
	.feat-compare__plan-col {
		min-width: 90px;
	}
	.feat-compare__price-main {
		font-size: 18px;
	}
	.feature-card__header,
	.plan-card__feature-header,
	.feature-card__meta,
	.plan-card__meta {
		align-items: flex-start;
	}
	.dashboard {
		width: calc(100% - 24px);
		margin: 12px auto;
	}
	.sidebar {
		display: none;
	}
	.dash-topbar {
		padding: 14px 16px;
	}
	.dash-topbar__title {
		font-size: 20px;
	}
	.url-table-card__header,
	.alert-feed__header,
	.history-card__header {
		padding: 12px 14px;
	}
	.sites-add-form {
		align-items: stretch;
	}
	.sites-add-form__actions,
	.sites-table__actions {
		width: 100%;
	}
	.sites-add-form__actions .btn,
	.sites-table__actions .btn {
		width: 100%;
	}
	.sites-table {
		min-width: 0;
	}
	.csp-results-head,
	.csp-results-row {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 6px 10px;
	}
	.csp-results-head {
		display: none;
	}
	.csp-page-header {
		flex-direction: column;
	}
	.csp-page-header__actions {
		width: 100%;
		align-items: stretch;
	}
	.csp-page-header__siteform,
	.csp-page-header__links {
		justify-content: flex-start;
	}
	.csp-page-header__siteform .btn,
	.csp-page-header__links .btn {
		width: 100%;
	}
	.csp-exec-summary {
		grid-template-columns: 1fr;
	}
	#site-scan-main .csp-exec-summary {
		grid-template-columns: 1fr;
	}
	#site-scan-main .csp-summary-stack {
		display: grid;
	}
	.csp-score-card__score {
		font-size: 18px;
	}
	.csp-section-head {
		flex-direction: column;
	}
	.csp-source-map__row {
		grid-template-columns: 1fr;
	}
	.csp-source-map__meta {
		text-align: left;
	}
	.csp-directive-table {
		min-width: 0;
	}
	.csp-directive-table th,
	.csp-directive-table td {
		padding: 10px 0;
	}
	.csp-overview-card__text {
		font-size: 16px;
	}
	.csp-results-row {
		grid-template-areas:
			"badge title"
			"badge evidence"
			"badge fix"
			"badge score";
		align-items: start;
	}
	.csp-results-row__badge { grid-area: badge; }
	.csp-results-row__title { grid-area: title; }
	.csp-results-row__evidence { grid-area: evidence; }
	.csp-results-row__fix { grid-area: fix; }
	.csp-results-row__score { grid-area: score; justify-self: start; }
	.url-col-headers {
		display: none;
	}
	.url-row {
		grid-template-columns: 18px minmax(0, 1fr);
		grid-template-areas:
			"dot type"
			"dot domain"
			"dot site"
			"dot basic"
			"dot paranoid"
			"dot latest"
			"dot chevron";
		gap: 4px 10px;
		padding: 12px 14px;
		align-items: start;
	}
	.url-row > :nth-child(1) { grid-area: dot; margin-top: 4px; }
	.url-row > :nth-child(2) { grid-area: type; }
	.url-row > :nth-child(3) { grid-area: domain; }
	.url-row > :nth-child(4) { grid-area: site; }
	.url-row > :nth-child(5) { grid-area: basic; }
	.url-row > :nth-child(6) { grid-area: paranoid; }
	.url-row > :nth-child(7) { grid-area: latest; }
	.url-row > :nth-child(8) { grid-area: chevron; justify-self: end; }
	.audit-log-toolbar {
		flex-direction: column;
	}
	.audit-log-filters {
		width: 100%;
	}
	.audit-log-filter,
	.audit-log-filter .url-table-filter {
		width: 100%;
	}
	.audit-score,
	.url-next,
	.url-issues,
	.url-chevron {
		text-align: left;
	}
	.audit-score {
		align-items: flex-start;
	}
	.audit-score__label {
		color: var(--sa-hint);
	}
	.audit-log-type__title::before {
		content: "Type";
		display: block;
		font-family: var(--sa-mono);
		font-size: 9px;
		color: var(--sa-hint);
		letter-spacing: 0.05em;
		text-transform: uppercase;
		margin-bottom: 2px;
	}
	.url-next::before {
		content: "Scanned";
		display: block;
		font-family: var(--sa-mono);
		font-size: 9px;
		color: var(--sa-hint);
		letter-spacing: 0.05em;
		text-transform: uppercase;
		margin-bottom: 2px;
	}
	.url-issues::before {
		content: "Issues";
		display: block;
		font-family: var(--sa-mono);
		font-size: 9px;
		color: var(--sa-hint);
		letter-spacing: 0.05em;
		text-transform: uppercase;
		margin-bottom: 2px;
	}
	.url-chevron {
		margin-top: 2px;
	}
	.sidebar__nav {
		padding-bottom: 0;
	}
	.sidebar__footer {
		display: none;
	}
	.dashboard,
	.admin-main {
		width: calc(100% - 24px);
	}
	.dash-topbar {
		border-radius: 18px;
		flex-direction: column;
		align-items: flex-start;
	}
	.dash-topbar > div {
		width: 100%;
		flex-wrap: wrap;
	}
	.url-table-more,
	.alert-feed__more {
		font-size: 9px;
	}
	.sa-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
	.site-footer {
		width: calc(100% - 24px);
	}
	.app-mobile-bar {
		margin-bottom: 0;
	}
	.admin-bar__mobile-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		border: 0.5px solid var(--sa-border-md);
		background: var(--sa-surface-2);
		color: var(--sa-text);
	}
	.admin-bar {
		width: calc(100% - 24px);
		margin-top: 12px;
		padding: 12px 14px;
		height: auto;
		min-height: 56px;
		align-items: flex-start;
	}
	.admin-bar .site-nav {
		display: none;
	}
}

/* ── Site Scan feature styles ─────────────────────────────────────────────── */
.site-scan-categories {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.site-scan-cat {
	background: var(--sa-surface-2);
	border: 1px solid var(--sa-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.site-scan-cat--fail {
	border-color: var(--sa-red-border);
}

.site-scan-cat--warn {
	border-color: var(--sa-amber-border);
}

.site-scan-cat--advisory {
	border-color: #bfdbfe;
}

.site-scan-cat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	border-bottom: 1px solid var(--sa-border);
	gap: 8px;
}

.site-scan-cat--fail .site-scan-cat__head { border-bottom-color: var(--sa-red-border); }
.site-scan-cat--warn .site-scan-cat__head { border-bottom-color: var(--sa-amber-border); }
.site-scan-cat--advisory .site-scan-cat__head { border-bottom-color: #bfdbfe; }

.site-scan-cat__title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sa-text);
}

.site-scan-cat__badges {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.site-scan-check-list {
	display: flex;
	flex-direction: column;
}

.site-scan-check {
	padding: 10px 14px;
	border-bottom: 1px solid var(--sa-border);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.site-scan-check:last-child { border-bottom: none; }

.site-scan-check--fail { background: var(--sa-red-bg); }
.site-scan-check--warn { background: var(--sa-amber-bg); }
.site-scan-check--advisory { background: #eff6ff; }
.site-scan-check--pass { background: var(--sa-green-bg); opacity: 0.85; }
.site-scan-check--info { background: var(--sa-surface-2); }

.site-scan-check__top {
	display: flex;
	align-items: center;
	gap: 8px;
}

.site-scan-check__name {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--sa-text);
}

.site-scan-check__impact {
	display: inline-flex;
	align-items: center;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	border: 1px solid transparent;
	flex-shrink: 0;
}

.site-scan-check__impact--fail {
	color: var(--sa-red);
	background: var(--sa-red-bg);
	border-color: var(--sa-red-border);
}

.site-scan-check__impact--warn {
	color: var(--sa-amber);
	background: var(--sa-amber-bg);
	border-color: var(--sa-amber-border);
}

.site-scan-check__evidence {
	font-size: 12px;
	color: var(--sa-muted);
	font-family: var(--sa-mono);
	word-break: break-all;
	padding-left: 2px;
}

.site-scan-check__fix {
	font-size: 12px;
	color: var(--sa-text);
	padding-left: 2px;
}

.site-scan-fix {
	border: 1px solid var(--sa-border-md);
	border-radius: 6px;
	overflow: hidden;
	margin-top: 6px;
}

.site-scan-fix__block {
	position: relative;
	background: var(--sa-surface-1, #fff);
	padding: 8px 10px;
	border-bottom: 1px solid var(--sa-border);
}

.site-scan-fix__block:last-child {
	border-bottom: none;
}

.site-scan-fix__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 5px;
}

.site-scan-fix__label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sa-muted);
}

.site-scan-fix__doclink {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 10px;
	font-weight: 500;
	color: var(--sa-accent);
	text-decoration: none;
	flex-shrink: 0;
}

.site-scan-fix__doclink:hover { text-decoration: underline; }
.site-scan-fix__doclink .ti { font-size: 10px; }

.site-scan-fix__code-wrap {
	position: relative;
	padding-right: 60px;
}

.site-scan-fix__code {
	font-family: var(--sa-mono);
	font-size: 11px;
	line-height: 1.6;
	color: var(--sa-text);
	white-space: pre-wrap;
	word-break: break-all;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
}

.site-scan-fix__prose {
	font-size: 12px;
	line-height: 1.6;
	color: var(--sa-muted);
	margin: 0;
}

.site-scan-fix__copy {
	position: absolute;
	top: 0;
	right: 0;
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 600;
	color: var(--sa-accent);
	background: none;
	border: 1px solid var(--sa-accent);
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap;
	line-height: 1.6;
	transition: background 0.1s, color 0.1s;
}

.site-scan-fix__copy:hover {
	background: var(--sa-accent);
	color: #fff;
}

.site-scan-fix__copy--ok {
	background: var(--sa-green-bg);
	color: var(--sa-green);
	border-color: var(--sa-green-border);
}

.site-scan-fix__upgrade {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 10px;
	font-size: 12px;
	font-weight: 500;
	color: var(--sa-accent);
	background: color-mix(in srgb, var(--sa-accent) 6%, transparent);
	border: 1px dashed color-mix(in srgb, var(--sa-accent) 35%, transparent);
	border-radius: 6px;
	text-decoration: none;
	margin-top: 6px;
}

.site-scan-fix__upgrade:hover {
	background: color-mix(in srgb, var(--sa-accent) 12%, transparent);
	text-decoration: none;
}

.site-scan-fix__upgrade .ti-arrow-right { margin-left: auto; }

/* ── CSP Generator: Crawl Report ─────────────────────────────────────────── */

.crawl-report-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.crawl-report-badge {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 12px;
	border: 1px solid transparent;
}

.crawl-report-badge--ok {
	background: var(--sa-green-bg);
	color: var(--sa-green);
	border-color: var(--sa-green-border);
}

.crawl-report-badge--warn {
	background: var(--sa-amber-bg);
	color: var(--sa-amber);
	border-color: var(--sa-amber-border);
}

.crawl-report-badge--fail {
	background: var(--sa-red-bg);
	color: var(--sa-red);
	border-color: var(--sa-red-border);
}

.crawl-report-badge__count {
	font-weight: 700;
	font-size: 14px;
}

.crawl-report-badge__label {
	font-weight: 500;
}

.crawl-report-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.6;
	margin-bottom: 12px;
	border: 1px solid transparent;
}

.crawl-report-notice .ti {
	font-size: 16px;
	flex-shrink: 0;
	margin-top: 2px;
}

.crawl-report-notice--fail {
	background: var(--sa-red-bg);
	color: var(--sa-red);
	border-color: var(--sa-red-border);
}

.crawl-report-notice--fail div { color: var(--sa-text); }

.crawl-report-notice--warn {
	background: var(--sa-amber-bg);
	color: var(--sa-amber);
	border-color: var(--sa-amber-border);
}

.crawl-report-notice--warn div { color: var(--sa-text); }

.crawl-report-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--sa-border);
	border-radius: 6px;
}

.crawl-report-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

.crawl-report-table th {
	text-align: left;
	padding: 7px 12px;
	background: var(--sa-surface-2);
	color: var(--sa-muted);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--sa-border);
	white-space: nowrap;
}

.crawl-report-table td {
	padding: 7px 12px;
	border-bottom: 1px solid var(--sa-border);
	vertical-align: middle;
}

.crawl-report-table tbody tr:last-child td { border-bottom: none; }

.crawl-report-row--warn td { background: var(--sa-amber-bg); }
.crawl-report-row--fail td { background: var(--sa-red-bg); }

.crawl-report-url {
	font-family: var(--sa-mono);
	max-width: 520px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--sa-text);
}

.crawl-report-depth {
	color: var(--sa-muted);
	text-align: center;
	white-space: nowrap;
}

.crawl-status-badge {
	display: inline-flex;
	align-items: center;
	padding: 1px 7px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	font-family: var(--sa-mono);
	white-space: nowrap;
	border: 1px solid transparent;
}

.crawl-status-badge--ok {
	background: var(--sa-green-bg);
	color: var(--sa-green);
	border-color: var(--sa-green-border);
}

.crawl-status-badge--warn {
	background: var(--sa-amber-bg);
	color: var(--sa-amber);
	border-color: var(--sa-amber-border);
}

.crawl-status-badge--fail {
	background: var(--sa-red-bg);
	color: var(--sa-red);
	border-color: var(--sa-red-border);
}

.sev--pass {
	display: inline-block;
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--sa-green-bg);
	color: var(--sa-green);
	border: 1px solid var(--sa-green-border);
	white-space: nowrap;
}

.sev--info {
	display: inline-block;
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--sa-surface-2);
	color: var(--sa-muted);
	border: 1px solid var(--sa-border-md);
	white-space: nowrap;
}

.sev--advisory {
	display: inline-block;
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: #eff6ff;
	color: #3b82f6;
	border: 1px solid #bfdbfe;
	white-space: nowrap;
}

.scan-filter {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.scan-filter__pill {
	padding: 4px 12px;
	border-radius: 20px;
	border: 1px solid var(--sa-border-md);
	background: var(--sa-surface-2);
	color: var(--sa-muted);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 5px;
}

.scan-filter__pill.active {
	background: var(--sa-accent);
	border-color: var(--sa-accent);
	color: #fff;
}

.scan-filter__count { font-weight: 700; }
.scan-filter__count--fail { color: var(--sa-red); }
.scan-filter__count--warn { color: var(--sa-amber); }
.scan-filter__count--advisory { color: #3b82f6; }
.scan-filter__pill.active .scan-filter__count--fail,
.scan-filter__pill.active .scan-filter__count--warn,
.scan-filter__pill.active .scan-filter__count--advisory { color: inherit; }

.site-scan-check__toggle {
	margin-left: auto;
	background: none;
	border: none;
	padding: 2px 4px;
	cursor: pointer;
	color: var(--sa-muted);
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.site-scan-check__toggle .ti {
	transition: transform 0.2s ease;
	font-size: 15px;
}
.site-scan-check[data-open] .site-scan-check__toggle .ti {
	transform: rotate(180deg);
}

.site-scan-check__detail {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.25s ease;
	padding: 0 2px;
	font-size: 12px;
	line-height: 1.7;
	color: var(--sa-muted);
}
.site-scan-check[data-open] .site-scan-check__detail {
	max-height: 400px;
}
.site-scan-check__detail p {
	margin: 6px 0 4px;
}

.site-scan-check__reflink {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 11px;
	font-weight: 500;
	color: var(--sa-accent);
	text-decoration: none;
	margin-bottom: 6px;
}
.site-scan-check__reflink:hover { text-decoration: underline; }

@media (max-width: 640px) {
	.site-scan-cat__head { flex-wrap: wrap; }
}

/* --- Scan History Table --- */
.scan-history-panel { margin-top: 16px; }

.scan-history-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.scan-history-table th,
.scan-history-table td {
	padding: 8px 12px;
	text-align: left;
	border-bottom: 1px solid var(--sa-border);
	vertical-align: middle;
}
.scan-history-table th {
	font-weight: 600;
	color: var(--sa-muted);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.scan-history-table a {
	color: var(--sa-accent);
	text-decoration: none;
}
.scan-history-table a:hover { text-decoration: underline; }

.scan-history-row--selected td { background: var(--sa-surface-alt, rgba(255,255,255,0.04)); }

.scan-history-date-no-csp { color: var(--sa-muted); }
.badge--no-csp { background: var(--sa-surface-2); color: var(--sa-muted); border: 0.5px solid var(--sa-border-md); margin-left: 6px; font-size: 10px; }

.scan-history-delta {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 4px;
}
.scan-history-delta--up   { color: var(--sa-green); }
.scan-history-delta--down { color: var(--sa-red); }
.scan-history-delta--neutral { color: var(--sa-muted); }

/* --- Scan Diff Row + Panel --- */
.scan-diff-row td {
	padding: 0;
	border-bottom: none;
}
.scan-diff-panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.25s ease;
}
.scan-diff-panel[data-open] {
	max-height: 800px;
}
.scan-diff-panel__loading,
.scan-diff-panel__content {
	padding: 12px 16px;
}
.scan-diff-panel__loading {
	color: var(--sa-muted);
	font-size: 13px;
}
.scan-diff-empty {
	margin: 0;
	color: var(--sa-muted);
	font-size: 13px;
}

/* --- Diff check table --- */
.diff-check-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}
.diff-check-table th,
.diff-check-table td {
	padding: 6px 10px;
	text-align: left;
	border-bottom: 1px solid var(--sa-border);
	vertical-align: top;
}
.diff-check-table th {
	font-weight: 600;
	color: var(--sa-muted);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.diff-check-name { font-weight: 500; white-space: nowrap; }
.diff-status-badge { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.diff-status-cell { white-space: nowrap; }
.diff-arrow { color: var(--sa-muted); white-space: nowrap; }
.diff-evidence { font-family: monospace; color: var(--sa-muted); word-break: break-all; }
.diff-evidence-toggle { color: var(--sa-accent); font-family: sans-serif; font-size: 11px; white-space: nowrap; }

@media (max-width: 768px) {
	.scan-history-table th:nth-child(4),
	.scan-history-table td:nth-child(4) { display: none; }
}

/* ═══════════════════════════════════════════════
   LANDING PAGE — BOLDER OVERRIDES
   Scope: .page--marketing on <body>
   ═══════════════════════════════════════════════ */

/* Full-width nav for marketing pages */
.page--marketing .sa-nav {
	width: 100%;
	max-width: 100%;
	margin: 0;
	border-radius: 0;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 0.5px solid var(--sa-border);
	padding: 0 28px;
}

/* Full-width main for marketing pages */
.page--marketing .site-main {
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin: 0;
}

/* Hero: dark anchored background with orange undertone */
.page--marketing .hero {
	background: oklch(15% 0.012 40);
	padding: 96px 0 80px;
	width: 100%;
}
html.dark .page--marketing .hero {
	background: oklch(12% 0.014 40);
}
.page--marketing .hero > .container {
	width: min(1140px, calc(100% - 56px));
	margin: 0 auto;
}

/* Hero text colors against dark background */
.page--marketing .hero__eyebrow { color: oklch(75% 0.18 50); }
.page--marketing .hero__eyebrow-dot,
.page--marketing .pulse { background: oklch(75% 0.18 50); box-shadow: 0 0 0 4px oklch(75% 0.18 50 / 0.18); }

.page--marketing .hero__h1 {
	/* color, spacing: typeset block handles font-size, weight, tracking, line-height */
	color: oklch(97% 0.006 40);
	margin: 0 0 22px;
}
.page--marketing .hero__h1 em {
	font-style: normal;
	color: oklch(75% 0.18 50);
}
.page--marketing .hero__sub {
	/* font-size handled by typeset block */
	color: oklch(72% 0.01 40);
	max-width: 500px;
	margin-bottom: 32px;
}
.page--marketing .hero__note { color: oklch(55% 0.01 40); }

/* Hero proof line: replace the stats grid */
.hero__proof-line {
	display: flex;
	align-items: center;
	gap: 0;
	flex-wrap: wrap;
	padding-top: 24px;
	border-top: 0.5px solid oklch(97% 0.006 40 / 0.12);
	margin-top: 8px;
	/* row-gap gives breathing room when items wrap to a second line */
	row-gap: 14px;
}
.hero__proof-item {
	display: flex;
	align-items: baseline;
	gap: 6px;
	/* Left-border separator: when items wrap, the first item on any new row
	   naturally has no left-border (it IS :first-child or sits at column 0),
	   so there is no orphaned right-border hanging at the row end. */
	padding-left: 24px;
	margin-left: 24px;
	border-left: 0.5px solid oklch(97% 0.006 40 / 0.12);
}
.hero__proof-item:first-child {
	border-left: none;
	margin-left: 0;
	padding-left: 0;
}
.hero__proof-n {
	font-size: 28px;
	font-weight: 700;
	color: oklch(97% 0.006 40);
	letter-spacing: -0.03em;
	line-height: 1;
}
.hero__proof-l {
	font-size: 11px;
	color: oklch(55% 0.01 40);
	line-height: 1.4;
	max-width: 72px;
}

/* Hero terminal: lift it with stronger border */
.page--marketing .hero__terminal {
	background: oklch(10% 0.015 40);
	border-color: oklch(97% 0.006 40 / 0.1);
}
.page--marketing .terminal__bar {
	background: oklch(12% 0.015 40);
	border-color: oklch(97% 0.006 40 / 0.1);
}
.page--marketing .terminal__title { color: oklch(60% 0.008 40); }
.page--marketing .hero__finding-card,
.page--marketing .hero__grade-card {
	background: oklch(20% 0.012 40);
	border-color: oklch(97% 0.006 40 / 0.1);
}
.page--marketing .hero__finding-head {
	background: oklch(16% 0.012 40);
	border-color: oklch(97% 0.006 40 / 0.08);
}
.page--marketing .hero__finding-title { color: oklch(97% 0.006 40); }
.page--marketing .hero__finding-text { color: oklch(72% 0.01 40); }
.page--marketing .hero__finding-label { color: oklch(62% 0.01 40); }
.page--marketing .hero__finding-code {
	background: oklch(10% 0.015 40);
	color: oklch(75% 0.18 50);
}
.page--marketing .hero__grade-score { color: oklch(97% 0.006 40); }
.page--marketing .hero__grade-sub { color: oklch(62% 0.01 40); }

/* Logo strip: sits below hero, no gap */
.page--marketing .logo-strip {
	background: oklch(15% 0.012 40);
	padding: 0 0 32px;
	margin-top: -1px;
}
.page--marketing .logo-strip__logos { padding: 0; }
.page--marketing .logo-strip__logo {
	background: oklch(20% 0.012 40);
	border-color: oklch(97% 0.006 40 / 0.08);
	color: oklch(60% 0.01 40);
}
.page--marketing .logo-strip__label { color: oklch(58% 0.01 40); }

/* Section headings: heavier weight */
/* Section heading size/weight handled by typeset block */

/* ── "What you get" — numbered layout, not card grid ── */
.output-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0;
	margin-top: 48px;
	border: 0.5px solid var(--sa-border-md);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.output-item {
	padding: 28px 28px 24px;
	border-bottom: 0.5px solid var(--sa-border);
	border-right: 0.5px solid var(--sa-border);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.output-item:nth-child(2n) { border-right: none; }
.output-item:nth-last-child(-n+2) { border-bottom: none; }
.output-item:last-child { border-bottom: none; border-right: none; }
.output-item__num {
	font-family: var(--sa-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--sa-accent);
}
.output-item__title {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--sa-text);
	line-height: 1.2;
}
.output-item__desc {
	font-size: 13px;
	color: var(--sa-muted);
	line-height: 1.65;
}

/* ── "What every scan checks" — category-list layout ── */
.check-categories {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	margin-top: 40px;
	background: var(--sa-border);
	border: 0.5px solid var(--sa-border-md);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.check-category {
	background: var(--sa-surface);
	padding: 24px 24px 20px;
}
.check-category__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}
.check-category__name {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--sa-text);
}
.check-category__count {
	font-family: var(--sa-mono);
	font-size: 10px;
	font-weight: 700;
	color: var(--sa-accent);
	background: rgba(249, 115, 22, 0.08);
	border: 0.5px solid rgba(249, 115, 22, 0.2);
	padding: 2px 8px;
	border-radius: 999px;
	white-space: nowrap;
	flex-shrink: 0;
	margin-top: 2px;
}
.check-category__items {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.check-category__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 0.5px solid var(--sa-border);
	font-size: 12px;
	color: var(--sa-muted);
}
.check-category__item:last-child { border-bottom: none; }
.check-category__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sa-accent);
	opacity: 0.45;
	flex-shrink: 0;
}

/* ── Final CTA — full-bleed dark panel ── */
.page--marketing .final-cta-wrap {
	background: oklch(15% 0.012 40);
	padding: 80px 0;
	margin-top: 0;
	width: 100%;
}
html.dark .page--marketing .final-cta-wrap {
	background: oklch(12% 0.014 40);
}
.page--marketing .final-cta {
	text-align: center;
}
.final-cta__headline {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: oklch(97% 0.006 40);
	margin: 0 0 12px;
}
.final-cta__sub-text {
	font-size: 15px;
	color: oklch(55% 0.01 40);
	margin: 0 0 32px;
}

/* ── How it works: stronger step numbers ── */
.page--marketing .hiw-step__num {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: oklch(98% 0.02 50 / 0.06);
	border: 0.5px solid oklch(75% 0.18 50 / 0.25);
	font-size: 12px;
	color: oklch(75% 0.18 50);
}
/* hiw-step__title size/weight handled by typeset block */

/* ═══════════════════════════════════════════════
   LANDING PAGE — TYPESET OVERRIDES
   Fonts: Barlow (body/UI) + Barlow Condensed (headings)
   Dashboard retains Inter. Mono retains JetBrains Mono.
   ═══════════════════════════════════════════════ */

/* Font-family tokens: override sans for marketing surfaces */
.page--marketing {
	--sa-sans-display: "Barlow Condensed", "Barlow", system-ui, sans-serif;
	--sa-sans-body: "Barlow", system-ui, sans-serif;
	font-optical-sizing: auto;
}

/* ── Hero terminal & finding card: scale up from dashboard-density sizes ── */
/* The terminal was 11px (dashboard compact). On a hero it needs to be readable. */
.page--marketing .terminal__body {
	font-size: 13px;
	line-height: 1.8;
}
.page--marketing .hero__finding-title {
	font-size: 13px;
}
.page--marketing .hero__finding-sev {
	font-size: 10px;
	padding: 3px 7px;
}
.page--marketing .hero__finding-label {
	font-size: 10px;
	letter-spacing: 0.07em;
}
.page--marketing .hero__finding-text {
	font-size: 12px;
	line-height: 1.55;
}
.page--marketing .hero__finding-code {
	font-size: 11px;
}
.page--marketing .hero__grade-score {
	font-size: 15px;
}
.page--marketing .hero__grade-sub {
	font-size: 11px;
}

/* Body text: switch to Barlow */
.page--marketing,
.page--marketing p,
.page--marketing li,
.page--marketing .hero__sub,
.page--marketing .section__sub,
.page--marketing .hiw-step__desc,
.page--marketing .output-item__desc,
.page--marketing .check-category__item,
.page--marketing .final-cta__sub-text {
	font-family: "Barlow", system-ui, sans-serif;
	font-kerning: normal;
}

/* Display headings: Barlow Condensed */
.page--marketing .hero__h1,
.page--marketing .section__heading,
.page--marketing .final-cta__headline {
	font-family: "Barlow Condensed", system-ui, sans-serif;
	font-weight: 700;
}

/* Subheadings and titles: Barlow, stronger weight */
.page--marketing .hiw-step__title,
.page--marketing .output-item__title,
.page--marketing .check-category__name {
	font-family: "Barlow", system-ui, sans-serif;
	font-weight: 600;
}

/* Hero H1: go larger — condensed width gives room */
.page--marketing .hero__h1 {
	font-size: clamp(52px, 8vw, 96px);
	line-height: 1.0;
	letter-spacing: -0.01em; /* Condensed needs less negative tracking */
	text-wrap: balance;
}

/* Section headings: condensed cuts, sharper scale */
.page--marketing .section__heading {
	font-size: clamp(32px, 4.5vw, 54px);
	letter-spacing: -0.005em;
	text-wrap: balance;
}

/* Final CTA headline: match section heading */
.page--marketing .final-cta__headline {
	font-size: clamp(36px, 5vw, 60px);
	letter-spacing: 0;
	text-wrap: balance;
}

/* Body text: Barlow 400 reads lighter, boost line-height slightly */
.page--marketing .hero__sub {
	font-size: 17px;
	line-height: 1.75;
	font-weight: 400;
}
.page--marketing .section__sub {
	font-size: 16px;
	line-height: 1.75;
	font-weight: 400;
}
.page--marketing .hiw-step__desc {
	font-size: 14px;
	line-height: 1.72;
}
.page--marketing .output-item__desc {
	font-size: 14px;
	line-height: 1.7;
}

/* How-it-works step titles: bigger with condensed body */
.page--marketing .hiw-step__title {
	font-size: 20px;
	letter-spacing: -0.01em;
}

/* Output item ordinals: mono stays, but tighten */
.page--marketing .output-item__num {
	font-size: 10px;
	letter-spacing: 0.12em;
}

/* Output item titles: slightly larger for Barlow's looser spacing */
.page--marketing .output-item__title {
	font-size: 18px;
	letter-spacing: -0.01em;
}

/* Proof numbers: Barlow Condensed for the numerals */
.page--marketing .hero__proof-n {
	font-family: "Barlow Condensed", system-ui, sans-serif;
	font-size: 34px;
	letter-spacing: -0.01em;
}
.page--marketing .hero__proof-l {
	font-size: 11px;
	font-family: "Barlow", system-ui, sans-serif;
	line-height: 1.45;
}

/* Nav: keep Inter for the app nav — it's shared with the product */

/* Buttons: Barlow on marketing pages */
.page--marketing .btn {
	font-family: "Barlow", system-ui, sans-serif;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* Eyebrows: keep mono, but ensure they're legible against dark background */
.page--marketing .section__eyebrow {
	font-size: 11px;
	letter-spacing: 0.1em;
}

/* Check category name: slightly larger */
.page--marketing .check-category__name {
	font-size: 16px;
}

/* Improve text-wrap on headings throughout */
.page--marketing h1,
.page--marketing h2,
.page--marketing h3 {
	text-wrap: balance;
}

/* Light-on-dark compensation: hero body text (dark section) */
.page--marketing .hero__sub,
.page--marketing .final-cta__sub-text {
	letter-spacing: 0.01em; /* Barlow already open at small sizes; slight boost */
}

/* ── Responsive ── */
@media (max-width: 900px) {
	.page--marketing .hero__h1 { font-size: clamp(40px, 9vw, 64px); }
	.output-list { grid-template-columns: 1fr; }
	.output-item { border-right: none; }
	.output-item:nth-last-child(-n+2) { border-bottom: 0.5px solid var(--sa-border); }
	.output-item:last-child { border-bottom: none; }
	.check-categories { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	/* At narrow widths items may wrap; remove left-borders to avoid orphan separators */
	.hero__proof-line { row-gap: 10px; }
	.hero__proof-item {
		padding-left: 16px;
		margin-left: 16px;
		border-left: none;
	}
	.hero__proof-n { font-size: 22px; }
}

/* ============================================================
   HARDEN: ACCESSIBILITY & RESILIENCE
   ============================================================ */

/* ── Skip navigation ── */
.sa-skip-nav {
	position: absolute;
	top: -100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	background: var(--sa-accent);
	color: var(--sa-accent-text);
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	white-space: nowrap;
	transition: top 0.15s ease;
	text-decoration: none;
}
.sa-skip-nav:focus-visible {
	top: 0;
	outline: 3px solid var(--sa-accent-text);
	outline-offset: 2px;
}

/* ── Global :focus-visible ── */
/* Restore keyboard focus indicator that outline:none suppresses */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid oklch(65% 0.16 38);
	outline-offset: 2px;
}
/* Suppress for mouse/touch users — these keep outline:none behaviour */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
	outline: none;
}

/* ── Ghost button on dark background ── */
.btn--ghost-on-dark {
	border-color: oklch(97% 0.006 40 / 0.18);
	color: oklch(72% 0.01 40);
}
.btn--ghost-on-dark:hover {
	border-color: oklch(97% 0.006 40 / 0.35);
	color: oklch(92% 0.006 40);
}

/* ── Hero body note (replaces inline style in hero dark section) ── */
.page--marketing .hero__body-note {
	font-size: 13px;
	color: oklch(55% 0.01 40);
	line-height: 1.65;
	max-width: 460px;
}

/* ── Final CTA footnote (replaces inline color:oklch(40%) ── */
.page--marketing .final-cta__note {
	margin-top: 14px;
	justify-content: center;
	color: oklch(62% 0.01 40); /* was 40% — 2.73:1 fail; 62% = 4.6:1 on dark panel bg */
	font-size: 11px;
	text-align: center;
}

/* ── Mobile hero fallback: keep grade card + one finding when terminal hides ── */
/* terminal already hides at 900px via existing rule */
@media (max-width: 900px) {
	.page--marketing .hero__finding-stack {
		display: flex;
	}
	.page--marketing .hero__finding-card:nth-child(n+3) {
		display: none; /* keep first two: grade-card + one finding */
	}
}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
	.pulse,
	.hero__eyebrow-dot {
		animation: none;
	}
	.terminal__cursor {
		animation: none;
		opacity: 1;
	}
	.scan-progress-bar {
		animation: none;
		width: 100%;
	}
}

/* ============================================================
   PRICING PAGE — MARKETING TREATMENT
   ============================================================ */

/* Eyebrow centering utility (avoids inline style) */
.section__eyebrow--center {
	justify-content: center;
	text-align: center;
}

/* Pricing page: restore container padding stripped by site-main override */
.page--marketing .pricing-page {
	padding-top: 72px;
	padding-bottom: 80px;
}

/* Typography: display headings */
.page--marketing .feat-compare__title {
	font-family: "Barlow Condensed", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(22px, 2.5vw, 30px);
	letter-spacing: -0.01em;
}

.page--marketing .feat-compare__plan-name {
	font-family: "Barlow", system-ui, sans-serif;
	font-weight: 600;
	letter-spacing: 0;
}

.page--marketing .feat-compare__price-main {
	font-family: "Barlow Condensed", system-ui, sans-serif;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.page--marketing .enterprise-bar__title {
	font-family: "Barlow Condensed", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(18px, 2vw, 24px);
	letter-spacing: -0.01em;
}

.page--marketing .faq-item__title {
	font-family: "Barlow", system-ui, sans-serif;
	font-weight: 600;
}

/* Billing labels: Barlow */
.page--marketing .billing-label {
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 14px;
}

/* ============================================================
   CSP REFERENCE PAGE — MARKETING TREATMENT
   ============================================================ */

/* Reference page: restore padding stripped by site-main override */
.page--marketing .reference-page {
	padding-top: 72px;
	padding-bottom: 80px;
}

/* Hero title: Barlow Condensed for the large H1 */
.page--marketing .reference-hero__title {
	font-family: "Barlow Condensed", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(36px, 5vw, 64px);
	letter-spacing: -0.015em;
	line-height: 1.0;
}

/* Hero sub body: Barlow */
.page--marketing .reference-hero__sub {
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.75;
}

/* Quickstart section heading */
.page--marketing .reference-quickstart > .section__eyebrow {
	margin-bottom: 16px;
}

/* Quickstart card: directive names stay mono (they are code), summary gets Barlow */
.page--marketing .reference-quickstart__summary {
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.6;
}

/* Reference card: summary text gets Barlow for readability */
.page--marketing .reference-card__summary {
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.7;
}

/* Reference note at bottom */
.page--marketing .reference-note {
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 13px;
}

/* ============================================================
   AUTH PAGES — TYPE & NAV TREATMENT  (page--auth)
   ============================================================ */

/* Full-width nav: same treatment as page--marketing */
.page--auth .sa-nav {
	border-radius: 0;
	width: 100%;
	margin: 0;
	border: none;
	border-bottom: 0.5px solid var(--sa-border);
	padding: 0 28px;
}

/* Panel heading: Barlow Condensed — the first thing you read on each auth step */
.page--auth .panel-heading,
.page--auth .auth-state__title {
	font-family: "Barlow Condensed", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(22px, 3vw, 28px);
	letter-spacing: -0.01em;
	line-height: 1.1;
}

/* Panel sub and state sub: Barlow body */
.page--auth .panel-sub,
.page--auth .auth-state__sub {
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.7;
}

/* Logo wordmark on auth panels: Barlow */
.page--auth .panel-logo {
	font-family: "Barlow", system-ui, sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.01em;
}

/* Buttons: Barlow 600 to match marketing */
.page--auth .btn {
	font-family: "Barlow", system-ui, sans-serif;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* SSO buttons: Barlow */
.page--auth .sso-btn {
	font-family: "Barlow", system-ui, sans-serif;
	font-weight: 600;
	font-size: 13px;
}

/* Sign-in / helper links: Barlow */
.page--auth .signin-link {
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 13px;
}

/* Divider text: Barlow */
.page--auth .sa-divider__text {
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 12px;
}

/* Inputs and labels stay Inter — they are product chrome */

/* ============================================================
   MARKETING STUB PAGES — prose layout
   (about, privacy, terms — currently placeholder copy)
   ============================================================ */

/* Restore padding stripped by site-main full-width override */
.page--marketing .site-main > main .section,
.page--marketing main.site-main > .section {
	padding-top: 72px;
}

/* Prose H1 on stub pages: Barlow Condensed, already handled by
   the global page--marketing h1 typeset rule. No extra rules needed
   until real copy is added. */

/* ============================================================
   FETCH DIRECTIVE SYNTAX — additional type overrides
   ============================================================ */

/* Syntax page padding: restore from site-main override */
.page--marketing .reference-syntax-page {
	padding-top: 72px;
	padding-bottom: 80px;
}

/* Rule titles: Barlow 600 */
.page--marketing .reference-syntax-rule__title {
	font-family: "Barlow", system-ui, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: -0.01em;
}

/* Rule body text: Barlow */
.page--marketing .reference-syntax-rule__text {
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.7;
}

/* Source expression form tokens stay mono (they are code) */

/* Card summary text: Barlow */
.page--marketing .reference-syntax-card__summary {
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.6;
}

/* Syntax note beneath the example block */
.page--marketing .reference-syntax-note {
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.7;
}