/*
 * seamlessmd/hero-banner — frontend styles.
 *
 * BEM:
 *   .seamlessmd-hero                           (block)
 *   .seamlessmd-hero--variant-home             (modifier — full-bleed, two col)
 *   .seamlessmd-hero--variant-inner            (modifier — compact centered)
 *   .seamlessmd-hero--variant-cpt-auto         (modifier — post-driven, bg image)
 *   .seamlessmd-hero__inner                    (element — container / grid)
 *   .seamlessmd-hero__content                  (element — text column)
 *   .seamlessmd-hero__content--with-media      (modifier — shrink to left col)
 *   .seamlessmd-hero__media                    (element — right-side figure)
 *   .seamlessmd-hero__media-el                 (element — <img>/<video>)
 *   .seamlessmd-hero__overlay                  (element — cpt-auto dark tint)
 *   .seamlessmd-hero__eyebrow                  (element — small label above h1)
 *   .seamlessmd-hero__heading                  (element — h1)
 *   .seamlessmd-hero__ctas                     (element — button row)
 *   .seamlessmd-hero__cta                      (element — single button)
 */

.seamlessmd-hero {
	position: relative;
	isolation: isolate;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--seamlessmd-text);
	background: var(--seamlessmd-surface);
	overflow: hidden;
}

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

/* RTL: horizontally flip the image layer. The pseudo's box stays put
 * (inset:0 + transform-origin defaults to center), so the image pixels
 * are mirrored in place. Text content on the section is unaffected. */
[dir="rtl"] .seamlessmd-hero::before,
body.rtl .seamlessmd-hero::before {
	transform: scaleX(-1);
}

/* `.seamlessmd-hero__inner` carries the `.seamlessmd-container` class from
 * render.php — width/max-width/margin come from the shared container; this
 * rule only owns the hero's layout (position, z-index for stacking above the
 * ::before bg layer, flex column with row gap). */
.seamlessmd-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
}

.seamlessmd-hero__eyebrow {
	margin: 0 0 var(--space-3);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--seamlessmd-primary);
}

.seamlessmd-hero__heading {
	margin: 0 0 var(--space-4);
	font-family: var(--seamlessmd-font-heading);
	font-weight: 700;
	font-size: clamp(2rem, 1.4rem + 3vw, 3.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: inherit;
}

.seamlessmd-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
}

/* On small / x-small screens, stack the CTA buttons vertically and stretch
 * each to full width so they tap-target well on phones. Above 576px (small),
 * the default flex-row + flex-wrap behavior takes over and they sit side by
 * side. Same rule applied to the use-case `.div-block-52.fill` container
 * further down so both DOM shapes behave consistently. */
@media (max-width: 575.98px) {
	.seamlessmd-hero__ctas {
		flex-direction: column;
		align-items: stretch;
	}
	.seamlessmd-hero__ctas > .seamlessmd-hero__cta {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}

.seamlessmd-hero__cta {
	/* Inherit sizing from .seamlessmd-btn--lg; this is a hook for variant overrides. */
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

/* ---- Variant: home (1:1 clone of .section.home-hero from nabed.net) ---- */

/*
 * Desktop layout: flex row, align-items:center, min-height 70vh, 4em top/bottom
 * padding. Background (bg-circle PNG, top-right, contain) is emitted inline by
 * render.php so we can keep the static CSS asset-free.
 */
.seamlessmd-hero--variant-home {
	min-height: 70vh;
	padding-top: 4em;
	padding-bottom: 4em;
	background: transparent; /* src: .section.home-hero (no solid base on desktop) */
	align-items: center; /* src: .section.home-hero */
	overflow: hidden; /* src: .section.home-hero */
	display: flex;
}

.seamlessmd-hero--variant-home .seamlessmd-hero__inner {
	width: 100%;
	gap: 2em; /* src: .c--hero-wide (grid-row/column-gap:2em) */
}

.seamlessmd-hero--variant-home .seamlessmd-hero__heading {
	/* src: body (font-family: Nunito Sans, sans-serif) */
	font-family: "Nunito Sans", sans-serif;
	/* src: .h1 (font-weight:700) */
	font-weight: 700;
	/* src: .h1.hero (font-size:2.1em) — scales with parent/root em */
	font-size: 2.1em;
	/* src: .h1.hero (line-height:1.2em) */
	line-height: 1.2em;
	letter-spacing: normal; /* src: .h1 / .h1.hero (no letter-spacing override) */
	color: var(--seamlessmd-dark-navy, #1e2a5c);
	margin: 0 0 var(--space-4);
}

.seamlessmd-hero--variant-home .seamlessmd-hero__media {
	margin: 0;
	width: 100%;
	/* src: .main-image (width:100%;height:100%; display:flex; align-items:center; justify-content:center) */
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
}

.seamlessmd-hero__media-el {
	display: block;
	width: 100%;
	height: auto;
	/* src: .main-image.e--hero (background-size:contain-style fit) */
	object-fit: contain;
}

/* Video media with the big red play-button overlay (mirrors the use-case
 * variant's `.play-button.overview` look). The figure becomes the positioning
 * context; the button is centered absolutely on top of the <video>. JS in
 * seamlessmd-blocks.js toggles `.is-playing` on the figure on the video's
 * play / pause / ended events, which fades the button out while playing so
 * the native <video controls> are unobscured. */
.seamlessmd-hero__media--video {
	position: relative;
}

.seamlessmd-hero__video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 88px;
	height: 88px;
	border: 0;
	padding: 0;
	border-radius: 50%;
	background: linear-gradient(149deg,#e20707,#590303 100%,#0677cc);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 10px 32px rgba(226, 49, 45, 0.35), 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
	z-index: 2;
}

.seamlessmd-hero__video-play:hover,
.seamlessmd-hero__video-play:focus-visible {
	transform: translate(-50%, -50%) scale(1.06);
	box-shadow: 0 14px 40px rgba(226, 49, 45, 0.45), 0 6px 18px rgba(0, 0, 0, 0.18);
	outline: none;
}

.seamlessmd-hero__video-play-icon {
	width: 28px;
	height: 28px;
	margin-left: 4px; /* optical centering of the triangle */
	pointer-events: none;
}

/* Fade the overlay out while the video is playing so it doesn't block
 * the native scrubber/play-pause controls. JS adds .is-playing on play,
 * removes on pause/ended. */
.seamlessmd-hero__media--video.is-playing .seamlessmd-hero__video-play {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 767px) {
	.seamlessmd-hero__video-play {
		width: 72px;
		height: 72px;
	}
}

/* CTAs centered when there's no media (home variant) — mirrors the
 * upstream single-column hero layout where the button row sits under a
 * centered heading. */
.seamlessmd-hero--variant-home .seamlessmd-hero__ctas:not(.seamlessmd-hero__ctas--with-media) {
	justify-content: center;
}

/* Two-column layout kicks in at >=992px. Content + CTAs live in the left
 * column via named grid areas; media fills the right column and spans both
 * rows so it sits vertically centered alongside the text + buttons. The
 * mobile DOM order (content → media → ctas) is preserved; grid-area
 * assignments handle the desktop regrouping. */
@media (min-width: 992px) {
	.seamlessmd-hero--variant-home .seamlessmd-hero__inner:has(.seamlessmd-hero__content--with-media) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"content media"
			"ctas    media";
		column-gap: 2em; /* src: .c--hero-wide */
		row-gap: var(--space-4);
		align-items: center;
	}

	.seamlessmd-hero--variant-home .seamlessmd-hero__content--with-media {
		grid-area: content;
		align-self: end;
	}

	/* Final row of the hero grid. `grid-column: 1 / -1` spans every column
	 * explicitly rather than relying on a named area — the named template only
	 * declares `content`/`ctas`/`media`, so an item without an area was being
	 * auto-placed into a single track and the last two awards were pushed out
	 * of the narrow text column and clipped by the hero's `overflow: hidden`.
	 * Auto row placement puts it after `ctas`; no absolute positioning and no
	 * negative margins are involved. */
	.seamlessmd-hero--variant-home .seamlessmd-hero__awards--with-media {
		grid-column: 1 / -1;
		align-self: end;
	}

	.seamlessmd-hero--variant-home .seamlessmd-hero__ctas--with-media {
		grid-area: ctas;
		align-self: start;
	}

	.seamlessmd-hero--variant-home .seamlessmd-hero__media {
		grid-area: media;
	}

	/* No-media fallback: keep the centered single-column layout. */
	.seamlessmd-hero--variant-home .seamlessmd-hero__inner:not(:has(.seamlessmd-hero__content--with-media)) {
		flex-direction: column;
		align-items: center;
	}

	.seamlessmd-hero--variant-home .seamlessmd-hero__content:not(.seamlessmd-hero__content--with-media) {
		max-width: 780px;
		margin: 0 auto;
		text-align: center;
	}
}

/* ---- Variant: home — v2 integrated composition --------------------------
 *
 * Scope: every selector below is prefixed `.seamlessmd-hero--variant-home`,
 * so inner / cpt-auto / use-case / resource / roi / stacked are untouched.
 *
 * Cascade: `assets/css/seamlessmd-theme.css` is enqueued AFTER this file, so
 * at equal specificity the theme file wins. Where one of its home rules has to
 * be neutralised the selector here adds one class (0,3,0 vs its 0,2,0) rather
 * than using `!important`. Those cases are marked "beats theme".
 *
 * Desktop (>=992px) is one integrated surface: the media is lifted out of the
 * grid and pinned to the inline-end half of the full-bleed section, with a
 * white gradient feathering it into the text. Below 992px nothing is absolute
 * — the original single-column flow (content -> media -> CTAs) is preserved.
 *
 * RTL: logical properties throughout. Only two physical things cannot be
 * expressed logically — the gradient direction and the arrow glyph — and each
 * has a narrow `[dir="rtl"]` override at the end of this section. */

.seamlessmd-hero--variant-home {
	/* Local brand blue. The global palette has no blue accent (its
	 * `--seamlessmd-primary` is teal), and this step must not introduce or
	 * change a global token, so the hue is defined here on the block only. */
	--seamlessmd-hero-blue: #1d4ed8;
	--seamlessmd-hero-blue-ink: #17307a;
	--seamlessmd-hero-blue-surface: rgba(239, 244, 255, 0.92);
	--seamlessmd-hero-blue-line: rgba(29, 78, 216, 0.16);
	/* Frosted-glass surface for the floating card. Kept separate from
	 * `--seamlessmd-hero-blue-surface` (which the secondary CTA hover uses) so
	 * the card can be far more translucent without touching the buttons. */
	--seamlessmd-hero-glass: rgba(246, 250, 255, 0.6);
	--seamlessmd-hero-glass-strong: rgba(250, 252, 255, 0.9);
	--seamlessmd-hero-glass-line: rgba(255, 255, 255, 0.7);
	--seamlessmd-hero-glass-shadow: 0 12px 34px rgba(23, 48, 122, 0.16);
	/* Shared so the media can cancel it with a negative inset and bleed to the
	 * full height of the section. */
	--seamlessmd-hero-pad-block: clamp(1.75rem, 4vh, 3rem);
	/* Gradient feathering the image into the text. Many stops on an eased
	 * curve rather than three, so the transition reads as one continuous
	 * surface instead of a visible edge. Solid white through 11% keeps the
	 * copy legible where it overlaps the image, and it is fully clear by 46%
	 * — ahead of the nearer subject — so nobody is washed out.
	 * Flipped for RTL below. */
	--seamlessmd-hero-fade: linear-gradient(
		to right,
		#ffffff 0%,
		#ffffff 28%,
		rgba(255, 255, 255, 0.93) 31%,
		rgba(255, 255, 255, 0.75) 35%,
		rgba(255, 255, 255, 0.48) 39%,
		rgba(255, 255, 255, 0.22) 43%,
		rgba(255, 255, 255, 0.06) 46%,
		rgba(255, 255, 255, 0) 48%
	);
}

/* Section box. `min-height: 70vh` on the base home rule further up floored the
 * section far above its content and produced a large empty band; height is now
 * content-driven. Double class beats the theme file's `padding-block`. */
.seamlessmd-hero.seamlessmd-hero--variant-home {
	min-height: auto;
	padding-block: var(--seamlessmd-hero-pad-block);
}

/* ---- Type ---- */

/* beats theme: its home eyebrow is 0.78rem in the teal `--seamlessmd-primary`. */
.seamlessmd-hero--variant-home .seamlessmd-hero__content .seamlessmd-hero__eyebrow {
	margin-block-end: var(--space-2);
	color: var(--seamlessmd-hero-blue);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.seamlessmd-hero--variant-home .seamlessmd-hero__heading-em {
	/* Own line, still inline-level content of the same single <h1>. */
	display: block;
	color: var(--seamlessmd-hero-blue);
	letter-spacing: -0.02em;
}

.seamlessmd-hero--variant-home .seamlessmd-hero__subheading {
	max-width: 50ch;
	margin-block: var(--space-4) 0;
	color: var(--seamlessmd-text-muted);
	font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
	line-height: 1.6;
	text-align: start;
}

/* ---- CTAs ---- */

.seamlessmd-hero.seamlessmd-hero--variant-home .seamlessmd-hero__ctas {
	gap: var(--space-3);
	margin-block-start: var(--space-5);
}

/* beats theme: it sets 16px/40px padding, 16px type and a 280px min-width on
 * the primary — a hard-coded assumption that predates the two-button layout. */
.seamlessmd-hero--variant-home .seamlessmd-hero__ctas .seamlessmd-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-width: 0;
	padding: 0.8rem 1.4rem;
	border-radius: var(--seamlessmd-radius-md);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: none;
	transform: none;
}

/* Trailing arrow, drawn from a glyph so no icon asset is needed. */
.seamlessmd-hero--variant-home .seamlessmd-hero__ctas .seamlessmd-hero__cta::after {
	content: "\2192";
	font-size: 1em;
	line-height: 1;
}

.seamlessmd-hero--variant-home .seamlessmd-hero__ctas .seamlessmd-hero__cta--primary,
.seamlessmd-hero--variant-home .seamlessmd-hero__ctas .seamlessmd-hero__cta--primary:hover,
.seamlessmd-hero--variant-home .seamlessmd-hero__ctas .seamlessmd-hero__cta--primary:focus-visible {
	background: var(--seamlessmd-hero-blue);
	border: 1px solid var(--seamlessmd-hero-blue);
	color: #ffffff;
}

.seamlessmd-hero--variant-home .seamlessmd-hero__ctas .seamlessmd-hero__cta--primary:hover {
	background: var(--seamlessmd-hero-blue-ink);
	border-color: var(--seamlessmd-hero-blue-ink);
}

.seamlessmd-hero--variant-home .seamlessmd-hero__ctas .seamlessmd-hero__cta--secondary,
.seamlessmd-hero--variant-home .seamlessmd-hero__ctas .seamlessmd-hero__cta--secondary:hover,
.seamlessmd-hero--variant-home .seamlessmd-hero__ctas .seamlessmd-hero__cta--secondary:focus-visible {
	background: #ffffff;
	border: 1px solid var(--seamlessmd-hero-blue);
	color: var(--seamlessmd-hero-blue);
}

.seamlessmd-hero--variant-home .seamlessmd-hero__ctas .seamlessmd-hero__cta--secondary:hover {
	background: var(--seamlessmd-hero-blue-surface);
}

/* ---- Media ---- */

.seamlessmd-hero--variant-home .seamlessmd-hero__media {
	position: relative;
	max-width: 100%;
}

/* beats theme: it zeroes the radius on the home media element.
 * Below 992px the image stays a normal in-flow 3:2 crop. */
.seamlessmd-hero--variant-home .seamlessmd-hero__media .seamlessmd-hero__media-el {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: 100% center;
	border-radius: var(--seamlessmd-radius-card);
}

/* ---- Floating information card ---- */

/* Only ever emitted when it has content, so nothing here can reserve empty
 * space when the card is absent. */
.seamlessmd-hero--variant-home .seamlessmd-hero__card {
	/* Positioned even in the mobile/normal-flow case so the badge below always
	 * anchors to the card itself rather than to the media figure. */
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--space-4) 1.15rem var(--space-4);
	/* Frosted glass: a translucent surface plus a backdrop blur, a near-white
	 * hairline to catch the "lit edge" of the reference, and a soft ambient
	 * shadow. The inset highlight is the top bevel. Browsers without
	 * `backdrop-filter` still get the translucent fill, so text stays legible. */
	background: var(--seamlessmd-hero-glass);
	-webkit-backdrop-filter: blur(14px) saturate(155%);
	backdrop-filter: blur(14px) saturate(155%);
	border: 1px solid var(--seamlessmd-hero-glass-line);
	border-radius: var(--seamlessmd-radius-lg);
	box-shadow: var(--seamlessmd-hero-glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.75);
	text-align: start;
}

/* Person badge, shown only when the editor has not supplied a card icon.
 *
 * A circular badge that straddles the card's block-start / inline-start corner
 * rather than sitting inside it, matching the reference. Two layers:
 *   ::before  the white disc (border + soft shadow)
 *   ::after   the person glyph, painted by tinting a mask with the blue token
 *             so the colour stays in ONE place — a `fill` baked into the data
 *             URI could not read a custom property.
 * The glyph is an inline SVG mask: no markup change, no external asset. */
.seamlessmd-hero--variant-home .seamlessmd-hero__card {
	/* Clears the portion of the badge that overlaps the card. The corner badge
	 * (the ::before disc below) is shown in BOTH cases — built-in person glyph
	 * or a custom icon — so the clearance is unconditional. */
	padding-block-start: 1.35rem;
}

.seamlessmd-hero--variant-home .seamlessmd-hero__card::before,
.seamlessmd-hero--variant-home .seamlessmd-hero__card:not(:has(.seamlessmd-hero__card-icon))::after {
	content: "";
	position: absolute;
	inset-block-start: -1.25rem;
	inset-inline-start: -0.875rem;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
}

.seamlessmd-hero--variant-home .seamlessmd-hero__card::before {
	background: var(--seamlessmd-hero-glass-strong);
	-webkit-backdrop-filter: blur(14px) saturate(155%);
	backdrop-filter: blur(14px) saturate(155%);
	border: 1px solid var(--seamlessmd-hero-glass-line);
	box-shadow: var(--seamlessmd-hero-glass-shadow);
}

.seamlessmd-hero--variant-home .seamlessmd-hero__card:not(:has(.seamlessmd-hero__card-icon))::after {
	background-color: var(--seamlessmd-hero-blue);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='8.2'%20r='3.5'/%3E%3Cpath%20d='M12%2013.4c-3.9%200-6.4%202-6.4%204.1V19h12.8v-1.5c0-2.1-2.5-4.1-6.4-4.1z'/%3E%3C/svg%3E") center / 1.25rem 1.25rem no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='8.2'%20r='3.5'/%3E%3Cpath%20d='M12%2013.4c-3.9%200-6.4%202-6.4%204.1V19h12.8v-1.5c0-2.1-2.5-4.1-6.4-4.1z'/%3E%3C/svg%3E") center / 1.25rem 1.25rem no-repeat;
}

.seamlessmd-hero--variant-home .seamlessmd-hero__card-icon {
	/* The custom icon replaces the built-in person glyph but keeps the SAME
	 * corner badge: it sits over the ::before disc, centred and inset so a
	 * square logo has breathing room inside the circle. Positioned against the
	 * card (which is position:relative), mirroring the ::after glyph's box. */
	position: absolute;
	inset-block-start: -1.25rem;
	inset-inline-start: -0.875rem;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0.55rem;
	box-sizing: border-box;
	object-fit: contain;
	border-radius: 50%;
	z-index: 1;
}

.seamlessmd-hero--variant-home .seamlessmd-hero__card-title {
	margin: 0;
	font-weight: 800;
	font-size: 0.875rem;
	line-height: 1.25;
	letter-spacing: -0.005em;
	color: var(--seamlessmd-hero-blue-ink);
	overflow-wrap: anywhere;
}

.seamlessmd-hero--variant-home .seamlessmd-hero__card-list {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.seamlessmd-hero--variant-home .seamlessmd-hero__card-item {
	position: relative;
	margin: 0;
	padding-inline-start: 1.4rem;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--seamlessmd-text-muted);
	/* Long single-token labels (and long AR strings) wrap instead of widening
	 * the card past its bounded width. */
	overflow-wrap: anywhere;
}

/* Filled blue disc + white check, pseudo-elements only. Sized in em so the
 * marker tracks the item's own font-size. */
.seamlessmd-hero--variant-home .seamlessmd-hero__card-item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.28em;
	width: 0.95em;
	height: 0.95em;
	border-radius: 50%;
	background: var(--seamlessmd-hero-blue);
}

.seamlessmd-hero--variant-home .seamlessmd-hero__card-item::after {
	content: "";
	position: absolute;
	inset-inline-start: 0.345em;
	inset-block-start: 0.46em;
	width: 0.2em;
	height: 0.4em;
	border: solid #ffffff;
	border-width: 0 0.12em 0.12em 0;
	transform: rotate(45deg);
}

/* ---- Below the two-column breakpoint: one stacked column ---- */

/* Below 992px the hero reads as a single stacked column — eyebrow / heading /
 * supporting copy, then the CTAs, then the awards strip, then the photograph.
 * Nothing here is absolutely positioned and the floating card is not shown.
 *
 * `.seamlessmd-hero__inner` is a GRID at these widths, NOT a flex container:
 * `assets/css/seamlessmd-theme.css:2284` declares `display: grid` at (0,2,0)
 * with no media query, and that file loads after this one, so the block file
 * cannot make it flex at equal specificity. Its own `@media (max-width: 991px)`
 * block (line 2352) only swaps the tracks to a single `1fr` column. `order`
 * still moves the figure to the end because grid auto-placement runs over
 * order-modified document order — so the DOM order render.php emits
 * (content → figure → ctas → awards) is left completely alone. */
@media (max-width: 991px) {
	/* The floating glass card is a desktop-only overlay — it is designed to
	 * read on top of the wide photograph, and in a stacked column there is no
	 * image beneath it to sit on. Hidden at the presentation layer only: the
	 * markup, the block attributes and every Admin control stay exactly as
	 * they are, and desktop is untouched. */
	.seamlessmd-hero--variant-home .seamlessmd-hero__card {
		display: none;
	}

	/* Option B stack order — eyebrow → heading → image → paragraph → proof →
	 * CTAs. Reordering is CSS-only: `display: contents` flattens .__content so
	 * its three children (eyebrow, heading, subheading) become effective grid
	 * items of .__inner, which lets `order` slot the media between heading
	 * and subheading without touching render.php. The .__inner grid gap is
	 * cleared so the elements' own block margins (heading margin-bottom,
	 * subheading margin-top) set the tight text rhythm; larger
	 * section-boundary gaps are declared below on media / awards / ctas. */
	.seamlessmd-hero--variant-home .seamlessmd-hero__content {
		display: contents;
	}

	.seamlessmd-hero.seamlessmd-hero--variant-home .seamlessmd-hero__inner {
		row-gap: 0;
	}

	.seamlessmd-hero--variant-home .seamlessmd-hero__eyebrow    { order: 1; }
	.seamlessmd-hero--variant-home .seamlessmd-hero__heading    { order: 2; }
	.seamlessmd-hero--variant-home .seamlessmd-hero__subheading { order: 4; }

	/* Photograph moves to the third slot, immediately after the heading.
	 *
	 * `flex-direction` / `align-items` here replace the former
	 * `:has(.seamlessmd-hero__card)` rule — they are what stretches the
	 * <picture> to the figure's width. Dropped entirely, the figure would fall
	 * back to its base centring flex ROW, where <picture>'s automatic minimum
	 * size is the photograph's intrinsic width, and the image would be laid
	 * out far wider than the column and clipped by the hero's
	 * `overflow: hidden`. */
	.seamlessmd-hero--variant-home .seamlessmd-hero__media {
		order: 3;
		margin-block-start: 0.75rem;
		flex-direction: column;
		align-items: stretch;
		/* A grid child keeps `min-width: auto` and can widen the track past
		 * its container. */
		min-inline-size: 0;
	}

	/* Proof strip and CTA row take clear section-boundary gaps above them so
	 * the reading flow (image → paragraph → proof → actions) reads as three
	 * distinct blocks rather than one wall of text. Both selectors carry the
	 * extra `.seamlessmd-hero` class to reach (0,3,0), because theme.css
	 * loads after this file and sets `margin-top` on the CTA row at (0,2,0). */
	.seamlessmd-hero.seamlessmd-hero--variant-home .seamlessmd-hero__awards {
		order: 5;
		margin-block-start: clamp(1.25rem, 3vw, 2rem);
	}

	.seamlessmd-hero.seamlessmd-hero--variant-home .seamlessmd-hero__ctas {
		order: 6;
		margin-block-start: clamp(0.75rem, 2vw, 1.25rem);
	}

	/* 44px minimum touch target on both hero CTAs. They are already
	 * `inline-flex` with `align-items: center`, so the label stays optically
	 * centred and the existing padding is unchanged — this only adds a floor.
	 * Desktop geometry is untouched: the rule exists only below 992px. */
	.seamlessmd-hero--variant-home .seamlessmd-hero__ctas .seamlessmd-hero__cta {
		min-block-size: 2.75rem;
	}

	/* Art direction for tablet / mobile.
	 *
	 * The base rule further up gives the media `aspect-ratio: 3 / 2`, so its
	 * height is driven by the container width with no ceiling: 239px at 390px
	 * wide but 480px at 768px — 47% of a 1024px-tall viewport. Both sources are
	 * ~1.8:1 studio compositions whose inline-start half is empty bright
	 * background, so most of that height showed nothing and the next section
	 * was pushed far below the fold.
	 *
	 * Swap the ratio for a capped height and let `cover` crop instead. The
	 * clamp resolves to 260px at 390px wide and 320px at the top of the range,
	 * so the figure stays compact at every width in between. Desktop is
	 * untouched — those rules live in `@media (min-width: 992px)` below. */
	.seamlessmd-hero--variant-home .seamlessmd-hero__media .seamlessmd-hero__media-el {
		aspect-ratio: auto;
		block-size: clamp(16.25rem, 38vw, 20rem);
		object-fit: cover;
		/* The English composition seats both people in the inline-end ~55% of
		 * the frame, so the crop anchors there. 25% down keeps both faces in
		 * frame once a wide viewport starts cropping vertically instead of
		 * horizontally. */
		object-position: 100% 25%;
		border-radius: var(--seamlessmd-radius-card);
	}

	/* `object-position` is NOT flow-relative — percentages resolve against the
	 * physical box and do not mirror under `dir="rtl"`. The Arabic asset is the
	 * mirrored composition, with both subjects on the LEFT and the empty
	 * background on the right, so it needs the explicit counterpart. Without
	 * this the Arabic crop would frame the empty half and cut off the
	 * clinician. */
	[dir="rtl"] .seamlessmd-hero--variant-home .seamlessmd-hero__media .seamlessmd-hero__media-el {
		object-position: 0% 25%;
	}
}

/* ---- Tablet band: keep both hero CTAs on one row ---- */

/* `assets/css/seamlessmd-theme.css:2355` sets
 * `.seamlessmd-hero--variant-home .seamlessmd-hero__cta--primary { min-width: 0;
 * width: 100% }` inside its own `@media (max-width: 991px)` (opened at 2351).
 * That forces the primary button to fill the CTA row, which pushes the
 * secondary button onto a line of its own at intrinsic width for the whole
 * 576-991px band. The theme bundle loads AFTER this block stylesheet, so an
 * equal-specificity (0,2,0) rule here would lose; the extra `.seamlessmd-hero`
 * class lifts this selector to (0,3,0) so it wins on specificity regardless of
 * load order. Only `width` is reverted — the theme's `min-width: 0` is kept, so
 * the primary sizes to its label and both buttons share the row, wrapping only
 * if the row genuinely runs out of space.
 *
 * The query is bounded at BOTH ends deliberately. `min-width: 576px` is the
 * exact complement of the `max-width: 575.98px` block at line 105, which stacks
 * the CTAs and gives each `width: 100%` at (0,2,0); an unbounded
 * `max-width: 991px` block would let this (0,3,0) rule outrank that stack and
 * break the approved phone layout. Both edges reuse boundaries this file
 * already draws: 991 is the existing tablet ceiling, and 576 is the exact
 * complement of the existing 575.98 floor — no gap, no overlap, no third
 * breakpoint. */
@media (min-width: 576px) and (max-width: 991px) {
	.seamlessmd-hero.seamlessmd-hero--variant-home .seamlessmd-hero__cta--primary {
		width: auto;
	}
}

/* ---- Desktop: one integrated surface ---- */

@media (min-width: 992px) {
	/* The media is pinned to the SECTION, not to the container, so it can run
	 * to the viewport edge. `.seamlessmd-hero__inner` is therefore made static
	 * (beats theme, which sets position:relative + z-index:1 on it) and the
	 * text layers are given their own stacking instead. */
	.seamlessmd-hero.seamlessmd-hero--variant-home .seamlessmd-hero__inner {
		position: static;
	}

	.seamlessmd-hero--variant-home .seamlessmd-hero__content--with-media,
	.seamlessmd-hero--variant-home .seamlessmd-hero__ctas--with-media,
	.seamlessmd-hero--variant-home .seamlessmd-hero__awards--with-media {
		position: relative;
		z-index: 2;
	}

	/* Text ~46% / image ~54%. The media column stays reserved in the grid so
	 * the copy never runs under the photograph, even though the figure itself
	 * is out of flow. */
	.seamlessmd-hero--variant-home .seamlessmd-hero__inner:has(.seamlessmd-hero__content--with-media) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		column-gap: clamp(2rem, 3vw, 3rem);
		row-gap: var(--space-4);
	}

	.seamlessmd-hero--variant-home .seamlessmd-hero__content--with-media {
		align-self: center;
	}

	/* Two intended lines at ~1440. Two things set the ceiling: the container
	 * caps at 1280px, so above ~1344px the column stops growing while `vw`
	 * keeps rising — the clamp MAX is what must fit; and Nunito Sans 800 is
	 * wide ("Patient Experience." is roughly 10.5em with the -0.02em
	 * tracking), so ~523px / 10.5 caps the type near 45px. Nothing here
	 * prevents wrapping: longer EN or AR headings still reflow. */
	.seamlessmd-hero--variant-home .seamlessmd-hero__content .seamlessmd-hero__heading {
		font-size: clamp(2.25rem, 3.4vw, 3rem);
		line-height: 1.06;
		margin-block-end: var(--space-4);
	}

	/* Image pinned to the inline-end half of the full-bleed section. The
	 * containing block is the section's PADDING box, which already spans the
	 * section's own vertical padding, so `inset-block: 0` reaches the top and
	 * bottom edges without any negative offset. Height comes from the content,
	 * never from a fixed value. */
	.seamlessmd-hero--variant-home .seamlessmd-hero__media {
		position: absolute;
		inset-block: 0;
		inset-inline-end: 0;
		/* Widened from 54% so the photograph starts further toward the copy and
		 * the feather has room to be gradual. The inline-end stays pinned to
		 * the viewport edge — the asymmetry is deliberate: the text keeps the
		 * site container's gutter (x=112 at 1440, the same line as the header
		 * logo and the logo row below) while the image bleeds off the edge. */
		inline-size: 72%;
		display: block;
		margin: 0;
		z-index: 0;
	}

	/* `object-position: 100% 0%` anchors the frame to the photograph's
	 * inline-end and top. Whatever the section height, cover then crops only
	 * from the empty studio side or from the floor — never from the edge or
	 * the top where the two subjects are — so both faces stay whole. */
	.seamlessmd-hero--variant-home .seamlessmd-hero__media .seamlessmd-hero__media-el {
		inline-size: 100%;
		block-size: 100%;
		aspect-ratio: auto;
		object-fit: cover;
		object-position: 100% 5%;
		border-radius: 0;
	}

	/* Decorative feather between the copy and the photograph. */
	.seamlessmd-hero--variant-home .seamlessmd-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--seamlessmd-hero-fade);
		pointer-events: none;
	}

	/* Card placement — upper image area, matching the reference, and inset well
	 * away from the viewport edge.
	 *
	 * Measured from the photograph (1718x916): the patient's head spans
	 * x 885-1070 and the clinician's x 1490-1700, leaving a 420px band of
	 * plant and shelving between them with no face in it. Widening the media
	 * to 62% makes that band ~218px on screen at 1440 — wide enough for the
	 * card. It lands ~26px clear of her hair and ~24px clear of his, and its
	 * inline-end sits ~143px in from the viewport edge. Percentage insets hold
	 * that relationship as the section height changes, and the whole thing
	 * mirrors in RTL because every inset is logical. */
	.seamlessmd-hero--variant-home .seamlessmd-hero__card {
		position: absolute;
		inset-block-start: 18%;
		inset-inline-end: 15%;
		inline-size: min(10.375rem, 20%);
		z-index: 2;
	}
}

/* ---- RTL: the two things logical properties cannot express ---- */

[dir="rtl"] .seamlessmd-hero--variant-home {
	--seamlessmd-hero-fade: linear-gradient(
		to left,
		#ffffff 0%,
		#ffffff 28%,
		rgba(255, 255, 255, 0.93) 31%,
		rgba(255, 255, 255, 0.75) 35%,
		rgba(255, 255, 255, 0.48) 39%,
		rgba(255, 255, 255, 0.22) 43%,
		rgba(255, 255, 255, 0.06) 46%,
		rgba(255, 255, 255, 0) 48%
	);
}

[dir="rtl"] .seamlessmd-hero--variant-home .seamlessmd-hero__ctas .seamlessmd-hero__cta::after {
	content: "\2190";
}

/* Arabic has no letter case, so the uppercase transform the theme applies to
 * the eyebrow is meaningless there — and the tracking hurts legibility. */
[dir="rtl"] .seamlessmd-hero--variant-home .seamlessmd-hero__content .seamlessmd-hero__eyebrow {
	text-transform: none;
	letter-spacing: normal;
}


/* ---- Home hero: embedded awards strip ----
 *
 * These items are part of the hero, not a band beneath it: the markup is a
 * direct child of `.seamlessmd-hero__inner`, and at desktop it takes the
 * `awards` grid area, which spans BOTH columns on the final row. The media is
 * absolutely positioned across the whole section (`inset-block: 0`), so the
 * photograph and its white gradient continue behind and around this row.
 *
 * There is deliberately NO background, border or section padding here — the
 * strip inherits the hero surface. The items are inline-start aligned, so at a
 * 1440 viewport they sit on the solid-white part of the gradient and stay
 * legible while the image continues to their inline-end. */
.seamlessmd-hero--variant-home .seamlessmd-hero__awards {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(1.25rem, 2.6vw, 2.75rem);
	margin: var(--space-5) 0 0;
	padding: 0;
	list-style: none;
	/* A grid item defaults to `min-width: auto`, which lets its content push
	 * the track wider than the container. Both guards keep the strip inside
	 * the hero no matter how long a title runs. */
	min-inline-size: 0;
	max-inline-size: 100%;
}

.seamlessmd-hero--variant-home .seamlessmd-hero__award {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	/* Keeps the titles to roughly two lines and the columns even, without
	 * pinning anything to a fixed pixel width. */
	max-inline-size: 15rem;
}

/* Hairline before an item — used in the reference to separate the awards from
 * the trust statement. Logical inset so it mirrors in RTL. */
.seamlessmd-hero--variant-home .seamlessmd-hero__award--divided {
	border-inline-start: 1px solid var(--seamlessmd-border);
	padding-inline-start: clamp(1.25rem, 2.6vw, 2.75rem);
}

.seamlessmd-hero--variant-home .seamlessmd-hero__award-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	color: var(--seamlessmd-dark-navy, #1e2a5c);
}

/* The trust medallion is tinted and sits on a soft plate, as in the reference. */
.seamlessmd-hero--variant-home .seamlessmd-hero__award-icon--shield {
	color: var(--seamlessmd-hero-blue);
	background: rgba(29, 78, 216, 0.07);
	border-radius: var(--seamlessmd-radius-md);
}

.seamlessmd-hero--variant-home .seamlessmd-hero__award-glyph {
	inline-size: 2.1rem;
	block-size: 2.1rem;
	display: block;
}

.seamlessmd-hero--variant-home .seamlessmd-hero__award-img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	display: block;
}

.seamlessmd-hero--variant-home .seamlessmd-hero__award-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-inline-size: 0;
	text-align: start;
}

.seamlessmd-hero--variant-home .seamlessmd-hero__award-title {
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--seamlessmd-text, #1e2a5c);
	/* Long single-token labels (and long AR strings) wrap rather than
	 * widening the row. */
	overflow-wrap: anywhere;
}

.seamlessmd-hero--variant-home .seamlessmd-hero__award-desc {
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0.02em;
	color: var(--seamlessmd-text-muted);
	overflow-wrap: anywhere;
}

/* Small viewports: one-up stack, and the divider is dropped since it only
 * reads correctly on a single row. */
@media (max-width: 767px) {
	.seamlessmd-hero--variant-home .seamlessmd-hero__awards {
		gap: var(--space-4);
	}

	.seamlessmd-hero--variant-home .seamlessmd-hero__award {
		max-inline-size: none;
		inline-size: 100%;
	}

	.seamlessmd-hero--variant-home .seamlessmd-hero__award--divided {
		border-inline-start: 0;
		padding-inline-start: 0;
	}
}

/* ---- Variant: inner ---- */

.seamlessmd-hero--variant-inner {
	/* Intentional variant override: inner hero uses tighter compact verticals
	 * (60/64px) for secondary-page headers — keeps the surface-alt strip
	 * visually shallower than the home hero. Horizontal padding now comes
	 * from the inner `.seamlessmd-container`. */
	padding-block: 60px 64px;
	background: var(--seamlessmd-surface-alt);
	display: flex;
	align-items: center;
}

.seamlessmd-hero--variant-inner .seamlessmd-hero__inner {
	text-align: center;
	align-items: center;
}

.seamlessmd-hero--variant-inner .seamlessmd-hero__content {
	max-width: 760px;
	margin: 0 auto;
}

.seamlessmd-hero--variant-inner .seamlessmd-hero__heading {
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
	color: var(--seamlessmd-dark-navy);
}

@media (min-width: 992px) {
	.seamlessmd-hero--variant-inner {
		padding-top: 80px;
		padding-bottom: 100px;
	}
}

/* ---- Variant: inner + dark theme (e.g. /company/about-us mirror) ----
 *
 * Opt-in via `useCaseTheme: "dark"` on the inner variant. Renders a
 * dark, full-bleed hero with a cover-sized background photo, a tinted
 * navy overlay (driven by the existing backgroundOverlayColor attr),
 * centered white heading, and a thin horizontal accent line under
 * the heading — mirrors the source `.hero_section.about_us` pattern. */

.seamlessmd-hero--inner-dark {
	background: var(--seamlessmd-dark-navy, #1e2a5c);
	min-height: 360px;
	padding-block: clamp(72px, 8vw, 120px);
	color: #ffffff;
	overflow: hidden;
}

.seamlessmd-hero--inner-dark::before {
	background-size: cover;
	background-position: var(--seamlessmd-hero-bg-position, center);
	opacity: 0.9;
}

.seamlessmd-hero--inner-dark .seamlessmd-hero__heading {
	color: #ffffff;
	font-weight: 700;
	max-width: 22ch;
	margin-inline: auto;
}

.seamlessmd-hero--inner-dark .seamlessmd-hero__eyebrow {
	color: #ffffff;
}

/* Thin horizontal accent line below the heading — Webflow source uses
 * `.horizontal-line.white._48` (48px wide, 4px tall white bar). Suppressed
 * when a subheading is present (e.g. /leadership) so the descriptive
 * paragraph sits directly beneath the title, matching the upstream
 * `.heading-container _69 > h1 + div.less-prom` layout. */
.seamlessmd-hero--inner-dark .seamlessmd-hero__heading::after {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	margin: 1.25rem auto 0;
	background: #ffffff;
	border-radius: 2px;
}

.seamlessmd-hero--inner-dark.seamlessmd-hero--has-subheading .seamlessmd-hero__heading::after {
	display: none;
}

/* Subheading under the heading on the inner-dark variant. White, centered,
 * constrained to a readable measure. Works identically in LTR + RTL since
 * `text-align: center` and `margin-inline: auto` are direction-agnostic. */
.seamlessmd-hero--inner-dark .seamlessmd-hero__subheading {
	margin: 1.25rem auto 0;
	max-width: 60ch;
	color: #ffffff;
	text-align: center;
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.6;
}

/* ---- Variant: cpt-auto ---- */

.seamlessmd-hero--variant-cpt-auto {
	min-height: 45vh;
	/* Intentional variant override: cpt-auto hero uses --space-10 (80px)
	 * verticals consistent with the section-pad token at L≤ — kept explicit
	 * so the CPT-derived hero is visually predictable regardless of the
	 * responsive section-pad scale. Horizontal padding comes from the inner
	 * `.seamlessmd-container`. */
	padding-block: var(--space-10);
	background-color: var(--seamlessmd-dark-navy);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #ffffff;
	display: flex;
	align-items: center;
}

.seamlessmd-hero--variant-cpt-auto .seamlessmd-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(30, 42, 92, 0.55), rgba(30, 42, 92, 0.75));
	pointer-events: none;
}

.seamlessmd-hero--variant-cpt-auto .seamlessmd-hero__inner {
	text-align: center;
	align-items: center;
}

.seamlessmd-hero--variant-cpt-auto .seamlessmd-hero__content {
	max-width: 820px;
	margin: 0 auto;
}

.seamlessmd-hero--variant-cpt-auto .seamlessmd-hero__eyebrow {
	color: var(--seamlessmd-primary-soft);
}

.seamlessmd-hero--variant-cpt-auto .seamlessmd-hero__heading {
	color: #ffffff;
	font-size: clamp(2rem, 1.4rem + 2.5vw, 3.25rem);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.seamlessmd-hero__cta,
	.seamlessmd-hero .seamlessmd-btn {
		transition: none;
	}
	.seamlessmd-hero__media-el {
		animation: none !important;
	}
}

/* =========================================================================
 * use-case variant — specialty / solution landing hero.
 *
 * Emits the upstream Nabed Webflow DOM verbatim (.section.hero.dcj,
 * .two-col-grid.switch, .promo-video, .play-button.overview) so the visual
 * matches the live nabed.net/solutions/<name> pages. The class names
 * below are the upstream ones — kept flat (no seamlessmd-* prefix) so
 * they mirror the source exactly; they're scoped by the outer
 * `.seamlessmd-hero--variant-use-case` block class to avoid colliding with
 * any Webflow CSS a future snapshot might drop in.
 * ========================================================================= */

.seamlessmd-hero--variant-use-case.section.hero.dcj {
	position: relative;
	isolation: isolate;
	/* Pin to 70vh so hero + logo-row (`min-height: 30vh` on specialty pages,
	 * see blocks/logo-row/style.css) together fill the first viewport exactly.
	 * `min-height` rather than `height` so content longer than 70vh still
	 * renders without clipping. */
	min-height: 70vh;
	/* Variant verticals stay editor-driven via --seamlessmd-hero-use-case-pt/pb
	 * (default 8rem) so individual specialty/solution pages can tune their
	 * hero height. Horizontal padding now comes from the inner
	 * `.blog-stack.use-case.dcj` element which carries `.seamlessmd-container`
	 * from render.php. */
	padding-top: var(--seamlessmd-hero-use-case-pt, 2rem);
	padding-bottom: var(--seamlessmd-hero-use-case-pb, 2rem);
	background: var(--seamlessmd-hero-use-case-bg, #ffffff);
	overflow: hidden;
}

/* `.blog-stack.use-case.dcj` carries `.seamlessmd-container` from
 * render.php — width/max-width/margin come from the shared container; this
 * rule only owns position + z-index for stacking. */
.seamlessmd-hero--variant-use-case .blog-stack.use-case.dcj {
	position: relative;
	z-index: 1;
}

.seamlessmd-hero--variant-use-case .two-col-grid.switch.dcj {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
}

/* Left column — text + primary button. */
.seamlessmd-hero--variant-use-case .small-container.hero.dcj {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding-right: var(--space-3);
}

.seamlessmd-hero--variant-use-case .small-container.hero.dcj h1.h1 {
	font-size: 2.5em; /* 40px @ 16px base — matches mirror .h1.lp */
	line-height: 1.2em;
	font-weight: 700;
	color: #0e2840;
	margin: 0;
}

.seamlessmd-hero--variant-use-case .div-block-52.fill {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

/* Stack CTAs on small / x-small (matches .seamlessmd-hero__ctas behavior). */
@media (max-width: 575.98px) {
	.seamlessmd-hero--variant-use-case .div-block-52.fill {
		flex-direction: column;
		align-items: stretch;
	}
	.seamlessmd-hero--variant-use-case .div-block-52.fill > a {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}

.seamlessmd-hero--variant-use-case a.primary-new-button.w-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 30px; /* matches mirror .secondary-button/.primary-button */
	background: #0a58a7;
	color: #ffffff;
	font-weight: 600;
	font-size: 16px;
	border-radius: 50px; /* pill — matches mirror */
	border: 2px solid #0a58a7;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.seamlessmd-hero--variant-use-case a.primary-new-button.w-button:hover,
.seamlessmd-hero--variant-use-case a.primary-new-button.w-button:focus-visible {
	background: #084a8f;
	transform: translateY(-1px);
}

/* Secondary (ghost) button — paired with primary-new-button when an editor
 * adds a second CTA via the hero `ctas` repeater. Same dimensions as primary
 * for visual rhythm, transparent fill + outlined to step back from primary. */
.seamlessmd-hero--variant-use-case a.secondary-new-button.w-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 30px; /* matches mirror .secondary-button */
	background: transparent;
	color: #0a58a7;
	font-weight: 600;
	font-size: 16px;
	border-radius: 50px; /* pill — matches mirror */
	border: 2px solid #0a58a7;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.seamlessmd-hero--variant-use-case a.secondary-new-button.w-button:hover,
.seamlessmd-hero--variant-use-case a.secondary-new-button.w-button:focus-visible {
	background: #0a58a7;
	color: #ffffff;
	transform: translateY(-1px);
}

/* Right column — lightbox link with the responsive Content image + red
 * play-button overlay. */
/* Right column for use-case hero. Mirror .promo-video sizing applies to
 * both the clickable lightbox (<a>) AND the static-image (<div>) form
 * — the latter is emitted when videoLightboxUrl is empty (xlsx PM
 * directive: "replace video with image"). Selector targets both. */
.seamlessmd-hero--variant-use-case .promo-video.use-case-video {
	position: relative;
	display: block;
	border-radius: 4px; /* matches mirror .promo-video */
	overflow: visible;
	width: 100%;
	max-width: 570px; /* matches mirror .promo-video */
	height: 365px; /* matches mirror .promo-video */
	margin-inline: auto;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
	/* Responsive Content image as the card background — desktop default; the
	 * tablet/mobile overrides live in the media queries below. render.php sets
	 * the three --seamlessmd-uc-media-* vars inline (cascade-resolved, so all
	 * three are populated when an image is set). An unset var (no image) simply
	 * resolves to no background. */
	background-image: var(--seamlessmd-uc-media-lg);
	text-decoration: none;
}

/* Use-case responsive media — swap the right-column background image per
 * breakpoint, matching the <picture> sources the other variants use
 * (tablet ≤991px, mobile ≤479px). */
@media (max-width: 991px) {
	.seamlessmd-hero--variant-use-case .promo-video.use-case-video {
		background-image: var(--seamlessmd-uc-media-md);
	}
}

@media (max-width: 479px) {
	.seamlessmd-hero--variant-use-case .promo-video.use-case-video {
		background-image: var(--seamlessmd-uc-media-sm);
	}
}

.seamlessmd-hero--variant-use-case a.promo-video.use-case-video {
	cursor: pointer;
}

.seamlessmd-hero--variant-use-case .use-case-video__mockup {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.seamlessmd-hero--variant-use-case .play-button.overview {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: linear-gradient(149deg,#e20707,#590303 100%,#0677cc);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 32px rgba(226, 49, 45, 0.35), 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.seamlessmd-hero--variant-use-case a.promo-video.use-case-video:hover .play-button.overview,
.seamlessmd-hero--variant-use-case a.promo-video.use-case-video:focus-visible .play-button.overview {
	transform: translate(-50%, -50%) scale(1.06);
	box-shadow: 0 14px 40px rgba(226, 49, 45, 0.45), 0 6px 18px rgba(0, 0, 0, 0.18);
}

.seamlessmd-hero--variant-use-case .play-icon.large {
	width: 28px;
	height: 28px;
	margin-left: 4px; /* optical centering of the triangle */
}

/* Mobile — stack columns: left text above, mockup below. */
@media (max-width: 767px) {
	.seamlessmd-hero--variant-use-case .two-col-grid.switch.dcj {
		grid-template-columns: minmax(0, 1fr);
	}
	.seamlessmd-hero--variant-use-case .small-container.hero.dcj {
		padding-right: 0;
	}
	.seamlessmd-hero--variant-use-case .play-button.overview {
		width: 72px;
		height: 72px;
	}
}

/* -------------------------------------------------------------------------
 * Dark theme for use-case variant — matches the upstream
 * `.hero_section_wrap.dark` specialty-page pattern (e.g. maternity-care,
 * orthopedics). Same 2-col structure as the light variant; swap surface +
 * heading colors, and flip the primary button to the Nabed secondary green.
 * ------------------------------------------------------------------------- */

/* Dark theme uses Nabed seamless-blue base + a footer-shape SVG anchored
 * bottom-center + a radial gradient that darkens toward the bottom-right.
 * Mirror reference: `.hero_section_wrap.dark`. The decoration SVG is
 * a Webflow asset; we ship a local copy under /app/uploads/shared/.
 * Tunable via CSS variables so per-page CSS (rare) can swap the texture or
 * the dark-corner accent color without touching this file. */
.seamlessmd-hero--variant-use-case.seamlessmd-hero--use-case-dark.section.hero.dcj {
	background-color: var(--seamlessmd-hero-use-case-dark-bg, #045089);
	background-image:
		var(--seamlessmd-hero-use-case-dark-texture,
			url('/app/themes/seamlessmd/assets/images/decorative/footer-shape.svg')),
		radial-gradient(circle farthest-side at 100% 100%,
			var(--seamlessmd-hero-use-case-dark-accent, #022d4d),
			var(--seamlessmd-hero-use-case-dark-bg, #045089));
	background-position: 50% 100%, 0 0;
	background-repeat: no-repeat, repeat;
	background-size: contain, auto;
	color: #ffffff;
}

.seamlessmd-hero--variant-use-case.seamlessmd-hero--use-case-dark .small-container.hero.dcj h1.h1 {
	color: #ffffff;
}

.seamlessmd-hero--variant-use-case.seamlessmd-hero--use-case-dark a.primary-new-button.w-button {
	background: #20b261; /* secondary green on dark */
	border-color: #20b261;
}

.seamlessmd-hero--variant-use-case.seamlessmd-hero--use-case-dark a.primary-new-button.w-button:hover,
.seamlessmd-hero--variant-use-case.seamlessmd-hero--use-case-dark a.primary-new-button.w-button:focus-visible {
	background: #199953;
	border-color: #199953;
}

/* Dark-theme secondary (ghost) button — matches mirror .secondary-button.lp:
 * solid 2px white border (no rgba dim), transparent fill, white text. */
.seamlessmd-hero--variant-use-case.seamlessmd-hero--use-case-dark a.secondary-new-button.w-button {
	color: #ffffff;
	border-color: #ffffff;
}

.seamlessmd-hero--variant-use-case.seamlessmd-hero--use-case-dark a.secondary-new-button.w-button:hover,
.seamlessmd-hero--variant-use-case.seamlessmd-hero--use-case-dark a.secondary-new-button.w-button:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	border-color: #ffffff;
}

/* ------------------------------------------------------------------ *
 * Auto-height modifier
 *
 * Opt-in via the `autoHeight` attribute. Drops the variant-specific
 * `min-height` pin (70vh on home/use-case, 45vh on cpt-auto, 360px on
 * inner-dark) so the section sizes to its content, and reduces the
 * vertical padding to 2rem. Used on pages like the Product Overview
 * where the standard 70vh hero is taller than needed.
 *
 * The selectors are intentionally co-class-anchored (`.variant.auto-height`)
 * so they out-specify the per-variant `min-height` / `padding` rules
 * above without needing `!important`.
 * ------------------------------------------------------------------ */
.seamlessmd-hero--auto-height {
	min-height: 0;
	padding-block: 2rem;
}

.seamlessmd-hero--variant-home.seamlessmd-hero--auto-height {
	min-height: 0;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.seamlessmd-hero--variant-inner.seamlessmd-hero--auto-height {
	padding-block: 2rem;
}

.seamlessmd-hero--variant-cpt-auto.seamlessmd-hero--auto-height {
	min-height: 0;
	padding-block: 2rem;
}

.seamlessmd-hero--inner-dark.seamlessmd-hero--auto-height {
	min-height: 0;
	padding-block: 2rem;
}

.seamlessmd-hero--variant-use-case.seamlessmd-hero--auto-height.section.hero.dcj {
	min-height: 37.5vh;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.seamlessmd-hero--variant-use-case .seamlessmd-hero__subheading {
	font-size: inherit;
	color: inherit;
}

@media (min-width: 992px) {
	.seamlessmd-hero--variant-inner.seamlessmd-hero--auto-height {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
}

/* ------------------------------------------------------------------ *
 * Eyebrow inline play-icon (A.4)
 *
 * When `eyebrowHasPlayIcon` is true, the eyebrow gets a small ▶ SVG
 * glyph before its text, wrapped in a pill chip. The SVG uses
 * `currentColor` so the icon inherits the eyebrow's text color.
 * Non-play eyebrows are untouched (no `--has-play` class).
 * ------------------------------------------------------------------ */
.seamlessmd-hero__eyebrow-play-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	margin-inline-end: 6px;
	vertical-align: middle;
	color: var(--seamlessmd-primary, #2563eb);
}

.seamlessmd-hero__eyebrow-play-icon svg {
	width: 10px;
	height: 10px;
	display: block;
}

[dir="rtl"] .seamlessmd-hero__eyebrow-play-icon svg {
	transform: scaleX(-1);
}

.seamlessmd-hero__eyebrow--has-play {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: var(--seamlessmd-radius-pill, 999px);
	background: var(--seamlessmd-primary-soft, #eff4ff);
	color: var(--seamlessmd-primary-dark, #1d4fd7);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ *
 * Inner variant with image slot (A.3)
 *
 * `inner` historically rendered centered text only. When the editor fills
 * the responsive Content media, the figure plumbing kicks in and the layout
 * flips to a 2-col text-left + image-right at ≥768px, stacked below. Reuses
 * the existing `seamlessmd-hero__inner` flex container, just overrides it to
 * grid for this case.
 * ------------------------------------------------------------------ */
.seamlessmd-hero--variant-inner.seamlessmd-hero--has-media .seamlessmd-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--seamlessmd-space-8, 3rem);
	align-items: center;
	/* Follows the shared page-margin token (full-bleed site layout). */
	max-width: var(--seamlessmd-container-max, 1180px);
	margin-inline: auto;
	padding-block: var(--seamlessmd-space-8, 3rem);
}

.seamlessmd-hero--variant-inner.seamlessmd-hero--has-media .seamlessmd-hero__content {
	text-align: start;
	align-items: flex-start;
	max-width: none;
}

.seamlessmd-hero--variant-inner.seamlessmd-hero--has-media .seamlessmd-hero__media {
	margin: 0;
	width: 100%;
}

.seamlessmd-hero--variant-inner.seamlessmd-hero--has-media .seamlessmd-hero__media-el {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--seamlessmd-radius-lg, 16px);
	box-shadow: var(--seamlessmd-shadow-lg, 0 10px 30px rgba(30, 42, 92, 0.12));
}

@media (max-width: 767px) {
	.seamlessmd-hero--variant-inner.seamlessmd-hero--has-media .seamlessmd-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--seamlessmd-space-5, 1.5rem);
	}
}

/* RTL: explicit direction so the grid mirrors with the reading flow
 * (text on the start side, mockup on the end side). */
[dir="rtl"] .seamlessmd-hero--variant-inner.seamlessmd-hero--has-media .seamlessmd-hero__inner {
	direction: rtl;
}

/* ------------------------------------------------------------------ *
 * Resource variant (landing for case studies, research, ROI)
 *
 * Dark navy background, centered white text + optional logo strip below.
 * ------------------------------------------------------------------ */
/* Resource pages share the same dark texture treatment as the use-case
 * variant: Nabed seamless-blue base + footer-shape SVG anchored
 * bottom-center + radial gradient darkening toward the bottom-right.
 * Logos and customer-strip live in a separate logo-row block AFTER the
 * hero (per source); the hero owns only the heading + subhead + CTAs. */
.seamlessmd-hero--variant-resource {
	background-color: var(--seamlessmd-hero-use-case-dark-bg, #045089);
	background-image:
		var(--seamlessmd-hero-use-case-dark-texture,
			url('/app/themes/seamlessmd/assets/images/decorative/footer-shape.svg')),
		radial-gradient(circle farthest-side at 100% 100%,
			var(--seamlessmd-hero-use-case-dark-accent, #022d4d),
			var(--seamlessmd-hero-use-case-dark-bg, #045089));
	background-position: 50% 100%, 0 0;
	background-repeat: no-repeat, repeat;
	background-size: contain, auto;
	color: #ffffff;
	padding-block: var(--seamlessmd-space-10, 5rem);
	min-height: auto;
}

.seamlessmd-hero--variant-resource .seamlessmd-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* .seamlessmd-hero--variant-resource .seamlessmd-hero__content {
	max-width: 800px;
} */

.seamlessmd-hero--variant-resource .seamlessmd-hero__content--centered {
	text-align: center;
}

.seamlessmd-hero--variant-resource .seamlessmd-hero__eyebrow {
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: var(--seamlessmd-space-3, 0.75rem);
}

.seamlessmd-hero--variant-resource .seamlessmd-hero__heading {
	color: #ffffff;
	font-size: 2.5rem;
	line-height: 1.2;
	margin: 0;
	font-weight: 700;
}

.seamlessmd-hero--variant-resource .seamlessmd-hero__subheading {
	color: rgba(255, 255, 255, 0.9);
	font-size: 16px;
	line-height: 1.6;
	margin: var(--seamlessmd-space-4, 1.5rem) 0 0 0;
	font-weight: 400;
}

.seamlessmd-hero--variant-resource .seamlessmd-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: var(--seamlessmd-space-5, 1.75rem);
	justify-content: center;
}

.seamlessmd-hero--variant-resource--split .seamlessmd-hero__ctas {
	justify-content: flex-start;
}

.seamlessmd-hero--variant-resource .seamlessmd-hero__ctas .seamlessmd-btn--primary {
	background-color: #6c4ee4;
	color: #ffffff;
	border: 1px solid #6c4ee4;
	padding: 12px 22px;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.seamlessmd-hero--variant-resource .seamlessmd-hero__ctas .seamlessmd-btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(108, 78, 228, 0.4);
}

.seamlessmd-hero--variant-resource .seamlessmd-hero__ctas .seamlessmd-btn--secondary {
	background-color: transparent;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.6);
	padding: 12px 22px;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
}

/* Split layout: content on the left, illustration on the right.
 * Used by the ROI hero where mediaUrl is set. */
.seamlessmd-hero--variant-resource--split .seamlessmd-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.seamlessmd-hero--variant-resource--split .seamlessmd-hero__content {
	max-width: none;
	text-align: start;
	align-items: flex-start;
}

.seamlessmd-hero--variant-resource--split .seamlessmd-hero__heading,
.seamlessmd-hero--variant-resource--split .seamlessmd-hero__subheading,
.seamlessmd-hero--variant-resource--split .seamlessmd-hero__eyebrow {
	text-align: start;
}

.seamlessmd-hero--variant-resource--split .seamlessmd-hero__inner {
	flex-direction: row;
	align-items: center;
}

.seamlessmd-hero__media--resource {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.seamlessmd-hero__media--resource img {
	max-width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 767px) {
	.seamlessmd-hero--variant-resource--split .seamlessmd-hero__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.seamlessmd-hero--variant-resource--split .seamlessmd-hero__content,
	.seamlessmd-hero--variant-resource--split .seamlessmd-hero__heading,
	.seamlessmd-hero--variant-resource--split .seamlessmd-hero__subheading {
		text-align: center;
	}
	.seamlessmd-hero--variant-resource--split .seamlessmd-hero__ctas {
		justify-content: center;
	}
}

.seamlessmd-hero--variant-resource .seamlessmd-hero__logo-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px 24px;
	margin-top: var(--seamlessmd-space-8, 3rem);
	width: 100%;
	max-width: 960px;
	margin-inline: auto;
}

.seamlessmd-hero--variant-resource .seamlessmd-hero__logo-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	min-width: 140px;
	padding: 8px 18px;
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	text-decoration: none;
}

.seamlessmd-hero--variant-resource .seamlessmd-hero__logo-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}

.seamlessmd-hero--variant-resource .seamlessmd-hero__logo-item .seamlessmd-hero__logo-img,
.seamlessmd-hero--variant-resource .seamlessmd-hero__logo-img {
	max-width: 120px;
	max-height: 40px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

@media (max-width: 767px) {
	.seamlessmd-hero--variant-resource {
		padding-block: var(--seamlessmd-space-7, 3rem);
	}

	.seamlessmd-hero--variant-resource .seamlessmd-hero__heading {
		font-size: clamp(24px, 6vw, 36px);
	}

	.seamlessmd-hero--variant-resource .seamlessmd-hero__logo-strip {
		gap: 12px 16px;
		margin-top: var(--seamlessmd-space-6, 2rem);
	}

	.seamlessmd-hero--variant-resource .seamlessmd-hero__logo-item {
		height: 56px;
		min-width: 120px;
		padding: 6px 14px;
	}

	.seamlessmd-hero--variant-resource .seamlessmd-hero__logo-img {
		max-width: 96px;
		max-height: 32px;
	}
}

/* ------------------------------------------------------------------ *
 * ROI variant (roi-calculator landing)
 *
 * Source mirror: roi-calculator.html `#roi-header`. Navy-gradient
 * section, heading + paragraph on the start side, photo positioned
 * absolutely against the end side and clipped to an ellipse so its
 * inner edge curves into the text column. The section owns no outer
 * block-spacing — the photo runs the full height of the section, top
 * and bottom edges hugged. RTL flips the ellipse anchor to the start
 * edge so the arc still curves inward toward the text.
 * ------------------------------------------------------------------ */
.seamlessmd-hero--variant-roi {
	position: relative;
	overflow: hidden;
	background-color: var(--seamlessmd-hero-use-case-dark-bg, #045089);
	background-image: linear-gradient(164deg, #091f3b, #045089);
	color: #ffffff;
	min-height: auto;
	/* Section owns no block-padding — the inner wrapper handles text
	 * spacing so the absolutely-positioned photo can hit the section's
	 * top + bottom edges without a gap. */
	padding-block: 0;
}

.seamlessmd-hero--variant-roi .seamlessmd-hero__inner {
	display: flex;
	/* align-items: center; */
	/* min-height: clamp(360px, 52vh, 540px); */
	padding-block: clamp(2.5rem, 7vh, 5rem);
}

.seamlessmd-hero--variant-roi .seamlessmd-hero__content {
	max-width: 50%;
	padding-inline-end: var(--seamlessmd-space-6, 2rem);
	text-align: start;
}

.seamlessmd-hero--variant-roi .seamlessmd-hero__heading {
	color: #ffffff;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
}

.seamlessmd-hero--variant-roi .seamlessmd-hero__subheading {
	color: rgba(255, 255, 255, 0.92);
	font-size: 1.0625rem;
	line-height: 1.6;
	margin: var(--seamlessmd-space-4, 1.25rem) 0 0 0;
	font-weight: 400;
}

.seamlessmd-hero__media--roi-arc {
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-end: 0;
	width: 42%;
	pointer-events: none;
}

.seamlessmd-hero__media--roi-arc img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Ellipse anchored to the end edge: width-radius < image width so the
	 * start-side of the photo curves inward (the arc). */
	clip-path: ellipse(95% 100% at 100% 50%);
}

/* RTL: mirror the ellipse anchor so the arc still bites into the text
 * column instead of the section's edge. */
[dir="rtl"] .seamlessmd-hero__media--roi-arc img {
	clip-path: ellipse(95% 100% at 0% 50%);
}

@media (max-width: 991px) {
	.seamlessmd-hero--variant-roi .seamlessmd-hero__content {
		max-width: 58%;
	}
	.seamlessmd-hero__media--roi-arc {
		width: 46%;
	}
}

@media (max-width: 767px) {
	.seamlessmd-hero--variant-roi .seamlessmd-hero__inner {
		flex-direction: column;
		min-height: auto;
		padding-block: var(--seamlessmd-space-6, 2rem) 0;
	}
	.seamlessmd-hero--variant-roi .seamlessmd-hero__content {
		max-width: 100%;
		padding-inline-end: 0;
		text-align: center;
	}
	.seamlessmd-hero__media--roi-arc {
		position: relative;
		width: 100%;
		height: 240px;
		margin-top: var(--seamlessmd-space-5, 1.5rem);
	}
	.seamlessmd-hero__media--roi-arc img {
		clip-path: ellipse(110% 70% at 50% 100%);
	}
	[dir="rtl"] .seamlessmd-hero__media--roi-arc img {
		clip-path: ellipse(110% 70% at 50% 100%);
	}
}

/* Editor option: `alignment: "center"` centers the page title (and CTA row)
 * within the hero. Default `alignment: "start"` keeps the source's
 * leading-edge alignment. Applied via the `seamlessmd-hero--align-center`
 * modifier emitted by render.php. Covers both the generic
 * `__inner` / `__heading` selectors (home / inner / resource / roi
 * variants) and the use-case variant's `.small-container.hero.dcj`
 * heading container. */
.seamlessmd-hero--align-center .seamlessmd-hero__inner,
.seamlessmd-hero--align-center .seamlessmd-hero__heading,
.seamlessmd-hero--align-center .seamlessmd-hero__subheading,
.seamlessmd-hero--align-center .seamlessmd-hero__eyebrow {
	text-align: center;
}

.seamlessmd-hero--align-center .seamlessmd-hero__ctas {
	justify-content: center;
}

/* Use-case `align-center`: collapse the two-col-grid to a single full-width
 * column so the heading lives in the centre of the hero (rather than the
 * left half of the two-col grid). The `.promo-video` mockup slot is hidden
 * when empty (no `$is_static_image` content and no mockup background-image),
 * but the markup always emits it — selecting against the empty case is
 * brittle, so we just collapse the grid and let the empty slot take 0 width.
 * `.small-container.hero.dcj` already constrains content width; centering
 * it via margin-inline + text-align centres the heading across the hero.
 *
 * The selector matches `.two-col-grid.switch.dcj` (all three modifiers)
 * to beat the existing `.seamlessmd-hero--variant-use-case .two-col-grid.switch.dcj`
 * rule at (0,4,0); ours is (0,5,0) so the collapse wins deterministically.
 * Also applied inside the responsive media query so it survives that
 * cascade layer too. */
.seamlessmd-hero--align-center.seamlessmd-hero--variant-use-case .two-col-grid.switch.dcj {
	grid-template-columns: minmax(0, 1fr);
}

.seamlessmd-hero--align-center.seamlessmd-hero--variant-use-case .small-container.hero.dcj {
	margin-inline: auto;
	text-align: center;
	align-items: center;
}

.seamlessmd-hero--align-center.seamlessmd-hero--variant-use-case .small-container.hero.dcj h1.h1 {
	text-align: center;
}

.seamlessmd-hero--align-center.seamlessmd-hero--variant-use-case .promo-video {
	display: none;
}


/* ============================================================
 * Editor-controlled heading width + alignment overrides.
 *
 * Schema: `headingMaxWidth` (px) + `headingAlignment`
 *   (left | center | right) on the hero-banner block. Both are
 *   opt-in — when unset the heading inherits whatever the
 *   variant chose for it (default rule + per-variant overrides
 *   above).
 *
 * Wired via four CSS vars emitted on the hero `<section>` by
 * render.php:
 *   --seamlessmd-hero-heading-max-width   → px
 *   --seamlessmd-hero-heading-text-align  → left | center | right
 *   --seamlessmd-hero-heading-ml          → 0 | auto    (physical)
 *   --seamlessmd-hero-heading-mr          → 0 | auto    (physical)
 *
 * Physical `margin-left` / `margin-right` (not the logical
 * `margin-inline`) so "left" stays visually left and "right"
 * stays visually right under both LTR and RTL — matches the
 * editor's physical label. Vertical margin is left untouched
 * (variants set it via the `margin` shorthand and we want to
 * preserve those). `max-width: none` and `text-align: inherit`
 * are no-ops when the vars are not set, so this rule is safe to
 * apply unconditionally to every hero heading.
 * ============================================================ */
.seamlessmd-hero .seamlessmd-hero__heading,
.seamlessmd-hero h1.h1,
.seamlessmd-hero .h1 {
	max-width: var(--seamlessmd-hero-heading-max-width, none);
	text-align: var(--seamlessmd-hero-heading-text-align, inherit);
	margin-left: var(--seamlessmd-hero-heading-ml, unset);
	margin-right: var(--seamlessmd-hero-heading-mr, unset);
}

/* ============================================================
 * Stacked variant — centered title + button, flush-bottom image.
 *
 * Layout intent (matches source .hero.circle + an editor-driven
 * mockup figure that the source page didn't have):
 *
 *   ┌────────────────────────────────────────┐
 *   │  padding-top 4em                       │
 *   │                                        │
 *   │            <h1> centered               │  ← text/CTA
 *   │            <subheading>                │  ← flex:1 +
 *   │            [Button row]                │  ← justify:center
 *   │                                        │  ← center the
 *   │                                        │  ← stack vertically
 *   │                                        │
 *   │         ┌──────────────────┐           │  ← image touches
 *   │         │   product image  │           │  ← section bottom
 *   │         └──────────────────┘           │  ← (no padding-bottom)
 *   └────────────────────────────────────────┘
 *
 *   - min-height: 70vh — keeps the section tall enough for the
 *     vertical centering to read, AND keeps the logo-row
 *     fill-viewport calc (`100vh − 80px − 70vh`) honest when this
 *     variant is followed by a customers logo-row.
 *   - padding-top: 4em (variant override, matches home/use-case
 *     spacing); padding-bottom: 0 (image is flush-bottom).
 *   - __content is `flex:1 + justify-content:center` so the
 *     heading + ctas stack centers vertically in whatever room
 *     remains after the image takes its natural height.
 *   - __media--stacked is full-width up to a max so the mockup
 *     image scales with the container but never overflows on
 *     ultra-wide viewports.
 * ============================================================ */
.seamlessmd-hero--variant-stacked {
	min-height: 70vh;
	padding-top: 4em;
	padding-bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	background: transparent;
	overflow: hidden;
}

.seamlessmd-hero--variant-stacked .seamlessmd-hero__inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	gap: 0;
}

.seamlessmd-hero--variant-stacked .seamlessmd-hero__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: var(--space-5, 1.5rem);
	/* padding-block: var(--space-5, 1.5rem); */
}

.seamlessmd-hero--variant-stacked .seamlessmd-hero__eyebrow {
	margin: 0;
	text-align: center;
}

.seamlessmd-hero--variant-stacked .seamlessmd-hero__heading {
	margin: 0;
	text-align: center;
	font-family: "Nunito Sans", sans-serif;
	font-weight: 700;
	font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.75rem);
	line-height: 1.2;
	letter-spacing: normal;
	/* color: var(--seamlessmd-dark-navy, #1e2a5c); */
}

.seamlessmd-hero--variant-stacked .seamlessmd-hero__subheading {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--seamlessmd-text, #1e2a5c);
}

.seamlessmd-hero--variant-stacked .seamlessmd-hero__ctas {
	margin: 0;
	justify-content: center;
}

.seamlessmd-hero--variant-stacked .seamlessmd-hero__media--stacked {
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	justify-content: center;
}

.seamlessmd-hero--variant-stacked .seamlessmd-hero__media--stacked picture,
.seamlessmd-hero--variant-stacked .seamlessmd-hero__media--stacked img {
	display: block;
	width: 100%;
	max-width: 1080px;
	height: auto;
	margin: 0 auto;
}

/* Stacked media is a verbatim product mockup, not a card — strip any
 * box-shadow it would otherwise pick up from inner-variant mockup
 * styling or future global hero rules. Anchored to `.--stacked` so
 * it never reaches into other variants' media slots. */
.seamlessmd-hero--variant-stacked .seamlessmd-hero__media--stacked .seamlessmd-hero__media-el {
	box-shadow: none;
}

/* autoHeight modifier (shared toggle): drop the 70vh pin + tighten
 * padding-top, keep padding-bottom: 0 so the image stays flush.
 * Higher-specificity selector (co-class anchor) so it beats the
 * generic .seamlessmd-hero--auto-height rule above. */
.seamlessmd-hero--variant-stacked.seamlessmd-hero--auto-height {
	min-height: 0;
	padding-top: 2rem;
	padding-bottom: 0;
}

/* Mobile: shrink top padding so the heading sits closer to the
 * viewport top and the image still reads on narrow screens. */
@media (max-width: 575.98px) {
	.seamlessmd-hero--variant-stacked {
		padding-top: 2.5em;
	}
	.seamlessmd-hero--variant-stacked .seamlessmd-hero__content {
		/* padding-block: var(--space-3, 1rem); */
		gap: var(--space-4, 1.25rem);
	}
}

/* ============================================================
 * noBottomPadding modifier (universal — every variant).
 *
 * Editor toggle in the Layout panel. When on, the hero section's
 * padding-bottom drops to 0 so its last element sits flush against
 * the next section. Stacked variant already defaults to flush-bottom
 * (see above); for stacked the toggle is a no-op but harmless.
 *
 * Variant selectors range from (0,1,0) for the plain
 * `.seamlessmd-hero--variant-*` rules up to (0,4,0) for the
 * use-case variant's `.section.hero.dcj.seamlessmd-hero--variant-use-case`
 * rule. We list both an unqualified selector (covers everything
 * except use-case) AND a `.section.hero.dcj` co-class anchored
 * variant (matches use-case's (0,4,0) specificity). Both rules
 * land AFTER the variant defaults in source order so the cascade
 * picks the zero-padding declaration on a tie.
 *
 * `padding-block-end` is set alongside `padding-bottom` so this
 * also overrides variant declarations that use the logical
 * `padding-block` shorthand (resource, roi, etc.).
 * ============================================================ */

/* Presence-gated heading accent (e.g. "News & FAQ" with "FAQ" in blue on
 * news-faq). Only exists when the `headingAccent` attribute is set —
 * existing instances render byte-identically. Block-local blue: the theme
 * palette has no blue token (styling-and-rtl.md); value mirrors the
 * pricing blocks' --seamlessmd-pricing-blue so the accents match. */
.seamlessmd-hero .seamlessmd-hero__heading-accent {
	color: #2563eb;
}