/* Rhythm: one vertical spacing system, one container edge, one section heading size, and a quiet
   scroll reveal. Linked last, so it overrides the per-section stylesheets without editing them.

   Gaps are measured content to content: the bottom of one section's last visible thing to the top of
   the next section's heading (or panel). Sections carry no padding of their own; the gap is a margin. */
:root{
  --section-gap:144px;  /* between sections */
  --head-gap:48px;      /* heading block to its content (panel, grid, step list) */
  --tight-gap:56px;     /* closely related blocks: closing panel to footer */
  --h2-size:58px;
  --panel-pad-y:64px;
  --panel-pad-x:64px;
  --rh-ease:cubic-bezier(.22,.61,.36,1);
}
@media(max-width:1180px){:root{--section-gap:120px;--head-gap:44px;--h2-size:52px;--panel-pad-y:56px;--panel-pad-x:48px}}
@media(max-width:900px){:root{--section-gap:96px;--head-gap:40px;--tight-gap:48px;--h2-size:46px;--panel-pad-x:40px}}
@media(max-width:680px){:root{--section-gap:72px;--head-gap:32px;--tight-gap:40px;--h2-size:40px;--panel-pad-y:36px;--panel-pad-x:28px}}

/* ---------- One container: every section shares the .shell width and left edge ---------- */
.market-ribbon{width:calc(100% - 96px)}
@media(max-width:1180px){.market-ribbon{width:calc(100% - 64px)}}
@media(max-width:680px){.market-ribbon{width:calc(100% - 40px)}}
@media(max-width:380px){.market-ribbon{width:calc(100% - 32px)}}
/* FAQ was inset 64px (15px, 3px on smaller screens) from the container; put it on the edge. */
.faq{padding-inline:0}
.footer{padding-inline:0}

/* ---------- Vertical rhythm: sections carry no padding, the gap is one margin ---------- */
.market-ribbon,
.market-ribbon+.vp-section,.vp-section,
#how-it-works.vision,
#trade.live-trading,
.faq,
.closing{margin-top:var(--section-gap)}
.market-ribbon+.vp-section,.vp-section,#how-it-works.vision,.faq{padding-top:0;padding-bottom:0}
.footer{padding-top:var(--tight-gap)}

/* Heading block to content: the same step everywhere. */
.mr-heading{padding-bottom:var(--head-gap)}
.vp-heading{margin-bottom:var(--head-gap)}
.hiw-layout{margin-top:var(--head-gap)}
/* Heading to its supporting line. How-it-works keeps Munam's own spacing (credit line, then copy). */
.mr-heading p{margin-top:16px}

/* ---------- One section heading size ---------- */
.mr-heading h2,.vp-heading h2,#how-it-works .section-heading h2,.live-copy h2,.faq h2,.closing h2{
  font-size:var(--h2-size);font-weight:500;letter-spacing:-.045em;line-height:1.05}
@media(max-width:680px){
  .mr-heading h2,.vp-heading h2,#how-it-works .section-heading h2,.live-copy h2,.faq h2,.closing h2{letter-spacing:-.04em;line-height:1.06}
}
/* On phones, how-it-works keeps Munam's own clamp so "Portfolio management." fits one line. */
@media(max-width:680px){#how-it-works .section-heading h2{font-size:clamp(34px,7.5vw,46px);letter-spacing:-1.6px}}

/* ---------- Panels: same inner padding on the lime trade panel and the violet closing panel ---------- */
#trade.live-trading,.closing{padding:var(--panel-pad-y) var(--panel-pad-x)}
@media(max-width:680px){
  #trade.live-trading{padding-bottom:40px}
  .closing{padding-bottom:150px}
}

/* ---------- Hero wash: an eased falloff that ends exactly where the ribbon heading begins ---------- */
.hero:before,.hero:after{bottom:calc(-1 * var(--section-gap));
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 48%,rgba(0,0,0,.8) 60%,rgba(0,0,0,.55) 71%,rgba(0,0,0,.32) 80%,rgba(0,0,0,.15) 88%,rgba(0,0,0,.05) 95%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 48%,rgba(0,0,0,.8) 60%,rgba(0,0,0,.55) 71%,rgba(0,0,0,.32) 80%,rgba(0,0,0,.15) 88%,rgba(0,0,0,.05) 95%,transparent 100%)}

/* ---------- Scroll reveal (rhythm.js) ----------
   Content is visible by default. Only once rhythm.js has tagged the targets and started observing
   does html get .rh-ready, and only then are untouched targets hidden. */
.rh-ready [data-rh]{transition:opacity .6s var(--rh-ease),translate .6s var(--rh-ease),scale .7s var(--rh-ease);transition-delay:var(--rh-d,0ms)}
.rh-ready [data-rh]:not(.rh-in){opacity:0;translate:0 20px}
.rh-ready [data-rh=panel]:not(.rh-in){opacity:0;translate:none;scale:.98}

/* The value grid keeps its own reveal (value-grid.js); just bring its rise and ease in line. */
.vp-motion .vp-heading>*,.vp-motion .vp-card{transition:opacity .6s var(--rh-ease) var(--vp-delay,0ms),translate .6s var(--rh-ease) var(--vp-delay,0ms)}
.vp-motion .vp-heading:not(.is-in)>*,.vp-motion .vp-card:not(.is-in){translate:0 20px}

@media(prefers-reduced-motion:reduce){
  .rh-ready [data-rh],.rh-ready [data-rh]:not(.rh-in){opacity:1;translate:none;scale:none;transition:none}
}

/* ---------- Mobile header: "Open app" sits just left of the hamburger ----------
   buttons.css resets the button's margin-left to 0, so space-between left it floating mid-header.
   Push it right and make the header gap the 12px between button and toggle. */
@media(max-width:680px){
  .header{gap:12px}
  .header .button{margin-left:auto;margin-right:0}
}

/* ---------- Hero prompt: plain display text above the one button ----------
   "Bullish on ___?" is a line of type, not a second pill. The whole line is centred and the word
   wrapper eases its width (rhythm.js sets it per word), so the line re-centres instead of jumping. */
.hero-floating-actions{gap:16px}
.hero-art .market-prompt{display:flex;justify-content:center;max-width:100%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;color:var(--ink);font-size:30px;font-weight:500;line-height:1.2;letter-spacing:-.9px;text-align:center}
.hero-art .market-prompt .market-headline{justify-content:center}
.hero-art .market-prompt .market-word-wrap{min-width:0;width:auto;transition:width 320ms cubic-bezier(.65,0,.35,1)}
@media(max-width:1180px){.hero-art .market-prompt{font-size:28px}}
@media(min-width:681px) and (max-width:900px){.hero-floating-actions{gap:14px}.hero-art .market-prompt{font-size:26px;letter-spacing:-.7px}}
@media(max-width:680px){.hero-floating-actions{gap:16px}.hero-art .market-prompt{font-size:clamp(26px,7.2vw,30px)}}
@media(prefers-reduced-motion:reduce){.hero-art .market-prompt .market-word-wrap{transition:none}}


/* hero pause toggle removed */
.hero-art .animation-toggle{display:none!important}