/*
 * Vets "How it works" (care journey) — Figma "Website" file, "How we deliver
 * the promise" 5121:8990 (desktop 1440) and "Care journey" 5121:9418 (mobile
 * 393). The header's "How it works" link targets its id.
 *
 * An eyebrow pill, headline and lead, then four journey steps. Desktop: a
 * row of four columns, each a numbered dot, a title + line of copy, and a
 * 296x320 "product snippet" (a photo, on steps 2 and 4 with a product card
 * floating over it). A dotted line runs through the numbers, the full width
 * of the page, fading out at both edges. Mobile: no numbers or line; each
 * step is its snippet, then its copy.
 *
 * Snippets. The photos are pre-cropped to the region Figma shows (see
 * tmp/scripts/hiw_images.sh) and fill the box with object-fit: cover. The box
 * keeps the Figma aspect (296/320 desktop, 345/320 mobile) rather than a fixed
 * 320 height, and the floating cards are sized in % of it, so the composition
 * scales with the column at every width.
 *
 * Hover (Figma annotations on 5121:9130 and 5121:9151, plus the canvas note
 * "Darken shadows on risk cards"): hovering anywhere on a step column gives the
 * number a peach ring and a shadow, gives the snippet the soft grey shadow,
 * lifts the 20% black overlay off the photo, and darkens the floating card's
 * shadow. Figma draws step 1 in that hover state; the rest state is steps 2–4.
 *
 * Layout. ≥ 992: four columns (gap 32 at 1440, 24 in the 912 column). 768–991:
 * no Figma frame; the mobile step (snippet first, no numbers) in a 2x2 grid.
 * < 768: the Figma mobile frame.
 *
 * Units: rem, 1rem = 1px at the design widths (the <style> block in
 * vets/index.html). Fonts: headline and step titles Aeonik Medium
 * (--font-display), everything else Inter. Colours are the Figma literals.
 * Loaded after pointer-by-shakuro.css; overrides its global h2 / h3 / p rules
 * for this section only.
 */

.vets-how {
  --vets-how-text: #000;
  --vets-how-subtle: #666;
  --vets-how-orange: #ff6000;
  --vets-how-radius: 24rem;
  --vets-how-ease: 180ms ease-out;

  position: relative;
  z-index: 1;
  padding: 108rem 0 64rem;
  /* The dotted line is 100vw wide; clip it sideways without clipping the
     hover shadows that hang below the snippets. */
  overflow-x: clip;
  background-color: #fff;
  color: var(--vets-how-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-how .container.vets-how-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 56rem;
}

/* Intro ------------------------------------------------------------------- */

.vets-how-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20rem;
}

/* Figma "Label": white, #ebebeb hairline, 6px 16px 6px 12px, a 6px brand dot,
   14/20 medium #444. The hairline is inside the box in Figma and outside in
   CSS, so the vertical padding gives up 1px each side. */
.vets-how-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  margin: 0;
  padding: 5rem 16rem 5rem 12rem;
  border: 1px solid #ebebeb;
  border-radius: 999px;
  background-color: #fff;
  font-size: 14rem;
  line-height: 20rem;
  font-weight: 500;
  color: #444;
  white-space: nowrap;
}

.vets-how-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: #ff5900;
}

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

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

.vets-how-lead {
  max-width: 624rem;
}

/* Steps ------------------------------------------------------------------- */

.vets-how-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24rem 32rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Figma "Dotted line": 6px #eee dots every 12px, centred on the page, through
   the middle of the 24px numbers; 96px / 143px white fades at the edges. */
.vets-how-steps::before {
  content: "";
  position: absolute;
  top: 9rem;
  left: 50%;
  width: 100vw;
  height: 6rem;
  transform: translateX(-50%);
  background-image: radial-gradient(circle, #eee 2.6rem, rgba(238, 238, 238, 0) 3.1rem);
  background-size: 12rem 6rem;
  background-position: center;
  background-repeat: repeat-x;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 96rem, #000 calc(100% - 143rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 96rem, #000 calc(100% - 143rem), transparent);
  pointer-events: none;
}

.vets-how-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24rem;
  min-width: 0;
}

/* ≥ 992: number, copy and snippet are the three rows of a subgrid, so the
   snippets line up even where one title wraps onto more lines than another
   (the 912 column). The list's 24 row gap is the Figma 24 inside a step. */
@media screen and (min-width: 992px) {
  .vets-how-step {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    justify-items: start;
    align-content: start;
  }
}

/* Figma "Label": 24px #ff6000 dot, white 12/16 medium, -0.12px. The rest state
   carries the hover ring and shadows at zero alpha so they interpolate. */
.vets-how-num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24rem;
  height: 24rem;
  border-radius: 9999px;
  background-color: var(--vets-how-orange);
  font-size: 12rem;
  line-height: 16rem;
  font-weight: 500;
  letter-spacing: -0.12rem;
  color: #fff;
  box-shadow:
    0 0 0 0 rgba(255, 188, 158, 0),
    0 1rem 1rem rgba(143, 143, 143, 0),
    0 3rem 3rem rgba(143, 143, 143, 0),
    0 6rem 4rem rgba(143, 143, 143, 0),
    0 11rem 4rem rgba(143, 143, 143, 0);
}

.vets-how-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12rem;
  width: 100%;
}

/* Figma "Heading/Regular/M": Aeonik Medium 24/28 */
.vets-how-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24rem;
  line-height: 28rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--vets-how-text);
}

/* Product snippet --------------------------------------------------------- */

/* Figma "Product snippet": 24 radius, 20 padding, 1px rgba(34,34,34,.2)
   hairline drawn over the photo (::after), 20% black overlay (::before). */
.vets-how-snippet {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 296 / 320;
  padding: 20rem;
  overflow: hidden;
  border-radius: var(--vets-how-radius);
  background-color: #fff;
  box-shadow:
    0 5rem 12rem rgba(186, 186, 186, 0),
    0 21rem 21rem rgba(186, 186, 186, 0),
    0 48rem 29rem rgba(186, 186, 186, 0),
    0 85rem 34rem rgba(186, 186, 186, 0);
}

.vets-how-snippet::before,
.vets-how-snippet::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.vets-how-snippet::before {
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.2);
}

.vets-how-snippet::after {
  z-index: 4;
  box-shadow: inset 0 0 0 1px rgba(34, 34, 34, 0.2);
}

.vets-how-photo,
.vets-how-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.vets-how-photo img {
  object-fit: cover;
  /* The crops' Figma framing (see the image script) */
  object-position: var(--vets-how-focus, 50% 50%);
}

.vets-how-step-1 { --vets-how-focus: 50% 0%; }
.vets-how-step-2 { --vets-how-focus: 50% 100%; }
.vets-how-step-3 { --vets-how-focus: 62% 50%; }
.vets-how-step-4 { --vets-how-focus: 50% 50%; }

/* Step 4: the field photo at 80%, under a 20% peach soft-light wash */
.vets-how-step-4 .vets-how-photo {
  opacity: 0.8;
}

.vets-how-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(255, 188, 158, 0.2);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* Floating product cards: 95% opacity, Figma's layered shadow as drop-shadows
   (the PNGs have transparent corners). Hover doubles the shadow alphas. */
.vets-how-card {
  position: relative;
  z-index: 3;
  display: block;
  height: auto;
  opacity: 0.95;
}

/* Figma "Risk cards": 229x197 centred in the 296 box. An in-flow child, so
   the % is of the content box inside the 20 padding: 229 / 256. */
.vets-how-card-risk {
  width: 89.5%;
  --vets-how-card-shadow:
    drop-shadow(0 6rem 7rem rgba(0, 0, 0, 0.1))
    drop-shadow(0 25rem 12.5rem rgba(0, 0, 0, 0.09))
    drop-shadow(0 57rem 17rem rgba(0, 0, 0, 0.05))
    drop-shadow(0 101rem 20rem rgba(0, 0, 0, 0.01));
  --vets-how-card-shadow-hover:
    drop-shadow(0 6rem 7rem rgba(0, 0, 0, 0.2))
    drop-shadow(0 25rem 12.5rem rgba(0, 0, 0, 0.18))
    drop-shadow(0 57rem 17rem rgba(0, 0, 0, 0.1))
    drop-shadow(0 101rem 20rem rgba(0, 0, 0, 0.02));
  filter: var(--vets-how-card-shadow);
}

/* Figma "image 40": 183x255, centred, 94.5 from the top, running off the
   bottom; a 5% black layer over it (the brightness). */
.vets-how-card-plan {
  position: absolute;
  top: 29.54%;
  left: 50%;
  width: 61.74%;
  transform: translateX(-50%);
  --vets-how-card-shadow:
    brightness(0.95)
    drop-shadow(0 7rem 7.5rem rgba(0, 0, 0, 0.1))
    drop-shadow(0 28rem 14rem rgba(0, 0, 0, 0.09))
    drop-shadow(0 63rem 19rem rgba(0, 0, 0, 0.05))
    drop-shadow(0 112rem 22.5rem rgba(0, 0, 0, 0.01));
  --vets-how-card-shadow-hover:
    brightness(0.95)
    drop-shadow(0 7rem 7.5rem rgba(0, 0, 0, 0.2))
    drop-shadow(0 28rem 14rem rgba(0, 0, 0, 0.18))
    drop-shadow(0 63rem 19rem rgba(0, 0, 0, 0.1))
    drop-shadow(0 112rem 22.5rem rgba(0, 0, 0, 0.02));
  filter: var(--vets-how-card-shadow);
}

/* Hover ------------------------------------------------------------------- */

@media (hover: hover) and (min-width: 992px) {
  .vets-how-num,
  .vets-how-snippet,
  .vets-how-snippet::before,
  .vets-how-card {
    transition:
      box-shadow var(--vets-how-ease),
      opacity var(--vets-how-ease),
      filter var(--vets-how-ease);
  }

  /* Figma 5121:9131: a 6px rgba(255,188,158,.8) stroke outside the dot, and
     the dot's drop shadow (Figma blur values, which box-shadow takes as is). */
  .vets-how-step:hover .vets-how-num {
    box-shadow:
      0 0 0 6rem rgba(255, 188, 158, 0.8),
      0 1rem 1rem rgba(143, 143, 143, 0.1),
      0 3rem 3rem rgba(143, 143, 143, 0.09),
      0 6rem 4rem rgba(143, 143, 143, 0.05),
      0 11rem 4rem rgba(143, 143, 143, 0.01);
  }

  /* Figma 5121:9136: the soft grey shadow "we use on the consumer page" */
  .vets-how-step:hover .vets-how-snippet {
    box-shadow:
      0 5rem 12rem rgba(186, 186, 186, 0.1),
      0 21rem 21rem rgba(186, 186, 186, 0.09),
      0 48rem 29rem rgba(186, 186, 186, 0.05),
      0 85rem 34rem rgba(186, 186, 186, 0.01);
  }

  .vets-how-step:hover .vets-how-snippet::before {
    opacity: 0;
  }

  .vets-how-step:hover .vets-how-card {
    filter: var(--vets-how-card-shadow-hover);
  }

  @media (prefers-reduced-motion: reduce) {
    .vets-how-num,
    .vets-how-snippet,
    .vets-how-snippet::before,
    .vets-how-card {
      transition: none;
    }
  }
}

/* ------------------------------------------------------------------ */
/* 992–1439: the 912 column — four columns with a tighter 24 gap        */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 1439px) {
  .vets-how-steps {
    gap: 24rem;
  }
}

/* ------------------------------------------------------------------ */
/* < 992: the mobile step (snippet first, no numbers or line). 768–991  */
/* has no Figma frame, so those steps sit 2x2 in the 672 column.        */
/* ------------------------------------------------------------------ */

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

  .vets-how-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40rem 32rem;
  }

  .vets-how-steps::before,
  .vets-how-num {
    display: none;
  }

  .vets-how-step {
    gap: 16rem;
  }

  .vets-how-snippet {
    order: -1;
  }

  .vets-how-copy {
    gap: 8rem;
  }

  /* Figma "Heading/Regular/S": 18/24 */
  .vets-how-title {
    font-size: 18rem;
    line-height: 24rem;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile (< 768, Figma 393): own gutter, one column, 345x320 snippets  */
/* ------------------------------------------------------------------ */

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

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

  .vets-how-lead {
    max-width: none;
  }

  .vets-how-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 40rem;
  }

  .vets-how-snippet {
    aspect-ratio: 345 / 320;
    padding: 24rem;
  }

  .vets-how-step-1 { --vets-how-focus: 50% 78%; }

  /* Figma "Patient care preview" 5121:9435: 271x233 in the 345 box, i.e. of
     its 297 content box inside the 24 padding */
  .vets-how-card-risk {
    width: 91.2%;
  }

  /* Figma 5121:9448: 204x278, 79.5 from the top, one 0 8 24 .15 shadow */
  .vets-how-card-plan {
    top: 24.85%;
    width: 59.24%;
    --vets-how-card-shadow: drop-shadow(0 8rem 12rem rgba(0, 0, 0, 0.15));
  }
}