/**
 * ParentSquare ROI Calculators — brand styles (scoped to .ps-roi).
 * Palette: brand green #68E246 · dark green #224b17 · near-black green #11250b
 *          light surface #e5fae0 · muted #c0dd97 · CTA bar #ccf5c1
 */

.ps-roi {
	/* Default colorway: PSQ Green. Other colorways override these below
	   via [data-colorway="..."]; all values come from the brand ramps. */
	--ps-green: #68E246;        /* accent (buttons, big stat numbers)   */
	--ps-green-dark: #224b17;   /* results panel, CTA button, labels    */
	--ps-green-darkest: #11250b;/* stat tile background                 */
	--ps-surface: #e5fae0;      /* page/card surface                    */
	--ps-muted: #c0dd97;        /* labels/notes on the dark panel       */
	--ps-hint: #3B6D11;         /* helper text on white                 */
	--ps-cta-bar: #ccf5c1;      /* CTA bar background                   */
	--ps-border: #c0dd97;       /* input borders                        */
	--ps-on-accent: #11250b;    /* text/icon color on the accent button */

	box-sizing: border-box;
	max-width: 800px;
	margin: 0 auto;
	padding: 30px;
	background: var(--ps-surface);
	border-radius: 20px;
	/* Inherit the site's body font (Inter via Typekit); fall back gracefully. */
	font-family: var(--font-body, "inter-variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
	color: var(--ps-green-darkest);
	-webkit-font-smoothing: antialiased;
}

/* Shared with the site's headings: Atyp display face + OpenType features. */
.ps-roi__title,
.ps-roi__results-title {
	font-family: var(--font-heading, "atyp-bl-variable", sans-serif);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -.02em;
	font-feature-settings: 'ss02' 1, 'ss03' 1, 'ss05' 1, 'ss06' 1, 'ss10' 1;
	font-variation-settings: 'opsz' 14;
	text-transform: none;
}

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

/* Header — logo intentionally omitted; the page template/wrapper handles brand mark. */
.ps-roi__intro {
	margin-bottom: 24px;
}

.ps-roi__eyebrow {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ps-green-dark);
	margin-bottom: 10px;
}
.ps-roi__title {
	font-size: clamp(2.125rem, 1.885rem + .962vw, 2.5rem);
	color: #000;
	margin: 0 0 14px;
}
.ps-roi__blurb {
	font-size: clamp(1rem, .92rem + .35vw, 1.125rem);
	line-height: 1.5;
	color: var(--ps-green-dark);
	margin: 0;
	max-width: 75%;
}

/* Input card */
.ps-roi__card {
	background: #fff;
	border-radius: 14px;
	padding: 24px;
	margin: 0;
}
.ps-roi__instructions {
	margin: 0 0 18px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ps-green-dark);
}
.ps-roi__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 24px;
}
.ps-roi__field {
	display: flex;
	flex-direction: column;
}
.ps-roi__field label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ps-green-dark);
	margin-bottom: 7px;
}
.ps-roi__input {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	font-size: 15px;
	font-family: inherit;
	color: #000;
	background: #fff;
	border: 1px solid var(--ps-border);
	border-radius: 8px;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ps-roi__input:focus {
	outline: none;
	border-color: var(--ps-green);
	border-width: 2px;
	box-shadow: 0 0 0 3px rgba(104, 226, 70, .18);
}
/* Placeholders read as clearly-an-example: darker gray (WCAG AA on white,
   ~7:1) and italic so it doesn't look like a real, pre-filled value. */
.ps-roi__input::placeholder {
	color: #5f5e5a;
	font-style: italic;
	opacity: 1; /* Firefox dims by default */
}
.ps-roi__input::-webkit-input-placeholder { color: #5f5e5a; font-style: italic; }
select.ps-roi__input {
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23224b17' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}
.ps-roi__inputwrap--prefix {
	position: relative;
}
.ps-roi__inputwrap--prefix .ps-roi__prefix {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 15px;
	color: #555;
	pointer-events: none;
}
.ps-roi__inputwrap--prefix .ps-roi__input {
	padding-left: 26px;
}
.ps-roi__inputwrap--suffix {
	position: relative;
}
.ps-roi__inputwrap--suffix .ps-roi__suffix {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 15px;
	color: #555;
	pointer-events: none;
}
.ps-roi__inputwrap--suffix .ps-roi__input {
	padding-right: 30px;
}
/* Entry-only number fields: hide the up/down spinner (it only nudged by 0.1). */
.ps-roi__input[type="number"]::-webkit-outer-spin-button,
.ps-roi__input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.ps-roi__input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}
.ps-roi__hint {
	font-size: 12px;
	color: var(--ps-hint);
	margin-top: 6px;
}

/* Buttons — match the CMS button: dark brand pill, 11px radius, arrow.
   Uses the colorway's dark shade (e.g. blue #053655) for AA-contrast white text. */
.ps-roi__calc,
.ps-roi__hsform .hs-button {
	display: inline-block;
	margin-top: 22px;
	padding: 15px 56px 15px 30px; /* extra right padding for the arrow */
	font-family: var(--font-body, "inter-variable", "Inter", sans-serif);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
	background-color: var(--ps-green-dark);
	border: 1px solid var(--ps-green-dark);
	border-radius: 11px;
	cursor: pointer;
	text-align: center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12' fill='none'%3E%3Cpath d='M11.5 1 16.5 6 11.5 11 M1 6 H16' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 26px center;
	transition: color .15s ease, background-position .15s ease;
}
.ps-roi__calc:hover,
.ps-roi__hsform .hs-button:hover {
	color: var(--ps-green); /* blue label on hover only */
	background-position: right 22px center;
}
.ps-roi__calc:active { transform: translateY(1px); }
.ps-roi__calc:focus-visible,
.ps-roi__hsform .hs-button:focus-visible {
	outline: 3px solid rgba(16, 163, 255, .5);
	outline-offset: 2px;
}

.ps-roi__error {
	margin: 12px 0 0;
	font-size: 13px;
	font-weight: 500;
	color: #b3261e;
}
.ps-roi__disclaimer {
	margin: 16px 0 0;
	font-size: 11px;
	line-height: 1.5;
	color: var(--ps-hint);
}

/* Results panel */
.ps-roi__results {
	margin-top: 20px;
	background: var(--ps-green-dark);
	border-radius: 14px;
	padding: 24px;
}
.ps-roi__results-title {
	font-size: clamp(1.75rem, 1.55rem + .8vw, 2.125rem);
	color: #fff;
	margin: 0 0 6px;
}
.ps-roi__results-sub {
	font-size: clamp(1rem, .92rem + .35vw, 1.125rem);
	line-height: 1.4;
	color: #fff;
	margin: 0 0 20px;
}
.ps-roi__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
}
.ps-roi__tile {
	background: var(--ps-green-darkest);
	border-radius: 10px;
	padding: 20px;
	display: flex;
	flex-direction: column;
}
.ps-roi__tile-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--ps-muted);
	line-height: 1.4;
}
.ps-roi__tile-value {
	font-family: var(--font-heading, "atyp-bl-variable", sans-serif);
	font-size: clamp(2.5rem, 2.1rem + 1.6vw, 3.25rem);
	font-weight: 500;
	letter-spacing: -.02em;
	font-variation-settings: 'opsz' 14;
	color: var(--ps-green);
	margin: 14px 0 10px;
	line-height: 1;
}
.ps-roi__tile-note {
	font-size: 15px;
	color: #fff;
	line-height: 1.4;
	margin-top: auto;
}

/* Email capture */
.ps-roi__email {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(192, 221, 151, .25);
}
.ps-roi__email label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 8px;
}
.ps-roi__email-row {
	display: flex;
	gap: 10px;
	max-width: 460px;
}
.ps-roi__email-row .ps-roi__input {
	flex: 1;
}
.ps-roi__email-btn {
	height: 44px;
	padding: 0 24px;
	font-size: 15px;
	font-weight: 500;
	font-family: inherit;
	color: #fff;
	background: var(--ps-green-dark);
	border: 1px solid var(--ps-green-dark);
	border-radius: 11px;
	cursor: pointer;
	transition: color .15s ease;
	white-space: nowrap;
}
.ps-roi__email-btn:hover { color: var(--ps-green); }

/* Embedded HubSpot form (new "hsfc" markup). HubSpot themes its form through
   --hsf-* CSS variables on its Renderer element; we override those within our
   scope so the form matches the dark panel + brand. Higher specificity than
   HubSpot's own [id][data-hsfc-id="Renderer"] rule, so no !important needed. */
.ps-roi__hsform { max-width: 460px; }
.ps-roi .ps-roi__hsform [data-hsfc-id="Renderer"] {
	/* Typography */
	--hsf-default-richtext__font-family: var(--font-body, "inter-variable", "Inter", sans-serif);
	--hsf-default-richtext__color: #ffffff;
	--hsf-default-field-label__font-family: var(--font-body, "inter-variable", "Inter", sans-serif);
	--hsf-default-field-label__color: #ffffff;
	--hsf-default-field-description__color: var(--ps-muted);
	/* Inputs */
	--hsf-default-field-input__font-family: var(--font-body, "inter-variable", "Inter", sans-serif);
	--hsf-default-field-input__background-color: #ffffff;
	--hsf-default-field-input__border-color: var(--ps-border);
	--hsf-default-field-input__border-radius: 8px 8px 8px 8px;
	--hsf-default-field-input__padding: 12px 14px 12px 14px;
	--hsf-default-field-input__placeholder-color: #5f5e5a;
	/* Submit button — dark brand pill, light tint label */
	--hsf-default-button__font-family: var(--font-body, "inter-variable", "Inter", sans-serif);
	--hsf-default-button__background-color: var(--ps-green-dark);
	--hsf-default-button--hover__background-color: var(--ps-green-dark);
	--hsf-default-button__color: var(--ps-muted);
	--hsf-default-button__border-radius: 11px 11px 11px 11px;
	--hsf-default-button__padding: 15px 30px 15px 30px;
	/* Alerts */
	--hsf-default-erroralert__color: #ffb3ad;
}
/* A couple of structural tweaks the variables don't cover. */
.ps-roi .ps-roi__hsform .hsfc-TextInput { width: 100%; box-sizing: border-box; }
.ps-roi .ps-roi__hsform .hsfc-FieldLabel__RequiredIndicator { color: var(--ps-muted); }
.ps-roi .ps-roi__hsform .hsfc-NavigationRow__Buttons { display: flex; justify-content: flex-start; }
/* Arrow on the submit button (HubSpot vars don't provide one). */
.ps-roi .ps-roi__hsform .hsfc-Button {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12' fill='none'%3E%3Cpath d='M11.5 1 16.5 6 11.5 11 M1 6 H16' stroke='%23afe0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 22px center;
	padding-right: 52px;
}
.ps-roi__email-btn:disabled { opacity: .6; cursor: default; }
.ps-roi__email-msg {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--ps-muted);
}
.ps-roi__email-msg.is-error { color: #ffb3ad; }
.ps-roi__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 12px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--ps-muted);
	max-width: 460px;
}
.ps-roi__consent input {
	margin-top: 2px;
	flex-shrink: 0;
}

/* CTA bar */
.ps-roi__cta {
	margin-top: 20px;
	background: var(--ps-cta-bar);
	border-radius: 12px;
	padding: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}
.ps-roi__cta-copy {
	font-size: 14px;
	font-weight: 600;
	color: var(--ps-green-dark);
	margin: 0;
	max-width: 60%;
}
.ps-roi__cta-btn {
	flex-shrink: 0;
	display: inline-block;
	padding: 13px 26px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: #fff!important;
	background: var(--ps-green-dark);
	border-radius: 22px;
	transition: filter .15s ease;
}
.ps-roi__cta-btn:hover { filter: brightness(1.15); color: #fff; }

/* ============================================================
   Colorways — built from the PSQ brand ramps (Brand Guidelines
   4.11–4.13). Set data-colorway on the .ps-roi element. Default
   (no attribute) is Green. Each keeps the approved tone-on-tone
   pairing: light surface, base accent, deep panel.
   ============================================================ */

.ps-roi[data-colorway="blue"] {
	--ps-green: #10A3FF;
	--ps-green-dark: #053655;
	--ps-green-darkest: #021b2a;
	--ps-surface: #d7efff;
	--ps-muted: #afe0ff;
	--ps-hint: #08517f;
	--ps-cta-bar: #afe0ff;
	--ps-border: #afe0ff;
	--ps-on-accent: #ffffff;
}

.ps-roi[data-colorway="purple"] {
	--ps-green: #be77ff;
	--ps-green-dark: #3e2655;
	--ps-green-darkest: #1f132a;
	--ps-surface: #f3e7ff;
	--ps-muted: #e8d0ff;
	--ps-hint: #5e397f;
	--ps-cta-bar: #e8d0ff;
	--ps-border: #ddb8ff;
	--ps-on-accent: #1f132a;
}

.ps-roi[data-colorway="pink"] {
	--ps-green: #FC57E5;
	--ps-green-dark: #541d4c;
	--ps-green-darkest: #2a0e26;
	--ps-surface: #fee3fa;
	--ps-muted: #fec7f6;
	--ps-hint: #7e2b72;
	--ps-cta-bar: #fec7f6;
	--ps-border: #fdabf2;
	--ps-on-accent: #2a0e26;
}

.ps-roi[data-colorway="orange"] {
	--ps-green: #FFB82A;
	--ps-green-dark: #553d0e;
	--ps-green-darkest: #2a1e07;
	--ps-surface: #fff3db;
	--ps-muted: #ffe7b8;
	--ps-hint: #7f5c15;
	--ps-cta-bar: #ffe7b8;
	--ps-border: #ffdb94;
	--ps-on-accent: #2a1e07;
}

/* Responsive */
@media (max-width: 640px) {
	.ps-roi { padding: 20px; border-radius: 16px; margin: 20px !important;}
	.ps-roi__title { font-size: 23px; }
	.ps-roi__grid { grid-template-columns: 1fr; }
	.ps-roi__cta { flex-direction: column; align-items: flex-start; }
	.ps-roi__cta-copy { max-width: 100%; }
	.ps-roi__email-row { flex-direction: column; max-width: 100%; }
	.ps-roi__email-btn { width: 100%; }
}