/* ================================================
   Trusted Astrology — Homepage mockup styles
   Modern-mystical: cream / deep purple / lavender / gold
   ================================================ */

:root {
  --cream:        #FBF6EC;
  --cream-2:      #F4EBDA;
  --ink:          #2E1A47;   /* deep purple text */
  --ink-2:        #3D2860;
  --ink-soft:     #5B4783;
  --lavender:     #C8B6E0;
  --lavender-2:   #E4DAF1;
  --gold:         #C9A24B;
  --gold-2:       #E5C77A;
  --night:        #1B1130;   /* deep night section bg */
  --night-2:      #2A1A4A;
  --line:         rgba(46, 26, 71, 0.12);
  --shadow-sm:    0 2px 6px rgba(46, 26, 71, 0.06);
  --shadow-md:    0 10px 30px rgba(46, 26, 71, 0.08);
  --shadow-lg:    0 24px 60px rgba(46, 26, 71, 0.14);

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
  font-size: 16px;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink-2); }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* =================== Buttons =================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary {
  background: var(--ink);
  color: var(--cream);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--ink-2); color: var(--cream); box-shadow: var(--shadow-md); }

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--secondary:hover { background: var(--ink); color: var(--cream); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
  padding: 10px 18px;
}
.btn--ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.btn--ghost-light {
  background: transparent;
  color: var(--cream);
  border-color: rgba(251, 246, 236, 0.4);
}
.btn--ghost-light:hover { background: rgba(251,246,236,.08); border-color: var(--cream); color: var(--cream); }

.btn--gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(201, 162, 75, 0.35);
}
.btn--gold:hover { color: var(--ink); }

.btn--small { padding: 10px 16px; font-size: 13px; }
.btn--block { width: 100%; padding: 16px 22px; font-size: 15px; }

/* =================== Typography =================== */
.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.eyebrow--gold { color: var(--gold); }

.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.section-title--light { color: var(--cream); }

.section-lede {
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 26px;
}
.section-lede--light { color: rgba(251,246,236, .78); }

.section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.section-head--row {
  display: flex; justify-content: space-between; align-items: flex-end;
  text-align: left; max-width: none; margin-bottom: 40px; gap: 24px;
}
.section-head--row .section-title { margin-bottom: 6px; }

.link-arrow {
  font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.link-arrow:hover { color: var(--gold); border-color: var(--gold); }

/* =================== Announce bar =================== */
.announce {
  background: var(--ink);
  color: var(--cream);
  font-size: 13px;
  text-align: center;
  padding: 10px 16px;
  letter-spacing: 0.02em;
}
.announce__star { color: var(--gold); margin-right: 8px; }
.announce__link { color: var(--gold-2); margin-left: 12px; font-weight: 600; }
.announce__link:hover { color: var(--gold-2); text-decoration: underline; }

/* =================== Header =================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 246, 236, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; gap: 24px;
}
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); font-family: var(--serif); font-size: 22px; font-weight: 600;
  letter-spacing: 0.01em;
}
.logo__mark { width: 28px; height: 28px; color: var(--ink); }
.logo__text { line-height: 1; }
.logo__amp { color: var(--gold); margin: 0 4px; }
.logo--light { color: var(--cream); }
.logo--light .logo__mark { color: var(--gold); }

.nav {
  display: flex; gap: 26px; align-items: center;
  font-size: 14px; font-weight: 500;
}
.nav a {
  color: var(--ink-2); position: relative; padding: 6px 0;
  transition: color .2s ease;
}
.nav a:hover { color: var(--ink); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: center;
  transition: transform .2s ease;
}
.nav a:hover::after { transform: scaleX(1); }
.nav__shop { color: var(--ink); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  cursor: pointer; transition: background .2s ease, color .2s ease;
}
.icon-btn:hover { background: var(--ink); color: var(--cream); }

/* =================== Hero =================== */
.hero {
  position: relative; overflow: hidden;
  padding: 110px 0 130px;
  background:
    radial-gradient(ellipse at 80% -10%, var(--lavender-2) 0%, transparent 55%),
    radial-gradient(ellipse at -10% 90%, #F1E2C8 0%, transparent 50%),
    var(--cream);
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__wheel {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 580px; height: 580px;
  opacity: 0.5;
  filter: drop-shadow(0 0 50px rgba(217, 185, 122, 0.18));
}
.hero__wheel svg { width: 100%; height: 100%; overflow: visible; }
.wheel-glyphs text {
  font-family: "Cormorant Garamond", "Apple Symbols", "Segoe UI Symbol", serif;
  font-variant-emoji: text;   /* force monochrome text presentation */
}

/* slow rotation in place, pivoting on the dial's exact center */
.wheel-spin {
  transform-box: view-box;
  transform-origin: 100px 100px;   /* center of the 200x200 viewBox */
  animation: wheelSpin 180s linear infinite;
}
@keyframes wheelSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wheel-spin { animation: none; }
}
.hero__inner { position: relative; max-width: 760px; }

.hero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 6.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 26px;
}
.hero__title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 500;
}
.hero__sub {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 36px;
}
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }

.trust-tags {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 22px;
  font-size: 13px; color: var(--ink-soft);
}
.trust-tags li { display: inline-flex; align-items: center; gap: 8px; }
.trust-tags__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}

/* =================== Search =================== */
.search { padding: 40px 0 0; }
.search__box {
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  padding: 10px 12px 10px 20px;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
  max-width: 760px; margin: 0 auto;
}
.search__icon { color: var(--ink-soft); flex-shrink: 0; }
.search__box input {
  flex: 1; border: 0; outline: 0;
  font-family: var(--sans); font-size: 15px;
  background: transparent; color: var(--ink); padding: 8px 0;
}
.search__box input::placeholder { color: var(--ink-soft); }

.search__chips {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin: 20px auto 0; max-width: 760px;
  font-size: 13px; color: var(--ink-soft);
}
.chip-label { padding: 8px 4px; }
.chip {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  color: var(--ink-2);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.chip:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* =================== Today's horoscope =================== */
.today { padding: 100px 0 100px; }
.today__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.sign-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-top: 8px;
}
.sign {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 12px 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s ease;
  font-family: var(--sans);
  color: var(--ink);
}
.sign:hover { border-color: var(--gold); transform: translateY(-1px); }
.sign--active {
  background: var(--ink); color: var(--cream); border-color: var(--ink);
}
.sign__glyph {
  font-size: 22px; line-height: 1;
  font-family: "Cormorant Garamond", "Apple Symbols", "Segoe UI Symbol", serif;
  font-variant-emoji: text;   /* monochrome line-glyph, not emoji */
  color: var(--gold);
}
.sign--active .sign__glyph { color: var(--gold-2); }
.sign__name { font-size: 11px; letter-spacing: 0.02em; }

.today__card {
  background: #fff;
  border-radius: 24px;
  padding: 32px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  position: relative;
}
.today__card::before {
  content: ""; position: absolute; inset: 0; border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(201,162,75,.4), transparent 40%, rgba(200,182,224,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.today-card__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.today-card__sign { display: flex; align-items: center; gap: 12px; }
.today-card__glyph {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream-2); color: var(--gold); border-radius: 50%;
  font-size: 26px;
  font-family: "Cormorant Garamond", "Apple Symbols", "Segoe UI Symbol", serif;
  font-variant-emoji: text;   /* monochrome line-glyph, not emoji */
}
.today-card__sign h3 { font-family: var(--serif); font-weight: 600; font-size: 22px; margin: 0; }
.today-card__sign p { margin: 2px 0 0; font-size: 12px; color: var(--ink-soft); }
.today-card__date {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.today-card__text {
  font-family: var(--serif); font-size: 19px; line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 24px;
}
.today-card__meters {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: grid; gap: 10px;
}
.today-card__meters li {
  display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 12px;
}
.meter__label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.meter__bar {
  height: 4px; background: var(--cream-2); border-radius: 999px; overflow: hidden;
  position: relative;
}
.meter__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--w, 50%);
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  border-radius: 999px;
}

.today-card__tarot {
  display: flex; gap: 14px; align-items: center;
  background: var(--cream); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 22px;
}
.tarot-mini {
  width: 54px; height: 78px;
  background: linear-gradient(160deg, var(--ink), var(--ink-2));
  color: var(--gold);
  border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: inset 0 0 0 1px rgba(201,162,75,.4);
}
.tarot-mini__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); margin: 0 0 2px; }
.tarot-mini__name { font-family: var(--serif); font-size: 18px; font-weight: 600; margin: 0; color: var(--ink); }
.tarot-mini__meaning { font-size: 13px; color: var(--ink-soft); margin: 4px 0 0; }

.today-card__cta { text-align: center; }
.today-card__fine {
  margin: 10px 0 14px;
  font-size: 12px; color: var(--ink-soft);
}
.today-card__link {
  font-size: 13px; font-weight: 600;
  border-bottom: 1px solid var(--line); padding-bottom: 2px;
}

/* =================== Pillars =================== */
.pillars {
  padding: 100px 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(228,218,241,0.3) 100%),
    var(--cream);
}
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pillar {
  background: #fff;
  border-radius: 20px;
  padding: 32px 28px 28px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative; overflow: hidden;
}
.pillar::after {
  content: ""; position: absolute; right: -40px; bottom: -40px;
  width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, var(--lavender-2), transparent 70%);
  opacity: 0; transition: opacity .3s ease;
}
.pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}
.pillar:hover::after { opacity: 0.7; }

.pillar__icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--cream-2);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.pillar__icon svg { width: 28px; height: 28px; }

.pillar h3 {
  font-family: var(--serif); font-size: 26px; font-weight: 600;
  margin: 0 0 8px; color: var(--ink);
}
.pillar p {
  margin: 0 0 22px;
  color: var(--ink-soft); font-size: 15px;
}
.pillar__cta {
  margin-top: auto;
  font-weight: 600; font-size: 14px; color: var(--ink);
  letter-spacing: 0.01em;
}
.pillar:hover .pillar__cta { color: var(--gold); }

/* tinted backgrounds per pillar (subtle) */
.pillar--horoscopes .pillar__icon { background: #F4ECD8; color: #8C6A1E; }
.pillar--chart     .pillar__icon { background: #E4DAF1; color: #5B3F8C; }
.pillar--tarot     .pillar__icon { background: #2E1A47; color: var(--gold); }
.pillar--love      .pillar__icon { background: #F6DCDC; color: #9C3F4F; }
.pillar--rituals   .pillar__icon { background: #D8E5D5; color: #4A6A45; }
.pillar--shop      .pillar__icon { background: #F2E3C8; color: #8C6A1E; }

/* =================== Subscription section =================== */
.sub {
  padding: 110px 0;
  background:
    radial-gradient(ellipse at 20% 0%, #3D2860 0%, transparent 50%),
    radial-gradient(ellipse at 90% 100%, #2A1A4A 0%, transparent 55%),
    var(--night);
  color: var(--cream);
  position: relative; overflow: hidden;
}
.sub__grid {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px;
  align-items: center;
}
.sub__art {
  position: relative; aspect-ratio: 1 / 1;
  border-radius: 24px;
  background:
    radial-gradient(circle at 70% 30%, #3D2860 0%, transparent 60%),
    linear-gradient(160deg, #2A1A4A, #1B1130);
  overflow: hidden;
  border: 1px solid rgba(201,162,75,.2);
}
.sub__moon {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #FFFDF4 0%, #F2E3C0 30%, #D8B97A 60%, #A98748 100%);
  box-shadow: 0 0 100px rgba(217, 185, 122, 0.45), inset -30px -40px 100px rgba(0,0,0,.35);
}
.sub__halo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 90%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(201,162,75,.25);
}
.sub__stars { position: absolute; inset: 0; }
.sub__stars span {
  position: absolute; left: var(--x); top: var(--y);
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 8px var(--gold-2);
  animation: twinkle 3s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes twinkle { 0%,100% { opacity: .4; transform: scale(1);} 50% { opacity: 1; transform: scale(1.6);} }

.sub__list {
  list-style: none; padding: 0; margin: 18px 0 30px;
  display: grid; gap: 10px;
}
.sub__list li {
  display: flex; align-items: flex-start; gap: 12px;
  color: rgba(251,246,236,.86); font-size: 15px;
}
.check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(201,162,75,.18); color: var(--gold-2);
  font-size: 12px; flex-shrink: 0; margin-top: 1px;
}
.sub__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.sub__fine {
  margin-top: 16px; font-size: 12px;
  color: rgba(251,246,236,.55); max-width: 60ch;
}

/* =================== Guides / Blog =================== */
.guides { padding: 100px 0; }
.guide-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.guide-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.guide-card__img {
  aspect-ratio: 4 / 3;
  position: relative;
}
.guide-card__img--1 { background: linear-gradient(135deg, #E4DAF1 0%, #C8B6E0 100%); }
.guide-card__img--1::after { content: "♂"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 64px; color: rgba(46,26,71,.35); }
.guide-card__img--2 { background: linear-gradient(135deg, #2E1A47 0%, #5B4783 100%); }
.guide-card__img--2::after { content: "☾"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 64px; color: rgba(229,199,122,.65); }
.guide-card__img--3 { background: linear-gradient(135deg, #F6DCDC 0%, #E5BFC7 100%); }
.guide-card__img--3::after { content: "♀"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 64px; color: rgba(156,63,79,.5); }
.guide-card__img--4 { background: linear-gradient(135deg, #F2E3C8 0%, #D8B97A 100%); }
.guide-card__img--4::after { content: "✦"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 64px; color: rgba(46,26,71,.45); }

.guide-card__tag {
  margin: 18px 18px 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--gold); font-weight: 600;
}
.guide-card h3 {
  margin: 0 18px 12px;
  font-family: var(--serif); font-size: 19px; font-weight: 600;
  color: var(--ink); line-height: 1.25;
}
.guide-card__meta { margin: 0 18px 18px; font-size: 12px; color: var(--ink-soft); }

/* =================== Shop preview =================== */
.shop-preview { padding: 80px 0 110px; }
.product-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.product {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.product:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.product__media {
  aspect-ratio: 4 / 3;
  position: relative; padding: 18px;
}
.product__media--chart    { background: radial-gradient(circle at 60% 40%, #E4DAF1 0%, #C8B6E0 70%); }
.product__media--chart::after { content: "✦ ✧ ✦"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 28px; letter-spacing: 12px; }
.product__media--daily    { background: linear-gradient(160deg, #2E1A47, #5B4783); color: var(--gold-2); }
.product__media--daily::after { content: "☉"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 72px; }
.product__media--rituals  { background: linear-gradient(160deg, #F2E3C8, #D8B97A); }
.product__media--rituals::after { content: "☽"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 72px; color: rgba(46,26,71,.45); }

.product__badge {
  display: inline-block;
  background: rgba(46,26,71,.85); color: var(--cream);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 6px 10px; border-radius: 999px;
  position: relative; z-index: 1;
}
.product__badge--gold { background: var(--gold); color: var(--ink); }

.product h3 {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  margin: 20px 22px 6px;
}
.product > p { margin: 0 22px 18px; color: var(--ink-soft); font-size: 14px; flex: 1; }
.product__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px 22px;
}
.product__price { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); }
.product__price--strike { font-size: 13px; color: var(--ink-soft); text-decoration: line-through; margin-right: 6px; font-family: var(--sans); font-weight: 400; }

/* =================== Newsletter =================== */
.newsletter {
  background:
    radial-gradient(ellipse at 10% 100%, #3D2860 0%, transparent 50%),
    radial-gradient(ellipse at 90% 0%, #2A1A4A 0%, transparent 55%),
    var(--night);
  color: var(--cream);
  padding: 90px 0;
}
.newsletter__inner {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center;
}
.newsletter__form {
  background: rgba(251,246,236,.06);
  border: 1px solid rgba(251,246,236,.15);
  border-radius: 18px;
  padding: 22px;
  display: grid; gap: 12px;
}
.newsletter__form input {
  background: var(--cream);
  border: 0; outline: 0;
  padding: 16px 18px; font-size: 15px;
  border-radius: 999px; color: var(--ink);
  font-family: var(--sans);
}
.newsletter__form input::placeholder { color: var(--ink-soft); }
.newsletter__fine { font-size: 12px; color: rgba(251,246,236,.5); margin: 4px 0 0; text-align: center; }

/* =================== Footer =================== */
.footer {
  background: #14091F;
  color: rgba(251,246,236,.7);
  padding: 70px 0 30px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(251,246,236,.1);
}
.footer__brand p {
  margin: 14px 0 0;
  font-size: 14px; color: rgba(251,246,236,.55);
  max-width: 36ch;
}
.footer__col h4 {
  font-family: var(--sans);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--gold); margin: 0 0 16px;
}
.footer__col a {
  display: block; padding: 5px 0;
  color: rgba(251,246,236,.7); font-size: 14px;
  transition: color .2s ease;
}
.footer__col a:hover { color: var(--cream); }

.footer__bar {
  padding-top: 24px;
  font-size: 12px; color: rgba(251,246,236,.45);
}

/* =================== Responsive =================== */
@media (max-width: 960px) {
  .nav { display: none; }
  .hero { padding: 80px 0 90px; }
  .hero__wheel { width: 260px; height: 260px; right: -70px; opacity: .6; }
  .today__grid { grid-template-columns: 1fr; gap: 40px; }
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .guide-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: 1fr; }
  .sub__grid, .newsletter__inner { grid-template-columns: 1fr; gap: 40px; }
  .sub__art { max-width: 360px; margin: 0 auto; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .section-head--row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .pillar-grid { grid-template-columns: 1fr; }
  .guide-grid { grid-template-columns: 1fr; }
  .sign-strip { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__title { font-size: 44px; }
  .hero__ctas .btn { flex: 1; }
}

/* ================================================
   Section / sub-pages (Horoscopes, etc.)
   ================================================ */

.nav a.is-active { color: var(--ink); }
.nav a.is-active::after { transform: scaleX(1); }

/* ---- Sub-hero ---- */
.subhero {
  position: relative; overflow: hidden;
  padding: 70px 0 60px;
  background:
    radial-gradient(ellipse at 85% -20%, var(--lavender-2) 0%, transparent 55%),
    radial-gradient(ellipse at -10% 120%, #F1E2C8 0%, transparent 50%),
    var(--cream);
  border-bottom: 1px solid var(--line);
}
.subhero__bg { position: absolute; inset: 0; pointer-events: none; }
.subhero .hero__wheel {
  right: -120px; top: 50%; transform: translateY(-50%);
  width: 420px; height: 420px; opacity: 0.4;
}
.subhero__inner { position: relative; max-width: 680px; }
.subhero__title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(40px, 6vw, 64px); line-height: 1.05;
  margin: 0 0 16px; color: var(--ink); letter-spacing: -0.01em;
}
.subhero__lede { font-size: 18px; color: var(--ink-soft); max-width: 56ch; margin: 0; }

.breadcrumb { font-size: 13px; color: var(--ink-soft); margin: 0 0 22px; }
.breadcrumb a { color: var(--ink-soft); border-bottom: 1px solid transparent; }
.breadcrumb a:hover { color: var(--ink); border-color: var(--line); }
.breadcrumb span { margin: 0 6px; }

/* ---- Reading controls ---- */
.reading { padding: 50px 0 90px; }
.sign-strip--wide { grid-template-columns: repeat(12, 1fr); margin-bottom: 18px; }
.sign-strip--wide .sign { padding: 10px 4px; }
.sign-strip--wide .sign__name { font-size: 10px; }

.timeframe-tabs {
  display: inline-flex; gap: 4px; padding: 5px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  margin-bottom: 32px; box-shadow: var(--shadow-sm);
}
.tf-tab {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-soft);
  padding: 10px 20px; border-radius: 999px; transition: all .2s ease;
}
.tf-tab:hover { color: var(--ink); }
.tf-tab--active { background: var(--ink); color: var(--cream); }

.reading-layout {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start;
}
.reading-main {
  background: #fff; border: 1px solid var(--line); border-radius: 24px;
  padding: 34px; box-shadow: var(--shadow-md);
}
.reading-main__head { margin-bottom: 20px; }
.reading-main__head h2 { font-family: var(--serif); font-weight: 600; font-size: 26px; margin: 0; }
.reading-main__head p { margin: 3px 0 0; font-size: 13px; color: var(--ink-soft); }
.reading-main__text {
  font-family: var(--serif); font-size: 21px; line-height: 1.6; color: var(--ink-2); margin: 0 0 26px;
}
.reading-main__meters { grid-template-columns: 1fr 1fr; gap: 14px 28px; display: grid; }
.reading-main__lock {
  margin-top: 26px; padding: 18px 20px; border-radius: 14px;
  background: var(--cream); border: 1px dashed rgba(201,162,75,.5);
}
.reading-main__lock-text { margin: 0; font-size: 14px; color: var(--ink-soft); }

.unlock-card {
  background: linear-gradient(170deg, #fff, #FBF4E6);
  border: 1px solid var(--line); border-radius: 24px;
  padding: 30px; box-shadow: var(--shadow-lg); position: relative;
}
.unlock-card h3 { font-family: var(--serif); font-weight: 600; font-size: 24px; margin: 4px 0 18px; }
.unlock-card h3 em { font-style: italic; color: var(--gold); }
.unlock-card__list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.unlock-card__list li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-2); }
.unlock-card__list .check { background: rgba(201,162,75,.18); color: #9C7A28; }
.unlock-card__fine { font-size: 12px; color: var(--ink-soft); text-align: center; margin: 12px 0 0; }
.unlock-card__tarot { margin-top: 22px; }

/* ---- Timeframe cards ---- */
.timeframes { padding: 90px 0; background: linear-gradient(180deg, transparent, rgba(228,218,241,.3)); }
.timeframe-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tf-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 28px 24px; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tf-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.tf-card__tag {
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em; font-weight: 600;
  color: var(--gold); margin-bottom: 14px;
}
.tf-card h3 { font-family: var(--serif); font-size: 23px; font-weight: 600; margin: 0 0 8px; }
.tf-card p { margin: 0 0 20px; font-size: 14px; color: var(--ink-soft); }

/* ---- Funnel ---- */
.funnel-sec {
  padding: 100px 0;
  background:
    radial-gradient(ellipse at 15% 0%, #3D2860 0%, transparent 55%),
    radial-gradient(ellipse at 90% 100%, #2A1A4A 0%, transparent 55%),
    var(--night);
}
.funnel { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
.funnel__step {
  background: rgba(251,246,236,.05); border: 1px solid rgba(251,246,236,.12);
  border-radius: 16px; padding: 26px; position: relative;
}
.funnel__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: var(--ink);
  font-family: var(--serif); font-weight: 600; font-size: 18px; margin-bottom: 14px;
}
.funnel__step h4 { color: var(--cream); font-family: var(--serif); font-weight: 600; font-size: 20px; margin: 0 0 6px; }
.funnel__step p { color: rgba(251,246,236,.66); font-size: 14px; margin: 0; }

/* ---- Personalise ---- */
.personalise { padding: 100px 0; }
.personalise__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.personalise__note { font-size: 14px; color: var(--ink-soft); font-style: italic; margin: 6px 0 0; }
.personalise__form {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 30px; box-shadow: var(--shadow-md); display: grid; gap: 16px;
}
.form-row { display: grid; gap: 6px; }
.form-row--2 { grid-template-columns: 1fr 1fr; gap: 16px; }
.personalise__form label { font-size: 13px; font-weight: 500; color: var(--ink-2); display: grid; gap: 6px; }
.form-label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.personalise__form input {
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px;
  font-family: var(--sans); font-size: 14px; color: var(--ink); background: var(--cream);
}
.personalise__form input::placeholder { color: var(--ink-soft); }
.focus-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.focus-chips .chip { cursor: pointer; background: var(--cream); user-select: none; }
.focus-chips .chip:hover { border-color: var(--gold); }
.focus-chips .chip--on { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ---- Signs grid ---- */
.signs-all { padding: 0 0 100px; }
.signs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sign-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sign-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.sign-card__glyph {
  font-family: "Cormorant Garamond", "Apple Symbols", "Segoe UI Symbol", serif;
  font-variant-emoji: text; color: var(--gold); font-size: 28px; line-height: 1;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream-2); border-radius: 50%; flex-shrink: 0;
}
.sign-card h3 { font-family: var(--serif); font-weight: 600; font-size: 19px; margin: 0; }
.sign-card p { font-size: 12px; color: var(--ink-soft); margin: 2px 0 0; }

/* ---- Section-page responsive ---- */
@media (max-width: 960px) {
  .reading-layout { grid-template-columns: 1fr; }
  .timeframe-grid { grid-template-columns: repeat(2, 1fr); }
  .funnel { grid-template-columns: 1fr 1fr; }
  .personalise__grid { grid-template-columns: 1fr; gap: 36px; }
  .signs-grid { grid-template-columns: repeat(2, 1fr); }
  .sign-strip--wide { grid-template-columns: repeat(6, 1fr); }
  .subhero .hero__wheel { opacity: .25; }
}
@media (max-width: 560px) {
  .timeframe-grid, .funnel, .signs-grid { grid-template-columns: 1fr; }
  .form-row--2 { grid-template-columns: 1fr; }
  .sign-strip--wide { grid-template-columns: repeat(4, 1fr); }
  .timeframe-tabs { width: 100%; overflow-x: auto; }
}

/* ================================================
   Nav dropdown (Horoscopes submenu)
   ================================================ */
.nav__item { display: inline-flex; align-items: center; }
.has-dropdown { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: 5px; }
.nav__caret { transition: transform .2s ease; opacity: .7; }
.has-dropdown:hover .nav__caret,
.has-dropdown:focus-within .nav__caret { transform: rotate(180deg); }

.nav__dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 460px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 10px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
}
.nav__dropdown::before {  /* invisible hover bridge */
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.has-dropdown:hover .nav__dropdown,
.has-dropdown:focus-within .nav__dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(8px);
}
.nav__dropdown a {
  display: flex; flex-direction: column; gap: 1px;
  padding: 11px 13px; border-radius: 10px; color: var(--ink);
}
.nav__dropdown a::after { display: none; }     /* kill nav underline */
.nav__dropdown a:hover { background: var(--cream); color: var(--ink); }
.nav__dropdown a span { font-size: 14px; font-weight: 600; }
.nav__dropdown a small { font-size: 11px; font-weight: 400; color: var(--ink-soft); }

/* ================================================
   Horoscope types section
   ================================================ */
.horo-types { padding: 40px 0 0; }
.horo-types__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.horo-type {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 22px; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.horo-type:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.horo-type__icon {
  width: 46px; height: 46px; border-radius: 12px; background: var(--cream-2);
  color: var(--ink); display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.horo-type__icon svg { width: 24px; height: 24px; }
.horo-type h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 0 0 5px; }
.horo-type p { font-size: 13px; color: var(--ink-soft); margin: 0 0 16px; }
.horo-type__cta { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--ink); }
.horo-type:hover .horo-type__cta { color: var(--gold); }

@media (max-width: 960px) {
  .horo-types__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .horo-types__grid { grid-template-columns: 1fr; }
}

/* one-time price note */
.product__price--note { font-size: 12px; font-weight: 400; color: var(--ink-soft); font-family: var(--sans); }

/* ================================================
   Post-purchase / thank-you + subscription upsell
   ================================================ */
.thanks {
  min-height: calc(100vh - 72px);
  display: flex; align-items: center;
  padding: 70px 0;
  background:
    radial-gradient(ellipse at 80% -10%, var(--lavender-2) 0%, transparent 55%),
    radial-gradient(ellipse at -10% 110%, #F1E2C8 0%, transparent 50%),
    var(--cream);
}
.thanks__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.thanks__check {
  width: 64px; height: 64px; margin: 0 auto 22px;
  border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-2));
  display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 8px 24px rgba(201,162,75,.35);
}
.thanks__check svg { width: 30px; height: 30px; }
.thanks__title { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 4.5vw, 46px); margin: 0 0 12px; color: var(--ink); }
.thanks__lede { font-size: 18px; color: var(--ink-soft); max-width: 52ch; margin: 0 auto 26px; }
.thanks__reading-btn { margin-bottom: 48px; }

.upsell {
  background: linear-gradient(170deg, #fff, #FBF4E6);
  border: 1px solid var(--line); border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: 40px; text-align: left;
  position: relative; overflow: hidden;
}
.upsell::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, var(--lavender-2), transparent 70%); opacity: .6;
}
.upsell__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; align-items: center; position: relative; }
.upsell__eyebrow { color: var(--gold); }
.upsell h2 { font-family: var(--serif); font-weight: 600; font-size: 28px; margin: 6px 0 12px; color: var(--ink); }
.upsell h2 em { font-style: italic; color: var(--gold); }
.upsell p { color: var(--ink-soft); font-size: 15px; margin: 0 0 18px; }
.upsell__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.upsell__list li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-2); }
.upsell__list .check { background: rgba(201,162,75,.18); color: #9C7A28; }
.upsell__price { text-align: center; }
.upsell__amount { font-family: var(--serif); font-size: 44px; font-weight: 600; color: var(--ink); line-height: 1; }
.upsell__amount span { font-size: 17px; font-weight: 400; color: var(--ink-soft); font-family: var(--sans); }
.upsell__price-sub { font-size: 13px; color: var(--ink-soft); margin: 6px 0 18px; }
.upsell__decline { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.upsell__decline:hover { color: var(--ink); }
.upsell__fine { font-size: 12px; color: var(--ink-soft); margin: 16px 0 0; text-align: center; }

@media (max-width: 760px) {
  .upsell__grid { grid-template-columns: 1fr; gap: 24px; }
  .upsell { padding: 28px; }
}

/* Active item in the Horoscopes dropdown */
.nav__dropdown a.is-current { background: var(--cream); }
.nav__dropdown a.is-current span { color: var(--gold); }

/* Chinese animal badge (letter instead of glyph) */
.sign-card__glyph--word { font-family: var(--serif); font-weight: 600; font-size: 22px; }

/* ================================================
   Chinese zodiac: calculator + animal reader
   ================================================ */
.cn-calc { padding: 70px 0 20px; }
.cn-calc__card {
  background: linear-gradient(170deg, #fff, #FBF4E6);
  border: 1px solid var(--line); border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: 40px; max-width: 720px; margin: 0 auto; text-align: center;
}
.cn-calc__lede { color: var(--ink-soft); font-size: 16px; margin: 0 0 22px; max-width: 48ch; margin-inline: auto; }
.cn-calc__form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cn-calc__form input {
  width: 220px; max-width: 100%;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 14px 20px; font-family: var(--sans); font-size: 15px;
  background: var(--cream); color: var(--ink); text-align: center;
}
.cn-calc__form input::placeholder { color: var(--ink-soft); }
.cn-calc__note { font-size: 12px; color: var(--ink-soft); margin: 14px auto 0; max-width: 46ch; }

.cn-result {
  margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; gap: 18px; text-align: left;
}
.cn-result__badge {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600; font-size: 30px; flex-shrink: 0;
}
.cn-result__label { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); margin: 0; }
.cn-result__name { font-family: var(--serif); font-weight: 600; font-size: 30px; margin: 2px 0; color: var(--ink); }
.cn-result__trait { font-size: 14px; color: var(--ink-soft); margin: 0; }
.cn-result__years { font-size: 12px; color: var(--ink-soft); margin: 6px 0 0; }

.cn-reading { padding: 50px 0 100px; }
.cn-animals {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; margin-bottom: 22px;
}
.cn-animal {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer; transition: all .2s ease; font-family: var(--sans); color: var(--ink);
}
.cn-animal:hover { border-color: var(--gold); transform: translateY(-1px); }
.cn-animal--active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.cn-animal__badge {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream-2); color: var(--ink);
  font-family: var(--serif); font-weight: 600; font-size: 16px;
}
.cn-animal--active .cn-animal__badge { background: rgba(229,199,122,.25); color: var(--gold-2); }
.cn-animal__name { font-size: 10px; letter-spacing: .02em; }

.cn-tabs { margin-bottom: 28px; }
.cn-reading-main { max-width: 760px; margin: 0 auto; }
.cn-reading__badge {
  font-family: var(--serif) !important; font-weight: 600; font-size: 24px;
}
.cn-reading__cta { margin-top: 22px; text-align: center; }

@media (max-width: 760px) {
  .cn-animals { grid-template-columns: repeat(6, 1fr); }
  .cn-tabs { width: 100%; overflow-x: auto; }
}
@media (max-width: 480px) {
  .cn-animals { grid-template-columns: repeat(4, 1fr); }
  .cn-result { flex-direction: column; text-align: center; }
}

/* Animal icon sizing inside badges */
.cn-animal__badge svg { width: 18px; height: 18px; }
.cn-result__badge svg { width: 34px; height: 34px; }
.cn-reading__badge svg { width: 26px; height: 26px; }
.cn-reading__badge { display: inline-flex; align-items: center; justify-content: center; }

/* ================================================
   Vedic: calculator, chart, result
   ================================================ */
.vedic-calc { padding: 30px 0 100px; }
.vedic-form {
  max-width: 560px; margin: 0 auto 0;
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-md); padding: 30px; display: grid; gap: 16px;
}
.vedic-form label { font-size: 13px; font-weight: 500; color: var(--ink-2); display: grid; gap: 6px; }
.vedic-form input {
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px;
  font-family: var(--sans); font-size: 14px; color: var(--ink); background: var(--cream);
}
.vedic-form input::placeholder { color: var(--ink-soft); }

.vedic-result {
  max-width: 920px; margin: 40px auto 0;
  background: linear-gradient(170deg, #fff, #FBF4E6);
  border: 1px solid var(--line); border-radius: 24px;
  box-shadow: var(--shadow-lg); padding: 34px;
}
.vedic-result__grid { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: center; }

/* South-Indian style chart */
.vchart {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);
  width: 280px; height: 280px; gap: 0;
  border: 1.5px solid var(--ink); border-radius: 8px; overflow: hidden;
  background: #fff;
}
.vchart__cell {
  border: 0.5px solid var(--line); position: relative;
  display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 6px; min-width: 0;
}
.vchart__sign { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.vchart__center {
  border: 0.5px solid var(--line);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--serif); font-size: 15px; color: var(--ink-soft); line-height: 1.1;
  background: var(--cream);
}
.vchart__marker {
  position: absolute; bottom: 6px; left: 6px;
  font-size: 9px; font-weight: 600; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 999px;
}
.vchart__marker--moon { background: var(--ink); color: var(--cream); }
.vchart__marker--asc { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: var(--ink); bottom: 6px; left: auto; right: 6px; }
.vchart-wrap { text-align: center; }
.vchart__cap { font-size: 11px; color: var(--ink-soft); margin: 12px 0 0; }

.vedic-placements { list-style: none; padding: 0; margin: 8px 0 20px; display: grid; gap: 10px; }
.vedic-placements li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.vedic-placements span { font-size: 13px; color: var(--ink-soft); }
.vedic-placements strong { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); }
.vedic-result__reading { font-size: 18px !important; margin: 0 0 22px !important; }

@media (max-width: 760px) {
  .vedic-result__grid { grid-template-columns: 1fr; gap: 28px; justify-items: center; }
  .vedic-result__body { width: 100%; }
}

/* Vedic locked teaser (drives purchase) */
.vedic-locked {
  margin: 4px 0 22px; padding: 18px 20px;
  background: var(--cream); border: 1px dashed rgba(201,162,75,.5); border-radius: 14px;
}
.vedic-locked__title { margin: 0 0 12px; font-weight: 600; font-size: 14px; color: var(--ink); }
.vedic-locked__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.vedic-locked__list li { display: flex; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.vedic-locked__list .check { background: rgba(201,162,75,.18); color: #9C7A28; flex-shrink: 0; }

/* ================================================
   Vedic report (long reading + blurred gate)
   ================================================ */
.vedic-result { background: none; border: 0; box-shadow: none; padding: 0; max-width: none; }
.report {
  background: #fff; border: 1px solid var(--line); border-radius: 24px;
  box-shadow: var(--shadow-lg); padding: 34px; max-width: 940px; margin: 40px auto 0;
}
.report__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
  border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 26px;
}
.report__title { font-family: var(--serif); font-weight: 600; font-size: 26px; margin: 4px 0 4px; color: var(--ink); }
.report__meta { font-size: 13px; color: var(--ink-soft); margin: 0; }
.report__pages {
  text-align: center; background: var(--cream); border: 1px solid var(--line);
  border-radius: 14px; padding: 8px 16px; flex-shrink: 0;
}
.report__pages strong { display: block; font-family: var(--serif); font-size: 26px; color: var(--ink); line-height: 1; }
.report__pages span { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); }

.report__grid { display: grid; grid-template-columns: 280px 1fr; gap: 36px; align-items: start; }
.report__aside .vchart { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.report__aside .vedic-placements { margin-top: 18px; }

.report__h { font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--ink); margin: 22px 0 8px; }
.report__content > .report__h:first-child { margin-top: 0; }
.report__content p { color: var(--ink-2); font-size: 15.5px; line-height: 1.68; margin: 0 0 6px; }
.report__content > .vedic-result__reading { font-size: 17px; line-height: 1.7; margin-bottom: 4px; }

.report__locked { position: relative; margin-top: 10px; }
.report__locked-body { filter: blur(5px); user-select: none; pointer-events: none; }
.report__gate {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 26%, #fff 58%);
}
.report__gate-card {
  text-align: center; max-width: 440px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-md); padding: 28px;
}
.report__lock {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.report__gate-card h4 { font-family: var(--serif); font-weight: 600; font-size: 22px; margin: 0 0 8px; color: var(--ink); }
.report__gate-card p { font-size: 14px; color: var(--ink-soft); margin: 0 0 18px; }
.report__gate-fine { font-size: 12px !important; color: var(--ink-soft); margin: 12px 0 0 !important; }

@media (max-width: 760px) {
  .report { padding: 24px; }
  .report__grid { grid-template-columns: 1fr; gap: 26px; }
  .report__aside .vchart { max-width: 280px; margin: 0 auto; }
}

/* ================================================
   Birth Chart page
   ================================================ */
.bc-calc { padding: 30px 0 90px; }
.bc-form {
  max-width: 560px; margin: 0 auto;
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-md); padding: 30px; display: grid; gap: 16px;
}
.bc-form label { font-size: 13px; font-weight: 500; color: var(--ink-2); display: grid; gap: 6px; }
.bc-form input {
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px;
  font-family: var(--sans); font-size: 14px; color: var(--ink); background: var(--cream);
}
.bc-form input::placeholder { color: var(--ink-soft); }

.bc-result { max-width: none; margin-top: 8px; }

/* Natal wheel */
.natal-wheel { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.nw-glyphs text {
  font-family: "Cormorant Garamond", "Apple Symbols", "Segoe UI Symbol", serif;
  font-variant-emoji: text;
}
.natal-marker circle { fill: #fff; stroke: var(--ink); stroke-width: 1; }
.natal-marker text { font-family: var(--sans); font-weight: 700; fill: var(--ink); }
.natal-marker--sun circle { fill: var(--gold); stroke: none; }
.natal-marker--sun text { fill: var(--ink); }
.natal-marker--moon circle { fill: var(--ink); stroke: none; }
.natal-marker--moon text { fill: var(--cream); }
.natal-marker--asc circle { fill: #fff; stroke: var(--gold); stroke-width: 1.4; }
.natal-marker--asc text { fill: var(--ink); }

/* Big three */
.bc3-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.bc3 { text-align: center; background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 12px 4px; }
.bc3__role { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); }
.bc3__glyph {
  display: block; margin: 5px 0 2px; font-size: 24px; color: var(--gold);
  font-family: "Cormorant Garamond", "Apple Symbols", "Segoe UI Symbol", serif; font-variant-emoji: text;
}
.bc3__sign { font-family: var(--serif); font-weight: 600; font-size: 15px; color: var(--ink); }
.bc-traits { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.bc-traits span { font-size: 12px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; color: var(--ink-soft); }
.bc-traits strong { color: var(--ink); }

/* Free vs Full */
.bc-compare { padding: 90px 0; background: linear-gradient(180deg, transparent, rgba(228,218,241,.3)); }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 860px; margin: 0 auto; align-items: start; }
.compare-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 30px; box-shadow: var(--shadow-sm); position: relative; }
.compare-card--full { border-color: var(--gold); box-shadow: var(--shadow-md); }
.compare-card__badge {
  position: absolute; top: -12px; right: 24px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: var(--ink);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  padding: 5px 12px; border-radius: 999px;
}
.compare-card h3 { font-family: var(--serif); font-weight: 600; font-size: 23px; margin: 0 0 4px; }
.compare-card__price { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--ink); margin: 0 0 18px; }
.compare-card__price span { font-size: 14px; font-weight: 400; color: var(--ink-soft); font-family: var(--sans); }
.compare-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; }
.compare-list li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-2); }
.compare-list .check { background: rgba(201,162,75,.18); color: #9C7A28; flex-shrink: 0; }
.compare-list .is-muted { color: var(--ink-soft); opacity: .55; padding-left: 32px; position: relative; }
.compare-list .is-muted::before { content: "—"; position: absolute; left: 8px; }

.bc-addons { padding: 90px 0 40px; }
.bc-calcs { padding: 40px 0 100px; }
.timeframe-grid--2 { grid-template-columns: 1fr 1fr; max-width: 760px; margin: 0 auto; }

@media (max-width: 760px) {
  .compare-grid { grid-template-columns: 1fr; }
  .timeframe-grid--2 { grid-template-columns: 1fr; }
}

/* Birth-chart readable interpretation (multi-paragraph) */
.bc-result__interp .report__h:first-child { margin-top: 0; }
.bc-result__interp p { color: var(--ink-2); font-size: 15.5px; line-height: 1.68; margin: 0 0 6px; }
.bc-result__interp p:first-of-type { font-size: 17px; }

/* Birth Chart: trust block + testimonials */
.bc-trust { padding: 90px 0; background: linear-gradient(180deg, transparent, rgba(228,218,241,.3)); }
.trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 48px; max-width: 1080px; margin-left: auto; margin-right: auto; }
.trust-pillar { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; text-align: center; box-shadow: var(--shadow-sm); }
.trust-pillar__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--cream-2); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.trust-pillar h4 { font-family: var(--serif); font-weight: 600; font-size: 17px; margin: 0 0 4px; color: var(--ink); }
.trust-pillar p { font-size: 13px; color: var(--ink-soft); margin: 0; }

.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1080px; margin: 0 auto; }
.testimonial { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px 26px; box-shadow: var(--shadow-sm); }
.testimonial__stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 14px; font-size: 14px; }
.testimonial__quote { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.55; color: var(--ink-2); margin: 0 0 16px; }
.testimonial__by { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); margin: 0; font-weight: 600; }

@media (max-width: 960px) {
  .trust-row { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .trust-row { grid-template-columns: 1fr; }
}

/* Social proof, placed at the conversion moment */
.bc-social { max-width: 940px; margin: 36px auto 0; }
.bc-social__lede {
  text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-soft); font-weight: 600; margin: 0 0 18px;
}
.bc-social__cta { text-align: center; margin-top: 24px; }

/* Chinese unlock card placed after the free reading */
.cn-unlock {
  max-width: 760px; margin: 26px auto 0;
  background: linear-gradient(170deg, #fff, #FBF4E6);
  border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-md);
  padding: 30px 32px; text-align: center;
}
.cn-unlock h3 { font-family: var(--serif); font-weight: 600; font-size: 24px; margin: 4px 0 12px; color: var(--ink); }
.cn-unlock h3 em { font-style: italic; color: var(--gold); }
.cn-unlock p { color: var(--ink-soft); font-size: 15px; max-width: 56ch; margin: 0 auto 20px; }

/* ================================================
   Tarot page
   ================================================ */
.t-section { padding: 80px 0; }
.t-section--alt { background: linear-gradient(180deg, transparent, rgba(228,218,241,.25)); }

/* tarot card visual */
.tcard {
  aspect-ratio: 2 / 3; width: 200px;
  background: linear-gradient(160deg, #2A1A4A, #1B1130);
  border-radius: 14px; padding: 6px;
  box-shadow: 0 18px 40px rgba(46,26,71,.35), inset 0 0 0 1px rgba(201,162,75,.6);
  position: relative;
}
.tcard__inner {
  height: 100%; border: 1px solid rgba(201,162,75,.4); border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 18px 12px; text-align: center; color: var(--gold-2);
  font-family: var(--serif);
}
.tcard__ornament { color: var(--gold); font-size: 16px; margin-bottom: auto; padding-top: 4px; }
.tcard__num { font-size: 38px; font-weight: 600; line-height: 1; letter-spacing: 0.04em; color: var(--gold); }
.tcard__name {
  margin-top: auto; font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold-2);
  padding-bottom: 4px;
}
.tcard--sm { width: 70px; }
.tcard--sm .tcard__num { font-size: 22px; }
.tcard--sm .tcard__name { font-size: 9px; letter-spacing: .1em; }
.tcard--sm .tcard__ornament { font-size: 10px; }

/* tarot widget card */
.tw-card {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-md);
  padding: 36px; max-width: 880px; margin: 0 auto;
}
.tw-card__grid { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: center; }
.tw__art { display: flex; justify-content: center; }
.tw-card__body h3.tw__cardname {
  font-family: var(--serif); font-weight: 600; font-size: 28px; margin: 4px 0 6px; color: var(--ink);
}
.tw__kw { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); margin: 0 0 16px; }
.tw__reading { margin: 0 0 22px !important; }
.tw__fine { font-size: 12px; color: var(--ink-soft); margin: 10px 0 0; }

/* Yes or No */
.tyn { max-width: 640px; margin: 0 auto; display: flex; gap: 10px; flex-wrap: wrap; }
.tyn .tw__input {
  flex: 1; min-width: 220px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 14px 20px; font-family: var(--sans); font-size: 15px;
  color: var(--ink); background: #fff;
}
.tyn .tw__input::placeholder { color: var(--ink-soft); }
.tyn__result { max-width: 880px; margin: 36px auto 0; padding: 36px; background: #fff; border:1px solid var(--line); border-radius:22px; box-shadow: var(--shadow-md); }
.tw__answer {
  font-family: var(--serif); font-weight: 600; font-size: 44px; line-height: 1;
  margin: 0 0 6px; color: var(--ink);
}
.tw__answer[data-tone="yes"] { color: #4A6A45; }
.tw__answer[data-tone="no"] { color: #9C3F4F; }
.tw__answer[data-tone="maybe"] { color: var(--gold); }

/* Three-card spread */
.tthree-actions { text-align: center; }
.tthree__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
.tcard-col { text-align: center; background:#fff; border:1px solid var(--line); border-radius: 18px; padding: 26px 22px; box-shadow: var(--shadow-sm); }
.tcard-col__pos { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); font-weight: 600; margin: 0 0 16px; }
.tcard-col .tcard { margin: 0 auto 16px; width: 140px; }
.tcard-col__name { font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.tcard-col__kw { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); margin: 0 0 14px; }
.tcard-col__text { color: var(--ink-2); font-size: 14px; line-height: 1.6; margin: 0; text-align: left; }
.tthree-cta { text-align: center; margin-top: 36px; }

/* More readings */
.treadings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.treading {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 24px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.treading:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.treading__icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(160deg, #2A1A4A, #1B1130);
  color: var(--gold-2); display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--serif); font-size: 20px; margin-bottom: 16px;
}
.treading h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 0 0 5px; }
.treading p { font-size: 14px; color: var(--ink-soft); margin: 0 0 16px; }

/* Card meanings library */
.tlib-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tlib-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; display: flex; gap: 14px; align-items: center;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tlib-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.tlib-card h4 { font-family: var(--serif); font-size: 17px; font-weight: 600; margin: 0; color: var(--ink); }
.tlib-card p { font-size: 12px; color: var(--ink-soft); margin: 3px 0 0; }

@media (max-width: 760px) {
  .tw-card__grid { grid-template-columns: 1fr; gap: 24px; }
  .tw__art { margin: 0 auto; }
  .tthree__grid { grid-template-columns: 1fr; }
  .treadings-grid { grid-template-columns: 1fr 1fr; }
  .tlib-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .treadings-grid, .tlib-grid { grid-template-columns: 1fr; }
}

/* ================================================
   Tarot animated card pull
   ================================================ */
.t-pull { padding: 60px 0 100px; background: linear-gradient(180deg, transparent, rgba(228,218,241,.25)); }

.tdeck {
  margin: 30px auto 0;
  max-width: 980px;
  position: relative;
}

.tdeck__fan {
  position: relative;
  height: 340px;
  perspective: 1500px;
  display: flex; align-items: flex-end; justify-content: center;
}

.tdeck__card {
  position: absolute;
  left: 50%;
  bottom: 20px;
  width: 160px;
  aspect-ratio: 2 / 3;
  margin-left: -80px;            /* centre on left:50% */
  border: 0; padding: 0; background: transparent;
  cursor: pointer;
  transform-origin: 50% 110%;
  transform: rotate(calc(var(--i) * 7deg)) translateY(calc(abs(var(--i)) * 6px));
  transition: transform .5s ease, opacity .5s ease, z-index 0s .25s;
  z-index: calc(10 - abs(var(--i)));
  filter: drop-shadow(0 14px 24px rgba(46,26,71,.25));
}
.tdeck__card:hover {
  transform: rotate(calc(var(--i) * 7deg)) translateY(calc(abs(var(--i)) * 6px - 32px));
  filter: drop-shadow(0 22px 36px rgba(201,162,75,.35));
}

.tdeck__card.is-chosen {
  z-index: 100;
  transform: translate(0, -60px) rotate(0deg) scale(1.05);
  transition: transform .8s cubic-bezier(.5,0,.2,1), z-index 0s;
}
.tdeck__card.is-faded {
  opacity: 0.18; pointer-events: none;
  transform: rotate(calc(var(--i) * 7deg)) translateY(calc(abs(var(--i)) * 6px + 40px));
}

.tdeck__flip {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.5,0,.2,1);
}
.tdeck__card.is-flipped .tdeck__flip { transform: rotateY(180deg); }

.tdeck__back, .tdeck__face {
  position: absolute; inset: 0;
  border-radius: 14px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
  font-family: var(--serif);
}

.tdeck__back {
  background: linear-gradient(160deg, #2A1A4A, #1B1130);
  border: 1px solid rgba(201,162,75,.6);
  box-shadow: inset 0 0 0 4px rgba(201,162,75,.12), inset 0 0 0 5px rgba(201,162,75,.45);
}
.tdeck__back::before {
  content: ""; position: absolute; inset: 14px; border-radius: 8px;
  border: 1px solid rgba(201,162,75,.25);
}
.tdeck__ornament {
  font-size: 34px; color: var(--gold); opacity: .9;
  filter: drop-shadow(0 0 14px rgba(201,162,75,.5));
}

.tdeck__face {
  background: linear-gradient(160deg, #2A1A4A, #1B1130);
  border: 1px solid rgba(201,162,75,.6);
  transform: rotateY(180deg);
  flex-direction: column;
  padding: 16px 12px;
  color: var(--gold-2);
}
.tdeck__face .tcard__ornament { font-size: 14px; color: var(--gold); margin-bottom: auto; padding-top: 4px; }
.tdeck__face .tcard__num { font-size: 34px; font-weight: 600; line-height: 1; color: var(--gold); }
.tdeck__face .tcard__name {
  margin-top: auto; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold-2);
  padding-bottom: 4px;
}

.tdeck__hint {
  text-align: center; font-size: 12px; text-transform: uppercase;
  letter-spacing: .16em; color: var(--ink-soft); margin: 28px 0 0;
  transition: opacity .3s ease;
}

.tdeck__reveal {
  margin: 40px auto 0; max-width: 720px; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-lg); padding: 36px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.tdeck__reveal.is-in { opacity: 1; transform: translateY(0); }
.tdeck__name { font-family: var(--serif); font-weight: 600; font-size: 30px; margin: 6px 0 4px; color: var(--ink); }
.tdeck__kw { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); margin: 0 0 18px; }
.tdeck__reading { font-size: 17px !important; margin: 0 0 22px !important; text-align: left; }
.tdeck__cta { margin-bottom: 16px; }
.tdeck__reset { margin-top: 10px; }
.tdeck__answer { font-family: var(--serif); font-weight: 600; font-size: 44px; margin: 0 0 8px; color: var(--ink); }
.tdeck__answer[data-tone="yes"] { color: #4A6A45; }
.tdeck__answer[data-tone="no"] { color: #9C3F4F; }
.tdeck__answer[data-tone="maybe"] { color: var(--gold); }

/* Free short guides grid (Tarot intro page) */
.tguides-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 980px; margin: 0 auto; }
.tguide {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 28px; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tguide:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.tguide__tag {
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--gold);
  font-weight: 600; margin: 0 0 12px;
}
.tguide h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; margin: 0 0 8px; color: var(--ink); }
.tguide p { font-size: 14px; color: var(--ink-soft); margin: 0 0 18px; }

@media (max-width: 760px) {
  .tdeck__card { width: 110px; }
  .tdeck__fan { height: 240px; }
  .tguides-grid { grid-template-columns: 1fr; }
}

/* ================================================
   Tarot sequential spreads (3-card, love, career, celtic)
   ================================================ */
.t-spread { padding: 60px 0 100px; }
.t-spread__status {
  text-align: center; font-size: 13px; letter-spacing: .02em;
  color: var(--ink-soft); margin: 0 0 8px;
}
.t-spread__status strong { color: var(--ink); font-weight: 600; }
.t-spread__status.is-done { opacity: .4; }

.tdeck--spread .tdeck__fan { height: 280px; }
.tdeck--spread .tdeck__card { width: 130px; }

.t-spread__slots {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 22px; max-width: 920px; margin: 40px auto 0;
}
.t-spread__slot { text-align: center; opacity: 0.6; transition: opacity .4s ease; }
.t-spread__slot.is-filled { opacity: 1; }
.t-spread__pos {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--gold); font-weight: 600; margin: 0 0 12px;
}
.t-spread__placeholder {
  width: 110px; aspect-ratio: 2 / 3; margin: 0 auto;
  background: rgba(46,26,71,0.04);
  border: 1px dashed rgba(46,26,71,0.18); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.t-spread__placeholder .tcard { width: 110px; }

.t-spread__reveal {
  margin: 50px auto 0; max-width: 980px;
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-lg); padding: 36px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
}
.t-spread__reveal.is-in { opacity: 1; transform: translateY(0); }
.t-spread__readings { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin: 18px 0 24px; }
.t-spread__cta { text-align: center; }
.t-spread__reset { margin-top: 14px; }

/* --- Spread mode: cards in a single face-down row (no fan) --- */
.tdeck--spread .tdeck__fan {
  position: relative;
  perspective: 1500px;
  display: flex; flex-wrap: nowrap;
  justify-content: center; align-items: flex-end;
  gap: 6px; padding: 24px 0 30px;
  height: auto;
  max-width: 100%; overflow-x: auto;
}
.tdeck--spread .tdeck__card {
  position: static;            /* override fan absolute */
  width: 84px;                  /* compact so 9–13 cards fit a row */
  margin: 0;
  transform: none;              /* clear the fan rotation */
  transform-origin: center bottom;
  z-index: auto;
  flex-shrink: 0;
}
.tdeck--spread .tdeck__card:hover {
  transform: translateY(-14px);
  filter: drop-shadow(0 18px 30px rgba(201,162,75,.35));
}
.tdeck--spread .tdeck__card.is-flipped {
  transform: translateY(-14px); /* the flipped card stays slightly lifted */
}
.tdeck--spread .tdeck__card.is-used {
  opacity: 0.45; pointer-events: none;
}
.tdeck--spread .tdeck__card.is-used.is-flipped { opacity: 1; }
@media (max-width: 760px) {
  .tdeck--spread .tdeck__card { width: 64px; }
}

/* --- Tarot cards with real Rider-Waite images --- */
.tcard {
  /* Tighten outer; the image becomes the card itself */
  padding: 0;
  background: #1B1130;
  border: 1px solid rgba(201,162,75,.55);
}
.tcard__inner {
  border: 0;
  padding: 0;
  border-radius: inherit;
  overflow: hidden;
  display: block;
  background: #1B1130;
}
.tcard__inner img {
  width: 100%; height: 100%;
  display: block; object-fit: cover;
}

/* Card-back / deck face when flipped: image fills the front */
.tdeck__face {
  padding: 0;
  background: #1B1130;
}
.tdeck__face img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Library card row gets a touch more height for the image */
.tlib-card .tcard--sm { width: 64px; }

/* Match the real Rider-Waite proportions so the image fills the card cleanly */
.tcard, .tdeck__card { aspect-ratio: 1111 / 1919; }
.tcard__inner img, .tdeck__face img { object-fit: contain; background: #1B1130; }

/* Tarot guide article (long-form copy) */
.tguide-article { max-width: 720px; margin: 0 auto; }
.tguide-article h2 {
  font-family: var(--serif); font-weight: 600; font-size: 24px;
  margin: 28px 0 10px; color: var(--ink);
}
.tguide-article h2:first-child { margin-top: 0; }
.tguide-article p { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0 0 16px; }
.tguide-article strong { color: var(--ink); }
.tguide-article em { color: var(--ink); font-style: italic; }
.tguide__list { list-style: none; padding: 0; margin: 0 0 18px; }
.tguide__list li { font-size: 15px; line-height: 1.65; color: var(--ink-2); margin: 0 0 10px; padding-left: 18px; position: relative; }
.tguide__list li::before { content: "✦"; color: var(--gold); position: absolute; left: 0; top: 0; }

/* ================================================
   Tarot card-meanings modal
   ================================================ */
.tmodal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; transition: opacity .25s ease;
}
.tmodal.is-open { opacity: 1; }
.tmodal__backdrop {
  position: absolute; inset: 0;
  background: rgba(27, 17, 48, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tmodal__panel {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  max-width: 820px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  padding: 36px;
  transform: translateY(12px); transition: transform .3s ease;
}
.tmodal.is-open .tmodal__panel { transform: translateY(0); }
.tmodal__close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--line); color: var(--ink);
  font-size: 18px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.tmodal__close:hover { background: var(--ink); color: var(--cream); }

.tmodal__grid {
  display: grid; grid-template-columns: 200px 1fr; gap: 34px; align-items: start;
}
.tmodal__art .tcard { width: 200px; }
.tmodal__body { min-width: 0; }
.tmodal__name {
  font-family: var(--serif); font-weight: 600; font-size: 32px;
  margin: 4px 0 4px; color: var(--ink);
}
.tmodal__kw {
  font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-soft); margin: 0 0 20px;
}
.tmodal__h {
  font-family: var(--serif); font-weight: 600; font-size: 17px;
  margin: 18px 0 6px; color: var(--ink);
}
.tmodal__body p { font-size: 15px; line-height: 1.65; color: var(--ink-2); margin: 0 0 6px; }

@media (max-width: 640px) {
  .tmodal__panel { padding: 22px; }
  .tmodal__grid { grid-template-columns: 1fr; gap: 20px; }
  .tmodal__art .tcard { width: 160px; margin: 0 auto; }
  .tmodal__name { font-size: 26px; }
}

/* Modal navigation arrows */
.tmodal__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--line); color: var(--ink);
  font-size: 24px; font-family: var(--serif); line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, transform .15s ease;
  z-index: 2;
}
.tmodal__nav:hover { background: var(--ink); color: var(--cream); }
.tmodal__nav--prev { left: -22px; }
.tmodal__nav--next { right: -22px; }
@media (max-width: 720px) {
  .tmodal__nav { width: 38px; height: 38px; font-size: 20px; }
  .tmodal__nav--prev { left: 6px; }
  .tmodal__nav--next { right: 6px; }
}

/* Modal: properly hide when not open (the [hidden] attribute alone is overridden by display:flex above) */
.tmodal[hidden] { display: none !important; }
.tmodal { pointer-events: none; }
.tmodal.is-open { pointer-events: auto; }

/* ================================================
   Love page
   ================================================ */
.love-calc { padding: 30px 0 90px; }
.love-form {
  max-width: 760px; margin: 0 auto;
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-md);
  padding: 32px;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px;
  align-items: start;
}
.love-form__col { display: grid; gap: 12px; }
.love-form__who {
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--gold); font-weight: 600; margin: 0;
}
.love-form label { font-size: 13px; font-weight: 500; color: var(--ink-2); display: grid; gap: 6px; }
.love-form input {
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px;
  font-family: var(--sans); font-size: 14px; color: var(--ink); background: var(--cream);
}
.love-form input::placeholder { color: var(--ink-soft); }
.love-form__heart {
  align-self: center;
  font-family: var(--serif); font-size: 38px;
  color: var(--gold); line-height: 1; padding-top: 30px;
}
.love-form__submit { grid-column: 1 / -1; margin-top: 6px; }

.love-result { max-width: none; margin-top: 8px; }
.love-result__head { gap: 20px; flex-wrap: wrap; }
.love-result__pair {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 13px;
}
.love-sun {
  font-family: "Cormorant Garamond", "Apple Symbols", "Segoe UI Symbol", serif;
  font-variant-emoji: text; font-size: 16px; color: var(--ink);
}
.love-sun-sep { color: var(--ink-soft); }
.love-elements { color: var(--ink-soft); }

.love-ring { position: relative; width: 100px; height: 100px; flex-shrink: 0; }
.love-ring svg { display: block; }
.love-ring__fill { transition: stroke-dashoffset 1s ease-out; }
.love-result__score {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--ink);
}

/* Venus signs library */
.venus-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  max-width: 1080px; margin: 0 auto;
}
.venus-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.venus-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.venus-card__glyph {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream-2); color: var(--gold);
  font-family: "Cormorant Garamond", "Apple Symbols", "Segoe UI Symbol", serif;
  font-variant-emoji: text; font-size: 22px; flex-shrink: 0;
}
.venus-card h4 { font-family: var(--serif); font-weight: 600; font-size: 17px; margin: 0; }
.venus-card p { font-size: 12px; color: var(--ink-soft); margin: 2px 0 0; }

/* Venus modal */
.vmodal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.vmodal[hidden] { display: none !important; }
.vmodal.is-open { opacity: 1; pointer-events: auto; }
.vmodal__backdrop {
  position: absolute; inset: 0;
  background: rgba(27, 17, 48, 0.7);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.vmodal__panel {
  position: relative; background: #fff;
  border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-lg);
  max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto;
  padding: 36px;
  transform: translateY(12px); transition: transform .3s ease;
}
.vmodal.is-open .vmodal__panel { transform: translateY(0); }
.vmodal__close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--line); color: var(--ink);
  font-size: 18px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.vmodal__close:hover { background: var(--ink); color: var(--cream); }
.vmodal__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--line); color: var(--ink);
  font-size: 22px; font-family: var(--serif); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
}
.vmodal__nav:hover { background: var(--ink); color: var(--cream); }
.vmodal__nav--prev { left: -20px; }
.vmodal__nav--next { right: -20px; }
.vmodal__head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.vmodal__glyph {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--cream-2); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: "Cormorant Garamond", "Apple Symbols", "Segoe UI Symbol", serif;
  font-variant-emoji: text; font-size: 28px;
}
.vmodal__title { font-family: var(--serif); font-weight: 600; font-size: 24px; margin: 0; color: var(--ink); }
.vmodal__kw { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); margin: 4px 0 0; }
.vmodal__element-tag { font-size: 13px; color: var(--ink-soft); margin: 0 0 16px; }
.vmodal__text { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0; }

@media (max-width: 760px) {
  .love-form { grid-template-columns: 1fr; }
  .love-form__heart { padding: 0; text-align: center; }
  .venus-grid { grid-template-columns: repeat(2, 1fr); }
  .vmodal__nav--prev { left: 6px; }
  .vmodal__nav--next { right: 6px; }
}
@media (max-width: 480px) {
  .venus-grid { grid-template-columns: 1fr; }
}

/* ================================================
   Rituals page
   ================================================ */
.tonight {
  display: grid; grid-template-columns: 240px 1fr; gap: 36px; align-items: center;
  max-width: 860px; margin: 0 auto;
  background: linear-gradient(170deg, #2A1A4A, #1B1130); color: var(--cream);
  border-radius: 24px; padding: 36px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(201,162,75,.25);
}
.tonight__phase { text-align: center; }
.tonight__phase-glyph { font-size: 60px; line-height: 1; color: var(--gold-2); display: block; margin-bottom: 10px; filter: drop-shadow(0 0 20px rgba(217,185,122,.4)); }
.tonight__phase .eyebrow { color: var(--gold); }
.tonight__phase-name { font-family: var(--serif); font-weight: 600; font-size: 26px; margin: 0; color: var(--cream); }
.tonight__body { display: grid; gap: 18px; }
.tonight__blurb { color: rgba(251,246,236,.85); font-size: 16px; line-height: 1.65; margin: 0; }
.tonight__ritual { width: max-content; }

/* Category cards */
.rcat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rcat {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 28px 24px; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.rcat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.rcat__icon {
  width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(160deg, #2A1A4A, #1B1130);
  color: var(--gold-2); display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 26px; margin-bottom: 16px;
}
.rcat h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; margin: 0 0 8px; color: var(--ink); }
.rcat p { font-size: 14px; color: var(--ink-soft); margin: 0 0 16px; }

/* Featured rituals grid */
.ritual-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ritual-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 24px; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  cursor: pointer;
}
.ritual-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.ritual-card__icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--cream-2); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 22px; margin-bottom: 14px;
}
.ritual-card__cat {
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--gold); font-weight: 600; margin: 0 0 6px;
}
.ritual-card h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 0 0 8px; color: var(--ink); }
.ritual-card__intro { font-size: 14px; color: var(--ink-soft); margin: 0 0 16px; flex: 1; }

/* Ritual modal */
.rmodal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.rmodal[hidden] { display: none !important; }
.rmodal.is-open { opacity: 1; pointer-events: auto; }
.rmodal__backdrop {
  position: absolute; inset: 0;
  background: rgba(27, 17, 48, 0.7);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.rmodal__panel {
  position: relative; background: #fff;
  border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-lg);
  max-width: 640px; width: 100%; max-height: 88vh; overflow-y: auto;
  padding: 36px;
  transform: translateY(12px); transition: transform .3s ease;
}
.rmodal.is-open .rmodal__panel { transform: translateY(0); }
.rmodal__close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--line); color: var(--ink);
  font-size: 18px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.rmodal__close:hover { background: var(--ink); color: var(--cream); }
.rmodal__title { font-family: var(--serif); font-weight: 600; font-size: 28px; margin: 6px 0 6px; color: var(--ink); }
.rmodal__when { font-size: 13px; color: var(--ink-soft); font-style: italic; margin: 0 0 18px; }
.rmodal__intro { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0 0 22px !important; }
.rmodal__h {
  font-family: var(--serif); font-weight: 600; font-size: 18px;
  margin: 22px 0 10px; color: var(--ink);
}
.rmodal__materials { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.rmodal__materials li { font-size: 14px; color: var(--ink-2); padding-left: 18px; position: relative; }
.rmodal__materials li::before { content: "·"; color: var(--gold); position: absolute; left: 6px; font-weight: 700; }
.rmodal__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.rmodal__steps li { display: flex; gap: 14px; align-items: flex-start; }
.rmodal__steps li span {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--ink); display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600; font-size: 14px;
}
.rmodal__steps li p { margin: 2px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

.rmodal__gate {
  margin-top: 28px; padding: 22px; text-align: center;
  background: var(--cream); border: 1px dashed rgba(201,162,75,.5); border-radius: 14px;
}
.rmodal__lock {
  display: inline-flex; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--ink); align-items: center; justify-content: center; margin-bottom: 10px;
}
.rmodal__gate p { font-size: 14px; color: var(--ink-2); margin: 0 0 14px; }

@media (max-width: 760px) {
  .tonight { grid-template-columns: 1fr; text-align: center; padding: 28px; }
  .tonight__ritual { margin: 0 auto; }
  .rcat-grid, .ritual-grid { grid-template-columns: 1fr; }
}
@media (min-width: 760px) and (max-width: 1024px) {
  .rcat-grid, .ritual-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================
   Guides page
   ================================================ */
.guides-toc {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  max-width: 920px; margin: 0 auto;
}
.guides-toc a {
  font-size: 13px; font-weight: 500;
  padding: 8px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.guides-toc a:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.tguide--soon {
  opacity: .65; cursor: default;
}
.tguide--soon:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line); }
.tguide--soon .tguide__tag { color: var(--ink-soft); }
.tguide--soon .pillar__cta { color: var(--ink-soft); }

/* ================================================
   Shop page
   ================================================ */
.shop { padding: 60px 0 100px; }
.shop__tabs {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 0 auto 48px; max-width: 720px;
}
.shop__tab {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 500;
  padding: 10px 20px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.shop__tab:hover { border-color: var(--ink); color: var(--ink); }
.shop__tab.is-active {
  background: var(--ink); color: var(--cream); border-color: var(--ink);
}
.shop__grid {
  display: grid; gap: 28px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) { .shop__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .shop__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .shop__grid { grid-template-columns: 1fr; } }

.shop-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.shop-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(34,30,52,0.08);
  border-color: var(--gold);
}
.shop-card__media {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px;
  font-variant-emoji: text;
  margin-bottom: 4px;
}
.shop-card__media--ebooks   { background: linear-gradient(135deg, #efe7d8, #e0d2bf); color: #6b5536; }
.shop-card__media--crystals { background: linear-gradient(135deg, #e7e0ee, #cfc2dc); color: #5b4783; }
.shop-card__media--cards    { background: linear-gradient(135deg, #efe1d6, #e2c8b5); color: #7a4a2a; }
.shop-card__media--bundles  { background: linear-gradient(135deg, #e6ddc6, #d2c089); color: #6b5419; }
.shop-card__media span { line-height: 1; }
.shop-card__cat {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0;
}
.shop-card h3 {
  font-family: var(--font-serif);
  font-size: 19px; font-weight: 600; line-height: 1.25;
  color: var(--ink); margin: 0;
}
.shop-card__desc {
  font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0;
  flex: 1;
}
.shop-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 6px;
}
.shop-card__price {
  font-family: var(--font-serif); font-size: 20px; font-weight: 600;
  color: var(--ink);
}

/* ================================================
   Blog page + posts
   ================================================ */
.blog { padding: 60px 0 100px; }
.blog__grid {
  display: grid; gap: 28px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) { .blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog__grid { grid-template-columns: 1fr; } }

.post-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(34,30,52,0.08);
  border-color: var(--gold);
}
.post-card__media {
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  font-size: 64px; color: var(--gold);
  background: linear-gradient(135deg, #ece4d0, #dccfb3);
  font-variant-emoji: text;
}
.post-card__media--love     { background: linear-gradient(135deg, #efdfe3, #d9bcc6); color: #8a3e5d; }
.post-card__media--moon     { background: linear-gradient(135deg, #e0dcef, #b6abda); color: #3a3270; }
.post-card__media--ritual   { background: linear-gradient(135deg, #e7ddc5, #cdb985); color: #6b5419; }
.post-card__media--tarot    { background: linear-gradient(135deg, #e1d6ea, #b8a3cd); color: #4a2e6e; }
.post-card__media--season   { background: linear-gradient(135deg, #f0e2cc, #ddc594); color: #6b4f1f; }
.post-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card__meta {
  display: flex; gap: 14px; align-items: center;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0;
}
.post-card__meta strong { color: var(--gold); font-weight: 500; letter-spacing: .12em; }
.post-card h3 {
  font-family: var(--font-serif);
  font-size: 22px; font-weight: 600; line-height: 1.25;
  color: var(--ink); margin: 0;
}
.post-card h3 a { color: inherit; }
.post-card h3 a:hover { color: var(--plum); }
.post-card__excerpt {
  font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0;
  flex: 1;
}
.post-card__readmore {
  font-size: 13px; font-weight: 600; color: var(--plum);
  margin-top: 4px;
}

/* Single blog post */
.post {
  max-width: 760px; margin: 0 auto;
  padding: 60px 24px 100px;
}
.post__meta {
  display: flex; gap: 14px; align-items: center;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 14px;
}
.post__meta strong { color: var(--gold); font-weight: 500; letter-spacing: .12em; }
.post h1 {
  font-family: var(--font-serif);
  font-size: 44px; font-weight: 600; line-height: 1.15;
  color: var(--ink); margin: 0 0 20px;
}
.post__lede {
  font-family: var(--font-serif);
  font-size: 21px; font-style: italic; line-height: 1.5;
  color: var(--ink-2); margin: 0 0 36px;
}
.post__hero {
  aspect-ratio: 16 / 9; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 96px; color: var(--gold);
  background: linear-gradient(135deg, #ece4d0, #dccfb3);
  margin-bottom: 40px; font-variant-emoji: text;
}
.post__body p,
.post__body ul,
.post__body ol {
  font-size: 17px; line-height: 1.75; color: var(--ink-2);
  margin: 0 0 18px;
}
.post__body h2 {
  font-family: var(--font-serif);
  font-size: 28px; font-weight: 600; line-height: 1.25;
  color: var(--ink); margin: 36px 0 14px;
}
.post__body h3 {
  font-family: var(--font-serif);
  font-size: 22px; font-weight: 600; line-height: 1.3;
  color: var(--ink); margin: 28px 0 12px;
}
.post__body ul, .post__body ol { padding-left: 22px; }
.post__body li { margin-bottom: 8px; }
.post__body blockquote {
  font-family: var(--font-serif);
  font-size: 20px; font-style: italic; line-height: 1.55;
  color: var(--plum);
  border-left: 3px solid var(--gold);
  padding: 6px 0 6px 22px;
  margin: 28px 0;
}
.post__back {
  display: inline-block; margin-bottom: 18px;
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
}
.post__back:hover { color: var(--ink); }