:root {
  --ink: #08171c;
  --ink-soft: #18333a;
  --muted: #64757a;
  --paper: #ffffff;
  --canvas: #f7fbf8;
  --canvas-2: #eef7f2;
  --navy: #071b1c;
  --navy-2: #0b2c2b;
  --green: #0b7354;
  --green-2: #17a978;
  --lime: #caff58;
  --cyan: #5ce9ff;
  --gold: #f4c45f;
  --orange: #ff9358;
  --line: rgba(8, 42, 39, 0.12);
  --line-strong: rgba(8, 42, 39, 0.19);
  --shadow-sm: 0 10px 30px rgba(8, 36, 34, 0.09);
  --shadow: 0 24px 70px rgba(8, 36, 34, 0.14);
  --shadow-lg: 0 34px 100px rgba(1, 22, 20, 0.22);
  --radius-sm: 16px;
  --radius: 24px;
  --radius-lg: 34px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 14%, rgba(92, 233, 255, 0.08), transparent 24rem),
    radial-gradient(circle at 95% 28%, rgba(202, 255, 88, 0.09), transparent 26rem),
    linear-gradient(180deg, #fbfdfb 0%, var(--canvas) 46%, #ffffff 100%);
  line-height: 1.55;
}
body.drawer-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(92, 233, 255, 0.62);
  outline-offset: 3px;
}
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

/* Announcement + navigation */
.announcement {
  position: relative;
  z-index: 70;
  padding: 9px 16px;
  text-align: center;
  color: #d9fff1;
  background: #061918;
  font-size: 0.78rem;
  letter-spacing: 0.035em;
}
.announcement strong { color: var(--lime); }
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid rgba(8, 42, 39, 0.11);
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 30px rgba(7,39,35,.07);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
}
.nav-inner {
  position: relative;
  min-height: 76px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-weight: 950;
  letter-spacing: -0.035em;
}
.brand-mark {
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, var(--green-2), #075b47 58%, #093331);
  box-shadow: 0 10px 26px rgba(11, 115, 84, 0.22);
}
.brand-mark svg { width: 23px; height: 23px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.02; white-space: nowrap; }
.brand-copy small {
  margin-bottom: 5px;
  color: var(--green);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav-links {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 1.4vw, 22px);
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 800;
}
.nav-links > a:not(.btn) {
  padding: 8px 10px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.nav-links > a:not(.btn):hover { color: var(--green); background: rgba(11,115,84,.065); }
.menu-button {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
}
.shortlist-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: #fff;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 7px 22px rgba(7, 39, 35, 0.05);
}
.shortlist-button > span:last-child {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--ink);
  font-size: 0.69rem;
}
.shortlist-button.has-items {
  border-color: rgba(23, 169, 120, .4);
  box-shadow: 0 0 0 4px rgba(23,169,120,.08), var(--shadow-sm);
}

/* Buttons */
.btn {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 17px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.15;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--green-2), var(--green));
  box-shadow: 0 12px 28px rgba(11, 115, 84, .24);
}
.btn-primary:hover { box-shadow: 0 16px 34px rgba(11, 115, 84, .3); }
.btn-soft {
  color: var(--green);
  background: #eef8f3;
  border-color: rgba(11,115,84,.13);
}
.btn-outline {
  color: #fff;
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.23);
}
.pulse { isolation: isolate; }
.pulse::before, .pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  border: 1px solid currentColor;
  border-radius: inherit;
  opacity: .4;
  pointer-events: none;
  animation: ringPulse 2.3s ease-out infinite;
}
.pulse::after { animation-delay: 1.15s; }
@keyframes ringPulse { to { inset: -17px; opacity: 0; } }

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding: 74px 0 86px;
  color: #fff;
  background:
    radial-gradient(circle at 81% 28%, rgba(202,255,88,.19), transparent 24rem),
    radial-gradient(circle at 70% 85%, rgba(92,233,255,.13), transparent 23rem),
    linear-gradient(126deg, #061817 0%, #0a342f 48%, #0b654b 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .35;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to right, transparent, #000 38%, #000);
}
.hero::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -190px;
  top: -115px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(255,255,255,.02), 0 0 0 140px rgba(255,255,255,.014);
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(390px, .97fr);
  align-items: center;
  gap: clamp(40px, 6vw, 76px);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--green);
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero .eyebrow { color: var(--lime); }
.hero h1 {
  max-width: 720px;
  margin: 0 0 22px;
  font-size: clamp(3.2rem, 5.8vw, 5.7rem);
  line-height: .93;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.hero h1 em { color: var(--lime); font-style: normal; }
.hero-lead { max-width: 650px; margin: 0 0 27px; color: #d9e9e3; font-size: 1.07rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 25px; }
.hero .btn-primary {
  color: #06241b;
  background: linear-gradient(135deg, var(--lime), #8cf39a);
  box-shadow: 0 13px 34px rgba(202,255,88,.18);
}
.trust-row { display: flex; flex-wrap: wrap; gap: 9px; }
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.095);
  border-radius: 999px;
  color: #dff2eb;
  background: rgba(255,255,255,.065);
  font-size: .72rem;
}
.trust-pill b { color: var(--lime); }
.hero-showcase { position: relative; min-height: 500px; isolation: isolate; }
.showcase-orb {
  position: absolute;
  inset: 4% 4% 2% 2%;
  z-index: -1;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 38% 62% 57% 43% / 44% 39% 61% 56%;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.16), transparent 40%),
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.025));
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 30px 80px rgba(0,0,0,.22);
  animation: showcaseFloat 8s ease-in-out infinite;
}
@keyframes showcaseFloat { 50% { transform: translateY(-8px) rotate(1deg); } }
.hero-product {
  position: absolute;
  max-height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 25px 30px rgba(0,0,0,.28));
}
.hero-product.main { width: 57%; right: 7%; top: 4%; z-index: 2; }
.hero-product.small-a { width: 34%; left: 1%; bottom: 0; z-index: 4; }
.hero-product.small-b { width: 32%; right: 0; bottom: 0; z-index: 3; }
.hero-mini-card {
  position: absolute;
  left: 1%;
  top: 10%;
  z-index: 5;
  max-width: 230px;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  color: #fff;
  background: rgba(6, 27, 25, .48);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
}
.hero-mini-card strong { display: block; margin-bottom: 3px; font-size: .91rem; }
.hero-mini-card span { color: #c9ded7; font-size: .72rem; }

/* Value strip */
.value-strip { position: relative; z-index: 10; margin-top: -39px; }
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.97);
  box-shadow: var(--shadow);
}
.value-item { min-width: 0; padding: 19px 20px; border-right: 1px solid var(--line); }
.value-item:last-child { border-right: 0; }
.value-item strong { display: block; margin-bottom: 3px; font-size: .9rem; }
.value-item span { display: block; color: var(--muted); font-size: .73rem; }

/* Sections */
.section { padding: 80px 0; }
.section-alt { background: linear-gradient(180deg, #f1f8f4, #eef6f2); }
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 34px;
  margin-bottom: 29px;
}
.section-head > div { min-width: 0; }
.section-head h2 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(2.15rem, 4vw, 3.35rem);
  line-height: .98;
  letter-spacing: -.047em;
  text-wrap: balance;
}
.section-head p { max-width: 540px; margin: 0; color: var(--muted); }

/* Matcher */
.matcher { padding: 76px 0 42px; }
.matcher-shell {
  display: grid;
  grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
  align-items: center;
  gap: 31px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), #f0f8f4);
  box-shadow: var(--shadow);
}
.matcher-copy h2 { margin: 0 0 14px; font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -.052em; }
.matcher-copy p { margin: 0; color: var(--muted); }
.matcher-form {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 23px;
  border-radius: 25px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 5%, rgba(202,255,88,.11), transparent 13rem),
    linear-gradient(145deg, #081f1e, #0a352f);
  box-shadow: 0 22px 50px rgba(4,34,31,.19);
}
.field { min-width: 0; }
.field label {
  display: block;
  margin: 0 0 7px;
  color: #bdd7cf;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.field select,
.shop-search input {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border-radius: 13px;
  outline: none;
}
.field select {
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  background: rgba(255,255,255,.09);
}
.field select option { color: #111; background: #fff; }
.matcher-form > .btn { min-height: 48px; white-space: nowrap; }
.matcher-result {
  grid-column: 1 / -1;
  padding: 17px;
  border: 1px solid rgba(11,115,84,.1);
  border-radius: 18px;
  color: var(--ink);
  background: #fff;
}
.matcher-result .eyebrow { margin-bottom: 6px; }
.matcher-result h3 { margin: 0 0 12px; font-size: 1.17rem; line-height: 1.2; }
.matcher-result p { margin: 11px 0 0; color: var(--muted); font-size: .82rem; }
.matcher-result p a { color: var(--green); font-weight: 900; }
.match-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.match-picks a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #f7fbf8;
}
.match-picks a:hover { border-color: rgba(11,115,84,.32); }
.match-picks span { color: var(--muted); font-size: .72rem; }

/* Shop controls */
.shop-toolbar {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: start;
  gap: 20px;
  margin-bottom: 25px;
}
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  min-height: 39px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: #fff;
  font-size: .74rem;
  font-weight: 850;
  cursor: pointer;
  transition: .18s ease;
}
.filter:hover { border-color: rgba(11,115,84,.34); color: var(--green); }
.filter.active {
  border-color: #0b6850;
  color: #fff;
  background: linear-gradient(135deg, #0d7758, #0a5b48);
  box-shadow: 0 8px 20px rgba(11,115,84,.16);
}
.shop-search {
  display: grid;
  grid-template-columns: minmax(215px,280px);
  gap: 6px;
  justify-items: end;
}
.shop-search input {
  border: 1px solid var(--line);
  color: var(--ink);
  background: #fff;
  box-shadow: 0 7px 22px rgba(7,39,35,.04);
}
.shop-search input::placeholder { color: #8c9a9d; }
.shop-search span { color: var(--muted); font-size: .7rem; font-weight: 800; }

/* Product grid/cards */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 20px;
  align-items: stretch;
}
.product-card {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 10px 32px rgba(8,36,34,.075);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(11,115,84,.21);
  box-shadow: 0 23px 56px rgba(8,36,34,.14);
}
.product-media {
  position: relative;
  height: 282px;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.product-media::after {
  content: "";
  position: absolute;
  inset: auto 10% 7% 10%;
  z-index: -1;
  height: 23px;
  border-radius: 50%;
  background: rgba(4, 31, 28, .12);
  filter: blur(11px);
}
.product-media img {
  width: 86%;
  height: 84%;
  object-fit: contain;
  object-position: center;
  transition: transform .28s ease;
}
.product-card:hover .product-media img { transform: scale(1.045); }
.tone-berry { background: linear-gradient(145deg,#fff0f4,#f8dce4); }
.tone-blue { background: linear-gradient(145deg,#eff7ff,#dcecff); }
.tone-gold { background: linear-gradient(145deg,#fff9e9,#ffefbd); }
.tone-green { background: linear-gradient(145deg,#effcf3,#d9f5e2); }
.tone-aqua { background: linear-gradient(145deg,#eefcff,#d6f4fb); }
.tone-violet { background: linear-gradient(145deg,#f5f0ff,#e7ddff); }
.tone-orange { background: linear-gradient(145deg,#fff2e9,#ffe2ce); }
.tone-emerald { background: linear-gradient(145deg,#e8f8f1,#ccebdd); }
.product-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 5;
  max-width: calc(100% - 62px);
  padding: 6px 9px;
  border-radius: 999px;
  color: #fff;
  background: rgba(6,27,25,.88);
  box-shadow: 0 5px 14px rgba(0,0,0,.08);
  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .07em;
  line-height: 1.25;
}
.save-button {
  position: absolute;
  right: 11px;
  top: 11px;
  z-index: 6;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 50%;
  color: #455;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  font-size: 1.15rem;
  cursor: pointer;
}
.save-button.is-saved { color: #ca3152; background: #fff4f6; }
.image-fallback { display: none; position: relative; z-index: 4; padding: 24px; text-align: center; font-weight: 900; }
.product-media.image-failed .image-fallback { display: block; }
.product-content { flex: 1; display: flex; flex-direction: column; padding: 17px 18px 17px; }
.product-kicker {
  margin-bottom: 5px;
  color: var(--green);
  font-size: .64rem;
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.product-content h3 { margin: 0 0 8px; font-size: 1.19rem; line-height: 1.08; letter-spacing: -.03em; }
.product-copy {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: .79rem;
}
.price-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.price-row strong { font-size: 1.17rem; line-height: 1; }
.price-row span { max-width: 50%; color: var(--muted); text-align: right; font-size: .65rem; line-height: 1.25; }
.trial-line {
  margin-top: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(222,168,19,.14);
  border-radius: 10px;
  color: #775700;
  background: #fff8dc;
  font-size: .67rem;
  font-weight: 850;
}
.product-actions {
  display: grid;
  grid-template-columns: minmax(86px,.78fr) minmax(0,1.22fr);
  gap: 8px;
  margin-top: 13px;
}
.product-actions .btn { min-width: 0; min-height: 41px; padding: 9px 10px; font-size: .7rem; white-space: normal; }
.no-results {
  grid-column: 1 / -1;
  padding: 55px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: 24px;
  text-align: center;
  background: rgba(255,255,255,.75);
}
.no-results strong, .no-results span { display: block; }
.no-results span { margin-top: 5px; color: var(--muted); }

/* Trial feature */
#trials.section { padding-top: 28px; padding-bottom: 28px; }
.trial-banner {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  border-radius: 30px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 15%, rgba(202,255,88,.14), transparent 16rem),
    linear-gradient(120deg,#0b211d,#154d3a);
  box-shadow: var(--shadow);
}
.trial-banner::after {
  content: "TRY";
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-52%);
  color: rgba(255,255,255,.028);
  font-size: clamp(6rem, 12vw, 9rem);
  font-weight: 1000;
  letter-spacing: -.08em;
  pointer-events: none;
}
.trial-copy { position: relative; z-index: 3; }
.trial-banner h3 { margin: 0 0 7px; max-width: 720px; font-size: clamp(1.45rem,2.35vw,1.9rem); line-height: 1.04; letter-spacing: -.038em; }
.trial-banner p { max-width: 720px; margin: 0; color: #c9ddd5; font-size: .84rem; line-height: 1.5; }
.trial-actions { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.trial-actions .btn { min-height: 39px; padding: 8px 14px; font-size: .72rem; }
.trial-preview {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, 92px);
  gap: 8px;
  align-items: center;
  width: max-content;
  max-width: 100%;
}
.trial-thumb {
  width: 92px;
  height: 108px;
  min-width: 0;
  padding: 7px 6px 6px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 18px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 17px 34px rgba(0,0,0,.16);
  transform: rotate(-2deg);
}
.trial-thumb:nth-child(2) { transform: translateY(-6px) rotate(2deg); }
.trial-thumb:nth-child(3) { transform: rotate(1deg); }
.trial-thumb img { display:block; width: 78px; max-width:100%; height: 72px; max-height:72px; margin:0 auto; object-fit: contain; }
.trial-thumb span { display: block; padding-top: 4px; color: #16302f; text-align: center; font-size: .56rem; font-weight: 950; line-height: 1.12; }

/* Routine cards */
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.feature-card {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  border-radius: 29px;
  color: #fff;
  background: #0b211f;
  box-shadow: var(--shadow);
  isolation: isolate;
}
.feature-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 4;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  color: #08231d;
  background: rgba(202,255,88,.94);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  font-size: .62rem;
  font-weight: 1000;
  letter-spacing: .08em;
}
.feature-badge-value { color: #fff; background: rgba(11,115,84,.94); }

.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.02) 22%, rgba(2,17,15,.15) 47%, rgba(2,17,15,.88) 100%);
}
.feature-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.feature-card.value img { object-fit: contain; padding: 18px; background: radial-gradient(circle at 50% 38%, #e5f8ed 0%, #b5ddc8 48%, #72aa91 100%); }
.feature-content { position: relative; z-index: 2; }
.feature-content h3 { margin: 0 0 8px; font-size: clamp(2rem, 4vw, 2.55rem); line-height: 1; letter-spacing: -.045em; }
.feature-content p { max-width: 520px; margin: 0 0 17px; color: #e4eee9; }
.feature-content .price-big { margin-bottom: 13px; font-size: 1.35rem; font-weight: 1000; }
.feature-content .btn { max-width: 100%; }

/* Quiz bridge */
.quiz-bridge {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0,1.16fr) minmax(300px,.84fr);
  align-items: center;
  gap: 38px;
  padding: 43px;
  border-radius: 34px;
  color: #fff;
  background:
    radial-gradient(circle at 92% 12%, rgba(202,255,88,.13), transparent 17rem),
    linear-gradient(140deg,#061918,#0d493c 60%,#0b7354);
  box-shadow: var(--shadow);
}
.quiz-bridge::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  right: -70px;
  top: -105px;
  border-radius: 50%;
  background: rgba(202,255,88,.065);
  box-shadow: 0 0 0 48px rgba(92,233,255,.03);
}
.quiz-bridge h2 { margin: 0 0 15px; font-size: clamp(2.45rem, 5vw, 4.4rem); line-height: .95; letter-spacing: -.057em; text-wrap: balance; }
.quiz-bridge h2 em { color: var(--lime); font-style: normal; }
.quiz-bridge p { max-width: 680px; color: #d1e4dc; }
.quiz-card {
  position: relative;
  z-index: 2;
  padding: 21px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px;
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(10px);
}
.quiz-step { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.quiz-step:first-child { padding-top: 2px; }
.quiz-step:last-child { padding-bottom: 2px; border-bottom: 0; }
.quiz-num { flex: 0 0 29px; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: #082119; background: var(--lime); font-size: .7rem; font-weight: 1000; }
.quiz-step strong { display: block; }
.quiz-step span { color: #c4dcd3; font-size: .75rem; }

/* Opportunity */
.opportunity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(8,36,34,.055);
}
.opportunity h3 { margin: 0 0 6px; font-size: 1.42rem; line-height: 1.15; letter-spacing: -.025em; }
.opportunity p { margin: 0; color: var(--muted); font-size: .87rem; }
.opportunity > a { flex: 0 0 auto; white-space: nowrap; }

/* Disclosure + footer */
.disclaimer { padding: 23px 0; border-top: 1px solid var(--line); color: #6b7979; background: #f1f5f3; font-size: .72rem; }
.disclaimer p { margin: 5px 0; }
.footer { padding: 42px 0 27px; color: #c6d9d2; background: #061817; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 38px; }
.footer h4 { margin: 0 0 11px; color: #fff; }
.footer a { display: block; margin: 8px 0; color: #b6cbc3; font-size: .83rem; }
.footer a:hover { color: var(--lime); }
.footer-brand p { max-width: 475px; font-size: .82rem; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 29px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.08); color: #8ca49b; font-size: .7rem; }

/* Modal */
.modal {
  width: min(820px, calc(100% - 28px));
  max-height: min(88vh, 760px);
  overflow: auto;
  padding: 0;
  border: 0;
  border-radius: 27px;
  background: #fff;
  box-shadow: 0 35px 110px rgba(0,0,0,.36);
}
.modal::backdrop { background: rgba(1,14,13,.7); backdrop-filter: blur(5px); }
.modal-close {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 10;
  width: 39px;
  height: 39px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.15);
  font-size: 1.25rem;
  cursor: pointer;
}
.modal-grid { display: grid; grid-template-columns: minmax(300px,.9fr) minmax(0,1.1fr); min-height: 500px; }
.modal-media { min-height: 100%; display: grid; place-items: center; }
.modal-media img { width: 82%; height: 82%; object-fit: contain; }
.modal-grid > div:last-child { padding: 38px 34px; align-self: center; }
.modal-grid h2 { margin: 0 0 11px; font-size: 2.25rem; line-height: 1; letter-spacing: -.05em; }
.modal-price { display: flex; align-items: center; gap: 11px; }
.modal-price strong { font-size: 1.4rem; }
.modal-price span { color: var(--muted); font-size: .72rem; }
.modal-grid p, .modal-grid li { color: var(--muted); font-size: .84rem; }
.modal-grid ul { padding-left: 18px; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 19px; }
.microcopy { margin-top: 14px !important; font-size: .67rem !important; }

/* Saved picks drawer */
.shortlist-drawer {
  position: fixed;
  right: 18px;
  top: 92px;
  z-index: 80;
  width: min(410px, calc(100% - 36px));
  max-height: calc(100dvh - 112px);
  overflow: auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  transform: translateX(calc(100% + 45px));
  visibility: hidden;
  transition: transform .28s ease, visibility .28s ease;
}
.shortlist-drawer.open { transform: translateX(0); visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.drawer-head h3 { margin: 0; }
.drawer-head button { width: 35px; height: 35px; padding: 0; border: 0; border-radius: 50%; background: #edf4f1; font-size: 1.15rem; cursor: pointer; }
.shortlist-item { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 9px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.shortlist-item div { min-width: 0; display: flex; flex-direction: column; }
.shortlist-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shortlist-item span { color: var(--muted); font-size: .69rem; }
.shortlist-item a { color: var(--green); font-size: .72rem; font-weight: 900; }
.shortlist-item button { border: 0; color: #94a2a2; background: transparent; font-size: 1.1rem; cursor: pointer; }
.drawer-empty { padding: 18px 0; color: var(--muted); font-size: .82rem; }
.drawer-footer { margin-top: 14px; }
.drawer-footer .btn { width: 100%; }
.drawer-note { margin-top: 8px; color: var(--muted); font-size: .67rem; }

/* Reveal — never hide content while waiting for IntersectionObserver.
   This prevents blank sections in full-page captures, slow browsers and cached-script states. */
.reveal { opacity: 1; transform: none; }
.reveal.in-view { animation: reveal-in .52s ease both; }
@keyframes reveal-in {
  from { opacity: .9; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Tablet */
@media (max-width: 1100px) {
  .nav-inner { grid-template-columns: auto auto auto; justify-content: space-between; gap: 12px; }
  .menu-button { display: grid; order: 2; }
  .shortlist-button { order: 3; }
  .nav-links {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    z-index: 65;
    display: none;
    align-items: stretch;
    gap: 4px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255,255,255,.98);
    box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; flex-direction: column; }
  .nav-links > a { padding: 10px 11px; border-radius: 11px; }
  .nav-links > a:not(.btn):hover { background: #f1f8f4; }
  .nav-links .btn { margin-top: 4px; }
  .hero-grid { grid-template-columns: minmax(0,1fr) minmax(330px,.82fr); gap: 36px; }
  .hero-showcase { min-height: 430px; }
  .product-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .matcher-shell { grid-template-columns: 1fr; }
  .quiz-bridge { grid-template-columns: 1fr .82fr; }
}

@media (max-width: 860px) {
  .hero { padding: 58px 0 78px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-showcase { min-height: 390px; max-width: 620px; width: 100%; margin-inline: auto; }
  .value-grid { grid-template-columns: 1fr 1fr; }
  .value-item:nth-child(2) { border-right: 0; }
  .value-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .matcher-form { grid-template-columns: 1fr 1fr; }
  .matcher-form > .btn { grid-column: 1 / -1; width: 100%; }
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .shop-toolbar { grid-template-columns: 1fr; }
  .shop-search { justify-items: stretch; grid-template-columns: minmax(0,1fr); }
  .shop-search span { text-align: right; }
  .trial-banner { grid-template-columns: 1fr; }
  .trial-preview { max-width: 520px; }
  .feature-split { grid-template-columns: 1fr; }
  .quiz-bridge { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* Mobile */
@media (max-width: 620px) {
  html { scroll-padding-top: 78px; }
  .container { width: min(100% - 24px, 1180px); }
  .announcement { padding: 7px 10px; font-size: .66rem; line-height: 1.35; }
  .nav-inner { min-height: 66px; grid-template-columns: minmax(0,1fr) auto auto; }
  .brand { gap: 9px; min-width: 0; }
  .brand-mark { flex-basis: 38px; width: 38px; height: 38px; border-radius: 12px; }
  .brand-copy { overflow: hidden; text-overflow: ellipsis; }
  .brand-copy small { display: none; }
  .save-label { display: none; }
  .shortlist-button { min-width: 62px; justify-content: center; padding: 8px 10px; }
  .menu-button { width: 40px; height: 40px; }
  .nav-links { left: 0; right: 0; top: calc(100% + 8px); }

  .hero { padding: 47px 0 64px; }
  .hero h1 { font-size: clamp(3rem, 15vw, 4.1rem); }
  .hero-lead { font-size: .98rem; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .trust-row { display: grid; grid-template-columns: 1fr 1fr; }
  .trust-pill { justify-content: center; text-align: center; border-radius: 14px; }
  .hero-showcase { min-height: 315px; }
  .showcase-orb { inset: 3% 2% 1%; }
  .hero-product.main { width: 58%; right: 4%; top: 5%; }
  .hero-product.small-a { width: 34%; left: 0; bottom: 0; }
  .hero-product.small-b { width: 31%; right: 0; bottom: 0; }
  .hero-mini-card { left: 0; top: 4%; max-width: 175px; padding: 10px 11px; }
  .hero-mini-card strong { font-size: .78rem; }
  .hero-mini-card span { font-size: .62rem; }

  .value-strip { margin-top: -25px; }
  .value-item { padding: 15px 13px; }
  .value-item strong { font-size: .8rem; }
  .value-item span { font-size: .65rem; }

  .section { padding: 58px 0; }
  .section-head { display: block; margin-bottom: 23px; }
  .section-head p { margin-top: 11px; }
  .matcher { padding: 54px 0 25px; }
  .matcher-shell { padding: 17px; border-radius: 25px; }
  .matcher-form { grid-template-columns: 1fr; padding: 17px; }
  .matcher-form > .btn { grid-column: auto; }
  .match-picks { grid-template-columns: 1fr; }

  .filters { gap: 7px; }
  .filter { min-height: 37px; padding: 7px 10px; font-size: .69rem; }
  .product-grid { grid-template-columns: 1fr; gap: 17px; }
  .product-card { border-radius: 22px; }
  .product-media { height: 300px; }
  .product-media img { width: 78%; height: 82%; }
  .product-content { padding: 18px; }
  .product-content h3 { font-size: 1.32rem; }
  .product-copy { font-size: .82rem; }
  .product-actions { grid-template-columns: 1fr 1.35fr; }
  .product-actions .btn { min-height: 44px; font-size: .72rem; }

  #trials.section { padding-top: 24px; padding-bottom: 24px; }
  .trial-banner { grid-template-columns: 1fr; gap: 14px; padding: 17px; border-radius: 23px; }
  .trial-banner h3 { font-size: 1.42rem; }
  .trial-banner p { font-size: .78rem; line-height: 1.45; }
  .trial-actions { margin-top: 12px; }
  .trial-actions .btn { width: 100%; }
  .trial-preview { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; width:100%; }
  .trial-thumb { width:auto; height:94px; padding: 6px 5px; border-radius: 14px; }
  .trial-thumb img { width:62px; height:58px; max-height:58px; }
  .trial-thumb span { font-size: .54rem; }
  .trial-thumb:nth-child(2) { transform: translateY(-4px) rotate(2deg); }
  .feature-card { min-height: 410px; padding: 22px; border-radius: 25px; }
  .feature-card.value img { padding: 8px; }
  .feature-content .btn { width: 100%; }
  .quiz-bridge { padding: 25px 20px; border-radius: 26px; }
  .quiz-bridge .hero-actions { margin-bottom: 0 !important; }
  .opportunity { display: block; padding: 24px 20px; }
  .opportunity > a { width: 100%; margin-top: 17px; white-space: normal; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { display: block; }
  .footer-bottom span { display: block; margin-top: 7px; }

  .modal { width: calc(100% - 18px); max-height: 92dvh; border-radius: 22px; }
  .modal-grid { grid-template-columns: 1fr; min-height: 0; }
  .modal-media { min-height: 265px; }
  .modal-media img { width: 75%; height: 78%; }
  .modal-grid > div:last-child { padding: 25px 20px; }
  .modal-grid h2 { font-size: 2rem; }
  .modal-actions { display: grid; grid-template-columns: 1fr; }
  .shortlist-drawer { right: 9px; top: 78px; width: calc(100% - 18px); max-height: calc(100dvh - 88px); }
}

@media (max-width: 390px) {
  .trust-row { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; }
  .value-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .value-item:last-child { border-bottom: 0; }
  .product-actions { grid-template-columns: 1fr; }
  .hero-showcase { min-height: 285px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* v1.3 — $25 Zilara Gift Card conversion system */
.gift-teaser { position: relative; z-index: 4; margin-top: 24px; }
.gift-teaser-inner {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(11,115,84,.16);
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 50%, rgba(202,255,88,.2), transparent 28%),
    linear-gradient(115deg, #082a27, #0b5e48 58%, #13795b);
  box-shadow: 0 18px 45px rgba(7,52,43,.14);
}
.gift-teaser-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.11); font-size: 1.35rem; }
.gift-teaser-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.gift-teaser-copy strong { font-size: .95rem; }
.gift-teaser-copy small { margin-top: 4px; color: #d7eee7; font-size: .7rem; }
.gift-teaser-cta { color: var(--lime); font-size: .78rem; font-weight: 950; white-space: nowrap; }
.gift-teaser-inner:hover .gift-teaser-cta { transform: translateX(3px); }

.gift-card-section { padding-top: 48px; padding-bottom: 48px; }
.gift-card-shell {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr);
  gap: clamp(28px,4vw,58px);
  align-items: center;
  padding: clamp(28px,4.8vw,60px);
  border: 1px solid rgba(11,115,84,.14);
  border-radius: 34px;
  background:
    radial-gradient(circle at 10% 16%, rgba(202,255,88,.18), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(92,233,255,.1), transparent 34%),
    #fff;
  box-shadow: var(--shadow);
}
.gift-card-shell::after { content:""; position:absolute; inset:auto -90px -120px auto; width:330px; height:330px; border:1px solid rgba(11,115,84,.08); border-radius:50%; box-shadow:0 0 0 48px rgba(11,115,84,.025),0 0 0 96px rgba(11,115,84,.018); pointer-events:none; }
.gift-card-visual { position: relative; z-index: 1; }
.gift-card-ribbon { display:inline-flex; margin:0 0 12px 12px; padding:7px 10px; border-radius:999px; color:#0c3a30; background:var(--lime); font-size:.62rem; font-weight:950; letter-spacing:.12em; }
.gift-card-face {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  padding: 28px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 18%, rgba(202,255,88,.28), transparent 23%),
    radial-gradient(circle at 15% 100%, rgba(92,233,255,.16), transparent 34%),
    linear-gradient(145deg, #062a27, #0b7354 62%, #0d4c41);
  box-shadow: 0 28px 70px rgba(6,50,43,.26);
  transform: rotate(-2deg);
}
.gift-card-face::before { content:""; position:absolute; inset:-75px auto auto -70px; width:210px; height:210px; border:1px solid rgba(255,255,255,.13); border-radius:50%; box-shadow:0 0 0 34px rgba(255,255,255,.025),0 0 0 70px rgba(255,255,255,.018); }
.gift-card-logo { position:relative; z-index:1; font-family: Georgia,serif; font-size:1.55rem; letter-spacing:.14em; }
.gift-card-value { position:relative; z-index:1; display:flex; align-items:flex-start; margin-top:28px; font-size:6rem; line-height:.82; font-weight:1000; letter-spacing:-.08em; }
.gift-card-value span { margin:8px 5px 0 0; color:var(--lime); font-size:2.1rem; }
.gift-card-label { position:relative; z-index:1; margin-top:16px; color:#dcfff4; font-size:.86rem; font-weight:950; letter-spacing:.2em; }
.gift-card-note { position:absolute; left:28px; bottom:24px; color:#bfe6d9; font-size:.68rem; }
.gift-card-stock { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 8px 0; padding:12px 14px; border:1px solid var(--line); border-radius:16px; background:#f7fbf8; }
.gift-card-stock strong { color:var(--green); font-size:1rem; }
.gift-card-stock span { color:var(--muted); font-size:.68rem; text-align:right; }
.gift-card-copy { position:relative; z-index:2; }
.gift-card-copy h2 { max-width:720px; margin:8px 0 14px; font-size:clamp(2.15rem,4.5vw,4rem); line-height:.96; letter-spacing:-.06em; }
.gift-card-copy h2 em { color:var(--green); font-style:normal; }
.gift-card-copy > p { max-width:760px; color:var(--muted); font-size:.94rem; }
.gift-rules { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:20px 0; }
.gift-rules span { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid rgba(11,115,84,.12); border-radius:14px; background:#f5fbf7; color:#23463d; font-size:.73rem; font-weight:800; }
.gift-rules b { width:24px; height:24px; flex:0 0 24px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--green-2); }
.gift-card-form { margin-top:22px; padding:19px; border:1px solid var(--line); border-radius:22px; background:rgba(247,251,248,.9); }
.gift-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.gift-fields label { display:flex; flex-direction:column; gap:6px; color:#24463e; font-size:.68rem; font-weight:900; }
.gift-fields input,.gift-fields select { width:100%; min-height:45px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:13px; color:var(--ink); background:#fff; }
.gift-field-wide { grid-column:1/-1; }
.gift-consent { display:grid; grid-template-columns:auto 1fr; align-items:start; gap:10px; margin:13px 0 0; color:var(--muted); font-size:.68rem; }
.gift-consent input { width:18px; height:18px; margin-top:1px; accent-color:var(--green); }
.gift-form-actions { display:flex; align-items:center; gap:16px; margin-top:16px; }
.btn-gift { color:#081913; background:linear-gradient(135deg,#d8ff76,var(--lime)); box-shadow:0 14px 30px rgba(120,175,35,.22); }
.btn-gift:hover { box-shadow:0 18px 38px rgba(120,175,35,.3); }
.btn-gift:disabled { opacity:.65; cursor:wait; transform:none; }
.btn-gift.is-waitlist { background:linear-gradient(135deg,#eef8f3,#d7eee7); }
.gift-form-status { color:var(--muted); font-size:.68rem; line-height:1.4; }
.gift-form-status.is-success { color:var(--green); font-weight:850; }
.gift-form-status.is-error { color:#a43030; font-weight:850; }
.gift-fineprint { margin:13px 0 0 !important; color:#7a8986 !important; font-size:.62rem !important; line-height:1.5; }
.hp-field { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; }

@media (max-width: 860px) {
  .gift-card-shell { grid-template-columns:1fr; }
  .gift-card-visual { max-width:540px; width:100%; margin-inline:auto; }
  .gift-card-face { min-height:225px; }
  .gift-card-copy { text-align:left; }
}
@media (max-width: 620px) {
  .gift-teaser { margin-top:16px; }
  .gift-teaser-inner { grid-template-columns:auto 1fr; padding:12px 13px; }
  .gift-teaser-cta { grid-column:2; }
  .gift-card-section { padding-top:32px; padding-bottom:32px; }
  .gift-card-shell { padding:20px; border-radius:26px; }
  .gift-card-face { min-height:205px; padding:23px; border-radius:23px; transform:none; }
  .gift-card-value { font-size:5rem; }
  .gift-card-note { left:23px; bottom:20px; }
  .gift-card-stock { display:block; text-align:center; }
  .gift-card-stock span { display:block; margin-top:2px; text-align:center; }
  .gift-rules { grid-template-columns:1fr; }
  .gift-fields { grid-template-columns:1fr; }
  .gift-field-wide { grid-column:auto; }
  .gift-form-actions { display:grid; grid-template-columns:1fr; }
  .btn-gift { width:100%; }
}

/* Gift-card non-JS fallback confirmation */
.request-thanks-wrap { min-height:100dvh; display:grid; place-items:center; padding:30px 18px; background:radial-gradient(circle at 50% 0,rgba(202,255,88,.14),transparent 28rem),linear-gradient(180deg,#f7fbf8,#fff); }
.request-thanks-card { width:min(680px,100%); padding:clamp(30px,6vw,60px); border:1px solid var(--line); border-radius:32px; text-align:center; background:#fff; box-shadow:var(--shadow); }
.request-thanks-icon { width:72px; height:72px; display:grid; place-items:center; margin:18px auto; border-radius:50%; color:#fff; background:var(--green); font-size:2rem; font-weight:950; box-shadow:0 0 0 9px rgba(11,115,84,.08); }
.request-thanks-card.is-error .request-thanks-icon { background:#a43030; box-shadow:0 0 0 9px rgba(164,48,48,.08); }
.request-thanks-card h1 { margin:10px 0 12px; font-size:clamp(2.1rem,6vw,4rem); line-height:.95; letter-spacing:-.055em; }
.request-thanks-card p { max-width:560px; margin:0 auto; color:var(--muted); }
.request-thanks-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:25px; }

/* v1.5 — SEO/GEO/AEO context + Share This Page array */
.discovery-context { padding-top: 44px; padding-bottom: 44px; }
.context-shell {
  display: grid;
  grid-template-columns: minmax(260px,.78fr) minmax(0,1.22fr);
  gap: clamp(24px,4vw,52px);
  align-items: start;
  padding: clamp(26px,4vw,48px);
  border: 1px solid rgba(11,115,84,.14);
  border-radius: 30px;
  background:
    radial-gradient(circle at 10% 0%, rgba(202,255,88,.10), transparent 28%),
    linear-gradient(180deg,#fff,#f7fbf8);
  box-shadow: 0 22px 60px rgba(16,57,48,.08);
}
.context-intro h2 { margin: 8px 0 14px; max-width: 650px; font-size: clamp(2rem,4.3vw,3.55rem); line-height: .98; letter-spacing: -.055em; }
.context-intro p { margin: 0; max-width: 690px; color: var(--muted); font-size: .92rem; line-height: 1.65; }
.context-faq { display: grid; gap: 10px; }
.context-faq details { border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; }
.context-faq summary { cursor: pointer; list-style: none; position: relative; padding: 15px 46px 15px 17px; color: var(--ink); font-size: .82rem; font-weight: 950; }
.context-faq summary::-webkit-details-marker { display: none; }
.context-faq summary::after { content: '+'; position: absolute; right: 17px; top: 50%; transform: translateY(-50%); color: var(--green); font-size: 1.25rem; font-weight: 900; }
.context-faq details[open] summary::after { content: '−'; }
.context-faq p { margin: 0; padding: 0 17px 16px; color: var(--muted); font-size: .78rem; line-height: 1.6; }

.share-section { padding-top: 30px; padding-bottom: 54px; }
.share-shell {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(360px,.9fr);
  gap: 28px;
  align-items: center;
  padding: clamp(26px,4vw,44px);
  border: 1px solid rgba(201,255,88,.25);
  border-radius: 30px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 28%, rgba(202,255,88,.20), transparent 25%),
    radial-gradient(circle at 12% 110%, rgba(79,216,255,.12), transparent 32%),
    linear-gradient(125deg,#062a27 0%,#0b5d49 62%,#0b7455 100%);
  box-shadow: 0 28px 70px rgba(6,50,43,.18);
}
.share-shell::after { content:""; position:absolute; width:260px; height:260px; right:-80px; bottom:-110px; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 0 0 45px rgba(255,255,255,.025),0 0 0 90px rgba(255,255,255,.018); pointer-events:none; }
.share-copy { position: relative; z-index: 1; }
.share-copy .eyebrow { color: var(--lime); }
.share-copy h2 { margin: 8px 0 12px; max-width: 740px; font-size: clamp(2rem,4vw,3.55rem); line-height: .98; letter-spacing: -.055em; }
.share-copy p { margin: 0; max-width: 720px; color: #d8eee7; font-size: .88rem; line-height: 1.65; }
.share-actions { position: relative; z-index: 2; display:flex; align-items:center; justify-content:flex-end; gap:9px; flex-wrap:wrap; }
.share-main,.share-copy-btn,.share-round { border: 0; font: inherit; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.share-main,.share-copy-btn { min-height: 48px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius: 999px; font-size: .76rem; font-weight: 950; }
.share-main { padding: 11px 17px; color:#081a14; background: linear-gradient(135deg,#dfff89,var(--lime)); box-shadow: 0 13px 30px rgba(177,238,70,.20); }
.share-copy-btn { padding: 11px 15px; color:#fff; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.08); }
.share-main:hover,.share-copy-btn:hover,.share-round:hover { transform: translateY(-2px); }
.share-symbol { font-size: 1rem; line-height:1; }
.share-round { width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; border-radius:50%; color:#fff; border:1px solid rgba(255,255,255,.18); box-shadow:0 9px 20px rgba(0,0,0,.08); }
.share-round span { font-size: .86rem; font-weight: 950; }
.share-email { background:#64748b; }
.share-facebook { background:#1877f2; }
.share-linkedin { background:#0a66c2; }
.share-x { background:#111; }
.share-whatsapp { background:#25d366; }
.share-status { flex-basis:100%; min-height:18px; text-align:right; color:#d8eee7; font-size:.69rem; font-weight:800; }

@media (max-width: 900px) {
  .context-shell,.share-shell { grid-template-columns: 1fr; }
  .share-actions { justify-content:flex-start; }
  .share-status { text-align:left; }
}
@media (max-width: 620px) {
  .discovery-context { padding-top: 30px; padding-bottom: 30px; }
  .context-shell,.share-shell { padding: 21px; border-radius: 24px; }
  .context-intro h2,.share-copy h2 { font-size: 2.1rem; }
  .share-main { width: 100%; }
  .share-copy-btn { flex: 1; }
  .share-round { width:44px; height:44px; flex-basis:44px; }
}


/* ================================================================
   v1.6 — Zilara Member Perks: Member Rewards + The Vault
   ================================================================ */
.member-perks-section { padding-top: 26px; padding-bottom: 58px; }
.member-perks-shell { position:relative; overflow:hidden; padding:clamp(24px,4vw,44px); border:1px solid rgba(12,87,68,.14); border-radius:32px; background:linear-gradient(145deg,#f8fcfa 0%,#f0f8f4 58%,#eef9f3 100%); box-shadow:0 22px 54px rgba(17,61,49,.08); }
.member-perks-shell::after { content:""; position:absolute; width:360px; height:360px; right:-140px; top:-180px; border-radius:50%; background:radial-gradient(circle,rgba(184,245,83,.17),rgba(184,245,83,0) 68%); pointer-events:none; }
.member-perks-head { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); gap:32px; align-items:end; }
.member-perks-head h2 { margin:8px 0 12px; max-width:720px; font-size:clamp(2.15rem,4.5vw,3.85rem); line-height:.97; letter-spacing:-.06em; }
.member-perks-head h2 em { color:var(--green); font-style:normal; }
.member-perks-head p { margin:0; max-width:700px; color:var(--muted); font-size:.9rem; line-height:1.65; }
.perks-key { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.perks-key > div { min-height:92px; display:flex; flex-direction:column; justify-content:center; padding:13px 12px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.82); box-shadow:0 8px 24px rgba(17,61,49,.04); }
.perk-key-icon { display:inline-grid; place-items:center; width:max-content; min-width:36px; height:30px; margin-bottom:7px; padding:0 8px; border-radius:999px; color:#09251c; background:linear-gradient(135deg,#ddff92,var(--lime)); font-size:.7rem; font-weight:1000; }
.perks-key strong { color:var(--ink); font-size:.72rem; line-height:1.2; }
.perks-key small { margin-top:3px; color:var(--muted); font-size:.59rem; line-height:1.35; }
.member-perks-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr); gap:18px; margin-top:24px; }
.member-perk-card { position:relative; overflow:hidden; min-width:0; padding:24px; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:0 13px 34px rgba(17,61,49,.06); }
.perk-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.perk-badge { display:inline-flex; align-items:center; min-height:28px; padding:6px 10px; border-radius:999px; color:#0a4f3c; background:#eaf8f1; font-size:.58rem; font-weight:1000; letter-spacing:.12em; }
.perk-mini { color:var(--green); font-size:.67rem; font-weight:1000; letter-spacing:.08em; }
.member-perk-card h3 { margin:0 0 9px; color:var(--ink); font-size:clamp(1.35rem,2.2vw,2rem); line-height:1.05; letter-spacing:-.035em; }
.member-perk-card > p { color:var(--muted); font-size:.78rem; line-height:1.58; }
.reward-ladder { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; margin:20px 0 14px; }
.reward-ladder > div { min-width:0; padding:12px 7px 11px; border:1px solid #d6eae1; border-radius:15px; background:linear-gradient(180deg,#f8fcfa,#edf8f3); text-align:center; }
.reward-ladder small { display:block; color:#61756f; font-size:.56rem; font-weight:800; white-space:nowrap; }
.reward-ladder strong { display:block; margin-top:4px; color:#18a875; font-size:1.42rem; line-height:1; letter-spacing:-.05em; }
.reward-ladder .reward-top { border-color:#93d9bf; background:linear-gradient(155deg,#dff9ed,#c9f2df); box-shadow:inset 0 -3px 0 #23a87c; }
.reward-ladder .reward-top strong { color:#0a5570; }
.perk-requirement { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 14px; border-radius:16px; background:#0d3b34; }
.perk-requirement span { color:var(--lime); font-size:.55rem; font-weight:1000; letter-spacing:.12em; white-space:nowrap; }
.perk-requirement strong { color:#fff; font-size:.73rem; line-height:1.4; text-align:right; }
.perk-requirement b { color:#cfff70; }
.perk-fineprint { margin:11px 0 0!important; color:#778985!important; font-size:.6rem!important; line-height:1.5!important; }
.vault-card { color:#fff; border-color:rgba(255,255,255,.08); background:linear-gradient(145deg,#08251f 0%,#0d4438 65%,#155b45 100%); }
.vault-card::after { content:""; position:absolute; width:260px; height:260px; right:-90px; bottom:-105px; border:1px solid rgba(255,255,255,.09); border-radius:50%; box-shadow:0 0 0 38px rgba(255,255,255,.025),0 0 0 75px rgba(255,255,255,.018); }
.vault-card .perk-badge-vault { color:#cfff70; background:rgba(207,255,112,.10); border:1px solid rgba(207,255,112,.16); }
.vault-card .perk-mini { color:#cfff70; }
.vault-lockup { position:relative; z-index:1; display:flex; align-items:baseline; gap:7px; margin:10px 0 6px; color:#e8c784; }
.vault-lockup span { font-family:Georgia,serif; font-size:.72rem; letter-spacing:.2em; }
.vault-lockup strong { font-family:Georgia,serif; font-size:2.7rem; line-height:1; letter-spacing:.04em; }
.vault-lockup i { color:#cfff70; font-style:normal; }
.vault-current { position:relative; z-index:1; padding:14px 0; border-top:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.13); }
.vault-current > span { color:#a9d6c8; font-size:.59rem; font-weight:950; letter-spacing:.11em; text-transform:uppercase; }
.vault-current h3 { margin:5px 0 2px; color:#fff; font-size:1.8rem; }
.vault-current p { margin:0; color:#c8e2da; font-size:.67rem; }
.vault-qualify { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:15px 0; }
.vault-qualify > div { padding:11px 12px; border:1px solid rgba(255,255,255,.13); border-radius:14px; background:rgba(255,255,255,.055); }
.vault-qualify strong { display:block; color:#cfff70; font-size:1rem; }
.vault-qualify small { display:block; margin-top:2px; color:#cbe4dc; font-size:.57rem; line-height:1.35; }
.vault-card > p { position:relative; z-index:1; color:#cee5de; }
.btn-vault { position:relative; z-index:1; margin-top:4px; color:#09231a; background:linear-gradient(135deg,#dfff89,var(--lime)); }
.vault-fineprint { position:relative; z-index:1; color:#a9c7be!important; }
.perks-separation { position:relative; z-index:1; display:flex; align-items:center; gap:14px; margin-top:16px; padding:12px 15px; border:1px solid rgba(14,97,72,.11); border-radius:16px; background:rgba(255,255,255,.58); }
.perks-separation strong { flex:0 0 auto; color:#0c5a43; font-size:.68rem; }
.perks-separation span { color:#6a7c77; font-size:.62rem; line-height:1.45; }
@media (max-width: 980px) {
  .member-perks-head { grid-template-columns:1fr; gap:18px; }
  .member-perks-grid { grid-template-columns:1fr; }
  .vault-card { min-height:auto; }
}
@media (max-width: 720px) {
  .member-perks-section { padding-top:20px; padding-bottom:38px; }
  .member-perks-shell { padding:20px; border-radius:25px; }
  .perks-key { grid-template-columns:1fr; }
  .perks-key > div { min-height:0; display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; }
  .perk-key-icon { grid-row:1/3; margin:0; }
  .perks-key small { margin:0; }
  .member-perk-card { padding:19px; border-radius:20px; }
  .reward-ladder { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .perk-requirement { display:block; }
  .perk-requirement strong { display:block; margin-top:5px; text-align:left; }
  .vault-qualify { grid-template-columns:1fr; }
  .perks-separation { display:block; }
  .perks-separation span { display:block; margin-top:4px; }
}