/* LP Canvas base: layout primitives + Gravity Forms integration. Visual values come from the skin's tokens. */

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

html { -webkit-text-size-adjust: 100%; }

body.lp {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.55;
	color: var(--color-text);
	background: var(--color-background);
	-webkit-font-smoothing: antialiased;
}

:where(.lp) img { max-width: 100%; height: auto; display: block; }
:where(.lp) :is(h1, h2, h3) { font-family: var(--font-heading); line-height: 1.25; margin: 0; color: var(--color-heading); }
:where(.lp) p { margin: 0; }
:where(.lp) a { color: inherit; }

.lp-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* Hero with full-bleed background image */
.lp-hero { position: relative; min-height: 100vh; min-height: 100svh; padding-block: var(--spacing-section); isolation: isolate; }
.lp-hero__bg { position: absolute; inset: 0; z-index: -1; }
.lp-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.lp-hero__bg::after { content: ""; position: absolute; inset: 0; background: var(--hero-overlay, transparent); }

/* Card */
.lp-card {
	background: var(--color-surface);
	border-radius: var(--radius-card);
	padding: var(--card-padding);
	box-shadow: var(--shadow-card);
}
.lp-narrow { max-width: var(--narrow); margin-inline: auto; }

.lp-title { font-size: var(--text-title); font-weight: 700; text-align: center; }
.lp-lead { margin-top: .75rem; font-size: var(--text-lead); color: var(--color-muted); text-align: center; }

.lp-fineprint { margin-top: 20px; font-size: var(--text-small); color: var(--color-on-hero); text-align: center; opacity: .9; }
.lp-links { margin-top: 20px; font-size: var(--text-xsmall); color: var(--color-on-hero); text-align: center; opacity: .8; }
.lp-lead p + p, .lp-fineprint p + p { margin-top: .5em; }
.lp-links a { text-decoration: none; border-bottom: 1px solid currentColor; }

/* Trust header (top of the card): logo, rating badges, tagline */
.lp-trust { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 18px; text-align: center; }
.lp-trust__logo { width: clamp(120px, 100px + 5vw, 145px); }
.lp-trust__badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; font-size: var(--text-small); color: var(--color-muted); }
.lp-trust__badges > * + * { padding-left: 16px; border-left: 1px solid var(--color-border); }
.lp-trust__badges { flex-wrap: nowrap; }
@media (max-width: 339px) { .lp-trust__badges { flex-wrap: wrap; } }
.lp-badge { display: block; text-decoration: none; }
.lp-badge--rating { display: inline-grid; grid-template-columns: repeat(3, auto); align-items: center; justify-content: center; gap: 2px 6px; }
.lp-badge__label { grid-column: 1 / -1; font-size: var(--text-xsmall); line-height: 1.2; }
.lp-badge__score { font-weight: 600; color: var(--color-text); }
.lp-stars { display: inline-flex; gap: 2px; }
.lp-stars svg { width: 15px; height: 15px; fill: var(--color-star); }
.lp-badge--bbb img { width: auto; height: 54px; }
@media (min-width: 480px) {
	.lp-stars svg { width: 17px; height: 17px; }
	.lp-badge--bbb img { height: 44px; }
}
.lp-tagline { font-size: var(--text-tagline); font-weight: 600; line-height: 1.3; color: var(--color-heading); }
.lp-tagline strong { color: var(--color-accent); font-weight: 700; white-space: nowrap; }

/* Gravity Forms (Orbital theme) mapped to skin tokens.
   GF prints per-form variables on #gform_wrapper_N (ID specificity), so our mapping uses !important. */
.lp .gform-theme--orbital {
	--gf-color-primary: var(--color-primary) !important;
	--gf-color-primary-rgb: var(--color-primary-rgb) !important;
	--gf-color-primary-contrast: #fff !important;
	--gf-ctrl-border-color: var(--color-border) !important;
	--gf-ctrl-label-color-primary: var(--color-text) !important;
	--gf-radius: var(--radius-control) !important;
	--gf-font-size-primary: var(--text-base) !important;
	--gf-ctrl-size: var(--control-height) !important;
	--gf-ctrl-btn-bg-color-primary: var(--color-primary) !important;
	--gf-ctrl-btn-bg-color-hover-primary: var(--color-primary-hover) !important;
	--gf-ctrl-btn-color-primary: #fff !important;
	--gf-ctrl-btn-color-hover-primary: #fff !important;
	--gf-ctrl-btn-radius: var(--radius-button) !important;
	--gf-ctrl-btn-font-size: var(--text-base) !important;
	--gf-ctrl-btn-font-weight: 600 !important;
	--gf-form-gap-y: 16px !important;
	font-family: var(--font-body);
}
.lp .gform_wrapper { margin-top: 1.5rem; }
.lp .gform_required_legend { display: none; }
html:not(.rb-gf-ready) .lp .rb-cl-hidden { display: none !important; } /* See gform_field_css_class in inc/lp-canvas.php. */
.lp .gform_wrapper .gfield_label { font-size: var(--text-base); font-weight: 500; }
.lp .gform_wrapper select { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp .gform_wrapper .gform_footer { margin-top: 1.25rem; }
.lp .gform_wrapper .gform_footer .gform_button { inline-size: 100% !important; block-size: var(--control-height) !important; justify-content: center; }