@font-face {
  font-family: "Now";
  src: url("fonts/Now-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Now";
  src: url("fonts/Now-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Now";
  src: url("fonts/Now-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: "Now", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.25;
  --ink: #090909;
  --muted: #8496a8;
  --pink: #f50850;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background: #eef4fa;
  color: var(--ink);
}

.redirect-page {
  width: min(1920px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 64px) clamp(18px, 6vw, 112px) 24px;
  overflow: hidden;
  border-radius: 0 0 42px 42px;
  background: linear-gradient(110deg, #f1fff6 0%, #edf5ff 100%);
  text-align: center;
}

.redirect-page--optics {
  background: #f5f7f9;
}

.brand-block { display: grid; justify-items: center; gap: 16px; }
.brand-logo { display: block; width: min(520px, 58vw); height: auto; }
.brand-divider { display: block; width: min(642px, 72vw); height: auto; }
.brand-divider--lux { width: min(560px, 62vw); }

.hero { position: relative; margin: 14px auto 0; max-width: 1640px; }
.hero__megaphone {
  position: absolute;
  top: -68px;
  left: 0;
  width: clamp(82px, 10vw, 162px);
  height: auto;
}

h1 {
  margin: 0;
  /*font-size: clamp(29px, 3.15vw, 62px);*/
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.accent { color: var(--pink); }
.accent--blue { color: #3976d6; }

.lead {
  margin: 28px auto 0;
  max-width: 1570px;
  /*font-size: clamp(19px, 1.72vw, 34px);*/
  font-size: 19px;
  font-weight: 700;
}

.copy {
  max-width: 1640px;
  margin: 20px auto 0;
  /*font-size: clamp(16px, 1.27vw, 25px);*/
  font-size: 16px;
}

.login-note {
  max-width: 1660px;
  margin: 26px auto 0;
  /*font-size: clamp(18px, 1.65vw, 32px);*/
  font-size: 18px;
  font-weight: 700;
}

.benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: min(1544px, 100%);
  margin: 28px auto 0;
  border-radius: 18px;
  overflow: hidden;
}

.redirect-page--optics .benefits {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.benefit { display: block; width: 100%; height: auto; }

.discount {
  margin: 28px auto 0;
  max-width: 1500px;
  /*font-size: clamp(20px, 2.25vw, 43px);*/
  font-size: 30px;
}

.discount-code {
  display: inline-block;
  padding: 0 12px;
  border-radius: 24px;
  background: linear-gradient(90deg, var(--pink), #ff9399);
  color: #fff;
  font-weight: 700;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(560px, 90vw);
  min-height: 130px;
  margin: 28px auto 0;
  padding: 20px 42px;
  border-radius: 999px;
  background: linear-gradient(100deg, #238ec4, #84cdf8);
  color: #fff;
  /*font-size: clamp(22px, 2.25vw, 43px);*/
  font-size: 30px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease;
}

.cta:hover, .cta:focus-visible { transform: translateY(-2px); filter: brightness(1.05); }
.cta--pink { background: linear-gradient(100deg, #ff0050, #ff9b9d); }
.cta__arrow { margin-right: 12px; font-size: 1.45em; line-height: 0; }

.contact {
  margin: 34px auto 0;
  /*font-size: clamp(15px, 1.38vw, 27px);*/
  font-size: 16px;
}

.contact a { color: inherit; font-weight: 700; }
.legal {
  margin: 7px auto 0;
  color: #899db2;
  /*font-size: clamp(12px, 1.05vw, 20px); */
  font-size: 12px;
}

@media (max-width: 760px) {
  .redirect-page { padding-top: 24px; border-radius: 0 0 24px 24px; }
  .hero { margin-top: 8px; }
  .hero__megaphone { position: static; width: 76px; margin: 0 auto 12px; }
  .lead, .copy, .login-note { margin-top: 16px; }
  .benefits { grid-template-columns: 1fr; max-width: 388px; }
  .cta { min-height: 78px; padding: 16px 22px; margin-top: 24px; }
  .contact { margin-top: 25px; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .hero__megaphone { left: -20px; }
}