/* ============================================================
   CEO Freedom Scorecard — front-end styles
   Design reference: CEO Time Leak Calculator.
   Brand: Proxima Nova, pink #FF0E80 (primary), navy #06133D (secondary).

   Quiz rules live under .cfsc-app. Results rules key off .cfsc-results
   so the admin detail view (rendered outside .cfsc-app) is styled too,
   which is why the design tokens are declared on both roots.

   "Proxima Nova A" is a licensed font: the stack below picks it up
   automatically when the site loads it (e.g. via an Adobe Fonts kit)
   and falls back to Helvetica/Arial otherwise. It is forced with
   !important on every element so theme/page-builder fonts can't
   override it inside the scorecard.
   ============================================================ */

.cfsc-app,
.cfsc-results {
	/* Brand */
	--cfsc-pink: #ff0e80;
	--cfsc-pink-dark: #d8006a;
	--cfsc-pink-text: #b8005a;      /* darker pink for small text (AA on light bg) */
	--cfsc-pink-soft: #ffe9f4;
	--cfsc-navy: #06133d;
	--cfsc-navy-2: #14297a;         /* gradient partner for the navy panels */
	--cfsc-navy-soft: #eef1fa;
	--cfsc-on-navy: #c9d2ef;        /* muted text on navy panels */

	/* Neutrals */
	--cfsc-bg: #ffffff;
	--cfsc-surface: #f7f8fc;
	--cfsc-border: #e6e9f4;
	--cfsc-text: #06133d;
	--cfsc-muted: #5b6480;

	/* Shape & depth */
	--cfsc-radius: 16px;
	--cfsc-radius-md: 12px;
	--cfsc-radius-sm: 10px;
	--cfsc-radius-btn: 6px;
	--cfsc-shadow-sm: 0 1px 2px rgba(6, 19, 61, 0.05), 0 2px 8px rgba(6, 19, 61, 0.05);
	--cfsc-shadow: 0 2px 6px rgba(6, 19, 61, 0.06), 0 16px 36px rgba(6, 19, 61, 0.1);
	--cfsc-shadow-pink: 0 8px 20px rgba(255, 14, 128, 0.3);

	/* Answer-matrix column width (holds one 44px answer button) */
	--cfsc-scale-col: 56px;

	--cfsc-font: "Proxima Nova A", Helvetica, Arial, sans-serif;
}

/* Force the brand font on everything inside the scorecard. */
.cfsc-app,
.cfsc-app *,
.cfsc-app *::before,
.cfsc-app *::after,
.cfsc-results,
.cfsc-results *,
.cfsc-results *::before,
.cfsc-results *::after {
	font-family: "Proxima Nova A", Helvetica, Arial, sans-serif !important;
}

.cfsc-app {
	max-width: 100%;
	margin: 0 auto;
	padding: 8px;
	box-sizing: border-box;
	color: var(--cfsc-text);
	font-family: var(--cfsc-font);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
}

/* Long unbroken strings (URLs, compound words) must never push the layout
   wider than the viewport on a phone. */
.cfsc-app,
.cfsc-results {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Screen-reader-only text. */
.cfsc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.cfsc-results {
	color: var(--cfsc-text);
	font-family: var(--cfsc-font);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.cfsc-app *,
.cfsc-app *::before,
.cfsc-app *::after,
.cfsc-results *,
.cfsc-results *::before,
.cfsc-results *::after {
	box-sizing: border-box;
}

/* --- Progress ---------------------------------------------- */
.cfsc-progress {
	margin: 0 0 28px;
}
.cfsc-progress-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}
.cfsc-progress-label {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--cfsc-navy);
	white-space: nowrap;
}
.cfsc-progress-label [data-cfsc-step-current] {
	color: var(--cfsc-pink);
	font-weight: 800;
}
.cfsc-progress-pct {
	font-size: 14px;
	font-weight: 800;
	color: var(--cfsc-pink);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.cfsc-progress-bar {
	height: 10px;
	background: #edeff5;
	border-radius: 999px;
	overflow: hidden;
}
.cfsc-progress-fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--cfsc-pink-dark), var(--cfsc-pink) 65%, #ff5ca8);
	transition: width 0.5s cubic-bezier(0.22, 0.8, 0.36, 1);
}

/* --- Steps / panels ---------------------------------------- */
.cfsc-step[hidden] {
	display: none;
}
.cfsc-step {
	background: var(--cfsc-bg);
	animation: cfsc-fade 0.35s ease;
}
@keyframes cfsc-fade {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --- Brand logo (quiz header + results) --------------------- */
.cfsc-logo {
	display: flex;
	justify-content: center;
}
.cfsc-logo-img {
	height: auto;
	max-width: 100%;
	display: block;
}
.cfsc-results .cfsc-logo-img {
	max-width: min(100%, 230px);
}

/* The quiz opens straight on question one, so the logo is all
   the branding there is above the questions. */
.cfsc-quiz-head {
	margin: 0 0 22px;
}
.cfsc-quiz-head[hidden] {
	display: none;
}
.cfsc-quiz-head .cfsc-logo-img {
	max-width: min(100%, 150px);
}

/* --- Lead-capture form -------------------------------------
   The details are collected on their own step after the last
   section. -------------------------------------------------- */
.cfsc-lead-form {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	text-align: center;
}
.cfsc-lead-fields {
	display: grid;
	gap: 14px;
	margin-bottom: 22px;
	text-align: left;
}
.cfsc-input {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--cfsc-bg);
	border: 1.5px solid #e7eaf3;
	border-radius: 14px;
	padding: 6px 16px 6px 12px;
	box-shadow: var(--cfsc-shadow-sm);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.cfsc-input:focus-within {
	border-color: var(--cfsc-pink);
	box-shadow: 0 0 0 4px var(--cfsc-pink-soft);
}
.cfsc-input-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--cfsc-pink-soft);
	color: var(--cfsc-pink);
}
.cfsc-input-icon svg {
	width: 21px;
	height: 21px;
}
.cfsc-input input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	border: none;
	outline: none;
	background: transparent;
	padding: 14px 0;
	/* 16px keeps iOS Safari from zooming in when a field is focused. */
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	color: var(--cfsc-text);
	line-height: 1.3;
}
.cfsc-input input::placeholder {
	color: #9aa3ba;
	font-weight: 600;
	opacity: 1;
}
.cfsc-input:has(input.cfsc-invalid) {
	border-color: #e02424;
	box-shadow: 0 0 0 3px rgba(224, 36, 36, 0.12);
}
.cfsc-lead-form .cfsc-step-error {
	text-align: left;
	margin: 0 0 18px;
}
/* The lead step keeps the section heading centred over its form. */
.cfsc-lead .cfsc-section-head {
	text-align: center;
}
.cfsc-lead-form .cfsc-nav {
	margin-top: 0;
}
/* "Click SUBMIT to get your results!" under the fields. */
.cfsc-lead-hint {
	margin: 0 0 22px;
	font-size: clamp(16px, 2.2vw, 19px);
	color: var(--cfsc-navy);
}
.cfsc-lead-hint strong {
	font-weight: 800;
}
.cfsc-btn-arrow {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}
.cfsc-btn:hover .cfsc-btn-arrow {
	transform: translateX(3px);
}

/* --- Instructions ------------------------------------------- */
.cfsc-instructions {
	margin: 0 0 26px;
	font-size: 14px;
	color: var(--cfsc-navy);
	line-height: 1.65;
}
.cfsc-instructions p {
	margin: 0;
}
.cfsc-instructions-title {
	font-weight: 700;
}
.cfsc-instructions-scale {
	list-style: none;
	margin: 2px 0 0;
	padding: 0;
}

/* --- Section head ------------------------------------------ */
/* Base hierarchy (used by the lead-capture step). */
.cfsc-section-head {
	margin-bottom: 26px;
}
.cfsc-section-title {
	margin: 0 0 6px;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--cfsc-navy);
}
.cfsc-section-subtitle {
	margin: 0;
	color: var(--cfsc-muted);
	font-size: 16px;
}
/* Question sections flip the hierarchy to match the reference:
   the area name becomes a small eyebrow, the guiding question
   becomes the page heading. */
.cfsc-section .cfsc-section-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--cfsc-pink-text);
	margin: 0 0 8px;
}
.cfsc-section .cfsc-section-subtitle {
	font-size: 25px;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.25;
	color: var(--cfsc-navy);
}

/* --- Question matrix ----------------------------------------
   The header row and every question row share a MIRRORED FLEX
   layout: a flexible first column (spacer / question text) plus
   a fixed-width group of five equal cells on the right. Because
   both right-hand groups are the same width, every answer button
   lines up under its label with no fragile column math — and
   because each button is an explicitly sized element, it can
   never collapse out of view. ------------------------------- */
.cfsc-questions {
	display: block;
}
.cfsc-matrix-head,
.cfsc-question {
	display: flex;
	align-items: center;
	gap: 24px;
}
.cfsc-matrix-head-spacer,
.cfsc-question-text {
	flex: 0 1 auto;
	min-width: 0;
}
/* margin-left:auto right-aligns the label row and every answer row to
   the SAME edge — no reliance on a growing spacer, so themes that hide
   empty elements or reset flex-grow can't knock the columns out of line. */
.cfsc-matrix-head-scale,
.cfsc-scale {
	flex: none;
	display: flex;
	gap: 10px;
	margin-left: auto;
}
.cfsc-matrix-head-col,
.cfsc-scale-option {
	width: var(--cfsc-scale-col);
	display: flex;
	align-items: center;
	justify-content: center;
}
.cfsc-matrix-head {
	align-items: flex-end;
	padding: 0 4px 14px;
	margin-bottom: 6px;
	border-bottom: 2px solid var(--cfsc-border);
}
.cfsc-matrix-head-col {
	text-align: center;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--cfsc-navy);
}
.cfsc-question {
	padding: 12px 4px;
	margin: 0;
	border: none;
	background: transparent;
	border-radius: var(--cfsc-radius-sm);
	border-bottom: 1px solid #eef0f7;
	transition: background 0.18s ease, box-shadow 0.18s ease;
}
.cfsc-question:last-child {
	border-bottom: none;
}
.cfsc-question:hover {
	background: #fafbff;
}
.cfsc-question.cfsc-invalid {
	background: #fff5f5;
	box-shadow: inset 0 0 0 1.5px rgba(224, 36, 36, 0.4);
}
.cfsc-question-text {
	margin: 0;
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--cfsc-navy);
}

/* Answer buttons: big numbered circular targets. Muted grey when
   idle, pink-tinted on hover, solid pink when selected — so the
   options read unmistakably as buttons and the choice is clear. */
.cfsc-scale-option {
	cursor: pointer;
	padding: 4px 0;
	margin: 0;
}
.cfsc-scale-option input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.cfsc-scale-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid #d4d9ea;
	background: #f3f5fb;
	color: #98a1bd;
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.cfsc-scale-option:hover .cfsc-scale-btn {
	border-color: var(--cfsc-pink);
	background: var(--cfsc-pink-soft);
	color: var(--cfsc-pink-text);
	transform: translateY(-2px);
}
.cfsc-scale-option:has(input:checked) .cfsc-scale-btn {
	border-color: var(--cfsc-pink);
	background: var(--cfsc-pink);
	color: #ffffff;
	box-shadow: 0 6px 14px rgba(255, 14, 128, 0.35);
	transform: translateY(-2px);
}
.cfsc-scale-option input:focus-visible + .cfsc-scale-btn {
	outline: 3px solid rgba(255, 14, 128, 0.4);
	outline-offset: 2px;
}
/* Labels live in the column header on desktop; keep the per-option
   text for screen readers (it becomes visible on the mobile layout). */
.cfsc-scale-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* One-line scale hint under the section heading */
.cfsc-scale-hint {
	margin: 14px 0 0;
	font-size: 14px;
	color: var(--cfsc-muted);
}

/* --- Buttons / nav ----------------------------------------- */
.cfsc-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 28px;
}
.cfsc-nav .cfsc-btn-primary {
	margin-left: auto;
}
.cfsc-btn {
	appearance: none;
	border: none;
	cursor: pointer;
	line-height: 1.2;
	transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	min-height: 48px;
	padding: 12px clamp(20px, 4vw, 34px);
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	max-width: 100%;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	background: linear-gradient(90deg, #ff2e95 0%, #ff007f 100%);
	background-color: rgba(0, 0, 0, 0);
	box-shadow: 0 14px 26px rgba(255, 0, 127, 0.18);
	font-weight: 800;
	text-transform: none;
	font-family: "Proxima Nova A", Helvetica, Arial, sans-serif !important;
	/* clamp() rather than a flat 18px !important, so the label can shrink on
	   narrow phones instead of overflowing its button. */
	font-size: clamp(15px, 3.4vw, 18px) !important;
}
.cfsc-btn:focus-visible {
	outline: 3px solid rgba(255, 14, 128, 0.45);
	outline-offset: 2px;
}
.cfsc-btn:active {
	transform: translateY(1px);
}
.cfsc-btn-primary {
	background: var(--cfsc-pink) !important;
	color: #ffffff;
	box-shadow: var(--cfsc-shadow-pink);
}
.cfsc-btn-primary:hover {
	background: var(--cfsc-pink-dark);
	transform: translateY(-1px);
	box-shadow: 0 12px 26px rgba(255, 14, 128, 0.38);
}
.cfsc-btn-primary:active {
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(255, 14, 128, 0.3);
}
.cfsc-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}
.cfsc-btn-ghost {
	background: transparent;
	color: var(--cfsc-navy);
	border: 1px solid var(--cfsc-border);
}
.cfsc-btn-ghost:hover {
	background: var(--cfsc-navy-soft);
	border-color: #c6cde4;
}

/* --- Errors ------------------------------------------------ */
.cfsc-step-error {
	margin: 18px 0 0;
	color: #b91c1c;
	background: #fef2f2;
	border: 1px solid #fecaca;
	padding: 12px 16px;
	border-radius: var(--cfsc-radius-sm);
	font-size: 14px;
	font-weight: 600;
}

/* --- Loading ----------------------------------------------- */
.cfsc-loading {
	text-align: center;
	padding: 64px 32px;
	color: var(--cfsc-muted);
	font-weight: 600;
	font-size: 16px;
}
.cfsc-spinner {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 4px solid var(--cfsc-pink-soft);
	border-top-color: var(--cfsc-pink);
	margin: 0 auto 20px;
	animation: cfsc-spin 0.8s linear infinite;
}
@keyframes cfsc-spin {
	to { transform: rotate(360deg); }
}

/* ============================================================
   RESULTS
   ============================================================ */

/* The results step is just a container — the cards inside carry
   the surfaces, so the wrapping panel goes flat. */
.cfsc-app .cfsc-results-panel {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}

.cfsc-results {
	display: grid;
	gap: 20px;
}

/* Hero — artwork background with the circular score gauge on top.
   The navy colour is a fallback if the image can't load; the path is
   relative to this stylesheet (public/css/ → public/images/). */
.cfsc-result-hero {
	position: relative;
	overflow: hidden;
	/* Navy → purple diagonal with a soft magenta glow in the top-right. */
	background-color: var(--cfsc-navy);
	background-image:
		radial-gradient(80% 130% at 100% 0%, rgba(173, 54, 133, 0.45) 0%, rgba(173, 54, 133, 0) 58%),
		linear-gradient(115deg, #15143a 0%, #241b49 52%, #38244f 100%);
	color: #ffffff;
	border-radius: var(--cfsc-radius);
	padding: 40px 36px;
	box-shadow: var(--cfsc-shadow);
}
/* Three columns — text · gauge · badges — with the gauge locked to the
   exact centre of the section (equal 1fr side columns) and every column
   vertically centred on the same line. */
.cfsc-hero-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
}
.cfsc-hero-main {
	min-width: 0;
	max-width: 360px;
}
.cfsc-hero-eyebrow {
	margin: 0 0 10px;
	color: var(--cfsc-on-navy);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.cfsc-hero-title {
	margin: 0 0 10px;
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: #ffffff;
}
.cfsc-hero-benchmark {
	margin: 0;
	color: var(--cfsc-on-navy);
	font-size: 16px;
	font-weight: 500;
}

/* Standing badges — right column, stacked and centred, aligned to the
   gauge's centre line via the grid's align-items: center. */
.cfsc-hero-badges {
	justify-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.cfsc-hero-badge {
	padding: 7px 16px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	white-space: nowrap;
	text-align: center;
}
.cfsc-hero-badge-standing {
	color: var(--cfsc-band-color);
	border-color: var(--cfsc-band-color);
	background: rgba(255, 255, 255, 0.06);
}

/* Circular score gauge — SVG ring with a rounded stroke. The green arc
   is revealed by animating stroke-dashoffset to the value set inline. */
.cfsc-gauge {
	position: relative;
	justify-self: center;
	width: 172px;
	height: 172px;
	display: grid;
	place-items: center;
}
.cfsc-gauge-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.cfsc-gauge-track {
	fill: none;
	stroke: rgba(255, 255, 255, 0.14);
	stroke-width: 9;
}
.cfsc-gauge-arc {
	fill: none;
	stroke: var(--cfsc-band-color);
	stroke-width: 9;
	stroke-linecap: round;
	stroke-dasharray: 326.73;
	stroke-dashoffset: var(--cfsc-dashoffset, 326.73);
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	animation: cfsc-gauge-arc 1.2s cubic-bezier(0.22, 0.8, 0.36, 1) both;
}
@keyframes cfsc-gauge-arc {
	from { stroke-dashoffset: 326.73; }
}
.cfsc-gauge-center {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.cfsc-gauge-score {
	font-size: 46px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #ffffff;
}
.cfsc-gauge-max {
	font-size: 12px;
	color: var(--cfsc-on-navy);
	font-weight: 600;
	margin-top: 5px;
}

/* --- Results actions ----------------------------------------
   Sits between the hero and the first card: the note that the
   same results are in the visitor's inbox, plus the PDF copy. */
.cfsc-result-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 20px;
	background: var(--cfsc-bg);
	border: 1px solid var(--cfsc-border);
	border-radius: var(--cfsc-radius);
	box-shadow: var(--cfsc-shadow-sm);
}
.cfsc-result-emailed {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	min-width: 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--cfsc-muted);
}
.cfsc-result-emailed-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--cfsc-pink-soft);
	color: var(--cfsc-pink);
}
.cfsc-result-emailed-icon svg {
	width: 18px;
	height: 18px;
}
.cfsc-download-btn {
	flex: none;
	margin-left: auto;
	gap: 9px;
	min-height: 44px;
	padding: 10px 22px;
	font-size: 15px !important;
	background: transparent !important;
	box-shadow: none;
}
.cfsc-download-btn:hover {
	background: var(--cfsc-navy-soft) !important;
	border-color: #c6cde4;
}
.cfsc-download-icon {
	display: inline-flex;
	color: var(--cfsc-pink);
}
.cfsc-download-icon svg {
	width: 19px;
	height: 19px;
}

/* Result cards */
.cfsc-result-card {
	background: var(--cfsc-bg);
	border: 1px solid var(--cfsc-border);
	border-radius: var(--cfsc-radius);
	padding: 28px;
	box-shadow: var(--cfsc-shadow-sm);
}
/* Card header: icon chip + title/intro */
.cfsc-card-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
}
.cfsc-card-headings {
	min-width: 0;
}
.cfsc-card-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: var(--cfsc-pink-soft);
	color: var(--cfsc-pink);
}
.cfsc-card-icon svg {
	width: 24px;
	height: 24px;
}
.cfsc-card-title {
	margin: 0 0 2px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--cfsc-navy);
}
.cfsc-card-intro {
	margin: 0;
	color: var(--cfsc-muted);
	font-size: 14.5px;
}

/* Band write-up card: small icon chip inline with the heading */
.cfsc-band-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}
.cfsc-band-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--cfsc-pink-soft);
	color: var(--cfsc-pink);
}
.cfsc-band-icon svg {
	width: 26px;
	height: 26px;
}
.cfsc-band-summary {
	margin: 0;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--cfsc-navy);
}
.cfsc-band-compare {
	margin: 0 0 8px;
	color: var(--cfsc-muted);
	font-weight: 600;
}
.cfsc-band-points {
	margin: 0 0 16px;
	padding-left: 20px;
	display: grid;
	gap: 7px;
}
.cfsc-band-points li {
	color: var(--cfsc-text);
}
.cfsc-band-points li::marker {
	color: var(--cfsc-pink);
}
.cfsc-band-body {
	margin: 0 0 16px;
}
.cfsc-band-priority {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 4px 0 0;
	padding: 14px 16px;
	background: var(--cfsc-pink-soft);
	border: 1px solid #ffd3e8;
	border-radius: var(--cfsc-radius-sm);
}
.cfsc-priority-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--cfsc-pink);
	color: #ffffff;
	box-shadow: 0 4px 10px rgba(255, 14, 128, 0.3);
}
.cfsc-priority-icon svg {
	width: 16px;
	height: 16px;
}
.cfsc-priority-text {
	min-width: 0;
}
.cfsc-band-priority strong {
	color: var(--cfsc-pink-text);
}

/* Traffic lights — one compact row per business area:
   [status dot] label · progress bar · score */
.cfsc-traffic {
	display: grid;
	gap: 4px;
}
.cfsc-traffic-row {
	display: grid;
	grid-template-columns: minmax(140px, 190px) 1fr auto;
	align-items: center;
	gap: 16px;
	padding: 9px 4px;
}
.cfsc-traffic-name {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}
.cfsc-traffic-dot {
	flex: none;
	width: 11px;
	height: 11px;
	border-radius: 50%;
}
.cfsc-traffic-label {
	font-weight: 700;
	font-size: 14.5px;
	color: var(--cfsc-navy);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cfsc-traffic-bar {
	display: block;
	height: 9px;
	border-radius: 999px;
	background: #eef0f6;
	overflow: hidden;
}
.cfsc-traffic-bar-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	transform-origin: left center;
	animation: cfsc-bar-grow 0.8s cubic-bezier(0.22, 0.8, 0.36, 1) both;
}
@keyframes cfsc-bar-grow {
	from { transform: scaleX(0); }
}
.cfsc-traffic-score {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--cfsc-muted);
	min-width: 42px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.cfsc-traffic-score b {
	font-weight: 800;
	color: var(--cfsc-navy);
}

/* Legend under the traffic rows */
.cfsc-traffic-legend {
	list-style: none;
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--cfsc-border);
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.cfsc-traffic-legend li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--cfsc-muted);
}
.cfsc-legend-dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

/* --- Business-stage benchmark ------------------------------
   The bar is divided into one equal segment per business stage
   and the legend below uses the same equal columns, so each
   stage label sits directly under the part of the bar it
   describes. The score flag is positioned by the renderer,
   interpolated between the stage benchmarks. ---------------- */
.cfsc-stage-scale {
	margin-top: 6px;
}
.cfsc-stage-track {
	position: relative;
	height: 12px;
	border-radius: 999px;
	/* Fallback; the renderer sets a gradient matched to the segments. */
	background: linear-gradient(90deg, #e8262a, #f6852c, #f2c112, #a8c93a, #4caf50);
	margin: 56px 0 0;
}
/* Hairline separators on the segment boundaries. */
.cfsc-stage-divider {
	position: absolute;
	top: -4px;
	bottom: -4px;
	width: 2px;
	background: rgba(255, 255, 255, 0.85);
	transform: translateX(-50%);
	border-radius: 2px;
}
.cfsc-stage-you {
	position: absolute;
	bottom: calc(100% + 10px);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 2;
}
.cfsc-stage-you-flag {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 34px;
	padding: 5px 12px;
	background: var(--cfsc-navy);
	color: #ffffff;
	font-size: 14px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	border-radius: 10px;
	white-space: nowrap;
	box-shadow: 0 8px 18px rgba(6, 19, 61, 0.3);
}
.cfsc-stage-you-flag::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--cfsc-navy);
}
.cfsc-stage-legend {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--cfsc-stage-count, 5), 1fr);
	gap: 6px;
}
.cfsc-stage-legend-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 6px;
	border-radius: var(--cfsc-radius-sm);
	text-align: center;
	font-size: 12.5px;
	line-height: 1.3;
	border: 1px solid transparent;
}
.cfsc-stage-legend-dot {
	display: none;
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--cfsc-stage-color, var(--cfsc-pink));
}
.cfsc-stage-legend-score {
	font-weight: 800;
	font-size: 15px;
	color: var(--cfsc-navy);
	font-variant-numeric: tabular-nums;
}
.cfsc-stage-legend-label {
	color: var(--cfsc-muted);
	font-weight: 600;
}
/* The stage the score is closest to. */
.cfsc-stage-legend-item.is-current {
	background: var(--cfsc-pink-soft);
	border-color: #ffd3e8;
}
.cfsc-stage-legend-item.is-current .cfsc-stage-legend-score {
	color: var(--cfsc-pink-text);
}
.cfsc-stage-legend-item.is-current .cfsc-stage-legend-label {
	color: var(--cfsc-navy);
	font-weight: 800;
}

/* --- Results call-to-action --------------------------------- */
.cfsc-result-cta {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: clamp(28px, 5vw, 44px) clamp(20px, 4vw, 40px);
	border-radius: var(--cfsc-radius);
	color: #ffffff;
	background-color: var(--cfsc-navy);
	background-image:
		radial-gradient(75% 120% at 100% 0%, rgba(255, 14, 128, 0.4) 0%, rgba(255, 14, 128, 0) 60%),
		linear-gradient(115deg, #15143a 0%, #241b49 55%, #38244f 100%);
	box-shadow: var(--cfsc-shadow);
}
.cfsc-cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 16px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #ffffff;
}
.cfsc-cta-icon svg {
	width: 26px;
	height: 26px;
}
.cfsc-cta-title {
	margin: 0 0 10px;
	font-size: clamp(21px, 3.4vw, 28px);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: #ffffff;
}
.cfsc-cta-text {
	margin: 0 auto 24px;
	max-width: 560px;
	color: var(--cfsc-on-navy);
	font-size: clamp(14.5px, 2.2vw, 16px);
	line-height: 1.6;
}
.cfsc-cta-btn {
	border-radius: 999px;
	min-width: 280px;
	background: linear-gradient(90deg, #ff1a8c 0%, #ff5aa7 100%) !important;
	box-shadow: 0 14px 30px rgba(255, 20, 130, 0.4);
	color: #ffffff !important;
}
.cfsc-cta-btn:hover {
	background: linear-gradient(90deg, #ff2e97 0%, #ff6cb0 100%) !important;
	transform: translateY(-1px);
}
.cfsc-cta-note {
	margin: 16px 0 0;
	font-size: 13px;
	color: var(--cfsc-on-navy);
}

/* --- Responsive -------------------------------------------- */

/* Tablets: the answer matrix tightens up before it has to collapse. */
@media (max-width: 900px) {
	.cfsc-app,
	.cfsc-results {
		--cfsc-scale-col: 50px;
	}
	.cfsc-matrix-head,
	.cfsc-question {
		gap: 14px;
	}
	.cfsc-matrix-head-scale,
	.cfsc-scale {
		gap: 6px;
	}
	.cfsc-scale-btn {
		width: 40px;
		height: 40px;
		font-size: 14px;
	}
	.cfsc-matrix-head-col {
		font-size: 11.5px;
	}
	.cfsc-hero-inner {
		grid-template-columns: 1fr auto;
		gap: 20px 24px;
	}
	/* Badges drop under the text rather than squeezing a third column. */
	.cfsc-hero-badges {
		grid-column: 1 / -1;
		justify-self: start;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.cfsc-hero-main {
		max-width: none;
	}
}

@media (max-width: 800px) {
	/* Stage labels get tight well before phone widths. */
	.cfsc-stage-legend-item {
		font-size: 11.5px;
		padding: 8px 4px;
	}
	.cfsc-stage-legend-score {
		font-size: 14px;
	}
}

@media (max-width: 640px) {
	.cfsc-app {
		padding: 4px;
	}
	.cfsc-progress {
		margin-bottom: 22px;
	}
	.cfsc-progress-label,
	.cfsc-progress-pct {
		font-size: 13px;
	}
	.cfsc-section .cfsc-section-subtitle {
		font-size: clamp(19px, 5vw, 21px);
	}
	.cfsc-section-head {
		margin-bottom: 20px;
	}

	/* The matrix collapses into labelled full-width option rows,
	   each a tappable button: [number] Label */
	.cfsc-matrix-head {
		display: none;
	}
	.cfsc-question {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 18px 0;
		border-radius: 0;
	}
	.cfsc-question:hover {
		background: transparent;
	}
	.cfsc-question.cfsc-invalid {
		padding: 16px 12px;
		border-radius: var(--cfsc-radius-sm);
	}
	.cfsc-question-text {
		margin-bottom: 4px;
		font-weight: 600;
	}
	.cfsc-scale {
		flex-direction: column;
		gap: 8px;
		width: 100%;
	}
	.cfsc-scale-option {
		width: 100%;
		justify-content: flex-start;
		gap: 14px;
		padding: 9px 12px;
		border: 1.5px solid var(--cfsc-border);
		border-radius: var(--cfsc-radius-sm);
		background: var(--cfsc-bg);
		transition: border-color 0.16s ease, background 0.16s ease;
	}
	.cfsc-scale-option:hover {
		border-color: var(--cfsc-pink);
		background: var(--cfsc-pink-soft);
	}
	.cfsc-scale-option:hover .cfsc-scale-btn,
	.cfsc-scale-option:has(input:checked) .cfsc-scale-btn {
		transform: none;
	}
	.cfsc-scale-option:has(input:checked) {
		border-color: var(--cfsc-pink);
		background: var(--cfsc-pink-soft);
	}
	.cfsc-scale-btn {
		width: 34px;
		height: 34px;
		font-size: 14px;
		flex: none;
	}
	.cfsc-scale-option:has(input:checked) .cfsc-scale-btn {
		box-shadow: none;
	}
	.cfsc-scale-text {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
		font-size: 14.5px;
		font-weight: 600;
		color: var(--cfsc-navy);
	}

	.cfsc-nav {
		flex-direction: column-reverse;
		margin-top: 22px;
	}
	.cfsc-nav .cfsc-btn,
	.cfsc-nav .cfsc-btn-primary {
		width: 100%;
		margin-left: 0;
	}

	.cfsc-results {
		gap: 16px;
	}
	/* The inbox note and the PDF button stack rather than squeeze. */
	.cfsc-result-actions {
		flex-direction: column;
		align-items: stretch;
		text-align: left;
		padding: 16px;
	}
	.cfsc-download-btn {
		width: 100%;
		margin-left: 0;
	}
	.cfsc-result-hero {
		padding: 30px 20px;
	}
	.cfsc-hero-inner {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: 22px;
	}
	.cfsc-hero-main {
		max-width: none;
		text-align: center;
	}
	.cfsc-hero-badges {
		order: -1;
		grid-column: auto;
		justify-self: center;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
	.cfsc-hero-badge {
		white-space: normal;
	}
	.cfsc-gauge {
		width: 152px;
		height: 152px;
	}
	.cfsc-gauge-score {
		font-size: 40px;
	}
	.cfsc-hero-title {
		font-size: clamp(26px, 7vw, 30px);
	}
	.cfsc-result-card {
		padding: 22px 18px;
	}
	.cfsc-card-head {
		gap: 12px;
		margin-bottom: 18px;
	}
	.cfsc-card-title {
		font-size: 18px;
	}
	.cfsc-band-head {
		align-items: flex-start;
	}
	.cfsc-band-summary {
		font-size: 17px;
	}
	.cfsc-band-icon {
		width: 44px;
		height: 44px;
	}
	.cfsc-band-icon svg {
		width: 24px;
		height: 24px;
	}
	.cfsc-band-priority {
		align-items: flex-start;
	}

	/* Traffic rows go two-line: name above, bar + score below, so long
	   area names are never truncated on a phone. */
	.cfsc-traffic-row {
		grid-template-columns: 1fr auto;
		gap: 6px 12px;
		padding: 10px 2px;
	}
	.cfsc-traffic-name {
		grid-column: 1 / -1;
	}
	.cfsc-traffic-label {
		font-size: 14px;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}
	.cfsc-traffic-legend {
		gap: 10px 16px;
	}

	/* The five stage columns become a readable stacked list. */
	.cfsc-stage-track {
		margin-top: 52px;
	}
	.cfsc-stage-legend {
		grid-template-columns: 1fr;
		gap: 4px;
		margin-top: 18px;
	}
	.cfsc-stage-legend-item {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 10px;
		text-align: left;
		font-size: 13.5px;
		padding: 7px 10px;
	}
	.cfsc-stage-legend-dot {
		display: block;
	}
	.cfsc-stage-legend-score {
		min-width: 30px;
		font-size: 14px;
	}

	.cfsc-cta-btn {
		min-width: 0;
		width: 100%;
	}
	.cfsc-loading {
		padding: 48px 20px;
	}
}

/* Small phones */
@media (max-width: 430px) {
	.cfsc-input {
		padding: 4px 12px 4px 8px;
		gap: 10px;
	}
	.cfsc-input-icon {
		width: 34px;
		height: 34px;
	}
	.cfsc-input-icon svg {
		width: 18px;
		height: 18px;
	}
	.cfsc-input input {
		padding: 12px 0;
	}
	.cfsc-gauge {
		width: 136px;
		height: 136px;
	}
	.cfsc-gauge-score {
		font-size: 34px;
	}
	.cfsc-hero-badge {
		font-size: 11.5px;
		padding: 6px 12px;
	}
	.cfsc-result-card {
		padding: 20px 14px;
	}
	.cfsc-traffic-legend {
		gap: 8px 14px;
	}
	.cfsc-traffic-legend li {
		font-size: 12.5px;
	}
}

/* --- Reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.cfsc-app *,
	.cfsc-app *::before,
	.cfsc-app *::after,
	.cfsc-results *,
	.cfsc-results *::before,
	.cfsc-results *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}