/*
 * Homepage "how it works" section — Figma "Website" file, node 4199:119
 * (desktop 1440, the 1280 column) and 4267:1305 (mobile 393).
 *
 * An eyebrow pill and headline, three numbered photo cards (each a full-bleed
 * photo with a translucent product card floating over it), each with a title
 * and a line of copy, then the "Get your pet's forecast" button with a note.
 *
 * Cards. Every card is a rounded box with the photo as an object-fit cover
 * fill; the floating product card is a PNG with alpha (the Figma raw image)
 * positioned in PERCENTAGES of the card, so the composition scales with the
 * card at every width. The percentages are the Figma desktop coordinates over
 * the 404x403.2 card (mobile overrides them with the 345x360 frame's values).
 *
 * Layout. ≥ 992: the Figma 3-up (gap 34 at 1440, 24 in the narrower 912 column
 * where the cards are 281 wide). 768–991: no Figma frame, so the mobile stack
 * inside the 672 column. < 768: the Figma mobile frame.
 *
 * Vertical rhythm. No top padding — the prognostics section above already
 * carries the 96 (mobile 64) gap. Bottom padding is the gap to the next
 * section in the Figma frame: 108 desktop, 72 mobile.
 *
 * Units: rem, like the rest of the site (1rem = 1px at the design widths, see
 * the <style> block in index.html). The content box is a plain .container
 * (layout.css owns --container-max).
 *
 * Fonts: the section heading and the three card titles are Aeonik Medium
 * (--font-display), as in Figma; the eyebrow, step numbers, card copy, button
 * and note are Inter. Colours are the Figma literals, as in the other new
 * sections.
 *
 * Loaded after prognostics.css; the button reuses header.css .button-pill.
 */

.how-it-works {
  --how-text: #000;
  --how-subtle: #666;
  --how-label: #444;
  --how-pill-bg: #f5f5f5;
  --how-pill-border: #ebebeb;
  --how-dot: #ff5900;
  --how-badge: rgba(102, 102, 102, 0.4);
  --how-scrim: rgba(0, 0, 0, 0.2);
  --how-radius: 24rem;

  position: relative;
  z-index: 1;
  padding: 0 0 108rem;
  background-color: #fff;
  color: var(--how-subtle);
  /* Inter (Figma Typography/font/Primary). The token override, not just
     font-family, is what redirects the Webflow `a` / `h1` element rules. */
  --_colors---family-paragraph: var(--font-ui);
  font-family: var(--font-ui);
}

.how-it-works .container.how-it-works-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40rem;
}

/* Headline ---------------------------------------------------------------- */

.how-it-works-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16rem;
  max-width: 865rem;
}

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

.how-it-works-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: var(--how-dot);
}

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

/* The mobile frame breaks the headline after the comma */
.how-it-works-br {
  display: none;
}

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

.how-it-works-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

/* Photo card: a rounded box the photo fills; the floating card, badge and
   card-2 gradient are positioned against it in percentages (see top). */
.how-it-works-card {
  position: relative;
  width: 100%;
  aspect-ratio: 404 / 403.207;
  overflow: hidden;
  border-radius: var(--how-radius);
  background-color: #333;
  /* Figma desktop placement of the floating card, as fractions of the box */
  --how-ov-left: 16.365%;
  --how-ov-top: 24.005%;
  --how-ov-w: 67.269%;
}

.how-it-works-card-2 {
  --how-ov-left: 13.198%;
  --how-ov-top: 53.968%;
  --how-ov-w: 73.603%;
  --how-grad-h: 14.947%;
}

.how-it-works-card-3 {
  --how-ov-left: 10.549%;
  --how-ov-top: 70.047%;
  --how-ov-w: 78.902%;
}

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

.how-it-works-photo img {
  object-fit: cover;
  object-position: center;
}

/* Card 2's photo is bottom-anchored in Figma (the pair's heads stay in view) */
.how-it-works-card-2 .how-it-works-photo img {
  object-position: center bottom;
}

/* Figma: a 20% black multiply layer over the photo on cards 1 and 3 */
.how-it-works-card-1::before,
.how-it-works-card-3::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--how-scrim);
  pointer-events: none;
}

/* The floating product card. Its width/height attributes give the aspect;
   the backdrop blur and the layered shadow are the Figma node's effects. */
.how-it-works-overlay {
  position: absolute;
  z-index: 2;
  left: var(--how-ov-left);
  top: var(--how-ov-top);
  width: var(--how-ov-w);
  height: auto;
  border-radius: 4.4%;
  -webkit-backdrop-filter: blur(6rem);
  backdrop-filter: blur(6rem);
  filter:
    drop-shadow(0 7rem 8rem rgba(0, 0, 0, 0.1))
    drop-shadow(0 30rem 15rem rgba(0, 0, 0, 0.09))
    drop-shadow(0 67rem 20rem rgba(0, 0, 0, 0.05));
}

.how-it-works-card-2 .how-it-works-overlay {
  opacity: 0.9;
  -webkit-backdrop-filter: blur(8rem);
  backdrop-filter: blur(8rem);
}

/* Card 2: the to-do card runs off the bottom of the box, and a dark gradient
   (Figma "Rectangle 4551", 60px tall over the card's column) fades it out. */
.how-it-works-card-2::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: var(--how-ov-left);
  bottom: 0;
  width: var(--how-ov-w);
  height: var(--how-grad-h);
  background: linear-gradient(to bottom, rgba(76, 75, 70, 0), #282727);
  pointer-events: none;
}

/* Step number badge: 32px, 40% grey, white 16/20 medium; 24px from the corner */
.how-it-works-num {
  position: absolute;
  z-index: 4;
  top: 24rem;
  left: 24rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32rem;
  height: 32rem;
  border-radius: 9999px;
  background-color: var(--how-badge);
  font-size: 16rem;
  line-height: 20rem;
  font-weight: 500;
  letter-spacing: -0.16rem;
  color: #fff;
}

/* Card hover -------------------------------------------------------------- */

/* Figma interaction annotation on the card (4195:888): "On card hover, lift the
   card 3px on the Y-axis with an increased soft box-shadow, 180ms ease-out, and
   scale any image/photo inside from 1 to 1.03 over the same duration, clipped
   to the card's border radius. All hover transitions ease back to default on
   mouse-leave at matching duration." Only card 01 carries the note; it is
   written for the card pattern, so all three get it.
   The rest state declares the same three-layer shadow at zero alpha so the two
   shadow lists interpolate instead of swapping. The photo is clipped by the
   card's own `overflow: hidden` + `border-radius`. */
.how-it-works-card {
  box-shadow:
    0 4rem 8rem rgba(0, 0, 0, 0),
    0 12rem 24rem rgba(0, 0, 0, 0),
    0 24rem 48rem rgba(0, 0, 0, 0);
}

@media (hover: hover) {
  .how-it-works-card {
    transition:
      transform 180ms ease-out,
      box-shadow 180ms ease-out;
  }

  .how-it-works-photo img {
    transition: transform 180ms ease-out;
  }

  .how-it-works-card:hover {
    transform: translateY(-3rem);
    box-shadow:
      0 4rem 8rem rgba(0, 0, 0, 0.08),
      0 12rem 24rem rgba(0, 0, 0, 0.1),
      0 24rem 48rem rgba(0, 0, 0, 0.08);
  }

  .how-it-works-card:hover .how-it-works-photo img {
    transform: scale(1.03);
  }

  @media (prefers-reduced-motion: reduce) {
    .how-it-works-card,
    .how-it-works-photo img {
      transition: none;
    }

    .how-it-works-card:hover {
      transform: none;
    }

    .how-it-works-card:hover .how-it-works-photo img {
      transform: none;
    }
  }
}

.how-it-works-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8rem;
  width: 100%;
  padding-right: 16rem;
}

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

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

/* CTA --------------------------------------------------------------------- */

.how-it-works-cta {
  display: flex;
  align-items: center;
  gap: 16rem;
  width: 100%;
}

/* Figma "button-large": 14px 48px, 16/24 semibold, -0.32px; 52px tall with
   the 1.5px hairline inside. Our border sits outside, so 13px vertical. */
.how-it-works .button-pill.how-it-works-button {
  flex-shrink: 0;
  max-height: none;
  padding: 13rem 48rem;
  font-size: 16rem;
  line-height: 24rem;
  letter-spacing: -0.32rem;
}

/* Figma "DS-Body/S": 14/20, -0.28px, #666 */
.how-it-works-note {
  margin: 0;
  font-size: 14rem;
  line-height: 20rem;
  letter-spacing: -0.28rem;
  color: var(--how-subtle);
}

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

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

  /* Figma's 16px right padding on the copy assumes the 404 card; in the
     281 card it would wrap "Get a plan you can follow" onto two lines. */
  .how-it-works-copy {
    padding-right: 0;
  }
}

/* ------------------------------------------------------------------ */
/* < 992: single column (no Figma tablet frame; this is the mobile      */
/* stack inside the 672 column, then the 393 frame's own values)        */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 991px) {
  .how-it-works-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 32rem;
  }

  .how-it-works-step {
    gap: 16rem;
  }

  .how-it-works-copy {
    padding-right: 0;
  }

  .how-it-works-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .how-it-works .button-pill.how-it-works-button {
    width: 100%;
    padding: 11rem 48rem;
  }

  .how-it-works-note {
    text-align: center;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile (< 768, Figma 393): own gutter, smaller type, 345x360 cards   */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {
  .how-it-works {
    padding: 0 24rem 72rem;
  }

  .how-it-works .container.how-it-works-inner {
    gap: 24rem;
  }

  .how-it-works-headline {
    gap: 12rem;
    max-width: none;
  }

  /* Figma "Label/S": 12/16 medium, -0.12px, 6px 14px 6px 10px (28px tall) */
  .how-it-works-eyebrow {
    padding: 5rem 14rem 5rem 10rem;
    font-size: 12rem;
    line-height: 16rem;
    letter-spacing: -0.12rem;
  }

  /* Figma "Heading/Regular/L": 32/38, no tracking */
  .how-it-works-heading {
    font-size: 32rem;
    line-height: 38rem;
    letter-spacing: 0;
  }

  .how-it-works-br {
    display: inline;
  }

  /* Figma mobile: 345x360 cards, the floating card centred, badge at 16 */
  .how-it-works-card {
    aspect-ratio: 345 / 360;
    --how-ov-left: 14.413%;
    --how-ov-top: 20.541%;
    --how-ov-w: 71.174%;
  }

  .how-it-works-card-2 {
    --how-ov-left: 6.905%;
    --how-ov-top: 53.778%;
    --how-ov-w: 86.190%;
    --how-grad-h: 13.333%;
  }

  .how-it-works-card-2::after {
    left: 0;
    width: 100%;
  }

  .how-it-works-card-3 {
    --how-ov-left: 6.232%;
    --how-ov-top: 69.288%;
    --how-ov-w: 87.536%;
  }

  .how-it-works-num {
    top: 16rem;
    left: 16rem;
  }

  .how-it-works-copy {
    gap: 4rem;
  }

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