/* ==========================================================================
   METAFLIGHT HUD - WORLD & ECONOMY (post 10156)
   Load order: mf-hud-tokens.css, mf-hud-chrome.css, then this file.

   Structure lives in Breakdance so content stays editable in the builder.
   This file carries layout + style only.

   SELF-CONTAINED ON PURPOSE, same rationale as mf-hud-roles.css: the roles and
   homepage stylesheets are enqueued on their own page only, so none of their
   classes exist here. Everything is redeclared under the mf-w- prefix. The only
   borrowed classes are .mf-rv (reveal) and .mf-bd-btn* (buttons), both living
   in mf-hud-chrome.css which loads on every page.

   SPECIFICITY: every rule is prefixed with body.breakdance so it reliably wins
   against Breakdance's own per-element CSS (.bde-div-10156-441 etc), which ties
   on weight and may load after this file.

   Z-INDEX: the background field is injected at wp_footer, so it is last in the
   DOM and paints over anything without a stacking context. Every section here
   declares position:relative + z-index:2. Do not remove.

   CURRENCY: this page shows no monetary amount at all. The operating result is
   indexed to 100. That keeps the FC / euro decoupling rule out of play entirely
   rather than testing its edge.
   ========================================================================== */

/* ==========================================================================
   SHELL
   ========================================================================== */
body.breakdance .mf-w-hero,
body.breakdance .mf-w-sec{
  position:relative;z-index:2;
  padding:0;
  background:transparent;
}

/* Breakdance wraps every section's children in .section-container, a flex
   column with align-items:flex-start. Children would otherwise shrink to their
   own content width and hug the left edge, so margin:auto does nothing. */
body.breakdance .mf-w-hero > .section-container,
body.breakdance .mf-w-sec > .section-container{
  align-items:stretch;
  max-width:1240px;margin:0 auto;width:100%;
  padding:6rem 2rem;
}
body.breakdance .mf-w-hero > .section-container{padding:11rem 2rem 5rem}
body.breakdance .mf-w-wrap{width:100%;display:block}

/* post-10156-defaults.css ships:
     .breakdance .bde-div{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
   Consequences, which look like two unrelated bugs:
     1. flex children shrink to their own content width, so centering a child
        has nothing to centre inside;
     2. align-items:flex-start survives a switch to grid, so cards in the same
        row end up at different heights.
   Anything new that lays out children must be added to one of these lists. */
body.breakdance .mf-w-head,
body.breakdance .mf-w-hero-txt,
body.breakdance .mf-w-split-t,
body.breakdance .mf-w-law,
body.breakdance .mf-w-phase,
body.breakdance .mf-w-tile,
body.breakdance .mf-w-st,
body.breakdance .mf-w-ctabox,
body.breakdance .mf-w-mon,
body.breakdance .mf-w-feed,
body.breakdance .mf-w-led,
body.breakdance .mf-w-faq-panel{align-items:stretch}
body.breakdance .mf-w-laws-row,
body.breakdance .mf-w-phase-row,
body.breakdance .mf-w-tiles,
body.breakdance .mf-w-state-row,
body.breakdance .mf-w-mon-rows,
body.breakdance .mf-w-feed-list,
body.breakdance .mf-w-led-rows,
body.breakdance .mf-w-phase-m{align-items:stretch}

/* ==========================================================================
   TYPE PRIMITIVES
   ========================================================================== */
body.breakdance .mf-w-eb{
  display:flex;align-items:center;gap:1rem;
  font-family:var(--mf-mono);font-size:.64rem;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--mf-cyan);
  margin:0 0 1.3rem;
}
body.breakdance .mf-w-eb::before{
  content:'';height:1px;width:clamp(24px,5vw,58px);flex:none;
  background:linear-gradient(90deg,transparent,var(--mf-cyan-lit));
}
body.breakdance .mf-w-eb-c{justify-content:center}
body.breakdance .mf-w-eb-c::after{
  content:'';height:1px;width:clamp(24px,5vw,58px);flex:none;
  background:linear-gradient(90deg,var(--mf-cyan-lit),transparent);
}

body.breakdance h1.mf-w-h1{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(2.3rem,5.6vw,4.1rem);
  line-height:1.05;letter-spacing:.02em;
  text-transform:uppercase;color:var(--mf-text);
  margin:0;
}
body.breakdance h1.mf-w-h1 .mf-w-grad{
  display:block;
  color:var(--mf-cyan);
  -webkit-text-fill-color:currentColor;
  background-image:linear-gradient(100deg,var(--mf-cyan) 10%,#4DA6FF 52%,var(--mf-violet) 96%);
  background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  body.breakdance h1.mf-w-h1 .mf-w-grad{-webkit-text-fill-color:transparent;color:transparent}
}

body.breakdance .mf-w-h2{
  font-family:'Orbitron',sans-serif;font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.6rem,3.4vw,2.7rem);
  letter-spacing:.03em;line-height:1.15;
  color:var(--mf-text);
  margin:0 0 .9rem;
}
body.breakdance .mf-w-h3{
  font-family:'Orbitron',sans-serif;font-weight:700;
  text-transform:uppercase;
  font-size:.94rem;letter-spacing:.05em;line-height:1.3;
  color:var(--mf-text);
  margin:0 0 .7rem;
}
body.breakdance .mf-w-lead{
  font-family:'Rajdhani',sans-serif;
  font-size:1.12rem;line-height:1.75;color:#A8BDD4;
  max-width:620px;margin:1.5rem 0 2.2rem;
}
body.breakdance .mf-w-sub{
  font-family:'Rajdhani',sans-serif;
  font-size:1.02rem;line-height:1.72;color:var(--mf-muted);
  max-width:760px;margin:0 auto;
}
body.breakdance .mf-w-p{
  font-family:'Rajdhani',sans-serif;
  font-size:1.06rem;line-height:1.75;color:#A8BDD4;
  max-width:560px;margin:0 0 1.6rem;
}
body.breakdance .mf-w-note{
  font-family:var(--mf-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;
  line-height:1.9;color:var(--mf-muted);
  padding-left:1rem;margin:0;
  border-left:1px solid var(--mf-hair);
  max-width:460px;
}
body.breakdance .mf-w-kicker{
  font-family:'Rajdhani',sans-serif;font-weight:600;
  font-size:clamp(1.05rem,1.9vw,1.35rem);
  line-height:1.6;color:var(--mf-text);
  text-align:center;max-width:820px;
  margin:3.5rem auto 0;
}
body.breakdance .mf-w-head{text-align:center;max-width:820px;margin:0 auto 3.5rem}
/* the eyebrow is a flex row; it can only centre once it spans the head */
body.breakdance .mf-w-head .mf-w-eb,
body.breakdance .mf-w-head .mf-w-h2,
body.breakdance .mf-w-head .mf-w-sub{width:100%}

/* ==========================================================================
   GLASS PANEL
   A border cannot follow a clip-path, so the frame is an inset box-shadow.
   Glows must use filter:drop-shadow() - clip-path clips box-shadow.
   ========================================================================== */
body.breakdance .mf-w-panel{
  position:relative;
  background:linear-gradient(180deg,var(--mf-veil-top),var(--mf-veil-bot)),rgba(8,10,14,.42);
  backdrop-filter:var(--mf-blur);-webkit-backdrop-filter:var(--mf-blur);
  box-shadow:inset 0 0 0 1px var(--mf-hair),inset 0 1px 0 rgba(255,255,255,.085),0 18px 60px rgba(0,0,0,.45);
  clip-path:polygon(var(--mf-ch-sm) 0,100% 0,100% calc(100% - var(--mf-ch-sm)),calc(100% - var(--mf-ch-sm)) 100%,0 100%,0 var(--mf-ch-sm));
  width:100%;
}
/* L-shaped corner brackets, pseudo-elements only - nothing to delete in the builder */
body.breakdance .mf-w-panel::before,
body.breakdance .mf-w-panel::after{
  content:'';position:absolute;width:13px;height:13px;z-index:4;pointer-events:none;
  transition:width .35s var(--mf-ease),height .35s var(--mf-ease),border-color .35s var(--mf-ease);
}
body.breakdance .mf-w-panel::before{
  top:10px;right:10px;
  border-top:1px solid rgba(140,232,255,.34);
  border-right:1px solid rgba(140,232,255,.34);
}
body.breakdance .mf-w-panel::after{
  bottom:10px;left:10px;
  border-bottom:1px solid rgba(140,232,255,.34);
  border-left:1px solid rgba(140,232,255,.34);
}

/* ==========================================================================
   01 - HERO
   ========================================================================== */
body.breakdance .mf-w-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(62% 48% at 50% 26%,rgba(0,212,255,.09),transparent 68%);
}
body.breakdance .mf-w-hero-in{
  display:grid;grid-template-columns:1.02fr .98fr;gap:3.6rem;align-items:center;
  width:100%;
}
body.breakdance .mf-w-hero-txt{display:block}

/* --- status strip --------------------------------------------------------- */
/* flex-direction:row is NOT optional on any of these: post-10156-defaults.css
   ships .bde-div{display:flex;flex-direction:column}, so declaring display:flex
   alone leaves the children stacked. */
body.breakdance .mf-w-strip{
  display:flex;flex-direction:row;flex-wrap:wrap;gap:0;
  border-top:1px solid var(--mf-hair);border-bottom:1px solid var(--mf-hair);
  margin:0 0 2.2rem;
}
body.breakdance .mf-w-stat{
  flex:1 1 0;min-width:118px;
  padding:.95rem 1.1rem .95rem 0;
  display:block;
}
body.breakdance .mf-w-stat + .mf-w-stat{padding-left:1.1rem;border-left:1px solid var(--mf-hair)}
body.breakdance .mf-w-stat-n{
  font-family:var(--mf-mono);font-size:.58rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mf-muted);
  margin:0 0 .45rem;
}
body.breakdance .mf-w-stat-v{
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mf-cyan);margin:0;
}

body.breakdance .mf-w-ctas{display:flex;flex-direction:row;flex-wrap:wrap;gap:.9rem;align-items:center;width:auto}
body.breakdance .mf-w-ctas-c{justify-content:center}

/* --- route demand monitor -------------------------------------------------
   The differentiator, stated as an instrument rather than a paragraph: one
   city pair, the demand the model allocates to it, and how many operators are
   already reaching for it. The note under the panel says the figures are a
   sample of model output. No wording anywhere claims a live feed.
   -------------------------------------------------------------------------- */
body.breakdance .mf-w-mon{padding:1.5rem 1.6rem 1.35rem;display:block}
body.breakdance .mf-w-mon-hd{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  padding-bottom:1rem;margin-bottom:.4rem;
  border-bottom:1px solid var(--mf-hair);
}
body.breakdance .mf-w-mon-t{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--mf-mono);font-size:.6rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mf-cyan);margin:0;
}
body.breakdance .mf-w-mon-t::before{
  content:'';width:6px;height:6px;flex:none;background:var(--mf-cyan);
  animation:mf-w-blip 2.4s var(--mf-ease) infinite;
}
@keyframes mf-w-blip{0%,100%{opacity:1}50%{opacity:.22}}
body.breakdance .mf-w-mon-x{
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.1em;color:var(--mf-text);margin:0;
}
body.breakdance .mf-w-mon-rows{display:block}
body.breakdance .mf-w-mon-row{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;
  gap:.4rem 1rem;padding:.85rem 0 .7rem;
  border-bottom:1px solid rgba(160,225,255,.07);
}
body.breakdance .mf-w-mon-row:last-of-type{border-bottom:none}
body.breakdance .mf-w-mon-k{
  font-family:var(--mf-mono);font-size:.6rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--mf-muted);margin:0;
}
body.breakdance .mf-w-mon-v{
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:.92rem;letter-spacing:.04em;color:var(--mf-text);margin:0;
}
body.breakdance .mf-w-bar{
  grid-column:1 / -1;position:relative;
  height:3px;background:rgba(255,255,255,.07);overflow:hidden;
  margin-top:.15rem;display:block;
}
body.breakdance .mf-w-bar-f{
  position:absolute;top:0;bottom:0;left:0;width:0;
  background:linear-gradient(90deg,rgba(0,212,255,.55),var(--mf-cyan-lit));
  display:block;transition:width 1.2s var(--mf-ease);
}
/* Widths land when the panel enters the viewport (class set by the script).
   Without JS, or with reduced motion, they are drawn at once. */
body.breakdance .mf-w-mon.mf-w-live .mf-w-f-92,
html:not(.mf-js) body.breakdance .mf-w-f-92,
html.mf-still body.breakdance .mf-w-f-92{width:92%}
body.breakdance .mf-w-mon.mf-w-live .mf-w-f-74,
html:not(.mf-js) body.breakdance .mf-w-f-74,
html.mf-still body.breakdance .mf-w-f-74{width:74%}
body.breakdance .mf-w-mon.mf-w-live .mf-w-f-60,
html:not(.mf-js) body.breakdance .mf-w-f-60,
html.mf-still body.breakdance .mf-w-f-60{width:60%}
body.breakdance .mf-w-mon.mf-w-live .mf-w-f-79,
html:not(.mf-js) body.breakdance .mf-w-f-79,
html.mf-still body.breakdance .mf-w-f-79{width:79%}
body.breakdance .mf-w-mon.mf-w-live .mf-w-f-52,
html:not(.mf-js) body.breakdance .mf-w-f-52,
html.mf-still body.breakdance .mf-w-f-52{width:52%}
body.breakdance .mf-w-mon-note{
  font-family:var(--mf-mono);font-size:.56rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;line-height:1.7;
  color:var(--mf-muted);margin:1.1rem 0 0;
}

/* --- scroll cue ----------------------------------------------------------- */
body.breakdance .mf-w-cue{display:flex;flex-direction:row;justify-content:center;margin-top:3.2rem;width:100%}
body.breakdance .mf-w-cue-t{
  position:relative;
  font-family:var(--mf-mono);font-size:.56rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--mf-muted);
  padding-bottom:2.1rem;margin:0;
}
body.breakdance .mf-w-cue-t::after{
  content:'';position:absolute;left:50%;bottom:0;
  width:1px;height:26px;
  background:linear-gradient(180deg,var(--mf-cyan),transparent);
  animation:mf-w-cue 2.2s var(--mf-ease) infinite;
}
@keyframes mf-w-cue{0%,100%{transform:translateY(0);opacity:.25}50%{transform:translateY(7px);opacity:1}}
html.mf-still body.breakdance .mf-w-cue-t::after,
html.mf-still body.breakdance .mf-w-mon-t::before{animation:none}

/* --- scroll progress bar, injected by mf-hud-world.js ---------------------- */
body.breakdance .mf-w-prog{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
  background:linear-gradient(90deg,var(--mf-cyan),var(--mf-cyan-lit));
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
}

/* ==========================================================================
   02 - THE THREE LAWS
   ========================================================================== */
body.breakdance .mf-w-laws-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;width:100%;
}
body.breakdance .mf-w-law{padding:2rem 1.6rem 1.8rem;display:block}
body.breakdance .mf-w-law-i{
  font-family:var(--mf-mono);font-size:.62rem;font-weight:500;
  letter-spacing:.24em;color:var(--mf-cyan);margin:0 0 1.1rem;
}
body.breakdance .mf-w-law-p{
  font-family:'Rajdhani',sans-serif;
  font-size:.98rem;line-height:1.72;color:var(--mf-muted);margin:0;
}
/* the cyan rule that draws itself across the top of each card */
body.breakdance .mf-w-law,
body.breakdance .mf-w-phase,
body.breakdance .mf-w-st{overflow:hidden}
html.mf-js body.breakdance .mf-w-law > .mf-w-law-i{position:relative}
html.mf-js body.breakdance .mf-w-law > .mf-w-law-i::before{
  content:'';position:absolute;left:-1.6rem;top:-2rem;height:1px;width:0;
  background:linear-gradient(90deg,var(--mf-cyan),transparent);
  transition:width .9s var(--mf-ease) .15s;
}
html.mf-js body.breakdance .mf-w-law.mf-in > .mf-w-law-i::before{width:64%}

/* ==========================================================================
   03 - THE WORLD FLIGHT MARKET
   ========================================================================== */
body.breakdance .mf-w-split{
  display:grid;grid-template-columns:1fr 1fr;gap:3.4rem;align-items:center;width:100%;
}
body.breakdance .mf-w-split-t{display:block}
body.breakdance .mf-w-split-b .mf-w-split-t{order:2}
body.breakdance .mf-w-split-b .mf-w-led{order:1}

body.breakdance .mf-w-feed{padding:1.6rem 1.6rem 1.4rem;display:block}
body.breakdance .mf-w-feed-t{
  font-family:var(--mf-mono);font-size:.6rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mf-cyan);
  padding-bottom:1rem;margin:0 0 .3rem;
  border-bottom:1px solid var(--mf-hair);
}
body.breakdance .mf-w-feed-list{display:block}
body.breakdance .mf-w-sig{
  display:grid;grid-template-columns:minmax(96px,34%) 1fr;gap:1rem;align-items:baseline;
  padding:.8rem 0;
  border-bottom:1px solid rgba(160,225,255,.07);
}
body.breakdance .mf-w-sig-k{
  font-family:var(--mf-mono);font-size:.6rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--mf-cyan-lit);margin:0;
}
body.breakdance .mf-w-sig-v{
  font-family:'Rajdhani',sans-serif;font-size:.95rem;line-height:1.5;
  color:var(--mf-muted);margin:0;
}
body.breakdance .mf-w-feed-out{
  font-family:var(--mf-mono);font-size:.58rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;line-height:1.8;
  color:var(--mf-text);margin:1.2rem 0 0;
}

/* ==========================================================================
   04 - CONTESTED ROUTES
   The commercial heart of the page: the same city pair at three moments, so
   the cost of another operator's good decision is a number, not a claim.
   ========================================================================== */
body.breakdance .mf-w-phase-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;width:100%;
}
body.breakdance .mf-w-phase{padding:1.7rem 1.5rem 1.6rem;display:block;transition:box-shadow .4s var(--mf-ease)}
body.breakdance .mf-w-phase-t{
  font-family:var(--mf-mono);font-size:.6rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mf-cyan);
  padding-bottom:1rem;margin:0 0 1.1rem;
  border-bottom:1px solid var(--mf-hair);
}
body.breakdance .mf-w-phase-m{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1.2rem;
}
body.breakdance .mf-w-m{display:block}
body.breakdance .mf-w-m-k{
  font-family:var(--mf-mono);font-size:.52rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mf-muted);
  margin:0 0 .4rem;line-height:1.4;
}
body.breakdance .mf-w-m-v{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:1.32rem;letter-spacing:.01em;color:var(--mf-text);margin:0;
}
body.breakdance .mf-w-m-up .mf-w-m-v{color:var(--mf-cyan)}
body.breakdance .mf-w-m-dn .mf-w-m-v{color:var(--mf-muted)}
body.breakdance .mf-w-phase-p{
  font-family:'Rajdhani',sans-serif;
  font-size:.95rem;line-height:1.7;color:var(--mf-muted);margin:0;
}
/* the phase the script is currently pointing at */
body.breakdance .mf-w-phase.mf-w-phase-on{
  box-shadow:inset 0 0 0 1px rgba(140,232,255,.4),inset 0 1px 0 rgba(255,255,255,.1),0 18px 60px rgba(0,0,0,.5);
}

/* ==========================================================================
   05 - SCARCITY
   ========================================================================== */
body.breakdance .mf-w-tiles{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;width:100%;
}
body.breakdance .mf-w-tile{
  padding:1.7rem 1.35rem 1.6rem;display:block;
  transition:transform .35s var(--mf-ease),box-shadow .35s var(--mf-ease);
}
body.breakdance .mf-w-tile:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(140,232,255,.34),inset 0 1px 0 rgba(255,255,255,.1),0 22px 66px rgba(0,0,0,.5);
}
body.breakdance .mf-w-tile:hover::before,
body.breakdance .mf-w-tile:hover::after{width:19px;height:19px;border-color:var(--mf-cyan-lit)}
body.breakdance .mf-w-tile-i{
  font-family:var(--mf-mono);font-size:.58rem;font-weight:500;
  letter-spacing:.22em;color:var(--mf-cyan);margin:0 0 1rem;
}
body.breakdance .mf-w-tile-p{
  font-family:'Rajdhani',sans-serif;
  font-size:.93rem;line-height:1.68;color:var(--mf-muted);margin:0;
}

/* ==========================================================================
   06 - OPERATING RESULT
   Indexed to 100. No currency of any kind appears on this page.
   ========================================================================== */
body.breakdance .mf-w-led{padding:1.6rem 1.6rem 1.4rem;display:block}
body.breakdance .mf-w-led-hd{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  padding-bottom:1rem;margin-bottom:.3rem;
  border-bottom:1px solid var(--mf-hair);
}
body.breakdance .mf-w-led-t{
  font-family:var(--mf-mono);font-size:.6rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mf-cyan);margin:0;
}
body.breakdance .mf-w-led-x{
  font-family:var(--mf-mono);font-size:.56rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mf-muted);margin:0;
}
body.breakdance .mf-w-led-rows{display:block}
body.breakdance .mf-w-led-row{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:1rem;
  padding:.72rem 0;
  border-bottom:1px solid rgba(160,225,255,.07);
}
body.breakdance .mf-w-led-k{
  font-family:var(--mf-mono);font-size:.6rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mf-muted);margin:0;
}
body.breakdance .mf-w-led-v{
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:.92rem;letter-spacing:.03em;color:var(--mf-cyan-lit);margin:0;
}
body.breakdance .mf-w-led-neg .mf-w-led-v{color:var(--mf-muted)}
body.breakdance .mf-w-led-tot{
  border-bottom:none;border-top:1px solid var(--mf-hair);
  margin-top:.5rem;padding-top:1rem;
}
body.breakdance .mf-w-led-tot .mf-w-led-k{color:var(--mf-text);letter-spacing:.2em}
body.breakdance .mf-w-led-tot .mf-w-led-v{
  font-weight:900;font-size:1.5rem;color:var(--mf-cyan);
  filter:drop-shadow(0 0 14px rgba(0,212,255,.35));
}
body.breakdance .mf-w-led-note{
  font-family:var(--mf-mono);font-size:.56rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;line-height:1.7;
  color:var(--mf-muted);margin:1.1rem 0 0;
}

/* ==========================================================================
   07 - STATE OF THE WORLD
   Under-promising on purpose. This audience checks.
   ========================================================================== */
body.breakdance .mf-w-state-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;width:100%;
}
body.breakdance .mf-w-st{padding:1.6rem 1.35rem 1.5rem;display:block}
body.breakdance .mf-w-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mf-mono);font-size:.54rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  padding:.42rem .7rem;margin:0 0 1.1rem;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
body.breakdance .mf-w-badge::before{content:'';width:6px;height:6px;flex:none;background:currentColor}
body.breakdance .mf-w-badge-live{color:var(--mf-cyan);background:rgba(0,212,255,.1);box-shadow:inset 0 0 0 1px rgba(0,212,255,.34)}
body.breakdance .mf-w-badge-dev{color:var(--mf-violet);background:rgba(139,92,246,.1);box-shadow:inset 0 0 0 1px rgba(139,92,246,.34)}
body.breakdance .mf-w-st-p{
  font-family:'Rajdhani',sans-serif;
  font-size:.93rem;line-height:1.68;color:var(--mf-muted);margin:0;
}

/* ==========================================================================
   08 - FAQ
   The accordion ships with its own defaults. Everything visual is forced here
   so the page cannot drift back to rounded corners or a default font.
   ========================================================================== */
body.breakdance .mf-w-faq-panel{
  position:relative;max-width:920px;margin:0 auto;width:100%;
  padding:1.4rem;
  background:linear-gradient(180deg,var(--mf-veil-top),var(--mf-veil-bot)),rgba(8,10,14,.42);
  backdrop-filter:var(--mf-blur);-webkit-backdrop-filter:var(--mf-blur);
  box-shadow:inset 0 0 0 1px var(--mf-hair),inset 0 1px 0 rgba(255,255,255,.085),0 18px 60px rgba(0,0,0,.45);
  clip-path:polygon(var(--mf-ch) 0,100% 0,100% calc(100% - var(--mf-ch)),calc(100% - var(--mf-ch)) 100%,0 100%,0 var(--mf-ch));
}
body.breakdance .mf-w-faq-panel::before,
body.breakdance .mf-w-faq-panel::after{
  content:'';position:absolute;width:15px;height:15px;z-index:4;pointer-events:none;
}
body.breakdance .mf-w-faq-panel::before{
  top:12px;right:12px;
  border-top:1px solid rgba(140,232,255,.34);border-right:1px solid rgba(140,232,255,.34);
}
body.breakdance .mf-w-faq-panel::after{
  bottom:12px;left:12px;
  border-bottom:1px solid rgba(140,232,255,.34);border-left:1px solid rgba(140,232,255,.34);
}
body.breakdance .mf-w-acc{width:100%}
body.breakdance .mf-w-acc .bde-accordion__content-wrapper{
  background:rgba(255,255,255,.022);
  border:none;border-radius:0;
  box-shadow:inset 0 0 0 1px rgba(160,225,255,.09);
  clip-path:polygon(var(--mf-ch-sm) 0,100% 0,100% calc(100% - var(--mf-ch-sm)),calc(100% - var(--mf-ch-sm)) 100%,0 100%,0 var(--mf-ch-sm));
  margin-bottom:.6rem;
  transition:background .3s var(--mf-ease),box-shadow .3s var(--mf-ease);
}
body.breakdance .mf-w-acc .bde-accordion__content-wrapper:hover{
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(140,232,255,.24);
}
/* open row: cyan spine on the left edge, matching the roles and product FAQs */
body.breakdance .mf-w-acc .bde-accordion__content-wrapper:has(.bde-accordion__button[aria-expanded="true"]){
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(140,232,255,.28),inset 3px 0 0 0 var(--mf-cyan);
}
body.breakdance .mf-w-acc .bde-accordion__title-tag{margin:0}
body.breakdance .mf-w-acc .bde-accordion__button{
  background:transparent;border:none;
  padding:1.15rem 1.3rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  cursor:pointer;
}
body.breakdance .mf-w-acc .bde-accordion__title{
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:.8rem;letter-spacing:.035em;text-transform:uppercase;
  line-height:1.45;color:var(--mf-text);text-align:left;
  transition:color .3s var(--mf-ease);
}
body.breakdance .mf-w-acc .bde-accordion__button[aria-expanded="true"] .bde-accordion__title{color:var(--mf-cyan)}

/* The icon spans render EMPTY - the element's icon config produces no inline
   svg here. Drawing the glyphs as monoline pseudo-elements keeps them at a
   1.5px stroke and avoids depending on an icon set. */
body.breakdance .mf-w-acc .bde-accordion__icon{
  position:relative;width:13px;height:13px;flex:none;display:block;
}
body.breakdance .mf-w-acc .bde-accordion__icon::before,
body.breakdance .mf-w-acc .bde-accordion__icon::after{
  content:'';position:absolute;left:50%;top:50%;
  width:13px;height:1.5px;background:var(--mf-cyan);
  transform:translate(-50%,-50%);
}
body.breakdance .mf-w-acc .bde-accordion__icon--default::after{transform:translate(-50%,-50%) rotate(90deg)}
body.breakdance .mf-w-acc .bde-accordion__icon--active::after{display:none}
body.breakdance .mf-w-acc .bde-accordion__button[aria-expanded="false"] .bde-accordion__icon--active,
body.breakdance .mf-w-acc .bde-accordion__button[aria-expanded="true"] .bde-accordion__icon--default{display:none}

body.breakdance .mf-w-acc .bde-accordion__panel-content{padding:0 1.3rem 1.25rem}
body.breakdance .mf-w-acc .mf-w-acc-p{
  font-family:'Rajdhani',sans-serif;
  font-size:.98rem;line-height:1.75;color:var(--mf-muted);margin:0;
}

/* ==========================================================================
   09 - CLOSING CTA
   ========================================================================== */
body.breakdance .mf-w-ctabox{
  text-align:center;padding:3.6rem 2rem;max-width:900px;margin:0 auto;
  display:block;
}
body.breakdance .mf-w-ctabox .mf-w-eb,
body.breakdance .mf-w-ctabox .mf-w-h2,
body.breakdance .mf-w-ctabox .mf-w-sub{width:100%}
body.breakdance .mf-w-ctabox .mf-w-sub{margin:0 auto 2.2rem}

/* ==========================================================================
   MOBILE - KEEP THIS BLOCK LAST IN THE FILE.
   Rules appended after a media query override it; that has cost a debug round
   before. Anything new goes ABOVE this line.
   ========================================================================== */
@media(max-width:1023px){
  body.breakdance .mf-w-hero > .section-container{padding:8rem 1.25rem 4rem}
  body.breakdance .mf-w-sec > .section-container{padding:4.5rem 1.25rem}
  body.breakdance .mf-w-hero-in{grid-template-columns:1fr;gap:2.6rem}
  body.breakdance .mf-w-split{grid-template-columns:1fr;gap:2.4rem}
  body.breakdance .mf-w-split-b .mf-w-split-t,
  body.breakdance .mf-w-split-b .mf-w-led{order:0}
  body.breakdance .mf-w-laws-row,
  body.breakdance .mf-w-phase-row{grid-template-columns:1fr}
  body.breakdance .mf-w-tiles,
  body.breakdance .mf-w-state-row{grid-template-columns:repeat(2,1fr)}
  body.breakdance .mf-w-head{margin-bottom:2.4rem}
  body.breakdance .mf-w-kicker{margin-top:2.4rem}
  body.breakdance .mf-w-ctabox{padding:2.6rem 1.4rem}
}
@media(max-width:600px){
  body.breakdance .mf-w-strip{display:block}
  body.breakdance .mf-w-stat{padding:.85rem 0}
  body.breakdance .mf-w-stat + .mf-w-stat{padding-left:0;border-left:none;border-top:1px solid var(--mf-hair)}
  body.breakdance .mf-w-tiles,
  body.breakdance .mf-w-state-row{grid-template-columns:1fr}
  body.breakdance .mf-w-phase-m{gap:.5rem}
  body.breakdance .mf-w-m-v{font-size:1.05rem}
  body.breakdance .mf-w-mon{padding:1.2rem 1.1rem 1rem}
  body.breakdance .mf-w-sig{grid-template-columns:1fr;gap:.3rem}
  body.breakdance .mf-w-ctas .mf-bd-btn{width:100%}
  body.breakdance .mf-w-ctas .mf-bd-btn .bde-button__button{width:100%}
}


/* ==========================================================================
   THE LEDGER (mf-w-costs). KEEP THIS BLOCK LAST IN THIS FILE.

   Three readings of the same economy, one per audience:
     - the CIRCUIT answers the MMO question, who is on the other side of my
       money. Amber packets physically travel between the four balances.
     - the LEDGER answers the tycoon question, what am I actually charged for.
     - the ROTATION answers the sim question, what does one leg leave me with.
   Amber is used deliberately and only here for FlightCoin movement and for the
   margin, so currency reads as currency and never as interface.
   No euro anywhere: this is a gameplay surface.
   Every .bde-div defaults to flex-direction:column, so every horizontal track
   below declares row explicitly.
   ========================================================================== */

/* ---------------------------------------------------------------- CIRCUIT */
body.breakdance .mf-w-circ{width:100%;margin:0 0 3.6rem}
body.breakdance .mf-w-circ-rail{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(96px,.55fr) minmax(0,1fr) minmax(96px,.55fr) minmax(0,1fr) minmax(96px,.55fr) minmax(0,1fr);
  align-items:stretch;width:100%;gap:0;
}
body.breakdance .mf-w-cn{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  gap:.5rem;width:auto;min-width:0;height:100%;padding:1.4rem 1.2rem;
  background:linear-gradient(160deg,var(--mf-veil-top),var(--mf-veil-bot)),rgba(8,10,14,.5);
  backdrop-filter:var(--mf-blur);-webkit-backdrop-filter:var(--mf-blur);
  box-shadow:inset 0 0 0 1px var(--mf-hair);
  clip-path:polygon(var(--mf-ch-sm) 0,100% 0,100% calc(100% - var(--mf-ch-sm)),calc(100% - var(--mf-ch-sm)) 100%,0 100%,0 var(--mf-ch-sm));
  transition:box-shadow .45s var(--mf-ease),transform .45s var(--mf-ease),filter .45s var(--mf-ease);
}
body.breakdance .mf-w-cn.mf-on{
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.55);
  transform:translateY(-3px);
  filter:drop-shadow(0 0 22px rgba(0,212,255,.22));
}
body.breakdance .mf-w-cn-i{
  font-family:var(--mf-mono);font-size:.55rem;font-weight:500;letter-spacing:.24em;
  color:var(--mf-cyan);width:auto;
}
body.breakdance .mf-w-cn-h{
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:.95rem;
  letter-spacing:.03em;text-transform:uppercase;color:var(--mf-text);margin:0;
}
body.breakdance .mf-w-cn-p{
  font-family:'Rajdhani',sans-serif;font-size:.88rem;line-height:1.55;
  color:var(--mf-muted);margin:0;width:auto;
}
/* connector: a hairline with an amber FlightCoin packet crossing it */
body.breakdance .mf-w-cl{
  position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.55rem;width:auto;min-width:0;padding:0 .5rem;
}
body.breakdance .mf-w-cl-t{
  font-family:var(--mf-mono);font-size:.5rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mf-muted);text-align:center;
  line-height:1.5;width:100%;
}
body.breakdance .mf-w-cl::before{
  content:'';display:block;width:100%;height:1px;
  background:linear-gradient(90deg,rgba(160,225,255,.08),rgba(255,176,32,.42),rgba(160,225,255,.08));
}
body.breakdance .mf-w-cl::after{
  content:'';position:absolute;left:.5rem;bottom:calc(50% - 8px);
  width:16px;height:16px;
  background-image:var(--mf-coin);background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:drop-shadow(0 0 6px rgba(255,176,32,.75));
  animation:mf-w-packet 2.6s var(--mf-ease) infinite;
}
body.breakdance .mf-w-cl:nth-of-type(4)::after{animation-delay:.55s}
body.breakdance .mf-w-cl:nth-of-type(6)::after{animation-delay:1.1s}
@keyframes mf-w-packet{
  0%{transform:translateX(0);opacity:0}
  12%{opacity:1}
  82%{opacity:1}
  100%{transform:translateX(calc(100% + 100px));opacity:0}
}
/* the return rail */
body.breakdance .mf-w-circ-back{
  position:relative;width:100%;margin:1.6rem 0 0;padding:1.1rem 0 0;
  font-family:'Rajdhani',sans-serif;font-size:.95rem;line-height:1.6;
  color:var(--mf-muted);text-align:center;
  box-shadow:inset 0 1px 0 var(--mf-hair);
}
body.breakdance .mf-w-circ-back::after{
  content:'';position:absolute;right:0;top:-3px;width:6px;height:6px;
  background-color:var(--mf-cyan);
  filter:drop-shadow(0 0 7px rgba(0,212,255,.7));
  animation:mf-w-return 6.5s linear infinite;
}
@keyframes mf-w-return{
  0%{transform:translateX(0);opacity:0}
  8%{opacity:1}
  90%{opacity:1}
  100%{transform:translateX(calc(-100vw + 60px));opacity:0}
}

/* ----------------------------------------------------------------- LEDGER */
body.breakdance .mf-w-led{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;gap:1rem;width:100%;margin:0 0 2.6rem;
}
body.breakdance .mf-w-led-col{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:stretch;
  width:auto;min-width:0;height:100%;padding:1.5rem 1.4rem 1.1rem;
}
/* an instrument sweep, so the column reads as a live readout */
body.breakdance .mf-w-led-col::before{
  content:'';position:absolute;left:0;right:0;top:0;height:120px;z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,212,255,0),rgba(0,212,255,.075),rgba(0,212,255,0));
  animation:mf-w-sweep 7s linear infinite;
}
body.breakdance .mf-w-led-opt::before{animation-delay:2.3s}
body.breakdance .mf-w-led-rev::before{
  animation-delay:4.6s;
  background:linear-gradient(180deg,rgba(255,176,32,0),rgba(255,176,32,.075),rgba(255,176,32,0));
}
@keyframes mf-w-sweep{
  0%{transform:translateY(-130px);opacity:0}
  10%{opacity:1}
  85%{opacity:1}
  100%{transform:translateY(760px);opacity:0}
}
body.breakdance .mf-w-led-h{
  display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;
  width:100%;padding:0 0 1rem;position:relative;z-index:2;
}
body.breakdance .mf-w-led-k{
  font-family:var(--mf-mono);font-size:.58rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mf-cyan);width:auto;
}
body.breakdance .mf-w-led-rev .mf-w-led-k{color:var(--mf-amber)}
body.breakdance .mf-w-led-d{
  font-family:'Rajdhani',sans-serif;font-size:.85rem;line-height:1.5;
  color:var(--mf-muted);width:100%;
}
body.breakdance .mf-w-led-r{
  position:relative;z-index:2;
  display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;
  gap:.9rem;width:100%;padding:.62rem 0;
  box-shadow:inset 0 1px 0 var(--mf-hair);
  transition:box-shadow .25s var(--mf-ease);
}
body.breakdance .mf-w-led-r:hover{box-shadow:inset 0 1px 0 rgba(0,212,255,.45)}
body.breakdance .mf-w-led-l{
  font-family:'Rajdhani',sans-serif;font-size:.92rem;line-height:1.4;
  color:var(--mf-text);width:auto;min-width:0;
}
body.breakdance .mf-w-led-b{
  font-family:var(--mf-mono);font-size:.5rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mf-muted);white-space:nowrap;
  width:auto;flex:0 0 auto;
}
body.breakdance .mf-w-led-rev .mf-w-led-b{color:rgba(255,176,32,.75)}

/* -------------------------------------------------------------- ROTATION */
body.breakdance .mf-w-pl{
  display:flex;flex-direction:column;align-items:stretch;
  width:100%;padding:1.8rem 1.8rem 1.5rem;
}
body.breakdance .mf-w-pl-hd{
  display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;
  gap:1rem;width:100%;padding:0 0 1rem;
  box-shadow:inset 0 -1px 0 var(--mf-hair);
}
body.breakdance .mf-w-pl-t{
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:.95rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--mf-text);width:auto;
}
body.breakdance .mf-w-pl-x{
  font-family:var(--mf-mono);font-size:.52rem;font-weight:500;letter-spacing:.22em;
  color:var(--mf-muted);width:auto;white-space:nowrap;
}
body.breakdance .mf-w-pl-r{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(80px,1.5fr) 54px;
  align-items:center;gap:1.1rem;width:100%;padding:.62rem 0;
  box-shadow:inset 0 1px 0 var(--mf-hair);
}
body.breakdance .mf-w-pl-l{
  font-family:'Rajdhani',sans-serif;font-size:.94rem;color:var(--mf-muted);width:auto;
}
body.breakdance .mf-w-pl-bar{
  width:100%;height:6px;min-width:0;
  background-color:rgba(255,255,255,.055);
}
body.breakdance .mf-w-pl-fill{
  width:100%;height:6px;background-color:var(--mf-cyan);
  transition:width 1.15s var(--mf-ease);
}
html.mf-js body.breakdance .mf-w-pl-fill{width:0}
body.breakdance .mf-w-pl-n{
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:.98rem;
  color:var(--mf-text);text-align:right;width:auto;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
}
/* revenue */
body.breakdance .mf-w-pl-rev .mf-w-pl-l{color:var(--mf-text)}
/* subtotal */
body.breakdance .mf-w-pl-sum{box-shadow:inset 0 1px 0 rgba(0,212,255,.35)}
body.breakdance .mf-w-pl-sum .mf-w-pl-l{
  font-family:var(--mf-mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mf-cyan);
}
body.breakdance .mf-w-pl-sum .mf-w-pl-fill{background-color:var(--mf-cyan-lit)}
/* costs read as deductions */
body.breakdance .mf-w-pl-cost .mf-w-pl-fill{background-color:rgba(157,178,201,.5)}
body.breakdance .mf-w-pl-cost .mf-w-pl-n{color:var(--mf-muted)}
body.breakdance .mf-w-pl-cost .mf-w-pl-n::before{content:'-';margin-right:1px}
/* what is left is FlightCoins, so it is amber */
body.breakdance .mf-w-pl-marg{
  margin-top:.5rem;padding-top:1rem;
  box-shadow:inset 0 1px 0 rgba(255,176,32,.42);
}
body.breakdance .mf-w-pl-marg .mf-w-pl-l{
  font-family:var(--mf-mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mf-amber);
}
body.breakdance .mf-w-pl-marg .mf-w-pl-bar{height:9px}
body.breakdance .mf-w-pl-marg .mf-w-pl-fill{
  height:9px;background-color:var(--mf-amber);
  filter:drop-shadow(0 0 10px rgba(255,176,32,.45));
}
body.breakdance .mf-w-pl-marg .mf-w-pl-n{color:var(--mf-amber);font-size:1.15rem;font-weight:900}
body.breakdance .mf-w-pl-note{
  width:100%;margin:1.4rem 0 0;padding:1rem 0 0;
  font-family:var(--mf-mono);font-size:.55rem;font-weight:500;letter-spacing:.1em;
  line-height:1.85;text-transform:uppercase;color:var(--mf-muted);opacity:.7;
  box-shadow:inset 0 1px 0 var(--mf-hair);
}

/* ----------------------------------------------------------- REDUCED MOTION */
html.mf-still body.breakdance .mf-w-cl::after,
html.mf-still body.breakdance .mf-w-circ-back::after,
html.mf-still body.breakdance .mf-w-led-col::before{animation:none;opacity:0}
html.mf-still body.breakdance .mf-w-pl-fill{transition:none}
html.mf-still body.breakdance .mf-w-cn.mf-on{transform:none;filter:none}

/* ===================================================== MOBILE, KEEP LAST === */
@media (max-width:1023px){
body.breakdance .mf-w-circ-rail{grid-template-columns:minmax(0,1fr) minmax(80px,.5fr) minmax(0,1fr)}
body.breakdance .mf-w-cl:nth-of-type(6){display:none}
body.breakdance .mf-w-led{grid-template-columns:repeat(2,minmax(0,1fr))}
body.breakdance .mf-w-led-rev{grid-column:1 / -1}
body.breakdance .mf-w-pl{padding:1.4rem 1.2rem 1.2rem}
body.breakdance .mf-w-pl-r{grid-template-columns:minmax(0,1fr) minmax(60px,1fr) 46px;gap:.8rem}
}
@media (max-width:767px){
body.breakdance .mf-w-circ-rail{grid-template-columns:1fr}
body.breakdance .mf-w-cl{min-height:56px;padding:.5rem 0}
body.breakdance .mf-w-cl,
body.breakdance .mf-w-cl:nth-of-type(6){display:flex}
body.breakdance .mf-w-cl::before{width:1px;height:100%;background:linear-gradient(180deg,rgba(160,225,255,.08),rgba(255,176,32,.42),rgba(160,225,255,.08))}
body.breakdance .mf-w-cl::after{left:calc(50% - 8px);bottom:auto;top:0;animation-name:mf-w-packet-v}
@keyframes mf-w-packet-v{
  0%{transform:translateY(0);opacity:0}
  12%{opacity:1}
  82%{opacity:1}
  100%{transform:translateY(56px);opacity:0}
}
body.breakdance .mf-w-led{grid-template-columns:1fr}
body.breakdance .mf-w-led-rev{grid-column:auto}
body.breakdance .mf-w-pl-r{grid-template-columns:minmax(0,1fr) 44px;gap:.7rem}
body.breakdance .mf-w-pl-bar{display:none}
body.breakdance .mf-w-circ-back{font-size:.88rem}
body.breakdance .mf-w-circ-back::after{display:none}
}
/* ==========================================================================
   01b - WFM HERO FILM  (2026-08-24)
   Replaces the Route Demand Monitor readout in the hero. The film is the
   owner's own render of the demand model, so it is framed as instrumentation
   and keeps the same illustrative disclosure the readout carried.
   PERFORMANCE CONTRACT: the Video element ships WITHOUT autoplay on purpose.
   mf-hud-world.js forces preload=none, re-points the source at the 480p
   encode on a narrow viewport or under Save-Data, and only calls play() once
   the frame is on screen. Nothing about the film is on the critical path.
   The chamfer goes on the .bde-video box; a clip-path on the media element
   itself would cut the poster before the first frame is decoded.
   ========================================================================== */
body.breakdance .mf-w-vid{
  display:flex;flex-direction:column;align-items:stretch;width:100%;padding:0;
}
body.breakdance .mf-w-vid-hd{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:1rem;width:100%;padding:1rem 1.25rem;
  box-shadow:inset 0 -1px 0 var(--mf-hair);
}
body.breakdance .mf-w-vid-t{
  display:flex;flex-direction:row;align-items:center;gap:.55rem;width:auto;
  font-family:var(--mf-mono);font-size:.58rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mf-text);
}
body.breakdance .mf-w-vid-t::before{
  content:'';flex:0 0 auto;width:7px;height:7px;background:var(--mf-cyan);
  clip-path:polygon(2px 0,100% 0,100% calc(100% - 2px),calc(100% - 2px) 100%,0 100%,0 2px);
}
body.breakdance .mf-w-vid-x{
  width:auto;font-family:var(--mf-mono);font-size:.56rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mf-muted);
}
body.breakdance .mf-w-vid-frame{
  position:relative;display:block;width:100%;padding:1.1rem;
}
body.breakdance .mf-w-vid-frame::after{
  content:'';position:absolute;inset:1.1rem;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,212,255,.035) 0 1px,transparent 1px 3px);
  mix-blend-mode:screen;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
/* Breakdance ships .bde-video{background:black} - a flat slab on a void page */
body.breakdance .bde-video.mf-w-vid-el{
  background:var(--mf-void);
  box-shadow:inset 0 0 0 1px var(--mf-hair);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
body.breakdance .mf-w-vid-el .ee-video{
  object-fit:cover;background:var(--mf-void);
}
body.breakdance .mf-w-vid-ft{
  display:flex;flex-direction:column;align-items:stretch;width:100%;
  padding:.2rem 1.25rem 1.05rem;
}
body.breakdance .mf-w-vid-note{
  width:100%;line-height:1.65;
  font-family:var(--mf-mono);font-size:.5rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mf-muted);
}
@media (max-width:767px){
  body.breakdance .mf-w-vid-hd{padding:.85rem 1rem}
  body.breakdance .mf-w-vid-frame{padding:.9rem}
  body.breakdance .mf-w-vid-frame::after{inset:.9rem}
  body.breakdance .mf-w-vid-ft{padding:.2rem 1rem .9rem}
  body.breakdance .mf-w-vid-x{display:none}
}
/* ==========================================================================
   01c - HERO RE-STACKED AROUND THE FILM  (2026-08-24)
   The film carries readable on-screen type, and a 46 percent column starved
   it: at roughly 540px it rendered at 0.42 of native and the labels inside
   the frame were unreadable. The hero is now ONE CENTRED COLUMN - statement,
   then the film at up to 1120px (about 0.88 of native), then the reading:
   explanation, the three-fact strip and the actions.
   The strip and the CTAs were MOVED in the tree, not duplicated: they are now
   children of .mf-w-hero-exp, below the film.
   Declared after the old two-column rule and after the mobile block, so the
   grid-template-columns left behind up there is inert against display:flex.
   ========================================================================== */
body.breakdance .mf-w-hero-in{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:2.8rem;width:100%;max-width:none;
}
body.breakdance .mf-w-hero-txt{
  display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:840px;text-align:center;
}
/* the eyebrow carries mf-w-eb-c on the element: it centres AND mirrors the
   hairline on the trailing side, which a justify-content override would not */
body.breakdance .mf-w-hero-txt .mf-w-lead{
  max-width:720px;margin:1.5rem auto 0;
}

/* the film. 16:9 against 1120px is 630px tall, so the section padding comes
   down with it or the hero runs past a 900px viewport on its own. */
body.breakdance .mf-w-vid{
  width:100%;max-width:1120px;margin:0 auto;
}
body.breakdance .mf-w-hero > .section-container{padding:6rem 2rem 4.5rem}

body.breakdance .mf-w-hero-exp{
  display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:940px;gap:2rem;
}
body.breakdance .mf-w-hero-exp-p{
  width:100%;max-width:820px;text-align:center;
  font-family:'Rajdhani',sans-serif;
  font-size:1.06rem;line-height:1.75;color:#A8BDD4;margin:0;
}
/* the strip was a left-aligned rail against the old text column */
body.breakdance .mf-w-hero-exp .mf-w-strip{width:100%;margin:0}
body.breakdance .mf-w-hero-exp .mf-w-stat{
  padding:.95rem 1.1rem;text-align:center;
}
body.breakdance .mf-w-hero-exp .mf-w-ctas{justify-content:center;width:100%}

@media (max-width:1023px){
  body.breakdance .mf-w-hero-in{gap:2.2rem}
  body.breakdance .mf-w-hero > .section-container{padding:5rem 1.25rem 3.5rem}
  body.breakdance .mf-w-hero-exp{gap:1.6rem}
}
@media (max-width:767px){
  body.breakdance .mf-w-hero-exp-p{font-size:.98rem}
  body.breakdance .mf-w-hero-exp .mf-w-stat{padding:.8rem .6rem}
}