/* ═══════════════════════════════════════════════════════════════════════════
   THE FOUR PILLARS — the scroll film under the hero
   ═══════════════════════════════════════════════════════════════════════════

   The hero says "Your loan. The whole picture." Nothing on the page then
   explained what the whole picture IS, or why a loan site talks about
   investments, cards and emergency funds at all. This section is that
   explanation, told as a ten-second piece of scroll rather than a paragraph.

   The device: a shaft of four slabs receding into depth. The reader does not
   scroll past them — the camera flies down the shaft and each slab arrives at
   the lens in turn. That ordering IS the argument: an emergency fund, then
   investments, then the card, then the loan. Money has a sequence and most
   people meet it backwards.

   Two deliberate decisions worth stating:

   1. The stage commits to one visual world — a dark green theatre — in both
      light and dark mode. It paints its own ground and sets every colour
      against that ground, so it is readable either way. The site around it is
      cream; the cut to black is the point at which the page stops being a
      brochure and starts being a film. .story-bill already uses this exact
      #082C24, so it is the brand's own dark, not a new one.

   2. The 3D is real CSS perspective, not a parallax fake, but no readable text
      ever sits inside it. Type in perspective goes soft; the copy stays flat
      in its own column and the shaft carries only large figures and shapes.
   ═══════════════════════════════════════════════════════════════════════════ */

#marketing-view .mo-film{
  --mf-ground:#082C24;
  --mf-ground-2:#0b3a2c;
  --mf-ink:#F3FBF6;
  --mf-muted:#9FC2B1;
  --mf-mint:#9EE6BF;
  --mf-green:#1FA463;
  --mf-line:#9ee6bf26;
  --mf-warn:#E8B04B;
  /* ── Cost red ─────────────────────────────────────────────────────────
     Two values, one identity, chosen by JOB rather than by taste:

       --mf-cost      text. WCAG wants 4.5:1 for a word, so this is the
                      lightened red, 5.4:1 on the film ground.
       --mf-cost-bar  bars. A graphic only needs 3:1, which buys a much
                      deeper, truer red — far closer to the struck-through
                      549 on the pricing card than the old coral was, and
                      still 3.5:1 where the figures actually sit.

     Both point at the site-wide tokens in polish.css so the film cannot
     drift from the rest of the site; the literals are only the fallback
     for a page that loads this file without polish.css. */
  --mf-cost:var(--cost-red-on-dark, #F0776B);
  --mf-cost-bar:var(--cost-red-bar-on-dark, #E54B3E);

  position:relative;
  background:var(--mf-ground);
  color:var(--mf-ink);
  /* clip, not hidden: clips the shaft without creating a scroll container,
     which would kill the sticky stage inside. */
  overflow:clip;
  isolation:isolate;
}

/* scroll-stories.js tags every earlier section with a one-off arrival
   animation. On a section whose child is position:sticky that animation
   shifts the pinned stage for its first 0.85s. Opt out. */
#marketing-view .mo-film.motion-arrived{animation:none;}

/* A single soft pool of light behind the shaft, so the slabs look lit rather
   than pasted. Pure decoration, costs one gradient. */
#marketing-view .mo-film::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 70% at 72% 38%, #1fa46326 0%, #1fa46300 60%),
    radial-gradient(90% 60% at 10% 100%, #9ee6bf12 0%, #9ee6bf00 70%);
}

/* ── The pinned theatre ──────────────────────────────────────────────────── */

#marketing-view .mo-film__theatre{
  position:relative;z-index:1;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:18px;
  box-sizing:border-box;
  padding-block:40px 26px;
}

#marketing-view .mo-film__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
#marketing-view .mo-film__head .mn-refresh-eyebrow{color:var(--mf-mint);margin:0;}
#marketing-view .mo-film__head h2{
  font:400 clamp(30px,3.4vw,46px)/1.05 Georgia,'Times New Roman',serif;
  letter-spacing:-1.6px;margin:10px 0 0;color:var(--mf-ink);
  text-wrap:balance;
}
#marketing-view .mo-film__head h2 em{font-style:normal;color:var(--mf-mint);}
#marketing-view .mo-film__thesis{
  font-size:13px;line-height:1.65;color:var(--mf-muted);margin:0;max-width:30ch;
}

/* ── Stage: copy on the left, shaft on the right ─────────────────────────── */

#marketing-view .mo-film__stage{
  display:grid;
  grid-template-columns:minmax(0,46%) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);
  align-items:center;
  min-height:0;
}

/* The four copy blocks occupy one cell and cross-fade. Grid-stacking rather
   than absolute positioning keeps the cell as tall as its tallest chapter, so
   nothing below it moves as the text swaps. */
#marketing-view .mo-film__script{display:grid;min-width:0;}
#marketing-view .mf-chapter{
  grid-area:1/1;
  min-width:0;
  opacity:var(--mf-text,0);
  transform:translateY(calc((1 - var(--mf-text,0)) * 14px));
  pointer-events:none;
}
#marketing-view .mf-chapter[data-live="1"]{pointer-events:auto;}

#marketing-view .mf-chapter__tag{
  display:flex;align-items:center;gap:10px;
  font:700 10px/1 var(--font-sans),sans-serif;letter-spacing:2px;
  color:var(--mf-mint);margin:0 0 18px;
}
#marketing-view .mf-chapter__tag b{
  font-variant-numeric:tabular-nums;color:var(--mf-muted);font-weight:700;
}
#marketing-view .mf-chapter__tag i{
  flex:1;height:1px;background:var(--mf-line);max-width:60px;
}
#marketing-view .mf-chapter h3{
  font:400 clamp(26px,3vw,40px)/1.12 Georgia,'Times New Roman',serif;
  letter-spacing:-1.4px;margin:0 0 16px;color:var(--mf-ink);
  text-wrap:balance;
}
#marketing-view .mf-chapter p{
  font-size:15px;line-height:1.7;color:var(--mf-muted);margin:0;max-width:44ch;
}
#marketing-view .mf-chapter p strong{color:var(--mf-ink);font-weight:600;}
#marketing-view .mf-chapter p .mf-cost{color:var(--mf-cost);font-weight:600;}
#marketing-view .mf-chapter__note{
  font-size:11px!important;line-height:1.6;color:#7fa893!important;margin-top:16px!important;
}

/* ── The shaft ───────────────────────────────────────────────────────────── */

#marketing-view .mf-world{
  perspective:1150px;
  perspective-origin:50% 44%;
  min-width:0;
  display:grid;
  place-items:center;
}
#marketing-view .mf-shaft{
  transform-style:preserve-3d;
  width:min(420px,100%);
  height:clamp(230px,34vh,320px);
  position:relative;
}

#marketing-view .mf-slab{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  /* --u is this slab's signed distance from the lens: -1 is one chapter
     behind, 0 is at the lens, +1 has flown past. JS writes it. */
  --u:1;
  transform:
    translate3d(0, calc(var(--u) * 78px), calc(var(--u) * 640px))
    rotateX(calc(var(--u) * 7deg))
    rotateY(calc(var(--u) * -4deg));
  opacity:var(--mf-slab-o,0);
  will-change:transform,opacity;
}

#marketing-view .mf-slab__face{
  position:absolute;inset:0;
  box-sizing:border-box;
  border:1px solid #9ee6bf4d;
  border-radius:20px;
  background:
    linear-gradient(152deg,#0f4b37 0%, #0a3528 58%, #092e24 100%);
  box-shadow:
    0 40px 90px -30px #000000a6,
    inset 0 1px 0 #9ee6bf2e;
  padding:24px 26px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:14px;
  overflow:hidden;
}
/* The edge-light: a hairline that brightens only as the slab reaches the
   lens, which is what sells the depth. */
#marketing-view .mf-slab__face::after{
  content:"";position:absolute;inset:-1px;border-radius:20px;pointer-events:none;
  border:1px solid var(--mf-mint);
  opacity:calc(var(--mf-in,0) * 0.55);
}

/* The slab's own shadow plane, lying flat beneath it. This is the one element
   that makes the stack read as objects in a space rather than stacked cards. */
#marketing-view .mf-slab__floor{
  position:absolute;left:8%;right:8%;bottom:-54px;height:120px;
  transform:rotateX(78deg);transform-origin:50% 0;
  background:radial-gradient(60% 50% at 50% 0%, #0000008c 0%, #00000000 72%);
  pointer-events:none;
}

#marketing-view .mf-slab__top{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font:700 9px/1 var(--font-sans),sans-serif;letter-spacing:1.6px;color:var(--mf-mint);
}
#marketing-view .mf-slab__top span:last-child{
  font-weight:400;letter-spacing:.4px;color:#86ad99;font-size:10px;
}
#marketing-view .mf-slab__fig{
  min-height:0;display:flex;align-items:center;
}
#marketing-view .mf-slab__fig svg{width:100%;height:auto;max-height:100%;display:block;}
#marketing-view .mf-slab__read{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
}
#marketing-view .mf-slab__read strong{
  font:400 clamp(28px,3.6vw,42px)/1 Georgia,'Times New Roman',serif;
  letter-spacing:-1.5px;color:var(--mf-ink);font-variant-numeric:tabular-nums;
}
#marketing-view .mf-slab__read small{
  font-size:10px;line-height:1.5;color:#86ad99;text-align:right;max-width:17ch;
}

/* ── The four figures ────────────────────────────────────────────────────── */

/* Shared drawing language: mint for what is yours, deep green for structure,
   amber for a choice, coral for cost. Nothing else. */
#marketing-view .mf-fig-track{fill:#9ee6bf1f;}
#marketing-view .mf-fig-line{stroke:#9ee6bf33;stroke-width:1;fill:none;}
/* Row labels inside a figure. Without them a ledger of three bars and a
   ladder of four are just coloured rectangles. 6.5px in the SVG scales with
   the drawing, so it lands around 11px on a desktop slab. */
#marketing-view .mf-fig-label{
  fill:#A6CDB8;font-family:var(--font-sans),sans-serif;font-size:6.5px;
  font-weight:700;letter-spacing:.35px;
}

/* 01 — the floor: six plates, one per month of cover, laid left to right. */
#marketing-view .mf-plate{
  fill:var(--mf-mint);
  opacity:calc(0.16 + var(--on,0) * 0.84);
  transform:translateY(calc((1 - var(--on,0)) * 7px));
  transform-origin:center;
}

/* 02 — the ledger: what you hold, what you owe, what is actually yours.
   Three bars on one scale, so the third is visibly the first minus the
   second rather than a number you are asked to take on trust. */
#marketing-view .mf-ledger--asset{fill:var(--mf-mint);}
#marketing-view .mf-ledger--debt{fill:var(--mf-cost-bar);}
#marketing-view .mf-ledger--net{fill:var(--mf-green);}

/* 03 — the rate ladder: the same rupee, priced four ways. The bars warm as
   they lengthen, so cost reads before any number is parsed. */
#marketing-view .mf-rate--1{fill:var(--mf-mint);}
#marketing-view .mf-rate--2{fill:#4FBF86;}
#marketing-view .mf-rate--3{fill:var(--mf-warn);}
#marketing-view .mf-rate--4{fill:var(--mf-cost-bar);}


/* 04 — the lever: your money, and the interest riding on top of it. */
#marketing-view .mf-bar-p{fill:var(--mf-green);}
#marketing-view .mf-bar-i{fill:var(--mf-cost-bar);}
#marketing-view .mf-bar-ghost{fill:#9ee6bf1a;}

/* ── The film rail ───────────────────────────────────────────────────────── */

#marketing-view .mf-rail{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:start;
}
#marketing-view .mf-rail button{
  appearance:none;background:none;border:0;padding:12px 0 0;margin:0;
  text-align:left;cursor:pointer;color:var(--mf-muted);
  font:700 10px/1.4 var(--font-sans),sans-serif;letter-spacing:1.4px;
  border-top:2px solid #9ee6bf24;
  position:relative;min-height:44px;
}
#marketing-view .mf-rail button::before{
  content:"";position:absolute;left:0;top:-2px;height:2px;width:100%;
  background:var(--mf-mint);transform:scaleX(var(--tick,0));transform-origin:left;
}
#marketing-view .mf-rail button[aria-current="true"]{color:var(--mf-ink);}
#marketing-view .mf-rail button:focus-visible{outline:3px solid var(--mf-mint);outline-offset:4px;}
#marketing-view .mf-rail b{display:block;font-weight:700;}
#marketing-view .mf-rail span{
  display:block;font-weight:400;letter-spacing:.2px;font-size:11px;
  color:#7fa893;margin-top:4px;
}

/* ── The closing statement, after the pin releases ───────────────────────── */

#marketing-view .mo-film__close{
  position:relative;z-index:1;
  border-top:1px solid var(--mf-line);
  padding-block:clamp(48px,7vw,86px) clamp(52px,7vw,90px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:clamp(22px,4vw,56px);align-items:end;
}
#marketing-view .mo-film__close h3{
  font:400 clamp(28px,3.6vw,48px)/1.1 Georgia,'Times New Roman',serif;
  letter-spacing:-1.8px;margin:0 0 16px;color:var(--mf-ink);text-wrap:balance;
}
#marketing-view .mo-film__close h3 em{font-style:normal;color:var(--mf-mint);}
#marketing-view .mo-film__close p{
  font-size:15px;line-height:1.7;color:var(--mf-muted);margin:0;max-width:52ch;
}
/* The creed is the four pillars compressed to one line each. It is the
   sentence someone repeats after they leave the page, so it gets the
   display face and the accent rather than sitting in with the body copy. */
#marketing-view .mo-film__creed{
  font:400 clamp(16px,1.8vw,21px)/1.55 Georgia,"Times New Roman",serif!important;
  color:var(--mf-mint)!important;letter-spacing:-.3px;
  margin:0 0 18px!important;max-width:40ch!important;
}
#marketing-view .mo-film__links{display:flex;gap:12px;flex-wrap:wrap;}
#marketing-view .mo-film__links a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 20px;
  border-radius:30px;font:700 13px/1 var(--font-sans),sans-serif;
  text-decoration:none;white-space:nowrap;
}
#marketing-view .mo-film__links a:first-child{background:var(--mf-mint);color:#06281f;}
#marketing-view .mo-film__links a+a{border:1px solid #9ee6bf4d;color:var(--mf-ink);}
#marketing-view .mo-film__links a:focus-visible{outline:3px solid var(--mf-mint);outline-offset:4px;}


/* ═══ Making the pin possible at all ══════════════════════════════════════

   position:sticky resolves against the nearest SCROLLING ancestor. The
   mobile shell sets overflow on <body> to stop horizontal bleed, and any
   non-visible overflow makes body a scroll container — one whose height
   equals its content, so it never actually scrolls. A sticky descendant of
   a scrollport that does not scroll simply never sticks. Measured on a
   375px viewport: a bare sticky probe sat at -900px instead of 0, and went
   to 0 the moment body's overflow was returned to visible.

   That single line is why this section, the money-stories lessons, and
   anything else sticky were all desktop-only. <html> keeps overflow-x
   hidden, so horizontal bleed is still clipped at the viewport — the
   clipping just happens one level up, where it does not break sticky.

   Verified after the change: document scrollWidth equals innerWidth, so
   nothing bleeds sideways. */

@media (max-width:1000px){
  html body{overflow-x:visible!important;overflow-y:visible!important;}
}

/* ═══ Pinned, everywhere there is room ════════════════════════════════════

   The film pins at every width now. What changes on a phone is the
   arrangement inside the stage: the shaft moves above the copy, the rail
   collapses to four ticks, and the whole thing leaves room for the fixed
   bottom nav.

   .mo-film-on is written by money-film.js once it owns the clock. Until
   then the section sits at its natural height with every chapter legible,
   so the first frame — and a reader with JavaScript off — sees real content
   rather than an empty black band. */

@media (min-height:620px){
  .mo-film-on #marketing-view .mo-film__track{min-height:400vh;}
  .mo-film-on #marketing-view .mo-film__theatre{position:sticky;top:0;height:100vh;height:100dvh;}
}

/* Without JavaScript nothing writes --mf-text or --mf-in, so the chapters
   would sit at opacity 0. Until the script tags these two containers, they
   render as a plain readable stack. */
#marketing-view .mo-film__script:not([data-film="on"]){display:block;}
#marketing-view .mo-film__script:not([data-film="on"]) .mf-chapter{opacity:1;transform:none;margin-bottom:28px;}
#marketing-view .mf-shaft:not([data-film="on"]){height:auto;}
#marketing-view .mf-shaft:not([data-film="on"]) .mf-slab{position:relative;opacity:1;transform:none;height:230px;margin-bottom:16px;}

/* ── The phone cut ───────────────────────────────────────────────────────
   Same film, restacked: shaft on top, copy beneath it, ticks at the foot.
   The 92px bottom padding is the fixed app nav — without it the rail and
   the last line of copy sit underneath it. */

@media (max-width:899px) and (min-height:620px){
  #marketing-view .mo-film__theatre{
    padding-block:22px 96px;
    gap:12px;
    grid-template-rows:auto minmax(0,1fr) auto;
  }
  #marketing-view .mo-film__thesis{display:none;}
  #marketing-view .mo-film__head{gap:4px;}
  #marketing-view .mo-film__head h2{font-size:clamp(23px,6.4vw,30px);letter-spacing:-1px;margin-top:6px;}
  #marketing-view .mo-film__head .mn-refresh-eyebrow{font-size:10px;letter-spacing:1.6px;}

  /* The copy sits directly under its slab, and all the slack goes to one
     place — the bottom, above the rail.

     Before this the stage inherited align-items:center from the desktop
     rule, so the copy was centred inside a row far taller than it needed:
     measured at 439x900, 125px of dead space above the paragraph and 124px
     below it. Two gaps in the middle of a composition read as a mistake; one
     deliberate margin at the foot reads as breathing room.

     align-items:start is what actually fixes it. It also keeps the slab at a
     fixed y: chapters differ in length, and with centring the card would
     shift up and down as the text under it changed. The card must not move
     between pillars — it is the one thing holding the frame still. */
  #marketing-view .mo-film__stage{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    gap:18px;
    align-content:start;
    align-items:start;
  }
  #marketing-view .mf-world{order:-1;perspective:760px;align-self:start;}
  /* Taller cap: on a big phone the old 208px ceiling left the figure small
     and the leftover space larger than it needed to be. */
  #marketing-view .mf-shaft{width:100%;height:clamp(160px,30vh,280px);}
  #marketing-view .mf-slab__face{padding:15px 16px;border-radius:16px;gap:8px;}
  #marketing-view .mf-slab__top{font-size:8px;letter-spacing:1.2px;}
  #marketing-view .mf-slab__top span:last-child{font-size:9px;}
  #marketing-view .mf-slab__fig svg{max-height:74px;}
  #marketing-view .mf-slab__read strong{font-size:clamp(23px,6.6vw,30px);}
  #marketing-view .mf-slab__read small{font-size:9px;max-width:14ch;}
  #marketing-view .mf-slab__floor{display:none;}

  #marketing-view .mf-chapter h3{font-size:clamp(21px,5.6vw,27px);letter-spacing:-.9px;margin-bottom:9px;}
  #marketing-view .mf-chapter p{font-size:13.5px;line-height:1.6;max-width:none;}
  #marketing-view .mf-chapter__tag{margin-bottom:10px;font-size:9px;}
  #marketing-view .mf-chapter__note{display:none;}

  #marketing-view .mf-rail{gap:6px;}
  #marketing-view .mf-rail button{font-size:0;min-height:34px;padding-top:8px;}
  #marketing-view .mf-rail b{font-size:9px;letter-spacing:1px;}
  #marketing-view .mf-rail span{display:none;}

  #marketing-view .mo-film__close{grid-template-columns:1fr;align-items:start;gap:22px;}
  #marketing-view .mo-film__links a{flex:1 1 auto;justify-content:center;}
}

/* A 667px phone (SE, mini) pins fine but has no slack: measured 4px between
   the end of the copy and the rail, which one extra line of text would eat.
   Buy back about 100px by shrinking the card, the padding and the body size
   — the composition is identical, just set tighter. */
@media (max-width:899px) and (min-height:620px) and (max-height:730px){
  #marketing-view .mo-film__theatre{padding-block:16px 86px;gap:10px;}
  #marketing-view .mf-shaft{height:clamp(138px,21vh,172px);}
  #marketing-view .mo-film__stage{gap:14px;}
  #marketing-view .mo-film__head h2{font-size:clamp(21px,5.6vw,26px);}
  #marketing-view .mf-chapter h3{font-size:clamp(19px,5vw,23px);margin-bottom:7px;}
  #marketing-view .mf-chapter p{font-size:12.8px;line-height:1.55;}
  #marketing-view .mf-chapter__tag{margin-bottom:8px;}
  #marketing-view .mf-slab__fig svg{max-height:62px;}
  #marketing-view .mf-slab__read strong{font-size:clamp(20px,5.6vw,25px);}
}

/* ── Too short to pin: stack it ──────────────────────────────────────────
   A landscape phone cannot hold a stage, so there the film becomes four
   cards in the same order, each drawn by its own position on screen. */

@media (max-height:619px){
  .mo-film-on #marketing-view .mo-film__track{min-height:0;}
  .mo-film-on #marketing-view .mo-film__theatre{position:static;height:auto;padding-block:40px;}
  #marketing-view .mo-film__stage{display:flex;flex-direction:column;gap:0;align-items:stretch;}
  #marketing-view .mo-film__script,
  #marketing-view .mf-world,
  #marketing-view .mf-shaft{display:contents;}
  #marketing-view .mf-slab[data-mf="0"]{order:1}
  #marketing-view .mf-chapter[data-mf="0"]{order:2}
  #marketing-view .mf-slab[data-mf="1"]{order:3}
  #marketing-view .mf-chapter[data-mf="1"]{order:4}
  #marketing-view .mf-slab[data-mf="2"]{order:5}
  #marketing-view .mf-chapter[data-mf="2"]{order:6}
  #marketing-view .mf-slab[data-mf="3"]{order:7}
  #marketing-view .mf-chapter[data-mf="3"]{order:8}
  #marketing-view .mf-slab{
    position:relative;grid-area:auto;height:clamp(190px,42vw,250px);margin-top:30px;
  }
  #marketing-view .mf-slab__floor{display:none;}
  #marketing-view .mf-chapter{grid-area:auto;opacity:1;transform:none;pointer-events:auto;padding-top:16px;}
  #marketing-view .mf-rail{display:none;}
  #marketing-view .mo-film__close{grid-template-columns:1fr;align-items:start;gap:24px;}
}

/* Reduced motion: the stacked arrangement with nothing moving at all. */
@media (prefers-reduced-motion:reduce){
  .mo-film-on #marketing-view .mo-film__track{min-height:0;}
  .mo-film-on #marketing-view .mo-film__theatre{position:static;height:auto;padding-block:46px;}
  #marketing-view .mo-film__stage{display:flex;flex-direction:column;gap:0;align-items:stretch;}
  #marketing-view .mo-film__script,
  #marketing-view .mf-world,
  #marketing-view .mf-shaft{display:contents;}
  #marketing-view .mf-slab[data-mf="0"]{order:1}
  #marketing-view .mf-chapter[data-mf="0"]{order:2}
  #marketing-view .mf-slab[data-mf="1"]{order:3}
  #marketing-view .mf-chapter[data-mf="1"]{order:4}
  #marketing-view .mf-slab[data-mf="2"]{order:5}
  #marketing-view .mf-chapter[data-mf="2"]{order:6}
  #marketing-view .mf-slab[data-mf="3"]{order:7}
  #marketing-view .mf-chapter[data-mf="3"]{order:8}
  #marketing-view .mf-slab{
    position:relative;grid-area:auto;height:clamp(200px,26vw,250px);margin-top:30px;
    opacity:1!important;transform:none!important;
  }
  #marketing-view .mf-chapter{grid-area:auto;opacity:1!important;transform:none!important;pointer-events:auto;padding-top:16px;}
  #marketing-view .mf-slab__floor{display:none;}
  #marketing-view .mf-slab__face::after{opacity:0;}
  #marketing-view .mf-plate{opacity:1;transform:none;}
  #marketing-view .mf-rail{display:none;}
}

/* ═══ The figures, drawn by --mf-in ════════════════════════════════════════
   money-film.js writes one number per slab: --mf-in, 0 when the slab is a
   chapter away and 1 when it is at the lens. Everything inside a slab is a
   function of that one number, so a figure can never disagree with where its
   slab is. SVG shapes need transform-box:fill-box or the origin resolves
   against the whole viewport rather than the shape. */

#marketing-view .mf-slab svg rect,
#marketing-view .mf-slab svg path{transform-box:fill-box;}

/* 01 — the plates land one month at a time, left to right. */
#marketing-view .mf-plate{
  --on:clamp(0, calc((var(--mf-in,1) - var(--i) * 0.11) / 0.3), 1);
}

/* 02 and 03 — each row in a ledger or a ladder arrives in its own turn, so
   the comparison is read in order rather than appearing all at once. */
#marketing-view .mf-ledger,
#marketing-view .mf-rate{
  --on:clamp(0, calc((var(--mf-in,1) - var(--i) * 0.16) / 0.38), 1);
  transform:scaleX(var(--on));
  transform-origin:left center;
}

/* 04 — your money first, then the interest riding on top of it. */
#marketing-view .mf-bar-p{
  transform:scaleX(clamp(0, calc(var(--mf-in,1) / 0.55), 1));
  transform-origin:left center;
}
/* The interest sits on the same bar as the principal rather than beside it —
   it is not a separate cost, it is the part of the repayment that is not
   yours. 0.2507 is 1,67,333 of 6,67,333. */
#marketing-view .mf-bar-i{
  transform:scaleX(calc(clamp(0, calc((var(--mf-in,1) - 0.5) / 0.45), 1) * 0.2507));
  transform-origin:right center;
}

@media (prefers-reduced-motion:reduce){
  #marketing-view .mf-ledger,#marketing-view .mf-rate{transform:none;}
  #marketing-view .mf-bar-p,#marketing-view .mf-bar-i{transform:none;}
  #marketing-view .mf-bar-i{transform:scaleX(.2507);transform-origin:right center;}
}