/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: radial-gradient(circle at 70% 30%, var(--burgundy) 0%, var(--plum) 60%, #1e1119 100%);
  color: var(--ivory);
  overflow: hidden;
}
.hero::after {
  /* Blends the hero's radial gradient into the flat plum of the next section
     regardless of viewport size, instead of the two backgrounds meeting at a
     visible hard seam when the radial's edge color doesn't line up exactly. */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 260px;
  background: linear-gradient(to bottom, transparent, var(--plum));
  z-index: 1;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 6rem;
  padding-bottom: 5rem;
  max-width: 720px;
}
.hero h1 {
  font-size: var(--fs-hero);
  color: var(--ivory);
}
.hero h1 .accent { color: var(--gold); font-style: italic; }
.hero .lead { color: rgba(247,242,234,0.82); margin: var(--space-md) 0 var(--space-lg); }
.hero-ctas { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; }
.hero-secondary-link { font-size: 0.9rem; font-weight: 600; color: var(--ivory); border-bottom: 1px solid rgba(247,242,234,0.4); padding-bottom: 2px; }

.hero-canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
}
#hero-canvas { width: 100%; height: 100%; display: block; }

.hero-scroll-cue {
  position: absolute;
  bottom: 2.2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247,242,234,0.6);
}
.hero-scroll-cue .line { width: 1px; height: 34px; background: rgba(247,242,234,0.4); position: relative; overflow: hidden; }
.hero-scroll-cue .line::after {
  content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
  background: var(--gold);
  animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue { to { top: 100%; } }

/* ---------- Journey story (scroll narrative) ---------- */
.journey-story {
  background: var(--plum);
  color: var(--ivory);
  padding: var(--space-lg) 0;
}
.journey-canvas-wrap {
  /* Pins behind the taller foreground text as it scrolls past. The sticky
     element still occupies its own height in normal flow, so the negative
     margin cancels that out rather than adding blank space to the section. */
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: calc(-100vh);
  z-index: 0;
  pointer-events: none;
}
#journey-canvas { width: 100%; height: 100%; display: block; }
.journey-content { position: relative; z-index: 1; }
.journey-story .container { text-align: center; }
.journey-line {
  /* Each line gets most of a viewport to itself, so as the visitor scrolls
     only one line is ever near-fully in view (crossing the 0.6 intersection
     threshold in animations.js) — a one-at-a-time spotlight, not a wall of
     text. Without this height, four short lines all fit onscreen together
     and all light up at once, which is the "weird" look this replaces. */
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  max-width: 900px;
  margin: 0 auto;
  opacity: 0.25;
  transform: scale(0.94);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.journey-line.is-active { opacity: 1; color: var(--gold-light); transform: scale(1); }
.journey-final {
  /* Given real scroll space of its own (rather than sitting right under the
     last line) so the tree has room to finish growing — and fade in only
     once journey.js marks it done via .bloom-done — before this text and
     the section's end are reached. Keeps the payoff on the dark background
     instead of it running into the light section right after.

     max-width/margin overrides are load-bearing, not decorative: the global
     `p { max-width: 65ch }` rule (css/global.css) was capping this element
     to ~507px with no margin:auto to center that smaller box, so it sat
     flush against the left edge instead of centered — the actual cause of
     the "coming to the left" look, not the canvas. */
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 700px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  letter-spacing: 0.01em;
  color: var(--gold-light);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.journey-final.bloom-done { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .journey-line { min-height: 0; padding: var(--space-sm) 0; opacity: 1; color: var(--gold-light); transform: none; }
  .journey-final { min-height: 0; padding: var(--space-md) 0; opacity: 1; transform: none; }
  /* The canvas's sticky/100vh + negative-margin trick assumes the section is
     tall (from .journey-line's min-height above) so it has room to pin
     against. With that height collapsed here, the same trick would overflow
     into the sections below — simplest correct fix is to not render the
     decorative animation at all when motion is reduced. */
  .journey-canvas-wrap { display: none; }
}

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -20px rgba(50,28,43,0.25); }
.card .num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}
.card h3 { margin-bottom: 0.6rem; }
.card p { color: rgba(36,33,36,0.68); font-size: 0.96rem; }

.card-dark {
  background: var(--burgundy);
  color: var(--ivory);
  border: none;
}
.card-dark p { color: rgba(247,242,234,0.78); }
.card-dark .num { color: var(--gold-light); }

/* ---------- Philosophy ---------- */
.philosophy { background: var(--ivory-deep); }
.philosophy-head { max-width: 640px; margin-bottom: var(--space-lg); }

/* ---------- Meet Pooja ---------- */
.meet {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-xl);
  align-items: center;
}
.meet-portrait {
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, var(--burgundy) 0%, var(--plum) 75%);
  position: relative;
  overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}
.meet-portrait-img {
  /* Source image already includes its own gradient card + gold ring, so it
     fills the frame edge-to-edge rather than sitting as a cutout on top of
     a separately-drawn card background (which would double up the ring). */
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.meet-stats { display: flex; gap: var(--space-lg); margin: var(--space-md) 0 var(--space-md); }
.meet-stats .stat strong { display: block; font-family: var(--font-display); font-size: 1.8rem; color: var(--plum); }
.meet-stats .stat span { font-size: 0.82rem; color: rgba(36,33,36,0.6); text-transform: uppercase; letter-spacing: 0.08em; }
.timeline { display: flex; gap: 0; flex-wrap: wrap; margin-top: var(--space-md); }
.timeline span {
  font-size: 0.85rem; font-weight: 700;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-right: none;
  color: rgba(36,33,36,0.55);
}
.timeline span:last-child { border-right: 1px solid var(--line); color: var(--plum); }
.pull-quote {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--burgundy);
  margin-top: var(--space-md);
  border-left: 3px solid var(--gold);
  padding-left: var(--space-sm);
}

/* ---------- Goals grid ---------- */
.goals { background: var(--plum); color: var(--ivory); }
.goals-head { max-width: 640px; }
.goals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: var(--space-lg);
  background: rgba(247,242,234,0.15);
}
.goal-tile {
  background: var(--plum);
  padding: var(--space-md);
  min-height: 180px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: background var(--dur) var(--ease);
}
.goal-tile:hover { background: var(--burgundy); }
.goal-tile .g-num { font-size: 0.8rem; color: var(--gold); font-weight: 700; }
.goal-tile h3 { font-size: 1.25rem; margin-top: var(--space-md); }

/* ---------- Money Journey steps ---------- */
.journey-steps { counter-reset: step; }
.step-row {
  display: grid;
  grid-template-columns: 90px 1fr 1fr;
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--line);
}
.step-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--gold);
}
.step-title h3 { margin-bottom: 0.4rem; }
.step-items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.step-items span {
  font-size: 0.82rem;
  padding: 0.35rem 0.8rem;
  border-radius: 100px;
  background: var(--gold-soft);
  color: var(--burgundy);
  font-weight: 600;
}

/* ---------- Quiz ---------- */
.quiz-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: 0 30px 60px -30px rgba(50,28,43,0.25);
}
.quiz-progress { display: flex; gap: 0.4rem; margin-bottom: var(--space-lg); }
.quiz-progress span { height: 3px; flex: 1; background: var(--line); border-radius: 3px; overflow: hidden; }
.quiz-progress span i { display: block; height: 100%; width: 0; background: var(--gold); transition: width var(--dur) var(--ease); }
.quiz-question { display: none; }
.quiz-question.active { display: block; animation: fadein 0.5s var(--ease); }
@keyframes fadein { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} }
.quiz-question h3 { margin-bottom: var(--space-md); }
.quiz-options { display: flex; flex-direction: column; gap: 0.75rem; }
.quiz-option {
  text-align: left;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ivory);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--charcoal);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.quiz-option:hover { border-color: var(--gold); background: var(--gold-soft); }
.quiz-result { display: none; text-align: center; }
.quiz-result.active { display: block; animation: fadein 0.6s var(--ease); }
.quiz-result .stage-label { color: var(--gold); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; }
.quiz-result h3 { margin: var(--space-sm) 0; font-size: 1.9rem; }
.quiz-result p { margin: 0 auto var(--space-md); }
.quiz-retake { font-size: 0.85rem; text-decoration: underline; cursor: pointer; background:none; border:none; color: var(--burgundy); margin-top: var(--space-sm); }

/* ---------- Generic content blocks (used across pages) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--space-sm); }
.tag {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.4rem 0.9rem; border-radius: 100px;
  background: var(--plum); color: var(--ivory);
}
.tag.alt { background: transparent; border: 1px solid var(--plum); color: var(--plum); }

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.category-card {
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
}
.category-card .eyebrow { margin-bottom: 0.4rem; }
.category-card ul { list-style: none; margin-top: var(--space-sm); display:flex; flex-direction:column; gap:0.5rem; }
.category-card li { font-size: 0.92rem; color: rgba(36,33,36,0.7); padding-left: 1rem; position: relative; }
.category-card li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }

.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
.offer-card {
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--white);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.offer-card.featured { background: var(--plum); color: var(--ivory); border-color: var(--plum); }
.offer-card.featured p { color: rgba(247,242,234,0.75); }
.offer-card .num { font-family: var(--font-display); color: var(--gold); font-size: 1.1rem; }

.flywheel-list { list-style: none; counter-reset: fw; margin-top: var(--space-lg); }
.flywheel-list li {
  counter-increment: fw;
  display: flex; align-items: baseline; gap: var(--space-md);
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
}
.flywheel-list li::before {
  content: counter(fw, decimal-leading-zero);
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1.1rem;
  min-width: 2.5rem;
}

.cta-band {
  background: var(--gold);
  color: var(--plum);
  padding: var(--space-lg) 0;
  text-align: center;
}
.cta-band h2 { color: var(--plum); margin-bottom: var(--space-sm); }

.page-hero {
  padding: 9rem 0 var(--space-lg);
  background: var(--ivory-deep);
}
.page-hero .eyebrow { color: var(--burgundy); }

.timeline-vert { margin-top: var(--space-lg); border-left: 1px solid var(--line); }
.timeline-vert .t-item { padding: 0 0 var(--space-lg) var(--space-md); position: relative; }
.timeline-vert .t-item::before {
  content: ""; position: absolute; left: -5px; top: 4px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
}
.timeline-vert .t-item h4 { font-family: var(--font-body); font-weight: 700; margin-bottom: 0.3rem; }
.timeline-vert .t-item span { font-size: 0.82rem; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Zenflow transition (journey → invest handoff) ---------- */
.zf-transition { background: var(--plum); color: var(--ivory); }
.zf-journey-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--space-lg) 0 var(--space-md);
  position: relative;
}
.zf-journey-track::before {
  content: "";
  position: absolute;
  left: 4%; right: 4%; top: 50%;
  height: 1px;
  background: rgba(247,242,234,0.18);
  z-index: 0;
}
.zf-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  text-align: center;
}
.zf-node .dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--plum);
  border: 2px solid rgba(247,242,234,0.35);
}
.zf-node.is-invest .dot { background: var(--gold); border-color: var(--gold); }
.zf-node span.label { font-family: var(--font-display); font-size: 1.05rem; }
.zf-node.is-invest span.label { color: var(--gold-light); }
.zf-powered {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247,242,234,0.55);
}
.zf-powered strong { color: var(--gold); font-weight: 700; }

.zf-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.zf-pillar {
  background: rgba(247,242,234,0.06);
  border: 1px solid rgba(247,242,234,0.14);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}
.zf-pillar h3 { color: var(--ivory); margin-bottom: 0.4rem; }
.zf-pillar p { color: rgba(247,242,234,0.7); font-size: 0.94rem; }

.zf-note {
  margin-top: var(--space-lg);
  font-size: 0.85rem;
  color: rgba(247,242,234,0.55);
  max-width: 60ch;
}

/* ---------- Invest With Pooja page ---------- */
.iw-step {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.iw-step .iw-num { font-family: var(--font-display); font-size: 2.6rem; color: var(--gold); }
.iw-step h3 { margin-bottom: 0.6rem; }
.iw-step p { color: rgba(36,33,36,0.72); }
.iw-risk-bands { display: flex; gap: 0.75rem; margin-top: var(--space-md); flex-wrap: wrap; }
.iw-risk-bands span {
  padding: 0.5rem 1rem;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--gold-soft);
  color: var(--burgundy);
}
.iw-ask-list { list-style: none; margin-top: var(--space-sm); display: flex; flex-direction: column; gap: 0.5rem; }
.iw-ask-list li { padding-left: 1.1rem; position: relative; color: rgba(36,33,36,0.72); font-size: 0.95rem; }
.iw-ask-list li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }
.iw-not { text-decoration: line-through; color: rgba(36,33,36,0.4); }

.iw-goal-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.iw-goal-tile {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-sm);
  text-align: center;
}
.iw-goal-tile .g-eyebrow { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.iw-goal-tile h4 { font-family: var(--font-body); font-weight: 700; margin: 0.4rem 0; font-size: 0.98rem; }
.iw-goal-tile p { font-size: 0.8rem; color: rgba(36,33,36,0.6); }

.zf-partner-box {
  background: var(--ivory-deep);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-top: var(--space-lg);
}
.zf-partner-box .partner-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--plum);
  color: var(--gold-light);
  padding: 0.35rem 0.8rem;
  border-radius: 100px;
  margin-bottom: var(--space-sm);
}

.disclosure-box {
  background: var(--ivory-deep);
  border-radius: var(--radius);
  padding: var(--space-md);
  font-size: 0.85rem;
  color: rgba(36,33,36,0.65);
  line-height: 1.7;
}
.disclosure-box .flag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--burgundy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.faq-item { border-bottom: 1px solid var(--line); padding: var(--space-md) 0; }
.faq-item h4 { font-family: var(--font-body); font-size: 1.02rem; margin-bottom: 0.5rem; }
.faq-item p { color: rgba(36,33,36,0.68); font-size: 0.94rem; }

.footer-partner-line {
  font-size: 0.8rem;
  color: rgba(247,242,234,0.55);
  margin-top: var(--space-sm);
}
.footer-zenflow-links {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.footer-zenflow-links a {
  font-size: 0.76rem;
  color: rgba(247,242,234,0.45);
  border-bottom: 1px solid rgba(247,242,234,0.25);
  padding-bottom: 1px;
}
.footer-zenflow-links a:hover { color: rgba(247,242,234,0.75); border-color: rgba(247,242,234,0.5); }

@media (max-width: 900px) {
  .card-grid, .goals-grid, .category-grid, .offer-grid { grid-template-columns: 1fr; }
  .meet, .split { grid-template-columns: 1fr; gap: var(--space-lg); }
  .step-row { grid-template-columns: 1fr; gap: var(--space-sm); }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .footer-top { flex-direction: column; }
  .zf-journey-track { flex-direction: column; gap: var(--space-md); align-items: flex-start; }
  .zf-journey-track::before { display: none; }
  .zf-pillars, .iw-goal-grid { grid-template-columns: 1fr 1fr; }
  .iw-step { grid-template-columns: 1fr; }
}