/* Shared look for the product page (/welcome/) and the advert landing page (/LF_LP/). Same clay style as the app. */
:root {
  --page: linear-gradient(160deg, #fdf3ff 0%, #eef4ff 55%, #f3fff8 100%);
  --bg: #f6f1ff;
  --surface: #ffffff;
  --text: #2d2150;
  --muted: #6b5e8a;
  --accent: #8b5cf6;
  --accent-dark: #6d28d9;
  --ok: #059669;
  --clay: 12px 12px 26px rgba(139, 92, 246, .18), inset -8px -8px 16px rgba(139, 92, 246, .1), inset 8px 8px 16px rgba(255, 255, 255, .9);
  --clay-sm: 6px 6px 14px rgba(139, 92, 246, .2), inset -4px -4px 8px rgba(139, 92, 246, .12), inset 4px 4px 8px rgba(255, 255, 255, .8);
  --card-1: #ffe4ef; --card-2: #e3f6ff; --card-3: #fff4d6; --card-4: #e6fbe9; --card-5: #efe6ff; --card-6: #ffe9dc;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: linear-gradient(160deg, #1b1630 0%, #151a2e 60%, #12201d 100%);
    --bg: #1b1630;
    --surface: #27213f;
    --text: #efe9ff;
    --muted: #b6abd6;
    --accent: #a78bfa;
    --accent-dark: #c4b5fd;
    --ok: #34d399;
    --clay: 10px 10px 24px rgba(0, 0, 0, .45), inset -6px -6px 14px rgba(0, 0, 0, .3), inset 6px 6px 14px rgba(255, 255, 255, .06);
    --clay-sm: 5px 5px 12px rgba(0, 0, 0, .4), inset -3px -3px 8px rgba(0, 0, 0, .3), inset 3px 3px 8px rgba(255, 255, 255, .06);
    --card-1: #3a2638; --card-2: #22344a; --card-3: #3b3424; --card-4: #213a2c; --card-5: #302651; --card-6: #3d2b26;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); background-image: var(--page); background-attachment: fixed; color: var(--text);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
a { color: var(--accent-dark); }
img { max-width: 100%; height: auto; display: block; }
.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }
section { padding: 48px 0 8px; }
h1 { font-size: clamp(34px, 5.5vw, 54px); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 16px; }
h2 { font-size: clamp(26px, 3.6vw, 36px); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 20px; }
h3 { font-size: 19px; margin: 12px 0 6px; }
.lead { font-size: 19px; color: var(--muted); margin: 0 0 22px; }
.small { font-size: 14px; color: var(--muted); }
.eyebrow { display: inline-block; margin: 0 0 14px; padding: 6px 14px; border-radius: 999px; background: var(--surface); box-shadow: var(--clay-sm);
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dark); }

/* Prices: dollars unless site.js finds the visitor is in India. */
[data-in] { display: none; }
html[data-country='IN'] [data-intl] { display: none; }
html[data-country='IN'] [data-in] { display: inline; }

.top { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--text); text-decoration: none; }
.brand img { border-radius: 10px; box-shadow: var(--clay-sm); }
.quiet { font-weight: 600; text-decoration: none; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: .3em; min-height: 52px; padding: 0 26px; border-radius: 999px;
  font-weight: 700; font-size: 17px; text-decoration: none; transition: transform .15s; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.buy { color: #fff; background: linear-gradient(135deg, #a78bfa, #7c3aed);
  box-shadow: 8px 8px 20px rgba(124, 58, 237, .35), inset -4px -4px 10px rgba(76, 29, 149, .35), inset 4px 4px 10px rgba(255, 255, 255, .35); }
.ghost { color: var(--accent-dark); background: var(--surface); box-shadow: var(--clay-sm); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 12px; }
.centre { justify-content: center; text-align: center; }

.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; padding-top: 24px; }
.shot { border-radius: 28px; overflow: hidden; background: var(--surface); box-shadow: var(--clay); padding: 10px; }
.shot img { border-radius: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 18px 0 0; }
.chips li { padding: 6px 14px; border-radius: 999px; background: var(--surface); box-shadow: var(--clay-sm); font-size: 14px; font-weight: 600; }

.pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pills article, .cards article, .steps li, .pains li, .price, details, .compare {
  background: var(--surface); border-radius: 26px; box-shadow: var(--clay); }
.pills article { padding: 22px; }
.pills h2 { font-size: 22px; margin: 0 0 6px; }
.pills p { margin: 0; color: var(--muted); }

.pains, .steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.pains li { padding: 18px 22px; }
.bridge { font-size: 19px; margin-top: 22px; }
.steps { grid-template-columns: repeat(3, 1fr); counter-reset: step; }
.steps li { padding: 22px; counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff; font-weight: 800; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cards article { padding: 22px; }
.cards article:nth-child(6n+1) { background: var(--card-1); }
.cards article:nth-child(6n+2) { background: var(--card-2); }
.cards article:nth-child(6n+3) { background: var(--card-3); }
.cards article:nth-child(6n+4) { background: var(--card-4); }
.cards article:nth-child(6n+5) { background: var(--card-5); }
.cards article:nth-child(6n+6) { background: var(--card-6); }
.cards .icon { font-size: 30px; line-height: 1; }
.cards p { margin: 0; color: var(--muted); }

.compare { display: grid; overflow: hidden; }
.compare [role=row] { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 12px; padding: 14px 22px; border-top: 1px solid rgba(139, 92, 246, .14); }
.compare .head { border-top: 0; font-weight: 800; }
.compare [role=rowheader] { font-weight: 600; }
.compare .yes { color: var(--ok); font-weight: 600; }

.price { max-width: 620px; margin: 48px auto 0; padding: 32px 28px; text-align: center; }
.amount { font-size: 54px; font-weight: 800; letter-spacing: -.03em; margin: 0; color: var(--accent-dark); }
.price ul { text-align: left; display: inline-block; margin: 14px 0 18px; padding-left: 22px; }

.addon { display: flex; gap: 14px; margin: 0 0 18px; padding: 16px 18px; text-align: left; border-radius: 20px; background: var(--card-5); box-shadow: var(--clay-sm); cursor: pointer; }
.addon[hidden], [data-plain][hidden], [data-both][hidden] { display: none; }
.addon input { flex: none; width: 22px; height: 22px; margin-top: 3px; accent-color: var(--accent); }
.addon > span > span { display: block; margin-top: 4px; font-size: 15px; color: var(--muted); }

/* The checkout page's form. */
.pay { max-width: 560px; margin: 24px auto 0; padding: 28px; background: var(--surface); border-radius: 26px; box-shadow: var(--clay); }
.pay h1 { font-size: clamp(30px, 5vw, 40px); }
.pay label, .pay summary { display: block; margin: 16px 0 6px; font-weight: 600; }
.pay summary { display: list-item; cursor: pointer; color: var(--accent-dark); }
.pay input, .pay select { width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; color: var(--text); background: var(--bg); border: 1.5px solid rgba(139, 92, 246, .3); border-radius: 14px; }
.pay input:focus-visible, .pay select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.pay .row { display: flex; gap: 10px; }
.pay [role=alert], .pay [role=status] { color: var(--accent-dark); font-weight: 600; }
.pay .total { margin-top: 22px; font-size: 20px; }
.pay button { font-family: inherit; cursor: pointer; border: 0; }
.pay button:disabled { opacity: .6; cursor: default; }

.faq details { padding: 16px 22px; margin-bottom: 14px; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq details p { margin: 10px 0 0; color: var(--muted); }
.last { text-align: center; padding-bottom: 32px; }
.foot { padding: 28px 0 100px; font-size: 14px; color: var(--muted); text-align: center; }

/* Phone: a Buy bar that stays within reach. Shown by site.js. */
.sticky { position: fixed; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 18px; border-radius: 999px; background: var(--surface); box-shadow: var(--clay); }
.sticky .button { min-height: 44px; padding: 0 20px; }
.sticky[hidden] { display: none; }

@media (min-width: 801px) { .sticky { display: none; } }
@media (max-width: 800px) {
  .hero, .steps, .cards, .pills { grid-template-columns: 1fr; }
  .compare [role=row] { grid-template-columns: 1fr 1fr 1fr; padding: 12px 14px; font-size: 14px; }
  .actions .button { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }