@font-face{font-family:'Share Tech Mono';src:url('fonts/ShareTechMono-400.woff2');font-display:swap}
/* Mix Lock marketing identity. Shared by the static marketing pages.
   Gold: primary actions. Cyan: features and links. Blue: depth and surfaces.
   Scoped to ml-marketing so embedded instruments and Lite retain their UI. */
/* ── NAV ── */
nav{background:#0a0a0e;}
.nav-main{display:flex;align-items:stretch;justify-content:space-between;height:62px;padding:0 28px;border-bottom:1px solid var(--border);}
.nav-logo{display:flex;align-items:center;gap:10px;padding-right:24px;border-right:1px solid var(--border);text-decoration:none;}
.nav-logo-wordmark{font-family:'Orbitron',sans-serif;font-size:18px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);}
.nav-tabs{display:flex;align-items:stretch;gap:0;}
.nav-tab{display:flex;align-items:center;padding:0 13px;font-family:'Orbitron',sans-serif;font-weight:800;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);text-decoration:none;border-bottom:3px solid transparent;transition:color .15s,border-color .15s,background .15s;white-space:nowrap;}
.nav-tab:hover,.nav-tab.active{color:var(--text);background:rgba(255,255,255,.05);border-bottom-color:var(--amber);}
.nav-right{display:flex;align-items:center;gap:14px;padding-left:20px;border-left:1px solid var(--border);}
.nav-cta{background:var(--amber);color:#09090c;font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;padding:10px 20px;border-radius:6px;text-decoration:none;letter-spacing:.08em;text-transform:uppercase;transition:opacity .15s;white-space:nowrap;}
.nav-cta:hover{opacity:.85;}
.nav-help{font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);text-decoration:none;transition:color .15s;}
.nav-help:hover,.nav-help.active{color:var(--amber);}
.nav-sub{display:flex;align-items:center;justify-content:center;gap:0;padding:0 28px;background:#0d0d12;border-bottom:1px solid var(--border);height:38px;}
.nav-sub a{display:flex;align-items:center;height:100%;padding:0 12px;font-family:'Orbitron',sans-serif;font-weight:700;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-lo);text-decoration:none;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;}
.nav-sub a:hover,.nav-sub a.sub-active{color:var(--amber);border-bottom-color:var(--amber);}
.nav-sub a.amber{color:var(--amber);}



/* NAV FIT — stops the top nav pushing the page sideways.
   The row carries 7 markup tabs plus 2 injected by js/nav-auth.js, and 4
   right-hand items. Its natural width is ~1606px, so at every viewport from
   the tablet breakpoint (821px) up to ~1605px it overflowed and the whole
   page scrolled horizontally. Three tiers tighten the row, then the tabs
   drop to their own line, and a final guard makes the tab strip scroll
   itself rather than ever widening the document again.
   If a nav item is added or removed, re-check with a 1440px viewport:
   document.documentElement.scrollWidth must equal clientWidth. */
@media (min-width:821px) and (max-width:1620px){
  .nav-main{padding:0 14px;}
  .nav-logo{padding-right:14px;}
  .nav-tab{padding:0 8px;letter-spacing:.09em;}
  .nav-right{gap:9px;padding-left:12px;}
  .nav-cta{padding:10px 13px;}
  .nav-right .nav-cta-demo{padding:9px 11px;}
}
@media (min-width:821px) and (max-width:1400px){
  .nav-tab{padding:0 6px;font-size:9px;letter-spacing:.07em;}
  .nav-cta,.nav-right .nav-cta-demo{font-size:8px;}
}
@media (min-width:821px) and (max-width:1240px){
  /* same wrapped shape the tablet breakpoint already uses */
  .nav-main{height:auto;flex-wrap:wrap;align-items:center;}
  .nav-logo{order:1;padding-right:0;border-right:none;height:52px;flex-shrink:0;min-width:max-content;}
  .nav-right{order:2;margin-left:auto;padding-left:0;border-left:none;gap:8px;height:52px;}
  .nav-tabs{order:3;width:100%;flex-wrap:wrap;height:auto;border-top:1px solid var(--border);padding:4px 2px;flex-shrink:0;}
  .nav-tab{padding:6px 10px;height:auto;line-height:1.4;}
}
.nav-main{min-width:0;}
.nav-tabs{min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;}
.nav-tabs::-webkit-scrollbar{display:none;}
.nav-tab{flex:0 0 auto;}

body.ml-marketing{--bg:#0b121c;--bg2:#111e2c;--bg3:#192938;--border:#2a3b4d;--border-hi:#47627a;--text:#edf4fa;--text-dim:#b3c3d2;--text-lo:#a3b6c7;--cyan:#4cdaff;--amber:#f2c45b;--gold:#f2c45b;--muted:#b3c3d2;--line:#2a3b4d;--mono:'Share Tech Mono',monospace;--ui:'Rajdhani',sans-serif;--heading:'Orbitron',sans-serif;background:radial-gradient(ellipse 1000px 700px at 80% 0,#15304788,transparent),var(--bg);color:var(--text);font-family:var(--ui);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased}
.ml-marketing ::selection{background:#4cdaff44;color:#fff}
.ml-marketing :is(h1,h2,h3){text-wrap:balance}
.ml-marketing :is(p,li){text-wrap:pretty}
.ml-marketing :focus-visible{outline:2px solid var(--cyan)!important;outline-offset:4px!important}
.ml-marketing nav{background:#0b1420}
.ml-marketing .nav-main{max-width:1440px;margin:auto;min-height:68px;height:auto;display:flex;flex-wrap:wrap;align-items:center;padding:0 28px;border-bottom:0;gap:0}
.ml-marketing .nav-logo{height:66px;border:0;padding-right:25px}
.ml-marketing .nav-logo-wordmark{font-size:19px;letter-spacing:.08em}
.ml-marketing .nav-tabs{order:3;flex:1 0 100%;display:flex;flex-wrap:nowrap;justify-content:center;gap:4px;border-top:1px solid var(--border);padding:0;overflow-x:auto}
.ml-marketing .nav-tab{font-family:var(--ui);font-size:15px;font-weight:600;letter-spacing:.025em;text-transform:none;padding:11px 14px;line-height:1.4;border-bottom:2px solid transparent}
.ml-marketing .nav-tab.active{background:#142534;color:var(--cyan);border-bottom-color:var(--cyan)}
.ml-marketing .nav-tab:hover{background:#172b3b;color:#fff;border-bottom-color:var(--cyan)}
.ml-marketing .nav-right{margin-left:auto;height:66px;border:0;padding:0;gap:18px;order:2}
.ml-marketing :is(.nav-help,.nav-cta,.nav-right .nav-cta-demo){font-family:var(--ui);font-size:15px;font-weight:600;text-transform:none;letter-spacing:.02em}
.ml-marketing :is(.nav-cta,.nav-right .nav-cta-demo){padding:8px 18px;border-radius:6px}
.ml-marketing .nav-cta{background:var(--gold);color:#101820}
.ml-marketing .nav-sub{height:auto;min-height:39px;overflow:auto;justify-content:center;background:#0a111a;border-top:1px solid var(--border);padding:0 16px}
.ml-marketing .nav-sub a{font-family:var(--ui);font-size:13px;letter-spacing:.04em;text-transform:none;white-space:nowrap;padding:8px 14px}
.ml-marketing :is(.launch-banner,.launch-banner-live){background:#192532;border-bottom:1px solid #66562e;box-shadow:none}
.ml-marketing :is(.launch-banner-headline,.launch-banner-live .launch-banner-headline){font-family:var(--ui);font-size:15px;letter-spacing:.04em}
.ml-marketing :is(.btn-primary,.price-btn,.res-btn-amber){background:var(--gold);color:#101820;box-shadow:none;border-radius:6px;font-family:var(--ui);font-weight:600;letter-spacing:.025em}
.ml-marketing :is(.btn-primary,.price-btn,.res-btn):hover{filter:brightness(1.08);transform:translateY(-1px)}
.ml-marketing :is(.btn-ghost,.res-btn){font-family:var(--ui);font-size:15px;letter-spacing:.015em;text-transform:none}
.ml-marketing :is(.res-card,.ov-card,.price-card,.faq-item,.gtile){background:linear-gradient(145deg,#142333,#101b28);border-color:var(--border);border-radius:12px;box-shadow:0 12px 32px #0002}
.ml-marketing :is(.res-card,.ov-card,.gtile):hover{border-color:#497087}
.ml-marketing .res-card-body{padding:25px}
.ml-marketing .res-card-desc{font-size:17px;line-height:1.65}
.ml-marketing :is(.res-card-subtitle,.res-card-tag,.res-card-badge){font-size:11px;letter-spacing:.06em}
.ml-marketing :is(.section-label,.res-label,.feat-tag,.res-cat-label){color:var(--cyan);font-size:12px;letter-spacing:.13em}
.ml-marketing :is(.section-title,.res-header h1){letter-spacing:-.035em}
.ml-marketing .hero{padding-top:56px}
.ml-marketing .hero-grid{gap:56px}
.ml-marketing .hero-logo-wrap{max-width:none;margin-bottom:28px}
.ml-marketing .hero-logo-wrap img{width:min(420px,100%);border-radius:16px}
.ml-marketing .hero-main h1{font-size:clamp(30px,3.4vw,48px)!important;line-height:1.15!important;margin-bottom:24px!important}
.ml-marketing .hero-main h1 em{color:var(--cyan)!important}
.ml-marketing .hero-edition-title{font-family:var(--mono);font-size:12px;letter-spacing:.12em;padding:0;border:0;background:none;box-shadow:none;margin-bottom:18px;color:var(--gold)}
.ml-marketing .hero-side{padding-top:8px}
.ml-marketing .hero-side figure{border-radius:12px!important;background:#142232!important;border-color:#34516c!important;box-shadow:none!important}
.ml-marketing footer{background:#09111b;border-top-color:var(--border)}
/* Trance Sub shares the site shell while its product artwork stays blue. */
.ml-marketing.ts-page>nav{border-bottom:1px solid var(--border)}
.ml-marketing.ts-page .hero{max-width:none;text-align:left;padding-top:68px}
.ml-marketing.ts-page .button{background:var(--gold);border-color:var(--gold);color:#101820}
.ml-marketing.ts-page .button:hover{background:#ffdb87}
.ml-marketing.ts-page .eyebrow{color:var(--cyan)}
.ml-marketing.ts-page .brand>span:first-child{color:var(--gold)}
@media(max-width:700px){
.ml-marketing .sticky-header{position:relative}
.ml-marketing .nav-main{padding:0 16px}
.ml-marketing .nav-logo{height:58px;padding-right:0}
.ml-marketing .nav-logo-wordmark{font-size:16px}
.ml-marketing .nav-right{height:58px;gap:10px}
.ml-marketing .nav-help{font-size:13px}
.ml-marketing .nav-right .nav-cta-demo{display:none}
.ml-marketing .nav-cta{font-size:13px;padding:7px 11px}
.ml-marketing .nav-tabs{justify-content:flex-start}
.ml-marketing .nav-tab{padding:10px 12px;font-size:14px}
.ml-marketing .nav-sub{justify-content:flex-start}
.ml-marketing .hero-grid{gap:32px}
.ml-marketing .hero-logo-wrap{max-width:none}
.ml-marketing .hero{padding-top:36px}
.ml-marketing .res-header{padding-top:48px;padding-bottom:32px}
}
@media(max-width:380px){.ml-marketing .nav-right{gap:7px}.ml-marketing .nav-help{font-size:12px}.ml-marketing .nav-logo-wordmark{font-size:14px}.ml-marketing .nav-cta{padding:7px 9px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.ml-marketing *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Editorial content should be readable immediately, including without script. */
.ml-marketing :is(.story-header,.story-body p,.chapter,.pull-quote,.emphasis-strip,.story-list,.story-cta){opacity:1;transform:none;transition:none}
@media(max-width:900px){.ml-marketing .sticky-header{position:relative}}
/* A scrolling row must start at its first link, never centre overflow offscreen. */
@media(max-width:1240px){.ml-marketing .nav-tabs,.ml-marketing .nav-sub{justify-content:flex-start}}

/* Shared type and action scale — September 2026 consistency audit.
   Marketing headings: 48/32/20 desktop, 30/26/18 phone.
   Actions: 16px label, 48px minimum hit area; navigation: 44px minimum. */
.ml-marketing{--ml-title:clamp(30px,3.4vw,48px);--ml-section:clamp(26px,2.3vw,32px);--ml-card:20px;--ml-action:16px}
body.ml-marketing h1,body.ml-marketing .hero-main h1{font-family:var(--heading);font-size:var(--ml-title)!important;font-weight:800;line-height:1.18!important;letter-spacing:-.035em}
.ml-marketing h1 em{color:var(--cyan);font-style:normal}
.ml-marketing :is(.section-title,.video-hero-title,.feat-content h2,.ft-section h2,.ft-feature h2,.ft-cta h2,.cg-cta h2,.res-cat-title,.ts-page h2){font-size:var(--ml-section);line-height:1.25;letter-spacing:-.025em}
.ml-marketing.ts-page h2{font-size:var(--ml-section);line-height:1.25}
.ml-marketing :is(.comm-card h3,.fb-wf-step h3,.track-card h2,.gtile h3,.res-card-title,.faq-contact h3){font-size:var(--ml-card);line-height:1.35;letter-spacing:0}
.ml-marketing :is(.priv-title,.terms-title){font-size:clamp(30px,3vw,38px)!important}
.ml-marketing .page-title{font-size:clamp(26px,3vw,32px)!important}
/* Named action classes only: no inherited restyling of diagram controls,
   media controls, review stars, tabs, checkboxes or destructive actions. */
.ml-marketing :is(.btn-primary,.btn-ghost,.price-btn,.price-btn-live,.res-btn,.cg-btn,.ft-btn,.ft-cta-primary,.ft-cta-ghost,.ml-lite-btn,.cf-submit,.rv-submit,.mailing-submit,.track-cta-btn,.fb-price-btn,.yt-channel-btn,.founder-offer-cta,.button,.secondary,.techno-notify,.faq-contact .btn){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;max-width:100%;padding:11px 22px!important;font-family:var(--ui)!important;font-size:var(--ml-action)!important;font-weight:600!important;line-height:1.4!important;letter-spacing:.02em!important;text-transform:none;white-space:normal;text-align:center;border-radius:6px;box-sizing:border-box;text-decoration:none;box-shadow:none}
.ml-marketing :is(.btn-primary,.price-btn,.price-btn-live,.res-btn-amber,.cg-btn,.ft-btn,.ft-cta-primary,.cf-submit,.rv-submit,.mailing-submit,.track-cta-btn,.fb-price-btn,.founder-offer-cta,.button,.faq-contact .btn){background:var(--gold);color:#101820;border:1px solid var(--gold)}
.ml-marketing :is(.btn-ghost,.res-btn-ghost,.ft-cta-ghost,.ml-lite-btn,.fb-price-btn.ghost,.secondary,.techno-notify){background:transparent;color:var(--text);border:1px solid var(--border-hi)}
.ml-marketing .yt-channel-btn{background:#142635;color:var(--text);border:1px solid var(--border-hi)}
.ml-marketing .btn-danger-ghost{color:#ffa2b2;border-color:#935165}
.ml-marketing :is(.nav-help,.nav-cta,.nav-right .nav-cta-demo){min-height:44px;display:inline-flex;align-items:center;justify-content:center;line-height:1.4}
.ml-marketing .nav-sub a{min-height:44px}
.ml-marketing :is(input[type=email],input[type=text],input[type=password],select){min-height:44px;font-family:var(--ui);font-size:16px}
.ml-marketing :is(.res-header,.comm-hero,.p-hero,.fb-hero,.rv-hero,.faq-header,.vid-header){padding-top:64px;padding-bottom:48px}
.ml-marketing :is(.res-header,.comm-hero,.p-hero,.fb-hero,.rv-hero,.faq-header,.vid-header) .lede{font-size:20px;line-height:1.65}
.ml-marketing :is(.footer-links a,footer>div>a){font-family:var(--ui);font-size:14px;letter-spacing:.02em;display:inline-flex;align-items:center;min-height:44px}
.ml-marketing :is(button:disabled,.button:disabled,.secondary:disabled){cursor:not-allowed;transform:none;filter:none}
@media(max-width:700px){
.ml-marketing{--ml-card:18px}
.ml-marketing :is(.res-header,.comm-hero,.p-hero,.fb-hero,.rv-hero,.faq-header,.vid-header){padding-top:40px;padding-bottom:32px}
.ml-marketing :is(.res-header,.comm-hero,.p-hero,.fb-hero,.rv-hero,.faq-header,.vid-header) .lede{font-size:18px}
}
.ml-marketing :is(.comm-pillar h3,.fb-box h3,.faq-bottom h3){font-size:var(--ml-card);line-height:1.35;letter-spacing:0}
.ml-marketing :is(.comm-pillar p,.fb-box p,.track-card p){font-size:17px;line-height:1.65}
.ml-marketing :is(.comm-form-section h2,.ft-feature h2){font-size:var(--ml-section);line-height:1.25}
.ml-marketing.ml-reference{--panel:var(--bg2);--ink:var(--text)}
.ml-marketing.ml-reference .scope{background:var(--bg2);border-color:var(--border)}
/* Reading content is visible on arrival, not dependent on scrolling scripts. */
.ml-marketing :is(.reveal,.reveal-left){opacity:1;transform:none;transition:none}

/* Trance Sub discovery: same product section on the home and product pages. */
.trance-feature{max-width:1160px;margin:40px auto 72px;padding:40px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;border:1px solid #35566c;border-radius:12px;background:linear-gradient(120deg,#132a3d,#101b28)}
.trance-feature-label{font:12px var(--mono);letter-spacing:.1em;color:var(--cyan);margin:0 0 18px}
.trance-feature h2{font-family:var(--heading);font-size:clamp(26px,2.3vw,32px);line-height:1.25;margin:0 0 20px}
.trance-feature h2 em{font-style:normal;color:var(--cyan)}
.trance-feature-copy>p:not(.trance-feature-label){font-size:18px;line-height:1.6;color:var(--text-dim);margin:0 0 20px}
.trance-feature-copy .trance-feature-facts{font-size:16px!important}
.trance-feature-copy .trance-feature-owner{font-size:15px!important;margin-top:18px!important;margin-bottom:0!important}
.trance-feature-image img{width:100%;height:auto;display:block;border-radius:8px;border:1px solid var(--border-hi)}
@media(max-width:1240px){.trance-feature{margin-left:5%;margin-right:5%}}
@media(max-width:800px){.trance-feature{grid-template-columns:1fr;padding:24px;gap:28px}}