/* ══════════════════════════════════════════════════════════════════════════
   MAI PAGE — the homepage's visual language, for the pages the menu links to.

   Loaded alongside mai-system.css on how-it-works / tools / laws / pricing /
   trust. It provides the three things that made the homepage feel like one
   piece and were missing everywhere else:

     1. the route transition (belt wipe + logo draw) so navigation between
        pages is continuous rather than a hard cut
     2. the same drawer menu, so the menu is identical everywhere
     3. a particle logo mark for page heroes

   Values are written out rather than inherited from tokens: these pages carry
   several different legacy token vocabularies (--v, --v-light, --ui as a FONT
   on some of them), so depending on a shared name is how things silently break.
   ══════════════════════════════════════════════════════════════════════════ */

.mp-root{
  --mp-acc:#a855f7; --mp-acc-hot:#7c3aed; --mp-acc-soft:rgba(168,85,247,.22);
  --mp-ink:#f0f0f8; --mp-ink-2:#a3a6bd; --mp-ink-3:#7a7e96;
  --mp-line:#262038; --mp-bg:#08080c;
  --mp-ease:cubic-bezier(0.16,1,0.3,1); --mp-dur:.45s;
  --mp-mono:'Martian Mono',ui-monospace,monospace;
  --mp-display:'Familjen Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* ── ROUTE / PRELOAD OVERLAY ─────────────────────────────────────────────
   Six belts that lift on first paint and drop back on internal navigation.
   pointer-events:none so it can never trap a click if the JS dies mid-way. */
.mp-overlay{position:fixed;inset:0;z-index:9000;pointer-events:none;display:flex}
.mp-belt{flex:1 1 0;background:#0c0c0f;transform:translateY(0)}
.mp-logo-wrap{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;flex-direction:column;gap:20px}
/* The mark's glyph fills roughly the middle half of its 256 viewBox, so the
   box is sized ~2x the intended optical size. Fills come from gradient defs
   in the SVG — do NOT reintroduce a `path{fill:none}` rule here, it outranks
   the paths' own fill attributes and silently blanks the logo. */
.mp-logo-wrap svg.mai-mark{width:112px;height:112px;overflow:visible;
  filter:drop-shadow(0 0 26px rgba(124,58,237,.42))}
.mp-logo-wrap svg.mai-mark path{stroke:none}
.mp-label{font-family:var(--mp-mono);font-weight:300;font-size:9.5px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--mp-ink-3)}
html.mp-done .mp-overlay{display:none}

/* ── MENU BUTTON ─────────────────────────────────────────────────────────
   Fixed rather than injected into each page's own header markup — those
   headers are five different components and editing all of them is how you
   get five different bugs. */
.mp-menu-btn{position:fixed;top:14px;right:16px;z-index:8000;
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:11px 20px;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;
  background:rgba(8,8,12,.72);color:#fff;cursor:pointer;
  font-family:var(--mp-mono);font-weight:300;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;
  transition:background var(--mp-dur) var(--mp-ease),color var(--mp-dur) var(--mp-ease),
             border-color var(--mp-dur) var(--mp-ease)}
.mp-menu-btn:hover{background:#fff;color:#08080c;border-color:#fff}
.mp-menu-btn i{display:block;width:14px;height:1px;background:currentColor;position:relative;font-style:normal}
.mp-menu-btn i::after{content:'';position:absolute;left:0;top:-4px;width:14px;height:1px;background:currentColor}
/* inside an existing header rather than floating over it */
.mp-menu-btn.mp-inline{position:static;margin-left:12px;flex:0 0 auto;
  background:transparent;border-color:rgba(255,255,255,.24)}
/* non-flex header: pin to its right edge rather than float over the page */
.mp-menu-btn.mp-inline.mp-abs{position:absolute;right:16px;top:50%;
  transform:translateY(-50%);margin-left:0}
@media(max-width:640px){
  .mp-menu-btn{top:10px;right:10px;padding:10px 15px;font-size:9px}
  .mp-menu-btn.mp-inline{padding:9px 13px;font-size:9px;margin-left:8px}
}

/* ── DRAWER (same design as the homepage) ───────────────────────────────── */
.mp-scrim{position:fixed;inset:0;z-index:8500;background:rgba(3,3,6,.72);
  opacity:0;visibility:hidden;transition:opacity .55s var(--mp-ease),visibility 0s linear .55s}
.mp-scrim.on{opacity:1;visibility:visible;transition:opacity .55s var(--mp-ease),visibility 0s}
.mp-drawer{position:fixed;top:0;right:0;bottom:0;width:min(74%,1020px);z-index:8600;
  background:linear-gradient(202deg,#181327 0%,#0c0b12 44%,#08080c 100%)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border-left:1px solid var(--mp-line)!important;
  transform:translateX(100%);display:flex;flex-direction:column;flex-wrap:nowrap!important;
  justify-content:center;padding:78px clamp(26px,3.6vw,60px);
  visibility:hidden;overflow-y:auto}
.mp-drawer::before{content:'';position:absolute;right:-14%;top:-12%;width:64%;aspect-ratio:1;
  pointer-events:none;background:radial-gradient(circle at 50% 50%,
    rgba(168,85,247,.26),rgba(124,58,237,.09) 44%,transparent 70%)}
.mp-drawer::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 80% 0%,#000,transparent 72%);
          mask-image:radial-gradient(120% 90% at 80% 0%,#000,transparent 72%)}
.mp-inner{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,3.4vw,56px);align-items:start}
.mp-eyebrow{position:relative;z-index:1;font-family:var(--mp-mono);font-weight:300;font-size:9px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--mp-ink-3);
  padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--mp-line)}
.mp-list{position:relative;display:flex;flex-direction:column}
.mp-row{position:relative;overflow:hidden;border-bottom:1px solid rgba(38,32,56,.8)}
.mp-drawer a.mp-big{position:relative;z-index:1;display:block;font-family:var(--mp-display);
  font-size:clamp(24px,2.6vw,42px);font-weight:400;letter-spacing:-.055em;line-height:1.02;
  color:var(--mp-ink);min-height:44px;padding:15px 46px 15px 4px;text-decoration:none;
  transition:color .45s var(--mp-ease),padding-left .45s var(--mp-ease)}
.mp-row::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(168,85,247,.22),transparent 74%);
  transform:translateX(-101%);transition:transform .55s var(--mp-ease)}
.mp-row:hover::after{transform:translateX(0)}
.mp-drawer a.mp-big:hover{color:#fff;padding-left:16px}
.mp-drawer a.mp-big.is-here{color:var(--mp-acc)}
.mp-sub{display:block;font-family:inherit;font-size:12.5px;letter-spacing:0;
  line-height:1.45;color:var(--mp-ink-3);margin-top:8px;max-width:40ch;
  transition:color .45s var(--mp-ease)}
.mp-row:hover .mp-sub{color:var(--mp-ink-2)}
.mp-arrow{position:absolute;right:10px;top:50%;font-family:var(--mp-mono);font-size:16px;
  color:var(--mp-acc);opacity:0;transform:translateY(-50%) translateX(-14px);
  transition:opacity .45s var(--mp-ease),transform .45s var(--mp-ease)}
.mp-row:hover .mp-arrow{opacity:1;transform:translateY(-50%) translateX(0)}
.mp-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px clamp(16px,2vw,30px)}
.mp-col h4{font-family:var(--mp-mono);font-weight:300;font-size:8.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mp-ink-3);margin:0 0 12px;
  padding-bottom:9px;border-bottom:1px solid rgba(38,32,56,.8)}
.mp-col a{display:block;font-size:13px;line-height:1.35;color:var(--mp-ink-2);padding:6px 0;
  text-decoration:none;transition:color .35s var(--mp-ease),transform .35s var(--mp-ease)}
.mp-col a:hover{color:var(--mp-acc);transform:translateX(4px)}
.mp-close{position:absolute;top:22px;right:clamp(26px,3.6vw,60px);z-index:3;
  display:inline-flex;align-items:center;min-height:44px;padding:11px 20px;cursor:pointer;
  border:1px solid #35304d;border-radius:999px;background:none;
  font-family:var(--mp-mono);font-weight:300;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mp-ink);
  transition:background .4s var(--mp-ease),color .4s var(--mp-ease),border-color .4s var(--mp-ease)}
.mp-close:hover{background:var(--mp-acc);border-color:var(--mp-acc);color:#0c0c0c}
.mp-meta{position:relative;z-index:1;margin-top:28px;padding-top:22px;border-top:1px solid var(--mp-line);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.mp-cta{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:14px 24px;
  border-radius:999px;background:var(--mp-acc);color:#0c0c0c;text-decoration:none;
  font-family:var(--mp-mono);font-weight:300;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;transition:background .4s var(--mp-ease),transform .4s var(--mp-ease)}
.mp-cta:hover{background:var(--mp-acc-hot);color:#fff;transform:translateY(-2px)}
.mp-note{font-family:var(--mp-mono);font-weight:300;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mp-ink-3)}
@media(max-width:1000px){
  .mp-drawer{width:min(92%,720px)}
  .mp-inner{grid-template-columns:1fr;gap:26px}
  .mp-drawer a.mp-big{font-size:clamp(24px,4.4vw,34px);padding:13px 40px 13px 4px}
  .mp-sub{font-size:12px}
}
@media(max-width:760px){
  .mp-drawer{width:100%;border-left:0!important;justify-content:flex-start}
  .mp-drawer a.mp-big{font-size:clamp(22px,5.6vw,30px);padding:12px 38px 12px 4px}
  .mp-sub{display:none}
}

/* ── PARTICLE PAGE MARK ──────────────────────────────────────────────────
   Opt-in per page: <div class="mp-mark" data-mai-mark></div>. The canvas is
   appended by the JS; if WebGL is unavailable the block simply stays empty,
   so nothing depends on it. */
.mp-mark{position:relative;width:100%;height:clamp(190px,26vw,320px);pointer-events:none}
.mp-mark canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}

@media(prefers-reduced-motion:reduce){
  .mp-overlay{display:none!important}
  .mp-mark{display:none!important}
  .mp-drawer,.mp-scrim,.mp-menu-btn{transition-duration:.001ms!important}
}