/* sm-final.css: the Final section (stage 2): a blue-hour sky behind the closing line and one primary CTA.
   The sky is art/sm-bluehour, sky only: an unstaged canvas is scene.w x 2 css px and left-aligned, so the 1280 art px (2560 css px) canvas is centred
   on the section and covers every viewport. Ground follows the continuum: N2 for Final. */
.fn-stage { position: relative; overflow: hidden; background: var(--ground-2); }
/* the sky is drawn for 520 px: the section is never shorter, and the copy is centred on the dark upper bands */
@media (min-width: 768px) { .fn-stage { min-block-size: 520px; display: flex; align-items: center; } }
.fn-scene-box { position: absolute; inset: 0; overflow: hidden; }
.fn-scene { position: absolute; top: auto; bottom: 0; inline-size: 2560px; block-size: 520px; left: calc(50% - 1280px); left: round(down, calc(50% - 1280px), 2px); image-rendering: pixelated; direction: ltr; }
.fn-scene.is-placeholder { background: var(--ground-2); }

/* the column of Last year and About: 1296 px, gutters clamp with the viewport */
.fn-in { position: relative; z-index: 2; inline-size: min(1296px, calc(100% - 2 * var(--gutter))); margin-inline: auto; padding-block: 72px; }
.fn-copy { max-inline-size: 760px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.fn-copy p, .fn-copy h2 { margin: 0; }
.fn-title { font-size: 50px; line-height: 56px; text-wrap: balance; }
[dir="rtl"] .sm .fn-stage .fn-title { font-size: 40px; line-height: 52px; font-weight: 400; }

@media (max-width: 767px) {
  .fn-stage { min-block-size: 482px; display: flex; align-items: center; } /* 2 px more than the 480 design: the CTA ends 8 px above the skyline strip */
  .fn-in { inline-size: auto; margin-inline: 0; padding: 28px 22px 48px; }
  .fn-title { font-size: 37.5px; line-height: 44px; }
  [dir="rtl"] .sm .fn-stage .fn-title { font-size: 30px; line-height: 42px; }
}

/* round 4: the AR title is nine words: balanced over at most three lines, never wider than the copy column */
[dir="rtl"] .sm .fn-stage .fn-title { max-inline-size: 760px; text-wrap: balance; }
/* phone: whole-pixel line heights, so the longer sub never leaves the section on a half pixel (the scene canvas is anchored to its bottom) */
@media (max-width: 767px) { .sm .fn-sub { line-height: 28px; } [dir="rtl"] .sm .fn-sub { line-height: 32px; } }