/* Pixel-measured against amazon-design-refs/sections/closing-statement.png
   (1719x1850 reference). The top ~20% is a pink-to-coral gradient that
   continues Gradient Transition scene's own colors (that section ends in
   pink/magenta; this one's top starts there and continues through coral) —
   the two are designed to flow into each other. Confirmed via pixel
   sampling, not guessed: top `#C570DB`-ish through to `#F17B72`-ish by
   ~20% down, then a full-bleed, edge-to-edge dark (`#111419`) panel with
   rounded top corners only, no side margins.

   Heading line-band measurement put the 4-line headline noticeably larger
   than even Hero's own 128px display scale — reasonable given this panel
   spans the full page width (Hero's heading column doesn't), so more room
   is available; reused Hero's line-height/letter-spacing ratios at a larger
   cap. The subline ("Regardless of audience type.") measured close to the
   sitewide 64px heading scale and visibly lighter-weight in the reference —
   implemented at regular (400) weight, distinct from the heading's bold. */

.rds-closing {
	/* Keep this a flow root so panel spacing cannot collapse through the
	   section boundary. */
	display: flow-root;
	position: relative;
	width: 100%;
	min-height: 76vh;
	background: #0578ff;
}

/* Diagonal "clip art" wedge accent (2026-08-06, "add the clip art edge") —
   same technique as Past/Future Transition's own wedge: a `::before` with
   `clip-path: polygon(...)`, not a second stacked element. Sits in the gap
   above `.rds-closing__panel` (that margin-top is otherwise just more solid
   blue) so the previous section's dark bleeds down into it at an angle
   instead of a flat handoff.

   Uses fixed rem units for the wedge's own points, not percentages
   (2026-08-06 fix, "fix opacity for edge. needs to be 100%" — percentages
   here, 12%/22%, tracked `.rds-closing__panel`'s own responsive margin-top
   (`clamp(6rem, 18vh, 12rem)`, ~10.6-21.3% of this section) almost exactly
   at every viewport size, so the wedge's diagonal and the panel's straight
   top edge were nearly coincident lines; two independently anti-aliased
   edges that close together read as a shimmering semi-transparent seam,
   not a clean cut. First attempt fixed the seam by extending the wedge
   PAST the panel's minimum margin (6rem) instead — that just hid the whole
   diagonal behind the opaque panel, which is worse: no wedge visible at
   all. Fixed rem values well under 6rem instead guarantee a real gap of
   plain blue between the wedge's lowest point and the panel's highest one
   at every viewport, so neither edge ever nears the other. */
.rds-closing::before {
	content: "";
	position: absolute;
	inset: 0;
	/* background: #111419; */
	clip-path: polygon(0 0, 100% 0, 100% 3rem, 0 4.5rem);
	pointer-events: none;
}

.rds-closing__panel {
	position: relative;
	/* margin-top: clamp(6rem, 18vh, 12rem); */
	min-height: calc(77vh - clamp(7rem, 22vh, 8rem));
	width: 100%;
	background: #0578ff;
	border-radius: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) 0 0;
	box-sizing: border-box;
	padding: clamp(3rem, 8vw, 0rem) clamp(1.5rem, 6vw, 5rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.rds-closing__heading {
	margin: 0;
	max-width: 60rem;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	letter-spacing: -0.04em;
}

.rds-closing__subheading {
	margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
}