/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* svh (small viewport height) excludes the space the mobile browser's
     collapsible URL bar can reclaim, so the hero doesn't get cut short the
     instant that bar is showing — 100vh assumes it's always hidden. */
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: radial-gradient(circle at 70% 30%, var(--burgundy) 0%, var(--plum) 60%, var(--plum-deep) 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-story-label {
  /* Base .eyebrow color is --gold-ink, tuned for light backgrounds — on the
     hero's dark gradient that reads muted, so restore the brighter --gold
     here and add a soft glow to match the hero's own luminous tone. */
  color: var(--gold);
  text-shadow: 0 0 14px rgba(199, 164, 91, 0.55), 0 0 30px rgba(199, 164, 91, 0.3);
  transition: opacity 0.5s var(--ease);
}
.hero-story-label.is-swapping { opacity: 0; }
.hero h1 {
  font-size: var(--fs-hero);
  color: var(--ivory);
}
.hero h1 .accent { color: var(--gold); font-style: italic; }
.hero .lead { color: var(--on-dark-1); 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: var(--fs-body-sm); font-weight: 600; color: var(--ivory); border-bottom: 1px solid var(--on-dark-3); 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: var(--fs-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}
.hero-scroll-cue .line { width: 1px; height: 34px; background: var(--on-dark-3); 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;
  /* The sticky canvas below is pinned to the viewport while this section is
     mid-scroll, which is correct — but sticky positioning has no innate
     awareness of the section's own bottom edge, so on the frame it releases
     it can briefly render past this box into the section after it. Clipping
     here guarantees the tree can never paint outside the dark background it
     was drawn for.

     clip-path, not overflow: hidden — `overflow` other than visible turns
     the element into a scroll container, which becomes the nearest
     scrolling ancestor for the sticky descendant below and breaks its
     stickiness against the real page scroll (it stops pinning partway
     through instead of tracking all the way to the section's end).
     clip-path only affects paint, not layout/scroll containment, so the
     sticky pin still tracks the document scroll correctly. */
  clip-path: inset(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.
     The clamp here is a deliberate one-off (like --fs-hero) for this
     signature scroll narrative, not part of the general type scale. */
  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: var(--shadow-card); }
.card .num {
  font-family: var(--font-display);
  font-size: var(--fs-num-sm);
  /* --gold is 2.1:1 on the card's white background — use the text-safe
     --gold-ink here (--card-dark below is the dark-bg exception). */
  color: var(--gold-ink);
  margin-bottom: var(--space-sm);
}
.card h3 { margin-bottom: 0.6rem; }
.card p { color: var(--ink-2); font-size: var(--fs-body-sm); }

.card-dark {
  background: var(--burgundy);
  color: var(--ivory);
  border: none;
}
.card-dark p { color: var(--on-dark-1); }
.card-dark .num { color: var(--gold-light); }

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

/* ---------- Section watermark (Philosophy + Quiz) ---------- */
/* SVG's own viewBox clips the circles automatically, so no explicit
   overflow:hidden is needed on the host section. */
.arc-watermark {
  position: absolute;
  top: 0; right: 0;
  width: 420px;
  height: 420px;
  max-width: 55vw;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}
.arc-watermark-bl { top: auto; right: auto; bottom: 0; left: 0; }
.philosophy .container,
#quiz .container-narrow { position: relative; z-index: 1; }

/* ---------- 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 picture {
  display: block;
  width: 100%;
  height: 100%;
}
.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: var(--fs-caption); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.08em; }
.timeline { display: flex; gap: 0; flex-wrap: wrap; margin-top: var(--space-md); }
.timeline span {
  font-size: var(--fs-caption); font-weight: 700;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-right: none;
  color: var(--ink-3);
}
.timeline span:last-child { border-right: 1px solid var(--line); color: var(--plum); }
.pull-quote {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  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: var(--hairline-dark);
}
.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-family: var(--font-display); font-size: var(--fs-eyebrow); color: var(--gold); font-weight: 700; }
.goal-tile h3 { margin-top: var(--space-md); }

/* ---------- Money Journey steps ---------- */
/* One continuous rail down the numeral column ties the five rows together
   as a single journey, rather than five independent numbered blocks —
   same left-rail-plus-dot pattern as .timeline-vert on the About page. */
.journey-steps { counter-reset: step; border-left: 1px solid var(--line); }
.step-row {
  display: grid;
  grid-template-columns: 90px 1fr 1fr;
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-md) 0 var(--space-md) var(--space-md);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.step-row::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 2.4rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
}
.step-num {
  font-family: var(--font-display);
  font-size: var(--fs-num-lg);
  /* On the light section background --gold is 2.1:1 — gold-ink reads. */
  color: var(--gold-ink);
}
.step-title h3 { margin-bottom: 0.4rem; }
.step-items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.step-items span {
  font-size: var(--fs-caption);
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  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: var(--shadow-panel);
}
.quiz-progress { display: flex; gap: 0.4rem; margin-bottom: var(--space-md); }
.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-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); min-height: 1.6rem; }
.quiz-back {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--burgundy);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0;
}
.quiz-step-label { font-size: var(--fs-caption); color: var(--ink-2); margin-left: auto; }
.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: var(--fs-body-sm);
  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-option[aria-checked="true"] { border-color: var(--gold); background: var(--gold-soft); }
.quiz-noscript {
  margin-top: var(--space-lg);
  text-align: center;
  font-size: var(--fs-body-sm);
  color: var(--ink-2);
}
.quiz-noscript a { color: var(--burgundy); font-weight: 600; text-decoration: underline; }
.quiz-result { display: none; text-align: center; }
.quiz-result.active { display: block; animation: fadein 0.6s var(--ease); }
/* quiz-panel background is white — same gold-on-light fix as .eyebrow. */
.quiz-result .stage-label { color: var(--gold-ink); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--fs-caption); }
.quiz-result h3 { margin: var(--space-sm) 0; font-size: var(--fs-h2); }
.quiz-result p { margin: 0 auto var(--space-md); }
.quiz-retake { font-size: var(--fs-caption); text-decoration: underline; cursor: pointer; background:none; border:none; color: var(--burgundy); margin-top: var(--space-sm); }

/* ---------- Generic content blocks (used across pages) ---------- */
.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);
}

.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-ink);
}
/* h3, not h4: sits directly under the section's own h2 with no
   intermediate heading level. Still forced to body-sans — this is a
   company-name sub-label styled like the other UI labels (.footer-col h4,
   .iw-goal-tile h4), not an editorial heading, regardless of DOM level. */
.timeline-vert .t-item h3 { font-family: var(--font-body); font-weight: 700; margin-bottom: 0.3rem; }
.timeline-vert .t-item span { font-size: var(--fs-eyebrow); color: var(--gold-ink); 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: var(--fs-body); }
.zf-node.is-invest span.label { color: var(--gold-light); }
.zf-powered {
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.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: var(--on-dark-2); font-size: var(--fs-body-sm); }

.zf-note {
  margin-top: var(--space-lg);
  font-size: var(--fs-caption);
  color: var(--on-dark-3);
  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;
}
/* Same light-background gold-text fix as .step-num. */
.iw-step .iw-num { font-family: var(--font-display); font-size: var(--fs-num-lg); color: var(--gold-ink); }
.iw-step h3 { margin-bottom: 0.6rem; }
.iw-step p { color: var(--ink-2); }
.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: var(--radius-pill);
  font-size: var(--fs-caption);
  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: var(--ink-2); font-size: var(--fs-body-sm); }
.iw-ask-list li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }
/* Deliberately faint — a struck-through "not this" item, not a reading
   requirement, so it sits below the --ink scale's 4.5:1 floor on purpose. */
.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;
}
/* Same light-background gold-text fix as .eyebrow (iw-goal-tile bg is white). */
.iw-goal-tile .g-eyebrow { font-size: var(--fs-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; }
.iw-goal-tile h4 { font-family: var(--font-body); font-weight: 700; margin: 0.4rem 0; font-size: var(--fs-body-sm); }
.iw-goal-tile p { font-size: var(--fs-eyebrow); color: var(--ink-2); }

.footer-partner-line {
  font-size: var(--fs-eyebrow);
  color: var(--on-dark-3);
  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: var(--fs-micro);
  color: var(--on-dark-3);
  border-bottom: 1px solid rgba(247,242,234,0.25);
  padding-bottom: 1px;
}
.footer-zenflow-links a:hover { color: var(--on-dark-1); border-color: var(--on-dark-3); }

.faq-item { border-bottom: 1px solid var(--line); padding: var(--space-md) 0; }
/* h3, not h4: the FAQ questions sit directly under the section's own h2
   with no intermediate heading level, so h4 was skipping a level. Font
   size still overridden smaller than the default h3 clamp, matching how
   compact these questions read next to a one-line answer. */
.faq-item h3 { font-size: var(--fs-body); margin-bottom: 0.5rem; }
.faq-item p { color: var(--ink-2); font-size: var(--fs-body-sm); }

@media (max-width: 900px) {
  .card-grid, .goals-grid { grid-template-columns: 1fr; }
  .meet { grid-template-columns: 1fr; gap: var(--space-lg); }
  .step-row { grid-template-columns: 1fr; gap: var(--space-sm); padding-left: 0; }
  .journey-steps { border-left: none; }
  .step-row::before { display: none; }
  .footer-top { flex-direction: column; }
  .zf-journey-track { flex-direction: column; gap: var(--space-md); align-items: stretch; }
  .zf-journey-track::before { display: none; }
  .zf-node { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 0.8rem; flex-wrap: wrap; }
  .zf-node .zf-powered { flex-basis: 100%; margin-left: calc(14px + 0.8rem); text-align: left; }
  .zf-pillars, .iw-goal-grid { grid-template-columns: 1fr 1fr; }
  .iw-step { grid-template-columns: 1fr; }
}