/* scope: .msi-page--return-auth */
/* Return Authorization (wire return-auth: 741:2727 / 741:8681 / 741:5696). Owner: agent return-auth. Every
   selector must start with the scope above; _tools/css_scope_check.py fails the sign-off otherwise. Responsive rules
   live here too. Type and the rails come from the content idiom (msi-page-content.css).

   Layout: the page wrapper paints the frame's own fill (a gradient and two circle clusters) edge to edge; the hero
   holds the title and the RMA form button; a white sheet with rounded top corners overlaps the hero by its radius
   and holds a centred 952 column (754 at 834, 392 at 440). */

/* ---- frame fill -------------------------------------------------------------------------------------------------
   One linear gradient over the whole frame; only the band between the header and the sheet shows. It is sized to
   the frame below the header, so its geometry does not depend on the page's height. Stops and direction are the SVG
   export's userSpaceOnUse vector re-expressed as a CSS angle and px stops.
   Circles (741:2728 / 741:2733): r 416.851, white at 0.3 x group opacity 1 / 0.7 / 0.5, the left cluster the mirror
   of the right; radial layers centred from the box edges. */
.msi-page--return-auth {
  margin: 0 calc(-1 * var(--msi-gutter));
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 2931px;
  background-image:
    radial-gradient(circle 416.851px at calc(100% + 78.851px) 420.851px, rgba(255, 255, 255, 0.15) 416.351px, rgba(255, 255, 255, 0) 416.851px),
    radial-gradient(circle 416.851px at calc(100% + 161.53px) 460.714px, rgba(255, 255, 255, 0.21) 416.351px, rgba(255, 255, 255, 0) 416.851px),
    radial-gradient(circle 416.851px at calc(100% + 270.3px) 496.147px, rgba(255, 255, 255, 0.3) 416.351px, rgba(255, 255, 255, 0) 416.851px),
    radial-gradient(circle 416.851px at -78.851px 420.851px, rgba(255, 255, 255, 0.15) 416.351px, rgba(255, 255, 255, 0) 416.851px),
    radial-gradient(circle 416.851px at -161.53px 460.714px, rgba(255, 255, 255, 0.21) 416.351px, rgba(255, 255, 255, 0) 416.851px),
    radial-gradient(circle 416.851px at -270.3px 496.147px, rgba(255, 255, 255, 0.3) 416.351px, rgba(255, 255, 255, 0) 416.851px),
    linear-gradient(43.7deg, #c8dbf0 1655.2px, #fff 2202.1px, #fff 2411.2px, #aec8e5 3269.7px);
}

/* ---- hero: header -> title 72, title -> button 32, button -> sheet 48 (+ the 80 the sheet overlaps) ------------- */
.msi-page--return-auth .msi-rma__hero {
  padding: 72px var(--msi-gutter) 128px;
  text-align: center;
}
/* Inter Display Medium in the wire (BRIEF accepted deviation 1); Figma's rounded line, 56 x 1.2 = 67 */
.msi-page--return-auth .msi-rma__title {
  max-width: 638px;
  margin: 0 auto;
  line-height: 67px;
  text-align: center;
}

/* ---- the RMA form button (741:2896): orange pill, 24 / 32 padding, label 600 16/1.4, 20px chevron -------------- */
.msi-page--return-auth .msi-rma__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
  padding: 24px 32px;
  font-family: var(--msi-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: var(--msi-ink);
  text-decoration: none;
  white-space: nowrap;
  background: var(--msi-orange);
  border-radius: var(--msi-r-pill);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.msi-page--return-auth .msi-rma__download::after {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background: url("../images/return-auth/chevron-right.svg") center / 20px no-repeat;
}
.msi-page--return-auth .msi-rma__download:hover,
.msi-page--return-auth .msi-rma__download:focus {
  color: var(--msi-ink);
  text-decoration: none;
  background: var(--msi-orange-dark);
}

/* ---- white sheet (741:2781): r 80 on top, pulled up over the hero by its radius --------------------------------
   The wire's sheet runs on behind the footer; here it ends where the footer starts. Sections -> footer is 120 in the
   wire; .LayoutBottom already carries 80 of it (margin-top, msi-refresh.css), so the sheet adds the rest. */
.msi-page--return-auth .msi-rma__sheet {
  position: relative;
  margin-top: -80px;
  padding: 93px var(--msi-gutter) 40px;
  background: #fff;
  border-radius: 80px 80px 0 0;
}
.msi-page--return-auth .msi-rma__inner {
  max-width: 952px;
  margin: 0 auto;
}

/* address block (741:2885): black 16/1.6, one blank line between the two paragraphs, the second half-sentence bold.
   At 1440 the wire's box hugs its longest line, which Chrome sets 3px wider than Figma: no cap, or it wraps. */
.msi-page--return-auth .msi-rma__address { color: #000; }
.msi-page--return-auth .msi-rma__address > p + p { margin-top: 26px; }
.msi-page--return-auth .msi-rma__address b { font-weight: 700; }

/* ---- three sections (741:2886): gap 72; heading over body, gap 32 ---------------------------------------------- */
.msi-page--return-auth .msi-rma__stack {
  display: flex;
  flex-direction: column;
  gap: 72px;
  margin-top: 64px;
}
.msi-page--return-auth .msi-rma__section {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.msi-page--return-auth .msi-rma__h2 {
  margin: 0;
  font-family: var(--msi-font);
  font-size: 40px;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: normal;
  color: #000;
}
/* body copy 16/2, #262d31; lists hang their markers in a 24 indent, the lettered sub-lists at 48 */
.msi-page--return-auth .msi-rma__body {
  font-size: 16px;
  line-height: 32px;
  color: var(--msi-ink-2);
}
.msi-page--return-auth .msi-rma__body ul,
.msi-page--return-auth .msi-rma__body ol {
  margin: 0;
  padding-left: 24px;
}
.msi-page--return-auth .msi-rma__body ul { list-style: disc; }
.msi-page--return-auth .msi-rma__body ol { list-style: decimal; }
.msi-page--return-auth .msi-rma__body ol ol { list-style: lower-alpha; }
.msi-page--return-auth .msi-rma__body li { margin: 0; }
/* the wire draws the whole body flat: the client's <b>, <strong> and <em> stay in the source, the red span loses its colour */
.msi-page--return-auth .msi-rma__body b,
.msi-page--return-auth .msi-rma__body strong { font-weight: inherit; }
.msi-page--return-auth .msi-rma__body em { font-style: normal; }
.msi-page--return-auth .msi-rma__notice { color: inherit; }

/* ---- tablet: 834 wire (741:8681) ------------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .msi-page--return-auth {
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 3289.9px;
    background-image:
      radial-gradient(circle 416.851px at calc(100% + 78.851px) 420.748px, rgba(255, 255, 255, 0.15) 416.351px, rgba(255, 255, 255, 0) 416.851px),
      radial-gradient(circle 416.851px at calc(100% + 161.53px) 460.611px, rgba(255, 255, 255, 0.21) 416.351px, rgba(255, 255, 255, 0) 416.851px),
      radial-gradient(circle 416.851px at calc(100% + 270.3px) 496.044px, rgba(255, 255, 255, 0.3) 416.351px, rgba(255, 255, 255, 0) 416.851px),
      radial-gradient(circle 416.851px at -78.851px 420.748px, rgba(255, 255, 255, 0.15) 416.351px, rgba(255, 255, 255, 0) 416.851px),
      radial-gradient(circle 416.851px at -161.53px 460.611px, rgba(255, 255, 255, 0.21) 416.351px, rgba(255, 255, 255, 0) 416.851px),
      radial-gradient(circle 416.851px at -270.3px 496.044px, rgba(255, 255, 255, 0.3) 416.351px, rgba(255, 255, 255, 0) 416.851px),
      linear-gradient(84.26deg, #c8dbf0 117.1px, #fff 610.2px, #fff 798.6px, #aec8e5 1572.6px);
  }
  /* header 151.1 -> title 216; button -> sheet 56 */
  .msi-page--return-auth .msi-rma__hero {
    padding-top: 64.9px;
    padding-bottom: 136px;
  }
  /* sheet top -> address 56, address -> sections 38, sections -> footer 112 (80 of it the footer's margin) */
  .msi-page--return-auth .msi-rma__sheet {
    padding-top: 56px;
    padding-bottom: 32px;
  }
  .msi-page--return-auth .msi-rma__address { max-width: 468px; }
  .msi-page--return-auth .msi-rma__stack { margin-top: 38px; }
}

/* ---- mobile: 440 wire (741:5696) ------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* no circle clusters at 440 */
  .msi-page--return-auth {
    background-size: 100% 4280px;
    background-image: linear-gradient(92.99deg, #c8dbf0 -116.3px, #fff 176.4px, #fff 288.2px, #aec8e5 747.6px);
  }
  /* header -> title 56, title -> button 40, button -> sheet 40 (+ the 56 the sheet overlaps) */
  .msi-page--return-auth .msi-rma__hero {
    padding-top: 56px;
    padding-bottom: 96px;
  }
  /* 40 x 1.06, Figma's rounded line 42 (741:5826) */
  .msi-page--return-auth .msi-rma__title {
    max-width: none;
    line-height: 42px;
  }
  .msi-page--return-auth .msi-rma__download { margin-top: 40px; }
  /* r56. The wire rounds all four corners, but its bottom ones sit under the footer; here the sheet ends at the
     footer, so rounded bottom corners would show the frame fill. Sections -> footer 88 (80 of it the footer's margin) */
  .msi-page--return-auth .msi-rma__sheet {
    margin-top: -56px;
    padding-top: 56px;
    padding-bottom: 8px;
    border-radius: 56px 56px 0 0;
  }
  .msi-page--return-auth .msi-rma__address { max-width: 343px; }
  .msi-page--return-auth .msi-rma__stack { margin-top: 56px; }
}