/* MAG Box IPTV design system, prefix mbx-. Concept: the activation timeline (portal, MAC, done). See ../DESIGN.md */
:root{--bg:#fbf7ff;--ink:#1a0b2e;--a:#d946ef;--ad:#cf17eb;--a2:#e688f5;--paper:#fff;--tint:#f4ecfd;--line:#e3d4f2;--mute:#4f4064;--ink2:#241038;--edge:#3d2758;--on-ink:#fbf7ff;--mute-ink:#cfc2e2;--r:4px 22px 22px 22px;--sh:8px 8px 0 var(--a2);--fd:"Big Shoulders Display","Arial Narrow","Roboto Condensed",Impact,sans-serif;--fb:Hind,"Segoe UI",Arial,sans-serif;--gut:16px;--sec:clamp(64px,9vw,120px)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--fb);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{font-family:var(--fd);font-weight:800;line-height:1;margin:0 0 .5em;text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
h2{font-size:clamp(2.125rem,1.5rem + 2.6vw,3.5rem);font-weight:900}
h3{font-size:1.625rem}
p{margin:0 0 1em}
a{color:inherit}
ul,ol{margin:0 0 1em}
[id]{scroll-margin-top:124px}
:focus-visible{outline:3px solid var(--ad);outline-offset:3px}
.mbx-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mbx-skip{position:absolute;left:-9999px;top:8px;z-index:60;padding:10px 16px;background:var(--ink);color:var(--on-ink);border-radius:8px;font-weight:700}
.mbx-skip:focus{left:16px}
.mbx-wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gut)}
.mbx-link,.mbx-prose a,.mbx-a a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--a);text-decoration-thickness:2px;text-underline-offset:3px}
.mbx-center{text-align:center}
.mbx-mt{margin-top:clamp(28px,4vw,48px)}
.mbx-muted{color:var(--mute)}
.mbx-hl{color:var(--ad)}

/* header */
.mbx-header{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:2px solid var(--ink)}
.mbx-header-in{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand cta" "nav nav";align-items:center;column-gap:10px;padding-top:8px}
.mbx-brand{grid-area:brand;display:inline-flex;align-items:center;gap:9px;padding-block:6px;color:var(--ink);text-decoration:none;font:900 1.375rem/1 var(--fd);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.mbx-brand-mark{width:32px;height:32px;flex:none}
.mbx-brand em{display:inline-block;margin-left:.12em;padding:.14em .3em .1em .55em;background:var(--a);color:var(--ink);font-style:normal;clip-path:polygon(.32em 0,100% 0,100% 100%,0 100%)}
.mbx-nav{grid-area:nav;margin-top:6px;border-top:1.5px solid var(--line)}
.mbx-nav ul{display:flex;justify-content:space-between;gap:2px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.mbx-nav ul::-webkit-scrollbar{display:none}
.mbx-nav a{display:inline-flex;align-items:center;padding:11px 3px 7px;border-bottom:3px solid transparent;font:600 .9375rem/20px var(--fb);text-decoration:none;white-space:nowrap}
.mbx-nav a[aria-current="page"]{border-bottom-color:var(--a)}
.mbx-header-cta{grid-area:cta;display:flex;align-items:center;gap:8px}
.mbx-header .mbx-btn{white-space:nowrap}
.mbx-header-trial{display:none!important}

/* buttons */
.mbx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 24px;border:2px solid var(--ink);border-radius:12px 12px 12px 3px;background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--ink);font:800 1.1875rem/1.1 var(--fd);letter-spacing:.05em;text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer;transition:transform .18s ease}
.mbx-btn svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.mbx-btn--primary{background:var(--a)}
.mbx-btn--ink{background:var(--ink);color:var(--on-ink);box-shadow:4px 4px 0 var(--a)}
.mbx-btn--ghost{background:var(--paper)}
.mbx-btn--light{background:var(--bg);color:var(--ink);border-color:var(--bg);box-shadow:4px 4px 0 var(--a)}
.mbx-btn--sm{min-height:40px;padding:6px 13px;font-size:1rem;box-shadow:3px 3px 0 var(--ink)}
.mbx-btn--lg{min-height:62px;padding:12px 32px;font-size:1.375rem}
.mbx-btn--block{display:flex;width:100%}
.mbx-actions{display:flex;flex-direction:column;align-items:stretch;gap:14px}
.mbx-actions--center{align-items:center}
.mbx-textlink{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--a);text-decoration-thickness:3px;text-underline-offset:5px}

/* kicker, heads, badges, tags */
.mbx-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:6px 14px 5px 10px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font:700 .9375rem/1.15 var(--fd);letter-spacing:.14em;text-transform:uppercase}
.mbx-kicker::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--a);box-shadow:0 0 0 3px var(--tint)}
.mbx-kicker.is-wait::before{background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink)}
.mbx-kicker.is-on::before{animation:mbx-pop .55s cubic-bezier(.3,1.6,.5,1)}
.mbx-head{max-width:780px;margin-bottom:clamp(28px,4vw,48px)}
.mbx-head h2{margin-bottom:.35em}
.mbx-head--center{margin-inline:auto;text-align:center}
.mbx-lede{font-size:1.1875rem;line-height:1.55;color:var(--mute)}
.mbx-head .mbx-lede:last-child{margin-bottom:0}
.mbx-badge{display:inline-flex;align-items:center;min-height:28px;padding:5px 12px 4px 17px;background:var(--a2);color:var(--ink);font:800 1rem/1 var(--fd);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%)}
.mbx-tag{display:inline-block;padding:5px 9px 4px;border-radius:6px;background:var(--a);color:var(--ink);font:700 .8125rem/1 var(--fb);letter-spacing:.1em;text-transform:uppercase}

/* sections */
.mbx-sec{padding-block:var(--sec)}
.mbx-sec--paper{background:var(--paper);border-block:2px solid var(--ink)}
.mbx-sec--paper+.mbx-sec--paper{border-top:0}
.mbx-sec--tint{background:var(--tint)}
.mbx-sec--ink{position:relative;background:var(--ink);color:var(--on-ink)}
.mbx-sec--perf::before{content:"";position:absolute;left:0;right:0;top:-1px;height:12px;background:radial-gradient(circle at 12px 0,var(--bg) 7px,transparent 7.5px) 0 0/24px 12px repeat-x}
.mbx-sec--ink .mbx-lede,.mbx-sec--ink .mbx-muted{color:var(--mute-ink)}
.mbx-sec--ink .mbx-hl{color:var(--a)}
.mbx-sec--ink .mbx-link,.mbx-sec--ink .mbx-prose a,.mbx-sec--ink .mbx-textlink{color:var(--a2);text-decoration-color:var(--a2)}
.mbx-sec--ink .mbx-kicker,.mbx-final .mbx-kicker{background:transparent;border-color:var(--a2);color:var(--on-ink)}
.mbx-sec--ink .mbx-kicker::before,.mbx-final .mbx-kicker::before{box-shadow:0 0 0 3px var(--edge)}
.mbx-sec--ink .mbx-btn--ghost,.mbx-final .mbx-btn--ghost{background:transparent;color:var(--on-ink);border-color:var(--a2);box-shadow:4px 4px 0 var(--a2)}

/* cards and grids */
.mbx-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2vw,24px);margin:0;padding:0;list-style:none}
.mbx-card{position:relative;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r);padding:clamp(20px,2.4vw,28px);box-shadow:var(--sh)}
.mbx-card h3{margin-bottom:.4em}
.mbx-card p:last-child,.mbx-card ul:last-child{margin-bottom:0}
.mbx-card--flat{box-shadow:none}
.mbx-card--tint{background:var(--tint);box-shadow:none;border-style:dashed}
.mbx-sec--ink .mbx-card{background:var(--ink2);color:var(--on-ink);border-color:var(--edge);box-shadow:6px 6px 0 var(--a)}
.mbx-sec--ink .mbx-card p{color:var(--mute-ink)}
.mbx-ico{display:grid;place-items:center;width:52px;height:52px;margin-bottom:16px;border:2px solid var(--ink);border-radius:14px 14px 14px 3px;background:var(--tint)}
.mbx-ico svg{width:28px;height:28px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mbx-sec--ink .mbx-ico{background:var(--a);border-color:var(--a)}
.mbx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1em;padding:0;list-style:none}
.mbx-chips li{padding:6px 12px 5px;border:1.5px solid var(--ink);border-radius:8px;background:var(--paper);font:600 .9375rem/1.25 var(--fb)}
.mbx-sec--ink .mbx-chips li{background:transparent;border-color:var(--a2);color:var(--on-ink)}
.mbx-models{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 1.2em;padding:0;list-style:none}
.mbx-models li{padding:8px 12px 6px;border:2px solid var(--ink);border-radius:6px;background:var(--paper);box-shadow:3px 3px 0 var(--a2);font:800 1.25rem/1 var(--fd);letter-spacing:.04em;text-transform:uppercase}
.mbx-list{display:grid;gap:10px;margin:0 0 1em;padding:0;list-style:none}
.mbx-list li{position:relative;padding-left:34px}
.mbx-list li::before{content:"";position:absolute;left:0;top:.15em;width:22px;height:22px;border-radius:50%;background:var(--a)}
.mbx-list li::after{content:"";position:absolute;left:8px;top:calc(.15em + 4px);width:6px;height:11px;border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.mbx-ol{display:grid;gap:12px;margin:0 0 1em;padding:0;list-style:none;counter-reset:mbx-ol}
.mbx-ol>li{position:relative;padding-left:46px;counter-increment:mbx-ol}
.mbx-ol>li::before{content:counter(mbx-ol);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--ink);border-radius:9px 9px 9px 2px;background:var(--a);color:var(--ink);font:800 1.125rem/1 var(--fd)}
.mbx-note{margin:0 0 1em;padding:14px 18px;border-left:5px solid var(--a);border-radius:0 14px 14px 0;background:var(--tint)}
.mbx-note p:last-child{margin:0}

/* hero */
.mbx-hero{position:relative;padding-block:clamp(36px,6vw,92px) clamp(56px,8vw,112px);border-bottom:2px dashed var(--ink);background:radial-gradient(56% 52% at 86% 34%,rgba(230,136,245,.3),transparent 70%),radial-gradient(circle,rgba(26,11,46,.08) 1.2px,transparent 1.7px) 0 0/22px 22px}
.mbx-hero-in{display:grid;gap:44px;align-items:center}
.mbx-hero h1{font-size:clamp(2.875rem,1.4rem + 5.6vw,5.75rem);font-weight:900;line-height:.92;margin-bottom:22px;letter-spacing:.005em}
.mbx-hero-sub{max-width:36em;font-size:clamp(1.125rem,1rem + .5vw,1.3125rem);line-height:1.55;color:var(--mute)}
.mbx-hero-sub b{color:var(--ink)}
.mbx-hero .mbx-actions{margin-top:28px}
.mbx-hero-note{margin:18px 0 0;font-size:1rem;color:var(--mute)}
.mbx-hero-note b{color:var(--ink)}

/* the activation timeline card (signature) */
.mbx-act{position:relative;width:100%;max-width:540px;justify-self:center;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);box-shadow:12px 12px 0 var(--a2)}
.mbx-act.is-live{animation:mbx-land .7s cubic-bezier(.3,1.5,.5,1)}
.mbx-act-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--ink);color:var(--on-ink);border-radius:1px 19px 0 0}
.mbx-act-bar p{margin:0;font:800 1.125rem/1.1 var(--fd);letter-spacing:.12em;text-transform:uppercase}
.mbx-tl{margin:0;padding:22px 14px 4px;list-style:none}
.mbx-tl-step{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;padding-bottom:20px}
.mbx-tl-step:not(:last-child)::before,.mbx-tl-step:not(:last-child)::after{content:"";position:absolute;left:18.5px;top:44px;bottom:2px;width:3px;border-radius:2px;background:var(--line)}
.mbx-tl-step:not(:last-child)::after{background:var(--a);transform-origin:50% 0;transition:transform .7s cubic-bezier(.6,0,.3,1)}
.mbx-tl-node{position:relative;display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--ink);border-radius:50%;background:var(--paper)}
.mbx-tl-node::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--a);transition:opacity .3s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.mbx-tl-node::after{content:"";position:absolute;inset:-8px;border:2px solid var(--a);border-radius:50%;opacity:0}
.mbx-tl-node b{position:absolute;font:900 1.25rem/1 var(--fd);opacity:0;transition:opacity .2s}
.mbx-tl-node svg{position:relative;width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:0;transition:stroke-dashoffset .45s ease .15s}
.mbx-tl-k{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:7px 0 6px;font:800 1.375rem/1 var(--fd);letter-spacing:.06em;text-transform:uppercase}
.mbx-st{display:grid;justify-items:end;font:700 .8125rem/1 var(--fb);letter-spacing:.08em}
.mbx-st>span{grid-area:1/1;padding:5px 8px 4px;border-radius:6px;transition:opacity .25s}
.mbx-st-ok{background:var(--ink);color:var(--on-ink)}
.mbx-tl-step:last-child .mbx-st-ok{background:var(--a);color:var(--ink)}
.mbx-st-wait{display:none;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink)}
.mbx-tl-t{margin:0 0 10px;font-size:1rem;line-height:1.45;color:var(--mute)}
.mbx-act-foot{margin:0;padding:12px 16px 14px;border-top:1.5px dashed var(--line);font-size:.9375rem;line-height:1.45;color:var(--mute)}
.mbx-mac{white-space:nowrap;font-size:clamp(1.375rem,1rem + 1.5vw,2rem)!important}
.mbx-type-vis{position:relative;display:inline-block}
.mbx-ch{display:inline-block;opacity:0;transform:translateY(.22em);transition:opacity .12s,transform .2s}
.mbx-ch.on{opacity:1;transform:none}
.mbx-caret{display:none;position:absolute;left:0;top:.06em;bottom:.1em;width:3px;border-radius:2px;background:var(--a);transition:transform .1s;animation:mbx-blink .8s steps(1) infinite}
.is-typing .mbx-caret{display:block}
.mbx-act[data-state] .mbx-st-wait{display:block}
.mbx-act[data-state] .mbx-tl-step:not(.is-done) .mbx-st-ok,.mbx-act[data-state] .is-done .mbx-st-wait{opacity:0}
.mbx-act[data-state] .mbx-tl-step:not(.is-done) .mbx-tl-node::before{opacity:0;transform:scale(.3)}
.mbx-act[data-state] .mbx-tl-step:not(.is-done) .mbx-tl-node b{opacity:1}
.mbx-act[data-state] .mbx-tl-step:not(.is-done) .mbx-tl-node svg{stroke-dashoffset:24}
.mbx-act[data-state] .mbx-tl-step:not(.is-done)::after{transform:scaleY(0)}
.mbx-tl-step.is-active .mbx-tl-node::after{animation:mbx-halo 1.1s ease-out infinite}

/* fields: portal URL / MAC readouts */
.mbx-fields{display:grid;gap:12px;margin:0 0 1em}
.mbx-field{display:flex;flex-direction:column;gap:6px;margin:0;padding:10px 12px 9px;border:2px dashed var(--ink);border-radius:10px;background:var(--tint)}
.mbx-field-l{font:700 .8125rem/1.1 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.mbx-field-v{font:800 1.25rem/1.1 var(--fd);letter-spacing:.05em;overflow-wrap:anywhere}

/* done mark: check draws when it scrolls in */
.mbx-done{display:grid;place-items:center;flex:none;width:clamp(96px,12vw,136px);height:clamp(96px,12vw,136px);border:3px solid var(--ink);border-radius:50%;background:var(--a);box-shadow:0 0 0 10px var(--tint)}
.mbx-done svg{width:52%;height:52%;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:0;transition:stroke-dashoffset .7s ease .2s}
.mbx-done.is-wait svg{stroke-dashoffset:24}
.mbx-sec--ink .mbx-done,.mbx-final .mbx-done{box-shadow:0 0 0 10px var(--edge);border-color:var(--a)}

/* steps (how it works): the timeline pattern in the page */
.mbx-steps{display:grid;gap:28px;margin:0;padding:0;list-style:none;counter-reset:mbx-step}
.mbx-step{position:relative;min-height:52px;padding-left:70px;counter-increment:mbx-step}
.mbx-step h3{margin:10px 0 .35em}
.mbx-step p{margin:0}
.mbx-step p+p{margin-top:.6em}
.mbx-step:not(:last-child)::before,.mbx-step:not(:last-child)::after{content:"";position:absolute;left:23.5px;top:52px;bottom:-26px;width:3px;border-radius:2px;background:var(--line)}
.mbx-step:not(:last-child)::after{background:var(--a);transform-origin:50% 0;transition:transform .5s cubic-bezier(.6,0,.3,1)}
.mbx-node{position:absolute;left:0;top:0;z-index:1;display:grid;place-items:center;width:50px;height:50px;border:2px solid var(--ink);border-radius:50%;background:var(--a)}
.mbx-node::before{content:counter(mbx-step);font:900 1.5rem/1 var(--fd);color:var(--ink)}
.mbx-node::after{content:"";position:absolute;inset:-7px;border:2px solid var(--a);border-radius:50%;opacity:0}
.mbx-steps[data-run] .mbx-step:not(.is-done) .mbx-node{background:var(--paper)}
.mbx-steps[data-run] .mbx-step:not(.is-done)::after{transform:scaleY(0)}
.mbx-steps[data-run] .is-done .mbx-node::after{animation:mbx-halo .8s ease-out 1}
.mbx-steps[data-run] .is-done .mbx-node{animation:mbx-pop .5s cubic-bezier(.3,1.6,.5,1)}
.mbx-sec--ink .mbx-node{border-color:var(--a)}
.mbx-sec--ink .mbx-step::before{background:var(--edge)}
.mbx-sec--ink .mbx-steps[data-run] .mbx-step:not(.is-done) .mbx-node{background:var(--ink2)}
.mbx-sec--ink .mbx-steps[data-run] .mbx-step:not(.is-done) .mbx-node::before{color:var(--on-ink)}
.mbx-sec--ink .mbx-step p{color:var(--mute-ink)}

/* stats / trust bar */
.mbx-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:1.5px dashed currentColor}
.mbx-stat{padding:18px 12px 16px;border-bottom:1.5px dashed currentColor}
.mbx-stat:nth-child(odd){border-right:1.5px dashed currentColor}
.mbx-stat-n{display:block;font:900 clamp(2.25rem,1.6rem + 2.4vw,3.5rem)/1 var(--fd);letter-spacing:.01em;color:var(--ad)}
.mbx-stat-l{display:block;margin-top:6px;font-size:1rem;line-height:1.35}
.mbx-sec--ink .mbx-stats{color:var(--edge)}
.mbx-sec--ink .mbx-stat-n{color:var(--a2)}
.mbx-sec--ink .mbx-stat-l{color:var(--mute-ink)}

/* sports tiles */
.mbx-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 1.5em;padding:0;list-style:none}
.mbx-tile{position:relative;margin:0;overflow:hidden;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r)}
.mbx-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .5s ease}
.mbx-tile figcaption{padding:10px 12px 12px;border-top:2px solid var(--ink)}
.mbx-tile figcaption b{display:block;font:800 1.375rem/1 var(--fd);text-transform:uppercase;letter-spacing:.02em}
.mbx-tile figcaption span{display:block;margin-top:5px;font-size:.9375rem;line-height:1.35;color:var(--mute)}
.mbx-tile-tag{position:absolute;top:10px;left:10px;z-index:1;padding:5px 8px 4px;border-radius:4px;background:var(--a);color:var(--ink);font:800 .9375rem/1 var(--fd);letter-spacing:.06em;text-transform:uppercase}

/* worldwide */
.mbx-world{display:grid;gap:24px;align-items:start}
.mbx-regions{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.mbx-region{padding:16px 18px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r)}
.mbx-region h3{font-size:1.375rem;margin-bottom:.3em}
.mbx-region p{margin:0;font-size:1rem;line-height:1.45;color:var(--mute)}
.mbx-world-art{margin:0;overflow:hidden;background:var(--ink);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh)}
.mbx-world-art img{width:100%}
.mbx-world-art figcaption{padding:10px 14px;color:var(--on-ink);font-size:.9375rem}
.mbx-strip{display:flex;align-items:center;gap:16px;margin-top:24px;padding:14px 18px;background:var(--paper);color:var(--ink);border:2px dashed var(--ink);border-radius:14px}
.mbx-strip img{flex:none;width:72px}
.mbx-strip p{margin:0}

/* marquee: [data-speed] + data-mbx-loop, two identical groups */
.mbx-marquee{--dur:48s;position:relative;overflow:hidden;padding-block:6px 12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.mbx-marquee+.mbx-marquee{margin-top:12px}
.mbx-marquee:focus-visible{outline-offset:-3px}
.mbx-marquee-track{display:flex;width:max-content;animation:mbx-slide var(--dur) linear infinite}
.mbx-marquee--rev .mbx-marquee-track{animation-direction:reverse}
.mbx-marquee:hover .mbx-marquee-track,.mbx-marquee:focus-within .mbx-marquee-track,.mbx-marquee.is-off .mbx-marquee-track{animation-play-state:paused}
.mbx-marquee-group{flex:none;display:flex;align-items:center;gap:14px;margin:0;padding:0 14px 0 0;list-style:none}
.mbx-poster,.mbx-cover{flex:none;width:150px}
.mbx-poster img,.mbx-cover img{width:100%;aspect-ratio:342/513;object-fit:cover;border:2px solid var(--ink);border-radius:10px 10px 10px 2px}
.mbx-cover img{aspect-ratio:313/512}
.mbx-logo{flex:none;display:flex;align-items:center;justify-content:center;width:172px;height:84px;padding:16px 20px;background:var(--paper);border:2px solid var(--ink);border-radius:12px}
.mbx-logo img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.mbx-marquee-note{margin:14px 0 0;font-size:.9375rem;color:var(--mute)}
.mbx-sec--ink .mbx-marquee-note{color:var(--mute-ink)}
.mbx-sec--ink .mbx-poster img,.mbx-sec--ink .mbx-cover img{border-color:var(--edge)}

/* pricing */
.mbx-plans{display:grid;gap:22px;margin:0;padding:0;list-style:none}
.mbx-plan{position:relative;display:flex;flex-direction:column;padding:24px 22px 22px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh)}
.mbx-plan::after{content:"";position:absolute;top:18px;right:20px;width:58px;height:14px;opacity:.75;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px,currentColor 4px 5px,transparent 5px 8px,currentColor 8px 11px,transparent 11px 13px)}
.mbx-plan-top{display:flex;align-items:center;gap:8px;min-height:30px;margin-bottom:14px;padding-right:66px}
.mbx-plan-term{margin:0;font:900 2rem/1 var(--fd);text-transform:uppercase}
.mbx-plan-price{margin:12px 0 4px;font:900 clamp(3rem,2.4rem + 2vw,3.75rem)/1 var(--fd);letter-spacing:-.005em}
.mbx-plan-month{margin:0 0 16px;font-weight:600;color:var(--mute)}
.mbx-plan .mbx-list{margin-bottom:22px;font-size:1rem}
.mbx-plan .mbx-btn{margin-top:auto}
.mbx-plan--pick{background:var(--ink);color:var(--on-ink);box-shadow:8px 8px 0 var(--a)}
.mbx-plan--pick .mbx-plan-month{color:var(--mute-ink)}
.mbx-plan--pick .mbx-badge{background:var(--a)}
.mbx-plan-flag{position:absolute;top:-15px;left:20px;margin:0;padding:6px 10px 5px;border:2px solid var(--ink);border-radius:6px;background:var(--a2);color:var(--ink);font:800 .9375rem/1 var(--fd);letter-spacing:.1em;text-transform:uppercase}
.mbx-plans-note{margin:30px 0 0;text-align:center}

/* trial teaser ticket */
.mbx-ticket{position:relative;display:grid;gap:24px;padding:clamp(24px,4vw,48px);background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:18px;box-shadow:var(--sh)}
.mbx-ticket::before,.mbx-ticket::after{content:"";position:absolute;top:50%;left:-15px;width:28px;height:28px;margin-top:-14px;border:2px solid var(--ink);border-radius:50%;background:var(--bg);clip-path:inset(0 0 0 50%)}
.mbx-ticket::after{left:auto;right:-15px;clip-path:inset(0 50% 0 0)}
.mbx-ticket h2{margin-bottom:.35em}
.mbx-ticket-side{padding-top:24px;border-top:2px dashed var(--ink)}
.mbx-big{margin:0 0 12px;font:900 clamp(3.5rem,2.5rem + 4vw,6rem)/.9 var(--fd);color:var(--ad);text-transform:uppercase}

/* devices */
.mbx-devices{display:grid;gap:28px;align-items:center}
.mbx-frame{margin:0;overflow:hidden;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh)}
.mbx-frame img{width:100%}
.mbx-frame figcaption{padding:10px 14px;border-top:2px solid var(--ink);font-size:.9375rem;color:var(--mute)}
.mbx-sheet{margin:clamp(28px,4vw,44px) 0 0;padding:clamp(12px,2vw,20px);background:var(--paper);border:2px solid var(--ink);border-radius:18px}
.mbx-sheet img{width:100%}
.mbx-sheet figcaption{margin-top:10px;font-size:.9375rem;color:var(--mute)}

/* reviews */
.mbx-reviews{display:grid;gap:22px;margin:0;padding:0;list-style:none}
.mbx-review{display:flex;flex-direction:column;margin:0;padding:22px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh)}
.mbx-review-log{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px;padding-bottom:12px;border-bottom:1.5px dashed var(--line)}
.mbx-stars{display:inline-block;flex:none;width:110px;height:22px;background:var(--ad);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 1.6l2.8 6 6.5.7-4.9 4.5 1.4 6.5L11 16l-5.8 3.3 1.4-6.5-4.9-4.5 6.5-.7z'/%3E%3C/svg%3E") 0 0/22px 22px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 1.6l2.8 6 6.5.7-4.9 4.5 1.4 6.5L11 16l-5.8 3.3 1.4-6.5-4.9-4.5 6.5-.7z'/%3E%3C/svg%3E") 0 0/22px 22px repeat-x}
.mbx-review blockquote{margin:0 0 18px}
.mbx-review blockquote p:last-child{margin:0}
.mbx-review figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:auto}
.mbx-review-name{font:800 1.25rem/1 var(--fd);letter-spacing:.04em;text-transform:uppercase}
.mbx-review-city{font-size:.9375rem;color:var(--mute)}
.mbx-review-box{padding:5px 9px 4px;border:1.5px solid var(--ink);border-radius:6px;font:800 .9375rem/1 var(--fd);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

/* FAQ */
.mbx-faq{display:grid;gap:12px;max-width:900px}
.mbx-head--center+.mbx-faq{margin-inline:auto}
.mbx-q{background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:14px 14px 14px 3px}
.mbx-q summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 18px;list-style:none;cursor:pointer;font:600 1.125rem/1.35 var(--fb)}
.mbx-q summary::-webkit-details-marker{display:none}
.mbx-q summary::after{content:"";flex:none;width:30px;height:30px;border:2px solid var(--ink);border-radius:50%;background:linear-gradient(var(--ink),var(--ink)) 50%/12px 2.5px no-repeat,linear-gradient(var(--ink),var(--ink)) 50%/2.5px 12px no-repeat,var(--a);transition:transform .25s ease}
.mbx-q[open] summary{border-bottom:1.5px dashed var(--line)}
.mbx-q[open] summary::after{transform:rotate(45deg)}
.mbx-a{padding:14px 18px 18px}
.mbx-a p:last-child{margin:0}

/* final CTA */
.mbx-final{display:grid;gap:28px;align-items:center;padding:clamp(28px,5vw,64px);background:var(--ink);color:var(--on-ink);border:2px solid var(--ink);border-radius:var(--r);box-shadow:10px 10px 0 var(--a)}
.mbx-final h2{margin-bottom:.35em}
.mbx-final .mbx-lede{color:var(--mute-ink)}
.mbx-final .mbx-textlink{color:var(--a2);text-decoration-color:var(--a2)}

/* SEO prose */
.mbx-prose{max-width:820px}
.mbx-prose h3{margin-top:1.4em;font-size:1.5rem}
.mbx-prose h3:first-child{margin-top:0}
.mbx-prose ul{padding-left:1.2em}

/* inner pages */
.mbx-page-hero{padding-block:clamp(44px,7vw,96px) clamp(40px,5vw,64px);border-bottom:2px dashed var(--ink);background:radial-gradient(50% 60% at 90% 20%,rgba(230,136,245,.26),transparent 70%)}
.mbx-page-hero h1{max-width:16em;font-size:clamp(2.625rem,1.6rem + 4vw,4.75rem);font-weight:900;line-height:.94;margin-bottom:20px}
.mbx-page-hero .mbx-lede{max-width:40em}
.mbx-page-hero .mbx-actions{margin-top:26px}
.mbx-crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0 0 18px;padding:0;list-style:none;font-size:.9375rem}
.mbx-crumbs a{display:inline-flex;align-items:center;min-height:28px;font-weight:600;text-decoration:underline;text-decoration-color:var(--a);text-underline-offset:3px}
.mbx-split{display:grid;gap:28px;align-items:start}
.mbx-toc{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.mbx-toc a{display:inline-flex;align-items:center;min-height:40px;padding:2px 14px 0;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);font-weight:600;text-decoration:none}
.mbx-dev{position:relative;padding:clamp(20px,3vw,36px);background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh)}
.mbx-dev+.mbx-dev{margin-top:28px}
.mbx-dev--lead{box-shadow:10px 10px 0 var(--a)}
.mbx-dev-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.mbx-dev-head h2{margin:0;font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem)}
.mbx-dev-head .mbx-ico{margin:0;flex:none}
.mbx-contact{display:grid;gap:24px;align-items:start}
.mbx-mail{display:inline-block;margin:6px 0 14px;color:var(--ink);font:900 clamp(1.5rem,1rem + 2.4vw,2.75rem)/1.1 var(--fd);letter-spacing:.01em;text-decoration:underline;text-decoration-color:var(--a);text-decoration-thickness:4px;text-underline-offset:6px;overflow-wrap:anywhere}
.mbx-legal{max-width:820px}
.mbx-legal h2{margin-top:1.4em;font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem)}
.mbx-legal h2:first-child{margin-top:0}
.mbx-updated{display:inline-block;margin:0 0 24px;padding:6px 12px 5px;border:1.5px solid var(--ink);border-radius:8px;background:var(--paper);font-weight:600}
.mbx-planstrip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.mbx-planlink{display:flex;flex-direction:column;gap:6px;min-height:76px;padding:14px 16px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:12px 12px 12px 3px;box-shadow:4px 4px 0 var(--a2);text-decoration:none;transition:transform .18s ease}
.mbx-planlink b{font:900 1.375rem/1 var(--fd);text-transform:uppercase}
.mbx-planlink span{font-weight:600}
.mbx-planlink--pick{background:var(--a);box-shadow:4px 4px 0 var(--ink)}

/* footer */
.mbx-footer{padding-block:56px 26px;background:var(--ink);color:var(--on-ink)}
.mbx-footer-grid{display:grid;gap:32px}
.mbx-brand--light{color:var(--on-ink)}
.mbx-footer p{color:var(--mute-ink)}
.mbx-footer-brand p{max-width:30em;margin:14px 0 0}
.mbx-footer-h{margin:0 0 10px;color:var(--a2)!important;font:800 1.125rem/1 var(--fd);letter-spacing:.14em;text-transform:uppercase}
.mbx-footer ul{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.mbx-footer-nav a{display:inline-flex;align-items:center;min-height:34px;color:var(--on-ink);font-weight:600;text-decoration:none}
.mbx-footer-mail{display:inline-flex;align-items:center;min-height:34px;color:var(--a2);font-weight:600;overflow-wrap:anywhere}
.mbx-footer-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:40px;padding-top:20px;border-top:1.5px solid var(--edge)}
.mbx-footer-base p{margin:0;font-size:.9375rem}
.mbx-motion{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:2px 16px 0;border:1.5px solid var(--a2);border-radius:999px;background:transparent;color:var(--on-ink);font:600 .9375rem/1 var(--fb);cursor:pointer}
.mbx-motion svg{width:14px;height:14px;fill:currentColor}
.mbx-motion[aria-pressed="true"]{background:var(--a2);color:var(--ink)}

/* keyframes: transform / opacity only */
@keyframes mbx-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes mbx-pop{0%{transform:scale(.5)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes mbx-halo{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.5)}}
@keyframes mbx-blink{50%{opacity:0}}
@keyframes mbx-land{0%,100%{transform:translate(0,0)}45%{transform:translate(-5px,-5px)}}

/* pointer-only effects */
@media (hover:hover){
.mbx-btn:hover,.mbx-planlink:hover{transform:translate(-2px,-2px)}
.mbx-btn:active,.mbx-planlink:active{transform:translate(2px,2px)}
.mbx-nav a:hover{border-bottom-color:var(--a)}
.mbx-tile:hover img{transform:scale(1.05)}
.mbx-footer-nav a:hover,.mbx-toc a:hover{text-decoration:underline;text-decoration-color:var(--a)}
.mbx-q summary:hover{background:var(--tint)}
}

/* responsive */
@media (min-width:600px){
.mbx-actions{flex-direction:row;flex-wrap:wrap;align-items:center}
.mbx-grid--2,.mbx-grid--3,.mbx-grid--4,.mbx-regions,.mbx-fields,.mbx-plans{grid-template-columns:repeat(2,minmax(0,1fr))}
.mbx-poster,.mbx-cover{width:170px}
}
@media (min-width:768px){
:root{--gut:24px}
.mbx-header-trial{display:inline-flex!important}
.mbx-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.mbx-stats{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));border-top:0;border-bottom:0}
.mbx-stat{padding:8px 20px;border:0;border-left:1.5px dashed currentColor}
.mbx-stat:nth-child(odd){border-right:0}
.mbx-stat:first-child{border-left:0;padding-left:0}
.mbx-reviews{grid-template-columns:repeat(3,minmax(0,1fr))}
.mbx-steps{grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:28px}
.mbx-step{padding:72px 0 0}
.mbx-step h3{margin-top:0}
.mbx-step:not(:last-child)::before,.mbx-step:not(:last-child)::after{left:54px;right:-28px;top:23.5px;bottom:auto;width:auto;height:3px}
.mbx-step:not(:last-child)::after{transform-origin:0 50%}
.mbx-steps[data-run] .mbx-step:not(.is-done)::after{transform:scaleX(0)}
.mbx-tl{padding:24px 22px 6px}
.mbx-tl-step{grid-template-columns:44px minmax(0,1fr);column-gap:16px}
.mbx-tl-node{width:44px;height:44px}
.mbx-tl-step:not(:last-child)::before,.mbx-tl-step:not(:last-child)::after{left:20.5px;top:48px}
.mbx-act-bar,.mbx-act-foot{padding-inline:22px}
.mbx-planstrip{grid-template-columns:repeat(4,minmax(0,1fr))}
.mbx-footer-grid{grid-template-columns:1.4fr 1fr 1fr}
}
@media (min-width:1024px){
:root{--gut:32px}
[id]{scroll-margin-top:96px}
.mbx-header-in{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand nav cta";column-gap:20px;padding-block:12px}
.mbx-brand{font-size:1.625rem}
.mbx-brand-mark{width:36px;height:36px}
.mbx-nav{justify-self:center;margin:0;border:0}
.mbx-nav ul{gap:6px;overflow:visible}
.mbx-nav a{padding:12px 10px 8px;font-size:1rem}
.mbx-hero-in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px}
.mbx-act{justify-self:end}
.mbx-head--split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:56px;align-items:end;max-width:none}
.mbx-head--split>*{grid-column:1}
.mbx-head--split>.mbx-kicker{justify-self:start}
.mbx-head--split>.mbx-lede{grid-column:2;grid-row:1/span 2;margin-bottom:.4em}
.mbx-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mbx-grid--4,.mbx-plans{grid-template-columns:repeat(4,minmax(0,1fr))}
.mbx-plans{gap:20px}
.mbx-world{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px}
.mbx-devices,.mbx-split{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.mbx-contact{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px}
.mbx-ticket{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:40px}
.mbx-ticket-side{padding:0 0 0 40px;border-top:0;border-left:2px dashed var(--ink)}
.mbx-final{grid-template-columns:auto minmax(0,1fr);gap:48px}
.mbx-prose--cols{max-width:none;columns:2;column-gap:56px}
.mbx-prose--cols h3{break-after:avoid}
.mbx-prose--cols p{break-inside:avoid}
.mbx-poster,.mbx-cover{width:185px}
.mbx-logo{width:196px;height:92px}
}
@media (min-width:1280px){
.mbx-tiles--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.mbx-tiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* motion off: OS setting or the footer Pause motion button */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.mbx-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
.mbx-marquee-group[aria-hidden="true"]{display:none}
}
.motion-off *,.motion-off *::before,.motion-off *::after{animation:none!important;transition:none!important}
.motion-off .mbx-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
.motion-off .mbx-marquee-group[aria-hidden="true"]{display:none}

/* === home additions === */
.mbx-fields.mbx-mt,.mbx-grid.mbx-mt{margin-top:clamp(28px,4vw,48px)}
@media (min-width:1280px){
.mbx-tiles--5{grid-template-columns:repeat(5,minmax(0,1fr))}
}
/* === end home additions === */