/* Page Hero — the light page header. */
.srweb .srw-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	/* Reaches the top edge: the site nav floats over it (fixed) and reserves no
	   height, so the hero provides the gap itself.
	   This used to be a negative margin calibrated to the nav height — but that
	   height changes per breakpoint, so it bled too much at some widths and too
	   little at others. With padding there is no measurement to get right: the hero
	   always starts at 0 and the content lands below the bar, whatever it measures. */
	padding-top: calc(var(--srw-nav-h, 0px) + var(--srw-hero-top, 8.5rem));
	padding-bottom: var(--sp-2xl);
}
/* Less top spacing on small screens, where the logo has no big circular bubble. */
@media (max-width: 900px) {
	.srweb .srw-hero { --srw-hero-top: 5rem; }
}
/* Mesh measured in rem FROM THE TOP EDGE of the hero.
   The hero already reached the top and ran behind the nav, but you could not see
   it: the base gradient started at pure white, so its upper band blended into the
   header and looked like an empty gap. Now colour enters from the first pixel,
   and the radials — anchored in rem — still land over the title. The top padding
   is a known value per breakpoint, so there is no need to measure it against
   percentages of the total height, which shift with the content. */
.srweb .srw-hero--aurora {
	background-image:
		radial-gradient(ellipse 55% 24rem at 12% 17rem, rgba(34,211,238,.24), transparent 62%),
		radial-gradient(ellipse 48% 20rem at 88% 13rem, rgba(249,115,22,.12), transparent 60%),
		linear-gradient(180deg, #f7fcfd 0%, #f4fbfd 100%);
	background-repeat: no-repeat;
}
@media (max-width: 900px) {
	.srweb .srw-hero--aurora {
		background-image:
			radial-gradient(ellipse 85% 17rem at 22% 12rem, rgba(34,211,238,.24), transparent 62%),
			radial-gradient(ellipse 75% 14rem at 92% 9rem, rgba(249,115,22,.12), transparent 60%),
			linear-gradient(180deg, #f7fcfd 0%, #f4fbfd 100%);
	}
}
.srweb .srw-hero--soft { background: linear-gradient(180deg, #fff 0%, #f4f5f7 55%, #eef0f4 100%); }
.srweb .srw-hero--plain { background: #fff; }

.srweb .srw-hero-top { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-lg); }
.srweb .srw-hero-sub { margin-top: var(--sp-md); font-size: 1.15rem; line-height: 1.6; color: var(--c-text); max-width: 60ch; }

/* share bar */
.srweb .srw-share { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--c-text-soft); }
/* 40px, the same size as the unified share bar on the sr_* pages — one size across the whole site. */
.srweb .srw-share a { width: 40px; height: 40px; border-radius: 11px; background: #fff; border: 1.5px solid var(--c-ink); display: inline-flex; align-items: center; justify-content: center; color: var(--c-ink); transition: transform .2s, background-color .2s, color .2s, box-shadow .2s; }
.srweb .srw-share a:hover { transform: translateY(-2px); background: var(--c-ink); color: #fff; box-shadow: var(--sh-soft); }
.srweb .srw-share svg { width: 17px; height: 17px; }