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

   Quiz rules live under .bto-app. Results rules key off .bto-results
   so the admin detail view (rendered outside .bto-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.
   ============================================================ */

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

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

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

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

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

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

.bto-app {
	max-width: 100%;
	margin: 0 auto;
	padding: 8px;
	box-sizing: border-box;
	color: var(--bto-text);
	font-family: var(--bto-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. */
.bto-app,
.bto-results {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Screen-reader-only text. */
.bto-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;
}

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

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

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

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

/* --- Brand logo (intro + results) --------------------------- */
.bto-logo {
	display: flex;
	justify-content: center;
}
.bto-logo-img {
	height: auto;
	max-width: 100%;
	display: block;
}
.bto-intro .bto-logo {
	margin-bottom: 22px;
}
.bto-intro .bto-logo-img {
	max-width: min(100%, 280px);
}
.bto-results .bto-logo-img {
	max-width: min(100%, 230px);
}

/* --- Intro / landing ---------------------------------------- */
.bto-intro {
	text-align: center;
}
/* clamp() so the headline scales with the viewport instead of relying on a
   media-query override — the !important needed to beat theme styles would
   otherwise win at every breakpoint. */
.bto-title {
	margin: clamp(24px, 5vw, 3rem) 0 11px;
	font-size: clamp(28px, 6.2vw, 4.5rem) !important;
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--bto-navy);
	text-wrap: balance;
}
.bto-tm {
	color: var(--bto-pink);
	font-size: 0.42em;
	font-weight: 700;
	vertical-align: super;
	margin-left: 2px;
}
.bto-subtitle {
	margin: 0 auto 40px;
	max-width: 760px;
	color: var(--bto-muted);
	font-size: clamp(15.5px, 2.2vw, 18px);
	line-height: 1.6;
}

/* Feature cards (Takes / Get Results / Personalized) */
.bto-intro-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	text-align: left;
	width: 100%;
	max-width: 900px;
	margin: 0 auto clamp(28px, 5vw, 4rem);
}
.bto-feature-card {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--bto-bg);
	border: 1px solid var(--bto-border);
	border-radius: var(--bto-radius-md);
	padding: 18px 20px;
	box-shadow: var(--bto-shadow-sm);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.bto-feature-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(6, 19, 61, 0.1);
	border-color: #d9dcec;
}
.bto-feature-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--bto-pink-soft);
	color: var(--bto-pink);
}
.bto-feature-icon svg {
	width: 24px;
	height: 24px;
}
.bto-feature-text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
}
.bto-feature-label {
	font-size: 16px;
	color: var(--bto-muted);
	font-weight: 600;
}
.bto-feature-value {
	font-size: 20px;
	font-weight: 800;
	color: var(--bto-navy);
}

/* Highlight banner */
.bto-intro-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	border: 1px solid #e2e6f5;
	border-radius: var(--bto-radius-md);
	padding: 20px 24px;
	width: 100%;
	max-width: 90%;
	margin: 0 auto 32px;
	text-align: center;
	justify-content: center;
}
.bto-banner-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--bto-pink);
}
.bto-banner-icon svg {
	width: 30px;
	height: 30px;
}
.bto-intro-banner p {
	margin: 0;
	font-size: clamp(15px, 2.2vw, 18px);
	font-weight: 600;
	color: var(--bto-navy);
}

/* --- Intro lead-capture form -------------------------------
   The details are collected up front, before the assessment
   starts, so the quiz ends straight on the results. --------- */
.bto-intro-form {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	text-align: center;
}
.bto-lead-fields {
	display: grid;
	gap: 14px;
	margin-bottom: 22px;
	text-align: left;
}
.bto-input {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--bto-bg);
	border: 1.5px solid #e7eaf3;
	border-radius: 14px;
	padding: 6px 16px 6px 12px;
	box-shadow: var(--bto-shadow-sm);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.bto-input:focus-within {
	border-color: var(--bto-pink);
	box-shadow: 0 0 0 4px var(--bto-pink-soft);
}
.bto-input-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--bto-pink-soft);
	color: var(--bto-pink);
}
.bto-input-icon svg {
	width: 21px;
	height: 21px;
}
.bto-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(--bto-text);
	line-height: 1.3;
}
.bto-input input::placeholder {
	color: #9aa3ba;
	font-weight: 600;
	opacity: 1;
}
.bto-input:has(input.bto-invalid) {
	border-color: #e02424;
	box-shadow: 0 0 0 3px rgba(224, 36, 36, 0.12);
}
.bto-intro-form .bto-step-error {
	text-align: left;
	margin: 0 0 18px;
}
.bto-trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 16px 0 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--bto-muted);
}
.bto-trust-icon {
	flex: none;
	display: inline-flex;
	color: var(--bto-navy);
}
.bto-trust-icon svg {
	width: 18px;
	height: 18px;
}

.bto-btn-start {
	min-width: 300px;
	max-width: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #ff1a8c 0%, #ff5aa7 100%) !important;
	box-shadow: 0 14px 30px rgba(255, 20, 130, 0.35);
}
.bto-btn-start:hover {
	background: linear-gradient(90deg, #ff2e97 0%, #ff6cb0 100%) !important;
	box-shadow: 0 16px 34px rgba(255, 20, 130, 0.42);
}
.bto-btn-arrow {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}
.bto-btn:hover .bto-btn-arrow {
	transform: translateX(3px);
}

/* "What you will get" benefit cards */
.bto-intro-benefits {
	margin-top: 52px;
}
.bto-benefits-title {
	margin: 0 0 24px;
	font-size: 25px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--bto-navy);
}
.bto-benefit-cards {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
}
.bto-benefit-card {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	background: var(--bto-bg);
	border: 1px solid var(--bto-border);
	border-radius: var(--bto-radius-md);
	padding: 22px 14px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--bto-muted);
	box-shadow: var(--bto-shadow-sm);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bto-benefit-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 22px rgba(6, 19, 61, 0.1);
}
.bto-benefit-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: var(--bto-pink-soft);
	color: var(--bto-pink);
}
.bto-benefit-icon svg {
	width: 23px;
	height: 23px;
}
.bto-benefit-card p {
	margin: 0;
}
.bto-benefit-bonus {
	background: linear-gradient(160deg, #ffffff, var(--bto-pink-card));
	border-color: #ffd3e8;
}
.bto-benefit-bonus .bto-benefit-icon {
	background: var(--bto-pink);
	color: #ffffff;
}
.bto-benefit-bonus strong {
	display: block;
	color: var(--bto-pink-text);
	font-size: 14px;
	margin-bottom: 2px;
}

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

/* --- Section head ------------------------------------------ */
/* Base hierarchy (used by the lead-capture step). */
.bto-section-head {
	margin-bottom: 26px;
}
.bto-section-title {
	margin: 0 0 6px;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--bto-navy);
}
.bto-section-subtitle {
	margin: 0;
	color: var(--bto-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. */
.bto-section .bto-section-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--bto-pink-text);
	margin: 0 0 8px;
}
.bto-section .bto-section-subtitle {
	font-size: 25px;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.25;
	color: var(--bto-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. ------------------------------- */
.bto-questions {
	display: block;
}
.bto-matrix-head,
.bto-question {
	display: flex;
	align-items: center;
	gap: 24px;
}
.bto-matrix-head-spacer,
.bto-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. */
.bto-matrix-head-scale,
.bto-scale {
	flex: none;
	display: flex;
	gap: 10px;
	margin-left: auto;
}
.bto-matrix-head-col,
.bto-scale-option {
	width: var(--bto-scale-col);
	display: flex;
	align-items: center;
	justify-content: center;
}
.bto-matrix-head {
	align-items: flex-end;
	padding: 0 4px 14px;
	margin-bottom: 6px;
	border-bottom: 2px solid var(--bto-border);
}
.bto-matrix-head-col {
	text-align: center;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--bto-navy);
}
.bto-question {
	padding: 12px 4px;
	margin: 0;
	border: none;
	background: transparent;
	border-radius: var(--bto-radius-sm);
	border-bottom: 1px solid #eef0f7;
	transition: background 0.18s ease, box-shadow 0.18s ease;
}
.bto-question:last-child {
	border-bottom: none;
}
.bto-question:hover {
	background: #fafbff;
}
.bto-question.bto-invalid {
	background: #fff5f5;
	box-shadow: inset 0 0 0 1.5px rgba(224, 36, 36, 0.4);
}
.bto-question-text {
	margin: 0;
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--bto-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. */
.bto-scale-option {
	cursor: pointer;
	padding: 4px 0;
	margin: 0;
}
.bto-scale-option input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.bto-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;
}
.bto-scale-option:hover .bto-scale-btn {
	border-color: var(--bto-pink);
	background: var(--bto-pink-soft);
	color: var(--bto-pink-text);
	transform: translateY(-2px);
}
.bto-scale-option:has(input:checked) .bto-scale-btn {
	border-color: var(--bto-pink);
	background: var(--bto-pink);
	color: #ffffff;
	box-shadow: 0 6px 14px rgba(255, 14, 128, 0.35);
	transform: translateY(-2px);
}
.bto-scale-option input:focus-visible + .bto-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). */
.bto-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;
}

/* --- Multiple-choice answers --------------------------------
   The question itself is the step heading, so each answer becomes
   a full-width, tappable row — [A] Answer text — at every width.
   It reuses the answer-button styling above: grey when idle, pink
   when hovered or chosen. ----------------------------------- */
.bto-question-choice {
	display: block;
	padding: 0;
	border-bottom: none;
}
.bto-question-choice:hover {
	background: transparent;
}
.bto-question-choice.bto-invalid {
	padding: 14px;
	border-radius: var(--bto-radius-sm);
}
.bto-choices {
	flex-direction: column;
	gap: 12px;
	width: 100%;
	margin-left: 0;
}
.bto-choice {
	width: 100%;
	justify-content: flex-start;
	gap: 14px;
	padding: 14px 16px;
	border: 1.5px solid var(--bto-border);
	border-radius: var(--bto-radius-sm);
	background: var(--bto-bg);
	transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.bto-choice:hover {
	border-color: var(--bto-pink);
	background: var(--bto-pink-soft);
}
.bto-choice:has(input:checked) {
	border-color: var(--bto-pink);
	background: var(--bto-pink-soft);
	box-shadow: 0 6px 16px rgba(255, 14, 128, 0.15);
}
.bto-choice .bto-scale-btn {
	flex: none;
	width: 36px;
	height: 36px;
	font-size: 14px;
}
/* The row itself carries the selected state, so the letter badge
   stays put instead of lifting the way the matrix buttons do. */
.bto-choice:hover .bto-scale-btn,
.bto-choice:has(input:checked) .bto-scale-btn {
	transform: none;
}
.bto-choice:has(input:checked) .bto-scale-btn {
	box-shadow: none;
}
/* Answer text is visible here — it is the answer, not a column label. */
.bto-choice .bto-scale-text {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	text-align: left;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--bto-navy);
}

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

/* --- Buttons / nav ----------------------------------------- */
.bto-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 28px;
}
.bto-nav .bto-btn-primary {
	margin-left: auto;
}
.bto-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;
}
.bto-btn:focus-visible {
	outline: 3px solid rgba(255, 14, 128, 0.45);
	outline-offset: 2px;
}
.bto-btn:active {
	transform: translateY(1px);
}
.bto-btn-primary {
	background: var(--bto-pink) !important;
	color: #ffffff;
	box-shadow: var(--bto-shadow-pink);
}
.bto-btn-primary:hover {
	background: var(--bto-pink-dark);
	transform: translateY(-1px);
	box-shadow: 0 12px 26px rgba(255, 14, 128, 0.38);
}
.bto-btn-primary:active {
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(255, 14, 128, 0.3);
}
.bto-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}
.bto-btn-ghost {
	background: transparent;
	color: var(--bto-navy);
	border: 1px solid var(--bto-border);
}
.bto-btn-ghost:hover {
	background: var(--bto-navy-soft);
	border-color: #c6cde4;
}

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

/* --- Loading ----------------------------------------------- */
.bto-loading {
	text-align: center;
	padding: 64px 32px;
	color: var(--bto-muted);
	font-weight: 600;
	font-size: 16px;
}
.bto-spinner {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 4px solid var(--bto-pink-soft);
	border-top-color: var(--bto-pink);
	margin: 0 auto 20px;
	animation: bto-spin 0.8s linear infinite;
}
@keyframes bto-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. */
.bto-app .bto-results-panel {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}

.bto-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/). */
.bto-result-hero {
	position: relative;
	overflow: hidden;
	/* Navy → purple diagonal with a soft magenta glow in the top-right. */
	background-color: var(--bto-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(--bto-radius);
	padding: 40px 36px;
	box-shadow: var(--bto-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. */
.bto-hero-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
}
.bto-hero-main {
	min-width: 0;
	max-width: 360px;
}
.bto-hero-eyebrow {
	margin: 0 0 10px;
	color: var(--bto-on-navy);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.bto-hero-title {
	margin: 0 0 10px;
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: #ffffff;
}
.bto-hero-benchmark {
	margin: 0;
	color: var(--bto-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. */
.bto-hero-badges {
	justify-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.bto-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;
}
.bto-hero-badge-standing {
	color: var(--bto-band-color);
	border-color: var(--bto-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. */
.bto-gauge {
	position: relative;
	justify-self: center;
	width: 172px;
	height: 172px;
	display: grid;
	place-items: center;
}
.bto-gauge-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.bto-gauge-track {
	fill: none;
	stroke: rgba(255, 255, 255, 0.14);
	stroke-width: 9;
}
.bto-gauge-arc {
	fill: none;
	stroke: var(--bto-band-color);
	stroke-width: 9;
	stroke-linecap: round;
	stroke-dasharray: 326.73;
	stroke-dashoffset: var(--bto-dashoffset, 326.73);
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	animation: bto-gauge-arc 1.2s cubic-bezier(0.22, 0.8, 0.36, 1) both;
}
@keyframes bto-gauge-arc {
	from { stroke-dashoffset: 326.73; }
}
.bto-gauge-center {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.bto-gauge-score {
	font-size: 46px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #ffffff;
}
.bto-gauge-max {
	font-size: 12px;
	color: var(--bto-on-navy);
	font-weight: 600;
	margin-top: 5px;
}

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

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

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

/* Legend under the traffic rows */
.bto-traffic-legend {
	list-style: none;
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--bto-border);
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.bto-traffic-legend li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bto-muted);
}
.bto-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. ---------------- */
.bto-stage-scale {
	margin-top: 6px;
}
.bto-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. */
.bto-stage-divider {
	position: absolute;
	top: -4px;
	bottom: -4px;
	width: 2px;
	background: rgba(255, 255, 255, 0.85);
	transform: translateX(-50%);
	border-radius: 2px;
}
.bto-stage-you {
	position: absolute;
	bottom: calc(100% + 10px);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 2;
}
.bto-stage-you-flag {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 34px;
	padding: 5px 12px;
	background: var(--bto-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);
}
.bto-stage-you-flag::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--bto-navy);
}
.bto-stage-legend {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--bto-stage-count, 5), 1fr);
	gap: 6px;
}
.bto-stage-legend-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 6px;
	border-radius: var(--bto-radius-sm);
	text-align: center;
	font-size: 12.5px;
	line-height: 1.3;
	border: 1px solid transparent;
}
.bto-stage-legend-dot {
	display: none;
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--bto-stage-color, var(--bto-pink));
}
.bto-stage-legend-score {
	font-weight: 800;
	font-size: 15px;
	color: var(--bto-navy);
	font-variant-numeric: tabular-nums;
}
.bto-stage-legend-label {
	color: var(--bto-muted);
	font-weight: 600;
}
/* The stage the score is closest to. */
.bto-stage-legend-item.is-current {
	background: var(--bto-pink-soft);
	border-color: #ffd3e8;
}
.bto-stage-legend-item.is-current .bto-stage-legend-score {
	color: var(--bto-pink-text);
}
.bto-stage-legend-item.is-current .bto-stage-legend-label {
	color: var(--bto-navy);
	font-weight: 800;
}

/* --- "We have emailed this to you" confirmation -------------- */
/* Sits between the hero and the write-up, and is only rendered when the
   result email actually went out — so it never promises an email that
   failed to send. */
.bto-result-emailed {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 14px 18px;
	border-radius: var(--bto-radius-md);
	border: 1px solid var(--bto-border);
	background: var(--bto-surface);
	color: var(--bto-muted);
	font-size: 14.5px;
	line-height: 1.5;
}
.bto-result-emailed strong {
	color: var(--bto-text);
	word-break: break-word;
}
.bto-result-emailed-icon {
	flex: none;
	display: flex;
	width: 20px;
	height: 20px;
	color: var(--bto-pink);
}
.bto-result-emailed-icon svg {
	width: 100%;
	height: 100%;
}

/* --- Results call-to-action --------------------------------- */
.bto-result-cta {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: clamp(28px, 5vw, 44px) clamp(20px, 4vw, 40px);
	border-radius: var(--bto-radius);
	color: #ffffff;
	background-color: var(--bto-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(--bto-shadow);
}
.bto-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;
}
.bto-cta-icon svg {
	width: 26px;
	height: 26px;
}
.bto-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;
}
.bto-cta-text {
	margin: 0 auto 24px;
	max-width: 560px;
	color: var(--bto-on-navy);
	font-size: clamp(14.5px, 2.2vw, 16px);
	line-height: 1.6;
}
.bto-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;
}
.bto-cta-btn:hover {
	background: linear-gradient(90deg, #ff2e97 0%, #ff6cb0 100%) !important;
	transform: translateY(-1px);
}
.bto-cta-note {
	margin: 16px 0 0;
	font-size: 13px;
	color: var(--bto-on-navy);
}

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

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

/* Benefit cards step down before they get cramped */
@media (max-width: 800px) {
	.bto-benefit-cards {
		grid-template-columns: repeat(3, 1fr);
	}
	/* Stage labels get tight well before phone widths. */
	.bto-stage-legend-item {
		font-size: 11.5px;
		padding: 8px 4px;
	}
	.bto-stage-legend-score {
		font-size: 14px;
	}
}

@media (max-width: 640px) {
	.bto-app {
		padding: 4px;
	}
	.bto-progress {
		margin-bottom: 22px;
	}
	.bto-progress-label,
	.bto-progress-pct {
		font-size: 13px;
	}
	.bto-intro-features {
		grid-template-columns: 1fr;
	}
	.bto-feature-card {
		padding: 14px 16px;
	}
	.bto-intro-banner {
		padding: 16px 18px;
		gap: 12px;
		flex-direction: column;
	}
	.bto-btn-start {
		min-width: 0;
		width: 100%;
	}
	.bto-intro-benefits {
		margin-top: 40px;
	}
	.bto-benefits-title {
		font-size: 21px;
	}
	.bto-benefit-cards {
		grid-template-columns: 1fr 1fr;
	}
	.bto-section .bto-section-subtitle {
		font-size: clamp(19px, 5vw, 21px);
	}
	.bto-section-head {
		margin-bottom: 20px;
	}

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

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

	.bto-results {
		gap: 16px;
	}
	.bto-result-hero {
		padding: 30px 20px;
	}
	.bto-hero-inner {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: 22px;
	}
	.bto-hero-main {
		max-width: none;
		text-align: center;
	}
	.bto-hero-badges {
		order: -1;
		grid-column: auto;
		justify-self: center;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
	.bto-hero-badge {
		white-space: normal;
	}
	.bto-gauge {
		width: 152px;
		height: 152px;
	}
	.bto-gauge-score {
		font-size: 40px;
	}
	.bto-hero-title {
		font-size: clamp(26px, 7vw, 30px);
	}
	.bto-result-card {
		padding: 22px 18px;
	}
	.bto-card-head {
		gap: 12px;
		margin-bottom: 18px;
	}
	.bto-card-title {
		font-size: 18px;
	}
	.bto-band-head {
		align-items: flex-start;
	}
	.bto-band-summary {
		font-size: 17px;
	}
	.bto-band-icon {
		width: 44px;
		height: 44px;
	}
	.bto-band-icon svg {
		width: 24px;
		height: 24px;
	}
	.bto-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. */
	.bto-traffic-row {
		grid-template-columns: 1fr auto;
		gap: 6px 12px;
		padding: 10px 2px;
	}
	.bto-traffic-name {
		grid-column: 1 / -1;
	}
	.bto-traffic-label {
		font-size: 14px;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}
	.bto-traffic-legend {
		gap: 10px 16px;
	}

	/* The five stage columns become a readable stacked list. */
	.bto-stage-track {
		margin-top: 52px;
	}
	.bto-stage-legend {
		grid-template-columns: 1fr;
		gap: 4px;
		margin-top: 18px;
	}
	.bto-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;
	}
	.bto-stage-legend-dot {
		display: block;
	}
	.bto-stage-legend-score {
		min-width: 30px;
		font-size: 14px;
	}

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

/* Small phones */
@media (max-width: 430px) {
	.bto-benefit-cards {
		grid-template-columns: 1fr;
	}
	.bto-benefit-card {
		flex-direction: row;
		align-items: center;
		text-align: left;
		padding: 14px;
	}
	.bto-benefit-icon {
		width: 40px;
		height: 40px;
	}
	.bto-benefit-icon svg {
		width: 20px;
		height: 20px;
	}
	.bto-input {
		padding: 4px 12px 4px 8px;
		gap: 10px;
	}
	.bto-input-icon {
		width: 34px;
		height: 34px;
	}
	.bto-input-icon svg {
		width: 18px;
		height: 18px;
	}
	.bto-input input {
		padding: 12px 0;
	}
	.bto-trust {
		font-size: 13px;
	}
	.bto-gauge {
		width: 136px;
		height: 136px;
	}
	.bto-gauge-score {
		font-size: 34px;
	}
	.bto-hero-badge {
		font-size: 11.5px;
		padding: 6px 12px;
	}
	.bto-result-card {
		padding: 20px 14px;
	}
	.bto-traffic-legend {
		gap: 8px 14px;
	}
	.bto-traffic-legend li {
		font-size: 12.5px;
	}
}

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