/* MC — terminal/cockpit theme on top of WLM tokens */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#070708;color:#D4D4D4;font-family:var(--font-body);overflow-x:hidden}
::selection{background:#E63946;color:#fff}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-feature-settings:"ss01","cv11"}
.mc-container{max-width:1280px;margin:0 auto;padding:0 32px}
@media (max-width:640px){.mc-container{padding:0 18px}}

/* Scanline + film grain background */
.mc-bg{position:fixed;inset:0;z-index:-10;pointer-events:none;overflow:hidden}
.mc-bg::before{content:"";position:absolute;inset:0;background:
  radial-gradient(1200px 600px at 12% 0%, rgba(230,57,70,.15), transparent 60%),
  radial-gradient(900px 500px at 90% 30%, rgba(245,158,11,.07), transparent 60%),
  radial-gradient(1000px 800px at 50% 110%, rgba(139,92,246,.10), transparent 60%);
}
.mc-bg::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:48px 48px;mask:radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask:radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.mc-scanlines{position:fixed;inset:0;z-index:50;pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px);
  mix-blend-mode:overlay;opacity:.6}

.mc-grain{position:fixed;inset:0;z-index:51;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}

/* HUD chrome */
.mc-hud{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:12px 24px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#737373;
  border-bottom:1px solid rgba(255,255,255,.05);
  background:linear-gradient(180deg,rgba(7,7,8,.85),rgba(7,7,8,.4));
  backdrop-filter:blur(12px)}
.mc-hud-dot{width:6px;height:6px;border-radius:999px;background:#10B981;box-shadow:0 0 0 0 rgba(16,185,129,.4);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

/* Section frame */
.mc-section{position:relative;padding:120px 0;border-top:1px solid rgba(255,255,255,.04)}
.mc-section:first-of-type{border-top:0}
@media (max-width:768px){.mc-section{padding:80px 0}}

.mc-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#FF6B6B;font-family:ui-monospace,Menlo,monospace}
.mc-eyebrow::before{content:"";width:24px;height:1px;background:linear-gradient(90deg,transparent,#E63946)}
.mc-eyebrow::after{content:"";width:6px;height:6px;border-radius:999px;background:#E63946;box-shadow:0 0 12px #E63946}

.mc-h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(40px,7vw,88px);line-height:.96;letter-spacing:-.04em;color:#FAFAF9;margin:0}
.mc-h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(32px,5vw,56px);line-height:1.02;letter-spacing:-.035em;color:#FAFAF9;margin:0}
.mc-grad{background:linear-gradient(135deg,#E63946 0%,#FF6B6B 40%,#F59E0B 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Glass panel — terminal feel */
.mc-panel{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.06);border-radius:18px;backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 24px 60px rgba(0,0,0,.35)}
.mc-panel-bracket::before,.mc-panel-bracket::after{content:"";position:absolute;width:18px;height:18px;border:1px solid rgba(230,57,70,.45);pointer-events:none}
.mc-panel-bracket::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.mc-panel-bracket::after{bottom:-1px;right:-1px;border-left:none;border-top:none}

/* Tag */
.mc-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-family:ui-monospace,Menlo,monospace}
.mc-tag.crit{background:rgba(230,57,70,.12);color:#FF6B6B;border:1px solid rgba(230,57,70,.3)}
.mc-tag.warn{background:rgba(245,158,11,.10);color:#F59E0B;border:1px solid rgba(245,158,11,.25)}
.mc-tag.ok{background:rgba(16,185,129,.10);color:#10B981;border:1px solid rgba(16,185,129,.25)}
.mc-tag.idle{background:rgba(255,255,255,.05);color:#A3A3A3;border:1px solid rgba(255,255,255,.08)}

@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.mc-cursor::after{content:"_";color:#FF6B6B;animation:blink 1s infinite;margin-left:2px}

@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

@keyframes typing{from{width:0}to{width:100%}}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#070708}
::-webkit-scrollbar-thumb{background:rgba(230,57,70,.25);border-radius:10px}

/* ──────────────────────────────────────────────────────────────────
   Mobile / responsive overrides — apply on phones and small tablets.
   Many components ship with hardcoded inline grids; these classes let
   us collapse to a single column without rewriting every style prop.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body { overflow-x: hidden; }

  .mc-container { padding: 0 16px !important; max-width: 100% !important; }

  .mc-section { padding: 64px 0 !important; }
  .mc-section:first-of-type { padding-top: 84px !important; min-height: 0 !important; }

  /* HUD compact, no awkward vertical wrap */
  .mc-hud { padding: 6px 10px !important; font-size: 9px !important; letter-spacing: .08em !important; gap: 6px !important; }
  .mc-hud > div { flex-wrap: nowrap !important; overflow: hidden !important; min-width: 0 !important; gap: 8px !important; }
  .mc-hud > div > span { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; }

  /* Universal: any 2- or 3-col grid that opted in collapses */
  .mc-stack-mobile { grid-template-columns: 1fr !important; gap: 24px !important; align-items: stretch !important; }

  /* Sticky panels become normal on mobile */
  .mc-no-sticky-mobile { position: static !important; }

  /* Network SVG: scale down responsively (was hardcoded 560px) */
  .mc-network-svg { width: 100% !important; height: auto !important; max-width: 100% !important; display: block !important; }
  .mc-network-panel { padding: 8px !important; }
  .mc-network-detail { padding: 20px !important; }

  /* Hero KPI 3-col tighter */
  .mc-hero-kpi { gap: 6px !important; }
  .mc-hero-kpi > div { padding: 10px 12px !important; }
  .mc-hero-kpi > div > div:nth-child(2) { font-size: 22px !important; }

  /* Time machine: stack score above category bars */
  .mc-tm-readout { flex-direction: column !important; align-items: stretch !important; gap: 24px !important; }
  .mc-tm-readout > div:first-child > div:nth-child(2) { font-size: 80px !important; }

  /* Pricing contrast (SE only) */
  .mc-pricing-contrast { grid-template-columns: 1fr !important; gap: 16px !important; text-align: center !important; }

  /* Hero terminal smaller */
  .mc-hero-terminal { min-height: 320px !important; }
  .mc-hero-terminal > div:nth-child(2) { min-height: 280px !important; padding: 14px 16px !important; font-size: 11.5px !important; }

  /* Headings */
  .mc-h1 { font-size: 38px !important; line-height: .98 !important; }
  .mc-h2 { font-size: 28px !important; line-height: 1.05 !important; }

  /* Panels — less padding on mobile */
  .mc-panel { border-radius: 14px !important; }
  .mc-panel[style*="padding: 32"], .mc-panel[style*="padding:32"] { padding: 20px !important; }
  .mc-panel[style*="padding: 40"], .mc-panel[style*="padding:40"] { padding: 22px !important; }
  .mc-panel[style*="padding: 56px 48px"] { padding: 32px 22px !important; }

  .mc-section h3 { font-size: 22px !important; }
}