/* VARIABLES */

:root {
  /* Colors */
  --cloud: #f2f2f2;
  --caulk: #d9d9d9;
  --chrome: #828282;
  --chasm: #32393d;
  --cosmic: #092f87;
  --cobalt: #004eec;
  --coral: #e1466e;
  --canary: #f3a732;
  /* Font Families */
  --font-body: halyard-display, sans-serif;
  --font-heading: ivyora-display, serif;
  /* Dimensions */
  --h-header: 80px;
}

/* MAIN LAYOUT & GLOBAL STYLES */

html,
body {
  position: relative;
  width: 100%;
  background: white;

  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  color: var(--chasm);

  scroll-behavior: smooth;
  scroll-padding: var(--h-header);
}

main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

section {
  width: 100%;
}

* {
  box-sizing: border-box;
}

.scroll-lock {
  overflow: hidden;
  touch-action: none;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 1000px;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 100%;
  cursor: pointer;
  user-select: none;
}
.btn:active {
  scale: 0.97;
}
.btn > svg {
  height: 1.1em;
}

.btn > .arrow {
  display: flex;
  align-items: center;

  width: 1.4em;
  margin-left: 0.4em;

  stroke-width: 1.5;
  stroke-miterlimit: 10;
  stroke-linecap: round;

  overflow-x: hidden;
}
.btn > .arrow svg {
  min-width: 200%;
  translate: -50% 0;
  transition: none;
}
@media (any-hover: hover) {
  .btn:hover > .arrow svg {
    translate: 10% 0;
    transition: translate cubic-bezier(0.9, 0.07, 0.55, 0.8) 420ms 130ms;
  }
}

.btn > .mirror {
  display: flex;
  align-items: center;

  width: 1.5em;
  margin-right: 0.6em;
}
.btn > .mirror svg {
  height: 1.9em;
}

.btn > .new-tab {
  display: flex;
  align-items: center;

  width: 1rem;
  margin-left: 0.4em;
  margin-bottom: -0.1rem;

  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn > .new-tab svg {
  width: 1rem;
}
@media (any-hover: hover) {
  .btn:hover > .new-tab path:first-child {
    translate: 0.1rem -0.1rem;
    transition: translate ease-in-out 420ms;
  }
}

.btn > .shopping-cart {
  display: flex;
  align-items: center;

  width: 1.25rem;
  margin-left: 0.4em;
  margin-bottom: -0.1em;

  stroke-width: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn > .shopping-cart svg {
  width: 1.5rem;
}

.btn.primary,
.btn.secondary,
.btn.tertiary {
  height: 3rem;
  transition: all 250ms;
}
.btn.primary {
  background: white;
  color: var(--cobalt);
  stroke: var(--cobalt);
  fill: var(--cobalt);
}
.btn.secondary {
  border: thin solid white;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  stroke: white;
  fill: white;
}
.btn.tertiary {
  border: thin solid var(--cobalt);
  background: rgba(255, 255, 255, 0.2);
  color: var(--cobalt);
  stroke: var(--cobalt);
  fill: var(--cobalt);
}

@media (any-hover: hover) {
  .btn.primary:hover,
  .btn.tertiary:hover {
    background: var(--cloud);
  }
  .btn.secondary:hover {
    background: rgba(255, 255, 255, 0.15);
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 110%;
}

h1 {
  font-size: 3.5rem;
  line-height: 100%;
}
h2 {
  font-size: 3rem;
  line-height: 100%;
}
h3 {
  font-size: 2.25rem;
}
h4 {
  font-size: 2rem;
}
h5 {
  font-size: 1.25rem;
}
h6 {
  font-size: 1.125rem;
}

p {
  line-height: normal;
}

.long-arrow {
  position: absolute;
  display: none;
  height: 270px;
}

/* COMPONENTS */

/* Fixed Header */
header {
  position: sticky;
  top: 0;

  display: flex;
  justify-content: center;

  width: 100%;
  height: var(--h-header);

  background: white;
  z-index: 10;
}
header .header-wrapper {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  max-width: 1440px;
  height: 100%;

  padding-inline: 1.5rem;
  padding-block: 1rem;
}

header .logo {
  width: 126px;
  cursor: pointer;
  opacity: 1;
  transition: opacity 300ms 150ms;
}
header .logo img {
  width: 100%;
  translate: 0 calc(1rem / 16);
}
header .logo.hidden {
  opacity: 0;
  z-index: -2;
}

header .current-route {
  font-style: italic;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* Fixed Header – Main Navigation */
.menu-default {
  display: none;
  height: 100%;
}

.menu-default .links {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.6rem;

  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  text-align: center;
  line-height: 110%;
}

.menu-default .links a,
.menu-default .links .dropdown-toggle {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 10em;
  height: 100%;
  padding-inline: 1rem;
  padding-bottom: 0.25rem;
  border-radius: 0.2rem;

  color: var(--cobalt);

  transition: color ease-in 200ms;
  cursor: pointer;
}

.menu-default .links a:hover,
.menu-default .links .dropdown-toggle:hover {
  color: var(--cosmic);
}

/* Fixed Header – Main Navigation Dropdown */
.menu-default .links .dropdown-toggle::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 16' fill='%23D9D9D9'%3E%3Cpath d='M8.24795 8.87608L11.548 5.57608C11.6094 5.51241 11.683 5.46162 11.7643 5.42668C11.8457 5.39174 11.9332 5.37335 12.0217 5.37258C12.1102 5.37181 12.198 5.38868 12.2799 5.4222C12.3619 5.45572 12.4363 5.50523 12.4989 5.56782C12.5615 5.63042 12.611 5.70485 12.6445 5.78678C12.678 5.86871 12.6949 5.9565 12.6941 6.04502C12.6933 6.13354 12.675 6.22102 12.64 6.30235C12.6051 6.38369 12.5543 6.45725 12.4906 6.51875L8.71928 10.2901C8.59426 10.4151 8.42473 10.4853 8.24795 10.4853C8.07117 10.4853 7.90164 10.4151 7.77662 10.2901L4.00528 6.51875C3.94161 6.45725 3.89082 6.38369 3.85588 6.30235C3.82094 6.22102 3.80255 6.13354 3.80178 6.04502C3.80101 5.9565 3.81788 5.86871 3.8514 5.78678C3.88492 5.70485 3.93442 5.63042 3.99702 5.56782C4.05962 5.50523 4.13405 5.45572 4.21598 5.4222C4.29791 5.38868 4.3857 5.37181 4.47422 5.37258C4.56274 5.37335 4.65022 5.39174 4.73155 5.42668C4.81289 5.46162 4.88645 5.51241 4.94795 5.57608L8.24795 8.87608Z'/%3E%3C/svg%3E");
  width: 1rem;
  margin-left: 0.5rem;
}

.menu-default .links .dropdown-toggle:focus {
  background: var(--cloud);
  color: var(--cosmic);
}

.menu-default .links .dropdown-toggle:focus .dropdown-wrapper {
  grid-template-rows: 1fr;
  border: solid thin var(--cloud);
}

.menu-default .links .dropdown-wrapper {
  position: absolute;
  top: calc(100% + 1rem);

  display: grid;
  grid-template-rows: 0fr;

  width: 100%;
  border: solid 0px var(--cloud);
  border-radius: 0 0 0.25rem 0.25rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px) saturate(2.5);
  -webkit-backdrop-filter: blur(20px) saturate(2.5);

  transition: all 300ms 100ms;
}

.menu-default .links .dropdown-list {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;

  overflow: hidden;
}

.menu-default .links .dropdown-list a {
  justify-content: space-between;

  width: 100%;
  padding-inline: 0.8em;
  padding-block: 0.9em;
  border-radius: 0;

  font-family: var(--font-body);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;

  transition: all 200ms;
}
.menu-default .links .dropdown-list a:hover {
  background: white;
}

.menu-default .links a svg {
  height: 0.85em;
  margin-right: 0.3em;
  translate: 0 calc(1em / 16);
  transition: fill ease-in 200ms;
  fill: var(--cobalt);
}
.menu-default .links a:hover svg {
  fill: var(--cosmic);
}

/* Fixed Header – Main Navigation Shopping Dropdown */

.menu-default .links .stores a:first-of-type {
  border-bottom: thin solid rgba(50, 57, 61, 0.1);
}
.menu-default .links .stores a::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M14 2V6M14 2H10H14ZM14 2L8 8L14 2Z' stroke='%2332393D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 8.66667V12.6667C14 13.4031 13.4031 14 12.6667 14H3.33333C2.59695 14 2 13.4031 2 12.6667V3.33333C2 2.59695 2.59695 2 3.33333 2H7.33333' stroke='%2332393D' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  width: 1rem;
  margin-bottom: -0.25rem;
  opacity: 0.4;
}

.menu-default .links .dropdown-list .shop-link {
  display: grid;
  grid-template-columns: 2.5rem 1fr 1rem;
  text-align: left;
}
.menu-default .links .dropdown-list .store-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 2rem;
  aspect-ratio: 1;

  border: thin solid var(--caulk);
  border-radius: 0.5rem;
  margin-block: -0.31em;
  margin-left: -0.11em;
  background: white;
}
.menu-default .links .dropdown-list .store-icon svg {
  margin-right: 0;
  height: 1.05em;
  translate: 0.015em 0;
}

/* Fixed Header – Compact Menu Button */
#menu-toggle {
  display: none;
}

.menu-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  container-type: size;

  width: 32px;
  height: 17px;

  cursor: pointer;
}
.menu-icon div {
  width: 100%;
  height: 3px;
  border-radius: 12px;
  background: var(--cobalt);

  transform-origin: center;
  transition: rotate 150ms ease-out, opacity 150ms ease-out 50ms,
    translate 150ms ease-out 150ms, width 150ms ease-out, background 100ms ease-out 120ms;
}

#menu-toggle:checked + .menu-icon div {
  width: 80%;
  background: var(--chrome);

  transition: translate 150ms ease-out, opacity 150ms ease-out 50ms,
    rotate 150ms ease-out 190ms, width 150ms ease-out 150ms,
    background 100ms ease-out 120ms;
}
#menu-toggle:checked + .menu-icon div:nth-child(1) {
  height: 2px;
  translate: 0 7.5px;
  rotate: 45deg;
}
#menu-toggle:checked + .menu-icon div:nth-child(2) {
  height: 2px;
  opacity: 0;
}
#menu-toggle:checked + .menu-icon div:nth-child(3) {
  height: 2px;
  translate: 0 -7.5px;
  rotate: -45deg;
}

/* Fixed Header – Compact Navigation */
.menu-compact {
  position: absolute;
  top: -40vh;
  left: 0;
  right: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  width: 100vw;
  height: 100vh;
  height: 100dvh;

  background: var(--cloud);
  color: var(--cobalt);

  transition: all ease-in-out 250ms;

  opacity: 0;
  z-index: -1;
  pointer-events: none;
}
#menu-toggle:checked ~ .menu-compact {
  top: 0;
  opacity: 1;
  pointer-events: auto;
}

.menu-compact-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  width: 100%;
  height: calc(100% - var(--h-header) * 0.8);
  overflow-y: scroll;
}
.menu-compact-list > :last-child {
  margin-bottom: 1.75rem;
}

/* Fixed Header – Compact Navigation Menu Items */
.menu-compact .list-item {
  display: grid;
  grid-template-areas:
    "item-icon label indicator-icon"
    ". nested-links .";
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;

  align-items: center;

  width: 100%;
  padding-block: 1.25rem 1.5rem;
  padding-inline: 1.85rem;
  border-bottom: thin solid var(--caulk);

  color: var(--cobalt);
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 500;
  line-height: 110%;
  text-align: left;

  fill: var(--cobalt);
  transition: all 250ms;
}

.menu-compact .list-item .label {
  grid-area: label;
  color: var(--cobalt);
  transition: inherit;
}
.menu-compact .list-item .item-icon {
  grid-area: item-icon;
  height: 1em;
  margin-right: 0.375em;
  transition: inherit;
}
.menu-compact .list-item .item-icon svg {
  height: 0.9em;
  translate: 0 0.01em;
}
.menu-compact .list-item .new-tab-icon {
  grid-area: indicator-icon;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M14 2V6M14 2H10H14ZM14 2L8 8L14 2Z' stroke='%2332393D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 8.66667V12.6667C14 13.4031 13.4031 14 12.6667 14H3.33333C2.59695 14 2 13.4031 2 12.6667V3.33333C2 2.59695 2.59695 2 3.33333 2H7.33333' stroke='%2332393D' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  height: 1rem;
  margin-bottom: -0.25rem;
  opacity: 0.4;
}
.menu-compact .list-item .indicator-icon {
  grid-area: indicator-icon;
  width: 1rem;
  aspect-ratio: 1;

  object-fit: cover;
  margin-top: 0.25rem;
}

@media (any-hover: hover) {
  .menu-compact .list-item .label:hover {
    color: var(--cosmic);
    cursor: pointer;
  }
  .menu-compact .list-item:hover .item-icon {
    fill: var(--cosmic);
  }
}

/* Fixed Header – Compact Navigation Nested Links */
.menu-compact .list-item .nested-links {
  grid-area: nested-links;

  display: flex;
  flex-direction: column;
  gap: 0.75em;

  margin-top: 1.5rem;

  font-family: var(--font-body);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.menu-compact .nested-links a {
  color: var(--cobalt);
  transition: all 250ms;
}
@media (any-hover: hover) {
  .menu-compact .nested-links a:hover {
    color: var(--cosmic);
  }
}

/* Fixed Header – Compact Navigation Store Links */
.menu-compact .stores {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;

  padding-block: 1.5rem;
  padding-inline: 1.85rem;
  border-bottom: thin solid var(--caulk);

  font-family: var(--font-body);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.menu-compact .stores .store-links {
  display: flex;
  align-items: center;
  align-content: center;
  gap: 1.5rem;

  align-self: stretch;
  flex-wrap: wrap;
}

.menu-compact .stores .shop-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;

  color: var(--cobalt);
  font-size: 1rem;

  fill: var(--cobalt);
  transition: all 250ms;
}
@media (any-hover: hover) {
  .menu-compact .stores .shop-link:hover {
    color: var(--cosmic);
    fill: var(--cosmic);
  }
}

.menu-compact .shop-link .store-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 4rem;
  aspect-ratio: 1;

  border-radius: 1rem;
  border: thin solid var(--caulk);
  background: white;
}
.menu-compact .shop-link .store-icon svg {
  height: 62%;
  translate: -0.01em 0.05em;
}

/* Hero */
section.hero {
  --h-page-dots: 0.5rem;

  position: relative;
  display: grid;

  height: calc(100vh - var(--h-header));
  height: calc(100svh - var(--h-header));
  min-height: 100vw;
  max-height: calc(1.8 * 100vw);

  background: var(--cosmic);
  text-align: center;
}

section.hero .illustration,
section.hero .content {
  grid-column: 1;
  grid-row: 1;
}

/* Hero – Background and Photo */
.hero .illustration {
  display: grid;
  justify-items: center;
  height: 100%;
  overflow: hidden;
}
.hero .illustration svg {
  grid-column: 1;
  grid-row: 1;
  align-self: start;

  width: 100%;
  margin-top: 20vw;
  fill: white;
}
.hero .illustration img {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  width: 110%;
  margin-top: 2rem;

  opacity: 1;
  transition: opacity ease-in-out var(--t-fade-duration);
}

/* Hero – Content & Buttons */
section.hero .content {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  height: 100%;
  padding: 1.5rem;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 45%,
    rgba(0, 0, 0, 0.35) 65%,
    rgba(0, 0, 0, 0.65) 100%
  );
  color: white;
  z-index: 1;
}

.hero .content h1 {
  margin-bottom: 0.5rem;
  text-shadow: 0px 0px 16px rgba(0, 0, 0, 0.8);
}
.hero .content h1 span {
  font-size: 1.5rem;
  vertical-align: top;
}

.hero .content p {
  width: 25ch;
}

.hero .content h1,
.hero .content p {
  opacity: 1;
  transition: opacity ease-in-out var(--t-fade-duration);
}

.hero .button-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  width: 12rem;
  margin-block: 1.5rem calc(1.5rem + var(--h-page-dots));

  transition: margin 250ms;
}

.hero .button-stack .btn {
  width: 100%;
}

/* Hero – Pagination Dots */
section.hero .pagination {
  position: absolute;
  bottom: 1.5rem;

  display: flex;
  justify-content: center;
  gap: 0.5rem;

  width: 100%;
  height: var(--h-page-dots);

  transition: all 300ms;
  z-index: 2;
}

.hero .pagination .dot {
  height: var(--h-page-dots);
  aspect-ratio: 1;

  border-radius: 1000px;
  border: thin solid white;

  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  transition: all var(--t-fade-duration) var(--t-fade-duration);
}
.hero .pagination .dot.current-page {
  background: white;
}

/* Product Technology */
section.technology {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;

  padding-block: 3rem;
  background: var(--cloud);

  overflow: hidden;
}

/* Product Tech – Feature Card Styling */
.technology .card {
  --t-transition-duration: 500ms;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;

  padding-inline: 1.5rem;
  padding-block: 3rem;

  color: var(--chrome);
  text-align: center;
  opacity: 1;
}
.technology .card h2 {
  max-width: 320px;
  color: var(--coral);
  opacity: 1;
  transition: all ease-in-out var(--t-transition-duration) var(--t-transition-duration);
}
.technology .card p {
  max-width: 280px;
  opacity: 1;
  transition: all ease-in-out var(--t-transition-duration)
    calc(var(--t-transition-duration) * 3.25);
}
.technology .card svg {
  max-width: 320px;
  margin-bottom: 1rem;
  opacity: 1;
  transition: all ease-in-out var(--t-transition-duration);
}
.technology .card canvas {
  opacity: 1;
  transition: all ease-in-out var(--t-transition-duration);
}

.technology .card > svg.hidden,
.technology .card > p.hidden {
  opacity: 0;
  transition: all 0s;
}
.technology .card > h2.hidden {
  opacity: 0;
  translate: 0 2rem;
  transition: all 0s;
}
.technology .card > canvas.hidden {
  opacity: 0;
  transition: all 0s;
}

/* Product Tech – Lacreon Specific Styling */
.technology .card.lacreon {
  position: relative;

  padding-block: 4.5rem;
  margin-block: 2.5rem 3rem;
  border-radius: 1200px;
  background: var(--cobalt);

  color: var(--caulk);
  transition: scale ease-in-out calc(var(--t-transition-duration) * 1.5);
}
.technology .card.lacreon::before {
  content: "";

  position: absolute;

  width: calc(100% + 2.5rem);
  aspect-ratio: 1;
  border-radius: 1200px;
  border: 1.8px solid var(--cobalt);
}
.technology .card.lacreon h2 {
  color: white;
}
.technology .card.lacreon canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
.technology .card.lacreon.minimize {
  scale: 0;
}

.technology .card.credibility h2 {
  color: var(--cobalt);
}

/* App Promo */
section.app-promo {
  display: flex;
  justify-content: center;
  color: white;
  text-align: center;
}
section.app-promo .app-promo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;

  padding: 0.75rem;
  width: 100%;
  max-width: 1440px;
}

/* App Promo — Headline & Illustration */
.app-promo .headline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.25rem;

  padding-block: 2rem;
  width: 100%;
  background: var(--coral);

  overflow: hidden;
}
.app-promo .headline h3 {
  width: 300px;
  z-index: 2;
}

.app-promo .illustration {
  position: relative;
  display: grid;
  place-items: center;
  z-index: 1;
}
.app-promo .illustration::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 292 410' fill='none'%3E%3Cpath d='M291.128 208.444C291.128 197.703 287.903 187.401 281.994 177.914C270.697 159.734 270.697 136.372 281.994 118.171C287.903 108.664 291.128 98.3825 291.128 87.6417C291.128 39.371 226.148 0.25293 145.99 0.25293C65.8325 0.25293 0.87207 39.371 0.87207 87.6208C0.87207 98.3616 4.09692 108.664 10.0059 118.151C21.3025 136.33 21.3025 159.693 10.0059 177.893C4.09692 187.401 0.87207 197.682 0.87207 208.423C0.87207 219.164 4.09692 229.466 10.0059 238.953C21.3025 257.133 21.3025 280.495 10.0059 298.696C4.09692 308.203 0.87207 318.484 0.87207 329.225V383.013C0.87207 396.867 11.2418 408.088 24.0446 408.088H267.955C280.758 408.088 291.128 396.867 291.128 383.013V329.225C291.128 318.484 287.903 308.183 281.994 298.696C270.852 280.746 270.852 256.903 281.994 238.953C287.903 229.445 291.128 219.164 291.128 208.423V208.444Z' fill='%23F3A732'/%3E%3C/svg%3E");
  position: absolute;
  width: 11.5rem;
  z-index: -1;
}
.app-promo .illustration .app-icon {
  width: 80px;
}
.app-promo .illustration p,
.app-promo .illustration .app-store-badge {
  display: none;
}

/* App Promo — USP List */
.app-promo .selling-points {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;

  padding: 1.5rem;
  width: 100%;
  background: var(--cloud);

  color: var(--coral);
}
.app-promo .selling-points li {
  display: grid;
  place-items: center;
  width: 184px;
  font-weight: 400;
}
.app-promo .selling-points li:not(:last-child):after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' fill='none'%3E%3Cpath d='M7.88257 1.44256L7.77686 1.64349C7.00325 3.11929 7.00325 4.88073 7.77686 6.35653L7.88257 6.55746C8.32923 7.41018 7.41001 8.3301 6.55729 7.88274C4.95547 7.04333 3.04421 7.04333 1.44239 7.88274C0.589668 8.3294 -0.330259 7.41018 0.117103 6.55746L0.222817 6.35653C0.996424 4.88073 0.996424 3.11929 0.222817 1.64349L0.117103 1.44256C-0.330259 0.589841 0.588968 -0.329385 1.44169 0.117276C3.04351 0.956692 4.95477 0.956692 6.55659 0.117276C7.40931 -0.329385 8.32923 0.589841 7.88187 1.44256H7.88257Z' fill='%23F3A732'/%3E%3C/svg%3E");
  width: 0.5rem;
  margin-top: 1rem;
}

/* App Promo — CTA */
.app-promo .cta {
  display: grid;
  place-items: center;
  padding: 1.5rem;
  width: 100%;
  background: var(--cosmic);
}
.app-promo .cta-wrapper {
  display: grid;
  gap: 1.5rem;
  width: fit-content;
}

/* Shop Now */
section.shop-now {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: var(--cobalt);
  color: white;
  text-align: center;
}

section.shop-now .shop-now-wrapper {
  position: relative;

  display: grid;
  grid-template-columns: auto;
  justify-content: center;
  align-items: center;

  width: 100%;
  max-width: 1440px;

  padding-inline: 1.5rem;
  padding-top: 3rem;
}
.shop-now-wrapper > .content {
  margin-bottom: 3rem;
}

.shop-now .decoration {
  display: none;
}

.shop-now .illustration {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  gap: 4rem;

  width: 100%;
  max-width: 450px;

  z-index: 1;
}
.shop-now .illustration img {
  width: 70%;
  z-index: -1;
}

.shop-now .button-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  width: 100%;
}
.shop-now .button-stack .separator {
  display: none;
  fill: var(--canary);
}

.shop-now .details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}
.shop-now .details p {
  max-width: 300px;
}

/* Shop Now — Buttons */
.shop-now .online-stores-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;

  width: 100%;
  max-width: 420px;
}
.shop-now .online-stores-buttons .btn {
  width: 48%;
  max-width: 200px;
  min-height: 68px;

  padding-inline: 2.25rem;
  padding-block: 1.25rem;
  background: white;

  transition: all 250ms;
  user-select: none;
}
@media (any-hover: hover) {
  .shop-now .online-stores-buttons .btn:hover {
    scale: 1.03;
    background: var(--cloud);
  }
}
.shop-now .online-stores-buttons .btn:active {
  scale: 0.97;
  background: var(--caulk);
}
.shop-now .online-stores-buttons img {
  height: 1.75rem;
  pointer-events: none;
}
.shop-now .physical-stores .btn {
  width: clamp(160px, 50%, 192px);
}

/* Shop Now – Promo & Coupon */
.shop-now .promo {
  position: relative;

  display: grid;
  place-items: center;

  width: 100%;
  padding-block: 3rem;
}
.shop-now .promo::before {
  content: "";
  position: absolute;

  width: 100vw;
  height: 100%;
  background: var(--cosmic);

  pointer-events: none;
}

.shop-now .coupon {
  position: relative;

  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(3, auto);
  row-gap: 0.75rem;
  column-gap: 1.5rem;

  width: 100%;
  max-width: 420px;
  padding: 1.5rem;

  text-align: left;
  z-index: 1;
}
.shop-now .coupon::before {
  content: "";
  position: absolute;
  align-self: start;

  width: 100%;
  height: 100%;

  border: 1px dashed var(--caulk);
  border-image: url("../images/sprite_border-coupon.svg") 14 round;
  background: rgba(255, 255, 255, 0.25);

  pointer-events: none;
  z-index: -1;
}

.shop-now .coupon img {
  align-self: center;
  grid-row: span 2;
  width: 4.5rem;
}
.shop-now .coupon p {
  font-size: 0.875rem;
}
.shop-now .coupon .btn {
  grid-column: span 2;
  margin-top: 0.75rem;
}

/* Discover */
section.discover {
  display: flex;
  justify-content: center;
  text-align: center;

  overflow: hidden;
}
section.discover .discover-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;

  width: 100%;
  max-width: 1440px;
  padding-block: 3rem;
  padding-inline: 1.5rem;
}

/* Discover — Splash & Heading */
.discover .splash {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 290px;
  z-index: 2;
}
.discover .splash h4 {
  color: var(--cosmic);
  margin-bottom: 2rem;
}
.discover .splash .model {
  width: 100%;
}
.discover .splash .flower {
  display: none;
}

/* Discover — Key Traits */
section.discover .traits {
  --h-vertical-spacing: 2rem;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  max-width: 740px;
  z-index: 2;
}
.discover .trait {
  display: flex;
  flex-direction: column;
  align-items: center;

  max-width: 320px;
  transition: translate ease-in-out 500ms, opacity ease-in-out 500ms;
}
.discover .trait:not(:last-child)::after {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11.4 5.1c-.7-.3-1.4-.5-2.1-.5.5-.5.9-1.1 1.1-1.8.3-.8-.4-1.5-1.2-1.3-.7.3-1.3.6-1.8 1.2 0-.7-.2-1.4-.5-2.1-.4-.7-1.4-.7-1.8 0-.3.6-.5 1.3-.5 2.1-.5-.6-1.1-.9-1.8-1.2-.8-.2-1.5.5-1.3 1.3.2.7.6 1.3 1.1 1.8-.7 0-1.4.2-2.1.5-.7.4-.7 1.4 0 1.8.7.3 1.4.5 2.1.5-.5.5-.8 1.1-1.1 1.8-.2.8.5 1.5 1.3 1.3.7-.2 1.3-.6 1.8-1.1 0 .7.2 1.4.5 2.1.4.7 1.4.7 1.8 0 .3-.7.5-1.4.5-2.1.5.5 1.1.9 1.8 1.1.8.3 1.5-.5 1.3-1.3-.2-.7-.6-1.3-1.1-1.8.7 0 1.4-.2 2.1-.5.7-.4.7-1.4-.1-1.8z' fill='%23f3a732'/%3E%3C/svg%3E");
  margin-block: var(--h-vertical-spacing);
  width: 0.75rem;
}
.discover .trait h4,
.discover .trait h6 {
  margin-bottom: 0.75em;
  color: var(--coral);
}
.discover .trait p:not(:last-of-type) {
  margin-bottom: var(--h-vertical-spacing);
}
.discover .trait.hidden {
  translate: 0 4rem;
  opacity: 0;
}
.discover .trait > .hidden {
  opacity: 0;
}

/* Product Range */
section.product-range {
  position: relative;
  display: flex;
  justify-content: center;
}
section.product-range .product-range-wrapper {
  position: relative;

  display: grid;
  grid-template-rows: auto 1fr 1fr;
  justify-items: center;
  gap: 3rem;

  width: 100%;
  max-width: 1440px;
  padding-block: 3rem;
  padding-inline: 1.5rem;

  text-align: center;
}
section.product-range .product-range-wrapper::after {
  position: absolute;
  top: 0;
  content: "";
  width: calc(100% - 3rem);
  border-top: thin solid var(--caulk);
}
.product-range h3 {
  max-width: 320px;
  margin-bottom: 1rem;
}
.product-range h3 span {
  color: var(--cosmic);
}
.product-range .decoration {
  display: none;
}

/* Product Range – Product Stack */
.product-range .product-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;

  min-width: 14rem;
}
.product-range .product-stack img {
  height: 13rem;
}
.product-range .product-stack .btn {
  width: 15rem;
  padding-inline: 1.5rem;
}

/* Try Lenses */
section.try-lenses {
  display: flex;
  justify-content: center;
  background: var(--cloud);
  text-align: center;
}
section.try-lenses .try-lenses-wrapper {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;

  width: 100%;
  max-width: 1440px;
  padding-block: 3rem;
  padding-inline: 1.5rem;
}
.try-lenses h3 {
  width: 300px;
  color: var(--canary);
  font-style: italic;
}
.try-lenses h3 span {
  color: var(--cosmic);
}
.try-lenses .illustration .model {
  display: none;
}
.try-lenses .illustration .lens {
  height: 10rem;
}

/* Try Lenses — Button Styles */
.try-lenses .btn {
  width: 15rem;
  padding-inline: 1.5rem;
}
@media (any-hover: hover) {
  .try-lenses .btn:hover {
    background: var(--canary);
    color: var(--cosmic);
    stroke: var(--cosmic);
    fill: var(--cosmic);
  }
}

/* Virtual Mirror */
section.virtual-mirror {
  position: relative;
  display: flex;
  justify-content: center;
}
.virtual-mirror-wrapper {
  display: grid;
  grid-template-columns: 1fr;

  width: 100%;
  max-width: 1300px;
  padding-bottom: 2.5rem;

  text-align: center;
}

.virtual-mirror h3 {
  display: none;
  z-index: 5;
}
.virtual-mirror .blob {
  display: none;
}

.virtual-mirror .cam-feed {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(90vw, calc(100svh - 18.5rem), 480px);
  background: var(--caulk);
  overflow: hidden;
}
.virtual-mirror .cam-feed video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.virtual-mirror .cam-feed .loader {
  position: absolute;
  display: grid;
  place-items: center;

  width: 3rem;
  aspect-ratio: 1;
  border-radius: 1000px;
  padding: 0.25rem;
  background: var(--cloud);

  animation: ring-rotate 4s linear forwards infinite;
}
.virtual-mirror .cam-feed .loader > svg {
  width: 100%;
  fill: none;
  stroke: var(--cobalt);
  stroke-linecap: round;
  stroke-width: 4;
  stroke-miterlimit: 10;

  animation: ring-rotate 1.5s cubic-bezier(0.75, 0, 0.25, 1) forwards infinite;
}
.virtual-mirror .cam-feed .error {
  position: absolute;

  display: none;
  flex-direction: column;
  align-items: center;
  gap: 2rem;

  width: 16rem;
}
.virtual-mirror .cam-feed .error svg {
  width: 3.5rem;
  margin-left: 1.25rem;
  fill: var(--chasm);
}

/* Virtual Mirror — Tab View Toggles */
.virtual-mirror .tab-controls {
  position: relative;
  display: flex;
  width: 100%;
  padding-block: 1rem;
  border-bottom: thin solid var(--caulk);
}
.virtual-mirror .tab-controls .indicator {
  position: absolute;
  bottom: -1.5px;
  left: 0;

  width: 50%;
  border-bottom: 2px solid var(--cobalt);
  transition: all 300ms;
}

.virtual-mirror .tab-controls .tab {
  display: grid;
  place-items: center;
  width: 50%;

  color: var(--chrome);
  font-weight: 400;

  transition: all 300ms;
  cursor: pointer;
  user-select: none;
}
@media (any-hover: hover) {
  .virtual-mirror .tab-controls .tab:hover {
    color: var(--cobalt);
  }
}
.virtual-mirror .tab-controls .tab.active {
  color: var(--cobalt);
}

/* Virtual Mirror — Lens Tray */
.virtual-mirror .lens-tray {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
}
.virtual-mirror .lens-tray p {
  display: none;
}
.virtual-mirror .lens-tray .collection {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;

  min-width: 100%;
  padding-inline: 1.5rem;
  padding-block: 1.75rem;

  transition: translate ease-in-out 300ms;

  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;

  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.virtual-mirror .lens-tray .collection::-webkit-scrollbar {
  display: none;
}

/* Virtual Mirror — Lens Options */
.virtual-mirror .lens-tray figure {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 1.25rem;

  width: 4.75rem;

  z-index: 1;
  cursor: pointer;
  user-select: none;

  scroll-snap-align: center;
}
.virtual-mirror .lens-tray figure .selection-ring {
  position: absolute;
  width: 4.5rem;
  aspect-ratio: 1;

  border-radius: 1000px;
  border: 2px solid transparent;

  translate: 0 -0.5rem;
  scale: 0.75;
  z-index: -1;

  transition: all ease-in-out 150ms;
  pointer-events: none;
  user-select: none;
}
.virtual-mirror .lens-tray figure img {
  width: 3.5rem;
  transition: scale ease-in-out 250ms;
}
.virtual-mirror .lens-tray figure figcaption {
  font-size: 0.875rem;
}

.virtual-mirror .lens-tray figure.active .selection-ring {
  border: 2px solid var(--cobalt);
  scale: 1;
}
.virtual-mirror .lens-tray figure.active figcaption {
  color: var(--cobalt);
  font-weight: 400;
}

@media (any-hover: hover) {
  .virtual-mirror .lens-tray figure:hover img {
    scale: 1.1;
  }
}

/* Virtual Mirror — Button Stack */
.virtual-mirror .button-stack {
  display: grid;
  place-items: center;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;

  padding-inline: 1.5rem;
}
.virtual-mirror .button-stack .btn {
  width: 100%;
  max-width: 12rem;
}
.virtual-mirror .button-stack #learn-more-btn.disabled {
  filter: grayscale();
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* Virtual Mirror Modal */
.vm-modal {
  position: fixed;
  top: 0;
  left: 0;

  display: grid;
  place-items: center;

  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 1rem;

  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(50px) grayscale(0.25);
  -webkit-backdrop-filter: blur(50px) grayscale(0.25);
  z-index: 20;

  transition: all ease 300ms;
}
.vm-modal.hidden {
  background: transparent;
  backdrop-filter: blur(0px) grayscale(0);
  -webkit-backdrop-filter: blur(0px) grayscale(0);

  transition: all ease 300ms 200ms;
}
.vm-modal.disabled {
  display: none;
}

.vm-modal section.virtual-mirror {
  max-width: 1080px;
  border-radius: 1rem;
  background: white;
  overflow-x: hidden;
  overflow-y: scroll;

  transition: translate ease 300ms 200ms;
}
.vm-modal section.virtual-mirror.hidden {
  translate: 0 100vh;
  translate: 0 100dvh;
  transition: translate ease 300ms;
}
.vm-modal .virtual-mirror .close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;

  display: grid;
  place-items: center;

  width: 2rem;
  aspect-ratio: 1;

  border-radius: 1000px;
  background: var(--cloud);
  color: var(--cobalt);
  font-size: 1.5rem;

  transition: all ease-in-out 300ms;
  cursor: pointer;

  z-index: 1;
}
.vm-modal .virtual-mirror .close-btn p {
  line-height: 100%;
  translate: 0 -3px;
}
@media (any-hover: hover) {
  .vm-modal .virtual-mirror .close-btn:hover {
    rotate: 180deg;
  }
}

.vm-modal .virtual-mirror-wrapper {
  padding: 0;
}

/* Summary */
section.summary {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

  background: var(--cosmic);
  color: white;

  z-index: 1;
}

.summary .button-bar {
  display: flex;

  width: 100%;
  max-width: 1440px;
  padding-inline: 1.5rem;
  padding-block: 1rem;
  background: var(--cobalt);
}
.summary .button-bar .btn.tertiary {
  display: none;
}

.summary .btn.block {
  justify-content: end;
  width: 100%;

  color: white;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  text-align: right;
  text-decoration: none;

  fill: white;
  stroke: white;
}
.summary .btn.block > .arrow {
  stroke-width: 1;
  translate: 0 1px;
}
.summary .btn.block:active {
  scale: 1;
}

.summary .heading {
  padding-inline: 1.5rem;
  padding-block: 3rem;
  text-align: center;
}
.summary .heading h5 {
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25rem;
}

.summary .bean {
  display: none;
}

.summary .decoration {
  display: none;
}

/* Product Selector */
section.product-selector {
  position: relative;
  display: flex;
  justify-content: center;

  border-block: thin solid var(--caulk);
  background: var(--clr-bg);
  transition: background ease 250ms;
}
section.product-selector .product-selector-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, auto);

  width: 100%;
  padding-bottom: 3rem;

  text-align: center;
}

.product-selector .on-eye-image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-selector .on-eye-image img {
  width: 100%;
}

/* Product Selector – Description */
.product-selector .description {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  justify-self: center;

  padding-block: 2.25rem;
  padding-inline: 1.5rem;

  color: var(--clr-accent);
}
.product-selector .description h5 {
  margin-bottom: 0.75rem;
}
.product-selector .description h2 {
  margin-bottom: 2.25rem;
}

/* Product Selector – Button Stack */
.product-selector .button-stack {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: center;
  gap: 0.75rem;

  width: 100%;
}
.product-selector .button-stack .btn {
  width: 220px;
}

/* Product Selector – Dynamic Button Styles */
.product-selector[data-filter="classic"] .btn.primary.dynamic {
  color: var(--clr-bg);
  stroke: var(--clr-bg);
  fill: var(--clr-bg);
}
.product-selector[data-filter="fresh"] .btn.primary.dynamic {
  border: thin solid var(--clr-accent);
  color: var(--clr-accent);
  stroke: var(--clr-accent);
  fill: var(--clr-accent);
}
.product-selector .btn.tertiary.dynamic {
  border: thin solid var(--clr-accent);
  color: var(--clr-accent);
  stroke: var(--clr-accent);
  fill: var(--clr-accent);
}
@media (any-hover: hover) {
  .product-selector .btn.tertiary.dynamic:hover {
    background: rgba(0, 0, 0, 0.05);
  }
}

/* Product Selector – Lens Tray */
.product-selector .lens-tray {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.product-selector .lens-tray::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;
  border-bottom: thin solid var(--clr-accent);
  transition: border ease 250ms;
}
.product-selector .lens-tray .collection {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;

  min-width: 100%;
  padding-inline: 1.5rem;
  padding-block: 1.75rem;

  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;

  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.product-selector .lens-tray .collection::-webkit-scrollbar {
  display: none;
}

/* Product Selector — Lens Options */
.product-selector .lens-tray figure {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 1.25rem;

  width: 4.75rem;

  z-index: 1;
  cursor: pointer;
  user-select: none;

  scroll-snap-align: center;
}
.product-selector .lens-tray figure .selection-ring {
  position: absolute;
  width: 4.5rem;
  aspect-ratio: 1;

  border-radius: 1000px;
  border: 2px solid transparent;

  translate: 0 -0.5rem;
  scale: 0.75;
  z-index: -1;

  transition: all ease-in-out 150ms;
  pointer-events: none;
  user-select: none;
}
.product-selector .lens-tray figure img {
  width: 3.5rem;
  transition: scale ease-in-out 250ms;
}
.product-selector .lens-tray figure.active .selection-ring {
  border: 2px solid var(--clr-accent);
  scale: 1;
}
@media (any-hover: hover) {
  .product-selector .lens-tray figure:hover img {
    scale: 1.1;
  }
}

/* Features */
section.features {
  display: flex;
  justify-content: center;
  border-bottom: thin solid var(--cloud);
}

.features .feature-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 100%;
  max-width: 1440px;

  padding: 1.5rem;
}

.features .feature-item {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
}
.features .feature-item-wrapper {
  display: grid;
  grid-template-columns: 4.25rem 1fr;
  align-items: center;
  gap: 1.5rem;

  padding-block: 1.5rem;
}
.features .feature-item:not(:last-child) {
  border-bottom: thin solid var(--caulk);
}
.features .feature-item svg {
  width: 100%;
  fill: none;
  stroke: var(--coral);
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.features .feature-item .separator {
  display: none;
}

.features .details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.features .details h6 {
  color: var(--coral);
}
.features .details h6 > span {
  font-size: 60%;
  font-weight: 600;
  vertical-align: top;
}
.features .details p {
  max-width: 250px;
  font-size: 0.875em;
}

/* Specs */
section.specs {
  display: flex;
  justify-content: center;
}
section.specs .specs-wrapper {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  max-width: 1440px;
}

/* Specs — Compact Title Bar Toggle */
#specs-toggle {
  display: none;
}
#specs-toggle:checked + .specs-bar svg {
  rotate: 0deg;
}
#specs-toggle:checked + .specs-bar {
  border-bottom: thin solid var(--canary);
}
#specs-toggle:checked ~ .spec-list {
  grid-template-rows: 1fr;
}

.specs .specs-bar {
  display: flex;
  justify-content: space-between;

  width: 100%;
  padding-inline: 1.5rem;
  padding-block: 0.75rem;
  border-bottom: 0px solid transparent;

  color: var(--canary);
  cursor: pointer;

  transition: border ease-in-out 250ms;
}
.specs .specs-bar svg {
  width: 1.5rem;
  rotate: -90deg;
  fill: var(--canary);

  transition: rotate ease-in-out 250ms;
}

/* Specs — List & Items */
.specs .spec-list {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;

  border-bottom: thin solid var(--cloud);
  font-size: 0.875rem;

  transition: grid-template-rows 500ms;
}
.specs .spec-list h6 {
  display: none;
}
.specs .spec-list-wrapper {
  display: flex;
  flex-direction: column;

  padding-inline: 1.5rem;
  overflow: hidden;
}

.specs .spec-item {
  display: grid;
  grid-template-columns: 1.125rem 8em 1fr;
  column-gap: 0.8rem;

  margin-bottom: 1.25rem;
}
.specs .spec-item:first-child {
  padding-top: 2.25rem;
}
.specs .spec-item:last-child {
  padding-bottom: 1.25rem;
}
.specs .spec-item img {
  width: 1.125rem;
}
.specs .spec-item p {
  line-height: 140%;
}
.specs .spec-item .label {
  font-weight: 500;
}

.specs .illustration {
  display: none;
}
.specs .decoration {
  display: none;
}

/* Lens Wear */
section.lens-wear {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  max-width: 1440px;
  padding-block: 3rem;

  text-align: center;
}

/* Lens Wear — Heading */
.lens-wear .heading {
  display: flex;
  flex-direction: column;
}
.lens-wear .heading h3 {
  color: var(--cobalt);
  margin-bottom: 1rem;
}
.lens-wear .heading svg {
  height: 0.75rem;
  fill: var(--cosmic);
  margin-bottom: 3rem;
}
.lens-wear .heading img {
  display: none;
}

/* Lens Wear — Tab Controls */
.lens-wear .tab-controls {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  margin-block: 1.5rem;
}
.lens-wear .tab {
  display: flex;
  justify-content: center;

  width: 50%;
  padding-block: 1rem;
  border-bottom: thin solid var(--caulk);

  color: var(--chrome);
  font-family: var(--font-heading);
  font-weight: 500;

  stroke: none;
  fill: var(--chrome);

  transition: all 250ms;
  cursor: pointer;
}
.lens-wear .tab.active {
  color: var(--cobalt);
  fill: var(--cobalt);
}
@media (any-hover: hover) {
  .lens-wear .tab:hover {
    color: var(--cobalt);
    fill: var(--cobalt);
  }
}

.lens-wear .tab svg {
  height: 1.2rem;
  translate: 0 0.1rem;
  margin-left: 0.25rem;
}
.lens-wear .tab-controls .indicator {
  position: absolute;
  left: 0;
  bottom: 0;

  width: 50%;
  border-bottom: 2px solid var(--cobalt);

  transform: translateY(0.5px);
  transition: translate ease-in-out 300ms;
}

/* Lens Wear — Instructions & Steps */
.lens-wear .instructions {
  display: flex;
  align-items: start;
  width: 100%;
  max-width: 520px;
  overflow-x: hidden;
}
.lens-wear .instructions-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;

  min-width: 100%;
  padding: 1.5rem;

  text-align: left;
  transition: translate ease-in-out 300ms;
}

.lens-wear .instructions-wrapper .step {
  display: flex;
  align-items: center;
  justify-content: stretch;
  gap: 1.5rem;

  width: 100%;
}
.lens-wear .step img {
  width: 5rem;
}
.lens-wear .step .details {
  display: flex;
  flex-direction: column;
}
.lens-wear .step .details .number {
  display: none;
}
.lens-wear .step .details h6 {
  margin-bottom: 0.75rem;
}
.lens-wear .step .details p {
  color: var(--chrome);
}

/* Related */
section.related {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;

  padding-inline: 1.5rem;
  padding-block: 3rem;

  background: var(--cloud);

  text-align: center;
}

.related .illustration {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-bottom: 2rem;
}
.related .illustration img {
  height: 16rem;
  object-fit: contain;
}

.related h4 {
  color: var(--cobalt);
  margin-bottom: 1rem;
}
.related p {
  max-width: 340px;
  margin-bottom: 2rem;
  color: var(--chrome);
}
.related .btn {
  padding-inline: 2.25rem;
}

@media (any-hover: hover) {
  .related .btn:hover {
    background: rgba(0, 0, 0, 0.05);
  }
}

/* References */
aside.reference {
  display: flex;
  justify-content: center;
  color: var(--chrome);
}
aside.reference .reference-wrapper {
  display: flex;
  flex-direction: column;

  width: 100%;
  max-width: 1440px;
  padding-inline: 1.5rem;
  padding-block: 3rem;
}

.reference h1,
.reference h2 {
  margin-bottom: 1rem;

  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
}
.reference p {
  font-size: 0.75rem;
}
.reference p:not(:last-of-type) {
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: thin solid var(--caulk);
}
.reference p > a {
  color: var(--cosmic);
  font-weight: 400;
  text-decoration: underline;
}

/* Footer */
footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  border-top: thin solid var(--cloud);
  background: white;

  font-size: 0.75rem;
  line-height: 130%;
}
footer .footer-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 3rem 0;

  width: 100%;
  max-width: 1440px;

  padding-inline: 1.5rem;
  padding-block: 3rem;
}

footer .links {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
footer .links a {
  color: var(--cosmic);
  font-weight: 500;
  text-transform: uppercase;

  transition: color 200ms;
}

footer .socials {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1em;
  height: 2.75em;
}
footer .socials a,
footer .socials svg {
  height: 100%;
  fill: var(--cosmic);

  transition: fill 200ms;
}

@media (any-hover: hover) {
  footer .links a:hover {
    color: var(--cobalt);
  }
  footer .socials svg:hover {
    fill: var(--cobalt);
  }
}

footer .legal {
  grid-column: span 2;

  display: flex;
  flex-direction: column;
  gap: 1.3em;

  color: var(--chrome);
  font-weight: 300;
}

/* Back To Top */
.back-to-top {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;

  width: 3rem;
  aspect-ratio: 1;
  border: thin solid var(--cloud);

  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0.5rem 1rem 1px rgba(0, 0, 0, 0.05);

  backdrop-filter: blur(6px) saturate(2.5);
  -webkit-backdrop-filter: blur(6px) saturate(2.5);
  fill: var(--cobalt);
  stroke: var(--cobalt);

  translate: -50%;
  z-index: 10;

  transition: opacity ease-in-out 300ms, margin ease-in-out 300ms, background ease 200ms,
    width ease 200ms, transform ease 200ms, bottom ease 200ms;
}
.back-to-top:active {
  width: 2.75rem;
  background: rgba(255, 255, 255, 0.75);
  fill: var(--cosmic);
  stroke: var(--cosmic);
  scale: 1;
}
.back-to-top.hidden {
  margin-bottom: -3rem;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.back-to-top .arrow {
  margin: 0;
  rotate: -90deg;
  translate: 0 2px;
}

/* RESPONSIVE LAYOUTS */

/* Small Mobile Devices */
@media screen and (max-width: 370px) {
  /* Global */
  html,
  body {
    font-size: 15px;
  }
  /* Shop Now — Store Buttons */
  section.shop-now .online-stores-buttons img {
    height: 1.5em;
  }
  .shop-now .online-stores-buttons .btn {
    width: 100%;
    min-height: 48px;
  }
}

/* Tablet in Portrait and Wider */
@media screen and (min-width: 680px) {
  /* App Promo */
  section.app-promo .app-promo-wrapper {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: auto auto;
  }
  .app-promo .selling-points {
    align-self: stretch;
  }
  .app-promo .cta {
    grid-column: span 2;
  }

  /* Discover */
  section.discover .discover-wrapper {
    padding-inline: 3rem;
  }
  .discover .splash {
    max-width: 330px;
  }
  section.discover .traits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    column-gap: 0.5rem;
    row-gap: 1rem;

    text-align: left;
  }
  .discover .trait {
    align-items: start;
  }
  .discover .trait::before {
    content: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11.4 5.1c-.7-.3-1.4-.5-2.1-.5.5-.5.9-1.1 1.1-1.8.3-.8-.4-1.5-1.2-1.3-.7.3-1.3.6-1.8 1.2 0-.7-.2-1.4-.5-2.1-.4-.7-1.4-.7-1.8 0-.3.6-.5 1.3-.5 2.1-.5-.6-1.1-.9-1.8-1.2-.8-.2-1.5.5-1.3 1.3.2.7.6 1.3 1.1 1.8-.7 0-1.4.2-2.1.5-.7.4-.7 1.4 0 1.8.7.3 1.4.5 2.1.5-.5.5-.8 1.1-1.1 1.8-.2.8.5 1.5 1.3 1.3.7-.2 1.3-.6 1.8-1.1 0 .7.2 1.4.5 2.1.4.7 1.4.7 1.8 0 .3-.7.5-1.4.5-2.1.5.5 1.1.9 1.8 1.1.8.3 1.5-.5 1.3-1.3-.2-.7-.6-1.3-1.1-1.8.7 0 1.4-.2 2.1-.5.7-.4.7-1.4-.1-1.8z' fill='%23f3a732'/%3E%3C/svg%3E");
    margin-bottom: 0.75rem;
    width: 0.75rem;
  }
  .discover .trait:nth-child(2) {
    grid-row: 2;
    grid-column: 2;
  }
  .discover .trait:nth-child(3) {
    grid-row: 3;
    grid-column: 1;
  }
  .discover .trait:nth-child(4) {
    grid-row: 4;
    grid-column: 2;
  }
  .discover .trait:not(:last-child)::after {
    display: none;
  }
  section.product-range .product-range-wrapper {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    row-gap: 4rem;
    column-gap: 5rem;

    padding-block: 4rem 5rem;
    padding-inline: 3rem;
  }
  section.product-range .product-range-wrapper::after {
    width: calc(100% - 6rem);
  }
  .product-range h3 {
    grid-column: span 2;
  }
  .product-range .classic {
    justify-self: end;
  }
  .product-range .fresh {
    justify-self: start;
  }
  .product-range .decoration {
    position: absolute;
    left: calc(4rem + 3rem);
    top: 0.75rem;

    display: grid;
    place-items: center;

    z-index: 5;
  }
  .product-range .decoration img {
    position: absolute;
    width: 6rem;
    animation: ring-rotate 60s linear infinite forwards;
  }
  .product-range .decoration svg {
    fill: var(--cobalt);
    height: 0.8rem;
  }

  /* Summary */
  section.summary {
    background: var(--cloud);
    color: var(--cosmic);
  }
  .summary .button-bar {
    justify-content: end;
    padding-block: 1.5rem 0;

    background: transparent;
  }
  .summary .button-bar .btn.tertiary {
    display: flex;
    height: 3rem;
    padding-inline: 2.25rem;
  }
  @media (any-hover: hover) {
    .summary .button-bar .btn.tertiary:hover {
      background: rgba(255, 255, 255, 0.75);
    }
  }
  .summary .btn.block {
    display: none;
  }
  .summary .heading {
    position: relative;

    max-width: 720px;
    padding-inline: 2rem;
    padding-block: 3.5rem 5rem;
  }
  .summary .heading h5 {
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
  }
  .summary .heading h3 {
    font-size: 3rem;
  }
  .summary .bean {
    position: absolute;
    left: -9rem;
    top: -5rem;
    display: block;

    width: 15rem;
    z-index: -1;
  }

  /* Product Selector */
  section.product-selector .product-selector-wrapper {
    max-width: 500px;
  }
  .product-selector .description {
    max-width: 480px;
  }
  .product-selector .on-eye-image img {
    padding-top: 3rem;
  }

  /* Features */
  .features .feature-list {
    flex-direction: row;
    align-items: start;
    gap: 1.5rem;
    padding: 3rem;
  }
  .features .feature-item-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    gap: 2rem;

    padding: 0;
    text-align: center;
  }
  .features .feature-item:not(:last-child) {
    border-bottom: none;
  }
  .features .feature-item .separator {
    display: block;
    height: 0.5rem;
    margin-top: -0.5rem;
  }
  .features .feature-item .separator::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='8' viewBox='0 0 9 8' fill='none'%3E%3Cg clip-path='url(%23clip0_1707_11384)'%3E%3Cpath d='M4.66708 4C3.27748 4 2.09754 4.89838 1.67729 6.1465C1.50219 6.66573 2.00135 7.16489 2.52058 6.98979C3.76823 6.56954 4.66708 5.3896 4.66708 4Z' fill='%23F3A732'/%3E%3Cpath d='M4.66699 4C4.66699 5.3896 5.56538 6.56954 6.81349 6.98979C7.33272 7.16489 7.83188 6.66573 7.65678 6.1465C7.23654 4.89885 6.05659 4 4.66699 4Z' fill='%23F3A732'/%3E%3Cpath d='M4.66708 3.9996C4.66708 2.61 3.7687 1.43005 2.52058 1.00981C2.00135 0.834713 1.50219 1.33387 1.67729 1.8531C2.09754 3.10075 3.27748 3.9996 4.66708 3.9996Z' fill='%23F3A732'/%3E%3Cpath d='M4.66699 3.9996C6.05659 3.9996 7.23654 3.10122 7.65678 1.8531C7.83188 1.33387 7.33272 0.834713 6.81349 1.00981C5.56584 1.43005 4.66699 2.61 4.66699 3.9996Z' fill='%23F3A732'/%3E%3Cpath d='M4.66693 4C3.6845 4.98243 3.48559 6.45234 4.07066 7.63182C4.31393 8.12257 5.01994 8.12257 5.26321 7.63182C5.84828 6.45234 5.64936 4.98243 4.66693 4Z' fill='%23F3A732'/%3E%3Cpath d='M4.66699 3.99994C5.64942 4.98237 7.11934 5.18129 8.29881 4.59622C8.78956 4.35294 8.78956 3.64694 8.29881 3.40366C7.11934 2.81859 5.64942 3.01751 4.66699 3.99994Z' fill='%23F3A732'/%3E%3Cpath d='M4.66688 3.99994C3.68444 3.01751 2.21453 2.81859 1.03505 3.40366C0.544305 3.64694 0.544305 4.35294 1.03505 4.59622C2.21453 5.18129 3.68444 4.98237 4.66688 3.99994Z' fill='%23F3A732'/%3E%3Cpath d='M4.66693 3.99988C5.64936 3.01745 5.84828 1.54754 5.26321 0.368062C5.01994 -0.122687 4.31393 -0.122687 4.07066 0.368062C3.48559 1.54754 3.6845 3.01745 4.66693 3.99988Z' fill='%23F3A732'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1707_11384'%3E%3Crect width='8' height='8' fill='white' transform='translate(0.666992)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    translate: 0 -0.5rem;
  }
  .features .feature-item svg {
    width: 70px;
    justify-self: center;
  }
  .features .details {
    gap: 1rem;
  }

  /* Specs */
  .specs .spec-item {
    column-gap: 1.25rem;
    grid-template-columns: 1.125rem 12em 1fr;
  }

  /* Lens Wear */
  .lens-wear .step img {
    width: 6rem;
  }

  /* Virtual Mirror */
  .virtual-mirror .cam-feed {
    height: clamp(75vw, calc(100svh - 18.5rem), 480px);
  }
  .virtual-mirror .button-stack {
    justify-self: center;
    width: 400px;
  }
  .vm-modal {
    padding: 3rem;
  }
}

/* Tablet in Landscape and Wider */
@media screen and (min-width: 960px) {
  /* Global */
  .btn.primary,
  .btn.secondary,
  .btn.tertiary {
    height: 4rem;
  }
  h3 {
    font-size: 4.5rem;
  }
  h4 {
    font-size: 2.5rem;
  }
  h5 {
    font-size: 2rem;
  }
  h6 {
    font-size: 1.25rem;
  }

  /* Fixed Header */
  header .header-wrapper {
    padding-inline: 3rem;
  }
  header .logo {
    width: 116px;
  }
  header .logo img {
    width: 100%;
    translate: 0 calc(1rem / 8);
  }

  /* Main Navigation */
  .menu-default {
    display: flex;
  }

  /* Mobile Navigation */
  .menu-icon {
    display: none;
  }
  .menu-compact {
    display: none;
  }

  /* Hero */
  section.hero {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;

    min-height: unset;
    max-height: 680px;
  }
  .hero .illustration {
    position: relative;
    justify-self: right;

    width: 100%;
    max-width: 700px;
    height: 100%;
    overflow: unset;
  }
  .hero .illustration svg {
    position: absolute;
    width: 125%;
    max-width: 680px;
    margin-top: 2.625rem;
  }
  .hero .illustration img {
    position: absolute;
    align-self: start;

    width: 125%;
    max-width: 650px;
    margin-top: 2rem;
    margin-left: 7rem;
  }
  section.hero .content {
    grid-column: 2;
    justify-content: center;

    max-width: 700px;
    background: unset;
  }
  .hero .content h1 {
    margin-bottom: 0.75rem;
    font-size: 6.25rem;
    text-shadow: none;
  }
  .hero .content h1 span {
    font-size: 0.4em;
    vertical-align: super;
  }
  .hero .button-stack {
    gap: 1rem;
    width: 14.5rem;
    margin-block: 3rem calc(3rem + var(--h-page-dots));
  }
  .hero .long-arrow {
    display: block;
    bottom: -3rem;
    right: calc(3rem - 6px);
    z-index: 1;
  }

  /* Product Technology */
  section.technology {
    --h-decoration: 0.75rem;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr 1fr;
    column-gap: 3rem;
    row-gap: calc(3rem + var(--h-decoration));

    padding-inline: 3rem;
    padding-block: 3rem calc(3rem + var(--h-gridOffset));
  }
  .technology .card {
    position: relative;

    height: 100%;
    padding-inline: 4.5rem;
    padding-block: 5rem;
    background: white;

    transition: opacity ease-in-out var(--t-transition-duration),
      transform ease-in-out var(--t-transition-duration);
  }
  .technology .card.innovation::after,
  .technology .card.lacreon::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M6.55958 11.6668C6.32042 12.1124 5.68061 12.1124 5.44144 11.6668C4.87727 10.6141 4.15161 9.62576 3.26344 8.73759C2.37527 7.84942 1.38693 7.12375 0.334213 6.55958C-0.111404 6.32042 -0.111404 5.68061 0.334213 5.44144C1.38693 4.87727 2.37527 4.15161 3.26344 3.26344C4.15161 2.37527 4.87727 1.38693 5.44144 0.334213C5.68061 -0.111404 6.32042 -0.111404 6.55958 0.334213C7.12375 1.38693 7.84942 2.37527 8.73759 3.26344C9.62576 4.15161 10.6141 4.87727 11.6668 5.44144C12.1124 5.68061 12.1124 6.32042 11.6668 6.55958C10.6141 7.12375 9.62576 7.84942 8.73759 8.73759C7.84942 9.62576 7.12375 10.6141 6.55958 11.6668Z' fill='%23092F87'/%3E%3C/svg%3E");
    position: absolute;
    bottom: calc(-1.7rem - var(--h-decoration));
    width: var(--h-decoration);
  }
  .technology .card.lacreon {
    margin: 0;
    border-radius: 0;
    translate: 0 var(--h-gridOffset);
    transition: opacity ease-in-out var(--t-transition-duration),
      transform ease-in-out var(--t-transition-duration);
  }
  .technology .card.lacreon::before {
    display: none;
  }
  .technology .card.credibility {
    translate: 0 var(--h-gridOffset);
  }
  .technology .card h2 {
    font-size: 2.5rem;
  }
  .technology .card-hidden {
    opacity: 0;
    transform: translateY(5rem);
    transition: none !important;
  }

  /* App Promo */
  section.app-promo .app-promo-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;

    padding: 3rem;
  }
  .app-promo .headline {
    grid-row: span 2;
    align-self: stretch;
    gap: 1.5rem;
    padding: 4rem;
  }
  .app-promo .headline h3 {
    display: flex;
    flex-direction: column;
    width: auto;

    font-size: 2.5rem;
    line-height: 120%;
  }
  .app-promo .headline h3 span:nth-child(1) {
    translate: 1em;
  }
  .app-promo .headline h3 span:nth-child(2) {
    translate: -1.5em;
  }
  .app-promo .headline h3 span:nth-child(3) {
    translate: 2.25em;
  }
  .app-promo .illustration::after {
    width: 18rem;
    translate: 0 -3.75rem;
  }
  .app-promo .illustration .app-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;

    aspect-ratio: 0.5;

    background-image: url("../images/img_bg-phone.png");
    background-size: 100%;
    background-position: center;
  }
  .app-promo .illustration p {
    display: block;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
  }
  .app-promo .illustration .app-store-badge {
    display: block;
    width: 130px;
    margin-inline: 2rem;
  }
  .app-promo .selling-points {
    align-self: stretch;
  }
  .app-promo .cta {
    grid-column: auto;
    align-self: stretch;
  }
  .app-promo .cta-wrapper {
    gap: 2rem;
    max-width: 280px;
  }

  /* Shop Now */
  section.shop-now .shop-now-wrapper {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 4rem;
    padding-inline: 7.5rem;
    padding-top: 0;
  }
  .shop-now .decoration {
    position: absolute;
    left: 3rem;

    display: block;
    height: 60%;
    border-right: thin solid white;

    translate: 0 -10%;
    z-index: 1;
  }
  .shop-now .decoration::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' fill='none'%3E%3Cpath d='M7.88257 2.07244L7.77686 2.27337C7.00325 3.74917 7.00325 5.51061 7.77686 6.98642L7.88257 7.18734C8.32923 8.04006 7.41001 8.95999 6.55729 8.51263C4.95547 7.67321 3.04421 7.67321 1.44239 8.51263C0.589668 8.95929 -0.330259 8.04006 0.117103 7.18734L0.222817 6.98642C0.996424 5.51061 0.996424 3.74917 0.222817 2.27337L0.117103 2.07244C-0.330259 1.21972 0.588968 0.300498 1.44169 0.747159C3.04351 1.58657 4.95477 1.58657 6.55659 0.747159C7.40931 0.300498 8.32923 1.21972 7.88187 2.07244H7.88257Z' fill='white'/%3E%3C/svg%3E");
    position: absolute;
    bottom: 0;
    width: 0.5rem;
    translate: -50% 2.5rem;
  }
  .shop-now-wrapper > .content {
    padding-block: 4rem 5rem;
    margin-bottom: 0;
  }
  .shop-now .illustration {
    gap: 0;
    grid-row: span 2;
  }
  .shop-now .illustration img {
    width: 100%;
  }
  .shop-now .button-stack {
    align-self: stretch;
    grid-row: 1 / span 2;
    grid-column: 2;
    justify-content: space-between;
  }
  .shop-now .button-stack.no-promo {
    align-self: center;
  }
  .shop-now .button-stack .separator {
    display: block;
    height: 0.75rem;
    translate: 0 0.5rem;
  }
  .shop-now .details p {
    max-width: 250px;
  }
  .shop-now .online-stores {
    translate: 0 1rem;
  }

  .shop-now .promo {
    grid-column: span 2;
    padding-block: 4rem;
  }

  .shop-now .coupon {
    padding-block: 0;
    row-gap: 0;
  }
  .shop-now .coupon::before {
    grid-row: 2;
  }

  .shop-now .coupon img {
    grid-row: span 1;
    margin-block: 1.5rem;
  }
  .shop-now .coupon h5 {
    grid-row: 1;
    grid-column: span 2;

    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    text-align: center;
  }
  .shop-now .coupon p {
    align-self: center;
    font-size: 1rem;
  }
  .shop-now .coupon .btn {
    grid-column: span 2;
    margin-top: 0;
    margin-bottom: 1.5rem;
  }

  /* Shop Now — Promo Compact */
  .shop-now .promo.compact {
    grid-row: 2;
    grid-column: 2;
    padding-block: 0 5rem;
  }
  .shop-now .promo.compact::before {
    display: none;
  }
  .shop-now .promo.compact .coupon {
    grid-template-rows: repeat(2, auto);
    row-gap: 0.75rem;
    column-gap: 1rem;
    padding: 1rem;
  }
  .shop-now .promo.compact .coupon::before {
    grid-row: unset;
  }
  .shop-now .promo.compact .coupon img {
    grid-row: span 2;
    margin: 0;
  }
  .shop-now .promo.compact .coupon h5 {
    grid-row: unset;
    grid-column: unset;
    margin-bottom: 0;
    font-size: 1.1rem;
    text-align: left;
  }
  .shop-now .promo.compact .coupon p {
    align-self: center;
    font-size: 1rem;
  }
  .shop-now .promo.compact .coupon .btn {
    margin-top: 0.25rem;
    margin-bottom: 0;
  }

  /* Discover */
  .discover .splash {
    max-width: none;
  }
  .discover .splash h4 {
    margin-bottom: 2.5rem;
    font-size: 2.75rem;
  }
  .discover .splash .model {
    max-width: 560px;
  }
  .discover .splash .flower {
    position: absolute;
    display: block;
    width: 560px;

    transform: rotate(33deg);
    z-index: -1;

    user-select: none;
    pointer-events: none;
    will-change: transform;
  }
  .discover .splash .flower.left {
    left: -500px;
    top: -210px;
  }
  .discover .splash .flower.right {
    right: -440px;
    top: 520px;
  }
  .discover .splash .long-arrow {
    display: block;
    bottom: -11rem;
    right: -6px;
  }
  section.discover .traits {
    column-gap: 4rem;
    row-gap: 2rem;
    padding-block: 2rem;
    max-width: 820px;
  }
  .discover .trait {
    max-width: 360px;
  }
  .discover .trait p {
    max-width: 320px;
  }

  /* Product Range */
  section.product-range .product-range-wrapper {
    padding-block: 6rem 7rem;
  }
  .product-range h3 {
    max-width: 400px;
    font-size: 3rem;
  }
  .product-range .product-stack {
    gap: 2.25rem;
  }
  .product-range .product-stack img {
    height: 14rem;
  }

  /* Try Lenses */
  section.try-lenses .try-lenses-wrapper {
    --w-headline-width: 720px;

    gap: 4rem;
    padding-block: 7rem 5rem;
  }
  .try-lenses .illustration {
    position: absolute;
    display: grid;
    gap: 7.5rem;

    width: var(--w-headline-width);
    translate: 0 -4rem;
  }
  .try-lenses .illustration .model {
    display: block;
    height: 8.75rem;
  }
  .try-lenses .illustration .lens {
    height: 7.5rem;
    justify-self: end;
  }
  .try-lenses h3 {
    width: var(--w-headline-width);
    z-index: 1;
  }

  /* Summary */
  .summary .button-bar {
    padding-inline: 3rem;
    padding-block: 2rem 0;
  }
  .summary .heading {
    padding-block: 4rem 7.5rem;
  }
  .summary .bean {
    left: -17rem;
    top: -12rem;

    width: 30rem;
  }
  .summary .decoration {
    position: absolute;
    left: 50%;
    bottom: 0;

    display: grid;
    place-items: center;

    z-index: 5;
  }
  .summary .decoration img {
    position: absolute;
    width: 6rem;
    animation: ring-rotate 60s linear infinite forwards;
  }
  .summary .decoration svg {
    height: 1rem;
    fill: none;
    stroke: var(--cobalt);
    stroke-width: 1.5;
    stroke-miterlimit: 10;
    stroke-linecap: round;
  }

  /* Product Selector */
  section.product-selector .product-selector-wrapper {
    grid-template-columns: 500px auto;
    max-width: 1440px;
    height: 600px;
    padding-bottom: 0;
  }
  .product-selector .on-eye-image {
    grid-row: span 3;
  }
  .product-selector .on-eye-image img {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
    object-position: center;
  }
  .product-selector .description {
    align-self: end;

    grid-row: 1;
    grid-column: 2;
    padding-inline: 3rem;
    padding-block: 0 1.5rem;

    justify-content: end;
    height: 330px;
  }
  .product-selector .description h5 {
    font-size: 1.25rem;
  }
  .product-selector .lens-tray {
    align-self: end;
    padding-inline: 3rem;
  }
  .product-selector .lens-tray::after {
    left: 50%;
    top: 0;
    bottom: unset;

    width: calc(100% - 6rem);
    translate: -50%;
    opacity: 0.3;
  }
  .product-selector .button-stack {
    align-self: end;
    flex-direction: row;
    justify-content: center;
    padding-block: 1.5rem 4rem;
  }

  /* Features */
  .features .feature-list {
    padding: 4rem;
  }

  /* Specs */
  section.specs {
    background: var(--cloud);
  }
  section.specs .specs-wrapper {
    flex-direction: row;
    column-gap: 6rem;
    padding: 4rem;
  }
  #specs-toggle:not(:checked) ~ .spec-list {
    grid-template-rows: 1fr;
  }
  .specs .specs-bar {
    display: none;
  }
  .specs .spec-list {
    border-bottom: none;
  }
  .specs .spec-list h6 {
    display: block;

    padding-block: 0.75rem;
    padding-inline: 0.2rem;
    border-bottom: thin solid var(--canary);

    color: var(--canary);
    font-size: 1.5rem;
  }
  .specs .spec-list-wrapper {
    padding-inline: 0;
    padding-block: 3rem;
  }
  .specs .spec-item:first-child {
    padding-top: 0;
  }
  .specs .spec-item:last-child {
    padding-bottom: 0;
  }

  .specs .illustration {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding-bottom: 3rem;
  }
  .specs .illustration img {
    width: 100%;
    max-width: 220px;
  }
  .specs .illustration h3 {
    margin-top: -2.5rem;
    color: var(--coral);
  }
  .specs .decoration {
    position: absolute;
    right: calc(4rem + 2.5rem);
    top: calc(4rem + 2.5rem);

    display: grid;
    place-items: center;
  }
  .specs .decoration img {
    position: absolute;
    width: 5rem;
    rotate: 45deg;
  }
  .specs .decoration svg {
    fill: var(--cobalt);
    height: 0.5rem;
  }

  /* Lens Wear */
  section.lens-wear {
    padding-block: 4rem;
    padding-inline: 3rem;
  }
  .lens-wear .heading {
    flex-direction: row;
    align-items: center;
    padding-bottom: 2.75rem;
  }
  .lens-wear .heading h3 {
    margin-bottom: 0;
  }
  .lens-wear .heading svg,
  .lens-wear .heading p {
    display: none;
  }
  .lens-wear .heading img {
    display: block;
    height: 13rem;
    margin-left: 3rem;
  }
  .lens-wear .tab {
    font-size: 1.25rem;
  }
  .lens-wear .tab svg {
    translate: 0 0.3rem;
  }
  .lens-wear .instructions {
    max-width: 1080px;
  }
  .lens-wear .instructions-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;

    column-gap: 1.5rem;
    row-gap: 3rem;
  }
  .lens-wear .instructions-wrapper .step {
    align-items: start;
  }
  .lens-wear .step img {
    width: 7.5rem;
  }
  .lens-wear .step .details .number {
    display: block;
    margin-bottom: 0.75rem;

    color: var(--cobalt);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1rem;
    letter-spacing: 0.1em;
  }

  /* Virtual Mirror */
  section.virtual-mirror {
    overflow-x: hidden;
    overflow-y: visible;
  }
  .virtual-mirror-wrapper {
    position: relative;

    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: 1fr auto;
    column-gap: 2.25rem;

    padding-inline: 3rem;
    padding-block: 1.5rem 3rem;

    z-index: 1;
  }
  .virtual-mirror h3 {
    position: absolute;
    left: 1rem;
    top: 7.5em;

    display: block;

    color: white;
    font-size: 3rem;
    line-height: 85%;
    transform-origin: top left;
    rotate: -90deg;
  }
  .virtual-mirror .blob {
    position: absolute;
    left: 0;

    display: block;
    height: 36rem;
    translate: -19rem;

    z-index: -1;
  }
  .virtual-mirror .cam-feed {
    grid-row: span 2;
    height: clamp(605px, calc(90vh - 8rem), 640px);
  }
  .virtual-mirror .tab-controls {
    display: none;
  }
  .virtual-mirror .lens-tray {
    display: flex;
    flex-direction: column;
    min-width: 400px;
  }
  .virtual-mirror .lens-tray p {
    display: block;

    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    border-bottom: thin solid var(--cobalt);

    color: var(--cobalt);
    font-weight: 400;
    text-align: left;
  }
  .virtual-mirror .lens-tray .collection {
    flex-wrap: wrap;
    justify-content: start;
    gap: 1.25rem;

    padding-inline: 0;
    padding-block: 0 2rem;

    translate: 0 0;
    overflow: visible;
  }
  .virtual-mirror .lens-tray figure {
    gap: 1rem;
  }
  .virtual-mirror .lens-tray figure .selection-ring {
    width: 3.5rem;
    border: 1.5px solid transparent;
  }
  .virtual-mirror .lens-tray figure.active .selection-ring {
    border: 1.5px solid var(--cobalt);
    scale: 1;
  }
  .virtual-mirror .lens-tray figure img {
    width: 2.5rem;
  }
  .virtual-mirror .button-stack {
    padding-inline: 0;
  }

  .vm-modal {
    padding: 4rem;
  }
  .vm-modal .virtual-mirror-wrapper {
    padding-right: 2.25rem;
  }
  .vm-modal .virtual-mirror .lens-tray {
    padding-top: 4rem;
  }
  .vm-modal .virtual-mirror .close-btn {
    border: thin solid var(--caulk);
    background: var(--cloud);
  }
  @media (any-hover: hover) {
    .vm-modal .virtual-mirror .close-btn:hover {
      background: var(--caulk);
      border: 0;
    }
  }

  /* Related */
  section.related {
    padding-block: 4rem;
  }

  /* References */
  aside.reference .reference-wrapper {
    padding-inline: 3rem;
  }

  /* Footer */
  footer .footer-wrapper {
    padding-inline: 3rem;
  }
}

/* Large Laptops & Wider */
@media screen and (min-width: 1400px) {
  /* Global */
  main {
    font-size: 20px;
  }
  .btn.primary,
  .btn.secondary,
  .btn.tertiary {
    font-size: 1rem;
  }
  h3 {
    font-size: 6rem;
  }
  h6 {
    font-size: 1.35rem;
  }

  /* Hero */
  .hero .content h1 {
    margin-bottom: 1.5rem;
  }
  .hero .illustration svg {
    margin-top: -2rem;
    scale: 100% 87%;
  }
  .hero .illustration img {
    width: 550px;
    margin-top: 1.25rem;
    margin-left: 1.5rem;
  }
  .hero .button-stack {
    margin-block: 6rem 0;
  }

  /* Product Technology */
  section.technology {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: unset;

    padding: 0;
  }
  .technology .card {
    --w-card-width: 1024px;

    display: grid;
    grid-template-columns: 27.25rem 15.5rem 21.5rem;
    grid-template-rows: 1fr;
    grid-template-areas: "col1 col2 col3";
    gap: 0;

    width: 100%;
    height: 740px;
    padding-inline: calc((100% - var(--w-card-width)) / 2);
    padding-block: 6rem;

    background: transparent;
    text-align: left;
  }
  .technology .card.invisible-edge {
    background: white;
  }
  .technology .card.lacreon canvas {
    display: block;
  }

  .technology .card h2 {
    display: flex;
    flex-direction: column;

    width: 380px;
    max-width: unset;

    font-size: 4rem;
    z-index: 2;
  }

  .technology .card.innovation h2 {
    align-self: start;
    justify-self: end;
    text-align: right;
    translate: 0 8px;
  }
  .technology .card.innovation h2.hidden {
    translate: 0 calc(8px + 0.5em) !important;
  }
  .technology .card.innovation h2 > span:nth-child(1) {
    translate: -2.625rem;
  }
  .technology .card.innovation h2 > span:nth-child(2) {
    translate: -11rem;
  }
  .technology .card.innovation h2 > span:nth-child(3) {
    translate: -6.5rem;
  }

  .technology .card.lacreon h2 {
    align-self: start;
    justify-self: start;
    line-height: 110%;
    translate: 0 90px;
    z-index: 1;
  }
  .technology .card.lacreon h2.hidden {
    translate: 0 calc(90px + 0.5em) !important;
  }
  .technology .card.lacreon h2 > span:nth-child(2) {
    translate: 15.5rem;
  }
  .technology .card.lacreon h2 > span:nth-child(3) {
    translate: 5.5rem;
  }

  .technology .card.invisible-edge h2 {
    justify-self: start;
    align-self: end;
    line-height: 120%;
    translate: 0 -24px;
  }
  .technology .card.invisible-edge h2.hidden {
    translate: 0 calc(-24px + 0.5em) !important;
  }
  .technology .card.invisible-edge h2 > span:nth-child(1) {
    translate: 4.5rem;
  }
  .technology .card.invisible-edge h2 > span:nth-child(2) {
    translate: 10.5rem;
  }

  .technology .card.credibility h2 {
    justify-self: start;
    line-height: 110%;
    translate: 0 -88px;
  }
  .technology .card.credibility h2.hidden {
    translate: 0 calc(-88px + 0.5em) !important;
  }
  .technology .card.credibility h2 > span:nth-child(1) {
    translate: 2rem;
  }
  .technology .card.credibility h2 > span:nth-child(2) {
    translate: 7rem;
  }

  .technology .card p {
    grid-area: col3;
    max-width: 330px;
  }
  .technology .card.innovation p {
    align-self: end;
  }
  .technology .card.lacreon p {
    align-self: start;
    margin-top: 21.5rem;
    z-index: 1;
  }
  .technology .card.invisible-edge p {
    align-self: start;
    margin-top: 25rem;
  }
  .technology .card.credibility p {
    align-self: start;
    margin-top: 22rem;
  }

  .technology .card svg {
    max-width: unset;
    margin-bottom: 0;
  }
  .technology .card.innovation svg {
    grid-area: col2;
    align-self: end;
    justify-self: start;
    width: 650px !important;
    translate: -160px 12px;
  }
  .technology .card.lacreon svg {
    grid-area: col1;
    align-self: start;
    justify-self: end;
    width: 650px !important;
    translate: 100px 24px;
  }
  .technology .card.invisible-edge svg {
    grid-area: col2;
    align-self: end;
    justify-self: start;
    width: 540px !important;
    translate: -100px -88px;
  }
  .technology .card.credibility svg {
    grid-area: col1;
    justify-self: end;
    width: 640px !important;
    translate: 56px;
  }

  .technology .card.innovation::after,
  .technology .card.lacreon::after {
    display: none;
  }
  .technology .card-hidden {
    opacity: 1;
    transform: unset;
    transition: unset;
  }

  /* App Promo */
  section.app-promo .app-promo-wrapper {
    grid-template-columns: 5fr 3fr;
  }
  .app-promo .selling-points li {
    width: 280px;
  }

  /* Shop Now */
  .shop-now .details p {
    max-width: 300px;
  }
  .shop-now .coupon {
    max-width: 480px;
  }
  .shop-now .coupon h5 {
    font-size: 1.75rem;
  }
  .shop-now .coupon p {
    font-size: 1em;
  }

  /* Shop Now — Promo Compact */
  .shop-now .promo.compact .coupon h5 {
    font-size: 1.5rem;
  }

  /* Discover */
  .discover .splash {
    padding-block: 2rem;
  }
  .discover .splash h4 {
    margin-bottom: 2.5rem;
    font-size: 4rem;
  }
  .discover .splash .model {
    max-width: 700px;
  }
  .discover .splash .flower {
    width: 640px;
  }
  .discover .splash .flower.left {
    left: -550px;
    top: -230px;
  }
  .discover .splash .flower.right {
    right: -490px;
    top: 680px;
  }

  /* Product Range */
  section.product-range .product-range-wrapper {
    grid-template-rows: auto;
    grid-template-columns: repeat(4, 1fr);
    padding-block: 10rem 10.5rem;
  }
  .product-range h3 {
    align-self: center;
    font-size: 4rem;
  }
  .product-range .product-stack img {
    height: 16rem;
  }

  /* Try Lenses */
  .try-lenses .illustration {
    gap: 8rem;
    translate: 3.5rem -4.5rem;
  }
  .try-lenses .illustration .model {
    translate: 2rem;
  }

  /* Summary */
  .summary .heading {
    max-width: 960px;
    padding-block: 3.5rem 10rem;
  }
  .summary .heading h5 {
    font-size: 1.5rem;
  }
  .summary .heading h3 {
    font-size: 4rem;
  }
  .summary .bean {
    left: -15rem;
    top: -8rem;
    width: 30rem;
  }

  /* Product Selector */
  section.product-selector .product-selector-wrapper {
    grid-template-columns: 640px auto;
    grid-template-rows: auto 9.5rem 12rem;
    height: 760px;
  }
  .product-selector .description {
    max-width: 580px;
    padding-bottom: 2.5rem;
  }
  .product-selector .lens-tray {
    padding-top: 2rem;
  }
  .product-selector .description h5 {
    font-size: 1.5rem;
  }
  .product-selector .description h2 {
    font-size: 4rem;
  }
  .product-selector .button-stack {
    padding-bottom: 5rem;
  }

  /* Features */
  .features .feature-list {
    padding-inline: 4rem;
    padding-block: 7rem;
  }
  .features .feature-item .separator {
    margin-bottom: 0.5rem;
  }
  .features .feature-item svg {
    width: 96px;
    stroke-width: 1.5;
  }
  .features .details {
    gap: 1.5rem;
  }
  .features .details p {
    max-width: 320px;
  }

  /* Specs */
  .specs .spec-list h6 {
    font-size: 2rem;
  }
  .specs .illustration img {
    max-width: 320px;
  }
  .specs .spec-item {
    gap: 1.5rem;
  }
  .specs .spec-item img {
    translate: 0 0.1rem;
  }
  .specs .spec-item p {
    font-size: 1rem;
  }

  /* Lens Wear */
  section.lens-wear {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 6rem;

    padding-inline: 4rem 0;
    padding-block: 5rem 6rem;
  }
  .lens-wear .heading {
    flex-direction: column;
    gap: 5rem;
    grid-row: span 2;
    padding: 0;
  }
  .lens-wear .heading img {
    height: 20rem;
    margin-left: 0;
  }
  .lens-wear .tab-controls {
    margin-block: 1rem 2rem;
  }
  .lens-wear .instructions {
    align-self: end;
  }
  .lens-wear .instructions-wrapper {
    padding-inline: 0 4rem;
    padding-block: 0;
  }
  .lens-wear .instructions-wrapper .step {
    font-size: 1rem;
  }

  /* Virtual Mirror */
  .virtual-mirror-wrapper {
    grid-template-columns: auto 1fr;
    column-gap: 2.25rem;

    padding-inline: 3rem;
    padding-block: 4rem;
  }
  .virtual-mirror h3 {
    display: flex;
    flex-direction: column;
    font-size: 4rem;
    translate: -3.5rem -10rem;
  }
  .virtual-mirror h3 span:first-child {
    translate: -5rem;
  }
  .virtual-mirror .blob {
    translate: -17rem;
  }
  .virtual-mirror .cam-feed {
    width: 500px;
  }
  .virtual-mirror .lens-tray figure .selection-ring {
    width: 4.5rem;
  }
  .virtual-mirror .lens-tray figure img {
    width: 3.5rem;
  }

  /* Related */
  .related .illustration img {
    height: 18rem;
  }
  .related p {
    max-width: 400px;
  }
}

@media screen and (min-width: 1500px) {
  /* Product Selector */
  .product-selector .on-eye-image img {
    height: calc(100% - 7rem);
    border: thin solid var(--caulk);
  }
}

/* Ultra-wide Formats */
@media screen and (min-width: 1900px) {
  /* Discover */
  .discover .splash .flower {
    width: 320px;
  }
  .discover .splash .flower.left {
    left: -120px;
    top: -20px;
  }
  .discover .splash .flower.right {
    right: -120px;
    bottom: 20px;
  }
}

/* ANIMATIONS */
@keyframes ring-rotate {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}