/* SUSBIO STP ROI & Payback Calculator — mobile-first front-end styles */

.susbio-roi {
	--susbio-navy: #14304F;
	--susbio-primary: #1A6E47;
	--susbio-primary-2: #2E9C64;
	--susbio-primary-3: #3FB27A;
	--susbio-accent: #B37806;
	--susbio-accent-bg: #FDF3DC;
	--susbio-accent-br: #F4DFB0;
	--susbio-muted: #5F7284;
	--susbio-panel: #F6FBF8;
	--susbio-border: #DCEDE4;
	--susbio-card-br: #E7EDEA;
	--susbio-page-bg: #FFFFFF;
	--susbio-radius: 18px;
	--susbio-max: 1120px;
	--susbio-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: min(var(--susbio-max), 100%);
	margin-left: auto;
	margin-right: auto;
	padding: 24px 12px;
	background: var(--susbio-page-bg);
	font-family: var(--susbio-font);
	color: var(--susbio-navy);
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

.susbio-roi p,
.susbio-roi h3,
.susbio-roi span,
.susbio-roi strong,
.susbio-roi summary,
.susbio-roi td,
.susbio-roi th { overflow-wrap: break-word; }

.susbio-roi *,
.susbio-roi *::before,
.susbio-roi *::after { box-sizing: border-box; }

.susbio-roi p { margin: 0; }

/* ---------- Heading ---------- */

.susbio-roi__head {
	display: flex;
	flex-direction: column;
	margin-bottom: 26px;
}
.susbio-roi__head--center { align-items: center; text-align: center; }
.susbio-roi__head--left { align-items: flex-start; text-align: left; }

.susbio-roi__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 800 11px/1 var(--susbio-font);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--susbio-accent);
	background: var(--susbio-accent-bg);
	border: 1px solid var(--susbio-accent-br);
	padding: 9px 16px 9px 12px;
	border-radius: 99px;
}
.susbio-roi__dot {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.susbio-roi__title {
	font: 800 clamp(30px, 7.4vw, 52px)/1.04 var(--susbio-font);
	letter-spacing: -.035em;
	color: var(--susbio-navy);
	margin: 18px 0 0;
	max-width: 15ch;
	text-wrap: balance;
}
.susbio-roi__head--left .susbio-roi__title { max-width: 18ch; }

.susbio-roi__accent {
	background: linear-gradient(100deg, var(--susbio-primary), var(--susbio-primary-2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.susbio-roi__rule {
	display: block;
	width: 52px;
	height: 3px;
	border-radius: 99px;
	background: linear-gradient(90deg, #E0A21B, var(--susbio-primary-3));
	margin: 18px 0 0;
}

.susbio-roi__sub {
	font: 400 clamp(14.5px, 2vw, 17px)/1.65 var(--susbio-font);
	color: var(--susbio-muted);
	margin: 18px 0 0;
	max-width: 58ch;
	text-wrap: pretty;
}

.susbio-roi__answer {
	font: 500 clamp(14px, 1.9vw, 16px)/1.65 var(--susbio-font);
	color: var(--susbio-navy);
	background: var(--susbio-panel);
	border-left: 3px solid var(--susbio-primary-2);
	border-radius: 0 10px 10px 0;
	padding: 14px 16px;
	margin: 0 0 18px;
	text-wrap: pretty;
}

/* ---------- Card ---------- */

.susbio-roi__card {
	background: #fff;
	border: 1px solid var(--susbio-card-br);
	border-radius: var(--susbio-radius);
	overflow: hidden;
	box-shadow: 0 22px 48px -30px rgba(20, 48, 79, .34);
}

.susbio-roi__bar {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px;
	background: linear-gradient(100deg, var(--susbio-primary) 0%, var(--susbio-primary-2) 58%, var(--susbio-primary-3) 100%);
	color: #fff;
}
.susbio-roi__bar-icon {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: rgba(255, 255, 255, .18);
	border: 1px solid rgba(255, 255, 255, .28);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.susbio-roi__bar-text { display: block; min-width: 0; flex: 1 1 auto; }
.susbio-roi__bar-text strong {
	display: block;
	font: 700 clamp(16px, 2.2vw, 19px)/1.25 var(--susbio-font);
	color: #fff;
}
.susbio-roi__bar-text span {
	display: block;
	font: 400 13px/1.35 var(--susbio-font);
	color: rgba(255, 255, 255, .88);
	margin-top: 2px;
}

.susbio-roi__grid { display: grid; grid-template-columns: minmax(0, 1fr); }

.susbio-roi__inputs { min-width: 0; padding: 18px 16px; }
.susbio-roi__results { min-width: 0; padding: 18px 16px; background: var(--susbio-panel); }

/* ---------- Inputs ---------- */

.susbio-roi__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 13px;
}
.susbio-roi__row--tight { margin-bottom: 3px; }

.susbio-roi__label {
	font: 700 11.5px/1.3 var(--susbio-font);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--susbio-navy);
}
.susbio-roi__value {
	font: 700 16px/1 var(--susbio-font);
	color: var(--susbio-primary);
}
.susbio-roi__help {
	font: 400 12.5px/1.5 var(--susbio-font);
	color: var(--susbio-muted);
	margin: 0 0 11px;
}

.susbio-roi__chips {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 28px;
}
.susbio-roi__chip {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	min-width: 0;
	min-height: 50px;
	padding: 12px 4px;
	border-radius: 11px;
	text-align: center;
	font-family: inherit;
	background: var(--susbio-panel);
	color: var(--susbio-navy);
	border: 1.5px solid var(--susbio-border);
	transition: background .14s, border-color .14s, box-shadow .14s, color .14s;
}
.susbio-roi__chip:hover { border-color: var(--susbio-primary-2); }
.susbio-roi__chip:focus-visible { outline: 3px solid var(--susbio-primary-3); outline-offset: 2px; }
.susbio-roi__chip.is-active {
	background: linear-gradient(100deg, var(--susbio-primary), var(--susbio-primary-2));
	color: #fff;
	border-color: var(--susbio-primary);
	box-shadow: 0 5px 13px -5px rgba(26, 110, 71, .55);
}
.susbio-roi__chip-n { display: block; font: 700 16px/1 var(--susbio-font); }
.susbio-roi__chip-u { display: block; font: 600 9.5px/1 var(--susbio-font); letter-spacing: .1em; opacity: .62; margin-top: 4px; }

.susbio-roi__range {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 30px;
	margin: 0;
	background: transparent;
	cursor: pointer;
}
.susbio-roi__range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: #DFF0E7; }
.susbio-roi__range::-moz-range-track { height: 6px; border-radius: 99px; background: #DFF0E7; }
.susbio-roi__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 28px;
	width: 28px;
	margin-top: -11px;
	border-radius: 50%;
	background: var(--susbio-primary);
	border: 5px solid #fff;
	box-shadow: 0 2px 9px rgba(20, 48, 79, .26);
}
.susbio-roi__range::-moz-range-thumb {
	height: 18px;
	width: 18px;
	border-radius: 50%;
	background: var(--susbio-primary);
	border: 5px solid #fff;
	box-shadow: 0 2px 9px rgba(20, 48, 79, .26);
}
.susbio-roi__range:focus-visible { outline: 3px solid var(--susbio-primary-3); outline-offset: 4px; border-radius: 99px; }

.susbio-roi__scale {
	display: flex;
	justify-content: space-between;
	font: 600 11px/1 var(--susbio-font);
	color: var(--susbio-muted);
	margin-bottom: 28px;
}
.susbio-roi__scale--last { margin-bottom: 0; }

/* ---------- Results ---------- */

.susbio-roi__payback {
	min-width: 0;
	background: #fff;
	border: 1px solid var(--susbio-border);
	border-radius: 14px;
	padding: 18px;
	margin-bottom: 12px;
}
.susbio-roi__kicker {
	display: block;
	font: 700 11.5px/1.3 var(--susbio-font);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--susbio-muted);
	margin-bottom: 12px;
}
.susbio-roi__big {
	display: flex;
	align-items: baseline;
	gap: 9px;
	flex-wrap: wrap;
	margin: 0;
}
.susbio-roi__big strong {
	font: 800 clamp(44px, 9vw, 68px)/.88 var(--susbio-font);
	letter-spacing: -.035em;
	color: var(--susbio-primary);
}
.susbio-roi__big span {
	font: 600 clamp(15px, 2.3vw, 18px)/1 var(--susbio-font);
	color: var(--susbio-muted);
}
.susbio-roi__note {
	font: 400 13px/1.55 var(--susbio-font);
	color: var(--susbio-muted);
	margin: 10px 0 0;
	text-wrap: pretty;
}

.susbio-roi__tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
}
.susbio-roi__tile {
	min-width: 0;
	background: #fff;
	border: 1px solid var(--susbio-border);
	border-radius: 13px;
	padding: 15px 14px;
}
.susbio-roi__tile-k {
	display: block;
	font: 700 9.5px/1.3 var(--susbio-font);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--susbio-muted);
	margin-bottom: 8px;
}
.susbio-roi__tile-v {
	display: block;
	font: 800 clamp(18px, 2.8vw, 22px)/1 var(--susbio-font);
	color: var(--susbio-navy);
}

.susbio-roi__fine {
	font: 400 11.5px/1.55 var(--susbio-font);
	color: #55677A;
	margin: 14px 0 0;
	text-wrap: pretty;
}

/* ---------- CTA ---------- */

.susbio-roi__cta {
	border-top: 1px solid #EDF2F0;
	padding: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}
.susbio-roi__cta p {
	flex: 1 1 100%;
	min-width: 0;
	font: 400 12.5px/1.55 var(--susbio-font);
	color: var(--susbio-muted);
	text-wrap: pretty;
}
.susbio-roi__btn {
	flex: 1 1 100%;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 52px;
	font: 700 15px/1.2 var(--susbio-font);
	color: #fff;
	background: linear-gradient(100deg, var(--susbio-primary), var(--susbio-primary-2));
	border-radius: 11px;
	padding: 16px 26px;
	text-decoration: none;
	transition: filter .15s;
}
.susbio-roi__btn:hover,
.susbio-roi__btn:focus { color: #fff; text-decoration: none; filter: brightness(.92); }
.susbio-roi__btn:focus-visible { outline: 3px solid var(--susbio-primary-3); outline-offset: 3px; }

/* ---------- Info cards ---------- */

.susbio-roi__info {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	margin-top: 12px;
}
.susbio-roi__info-card {
	min-width: 0;
	background: var(--susbio-panel);
	border: 1px solid #E3EFE9;
	border-radius: 15px;
	padding: 17px;
}
.susbio-roi__info-card h3 {
	font: 700 15px/1.3 var(--susbio-font);
	color: var(--susbio-navy);
	margin: 0 0 9px;
}
.susbio-roi__info-card p {
	font: 400 13.5px/1.6 var(--susbio-font);
	color: var(--susbio-muted);
	text-wrap: pretty;
}
.susbio-roi__info-card a {
	display: inline-block;
	margin-top: 11px;
	font: 700 13.5px/1 var(--susbio-font);
	color: var(--susbio-primary);
}

/* ---------- Price table ---------- */

.susbio-roi__table-wrap { margin-top: 26px; }
.susbio-roi__table-title {
	font: 800 clamp(18px, 3.2vw, 23px)/1.25 var(--susbio-font);
	color: var(--susbio-navy);
	margin: 0 0 12px;
	letter-spacing: -.02em;
}
.susbio-roi__table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--susbio-border);
	border-radius: 14px;
}
.susbio-roi__table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font: 400 13.5px/1.5 var(--susbio-font);
	background: #fff;
}
.susbio-roi__table th,
.susbio-roi__table td {
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid #EDF4F0;
	color: var(--susbio-navy);
}
.susbio-roi__table thead th {
	font: 700 11px/1.3 var(--susbio-font);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--susbio-muted);
	background: var(--susbio-panel);
	white-space: nowrap;
}
.susbio-roi__table tbody th { font-weight: 700; white-space: nowrap; }
.susbio-roi__table tbody tr:last-child th,
.susbio-roi__table tbody tr:last-child td { border-bottom: 0; }
.susbio-roi__table td:last-child { font-weight: 700; white-space: nowrap; }

/* ---------- FAQ ---------- */

.susbio-roi__faq { margin-top: 26px; }
.susbio-roi__faq-title {
	font: 800 clamp(18px, 3.2vw, 23px)/1.25 var(--susbio-font);
	color: var(--susbio-navy);
	margin: 0 0 12px;
	letter-spacing: -.02em;
}
.susbio-roi__faq-item {
	border: 1px solid var(--susbio-border);
	border-radius: 12px;
	background: #fff;
	margin-bottom: 8px;
	overflow: hidden;
}
.susbio-roi__faq-item summary {
	cursor: pointer;
	list-style: none;
	padding: 15px 44px 15px 16px;
	position: relative;
	font: 700 14.5px/1.45 var(--susbio-font);
	color: var(--susbio-navy);
}
.susbio-roi__faq-item summary::-webkit-details-marker { display: none; }
.susbio-roi__faq-item summary::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -6px;
	border-right: 2px solid var(--susbio-primary-2);
	border-bottom: 2px solid var(--susbio-primary-2);
	transform: rotate(45deg);
	transition: transform .18s;
}
.susbio-roi__faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.susbio-roi__faq-item summary:focus-visible { outline: 3px solid var(--susbio-primary-3); outline-offset: -3px; }
.susbio-roi__faq-a { padding: 0 16px 16px; }
.susbio-roi__faq-a p {
	font: 400 13.5px/1.65 var(--susbio-font);
	color: var(--susbio-muted);
	text-wrap: pretty;
}

.susbio-roi .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Breakpoints ---------- */

@media (max-width: 359px) {
	.susbio-roi { padding: 20px 10px; }
	.susbio-roi__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.susbio-roi__tiles { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 420px) {
	.susbio-roi { padding: 28px 16px; }
	.susbio-roi__inputs,
	.susbio-roi__results,
	.susbio-roi__cta { padding: 22px 20px; }
	.susbio-roi__bar { padding: 18px 20px; }
	.susbio-roi__payback { padding: 20px; }
}

@media (min-width: 600px) {
	.susbio-roi { padding: 36px 24px; }
	.susbio-roi__chips { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.susbio-roi__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.susbio-roi__info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.susbio-roi__cta p { flex: 1 1 260px; }
	.susbio-roi__btn { flex: 0 1 auto; }
}

@media (min-width: 900px) {
	.susbio-roi { padding: 56px 32px; }
	.susbio-roi__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.susbio-roi__inputs,
	.susbio-roi__results { padding: 30px; }
	.susbio-roi__cta { padding: 24px 30px; }
	.susbio-roi__bar { padding: 22px 28px; }
	.susbio-roi__head { margin-bottom: 40px; }
	.susbio-roi__chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.susbio-roi__info { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
}

@media (min-width: 1100px) {
	.susbio-roi { padding: 64px 40px; }
	.susbio-roi__chips { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.susbio-roi * { transition: none !important; }
}