/*
 * seamlessmd/cta-band — frontend styles.
 *
 * BEM:
 *   .seamlessmd-cta-band                        (block)
 *   .seamlessmd-cta-band--variant-solid         (solid colour)
 *   .seamlessmd-cta-band--variant-gradient      (two-stop linear gradient)
 *   .seamlessmd-cta-band--variant-image-bg      (image + dark overlay)
 *   .seamlessmd-cta-band--variant-form          (CF7 contact form — mirror of seamless.md)
 *   .seamlessmd-cta-band--align-center          (text + buttons centered)
 *   .seamlessmd-cta-band--align-left            (text + buttons left)
 *   .seamlessmd-cta-band__inner                 (content container)
 *   .seamlessmd-cta-band__eyebrow               (small label above h2)
 *   .seamlessmd-cta-band__heading               (h2)
 *   .seamlessmd-cta-band__subheading            (lead paragraph)
 *   .seamlessmd-cta-band__ctas                  (button row)
 *   .seamlessmd-cta-band__cta                   (single button — layout hook)
 *   .seamlessmd-cta-band__form-wrap             (CF7 render container — form variant only)
 *
 * Button colours/sizing come from global .seamlessmd-btn* in seamlessmd-theme.css;
 * we only define .seamlessmd-btn--outline here (white-on-dark variant not in core).
 */

/*
 * Base background-color is intentionally low-specificity so that the inline
 * style emitted by render.php (either a `backgroundGradient` override or a
 * `backgroundColor` override) always wins without needing !important.
 */
.seamlessmd-cta-band {
	position: relative;
	isolation: isolate;
	width: 100%;
	padding-block: var(--seamlessmd-section-pad);
	color: #ffffff;
	background-color: var(--seamlessmd-primary);
	overflow: hidden;
}

/* `.seamlessmd-cta-band__inner` keeps its narrower 880px text-legibility
 * cap; the surrounding `.seamlessmd-container` (added in render.php) gives
 * the section the unified max-width + horizontal gutter. The 880px column
 * is centered within the container. */
.seamlessmd-cta-band__inner {
	position: relative;
	z-index: 1;
	max-width: 100%;
	/* max-width: 880px; */
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.seamlessmd-cta-band__eyebrow {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: inherit;
	opacity: 0.85;
}

.seamlessmd-cta-band__heading {
	margin: 0;
	font-family: var(--seamlessmd-font-heading);
	font-weight: 700;
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: inherit;
}

.seamlessmd-cta-band__subheading {
	margin: 0;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	line-height: 1.55;
	color: inherit;
	opacity: 0.92;
	max-width: 56ch;
}

.seamlessmd-cta-band__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-4);
	align-items: center;
}

/* Optional small-print footnote rendered under the CTA row (design §5.2). */
.seamlessmd-cta-band .seamlessmd-cta-band__note {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: inherit;
	opacity: 0.85;
}

/* ---- Alignment ---- */

.seamlessmd-cta-band--align-center .seamlessmd-cta-band__inner {
	text-align: center;
	align-items: center;
}

.seamlessmd-cta-band--align-center .seamlessmd-cta-band__subheading {
	margin-left: auto;
	margin-right: auto;
}

.seamlessmd-cta-band--align-center .seamlessmd-cta-band__ctas {
	justify-content: center;
}

/* Left-aligned variant: text + buttons hug the start edge. Width is no
 * longer overridden — the surrounding `.seamlessmd-container` already
 * caps at --seamlessmd-container-max. Drops the prior `max-width` here. */
.seamlessmd-cta-band--align-left .seamlessmd-cta-band__inner {
	text-align: start;
	align-items: flex-start;
	max-width: none;
}

.seamlessmd-cta-band--align-left .seamlessmd-cta-band__ctas {
	justify-content: flex-start;
}

/* ---- Layout: inline ----
 *
 * Heading + CTA on a single row, vertically centered. Two flavours
 * driven by the `alignment` attr:
 *
 *   - align-left  → CSS Grid `1fr auto`: heading group on the leading
 *     edge, CTA on the trailing edge (i.e. pinned to opposite sides).
 *     Mirrors source `.section.dark.cta.small-cta` in the EHR page's
 *     original layout where the headline and button hug opposite edges.
 *
 *   - align-center → Flex `justify-content: center`: heading + CTA
 *     read as one centered group with a `gap` between them. Both items
 *     are physically next to each other in the middle of the band. The
 *     heading also shrinks to 1.3125rem (21px) for this layout — the
 *     compact callout size from the design system, distinct from the
 *     larger 1.5rem heading the stacked variant uses.
 *
 * Both flavours collapse to a single stacked column under 768px so
 * the button never crowds a wrapping headline on mobile. */

/* Base: align-left (grid 1fr / auto, opposite edges). */
.seamlessmd-cta-band--layout-inline.seamlessmd-cta-band--align-left .seamlessmd-cta-band__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--space-5, 1.5rem) var(--space-6, 2rem);
}

.seamlessmd-cta-band--layout-inline.seamlessmd-cta-band--align-left .seamlessmd-cta-band__eyebrow,
.seamlessmd-cta-band--layout-inline.seamlessmd-cta-band--align-left .seamlessmd-cta-band__heading,
.seamlessmd-cta-band--layout-inline.seamlessmd-cta-band--align-left .seamlessmd-cta-band__subheading {
	grid-column: 1;
	margin-inline: 0;
	max-width: none;
	text-align: start;
}

.seamlessmd-cta-band--layout-inline.seamlessmd-cta-band--align-left .seamlessmd-cta-band__ctas {
	grid-column: 2;
	grid-row: 1 / -1;
	justify-content: flex-end;
	margin: 0;
}

.seamlessmd-cta-band--layout-inline.seamlessmd-cta-band--align-left .seamlessmd-cta-band__note {
	grid-column: 1 / -1;
}

/* Variant: align-center (flex row, both centered as one group). */
.seamlessmd-cta-band--layout-inline.seamlessmd-cta-band--align-center .seamlessmd-cta-band__inner {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-5, 1.5rem) var(--space-6, 2rem);
	text-align: center;
}

.seamlessmd-cta-band--layout-inline.seamlessmd-cta-band--align-center .seamlessmd-cta-band__heading {
	margin: 0;
	font-size: 1.3125rem; /* 21px — compact callout size for inline + centered */
	line-height: 1.35;
}

.seamlessmd-cta-band--layout-inline.seamlessmd-cta-band--align-center .seamlessmd-cta-band__subheading {
	margin: 0;
	max-width: none;
}

.seamlessmd-cta-band--layout-inline.seamlessmd-cta-band--align-center .seamlessmd-cta-band__ctas {
	margin: 0;
	flex: 0 0 auto;
}

@media (max-width: 767px) {
	.seamlessmd-cta-band--layout-inline.seamlessmd-cta-band--align-left .seamlessmd-cta-band__inner {
		grid-template-columns: 1fr;
	}
	.seamlessmd-cta-band--layout-inline.seamlessmd-cta-band--align-left .seamlessmd-cta-band__ctas {
		grid-column: 1;
		grid-row: auto;
		justify-content: flex-start;
	}
}

/* ---- Variant: solid ----
 *
 * Removed: an earlier rule pinned the Webflow upstream
 * `_footer-shape.svg` as a decorative bottom-right corner image via a
 * third-party CDN URL (`https://cdn.prod.website-files.com/...`). That
 * meant every page render fetched a Webflow asset over the public
 * internet — broken if the CDN ever goes down, and a privacy/perf
 * regression. Solid bands now render with just their colour or the
 * editor-supplied `backgroundImage` (use the image-bg variant if you
 * want a background image; the solid variant is intentionally flat). */

/* ---- Variant: image-bg ---- */

.seamlessmd-cta-band--variant-image-bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--seamlessmd-dark-navy);
}

.seamlessmd-cta-band--variant-image-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(30, 42, 92, 0.55), rgba(30, 42, 92, 0.78));
	pointer-events: none;
}

/* ---- Variant: video-bg ----
 *
 * Renders a real <video> element (not a CSS background — `background: url(...)`
 * doesn't accept video) full-bleed behind the content column. The video sits
 * at z-index -2 so the base-mixin overlay (z-index -1, painted by the shared
 * .--has-overlay ::after pseudo) can dim it for text legibility. The
 * .--inner content stays at the default 0 stacking order via the parent's
 * `isolation: isolate`, so it always paints on top.
 *
 * Browser autoplay rules: `autoplay muted playsinline` is required for inline
 * autoplay on iOS Safari + Android Chrome — set in render.php. `loop` keeps
 * the band animated without a JS scrub. The video is `pointer-events: none`
 * so any tap goes through to the CTA, and `aria-hidden="true"` so screen
 * readers skip the decorative loop.
 */
.seamlessmd-cta-band--variant-video-bg {
	background-color: var(--seamlessmd-dark-navy);
}

.seamlessmd-cta-band--variant-video-bg .seamlessmd-cta-band__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	pointer-events: none;
	display: block;
}

/* `prefers-reduced-motion`: hide the autoplay loop. The section then falls
 * back to its `--seamlessmd-dark-navy` background-color (plus any base-mixin
 * overlay) so the CTA stays legible without the animation. */
@media (prefers-reduced-motion: reduce) {
	.seamlessmd-cta-band--variant-video-bg .seamlessmd-cta-band__video {
		display: none;
	}
}

/* ---- Variant: gradient ---- */
/* Inline style provides the gradient; nothing extra needed here, but we
   guarantee a readable fallback colour in case the inline style is stripped. */
.seamlessmd-cta-band--variant-gradient {
	background-color: var(--seamlessmd-primary);
}

/* ---- Variant: form ----
 *
 * 1:1 visual mirror of the seamless.md source form (`<section id="contact-form"
 * class="section light">` on /research, /case-studies, every specialty CPT,
 * every solution, every product). The form itself is rendered by Contact
 * Form 7 — this stylesheet targets CF7's output classes inside the wrapper
 * the block renders (`<div class="seamlessmd-cta-band__form-wrap">`).
 *
 * Mirror baseline (computed at 1280px viewport on the source):
 *   section.light       padding: 80px 0 0;   bg #f3f3f3
 *   .title-container    max-width: 800px;   margin: 0 auto 30px; flex column align-items:center
 *   .h2                 #045089; 700 32px/36px; text-align:center; margin: 20px 0 10px
 *   .h5.form            rgb(55,68,111); 400 18px/24px; text-align:center; padding: 0 0 32px; margin: 6px 0 0
 *   .text-field         #fff; border:1px solid #fff; rounded 4px; 46px tall; 12px 24px; min-width:180px; 14px text
 *   .text-field:focus   border:#045089
 *   .div-block-133      flex row; inputs gapped by margin-right:26px
 *   .primary-small-button.center  #045089/#fff; 600 0.95rem; padding 10px 24px; border-radius 4px; no border;
 *                                 width auto; max-width:65%; margin: 16px auto 0; text-align:center
 *
 * Applies universally to `.seamlessmd-cta-band--variant-form` (every page
 * that uses the form variant — pages, specialties, solutions, products) so
 * the form is identical site-wide, matching the source.
 */
.seamlessmd-cta-band--variant-form {
	background-color: #ffffff;
	color: rgb(55, 68, 111);
	padding-block: 80px 0;
}

/* Decorative background image layer (e.g. the bg-circle half-disc on /contact/).
 *
 * Painted by a `::before` pseudo-element rather than on the section directly
 * so RTL pages can `transform: scaleX(-1)` it (mirroring the image pixels)
 * without flipping the form content alongside. URL + position arrive from
 * render.php as `--seamlessmd-cta-band-bg-image` and
 * `--seamlessmd-cta-band-bg-position` inline on the section. When neither
 * is set, the pseudo paints nothing and is invisible. */
.seamlessmd-cta-band--variant-form::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: var(--seamlessmd-cta-band-bg-image, none);
	/* background-size: contain; */
	background-size: 65rem;
	background-position: var(--seamlessmd-cta-band-bg-position, right);
	background-repeat: no-repeat;
}

[dir="rtl"] .seamlessmd-cta-band--variant-form::before,
body.rtl .seamlessmd-cta-band--variant-form::before {
	transform: scaleX(-1);
}

/* `.seamlessmd-cta-band__inner` is the .title-container.less-space analog. */
.seamlessmd-cta-band--variant-form .seamlessmd-cta-band__inner {
	max-width: 800px;
	margin: 0 auto 30px;
	align-items: center;
	text-align: center;
	gap: 0;
}

.seamlessmd-cta-band--variant-form .seamlessmd-cta-band__heading {
	margin: 20px 0;
	color: #045089;
	font-size: 32px;
	font-weight: 700;
	line-height: 36px;
	letter-spacing: 0;
	text-align: center;
}

.seamlessmd-cta-band--variant-form .seamlessmd-cta-band__subheading {
	color: rgb(55, 68, 111);
	white-space: pre-line;
	font-size: 1rem;
	font-weight: 400;
	line-height: 24px;
	opacity: 1;
	max-width: none;
	text-align: center;
	margin-top: 1rem;
	margin-bottom: 5rem;
}

/* CF7 wrapper. The block renders `<div class="seamlessmd-cta-band__form-wrap">`
 * around `do_shortcode('[contact-form-7 ...]')`; CF7's own root is
 * `<div class="wpcf7 ..." id="wpcf7-fNNN-pNNN-oN">` containing
 * `<form class="wpcf7-form ...">`. We hook layout off the wpcf7-form. */
.seamlessmd-cta-band__form-wrap {
	width: 100%;
	max-width: 720px;
	margin-inline: auto;
	text-align: start;
}

.seamlessmd-cta-band__form-wrap .wpcf7 {
	margin: 0;
}

.seamlessmd-cta-band__form-wrap .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
}

/* CF7 wraps every screen-reader response and validation banner under
 * .wpcf7-response-output; keep its margins consistent with the form rows. */
.seamlessmd-cta-band__form-wrap .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.45;
	text-align: start;
}

/* Row layout — the form template emits two-column rows by wrapping field
 * pairs in `<div class="seamlessmd-form-row">`. Each field is wrapped in
 * a `<label class="seamlessmd-form-label">` (so labels are tied to inputs
 * by enclosure, no `for=` needed), so the labels are the direct flex
 * children we size — not the inner `.wpcf7-form-control-wrap`. */
.seamlessmd-cta-band__form-wrap .seamlessmd-form-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 26px;
	width: 100%;
}

.seamlessmd-cta-band__form-wrap .seamlessmd-form-row > .seamlessmd-form-label {
	flex: 1 1 calc(50% - 13px);
	min-width: 180px;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--seamlessmd-dark-navy);
	line-height: 1.3;
}

.seamlessmd-cta-band__form-wrap .seamlessmd-form-row--full > .seamlessmd-form-label {
	flex: 1 1 100%;
}

.seamlessmd-cta-band__form-wrap .seamlessmd-form-row .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.seamlessmd-cta-band__form-wrap .seamlessmd-form-req {
	color: #dc2626;
	font-weight: 400;
}

/* Label visibility per the editor's `showLabels` attribute (mapped to the
 * `--show-labels` modifier in render.php). Default: HIDDEN — the 44
 * in-page "Would you like to see more?" cta-bands rely on placeholders
 * for compactness. Opt-in: /contact/ seeds `showLabels: true`, which
 * lands as the `seamlessmd-cta-band--show-labels` class on the section.
 *
 * Technique: collapse the label's direct text node via `font-size: 0`
 * (the only thing inside the `<label>` besides the `wpcf7-form-control-wrap`
 * and the required-mark span). The input wrapper has its own explicit
 * `font-size: 14px` (a few rules below), so the input renders normally.
 * The required-mark span is `aria-hidden="true"` already; we `display:
 * none` it for cleanliness. Screen readers still announce the label
 * text because the text node remains in the DOM. */
.seamlessmd-cta-band--variant-form:not(.seamlessmd-cta-band--show-labels) .seamlessmd-form-label {
	font-size: 0;
	line-height: 0;
	color: transparent;
	gap: 0;
}

.seamlessmd-cta-band--variant-form:not(.seamlessmd-cta-band--show-labels) .seamlessmd-form-req {
	display: none;
}

.seamlessmd-cta-band__form-wrap .seamlessmd-form-privacy {
	margin: 8px 0 16px;
	font-size: 13px;
	line-height: 1.55;
	text-align: center;
	color: var(--seamlessmd-text-muted);
}

/* Inputs — mirror the source's `.text-field.w-input` exactly. */
.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-text,
.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-email,
.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-tel,
.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	height: 46px;
	min-height: 46px;
	margin: 0 0 16px;
	padding: 12px 24px;
	background-color: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 4px;
	color: rgb(51, 51, 51);
	font: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-align: start;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	box-shadow: none;
}

.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-textarea {
	height: auto;
	min-height: 120px;
	resize: vertical;
	line-height: 1.55;
}

.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-text::placeholder,
.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-email::placeholder,
.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-tel::placeholder,
.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-textarea::placeholder {
	color: rgba(128, 135, 166, 0.6);
	opacity: 1;
}

.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-text:hover,
.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-email:hover,
.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-tel:hover,
.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-textarea:hover {
	border-color: #dee2ef;
}

.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-text:focus,
.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-text:focus-visible,
.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-email:focus,
.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-email:focus-visible,
.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-tel:focus,
.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-tel:focus-visible,
.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-textarea:focus,
.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-textarea:focus-visible {
	outline: none;
	border-color: #045089;
	box-shadow: 0 0 0 3px rgba(4, 80, 137, 0.18);
}

/* CF7 marks `wpcf7-not-valid` on inputs that failed validation and inserts
 * a `.wpcf7-not-valid-tip` immediately after. Style both. */
.seamlessmd-cta-band__form-wrap .wpcf7-form-control.wpcf7-not-valid {
	border-color: #c0392b;
}

.seamlessmd-cta-band__form-wrap .wpcf7-not-valid-tip {
	margin: -10px 0 16px;
	color: #c0392b;
	font-size: 13px;
	line-height: 1.35;
	text-align: start;
}

/* Submit button — mirror the source's `.primary-small-button.center.w-button`. */
.seamlessmd-cta-band__form-wrap .seamlessmd-form-submit {
	display: flex;
	justify-content: center;
	margin-top: 16px;
}

.seamlessmd-cta-band__form-wrap .wpcf7-submit {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: auto;
	min-width: 0;
	max-width: 65%;
	margin: 0 auto;
	padding: 10px 24px;
	background-color: #045089;
	background-image: none;
	color: #ffffff;
	border: 0;
	border-radius: 4px;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.seamlessmd-cta-band__form-wrap .wpcf7-submit:hover,
.seamlessmd-cta-band__form-wrap .wpcf7-submit:focus-visible {
	background-color: #062a45;
	color: #ffffff;
	outline: none;
}

/* CF7 in-flight spinner — sits inside `.wpcf7-spinner` next to the submit. */
.seamlessmd-cta-band__form-wrap .wpcf7-spinner {
	margin-inline-start: 12px;
}

/* RTL: the form respects document direction; CF7 emits `dir="rtl"` itself
 * when the form's post locale is `ar`, so explicit flips aren't required.
 * Just ensure the response-output and tip cells use start-alignment. */
[dir="rtl"] .seamlessmd-cta-band__form-wrap .wpcf7-response-output,
[dir="rtl"] .seamlessmd-cta-band__form-wrap .wpcf7-not-valid-tip {
	text-align: start;
}

/* Mobile: collapse 2-col rows to a single column. */
@media (max-width: 640px) {
	.seamlessmd-cta-band__form-wrap .seamlessmd-form-row > .seamlessmd-form-label {
		flex: 1 1 100%;
	}
}

/* ---- Button: outline variant (white-on-dark, not in core theme CSS) ---- */

.seamlessmd-cta-band .seamlessmd-btn--outline {
	background: transparent;
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.55);
}
.seamlessmd-cta-band .seamlessmd-btn--outline:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	border-color: #ffffff;
}

/* The inherited primary button already reads well on any of these dark-ish
   backgrounds; just make sure its text stays white when the band itself
   sets `color` on an ancestor. */
.seamlessmd-cta-band .seamlessmd-btn--primary {
	color: #ffffff;
}

/* override /contact page contact form styles */
.page-slug-contact .seamlessmd-cta-band__form-wrap .wpcf7-form-control:not(.wpcf7-submit) {
	border: 1px solid #f3f3f3 !important;
	background-color: #f3f3f3;
}

/* ---- Small screens ---- */
@media (max-width: 560px) {
	.seamlessmd-cta-band__ctas {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}
	.seamlessmd-cta-band__cta {
		width: 100%;
		justify-content: center;
	}
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.seamlessmd-cta-band .seamlessmd-btn {
		transition: none;
	}
}

/* ==========================================================================
 * Variant: home-final
 *
 * The Home page's closing CTA: a rounded navy-to-electric-blue panel sitting
 * inside the normal site container, centred heading + description + two
 * buttons, with restrained abstract light near the inline-end.
 *
 * SPECIFICITY — read before editing. `assets/css/seamlessmd-theme.css` loads
 * AFTER this file and carries Home-scoped overrides at (0,2,0):
 *
 *     .seamlessmd-home-main .seamlessmd-cta-band          { padding-block }
 *     .seamlessmd-home-main .seamlessmd-cta-band__inner   { gap }
 *     .seamlessmd-home-main .seamlessmd-cta-band__heading { font-size, weight }
 *     .seamlessmd-home-main .seamlessmd-cta-band__ctas    { margin-top }
 *
 * `front-page.php` puts `.seamlessmd-home-main` on <main>, so those rules hit
 * exactly this variant. A single variant class ties at (0,2,0) and loses to the
 * later file, so:
 *   - root-level properties use the variant class THREE times   -> (0,3,0)
 *   - descendants use it twice plus the child class             -> (0,3,0)
 * Both beat the theme's (0,2,0) without `!important` and without editing the
 * shared bundle. The repetition is deliberate; do not "tidy" it away.
 * ========================================================================== */

.seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final {
	--seamlessmd-hf-from: #12246b;
	--seamlessmd-hf-to: #2a53d8;
	/* Measured 4.83:1 against the gradient's brightest stop (#2a53d8), so the
	 * description clears WCAG AA for body text at every point on the panel.
	 * The obvious #c3d5fb only reaches 4.28:1 — do not darken this. */
	--seamlessmd-hf-body: #d3e2fe;
	--seamlessmd-hf-primary-text: #12358c;
	--seamlessmd-hf-secondary-border: rgba(197, 216, 255, 0.45);
	--seamlessmd-hf-radius: 28px;

	padding-block: clamp(1.5rem, 3vw, 2.75rem);
	/* The panel supplies the colour; the section itself stays page-white. */
	background: transparent;
}

/* The panel is the inner wrapper, so it inherits the container width and never
 * bleeds past it. */
.seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final .seamlessmd-cta-band__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.85rem, 1.6vw, 1.25rem);
	/* No fixed height — the panel grows with its content. */
	padding: clamp(2.25rem, 4.5vw, 3.75rem) clamp(1.5rem, 4vw, 3.5rem);
	border-radius: var(--seamlessmd-hf-radius);
	background: linear-gradient(115deg, var(--seamlessmd-hf-from) 0%, var(--seamlessmd-hf-to) 100%);
	/* Clips the decorative light to the rounded corners and guarantees the
	 * artwork can never widen the document. */
	overflow: hidden;
	text-align: center;
}

/* Decorative light. Pseudo-elements are not in the accessibility tree, so
 * nothing here is announced; `pointer-events: none` keeps it from stealing
 * clicks and it sits behind the content via z-index.
 *
 * The gradient positions are physical and deliberately do NOT mirror under
 * RTL. The artwork is abstract with nothing directional to preserve, the
 * content is centred either way, and leaving it put keeps the panel's light
 * anchored to the same corner in both languages. */
.seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final .seamlessmd-cta-band__inner::before {
	content: "";
	position: absolute;
	z-index: 0;
	/* Spans the whole panel rather than a sub-rectangle: a smaller box leaves a
	 * hard vertical seam wherever the gradients have not yet reached zero alpha
	 * at its edge. Every stop below ends fully transparent, so the light fades
	 * out on its own and the only boundary is the panel's own rounded clip. */
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(38% 58% at 82% 34%, rgba(150, 190, 255, 0.3), rgba(150, 190, 255, 0) 100%),
		radial-gradient(30% 46% at 92% 78%, rgba(120, 165, 255, 0.24), rgba(120, 165, 255, 0) 100%),
		radial-gradient(22% 34% at 70% 88%, rgba(190, 215, 255, 0.14), rgba(190, 215, 255, 0) 100%);
}

/* Content sits above the decorative layer. */
.seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final .seamlessmd-cta-band__heading,
.seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final .seamlessmd-cta-band__subheading,
.seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final .seamlessmd-cta-band__ctas {
	position: relative;
	z-index: 1;
}

.seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final .seamlessmd-cta-band__heading {
	margin: 0;
	/* Wide enough to keep the English heading on one line at desktop, as the
	 * reference shows, while still breaking a longer translated heading rather
	 * than running the full panel width. */
	max-inline-size: 40ch;
	font-size: clamp(1.6rem, 3vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: #ffffff;
	overflow-wrap: break-word;
}

.seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final .seamlessmd-cta-band__subheading {
	margin: 0;
	/* Controlled measure so the description never runs the full panel width. */
	max-inline-size: 56ch;
	font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
	line-height: 1.6;
	color: var(--seamlessmd-hf-body);
	overflow-wrap: break-word;
}

.seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final .seamlessmd-cta-band__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(0.6rem, 1.2vw, 0.9rem);
	margin-block-start: clamp(0.6rem, 1.2vw, 1rem);
}

/* ---------- Buttons ---------- */

.seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final .seamlessmd-cta-band__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-inline-size: 0;
	padding: 0.85rem 1.6rem;
	/* Rounded rectangle matching the home-hero CTAs (8px), not a full pill. */
	border-radius: var(--seamlessmd-radius-md, 8px);
	font-size: clamp(0.875rem, 1vw, 0.9375rem);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	/* Long translated labels wrap rather than widening the panel. The shared
	 * `.seamlessmd-btn` rule sets `white-space: nowrap`, which would defeat
	 * that, so it is released here. */
	white-space: normal;
	overflow-wrap: break-word;
}

.seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final .seamlessmd-cta-band__cta--primary {
	border: 1px solid #ffffff;
	background: #ffffff;
	color: var(--seamlessmd-hf-primary-text);
	/* `.seamlessmd-btn--primary` in the theme bundle carries a drop shadow that
	 * reads as a halo on this dark panel. The design calls for no heavy
	 * shadow, so it is cleared. */
	box-shadow: none;
}

.seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final .seamlessmd-cta-band__cta--primary:hover,
.seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final .seamlessmd-cta-band__cta--primary:focus-visible {
	background: #eef3ff;
	color: var(--seamlessmd-hf-primary-text);
}

.seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final .seamlessmd-cta-band__cta--secondary {
	border: 1px solid var(--seamlessmd-hf-secondary-border);
	background: transparent;
	color: #ffffff;
}

.seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final .seamlessmd-cta-band__cta--secondary:hover,
.seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final .seamlessmd-cta-band__cta--secondary:focus-visible {
	border-color: #ffffff;
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

.seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final .seamlessmd-cta-band__cta:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* The arrow is an SVG path, so it does not mirror on its own. */
.seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final .seamlessmd-cta-band__cta-arrow {
	inline-size: 1rem;
	block-size: 1rem;
	flex: 0 0 auto;
	display: block;
}

[dir="rtl"] .seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final .seamlessmd-cta-band__cta-arrow {
	transform: scaleX(-1);
}

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

@media (max-width: 575px) {
	/* Mobile: stack the buttons and make each a comfortable full-width tap
	 * target. Source order keeps primary first. */
	.seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final .seamlessmd-cta-band__ctas {
		flex-direction: column;
		align-items: stretch;
		inline-size: 100%;
	}

	.seamlessmd-cta-band--variant-home-final.seamlessmd-cta-band--variant-home-final .seamlessmd-cta-band__cta {
		inline-size: 100%;
		padding-block: 0.95rem;
	}
}

/* Presence-gated heading accent (e.g. "…, together." highlighted). Only
 * exists when the `headingAccent` attribute is set — existing instances
 * render byte-identically. Block-local blue mirrors the pricing blocks. */
.seamlessmd-cta-band .seamlessmd-cta-band__heading-accent {
	color: #2563eb;
}

/* =====================================================================
 * `newsletter` variant — "Stay Updated" band (news-faq page).
 *
 * CF7-backed like the `form` variant (the email field + Subscribe button
 * + success/error UI live in the CF7 form template), presented as a
 * horizontal band: icon + heading/body on the leading edge, the inline
 * email form on the trailing edge. Scoped entirely to
 * `--variant-newsletter`; the 46 existing instances keep their variants.
 * ===================================================================== */

/* Section root stays transparent and compact — the double-class selector
 * deliberately outranks the theme bundle's shared section-padding rule
 * (.seamlessmd-cta-band, 80px block padding). The rounded gray "card"
 * paints on __inner below so it sits inset within the page container,
 * as in the design. */
.seamlessmd-cta-band.seamlessmd-cta-band--variant-newsletter {
	background: transparent;
	padding-block: 1.5rem;
	color: var(--seamlessmd-text);
}

/* The DOM order inside __inner stays icon → heading → subheading →
 * form-wrap (shared markup, no per-variant wrapper); explicit grid
 * placement below arranges them as icon | copy | form with the icon and
 * the form spanning both copy rows. Explicit grid-column/row on each
 * child — no named areas (see styling-and-rtl.md). */
.seamlessmd-cta-band--variant-newsletter .seamlessmd-cta-band__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) minmax(0, 34rem);
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 1.5rem;
	row-gap: 0.2rem;
	background: #eef1f7;
	border-radius: 16px;
	padding: 1.75rem 2rem;
	text-align: start;
}

.seamlessmd-cta-band--variant-newsletter .seamlessmd-cta-band__newsletter-icon {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.seamlessmd-cta-band--variant-newsletter .seamlessmd-cta-band__heading {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
}

.seamlessmd-cta-band--variant-newsletter .seamlessmd-cta-band__subheading {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
}

.seamlessmd-cta-band--variant-newsletter .seamlessmd-cta-band__form-wrap {
	grid-column: 3;
	grid-row: 1 / span 2;
}

.seamlessmd-cta-band__newsletter-icon {
	inline-size: 64px;
	block-size: 64px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #2563eb;
	font-size: 1.3rem;
}

.seamlessmd-cta-band--variant-newsletter .seamlessmd-cta-band__newsletter-icon img {
	inline-size: 30px;
	block-size: 30px;
	object-fit: contain;
	max-width: none;
	/* Design: white glyph on the solid blue disc. The stand-in mail SVG
	 * ships with a blue fill — normalize any glyph color to white. */
	filter: brightness(0) invert(1);
}

.seamlessmd-cta-band--variant-newsletter .seamlessmd-cta-band__heading {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--seamlessmd-dark-navy);
	margin: 0 0 0.35rem;
}

.seamlessmd-cta-band--variant-newsletter .seamlessmd-cta-band__subheading {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--seamlessmd-text-muted);
	margin: 0;
	max-inline-size: 30rem;
}

/* CF7 form: single email input + Subscribe button on one line. */
.seamlessmd-cta-band--variant-newsletter .seamlessmd-cta-band__form-wrap {
	margin: 0;
	max-inline-size: none;
}

.seamlessmd-cta-band--variant-newsletter .seamlessmd-form-row {
	display: flex;
	/* Base form-row sets flex-wrap: wrap for the two-column contact grid —
	 * the single-line email + button must never wrap. */
	flex-wrap: nowrap;
	gap: 0.8rem;
	align-items: stretch;
}

/* Placeholder-only, per the design: collapse the label text + required
 * asterisk (kept in the DOM for screen readers — same technique as the
 * form variant's hidden labels). Selectors deliberately mirror the form
 * variant's (0,3,0) field rules above so these later same-sheet rules
 * win the cascade for the newsletter variant only. */
.seamlessmd-cta-band--variant-newsletter .seamlessmd-form-row > .seamlessmd-form-label {
	/* Zero flex-basis so the input's intrinsic size (size="40") can't
	 * force the row to wrap; the label just fills the leftover space. */
	flex: 1 1 0%;
	min-width: 0;
	font-size: 0;
	line-height: 0;
	color: transparent;
	gap: 0;
	margin: 0;
}

.seamlessmd-cta-band--variant-newsletter .seamlessmd-form-row .seamlessmd-form-req {
	display: none;
}

.seamlessmd-cta-band--variant-newsletter .seamlessmd-form-row .wpcf7-form-control-wrap {
	display: block;
	inline-size: 100%;
}

.seamlessmd-cta-band--variant-newsletter .wpcf7-form-control.wpcf7-email {
	height: 54px;
	min-height: 54px;
	margin: 0;
	padding: 0.95rem 1.2rem;
	background-color: #fff;
	border: 1px solid #e2e6ee;
	border-radius: 10px;
	font-size: 15px;
}

.seamlessmd-cta-band--variant-newsletter .wpcf7-form-control.wpcf7-email::placeholder {
	color: var(--seamlessmd-text-muted);
}

.seamlessmd-cta-band--variant-newsletter .seamlessmd-form-row .seamlessmd-form-submit {
	flex: 0 0 auto;
	display: flex;
	margin: 0;
}

.seamlessmd-cta-band--variant-newsletter .seamlessmd-form-submit .wpcf7-submit {
	background: #2563eb;
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 0 2.6rem;
	height: 54px;
	min-height: 54px;
	min-inline-size: 200px;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.seamlessmd-cta-band--variant-newsletter .seamlessmd-form-submit .wpcf7-submit:hover {
	filter: brightness(1.08);
}

@media (max-width: 991px) {
	.seamlessmd-cta-band--variant-newsletter .seamlessmd-cta-band__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		text-align: center;
		justify-items: center;
	}

	.seamlessmd-cta-band--variant-newsletter .seamlessmd-cta-band__newsletter-icon,
	.seamlessmd-cta-band--variant-newsletter .seamlessmd-cta-band__heading,
	.seamlessmd-cta-band--variant-newsletter .seamlessmd-cta-band__subheading,
	.seamlessmd-cta-band--variant-newsletter .seamlessmd-cta-band__form-wrap {
		grid-column: auto;
		grid-row: auto;
	}

	.seamlessmd-cta-band--variant-newsletter .seamlessmd-cta-band__form-wrap {
		inline-size: 100%;
		max-inline-size: 26rem;
	}
}

/* Newsletter variant — phone layout. Same-sheet override of the desktop
 * rules above (later in file at matching specificity), so no cross-file
 * cascade questions: input and button stack full-width, and the card
 * gets phone-scale spacing. */
@media (max-width: 640px) {
	.seamlessmd-cta-band--variant-newsletter .seamlessmd-cta-band__inner {
		row-gap: 0.75rem;
		padding: 1.75rem 1.25rem;
	}

	.seamlessmd-cta-band--variant-newsletter .seamlessmd-form-row {
		/* Grid, not flex: grid items stretch to the full column width by
		 * default, which sidesteps the intrinsic-width quirks that kept
		 * the submit button narrow in some engines. */
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		justify-items: stretch;
		gap: 0.75rem;
	}

	.seamlessmd-cta-band--variant-newsletter .seamlessmd-form-row > .seamlessmd-form-label {
		flex: 1 1 auto;
		min-width: 0;
		inline-size: 100%;
	}

	.seamlessmd-cta-band--variant-newsletter .seamlessmd-form-row .seamlessmd-form-submit {
		display: block;
		width: 100%;
		inline-size: 100%;
	}

	/* Root cause of the narrow button: the contact-form submit styling
	 * higher up sets `max-width: 65%` (+ width:auto + margin auto) on
	 * every .wpcf7-submit inside a form-wrap — that clamp survived any
	 * width:100%, even !important. Lift it here. */
	.seamlessmd-cta-band--variant-newsletter .seamlessmd-form-submit .wpcf7-submit,
	.seamlessmd-cta-band--variant-newsletter .seamlessmd-form-row input[type="submit"] {
		width: 100%;
		inline-size: 100%;
		min-width: 0;
		min-inline-size: 0;
		max-width: 100%;
		max-inline-size: 100%;
		margin: 0;
	}
}



/* Newsletter validation feedback. The contact-form tip rule above pulls
 * itself up with `margin: -10px …` to hug inputs that carry a 16px
 * bottom margin — the newsletter's zero-margin email field made that
 * negative margin overlap the input. Positive, phone-friendly spacing
 * here (applies at all widths; later in file, same specificity). */
.seamlessmd-cta-band--variant-newsletter .wpcf7-not-valid-tip {
	display: block;
	margin: 0.75rem 0 0;
	font-size: 0.8rem;
	line-height: 1.4;
}

.seamlessmd-cta-band--variant-newsletter .wpcf7-response-output {
	margin: 0.9rem 0 0;
	border-radius: 10px;
}