/* Mavn North — site styles.
   Layout/utility rules below are carried over verbatim from the approved
   Mavn North Website prototype. Component rules (.ds-*) are plain-HTML/CSS
   equivalents of the design system's React components (Wordmark, Button,
   Eyebrow, LatitudeRule, AuroraArc) — same tokens, same visual output. */

:root{--dur-accordion:300ms} /* within the design system's motion scale, no DS token lands in this range */
/* Section rhythm, tightened ~20% at the desktop end: the vendored --section-y
   (clamp(56px,9vw,104px)) repeats as top+bottom padding on nearly every
   .mn-sec/.mn-wrap block, so its own value is what compounds into the large
   blank stretches between sections. Overriding it once here tightens the
   whole page's rhythm proportionally, rather than patching individual gaps —
   never edit the vendored _ds/ file itself. */
:root{--section-y:clamp(48px,7.5vw,84px)}
/* Advisory text-accent correction: the vendored DS token's on-light Advisory
   accent (--accent-deep #00755F) reads as a muted, dark green at small text
   sizes — not the brand's bright teal. Override at the site layer only (never
   edit the vendored _ds/ files) so eyebrows/numerals/labels/hover use the
   same bright --accent (#00C79F) already used for nodes/arcs/hover borders.
   Body copy is untouched — it never used accent-text. */
[data-product="advisory"]{--accent-text:var(--accent)}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--accent-text)}
.mn-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.mn-sec{padding:var(--section-y) 0}
.mn-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap-split);align-items:start}
.mn-navlink{font-family:var(--font-mono);font-size:var(--text-label);font-weight:var(--fw-medium);letter-spacing:var(--track-coord);text-transform:uppercase;color:var(--slate);white-space:nowrap;transition:color var(--dur-fast) var(--ease)}
.mn-lock span{white-space:nowrap}
.mn-bar{padding-top:20px;padding-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-5)}
.mn-nav{display:flex;align-items:center;gap:var(--space-6);flex-wrap:nowrap}
@media (max-width:1000px){.mn-nav{gap:var(--space-5)}}
@media (max-width:1080px){.mn-nav .mn-cta{display:none}}
@media (max-width:720px){.mn-nav{gap:var(--space-4)}.mn-navlink{font-size:10px;letter-spacing:.1em}}
@media (max-width:600px){.mn-bar{flex-wrap:wrap;row-gap:10px}.mn-nav{flex-wrap:wrap;row-gap:8px}}
.mn-navlink:hover{color:var(--accent-text)}

/* Scroll-aware nav: header[data-product]/[data-active-nav] are kept in sync
   by main.js's scroll resolver. Only the active section's own link is
   tinted (no pills, no boxes) -- AI Enablement reads purple and Advisory
   reads teal because --accent-text already flips with the header's own
   data-product. Build gets its own dark, editorial header rather than
   adopting either product colour. Fail-open: with JS disabled the header
   keeps its default light state and every link its resting colour. */
header[data-active-nav="#scale"] .mn-navlink[href="#scale"],
header[data-active-nav="#grow"] .mn-navlink[href="#grow"],
header[data-active-nav="#proof"] .mn-navlink[href="#proof"]{color:var(--accent-text)}
.mn-header{background:rgba(251,252,252,.88);border-bottom:1px solid var(--line)}
header[data-product="build"]{background:rgba(36,43,45,.94);border-bottom-color:var(--on-ink-line)}
header[data-product="build"] .mn-navlink{color:var(--on-ink-muted)}
header[data-product="build"] .mn-navlink[href="#build"]{color:var(--on-ink)}
header[data-product="build"] .ds-wordmark .word{color:var(--on-ink)}
header[data-product="build"] .ds-wordmark .mark path{stroke:var(--on-ink)}
header[data-product="build"] .mn-cta a{border-color:var(--on-ink-line) !important;color:var(--on-ink) !important}
header{transition:background 260ms var(--ease),border-color 260ms var(--ease)}
header .ds-wordmark .word,header .ds-wordmark .mark path,header .mn-cta a{transition:color 260ms var(--ease),border-color 260ms var(--ease)}
@media (prefers-reduced-motion:reduce){header,header .ds-wordmark .word,header .ds-wordmark .mark path,header .mn-cta a,.mn-navlink{transition:none}}
.mn-h1{font-family:var(--font-display);font-weight:var(--fw-thin);font-size:clamp(38px,7vw,76px);line-height:var(--lh-tight);letter-spacing:-.015em;margin:0;max-width:15ch}
.mn-h2{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:var(--text-h2);line-height:var(--lh-tight);letter-spacing:var(--track-display);margin:16px 0 0;max-width:18ch;color:var(--text-primary)}
.mn-h3{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--text-h3);line-height:var(--lh-snug);letter-spacing:var(--track-display);margin:0;color:var(--text-primary)}
.mn-lead{font-size:var(--text-lead);line-height:var(--lh-body);color:var(--text-secondary);max-width:52ch;margin:0}
/* Body copy strengthened beyond --text-secondary (slate, #5E6F70): at body
   size, slate reads as washed-out rather than "quiet." This sits between
   --ink and --slate — still clearly secondary to a headline, but legible and
   intentional rather than faded. Leads/labels/signals keep the softer tone. */
.mn-body{font-size:var(--text-sm);line-height:var(--lh-body);color:#3D474A;max-width:54ch;margin:0}
.mn-signal{font-family:var(--font-mono);font-size:var(--text-label);font-weight:var(--fw-medium);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--on-ink-faint)}
/* Hero doors: charcoal at rest so AI/Advisory/Market never show three
   colours simultaneously -- the category colour is revealed through
   interaction (a filled pill + white text on hover), not displayed
   permanently. Colour comes from each door's own data-product scope, so
   AI/Market hover purple and Advisory hovers bright teal automatically. */
.mn-door{border-top:1px solid var(--line);padding-top:var(--space-4);display:block;transition:border-color .25s var(--ease)}
.mn-door:hover{border-top-color:var(--accent)}
.mn-door .k{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:15px;letter-spacing:var(--track-coord);text-transform:uppercase;color:var(--ink);display:inline-block;padding:4px 10px;margin-left:-10px;border-radius:var(--radius-pill);transition:background 240ms var(--ease),color 240ms var(--ease)}
@media (hover:hover){.mn-door:hover .k{background:var(--accent);color:var(--paper)}}
/* Build converges Advisory + AI, so its hover reads as a restrained ink fill
   rather than adopting either product colour. */
@media (hover:hover){.mn-door[data-product="build"]:hover .k{background:var(--ink);color:var(--on-ink)}}
.mn-door .v{font-size:15.5px;color:var(--ink);margin-top:9px;display:block;line-height:1.5}
.mn-row{border-top:1px solid var(--border-hairline);padding:var(--space-3) 0;display:flex;align-items:baseline;gap:var(--space-4);font-size:15.5px;color:var(--text-primary)}
.mn-row:last-child{border-bottom:1px solid var(--border-hairline)}
.mn-node{width:6px;height:6px;border-radius:50%;background:var(--node);flex:none;transform:translateY(-2px)}
.mn-field{width:100%;background:none;border:none;border-bottom:1px solid var(--border-hairline);padding:var(--space-3) 0;font-family:var(--font-body);font-size:16px;color:var(--text-primary);outline:none;transition:border-color var(--dur-fast) var(--ease)}
.mn-field:focus{border-bottom-color:var(--accent)}
.mn-field::placeholder{color:var(--text-secondary);opacity:.85}
.mn-dx{border-top:1px solid var(--border-hairline);transition:border-color var(--dur-fast) var(--ease)}
.mn-dx:last-of-type{border-bottom:1px solid var(--border-hairline)}
.mn-dx>summary{list-style:none;cursor:pointer;padding:var(--space-5) 0;display:grid;grid-template-columns:1fr auto;gap:var(--space-2) var(--space-5);align-items:baseline}
.mn-dx>summary::-webkit-details-marker{display:none}
.mn-dx>summary>.mn-body{grid-column:1;max-width:46ch}
.mn-dx.is-open>summary .mn-h3{color:var(--accent-text)}
.mn-dx-icon{display:inline-flex;width:20px;height:20px;flex:none;color:var(--accent-text);vertical-align:-5px;margin-right:10px}
.mn-dx-icon svg{width:100%;height:100%;display:block}
/* Toggle: a two-bar +, the vertical bar rotating flat into a restrained − on open */
.mn-dx-toggle{grid-row:1;grid-column:2;position:relative;width:14px;height:14px;flex:none;align-self:start;margin-top:5px}
.mn-dx-toggle .h,.mn-dx-toggle .v{position:absolute;top:50%;left:50%;background:var(--slate);transition:background var(--dur-fast) var(--ease),transform var(--dur-accordion) var(--ease)}
.mn-dx-toggle .h{width:14px;height:1px;transform:translate(-50%,-50%)}
.mn-dx-toggle .v{width:1px;height:14px;transform:translate(-50%,-50%)}
.mn-dx.is-open .mn-dx-toggle .h,.mn-dx.is-open .mn-dx-toggle .v{background:var(--accent-text)}
.mn-dx.is-open .mn-dx-toggle .v{transform:translate(-50%,-50%) rotate(90deg)}
/* Hover: whole row signals interactivity — hover-capable pointers only, so a tap
   on touch doesn't leave the row looking "stuck" hovered. */
@media (hover:hover){
  .mn-dx:hover{border-top-color:var(--accent)}
  .mn-dx>summary:hover .mn-h3{color:var(--accent-text)}
  .mn-dx>summary:hover .mn-dx-toggle .h,.mn-dx>summary:hover .mn-dx-toggle .v{background:var(--accent-text)}
}
/* Reveal: content fades and rises slightly; height is animated in JS (details
   height isn't natively transitionable), opacity/transform run in parallel here.
   .mn-dxb is the measured, animated wrapper (JS reads its offsetHeight); it can
   hold an optional .mn-dxb-intro (full-width lead-in) above the .mn-dxb-grid
   two-column reveal, so every row type — with or without an intro — animates
   through the same single measured element. */
.mn-dxb{padding:0 0 var(--space-6);opacity:0;transform:translateY(-6px);transition:opacity var(--dur-accordion) var(--ease),transform var(--dur-accordion) var(--ease)}
.mn-dx.is-open .mn-dxb{opacity:1;transform:translateY(0)}
.mn-dxb-intro{display:flex;flex-direction:column;gap:var(--space-3);max-width:54ch;margin-bottom:var(--space-5)}
.mn-dxb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-5) var(--gap-split)}
@media (prefers-reduced-motion:reduce){
  .mn-dx-toggle .h,.mn-dx-toggle .v,.mn-dxb{transition:none}
}

/* AI engagement rows: the same .mn-dx accordion mechanics as Advisory's
   capability rows, with the large-numeral progression header from the AI
   levels laid over the summary's first grid cell. */
.mn-dx-head{display:flex;flex-direction:column;gap:var(--space-2)}
.mn-arc{position:absolute;inset:0;pointer-events:none;opacity:var(--arc-o,1)}

/* Hero entrance: pure CSS, no JS dependency — the resting state (opacity:1,
   via --arc-o) is what renders if the animation never runs for any reason.
   "both" fill-mode holds the final keyframe, which resolves to the same
   --arc-o the element would show anyway, so this can never strand content
   invisible the way a JS-driven, unconditionally-hidden state could.
   Entrance + ambient "breathe" both animate the SVG child, never the .mn-arc
   wrapper itself — that keeps the wrapper's own transform free for the
   JS-driven scroll parallax (data-arc-parallax) to set without either one
   clobbering the other; a CSS animation with fill:both would otherwise hold
   the transform property forever and ignore any inline style JS sets on it. */
@media (prefers-reduced-motion:no-preference){
  #top .mn-arc svg{animation:mnArcIn 650ms var(--ease) both}
  #top .mn-wrap{animation:mnHeroIn 550ms var(--ease) 80ms both}
  [data-arc-live] svg{animation:mnArcBreathe 22s ease-in-out .6s infinite alternate}
  #top [data-arc-live] svg{animation:mnArcIn 650ms var(--ease) both,mnArcBreathe 22s ease-in-out .65s infinite alternate}
  /* Hero-only, gentler variant: about half the amplitude of mnArcBreathe,
     kept as its own attribute/keyframe rather than tuning mnArcBreathe
     itself, so Context/Contact (which use plain data-arc-live) are
     completely unaffected by this hero-specific calm-down. */
  [data-arc-live-soft] svg{animation:mnArcBreatheSoft 34s ease-in-out .6s infinite alternate}
  #top [data-arc-live-soft] svg{animation:mnArcIn 650ms var(--ease) both,mnArcBreatheSoft 34s ease-in-out .65s infinite alternate}
  .mn-aurora-glow--drift{animation:mnAuroraDrift 46s ease-in-out infinite alternate}
}
@keyframes mnArcIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@keyframes mnHeroIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes mnArcBreathe{0%{transform:scale(1) translateY(0)}100%{transform:scale(1.018) translateY(-8px)}}
@keyframes mnArcBreatheSoft{0%{transform:scale(1) translateY(0)}100%{transform:scale(1.008) translateY(-3px)}}
@keyframes mnAuroraDrift{0%{opacity:.82}100%{opacity:1}}

/* Scroll parallax: JS (data-arc-parallax elements) sets --arc-parallax-y as
   the visitor scrolls; with JS disabled, prefers-reduced-motion, or before
   the script runs, the custom property is simply unset and this resolves to
   translateY(0) — the same static position the element would render at
   anyway, so nothing ever depends on the script running. */
[data-arc-parallax]{transform:translateY(var(--arc-parallax-y,0px))}

/* ============================================================
   MAVN AURORA — environmental illumination layer
   Content sits inside a lit environment instead of on a flat background.
   Built entirely from AuroraArc geometry + CSS radial gradients — no
   images, no stock textures, no particles. Back to front, inside one
   positioned container:
     .mn-aurora-field            the environment (clips, establishes depth)
       .mn-aurora-glow           soft colour blooms — a far/near pair gives
                                  the field depth; each one also carries
                                  data-arc-parallax for a slow drift
       [data-arc]                the AuroraArc geometry itself — geometry
         only, nothing travels along it (see main.js)
   Pale/normal-blend on light grounds; on data-surface="chalkboard" the
   same classes switch to the brighter synapse/aurora-bright colours and
   mix-blend-mode:screen, so overlapping light adds rather than muddies —
   "dramatic" is a colour + blend change, not a different component.
   A future layer of abstracted Mavn work-artifact fragments would sit
   between this field and the section's real content; nothing occupies
   that slot yet, but .mn-aurora-field>.mn-wrap is already pinned above
   it (z-index:3, leaving 1–2 free) so it can be added without
   restructuring anything built here. */
.mn-aurora-field{position:relative;overflow:hidden;isolation:isolate}
.mn-aurora-field>.mn-wrap{position:relative;z-index:3}
.mn-aurora-field [data-arc]{z-index:1}

.mn-aurora-glow{position:absolute;z-index:0;border-radius:50%;pointer-events:none;--glow-blur:50px;filter:blur(var(--glow-blur));transition:transform 650ms var(--ease),filter 650ms var(--ease)}
.mn-aurora-glow--far{--glow-blur:72px}
.mn-aurora-glow--teal{background:radial-gradient(circle,rgba(0,199,159,.22) 0%,rgba(0,199,159,0) 70%)}
.mn-aurora-glow--purple{background:radial-gradient(circle,rgba(139,92,246,.2) 0%,rgba(139,92,246,0) 70%)}
[data-surface="chalkboard"] .mn-aurora-glow{mix-blend-mode:screen}
[data-surface="chalkboard"] .mn-aurora-glow--teal{background:radial-gradient(circle,rgba(61,255,212,.4) 0%,rgba(61,255,212,0) 70%)}
[data-surface="chalkboard"] .mn-aurora-glow--purple{background:radial-gradient(circle,rgba(196,169,255,.38) 0%,rgba(196,169,255,0) 70%)}

/* Hero doors, hovered: the environment responds to whichever capability the
   visitor is considering, rather than showing all three colours at once at
   rest. Purely a hover affordance (desktop pointers only) — the hero's
   resting state never depends on it, and nothing here touches --arc-o or
   any resting opacity, so it can never leave the hero in a broken state. */
@media (hover:hover){
  #top:has(.mn-door[data-product="ai"]:hover) .mn-aurora-glow--purple{
    transform:translateY(var(--arc-parallax-y,0px)) scale(1.3);
    filter:blur(var(--glow-blur)) brightness(1.3) saturate(1.15);
  }
  #top:has(.mn-door[data-product="advisory"]:hover) .mn-aurora-glow--teal{
    transform:translateY(var(--arc-parallax-y,0px)) scale(1.14);
    filter:blur(var(--glow-blur)) brightness(1.2) saturate(1.1);
  }
  #top .mn-arc svg path,#top .mn-arc svg circle{transition:stroke 650ms var(--ease),fill 650ms var(--ease)}
  #top:has(.mn-door[data-product="ai"]:hover){--arc:var(--synapse);--node:var(--synapse)}
}

/* Reveal-on-scroll: a restrained "brand signature" moment as the reader
   reaches a major section or the context sequence — content fades and rises
   once. These classes are added by JS only; nothing in static CSS/HTML ever
   sets an element's resting state to hidden, so a page with JS disabled (or
   prefers-reduced-motion) simply shows everything, already in place. */
.mn-reveal{opacity:0;transform:translateY(14px);transition:opacity 550ms var(--ease),transform 550ms var(--ease)}
.mn-reveal.is-visible{opacity:1;transform:translateY(0)}
.mn-reveal-group>*{opacity:0;transform:translateY(10px);transition:opacity 450ms var(--ease),transform 450ms var(--ease)}
.mn-reveal-group.is-visible>*{opacity:1;transform:translateY(0)}
.mn-reveal-group.is-visible>*:nth-child(2){transition-delay:90ms}
.mn-reveal-group.is-visible>*:nth-child(3){transition-delay:180ms}
.mn-reveal-group.is-visible>*:nth-child(4){transition-delay:270ms}
.mn-reveal-group.is-visible>*:nth-child(5){transition-delay:360ms}
.mn-reveal-group.is-visible>*:nth-child(6){transition-delay:440ms}
.mn-reveal-group.is-visible>*:nth-child(7){transition-delay:510ms}
.mn-reveal-group.is-visible>*:nth-child(n+8){transition-delay:570ms}

/* CTA emphasis: the DS pill, given more presence and a decisive hover */
.mn-cta a,.mn-ctaL a,.mn-ctaM a{font-size:13.5px !important;letter-spacing:.1em !important;padding:11px 24px !important;border-width:1px !important}
.mn-cta a{border-color:var(--ink) !important;color:var(--text-primary) !important;white-space:nowrap !important}
.mn-cta a:hover{background:var(--ink) !important;border-color:var(--ink) !important;color:var(--on-ink) !important}
.mn-ctaL a{padding:17px 34px !important;font-size:14.5px !important}
.mn-ctaL a:hover,.mn-ctaM a:hover{background:var(--accent) !important;border-color:var(--accent) !important;color:var(--ink) !important}
.mn-ctaM button:hover,.mn-ctaM a:hover{background:var(--accent) !important;border-color:var(--accent) !important;color:var(--ink) !important}
.mn-ctaM button,.mn-ctaM a{font-size:13.5px !important;letter-spacing:.1em !important;padding:13px 26px !important}

/* Hairline gutter on splits. The numbered-rail treatment (.mn-rail) that
   used to sit here was retired: AI/Advisory/Market are parallel entry
   points, not sequential chapters, so nothing on the page numbers them. */
.mn-split{position:relative}
.mn-split.mn-ruled>*+*{border-left:1px solid var(--border-hairline);padding-left:var(--gap-split)}
@media (max-width:880px){.mn-split.mn-ruled>*+*{border-left:none;padding-left:0}}

.mn-jr{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);margin:0;padding:0;list-style:none}
.mn-jr li{display:flex;align-items:center;gap:var(--space-4);font-family:var(--font-mono);font-size:var(--text-label);font-weight:var(--fw-medium);letter-spacing:var(--track-coord);text-transform:uppercase;color:var(--slate);transition:color var(--dur-fast) var(--ease)}
.mn-jr li:hover{color:var(--accent-text)}
.mn-jr li:after{content:"";width:26px;height:1px;background:var(--line);display:block}
.mn-jr li:last-child:after{display:none}
.mn-jr .dot{width:7px;height:7px;border-radius:50%;background:var(--line);flex:none;transition:background var(--dur-fast) var(--ease)}
.mn-jr li:hover .dot{background:var(--node)}
.mn-lvl{border-top:1px solid var(--border-hairline);padding:var(--space-6) 0;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--space-4) var(--gap-split);align-items:start}
.mn-lvl:last-of-type{border-bottom:1px solid var(--border-hairline)}
/* Large thin numeral — "numbers as texture" is an existing DS motif, used here
   to make the AI engagement progression the page's strongest visual moment. */
.mn-lvl-num{font-family:var(--font-display);font-weight:var(--fw-thin);font-size:clamp(34px,4.5vw,48px);line-height:1;color:var(--accent-text)}
/* A quiet connector between progression steps — sequence, not a divider. */
.mn-lvl-arrow{display:flex;justify-content:center;color:var(--accent-text);font-size:15px;line-height:1;padding:2px 0}
.mn-os{display:flex;flex-direction:column}
.mn-os>div{border-top:1px solid var(--border-hairline);padding:var(--space-5) 0;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:var(--space-2) var(--gap-split);align-items:baseline;transition:border-color var(--dur-fast) var(--ease)}
.mn-os>div:last-child{border-bottom:1px solid var(--border-hairline)}
.mn-os>div:hover{border-top-color:var(--accent)}
.mn-os>div:hover .lb{color:var(--accent-text)}
.mn-pr{border-top:1px solid var(--border-hairline);padding:var(--space-6) 0;display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--space-2) var(--space-3);align-items:start}
.mn-pr:last-of-type{border-bottom:1px solid var(--border-hairline)}
/* Editorial numbering — quiet enough to read as a defined list (a essay's
   numbered points), not a hero-scale numeral implying a process/sequence
   of steps to complete in order. */
.mn-pr .ix{font-family:var(--font-mono);font-size:13px;font-weight:var(--fw-medium);letter-spacing:var(--track-coord);color:var(--accent-text);padding-top:3px;grid-row:span 2}
@media (max-width:760px){.mn-lvl,.mn-os>div{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   Design-system components, recreated as plain HTML/CSS.
   Same tokens, same markup shape as the React source — just no
   React runtime required to render them.
   ============================================================ */

/* Wordmark (size sm — the only size used on this page) */
.ds-wordmark{display:inline-flex;align-items:center;gap:11px}
.ds-wordmark .mark{flex:none;display:block;width:30px;height:30px}
.ds-wordmark .word{font-family:var(--font-display);font-weight:var(--fw-thin);letter-spacing:var(--track-word);line-height:1;font-size:18px;color:var(--ink);white-space:nowrap}
.ds-wordmark .word b{font-weight:var(--fw-semibold)}
.ds-wordmark .word .north{opacity:.8}
[data-surface="chalkboard"] .ds-wordmark .word{color:var(--on-ink)}

/* Eyebrow — strengthened into a real section marker: the DS default
   (12px/500/0.22em) reads as a faint caption at a glance. Slightly larger,
   heavier and less loosely tracked, it still reads as the same restrained
   mono label, just unmistakable rather than faint. Colour is untouched
   (still --accent-text, confidently teal/purple per scope). */
.ds-eyebrow{font-family:var(--font-mono);font-size:13px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;color:var(--accent-text);display:block}

/* LatitudeRule */
.ds-latitude{display:flex;align-items:center;gap:14px}
.ds-latitude .rule{height:1px;background:var(--border-hairline);flex:1}
.ds-latitude .node{width:7px;height:7px;border-radius:50%;background:var(--node);flex:none}
.ds-latitude .label{font-family:var(--font-mono);font-size:var(--text-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-secondary);flex:none}
/* A long label + a flex:1 rule can outgrow a narrow phone screen (the label
   never shrinks); let the row wrap so the label gets its own full-width line. */
@media (max-width:480px){
  .ds-latitude{flex-wrap:wrap;row-gap:8px}
  .ds-latitude .rule{flex:1 1 100%}
  .ds-latitude .label{flex:1 1 100%;white-space:normal}
}

/* Button — pill CTA. Variants: primary (ink fill), accent (teal/purple fill),
   secondary (hairline), ghost. Hover deepens; no shadow, no bounce. */
.ds-btn{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;font-weight:500;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);display:inline-flex;align-items:center;gap:8px;text-decoration:none;line-height:1}
.ds-btn--sm{padding:8px 16px;font-size:13px}
.ds-btn--md{padding:11px 22px;font-size:14px}
.ds-btn--lg{padding:14px 30px;font-size:15px}
.ds-btn--primary{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.ds-btn--primary:hover{background:var(--ink-soft)}
.ds-btn--accent{background:var(--accent);color:var(--ink);border-color:transparent;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),filter var(--dur-fast) var(--ease)}
.ds-btn--accent:hover{filter:brightness(.9)}
.ds-btn--secondary{background:transparent;color:var(--text-primary);border-color:var(--border-hairline)}
.ds-btn--secondary:hover{border-color:var(--accent)}
.ds-btn--ghost{background:transparent;color:var(--text-secondary);border-color:transparent}
.ds-btn--ghost:hover{color:var(--accent-text)}

/* ============================================================
   Card selector — "How to work with Mavn". Engagement pathways,
   not pricing plans: no shadows, no badges, no checkmark lists.
   SCAN (the three cards) -> SELECT (click) -> EXPLORE (shared
   panel below). Fail-open: without JS, every .mn-cardsel-pane
   renders stacked and readable (see the un-enhanced rules below);
   JS adds .is-enhanced, which is what switches to the single-panel,
   card-driven interaction.
   ============================================================ */
.mn-cardsel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
@media (max-width:880px){.mn-cardsel-grid{grid-template-columns:1fr}}

.mn-card{
  position:relative;overflow:hidden;text-align:left;appearance:none;
  font:inherit;color:inherit;cursor:pointer;
  display:flex;flex-direction:column;gap:var(--space-3);
  background:var(--paper);border:1px solid var(--border-hairline);border-radius:14px;
  padding:var(--space-5) var(--space-5) var(--space-7);
  transition:transform var(--dur-accordion) var(--ease),border-color var(--dur-accordion) var(--ease),background var(--dur-accordion) var(--ease),box-shadow var(--dur-accordion) var(--ease);
}
/* A top accent bar (not a shadow) marks the selected card unmistakably,
   on top of the stronger tint/border — the "clearly stronger state" a
   selected engagement card needs. */
.mn-card::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-accordion) var(--ease)}
.mn-card[aria-selected="true"]::after{transform:scaleX(1)}
[data-product="advisory"] .mn-card{background:#EFF9F6}
[data-product="advisory"] .mn-card[aria-selected="true"]{background:#E1F6EF;border-color:var(--accent)}
[data-product="ai"] .mn-card{background:#F6F3FE}
[data-product="ai"] .mn-card[aria-selected="true"]{background:#EDE5FC;border-color:var(--accent)}
/* Atmospheric glow — an extremely soft accent light, not a gradient background */
.mn-card::before{
  content:"";position:absolute;top:-30%;right:-20%;width:65%;height:65%;border-radius:50%;
  background:radial-gradient(circle,var(--accent-bright) 0%,transparent 72%);
  opacity:0;transition:opacity var(--dur-accordion) var(--ease);pointer-events:none;
}
.mn-card[aria-selected="true"]::before{opacity:.22}
@media (hover:hover){
  .mn-card:hover{transform:translateY(-4px);border-color:var(--accent)}
  .mn-card:hover::before{opacity:.14}
}
.mn-card[aria-selected="true"]{border-color:var(--accent)}
.mn-card-num{font-family:var(--font-display);font-weight:var(--fw-thin);font-size:clamp(30px,4vw,40px);line-height:1;color:var(--accent-text);transition:color var(--dur-accordion) var(--ease)}
.mn-card[aria-selected="true"] .mn-card-num{color:var(--accent)}
@media (hover:hover){.mn-card:hover .mn-card-num{color:var(--accent)}}
.mn-card-arrow{position:absolute;right:var(--space-5);bottom:var(--space-5);color:var(--accent-text);font-size:16px;line-height:1;transition:transform var(--dur-accordion) var(--ease),color var(--dur-accordion) var(--ease)}
.mn-card[aria-selected="true"] .mn-card-arrow{transform:translateX(5px);color:var(--accent)}
@media (hover:hover){.mn-card:hover .mn-card-arrow{transform:translateX(5px)}}

/* ============================================================
   Selector mechanics, shared by the card grid ("How to work with
   Mavn") and the area selector ("Where Mavn can help", AI page):
   .mn-sel-trigger / .mn-sel-pane / .is-enhanced / .is-active. Visual
   styling (cards vs. markers) is layered on top via the specific
   classes above/below. Fail-open: without .is-enhanced every pane
   renders stacked and readable — nothing is ever hidden by default.
   ============================================================ */
.mn-sel-panel{margin-top:var(--space-6)}
.mn-sel-pane{border-top:1px solid var(--border-hairline);padding-top:var(--space-6);margin-top:var(--space-6)}
.mn-sel-pane:first-child{border-top:none;padding-top:0;margin-top:0}
.is-enhanced .mn-sel-pane{display:none;border-top:none;padding-top:0;margin-top:0}
.is-enhanced .mn-sel-pane.is-active{display:block}

/* ============================================================
   Area selector — "Where Mavn can help" on AI Enablement. Markers
   on the left (icon + label), one larger active description on the
   right — a landscape, not three rows in a spreadsheet. The icon is
   the same arc-derived mark reused everywhere on the site (not a
   one-off pictogram per area), state-coloured to show selection.
   ============================================================ */
.mn-areasel{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--gap-split);align-items:start}
@media (max-width:760px){.mn-areasel{grid-template-columns:minmax(0,1fr)}}
.mn-area-marker{
  width:100%;appearance:none;font:inherit;color:inherit;text-align:left;cursor:pointer;
  background:none;border:none;border-left:2px solid var(--border-hairline);
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) 0 var(--space-4) var(--space-4);
  transition:border-color var(--dur-accordion) var(--ease);
}
.mn-area-marker .mn-signal{color:var(--text-primary);transition:color var(--dur-accordion) var(--ease)}
.mn-area-icon{flex:none;width:22px;height:22px;display:block;color:var(--slate);transition:color var(--dur-accordion) var(--ease)}
.mn-area-icon svg{width:100%;height:100%;display:block}
.mn-area-icon{transition:color var(--dur-accordion) var(--ease),transform var(--dur-accordion) var(--ease)}
.mn-area-marker[aria-selected="true"]{border-left-color:var(--accent)}
.mn-area-marker[aria-selected="true"] .mn-signal{color:var(--accent-text)}
.mn-area-marker[aria-selected="true"] .mn-area-icon{color:var(--accent);transform:scale(1.14)}
@media (hover:hover){
  .mn-area-marker:hover{border-left-color:var(--accent)}
  .mn-area-marker:hover .mn-signal{color:var(--accent-text)}
  .mn-area-marker:hover .mn-area-icon{color:var(--accent)}
}
.mn-areasel-detail .mn-sel-pane{border-top:none;padding-top:0;margin-top:0}
.mn-areasel-detail .mn-sel-pane+.mn-sel-pane{margin-top:0}
.is-enhanced .mn-areasel-detail .mn-sel-pane{padding-top:0}

/* ============================================================
   Connected path — "The difference is context." Four stages read as
   one system (a hairline spine + nodes) instead of a plain list; the
   final stage (AI + automation) is visually the destination.
   ============================================================ */
.mn-path{position:relative;display:flex;flex-direction:column;gap:var(--space-6);padding-left:2px}
.mn-path::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--border-hairline)}
/* The spine draws in once as the architecture resolves into view. Hidden
   state (scaleY(0)) only exists inside this motion-preference query, never
   as the unconditional default -- with reduced motion or JS disabled, the
   base rule above already renders the full connecting line. */
@media (prefers-reduced-motion:no-preference){
  .mn-path::before{transform:scaleY(0);transform-origin:top;transition:transform 700ms var(--ease)}
  .mn-path.is-visible::before{transform:scaleY(1)}
}
.mn-path-step{position:relative;display:grid;grid-template-columns:11px 1fr;gap:var(--space-4);align-items:start}
.mn-path-node{width:9px;height:9px;border-radius:50%;background:var(--accent);margin-top:6px;position:relative;z-index:1;transition:opacity var(--dur-accordion) var(--ease),width var(--dur-accordion) var(--ease),height var(--dur-accordion) var(--ease)}
.mn-path-step--final .mn-path-node{width:14px;height:14px;margin-top:3px;margin-left:-2.5px}
.mn-path-content{display:flex;flex-direction:column;gap:var(--space-2)}
.mn-path-step--final .mn-path-content .lb{color:var(--accent-text);font-weight:var(--fw-semibold)}

/* Nodes illuminate gently, once, as the architecture resolves into view —
   reuses the reveal system's own .is-visible class (no new JS), so a node's
   resting frame (no glow) is exactly what renders if this never fires. */
@media (prefers-reduced-motion:no-preference){
  .mn-reveal-group.is-visible .mn-path-node{animation:mnNodeIlluminate 900ms var(--ease) both}
  .mn-reveal-group.is-visible .mn-path-step:nth-child(2) .mn-path-node{animation-delay:150ms}
  .mn-reveal-group.is-visible .mn-path-step:nth-child(3) .mn-path-node{animation-delay:300ms}
  .mn-reveal-group.is-visible .mn-path-step:nth-child(4) .mn-path-node{animation-delay:450ms}
}
@keyframes mnNodeIlluminate{0%{box-shadow:0 0 0 0 transparent}40%{box-shadow:0 0 14px 3px var(--accent)}100%{box-shadow:0 0 0 0 transparent}}

/* Shared small-label used by both the path and the (legacy) mn-os rows */
.lb,.mn-os .lb{font-family:var(--font-mono);font-size:var(--text-label);font-weight:var(--fw-medium);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-primary)}

/* ============================================================
   Atmospheric fields — extremely pale, full-bleed tonal grounds used
   sparingly to open a chapter or lift a hero moment off plain white.
   Not cards: no border, no radius, just a quiet colour field, often
   paired with a cropped AuroraArc fragment behind the content.
   ============================================================ */
.mn-field-ai{background:#F7F4FE;position:relative;overflow:hidden}
.mn-field-advisory{background:#EFFAF7;position:relative;overflow:hidden}
.mn-arc-frag{position:absolute;pointer-events:none;opacity:.5}

/* ============================================================
   MAJOR SECTION TITLES — oversized editorial typography for the handful
   of section titles that need real authority (Where Mavn Can Help, The
   Difference Is Context, How to Work With Mavn, Growth Is Connected, How
   Mavn Works). Bigger than .mn-h2, thin weight by default so scale reads
   as confident rather than shouty; .hl is the one allowed device for
   "restrained semantic emphasis" on an existing keyword — never new copy,
   just a heavier/coloured span around a word already in the sentence. */
.mn-title{font-family:var(--font-display);font-weight:var(--fw-thin);font-size:clamp(32px,5vw,56px);line-height:1.04;letter-spacing:var(--track-display);color:var(--text-primary);margin:0}
.mn-title .hl{color:var(--accent-text);font-weight:var(--fw-medium)}

/* ============================================================
   AI progression navigator — "How to work with Mavn." Replaces three
   equal cards with a single typographic rail: three steps sharing one
   underline, the active step full-weight and coloured, the others
   receding. Not a pricing grid — nothing here has a card background,
   border-radius or shadow. Shares .mn-sel-trigger/.mn-sel-pane mechanics
   (see main.js) with the area selector and Advisory's own card selector.
   ============================================================ */
.mn-nav-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
@media (max-width:980px){.mn-nav-rail{grid-template-columns:repeat(2,1fr);row-gap:var(--space-6)}}
/* Modifier for 3-item rails (Advisory engagement options), scoped to
   desktop so it never fights the max-width collapse rules above/below. */
@media (min-width:981px){.mn-nav-rail--3{grid-template-columns:repeat(3,1fr)}}
.mn-nav-step{
  appearance:none;background:none;border:none;border-bottom:2px solid var(--border-hairline);
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:var(--space-3);
  padding:0 0 var(--space-4);opacity:.68;
  transition:opacity var(--dur-accordion) var(--ease),border-color var(--dur-accordion) var(--ease);
}
.mn-nav-step[aria-selected="true"]{opacity:1;border-bottom-color:var(--accent)}
@media (hover:hover){
  .mn-nav-step:hover{opacity:.8}
  .mn-nav-step[aria-selected="true"]:hover{opacity:1}
}
.mn-nav-node{width:8px;height:8px;border-radius:50%;background:var(--border-hairline);transition:background var(--dur-accordion) var(--ease),transform var(--dur-accordion) var(--ease)}
.mn-nav-step[aria-selected="true"] .mn-nav-node{background:var(--accent);transform:scale(1.4)}
.mn-nav-num{font-family:var(--font-display);font-weight:var(--fw-thin);font-size:clamp(30px,3.6vw,42px);line-height:1;color:var(--slate);transition:color var(--dur-accordion) var(--ease)}
.mn-nav-step[aria-selected="true"] .mn-nav-num{color:var(--accent-text)}
.mn-nav-label{display:flex;flex-direction:column;gap:6px}
@media (max-width:760px){.mn-nav-rail{grid-template-columns:1fr;gap:var(--space-6)}}
.mn-nav-detail{margin-top:var(--space-6)}

/* ============================================================
   Growth journey — "Growth is connected." Seven stages read as one
   connected system: a hairline spine behind the nodes, market
   intelligence rendered as a continuous bar underneath the whole
   journey rather than a disconnected label after it.
   ============================================================ */
.mn-journey{display:flex;flex-direction:column;gap:var(--space-6)}
.mn-journey-stages{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-3) var(--space-4)}
.mn-journey-stages::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--border-hairline)}
.mn-journey-stage{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.mn-journey-node{width:9px;height:9px;border-radius:50%;background:var(--paper);border:1.5px solid var(--accent);position:relative;z-index:1;flex:none}
.mn-journey-stage--final .mn-journey-node{width:12px;height:12px;background:var(--accent);border-color:var(--accent)}
.mn-journey-label{font-family:var(--font-mono);font-size:var(--text-label);font-weight:var(--fw-medium);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-primary)}
.mn-journey-stage--final .mn-journey-label{color:var(--accent-text);font-weight:var(--fw-semibold)}
.mn-journey-mi{display:flex;align-items:center;gap:var(--space-4)}
.mn-journey-mi-bar{flex:1;height:3px;border-radius:2px;background:var(--accent);opacity:.25}
@media (max-width:760px){.mn-journey-stages{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:var(--space-5)}}
@media (max-width:420px){.mn-journey-stages{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============================================================
   Stack — "Build the right stack around the problem." Four capability
   layers read as one assembled system: a single bordered block, layers
   touching (no gaps between them), each identified by a left accent bar
   in its own capability colour rather than a tinted background. Colours
   are explicit hex here (not --accent/--accent-text) because this
   section sits outside any single data-product scope — it deliberately
   spans all of them at once.
   ============================================================ */
.mn-stack{display:flex;flex-direction:column;border:1px solid var(--border-hairline);border-radius:14px;overflow:hidden}
.mn-stack-layer{position:relative;padding:var(--space-5) var(--space-6);display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3) var(--space-5);flex-wrap:wrap;border-top:1px solid var(--border-hairline);border-left:3px solid var(--border-hairline);transition:background var(--dur-accordion) var(--ease)}
.mn-stack-layer:first-child{border-top:none}
.mn-stack-layer[data-layer="advisory"]{border-left-color:#00C79F}
.mn-stack-layer[data-layer="ai"]{border-left-color:#8B5CF6}
.mn-stack-layer[data-layer="build"]{border-left-color:var(--ink)}
.mn-stack-layer[data-layer="market"]{border-left-color:#8B5CF6}
.mn-stack-name{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(18px,2.2vw,24px);color:var(--text-primary)}
.mn-stack-kw{font-family:var(--font-mono);font-size:var(--text-label);font-weight:var(--fw-medium);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--slate)}
@media (hover:hover){.mn-stack-layer:hover{background:var(--paper-warm)}}
@media (max-width:640px){.mn-stack-layer{flex-direction:column;gap:var(--space-2)}}

/* ============================================================
   Case study architecture — "What this looks like in practice." Large
   editorial chapters, not cards: no per-case container border/shadow.
   .mn-case-ph marks placeholder fields unmistakably (dashed box, muted
   italic, tinted ground) so nothing here could be read as a real claim
   before real case content replaces it.
   ============================================================ */
.mn-case{display:flex;flex-direction:column;gap:var(--space-6)}
.mn-case-head h3{max-width:20ch}
.mn-case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-5) var(--gap-split);padding:var(--space-6) 0;border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline)}
.mn-case-field{display:flex;flex-direction:column;gap:var(--space-2)}
.mn-case-ph{font-style:italic;color:var(--slate);border:1px dashed var(--border-hairline);border-radius:6px;padding:var(--space-3);background:var(--paper-warm);max-width:none}
.mn-case-quote{margin:0;padding-left:var(--space-5);border-left:2px solid var(--accent)}

/* Ecosystem — "Who we work with." Surfaces the four groups already named
   in the approved sentence as a connected row rather than leaving the
   section's large canvas empty. Same connected-node language as the
   growth journey, reused rather than inventing a second pattern. */
.mn-ecosystem{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5)}
.mn-ecosystem::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--border-hairline)}
.mn-ecosystem-node{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.mn-ecosystem-dot{width:11px;height:11px;border-radius:50%;background:var(--paper);border:1.5px solid var(--accent);position:relative;z-index:1}
.mn-ecosystem-label{font-family:var(--font-display);font-weight:var(--fw-regular);font-size:clamp(16px,1.8vw,19px);color:var(--text-primary);max-width:16ch}
@media (max-width:760px){.mn-ecosystem{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-6)}}

/* ============================================================
   Case studies (real, anonymized content) — editorial chapters, content
   and visual side by side; the order flips between the two cases
   (.mn-case-split--reverse) to create page rhythm instead of two
   identical layouts back to back.
   ============================================================ */
.mn-case-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-split);align-items:start}
.mn-case-split--reverse .mn-case-visual{order:-1}
.mn-case-visual img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--border-hairline)}
.mn-case-outcomes{list-style:none;margin:var(--space-3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.mn-case-outcomes li{position:relative;padding-left:18px;font-size:var(--text-sm);color:var(--text-primary)}
.mn-case-outcomes li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media (max-width:760px){.mn-case-split{grid-template-columns:1fr}.mn-case-split--reverse .mn-case-visual{order:0}}

/* A built-in progression graphic for the case that has no photographic
   visual to embed — same connectivity language as the rest of the site,
   not a placeholder box. */
.mn-case-progress{position:relative;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);border:1px solid var(--border-hairline);border-radius:12px;background:var(--paper-warm)}
.mn-case-progress-step{position:relative;padding-left:22px;font-family:var(--font-mono);font-size:var(--text-label);font-weight:var(--fw-medium);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-secondary)}
.mn-case-progress-node{position:absolute;left:0;top:3px;width:8px;height:8px;border-radius:50%;background:var(--border-hairline)}
.mn-case-progress-step--final{color:var(--accent-text);font-weight:var(--fw-semibold)}
.mn-case-progress-step--final .mn-case-progress-node{background:var(--accent);width:11px;height:11px;top:1px}

/* Testimonial placeholder — .mn-case-ph (dashed/italic/muted, already
   defined above) marks the quote and attribution unmistakably as
   placeholder text, not a real client quote. */
.mn-testimonial{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5);max-width:60ch}
.mn-testimonial-avatar{width:48px;height:48px;border-radius:50%;background:var(--mist);border:1px dashed var(--border-hairline);flex:none}
.mn-testimonial-quote{margin:0;padding:0}
.mn-testimonial-quote p{font-family:var(--font-display);font-weight:var(--fw-thin);font-size:clamp(20px,2.4vw,26px);line-height:1.4;margin:0}

/* Wide editorial illustration panel — Visual C (AI ecosystem). Copy stays
   minority share of the composition; the image does the explaining. */
.mn-visual-panel{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:var(--gap-split);align-items:center}
.mn-visual-panel-image img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--border-hairline)}
.mn-visual-panel--reverse{grid-template-columns:minmax(0,1fr) minmax(0,.55fr)}
.mn-visual-panel--reverse .mn-visual-panel-image{order:-1}
@media (max-width:880px){.mn-visual-panel,.mn-visual-panel--reverse{grid-template-columns:1fr}.mn-visual-panel--reverse .mn-visual-panel-image{order:0}}

/* Click-to-expand lightbox for dense diagrams (JS-added; the image itself
   needs no JS to be legible at its normal size). */
.mn-zoomable{cursor:zoom-in}
.mn-lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:5vw;background:rgba(27,33,35,.92);cursor:zoom-out}
.mn-lightbox[hidden]{display:none}
.mn-lightbox img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.4)}