/* =========================================================
   Hidden Feelings Tarot — "Aubergine Nocturne"
   Deep purple / gold mystic luxe, matching brand posts.
   ========================================================= */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;

  /* Aubergine palette */
  --bg:        #1D0F24;
  --bg-2:      #170B1D;
  --surface:   #2C1636;
  --surface-2: #341B41;
  --violet:    #6B2D8B;
  --gold:      #D9B36C;
  --gold-bright:#EAC98A;
  --lavender:  #BFA8D6;
  --cream:     #F2E8D5;
  --gold-line: rgba(217, 179, 108, .30);
  --gold-soft: rgba(217, 179, 108, .09);
  --violet-glow: rgba(107, 45, 139, .38);

  --radius-sm:.5rem; --radius-md:.9rem; --radius-lg:1.35rem; --radius-full:9999px;
  --content: 1180px;
  --ease: cubic-bezier(.16,1,.3,1);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Satoshi', 'Inter', system-ui, sans-serif;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; scroll-behavior:smooth; scroll-padding-top:5rem;
  overflow-x:clip;
}
body{
  min-height:100dvh; line-height:1.65;
  font-family:var(--font-body); font-size:var(--text-base);
  color:var(--cream); background:var(--bg);
  overflow-x:clip; position:relative;
}
/* Ambient purple nebula glows over the whole page */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 45% at 12% 8%, var(--violet-glow), transparent 60%),
    radial-gradient(55% 40% at 92% 30%, rgba(107,45,139,.28), transparent 60%),
    radial-gradient(70% 50% at 50% 108%, rgba(107,45,139,.30), transparent 60%),
    var(--bg);
}
img,svg,canvas{ display:block; max-width:100%; height:auto; }
ul[role=list]{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ cursor:pointer; background:none; border:none; }
h1,h2,h3{ text-wrap:balance; line-height:1.12; font-family:var(--font-display); font-weight:500; }
p{ text-wrap:pretty; }
::selection{ background:rgba(217,179,108,.28); color:var(--cream); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:var(--radius-sm); }
a,button{ transition:color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.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; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* ---------- Layout helpers ---------- */
.container{ width:min(var(--content), 92%); margin-inline:auto; }
.container--narrow{ width:min(760px, 92%); }
.eyebrow{
  font-family:var(--font-body); font-size:var(--text-xs); font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
  margin-bottom:var(--space-4);
}
.section{ padding-block:clamp(var(--space-16), 9vw, var(--space-32)); position:relative; }
.section--surface{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(52,27,65,.6), transparent 60%),
    rgba(23,11,29,.5);
  border-block:1px solid var(--gold-line);
}
.section__head{ text-align:center; max-width:56ch; margin-inline:auto; margin-bottom:clamp(var(--space-10),5vw,var(--space-16)); }
.section__title{ font-size:var(--text-2xl); color:var(--cream); }
.section__lede{ margin-top:var(--space-4); color:var(--lavender); font-size:var(--text-lg); font-family:var(--font-display); font-style:italic; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:500;
  letter-spacing:.02em; padding:.85em 1.7em; border-radius:var(--radius-full);
  white-space:nowrap; border:1px solid transparent;
}
.btn--lg{ padding:1.05em 2.2em; font-size:var(--text-base); }
.btn--gold{
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  color:#2a1a08; font-weight:700;
  box-shadow:0 10px 30px -10px rgba(217,179,108,.6), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 16px 38px -10px rgba(217,179,108,.8), inset 0 1px 0 rgba(255,255,255,.4); }
.btn--ghost{ color:var(--cream); border-color:var(--gold-line); background:rgba(217,179,108,.04); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-bright); background:rgba(217,179,108,.10); transform:translateY(-2px); }
.link-ig{
  font-size:var(--text-sm); color:var(--lavender); text-decoration:underline;
  text-underline-offset:4px; text-decoration-color:var(--gold-line);
}
.link-ig:hover{ color:var(--gold-bright); text-decoration-color:var(--gold); }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(29,15,36,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s var(--ease), background .3s var(--ease);
}
.nav.is-scrolled{ border-bottom-color:var(--gold-line); background:rgba(23,11,29,.9); }
.nav__inner{ width:min(var(--content),94%); margin-inline:auto; display:flex; align-items:center; gap:var(--space-6); padding-block:var(--space-4); }
.nav__brand{
  position:relative; display:block; color:var(--cream);
  flex:none; overflow:hidden;
  height:60px; width:235px;
}
.nav__mark{ color:var(--gold); flex:none; }
.nav__name{ font-family:var(--font-display); font-size:1.30rem; letter-spacing:.06em; }
.nav__name em{ font-style:normal; color:var(--gold); }
.nav__logo{
  position:absolute; left:-28px; top:50%;
  transform:translateY(-50%);
  height:160px; width:auto; max-width:none;
  display:block;
}
@media (max-width:860px){
  .nav__brand{ height:54px; width:215px; }
  .nav__logo{ height:155px; left:-26px; }
}
@media (max-width:480px){
  .nav__brand{ height:48px; width:190px; }
  .nav__logo{ height:138px; left:-23px; }
}
@media (max-width:380px){
  .nav__brand{ height:42px; width:170px; }
  .nav__logo{ height:122px; left:-20px; }
}
@media (max-width:340px){
  .nav__brand{ height:38px; width:150px; }
  .nav__logo{ height:108px; left:-18px; }
}
.nav__links{ display:flex; gap:var(--space-8); margin-left:auto; }
.nav__links a{ font-size:var(--text-sm); color:var(--lavender); letter-spacing:.02em; position:relative; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:var(--gold); transition:width .3s var(--ease); }
.nav__links a:hover{ color:var(--cream); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ flex:none; }
@media (max-width:860px){ .nav__links{ display:none; } .nav__cta{ margin-left:auto; } }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:92vh; display:grid; place-items:center;
  text-align:center; padding-block:var(--space-20) var(--space-16); overflow:hidden;
  background:
    radial-gradient(90% 55% at 50% 6%, rgba(217,179,108,.10), transparent 55%),
    radial-gradient(80% 60% at 50% 120%, rgba(52,27,65,.7), transparent 60%);
}
.stars{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero__glow{
  position:absolute; z-index:0; top:4%; left:50%; transform:translateX(-50%);
  width:min(560px,80vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(217,179,108,.16), rgba(107,45,139,.14) 45%, transparent 66%);
  filter:blur(12px); pointer-events:none;
}
.hero__inner{ position:relative; z-index:2; width:min(760px,92%); }
.hero__emblem{
  width:clamp(210px,36vw,360px); height:auto; margin:0 auto var(--space-2);
  animation:floaty 7s ease-in-out infinite;
  -webkit-mask:radial-gradient(circle at 50% 44%, #000 54%, transparent 72%);
  mask:radial-gradient(circle at 50% 44%, #000 54%, transparent 72%);
}
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.hero__title{ font-size:var(--text-3xl); font-weight:500; font-style:italic; color:var(--cream); letter-spacing:.005em; margin-bottom:var(--space-5); }
.hero__sub{ max-width:52ch; margin:0 auto var(--space-8); color:var(--lavender); font-size:var(--text-lg); }
.hero__actions{ display:flex; flex-direction:column; align-items:center; gap:var(--space-4); }

.scroll-cue{
  position:absolute; z-index:2; bottom:var(--space-8); left:50%; transform:translateX(-50%);
  width:22px; height:36px; border:1px solid var(--gold-line); border-radius:var(--radius-full);
}
.scroll-cue::before{
  content:""; position:absolute; left:50%; top:8px; width:3px; height:7px; border-radius:2px;
  background:var(--gold); transform:translateX(-50%); animation:cue 1.8s var(--ease) infinite;
}
@keyframes cue{ 0%{ opacity:0; transform:translate(-50%,0);} 30%{opacity:1;} 70%{opacity:1;} 100%{ opacity:0; transform:translate(-50%,10px);} }

/* ---------- Ornamental divider (crescent motif) ---------- */
.divider{ display:flex; align-items:center; justify-content:center; gap:var(--space-4); padding-block:var(--space-10); color:var(--gold); }
.divider .line{ display:block; width:min(260px,28vw); height:1px; background:linear-gradient(90deg, transparent, var(--gold-line), var(--gold), var(--gold-line), transparent); }
.divider .glyph{ display:flex; align-items:center; gap:.5rem; }
.divider .glyph svg{ width:26px; height:26px; }
.divider .glyph .spark{ width:5px; height:5px; }

/* ---------- Steps ---------- */
.steps{
  list-style:none; display:grid; gap:var(--space-6);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); counter-reset:step;
}
.step{
  position:relative; padding:var(--space-8) var(--space-6);
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--gold-line); border-radius:var(--radius-lg); overflow:hidden;
}
.step__num{ position:absolute; top:var(--space-5); right:var(--space-6); font-family:var(--font-display); font-size:2.4rem; color:rgba(217,179,108,.22); line-height:1; }
.step__icon{
  width:52px; height:52px; display:grid; place-items:center; color:var(--gold);
  border:1px solid var(--gold-line); border-radius:var(--radius-full);
  background:var(--gold-soft); margin-bottom:var(--space-5);
}
.step__icon svg{ width:26px; height:26px; }
.step__title{ font-size:var(--text-lg); color:var(--cream); margin-bottom:var(--space-3); }
.step p{ color:var(--lavender); font-size:var(--text-base); }

/* ---------- Cards / Pricing ---------- */
.cards{ display:grid; gap:var(--space-6); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:stretch; }
.card{
  position:relative; display:flex; flex-direction:column;
  padding:var(--space-8) var(--space-6) var(--space-6);
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--gold-line); border-radius:var(--radius-lg);
}
.card--featured{
  border-color:rgba(217,179,108,.55);
  box-shadow:0 24px 60px -30px rgba(217,179,108,.5), 0 0 40px -18px rgba(107,45,139,.6);
  background:linear-gradient(180deg, #3a1f47, #2c1636);
}
.card--featured::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(160deg, rgba(234,201,138,.7), transparent 45%, rgba(217,179,108,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.card__badge{
  position:absolute; top:-.85rem; left:50%; transform:translateX(-50%);
  font-family:var(--font-body); font-size:var(--text-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#2a1a08;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  padding:.4em 1em; border-radius:var(--radius-full); white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(217,179,108,.7);
}
.card__badge--soft{ color:var(--gold-bright); background:rgba(217,179,108,.10); border:1px solid var(--gold-line); box-shadow:none; }
.card__top{ text-align:center; padding-bottom:var(--space-5); margin-bottom:var(--space-5); border-bottom:1px solid var(--gold-line); }
.card__name{ font-size:var(--text-xl); color:var(--cream); margin-bottom:var(--space-2); }
.card__price{ font-family:var(--font-display); }
.card__amt{ font-size:2.6rem; font-weight:600; color:var(--gold); }
.card__meta{ display:block; margin-top:var(--space-2); font-family:var(--font-body); font-size:var(--text-xs); letter-spacing:.06em; color:var(--lavender); }
.card__sub{ font-size:var(--text-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:var(--space-5) 0 var(--space-3); text-align:center; }
.card__list{ list-style:none; display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-4); }
.card__list li{ position:relative; padding-left:1.6rem; color:var(--lavender); font-size:var(--text-sm); line-height:1.5; }
.card__list li b{ color:var(--cream); font-weight:600; }
.card__list li::before{
  content:""; position:absolute; left:0; top:.4em; width:11px; height:11px; background:var(--gold);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.4 6.9L21 9.3l-5 5.2L17.3 22 12 18.2 6.7 22 8 14.5l-5-5.2 6.6-.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.4 6.9L21 9.3l-5 5.2L17.3 22 12 18.2 6.7 22 8 14.5l-5-5.2 6.6-.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.card__best{ margin-top:auto; padding:var(--space-4) 0 var(--space-6); text-align:center; color:var(--lavender); font-family:var(--font-display); font-style:italic; font-size:var(--text-base); border-top:1px solid var(--gold-line); }
.card .btn{ width:100%; }

.addons{ margin-top:clamp(var(--space-8),4vw,var(--space-12)); text-align:center; color:var(--lavender); font-size:var(--text-sm); line-height:2; }
.addons__label{ display:inline-block; font-size:var(--text-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-right:.6em; }
.addons b{ color:var(--cream); font-weight:600; }
.addons .dot{ color:var(--gold-line); margin-inline:.4em; }

.trustline{
  margin:var(--space-6) auto 0; max-width:60ch; text-align:center;
  font-family:var(--font-display); font-style:italic; font-size:var(--text-lg); color:var(--gold-bright);
}

/* ---------- What you'll receive ---------- */
.receive{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(var(--space-8),5vw,var(--space-20)); align-items:center; }
.receive__text p{ color:var(--lavender); margin-top:var(--space-4); }
.receive__text .section__title{ margin-top:var(--space-2); }
.pills{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-8); }
.pills li{ font-size:var(--text-xs); letter-spacing:.06em; color:var(--gold-bright); border:1px solid var(--gold-line); background:var(--gold-soft); padding:.55em 1em; border-radius:var(--radius-full); }
.receive__card{ display:grid; place-items:center; }
.tarot{
  width:min(300px,80%); aspect-ratio:5/8; border-radius:var(--radius-lg); padding:14px;
  background:linear-gradient(160deg, #3a2149, #241333); border:1px solid rgba(217,179,108,.4);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8), 0 0 0 6px rgba(217,179,108,.05);
  transform:rotate(-3deg); transition:transform .6s var(--ease);
}
.receive__card:hover .tarot{ transform:rotate(0); }
.tarot__inner{
  position:relative; height:100%; border:1px solid var(--gold-line); border-radius:calc(var(--radius-lg) - 6px);
  display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(120% 80% at 50% 20%, rgba(217,179,108,.10), transparent 55%);
}
.tarot__moon{ position:absolute; width:78%; color:var(--gold-line); top:14%; }
.tarot__card{ width:46%; color:var(--gold); position:relative; z-index:2; margin-top:-4%; filter:drop-shadow(0 6px 14px rgba(217,179,108,.35)); }
.tarot__label{ position:absolute; bottom:8%; font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--gold-bright); letter-spacing:.04em; z-index:2; }
.tarot__stars span{ position:absolute; width:3px; height:3px; border-radius:50%; background:var(--gold); box-shadow:0 0 6px var(--gold); animation:twinkle 3s ease-in-out infinite; }
.tarot__stars span:nth-child(1){ top:12%; left:20%; animation-delay:0s; }
.tarot__stars span:nth-child(2){ top:22%; right:18%; animation-delay:.6s; }
.tarot__stars span:nth-child(3){ top:60%; left:14%; animation-delay:1.2s; }
.tarot__stars span:nth-child(4){ top:70%; right:20%; animation-delay:1.8s; }
.tarot__stars span:nth-child(5){ top:44%; right:30%; animation-delay:2.4s; }
@keyframes twinkle{ 0%,100%{ opacity:.2; transform:scale(.7);} 50%{ opacity:1; transform:scale(1);} }
@media (max-width:760px){ .receive{ grid-template-columns:1fr; } .receive__card{ order:-1; } }

/* ---------- FAQ ---------- */
.faq{ display:flex; flex-direction:column; gap:var(--space-3); }
.faq__item{ border:1px solid var(--gold-line); border-radius:var(--radius-md); background:linear-gradient(180deg, var(--surface), var(--surface-2)); overflow:hidden; transition:border-color .3s var(--ease); }
.faq__item[open]{ border-color:rgba(217,179,108,.5); }
.faq__item summary{
  list-style:none; cursor:pointer; padding:var(--space-5) var(--space-6);
  font-family:var(--font-display); font-size:var(--text-lg); color:var(--cream);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; font-family:var(--font-body); font-size:1.4rem; color:var(--gold); transition:transform .3s var(--ease); flex:none; }
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__body{ padding:0 var(--space-6) var(--space-5); }
.faq__body p{ color:var(--lavender); font-size:var(--text-base); }

/* ---------- CTA band ---------- */
.cta-band{
  margin-top:clamp(var(--space-12),7vw,var(--space-24)); text-align:center;
  padding:clamp(var(--space-10),6vw,var(--space-16)) var(--space-6);
  border:1px solid var(--gold-line); border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(217,179,108,.12), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, rgba(107,45,139,.3), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
}
.cta-band__title{ font-size:var(--text-2xl); font-style:italic; color:var(--cream); margin-bottom:var(--space-3); }
.cta-band p{ color:var(--lavender); margin-bottom:var(--space-8); }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--gold-line); padding-block:var(--space-16) var(--space-12); background:rgba(23,11,29,.6); }
.footer__inner{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-3); }
.footer__brand{ display:flex; align-items:center; gap:.5rem; color:var(--cream); }
.footer__brand svg{ color:var(--gold); }
.footer__brand span{ font-family:var(--font-display); font-size:1.1rem; letter-spacing:.06em; }
.footer__brand em{ font-style:normal; color:var(--gold); }
.footer__tag{ font-family:var(--font-display); font-style:italic; color:var(--gold-bright); font-size:var(--text-lg); }
.footer__trust{ color:var(--lavender); font-size:var(--text-xs); max-width:52ch; }
.footer__disc{ color:var(--lavender); font-size:var(--text-xs); max-width:44ch; margin-top:var(--space-2); }
.footer__copy{ color:var(--lavender); opacity:.6; font-size:var(--text-xs); margin-top:var(--space-2); }

/* ---------- Modal ---------- */
.modal{ position:fixed; inset:0; z-index:200; display:none; }
.modal.is-open{ display:grid; place-items:center; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(12,6,16,.75); backdrop-filter:blur(6px); animation:fade .3s var(--ease); }
.modal__dialog{
  position:relative; width:min(440px,92%); padding:var(--space-10) var(--space-8) var(--space-8);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(217,179,108,.10), transparent 55%),
    radial-gradient(140% 120% at 50% 120%, rgba(107,45,139,.35), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid rgba(217,179,108,.5); border-radius:var(--radius-lg);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8); text-align:center;
  animation:pop .35s var(--ease);
}
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pop{ from{ opacity:0; transform:translateY(16px) scale(.97); } to{ opacity:1; transform:none; } }
.modal__mark{ color:var(--gold); margin:0 auto var(--space-4); }
.modal__title{ font-family:var(--font-display); font-size:var(--text-xl); color:var(--cream); margin-bottom:var(--space-2); }
.modal__sub{ color:var(--lavender); font-size:var(--text-sm); margin-bottom:var(--space-6); }
.modal__plan{ color:var(--gold-bright); font-family:var(--font-display); font-style:italic; }
.modal__options{ display:flex; flex-direction:column; gap:var(--space-3); }
.modal__opt{
  display:flex; align-items:center; gap:var(--space-3); width:100%; text-align:left;
  padding:.9em 1.1em; border-radius:var(--radius-md); border:1px solid var(--gold-line);
  color:var(--cream); font-family:var(--font-body); font-size:var(--text-sm); background:rgba(217,179,108,.04);
}
.modal__opt:hover{ border-color:var(--gold); background:rgba(217,179,108,.10); transform:translateY(-2px); }
.modal__opt svg{ width:20px; height:20px; flex:none; color:var(--gold); }
.modal__opt--pay{ background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#2a1a08; font-weight:700; border-color:transparent; }
.modal__opt--pay svg{ color:#2a1a08; }
.modal__opt--pay:hover{ box-shadow:0 12px 28px -10px rgba(217,179,108,.7); }
.modal__note{ margin-top:var(--space-5); font-size:var(--text-xs); color:var(--lavender); }
.modal__close{
  position:absolute; top:var(--space-4); right:var(--space-4); width:34px; height:34px;
  display:grid; place-items:center; color:var(--lavender); border-radius:var(--radius-full); border:1px solid var(--gold-line);
}
.modal__close:hover{ color:var(--gold-bright); border-color:var(--gold); }

/* ---------- Checkout ---------- */
.checkout{ padding-block:clamp(var(--space-12),7vw,var(--space-24)); }
.checkout__back{ display:inline-flex; align-items:center; gap:.5rem; color:var(--lavender); font-size:var(--text-sm); margin-bottom:var(--space-8); }
.checkout__back:hover{ color:var(--gold-bright); }
.checkout__grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(var(--space-8),4vw,var(--space-16)); align-items:start; }
@media (max-width:820px){ .checkout__grid{ grid-template-columns:1fr; } }
.summary{
  position:sticky; top:var(--space-16); padding:var(--space-8);
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--gold-line); border-radius:var(--radius-lg);
}
@media (max-width:820px){ .summary{ position:static; } }
.summary__label{ font-size:var(--text-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.summary__name{ font-family:var(--font-display); font-size:var(--text-xl); color:var(--cream); margin:var(--space-2) 0; }
.summary__price{ font-family:var(--font-display); font-size:2.4rem; font-weight:600; color:var(--gold); }
.summary__meta{ color:var(--lavender); font-size:var(--text-sm); margin-top:var(--space-1); }
.summary__list{ list-style:none; margin-top:var(--space-6); display:flex; flex-direction:column; gap:var(--space-2); }
.summary__list li{ position:relative; padding-left:1.5rem; color:var(--lavender); font-size:var(--text-sm); }
.summary__list li::before{ content:"✦"; position:absolute; left:0; color:var(--gold); font-size:.75rem; top:.15em; }

.form__section-title{ font-family:var(--font-display); font-size:var(--text-lg); color:var(--cream); margin:var(--space-8) 0 var(--space-4); padding-bottom:var(--space-3); border-bottom:1px solid var(--gold-line); }
.form__section-title:first-child{ margin-top:0; }
.field{ margin-bottom:var(--space-5); }
.field label{ display:block; font-size:var(--text-sm); color:var(--cream); margin-bottom:var(--space-2); }
.field label .req{ color:var(--gold); }
.field input, .field select, .field textarea{
  width:100%; padding:.8em 1em; font-size:var(--text-base); color:var(--cream);
  background:rgba(23,11,29,.55); border:1px solid var(--gold-line); border-radius:var(--radius-md);
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(191,168,214,.6); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(217,179,108,.18); }
.field textarea{ resize:vertical; min-height:110px; }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B36C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1em center; background-size:18px; padding-right:2.6em; }
.field option{ background:#2C1636; color:var(--cream); }
.field__error{ display:none; color:#e59ab0; font-size:var(--text-xs); margin-top:var(--space-2); }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:#c85f7f; }
.field.has-error .field__error{ display:block; }
.field__row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
@media (max-width:520px){ .field__row{ grid-template-columns:1fr; } }
.zodiac-only{ display:none; }
body[data-plan="destiny"] .zodiac-only{ display:block; }

/* Stripe mount placeholder */
.pay-mount{
  margin-top:var(--space-4); padding:var(--space-8) var(--space-6); text-align:center;
  border:1px dashed var(--gold-line); border-radius:var(--radius-md); background:rgba(23,11,29,.4);
}
.pay-mount__icon{ color:var(--gold); margin:0 auto var(--space-3); }
.pay-mount__title{ font-family:var(--font-display); font-size:var(--text-lg); color:var(--cream); margin-bottom:var(--space-2); }
.pay-mount p{ color:var(--lavender); font-size:var(--text-sm); max-width:46ch; margin-inline:auto; }
#stripe-elements{ margin-top:var(--space-4); }
.pay-fallback{ display:none; margin-top:var(--space-5); }
.pay-fallback.is-visible{ display:block; }
.pay-fallback__opts{ display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; margin-top:var(--space-4); }
.pay-fallback__opts .btn{ flex:1 1 180px; }
.pay-btn{ width:100%; margin-top:var(--space-6); }
.secure-note{ margin-top:var(--space-4); text-align:center; font-size:var(--text-xs); color:var(--lavender); display:flex; align-items:center; justify-content:center; gap:.5rem; }
.secure-note svg{ width:14px; height:14px; color:var(--gold); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.steps .step:nth-child(2){ transition-delay:.1s; }
.steps .step:nth-child(3){ transition-delay:.2s; }
.cards .card:nth-child(2){ transition-delay:.1s; }
.cards .card:nth-child(3){ transition-delay:.2s; }

/* =========================================================
   ---------- Responsive optimization layer ----------
   Mobile menu, tighter mobile spacing, touch targets,
   landscape phones, and large-screen refinement.
   ========================================================= */

/* Better tap feedback + prevent iOS input zoom */
html{ -webkit-tap-highlight-color: rgba(217,179,108,.18); }
input, select, textarea{ font-size:16px; }

/* ---------- Mobile menu toggle (hamburger) ---------- */
.nav__toggle{
  display:none;
  width:44px; height:44px; margin-left:.25rem;
  align-items:center; justify-content:center; gap:5px;
  flex-direction:column; border:1px solid var(--gold-line);
  border-radius:var(--radius-full); background:rgba(217,179,108,.06);
  color:var(--gold); flex:none;
}
.nav__toggle:hover{ border-color:var(--gold); background:rgba(217,179,108,.12); }
.nav__toggle-bar{
  width:18px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__toggle.is-open .nav__toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle.is-open .nav__toggle-bar:nth-child(2){ opacity:0; }
.nav__toggle.is-open .nav__toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Backdrop is inert on desktop */
.nav__backdrop{ display:none; }
/* Close button lives inside the drawer — hidden on desktop */
.nav__close{ display:none; }

@media (max-width:860px){
  .nav__toggle{ display:flex; }
  .nav__inner{ justify-content:space-between; gap:var(--space-3); }

  /* Nav header sits above the drawer so the animated X stays tappable */
  .nav{ z-index:130; }

  /* Right-side slide-in drawer */
  .nav__links{
    display:flex; flex-direction:column; gap:0;
    position:fixed; top:0; right:0; bottom:0; left:auto;
    width:min(320px, 82%); height:100dvh;
    padding:var(--space-16) var(--space-6) var(--space-6);
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(107,45,139,.35), transparent 60%),
      linear-gradient(180deg, rgba(29,15,36,.98), rgba(23,11,29,.98));
    backdrop-filter:blur(14px);
    border-left:1px solid var(--gold-line);
    box-shadow:-24px 0 60px -20px rgba(0,0,0,.7);
    transform:translateX(100%); visibility:hidden;
    transition:transform .35s var(--ease), visibility .35s;
    overflow-y:auto; margin-left:0; z-index:120;
  }
  .nav__links.is-open{ transform:translateX(0); visibility:visible; }
  .nav__links a{
    display:block; padding:1rem .25rem; font-size:var(--text-base);
    color:var(--cream); border-bottom:1px solid rgba(217,179,108,.14);
  }
  .nav__links a:last-child{ border-bottom:0; }
  .nav__links a::after{ display:none; }

  /* Close (X) button inside the drawer */
  .nav__close{
    display:grid; place-items:center;
    position:absolute; top:var(--space-4); right:var(--space-4);
    width:40px; height:40px;
    color:var(--gold); background:rgba(217,179,108,.08);
    border:1px solid var(--gold-line); border-radius:var(--radius-full);
    cursor:pointer;
  }
  .nav__close:hover{ color:var(--gold-bright); border-color:var(--gold); background:rgba(217,179,108,.14); }

  /* Backdrop overlay */
  .nav__backdrop{
    display:block; position:fixed; inset:0;
    background:rgba(12,6,16,.6); backdrop-filter:blur(3px);
    opacity:0; visibility:hidden; z-index:110;
    transition:opacity .3s var(--ease), visibility .3s;
  }
  .nav__backdrop.is-open{ opacity:1; visibility:visible; }
}

/* Body scroll lock while drawer is open */
body.nav-open{ overflow:hidden; }

/* Nav CTA: shrink on mobile so it fits next to the bigger logo */
@media (max-width:860px){
  .nav__cta{ padding:.55em 1em; font-size:12px; letter-spacing:.01em; }
}
@media (max-width:480px){
  .nav__cta{ padding:.5em .85em; font-size:11px; }
  .nav__inner{ gap:var(--space-2); padding-block:var(--space-3); }
}
@media (max-width:380px){
  .nav__cta{ padding:.45em .75em; font-size:10.5px; }
  .nav__inner{ gap:6px; }
}
@media (max-width:340px){
  .nav__cta{ display:none; }
}

/* ---------- Hero tightening (reduce vertical space on mobile) ---------- */
@media (max-width:860px){
  .hero{ min-height:auto; padding-block:var(--space-10) var(--space-12); }
  .hero__emblem{ width:clamp(180px, 46vw, 300px); margin-bottom:var(--space-3); }
  .hero__title{ margin-bottom:var(--space-4); }
  .hero__sub{ margin-bottom:var(--space-6); }
  .scroll-cue{ display:none; }
}
@media (max-width:520px){
  .hero{ padding-block:var(--space-8) var(--space-10); }
  .hero__emblem{ width:clamp(160px, 50vw, 240px); }
}
@media (max-width:380px){
  .hero__emblem{ width:clamp(140px, 52vw, 200px); }
}

/* ---------- Ornamental divider — smaller on mobile ---------- */
@media (max-width:860px){
  .divider{ padding-block:var(--space-5); }
  .divider .line{ width:min(140px, 30vw); }
  .divider .glyph svg{ width:20px; height:20px; }
}
@media (max-width:520px){
  .divider{ padding-block:var(--space-4); gap:var(--space-3); }
}

/* ---------- Section spacing — tighter on mobile ---------- */
@media (max-width:860px){
  .section{ padding-block:clamp(var(--space-12), 8vw, var(--space-20)); }
  .section__head{ margin-bottom:clamp(var(--space-6), 4vw, var(--space-10)); }
}
@media (max-width:520px){
  .section{ padding-block:var(--space-12); }
}

/* ---------- Container edges — a touch more room on small screens ---------- */
@media (max-width:520px){
  .container{ width:min(var(--content), 94%); }
  .container--narrow{ width:min(760px, 94%); }
}

/* ---------- Steps / Cards — tighter mobile padding ---------- */
@media (max-width:520px){
  .step{ padding:var(--space-6) var(--space-5); }
  .step__icon{ width:44px; height:44px; margin-bottom:var(--space-4); }
  .step__icon svg{ width:22px; height:22px; }
  .step__num{ font-size:2rem; top:var(--space-4); right:var(--space-5); }
  .card{ padding:var(--space-6) var(--space-5) var(--space-5); }
  .card__amt{ font-size:2.2rem; }
  .card__list li{ padding-left:1.4rem; }
}

/* ---------- Buttons — comfortable touch targets ---------- */
@media (max-width:520px){
  .btn{ padding:.9em 1.5em; min-height:44px; }
  .btn--lg{ padding:1em 1.8em; }
}

/* ---------- FAQ — tighter on mobile ---------- */
@media (max-width:520px){
  .faq__item summary{ padding:var(--space-4) var(--space-5); font-size:var(--text-base); gap:var(--space-3); }
  .faq__body{ padding:0 var(--space-5) var(--space-4); }
}

/* ---------- Addons / trustline — better wrapping ---------- */
@media (max-width:520px){
  .addons{ font-size:var(--text-xs); line-height:1.9; }
  .addons .dot{ display:none; }
  .addons__label{ display:block; margin-right:0; margin-bottom:var(--space-2); }
  .trustline{ font-size:var(--text-base); }
}

/* ---------- CTA band — tighter on mobile ---------- */
@media (max-width:520px){
  .cta-band{ padding:var(--space-10) var(--space-5); }
  .cta-band__title{ font-size:var(--text-xl); }
}

/* ---------- Footer — tighter on mobile ---------- */
@media (max-width:520px){
  .footer{ padding-block:var(--space-10) var(--space-8); }
  .footer__brand span{ font-size:1rem; }
  .footer__tag{ font-size:var(--text-base); }
}

/* ---------- Modal — comfortable on small screens ---------- */
@media (max-width:520px){
  .modal__dialog{
    width:min(440px, 94%); padding:var(--space-8) var(--space-5) var(--space-6);
  }
  .modal__title{ font-size:var(--text-lg); }
  .modal__opt{ padding:.85em 1em; min-height:52px; }
  .modal__close{ width:40px; height:40px; }
}

/* ---------- Checkout tightening ---------- */
@media (max-width:820px){
  .checkout__grid{ gap:var(--space-8); }
}
@media (max-width:520px){
  .checkout{ padding-block:var(--space-10) var(--space-12); }
  .summary{ padding:var(--space-6) var(--space-5); }
  .summary__price{ font-size:2rem; }
  .field{ margin-bottom:var(--space-4); }
  .field input, .field select, .field textarea{ padding:.75em .9em; }
  .pay-mount{ padding:var(--space-6) var(--space-4); }
  .pay-fallback__opts .btn{ flex:1 1 100%; }
}

/* ---------- Receive section — stack cleaner ---------- */
@media (max-width:760px){
  .receive{ gap:var(--space-8); }
  .tarot{ width:min(240px, 70%); transform:rotate(0); }
}

/* ---------- Landscape phones (short height) ---------- */
@media (max-width:920px) and (orientation:landscape) and (max-height:520px){
  .hero{ min-height:auto; padding-block:var(--space-8) var(--space-10); }
  .hero__emblem{ width:clamp(120px, 22vh, 180px); }
  .scroll-cue{ display:none; }
  .nav__inner{ padding-block:var(--space-2); }
}

/* ---------- Extra-large screens — cap content nicely ---------- */
@media (min-width:1600px){
  :root{ --content: 1280px; }
}

/* Prevent long words / URLs from overflowing on any screen */
p, li, h1, h2, h3, summary, .card__meta{ overflow-wrap:anywhere; word-break:break-word; }
h1, h2, h3, summary{ word-break:normal; }