/*
 * About "The solution" — Figma "Website" file, "Pointer - About" 5121:9659,
 * node "Clinical expertise and authority" 5121:9678 (1440x1153). Shared by
 * /about and /vets/about. < 768 is "Pointer - About mobile" 5121:10367.
 *
 * A label and serif headline, the diagram, and a centred closing copy block,
 * on #f9f9f9 with the paper texture (the expert section's, the same Figma
 * image) multiplied at 20%, the blend on the <picture>. The label is .about-label from about-problem.css.
 *
 * The diagram. Three rings around the dog (Calvin), the signals Pointer
 * weighs on the left and what it returns on the right. The two panels are
 * Figma SVG exports with the text as paths ("Left" 5127:13246 at (164, 369),
 * "Right" 5199:325, exported from (872.75, 342.9) with its shadows). The
 * rings are CSS so the dashed one can turn (Figma annotation: "animate the
 * dotted line so it looks like it's rotating"); its dashes are an SVG
 * circle with pathLength 1504 = 94 x (8 dash + 8 gap), so the loop has no
 * seam.
 *
 * Geometry. .about-solution-stage is the Figma frame (1440x1153) and every
 * coordinate in it is Figma's. It hangs from the top of the
 * .about-solution-diagram box, which takes the room between the headline
 * (it ends at y 266.61) and the copy (y 889): 622.39 tall, so the stage sits
 * at -266.61. The hub's coordinates are its own (it is the 680 outer ring
 * at (380, 236.5)), multiplied by --s, its scale.
 *   992–1439 (no frame): the stage scaled .86 about the diagram's top
 *     centre, so the panels (164 → 1283) fit the 1040 band.
 *   ≥ 1920: the stage stays 1440 wide, centred.
 *   < 992: the mobile frame's diagram (Figma 5121:10367; geometry at the
 *     "< 992" block): signals above the dog, insights below, as the
 *     -mobile exports "Top" 5199:438 and "Bottom" 5202:548. 768–991 (no
 *     frame) keeps the centred headline and copy around it.
 *   < 768: the frame's left-aligned headline and copy.
 *
 * The insights exports have the card group's own filter removed: its
 * shadows (.05/.01) and 3% inner shadow are built from Figma's alpha x 127
 * threshold, which Chrome turns into a grey box over the child card's
 * shadow. Rebuild that way if the panel is re-exported.
 *
 * Fonts: headline PP Pangaia Medium, subheading Aeonik Medium
 * (--font-display), the rest Inter. Colours are the Figma literals.
 */

.about-solution {
  --about-solution-ring: 246, 245, 244;
  --about-solution-shadow: 194, 194, 194;
  --about-solution-fade: 247, 246, 245;

  position: relative;
  z-index: 1;
  isolation: isolate;
  padding: 108.21rem 0 96rem;
  overflow: hidden;
  background-color: #f9f9f9;
  color: #222;
  /* 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);
  text-align: center;
}

/* Paper texture: Figma's image fill, multiply at 20% */
.about-solution-texture,
.about-solution-texture img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* The blend sits on the picture: its z-index makes it a stacking context,
   so a blend on the img would only see the picture's own empty backdrop */
.about-solution-texture {
  z-index: -1;
  mix-blend-mode: multiply;
  opacity: 0.2;
  pointer-events: none;
}

.about-solution-texture img {
  object-fit: cover;
}

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

.about-solution .container.about-solution-headline {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rem;
}

/* Figma "Heading/Accent": PP Pangaia Medium 48/1.15, -1.28px, black; the
   break after "signal," is Figma's */
.about-solution-heading {
  max-width: 1057rem;
  margin: 0;
  font-family: "PP Pangaia", var(--font-display);
  font-size: 48rem;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -1.28rem;
  color: #000;
}

/* Diagram ----------------------------------------------------------------- */

.about-solution-diagram {
  position: relative;
  height: 622.39rem;
}

.about-solution-stage {
  position: absolute;
  top: -266.61rem;
  left: 50%;
  width: 1440rem;
  height: 1153rem;
  margin-left: -720rem;
}

.about-solution-signals,
.about-solution-insights,
.about-solution-signals-narrow,
.about-solution-insights-narrow {
  position: absolute;
  z-index: 2;
  display: block;
  height: auto;
  max-width: none;
}

/* The mobile frame's panels, < 992 only */
.about-solution-signals-narrow,
.about-solution-insights-narrow {
  display: none;
}

.about-solution-signals {
  left: 164rem;
  top: 369rem;
  width: 407rem;
}

.about-solution-insights {
  left: 872.75rem;
  top: 342.9rem;
  width: 436rem;
}

/* The 680 outer ring's box; everything in it is in its coordinates x --s */
.about-solution-hub {
  --s: 1;

  position: absolute;
  z-index: 0;
  left: 380rem;
  top: 236.5rem;
  width: calc(680rem * var(--s));
  height: calc(680rem * var(--s));
}

/* Figma fills are #f6f5f4 at .4/.6/.8 with an inside hairline and
   #c2c2c2 drop shadows (Figma blur = CSS blur) */
.about-solution-ring {
  position: absolute;
  border-radius: 50%;
}

/* Ellipse 8 5123:12457: 680, #e1e1e1 hairline */
.about-solution-ring-outer {
  inset: 0;
  background-color: rgba(var(--about-solution-ring), 0.4);
  box-shadow:
    inset 0 0 0 1px #e1e1e1,
    0 8rem 18rem rgba(var(--about-solution-shadow), 0.1),
    0 32rem 32rem rgba(var(--about-solution-shadow), 0.09);
}

/* Ellipse 7 5123:12427: 480 at (110, 104.69), 2px #d6d3d3 dashes 8/8 */
.about-solution-ring-dashed {
  left: calc(110rem * var(--s));
  top: calc(104.69rem * var(--s));
  width: calc(480rem * var(--s));
  height: calc(480rem * var(--s));
  background-color: rgba(var(--about-solution-ring), 0.6);
  box-shadow:
    0 7rem 16rem rgba(var(--about-solution-shadow), 0.1),
    2rem 29rem 29rem rgba(var(--about-solution-shadow), 0.09),
    4rem 65rem 39rem rgba(var(--about-solution-shadow), 0.05),
    7rem 116rem 47rem rgba(var(--about-solution-shadow), 0.01);
}

.about-solution-dashes {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: about-solution-turn 60s linear infinite;
}

.about-solution-dashes circle {
  fill: none;
  stroke: #d6d3d3;
  stroke-width: 2;
  stroke-dasharray: 8 8;
}

@keyframes about-solution-turn {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-solution-dashes {
    animation: none;
  }
}

/* Ellipse 6 5123:12426: 326.96 x 320.21 at (186.52, 184.58), #e0dede */
.about-solution-ring-inner {
  left: calc(186.52rem * var(--s));
  top: calc(184.58rem * var(--s));
  width: calc(326.96rem * var(--s));
  height: calc(320.21rem * var(--s));
  background-color: rgba(var(--about-solution-ring), 0.8);
  box-shadow:
    inset 0 0 0 1px #e0dede,
    0 7rem 16rem rgba(var(--about-solution-shadow), 0.1),
    4rem 65rem 39rem rgba(var(--about-solution-shadow), 0.05),
    7rem 116rem 47rem rgba(var(--about-solution-shadow), 0.01);
}

/* "Dog picture" 5126:12861: 180 wide, centred 10 right / 12.69 down of the
   hub's centre (the photo is the Figma crop, masked round), the CALVIN tag
   overlapping its foot by 24. Unscaled at every --s. */
.about-solution-dog {
  position: absolute;
  left: calc(50% - 90rem + 10rem * var(--s));
  top: calc(50% - 96rem + 12.69rem * var(--s));
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 180rem;
}

.about-solution-dog-photo,
.about-solution-dog-photo img {
  display: block;
  width: 180rem;
  height: 180rem;
  border-radius: 50%;
}

.about-solution-dog-photo img {
  object-fit: cover;
}

.about-solution-dog-tag,
.about-solution-dog-tag img {
  display: block;
  width: 88rem;
  height: 36rem;
}

.about-solution-dog-tag {
  margin-top: -24rem;
}

/* "fade-bottom" 5126:12860: #f7f6f5 from the bottom to half its 280.91,
   then out. Over the rings, under the panels; full bleed. */
.about-solution-fade {
  position: absolute;
  z-index: 1;
  left: -1000rem;
  right: -1000rem;
  bottom: 0;
  height: 280.91rem;
  background: linear-gradient(to top, rgb(var(--about-solution-fade)) 50%, rgba(var(--about-solution-fade), 0));
  pointer-events: none;
}

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

/* Figma "Copy" 5121:9691: 623 wide, 16 between the blocks; the paragraph
   and the note sit in 32 side padding */
.about-solution .container.about-solution-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rem;
}

/* Figma "Heading/Regular/M": Aeonik Medium 24/28, black, 544.43 wide */
.about-solution-subheading {
  max-width: 545rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 24rem;
  line-height: 28rem;
  font-weight: 500;
  color: #000;
}

/* Figma "Body/M": Inter 16/24, -0.32px, #222 */
.about-solution-text {
  max-width: 559rem;
  margin: 0;
  font-size: 16rem;
  line-height: 24rem;
  font-weight: 400;
  letter-spacing: -0.32rem;
  color: #222;
}

/* Figma "Link" 5121:9693: Inter Medium 16/20, -0.16px, black, 8 above and
   below */
.about-solution-note {
  margin: 0;
  padding: 8rem 0;
  font-size: 16rem;
  line-height: 20rem;
  font-weight: 500;
  letter-spacing: -0.16rem;
  color: #000;
}

/* "Why we started with dogs" opens the dialog; underlined as in the mobile
   frame, so it reads as a control at every width */
.about-solution-why {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
  cursor: pointer;
}

.about-solution-why:focus-visible {
  outline: 2px solid #ff5900;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ------------------------------------------------------------------ */
/* 992–1439 (no frame): the stage at .86                                */
/* ------------------------------------------------------------------ */

@media screen and (min-width: 992px) and (max-width: 1439px) {
  .about-solution-diagram {
    height: calc(622.39rem * 0.86);
  }

  .about-solution-stage {
    transform: scale(0.86);
    transform-origin: 720rem 266.61rem;
  }
}

/* ------------------------------------------------------------------ */
/* < 992: the mobile frame's diagram (5121:10367)                       */
/* ------------------------------------------------------------------ */

/* Figma leaves 580 between the headline and the copy and lays the diagram
   over it. .about-solution-stage is that 393x580 band, centred, and every
   coordinate in it is the frame's less 220 (where the headline ends):
     rings and dog centred at (196.5, 279), i.e. the section's centre less 50;
     "Top" 5199:438 at (45.28, 50.33), exported from 26 further left with
     its shadows, so (19.28, 50.33), 373x238;
     "Bottom" 5202:548 at (24, 327.54), exported from 24 further left, so
     (0, 327.54), 380x311.
   The ring sizes are the frame's, not --s-scaled: the mobile proportions
   differ from the 1440 ones. 768–991 (no frame) shows the same diagram,
   centred, under the centred copy. */
@media screen and (max-width: 991px) {
  .about-solution {
    padding: 80rem 0;
  }

  .about-solution-diagram {
    height: 580rem;
  }

  .about-solution-stage {
    top: 0;
    width: 393rem;
    height: 580rem;
    margin-left: -196.5rem;
  }

  .about-solution-signals,
  .about-solution-insights,
  .about-solution-fade {
    display: none;
  }

  .about-solution-signals-narrow,
  .about-solution-insights-narrow {
    display: block;
  }

  .about-solution-signals-narrow {
    left: 19.28rem;
    top: 50.33rem;
    width: 373rem;
  }

  .about-solution-insights-narrow {
    left: 0;
    top: 327.54rem;
    width: 380rem;
  }

  /* Ellipse 8: 429.215, centred on (196.5, 279) */
  .about-solution-hub {
    left: -18.11rem;
    top: 64.39rem;
    width: 429.215rem;
    height: 429.215rem;
  }

  /* Ellipse 7: 257.529, centred */
  .about-solution-ring-dashed {
    left: 85.843rem;
    top: 85.843rem;
    width: 257.529rem;
    height: 257.529rem;
  }

  /* Ellipse 6: 149.506 x 146.42, centred */
  .about-solution-ring-inner {
    left: 139.855rem;
    top: 141.398rem;
    width: 149.506rem;
    height: 146.42rem;
  }

  /* "Dog picture" 5127:13370: a 95.09 photo, the 70x26 tag overlapping its
     foot by 24, the 97.09 stack centred */
  .about-solution-dog {
    left: calc(50% - 47.545rem);
    top: calc(50% - 48.545rem);
    width: 95.09rem;
  }

  .about-solution-dog-photo,
  .about-solution-dog-photo img {
    width: 95.09rem;
    height: 95.09rem;
  }

  .about-solution-dog-tag,
  .about-solution-dog-tag img {
    width: 70rem;
    height: 26rem;
  }
}

/* < 768: Figma "The solution" 5121:10367 (393x1098), all left-aligned */
@media screen and (max-width: 767px) {
  .about-solution {
    padding: 64rem 24rem;
    text-align: left;
  }

  .about-solution-br {
    display: none;
  }

  /* "Solution headline" 5121:10368: 16 right padding */
  .about-solution .container.about-solution-headline {
    align-items: flex-start;
    padding-right: 16rem;
  }

  /* Figma: PP Pangaia Medium 32/1.14, -0.64px */
  .about-solution-heading {
    font-size: 32rem;
    line-height: 1.14;
    letter-spacing: -0.64rem;
  }

  /* "Individualized risk profiles" 5121:10376: 16 right padding, 16 gap */
  .about-solution .container.about-solution-copy {
    align-items: flex-start;
    padding-right: 16rem;
  }

  /* Figma: Aeonik Medium 20/1.15, -0.36px */
  .about-solution-subheading {
    max-width: none;
    font-size: 20rem;
    line-height: 1.15;
    letter-spacing: -0.36rem;
  }

  /* Figma: #666 here, #222 on desktop */
  .about-solution-text {
    max-width: none;
    color: #666;
  }

  /* Figma: 8 between "Cats are next! " and the link */
  .about-solution-why {
    margin-left: 8rem;
  }
}