/* ==========================================================================
   METAFLIGHT HUD - SITE CHROME (Breakdance header 11157 + footer 11158)
   Load order: mf-hud-tokens.css, then this file.

   MARKUP REALITY (read from the rendered page, not assumed):
   - EssentialElements\Image2 renders a BARE <img> and puts the custom class
     ON THE IMG ITSELF -> use img.mf-bd-logo-img, NOT .mf-bd-logo-img img.
   - Section wraps its children in a div.section-container.
   - Columns/Column render as div.bde-columns / div.bde-column with no layout
     of their own unless design properties are set on the element.
   - BasicList renders a plain <ul><li> with default bullets.

   SPECIFICITY: every rule is prefixed with body.breakdance so it reliably
   wins against Breakdance's own per-element CSS (.bde-columns-11157-101 etc.),
   which has the same weight as a single class and may load after this file.
   ========================================================================== */

/* ==========================================================================
   HEADER
   ========================================================================== */
body.breakdance .mf-bd-hd{
  position:sticky;top:0;z-index:100;
  background:rgba(5,8,16,.78);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 1px 0 var(--mf-hair);
  padding:0;
}
body.breakdance .mf-bd-hd .section-container{
  max-width:1240px;margin:0 auto;padding:.85rem 2rem;width:100%;
}

/* the three columns become one flex row */
body.breakdance .mf-bd-hd-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;width:100%;
}
body.breakdance .mf-bd-hd-logo{flex:0 0 auto;display:flex;align-items:center}
body.breakdance .mf-bd-hd-nav{flex:1 1 auto;display:flex;justify-content:center}
body.breakdance .mf-bd-hd-a{flex:0 0 auto;display:flex;align-items:center;gap:.7rem}

/* logo - the class is on the <img> */
body.breakdance img.mf-bd-logo-img{
  height:42px;width:auto;max-width:none;display:block;object-fit:contain;
}

/* nav */
body.breakdance .mf-bd-nv .breakdance-menu-list{
  display:flex;align-items:center;gap:1.9rem;
  list-style:none;margin:0;padding:0;
}
body.breakdance .mf-bd-nv .breakdance-menu-item{margin:0}
body.breakdance .mf-bd-nv .breakdance-menu-link{
  font-family:var(--mf-mono);
  font-size:.7rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--mf-muted);
  text-decoration:none;
  padding:.3rem 0;
  position:relative;display:inline-block;
  transition:color .25s var(--mf-ease);
}
body.breakdance .mf-bd-nv .breakdance-menu-link::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--mf-cyan);transition:width .3s var(--mf-ease);
}
body.breakdance .mf-bd-nv .breakdance-menu-link:hover{color:var(--mf-cyan)}
body.breakdance .mf-bd-nv .breakdance-menu-link:hover::after{width:100%}
body.breakdance .mf-bd-nv .current-menu-item > .breakdance-menu-link{color:var(--mf-text)}

/* dropdown panels keep the glass treatment */
body.breakdance .mf-bd-nv .breakdance-dropdown-column,
body.breakdance .mf-bd-nv .breakdance-dropdown__body{
  background:rgba(8,10,14,.94);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 0 0 1px var(--mf-hair);
}

/* mobile toggle */
body.breakdance .mf-bd-nv .breakdance-menu-toggle-lines,
body.breakdance .mf-bd-nv .breakdance-menu-toggle-lines::before,
body.breakdance .mf-bd-nv .breakdance-menu-toggle-lines::after{background:var(--mf-cyan)}

/* ==========================================================================
   BUTTONS
   Breakdance renders <a class="bde-button__button"> inside .bde-button.
   ========================================================================== */
body.breakdance .mf-bd-btn{display:inline-flex;flex:0 0 auto}
body.breakdance .mf-bd-btn .bde-button__button{
  display:inline-flex;align-items:center;justify-content:center;
  white-space:nowrap;
  font-family:var(--mf-mono);
  font-size:.65rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  line-height:1;
  padding:.78rem 1.4rem;
  border:none;border-radius:0;
  text-decoration:none;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:background .3s var(--mf-ease),box-shadow .3s var(--mf-ease),color .3s var(--mf-ease);
}
body.breakdance .mf-bd-btn-solid .bde-button__button{background:var(--mf-cyan);color:#04121C}
body.breakdance .mf-bd-btn-solid .bde-button__button:hover{
  background:var(--mf-cyan-lit);box-shadow:0 0 30px rgba(0,212,255,.42);color:#04121C;
}
body.breakdance .mf-bd-btn-ghost .bde-button__button{
  background:rgba(255,255,255,.05);
  color:var(--mf-cyan-lit);
  box-shadow:inset 0 0 0 1px rgba(140,232,255,.38);
}
body.breakdance .mf-bd-btn-ghost .bde-button__button:hover{
  background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px var(--mf-cyan-lit);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
body.breakdance .mf-bd-ft{
  background:rgba(5,8,16,.55);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--mf-hair);
  padding:0;
}
body.breakdance .mf-bd-ft .section-container{
  max-width:1240px;margin:0 auto;padding:4rem 2rem 2.5rem;width:100%;
}

body.breakdance .mf-bd-ft-in{
  display:grid;
  grid-template-columns:2.1fr 1fr 1fr 1fr 1.3fr;
  gap:2.4rem;
  align-items:start;
  width:100%;
}
body.breakdance .mf-bd-ft-brand,
body.breakdance .mf-bd-ft-col,
body.breakdance .mf-bd-ft-legal{width:auto;min-width:0}

body.breakdance img.mf-bd-ft-logo{
  height:40px;width:auto;max-width:none;display:block;object-fit:contain;
  margin-bottom:1.1rem;
}
body.breakdance .mf-bd-ft-blurb{
  font-family:'Rajdhani',sans-serif;
  font-size:.9rem;line-height:1.7;color:var(--mf-muted);
  max-width:330px;
}

body.breakdance h4.mf-bd-ft-h{
  font-family:var(--mf-mono);
  font-size:.63rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--mf-cyan);
  margin:0 0 1rem;
}

/* BasicList renders default bullets - remove them */
body.breakdance ul.mf-bd-ft-list{list-style:none;margin:0;padding:0}
body.breakdance ul.mf-bd-ft-list li{
  list-style:none;
  font-family:'Rajdhani',sans-serif;
  font-size:.91rem;line-height:1.5;
  color:var(--mf-muted);
  padding:.3rem 0;margin:0;
  transition:color .25s var(--mf-ease);
}
body.breakdance ul.mf-bd-ft-list li::marker{content:''}
body.breakdance ul.mf-bd-ft-list li:hover{color:var(--mf-cyan)}
body.breakdance ul.mf-bd-ft-list a{color:inherit;text-decoration:none}

body.breakdance .mf-bd-ft-legal{text-align:right}
body.breakdance .mf-bd-ft-copy{
  font-family:var(--mf-mono);
  font-size:.62rem;line-height:1.9;letter-spacing:.08em;
  color:var(--mf-muted);
}

/* ==========================================================================
   RESPONSIVE - Breakdance breakpoints
   ========================================================================== */
@media(max-width:1119px){
  body.breakdance .mf-bd-nv .breakdance-menu-list{gap:1.2rem}
  body.breakdance .mf-bd-nv .breakdance-menu-link{font-size:.66rem;letter-spacing:.12em}
  body.breakdance .mf-bd-ft-in{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
  body.breakdance .mf-bd-ft-legal{grid-column:1 / -1;text-align:left;border-top:1px solid var(--mf-hair);padding-top:1.4rem}
}
@media(max-width:1023px){
  body.breakdance .mf-bd-hd .section-container{padding:.7rem 1.5rem}
  body.breakdance img.mf-bd-logo-img{height:34px}
  body.breakdance .mf-bd-hd-in{gap:1rem}
}
@media(max-width:767px){
  body.breakdance .mf-bd-ft-in{grid-template-columns:1fr 1fr;gap:1.8rem}
  body.breakdance .mf-bd-ft-brand{grid-column:1 / -1}
  body.breakdance .mf-bd-btn-ghost{display:none}
  body.breakdance .mf-bd-ft .section-container{padding:3rem 1.5rem 2rem}
}
@media(max-width:479px){
  body.breakdance .mf-bd-ft-in{grid-template-columns:1fr}
  body.breakdance .mf-bd-ft-blurb{max-width:none}
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
body.breakdance .mf-bd-hd :focus-visible,
body.breakdance .mf-bd-ft :focus-visible{outline:2px solid var(--mf-cyan);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  body.breakdance .mf-bd-hd *,
  body.breakdance .mf-bd-ft *{transition-duration:.01ms!important}
}

/* ==========================================================================
   BUTTON OVERRIDE - the theme also puts .button-atom--primary on the same <a>,
   which brings its own background, radius and padding. Match both classes so
   this wins on specificity regardless of stylesheet order.
   ========================================================================== */
body.breakdance .mf-bd-btn a.bde-button__button.button-atom{
  background-image:none;
  border-radius:0;
  box-shadow:none;
  min-height:0;
}
body.breakdance .mf-bd-btn .button-atom__text{
  font-family:var(--mf-mono);
  font-size:.65rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;line-height:1;
  color:inherit;
}
body.breakdance .mf-bd-btn-solid a.bde-button__button.button-atom{background-color:var(--mf-cyan);color:#04121C}
body.breakdance .mf-bd-btn-solid a.bde-button__button.button-atom:hover{background-color:var(--mf-cyan-lit);box-shadow:0 0 30px rgba(0,212,255,.42)}
body.breakdance .mf-bd-btn-ghost a.bde-button__button.button-atom{
  background-color:rgba(255,255,255,.05);
  color:var(--mf-cyan-lit);
  box-shadow:inset 0 0 0 1px rgba(140,232,255,.38);
}
body.breakdance .mf-bd-btn-ghost a.bde-button__button.button-atom:hover{
  background-color:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px var(--mf-cyan-lit);
}
/* HEADER ACTIONS - Breakdance's own column CSS ties on specificity and loads
   later, so the buttons stacked. Raised to (0,3,0) + explicit row direction. */
body.breakdance .mf-bd-hd .mf-bd-hd-a{
  display:flex;flex-direction:row;align-items:center;
  gap:.7rem;flex-wrap:nowrap;width:auto;
}
body.breakdance .mf-bd-hd .mf-bd-hd-a .mf-bd-btn{margin:0;width:auto;flex:0 0 auto}
body.breakdance .mf-bd-hd .mf-bd-hd-a a.bde-button__button{width:auto;display:inline-flex}
body.breakdance .mf-bd-hd .mf-bd-hd-logo{flex-direction:row}
body.breakdance .mf-bd-hd .mf-bd-hd-nav{flex-direction:row}
/* ==========================================================
   BACKGROUND FIELD + ALTIMETER RAIL (site-wide)
   Injected at wp_footer, never built in Breakdance: both are position:fixed,
   and a fixed element inside an ancestor with a transform behaves like
   absolute. They also carry no editable content.
   ========================================================== */
.mf-field{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--mf-void)}
#mf-stars{position:absolute;inset:0;width:100%;height:100%}
.mf-grid{position:absolute;inset:-10%;
  background-image:linear-gradient(rgba(0,212,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.05) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(ellipse 95% 75% at 50% 42%,#000 22%,transparent 80%);
  mask-image:radial-gradient(ellipse 95% 75% at 50% 42%,#000 22%,transparent 80%)}
.mf-gl{position:absolute;border-radius:50%;filter:blur(120px)}
.mf-gl-a{width:60vw;height:60vw;top:-8vh;left:-18vw;background:rgba(0,212,255,.20)}
.mf-gl-b{width:52vw;height:52vw;top:38vh;right:-20vw;background:rgba(139,92,246,.19)}
.mf-gl-c{width:46vw;height:46vw;top:78vh;left:14vw;background:rgba(0,212,255,.14)}
html:not(.mf-still) .mf-gl-a{animation:mf-drift 26s ease-in-out infinite}
html:not(.mf-still) .mf-gl-b{animation:mf-drift 34s ease-in-out infinite reverse}
@keyframes mf-drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vw,-3vh) scale(1.12)}}

/* Every section must sit above the opaque field. The field is injected at
   wp_footer, so it is LAST in the DOM: without an explicit z-index a section
   is painted underneath it and disappears. */
body.breakdance{background:transparent}
body.breakdance .bde-section,
body.breakdance header,
body.breakdance footer{position:relative;z-index:2}
body.breakdance .mf-bd-hd{z-index:100}

.mf-rail{position:fixed;top:0;right:26px;height:100vh;width:52px;z-index:60;pointer-events:none;display:none}
.mf-rail-l{position:absolute;left:26px;top:14vh;bottom:14vh;width:1px;background:linear-gradient(180deg,transparent,var(--mf-hair) 12%,var(--mf-hair) 88%,transparent)}
.mf-rail-t{position:absolute;left:20px;width:13px;height:1px;background:rgba(0,212,255,.22)}
.mf-rail-t.mf-mj{left:14px;width:19px;background:rgba(0,212,255,.42)}
.mf-rail-i{position:absolute;left:14px;width:25px;height:1px;background:var(--mf-cyan);box-shadow:0 0 12px var(--mf-cyan);transition:top .12s linear}
.mf-rail-i::after{content:attr(data-alt);position:absolute;right:32px;top:-8px;font-family:var(--mf-mono);font-size:.6rem;letter-spacing:.1em;color:var(--mf-cyan);white-space:nowrap}
@media(min-width:1400px){.mf-rail{display:block}}

/* Scroll reveals. Hidden ONLY under html.mf-js, which is set by an inline
   script: if a cache plugin defers or strips the JS, the page still renders
   fully instead of appearing blank. */
html.mf-js .mf-rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--mf-ease),transform .8s var(--mf-ease)}
html.mf-js .mf-rv.mf-in{opacity:1;transform:none}
html.mf-still .mf-rv{opacity:1!important;transform:none!important}
/* ===== MOBILE CHROME - keep last in this file =====
   The desktop header is a three-column flex row; below tablet portrait the
   WP Menu switches to its own mobile toggle, so the nav column must not
   claim horizontal space. */
@media (max-width:1023px){
body.breakdance .mf-bd-hd .section-container{padding:.6rem 1.25rem}
body.breakdance .mf-bd-hd-in{gap:.75rem;flex-wrap:nowrap}
body.breakdance img.mf-bd-logo-img{height:30px}
body.breakdance .mf-bd-hd-nav{flex:0 0 auto;justify-content:flex-end;order:3}
body.breakdance .mf-bd-hd-a{order:2;gap:.5rem}
body.breakdance .mf-bd-hd .mf-bd-hd-a a.bde-button__button{padding:.62rem .85rem;font-size:.58rem;letter-spacing:.1em}
body.breakdance .mf-bd-btn-ghost{display:none}
/* Breakdance mobile menu panel inherits the glass treatment */
body.breakdance .mf-bd-nv .breakdance-mobile-menu,body.breakdance .mf-bd-nv .breakdance-menu--mobile{background:rgba(5,8,16,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
body.breakdance .mf-bd-nv .breakdance-menu-list{flex-direction:column;align-items:flex-start;gap:.2rem}
body.breakdance .mf-bd-nv .breakdance-menu-link{font-size:.8rem;letter-spacing:.14em;padding:.7rem 0}
/* footer */
body.breakdance .mf-bd-ft .section-container{padding:2.8rem 1.25rem 1.8rem}
body.breakdance .mf-bd-ft-in{grid-template-columns:1fr 1fr;gap:1.6rem}
body.breakdance .mf-bd-ft-brand{grid-column:1 / -1}
body.breakdance .mf-bd-ft-blurb{max-width:none}
body.breakdance .mf-bd-ft-legal{grid-column:1 / -1;text-align:left;border-top:1px solid var(--mf-hair);padding-top:1.2rem}
/* background field: huge blurred glows are the main GPU cost on phones */
.mf-gl{filter:blur(80px)}
.mf-gl-c{display:none}
}
@media (max-width:479px){
body.breakdance .mf-bd-ft-in{grid-template-columns:1fr}
body.breakdance img.mf-bd-logo-img{height:26px}
}

/* ===== FOOTER LINK COLUMNS =====
   The lists were BasicList elements with plain text - no links. They are now
   real anchors inside a rich-text block, so each column is a stack. */
body.breakdance .mf-bd-ft-links a{display:block;font-family:'Rajdhani',sans-serif;font-size:.91rem;line-height:1.5;color:var(--mf-muted);text-decoration:none;padding:.32rem 0;transition:color .25s var(--mf-ease)}
body.breakdance .mf-bd-ft-links a:hover{color:var(--mf-cyan)}

/* ==========================================================================
   v3 CHROME - header field, logo links, utility icon rail, footer socials,
   world status strip.

   HEADER BACKGROUND, ROOT CAUSE: mf-hud-woo.css carried
   `body.mf-woo .bde-section{background:transparent!important}`. The header IS
   a Section, so on WooCommerce pages that rule stripped its fill and only the
   backdrop-filter remained - that translucent read is the one we keep. The Woo
   rule is now narrowed with :not(.mf-bd-hd):not(.mf-bd-ft) and the gradient
   below is the single site-wide header surface.
   ========================================================================== */
body.breakdance .mf-bd-hd{
  background:linear-gradient(180deg,rgba(5,8,16,.74) 0%,rgba(5,8,16,.44) 58%,rgba(5,8,16,.22) 100%);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
}

/* --------------------------------------------------------------------------
   LOGO LINK - WrapperLink renders a bare <a> around the bare <img>, so the
   transform goes on the IMG. Never on an ancestor: the background field is
   position:fixed and a transformed ancestor would turn it into absolute.
   -------------------------------------------------------------------------- */
body.breakdance .mf-bd-logo-link{
  display:inline-flex;align-items:center;text-decoration:none;
  line-height:0;background:none;
}
body.breakdance .mf-bd-logo-link img{
  transform-origin:left center;
  transition:transform .35s var(--mf-ease),filter .35s var(--mf-ease);
}
body.breakdance .mf-bd-logo-link:hover img,
body.breakdance .mf-bd-logo-link:focus-visible img{
  transform:scale(1.06);
  filter:drop-shadow(0 0 16px rgba(0,212,255,.42));
}
body.breakdance .mf-bd-ft-logo-link img{transform-origin:left center}

/* --------------------------------------------------------------------------
   HEADER UTILITY RAIL - Discord + Support.
   Icon-only by design, but the anchor keeps its real text so the accessible
   name survives: font-size:0 clips it visually without removing it from the
   accessibility tree. Glyphs are CSS masks, never an icon library.
   -------------------------------------------------------------------------- */
body.breakdance .mf-bd-hd-a{
  --mf-i-dc:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7.9%2017.6c-1.6-.4-2.7-1-2.7-1%20-.9-2.9-.5-6%201.2-8.9%201-.6%202.1-1%203.2-1.2l.6%201.2c1.2-.2%202.4-.2%203.6%200l.6-1.2c1.1.2%202.2.6%203.2%201.2%201.7%202.9%202.1%206%201.2%208.9%200%200-1.1.6-2.7%201l-.9-1.5%22%2F%3E%3Cpath%20d%3D%22M7.9%2017.6c1.3.3%202.7.5%204.1.5s2.8-.2%204.1-.5%22%2F%3E%3Cellipse%20cx%3D%229.6%22%20cy%3D%2213%22%20rx%3D%221.3%22%20ry%3D%221.6%22%2F%3E%3Cellipse%20cx%3D%2214.4%22%20cy%3D%2213%22%20rx%3D%221.3%22%20ry%3D%221.6%22%2F%3E%3C%2Fsvg%3E");
  --mf-i-sup:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.9%2014.4v-2.2a8.1%208.1%200%200%201%2016.2%200v2.2%27%2F%3E%3Cpath%20d%3D%27M3.9%2015.2a2.1%202.1%200%200%201%202.1-2.1h1.1v6.2H6a2.1%202.1%200%200%201-2.1-2.1z%27%2F%3E%3Cpath%20d%3D%27M20.1%2015.2a2.1%202.1%200%200%200-2.1-2.1h-1.1v6.2H18a2.1%202.1%200%200%200%202.1-2.1z%27%2F%3E%3Cpath%20d%3D%27M18%2019.3v.4a2.4%202.4%200%200%201-2.4%202.4h-1.8%27%2F%3E%3Ccircle%20cx%3D%2712.4%27%20cy%3D%2722.1%27%20r%3D%271.2%27%2F%3E%3C%2Fsvg%3E');
  /* Account. Head + shoulders, nothing else. This icon has one job: be
     understood as "my account" without a label, on first sight, in any
     locale. Anything added for brand flavour turns into noise at the 18px it
     actually renders at. */
  --mf-i-acct:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228.2%22%20r%3D%223.7%22%2F%3E%3Cpath%20d%3D%22M4.8%2020a7.2%207.2%200%200%201%2014.4%200%22%2F%3E%3C%2Fsvg%3E");
}
body.breakdance .mf-bd-hd .mf-bd-ic{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:36px;height:36px;padding:0;margin:0;font-size:0;line-height:0;
  color:var(--mf-muted);text-decoration:none;
  background-color:rgba(255,255,255,.04);
  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);
  transition:background-color .28s var(--mf-ease),box-shadow .28s var(--mf-ease);
}
body.breakdance .mf-bd-hd .mf-bd-ic:hover{
  background-color:rgba(0,212,255,.14);
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.45);
}
body.breakdance .mf-bd-hd .mf-bd-ic::before{
  content:'';width:18px;height:18px;flex:0 0 auto;
  background-color:var(--mf-cyan-lit);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  transition:background-color .28s var(--mf-ease);
}
body.breakdance .mf-bd-hd .mf-bd-ic:hover::before{background-color:var(--mf-cyan)}
body.breakdance .mf-bd-hd .mf-bd-ic-discord::before{-webkit-mask-image:var(--mf-i-dc);mask-image:var(--mf-i-dc)}
body.breakdance .mf-bd-hd .mf-bd-ic-support::before{-webkit-mask-image:var(--mf-i-sup);mask-image:var(--mf-i-sup)}
body.breakdance .mf-bd-hd .mf-bd-ic-account::before{-webkit-mask-image:var(--mf-i-acct);mask-image:var(--mf-i-acct)}

/* --------------------------------------------------------------------------
   HEADER CART (2026-09-05).
   Native Breakdance MiniCart, dropdown mode. Structure belongs to the element,
   style belongs here: the element design tab is deliberately EMPTY, because
   Breakdance only writes per-element CSS when the BUILDER saves the page and
   this node was inserted through the API (pitfall 37). Anything set in that
   tab would silently never be emitted.
   The plugin ships its structural rules in breakdance-woocommerce.css, which
   is registered as a global default stylesheet, so the panel has a working
   layout with no builder save. What it also ships is a white 420px slab, an
   8px radius and a rounded pill counter. All three are overridden below.
   The toggle borrows the .mf-bd-ic geometry but NOT its class: the cart is a
   commerce action, so it must survive the burger breakpoint where the utility
   rail is hidden.
   -------------------------------------------------------------------------- */
body.breakdance .mf-bd-hd .mf-bd-cart{
  --mf-i-cart:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.6%203.4h2.1l2.4%2011.1a1.6%201.6%200%200%200%201.6%201.3h7.9a1.6%201.6%200%200%200%201.6-1.2l1.6-6.6H6.1%27%2F%3E%3Ccircle%20cx%3D%279.6%27%20cy%3D%2719.4%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2717.6%27%20cy%3D%2719.4%27%20r%3D%271.5%27%2F%3E%3C%2Fsvg%3E');
  /* Variables are reassigned on OUR element, never on the shared
     .breakdance-woocommerce wrapper: that wrapper is on every WooCommerce
     surface and a leak there repaints cart, checkout and account (pitfall 2b). */
  --bde-woo-base-headings-color:var(--mf-text);
  --bde-woo-base-text-color:var(--mf-muted);
  --bde-woo-widgets__remove-item-from-cart-color:var(--mf-muted);
  --grey-200:rgba(160,225,255,.15);
  position:relative;display:flex;align-items:center;flex:0 0 auto;
}
/* THE CHAMFER GOES ON A LAYER, NOT ON THE ANCHOR. clip-path clips DESCENDANTS,
   and the count chip is a child of this anchor sitting outside its box: putting
   the chamfer on the anchor itself cut the chip in half and made the figure
   unreadable. Pitfall 27 again, arriving through a badge rather than a
   dropdown. The frame is drawn by ::before, which is clipped alone. */
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-toggle{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:36px;height:36px;padding:0;margin:0;overflow:visible;
  color:var(--mf-muted);text-decoration:none!important;
  background-color:transparent;box-shadow:none;clip-path:none;
}
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-toggle::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-color:rgba(255,255,255,.04);
  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);
  transition:background-color .28s var(--mf-ease),box-shadow .28s var(--mf-ease);
}
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-toggle:hover::before{
  background-color:rgba(0,212,255,.14);
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.45);
}
/* The euro subtotal is removed from the chrome. The header is printed on every
   page of the site, gameplay-adjacent ones included, and the figure adds
   nothing next to a count. The span stays server-rendered so the WooCommerce
   fragment always has a target; only its display is dropped. */
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-toggle__subtotal{display:none}
/* Our own monoline glyph. The plugin default is icons/cart.svg from the
   Breakdance package: self-hosted, but not this design system. */
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-toggle__icon{
  position:relative;z-index:1;
  width:18px;height:18px;margin:0;flex:0 0 auto;
  background-color:var(--mf-cyan-lit);
  -webkit-mask-image:var(--mf-i-cart);mask-image:var(--mf-i-cart);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  transition:background-color .28s var(--mf-ease);
}
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-toggle:hover .bde-mini-cart-toggle__icon{
  background-color:var(--mf-cyan);
}
/* Count chip. Square, never a rounded pill, and NOT chamfered: an 18px box
   cannot carry a 4px cut without eating the digit. It is sized off the figure
   so 1 and 12 both read, and ringed in the header fill so it separates from
   the icon underneath. */
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-toggle__counter{
  position:absolute;top:-7px;right:-7px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;
  min-width:18px;height:18px;margin:0;padding:0 4px;
  border-radius:0;background-color:var(--mf-cyan);color:#04121C;
  font-family:var(--mf-mono);font-size:.66rem;font-weight:700;
  line-height:1;letter-spacing:0;text-align:center;
  box-shadow:0 0 0 2px rgba(5,8,16,.92);
}
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-toggle:hover .bde-mini-cart-toggle__counter{
  background-color:var(--mf-cyan-lit);color:#04121C;
}
/* Empty cart shows no chip at all. data-count is rewritten by the WooCommerce
   add_to_cart fragment on every add, so this stays true without a reload. */
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-toggle__counter[data-count='0']{display:none}

/* ----- the dropdown panel ----- */
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-offcanvas-body{
  width:min(340px,calc(100vw - 2rem));margin-top:.65rem;
  z-index:60;border-radius:0;
  /* NEAR-OPAQUE, NOT GLASS. The header itself carries backdrop-filter, which
     makes it a BACKDROP ROOT: a backdrop-filter on any descendant samples an
     empty backdrop and blurs nothing, so a .52 scrim here let the page read
     straight through the panel. Same treatment as the nav dropdown, which
     solved the same problem with rgba(3,6,12,.98). */
  background-color:rgba(3,6,12,.97);
  background-image:linear-gradient(180deg,var(--mf-veil-top),var(--mf-veil-bot));
  box-shadow:inset 0 0 0 1px var(--mf-hair);
  /* clip-path clips box-shadow (pitfall 10), so the lift is a drop-shadow */
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.55));
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  --bde-mini-cart-padding-top:1rem;--bde-mini-cart-padding-right:1rem;
  --bde-mini-cart-padding-bottom:1rem;--bde-mini-cart-padding-left:1rem;
  --cart-image-size:52px;
}
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-offcanvas-topbar{
  box-shadow:inset 0 -1px 0 0 var(--mf-hair);
}
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-offcanvas-title{
  font-family:var(--mf-mono);font-size:.6rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mf-cyan-lit);
}
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-offcanvas__close-button{
  color:var(--mf-muted);opacity:.7;font-size:1.1rem;
}
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-offcanvas__close-button:hover{
  color:var(--mf-cyan);opacity:1;
}
body.breakdance .mf-bd-hd .mf-bd-cart .woocommerce-mini-cart{max-height:290px}
body.breakdance .mf-bd-hd .mf-bd-cart .woocommerce-mini-cart-item + .woocommerce-mini-cart-item{
  border-top:1px solid var(--mf-hair);
}
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-item-thumbnail img{
  border-radius:0;border-width:0;
  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);
}
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-item-title{
  color:var(--mf-text);font-family:Rajdhani,sans-serif;font-weight:600;
  font-size:.85rem;line-height:1.25;
}
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-item-title:hover{color:var(--mf-cyan)}
body.breakdance .mf-bd-hd .mf-bd-cart .woocommerce-mini-cart-item .quantity{
  font-family:var(--mf-mono);font-size:.62rem;letter-spacing:.06em;
  color:var(--mf-muted);
}
body.breakdance .mf-bd-hd .mf-bd-cart .woocommerce-mini-cart__empty-message{
  border-top:0;padding:2rem 1rem;text-align:center;
  font-family:var(--mf-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mf-muted);
}
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-offcanvas-footer{
  box-shadow:inset 0 1px 0 0 var(--mf-hair);
}
body.breakdance .mf-bd-hd .mf-bd-cart .woocommerce-mini-cart__total{
  align-items:baseline;padding-bottom:.85rem;margin:0;
}
body.breakdance .mf-bd-hd .mf-bd-cart .woocommerce-mini-cart__total strong{
  font-family:var(--mf-mono);font-size:.58rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mf-muted);
}
body.breakdance .mf-bd-hd .mf-bd-cart .woocommerce-mini-cart__total .woocommerce-Price-amount,
body.breakdance .mf-bd-hd .mf-bd-cart .woocommerce-mini-cart__total .woocommerce-Price-amount bdi{
  font-family:Orbitron,sans-serif;font-weight:700;font-size:1rem;
  color:var(--mf-text);
}
/* Both actions stay. The element ships --primary-cart, which hides the
   checkout button outright; on a purchase funnel that is one click thrown
   away for no gain. */
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-offcanvas--primary-cart .wc-forward.checkout{
  display:inline-flex!important;
}
body.breakdance .mf-bd-hd .mf-bd-cart .woocommerce-mini-cart__buttons{gap:.5rem}
body.breakdance .mf-bd-hd .mf-bd-cart .woocommerce-mini-cart__buttons .button{
  flex:1 1 0;min-width:0;padding:.62rem .5rem;
  border:0;border-radius:0;box-shadow:none;
  font-family:var(--mf-mono);font-size:.56rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;
  background-color:rgba(255,255,255,.05);color:var(--mf-cyan-lit);
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.35);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:background-color .28s var(--mf-ease),color .28s var(--mf-ease);
}
body.breakdance .mf-bd-hd .mf-bd-cart .woocommerce-mini-cart__buttons .button:hover{
  background-color:rgba(0,212,255,.16);color:var(--mf-cyan);
}
body.breakdance .mf-bd-hd .mf-bd-cart .woocommerce-mini-cart__buttons .button.checkout{
  background-color:var(--mf-cyan);color:var(--mf-void);box-shadow:none;
}
body.breakdance .mf-bd-hd .mf-bd-cart .woocommerce-mini-cart__buttons .button.checkout:hover{
  background-color:var(--mf-cyan-lit);color:var(--mf-void);
}
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-continue-link{
  padding:0 1rem 1rem;color:var(--mf-muted);
  font-family:var(--mf-mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;
}
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-continue-link:hover{color:var(--mf-cyan)}
/* The quantity line. The element renders TWO variants and the generated CSS
   picks one: the stepper (.bde-mini-cart-quantity) and a plain
   1 x price (.bde-mini-cart-quantity-simple). hide_quantity_input is on, so
   the plain one shows. That is deliberate: the Breakdance stepper positions
   its buttons absolutely inside an 85px box (pitfall 14) and overlapped the
   price here, and quantities belong on the cart page anyway.
   Its shipped rules assume the stepper geometry - flex-end, full width and a
   -5px nudge - so they are undone. */
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-quantity-simple{
  display:flex;flex-direction:row;align-items:baseline;justify-content:flex-start;
  gap:.6rem;align-self:start;width:auto;max-width:none;transform:none;
}
/* mf-hud-woo.css skins .quantity as the CART PAGE stepper shell - 5 percent
   white fill, chamfer, its own height. The header is printed on WooCommerce
   pages too, so that shell leaked into the mini cart and drew a grey slab
   under every price. Reset it here rather than narrowing the woo rule, which
   the cart and product pages depend on. */
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-quantity-simple .quantity{
  display:flex;width:auto;max-width:none;min-width:0;justify-content:flex-start;
  transform:none;height:auto;min-height:0;padding:0;margin:0;border:0;
  background:transparent;box-shadow:none;clip-path:none;
  font-family:var(--mf-mono);font-size:.62rem;letter-spacing:.06em;color:var(--mf-muted);
}
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-quantity-simple .woocommerce-Price-amount,
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-quantity-simple .woocommerce-Price-amount bdi{
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:.8rem;color:var(--mf-text);
}/* The FlightCoin line injected per cart item (mf_hud_cart_item_fc). Amber is
   the currency colour and nothing else wears it. */
body.breakdance .mf-bd-hd .mf-bd-cart .mf-fc-mini{
  display:inline-block;margin:0;white-space:nowrap;
  font-family:var(--mf-mono);font-size:.6rem;font-weight:600;
  letter-spacing:.08em;color:var(--mf-amber);
}

/* --------------------------------------------------------------------------
   SINGLE PRIMARY ACTION - Sign in / Start flight.
   Driven by the server-rendered `logged-in` body class rather than Breakdance
   display conditions: no condition schema to get wrong, no JS, no flash.
   -------------------------------------------------------------------------- */
body:not(.logged-in).breakdance .mf-bd-cta-in{display:none!important}
body.logged-in.breakdance .mf-bd-cta-out{display:none!important}

/* Same server-rendered gate, named for elements that are not the primary
   CTA. The account icon uses .mf-bd-in: it has no meaning to a visitor who
   has no account yet, and showing it would compete with Sign in. */
body:not(.logged-in).breakdance .mf-bd-in{display:none!important}
body.logged-in.breakdance .mf-bd-out{display:none!important}

/* --------------------------------------------------------------------------
   FOOTER SOCIAL ROW - same glyph language as the About CTA, redeclared here
   because per-page stylesheets are self-contained and mf-hud-about.css does
   not load in the footer context.
   -------------------------------------------------------------------------- */
body.breakdance .mf-bd-ft-soc-row{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
  gap:.6rem;margin:1.4rem 0 0;
  --mf-i-dc:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7.9%2017.6c-1.6-.4-2.7-1-2.7-1%20-.9-2.9-.5-6%201.2-8.9%201-.6%202.1-1%203.2-1.2l.6%201.2c1.2-.2%202.4-.2%203.6%200l.6-1.2c1.1.2%202.2.6%203.2%201.2%201.7%202.9%202.1%206%201.2%208.9%200%200-1.1.6-2.7%201l-.9-1.5%22%2F%3E%3Cpath%20d%3D%22M7.9%2017.6c1.3.3%202.7.5%204.1.5s2.8-.2%204.1-.5%22%2F%3E%3Cellipse%20cx%3D%229.6%22%20cy%3D%2213%22%20rx%3D%221.3%22%20ry%3D%221.6%22%2F%3E%3Cellipse%20cx%3D%2214.4%22%20cy%3D%2213%22%20rx%3D%221.3%22%20ry%3D%221.6%22%2F%3E%3C%2Fsvg%3E");
  --mf-i-yt:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.2%22%20y%3D%225.4%22%20width%3D%2219.6%22%20height%3D%2213.2%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M10.3%209.6l5.2%202.4-5.2%202.4z%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  --mf-i-ig:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.2%22%20y%3D%223.2%22%20width%3D%2217.6%22%20height%3D%2217.6%22%20rx%3D%225%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224.1%22%2F%3E%3Ccircle%20cx%3D%2217.1%22%20cy%3D%226.9%22%20r%3D%221.15%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  --mf-i-tt:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.1%203.4v10.8a3.35%203.35%200%201%201-2.9-3.32%22%2F%3E%3Cpath%20d%3D%22M14.1%203.4c.45%202.6%202.05%204.25%204.6%204.55%22%2F%3E%3C%2Fsvg%3E");
  --mf-i-x:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.4%204.4l15.2%2015.2%22%2F%3E%3Cpath%20d%3D%22M19.6%204.4L4.4%2019.6%22%2F%3E%3C%2Fsvg%3E");
  --mf-i-li:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.2%22%20y%3D%223.2%22%20width%3D%2217.6%22%20height%3D%2217.6%22%20rx%3D%222.4%22%2F%3E%3Cpath%20d%3D%22M7.5%2010.5v6.1%22%2F%3E%3Cpath%20d%3D%22M7.5%207.5v.02%22%2F%3E%3Cpath%20d%3D%22M11.6%2016.6v-6.1%22%2F%3E%3Cpath%20d%3D%22M11.6%2013.1c0-1.45%201.05-2.5%202.45-2.5s2.45%201.05%202.45%202.5v3.5%22%2F%3E%3C%2Fsvg%3E");
}
body.breakdance .mf-bd-ft-soc-row .mf-bd-soc{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:40px;height:40px;font-size:0;line-height:0;text-decoration:none;
  background-color:rgba(255,255,255,.045);
  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);
  transition:background-color .3s var(--mf-ease),box-shadow .3s var(--mf-ease);
}
body.breakdance .mf-bd-ft-soc-row .mf-bd-soc:hover{
  background-color:rgba(0,212,255,.14);
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.45);
}
body.breakdance .mf-bd-ft-soc-row .mf-bd-soc::before{
  content:'';width:18px;height:18px;flex:0 0 auto;
  background-color:var(--mf-cyan-lit);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  transition:background-color .3s var(--mf-ease);
}
body.breakdance .mf-bd-ft-soc-row .mf-bd-soc:hover::before{background-color:var(--mf-cyan)}
body.breakdance .mf-bd-soc-dc::before{-webkit-mask-image:var(--mf-i-dc);mask-image:var(--mf-i-dc)}
body.breakdance .mf-bd-soc-yt::before{-webkit-mask-image:var(--mf-i-yt);mask-image:var(--mf-i-yt)}
body.breakdance .mf-bd-soc-ig::before{-webkit-mask-image:var(--mf-i-ig);mask-image:var(--mf-i-ig)}
body.breakdance .mf-bd-soc-tt::before{-webkit-mask-image:var(--mf-i-tt);mask-image:var(--mf-i-tt)}
body.breakdance .mf-bd-soc-x::before{-webkit-mask-image:var(--mf-i-x);mask-image:var(--mf-i-x)}
body.breakdance .mf-bd-soc-li::before{-webkit-mask-image:var(--mf-i-li);mask-image:var(--mf-i-li)}

/* --------------------------------------------------------------------------
   WORLD STATUS STRIP
   Roadmap state, not uptime monitoring - the wording says ACTIVE /
   IN DEVELOPMENT so nothing here promises live health data. When the backend
   endpoint exists, only the pill text and its modifier class need to move.
   -------------------------------------------------------------------------- */
body.breakdance .mf-bd-ft-status-wrap{width:100%}
body.breakdance .mf-bd-st{
  display:flex;flex-direction:column;align-items:stretch;width:100%;
  max-width:1240px;margin:0 auto;padding:1.5rem 0 0;
  box-shadow:inset 0 1px 0 var(--mf-hair);
}
body.breakdance .mf-bd-st-h{
  font-family:var(--mf-mono);font-size:.56rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--mf-muted);margin:0 0 .9rem;
}
body.breakdance .mf-bd-st-grid{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:.5rem;
}
body.breakdance .mf-bd-st-item{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:.8rem;flex:1 1 200px;min-width:0;padding:.55rem .8rem;
  background-color:rgba(255,255,255,.03);
  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-bd-st-label{
  font-family:'Rajdhani',sans-serif;font-size:.86rem;font-weight:600;
  color:var(--mf-text);white-space:nowrap;
}
body.breakdance .mf-bd-st-pill{
  display:inline-flex;align-items:center;gap:.42rem;
  font-family:var(--mf-mono);font-size:.55rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
}
body.breakdance .mf-bd-st-pill::before{
  content:'';width:6px;height:6px;flex:0 0 auto;background-color:currentColor;
}
body.breakdance .mf-bd-st-on{color:#5DCAA5}
body.breakdance .mf-bd-st-dev{color:var(--mf-amber)}

/* ===== MOBILE, KEEP LAST ===== */
@media (max-width:1023px){
body.breakdance .mf-bd-hd .mf-bd-ic{width:32px;height:32px}
body.breakdance .mf-bd-hd .mf-bd-ic::before{width:16px;height:16px}
body.breakdance .mf-bd-st-grid{flex-direction:column}
body.breakdance .mf-bd-st-item{flex:1 1 auto}
}
@media (max-width:479px){
body.breakdance .mf-bd-hd .mf-bd-ic-support{display:none}
body.breakdance .mf-bd-ft-soc-row{gap:.45rem}
body.breakdance .mf-bd-ft-soc-row .mf-bd-soc{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){
body.breakdance .mf-bd-logo-link:hover img{transform:none}
}
/* ==========================================================================
   v4 CHROME
   ========================================================================== */

/* STICKY HEADER, ROOT CAUSE: the stacking fix
   `body.breakdance .bde-section,header,footer{position:relative;z-index:2}`
   ties on specificity with .mf-bd-hd and loads after it, so the header was
   silently demoted from sticky to relative on every page. Restated here, at
   the end of the file, where nothing can override it. */
body.breakdance .mf-bd-hd{position:sticky;top:0;z-index:100}

/* --------------------------------------------------------------------------
   FOOTER, v4 LAYOUT
   World status now occupies the fifth column and the copyright is a full
   width bar under the grid, matching production. The hairline belongs to the
   copyright bar, so nothing draws a line across the social icons.
   -------------------------------------------------------------------------- */
body.breakdance .mf-bd-ft-in{grid-template-columns:2fr 1fr 1fr 1fr 1.15fr}
body.breakdance .mf-bd-ft-legal{text-align:left}

body.breakdance .mf-bd-st{
  display:flex;flex-direction:column;align-items:stretch;
  width:100%;max-width:none;margin:0;padding:0;box-shadow:none;
}
body.breakdance .mf-bd-st-h{
  font-family:var(--mf-mono);font-size:.63rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mf-cyan);margin:0 0 1rem;
}
body.breakdance .mf-bd-st-grid{display:flex;flex-direction:column;gap:.4rem}
body.breakdance .mf-bd-st-item{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:.7rem;flex:0 0 auto;width:100%;padding:.5rem .7rem;
  background-color:rgba(255,255,255,.03);
  box-shadow:inset 0 0 0 1px var(--mf-hair);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
body.breakdance .mf-bd-st-label{font-size:.8rem}
body.breakdance .mf-bd-st-pill{font-size:.5rem;letter-spacing:.12em}

/* copyright bar */
body.breakdance .mf-bd-ft .mf-bd-ft-copy{
  width:100%;margin:2.6rem 0 0;padding:1.3rem 0 0;text-align:center;
  box-shadow:inset 0 1px 0 var(--mf-hair);
}

/* ===== MOBILE, KEEP LAST ===== */
@media (max-width:1023px){
body.breakdance .mf-bd-ft-in{grid-template-columns:1.6fr 1fr 1fr 1fr}
body.breakdance .mf-bd-ft-legal{grid-column:1 / -1;border-top:none;padding-top:.6rem}
}
@media (max-width:767px){
body.breakdance .mf-bd-ft-in{grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   v5 CHROME - RESPONSIVE HEADER AND MOBILE MENU. KEEP THIS BLOCK LAST.

   TWO SEPARATE CAUSES, FIXED SEPARATELY.

   1. THE HEADER STACKED FROM 1119px DOWN. Breakdance emits
      `.breakdance .bde-columns-10887-101.bde-columns{flex-direction:column}`
      and `> .bde-column{width:100%}` inside @media (max-width:1119px), while
      its own burger only switches in at 767px. Between 768 and 1119 the three
      header columns became three stacked rows. Restated at (0,3,1) and (0,3,2)
      so the row layout survives to the burger breakpoint.

   2. THE OPEN MENU PANEL WAS WHITE. The v3 mobile block styled
      `.breakdance-mobile-menu` and `.breakdance-menu--mobile`. Neither class is
      emitted by Breakdance 2.8: the panel IS `.breakdance-menu-list`, filled
      with `background-color:var(--menu-background)`. Nothing ever matched, so
      the default light fill stood. The variables are reassigned on
      `.mf-bd-nv .breakdance-menu` - the narrowest element that needs them -
      rather than painted on the element, per the reassigned-variable rule.
   ========================================================================== */

/* ----- 1. keep the header on ONE row until the burger appears ----- */
@media (max-width:1119px){
body.breakdance .mf-bd-hd-in.bde-columns{flex-direction:row;flex-wrap:nowrap;align-items:center}
body.breakdance .mf-bd-hd-in.bde-columns > .bde-column{width:auto;flex:0 0 auto}
body.breakdance .mf-bd-hd-in.bde-columns > .mf-bd-hd-logo{flex:1 1 auto;min-width:0}
}

/* ----- 2. mobile menu panel: reassign Breakdance menu variables ----- */
@media (max-width:1023px){
body.breakdance .mf-bd-nv .breakdance-menu{
  --menu-background:rgba(5,8,16,.97);
  --link-border:1px solid rgba(160,225,255,.14);
  --link-color:var(--mf-text);
  --link-color-hover:var(--mf-cyan);
  --link-color-active:var(--mf-cyan);
  --link-background-color:rgba(5,8,16,.97);
  --link-background-color-active:rgba(0,212,255,.08);
  --mobile-link-padding-top:1.05rem;
  --mobile-link-padding-bottom:1.05rem;
  --mobile-link-padding-left:1.5rem;
  --mobile-link-padding-right:1.5rem;
  --mobile-link-level-2-padding-top:.85rem;
  --mobile-link-level-2-padding-bottom:.85rem;
  --mobile-link-level-2-padding-left:2.4rem;
  --mobile-link-level-2-padding-right:1.5rem;
  --mobile-link-level-3-padding-top:.8rem;
  --mobile-link-level-3-padding-bottom:.8rem;
  --mobile-link-level-3-padding-left:2.4rem;
  --mobile-link-level-3-padding-right:1.5rem;
}
/* the panel is anchored to the nav column, which sits 1.25rem from the viewport
   edge because of the header container padding. Pulling it back by exactly that
   amount makes it full bleed WITHOUT touching position or display, so
   Breakdance keeps owning the open and close semantics. */
body.breakdance .mf-bd-nv .breakdance-menu-list{
  left:auto;right:-1.25rem;
  width:100vw;max-width:100vw;
  max-height:calc(100dvh - 58px);overflow-y:auto;
  padding:.5rem 0 1.6rem;
  background-color:var(--menu-background);
  background-image:linear-gradient(180deg,rgba(0,212,255,.05) 0%,rgba(0,212,255,0) 180px);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(160,225,255,.18);
}
body.breakdance .mf-bd-nv .breakdance-menu-link,
body.breakdance .mf-bd-nv .breakdance-dropdown-link,
body.breakdance .mf-bd-nv .breakdance-dropdown-column__title{
  font-family:var(--mf-mono);font-weight:500;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mf-text);
  transition:color .25s var(--mf-ease),background-color .25s var(--mf-ease);
}
body.breakdance .mf-bd-nv .breakdance-menu-link:hover,
body.breakdance .mf-bd-nv .breakdance-dropdown-link:hover{
  color:var(--mf-cyan);background-color:rgba(0,212,255,.06);
}
body.breakdance .mf-bd-nv .breakdance-menu-item--active .breakdance-menu-link{
  color:var(--mf-cyan);background-color:rgba(0,212,255,.08);
  box-shadow:inset 3px 0 0 0 var(--mf-cyan);
}
body.breakdance .mf-bd-nv .breakdance-dropdown-body,
body.breakdance .mf-bd-nv .breakdance-dropdown-floater,
body.breakdance .mf-bd-nv .breakdance-dropdown-section{
  background-color:rgba(3,6,12,.98);
  border-radius:0;box-shadow:none;
}
body.breakdance .mf-bd-nv .breakdance-dropdown-section--additional{
  background-color:rgba(3,6,12,.98);
}
body.breakdance .mf-bd-nv .breakdance-menu-link-arrow{
  color:var(--mf-cyan-lit);background-color:transparent;
}

}
/* TABLET (2026-10-27): the burger now collapses at 1023px (WP Menu node 105,
   show_at tablet portrait), so the panel skin above runs to 1023px. What
   follows stays phone only: tablets keep the utility icons. */
@media (max-width:767px){
/* ----- 3. utility icons are desktop only; the burger owns the mobile rail ----- */
body.breakdance .mf-bd-hd .mf-bd-ic{display:none!important}

/* ----- 4. the one primary action stays, sized down ----- */
body.breakdance .mf-bd-hd .mf-bd-hd-a{gap:.4rem}
body.breakdance .mf-bd-hd .mf-bd-hd-a a.bde-button__button{
  padding:.55rem .8rem;font-size:.55rem;letter-spacing:.09em;white-space:nowrap;
}
}

@media (max-width:479px){
body.breakdance .mf-bd-hd .section-container{padding:.55rem 1rem}
body.breakdance .mf-bd-nv .breakdance-menu-list{right:-1rem}
body.breakdance .mf-bd-hd .mf-bd-hd-a a.bde-button__button{
  padding:.5rem .7rem;font-size:.52rem;letter-spacing:.07em;
}
body.breakdance .mf-bd-nv .breakdance-menu{
  --mobile-link-padding-left:1.25rem;--mobile-link-padding-right:1.25rem;
}
}

/* ==========================================================================
   ARMED CTA - Start flight, and only Start flight.
   ------------------------------------------------------------------------
   Sign in and Start flight sat on the same flat .mf-bd-btn-solid fill, so
   the one action that LAUNCHES something looked exactly like the one that
   opens a form. This treatment is reserved for the launch action.
   Amber is not available here - it is FlightCoin movement and margin, and
   nothing else - and violet marks In Development, so a violet launch button
   would read as unreleased. The differentiation therefore stays inside the
   cyan axis and earns its distinction from LIGHT rather than from hue: a
   lit upper left falling to a deepened lower right, and a sheen that crosses
   the face every few seconds like a sweep line passing over a scope.
   The deep end is void at 30 percent over the cyan, not a new colour, so
   the palette gains nothing to maintain.
   The layers live on body.breakdance rather than in the token file because
   they are a component treatment, not palette, and tokens owns :root alone.
   Both surfaces read them: the header here, and the Select plate in
   mf-hud-select.css, which loads after this file and needs its own rule to
   out-specify the button atom reset.
   ========================================================================== */
body.breakdance{
  --mf-armed-sheen:linear-gradient(112deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.62) 50%,rgba(255,255,255,0) 64%);
  /* v2, 2026-08-25. The first pass differentiated by LIGHT alone - a lit
     corner falling to a darkened one - and it read as too subtle next to a
     flat cyan Sign in. This travels through HUE: icy cyan-lit, into the
     signature cyan, then down into violet at the far corner - the SAME ramp\n     the page H1 wears, so the CTA rhymes with the headline above it.
     THE ANGLE IS LOAD BEARING. 152deg puts the deep end in the bottom-right
     corner and keeps the label sitting over the cyan half, where dark ink
     measures about 11:1. Rotate this toward vertical and the text ends up on
     launch blue at 3.4:1, which fails. Adjust the stops, not the angle. */
  --mf-armed-body:linear-gradient(152deg,var(--mf-grad-title));
}
@keyframes mf-armed-sweep{
  0%{background-position:170% 0,0 0}
  46%{background-position:-70% 0,0 0}
  100%{background-position:-70% 0,0 0}
}
body.breakdance .mf-bd-btn-solid.mf-bd-cta-in .bde-button__button{
  background-color:var(--mf-cyan);
  background-image:var(--mf-armed-sheen),var(--mf-armed-body);
  background-repeat:no-repeat;
  background-size:220% 100%,100% 100%;
  background-position:170% 0,0 0;
  color:#04121C;
  box-shadow:inset 0 0 0 1px rgba(140,232,255,.55),0 6px 20px rgba(0,212,255,.28);
  animation:mf-armed-sweep 5.4s var(--mf-ease) infinite;
}
body.breakdance .mf-bd-btn-solid.mf-bd-cta-in .bde-button__button:hover{
  background-color:var(--mf-cyan-lit);
  box-shadow:inset 0 0 0 1px var(--mf-cyan-lit),0 0 34px rgba(0,212,255,.50);
  animation-duration:2.1s;
}
@media(prefers-reduced-motion:reduce){
  body.breakdance .mf-bd-btn-solid.mf-bd-cta-in .bde-button__button{
    animation:none;background-position:-70% 0,0 0;
  }
}

/* SPECIFICITY. The header CTA was not picking the treatment up because this
   sheet already carries, from an earlier round,
     body.breakdance .mf-bd-btn-solid a.bde-button__button.button-atom
   at (0,3,2), written to out-specify Breakdance button atom. The armed rule
   above is (0,4,1) - it wins on background-color but only just, and any
   future atom-shaped rule added below it would silently take the button back.
   Restating the treatment in the SAME atom shape at (0,5,2) removes the
   ambiguity for good. If you add another .button-atom rule to this file, it
   must go ABOVE this block or it will fight it. */
body.breakdance .mf-bd-btn-solid.mf-bd-cta-in a.bde-button__button.button-atom{
  background-color:var(--mf-cyan);
  background-image:var(--mf-armed-sheen),var(--mf-armed-body);
  background-repeat:no-repeat;
  background-size:220% 100%,100% 100%;
  background-position:170% 0,0 0;
  color:#04121C;
  box-shadow:inset 0 0 0 1px rgba(140,232,255,.62),0 6px 22px rgba(139,92,246,.34);
  animation:mf-armed-sweep 5.4s var(--mf-ease) infinite;
}
body.breakdance .mf-bd-btn-solid.mf-bd-cta-in a.bde-button__button.button-atom:hover{
  background-color:var(--mf-cyan-lit);
  box-shadow:inset 0 0 0 1px var(--mf-cyan-lit),0 0 36px rgba(139,92,246,.52);
  animation-duration:2.1s;
}
@media(prefers-reduced-motion:reduce){
  body.breakdance .mf-bd-btn-solid.mf-bd-cta-in a.bde-button__button.button-atom{
    animation:none;background-position:-70% 0,0 0;
  }
}


/* ==========================================================================
   PROMO FILM PLATE (.mf-yt) - SHARED, used on About (100) and Home (14).

   RGPD: nothing from Google is requested until the visitor presses play.
   The poster is a local attachment, the iframe is created by
   mf-hud-chrome.js on click and points at youtube-nocookie.com. Without
   JS the plate degrades to a plain link to the video, which is why the
   play control is a real anchor carrying a real href.

   Lives in chrome.css and not in a page layer because two pages use it.
   ========================================================================== */
body.breakdance .mf-film-sec{padding:0}
body.breakdance .mf-film-sec > .section-container{
  max-width:1240px;width:100%;margin:0 auto;padding:5.5rem 2rem;
  display:flex;flex-direction:column;align-items:stretch;gap:2.2rem;
}
body.breakdance .mf-yt{
  position:relative;display:block;width:100%;max-width:1120px;margin:0 auto;
  aspect-ratio:16 / 9;overflow:hidden;
  background:var(--mf-void,#050810);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  box-shadow:inset 0 0 0 1px var(--mf-hair);
}
body.breakdance img.mf-yt-poster{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;z-index:0;
  transition:transform .7s var(--mf-ease),opacity .5s var(--mf-ease);
}
/* Grade over the poster so the mono label and the glyph stay readable on a
   frame we do not control. Cut once the film is running. */
body.breakdance .mf-yt::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(58% 58% at 50% 50%,rgba(5,8,16,.10),rgba(5,8,16,.46) 70%),
    linear-gradient(180deg,rgba(5,8,16,.20),rgba(5,8,16,.62));
  transition:opacity .35s var(--mf-ease);
}
/* Top-right bracket, the panel convention of the design system. */
body.breakdance .mf-yt::after{
  content:'';position:absolute;top:14px;right:14px;width:26px;height:26px;z-index:2;
  border-top:1px solid var(--mf-cyan-lit,#8CE8FF);
  border-right:1px solid var(--mf-cyan-lit,#8CE8FF);
  opacity:.5;pointer-events:none;transition:opacity .35s var(--mf-ease);
}
body.breakdance .mf-yt .mf-yt-play,
body.breakdance a.mf-yt-play{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:row;
  align-items:flex-end;justify-content:flex-start;
  padding:0 0 1.15rem 1.25rem;text-decoration:none;
  font-family:var(--mf-mono);font-size:.58rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--mf-text,#EDF6FF);
}
/* Chamfered plate, then a solid triangle. No circle: radius is zero here. */
body.breakdance .mf-yt-play::before{
  content:'';position:absolute;top:50%;left:50%;width:78px;height:78px;
  transform:translate(-50%,-50%);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  background:rgba(0,212,255,.10);
  box-shadow:inset 0 0 0 1px var(--mf-cyan);
  transition:background .35s var(--mf-ease),transform .35s var(--mf-ease);
}
body.breakdance .mf-yt-play::after{
  content:'';position:absolute;top:50%;left:50%;width:0;height:0;
  transform:translate(-36%,-50%);
  border-left:20px solid var(--mf-cyan);
  border-top:13px solid transparent;
  border-bottom:13px solid transparent;
  transition:border-left-color .35s var(--mf-ease);
}
body.breakdance .mf-yt:hover img.mf-yt-poster{transform:scale(1.035)}
body.breakdance .mf-yt:hover .mf-yt-play::before{
  background:rgba(0,212,255,.20);transform:translate(-50%,-50%) scale(1.06);
}
body.breakdance .mf-yt:hover .mf-yt-play::after{border-left-color:var(--mf-cyan-lit,#8CE8FF)}
body.breakdance .mf-yt:hover::after{opacity:1}
body.breakdance .mf-yt-play:focus-visible{outline:2px solid var(--mf-cyan);outline-offset:-4px}

/* Running state: the injected iframe covers everything and the poster
   furniture is removed from the paint and from the pointer path. */
body.breakdance .mf-yt iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4;display:block;
}
body.breakdance .mf-yt.mf-yt-on::before,
body.breakdance .mf-yt.mf-yt-on::after{opacity:0}
body.breakdance .mf-yt.mf-yt-on img.mf-yt-poster{opacity:0}
body.breakdance .mf-yt.mf-yt-on .mf-yt-play{display:none}

body.breakdance .mf-yt-note{
  font-family:var(--mf-mono);font-size:.52rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mf-muted);opacity:.72;
  text-align:center;margin:0;max-width:1120px;
  margin-left:auto;margin-right:auto;
}
@media(max-width:1023px){
  body.breakdance .mf-film-sec > .section-container{padding:3.6rem 1.4rem;gap:1.6rem}
  body.breakdance .mf-yt-play::before{width:60px;height:60px}
  body.breakdance .mf-yt-play::after{border-left-width:16px;border-top-width:10px;border-bottom-width:10px}
  body.breakdance .mf-yt .mf-yt-play,
  body.breakdance a.mf-yt-play{padding:0 0 .85rem .9rem;font-size:.52rem;letter-spacing:.2em}
}
@media(prefers-reduced-motion:reduce){
  body.breakdance img.mf-yt-poster,
  body.breakdance .mf-yt-play::before,
  body.breakdance .mf-yt-play::after{transition:none}
  body.breakdance .mf-yt:hover img.mf-yt-poster{transform:none}
  body.breakdance .mf-yt:hover .mf-yt-play::before{transform:translate(-50%,-50%)}
}
/* Head of the promo plate. Declared here rather than borrowed from a page
   layer: the component ships on two pages and a page stylesheet is only
   enqueued on its own page. */
body.breakdance .mf-yt-head{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  max-width:760px;width:100%;margin:0 auto;
}
body.breakdance .mf-yt-eb{
  font-family:var(--mf-mono);font-size:.6rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--mf-cyan);margin:0 0 1rem;position:relative;
}
body.breakdance .mf-yt-h2{
  font-family:'Orbitron',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(1.35rem,3vw,2.15rem);line-height:1.22;letter-spacing:.02em;
  color:var(--mf-text);margin:0 0 .9rem;
}
body.breakdance .mf-yt-sub{
  font-family:'Rajdhani',sans-serif;font-size:1.05rem;line-height:1.7;
  color:var(--mf-muted);margin:0;max-width:56ch;
}
/* ===== HEADER CART, MOBILE. KEEP LAST (pitfall 13) =====
   The utility rail is hidden under the burger breakpoint, the cart is not: it
   is the only commerce action in the chrome. It only shrinks.
   Under 767px the element switches by itself to a full-height right sheet with
   an overlay and a JS body scroll lock (post-10887.css, generated). That is
   the right behaviour on a phone and it is structure, so it is skinned rather
   than fought: only the width, the top gap and the overlay fill are ours. */
@media (max-width:1023px){
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-toggle{width:32px;height:32px}
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-toggle__icon{width:16px;height:16px}
}
@media (max-width:767px){
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-offcanvas-body{
  width:min(360px,100vw);margin-top:0;
}
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-offcanvas-overlay{
  background-color:rgba(3,6,12,.74);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
body.breakdance .mf-bd-hd .mf-bd-cart .woocommerce-mini-cart{max-height:none}
}
@media (max-width:479px){
body.breakdance .mf-bd-hd .mf-bd-cart .bde-mini-cart-offcanvas-body{width:100vw}
}
/* --------------------------------------------------------------------------
   HEADER ACCOUNT PANEL (2026-09-25). Breakdance Div .mf-bd-acct wraps the
   account icon (node 112) and a Shortcode element .mf-bd-acct-sc that prints
   [mf_account_panel]. Opens on hover AND on keyboard focus (:focus-within).
   Touch screens have no hover: the panel stays hidden there and the icon keeps
   going to /my-account/, where Log out is highlighted.
   Inside the header, so NEAR-OPAQUE, never glass (pitfall 58).
   The wrapper carries no clip-path: the panel hangs outside its box and a clip
   would cut it (pitfall 59). The chamfer lives on the panel itself.
   -------------------------------------------------------------------------- */
body.breakdance .mf-bd-hd .mf-bd-acct{
  position:relative;
  display:flex;flex-direction:row;align-items:center;
  flex:0 0 auto;width:auto;max-width:none;
}
body.breakdance .mf-bd-hd .mf-bd-acct .mf-bd-acct-sc{
  position:absolute;top:100%;right:0;z-index:60;
  width:auto;max-width:none;
  padding-top:.65rem; /* hover bridge: the pointer crosses this gap without closing the panel */
  visibility:hidden;opacity:0;transform:translateY(-4px);
  transition:opacity .18s var(--mf-ease),transform .18s var(--mf-ease),visibility 0s linear .18s;
}
body.breakdance .mf-bd-hd .mf-bd-acct:hover .mf-bd-acct-sc,
body.breakdance .mf-bd-hd .mf-bd-acct:focus-within .mf-bd-acct-sc{
  visibility:visible;opacity:1;transform:none;
  transition:opacity .18s var(--mf-ease),transform .18s var(--mf-ease),visibility 0s linear 0s;
}
/* the icon stays lit while its panel is open */
body.breakdance .mf-bd-hd .mf-bd-acct:hover .mf-bd-ic,
body.breakdance .mf-bd-hd .mf-bd-acct:focus-within .mf-bd-ic{
  background-color:rgba(0,212,255,.14);
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.45);
}
body.breakdance .mf-bd-hd .mf-bd-acct:hover .mf-bd-ic::before,
body.breakdance .mf-bd-hd .mf-bd-acct:focus-within .mf-bd-ic::before{background-color:var(--mf-cyan)}

body.breakdance .mf-bd-hd .mf-bd-acct-panel{
  box-sizing:border-box;width:268px;padding:1rem 1rem .9rem;
  text-align:left;
  background-color:rgba(3,6,12,.97);
  background-image:linear-gradient(180deg,var(--mf-veil-top),var(--mf-veil-bot));
  box-shadow:inset 0 0 0 1px var(--mf-hair);
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.55)); /* clip-path clips box-shadow (pitfall 10) */
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
}
body.breakdance .mf-bd-hd .mf-bd-acct-panel p{margin:0}
body.breakdance .mf-bd-hd .mf-bd-acct-id{
  padding:0 0 .85rem;margin:0 0 .5rem;
  box-shadow:inset 0 -1px 0 0 var(--mf-hair);
}
body.breakdance .mf-bd-hd .mf-bd-acct-k{
  font-family:var(--mf-mono);font-size:.58rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mf-cyan);
  margin-bottom:.45rem!important;
}
body.breakdance .mf-bd-hd .mf-bd-acct-name{
  font-family:'Orbitron',sans-serif;font-size:.86rem;font-weight:700;
  letter-spacing:.03em;line-height:1.3;color:var(--mf-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body.breakdance .mf-bd-hd .mf-bd-acct-mail{
  display:flex;flex-direction:row;align-items:baseline;gap:.4rem;
  margin-top:.3rem!important;
  font-family:'Rajdhani',sans-serif;font-size:.8rem;line-height:1.3;color:var(--mf-muted);
}
body.breakdance .mf-bd-hd .mf-bd-acct-mail-v{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.breakdance .mf-bd-hd .mf-bd-acct-mail-s{
  flex:0 0 auto;font-family:var(--mf-mono);font-size:.52rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mf-cyan-lit);opacity:.75;
}
body.breakdance .mf-bd-hd .mf-bd-acct-links{
  list-style:none;margin:0 0 .6rem;padding:0 0 .6rem;
  display:flex;flex-direction:column;align-items:stretch;gap:.1rem;
  box-shadow:inset 0 -1px 0 0 var(--mf-hair);
}
body.breakdance .mf-bd-hd .mf-bd-acct-links li{margin:0;padding:0}
body.breakdance .mf-bd-hd .mf-bd-acct-links a{
  display:block;padding:.55rem .7rem;
  font-family:var(--mf-mono);font-size:.64rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--mf-muted);text-decoration:none;
  box-shadow:inset 2px 0 0 0 transparent;
  transition:color .2s var(--mf-ease),background-color .2s var(--mf-ease),box-shadow .2s var(--mf-ease);
}
body.breakdance .mf-bd-hd .mf-bd-acct-links a:hover,
body.breakdance .mf-bd-hd .mf-bd-acct-links a:focus-visible{
  color:var(--mf-cyan-lit);background-color:rgba(0,212,255,.06);
  box-shadow:inset 2px 0 0 0 rgba(0,212,255,.5);outline:none;
}
/* Log out: red outline, never a red fill (a fill reads as an alarm in HUD UI) */
body.breakdance .mf-bd-hd .mf-bd-acct-out{
  display:flex;flex-direction:row;align-items:center;gap:.55rem;
  padding:.6rem .7rem;
  font-family:var(--mf-mono);font-size:.64rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--mf-danger);text-decoration:none;
  background-color:transparent;
  box-shadow:inset 0 0 0 1px var(--mf-danger-line);
  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:background-color .2s var(--mf-ease),box-shadow .2s var(--mf-ease);
}
body.breakdance .mf-bd-hd .mf-bd-acct-out::before{
  content:'';width:14px;height:14px;flex:0 0 auto;
  background-color:currentColor;
  -webkit-mask-image:var(--mf-i-power);mask-image:var(--mf-i-power);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
body.breakdance .mf-bd-hd .mf-bd-acct-out:hover,
body.breakdance .mf-bd-hd .mf-bd-acct-out:focus-visible{
  background-color:var(--mf-danger-wash);
  box-shadow:inset 0 0 0 1px var(--mf-danger);outline:none;
}
/* no hover on touch screens: the icon simply opens /my-account/ */
@media (hover:none){
body.breakdance .mf-bd-hd .mf-bd-acct .mf-bd-acct-sc{display:none}
}
/* same breakpoint as the utility rail: the burger owns the mobile header */
@media (max-width:767px){
body.breakdance .mf-bd-hd .mf-bd-acct{display:none!important}
}
@media (prefers-reduced-motion:reduce){
body.breakdance .mf-bd-hd .mf-bd-acct .mf-bd-acct-sc{transform:none;transition:none}
}

/* ==========================================================================
   EARLY ACCESS NOTICE (2026-10-07) - prefix mf-ea-
   Rendered by [mf_early_access] and two WooCommerce hooks (mf-hud-system.php).
   Lives in chrome.css because it appears on seven surfaces across five
   stylesheets. Read as status telemetry, not as a warning: cyan hairline and a
   square status dot. No amber (FlightCoin only), no violet (In development
   markers on roles), no danger red (reserved for leaving actions).
   ========================================================================== */
body.breakdance .mf-ea-notam{
  position:relative;display:block;box-sizing:border-box;
  width:100%;max-width:820px;margin:2.2rem auto 0;
  padding:1.2rem 1.5rem 1.25rem 1.7rem;text-align:left;
  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 3px 0 0 rgba(0,212,255,.55),inset 0 1px 0 rgba(255,255,255,.07);
  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-ea-head{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--mf-mono);font-size:.6rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;line-height:1.4;
}
body.breakdance .mf-ea-tag{color:var(--mf-cyan)}
body.breakdance .mf-ea-live{
  display:inline-flex;flex-direction:row;align-items:center;gap:.5rem;
  color:var(--mf-muted);white-space:nowrap;
}
body.breakdance .mf-ea-live::before,
body.breakdance .mf-ea-chip::before{
  content:'';display:block;width:6px;height:6px;flex:none;background:var(--mf-cyan);
}
body.breakdance .mf-ea-live::before{animation:mf-ea-blink 2.4s steps(1,end) infinite}
@keyframes mf-ea-blink{0%,70%{opacity:1}71%,100%{opacity:.25}}
body.breakdance .mf-ea-title{
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:1rem;
  letter-spacing:.05em;text-transform:uppercase;line-height:1.35;
  color:var(--mf-text);margin:.75rem 0 .5rem;
}
body.breakdance .mf-ea-body,
body.breakdance .mf-ea-foot{
  font-family:'Rajdhani',sans-serif;font-size:.98rem;line-height:1.6;
  color:var(--mf-muted);margin:0;
}
body.breakdance .mf-ea-foot{
  margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--mf-hair);font-size:.92rem;
}
body.breakdance .mf-ea-a{
  color:var(--mf-cyan-lit);text-decoration:none;
  border-bottom:1px solid rgba(140,232,255,.35);
  transition:color .2s var(--mf-ease),border-color .2s var(--mf-ease);
}
body.breakdance .mf-ea-a:hover,
body.breakdance .mf-ea-a:focus-visible{color:var(--mf-cyan);border-bottom-color:var(--mf-cyan)}

/* inline variant: product panel, store band, cart, download, launch hub */
body.breakdance .mf-ea-line{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;
  gap:.35rem .65rem;margin:.9rem 0 0;max-width:640px;text-align:left;
  font-family:'Rajdhani',sans-serif;font-size:.88rem;font-weight:400;line-height:1.5;
  color:var(--mf-muted);
}
body.breakdance .mf-ea-line.mf-ea-c{justify-content:center;text-align:center;margin-left:auto;margin-right:auto}
body.breakdance .mf-ea-chip{
  display:inline-flex;flex-direction:row;align-items:center;gap:.42rem;flex:none;
  padding:.2rem .5rem;white-space:nowrap;
  font-family:var(--mf-mono);font-size:.56rem;font-weight:500;line-height:1.3;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mf-cyan);
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.35);
}
body.breakdance .mf-ea-txt{flex:1 1 220px;min-width:0}
body.breakdance .mf-ea-c .mf-ea-txt{flex:0 1 auto}
body.breakdance .wc-proceed-to-checkout .mf-ea-line{margin:0 0 1rem;max-width:none}
/* the Breakdance Shortcode wrapper sits in flex columns that default to
   align-items:flex-start (pitfall 3b): make it span its column. */
body.breakdance .mf-ea-host{display:block;width:100%;max-width:100%;align-self:stretch}

@media (max-width:767px){
  body.breakdance .mf-ea-notam{padding:1.05rem 1.1rem 1.1rem 1.3rem;margin-top:1.8rem}
  body.breakdance .mf-ea-head{flex-wrap:wrap;gap:.4rem 1rem;letter-spacing:.18em}
  body.breakdance .mf-ea-title{font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){
  body.breakdance .mf-ea-live::before{animation:none}
}
/* WooCommerce Coming Soon renders a block template inside .wp-site-blocks,
   static and z-index auto, so the fixed opaque .mf-field (z-index 0) painted
   over it and the page read as empty (pitfall 15). Same lift as the sections. */
body.breakdance > .wp-site-blocks {
	position: relative;
	z-index: 2;
}
/* ==========================================================================
   BETA STORE LOCK (2026-10-13)
   The server already refuses every purchase (mf-hud-system.php, BETA STORE
   LOCK). This only removes the buy controls so nobody clicks into a refusal.
   Prices and recurring terms stay visible. Kill switch: mf_store_closed.
   ========================================================================== */
body.mf-store-closed a[href*='add-to-cart='],
body.mf-store-closed a[href*='mf_subscribe='],
body.mf-store-closed .mf-fc-grid a.button,
body.mf-store-closed form.cart,
body.mf-store-closed .mf-sab-cart,
body.mf-store-closed #wc-stripe-express-checkout-element,
body.mf-store-closed #wc-stripe-express-checkout-button-separator {
	display: none !important;
}
/* MOBILE HORIZONTAL SCROLL (2026-10-26). .mf-bd-hd carries backdrop-filter,
   which makes it the CONTAINING BLOCK of every position:fixed descendant. The
   mini-cart sheet is fixed and parked off-screen with translateX(100%), so it
   overflowed the header and Chrome widened the phone layout viewport to 750px.
   overflow-x:clip contains it without breaking position:sticky (pitfall 11).
   Same cause made the open sheet 4px tall on phones: its inset resolved
   against the header box. Height is given explicitly below 768px. */
body.breakdance .mf-bd-hd{overflow-x:clip}
@media (max-width:767px){
  body.breakdance .mf-bd-cart .bde-mini-cart-offcanvas-body{bottom:auto;height:calc(100dvh - 46px)}
}
/* DOWNLOAD MFLINK IN THE HEADER (2026-10-26). Downloading the tracker is an
   action, not a section: it leaves the nav and becomes the secondary button
   next to Start flight (node 116 of header 10887, ghost style). A hover line
   says what it is. Below 768px the button hides and the burger carries the
   Download item instead (menu item class mf-nv-mob, first in MF Primary). */
body.breakdance .mf-bd-dl{position:relative}
body.breakdance .mf-bd-dl .bde-button__button{gap:.55rem}
body.breakdance .mf-bd-dl .bde-button__button::before{
  content:'';width:13px;height:13px;flex:0 0 13px;background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="square"><path d="M8 2v8M4.5 6.5 8 10l3.5-3.5M2.5 13.5h11"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="square"><path d="M8 2v8M4.5 6.5 8 10l3.5-3.5M2.5 13.5h11"/></svg>') center/contain no-repeat;
}
body.breakdance .mf-bd-dl::after{
  content:'Flight tracker \00B7  Windows \00B7  Required for the Pilot role';
  position:absolute;top:calc(100% + 10px);right:0;white-space:nowrap;pointer-events:none;
  padding:.5rem .75rem;font-family:var(--mf-mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mf-cyan-lit);background:rgba(3,6,12,.97);box-shadow:inset 0 0 0 1px rgba(140,232,255,.28);
  opacity:0;transform:translateY(-4px);transition:opacity .2s var(--mf-ease),transform .2s var(--mf-ease);z-index:5;
}
body.breakdance .mf-bd-dl:hover::after,body.breakdance .mf-bd-dl:focus-within::after{opacity:1;transform:none}
@media (min-width:768px){body.breakdance .mf-nv-mob{display:none !important}}
@media (max-width:767px){body.breakdance .mf-bd-dl{display:none}}
@media (prefers-reduced-motion:reduce){body.breakdance .mf-bd-dl::after{transition:none}}
/* TABLET HEADER (2026-10-27). The chrome was written for a burger that covers
   everything under 1024px, while the WP Menu collapsed only under 768px: from
   768 to 1023 the five links stacked vertically in the header and the ghost
   rule hid Download. The menu now collapses at 1023px; Download stays in the
   header down to 768px, the burger carries it below. */
@media (min-width:768px) and (max-width:1023px){body.breakdance .mf-bd-hd .mf-bd-dl{display:inline-flex}}
/* tablet panel: a 380px sheet under the burger, not a full bleed band (100vw
   counts the desktop scrollbar and pushed the links off the left edge); the
   1023 link rule above zeroes the side padding, so it is given back here. */
@media (min-width:768px) and (max-width:1023px){
body.breakdance .mf-bd-nv .breakdance-menu-list{width:min(380px,100vw);max-width:none;align-items:stretch;gap:0}
}
/* same on phones: the links sat flush against the screen edge */
@media (max-width:1023px){
body.breakdance .mf-bd-nv .breakdance-menu-list{align-items:stretch}
body.breakdance .mf-bd-nv .breakdance-menu-item{width:100%}
body.breakdance .mf-bd-nv .breakdance-menu-link{display:flex;width:100%;box-sizing:border-box;padding:1rem 1.5rem}
}
/* narrow desktop: five links, the utility rail, Download and Start flight do
   not fit in one row below 1280px (the logo column was crushed to 4px at
   1024). Download goes icon only there; its hover line still names it. */
@media (min-width:1024px) and (max-width:1279px){
body.breakdance .mf-bd-hd .mf-bd-dl a.bde-button__button{gap:0;padding:.62rem .75rem}
body.breakdance .mf-bd-hd .mf-bd-dl .button-atom__text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}