/* ============================================================
   Incentive Program Leaderboard
   Only --main and --accent are payload driven. Everything else
   derives from them so a new partner's colours flow through.
   ============================================================ */

:root {
	--main: #0B1B33;
	--accent: #F5A623;

	--main-soft: #14294a;
	--main-line: rgba(255, 255, 255, 0.12);
	--ink: #1a2233;
	--ink-soft: #5c6880;
	--ink-faint: #8b95a8;
	--page: #eef1f6;
	--card: #ffffff;
	--line: #dfe4ed;
	--up: #1a9c5b;

	--radius: 10px;
	--radius-sm: 6px;
	--shadow: 0 1px 2px rgba(11, 27, 51, 0.06), 0 4px 14px rgba(11, 27, 51, 0.06);

	--font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body { margin: 0; padding: 0; }

body {
	background: var(--page);
	color: var(--ink);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

.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;
}

[hidden] { display: none !important; }

/* ============================================================
   Access gate
   ============================================================ */

.gate {
	min-height: 100vh;
	min-height: 100dvh;
	display: grid;
	place-items: center;
	padding: 24px;
	background: var(--main);
}

.gate-card {
	width: 100%;
	max-width: 420px;
	background: var(--card);
	border-radius: var(--radius);
	padding: 40px 32px;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.gate-mark {
	width: 46px; height: 46px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--accent);
	position: relative;
}

.gate-mark::after {
	content: "\2605";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--main);
	font-size: 22px;
}

.gate-title {
	margin: 0 0 6px;
	font-size: 22px;
	letter-spacing: -0.01em;
	color: var(--main);
}

.gate-copy {
	margin: 0 0 24px;
	color: var(--ink-soft);
	font-size: 14px;
}

.gate-form { display: grid; gap: 10px; }

.gate-input {
	width: 100%;
	padding: 13px 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	font: inherit;
	font-size: 16px;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	color: var(--ink);
	background: #fff;
}

.gate-input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.22);
}

.gate-button {
	padding: 13px 14px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--main);
	color: #fff;
	font: inherit;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
}

.gate-button:hover { background: var(--main-soft); }

.gate-button:focus-visible,
.footer-contact a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.gate-error {
	margin: 18px 0 0;
	color: #c0392b;
	font-size: 14px;
	font-weight: 600;
}

/* ============================================================
   Loading
   ============================================================ */

.loading {
	min-height: 100vh;
	min-height: 100dvh;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 16px;
	color: var(--ink-soft);
	background: var(--main);
}

.loading p { margin: 0; color: rgba(255, 255, 255, 0.7); }

.spinner {
	width: 34px; height: 34px;
	border: 3px solid rgba(255, 255, 255, 0.18);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.spinner { animation-duration: 3s; }
}

/* ============================================================
   Shell
   ============================================================ */

.board {
	max-width: 1420px;
	margin: 0 auto;
	padding: 0 0 0;
}

.stale-banner {
	background: #fff4d6;
	border-bottom: 1px solid #f0dba8;
	color: #7a5b12;
	font-size: 13px;
	text-align: center;
	padding: 8px 16px;
}

/* ============================================================
   Masthead
   ============================================================ */

.masthead {
	background: var(--main);
	position: relative;
}

.masthead-inner {
	display: grid;
	grid-template-columns: 260px 1fr 260px;
	align-items: center;
	gap: 20px;
	padding: 18px 28px 22px;
}

.masthead-partner { display: flex; align-items: center; min-height: 52px; }

/* Most partner logos are dark ink on transparent, drawn for a white page, so
   on a dark masthead they vanish. Middleby's is navy #002640 on navy: 1.11:1.
   A light plate fixes it without touching the header colour, which the white
   wordmark and gold badge both depend on.

   Only applied once the image actually loads. Behind the text fallback it
   would be white on white. */
.masthead-partner.has-plate {
	background: #ffffff;
	border-radius: var(--radius-sm);
	padding: 8px 14px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

.partner-logo { max-height: 46px; max-width: 100%; display: block; }

.partner-fallback {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.masthead-title { text-align: center; }

.program-eyebrow {
	margin: 0;
	color: var(--accent);
	font-size: clamp(14px, 1.9vw, 26px);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.1;
}

.program-wordmark {
	margin: 0;
	color: #fff;
	font-size: clamp(38px, 6.4vw, 86px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 0.95;
	text-transform: uppercase;
	position: relative;
}

.wordmark-star {
	color: var(--accent);
	font-size: 0.34em;
	position: relative;
	top: -0.7em;
	margin: 0 -0.12em;
}

.program-subtitle {
	margin: 6px 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(11px, 1.05vw, 15px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.masthead-fs {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* The FS mark is a gold star over black wordmarks on transparent. The star
   clears 13:1 on the navy masthead but the wordmarks sit at 1.2:1, so the
   same plate the partner logo gets is needed here for the same reason.
   Taller than the partner slot because this mark is stacked, not
   horizontal, so "SOLUTIONS" needs the height to stay legible. */
.masthead-fs img {
	display: block;
	/* Height drives, width follows. Anything that fixes width - a width
	   attribute on the tag, or a width rule here - squashes the image instead
	   of scaling it. */
	width: auto;
	height: auto;
	max-height: 74px;
	max-width: 100%;
	background: #ffffff;
	border-radius: var(--radius-sm);
	padding: 7px 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
	box-sizing: content-box;
}

.date-badge {
	position: absolute;
	left: 28px;
	bottom: -1px;
	transform: translateY(50%);
	background: var(--main);
	border: 2px solid var(--accent);
	border-radius: var(--radius-sm);
	padding: 9px 18px;
	z-index: 2;
}

.date-range {
	margin: 0;
	color: var(--accent);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.date-award {
	margin: 2px 0 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ============================================================
   KPI strip
   ============================================================ */

.kpi-strip {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
	padding: 42px 28px 20px;
}

.kpi {
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 16px 16px 14px;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.kpi-icon {
	width: 52px; height: 52px;
	border-radius: 50%;
	background: var(--main);
	display: grid;
	place-items: center;
	flex: none;
}

.kpi-icon svg { width: 26px; height: 26px; fill: var(--accent); }

.kpi-body { min-width: 0; text-align: center; }

.kpi-label {
	margin: 0;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--main);
	line-height: 1.25;
}

.kpi-value {
	margin: 2px 0 0;
	font-variant-numeric: tabular-nums;
	min-height: 1.1em;
	font-size: clamp(20px, 2.1vw, 30px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink);
	line-height: 1.1;
}

.kpi-delta {
	margin: 2px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--up);
}

.kpi-delta.is-down { color: #c0392b; }
.kpi-delta.is-none { color: var(--ink-faint); font-weight: 500; }

/* ============================================================
   Layout
   ============================================================ */

.layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 14px;
	padding: 0 28px;
	align-items: start;
}

.panel {
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.sidebar { display: grid; gap: 14px; }

/* ============================================================
   Leaderboard table
   ============================================================ */

.table-scroll { overflow-x: auto; }

.leaderboard {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

/* Headers wrap. A nowrap header sets the column's minimum width from its
   longest label, which is what forces the whole table into a scrollbar. */
.leaderboard th {
	background: var(--main);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 11px 10px;
	text-align: center;
	vertical-align: middle;
	line-height: 1.25;
	white-space: normal;
	overflow-wrap: break-word;
	text-wrap: balance;
}

.leaderboard th.col-text { text-align: left; }
.leaderboard th.is-emphasis { background: var(--accent); color: var(--main); }

.leaderboard th .col-note {
	display: block;
	font-size: 9.5px;
	font-weight: 600;
	opacity: 0.72;
	letter-spacing: 0.03em;
	text-transform: none;
	margin-top: 2px;
}

.leaderboard td {
	padding: 11px 12px;
	border-bottom: 1px solid var(--line);
	text-align: center;
	vertical-align: middle;
}

.leaderboard td.col-text { text-align: left; }

.leaderboard tbody tr:last-child td { border-bottom: 0; }
.leaderboard tbody tr:nth-child(even) { background: #f7f9fc; }

/* Names wrap rather than truncate. §10 allows either, but truncating needs
   a fixed width, and a fixed width is the other thing that forces a scrollbar.
   "anywhere" covers a pasted name with no spaces in it. */
.cell-name {
	display: block;
	font-weight: 600;
	color: var(--ink);
	overflow-wrap: anywhere;
}

.cell-territory {
	display: block;
	color: var(--ink-soft);
	font-size: 13px;
	overflow-wrap: anywhere;
}

.leaderboard td.col-text { min-width: 96px; }
.leaderboard td:not(.col-text) { white-space: nowrap; }

.cell-total {
	font-size: 18px;
	font-weight: 700;
	color: var(--main);
}

.cell-num { font-variant-numeric: tabular-nums; }

/* The badge and the movement chip each occupy a fixed slot. Variable widths
   here shifted the whole group and knocked the rank column out of vertical
   alignment from row to row. */
.rank-medal,
.rank-plain {
	display: inline-grid;
	place-items: center;
	width: 27px;
	height: 27px;
	vertical-align: middle;
	box-sizing: border-box;
}

.rank-medal {
	border-radius: 50%;
	font-size: 12.5px;
	font-weight: 700;
	color: #4a3708;
	background: var(--accent);
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.rank-medal.rank-2 { background: #c8ced8; color: #384252; }
.rank-medal.rank-3 { background: #d59a63; color: #4a2d10; }
.rank-plain {
	font-weight: 600;
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   Rank movement and the since-your-last-visit notice
   ============================================================ */

.board-moved {
	margin: 0;
	padding: 9px 14px;
	background: rgba(26, 156, 91, 0.09);
	border-bottom: 1px solid rgba(26, 156, 91, 0.22);
	color: #12693e;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-align: center;
}

.rank-move {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 27px;
	margin-left: 2px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	vertical-align: middle;
}

.rank-move.is-up { color: var(--up); }
.rank-move.is-down { color: #c0392b; }
.rank-move.is-same { color: var(--ink-faint); font-weight: 500; }

.rank-move.is-new { font-size: 9px; letter-spacing: 0.06em; }

/* The pill sizes to its own text. Without the inner element the accent
   background would paint the full width of the fixed slot. */
.rank-move.is-new i {
	font-style: normal;
	background: var(--accent);
	color: #4a3708;
	border-radius: 3px;
	padding: 2px 4px;
	line-height: 1;
}

/* Rows are transformed during the FLIP, so give the compositor warning.
   Scoped to the tbody rather than every row so the hint is dropped when
   the table is idle. */
.leaderboard tbody tr { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
	.leaderboard tbody tr { will-change: auto; }
}

.cadence-bar {
	background: var(--main);
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-align: center;
	padding: 11px 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.cadence-star { color: var(--accent); font-size: 15px; }

.empty-state {
	margin: 0;
	padding: 44px 24px;
	text-align: center;
	color: var(--ink-soft);
	font-size: 14px;
}

.empty-state.small { padding: 20px 16px; font-size: 13px; }

/* ============================================================
   Awards
   ============================================================ */

.panel-dark { background: var(--main); }

.panel-heading {
	margin: 0;
	background: var(--accent);
	color: var(--main);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-align: center;
	padding: 10px 14px;
}

.awards-list { list-style: none; margin: 0; padding: 6px 0; }

.award {
	display: grid;
	grid-template-columns: 34px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 11px 16px;
	border-bottom: 1px solid var(--main-line);
}

.awards-list .award:last-child { border-bottom: 0; }

.award-icon { display: grid; place-items: center; }
.award-icon svg { width: 26px; height: 26px; fill: var(--accent); }

.award-name {
	margin: 0;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.25;
}

.award-desc {
	margin: 1px 0 0;
	color: rgba(255, 255, 255, 0.62);
	font-size: 12px;
	line-height: 1.35;
}

.award-winner {
	margin: 4px 0 0;
	color: var(--accent);
	font-size: 12.5px;
	font-weight: 600;
}

.award-amount {
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.prize-pool {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--accent);
	color: var(--main);
	padding: 11px 16px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.prize-pool strong { font-size: 19px; letter-spacing: -0.01em; }

/* ============================================================
   Top movers
   ============================================================ */

.panel-light { background: var(--card); padding: 4px 0 10px; }

.movers-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px 8px;
}

.movers-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--main);
	letter-spacing: -0.01em;
}

.movers-label {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--up);
	letter-spacing: 0.02em;
}

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

.mover {
	display: grid;
	grid-template-columns: 22px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
}

.mover-rank { color: var(--ink-faint); font-size: 13px; font-weight: 600; }

.mover-name {
	color: var(--main);
	font-weight: 600;
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mover-delta {
	color: var(--up);
	font-weight: 700;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mover-delta.is-down { color: #c0392b; }

/* ============================================================
   Point system
   ============================================================ */

.rules-band {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 14px;
	padding: 14px 28px 24px;
	align-items: stretch;
}

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

.rule-card {
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 16px 16px 18px;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.rule-head {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 10px;
	margin-bottom: 12px;
}

.rule-index {
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--main);
	font-size: 13px;
	font-weight: 800;
	display: grid;
	place-items: center;
	flex: none;
}

.rule-name {
	margin: 0;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--main);
	line-height: 1.25;
}

.rule-note {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #c0392b;
	text-transform: uppercase;
}

.rule-flat {
	font-size: 34px;
	font-weight: 800;
	color: var(--accent);
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 4px 0 10px;
}

.rule-flat span {
	font-size: 15px;
	font-weight: 700;
	color: var(--main);
	letter-spacing: 0.04em;
}

.rule-copy {
	margin: 0;
	font-size: 12.5px;
	color: var(--ink-soft);
	line-height: 1.45;
}

.band-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
	margin-bottom: 10px;
}

.band-table th {
	background: var(--main);
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 8px;
	text-align: left;
}

.band-table th:last-child { text-align: center; width: 62px; }

.band-table td {
	padding: 5px 8px;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
}

.band-table td:last-child {
	text-align: center;
	font-weight: 700;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}

.band-table tr:last-child td { border-bottom: 0; }

.draw-callout {
	background: var(--main);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 22px 22px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.draw-lede {
	margin: 0;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.4;
}

.draw-prize {
	margin: 8px 0 10px;
	color: var(--accent);
	font-size: clamp(20px, 2.3vw, 27px);
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	line-height: 1.15;
}

.draw-copy {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 12.5px;
	line-height: 1.5;
}

/* ============================================================
   Footer
   ============================================================ */

.footer {
	background: var(--main);
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 18px;
	padding: 15px 28px;
	font-size: 13px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.footer-mark {
	width: 20px; height: 20px;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 12px;
}

.footer-label { font-weight: 600; }

.footer-contacts { display: flex; flex-wrap: wrap; gap: 8px 18px; }

.footer-contact { display: inline-flex; align-items: center; gap: 7px; }
.footer-contact svg { width: 15px; height: 15px; fill: var(--accent); }
.footer-contact a { color: #fff; text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1180px) {
	.layout, .rules-band { grid-template-columns: minmax(0, 1fr); }
	.kpi-strip { grid-template-columns: repeat(3, 1fr); }
}

/* Tighten before anything is forced to scroll. */
@media (max-width: 1000px) {
	.leaderboard th { font-size: 10px; padding: 10px 6px; letter-spacing: 0.03em; }
	.leaderboard td { padding: 10px 6px; font-size: 13px; }
	.leaderboard td.col-text { min-width: 84px; }
	.cell-total { font-size: 16px; }
	.cell-territory { font-size: 12px; }
}

@media (max-width: 860px) {
	.masthead-inner { grid-template-columns: 1fr; text-align: center; }
	.masthead-partner, .masthead-fs { justify-content: center; }
	.date-badge {
		position: static;
		transform: none;
		margin: 0 14px 18px;
		text-align: center;
	}
	.kpi-strip { grid-template-columns: repeat(2, 1fr); padding-top: 18px; }
	.kpi { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.layout, .rules-band { padding-left: 14px; padding-right: 14px; }
}

/* Eight columns cannot fit a phone at any font size, so below this the table
   restacks into one card per rep. Driven entirely by the data-label on each
   cell, so it adapts to whatever column set the payload ships. */
@media (max-width: 640px) {
	.table-scroll { overflow-x: visible; }
	.leaderboard, .leaderboard tbody { display: block; }
	.leaderboard thead { display: none; }

	.leaderboard tbody tr {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 10px;
		padding: 13px 14px 15px;
		border-bottom: 1px solid var(--line);
	}

	.leaderboard tbody tr:last-child { border-bottom: 0; }

	.leaderboard td,
	.leaderboard td.col-text {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
		flex: 1 1 100%;
		min-width: 0;
		padding: 2px 0;
		border: 0;
		text-align: right;
	}

	.leaderboard td::before {
		content: attr(data-label);
		flex: none;
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--ink-soft);
		text-align: left;
	}

	/* Rank and name share the card's title line, territory sits under it. */
	.leaderboard td.col-rank {
		flex: 0 0 auto;
		padding: 0 0 3px;
		display: block;
	}
	.leaderboard td.col-rep_name { flex: 1 1 auto; padding: 0 0 3px; text-align: left; }
	.leaderboard td.col-territory { padding: 0 0 9px; text-align: left; }

	.leaderboard td.col-rank::before,
	.leaderboard td.col-rep_name::before,
	.leaderboard td.col-territory::before { display: none; }

	.leaderboard td.col-rep_name .cell-name { font-size: 16px; }
	.leaderboard td.cell-total { font-size: 15px; }
}

@media (max-width: 520px) {
	.kpi-strip { grid-template-columns: 1fr; padding-left: 14px; padding-right: 14px; }
	.footer { flex-direction: column; text-align: center; }

	/* Tap targets. Anything a thumb has to hit gets real height. */
	.gate-button, .gate-input { min-height: 48px; }
	.footer-contact a { display: inline-block; padding: 6px 0; }
	.masthead-inner { padding: 14px 14px 18px; }
	.kpi-strip { padding-top: 16px; }
}

@media print {
	body { background: #fff; }
	.gate, .loading { display: none !important; }
	.panel, .kpi, .rule-card { box-shadow: none; border: 1px solid var(--line); }
}