:root {
  --indigo: #246443;
  --indigo-deep: #174B31;
  --lime: #C5EDD4;
  --charcoal: #18251D;
  --white: #FAFBF8;
  --mist: #E7EDE5;
  --slate: #526056;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Arial Narrow", "Aptos Display", Impact, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}
a { color: inherit; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.65rem 0.9rem;
  background: var(--lime);
  border-radius: 0.4rem;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1440px, calc(100% - 3rem));
  margin: 0 auto;
  min-height: 6.6rem;
}
.brand {
  display: inline-block;
  text-decoration: none;
}
.brand-logo { display: block; width: auto; height: 3.7rem; object-fit: contain; }

.site-nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.7rem); font-size: 0.9rem; font-weight: 650; }
.site-nav > a:not(.nav-cta) { text-decoration: none; }
.site-nav > a:not(.nav-cta):hover { color: var(--indigo); }
.nav-cta { padding: 0.67rem 0.95rem; background: var(--charcoal); color: var(--white); text-decoration: none; border-radius: 0.3rem; }
.nav-cta:hover { background: var(--indigo); }
.menu-toggle { display: none; background: none; border: 0; padding: 0.5rem; }
.menu-toggle span { display: block; width: 1.45rem; height: 2px; margin: 0.27rem; background: var(--charcoal); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.93fr) minmax(520px, 1.07fr);
  align-items: center;
  min-height: min(760px, calc(100vh - 6.6rem));
  max-width: 1536px;
  margin: 0 auto;
  padding: 1.8rem max(1.5rem, calc((100vw - 1440px) / 2)) 4.7rem;
  overflow: hidden;
}
.hero-copy { position: relative; z-index: 1; max-width: 41rem; padding: 2.6rem 1rem 2.6rem 0; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.56rem;
  margin: 0 0 1.1rem;
  color: var(--indigo);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.eyebrow span { width: 0.65rem; height: 0.65rem; background: var(--lime); border-radius: 50%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; letter-spacing: -0.055em; line-height: 0.91; }
h1 { max-width: 10.2em; margin-bottom: 1.3rem; font-size: clamp(3.65rem, 6.65vw, 6.25rem); }
h1 em, h2 em { color: var(--indigo); font-style: normal; }
.hero-lede { max-width: 34rem; margin-bottom: 2rem; color: var(--slate); font-size: 1.12rem; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.3rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.65rem;
  min-height: 3.3rem;
  padding: 0.8rem 1.1rem 0.8rem 1.25rem;
  border: 0;
  border-radius: 0.25rem;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease;
}
.button:hover { transform: translateY(-2px); }
.button b { font-size: 1.1rem; line-height: 0; }
.button-primary { background: var(--indigo); color: var(--white); }
.button-primary:hover { background: var(--indigo-deep); }
.button-dark { width: 100%; background: var(--charcoal); color: var(--white); }
.button-dark:hover { background: var(--indigo); }
.button-lime { background: var(--lime); color: var(--charcoal); }
.button-lime:hover { background: #d2ff74; }
.text-link { font-size: 0.92rem; font-weight: 750; text-decoration: none; }
.text-link span { margin-left: 0.35rem; color: var(--indigo); }
.text-link:hover { color: var(--indigo); }
.hero-note { margin: 2rem 0 0; color: #777; font-size: 0.8rem; }

.hero-visual {
  position: relative;
  align-self: center;
  width: 100%;
  aspect-ratio: 3 / 2;
  min-height: 0;
}
.hero-visual::before {
  position: absolute;
  inset: 8% -6% 3% 6%;
  z-index: -1;
  background: var(--indigo);
  border-radius: 50% 15% 45% 10%;
  transform: rotate(-4deg);
  content: "";
}
.hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: normal;
  background: var(--white);
  border-radius: 1.6rem;
  box-shadow: 0 1.8rem 4rem rgba(39, 31, 109, 0.2);
}

.signal-band {
  display: grid;
  grid-template-columns: 0.6fr 1.6fr 0.8fr;
  align-items: center;
  gap: 1.2rem;
  padding: 1.15rem max(1.5rem, calc((100vw - 1440px) / 2));
  background: var(--charcoal);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.015em;
}
.signal-band p { margin: 0; }
.signal-band p:nth-child(2) { color: var(--lime); text-align: center; font-size: 1rem; }
.signal-band p:last-child { text-align: right; }

.section { padding: clamp(5rem, 10vw, 9rem) max(1.5rem, calc((100vw - 1240px) / 2)); }
.how { background: #EDF4EC; overflow: hidden; }
.section-intro { max-width: 27rem; }
.how-intro { max-width: 45rem; }
.how-intro > p:last-child { max-width: 42rem; }
h2 { margin-bottom: 1.25rem; font-size: clamp(2.9rem, 5vw, 5rem); }
.section-intro > p:last-child, .assortment-copy > p:not(.eyebrow), .location-copy > p:not(.eyebrow) { color: var(--slate); font-size: 1.04rem; line-height: 1.65; }
.experience-layout { display: grid; grid-template-columns: minmax(16rem, .66fr) minmax(0, 1.34fr); gap: clamp(2rem, 5vw, 5rem); align-items: stretch; margin-top: clamp(2.5rem, 5vw, 4.4rem); }
.experience-machine { position: relative; display: grid; min-height: 35rem; margin: 0; padding: 1.2rem 1.2rem 0; overflow: hidden; border: 1px solid rgba(90, 75, 255, .16); border-radius: 1.1rem; background: linear-gradient(150deg, #ffffff 0%, #e1defc 100%); box-shadow: 0 1.3rem 2.6rem rgba(49, 42, 116, .12); }
.experience-machine::before { position: absolute; top: -5.5rem; right: -5.5rem; width: 12rem; aspect-ratio: 1; border-radius: 50%; background: var(--lime); content: ""; }
.experience-machine img { position: relative; z-index: 1; align-self: end; width: 100%; max-width: 27rem; max-height: 34rem; margin: 0 auto; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 .85rem .6rem rgba(41, 37, 73, .17)); }
.experience-machine figcaption { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: .75rem; padding: .8rem .1rem .95rem; color: var(--charcoal); font-size: .69rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.experience-machine figcaption span:last-child { color: var(--indigo); text-align: right; }
.experience-flow { min-width: 0; }
.experience-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.experience-steps li { display: grid; grid-template-rows: minmax(13.5rem, 1fr) auto; overflow: hidden; border: 1px solid rgba(36, 36, 36, .1); border-radius: .82rem; background: var(--white); box-shadow: 0 .8rem 1.8rem rgba(36, 36, 36, .05); }
.experience-media { position: relative; display: flex; align-items: center; justify-content: center; min-height: 13.5rem; overflow: hidden; background: #ddd9ff; }
.experience-media-promo { padding: .8rem; background: linear-gradient(160deg, #cfc9ff, #f5f5ff); }
.promo-screen { position: relative; width: auto; height: 24rem; max-height: calc(100% - 1.6rem); aspect-ratio: 9 / 16; overflow: hidden; border: .34rem solid #18251D; border-radius: .14rem; background: #FAFBF8; box-shadow: 0 .75rem 1.35rem rgba(36, 36, 36, .18); }
.promo-screen > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.promo-brand-lockup { position: absolute; top: .46rem; left: .46rem; z-index: 3; display: grid; gap: .12rem; width: calc(100% - .92rem); padding: .42rem .48rem .46rem; overflow: hidden; border: 1px solid rgba(90, 75, 255, .2); background: rgba(255, 255, 255, .96); color: var(--charcoal); box-shadow: 0 .24rem .78rem rgba(36, 36, 36, .18); }
.promo-brand-lockup::after { position: absolute; right: -.45rem; bottom: -.65rem; width: 2.55rem; height: .68rem; border-radius: 999px; background: var(--lime); content: ""; transform: rotate(-40deg); }
.promo-brand-kicker { color: var(--indigo); font-size: .41rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.promo-brand-lockup strong { position: relative; z-index: 1; font-family: var(--font-display); font-size: 1.55rem; font-weight: 950; line-height: .68; letter-spacing: -.085em; text-transform: uppercase; }
.promo-brand-lockup strong em { color: var(--indigo); font-style: normal; }
.promo-brand-line { position: relative; z-index: 1; padding-top: .22rem; border-top: 1px solid rgba(36, 36, 36, .12); font-size: .43rem; font-weight: 780; line-height: 1.16; }
.promo-brand-line b { color: var(--indigo); }
.promo-message { position: absolute; right: .46rem; bottom: .46rem; z-index: 3; display: grid; gap: .08rem; min-width: 5.25rem; padding: .4rem .48rem; border-left: .18rem solid var(--lime); background: rgba(36, 36, 36, .9); color: var(--white); box-shadow: 0 .22rem .7rem rgba(36, 36, 36, .2); }
.promo-message b { color: var(--lime); font-size: .42rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.promo-message strong { font-size: .64rem; line-height: 1.02; letter-spacing: -.035em; }
.promo-message i { color: #d6d3ff; font-size: .39rem; font-style: normal; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.promo-play, .product-play { position: absolute; z-index: 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding-left: .14rem; border: .15rem solid rgba(255, 255, 255, .92); border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--charcoal); box-shadow: 0 .35rem .9rem rgba(36, 36, 36, .22); font-size: .9rem; line-height: 1; }
.promo-play { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.experience-media-catalog { padding: .8rem; background: linear-gradient(145deg, #e3e0ff, #bdb6f7); }
.catalog-screen { display: grid; grid-template-rows: auto auto auto 1fr; width: auto; height: 24rem; max-height: calc(100% - 1.6rem); min-height: 0; aspect-ratio: 9 / 16; padding: .72rem; border: .34rem solid #18251D; border-radius: .14rem; background: #fbfbff; color: var(--charcoal); box-shadow: 0 .65rem 1.2rem rgba(36, 36, 36, .16); }
.catalog-topbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: .45rem; border-bottom: 1px solid #e1dff0; font-size: .58rem; }
.catalog-topbar strong { color: var(--indigo); font-size: .73rem; letter-spacing: -.04em; }
.catalog-topbar span { color: var(--slate); font-weight: 700; }
.catalog-screen > p { margin: .48rem 0 .35rem; font-size: .67rem; font-weight: 850; letter-spacing: -.025em; }
.catalog-pills { display: flex; flex-wrap: wrap; gap: .18rem; padding-bottom: .45rem; }
.catalog-pills span { flex: 0 0 auto; padding: .16rem .27rem; border-radius: 999px; background: #e9e7ff; color: var(--indigo); font-size: .35rem; font-weight: 800; white-space: nowrap; }
.catalog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .38rem; }
.catalog-item { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto auto; gap: .16rem; min-width: 0; padding: .32rem; border: 1px solid #e5e3ec; border-radius: .3rem; background: #ffffff; font-size: .42rem; font-weight: 750; line-height: 1.1; }
.catalog-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-item b { color: var(--indigo); font-size: .4rem; }
.catalog-item-featured { border-color: rgba(90, 75, 255, .35); background: #f2f1ff; }
.catalog-item img { width: 100%; aspect-ratio: 1; min-height: 0; border-radius: .2rem; object-fit: cover; object-position: center; }
.catalog-art { display: block; width: 100%; min-height: 2.25rem; border-radius: .24rem; }
.catalog-art-phone { background: linear-gradient(135deg, #9ef04d, #dfffc0); }
.catalog-art-beauty { background: radial-gradient(circle at 68% 34%, #f6d2e7 0 25%, transparent 26%), linear-gradient(135deg, #d985b8, #fde3f1); }
.catalog-art-home { background: linear-gradient(135deg, #ffc765, #fff0c9); }
.experience-media-product { padding: .75rem; background: linear-gradient(150deg, #d7d2ff, #f7f7ff); }
.product-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: auto; height: 24rem; max-height: calc(100% - 1.6rem); min-height: 0; aspect-ratio: 9 / 16; overflow: hidden; border: .34rem solid #18251D; border-radius: .14rem; background: #ffffff; box-shadow: 0 .65rem 1.2rem rgba(36, 36, 36, .16); }
.product-screen-top { display: flex; justify-content: space-between; padding: .46rem .58rem; color: var(--slate); font-size: .48rem; font-weight: 800; }
.product-screen-top span:last-child { color: var(--indigo); }
.product-video { position: relative; min-height: 0; overflow: hidden; background: #eceaff; }
.product-video img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.product-play { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.product-details { padding: .48rem .58rem .58rem; }
.product-details > span { display: block; margin-bottom: .12rem; color: var(--indigo); font-size: .43rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.product-details strong { display: block; font-size: .68rem; line-height: 1.05; letter-spacing: -.035em; }
.product-details p { margin: .22rem 0 .4rem; color: var(--slate); font-size: .52rem; font-weight: 750; }
.product-details > .product-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .22rem; margin: 0; }
.product-cart, .product-buy { display: flex; align-items: center; justify-content: center; min-height: 1.42rem; padding: .34rem .36rem; border-radius: 999px; font-size: .43rem; font-weight: 900; white-space: nowrap; }
.product-cart { border: 1px solid #e3e1ea; background: #f3f2f6; color: var(--charcoal); }
.product-buy { gap: .18rem; background: var(--lime); color: var(--charcoal); }
.product-buy b { font-size: .68rem; line-height: 0; }
.experience-copy { padding: 1.25rem 1.15rem 1.35rem; }
.experience-number { display: block; margin-bottom: .8rem; color: var(--indigo); font-size: .67rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.experience-copy h3 { margin-bottom: .68rem; font-size: clamp(1.55rem, 2.1vw, 2rem); }
.experience-copy p { margin: 0; color: var(--slate); font-size: .86rem; line-height: 1.58; }
.experience-after-note { margin: 1rem 0 0; padding: .82rem 1rem; border-left: .24rem solid var(--lime); color: var(--slate); font-size: .84rem; font-weight: 700; }

.assortment { display: grid; grid-template-columns: minmax(16rem, 0.87fr) minmax(18rem, 0.73fr); gap: clamp(3rem, 10vw, 12rem); align-items: center; background: var(--indigo); color: var(--white); }
.assortment .eyebrow { color: var(--lime); }
.assortment-copy > p:not(.eyebrow) { color: rgba(255,255,255,.8); }
.assortment h2 em { color: var(--lime); }
.assortment-art { position: relative; min-height: 27rem; overflow: hidden; border-radius: 1.1rem; background: #c5bff8; isolation: isolate; }
.assortment-art p { position: absolute; z-index: 2; top: 50%; left: 50%; margin: 0; color: var(--charcoal); font-family: var(--display); font-size: clamp(4rem, 8vw, 7rem); font-weight: 900; line-height: .82; letter-spacing: -0.08em; transform: translate(-50%, -50%) rotate(-8deg); }
.assortment-art p span { display: block; }
.orb { position: absolute; border-radius: 50%; }
.orb-one { top: -15%; left: -8%; width: 73%; aspect-ratio: 1; background: var(--lime); }
.orb-two { right: -24%; bottom: -27%; width: 64%; aspect-ratio: 1; background: rgba(248,248,245,.92); }
.orb-three { top: 26%; right: 11%; width: 18%; aspect-ratio: 1; background: var(--white); }
.category-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.category-list li { padding: 0.48rem 0.72rem; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; font-size: 0.79rem; font-weight: 700; }

.location { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 0.72fr); gap: clamp(3rem, 10vw, 10rem); background: #E7EDE5; }
.location-copy { max-width: 36rem; }
.benefit-list { display: grid; gap: 1.25rem; margin: 2.1rem 0 0; padding: 0; list-style: none; }
.benefit-list li { display: grid; grid-template-columns: minmax(10rem, 0.72fr) 1.1fr; gap: 1rem; padding-top: 1.1rem; border-top: 1px solid #b9b9b2; }
.benefit-list b { font-size: 0.88rem; }
.benefit-list span { color: var(--slate); font-size: 0.88rem; line-height: 1.55; }
.partner-form { padding: clamp(1.7rem, 4vw, 3rem); background: var(--white); box-shadow: 0 1.3rem 2.2rem rgba(36,36,36,.07); }
.form-kicker { margin-bottom: 0.8rem; color: var(--indigo); font-size: 0.77rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.partner-form h3 { margin-bottom: 2.1rem; font-size: 2.25rem; }
.partner-form label { display: block; margin: 0 0 1.05rem; font-size: 0.78rem; font-weight: 800; letter-spacing: .02em; }
.partner-form input, .partner-form textarea, .updates-form input { display: block; width: 100%; margin-top: 0.44rem; border: 1px solid #bfbfb8; border-radius: 0.18rem; background: transparent; color: var(--charcoal); }
.partner-form input { height: 2.75rem; padding: 0.4rem 0.65rem; }
.partner-form textarea { min-height: 5.6rem; padding: 0.65rem; resize: vertical; }
.partner-form input:focus, .partner-form textarea:focus, .updates-form input:focus { outline: 3px solid rgba(90,75,255,.25); border-color: var(--indigo); }
.optional { color: #777; font-weight: 500; }
.form-fineprint { margin: 1rem 0 0; color: #777; font-size: .73rem; }

.updates { display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: var(--charcoal); color: var(--white); }
.updates .eyebrow { color: var(--lime); }
.updates h2 { max-width: 12em; margin: 0; font-size: clamp(2.5rem, 4.2vw, 4.2rem); }
.updates-form { display: flex; width: min(100%, 30rem); gap: 0.55rem; }
.updates-form input { min-width: 0; height: 3.3rem; margin: 0; padding: 0 .9rem; border-color: #676767; background: #343434; color: var(--white); }
.updates-form input::placeholder { color: #c4c4c4; }
.updates-form .button { flex: 0 0 auto; white-space: nowrap; }

.site-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 1.75rem; min-height: 12rem; padding: 2.5rem max(1.5rem, calc((100vw - 1440px) / 2)); background: var(--white); }
.brand-footer { align-self: center; }
.brand-footer .brand-logo { height: 3.35rem; }
.site-footer > p { margin: 0; color: var(--slate); font-size: .82rem; }
.site-footer > p:nth-child(2) { align-self: center; font-size: 1rem; font-weight: 720; }
.copyright { text-align: right; }

.thank-you {
  display: grid;
  align-content: center;
  min-height: 100vh;
  max-width: 51rem;
  margin: 0 auto;
  padding: 2rem;
  background: radial-gradient(circle at 88% 18%, var(--lime) 0 7%, transparent 7.2%), var(--white);
}
.thank-you .brand { margin-bottom: clamp(4rem, 12vw, 9rem); }
.thank-you h1 { margin-bottom: 1rem; }
.thank-you > p:not(.eyebrow) { margin-bottom: 2rem; color: var(--slate); font-size: 1.08rem; }
.thank-you .button { width: fit-content; }