/* ───────────────────────────────────────────────────────────────
   Xovah — the closing panel
   The last block on the landing page: a slow lake running behind a wash
   of the same accent green the panel used to be painted flat.

   The wash is what keeps this a brand panel rather than a stock video.
   White type and a white button both have to hold against it at every
   width, so the green never drops below about two thirds opaque
   anywhere the copy sits. bg-accent stays on the section, so the panel
   is the right colour before the film loads and if it never does.

   Loaded only by index.html — nothing else on the site uses either of
   these two pieces.
   ─────────────────────────────────────────────────────────────── */


/* ── Grain ─────────────────────────────────────────────────────
   A little paper tooth on the closing panel so a large flat colour
   does not read as a flat colour. One tiled SVG, no animation, no
   extra requests. */
.grain { position: relative; isolation: isolate; }
.grain::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.38;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='160' height='160' filter='url(%23n)' opacity='0.22'/></svg>");
  /* no mix-blend-mode: blending over a playing video repaints the whole
     panel every frame, which is what made scrolling past it stutter */
}
.grain > div { position: relative; z-index: 1; }

/* ── The closing panel ─────────────────────────────────────────
   Full-bleed film, the same language as the reel at the top of the
   page, so the two bookend it. The scrim is a dark green-black rather
   than a slab of accent: the picture is the panel, and the green now
   lives in the button and the grain instead of over the whole thing. */
.closer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #0A090A;
  min-height: 82svh;
  display: flex;
  align-items: flex-end;
  padding: 8rem 0 11vh;
}
@supports not (min-height: 1svh) { .closer { min-height: 82vh; } }

.closer .closer-media {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.closer .closer-media video {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focus, center center);
  /* Fades up once there are real frames, so the panel never flicks from
     flat colour to picture. */
  opacity: 0;
  transition: opacity 1100ms ease;
}
.closer[data-backdrop="on"] .closer-media video { opacity: 1; }

/* Weighted towards the copy, with a little top and bottom and a
   vignette — three flat layers, nothing blended. */
.closer .closer-wash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(97deg,
      rgb(10 9 10 / 0.62) 0%,
      rgb(10 9 10 / 0.54) 34%,
      rgb(10 9 10 / 0.26) 62%,
      rgb(10 9 10 / 0.18) 78%,
      rgb(10 9 10 / 0.34) 100%),
    linear-gradient(180deg,
      rgb(10 9 10 / 0.22) 0%,
      rgb(10 9 10 / 0.04) 22%,
      rgb(10 9 10 / 0.08) 48%,
      rgb(10 9 10 / 0.44) 78%,
      rgb(10 9 10 / 0.58) 100%),
    radial-gradient(128% 96% at 52% 46%,
      rgb(0 0 0 / 0) 46%,
      rgb(0 0 0 / 0.20) 86%,
      rgb(0 0 0 / 0.30) 100%);
}

.closer.grain::before { z-index: 2; opacity: 0.1; }
.closer .closer-body { position: relative; z-index: 3; width: 100%; }

/* ── The three facts ───────────────────────────────────────────
   The panel is tall and the copy sat in a band at the very bottom of
   it, which left the top two thirds carrying nothing but video. This
   rail gives the block some height and answers the three questions
   that come up between reading the price and pressing the button. */
.closer-facts {
  margin: 3.25rem 0 0;
  padding-top: 1.65rem;
  border-top: 1px solid rgb(255 255 255 / 0.16);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem 2.5rem;
}
@media (min-width: 640px) {
  .closer-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.closer-fact dt {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.56);
}
.closer-fact dd {
  margin: 0.5rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
.closer-fact dd span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: rgb(255 255 255 / 0.62);
}

/* ── Type ──────────────────────────────────────────────────────
   The heading is the whole point of this panel, so it is given the
   room to be one: bigger than anything else on the page, tracked in
   tight, and set on a single line at every width it can manage. */
.closer-eyebrow {
  margin: 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.86);
}
.closer-eyebrow::before {
  content: "";
  display: inline-block; vertical-align: middle;
  width: 1.6rem; height: 1px; margin-right: 0.7rem;
  background: rgb(255 255 255 / 0.42);
}

.closer-h {
  margin: 1.5rem 0 0;
  /* the same face as every other section heading on the site */
  font-family: 'Outfit', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-variation-settings: 'wght' 584;
  letter-spacing: -0.06em;
  font-size: clamp(2.6rem, 5.4vw, 4.2rem);
  line-height: 1.0;
  letter-spacing: -0.024em;
  color: #FFFFFF;
  text-wrap: balance;
  max-inline-size: 16ch;
}

.closer-price { margin: 1rem 0 0; font-size: 0.9375rem; color: #FFFFFF; }
.closer-price strong { font-weight: 600; color: #FFFFFF; }

.closer-p {
  margin: 1.5rem 0 0;
  max-width: 31rem;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: #FFFFFF;
}

.closer-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 60px; padding: 1.05rem 2rem;
  border-radius: 0.375rem;
  /* The button is white in both themes, so it takes the fixed darker
     green rather than --c-accent-text, which lifts to a pale green in
     dark mode and would vanish on white. */
  background: #FFFFFF; color: rgb(173 26 33);
  font-size: 1rem; font-weight: 600; letter-spacing: -0.005em;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
}
.closer-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgb(0 0 0 / 0.28); }
.closer-cta:active { transform: translateY(0); }
.closer-cta:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

.closer-note {
  margin: 1.15rem 0 0;
  font-size: 0.8125rem; line-height: 1.55;
  color: #FFFFFF;
}
.closer-note a {
  font-weight: 600; color: #FFFFFF;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgb(255 255 255 / 0.45);
}
.closer-note a:hover { text-decoration-color: #FFFFFF; }

/* Anything narrower than the two-column split — phones and tablets
   alike — stacks the copy full width, so the weight goes to the bottom
   of the frame instead of the left of it. */
@media (max-width: 1023px) {
  .closer .closer-wash {
    background:
      linear-gradient(180deg,
        rgb(10 9 10 / 0.40) 0%,
        rgb(10 9 10 / 0.12) 18%,
        rgb(10 9 10 / 0.82) 46%,
        rgb(10 9 10 / 0.90) 76%,
        rgb(10 9 10 / 0.92) 100%),
      radial-gradient(120% 62% at 50% 30%,
        rgb(0 0 0 / 0) 46%,
        rgb(0 0 0 / 0.26) 100%);
  }
}

/* ── Phones ────────────────────────────────────────────────────
   The copy stacks full width, so the scrim turns bottom-weighted and
   the picture keeps the top of the frame to itself. */
@media (max-width: 767px) {
  /* It used to hold 88% of the screen open whatever was in it, which
     left a blank half-screen under the last line. It is as tall as its
     content now, with a floor so the picture still reads as a panel. */
  .closer { min-height: 58svh; padding: 3rem 0 2rem; align-items: flex-end; }
  @supports not (min-height: 1svh) { .closer { min-height: 58vh; } }

  .closer .closer-media video { object-position: var(--focus-tall, center center); }


  .closer-h { margin-top: 1.1rem; font-size: clamp(2.25rem, 10vw, 2.9rem); line-height: 1.0; max-inline-size: 14ch; }
  .closer-p { margin-top: 1.1rem; font-size: 1rem; max-width: 26rem; }
  .closer-cta { width: 100%; }
}

@media (max-width: 360px) {
  .closer-h { font-size: 2.15rem; }
  .closer-p { font-size: 0.9375rem; }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .closer { min-height: 0; padding: 3.5rem 0; align-items: center; }
  .closer-p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .closer .closer-media video { transition: none; }
  .closer-cta { transition: none; }
  .closer-cta:hover { transform: none; }
}

/* With less wash over the film, the words carry their own contrast
   rather than borrowing it from a darker overlay. */
.closer-h, .closer-p, .closer-price, .closer-eyebrow, .closer-note {
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.45), 0 8px 30px rgb(0 0 0 / 0.35);
}