html { scroll-behavior: smooth; scroll-padding-top: 6rem; }

.nav-link { position: relative; padding: .25rem 0; transition: color .2s; }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: #c99a3a; transition: width .25s ease;
}
.nav-link:hover { color: #561a3a; }
.nav-link:hover::after { width: 100%; }

.mobile-menu { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.mobile-menu.open { max-height: 30rem; }

.hero-arch {
  background:
    radial-gradient(circle at 70% 30%, rgba(201,154,58,.22), transparent 55%),
    linear-gradient(180deg, #f7f0e5 0%, #fcf9f4 100%);
}

.arch-frame {
  border-radius: 999px 999px 2rem 2rem;
  background: linear-gradient(180deg, #561a3a 0%, #2a0c1c 100%);
}

.pack-img { aspect-ratio: 4 / 3; object-fit: contain; max-width: 100%; height: auto; }

.dose-tab {
  padding: .7rem 1.4rem; border-radius: .6rem; font-weight: 500;
  border: 1px solid #ece0cc; background: #fff; color: #561a3a; transition: all .2s;
}
.dose-tab.active { background: #561a3a; border-color: #561a3a; color: #fff; }

.ornament {
  display: inline-block; width: 3rem; height: 2px; background: #c99a3a; vertical-align: middle;
}

.ind-row { transition: background .2s; }
.ind-row:hover { background: #fff; }

details.faq summary { list-style: none; cursor: pointer; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary .chev { transition: transform .25s ease; }
details.faq[open] summary .chev { transform: rotate(180deg); }