.W60MlbXYtLs1IazvHaiG {
  --pt-teal: #002a33;
  --pt-border: 10px;
  --pt-radius: 20px;
  --pt-collapsed: 82px; /* visible width of a closed tab (the first adds its own left border) */
  --pt-tuck: 30px; /* part of a card hidden under its left neighbour */
  --pt-gutter: 0px; /* side inset within the max width (the design had 30px) */
  --pt-max-width: 1920px;
  --pt-content-max-width: 65rem; /* the copy and art never span more than this, however wide the card */
  --pt-duration: 700ms;
  --pt-ease: cubic-bezier(0.65, 0, 0.35, 1);

  /* One stacking layer for the whole component, so the cards' own z-indexes can't interleave
     with the page (e.g. a hero's overlay where the component overlaps it). */
  position: relative;
  z-index: var(--pt-z-index, 10);
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  color: #fff;
  font-family: var(--pt-font-family, "Nunito Sans", sans-serif);
  -webkit-font-smoothing: antialiased;
}

.W60MlbXYtLs1IazvHaiG *,
.W60MlbXYtLs1IazvHaiG *::before,
.W60MlbXYtLs1IazvHaiG *::after {
  box-sizing: border-box;
}

.kO_nLFmlgu99fUo3nLpV {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.Sji_JS6Tn5cpo0MNy42E {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 27.5px;
  border-radius: 9999px;
  background: #fff;
  color: #000;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

/* Hover inverts the button. Hover-capable devices only, so it doesn't stick after a tap. */
@media (hover: hover) {
  .Sji_JS6Tn5cpo0MNy42E:hover {
    background: #000;
    color: #fff;
  }
}

.Sji_JS6Tn5cpo0MNy42E:focus-visible {
  outline: 2px solid #00d4ff;
  outline-offset: 3px;
}

/* ---------- Desktop: horizontal accordion ---------- */

.WdV_wKKMTwmyHy7EAahj {
  /* Open card width. The first panel's left border is its own, where the others' tuck under a
     neighbour, so that panel is a border wider to give every card the same teal. */
  --pt-expanded: calc(
    min(100cqw, var(--pt-max-width)) - 2 * var(--pt-gutter) - (var(--pt-count) - 1) * var(--pt-collapsed) -
      var(--pt-border)
  );
  /* The copy and art span the design's 1142px stage from the copy's left edge (x 120) to the
     stage's right edge, where the photos bleed off the card. Up to --pt-content-max-width, that
     span grows with the card as designed; past it, the card keeps widening around it. */
  --pt-stage-width: min(var(--pt-expanded), var(--pt-content-max-width) * 1142 / 1022);
  /* That width ÷ the 1142px design stage, as a plain number (see the @supports fallback at the
     end). Pure CSS, so the server-rendered first paint is already at the right scale. */
  --pt-scale: calc(var(--pt-stage-width) / 1142px);
  --pt-content-width: calc(1022px * var(--pt-scale));
  /* Space between the card's edges and the content: the design's 120px on the left and none on
     the right, until the card is wide enough to center the content. */
  --pt-inset-left: max(calc(120px * var(--pt-scale)), (var(--pt-expanded) - var(--pt-content-width)) / 2);
  --pt-inset-right: calc(var(--pt-expanded) - var(--pt-inset-left) - var(--pt-content-width));
  --pt-stage-left: calc(var(--pt-inset-left) - 120px * var(--pt-scale));

  display: none;
  max-width: var(--pt-max-width);
  height: calc(720px * var(--pt-scale));
  margin: 0 auto;
  padding: 0 var(--pt-gutter);
}

.yEPzh4D8V33sB2iEMv79 {
  position: relative;
  flex: none;
  width: calc(var(--pt-collapsed) + var(--pt-tuck));
  height: 100%;
  margin-left: calc(-1 * var(--pt-tuck));
  overflow: hidden;
  border-radius: 0 var(--pt-radius) var(--pt-radius) 0;
  background: var(--pt-teal);
  transition: width var(--pt-duration) var(--pt-ease);
}

.yEPzh4D8V33sB2iEMv79:first-child {
  width: calc(var(--pt-collapsed) + var(--pt-border));
  margin-left: 0;
  border-radius: var(--pt-radius);
}

.yEPzh4D8V33sB2iEMv79[data-open] {
  width: calc(var(--pt-expanded) + var(--pt-tuck));
}

.yEPzh4D8V33sB2iEMv79:first-child[data-open] {
  width: calc(var(--pt-expanded) + var(--pt-border));
}

.yEPzh4D8V33sB2iEMv79::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: var(--pt-border) solid #000;
  border-radius: inherit;
  pointer-events: none;
}

/* Every card is full width and pinned to its panel's right edge, so a closing
   card slides left under its neighbour while the badge stays put. */
.INBBv_FTrjgoU4swWlqh {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--pt-expanded);
  background:
    url("data:image/svg+xml;utf8,<svg viewBox=%27-1142 0 3426 720%27 xmlns=%27http://www.w3.org/2000/svg%27 preserveAspectRatio=%27none%27><rect x=%27-1142%27 y=%270%27 height=%27720%27 width=%273426%27 fill=%27url%28%23grad%29%27 opacity=%270.33000001311302185%27/><defs><radialGradient id=%27grad%27 gradientUnits=%27userSpaceOnUse%27 cx=%270%27 cy=%270%27 r=%2710%27 gradientTransform=%27matrix%28-78.2 39.5 -11.996 -23.749 838 307%29%27><stop stop-color=%27rgba%280,212,255,1%29%27 offset=%270%27/><stop stop-color=%27rgba%280,212,255,0%29%27 offset=%271%27/></radialGradient></defs></svg>"),
    url("data:image/svg+xml;utf8,<svg viewBox=%27-1142 0 3426 720%27 xmlns=%27http://www.w3.org/2000/svg%27 preserveAspectRatio=%27none%27><rect x=%27-1142%27 y=%270%27 height=%27720%27 width=%273426%27 fill=%27url%28%23grad%29%27 opacity=%271%27/><defs><radialGradient id=%27grad%27 gradientUnits=%27userSpaceOnUse%27 cx=%270%27 cy=%270%27 r=%2710%27 gradientTransform=%27matrix%28-102.6 62.6 -41.6 -68.181 889 312%29%27><stop stop-color=%27rgba%280,212,255,0.5%29%27 offset=%270%27/><stop stop-color=%27rgba%280,212,255,0%29%27 offset=%271%27/></radialGradient></defs></svg>"),
    var(--pt-teal);
  /* The glows sit behind the art, so they stay design-sized and move with the stage. Their canvas
     extends 1142px past the stage on each side (same glow coordinates) so they fade out instead of
     ending in a seam when the card is wider than the content. */
  background-position: calc(var(--pt-stage-left) - 1142px * var(--pt-scale)) 0;
  background-size: calc(3426px * var(--pt-scale)) 100%;
  background-repeat: no-repeat;
}

/* The design's 1142×720 stage, placed so its content lines up with the copy. */
.X62tSQBmP_OvTa3yX3bw {
  /* How far the card's edges are past the stage's, in stage px, for art that runs into them. */
  --pt-past-left: calc(var(--pt-stage-left) / var(--pt-scale));
  --pt-past-right: calc(var(--pt-inset-right) / var(--pt-scale));

  position: absolute;
  top: 0;
  left: var(--pt-stage-left);
  width: 1142px;
  height: 720px;
  transform: scale(var(--pt-scale, 1));
  transform-origin: 0 0;
  pointer-events: none;
}

.MnPR6zmUURKxTMlWnHoC {
  position: absolute;
  top: calc(120px * var(--pt-scale, 1));
  left: var(--pt-inset-left);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: max(340px, calc(533px * var(--pt-scale, 1)));
}

.UfkudM1I0pnNIDbK2fqt {
  margin: 0;
  font-size: max(32px, calc(45px * var(--pt-scale, 1)));
  font-weight: 700;
  line-height: 1.08;
}

.ehBbKAcGGwwOQSQuYbGc {
  max-width: max(320px, calc(var(--pt-body-width) * var(--pt-scale, 1)));
  margin: 0;
  font-size: max(14px, calc(16px * var(--pt-scale, 1)));
  font-weight: 600;
  line-height: 1.33;
}

/* Dark-blue cover: fades in while a card closes, fades out after one opens. */
.vcA4e1Vtj9VRHN38CXDS {
  position: absolute;
  inset: 0;
  background: var(--pt-teal);
  opacity: 1;
  pointer-events: none;
  transition: opacity var(--pt-duration) var(--pt-ease);
}

.yEPzh4D8V33sB2iEMv79[data-open] .vcA4e1Vtj9VRHN38CXDS {
  opacity: 0;
  transition: opacity calc(var(--pt-duration) * 0.7) ease calc(var(--pt-duration) * 0.45);
}

/* Product badge: locked to the top-right corner, never shaded. It clears the black border by 20px,
   which also leaves 20px on its left in every closed tab's strip. */
.XnJM2u30SpfuZbrmwdxX {
  position: absolute;
  top: calc(var(--pt-border) + 20px);
  right: calc(var(--pt-border) + 20px);
  z-index: 3;
  width: 32px;
  height: 32px;
  pointer-events: none;
}

.TEc5vlj0__fLsEE_hYV4 {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  transform: rotate(90deg) translateY(-100%);
  transform-origin: 0 0;
  white-space: nowrap;
}

.EXdFqFuc_vuCCTn7tSTK {
  display: block;
  width: 40px;
  height: 32px;
}

.fr6FaZzqyaNCv15i2v89 {
  font-size: 23px;
  font-weight: 700;
  line-height: 0.71;
}

/* Closed tabs: the whole visible strip is the button. */
.MERmC7uUCV5t9rTomHUN {
  position: absolute;
  inset: 0;
  z-index: 4;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.MERmC7uUCV5t9rTomHUN:focus-visible {
  outline: 2px solid #00d4ff;
  outline-offset: -14px;
}

/* Open tab: keep the button for assistive tech, but out of the pointer's way. */
.yEPzh4D8V33sB2iEMv79[data-open] .MERmC7uUCV5t9rTomHUN {
  inset: 10px 10px auto auto;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  cursor: default;
  pointer-events: none;
}

.yEPzh4D8V33sB2iEMv79[data-open] .MERmC7uUCV5t9rTomHUN:focus-visible {
  outline-offset: 0;
}

/* ---------- Mobile: cards stack on scroll ---------- */

.RJtSqXJj1LHwwWl_HRVJ {
  /* Card width ÷ the 370px mobile design stage (see --pt-scale). */
  --pt-m-scale: calc(min(100cqw - 20px, 420px) / 370px);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
}

.cwLFCsbjxkJTnrpP3C0x {
  position: sticky;
  top: var(--pt-sticky-top, 20px);
  width: 100%;
  max-width: 420px;
  height: calc(min(100cqw - 20px, 420px) * 771 / 370);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--pt-radius);
  background:
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 370 771' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.33000001311302185'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-25.336 42.298 -3.8865 -25.431 271.51 328.75)'><stop stop-color='rgba(0,212,255,1)' offset='0'/><stop stop-color='rgba(0,212,255,0)' offset='1'/></radialGradient></defs></svg>"),
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 370 771' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-33.242 67.034 -13.478 -73.01 288.03 334.1)'><stop stop-color='rgba(0,212,255,0.5)' offset='0'/><stop stop-color='rgba(0,212,255,0)' offset='1'/></radialGradient></defs></svg>"),
    var(--pt-teal);
  background-size: 100% 100%;
}

.cwLFCsbjxkJTnrpP3C0x::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--pt-border) solid #000;
  border-radius: inherit;
  pointer-events: none;
}

.K8JHN3kCbEtUoZN9_BhH {
  position: absolute;
  top: 0;
  left: 0;
  width: 370px;
  height: 771px;
  transform: scale(var(--pt-m-scale, 1));
  transform-origin: 0 0;
  pointer-events: none;
}

.u6XFM2zetQmLCPsppTdj {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
  text-align: center;
}

.j2RZFgAIVTpdUWcQem02 {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 16px;
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 0.71;
}

.j2RZFgAIVTpdUWcQem02 img {
  display: block;
  width: 20px;
  height: 16px;
}

/* Shrinks with cards narrower than the 370px design so line breaks hold on small phones. */
.I_j2mPd9v4GOXLIXdafA {
  max-width: calc(330px * min(var(--pt-m-scale, 1), 1));
  margin: 0;
  font-size: calc(32px * min(var(--pt-m-scale, 1), 1));
  font-weight: 700;
  line-height: 1.08;
}

/* Covers a stuck card as the next one slides over it (driven by --pt-cover). */
.dhlPgaQvpFIZMg5rYtHD {
  position: absolute;
  inset: 0;
  background: var(--pt-teal);
  opacity: var(--pt-cover, 0);
  pointer-events: none;
}

/* Browsers that can't divide one length by another get the same ratios from tan(atan2(a, b)),
   which equals a / b. Only as a fallback: Safari miscomputes atan2() of container- or
   viewport-relative lengths (on iOS 18 the mobile scale came out 0 or negative, hiding the art). */
@supports not (scale: calc(1px / 1px)) {
  .WdV_wKKMTwmyHy7EAahj {
    --pt-scale: tan(atan2(var(--pt-stage-width), 1142px));
  }

  .RJtSqXJj1LHwwWl_HRVJ {
    --pt-m-scale: tan(atan2(min(100cqw - 20px, 420px), 370px));
  }
}

@container (min-width: 992px) {
  .WdV_wKKMTwmyHy7EAahj {
    display: flex;
  }

  .RJtSqXJj1LHwwWl_HRVJ {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yEPzh4D8V33sB2iEMv79,
  .vcA4e1Vtj9VRHN38CXDS,
  .yEPzh4D8V33sB2iEMv79[data-open] .vcA4e1Vtj9VRHN38CXDS {
    transition-duration: 1ms;
    transition-delay: 0s;
  }
}

/*
 * Artwork layers for each tab, positioned in Figma coordinates.
 * Desktop art lives on a 1142×720 stage, mobile art on a 370×771 stage;
 * the parent scales the whole stage to fit, so values here stay 1:1 with the design.
 * Shared widgets take a size factor `--k` (desktop 1, mobile ≈0.66–0.81).
 */

.PlFKNZCxfHaYdzAaGO3F {
  position: absolute;
  overflow: hidden;
}

.PlFKNZCxfHaYdzAaGO3F > img,
.eoHVapjm7Nw_xMwti9Gz > img {
  position: absolute;
  max-width: none;
}

/* A user-supplied photo has an unknown crop, so it simply fills the frame. */
.PlFKNZCxfHaYdzAaGO3F > img.cgKv_bDxDmN0eyuG7i_K {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Product Protection ---------- */

.HUqk87YeWWZAh7qelWDs {
  right: 0;
  top: 0;
  width: 816px;
  height: 720px;
  mask: url(data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjEyMDEiIGhlaWdodD0iMTE2MyIgdmlld0JveD0iMCAwIDEyMDEgMTE2MyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlJlY3RhbmdsZSA0Njk0IiBmaWx0ZXI9InVybCgjZmlsdGVyMF9mXzBfNDQpIj4KPHBhdGggZD0iTTEyMCAxMjBIMTA4MVYxMDQzSDEyMFYxMjBaIiBmaWxsPSIjRDlEOUQ5Ii8+CjwvZz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfZl8wXzQ0IiB4PSIwIiB5PSIwIiB3aWR0aD0iMTIwMSIgaGVpZ2h0PSIxMTYzIiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9InNoYXBlIi8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjYwIiByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXJfMF80NCIvPgo8L2ZpbHRlcj4KPC9kZWZzPgo8L3N2Zz4K) -78px -323px / 1201px 1163px no-repeat;
}

.HUqk87YeWWZAh7qelWDs > img {
  left: 0;
  top: -4%;
  width: 101.1%;
  height: 218.64%;
}

.SixxJIy7KiP1KMjKicZS {
  left: -9px;
  top: 0;
  width: 380px;
  height: 771px;
  mask: url(data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjEwMDAiIGhlaWdodD0iMTAzNSIgdmlld0JveD0iMCAwIDEwMDAgMTAzNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlJlY3RhbmdsZSA0Njk0IiBmaWx0ZXI9InVybCgjZmlsdGVyMF9mXzBfMzYpIj4KPHBhdGggZD0iTTEyMCAxMjBIODgwVjkxNUgxMjBWMTIwWiIgZmlsbD0iI0Q5RDlEOSIvPgo8L2c+CjxkZWZzPgo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2ZfMF8zNiIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMDAiIGhlaWdodD0iMTAzNSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI2MCIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzBfMzYiLz4KPC9maWx0ZXI+CjwvZGVmcz4KPC9zdmc+Cg==) -302px -144px / 1000px 1035px no-repeat;
}

.SixxJIy7KiP1KMjKicZS > img {
  left: -38.68%;
  top: 18.26%;
  width: 180.26%;
  height: 169.53%;
}

.hvPpB8L8_tCjZ4zRBwcV {
  position: absolute;
  padding: 10px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.GmOW2iB_pcz_gu855EMz {
  --k: 1;
  left: 120px;
  top: 468px;
}

.oBjhzB2nR4eLH4j_BHEg {
  --k: 0.8081;
  left: 12px;
  top: 503px;
}

.CN54CKjcPyyv80IGPdbv {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.5);
}

.oBjhzB2nR4eLH4j_BHEg .CN54CKjcPyyv80IGPdbv {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 10px 10px 0;
}

.HC6j5d6XvE1DMi5JUCnJ {
  display: flex;
  width: 240px;
  height: 109.059px;
  padding: 15px;
  border-radius: 7.5px;
  background: rgba(255, 255, 255, 0.5);
}

.HC6j5d6XvE1DMi5JUCnJ img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.A7nxh3gjD6EjPJdgfv2W {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(15px * var(--k));
  padding: calc(15px * var(--k)) 0;
}

.Utbk5qGaTM24Hr_WZyJx {
  margin: 0;
  font-size: calc(9px * var(--k));
  line-height: 0.71;
  letter-spacing: calc(3.8824px * var(--k));
  text-transform: uppercase;
  white-space: nowrap;
}

.gGnOhW0ugMmkZs8WoZaM {
  display: flex;
  gap: calc(4.853px * var(--k));
}

.hpxTdBoD8M7H8iyUvT9k {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(4.853px * var(--k));
  min-width: 0;
  padding: calc(4.853px * var(--k));
  border: calc(0.971px * var(--k)) solid #002a33;
  border-radius: calc(3.75px * var(--k));
  background: #002a33;
  white-space: nowrap;
}

.O0TeSXRtCdX6OFJNYCjz {
  font-size: calc(4.5px * var(--k));
  font-weight: 700;
  line-height: 0.71;
  letter-spacing: calc(0.9706px * var(--k));
  text-transform: uppercase;
}

.yBuYxbCGSNMPdFzLIjXh {
  font-size: calc(12px * var(--k));
  font-weight: 500;
  line-height: 1.08;
  font-variant-numeric: lining-nums proportional-nums;
}

.d8tqYGyXnosRCa94ZIPf {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: calc(6px * var(--k));
}

.AtePRGfFLjgKAiGVJ_uD {
  font-size: calc(9px * var(--k));
  line-height: 0.71;
  letter-spacing: calc(3px * var(--k));
  text-transform: uppercase;
  white-space: nowrap;
}

.Aprj_TBO78uErMpjRJqH {
  display: block;
  width: 53px;
  height: 12.19px;
  margin-bottom: -0.19px;
}

.sp23lFsReIgBlXQR3r5W {
  display: block;
  width: 42.828px;
  height: 9.85px;
  margin-bottom: -0.15px;
}

/* ---------- Delivery ---------- */

/* Event feed: a Lottie (590x610 canvas, fade built in). At 1:1 its rows match the design's feed,
   so the canvas's left edge sits on the row column and its bottom on the feed's last-row line
   (mobile: the design's 0.66 feed scale, plus the card-level edge mask). */
.GVGQnHiAdIbrf7BWP5Km {
  position: absolute;
  left: 120.79px;
  top: 53px;
  width: 590px;
  height: 610px;
}

.RMKwbvJOseEbpps01d2f {
  position: absolute;
  left: 13.06px;
  top: -24.1px;
  width: 389.4px;
  height: 402.6px;
  mask: url(data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjEwMDAiIGhlaWdodD0iMTAzNSIgdmlld0JveD0iMCAwIDEwMDAgMTAzNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlJlY3RhbmdsZSA0Njk0IiBmaWx0ZXI9InVybCgjZmlsdGVyMF9mXzBfMzQpIj4KPHBhdGggZD0iTTEyMCAxMjBIODgwVjkxNUgxMjBWMTIwWiIgZmlsbD0iI0Q5RDlEOSIvPgo8L2c+CjxkZWZzPgo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2ZfMF8zNCIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMDAiIGhlaWdodD0iMTAzNSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI2MCIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzBfMzQiLz4KPC9maWx0ZXI+CjwvZGVmcz4KPC9zdmc+Cg==) -324.06px -119.9px / 1000px 1035px no-repeat;
}

/* No fade mask: Figma's export blurs the photo's mask, which faded the arms out above the card's
   bottom edge, but Figma itself renders them running solid into the card's crop. The cutout's own
   transparency already softens the sleeve. */
.M4hhwuOCMHuOZAQx8xRT,
.hpYzQ5UfeUtBtPbQSipD {
  border-radius: 20px;
}

/* The design's 756px frame, extended to the card's right edge when the card is wider than the
   content: past the frame, the sleeve curves down out of the card's bottom edge instead of being
   cut off where the content ends. The picture keeps its design crop in px, so it doesn't stretch. */
.M4hhwuOCMHuOZAQx8xRT {
  left: 386px;
  right: calc(-1 * var(--pt-past-right, 0px));
  top: 0;
  height: 720px;
}

.M4hhwuOCMHuOZAQx8xRT > img {
  left: -27.594px;
  top: 29.808px;
  width: 886.183px;
  height: 796.32px;
}

/* A replacement photo still fills only the design frame. */
.M4hhwuOCMHuOZAQx8xRT > img.cgKv_bDxDmN0eyuG7i_K {
  width: 756px;
}

.hpYzQ5UfeUtBtPbQSipD {
  left: -141px;
  top: 257px;
  width: 678px;
  height: 646px;
}

.hpYzQ5UfeUtBtPbQSipD > img {
  left: -3.65%;
  top: 4.14%;
  width: 117.22%;
  height: 110.6%;
}

/* ---------- Returns ---------- */

.MB9fXNlIhWIlWkDotY0O {
  position: absolute;
  background: linear-gradient(to left, rgba(0, 85, 102, 0.5) 24.6%, rgba(0, 170, 204, 0.1) 76.164%);
  filter: blur(2px);
}

/* Runs past both edges of the card, however far they are from the stage, with its gradient stops
   kept where the design has them (24.6% and 76.164% of its 1439px). */
.pSw_e_WJV7k5Xbfz76cp {
  left: calc(-57px - var(--pt-past-left, 0px));
  right: calc(-240px - var(--pt-past-right, 0px));
  top: 483px;
  height: 254px;
  background: linear-gradient(
    to left,
    rgba(0, 85, 102, 0.5) calc(354px + var(--pt-past-right, 0px)),
    rgba(0, 170, 204, 0.1) calc(1096px + var(--pt-past-right, 0px))
  );
}

.TV0gs6MCS4rTTyUSRDrG {
  left: -170px;
  top: 514px;
  width: 606px;
  height: 307px;
  mask: url(data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjEwMDAiIGhlaWdodD0iMTAzNSIgdmlld0JveD0iMCAwIDEwMDAgMTAzNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlJlY3RhbmdsZSA0Njk0IiBmaWx0ZXI9InVybCgjZmlsdGVyMF9mXzBfMzkpIj4KPHBhdGggZD0iTTEyMCAxMjBIODgwVjkxNUgxMjBWMTIwWiIgZmlsbD0iI0Q5RDlEOSIvPgo8L2c+CjxkZWZzPgo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2ZfMF8zOSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMDAiIGhlaWdodD0iMTAzNSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI2MCIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzBfMzkiLz4KPC9maWx0ZXI+CjwvZGVmcz4KPC9zdmc+Cg==) -141px -658px / 1000px 1035px no-repeat;
}

.I18l9U_3E_WzsJQ8UAdF {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iC0CJBpJIjYRplphnE12 {
  right: 31.644px;
  top: 0;
  width: 634.356px;
  height: 577.001px;
}

.i0NUnoU8a11nJz0bjESI {
  left: -71px;
  top: 172px;
  width: 486.223px;
  height: 442.262px;
}

.eoHVapjm7Nw_xMwti9Gz {
  position: relative;
  flex: none;
  overflow: visible;
  transform: rotate(-24.03deg) skewX(0.01deg);
}

.eoHVapjm7Nw_xMwti9Gz > img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.E9tdvmqnD4GLPh8bcFit {
  width: 515.262px;
  height: 402.011px;
}

.Udteb42_xXWEPi8mmfxg {
  width: 394.94px;
  height: 308.135px;
  mask: url(data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjEwMDAiIGhlaWdodD0iMTAzNSIgdmlld0JveD0iMCAwIDEwMDAgMTAzNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlJlY3RhbmdsZSA0Njk0IiBmaWx0ZXI9InVybCgjZmlsdGVyMF9mXzBfMzkpIj4KPHBhdGggZD0iTTEyMCAxMjBIODgwVjkxNUgxMjBWMTIwWiIgZmlsbD0iI0Q5RDlEOSIvPgo8L2c+CjxkZWZzPgo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2ZfMF8zOSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMDAiIGhlaWdodD0iMTAzNSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI2MCIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzBfMzkiLz4KPC9maWx0ZXI+CjwvZGVmcz4KPC9zdmc+Cg==) -240px -316px / 1000px 1035px no-repeat;
}

/* Shoe animation: its 822x747 canvas is the design's rotated-shoe box at 1.3x resolution
   (the shoe's outline lines up within 0.1%), so it fills that box exactly. */
.qgb9RTMe_7WA4ermsleM {
  position: absolute;
  right: 31.644px;
  top: 0;
  width: 634.356px;
  height: 577.001px;
}

.eyyDtKWlWQPJJlfqR_c4 {
  position: absolute;
  left: -71px;
  top: 172px;
  width: 486.223px;
  height: 442.262px;
  mask: url(data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjEwMDAiIGhlaWdodD0iMTAzNSIgdmlld0JveD0iMCAwIDEwMDAgMTAzNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlJlY3RhbmdsZSA0Njk0IiBmaWx0ZXI9InVybCgjZmlsdGVyMF9mXzBfMzkpIj4KPHBhdGggZD0iTTEyMCAxMjBIODgwVjkxNUgxMjBWMTIwWiIgZmlsbD0iI0Q5RDlEOSIvPgo8L2c+CjxkZWZzPgo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2ZfMF8zOSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMDAiIGhlaWdodD0iMTAzNSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI2MCIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzBfMzkiLz4KPC9maWx0ZXI+CjwvZGVmcz4KPC9zdmc+Cg==) -240px -316px / 1000px 1035px no-repeat;
}

.Xhg5y4yAigNTzGLA9DjQ {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px 10px 120px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.3);
  font-weight: 700;
  white-space: nowrap;
}

.WaCg7z7CuNnhDk6ZBEQv {
  --k: 1;
  left: 120px;
  top: 528px;
}

.x_2xiwQduBbkIYovuAkX {
  --k: 0.66;
  left: 26px;
  top: 546px;
}

/* Figma flips this photo horizontally. */
.rkUUKL4fq2vWp_8Ql3wF {
  border-radius: 10px;
  transform: scaleX(-1);
}

.co3X2D4o5291QqsBQY4R {
  left: 10px;
  bottom: 10px;
  width: 282px;
  height: 238px;
  mask: url(data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjUyOSIgaGVpZ2h0PSIyOTkiIHZpZXdCb3g9IjAgMCA1MjkgMjk5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iZmFkZSIgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfZl8wXzE3KSI+CjxyZWN0IHg9IjIwIiB5PSIyMCIgd2lkdGg9IjQ4OSIgaGVpZ2h0PSIyNTkiIGZpbGw9IiNEOUQ5RDkiLz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9mXzBfMTciIHg9IjAiIHk9IjAiIHdpZHRoPSI1MjkiIGhlaWdodD0iMjk5IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9InNoYXBlIi8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjEwIiByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXJfMF8xNyIvPgo8L2ZpbHRlcj4KPC9kZWZzPgo8L3N2Zz4K) -149px -58px / 529px 299px no-repeat;
}

.co3X2D4o5291QqsBQY4R > img {
  left: 5.5%;
  top: 1.55%;
  width: 98.58%;
  height: 182.61%;
}

.Rc_paBlOCo7yBblmuJrz {
  left: 0;
  bottom: 0.12px;
  width: 229px;
  height: 220px;
  mask: url(data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjUwOC4yMzIiIGhlaWdodD0iMjg4IiB2aWV3Qm94PSIwIDAgNTA4LjIzMiAyODgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJmYWRlIiBmaWx0ZXI9InVybCgjZmlsdGVyMF9mXzBfMjkpIj4KPHJlY3QgeD0iMjAiIHk9IjIwIiB3aWR0aD0iNDY4LjIzMiIgaGVpZ2h0PSIyNDgiIGZpbGw9IiNEOUQ5RDkiLz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9mXzBfMjkiIHg9IjAiIHk9IjAiIHdpZHRoPSI1MDguMjMyIiBoZWlnaHQ9IjI4OCIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxMCIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzBfMjkiLz4KPC9maWx0ZXI+CjwvZGVmcz4KPC9zdmc+Cg==) -185px -56px / 508.232px 288px no-repeat;
}

.Rc_paBlOCo7yBblmuJrz > img {
  left: 6.68%;
  top: 1.78%;
  width: 116.24%;
  height: 189.16%;
}

.EktloVzjgAXV9DPvslbr {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: calc(10px * var(--k));
}

.x_2xiwQduBbkIYovuAkX .EktloVzjgAXV9DPvslbr {
  flex-direction: column;
  align-items: stretch;
}

.IkKc2Z8Ww3YN8oJWJo2g {
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--k));
}

.wRQLP4j5bC8CE2zxx9Cs {
  width: 152px;
}

.FztEF3t1UaULsTYO0wMx {
  width: 209px;
}

.x_2xiwQduBbkIYovuAkX .IkKc2Z8Ww3YN8oJWJo2g {
  width: auto;
}

.OY2kdhySl6ouG4GCFBAg {
  display: flex;
  justify-content: space-between;
  padding: calc(10px * var(--k));
  border-radius: calc(10px * var(--k));
  background: rgba(0, 0, 0, 0.5);
  font-size: calc(16px * var(--k));
  line-height: 0.71;
}

.RaEjKVbzQPTXUMv2kC4d {
  color: #d3d2d3;
}

.Zj6M3sNUurCC7rd_cnRr {
  color: #00d4ff;
}

.Wriq5ZjsK6Cfp3KJRqhC {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: calc(20px * var(--k));
  padding: calc(10px * var(--k)) calc(10px * var(--k)) calc(20px * var(--k));
  border-radius: calc(10px * var(--k));
  background: rgba(0, 0, 0, 0.5);
  line-height: 0.71;
}

.tQhwadvvxA9BKapXwdsQ {
  font-size: calc(16px * var(--k));
}

.hgE7uwlrZb5xIO_TSiIq {
  font-size: calc(45px * var(--k));
}