/* ==========================================================================
   METAFLIGHT HUD - PRICING (post 2131)
   Load order: mf-hud-tokens.css, mf-hud-chrome.css, then this file.

   Structure lives in Breakdance so copy stays editable in the builder.
   This file carries layout + style only. Nothing here declares :root.

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

   SPECIFICITY: every rule is prefixed body.breakdance so it wins against
   Breakdance's own per-element CSS (post-2131-defaults.css etc), which ties on
   weight and may load after this file.

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

   BILLING CYCLE STATE: the hero section carries one of mf-p-c-m / mf-p-c-6 /
   mf-p-c-a. Everything that changes with the cycle exists three times in the
   DOM under .mf-p-v-m / .mf-p-v-6 / .mf-p-v-a and is shown by that one class.
   The JS only swaps the state class, so with JS blocked the annual cycle (the
   markup default) still renders complete and priced.

   CURRENCY: this is a PURCHASE screen, so the euro must stay perfectly legible
   for pre-contractual information. No FlightCoin amount appears anywhere on
   this page, so the FC / euro decoupling rule is not in play. The earnings
   comparison is indexed to 100, the same convention as World & Economy.
   ========================================================================== */

/* ==========================================================================
   SHELL
   ========================================================================== */
body.breakdance .mf-p-hero,
body.breakdance .mf-p-sec{
  position:relative;z-index:2;
  padding:0;
  background:transparent;
}
body.breakdance .mf-p-hero > .section-container,
body.breakdance .mf-p-sec > .section-container{
  align-items:stretch;
  max-width:1240px;margin:0 auto;width:100%;
  padding:5.5rem 2rem;
}
body.breakdance .mf-p-hero > .section-container{padding:9.5rem 2rem 4.5rem}
body.breakdance .mf-p-wrap{width:100%;display:block}

/* post-2131-defaults.css ships
     .breakdance .bde-div{display:flex;flex-direction:column;align-items:flex-start}
   so (a) children shrink to their own content width and centring has nothing to
   centre, and (b) align-items:flex-start survives a switch to grid, which makes
   cards in the same row end at different heights. Anything that lays out
   children must appear in one of these two lists. */
body.breakdance .mf-p-head,
body.breakdance .mf-p-plan,
body.breakdance .mf-p-var,
body.breakdance .mf-p-mpanel,
body.breakdance .mf-p-mrow,
body.breakdance .mf-p-tbl,
body.breakdance .mf-p-titem,
body.breakdance .mf-p-faq-panel,
body.breakdance .mf-p-cycle,
body.breakdance .mf-p-ctabox,
body.breakdance .mf-p-foot{align-items:stretch}
body.breakdance .mf-p-plans,
body.breakdance .mf-p-list,
body.breakdance .mf-p-mrows,
body.breakdance .mf-p-trows,
body.breakdance .mf-p-trust-row{align-items:stretch}

/* ==========================================================================
   TYPE PRIMITIVES
   ========================================================================== */
body.breakdance .mf-p-eb{
  display:flex;flex-direction:row;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-p-eb::before{
  content:'';height:1px;width:clamp(24px,5vw,58px);flex:none;
  background:linear-gradient(90deg,transparent,var(--mf-cyan-lit));
}
body.breakdance .mf-p-eb-c{justify-content:center}
body.breakdance .mf-p-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-p-h1{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(2.1rem,5vw,3.7rem);
  line-height:1.06;letter-spacing:.02em;
  text-transform:uppercase;color:var(--mf-text);
  margin:0;
}
body.breakdance h1.mf-p-h1 .mf-p-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-p-h1 .mf-p-grad{-webkit-text-fill-color:transparent;color:transparent}
}
body.breakdance .mf-p-h2{
  font-family:'Orbitron',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(1.5rem,3.2vw,2.4rem);
  letter-spacing:.03em;line-height:1.16;color:var(--mf-text);
  margin:0 0 .9rem;
}
body.breakdance .mf-p-sub{
  font-family:'Rajdhani',sans-serif;
  font-size:1.05rem;line-height:1.7;color:var(--mf-muted);
  max-width:660px;margin:0 auto;
}
body.breakdance .mf-p-lead{
  font-family:'Rajdhani',sans-serif;font-weight:600;
  font-size:clamp(1.02rem,1.8vw,1.2rem);line-height:1.65;color:#A8BDD4;
  max-width:640px;margin:1.4rem auto 0;
}
body.breakdance .mf-p-head{text-align:center;max-width:780px;margin:0 auto 3.2rem}
body.breakdance .mf-p-head .mf-p-eb,
body.breakdance .mf-p-head .mf-p-h2,
body.breakdance .mf-p-head .mf-p-sub{width:100%}

/* ==========================================================================
   GLASS PANEL
   Chamfer is clip-path, never border-radius. 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-p-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%;
}
body.breakdance .mf-p-panel::before,
body.breakdance .mf-p-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-p-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-p-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-p-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(64% 50% at 50% 12%,rgba(0,212,255,.10),transparent 70%);
}
body.breakdance .mf-p-hero-txt{text-align:center;max-width:780px;margin:0 auto 2.4rem;display:block}
body.breakdance .mf-p-hero-txt .mf-p-eb,
body.breakdance .mf-p-hero-txt .mf-p-h1,
body.breakdance .mf-p-hero-txt .mf-p-lead{width:100%}

/* --- trial marker --------------------------------------------------------- */
body.breakdance .mf-p-trial{
  display:inline-flex;flex-direction:row;align-items:center;gap:.55rem;
  font-family:var(--mf-mono);font-size:.62rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--mf-cyan);background:rgba(0,212,255,.09);
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.32);
  padding:.5rem .95rem;margin:2rem auto 0;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
body.breakdance .mf-p-trial::before{content:'';width:6px;height:6px;flex:none;background:currentColor}
body.breakdance .mf-p-hero-txt .mf-p-trial{display:inline-flex}

/* ==========================================================================
   BILLING CYCLE SELECTOR
   Three Text nodes behaving as a segmented control. The JS gives them
   role="radio" + tabindex; the styling here must therefore cover :focus-visible.
   ========================================================================== */
body.breakdance .mf-p-cycle{
  /* align-items:stretch IS LOAD BEARING. post-2131-defaults.css ships
     .bde-div{display:flex;flex-direction:column;align-items:flex-start} and
     flex-start survives the switch to row. Each segment then took its own
     content height, and MONTHLY is the only one WITHOUT a .mf-p-off saving
     chip, so it rendered shorter than the other two: its active cyan fill
     stopped short of the container floor while 6 MONTHS and ANNUAL reached
     it. Every horizontal container in this file must state align-items. */
  display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;
  align-items:stretch;gap:0;
  width:max-content;max-width:100%;margin:0 auto 2.6rem;
  padding:5px;
  background:rgba(8,10,14,.5);
  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-p-cyc{
  display:flex;flex-direction:row;align-items:center;gap:.6rem;
  font-family:var(--mf-mono);font-size:.63rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mf-muted);
  padding:.72rem 1.25rem;margin:0;cursor:pointer;
  transition:color .28s var(--mf-ease),background .28s var(--mf-ease),box-shadow .28s var(--mf-ease);
  /* CONCENTRIC CHAMFER. .mf-p-cycle is chamfered 9px and pads 5px, so a
     segment sitting in the top-left or bottom-right corner only nests
     cleanly at 9 - 5 = 4px. At 7px its diagonal cut 3px deeper than the
     container and exposed a triangular sliver of the container fill on the
     active segment - the notch on MONTHLY. Any inner chamfer must be the
     outer one minus the padding, never a value picked to look right alone. */
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);
  user-select:none;white-space:nowrap;
}
body.breakdance .mf-p-cyc:hover{color:var(--mf-text);background:rgba(255,255,255,.045)}
body.breakdance .mf-p-cyc:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--mf-cyan-lit)}
body.breakdance .mf-p-cyc-on{
  color:#04121C;background:var(--mf-cyan);
}
body.breakdance .mf-p-cyc-on:hover{color:#04121C;background:var(--mf-cyan-lit)}
/* the saving chip inverts with the segment it sits in */
body.breakdance .mf-p-cyc .mf-p-off{
  font-size:.58rem;letter-spacing:.1em;
  color:var(--mf-cyan);background:rgba(0,212,255,.12);
  padding:.2rem .42rem;
}
body.breakdance .mf-p-cyc-on .mf-p-off{color:#04121C;background:rgba(4,18,28,.16)}

/* ==========================================================================
   PLAN CARDS
   ========================================================================== */
body.breakdance .mf-p-plans{
  display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;
  width:100%;max-width:1000px;margin:0 auto;
}
body.breakdance .mf-p-plan{
  position:relative;display:flex;flex-direction:column;
  padding:2.2rem 2rem 2rem;
  transition:box-shadow .35s var(--mf-ease),transform .35s var(--mf-ease);
}
body.breakdance .mf-p-plan:hover{transform:translateY(-3px)}
body.breakdance .mf-p-plan:hover::before{width:19px;height:19px}
body.breakdance .mf-p-plan:hover::after{width:19px;height:19px}

/* Premium reads as the default choice: brighter frame, a cyan halo drawn with
   drop-shadow on a wrapper because clip-path would clip a box-shadow glow. */
body.breakdance .mf-p-plan-pre{
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.42),inset 0 1px 0 rgba(255,255,255,.12),0 22px 70px rgba(0,0,0,.5);
  background:linear-gradient(180deg,rgba(0,212,255,.055),rgba(255,255,255,.012) 55%),rgba(8,10,14,.46);
}
body.breakdance .mf-p-plan-pre::before,
body.breakdance .mf-p-plan-pre::after{border-color:rgba(140,232,255,.7)}
body.breakdance .mf-p-plan-pre:hover{
  box-shadow:inset 0 0 0 1px rgba(0,212,255,.7),inset 0 1px 0 rgba(255,255,255,.14),0 22px 80px rgba(0,0,0,.55);
}

/* Violet is a rare accent, reserved here for this single marker. */
body.breakdance .mf-p-badge{
  position:absolute;top:0;right:0;
  display:inline-flex;flex-direction:row;align-items:center;gap:.45rem;
  font-family:var(--mf-mono);font-size:.55rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:#0A0713;background:var(--mf-violet);
  padding:.42rem .8rem;margin:0;z-index:5;
  clip-path:polygon(0 0,100% 0,100% 100%,10px 100%,0 calc(100% - 10px));
}

body.breakdance .mf-p-plan-n{
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:1.05rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mf-text);margin:0 0 .5rem;
}
body.breakdance .mf-p-plan-pre .mf-p-plan-n{color:var(--mf-cyan)}
body.breakdance .mf-p-plan-t{
  font-family:'Rajdhani',sans-serif;font-size:.98rem;line-height:1.55;
  color:var(--mf-muted);margin:0 0 1.6rem;min-height:3rem;
}

/* --- price ---------------------------------------------------------------- */
body.breakdance .mf-p-price{
  display:flex;flex-direction:row;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  margin:0 0 .55rem;
}
body.breakdance .mf-p-amt{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(2.4rem,4.6vw,3.2rem);line-height:1;letter-spacing:.01em;
  color:var(--mf-text);margin:0;
}
body.breakdance .mf-p-plan-pre .mf-p-amt{color:var(--mf-cyan)}
body.breakdance .mf-p-per{
  font-family:var(--mf-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mf-muted);margin:0;
}
/* Total charged and billing frequency sit directly under the headline figure,
   at a legible size. Required: the headline is a per-month equivalent on the
   6-month and annual cycles. */
body.breakdance .mf-p-bill{
  font-family:'Rajdhani',sans-serif;font-weight:600;
  font-size:.92rem;line-height:1.5;color:#A8BDD4;margin:0 0 1.4rem;
}
body.breakdance .mf-p-bill strong{color:var(--mf-text);font-weight:600}

/* --- feature list --------------------------------------------------------- */
body.breakdance .mf-p-list{
  display:flex;flex-direction:column;gap:0;width:100%;
  margin:0 0 1.8rem;
  border-top:1px solid var(--mf-hair);
}
body.breakdance .mf-p-li{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:1rem;padding:.82rem 0;margin:0;
  border-bottom:1px solid rgba(160,225,255,.08);
}
body.breakdance .mf-p-li-k{
  font-family:var(--mf-mono);font-size:.6rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--mf-muted);margin:0;
}
body.breakdance .mf-p-li-v{
  font-family:'Rajdhani',sans-serif;font-weight:600;
  font-size:.94rem;line-height:1.3;color:var(--mf-text);
  text-align:right;margin:0;
}
body.breakdance .mf-p-li-hi{
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:.9rem;letter-spacing:.04em;color:var(--mf-cyan);
}
body.breakdance .mf-p-li-mut{color:var(--mf-muted);font-weight:400}

/* --- card CTA ------------------------------------------------------------- */
body.breakdance .mf-p-act{margin-top:auto;width:100%;display:block}
body.breakdance .mf-p-act .mf-bd-btn{display:flex;width:100%}
body.breakdance .mf-p-act .mf-bd-btn .bde-button__button{width:100%;padding:.95rem 1.2rem;font-size:.68rem}

/* Recurring terms are a legal obligation and are never hidden or shrunk below
   readability. */
body.breakdance .mf-p-terms{
  font-family:'Rajdhani',sans-serif;
  font-size:.8rem;line-height:1.6;color:var(--mf-muted);
  margin:.9rem 0 0;
}

/* --- cycle switching ------------------------------------------------------
   Markup default is annual: with the JS blocked, .mf-p-v-a is the one that
   renders, so the page is never priceless. */
body.breakdance .mf-p-var{display:none;width:100%}
body.breakdance .mf-p-hero .mf-p-v-a{display:block}
body.breakdance .mf-p-hero.mf-p-c-m .mf-p-v-a,
body.breakdance .mf-p-hero.mf-p-c-6 .mf-p-v-a{display:none}
body.breakdance .mf-p-hero.mf-p-c-m .mf-p-v-m{display:block}
body.breakdance .mf-p-hero.mf-p-c-6 .mf-p-v-6{display:block}

/* --- footnote under the cards --------------------------------------------- */
body.breakdance .mf-p-foot{
  display:block;text-align:center;max-width:820px;margin:2.4rem auto 0;
}
body.breakdance .mf-p-foot-p{
  font-family:var(--mf-mono);font-size:.62rem;font-weight:500;
  letter-spacing:.1em;line-height:2;color:var(--mf-muted);margin:0;
}

/* ==========================================================================
   02 - THE MULTIPLIER
   Indexed to 100, no currency and no FlightCoin figure. Bars are filled by the
   JS on intersection; without JS the modifier classes below still hold their
   width, so the comparison is readable with scripts blocked.
   ========================================================================== */
body.breakdance .mf-p-mpanel{
  display:block;padding:2.6rem 2.4rem;max-width:900px;margin:0 auto;
}
body.breakdance .mf-p-mrows{display:flex;flex-direction:column;gap:1.9rem;width:100%}
body.breakdance .mf-p-mrow{display:block;width:100%}
body.breakdance .mf-p-mhd{
  display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;
  gap:1rem;margin:0 0 .6rem;
}
body.breakdance .mf-p-mlbl{
  font-family:var(--mf-mono);font-size:.62rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mf-muted);margin:0;
}
body.breakdance .mf-p-mval{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:1.15rem;letter-spacing:.03em;color:var(--mf-text);margin:0;
}
body.breakdance .mf-p-mrow-pre .mf-p-mlbl{color:var(--mf-cyan)}
body.breakdance .mf-p-mrow-pre .mf-p-mval{color:var(--mf-cyan)}
body.breakdance .mf-p-mbar{
  position:relative;display:block;width:100%;height:14px;
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(160,225,255,.1);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
  overflow:hidden;
}
body.breakdance .mf-p-mfill{
  position:absolute;inset:0 auto 0 0;display:block;height:100%;
  transition:width 1.15s var(--mf-ease);
}
body.breakdance .mf-p-mfill-free{width:50%;background:rgba(157,178,201,.5)}
body.breakdance .mf-p-mfill-pre{
  width:100%;
  background:linear-gradient(90deg,rgba(0,212,255,.55),var(--mf-cyan));
}
/* The collapsed state is applied by the JS itself, not by an html.mf-js guard:
   if this page's script fails to load while the site-wide inline guard has
   already set html.mf-js, a guard-based rule would leave the bars permanently
   empty and the comparison unreadable. */
body.breakdance .mf-p-mbar-anim .mf-p-mfill{width:0}
html.mf-still body.breakdance .mf-p-mfill{transition:none}
body.breakdance .mf-p-mnote{
  font-family:var(--mf-mono);font-size:.6rem;font-weight:500;
  letter-spacing:.12em;line-height:1.9;color:var(--mf-muted);
  margin:2rem 0 0;padding-left:1rem;border-left:1px solid var(--mf-hair);
}
body.breakdance .mf-p-mkicker{
  font-family:'Rajdhani',sans-serif;font-weight:600;
  font-size:clamp(1rem,1.8vw,1.24rem);line-height:1.6;
  color:var(--mf-text);text-align:center;max-width:760px;
  margin:2.8rem auto 0;
}

/* ==========================================================================
   03 - COMPARISON STRIP
   Built from divs, not a table element: Breakdance has no table primitive and
   a grid keeps the two value columns aligned without one.
   ========================================================================== */
body.breakdance .mf-p-tbl{display:block;max-width:900px;margin:0 auto;width:100%}
body.breakdance .mf-p-trows{display:flex;flex-direction:column;gap:0;width:100%}
body.breakdance .mf-p-tr{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:1rem;align-items:center;
  padding:1.05rem 1.2rem;margin:0;
  border-bottom:1px solid rgba(160,225,255,.09);
}
body.breakdance .mf-p-tr-hd{
  border-bottom:1px solid var(--mf-hair);padding-bottom:.8rem;
}
body.breakdance .mf-p-tr:last-child{border-bottom:none}
/* The premium column reads as a lit lane running the height of the strip.
   The lane is its OWN class rather than being folded into .mf-p-tp, so the
   header cell can carry it without inheriting the value typography. */
body.breakdance .mf-p-tr .mf-p-lane{
  background:rgba(0,212,255,.05);
  margin:-1.05rem -1.2rem -1.05rem 0;padding:1.05rem 1.2rem;
  height:100%;display:flex;flex-direction:row;align-items:center;
}
body.breakdance .mf-p-tr-hd .mf-p-lane{margin-bottom:-.8rem}
body.breakdance .mf-p-tk{
  font-family:var(--mf-mono);font-size:.62rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mf-muted);margin:0;
}
body.breakdance .mf-p-th{
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mf-text);margin:0;
}
body.breakdance .mf-p-th-pre{color:var(--mf-cyan)}
body.breakdance .mf-p-tf,
body.breakdance .mf-p-tp{
  font-family:'Rajdhani',sans-serif;font-weight:600;
  font-size:.95rem;line-height:1.35;color:var(--mf-muted);margin:0;
}
body.breakdance .mf-p-tp{color:var(--mf-text)}
body.breakdance .mf-p-tp-hi{
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:.92rem;letter-spacing:.04em;color:var(--mf-cyan);
}

/* ==========================================================================
   04 - REASSURANCE
   ========================================================================== */
body.breakdance .mf-p-trust-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;width:100%;
}
body.breakdance .mf-p-titem{display:block;padding:1.7rem 1.5rem}
body.breakdance .mf-p-tt{
  font-family:var(--mf-mono);font-size:.62rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--mf-cyan);
  margin:0 0 .7rem;
}
body.breakdance .mf-p-tp2{
  font-family:'Rajdhani',sans-serif;
  font-size:.92rem;line-height:1.62;color:var(--mf-muted);margin:0;
}

/* ==========================================================================
   05 - FAQ
   The accordion ships its own defaults, so everything visual is forced here or
   the page drifts back to rounded corners and a default font.
   ========================================================================== */
body.breakdance .mf-p-faq-panel{
  position:relative;max-width:920px;margin:0 auto;width:100%;padding:1.4rem;
  background:linear-gradient(180deg,var(--mf-veil-top),var(--mf-veil-bot)),rgba(8,10,14,.42);
  backdrop-filter:var(--mf-blur);-webkit-backdrop-filter:var(--mf-blur);
  box-shadow:inset 0 0 0 1px var(--mf-hair),inset 0 1px 0 rgba(255,255,255,.085),0 18px 60px rgba(0,0,0,.45);
  clip-path:polygon(var(--mf-ch) 0,100% 0,100% calc(100% - var(--mf-ch)),calc(100% - var(--mf-ch)) 100%,0 100%,0 var(--mf-ch));
}
body.breakdance .mf-p-faq-panel::before,
body.breakdance .mf-p-faq-panel::after{
  content:'';position:absolute;width:15px;height:15px;z-index:4;pointer-events:none;
}
body.breakdance .mf-p-faq-panel::before{
  top:12px;right:12px;
  border-top:1px solid rgba(140,232,255,.34);border-right:1px solid rgba(140,232,255,.34);
}
body.breakdance .mf-p-faq-panel::after{
  bottom:12px;left:12px;
  border-bottom:1px solid rgba(140,232,255,.34);border-left:1px solid rgba(140,232,255,.34);
}
body.breakdance .mf-p-acc{width:100%}
body.breakdance .mf-p-acc .bde-accordion__content-wrapper{
  background:rgba(255,255,255,.022);
  border:none;border-radius:0;
  box-shadow:inset 0 0 0 1px rgba(160,225,255,.09);
  clip-path:polygon(var(--mf-ch-sm) 0,100% 0,100% calc(100% - var(--mf-ch-sm)),calc(100% - var(--mf-ch-sm)) 100%,0 100%,0 var(--mf-ch-sm));
  margin-bottom:.6rem;
  transition:background .3s var(--mf-ease),box-shadow .3s var(--mf-ease);
}
body.breakdance .mf-p-acc .bde-accordion__content-wrapper:hover{
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(140,232,255,.24);
}
body.breakdance .mf-p-acc .bde-accordion__content-wrapper:has(.bde-accordion__button[aria-expanded="true"]){
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(140,232,255,.28),inset 3px 0 0 0 var(--mf-cyan);
}
body.breakdance .mf-p-acc .bde-accordion__title-tag{margin:0}
body.breakdance .mf-p-acc .bde-accordion__button{
  background:transparent;border:none;
  padding:1.15rem 1.3rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;cursor:pointer;
}
body.breakdance .mf-p-acc .bde-accordion__title{
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:.8rem;letter-spacing:.035em;text-transform:uppercase;
  line-height:1.45;color:var(--mf-text);text-align:left;
  transition:color .3s var(--mf-ease);
}
body.breakdance .mf-p-acc .bde-accordion__button[aria-expanded="true"] .bde-accordion__title{color:var(--mf-cyan)}
/* The icon spans render EMPTY on this install - the element's icon config
   produces no inline svg. The glyphs are drawn as monoline pseudo-elements so
   nothing depends on an icon set. */
body.breakdance .mf-p-acc .bde-accordion__icon{
  position:relative;width:13px;height:13px;flex:none;display:block;
}
body.breakdance .mf-p-acc .bde-accordion__icon::before,
body.breakdance .mf-p-acc .bde-accordion__icon::after{
  content:'';position:absolute;left:50%;top:50%;
  width:13px;height:1.5px;background:var(--mf-cyan);
  transform:translate(-50%,-50%);
}
body.breakdance .mf-p-acc .bde-accordion__icon--default::after{transform:translate(-50%,-50%) rotate(90deg)}
body.breakdance .mf-p-acc .bde-accordion__icon--active::after{display:none}
body.breakdance .mf-p-acc .bde-accordion__button[aria-expanded="false"] .bde-accordion__icon--active,
body.breakdance .mf-p-acc .bde-accordion__button[aria-expanded="true"] .bde-accordion__icon--default{display:none}
body.breakdance .mf-p-acc .bde-accordion__panel-content{padding:0 1.3rem 1.25rem}
body.breakdance .mf-p-acc .mf-p-acc-p{
  font-family:'Rajdhani',sans-serif;
  font-size:.98rem;line-height:1.75;color:var(--mf-muted);margin:0;
}

/* ==========================================================================
   06 - CLOSING CTA
   ========================================================================== */
body.breakdance .mf-p-ctabox{
  display:block;text-align:center;padding:3.4rem 2rem;max-width:880px;margin:0 auto;
}
body.breakdance .mf-p-ctabox .mf-p-eb,
body.breakdance .mf-p-ctabox .mf-p-h2,
body.breakdance .mf-p-ctabox .mf-p-sub{width:100%}
body.breakdance .mf-p-ctabox .mf-p-sub{margin:0 auto 2.2rem}
body.breakdance .mf-p-ctas{
  display:flex;flex-direction:row;flex-wrap:wrap;gap:.9rem;justify-content:center;
}

/* ==========================================================================
   PREMIUM GOLD (2026-10-27, owner request)
   Premium reads as the premium choice. #E8C66A is a champagne gold kept
   visibly apart from FlightCoin amber #FFB020, which stays reserved for FC.
   Cyan remains the journey colour. Gold lives on this page only.
   ========================================================================== */
body.breakdance{--mf-gold:#E8C66A;--mf-gold-lit:#F3DC97}
body.breakdance .mf-p-plan-pre{
  box-shadow:inset 0 0 0 1px rgba(232,198,106,.58),inset 0 1px 0 rgba(255,255,255,.12),0 22px 70px rgba(0,0,0,.5);
  background:linear-gradient(180deg,rgba(232,198,106,.075),rgba(255,255,255,.012) 55%),rgba(8,10,14,.46);
}
body.breakdance .mf-p-plan-pre:hover{
  box-shadow:inset 0 0 0 1px rgba(243,220,151,.88),inset 0 1px 0 rgba(255,255,255,.14),0 22px 80px rgba(0,0,0,.55);
}
body.breakdance .mf-p-plan-pre::before,
body.breakdance .mf-p-plan-pre::after{border-color:rgba(243,220,151,.82)}
body.breakdance .mf-p-plan-pre .mf-p-badge{background:var(--mf-gold);color:#1A1204}
body.breakdance .mf-p-plan-pre .mf-p-plan-n,
body.breakdance .mf-p-plan-pre .mf-p-amt,
body.breakdance .mf-p-plan-pre .mf-p-li-hi{color:var(--mf-gold)}
body.breakdance .mf-p-plan-pre .mf-bd-btn-solid .bde-button__button,
body.breakdance .mf-p-plan-pre .mf-bd-btn-solid a.bde-button__button.button-atom{background-color:var(--mf-gold);background-image:none;color:#1A1204}
body.breakdance .mf-p-plan-pre .mf-bd-btn-solid .bde-button__button:hover,
body.breakdance .mf-p-plan-pre .mf-bd-btn-solid a.bde-button__button.button-atom:hover{background-color:var(--mf-gold-lit);box-shadow:0 0 30px rgba(232,198,106,.42);color:#1A1204}
body.breakdance .mf-p-mrow-pre .mf-p-mlbl,
body.breakdance .mf-p-mrow-pre .mf-p-mval{color:var(--mf-gold)}
body.breakdance .mf-p-mrow-pre .mf-p-mfill-pre{background:linear-gradient(90deg,rgba(232,198,106,.5),var(--mf-gold))}
body.breakdance .mf-p-mrow .mf-p-mfill-free{width:33.3%}
body.breakdance .mf-p-mbar-anim .mf-p-mfill{width:0}
body.breakdance .mf-p-th-pre{color:var(--mf-gold)}
body.breakdance .mf-p-trows .mf-p-tr .mf-p-lane{background:rgba(232,198,106,.06)}
body.breakdance .mf-p-lane .mf-p-tp-hi{color:var(--mf-gold)}
body.breakdance .mf-p-tr .mf-p-tp::before{color:var(--mf-gold)}
/* ==========================================================================
   MOBILE - KEEP THIS BLOCK LAST IN THE FILE.
   Rules appended after a media query override it; that has cost a debug round
   before. Anything new goes ABOVE this line.
   ========================================================================== */
@media(max-width:1023px){
  body.breakdance .mf-p-hero > .section-container{padding:7.5rem 1.25rem 3.5rem}
  body.breakdance .mf-p-sec > .section-container{padding:4rem 1.25rem}
  body.breakdance .mf-p-plans{grid-template-columns:1fr;gap:1.2rem;max-width:520px}
  /* Premium first on a single column: the card we want read is the one that
     should not need a scroll. */
  body.breakdance .mf-p-plan-pre{order:-1}
  body.breakdance .mf-p-plan{padding:2rem 1.4rem 1.7rem}
  body.breakdance .mf-p-plan-t{min-height:0;margin-bottom:1.3rem}
  body.breakdance .mf-p-cycle{width:100%;flex-direction:column;gap:4px}
  body.breakdance .mf-p-cyc{justify-content:space-between;width:100%;padding:.78rem 1rem}
  body.breakdance .mf-p-mpanel{padding:1.9rem 1.3rem}
  body.breakdance .mf-p-tr{grid-template-columns:1fr;gap:.45rem;padding:1rem 1rem}
  body.breakdance .mf-p-tr .mf-p-lane{margin:0;padding:.5rem .7rem;height:auto}
  /* the header row carries no key, so it has nothing to show once stacked */
  body.breakdance .mf-p-tr-hd{display:none}
  /* which column a value belongs to is only obvious while they sit side by
     side, so the stacked rows get their column name back from CSS rather than
     from extra nodes nobody would maintain in the builder */
  body.breakdance .mf-p-tf::before,
  body.breakdance .mf-p-tp::before{
    font-family:var(--mf-mono);font-size:.56rem;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:var(--mf-muted);
    margin-right:.5rem;
  }
  body.breakdance .mf-p-tf::before{content:'Free'}
  body.breakdance .mf-p-tp::before{content:'Premium';color:var(--mf-cyan)}
  body.breakdance .mf-p-trust-row{grid-template-columns:1fr 1fr;gap:.9rem}
  body.breakdance .mf-p-titem{padding:1.3rem 1.15rem}
  body.breakdance .mf-p-ctabox{padding:2.6rem 1.2rem}
}
@media(max-width:560px){
  body.breakdance .mf-p-trust-row{grid-template-columns:1fr}
  body.breakdance .mf-p-li{flex-direction:column;align-items:flex-start;gap:.25rem}
  body.breakdance .mf-p-li-v{text-align:left}
}