/*
 * Vets closing invitation — Figma "Website" file, "Closing invitation"
 * 5121:9273 (desktop 1440x637.39) and 5121:9533 (mobile 393x716). Sits
 * directly above the footer.
 *
 * A #141414 band with the paper texture multiplied over it (the expertise
 * band's image, at full strength here). Desktop: the copy (two-line headline,
 * lead, "Partner with Pointer" + the sample-profile link) on the left,
 * vertically centred against a 621x421 photo with 24 corners on the right.
 * Mobile: copy, then the two actions stacked full width, then a 345x280 crop
 * of the same photo.
 *
 * The Figma photo rectangle carries two image fills; the top one (FILL, an
 * opaque JPEG) covers the cropped one below it, so only that one is used.
 *
 * Layout. ≥ 1440 is the Figma frame (justify-between in the container, so at
 * ≥ 1920 the gap grows with the 1680 column). 992–1439 (no frame, the 912
 * column): the same row, the headline at 56/58 and the photo at 400 so the
 * copy keeps one line per headline row; the actions wrap. < 992: the mobile
 * stack; 768–991 keeps the desktop photo ratio so it does not grow too tall.
 *
 * Units: rem, 1rem = 1px at the design widths (the <style> block in
 * vets/index.html). Fonts: headline Aeonik Medium (--font-display), the rest
 * Inter. The button is header.css .button-pill at the hero CTA's size; the
 * sample link matches .vets-features-sample in white.
 */

.vets-closing {
  --vets-closing-text: #fff;
  --vets-closing-lead: #ebebeb;

  position: relative;
  z-index: 1;
  padding: 108rem 0;
  overflow: hidden;
  background-color: #141414;
  color: var(--vets-closing-text);
  /* Inter (Figma Typography/font/Primary). The token override, not just
     font-family, is what redirects the Webflow element rules. */
  --_colors---family-paragraph: var(--font-ui);
  font-family: var(--font-ui);
}

/* Figma: the paper image, FILL, multiply at 100% */
.vets-closing-texture,
.vets-closing-texture img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.vets-closing-texture img {
  object-fit: cover;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.vets-closing .container.vets-closing-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40rem;
}

/* Copy -------------------------------------------------------------------- */

.vets-closing-copy {
  flex: 0 0 auto;
  width: 619rem;
}

/* Figma: Aeonik Medium 64/64, -1.6px, white; the break is Figma's */
.vets-closing-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 64rem;
  line-height: 64rem;
  font-weight: 500;
  letter-spacing: -1.6rem;
  color: var(--vets-closing-text);
}

/* Figma: 18/26, -0.48px, mono/300, in the 516 heading group, 24 below */
.vets-closing-lead {
  max-width: 516rem;
  margin: 24rem 0 0;
  font-size: 18rem;
  line-height: 26rem;
  font-weight: 400;
  letter-spacing: -0.48rem;
  color: var(--vets-closing-lead);
}

/* The mobile frame breaks the lead after "practice," */
.vets-closing-br {
  display: none;
}

/* Actions ----------------------------------------------------------------- */

.vets-closing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16rem;
  margin-top: 40rem;
}

/* Figma "button-large" 5121:9279: 245x52, 14/48 padding with the hairline
   inside, so our outside border takes 13 vertical (as .vets-features-cta). */
.button-pill.vets-closing-cta {
  margin: 0;
  max-height: none;
  padding: 13rem 48rem;
  font-size: 16rem;
  line-height: 24rem;
  letter-spacing: -0.32rem;
}

/* Figma "Link" 5121:9285: 16/24 semibold, -0.32px, white, underlined, 8/12
   padding, as tall as the button. Hover takes the brand orange, as the
   features sample link does. */
.vets-closing-sample {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 8rem 12rem;
  font-family: var(--font-ui);
  font-size: 16rem;
  line-height: 24rem;
  font-weight: 600;
  letter-spacing: -0.32rem;
  color: var(--vets-closing-text);
  white-space: nowrap;
  text-decoration: underline;
  text-underline-position: from-font;
  transition: color 0.2s ease;
}

.vets-closing-sample:hover {
  color: var(--_colors---colors-brand-orange, #ff6000);
}

.vets-closing-sample:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 2px;
}

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

/* Figma 5121:9287: 620.87x421.39, 24 corners; the photo's own ratio is 1.47,
   so cover crops almost nothing */
.vets-closing-photo {
  flex: 0 0 auto;
  display: block;
  width: 620.87rem;
  aspect-ratio: 620.87 / 421.39;
  overflow: hidden;
  border-radius: 24rem;
}

.vets-closing-photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* 992–1439 (no frame): the row in the 912 column                       */
/* ------------------------------------------------------------------ */

@media screen and (min-width: 992px) and (max-width: 1439px) {
  .vets-closing-copy {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .vets-closing-heading {
    font-size: 56rem;
    line-height: 58rem;
  }

  .vets-closing-photo {
    width: 400rem;
  }
}

/* ------------------------------------------------------------------ */
/* < 992: one column, photo last                                        */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 991px) {
  .vets-closing {
    padding: 64rem 0;
  }

  .vets-closing .container.vets-closing-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32rem;
  }

  .vets-closing-copy {
    width: auto;
  }

  .vets-closing-photo {
    width: 100%;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile (< 768, Figma 393): own 24 gutter                             */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {
  .vets-closing {
    --vets-closing-lead: #ccc;

    padding: 64rem 24rem;
  }

  /* Figma: 40/44, -0.64px */
  .vets-closing-heading {
    font-size: 40rem;
    line-height: 44rem;
    letter-spacing: -0.64rem;
  }

  /* Figma "Body/M": 16/24, -0.32px, #ccc, 16 below the heading */
  .vets-closing-lead {
    max-width: none;
    margin-top: 16rem;
    font-size: 16rem;
    line-height: 24rem;
    letter-spacing: -0.32rem;
  }

  .vets-closing-br {
    display: inline;
  }

  /* 5121:9537: stacked, 20 apart, 32 below the copy */
  .vets-closing-actions {
    flex-direction: column;
    gap: 20rem;
    margin-top: 32rem;
  }

  /* 345x48: 12/48 padding, 11 with our outside border */
  .button-pill.vets-closing-cta {
    display: flex;
    padding: 11rem 48rem;
  }

  /* 5121:9544: Inter Medium 14/24, centred, no padding */
  .vets-closing-sample {
    justify-content: center;
    padding: 0;
    font-size: 14rem;
    font-weight: 500;
    letter-spacing: 0;
  }

  /* 5121:9545: 345x280 */
  .vets-closing-photo {
    aspect-ratio: 345 / 280;
  }
}