/* scope: .msi-page--repair */
/* Instrument Repair (wire repair: 835:984 / 835:1413 / 835:1218, board 813:589). Owner: agent repair. Every selector must start
   with the scope above; _tools/css_scope_check.py fails the sign-off otherwise. Responsive rules live here too.
   Layout and type come from the content idiom (msi-page-content.css). This file holds the page wash, the hero,
   the white plate, the benefit cards, the closing panel (OSHA notice + CTA) and the photos. Photos are crops of the
   2x frame export, so the head over each chamfered frame sits on the plate's white and the CTA hand over the panel's
   top edge on the closing panel's #fafafa. */

/* the wire frame's own fill; sized to the frame and offset by the header, so the visible band matches it */
.msi-page--repair {
  position: relative;
  margin: 0 calc(-1 * var(--msi-gutter));
  padding: 56px var(--msi-gutter) 0;
  /* the right ring frame (835:985, 338x452) is the top layer; the left one is ::before, mirrored */
  background:
    url("../images/repair/rings.svg") right 0 top 0 / 338px 452px no-repeat,
    #fff linear-gradient(45.2424deg, #c8dbf0 50.843%, #fff 67.642%, #fff 71.219%, #fff 74.064%, #aec8e5 100.43%) 0 -196px / 100% 3300px no-repeat;
}
.msi-page--repair::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 338px;
  height: 452px;
  background: url("../images/repair/rings.svg") 0 0 / 338px 452px no-repeat;
  transform: scaleX(-1);
  pointer-events: none;
}
/* the closing panel runs on under the footer: its first 34px there sit left of the footer's tab, where the footer box is
   transparent. z-index -1 puts this strip under the footer's own z-index -1 surface and tab (they come later) */
.msi-page--repair::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 100%;
  left: max(32px, calc((100% - 1376px) / 2));
  right: max(32px, calc((100% - 1376px) / 2));
  height: 34px;
  background: #fafafa;
  pointer-events: none;
}


/* ---- closing panel (835:1039): #fafafa r56 behind the OSHA notice and the CTA, x 32..1408, 125 under the benefits;
   it runs on under the footer, so it ends at the footer's top edge (the -80 takes back the footer's 80 top margin) --- */
.msi-page--repair .msi-repair__closing {
  margin: 125px -48px -80px;
  padding: 100px 48px 120px;
  background: #fafafa;
  border-radius: 56px 56px 0 0;
}
/* notice: form group left (x 135, 55 into the column), copy right (x 736, 624 wide, 34 under the group top) */
.msi-page--repair .msi-repair__notice {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
}
.msi-page--repair .msi-repair__notice-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 0 1 624px;
  min-width: 0;
  margin-top: 34.23px;
}
/* Inter Display Medium in the wire; Inter 500 (BRIEF accepted deviation 1) */
.msi-page--repair .msi-repair__notice-title {
  margin: 0;
  font-family: var(--msi-font);
  font-size: 40px;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: normal;
  color: #000;
}
.msi-page--repair .msi-repair__notice-text strong { font-weight: 700; }
/* a required form: always underlined, touch has no hover (audit ruling 2026-09-23) */
.msi-page--repair .msi-repair__notice-text a {
  font: inherit;
  color: inherit;
  text-decoration: underline;
}
/* the live repair-form image (816x1056, the wire's own fill) on two tilted cards: #eee +3.26deg under #efefef -2.67deg.
   Drawn at 1440 size and scaled per width by --u, one scaled px (834 1.2197px, 440 0.79915px), as the wire scales the group */
.msi-page--repair .msi-repair__form {
  --u: 1px;
  position: relative;
  isolation: isolate;
  display: block;
  flex: 0 0 auto;
  width: calc(479.26 * var(--u));
  height: calc(530.46 * var(--u));
  margin-left: 55px;
}
.msi-page--repair .msi-repair__form::before,
.msi-page--repair .msi-repair__form::after {
  content: "";
  position: absolute;
  border-radius: calc(32 * var(--u));
}
.msi-page--repair .msi-repair__form::before {
  left: calc(56.13 * var(--u));
  top: calc(11.23 * var(--u));
  width: calc(409 * var(--u));
  height: calc(508 * var(--u));
  background: #eee;
  transform: rotate(3.26deg);
}
.msi-page--repair .msi-repair__form::after {
  left: calc(10.27 * var(--u));
  top: calc(38.18 * var(--u));
  width: calc(361.849 * var(--u));
  height: calc(449.192 * var(--u));
  background: #efefef;
  transform: rotate(-2.67deg);
}
.msi-page--repair .msi-repair__form img {
  position: absolute;
  z-index: 1;
  left: calc(28 * var(--u));
  top: calc(11 * var(--u));
  width: calc(409 * var(--u));
  height: calc(508 * var(--u));
  max-width: none;
  object-fit: cover;
  border-radius: calc(32 * var(--u));
}
@media (max-width: 991px) {
  /* 835:1441: x 25..809, 80 under the benefits, copy 64 in and 48 from each side; the group centred 80 under the copy.
     The CTA sits flush with the panel's left edge (x 25), as drawn */
  .msi-page--repair .msi-repair__closing {
    margin: 80px -15px -80px;
    padding: 64px 0 120px;
  }
  /* the 834 footer goes solid 35 down (its tab is 36 tall) */
  .msi-page--repair::after { left: 25px; right: 25px; height: 36px; }
  .msi-page--repair .msi-repair__notice {
    flex-direction: column;
    align-items: center;
    gap: 80px;
    padding: 0 48px;
  }
  .msi-page--repair .msi-repair__notice-copy {
    flex: 0 0 auto;
    align-self: stretch;
    margin-top: 0;
  }
  .msi-page--repair .msi-repair__notice-title {
    font-size: 56px;
    line-height: 67px;
  }
  .msi-page--repair .msi-repair__form {
    --u: 1.2197px;
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  /* 835:1231: x 12..428, 88.78 under the benefits; copy 48 in, 24 from each side; the group 48 under the copy; the CTA
     keeps the 24 gutter (12 into the panel) */
  .msi-page--repair .msi-repair__closing {
    margin: 88.78px -12px -80px;
    padding: 48px 12px 88px;
  }
  /* the 440 footer goes solid 34 down (its tab is 35 tall) */
  .msi-page--repair::after { left: 12px; right: 12px; height: 35px; }
  .msi-page--repair .msi-repair__notice {
    gap: 48px;
    padding: 0 12px;
  }
  .msi-page--repair .msi-repair__notice-title {
    font-size: 40px;
    line-height: 48px;
  }
  /* 0.79915 at 440; narrower phones scale the group down so it keeps 28.5 each side (it ran 4-32 past a 375-320 window) */
  .msi-page--repair .msi-repair__form { --u: min(0.79915px, calc((100vw - 57px) / 479.26)); }
}

/* ---- hero: eyebrow, h1, lede, centred text; the 1440 wire puts the block 35 left of centre (741:2722 x 373) ---- */
.msi-page--repair .msi-repair__hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 624px;
  max-width: 100%;
  margin-left: calc(50% - 347px);
  text-align: center;
}
.msi-page--repair .msi-repair__hero .msi-page__head { width: 508px; max-width: 100%; }
/* Inter sets the title wider than Inter Display: in the wire's 508 box it would take three lines, so the title
   alone spans the 624 hero column while the heading block keeps its 508 box */
.msi-page--repair .msi-repair__hero .msi-page__title { margin: 0 -58px; }

/* ---- white plate: full container width, 80 top corners ---------------------------------------------------- */
.msi-page--repair .msi-repair__plate {
  position: relative;
  z-index: 1;
  margin: 64px calc(-1 * var(--msi-gutter)) 0;
  /* the closing panel is the last block and carries the 120 / 88 down to the footer */
  padding: 80px var(--msi-gutter) 0;
  background: #fff;
  border-radius: 80px 80px 0 0;
}
/* wider than the 1440 wire the plate stays full width and its content keeps the 1280 column */
@media (min-width: 1441px) {
  .msi-page--repair .msi-repair__plate {
    padding-left: max(var(--msi-gutter), calc((100% + 2 * var(--msi-gutter) - var(--msi-content)) / 2));
    padding-right: max(var(--msi-gutter), calc((100% + 2 * var(--msi-gutter) - var(--msi-content)) / 2));
  }
}

/* Figma lays titles on whole-pixel lines (56 -> 67, 40 -> 48); 67.2 drifts 0.4 a line against every box below */
.msi-page--repair .msi-page__title { line-height: 67px; }
.msi-page--repair .msi-page__copy .msi-page__head { max-width: 508px; }
@media (min-width: 992px) {
  .msi-page--repair .msi-page__split { align-items: flex-start; }
}

/* section 1: photo left, copy right, both 80 under the plate top; the nurse's head rises 44 over the frame */
.msi-page--repair .msi-repair__photo { background: none; }
.msi-page--repair .msi-repair__photo::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background: center / 100% 100% no-repeat;
}
.msi-page--repair .msi-repair__photo--intro::before {
  top: calc(-44 / 455 * 100%);
  height: calc(499 / 455 * 100%);
  background-image: url("../images/repair/repair-intro@2x.webp");
}

/* section 2: copy left, photo right; frame 69 under the copy top, the surgeon's head 80 over it */
.msi-page--repair .msi-repair__benefits { margin-top: 122px; }
.msi-page--repair .msi-repair__photo--benefits { margin-top: 69px; }
.msi-page--repair .msi-repair__photo--benefits::before {
  top: calc(-80 / 455 * 100%);
  height: calc(535 / 455 * 100%);
  background-image: url("../images/repair/repair-benefits@2x.webp");
}

/* ---- benefit cards --------------------------------------------------------------------------------------- */
.msi-page--repair .msi-repair__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.msi-page--repair .msi-repair__item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  color: var(--msi-ink-2);
  background: #fff;
  border: 1px solid rgba(38, 45, 49, 0.2);
  border-radius: 12px;
}
.msi-page--repair .msi-repair__item::before {
  content: "";
  flex: 0 0 21.33px;
  width: 21.33px;
  height: 21.33px;
  background: center / 21.33px 21.33px no-repeat;
}
.msi-page--repair .msi-repair__item--evaluation::before   { background-image: url("../images/repair/icon-search-check.svg"); }
.msi-page--repair .msi-repair__item--manufacturer::before { background-image: url("../images/repair/icon-brush.svg"); }
.msi-page--repair .msi-repair__item--cleaned::before      { background-image: url("../images/repair/icon-droplets.svg"); }
.msi-page--repair .msi-repair__item--specialists::before  { background-image: url("../images/repair/icon-microscope.svg"); }
.msi-page--repair .msi-repair__item--estimate::before     { background-image: url("../images/repair/icon-receipt-text.svg"); }
.msi-page--repair .msi-repair__item--quality::before      { background-image: url("../images/repair/icon-shield-check.svg"); }

/* ---- CTA panel: #eff6ff, r56; the hand photo rises 112 over its top edge (741:2557) ------------------------- */
.msi-page--repair .msi-repair__cta {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 336px;
  /* 100.54 under the form group (835:1041 at 2845, 835:1103 ends 2744.46) */
  margin-top: 100.54px;
  padding: 24px 64px;
  background: #eff6ff;
  border-radius: 56px;
}
.msi-page--repair .msi-repair__cta-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 571px;
  max-width: 100%;
}
.msi-page--repair .msi-repair__cta-title {
  margin: 0;
  font-family: var(--msi-font);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  color: #000;
}
.msi-page--repair .msi-repair__phone { white-space: nowrap; }
.msi-page--repair .msi-repair__cta-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
}
.msi-page--repair .msi-repair__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 32px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: var(--msi-ink);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.msi-page--repair .msi-repair__btn::after {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background: url("../images/repair/chevron-right.svg") center / 20px 20px no-repeat;
}
.msi-page--repair .msi-repair__btn--form { background: var(--msi-orange); }
.msi-page--repair .msi-repair__btn--call { border: 1px solid rgba(0, 0, 0, 0.22); }
.msi-page--repair .msi-repair__btn:hover,
.msi-page--repair .msi-repair__btn:focus { color: var(--msi-ink); text-decoration: none; }
.msi-page--repair .msi-repair__btn--form:hover,
.msi-page--repair .msi-repair__btn--form:focus-visible { background: var(--msi-orange-dark); }
.msi-page--repair .msi-repair__btn--call:hover,
.msi-page--repair .msi-repair__btn--call:focus-visible { background: #fff; }
.msi-page--repair .msi-repair__cta-art {
  position: absolute;
  top: -112px;
  right: 0;
  width: 530px;
  height: 448px;
  background: url("../images/repair/repair-cta-v2@2x.webp") center / 100% 100% no-repeat;
  border-bottom-right-radius: 56px;
}
@media (min-width: 1300px) {
  .msi-page--repair .msi-repair__cta-copy > p { white-space: nowrap; }
}

/* ---- tablet: 834 wire --------------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .msi-page--repair {
    background-image: url("../images/repair/rings.svg"), linear-gradient(85.5678deg, #c8dbf0 9.9784%, #fff 51.973%, #fff 60.916%, #fff 68.027%, #aec8e5 133.95%);
    background-position: right 0 top 0, 0 -151px;
    background-size: 338px 452px, 100% 4463px;
    padding-top: 65px;
  }
  .msi-page--repair .msi-repair__hero { margin-left: auto; margin-right: auto; }
  .msi-page--repair .msi-repair__plate {
    margin-top: 56px;
    padding-top: 56px;
  }
  .msi-page--repair .msi-repair__intro .msi-page__head { max-width: none; }
  /* the 834 photos are their own crops: 754x468 frames; heads 38 / 29 over them */
  .msi-page--repair .msi-repair__photo--intro { margin-top: 38px; }
  .msi-page--repair .msi-repair__photo--intro::before {
    top: calc(-38 / 468 * 100%);
    height: calc(506 / 468 * 100%);
    background-image: url("../images/repair/repair-intro-834@2x.webp");
  }
  .msi-page--repair .msi-repair__benefits { margin-top: 120px; }
  .msi-page--repair .msi-repair__photo--benefits { margin-top: 29px; }
  .msi-page--repair .msi-repair__photo--benefits::before {
    top: calc(-29 / 468 * 100%);
    height: calc(497 / 468 * 100%);
    background-image: url("../images/repair/repair-benefits-834@2x.webp");
  }
  /* 835:1451: 754x399 at x 25, flush with the closing panel (15 left of the 40 gutter, as drawn); 117 under the form
     group; copy 48 in, 361 wide, centred */
  .msi-page--repair .msi-repair__cta {
    width: 754px;
    max-width: 100%;
    min-height: 399px;
    margin-top: 117px;
    padding: 24px 48px;
  }
  .msi-page--repair .msi-repair__cta-copy { width: 361px; }
  .msi-page--repair .msi-repair__cta-title { line-height: 47px; }
  /* the hand runs 61 over the panel and 30 past its right edge */
  .msi-page--repair .msi-repair__cta-art {
    top: -61px;
    right: -30px;
    width: 373px;
    height: 460px;
    background-image: url("../images/repair/repair-cta-834-v2@2x.webp");
    border-radius: 0;
  }
}
/* below the 834 frame the hand's transparent right margin (it runs 30 past the panel) would reach past the window:
   clip it horizontally; the art keeps its 834 size, since its image carries the panel's own edge */
@media (min-width: 768px) and (max-width: 833px) {
  .msi-page--repair { overflow-x: clip; }
}

/* ---- mobile: 440 wire --------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .msi-page--repair {
    /* Figma's CSS prints the first stop as 16.48%; its SVG export (stops 0 / .3387 / .4109 / .4682 / 1 from
       -144,730.7 to 719.2,770.5) puts it at -16.48%, and only that value reproduces the other four stops */
    background-image: linear-gradient(92.6383deg, #c8dbf0 -16.48%, #fff 27.29%, #fff 36.611%, #fff 44.023%, #aec8e5 112.73%);
    background-position: 0 -117px;
    background-size: 100% 4980px;
    padding-top: 56px;
  }
  /* no ring frames at 440: the gradient alone */
  .msi-page--repair::before { display: none; }
  .msi-page--repair .msi-repair__hero { gap: 32px; }
  .msi-page--repair .msi-repair__hero .msi-page__head { width: auto; gap: 16px; }
  .msi-page--repair .msi-page__title { line-height: 48px; }
  .msi-page--repair .msi-repair__hero .msi-page__title {
    margin: 0;
    line-height: 42px;
  }
  .msi-page--repair .msi-repair__plate {
    border-radius: 56px 56px 0 0;
  }
  .msi-page--repair .msi-page__copy .msi-page__head { max-width: none; }
  .msi-page--repair .msi-repair__photo--intro { margin-top: 33.49px; }
  .msi-page--repair .msi-repair__photo--intro::before {
    top: calc(-33.49 / 346.33 * 100%);
    height: calc(379.82 / 346.33 * 100%);
    background-image: url("../images/repair/repair-intro-440@2x.webp");
  }
  .msi-page--repair .msi-repair__benefits { margin-top: 88.18px; }
  .msi-page--repair .msi-repair__photo--benefits { margin-top: 60.89px; }
  .msi-page--repair .msi-repair__photo--benefits::before {
    top: calc(-60.89 / 346.33 * 100%);
    height: calc(407.22 / 346.33 * 100%);
    background-image: url("../images/repair/repair-benefits-440@2x.webp");
  }
  /* 741:6117: copy on top, the hand below it inside the panel */
  .msi-page--repair .msi-repair__cta {
    display: block;
    width: auto;
    max-width: none;
    min-height: 0;
    margin-top: 88.08px;
    padding: 44px 32px 0;
    overflow: hidden;
  }
  .msi-page--repair .msi-repair__cta-copy { width: auto; }
  .msi-page--repair .msi-repair__cta-title { line-height: 42px; }
  .msi-page--repair .msi-repair__cta-actions {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
  }
  .msi-page--repair .msi-repair__cta-art {
    position: static;
    width: auto;
    height: 433px;
    margin: 0 -32px;
    background-image: url("../images/repair/repair-cta-440@2x.webp");
  }
}