/* ==========================================================================
   Milo · design system v0.1 (2026-10-07)
   Um arquivo só: tokens (CSS) + base + componentes. Todo projeto novo importa este arquivo.
   Fonte dos valores: ../foundations/tokens/*.tokens.json (DTCG). Extraído e reconciliado da landing-v1
   (ver ../foundations/inventario-landing-v1.md). Regras de movimento: ../foundations/regua-de-movimento.md.

   Uso:
     <html data-theme="dark|light">            (o script de tema decide; sem atributo = escuro)
     <link rel="stylesheet" href="milo.css">
     <script src="milo.js" defer></script>      (acordeão e logo animada)

   Classes com prefixo ms- (Milo System), pra não colidir com nada de cada projeto.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@400..600&display=swap");
@font-face { font-family: 'Mattone'; font-weight: 400; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/collletttivo/mattone@main/fonts/Mattone-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Mattone'; font-weight: 700; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/collletttivo/mattone@main/fonts/Mattone-Bold.woff2') format('woff2'); }

/* ---------- 1. Tokens ---------- */
:root {
  /* marca (iguais nos dois temas) */
  --acid: #e4f701; --purple: #8a00f7; --lilac: #c49bff; --ink: #121212; --white: #ffffff;
  /* fontes */
  --font-display: 'Mattone', sans-serif;      /* só nomes de produto e momentos de destaque */
  --font-sans: 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  /* escala fluida: clamp(mínimo, meio, máximo a partir de ~1440 px) */
  --fs-display: clamp(3.5rem, 11vw, 11rem);
  --fs-h1: clamp(3rem, 8vw, 9rem);
  --fs-h2: clamp(2.25rem, 5vw, 4.5rem);
  --fs-h3: clamp(1.5rem, 2.6vw, 2.25rem);
  --fs-lead: clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;
  /* espaço */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --gutter: clamp(20px, 4vw, 56px);           /* respiro lateral de seção (o da landing) */
  --section-y: clamp(48px, 5.5vw, 84px);      /* respiro vertical de seção */
  /* forma: reta + corte de 45° no canto superior esquerdo (nunca em botão) */
  --cut-xl: 56px; --cut-l: 32px; --cut-m: 28px; --cut-s: 8px;
  --radius-pill: 999px;                        /* só chip e botão redondo de seta */
  /* movimento (régua: quanto mais frequente, mais curto) */
  --dur-instant: 120ms; --dur-fast: 200ms; --dur-moderate: 240ms; --dur-exit: 200ms; --dur-slow: 420ms; --dur-reveal: 700ms; --dur-entrance: 1500ms;
  --ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
  --ease-expo-out: cubic-bezier(0.22, 1, 0.36, 1);
  --stagger-cascade: 80ms; --stagger-words: 35ms;
  /* grão */
  --grain-strong: .10; --grain-medium: .06; --grain-subtle: .035; --grain-block-boost: 1.4;
  --grain-url: url("assets/grao.png");
  /* status: cores chapadas, iguais nos dois temas (tokens color.status.*) */
  --status-success: #00d79d; --status-warning: #ffa746; --status-error: #ea051d; --status-info: #1371ea;
  --status-success-fg: var(--ink); --status-warning-fg: var(--ink); --status-error-fg: var(--white); --status-info-fg: var(--white);
  /* grade de colunas (v0.2, experimental): 12 no desktop, 8 até 1024 px, 4 até 640 px */
  --container: 1440px; --grid-cols: 12; --grid-gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 1024px) { :root { --grid-cols: 8; } }
@media (max-width: 640px) { :root { --grid-cols: 4; } }
/* tema escuro (padrão) */
:root, [data-theme="dark"] {
  --ink-bg: #ebebed; --ink-fg: #121212; --ink-bg-hover: #ffffff;
  --bg: #0c0c0c; --bg-subtle: #131313; --surface: #1d1d1e; --fg: #ebebed; --fg-muted: #c5c3c9; --border: #38373a; --border-strong: #6c6b70;
  --accent: var(--acid); --on-accent: var(--ink); --focus: var(--acid);
  /* dados: o destaque do tema = o que a Milo afirma; a outra cor forte = o que o mundo fez; cinza = material de trabalho */
  --affirm: var(--acid); --on-affirm: var(--ink); --world: var(--purple); --world-line: rgba(179, 97, 255, .40); --world-text: #b361ff;
  --status-success-text: #55e1ad; --status-warning-text: #fdb266; --status-error-text: #ffaba1; --status-info-text: #a0c6ff;
  --track: #1c1c1e; --hatch: repeating-linear-gradient(115deg, rgba(255, 255, 255, .055) 0 6px, transparent 6px 14px);
  --mesh-purple: rgba(138, 0, 247, .9); --mesh-lilac: rgba(170, 100, 255, .5); --mesh-acid: rgba(228, 247, 1, .5); --mesh-acid-soft: rgba(228, 247, 1, .22); --mesh-hi: rgba(205, 160, 255, .22); --mesh-veil: .45;
  color-scheme: dark;
}
[data-theme="light"] {
  --ink-bg: #0c0c0c; --ink-fg: #ffffff; --ink-bg-hover: #000000;
  --bg: #fdfdfd; --bg-subtle: #f6f6f7; --surface: #ffffff; --fg: #272629; --fg-muted: #56545a; --border: #cecdd0; --border-strong: #8a888e;
  --accent: var(--purple); --on-accent: var(--white); --focus: var(--purple);     /* Acid nunca é texto no claro */
  --affirm: var(--purple); --on-affirm: var(--white); --world: var(--ink); --world-line: rgba(18, 18, 18, .38); --world-text: var(--ink);
  --status-success-text: #006548; --status-warning-text: #7b4700; --status-error-text: #a3000f; --status-info-text: #0050af;
  --track: #ececee; --hatch: repeating-linear-gradient(115deg, rgba(0, 0, 0, .06) 0 6px, transparent 6px 14px);
  --mesh-purple: rgba(138, 0, 247, .42); --mesh-lilac: rgba(196, 155, 255, .62); --mesh-acid: rgba(228, 247, 1, .5); --mesh-acid-soft: rgba(228, 247, 1, .26); --mesh-hi: rgba(255, 255, 255, .7); --mesh-veil: .55;
  color-scheme: light;
}

/* ---------- 2. Base ---------- */
.ms, .ms *, .ms *::before, .ms *::after { box-sizing: border-box; }
.ms { margin: 0; background: var(--bg); color: var(--fg); font: 400 var(--fs-body)/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; }
.ms ::selection { background: var(--accent); color: var(--on-accent); }
.ms :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* tipografia: títulos em Geist 500 com destaque em itálico fino (<em>) */
.ms-display, .ms-h1, .ms-h2, .ms-h3 { margin: 0; font-family: var(--font-sans); font-weight: 500; }
.ms-display { font-size: var(--fs-display); line-height: .9; letter-spacing: -0.06em; }
.ms-h1 { font-size: var(--fs-h1); line-height: .95; letter-spacing: -0.05em; }
.ms-h2 { font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.045em; }
.ms-h3 { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.03em; }
.ms-display em, .ms-h1 em, .ms-h2 em, .ms-h3 em { font-style: italic; font-weight: 200; }
.ms-lead { margin: 0; font-size: var(--fs-lead); line-height: 1.4; color: var(--fg); }
.ms-body { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--fg-muted); max-width: 66ch; }
.ms-small { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); }
.ms-product { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1; } /* nome de produto: combine com .ms-h1 ou .ms-h2 */
.ms-nw { white-space: nowrap; } /* última palavra + pontuação colada ("conversa.") */

/* ---------- 3. Fundamentos visuais ---------- */
/* corte de 45° no canto superior esquerdo: aplique .ms-cut e escolha o tamanho */
.ms-cut { --cut: var(--cut-l); clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); }
.ms-cut--xl { --cut: var(--cut-xl); } .ms-cut--m { --cut: var(--cut-m); } .ms-cut--s { --cut: var(--cut-s); }
@media (max-width: 700px) { .ms-cut--xl { --cut: var(--cut-l); } }
/* corte com contorno: o clip-path apaga a borda no trecho cortado, então a diagonal é desenhada à parte (mesma cor da borda).
   Use quando o elemento tem borda: <div class="ms-cut ms-cut--outline">. Ocupa o ::after do elemento.
   A linha tem 1,42 px: na diagonal, 1 px parece mais fino que nas bordas retas. */
.ms-cut--outline { position: relative; border: 1px solid var(--cut-line, var(--border)); }
.ms-cut--outline::after { content: ''; position: absolute; z-index: 5; left: -1px; top: -1px; width: calc(var(--cut) * 1.4142); height: 1.42px;
  background: var(--cut-line, var(--border)); transform-origin: 0 0; transform: translateY(calc(var(--cut) - .5px)) rotate(-45deg); pointer-events: none; }

/* grão: um <span class="ms-grain"> dentro de um elemento com position: relative/overflow: hidden */
@keyframes ms-grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-6%, 4%); } 50% { transform: translate(5%, -7%); } 75% { transform: translate(-3%, -4%); } 100% { transform: translate(7%, 5%); } }
.ms-grain { position: absolute; inset: -50%; pointer-events: none; background: var(--grain-url) repeat; background-size: 256px 256px; opacity: var(--grain-strong); animation: ms-grain .8s steps(4) infinite; }
.ms-grain--medium { opacity: var(--grain-medium); } .ms-grain--subtle { opacity: var(--grain-subtle); }
.ms-block .ms-grain { mix-blend-mode: overlay; opacity: calc(var(--grain-strong) * var(--grain-block-boost)); }
.ms-block .ms-grain--medium { opacity: calc(var(--grain-medium) * var(--grain-block-boost)); }
.ms-block .ms-grain--subtle { opacity: calc(var(--grain-subtle) * var(--grain-block-boost)); }

/* bloco de cor de seção inteira (Acid ou roxo), mesma tinta nos dois temas */
.ms-block { position: relative; isolation: isolate; overflow: hidden; --ink-bg: #0c0c0c; --ink-fg: #ffffff; --ink-bg-hover: #000000; padding: var(--section-y) var(--gutter); }
.ms-block--acid { background: var(--acid); color: var(--ink); --fg-muted: rgba(18, 18, 18, .72); --accent: var(--ink); --on-accent: var(--acid); --focus: var(--ink); }
.ms-block--purple { background: var(--purple); color: var(--white); --fg-muted: #e3ccff; --accent: var(--acid); --on-accent: var(--ink); --focus: var(--acid); }

/* malha de degradê: <div class="ms-mesh ms-mesh--clean"></div> como primeiro filho de um elemento isolado */
.ms-mesh { position: absolute; z-index: -1; pointer-events: none; }
.ms-mesh--clean { inset: 10% -12% -30% -6%; filter: blur(56px);
  background: radial-gradient(18% 24% at 40% 54%, var(--mesh-hi), transparent 72%), radial-gradient(24% 32% at 40% 66%, var(--mesh-purple), transparent 70%),
    radial-gradient(32% 40% at 22% 74%, var(--mesh-lilac), transparent 72%), radial-gradient(14% 16% at 12% 88%, var(--mesh-acid), transparent 70%),
    radial-gradient(12% 20% at 95% 48%, var(--mesh-acid-soft), transparent 72%), radial-gradient(28% 30% at 70% 92%, var(--mesh-purple), transparent 74%),
    radial-gradient(12% 14% at 86% 86%, var(--mesh-acid), transparent 72%); }
/* orgânica: <div class="ms-mesh ms-mesh--organic"><i></i><i></i><i></i><i></i><i></i><b></b></div> · no máximo uma por página */
@keyframes ms-ooze { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(14%, -8%) scale(1.18); } 100% { transform: translate(-10%, 6%) scale(.92); } }
@keyframes ms-swirl { to { transform: rotate(360deg); } }
.ms-mesh--organic { inset: 0; filter: blur(48px) saturate(1.15); }
.ms-mesh--organic i { position: absolute; border-radius: 50%; will-change: transform; animation: ms-ooze 24s ease-in-out infinite alternate; }
.ms-mesh--organic i:nth-child(1) { width: 52%; height: 70%; left: 2%; top: 38%; background: var(--mesh-purple); }
.ms-mesh--organic i:nth-child(2) { width: 46%; height: 62%; left: 26%; top: 18%; background: var(--mesh-lilac); animation-duration: 29s; animation-delay: -9s; }
.ms-mesh--organic i:nth-child(3) { width: 34%; height: 46%; left: 58%; top: 50%; background: var(--mesh-acid); animation-duration: 21s; animation-delay: -4s; }
.ms-mesh--organic i:nth-child(4) { width: 30%; height: 40%; left: 72%; top: 6%; background: var(--mesh-acid-soft); animation-duration: 34s; animation-delay: -15s; }
.ms-mesh--organic i:nth-child(5) { width: 28%; height: 36%; left: 34%; top: 62%; background: var(--mesh-hi); animation-duration: 26s; animation-delay: -12s; }
.ms-mesh--organic b { position: absolute; inset: 15%; opacity: var(--mesh-veil); border-radius: 50%; filter: blur(30px);
  background: conic-gradient(from 0deg, var(--mesh-purple), var(--mesh-lilac), var(--mesh-acid), var(--mesh-lilac), var(--mesh-purple)); animation: ms-swirl 60s linear infinite; }
/* no escuro: o brilho soma com o fundo e o Acid nunca fica fraco solto (vira oliva) */
:root:not([data-theme="light"]) .ms-mesh { mix-blend-mode: screen; }
:root:not([data-theme="light"]) .ms-mesh--organic i:nth-child(3) { width: 20%; height: 28%; left: 66%; top: 58%; background: rgba(228, 247, 1, .8); }
:root:not([data-theme="light"]) .ms-mesh--organic i:nth-child(4) { background: rgba(170, 100, 255, .35); }
:root:not([data-theme="light"]) .ms-mesh--organic i:nth-child(5) { width: 40%; height: 50%; left: 52%; top: 44%; background: rgba(196, 155, 255, .55); z-index: -1; }
:root:not([data-theme="light"]) .ms-mesh--organic b { background: conic-gradient(from 0deg, var(--mesh-purple), var(--mesh-lilac), var(--mesh-purple)); }
.ms-paused .ms-mesh--organic i, .ms-paused .ms-mesh--organic b, .ms-paused .ms-grain { animation-play-state: paused; }

/* ---------- 4. Componentes ---------- */

/* Rótulo de seção: /Seção/ em mono caixa alta (o elemento mais repetido da marca) */
.ms-label { font: 500 var(--fs-label)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.ms-label--slash::before { content: '/'; } .ms-label--slash::after { content: '/'; }

/* Cabeçalho de seção: rótulo + título + parágrafo */
.ms-head { display: grid; gap: 14px; margin-bottom: clamp(24px, 3.5vw, 40px); }
.ms-head .ms-h2 { max-width: 18ch; }
.ms-head p { margin: 0; color: var(--fg-muted); max-width: 52ch; }

/* Botão: retângulo de cantos retos (sem pílula, sem corte), seta que gira 45° no hover (nível 1) */
.ms-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 0;
  font: 600 15px/1 var(--font-sans); text-decoration: none; cursor: pointer; background: var(--accent); color: var(--on-accent);
  transition: background-color var(--dur-fast) var(--ease-productive), color var(--dur-fast) var(--ease-productive); }
/* tinta = contraste máximo com o fundo: escura no claro e sobre blocos de cor; clara no tema escuro (escura sobre preto sumia) */
.ms-btn--ink { background: var(--ink-bg); color: var(--ink-fg); }
.ms-btn--ink:hover { background: var(--ink-bg-hover); }
.ms-btn--ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--border-strong); }
.ms-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--fg); }
.ms-btn--xl { min-height: 72px; padding: 0 28px; font-size: 18px; width: min(100%, 460px); }
.ms-btn .ms-arr { width: 20px; height: 20px; display: inline-grid; place-items: center; transition: transform var(--dur-moderate) var(--ease-productive); }
.ms-btn .ms-arr svg { width: 20px; height: 20px; }
.ms-btn:hover .ms-arr, .ms-btn:focus-visible .ms-arr { transform: rotate(45deg); }
.ms-btn:disabled, .ms-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.ms-btn:disabled .ms-arr, .ms-btn[aria-disabled="true"] .ms-arr { transform: none; }

/* Botão redondo de seta (único botão com raio: é um ícone, não uma ação de texto) */
.ms-round { width: 44px; height: 44px; border: 0; border-radius: var(--radius-pill); display: inline-grid; place-items: center; cursor: pointer; background: var(--fg); color: var(--bg); }
.ms-round svg { width: 20px; height: 20px; transition: transform var(--dur-moderate) var(--ease-productive); }
.ms-round:hover svg, .ms-round:focus-visible svg { transform: rotate(45deg); }

/* Link de texto: sublinhado, hover na cor do tema (só a cor muda, nível 1) */
.ms-link { color: var(--fg); font-weight: 500; text-underline-offset: 4px; transition: color var(--dur-fast) var(--ease-productive); }
.ms-link:hover, .ms-link:focus-visible { color: var(--accent); }

/* Chip */
.ms-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .02em; text-transform: uppercase; color: var(--fg); }
.ms-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Acordeão (<details>): altura desliza (expo-out na abertura, mais curto no fechamento), conteúdo entra com fade curto.
   data-ms-accordion="single" no contêiner = um aberto por vez (FAQ); sem valor = vários abertos (listas de serviço). Comportamento em milo.js. */
.ms-acc { border-top: 1px solid var(--border); }
.ms-acc details { border-bottom: 1px solid var(--border); }
.ms-acc summary { display: grid; grid-template-columns: 40px 1fr 24px; gap: 12px; align-items: center; padding: 20px 0; cursor: pointer; list-style: none; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.ms-acc summary::-webkit-details-marker { display: none; }
.ms-acc .ms-idx { font: 600 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--fg-muted); }
.ms-acc .ms-acc-body { padding: 0 36px 22px 52px; color: var(--fg-muted); max-width: 64ch; }
.ms-plus { position: relative; width: 18px; height: 18px; justify-self: end; }
.ms-plus::before, .ms-plus::after { content: ''; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: currentColor; transition: transform var(--dur-moderate) var(--ease-productive); }
.ms-plus::after { transform: rotate(90deg); }
details[open] > summary .ms-plus::after { transform: rotate(0deg); }

/* Ícone (Lucide, decisão do Tulio em 07/10): SVG de linha copiado de lucide.dev, traço 2, cor do texto.
   <svg class="ms-icon" viewBox="0 0 24 24" aria-hidden="true">…</svg> · em botão sem texto, aria-label no botão */
.ms-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ms-icon--s { width: 16px; height: 16px; } .ms-icon--l { width: 24px; height: 24px; }

/* Logo da Milo (3 barras): <svg class="ms-mark" data-ms-assemble> monta no hover (nível 1) e, com data-ms-assemble="enter", também quando aparece (nível 2) */
.ms-mark { display: block; width: 30px; height: auto; color: var(--accent); overflow: visible; }
/* Logo · revelações (Milo.reveal / data-ms-reveal="montagem|corte|traco|decodificacao|rastro|malha"): escondida até revelar, só com JS */
.ms-js [data-ms-reveal]:not([data-ms-revealed]) { visibility: hidden; }
/* Logo viva · deslize (nível 1): as barras andam um passo na diagonal no hover/foco do link ou botão que a contém */
.ms-mark--slide path { transition: transform var(--dur-fast) var(--ease-productive); }
.ms-mark--slide path:nth-child(2) { transition-delay: 30ms; } .ms-mark--slide path:nth-child(3) { transition-delay: 60ms; }
:is(a, button, [data-ms-assemble-host]):is(:hover, :focus-visible) .ms-mark--slide path, .ms-mark--slide.is-active path { transform: translate(46px, -46px); }
/* Logo viva · ímã (nível 1, só logo grande e só mouse): data-ms-magnet */
.ms-mark[data-ms-magnet] path { transition: transform 420ms var(--ms-snap, cubic-bezier(0.2, 0, 0.38, 0.9)); }
/* Logo com a malha orgânica dentro (R9, versão especial): <div class="ms-mark-mesh"><div class="ms-mesh ms-mesh--organic">…</div></div> */
.ms-mark-mesh { --mark-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201575.36%20625.85%22%3E%3Cpath%20d=%22M772.88.24h-193.35c-7.86,0-15.4,3.12-20.96,8.68L8.68,558.81c-5.56,5.56-8.68,13.1-8.68,20.96v16.44c0,16.37,13.27,29.64,29.64,29.64h193.35c7.86,0,15.4-3.12,20.96-8.68L793.84,67.28c5.56-5.56,8.68-13.1,8.68-20.96v-16.44c0-16.37-13.27-29.64-29.64-29.64Z%22/%3E%3Cpath%20d=%22M1186.65,29.88c0-16.37-13.27-29.64-29.64-29.64h-205.61L912.02,0c-7.92-.05-15.53,3.08-21.14,8.68l-158.19,158.19c-5.56,5.56-8.68,13.1-8.68,20.96v27.66c0,7.87-3.13,15.41-8.69,20.97l-322.49,322.22c-5.56,5.56-8.69,13.1-8.69,20.97v16.57c0,16.37,13.27,29.64,29.64,29.64h193.35c7.86,0,15.4-3.12,20.96-8.68L1177.97,67.28c5.56-5.56,8.68-13.1,8.68-20.96v-16.44Z%22/%3E%3Cpath%20d=%22M1575.36,29.88c0-16.37-13.27-29.64-29.64-29.64h-205.61L1300.73,0c-7.92-.05-15.53,3.08-21.14,8.68l-158.19,158.19c-5.56,5.56-8.68,13.1-8.68,20.96v27.66c0,7.87-3.13,15.41-8.69,20.97l-322.49,322.22c-5.56,5.56-8.69,13.1-8.69,20.97v16.57c0,16.37,13.27,29.64,29.64,29.64h193.35c7.86,0,15.4-3.12,20.96-8.68L1566.68,67.28c5.56-5.56,8.68-13.1,8.68-20.96v-16.44Z%22/%3E%3C/svg%3E");
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 1575.36 / 625.85; background: var(--ink);
  -webkit-mask: var(--mark-mask) center / 100% 100% no-repeat; mask: var(--mark-mask) center / 100% 100% no-repeat; }
:root[data-theme="light"] .ms-mark-mesh { background: var(--purple); }
.ms-mark-mesh .ms-mesh--organic { inset: -10%; filter: blur(16px) saturate(1.2); }

/* Aberturas de tela (Milo.opening, nível 3, no máximo uma por página): a capa cobre a tela (ou o root) e sai */
html.ms-opening-on { overflow: hidden; }
.ms-opening { position: absolute; inset: 0; z-index: 1000; overflow: hidden; }
.ms-opening--fixed { position: fixed; }
.ms-op-cover { position: absolute; inset: 0; display: grid; place-items: center; background: var(--bg-subtle); }
.ms-op-cover .ms-mark { width: min(30%, 420px); color: var(--accent); }
.ms-opening--contida .ms-op-cover .ms-mark { width: min(12%, 120px); }
.ms-op-cover--acid { background: var(--accent); }
.ms-op-cover--acid .ms-mark { position: relative; z-index: 1; color: var(--on-accent); }
.ms-op-cover--acid.is-open { background: transparent; }
.ms-op-blinds { position: absolute; left: 50%; top: 50%; display: grid; grid-template-rows: repeat(9, 1fr); transform: translate(-50%, -50%) rotate(-45deg); }
.ms-op-blinds i { background: var(--accent); box-shadow: 0 1px 0 var(--accent), 0 -1px 0 var(--accent); }
.ms-op-base { opacity: .14; color: var(--fg); }
.ms-op-count { position: absolute; left: clamp(12px, 2.4%, 24px); bottom: clamp(10px, 2%, 20px); font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.ms-op-cut { position: absolute; top: 0; width: 2px; background: var(--accent); transform-origin: 0 0; transform: rotate(45deg) scaleY(0); box-shadow: 0 0 20px 3px color-mix(in srgb, var(--accent) 55%, transparent); }
.ms-opening canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- 4b. Componentes · prioridade média ---------- */

/* Texto vertical (de baixo pra cima) e trilho: logo/linha/texto empilhados numa coluna estreita (barra lateral, card do case, sócios) */
.ms-vert { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.ms-vert--name { font: 600 17px/1 var(--font-sans); letter-spacing: -0.02em; text-transform: none; color: var(--fg); }
.ms-rail { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ms-rail-line { flex: 1; width: 1px; min-height: 24px; background: var(--rail-line, var(--border-strong)); }

/* Faixa em carrossel: <div class="ms-marquee"><div class="ms-marquee-track"><span>…</span></div></div>
   O milo.js repete os itens até cobrir a largura (~40 px/s). Para no hover, fora da tela, com .ms-is-paused e com movimento reduzido. */
@keyframes ms-marquee { to { transform: translateX(-50%); } }
.ms-marquee { position: relative; overflow: hidden; padding: 12px 0; background: var(--purple); color: var(--white); }
.ms-marquee--acid { background: var(--acid); color: var(--ink); }
.ms-marquee--tilt { transform: rotate(-2deg); }
.ms-marquee-track { display: flex; width: max-content; animation: ms-marquee 30s linear infinite; }
.ms-marquee-track > * { display: inline-flex; align-items: center; gap: 10px; padding: 0 28px; white-space: nowrap; font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ms-marquee-track > *::before { content: '/'; opacity: .5; }
.ms-marquee--brand .ms-marquee-track > * { font: 600 15px/1 var(--font-sans); letter-spacing: -0.02em; text-transform: none; }
.ms-marquee--brand .ms-marquee-track > *::before { content: none; }
.ms-marquee--brand .ms-mark { width: 26px; color: currentColor; }
.ms-marquee:hover .ms-marquee-track, .ms-marquee.ms-is-paused .ms-marquee-track, .ms-paused > .ms-marquee .ms-marquee-track { animation-play-state: paused; }

/* Botão de pausa (WCAG 2.2.2: tudo que se move sozinho por mais de 5 s precisa de pausa): <button class="ms-pause" data-ms-pause="#alvo"> */
.ms-pause { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid var(--border-strong); background: var(--bg); color: var(--fg); cursor: pointer; font: 600 11px/1 var(--font-mono); }
.ms-pause:hover { border-color: var(--fg); }
.ms-pause::before { content: '❚❚'; letter-spacing: -1px; }
.ms-pause[aria-pressed="true"]::before { content: '▶'; letter-spacing: 0; }

/* Card com corte: mídia com corte de 45° + texto embaixo + meta vertical à direita. Em grade de linhas finas: .ms-cards */
.ms-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); border: 1px solid var(--border); }
.ms-cards > * { border-right: 1px solid var(--border); }
.ms-cards > *:last-child { border-right: 0; }
.ms-card { display: grid; align-content: start; padding: 10px 10px 32px; color: inherit; text-decoration: none; }
.ms-card-media { --cut: var(--cut-l); position: relative; overflow: hidden; aspect-ratio: 1200 / 876; clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); background: var(--surface); }
.ms-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); transition: filter var(--dur-slow) var(--ease-productive); }
.ms-card:hover .ms-card-media img, .ms-card:focus-within .ms-card-media img { filter: none; }
.ms-card-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 24px 8px 0 18px; }
.ms-card-body .ms-h3 { font-size: clamp(1.25rem, 1.8vw, 1.625rem); }
.ms-card-body p { margin: 6px 0 0; color: var(--fg-muted); font-size: var(--fs-small); line-height: 1.5; }
@media (hover: none) { .ms-card-media img { filter: none; } }

/* Campo com linha + botão redondo (newsletter, busca curta): <form class="ms-field"> */
.ms-field { display: grid; gap: 10px; }
.ms-field-row { display: flex; align-items: center; gap: 12px; border-bottom: 1.5px solid var(--fg); transition: border-color var(--dur-fast) var(--ease-productive); }
.ms-field-row:focus-within { border-bottom-width: 2.5px; }
.ms-field input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; padding: 14px 0; font: 500 19px/1.2 var(--font-sans); color: var(--fg); }
.ms-field input::placeholder { color: var(--fg-muted); }
.ms-field .ms-round { margin-bottom: 6px; }
.ms-field [aria-invalid="true"] { caret-color: var(--status-error); }
.ms-field-row:has([aria-invalid="true"]) { border-bottom-color: var(--status-error); }
.ms-field-msg { margin: 0; font-size: 15px; font-weight: 500; }
.ms-field-msg:empty { display: none; }
.ms-field-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fg-muted); max-width: 62ch; }

/* Seletor de tema (sistema · claro · escuro): <div class="ms-theme" data-ms-theme> — quadrado com corte pequeno, indicador desliza (spring.snap, nível 1) */
.ms-theme { --cut: 10px; position: relative; display: inline-grid; grid-template-columns: repeat(3, 36px); padding: 3px; gap: 0; background: var(--border-strong);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); }
.ms-theme::after { content: ''; position: absolute; inset: 1px; z-index: 0; background: var(--bg); clip-path: polygon(9.6px 0, 100% 0, 100% 100%, 0 100%, 0 9.6px); }
.ms-theme button { position: relative; z-index: 2; height: 32px; display: grid; place-items: center; border: 0; background: transparent; color: var(--fg-muted); cursor: pointer; }
.ms-theme button[aria-pressed="true"] { color: var(--bg); }
.ms-theme button svg { width: 16px; height: 16px; }
.ms-theme .ms-ind { position: absolute; z-index: 1; top: 3px; left: 3px; width: 36px; height: 32px; background: var(--fg); clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px); }

/* Contador: <strong data-ms-count>+38%</strong> conta de 0 até o valor quando aparece (800 ms), mantendo prefixo e sufixo */
[data-ms-count] { font-variant-numeric: tabular-nums; }

/* Abas: o conteúdo troca na hora (nível 0); só a barra de destaque desliza (spring.snap, nível 1). Teclado: setas, Home, End. */
.ms-tabs { display: grid; gap: 20px; }
.ms-tablist { position: relative; display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.ms-tablist [role="tab"] { position: relative; border: 0; background: transparent; padding: 12px 14px; font: 500 15px/1 var(--font-sans); color: var(--fg-muted); cursor: pointer; }
.ms-tablist [role="tab"][aria-selected="true"] { color: var(--fg); }
.ms-tab-bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--accent); }
.ms-tabs [role="tabpanel"][hidden] { display: none; }

/* ---------- 4c. Grade, produto e dados · EXPERIMENTAL (2026-10-07, itens "adaptar" da triagem) ----------
   Viram estáveis quando o primeiro produto (Cockpit web) usar. Forma reta: sem raio, exceto chip/pílula. */

/* Grade de colunas: <div class="ms-grid"><div style="--span:6; --span-m:4">…</div></div> · fora dela, .ms-container */
.ms-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.ms-grid { display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); gap: var(--grid-gap); }
.ms-grid > * { grid-column: span min(var(--span, 12), var(--grid-cols)); min-width: 0; }
@media (max-width: 1024px) { .ms-grid > * { grid-column: span min(var(--span-m, var(--span, 8)), 8); } }
@media (max-width: 640px) { .ms-grid > * { grid-column: span min(var(--span-s, 4), 4); } }

/* Mensagem de status: <div class="ms-alert ms-alert--success" role="status"><b>Sucesso</b><span>…</span></div>
   erro usa role="alert". Flutuante: Milo.toast('error', 'Erro', 'Falha ao publicar.'). Cores chapadas, iguais nos dois temas. */
.ms-alert { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--status-info); color: var(--status-info-fg); }
.ms-alert b { font: 500 1.5rem/1 var(--font-sans); letter-spacing: -0.03em; flex: none; }
.ms-alert span { font-size: var(--fs-small); line-height: 1.35; }
.ms-alert--success { background: var(--status-success); color: var(--status-success-fg); }
.ms-alert--warning { background: var(--status-warning); color: var(--status-warning-fg); }
.ms-alert--error { background: var(--status-error); color: var(--status-error-fg); }
.ms-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 950; width: min(380px, calc(100vw - 32px)); display: grid; gap: 8px; }
.ms-toasts .ms-alert { box-shadow: 0 12px 32px rgba(0, 0, 0, .3); }

/* Selo (variação do chip): sempre com texto, nunca status só pela cor */
.ms-chip--success, .ms-chip--warning, .ms-chip--error, .ms-chip--info { border-color: transparent; }
.ms-chip--success { background: var(--status-success); color: var(--status-success-fg); }
.ms-chip--warning { background: var(--status-warning); color: var(--status-warning-fg); }
.ms-chip--error { background: var(--status-error); color: var(--status-error-fg); }
.ms-chip--info { background: var(--status-info); color: var(--status-info-fg); }
.ms-chip--neutral { background: var(--surface); }
/* Pílula de rótulo (dados/decks): destaque, sólida, neutra (padrão) e "mundo" (assunto externo) */
.ms-chip--accent { border-color: var(--accent); color: var(--accent); }
.ms-chip--solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ms-chip--world { border-color: var(--world); color: var(--world-text); }

/* Segmentado (opções que se excluem: período, versão, visão). <div class="ms-seg" data-ms-seg role="group" aria-label="…"><button aria-pressed="true">…</button>…</div>
   O destaque desliza com spring.snap (nível 1). Setas mudam a opção. Evento "ms:change" no contêiner. */
.ms-seg { position: relative; justify-self: start; display: inline-grid; grid-auto-flow: column; padding: 3px; border: 1px solid var(--border-strong); background: var(--bg-subtle); }
.ms-seg button { position: relative; z-index: 1; border: 0; background: transparent; color: var(--fg-muted); font: 500 14px/1 var(--font-sans); min-height: 36px; padding: 0 16px; cursor: pointer; transition: color var(--dur-fast) var(--ease-productive); }
.ms-seg button:hover { color: var(--fg); }
.ms-seg button[aria-pressed="true"] { color: var(--bg); }
.ms-seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ms-seg .ms-ind { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; background: var(--fg); }

/* Campo de formulário completo (produto): <div class="ms-form-field"><label for>…</label><input class="ms-input" aria-describedby>…<p class="ms-error"></p></div> */
.ms-form-field { display: grid; gap: 8px; max-width: 420px; }
.ms-form-field label { font-weight: 500; font-size: 15px; color: var(--fg); }
.ms-hint { font-size: var(--fs-small); color: var(--fg-muted); margin: 0; }
.ms-input { font: 400 16px/1.4 var(--font-sans); color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0; min-height: 48px; padding: 0 16px; width: 100%;
  transition: border-color var(--dur-fast) var(--ease-productive), box-shadow var(--dur-fast) var(--ease-productive); }
textarea.ms-input { padding: 12px 16px; min-height: 112px; resize: vertical; }
.ms-input::placeholder { color: var(--fg-muted); }
.ms-input:hover:not(:disabled) { border-color: var(--fg-muted); }
.ms-input:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.ms-input[aria-invalid="true"] { border-color: var(--status-error); box-shadow: 0 0 0 1px var(--status-error); }
.ms-input:disabled { opacity: .45; cursor: not-allowed; }
.ms-error { margin: 0; font-size: var(--fs-small); color: var(--status-error-text); }
.ms-error:empty { display: none; }

/* Depoimento: nome sempre visível; o resultado abre no botão (nível 2). <figure class="ms-quote">…<div class="ms-quote-more"><div>…</div></div><button data-ms-quote>Ver resultado</button></figure> */
.ms-quote { margin: 0; border: 1px solid var(--border); background: var(--surface); padding: 24px; display: grid; gap: 16px; color: var(--fg); }
.ms-quote blockquote { margin: 0; font-size: var(--fs-lead); line-height: 1.4; letter-spacing: -0.01em; }
.ms-quote figcaption { display: flex; gap: 12px; align-items: center; font-size: var(--fs-small); color: var(--fg-muted); }
.ms-quote figcaption strong { display: block; color: var(--fg); font-size: 15px; }
.ms-avatar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--purple); color: var(--white); font-weight: 600; overflow: hidden; }
.ms-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ms-quote-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease-expo-out); }
.ms-quote-more > div { overflow: hidden; }
.ms-quote-more p { margin: 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 15px; color: var(--fg-muted); }
.ms-quote.is-open .ms-quote-more { grid-template-rows: 1fr; }
.ms-quote [data-ms-quote] { justify-self: start; border: 0; background: none; padding: 0; min-height: 24px; cursor: pointer; font: 500 14px/1 var(--font-sans); color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.ms-quote [data-ms-quote]:hover { color: var(--accent); }

/* Aviso de novidade (produto): uma vez por pessoa. <dialog class="ms-announce" data-ms-announce="id"> (centro, modal) ou
   <div class="ms-announce ms-announce--corner" data-ms-announce="id" hidden> (canto, não rouba o foco). Milo.announce(el). */
.ms-announce { position: relative; width: min(380px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border); background: var(--surface); color: var(--fg); box-shadow: 0 24px 64px rgba(0, 0, 0, .35); overflow: hidden; }
dialog.ms-announce { margin: auto; }
dialog.ms-announce::backdrop { background: rgba(0, 0, 0, .55); }
.ms-announce--corner { position: fixed; left: 16px; bottom: 16px; z-index: 940; }
.ms-announce-visual { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink); display: grid; place-items: center; }
.ms-announce-visual .ms-mark { width: 116px; color: var(--acid); position: relative; }
.ms-announce-body { padding: 20px 24px 24px; display: grid; gap: 10px; }
.ms-announce-body h3 { margin: 0; font: 500 1.25rem/1.2 var(--font-sans); letter-spacing: -0.02em; }
.ms-announce-body p { margin: 0; font-size: 15px; color: var(--fg-muted); }
.ms-announce-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ms-announce .ms-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border: 0; background: rgba(255, 255, 255, .14); color: var(--white); cursor: pointer; display: grid; place-items: center; font-size: 16px; }
.ms-announce .ms-x:hover { background: rgba(255, 255, 255, .28); }

/* ---------- Dados (decks e Cockpit) ----------
   Semântica (Tulio, 07/10, opção A): a cor de destaque do tema = o que a Milo afirma (Acid no escuro, roxo no claro);
   a outra cor forte = o que o mundo fez (roxo no escuro, tinta no claro); cinza = material de trabalho; sólido converte, hachurado não.
   Os dados seguem o tema da página. Deck que queira o palco escuro numa página clara: <div class="ms-data" data-theme="dark">. */
.ms-data { background: var(--bg); color: var(--fg); }

/* Cartão de dado: <article class="ms-stat"><span class="ms-label">…</span><strong class="ms-stat-n">…</strong><p class="ms-stat-cap">…</p></article>
   Variante ms-stat--acid no máximo uma vez por peça; corte (ms-cut--m) só no cartão principal. */
.ms-stat { background: var(--surface); border: 1px solid var(--border); padding: 26px 24px; display: grid; gap: 12px; align-content: start; }
.ms-stat-n { font: 500 calc(var(--fs-h3) * 1.5)/1 var(--font-sans); letter-spacing: -0.04em; color: var(--affirm); font-variant-numeric: tabular-nums; }
.ms-stat-cap { margin: 0; font-size: var(--fs-small); color: var(--fg-muted); }
.ms-stat--acid { background: var(--acid); border-color: var(--acid); }
.ms-stat--acid, .ms-stat--acid * { color: var(--ink) !important; }
.ms-progress { height: 8px; background: var(--track); overflow: hidden; }
.ms-progress > span { display: block; height: 100%; width: var(--value, 0%); background: var(--affirm); transform-origin: left; }
.ms-stat--acid .ms-progress { background: rgba(18, 18, 18, .18); }
.ms-stat--acid .ms-progress > span { background: var(--ink); }

/* O card é a barra: Milo.bars(el, [{ label, value, hi }], { unit }). Rótulo entra na barra depois de 34%; acima de 86% o número também entra. */
.ms-bars { display: grid; gap: 22px; }
.ms-bar-label { font-size: var(--fs-small); color: var(--fg-muted); margin-bottom: 8px; }
.ms-bar.is-hi .ms-bar-label { color: var(--fg); }
.ms-bar-track { position: relative; height: 64px; background: var(--track); }
.ms-bar-fill { position: absolute; inset: 0 auto 0 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-inline: 20px; transform-origin: left;
  background-color: var(--border); background-image: var(--hatch); }
.ms-bar.is-hi .ms-bar-fill { background: var(--affirm); }
.ms-bar-in { font: 500 1.25rem/1 var(--font-sans); letter-spacing: -0.02em; white-space: nowrap; }
.ms-bar-chip { position: absolute; top: 50%; translate: 0 -50%; display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--bg); color: var(--fg); font: 500 1.125rem/1 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ms-bar.is-hi .ms-bar-chip { border-color: var(--affirm); color: var(--affirm); }
.ms-bar-chip i { font-style: normal; font-size: 13px; opacity: .75; }
.ms-bar-chip.is-inside { position: static; translate: none; background: transparent; border: 0; padding: 0; }

/* Gráfico de onda: Milo.wave(el, { series: [{ v, x, label, note, world }], focus }). Curva monótona (não ultrapassa o dado). */
.ms-wave { position: relative; padding-top: 110px; touch-action: pan-y; }
.ms-wave-box { position: relative; }
.ms-wave svg { display: block; width: 100%; height: auto; overflow: visible; color: var(--affirm); }
.ms-wave .gl { stroke: var(--border); stroke-width: 1; opacity: .55; }
.ms-wave .ln { fill: none; stroke: var(--affirm); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.ms-wave .ghost { fill: none; stroke: var(--border); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ms-wave .ax { fill: var(--fg-muted); font: 500 12.5px var(--font-sans); }
.ms-wave .ax.on { fill: var(--fg); font-weight: 600; }
.ms-wave .yx { fill: var(--border-strong); font: 400 11.5px var(--font-sans); }
.ms-wave .band { fill: color-mix(in srgb, var(--fg) 4.5%, transparent); transition: fill 340ms; }
.ms-wave .stem { stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .3; transition: stroke 340ms, opacity 340ms; }
.ms-wave .halo { fill: none; stroke: var(--fg); stroke-width: 1.5; opacity: .22; transition: stroke 340ms, opacity 340ms; }
.ms-wave .dot { fill: var(--fg); stroke: var(--surface); stroke-width: 3.5; transition: fill 340ms, filter 340ms; }
.ms-wave .rider { offset-rotate: 0deg; }
.ms-wave .pulse { fill: none; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ms-wave.is-lit { --lit: var(--affirm); }
.ms-wave.is-lit.is-world { --lit: var(--world); }
.ms-wave.is-lit .band { fill: color-mix(in srgb, var(--lit) 10%, transparent); }
.ms-wave.is-lit .stem { stroke: var(--lit); opacity: .6; }
.ms-wave.is-lit .halo { stroke: var(--lit); opacity: .5; }
.ms-wave.is-lit .dot { fill: var(--lit); filter: drop-shadow(0 0 9px var(--lit)); }
.ms-wave.is-lit .pulse { stroke: var(--lit); }
.ms-wave.is-lit .ax.on { fill: var(--lit); }
.ms-wave-tip { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); background: var(--bg); border: 1px solid var(--border); padding: 10px 14px; pointer-events: none; white-space: nowrap; }
.ms-wave-tip .r1 { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--fg-muted); }
.ms-wave-tip .r1 b { width: 16px; height: 3px; background: var(--border-strong); flex: none; }
.ms-wave.is-lit .ms-wave-tip .r1 b { background: var(--lit); }
.ms-wave-tip .r2 { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.ms-wave-tip .n { font: 500 1.75rem/1 var(--font-sans); letter-spacing: -0.03em; color: var(--fg); font-variant-numeric: tabular-nums; }
.ms-wave-tip .note { padding-left: 14px; border-left: 1px solid var(--border); font-size: 12.5px; line-height: 1.38; max-width: 34ch; white-space: normal; color: var(--world-text); }
.ms-wave-tip .note:empty { display: none; }

/* Objetivos no tempo (Gantt): Milo.gantt(el, { cols, rows: [{ name, start, end, core, hi }], marks: [{ at, label }] }) · posições em % (escala real).
   O marco externo vira linha tracejada atravessando todas as faixas. Nada de % de progresso dentro das barras. */
.ms-gantt { --rail: 240px; --gap: 20px; position: relative; }
.ms-gantt-caps { position: relative; height: 30px; margin: 0 0 12px calc(var(--rail) + var(--gap)); }
.ms-gantt-cap { position: absolute; top: 0; transform: translateX(-50%); background: var(--world); color: var(--white); border-radius: var(--radius-pill); padding: 6px 12px; font: 600 12px/1.2 var(--font-sans); letter-spacing: .02em; white-space: nowrap; }
.ms-gantt-cap.is-right { transform: translateX(-100%); }
.ms-gantt-body { position: relative; }
.ms-gantt-row { display: grid; grid-template-columns: var(--rail) 1fr; column-gap: var(--gap); align-items: center; min-height: 60px; position: relative; z-index: 1; }
.ms-gantt-name { font-size: 16px; line-height: 1.25; color: var(--fg-muted); }
.ms-gantt-row.is-hi .ms-gantt-name { color: var(--fg); font-weight: 600; }
.ms-gantt-track { position: relative; height: 32px; }
.ms-gantt-bar { position: absolute; top: 0; bottom: 0; background: var(--surface); border: 1px solid var(--border-strong); transform-origin: left; overflow: hidden; }
.ms-gantt-bar .core { position: absolute; inset: 0 auto 0 0; background: var(--border-strong); }
.ms-gantt-row.is-hi .ms-gantt-bar { background: var(--affirm); border-color: var(--affirm); }
.ms-gantt-bar, .ms-gantt-name { transition: background-color var(--dur-fast) var(--ease-productive), border-color var(--dur-fast) var(--ease-productive), opacity var(--dur-fast) var(--ease-productive), color var(--dur-fast) var(--ease-productive); }
.ms-gantt-row.is-dim .ms-gantt-bar { opacity: .4; }
.ms-gantt-row.is-dim .ms-gantt-name { opacity: .55; }
.ms-gantt-grid, .ms-gantt-lines { position: absolute; left: calc(var(--rail) + var(--gap)); right: 0; top: 0; bottom: 0; pointer-events: none; }
.ms-gantt-grid { top: -8px; bottom: -40px; z-index: 0; }
.ms-gantt-gl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); opacity: .6; }
.ms-gantt-lines { z-index: 2; }
.ms-gantt-vline { position: absolute; top: 0; bottom: 0; width: 1px; background-image: linear-gradient(to bottom, var(--world-line) 0 5px, transparent 5px 11px); background-size: 1px 11px; background-repeat: repeat-y; }
.ms-gantt-axis { display: grid; grid-template-columns: var(--rail) 1fr; column-gap: var(--gap); margin-top: 14px; }
.ms-gantt-ticks { position: relative; height: 16px; }
.ms-gantt-tick { position: absolute; top: 0; transform: translateX(-50%); font: 600 12px/1 var(--font-sans); color: var(--fg-muted); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 700px) { .ms-gantt { --rail: 110px; --gap: 12px; } .ms-gantt-name { font-size: 13px; } .ms-gantt-cap { font-size: 11px; padding: 5px 9px; } .ms-gantt-tick { font-size: 10px; letter-spacing: 0; } }

/* Matriz de posicionamento (Tulio, 07/10): Milo.matrix(el, { x, y, quadrants, points: [{ id, name, x, y, kind, tag, summary, scores, src }], moves: [{ from, to }] }).
   Minimalista: linhas contidas, pontos pequenos, pouca informação. O sujeito na cor que afirma (kind 'self'), o alvo vazado ('target'),
   o resto em cinza (material de trabalho). Passar o mouse ou focar mostra o nome (nível 1); clicar abre o card lateral com o porquê (nível 2). */
.ms-matrix { --card: 380px; --dot: 12px; display: flex; flex-wrap: wrap; gap: 40px; align-items: stretch; }
.ms-matrix-plot { flex: 1 1 440px; min-width: 0; min-height: 360px; display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 14px; container-type: inline-size; }
.ms-matrix-yaxis { display: flex; flex-direction: column; align-items: center; justify-content: space-between; font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.ms-matrix-yaxis b { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 600; color: var(--fg); white-space: nowrap; }
.ms-matrix-yaxis span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.ms-matrix-xaxis { grid-column: 2; display: flex; justify-content: space-between; gap: 16px; font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.ms-matrix-xaxis b { font-weight: 600; color: var(--fg); }
.ms-matrix-field { position: relative; min-height: 320px; border-left: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); }
.ms-matrix-v, .ms-matrix-h { position: absolute; background: var(--border); pointer-events: none; }
.ms-matrix-v { left: 50%; top: 0; bottom: 0; width: 1px; }
.ms-matrix-h { top: 50%; left: 0; right: 0; height: 1px; }
.ms-matrix-q { position: absolute; font: 500 var(--fs-label)/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); max-width: 40%; }
.ms-matrix-q.q0 { left: 16px; top: 14px; } .ms-matrix-q.q1 { right: 16px; top: 14px; text-align: right; }
.ms-matrix-q.q2 { left: 16px; bottom: 14px; } .ms-matrix-q.q3 { right: 16px; bottom: 14px; text-align: right; }
.ms-matrix-moves { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ms-matrix-moves line { stroke: var(--affirm); stroke-width: 1.5; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; opacity: .8; }
.ms-matrix-pt { position: absolute; left: calc(var(--x) - var(--dot) / 2); bottom: calc(var(--y) - var(--dot) / 2); width: var(--dot); height: var(--dot); padding: 0; border: 0; border-radius: 50%; background: var(--border-strong); cursor: pointer; z-index: 2; }
.ms-matrix-pt::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; }   /* área de toque de 36 px */
.ms-matrix-pt.is-self { background: var(--affirm); }
.ms-matrix-pt.is-target { background: transparent; box-shadow: inset 0 0 0 2px var(--affirm); }
.ms-matrix-pt::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 1px var(--fg); opacity: 0; transition: opacity var(--dur-fast) var(--ease-productive); }
.ms-matrix-pt:hover::after, .ms-matrix-pt.is-on::after { opacity: 1; }
.ms-matrix-pt:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.ms-matrix-name { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); padding: 4px 9px; background: var(--surface); border: 1px solid var(--border); color: var(--fg); font: 500 var(--fs-small)/1.2 var(--font-sans); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-productive); }
.ms-matrix-pt:hover .ms-matrix-name, .ms-matrix-pt:focus-visible .ms-matrix-name, .ms-matrix-pt.is-on .ms-matrix-name, .ms-matrix.is-names .ms-matrix-name { opacity: 1; }
.ms-matrix-pt.is-self .ms-matrix-name, .ms-matrix-pt.is-target .ms-matrix-name { border-color: var(--affirm); }
.ms-matrix-card { flex: 1 1 260px; max-width: var(--card); position: relative; border: 1px solid var(--border); background: var(--surface); padding: 28px; display: grid; align-content: start; gap: 14px; min-height: 0; overflow: auto; }
.ms-matrix-card[data-empty] { background: transparent; border-style: dashed; align-content: center; text-align: center; color: var(--fg-muted); font-size: var(--fs-small); }
.ms-matrix-card h3 { margin: 0; font: 500 var(--fs-h3)/1.1 var(--font-sans); letter-spacing: -0.02em; color: var(--fg); padding-right: 32px; }
.ms-matrix-card p { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); }
.ms-matrix-card .ms-x { position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: transparent; color: var(--fg-muted); cursor: pointer; font-size: 20px; line-height: 1; }
.ms-matrix-card .ms-x:hover { color: var(--fg); }
.ms-matrix-card .ms-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ms-matrix-scores { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 16px; border-top: 1px solid var(--border); padding-top: 16px; }
.ms-matrix-scores li { display: grid; gap: 7px; }
.ms-matrix-scores .row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-small); color: var(--fg); }
.ms-matrix-scores .row b { font: 600 var(--fs-small)/1 var(--font-mono); color: var(--affirm); font-variant-numeric: tabular-nums; }
.ms-matrix-scores .ms-progress { height: 4px; }
.ms-matrix-src { font: 500 12px/1.4 var(--font-mono) !important; letter-spacing: .02em; }
@container (max-width: 560px) { .ms-matrix-q { display: none; } }

/* Tamanho de mercado em zoom (TAM → SAM → SOM): Milo.nest(el, { outer: { label, value, note }, inner: { label, value, note } }).
   Cada passo mostra só duas camadas: a anterior (contorno cinza, o contexto) e a atual (a cor que afirma), em ESCALA REAL de área
   entre as duas (lado = raiz da razão). A narrativa vem de uma camada por slide, não de todas no mesmo quadro. */
.ms-nest { position: relative; aspect-ratio: 1; width: 100%; }
.ms-nest-outer { position: absolute; inset: 0; border: 1px solid var(--border-strong); background: var(--hatch); }
.ms-nest-inner { position: absolute; left: 0; bottom: 0; background: var(--affirm); transform-origin: 0 100%; }
.ms-nest.is-solo .ms-nest-outer { background: var(--affirm); border-color: var(--affirm); }
.ms-nest-tag { position: absolute; display: grid; gap: 4px; font: 500 var(--fs-label)/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.ms-nest-tag b { font: 500 var(--fs-h3)/1 var(--font-sans); letter-spacing: -0.02em; text-transform: none; color: var(--fg); font-variant-numeric: tabular-nums; }
.ms-nest-tag.o { left: 18px; top: 16px; }
.ms-nest.is-solo .ms-nest-tag.o, .ms-nest.is-solo .ms-nest-tag.o b { color: var(--on-affirm); }
.ms-nest-tag.i { left: 0; bottom: calc(var(--side) + 12px); }
.ms-nest-tag.i b { color: var(--affirm); }
.ms-nest-tag.i.is-in { left: 18px; bottom: auto; top: calc(100% - var(--side) + 16px); }
.ms-nest-tag.i.is-in, .ms-nest-tag.i.is-in b { color: var(--on-affirm); }
@media (max-width: 860px) { .ms-matrix-card { max-width: none; } .ms-matrix-plot { min-height: 300px; } }
@media print { .ms-matrix-name { opacity: 1; } .ms-matrix-card .ms-x { display: none; } }

/* ---------- 5. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .ms-grain, .ms-mesh--organic i, .ms-mesh--organic b { animation: none; }
  .ms-btn, .ms-btn .ms-arr, .ms-round svg, .ms-link, .ms-plus::before, .ms-plus::after { transition: none; }
  .ms-marquee-track { animation: none; } .ms-card-media img, .ms-field-row { transition: none; }
  .ms-mark--slide path, .ms-mark[data-ms-magnet] path { transition: none; transform: none !important; }
  .ms-seg button, .ms-input, .ms-quote-more, .ms-wave .band, .ms-wave .stem, .ms-wave .halo, .ms-wave .dot { transition: none; }
  .ms-matrix-pt::after, .ms-matrix-name { transition: none; }
  .ms-gantt-bar, .ms-gantt-name { transition: none; }
  .ms-js [data-ms-reveal]:not([data-ms-revealed]) { visibility: visible; }
}