/* ============================================================
   Olvé — design tokens & global styles
   ============================================================ */

:root{
  /* colors */
  --ink:          rgb(36,35,30);
  --ink-soft:     rgb(93,96,86);
  --ink-mute:     rgb(137,134,131);
  --cream:        rgb(248,248,244);
  --cream-soft:   rgb(246,244,240);
  --cream-warm:   rgb(252,251,248);
  --line:         rgb(221,218,205);
  --line-strong:  rgb(210,203,187);
  --fill:         rgb(238,238,230);

  --green-900:    rgb(15,46,33);
  --green-800:    rgb(20,76,53);
  --green-700:    rgb(24,88,67);
  --green-200:    rgb(148,181,167);
  --green-50:     rgb(237,242,231);

  --terra:        rgb(166,112,57);
  --terra-soft:   rgb(187,135,83);

  --shadow-sm:    0 6px 18px rgba(49,52,43,.06);
  --shadow-md:    0 12px 32px rgba(49,52,43,.08);
  --shadow-lg:    0 24px 64px rgba(49,52,43,.14);

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-xl: 56px;
  --r-xxl: 120px;

  /* type */
  --f-display: "Fraunces", "Lora", Georgia, serif;
  --f-accent:  "Lora", Georgia, serif;
  --f-script:  "Oleo Script", "Fraunces", serif;
  --f-sans:    "Manrope", "Plus Jakarta Sans", system-ui, sans-serif;

  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-spring: cubic-bezier(.18,.88,.32,1.12);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scrollbar-gutter: stable; }
html.modal-open{ overflow: hidden; }
body{
  margin: 0;
  font-family: var(--f-sans);
  color: var(--ink);
  background: var(--cream);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a{ color: inherit; text-decoration: none; }
img, svg{ display: block; max-width: 100%; }
button{ font: inherit; border: 0; background: transparent; cursor: pointer; color: inherit; }

/* ============================================================
   Layout
   ============================================================ */
.wrap{ width: 100%; max-width: 1320px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 40px); }

/* ============================================================
   Top nav
   ============================================================ */
.nav{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: #F8F8F4;
  border-bottom: 1px solid rgb(248,248,245);
  color: rgb(248,248,245);
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.nav.scrolled{ border-bottom-color: rgba(36,35,30,.06); background: rgba(248,248,244,.92); }
.nav__row{
  display: flex; align-items: center; justify-content: space-between;
  height: clamp(72px, 8vw, 97px);
  gap: 24px;
}
.logo{
  font-family: var(--f-script);
  font-size: clamp(40px, 4.4vw, 56px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: .5px;
}

.nav__links{ display: flex; gap: 28px; align-items: center; }
.nav__link{
  position: relative;
  font-weight: 500; font-size: 15px;
  color: var(--ink-soft);
  padding: 6px 2px;
  transition: color .2s var(--ease-out);
}
.nav__link::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: var(--green-800);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.nav__link:hover{ color: var(--ink); }
.nav__link:hover::after{ transform: scaleX(1); }
@media (max-width: 900px){ .nav__links{ display: none; } }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: 9999px;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  isolation: isolate;
  transition:
    transform .25s var(--ease-spring),
    box-shadow .3s var(--ease-out),
    background-color .2s var(--ease-out),
    color .2s var(--ease-out);
  will-change: transform;
}
.btn::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: 0;
  transition: opacity .25s var(--ease-out);
  z-index: -1;
}
.btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active{ transform: translateY(0) scale(.97); box-shadow: 0 2px 6px rgba(49,52,43,.1); transition-duration: .08s; }
.btn:focus-visible{ outline: 2px solid var(--terra); outline-offset: 3px; }

.btn--primary{ background: var(--green-800); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover{ background: var(--green-700); }

.btn--cream{ background: var(--cream); color: var(--terra); box-shadow: var(--shadow-sm); }
.btn--cream:hover{ background: #fff; }

.btn--ghost{
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--line);
}
.btn--ghost:hover{ background: var(--cream); color: var(--ink); }

.btn--lg{ padding: 22px 44px; font-size: 16px; }

/* arrow inside button */
.btn .arrow{
  width: 14px; height: 14px;
  transition: transform .3s var(--ease-out);
}
.btn:hover .arrow{ transform: translateX(4px); }

/* ripple */
.btn .ripple{
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.35);
  transform: scale(0); opacity: 1;
  animation: ripple .7s var(--ease-out) forwards;
  z-index: -1;
}
.btn--cream .ripple{ background: rgba(166,112,57,.18); }
.btn--ghost .ripple{ background: rgba(36,35,30,.08); }
@keyframes ripple{
  to{ transform: scale(4); opacity: 0; }
}

/* ============================================================
   Tag pill
   ============================================================ */
.tag{
  display: inline-flex; align-items: center;
  padding: 8px 16px;
  border-radius: 9999px;
  background: #fff;
  font-weight: 700; font-size: 15px;
  color: var(--ink-mute);
  box-shadow: 0 2px 10px rgba(49,52,43,.04);
}
.tag--ink{ color: var(--green-900); }

/* ============================================================
   Hero
   ============================================================ */
.hero{
  background: var(--cream);
  border-radius: 0 0 var(--r-xxl) var(--r-xxl);
  padding: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.hero__grid{
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  padding-block: clamp(40px, 6vw, 80px);
}
.hero__grid > * { min-width: 0; }
.hero__illu{
  width: clamp(160px, 20vw, 220px);
  display: block;
  margin-bottom: 24px;
}
.hero__eyebrow{
  display: inline-flex; gap: 6px; align-items: center;
  padding: 8px 14px 8px 8px;
  border-radius: 9999px;
  background: #fff;
  font-size: 14px; font-weight: 600; color: var(--ink-soft);
  box-shadow: 0 2px 10px rgba(49,52,43,.04);
  margin-bottom: 28px;
}
.hero__eyebrow .dot{
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green-50);
  display: grid; place-items: center;
}
.hero__eyebrow .dot::after{
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-800);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%, 100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.4); opacity: .55; }
}

.hero h1{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 5.8vw, 82px);
  line-height: 1.08;
  letter-spacing: -.01em;
  margin: 0 0 28px;
  color: var(--ink);
  text-wrap: balance;
}
.hero h1 .line{ display: block; overflow: hidden; padding: 0.04em 0; }
.hero h1 .line > span{ display: inline-block; white-space: nowrap; }

.hero p.lede{
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0 0 36px;
  max-width: 560px;
  text-wrap: pretty;
}
.hero__cta-row{ display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero__trust{
  display: flex; gap: 10px; align-items: center;
  font-size: 14px; color: var(--ink-mute);
}
.hero__trust .avatars{ display: flex; }
.hero__trust .avatars span{
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--green-50); border: 2px solid var(--cream);
  margin-left: -8px;
}
.hero__trust .avatars span:nth-child(1){ margin-left: 0; background: var(--terra-soft); }
.hero__trust .avatars span:nth-child(2){ background: var(--green-200); }
.hero__trust .avatars span:nth-child(3){ background: var(--green-700); }
.hero__trust .avatars span:nth-child(4){ background: var(--terra); }

/* hero image */
.hero__visual{ display: flex; align-items: flex-end; justify-content: center; background: var(--fill); border-radius: var(--r-lg); overflow: hidden; }
.hero__img{ width: 100%; max-height: 700px; object-fit: contain; object-position: center bottom; display: block; }
.hero__video{ width: 100%; height: 100%; object-fit: contain; object-position: center center; display: block; border-radius: 0; }

/* phone mock */
.phone-stage{
  position: relative;
  aspect-ratio: 610 / 620;
  height: 700px;
  max-height: 78vh;
  background: var(--fill);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid; place-items: center;
  padding: 0 48px;
}
.phone-stage::before, .phone-stage::after{
  content: ""; position: absolute; border-radius: 50%;
  pointer-events: none;
}
.phone-stage::before{
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(148,181,167,.35), transparent 65%);
  top: -10%; right: -15%;
}
.phone-stage::after{
  width: 45%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(187,135,83,.18), transparent 65%);
  bottom: -10%; left: -10%;
}

.phone{
  position: relative;
  width: min(320px, 70%);
  aspect-ratio: 272 / 560;
  border-radius: 36px;
  background: var(--cream-warm);
  box-shadow: 0 24px 64px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.06);
  transform: rotate(-5deg) translateY(30px);
  transition: transform .8s var(--ease-out);
  overflow: hidden;
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 14px;
}
.phone::before{
  content: ""; position: absolute; top: 10px; left: 50%;
  width: 80px; height: 6px; border-radius: 4px;
  background: rgba(36,35,30,.12);
  transform: translateX(-50%);
}
.phone__head{ padding-top: 18px; }
.phone__hello{ font-family: "Plus Jakarta Sans", var(--f-sans); font-weight: 800; font-size: 18px; color: var(--ink); letter-spacing: -.01em; }
.phone__sub{ font-size: 10px; color: var(--ink-soft); margin-top: 4px; line-height: 1.4; }

.phone__aqi{
  position: relative;
  border-radius: 24px;
  background: var(--cream-soft);
  padding: 14px;
  overflow: hidden;
}
.phone__aqi::before{
  content: ""; position: absolute;
  top: -30px; right: -30px;
  width: 170px; height: 100px; border-radius: 9999px;
  background: var(--green-50);
  z-index: 0;
}
.phone__aqi-icon{
  position: relative; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green-50);
  display: grid; place-items: center; color: var(--green-800);
  font-size: 12px;
}
.phone__aqi-label{
  position: relative; z-index: 1;
  font-family: "Plus Jakarta Sans", var(--f-sans); font-weight: 800;
  font-size: 18px; color: var(--green-800);
  margin-top: 32px;
}
.phone__aqi-risk{
  position: relative; z-index: 1;
  margin-top: 14px;
  font-size: 9px; color: var(--ink-soft);
}
.phone__aqi-risk b{ color: var(--green-800); display: block; font-size: 10px; margin-top: 2px; }
.phone__aqi-badge{
  display: inline-block; margin-top: 10px;
  background: var(--green-800); color: #fff;
  border-radius: 9999px;
  padding: 5px 12px; font-size: 8.5px; font-weight: 700; letter-spacing: .05em;
}

.phone__list{ display: flex; flex-direction: column; gap: 8px; }
.phone__item{
  border-radius: 16px; background: #fff;
  border: 1px solid var(--cream-soft);
  padding: 10px; display: flex; flex-direction: column; gap: 6px;
}
.phone__item-head{ display: flex; justify-content: space-between; align-items: center; }
.phone__item-icon{
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--green-50); color: var(--green-800);
  display: grid; place-items: center; font-size: 10px;
}
.phone__item-badge{
  background: var(--green-50); color: var(--green-800);
  padding: 3px 7px; border-radius: 9999px; font-size: 7px; font-weight: 700; letter-spacing: .05em;
  display: inline-flex; align-items: center; gap: 4px;
}
.phone__item-badge::before{
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green-800);
}
.phone__item-title{ font-weight: 700; font-size: 13px; color: var(--ink); margin-top: 2px; }
.phone__bar{
  height: 6px; border-radius: 9999px; background: var(--green-50);
  overflow: hidden;
}
.phone__bar > i{ display: block; height: 100%; background: var(--green-800); border-radius: inherit; width: 0; transition: width 1.4s var(--ease-out) .4s; }
.phone__item-meta{ font-weight: 700; font-size: 8.5px; color: var(--green-800); }
.phone__item-tip{ font-size: 8.5px; color: var(--ink-soft); line-height: 1.3; }

.revealed .phone__bar > i.fill-23{ width: 23%; }
.revealed .phone__bar > i.fill-18{ width: 18%; }
.revealed .phone__bar > i.fill-11{ width: 11%; }

/* hero source rail */
.hero__rail{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0 0 80px;
}
.hero__rail > div{
  text-align: center; padding: 10px 16px;
  position: relative;
}
.hero__rail > div::before{
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 24px;
  background: rgba(166,112,57,.35);
}
.hero__rail > div:first-child::before{ display: none; }
.hero__rail .rl-title{ font-family: var(--f-display); font-size: clamp(15px, 1.2vw, 18px); color: var(--ink); }
.hero__rail .rl-sub{ font-size: 14px; color: var(--ink-mute); margin-top: 4px; }

@media (max-width: 1080px){
  .hero{ border-radius: 0 0 52px 52px; }
}
@media (max-width: 900px){
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__rail{ grid-template-columns: repeat(2, 1fr); gap: 8px 0; padding: 0 0 40px; }
  .hero__rail > div:nth-child(3)::before{ display: none; }
  .hero{ border-radius: 0 0 52px 52px; }
}

/* ============================================================
   Sources section (dark green)
   ============================================================ */
.sources{
  background: var(--green-900);
  color: #fff;
  padding: calc(clamp(80px, 10vw, 128px) + 136px) 0 clamp(80px, 10vw, 148px);
  margin: -136px 0 0;
  position: relative;
  z-index: 1;
}
.sources__head{ max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.sources h2{
  font-family: var(--f-accent); font-weight: 500;
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1.1; margin: 24px 0 20px;
  text-wrap: balance;
}
.sources p.lede{
  font-size: clamp(16px, 1.4vw, 22px); color: rgba(255,255,255,.82);
  line-height: 1.55; max-width: 720px; text-wrap: pretty;
}

.stats{
  display: grid; grid-template-columns: 1fr;
  gap: 0; margin-bottom: 40px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.stat{
  position: relative;
  padding: 32px 8px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
}
.stat__head{ position: relative; }
.stat__n{
  font-family: var(--f-display); font-weight: 300;
  font-size: 24px;
  color: #fff;
  line-height: .95;
  letter-spacing: -.02em;
  position: relative;
  padding-bottom: 8px;
}
.stat__n::after{
  content: ""; position: absolute;
  left: 0; bottom: 0;
  width: 28px; height: 1px;
  background: var(--terra-soft);
}
.stat__rule{ display: none; }
.stat__body{ position: relative; }
.stat__body p{
  font-size: clamp(22px, 2vw, 32px); color: rgba(255,255,255,.94);
  margin: 0; line-height: 1.35;
  text-wrap: pretty;
  font-family: var(--f-display); font-weight: 300;
}
.stat__src{
  font-size: 12px; font-weight: 400;
  color: rgba(187,135,83,.75);
  line-height: 1.4;
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 900px){
  .stat__body{ font-weight: 300; }
}
@media (max-width: 720px){
  .stat{
    grid-template-columns: auto 1fr;
    gap: 16px 24px;
    padding: 24px 0;
  }
  .stat__body{ grid-column: 1 / -1; }
  .stat__src{ grid-column: 1 / -1; text-align: left; margin-top: 4px; }
}

.cta-band{
  background: var(--terra);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(28px, 3vw, 40px);
  display: flex; gap: 32px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.cta-band p{
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.25; margin: 0;
  flex: 1 1 480px;
  text-wrap: pretty;
}

/* ============================================================
   Profiles section (cream)
   ============================================================ */
.profiles{
  background: var(--cream);
  padding: clamp(72px, 8vw, 112px) 0 clamp(60px, 7vw, 80px);
  position: relative;
  z-index: 0;
}
.profiles__head{
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px;
  align-items: end; margin-bottom: 48px;
}
.profiles h2{
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1.05; margin: 20px 0 24px;
  color: var(--ink); letter-spacing: -.01em;
}
.profiles p.lede{
  font-size: clamp(16px, 1.2vw, 20px);
  color: var(--ink-mute); line-height: 1.55; max-width: 560px;
  margin: 0; text-wrap: pretty;
}
.profile-switch{
  display: flex; border-radius: var(--r-md);
  background: #fff; padding: 6px;
  box-shadow: var(--shadow-sm);
  align-self: end;
}
.profile-switch button{
  flex: 1;
  padding: 22px 26px;
  border-radius: calc(var(--r-md) - 6px);
  display: flex; align-items: center; gap: 14px;
  font-size: 15px;
  color: var(--ink-mute);
  transition: background .35s var(--ease-out), color .35s var(--ease-out), transform .2s var(--ease-out);
  text-align: left;
}
.profile-switch button .bullet{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-strong);
  transition: background .3s var(--ease-out);
}
.profile-switch button .pname{
  display: block;
  font-family: var(--f-accent); font-weight: 500;
  font-size: 20px; line-height: 1.1;
  color: inherit;
}
.profile-switch button .psub{ font-size: 14px; color: var(--ink-mute); }
.profile-switch button.is-active{
  background: var(--green-800); color: #fff;
}
.profile-switch button.is-active .bullet{ background: var(--terra-soft); }
.profile-switch button.is-active .pname,
.profile-switch button.is-active .psub{ color: #fff; }
.profile-switch button:hover:not(.is-active){ transform: translateY(-1px); color: var(--ink); }

/* profile compare card */
.compare{
  background: #fff;
  border: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.compare__left{
  padding: 36px; display: flex; gap: 20px; align-items: center;
}
.compare__portrait{
  flex-shrink: 0; width: 130px;
  display: flex; align-items: center; justify-content: center;
  align-self: center;
}
.compare__portrait img{ width: 130px; height: auto; display: block; }
.compare__meta h3{
  font-family: var(--f-display); font-weight: 400;
  font-size: 52px; line-height: 1; margin: 0;
  color: var(--ink);
}
.compare__meta .facts{
  font-size: 16px; color: var(--ink-mute); margin-top: 8px;
  padding-bottom: 24px; border-bottom: 1px solid var(--line);
}
.compare__meta .chip{
  display: block; margin: 24px 0;
  padding: 0; border: 0;
  font-family: var(--f-display); font-size: 22px; color: var(--ink);
  font-weight: 700;
}
.compare__meta .habits{
  font-size: 14px; color: var(--ink-mute); margin-top: 24px; line-height: 1.5;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.compare__right{
  padding: 0; background: transparent;
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  border-left: 1px solid var(--line);
}
.risk{
  display: flex; flex-wrap: wrap;
  gap: 16px 24px; align-items: center;
  padding: 29px 32px 28px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
}
.risk:last-child{ border-bottom: 0; }
.risk__n{
  font-family: var(--f-display); font-weight: 400;
  font-size: 14px; color: var(--ink-mute);
  text-align: center;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.risk__head{ display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; min-width: 0; }
.risk__name{
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(26px, 2.2vw, 34px); color: var(--ink); line-height: 1;
  letter-spacing: -.01em;
}
.risk__sub{
  font-size: 14px; color: var(--ink-mute); line-height: 1.4;
}
.risk__meter{ display: flex; flex-direction: column; gap: 8px; align-items: stretch; flex: 1 1 200px; min-width: 0; }
.risk__bar{
  height: 12px; border-radius: 999px; background: var(--cream-soft);
  overflow: hidden;
}
.risk__bar > i{ display: block; height: 100%; width: 0; border-radius: inherit; transition: width 1.2s var(--ease-out); }
.risk__level{ font-size: 13px; font-weight: 700; text-align: left; letter-spacing: .02em; }
.risk--low .risk__bar > i{ background: var(--green-800); }
.risk--low .risk__level{ color: var(--green-800); }
.risk--mid .risk__bar > i{ background: var(--terra); }
.risk--mid .risk__level{ color: var(--terra); }
.risk--high .risk__bar > i{ background: #c2554a; }
.risk--high .risk__level{ color: #c2554a; }

.profile-pane{ display: none; }
.profile-pane.is-active{
  display: grid;
  grid-template-columns: minmax(320px, 1.1fr) minmax(360px, 1fr);
  animation: paneIn .5s var(--ease-out);
}
@keyframes paneIn{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: none; }
}

@media (max-width: 900px){
  .profiles__head{ grid-template-columns: 1fr; }
  .profile-pane.is-active{ grid-template-columns: 1fr; }
  .compare__right{ padding: 0 24px 28px; border-left: 0; }
  .compare__left{ flex-direction: column; align-items: flex-start; border-bottom: 1px solid #D2CBBB; }
  .compare__portrait{ align-self: flex-start; justify-content: flex-start; }
  .risk{ flex-direction: column; align-items: flex-start; }
  .risk__head, .risk__meter{ flex: 0 0 auto; width: 100%; }
  .profiles{ border-radius: 52px 52px 0 0; margin-top: -52px; padding: 70px 0 80px; }
}

/* ============================================================
   How it works
   ============================================================ */
.how{ background: var(--cream); padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 128px); }
.how__header{
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  max-width: 858px; margin: 0 auto 80px;
}
.how h2{
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1.1; margin: 0;
  color: var(--ink); letter-spacing: -.01em; text-wrap: balance;
}
.how p.lede{
  font-size: clamp(16px, 1.2vw, 20px); color: var(--ink-mute); line-height: 1.55;
  margin: 0; text-wrap: pretty;
}
.how__body{
  display: flex; gap: 80px; align-items: center;
}
.how__cards{
  flex: 1 0 0; display: flex; flex-direction: column; gap: 24px; min-width: 0;
}
.how__card{
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.how__card-head{
  display: flex; align-items: center; gap: 12px;
}
.how__card-icon-sep{
  border-right: 1px solid var(--terra-soft);
  padding-right: 12px; height: 18px;
  display: flex; align-items: center; flex-shrink: 0;
}
.how__card-icon-sep img{ width: 24px; height: 24px; display: block; }
.how__card h3{
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(24px, 2.5vw, 32px); line-height: 1.05;
  margin: 0; color: var(--ink); letter-spacing: -.01em;
}
.how__card p{ margin: 0; color: var(--ink); font-size: 16px; line-height: 1.55; }
/* how phone frame (Figma Container node) */
.how__phone{
  flex-shrink: 0;
  width: clamp(300px, 40%, 530px);
  height: 640px;
  background: var(--fill);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.how__phone-video{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 277px;
  height: 608px;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
@media (max-width: 1080px){
  .how__body{ gap: 48px; }
  .how__phone{ width: clamp(260px, 36%, 440px); height: 520px; }
  .how__phone-video{ width: 237px; height: 521px; }
}
@media (max-width: 900px){
  .how__body{ flex-direction: column; gap: 40px; }
  .how__phone{ width: 100%; height: 480px; }
  .how__phone-video{ width: 219px; height: 480px; }
  .how__header{ margin-bottom: 48px; }
}




/* ============================================================
   About / Créateur
   ============================================================ */
.about{
  background: #fff;
  padding: clamp(80px, 10vw, 128px) 0;
  border-top: 1px solid var(--line);
}
.about .tag{ margin-bottom: 0; }
.about h2{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1.05;
  margin: 20px 0 clamp(32px, 4vw, 56px);
  color: var(--ink);
  letter-spacing: -.01em;
  text-wrap: balance;
  max-width: 760px;
}
.about__body{
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.about__body p{
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
}
.about__punch{
  font-family: var(--f-display) !important;
  font-size: clamp(24px, 2.5vw, 36px) !important;
  font-weight: 300 !important;
  color: var(--ink) !important;
  line-height: 1.2 !important;
  padding: 12px 0 4px;
}
.about__coda{
  color: var(--ink) !important;
  font-weight: 600 !important;
}
.about__contact{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
  max-width: 680px;
  flex-wrap: wrap;
}
.about__contact-name{
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.about__contact-link{
  font-size: 15px;
  color: var(--green-800);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s var(--ease-out);
}
.about__contact-link:hover{ color: var(--green-700); }

/* ============================================================
   Creator / Derrière Olvé
   ============================================================ */
.creator{
  background: var(--cream);
  padding: clamp(80px, 10vw, 128px) 0;
  border-top: 1px solid var(--line);
}
.creator__head{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.creator__head h2{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 62px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  text-wrap: balance;
}
.creator__body{
  display: flex;
  gap: 80px;
  align-items: center;
}
.creator__text{
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.creator__text p{
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.creator__sep{
  width: 24px;
  height: 1.5px;
  background: var(--ink-mute);
  opacity: .45;
}
.creator__visual{
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.creator__illu{
  width: 324px;
  height: 292px;
  border-radius: var(--r-md);
  overflow: hidden;
}
.creator__illu img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1080px){
  .creator__body{ gap: 48px; }
}
@media (max-width: 900px){
  .creator__body{ flex-direction: column-reverse; gap: 40px; }
  .creator__visual{ width: 100%; align-items: flex-start; }
  .creator__illu{ width: 100%; height: 240px; }
}

/* ============================================================
   Early-access CTA (dark)
   ============================================================ */
.early{
  background: var(--green-900);
  color: #fff;
  padding: clamp(80px, 10vw, 128px) 0;
  text-align: center;
}
.early__box{ max-width: 720px; margin: 0 auto; }
.early h2{
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(36px, 4.4vw, 62px); line-height: 1.1;
  margin: 0 0 24px; text-wrap: balance;
}
.early p{
  color: rgba(255,255,255,.78);
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.55; margin: 0 0 32px; max-width: 600px; margin-inline: auto;
}
.early .btn--primary{ background: var(--green-700); }
.early .btn--primary:hover{ background: var(--green-800); }

.early__sub{
  font-size: clamp(14px, 1vw, 16px);
  color: rgba(255,255,255,.55);
  margin: -8px 0 36px;
  letter-spacing: .01em;
}

/* ---- Tester (mini-calculateur) ---- */
.tester{
  margin-top: clamp(48px, 6vw, 72px);
  background: #fff;
  border-radius: var(--r-lg);
  padding: clamp(32px, 5vw, 52px);
  box-shadow: var(--shadow-md);
  text-align: left;
  max-width: 560px;
  margin-inline: auto;
}
.tester__screen{ display: none; }
.tester__screen.is-active{ display: block; }

.tester__label{
  font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 18px;
}
.tester__q{
  font-family: var(--f-display); font-size: clamp(18px, 2vw, 22px);
  color: var(--ink); line-height: 1.3; margin-bottom: 20px;
}
.tester__choices{ display: flex; flex-direction: column; gap: 10px; }
.tester__btn{
  background: var(--fill);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--ink);
  font-size: 15px; font-weight: 500;
  padding: 14px 18px;
  text-align: left;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
}
.tester__btn:hover{ background: var(--green-50); border-color: var(--green-200); transform: translateY(-1px); }
.tester__btn:active{ transform: scale(.97); transition-duration: .08s; }
.tester__btn.is-selected{
  background: var(--green-800); border-color: var(--green-800); color: #fff;
}
.tester__note{
  margin-top: 20px;
  border-left: 2px solid var(--line-strong);
  padding-left: 12px;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.5;
}

/* résultat */
.tester__result-label{ font-size: 13px; color: var(--ink-mute); margin-bottom: 10px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.tester__badge{
  display: inline-block;
  padding: 5px 14px; border-radius: 99px;
  font-size: 13px; font-weight: 600; margin-bottom: 28px;
}
.tester__badge--low{ background: rgba(74,179,126,.15); color: #2d7a52; }
.tester__badge--mid{ background: rgba(212,160,23,.15); color: #8a6200; }
.tester__badge--high{ background: rgba(192,57,43,.12); color: #9e2a1e; }

.tester__bars{ display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.tester__bar-row{ display: flex; align-items: center; gap: 10px; }
.tester__bar-name{ font-size: 14px; color: var(--ink); width: 88px; flex-shrink: 0; }
.tester__bar-track{
  flex: 1; height: 8px; border-radius: 99px;
  background: var(--line); overflow: hidden;
}
.tester__bar-fill{
  height: 100%; width: 0%; border-radius: 99px;
  transition: width .9s ease-out;
}
.tester__bar-fill--low{ background: #4ab37e; }
.tester__bar-fill--mid{ background: #d4a017; }
.tester__bar-fill--high{ background: #c0392b; }
.tester__bar-pct{ font-size: 13px; color: var(--ink-mute); width: 34px; text-align: right; flex-shrink: 0; }

.tester__result-note{
  font-size: 14px; color: var(--ink-2, var(--ink-mute));
  line-height: 1.55; margin-bottom: 20px;
}
.tester__disclaimer{
  border-left: 2px solid var(--line-strong);
  padding-left: 12px;
  font-size: 12px; color: var(--ink-mute);
  line-height: 1.5; margin-bottom: 28px;
}
.tester__cta{ display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.tester__restart{
  background: none; border: none;
  font-size: 14px; color: var(--ink-mute);
  text-decoration: underline; cursor: pointer;
  padding: 0;
}
.tester__restart:hover{ color: var(--ink); }
.tester__back{
  background: none; border: none;
  font-size: 13px; color: var(--ink-mute);
  cursor: pointer; padding: 0; margin-top: 16px;
  display: block;
}
.tester__back:hover{ color: var(--ink); }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ background: #fff; padding: clamp(80px, 10vw, 128px) 0; }
.faq__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 80px;
  row-gap: 40px;
  align-items: start;
}
.faq__left{ display: contents; }
.faq__head{ grid-column: 1; grid-row: 1; }
.faq__list{ grid-column: 1; grid-row: 2; display: flex; flex-direction: column; }
.faq__side{ grid-column: 2; grid-row: 2; align-self: start; }
.faq h2{
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(36px, 5vw, 62px); line-height: 1.1; margin: 0 0 24px;
  color: var(--ink); letter-spacing: -.01em;
}
.faq__help{ font-size: 16px; color: var(--ink-mute); line-height: 1.55; max-width: 380px; }
.faq__item{
  border-bottom: 1px solid var(--line);
  padding: 24px 8px;
  transition: padding .25s var(--ease-out);
}
.faq__item summary{
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-weight: 700; font-size: 18px; color: var(--ink);
}
.faq__item summary::-webkit-details-marker{ display: none; }
.faq__icon{
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9999px;
  background: var(--cream-soft); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease-out), background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.faq__icon svg{ transition: transform .3s var(--ease-out); }
.faq__item[open] .faq__icon svg{ transform: rotate(180deg); }
.faq__item[open] .faq__icon{ background: var(--green-800); color: #fff; }
.faq__body{
  color: var(--ink);
  font-size: 16px; line-height: 1.65;
  margin-top: 16px;
  max-width: 560px;
  animation: faqIn .45s var(--ease-out);
}
@keyframes faqIn{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: none; }
}
.faq__side{
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: 56px 48px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center;
}
.faq__side .mark{
  font-family: var(--f-script);
  font-size: 80px; color: var(--terra); line-height: 1;
}
.faq__side p{
  font-family: var(--f-display); font-size: 22px; color: var(--ink); margin: 0;
  line-height: 1.35; text-wrap: balance;
}
.faq__side .who{ font-size: 14px; color: var(--ink-mute); margin: 0; }
.faq__illu{
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
}

@media (max-width: 900px){
  .faq__grid{ grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 40px; }
  .faq__head{ grid-column: 1; grid-row: 1; }
  .faq__list{ grid-column: 1; grid-row: 2; }
  .faq__side{ grid-column: 1; grid-row: 3; }
}

/* ============================================================
   Footer
   ============================================================ */
.foot{
  background: #fff;
  padding: 72px 0 40px;
  text-align: center;
  border-top: 1px solid var(--line);
}
.foot__logo{
  font-family: var(--f-script); font-size: 56px; color: var(--ink); line-height: 1;
}
.foot__tag{
  font-size: 15px; color: var(--ink); letter-spacing: .08em;
  margin-top: 6px;
}
.foot__links{
  display: flex; justify-content: center; gap: 32px; margin: 40px 0 14px;
  flex-wrap: wrap;
}
.foot__links a{
  font-size: 14px; color: var(--ink-soft);
  transition: color .2s var(--ease-out);
}
.foot__links a:hover{ color: var(--ink); }
.foot__copy{ font-size: 13px; color: var(--ink-mute); }

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .9s var(--ease-out),
    transform .9s var(--ease-out);
  transition-delay: var(--delay, 0s);
  will-change: transform, opacity;
}
.reveal.revealed{ opacity: 1; transform: none; }

.reveal--scale{ transform: translateY(20px) scale(.96); }
.reveal--scale.revealed{ transform: none; }

.reveal--left{ transform: translateX(-40px); }
.reveal--left.revealed{ transform: none; }

.reveal--right{ transform: translateX(40px); }
.reveal--right.revealed{ transform: none; }

/* staggered text lines */
.stagger .line > span{
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease-spring);
  transition-delay: calc(var(--i, 0) * .08s);
}
.stagger.revealed .line > span{ transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.revealed, .stagger .line > span{
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .phone{ transform: none !important; }
  html{ scroll-behavior: auto; }
}

/* ============================================================
   Modal waitlist
   ============================================================ */
.modal-overlay{
  position: fixed; inset: 0;
  background: rgba(36,35,30,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(20px, 4vw, 40px);
  overflow-y: auto;
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease-out);
}
.modal-overlay.is-open{ opacity: 1; pointer-events: auto; }
.modal{
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: clamp(32px, 5vw, 52px);
  max-width: 700px;
  width: 100%;
  margin: auto;
  position: relative;
  transform: translateY(20px);
  transition: transform .35s var(--ease-out);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}
.modal-overlay.is-open .modal{ transform: translateY(0); }
.modal__close{
  position: absolute; top: 20px; right: 20px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--fill);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s var(--ease-out);
}
.modal__close:hover{ background: var(--line); }
.modal__close svg{ width: 13px; height: 13px; }
.modal__title{
  font-family: var(--f-display);
  font-size: clamp(32px, 4.5vw, 50px);
  font-weight: 400; line-height: 1.1;
  color: var(--ink); margin: 0 0 8px;
  padding-right: 40px;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  letter-spacing: -.01em;
}
.wl-form{ display: flex; flex-direction: column; gap: 36px; }
.wl-fieldset{ border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.wl-legend{ font-weight: 600; font-size: 16px; color: var(--ink); margin-bottom: 16px; padding: 0; }
.check-grid{ display: flex; flex-wrap: wrap; gap: 10px; }
.check-list{ display: flex; flex-direction: column; gap: 8px; }
.check-card{
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 13px 16px;
  cursor: pointer;
  transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
  user-select: none;
}
.check-card:hover{ border-color: var(--green-700); box-shadow: 0 2px 8px rgba(24,88,67,.08); }
.check-card input[type="checkbox"]{ position: absolute; opacity: 0; width: 0; height: 0; }
.check-box{
  flex-shrink: 0; width: 22px; height: 22px;
  border-radius: 4px; border: 2px solid var(--line-strong);
  background: #fff; display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s; pointer-events: none;
}
.check-card input:checked ~ .check-box{ background: var(--green-800); border-color: var(--green-800); }
.check-card input:checked ~ .check-box::after{
  content: ""; display: block; width: 5px; height: 9px;
  border: 2px solid #fff; border-top: 0; border-left: 0;
  transform: rotate(45deg) translateY(-1px);
}
.check-label{ font-weight: 600; font-size: 15px; color: var(--ink-soft); line-height: 1.4; pointer-events: none; transition: color .15s; }
.check-card input:checked ~ .check-label{ color: var(--ink); }
.wl-field{ display: flex; flex-direction: column; gap: 10px; }
.wl-label{ font-weight: 600; font-size: 16px; color: var(--ink); line-height: 1.35; }
.wl-textarea, .wl-input{
  width: 100%; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 14px 16px;
  font-family: var(--f-sans); font-size: 15px; color: var(--ink);
  resize: none; outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.wl-textarea{ height: 110px; }
.wl-textarea::placeholder, .wl-input::placeholder{ color: var(--ink-mute); }
.wl-textarea:focus, .wl-input:focus{ border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(24,88,67,.1); }
.wl-submit-row{ display: flex; flex-direction: column; gap: 10px; }
.wl-submit-row .btn{ align-self: flex-start; }
.wl-error-msg{ font-size: 14px; color: var(--terra); display: none; }
.wl-error-msg.is-visible{ display: block; }
.modal-success{ display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.modal-success__icon{
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--green-50);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.modal-success__icon svg{ width: 22px; height: 22px; color: var(--green-800); }
.modal-success__title{
  font-family: var(--f-display); font-size: clamp(28px, 4vw, 40px);
  font-weight: 400; color: var(--ink); margin: 0;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  letter-spacing: -.01em; line-height: 1.1;
}
.modal-success__body{ color: var(--ink-soft); font-size: 16px; line-height: 1.6; margin: 0; }
@media (max-width: 520px){
  .modal{ border-radius: var(--r-md); }
  .check-card{ padding: 12px 14px; }
}

.wl-api-error{
  font-size: 14px;
  color: var(--terra);
  background: rgba(166,112,57,.08);
  border: 1px solid rgba(166,112,57,.25);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  line-height: 1.5;
}
.wl-input--error{
  border-color: var(--terra) !important;
  box-shadow: 0 0 0 3px rgba(166,112,57,.12) !important;
}
/* Required note + fieldset errors */
.wl-required-note{
  font-size: 13px;
  color: var(--ink-mute);
  margin: -28px 0 0;
  padding: 0;
}
.wl-optional{
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-left: 4px;
}
.wl-fieldset-error{
  font-size: 13px;
  color: var(--terra);
  margin: 6px 0 0;
  padding: 0;
}

/* ============================================================
   Toast
   ============================================================ */
.toast{
  position: fixed;
  top: 24px; left: 50%;
  transform: translateX(-50%) translateY(-16px);
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-md);
  padding: 16px 24px;
  display: flex; align-items: flex-start; gap: 14px;
  max-width: 480px; width: calc(100% - 40px);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
  z-index: 300;
  pointer-events: none;
}
.toast.is-visible{ opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast__icon{
  flex-shrink: 0; width: 20px; height: 20px;
  color: var(--green-200); margin-top: 1px;
}
.toast__msg{
  margin: 0; font-size: 15px; line-height: 1.5;
  color: rgba(255,255,255,.9);
}
@media (max-width: 520px){
  .toast{ top: 16px; padding: 14px 18px; }
}

/* Modal drag handle */
.modal__handle{
  display: none;
  width: 40px; height: 4px;
  background: var(--line-strong);
  border-radius: 9999px;
  margin: 0 auto 20px;
  flex-shrink: 0;
}

/* Bottom-sheet on mobile */
@media (max-width: 640px){
  .modal__handle{ display: block; }
  .modal-overlay{
    align-items: flex-end;
    padding: 0;
  }
  .modal{
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    max-width: 100%; width: 100%;
    margin: 0;
    max-height: 92dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(100%);
    padding-bottom: max(32px, env(safe-area-inset-bottom));
    transition: transform .35s var(--ease-out);
    will-change: transform;
  }
  .modal-overlay.is-open .modal{ transform: translateY(0); }
  .modal__close{ top: 16px; right: 16px; }
}