:root {
	--bg: #eef3f8;
	--topbar: #1f3147;
	--surface: #ffffff;
	--surface-soft: #f8fafd;
	--text: #1f2a37;
	--muted: #59697d;
	--border: #d7e0ea;
	--border-strong: #c7d3e0;
	--link: #0f5ea8;
	--link-hover: #0b4780;
	--primary: #0f5ea8;
	--primary-hover: #0b4f8d;
	--danger: #b42318;
	--danger-hover: #9f1f16;
	--success-bg: #ecfdf3;
	--success-border: #abefc6;
	--success-text: #067647;
	--error-bg: #fef3f2;
	--error-border: #fecdca;
	--error-text: #b42318;
	--warn-bg: #fffaeb;
	--warn-border: #fedf89;
	--warn-text: #b54708;
	--radius: 10px;
	--shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: linear-gradient(180deg, #f3f7fb 0%, var(--bg) 100%);
	color: var(--text);
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	line-height: 1.5;
}

.topbar {
	background: var(--topbar);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 2px 8px rgba(16, 24, 40, 0.2);
}

.topbar-inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0.75rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.brand {
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.2px;
	text-decoration: none;
}

.brand:hover { color: #dbe9f8; }

.topbar-nav {
	display: flex;
	gap: 0.85rem;
}

.topbar-nav a {
	color: #d6e5f5;
	font-size: 0.93rem;
	text-decoration: none;
}

.topbar-nav a:hover { color: #fff; text-decoration: none; }

.topbar-nav a.active {
	color: #fff;
	border-bottom: 2px solid #fff;
	padding-bottom: 2px;
}

.topbar-user {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.topbar-user-name {
	color: #b4c9de;
	font-size: 0.84rem;
}

.topbar-meta {
	margin: 0;
	color: #c9d9ea;
	font-size: 0.83rem;
	text-align: right;
}

.topbar-logout-form {
	display: inline;
}

.topbar-logout-btn {
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 4px;
	color: #d6e5f5;
	font-size: 0.8rem;
	padding: 0.2rem 0.55rem;
	cursor: pointer;
}

.topbar-logout-btn:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.page-shell {
	max-width: 1120px;
	margin: 1.5rem auto 2.25rem;
	padding: 0 1.25rem;
}

.content-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1.35rem 1.45rem;
}

h1 {
	margin: 0 0 0.65rem;
	font-size: 1.6rem;
	line-height: 1.25;
}

h2 {
	margin: 1.35rem 0 0.55rem;
	font-size: 1.08rem;
}

p { margin: 0.5rem 0; }

a {
	color: var(--link);
	text-decoration: none;
}

a:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

.muted {
	color: var(--muted);
}

.page-actions {
	margin-bottom: 0.85rem;
	color: var(--muted);
	font-size: 0.88rem;
}

.page-actions a { font-weight: 500; }

/* Back-link pattern (consistent arrow treatment) */
.back-link {
	font-weight: 500;
	color: var(--muted);
	font-size: 0.88rem;
}
.back-link:hover {
	color: var(--link);
}

.list-filters {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 0.75rem 0 0.25rem;
}

.list-filters label {
	font-size: 0.88rem;
	margin: 0;
}

.list-filters select {
	width: auto;
	min-width: 10rem;
	margin: 0;
	padding: 0.35rem 0.5rem;
	font-size: 0.88rem;
}

.section-card {
	background: var(--surface-soft);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 0.95rem 1rem;
	margin: 1rem 0;
}

/* ── Data tables ── */
.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	margin: 0.5rem 0 1rem;
}

.data-table th,
.data-table td {
	border: 1px solid var(--border);
	padding: 0.45rem 0.6rem;
	text-align: left;
}

.data-table th {
	background: var(--surface-soft);
	font-weight: 600;
}

.data-table tbody tr:hover {
	background: #f5f8fc;
}

.flash-list {
	list-style: none;
	padding: 0;
	margin: 0.9rem 0;
}

.flash {
	border: 1px solid var(--border);
	border-radius: 8px;
	background: #f7f9fc;
	padding: 0.55rem 0.7rem;
	margin-bottom: 0.45rem;
}

.flash-success {
	background: var(--success-bg);
	border-color: var(--success-border);
	color: var(--success-text);
}

.flash-error {
	background: var(--error-bg);
	border-color: var(--error-border);
	color: var(--error-text);
}

.flash-warning {
	background: var(--warn-bg);
	border-color: var(--warn-border);
	color: var(--warn-text);
}

form {
	margin: 1rem 0;
}

form > p {
	margin: 0.75rem 0;
}

label,
form strong {
	font-weight: 600;
}

input,
select,
textarea,
button {
	font: inherit;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
select,
textarea {
	width: min(100%, 40rem);
	margin-top: 0.28rem;
	padding: 0.48rem 0.58rem;
	color: var(--text);
	background: #fff;
	border: 1px solid var(--border-strong);
	border-radius: 7px;
}

textarea {
	min-height: 5.8rem;
	resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: #9ab9dc;
	box-shadow: 0 0 0 3px rgba(15, 94, 168, 0.12);
}

input[type="checkbox"] {
	transform: translateY(1px);
}

button,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.46rem 0.9rem;
	border: 1px solid var(--primary);
	border-radius: 7px;
	background: var(--primary);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

button:hover,
input[type="submit"]:hover {
	background: var(--primary-hover);
	border-color: var(--primary-hover);
}

button[onclick*="Remove"],
button[onclick*="Lock"],
button.btn-danger {
	background: #fff;
	border-color: var(--danger);
	color: var(--danger);
}

button[onclick*="Remove"]:hover,
button[onclick*="Lock"]:hover,
button.btn-danger:hover {
	background: var(--danger);
	color: #fff;
	border-color: var(--danger-hover);
}

button:disabled,
input[type="submit"]:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 0.95rem 0 1.1rem;
	border: 1px solid var(--border);
	border-radius: 8px;
}

th,
td {
	padding: 0.53rem 0.6rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--border);
}

thead th {
	background: #eaf1f8;
	color: #23364a;
	font-weight: 700;
	font-size: 0.92rem;
}
thead th:first-child { border-top-left-radius: 7px; }
thead th:last-child { border-top-right-radius: 7px; }

tbody tr:nth-child(even) td {
	background: #fafcff;
}

tbody tr:hover td {
	background: #f2f7fd;
}

tbody tr:last-child td {
	border-bottom: none;
}
tbody tr:last-child td:first-child { border-bottom-left-radius: 7px; }
tbody tr:last-child td:last-child { border-bottom-right-radius: 7px; }

.badge {
	display: inline-block;
	border-radius: 999px;
	padding: 0.13rem 0.48rem;
	font-size: 0.77rem;
	font-weight: 700;
	text-transform: capitalize;
	border: 1px solid transparent;
}

.badge-draft { background: #eef4ff; border-color: #c9d7ff; color: #1d4ed8; }
.badge-open { background: #ecfdf3; border-color: #abefc6; color: #067647; }
.badge-closed { background: #fff4ed; border-color: #ffdcc5; color: #b54708; }
.badge-archived { background: #f4f4f5; border-color: #d4d4d8; color: #3f3f46; }
.badge-submitted { background: #ecfdf3; border-color: #abefc6; color: #067647; }
.badge-reopened { background: #fffaeb; border-color: #fedf89; color: #b54708; }
.badge-locked { background: #f2f4f7; border-color: #d0d5dd; color: #344054; }
.badge-invited { background: #eef4ff; border-color: #c9d7ff; color: #1d4ed8; }
.badge-in_progress { background: #eff8ff; border-color: #b2ddff; color: #175cd3; }

.badge-view-link {
	font-size: 0.78rem;
	margin-left: 0.35rem;
	white-space: nowrap;
}

code {
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;
	overflow-x: auto;
	font-family: Consolas, "Courier New", monospace;
	background: #f5f7fa;
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 0.14rem 0.34rem;
}

hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: 1rem 0;
}

/* ── Button system ──────────────────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.42rem 0.85rem;
	border: 1px solid transparent;
	border-radius: 7px;
	font-weight: 600;
	font-size: 0.88rem;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.4;
	white-space: nowrap;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-primary {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}
.btn-primary:hover {
	background: var(--primary-hover);
	border-color: var(--primary-hover);
	color: #fff;
	text-decoration: none;
}

.btn-secondary {
	background: var(--surface);
	border-color: var(--border-strong);
	color: var(--text);
}
.btn-secondary:hover {
	background: var(--surface-soft);
	border-color: var(--primary);
	color: var(--primary);
	text-decoration: none;
}

.btn-subtle {
	background: transparent;
	border-color: transparent;
	color: var(--link);
	padding: 0.3rem 0.5rem;
}
.btn-subtle:hover {
	background: var(--surface-soft);
	color: var(--link-hover);
	text-decoration: none;
}

.btn-danger {
	background: var(--surface);
	border-color: var(--danger);
	color: var(--danger);
}
.btn-danger:hover {
	background: var(--danger);
	border-color: var(--danger-hover);
	color: #fff;
	text-decoration: none;
}

.btn-sm {
	padding: 0.25rem 0.55rem;
	font-size: 0.8rem;
}

.btn:disabled, .btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* ── Page header ───────────────────────────────────────────────────── */
.page-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.page-header h1 {
	margin: 0;
}

.page-header-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* ── Row actions (kebab / 3-dot menu) ──────────────────────────────── */
.row-actions {
	position: relative;
	text-align: center;
}

.row-actions-toggle {
	background: none;
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	padding: 0.15rem 0.35rem;
	color: var(--muted);
	letter-spacing: 0.12em;
}
.row-actions-toggle:hover {
	background: var(--surface-soft);
	border-color: var(--border);
	color: var(--text);
}

.row-actions-menu {
	display: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 50;
	min-width: 140px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0,0,0,.12);
	padding: 0.25rem 0;
	text-align: left;
}
.row-actions.open .row-actions-menu {
	display: block;
}
.row-actions.open-up .row-actions-menu {
	display: block;
	top: auto;
	bottom: 0;
	box-shadow: 0 -4px 12px rgba(0,0,0,.12);
}

.row-actions-menu a,
.row-actions-menu button {
	display: block;
	width: 100%;
	padding: 0.35rem 0.75rem;
	font-size: 0.82rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--link);
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	line-height: 1.4;
}
.row-actions-menu a:hover,
.row-actions-menu button:hover {
	background: var(--surface-soft);
	color: var(--link-hover);
}
.row-actions-menu .row-action-danger {
	color: var(--danger);
}
.row-actions-menu .row-action-danger:hover {
	background: var(--error-bg);
	color: var(--danger-hover);
}

.row-actions-menu form {
	margin: 0;
}

/* ── Stat cards ────────────────────────────────────────────────────── */
.stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 0.75rem;
	margin: 0.75rem 0;
}

.stat-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 0.85rem 1rem;
	text-align: center;
}

.stat-card-value {
	font-size: 1.65rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--text);
}

.stat-card-label {
	font-size: 0.78rem;
	color: var(--muted);
	margin-top: 0.2rem;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-weight: 600;
}

/* ── Form groups ───────────────────────────────────────────────────── */
.form-group {
	margin: 0.85rem 0;
}

.form-group label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.2rem;
}

.form-group .form-hint {
	font-size: 0.82rem;
	color: var(--muted);
	margin: 0.15rem 0 0;
}

.form-group .form-error {
	font-size: 0.82rem;
	color: var(--error-text);
	margin-top: 0.2rem;
}

/* ── Empty states ──────────────────────────────────────────────────── */
.empty-state {
	text-align: center;
	padding: 2rem 1rem;
	color: var(--muted);
}

.empty-state p {
	margin: 0.25rem 0;
}

/* ── Gauge / tachometer indicators ─────────────────────────────────── */
.gauge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 100px;
}

.gauge-meter {
	position: relative;
	width: 88px;
	height: 50px;
	overflow: hidden;
}

.gauge-meter-bg,
.gauge-meter-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	border: 8px solid transparent;
	box-sizing: border-box;
}

.gauge-meter-bg {
	border-top-color: var(--border);
	border-left-color: var(--border);
	border-right-color: var(--border);
	transform: rotate(0deg);
}

.gauge-meter-fill {
	border-top-color: var(--primary);
	border-left-color: var(--primary);
	border-right-color: transparent;
	transform-origin: center center;
	transition: transform 0.5s ease;
}

.gauge-meter-fill.gauge-low {
	border-top-color: var(--danger);
	border-left-color: var(--danger);
}
.gauge-meter-fill.gauge-mid {
	border-top-color: #dc6803;
	border-left-color: #dc6803;
}
.gauge-meter-fill.gauge-good {
	border-top-color: var(--success-text);
	border-left-color: var(--success-text);
}

.gauge-value {
	font-size: 1.1rem;
	font-weight: 700;
	margin-top: -0.3rem;
}

.gauge-label {
	font-size: 0.72rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	font-weight: 600;
	margin-top: 0.15rem;
}

/* ── Metric bar (horizontal gauge) ─────────────────────────────────── */
.metric-bar {
	margin: 0.5rem 0;
}

.metric-bar-header {
	display: flex;
	justify-content: space-between;
	font-size: 0.82rem;
	margin-bottom: 0.25rem;
}

.metric-bar-label {
	font-weight: 600;
	color: var(--text);
}

.metric-bar-value {
	font-weight: 700;
	color: var(--text);
}

.metric-bar-track {
	height: 8px;
	background: var(--border);
	border-radius: 4px;
	overflow: hidden;
	position: relative;
}

.metric-bar-fill {
	height: 100%;
	border-radius: 4px;
	transition: width 0.4s ease;
	min-width: 2px;
}

.metric-bar-fill.fill-low { background: var(--danger); }
.metric-bar-fill.fill-mid { background: #dc6803; }
.metric-bar-fill.fill-good { background: var(--success-text); }
.metric-bar-fill.fill-primary { background: var(--primary); }

.metric-bar-marker {
	position: absolute;
	top: -3px;
	width: 2px;
	height: 14px;
	background: var(--text);
	border-radius: 1px;
	transform: translateX(-1px);
}

/* ── Benchmark positioning indicator ───────────────────────────────── */
.col-gauge { min-width: 140px; }

.position-indicator {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.25rem 0;
}

.position-track {
	flex: 1;
	height: 6px;
	background: linear-gradient(to right, var(--error-bg) 0%, var(--warn-bg) 25%, var(--success-bg) 50%, #eff8ff 75%, #f4f3ff 100%);
	border: 1px solid var(--border);
	border-radius: 3px;
	position: relative;
	min-width: 120px;
}

.position-track .metric-bar-fill {
	position: absolute;
	top: 0;
	height: 100%;
	opacity: 0.55;
	border-radius: 3px;
}

.position-marker {
	position: absolute;
	top: -5px;
	width: 10px;
	height: 16px;
	border-radius: 3px;
	border: 2px solid var(--text);
	background: var(--surface);
	transform: translateX(-5px);
}

.position-label {
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}

/* ── Benchmark report ──────────────────────────────────────────────── */

.print-link {
	font-weight: 500;
}

.export-actions {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
}

.benchmark-summary ul.summary-list {
	list-style: none;
	padding: 0;
	margin: 0.6rem 0 0.3rem;
}

.benchmark-summary ul.summary-list li {
	padding: 0.4rem 0.55rem;
	margin-bottom: 0.3rem;
	border-radius: 6px;
	border-left: 4px solid var(--border);
	background: var(--surface);
}

.benchmark-summary li.interp-below-range { border-left-color: #b42318; background: #fef3f2; }
.benchmark-summary li.interp-below { border-left-color: #dc6803; background: #fffaeb; }
.benchmark-summary li.interp-near { border-left-color: #067647; background: #ecfdf3; }
.benchmark-summary li.interp-above { border-left-color: #175cd3; background: #eff8ff; }
.benchmark-summary li.interp-above-range { border-left-color: #6941c6; background: #f4f3ff; }
.benchmark-summary li.interp-insufficient { border-left-color: var(--border); background: #f9fafb; color: var(--muted); }

.divergence { color: var(--muted); font-size: 0.88rem; }

.pay-basis-tag {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 0.08rem 0.38rem;
	border-radius: 4px;
}

.pay-basis-salary { background: #eef4ff; color: #1d4ed8; }
.pay-basis-hourly { background: #fff4ed; color: #b54708; }

.interp-badge {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.1rem 0.45rem;
	border-radius: 4px;
	white-space: nowrap;
}

.interp-badge.interp-below-range { background: #fef3f2; color: #b42318; }
.interp-badge.interp-below { background: #fffaeb; color: #dc6803; }
.interp-badge.interp-near { background: #ecfdf3; color: #067647; }
.interp-badge.interp-above { background: #eff8ff; color: #175cd3; }
.interp-badge.interp-above-range { background: #f4f3ff; color: #6941c6; }

.col-deemph { color: var(--muted); font-size: 0.88rem; }

.benchmark-primary { border-left: 4px solid #175cd3; }

.primary-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0.12rem 0.45rem;
	border-radius: 4px;
	background: #eef4ff;
	color: #175cd3;
	vertical-align: middle;
	margin-left: 0.5rem;
}

.supporting-label {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0.12rem 0.45rem;
	border-radius: 4px;
	background: #f3f4f6;
	color: var(--muted);
	vertical-align: middle;
	margin-left: 0.5rem;
}

.interp-legend {
	margin-top: 0.75rem;
	font-size: 0.85rem;
}
.interp-legend summary {
	cursor: pointer;
	color: var(--muted);
	font-weight: 500;
}
.interp-legend dl {
	margin: 0.5rem 0 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.3rem 0.75rem;
	align-items: center;
}
.interp-legend dt { margin: 0; }
.interp-legend dd { margin: 0; color: var(--muted); }

/* ── Print-friendly styles ─────────────────────────────────────────── */

@media print {
	body {
		background: #fff;
		color: #000;
		font-size: 10pt;
		line-height: 1.4;
	}

	.topbar,
	.page-actions,
	.page-header-actions,
	.row-actions,
	.interp-legend summary,
	button,
	input[type="submit"],
	form[method="post"] {
		display: none !important;
	}

	.page-shell {
		max-width: 100%;
		margin: 0;
		padding: 0;
	}

	.content-card {
		border: none;
		box-shadow: none;
		padding: 0;
	}

	.section-card {
		break-inside: avoid;
		border: 1px solid #ccc;
		page-break-inside: avoid;
	}

	table {
		font-size: 9pt;
		border: 1px solid #999;
	}

	th, td {
		border: 1px solid #ccc;
		padding: 3pt 5pt;
	}

	thead th {
		background: #e8e8e8 !important;
		color: #000;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.interp-badge,
	.pay-basis-tag,
	.badge,
	.primary-badge,
	.supporting-label {
		border: 1px solid #999;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.benchmark-summary li {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	a[href]::after {
		content: none;
	}

	h1 { font-size: 14pt; }
	h2 { font-size: 11pt; }
	}

/* ── Public landing page ──────────────────────────────────────────── */
.public-page {
	background:
		radial-gradient(circle at top left, rgba(233, 241, 250, 0.95), transparent 36%),
		linear-gradient(180deg, #edf3f8 0%, #e7eef5 100%);
}

.public-topbar {
	background: linear-gradient(90deg, #183149 0%, #26496a 100%);
}

.public-page .page-shell {
	max-width: 1180px;
	margin-top: 2rem;
	margin-bottom: 0;
	padding-bottom: 2.5rem;
}

.landing-hero {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
	gap: 1rem;
	align-items: stretch;
	margin-bottom: 1rem;
}

.landing-hero-panel,
.landing-sidecard,
.landing-info-card,
.landing-trust-card,
.landing-note-card,
.landing-legal-card,
.landing-faq-item {
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(199, 211, 224, 0.95);
	border-radius: 16px;
	box-shadow: 0 14px 34px rgba(21, 39, 61, 0.08);
	backdrop-filter: blur(4px);
}

.landing-hero-panel {
	padding: 2rem 2rem 1.8rem;
	position: relative;
	overflow: hidden;
}

.landing-hero-panel::after {
	content: "";
	position: absolute;
	inset: auto -40px -60px auto;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(15, 94, 168, 0.14) 0%, rgba(15, 94, 168, 0) 72%);
	pointer-events: none;
}

.landing-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #315b82;
}

.landing-hero h1 {
	font-size: clamp(2rem, 4vw, 3.1rem);
	line-height: 1.08;
	max-width: 12ch;
	margin-bottom: 0.95rem;
	color: #1c3045;
}

.landing-lead {
	font-size: 1.08rem;
	max-width: 58rem;
	color: #31475d;
	margin-bottom: 0.8rem;
}

.landing-lead-subtle {
	color: var(--muted);
	max-width: 44rem;
	margin-bottom: 1.25rem;
}

.landing-trust-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	position: relative;
	z-index: 1;
}

.landing-trust-strip span {
	display: inline-flex;
	align-items: center;
	padding: 0.42rem 0.7rem;
	border-radius: 999px;
	background: #eef5fb;
	border: 1px solid #d1deec;
	color: #294866;
	font-size: 0.86rem;
	font-weight: 600;
}

.landing-sidecard {
	padding: 1.35rem 1.35rem 1.2rem;
	align-self: end;
	background: linear-gradient(180deg, rgba(247, 250, 253, 0.97) 0%, rgba(236, 243, 250, 0.97) 100%);
}

.landing-sidecard h2,
.landing-section-header h2,
.landing-info-card h3,
.landing-trust-card h3,
.landing-faq-item h3 {
	margin-top: 0;
}

.landing-section {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.landing-section-header {
	margin-bottom: 0.8rem;
	justify-content: flex-start;
}

.landing-section-header h2 {
	font-size: 1.42rem;
	color: #1d3146;
}

.landing-benefit-grid,
.landing-trust-grid,
.landing-faq-list {
	display: grid;
	gap: 0.85rem;
}

.landing-benefit-grid {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.landing-trust-grid {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin-bottom: 0.85rem;
}

.landing-faq-list {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.landing-info-card,
.landing-trust-card,
.landing-faq-item {
	padding: 1.15rem 1.15rem 1rem;
}

.landing-info-card h3,
.landing-trust-card h3,
.landing-faq-item h3 {
	font-size: 1rem;
	color: #1f3349;
	margin-bottom: 0.45rem;
}

.landing-section-emphasis {
	padding: 0.25rem 0;
}

.landing-note-card,
.landing-legal-card {
	padding: 1.15rem 1.2rem;
	background: rgba(250, 252, 254, 0.96);
}

.site-footer {
	border-top: 1px solid rgba(199, 211, 224, 0.9);
	background: rgba(24, 49, 73, 0.96);
	color: #dce7f2;
	padding: 1rem 0 1.2rem;
	margin-top: 0.5rem;
}

.site-footer-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 1.25rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: flex-start;
}

.site-footer-title,
.site-footer-copy,
.site-footer-note {
	margin: 0;
}

.site-footer-title {
	font-weight: 700;
	margin-bottom: 0.2rem;
	color: #fff;
}

.site-footer-copy,
.site-footer-note {
	font-size: 0.88rem;
	color: #c5d5e5;
}

.site-footer-note {
	max-width: 40rem;
	text-align: right;
}

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

	.site-footer-inner {
		display: block;
	}

	.site-footer-note,
	.topbar-meta {
		text-align: left;
		margin-top: 0.6rem;
	}

	.landing-hero h1 {
		max-width: none;
	}

	.landing-hero-panel {
		padding: 1.5rem;
	}
}

@media (max-width: 720px) {
	.topbar-inner {
		align-items: flex-start;
		flex-direction: column;
	}

	.public-page .page-shell {
		margin-top: 1.25rem;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.landing-sidecard,
	.landing-info-card,
	.landing-trust-card,
	.landing-note-card,
	.landing-legal-card,
	.landing-faq-item {
		padding: 1rem;
	}

	.landing-section-header h2 {
		font-size: 1.24rem;
	}
}

/* ── Dashboard site-map layout ─────────────────────────────────────── */

.dashboard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1rem;
	margin: 1.25rem 0;
}

.dashboard-section h2 {
	margin: 0 0 0.25rem;
	font-size: 1.05rem;
}

.dashboard-section > .muted {
	font-size: 0.88rem;
	margin: 0 0 0.5rem;
}

.dashboard-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.dashboard-links li {
	padding: 0.3rem 0;
}

.dashboard-links a {
	font-weight: 600;
}

.dashboard-links .muted {
	font-size: 0.85rem;
}

/* ── Email draft cards ── */
.email-draft-card {
	background: var(--surface);
	padding: 1.2rem 1.25rem;
}

.email-draft-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0.5rem 0;
}

.email-draft-table td {
	padding: 0.35rem 0.5rem 0.35rem 0;
	vertical-align: top;
}

.email-draft-table td:first-child {
	white-space: nowrap;
	width: 5.5rem;
	color: var(--muted);
}

.email-draft-table code {
	background: var(--surface-soft);
	border: 1px solid var(--border);
	padding: 0.15rem 0.4rem;
	border-radius: 4px;
	font-size: 0.88rem;
}

.copy-btn {
	background: var(--surface-soft);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 0.2rem 0.55rem;
	font-size: 0.78rem;
	cursor: pointer;
	color: var(--link);
	margin-left: 0.35rem;
	vertical-align: middle;
}

.copy-btn:hover {
	background: var(--border);
}

.email-body-preview {
	background: var(--surface-soft);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 0.75rem 0.9rem;
	font-size: 0.86rem;
	line-height: 1.55;
	white-space: pre-wrap;
	word-break: break-word;
	max-height: 20rem;
	overflow-y: auto;
	margin: 0.4rem 0 0;
}

.mailto-link {
	display: inline-block;
	background: var(--primary);
	color: #fff;
	padding: 0.4rem 0.9rem;
	border-radius: 6px;
	text-decoration: none;
	font-size: 0.88rem;
}

.mailto-link:hover {
	background: var(--primary-hover);
	color: #fff;
}