/* MediaWallah brand overrides (loaded after style.css). Palette from the nodes logo. */
:root{--mw-orange:#fbad5e;--mw-yellow:#f7db3c;--mw-lime:#c9e197;--mw-purple:#bd81b5;--mw-red:#ed4436;--mw-green:#81c354;--mw-blue:#4a85b9}
.hero-figure::before,.hero-figure::after{display:none}
.hero-figure-box{display:none}
#hero-graph{width:100%;height:auto;display:block;overflow:visible}
#hero-graph circle,#hero-graph line,#hero-graph rect,#hero-graph text{transition:opacity .35s ease}
.hero-figure{position:relative}
.hero-figure{max-width:452px}   /* 452 x (372/528) = 318px tall: the headline wins the first glance */
.hero-eyebrow{font:600 12px/1 "IBM Plex Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8A94A7;margin:0 0 12px}
.hero-paragraph{font-size:17px;line-height:27px;max-width:60ch}
.hero-caption{font:600 14px/1.4 "IBM Plex Sans",sans-serif;color:#c9d1dc;margin:12px 0 0;height:59px;overflow:hidden;text-align:center}   /* fixed 3-line box: the controls never jump */
.hero-controls{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px}
.hero-controls[data-paused="false"] [data-act="prev"],.hero-controls[data-paused="false"] [data-act="next"]{display:none}
@media (max-width:640px){.hero-controls [data-act="prev"],.hero-controls [data-act="next"]{display:none}}
.hero-controls button{background:transparent;border:1px solid #3B404C;color:#8A94A7;font:600 12px/1 "IBM Plex Sans",sans-serif;letter-spacing:.04em;padding:7px 10px;border-radius:4px;cursor:pointer}
.hero-controls button:hover{border-color:var(--mw-blue);color:#fff}
.hero-controls [data-act="toggle"]{min-width:82px}
.hero-controls .dots{display:flex;gap:6px;margin:0 8px}
.hero-controls .dots button{width:10px;height:10px;padding:0;border-radius:50%;border:1px solid #8A94A7;background:transparent}
.hero-controls .dots button[aria-current="step"]{background:var(--mw-orange);border-color:var(--mw-orange)}
#hero-graph text{font-family:"IBM Plex Sans",sans-serif}
#hero-graph .tile{font:600 10px/1 "IBM Plex Sans",sans-serif;fill:#fff;letter-spacing:.08em}
#hero-graph .side{font:600 12.5px/1 "IBM Plex Sans",sans-serif;fill:#A8B1BF;letter-spacing:.12em}
.button-primary{background:#2f6394;background:linear-gradient(65deg,#2f6394 0,#3f78ad 100%)}   /* white on #2f6394 = 6.3:1 */
.button-primary:hover{background:linear-gradient(65deg,#376f9f 0,#4a85b9 100%)}
.button-tertiary,.button-tertiary:hover{color:#1D2026}   /* ink on orange = 8.7:1 (white was 2.5:1) */
a:hover,a:active{color:#7fb0dd}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-cta .button{margin:0}
.hero-cta .button-ghost{background:transparent;border:1px solid var(--mw-blue);color:#fff}
.hero-cta .button-ghost:hover{background:rgba(74,133,185,.18)}
@media (max-width:640px){.hero-cta{flex-direction:column;align-items:stretch}}

/* animated wordmark (ported from AnimatedMediaWallahLogo.tsx): nodes drop in, text flickers on */
.mw-logo{height:44px;width:auto;display:block}
.mw-logo circle{transform-box:fill-box;transform-origin:center;animation:mw-drop .95s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i)*.16s)}
.mw-logo .mw-text{animation:mw-flicker 1.1s linear both;animation-delay:1.9s}
@keyframes mw-drop{from{transform:translateY(-6px) scale(0) rotate(-120deg);opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
@keyframes mw-flicker{0%{opacity:0}8%{opacity:.4}18%{opacity:0}26%{opacity:.8}36%{opacity:.1}48%{opacity:1}58%{opacity:.3}70%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.mw-logo circle,.mw-logo .mw-text{animation:none}}
.mw-logo-still .mw-logo circle,.mw-logo-still .mw-logo .mw-text{animation:none}   /* once per session */
.header-links{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.header-links a{color:#8A94A7;text-decoration:none;font:600 14px/1 "IBM Plex Sans",sans-serif;letter-spacing:.02em}
.header-links a:hover{color:#fff}