/*
 * Vets features ("In sync with your clients…") — Figma "Website" file,
 * "Features and specific outcomes" 5121:9160 (desktop 1440) and "Practice
 * dashboard" 5121:9453 (mobile 393).
 *
 * Desktop: a 513 copy column (headline, three check-marked points, the
 * "Talk to our team" button and the sample-profile link), 64 apart from a
 * 947x546 laptop mockup that runs off the right edge of the page. Mobile:
 * one column in the order headline, laptop (515 wide, again cut by the right
 * edge), points, then the two actions stacked full width.
 *
 * One DOM for both orders: below 992 the copy wrapper is display: contents,
 * so its children and the laptop share one flex column and `order` slots the
 * laptop in after the headline.
 *
 * Laptop. Figma's instance export is clipped by the frame, so the image is
 * re-assembled unclipped from the instance layers (tmp/scripts/
 * laptop_compose.js): the 947x546 device plus 20 of casing/shadow spill below,
 * which hangs out of the 947/546 box. The section clips it sideways.
 *
 * Layout. ≥ 1440 is the Figma frame (at ≥ 1920 the laptop fits inside the
 * page). 992–1439 (no frame, viewport = 1040rem): the 513 copy column and a
 * 640 laptop, cut about where the mobile frame cuts it. 768–991 (no frame):
 * the mobile column in the 672 container, laptop at desktop size. < 768: the
 * Figma mobile frame.
 *
 * Copy: desktop text at every width. The mobile frame's headline says
 * "In sync with owners"; the desktop "clients" wording is used instead.
 *
 * Units: rem, 1rem = 1px at the design widths (the <style> block in
 * vets/index.html). Fonts: headline Aeonik Medium (--font-display),
 * everything else Inter. Colours are the Figma literals.
 */

.vets-features {
  --vets-features-text: #000;
  --vets-features-title: #222;
  --vets-features-subtle: #666;

  position: relative;
  z-index: 1;
  padding: 108rem 0;
  overflow-x: clip;
  background-color: #fff;
  color: var(--vets-features-subtle);
  /* 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);
}

.vets-features .container.vets-features-inner {
  display: flex;
  align-items: center;
  gap: 64rem;
}

.vets-features-copy {
  display: flex;
  flex: 0 0 513rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 40rem;
  min-width: 0;
}

/* Figma "Heading/Regular/XL": Aeonik Medium 48/56, -1.6px */
.vets-features-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 48rem;
  line-height: 56rem;
  font-weight: 500;
  letter-spacing: -1.6rem;
  color: var(--vets-features-text);
}

/* Points ------------------------------------------------------------------ */

.vets-features-points {
  display: flex;
  flex-direction: column;
  gap: 16rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vets-features-point {
  display: flex;
  align-items: flex-start;
  gap: 12rem;
}

/* The Figma check glyph, same file as the homepage expert section */
.vets-features-check {
  display: block;
  flex-shrink: 0;
  width: 24rem;
  height: 24rem;
}

.vets-features-point-copy {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4rem;
  min-width: 0;
}

/* Figma "Label/L" at 24 leading: 16/24 medium, -0.16px, mono/800 */
.vets-features-point-title {
  margin: 0;
  font-family: inherit;
  font-size: 16rem;
  line-height: 24rem;
  font-weight: 500;
  letter-spacing: -0.16rem;
  color: var(--vets-features-title);
}

/* Figma "Body/M": 16/24, -0.32px, #666 */
.vets-features-point-text {
  margin: 0;
  font-size: 16rem;
  line-height: 24rem;
  font-weight: 400;
  letter-spacing: -0.32rem;
  color: var(--vets-features-subtle);
}

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

.vets-features-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24rem;
}

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

/* Figma "Link" 5121:9191: 16/24 semibold, -0.32px, black, underlined, 8/12
   padding. Hover takes the brand orange, as the header's sign-in link does. */
.vets-features-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-features-text);
  white-space: nowrap;
  text-decoration: underline;
  text-underline-position: from-font;
  transition: color 0.2s ease;
}

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

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

/* Laptop ------------------------------------------------------------------ */

.vets-features-media {
  position: relative;
  flex: 0 0 947rem;
  aspect-ratio: 947 / 546;
  /* the image is 20 taller (spill); keep the box at 546 */
  min-height: 0;
}

.vets-features-laptop,
.vets-features-laptop img {
  display: block;
  width: 100%;
  height: auto;
}

/* Figma "Practice dashboard" effects (desktop instance only): the layered
   1/4/9/16 drop shadow under the device */
@media screen and (min-width: 992px) {
  .vets-features-laptop img {
    filter: drop-shadow(0 1rem 1rem rgba(0, 0, 0, 0.1)) drop-shadow(0 4rem 2rem rgba(0, 0, 0, 0.09))
      drop-shadow(0 9rem 2.5rem rgba(0, 0, 0, 0.05)) drop-shadow(0 16rem 3rem rgba(0, 0, 0, 0.01));
  }
}

/* ------------------------------------------------------------------ */
/* 992–1439: the 912 column (viewport = 1040rem)                        */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 1439px) {
  .vets-features .container.vets-features-inner {
    gap: 40rem;
  }

  .vets-features-media {
    flex-basis: 640rem;
  }

  /* So the button and the link still share a line */
  .button-pill.vets-features-cta {
    padding-inline: 32rem;
  }
}

/* ------------------------------------------------------------------ */
/* < 992: one column, laptop after the headline                         */
/* ------------------------------------------------------------------ */

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

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

  .vets-features-copy {
    display: contents;
  }

  .vets-features-heading { order: 0; }
  .vets-features-media { order: 1; }
  .vets-features-points { order: 2; }
  .vets-features-actions { order: 3; }

  .vets-features-media {
    flex: none;
    width: 947rem;
  }
}

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

@media screen and (max-width: 767px) {
  .vets-features {
    padding: 32rem 24rem 64rem;
  }

  /* Figma "Heading/Regular/L": 32/38, -0.64px */
  .vets-features-heading {
    font-size: 32rem;
    line-height: 38rem;
    letter-spacing: -0.64rem;
  }

  /* Figma 5121:9455: 515x297 */
  .vets-features-media {
    width: 515rem;
  }

  /* 5121:9475: stacked, 16 apart, both full width */
  .vets-features-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16rem;
  }

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

  .vets-features-sample {
    justify-content: center;
    padding: 0;
  }
}