/* Front-page sections. One block per Figma frame, top to bottom. */

/* ============================================================ Shared pieces */

/* The page alternates dark and light bands. Light sections re-point the
   semantic tokens rather than overriding every rule. */
.sn-section--light {
	--sn-text: var(--sn-neutral-dark);
	--sn-text-muted: var(--sn-neutral-dark);
	--sn-text-strong: var(--sn-neutral-darkest);
	--sn-border: var(--sn-dark-15);
	--sn-border-strong: var(--sn-dark-15);

	background-image: linear-gradient(115deg, var(--sn-white) 0%, var(--sn-white) 42%, var(--sn-blue-lightest) 100%);
	color: var(--sn-neutral-dark);
}

.sn-section--light h1,
.sn-section--light h2,
.sn-section--light h3,
.sn-section--light h4,
.sn-section--light h5,
.sn-section--light h6 {
	color: var(--sn-neutral-darkest);
}

/* On the light bands the eyebrow is set in the body colour, not the accent. */
.sn-section--light .sn-tagline {
	color: var(--sn-neutral-darkest);
}


/* Section heading block: a two-weight Oxanium headline over a muted lead
   paragraph. The design consistently emphasises the second half of the
   headline, so <strong> carries the heavier weight rather than bold. */
.sn-section-title {
	display: flex;
	flex-direction: column;
	gap: var(--sn-gap-sm);
	max-width: var(--sn-measure);
}

.sn-section-title__heading {
	font-size: var(--sn-size-h2);
	font-weight: var(--sn-weight-h2);
	letter-spacing: var(--sn-tracking-h2);
}

.sn-section-title__heading strong {
	font-weight: var(--sn-weight-medium);
}

.sn-section-title__text {
	color: var(--neutral-darkest);
	font-size: var(--sn-size-medium);
	font-weight: var(--sn-weight-light);
	line-height: 1.5;
}

/* Diagonal hairline streaks — recurring decorative motif (Figma "Vector 4/5"). */
.sn-streak {
	position: absolute;
	z-index: -1;
	height: 1px;
	background-color: var(--sn-blue-lightest);
	opacity: 0.4;
	transform: rotate(-45deg);
	pointer-events: none;
}


/* ===================================================== 1. Hero (10255:66840) */

.sn-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(861px, 100vh);
	padding-top: calc(var(--sn-header-height) + var(--sn-section-md));
	padding-bottom: 140px;
	overflow: hidden;
	isolation: isolate;
}

.sn-hero__bg {
	z-index: -1;
}

/* The source plate is much wider than the hero box, so `cover` crops the sides.
   Bias left to keep the earth's lit limb — the design's focal point — in frame. */
.sn-hero__bg-img {
	object-position: 32% center;
}

/* The clip is composed for a centred crop, unlike the still. */
.sn-hero__bg-video {
	object-position: center center;
}

/* The design darkens the lower-left so the headline holds contrast over the
   bright limb of the earth, and fades the whole plate into the section below so
   the hero and the band beneath it meet without a hard seam. */
.sn-hero__scrim {
	background:
		linear-gradient(180deg, rgba(2, 5, 9, 0.55) 0%, rgba(2, 5, 9, 0) 32%),
		linear-gradient(75deg, rgba(2, 5, 9, 0.8) 12%, rgba(2, 5, 9, 0.25) 55%, rgba(2, 5, 9, 0.55) 100%),
		linear-gradient(180deg, rgba(2, 5, 9, 0) 55%, rgba(2, 5, 9, 0.75) 82%, var(--sn-firefly-darkest) 100%);
}

/* Two hairline streaks crossing the frame at -45deg (Figma vectors 4 and 5). */
.sn-hero__streak {
	position: absolute;
	z-index: -1;
	height: 1px;
	background-color: var(--sn-blue-lightest);
	opacity: 0.4;
	transform: rotate(-45deg);
	transform-origin: center;
	pointer-events: none;
}

.sn-hero__streak--a {
	top: 68%;
	left: 20%;
	width: 340px;
}

.sn-hero__streak--b {
	top: 26%;
	left: 74%;
	width: 840px;
}

/* The hero is the one region Figma lays out on the page padding rather than the
   1280 container: 64px gutters over the full width, giving a 1312px band split
   725 / 31 / 556. The narrower shared container would force the headline to a
   fourth line. */
.sn-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 725fr) minmax(0, 556fr);
	column-gap: 31px;
	align-items: end;
	width: 100%;
	max-width: calc(var(--sn-container) + (var(--sn-gutter) * 2));
}

/* Figma sets the headline in a 725px column, giving three greedy-filled lines:
   "Resilient PNT Solutions" / "for Mission-Critical" / "Systems". The global
   heading `text-wrap: balance` would re-even those, so opt out here. */
.sn-hero__title {
	max-width: 725px;
	font-size: var(--sn-size-h1);
	font-weight: var(--sn-weight-h1);
	text-wrap: normal;
}

/* Figma splits the headline across two Oxanium weights. */
.sn-hero__title-light {
	display: block;
	font-weight: 200;
}

/* At desktop the design sets "Resilient PNT Solutions" as a single line. It
   needs ~707px and the column is close enough to that to wrap on rounding, so
   pin it. Narrower viewports wrap normally. */
@media (min-width: 1200px) {
	.sn-hero__title-light {
		white-space: nowrap;
	}
}

.sn-hero__aside {
	display: flex;
	flex-direction: column;
	gap: var(--sn-gap-lg);
}

.sn-hero__text {
	color: var(--sn-white);
	font-size: var(--sn-size-medium);
	font-weight: 200;
	line-height: 1.5;
}

.sn-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sn-gap-sm);
}

@media (max-width: 1024px) {
	.sn-hero {
		align-items: center;
		min-height: 0;
		padding-block: calc(var(--sn-header-height) + var(--sn-section-lg)) var(--sn-section-lg);
	}

	.sn-hero__inner {
		grid-template-columns: 1fr;
		row-gap: var(--sn-gap-xl);
		align-items: start;
	}

	.sn-hero__title {
		max-width: 20ch;
	}

	.sn-hero__aside {
		max-width: 556px;
		padding-bottom: 0;
	}

	.sn-hero__scrim {
		background: linear-gradient(180deg, rgba(2, 5, 9, 0.7) 0%, rgba(2, 5, 9, 0.55) 60%, rgba(2, 5, 9, 0.75) 100%);
	}

	.sn-hero__streak--b {
		left: 55%;
		width: 520px;
	}
}

@media (max-width: 560px) {
	.sn-hero__actions .sn-btn {
		width: 100%;
	}

	.sn-hero__streak {
		display: none;
	}
}

/* ================================================ 2. Trust (10255:66948) */

.sn-trust {
	overflow: hidden;
	background-color: var(--sn-firefly-darkest);
}

.sn-trust__bg-img {
	object-position: center 40%;
	opacity: 0.9;
}

.sn-trust__streak {
	position: absolute;
	z-index: -1;
	height: 1px;
	background-color: var(--sn-blue-lightest);
	opacity: 0.4;
	transform: rotate(-45deg);
	pointer-events: none;
}

.sn-trust__streak--a {
	top: 22%;
	left: 30%;
	width: 340px;
}

.sn-trust__streak--b {
	top: 36%;
	left: 84%;
	width: 340px;
}

.sn-trust__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 25px;
	margin-top: 30px;
}

.sn-trust__card {
	display: flex;
	flex-direction: column;
	gap: var(--sn-gap-md);
	padding: var(--sn-gap-md);
	background-image: linear-gradient(137deg, rgba(2, 6, 12, 0.5) 37%, rgba(0, 58, 73, 0.5) 103%);
	border: var(--sn-border-width) solid var(--sn-border);
	transition:
		border-color var(--sn-duration) var(--sn-ease),
		transform var(--sn-duration) var(--sn-ease);
}

.sn-trust__card:hover {
	border-color: rgba(77, 178, 204, 0.45);
	transform: translateY(-4px);
}

.sn-trust__icon {
	display: block;
	color: var(--sn-blue-light);
}

.sn-trust__icon .sn-icon {
	width: 36px;
	height: 35px;
}

.sn-trust__title {
	font-size: var(--sn-size-h5);
	font-weight: var(--sn-weight-h5);
	line-height: var(--sn-leading-h5);
}

.sn-trust__text {
	flex: 1;
	color: var(--sn-neutral-light);
	font-size: var(--sn-size-regular);
	font-weight: var(--sn-weight-light);
}

.sn-trust__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-gap-xs);
	margin-top: auto;
	color: var(--sn-blue-light);
	font-size: var(--sn-size-regular);
	font-weight: var(--sn-weight-medium);
	text-decoration: none;
}

.sn-trust__link .sn-icon {
	width: 24px;
	height: 24px;
	transition: transform var(--sn-duration) var(--sn-ease);
}

.sn-trust__link:hover .sn-icon,
.sn-trust__link:focus-visible .sn-icon {
	transform: translateX(4px);
}

/* Stagger the card reveal without per-item inline styles. */
.sn-trust__card:nth-child(2) {
	--sn-reveal-delay: 90ms;
}

.sn-trust__card:nth-child(3) {
	--sn-reveal-delay: 180ms;
}

.sn-trust__card:nth-child(4) {
	--sn-reveal-delay: 270ms;
}

@media (max-width: 1024px) {
	.sn-trust__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.sn-trust__grid {
		grid-template-columns: 1fr;
	}

	.sn-trust__streak {
		display: none;
	}
}

/* =========================================== 3. Capability (10255:67217) */

.sn-capability {
	overflow: hidden;
}

.sn-capability__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sn-gap-lg);
	margin-bottom: 31px;
}

.sn-capability__title {
	max-width: 1032px;
}

.sn-capability__actions {
	flex: none;
	padding-top: 6px;
}

.sn-capability__body {
	display: grid;
	grid-template-columns: 616fr 634fr;
	align-items: center;
	gap: 30px;
}

/* --- Emphasis panels ---------------------------------------------------- */

.sn-panels {
	display: flex;
	flex-direction: column;
}

.sn-panels__item {
	border-left: var(--sn-border-width) solid var(--sn-dark-15);
	transition: border-color var(--sn-duration) var(--sn-ease);
}

.sn-panels__button {
	display: flex;
	flex-direction: column;
	gap: 7px;
	width: 100%;
	padding: var(--sn-gap-md);
	text-align: left;
	cursor: pointer;
}

.sn-panels__title {
	color: var(--sn-pale-sky-darker);
	font-family: var(--sn-font-heading);
	font-size: var(--sn-size-h4);
	font-weight: var(--sn-weight-h4);
	line-height: var(--sn-leading-heading);
	transition: color var(--sn-duration) var(--sn-ease);
}

.sn-panels__text {
	color: var(--sn-neutral-dark);
	font-size: var(--sn-size-regular);
	font-weight: var(--sn-weight-light);
	line-height: var(--sn-leading-body);
}

/* Product names emphasised mid-sentence sit at Archivo Medium, not bold. */
.sn-panels__text strong {
	font-weight: var(--sn-weight-medium);
}

.sn-panels__item.is-active {
	border-left-width: 2px;
	border-left-color: var(--sn-blue);
	background-image: linear-gradient(90deg, #f6f6f6 0%, var(--sn-blue-lightest) 100%);
}

.sn-panels__item.is-active .sn-panels__title {
	color: var(--sn-blue-dark);
}

/* Idle panels respond to hover; the active one must not. */
.sn-panels__item:not(.is-active):hover .sn-panels__title,
.sn-panels__item:not(.is-active):focus-within .sn-panels__title {
	color: var(--sn-blue-dark);
}

.sn-panels__item:not(.is-active):hover {
	border-left-color: var(--sn-blue-light);
}

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

.sn-capability__media {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sn-capability__img {
	width: 112%;
	max-width: none;
	height: auto;
}

.sn-capability__streak {
	position: absolute;
	z-index: 1;
	height: 1px;
	background-color: var(--sn-blue-light);
	opacity: 0.55;
	transform: rotate(-45deg);
	pointer-events: none;
}

.sn-capability__streak--a {
	top: 74%;
	left: 12%;
	width: 340px;
}

.sn-capability__streak--b {
	top: 16%;
	left: 62%;
	width: 210px;
}

@media (max-width: 1024px) {
	.sn-capability__head {
		flex-direction: column;
	}

	.sn-capability__actions {
		padding-top: 0;
	}

	.sn-capability__body {
		grid-template-columns: 1fr;
		gap: var(--sn-gap-xl);
	}

	/* Media above the copy once stacked, matching the design's reading order
	   of "see the hardware, then read why". */
	.sn-capability__media {
		order: -1;
		aspect-ratio: 4 / 3;
	}

	.sn-capability__img {
		width: 100%;
	}
}

@media (max-width: 600px) {
	.sn-panels__button {
		padding: var(--sn-gap-sm);
	}

	.sn-capability__streak {
		display: none;
	}
}

/* ================================================= 4. CTA (10255:67333) */

.sn-cta {
	position: relative;
	padding-block: var(--sn-section-lg);
	overflow: hidden;
	background-color: var(--sn-firefly-darkest);
	isolation: isolate;
}

/*
 * These bands are their own stacking contexts, so keep the photo layer at 0 and
 * lift the copy above it rather than relying on a negative z-index sitting
 * against the section's own background colour.
 */
.sn-cta > .sn-bg {
	z-index: 0;
}

.sn-cta > .sn-container {
	position: relative;
	z-index: 1;
}

/* Frame the bright limb rather than the dark disc below it — at 62% the crop
   landed on unlit ocean and the whole band read as flat black. */
.sn-cta__bg-img {
	object-position: center 38%;
}

.sn-cta__scrim {
	background: linear-gradient(90deg, rgba(2, 5, 9, 0.9) 0%, rgba(2, 5, 9, 0.6) 45%, rgba(2, 5, 9, 0.15) 100%);
}

.sn-cta__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	max-width: 800px;
}

.sn-cta__logo {
	display: block;
	width: 199px;
	height: 41px;
}

.sn-cta__heading {
	font-size: var(--sn-size-h2);
	font-weight: var(--sn-weight-h2);
	letter-spacing: var(--sn-tracking-h2);
}

.sn-cta__heading strong {
	font-weight: var(--sn-weight-medium);
}

.sn-cta__text {
	color: var(--sn-white);
	font-size: var(--sn-size-medium);
	font-weight: var(--sn-weight-light);
}

.sn-cta__actions {
	margin-top: var(--sn-gap-sm);
}

.sn-cta__text--muted {
	color: var(--sn-neutral-lighter);
}

/* --- "See Resilient PNT in Action" ---------------------------------------
   An inset panel on the light band rather than a full-bleed section, so the
   section itself carries no background and the panel clips its own. */

.sn-cta--in-action {
	padding-block: var(--sn-section-md);
	overflow: visible;
	background-color: transparent;
}

.sn-cta__panel {
	position: relative;
	padding: var(--sn-section-sm) var(--sn-gap-xl);
	overflow: hidden;
	isolation: isolate;
	background-color: var(--sn-firefly-darkest);
}

/*
 * The panel is its own stacking context, so the shared `.sn-bg` z-index of -1
 * would sit behind the panel's own background colour and vanish. Lift the
 * background to 0 and put the copy above it.
 */
.sn-cta__panel .sn-bg {
	z-index: 0;
}

.sn-cta__panel .sn-cta__content {
	position: relative;
	z-index: 1;
}

/*
 * The section carries `sn-section--light` so its margins match the SNDR-X band,
 * but the panel itself is dark — put the light-on-dark text colours back inside
 * it, out-specifying the light-section heading rule.
 */
.sn-section--light .sn-cta__panel .sn-cta__heading {
	color: var(--sn-white);
}

.sn-section--light .sn-cta__panel .sn-cta__text {
	color: var(--sn-neutral-lighter);
}

/* Satellite the design composites into the right of the panel. */
.sn-cta__panel-sat {
	position: absolute;
	top: 50%;
	right: -4%;
	z-index: 0;
	width: 46%;
	max-width: none;
	transform: translateY(-50%);
	pointer-events: none;
}

.sn-cta--in-action .sn-cta__bg-img {
	object-position: 65% 55%;
}

.sn-cta--in-action .sn-cta__scrim {
	background: linear-gradient(90deg, rgba(2, 5, 9, 0.95) 0%, rgba(2, 5, 9, 0.8) 45%, rgba(2, 5, 9, 0.25) 100%);
}

.sn-cta--in-action .sn-cta__content {
	max-width: 640px;
}

/* Dot texture for this band is defined with the Featured Product rule below —
   the two are one continuous light region in the design. */

@media (max-width: 768px) {
	.sn-cta__panel {
		padding: var(--sn-section-sm) var(--sn-gap-md);
	}
}

@media (max-width: 560px) {
	.sn-cta__logo {
		width: 160px;
		height: 33px;
	}

	.sn-cta__actions .sn-btn {
		width: 100%;
	}
}

/* ============================================= 5. Product (10255:67401) */

.sn-product {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/*
 * Dotted texture over the light band. Authored as a CSS dot grid rather than an
 * exported bitmap — it tiles at any size and costs nothing.
 *
 * Shared with the "See Resilient PNT in Action" band directly below, which the
 * design treats as the same continuous light region; keeping one dot definition
 * means the grid cannot drift between the two.
 */
.sn-product::before,
.sn-cta--in-action::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(circle, rgba(1, 146, 183, 0.28) 1.15px, transparent 1.15px);
	background-size: 22px 22px;
	background-position: 0 0;
	/* Even coverage across the full width — the design carries the dots to the
	   left edge as well, so this only feathers where the band meets the dark
	   sections above and below. */
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
	pointer-events: none;
}

.sn-product__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sn-gap-lg);
	margin-bottom: 31px;
}

.sn-product__title {
	max-width: 1038px;
	gap: var(--sn-gap-md);
}

.sn-product__actions {
	flex: none;
	padding-top: 6px;
}

.sn-product__heading {
	display: flex;
	flex-direction: column;
	font-size: var(--sn-size-h2);
	font-weight: var(--sn-weight-h2);
	letter-spacing: var(--sn-tracking-h2);
}

/* "SNDR-X" and "One open platform." both sit at Oxanium Medium; only the
   trailing "Diverse PNT sources." drops to ExtraLight. */
.sn-product__name,
.sn-product__claim strong {
	font-weight: var(--sn-weight-medium);
}

.sn-product__claim {
	font-weight: var(--sn-weight-h2);
}

.sn-product__body {
	display: grid;
	grid-template-columns: 685fr 565fr;
	align-items: center;
	gap: 30px;
}

.sn-product__media {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Faint circular guide behind the device (Figma 10367:71757). */
.sn-product__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 88%;
	aspect-ratio: 500 / 491;
	border: 0.5px solid rgba(0, 159, 200, 0.2);
	border-radius: 999px;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* A transparent cut-out — no radius or plate, so the ring and streaks read
   through behind it exactly as the design has them. */
.sn-product__img {
	width: 100%;
	max-width: none;
	height: auto;
	transform: rotate(13.25deg);
}

.sn-product__streak {
	position: absolute;
	height: 1px;
	background-color: var(--sn-blue-light);
	opacity: 0.5;
	transform: rotate(-45deg);
	pointer-events: none;
}

.sn-product__streak--a {
	top: 72%;
	left: 4%;
	width: 340px;
}

.sn-product__streak--b {
	top: 22%;
	left: 66%;
	width: 210px;
}

@media (max-width: 1024px) {
	.sn-product__head {
		flex-direction: column;
	}

	.sn-product__actions {
		padding-top: 0;
	}

	.sn-product__body {
		grid-template-columns: 1fr;
		gap: var(--sn-gap-xl);
	}

	/*
	 * Stacked, the device sits directly under the "Data sheet" button. A fixed
	 * 4:3 box is shorter than the rotated image's bounding box, so the corners
	 * used to overhang upward and collide with that button. Size the box to the
	 * image instead and reserve room for the rotation overhang.
	 */
	.sn-product__media {
		order: -1;
		aspect-ratio: auto;
		padding-block: 8%;
	}

	.sn-product__img {
		width: 92%;
		transform: rotate(8deg);
	}
}

@media (max-width: 600px) {
	.sn-product__streak {
		display: none;
	}

	.sn-product__img {
		transform: rotate(8deg);
	}
}

/* ======================================== 6. Accelerating (10322:71410) */

.sn-accel {
	background-color: var(--sn-firefly);
}

.sn-accel__title {
	gap: 14px;
	margin-bottom: 30px;
}

.sn-accel__lead {
	color: var(--sn-neutral-light);
	font-size: var(--sn-size-regular);
	font-weight: var(--sn-weight-regular);
}

/* Masonry: three independent columns that each pack from the top. The cards
   have different natural heights, so the second card in a column begins where
   the first ends — grid rows would align them across columns and flatten the
   design's stagger. */
.sn-bento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: var(--sn-gap-lg);
}

.sn-bento__col {
	display: flex;
	flex-direction: column;
	gap: var(--sn-gap-lg);
	min-width: 0;
}

.sn-bento__card {
	position: relative;
	display: flex;
	overflow: hidden;
	isolation: isolate;
}

.sn-bento__content {
	display: flex;
	flex-direction: column;
	gap: var(--sn-gap-sm);
	width: 100%;
	padding: var(--sn-gap-lg);
}

.sn-bento__icon {
	display: block;
	margin-bottom: var(--sn-gap-xs);
	color: var(--sn-blue-light);
}

.sn-bento__icon .sn-icon {
	width: 48px;
	height: 48px;
}

.sn-bento__title {
	font-size: var(--sn-size-h4);
	font-weight: var(--sn-weight-h4);
	line-height: var(--sn-leading-heading);
}

.sn-bento__text {
	color: var(--sn-neutral-lighter);
	font-size: var(--sn-size-regular);
	font-weight: var(--sn-weight-light);
}

/* --- Bordered icon card ------------------------------------------------- */

.sn-bento__card--icon {
	min-height: 319px;
	background-image: linear-gradient(139deg, var(--sn-firefly) 39%, var(--sn-blue-darkest) 102%);
	border: var(--sn-border-width) solid var(--sn-blue-dark);
}

.sn-bento__card--icon .sn-bento__content {
	justify-content: space-between;
}

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

.sn-bento__card--feature {
	min-height: 324px;
	background-image: linear-gradient(129deg, var(--sn-blue-darkest) 0%, var(--sn-blue-light) 105%);
}

.sn-bento__card--feature .sn-bento__content {
	justify-content: space-between;
}

.sn-bento__card--feature .sn-bento__icon {
	color: var(--sn-white);
}

.sn-bento__card--feature .sn-bento__icon .sn-icon {
	width: 51px;
	height: 51px;
}

/* --- Photo card --------------------------------------------------------- */

.sn-bento__card--photo {
	min-height: 460px;
	align-items: flex-end;
	background-color: var(--sn-firefly-dark);
}

.sn-bento__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.sn-bento__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* The card is portrait and this plate is landscape, so the crop is horizontal —
   anchor right to keep the engineer in frame as the design does. */
.sn-bento__img--bento-engineer {
	object-position: 72% center;
}

.sn-bento__img--bento-city {
	object-position: center 35%;
}

/* The design fades each photo into the page colour toward the copy. */
.sn-bento__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 18%, var(--sn-firefly) 100%);
}

.sn-bento__card--photo .sn-bento__content {
	gap: var(--sn-gap-md);
	justify-content: flex-end;
}

@media (max-width: 1024px) {
	/* Two columns: the three masonry columns unwrap into a single flow so the
	   cards can pair up evenly rather than keeping their desktop grouping. */
	.sn-bento {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}

	.sn-bento__col {
		display: contents;
	}

	.sn-bento__card {
		flex: 1 1 calc(50% - var(--sn-gap-lg));
		min-width: calc(50% - var(--sn-gap-lg));
	}
}

@media (max-width: 700px) {
	.sn-bento__card {
		flex-basis: 100%;
		min-width: 100%;
	}

	.sn-bento__card--icon,
	.sn-bento__card--feature {
		min-height: 0;
	}

	.sn-bento__card--photo {
		min-height: 380px;
	}

	.sn-bento__content {
		padding: var(--sn-gap-md);
	}
}

/* =========================================== 7. Audiences (10367:71850) */

.sn-audiences {
	overflow: hidden;
	background-color: var(--sn-firefly);
}

/* The design keeps the star field readable across the whole band. The source
   plate is extremely dark, so a lighter scrim alone left it flat black — lift
   the plate itself and let the scrim only feather the top and bottom edges. */
.sn-audiences__bg-img {
	object-position: center 45%;
	opacity: 1;
	filter: brightness(1.75) saturate(1.15);
}

.sn-audiences__scrim {
	background:
		linear-gradient(180deg, rgba(7, 17, 31, 0.85) 0%, rgba(7, 17, 31, 0.15) 22%, rgba(7, 17, 31, 0.15) 74%, rgba(7, 17, 31, 0.85) 100%);
}

.sn-audiences__title {
	gap: 14px;
	margin-bottom: 40px;
}

.sn-audiences__lead {
	max-width: 490px;
	color: var(--sn-neutral-light);
	font-size: var(--sn-size-regular);
	font-weight: var(--sn-weight-regular);
}

/* Column-wise fill so each pair sits in the column the design groups it in. */
.sn-audiences__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: auto auto;
	grid-auto-flow: column;
	gap: var(--sn-gap-lg);
}

.sn-audiences__card {
	display: flex;
	flex-direction: column;
	gap: var(--sn-gap-sm);
	min-height: 319px;
	padding: var(--sn-gap-lg);
	border: var(--sn-border-width) solid var(--sn-blue-dark);
	transition:
		border-color var(--sn-duration) var(--sn-ease),
		transform var(--sn-duration) var(--sn-ease);
}

.sn-audiences__card:hover {
	border-color: var(--sn-blue-light);
	transform: translateY(-4px);
}

.sn-audiences__card--filled {
	background-image: linear-gradient(139deg, var(--sn-firefly) 39%, var(--sn-blue-darkest) 102%);
}

.sn-audiences__icon {
	display: block;
	color: var(--sn-blue-light);
}

.sn-audiences__icon .sn-icon {
	width: 48px;
	height: 48px;
}

.sn-audiences__card-title {
	font-size: var(--sn-size-h5);
	font-weight: var(--sn-weight-h5);
	line-height: var(--sn-leading-h5);
}

.sn-audiences__text {
	margin-top: auto;
	padding-top: var(--sn-gap-sm);
	color: var(--sn-neutral-light);
	font-size: var(--sn-size-regular);
	font-weight: var(--sn-weight-light);
}

@media (max-width: 1024px) {
	.sn-audiences__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-flow: row;
	}
}

@media (max-width: 700px) {
	.sn-audiences__grid {
		grid-template-columns: 1fr;
	}

	.sn-audiences__card {
		min-height: 0;
		padding: var(--sn-gap-md);
	}
}

/* ============================================= 8. Explore (10318:71184) */

.sn-explore {
	overflow: hidden;
	background-color: var(--sn-firefly-darkest);
	padding-bottom: 0;
}

/* The design places the planet on the RIGHT, its lit limb arcing down to the
   corner, with open space behind the copy on the left. Anchoring the crop right
   puts the limb where the design has it instead of centring the globe. */
.sn-explore__bg-img {
	object-position: center center;
	transform: scale(1.6);
	transform-origin: 74% 62%;
}

.sn-explore__scrim {
	background:
		linear-gradient(90deg, rgba(2, 5, 9, 0.96) 0%, rgba(2, 5, 9, 0.88) 32%, rgba(2, 5, 9, 0.4) 66%, rgba(2, 5, 9, 0) 100%),
		linear-gradient(180deg, rgba(2, 5, 9, 0.45) 0%, rgba(2, 5, 9, 0) 40%);
}

.sn-explore__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	max-width: 880px;
	margin-bottom: var(--sn-section-sm);
}

.sn-explore__logo {
	display: block;
	width: 199px;
	height: auto;
	margin-bottom: var(--sn-gap-sm);
}

.sn-explore__heading {
	font-size: var(--sn-size-h2);
	font-weight: var(--sn-weight-h2);
	letter-spacing: var(--sn-tracking-h2);
}

.sn-explore__heading strong {
	font-weight: var(--sn-weight-medium);
}

.sn-explore__text {
	color: var(--sn-neutral-lighter);
	font-size: var(--sn-size-medium);
	font-weight: var(--sn-weight-light);
}

/*
 * Full-bleed tinted band behind the steps. Figma specifies a
 * rgba(12, 12, 13, 0.60) fill at 80% layer opacity; that is folded into a single
 * alpha here (0.6 x 0.8 = 0.48) rather than set as `opacity`, because `opacity`
 * on this element would also fade the copy and buttons sitting on top of it.
 */
.sn-explore__band {
	position: relative;
	width: 100%;
	padding-block: var(--sn-gap-lg);
	background-color: rgba(12, 12, 13, 0.48);
}

.sn-explore__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 49px;
}

.sn-explore__step {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
	padding-right: 49px;
	border-right: var(--sn-border-width) solid var(--sn-pale-sky);
}

.sn-explore__step:last-child {
	padding-right: 0;
	border-right: 0;
}

.sn-explore__step-title {
	color: var(--sn-blue-light);
	font-size: var(--sn-size-medium);
	font-weight: var(--sn-weight-medium);
	line-height: 1.4;
	letter-spacing: 0.18px;
}

.sn-explore__step-text {
	color: var(--sn-neutral-lighter);
	font-size: var(--sn-size-small);
	font-weight: var(--sn-weight-light);
}

.sn-explore__step .sn-btn {
	margin-top: auto;
}

.sn-explore__step .sn-btn__icon {
	width: auto;
	height: 27px;
	color: var(--sn-blue-light);
}

@media (max-width: 1024px) {
	.sn-explore__steps {
		grid-template-columns: 1fr;
		gap: var(--sn-gap-lg);
	}

	.sn-explore__step {
		padding-right: 0;
		padding-bottom: var(--sn-gap-lg);
		border-right: 0;
		border-bottom: var(--sn-border-width) solid var(--sn-pale-sky);
	}

	.sn-explore__step:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}
}

@media (max-width: 560px) {
	.sn-explore__logo {
		width: 160px;
		height: auto;
	}

	.sn-explore__step .sn-btn {
		width: 100%;
	}
}

/* ================================================ 9. News (10255:68823) */

.sn-news__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sn-gap-lg);
	margin-bottom: var(--sn-gap-xl);
}

.sn-news__title {
	gap: var(--sn-gap-sm);
}

.sn-news__actions {
	flex: none;
}

/* Cards sit on the light band, so they invert from the dark default. */
.sn-news .sn-post-card {
	background-color: var(--sn-white);
	border-color: var(--sn-dark-15);
}

.sn-news .sn-post-card:hover {
	background-color: var(--sn-white);
	border-color: var(--sn-blue-light);
}

.sn-news .sn-post-card__media {
	background-color: var(--sn-neutral-lightest);
}

.sn-news .sn-post-card__title {
	color: var(--sn-neutral-darkest);
}

.sn-news .sn-post-card__excerpt,
.sn-news .sn-post-card__info {
	color: var(--sn-neutral-dark);
}

/* Outlined pill on light, matching the design's bordered tag. */
.sn-news .sn-tag {
	background-color: transparent;
	border: var(--sn-border-width) solid var(--sn-dark-15);
	color: var(--sn-neutral-darkest);
	font-weight: var(--sn-weight-regular);
	letter-spacing: 0;
	text-transform: none;
	font-size: var(--sn-size-small);
	padding: 2px 12px;
}

.sn-news .sn-btn--link {
	color: var(--sn-blue-dark);
}

@media (max-width: 1024px) {
	.sn-news__head {
		flex-direction: column;
		align-items: flex-start;
	}
}