/* ============================================================
   RamMudra — product page
   Recreated 1:1 from Figma "IGM Dev In-house" · node 2296:3682
   Tokens (Instrument Serif + Satoshi, IGM Gold palette) come straight
   from the file's published variables. Layout is mobile-first (the Figma
   frame is 375px wide) and expands its grids at ≥768px.
   Depends on /assets/css/styles.css for the shared navbar / footer / .btn / fonts.
   ============================================================ */

.rm {
  /* ---- colour tokens (Figma variables) ---- */
  --igm-gold-50:  #f9f5ec;
  --igm-gold-700: #7e642a;
  --igm-gold-800: #5c491f;
  --igm-gold-900: #3d3014;
  --rm-gold:      #b9903f;   /* accent for the italic gold words */
  --rm-gold-soft: #c99a3f;
  --warning-100:  #fbeeca;
  --n-50:  #ffffff;
  --n-100: #f9f9fb;
  --n-200: #eeeef1;
  --n-300: #c8c8d2;
  --n-500: #8a8a97;
  --n-600: #606070;
  --n-900: #0d0f1a;
  --n-950: #000000;

  --serif: "Instrument Serif", Georgia, serif;
  --sans:  "Satoshi", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --rm-max: 1120px;   /* desktop content cap */
  --rm-col: 375px;    /* mobile column (Figma frame) */

  color: var(--n-900);
  font-family: var(--sans);
  background: var(--n-50);
  overflow-x: clip;
}

/* one narrow measure keeps the mobile layout intact and simply centres it
   on wider viewports; individual sections widen their own grids past 768px */
.rm-wrap { width: 100%; max-width: var(--rm-col); margin-inline: auto; padding-inline: 20px; }

/* ---- shared type ---- */
.rm .eyebrow {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--n-200);
  color: var(--n-900);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
}
.rm .serif-h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
.rm .gold-word { color: var(--rm-gold-soft); }

/* section title block used by several sections */
.rm-head { text-align: center; }
.rm-head .serif-h {
  font-size: 28px;
  line-height: 36px;
  color: var(--n-900);
}
.rm-head p {
  margin-top: 14px;
  font-size: 15px;
  line-height: 22px;
  color: var(--n-500);
}

/* ---- buttons (extends /assets/css/styles.css .btn) ---- */
.rm .btn { border-radius: 8px; letter-spacing: .02em; }
.rm .btn .arrow { font-size: 15px; line-height: 1; }
.rm .btn-share {
  width: 190px; max-width: 100%;
  height: 48px; justify-content: center;
  background: var(--n-950); color: #fff;
}
.rm .btn-block { width: 100%; height: 48px; justify-content: center; }

/* ============================================================
   1 · HERO
   ============================================================ */
.rm-hero {
  position: relative;
  min-height: 712px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0a0805;
  text-align: center;
}
/* the exact Figma jewellery ambience — heavily darkened + softened so the
   baked mock-up text washes out and only the warm gold glow remains */
.rm-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  overflow: hidden;            /* crops the oversized Vimeo iframe below to the hero */
  z-index: 0;
  /* poster fallback = the video's own first frame (exported to WebP), shown until
     the Vimeo iframe paints or if it fails to load; the playing video hides it */
  background: url("/assets/img/rammudra/rammudra-hero-banner.webp") center / cover no-repeat;
  /* kept bright so the ornate gold necklace reads clearly across the whole
     frame, exactly like the Figma design */
  filter: saturate(1.15) contrast(1.04) brightness(1.22);
}
/* the fill is now a Vimeo background iframe (background=1). Size it like the old
   <video>'s object-fit:cover: match the video's native 1730x1080 (~16:10) so it
   never pillarboxes, grow to the larger of the hero's width/height, centre, then
   let the parent crop the overflow. pointer-events off so it stays purely
   decorative, exactly like the muted loop it replaced. */
.rm-hero__bg iframe {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: auto; height: auto;
  min-width: 100%; min-height: 100%;
  aspect-ratio: 1730 / 1080;
  border: 0;
  pointer-events: none;
}
/* a soft dark scrim over the centre (where the source render's baked headline
   sits) so the real HTML headline reads cleanly and the baked text disappears,
   fading to transparent at the edges where the gold jewellery stays bright */
.rm-hero__wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 52% at 50% 47%, rgba(6,4,2,.72) 0%, rgba(6,4,2,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 12%, rgba(0,0,0,0) 40%, rgba(6,4,2,.9) 100%);
}
.rm-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 335px;
  padding: 96px 0 96px;   /* clears the fixed navbar + bottom wave; content stays vertically centred over the masked area */
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* lockup box mirrors the Figma group (357.2 × 100 → ratio 3.572); children are
   placed at the group's exact ml/mt/size percentages */
.rm-hero__logo {
  position: relative;
  width: 232px;
  aspect-ratio: 3.572;
  margin: 26px 0 30px;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.45));
}
.rm-logo__chakra   { position: absolute; left: 0;      top: 0;      width: 23.98%; height: 100%;   object-fit: contain; }
.rm-logo__wordmark { position: absolute; left: 24.91%; top: 30.86%; width: 75.63%; height: 43.74%; object-fit: contain; object-position: left; }
.rm-logo__tm       { position: absolute; left: 96.38%; top: 32.02%; width: 3.62%;  height: 6.90%;  object-fit: contain; }
.rm-hero .eyebrow { background: rgba(255,255,255,.25); color: #fafafa; letter-spacing: .1em; }
.rm-hero__title {
  color: #fff;
  font-size: 28px;
  line-height: 36px;
  max-width: 320px;
}
.rm-hero__sub {
  margin-top: 16px;
  font-size: 15px;
  line-height: 22px;
  color: rgba(255,255,255,.82);
  max-width: 320px;
}
.rm-hero__cta {
  margin-top: 40px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rm-hero .btn-glass {
  background: rgba(255,255,255,.10);
  border: .8px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #fff;
}
.rm-hero .btn-light { background: #fff; color: var(--n-900); }

/* ============================================================
   2 · INDIA'S STORY — scroll-scrubbed story
   Ported 1:1 from the igm-html-63 reference build (same markup skeleton,
   ids, timings and easing curves) — just the Tailwind utility classes
   rewritten as plain CSS so it matches this file's convention and doesn't
   pull in the Tailwind CDN runtime. 6 scroll steps: 0-2 crossfade the three
   framed photos while the 3 legacy lines highlight cumulatively; step 3
   swaps in the consumer line + digital-bonds slide; steps 4-5 bring in the
   floating claims + closing paragraph.
   ============================================================ */
/* ============================================================
   INDIA'S STORY — OLD vertical crossfade: DISABLED. Wrapped in a
   never-matching @media so the rules stay for reference but never
   apply. Replaced by the horizontal scrubber styles further below.
   ============================================================ */
@media not all {
.story-track { position: relative; height: 650vh; min-height: 3400px; background: #fff; }
.story-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: #fff;
}
.story-media {
  position: absolute; left: 0; right: 0;
  top: 92px;
  margin-inline: auto;
  height: 44.4vh; min-height: 300px; max-height: 500px;
  width: min(76vw, 704px);
}
#framedSlides { position: absolute; inset: 0; }
.story-image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  z-index: 0;
  opacity: 0;
  transform: translate3d(9.4%, -9.2%, 0) scale(1);
  transition: opacity .75s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.story-image.active { z-index: 3; opacity: 1; transform: translate3d(0,0,0) scale(1); }
.story-image.exiting { z-index: 2; opacity: 1; transform: translate3d(-8.25%, 9.2%, 0) scale(.93); }
.story-image.far-exiting { z-index: 1; opacity: .6; transform: translate3d(-7.4%, 18.2%, 0) scale(.88); }
#digitalSlide {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.22,1,.36,1);
}
#digitalSlide.visible { opacity: 1; transform: scale(1); }
#digitalSlide img { width: 100%; height: 100%; object-fit: contain; }
.image-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 58%, #fff 94%); }

#floatingClaims {
  pointer-events: none;
  position: absolute; left: 0; right: 0;
  top: 108px;
  margin-inline: auto;
  display: none;
  height: 50vh;
  max-width: 1050px;
  opacity: 0;
  transition: opacity .8s ease;
}
#floatingClaims.visible { opacity: 1; }
.claim { position: absolute; margin: 0; font-weight: 300; font-size: clamp(24px, 2.15vw, 34px); letter-spacing: -.02em; white-space: nowrap; }
.claim em { font-family: var(--serif); font-style: italic; font-size: 1.08em; }
.claim-top { top: 0; left: 50%; transform: translateX(-50%); }
.claim-left { left: 1%; top: 45%; }
.claim-right { right: 0; top: 60%; }

.story-copy-wrap {
  position: absolute; left: 0; right: 0;
  top: 58vh;
  margin-inline: auto;
  width: min(92vw, 1050px);
  text-align: center;
}
.story-copy {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  transition: opacity .65s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
#legacyCopy { font-size: clamp(25px, 2.5vw, 38px); line-height: 1.27; letter-spacing: .01em; }
#legacyCopy p { margin: 0; color: rgba(26,26,26,.38); transition: color .55s ease, transform .55s ease; }
#legacyCopy p.highlight { color: #1a1a1a; transform: translateY(-1px); }
#consumerCopy, #futureCopy {
  position: absolute; left: 0; right: 0;
  top: 0;
  opacity: 0;
  transform: translateY(20px);
}
#consumerCopy.is-visible, #futureCopy.is-visible { opacity: 1; transform: translateY(0); }
#consumerCopy { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.25; }
.story-copy__muted { color: rgba(0,0,0,.45); }
#futureCopy { top: -4vh; font-size: clamp(24px, 2.55vw, 38px); line-height: 1.28; }
#futureCopy p { margin: 0; }

/* reduced motion / no-JS: unpin and just show the first frame + all copy */
.story-track.rm-story--static { height: auto; min-height: 0; }
.rm-story--static .story-stage { position: static; height: auto; min-height: 0; padding: 60px 20px; }
.rm-story--static .story-media { position: relative; top: 0; height: auto; max-height: none; margin: 0 auto 32px; }
.rm-story--static .story-image { position: relative; opacity: 0; }
.rm-story--static .story-image.active { opacity: 1; transform: none; display: block; }
.rm-story--static #digitalSlide { display: none; }
.rm-story--static #floatingClaims { display: none; }
.rm-story--static .story-copy-wrap { position: relative; top: 0; }
.rm-story--static #legacyCopy p { color: #1a1a1a; }
.rm-story--static #consumerCopy, .rm-story--static #futureCopy { display: none; }
}
/* end DISABLED old INDIA'S STORY */

@media not all and (max-width: 767px) {
  .story-track { height: 560vh; }
  .story-stage { min-height: 560px; }
  .story-media { height: 44vh; min-height: 250px; }
  .story-copy-wrap { top: 56vh; }
  #futureCopy p { display: inline; }
  #futureCopy p::after { content: ' '; }
  .image-fade { background: linear-gradient(to bottom, transparent 48%, #fff 91%); }
}
@media not all and (min-width: 768px) {
  .story-media { top: 104px; }
  #floatingClaims { display: block; }
  .story-copy-wrap { top: 66vh; }
  #futureCopy { top: 0; }
}

/* ============================================================
   INDIA'S STORY — pinned horizontal scrubber (NEW)
   Same pattern as Elanzia's QUOTE/STORY: a tall .rm-story runway pins
   .rm-story-pin while scroll translates a 5-slide track sideways; a
   5-segment gold progress bar fills with scroll. Hand-built rAF scrub
   in rammudra.js — no library.
   ============================================================ */
.rm-story { position: relative; height: 500vh; background: #fff; }
.rm-story-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: #fff;
  /* centred vertical cluster (progress → image → caption), pushed clear of the
     fixed .navbar.scrolled (92px) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;
  padding-top: 92px;
}
.rm-story-progress { display: flex; align-items: flex-start; gap: 4px; z-index: 3; }
.rm-story-prog {
  position: relative;
  width: 80px;
  height: 8px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--neutral-200, #eeeef1);   /* light grey track */
}
/* light champagne-gold fill; width set per segment by rammudra.js each frame */
.rm-story-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, #e3d1a8 0%, #f0e6d1 100%);
  transition: width .12s linear;
}
/* horizontal track: 5 full-width slides; align-self:flex-start keeps its left
   edge at 0 so slide 1 shows first and the translateX math holds */
.rm-story-track {
  align-self: flex-start;
  display: flex;
  width: 500vw;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.rm-story-slide {
  flex: none;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  padding: 0 clamp(20px, 8vw, 120px);
  text-align: center;
}
.rm-story-slide img {
  width: min(760px, 62vw);
  height: auto;
  aspect-ratio: 760 / 366;
  object-fit: cover;
  border-radius: 8px;
}
/* the centred (active) slide reads at 42px, the rest at 36px */
.rm-story-caption {
  margin: 0;
  max-width: 900px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.24;
  letter-spacing: .01em;
  color: var(--neutral-900, #0D0F1A);
  transition: font-size .5s ease;
}
.rm-story-slide.is-active .rm-story-caption { font-size: 42px; }

/* reduced motion / no-JS: unpin and stack the slides vertically */
.rm-story--h-static { height: auto; }
.rm-story--h-static .rm-story-pin { position: static; height: auto; min-height: 0; padding: 80px 20px; }
.rm-story--h-static .rm-story-progress { display: none; }
.rm-story--h-static .rm-story-track { flex-direction: column; width: 100%; transform: none !important; gap: 72px; }
.rm-story--h-static .rm-story-slide { width: 100%; height: auto; }

@media (max-width: 767px) {
  .rm-story { height: 460vh; }
  .rm-story-pin { min-height: 500px; }
  .rm-story-progress { gap: 3px; }
  .rm-story-prog { width: 44px; }
  .rm-story-slide { gap: 28px; }
  .rm-story-slide img { width: 82vw; }
  .rm-story-caption { font-size: 24px; }
  .rm-story-slide.is-active .rm-story-caption { font-size: 27px; }
}

/* ============================================================
   3 · TWO WAYS TO OWN GOLD
   ============================================================ */
.rm-ways {
  position: relative;
  /* tall scroll runway (same idea as .rm-story's 380vh): the pinned toggle +
     card stage sits still while this scrolls past, giving rammudra.js room
     to scrub between the Digital Gold and Gold Coins states */
  height: 240vh;
  text-align: center;
  /* deliberately NOT overflow:hidden — that would make .rm-ways its own
     scrolling ancestor and confine .rm-ways__sticky's sticky positioning to
     its own box instead of the real viewport, unsticking it almost
     immediately. Horizontal bleed is already clipped by .rm's overflow-x: clip. */
  background: #c2ab7c;   /* matches the gradient's darkest stop, for the tail once the sticky card releases */
}
/* .wave-bottom (shared component, /assets/css/styles.css) is position:absolute relative
   to this 240vh runway by default, so while .rm-ways__sticky is pinned
   (position:fixed, frozen on screen) the wave keeps scrolling normally with
   the page underneath it — visibly creeping up and mixing into the still-
   visible cards the further the user scrolls, instead of staying put.
   rammudra.js mirrors the sticky's own pin state onto the wave as this
   .is-pinned class, so it parks at the actual viewport bottom for as long as
   the cards are pinned there too, in sync instead of drifting. Once the
   sticky itself releases (is-end), rammudra.js drops this class and the wave
   falls back to the shared rule's default absolute positioning — same as
   the sticky's own release — so the two scroll away together. */
.rm-ways .wave-bottom.is-pinned { position: fixed; bottom: 0; }
/* the head now lives inside the pinned sticky (so OUR OFFERINGS + the title
   stay with the toggle + cards, per Figma). The sticky's own padding-top clears
   the navbar, so no top padding here — just space it from the toggle below. */
.rm-ways__head { max-width: 335px; margin: 0 auto 24px; padding: 0 20px; text-align: center; position: relative; z-index: 2; }
.rm-ways .eyebrow { background: rgba(255,255,255,.5); color: #5c491f; }
.rm-ways__title {
  margin-top: 18px;
  font-size: 28px; line-height: 36px;
  color: var(--igm-gold-900);
}

/* pinned scroll-scrub stage. Background is painted directly on the pinned box
   (never on the tall 240vh runway itself, or `cover` would blow the photo
   up). Top padding clears the fixed navbar with a gap instead of sitting
   flush under it. rammudra.js swaps the active panel — and the toggle's
   selected tab — as scroll progress crosses the midpoint; scrolling back up
   reverses it, landing on Digital Gold again.
   Pinning is done with JS-toggled fixed/absolute rather than position:sticky
   — under a scroll-linked rAF loop like this one, Chromium can leave a
   stale "stuck" compositing layer painted over the sections below, bleeding
   the photo through .rm-trust/.rm-partner. Explicit fixed↔absolute swapping
   (see rammudra.js) doesn't have that failure mode. */
.rm-ways__sticky {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;
  /* dvh tracks the *visible* viewport as the mobile address bar shows/hides,
     so the pinned box always fills exactly the screen. With plain 100vh the
     box is taller than what's visible on phones, which threw off the JS pin
     release (sticky.offsetHeight) and let the next section bleed into the
     pinned card view on iPhone SE / Galaxy S8. vh above stays as the fallback. */
  height: 900px;
  z-index: 2;
  padding: 110px 20px 40px;
  background: #cbb488;   /* fallback while the data-active image loads */
  transition: background-image .2s linear;
}


/* the section artwork switches per active panel — same photo for both states
   for now (until a dedicated Gold Coins shot replaces it), each still wrapped
   in its own soft golden wash so the title/cards stay legible over it */
.rm-ways__sticky[data-active="digital"] {
  background:
    linear-gradient(180deg, rgba(238,227,206,.66) 0%, rgba(206,183,140,.6) 52%, rgba(150,131,96,.72) 100%),
    url("/assets/img/rammudra/ways-bg.webp") center 42% / cover no-repeat,
    #cbb488;
}
.rm-ways__sticky[data-active="coins"] {
  /* TODO: swap in the dedicated Gold Coins photo once it's provided */
  background:
    linear-gradient(180deg, rgba(238,227,206,.66) 0%, rgba(206,183,140,.6) 52%, rgba(150,131,96,.72) 100%),
    url("/assets/img/rammudra/goldCointogleIMG.svg") center 42% / cover no-repeat,
    #cbb488;
}
.rm-ways__sticky.is-pinned { position: fixed; top: 0; bottom: auto; }
.rm-ways__sticky.is-end { position: absolute; top: auto; bottom: 0; }
/* segmented toggle — glass pill per Figma (node "Frame 2147227275") */
.rm-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  padding: 13px 8px;
  background: rgba(255,255,255,.30);
  box-shadow: 0 0 19px rgba(0,0,0,.05);
  border-radius: 60px;
  border: 1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.rm-toggle button {
  appearance: none; border: 0; cursor: pointer;
  height: 54px;
  padding: 0 20px;
  border-radius: 60px;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px; font-weight: 500; line-height: 24px; letter-spacing: .04em;
  color: var(--igm-gold-900);
  transition: background .25s, color .25s, box-shadow .25s;
}
.rm-toggle button[aria-selected="true"] {
  min-width: 153px;
  background: #fff;
  color: var(--igm-gold-700);
}
/* the two states sit stacked in the same box and cross-dissolve; only one is
   ever interactive/visible at a time (Figma Smart Animate, ~500ms ease-out) */
.rm-ways__stage {
  position: relative;
  width: min(335px, 100%);
  margin: 22px auto 0;
}
.rm-ways__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .5s cubic-bezier(0,0,.58,1), transform .5s cubic-bezier(0,0,.58,1);
}
.rm-ways__panel.is-active {
  position: relative;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.rm-ways__lead {
  margin: 0 auto;
  max-width: 320px;
  text-align: center;
  font-size: 15px; font-weight: 500; line-height: 23px;
  color: var(--igm-gold-700);
}
.rm-ways__grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* reduced motion / no-JS: unpin and stack both states, one after the other */
.rm-ways.rm-ways--static { height: auto; padding-bottom: 50px; }
.rm-ways--static .rm-ways__sticky { position: static; }
.rm-ways--static .rm-ways__stage { display: flex; flex-direction: column; gap: 40px; }
.rm-ways--static .rm-ways__panel {
  position: relative; inset: auto;
  opacity: 1; transform: none; pointer-events: auto;
}
/* frosted-glass cards per Figma: barely-there dark tint + heavy blur, so the
   pinned photo behind keeps showing through, not solid opaque tiles */
.rm-feature {
  background: rgba(77.52, 77.52, 77.52, .06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  padding: 32px 16px;
  -webkit-backdrop-filter: blur(13.5px); backdrop-filter: blur(13.5px);
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  min-height: 148px; justify-content: center;
  /* keep every card the same size: grid items default to min-width:auto, so a
     long label ("denominations") stretches its column wider than the others —
     min-width:0 lets all tracks stay equal and the label wrap instead */
  min-width: 0;
}
.rm-feature__icon { width: auto; height: 72px; max-width: 76px; object-fit: contain; }
.rm-feature span {
  font-size: 20px; line-height: 28px; font-weight: 400;
  /* color: var(--igm-gold-700); */
  color:#473100;
}

/* phones: the head now shows inside the pinned sticky (OUR OFFERINGS + title),
   so compact the stack — smaller top padding, icon, card padding and type — so
   the head + toggle + 2×2 grid all fit the pinned viewport without the bottom
   cards being clipped. Placed AFTER the base .rm-ways rules above so it wins on
   source order (the base block sits lower in the file than the story @media). */
@media (max-width: 767px) {
  .rm-ways__sticky { padding-top: 86px; }
  .rm-ways__head { margin-bottom: 14px; }
  .rm-ways__title { font-size: 24px; line-height: 30px; }
  .rm-ways__stage { margin-top: 16px; }
  .rm-ways__lead { font-size: 14px; line-height: 20px; max-width: 300px; }
  .rm-ways__grid { margin-top: 16px; gap: 14px; }
  .rm-feature { padding: 18px 12px; gap: 14px; min-height: 112px; }
  .rm-feature__icon { height: 52px; }
  .rm-feature span { font-size: 16px; line-height: 22px; }
}

/* ============================================================
   4 · BUILT ON TRUST
   ============================================================ */
.rm-trust {
  background: #fff;
  padding: 70px 20px 20px;
  text-align: center;
}
.rm-trust__title {
  font-size: 28px; line-height: 36px;
  color: var(--n-900);
  margin-bottom: 40px;
}
.rm-trust__grid {
  max-width: 320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.rm-trust__item { display: flex; flex-direction: column; align-items: center; }
.rm-trust__item img { width: 100px; height: 100px; object-fit: contain; }
.rm-trust__item h3 {
  margin-top: 12px;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 24px; line-height: 30px;
  color: var(--n-900);
}
.rm-trust__item p {
  margin-top: 12px;
  font-size: 15px; line-height: 22px;
  color: var(--n-500);
}

/* ============================================================
   5 · PARTNER WITH RAMMUDRA
   ============================================================ */
.rm-partner {
  background: #fff;
  padding: 70px 20px 40px;
  text-align: center;
}
.rm-partner__title {
  margin-top: 18px;
  font-size: 28px; line-height: 36px;
}
.rm-partner__title .gold-word { display: inline; }
.rm-partner__grid {
  margin-top: 40px;
  display: grid;
  gap: 32px;
  max-width: 335px; margin-inline: auto;
}
.rm-pcard {
  position: relative;
  border-radius: 6px;
  background: var(--n-50);
  border: .8px solid var(--n-200);
  padding: 40px 24px 32px;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 24px;
}
/* soft blurred halo (baked into the SVG itself) grounding the product shot,
   peeking out from behind the card's bottom edge */
.rm-pcard__glow {
  position: absolute;
  left: 50%; bottom: -20%;
  transform: translateX(-50%);
  width: 165%;
  max-width: 520px;
  aspect-ratio: 435 / 400;
  background: url("/assets/img/rammudra/pcard-glow.svg") center / contain no-repeat;
  pointer-events: none;
  z-index: 0;
}
.rm-pcard__top, .rm-pcard__bottom {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rm-pcard__top { gap: 4px; }
.rm-pcard__bottom { gap: 20px; }
.rm-pcard__ghost {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 9vw, 48px);
  line-height: 1;
  color: var(--n-300);
  text-align: center;
}
/* fixed height (not max-width) so the square phone shot and the wide coin
   shot occupy the same footprint under their heading — otherwise the coin's
   wider aspect ratio renders much shorter than the phone, leaving a big gap
   before the description on that card */
.rm-pcard__img {
  width: auto;
  max-width: 100%;
  height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.2));
}
.rm-pcard__desc {
  margin: 0;
  font-size: 14px; line-height: 20px;
  color: var(--n-600);
  text-align: center;
}
.rm-tags {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
}
.rm-tags span {
  height: 24px;
  padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 32px;
  background: var(--n-50);
  color: rgba(146,85,0);
  font-size: 12px; line-height: 16px; font-weight: 400;
}
.rm-pcard .btn-share { border-radius: 4px; text-transform: uppercase; letter-spacing: .02em; }

/* ============================================================
   6 · VOICES — 3-column masonry (desktop node 2296:3359)
   ============================================================ */
.rm-voices {
  background: #fff;
  padding: 60px 20px 80px;
  text-align: center;
}
.rm-voices__masonry {
  margin: 34px auto 0;
  max-width: 335px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
.rm-vcol { display: flex; flex-direction: column; gap: 24px; }

.rm-vcard {
  text-align: left;
  background: #f4f4f6;
  border-radius: 16px;
  overflow: hidden;
}
.rm-vcard__photo { position: relative; margin: 0; }
.rm-vcard__photo img {
  display: block; width: 100%;
  aspect-ratio: 317 / 300;
  object-fit: cover;
}
.rm-vcard--tall .rm-vcard__photo img { aspect-ratio: 322 / 386; }
/* frosted name plate over the photo (Figma: white 82%, blur, right-rounded) */
.rm-vcard__name {
  position: absolute; left: 0; bottom: 18px;
  padding: 10px 20px;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 0 8px 8px 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.rm-vcard__name strong { display: block; font-size: 15px; font-weight: 600; color: var(--n-900); }
.rm-vcard__name span   { font-size: 13px; color: var(--n-600); }
.rm-vcard__body { padding: 18px 20px 22px; }
.rm-vcard__tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--warning-100);
  color: var(--igm-gold-800);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
}
.rm-vcard__quote {
  margin-top: 14px;
  font-size: 14px; line-height: 22px;
  color: var(--n-600);
}
/* reverse card: quote on top, photo below (Preeta) */
.rm-vcard--reverse { display: flex; flex-direction: column; }
.rm-vcard--reverse .rm-vcard__body { order: 1; }
.rm-vcard--reverse .rm-vcard__photo { order: 2; }
/* quote-only card */
.rm-vcard--quote { background: #f4f4f6; }
.rm-vcard--quote .rm-vcard__body { padding: 26px 22px; }

/* ============================================================
   7 · CTA — build the future of gold together
   ============================================================ */
.rm-cta {
  position: relative;
  padding: 124px 20px;
  text-align: center;
  overflow: hidden;
  /* Figma: the sparkle image sits at 20% opacity over a solid white fill —
     reproduced as an 80%-white wash over the full-strength image */
  background:
    linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8)),
    url("/assets/img/rammudra/beforeFAQBG.webp") center / cover no-repeat,
    #fff;
}
.rm-cta__inner { max-width: 335px; margin: 0 auto; }
.rm-cta__kicker { font-size: 15px; color: var(--n-600); }
.rm-cta__title {
  margin-top: 6px;
  font-size: 28px; line-height: 36px;
  color: var(--n-900);
}
.rm-cta__coins {
  width: 360px; height: auto;
  margin: 8px auto 0;
  filter: drop-shadow(0 10px 18px rgba(120,90,30,.28));
}
.rm-cta__desc {
  margin-top: 16px;
  font-size: 15px; line-height: 22px;
  color: var(--n-600);
}
.rm-cta .btn { margin-top: 30px; }

/* ============================================================
   8 · FAQ (dark) — footer follows via footer.html
   ============================================================ */
.rm-faq {
  position: relative;
  background: #050507;
  padding: 70px 20px 40px;
  overflow: hidden;
}
.rm-faq__inner { position: relative; z-index: 3; max-width: 343px; margin: 0 auto; text-align: center; }
.rm-faq .eyebrow { background: transparent; border: 1px solid #26262e; color: #fff; }
.rm-faq__title {
  margin: 24px 0 8px;
  font-size: 24px; line-height: 31px;
  color: #fff;
}
.rm-faq__list { margin-top: 22px; text-align: left; }
.rm-faq details {
  border-bottom: 1px solid #1c1c22;
}
.rm-faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0;
  color: #fff;
  font-family: var(--serif); font-weight: 400;
  font-size: 22px; line-height: 27px;
}
.rm-faq summary::-webkit-details-marker { display: none; }
.rm-faq summary::after {           /* pure-CSS chevron — no icon font */
  content: "";
  flex: none;
  width: 9px; height: 9px;
  margin-top: -4px;
  border-right: 2px solid #9a9aa4;
  border-bottom: 2px solid #9a9aa4;
  transform: rotate(45deg);
  transition: transform .25s;
}
.rm-faq details[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.rm-faq details p {
  color: #b9b9c2;
  font-family: var(--sans);
  font-size: 14px; line-height: 22px;
  padding: 0 0 22px;
}

/* ============================================================
   RESPONSIVE — expand the single mobile column into grids
   ============================================================ */
@media (min-width: 768px) {
  .rm-wrap,
  .rm-hero__inner, .rm-ways__head,
  .rm-faq__inner { max-width: 720px; }

  .rm-hero__inner { max-width: 680px; }
  .rm-hero__title, .rm-hero__sub { max-width: 620px; }
  /* Figma hero: Instrument Serif Italic 48 / leading 78 / tracking 0.96px */
  .rm-hero__title { font-size: 48px; line-height: 56px; letter-spacing: .96px; }
  .rm-hero__logo { width: 300px; }
  .rm-hero__cta { flex-direction: row; justify-content: center; width: auto; }
  .rm-hero__cta .btn { width: auto; }

  .rm-head .serif-h,
  .rm-ways__title, .rm-trust__title, .rm-partner__title,
  .rm-cta__title { font-size: 40px; line-height: 48px; }

  /* CTA: text column on the left, coins on the right — grid-template-areas
     so the coins (mid-DOM, between title and desc) can span the full
     column height without reordering the markup */
  .rm-cta__inner {
    max-width: 928px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "kicker coins"
      "title  coins"
      "desc   coins"
      "cta    coins";
    align-items: center;
    column-gap: 48px;
    text-align: left;
  }
  .rm-cta__kicker { grid-area: kicker; }
  .rm-cta__title { grid-area: title; }
  .rm-cta__coins { grid-area: coins; width: 360px; margin: 0; }
  .rm-cta__desc { grid-area: desc; max-width: 440px; }
  .rm-cta .btn { grid-area: cta; width: max-content; }

  /* desktop only: centre the pinned toggle + cards vertically so the coins
     photo frames them (Figma) instead of leaving a large empty background gap
     below the top-aligned cards. Mobile keeps its top-aligned layout.
     Values below are the exact desktop Figma spec (1440 frame, "Frame
     2147227275") rather than fitted-to-viewport approximations — the
     vertical rhythm (34px badge→title, 54px title→toggle, 32px between
     toggle/lead/cards) and the 1314px-wide card row all come straight from
     it. On a laptop window too short for this fixed sizing to fit,
     rammudra.js's too-tall check (measured once at load) falls back to the
     plain stacked layout instead of shrinking these numbers — this section
     no longer improvises its own compacted sizing. */
  .rm-ways__head { max-width: 760px; margin-bottom: 54px; }
  .rm-ways__sticky {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding-top: 110px;
    /* 120px, not the Figma-spec 40px: .wave-bottom renders ~100-110px tall
       (its 1440x108 source scaled to this section's full-bleed width) and
       now sits pinned flush against the viewport bottom the whole time this
       is pinned (see the .wave-bottom.is-pinned fix above/in rammudra.js) —
       at the spec's 40px the wave's top edge cut into the bottom of the
       card row itself. This clears it with a little room to spare. */
    padding-bottom: 120px;
    /* cap at the Figma frame's own 890px height instead of always filling
       100dvh: on a monitor taller than that, an uncapped box (a) forces
       background-size:cover to zoom/crop the data-active photo so hard to
       reach the extra height that it lands on a blank patch of the source
       image instead of the coins/phone art, and (b) leaves fixed-size
       content centred in far more empty space than the design was ever
       composed for. min() still lets it shrink to 100dvh on anything
       shorter than 890px, same as before. */
    height: min(100dvh, 890px);
  }
  .rm-ways__title {
    margin-top: 34px;
    font-size: 44px; line-height: 56px; letter-spacing: .44px;
    color: var(--igm-gold-700);
  }
  .rm-ways__stage { width: min(1314px, 100%); margin-top: 32px; }
  .rm-ways__lead { max-width: 576px; line-height: 23px; }
  .rm-ways__grid {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 32px;
    gap: 30px;
  }
  .rm-feature { padding: 20px 16px; gap: 20px; }
  .rm-feature__icon { height: 72px; }
  .rm-feature span { font-size: 20px; line-height: 28px; }
}
@media (min-width: 768px) {
  .rm-trust__grid {
    max-width: var(--rm-max);
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
  }
  .rm-trust__item { flex: 1; }

  .rm-partner__grid { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
  .rm-pcard { padding: 48px 32px 40px; }
  .rm-pcard__ghost { font-size: 60px; }
  .rm-pcard__img { height: 220px; }

  /* keep the 3-column masonry intact from tablet up (explicit columns) */
  .rm-voices__masonry { grid-template-columns: repeat(3, 1fr); max-width: 720px; gap: 16px; }
  .rm-vcol { gap: 16px; }

  .rm-faq__inner { max-width: 760px; }
  .rm-faq__title { font-size: 34px; line-height: 42px; }
}

@media (min-width: 1000px) {
  .rm-voices__masonry { max-width: 1040px; gap: 28px; }
  .rm-vcol { gap: 28px; }
}

@media (min-width: 1100px) {
  .rm-trust__grid { max-width: var(--rm-max); }
  .rm-partner__grid { max-width: 960px; }
}

/* ============================================================
   PARTNER WITH US — popup + sticky launcher
   Reuses partner.css's .pform-success modal shell + .field styling; the same
   overrides GoldSense's .gs-demo / .gs-fab use, ported here under an rm- prefix
   so no goldsense.css is needed and nothing clashes with this page's classes.
   Behaviour is wired in rammudra.js.
   ============================================================ */
.rm-demo-card { max-width: 560px; align-items: stretch; text-align: left; gap: 28px; max-height: 90vh; overflow-y: auto; }
.rm-demo-form { display: flex; flex-direction: column; gap: 28px; }

/* Sticky launcher — a champagne chat-bubble FAB pinned bottom-right. Sits above
   the page but below the modal (.pform-success is z 200+); the soft halo
   breathes to draw the eye. */
.rm-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 190;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border: none; border-radius: 999px; cursor: pointer;
  font: 600 15px/1 inherit; color: #1a1408; white-space: nowrap;
  background: var(--gold-grad, linear-gradient(100deg, #b9903f 0%, #e8cf8f 45%, #b9903f 100%));
  box-shadow: 0 10px 28px rgba(20, 16, 8, .28), 0 0 0 6px rgba(185, 144, 63, .16);
  transition: transform .35s var(--spring, cubic-bezier(.2,.9,.3,1.3)), box-shadow .35s ease;
  animation: rm-fab-pulse 2.6s ease-in-out infinite;
}
.rm-fab:hover { transform: translateY(-3px) scale(1.04); }
.rm-fab__icon { font-size: 18px; }

@keyframes rm-fab-pulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(20,16,8,.28), 0 0 0 6px rgba(185,144,63,.16); }
  50%      { box-shadow: 0 10px 28px rgba(20,16,8,.28), 0 0 0 12px rgba(185,144,63,0); }
}
@media (prefers-reduced-motion: reduce) { .rm-fab { animation: none; } }

/* tuck the FAB into the corner as an icon-only bubble on phones */
@media (max-width: 767px) {
  .rm-fab { right: 16px; bottom: 16px; padding: 15px; }
  .rm-fab__label { display: none; }
  .rm-fab__icon { font-size: 20px; }
}