/* SEOmise public website: the all-modules page (/features, 1.78.0), with modules.js and widgets.js. LIGHT design (owner,
   14 Oct evening: no dark pages, header or menus): white and soft tints, near-black ink, green/teal accents. Every
   colour, radius, duration and gradient comes from the design tokens in public/css/tokens.css. Decorative motion (card
   lift and light sweep, fly-in slide, stage float) is switched off under prefers-reduced-motion. */

.mx { background: #fff; color: var(--ink); }
.mx-wrap { width: 100%; max-width: var(--wrap-wide); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

/* Hero: a soft mint/aqua wash and a fading dot grid behind big type; the search is the one control */
.mx-hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(70px + clamp(44px, 7vw, 104px)) 0 clamp(40px, 5vw, 64px); background: var(--grad-night); }
.mx-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--dots); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 20%, #000 10%, transparent 75%); mask-image: radial-gradient(70% 70% at 70% 20%, #000 10%, transparent 75%); pointer-events: none; }
.mx-hero::after { content: ""; position: absolute; z-index: -1; width: 720px; height: 720px; right: -220px; top: -320px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(25, 195, 125, .2), rgba(20, 184, 196, .12) 55%, transparent 75%); filter: blur(10px); pointer-events: none;
  animation: mx-drift 18s var(--ease-in-out) infinite alternate; }
@keyframes mx-drift { to { transform: translate3d(-80px, 60px, 0) scale(1.08); } }
.mx-crumbs { margin-bottom: 26px; }
.mx-kicker { margin: 0 0 16px; font: 650 15px/1.2 var(--sans); color: var(--brand-ink); }
.mx-h1 { font-size: clamp(44px, 6.4vw, 96px); font-weight: 760; letter-spacing: -.04em; line-height: .98; max-width: 13ch; margin: 0 0 22px; text-wrap: balance; color: var(--ink); }
.mx-grad { background: var(--grad-brand-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mx-lede { font-size: var(--t-lede); line-height: 1.55; color: var(--ink-2); max-width: 58ch; margin: 0 0 30px; text-wrap: pretty; }
.mx-search { display: flex; align-items: center; gap: 6px; max-width: 760px; padding: 7px; border-radius: 20px; border: 1.5px solid var(--line-2); background: #fff;
  box-shadow: 0 1px 2px rgba(11, 21, 38, .05), 0 24px 50px -28px rgba(11, 70, 50, .35); transition: box-shadow var(--d-2), border-color var(--d-2); }
.mx-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 5px rgba(25, 195, 125, .18), 0 0 40px -8px rgba(25, 195, 125, .4); }
.mx-q { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 14px; color: var(--ink-3); }
.mx-q input { flex: 1; min-width: 0; height: 52px; border: 0; background: none; color: var(--ink); font: 500 17px var(--sans); outline: none; }
.mx-q input::placeholder { color: #8391a6; }
.mx-for select { height: 52px; padding: 0 14px; border: 0; border-left: 1px solid var(--line); background: none; color: var(--ink-2); font: 600 14.5px var(--sans); cursor: pointer; border-radius: 0; }
.mx-for select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.mx-search .btn { min-height: 52px; border-radius: 14px; }
.mx-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; margin: 26px 0 0; padding: 0; font: 500 14.5px/1.3 var(--sans); color: var(--ink-3); }
.mx-facts li { display: inline-flex; align-items: center; gap: 7px; }
.mx-facts b { font: 750 18px var(--display); color: var(--ink); }
.mx-facts .ms { font-size: 18px; color: var(--brand-ink); }

/* Category tabs: one row, sticky under the header, scrolls sideways on phones */
.mx-tabs { position: sticky; top: 70px; z-index: 30; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mx-tab-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 12px 0; }
.mx-tab-list::-webkit-scrollbar { display: none; }
.mx-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 8px 8px 13px; border-radius: var(--r-pill); border: 1px solid var(--line); background: #fff;
  color: var(--ink-2); font: 600 14px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background var(--d-1), color var(--d-1), border-color var(--d-1), box-shadow var(--d-2); }
.mx-tab .ms { font-size: 18px; }
.mx-n { font: 600 12px/1 var(--sans); padding: 4px 7px; border-radius: var(--r-pill); background: var(--bg-2); color: var(--ink-3); }
.mx-tab:hover { color: var(--ink); border-color: var(--line-2); }
.mx-tab[aria-current="true"] { color: #fff; border-color: var(--ink); background: var(--ink); box-shadow: 0 8px 20px -12px rgba(11, 21, 38, .6); }
.mx-tab[aria-current="true"] .ms { color: var(--brand-bright); }
.mx-tab[aria-current="true"] .mx-n { background: rgba(255, 255, 255, .16); color: #fff; }

/* Body: groups of module cards on a soft base */
.mx-body { padding: 26px 0 var(--sec); background: var(--bg); }
.mx-status { margin: 0 0 6px; font: 500 14px/1.4 var(--sans); color: var(--ink-3); }
.mx-status a { color: var(--brand-ink); }
.mx-group { margin-top: clamp(40px, 5vw, 72px); }
.mx-group:first-of-type { margin-top: 22px; }
.mx-group-head { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; }
.mx-group-ico { flex: none; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: var(--brand-ink); background: var(--mint); }
.mx-group-head h2 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 740; letter-spacing: -.025em; color: var(--ink); }
.mx-group-head p { margin: 4px 0 0; color: var(--ink-3); font-size: 15.5px; }
.mx-note { display: flex; gap: 10px; align-items: flex-start; margin: -6px 0 20px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--aqua-soft); background: var(--aqua-2); color: var(--ink-2); font-size: 14px; }
.mx-note .ms { font-size: 20px; color: var(--aqua); }
.mx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); }

.mcard { position: relative; isolation: isolate; display: flex; flex-direction: column; border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; background: #fff; box-shadow: var(--sh-1);
  transition: transform var(--d-3) var(--ease), box-shadow var(--d-3) var(--ease), border-color var(--d-3); }
.mcard::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%); transform: translateX(-120%); }
.mcard:hover, .mcard:focus-within { transform: translateY(-4px); border-color: var(--mint-3); box-shadow: var(--sh-soft); }
.mcard:hover::after { transform: translateX(120%); transition: transform 900ms var(--ease-in-out); }
.mcard-media { position: relative; margin: 10px 10px 0; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, var(--mint-2), var(--aqua-2)); }
.mx-grid > .mcard:nth-child(3n+2) .mcard-media { background: linear-gradient(160deg, var(--aqua-2), var(--bg)); }
.mx-grid > .mcard:nth-child(3n) .mcard-media { background: linear-gradient(160deg, var(--cream), var(--mint-2)); }
.mcard-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform 600ms var(--ease); }
.mcard:hover .mcard-media img, .mcard:focus-within .mcard-media img { transform: scale(1.035) translateY(-4px); }
.mcard-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 22px 20px; }
.mcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mcard-ico { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--brand-ink); background: var(--mint-2); border: 1px solid var(--mint); }
.mcard-ico .ms { font-size: 22px; }
.mcard-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.mcard h3 { margin: 2px 0 0; font-size: clamp(20px, 1.6vw, 23px); font-weight: 700; letter-spacing: -.015em; }
.mcard-link { color: var(--ink); text-decoration: none; }
.mcard-link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.mcard-link:hover { color: var(--ink); }
.mcard-link:focus-visible { outline: none; }
.mcard-link:focus-visible::after { outline: 2.5px solid var(--focus); outline-offset: -3px; }
.mcard-line { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.mcard-feats { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
.mcard-feats li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.mcard-feats .ms { font-size: 18px; color: var(--brand-ink); }
.mcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.mcard-plat { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pdot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); color: var(--ink-3); }
.pdot .ms { font-size: 16px; }
.pdot-full { background: var(--mint); color: var(--brand-ink); }
.pdot-partial { background: var(--aqua-soft); color: var(--aqua); }
.pdot-manual { background: var(--amber-soft); color: var(--amber); }
.pdot-none { opacity: .45; }
.mcard-more { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; font-size: 14px; color: var(--brand-ink); }
.mcard-more .ms { font-size: 18px; transition: transform var(--d-2) var(--ease); }
.mcard:hover .mcard-more .ms { transform: translateX(3px); }

/* Price chips: only from real plan, add-on and product data */
.pchip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 8px; border-radius: var(--r-pill); font: 600 12px/1.15 var(--sans); white-space: nowrap; border: 1px solid transparent; }
.pchip .ms { font-size: 15px; }
.pchip-free { background: var(--mint); color: var(--brand-ink); border-color: var(--mint-3); }
.pchip-plan { background: var(--aqua-soft); color: var(--aqua); border-color: #c6e6ee; }
.pchip-addon { background: var(--cream-2); color: var(--amber); border-color: #eedcb8; }
.pchip-product { background: var(--amber-soft); color: var(--amber); border-color: #f3dcb3; }

.mx-empty { text-align: center; padding: 64px 16px; color: var(--ink-2); }
.mx-empty > .ms { font-size: 44px; color: var(--ink-3); }
.mx-empty h2 { font-size: 26px; margin: 12px 0 8px; color: var(--ink); }

/* Who it is for: expanding panels in soft tints (widgets.css .w-expand) */
.mx-who { padding: var(--sec) 0; background: #fff; }
.mx-who-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px 64px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.mx-who-head h2 { margin: 0; font-size: clamp(34px, 4.4vw, 60px); font-weight: 740; letter-spacing: -.03em; line-height: 1.02; max-width: 16ch; }
.mx-who-head p { margin: 0; font-size: var(--t-lede); line-height: 1.55; color: var(--ink-2); }
.mx-ex-0 { --ex-tint: var(--mint); }
.mx-ex-1 { --ex-tint: var(--aqua-soft); --ex-ink: var(--aqua); }
.mx-ex-2 { --ex-tint: var(--cream-2); --ex-ink: var(--amber); }
.mx-ex-3 { --ex-tint: #e6f6ee; }

/* The fly-in: a modal dialog covering the screen (soft dim layer) with a white panel sliding in from the right */
html.flyin-lock { overflow: hidden; }
.flyin { position: fixed; inset: 0; z-index: 100; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden;
  background: rgba(11, 21, 38, 0); color: var(--ink); transition: background var(--d-3) var(--ease); }
.flyin::backdrop { background: transparent; }
.flyin.is-open { background: rgba(11, 21, 38, .32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.flyin-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(640px, 100%); display: flex; flex-direction: column;
  background: var(--grad-aurora), #fff; border-left: 1px solid var(--line);
  box-shadow: -40px 0 80px -30px rgba(11, 21, 38, .35); transform: translateX(104%); transition: transform var(--d-3) var(--ease); }
.flyin-panel::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 3px; background: var(--grad-brand); opacity: .9; }
.flyin.is-open .flyin-panel { transform: none; }
.flyin-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; text-decoration: none;
  background: #fff; border: 1px solid var(--line-2); color: var(--ink); box-shadow: var(--sh-1); transition: background var(--d-1), color var(--d-1); }
.flyin-close:hover { background: var(--ink); color: #fff; }
.flyin-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 30px clamp(18px, 4vw, 36px) 0; }
.fly-head { padding-right: 46px; }
.fly-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 600 14px/1.2 var(--sans); color: var(--ink-3); }
.fly-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand); color: #fff; }
.fly-ico .ms { font-size: 21px; }
.fly-title { font-size: clamp(32px, 3.4vw, 44px); font-weight: 760; letter-spacing: -.035em; line-height: 1.02; color: var(--ink); margin: 0 0 10px; }
.fly-promise { font-size: 18px; line-height: 1.5; color: var(--ink-2); margin: 0 0 14px; }
.fly-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.fly-shot { margin: 22px 0 6px; padding: 14px 14px 0; border-radius: 20px; overflow: hidden; background: linear-gradient(160deg, var(--mint), var(--aqua-soft)); }
.fly-shot img { display: block; width: 100%; height: auto; border-radius: 12px 12px 0 0; box-shadow: 0 20px 40px -24px rgba(11, 50, 40, .45); }
.fly-shot figcaption { margin: 0 -14px; padding: 8px 14px; font: 500 12.5px/1.3 var(--sans); color: var(--ink-3); background: #fff; }
.fly-sec { margin: 30px 0; }
.fly-sec h3 { margin: 0 0 12px; font: 720 20px/1.2 var(--display); letter-spacing: -.01em; color: var(--ink); }
.fly-sec > p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.fly-ps { display: grid; gap: 10px; }
.fly-ps-card { padding: 18px 20px; border-radius: var(--r); border: 1px solid var(--line); background: #fff; }
.fly-ps-card.is-solution { border-color: var(--mint); background: var(--mint-2); }
.fly-ps-label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; font: 650 13px/1 var(--sans); color: var(--coral); }
.fly-ps-label .ms { font-size: 16px; }
.is-solution .fly-ps-label { color: var(--brand-ink); }
.fly-ps-card > b { display: block; font: 680 17px/1.3 var(--display); color: var(--ink); margin-bottom: 6px; }
.fly-ps-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.fly-ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink-2); }
.fly-ticks li { padding-left: 22px; position: relative; }
.fly-ticks li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-bright); }
.fly-steps { counter-reset: s; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fly-steps li { counter-increment: s; position: relative; padding-left: 38px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.fly-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 650 12.5px var(--sans); color: #fff; background: var(--ink); }
.fly-steps b { display: block; color: var(--ink); font-weight: 650; }
.fly-feats, .fly-needs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fly-feats li, .fly-needs li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.fly-feats b, .fly-needs b { display: block; font-size: 15px; font-weight: 650; color: var(--ink); }
.fly-feat-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--mint); color: var(--brand-ink); }
.fly-feat-ico .ms { font-size: 19px; }
.fly-needs > li > .ms { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 19px; background: var(--aqua-soft); color: var(--aqua); }
.fly-plat { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.fly-plat li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 12px 14px; }
.fly-plat li + li { border-top: 1px solid var(--line); }
.fly-plat-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 15px; color: var(--ink); }
.fly-plat-name .ms { font-size: 19px; color: var(--ink-3); }
.fly-plat small { grid-column: 1 / -1; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.pstate { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: var(--r-pill); font: 600 12px/1 var(--sans); background: var(--bg-2); color: var(--ink-2); }
.pstate .ms { font-size: 15px; }
.pstate-full { background: var(--mint); color: var(--brand-ink); }
.pstate-partial { background: var(--aqua-soft); color: var(--aqua); }
.pstate-manual { background: var(--amber-soft); color: var(--amber); }
.fly-cost-list { list-style: none; margin: 0 0 10px; padding: 16px 18px; display: grid; gap: 10px; border-radius: var(--r); border: 1px solid var(--mint); background: var(--mint-2); }
.fly-cost-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.fly-cost-list .ms { font-size: 20px; color: var(--brand-ink); }
.fly-cost-list b { color: var(--ink); }
.fly-cost .fine { margin: 0; color: var(--ink-3); }
.fly-actions { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px calc(-1 * clamp(18px, 4vw, 36px)) 0;
  padding: 14px clamp(18px, 4vw, 36px) calc(14px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--line); }
.fly-actions .btn-primary { box-shadow: var(--sh-glow); }
.fly-more { margin-left: auto; }
.fly-note { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--ink-3); }

@media (max-width: 1100px) {
  .mx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-tab-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-padding: 0 16px; margin: 0 calc(-1 * clamp(16px, 4vw, 40px)); padding: 12px clamp(16px, 4vw, 40px); }
}
@media (max-width: 900px) {
  .mx-who-head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mx-hero { padding-top: calc(64px + 40px); }
  .mx-tabs { top: 64px; }
  .mx-search { flex-wrap: wrap; }
  .mx-q { flex-basis: 100%; }
  .mx-for { flex: 1; }
  .mx-for select { width: 100%; border-left: 0; border-top: 1px solid var(--line); }
  .mx-search .btn { flex: 1; }
  .mx-grid { grid-template-columns: minmax(0, 1fr); }
  .mx-group-head { align-items: flex-start; }
  .fly-actions .btn { flex: 1 1 100%; }
  .fly-more { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-hero::after { animation: none; }
  .mcard, .mcard-media img, .mcard-more .ms, .flyin, .flyin-panel, .mx-tab, .mx-search { transition: none; }
  .mcard:hover, .mcard:focus-within { transform: none; }
  .mcard:hover .mcard-media img, .mcard:focus-within .mcard-media img { transform: none; }
  .mcard::after { display: none; }
  .flyin-panel { transform: none; }
  .flyin:not(.is-open) .flyin-panel { opacity: 0; }
  .mx-shot { animation: none; }
}

/* Hero stage (wide screens): three real module screens layered in white frames, gently floating (not under reduced motion) */
.mx-stage { display: none; }
@media (min-width: 1101px) {
  .mx-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; }
  .mx-stage { display: block; position: relative; height: 460px; perspective: 1400px; }
  .mx-stage::before { content: ""; position: absolute; inset: 40px -20px 10px 30px; border-radius: 36px; background: linear-gradient(160deg, var(--mint), var(--aqua-soft)); }
  .mx-shot { position: absolute; margin: 0; width: 360px; padding: 6px; border-radius: 18px; overflow: hidden; background: #fff;
    box-shadow: 0 0 0 1px rgba(11, 21, 38, .06), 0 40px 70px -36px rgba(11, 50, 40, .5); animation: mx-float 9s var(--ease-in-out) infinite alternate; }
  .mx-shot img { display: block; width: 100%; height: auto; border-radius: 13px; }
  .mx-shot figcaption { display: flex; align-items: center; gap: 6px; padding: 8px 8px 4px; font: 600 12.5px var(--sans); color: var(--ink-2); }
  .mx-shot figcaption .ms { font-size: 16px; color: var(--brand-ink); }
  .mx-shot-1 figcaption { visibility: hidden; }
  .mx-shot-1 { left: 0; top: 24px; transform: rotateY(14deg) rotateX(4deg); z-index: 1; opacity: .85; }
  .mx-shot-2 { right: 0; top: 0; transform: rotateY(-10deg) rotateX(3deg); z-index: 2; animation-delay: -3s; }
  .mx-shot-3 { left: 60px; bottom: 0; transform: rotateY(6deg) rotateX(-2deg); z-index: 3; animation-delay: -6s; }
}
@keyframes mx-float { to { translate: 0 -12px; } }