/* ============================================================
   muninpartners.com — Munin Partners
   Dark design system · Poppins · accent Construction #0A8FA6

   The accent comes from the Munin identity sheet. The chart series
   palette below is deliberately NOT changed: it was validated as a
   set for colourblind separation, and swapping the blue for the
   identity teal would push it toward the green at #199e70 under
   deuteranopia. Accent is chrome; series carry data. They are
   allowed to differ.
   Series palette validated against surface #131a26 (dark mode,
   all pairs): lightness band, chroma floor, CVD separation,
   normal-vision floor and contrast all pass.
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

img, svg { display: block; max-width: 100%; }

ul { list-style: none; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }


/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;

  /* Planes — depth comes from surface levels, not shadows */
  --bg-base:     #0b0f17;
  --bg-surface:  #131a26;
  --bg-elevated: #1a2333;
  --bg-glass:    rgba(19, 26, 38, 0.72);

  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-accent: rgba(10, 143, 166, 0.40);

  /* Accent — dark ink on the fill, see below */
  /* Construction. Dark ink on the fill measures 5.04:1 — passes AA,
     the same rule the previous accent followed. */
  --accent:          #0A8FA6;
  --accent-hover:    #35C2DA;
  --accent-glow:     rgba(10, 143, 166, 0.12);
  /* Corvus, at the identity's fixed 135°, ending exactly on the accent. */
  --accent-gradient: linear-gradient(135deg, #0A5163, #0A8FA6);
  --accent-ink:      #0b0f17;

  /* Ink */
  --text-primary:   #f1f5f9;
  --text-secondary: #a8b3c4;
  --text-muted:     #7d8899;

  /* Chart series — validated set, assign in fixed order, never cycle */
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;

  /* Ordinal ramp — one hue, light to dark, for ordered stages */
  --ramp-1: #cde2fb;
  --ramp-2: #86b6ef;
  --ramp-3: #3987e5;
  --ramp-4: #1c5cab;

  /* Status — fixed, never themed, never used alone */
  --status-live:       #0ca30c;
  --status-live-bg:    rgba(12, 163, 12, 0.12);
  --status-warning:    #fab219;
  --status-warning-bg: rgba(250, 178, 25, 0.12);
  --status-critical:   #d03b3b;
  --status-planned:    #7d8899;
  --status-planned-bg: rgba(125, 136, 153, 0.12);

  /* Chart chrome — solid hairlines, never dashed */
  --grid: rgba(255, 255, 255, 0.06);
  --axis: rgba(255, 255, 255, 0.14);

  /* Type */
  --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --section-padding:   120px 0;
  --container-width:   1200px;
  --container-padding: 0 24px;
  --nav-height:        72px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Motion */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Elevation — only the accent glow reads on a dark plane */
  --shadow-accent: 0 8px 24px rgba(10, 143, 166, 0.22);
  --shadow-panel:  0 24px 60px rgba(0, 0, 0, 0.45);
}


/* ---------- Base ---------- */
body {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-secondary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

section[id] { scroll-margin-top: calc(var(--nav-height) + 16px); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Icon strokes only — chart SVGs set their own fills */
.ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ---------- Layout utilities ---------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--container-padding);
}

.section { padding: var(--section-padding); }
.section-alt { background: var(--bg-surface); }

.section-head {
  max-width: 720px;
  margin: 0 auto 64px;
  text-align: center;
}
.section-head h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 16px;
}
.section-lead { font-size: 1.0625rem; color: var(--text-secondary); }

.eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}


/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              background var(--transition-base),
              border-color var(--transition-base);
}
.btn-sm { padding: 10px 20px; font-size: 0.875rem; }
.btn-icon { width: 18px; height: 18px; transition: transform var(--transition-base); }

/* Dark ink on the bright fill: white here is only 3.64:1 and fails AA */
.btn-primary {
  background: var(--accent-gradient);
  color: var(--accent-ink);
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(10, 143, 166, 0.32); }
.btn-primary:hover .btn-icon { transform: translateX(3px); }

.btn-ghost {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--border-accent); transform: translateY(-2px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--accent);
}
.link-arrow:hover .btn-icon { transform: translateX(4px); }


/* ---------- Navigation ---------- */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.navbar.is-scrolled {
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
}

.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: inline-flex; align-items: center; gap: 10px; }

.nav-logo-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--accent-gradient);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 1rem;
}
.nav-logo-text {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.nav-logo-tld { color: var(--text-muted); font-weight: 500; }

.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links > li > a:not(.btn) {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}
.nav-links > li > a:not(.btn):hover { color: var(--accent); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-primary);
  transition: transform var(--transition-base), opacity var(--transition-fast);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: calc(var(--nav-height) + 72px) 0 96px;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 60% at 25% 0%, var(--accent-glow) 0%, transparent 70%);
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(80% 70% at 40% 20%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 70% at 40% 20%, #000 0%, transparent 75%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero-title { font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 800; margin-bottom: 24px; }
.hero-sub { max-width: 520px; margin-bottom: 36px; font-size: clamp(1rem, 1.2vw, 1.125rem); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }

.hero-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.inline-icon { width: 16px; height: 16px; flex-shrink: 0; }


/* ---------- Product panel ---------- */
.panel {
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-panel);
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.panel-title { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.panel-sub { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.4; }

/* Sample data must announce itself */
.tag-illustrative {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.kpi {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
.kpi-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}
/* Proportional figures on display numbers — tabular-nums only where they stack */
.kpi-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.kpi-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
}
.kpi-flag .ico { width: 12px; height: 12px; }
.kpi-flag.is-warning { color: var(--status-warning); }

/* Legend is always present for two or more series */
.legend, .mini-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.legend li, .mini-legend li { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

.chart svg { width: 100%; height: auto; }

/* Chart text wears text tokens, never a series colour */
.axis-label {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 500;
  fill: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.point-label {
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
}


/* ---------- Module grid ---------- */
.module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.module-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  transition: transform var(--transition-base),
              border-color var(--transition-base),
              background var(--transition-base);
}

.module-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }

.module-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--accent-glow);
  color: var(--accent);
}
.module-icon .ico { width: 22px; height: 22px; }

.status {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.status-live    { color: var(--status-live);    background: var(--status-live-bg); }
.status-planned { color: var(--status-planned); background: var(--status-planned-bg); }

.module-title { font-size: 1.1875rem; font-weight: 600; margin-bottom: 4px; }
.module-domain {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.module-desc { font-size: 0.9375rem; margin-bottom: 20px; }

/* Mini preview chart — grows to fill so every card's CTA lines up */
.mini {
  margin-bottom: 20px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--bg-base);
  border: 1px solid var(--border);
  flex-grow: 1;
}
.mini svg { width: 100%; height: auto; }
.mini-legend { margin: 10px 0 0; gap: 10px; font-size: 0.6875rem; }

.module-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
}
.module-lock { width: 15px; height: 15px; margin-left: auto; color: var(--text-muted); }

.module-card.is-live:hover {
  transform: translateY(-4px);
  border-color: var(--border-accent);
  background: var(--bg-elevated);
}
.module-card.is-live:hover .btn-icon { transform: translateX(4px); }

/* Planned cards are inert. --reveal-opacity keeps the dimming when the
   reveal rule resolves opacity, which otherwise wins on specificity. */
.module-card.is-planned {
  --reveal-opacity: 0.62;
  opacity: 0.62;
  cursor: default;
}
.module-card.is-planned .module-icon { background: rgba(125, 136, 153, 0.10); color: var(--text-muted); }
.module-card.is-planned .module-cta { color: var(--text-muted); }


/* ---------- Workflow ---------- */
.flow {
  display: grid;
  grid-template-columns: repeat(7, auto);
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 72px;
}
.flow-node {
  padding: 20px 22px;
  border-radius: var(--radius-md);
  background: var(--bg-base);
  border: 1px solid var(--border);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-primary);
  text-align: center;
  min-width: 140px;
}
.flow-step {
  display: block;
  margin-bottom: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.flow-arrow { display: grid; place-items: center; color: var(--text-muted); }
.flow-arrow .ico { width: 22px; height: 22px; }

.flow-feed-arrow {
  grid-column: 3;
  grid-row: 2;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  padding: 6px 0;
}
.flow-feed-arrow .ico { width: 22px; height: 22px; }

.flow-node-feed {
  grid-column: 3;
  grid-row: 3;
  background: var(--bg-surface);
  border-style: dashed;
  color: var(--text-secondary);
}

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.pillar { padding-top: 24px; border-top: 2px solid var(--accent); }
.pillar h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 8px; }
.pillar p { font-size: 0.9375rem; }


/* ---------- Audience ---------- */
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.audience-card {
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  transition: transform var(--transition-base), border-color var(--transition-base);
}
.audience-card:hover { transform: translateY(-4px); border-color: var(--border-accent); }
.audience-card h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 12px; }
.audience-card p { font-size: 0.9375rem; }


/* ---------- Access ---------- */
.access-panel {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 40px;
  border-radius: var(--radius-xl);
  background: var(--bg-base);
  border: 1px solid var(--border);
  text-align: center;
}
.access-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
  border-radius: var(--radius-md);
  background: var(--accent-glow);
  color: var(--accent);
}
.access-icon .ico { width: 28px; height: 28px; }
.access-panel h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; margin-bottom: 16px; }
.access-panel p { max-width: 520px; margin: 0 auto 32px; }


/* ---------- About ---------- */
.about-inner { display: grid; grid-template-columns: 1.6fr 1fr; gap: 64px; align-items: center; }
.about-text h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; margin-bottom: 20px; }
.about-text p { margin-bottom: 24px; }

.about-side { display: grid; gap: 16px; }
.stat {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
.stat-num { font-size: 1.75rem; font-weight: 800; color: var(--accent); line-height: 1; }
.stat-label { font-size: 0.9375rem; font-weight: 500; color: var(--text-secondary); }


/* ---------- Contact ---------- */
.contact-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }


/* ---------- Footer ---------- */
.footer { padding: 72px 0 32px; background: var(--bg-base); border-top: 1px solid var(--border); }

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
}
.footer-brand p { margin-top: 16px; font-size: 0.9375rem; max-width: 280px; }

.footer-col h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.footer-col li { margin-bottom: 10px; font-size: 0.9375rem; }
.footer-col a { transition: color var(--transition-fast); }
.footer-col a:hover { color: var(--accent); }
.footer-col span { color: var(--text-muted); }
.footer-col em {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.75;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--text-muted);
}
.footer-note { font-size: 0.8125rem; }


/* ---------- Reveal on scroll ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .reveal.is-visible { opacity: var(--reveal-opacity, 1); transform: none; }

.module-grid .reveal:nth-child(2),
.audience-grid .reveal:nth-child(2),
.pillars .reveal:nth-child(2) { transition-delay: 0.08s; }
.module-grid .reveal:nth-child(3),
.audience-grid .reveal:nth-child(3),
.pillars .reveal:nth-child(3) { transition-delay: 0.16s; }
.module-grid .reveal:nth-child(4) { transition-delay: 0.24s; }
.module-grid .reveal:nth-child(5) { transition-delay: 0.32s; }


/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  :root { --section-padding: 96px 0; }

  .hero { min-height: 0; padding-top: calc(var(--nav-height) + 56px); }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-sub { max-width: none; }

  .module-grid   { grid-template-columns: repeat(2, 1fr); }
  .audience-grid { grid-template-columns: repeat(2, 1fr); }
  .pillars       { grid-template-columns: 1fr; gap: 24px; }

  .about-inner { grid-template-columns: 1fr; gap: 40px; }
  .about-side  { grid-template-columns: repeat(3, 1fr); }

  .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }

  .flow { grid-template-columns: 1fr; gap: 8px; }
  .flow-arrow .ico { transform: rotate(90deg); }
  .flow-feed-arrow, .flow-node-feed { grid-column: 1; grid-row: auto; }
  .flow-feed-arrow .ico { transform: rotate(180deg); }
  .flow-node { width: 100%; max-width: 320px; margin: 0 auto; }
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .nav-menu {
    position: fixed;
    inset: var(--nav-height) 0 auto 0;
    padding: 24px;
    background: var(--bg-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base),
                transform var(--transition-base),
                visibility var(--transition-base);
  }
  .nav-menu.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav-links { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav-links > li > a:not(.btn) { display: block; padding: 12px 8px; }
  .nav-links .btn { justify-content: center; margin-top: 12px; }
}

@media (max-width: 640px) {
  :root { --section-padding: 72px 0; --container-padding: 0 20px; }

  .module-grid   { grid-template-columns: 1fr; }
  .audience-grid { grid-template-columns: 1fr; }
  .about-side    { grid-template-columns: 1fr; }
  .footer-inner  { grid-template-columns: 1fr; gap: 32px; }

  .module-card, .audience-card { padding: 24px; }
  .access-panel { padding: 40px 24px; }
  .panel { padding: 18px; }

  .kpi-row { grid-template-columns: 1fr; }
  .section-head { margin-bottom: 40px; }

  .hero-actions .btn, .contact-actions .btn { width: 100%; justify-content: center; }
}


/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: var(--reveal-opacity, 1); transform: none; }
}


/* ---------- Forced colors ---------- */
@media (forced-colors: active) {
  .module-card, .audience-card, .panel, .kpi, .mini { border: 1px solid CanvasText; }
  .swatch { border: 1px solid CanvasText; }
}


/* ============================================================
   Munin identity — mark and the workflow figure
   ============================================================ */

/* The raven replaces the letter tile. It is flat, one colour, and
   sized by height so the silhouette is never cropped — a clipped
   mark stops reading as a bird, which the identity sheet says
   explicitly and which is easy to break with a fixed square. */
.nav-logo-raven {
  width: 38px;
  height: auto;
  fill: var(--text-primary);
  flex: none;
  overflow: visible;
}
.nav-logo-tld { color: var(--text-muted); font-weight: 400; letter-spacing: 0.02em; }

/* ---------- chain of record (cards) ---------- */
/* The workflow was an SVG figure. It is cards now: the same six steps
   read better as text, survive a stale stylesheet, and do not depend
   on a viewBox being right. */
.chain {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 1060px;
  margin: 0 auto 64px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.chain-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px 24px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.chain-card:hover { border-color: var(--border-accent); transform: translateY(-4px); }
.chain-card-wide { grid-column: 1 / -1; }

.chain-step {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.chain-card h3 { font-size: 1.0625rem; font-weight: 600; }
.chain-card p { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.6; }

/* What each step takes in and hands on — the reason the chain holds. */
.chain-out {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem !important;
  color: var(--text-muted) !important;
}
.chain-out span {
  display: inline-block;
  margin-right: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 640px) {
  .chain-card { padding: 22px 18px 20px; }
}

/* ---------- module card: link to the interface preview ----------
   A planned module used to offer nothing but the word "Planned".
   The preview is the honest version of that promise: this is the
   shape it will take, go and look.

   A live card carries two destinations now — sign in, and look at the
   dashboard — so the card itself is no longer one big anchor. An
   anchor cannot contain another anchor: the parser closes the outer
   one where the inner starts, and the rest of the card spills into
   the grid as loose siblings. The CTA is the link instead, stretched
   over the whole card so it still behaves like one target. */
.module-card.is-live { position: relative; }
/* Hanya kartu hidup. Kartu terencana tidak punya ancestor yang
   diposisikan, jadi ::after-nya akan merentang ke luar kartu. */
.module-card.is-live .module-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--radius-lg);
}
.module-preview { margin-top: 6px; font-size: 0.8125rem; position: relative; z-index: 1; }
.module-preview a { color: var(--accent); font-weight: 600; }
.module-preview a:hover { color: var(--accent-hover); text-decoration: underline; }
.module-preview span { color: var(--text-muted); }
/* Planned cards are dimmed as a whole; the link inside them is still
   live, so it must not be dimmed with them. */
.module-card.is-planned .module-preview { opacity: 1; }