/* ==========================================================================
   METAFLIGHT HUD - ROLES PAGE (post 10128)
   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. mf-hud-home-bd.css is enqueued on the front page
   only, so none of its .mf-h-* classes exist here. Everything this page needs
   is redeclared under the mf-r- prefix. The only classes borrowed from
   elsewhere are .mf-rv (reveal) and .mf-bd-btn* (buttons), both of which live
   in mf-hud-chrome.css and load on every page.

   SPECIFICITY: every rule is prefixed with body.breakdance so it reliably wins
   against Breakdance's own per-element CSS (.bde-div-10128-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 for that reason. Do not remove.
   ========================================================================== */

/* ==========================================================================
   SHELL
   ========================================================================== */
body.breakdance .mf-r-hero,
body.breakdance .mf-r-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-r-hero > .section-container,
body.breakdance .mf-r-sec > .section-container{
  align-items:stretch;
  max-width:1240px;margin:0 auto;width:100%;
  padding:6rem 2rem;
}
body.breakdance .mf-r-hero > .section-container{padding:11rem 2rem 6rem}
body.breakdance .mf-r-wrap{width:100%;display:block}

/* ROOT CAUSE OF EVERY "why is this hugging the left" BUG ON THIS PAGE.
   post-10128-defaults.css ships:
     .breakdance .bde-div{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
   Two consequences, and they look like two different bugs:
     1. FLEX children shrink to their own content width, so an inline centering
        rule (justify-content, margin:auto) on the child has nothing to centre
        inside - the eyebrow ends up left of a centred heading.
     2. align-items:flex-start also applies when we switch the box to GRID, so
        grid items stop stretching and cards in the same row end up at
        different heights.
   Both are fixed by declaring the intent explicitly on our own containers.
   Anything new that lays out children must appear in one of these two lists. */
body.breakdance .mf-r-head,
body.breakdance .mf-r-role-t,
body.breakdance .mf-r-lever,
body.breakdance .mf-r-node,
body.breakdance .mf-r-tile,
body.breakdance .mf-r-ctabox{align-items:stretch}
body.breakdance .mf-r-levers,
body.breakdance .mf-r-tiles,
body.breakdance .mf-r-loop-row{align-items:stretch}

/* ==========================================================================
   TYPE PRIMITIVES
   ========================================================================== */
body.breakdance .mf-r-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-r-eb::before{
  content:'';height:1px;width:clamp(24px,5vw,58px);flex:none;
  background:linear-gradient(90deg,transparent,var(--mf-cyan-lit));
}
body.breakdance .mf-r-eb-c{justify-content:center}
body.breakdance .mf-r-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-r-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-r-h1 .mf-r-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-r-h1 .mf-r-grad{-webkit-text-fill-color:transparent;color:transparent}
}

body.breakdance .mf-r-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-r-lead{
  font-family:'Rajdhani',sans-serif;
  font-size:1.12rem;line-height:1.75;color:#A8BDD4;
  max-width:640px;margin:1.5rem 0 2.2rem;
}
body.breakdance .mf-r-sub{
  font-family:'Rajdhani',sans-serif;
  font-size:1.02rem;line-height:1.72;color:var(--mf-muted);
  max-width:720px;margin:0 auto;
}
body.breakdance .mf-r-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-r-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-r-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:800px;
  margin:3.5rem auto 0;
}
body.breakdance .mf-r-head{text-align:center;max-width:800px;margin:0 auto 3.5rem}
/* the eyebrow is a flex row; it can only centre once it spans the head */
body.breakdance .mf-r-head .mf-r-eb{width:100%}
body.breakdance .mf-r-head .mf-r-h2,
body.breakdance .mf-r-head .mf-r-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-r-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-r-panel::before,
body.breakdance .mf-r-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-r-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-r-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-r-hero{
  min-height:78vh;
  display:flex;align-items:center;
  overflow:hidden;
}
body.breakdance .mf-r-hero::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,212,255,.03) 0 1px,transparent 1px 3px);
  mix-blend-mode:screen;
}
/* the hero grid is declared with the board, further down this file */

/* --- status strip --------------------------------------------------------- */
body.breakdance .mf-r-strip{
  display:flex;flex-direction:row;flex-wrap:wrap;
  gap:.6rem;width:auto;margin:0 0 2.2rem;
}
body.breakdance .mf-r-stat{
  display:flex;flex-direction:column;gap:.32rem;
  flex:1 1 190px;width:auto;
  padding:.9rem 1.1rem;
  background:rgba(255,255,255,.022);
  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));
}
body.breakdance .mf-r-stat-n{
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mf-text);
}
body.breakdance .mf-r-stat-v{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--mf-mono);font-size:.6rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--mf-muted);
}
body.breakdance .mf-r-stat-v::before{
  content:'';flex:0 0 auto;width:6px;height:6px;background:currentColor;
}
/* LIVE: cyan, full frame. IN DEVELOPMENT: violet, the design system's rare
   accent. Amber is never used here - it is reserved for FlightCoins. */
body.breakdance .mf-r-stat-live{box-shadow:inset 0 0 0 1px rgba(0,212,255,.42)}
body.breakdance .mf-r-stat-live .mf-r-stat-v{color:var(--mf-cyan)}
body.breakdance .mf-r-stat-dev{box-shadow:inset 0 0 0 1px rgba(139,92,246,.34)}
body.breakdance .mf-r-stat-dev .mf-r-stat-v{color:#A78BFA}

body.breakdance .mf-r-ctas{
  display:flex;flex-direction:row;align-items:center;
  gap:1rem;flex-wrap:wrap;width:auto;
}
body.breakdance .mf-r-ctas-c{justify-content:center}
body.breakdance .mf-r-ctas .mf-bd-btn{margin:0;width:auto;flex:0 0 auto}
body.breakdance .mf-r-ctas a.bde-button__button{padding:1rem 2.2rem;font-size:.72rem;letter-spacing:.16em}

/* ==========================================================================
   02 - THE WORLD IS ALREADY RUNNING
   ========================================================================== */
body.breakdance .mf-r-hero-in{
  position:relative;z-index:5;max-width:none;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:4rem;align-items:center;
}
body.breakdance .mf-r-hero-txt{align-items:stretch;max-width:620px}

/* --- departures board -----------------------------------------------------
   Fills the right half of the hero and says "this world is running right now"
   faster than a paragraph can. The rows are illustrative, not a live feed, and
   the note under the board says so - no wording anywhere claims otherwise.
   -------------------------------------------------------------------------- */
body.breakdance .mf-r-board{
  align-items:stretch;
  padding:1.4rem 1.4rem 1.1rem;
}
body.breakdance .mf-r-board-hd{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  width:100%;gap:1rem;
  padding-bottom:.9rem;margin-bottom:.5rem;
  border-bottom:1px solid var(--mf-hair);
}
body.breakdance .mf-r-board-t{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--mf-mono);font-size:.62rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--mf-cyan);
}
body.breakdance .mf-r-board-t::before{
  content:'';width:6px;height:6px;background:var(--mf-cyan);flex:0 0 auto;
  animation:mf-r-blip 2.4s var(--mf-ease) infinite;
}
@keyframes mf-r-blip{0%,100%{opacity:1}50%{opacity:.25}}
body.breakdance .mf-r-board-x{
  font-family:var(--mf-mono);font-size:.58rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mf-muted);
}
body.breakdance .mf-r-board-rows{align-items:stretch;width:100%}
body.breakdance .mf-r-row{
  display:grid;grid-template-columns:5.2rem 1fr auto;
  align-items:center;gap:1rem;width:100%;
  padding:.72rem .2rem;
  border-bottom:1px solid rgba(160,225,255,.08);
  font-family:var(--mf-mono);font-size:.63rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;
  transition:background .4s var(--mf-ease),padding-left .4s var(--mf-ease);
}
body.breakdance .mf-r-row:last-of-type{border-bottom:none}
body.breakdance .mf-r-row-f{color:var(--mf-muted)}
body.breakdance .mf-r-row-r{color:var(--mf-text)}
body.breakdance .mf-r-row-s{
  display:flex;align-items:center;gap:.45rem;
  justify-self:end;color:var(--mf-muted);
}
body.breakdance .mf-r-row-s::before{content:'';width:5px;height:5px;background:currentColor;flex:0 0 auto}
body.breakdance .mf-r-row-go .mf-r-row-s{color:var(--mf-cyan)}
body.breakdance .mf-r-row-wait .mf-r-row-s{color:#A78BFA}
body.breakdance .mf-r-row-done .mf-r-row-s{color:var(--mf-muted);opacity:.65}
/* the empty slot: a hole in the world the visitor could fill */
body.breakdance .mf-r-row-open .mf-r-row-f{color:rgba(157,178,201,.45)}
body.breakdance .mf-r-row-open .mf-r-row-s{color:var(--mf-cyan-lit)}
body.breakdance .mf-r-row-open .mf-r-row-s::before{animation:mf-r-blip 1.5s var(--mf-ease) infinite}
/* row highlighted by the cycler */
body.breakdance .mf-r-row.mf-r-row-on{
  background:rgba(0,212,255,.07);
  padding-left:.7rem;
}
body.breakdance .mf-r-board-note{
  font-family:var(--mf-mono);font-size:.52rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(157,178,201,.5);
  margin-top:.9rem;
}

/* --- scroll cue ----------------------------------------------------------- */
body.breakdance .mf-r-cue{
  position:relative;z-index:5;
  align-items:center;width:100%;
  padding-bottom:2.5rem;
}
body.breakdance .mf-r-cue-t{
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  font-family:var(--mf-mono);font-size:.55rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--mf-muted);
}
body.breakdance .mf-r-cue-t::after{
  content:'';width:9px;height:9px;
  border-right:1.5px solid var(--mf-cyan);border-bottom:1.5px solid var(--mf-cyan);
  transform:rotate(45deg);
  animation:mf-r-cue 2.2s var(--mf-ease) infinite;
}
@keyframes mf-r-cue{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.4}50%{transform:rotate(45deg) translate(4px,4px);opacity:1}}
html.mf-still body.breakdance .mf-r-cue-t::after,
html.mf-still body.breakdance .mf-r-board-t::before{animation:none}

/* --- scroll progress bar --------------------------------------------------
   Injected by mf-hud-roles.js, fixed at the very top of the viewport. */
body.breakdance .mf-r-prog{
  position:fixed;top:0;left:0;height:2px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--mf-cyan),var(--mf-violet));
  z-index:9999;pointer-events:none;
}

/* --- staged reveals -------------------------------------------------------
   .mf-rv handles the base fade; these add a second layer on top of it. */
html.mf-js body.breakdance .mf-r-lever::before{opacity:0;transition:opacity .5s var(--mf-ease) .25s}
html.mf-js body.breakdance .mf-r-lever.mf-in::before{opacity:1}
/* the cyan rule that draws itself across the top of each card */
body.breakdance .mf-r-lever,
body.breakdance .mf-r-node{overflow:hidden}
html.mf-js body.breakdance .mf-r-lever > .mf-r-lv-i,
html.mf-js body.breakdance .mf-r-node > .mf-r-node-i{position:relative}
html.mf-js body.breakdance .mf-r-lever > .mf-r-lv-i::before{
  content:'';position:absolute;top:-2rem;left:-1.6rem;height:1px;width:0;
  background:linear-gradient(90deg,var(--mf-cyan),transparent);
  transition:width .9s var(--mf-ease) .2s;
}
html.mf-js body.breakdance .mf-r-lever.mf-in > .mf-r-lv-i::before{width:calc(100% + 3.2rem)}

/* schematic wipe: revealed left to right when it enters the viewport */
html.mf-js body.breakdance .mf-r-schem{
  --mf-wipe:0%;
}
html.mf-js body.breakdance .mf-r-schem::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--mf-void);
  transform:translateX(var(--mf-wipe));
  transition:transform 1.1s var(--mf-ease);
  border:none;width:auto;height:auto;bottom:0;left:0;
}
html.mf-js body.breakdance .mf-r-schem.mf-in::after{--mf-wipe:101%}
html.mf-still body.breakdance .mf-r-schem::after{display:none}

/* loop nodes light up in sequence, driven by a class from the script */
html.mf-js body.breakdance .mf-r-node{transition:box-shadow .5s var(--mf-ease)}
html.mf-js body.breakdance .mf-r-node.mf-r-node-on{
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.45),inset 0 1px 0 rgba(255,255,255,.1),0 18px 60px rgba(0,0,0,.45);
}
html.mf-js body.breakdance .mf-r-node.mf-r-node-on .mf-r-node-i{color:var(--mf-cyan-lit)}

body.breakdance .mf-r-levers{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;width:100%;
}
body.breakdance .mf-r-lever{
  display:flex;flex-direction:column;
  height:100%;
  padding:2rem 1.6rem 1.9rem;
}
body.breakdance .mf-r-lv-i{
  font-family:var(--mf-mono);font-size:.62rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mf-cyan);
  margin:0 0 1.1rem;
}
body.breakdance .mf-r-lv-h{
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:1.02rem;letter-spacing:.035em;text-transform:uppercase;
  color:var(--mf-text);margin:0 0 .7rem;
}
body.breakdance .mf-r-lv-p{
  font-family:'Rajdhani',sans-serif;font-size:.98rem;line-height:1.7;
  color:var(--mf-muted);margin:0;
}

/* ==========================================================================
   03 / 04 / 05 - ROLE SECTIONS
   ========================================================================== */
body.breakdance .mf-r-role-in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:3.5rem;align-items:center;width:100%;
}
/* -b alternates the reading direction so three stacked role sections do not
   read as three identical slabs. */
body.breakdance .mf-r-role-b .mf-r-role-t{order:2}
body.breakdance .mf-r-role-b .mf-r-schem{order:1}

body.breakdance .mf-r-role-t{display:flex;flex-direction:column;align-items:flex-start}

body.breakdance .mf-r-badge{
  display:inline-flex;align-items:center;gap:.55rem;width:auto;
  padding:.42rem .85rem;margin:0 0 1.1rem;
  font-family:var(--mf-mono);font-size:.58rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
body.breakdance .mf-r-badge::before{content:'';width:6px;height:6px;background:currentColor;flex:0 0 auto}
body.breakdance .mf-r-badge-live{
  color:var(--mf-cyan);
  background:rgba(0,212,255,.09);
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.4);
}
body.breakdance .mf-r-badge-dev{
  color:#A78BFA;
  background:rgba(139,92,246,.1);
  box-shadow:inset 0 0 0 1px rgba(139,92,246,.36);
}

/* --- Pilot Life capability tiles ------------------------------------------ */
body.breakdance .mf-r-tiles{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;width:100%;
}
body.breakdance .mf-r-tile{
  display:flex;flex-direction:column;gap:.9rem;
  height:100%;
  padding:1.5rem 1.3rem;
  transition:transform .35s var(--mf-ease),box-shadow .35s var(--mf-ease);
}
body.breakdance .mf-r-tile:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.34),inset 0 1px 0 rgba(255,255,255,.1),0 22px 60px rgba(0,0,0,.5);
}
body.breakdance .mf-r-tile:hover::before,
body.breakdance .mf-r-tile:hover::after{width:19px;height:19px;border-color:var(--mf-cyan-lit)}
body.breakdance .mf-r-tile-i{
  font-family:var(--mf-mono);font-size:.62rem;font-weight:500;
  letter-spacing:.18em;color:var(--mf-cyan);
}
body.breakdance .mf-r-tile-t{
  font-family:'Rajdhani',sans-serif;font-weight:600;
  font-size:1rem;line-height:1.5;color:var(--mf-text);
}

/* --- schematics -----------------------------------------------------------
   Drawn entirely in CSS. Deliberately NOT a mock-up screenshot: these two
   roles have no interface to capture yet, and inventing one - or generating an
   image - would misrepresent the product to an audience that spots it.
   -------------------------------------------------------------------------- */
body.breakdance .mf-r-schem{
  position:relative;min-height:340px;overflow:hidden;
}
body.breakdance .mf-r-schem::before,
body.breakdance .mf-r-schem::after{z-index:5}

/* network of routes - Airline Manager */
/* NOTE: .mf-r-panel already spends ::before and ::after on the corner
   brackets, and these divs are intentionally childless, so the route nodes are
   painted as extra radial-gradient layers rather than as pseudo-elements.
   Overriding the pseudo-elements here would delete the brackets. */
body.breakdance .mf-r-schem-net{
  background-image:url('mf-schem-network.svg'),linear-gradient(180deg,var(--mf-veil-top),var(--mf-veil-bot));
  background-size:auto 84%,100% 100%;
  background-position:center center,0 0;
  background-repeat:no-repeat,no-repeat;
  background-color:rgba(8,10,14,.42);
}

/* passenger flow - Airport Manager */
body.breakdance .mf-r-schem-flow{
  background-image:url('mf-schem-flow.svg'),linear-gradient(180deg,var(--mf-veil-top),var(--mf-veil-bot));
  background-size:auto 84%,100% 100%;
  background-position:center center,0 0;
  background-repeat:no-repeat,no-repeat;
  background-color:rgba(8,10,14,.42);
}

/* real capture, Airline Manager (2026-08-25b, contain-fix 2026-08-25c,
   adapt-to-image 2026-08-25e) - replaces mf-r-schem-net on this section now
   that a real UI mockup exists. cover cropped the bottom and left; contain
   stopped the crop but left letterbox bars, since .mf-r-schem's box shape
   still came from min-height:340px rather than the image. This source is a
   measured 1536x1024 (ratio 1.5) - aspect-ratio below makes the box that
   exact shape instead, sized from its own column width, so cover now fills
   it with zero crop AND zero letterbox: the box adapts to the image, not
   the reverse. mf-r-schem-net / -flow are left in place, unused, in case a
   role ever reverts to the abstract treatment. */
body.breakdance .mf-r-schem-am{
  aspect-ratio:1536/1024;
  min-height:0;
  background-image:url('https://metaflight.aero/wp-content/uploads/2026/08/MF-ROLE-AIRLINEMANAGER-SECTION.jpg');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-color:rgba(8,10,14,.42);
}

/* real capture, Airport Operator (2026-08-25b) - see mf-r-schem-am above,
   same adapt-to-image fix (2026-08-25e), same measured 1536x1024 source. */
body.breakdance .mf-r-schem-ao{
  aspect-ratio:1536/1024;
  min-height:0;
  background-image:url('https://metaflight.aero/wp-content/uploads/2026/08/MF-ROLE-AIRPORTOPERATOR-SECTION.jpg');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-color:rgba(8,10,14,.42);
}

/* corner disclaimer on the two schematics above: both source images contain
   in-app screens, so the panel needs a short label saying they are not
   final. Real Text node (same convention as .mf-r-plate-cap), not CSS
   content, so it stays in the accessibility tree. */
body.breakdance .mf-r-schem-tag{
  position:absolute;left:14px;bottom:14px;z-index:6;width:auto;
  padding:.4rem .75rem;
  font-family:var(--mf-mono);font-size:clamp(.5rem,1.4vw,.58rem);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mf-muted);
  background:rgba(8,10,14,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px var(--mf-hair);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}

/* ==========================================================================
   06 - ONE LOOP, THREE POSITIONS
   ========================================================================== */
body.breakdance .mf-r-loop-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;width:100%;
}
body.breakdance .mf-r-node{
  position:relative;
  display:flex;flex-direction:column;
  height:100%;
  padding:2rem 1.6rem;
  text-align:center;
}
/* the arrow between nodes - drawn on the wrapper, not on the clipped panel */
body.breakdance .mf-r-loop-row > .mf-r-node:not(:last-child) .mf-r-node-i::after{
  content:'';position:absolute;top:50%;right:-.85rem;
  width:1.1rem;height:1px;background:var(--mf-hair);
}
body.breakdance .mf-r-node-i{
  font-family:var(--mf-mono);font-size:.62rem;font-weight:500;
  letter-spacing:.2em;color:var(--mf-cyan);margin:0 0 .9rem;
}
body.breakdance .mf-r-node-h{
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mf-text);margin:0 0 .6rem;
}
body.breakdance .mf-r-node-p{
  font-family:'Rajdhani',sans-serif;font-size:.96rem;line-height:1.68;
  color:var(--mf-muted);margin:0;
}

/* ==========================================================================
   07 - FAQ
   The accordion element ships with its own defaults. Everything visual is
   forced here so the page cannot drift back to rounded corners or Inter.
   ========================================================================== */
/* Panel wrapper, matching the product-page FAQ so the two read as one system.
   Chamfer 16px on the panel, 9px on each row, cyan bracket at two corners. */
body.breakdance .mf-r-faq-panel{
  position:relative;max-width:900px;margin:0 auto;width:100%;
  padding:2.2rem 2rem 2rem;
  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));
  background:radial-gradient(110% 80% at 8% 0%,rgba(0,212,255,.10),transparent 58%),linear-gradient(180deg,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),inset 0 1px 0 rgba(255,255,255,.07),0 20px 60px rgba(0,0,0,.4);
  align-items:stretch;
}
body.breakdance .mf-r-faq-panel::before,
body.breakdance .mf-r-faq-panel::after{content:'';position:absolute;width:15px;height:15px;pointer-events:none;z-index:4}
body.breakdance .mf-r-faq-panel::before{top:9px;right:9px;border-top:1px solid var(--mf-cyan-lit);border-right:1px solid var(--mf-cyan-lit)}
body.breakdance .mf-r-faq-panel::after{bottom:9px;left:9px;border-bottom:1px solid var(--mf-cyan-lit);border-left:1px solid var(--mf-cyan-lit)}

body.breakdance .mf-r-acc{max-width:none;margin:0;width:100%}
body.breakdance .mf-r-acc .bde-accordion__content-wrapper{
  background:rgba(255,255,255,.04);
  border:none!important;border-radius:0!important;
  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));
  margin-bottom:.55rem;
  transition:background .25s var(--mf-ease),box-shadow .25s var(--mf-ease);
}
body.breakdance .mf-r-acc .bde-accordion__content-wrapper:hover{
  background:rgba(0,212,255,.06);
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.35);
}
/* open row: cyan spine on the left edge, matching the product-page FAQ */
body.breakdance .mf-r-acc .bde-accordion__content-wrapper:has(.bde-accordion__button[aria-expanded="true"]){
  background:rgba(0,212,255,.05);
  box-shadow:inset 3px 0 0 0 var(--mf-cyan),inset 0 0 0 1px rgba(0,212,255,.32);
}
body.breakdance .mf-r-acc .bde-accordion__title-tag{margin:0}
body.breakdance .mf-r-acc .bde-accordion__button{
  display:flex;align-items:center;gap:1rem;width:100%;
  background:transparent;border:none;border-radius:0;
  padding:1.15rem 1.4rem;text-align:left;cursor:pointer;
}
body.breakdance .mf-r-acc .bde-accordion__title{
  flex:1 1 auto;
  font-family:var(--mf-mono)!important;font-weight:500!important;
  font-size:.72rem!important;letter-spacing:.12em;line-height:1.6;
  text-transform:uppercase;
  color:var(--mf-text)!important;
}
body.breakdance .mf-r-acc .bde-accordion__button[aria-expanded="true"] .bde-accordion__title{
  color:var(--mf-cyan)!important;
}

/* 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-r-acc .bde-accordion__icon{
  position:relative;flex:0 0 auto;width:14px;height:14px;
}
body.breakdance .mf-r-acc .bde-accordion__icon::before,
body.breakdance .mf-r-acc .bde-accordion__icon::after{
  content:'';position:absolute;top:50%;left:0;
  width:14px;height:1.5px;background:var(--mf-cyan);
  transform:translateY(-50%);
}
body.breakdance .mf-r-acc .bde-accordion__icon--default::after{
  transform:translateY(-50%) rotate(90deg);
}
body.breakdance .mf-r-acc .bde-accordion__icon--active::after{display:none}
body.breakdance .mf-r-acc .bde-accordion__button[aria-expanded="false"] .bde-accordion__icon--active,
body.breakdance .mf-r-acc .bde-accordion__button[aria-expanded="true"] .bde-accordion__icon--default{
  display:none;
}

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

/* ==========================================================================
   08 - CLOSING CTA
   ========================================================================== */
body.breakdance .mf-r-ctabox{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:4rem 2rem;
  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-r-ctabox .mf-r-sub{margin:0 0 2rem}

/* --------------------------------------------------------------------------
   HERO STATUS STRIP - three across, always.
   flex:1 1 190px let Airport Manager drop to a second line and then stretch
   full width, which read as a hierarchy that does not exist. A three column
   grid with min-width:0 keeps the three roles equal and on one row; the
   labels shrink instead of the layout breaking.
   -------------------------------------------------------------------------- */
body.breakdance .mf-r-strip{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  flex-wrap:nowrap;gap:.5rem;width:100%;align-items:stretch;
}
body.breakdance .mf-r-stat{flex:0 0 auto;min-width:0;padding:.8rem .85rem}
body.breakdance .mf-r-stat-n{font-size:.7rem;letter-spacing:.02em;line-height:1.25}
body.breakdance .mf-r-stat-v{font-size:.52rem;letter-spacing:.12em}
/* ==========================================================================
   MOBILE - KEEP THIS BLOCK LAST IN THE FILE.
   Rules appended after a media query override it; that has cost us a debug
   round before. Anything new goes ABOVE this line.
   ========================================================================== */
@media(max-width:1023px){
  body.breakdance .mf-r-hero-in{grid-template-columns:1fr;gap:2.5rem}
  body.breakdance .mf-r-hero-txt{max-width:none}
  body.breakdance .mf-r-cue{display:none}
  body.breakdance .mf-r-hero > .section-container{padding:8rem 1.25rem 4rem}
  body.breakdance .mf-r-sec > .section-container{padding:4.5rem 1.25rem}
  body.breakdance .mf-r-levers,
  body.breakdance .mf-r-loop-row{grid-template-columns:1fr}
  body.breakdance .mf-r-role-in{grid-template-columns:1fr;gap:2.5rem}
  /* keep the text first on every role once the columns collapse */
  body.breakdance .mf-r-role-b .mf-r-role-t{order:1}
  body.breakdance .mf-r-role-b .mf-r-schem{order:2}
  /* Was a floor guess for the abstract -net/-flow schematics on the
     narrowest phones; on the -am/-ao photo panels (2026-08-25e) it fought
     their aspect-ratio:1536/1024 below ~360px wide, adding a sliver of
     letterbox. -net/-flow are unused, so dropping it costs them nothing
     and lets the photo panels stay ratio-true at every width. */
  body.breakdance .mf-r-schem{min-height:0}
  body.breakdance .mf-r-faq-panel{padding:1.5rem 1.1rem}
  body.breakdance .mf-r-loop-row > .mf-r-node:not(:last-child) .mf-r-node-i::after{display:none}
  body.breakdance .mf-r-head{margin-bottom:2.5rem}
  body.breakdance .mf-r-kicker{margin-top:2.5rem}
  body.breakdance .mf-r-ctabox{padding:3rem 1.4rem}
  body.breakdance .mf-r-ctas{width:100%}
  body.breakdance .mf-r-ctas .mf-bd-btn{flex:1 1 100%}
  body.breakdance .mf-r-ctas a.bde-button__button{width:100%}
}
@media(max-width:600px){
  body.breakdance .mf-r-tiles{grid-template-columns:1fr}
}

@media(max-width:539px){
  body.breakdance .mf-r-strip{grid-template-columns:1fr}
}

/* ==========================================================================
   v3 ROLES - THREE ROLES. KEEP LAST.
   Airport Operator is confirmed as a distinct fourth role: the Operator runs
   the micro operations of a field, the Manager runs strategy and events on
   top of it. The hero status strip therefore carries four cards.
   PITFALL 3d: the strip was flex-wrap with flex:1 1 190px. A fourth peer would
   drop to its own line and stretch full width, reading as a hierarchy that
   does not exist. A fixed count of peers goes in a grid and the labels shrink,
   not the layout.
   ========================================================================== */
body.breakdance .mf-r-strip{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.6rem;width:100%;margin:0 0 2.2rem;
}
body.breakdance .mf-r-stat{flex:0 0 auto;width:auto;min-width:0}
body.breakdance .mf-r-stat-n{overflow-wrap:anywhere}
@media (max-width:639px){
body.breakdance .mf-r-strip{grid-template-columns:1fr}
}

/* the chain is three peers. Fixed count -> grid, per pitfall 3d */
body.breakdance .mf-r-loop-row{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1023px){
body.breakdance .mf-r-loop-row{grid-template-columns:1fr}
}
@media (max-width:639px){
body.breakdance .mf-r-loop-row{grid-template-columns:1fr}
}
/* ==========================================================================
   09 - CREDITED IN-SIM CAPTURE PLATE  (v2 - SOFT INTEGRATION)
   Real community captures, framed as telemetry rather than as decoration.
   The frame is the Div .mf-r-plate; the image is the BARE img that Image2
   emits, which carries the custom class ITSELF - hence img.mf-r-plate-img
   and never .mf-r-plate-img img.

   WHY v1 READ AS A FOREIGN OBJECT, three causes, all fixed here:
     1. The plate was the only OPAQUE element on a page built entirely from
        translucent glass: background #050810 plus a four-sided inset hairline.
        A sealed rectangle on a starfield reads as a pasted-in photograph.
        v2 has NO background and NO frame box: the edges are dissolved with a
        mask so the capture bleeds into the void field itself.
     2. The grade was almost neutral (saturate .9), so warm cockpit ambers and
        daylight blues fought the locked cyan accent. v2 desaturates hard and
        washes a faint cyan/violet duotone over the result.
     3. The reveal was the generic .mf-rv used for paragraphs. A 1240px image
        arriving like a text block lands as a slab. v2 emerges from blur and
        monochrome over 1.6s, then keeps breathing with scroll position.

   THE MASK IS ON THE IMG, AND THE IMG IS NOT TRANSFORMED. A parallax translate
   or an overscan scale would carry the mask with it, pushing the feathered top
   edge outside the plate box where overflow:hidden cuts it - which recreates
   the hard edge the mask exists to remove. Motion is therefore carried by
   opacity and filter only, both composited.

   --mf-pp is a 0..1 scroll progress written per plate by mf-hud-roles.js
   (smoothstepped on the distance between the plate centre and the viewport
   centre). It drives ONLY opacity, so a scroll frame costs nothing. It
   defaults to 1 here, so the plate is fully correct with the script blocked.
   ========================================================================== */
body.breakdance .mf-r-plate{
  --mf-pp:1;
  position:relative;display:block;width:100%;margin-top:2.4rem;
  aspect-ratio:2.5/1;overflow:hidden;background:transparent;
  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));
}
/* the reveal itself is slower and travels less than a text block */
html.mf-js body.breakdance .mf-r-plate.mf-rv{
  transform:translateY(14px);
  transition-duration:1.5s,1.5s;
}
html.mf-js body.breakdance .mf-r-plate.mf-rv.mf-in{transform:none}

body.breakdance img.mf-r-plate-img{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;display:block;border-radius:0;
  object-fit:cover;object-position:50% 50%;
  filter:saturate(.5) contrast(1.06) brightness(.76) blur(0);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 72%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 72%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:opacity 1.6s var(--mf-ease),filter 1.6s var(--mf-ease);
}
/* entry state, scoped with :not(.mf-in) so the FINAL grade stays on the base
   rule and :hover keeps winning without a specificity arms race */
html.mf-js body.breakdance .mf-r-plate:not(.mf-in) img.mf-r-plate-img{
  opacity:0;
  filter:saturate(0) contrast(1) brightness(.55) blur(16px);
}

/* grade, duotone wash and vignette. Layer 1 keeps the burned-in credit strip
   legible, layer 2 pulls the photograph toward the page hue, layer 3 closes
   the corners so nothing competes with the content above. */
body.breakdance .mf-r-plate::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,8,16,.58) 0%,rgba(5,8,16,.06) 34%,rgba(5,8,16,.10) 58%,rgba(5,8,16,.80) 100%),
    linear-gradient(148deg,rgba(0,118,160,.24) 0%,rgba(5,8,16,0) 48%,rgba(96,64,196,.18) 100%),
    radial-gradient(120% 98% at 50% 46%,rgba(5,8,16,0) 36%,rgba(5,8,16,.66) 100%);
  opacity:calc(1 - var(--mf-pp) * .24);
  transition:opacity .35s linear;
}
/* top-right L bracket, same language as .mf-r-panel but held back at rest */
body.breakdance .mf-r-plate::after{
  content:'';position:absolute;top:15px;right:17px;width:13px;height:13px;z-index:4;
  pointer-events:none;
  border-top:1px solid rgba(140,232,255,.30);
  border-right:1px solid rgba(140,232,255,.30);
  opacity:calc(.2 + var(--mf-pp) * .8);
  transition:width .4s var(--mf-ease),height .4s var(--mf-ease),border-color .4s var(--mf-ease),opacity .35s linear;
}
body.breakdance .mf-r-plate:hover::after{width:26px;height:26px;border-color:rgba(140,232,255,.72)}
body.breakdance .mf-r-plate:hover img.mf-r-plate-img{
  filter:saturate(.68) contrast(1.06) brightness(.9) blur(0);
}
body.breakdance .mf-r-plate:hover::before{opacity:calc(1 - var(--mf-pp) * .38)}

/* burned-in credit strip - one single line, no flex, so a Breakdance Text
   wrapping its content in a <p> cannot break the layout */
body.breakdance .mf-r-plate-cap{
  position:absolute;z-index:5;left:0;right:0;bottom:0;
  width:100%;margin:0;padding:0 1.5rem 1rem;
  font-family:'JetBrains Mono',monospace;font-weight:500;
  font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;line-height:1.5;
  color:rgba(157,178,201,.62);text-align:left;pointer-events:none;
  opacity:calc(.3 + var(--mf-pp) * .7);
  transition:opacity .35s linear,color .4s var(--mf-ease);
}
body.breakdance .mf-r-plate:hover .mf-r-plate-cap{color:rgba(157,178,201,.95)}
body.breakdance .mf-r-plate-cap p{margin:0}
body.breakdance .mf-r-plate-cap .mf-r-plate-by{color:rgba(140,232,255,.72)}
body.breakdance .mf-r-plate-cap .mf-r-plate-by::before{
  content:'';display:inline-block;width:5px;height:5px;background:rgba(0,212,255,.7);
  margin:0 .6rem 0 .1rem;
}
/* -b alternates the reading direction, so the strip flips with it */
body.breakdance .mf-r-role-b .mf-r-plate-cap{text-align:right}
/* the -b sections read right to left, so the duotone wash flips with them */
body.breakdance .mf-r-role-b .mf-r-plate::before{
  background:
    linear-gradient(180deg,rgba(5,8,16,.58) 0%,rgba(5,8,16,.06) 34%,rgba(5,8,16,.10) 58%,rgba(5,8,16,.80) 100%),
    linear-gradient(212deg,rgba(0,118,160,.24) 0%,rgba(5,8,16,0) 48%,rgba(96,64,196,.18) 100%),
    radial-gradient(120% 98% at 50% 46%,rgba(5,8,16,0) 36%,rgba(5,8,16,.66) 100%);
}
/* ==========================================================================
   10 - CLOSING CTA PLATE FIELD
   Full-bleed capture behind the closing panel. Only images whose lower band
   is already below 30 luminance qualify, so the scrim can stay light enough
   to keep the photograph readable.
   ========================================================================== */
body.breakdance .mf-r-sec.mf-r-cta{
  background-image:
    linear-gradient(180deg,rgba(5,8,16,.80) 0%,rgba(5,8,16,.90) 52%,rgba(5,8,16,.97) 100%),
    linear-gradient(148deg,rgba(0,118,160,.20) 0%,rgba(5,8,16,0) 52%,rgba(96,64,196,.16) 100%),
    radial-gradient(120% 90% at 50% 30%,rgba(5,8,16,0) 30%,rgba(5,8,16,.55) 100%),
    url('/wp-content/uploads/2026/08/mf-cap-florian-afr2929-a320-wing.webp');
  background-size:cover,cover,cover,cover;
  background-position:50% 16%;background-repeat:no-repeat;
}
body.breakdance .mf-r-sec.mf-r-cta::after{
  content:'CAPTURE BY FLORIAN / AFR2929 / MSFS 2024';
  position:absolute;bottom:1rem;right:1.6rem;z-index:3;pointer-events:none;
  font-family:'JetBrains Mono',monospace;font-weight:500;
  font-size:.5rem;letter-spacing:.18em;color:rgba(157,178,201,.48);
}

@media(max-width:900px){
  body.breakdance .mf-r-plate{aspect-ratio:16/9;margin-top:2rem}
  body.breakdance img.mf-r-plate-img{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 76%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 76%,transparent 100%);
  }
  body.breakdance .mf-r-plate-cap{font-size:.52rem;letter-spacing:.13em;padding:0 1rem .8rem}
  body.breakdance .mf-r-sec.mf-r-cta::after{right:1rem;bottom:.7rem}
}
@media(prefers-reduced-motion:reduce){
  body.breakdance .mf-r-plate{--mf-pp:1}
  body.breakdance img.mf-r-plate-img{transition:none}
  html.mf-js body.breakdance .mf-r-plate:not(.mf-in) img.mf-r-plate-img{opacity:1;filter:saturate(.5) contrast(1.06) brightness(.76) blur(0)}
  html.mf-js body.breakdance .mf-r-plate.mf-rv{transform:none}
  body.breakdance .mf-r-plate::before,
  body.breakdance .mf-r-plate::after,
  body.breakdance .mf-r-plate-cap{transition:none}
}
/* ==========================================================================
   10 - ROLES INTERACTIONS  (hero, v1 2026-08-24)
   Replaces the departures board. Passenger demand sits at the CENTRE because
   it is not a playable role: it is the finite resource the three roles work
   against. The three playable roles sit on one ring 120 degrees apart, so no
   role can read as senior to another.
   Geometry is CSS only: plain Breakdance Div/Text nodes, no SVG on the canvas
   and no Code Block. mf-hud-roles.js swaps ONE class on .mf-r-i-loop
   (.mf-i1 ... .mf-i6). Every radius is a fraction of --S.
   AMBER APPEARS ONLY ON THE TWO FLIGHTCOIN TOKENS.
   ========================================================================== */
body.breakdance .mf-r-i-panel{
  display:flex;flex-direction:column;align-items:stretch;width:100%;
}
body.breakdance .mf-r-i-head{
  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-r-i-ttl{
  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-r-i-ttl::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-r-i-idx{
  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-r-i-loop{
  --S:clamp(230px,23vw,296px);
  position:relative;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:1.1rem;padding:1.7rem max(1.15rem,58px) .5rem;
}
body.breakdance .mf-r-i-ring{
  position:relative;flex:0 0 auto;
  width:var(--S);height:var(--S);max-width:none;overflow:visible;
}
/* outer flight arc at .46S. closest-side pins 100 percent to the half-size,
   so a percentage here is twice the radius expressed as a fraction of --S. */
body.breakdance .mf-r-i-ring::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle closest-side at 50% 50%,transparent calc(92% - 1px),rgba(0,212,255,.16) calc(92% - 1px),rgba(0,212,255,.16) 92%,transparent 92%),
    radial-gradient(circle closest-side at 50% 50%,transparent calc(80% - 1px),var(--mf-hair) calc(80% - 1px),var(--mf-hair) 80%,transparent 80%),
    radial-gradient(circle closest-side at 50% 50%,rgba(0,212,255,.10),rgba(0,212,255,0) 36%);
}
body.breakdance .mf-r-i-ring::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(0,212,255,.13),rgba(0,212,255,0) 32%,rgba(0,212,255,0) 100%);
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,#000 92%,transparent 92%);
  mask-image:radial-gradient(circle closest-side at 50% 50%,#000 92%,transparent 92%);
  animation:mf-r-i-sweep 12s linear infinite;
}
@keyframes mf-r-i-sweep{to{transform:rotate(360deg)}}

/* three spokes drawn as hard conic stops, masked to the annulus between the
   core plate and the role ring so they never run under a label. */
body.breakdance .mf-r-i-spokes{
  position:absolute;inset:0;z-index:1;width:auto;max-width:none;pointer-events:none;
  background:conic-gradient(from 0deg,
    var(--mf-hair) 0 .5deg,transparent .5deg 119.5deg,
    var(--mf-hair) 119.5deg 120.5deg,transparent 120.5deg 239.5deg,
    var(--mf-hair) 239.5deg 240.5deg,transparent 240.5deg 359.5deg,
    var(--mf-hair) 359.5deg 360deg);
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,transparent 0 34%,#000 36% 80%,transparent 80%);
  mask-image:radial-gradient(circle closest-side at 50% 50%,transparent 0 34%,#000 36% 80%,transparent 80%);
}

/* ---- the demand core: NOT a playable role ---- */
body.breakdance .mf-r-i-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:6;width:auto;max-width:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;
  padding:.7rem .9rem .65rem;
  background:rgba(0,212,255,.05);
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.28);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  transition:box-shadow .45s var(--mf-ease),background-color .45s var(--mf-ease);
}
body.breakdance .mf-r-i-core-t{
  width:100%;text-align:center;white-space:nowrap;
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:.6rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--mf-text);
}
body.breakdance .mf-r-i-core-s{
  width:100%;text-align:center;white-space:nowrap;
  font-family:var(--mf-mono);font-size:.45rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mf-muted);
}

/* ---- role stations. The card carries a void fill so the ring reads as
   passing behind it rather than through the label. ---- */
body.breakdance .mf-r-i-nd{
  position:absolute;z-index:5;width:112px;max-width:none;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  padding:.5rem .45rem .45rem;
  background:rgba(5,8,16,.92);
  box-shadow:inset 0 0 0 1px var(--mf-hair);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  transition:box-shadow .45s var(--mf-ease);
}
body.breakdance .mf-r-i-nd::before{
  content:'';flex:0 0 auto;width:11px;height:11px;
  background-color:rgba(160,225,255,.30);
  clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px);
  transition:background-color .45s var(--mf-ease),transform .45s var(--mf-ease);
}
body.breakdance .mf-r-i-nd-t{
  width:100%;text-align:center;line-height:1.35;
  font-family:var(--mf-mono);font-size:.54rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mf-muted);
  transition:color .45s var(--mf-ease);
}
body.breakdance .mf-r-i-nd-s{
  width:100%;text-align:center;
  font-family:var(--mf-mono);font-size:.45rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mf-muted);
}
body.breakdance .mf-r-i-nd-live{box-shadow:inset 0 0 0 1px rgba(0,212,255,.40)}
body.breakdance .mf-r-i-nd-live .mf-r-i-nd-s{color:var(--mf-cyan)}
body.breakdance .mf-r-i-nd-dev{box-shadow:inset 0 0 0 1px rgba(139,92,246,.32)}
body.breakdance .mf-r-i-nd-dev .mf-r-i-nd-s{color:#A78BFA}

/* stations sit ON the role ring: radius .40S, 120 degrees apart, airline at
   the top so the reading order follows the money. */
body.breakdance .mf-r-i-nd-air{left:50%;top:10%}
body.breakdance .mf-r-i-nd-plt{left:84.6%;top:70%}
body.breakdance .mf-r-i-nd-opr{left:15.4%;top:70%}

/* ---- travelling tokens ----
   Each pivot fills the ring and rotates about its centre; the token rides its
   own lane through translateY. Rotating the pivot walks the token around the
   ring, changing the token translateY walks it along a spoke. No path maths,
   no keyframe per segment. */
body.breakdance .mf-r-i-piv{
  position:absolute;inset:0;z-index:7;width:auto;max-width:none;pointer-events:none;
  transition:transform 1.15s var(--mf-ease);
}
body.breakdance .mf-r-i-tk{
  position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
  opacity:0;
  transition:opacity .4s var(--mf-ease),transform 1.15s var(--mf-ease);
}
body.breakdance .mf-r-i-tk-fc{
  background-image:var(--mf-coin);background-size:contain;
  background-repeat:no-repeat;background-position:center;
  filter:drop-shadow(0 0 7px rgba(255,176,32,.55));
}
body.breakdance .mf-r-i-tk-pax{
  width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
  background-color:var(--mf-cyan);
  clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px);
  filter:drop-shadow(0 0 7px rgba(0,212,255,.6));
}
body.breakdance .mf-r-i-tk-ac{
  width:22px;height:22px;margin:-11px 0 0 -11px;
  background-color:var(--mf-cyan);
  -webkit-mask-image:var(--mf-jet);mask-image:var(--mf-jet);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  filter:drop-shadow(0 0 9px rgba(0,212,255,.6));
}

/* rest state. Step 1 is the reset frame: transitions are cut there so tokens
   snap home invisibly instead of rewinding across the panel. */
body.breakdance .mf-r-i-piv-dem,
body.breakdance .mf-r-i-piv-fare,
body.breakdance .mf-r-i-piv-grnd{transform:rotate(0deg)}
body.breakdance .mf-r-i-piv-air{transform:rotate(120deg)}
body.breakdance .mf-r-i-piv-dem .mf-r-i-tk{transform:translateY(0)}
body.breakdance .mf-r-i-piv-fare .mf-r-i-tk,
body.breakdance .mf-r-i-piv-grnd .mf-r-i-tk{transform:translateY(calc(var(--S) * -.40))}
body.breakdance .mf-r-i-piv-air .mf-r-i-tk{transform:translateY(calc(var(--S) * -.40)) rotate(180deg)}
body.breakdance .mf-r-i-loop.mf-i1 .mf-r-i-piv,
body.breakdance .mf-r-i-loop.mf-i1 .mf-r-i-tk{transition:none}

/* 02 ROUTE - demand leaves the core along the airline spoke */
body.breakdance .mf-r-i-loop.mf-i2 .mf-r-i-piv-dem .mf-r-i-tk,
body.breakdance .mf-r-i-loop.mf-i3 .mf-r-i-piv-dem .mf-r-i-tk,
body.breakdance .mf-r-i-loop.mf-i4 .mf-r-i-piv-dem .mf-r-i-tk,
body.breakdance .mf-r-i-loop.mf-i5 .mf-r-i-piv-dem .mf-r-i-tk,
body.breakdance .mf-r-i-loop.mf-i6 .mf-r-i-piv-dem .mf-r-i-tk{transform:translateY(calc(var(--S) * -.40))}
body.breakdance .mf-r-i-loop.mf-i2 .mf-r-i-piv-dem .mf-r-i-tk{opacity:1}

/* 03 CREW - a FlightCoin walks the ring from the airline to the pilot */
body.breakdance .mf-r-i-loop.mf-i3 .mf-r-i-piv-fare,
body.breakdance .mf-r-i-loop.mf-i4 .mf-r-i-piv-fare,
body.breakdance .mf-r-i-loop.mf-i5 .mf-r-i-piv-fare,
body.breakdance .mf-r-i-loop.mf-i6 .mf-r-i-piv-fare{transform:rotate(120deg)}
body.breakdance .mf-r-i-loop.mf-i3 .mf-r-i-piv-fare .mf-r-i-tk,
body.breakdance .mf-r-i-loop.mf-i4 .mf-r-i-piv-fare .mf-r-i-tk,
body.breakdance .mf-r-i-loop.mf-i5 .mf-r-i-piv-fare .mf-r-i-tk{opacity:1}

/* 04 GROUND - a second FlightCoin walks the short way to the operator */
body.breakdance .mf-r-i-loop.mf-i4 .mf-r-i-piv-grnd,
body.breakdance .mf-r-i-loop.mf-i5 .mf-r-i-piv-grnd,
body.breakdance .mf-r-i-loop.mf-i6 .mf-r-i-piv-grnd{transform:rotate(-120deg)}
body.breakdance .mf-r-i-loop.mf-i4 .mf-r-i-piv-grnd .mf-r-i-tk,
body.breakdance .mf-r-i-loop.mf-i5 .mf-r-i-piv-grnd .mf-r-i-tk{opacity:1}

/* 05 FLIGHT - the aircraft runs the pilot spoke inward and delivers */
body.breakdance .mf-r-i-loop.mf-i5 .mf-r-i-piv-air .mf-r-i-tk,
body.breakdance .mf-r-i-loop.mf-i6 .mf-r-i-piv-air .mf-r-i-tk{transform:translateY(0) rotate(180deg)}
body.breakdance .mf-r-i-loop.mf-i5 .mf-r-i-piv-air .mf-r-i-tk{opacity:1}

/* lit destinations */
body.breakdance .mf-r-i-loop.mf-i1 .mf-r-i-core,
body.breakdance .mf-r-i-loop.mf-i5 .mf-r-i-core,
body.breakdance .mf-r-i-loop.mf-i6 .mf-r-i-core{
  background:rgba(0,212,255,.11);
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.62);
}
body.breakdance .mf-r-i-loop.mf-i2 .mf-r-i-nd-air::before,
body.breakdance .mf-r-i-loop.mf-i3 .mf-r-i-nd-plt::before,
body.breakdance .mf-r-i-loop.mf-i5 .mf-r-i-nd-plt::before,
body.breakdance .mf-r-i-loop.mf-i4 .mf-r-i-nd-opr::before{
  background-color:var(--mf-cyan);transform:scale(1.3);
}
body.breakdance .mf-r-i-loop.mf-i2 .mf-r-i-nd-air .mf-r-i-nd-t,
body.breakdance .mf-r-i-loop.mf-i3 .mf-r-i-nd-plt .mf-r-i-nd-t,
body.breakdance .mf-r-i-loop.mf-i5 .mf-r-i-nd-plt .mf-r-i-nd-t,
body.breakdance .mf-r-i-loop.mf-i4 .mf-r-i-nd-opr .mf-r-i-nd-t{color:var(--mf-text)}

/* ---- readout: one line per step, stacked in place ---- */
body.breakdance .mf-r-i-read{
  position:relative;width:100%;min-height:3.2em;display:block;
}
body.breakdance .mf-r-i-step{
  position:absolute;left:0;top:0;width:100%;text-align:center;
  font-family:var(--mf-mono);font-size:.57rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mf-muted);line-height:1.7;
  opacity:0;transform:translateY(7px);
  transition:opacity .5s var(--mf-ease),transform .5s var(--mf-ease);
}
body.breakdance .mf-r-i-loop.mf-i1 .mf-r-i-step:nth-child(1),
body.breakdance .mf-r-i-loop.mf-i2 .mf-r-i-step:nth-child(2),
body.breakdance .mf-r-i-loop.mf-i3 .mf-r-i-step:nth-child(3),
body.breakdance .mf-r-i-loop.mf-i4 .mf-r-i-step:nth-child(4),
body.breakdance .mf-r-i-loop.mf-i5 .mf-r-i-step:nth-child(5),
body.breakdance .mf-r-i-loop.mf-i6 .mf-r-i-step:nth-child(6){opacity:1;transform:none;color:var(--mf-text)}

/* ---- foot strip ---- */
body.breakdance .mf-r-i-foot{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:.85rem 1.15rem 1rem;box-shadow:inset 0 1px 0 var(--mf-hair);
}
body.breakdance .mf-r-i-foot-l{
  width:100%;text-align:center;line-height:1.65;
  font-family:var(--mf-mono);font-size:.55rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mf-text);
}
body.breakdance .mf-r-i-foot-n{
  width:100%;text-align:center;line-height:1.6;
  font-family:var(--mf-mono);font-size:.5rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mf-muted);
}

/* ---- reduced motion: the whole loop is shown at once and the JS never
   starts, so no state class is ever applied ---- */
html.mf-still body.breakdance .mf-r-i-ring::after{animation:none}
html.mf-still body.breakdance .mf-r-i-piv,
html.mf-still body.breakdance .mf-r-i-tk{transition:none}
html.mf-still body.breakdance .mf-r-i-piv-fare{transform:rotate(120deg)}
html.mf-still body.breakdance .mf-r-i-piv-grnd{transform:rotate(-120deg)}
html.mf-still body.breakdance .mf-r-i-tk{opacity:1}
html.mf-still body.breakdance .mf-r-i-piv-dem .mf-r-i-tk{transform:translateY(calc(var(--S) * -.40))}
html.mf-still body.breakdance .mf-r-i-read{min-height:0}
html.mf-still body.breakdance .mf-r-i-step{
  position:static;opacity:1;transform:none;text-align:left;color:var(--mf-muted);
}
@media(prefers-reduced-motion:reduce){
  body.breakdance .mf-r-i-ring::after{animation:none}
  body.breakdance .mf-r-i-piv,
  body.breakdance .mf-r-i-tk{transition:none}
}

/* ===== ROLES INTERACTIONS, RESPONSIVE - keep last in this block ===== */
@media(max-width:1023px){
  body.breakdance .mf-r-i-loop{--S:min(50vw,296px)}
}
@media(max-width:767px){
  body.breakdance .mf-r-i-loop{--S:min(56vw,250px);padding:1.4rem max(1rem,50px) .4rem;gap:.9rem}
  body.breakdance .mf-r-i-nd{width:96px;padding:.45rem .4rem .4rem}
  body.breakdance .mf-r-i-nd-t{font-size:.5rem;letter-spacing:.08em}
  body.breakdance .mf-r-i-nd::before{width:9px;height:9px}
  body.breakdance .mf-r-i-core{padding:.6rem .7rem .55rem}
  body.breakdance .mf-r-i-core-t{font-size:.54rem}
  body.breakdance .mf-r-i-step{font-size:.53rem;letter-spacing:.07em}
  body.breakdance .mf-r-i-read{min-height:4em}
}
@media(max-width:479px){
  body.breakdance .mf-r-i-loop{--S:min(50vw,190px);padding:1.2rem max(.8rem,44px) .3rem}
  body.breakdance .mf-r-i-nd{width:84px}
  body.breakdance .mf-r-i-nd-t{font-size:.46rem;letter-spacing:.05em}
  body.breakdance .mf-r-i-nd-s{font-size:.42rem}
  body.breakdance .mf-r-i-core-t{font-size:.5rem}
  body.breakdance .mf-r-i-core-s{font-size:.42rem}
  body.breakdance .mf-r-i-read{min-height:5em}
}