/**
 * Discovery Call CTA – soft prompt + modal
 *
 * Colours follow the brand tokens already declared in elementor/ppa-widgets.php
 * (--ppa-orange, --ppa-cream, --ppa-grey, --ppa-body-text), with the header's
 * terracotta (#CD8066) as the action colour.
 *
 * Sits above page content but below the cookie banner, which the consent
 * library pins at the top of the stack.
 */

.ll-cta,
.ll-cta-modal {
	--ll-cta-terracotta: #CD8066;
	--ll-cta-terracotta-dark: #B95B3C;
	--ll-cta-ink: var(--ppa-grey, #343434);
	--ll-cta-body: var(--ppa-body-text, #5c5c5c);
	--ll-cta-surface: #fff;
	--ll-cta-surface-warm: #faf7f4;
	--ll-cta-line: rgba(97, 95, 75, 0.16);
	/* Washes of whatever the action colour currently is, so the focus rings and
	   the scrollbar follow a palette change with everything else. The literal
	   above each one is the fallback where color-mix is unsupported. */
	--ll-cta-ring: rgba(205,128,102, 0.18);
	--ll-cta-ring: color-mix(in srgb, var(--ll-cta-terracotta) 18%, transparent);
	--ll-cta-bar: rgba(205,128,102, 0.45);
	--ll-cta-bar: color-mix(in srgb, var(--ll-cta-terracotta) 45%, transparent);
	--ll-cta-bar-hover: rgba(205,128,102, 0.75);
	--ll-cta-bar-hover: color-mix(in srgb, var(--ll-cta-terracotta) 75%, transparent);
	font-family: "Poppins", sans-serif;
}

.ll-cta[hidden],
.ll-cta-modal[hidden] {
	display: none;
}

/* Both the theme and the Elementor kit style bare <button> and <input>
   elements, so every control here restates the chrome it must not inherit. */
.ll-cta .ll-cta__dismiss,
.ll-cta .ll-cta__next,
.ll-cta .ll-cta__form input,
.ll-cta-modal .ll-cta-modal__close,
.ll-cta-modal .ll-cta-choice {
	margin: 0;
	box-shadow: none;
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
	-webkit-appearance: none;
	appearance: none;
}

/* -------------------------------------------------------------------------
 * The prompt
 * ---------------------------------------------------------------------- */

.ll-cta {
	position: fixed;
	z-index: 9990;
	bottom: 24px;
	left: 50%;
	width: min(680px, calc(100vw - 32px));
	transform: translate(-50%, 24px);
	opacity: 0;
	transition: opacity 0.45s ease, transform 0.45s ease;
}

.ll-cta.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Leaving: fade back down, then `hidden` is applied on transitionend. */
.ll-cta.is-leaving {
	opacity: 0;
	transform: translate(-50%, 16px);
}

.ll-cta__panel {
	position: relative;
	border-radius: 26px;
	background: var(--ll-cta-surface);
	box-shadow: 0 18px 44px rgba(52, 52, 52, 0.16), 0 2px 8px rgba(52, 52, 52, 0.06);
}

.ll-cta__col {
	position: relative;
	min-width: 0;
	padding: 26px 28px 18px;
}

.ll-cta .ll-cta__dismiss {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ll-cta-body);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ll-cta .ll-cta__dismiss:hover,
.ll-cta .ll-cta__dismiss:focus-visible {
	background: var(--ll-cta-surface-warm);
	color: var(--ll-cta-ink);
}

/* The headline face, tracking whatever the kit's "Primary" typography is set
   to — family, weight and italic all come from Elementor's own globals, so this
   follows a change of heading font rather than having to be chased. Georgia is
   there for the moment before the webfont lands. */
.ll-cta__title {
	margin: 0 0 10px;
	padding-right: 24px;
	color: var(--ll-cta-ink);
	/* !important because the style switcher's body-font options apply
	   `body,p,li{font-family:… !important}`, and this is a <p>. Without it the
	   title quietly reverts to the body face the moment a font is previewed —
	   which is exactly when anyone is looking at it. */
	font-family: var(--e-global-typography-primary-font-family), Georgia, serif !important;
	font-size: 24px;
	/* Lora has no weight below 400, so this is both its lightest face and the
	   heading global's own weight. Kept explicit (and !important) for the same
	   reason as the family above. */
	font-weight: 400 !important;
	font-style: var(--e-global-typography-primary-font-style, italic) !important;
	line-height: 1.25;
}

/* Tight under the headline — they are one thought, not two blocks. */
.ll-cta__title + .ll-cta__body {
	margin-top: -2px;
}

.ll-cta__body {
	margin: 0 0 16px;
	color: var(--ll-cta-body);
	font-size: 15px;
	line-height: 1.5;
}

/* Name, email and Next on one line. There is room for it at this width now the
   photo has gone, and it takes a row of height out of the panel. */
.ll-cta__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: 10px;
}

/* The kit sets every input to 18px with 10px padding at
   `.elementor-kit-3883 input:not([type="button"]):not([type="submit"])`; the same
   :not() pair plus one more class is what lets these sizes apply at all.
   16px rather than smaller so iOS does not zoom the page on focus. */
.ll-cta .ll-cta__form input:not([type="button"]):not([type="submit"]) {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--ll-cta-line);
	border-radius: 12px;
	background: var(--ll-cta-surface-warm);
	color: var(--ll-cta-ink);
	font-family: inherit;
	font-size: 16px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* The labels are screen-reader-only, so the placeholder is the only visible
   label: 4.9:1 on the warm field. */
.ll-cta .ll-cta__form input::placeholder {
	color: #7A6A5E;
}

/* A 2px #9C5841 ring, so the focused field is unmistakable against both the
   white panel and the warm field: the 1px border plus a 1px shadow spread in
   the same colour, under the usual wash. Drawn rather than widened, so the
   box does not change size on focus at any breakpoint. */
.ll-cta .ll-cta__form input:focus {
	border-color: #9C5841;
	box-shadow: 0 0 0 1px #9C5841, 0 0 0 4px var(--ll-cta-ring);
	outline: none;
}

.ll-cta .ll-cta__form input.has-error {
	border-color: #9C5841;
}

.ll-cta .ll-cta__next {
	padding: 13px 26px;
	white-space: nowrap;
	border: 0;
	border-radius: 12px;
	background: var(--ll-cta-terracotta);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.ll-cta .ll-cta__next:hover,
.ll-cta .ll-cta__next:focus-visible {
	background: var(--ll-cta-terracotta-dark);
}

.ll-cta .ll-cta__next[disabled] {
	opacity: 0.6;
	cursor: default;
}

.ll-cta__error {
	margin: 10px 0 0;
	color: #9C5841;
	font-size: 13px;
}

.ll-cta__note {
	margin: 9px 0 0;
	color: #6F6862;
	font-size: 12px;
	line-height: 1.45;
	text-align: center;
}

.ll-cta__note a {
	color: inherit;
	text-decoration: underline;
}

@media (max-width: 520px) {
	.ll-cta {
		bottom: 12px;
	}

	.ll-cta__panel {
		border-radius: 22px;
	}

	.ll-cta__col {
		padding: 22px 20px 16px;
	}

	.ll-cta__title {
		font-size: 21px;
	}

	.ll-cta__form {
		grid-template-columns: 1fr;
	}

	.ll-cta .ll-cta__next {
		white-space: normal;
	}
}

/* -------------------------------------------------------------------------
 * The modal
 * ---------------------------------------------------------------------- */

.ll-cta-modal {
	position: fixed;
	z-index: 9995;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	background: rgba(52, 52, 52, 0.55);
	opacity: 0;
	transition: opacity 0.25s ease;
	overflow-y: auto;
}

.ll-cta-modal.is-open {
	opacity: 1;
}

.ll-cta-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(760px, 100%);
	max-height: calc(100vh - 48px);
	border-radius: 24px;
	background: var(--ll-cta-surface);
	box-shadow: 0 24px 60px rgba(52, 52, 52, 0.28);
	overflow: hidden;
	transform: translateY(14px) scale(0.985);
	transition: transform 0.28s ease;
}

/* Fixed: the heading and the step rule stay put while the questions scroll
   underneath them. */
.ll-cta-modal__header {
	position: relative;
	flex: 0 0 auto;
	padding: 34px 40px 24px;
	border-bottom: 1px solid var(--ll-cta-line);
	background: var(--ll-cta-surface);
}

.ll-cta-modal__content {
	flex: 1 1 auto;
	padding: 26px 40px 32px;
	overflow-y: auto;
	overflow-x: hidden;
	/* Stop a flick at the end of the list from scrolling the page behind. */
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--ll-cta-bar) transparent;
}

/* Firefox takes the two properties above; this is the same thing for WebKit and
   Blink. The transparent border plus background-clip is what insets the thumb
   so it reads as a slim pill rather than a full-width bar. */
.ll-cta-modal__content::-webkit-scrollbar {
	width: 10px;
}

.ll-cta-modal__content::-webkit-scrollbar-track {
	background: transparent;
}

.ll-cta-modal__content::-webkit-scrollbar-thumb {
	border: 3px solid transparent;
	border-radius: 999px;
	background-color: var(--ll-cta-bar);
	background-clip: content-box;
}

.ll-cta-modal__content::-webkit-scrollbar-thumb:hover {
	background-color: var(--ll-cta-bar-hover);
}

.ll-cta-modal.is-open .ll-cta-modal__panel {
	transform: none;
}

.ll-cta-modal .ll-cta-modal__close {
	position: absolute;
	/* Above the header, which is also positioned and comes later in the DOM —
	   without this it paints its background straight over the button. */
	z-index: 2;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ll-cta-surface-warm);
	color: var(--ll-cta-body);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ll-cta-modal .ll-cta-modal__close:hover,
.ll-cta-modal .ll-cta-modal__close:focus-visible {
	background: #f0e6df;
	color: var(--ll-cta-ink);
}

.ll-cta-modal__title {
	margin: 0 0 8px;
	padding-right: 36px;
	color: var(--ll-cta-ink);
	font-size: 27px;
	font-weight: 400;
	line-height: 1.25;
}

/* The kit's body text is Poppins 300 at 19/18/17px, line-height 1.5 (global
   "Text" style, Elementor kit 3883). The intro is body copy, so it uses that
   rather than a size of its own — the h2 above it already picks up the kit's
   Lora heading rule (global "Primary" typography, 400 italic) by itself. */
.ll-cta-modal__intro {
	margin: 0;
	color: var(--ll-cta-body);
	font-size: 19px;
	font-weight: 300;
	line-height: 1.5;
}

@media (max-width: 1024px) {
	.ll-cta-modal__intro {
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	.ll-cta-modal__intro {
		font-size: 17px;
	}
}

.ll-cta-modal__alt {
	margin: 10px 0 0;
	color: var(--ll-cta-body);
	font-size: 14px;
	line-height: 1.5;
}

.ll-cta-modal__alt a {
	color: var(--ll-cta-terracotta-dark);
	text-decoration: underline;
}

.ll-cta-modal__alt a:hover {
	color: var(--ll-cta-ink);
}

.ll-cta-modal__failed {
	margin: 0;
	padding: 32px 0;
	color: var(--ll-cta-body);
	font-size: 15px;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Waiting for the form
 *
 * The shape of what is about to arrive — a question, a field of choices, a
 * button — rather than a spinner, so the panel does not change size when the
 * real thing lands. The status line beside it is what screen readers get.
 * ---------------------------------------------------------------------- */

.ll-cta-modal__skeleton {
	display: grid;
	gap: 16px;
}

.ll-cta-modal__skeleton-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ll-cta-skel {
	display: block;
	border-radius: 999px;
	background: linear-gradient(90deg, #f1eae4 0%, #fbf8f6 50%, #f1eae4 100%);
	background-size: 200% 100%;
	animation: ll-cta-shimmer 1.5s ease-in-out infinite;
}

.ll-cta-skel--label {
	width: 58%;
	height: 15px;
	border-radius: 6px;
}

.ll-cta-skel--pill {
	height: 38px;
}

/* Varied widths so it reads as a list of answers rather than a loading bar. */
.ll-cta-skel--pill:nth-child(6n + 1) { width: 44%; }
.ll-cta-skel--pill:nth-child(6n + 2) { width: 22%; }
.ll-cta-skel--pill:nth-child(6n + 3) { width: 30%; }
.ll-cta-skel--pill:nth-child(6n + 4) { width: 27%; }
.ll-cta-skel--pill:nth-child(6n + 5) { width: 37%; }
.ll-cta-skel--pill:nth-child(6n + 6) { width: 25%; }

.ll-cta-skel--button {
	width: 100%;
	height: 48px;
	margin-top: 8px;
	border-radius: 12px;
}

@keyframes ll-cta-shimmer {
	from { background-position: 200% 0; }
	to   { background-position: -200% 0; }
}

/* Announced, not shown — the skeleton is the visible half of this. */
.ll-cta-modal__loading {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Step bar
 *
 * Lifted out of the Gravity Forms wrapper by the JS and pinned to the bottom
 * edge of the fixed header, where it reads as a 3px rule filling up rather than
 * as a widget. Outside that wrapper none of GF's own `.gravity-theme
 * .gf_progressbar*` rules reach it any more, so this is the whole style.
 * ---------------------------------------------------------------------- */

.ll-cta-modal__progress[hidden] {
	display: none;
}

.ll-cta-modal__progress {
	position: absolute;
	right: 0;
	bottom: -1px; /* sits on the header's hairline rather than under it */
	left: 0;
	height: 3px;
}

.ll-cta-modal__progress .gf_progressbar_wrapper {
	margin: 0;
}

.ll-cta-modal__progress .gf_progressbar {
	height: 3px;
	background: var(--ll-cta-line);
	overflow: hidden;
}

.ll-cta-modal__progress .gf_progressbar_percentage {
	height: 3px;
	border-radius: 0 999px 999px 0;
	transition: width 0.4s ease;
}

/* "Step 2 of 3" and "66%" say what the rule is already showing, and there is
   nowhere to put them at this height. Clipped rather than removed, so they are
   still announced. */
.ll-cta-modal__progress .gf_progressbar_title,
.ll-cta-modal__progress .gf_progressbar_percentage span {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Gravity Forms inside the modal ----------------------------------------- */

.ll-cta-modal__body .gform_wrapper {
	margin: 0;
}

/* Fields, sized for a modal rather than a page: a little taller and a little
   larger in the text than Gravity Forms' own, which reads small at this width.
   16px is also the size below which iOS zooms the page on focus. */
.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield_label {
	margin-bottom: 8px;
	color: var(--ll-cta-ink);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.4;
}

.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield input[type="text"],
.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield input[type="email"],
.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield input[type="tel"],
.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield input[type="number"],
.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield textarea,
.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield select {
	padding: 14px 16px;
	border: 1px solid var(--ll-cta-line);
	border-radius: 12px;
	background: var(--ll-cta-surface-warm);
	color: var(--ll-cta-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield input[type="text"]:focus,
.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield input[type="email"]:focus,
.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield input[type="tel"]:focus,
.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield input[type="number"]:focus,
.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield textarea:focus,
.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield select:focus {
	/* Same 2px ring as the prompt's field (see .ll-cta__form input:focus). */
	border-color: #9C5841;
	box-shadow: 0 0 0 1px #9C5841, 0 0 0 4px var(--ll-cta-ring);
	outline: none;
}

.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield_description,
.ll-cta-modal__body .gform_wrapper.gravity-theme .gform_fileupload_rules {
	font-size: 14px;
	line-height: 1.5;
}

/* Buttons, matched to the prompt's "Next" so the two steps of the journey look
   like one thing. Five classes plus the element: Gravity Forms' own footer
   rules run to `.gform_wrapper.gravity-theme .gform_footer input`, which this
   has to outrank without resorting to !important. */
.ll-cta-modal__body .gform_wrapper.gravity-theme .gform_footer,
.ll-cta-modal__body .gform_wrapper.gravity-theme .gform_page_footer {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 24px 0 0;
	padding: 0;
}

.ll-cta-modal__body .gform_wrapper.gravity-theme .gform_footer input.button,
.ll-cta-modal__body .gform_wrapper.gravity-theme .gform_page_footer input.button {
	flex: 1 1 auto;
	margin: 0;
	padding: 13px 24px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: var(--ll-cta-terracotta);
	box-shadow: none;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ll-cta-modal__body .gform_wrapper.gravity-theme .gform_footer input.button:hover,
.ll-cta-modal__body .gform_wrapper.gravity-theme .gform_footer input.button:focus-visible,
.ll-cta-modal__body .gform_wrapper.gravity-theme .gform_page_footer input.button:hover,
.ll-cta-modal__body .gform_wrapper.gravity-theme .gform_page_footer input.button:focus-visible {
	background: var(--ll-cta-terracotta-dark);
	border-color: var(--ll-cta-terracotta-dark);
	color: #fff;
}

/* "Back" is the quieter of the pair, and only ever as wide as its own label. */
.ll-cta-modal__body .gform_wrapper.gravity-theme .gform_footer input.gform_previous_button.button,
.ll-cta-modal__body .gform_wrapper.gravity-theme .gform_page_footer input.gform_previous_button.button {
	flex: 0 0 auto;
	border-color: var(--ll-cta-line);
	background: transparent;
	color: var(--ll-cta-body);
}

.ll-cta-modal__body .gform_wrapper.gravity-theme .gform_footer input.gform_previous_button.button:hover,
.ll-cta-modal__body .gform_wrapper.gravity-theme .gform_footer input.gform_previous_button.button:focus-visible,
.ll-cta-modal__body .gform_wrapper.gravity-theme .gform_page_footer input.gform_previous_button.button:hover,
.ll-cta-modal__body .gform_wrapper.gravity-theme .gform_page_footer input.gform_previous_button.button:focus-visible {
	border-color: var(--ll-cta-terracotta);
	background: var(--ll-cta-surface-warm);
	color: var(--ll-cta-ink);
}

.ll-cta-modal__body .gform_wrapper.gravity-theme .gform_footer input.button:disabled,
.ll-cta-modal__body .gform_wrapper.gravity-theme .gform_page_footer input.button:disabled {
	opacity: 0.6;
	cursor: default;
}

/* The privacy line closing the last page (Gravity Forms HTML field 17). */
.ll-cta-modal__body .ll-cta-privacy {
	margin: 4px 0 0;
	color: #6F6862;
	font-size: 13px;
	line-height: 1.5;
}

.ll-cta-modal__body .ll-cta-privacy a {
	color: inherit;
	text-decoration: underline;
}

/* The multiselect is replaced by pill buttons (see the JS); the native control
   stays in the DOM as the source of truth but is taken out of the flow. */
.ll-cta-modal .ll-cta-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.ll-cta-modal .ll-cta-choice {
	padding: 11px 18px;
	border: 1px solid var(--ll-cta-line);
	border-radius: 999px;
	background: var(--ll-cta-surface-warm);
	color: var(--ll-cta-body);
	font-family: inherit;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
	font-size: 15px;
}

/* Hover changes the border and nothing else. The background is restated
   because the theme styles bare `button:hover` with a fill of its own, which
   would otherwise show through here as brown. */
.ll-cta-modal .ll-cta-choice:hover {
	border-color: var(--ll-cta-terracotta);
	background: var(--ll-cta-surface-warm);
	color: var(--ll-cta-ink);
}

/* Picked: solid, so it is unmistakable at a glance across a field of twenty.
   Hovering one changes nothing — it is already as filled in as it gets. */
.ll-cta-modal .ll-cta-choice[aria-pressed="true"],
.ll-cta-modal .ll-cta-choice[aria-pressed="true"]:hover {
	border-color: var(--ll-cta-terracotta);
	background: var(--ll-cta-terracotta);
	color: #fff;
	font-weight: 500;
}

.ll-cta-modal .ll-cta-choice:focus-visible {
	outline: 2px solid var(--ll-cta-terracotta);
	outline-offset: 2px;
}

/* !important because Gravity Forms sizes its selects at
   `.gform_wrapper.gravity-theme .gfield select { width: 100% }` — three classes,
   which no reasonable selector here outranks. Same reasoning as WordPress's own
   `.screen-reader-text`. Left at 640px it pushes a horizontal scrollbar across
   the modal. */
.ll-cta-modal select.ll-cta-choices-source {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	overflow: hidden !important;
	white-space: nowrap !important;
}

@media (max-width: 600px) {
	.ll-cta-modal {
		padding: 12px 10px;
	}

	/* Phones: everything a size down. The choice pills were 15px on 11/18px
	   padding and a long label ("Chronic Pain (e.g. Fibromyalgia…)") ran off the
	   edge; inputs stay at 16px so iOS does not zoom the page on focus. */
	.ll-cta-modal .ll-cta-choices {
		gap: 6px;
	}
	.ll-cta-modal .ll-cta-choice {
		padding: 8px 13px;
		font-size: 14px;
		max-width: 100%;
		white-space: normal;
	}
	.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield_label,
	.ll-cta-modal__body .gform_wrapper.gravity-theme legend.gfield_label {
		font-size: 15px;
	}
	.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield input[type="text"],
	.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield input[type="email"],
	.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield input[type="tel"],
	.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield input[type="number"],
	.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield textarea,
	.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield select {
		padding: 11px 14px;
		border-radius: 10px;
		/* Gravity's own `line-height: 2` / `min-height: 32px` outrank anything
		   here (its selector is seven :not()s long); that is what made a 16px
		   field 56px tall on a phone. */
		line-height: 1.4 !important;
		min-height: 0 !important;
	}
	.ll-cta-modal__body .gform_wrapper.gravity-theme .gfield_description {
		font-size: 13px;
	}

	.ll-cta-modal__panel {
		max-height: calc(100vh - 24px);
		border-radius: 20px;
	}

	.ll-cta-modal__header {
		padding: 28px 22px 20px;
	}

	.ll-cta-modal__content {
		padding: 22px 22px 24px;
	}

	.ll-cta-modal__title {
		font-size: 23px;
	}
}

/* -------------------------------------------------------------------------
 * Motion preferences
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ll-cta,
	.ll-cta-modal,
	.ll-cta-modal__panel,
	.ll-cta-modal__progress .gf_progressbar_percentage {
		transition: none;
	}

	.ll-cta-skel {
		animation: none;
	}

	.ll-cta {
		transform: translate(-50%, 0);
	}
}

/* Keep the page still while the modal is open. Fixed rather than just
   overflow-hidden — see lockScroll() in the JS; `top` is set there to hold the
   page at the offset it was scrolled to. */
body.ll-cta-modal-open {
	position: fixed;
	right: 0;
	left: 0;
	overflow: hidden;
}