/*
 * NEMRA Blocks — CTA Band widget styles (V2).
 *
 * Dark-blue gradient "card" call-to-action used near the bottom of most
 * pages. A radial blue glow blooms from the top-center of the card down
 * into the deep navy base (--nemra-blue-dark). Rounded top corners, a
 * glowing "spotlight" orb centered above the copy, and a constellation
 * of soft decorative spheres scattered around the perimeter (aria-hidden,
 * pointer-events: none). White serif heading with a blue accent word,
 * light body copy, and a blue pill-ish CTA button.
 *
 * Design tokens (V2): --nemra-blue #2173B3, --nemra-blue-dark #042A48,
 * --nemra-blue-vibrant #0078D6, --nemra-light #FCFDFD.
 */

.nemra-cta-band {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	/* No bottom padding — the navy card sits flush against the navy footer
	 * so there's no white sliver between this block and the footer. */
	padding: 120px 0 0;
	background-color: transparent;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
}

/* Tight variant — the block above is already dark, so the shared 120px reads
 * as one long dead gap rather than a section break. Resources overrides the
 * CTA wrapper to 32px for exactly this reason (comp 797:23493 vs the default
 * 797:22671, which keeps 120). */
.nemra-cta-band--tight {
	padding-top: 32px;
}

/* Flush variant — only the CTA component's own 16px card inset (its comp
 * places CTA_Card at y=16 inside the wrapper). For pages whose LAST section
 * already carries the comp's bottom padding, where the default 120 double
 * counts the seam: education's comp (797:23643) runs marquee frame (28 under
 * the photos) + the community section's 64 + this 16 = the whole 109px gap,
 * but the built page stacked 64 + 120 = 184 (Matt 2026-08-24). */
.nemra-cta-band--flush {
	padding-top: 16px;
}

/* Grey ground variant — the single-article comp (797:23044) runs the grey of
 * the "More from" section straight down behind the navy card, so the gap
 * above it and the gutters beside it must not flash the white page ground. */
.nemra-cta-band--ground-grey {
	background-color: #f6f6f6;
}

/* --- Gradient card ----------------------------------------------------- */

.nemra-cta-band__card {
	/* Ring geometry lives here, not on the decoration layer, because the
	 * spotlight orb in the copy column has to be placed against it — it sits
	 * over the top of the ring and has to stay big enough to hide the orb
	 * passing behind it. See the sponsor orbit section below. */
	--ring-r: 447px;
	--orb-size: 103px;
	--arc-top: 162px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* Inset from the viewport edges — the card + footer read as one rounded
	 * navy panel floating on the light ground (comp 571:21318). */
	width: calc(100% - 20px);
	margin: 0 auto;
	padding: 80px 32px;
	overflow: hidden;
	border-radius: 20px 20px 0 0;
	background-color: var(--nemra-blue-dark, #042a48);
	/*
	 * Two stacked radial blooms (each at 0.5 opacity over the navy base),
	 * matching the Figma comp's layered gradient: a tighter inner glow plus
	 * a much wider horizontal wash so the bloom spreads across the full top
	 * edge instead of staying a tight halo. Both centered at 50% / -39%.
	 */
	background-image:
		radial-gradient(
			70.8% 77.4% at 50% -39%,
			rgba(68, 173, 255, 0.5) 0%,
			rgba(52, 140, 209, 0.5) 17%,
			rgba(36, 108, 164, 0.5) 34%,
			rgba(20, 75, 118, 0.5) 51%,
			rgba(12, 58, 95, 0.5) 59%,
			rgba(4, 42, 72, 0.5) 68%,
			rgba(4, 42, 72, 0) 100%
		),
		radial-gradient(
			157.8% 77.4% at 50% -39%,
			rgba(68, 173, 255, 0.5) 0%,
			rgba(52, 140, 209, 0.5) 24%,
			rgba(36, 108, 164, 0.5) 48%,
			rgba(20, 75, 118, 0.5) 72%,
			rgba(12, 58, 95, 0.5) 83%,
			rgba(4, 42, 72, 0.5) 95%,
			rgba(4, 42, 72, 0) 100%
		);
}

/* --- Content column ---------------------------------------------------- */

.nemra-cta-band__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 32px;
	width: 100%;
	max-width: 566px;
	text-align: center;
}

/* Glowing spotlight orb above the heading. */
.nemra-cta-band__orb {
	position: relative;
	flex: 0 0 auto;
	width: 131px;
	height: 131px;
	/* Push the orb down toward Figma's ~180px-from-top anchor, then pull the
	   heading up under it so it overlaps slightly — matching the tight Figma
	   composition where the orb kisses the top of the H2. */
	margin-top: 34px;
	margin-bottom: -12px;
	border-radius: 50%;
	background:
		radial-gradient(
			circle at 50% 38%,
			#cfeeff 0%,
			#7ec8ff 26%,
			#2f8fe0 62%,
			#0a4f96 100%
		);
	box-shadow:
		0 0 60px 18px rgba(68, 173, 255, 0.55),
		inset 0 -10px 24px rgba(4, 42, 72, 0.45),
		inset 0 8px 18px rgba(255, 255, 255, 0.45);
}

/* Round-3 comp (797:21373) puts this heading in Heading/H3 — Poppins Medium
   40/-1. The earlier round's serif treatment is gone. */
.nemra-cta-band__heading {
	margin: 0;
	max-width: 440px;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 40px;
	line-height: 1.2;
	letter-spacing: -1px;
	font-weight: 500;
	color: var(--nemra-light, #fcfdfd);
}

.nemra-cta-band__heading-accent {
	color: var(--nemra-blue-vibrant, #0074cf);
}

.nemra-cta-band__body {
	margin: 0;
	max-width: 438px;
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 14px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--nemra-light, #fcfdfd);
}

.nemra-cta-band__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
	border: 1px solid rgba(252, 253, 253, 0.08);
	border-radius: 5px;
	background-color: var(--nemra-blue, #2173b3);
	color: var(--nemra-light, #fcfdfd);
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	text-decoration: none;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.nemra-cta-band__cta:hover,
.nemra-cta-band__cta:focus-visible {
	background-color: var(--neutral-dark-88, rgba(23, 23, 26, 0.88));
	color: var(--nemra-light, #fcfdfd);
}

.nemra-cta-band__cta:focus-visible {
	outline: 2px solid var(--nemra-light, #fcfdfd);
	outline-offset: 3px;
}

.nemra-cta-band__arrow {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	stroke: currentColor;
}

/* --- Sponsor orbit ring ------------------------------------------------ */

/*
 * The comp (node 7:8139) draws the sponsor marks as twelve orbs spaced 30°
 * apart on one big circle whose centre sits far below the copy, clipped by
 * a mask so only the top arc crosses the card — which is why they read as a
 * scatter of bubbles flanking the heading rather than as a ring. Measured
 * off the ring artwork at the comp's 1440 width: radius 447px, orb 103px,
 * arc apex 162px below the top of the card, mask fading out ~500px down.
 *
 * Everything derives from --ring-r / --orb-size / --arc-top, so a narrow
 * viewport only has to shrink those three numbers. --arc-top is the anchor:
 * the top of the arc stays put while the circle tightens.
 */
.nemra-cta-band__decoration {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
	/*
	 * The fade is what knocks the marks back — in the comp they are not
	 * full-strength brand colour, they dim with depth: sampling the render
	 * gives ~0.78 opacity at the upper pair (222px down) and ~0.32 at the
	 * lower pair (385px down). That is a linear ramp holding solid to ~140px
	 * and reaching zero at ~500px, which is also where the comp's mask
	 * rectangle ends. Expressed against the radius so it survives scaling.
	 */
	-webkit-mask-image: linear-gradient(
		to bottom,
		#000 calc(var(--arc-top) - var(--ring-r) * 0.05),
		transparent calc(var(--arc-top) + var(--ring-r) * 0.76)
	);
	mask-image: linear-gradient(
		to bottom,
		#000 calc(var(--arc-top) - var(--ring-r) * 0.05),
		transparent calc(var(--arc-top) + var(--ring-r) * 0.76)
	);
}

/* Zero-size origin at the circle's centre; the orbs hang off it on the
 * radius, so rotating this one element carries all twelve around. */
.nemra-cta-band__ring {
	position: absolute;
	left: 50%;
	top: calc(var(--arc-top) + var(--ring-r));
	width: 0;
	height: 0;
}

.nemra-cta-band__circle {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--orb-size);
	height: var(--orb-size);
	margin: calc(var(--orb-size) / -2) 0 0 calc(var(--orb-size) / -2);
	transform: rotate(calc(var(--slot, 0) * var(--slot-step, 12deg))) translateY(calc(var(--ring-r) * -1));
}

/* Undo the slot rotation so the badge itself sits square. The halo lives
 * here rather than on the mark: this layer isn't individually animated, so
 * a box-shadow costs far less to paint than a filter on all thirty. */
.nemra-cta-band__circle-face {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-shadow: 0 0 22px rgba(120, 190, 255, 0.22);
	transform: rotate(calc(var(--slot, 0) * var(--slot-step, 12deg) * -1));
}

/* A slot with no mark keeps the plain glow sphere. Centred highlight, so
 * nothing gives away that this layer turns with the ring. */
.nemra-cta-band__circle-face:not(:has(.nemra-cta-band__circle-logo)) {
	background:
		radial-gradient(
			circle at 50% 50%,
			rgba(214, 232, 248, 0.42) 0%,
			rgba(96, 156, 210, 0.30) 38%,
			rgba(33, 115, 179, 0.18) 64%,
			rgba(4, 42, 72, 0.04) 100%
		);
	box-shadow: 0 0 28px 6px rgba(33, 115, 179, 0.22);
	mix-blend-mode: screen;
	opacity: 0.92;
}

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

@media (max-width: 768px) {
	/* The mobile comps place the Footer instance (CTA at its y=0, navy from
	 * the very top) flush against the preceding section on every page — the
	 * seam above the navy belongs entirely to that section's own bottom
	 * padding (home 797:21374: FAQ's 80 → Footer at its exact bottom edge;
	 * education 797:23804: marquee → Footer, 0). So the band contributes
	 * nothing here, unlike desktop's 120/32. */
	.nemra-cta-band {
		padding: 0;
	}

	/* Tight variant sits under a navy block (resources recordings), and its
	 * mobile comp (797:23494) shows 24px of the light ground between the two
	 * navy fields — the footer group's own top inset, which the flush-seam
	 * rule above would otherwise erase. */
	.nemra-cta-band--tight {
		padding-top: 24px;
	}

	/* Mobile comp (797:21509) runs the navy full-bleed — no light gutter
	 * around the card — rounds the top corners at 32 (token Large's mobile
	 * value), and pads 56 over the art down to 32 under the button. */
	.nemra-cta-band__card {
		width: 100%;
		border-radius: 32px 32px 0 0;
		padding: 56px 20px 32px;
	}

	.nemra-cta-band__inner {
		gap: 12px;
	}

	/* Mobile keeps the serif heading the desktop round dropped: the comp's
	 * CTA title is Libre Baskerville 28/-0.7 on a 252px measure, with the
	 * body under it at the b3 mobile size (10). Confirmed as the intended
	 * type by the 2026-08 feedback round — this is not the stale-token trap,
	 * the family is drawn serif in the comp itself. */
	.nemra-cta-band__heading {
		max-width: 252px;
		font-family: var(--nemra-font-heading, 'Libre Baskerville', Georgia, serif);
		font-weight: 400;
		font-size: 28px;
		letter-spacing: -0.7px;
	}

	.nemra-cta-band__body {
		max-width: 252px;
		font-size: 10px;
		line-height: 1.5;
	}

	.nemra-cta-band__cta {
		padding: 10px 12px;
		/* UI/Button-1 is 12 in the mobile mode (footer comp 797:21509). */
		font-size: var(--nemra-t-btn-size, 12px);
	}
}

/* The marks are full-bleed circular badges in the comp — each sponsor's own
 * brand colour fills the disc — not a logo dropped on a white sphere. The
 * artwork carries its own soft edge, so the halo here only lifts it off the
 * navy. */
.nemra-cta-band__circle-logo {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: contain;
}

/*
 * The ring turns anticlockwise; each mark turns back at the same rate, so
 * the orbs travel around the circle while the wordmarks stay upright and
 * legible. Both animations share one duration and one clock, so they cannot
 * drift apart. Duration is editable per widget (--nemra-orbit-duration).
 */
.nemra-cta-band__ring {
	animation: nemra-cta-band-orbit var(--nemra-orbit-duration, 45s) linear infinite;
}

.nemra-cta-band__circle-logo {
	animation: nemra-cta-band-orbit-reverse var(--nemra-orbit-duration, 45s) linear infinite;
}

@keyframes nemra-cta-band-orbit {
	from { transform: rotate(0deg); }
	to   { transform: rotate(-360deg); }
}

@keyframes nemra-cta-band-orbit-reverse {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.nemra-cta-band__ring,
	.nemra-cta-band__circle-logo {
		animation: none;
	}
}

/* "+ Your Brand" label inside the glowing center orb. */
.nemra-cta-band__orb {
	display: flex;
	align-items: center;
	justify-content: center;
}

.nemra-cta-band__orb-label {
	max-width: 80%;
	font-size: 12px;
	line-height: 1.35;
	text-align: center;
	color: #ffffff;
	text-shadow: 0 1px 6px rgba(4, 42, 72, 0.35);
}

/* Below the 1440 grid the card narrows but the copy column does not, so the
 * ring has to tighten or the mid-arc orbs land on top of the body text.
 * Shrinking the radius pulls them in; the arc apex stays where it is. */
@media (max-width: 1299px) {
	.nemra-cta-band__card {
		--ring-r: 360px;
		--orb-size: 88px;
	}
}

/*
 * Mobile has its own comp (footer 797:21509 on the V2 file, a 400-wide
 * frame) and it is not the desktop ring shrunk down — proportionally it is
 * a much bigger circle. Measured off the same "circles 1" element there:
 * 693px across, so radius 308, orb 71, arc apex 112.5 below the card top,
 * all on a 400 card. That puts the flanking pair right at the card edges
 * instead of huddled around the spotlight.
 *
 * Sized against the card — full-bleed 100vw on mobile — so the whole
 * composition scales with the viewport, then capped at the 769px+ values so
 * the two ranges meet without a jump — every cap is reached before this
 * query ends.
 */
@media (max-width: 768px) {
	.nemra-cta-band__card {
		--ring-r: min(77vw, 360px);
		--orb-size: min(17.8vw, 88px);
		--arc-top: min(28.1vw, 162px);
		--spot-size: min(26.7vw, 131px);
	}

	/*
	 * The spotlight is 107px on the 400 comp, not the desktop 131 — at 131
	 * it dwarfed the sponsor marks, which is what read as wrong scale. Its
	 * top is derived from the ring rather than fixed: the comp centres it
	 * 7px below the arc apex, and holding that relationship is what keeps
	 * the orb passing behind it hidden at every width (a fixed offset let a
	 * sliver of it show once the ring hit its cap near 768). 56px is the
	 * card's mobile padding-top, which the margin has to cancel out.
	 */
	.nemra-cta-band__orb {
		width: var(--spot-size);
		height: var(--spot-size);
		margin-top: calc(var(--arc-top) + 8px - 56px - var(--spot-size) / 2);
		/* Comp puts the heading 66px under the spotlight (heading top sits
		 * at 240 on the 468 card). The column's 12px gap supplies part of
		 * that, this margin the rest. */
		margin-bottom: 54px;
	}
}

/* --- Globe treatment --------------------------------------------------- */

/*
 * The client's replacement for the retired sponsor orbit: a dotted sphere
 * that settles on North America ("Earth view with USA as the background").
 * There is no Figma comp for it — the client's own note says it isn't in the
 * file anywhere — so these numbers are a starting position to react to, not
 * measurements. Size and opacity are overridable per widget.
 *
 * The card is only ~480px tall while the sphere wants to be bigger than that,
 * so the globe deliberately overflows top and bottom and the card's own
 * overflow:hidden crops it. That is the "planet behind the copy" read; the
 * vignette below is what stops the crop from showing as a hard edge.
 */
.nemra-cta-band__decoration--globe {
	/*
	 * Sized and anchored so the sphere's top arc clears the card's top edge and
	 * most of the globe falls below the card/footer seam, disappearing behind
	 * the footer — Matt's framing, 2026-09-03, re-solved twice on 2026-09-08.
	 * First pass went bigger and lower (960 sphere at 64 clearance, 57% below
	 * the seam); that read as too big and sat too low, so the settled answer
	 * splits the difference on size and takes the arc back up to the top edge:
	 * an 800 sphere between the original 762 and that 960, at 10px of
	 * clearance, 41% below the seam. (864 first, trimmed once more by eye.) Ten pixels is deliberate and tight — the
	 * arc is meant to graze the top of the blue card, not float below it.
	 *
	 * The two numbers are not independent of the SCRIPT either: theta parks the
	 * focus latitude at the sphere's middle, and dropping the middle another
	 * 139px took the USA down onto the CTA button. FOCUS_LAT in
	 * cta-band-globe.js is re-derived from the pair each time — 15 for the
	 * original, 0 for the too-low pass, 14 for these numbers — to keep the
	 * country in the gap between the heading and the body. Change either of these and re-derive
	 * that, with a marker — see the note on FOCUS_LAT.
	 *
	 * Clearance is anchored in PIXELS off the top edge, not as a percentage of
	 * the card. The card is not a fixed height: agents and service-providers
	 * carry shorter body copy, wrap to two lines instead of three, and come out
	 * at 459px against everyone else's 481. A percentage anchor ties the top
	 * clearance to that height and left both pages with 5px of gap — the globe
	 * all but touching the card edge, which is the one thing this framing is
	 * supposed to avoid. Anchoring the top instead holds the clearance constant
	 * and lets the seam share absorb the difference (41% -> 44% at the current
	 * numbers), which nobody can see. It matters more at 10px of clearance than
	 * it ever did at 24: a percentage anchor here would put the short cards'
	 * arc through the top edge entirely. `globeshot.mjs --sweep` is what proves
	 * it: it reports the top clearance for all fourteen pages at a breakpoint
	 * and fails loudly if the spread is anything but zero.
	 *
	 * cobe draws the sphere at 0.8x the canvas box, so the canvas has to start
	 * 0.1x above where the sphere should: top = clearance - size * 0.1. Size
	 * therefore sets how far the globe bleeds past the seam, on its own.
	 */
	--globe-clear: 10px;
	--globe-size: min(1000px, 96vw);
	--globe-opacity: 0.55;
	/*
	 * A radial vignette, NOT the orbit's downward linear fade. The linear one
	 * is keyed to --arc-top/--ring-r for a ring whose centre sits below the
	 * card; reused here it fell to 35% opacity right across the sphere's
	 * middle, which is exactly where the continents and the USA are — the
	 * globe read as a faint smudge. This fades the rim instead of the centre.
	 *
	 * Stops are lengths off --globe-size, not the percentages this used to
	 * carry. A percentage stop resolves against the CARD's diagonal while the
	 * sphere is sized independently, so the two silently drift apart: growing
	 * the globe pushed its rim further out into the fade and washed it out,
	 * and mobile's smaller card had already pulled the transparent stop
	 * (216px) inside the sphere's own radius (220px), erasing the rim
	 * altogether. The sphere's radius is 0.4 x --globe-size, so these are
	 * 0.84r opaque / 1.35r half / 1.71r clear — the same treatment the
	 * percentages produced at 952px, now at any size.
	 */
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 calc(var(--globe-size) * 0.336), rgba(0, 0, 0, 0.55) calc(var(--globe-size) * 0.54), transparent calc(var(--globe-size) * 0.684));
	mask-image: radial-gradient(circle at 50% 50%, #000 calc(var(--globe-size) * 0.336), rgba(0, 0, 0, 0.55) calc(var(--globe-size) * 0.54), transparent calc(var(--globe-size) * 0.684));
}

/*
 * Square, centred on the card both ways so the USA — which the script brings
 * to the centre of the sphere — lands in the middle of the composition rather
 * than behind the heading.
 *
 * The element must carry its box in CSS: the script measures this rect to
 * size the backing store at DPR, so a canvas with no CSS size would render
 * at the 300x150 HTML default.
 */
.nemra-cta-band__globe {
	position: absolute;
	/* See --globe-clear above: the sphere is inset 0.1x inside the canvas box,
	 * so the box starts that much higher than the sphere's intended top. */
	top: calc(var(--globe-clear, 24px) - var(--globe-size) * 0.1);
	left: 50%;
	display: block;
	width: var(--globe-size);
	height: var(--globe-size);
	margin: 0 0 0 calc(var(--globe-size) / -2);
	opacity: var(--globe-opacity);
	/* No CSS transition on opacity — the fade-in is the script's, applied
	 * through cobe's own `opacity` uniform so it composites with the sphere
	 * lighting rather than fading the whole canvas including the glow. */
	pointer-events: none;
}

/*
 * Soft scrim behind the copy column. Without it the heading sits directly on
 * the densest part of the dot field and the two fight; dimming the whole globe
 * far enough to fix that flattens it back into a smudge. This keeps the sphere
 * at full strength and darkens only what is behind the type. Kept light: the
 * rotation parks North America dead centre, which is exactly where this sits,
 * so a heavier scrim dims the one thing the treatment exists to show. That was
 * true of the old marker cluster and it is still true of the continent itself.
 *
 * Sibling selector, so it exists only on bands actually drawing the globe —
 * the orbit and None treatments are untouched.
 */
.nemra-cta-band__decoration--globe ~ .nemra-cta-band__inner::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	width: 150%;
	height: 150%;
	transform: translate(-50%, -50%);
	background: radial-gradient(
		ellipse at 50% 50%,
		rgba(4, 42, 72, 0.5) 0%,
		rgba(4, 42, 72, 0.3) 45%,
		rgba(4, 42, 72, 0) 72%
	);
	pointer-events: none;
}

@media (max-width: 768px) {
	/*
	 * Mobile card is full-bleed with 20px gutters and a much shorter copy
	 * measure, so the desktop sphere would swallow the type. Smaller, and
	 * knocked further back.
	 */
	.nemra-cta-band__decoration--globe {
		/* The vw cap is what actually binds at 390px, so it is the number that
		 * sets the framing on a phone. Stepped with desktop on 2026-09-08 to
		 * keep the two treatments reading the same — the sphere takes the same
		 * split-the-difference step and the clearance comes back to the top
		 * edge, which puts a 390px phone at 34% below the seam against
		 * desktop's 41%. Solved against the mobile card's own 315px height,
		 * NOT inherited: the desktop pair would swallow a card that short. */
		--globe-size: min(580px, 148vw);
		--globe-clear: 8px;
		--globe-opacity: 0.5;
	}
}