/* ============================================================================
   Savant Audit — the report, the pricing ladder and the intake.

   This is the client Progress page's design language, applied to a document
   twenty pages long.

   The old report alternated near-black panels with warm white and punctuated
   with a hot orange band. That was the right read of theseosavant.com's
   marketing pages, and the wrong one for what a client actually sees after
   they have signed: the Progress page has no black in it at all. It is
   parchment, white cards, and one muted bronze, set in a serif. A report that
   arrives in black and orange and is followed by a client area in cream and
   bronze reads as two companies.

   So: cream ground, white cards with a hairline and a soft shadow, bronze for
   every structural mark, and a serif for every heading, figure and label.

   Two colour scales, kept apart, as before.

   The bronze is structure: rules, kickers, numerals, bar fills, the stepper,
   the button. It says whose document this is. Severity is content and keeps
   its own restrained ramp — one red for critical, near-ink for serious, warm
   grey for watch, green for healthy. The two never share a scale, so a reader
   never has to work out which warm tone means what.

   Every value below was sampled from the Progress page itself rather than
   guessed, then checked against WCAG AA in a browser. The whole palette sits
   on one hue band, 31–34°, which is why it reads as one surface.
   ========================================================================= */

.sa {
	/* ---- skin: overridden inline from SA_Brand::css_vars() ---- */
	--sa-ink: #1A2029;          /* headings. 15.2:1 on the cream ground        */
	--sa-body: #4A525C;         /* running text. 7.35:1                        */
	/* Both greys clear 4.5:1 on EVERY ground this stylesheet uses — the cream
	   page, a white card, the warm tint and the table band. An earlier pair
	   cleared it on the page and failed by a tenth inside the tinted meter
	   panel, which is the kind of rule nobody remembers: better to have no
	   grey that can be used wrongly than a note saying where not to use it. */
	--sa-muted: #636970;        /* captions. 5.15 / 5.55 / 4.50 / 4.97         */
	--sa-muted-warm: #6E6559;   /* letterspaced labels. 5.31 / 5.72 / 4.64 / 5.12 */

	--sa-accent: #9C6930;       /* the bronze. 4.35:1 on cream, white on it 4.69:1 */
	--sa-accent-hi: #B58456;    /* light bronze — decoration and fills only    */
	--sa-accent-press: #9C6930; /* the bronze already carries white text       */
	--sa-deep: #8F510E;         /* bronze as small text and links. 5.82:1      */
	--sa-accent-ink: #FFFFFF;

	--sa-paper: #F9F6F2;
	--sa-card: #FFFFFF;
	--sa-tint: #F0E6DA;         /* pills, icon discs, feature panels           */
	--sa-tint-2: #F4F2EF;       /* table header bands                          */
	--sa-line: #E6DED6;
	--sa-track: #E4DFD8;
	--sa-rule: #9C6930;

	/* ---- fixed across skins: a critical finding looks the same on every masthead ---- */
	--sa-crit: #B3261E;
	--sa-serious: #3B3630;
	--sa-watch: #6E675E;
	--sa-good: #1B6B41;
	--sa-bar-neutral: #C9C0B4;

	/* ---- shape ---- */
	--sa-radius: 12px;
	--sa-radius-sm: 8px;
	--sa-radius-pill: 999px;
	--sa-shadow: 0 1px 2px rgba(42, 35, 28, .045), 0 6px 20px rgba(42, 35, 28, .055);
	--sa-shadow-sm: 0 1px 2px rgba(42, 35, 28, .05);
	--sa-gap: clamp(26px, 4.4vw, 40px);

	/* ---- type ----
	   The Progress page sets every heading, every letterspaced label and every
	   display figure in a high-contrast serif, and keeps a plain sans for
	   running text, lists and tables. The stacks below pick up the theme's own
	   faces when it has already loaded them and fall back to what the system
	   has — so the report matches the site without the plugin fetching a
	   webfont the page never asked for. */
	--sa-serif: "Playfair Display", "Libre Baskerville", "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--sa-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--sa-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	font-family: var(--sa-sans);
	color: var(--sa-body);
	background: var(--sa-paper);
	font-size: 17px;
	line-height: 1.65;
	max-width: 900px;
	margin: 0 auto;
	padding: 0 22px 72px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.sa *, .sa *::before, .sa *::after { box-sizing: border-box; }
.sa p { margin: 0 0 1em; }
.sa a { color: var(--sa-deep); text-underline-offset: 2px; }
.sa img { max-width: 100%; height: auto; }

/* ============================== type ==================================== */

.sa-h1 {
	font-family: var(--sa-serif);
	font-weight: 700;
	font-size: clamp(38px, 6.4vw, 62px);
	line-height: 1.04;
	letter-spacing: -.018em;
	color: var(--sa-ink);
	margin: 0 0 14px;
	text-wrap: balance;
}
.sa-h2 {
	font-family: var(--sa-serif);
	font-weight: 700;
	font-size: clamp(24px, 3.1vw, 34px);
	line-height: 1.16;
	letter-spacing: -.012em;
	color: var(--sa-ink);
	margin: 0 0 14px;
	text-wrap: balance;
}
.sa h3 {
	font-family: var(--sa-serif);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.28;
	letter-spacing: -.006em;
	color: var(--sa-ink);
	margin: 0 0 8px;
}
.sa-lede {
	font-size: 18.5px;
	line-height: 1.6;
	color: var(--sa-body);
	max-width: 62ch;
}
.sa-lead-para { font-size: 18.5px; line-height: 1.6; }
.sa-sub { color: var(--sa-muted); font-size: 15px; }
.sa-fine { color: var(--sa-muted); font-size: 13.5px; }
.sa-note-line { color: var(--sa-body); font-size: 15.5px; max-width: 68ch; }

/*
   The letterspaced label. On the Progress page these are set in the serif,
   not the sans — "CURRENT STAGE", "WHAT WE DELIVER" — which is what stops a
   cream page full of small grey capitals from looking like a form.
*/
.sa-kicker,
.sa-mast-kind,
.sa-mast-prepared,
.sa-headline-label,
.sa-passes-label,
.sa-sev,
.sa-badge,
.sa-when,
.sa-stats dt,
.sa-toc-head,
.sa-cover-kind,
.sa-backtop,
.sa-build-key,
.sa-share-key,
.sa-rung-cadence,
.sa-table th {
	font-family: var(--sa-serif);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-size: 10.5px;
}
.sa-kicker { color: var(--sa-deep); margin: 0 0 12px; }
.sa-passes-label,
.sa-mast-kind,
.sa-toc-head { color: var(--sa-muted-warm); margin: 0 0 12px; }

/* ---- the bronze rule that opens a section, as under "Progress" ---- */
.sa-rule-short::after {
	content: '';
	display: block;
	width: 84px;
	height: 3px;
	background: var(--sa-accent);
	border-radius: 2px;
	margin: 18px 0 0;
}

/* ============================ primitives ================================ */

/* The white card: hairline, soft shadow, generous radius. Every panel in the
   report is one of these, which is what makes twenty pages feel like one
   surface rather than twenty layouts. */
.sa-card,
.sa-summary,
.sa-headline,
.sa-derive-wrap,
.sa-glance,
.sa-plan,
.sa-area,
.sa-method,
.sa-cta,
.sa-internal,
.sa-note,
.sa-moneychart,
.sa-standing-card,
.sa-contents {
	background: var(--sa-card);
	border: 1px solid var(--sa-line);
	border-radius: var(--sa-radius);
	box-shadow: var(--sa-shadow);
	padding: clamp(24px, 3.4vw, 36px);
	margin: 0 0 var(--sa-gap);
}

/* A panel that wants a little more warmth than white: the plan, the method
   note, the close. On the Progress page this is the tinted band behind the
   stage summary. */
.sa-panel {
	background: linear-gradient(180deg, #FCF9F5 0%, var(--sa-tint) 100%);
	border-color: #E8DCCB;
}

.sa-badge {
	display: inline-block;
	padding: 5px 13px 4px;
	border-radius: var(--sa-radius-pill);
	background: var(--sa-tint);
	color: var(--sa-ink);
	white-space: nowrap;
	line-height: 1.5;
}
.sa-badge.sa-critical { background: #F7E2E0; color: #8E1C16; }
.sa-badge.sa-serious  { background: #EDE9E3; color: var(--sa-serious); }
.sa-badge.sa-watch    { background: #F0EDE8; color: #56504A; }
.sa-badge.sa-healthy  { background: #E2F0E7; color: #14532C; }
.sa-badge.sa-unmeasured { background: var(--sa-tint-2); color: var(--sa-muted-warm); }

.sa-btn {
	display: inline-block;
	background: var(--sa-accent-press);
	color: #fff;
	border: 0;
	border-radius: var(--sa-radius-pill);
	font-family: var(--sa-sans);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	letter-spacing: .005em;
	padding: 16px 30px;
	cursor: pointer;
	text-decoration: none;
	box-shadow: var(--sa-shadow-sm);
	transition: background .15s ease, color .15s ease;
}
.sa-btn:hover { background: #7F5424; color: #fff; }
.sa-btn[disabled] { opacity: .5; cursor: default; }
.sa-btn-quiet {
	background: transparent;
	color: var(--sa-deep);
	box-shadow: inset 0 0 0 1px var(--sa-accent);
}
.sa-btn-quiet:hover { background: var(--sa-accent); color: #fff; box-shadow: none; }
/* `.sa a` is (0,1,1) and outranks `.sa-btn` at (0,1,0), so a button that is a
   link needs its colour stated at matching specificity or it comes out bronze
   text on a bronze fill. */
.sa a.sa-btn { color: #fff; }
.sa a.sa-btn:hover { color: #fff; }
.sa a.sa-btn-quiet { color: var(--sa-deep); }
.sa a.sa-btn-quiet:hover { color: #fff; }

/* The circular tan disc that carries an icon or a numeral. */
.sa-disc {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--sa-tint);
	color: var(--sa-deep);
	font-family: var(--sa-serif);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0;
}

.sa-note { color: var(--sa-body); }

/* ============================= the cover ================================
   The Progress page's hero: a very large serif word, a short bronze rule, a
   line of explanation, and — set faintly into the top right — an ascending
   bar chart and a ridge. The artwork is a data-URI SVG rather than a photo so
   the whole report stays one self-contained file that prints, emails and
   opens in a webview with no network.
   ===================================================================== */

.sa-cover {
	position: relative;
	overflow: hidden;
	background: var(--sa-card);
	border: 1px solid var(--sa-line);
	border-radius: var(--sa-radius);
	box-shadow: var(--sa-shadow);
	padding: clamp(30px, 4.6vw, 52px);
	margin: 26px 0 var(--sa-gap);
}
.sa-cover::before {
	content: '';
	position: absolute;
	inset: 0 0 auto auto;
	width: min(52%, 430px);
	height: 100%;
	background:
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430 300" preserveAspectRatio="xMaxYMid slice"><g fill="%239C6930" opacity="0.13"><rect x="150" y="196" width="26" height="74" rx="4"/><rect x="186" y="172" width="26" height="98" rx="4"/><rect x="222" y="144" width="26" height="126" rx="4"/><rect x="258" y="112" width="26" height="158" rx="4"/><rect x="294" y="84" width="26" height="186" rx="4"/><rect x="330" y="52" width="26" height="218" rx="4"/><rect x="366" y="22" width="26" height="248" rx="4"/></g><g stroke="%239C6930" fill="none" opacity="0.10" stroke-width="1.4"><path d="M0 268 L62 214 L104 246 L168 178 L214 210 L286 138 L342 168 L430 96"/><path d="M0 292 L70 248 L120 274 L180 216 L232 246 L300 182 L356 208 L430 146"/></g></svg>') no-repeat right center / contain;
	pointer-events: none;
}
.sa-cover > * { position: relative; }

.sa-cover-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 22px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--sa-line);
}
.sa-cover-logo { display: block; }
.sa-logo { display: block; height: auto; max-width: 100%; }
.sa-logo-plate { display: inline-block; }
.sa-wordmark {
	font-family: var(--sa-serif);
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--sa-ink);
	margin: 0;
}

/* The vertical STRATEGY / AUDIT / GROWTH / RESULTS column from the hero. */
.sa-cover-kind {
	color: var(--sa-muted-warm);
	margin: 0 0 18px;
	white-space: nowrap;
}
.sa-mast-kind { text-align: right; white-space: nowrap; margin: 0; }

/* Held clear of the artwork on the right, so the name never runs over the
   bars and the subtitle never wraps mid-word in a narrow column. */
.sa-cover-mid { padding: 6px 0 4px; max-width: 56%; }
.sa-mast-prepared { color: var(--sa-deep); margin: 0 0 10px; }
.sa-cover-name { margin-bottom: 0; }
.sa-cover-name::after {
	content: '';
	display: block;
	width: 84px;
	height: 3px;
	background: var(--sa-accent);
	border-radius: 2px;
	margin: 20px 0 0;
}
.sa-mast-sub {
	margin: 18px 0 0;
	color: var(--sa-body);
	font-size: 16px;
	max-width: 40ch;
}

/* The warm aside, set in an italic serif. It is doing the job the script line
   does on the Progress page — one human sentence among the figures — without
   pretending to be handwriting in a font that is not there. */
.sa-cover-aside {
	font-family: var(--sa-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(17px, 2vw, 21px);
	line-height: 1.4;
	color: var(--sa-accent);
	margin: 26px 0 0;
	max-width: 30ch;
}

.sa-cover-foot { margin-top: 34px; }
.sa-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	background: var(--sa-line);
	border: 1px solid var(--sa-line);
	border-radius: var(--sa-radius-sm);
	overflow: hidden;
}
.sa-stat {
	background: var(--sa-card);
	padding: 18px 20px;
	min-width: 0;
}
.sa-stat-wide { grid-column: span 1; }
.sa-stats dt {
	color: var(--sa-muted-warm);
	margin: 0 0 8px;
	line-height: 1.4;
}
.sa-stats dd {
	margin: 0;
	font-family: var(--sa-serif);
	font-weight: 700;
	font-size: clamp(21px, 2.6vw, 28px);
	line-height: 1.12;
	letter-spacing: -.014em;
	color: var(--sa-ink);
}
.sa-stat.is-hot dd { color: var(--sa-crit); }
.sa-mast-date { color: var(--sa-muted); font-size: 13px; margin: 14px 0 0; }

/* ============================ the contents ============================== */

.sa-contents { padding-top: clamp(22px, 3vw, 30px); }
.sa-toc { list-style: none; margin: 0 0 14px; padding: 0; }
.sa-toc:last-child { margin-bottom: 0; }
.sa-toc > li { border-top: 1px solid var(--sa-line); }
.sa-toc > li:first-child { border-top: 0; }
.sa-toc a {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 11px 2px;
	text-decoration: none;
	color: var(--sa-ink);
}
.sa-toc a:hover .sa-toc-label { color: var(--sa-deep); }
.sa-toc-n {
	font-family: var(--sa-serif);
	font-weight: 700;
	font-size: 13px;
	color: var(--sa-accent);
	flex: 0 0 26px;
	font-variant-numeric: tabular-nums;
}
.sa-toc-label { font-size: 16px; }
.sa-toc-dots {
	flex: 1 1 auto;
	border-bottom: 1px dotted var(--sa-line);
	transform: translateY(-4px);
	min-width: 18px;
}
.sa-toc-plain a { padding-left: 0; }
.sa-toc-note { color: var(--sa-muted); font-size: 13.5px; margin: 0 0 18px; }

/* ============================= the opening ============================== */

.sa-section-title { margin-bottom: 16px; }
.sa-summary p:last-child { margin-bottom: 0; }

/*
   The headline figure. On the old report this was a solid orange band with
   white text. Here it is a card, because the Progress page never shouts — the
   figure is large, serif and bronze, and the card does the rest.
*/
.sa-headline { text-align: left; }
.sa-headline-label { color: var(--sa-muted-warm); margin: 0 0 14px; }
.sa-headline-num {
	font-family: var(--sa-serif);
	font-weight: 700;
	font-size: clamp(40px, 7vw, 68px);
	line-height: 1.02;
	letter-spacing: -.024em;
	color: var(--sa-accent);
	margin: 0;
	/* `display: table` rather than inline-block: an inline-block sits on the
	   section's baseline and inherits its 1.65 leading, which opened a 40px
	   hole between the rule under the figure and the sentence below it. */
	display: table;
	padding-bottom: 12px;
	border-bottom: 3px solid var(--sa-accent);
}
.sa-headline-sub {
	margin: 22px 0 0;
	color: var(--sa-body);
	font-size: 15.5px;
	max-width: 68ch;
}

/* ============================== tables ================================== */

.sa-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 15.5px;
	border: 1px solid var(--sa-line);
	border-radius: var(--sa-radius-sm);
	overflow: hidden;
}
.sa-table th {
	text-align: left;
	color: var(--sa-muted-warm);
	background: var(--sa-tint-2);
	padding: 13px 16px;
	border-bottom: 1px solid var(--sa-line);
	white-space: nowrap;
}
.sa-table td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--sa-line);
	color: var(--sa-body);
	vertical-align: middle;
}
.sa-table tr:last-child td { border-bottom: 0; }
.sa-table td:first-child { color: var(--sa-ink); font-weight: 500; }
.sa-table-sm { font-size: 14.5px; }
.sa-table-sm th, .sa-table-sm td { padding: 10px 13px; }
.sa-cost { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tscroll { overflow-x: auto; }

/* =============================== the plan ==============================
   The Progress page's stepper, unrolled down the page: a bronze disc per
   step, joined by a rule, with the timing on a pill beside the title.
   ===================================================================== */

.sa-plan .sa-note-line { margin-bottom: 26px; }
.sa-steps-list {
	list-style: none;
	counter-reset: sastep;
	margin: 0;
	padding: 0;
}
.sa-steps-list > li {
	counter-increment: sastep;
	position: relative;
	padding: 0 0 26px 58px;
}
.sa-steps-list > li::before {
	content: counter(sastep);
	position: absolute;
	left: 0;
	top: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--sa-accent);
	color: #fff;
	font-family: var(--sa-serif);
	font-weight: 700;
	font-size: 15px;
	display: grid;
	place-items: center;
	box-shadow: var(--sa-shadow-sm);
}
/* the rule joining one disc to the next */
.sa-steps-list > li::after {
	content: '';
	position: absolute;
	left: 18.5px;
	top: 44px;
	bottom: 8px;
	width: 1px;
	background: var(--sa-line);
}
.sa-steps-list > li:last-child { padding-bottom: 0; }
.sa-steps-list > li:last-child::after { display: none; }

.sa-step-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-bottom: 6px;
	min-height: 38px;
}
.sa-step-head h3 { margin: 0; }
.sa-when {
	background: var(--sa-tint);
	color: var(--sa-deep);
	padding: 5px 13px 4px;
	border-radius: var(--sa-radius-pill);
	white-space: nowrap;
	line-height: 1.5;
}
.sa-step-meta { color: var(--sa-muted); font-size: 14px; margin: 0 0 6px; }
.sa-step-fix { margin: 0; color: var(--sa-body); max-width: 70ch; }

/* =============================== areas ================================== */

.sa-area { scroll-margin-top: 20px; }
.sa-area-head {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding-bottom: 20px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--sa-line);
}
.sa-area-head > div { flex: 1 1 auto; min-width: 0; }
.sa-area-head .sa-h2 { margin-bottom: 4px; }
.sa-area-n {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--sa-tint);
	color: var(--sa-deep);
	font-family: var(--sa-serif);
	font-weight: 700;
	font-size: 16px;
	margin: 0;
	font-variant-numeric: tabular-nums;
}
.sa-v-critical .sa-area-n { background: #F7E2E0; color: #8E1C16; }
.sa-backtop {
	color: var(--sa-muted);
	text-decoration: none;
	white-space: nowrap;
	align-self: center;
}
.sa-backtop:hover { color: var(--sa-deep); }

.sa-unmeasured {
	background: var(--sa-tint-2);
	border-left: 3px solid var(--sa-accent-hi);
	border-radius: 0 var(--sa-radius-sm) var(--sa-radius-sm) 0;
	padding: 13px 18px;
	color: var(--sa-body);
	font-size: 15px;
	margin: 0 0 22px;
}

/* ---- findings ---- */

.sa-findings { list-style: none; margin: 0 0 22px; padding: 0; }
.sa-findings > li {
	padding: 16px 0 16px 16px;
	border-top: 1px solid var(--sa-line);
	border-left: 3px solid var(--sa-line);
	margin-bottom: 2px;
}
.sa-findings > li:first-child { border-top: 0; }
.sa-sev-3 { border-left-color: var(--sa-crit); }
.sa-sev-2 { border-left-color: var(--sa-serious); }
.sa-sev-1 { border-left-color: var(--sa-watch); }

.sa-finding-label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
	margin: 0 0 6px;
	font-family: var(--sa-sans);
	font-weight: 600;
	font-size: 16.5px;
	line-height: 1.4;
	color: var(--sa-ink);
}
.sa-sev { color: var(--sa-muted-warm); }
.sa-sev-3 .sa-sev { color: var(--sa-crit); }
.sa-finding-detail { margin: 0 0 6px; color: var(--sa-body); font-size: 15.5px; max-width: 72ch; }
.sa-finding-fix {
	margin: 0;
	color: var(--sa-deep);
	font-size: 15px;
	max-width: 72ch;
}

/* ---- already right / evidence ---- */

.sa-passes, .sa-evidence {
	background: var(--sa-tint-2);
	border-radius: var(--sa-radius-sm);
	padding: 20px 22px;
	margin: 0 0 18px;
}
.sa-passes:last-child, .sa-evidence:last-child { margin-bottom: 0; }
.sa-passes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px 26px; }
.sa-passes li {
	position: relative;
	padding-left: 22px;
	font-size: 15px;
	color: var(--sa-body);
}
.sa-passes li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .46em;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--sa-good);
	border-bottom: 2px solid var(--sa-good);
	transform: rotate(-45deg);
}
.sa-evidence dl {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(150px, 34%) 1fr;
	gap: 8px 20px;
}
.sa-evidence dt { color: var(--sa-muted); font-size: 14.5px; }
.sa-evidence dd { margin: 0; color: var(--sa-ink); font-size: 14.5px; overflow-wrap: anywhere; }

/* ============================== meters ==================================
   The Google and AI panels. White cards inside a white card would disappear,
   so these take the warm tint and a hairline instead.
   ===================================================================== */

.sa-meta { margin: 0 0 24px; }
.sa-meta-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px 30px;
	background: var(--sa-tint-2);
	border: 1px solid var(--sa-line);
	border-radius: var(--sa-radius-sm);
	padding: 22px 24px;
}
.sa-meta-side { flex: 1 1 260px; min-width: 0; }
.sa-gauge { flex: 0 0 auto; }
.sa-gauge-value {
	font-family: var(--sa-serif);
	font-weight: 700;
	fill: var(--sa-ink);
}
.sa-score-grade {
	font-family: var(--sa-serif);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-size: 10.5px;
	color: var(--sa-muted-warm);
}

.sa-cells, .sa-gridmap {
	display: grid;
	gap: 4px;
	margin: 18px 0 0;
}
.sa-cell {
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	border-radius: var(--sa-radius-sm);
	font-size: 12.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.sa-c-good { background: #E2F0E7; color: #14532C; }
.sa-c-warn { background: #F7EEDC; color: #6B5310; }
.sa-c-bad  { background: #F7E2E0; color: #8E1C16; }
.sa-c-none { background: var(--sa-tint-2); color: var(--sa-muted); }
.sa-c-out  { background: var(--sa-paper); color: var(--sa-muted); }

.sa-compare, .sa-leaderboard { margin: 22px 0 0; }
.sa-queries {
	margin: 18px 0 0;
	font-size: 14.5px;
	color: var(--sa-body);
}
.sa-sample {
	background: var(--sa-tint-2);
	border-radius: var(--sa-radius-sm);
	padding: 14px 16px;
	font-size: 14.5px;
	color: var(--sa-body);
	margin: 0 0 10px;
}

/* ============================== charts ==================================
   Inline SVG and CSS bars — no library and no JavaScript — so every chart
   survives being printed to PDF, forwarded as an email, or opened in a
   webview that runs no scripts.

   One rule runs through all of them: the bronze means "you" and warm grey
   means everyone else.
   ===================================================================== */

/* The profile's category meters. Until 2.3.0 the grid was set on the track
   instead of the row, so the fills never drew and the list printed as
   bullets. They now match the reviews and citations bars below them. */
.sa-bars { list-style: none; display: grid; gap: 12px; margin: 18px 0 0; padding: 0; }
.sa-meta-top > .sa-bars { flex: 1 1 260px; min-width: 0; margin: 0; }
.sa-bars > li { display: grid; grid-template-columns: minmax(96px, 34%) 1fr auto; gap: 4px 14px; align-items: center; }
.sa-bars .sa-bar {
	display: block;
	height: 10px;
	background: var(--sa-track);
	border-radius: var(--sa-radius-pill);
	overflow: hidden;
	min-width: 30px;
}
.sa-bars .sa-bar > i {
	display: block;
	height: 100%;
	background: var(--sa-accent);
	border-radius: var(--sa-radius-pill);
}
.sa-bar-label { font-size: 14.5px; color: var(--sa-body); min-width: 0; overflow-wrap: anywhere; }
.sa-bar-pct {
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	color: var(--sa-muted);
	white-space: nowrap;
}

.sa-hbars { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; }
.sa-hbars > li { display: grid; grid-template-columns: minmax(96px, 30%) 1fr auto; gap: 4px 14px; align-items: center; }
.sa-hbar-label { font-size: 14.5px; color: var(--sa-body); min-width: 0; overflow-wrap: anywhere; }
.sa-hbar-track {
	background: var(--sa-track);
	border-radius: var(--sa-radius-pill);
	height: 12px;
	overflow: hidden;
	min-width: 30px;
}
.sa-hbar-track i {
	display: block;
	height: 100%;
	background: var(--sa-bar-neutral);
	border-radius: var(--sa-radius-pill);
}
.sa-hbars > li.is-mine .sa-hbar-label { color: var(--sa-ink); font-weight: 600; }
.sa-hbars > li.is-mine .sa-hbar-track i { background: var(--sa-accent); }
.sa-hbar-value {
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	color: var(--sa-muted);
	white-space: nowrap;
}
.sa-hbar-zero { color: var(--sa-crit); font-weight: 600; }
.sa-hbar-note { color: var(--sa-muted); font-size: 13.5px; margin: 12px 0 0; }

.sa-share { margin: 18px 0 0; }
.sa-share-bar {
	display: flex;
	height: 16px;
	border-radius: var(--sa-radius-pill);
	overflow: hidden;
	background: var(--sa-track);
}
.sa-share-bar i { display: block; height: 100%; background: var(--sa-bar-neutral); }
.sa-share-mine { background: var(--sa-accent) !important; }
.sa-share-key {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 12px 0 0;
	color: var(--sa-muted-warm);
}
.sa-key { position: relative; padding-left: 16px; }
.sa-key::before {
	content: '';
	position: absolute;
	left: 0;
	top: .34em;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	background: var(--sa-bar-neutral);
}
.sa-key-mine::before { background: var(--sa-accent); }
.sa-key-rest::before { background: var(--sa-bar-neutral); }

.sa-moneychart .sa-fine { margin: 14px 0 0; }

/* ==================== where the figure comes from ======================
   Two pictures of one calculation: the multiplication that turns a missed
   lead into money, then the build-up that shows what was counted and what
   was thrown away. Both read from the same array the headline figure does.
   ===================================================================== */

.sa-derive { margin: 0; }
.sa-eq {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin: 0 0 26px;
}
.sa-eq-cell {
	flex: 1 1 150px;
	background: var(--sa-tint-2);
	border: 1px solid var(--sa-line);
	border-radius: var(--sa-radius-sm);
	padding: 14px 16px;
	min-width: 0;
	color: var(--sa-body);
}
.sa-eq-cell b {
	display: block;
	font-family: var(--sa-serif);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	color: var(--sa-ink);
	margin-bottom: 3px;
}
.sa-eq-cell i {
	display: block;
	font-style: normal;
	font-size: 13px;
	color: var(--sa-muted);
	line-height: 1.4;
}
.sa-eq-cell.is-result {
	background: var(--sa-accent);
	border-color: var(--sa-accent);
	color: #fff;
}
.sa-eq-cell.is-result b { color: #fff; }
.sa-eq-cell.is-result i { color: rgba(255, 255, 255, .88); }
.sa-eq-op {
	align-self: center;
	font-family: var(--sa-serif);
	font-size: 20px;
	color: var(--sa-muted-warm);
	flex: 0 0 auto;
}

.sa-build { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sa-build > li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 16px;
	align-items: baseline;
}
.sa-build-name { font-size: 15px; color: var(--sa-ink); }
.sa-build-value {
	font-size: 14.5px;
	font-variant-numeric: tabular-nums;
	color: var(--sa-muted);
	white-space: nowrap;
}
.sa-build-track {
	grid-column: 1 / -1;
	position: relative;
	height: 13px;
	background: var(--sa-track);
	border-radius: var(--sa-radius-pill);
	overflow: hidden;
}
.sa-build-track i {
	position: absolute;
	inset: 0 auto 0 0;
	display: block;
	background: var(--sa-accent);
	border-radius: var(--sa-radius-pill);
}
.sa-build-ghost {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;   /* without these two the stripes had no width and never showed */
	right: 0;
	background: repeating-linear-gradient(
		135deg,
		rgba(156, 105, 48, .20) 0 3px,
		rgba(156, 105, 48, .05) 3px 6px
	);
}
.sa-build > li.is-dropped .sa-build-name,
.sa-build > li.is-dropped .sa-build-value { color: var(--sa-muted); }
.sa-build-total {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--sa-line);
	font-size: 15.5px;
	color: var(--sa-ink);
}
.sa-build-key {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0 0 14px;
	color: var(--sa-muted-warm);
}
.sa-key-counted::before { background: var(--sa-accent); }
.sa-key-dropped::before {
	background: repeating-linear-gradient(
		135deg,
		rgba(156, 105, 48, .22) 0 3px,
		rgba(156, 105, 48, .05) 3px 6px
	);
	border: 1px solid var(--sa-line);
}
.sa-derive-second { margin-top: 26px; }

/* ====================== method, internal, close ========================= */

.sa-method ul, .sa-method ol { margin: 0 0 1em; padding: 0; list-style: none; }
.sa-method li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 7px;
	color: var(--sa-body);
}
.sa-method li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .66em;
	width: 9px;
	height: 2px;
	border-radius: 1px;
	background: var(--sa-accent);
}
.sa-internal { border-style: dashed; }
.sa-q { margin: 0 0 12px; color: var(--sa-body); }
.sa-q strong { color: var(--sa-ink); }

.sa-cta p { max-width: 70ch; }
.sa-cta-alt { font-size: 15px; max-width: 70ch; margin: 18px 0 0; color: var(--sa-muted); }
.sa-cta-alt a { color: var(--sa-deep); }

.sa-colophon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	padding: 24px 4px 0;
	margin-top: 8px;
	border-top: 1px solid var(--sa-line);
}
.sa-colophon p { margin: 0; color: var(--sa-muted); font-size: 13.5px; }
.sa-colophon a { color: var(--sa-muted); }
.sa-logo-sm { opacity: .9; }
.sa-logo-plate-sm { display: inline-block; }

/* ============================== the ladder ==============================
   Four rungs, one per price. A list and not a row of cards: cards invite a
   side-by-side comparison of features, and this is not a feature comparison —
   it is a sequence, where each rung credits into the one below it and the
   reader is meant to find the step they are standing on.
   ===================================================================== */

.sa-pricing { padding-top: 40px; }
.sa-pricing-head { padding-bottom: 26px; }
.sa-pricing-head .sa-lede { margin-bottom: 0; }

.sa-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sa-ladder-one { margin-top: 20px; }

.sa-rung {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 0 20px;
	align-items: start;
	background: var(--sa-card);
	border: 1px solid var(--sa-line);
	border-radius: var(--sa-radius);
	box-shadow: var(--sa-shadow-sm);
	padding: 26px 26px 28px 22px;
}
.sa-rung.is-on {
	border-color: #E0CDB4;
	box-shadow: var(--sa-shadow);
}
.sa-rung.is-on::before { display: none; }

/* The numeral sits in the tan disc from the Progress stepper. Decorative and
   marked aria-hidden in the markup — the name and price already say
   everything it says — but darkened anyway, because a numeral nobody can read
   is not restraint, it is just faint. */
.sa-rung-n {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--sa-tint);
	color: var(--sa-deep);
	font-family: var(--sa-serif);
	font-weight: 700;
	font-size: 17px;
	margin: 0;
	font-variant-numeric: tabular-nums;
}
.sa-rung.is-on .sa-rung-n { background: var(--sa-accent); color: #fff; }

.sa-rung-top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 20px;
	padding-bottom: 12px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--sa-line);
	min-height: 52px;
}
.sa-rung-name {
	margin: 0;
	font-family: var(--sa-serif);
	font-weight: 700;
	font-size: clamp(21px, 2.4vw, 27px);
	line-height: 1.16;
	letter-spacing: -.012em;
	color: var(--sa-ink);
}
.sa-rung-price {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-end;
	gap: 4px 10px;
	text-align: right;
}
.sa-rung-amt {
	font-family: var(--sa-serif);
	font-weight: 700;
	font-size: 23px;
	line-height: 1.16;
	letter-spacing: -.012em;
	color: var(--sa-ink);
	white-space: nowrap;
}
.sa-rung-was {
	font-family: var(--sa-serif);
	font-size: 16px;
	color: var(--sa-muted);
	text-decoration: line-through;
	white-space: nowrap;
}
.sa-rung-cadence { flex: 1 0 100%; color: var(--sa-muted-warm); }

.sa-rung-flag { margin: 0 0 12px; color: var(--sa-good); }
.sa-rung-flag:not(.sa-rung-credit) {
	font-family: var(--sa-serif);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-size: 10.5px;
}
/* The credit is a sentence about money, not a label, so it drops the tracked
   uppercase and is set to be read. */
.sa-rung-credit {
	font-family: var(--sa-sans);
	font-weight: 500;
	font-size: 14.5px;
	line-height: 1.55;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sa-deep);
	background: var(--sa-tint);
	border-radius: var(--sa-radius-sm);
	padding: 11px 15px;
	max-width: 62ch;
}

.sa-rung-blurb { margin: 0 0 14px; color: var(--sa-body); max-width: 62ch; }
.sa-rung-points {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px 26px;
}
.sa-rung-points > li {
	position: relative;
	padding-left: 19px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--sa-body);
}
.sa-rung-points > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .62em;
	width: 9px;
	height: 2px;
	border-radius: 1px;
	background: var(--sa-accent);
}
.sa-rung-cta { margin: 0; }

/* A rung already paid for keeps its name and its price — that is the receipt —
   and drops the sales copy. No dimming: greying it out would push it under the
   contrast floor to say something a three-word flag says better. */
.sa-rung.is-paid { padding-top: 20px; padding-bottom: 20px; }
.sa-rung.is-paid .sa-rung-blurb,
.sa-rung.is-paid .sa-rung-points { display: none; }
.sa-rung.is-paid .sa-rung-top {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 6px;
}

.sa-ladder-foot { padding: 26px 4px 0; }
.sa-ladder-foot .sa-kicker { margin-bottom: 10px; }
.sa-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sa-chain > li {
	position: relative;
	padding-left: 19px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--sa-body);
	max-width: 74ch;
}
.sa-chain > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .68em;
	width: 9px;
	height: 2px;
	border-radius: 1px;
	background: var(--sa-accent);
}

/* ========================= the standing service =========================
   Below the ladder and visibly apart from it: a bordered panel with no
   numeral, because it is not a step. Somebody can switch it on from any rung
   and switch it off again, which is the one thing a numbered list cannot say.
   ===================================================================== */

.sa-standing { padding: 30px 0 0; }
.sa-standing .sa-kicker { margin-bottom: 12px; }
.sa-standing-card { border-top: 3px solid var(--sa-accent); }
.sa-standing-card .sa-rung-top { margin-bottom: 14px; min-height: 0; }
.sa-standing-card .sa-rung-points { margin-bottom: 20px; }
.sa-standing-card .sa-fine {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--sa-line);
	max-width: 72ch;
}

/* ============================= the intake ===============================
   The report is free and expensive to produce, so it is not given away for an
   email address — it is given away for the things that make a follow-up call
   possible.
   ===================================================================== */

.sa-intake { max-width: 760px; padding-top: 34px; }
.sa-form, .sa-progress {
	background: var(--sa-card);
	border: 1px solid var(--sa-line);
	border-radius: var(--sa-radius);
	box-shadow: var(--sa-shadow);
	padding: clamp(24px, 3.4vw, 40px);
}
.sa-intake-mast {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 18px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--sa-line);
}
.sa-intake .sa-h2 { margin-top: 4px; }

.sa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0 22px; }
.sa-span2 { grid-column: 1 / -1; }
.sa-field { display: flex; flex-direction: column; gap: 7px; }
.sa-field span { font-weight: 600; font-size: 13.5px; line-height: 1.35; color: var(--sa-ink); }
.sa-field input {
	font-family: var(--sa-sans);
	font-size: 16px;
	line-height: 1.4;
	padding: 13px 15px;
	border: 1px solid var(--sa-line);
	border-radius: var(--sa-radius-sm);
	background: var(--sa-paper);
	color: var(--sa-ink);
	width: 100%;
}
.sa-field input:focus {
	outline: 2px solid var(--sa-accent);
	outline-offset: 1px;
	background: #fff;
}
/* A section heading, not a box: it must never look like a field. */
.sa-calib {
	background: none;
	border-top: 1px solid var(--sa-line);
	border-radius: 0;
	padding: 18px 0 0;
	margin-top: 6px;
}
.sa-calib-head { margin: 0 0 2px; font-weight: 700; font-size: 15.5px; color: var(--sa-ink); }
.sa-calib-note { margin: 0; color: var(--sa-muted-warm); font-size: 14px; }
.sa-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sa-error {
	margin: 14px 0 0;
	color: #8E1C16;
	background: #F7E2E0;
	border-radius: var(--sa-radius-sm);
	padding: 12px 15px;
	font-size: 15px;
}

.sa-steps { list-style: none; counter-reset: sap; margin: 24px 0; padding: 0; display: grid; gap: 12px; }
.sa-steps > li {
	counter-increment: sap;
	position: relative;
	padding-left: 44px;
	color: var(--sa-muted);
	font-size: 15.5px;
}
.sa-steps > li::before {
	content: counter(sap);
	position: absolute;
	left: 0;
	top: -1px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--sa-tint-2);
	color: var(--sa-muted);
	font-family: var(--sa-serif);
	font-weight: 700;
	font-size: 13px;
	display: grid;
	place-items: center;
}
.sa-steps > li.is-done { color: var(--sa-ink); }
.sa-steps > li.is-done::before { background: var(--sa-accent); color: #fff; }
.sa-steps > li.is-now { color: var(--sa-ink); font-weight: 600; }
.sa-steps > li.is-now::before { background: var(--sa-ink); color: #fff; }

.sa-progress .sa-bar {
	height: 10px;
	background: var(--sa-track);
	border-radius: var(--sa-radius-pill);
	overflow: hidden;
}
.sa-progress .sa-bar i {
	display: block;
	height: 100%;
	background: var(--sa-accent);
	border-radius: var(--sa-radius-pill);
	transition: width .4s ease;
}

.sa-test, .sa-test-out { font-family: var(--sa-mono); font-size: 13px; }

/* ============================== narrow ================================== */

@media (max-width: 860px) {
	.sa-evidence dl { grid-template-columns: 1fr; gap: 2px 0; }
	.sa-evidence dt { margin-top: 8px; }
}

@media (max-width: 680px) {
	.sa { font-size: 16.5px; padding: 0 16px 56px; }
	.sa-grid { grid-template-columns: 1fr; }
	.sa-stats { grid-template-columns: 1fr; }
	.sa-cover::before { width: 74%; opacity: .7; }
	.sa-cover-mid { max-width: none; }
	.sa-cover-top { flex-wrap: wrap; }
	.sa-mast-kind, .sa-cover-kind { text-align: left; }

	.sa-area-head { flex-wrap: wrap; gap: 12px; }
	.sa-area-head > div { flex: 1 1 100%; order: 3; }
	.sa-backtop { display: none; }

	.sa-eq { gap: 8px; }
	.sa-eq-cell { flex: 1 1 100%; }
	.sa-eq-op { align-self: flex-start; }
	.sa-build > li { grid-template-columns: 1fr auto; gap: 4px 12px; }
	.sa-build-track { grid-column: 1 / -1; }

	.sa-hbars > li { grid-template-columns: 1fr auto; }
	.sa-hbar-track { grid-column: 1 / -1; }
	.sa-bars > li { grid-template-columns: 1fr auto; }
	.sa-bars .sa-bar { grid-column: 1 / -1; grid-row: 2; }

	.sa-table th { white-space: normal; }
	.sa-table th, .sa-table td { padding: 10px 11px; }
	.sa-badge { padding: 4px 10px 3px; }

	/*
	   The at-a-glance table stacks rather than scrolls.

	   Three columns — area, verdict, cost — inside a 356px card came to 452px,
	   because "What it is costing" and "$8,400–$24,000 /mo" both refuse to
	   break. Letting it scroll sideways technically removed the overflow and
	   left the thing unreadable: the first column collapsed to one word a line
	   while the third sat off-screen. So on a phone each row becomes a block:
	   the area, then its verdict, then what it costs. The header is dropped
	   because the content says what it is — "Serious" and "$8,400–$24,000 /mo"
	   need no column title to be understood.
	*/
	.sa-glance .sa-table,
	.sa-glance tbody,
	.sa-glance tr,
	.sa-glance td {
		display: block;
		width: auto;
	}
	.sa-glance thead { display: none; }
	.sa-glance .sa-table { border: 0; border-radius: 0; }
	.sa-glance tr {
		padding: 14px 0;
		border-bottom: 1px solid var(--sa-line);
	}
	.sa-glance tr:last-child { border-bottom: 0; }
	.sa-glance td { border: 0; padding: 2px 0; }
	.sa-glance td:first-child { font-size: 16.5px; }
	.sa-glance td:first-child a { font-weight: 600; }
	.sa-glance .sa-sub { display: block; margin-top: 2px; }
	.sa-glance .sa-cost { color: var(--sa-ink); font-weight: 500; }

	/* The engine tables stay tables — four short numeric columns read fine
	   stacked side by side — but they may still need a nudge sideways. */
	.sa-meta { overflow-x: auto; }

	.sa-rung {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 22px 18px 24px;
	}
	.sa-rung-n { margin-bottom: 14px; }
	.sa-rung-top { display: block; min-height: 0; }
	.sa-rung-price { justify-content: flex-start; text-align: left; margin-top: 6px; }
	.sa-rung-amt { font-size: 19px; }
	.sa-rung-cadence { flex: 0 1 auto; }
	.sa-rung-points { grid-template-columns: 1fr; }
	.sa-ladder-foot { padding-left: 0; padding-right: 0; }

	.sa-steps-list > li { padding-left: 48px; }
	.sa-steps-list > li::before { width: 34px; height: 34px; font-size: 14px; }
	.sa-steps-list > li::after { left: 16.5px; top: 40px; }
	.sa-step-head { min-height: 34px; }

	.sa-colophon { flex-direction: column; align-items: flex-start; }
}

/* =============================== print ==================================
   A sheet of paper is 1100px tall and unforgiving. `break-inside: avoid` is
   applied only to things that actually fit on a page — put it on a block
   taller than the sheet and the browser flushes the whole block to the next
   page, which is how the old report ended up with three near-blank pages.
   ===================================================================== */

@media print {
	.sa {
		max-width: none;
		padding: 0;
		font-size: 11.5pt;
		background: var(--sa-paper);
	}
	.sa-cta, .sa-internal, .sa-queries, .sa-progress, .sa-backtop { display: none; }
	.sa-cover { break-after: page; }
	.sa-contents { break-after: page; }
	.sa-area { break-before: auto; }

	.sa-findings > li,
	.sa-meta-top,
	.sa-eq,
	.sa-build,
	.sa-passes,
	.sa-evidence,
	.sa-headline,
	.sa-rung,
	.sa-standing-card,
	.sa-steps-list > li { break-inside: avoid; }

	.sa-cover::before,
	.sa-panel,
	.sa-badge,
	.sa-when,
	.sa-disc,
	.sa-rung-n,
	.sa-area-n,
	.sa-btn,
	.sa-cell,
	.sa-eq-cell.is-result,
	.sa-hbar-track i,
	.sa-bars .sa-bar > i,
	.sa-share-bar i,
	.sa-build-track i,
	.sa-build-ghost,
	.sa-steps-list > li::before,
	.sa-key::before,
	.sa-headline-num,
	.sa-cover-name::after,
	.sa-stats,
	.sa-table th {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.sa-card, .sa-summary, .sa-headline, .sa-derive-wrap, .sa-glance,
	.sa-plan, .sa-area, .sa-method, .sa-note, .sa-moneychart,
	.sa-cover, .sa-contents, .sa-rung, .sa-standing-card {
		box-shadow: none;
	}
}

/* The four-word column from the Progress hero. Decorative — it repeats what
   the masthead and the report's own title already say — so it is aria-hidden
   and never read aloud twice. */
.sa-pillars {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
	display: grid;
	gap: 5px;
}
.sa-pillars > li {
	font-family: var(--sa-serif);
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-size: 9.5px;
	line-height: 1;
	color: var(--sa-muted-warm);
}

/* The top rung. Not a dark panel any more — it earns its weight from a
   heavier bronze edge and the tinted ground, the way the Progress page marks
   the stage somebody is actually on. */
.sa-rung.is-top {
	background: linear-gradient(180deg, #FCF9F5 0%, var(--sa-tint) 100%);
	border-color: #E0CDB4;
}
.sa-rung.is-top .sa-rung-top { border-bottom-color: #E3D4BF; }

/* =============================== motion =================================
   The report moves the way the report videos do: figures count up, bars
   fill, gauges sweep, the rank grid pops in as a wave, and lists rise into
   place as they scroll into view.

   All of it hangs off `.sa-anim`, which a four-line script at the top of the
   report adds only when the browser can watch scrolling and the reader has
   not asked for reduced motion — and which sa-motion.js removes the moment
   the page is printed. Without that class none of these rules apply, so the
   HTML on its own is always the finished report. Every start pose below is
   screen-only for the same reason: paper never sees a half-drawn bar.
   ===================================================================== */

.sa-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.sa-tick { display: inline-block; }

@media screen {
	/* Rise: fade up fourteen pixels. */
	.sa-anim .sa-stats,
	.sa-anim .sa-eq-cell,
	.sa-anim .sa-eq-op,
	.sa-anim .sa-build > li,
	.sa-anim .sa-glance tbody tr,
	.sa-anim .sa-steps-list > li,
	.sa-anim .sa-findings > li,
	.sa-anim .sa-passes li,
	.sa-anim .sa-evidence,
	.sa-anim .sa-bars > li,
	.sa-anim .sa-hbars > li,
	.sa-anim .sa-meta-ai tbody tr,
	.sa-anim .sa-sample {
		transition: opacity .5s ease, transform .65s cubic-bezier(.2, .7, .2, 1);
	}
	.sa-anim .sa-stats:not(.sa-go),
	.sa-anim .sa-eq-cell:not(.sa-go),
	.sa-anim .sa-eq-op:not(.sa-go),
	.sa-anim .sa-build > li:not(.sa-go),
	.sa-anim .sa-glance tbody tr:not(.sa-go),
	.sa-anim .sa-steps-list > li:not(.sa-go),
	.sa-anim .sa-findings > li:not(.sa-go),
	.sa-anim .sa-passes li:not(.sa-go),
	.sa-anim .sa-evidence:not(.sa-go),
	.sa-anim .sa-bars > li:not(.sa-go),
	.sa-anim .sa-hbars > li:not(.sa-go),
	.sa-anim .sa-meta-ai tbody tr:not(.sa-go),
	.sa-anim .sa-sample:not(.sa-go) {
		opacity: 0;
		transform: translateY(14px);
	}

	/* Pop: grow in with a small overshoot, like the checks in the videos. */
	.sa-anim .sa-area-n,
	.sa-anim .sa-area-head .sa-badge,
	.sa-anim .sa-glance .sa-badge,
	.sa-anim .sa-cell,
	.sa-anim .sa-gauge,
	.sa-anim .sa-gauge-value {
		transition: opacity .35s ease, transform .55s cubic-bezier(.34, 1.56, .64, 1);
	}
	.sa-anim .sa-area-n:not(.sa-go),
	.sa-anim .sa-area-head .sa-badge:not(.sa-go),
	.sa-anim .sa-glance .sa-badge:not(.sa-go),
	.sa-anim .sa-cell:not(.sa-go),
	.sa-anim .sa-gauge:not(.sa-go) {
		opacity: 0;
		transform: scale(.72);
	}
	.sa-anim .sa-gauge-value { transform-box: fill-box; transform-origin: center; }
	.sa-anim .sa-gauge-value:not(.sa-go) { opacity: 0; transform: scale(.6); }
	.sa-anim .sa-eq-cell.is-result {
		transition: opacity .35s ease, transform .55s cubic-bezier(.34, 1.56, .64, 1);
	}
	.sa-anim .sa-eq-cell.is-result:not(.sa-go) { opacity: 0; transform: scale(.86); }

	/* Figures wait at zero, invisible, until their turn. */
	.sa-anim [data-sa-count] { transition: opacity .2s ease; }
	.sa-anim [data-sa-count]:not(.sa-go) { opacity: 0; }

	/* Bars wait empty. The final width stays in the markup. */
	.sa-anim .sa-hbar-track > i:not(.sa-go),
	.sa-anim .sa-bars .sa-bar > i:not(.sa-go),
	.sa-anim .sa-share-mine:not(.sa-go),
	.sa-anim .sa-build-track:not(.sa-go),
	.sa-anim .sa-build-track > i:not(.sa-go) {
		width: 0 !important;
	}
	.sa-anim .sa-gauge-arc:not(.sa-go) { stroke-dasharray: 0 400; }

	.sa-anim .sa-hbar-zero { transition: opacity .4s ease; }
	.sa-anim .sa-hbar-zero:not(.sa-go) { opacity: 0; }

	/* The rules under the cover name and the headline figure draw across. */
	.sa-anim .sa-cover-name::after,
	.sa-anim .sa-headline-num::after {
		transform-origin: left center;
		transform: scaleX(var(--sa-u, 0));
	}
	.sa-anim .sa-headline-num {
		position: relative;
		border-bottom-color: transparent;
	}
	.sa-anim .sa-headline-num::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: -3px;
		height: 3px;
		background: var(--sa-accent);
	}

	/* The plan's discs pop and the rule between them draws down. */
	.sa-anim .sa-steps-list > li::before {
		transition: opacity .3s ease .12s, transform .55s cubic-bezier(.34, 1.56, .64, 1) .12s;
	}
	.sa-anim .sa-steps-list > li:not(.sa-go)::before { opacity: 0; transform: scale(.4); }
	.sa-anim .sa-steps-list > li::after {
		transform-origin: top center;
		transition: transform .7s cubic-bezier(.2, .7, .2, 1) .3s;
	}
	.sa-anim .sa-steps-list > li:not(.sa-go)::after { transform: scaleY(0); }

	/* "You" gets one pulse when its bar lands. */
	.sa-flash .sa-hbar-track { animation: sa-flash 1.1s ease-out 1; }
	@keyframes sa-flash {
		0% {
			box-shadow: 0 0 0 0 rgba(156, 105, 48, .45);
			box-shadow: 0 0 0 0 color-mix(in srgb, var(--sa-accent) 45%, transparent);
		}
		100% {
			box-shadow: 0 0 0 9px rgba(156, 105, 48, 0);
			box-shadow: 0 0 0 9px color-mix(in srgb, var(--sa-accent) 0%, transparent);
		}
	}
}

/* ======================== the competition (2.4.0) ========================
   Your three competitors, taken apart. The same rule as every other chart:
   bronze is you, warm grey is everyone else. In the side-by-side your column
   takes the warm tint and the leader on each row is set bold with a bronze
   rule under it, so a reader sees at a glance which rows they are losing.
   ===================================================================== */

.sa-gap-lead { margin: 0 0 14px; color: var(--sa-body); font-size: 15px; max-width: 60ch; }
.sa-gap-who { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: sa-gw; }
.sa-gap-who li { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; counter-increment: sa-gw; }
.sa-gap-who li::before {
	content: counter(sa-gw);
	grid-row: span 3;
	width: 24px; height: 24px;
	border-radius: 50%;
	border: 1px solid var(--sa-accent);
	color: var(--sa-accent);
	font-family: var(--sa-serif);
	font-size: 12.5px;
	display: grid; place-items: center;
}
.sa-gap-who strong { color: var(--sa-ink); font-family: var(--sa-serif); font-weight: 600; }
.sa-gap-domain { display: block; color: var(--sa-muted); font-size: 13px; font-weight: 400; }
.sa-gap-why { display: block; color: var(--sa-body); font-size: 13.5px; }
.sa-gap-block { margin: 28px 0 0; }
.sa-gap-block > .sa-fine { margin: 10px 0 0; max-width: 78ch; }

.sa-matrix td { font-variant-numeric: tabular-nums; }
.sa-matrix th.sa-col-mine, .sa-matrix td.sa-col-mine { background: var(--sa-tint); }
.sa-matrix th.sa-col-mine { color: var(--sa-deep); }
.sa-matrix td.sa-lead {
	color: var(--sa-ink);
	font-weight: 700;
	background-image: linear-gradient(var(--sa-accent), var(--sa-accent));
	background-repeat: no-repeat;
	background-size: 18px 2px;
	background-position: 13px calc(100% - 7px);
}
.sa-matrix td.sa-col-mine.sa-lead { background-color: var(--sa-tint); }
.sa-matrix th, .sa-kwgap th { white-space: normal; vertical-align: bottom; line-height: 1.35; }
.sa-matrix td:first-child { min-width: 170px; }
.sa-kwgap td:first-child { min-width: 190px; }
.sa-kwgap th:nth-child(n+4), .sa-kwgap td:nth-child(n+4) { text-align: center; }
.sa-dim { color: var(--sa-muted); }

.sa-lines { margin: 6px 0 0; }
.sa-lines svg { display: block; width: 100%; height: auto; }
.sa-lines-axis { font-size: 11px; fill: var(--sa-muted); font-family: var(--sa-sans); font-variant-numeric: tabular-nums; }
.sa-legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; color: var(--sa-body); }
.sa-legend li { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; margin: 0; padding: 0; white-space: nowrap; }
.sa-legend li svg { flex: 0 0 30px; }
.sa-legend li.is-mine span { color: var(--sa-ink); font-weight: 600; }
.sa-legend b { font-weight: 600; color: var(--sa-ink); font-variant-numeric: tabular-nums; }

.sa-ads { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.sa-ad { margin: 0; background: var(--sa-card); border: 1px solid var(--sa-line); border-radius: var(--sa-radius-sm); padding: 14px 16px; }
.sa-ad-who { margin: 0 0 6px; font-family: var(--sa-serif); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-muted-warm); }
.sa-ad-title { margin: 0 0 4px; color: var(--sa-ink); font-weight: 600; font-size: 15.5px; }
.sa-ad-desc { margin: 0 0 8px; font-size: 14px; color: var(--sa-body); }
.sa-ad-meta { margin: 0; font-size: 12.5px; color: var(--sa-muted); }

.sa-gap-preview .sa-matrix td:first-child .sa-gap-domain { margin-top: 2px; }
.sa-locked { background: repeating-linear-gradient(135deg, var(--sa-tint-2) 0 6px, transparent 6px 12px); min-width: 96px; }
.sa-locked span { display: block; height: 9px; width: 64%; border-radius: var(--sa-radius-pill); background: var(--sa-track); }
.sa .sa-locked-h { color: var(--sa-muted); }
.sa-gap-pitch { margin: 20px 0 0; background: var(--sa-tint-2); border: 1px solid var(--sa-line); border-radius: var(--sa-radius-sm); padding: 20px 22px; }
.sa-gap-pitch p { margin: 0 0 14px; max-width: 68ch; color: var(--sa-body); }
.sa-gap-pitch p:last-child { margin: 0; }

.sa-matrix tr.sa-row-mine td { background: var(--sa-tint); }
.sa-matrix tr.sa-row-mine td:first-child { color: var(--sa-deep); font-weight: 600; }

@media (max-width: 640px) {
	.sa-matrix td:first-child, .sa-matrix th:first-child { position: sticky; left: 0; z-index: 1; background: var(--sa-card); box-shadow: 1px 0 0 var(--sa-line); min-width: 132px; }
	.sa-matrix th:first-child { background: var(--sa-tint-2); }
	.sa-legend { gap: 6px 16px; font-size: 13px; }
	.sa-lines-axis { font-size: 13px; }
}
@media print {
	.sa-gap-pitch .sa-btn { display: none; }
}

/* ------------------------------------------------------------------ */
/* Listings — name, address and phone on the directories (2.5.0)        */
/* ------------------------------------------------------------------ */
.sa-nap { margin: 28px 0 8px; }
.sa-nap-canon {
	background: var(--sa-tint-2);
	border: 1px solid var(--sa-line);
	border-left: 4px solid var(--sa-accent);
	border-radius: var(--sa-radius-sm);
	padding: 14px 18px;
	margin: 0 0 16px;
}
.sa-nap-k { margin: 0 0 4px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--sa-muted-warm); font-weight: 600; }
.sa-nap-rec { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--sa-ink); }
.sa-nap-rec strong { font-weight: 700; }
.sa-nap-score { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; color: var(--sa-body); }
.sa-nap-big { font-size: 34px; font-weight: 800; line-height: 1; color: var(--sa-ink); font-variant-numeric: tabular-nums; }
.sa-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sa-nap-table td { vertical-align: top; }
.sa-nap-table td:first-child a { color: var(--sa-ink); text-decoration: underline; text-decoration-color: var(--sa-line); text-underline-offset: 3px; }
.sa-nap-v { overflow-wrap: anywhere; }
.sa-nap-c { display: inline; }
.sa-nap-read { color: var(--sa-muted); font-size: 13px; white-space: nowrap; }
.sa-nap-bad-row td:first-child { box-shadow: inset 3px 0 0 var(--sa-crit); }
.sa-nap-st {
	display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; border-radius: 50%;
	font-size: 12px; font-weight: 700; line-height: 1; vertical-align: 1px;
	margin-right: 4px; flex: none;
}
.sa-nap-match     { background: #E3F1E8; color: var(--sa-good); }
.sa-nap-variant   { background: #F4EBD9; color: #8A5A12; }
.sa-nap-city      { background: var(--sa-tint-2); color: var(--sa-muted-warm); }
.sa-nap-different { background: #F8E1DF; color: var(--sa-crit); }
.sa-nap-unknown   { background: var(--sa-tint-2); color: var(--sa-muted); }
.sa-nap-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; }
.sa-nap-missing { margin: 14px 0 6px; color: var(--sa-body); }
@media (max-width: 640px) {
	.sa-nap-big { font-size: 28px; }
	/* One card per listing on a phone. */
	.sa-nap-table, .sa-nap-table tbody, .sa-nap-table tr, .sa-nap-table td,
	.sa-funnel-table, .sa-funnel-table tbody, .sa-funnel-table tr, .sa-funnel-table td { display: block; width: 100%; }
	.sa-nap-table thead, .sa-funnel-table thead { display: none; }
	.sa-nap-table, .sa-funnel-table { border: 0; border-radius: 0; overflow: visible; }
	.sa-nap-table tr, .sa-funnel-table tr { border: 1px solid var(--sa-line); border-radius: var(--sa-radius-sm); margin: 0 0 10px; background: var(--sa-card, #fff); }
	.sa-nap-table td, .sa-funnel-table td { border-bottom: 0; padding: 6px 13px; display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: start; }
	.sa-nap-table td::before, .sa-funnel-table td::before { content: attr(data-label); color: var(--sa-muted-warm); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding-top: 2px; }
	.sa-nap-table td:first-child, .sa-funnel-table td:first-child { display: block; padding-top: 11px; font-weight: 600; }
	.sa-nap-table td:first-child::before, .sa-funnel-table td:first-child::before { content: none; }
	.sa-nap-table td:last-child, .sa-funnel-table td:last-child { padding-bottom: 11px; white-space: normal; }
	.sa-nap-bad-row td:first-child { box-shadow: none; }
	.sa-nap-bad-row { border-left: 3px solid var(--sa-crit) !important; }
}
@media print {
	.sa-table-wrap { overflow: visible; }
	.sa-nap-table { min-width: 0; }
}

/* ------------------------------------------------------------------ */
/* 2.6 / 2.7 — sales path, first screen, speed, health, search          */
/* ------------------------------------------------------------------ */
.sa-design, .sa-funnel, .sa-speed, .sa-health, .sa-search { margin: 28px 0 8px; }
.sa-design-shots { display: flex; gap: 18px; align-items: flex-start; margin: 0 0 18px; }
.sa-shot { margin: 0; background: var(--sa-tint-2); border: 1px solid var(--sa-line); border-radius: 14px; padding: 10px; }
.sa-shot img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--sa-line); }
.sa-shot figcaption { font-size: 12px; color: var(--sa-muted-warm); text-transform: uppercase; letter-spacing: .06em; margin: 8px 2px 0; }
.sa-shot-phone { flex: 0 0 220px; border-radius: 26px; padding: 12px 10px; }
.sa-shot-phone img { border-radius: 14px; }
.sa-shot-desk { flex: 1 1 auto; min-width: 0; }
.sa-design-read { display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px 26px; align-items: start; }
.sa-five { background: var(--sa-tint-2); border: 1px solid var(--sa-line); border-left: 4px solid var(--sa-accent); border-radius: var(--sa-radius-sm); padding: 14px 18px; }
.sa-five dl { display: grid; grid-template-columns: 82px 1fr; gap: 6px 12px; margin: 6px 0 0; }
.sa-five dt { color: var(--sa-muted-warm); font-size: 13px; }
.sa-five dd { margin: 0; color: var(--sa-ink); }
.sa-design-bars li.is-low .sa-bar i { background: var(--sa-crit); }
.sa-design-bars li.is-high .sa-bar i { background: var(--sa-good); }
.sa-design-verdict { grid-column: 1 / -1; margin: 0; font-style: italic; color: var(--sa-body); }
.sa-design-issues { margin: 18px 0 10px; padding-left: 22px; }
.sa-design-issues li { margin: 0 0 10px; }
.sa-di-where { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--sa-muted-warm); border: 1px solid var(--sa-line); border-radius: 999px; padding: 1px 8px; margin-right: 6px; }
.sa-di-high strong { color: var(--sa-crit); }
.sa-di-fix { color: var(--sa-body); }

.sa-funnel-facts, .sa-tiles { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.sa-funnel-facts li, .sa-tiles li {
	background: var(--sa-card, #fff); border: 1px solid var(--sa-line); border-top: 3px solid var(--sa-line);
	border-radius: var(--sa-radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px;
}
.sa-funnel-facts span, .sa-tiles span { font-size: 12.5px; color: var(--sa-muted-warm); line-height: 1.3; }
.sa-funnel-facts strong, .sa-tiles strong { font-size: 20px; color: var(--sa-ink); line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sa-funnel-facts li:last-child strong { font-size: 14.5px; font-weight: 600; }
.sa-tiles small { font-size: 12.5px; color: var(--sa-muted); font-weight: 400; }
.sa-report .is-ok  { border-top-color: var(--sa-good); }
.sa-report .is-mid { border-top-color: #C08A2B; }
.sa-report .is-bad { border-top-color: var(--sa-crit); }
.sa-speed-fixes { margin: 6px 0 12px; padding-left: 22px; }
.sa-speed-fixes li { margin: 0 0 6px; }
.sa-funnel-table td:first-child a, .sa-search td a { color: var(--sa-ink); }
.sa-p2 td { background: #FBF4E6; }
.sa-anchors { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.sa-anchors span { background: var(--sa-tint-2); border: 1px solid var(--sa-line); border-radius: 999px; padding: 3px 10px; font-size: 13.5px; }
.sa-anchors small { color: var(--sa-muted); margin-left: 4px; }
@media (max-width: 760px) {
	.sa-design-shots { flex-direction: column; align-items: stretch; }
	.sa-shot-phone { flex: none; width: 220px; margin: 0 auto; }
	.sa-design-read { grid-template-columns: 1fr; }
}
@media print {
	.sa-design-shots { break-inside: avoid; }
}

.sa-search .sa-table-wrap, .sa-health details, .sa-funnel .sa-table-wrap { margin-bottom: 14px; }

/* ---- Keep a copy (2.7.3) ---- */
.sa-download { margin: 34px 0 8px; padding: 22px 24px; border: 1px solid var(--sa-line); border-radius: var(--sa-radius-sm); background: var(--sa-tint-2); text-align: center; }
.sa-download-label { margin: 0 0 12px; font-weight: 700; color: var(--sa-ink); }
.sa-download-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 0 0 10px; }
.sa-download .sa-fine { max-width: 62ch; margin: 0 auto; }
@media print {
	.sa-download { display: none; }
	.sa-queries.sa-print { display: block; }
}