/* ==========================================================================
   Get MIEBO Now — landing page
   Layout: desktop composition ≥1100px (Figma "landing", 1440 frame),
           stacked layout below (Figma "landing - mobile", 402 frame).
   Motion is driven from js/main.js; everything here renders correctly
   without JS (panels full size, reveals visible).
   ========================================================================== */

:root {
  --ink: #13082e;
  --violet: #400286;
  --violet-2: #51259b;
  --violet-3: #6631ba;
  --lilac: #ece6f3;
  --cyan: #00b4ed;
  --cyan-2: #00a9eb;
  --mauve: #988eab;
  --footer: #3a0a82;
  --menu: #110929;
  --film: #501798;          /* background of the eye-drop film */
  --gray: #4e4e4f;
  --black: #1c1c1c;

  --ease: cubic-bezier(.22, 1, .36, 1);        /* soft expo-out */
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);

  --gutter: 20px;
  --side: 55px;                                /* card inset at 1440 */
  --shine: inset 0 1px 1.4px rgba(255, 255, 255, .25);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

body {
  margin: 0;
  background: #fff;
  color: #000 !important;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.375;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* no overflow-x:hidden on body — it would break position:sticky */
}
main { overflow-x: clip; }


h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit !important; }
button { font: inherit; color: inherit !important; background: none; border: 0; padding: 0; cursor: pointer; }
b, strong { font-weight: 700; }
sup { font-size: 14px; line-height: 0;top: -.2em; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: #fff; color: var(--violet) !important; padding: 10px 16px; border-radius: 30px;
  font-weight: 600; text-decoration: none; transition: top .2s;
}
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

/* ---------- shared bits ---------- */

.btn ,.getStart{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px;
  border-radius: 40px;
  background: var(--cyan);
  color: #fff !important;
  font-weight: 600; font-size: 16px; line-height: 17px; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), scale .5s var(--ease);
}
.btn img ,.getStart img{ width: 12px; height: 8px; transition: translate .4s var(--ease); }
.btn:hover,.getStart:hover { background: #19c1f5; box-shadow: 0 10px 30px -10px rgba(0, 180, 237, .7); }
.btn:hover img,.getStart:hover img { translate: 4px 0; }
.btn:active { scale: .97; }
.btn--lg { width: 223px; height: 55px; }

.logo { position: relative; display: block; width: 130px; height: 83px; }
.logo__mark { position: absolute; left: .05%; top: -.01%; width: 100.41%; height: 36.2%; max-width: none; }
.logo__generic { position: absolute; left: -.01%; top: 31.83%; width: 96.9%; height: 68.17%; max-width: none; }

/* decorative sparks: a box of --w × --h with the burst rotated inside it */
.spark { position: absolute; width: var(--w); height: var(--h); display: grid; place-items: center; pointer-events: none; }
.spark img { width: var(--iw); height: var(--ih); max-width: none; transform: rotate(var(--r)) scaleY(-1); }

/* ==========================================================================
   Header + mobile menu
   ========================================================================== */

.masthead { position: absolute; inset: 0 0 auto; z-index: 20; }
.masthead__logo { position: absolute; left: var(--side); top: 31px; }
.utility {
  position: absolute; right: var(--side); top: 46px;
  display: flex; align-items: center; gap: 35px;
}
.utility > a:not(.btn), .menu__links > a:not(.btn) {
  color: #fff !important; font-size: 14px; line-height: 18px; letter-spacing: -.01em;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color .25s;
}
.utility > a:not(.btn):hover, .menu__links > a:not(.btn):hover { color: var(--cyan) !important; }
.menu-toggle { display: none; }

.menu {
  position: fixed; inset: 0; z-index: 50;
  background: var(--menu);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
.menu[hidden] { display: flex; } /* keep in layout for the fade; visibility does the hiding */
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s; }
.menu__close { position: absolute; right: 22px; top: 21px; padding: 7px; margin: -7px; }
.menu__links { display: flex; flex-direction: column; align-items: center; gap: 114px; }
.menu__links > a:not(.btn) { font-size: 18px; letter-spacing: -.01em; }
.menu__logo { position: absolute; left: 50%; bottom: 54px; width: 104px; height: 66px; margin-left: -52px; }
.menu__links > *, .menu__logo {
  opacity: 0; translate: 0 18px;
  transition: opacity .5s var(--ease), translate .7s var(--ease);
}
.menu.is-open .menu__links > *, .menu.is-open .menu__logo { opacity: 1; translate: 0 0; }
.menu.is-open .menu__links > :nth-child(2) { transition-delay: .06s; }
.menu.is-open .menu__links > :nth-child(3) { transition-delay: .12s; }
.menu.is-open .menu__logo { transition-delay: .18s; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  height: 1035px;
  background: var(--ink);
  color: #fff !important;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; pointer-events: none; }
/* Product + capsules share one box pinned to the 1440 design frame (the frame's
   centre is 50%), so they never drift apart or away from the copy at any width.
   Figma: image 1648×1119 at (-34, -75); capsules 146×88 at (1161, 144). */
.hero__art {
  position: absolute;
  left: calc(50% - 754px); top: -75px;
  width: 1648px; height: 1119px;
  will-change: transform;
  /* feather the sides into the page colour so wide screens show no seam */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
/* the Figma image fill's own fade: transparent to page colour over the last 9% */
.hero__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(19, 8, 46, 0) 91.4%, var(--ink)); }
.hero__pack { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero__flashes { position: absolute; left: 1195px; top: 219px; width: 146px; height: 88px; max-width: none; animation: float 6s ease-in-out infinite alternate; }
/* bottom fade into the page colour (from the Figma image fill) */
@keyframes float { to { transform: translate3d(0, -8px, 0) rotate(2deg); } }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(19, 8, 46, 0) 70%, var(--ink) 92%);
}

.hero__inner {
  position: absolute;
  left: max(40px, calc(50% - 515px));
  top: 232px;
  width: 571px;
}

.tags { display: flex; gap: 18px; }
.tag {
  display: flex; align-items: center; gap: 3px;
  color: var(--mauve) !important; font-size: 14px; line-height: 25px; letter-spacing: -.01em; white-space: nowrap;
}
.tag__icon { width: 40px; height: 40px; flex: none; }
.tag__icon--stack { position: relative; overflow: hidden; }
.tag__icon--stack img { position: absolute; max-width: none; }
.tag__icon--stack .a { left: 19.2%; top: 17.7%; width: 60.4%; height: 61%; }
.tag__icon--stack .b { left: 28.2%; top: 53.7%; width: 40.7%; height: 26.5%; }

/* "MIEBO, prescribed online." — positioned 1:1 with the Figma 455×216 lockup */
.headline {
  position: relative;
  width: 455px; height: 216px;
  margin-top: 26px;
  font-weight: 700; color: #fff !important;
  transform-origin: 0 0;
}
.headline__l1, .headline__l2 { position: absolute; left: 0; white-space: nowrap; line-height: 75.974px; }
.headline__l1 { top: -12.83px; font-size: 68.835px; letter-spacing: -.01em; }
.headline__l2 { top: 46.82px; font-size: 71.589px; letter-spacing: -.01em; }
.headline__online {
  position: absolute; left: 121.2px; top: 75.5px; width: 281px; height: 143.9px;
  font-family: "Seaweed Script", cursive; font-weight: 400;
  font-size: 130.834px; line-height: 143.918px; letter-spacing: -.01em;
  color: var(--cyan) !important; text-align: center; white-space: nowrap;
  transform: rotate(-5deg);
}
.headline__underline { position: absolute; left: 124.5px; top: 194px; width: 262.85px; height: 10.97px; max-width: none; transform: rotate(-5deg); }
.headline__spark { left: 385.43px; top: 89px; }

.hero__body { margin-top: 21px; display: flex; flex-direction: column; align-items: flex-start; gap: 25px; }
.hero__body p { font-size: 16px; line-height: 22px; letter-spacing: -.01em; }

.snipe {
  position: absolute; left: 0; right: 0; top: 769px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: max-content; max-width: calc(100% - 80px);
}
.snipe__pill {
  display: flex; align-items: center; gap: 15px;
  min-height: 62px; padding: 14px 40px;
  background: rgba(35, 17, 65, .8);
  border: 1px solid var(--violet);
  border-radius: 30px;
  font-size: 14px; line-height: 17px; font-weight: 600; letter-spacing: -.01em;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.snipe__pill span strong{color:#00A9EB}
.snipe__pill img { flex: none; width: 35.3px; height: 33.1px; }
.snipe__pill b { color: var(--cyan-2) !important; font-weight: 600; }
.snipe__note { max-width: 763px; text-align: center; font-size: 12px; line-height: 14px; font-weight: 500; color: var(--lilac) !important; opacity: .6; letter-spacing: -.01em; }

/* ==========================================================================
   Scroll-scrubbed film
   JS writes --ix (side inset px), --ib (bottom inset px), --rad (corner px)
   and --g (0→1 growth). Defaults = fully grown, so no-JS is still correct.
   ========================================================================== */

.scrub {
  --ix: 0px; --ib: 0px; --rad: 0px; --g: 1;
  position: relative; z-index: 2;
  height: 460vh;
  margin-top: -148px;           /* the card peeks over the hero, as designed */
}
.scrub__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.scrub__panel {
  position: absolute; inset: 0;
  background: var(--film);
  clip-path: inset(0 var(--ix) var(--ib) var(--ix) round var(--rad));
  box-shadow: var(--shine);
}
.scrub__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  scale: calc(1.06 - .06 * var(--g));
  transform-origin: 70% 60%;
}
/* legibility wash behind the copy, stronger when the panel is full-bleed */
.scrub__panel::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(80, 23, 152, .55) 0%, rgba(80, 23, 152, 0) 45%);
  opacity: calc(.4 + .6 * var(--g));
}

.scrub__content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding-left: 150px;
  transform: translate3d(0, calc(var(--ib) * -.5), 0);
}
.scrub__title {
  position: relative;
  color: #fff !important; font-size: 36px; line-height: 39.483px; font-weight: 700; letter-spacing: -.01em;
}
.scrub__spark { left: -41.77px; top: -31.71px; }
.cause { position: relative; display: inline-block; white-space: nowrap; }
.cause__num { color: var(--cyan) !important; }
.cause__word { display: inline-block; width: 95px; height: 30px; vertical-align: -6px; margin-left: -2px; }
.cause::after {
  content: ""; position: absolute; left: 0; bottom: -8px;
  width: 141.6px; height: 6px;
  background: url("/siteassets/img/underline.svg") no-repeat 0 0 / 100% 100%;
}

.bullets { margin-top: 56px; width: 461px; }
.cards { display: grid; align-items: start; }
.info {
  grid-area: 1 / 1;
  position: relative;
  display: flex; align-items: flex-start; gap: 15px;
  min-height: 191px;
  padding: 37px 20px 37px;
  background: var(--lilac); color: var(--violet) !important;
  border-radius: 20px; box-shadow: var(--shine);
  opacity: 0; translate: 0 24px; visibility: hidden;
  transition: opacity .6s var(--ease), translate .8s var(--ease), visibility 0s linear .8s;
}
.info.is-active { opacity: 1; translate: 0 0; visibility: visible; transition: opacity .7s var(--ease) .12s, translate .9s var(--ease) .12s, visibility 0s; }
.info.is-leaving { translate: 0 -24px; }
.info__icon { flex: none; width: 37.3px; height: 41.1px; margin: -8.5px 1px 0 7px; }
.info h3 { display: flex; align-items: flex-end; min-height: 32px; margin-bottom: 8px; font-size: 18px;
font-family: "Poppins";
font-weight: 700;
color: rgba(64, 2, 134, 1);
margin-bottom: 8px;
line-height: 22px; /* 122.222% */
letter-spacing: -0.18px; }
.info p { font-size: 14px; line-height: 22px; letter-spacing: -.01em; }
.info__note {
  position: absolute; left: 0; top: calc(100% + 5px);
  color: var(--lilac) !important; opacity: .6; font-size: 11px !important; line-height: 16px !important; font-weight: 500;
}

.dots { display: flex; flex-direction: column; }
.dots button { position: relative; width: 24px; height: 16px; }
.dots button::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--violet-3);
  transition: scale .45s var(--ease-back), background-color .3s;
}
.voices .dots button::before {background: white;}
.dots button[aria-selected="true"]::before { background: var(--violet); scale: 1.34; box-shadow: var(--shine); }
.voices .dots button[aria-selected="true"]::before{background: white;}
.dots button:hover::before { background: var(--cyan); }
.bullets .dots {
  position: absolute; left: 13px; top: 50%;
  transform: translate3d(var(--ix), -50%, 0);
}

/* ==========================================================================
   Stats
   ========================================================================== */

.stats { background: #fff; padding: 150px var(--side) 0; }
/* [data-fit] scales its first child to the available width (see js fit()).
   --fit-on toggles it per breakpoint. */
[data-fit] { --fit-on: 0; }
[data-fit] > * { transform-origin: 0 0; }
.pct-wrap, .ohh { --fit-on: 1; }

.pct { position: relative; width: 1267px; height: 436px; margin: 0 auto;transform: translate(0px, 0px) scale(1); }
.pct__art { position: absolute; left: 0; top: 0; width: 632px; height: 436px; }
.pct__art-in { position: relative; width: 632px; height: 436px; }
.pct__wash { position: absolute; left: -1.25px; top: 49.6px; width: 620.5px; height: 359.3px; max-width: none; object-fit: fill; opacity: .7; rotate: -5.1deg; }
.pct__woman { position: absolute; left: -6.08px; top: -28px; width: 632.34px; height: 463.79px; max-width: none; object-fit: cover; }
.pct__copy { position: absolute; left: 557px; top: 0; width: 716px; height: 436px; }
.pct__figure { position: absolute; left: 0; top: 0; width: 238px; height: 186px; color: var(--violet-2) !important; font-family: "Seaweed Script", cursive; font-weight: 400; }
.pct__num, .pct__sign { position: absolute; line-height: 143.918px; height: 143.9px; text-align: center; white-space: nowrap; transform: rotate(-5deg); }
.pct__num { left: 6.06px; top: 37.15px; width: 113px; font-size: 130.834px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pct__sign { left: 131.2px; top: 25.13px; width: 54px; font-size: 90px; }
.pct__underline { position: absolute; left: 9.1px; top: 152.4px; width: 172.15px; height: 10.97px; max-width: none; transform: rotate(-5deg); }
.pct__spark { left: 170px; top: 0; }
.pct__head { position: absolute; left: 220px; bottom: calc(100% - 200px); width: 490px; color: var(--violet) !important; font-size: 27px;
    font-family: "Poppins";
    font-weight: 700;
    color: rgba(64, 2, 134, 1);
    line-height: 33px; }
.pct__note { position: absolute; left: 220px; top: 226px; width: 496px; color: var(--violet-2) !important; font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: -.01em; }

.ohh {
  position: relative;
  max-width: 1330px; margin: 0 auto;
  background: var(--lilac); border-radius: 30px; box-shadow: var(--shine);
  overflow: hidden;
}
.ohh__canvas { position: relative; width: 1330px; height: 261px; }
.ohh__million { position: absolute; left: 65px; top: -5px; width: 621px; height: 221px; }
.million { position: relative; width: 621px; height: 221px; }
.million__more, .million__more-line { z-index: 1; }
.million__img { position: absolute; left: 0; top: 36px; width: 621px; height: 185.5px; max-width: none; }
.million__more {
  position: absolute; left: 99.9px; top: 8.55px; width: 202px; height: 143.9px;
  font-family: "Kalam", cursive; font-size: 50px; line-height: 143.918px; letter-spacing: -2px;
  text-align: center; white-space: nowrap; color: #000 !important;
  transform: rotate(-5deg);
}
.million__more-line { position: absolute; left: 113.3px; top: 101.3px; width: 76.71px; height: 10.97px; max-width: none; transform: rotate(-5deg); }
.million .million__more-line{clip-path: none!important;;}
.ohh__rx { position: absolute; left: 696px; top: 92px; width: 229px; font-size: 22px; line-height: 38px; letter-spacing: -.01em; }
.ohh__rx span { display: block; white-space: nowrap; }
.ohh__rx strong { position: relative; font-size: 36px; font-weight: 600; letter-spacing: -.01em; }
.ohh__rx strong img { position: absolute; left: 15px; top: 42px; width: 76.71px; height: 10.97px; max-width: none; transform: rotate(-5deg); clip-path: none !important;}
.ohh__yeah { position: absolute; left: 979px; top: 84px; width: 268px; height: 101px; object-fit: cover; }
.ohh__src { position: absolute; left: 0; right: 0; top: 221px; text-align: center; color: var(--violet-2) !important; font-size: 11px; line-height: 16px; font-weight: 500; }

/* ==========================================================================
   Steps
   ========================================================================== */

.steps { position: relative; max-width: 1440px; height: 1420px; margin: 0 auto; background: #fff; }
.steps__title {
  position: absolute; left: 6.39%; top: 74px; width: 381px;
  font-size: 45.27px;
  font-family: "Poppins";
  font-weight: 700;
  position: relative;
  line-height: 55.324px; /* 122.222% */
  letter-spacing: -0.453px;
  color: #000 !important;
}
.steps__title em { font-style: normal; color: var(--violet) !important; }
.steps__spark { position: relative; display: inline-grid; vertical-align: 0px; margin-left: 2px; }

.path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.path__dash { stroke: #b7a3dc; stroke-width: 1.6; stroke-dasharray: 4 5; stroke-linecap: round; }
.path__heads path { fill: none; stroke: #b7a3dc; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .35s; }
.path__heads path.on { opacity: 1; }

.step { position: absolute; }
.step--1 { left: 42.92%; top: 177px; }
.step--2 { left: 59.1%; top: 528px; }
.step--3 { left: 37.29%; top: 855px; }
.step__num {
  position: absolute; left: 0; top: 0;
  font-family: "Kalam", cursive; font-weight: 700;
  font-size: 158.133px; line-height: 173.947px; letter-spacing: -11.07px; color: var(--lilac) !important;
  user-select: none;
}
.step--2 .step__num { top: 7.25px; }
.step--3 .step__num { top: 9.42px; }
.step__icon { position: absolute; max-width: none; }
.step__icon--clip { left: 71.3px; top: 10.9px; width: 61.47px; height: 77.35px; }
.step__icon--doc { left: 89.44px; top: 0; width: 120.87px; height: 120.87px; }
.step__icon--box { left: 112.41px; top: 25.13px; width: 72.52px; height: 72.52px; }
.step__spark { left: 163.28px; top: 0; }
.step h3 { position: absolute; color: var(--violet) !important; font-size: 21.76px;
    font-family: "Poppins";
    font-weight: 700;
    line-height: 24.173px; 
    letter-spacing: -0.218px; }
.step p { position: absolute; font-size: 16.921px; line-height: 21.756px; letter-spacing: -.01em; }
.step--1 h3 { left: 47.14px; top: 102.2px; width: 223px; }
.step--1 p  { left: 47.14px; top: 160.75px; width: 223px; }
.step--2 h3 { left: 94.28px; top: 109.4px; width: 202px; }
.step--2 p  { left: 94px; top: 168px; width: 248px; }
.step--3 h3 { left: 94.28px; top: 111.6px; width: 202px; }
.step--3 p  { left: 94.28px; top: 170.17px; width: 243px; }

.steps__foot {
  position: absolute; left: var(--side); right: var(--side); top: 1228px;
  display: flex; flex-direction: column; align-items: center;
}
.refill {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font-size: 13px; line-height: 22px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
}
.refill::before, .refill::after { content: ""; flex: 1; height: 1px; background: var(--lilac); }
.refill::before { margin-right: 8px; }
.refill::after { margin-left: 8px; }
.refill img { flex: none; }
.steps__foot .btn { margin-top: 15px; }
.steps__note { max-width: 686px; margin-top: 19px; text-align: center; color: var(--violet-2) !important; font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: -.01em; }

/* ==========================================================================
   Testimonials — grows to full bleed, then crossfades between voices
   ========================================================================== */

.voices {
  --ix: 0px; --ib: 0px; --rad: 0px; --g: 1;
  position: relative;
  height: 300vh;
  background: #fff;
}
.voices__stage { position: sticky; top: 0; height: 100vh; height: 80svh; overflow: hidden; }
.voices__panel {
  position: absolute; inset: 0;
  background: #5b2a9c;
  clip-path: inset(0 var(--ix) var(--ib) var(--ix) round var(--rad));
  color: #fff !important;
}
.voices__bg { position: absolute; inset: -2%; width: 104%; height: 104%; max-width: none; object-fit: cover; scale: calc(1.08 - .08 * var(--g)); }
.dots--voices { position: absolute; left: 13px; top: 50%; z-index: 2; transform: translate3d(var(--ix), calc(-50% - var(--ib) * .5), 0); }

.quote {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 40px 60px;
  text-align: center;
  transform: translate3d(0, calc(var(--ib) * -.5), 0);
  opacity: 0; visibility: hidden;
  transition: opacity .7s var(--ease), visibility 0s linear .7s;
}
.quote.is-active { opacity: 1; visibility: visible; transition: opacity .8s var(--ease) .1s, visibility 0s; }
.quote > * { translate: 0 18px; transition: translate 1s var(--ease); }
.quote.is-active > * { translate: 0 0; }
.quote.is-active > :nth-child(2) { transition-delay: .06s; }
.quote.is-active > :nth-child(3) { transition-delay: .12s; }
.quote__avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.quote blockquote { margin-top: 15px; max-width: 961px; font-size: 20px; line-height: 29px; letter-spacing: -.01em; }
.quote figcaption { margin-top: 15px; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.quote figcaption::before { content: "—"; display: block; height: 14px; line-height: 4px; color: var(--violet) !important; font-weight: 400; }
.quote__note {
  position: relative; left: 0; right: 0; bottom: 0px;top:30px;
  padding: 0 40px;
  color: var(--lilac) !important; opacity: 1; font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -0.12px;
}
.quote__note--dim { opacity: .3; font-size: 10px; font-weight: 400; }
.quote.is-active .quote__note { translate: 0 0; }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.faq {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 296px minmax(0, 885px); align-items: start;
  padding: 150px var(--side) 150px max(40px, calc(50% - 516px));
  background: var(--lilac);
}
.faq__title { padding-top: 0; font-size: 36.28px;
    font-family: "Poppins";
    font-weight: 700;
    line-height: 42px; }
.faq__title em { font-style: normal; color: var(--violet) !important; }
.nowrap { white-space: nowrap; }
.faq__spark { position: relative; display: inline-grid; vertical-align: 0px; margin-left: 1px; margin-top: -10px;}

.accordion { border-top: 1px solid #fff; }
.acc { border-bottom: 1px solid #fff; }
.acc h3 { font-size: inherit; }
.acc button {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%;
  padding: 25px 21px 25px 0;
  text-align: left;
  color: var(--cyan-2) !important; font-size: 18px; line-height: 30px; font-weight: 700;
  transition: color .25s;
}
.acc button:hover { color: var(--violet-3) !important; }
.acc button img { flex: none; transform: rotate(90deg); transition: transform .5s var(--ease); }
.acc.is-open button img { transform: rotate(-90deg); }
.acc.is-open button { padding-bottom: 0; }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.acc.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; min-height: 0; }
.acc__inner > * { max-width: 829px; font-size: 18px; line-height: 30px; opacity: 0; translate: 0 -6px; transition: opacity .4s, translate .6s var(--ease); }
.acc.is-open .acc__inner > * { opacity: 1; translate: 0 0; transition-delay: .1s; }
.acc__inner > :last-child { padding-bottom: 25px; }
.acc__inner p + p, .acc__inner ul + p, .acc__inner p + ul { margin-top: 12px; }
.acc__inner ul { list-style: disc; padding-left: 1.2em; }

/* ==========================================================================
   Why wait / ISI / footer
   ========================================================================== */

.wait {
  display: flex; align-items: center; justify-content: center; gap: 45px;
  padding: 72px 40px 94px;
  background: var(--violet); color: #fff !important;
}
.wait__img { width: 480px; height: 191px; object-fit: cover; border-radius: 200px; }
.wait__copy { width: 375px; }
.wait h2 { font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 71px; margin-top: -15px; }
.wait p { font-size: 16px; line-height: 29px; margin-top: -14px; }
.wait .btn { margin-top: 18px; }

.isi { background: var(--lilac); padding: 55px 40px 52px; }
.isi__inner { max-width: 1030px; margin: 0 auto; color: var(--gray) !important; font-size: 13.8px; line-height: 1.256; letter-spacing: -.01em; }
.isi h2 {text-transform: uppercase; color: var(--black) !important;color: #1C1C1C;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 125.6%;
    letter-spacing: -0.14px; }
.isi h2 + p, .isi h2 + ul { margin-bottom: 11px; }
.isi ul { list-style: disc; padding-left: 21px; }
.isi__pi { color: var(--violet) !important; font-weight: 700; font-size: 14px; }
.isi a { color: inherit !important; }
.isi__report a { color: var(--black) !important; text-decoration: none; }
.isi__report a:hover { text-decoration: underline; }
.isi hr { border: 0; border-top: 1px solid #c9bcd8; margin: 16px 0 20px; }

.footer { background: var(--footer); color: #fff !important; }
.footer__inner { max-width: 1030px; margin: 0 auto; padding: 63px 0 51px; font-size: 14px; letter-spacing: -.01em; }
.footer__logo { display: inline-block; }
.footer__logo img { width: 198px; height: 15.6px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 35px; margin-top: 33px; font-weight: 700; line-height: 1.256; }
.footer__links a { text-underline-offset: 2px; transition: color .25s; }
.footer__links a:hover { color: var(--cyan) !important; }
.footer__copy { margin-top: 23px; line-height: 14px; }
.footer__copy br + * { margin-top: 11px; }
.footer__copy .sep { color: var(--violet-3) !important; margin: 0 8px; }
.footer__links--privacy { margin-top: 22px; }
.footer__trust { display: inline-block; margin-top: 33px; margin-left: -2px; }

/* ==========================================================================
   Reveal system — only armed when JS is running
   ========================================================================== */

.js [data-reveal] {
  opacity: 0; translate: 0 28px;
  transition: opacity .9s var(--ease) var(--d, 0s), translate 1.2s var(--ease) var(--d, 0s);
}
.js [data-reveal="pop"]    { translate: 0 12px; scale: .9; transition-property: opacity, translate, scale; transition-duration: .9s, 1.2s, 1.2s; }
.js [data-reveal="spark"]  { translate: none; scale: 0; transition: opacity .3s var(--d, .5s), scale .8s var(--ease-back) var(--d, .5s); }
.js [data-reveal="draw"]   { opacity: 1; translate: none; clip-path: inset(-20% 100% -20% 0); transition: clip-path 1s var(--ease-io) var(--d, 0s); }
.js [data-reveal="rise"]   { translate: 0 60px; transition-duration: 1.2s, 1.6s; }
.js [data-reveal="wash"]   { translate: none; scale: .82; transition: opacity 1.4s var(--ease), scale 1.8s var(--ease); }
.js [data-reveal="card"]   { translate: 0 50px; scale: .97; transition-property: opacity, translate, scale; transition-duration: .9s, 1.3s, 1.3s; }
.js [data-reveal="bounce"] { translate: 0 20px; scale: .7; rotate: -6deg; transition: opacity .5s var(--d, 0s), translate .9s var(--ease-back) var(--d, 0s), scale .9s var(--ease-back) var(--d, 0s), rotate .9s var(--ease-back) var(--d, 0s); }
.js [data-reveal="scale"]  { translate: none; scale: .9; transition-property: opacity, scale; transition-duration: .9s, 1.3s; }
.js [data-reveal].in { opacity: 1; translate: none; scale: none; rotate: none; clip-path: inset(-20% -5% -20% -5%); }
.pct__figure .pct__underline{clip-path:unset;}

/* steps fade in as the path reaches them */
.js .step > * { opacity: 0; translate: 0 22px; transition: opacity .8s var(--ease), translate 1s var(--ease); }
.js .step .step__num { translate: -14px 0; transition-duration: 1.1s, 1.4s; }
.js .step .step__icon { scale: .6; transition-property: opacity, translate, scale; transition-timing-function: var(--ease), var(--ease), var(--ease-back); }
.js .step h3 { transition-delay: .08s; }
.js .step p { transition-delay: .16s; }
.js .step .step__spark { scale: 0; translate: none; transition: opacity .3s .35s, scale .7s var(--ease-back) .35s; }
.js .step.in > * { opacity: 1; translate: none; scale: none; }

/* hero intro */
.js [data-hero] { opacity: 0; translate: 0 26px; }
.js .hero.is-in [data-hero] { opacity: 1; translate: none; transition: opacity 1s var(--ease), translate 1.3s var(--ease); }
.js .hero.is-in .headline { transition-delay: .08s; }
.js .hero.is-in .hero__body { transition-delay: .18s; }
.js .hero.is-in .snipe { transition-delay: .32s; }
.js .headline__underline { clip-path: inset(-50% 100% -50% 0); }
.js .hero.is-in .headline__underline { clip-path: inset(-50% 0 -50% 0); transition: clip-path 1s var(--ease-io) .75s; }
.js .headline__spark { scale: 0; }
.js .hero.is-in .headline__spark { scale: 1; transition: scale .8s var(--ease-back) 1.2s; }
.js .headline__online { opacity: 0; scale: .92; }
.js .hero.is-in .headline__online { opacity: 1; scale: 1; transition: opacity .9s var(--ease) .35s, scale 1.2s var(--ease) .35s; }
.js .hero__art { opacity: 0; scale: 1.06; }
.js .hero.is-in .hero__art { opacity: 1; scale: 1; transition: opacity 1.4s var(--ease), scale 2.4s var(--ease); }

/* ==========================================================================
   Stacked layout (< 1100px) — Figma "landing - mobile"
   ========================================================================== */

.d-only { display: initial; }

@media (max-width: 1099.98px) {
  .voices__stage { height: 100svh;}
  :root { --side: 20px; }
  .d-only { display: none; }

  .masthead__logo { left: 21px; top: 20px; width: 80px; height: 51px; }
  .utility { display: none; }
  .menu-toggle { display: grid; place-items: center; position: absolute; right: 13px; top: 18px; width: 44px; height: 32px; }

  .hero { --w: min(184.6vw, 1000px); height: auto; padding: 86px 0 48px; }
  .hero::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 93px; z-index: 1;
    background: linear-gradient(6.77deg, rgba(32, 14, 65, 0) 20%, #200e41 62.7%);
  }
  .hero__flashes { display: none; }
  .hero__art { width: var(--w); height: calc(var(--w) * .679); left: calc(50% - var(--w) * .55); top: 20px; -webkit-mask-image: none; mask-image: none; }
  .hero__inner { position: relative; left: auto; top: auto; z-index: 2; width: auto; max-width: 100%; margin: 0 auto; padding: 0 20px; }
  .tags { flex-direction: column; gap: 0; margin-left: -8px; }
  .headline { margin-top: calc(var(--w) * .678 - 300px); scale: .666; margin-bottom: -72px; margin-right: -152px; }
  .hero__body { margin-top: 15px; gap: 20px; }
  .snipe { position: relative; left: auto; right: auto; top: auto; z-index: 2; width: auto; max-width: 100%; margin: 37px auto 0; padding: 0 20px; align-items: stretch; }
  .snipe__pill { align-items: flex-start; gap: 10px; padding: 15px 18px; min-height: 84px; }
  .snipe__pill img { width: 28.8px; height: 27px; }
  .snipe__note { text-align: left; font-size: 11px; font-weight: 500; }

  /* film */
  .scrub { margin-top: 0; height: 420vh; background: var(--ink); }
  .scrub__panel::before { background: linear-gradient(180deg, rgba(80, 23, 152, .6) 0%, rgba(80, 23, 152, 0) 30%); }
  .scrub__content { display: block; padding: 0; transform: none; }
  .scrub__title {
    position: absolute; left: 37px; top: 28.5px; width: 200px;
    font-size: 20.437px; line-height: 22.415px;
    transform: translate3d(var(--ix), 0, 0);
  }
  .scrub__spark { left: -36.6px; top: -30px; scale: .568; transform-origin: 50% 50%; }
  .cause__word { width: 54px; height: 17px; vertical-align: -3px; }
  .cause::after { width: 80px; height: 3.4px; bottom: -3px; }
  .bullets {
    position: absolute; left: 20px; right: 20px; bottom: 48px; width: auto; margin: 0;
    transform: translate3d(0, calc(var(--ib) * -1), 0);
  }
  .bullets .dots { left: 3px; top: 50%; transform: translateY(-50%); z-index: 2; }
  .info { min-height: 224px; padding: 26px 20px 26px 20px; }
  .info__icon { margin-top: -8.5px; }
  .info h3 { min-height: 32px; }
  .info p { max-width: 250px; }
  .info__note { top: calc(100% + 5px); }

  /* stats */
  .stats { padding: 56px var(--gutter) 0; }
  .pct { width: auto; max-width: 560px; height: auto; }
  .pct-wrap, .ohh { --fit-on: 0; }
  .pct__art, .ohh__million { --fit-on: 1; }
  .pct__art { position: relative; width: auto; height: auto; margin: 0 -20px; }
  .pct__copy { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .pct__figure { position: relative; margin-left: -7px; }
  .pct__head { position: static; width: auto; max-width: 353px; margin-top: 0; }
  .pct__note { position: static; width: auto; margin-top: 12px; }
  .ohh { margin-top: 20px; max-width: 560px; }
  .ohh__canvas { width: auto; height: auto; display: flex; flex-direction: column; align-items: center; padding: 30px 20px 18px; text-align: center; }
  .ohh__million { position: relative; left: auto; top: auto; width: 100%; height: auto; }
  .ohh__rx { position: relative; left: auto; top: auto; width: auto; margin-top: 0; font-size: 22px; line-height: 33px; }
  .ohh__rx span { display: block; white-space: normal; }
  .ohh__rx strong { white-space: nowrap; }
  .ohh__yeah { position: relative; left: auto; top: auto; margin-top: 12px; }
  .ohh__src { position: relative; top: auto; margin-top: 10px; }

  /* steps */
  .steps { height: auto; max-width: 560px; padding: 60px var(--gutter) 60px; }
  .steps__title { position: static; width: auto; max-width: 360px; font-size: 45.265px; }
  .path { display: none; }
  .steps__list { display: flex; flex-direction: column; gap: 34px; margin-top: 40px; padding-left: 15px; }
  .step { position: relative; left: auto !important; top: auto !important; min-height: 230px; padding: 102px 0 0 94px; }
  .step--1 { min-height: 250px; }
  .step h3, .step p { position: static; width: auto !important; max-width: 245px; }
  .step p { margin-top: 10px; }
  .step--1 .step__icon--clip { left: 104px; }
  .step--2 .step__icon--doc { left: 88px; width: 90px; height: 90px; top: 8px; }
  .step--2 { padding-top: 104px; }
  .steps__foot { position: static; margin-top: 30px; }
  .refill { white-space: normal; align-items: flex-start; flex-wrap: wrap; border-top: 1px solid var(--lilac); border-bottom: 1px solid var(--lilac); padding: 20px 0; }
  .refill::before, .refill::after { display: none; }
  .refill img { margin-top: -3px; }
  .refill { flex-wrap: nowrap; }
  .steps__foot { align-items: flex-start; }
  .steps__foot .btn { margin-top: 25px; }
  .steps__note { text-align: left; margin-top: 25px; }

  /* voices */
  .voices { height: 260vh; }
  .quote { padding: 0 32px 70px; }
  .quote blockquote { font-size: 16px; line-height: 29px; max-width: 300px; }
  .quote__note { bottom: 40px; padding: 0 44px; text-align: left; }
  .quote__note--dim { text-align: center; }
  .dots--voices { top: auto; bottom: 20px; left: 50%; flex-direction: row; transform: translate3d(-50%, calc(var(--ib) * -1), 0); }
  .dots--voices button { width: 16px; height: 24px; }

  /* faq */
  .faq { display: block; padding: 60px var(--gutter) 60px; }
  .faq > * { max-width: 560px; margin-left: auto; margin-right: auto; }
  .faq__title { margin-bottom: 40px; }
  .acc button { font-size: 16px; line-height: 30px; padding: 20px 10px 20px 0; }
  .acc__inner > * { font-size: 16px; }

  .wait { flex-direction: column; gap: 0; padding: 36px 20px 40px; text-align: center; }
  .wait__img { width: 100%; max-width: 480px; height: auto; aspect-ratio: 362 / 144; }
  .wait__copy { width: auto; }
  .wait h2 { margin-top: 12px; }

  .isi { padding: 40px 20px; }
  .isi__inner { max-width: 560px; font-size: 13.8px; }

  .footer__inner { max-width: 560px; padding: 44px 20px 40px; }
  .footer__links--privacy { flex-direction: column; gap: 8px; }
}

@media (min-width: 600px) and (max-width: 1099.98px) {
  .headline { scale: .85; margin-bottom: -32px; margin-right: -68px; }
  .bullets { right: auto; width: min(520px, calc(100% - 40px)); left: max(20px, calc(50% - 260px)); }
  .info p { max-width: none; }
}

/* ==========================================================================
   Reduced motion: no pinned growth or scroll choreography — content only
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__flashes { animation: none !important; }
  .js [data-reveal], .js [data-hero], .js .step > *, .js .headline__underline, .js .headline__spark,
  .js .headline__online, .js .hero__art {
    opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important;
    clip-path: none !important; transition: none !important;
  }
  .info, .quote, .quote > * { transition-duration: .01s !important; }
}

/*** Banner2***/
img.underLinetext {
    position: absolute;
    bottom: 18px;
    left: 92px;
    width: 72%;
}

.get-to-know-banner h1{
  color: #FFF;
  font-family: Poppins;
  font-size: 68.835px;
  font-style: normal;
  font-weight: 700;
  line-height: 75.974px;
  letter-spacing: -0.688px;
  height: auto;
}

.get-to-know-banner.banner-2 img.underLinetext {
    left: 66px;
    width: auto;
}

.get-to-know-banner.banner-2 h5 {
    color: #FFF;
    font-size: 60px;
    font-weight: 700;
    line-height: 75.974px;
    letter-spacing: -0.6px;
    position: absolute;
    top: 39px;
    right: 15px;
}
.get-to-know-banner.banner-2 h5 span {
    font-weight: 400;
    line-height: 75.974px;
    font-family: Poppins, sans-serif;
}
.get-to-know-banner.banner-2 .hero__body{margin-top: 0px;}
.get-to-know-banner.banner-2 .footnote {
    color: #ECE6F3;
    font-family: Poppins;
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -0.11px;
    opacity: 0.6;
    max-width: 450px;
}

@media (min-width: 1099.98px) {
  .banner-2-new{
    height: 1080px;
  }
  .banner-2-new .snipe{
    top: 835px;
  }
}

@media (max-width: 1099.98px) {

    .get-to-know-banner.banner-2 h5{
        font-size: 39.533px;
        line-height: 50.058px;
        letter-spacing: -0.395px;
        top: 27px;
        left: 170px;
    }

    .get-to-know-banner.banner-2 img.underLinetext{
        left: 50px;
    }
    .get-to-know-banner.banner-2 .footnote{
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.12px;
        opacity: 0.8;
    }
}
@media (max-width: 430px) {
  .get-to-know-banner.banner-2 h5{font-size: 28px;line-height: 34px;}
}

/*** Banner3***/

.get-to-know-banner.banner-3 h4,.get-to-know-banner.banner-3 h4 span{
    color: #FFF;
    font-family: Poppins;
    font-size: 49px;
    font-weight: 400;
    line-height: 60px; /* 139.946% */
    letter-spacing: -0.52px;
}
.get-to-know-banner.banner-3 h4 span{font-weight: 700;}
.get-to-know-banner.banner-3 .hero__body{margin-top: 0px;}

@media (min-width: 1099.98px) {
  .banner-3-new{
    height: 1080px;
  }
  .banner-3-new .snipe{
    top: 815px;
  }
  .get-to-know-banner.banner-3 .hero__body p{max-width: 517px;}
}

@media(max-width:1099.98px) {
    .get-to-know-banner.banner-3 h4, .get-to-know-banner.banner-3 h4 span{
        font-size: 31.778px;
        font-weight: 400;
        line-height: 36px;
        letter-spacing: -0.318px;
    }
    .get-to-know-banner.banner-3 h4 span{font-weight: 700;}
    .get-to-know-banner.banner-3 p.desc{margin-top: 10px;margin-bottom: 20px;}
    .get-to-know-banner.banner-3  .desc-container{margin-top: -40px;}
    .get-to-know-banner.banner-3 .hero__body{margin-top: -20px;}
}

/*** Banner4***/

.get-to-know-banner.banner-4 img.underLinetext{
    width: auto;
    left: 0px;
    bottom: -8px;
    transform: rotate(4deg);
}

.get-to-know-banner.banner-4 h5{
    color: #FFF;
    font-family: Poppins;
    font-size: 46.116px;
    font-weight: 700;
    line-height: 64.881px;
    letter-spacing: -0.461px;
    position: absolute;
}
.get-to-know-banner.banner-4 h5.tear{
    right: 38px;
    top: 20px;
}
.get-to-know-banner.banner-4 h5.evaporation{
    right: -16px;
    top: 75px;
}
.get-to-know-banner.banner-4 h5.dry-eye{
    top: 120px;
    left: 132px;
}

@media (min-width: 1099.98px) {
  .get-to-know-banner.banner-4 .hero__body{margin-top: 40px;}
  .get-to-know-banner.banner-4 .hero__body p{max-width: 517px;}
}

@media(max-width:1099.98px) {

    .get-to-know-banner.banner-4 h5{
        font-size: 30.261px;
        font-weight: 700;
        line-height: 42.575px;
        letter-spacing: -0.303px;
    }
    .get-to-know-banner.banner-4 h5.tear{left: 265px;top: 22px;}
    .get-to-know-banner.banner-4 h5.evaporation{left: 178px;top: 53px;}
    .get-to-know-banner.banner-4 h5.dry-eye{top: 85px;left: 90px;}
    .get-to-know-banner.banner-4 .hero__body{margin-top: 40px;}
    .steps__spark{margin-left: -6px;}
}
@media (max-width: 390px) {
  .get-to-know-banner.banner-4 h5{font-size: 28px;}
}

/***Banner 5***/

.get-to-know-banner.banner-5 img.underLinetext{bottom: 0px;}
.get-to-know-banner.banner-5 h5.tear{left: 445px;top: 35px;}
.get-to-know-banner.banner-5 h5.evaporation{left: 220px;top: 93px;}

.get-to-know-banner.banner-5 .footnote{
    color: #ECE6F3;
    font-family: Poppins;
    font-size: 11px;
    font-weight: 500;
    line-height: 16px; /* 145.455% */
    letter-spacing: -0.11px;
    opacity: 0.6;
}

@media (min-width: 1099.98px) {
  .banner-5-new{height: 1060px;}
  .banner-5-new .snipe {top: 820px;}
  .get-to-know-banner.banner-5 .hero__body{margin-top: 0px;}
  .get-to-know-banner.banner-5 .hero__body p{max-width: 517px;}
}

@media(max-width:1099.98px) {
    .get-to-know-banner.banner-5 img.underLinetext{left: 9px; bottom: 2px;}
    .get-to-know-banner.banner-5 h5{
        font-size: 32.793px;
        font-weight: 700;
        line-height: 46.137px; /* 140.692% */
        letter-spacing: -0.328px;
    }
    .get-to-know-banner.banner-5 h5.tear{left: 300px;top: 25px;}
    .get-to-know-banner.banner-5 h5.evaporation{left: 158px;top: 60px;}
    .get-to-know-banner.banner-5 .footnote{margin-top: 0px;}
    .get-to-know-banner.banner-5 .hero__body{margin-top: 0px;}
}

@media (max-width: 390px) {
  .get-to-know-banner.banner-5 h5{font-size: 28px;}
}

/***Banner 6***/

.get-to-know-banner.banner-6 img.underLinetext{bottom: 0px;left: 140px;width: auto; transform: rotate(5deg);}

.get-to-know-banner.banner-6 .desc-container{margin: 10px 0px 25px;}

@media (min-width: 1099.98px) {
  .get-to-know-banner.banner-6 .hero__body{margin-top: 10px;}
  .get-to-know-banner.banner-6 .hero__body p{max-width: 517px;}
}

@media(max-width:991px) {
    .get-to-know-banner.banner-6 img.underLinetext{left: 95px;}
    .get-to-know-banner.banner-6 .desc-container{margin: 10px 0px 20px;}
}

@media (max-width: 390px) {
}

/**popup css**/
/* === Direct #customModal rules === */

#customModal .modal-body {
    max-width: 584px;
    margin: auto;
    padding: 29px 0 0;
}

#customModal button.close-btn {
    position: absolute;
    right: -120px;
    top: -55px;
    border: 1px solid #7446a7;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff!important;
    font-weight: 200;
}

#customModal .mCustomScrollBox { width: 100%; }

#customModal .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: transparent;
    width: 0;
}

#customModal .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail { width: 0; }

#customModal .mCSB_inside > .mCSB_container {
    margin-right: 0;
}

/* Mobile override (max-width: 991px) */
@media (max-width: 991px) {
    #customModal button.close-btn {
        position: absolute;
        left: 0;
        right: 0;
        top: -45px;
        margin: auto;
    }
}

/* === Structural/wrapper classes used inside #customModal === */

.modal-overlay {
    display: none; /* hidden by default */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    min-height: 100vh;
    padding: 20px;
}
.modal-overlay.active { display: flex; }
.modal-overlay { padding: 0; } /* later override, same selector */

.modal-box {
    background-color: #ffffff;
    background: #400286 url(/siteassets/img/MIEBOPurpleGradienbg-smaller.jpg);
    padding: 80px 0 36px;
    border-radius: 30px;
    width: 90%;
    max-width: 799px;
    background-size: cover;
    margin: auto; /* later addition */
}
@media (max-width: 991px) {
    .modal-box { padding: 50px 30px 30px; width: 100%; }
}
@media (max-width: 767px) {
    .modal-box { max-width: 370px; }
}

.modalHeader {
    max-width: 500px;
    margin: auto;
    position: relative;
}
.modalHeader h2 {
    text-align: center;
    font-size: 36px;
    font-family: "Poppins";
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
    line-height: 39.483px;
    letter-spacing: -0.36px;
}
.modalHeader h2 span {
    font-size: 67.149px;
    font-family: "Seaweed Script";
    font-weight: 400;
    color: rgba(0, 180, 237, 1);
    transform: rotate(-5deg);
    display: inline-block;
    position: relative;
    line-height: 73.864px;
    letter-spacing: -0.671px;
}
.modalHeader h2 span img { position: absolute; }
@media (max-width: 991px) {
    .modalHeader { text-align: center; }
    .modalHeader h2 { font-size: 30px; line-height: 37px; letter-spacing: -0.309px; }
    .modalHeader h2 span { font-size: 57.646px; line-height: 63.411px; letter-spacing: -0.576px; }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 10px;
}
.modal-header h2 { margin: 0; font-size: 1.5rem; }

.close-btn {
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    line-height: 1;
}

.modal-box .listItem {
    background-color: rgba(38, 22, 82, 0.9);
    border-radius: 30px;
    padding: 30px;
    position: relative;
}
.modal-box .listItem ul { margin-left: 50px; }
.modal-box hr{color:#FFFFFF;}
@media (max-width: 991px) {
    .modal-box .listItem ul { margin-left: 30px; }
}
.modal-box .listItem ul li {
    color: #fff !important;
    list-style-type: disc;
    font-size: 16px;
    font-family: "Poppins";
    font-weight: 400;
    border-bottom: 1px solid #381f78;
    padding-bottom: 15px;
    margin-bottom: 15px;
    position: relative;
    line-height: 22px;
    letter-spacing: -0.16px;
}
.modal-box .listItem ul li:after {
    content: "";
    position: absolute;
    border-bottom: 1px solid #381f78;
    left: -30px;
    width: 40px;
    bottom: -0.5px;
}
.modal-box .listItem ul li::marker { color: #00a9eb; font-size: 25px; line-height: 0; }
.modal-box .listItem ul li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.modal-box .listItem ul li:last-child::after { border: 0; }

img.flashesImg { position: absolute; right: -72px; top: -40px; width: 146px;height: 88px;}
.body-content2 p {
    font-size: 12px;
    font-family: "Poppins";
    font-weight: 500;
    color: #fff;
    margin-bottom: 15px;
    line-height: 16px;
}
.modal-body .body-content2 p:last-child{font-style:italic;}
img.mieboline {
    position: absolute;
    bottom: -8px;
    left: 53px;
}

body > img{display:none;}

.underLinetextpopup.mCS_img_loaded{
    top: 60px;
    left: 45px;
    width: 76%;
}
.modal-box  .modalHeader h2 span .sparkImgpopup.mCS_img_loaded{
    top: -15px;
    right: -35px;width:50px
}

@media (min-width: 1700px) {
  .pct{transform: translate(0px, 0px) scale(1) !important;}
}

@media screen and (max-width:767px) {
  .js .hero.is-in .hero__art{translate: 0px 30px !important;}
  .bullets{bottom: 172px;}
  .quote__note{        
    position: relative;
    bottom: 0px;
    margin-top: 20px;
    padding: 0;
  }
  .quote blockquote {max-width: 100%;}
  .dots--voices{bottom: 170px;}
  .steps__title{
    font-size: 42.819px;
    font-weight: 700;
    line-height: 52.335px;
    letter-spacing: -0.428px;
  }
  .million__more{
    left: 0;
    right: 0px;
    margin: 0px auto;
    top: 0px;
  }
  .million__more-line{left: 225px;top: 92.3px;}
}

@media screen and (max-width:400px) {
  .bullets{bottom: 134px;scale: 0.7;}
  .quote blockquote {
      font-size: 14px;
      line-height: 24px;
  }
  .quote__note{margin-bottom: 125px;}
}

@media screen and (max-width:380px) {
  .steps__title{font-size: 40.819px;}
}

@media screen and (min-width:768px) and (max-width:1023px) {
  .js .hero.is-in .hero__art{translate: 20px 50px !important;}
}

@media screen and (min-width:1024px) and (max-width:1060px) {
  .js .hero.is-in .hero__art{translate: 80px 10px !important;}
}

@media screen and (min-width:1061px) {
  .js .hero.is-in .hero__art{translate: 80px 10px !important;}
}
  @media (min-width: 1200px) and (max-width: 1299px) {
    .bullets {
    margin-top: 5px;
}
.info p {
    font-size: 13px;
    line-height: 19px;}
     .info { min-height: 140px;padding: 20px 20px;}
  }
 @media (min-width: 1025px) and (max-width: 1199px) {
       .bullets {
    margin-top: 10px;}
            .info {
        min-height: 180px;
        padding: 26px 20px 26px 20px;
    }
    h2#scrub-title {
    margin-top: -30px;
}
 }
@media (max-width: 1024px) {
.bullets {
    margin-top: 10px;
}
.info {padding: 20px!important;min-height: 140px;}
.info p {
    font-size: 13px;
    line-height: 18px;
}
.info h3 {
    min-height: 25px;}


}
@media screen and (max-width: 400px) {
    .bullets {
        bottom: 140px;width: 100%;}
    }

 @media (min-width: 768px) and (max-width: 1024px) {
    .info {
        top: -130px;
    }
    .bullets .dots {
        top: -29%;}
 }
    @media (min-width: 320px) and (max-width: 767px) {
    .info {
        top: -30px;
        padding:20px;
        /* width: 100%; */
    }
        .bullets .dots {
        top: 40%;
    }
}