/* ═══════════════════════════════════════════════════════════════════
   KINEMATIC — Module pages: switcher, stat band, chart showcase
   Brand-aligned (Red #D01E2C · Ink #0A0E1A · Navy #0E1A2E · Manrope/
   Inter/JetBrains Mono). Loaded on every page; only renders where the
   markup exists. Chart animations fire when .mviz/.mstat gets .played
   (added by modules.js on scroll into view).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Module switcher — shows ALL three modules + Kini AI ─────────── */
.mswitch{max-width:1180px;margin:0 auto;padding:44px clamp(20px,5vw,40px) 8px}
.mswitch-lead{display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.mswitch-lead::before{content:"";width:26px;height:1.5px;background:var(--red)}
.mswitch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mswitch-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--rule);border-radius:16px;background:var(--white);text-decoration:none;color:inherit;overflow:hidden;transition:transform .35s var(--e1),box-shadow .35s var(--e1),border-color .35s var(--e1)}
.mswitch-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -22px rgba(10,14,26,.28);border-color:var(--ink)}
.mswitch-card .msc-n{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.mswitch-card .msc-t{font-family:'Manrope',sans-serif;font-weight:800;font-size:17px;letter-spacing:-0.02em;color:var(--ink)}
.mswitch-card .msc-d{font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.mswitch-card.on{background:linear-gradient(150deg,#12203a 0%,var(--navy) 70%);border-color:transparent;box-shadow:0 24px 50px -24px rgba(208,30,44,.5)}
.mswitch-card.on::after{content:"";position:absolute;inset:0;border-radius:16px;padding:1.5px;background:linear-gradient(120deg,#E23543,#D01E2C);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.mswitch-card.on .msc-n{color:var(--red-soft,#FF7884)}
.mswitch-card.on .msc-t{color:#fff}
.mswitch-card.on .msc-d{color:rgba(255,255,255,.62)}
.mswitch-card.on .msc-here{position:absolute;top:16px;right:16px;font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:700;letter-spacing:.14em;color:#fff;background:var(--red);border-radius:100px;padding:3px 7px}
.msc-here{display:none}
.mswitch-card.ai{background:var(--stone)}
.mswitch-card.ai .msc-n{color:var(--red)}
@media(max-width:900px){.mswitch-grid{grid-template-columns:repeat(2,1fr)}}

/* ── Animated impact stat band (dark navy) ──────────────────────── */
.mstat{position:relative;overflow:hidden;background:radial-gradient(120% 130% at 12% 0%,#13233c 0%,var(--navy) 55%),var(--navy)}
.mstat::before{content:"";position:absolute;width:52vw;height:52vw;border-radius:50%;filter:blur(120px);background:radial-gradient(circle,rgba(208,30,44,.28),transparent 65%);top:-40%;right:-10%;pointer-events:none}
.mstat-in{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:64px clamp(20px,5vw,40px);display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.mstat-item{text-align:left}
.mstat-n{font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(38px,5vw,60px);line-height:1;letter-spacing:-0.03em;color:#fff}
.mstat-n em{font-style:normal;background:linear-gradient(120deg,#FF7884,#D01E2C);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.mstat-l{margin-top:10px;font-family:'Inter',sans-serif;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.6)}
.mstat-k{margin-top:4px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-soft,#FF7884)}
@media(max-width:820px){.mstat-in{grid-template-columns:repeat(2,1fr);gap:32px 20px}}

/* ── Feature showcase — alternating chart rows ──────────────────── */
.mshow{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.mshow-head{max-width:720px;margin-bottom:54px}
.mrow{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,72px);align-items:center;padding:44px 0;border-top:1px solid var(--rule)}
.mrow:first-of-type{border-top:none}
.mrow:nth-child(even) .mrow-copy{order:2}
.mrow-n{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:16px}
.mrow-n::before{content:"";width:22px;height:1.5px;background:var(--red)}
.mrow-t{font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(24px,3vw,32px);line-height:1.08;letter-spacing:-0.03em;color:var(--ink);margin-bottom:16px}
.mrow-d{font-family:'Inter',sans-serif;font-size:15.5px;line-height:1.68;color:var(--ink-soft)}
.mrow-tags{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mrow-tags li{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.04em;color:var(--ink);background:var(--stone);border:1px solid var(--rule);border-radius:100px;padding:6px 12px}

/* Visualization card */
.mviz{position:relative;border:1px solid var(--rule);border-radius:20px;background:var(--white);box-shadow:0 1px 2px rgba(10,14,26,.04),0 22px 50px -26px rgba(10,14,26,.22);padding:26px;overflow:hidden}
.mviz-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.mviz-tag{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.mviz-dot{width:6px;height:6px;border-radius:50%;background:var(--red)}
.mviz-meta{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mviz.dark{background:radial-gradient(120% 130% at 85% 0%,#13233c 0%,var(--navy) 60%),var(--navy);border-color:transparent}
.mviz.dark .mviz-tag{color:#fff}.mviz.dark .mviz-meta{color:rgba(255,255,255,.5)}

/* Count number inside viz */
.mviz-big{font-family:'Manrope',sans-serif;font-weight:800;font-size:44px;letter-spacing:-0.03em;color:var(--ink);line-height:1}
.mviz.dark .mviz-big{color:#fff}
.mviz-sub{font-family:'Inter',sans-serif;font-size:12.5px;color:var(--muted);margin-top:6px}

/* Vertical bars */
.mbars{display:flex;align-items:flex-end;gap:10px;height:150px}
.mbar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;height:100%;justify-content:flex-end}
.mbar{width:100%;max-width:30px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#E23543,#D01E2C);height:0;transition:height 1s var(--e1)}
.mbar.k{background:linear-gradient(180deg,#2a3346,var(--ink))}
.mviz.played .mbar{height:var(--h,50%)}
.mbar-x{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--muted)}
.mlegend{display:flex;gap:16px;margin-top:16px}
.mlegend span{display:flex;align-items:center;gap:6px;font-family:'Inter',sans-serif;font-size:11.5px;color:var(--ink-soft)}
.mlegend i{width:9px;height:9px;border-radius:2px}.mlegend i.r{background:var(--red)}.mlegend i.k{background:var(--ink)}

/* Horizontal bars (leaderboard / funnel) */
.mhb{display:flex;flex-direction:column;gap:14px}
.mhb-row{display:grid;grid-template-columns:74px 1fr auto;align-items:center;gap:12px}
.mhb-l{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mhb-track{height:12px;border-radius:100px;background:var(--stone);overflow:hidden}
.mviz.dark .mhb-track{background:rgba(255,255,255,.08)}
.mhb-fill{height:100%;width:0;border-radius:100px;background:linear-gradient(90deg,#D01E2C,#E23543);transition:width 1.1s var(--e1)}
.mhb-fill.k{background:linear-gradient(90deg,#2a3346,var(--ink))}
.mviz.played .mhb-fill{width:var(--w,60%)}
.mhb-v{font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;color:var(--ink)}
.mviz.dark .mhb-v{color:#fff}

/* Gauge / donut (SVG, pathLength=100) */
.mgwrap{display:flex;align-items:center;gap:22px}
.mgauge{width:150px;height:150px;flex-shrink:0}
.mgauge circle,.mgauge path{fill:none}
.mgauge .track{stroke:var(--stone);stroke-width:11}
.mviz.dark .mgauge .track{stroke:rgba(255,255,255,.1)}
.mgauge .arc{stroke:var(--red);stroke-width:11;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.3s var(--e1)}
.mviz.played .mgauge .arc{stroke-dashoffset:calc(100 - var(--p,75))}
.mgauge-c{font-family:'Manrope',sans-serif;font-weight:800;font-size:26px;fill:var(--ink)}
.mviz.dark .mgauge-c{fill:#fff}
.mgauge-cs{font-family:'JetBrains Mono',monospace;font-size:6px;letter-spacing:.12em;fill:var(--muted)}

/* Sparkline / area (pathLength=100) */
.mspark{width:100%;height:150px;display:block}
.mspark .area{opacity:0;transition:opacity .9s ease .5s}
.mviz.played .mspark .area{opacity:1}
.mspark .line{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.5s var(--e1)}
.mviz.played .mspark .line{stroke-dashoffset:0}
.mspark .dot{fill:var(--red);opacity:0;transition:opacity .3s ease 1.4s}
.mviz.played .mspark .dot{opacity:1}
.mspark-foot{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.06em;color:var(--muted);margin-top:8px}

/* Steps / sync rows */
.msteps{display:flex;flex-direction:column;gap:12px}
.mstep{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--rule);border-radius:12px;background:var(--stone);opacity:0;transform:translateY(8px);transition:opacity .5s var(--e1),transform .5s var(--e1)}
.mviz.played .mstep{opacity:1;transform:none}
.mviz.played .mstep:nth-child(2){transition-delay:.12s}
.mviz.played .mstep:nth-child(3){transition-delay:.24s}
.mviz.played .mstep:nth-child(4){transition-delay:.36s}
.mstep-ic{width:26px;height:26px;border-radius:7px;background:rgba(208,30,44,.1);color:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mstep-t{font-family:'Inter',sans-serif;font-size:13px;color:var(--ink);font-weight:500}
.mstep-v{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--green,#0A8A4E);font-weight:700}

@media(max-width:820px){
  .mrow{grid-template-columns:1fr;gap:26px;padding:36px 0}
  .mrow:nth-child(even) .mrow-copy{order:0}
}
@media (prefers-reduced-motion:reduce){
  .mbar,.mhb-fill,.mgauge .arc,.mspark .line{transition:none}
  .mviz .mstep{opacity:1;transform:none;transition:none}
  .mspark .area,.mspark .dot{opacity:1;transition:none}
}