/* ===========================================================
   T-DRIVE//01 — Stylesheet
   Mobile-first. CSS custom properties. Semantic, lean.
   =========================================================== */

:root{
  --ink:#050000;
  --ink-2:#0A0606;
  --gold:#D4AF37;
  --gold-hover:#E8C252;
  --emerald:#046A38;
  --bone:#FFFFFF;
  --body-text:#D1D1D1;
  --mute-text:#8A8A8A;
  --line:#1A1313;

  --f-display:"Archivo Black","Inter",system-ui,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --maxw:1200px;
  --maxw-hero:1440px;

  --pad-x:20px;
  --pad-y:48px;
}

@media (min-width:768px){
  :root{ --pad-x:40px; --pad-y:96px; }
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  font-feature-settings:"tnum" 1, "lnum" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (min-width:768px){ body{ font-size:17px; } }

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
ul{ list-style:none; padding:0; margin:0; }

/* ---------- Containers ---------- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad-x);
}
.container.narrow{ max-width:880px; }
.container.center{ text-align:center; }

/* ---------- Typography ---------- */
.display{
  font-family:var(--f-display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  line-height:1.02;
  color:var(--bone);
  font-size:clamp(1.75rem,7vw,2.5rem);
  margin:.4em 0 .5em;
}
@media (min-width:768px){
  .display{ font-size:clamp(2.75rem,5.5vw,4.5rem); }
}
.display--lg{ font-size:clamp(2rem,8vw,3rem); }
@media (min-width:768px){ .display--lg{ font-size:clamp(3rem,6vw,5rem); } }
.display--md{ font-size:clamp(1.5rem,5vw,2.25rem); }

.micro-label{
  font-family:var(--f-mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:2px;
  color:var(--gold);
  text-transform:uppercase;
  margin:0 0 8px;
}
.center-label{ text-align:center; }

.lede{
  color:var(--body-text);
  font-size:18px;
  max-width:60ch;
  margin:0 0 24px;
}

.prose p{ color:var(--body-text); margin:0 0 18px; max-width:62ch; font-size:17px; }
.prose__close{ color:var(--bone); font-weight:500; }
.prose__single{ color:var(--body-text); max-width:62ch; font-size:17px; }
.section--solution .prose__single,
.section--guarantee .prose__single{ margin-left:auto; margin-right:auto; }
.section--guarantee .prose__single{ text-align:center; }

.emerald-line{
  display:block;
  width:64px; height:2px;
  background:var(--emerald);
  margin-top:32px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  font-family:var(--f-body);
  font-weight:600;
  font-size:14px;
  letter-spacing:2px;
  text-transform:uppercase;
  height:48px;
  padding:0 22px;
  border-radius:2px;
  transition:background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
  min-width:48px;
  white-space:nowrap;
  user-select:none;
}
.btn--gold{ background:var(--gold); color:var(--ink); }
.btn--gold:hover{ background:var(--gold-hover); transform:translateY(-1px); box-shadow:0 6px 18px rgba(212,175,55,.18); }
.btn--ghost{ background:transparent; color:var(--bone); border:1px solid var(--line); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn--pill{ border-radius:999px; height:42px; padding:0 18px; font-size:13px; }
.btn--full{ width:100%; }
.btn--xl{ height:52px; padding:0 26px; font-size:15px; }
@media (min-width:768px){ .btn--xl{ height:56px; padding:0 30px; } }

/* ---------- Sections ---------- */
.section{
  padding:var(--pad-y) 0;
  border-top:1px solid var(--line);
  position:relative;
}
.section--problem{ background:var(--ink); }
.section--solution{ background:var(--ink-2); }
.section--benefits{ background:var(--ink); }
.section--ingredients{ background:var(--ink-2); }
.section--proof{ background:var(--ink); }
.section--stack{ background:var(--ink-2); }
.section--pricing{ background:var(--ink); }
.section--guarantee{ background:var(--ink-2); }
.section--faq{ background:var(--ink); }

/* ===========================================================
   NAV
   =========================================================== */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:50;
  transition:background .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{ background:rgba(10,6,6,.92); backdrop-filter:blur(8px); border-color:var(--line); }
.nav__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:14px var(--pad-x);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav__logo{
  font-family:var(--f-display);
  font-size:18px;
  letter-spacing:.04em;
  color:var(--gold);
  text-transform:uppercase;
}
.nav__logo-slash{ color:var(--bone); opacity:.7; }
.nav__links{ display:none; align-items:center; gap:28px; }
.nav__links a{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:2px;
  color:var(--bone);
  text-transform:uppercase;
}
.nav__links a:hover{ color:var(--gold); }
.nav__links .btn{ color:var(--ink); }

@media (min-width:900px){
  .nav__links{ display:flex; }
  .nav__burger{ display:none; }
}

.nav__burger{
  width:44px; height:44px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
}
.nav__burger span{ width:22px; height:2px; background:var(--bone); display:block; }
.nav__mobile{
  display:none; flex-direction:column; gap:0;
  background:var(--ink-2);
  border-top:1px solid var(--line);
  padding:8px var(--pad-x) 16px;
}
.nav__mobile a{
  font-family:var(--f-mono);
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  color:var(--bone);
}
.nav__mobile a.btn{ margin-top:12px; border-bottom:0; color:var(--ink); }
.nav__mobile[hidden]{ display:none; }
.nav__mobile.is-open{ display:flex; }

/* ===========================================================
   01 / HERO
   =========================================================== */
.hero{
  position:relative;
  min-height:auto;
  padding:72px 0 56px;
  overflow:hidden;
  background:var(--ink);
}
.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 75% 40%, rgba(4,106,56,.10), transparent 55%),
    radial-gradient(ellipse at 25% 80%, rgba(212,175,55,.07), transparent 60%),
    var(--ink);
  z-index:0;
}
.hero__inner{
  position:relative; z-index:1;
  max-width:var(--maxw-hero);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:32px;
}
@media (min-width:900px){
  .hero__inner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:60px;
    padding-top:16px;
  }
}
.hero__copy{ flex:1 1 60%; max-width:640px; }
.hero__copy.fade-in{ opacity:0; transform:translateY(24px); }
.hero__copy.fade-in.is-visible{ opacity:1; transform:translateY(0); }
.hero__visual-wrap{ flex:1 1 40%; display:flex; justify-content:center; width:100%; }

.hero h1.display{
  font-size:clamp(1.75rem,9vw,2.75rem);
  margin:.3em 0 .55em;
}
@media (min-width:768px){ .hero h1.display{ font-size:clamp(3rem,6vw,5rem); } }

.hero__sub{
  color:var(--body-text);
  font-size:17px;
  max-width:48ch;
  margin:0 0 16px;
}
@media (min-width:768px){ .hero__sub{ font-size:19px; margin-bottom:20px; } }

.hero__bullets{ display:none; }
.hero__bullets-mobile{
  color:var(--body-text);
  font-size:14px;
  margin:0 0 22px;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (min-width:768px){
  .hero__bullets{ display:flex; flex-direction:column; gap:10px; margin:0 0 28px; }
  .hero__bullets li{
    display:flex; align-items:center; gap:10px;
    font-size:16px; color:var(--bone);
  }
  .hero__bullets .ico{ width:18px; height:18px; color:var(--gold); flex:none; }
  .hero__bullets-mobile{ display:none; }
}

.hero__trust{
  margin:14px 0 0;
  font-size:13px;
  color:var(--bone);
  letter-spacing:.02em;
}
.hero__trust .stars{ color:var(--gold); margin-right:8px; letter-spacing:2px; }

.hero__scroll{
  position:absolute; bottom:18px; left:0; right:0;
  text-align:center;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:2px;
  color:var(--mute-text);
  z-index:1;
}

/* ===========================================================
   BOTTLE PLACEHOLDER (CSS-rendered, zero image weight)
   =========================================================== */
.bottle-placeholder{
  position:relative;
  width:180px; height:300px;
  margin:0 auto;
}
.bottle-placeholder--hero{ width:220px; height:360px; }
.bottle-placeholder--product{ width:180px; height:300px; }
.bottle-placeholder--stack{ width:120px; height:200px; }

.bottle__glow{
  position:absolute;
  inset:-30% -20%;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(4,106,56,.35), transparent 60%),
    radial-gradient(ellipse at 50% 55%, rgba(212,175,55,.18), transparent 70%);
  filter:blur(20px);
  z-index:0;
}
.bottle__cap{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:55%; height:14%;
  background:linear-gradient(180deg,#1a1a1a 0%, #0a0a0a 100%);
  border:1px solid rgba(212,175,55,.4);
  border-radius:6px 6px 2px 2px;
  z-index:2;
  box-shadow: 0 0 20px rgba(212,175,55,.15) inset;
}
.bottle__neck{
  position:absolute; top:13%; left:50%; transform:translateX(-50%);
  width:42%; height:6%;
  background:#0a0a0a;
  border-left:1px solid rgba(212,175,55,.25);
  border-right:1px solid rgba(212,175,55,.25);
  z-index:2;
}
.bottle__body{
  position:absolute; top:18%; left:0; right:0; bottom:0;
  background:linear-gradient(180deg,#141414 0%, #050505 100%);
  border:1px solid rgba(212,175,55,.45);
  border-radius:14px 14px 18px 18px;
  z-index:2;
  box-shadow:
    inset 2px 0 8px rgba(212,175,55,.18),
    inset -2px 0 8px rgba(0,0,0,.6),
    0 20px 40px rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
}
.bottle__label{
  text-align:center;
  padding:10px;
  width:90%;
  border-top:1px solid rgba(212,175,55,.25);
  border-bottom:1px solid rgba(212,175,55,.25);
}
.bottle__brand{
  font-family:var(--f-display);
  color:var(--gold);
  font-size:18px;
  margin:0 0 6px;
  letter-spacing:.04em;
}
.bottle__brand span{ color:var(--bone); opacity:.7; }
.bottle__type{
  font-family:var(--f-mono);
  font-size:9px;
  letter-spacing:2px;
  color:var(--bone);
  margin:0 0 4px;
}
.bottle__weight{
  font-family:var(--f-mono);
  font-size:8px;
  letter-spacing:1.5px;
  color:var(--mute-text);
  margin:0;
}
.bottle-placeholder--stack .bottle__brand{ font-size:13px; }
.bottle-placeholder--stack .bottle__type{ font-size:8px; }
.bottle-placeholder--hero .bottle__brand{ font-size:22px; }

.bottle__shadow{
  position:absolute;
  bottom:-12px; left:10%; right:10%;
  height:20px;
  background:radial-gradient(ellipse, rgba(0,0,0,.7), transparent 70%);
  z-index:0;
}

/* ===========================================================
   02 / PROBLEM
   =========================================================== */
.section--problem .display{ max-width:14ch; }

/* ===========================================================
   03 / SOLUTION
   =========================================================== */
.section--solution{ text-align:left; }
.solution__visual-wrap{
  display:flex; justify-content:center;
  margin-top:48px;
}

/* ===========================================================
   04 / BENEFITS
   =========================================================== */
.benefits__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:32px;
}
@media (min-width:640px){ .benefits__grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .benefits__grid{ grid-template-columns:repeat(5,1fr); gap:14px; } }

.benefit{
  background:var(--ink-2);
  border:1px solid var(--line);
  padding:24px 20px;
  display:flex; flex-direction:column; gap:10px;
  transition:border-color .2s ease, transform .2s ease;
}
.benefit:hover{ border-color:rgba(212,175,55,.4); transform:translateY(-2px); }
.benefit__ico{ width:32px; height:32px; color:var(--gold); }
.benefit h3{
  font-family:var(--f-display);
  font-size:14px;
  letter-spacing:.04em;
  margin:0;
  color:var(--bone);
}
.benefit p{
  margin:0;
  color:var(--body-text);
  font-size:14px;
  line-height:1.5;
}

/* ===========================================================
   05 / INGREDIENTS
   =========================================================== */
.ingredients{ margin-top:32px; border-top:1px solid var(--line); }
.ingredient{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "name pill"
    "benefit benefit";
  gap:6px 16px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
  align-items:center;
}
@media (min-width:768px){
  .ingredient{
    grid-template-columns:280px 130px 1fr;
    grid-template-areas:"name pill benefit";
    gap:24px;
    padding:26px 0;
  }
}
.ingredient__name{
  grid-area:name;
  font-family:var(--f-display);
  font-size:14px;
  margin:0;
  color:var(--bone);
  letter-spacing:.03em;
}
@media (min-width:768px){ .ingredient__name{ font-size:16px; } }
.dose-pill{
  grid-area:pill;
  justify-self:end;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:1px;
  padding:6px 12px;
  border:1px solid var(--gold);
  color:var(--gold);
  border-radius:999px;
  white-space:nowrap;
}
@media (min-width:768px){ .dose-pill{ justify-self:start; } }
.ingredient__benefit{
  grid-area:benefit;
  margin:0;
  color:var(--body-text);
  font-size:15px;
}

.transparency{
  margin-top:36px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:2px;
  color:var(--gold);
  text-align:center;
  line-height:1.8;
}

/* ===========================================================
   06 / SOCIAL PROOF
   =========================================================== */
.testimonials{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:32px;
}
@media (min-width:768px){ .testimonials{ grid-template-columns:repeat(3,1fr); } }

/* mobile carousel */
@media (max-width:767px){
  .testimonials{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:16px;
    padding-bottom:8px;
  }
  .testimonial{
    min-width:85vw;
    scroll-snap-align:start;
    flex-shrink:0;
  }
}

.testimonial{
  background:var(--ink-2);
  border:1px solid var(--line);
  padding:28px 24px;
  display:flex; flex-direction:column; gap:14px;
}
.testimonial .stars{ color:var(--gold); font-size:16px; letter-spacing:2px; margin:0; }
.testimonial blockquote{
  margin:0;
  font-size:16px;
  line-height:1.5;
  color:var(--body-text);
  font-style:normal;
}
.testimonial cite{
  font-style:normal;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:1px;
  color:var(--bone);
}

.fda-microline{
  margin-top:28px;
  font-size:13px;
  line-height:1.6;
  color:var(--mute-text);
  text-align:center;
  max-width:72ch;
  margin-left:auto;
  margin-right:auto;
}

/* ===========================================================
   07 / STACK
   =========================================================== */
.stack__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  margin-top:32px;
}
@media (min-width:768px){ .stack__grid{ grid-template-columns:1fr 1fr; } }

.stack-card{
  background:var(--ink);
  border:1px solid var(--line);
  padding:32px 24px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  transition:border-color .2s ease;
}
.stack-card:hover{ border-color:rgba(212,175,55,.4); }
.stack-card__visual-wrap{ display:flex; justify-content:center; width:100%; }
.stack-card h3{
  font-family:var(--f-display);
  font-size:16px;
  letter-spacing:.04em;
  color:var(--bone);
  margin:0;
}
.stack-card p{
  color:var(--body-text);
  font-size:15px;
  margin:0;
  max-width:38ch;
}

/* ===========================================================
   08 / PRICING
   =========================================================== */
.pricing__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:32px;
}
@media (min-width:640px){ .pricing__grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .pricing__grid{ grid-template-columns:repeat(4,1fr); gap:14px; } }

.tier{
  background:var(--ink-2);
  border:1px solid var(--line);
  padding:28px 20px;
  display:flex; flex-direction:column; gap:12px;
  text-align:center;
  position:relative;
  transition:border-color .2s ease;
}
.tier:hover{ border-color:rgba(212,175,55,.4); }
.tier--anchor{
  border-color:var(--gold);
  transform:scale(1.05);
  z-index:2;
}
.tier--anchor:hover{ border-color:var(--gold-hover); }

.badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:2px;
  padding:5px 14px;
  border-radius:999px;
  white-space:nowrap;
}
.badge--gold{ background:var(--gold); color:var(--ink); }
.badge--emerald{ background:var(--emerald); color:var(--bone); }

.tier__name{
  font-family:var(--f-display);
  font-size:16px;
  margin:0;
  color:var(--bone);
  letter-spacing:.04em;
}
.tier__qty{
  font-size:14px;
  color:var(--body-text);
  margin:0;
}
.tier__price{
  margin:0;
}
.tier__price .num{
  font-family:var(--f-display);
  font-size:32px;
  color:var(--bone);
}
.tier__price .per-mo{
  font-size:14px;
  color:var(--body-text);
  margin-left:2px;
}
.tier__per{
  font-size:13px;
  color:var(--body-text);
  margin:0 0 4px;
}
.tier .btn{ margin-top:auto; }

.ship-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:36px;
  font-family:var(--f-mono);
  font-size:13px;
  letter-spacing:1.5px;
  color:var(--bone);
}
.ship-line .ico{ width:22px; height:22px; color:var(--gold); flex:none; }

.urgency{
  text-align:center;
  margin-top:12px;
  font-size:13px;
  color:var(--mute-text);
}

.trust-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px 32px;
  margin-top:36px;
}
.trust-row li{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--body-text);
}
.trust-row .ico{ width:18px; height:18px; color:var(--gold); flex:none; }

/* ===========================================================
   09 / GUARANTEE
   =========================================================== */
.shield{
  color:var(--gold);
  margin:0 auto 20px;
  width:120px;
}

/* ===========================================================
   10 / FAQ
   =========================================================== */
.faq{ margin-top:32px; border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 0;
  cursor:pointer;
  font-weight:500;
  font-size:17px;
  color:var(--bone);
  list-style:none;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__toggle{
  font-size:22px;
  color:var(--gold);
  flex:none;
  width:28px;
  text-align:center;
  transition:transform .2s ease;
}
.faq__item[open] .faq__toggle{ transform:rotate(45deg); }
.faq__body{
  padding:0 0 22px;
}
.faq__body p{
  margin:0;
  color:var(--body-text);
  font-size:16px;
  line-height:1.6;
  max-width:62ch;
}

/* ===========================================================
   11 / COMPLIANCE BAR
   =========================================================== */
.compliance-bar{
  background:var(--ink-2);
  padding:24px 0;
  border-top:1px solid var(--line);
}
.compliance-bar p{
  font-size:13px;
  line-height:1.6;
  color:var(--mute-text);
  margin:0;
  text-align:center;
  max-width:72ch;
  margin:0 auto;
}

/* ===========================================================
   FOOTER
   =========================================================== */
.footer{
  background:var(--ink);
  border-top:1px solid var(--line);
  padding:40px 0 0;
}
.footer__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  padding-bottom:32px;
}
@media (min-width:640px){
  .footer__inner{ flex-direction:row; justify-content:space-between; }
}
.footer__logo{
  font-family:var(--f-display);
  font-size:18px;
  color:var(--gold);
  letter-spacing:.04em;
}
.footer__logo span{ color:var(--bone); opacity:.7; }
.footer__links{
  display:flex;
  gap:24px;
}
.footer__links a{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:1.5px;
  color:var(--body-text);
  text-transform:uppercase;
}
.footer__links a:hover{ color:var(--gold); }
.footer__copy{
  border-top:1px solid var(--line);
  padding:16px 0;
  text-align:center;
}
.footer__copy p{
  font-size:13px;
  color:var(--mute-text);
  margin:0;
}
.footer__copy a{ color:var(--gold); }
.footer__copy a:hover{ text-decoration:underline; }

/* ===========================================================
   STICKY MOBILE CTA
   =========================================================== */
.sticky-cta{
  position:fixed; bottom:0; left:0; right:0;
  z-index:40;
  height:64px;
  background:var(--ink-2);
  border-top:1px solid var(--gold);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  transform:translateY(100%);
  transition:transform .25s ease;
}
.sticky-cta.is-visible{ transform:translateY(0); }
.sticky-cta__price{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:1.5px;
  color:var(--bone);
}
.sticky-cta .btn{ height:44px; padding:0 18px; font-size:12px; }

@media (min-width:900px){ .sticky-cta{ display:none; } }

body.has-sticky{ padding-bottom:64px; }
@media (min-width:900px){ body.has-sticky{ padding-bottom:0; } }

/* ===========================================================
   EXIT-INTENT MODAL
   =========================================================== */
.modal{
  position:fixed; inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.modal[hidden]{ display:none; }
.modal__backdrop{
  position:absolute; inset:0;
  background:rgba(5,0,0,.85);
  backdrop-filter:blur(4px);
}
.modal__panel{
  position:relative;
  background:var(--ink-2);
  border:1px solid var(--line);
  padding:40px 32px;
  max-width:480px;
  width:100%;
  text-align:center;
}
.modal__x{
  position:absolute; top:12px; right:16px;
  font-size:26px;
  color:var(--mute-text);
  padding:4px;
}
.modal__x:hover{ color:var(--bone); }
.modal__sub{
  color:var(--body-text);
  font-size:16px;
  margin:0 0 24px;
}
.modal__form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
@media (min-width:480px){ .modal__form{ flex-direction:row; } }
.modal__form input[type="email"]{
  flex:1;
  height:48px;
  padding:0 16px;
  background:var(--ink);
  border:1px solid var(--line);
  color:var(--bone);
  font-family:var(--f-body);
  font-size:15px;
  border-radius:2px;
}
.modal__form input[type="email"]::placeholder{ color:var(--mute-text); }
.modal__form input[type="email"]:focus{ outline:none; border-color:var(--gold); }
.modal__form .btn{ flex:none; white-space:nowrap; }
.modal__decline{
  margin-top:18px;
  font-size:13px;
  color:var(--mute-text);
  text-transform:uppercase;
  letter-spacing:1px;
  display:inline-block;
}
.modal__decline:hover{ color:var(--bone); }

/* ===========================================================
   SCROLL FADE
   =========================================================== */
.fade-in{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .55s ease, transform .55s ease;
}
.fade-in.is-visible{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion:reduce){
  .fade-in{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ===========================================================
   ICON UTILITY
   =========================================================== */
.ico{ width:16px; height:16px; display:inline-block; vertical-align:middle; }
.stars{ color:var(--gold); letter-spacing:2px; }