/* mf-tablet-7.css — AUTOGENERATED 2026-08-01 (supersedes tablet-6: problem and
   outcome as SEPARATE cards). Tablet (768-991) = the phone design; loads LAST. */
/* ── from shared ── */
@media (min-width:768px) and (max-width:991px){
.w-hidden-main,.w-hidden-medium{display:inherit!important}.w-hidden-small{display:none!important}.w-row,.w-container .w-row{margin-left:0;margin-right:0}.w-col{width:100%;left:auto;right:auto}.w-col-small-1{width:8.33333%}.w-col-small-2{width:16.6667%}.w-col-small-3{width:25%}.w-col-small-4{width:33.3333%}.w-col-small-5{width:41.6667%}.w-col-small-6{width:50%}.w-col-small-7{width:58.3333%}.w-col-small-8{width:66.6667%}.w-col-small-9{width:75%}.w-col-small-10{width:83.3333%}.w-col-small-11{width:91.6667%}.w-col-small-12{width:100%}
.w-nav[data-collapse=small] .w-nav-menu{display:none}.w-nav[data-collapse=small] .w-nav-button{display:block}.w-nav-brand{padding-left:10px}
}
/* ── from page ── */
@media (min-width:768px) and (max-width:991px){
.btn-primary{text-align:center}.container,.container.nav-c.is-scrolled,.container.nav-c.is-scrolled,.container.nav-c.is-scrolled{padding-left:1.6rem;padding-right:1.6rem}.btn-clean{text-align:center}.hp-friction-card-bullet{flex:none}.nav-logo-link{padding-left:0}.nav-cta-c{display:flex}.nav-cta-c.mobile-only{display:none}.btn-nav{text-align:center;flex:none;min-width:0;padding:9px 16px;font-size:13px}.mobile-menu-c{display:none}.about-hero-text-c{padding:2.4rem}.about-team-cards-c{flex-flow:column}.about-investors-cards-c{grid-template-columns:1fr 1fr}.about-cta-img{margin-top:-6.3rem}.hero-planet{filter:brightness(.3);-webkit-mask-image:linear-gradient(#000 58%,#0000 74%);mask-image:linear-gradient(#000 58%,#0000 74%)}.hero-probe{width:76px;display:none;top:84px;right:16px}.hero-copy{text-align:left;align-items:flex-start}.prob-grid{grid-column-gap:0px;grid-row-gap:28px;grid-template-columns:minmax(0,1fr)}.mf-footer{min-height:0;padding:72px 24px 56px}.mf-footer-inner{grid-column-gap:40px;grid-row-gap:40px;text-align:center;flex-direction:column;align-items:center}.mf-footer-cols{grid-column-gap:30px;grid-row-gap:30px;flex-wrap:wrap;justify-content:center;width:100%}.mf-cta{padding-top:96px;padding-bottom:104px}.mf-cta-title{font-size:36px}.mf-cta-lede{font-size:16px}.mf-cta-line{display:inline}.mf-faq{padding-top:88px;padding-bottom:88px}.mf-faq-head{text-align:center}.mf-faq-title{font-size:30px}.mf-faq-q{font-size:16px}.mf-faq-a-in{padding-right:0}.mf-cs{padding-top:72px;padding-bottom:92px}.mf-cs-head{text-align:center;margin-left:auto;margin-right:auto}.mf-cs-title{font-size:30px}.mf-cs-deck{width:100%;max-width:420px;height:430px;margin-left:auto;margin-right:auto}.mf-cs-slot{width:100%}.mf-cs-label{text-align:center;max-width:none;margin-bottom:14px;font-size:20px}.mf-cs-card{height:auto;min-height:300px;padding:24px 22px 22px}.mf-cs-ctl{grid-column-gap:18px;justify-content:center;width:100%;max-width:420px;margin-right:auto}.mf-cs-dot{display:none}.mf-cs-dot.is-current{display:block}.mf-flow{padding-top:88px;padding-bottom:88px}.mf-flow-title{font-size:28px}.mf-flow-lede{font-size:16px}.mf-flow-rig{margin-left:-280px;left:50%}.mf-flow-bub.mf-flow-hub{overflow:visible}.mf-flow-hubtext{width:max-content;font-size:18px;position:absolute;top:150px;left:50%;transform:translate(-50%)}.mf-flow-pill-s{left:340px}.mf-flow-pill-d{left:40px}.mf-flow-tab{display:none}.mf-flow-tab.is-current{display:block}.mf-flow-pnl{width:100%;height:auto}.mf-ring{padding-top:88px;padding-bottom:88px}.mf-ring-title{font-size:30px}.mf-ring-stage{height:520px}.mf-ring-moon{width:190px;height:190px;top:-95px;left:-95px}.mf-ring-hub{width:118px;height:118px;top:-59px;left:-59px}.mf-ring-hub-t{font-size:13px}.mf-ring-hub-s{display:none}.mf-ring-hint{text-align:center;font-size:22px;top:auto;bottom:4px;left:50%;transform:translate(-50%)}.mf-ring-node{width:60px}.mf-ring-avatar{width:60px;height:60px}.mf-ring-name{font-size:12px}.mf-ring-n1{top:-175px;left:-30px}.mf-ring-n2{top:-102px;left:91px}.mf-ring-n3{top:42px;left:91px}.mf-ring-n4{top:115px;left:-30px}.mf-ring-n5{top:42px;left:-151px}.mf-ring-n6{top:-102px;left:-151px}.mf-ring-panel{width:92vw;max-width:92vw;height:auto;max-height:none;margin-top:-39vh;margin-left:-46vw;padding:20px 18px 18px;overflow-y:auto}.mf-ring-pfoot{grid-column-gap:14px;grid-row-gap:14px;flex-direction:column;align-items:stretch}.mf-ring-parrows{justify-content:center}.mf-cs-arw{color:#0fbe68;background-color:#fff;border-style:none;width:40px;height:40px;font-size:20px;box-shadow:0 10px 24px -12px #00000080}.mf-cs-arw.is-prev{order:-1}.mf-ship-layer,.mf-cs-haze{display:none}.hero-cta-row{justify-content:flex-start;width:100%;min-width:0}.hero-mail{width:100%}.hero-mail-in{flex:1;width:auto;min-width:0}.hero-mail-in._w-input{width:160px}.mf-ring-outro{text-align:left;margin-top:40px;font-size:17px}.mf-flow-outro{text-align:left;margin-top:32px;font-size:17px}.mf-alt{padding:88px 20px}.mf-alt-head{margin-bottom:40px}.mf-alt-title{font-size:30px}.mf-alt-lede{font-size:16px}.mf-alt-row{background-color:#0000;border-style:none;margin-bottom:26px;padding:0;display:block}.mf-alt-row-t{background-color:#06201d59;border:1px solid #ffffff1a;border-radius:10px;width:100%;padding:18px 20px;font-size:18px}.mf-alt-arrow{display:none}.mf-kpi{padding:88px 20px}.mf-kpi-stage{height:auto}.mf-kpi-glow,.mf-kpi-pad,.mf-kpi-slot{display:none}.mf-kpi-panel{width:100%;margin-bottom:14px;position:relative}.mf-kpi-panel.is-p1,.mf-kpi-panel.is-p2,.mf-kpi-panel.is-p3,.mf-kpi-panel.is-p4,.mf-kpi-panel.is-p1,.mf-kpi-panel.is-p2,.mf-kpi-panel.is-p3,.mf-kpi-panel.is-p4{top:0;left:0}.mf-kpi-v{font-size:32px}.mf-alt-row-o{background-color:#09262280;border:1px solid #84ffda4d;border-radius:10px;width:100%;margin-top:10px;padding:16px 20px;font-size:17px}.mf-kpi-head{margin-bottom:32px}.mf-kpi-title{font-size:30px}.mf-kpi-lede{font-size:16px}
}
/* ── from cta2 ── */
@media (min-width:768px) and (max-width:991px){
.pg-cta__brk{display:none}
}
/* ── from mobile5 ── */
@media (min-width:768px) and (max-width:991px){
.mf-slack-mount .sec-flow .mf{ padding: 88px 20px; }
  .mf-slack-mount .sec-flow .flow{
    /* Scale about the TOP CENTRE, then hand back the layout space the
       transform freed — symmetrically, half off each side. Without the
       negative margins the row goes on reserving the full unscaled 560x520
       box and the grid fix above is undone; splitting them evenly is what
       keeps the rig centred instead of hugging one edge. */
    width: 560px;
    height: 520px;                 /* the demo's mobile block sets 412 */
    transform: scale(var(--mf-rig));
    transform-origin: top center;
    margin: 0 calc(560px * (var(--mf-rig) - 1) / 2)
              calc(520px * (var(--mf-rig) - 1)) ;
  }
  /* The two pills carry the section's actual message and are 11.5px at full
     size, which the scale turns into 7px. Counter-sizing puts them back where
     the demo drew them. The hub's 8.5px label is deliberately NOT counter-
     sized: its circle is 64px, and text large enough to read would not fit
     inside it. */
  .mf-slack-mount .sec-flow .flow .pill{ font-size: calc(11.5px / var(--mf-rig)); }

  /* Centred on a phone. The demo's head is a 640px left-aligned column
     against a wide layout; at 402px that reads as text stranded on one side
     of an otherwise centred section. Headings and lede centre, and the two
     columns stack centred under them.
     Card BODY copy is deliberately left untouched below — centring a
     five-line paragraph costs more readability than the symmetry buys. */
  .mf-slack-mount .sec-flow .head{ max-width: none; margin: 0 auto 40px; text-align: center; }
  .mf-slack-mount .sec-flow .head h2{ font-size: 28px; }
  .mf-slack-mount .sec-flow .head p{ font-size: 16px; }
  .mf-slack-mount .sec-flow .cols{ justify-items: center; gap: 40px; }
  .mf-slack-mount .sec-flow .slack{ width: 100%; }
  .mf-slack-mount .sec-flow .meta{ justify-content: center; }

  /* The clip panel reserves 92px on its right for the next button, which on a
     wide layout is the deck's own margin. At 402px that reads as a narrow
     card shoved against the left edge with a button floating in empty space.
     Centre it and let the button sit ON the card's edge, the way a carousel
     control normally does. left/right/margin rather than a transform —
     the deck script animates `transform` on these panels. */
  .mf-slack-mount .sec-flow .pnl{
    left: 0; right: 0; margin: 0 auto; width: calc(100% - 52px);
  }
  .mf-slack-mount .sec-flow .deck-next{ right: 0; }
.mf-slack-mount .sec-flow{ --mf-rig: .90; }
.mf-fleet-mount .sec-cs .slot:not(.front){ opacity: 0 !important; }
  .mf-fleet-mount .sec-cs .slot:not(.front) .label{ opacity: 0; }

  /* Centre the section and the deck. The head is a left-aligned column in the
     demo and the stage is a left-aligned flex column; on a phone both strand
     their content against the left edge of a section that is otherwise
     symmetrical. The card's own paragraphs stay left-aligned. */
  .mf-fleet-mount .sec-cs .head{ max-width: none; text-align: center; }
  .mf-fleet-mount .sec-cs .head h2{ font-size: 28px; }
  .mf-fleet-mount .sec-cs .stage{ align-items: center; }
  .mf-fleet-mount .sec-cs .ship{ align-self: center; }
  /* The slots are absolutely positioned at left:0 and capped at 420px, so on
     any phone wider than 420 they hug the left edge of a centred deck.
     Centred with a margin rather than translateX(-50%) because fleet.js owns
     `transform` on every slot — it writes translate3d/rotateY there — and a
     transform here would be overwritten on the next paint. The percentage in
     margin-left resolves against the deck, so this tracks the cap. */
  .mf-fleet-mount .sec-cs .slot{ left: 50%; margin-left: calc(min(100%, 420px) / -2); }
  .mf-fleet-mount .sec-cs .ctl{ justify-content: center; }
  .mf-fleet-mount .sec-cs .arw{
    background: #fff; border-color: #fff; color: #0FBE68;
  }
  .mf-fleet-mount .sec-cs .arw:hover{
    background: #fff; border-color: #fff; color: #0FBE68;
  }

  /* The eleven dashes do not fit across a phone and read as a squashed
     ladder. Collapse them to ONE bar: every dash but the active one is
     hidden, and the active one stretches to fill the row. The demo already
     animates `i.on b` from 0 to full width on the autoplay timer, so what is
     left is a single progress bar showing how long this card has been up —
     which is the indicator, not a decoration. */
  /* A bar the full width of the row read as a rule under the card rather
     than a progress indicator. Short and centred, it reads as a timer. */
  .mf-fleet-mount .sec-cs .dots{ flex: 0 0 104px; }
  .mf-fleet-mount .sec-cs .dots i{ display: none; }
  .mf-fleet-mount .sec-cs .dots i.on{ display: block; width: 100%; }

  /* The flying probe lands ON the card: measured at 402px it occupies
     y1510-1632 while the front card runs y1437-1767. The section's own
     #cs-ship is innocent — it sits at y1192, clear above the deck — so this
     targets the journey layer and only the journey layer.

     Two things decide the selector. The layer is appended to <body>, NOT
     inside .mf-fleet-mount, so a mount-scoped rule would match nothing; and
     the attribute is carried along purely to outweigh ship.css's own
     `.ship-journey`, which loads after this file.

     opacity, NEVER display:none — fleet.js's ignite() defers to
     `[data-ship-journey]` when one is present and waits for its touchdown to
     fire `beam-on`, and that touchdown is computed from measured rects. Take
     the element out of layout and the beam never fires, so the cards never
     reveal at all and the deck photographs empty.

     REVISED: hiding it was the wrong answer — it is the spaceship, and losing
     it was immediately noticed. It stays visible and is scaled down instead,
     so it reads as a probe arriving rather than a full-size craft parked on
     the paragraph. Its transform belongs to ship.js, so the size comes from
     width/height on the image, which the script does not touch. */
  .ship-journey[data-ship-journey]{ pointer-events: none; }
  .ship-journey img{ width: 84px; height: auto; }
/* !important because mf.js writes `display` INLINE on the twin as it drives
     it, and an inline style outranks any selector without it. Measured: the
     plain rule left it computing `display: block`. */
  .hero .hero-onplanet[data-mask-twin]{ display: none !important; }

  /* Two problems, one rule. brightness gives the white copy its contrast
     back; the mask stops the planet at the hero's own bottom edge.

     It bottoms out at y1314 while the hero ends at 900, so 414px of it hangs
     over the case-study section and its bright limb swallows that section's
     white headline. The stops are computed from the image's own box, not
     guessed: it spans y-126 to y1314, so the hero's bottom edge falls at 71%
     of its height. Fading 58% -> 74% lands the fade on that edge.

     A gradient mask was rejected here once, for banding — but that was the
     old plate, where image and page differed by 7 levels of red and a smooth
     ramp quantised into ~48px steps. This fades the planet's own body, across
     460px, at half brightness. Different problem, and the alternative is
     `overflow:hidden` on the hero, which slices the limb on a hard line. */
  .hero img.hero-planet{
    filter: brightness(.30);
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 74%);
            mask-image: linear-gradient(to bottom, #000 58%, transparent 74%);
  }

  /* NO SCRIM, deliberately -- the second time this page has taught the same
     lesson. A radial one showed its box edge; replacing it with a full-bleed
     vertical ramp still drew a straight line across the planet at the same
     place, because a long smooth gradient over a near-flat dark image
     quantises: consecutive 8-bit values cover tens of pixels each and the
     step reads as a hard edge. It is the identical failure that got a
     gradient mask rejected on the planet plate earlier.

     A filter is a uniform multiply, so it has no ramp and nothing to band.
     Contrast for the copy comes from that alone. */
  .hero .hero-lede{ color: rgba(238,243,228,.94); }
.mf-slack-mount .sec-flow .pnl{ width: 100%; }
  .mf-slack-mount .sec-flow .deck{ margin-bottom: 68px; }
  .mf-slack-mount .sec-flow .deck-next{
    top: auto; bottom: -62px; right: auto; left: 50%;
    transform: translateX(-50%);
  }
  /* the demo's hover/active rules re-assert translateY(-50%), which would
     throw the button back up now that it is centred horizontally instead */
  .mf-slack-mount .sec-flow .deck-next:hover{ transform: translateX(-50%) scale(1.09); }
  .mf-slack-mount .sec-flow .deck-next:active{ transform: translateX(-50%) scale(.95); }
/* The rig's hub is a 64px dashed circle carrying "Moonfort Agents" at
     8.5px. Scaled to fit a phone that is ~5px of type inside a ~40px ring —
     unreadable, and it crowds the six agents orbiting it. Replace both the
     dashed orbit and the hub with a legible pill beneath the crew.

     opacity, not display:none, on the hub: the flow timeline slides each
     agent IN from the hub's position and measures it to do so. Take it out of
     layout and the arrivals compute from a zero rect. The orbit circle is
     pure decoration and can go properly. */
  .mf-slack-mount .sec-flow .rig .orbit{ display: none; }
  /* !important because the flow timeline animates the hub's opacity with
     anime.js, which writes it INLINE. Measured: the plain rule left the
     dashed circle and its 5px label still painting. */
  .mf-slack-mount .sec-flow .flow .hub{ opacity: 0 !important; }
  .mf-slack-mount .sec-flow .flow::after{
    content: 'Moonfort agents';
    /* rig space: the orbit is r=78 about (280,360) and an agent is 44px, so
       the lowest agent's bottom edge is 360+78+22 = 460. 474 clears it. */
    position: absolute; left: 280px; top: 474px; translate: -50% 0;
    padding: 7px 14px; border-radius: 100px; white-space: nowrap;
    background: var(--bg); border: 1px solid var(--hair);
    font-family: var(--mono); letter-spacing: .03em; color: var(--body);
    /* counter-scaled like the two arc pills, so it reads at its drawn size
       rather than at 7px */
    font-size: calc(11.5px / var(--mf-rig));
  }

  /* Controls, in the order asked for: card, then the three tabs, then the
     clip label, then the two arrows centred under it. .deck-ctl is appended
     after .meta by the module; the deck's own edge-mounted arrow steps aside
     for it here and stays the desktop control. */
  .mf-slack-mount .sec-flow .deck-next{ display: none; }
  .mf-slack-mount .sec-flow .deck{ margin-bottom: 0; }
  /* The panel is full width here, so the two cards parked behind it -- which
     the deck offsets to the RIGHT -- stick out past its edge instead of
     hiding under it. Their opacity is written inline by paint(), so it
     cannot be overridden without also hiding the front card; clip the deck
     instead. Costs the card's outer drop shadow, which is barely visible on
     this background. */
  .mf-slack-mount .sec-flow .deck{ overflow: hidden; }
  .mf-slack-mount .sec-flow .meta{ flex-direction: column; gap: 12px; margin-top: 24px; }
  .mf-slack-mount .sec-flow .deck-ctl{
    display: flex; justify-content: center; gap: 18px; margin-top: 18px;
  }
  /* White plate, green glyph -- the site's own button treatment, and the
     same on both decks so the two carousels read as one control language.
     `color` rather than a fill: both arrow sets stroke with currentColor. */
  .mf-slack-mount .sec-flow .deck-arw{
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: #fff; border: none; color: #0FBE68;
    box-shadow: 0 10px 24px -12px rgba(0,0,0,.5), 0 0 18px 3px rgba(122,255,155,.22);
    transition: transform .28s var(--spring);
  }
  .mf-slack-mount .sec-flow .deck-arw:active{ transform: scale(.94); }
  .mf-slack-mount .sec-flow .deck-arw svg{ width: 21px; height: 21px; display: block; }

  /* Case study: the label above the card is the only thing still hanging off
     the left edge of an otherwise centred section. */
  .mf-fleet-mount .sec-cs .label{ text-align: center; max-width: none; }

  /* Ship off the phone entirely, both of them: the section's own probe and
     the flying journey layer. The journey keeps its geometry (opacity, never
     display:none) because ignite() waits on its touchdown to fire `beam-on`,
     and a layer with no rect never touches down, so the cards would never
     reveal. The section's own #cs-ship has no such contract on a phone — the
     beam and haze it feeds are already display:none here — so it can go. */
  .mf-fleet-mount .sec-cs .ship{ display: none; }
  .ship-journey[data-ship-journey]{ opacity: 0; }
.mf-foot-mount .pg-foot{ padding: 72px 24px 56px; min-height: 0; }
  .mf-foot-mount .pg-foot__grid{
    flex-direction: column; align-items: center; text-align: center; gap: 40px;
  }
  .mf-foot-mount .pg-foot__brand{ max-width: 300px; }
  .mf-foot-mount .pg-foot__word{ font-size: 26px; margin-bottom: 10px; }
  .mf-foot-mount .pg-foot__tag{ margin-bottom: 8px; }
  .mf-foot-mount .pg-foot__cols{
    gap: 30px; justify-content: center; flex-wrap: wrap; width: 100%;
  }
  .mf-foot-mount .pg-foot__cols > div{ min-width: 92px; }
  .mf-foot-mount .pg-foot__cols .pg-eyebrow{ margin-bottom: 10px; }
  .mf-foot-mount .pg-foot__cols a{ padding: 4px 0; }
}