/* ============================================================
   MEDIAPATH — PULSE (2026-07-29)
   The site-wide design language established on the new homepage.

   LOAD ORDER CONTRACT: this file is linked as the LAST element in
   <head>, AFTER each page's own <style>. That is deliberate — it
   must win ties against the legacy inline blocks. Never move it
   above a page <style>, and never add a page rule that fights it;
   change the system here instead.

   HOW THE DARK→LIGHT FLIP WORKS: the site was dark-canvas Kinetic
   (--ink was white). Pulse is light-first. Rather than rewrite
   every page, we flip the TOKENS globally to the light family and
   then re-flip them, scoped, inside surfaces that stay dark
   (.band-black, video heroes, closing CTA bands). Custom
   properties inherit, so one scoped block re-inks an entire
   subtree — that is the mechanism the whole overhaul rests on.
   ============================================================ */

/* ---------------------------------------------- 1. tokens */
:root{
  /* canvas + ink (light family) */
  --void:#ffffff; --void-1:#F5F4F6; --void-2:#F5F4F6; --void-3:#EDECEF;
  --canvas:#ffffff; --tile-alt:#F5F4F6; --tile-warm:#F5F4F6;
  --tile-dark:#000000; --tile-dark-2:#000000;
  --ink:#1d1d1f; --ink-mut:#6e6e73; --ink-muted:#6e6e73; --ink-faint:#86868b;
  --on-dark:#f5f5f7; --on-dark-muted:rgba(245,245,247,.72);

  /* brand */
  --violet:#5F2CE3; --violet-deep:#402097; --violet-mist:#A399FC; --violet-soft:#9064FF;
  --peach:#FAA374; --peach-soft:#F5C1A9;
  --accent:#5F2CE3; --accent-2:#7B4BE8; --accent-on-dark:#A399FC;
  --accent-rgb:95,44,227;
  --mp-purple-500:#5F2CE3;

  /* the brand gradient — light grounds. Every stop clears white. */
  --iri:linear-gradient(97deg,#5F2CE3 6%,#7B4BE8 40%,#A66BD9 68%,#C9789E 92%);

  /* lines + elevation */
  --hairline:#e3e3e6; --line:#e3e3e6; --line-soft:rgba(0,0,0,.08); --edge:rgba(0,0,0,.08);
  --e-card:0 1px 2px rgba(0,0,0,.04),0 12px 28px -18px rgba(0,0,0,.18);
  --e-card2:0 24px 60px -28px rgba(0,0,0,.22);
  --radius:28px; --radius-sm:16px;

  /* motion */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------------------------------------------- 2. canvas */
html{background:#fff}
body{background:#fff;color:var(--ink);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}

/* ---------------------------------------------- 3. bands
   The rhythm is white → soft tint → (occasional) pure black.
   Legacy band-dark was the workhorse dark band; in Pulse it
   becomes the soft tint, which is why most of the site lightens
   with no markup change at all. */
.band-dark,.band-glow,.band-warm{background:var(--tile-alt);color:var(--ink)}
.band-paper{background:#fff;color:var(--ink)}
.band-black{background:#000;border-top:0;border-bottom:0}

/* dark surfaces re-ink their subtree by flipping the same tokens */
.band-black,.band-black *,
.ctav,.ctav *,
.vid-tile,.vid-tile *,
.foot--dark,.foot--dark *{
  --ink:#f5f5f7; --ink-mut:rgba(245,245,247,.72); --ink-muted:rgba(245,245,247,.72);
  --ink-faint:rgba(245,245,247,.55); --accent:#A399FC; --hairline:rgba(255,255,255,.14);
  --line:rgba(255,255,255,.14); --line-soft:rgba(255,255,255,.12);
  --iri:linear-gradient(97deg,#A399FC 6%,#C0A5F8 38%,#E3AED8 66%,#FFD3B4 94%);
}
.band-black{color:#f5f5f7}

/* ---------------------------------------------- 4. type
   Apple-scale display type: large, tight, sentence case. */
body{font-size:19px;line-height:1.55}
h1,h2,h3,.h1,.h2,.h3{letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
p{text-wrap:pretty}
.h-hero,h1.hero__h,.hero h1{font-size:clamp(52px,7.4vw,112px);font-weight:600;letter-spacing:-.035em}
.h-tile,section h2,.sec h2{font-size:clamp(38px,5.2vw,66px);font-weight:600;letter-spacing:-.032em}
.lede,.lede--big,.lead-airy{font-size:clamp(19px,2vw,24px);line-height:1.5;color:var(--ink-mut);font-weight:400}

/* eyebrows: the banned mono/tracked/uppercase label becomes a quiet
   sentence-case violet line (see memory: no-mono-eyebrow-labels) */
.eyebrow,.k,.kicker,.sec__k,.spot__k,.row .k,.eyebrow--mono{
  font-family:var(--font,'Geist',system-ui,sans-serif)!important;
  font-size:16px!important;font-weight:600!important;letter-spacing:-.01em!important;
  text-transform:none!important;color:var(--accent)!important;margin-bottom:18px}

/* gradient type — one or two considered moments per page */
.grad,.acc.grad,.iri-text,.iri{
  display:inline-block;color:transparent;background:var(--iri);
  -webkit-background-clip:text;background-clip:text;
  padding:.14em .08em;margin:-.14em -.08em}

/* ---------------------------------------------- 5. controls */
.pill,.pill--primary,.pill--ghost,a.cta,.cta-sec .pill{
  font-size:17px;font-weight:600;letter-spacing:-.01em;border-radius:9999px;
  padding:12px 24px;transition:transform .2s var(--ease),background .25s var(--ease),opacity .25s}
.pill--primary,.pill-solid,a.cta{background:var(--violet)!important;color:#fff!important;border:0!important}
.pill--primary:hover,.pill-solid:hover,a.cta:hover{background:#5124c9!important;color:#fff!important}
.pill--ghost,.pill-ghost{background:transparent!important;border:1px solid var(--accent)!important;color:var(--accent)!important}
.pill--ghost:hover,.pill-ghost:hover{background:rgba(var(--accent-rgb),.08)!important}
.band-black .pill--ghost,.band-black .pill-ghost{border-color:var(--accent-on-dark)!important;color:var(--accent-on-dark)!important}

/* interaction baseline */
:where(a,button,.pill,a.cta):focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:8px}
:where(a,button,.pill,a.cta):active{translate:0 1.5px}

/* ---------------------------------------------- 6. surfaces
   RULE (user, durable): never a grey card on a white band —
   white cards on a tinted band instead, especially text-only cards. */
.card,.tile-card,.pcard4,.xchip,.sodm{
  background:#fff;border-radius:var(--radius);box-shadow:var(--e-card);color:var(--ink)}
.band-black .card,.band-black .tile-card,.band-black .sodm{background:#fff;color:var(--ink)}
.num-tile__big,.res b,.stage__n,.pfrow__n,.stat b{
  font-variant-numeric:tabular-nums;letter-spacing:-.04em;font-weight:600}
.band-black .num-tile__big,.band-black .res b,.band-black .stat b{color:var(--violet-mist)}

/* ghost words stay colossal, but quiet on light grounds */
.has-ghost::before{color:rgba(10,10,10,.045)!important}
.band-black.has-ghost::before{color:rgba(255,255,255,.055)!important}

/* ledger rows — the house grammar, re-inked for light */
.row,.prow,.plrow,.irow,.pled{border-color:var(--hairline)}
.row p,.prow p,.irow p{color:var(--ink-mut)}

/* ---------------------------------------------- 7. nav */
.mpnav{background:rgba(251,251,253,.82)!important;
  backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.06)!important;height:56px!important}
.mpnav__mark img,.mpnav__mark svg{height:31px!important;width:auto!important;filter:brightness(0)!important}
.mpnav__link{color:rgba(29,29,31,.8)!important;font-size:17px!important;font-weight:400!important;
  letter-spacing:-.01em!important;text-transform:none!important}
.mpnav__link:hover{color:#1d1d1f!important}
.mpnav__cta{background:var(--violet)!important;color:#fff!important;font-weight:600!important;
  font-size:17px!important;padding:6px 14px!important;border-radius:9999px!important}
.mpnav__cta:hover{background:#5124c9!important;color:#fff!important}
.mpnav__grad,.mpnav__shine{display:none!important}
.mpnav__burger{color:#1d1d1f!important}
/* mega panel + mobile drawer on the light system */
.mpnav__mega,.mpnav__panel,.mpnav__drawer{background:rgba(251,251,253,.98)!important;color:var(--ink)!important}
.mpnav__mega *,.mpnav__panel *,.mpnav__drawer *{--ink:#1d1d1f;--ink-mut:#6e6e73}
.mp-skip{background:var(--violet);color:#fff}

/* ---------------------------------------------- 8. footer */
.foot{background:var(--tile-alt)!important;color:var(--ink)!important;border-top:1px solid var(--hairline)}
.foot *{--ink:#1d1d1f;--ink-mut:#6e6e73;--ink-faint:#86868b}
.foot a{color:var(--ink)!important;opacity:.78}
.foot a:hover{opacity:1;color:var(--violet)!important}
.foot__mark img,.foot__brand img{filter:brightness(0)!important}
.foot__base{border-top:1px solid var(--hairline)}

/* ---------------------------------------------- 9. motion
   Apple-soft section reveals: hold until clear of the edge, then
   a slow rise. mp-motion.js owns the trigger; this is the feel. */
.rv,.reveal{transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out)}
.rv{opacity:0;transform:translateY(24px)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
.no-io .rv{opacity:1!important;transform:none!important}

/* no play glyphs, anywhere (user mandate) */
.adtile .poster::after,.ctv-mock::after,.vid::after{content:none!important}

@media (prefers-reduced-motion:reduce){
  .rv,.reveal{transition:none!important;opacity:1!important;transform:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

/* ---------------------------------------------- 10. sentence case, site-wide
   The caps were CSS-only (274 uppercase rules) — the HTML was
   already sentence case, so this one override re-voices every
   page. Uppercase is banned in the Pulse language. */
h1,h2,h3,h4,h5,h6,
.eyebrow,.k,.kicker,.lede,.hero h1,.ph h1,.kh,.cside h2,
.pfrow h3,.fstage__t,.prx__t,.prxrow h3,.resprow h3,.strow h3,
.proofrow h3,.layer h3,.vals .layer h3,.fmt__tag,.odband__line,
.tvtile__cap b,.pdband p,.tick .wrap,.hero__stat,.hero__sub{
  text-transform:none!important}

/* ---------------------------------------------- 11. heroes go light + silent
   The dark full-bleed video hero was the least-Apple thing on the
   site and the biggest mismatch with the new homepage. Every hero
   is now white, quiet, and carried by type. The footage is not
   deleted — where a page wants it, it returns as a CONTAINED
   rounded panel in the body (the research-section grammar). */
.hero,.heroD{background:#fff!important;color:var(--ink)!important;
  min-height:auto!important;padding:150px 0 90px!important}
.hero,.heroD,.hero *,.heroD *{--ink:#1d1d1f;--ink-mut:#6e6e73;--ink-muted:#6e6e73;
  --ink-faint:#86868b;--accent:#5F2CE3;
  --iri:linear-gradient(97deg,#5F2CE3 6%,#7B4BE8 40%,#A66BD9 68%,#C9789E 92%)}
.hero__bgvid,.hero__bgscrim,.hero__waves,.hero__grid,.hero__vid,
.hero canvas,.heroD canvas{display:none!important}
/* one soft brand wash keeps the white from going flat */
.hero__glow{opacity:1!important;
  background:radial-gradient(46vw 34vh at 50% 38%,rgba(245,193,169,.20),transparent 68%),
             radial-gradient(34vw 28vh at 66% 58%,rgba(144,100,255,.11),transparent 70%)!important;
  filter:none!important;mix-blend-mode:normal!important}
.hero__inner{position:relative;z-index:2}
.hero h1,.heroD h1{font-size:clamp(52px,7.4vw,112px);font-weight:600;letter-spacing:-.035em;line-height:1.04}
.hero .lede,.hero__sub{color:var(--ink-mut)!important;max-width:60ch;margin-left:auto;margin-right:auto}
.hero__scroll{color:var(--ink-faint)!important}
/* the serif accent in a hero headline is the page's gradient moment */
.hero h1 .serif,.hero h1 .acc,.heroD h1 .serif,.heroD h1 .acc{
  display:inline-block;color:transparent!important;background:var(--iri);
  -webkit-background-clip:text!important;background-clip:text!important;
  padding:.14em .08em;margin:-.14em -.08em}
.hero h1 .dot{color:var(--ink)!important}

/* breadcrumbs read as quiet metadata, not chrome */
.crumbs,.hero__crumbs{color:var(--ink-faint)!important;font-size:14px}
.crumbs a,.hero__crumbs a{color:var(--ink-faint)!important}
.crumbs a:hover,.hero__crumbs a:hover{color:var(--violet)!important}

/* headings never inherit a stale light ink */
.hero h1,.hero h2,.hero p,.heroD h1,.heroD h2,.heroD p{color:var(--ink)}
.hero h1 .serif,.hero h1 .acc,.heroD h1 .serif,.heroD h1 .acc,.grad{color:transparent!important}

/* ---------------------------------------------- 12. lib-layer corrections
   Three legacy behaviours fought the light system on every page; each is
   fixed once here rather than patched per page. */

/* (a) mp-motion's fluid band lerp blanks .band-black and lerps the body from
   --void, which is now WHITE — black chapter bands rendered white. Pin them. */
html.mp-fluid section.sec.band-black:not(.hero),
html.mp-fluid body section.sec.band-black,
html.mp-fluid section.sec.band-black,
html.mp-fluid .band-black{background:#000!important}
html.mp-fluid .mp-bloom{opacity:.25!important;
  background:radial-gradient(60vw 40vh at 50% 50%,rgba(95,44,227,.16),transparent 70%)!important}

/* (b) mp-brand-waves injects a fixed scroll-progress bar still carrying the
   retired Kinetic ramp (peach → magenta → cyan). Re-ink it to the brand. */
.mp-scrollbar{background:linear-gradient(90deg,#5F2CE3,#7B4BE8,#A66BD9,#C9789E)!important;
  animation:none!important;opacity:.9}

/* (c) the sticky CTA pill: brand purple, sentence case, no tracking */
.mp-sticky-cta,.mpnav__sticky,a.mp-sticky{background:var(--violet)!important;color:#fff!important;
  letter-spacing:-.01em!important;text-transform:none!important;font-weight:600!important}
.mp-sticky-cta .chip,.mpnav__sticky .chip{background:#fff!important;color:var(--violet)!important}

/* ---------------------------------------------- 13. shared components that
   still carried dark-canvas chrome. Both were flagged on many pages at once;
   both belong here rather than in per-page overrides. */

/* (a) ad-unit tiles: the poster chrome (Live chip, family, title) is white by
   design because a unit's screen is dark. Give the tile that dark ground back
   so the chrome reads in the pre-mount, unmounted and offline states too. */
/* THE AD SYSTEM IS LEFT ALONE. Its poster layer is deliberately
   background:transparent !important so the live unit shows through, and
   its crop geometry is measured — any background/overflow/size override
   here paints over or clips real units. The only safe change is the
   banned uppercase on the family label, plus a shadow so the white
   poster labels survive the offline whisper state on a light band. */
.adtile__fam{text-transform:none!important;letter-spacing:-.01em!important;font-weight:600!important}
.adtile__live,.adtile__fam,.adtile__title{text-shadow:0 1px 4px rgba(0,0,0,.6)}

/* (b) the capability tour above the footer: white ink on what is now a white
   band, with a mono tracked pager. */
.mpcaptour{background:var(--tile-alt)!important;border-top:1px solid var(--hairline)!important}
.mpcaptour *{--ink:#1d1d1f;--ink-mut:#6e6e73}
.mpcaptour__t,.mpcaptour__lnk{color:var(--ink)!important;font-family:var(--font,'Geist',system-ui,sans-serif)!important;
  text-transform:none!important;letter-spacing:-.01em!important}
.mpcaptour__dir{color:var(--ink-faint)!important;font-family:var(--font,'Geist',system-ui,sans-serif)!important;
  text-transform:none!important;letter-spacing:-.01em!important;font-size:14px!important}
.mpcaptour__all{color:var(--violet)!important;border-color:var(--violet)!important;
  text-transform:none!important;letter-spacing:-.01em!important}

/* footer columns: keep the four link columns on one row at desktop — the
   inline per-page copies wrap "Resources" onto its own line at ~1500px */
@media(min-width:980px){
  .foot__cols{flex-wrap:nowrap!important;gap:clamp(24px,3.4vw,64px)!important}
  .foot__col{flex:1 1 auto!important;min-width:0!important}
}

/* below that, the columns wrap — and justify-content:flex-end right-aligns each
   wrapped line on its own, so the 2x2 rows never line up with each other or with
   the brand block. Grid them instead so the edges agree. */
@media(max-width:979px){
  .foot__cols{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    justify-content:stretch!important;gap:clamp(20px,4vw,36px)!important}
  .foot__col{min-width:0!important}
}
@media(max-width:479px){.foot__cols{grid-template-columns:1fr!important}}

/* related-capability cards carry a 4px identity stripe whose colour each page
   sets inline as --tg. Those values are the retired Kinetic rainbow (blue, cyan,
   green, teal, magenta, orange, amber) — off-palette under Pulse, and rendered
   three different ways across sibling pages. One violet identity, centrally. */
.relt{--tg:linear-gradient(90deg,#5F2CE3,#A66BD9)!important}
/* NB: override the --tg custom property, never .relt::after wholesale — on
   first-party.html that pseudo-element is a 58%-tall bottom scrim, not the
   4px stripe, and repainting it turns the card into a flat purple slab. */

/* ---------------------------------------------- 14. everything reaches somewhere
   Homepage cards are destinations, not decoration. */
a.hl-card,a.tvt,a.sigc{display:block;color:inherit;text-decoration:none}
a.tvt,a.sigc{position:relative;border-radius:18px;overflow:hidden;margin:0}
a.hl-card:hover,a.tvt:hover,a.sigc:hover{transform:translateY(-3px)}
a.hl-card,a.tvt,a.sigc{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
a.tvt:hover,a.sigc:hover{box-shadow:0 24px 48px -24px rgba(0,0,0,.34)}
.xgo{display:inline-block;margin-top:10px;font-size:15px;font-weight:600;color:var(--violet)}
.xgo:hover{text-decoration:underline}
.xitem:not(.open) .xgo{display:none}

/* ---------------------------------------------- 15. film bands
   Our black chapter bands can carry footage instead of flat black —
   the deck's gradient section-breaks, in motion. Kept deliberately
   quiet: the film sits under a scrim so type never fights it, and it
   is phone-gated (data-lsrc) like every other ambient video. */
.filmbg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.filmbg video,.filmbg img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.42}
.filmbg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 50%,rgba(0,0,0,.42),rgba(0,0,0,.82) 78%)}
.has-film{position:relative;isolation:isolate}
.has-film>*:not(.filmbg){position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.filmbg video{display:none}}

/* ---------------------------------------------- 16. the mega menu
   Was a dark ledger with numerals, arrows and hover video. Rebuilt as
   the Apple menu shape: a light panel of quiet columns — a small grey
   heading, one prominent destination, then plain labelled links. */
.mpmega{background:rgba(251,251,253,.98)!important;
  -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
  border-bottom:1px solid rgba(0,0,0,.07)!important;color:var(--ink)!important;
  box-shadow:0 24px 48px -32px rgba(0,0,0,.28)}
.mpmega *{--ink:#1d1d1f;--ink-mut:#6e6e73}
.mpmega,.mpmega *{text-align:left!important}
.mpmega__inner{max-width:1120px!important;
  padding:38px clamp(20px,4vw,44px) 48px!important;
  display:grid!important;grid-template-columns:1.2fr 1fr 1fr!important;
  column-gap:clamp(28px,4vw,64px);row-gap:2px;align-items:start;
  grid-auto-flow:row}
/* the links fill columns two and three. Each panel pins its own rows so
   both columns start on the same line whatever the item count. */
.mpmega--solutions .mpmega__link:nth-of-type(1){grid-column:2!important;grid-row:2!important}
.mpmega--solutions .mpmega__link:nth-of-type(2){grid-column:2!important;grid-row:3!important}
.mpmega--solutions .mpmega__link:nth-of-type(3){grid-column:2!important;grid-row:4!important}
.mpmega--solutions .mpmega__link:nth-of-type(4){grid-column:2!important;grid-row:5!important}
.mpmega--solutions .mpmega__link:nth-of-type(5){grid-column:3!important;grid-row:2!important}
.mpmega--solutions .mpmega__link:nth-of-type(6){grid-column:3!important;grid-row:3!important}
.mpmega--solutions .mpmega__link:nth-of-type(7){grid-column:3!important;grid-row:4!important}
.mpmega--pillars .mpmega__link:nth-of-type(1){grid-column:2!important;grid-row:2!important}
.mpmega--pillars .mpmega__link:nth-of-type(2){grid-column:2!important;grid-row:3!important}
.mpmega--pillars .mpmega__link:nth-of-type(3){grid-column:2!important;grid-row:4!important}
.mpmega--pillars .mpmega__link:nth-of-type(4){grid-column:3!important;grid-row:2!important}
.mpmega--pillars .mpmega__link:nth-of-type(5){grid-column:3!important;grid-row:3!important}
/* the feature column spans however many rows the links occupy */
.mpmega__connect{grid-row:2/span 5!important}
.mpmega__hd{grid-column:1/-1!important;font-size:14px;font-weight:400;color:var(--ink-faint);
  margin-bottom:14px;letter-spacing:-.01em}
/* the featured destination is the big first column */
.mpmega__connect{grid-column:1!important;grid-row:2/span 3!important;align-self:start!important;
  display:flex!important;flex-direction:column;align-items:flex-start!important;gap:6px;
  margin:0!important;padding:0!important;border:0!important;border-top:0!important;text-decoration:none}
/* legacy drew a full-width iri sweep across the panel from this link, and
   spanned it 1/-1 so its box lay over the top row of every column — that is
   what made the first links in each column unclickable */
.mpmega__connect::after,.mpmega__connect::before{display:none!important;content:none!important}
.mpmega__cbig{white-space:normal!important}
.mpmega__cbig{font-size:clamp(24px,2.2vw,34px)!important;font-weight:600!important;
  letter-spacing:-.03em!important;line-height:1.1;color:var(--ink)!important;text-transform:none!important}
.mpmega__csub{display:none!important}
.mpmega__connect:hover .mpmega__cbig{color:var(--violet)!important}
/* plain links fill the remaining columns */
.mpmega__link{display:flex!important;flex-direction:column;align-items:flex-start!important;
  gap:2px;padding:7px 0!important;border:0!important;background:none!important;
  overflow:visible!important;justify-items:start!important}
.mpmega__link>*,.mpmega__connect>*{margin:0!important;text-align:left!important}
.mpmega__ct{font-size:17px!important;font-weight:600!important;letter-spacing:-.01em!important;
  color:var(--ink)!important;text-transform:none!important}
.mpmega__cd{font-size:13.5px!important;font-weight:400!important;line-height:1.35!important;color:var(--ink-mut)!important;
  text-transform:none!important;letter-spacing:0!important;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.mpmega__link:hover .mpmega__ct{color:var(--violet)!important}
/* the old ledger furniture has no place in a menu */
.mpmega__shape,.mpmega__go,.mpmega__cshape,.mpmega__cgo,
.mpmega__vid,.mpmega__vscrim,.mpmega__nm,.mpmega-scrim{display:none!important}
@media(max-width:900px){.mpmega__inner{grid-template-columns:1fr!important}
  .mpmega__connect{grid-row:auto;margin-bottom:10px}}

/* ---------------------------------------------- 17. channel tiles carry colour
   A row of identical white cards reads inert. Each tile now takes its own
   gradient from the brand family (violet → indigo → orchid), the way the
   deck's feature cards do — colour for life, never for decoration. */
.ptile{color:#fff!important;border:0!important;
  background-image:linear-gradient(160deg,#7B4BE8,#5F2CE3)!important;
  box-shadow:0 18px 40px -24px rgba(60,25,150,.55)!important;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ptile:nth-child(6n+2){background-image:linear-gradient(160deg,#5B33E6,#33179B)!important}
.ptile:nth-child(6n+3){background-image:linear-gradient(160deg,#8E5BD9,#B0678F)!important}
.ptile:nth-child(6n+4){background-image:linear-gradient(160deg,#6B3AE0,#9064FF)!important}
.ptile:nth-child(6n+5){background-image:linear-gradient(160deg,#4A22B8,#7B4BE8)!important}
.ptile:nth-child(6n+6){background-image:linear-gradient(160deg,#A166C9,#C9789E)!important}
.ptile:hover{transform:translateY(-4px);box-shadow:0 26px 54px -24px rgba(60,25,150,.6)!important}
.ptile h3{color:#fff!important}
/* the tag becomes a quiet overline on colour; the chip a glass disc */
.ptile__tag{background:transparent!important;color:rgba(255,255,255,.78)!important;
  padding:0!important;border-radius:0!important;font-size:14.5px!important;margin-bottom:8px!important;
  order:2}
.ptile h3{order:3}
.ptile__arr{background:rgba(255,255,255,.18)!important;color:#fff!important;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);order:1}

/* ---------------------------------------------- 18. nav hover: activate, don't glow
   The legacy CTA carried a soft peach drop-glow and the mark a gradient
   halo (::before). Both read as decoration. The pill now deepens and its
   chip inverts; the lockup switches to the purple mark — the control
   looks like it is engaging rather than emitting light. */
.mpnav__cta{box-shadow:none!important;transition:background .2s var(--ease),transform .2s var(--ease)}
.mpnav__cta:hover{background:#4d1fbd!important;transform:translateY(-1px)}
.mpnav__cta:active{transform:translateY(0)}
.mpnav__cta .chip{transition:background .2s var(--ease),color .2s var(--ease)}
.mpnav__cta:hover .chip{background:#fff!important;color:var(--violet)!important;transform:none!important}

/* the mark: painted through a mask of the white lockup, so its colour is a
   CSS property rather than a baked-in raster — it can then actually change
   on hover instead of glowing. The <img> stays for layout and a11y. */
.mpnav__mark{-webkit-mask:url(../assets/brand/mp-lockup-white.png) left center/auto 31px no-repeat;
  mask:url(../assets/brand/mp-lockup-white.png) left center/auto 31px no-repeat;
  background-color:#1d1d1f;transition:background-color .22s var(--ease)}
.mpnav__mark:hover,.mpnav__mark:focus-visible{background-color:var(--violet)}
.mpnav__mark::before,.mpnav__mark::after{display:none!important;content:none!important}
.mpnav__mark img{opacity:0!important}
.mpnav__mark:hover{transform:none!important}

/* ---------------------------------------------- 19. the capability explorer
   Rebuilt to the Apple pattern rather than patched: a quiet stack of pills
   where the SELECTED one becomes a single soft card carrying its own copy,
   beside one large clean image. No device chrome, nothing cropped by the
   section, and no pill-inside-a-card. Lives here because mp-nav injects its
   styles at runtime and the page's own block predates all of this. */
@media(min-width:901px){#explore .explorer{grid-template-columns:minmax(300px,380px) 1fr!important;
  gap:clamp(32px,5vw,84px)!important;align-items:center!important}}
/* below that the two-column grid must actually collapse: the page rule that
   stacks it is not !important, so an unscoped override here forced a 300px
   rail into a 390px viewport and pushed the document 174px wide */
@media(max-width:900px){
  #explore .explorer{grid-template-columns:1fr!important;gap:28px!important}
  #explore .device{max-width:100%!important;margin:0 auto!important}
  #explore .xrail .xchip{width:100%!important}
}
#explore .xrail{gap:10px!important}

/* the resting pill */
#explore .xrail .xchip{width:100%!important;justify-content:flex-start!important;
  padding:15px 22px!important;border-radius:9999px!important;
  background:#fff!important;color:var(--ink)!important;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 10px 24px -18px rgba(0,0,0,.22)!important;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease)!important}
#explore .xrail .xchip:hover{transform:translateY(-1px)}

/* the selected topic: one soft card, the pill flattened into its header */
#explore .xrail .xitem{border-radius:9999px;transition:background .3s var(--ease-out),border-radius .3s var(--ease-out)}
/* the card is composed from the header row and the body, which both take
   styling reliably; the wrapper itself refuses a background here. */
#explore .xitem.open{border-radius:26px!important}
#explore .xrail .xitem.open .xchip,
#explore .xrail .xitem.open .xchip.on{
  background:#e9e9ec!important;color:var(--ink)!important;box-shadow:none!important;
  transform:none!important;padding:16px 22px 8px!important;
  border-radius:24px 24px 0 0!important}
#explore .xrail .xitem.open .xchip .plus{border-color:rgba(29,29,31,.3)!important;color:var(--ink)!important}
#explore .xrail .xitem.open .xchip .xn{color:var(--ink-mut)!important;opacity:1!important}
#explore .xrail .xitem.open .xbody{max-height:none!important;
  background:#e9e9ec!important;border-radius:0 0 24px 24px!important;
  padding:0 24px 18px!important;color:var(--ink-mut)!important;
  line-height:1.55!important;font-size:15.5px!important}
#explore .xgo{display:block!important;margin-top:12px!important}

/* the media: one large image, no fake device around it */
#explore .device{width:100%!important;max-width:720px!important;margin:0 0 0 auto!important}
#explore .device .lid{background:none!important;padding:0!important;
  border-radius:0!important;box-shadow:none!important}
#explore .device .screen{aspect-ratio:16/10!important;background:none!important;
  border-radius:28px!important;width:100%!important;max-width:none!important;
  box-shadow:0 34px 70px -48px rgba(0,0,0,.42)!important}
#explore .device .screen>img{border-radius:28px;object-fit:cover;object-position:center top}
/* instrument panels are authored at 16:10 to match this slot exactly, so they
   fill it edge to edge with nothing cropped — see _spo-dash.html and
   capabilities/measurement.html?flat=1 for how they are captured */
#explore .device .screen>img[src*="instr-"]{object-position:center}
/* the legacy device shell had a base/foot below the lid — nothing but the
   image should remain in this section */
#explore .device>*:not(.lid){display:none!important}
#explore .device .lid::after,#explore .device .lid::before{display:none!important;content:none!important}

/* ---------------------------------------------- 20. cards acknowledge the cursor
   The plus badge is the affordance, so it is what moves: a quarter turn (a plus
   is 90-degree symmetric, so it lands looking identical — the motion is the
   point, not the destination) while the disc fills violet and the glyph goes
   white. That reads as activating rather than decorating, which is the note
   from the nav hover pass. The card lifts a few pixels behind it.
   Scoped with :has so the plain .pcard text blocks on privacy and social
   listening — which carry no badge and are not controls — stay still. */
.pcard:has(.pcard__plus),.pcard4{
  transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1);
  will-change:transform}
.pcard:has(.pcard__plus):hover,.pcard:has(.pcard__plus):focus-within,
a.pcard4:hover,a.pcard4:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 32px 64px -30px rgba(29,29,31,.34)!important}
.pcard__plus,.pcard4 .plus{
  transition:transform .5s cubic-bezier(.16,1,.3,1),background-color .3s ease,color .3s ease}
/* the badge is a peach disc with a white plus, at rest and on hover — the disc
   only deepens. It never goes violet: the peach circle is the constant. */
.pcard__plus,.pcard4 .plus{
  background:var(--peach,#FAA374)!important;color:#fff!important;
  border:0!important;font-weight:700}
.pcard__plus::before,.pcard4 .plus::before{color:#fff!important;font-weight:700}
.pcard:has(.pcard__plus):hover .pcard__plus,
.pcard:has(.pcard__plus):focus-within .pcard__plus,
a.pcard4:hover .plus,a.pcard4:focus-visible .plus{
  transform:rotate(90deg) scale(1.16)!important;
  background:#F08A4B!important;color:#fff!important}
.pcard__more span{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.pcard:hover .pcard__more span{transform:translateX(5px)}
@media(prefers-reduced-motion:reduce){
  .pcard,.pcard4,.pcard__plus,.pcard4 .plus,.pcard__more span{transition:none!important}
  .pcard:hover,a.pcard4:hover{transform:none!important}
  .pcard:hover .pcard__plus,a.pcard4:hover .plus{transform:none!important}
}
/* legacy Kinetic --paper (#F2F0EA) still tints .band-paper on the capability
   pages, so their tint reads warm-grey beside the Pulse #F5F4F6 everywhere
   else. Point the token at the Pulse tint rather than patching per page. */
:root{--paper:#F5F4F6}
.band-paper{background:var(--void-1,#F5F4F6)!important}

/* The plus badge carries a WHITE glyph on every disc, always. Three pages had
   drifted via page-level colour on the badge or its parent — partners to violet
   #5F2CE3, environment-neutral to #402097, agency-enabled to a brown #8F3708 —
   because the SVG strokes with currentColor. */
.pluscirc{color:#fff!important}
.pluscirc svg{stroke:#fff!important}

/* ---------------------------------------------- 21. one masthead for insights
   The articles had drifted into three grammars — two centred, eight left, with
   the accent word variously sans-gradient, plain serif, or serif+gradient. The
   rest of the site is one thing: centred, with a serif-italic gradient accent.
   Each article carries its own inline .ahero block, so this lands here (last in
   <head>) rather than in ten places. */
.ahero{text-align:center!important}
.ahero .crumb{justify-content:center!important}
.ahero .ahero__eyebrow,.ahero__eyebrow{justify-content:center}
.ahero h1{max-width:22ch!important;margin-left:auto!important;margin-right:auto!important}
.ahero .ahero__dek,.ahero__dek{margin-left:auto!important;margin-right:auto!important}
.ahero .ahero__meta,.ahero__meta{justify-content:center!important}
/* the serif accent is the article's one gradient moment, same as every hero */
.ahero h1 .acc{display:inline-block;color:transparent!important;background:var(--iri);
  -webkit-background-clip:text!important;background-clip:text!important;
  font-family:var(--font-serif)!important;font-style:italic!important;font-weight:400!important;
  padding:.14em .08em;margin:-.14em -.08em}
.ahero h1 .dot{color:var(--ink)!important;background:none!important;
  -webkit-text-fill-color:currentColor!important}
