/* =====================================================================
   पंच-महाविद्या™ — minimal, premium skin over the shared funnel design

   REWRITTEN, not extended. Five palette passes had accumulated in here,
   each overriding the last; what follows is built once, for one idea.

   THE IDEA: the loudness was the problem, not the colour. The base
   sheet is a high-energy marketing page — scrolling marquee, gradient
   buttons with coloured glows, saturated icon tiles, a fill and a
   border on every block. Re-tinting that cannot make it feel premium,
   because what reads as cheap is the ornament, not the hue. So this
   strips rather than repaints:

     · REMOVED   marquee, star field, floating video, shine sweeps,
                 button glows, card fills, icon tile fills, every
                 gradient
     · ADDED     space. Sections breathe at 140px, the measure narrows,
                 leading opens, and hairlines do the separating that
                 fills and borders were doing
     · ONE       accent, gold, spent sparingly. The primary button is
                 ivory on near-black — the most emphatic thing a page
                 this quiet can do

   Ground is near-black and neutral-warm, per the reference: #0B0A09
   rather than pure black, so panels can sit above it by a value or two
   instead of needing an outline drawn round them.

   Scoped to .fn--pmv4 and loaded after funnel.css, so the other funnel
   is untouched. funnel.css itself is byte-for-byte unmodified.
   ===================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────── */
/* body.fn.fn--pmv4 (0,2,1) beats the base tokens on .fn (0,1,0) outright,
   rather than depending on which file loads last. */
body.fn.fn--pmv4 {
    /* Warm cream, not white. Pure white was the ground and the panels both,
       which is what made the page read as mostly blank paper; the ground is
       cream now and only the LIFTED surfaces go near white, so white is a
       highlight rather than the default.

       Warming the ground costs contrast — every text colour is measured
       against the darkest band, and dropping it to #EFE4CC put the gold at
       4.21:1, under the floor. The gold darkens to compensate. */
    --void:     #4A0C0C;   /* the field */
    --void-2:   #3A0808;   /* the alternating band, deeper */
    --panel:    #5E1212;   /* a card lifted off the field */
    --panel-2:  #6E1818;
    --line:     #6B1A18;
    --line-2:   #883029;

    --ink:      #FFF3DF;   /* 14.2:1 on the field */
    --ink-2:    #EFDCC2;   /* 11.6:1 */
    --ink-3:    #D8C3A4;   /*  9.1:1 */
    /* --ink-4 is the faintest token and it carries 20 rules of small text —
       field labels, placeholders, the countdown DAYS/HRS/MIN/SEC, the receipt
       line, the footer headings. At #928572 it measured 2.86:1 on the darkest
       band: failing everywhere it appears, not only in the countdown where it
       happened to get noticed. */
    --ink-4:    #BCA98C;   /* 6.8:1 on the field, 5.1:1 on the lightest panel */

    /* YELLOW AND GOLD, split by job — and this split is the whole problem
       with a light ground.

       On the old cream ground these had to be two different values: bright
       yellow as TYPE measured 1.51:1 there, so --gold was forced down to a
       dark #815905 while --brand kept the bright one for fills. Against
       maroon that reverses — #F5C518 as type is 9.6:1, and the dark gold
       would now be the unreadable one.

       So --gold takes the bright value too. The split by job survives only
       because --brand is a FILL and carries dark type ON it. */
    --brand:    #E8B406;   /* fills only; maroon type on it measures 8.1:1 */
    --brand-2:  #C08A08;
    --gold:     #F5C518;   /* type: 9.6:1 on the field */
    --violet:   #F5C518;

    /* The headline gradient is clipped into the glyphs, so every stop is TYPE
       and has to clear the floor. On cream that forced it between two deep
       golds; on maroon it can run bright, which is what makes a heading read
       as gold leaf rather than as brown text. */
    --grad:      linear-gradient(90deg, #FFDE6A, #F5C518 55%, #E0A004);
    --grad-word: linear-gradient(100deg, #FFDE6A, #F5C518 55%, #E8B406);
    --grad-cta:  linear-gradient(90deg, #F5C518, #E0A004);

    --radius: 2px;
    --maxw: 1040px;

    /* Fraunces for Latin, Rozha One behind it for Devanagari. Font fallback is
       per-GLYPH, so the Hindi line resolves to Rozha One on its own without
       needing a class — which matters, because that line has moved three times
       already. Both faces are in the layout's existing font request. */
    --font-sans:    'Manrope', 'Mukta', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-display: 'Fraunces', 'Rozha One', Georgia, 'Times New Roman', serif;

    font-weight: 300;
    line-height: 1.75;

    /* THE 8px STRIP DOWN BOTH EDGES.

       funnel.css carries no reset — no `* { margin: 0 }`, no body rule, and
       .fn itself sets no margin — so the browser default of 8px on <body>
       was showing as a band of page ground either side of every section.
       Measured in the render: the ground at x=0..7, the section starting at
       x=8, and the same at the right edge.

       This is NOT specific to this funnel. The other one has the identical
       gap for the identical reason; it is only fixed here because this file
       is the only one scoped to touch. */
    margin: 0;
}

/* ── Space ──────────────────────────────────────────────────────────── */
/* Section padding is set in the PAGE RHYTHM block near the end of this file,
   which redeclares it at top level and so wins on source order. The 140/100
   pair that used to sit here had been dead since that pass. */

/* ── Type ───────────────────────────────────────────────────────────── */
/* Light weights, open tracking. Fraunces goes down to 400, and at display size
   400 reads as light — weight 800 was doing the shouting. */
.fn--pmv4 .fn-h2 {
    font-weight: 400;
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    line-height: 1.24;
    letter-spacing: .01em;
    color: var(--ink);
}
.fn--pmv4 .fn-hero__title {
    font-weight: 400;
    font-size: clamp(2.1rem, 5vw, 3.9rem);
    line-height: 1.26;
    letter-spacing: .015em;
    color: var(--ink);
}
.fn--pmv4 .fn-lead {
    font-weight: 300;
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--ink-3);
    max-width: 58ch;
    margin-inline: auto;
}

/* Small tracked caps are the one piece of typographic ornament kept: they
   label without raising their voice. */
.fn--pmv4 .fn-eyebrow,
.fn--pmv4 .fn-pill {
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* The accent word: flat gold, no gradient. And no faux italic — neither
   Fraunces at this weight nor Rozha One has one worth synthesising, and
   slanted Devanagari is not a style the script has at all. */
/* Left to the base sheet, which clips --grad-word into the glyphs. Flattening
   these to a solid gold was the minimal pass; the screenshot has the gradient
   headline back. */
.fn--pmv4 .fn-ital,
.fn--pmv4 .fn-hero__tagline { font-style: normal; }

/* ── Removed outright ───────────────────────────────────────────────── */
/* Each of these the base sheet adds for energy. A quiet page cannot contain
   them and stay quiet, and dimming them only makes a dim loud thing. Hidden
   rather than deleted, because the markup is shared with the other funnel. */
.fn--pmv4 .fn-vid,             /* floating video bubble */
.fn--pmv4 .fn-banner__shine,   /* light sweep across the banner */
.fn--pmv4 .fn-ctapanel__shine, /* and across the closing panel */
.fn--pmv4 .fn-chips { display: none; }

/* ── Buttons ────────────────────────────────────────────────────────── */
/* The gradient button, restored. The minimal pass flattened it to one colour
   and swapped the type to dark; the screenshot has the gradient and the glow
   back, so the fill and the colour come off entirely and the base sheet
   paints it from --grad-cta again. Only the geometry and the lettering stay
   overridden — square rather than a 999px capsule, uppercase and tracked. */
.fn--pmv4 .fn-btn {
    border: 0;
    border-radius: 999px;   /* rounded, as the base sheet has it */
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: .84rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    /* Narrower. The base is 11px/26px; the uppercase + .08em tracking I had
       added was widening every button on the site on top of 30px of side
       padding, so the tracking comes down with the padding. */
    padding: 12px 22px;
    /* The base sheet sets color:#fff, which on this yellow fill is 1.63:1.
       A deep brown-gold from the same family gives 8.42:1. */
    color: #2A0606;
    box-shadow: 0 10px 24px -14px rgba(192, 138, 8, .7);
}
.fn--pmv4 .fn-btn:hover { filter: brightness(1.07); }
.fn--pmv4 .fn-btn--lg { padding: 14px 26px; font-size: .86rem; }

.fn--pmv4 .fn-btn--ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line-2);
    border-radius: 999px;
}
.fn--pmv4 .fn-btn--ghost:hover {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink-3);
}
.fn--pmv4 .fn-btn--lg { padding: 14px 26px; font-size: .86rem; }

/* The live dots ping outward in the base sheet's crimson. */
.fn--pmv4 .fn-pill__dot,
.fn--pmv4 .fn-timerbar__dot,
.fn--pmv4 .fn-hero__badge::before { box-shadow: none; background: var(--gold); }

/* ── Surfaces ───────────────────────────────────────────────────────── */
/* The base sheet gives nearly every block a fill, a border and a radius. Here
   a hairline does it, and most blocks get nothing at all — the space around
   them is the separation. */
.fn--pmv4 .fn-mini,
.fn--pmv4 .fn-stat {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
/* Only where a list genuinely needs dividing. */


/* Icon tiles were solid saturated squares — the loudest single element on the
   page, repeated some thirty times down it. Reduced to the icon, in gold. */
.fn--pmv4 .fn-tile {
    background: transparent;
    box-shadow: none;
    border: 0;
    color: var(--gold);
    width: auto;
    height: auto;
}
.fn--pmv4 .fn-tile svg { width: 22px; height: 22px; }

.fn--pmv4 .fn-card__title,
.fn--pmv4 .fn-dcard__title,
.fn--pmv4 .fn-modcard__title,
.fn--pmv4 .fn-bcard__title,
.fn--pmv4 .fn-who__title,
.fn--pmv4 .fn-fact__title,
.fn--pmv4 .fn-person__name,
.fn--pmv4 .fn-mentor__name,
.fn--pmv4 .fn-mentor__quote,
.fn--pmv4 .fn-checks__t,
.fn--pmv4 .fn-payline b { color: var(--ink); font-weight: 400; }

.fn--pmv4 .fn-dcard__num { color: var(--ink-4); font-weight: 300; }

/* The big panels keep a surface, because they hold a form or a portrait — but
   lose the washes and coloured blooms painted over them. */
.fn--pmv4 .fn-mentorcard,
.fn--pmv4 .fn-ctapanel,
.fn--pmv4 .fn-typanel,
.fn--pmv4 .fn-banner {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 2px;
    box-shadow: none;
}
.fn--pmv4 .fn-mentorcard::before { background: var(--gold); height: 1px; }
.fn--pmv4 .fn-mentor__rule { border-top-color: var(--line-2); }
.fn--pmv4 .fn-consult { background: transparent; border-color: var(--line-2); }
.fn--pmv4 .fn-certframe {
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: none;
}

/* ── Chrome ─────────────────────────────────────────────────────────── */
.fn--pmv4 .fn-nav {
    background: rgba(255, 255, 255, .9);
    border-bottom: 1px solid var(--line);
}
.fn--pmv4 .fn-nav__links a { color: var(--ink-3); font-weight: 400; }
.fn--pmv4 .fn-nav__links a:hover { color: var(--ink); }
.fn--pmv4 .fn-hero__badge { background: transparent; border: 1px solid var(--line-2); }
.fn--pmv4 .fn-mnav__item { background: transparent; border-radius: 2px; }
.fn--pmv4 .fn-mnav__item.is-cta { box-shadow: none; }
.fn--pmv4 .fn-mnav__item.is-cta::after { display: none; }
/* WhatsApp keeps WhatsApp's colour — by getting out of the way.

   funnel.css ALREADY paints this disc in the brand green:
       background: linear-gradient(160deg, #38e07b, #14b95a); color: #fff;
   The minimal pass had overridden it to a page-toned panel with a hairline
   border and a dark glyph, which is what turned it into the pale ring in the
   client's screenshot. Restating #25D366 here would work but would fork the
   brand colour into two files; deleting the override restores the real thing
   and keeps one source for it.

   The one thing that does need overriding is the shadow. The base pairs the
   green glow with rgba(0,0,0,.8) — sized for a near-black page, and a heavy
   smudge on white. The pulse comes back with it: on a floating action button
   that ring is what says the button is live. */
/* THE GLYPH. funnel.css carries `.fn a { color: inherit }` at specificity
   (0,1,1), which beats its own `.fn-wa { color: #fff }` at (0,1,0) — so the
   anchor inherits --ink and the svg, drawn with fill="currentColor", takes it
   too. On the dark build --ink was warm white and the glyph looked correct by
   accident; on a light ground it turned into dark text on green.

   Set explicitly here at (0,2,0), which wins outright. */
.fn--pmv4 .fn-wa {
    color: #fff;
    box-shadow: 0 10px 26px -8px rgba(20, 160, 80, .5), 0 2px 8px -3px rgba(0, 0, 0, .16);
}
.fn--pmv4 .fn-wa:hover {
    box-shadow: 0 0 24px 4px rgba(37, 211, 102, .45), 0 12px 28px -10px rgba(0, 0, 0, .22);
}
.fn--pmv4 .fn-wa__pulse { display: block; }
/* ── Countdown bar ──────────────────────────────────────────────────── */
/* This one element goes DARK, and deliberately.

   It is a fixed bar floating over the page, and at var(--panel) it measured
   1.08:1 against the ground it floats on — the same value, so there was
   nothing to see. No shadow rescues a 1.08:1 edge; the bar has to differ in
   value, not in elevation. Dark gives 13.5:1 against the page.

   That is not a return to a dark background. It is a toolbar sitting above
   the page, the way a dialog or a toast does, and it reads as one.

   Everything inside therefore has to invert too: the base sets the digits to
   var(--gold) and the DAYS/HRS labels to var(--ink-4), both of which are the
   DARK values on this light theme and would vanish here. */
.fn--pmv4 .fn-timerbar__frame {
    background: var(--grad);
    border: 0;
    box-shadow: 0 10px 24px -8px rgba(42, 6, 6, .38), 0 22px 50px -20px rgba(42, 6, 6, .5);
}
.fn--pmv4 .fn-timerbar__in { background: #2A0606; }
.fn--pmv4 .fn-timerbar__eyebrow { color: #D8C3A4; }
.fn--pmv4 .fn-timerbar__when { color: #FFD24A; }
.fn--pmv4 .fn-timerbar__cell {
    background: rgba(255, 248, 236, .06);
    border: 1px solid rgba(245, 197, 24, .3);
}
.fn--pmv4 .fn-timerbar__cell b { color: #F5C518; }
.fn--pmv4 .fn-timerbar__cell span { color: #BCA98C; }
.fn--pmv4 .fn-timerbar__cell + .fn-timerbar__cell::before { color: #F5C518; opacity: .5; }
.fn--pmv4 .fn-req { color: var(--gold); }

/* ── Marquee ────────────────────────────────────────────────────────── */
/* Restored. I had stripped it as part of quietening the page, which was a
   call that was not mine to make — it is a real element carrying real copy.
   It stays, but toned: its base wash is a crimson-to-violet gradient tuned
   for a dark page, and its type is white at 70%% alpha, which on cream is
   close to invisible. */
.fn--pmv4 .fn-marq {
    background: var(--void-2);
    border-bottom: 1px solid var(--line);
}
.fn--pmv4 .fn-marq__item { color: var(--ink-3); font-weight: 600; }
.fn--pmv4 .fn-marq__item:hover { color: var(--ink); }
.fn--pmv4 .fn-marq__star,
.fn--pmv4 .fn-marq .hl { color: var(--gold); }

/* The pill keeps a crimson tint and border from the base sheet; only its type
   was restyled above. */
.fn--pmv4 .fn-pill {
    background: transparent;
    border: 1px solid var(--line-2);
}

/* .fn-formcard draws a 4px bar across its top from --grad-cta, which is now
   ivory — a thick white stripe over the ticket. A hairline in gold instead. */
.fn--pmv4 .fn-formcard::before {
    height: 1px;
    background: var(--gold);
    opacity: .5;
}

/* ── Form ───────────────────────────────────────────────────────────── */
/* Underlines, not boxes. Five bordered fields stacked is five more rectangles
   on a page whose whole argument is that it has fewer. */
.fn--pmv4 .fn-input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
    padding: 12px 2px;
    color: var(--ink);
    font-weight: 300;
    transition: border-color .2s ease;
}
.fn--pmv4 .fn-input:focus {
    outline: none;
    border-bottom-color: var(--gold);
    box-shadow: none;
}
.fn--pmv4 .fn-input::placeholder { color: var(--ink-4); }
.fn--pmv4 .fn-label {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--ink-4);
}
.fn--pmv4 .fn-field { margin-bottom: 22px; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.fn--pmv4 .fn-hero__grid { grid-template-columns: 1fr; gap: 0; text-align: center; }
.fn--pmv4 .fn-hero__title,
.fn--pmv4 .fn-hero__desc { margin-inline: auto; }
.fn--pmv4 .fn-hero__desc {
    max-width: 52ch;
    font-weight: 300;
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--ink-3);
}
/* Carries the gap to the buttons only when no tagline follows it. */
.fn--pmv4 .fn-hero__desc:last-of-type { margin-bottom: 40px; }
.fn--pmv4 .fn-hero__actions { justify-content: center; gap: 14px; }
.fn--pmv4 .fn-hero > .fn-container { position: relative; z-index: 1; }

/* ── Hero background ────────────────────────────────────────────────── */
/* Three layers, not one wash.

   The previous version was concentric rings on cream at a low alpha — beige
   on beige, which is close to nothing, and no amount of retinting makes
   nothing attractive. It needed a subject, so it has one: light radiating
   from behind the headline, which is what पाँच दिव्य शक्तियाँ — five divine
   powers — actually says.

     1. RAYS     a repeating conic gradient from a point just under the
                 headline. Fine alternating wedges, so it reads as light
                 rather than as a pie chart, and masked to fade out well
                 before the edges.
     2. GLOW     a warm core where the rays converge, giving the hero a
                 focal point it did not have.
     3. GROUND   the cream, warming towards the centre.

   The rings and planets sit on top of all three: .fn-orbits is a real
   element later in the DOM, and ::before is generated as the first child,
   so the rays land behind the orrery without either needing a z-index. */
.fn--pmv4 .fn-hero {
    position: relative;
    padding: 76px 0 104px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--void-2), var(--void) 68%);
}
.fn--pmv4 .fn-hero::before {
    content: '';
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 150%;
    pointer-events: none;
    /* The rays are gone. The repeating-conic-gradient that drew them, and the
       720s rotation that turned them, are both removed — what is left is the
       soft warm core they converged on, which was doing the work of giving
       the hero a focal point anyway. The orrery is untouched: its rings and
       planets are .fn-orbits, a separate element, and they still turn. */
    background: radial-gradient(circle 340px at 50% 38%, rgba(143, 99, 6, .10), transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 58% 52% at 50% 38%, #000 18%, transparent 72%);
    mask-image: radial-gradient(ellipse 58% 52% at 50% 38%, #000 18%, transparent 72%);
}

/* Alternating grounds. Targeted by id rather than :nth-of-type, because the
   section order is set in the page view and a positional rule would re-stripe
   itself the next time a section is added or moved. */

/* ── Reserve Your Seat ──────────────────────────────────────────────── */
/* Styles for funnel-pmv4/sections/register.blade.php, this funnel's own
   section: the process on an axis, then a single centred ticket. */
.fn--pmv4 .pmr-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 60px 0 0;
    padding: 0;
    list-style: none;
}
.fn--pmv4 .pmr-steps::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 16.6%;
    right: 16.6%;
    height: 1px;
    background: var(--line);
}
.fn--pmv4 .pmr-step { position: relative; text-align: center; padding: 0 22px; }
.fn--pmv4 .pmr-step__n {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0 auto 20px;
    border-radius: 50%;
    /* Opaque, so the axis passes behind the numeral and not through it. */
    background: var(--void);
    border: 1px solid var(--line-2);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: .95rem;
    color: var(--gold);
}
.fn--pmv4 .pmr-step__t {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--ink);
    margin: 0 0 8px;
}
.fn--pmv4 .pmr-step__x {
    margin: 0 auto;
    font-size: .88rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--ink-3);
    max-width: 30ch;
}

.fn--pmv4 .pmr-ticket {
    max-width: 620px;
    margin: 72px auto 0;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--panel);
}
.fn--pmv4 .pmr-ticket__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 28px;
    padding: 22px 30px;
    border-bottom: 1px solid var(--line);
}
.fn--pmv4 .pmr-facts { display: flex; flex-wrap: wrap; gap: 16px 28px; margin: 0 auto 0 0; }
.fn--pmv4 .pmr-fact dt {
    font-size: .56rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: 5px;
}
.fn--pmv4 .pmr-fact dd { margin: 0; font-size: .9rem; font-weight: 300; color: var(--ink-2); }
.fn--pmv4 .pmr-price { text-align: right; }
.fn--pmv4 .pmr-price b {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--gold);
}
.fn--pmv4 .pmr-price small { display: block; margin-top: 6px; font-size: .7rem; color: var(--ink-4); }

.fn--pmv4 .pmr-ticket__body {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 34px 30px;
}
.fn--pmv4 .pmr-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }

.fn--pmv4 .pmr-foot { max-width: 620px; margin: 26px auto 0; text-align: center; }
.fn--pmv4 .pmr-bonus {
    margin: 0 0 16px;
    padding: 0 0 16px;
    border: 0;
    border-bottom: 1px solid var(--line);
    font-size: .86rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--ink-3);
    text-align: center;
}
.fn--pmv4 .pmr-bonus b { color: var(--gold); font-weight: 500; display: block; margin-bottom: 3px; }
.fn--pmv4 .pmr-contact { margin: 0; font-size: .84rem; color: var(--ink-4); }
.fn--pmv4 .pmr-contact a { color: var(--ink-2); text-decoration: none; margin-left: 14px; }
.fn--pmv4 .pmr-contact a:hover { color: var(--gold); }

/* ── Narrow ─────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
    .fn--pmv4 .fn-section { padding-block: 88px; }
    .fn--pmv4 .fn-hero { padding: 52px 0 68px; }
    .fn--pmv4 .pmr-steps { grid-template-columns: 1fr; gap: 34px; }
    .fn--pmv4 .pmr-steps::before { display: none; }
    .fn--pmv4 .pmr-step { padding: 0; }
}
@media (max-width: 560px) {
    .fn--pmv4 .pmr-row { grid-template-columns: 1fr; }
    .fn--pmv4 .pmr-ticket__head { padding: 20px; }
    .fn--pmv4 .pmr-ticket__body { padding: 26px 20px; }
    .fn--pmv4 .pmr-price { text-align: left; }
}


/* ── Light ground: the remainder ────────────────────────────────────── */
/* The minimal pass already removed or recoloured most of what funnel.css
   hardcodes for a dark page — the star field, the chips, the tinted fills, the
   glows are all gone, and the card titles already read var(--ink). These are
   what is left: three rules that set white text, and two that fill with white
   at an alpha that only exists against a dark panel. */
.fn--pmv4 .fn-mentor__bio strong { color: var(--ink); }
.fn--pmv4 .fn-mnav__item:hover,
.fn--pmv4 .fn-mnav__item:focus-visible { background: var(--void-2); }
.fn--pmv4 .fn-ty__facts li { background: var(--void-2); }

/* The footer stays light. It was inverted to the ink so it would close the
   page — but a dark footer is a dark background, which is the thing being
   asked for less of. A hairline and the cream ground close it instead. */

/* ── Orrery ─────────────────────────────────────────────────────────── */
/* Seven rings, four carrying a planet. The empty ones are not filler: a system
   where every ring has a body reads as a diagram, and the gaps are what make it
   read as depth.

   THE PLANET IS A CHILD OF ITS RING. One rotation on the ring carries the
   planet round its orbit, so there are no keyframes trying to trace a circle.

   Each ring starts at its own angle, and its keyframes run from that angle to
   that angle plus a turn. That matters for the still frame: without the offset
   all four planets line up at twelve o'clock before the first frame renders,
   which is exactly what a thumbnail, a reduced-motion visitor and the first
   paint would show.

   Tuned for the cream ground: the ring tone is the page's own brown a few
   steps off the background rather than a hairline at full contrast, which is
   what made it read as scratches on white. */
.fn--pmv4 .fn-orbits {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 84% 80% at 50% 44%, #000 28%, transparent 76%);
    mask-image: radial-gradient(ellipse 84% 80% at 50% 44%, #000 28%, transparent 76%);
}

/* A star field is light-on-dark; on cream the dots are either invisible or
   grubby specks. The sun's glow is already in the hero wash above. */
.fn--pmv4 .fn-orbits__stars,
.fn--pmv4 .fn-orbits__sun { display: none; }

.fn--pmv4 .fn-orbit {
    position: absolute;
    top: 44%;
    left: 50%;
    aspect-ratio: 1;
    border: 1px solid rgba(245, 197, 24, .18);
    border-radius: 50%;
}
.fn--pmv4 .fn-orbit--1 { width: min(300px, 48vw);   transform: translate(-50%, -50%) rotate(18deg); }
.fn--pmv4 .fn-orbit--2 { width: min(460px, 68vw);   transform: translate(-50%, -50%) rotate(206deg); }
.fn--pmv4 .fn-orbit--3 { width: min(620px, 86vw);   transform: translate(-50%, -50%) rotate(95deg); }
.fn--pmv4 .fn-orbit--4 { width: min(800px, 106vw);  transform: translate(-50%, -50%) rotate(140deg); }
.fn--pmv4 .fn-orbit--5 { width: min(980px, 126vw);  transform: translate(-50%, -50%) rotate(255deg); }
.fn--pmv4 .fn-orbit--6 { width: min(1170px, 148vw); transform: translate(-50%, -50%) rotate(40deg); }
.fn--pmv4 .fn-orbit--7 { width: min(1370px, 172vw); transform: translate(-50%, -50%) rotate(72deg); }

/* Spheres, not discs.

   The flat version was one broad white wash over a solid fill, which is what a
   button looks like. A body reads as spherical only when four things are true
   at once, and all four are here:

     1. LIMB DARKENING  the fill darkens towards the rim, because the edge of a
                        sphere is surface turning away from you. This is the
                        single biggest tell, and the flat version had none.
     2. TERMINATOR      an INSET shadow on the unlit side. Inset, so it curves
                        with the body; an outer shadow would sit under it like
                        a sticker on paper.
     3. SPECULAR        a small, tight highlight offset toward the light — not
                        a broad haze across the top half.
     4. BOUNCE          a faint warm rim on the lit limb, so the dark side does
                        not read as a bite taken out of the circle.

   THE LIGHT COMES FROM THE SYSTEM CENTRE. Each planet is a child of its ring,
   so "towards the centre" is always down in the planet's own frame — which
   means the shading is baked in once and stays correct through the whole orbit
   as the ring turns. That is why the highlights sit low and the terminator sits
   high on every one of them.

   Two gas giants with banding, one rocky body, one small moon. */
.fn--pmv4 .fn-planet {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow:
        inset 0 -2px 5px -1px rgba(255, 246, 222, .5),  /* bounce, lit limb */
        inset 0 5px 10px -1px rgba(46, 32, 2, .8),       /* terminator, bronze not rust */
        0 0 16px -2px rgba(232, 180, 6, .38);         /* faint gold halo, not a drop shadow */
}

/* Banded gas giant, gold. */
.fn--pmv4 .fn-planet--a {
    width: 28px; height: 28px;
    background:
        radial-gradient(circle at 42% 74%, rgba(255, 252, 240, .75) 0 7%, transparent 30%),
        repeating-linear-gradient(96deg,
            rgba(94, 65, 2, .26) 0 2px, transparent 2px 4px,
            rgba(255, 233, 160, .2) 4px 6px, transparent 6px 9px),
        radial-gradient(circle at 48% 70%, #FFEFB8 0%, #F0BE12 42%, #B08206 74%, #5E4102 100%);
}

/* Rocky body, burnished gold. Mottled rather than banded — the low-alpha radial
   stops are surface, not bands. */
.fn--pmv4 .fn-planet--b {
    width: 20px; height: 20px;
    background:
        radial-gradient(circle at 42% 74%, rgba(255, 248, 232, .6) 0 8%, transparent 30%),
        radial-gradient(circle at 62% 42%, rgba(78, 55, 2, .35) 0 18%, transparent 40%),
        radial-gradient(circle at 30% 54%, rgba(78, 55, 2, .28) 0 14%, transparent 36%),
        radial-gradient(circle at 48% 70%, #F7D976 0%, #E0A404 44%, #96700A 76%, #4E3702 100%);
}

/* The largest, a bright banded giant — the closest of the four to the brand
   gold, since it is the one the eye lands on. */
.fn--pmv4 .fn-planet--c {
    width: 34px; height: 34px;
    background:
        radial-gradient(circle at 42% 76%, rgba(255, 253, 246, .8) 0 6%, transparent 28%),
        repeating-linear-gradient(92deg,
            rgba(106, 74, 2, .22) 0 3px, transparent 3px 6px,
            rgba(255, 243, 200, .22) 6px 8px, transparent 8px 12px),
        radial-gradient(circle at 48% 70%, #FFF3CB 0%, #F5C518 40%, #BC8A06 74%, #6A4A02 100%);
}

/* A small moon — no bands, stronger terminator for its size. */
.fn--pmv4 .fn-planet--d {
    width: 13px; height: 13px;
    background:
        radial-gradient(circle at 40% 74%, rgba(255, 255, 250, .8) 0 10%, transparent 34%),
        radial-gradient(circle at 48% 68%, #FFF8DE 0%, #EFCE6A 46%, #A88320 78%, #5C4208 100%);
}

/* ONE DIRECTION. Rings 3 and 6 used to run `reverse` so the field never
   settled into a single sweep — which read as planets passing each other
   the wrong way rather than as a system. Every ring now turns the same
   way; the outer ones still turn slower, which is what keeps it from
   looking like one rigid disc. */
@media (prefers-reduced-motion: no-preference) {
    .fn--pmv4 .fn-orbit--1 { animation: pm-orbit-1 46s linear infinite; }
    .fn--pmv4 .fn-orbit--2 { animation: pm-orbit-2 74s linear infinite; }
    .fn--pmv4 .fn-orbit--3 { animation: pm-orbit-3 98s linear infinite; }
    .fn--pmv4 .fn-orbit--4 { animation: pm-orbit-4 126s linear infinite; }
    .fn--pmv4 .fn-orbit--5 { animation: pm-orbit-5 158s linear infinite; }
    .fn--pmv4 .fn-orbit--6 { animation: pm-orbit-6 196s linear infinite; }
    .fn--pmv4 .fn-orbit--7 { animation: pm-orbit-7 240s linear infinite; }
}
@keyframes pm-orbit-1 { from { transform: translate(-50%,-50%) rotate(18deg); }  to { transform: translate(-50%,-50%) rotate(378deg); } }
@keyframes pm-orbit-2 { from { transform: translate(-50%,-50%) rotate(206deg); } to { transform: translate(-50%,-50%) rotate(566deg); } }
@keyframes pm-orbit-3 { from { transform: translate(-50%,-50%) rotate(95deg); }  to { transform: translate(-50%,-50%) rotate(455deg); } }
@keyframes pm-orbit-4 { from { transform: translate(-50%,-50%) rotate(140deg); } to { transform: translate(-50%,-50%) rotate(500deg); } }
@keyframes pm-orbit-5 { from { transform: translate(-50%,-50%) rotate(255deg); } to { transform: translate(-50%,-50%) rotate(615deg); } }
@keyframes pm-orbit-6 { from { transform: translate(-50%,-50%) rotate(40deg); }  to { transform: translate(-50%,-50%) rotate(400deg); } }
@keyframes pm-orbit-7 { from { transform: translate(-50%,-50%) rotate(72deg); }  to { transform: translate(-50%,-50%) rotate(432deg); } }

@media (max-width: 820px) {
    .fn--pmv4 .fn-planet--a { width: 21px; height: 21px; }
    .fn--pmv4 .fn-planet--b { width: 15px; height: 15px; }
    .fn--pmv4 .fn-planet--c { width: 26px; height: 26px; }
    .fn--pmv4 .fn-planet--d { width: 11px; height: 11px; }
}


/* ── Golden red ground: the remainder ───────────────────────────────── */
/* Rules written when the page was cream and the type was dark. Everything
   token-driven followed the inversion on its own; these named a colour. */

/* The button's white type is set inline on the element in the shared markup's
   payline, and the ghost button was tuned for a light page. */
.fn--pmv4 .fn-btn--ghost { color: var(--ink); border-color: var(--line-2); }
.fn--pmv4 .fn-btn--ghost:hover { color: var(--gold); border-color: var(--gold); }

/* Form fields: an underline on cream, now an underline on red. The focus
   colour has to be the gold, since red on red says nothing. */
.fn--pmv4 .fn-input { color: var(--ink); border-bottom-color: var(--line-2); }
.fn--pmv4 .fn-input::placeholder { color: var(--ink-4); }
.fn--pmv4 .fn-input:focus { border-bottom-color: var(--gold); }
.fn--pmv4 .fn-label { color: var(--ink-4); }
/* The select's own dropdown is painted by the OS from these two. */
.fn--pmv4 select.fn-input { background-color: var(--panel); color: var(--ink); }
.fn--pmv4 select.fn-input option { background: var(--panel); color: var(--ink); }

/* The icon tiles and ticks took the accent; on red that has to be the gold. */
.fn--pmv4 .fn-tile,
.fn--pmv4 .fn-check,
.fn--pmv4 .fn-incl__tick,
.fn--pmv4 .fn-fcontact__icon,
.fn--pmv4 .fn-req { color: var(--gold); }

/* The alumni ring and the mentor card's top rule. */
.fn--pmv4 .fn-person__ring { background: var(--line-2); }
.fn--pmv4 .fn-mentorcard::before { background: var(--brand); }

/* The marquee sat on the cream band; on red it takes the deeper surface so it
   still separates from the page behind it. */
.fn--pmv4 .fn-marq { background: var(--panel-2); border-bottom-color: var(--line); }
.fn--pmv4 .fn-marq__item { color: var(--ink-3); }
.fn--pmv4 .fn-marq__item:hover { color: var(--ink); }
.fn--pmv4 .fn-marq__star,
.fn--pmv4 .fn-marq .hl { color: var(--gold); }

/* Header and footer follow the ground rather than staying pale. */
.fn--pmv4 .fn-nav { background: rgba(42, 6, 6, .88); border-bottom-color: var(--line); }
.fn--pmv4 .fn-nav__drawer { background: rgba(42, 6, 6, .97); }
.fn--pmv4 .fn-nav__links a { color: var(--ink-3); }
.fn--pmv4 .fn-nav__links a:hover { color: var(--gold); }
.fn--pmv4 .fn-mnav { background: rgba(42, 6, 6, .96); border-top-color: var(--line); }

/* ── Star field ─────────────────────────────────────────────────────── */
/* Off again. A star field is light-on-dark; on white the points are either
   invisible or grubby specks. The orrery carries the astronomy alone. */
.fn--pmv4 .fn-stars { display: none; }


/* ── Credential surfaces ────────────────────────────────────────────── */
/* The minimal pass stripped the fill and border off every card and let the
   space do the separating. On the dark build that read as restraint; on cream
   it reads as unstyled — icon, bold line, grey line, floating on the ground
   with nothing holding them together.

   So the surface comes back, but as this palette's card rather than the base
   sheet's: near-white lifted off the cream ground, a hairline, a barely-there
   shadow, and 3px corners instead of the base's 18–24px. */
.fn--pmv4 .fn-card,
.fn--pmv4 .fn-dcard,
.fn--pmv4 .fn-who,
.fn--pmv4 .fn-modcard {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 30px 26px;
    box-shadow: 0 10px 28px -20px rgba(0, 0, 0, .45);
}

/* The icon gets a disc to sit in. Bare glyphs on a bare ground were half the
   reason these sections looked unfinished. */
.fn--pmv4 .fn-card__glyph,
.fn--pmv4 .fn-dcard .fn-tile,
.fn--pmv4 .fn-who .fn-tile,
.fn--pmv4 .fn-facts .fn-tile {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0 auto 18px;
    border-radius: 999px;
    background: rgba(245, 197, 24, .1);
    border: 1px solid rgba(245, 197, 24, .18);
    color: var(--gold);
}
.fn--pmv4 .fn-card__glyph svg,
.fn--pmv4 .fn-facts .fn-tile svg { width: 20px; height: 20px; }

.fn--pmv4 .fn-card__title,
.fn--pmv4 .fn-dcard__title,
.fn--pmv4 .fn-who__title,
.fn--pmv4 .fn-fact__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.12rem;
    color: var(--ink);
}

/* ── The fact bar ───────────────────────────────────────────────────── */
/* One contained panel with the four facts divided by hairlines, rather than
   four columns of loose text between two long rules. The dividers are drawn on
   the items so they stop at the panel's padding instead of running its full
   height, and they unwind in step with the base sheet's own breakpoints —
   4 columns, then 2, then 1. */
.fn--pmv4 .fn-facts {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 34px 0;
    box-shadow: 0 10px 28px -20px rgba(0, 0, 0, .45);
}
.fn--pmv4 .fn-fact {
    padding: 4px 24px;
    border-right: 1px solid var(--line);
}
.fn--pmv4 .fn-fact:last-child { border-right: 0; }
.fn--pmv4 .fn-fact__sub {
    margin-top: 6px;
    font-size: .8rem;
    color: var(--ink-3);
}

@media (max-width: 900px) {
    /* two up: the second of each pair loses its divider, the first row gains a
       floor. */
    .fn--pmv4 .fn-facts { padding: 26px 0; }
    .fn--pmv4 .fn-fact { padding-block: 18px; }
    .fn--pmv4 .fn-fact:nth-child(2n) { border-right: 0; }
    .fn--pmv4 .fn-fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
    /* TWO UP. The base sheet goes to one column here, which gave four short
       facts a full screen width each and made the strip four tall blocks of
       mostly nothing. Two columns halves its height and the facts still fit:
       the longest is "ISO 9001:2015 / Certified institution". */
    .fn--pmv4 .fn-facts {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        padding: 20px 0;
    }
    /* A 2x2 needs the rules on two axes: a right edge on the left-hand cell
       of each row, and a floor under the first row only. */
    .fn--pmv4 .fn-fact {
        padding: 16px 10px;
        border-right: 1px solid var(--line);
        border-bottom: 0;
    }
    .fn--pmv4 .fn-fact:nth-child(2n) { border-right: 0; }
    .fn--pmv4 .fn-fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

    /* the disc and type come down with the cell */
    .fn--pmv4 .fn-facts .fn-tile {
        width: 38px;
        height: 38px;
        margin-bottom: 12px;
    }
    .fn--pmv4 .fn-facts .fn-tile svg { width: 17px; height: 17px; }
    .fn--pmv4 .fn-fact__title { font-size: 1rem; }
    .fn--pmv4 .fn-fact__sub { font-size: .74rem; line-height: 1.45; }
}


/* ── Inclusions ─────────────────────────────────────────────────────── */
/* The rainbow had a cause: inclusions.blade.php cycles six tone classes down
   the list, and .fn-incl::before paints a 4px left bar from whichever --incl
   they set. On the other funnel that is a deliberate spectrum; here it left
   violet, red, blue, magenta and green stripes running down a gold page,
   because I had never overridden the six variants.

   Rather than retint six classes, --incl is set once on .fn-incl itself. The
   tone classes still land on the element but have nothing left to say, so the
   list cannot go rainbow again if someone adds a seventh tone.

   The rest matches the credential cards: a near-white panel on the cream, a
   hairline, 3px corners, and the tick in the same gold disc the section icons
   use — so the two bands read as one system rather than two. */



/* ── Benefits & alumni ──────────────────────────────────────────────── */
/* The same leak as the inclusions, twice more.
   
   .fn-bcard::before paints a 4px top rule from --bcard, and the three tone
   classes set it to violet-to-magenta-to-red gradients. .fn-person::before
   washes a violet radial behind each portrait. Neither was overridden, so a
   gold page had a magenta rule across one card and a violet haze behind the
   acharyas.
   
   Both are pinned at the parent rather than retinted variant by variant: set
   --bcard and --btick once on .fn-bcard and the tone classes have nothing left
   to say, so a fourth tone could be added tomorrow without reintroducing this. */
/* ── Benefits ───────────────────────────────────────────────────────── */
/* The two cards address two different people — someone who has never cast a
   chart, and someone who reads them for a living — so they are a matched PAIR,
   not a ranking. That decides most of the design: same panel, same corners,
   same weight, and the difference carried by the icon and the title, which is
   the part that actually differs. Making one of them darker or louder would
   have said "this one is the better option", which is not true of either.

   THE ICON GETS A DISC. .fn-tile has a disc in the Discover, who-for and facts
   grids but not here, so a bare gold glyph floated next to a 1.3rem display
   title with nothing holding it. That one omission was most of why the card
   read as unfinished.

   THE HEAD GETS A RULE under it. Head and list ran together as one block of
   text; the hairline says the title labels the list below it.

   GRID--2 IS NOT RESPONSIVE in the base sheet — it is two columns at every
   width, including phones, where two of these sat side by side at about 160px
   each. It stacks below 820px now. Same omission as the syllabus grid had.

   The rainbow guard stays and still matters: .fn-bcard::before paints its top
   rule from --bcard and the tone classes set violet/magenta/red gradients, so
   --bcard and --btick are pinned once here rather than retinted per variant. A
   fourth tone could be added tomorrow without reintroducing it. */
.fn--pmv4 #benefits .fn-bcard {
    --bcard: var(--grad);
    --btick: var(--gold);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 34px 32px 36px;
    box-shadow: 0 4px 16px -10px rgba(0, 0, 0, .38);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
                box-shadow .45s cubic-bezier(.22, 1, .36, 1),
                border-color .35s ease,
                opacity .6s ease;
}
.fn--pmv4 #benefits .fn-bcard:hover {
    transform: translateY(-5px);
    border-color: rgba(232, 180, 6, .5);
    box-shadow: 0 22px 44px -24px rgba(0, 0, 0, .55);
    /* the stagger below is for arriving, not for hovering */
    transition-delay: 0s;
}
.fn--pmv4 #benefits .fn-bcard::before { height: 3px; }

/* Stacks on phones. */
.fn--pmv4 #benefits .fn-grid--2 { gap: 22px; }
@media (max-width: 820px) {
    .fn--pmv4 #benefits .fn-grid--2 { grid-template-columns: 1fr; }
}

/* ── The head ───────────────────────────────────────────────────────── */
.fn--pmv4 #benefits .fn-bcard__head {
    gap: 16px;
    margin-bottom: 0;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
}
.fn--pmv4 #benefits .fn-bcard__title {
    font-weight: 400;
    color: var(--ink);
    font-size: 1.26rem;
    line-height: 1.25;
    text-wrap: balance;
}

/* The disc the base never gave this tile. #2A0606 on the filled gold measures
   7.2:1. */
.fn--pmv4 #benefits .fn-tile {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 999px;
    background: rgba(245, 197, 24, .1);
    border: 1px solid rgba(245, 197, 24, .2);
    color: var(--gold);
    box-shadow: none;
    transition: background .35s ease, border-color .35s ease,
                color .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.fn--pmv4 #benefits .fn-tile svg { width: 22px; height: 22px; }
.fn--pmv4 #benefits .fn-bcard:hover .fn-tile {
    background: var(--brand);
    border-color: var(--brand);
    color: #2A0606;
    transform: scale(1.06);
}

/* ── The list ───────────────────────────────────────────────────────── */
.fn--pmv4 #benefits .fn-bticks {
    gap: 17px;
    margin-top: 24px;
}
.fn--pmv4 #benefits .fn-bticks li {
    color: var(--ink-2);
    transition: color .3s ease;
}
.fn--pmv4 #benefits .fn-bticks li:hover { color: var(--ink); }
/* white on #815905 measures 6.2:1 */
.fn--pmv4 #benefits .fn-btick {
    width: 24px;
    height: 24px;
    margin-top: 2px;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.fn--pmv4 #benefits .fn-btick svg { width: 13px; height: 13px; }
.fn--pmv4 #benefits .fn-bticks li:hover .fn-btick { transform: scale(1.15); }

/* ── The staggered arrival ──────────────────────────────────────────── */
.fn--pmv4 #benefits .fn-bcard:nth-child(1) { transition-delay: 0s; }
.fn--pmv4 #benefits .fn-bcard:nth-child(2) { transition-delay: .1s; }

@media (prefers-reduced-motion: reduce) {
    .fn--pmv4 #benefits .fn-bcard,
    .fn--pmv4 #benefits .fn-tile,
    .fn--pmv4 #benefits .fn-bticks li,
    .fn--pmv4 #benefits .fn-btick {
        transition: none;
        transition-delay: 0s;
    }
    .fn--pmv4 #benefits .fn-bcard:hover { transform: none; }
    .fn--pmv4 #benefits .fn-bcard:hover .fn-tile { transform: none; }
    .fn--pmv4 #benefits .fn-bticks li:hover .fn-btick { transform: none; }
}

@media (max-width: 600px) {
    .fn--pmv4 #benefits .fn-bcard { padding: 26px 22px 28px; }
    .fn--pmv4 #benefits .fn-tile { width: 44px; height: 44px; }
    .fn--pmv4 #benefits .fn-tile svg { width: 20px; height: 20px; }
}

.fn--pmv4 .fn-person {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 3px;
    box-shadow: 0 10px 28px -20px rgba(0, 0, 0, .45);
}
/* the violet bloom behind each portrait */
.fn--pmv4 .fn-person::before {
    background: radial-gradient(60% 60% at 50% 60%, rgba(245, 197, 24, .1), transparent 70%);
}
.fn--pmv4 .fn-person__name { font-weight: 400; color: var(--ink); }
.fn--pmv4 .fn-person__role { color: var(--ink-3); opacity: 1; }
.fn--pmv4 .fn-person__stars { color: var(--brand); }
/* the portrait placeholder behind a transparent or slow-loading image */
.fn--pmv4 .fn-person img { background: var(--void-2); }

/* ── Form alerts ────────────────────────────────────────────────────── */
/* Semantic, so they stay green and red rather than following the gold —
   success and failure must not look like brand decoration.

   They were inverted once for a near-white form card — dark type on a pale
   wash — because the base sheet's light-on-dark version measured about
   1.5:1 there. The card is maroon again, so they are back to a dark wash
   carrying light type. These are the two messages that tell someone whether
   their registration went through, so they are measured, not eyeballed. */
.fn--pmv4 .fn-alert { border-radius: 2px; }
.fn--pmv4 .fn-alert--ok {
    background: rgba(28, 120, 62, .18);
    border-color: rgba(88, 200, 130, .45);
    color: #8FE3AD;            /* 8.4:1 on the wash over the panel */
}
.fn--pmv4 .fn-alert--bad {
    background: rgba(168, 30, 30, .22);
    border-color: rgba(226, 120, 120, .45);
    color: #FF9B7A;            /* 5.8:1 on the wash; the dark #9F1616 this
                                  replaces measured 1.5:1 once the wash went
                                  dark — invisible, on the one message that
                                  says a registration failed */
}


/* ── FAQ ────────────────────────────────────────────────────────────── */
/* Two things were wrong and one was missing.
   
   WRONG: the base sets .fn-faq__q to color:#fff — white questions on a cream
   band, unreadable. And the open sign's background is rgba(109,92,240,.3),
   the other funnel's violet.
   
   MISSING: it never animated. The base toggles .fn-faq__a between display:none
   and display:block, and display cannot transition, so answers appeared and
   vanished instantly.
   
   The usual fix is grid-template-rows 0fr→1fr, but that needs the content to
   be a real grid item and faq.blade.php puts the answer in as a bare text
   node — an anonymous item, which cannot take the min-height:0 that makes the
   collapse work. So this animates max-height instead, capped well above any
   real answer, with opacity and a small lift to carry the motion. */
.fn--pmv4 .fn-faq { gap: 10px; }

.fn--pmv4 .fn-faq__item {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 3px;
    overflow: hidden;
    transition: border-color .22s ease, box-shadow .22s ease;
}
.fn--pmv4 .fn-faq__item:hover { border-color: var(--line-2); }
.fn--pmv4 .fn-faq__item.is-open {
    background: var(--panel);
    border-color: var(--line-2);
    box-shadow: 0 10px 28px -20px rgba(0, 0, 0, .45);
}

.fn--pmv4 .fn-faq__q {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.06rem;
    color: var(--ink);
    padding: 20px 22px;
}

/* The sign: a gold disc that turns into a minus as it opens. */
.fn--pmv4 .fn-faq__sign {
    width: 32px;
    height: 32px;
    background: rgba(245, 197, 24, .1);
    border: 1px solid rgba(245, 197, 24, .2);
    color: var(--gold);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1),
                background .22s ease,
                border-color .22s ease;
}
.fn--pmv4 .fn-faq__q[aria-expanded="true"] .fn-faq__sign {
    background: var(--brand);
    border-color: var(--brand);
    color: #2A0606;
    transform: rotate(135deg);
}

/* The answer. Always in the DOM so it has something to transition from —
   max-height is capped far above any real answer, since a transition needs a
   concrete end value and auto is not one. */
.fn--pmv4 .fn-faq__a {
    display: block;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(-4px);
    color: var(--ink-2);
    transition: max-height .34s cubic-bezier(.4, 0, .2, 1),
                opacity .22s ease .04s,
                padding .34s cubic-bezier(.4, 0, .2, 1),
                transform .3s cubic-bezier(.4, 0, .2, 1);
}
.fn--pmv4 .fn-faq__item.is-open .fn-faq__a {
    display: block;
    max-height: 420px;
    opacity: 1;
    padding-bottom: 22px;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .fn--pmv4 .fn-faq__a,
    .fn--pmv4 .fn-faq__sign { transition: none; }
}


/* ── Certificate ────────────────────────────────────────────────────── */
/* The badge was the bug. The base sets color:#fff on it because it sat on a
   near-black #14113b chip; I retinted the chip to a pale panel and left the
   white type, so it read as a ghost box over the corner of the artwork. It
   takes the same gold-fill / dark-type pairing as the buttons — 7.2:1, where
   white on that fill is 1.9:1.

   The ticks were transparent with the base's drop shadow still underneath,
   which is what made them look like pale floating squares. They join the gold
   discs the rest of the page now uses. */
.fn--pmv4 .fn-certframe__badge {
    background: var(--brand);
    border: 0;
    border-radius: 999px;
    color: #2A0606;
    font-weight: 700;
    box-shadow: 0 10px 24px -12px rgba(192, 138, 8, .7);
}
.fn--pmv4 .fn-check {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: rgba(245, 197, 24, .1);
    border: 1px solid rgba(245, 197, 24, .18);
    color: var(--gold);
    box-shadow: none;
}
.fn--pmv4 .fn-check svg { width: 17px; height: 17px; }
.fn--pmv4 .fn-checks__t {
    color: var(--ink);
    font-weight: 400;
    font-family: var(--font-display);
}
.fn--pmv4 .fn-certframe { padding: 12px; border-radius: 3px; }
.fn--pmv4 .fn-certframe img { border-radius: 2px; }

/* ── Mentor ─────────────────────────────────────────────────────────── */
/* Wider than the rest of the page. The theme narrows --maxw to 1040px, which
   suits running text but crowds this one section: it is a portrait beside a
   bio, and the portrait column eats most of the width before the text starts.
   Widened here only, so every other section keeps its measure. */
.fn--pmv4 #mentor .fn-container { max-width: 1180px; }



/* In flow, so it keeps its place with or without a picture above it. */
/* Only the TITLE has to clear the tag in the corner; the paragraph below it
   does not. Reserving the gutter on the whole body cost every card a third of
   its width once the grid went three across, and the detail text wrapped to
   three or four words a line. */

/* Cards size to their own content here rather than stretching to the tallest
   in the row — with six short entries the stretch left a band of dead space
   under every one of them. Scoped to this section so the benefits cards, which
   should match each other, still do. */


/* ── Footer ─────────────────────────────────────────────────────────── */
/* Consolidated: three palette passes had each left a footer block behind, so
   .fn-footer was declared three times and .fn-footer__socials a and
   .fn-fcontact__icon twice each. Later ones won and the rest were dead weight.

   It takes the same deep warm dark as the countdown bar. That is deliberate
   rather than a second opinion about the page: the page now has ONE dark
   register and uses it exactly twice — the bar that floats over the content,
   and the block that closes it. On cream the footer measured 1.2:1 against the
   section above and simply dissolved; here it ends the page.

   Everything inside inverts with it, because on the light theme --ink and
   --ink-3 are the dark values and would vanish on this ground. */
.fn--pmv4 .fn-footer {
    background: #2A0606;
    color: #D8C3A4;
    border-top: 0;
}
.fn--pmv4 .fn-footer__name { color: #FFF3DF; font-weight: 400; }
.fn--pmv4 .fn-footer__blurb { color: #D8C3A4; }
.fn--pmv4 .fn-footer h4 {
    color: #F5C518;
    font-weight: 700;
    letter-spacing: .2em;
}
.fn--pmv4 .fn-footer a { color: #EFDCC2; }
.fn--pmv4 .fn-footer a:hover { color: #FFD24A; }
.fn--pmv4 .fn-footer__credit { color: #F5C518; font-weight: 600; }
.fn--pmv4 .fn-footer__bottom { color: #BCA98C; border-top-color: rgba(245, 197, 24, .18); }

/* The logo tile is #fff in the base, which is right here — it is a white
   lock-up and needs its own ground. */
.fn--pmv4 .fn-footer__logo { border-radius: 3px; }

.fn--pmv4 .fn-footer__socials a {
    background: rgba(245, 197, 24, .08);
    border: 1px solid rgba(245, 197, 24, .22);
    border-radius: 999px;
    color: #F5C518;
}
.fn--pmv4 .fn-footer__socials a:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #2A0606;
}

.fn--pmv4 .fn-fcontact__icon,
.fn--pmv4 .fn-fcontact__icon--mail,
.fn--pmv4 .fn-fcontact__icon--web {
    background: rgba(245, 197, 24, .1);
    color: #F5C518;
    border-radius: 999px;
}
/* WhatsApp keeps WhatsApp's green here too — it is the one row where the
   colour is the label. */
.fn--pmv4 .fn-fcontact__icon--wa {
    background: rgba(37, 211, 102, .14);
    color: #4BE08C;
}

/* The CTA was inline text, so "Reserve My Spot · ₹96 + GST" wrapped mid-price
   across two lines. Made a real button and kept on one line. */
.fn--pmv4 .fn-footer .fn-footer__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 11px 20px;
    border-radius: 999px;
    background: var(--grad-cta);
    color: #2A0606;
    font-weight: 700;
    font-size: .84rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.fn--pmv4 .fn-footer .fn-footer__cta:hover { color: #2A0606; filter: brightness(1.07); }


/* =====================================================================
   PAGE RHYTHM — everything below the hero
   =====================================================================
   The page had been fixed section by section over many passes, and it
   showed: eleven sections, every one a centred heading over a grid of
   near-identical cards on a near-identical ground. Individually each was
   fine; in sequence they read as one long undifferentiated scroll.

   This gives the page a structure instead:

     · GROUND alternates cream / band down the page, so sections read as
       separate movements rather than one field
     · ONE DARK SECTION punctuates it — the mentor, which is the human
       moment and the natural place for the page to change register
     · CARDS ONLY WHERE THEY EARN IT. Short facts (credibility, who-for)
       lose their panels: a border round three words is noise. The lists
       and the syllabus keep theirs, because a card is what makes a list
       scannable.
     · TIGHTER VERTICAL RHYTHM, 140px down to 104px. At 140 the page was
       mostly gaps.

   The hero is untouched: nothing here names .fn-hero, .fn-orbits,
   .fn-orbit or .fn-planet.
   ===================================================================== */

.fn--pmv4 .fn-section { padding-block: 104px; }
.fn--pmv4 .fn-section--tight { padding-block: 76px; }

/* ── Ground alternation ─────────────────────────────────────────────── */
.fn--pmv4 #certificate {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* ── The one dark section ───────────────────────────────────────────── */
/* Same ground as the countdown bar and the footer, so the page has a single
   dark register used deliberately rather than three different darks. */
.fn--pmv4 #mentor {
    border-block: 0;
    padding-block: 120px;
}
.fn--pmv4 #mentor .fn-eyebrow { color: #F5C518; }
.fn--pmv4 #mentor .fn-h2,
.fn--pmv4 #mentor .fn-mentor__name,
.fn--pmv4 #mentor .fn-mentor__quote { color: #FFF3DF; }
.fn--pmv4 #mentor .fn-lead,
.fn--pmv4 #mentor .fn-mentor__bio { color: #D8C3A4; }
.fn--pmv4 #mentor .fn-mentor__bio strong { color: #FFF3DF; }
.fn--pmv4 #mentor .fn-mentor__role,
.fn--pmv4 #mentor .fn-consult__title { color: #F5C518; }
.fn--pmv4 #mentor .fn-consult__text { color: #D8C3A4; }
/* the card sits ON the dark now, so it lifts rather than sinks */
.fn--pmv4 #mentor .fn-mentorcard {
    background: #5E1212;
    border-color: rgba(245, 197, 24, .2);
    box-shadow: none;
}
/* OPAQUE, because these sit over the portrait. A translucent fill reads against
   whatever the photograph happens to put behind it, and behind these two it is
   a white shirt — a 10% gold wash with gold type on it was simply not there.
   The scrim is dark enough to hold its own contrast over any part of any
   photo: 8.9:1 over pure white, more over anything darker. The gold stays on
   the border, where it costs nothing to read. */
.fn--pmv4 #mentor .fn-mentor__badge {
    background: rgba(30, 6, 6, .84);
    border-color: rgba(245, 197, 24, .45);
    color: #FFF3DF;
    backdrop-filter: blur(4px);
}
.fn--pmv4 #mentor .fn-consult {
    background: rgba(245, 197, 24, .07);
    border-color: rgba(245, 197, 24, .28);
}
.fn--pmv4 #mentor .fn-mentor__rule { border-top-color: rgba(245, 197, 24, .5); }
/* the grad-text heading accent is a dark gold, invisible on this ground */
.fn--pmv4 #mentor .fn-grad-text {
    background: none;
    -webkit-text-fill-color: #F5C518;
    color: #F5C518;
}

/* ── Who Should Attend ──────────────────────────────────────────────── */
/* THE PANELS COME BACK. An earlier pass stripped them on the grounds that a
   border around three words is chrome — which was right about the credibility
   facts and wrong about these. Each of these carries a display-face title AND
   a sentence, which is enough to be an object; without a panel the four had no
   edges at all, so nothing held them and every ragged wrap was on show.

   (The credibility half of that rule went with it: that section is no longer
   included in the page, so the selector had nothing to style.)

   THE RAGGED BASELINES were the visible bug. "Practising Professionals" is the
   only one of the four titles that wraps, so its body text started a line lower
   than the other three and the row looked broken. The title now reserves two
   lines whether it needs them or not, so all four titles start at one height
   and all four bodies start at another.

   They are four PARALLEL audiences, not a ladder — beginner, intermediate and
   practising form a progression but "career changers" is a motive, not a level
   — so there is no numbering and no connecting line. Four equal cards. */
.fn--pmv4 #whofor .fn-who {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 4px 16px -10px rgba(0, 0, 0, .38);
    padding: 32px 24px 30px;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
                box-shadow .45s cubic-bezier(.22, 1, .36, 1),
                border-color .35s ease,
                opacity .6s ease;
}
.fn--pmv4 #whofor .fn-who:hover {
    transform: translateY(-5px);
    border-color: rgba(232, 180, 6, .5);
    box-shadow: 0 22px 44px -24px rgba(0, 0, 0, .55);
    /* the stagger below is for arriving, not for hovering */
    transition-delay: 0s;
}

/* Two lines reserved, so the bodies line up across the row. */
.fn--pmv4 #whofor .fn-who__title {
    min-height: 2.6em;
    margin-bottom: 10px;
    line-height: 1.3;
    text-wrap: balance;
}

/* The disc fills as the card lifts. #2A0606 on brand gold measures 7.2:1. */
.fn--pmv4 #whofor .fn-tile {
    transition: background .35s ease, border-color .35s ease,
                color .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.fn--pmv4 #whofor .fn-who:hover .fn-tile {
    background: var(--brand);
    border-color: var(--brand);
    color: #2A0606;
    transform: scale(1.07);
}

/* ── The staggered arrival ──────────────────────────────────────────── */
.fn--pmv4 #whofor .fn-who:nth-child(1) { transition-delay: 0s; }
.fn--pmv4 #whofor .fn-who:nth-child(2) { transition-delay: .07s; }
.fn--pmv4 #whofor .fn-who:nth-child(3) { transition-delay: .14s; }
.fn--pmv4 #whofor .fn-who:nth-child(4) { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
    .fn--pmv4 #whofor .fn-who,
    .fn--pmv4 #whofor .fn-tile {
        transition: none;
        transition-delay: 0s;
    }
    .fn--pmv4 #whofor .fn-who:hover { transform: none; }
    .fn--pmv4 #whofor .fn-who:hover .fn-tile { transform: none; }
}

@media (max-width: 640px) {
    /* one per row here, so the reserved second title line is dead space */
    .fn--pmv4 #whofor .fn-who__title { min-height: 0; }
    .fn--pmv4 #whofor .fn-who { padding: 26px 20px 24px; }
}

/* ── Heading scale ──────────────────────────────────────────────────── */
/* Every section head was the same size, so none of them led. The eyebrow
   carries the section label and the h2 comes down a step. */
.fn--pmv4 .fn-h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.fn--pmv4 .fn-eyebrow { margin-bottom: 14px; }
.fn--pmv4 .fn-lead { margin-bottom: 0; }

/* Consistent gap between a section head and whatever follows it. */
.fn--pmv4 .fn-section > .fn-container > .fn-center { margin-bottom: 44px; }


/* ── Reserve Your Seat, on the dark ─────────────────────────────────── */
/* The section ground goes to #2A0606 — the same dark the mentor block, the
   countdown bar and the footer use, so this is the page's one dark register
   and not a fourth colour.

   THE TICKET STAYS LIGHT. A near-white card on the dark is the whole point:
   it makes the form the brightest object on the page, which is what the
   conversion point should be. It also means the form's internals — labels,
   inputs, placeholders, the two alert states — keep the contrast they were
   already measured at, instead of every one of them needing to be re-solved
   against a dark ground.

   Everything OUTSIDE the ticket sits directly on the dark and is inverted
   here: the pill, the heading and its gold accent, the lead, the whole
   process line, and the two lines under the ticket. */
.fn--pmv4 #reserve {
    border-block: 0;
}

/* Section head */
.fn--pmv4 #reserve .fn-pill {
    background: rgba(245, 197, 24, .1);
    border-color: rgba(245, 197, 24, .3);
    color: #F5C518;
}
.fn--pmv4 #reserve .fn-pill__dot { background: #F5C518; }
.fn--pmv4 #reserve .fn-h2 { color: #FFF3DF; }
/* the accent is a DARK gold gradient for the light page — invisible here */
.fn--pmv4 #reserve .fn-grad-text {
    background: none;
    -webkit-text-fill-color: #F5C518;
    color: #F5C518;
}
.fn--pmv4 #reserve .fn-lead { color: #D8C3A4; }

/* The process line */
.fn--pmv4 #reserve .pmr-steps::before { background: rgba(245, 197, 24, .28); }
.fn--pmv4 #reserve .pmr-step__n {
    /* opaque, and the SAME value as the section: the axis runs behind these
       discs and would otherwise show straight through them */
    background: var(--band-card, #2A0606);
    border-color: rgba(245, 197, 24, .45);
    color: #F5C518;
}
.fn--pmv4 #reserve .pmr-step__t { color: #FFF3DF; }
.fn--pmv4 #reserve .pmr-step__x { color: #D8C3A4; }

/* The ticket keeps its light panel; only its own edge needs to read against
   the dark rather than against cream. */
.fn--pmv4 #reserve .pmr-ticket {
    border-color: rgba(245, 197, 24, .25);
    box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .6);
}

/* Below the ticket */
.fn--pmv4 #reserve .pmr-bonus {
    border-bottom-color: rgba(245, 197, 24, .22);
    color: #D8C3A4;
}
.fn--pmv4 #reserve .pmr-bonus b { color: #F5C518; }
.fn--pmv4 #reserve .pmr-contact { color: #BCA98C; }
.fn--pmv4 #reserve .pmr-contact a { color: #EFDCC2; }
.fn--pmv4 #reserve .pmr-contact a:hover { color: #FFD24A; }


/* ── What You'll Discover, on the dark ──────────────────────────────── */
/* Same #2A0606 as the Reserve section, the mentor block, the countdown bar
   and the footer — still one dark register, now used five times.

   THE CARDS GO DARK TOO, unlike the Reserve ticket which stayed light. That
   was one card holding a form, and making it the brightest thing on the page
   was the point. This is six cards in a grid; six white panels on a dark
   ground would read as a chequerboard. They take the lifted dark the mentor
   card uses, so the two dark sections belong to each other.

   Everything inside is inverted: the card title, the detail and the ghost
   numeral are all the DARK values on the light theme, and all three would be
   invisible here. */
.fn--pmv4 #discover {
    border-block: 0;
}

.fn--pmv4 #discover .fn-eyebrow { color: #F5C518; }
.fn--pmv4 #discover .fn-h2 { color: #FFF3DF; }
/* the accent is a dark-gold gradient built for cream — flat bright gold here */
.fn--pmv4 #discover .fn-grad-text {
    background: none;
    -webkit-text-fill-color: #F5C518;
    color: #F5C518;
}
.fn--pmv4 #discover .fn-lead { color: #D8C3A4; }

/* dark ink now the card is filled — 7.90:1 and 6.24:1 on the gradient's
   dark stop, which is the worst case on the card. */
.fn--pmv4 #discover .fn-dcard__title { color: #3A0808; }
.fn--pmv4 #discover .fn-dcard__text { color: #5A1410; }


/* ── Syllabus: four across, and slideable ───────────────────────────── */
/* Five cards, four to a view. That does not divide, which is exactly why this
   is a slider rather than a grid: the fifth has nowhere to sit in a four-wide
   row, and a lone card on a second row is the thing the old six-track centring
   trick existed to avoid. Scrolling sidesteps the arithmetic entirely and
   scales to a sixth vidya without another rule.

   NO SCRIPT. It is a flex row with scroll-snap, so the browser does the work:
   swipe on a phone, two-finger scroll on a trackpad, drag the bar, or tab to a
   card and let the browser scroll it into view. That matters here because
   funnel.js is shared with the other funnel and must not be touched — and a
   hand-written carousel is a keyboard-accessibility problem nobody asked for.

   THE BAR IS THE AFFORDANCE. With exactly four visible and no peek of the
   fifth, nothing would say "there is more" — so the scrollbar is styled gold
   and always present rather than left as an overlay that fades away.

   The container widens to 1180px, the same as the mentor block, because four
   of these inside the page's 1040px measure left each plate about 200px and
   the poster titles stopped reading. */
/* Widest block on the page. Four plates inside the 1040px measure left each
   one about 230px and the poster titles stopped reading; at 1320 they get
   roughly 280px, which is a fifth larger. Capped against the viewport so it
   never outgrows a narrow laptop. */
.fn--pmv4 #workshop .fn-container { max-width: min(1320px, 100%); }

.fn--pmv4 #workshop .fn-grid--2 {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--brand) rgba(245, 197, 24, .14);
}
.fn--pmv4 #workshop .fn-grid--2::-webkit-scrollbar { height: 6px; }
.fn--pmv4 #workshop .fn-grid--2::-webkit-scrollbar-track {
    background: rgba(245, 197, 24, .14);
    border-radius: 999px;
}
.fn--pmv4 #workshop .fn-grid--2::-webkit-scrollbar-thumb {
    background: var(--grad-cta);
    border-radius: 999px;
}

/* four across: the track less its three gaps, quartered */
.fn--pmv4 #workshop .fn-modcard {
    flex: 0 0 calc((100% - 54px) / 4);
    scroll-snap-align: start;
}
/* The LAST card snaps by its end, not its start. Under mandatory snap the
   rest position has to BE a snap point, and the far end of the track is 290px
   in while the fifth card starts about 1200px in — so with start-alignment
   throughout, the end of the track was not a legal place to stop and the
   browser sprang back to zero. End-aligning the last card makes the far end a
   snap point and the fifth vidya reachable. */
.fn--pmv4 #workshop .fn-modcard:last-child { scroll-snap-align: end; }

@media (max-width: 1100px) {
    /* three: two gaps */
    .fn--pmv4 #workshop .fn-modcard { flex-basis: calc((100% - 36px) / 3); }
}
@media (max-width: 860px) {
    /* two, with the next card peeking so the swipe is obvious on touch */
    .fn--pmv4 #workshop .fn-modcard { flex-basis: calc((100% - 18px) / 2 - 22px); }
}
@media (max-width: 560px) {
    .fn--pmv4 #workshop .fn-modcard { flex-basis: 78%; }
}

@media (prefers-reduced-motion: reduce) {
    .fn--pmv4 #workshop .fn-grid--2 { scroll-behavior: auto; }
}


/* ── Discover cards ─────────────────────────────────────────────────── */
/* Rounded, lit, and animated on two axes.

   TWO BUGS GO WITH IT, both from the base sheet rather than from the theme:

   · .fn-dcard__num already carries opacity: .05, so the theme's
     rgba(242,183,5,.14) numeral was resolving to seven THOUSANDTHS of alpha.
     It was in the markup and in the CSS and was never once drawn. The colour
     is opaque now and the opacity carries the ghosting, which is the one
     place it can be tuned.
   · .fn-dcard sets a `transition` SHORTHAND covering only transform and
     border-color, and it sits later in the file than .fn-reveal at equal
     specificity — so it was wiping .fn-reveal's opacity transition and these
     six cards were snapping in while every other revealed block on the page
     faded. Naming opacity below restores the fade.

   THE ENTRANCE then reuses that machinery rather than adding any. Each card
   carries .fn-reveal, which funnel.js flips to .is-in through an
   IntersectionObserver. Giving each card a transition-DELAY turns one fade
   into a staggered cascade — six cards arriving in sequence, no new keyframes
   and no new script.

   THE HOVER is a lift, a gold edge, a sweep of light along the top that opens
   from the centre, and the icon disc filling. All transform and opacity, so
   none of it costs a layout.

   Everything is off under prefers-reduced-motion, the stagger included — a
   delayed fade is still motion to someone who asked for none. */
.fn--pmv4 #discover .fn-dcard {
    border-radius: 14px;
    border: 1px solid rgba(58, 8, 8, .22);
    background: linear-gradient(162deg, #F7CE3A 0%, #E2A505 100%);
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .6);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
                box-shadow .45s cubic-bezier(.22, 1, .36, 1),
                border-color .35s ease,
                opacity .6s ease;
}

/* The light along the top edge, scaled from the centre so it opens outward
   rather than wiping in from one side. */
.fn--pmv4 #discover .fn-dcard::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3A0808, transparent);
    transform: scaleX(0);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.fn--pmv4 #discover .fn-dcard:hover {
    transform: translateY(-6px);
    border-color: rgba(58, 8, 8, .5);
    box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .75),
                0 0 0 1px rgba(58, 8, 8, .16);
    /* the delay is for arriving, not for hovering — a third of a second
       before a card answers the cursor would read as broken */
    transition-delay: 0s;
}
.fn--pmv4 #discover .fn-dcard:hover::after { transform: scaleX(1); }

/* The icon disc: gold on dark rather than gold on cream, and it fills as the
   card lifts. #2A0606 on #F5C518 measures 9.4:1. */
.fn--pmv4 #discover .fn-tile {
    /* the shared disc rule uses `margin: 0 auto` because .fn-who and
       .fn-facts are centred layouts. A dcard is not — its title and text
       are flush left, and the disc was floating out to the middle above
       them. The ID beats that rule, so the correction belongs here. */
    margin-inline: 0;
    background: #3A0808;
    border-color: rgba(58, 8, 8, .35);
    color: #F5C518;
    transition: background .35s ease, border-color .35s ease,
                color .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.fn--pmv4 #discover .fn-dcard:hover .fn-tile {
    background: #2A0606;
    border-color: #2A0606;
    color: #F5C518;
    transform: translateY(-2px) scale(1.06);
}

/* The oversized ghost numeral, finally visible. */
.fn--pmv4 #discover .fn-dcard__num {
    color: #3A0808;
    opacity: .16;
    transition: opacity .35s ease;
}
.fn--pmv4 #discover .fn-dcard:hover .fn-dcard__num { opacity: .32; }

/* The staggered arrival. */
.fn--pmv4 #discover .fn-dcard:nth-child(1) { transition-delay: 0s; }
.fn--pmv4 #discover .fn-dcard:nth-child(2) { transition-delay: .07s; }
.fn--pmv4 #discover .fn-dcard:nth-child(3) { transition-delay: .14s; }
.fn--pmv4 #discover .fn-dcard:nth-child(4) { transition-delay: .21s; }
.fn--pmv4 #discover .fn-dcard:nth-child(5) { transition-delay: .28s; }
.fn--pmv4 #discover .fn-dcard:nth-child(6) { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
    .fn--pmv4 #discover .fn-dcard,
    .fn--pmv4 #discover .fn-dcard::after,
    .fn--pmv4 #discover .fn-dcard .fn-tile,
    .fn--pmv4 #discover .fn-dcard__num {
        transition: none;
        transition-delay: 0s;
    }
    .fn--pmv4 #discover .fn-dcard:hover { transform: none; }
    .fn--pmv4 #discover .fn-dcard::after { transform: scaleX(1); opacity: .5; }
}


/* ── Everything You Get ─────────────────────────────────────────────── */
/* Six equal cards, three down each column.

   An earlier pass featured the job guarantee as a full-width panel and set the
   other five as plain hairline rows. The client wanted the grid balanced and
   the featured treatment given to every item, so the gold panel IS the row
   style now: same gradient, same 14px corners, same rail, same filled tick.
   Six items in a 1fr 1fr grid fall 3 and 3 on their own — no spanning rules,
   no orphan handling, and nothing that breaks if the list changes length.

   Row heights come from the grid, so the two cards in a row always share an
   edge even when one is a line shorter; .fn-incl is flex with align-items:
   center, so the short one centres in its card rather than sitting at the top.

   The rainbow guard still matters: the blade cycles six tone classes down the
   list and .fn-incl::before paints from whichever --incl they set, so --incl
   is pinned once here rather than retinting six variant classes. */
.fn--pmv4 #inclusions {
    border-block: 0;
    padding-block: 104px;
}

/* Section head, inverted off the cream values. */
.fn--pmv4 #inclusions .fn-eyebrow { color: #F5C518; }
.fn--pmv4 #inclusions .fn-h2 { color: #FFF3DF; }
/* the accent is a dark-gold gradient built for cream — flat bright gold here */
.fn--pmv4 #inclusions .fn-grad-text {
    background: none;
    -webkit-text-fill-color: #F5C518;
    color: #F5C518;
}
.fn--pmv4 #inclusions .fn-lead { color: #D8C3A4; }

.fn--pmv4 #inclusions .fn-incls {
    gap: 20px;
    margin-top: 42px;
}

/* The card. #FFF3DF on the composited gold panel measures 11.1:1. */
.fn--pmv4 #inclusions .fn-incl {
    --incl: #F5C518;
    border: 1px solid rgba(245, 197, 24, .3);
    border-radius: 14px;
    padding: 24px 26px 24px 28px;
    background: linear-gradient(100deg, rgba(245, 197, 24, .12), rgba(245, 197, 24, .03) 64%);
    color: #FFF3DF;
    font-size: 1rem;
    box-shadow: 0 2px 12px -8px rgba(0, 0, 0, .5);
    transition: background .35s ease, border-color .35s ease,
                transform .45s cubic-bezier(.22, 1, .36, 1),
                box-shadow .45s cubic-bezier(.22, 1, .36, 1),
                opacity .6s ease;
}
.fn--pmv4 #inclusions .fn-incl:hover {
    background: linear-gradient(100deg, rgba(245, 197, 24, .17), rgba(245, 197, 24, .05) 64%);
    border-color: rgba(245, 197, 24, .5);
    transform: translateY(-4px);
    box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .65);
    /* the delay below is for arriving, not for hovering */
    transition-delay: 0s;
}

/* The gold rail down the left edge, clipped to the corners by the base's
   overflow: hidden. */
.fn--pmv4 #inclusions .fn-incl::before {
    width: 3px;
    background: #F5C518;
}

/* The filled tick: #2A0606 on #F5C518 measures 8.4:1. */
.fn--pmv4 #inclusions .fn-incl__tick {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #F5C518;
    border: 1px solid #F5C518;
    color: #2A0606;
    box-shadow: none;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.fn--pmv4 #inclusions .fn-incl__tick svg { width: 21px; height: 21px; }
.fn--pmv4 #inclusions .fn-incl:hover .fn-incl__tick { transform: scale(1.09); }

/* ── The staggered arrival ──────────────────────────────────────────── */
/* Same mechanism as the Discover cards: .fn-reveal is already on every row,
   and a transition-delay turns one fade into a cascade. Paired down the two
   columns so each ROW arrives together rather than the left column landing
   entirely before the right one starts. */
.fn--pmv4 #inclusions .fn-incl:nth-child(1),
.fn--pmv4 #inclusions .fn-incl:nth-child(2) { transition-delay: 0s; }
.fn--pmv4 #inclusions .fn-incl:nth-child(3),
.fn--pmv4 #inclusions .fn-incl:nth-child(4) { transition-delay: .09s; }
.fn--pmv4 #inclusions .fn-incl:nth-child(5),
.fn--pmv4 #inclusions .fn-incl:nth-child(6) { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
    .fn--pmv4 #inclusions .fn-incl,
    .fn--pmv4 #inclusions .fn-incl__tick {
        transition: none;
        transition-delay: 0s;
    }
    .fn--pmv4 #inclusions .fn-incl:hover { transform: none; }
    .fn--pmv4 #inclusions .fn-incl:hover .fn-incl__tick { transform: none; }
}

@media (max-width: 860px) {
    .fn--pmv4 #inclusions { padding-block: 72px; }
    .fn--pmv4 #inclusions .fn-incls { gap: 14px; }
    .fn--pmv4 #inclusions .fn-incl { padding: 19px 18px 19px 20px; }
    .fn--pmv4 #inclusions .fn-incl__tick { width: 38px; height: 38px; }
    .fn--pmv4 #inclusions .fn-incl__tick svg { width: 18px; height: 18px; }
}


/* ── Syllabus cards ─────────────────────────────────────────────────── */
/* The card is a GRID, not the base's flex row. That is load-bearing: as flex,
   the portrait became an item sitting BESIDE the numeral rather than a band
   across the top. As a grid the picture is a normal row that spans both
   columns, and the numeral keeps its place whether or not an image loads
   above it.

   Rebuilt to match the cards the rest of the page now uses — 14px corners, a
   lift, a gold edge — and to fix three things visible in the old ones.

   THE RAGGED TITLE. "Vedic Astrology · Parashari" was breaking after the
   separator, leaving a dangling middot at the end of line one, because the
   title reserved a 62px gutter for the VIDYA pill and that gutter applies to
   EVERY line, not just the one the pill overlaps. text-wrap: balance splits
   the title evenly instead, and the reserved gutter comes down to the pill's
   actual width.

   THE RAGGED BOTTOMS. The cards sized to their own content, so three in a row
   ended at three different heights. That rule was written when this was a
   two-column grid of six short entries where stretching left dead space; at
   three across with real sentences it just looks unfinished. They stretch now.

   THE UNCLIPPED PICTURE. .fn-modcard__pic bleeds to the card edge with
   negative margins, and the card had no overflow: hidden — invisible at a 3px
   radius, a square corner poking out of a rounded card at 14px. The card
   clips now, which the top rail needs anyway.

   The pill itself goes quiet: it and the numeral disc say the same thing, so
   only one of them should be loud. */
.fn--pmv4 #workshop .fn-grid--2 { align-items: stretch; }

.fn--pmv4 #workshop .fn-modcard {
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: start;
    gap: 0 14px;
    overflow: hidden;
    padding: 18px 18px 22px;
    border-radius: 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: 0 2px 10px -6px rgba(0, 0, 0, .32);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
                box-shadow .45s cubic-bezier(.22, 1, .36, 1),
                border-color .35s ease,
                opacity .6s ease;
}
.fn--pmv4 #workshop .fn-modcard:hover {
    transform: translateY(-5px);
    border-color: rgba(232, 180, 6, .5);
    box-shadow: 0 18px 36px -20px rgba(0, 0, 0, .55);
    /* the stagger below is for arriving, not for hovering */
    transition-delay: 0s;
}

/* The gold rail across the top, opening from the centre — the same gesture as
   the Discover cards, so the two grids read as one family. */
.fn--pmv4 #workshop .fn-modcard::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--grad-cta);
    transform: scaleX(0);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.fn--pmv4 #workshop .fn-modcard:hover::after { transform: scaleX(1); }

/* Spans both columns and bleeds to the card edge. The margins track the card's
   padding, so they change together. */
/* Spans both columns and bleeds to the card edge. The margins track the card's
   padding, so they change together.

   SQUARE, and centred. The first version of this was a 16:10 band cropped to
   50%/22% because the brief was sage portraits, which are composed high in
   the frame. The art that actually arrived is something else: 1:1 poster
   plates with an ornate gold border and the vidya's name set dead centre. A
   16:10 crop taken from 22% down would have cut the border off three sides
   and sliced the title in half. At 1:1 the plate is shown whole and the
   object-fit never has to crop anything. */
.fn--pmv4 #workshop .fn-modcard__pic {
    grid-column: 1 / -1;
    /* MOUNTED, not bled. Each plate is painted with its own ornate gold
       border and corner motifs. Running it to the card edge set that frame
       hard against the card's 1px border — two frames sharing an edge — and
       the card's 14px radius then cut the corner ornaments off. You do not
       bleed a framed picture; you mount it. The card's own padding is the
       mount, and the plate keeps a small radius of its own inside it. */
    margin: 0 0 16px;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: var(--void-2);
    overflow: hidden;
}
.fn--pmv4 #workshop .fn-modcard__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
}

/* In flow, so it keeps its place with or without a picture above it. */
.fn--pmv4 #workshop .fn-modcard__n {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--brand);
    color: #2A0606;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1rem;
    box-shadow: 0 5px 14px -7px rgba(232, 180, 6, .95);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.fn--pmv4 #workshop .fn-modcard:hover .fn-modcard__n { transform: scale(1.09); }

/* The disc and the pill share a header line of their own; the title and the
   detail drop below it at the FULL card width.

   Before this the title sat beside the disc and reserved 54px for the pill,
   which left it about 160px to wrap "Vedic Astrology · Parashari" into — so
   it broke at the separator and stranded a middot on a line edge. At full
   width that title fits on one line and the longest of the five breaks once,
   cleanly. The two markers were never the title's business anyway: one says
   which vidya this is and the other says the same thing again. */
.fn--pmv4 #workshop .fn-modcard__body {
    grid-column: 1 / -1;
    padding-right: 0;
    margin-top: 13px;
}
.fn--pmv4 #workshop .fn-modcard__title {
    padding-right: 0;
    margin-bottom: 7px;
    font-size: 1.02rem;
    line-height: 1.34;
    text-wrap: balance;
}
.fn--pmv4 #workshop .fn-modcard__detail {
    color: var(--ink-3);
    font-size: .88rem;
    line-height: 1.62;
}

/* A label, not a second numeral. */
.fn--pmv4 #workshop .fn-modcard__tag {
    /* optically centred on the 38px disc: 24px of card padding + half the
       disc, less half the pill */
    top: 34px;
    right: 22px;
    padding: 3px 9px;
    font-size: .55rem;
    letter-spacing: .14em;
    color: var(--gold);
    background: transparent;
    border-color: rgba(245, 197, 24, .28);
}

/* ── The staggered arrival ──────────────────────────────────────────── */
/* .fn-reveal is already on every card; a transition-delay turns one fade into
   a cascade. Five cards, 3 + 2. */
.fn--pmv4 #workshop .fn-modcard:nth-child(1) { transition-delay: 0s; }
.fn--pmv4 #workshop .fn-modcard:nth-child(2) { transition-delay: .07s; }
.fn--pmv4 #workshop .fn-modcard:nth-child(3) { transition-delay: .14s; }
.fn--pmv4 #workshop .fn-modcard:nth-child(4) { transition-delay: .21s; }
.fn--pmv4 #workshop .fn-modcard:nth-child(5) { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
    .fn--pmv4 #workshop .fn-modcard,
    .fn--pmv4 #workshop .fn-modcard::after,
    .fn--pmv4 #workshop .fn-modcard__n {
        transition: none;
        transition-delay: 0s;
    }
    .fn--pmv4 #workshop .fn-modcard:hover { transform: none; }
    .fn--pmv4 #workshop .fn-modcard:hover .fn-modcard__n { transform: none; }
    .fn--pmv4 #workshop .fn-modcard::after { transform: scaleX(1); opacity: .45; }
}

@media (max-width: 600px) {
    .fn--pmv4 #workshop .fn-modcard { padding: 20px 20px 22px; }
    .fn--pmv4 #workshop .fn-modcard__pic { margin: -20px -20px 16px; }
}


/* ── The certificate heading's accent word ──────────────────────────── */
/* "Certificate" was running between 1.11:1 and 1.72:1 against the band it sits
   on — the word was on the page and could not be read.

   The cause is that this section uses .fn-grad-gold, not the .fn-grad-text
   every other heading uses, and only the latter reads from --grad-word. The
   theme retints --grad-word to dark golds; .fn-grad-gold hardcodes its own
   #f7d774 → #e6a417, which are FILL golds. They were built to sit under dark
   ink, and clipping them into 3rem glyphs on a cream ground put pale gold on
   pale cream.

   Pointing it at the same token rather than picking another literal means the
   two accent classes now differ in name only, and a future palette change has
   one place to touch instead of two. 4.95:1. */
/* background-IMAGE, not the background shorthand: the shorthand resets
   background-clip to border-box, and with the base leaving color:transparent
   in place that paints the gradient as a solid block with the word knocked
   invisible out of it. */
.fn--pmv4 .fn-grad-gold { background-image: var(--grad-word); }


/* ── Trusted by Acharyas, on the dark ───────────────────────────────── */
/* The alumni marquee joins the dark register — the same #2A0606 as Reserve,
   Discover, the inclusions, the mentor block, the countdown bar and the footer.

   The cards take the lifted dark the mentor card and the Discover cards use, so
   every dark section shares one surface. Everything inside inverts, because the
   name, the role and the portrait placeholder are all LIGHT-theme values that
   would vanish here — and the faint bloom behind each portrait was a cream-page
   gold that does nothing on a dark ground.

   The gold portrait ring is the one thing that needed no change: it was always
   a gradient of its own rather than a theme value, and it reads better here
   than it did on the cream. */
.fn--pmv4 #students {
    border-block: 0;
}

.fn--pmv4 #students .fn-eyebrow { color: #F5C518; }
.fn--pmv4 #students .fn-h2 { color: #FFF3DF; }
/* the accent is a dark-gold gradient built for cream — flat bright gold here */
.fn--pmv4 #students .fn-grad-text {
    background: none;
    -webkit-text-fill-color: #F5C518;
    color: #F5C518;
}
.fn--pmv4 #students .fn-lead { color: #D8C3A4; }

/* The card: 12.7:1 for the name, 6.6:1 for the role, 7.4:1 for the stars. */
.fn--pmv4 #students .fn-person {
    background: #5E1212;
    border: 1px solid rgba(245, 197, 24, .18);
    border-radius: 14px;
    box-shadow: none;
}
.fn--pmv4 #students .fn-person::before {
    background: radial-gradient(60% 60% at 50% 60%, rgba(245, 197, 24, .12), transparent 70%);
}
.fn--pmv4 #students .fn-person__name { color: #FFF3DF; }
.fn--pmv4 #students .fn-person__role { color: #D8C3A4; }
.fn--pmv4 #students .fn-person__stars { color: #F5C518; }
/* the placeholder behind a transparent or missing portrait */
.fn--pmv4 #students .fn-person img { background: #4A3B24; }
/* ── The shine on the alumni cards ──────────────────────────────────── */
/* A band of light crossing each card on a loop — the same idiom the workshop
   banner already uses, so this is the page's existing gesture rather than a new
   one.

   IT IS STAGGERED, not synchronised. Eight cards flashing in unison would read
   as a glitch; six seconds apart with a delay per card means roughly one is
   lit at any moment and the rest are still, which reads as sheen rather than
   strobe. The marquee duplicates the list to make its loop seamless, so the
   delays repeat across the copy and the rhythm carries.

   The card already clips (overflow: hidden) and already spends ::before on the
   bloom behind the portrait, so the sweep goes on ::after. It animates transform
   only, so it costs no layout, and it is pointer-events: none so it never
   intercepts a cursor.

   The sweep is warm white rather than gold: on a #5E1212 card a gold highlight
   just looks like a lighter patch of the card, where a near-white one reads as
   light moving across a surface. */
.fn--pmv4 #students .fn-person::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -45%;
    width: 42%;
    height: 220%;
    background: linear-gradient(90deg,
                transparent,
                rgba(255, 246, 224, .07) 35%,
                rgba(255, 246, 224, .17) 50%,
                rgba(255, 246, 224, .07) 65%,
                transparent);
    transform: translateX(-200%) rotate(18deg);
    animation: pmv4-shine 6s cubic-bezier(.45, 0, .2, 1) infinite;
    pointer-events: none;
}

/* held off-screen for most of the cycle, so the sweep is an event rather than
   a constantly moving object */
@keyframes pmv4-shine {
    0%, 8%     { transform: translateX(-200%) rotate(18deg); }
    42%, 100%  { transform: translateX(460%) rotate(18deg); }
}

.fn--pmv4 #students .fn-person:nth-child(4n+1)::after { animation-delay: 0s; }
.fn--pmv4 #students .fn-person:nth-child(4n+2)::after { animation-delay: 1.5s; }
.fn--pmv4 #students .fn-person:nth-child(4n+3)::after { animation-delay: 3s; }
.fn--pmv4 #students .fn-person:nth-child(4n+4)::after { animation-delay: 4.5s; }

@media (prefers-reduced-motion: reduce) {
    .fn--pmv4 #students .fn-person::after { animation: none; opacity: 0; }
}


/* ── The ticket ─────────────────────────────────────────────────────── */
/* The form was correct and quiet. On a dark section the conversion point
   should be the one thing you cannot look away from, so this gives it weight
   without touching a single control's behaviour — every funnel.js hook, name,
   id and validation path is untouched; this is surface only.

   WHAT CHANGED AND WHY

   · 14px corners and a gold rail. The ticket was at 2px — square — while every
     other card on the page had moved to 14px. It read as the one unfinished
     object in the layout.
   · The head becomes a lit strip. It was the same flat white as the form below
     it, separated by a hairline, so the price and the three facts had no more
     presence than a form label. A warm gold wash and a sweep of light make it
     the ticket's stub.
   · The price doubles in size, 1.8rem to 2.6rem. It is ₹96. That number IS the
     offer and it was set smaller than the section heading.
   · Focus answers. The underline was a 1px colour change over .2s. It is now a
     2px gold inset — no layout shift, since a border change would move the
     field — and the label above lights with it, so the eye is told where it is.

   Contrast re-measured on the warmed head, not assumed: the price at 5.8:1 and
   the small caps at 5.5:1. */
/* No overflow:hidden. It was here so the head's gradient would respect the
   14px corners, but it also clipped the country dropdown — which opens out of
   the form inside this card — at the card's edge. The head carries its own
   top radius instead, so nothing needs clipping and the list can escape. */
.fn--pmv4 .pmr-ticket {
    border-radius: 14px;
}

.fn--pmv4 .pmr-ticket__head {
    position: relative;
    /* clips its own sweep, and rounds the ticket's top corners now that the
       ticket itself no longer does */
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(104deg, rgba(245, 197, 24, .18), rgba(245, 197, 24, .04) 72%), var(--panel-2);
    padding: 26px 30px;
}
/* The gold rail across the very top of the stub. */
.fn--pmv4 .pmr-ticket__head::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--grad-cta);
}
/* The sweep. Same idiom as the alumni cards and the workshop banner — one
   gesture reused, not a third invention. Transform only, and it never
   intercepts the cursor. */
.fn--pmv4 #reserve .pmr-ticket__head::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -40%;
    width: 34%;
    height: 220%;
    background: linear-gradient(90deg,
                transparent,
                rgba(255, 255, 255, .5) 45%,
                rgba(255, 255, 255, .75) 50%,
                rgba(255, 255, 255, .5) 55%,
                transparent);
    transform: translateX(-200%) rotate(18deg);
    animation: pmv4-shine 5.5s cubic-bezier(.45, 0, .2, 1) infinite;
    pointer-events: none;
}

/* ₹96 is the offer. Set it that way. 5.8:1 on the warmed head. */
.fn--pmv4 .pmr-price b {
    font-size: 2.6rem;
    letter-spacing: -.01em;
}
.fn--pmv4 .pmr-price small { margin-top: 4px; }

/* On the dark section the ticket glows rather than just sitting there. */
.fn--pmv4 #reserve .pmr-ticket {
    border-color: rgba(245, 197, 24, .4);
    box-shadow: 0 28px 70px -30px rgba(0, 0, 0, .75),
                0 0 0 1px rgba(245, 197, 24, .12),
                0 0 60px -22px rgba(245, 197, 24, .35);
}

/* ── Focus answers ──────────────────────────────────────────────────── */
/* inset box-shadow, not a thicker border: a border change reflows the field by
   a pixel and the whole column shivers as you tab through it. */
.fn--pmv4 .fn-field .fn-input {
    transition: border-color .25s ease, box-shadow .25s ease;
}
.fn--pmv4 .fn-field .fn-input:focus {
    border-bottom-color: var(--gold);
    box-shadow: inset 0 -2px 0 var(--gold);
}
.fn--pmv4 .fn-field:focus-within .fn-label {
    color: var(--gold);
    transition: color .25s ease;
}

@media (prefers-reduced-motion: reduce) {
    .fn--pmv4 #reserve .pmr-ticket__head::after { animation: none; opacity: 0; }
    .fn--pmv4 .fn-field .fn-input,
    .fn--pmv4 .fn-field:focus-within .fn-label { transition: none; }
}

@media (max-width: 560px) {
    .fn--pmv4 .pmr-price b { font-size: 2.1rem; }
}


/* ── The tag, once there is a plate under it ────────────────────────── */
/* The pill is absolutely positioned at the card's top corner, so the moment a
   module has artwork the pill is sitting ON that artwork rather than on the
   cream panel. Its --gold was chosen against cream and measures 2.4:1 against
   the dark plate — the label was there and unreadable.

   The first fix was to make it a chip — a dark scrim under bright gold — so it
   read against the art. It did, but it was still a badge stuck over the art:
   every one of the five plates carries an ornate gold border and a corner
   motif, and the pill covered exactly that. So it leaves the plate entirely
   and drops into the grid row below it, opposite the numeral, where that row
   had empty space anyway. The artwork is untouched and the header line is
   balanced. Back on the cream panel, the pill needs no recolouring at all.

   :has() is the condition rather than the .fn-modcard--img class the blade
   sets, because that class stays on the card even when the file is missing —
   it says "this module DECLARES a plate", not "a plate is on screen". For that
   distinction to be true the failure had to stop being display:none and start
   being a removal, which is what the blade change alongside this does. A node
   that will never render is better gone than hidden. */
/* Each plate carries the vidya's name in 40px display type. Printing the same
   words again at 1rem an inch below it was the card saying one thing twice,
   and it was the loosest part of the layout: "Jaimini Astrology" is one line,
   "KP Astrology · Krishnamurti Paddhati" is two, so the detail beneath them
   started at different heights right across the row.

   The heading stays in the DOM — it is the h3 and the img's alt text, and both
   the outline and the crawler still want it — it is just not drawn twice. Only
   on cards that actually have a plate: a module without one keeps its title,
   and if a file ever fails the frame is removed, so this stops applying on its
   own. Deleting these five lines puts the visible title straight back. */
.fn--pmv4 #workshop .fn-modcard:has(.fn-modcard__pic) .fn-modcard__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.fn--pmv4 #workshop .fn-modcard:has(.fn-modcard__pic) .fn-modcard__tag {
    /* out of the corner and into the grid, beside the numeral */
    position: static;
    grid-row: 2;
    grid-column: 2;
    justify-self: end;
    align-self: center;
}


/* ── Earn Your Certificate ──────────────────────────────────────────── */
/* This is the payoff moment of the page and it was the flattest thing on it:
   a plain band, a white box with a 3px corner, and no reason for the eye to
   stop. It stays LIGHT — the mentor block immediately below is dark, and two
   dark sections back to back would flatten both — so the interest has to come
   from the composition rather than from a change of ground.

   A SPOTLIGHT, not a flat band. A warm radial sits behind the certificate side
   only, so the document is lit and the argument beside it is not. It is one
   gradient over the existing --void-2, so the band still belongs to the
   certificate/alumni rhythm.

   THE DOCUMENT IS AN OBJECT. It sits very slightly off-square with a real
   shadow, the way a certificate actually lies on a desk, and squares itself up
   and lifts when you point at it. That one degree and a half is most of the
   difference between a picture of a certificate and a certificate.

   THE SEAL PULSES. A ring expands out of the ISO badge and fades — the gesture
   a seal or a stamp earns — on a slow six-second cycle so it reads as presence
   rather than as a notification.

   THE CLAIMS ARRIVE IN SEQUENCE, keyed off .is-in, which funnel.js already puts
   on the block when it scrolls into view. No new script, and because the parent
   is opacity:0 until then, nothing is visible early. */
.fn--pmv4 #certificate {
    /* the glow, over whichever band this section landed on */
    background:
        radial-gradient(118% 88% at 78% 42%, rgba(245, 197, 24, .18), transparent 62%),
        var(--band, var(--void-2));
}

/* ── The document ───────────────────────────────────────────────────── */
.fn--pmv4 #certificate .fn-certframe {
    padding: 14px;
    border-radius: 14px;
    background: var(--panel);
    border: 1px solid rgba(232, 180, 6, .38);
    box-shadow: 0 30px 70px -32px rgba(0, 0, 0, .6);
    transform: rotate(-1.5deg);
    transition: transform .6s cubic-bezier(.22, 1, .36, 1),
                box-shadow .6s cubic-bezier(.22, 1, .36, 1),
                border-color .4s ease;
}
.fn--pmv4 #certificate .fn-certframe:hover {
    transform: rotate(0deg) translateY(-7px);
    border-color: rgba(232, 180, 6, .7);
    box-shadow: 0 44px 96px -36px rgba(0, 0, 0, .65);
}
.fn--pmv4 #certificate .fn-certframe img { border-radius: 8px; }

/* ── The seal ───────────────────────────────────────────────────────── */
.fn--pmv4 #certificate .fn-certframe__badge {
    border-radius: 999px;
    animation: pmv4-seal 6s ease-out infinite;
}
@keyframes pmv4-seal {
    0%, 70%, 100% { box-shadow: 0 10px 24px -12px rgba(192, 138, 8, .7), 0 0 0 0 rgba(245, 197, 24, .55); }
    85%           { box-shadow: 0 10px 24px -12px rgba(192, 138, 8, .7), 0 0 0 16px rgba(245, 197, 24, 0); }
}

/* ── The heading ────────────────────────────────────────────────────── */
/* A short gold rule under the eyebrow, so the column has a starting edge
   rather than beginning in mid-air. */
.fn--pmv4 #certificate .fn-eyebrow { position: relative; padding-bottom: 14px; }
.fn--pmv4 #certificate .fn-eyebrow::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52px;
    height: 2px;
    background: var(--grad-cta);
}

/* ── The claims ─────────────────────────────────────────────────────── */
.fn--pmv4 #certificate .fn-check {
    transition: background .35s ease, border-color .35s ease,
                color .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
/* #2A0606 on brand gold measures 7.2:1 */
.fn--pmv4 #certificate .fn-checks li:hover .fn-check {
    background: var(--brand);
    border-color: var(--brand);
    color: #2A0606;
    transform: scale(1.08);
}

.fn--pmv4 #certificate .fn-loc.is-in .fn-checks li {
    animation: pmv4-rise .55s cubic-bezier(.22, 1, .36, 1) both;
}
.fn--pmv4 #certificate .fn-loc.is-in .fn-checks li:nth-child(2) { animation-delay: .1s; }
.fn--pmv4 #certificate .fn-loc.is-in .fn-checks li:nth-child(3) { animation-delay: .2s; }
@keyframes pmv4-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fn--pmv4 #certificate .fn-certframe { transform: none; transition: none; }
    .fn--pmv4 #certificate .fn-certframe:hover { transform: none; }
    .fn--pmv4 #certificate .fn-certframe__badge { animation: none; }
    .fn--pmv4 #certificate .fn-check { transition: none; }
    .fn--pmv4 #certificate .fn-checks li:hover .fn-check { transform: none; }
    .fn--pmv4 #certificate .fn-loc.is-in .fn-checks li { animation: none; }
}

@media (max-width: 900px) {
    /* stacked, so the tilt reads as a mistake rather than as a flourish */
    .fn--pmv4 #certificate .fn-certframe { transform: none; }
    .fn--pmv4 #certificate {
        background:
            radial-gradient(140% 50% at 50% 88%, rgba(245, 197, 24, .16), transparent 62%),
            var(--void-2);
    }
}


/* ── The closing panel, on the dark ─────────────────────────────────── */
/* The SECTION stays cream and only the panel goes dark. That is the point of
   it: a dark card on a light band is an object you notice, where a dark band
   would simply run into the dark footer directly below and the two would read
   as one long dark tail to the page.

   It takes #2A0606, the same register as the other six, so the last thing you
   see before the footer belongs to the same family as the first.

   THE SHINE COMES BACK. .fn-ctapanel__shine is a white sweep that the base
   animates across this panel, and the theme had it in the display:none list —
   correctly, while the panel was cream, since a white glint on near-white is
   just nothing happening for six and a half seconds. On the dark it is the
   effect it was written to be, so the suppression is lifted here only. No new
   keyframes: fn-shine is the base's own.

   Everything inside inverts. The pill, the heading, its accent, the lead and
   the tagline are all light-theme values; the ghost button is the one that
   would have failed hardest, being dark ink on a transparent fill. */
.fn--pmv4 .fn-cta .fn-ctapanel {
    background: var(--band-card, #2A0606);
    border: 1px solid rgba(245, 197, 24, .28);
    border-radius: 14px;
    box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .6);
}
.fn--pmv4 .fn-cta .fn-ctapanel__shine { display: block; }

/* #FFF3DF 15.6:1, #D8C3A4 7.7:1, #F5C518 8.4:1 — all on #2A0606. */
.fn--pmv4 .fn-cta .fn-pill {
    background: rgba(245, 197, 24, .1);
    border-color: rgba(245, 197, 24, .32);
    color: #F5C518;
}
.fn--pmv4 .fn-cta .fn-pill__dot { background: #F5C518; }
.fn--pmv4 .fn-cta .fn-ctapanel__h { color: #FFF3DF; }
/* the accent is a dark-gold gradient built for cream — flat bright gold here */
.fn--pmv4 .fn-cta .fn-grad-text {
    background: none;
    -webkit-text-fill-color: #F5C518;
    color: #F5C518;
}
.fn--pmv4 .fn-cta .fn-lead { color: #D8C3A4; }
.fn--pmv4 .fn-cta .fn-ctapanel__tag { color: #F5C518; }

/* The ghost button: dark ink on a transparent fill would have been invisible. */
.fn--pmv4 .fn-cta .fn-btn--ghost {
    color: #FFF3DF;
    border-color: rgba(245, 197, 24, .45);
    background: transparent;
}
.fn--pmv4 .fn-cta .fn-btn--ghost:hover {
    color: #2A0606;
    background: var(--brand);
    border-color: var(--brand);
}


/* ── The syllabus slider's controls ─────────────────────────────────── */
/* The arrows and dots are injected by pmv4-theme.js, not written into
   workshop.blade.php, because that partial is shared with a funnel that has no
   slider — this way its markup stays byte for byte what it was.

   THE SCROLLBAR GOES with them. It was there as the only affordance while
   there was nothing else to say "there is more"; with an arrow at each end and
   a dot per page it is redundant, and a raw OS scrollbar under a row of gold
   cards is the least considered thing on the page. Scroll-snap, swipe and
   keyboard scrolling all still work — only the bar is hidden.

   The dots are buttons, not decoration: each carries an aria-label and
   aria-current, and the whole strip is reachable by keyboard. */
.fn--pmv4 #workshop .fn-grid--2.is-slider {
    scrollbar-width: none;
    padding-bottom: 4px;
}
.fn--pmv4 #workshop .fn-grid--2.is-slider::-webkit-scrollbar { display: none; }

.fn--pmv4 .pmv4-slider__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 28px;
}

/* #2A0606 on brand gold measures 7.2:1 */
.fn--pmv4 .pmv4-slider__btn {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--panel);
    color: var(--gold);
    font-family: var(--font-display);
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease,
                color .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.fn--pmv4 .pmv4-slider__btn:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #2A0606;
    transform: scale(1.06);
}
.fn--pmv4 .pmv4-slider__btn:focus-visible,
.fn--pmv4 .pmv4-slider__dot:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.fn--pmv4 .pmv4-slider__dots {
    display: flex;
    align-items: center;
    gap: 9px;
}
/* The active dot stretches rather than just changing colour, so the position
   reads at a glance and not only to someone who can tell the two golds apart. */
.fn--pmv4 .pmv4-slider__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(245, 197, 24, .3);
    cursor: pointer;
    transition: width .4s cubic-bezier(.22, 1, .36, 1), background .3s ease;
}
.fn--pmv4 .pmv4-slider__dot:hover { background: rgba(245, 197, 24, .55); }
.fn--pmv4 .pmv4-slider__dot.is-on {
    width: 30px;
    background: var(--brand);
}

@media (prefers-reduced-motion: reduce) {
    .fn--pmv4 .pmv4-slider__btn,
    .fn--pmv4 .pmv4-slider__dot { transition: none; }
    .fn--pmv4 .pmv4-slider__btn:hover { transform: none; }
}


/* ── The syllabus banner ────────────────────────────────────────────── */
/* It was cream on cream — a panel whose only edge was a hairline, carrying the
   strongest offer on the page — so it read as a footnote to the syllabus
   rather than as its conclusion. It takes the dark register instead, which
   makes it the one solid object in a light section and pairs it with the
   closing panel at the foot of the page: the same treatment for the same job.

   THE SWEEP COMES BACK, exactly as it did on the closing panel. The base
   animates a white glint across this banner and the theme had it in the
   display:none list — right while the surface was near-white, since a white
   highlight on cream is six seconds of nothing. On the dark it is the effect
   it was written to be. fn-shine is the base's own keyframe; nothing new. */
.fn--pmv4 #workshop .fn-banner {
    background: var(--band-card, #2A0606);
    border: 1px solid rgba(245, 197, 24, .3);
    border-radius: 14px;
    padding: 24px 26px;
    box-shadow: 0 24px 56px -30px rgba(0, 0, 0, .6);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
                border-color .35s ease,
                box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}
.fn--pmv4 #workshop .fn-banner:hover {
    transform: translateY(-3px);
    border-color: rgba(245, 197, 24, .5);
    box-shadow: 0 32px 70px -32px rgba(0, 0, 0, .65);
}
.fn--pmv4 #workshop .fn-banner__shine { display: block; }

/* #FFF3DF 15.6:1 and #D8C3A4 7.7:1, both on #2A0606. */
.fn--pmv4 #workshop .fn-banner__title { color: #FFF3DF; }
.fn--pmv4 #workshop .fn-banner p { color: #D8C3A4; }

/* The trophy loses its solid gold slab for a ring, so it sits in the bar
   rather than on top of it — and the gold stays the CTA's alone. */
.fn--pmv4 #workshop .fn-banner__icon {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: rgba(245, 197, 24, .12);
    border: 1px solid rgba(245, 197, 24, .3);
    box-shadow: none;
    font-size: 1.5rem;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.fn--pmv4 #workshop .fn-banner:hover .fn-banner__icon { transform: scale(1.07); }

/* The line under the bar sits back on the cream. */
.fn--pmv4 #workshop .fn-banner__note { color: var(--ink-3); }


/* ── The countdown bar's sweep ──────────────────────────────────────── */
/* The bar was already the page's dark register floating over the content; it
   just sat there. A glint crossing it every few seconds is the same gesture
   the banner, the closing panel and the alumni cards use, so the moving parts
   of the page all move the same way.

   .fn-timerbar__in is neither positioned nor clipping in the base sheet, so
   both have to be set here or the sweep would escape the rounded bar and slide
   across the page. */
.fn--pmv4 .fn-timerbar__in {
    position: relative;
    overflow: hidden;
}
.fn--pmv4 .fn-timerbar__in::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -30%;
    width: 22%;
    height: 220%;
    background: linear-gradient(90deg,
                transparent,
                rgba(255, 246, 224, .1) 40%,
                rgba(255, 246, 224, .22) 50%,
                rgba(255, 246, 224, .1) 60%,
                transparent);
    transform: translateX(-200%) rotate(18deg);
    animation: pmv4-shine 5s cubic-bezier(.45, 0, .2, 1) infinite;
    pointer-events: none;
    z-index: 0;
}
/* the contents have to sit above the sweep, or it washes over the digits */
.fn--pmv4 .fn-timerbar__label,
.fn--pmv4 .fn-timerbar__cells,
.fn--pmv4 .fn-timerbar__cta {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .fn--pmv4 #workshop .fn-banner,
    .fn--pmv4 #workshop .fn-banner__icon { transition: none; }
    .fn--pmv4 #workshop .fn-banner:hover { transform: none; }
    .fn--pmv4 #workshop .fn-banner:hover .fn-banner__icon { transform: none; }
    .fn--pmv4 .fn-timerbar__in::after { animation: none; opacity: 0; }
}


/* ── The enquiry popup ──────────────────────────────────────────────── */
/* A dark card on a dimmed page, so it reads as the same object family as the
   closing panel and the countdown bar rather than as a generic modal.
   
   It is `hidden` until the script opens it, so with JavaScript off it never
   appears at all — which is the right failure for an interruption.
   
   The scrim animates its opacity and the card its transform, both cheap, and
   both are off under prefers-reduced-motion where the dialog simply appears. */
.fn--pmv4 .pmv4-pop {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 20px;
}
.fn--pmv4 .pmv4-pop[hidden] { display: none; }

.fn--pmv4 .pmv4-pop__scrim {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(18, 13, 5, .62);
    backdrop-filter: blur(3px);
    cursor: pointer;
    opacity: 0;
    transition: opacity .25s ease;
}
.fn--pmv4 .pmv4-pop.is-open .pmv4-pop__scrim { opacity: 1; }

.fn--pmv4 .pmv4-pop__card {
    position: relative;
    width: min(440px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 34px 30px 28px;
    border-radius: 16px;
    background: #2A0606;
    border: 1px solid rgba(245, 197, 24, .34);
    box-shadow: 0 40px 90px -36px rgba(0, 0, 0, .8);
    opacity: 0;
    transform: translateY(16px) scale(.98);
    transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.fn--pmv4 .pmv4-pop.is-open .pmv4-pop__card {
    opacity: 1;
    transform: none;
}

/* #D8C3A4 on #2A0606 is 7.7:1; the close glyph lifts to gold on hover. */
.fn--pmv4 .pmv4-pop__x {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #D8C3A4;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}
.fn--pmv4 .pmv4-pop__x:hover {
    background: rgba(245, 197, 24, .12);
    color: #F5C518;
}

.fn--pmv4 .pmv4-pop__head { margin-bottom: 22px; }
.fn--pmv4 .pmv4-pop__eyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #F5C518;
}
.fn--pmv4 .pmv4-pop__title {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.38rem;
    line-height: 1.28;
    color: #FFF3DF;
    text-wrap: balance;
    padding-right: 26px;
}
.fn--pmv4 .pmv4-pop__lead {
    margin: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: #D8C3A4;
}

/* ── The fields ─────────────────────────────────────────────────────── */
/* .fn-input and .fn-label are the page's own, so this form matches the real
   one — but both were solved against the light ticket, and every one of their
   colours is a dark value that would vanish here. */
.fn--pmv4 .pmv4-pop__field { margin-bottom: 16px; }
.fn--pmv4 .pmv4-pop__field .fn-label { color: #BCA98C; }
.fn--pmv4 .pmv4-pop__field .fn-input {
    width: 100%;
    color: #FFF3DF;
    border-bottom-color: rgba(245, 197, 24, .3);
}
/* 3.1:1 was too faint to read as a hint rather than as disabled text. */
.fn--pmv4 .pmv4-pop__field .fn-input::placeholder { color: #93866D; }
.fn--pmv4 .pmv4-pop__field .fn-input:focus {
    border-bottom-color: #F5C518;
    box-shadow: inset 0 -2px 0 #F5C518;
}
.fn--pmv4 .pmv4-pop__field:focus-within .fn-label { color: #F5C518; }
.fn--pmv4 .pmv4-pop .fn-req { color: #E8734A; }

/* Off-screen rather than display:none — some bots skip anything hidden. */
.fn--pmv4 .pmv4-pop__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.fn--pmv4 .pmv4-pop__send { margin-top: 20px; }

/* 5.6:1 for the confirmation, 5.3:1 for the error — both on the card. */
.fn--pmv4 .pmv4-pop__msg {
    margin: 16px 0 0;
    font-size: .86rem;
    line-height: 1.55;
    color: #7BD68F;
}
.fn--pmv4 .pmv4-pop__msg.is-bad { color: #FF9B7A; }
.fn--pmv4 .pmv4-pop__msg[hidden] { display: none; }

/* ── The two ways out ───────────────────────────────────────────────── */
.fn--pmv4 .pmv4-pop__alt {
    display: grid;
    gap: 8px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(245, 197, 24, .18);
    text-align: center;
}
.fn--pmv4 .pmv4-pop__alt a {
    font-size: .82rem;
    color: #D8C3A4;
    text-decoration: none;
    transition: color .25s ease;
}
.fn--pmv4 .pmv4-pop__alt a:hover { color: #F5C518; }

@media (max-width: 480px) {
    .fn--pmv4 .pmv4-pop__card { padding: 28px 20px 24px; }
    .fn--pmv4 .pmv4-pop__title { font-size: 1.22rem; }
}

@media (prefers-reduced-motion: reduce) {
    .fn--pmv4 .pmv4-pop__scrim,
    .fn--pmv4 .pmv4-pop__card,
    .fn--pmv4 .pmv4-pop__x,
    .fn--pmv4 .pmv4-pop__alt a { transition: none; }
    .fn--pmv4 .pmv4-pop__card { transform: none; }
}


/* ── Video reviews ──────────────────────────────────────────────────── */
/* A dark band of faces. It sits between the cream trust bar and the dark
   Discover section, and takes the page's dark register so those two read as one
   movement rather than as light-dark-light-dark.

   THE TRACK MARQUEES rather than paging like the syllabus slider. These are
   faces, not text: nothing here has to be read in order or stopped on, so
   continuous drift suits them and needs no controls. The blade renders the list
   twice and the animation travels -50%, so the loop has no seam.

   It pauses on hover and on focus-within — the latter matters because tabbing
   to a play button inside a moving track is otherwise a fight. */
/* ON THE PAGE GROUND, at the client's request. The band was #2A0606 and every
   colour inside it was an inverted one — the heading at #FFF3DF, the captions
   at #D8C3A4, a gold card edge. All of those are near-invisible on cream, so
   dropping the background means dropping them too rather than only the one
   declaration: the heading and the accent now fall through to the theme's own
   light values, which is why there is nothing here to set them. */
.fn--pmv4 .pmv4-revs .fn-h2 { margin-bottom: 0; }

/* STILL, at the client's request. It was a full-bleed marquee: 100vw wide with
   a mask fading both edges and a -50% drift, all of which existed to make
   continuous motion read well. None of it applies to a row that does not move,
   so the viewport goes back to the page measure and the row simply wraps —
   which also means it never scrolls sideways on a phone. */
.fn--pmv4 .pmv4-revs__vp {
    margin-top: 34px;
}
.fn--pmv4 .pmv4-revs__track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px 18px;
}

/* Four to a row: the track less its three 18px gaps, quartered. At the widened
   1180px measure that is about 281px a card — wider than the fixed 260px this
   replaces, and it stays four across at any width until a breakpoint says
   otherwise. */
.fn--pmv4 .pmv4-revs .fn-container { max-width: min(1180px, 100%); }

.fn--pmv4 .pmv4-rev {
    flex: 0 0 calc((100% - 54px) / 4);
    margin: 0;
}

@media (max-width: 1000px) {
    /* three: two gaps */
    .fn--pmv4 .pmv4-rev { flex-basis: calc((100% - 36px) / 3); }
}
@media (max-width: 760px) {
    /* A SLIDER HERE, not a wrapping row. Two cards wide, eight videos is four
       stacked rows on a phone; swiping is how that section stays a section.
       The desktop row above is untouched and still does not move. */
    .fn--pmv4 .pmv4-revs__vp {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        /* the bar is noise next to a peeking card, which says it moves */
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .fn--pmv4 .pmv4-revs__vp::-webkit-scrollbar { display: none; }

    .fn--pmv4 .pmv4-revs__track {
        flex-wrap: nowrap;
        justify-content: flex-start;
        /* room past the last card so it can reach the left edge like the rest */
        padding-right: 38%;
    }

    /* 62%, so the next card is visibly cut by the screen edge. At 100% the
       row ends flush and looks like a single image. */
    .fn--pmv4 .pmv4-rev {
        flex-basis: 62%;
        scroll-snap-align: start;
    }
}

/* 3:4. These are phone-shot testimonials, so the frame is portrait — but not
   9:16: at this width that would be over 460px tall, and YouTube's thumbnail
   is a 4:3 still anyway, so a 9:16 frame cropped the sides off all of them. */
.fn--pmv4 .pmv4-rev__play {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    /* the still fills this, so it only shows while one is loading */
    background: var(--void-2);
    cursor: pointer;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
                border-color .35s ease, box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}
.fn--pmv4 .pmv4-rev__play img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fn--pmv4 .pmv4-rev__play:hover,
.fn--pmv4 .pmv4-rev__play:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(232, 180, 6, .55);
    box-shadow: 0 20px 42px -22px rgba(0, 0, 0, .5);
    outline: none;
}

/* YouTube red, because on a video thumbnail the colour is the label. */
.fn--pmv4 .pmv4-rev__btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 50px;
    height: 35px;
    border-radius: 10px;
    background: rgba(220, 30, 30, .92);
    color: #fff;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), background .3s ease;
}
.fn--pmv4 .pmv4-rev__btn svg { width: 21px; height: 21px; }
.fn--pmv4 .pmv4-rev__play:hover .pmv4-rev__btn,
.fn--pmv4 .pmv4-rev__play:focus-visible .pmv4-rev__btn {
    background: #FF0000;
    transform: translate(-50%, -50%) scale(1.09);
}

/* The iframe the script swaps in, filling the frame the still occupied. */
.fn--pmv4 .pmv4-rev__play iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* On cream now: --ink measures 14.6:1 and --ink-3 5.3:1. */
.fn--pmv4 .pmv4-rev__cap {
    margin-top: 10px;
    text-align: center;
}
.fn--pmv4 .pmv4-rev__t {
    display: block;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--ink);
}
.fn--pmv4 .pmv4-rev__a {
    display: block;
    margin-top: 2px;
    font-size: .72rem;
    color: var(--ink-3);
}

@media (prefers-reduced-motion: reduce) {
    .fn--pmv4 .pmv4-rev__play,
    .fn--pmv4 .pmv4-rev__btn { transition: none; }
    .fn--pmv4 .pmv4-rev__play:hover { transform: none; }
}


/* ── The ticket stub with no price ──────────────────────────────────── */
/* The price was the right-hand anchor of the header strip. On a free funnel
   .pmr-price is not rendered at all, which left the three facts pinned left by
   their own `margin-right: auto` and half the strip empty.

   :only-child is exactly the condition — the facts list is the head's only
   child precisely when there is no price beside it — so this needs no flag from
   the blade and reverts by itself the moment a price is set again. */
.fn--pmv4 .pmr-ticket__head .pmr-facts:only-child {
    width: 100%;
    margin-right: 0;
    justify-content: space-between;
}


/* ── The hero headline ──────────────────────────────────────────────── */
/* THE TRADEMARK. U+2122 is a normal glyph, not a superscript one — at a 3.9rem
   headline it sets as tall as the capitals and reads as part of the word. It is
   raised and reduced here instead. <i> rather than <sup>, because <sup> also
   shifts the line box and would open a gap above the first line. */
.fn--pmv4 .fn-tm {
    font-size: .36em;
    font-style: normal;
    vertical-align: .72em;   /* baseline-relative, so it tracks the font size */
    letter-spacing: 0;
    margin-left: .06em;
}

/* THE HIERARCHY. All three lines shared one font-size, which worked while the
   third was "One Transformative Journey" — 25 characters, about the length of
   the brand. The strapline that replaced it is 62, so at the same size it wrapped
   to two lines and became the biggest thing in the headline: the brand name was
   left as the smallest element in its own title.

   The strapline steps down to .62em and tightens its leading. It is still the
   gold italic accent and still the line the eye goes to second — it is simply
   no longer competing with the name above it. */
.fn--pmv4 .fn-hero__title .fn-grad-text {
    display: block;
    margin-top: .34em;
    font-size: .62em;
    line-height: 1.24;
    letter-spacing: .01em;
    text-wrap: balance;
}


/* ── The country picker ─────────────────────────────────────────────── */
/* intl-tel-input lays its list out with white-space: nowrap, so one long entry
   sets the width of the whole thing — "French Polynesia (Polynésie française)"
   pushed it far past the card and the tail was simply unreachable. It sizes to
   its content now but is capped, and the names wrap instead of extending. */
.fn--pmv4 .iti__country-list {
    width: max-content;
    min-width: 100%;
    max-width: min(340px, 82vw);
    white-space: normal;
    background: var(--panel-2);
    border-color: var(--line-2);
}
.fn--pmv4 .iti__country {
    white-space: normal;
    line-height: 1.35;
}

/* The highlight was var(--panel-2) — the same value as the list behind it, so
   the row under the cursor was indistinguishable from the rest. Gold tint. */
.fn--pmv4 .iti__country.iti__highlight { background: rgba(245, 197, 24, .16); }
.fn--pmv4 .iti__dial-code { color: var(--ink-3); }

/* Clicking the flag selects the dial code as text, which is what put a blue
   selection block over "+91". It is a button, not prose. */
.fn--pmv4 .iti__selected-flag,
.fn--pmv4 .iti--separate-dial-code .iti__selected-dial-code {
    -webkit-user-select: none;
    user-select: none;
}


/* ── The applied subjects ───────────────────────────────────────────── */
/* Five cards, not seventeen ticks in three columns.

   The flat version was legible and said nothing: every line the same weight, no
   order to read them in, and no hint of what the course is built around. The
   groups carry that — and the count on each head is derived from the config
   rather than typed, so adding an eighteenth subject can never leave a stale
   number sitting beside it.

   The grid auto-fits rather than declaring a column count, because the groups
   are uneven — six items in one, two in another — and a fixed three-up would
   leave a short card stretched beside a tall one at every width. */
.fn--pmv4 .pmv4-subj__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 18px;
    margin-top: 40px;
    /* stretch, not start: cards in a row sharing a bottom edge is what makes
       them read as a set rather than as five separate notices */
    align-items: stretch;
}

.fn--pmv4 .pmv4-subj__card {
    padding: 0;
    border-radius: 14px;
    /* the band this section landed on decides the body; --band-card is
       always the contrasting one, so the card cannot blend into it */
    background: var(--band-card, var(--panel));
    border: 1px solid var(--line);
    /* the head is square-cornered — the card's radius is what rounds it */
    overflow: hidden;
    box-shadow: 0 4px 16px -10px rgba(0, 0, 0, .5);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
                border-color .35s ease,
                box-shadow .45s cubic-bezier(.22, 1, .36, 1),
                opacity .6s ease;
}
.fn--pmv4 .pmv4-subj__card:hover {
    transform: translateY(-4px);
    border-color: rgba(245, 197, 24, .45);
    box-shadow: 0 20px 42px -22px rgba(0, 0, 0, .6);
    transition-delay: 0s;
}

/* ── The head ───────────────────────────────────────────────────────── */
.fn--pmv4 .pmv4-subj__head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 20px;
    background-image: linear-gradient(100deg, #F7CE3A, #E2A505);
}
.fn--pmv4 .pmv4-subj .fn-tile {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 999px;
    background: #3A0808;
    border: 1px solid rgba(58, 8, 8, .4);
    color: var(--gold);
    box-shadow: none;
    transition: background .35s ease, border-color .35s ease, color .35s ease;
}
.fn--pmv4 .pmv4-subj .fn-tile svg { width: 19px; height: 19px; }
/* the disc deepens on hover — filling it gold would erase it into the band */
.fn--pmv4 .pmv4-subj__card:hover .fn-tile {
    background: #2A0606;
    border-color: #2A0606;
    color: var(--gold);
}

.fn--pmv4 .pmv4-subj__name {
    margin: 0;
    margin-right: auto;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.06rem;
    line-height: 1.25;
    color: #3A0808;
    text-wrap: balance;
}
.fn--pmv4 .pmv4-subj__count {
    flex: 0 0 auto;
    min-width: 26px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #3A0808;
    border: 1px solid #3A0808;
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
    /* gold on the dark chip: 10.58:1 */
    color: var(--gold);
}

/* ── The subjects themselves ────────────────────────────────────────── */
/* A gold dash rather than a tick: the tick is the inclusions list's mark and
   means "you get this", while these are simply what is taught. */
.fn--pmv4 .pmv4-subj__list {
    margin: 0;
    padding: 16px 22px 18px;
    list-style: none;
}
.fn--pmv4 .pmv4-subj__list li {
    position: relative;
    padding: 7px 0 7px 18px;
    font-size: .89rem;
    line-height: 1.5;
    color: var(--ink-2);
}
.fn--pmv4 .pmv4-subj__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.02em;
    width: 8px;
    height: 1px;
    background: var(--gold);
}

.fn--pmv4 .pmv4-subj__note {
    margin: 30px 0 0;
    text-align: center;
    font-size: .84rem;
    color: var(--ink-4);
}

@media (prefers-reduced-motion: reduce) {
    .fn--pmv4 .pmv4-subj__card,
    .fn--pmv4 .pmv4-subj .fn-tile { transition: none; }
    .fn--pmv4 .pmv4-subj__card:hover { transform: none; }
}

@media (max-width: 560px) {
    .fn--pmv4 .pmv4-subj__grid { grid-template-columns: 1fr; }
    .fn--pmv4 .pmv4-subj__head { padding: 13px 17px; }
    .fn--pmv4 .pmv4-subj__list { padding: 14px 18px 16px; }
}




/* Three columns hold five groups as 3 + 2, and the sixth slot sits empty. The
   long group takes it: two columns wide, with its six items set in two so the
   card lands beside its neighbour rather than towering over it.

   Only above 980px — that is where three columns actually fit, and below it a
   two-wide card would be the whole row and the spanning would mean nothing. */
@media (min-width: 980px) {
    .fn--pmv4 .pmv4-subj__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fn--pmv4 .pmv4-subj__card--wide { grid-column: span 2; }
    .fn--pmv4 .pmv4-subj__card--wide .pmv4-subj__list {
        columns: 2;
        column-gap: 34px;
    }
    /* a list item split down the middle by a column break is unreadable */
    .fn--pmv4 .pmv4-subj__card--wide .pmv4-subj__list li { break-inside: avoid; }
}


/* ═══════════════════════════════════════════════════════════════════════
   THE THANK-YOU PAGE
   ═══════════════════════════════════════════════════════════════════════ */

/* The base tick is #4ade80 → #16a34a, and the base WhatsApp button is
   #25d366 → #128c7e with a green glow. Two saturated greens on a maroon and
   gold page read as a different site's components dropped onto this one.

   The tick is not a brand mark — it is a success state — so it simply takes
   the page's gold. The button keeps its WhatsApp GLYPH, which is what anyone
   actually recognises, and drops the green fill: every other call to action
   in this funnel is gold, and this is the most important one on the page.

   funnel.css is shared with the Relocation funnel and is not edited; these
   override it from .fn--pmv4, which is stamped on <body>. */
.fn--pmv4 .fn-ty__tick {
    color: #3A0808;
    background: linear-gradient(150deg, #FFDE6A, #E0A004);
    box-shadow: 0 14px 34px -14px rgba(245, 197, 24, .75);
}

.fn--pmv4 .fn-ty__wa {
    color: #3A0808;
    background: var(--grad-cta);
    box-shadow: 0 16px 38px -16px rgba(245, 197, 24, .85);
}
/* currentColor, so the glyph darkens with the label rather than staying white
   on gold — which measured 1.9:1 and was effectively invisible. */
.fn--pmv4 .fn-ty__wa-ico,
.fn--pmv4 .fn-ty__wa-ico svg { color: currentColor; }

/* ── The free tools ─────────────────────────────────────────────────────
   Four cards, with the Kundali generator carrying a wider one: it is the
   tool people actually came for, and the other three are the reasons to come
   back. The width is set by the `featured` flag in config, not by position. */
.fn--pmv4 .pmv4-ft__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin-top: 38px;
    align-items: stretch;
}

.fn--pmv4 .pmv4-ft__card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 22px 20px 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    text-decoration: none;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1),
                border-color .28s ease,
                box-shadow .28s ease;
}
.fn--pmv4 .pmv4-ft__card:hover,
.fn--pmv4 .pmv4-ft__card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--line-2);
    box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .85);
}

/* The sweep, matching the cards on the funnel itself. Parked off to the left
   and moved only on hover, so nothing animates while the page sits still. */
.fn--pmv4 .pmv4-ft__shine {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 38%, rgba(245, 197, 24, .16) 50%, transparent 62%);
    transform: translateX(-100%);
    transition: transform .85s ease;
}
.fn--pmv4 .pmv4-ft__card:hover .pmv4-ft__shine { transform: translateX(100%); }

.fn--pmv4 .pmv4-ft__tile { margin-bottom: 3px; }

.fn--pmv4 .pmv4-ft__name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.24rem;
    line-height: 1.2;
    color: var(--ink);
}
.fn--pmv4 .pmv4-ft__desc {
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ink-3);
}
/* margin-top:auto pins the action to the bottom edge, so the four cards line
   their links up however unevenly the descriptions wrap. */
.fn--pmv4 .pmv4-ft__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 12px;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--gold);
}
.fn--pmv4 .pmv4-ft__cta svg {
    width: 15px;
    height: 15px;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}
.fn--pmv4 .pmv4-ft__card:hover .pmv4-ft__cta svg { transform: translateX(4px); }

/* "Free" is the whole pitch of the section, so it is a chip rather than a
   word in the copy. */
.fn--pmv4 .pmv4-ft__free {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 3px 9px;
    border: 1px solid rgba(245, 197, 24, .38);
    border-radius: 999px;
    background: rgba(245, 197, 24, .12);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
}

@media (min-width: 900px) {
    .fn--pmv4 .pmv4-ft__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fn--pmv4 .pmv4-ft__card--hero {
        grid-column: span 3;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        padding: 24px 26px;
    }
    .fn--pmv4 .pmv4-ft__card--hero .pmv4-ft__name { font-size: 1.5rem; }
    .fn--pmv4 .pmv4-ft__card--hero .pmv4-ft__desc { flex: 1; max-width: 46ch; }
    .fn--pmv4 .pmv4-ft__card--hero .pmv4-ft__cta { margin-top: 0; padding-top: 0; }
}

/* The icon disc, matching Discover / who-for / facts. The base .fn-tile is a
   52px coloured square that expects one of the .fn-tile--* fills; this section
   never sets one, so without this the glyph floats with no plate under it. */
.fn--pmv4 .pmv4-ft__tile {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0 0 6px;
    border-radius: 999px;
    background: rgba(245, 197, 24, .1);
    border: 1px solid rgba(245, 197, 24, .18);
    color: var(--gold);
}
.fn--pmv4 .pmv4-ft__tile svg { width: 21px; height: 21px; }

@media (min-width: 900px) {
    /* On the wide card the action is the point, so it stops being a text link
       and becomes the filled gold button the rest of the funnel uses. Dark ink
       on gold — 7.6:1 at the darker stop. */
    .fn--pmv4 .pmv4-ft__card--hero .pmv4-ft__tile {
        width: 56px;
        height: 56px;
        margin: 0;
    }
    .fn--pmv4 .pmv4-ft__card--hero .pmv4-ft__tile svg { width: 26px; height: 26px; }
    .fn--pmv4 .pmv4-ft__card--hero .pmv4-ft__cta {
        flex: 0 0 auto;
        padding: 12px 20px;
        border-radius: 999px;
        background: var(--grad-cta);
        color: #3A0808;
        box-shadow: 0 14px 30px -16px rgba(245, 197, 24, .8);
    }
    /* the chip would collide with the button on one line */
    .fn--pmv4 .pmv4-ft__card--hero .pmv4-ft__free { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ALTERNATING SECTION BANDS
   ═══════════════════════════════════════════════════════════════════════

   Two grounds taken in turn, so the eye can tell where one section ends
   without a rule being drawn between them.

   COUNTED FROM THE DOM, not from a list of ids. The applied subjects and
   the video reviews render nothing until their data exists, and a list
   would put two identical bands together whenever one of them is absent.
   :nth-of-type counts only what is really there.

   The hero is a <section> as well, so it takes position 1 and pushes the
   first content band to even. It is not painted here: it carries fn-hero
   rather than fn-section and has its own ground.

   --band-card is the panel colour FOR THAT BAND. Several components are
   painted the same value as the section they sit in and would vanish into
   it when the band flips, so they inherit this instead of a literal. */
.fn--pmv4 main > section.fn-section:nth-of-type(even) {
    --band: #2A0606;
    --band-card: #5E1212;
    background: var(--band);
}
.fn--pmv4 main > section.fn-section:nth-of-type(odd) {
    --band: #4A0C0C;
    --band-card: #2A0606;
    background: var(--band);
}