/* =========================================================
   Markets Understood
   20A.06A.03.01 — Visual Baseline & Design Tokens
   ========================================================= */

:root {
  /* Layout */
  --page-max: 1200px;
  --text-max: 760px;
  --content-wide: 920px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* MU core palette — light first */
  --mu-bg: #f4f8fc;
  --mu-bg-soft: #eef5fb;
  --mu-surface: #ffffff;
  --mu-surface-2: #eaf2fa;
  --mu-surface-3: #dfeaf5;

  --mu-text: #102238;
  --mu-heading: #0c1f35;
  --mu-muted: #52677f;
  --mu-muted-2: #6f8297;

  --mu-line: #d4e0ec;
  --mu-line-strong: #b9ccdd;

  --mu-blue: #087cff;
  --mu-blue-dark: #005fbf;
  --mu-cyan: #008fcb;
  --mu-cyan-soft: #e9f7fd;

  /* Dark accent */
  --mu-dark: #071426;
  --mu-dark-2: #0b1d35;
  --mu-dark-3: #102c52;
  --mu-on-dark: #ffffff;
  --mu-on-dark-muted: #c6d4e3;

  /* States */
  --mu-success: #147a55;
  --mu-warning: #9a6511;
  --mu-danger: #b54040;

  /* Shadows */
  --shadow-sm: 0 4px 14px rgba(20, 54, 88, .06);
  --shadow-md: 0 12px 32px rgba(20, 54, 88, .09);
  --shadow-lg: 0 22px 52px rgba(10, 35, 65, .14);

  /* Motion */
  --transition-fast: 160ms ease;
  --transition-base: 220ms ease;
}


/* =========================================================
   Reset / base
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(
      180deg,
      var(--mu-dark) 0,
      var(--mu-dark-3) 290px,
      var(--mu-bg-soft) 560px,
      var(--mu-bg) 100%
    );
  color: var(--mu-text);
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

a,
button {
  min-height: 44px;
}

a {
  color: var(--mu-blue-dark);
  text-underline-offset: .2em;
  text-decoration-thickness: .08em;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

a:hover {
  color: #004b97;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid #63b6ff;
  outline-offset: 3px;
}


/* =========================================================
   Layout
   ========================================================= */

.container {
  width: min(100% - 32px, var(--page-max));
  margin-inline: auto;
}

main.container {
  padding-top: var(--space-12);
  padding-bottom: var(--space-20);
}

.prose {
  max-width: var(--text-max);
}

.prose-wide {
  max-width: var(--content-wide);
}


/* =========================================================
   Typography
   ========================================================= */

h1,
h2,
h3,
h4 {
  color: var(--mu-heading);
  font-weight: 750;
  text-wrap: balance;
}

.prose h1 {
  margin: 0 0 var(--space-6);
  color: var(--mu-on-dark);
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .18);
}

.prose h2 {
  margin: var(--space-12) 0 var(--space-4);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.025em;
}

.prose h3 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: 1.2rem;
  line-height: 1.3;
}

.prose p {
  margin: 0 0 var(--space-5);
  color: var(--mu-muted);
}

.prose strong {
  color: var(--mu-text);
}

.prose ul,
.prose ol {
  color: var(--mu-muted);
  padding-left: 1.4rem;
}

.prose li + li {
  margin-top: var(--space-2);
}


/* =========================================================
   Site header / navigation
   ========================================================= */

.site-header {
  color: var(--mu-on-dark);
  border-bottom: 1px solid #b9d7e5;
}

.site-header-inner {
  padding-top: 18px;
  padding-bottom: 18px;
}

.site-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 10px;
}

.site-brand {
  margin: 0;
}

.site-brand a {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  color: var(--mu-on-dark);
  text-decoration: none;
}

.site-brand-mark {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 10px;
  background:
    linear-gradient(
      135deg,
      rgba(8, 124, 255, .96),
      rgba(0, 143, 203, .88)
    );
  box-shadow: 0 8px 24px rgba(0, 80, 170, .28);
  color: #ffffff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
}

.site-brand-name {
  font-size: 1.08rem;
  font-weight: 750;
  letter-spacing: -.018em;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 6px;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 7px 10px;
  color: rgba(255, 255, 255, .82);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: .94rem;
  font-weight: 560;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, .08);
}

.site-nav a[aria-current="page"] {
  color: #ffffff;
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .12);
  font-weight: 700;
}

.language-nav {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .42);
  font-size: .78rem;
  font-weight: 700;
}

.language-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 32px;
  padding: 4px 7px;
  color: rgba(255, 255, 255, .72);
  border-radius: var(--radius-pill);
  text-decoration: none;
}

.language-nav a:hover,
.language-nav a:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, .08);
}

.language-nav a[aria-current="true"] {
  color: #ffffff;
  background: rgba(255, 255, 255, .15);
}

.site-brand a:focus-visible,
.site-nav a:focus-visible,
.language-nav a:focus-visible {
  outline-color: #72bfff;
  outline-offset: 2px;
}

/* =========================================================
   Panels / cards
   ========================================================= */

.mu-panel {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--mu-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.mu-card {
  padding: var(--space-6);
  background: var(--mu-surface);
  border: 1px solid var(--mu-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.mu-card h2,
.mu-card h3 {
  margin-top: 0;
}


/* =========================================================
   Buttons / actions
   ========================================================= */

.mu-button,
.mu-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.mu-button {
  color: #ffffff;
  background: var(--mu-blue);
  border: 1px solid var(--mu-blue);
  box-shadow: 0 8px 20px rgba(8, 124, 255, .20);
}

.mu-button:hover {
  color: #ffffff;
  background: var(--mu-blue-dark);
  transform: translateY(-1px);
}

.mu-button-secondary {
  color: var(--mu-text);
  background: var(--mu-surface);
  border: 1px solid var(--mu-line-strong);
}

.mu-button-secondary:hover {
  color: var(--mu-text);
  background: var(--mu-surface-2);
}


/* =========================================================
   Badge
   ========================================================= */

.mu-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 0;
  padding: 2px 12px;
  color: #075f9d !important;
  background: var(--mu-cyan-soft);
  border: 1px solid #9bc9ee;
  border-radius: var(--radius-pill);
  font-size: .875rem;
  font-weight: 750;
  letter-spacing: .02em;
}


/* =========================================================
   Homepage hero
   ========================================================= */

.mu-hero {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

.mu-brand-logo {
  width: 100%;
  max-width: 720px;
  height: clamp(220px, 38vw, 390px);
  margin: 0 auto;
  object-fit: cover;
  object-position: center 38%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.mu-hero-content {
  max-width: 760px;
  padding: 28px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--mu-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.mu-hero-content.prose h1 {
  margin-top: var(--space-3);
  color: var(--mu-text);
  text-shadow: none;
}

.mu-hero-content.prose p {
  color: var(--mu-muted);
}


/* =========================================================
   Homepage content blocks
   ========================================================= */

.mu-hero + .prose,
.mu-hero + .prose + .prose,
.mu-hero + .prose + .prose + .prose {
  max-width: var(--content-wide);
  margin: 0 auto var(--space-5);
  padding: 28px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--mu-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.mu-hero + .prose h2,
.mu-hero + .prose + .prose h2,
.mu-hero + .prose + .prose + .prose h2 {
  margin-top: 0;
  color: #15304d;
}

.mu-hero + .prose p:last-child,
.mu-hero + .prose + .prose p:last-child,
.mu-hero + .prose + .prose + .prose p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  margin-top: var(--space-16);
  border-top: 1px solid var(--mu-line);
  background: rgba(255,255,255,.58);
}

.site-footer-inner {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

.site-footer-grid {
  display: grid;
  gap: var(--space-8);
}

.site-footer-brand {
  max-width: 420px;
}

.site-footer-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--mu-text);
  text-decoration: none;
}

.site-footer-brand-link:hover {
  color: var(--mu-text);
}

.site-footer-brand-link strong {
  display: block;
  color: var(--mu-heading);
  font-size: 1rem;
}

.site-footer-tagline {
  display: block;
  margin-top: 2px;
  color: var(--mu-muted-2);
  font-size: .84rem;
}

.site-footer-brand p {
  margin: var(--space-4) 0 0;
  color: var(--mu-muted);
  font-size: .94rem;
  line-height: 1.65;
}

.footer-nav,
.footer-legal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.footer-nav a,
.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 5px 8px;
  color: var(--mu-muted);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: .92rem;
}

.footer-nav a:hover,
.footer-nav a:focus-visible,
.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: var(--mu-text);
  background: var(--mu-surface-2);
}

.site-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--mu-line);
}

.site-footer-status,
.site-footer-copy {
  margin: 0;
  color: var(--mu-muted-2);
  font-size: .82rem;
}

.site-footer-status {
  font-weight: 700;
}

@media (min-width: 760px) {
  .site-footer-grid {
    grid-template-columns:
      minmax(0, 1.5fr)
      minmax(150px, .7fr)
      minmax(150px, .7fr);
    align-items: start;
  }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (min-width: 768px) {
  .container {
    width: min(100% - 48px, var(--page-max));
  }

  main.container {
    padding-top: var(--space-16);
    padding-bottom: 88px;
  }
}

@media (min-width: 900px) {
  .mu-hero {
    grid-template-columns:
      minmax(0, 1.05fr)
      minmax(360px, .95fr);
    align-items: center;
  }

  .mu-brand-logo {
    height: 390px;
  }

  .mu-hero-content {
    padding: 36px;
  }
}

@media (max-width: 767px) {
  .mu-hero + .prose,
  .mu-hero + .prose + .prose,
  .mu-hero + .prose + .prose + .prose {
    padding: 22px;
  }
}

@media (max-width: 639px) {
  .site-nav {
    gap: 2px 4px;
  }

  .site-nav a {
    padding-left: 8px;
    padding-right: 8px;
    font-size: .94rem;
  }

  .prose h1 {
    font-size: clamp(2rem, 11vw, 3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}


/* =========================================================
   Page Layout System — 20A.06A.03.04
   ========================================================= */

/*
 * Three deliberate content widths:
 * - container: full MU page chassis
 * - prose: readable editorial content
 * - wide: future product/data/visual presentation
 */

.container {
  width: min(calc(100% - 32px), var(--page-max));
  margin-inline: auto;
}

main.container {
  padding-top: var(--space-10);
  padding-bottom: var(--space-8);
}

/* Editorial reading column */
main > .prose,
main > article.prose {
  width: min(100%, var(--text-max));
  margin-inline: auto;
}

/* Sections get deliberate vertical rhythm */
main > section,
main > article {
  margin-top: 0;
}

main > section + section,
main > section + article,
main > article + section {
  margin-top: var(--space-16);
}

/* Long editorial pages */
main > article.prose {
  padding: clamp(24px, 4vw, 48px);
  background: var(--mu-surface);
  border: 1px solid var(--mu-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

main > article.prose > :first-child {
  margin-top: 0;
}

main > article.prose > :last-child {
  margin-bottom: 0;
}

/* Keep headings connected to the content that follows */
.prose h2 {
  margin-top: clamp(40px, 6vw, 64px);
  margin-bottom: var(--space-4);
}

.prose h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}

/* Comfortable paragraph rhythm */
.prose p,
.prose ul,
.prose ol {
  margin-top: 0;
  margin-bottom: var(--space-5);
}

.prose li + li {
  margin-top: var(--space-2);
}

/*
 * Homepage/content sections remain readable but visually distinct.
 * Product-specific visual design is intentionally deferred.
 */
main > section.prose {
  width: min(100%, var(--content-wide));
  margin-inline: auto;
  padding: clamp(24px, 4vw, 44px);
  background: var(--mu-surface);
  border: 1px solid var(--mu-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

main > section.prose > :first-child {
  margin-top: 0;
}

main > section.prose > :last-child {
  margin-bottom: 0;
}

/* Hero owns the full available page width */
main > .mu-hero {
  width: 100%;
  margin-inline: auto;
}

/*
 * Reserved wide layout class for later MU product visuals:
 * Product Flow, Market Activity, Trade Plan and Coin Radar.
 */
.mu-layout-wide {
  width: min(100%, var(--page-max));
  margin-inline: auto;
}

.mu-layout-content {
  width: min(100%, var(--content-wide));
  margin-inline: auto;
}

.mu-layout-reading {
  width: min(100%, var(--text-max));
  margin-inline: auto;
}

/* Generic section wrapper for later component composition */
.mu-section {
  margin-top: var(--space-16);
}

.mu-section:first-child {
  margin-top: 0;
}

.mu-section-header {
  width: min(100%, var(--text-max));
  margin: 0 auto var(--space-8);
}

.mu-section-header > :first-child {
  margin-top: 0;
}

.mu-section-header > :last-child {
  margin-bottom: 0;
}

/* Mobile rhythm */
@media (max-width: 767px) {
  .container {
    width: min(calc(100% - 24px), var(--page-max));
  }

  main.container {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }

  main > section + section,
  main > section + article,
  main > article + section,
  .mu-section {
    margin-top: var(--space-10);
  }

  main > article.prose,
  main > section.prose {
    padding: 22px 18px;
    border-radius: var(--radius-lg);
  }

  .prose h2 {
    margin-top: var(--space-10);
  }
}



/* =========================================================
   Reusable MU Components — 20A.06A.03.05
   ========================================================= */

/* Generic panel */
.mu-panel {
  padding: clamp(22px, 3vw, 32px);
  background: var(--mu-surface);
  border: 1px solid var(--mu-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

/* Card collection */
.mu-card-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
}

.mu-card {
  grid-column: span 4;
  padding: var(--space-6);
  background: var(--mu-surface);
  border: 1px solid var(--mu-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.mu-card > :first-child {
  margin-top: 0;
}

.mu-card > :last-child {
  margin-bottom: 0;
}

/* Feature card */
.mu-feature-card {
  position: relative;
  overflow: hidden;
}

.mu-feature-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    var(--mu-blue),
    var(--mu-cyan)
  );
}

/* Compact label / eyebrow */
.mu-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-3);
  color: var(--mu-blue-dark);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Status badges */
.mu-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--mu-surface-2);
  color: var(--mu-text);
  font-size: .78rem;
  font-weight: 800;
}

.mu-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mu-muted-2);
}

.mu-status-success::before {
  background: var(--mu-success);
}

.mu-status-warning::before {
  background: var(--mu-warning);
}

.mu-status-danger::before {
  background: var(--mu-danger);
}

.mu-status-info::before {
  background: var(--mu-blue);
}

/* Informational callout */
.mu-callout {
  padding: var(--space-5) var(--space-6);
  background: var(--mu-cyan-soft);
  border: 1px solid rgba(0, 143, 203, .18);
  border-left: 4px solid var(--mu-cyan);
  border-radius: var(--radius-md);
}

.mu-callout > :first-child {
  margin-top: 0;
}

.mu-callout > :last-child {
  margin-bottom: 0;
}

/* Dark emphasis block */
.mu-panel-dark {
  color: var(--mu-on-dark);
  background:
    linear-gradient(
      135deg,
      var(--mu-dark) 0%,
      var(--mu-dark-2) 58%,
      var(--mu-dark-3) 100%
    );
  border-color: rgba(255,255,255,.1);
}

.mu-panel-dark h2,
.mu-panel-dark h3,
.mu-panel-dark strong {
  color: var(--mu-on-dark);
}

.mu-panel-dark p {
  color: var(--mu-on-dark-muted);
}

/* Small metric/stat block */
.mu-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.mu-stat {
  padding: var(--space-5);
  background: var(--mu-surface);
  border: 1px solid var(--mu-line);
  border-radius: var(--radius-md);
}

.mu-stat-label {
  display: block;
  margin-bottom: 4px;
  color: var(--mu-muted-2);
  font-size: .78rem;
  font-weight: 700;
}

.mu-stat-value {
  display: block;
  color: var(--mu-heading);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 800;
}

/* Structured list */
.mu-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mu-list li {
  position: relative;
  padding-left: 22px;
}

.mu-list li::before {
  content: "";
  position: absolute;
  top: .72em;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mu-blue);
}

/* Action row */
.mu-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Divider */
.mu-divider {
  width: 100%;
  height: 1px;
  margin: var(--space-8) 0;
  border: 0;
  background: var(--mu-line);
}

/* Simple two-column composition */
.mu-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}

.mu-split-start {
  align-items: start;
}

/* Placeholder surface for later real product visuals */
.mu-visual-shell {
  min-height: 260px;
  padding: var(--space-6);
  background:
    linear-gradient(
      180deg,
      var(--mu-surface) 0%,
      var(--mu-bg-soft) 100%
    );
  border: 1px solid var(--mu-line-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

/* Mobile component behaviour */
@media (max-width: 899px) {
  .mu-card {
    grid-column: span 6;
  }

  .mu-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mu-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  .mu-card {
    grid-column: 1 / -1;
  }

  .mu-card-grid {
    gap: var(--space-4);
  }

  .mu-stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  .mu-panel,
  .mu-card,
  .mu-visual-shell {
    padding: 20px 18px;
  }
}



/* =========================================================
   Content Page Styling — 20A.06A.03.06
   ========================================================= */

/* Editorial page typography */
main > article.prose {
  color: var(--mu-text);
  font-size: 1rem;
  line-height: 1.75;
}

main > article.prose > h1 {
  max-width: 680px;
  margin-bottom: var(--space-6);
  color: var(--mu-heading);
  font-size: clamp(2rem, 5vw, 3.35rem);
  line-height: 1.06;
  letter-spacing: -.035em;
}

main > article.prose > h1 + p {
  color: var(--mu-muted);
  font-size: clamp(1.05rem, 2vw, 1.18rem);
  line-height: 1.72;
}

/* Strong section hierarchy */
main > article.prose h2 {
  position: relative;
  padding-top: var(--space-5);
  color: var(--mu-heading);
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.18;
  letter-spacing: -.02em;
}

main > article.prose h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    90deg,
    var(--mu-blue),
    var(--mu-cyan)
  );
}

main > article.prose h3 {
  color: var(--mu-heading);
  font-size: clamp(1.12rem, 2vw, 1.35rem);
  line-height: 1.3;
}

/* Body copy */
main > article.prose p {
  max-width: 70ch;
}

main > article.prose strong {
  color: var(--mu-heading);
  font-weight: 750;
}

/* Links inside editorial content */
main > article.prose a:not(.mu-button) {
  color: var(--mu-blue-dark);
  font-weight: 650;
  text-decoration-color: rgba(0, 95, 191, .3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition:
    color var(--motion-fast),
    text-decoration-color var(--motion-fast);
}

main > article.prose a:not(.mu-button):hover {
  color: var(--mu-blue);
  text-decoration-color: currentColor;
}

/* Lists */
main > article.prose ul,
main > article.prose ol {
  max-width: 68ch;
  padding-left: 1.4rem;
}

main > article.prose li {
  padding-left: .2rem;
}

main > article.prose li::marker {
  color: var(--mu-blue);
  font-weight: 800;
}

/* Quotes and explanatory emphasis */
main > article.prose blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-5) var(--space-6);
  color: var(--mu-text);
  background: var(--mu-cyan-soft);
  border: 0;
  border-left: 4px solid var(--mu-cyan);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

main > article.prose blockquote > :last-child {
  margin-bottom: 0;
}

/* Tables remain usable if introduced later */
main > article.prose table {
  width: 100%;
  margin: var(--space-8) 0;
  border-collapse: collapse;
  font-size: .94rem;
}

main > article.prose th,
main > article.prose td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--mu-line);
  text-align: left;
  vertical-align: top;
}

main > article.prose th {
  color: var(--mu-heading);
  background: var(--mu-bg-soft);
  font-weight: 800;
}

/* Homepage/editorial sections */
main > section.prose {
  color: var(--mu-text);
  line-height: 1.7;
}

main > section.prose h2 {
  max-width: 720px;
  color: var(--mu-heading);
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -.025em;
}

main > section.prose h2 + p {
  color: var(--mu-muted);
  font-size: 1.04rem;
}

main > section.prose p {
  max-width: 72ch;
}

/* Give successive homepage content sections subtle depth */
main > section.prose:nth-of-type(even) {
  background:
    linear-gradient(
      145deg,
      var(--mu-surface) 0%,
      var(--mu-bg-soft) 100%
    );
}

/* Accessible keyboard focus inside content */
main a:focus-visible {
  outline: 3px solid rgba(8, 124, 255, .28);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Mobile editorial tuning */
@media (max-width: 767px) {
  main > article.prose {
    line-height: 1.68;
  }

  main > article.prose > h1 {
    font-size: clamp(1.85rem, 9vw, 2.6rem);
  }

  main > article.prose > h1 + p {
    font-size: 1.03rem;
  }

  main > article.prose h2 {
    padding-top: var(--space-4);
  }

  main > article.prose blockquote {
    padding: var(--space-4);
  }

  main > article.prose table {
    font-size: .86rem;
  }

  main > article.prose th,
  main > article.prose td {
    padding: 10px;
  }
}



/* =========================================================
   Responsive Foundation — 20A.06A.03.07
   ========================================================= */

/* Prevent media/content from escaping its layout */
img,
svg,
video,
canvas {
  max-width: 100%;
}

img {
  height: auto;
}

main,
section,
article,
header,
footer,
nav,
div {
  min-width: 0;
}

/* Long URLs and technical strings must remain inside cards */
.prose,
.mu-card,
.mu-panel,
.site-footer {
  overflow-wrap: anywhere;
}

/* Tablet */
@media (max-width: 899px) {
  main.container {
    padding-top: var(--space-8);
  }

  .site-header-inner {
    gap: var(--space-4);
  }

  .site-header-top {
    gap: var(--space-4);
  }

  .site-nav {
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }

  .site-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .mu-hero {
    gap: var(--space-8);
  }

  .site-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer-brand {
    grid-column: 1 / -1;
    max-width: 680px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  body {
    background:
      linear-gradient(
        180deg,
        var(--mu-dark) 0,
        var(--mu-dark-3) 230px,
        var(--mu-bg-soft) 440px,
        var(--mu-bg) 100%
      );
  }

  .site-header-inner {
    padding-block: var(--space-3);
  }

  .site-header-top {
    align-items: center;
  }

  .site-brand a {
    gap: 9px;
  }

  .site-brand-mark {
    flex: 0 0 auto;
  }

  .site-brand-name {
    font-size: .94rem;
  }

  .language-nav {
    flex: 0 0 auto;
  }

  .site-nav {
    margin-inline: -12px;
    padding-inline: 12px;
  }

  .mu-hero {
    padding: clamp(24px, 7vw, 34px) 18px;
    border-radius: var(--radius-lg);
  }

  .mu-brand-logo {
    max-width: min(220px, 72vw);
  }

  .mu-hero-content {
    width: 100%;
  }

  .mu-hero-content h1 {
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.02;
  }

  .mu-actions {
    align-items: stretch;
  }

  .mu-actions .mu-button {
    justify-content: center;
  }

  .site-footer {
    margin-top: var(--space-12);
  }

  .site-footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .site-footer-brand {
    grid-column: auto;
  }

  .site-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
  }
}

/* Small phones */
@media (max-width: 479px) {
  .container {
    width: min(calc(100% - 20px), var(--page-max));
  }

  .site-header-top {
    gap: 10px;
  }

  .site-brand-name {
    font-size: .88rem;
  }

  .language-nav {
    font-size: .82rem;
  }

  main.container {
    padding-top: var(--space-5);
  }

  main > article.prose,
  main > section.prose {
    padding: 20px 16px;
  }

  .mu-stat-grid {
    grid-template-columns: 1fr;
  }

  .mu-actions {
    flex-direction: column;
  }

  .mu-actions .mu-button {
    width: 100%;
  }
}

/* Touch targets */
@media (hover: none) and (pointer: coarse) {
  .site-nav a,
  .language-nav a,
  .footer-nav a,
  .footer-legal a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .mu-button {
    min-height: 44px;
  }
}

/* Safe behaviour for wide editorial tables */
@media (max-width: 767px) {
  main > article.prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Print fallback: readable content, no decorative chrome */
@media print {
  body {
    background: #fff;
  }

  .site-header,
  .site-footer {
    display: none;
  }

  main.container {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  main > article.prose,
  main > section.prose {
    width: 100%;
    max-width: none;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
}


/* MU brand refinement */
.site-brand a {
  gap: 12px;
}

.site-brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(80,190,255,.95), transparent 38%),
    linear-gradient(135deg, #087cff, #005a9e);
  box-shadow: 0 0 0 5px rgba(8,124,255,.08), 0 8px 24px rgba(0,70,160,.24);
  font-size: .72rem;
  letter-spacing: .03em;
}

.site-brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.site-brand-name {
  font-size: 1.05rem;
  font-weight: 760;
}

.site-brand-subtitle {
  margin-top: 4px;
  color: rgba(255,255,255,.58);
  font-size: .66rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* 20A.06A.03 — Next-level homepage hero */
.mu-hero {
  grid-template-columns: minmax(0,1.08fr) minmax(360px,.92fr);
  grid-template-areas: "content visual";
  align-items: center;
  gap: 48px;
  margin: 28px 0 64px;
  padding: clamp(36px,5vw,68px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 28px;
  background:
    radial-gradient(circle at 78% 28%, rgba(8,124,255,.28), transparent 34%),
    linear-gradient(135deg,var(--mu-dark),var(--mu-dark-2) 58%,#0d3158);
  box-shadow: 0 28px 70px rgba(7,20,38,.18);
}

.mu-hero-content {
  grid-area: content;
  max-width: 650px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.mu-brand-logo {
  grid-area: visual;
  max-width: 100%;
  height: 360px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  box-shadow: 0 24px 55px rgba(0,0,0,.28);
}

.mu-hero-content.prose h1 {
  color: #fff;
  font-size: clamp(2.5rem,5vw,4.6rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.mu-hero-content.prose p {
  color: var(--mu-on-dark-muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

@media (max-width: 860px) {
  .mu-hero {
    grid-template-columns: 1fr;
    grid-template-areas: "content" "visual";
    gap: 30px;
    padding: 28px 22px;
  }

  .mu-brand-logo {
    height: 260px;
  }
}

.mu-market-preview {
  grid-area: visual;
  display: grid;
  gap: 14px;
  min-height: 320px;
  padding: 28px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035)),
    rgba(7,20,38,.52);
  box-shadow: 0 24px 55px rgba(0,0,0,.26);
  backdrop-filter: blur(14px);
}

.mu-market-preview .preview-label {
  justify-self: start;
  padding: 5px 9px;
  border: 1px solid rgba(89,184,255,.35);
  border-radius: 999px;
  background: rgba(8,124,255,.14);
  color: #8fd3ff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.mu-market-preview strong {
  margin-top: auto;
  font-size: clamp(1.8rem,3vw,2.6rem);
  letter-spacing: -.04em;
}

.mu-market-preview > span:last-child {
  color: var(--mu-on-dark-muted);
  line-height: 1.6;
}

.preview-top,
.preview-pair,
.preview-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.preview-top > span:last-child,
.preview-pair > span {
  color: var(--mu-on-dark-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.preview-pair strong {
  font-size: 1.9rem;
  letter-spacing: -.04em;
}

.preview-chart {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 92px;
  padding: 14px 4px 6px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.preview-chart i {
  flex: 1;
  min-width: 5px;
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg,#48b6ff,#087cff);
  opacity: .92;
}

.preview-chart i:nth-child(1) { height: 28%; }
.preview-chart i:nth-child(2) { height: 40%; }
.preview-chart i:nth-child(3) { height: 34%; }
.preview-chart i:nth-child(4) { height: 58%; }
.preview-chart i:nth-child(5) { height: 50%; }
.preview-chart i:nth-child(6) { height: 68%; }
.preview-chart i:nth-child(7) { height: 76%; }
.preview-chart i:nth-child(8) { height: 92%; }

.preview-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
}

.preview-stats span {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  color: var(--mu-on-dark-muted);
  font-size: .7rem;
}

.preview-stats b {
  color: #fff;
  font-size: .78rem;
}

.preview-plan {
  margin-top: 2px;
  padding: 13px 14px;
  border: 1px solid rgba(8,124,255,.26);
  border-radius: 12px;
  background: rgba(8,124,255,.09);
}

.preview-plan span {
  color: var(--mu-on-dark-muted);
  font-size: .74rem;
}

.preview-plan b {
  color: #8fd3ff;
  font-size: .78rem;
}

@media (max-width: 520px) {
  .preview-stats {
    grid-template-columns: 1fr;
  }
}

.mu-feature-strip {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  margin: -34px 24px 48px;
  position: relative;
  z-index: 2;
}

.mu-feature-strip article {
  display: grid;
  gap: 7px;
  padding: 22px;
  background: rgba(255,255,255,.98);
  border: 1px solid var(--mu-line);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}

.mu-feature-strip b {
  color: var(--mu-heading);
  font-size: .95rem;
}

.mu-feature-strip span {
  color: var(--mu-muted);
  font-size: .8rem;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .mu-feature-strip {
    grid-template-columns: 1fr;
    margin: -20px 12px 38px;
  }
}

.mu-context-section {
  max-width: 1040px !important;
  padding: clamp(30px,5vw,54px) !important;
  background:
    linear-gradient(180deg,#ffffff 0%,#f8fbfe 100%) !important;
  border: 1px solid var(--mu-line) !important;
  border-radius: 24px !important;
  box-shadow: var(--shadow-sm) !important;
}

.mu-context-section h2 {
  max-width: 720px;
  margin-top: 0;
  font-size: clamp(1.55rem,3vw,2.15rem);
  letter-spacing: -.03em;
}

.mu-context-section h2:not(:first-child) {
  margin-top: 44px;
  padding-top: 38px;
  border-top: 1px solid var(--mu-line);
}

.mu-context-section p {
  max-width: 780px;
  color: var(--mu-muted);
  font-size: 1rem;
  line-height: 1.75;
}

.mu-flow-steps {
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  gap: 10px;
  margin: 26px 0 34px;
}

.mu-flow-steps span {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 76px;
  padding: 12px 10px;
  text-align: center;
  color: var(--mu-heading);
  background: #fff;
  border: 1px solid var(--mu-line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  font-size: .76rem;
  font-weight: 750;
  line-height: 1.35;
}

.mu-flow-steps span:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -11px;
  z-index: 3;
  color: var(--mu-blue);
  font-size: 1rem;
  font-weight: 800;
}

.mu-flow-section {
  max-width: 1040px !important;
  padding: clamp(30px,5vw,54px) !important;
  border-radius: 24px !important;
}

@media (max-width: 900px) {
  .mu-flow-steps {
    grid-template-columns: 1fr;
  }

  .mu-flow-steps span:not(:last-child)::after {
    content: "↓";
    right: auto;
    bottom: -15px;
  }
}

.mu-tradeplan-demo {
  display: grid;
  gap: 16px;
  margin: 24px 0 30px;
  padding: 24px;
  color: #fff;
  background: linear-gradient(135deg,var(--mu-dark),var(--mu-dark-2));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
}

.tradeplan-head,
.tradeplan-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tradeplan-head strong {
  margin-left: auto;
}

.tradeplan-head > span:last-child {
  color: var(--mu-on-dark-muted);
  font-size: .76rem;
}

.tradeplan-levels {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 8px;
}

.tradeplan-levels span,
.tradeplan-meta span {
  display: grid;
  gap: 5px;
  padding: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
}

.tradeplan-levels small,
.tradeplan-meta span {
  color: var(--mu-on-dark-muted);
  font-size: .68rem;
}

.tradeplan-levels b,
.tradeplan-meta b {
  color: #fff;
}

.tradeplan-meta {
  justify-content: space-between;
}

@media (max-width: 700px) {
  .tradeplan-levels {
    grid-template-columns: 1fr 1fr;
  }

  .tradeplan-meta {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.mu-radar-preview {
  max-width: 1040px;
  margin: 0 auto 48px;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--mu-line);
  border-radius: 22px;
  box-shadow: var(--shadow-md);
}

.radar-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.radar-head > div {
  display: grid;
  gap: 4px;
}

.radar-head strong {
  color: var(--mu-heading);
  font-size: 1.15rem;
}

.radar-head div span {
  color: var(--mu-muted);
  font-size: .78rem;
}

.radar-row {
  display: grid;
  grid-template-columns: 1.1fr repeat(3,1fr);
  gap: 12px;
  align-items: center;
  padding: 16px 14px;
  border-top: 1px solid var(--mu-line);
}

.radar-row b {
  color: var(--mu-heading);
}

.radar-row span {
  color: var(--mu-muted);
  font-size: .78rem;
}

@media (max-width: 700px) {
  .mu-radar-preview {
    padding: 20px;
  }

  .radar-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.mu-closing-section {
  max-width: 1040px !important;
  margin-bottom: 48px !important;
  padding: clamp(30px,5vw,54px) !important;
  background: linear-gradient(180deg,#f7fbff 0%,#ffffff 100%) !important;
  border: 1px solid var(--mu-line) !important;
  border-radius: 24px !important;
  box-shadow: var(--shadow-sm) !important;
}

.mu-closing-section h2 {
  max-width: 720px;
  margin-top: 0;
  font-size: clamp(1.5rem,3vw,2rem);
  letter-spacing: -.03em;
}

.mu-closing-section h2:not(:first-child) {
  margin-top: 42px;
  padding-top: 36px;
  border-top: 1px solid var(--mu-line);
}

.mu-closing-section p {
  max-width: 780px;
  color: var(--mu-muted);
  line-height: 1.75;
}

@media (max-width: 767px) {
  .footer-nav,
  .footer-legal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
  }

  .footer-nav a,
  .footer-legal a {
    width: auto;
  }

  .site-footer-grid {
    gap: 24px;
  }

  .site-footer-bottom {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
}

/* =========================================================
   20A.06A.03 — HERO REDESIGN V2
   target: approved next-level MU direction
   ========================================================= */

main.container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.mu-hero-v2 {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(420px,.92fr);
  grid-template-areas:
    "copy visual"
    "proof proof";
  column-gap: clamp(42px,6vw,92px);
  row-gap: 34px;

  width: 100%;
  margin: 0;
  padding:
    clamp(54px,6vw,86px)
    max(7vw,40px)
    30px;

  border: 0;
  border-radius: 0;
  overflow: hidden;

  background:
    radial-gradient(circle at 82% 34%, rgba(0,205,255,.23), transparent 27%),
    radial-gradient(circle at 13% 92%, rgba(0,184,255,.16), transparent 31%),
    linear-gradient(118deg,#062f55 0%,#073b68 46%,#075d89 76%,#0a86ad 100%);

  box-shadow: none;
  isolation: isolate;
}

.mu-hero-v2::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.45),transparent 82%);
  z-index:-1;
}

.mu-hero-copy {
  grid-area: copy;
  align-self: center;
  max-width: 720px;
}

.mu-hero-eyebrow {
  margin-bottom: 17px;
  color: rgba(210,235,249,.72);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.mu-hero-copy h1 {
  margin: 0;
  max-width: 760px;
  color: #fff;
  font-size: clamp(3rem,5vw,5.1rem);
  line-height: .96;
  letter-spacing: -.055em;
  font-weight: 850;
}

.mu-hero-copy h1 span {
  color: #17d4ee;
  text-shadow: 0 0 28px rgba(23,212,238,.28);
}

.mu-hero-lead {
  max-width: 660px;
  margin: 26px 0 0;
  color: rgba(228,241,249,.86);
  font-size: clamp(.98rem,1.15vw,1.13rem);
  line-height: 1.72;
}

.mu-hero-actions {
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:30px;
  flex-wrap:wrap;
}

.mu-hero-actions a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 24px;
  border-radius:999px;
  font-weight:800;
  font-size:.91rem;
  text-decoration:none;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    border-color .2s ease;
}

.mu-hero-actions a:hover {
  transform:translateY(-2px);
}

.mu-hero-primary {
  color:#042943;
  background:linear-gradient(135deg,#27e3f4,#2da6ff);
  box-shadow:
    0 10px 30px rgba(0,194,255,.28),
    inset 0 1px rgba(255,255,255,.45);
}

.mu-hero-primary span {
  margin-left:9px;
  font-size:1.12rem;
}

.mu-hero-secondary {
  color:#f3fbff;
  border:1px solid rgba(185,230,250,.46);
  background:rgba(5,40,68,.22);
  backdrop-filter:blur(8px);
}

.mu-hero-visual {
  grid-area: visual;
  position:relative;
  align-self:center;
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1000px;
}

.mu-hero-glow {
  position:absolute;
  width:92%;
  height:82%;
  border-radius:50%;
  background:rgba(0,205,255,.18);
  filter:blur(54px);
  transform:translate(8%,4%);
}

.mu-visual-card {
  position:relative;
  width:min(100%,620px);
  aspect-ratio:1.55/1;
  overflow:hidden;
  border:1px solid rgba(138,229,255,.22);
  border-radius:26px;

  background:
    radial-gradient(circle at 74% 28%,rgba(24,202,255,.30),transparent 30%),
    linear-gradient(145deg,rgba(5,28,51,.96),rgba(6,68,105,.92));

  box-shadow:
    0 35px 70px rgba(0,15,32,.34),
    0 0 50px rgba(0,196,255,.09),
    inset 0 1px rgba(255,255,255,.12);

  transform:rotateY(-3deg) rotateX(1deg);
  transition:transform .35s ease, box-shadow .35s ease;
}

.mu-visual-card:hover {
  transform:rotateY(0) rotateX(0) translateY(-4px);
  box-shadow:
    0 42px 80px rgba(0,15,32,.40),
    0 0 68px rgba(0,196,255,.16);
}

.mu-visual-grid {
  position:absolute;
  inset:0;
  opacity:.22;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(135deg,transparent,black 35%,transparent 90%);
}

.mu-visual-brand {
  position:absolute;
  left:8%;
  right:8%;
  top:24%;
  z-index:2;
  text-align:center;
}

.mu-visual-mark {
  position:absolute;
  left:0;
  top:-12px;
  color:#fff;
  font-size:clamp(3rem,5vw,5.5rem);
  font-weight:950;
  font-style:italic;
  letter-spacing:-.14em;
  opacity:.94;
  text-shadow:16px 9px 28px rgba(0,213,255,.22);
}

.mu-visual-title {
  padding-left:25%;
  color:#fff;
  font-size:clamp(1.5rem,2.35vw,2.8rem);
  font-weight:850;
  letter-spacing:-.04em;
  white-space:nowrap;
}

.mu-visual-title span {
  color:#16d7f2;
}

.mu-visual-subtitle {
  margin-top:8px;
  padding-left:25%;
  color:rgba(222,241,249,.73);
  font-size:clamp(.48rem,.6vw,.7rem);
  font-weight:800;
  letter-spacing:.22em;
}

.mu-visual-chart {
  position:absolute;
  right:8%;
  top:12%;
  width:42%;
  height:44%;
}

.mu-visual-chart i {
  position:absolute;
  bottom:15%;
  width:6px;
  border-radius:5px;
  background:linear-gradient(#46ffb3,#16dcf4);
  box-shadow:0 0 18px rgba(40,240,205,.38);
  animation:muPulseBars 3.4s ease-in-out infinite;
}

.mu-visual-chart i:nth-child(1){left:9%;height:20%;}
.mu-visual-chart i:nth-child(2){left:26%;height:33%;animation-delay:.2s;}
.mu-visual-chart i:nth-child(3){left:43%;height:47%;animation-delay:.4s;}
.mu-visual-chart i:nth-child(4){left:60%;height:67%;animation-delay:.6s;}
.mu-visual-chart i:nth-child(5){left:77%;height:89%;animation-delay:.8s;}

.mu-visual-chart b {
  position:absolute;
  right:0;
  top:-4%;
  color:#27e5e8;
  font-size:clamp(3rem,5vw,5.6rem);
  line-height:1;
  transform:rotate(-9deg);
  text-shadow:0 0 24px rgba(39,229,232,.38);
}

.mu-visual-bottom {
  position:absolute;
  left:8%;
  right:8%;
  bottom:8%;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.18);
  color:rgba(220,239,248,.69);
  text-align:center;
  font-size:clamp(.45rem,.55vw,.64rem);
  font-weight:800;
  letter-spacing:.24em;
}

.mu-hero-proof {
  grid-area:proof;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  padding-top:6px;
}

.mu-hero-proof > div {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  padding:14px 12px;
  border:0;
  border-radius:0;
  background:transparent;
}

.mu-proof-icon {
  flex:0 0 38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#8beeff;
  background:rgba(13,184,230,.14);
  box-shadow:inset 0 0 0 1px rgba(139,238,255,.12);
}

.mu-hero-proof p {
  margin:0;
  display:grid;
  gap:3px;
}

.mu-hero-proof b {
  color:#fff;
  font-size:.82rem;
}

.mu-hero-proof small {
  color:rgba(215,236,246,.62);
  font-size:.67rem;
}

@keyframes muPulseBars {
  0%,100% { opacity:.78; filter:brightness(.92); }
  50%     { opacity:1; filter:brightness(1.18); }
}

@media (max-width: 900px) {
  .mu-hero-v2 {
    grid-template-columns:1fr;
    grid-template-areas:
      "copy"
      "visual"
      "proof";
    padding:44px 24px 28px;
  }

  .mu-hero-copy {
    max-width:680px;
  }

  .mu-hero-visual {
    min-height:300px;
  }

  .mu-hero-proof {
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width: 560px) {
  .mu-hero-copy h1 {
    font-size:clamp(2.65rem,13vw,4rem);
  }

  .mu-hero-visual {
    min-height:235px;
  }

  .mu-visual-card {
    border-radius:20px;
    transform:none;
  }

  .mu-hero-proof {
    grid-template-columns:1fr 1fr;
  }

  .mu-hero-proof > div {
    align-items:flex-start;
    padding:10px 4px;
  }

  .mu-proof-icon {
    flex-basis:32px;
    height:32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mu-visual-chart i {
    animation:none;
  }

  .mu-visual-card,
  .mu-hero-actions a {
    transition:none;
  }
}

/* 20A.06A.03 — HERO V2 GEOMETRY FIX */
main.container {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.mu-hero-v2 {
  grid-template-columns: minmax(520px,1.08fr) minmax(460px,.92fr);
  column-gap: clamp(36px,4vw,68px);
  padding:
    clamp(48px,4.2vw,68px)
    max(5vw,48px)
    26px;
}

.mu-hero-copy {
  max-width: 780px;
}

.mu-hero-copy h1 {
  max-width: 780px;
  font-size: clamp(3rem,4.2vw,4.7rem);
}

.mu-hero-lead {
  max-width: 620px;
}

.mu-hero-visual {
  min-height: 330px;
}

@media (max-width: 1050px) {
  .mu-hero-v2 {
    grid-template-columns: minmax(0,1fr) minmax(380px,.9fr);
  }
}

@media (max-width: 900px) {
  .mu-hero-v2 {
    grid-template-columns:1fr;
  }
}

/* 20A.06A.03 — REAL MU HEADER LOGO */
.site-brand-logo-img {
  display: block;
  width: 58px;
  height: 44px;
  flex: 0 0 58px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.16));
}

@media (max-width: 560px) {
  .site-brand-logo-img {
    width: 48px;
    height: 38px;
    flex-basis: 48px;
  }
}

/* 20A.06A.03 — HEADER BRAND LEFT ALIGNMENT */
@media (min-width: 900px) {
  .site-brand {
    transform: translateX(-24px);
  }
}

/* 20A.06A.03 — HEADER ALIGN WITH HERO */
@media (min-width: 900px) {
  .site-header .site-header-inner {
    width: 100%;
    max-width: none;
    padding-left: max(5vw,48px);
    padding-right: max(5vw,48px);
  }

  .site-brand {
    transform: none;
  }
}

/* 20A.06A.03 — HEADER ALIGNMENT V2 */
.site-header .container,
.site-header .header-inner,
.site-header .site-header-inner {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.site-header .header-inner,
.site-header .site-header-inner {
  padding-left: max(3.2vw, 34px);
  padding-right: max(3.2vw, 34px);
}

.site-header .brand,
.site-header .site-brand,
.site-header .brand-lockup {
  margin-left: 0;
  transform: none;
}

.site-header .brand img,
.site-header .site-brand img,
.site-header .brand-lockup img {
  width: auto;
  max-height: 58px;
}

@media (max-width: 900px) {
  .site-header .header-inner,
  .site-header .site-header-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* 20A.06A.03 — HEADER SINGLE ROW */
@media (min-width: 901px) {
  .site-header .site-header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: clamp(28px, 3vw, 54px);
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .site-header .site-header-top {
    display: contents;
  }

  .site-header .site-brand {
    grid-column: 1;
    margin: 0;
  }

  .site-header .site-nav {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.5vw, 28px);
    margin: 0;
    padding: 0;
    border: 0;
    white-space: nowrap;
  }

  .site-header .language-nav {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
    justify-self: end;
  }
}


/* =========================================================
   20A.06A.03 — HEADER REFERENCE V3
   logo + navigation + language on one horizontal line
   ========================================================= */

@media (min-width: 901px) {

  .site-header .site-header-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 18px max(3.2vw, 34px);

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(28px, 3vw, 56px);
  }

  .site-header-top {
    display: contents;
  }

  .site-brand {
    grid-column: 1;
    margin: 0;
  }

  .site-brand > a {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    white-space: nowrap;
  }

  .site-brand-logo-img {
    width: 78px;
    height: 62px;
    max-height: none !important;
    object-fit: contain;
    flex: 0 0 auto;
  }

  .site-brand-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.05;
  }

  .site-brand-name {
    font-size: 1.08rem;
    font-weight: 800;
    white-space: nowrap;
  }

  .site-brand-subtitle {
    margin-top: 5px;
    font-size: .60rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .site-nav {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(17px, 1.45vw, 28px);
    margin: 0;
    padding: 0;
    border: 0;
    flex-wrap: nowrap;
  }

  .site-nav a {
    white-space: nowrap;
  }

  .language-nav {
    grid-column: 3;
    margin: 0;
    justify-self: end;
  }
}


/* 20A.06A.03 — MU MARK V1 */
@media (min-width: 900px) {
  .site-brand-logo-img {
    width: 96px;
    height: 70px;
    object-fit: contain;
    object-position: center;
  }

  .site-brand > a {
    gap: 12px;
  }
}

/* 20A.06A.03 — BRAND ACCENT */
.site-brand-accent {
  color: #16d9f3;
}


/* 20A.06A.03 — BRAND ACCENT FINAL */
.site-brand-accent {
  color: #16d9e8;
}



.mu-market-card{
  position:relative;
  z-index:2;
  width:min(100%,620px);
  min-height:370px;
  padding:22px 22px 18px;
  overflow:hidden;
  border:1px solid rgba(123,225,255,.20);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(5,24,43,.98),rgba(5,47,77,.96));
  box-shadow:0 32px 70px rgba(0,14,30,.36),0 0 54px rgba(0,196,255,.08),inset 0 1px rgba(255,255,255,.08);
  transform:rotateY(-2deg) rotateX(1deg);
  transition:transform .3s ease,box-shadow .3s ease;
}

.mu-market-card:hover{
  transform:rotateY(0) rotateX(0) translateY(-3px);
  box-shadow:0 40px 80px rgba(0,14,30,.42),0 0 64px rgba(0,196,255,.13);
}

.mu-market-head,.mu-market-price{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.mu-market-head>div{display:grid;gap:3px}
.mu-market-head strong{color:#fff;font-size:1rem;letter-spacing:.01em}
.mu-market-head>div span{color:rgba(213,237,247,.58);font-size:.68rem}

.mu-preview-badge{
  padding:5px 8px;
  border:1px solid rgba(78,229,255,.28);
  border-radius:999px;
  color:#85efff;
  background:rgba(15,191,227,.10);
  font-size:.56rem;
  font-weight:850;
  letter-spacing:.12em;
}

.mu-market-price{margin-top:12px}
.mu-market-price strong{color:#fff;font-size:1.45rem;letter-spacing:-.03em}
.mu-market-price span{color:#59efb3;font-size:.78rem;font-weight:800}

.mu-market-chart{
  position:relative;
  height:220px;
  margin-top:12px;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.mu-chart-grid{
  position:absolute;
  inset:0 38px 22px 0;
  opacity:.34;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:100% 25%,12.5% 100%;
}

.mu-candles{position:absolute;inset:10px 42px 28px 6px}

.mu-candles i{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:8px;
  height:var(--h);
  border-radius:1px;
  transform:translateX(-50%);
}

.mu-candles i:before{
  content:"";
  position:absolute;
  left:50%;
  top:-7px;
  bottom:-7px;
  width:1px;
  transform:translateX(-50%);
  background:currentColor;
  opacity:.9;
}

.mu-candles i.up{background:#24d8a0;color:#24d8a0}
.mu-candles i.down{background:#ef6674;color:#ef6674}

.mu-trend-line{
  position:absolute;
  left:5px;
  right:42px;
  top:13px;
  width:calc(100% - 47px);
  height:155px;
  overflow:visible;
}

.mu-trend-line polyline{
  fill:none;
  stroke:#21d8f1;
  stroke-width:1.15;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 4px rgba(33,216,241,.35));
}

.mu-price-axis{
  position:absolute;
  top:8px;
  right:0;
  bottom:28px;
  width:36px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:rgba(215,236,246,.46);
  font-size:.52rem;
  text-align:right;
}

.mu-time-axis{
  position:absolute;
  left:0;
  right:40px;
  bottom:5px;
  display:flex;
  justify-content:space-between;
  color:rgba(215,236,246,.40);
  font-size:.50rem;
}

.mu-market-tabs{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
}

.mu-market-tabs span,.mu-market-tabs b{
  padding:5px 8px;
  border-radius:7px;
  font-size:.58rem;
  font-weight:800;
  color:rgba(215,236,246,.54);
}

.mu-market-tabs b{
  color:#9af2ff;
  background:rgba(19,193,230,.13);
  box-shadow:inset 0 0 0 1px rgba(110,225,255,.12);
}

.mu-market-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}

.mu-market-stats span{display:grid;gap:3px}

.mu-market-stats small{
  color:rgba(214,235,245,.42);
  font-size:.49rem;
  letter-spacing:.08em;
}

.mu-market-stats b{
  color:#dffaff;
  font-size:.68rem;
}

/* 20A.06A — MARKET TERMINAL CHART V2 */
.mu-market-chart-v2{
  height:250px;
  margin-top:14px;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}

.mu-terminal-chart{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:fill;
}

/* 20A.06A — HERO PROOF STRIP PREMIUM */
.mu-hero-proof{
  margin-top:10px;
  padding:10px 12px;
  gap:0;
  border:1px solid rgba(150,225,245,.12);
  border-radius:18px;
  background:rgba(4,31,52,.18);
  box-shadow:
    inset 0 1px rgba(255,255,255,.035),
    0 10px 30px rgba(0,18,34,.08);
  backdrop-filter:blur(10px);
}

.mu-hero-proof > div{
  position:relative;
  padding:15px 18px;
}

.mu-hero-proof > div:not(:last-child)::after{
  content:"";
  position:absolute;
  top:16%;
  right:0;
  width:1px;
  height:68%;
  background:rgba(190,231,246,.10);
}

.mu-proof-icon{
  flex:0 0 42px;
  height:42px;
  font-size:.95rem;
  background:rgba(21,202,232,.12);
  box-shadow:
    inset 0 0 0 1px rgba(139,238,255,.16),
    0 0 18px rgba(20,210,240,.05);
}

.mu-hero-proof b{
  font-size:.86rem;
  letter-spacing:.005em;
}

.mu-hero-proof small{
  font-size:.68rem;
  color:rgba(220,239,247,.66);
}

/* 20A.06A — HERO PROOF STRIP CONTRAST */
.mu-hero-proof{
  background:linear-gradient(
    90deg,
    rgba(4,24,43,.78),
    rgba(5,37,60,.72)
  );
  border-color:rgba(148,226,246,.16);
  box-shadow:
    inset 0 1px rgba(255,255,255,.045),
    0 14px 34px rgba(0,15,30,.14);
}

.mu-hero-proof > div:not(:last-child)::after{
  background:rgba(190,231,246,.14);
}

/* 20A.06A — HERO PROOF STRIP LIGHT FINAL */
.mu-hero-proof{
  margin-top:14px;
  padding:8px 12px;
  background:rgba(247,251,253,.94);
  border:1px solid rgba(255,255,255,.62);
  border-radius:18px;
  box-shadow:
    0 14px 34px rgba(4,32,54,.10),
    inset 0 1px rgba(255,255,255,.90);
  backdrop-filter:blur(12px);
}

.mu-hero-proof > div{
  padding:15px 18px;
}

.mu-hero-proof > div:not(:last-child)::after{
  background:rgba(17,74,103,.12);
}

.mu-proof-icon{
  color:#087d9c;
  background:rgba(18,197,221,.12);
  box-shadow:
    inset 0 0 0 1px rgba(12,151,181,.13),
    0 5px 14px rgba(12,151,181,.07);
}

.mu-hero-proof b{
  color:#113a50;
}

.mu-hero-proof small{
  color:#688392;
}

/* 20A.06A — V6 TERMINAL PLOT SCALE POLISH */
.mu-market-card{
  padding:16px 18px 12px;
}

.mu-market-chart-v2{
  height:270px;
  margin-top:8px;
}

.mu-market-tabs{
  margin-top:8px;
}

.mu-market-stats{
  margin-top:8px;
  padding-top:8px;
}

/* 20A.06A — TERMINAL CHART V6 SCALE POLISH */
.mu-market-chart-v2{
  overflow:hidden;
}

.mu-market-chart-v2 .mu-terminal-chart{
  width:112%;
  height:112%;
  max-width:none;
  object-fit:fill;
  transform:translate(-5.5%,-4%);
  transform-origin:center;
}

/* 20A.06A — HERO PROOF STRIP LIGHT POLISH */
.mu-hero-proof{
  background:linear-gradient(
    90deg,
    rgba(245,252,254,.94),
    rgba(233,248,252,.92)
  );
  border-color:rgba(185,226,237,.72);
  box-shadow:
    0 12px 28px rgba(4,32,54,.08),
    inset 0 1px rgba(255,255,255,.95);
}

.mu-hero-proof > div:not(:last-child)::after{
  background:rgba(24,92,118,.16);
}

.mu-proof-icon{
  color:#087b98;
  background:rgba(13,198,220,.14);
}

.mu-hero-proof b{
  color:#123e52;
}

.mu-hero-proof small{
  color:#6b8794;
}

/* 20A.06A — HERO PROOF STRIP WHITE FINAL */
.mu-hero-proof{
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.98);
  box-shadow:
    0 14px 32px rgba(4,32,54,.11),
    inset 0 1px rgba(255,255,255,1);
  backdrop-filter:none;
}

.mu-hero-proof > div:not(:last-child)::after{
  background:rgba(24,92,118,.13);
}

.mu-proof-icon{
  color:#087b98;
  background:rgba(13,198,220,.11);
}

.mu-hero-proof b{
  color:#123e52;
}

.mu-hero-proof small{
  color:#718a96;
}

/* 20A.06A — CONTEXT SECTION V2 */
.mu-context-v2{
  padding:
    clamp(72px,7vw,110px)
    max(5vw,48px)
    clamp(72px,6vw,96px);
  background:
    radial-gradient(circle at 18% 10%,rgba(19,203,225,.08),transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#f7fbfd 100%);
}

.mu-context-intro{
  max-width:980px;
  margin:0 auto 42px;
  text-align:left;
}

.mu-context-eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
  color:#5f7890;
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.16em;
}

.mu-context-eyebrow::after{
  content:"";
  width:42px;
  height:1px;
  background:rgba(32,108,137,.20);
}

.mu-context-intro h2{
  margin:0;
  color:#0f2d45;
  font-size:clamp(2.1rem,3.2vw,3.7rem);
  line-height:1.06;
  letter-spacing:-.04em;
}

.mu-context-intro h2 span{
  color:#0aa9d2;
}

.mu-context-intro > p{
  max-width:820px;
  margin:18px 0 0;
  color:#5c7487;
  font-size:clamp(1rem,1.15vw,1.12rem);
  line-height:1.75;
}

.mu-context-cards{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.mu-context-cards article{
  min-height:190px;
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding:28px 26px;
  border:1px solid rgba(28,90,118,.10);
  border-radius:22px;
  background:rgba(255,255,255,.96);
  box-shadow:
    0 16px 38px rgba(11,44,67,.07),
    inset 0 1px rgba(255,255,255,.95);
}

.mu-context-cards article:nth-child(2) .mu-context-icon{
  color:#0aa868;
  background:rgba(20,203,141,.12);
}

.mu-context-cards article:nth-child(3) .mu-context-icon{
  color:#6745d8;
  background:rgba(112,79,225,.11);
}

.mu-context-icon{
  flex:0 0 58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:#087da0;
  background:rgba(14,172,221,.11);
  font-size:1.35rem;
  font-weight:900;
}

.mu-context-cards h3{
  margin:2px 0 10px;
  color:#102f47;
  font-size:1.18rem;
  letter-spacing:-.02em;
}

.mu-context-cards p{
  margin:0;
  color:#657d8e;
  font-size:.95rem;
  line-height:1.65;
}

@media (max-width:900px){
  .mu-context-cards{
    grid-template-columns:1fr;
  }

  .mu-context-intro{
    margin-bottom:30px;
  }
}


/* 20A.06A — CONTEXT V2 DESKTOP WIDTH POLISH */
.mu-context-intro,
.mu-context-cards{
  max-width:1320px;
}

.mu-context-intro > p{
  max-width:900px;
}

.mu-context-cards{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}

.mu-context-cards article{
  min-height:175px;
  padding:30px 28px;
}

/* 20A.06A — CONTEXT V2 LEGACY OVERRIDE */
.mu-context-section.mu-context-v2{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:
    clamp(72px,7vw,110px)
    max(5vw,48px)
    clamp(72px,6vw,96px) !important;

  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;

  background:
    radial-gradient(circle at 18% 10%,rgba(19,203,225,.08),transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#f7fbfd 100%) !important;
}

/* 20A.06A — MARKET ACTIVITY V2 LIGHT */
.mu-market-activity-v2{
  width:100%;
  padding:
    clamp(64px,6vw,92px)
    max(5vw,48px)
    clamp(70px,6vw,96px);
  background:
    radial-gradient(circle at 85% 8%,rgba(19,201,224,.10),transparent 26%),
    linear-gradient(180deg,#eef8fb 0%,#e7f3f8 100%);
}

.mu-market-activity-head{
  max-width:1320px;
  margin:0 auto 26px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
}

.mu-market-activity-head h2{
  margin:10px 0 6px;
  color:#102f47;
  font-size:clamp(2rem,2.8vw,3.1rem);
  line-height:1.08;
  letter-spacing:-.035em;
}

.mu-market-activity-head p{
  margin:0;
  color:#60798a;
  font-size:1rem;
}

.mu-market-activity-head a{
  flex:0 0 auto;
  color:#078caf;
  font-weight:800;
  font-size:.9rem;
}

.mu-market-activity-v2 .preview-label{
  display:inline-flex;
  padding:5px 8px;
  border-radius:999px;
  color:#087d9c;
  background:rgba(16,190,218,.10);
  border:1px solid rgba(16,159,190,.15);
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.11em;
}

.mu-market-table{
  max-width:1320px;
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(29,88,114,.10);
  border-radius:20px;
  background:rgba(255,255,255,.97);
  box-shadow:
    0 18px 44px rgba(17,58,80,.08),
    inset 0 1px rgba(255,255,255,1);
}

.mu-market-table-row{
  display:grid;
  grid-template-columns:
    44px
    minmax(80px,.8fr)
    minmax(110px,1fr)
    minmax(90px,.8fr)
    minmax(110px,1fr)
    minmax(120px,1fr)
    minmax(110px,.9fr)
    minmax(130px,1.1fr);
  align-items:center;
  min-height:62px;
  padding:0 20px;
  border-bottom:1px solid rgba(31,91,118,.08);
  color:#29495b;
  font-size:.86rem;
}

.mu-market-table-row:last-child{
  border-bottom:0;
}

.mu-market-table-head{
  min-height:48px;
  color:#718997;
  background:#f6fafc;
  font-size:.70rem;
  font-weight:850;
  letter-spacing:.02em;
}

.mu-market-table-row b{
  color:#15394e;
  font-size:.92rem;
}

.mu-market-table-row .up{
  color:#0b9b69;
  font-weight:800;
}

.mu-market-table-row .down{
  color:#d75262;
  font-weight:800;
}

.mu-market-table-row em{
  display:inline-flex;
  width:max-content;
  padding:5px 9px;
  border-radius:999px;
  font-style:normal;
  font-size:.72rem;
  font-weight:850;
}

.mu-market-table-row em.high,
.mu-market-table-row em.very-high{
  color:#087a54;
  background:rgba(24,196,132,.12);
}

.mu-market-table-row em.medium{
  color:#9b6d00;
  background:rgba(235,178,38,.15);
}

.mu-market-table-row em.low{
  color:#b33e4e;
  background:rgba(226,85,103,.12);
}

.mu-market-table-row .spark{
  color:#568297;
  font-family:monospace;
  letter-spacing:-.12em;
}

.mu-market-table-row .spark.up{
  color:#0aa77d;
}

.mu-market-table-row .spark.down{
  color:#d95868;
}

@media (max-width:900px){
  .mu-market-activity-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .mu-market-table{
    overflow-x:auto;
  }

  .mu-market-table-row{
    min-width:900px;
  }
}

/* 20A.06A — MARKET ACTIVITY V2 DARK SECTION */
.mu-market-activity-v2{
  background:
    radial-gradient(circle at 82% 10%,rgba(18,203,225,.12),transparent 28%),
    linear-gradient(180deg,#0b2d46 0%,#123b57 100%);
}

.mu-market-activity-head h2{
  color:#ffffff;
}

.mu-market-activity-head p{
  color:rgba(220,239,247,.72);
}

.mu-market-activity-head a{
  color:#58e9ff;
}

.mu-market-activity-v2 .preview-label{
  color:#8df1ff;
  background:rgba(20,197,221,.12);
  border-color:rgba(110,230,245,.20);
}

.mu-market-table{
  border-color:rgba(255,255,255,.12);
  box-shadow:
    0 22px 54px rgba(0,14,28,.22),
    inset 0 1px rgba(255,255,255,1);
}

/* 20A.06A — HERO PREMIUM DARK FINAL TUNING */
.mu-hero-v2{
  background:
    radial-gradient(circle at 82% 34%,rgba(0,190,225,.20),transparent 32%),
    radial-gradient(circle at 14% 92%,rgba(0,150,205,.08),transparent 30%),
    linear-gradient(
      118deg,
      #041c31 0%,
      #052a47 43%,
      #064663 72%,
      #076f89 100%
    ) !important;
}

/* 20A.06A — MARKET ACTIVITY PREMIUM DARK TABLE */
.mu-market-activity-v2 .mu-market-table{
  background:
    linear-gradient(180deg,rgba(5,31,49,.96),rgba(7,42,62,.96));
  border:1px solid rgba(101,218,236,.14);
  box-shadow:
    0 24px 60px rgba(0,10,22,.28),
    inset 0 1px rgba(255,255,255,.035);
}

.mu-market-activity-v2 .mu-market-table-head{
  background:rgba(255,255,255,.035);
  color:rgba(192,220,231,.62);
  border-bottom-color:rgba(255,255,255,.08);
}

.mu-market-activity-v2 .mu-market-table-row{
  color:rgba(219,237,244,.78);
  border-bottom-color:rgba(255,255,255,.065);
}

.mu-market-activity-v2 .mu-market-table-row b{
  color:#ffffff;
}

.mu-market-activity-v2 .mu-market-table-row .up{
  color:#42e3ad;
}

.mu-market-activity-v2 .mu-market-table-row .down{
  color:#ff7181;
}

.mu-market-activity-v2 .mu-market-table-row em.high,
.mu-market-activity-v2 .mu-market-table-row em.very-high{
  color:#61f0c1;
  background:rgba(36,211,155,.13);
  border:1px solid rgba(70,225,178,.10);
}

.mu-market-activity-v2 .mu-market-table-row em.medium{
  color:#ffd67b;
  background:rgba(235,178,38,.12);
}

.mu-market-activity-v2 .mu-market-table-row em.low{
  color:#ff91a0;
  background:rgba(226,85,103,.12);
}

.mu-market-activity-v2 .mu-market-table-row .spark{
  color:#76a7b9;
}

.mu-market-activity-v2 .mu-market-table-row .spark.up{
  color:#39d9b0;
}

.mu-market-activity-v2 .mu-market-table-row .spark.down{
  color:#ff7181;
}

/* 20A.06A — MARKET ACTIVITY WHITE TABLE FINAL */
.mu-market-activity-v2 .mu-market-table{
  background:#ffffff !important;
  color:#17384a !important;
  border:1px solid rgba(17,72,96,.10) !important;
  box-shadow:0 22px 54px rgba(0,14,28,.20) !important;
}

.mu-market-activity-v2 .mu-market-table th{
  color:#315467 !important;
  background:#f3f8fa !important;
  border-color:rgba(17,72,96,.10) !important;
}

.mu-market-activity-v2 .mu-market-table td{
  color:#355565;
  border-color:rgba(17,72,96,.09) !important;
}

.mu-market-activity-v2 .mu-market-table tbody tr{
  background:#ffffff;
}

.mu-market-activity-v2 .mu-market-table tbody tr:hover{
  background:#f5fbfc;
}

/* 20A.06A — MARKET TABLE TEXT CONTRAST POLISH */
.mu-market-activity-v2 .mu-market-table th{
  color:#315467 !important;
}

.mu-market-activity-v2 .mu-market-table td{
  color:#345365 !important;
}

.mu-market-activity-v2 .mu-market-table td:nth-child(2){
  color:#15394b !important;
  font-weight:700;
}

.mu-market-activity-v2 .mu-market-table td:nth-child(3),
.mu-market-activity-v2 .mu-market-table td:nth-child(5),
.mu-market-activity-v2 .mu-market-table td:nth-child(6),
.mu-market-activity-v2 .mu-market-table td:nth-child(7){
  font-weight:600;
}

/* 20A.06A — MARKET ACTIVITY WHITE TABLE TEXT FIX */
.mu-market-activity-v2 .mu-market-table-head > span{
  color:#315467 !important;
}

.mu-market-activity-v2 .mu-market-table-row:not(.mu-market-table-head) > span{
  color:#4b6674 !important;
}

.mu-market-activity-v2 .mu-market-table-row:not(.mu-market-table-head) > b{
  color:#16394b !important;
  font-weight:800;
}

.mu-market-activity-v2 .mu-market-table-row > span.up{
  color:#10966f !important;
  font-weight:700;
}

.mu-market-activity-v2 .mu-market-table-row > span.down{
  color:#d9485f !important;
  font-weight:700;
}

.mu-market-activity-v2 .mu-market-table-row > span.spark.up{
  color:#22ae91 !important;
}

.mu-market-activity-v2 .mu-market-table-row > span.spark.down{
  color:#d95b70 !important;
}

/* 20A.06A — TRADE PLAN + CONTEXT PREMIUM SECTION */
.mu-trade-context-v2{
  padding:
    clamp(72px,7vw,110px)
    max(5vw,48px);
  background:
    radial-gradient(circle at 18% 20%,rgba(23,197,222,.07),transparent 28%),
    linear-gradient(180deg,#f6fafc 0%,#eef5f8 100%);
}

.mu-trade-context-grid{
  max-width:1320px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:28px;
}

.mu-trade-plan-card,
.mu-context-panel{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  padding:34px 34px 30px;
  min-height:430px;
  border:1px solid rgba(18,79,103,.10);
  box-shadow:0 20px 55px rgba(5,31,48,.10);
}

.mu-trade-plan-card{
  color:#eef9fc;
  background:
    radial-gradient(circle at 88% 12%,rgba(21,209,226,.16),transparent 28%),
    linear-gradient(145deg,#061f35 0%,#0a344e 58%,#0b5166 100%);
}

.mu-context-panel{
  color:#17394a;
  background:#ffffff;
}

.mu-panel-kicker{
  margin-bottom:18px;
  font-size:.74rem;
  line-height:1;
  letter-spacing:.16em;
  font-weight:800;
  color:#5de7f6;
}

.mu-context-panel .mu-panel-kicker{
  color:#108aa4;
}

.mu-trade-plan-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:26px;
}

.mu-trade-plan-head h2,
.mu-context-panel h2{
  margin:0;
  font-size:clamp(1.8rem,2.4vw,2.6rem);
  line-height:1.05;
  letter-spacing:-.04em;
}

.mu-trade-plan-head h2{
  color:#ffffff;
}

.mu-trade-plan-head p{
  margin:10px 0 0;
  color:rgba(224,242,248,.70);
}

.mu-trade-plan-head > strong{
  flex:0 0 auto;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(20,202,221,.10);
  border:1px solid rgba(90,230,244,.16);
  color:#89f5ff;
  font-size:.82rem;
}

.mu-trade-levels{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.mu-trade-levels > div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 18px;
  border-radius:16px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
}

.mu-trade-levels span{
  color:rgba(220,239,246,.68);
  font-size:.82rem;
}

.mu-trade-levels b{
  color:#ffffff;
  font-size:.96rem;
}

.mu-trade-levels .tp b{
  color:#68f0bd;
}

.mu-trade-levels .sl b{
  color:#ff8794;
}

.mu-trade-note{
  margin:22px 0 0;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(217,235,242,.54);
  font-size:.76rem;
}

.mu-context-panel > p{
  max-width:620px;
  margin:16px 0 28px;
  color:#617b88;
  font-size:1rem;
  line-height:1.75;
}

.mu-context-checks{
  display:grid;
  gap:14px;
}

.mu-context-checks > div{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:14px;
  align-items:flex-start;
  padding:15px 16px;
  border-radius:16px;
  background:#f5fafc;
  border:1px solid rgba(20,94,120,.08);
}

.mu-context-checks > div > span{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(19,198,219,.11);
  color:#0b8eaa;
  font-weight:900;
}

.mu-context-checks p{
  margin:0;
  color:#687f8b;
  line-height:1.5;
}

.mu-context-checks b{
  color:#17394a;
}

@media (max-width:900px){
  .mu-trade-context-grid{
    grid-template-columns:1fr;
  }
}


/* 20A.06A — TRADE CONTEXT V3 PREMIUM */
.mu-trade-context-v3{
  padding:
    clamp(84px,7vw,118px)
    max(5vw,48px);
  background:
    radial-gradient(circle at 14% 18%,rgba(14,191,216,.055),transparent 30%),
    linear-gradient(180deg,#f7fafc 0%,#eef4f7 100%);
}

.mu-trade-context-v3-grid{
  max-width:1320px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:30px;
  align-items:stretch;
}

/* LEFT — TERMINAL */
.mu-trade-terminal{
  position:relative;
  overflow:hidden;
  min-height:520px;
  padding:36px 38px 30px;
  border-radius:22px;
  color:#edf9fc;
  background:
    radial-gradient(circle at 90% 8%,rgba(21,204,226,.13),transparent 30%),
    linear-gradient(145deg,#061b2e 0%,#082b43 58%,#0b4356 100%);
  border:1px solid rgba(110,225,240,.10);
  box-shadow:0 26px 64px rgba(4,25,40,.16);
}

.mu-trade-terminal::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.14;
  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:44px 44px;
}

.mu-trade-terminal > *{
  position:relative;
  z-index:1;
}

.mu-trade-terminal .mu-panel-kicker{
  margin:0 0 18px;
  color:#63e9f5;
  font-size:.72rem;
  letter-spacing:.17em;
}

.mu-trade-terminal-head > div > span{
  display:block;
  margin-bottom:10px;
  color:#8eaebc;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
}

.mu-trade-terminal-head h2{
  margin:0;
  color:#fff;
  font-size:clamp(2rem,2.5vw,2.75rem);
  line-height:1.04;
  letter-spacing:-.045em;
}

.mu-trade-terminal-head p{
  max-width:570px;
  margin:12px 0 26px;
  color:rgba(222,240,246,.67);
  line-height:1.65;
}

/* VISUAL TRADE AREA */
.mu-trade-visual{
  position:relative;
  height:255px;
  margin-top:8px;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
}

.mu-trade-price-line{
  position:absolute;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  font-size:.76rem;
}

.mu-trade-price-line::before{
  content:"";
  position:absolute;
  left:58px;
  right:88px;
  top:50%;
  height:1px;
  background:rgba(255,255,255,.12);
}

.mu-trade-price-line span,
.mu-trade-price-line b{
  position:relative;
  z-index:1;
}

.mu-trade-price-line span{
  min-width:48px;
  color:#90aeba;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.10em;
}

.mu-trade-price-line b{
  min-width:78px;
  text-align:right;
  color:#ddecf2;
  font-size:.78rem;
}

.mu-trade-price-line.tp3{top:16px;}
.mu-trade-price-line.tp2{top:64px;}
.mu-trade-price-line.tp1{top:112px;}
.mu-trade-price-line.entry{top:160px;}
.mu-trade-price-line.sl{top:208px;}

.mu-trade-price-line.tp1::before,
.mu-trade-price-line.tp2::before,
.mu-trade-price-line.tp3::before{
  background:rgba(55,219,165,.34);
}

.mu-trade-price-line.tp1 span,
.mu-trade-price-line.tp2 span,
.mu-trade-price-line.tp3 span,
.mu-trade-price-line.tp1 b,
.mu-trade-price-line.tp2 b,
.mu-trade-price-line.tp3 b{
  color:#63e8b8;
}

.mu-trade-price-line.entry::before{
  background:rgba(62,216,237,.55);
}

.mu-trade-price-line.entry span,
.mu-trade-price-line.entry b{
  color:#75ebf7;
}

.mu-trade-price-line.sl::before{
  background:rgba(237,101,120,.38);
}

.mu-trade-price-line.sl span,
.mu-trade-price-line.sl b{
  color:#ff8b99;
}

.mu-trade-path{
  position:absolute;
  left:22%;
  right:24%;
  top:32px;
  bottom:28px;
  display:flex;
  align-items:flex-end;
  gap:10px;
}

.mu-trade-path span{
  flex:1;
  min-width:4px;
  border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,rgba(70,235,246,.90),rgba(33,150,184,.28));
}

.mu-trade-path span:nth-child(1){height:24%}
.mu-trade-path span:nth-child(2){height:36%}
.mu-trade-path span:nth-child(3){height:29%}
.mu-trade-path span:nth-child(4){height:48%}
.mu-trade-path span:nth-child(5){height:42%}
.mu-trade-path span:nth-child(6){height:62%}
.mu-trade-path span:nth-child(7){height:58%}
.mu-trade-path span:nth-child(8){height:78%}
.mu-trade-path span:nth-child(9){height:88%}

.mu-trade-terminal-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:20px;
}

.mu-trade-terminal-foot > span{
  color:#8eeaf3;
  font-size:.80rem;
  font-weight:700;
}

.mu-trade-terminal-foot small{
  color:rgba(208,228,235,.45);
  text-align:right;
  font-size:.70rem;
}

/* RIGHT — EDITORIAL CONTEXT */
.mu-context-editorial{
  min-height:520px;
  padding:38px 42px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(22,82,105,.09);
  box-shadow:0 22px 58px rgba(5,31,48,.08);
}

.mu-context-editorial .mu-panel-kicker{
  margin:0 0 20px;
  color:#1188a0;
  font-size:.72rem;
  letter-spacing:.17em;
}

.mu-context-editorial h2{
  max-width:520px;
  margin:0;
  color:#153b4e;
  font-size:clamp(2rem,2.5vw,2.75rem);
  line-height:1.04;
  letter-spacing:-.045em;
}

.mu-context-editorial > p{
  max-width:570px;
  margin:18px 0 34px;
  color:#667f8c;
  line-height:1.75;
}

.mu-context-lines{
  border-top:1px solid rgba(22,82,105,.10);
}

.mu-context-lines > div{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:18px;
  align-items:start;
  padding:20px 0;
  border-bottom:1px solid rgba(22,82,105,.10);
}

.mu-context-lines > div > span{
  color:#1a9bb1;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
}

.mu-context-lines p{
  margin:0;
}

.mu-context-lines b{
  display:block;
  margin-bottom:5px;
  color:#153b4e;
  font-size:.98rem;
}

.mu-context-lines small{
  display:block;
  color:#78909b;
  font-size:.84rem;
  line-height:1.55;
}

@media (max-width:900px){
  .mu-trade-context-v3-grid{
    grid-template-columns:1fr;
  }

  .mu-trade-terminal,
  .mu-context-editorial{
    min-height:auto;
  }
}

/* 20A.06A — TRADE PLAN CHART FIT */
.mu-trade-chart-preview{
  margin:10px 0 0;
  padding:8px 0 0;
  border-top:1px solid rgba(255,255,255,.07);
}

.mu-trade-chart-preview img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
}

.mu-trade-terminal-foot a{
  color:#8eeaf3;
  font-size:.82rem;
  font-weight:800;
  text-decoration:none;
}

.mu-trade-terminal-foot a:hover{
  text-decoration:underline;
}


/* 20A.06A — TRADE PLAN CTA PROMINENT */
.mu-trade-terminal-foot a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 18px;
  border-radius:9px;
  background:#19c6dc;
  color:#053345 !important;
  font-size:.82rem;
  font-weight:800;
  text-decoration:none !important;
  box-shadow:0 8px 20px rgba(14,198,220,.18);
}

.mu-trade-terminal-foot a:hover{
  background:#45d7e7;
  transform:translateY(-1px);
}


/* 20A.06A — CLOSING V2 */
.mu-closing-v2{
  padding:
    clamp(84px,7vw,118px)
    max(5vw,48px);
  background:
    radial-gradient(circle at 12% 12%,rgba(17,192,218,.06),transparent 28%),
    linear-gradient(180deg,#f8fbfc 0%,#eef4f6 100%);
}

.mu-closing-v2-inner{
  max-width:1320px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:56px;
  align-items:start;
}

.mu-closing-eyebrow{
  margin-bottom:18px;
  color:#1188a0;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.17em;
}

.mu-closing-v2-main h2{
  max-width:700px;
  margin:0;
  color:#153b4e;
  font-size:clamp(2.5rem,4vw,4rem);
  line-height:1.02;
  letter-spacing:-.05em;
}

.mu-closing-v2-main > p{
  max-width:680px;
  color:#687f8b;
  line-height:1.8;
}

.mu-closing-v2-main .mu-closing-lead{
  margin-top:26px;
  color:#395c6d;
  font-size:1.08rem;
}

.mu-closing-principles{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:30px;
}

.mu-closing-principles span{
  padding:10px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(22,82,105,.10);
  color:#315567;
  font-size:.78rem;
  font-weight:700;
  box-shadow:0 8px 22px rgba(5,31,48,.05);
}

.mu-development-v2{
  padding:34px 36px;
  border-radius:22px;
  background:#ffffff;
  border:1px solid rgba(22,82,105,.09);
  box-shadow:0 22px 58px rgba(5,31,48,.08);
}

.mu-development-status{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:18px;
  color:#16849c;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.14em;
}

.mu-status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22c9a7;
  box-shadow:0 0 0 5px rgba(34,201,167,.10);
}

.mu-development-v2 h3{
  margin:0;
  color:#153b4e;
  font-size:clamp(1.8rem,2.5vw,2.45rem);
  line-height:1.06;
  letter-spacing:-.04em;
}

.mu-development-v2 > p{
  margin:18px 0 0;
  color:#6c838f;
  line-height:1.7;
}

.mu-development-lines{
  margin-top:28px;
  border-top:1px solid rgba(22,82,105,.10);
}

.mu-development-lines > div{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid rgba(22,82,105,.10);
}

.mu-development-lines > div > span{
  color:#1690a7;
  font-size:.72rem;
  font-weight:800;
}

.mu-development-lines p{
  margin:0;
}

.mu-development-lines b{
  display:block;
  margin-bottom:4px;
  color:#173c4f;
  font-size:.95rem;
}

.mu-development-lines small{
  display:block;
  color:#78909b;
  font-size:.82rem;
  line-height:1.5;
}

.mu-development-note{
  margin-top:22px !important;
  padding-top:18px;
  border-top:1px solid rgba(22,82,105,.10);
  color:#456777 !important;
  font-size:.82rem;
}

@media (max-width:900px){
  .mu-closing-v2-inner{
    grid-template-columns:1fr;
    gap:32px;
  }
}


/* 20A.06A — FOOTER PREMIUM DARK FINAL */
.site-footer{
  margin-top:0 !important;
  border-top:1px solid rgba(117,225,239,.08) !important;
  background:
    radial-gradient(circle at 18% 0%,rgba(18,196,220,.08),transparent 30%),
    linear-gradient(145deg,#041b2e 0%,#072b43 58%,#0a3c50 100%) !important;
}

.site-footer-inner{
  padding-top:56px !important;
  padding-bottom:34px !important;
}

.site-footer-brand-link{
  color:#ffffff !important;
}

.site-footer-brand-link:hover{
  color:#ffffff !important;
}

.site-footer-brand-link strong{
  color:#ffffff !important;
}

.site-footer-tagline{
  color:#80cbd8 !important;
}

.site-footer-brand p{
  color:rgba(214,234,240,.62) !important;
}

.footer-nav a,
.footer-legal a{
  color:rgba(218,236,242,.72) !important;
}

.footer-nav a:hover,
.footer-nav a:focus-visible,
.footer-legal a:hover,
.footer-legal a:focus-visible{
  color:#ffffff !important;
  background:rgba(255,255,255,.06) !important;
}

.site-footer-bottom{
  border-top:1px solid rgba(187,229,238,.10) !important;
}

.site-footer-status,
.site-footer-copy{
  color:rgba(198,223,231,.48) !important;
}

.site-footer-status{
  color:#72dce9 !important;
}


/* 20A.06A — FOOTER REAL MU LOGO */
.site-footer-logo-img{
  display:block;
  width:46px;
  height:46px;
  flex:0 0 46px;
  object-fit:contain;
}


/* 20A.06A — TRADE CONTEXT SECTION INTRO */
.mu-trade-context-intro{
  max-width:1320px;
  margin:0 auto 34px;
}

.mu-trade-context-eyebrow{
  margin-bottom:14px;
  color:#1188a0;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.17em;
}

.mu-trade-context-intro h2{
  max-width:760px;
  margin:0;
  color:#153b4e;
  font-size:clamp(2.25rem,3.6vw,3.5rem);
  line-height:1.05;
  letter-spacing:-.045em;
}

.mu-trade-context-intro p{
  max-width:760px;
  margin:16px 0 0;
  color:#687f8b;
  font-size:1rem;
  line-height:1.75;
}


/* 20A.06A — MOBILE HEADER V1 */
@media (max-width:900px){

  .site-header .site-header-inner{
    padding:14px 16px 12px !important;
  }

  .site-header-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  .site-brand{
    margin:0;
    min-width:0;
  }

  .site-brand > a{
    display:flex;
    align-items:center;
    gap:9px;
    text-decoration:none;
  }

  .site-brand-logo-img{
    width:54px !important;
    height:42px !important;
    max-height:none !important;
    flex:0 0 54px;
  }

  .site-brand-copy{
    display:flex;
    flex-direction:column;
    min-width:0;
  }

  .site-brand-name{
    font-size:1rem;
    line-height:1.05;
    white-space:nowrap;
  }

  .site-brand-subtitle{
    margin-top:3px;
    font-size:.52rem;
    letter-spacing:.06em;
    white-space:nowrap;
  }

  .language-nav{
    flex:0 0 auto;
    margin:0;
  }

  .site-nav{
    display:flex;
    flex-wrap:nowrap !important;
    gap:8px !important;
    margin:12px -16px 0 !important;
    padding:0 16px 4px !important;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    border:0 !important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .site-nav::-webkit-scrollbar{
    display:none;
  }

  .site-nav a{
    flex:0 0 auto;
    width:auto !important;
    min-height:38px;
    display:flex;
    align-items:center;
    padding:0 12px !important;
    border-radius:9px;
    font-size:.82rem;
    white-space:nowrap;
  }

}

@media (max-width:390px){
  .site-brand-name{
    font-size:.9rem;
  }

  .site-brand-subtitle{
    display:none;
  }

  .site-brand-logo-img{
    width:46px !important;
    height:38px !important;
    flex-basis:46px;
  }
}

/* 20A.06A — MOBILE HEADER V1 */
@media (max-width:900px){

  .site-header .site-header-inner{
    padding:14px 16px 12px !important;
  }

  .site-header-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  .site-brand{
    margin:0;
    min-width:0;
  }

  .site-brand > a{
    display:flex;
    align-items:center;
    gap:9px;
    text-decoration:none;
  }

  .site-brand-logo-img{
    width:54px !important;
    height:42px !important;
    max-height:none !important;
    flex:0 0 54px;
  }

  .site-brand-copy{
    display:flex;
    flex-direction:column;
    min-width:0;
  }

  .site-brand-name{
    font-size:1rem;
    line-height:1.05;
    white-space:nowrap;
  }

  .site-brand-subtitle{
    margin-top:3px;
    font-size:.52rem;
    letter-spacing:.06em;
    white-space:nowrap;
  }

  .language-nav{
    flex:0 0 auto;
    margin:0;
  }

  .site-nav{
    display:flex;
    flex-wrap:nowrap !important;
    gap:8px !important;
    margin:12px -16px 0 !important;
    padding:0 16px 4px !important;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    border:0 !important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .site-nav::-webkit-scrollbar{
    display:none;
  }

  .site-nav a{
    flex:0 0 auto;
    width:auto !important;
    min-height:38px;
    display:flex;
    align-items:center;
    padding:0 12px !important;
    border-radius:9px;
    font-size:.82rem;
    white-space:nowrap;
  }

}

@media (max-width:390px){
  .site-brand-name{
    font-size:.9rem;
  }

  .site-brand-subtitle{
    display:none;
  }

  .site-brand-logo-img{
    width:46px !important;
    height:38px !important;
    flex-basis:46px;
  }
}

/* 20A.06A — ACCESSIBLE SKIP LINK */
.skip-link{
  position:fixed;
  top:10px;
  left:10px;
  z-index:9999;
  padding:10px 14px;
  border-radius:8px;
  background:#ffffff;
  color:#06314f;
  font-weight:700;
  text-decoration:none;
  transform:translateY(-200%);
  transition:transform .15s ease;
}

.skip-link:focus,
.skip-link:focus-visible{
  transform:translateY(0);
}


/* 20A.06A — SKIP LINK MOBILE/TOUCH FIX */
.skip-link:not(:focus):not(:focus-visible){
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
  transform:none !important;
}

.skip-link:focus,
.skip-link:focus-visible{
  position:fixed !important;
  top:10px;
  left:10px;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:10px 14px !important;
  overflow:visible !important;
  clip:auto !important;
  white-space:normal !important;
  transform:none !important;
}

/* 20A.06A — MOBILE HERO PROOF STACK */
@media (max-width:560px){

  .mu-hero-proof{
    grid-template-columns:1fr !important;
    padding:8px 14px !important;
  }

  .mu-hero-proof > div{
    padding:14px 8px !important;
    gap:14px !important;
    align-items:center !important;
  }

  .mu-hero-proof > div:not(:last-child)::after{
    top:auto !important;
    right:8px !important;
    bottom:0 !important;
    left:8px !important;
    width:auto !important;
    height:1px !important;
  }

  .mu-proof-icon{
    flex:0 0 38px !important;
    width:38px !important;
    height:38px !important;
  }

  .mu-hero-proof b{
    font-size:.88rem !important;
  }

  .mu-hero-proof small{
    font-size:.72rem !important;
  }
}

/* 20A.06A — MOBILE HERO GLOW OVERFLOW FIX */
@media (max-width:900px){
  .mu-hero-visual{
    overflow:hidden;
  }

  .mu-hero-glow{
    width:88%;
    transform:none;
  }
}

/* 20A.06A — MOBILE HERO WIDTH FIX */
@media (max-width:900px){
  .mu-hero-v2{
    grid-template-columns:minmax(0,1fr) !important;
    padding:44px 24px 28px !important;
    width:100% !important;
    max-width:100% !important;
  }

  .mu-hero-copy,
  .mu-hero-visual,
  .mu-hero-proof{
    min-width:0;
    max-width:100%;
  }
}

/* 20A.06A — MOBILE PAGE HORIZONTAL LOCK */
@media (max-width:900px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
  }

  main.container{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }
}

/* 20A.06A — MOBILE CONTEXT CARDS FIX */
@media (max-width:900px){
  .mu-context-cards{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .mu-context-cards article{
    width:100%;
    min-width:0;
  }
}

@media (max-width:560px){
  .mu-context-section.mu-context-v2{
    padding:56px 24px 64px !important;
  }

  .mu-context-cards article{
    min-height:0;
    padding:22px 20px;
  }
}

/* 20A.06A — MOBILE EDITORIAL PANELS WIDTH FIX */
@media (max-width:560px){

  .mu-context-editorial,
  .mu-development-v2{
    width:100% !important;
    min-width:0 !important;
    padding:26px 22px !important;
    border-radius:18px;
  }

  .mu-context-editorial h2,
  .mu-context-editorial > p,
  .mu-development-v2 h3,
  .mu-development-v2 > p{
    max-width:none !important;
  }

  .mu-context-lines > div,
  .mu-development-lines > div{
    grid-template-columns:34px minmax(0,1fr) !important;
    gap:12px !important;
  }
}

/* 20A.06A — SKIP LINK FINAL */
.skip-link:not(:focus){
  position:fixed !important;
  top:0 !important;
  left:-10000px !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  clip:auto !important;
  white-space:nowrap !important;
  transform:none !important;
}

.skip-link:focus{
  position:fixed !important;
  top:10px !important;
  left:10px !important;
  z-index:9999 !important;
  width:auto !important;
  height:auto !important;
  padding:10px 14px !important;
  margin:0 !important;
  overflow:visible !important;
  white-space:normal !important;
  transform:none !important;
}


/* =========================================================
   Wat is MU? — 20A.06A pages
   Scoped: homepage remains untouched
   ========================================================= */

.page-what-is-mu .mu-info-page {
  display: grid;
  gap: clamp(28px, 4vw, 54px);
  padding-top: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(48px, 7vw, 84px);
}


/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.page-what-is-mu .mu-about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
  padding: clamp(34px, 5vw, 64px);
  color: #ffffff;
  background:
    radial-gradient(circle at 82% 18%, rgba(48, 171, 255, .18), transparent 34%),
    linear-gradient(135deg, #071829 0%, #0b243d 54%, #0c3152 100%);
  border: 1px solid rgba(106, 190, 255, .19);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.page-what-is-mu .mu-about-hero-copy {
  max-width: 680px;
}

.page-what-is-mu .mu-about-hero .mu-eyebrow {
  color: #72c7ff;
}

.page-what-is-mu .mu-about-hero h1 {
  margin: 0 0 var(--space-5);
  max-width: 720px;
  color: #ffffff;
  font-size: clamp(2.25rem, 5vw, 4.2rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.page-what-is-mu .mu-about-lead {
  max-width: 650px;
  margin-bottom: var(--space-4);
  color: #e6f4ff;
  font-size: clamp(1.08rem, 1.6vw, 1.32rem);
  line-height: 1.55;
}

.page-what-is-mu .mu-about-hero-copy > p:not(.mu-eyebrow):not(.mu-about-lead) {
  max-width: 630px;
  color: #b9cee0;
}

.page-what-is-mu .mu-about-hero .mu-button {
  margin-top: var(--space-4);
}


/* Hero visual */

.page-what-is-mu .mu-about-hero-visual {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.page-what-is-mu .mu-flow-card {
  min-width: 0;
  min-height: 176px;
  padding: 24px 18px;
  background: rgba(255, 255, 255, .075);
  border: 1px solid rgba(126, 202, 255, .24);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(7px);
}

.page-what-is-mu .mu-flow-number {
  display: block;
  margin-bottom: 30px;
  color: #63c3ff;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .10em;
}

.page-what-is-mu .mu-flow-card strong {
  display: block;
  margin-bottom: 7px;
  color: #ffffff;
  font-size: 1.04rem;
}

.page-what-is-mu .mu-flow-card small {
  display: block;
  color: #a9c2d6;
  line-height: 1.45;
}

.page-what-is-mu .mu-flow-arrow {
  color: #65c7ff;
  font-size: 1.35rem;
  font-weight: 800;
}


/* ---------------------------------------------------------
   Generic page section hierarchy
   --------------------------------------------------------- */

.page-what-is-mu .mu-section,
.page-what-is-mu .mu-about-activity,
.page-what-is-mu .mu-about-dark {
  margin: 0;
}

.page-what-is-mu .mu-section {
  padding: clamp(30px, 4vw, 48px);
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--mu-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.page-what-is-mu .mu-section-header {
  max-width: 790px;
  margin-bottom: clamp(24px, 3vw, 36px);
}

.page-what-is-mu .mu-section-header h2 {
  margin: 0 0 var(--space-4);
  color: #102c47;
  font-size: clamp(1.75rem, 3vw, 2.55rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.page-what-is-mu .mu-section-header > p:last-child {
  color: var(--mu-muted);
  font-size: 1.04rem;
  line-height: 1.7;
}


/* ---------------------------------------------------------
   Problem cards
   --------------------------------------------------------- */

.page-what-is-mu .mu-about-card-grid {
  margin-top: var(--space-5);
}

.page-what-is-mu .mu-about-card-grid .mu-card {
  min-height: 190px;
}

.page-what-is-mu .mu-about-card-grid h3 {
  margin-bottom: var(--space-3);
  color: #17334f;
  font-size: 1.13rem;
}

.page-what-is-mu .mu-about-card-grid p {
  color: var(--mu-muted);
  line-height: 1.65;
}

.page-what-is-mu .mu-about-solution {
  margin-top: var(--space-6);
  border-radius: var(--radius-lg);
  line-height: 1.65;
}


/* ---------------------------------------------------------
   Dark process block
   --------------------------------------------------------- */

.page-what-is-mu .mu-about-dark {
  padding: clamp(34px, 5vw, 58px);
  color: #ffffff;
  background:
    radial-gradient(circle at 15% 0%, rgba(37, 151, 236, .18), transparent 28%),
    linear-gradient(145deg, #081a2b, #0b2844 58%, #092238);
  border: 1px solid rgba(93, 178, 237, .18);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.page-what-is-mu .mu-about-dark .mu-eyebrow {
  color: #72c7ff;
}

.page-what-is-mu .mu-about-dark .mu-section-header h2 {
  color: #ffffff;
}

.page-what-is-mu .mu-about-dark .mu-section-header > p:last-child {
  color: #b5cbdd;
}

.page-what-is-mu .mu-process-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.page-what-is-mu .mu-process-step {
  position: relative;
  min-width: 0;
  min-height: 156px;
  padding: 20px 16px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(126, 202, 255, .18);
  border-radius: 14px;
}

.page-what-is-mu .mu-process-step span {
  display: block;
  margin-bottom: 30px;
  color: #59bdff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
}

.page-what-is-mu .mu-process-step strong {
  display: block;
  margin-bottom: 7px;
  color: #ffffff;
  font-size: .94rem;
  line-height: 1.3;
}

.page-what-is-mu .mu-process-step small {
  display: block;
  color: #9fb8cb;
  line-height: 1.4;
}


/* ---------------------------------------------------------
   Exchange cards
   --------------------------------------------------------- */

.page-what-is-mu .mu-exchange-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.page-what-is-mu .mu-exchange-card {
  position: relative;
  padding: clamp(25px, 3vw, 34px);
  background:
    linear-gradient(145deg, #ffffff 0%, #f5faff 100%);
  border: 1px solid #cee2f2;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.page-what-is-mu .mu-exchange-tag {
  display: inline-flex;
  margin-bottom: var(--space-4);
  padding: 5px 10px;
  color: #075f9d;
  background: #e8f6ff;
  border: 1px solid #b7daf2;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.page-what-is-mu .mu-exchange-card h3 {
  margin: 0 0 var(--space-3);
  color: #12304c;
  font-size: 1.28rem;
}

.page-what-is-mu .mu-exchange-card p {
  color: var(--mu-muted);
  line-height: 1.65;
}

.page-what-is-mu .mu-exchange-card a {
  display: inline-flex;
  margin-top: var(--space-3);
  color: var(--mu-blue-dark);
  font-weight: 800;
  text-decoration: none;
}

.page-what-is-mu .mu-exchange-card a:hover {
  text-decoration: underline;
}


/* ---------------------------------------------------------
   Market Activity block
   --------------------------------------------------------- */

.page-what-is-mu .mu-about-activity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(34px, 5vw, 58px);
  color: #ffffff;
  background:
    radial-gradient(circle at 85% 20%, rgba(26, 169, 255, .18), transparent 30%),
    linear-gradient(140deg, #081928, #0a2944);
  border: 1px solid rgba(104, 190, 247, .18);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.page-what-is-mu .mu-about-activity .mu-eyebrow {
  color: #70c8ff;
}

.page-what-is-mu .mu-about-activity h2 {
  margin: 0 0 var(--space-4);
  color: #ffffff;
  font-size: clamp(1.75rem, 3vw, 2.55rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.page-what-is-mu .mu-about-activity-copy > p:not(.mu-eyebrow) {
  max-width: 670px;
  color: #b9cede;
  line-height: 1.7;
}

.page-what-is-mu .mu-about-activity .mu-button-secondary {
  margin-top: var(--space-3);
  color: #0c2942;
}


/* signal visual */

.page-what-is-mu .mu-signal-visual {
  padding: clamp(22px, 3vw, 30px);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(121, 203, 255, .22);
  border-radius: 18px;
  backdrop-filter: blur(7px);
}

.page-what-is-mu .mu-signal-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.page-what-is-mu .mu-signal-row > span {
  color: #d8ebf8;
  font-size: .88rem;
  font-weight: 700;
}

.page-what-is-mu .mu-signal-bar {
  height: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, .10);
  border-radius: 999px;
}

.page-what-is-mu .mu-signal-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #178cff, #54cef1);
  border-radius: inherit;
}

.page-what-is-mu .mu-activity-result {
  margin-top: 26px;
  padding: 18px;
  background: rgba(6, 18, 30, .46);
  border: 1px solid rgba(116, 199, 255, .18);
  border-radius: 13px;
}

.page-what-is-mu .mu-activity-result small,
.page-what-is-mu .mu-activity-result strong,
.page-what-is-mu .mu-activity-result span {
  display: block;
}

.page-what-is-mu .mu-activity-result small {
  margin-bottom: 8px;
  color: #65c5ff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .09em;
}

.page-what-is-mu .mu-activity-result strong {
  margin-bottom: 5px;
  color: #ffffff;
  font-size: 1.12rem;
}

.page-what-is-mu .mu-activity-result span {
  color: #9fb9cd;
  font-size: .88rem;
  line-height: 1.5;
}


/* ---------------------------------------------------------
   MU boundaries
   --------------------------------------------------------- */

.page-what-is-mu .mu-boundary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.page-what-is-mu .mu-boundary-card {
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-lg);
}

.page-what-is-mu .mu-boundary-positive {
  background: #f4fbf8;
  border: 1px solid #cce8dc;
}

.page-what-is-mu .mu-boundary-negative {
  background: #fff8f7;
  border: 1px solid #efd8d3;
}

.page-what-is-mu .mu-boundary-card h3 {
  margin: 0 0 var(--space-4);
  color: #15314b;
}

.page-what-is-mu .mu-boundary-card ul {
  margin: 0;
  padding-left: 1.2rem;
}

.page-what-is-mu .mu-boundary-card li {
  margin: 10px 0;
  color: #52697e;
  line-height: 1.55;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1050px) {
  .page-what-is-mu .mu-about-hero,
  .page-what-is-mu .mu-about-activity {
    grid-template-columns: 1fr;
  }

  .page-what-is-mu .mu-about-hero-visual {
    max-width: 760px;
  }

  .page-what-is-mu .mu-process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .page-what-is-mu .mu-info-page {
    gap: 22px;
    padding-top: 18px;
    padding-bottom: 42px;
  }

  .page-what-is-mu .mu-about-hero,
  .page-what-is-mu .mu-about-dark,
  .page-what-is-mu .mu-about-activity,
  .page-what-is-mu .mu-section {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .page-what-is-mu .mu-about-hero h1 {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .page-what-is-mu .mu-about-hero-visual {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .page-what-is-mu .mu-flow-card {
    min-height: 0;
  }

  .page-what-is-mu .mu-flow-number {
    margin-bottom: 16px;
  }

  .page-what-is-mu .mu-flow-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }

  .page-what-is-mu .mu-about-card-grid,
  .page-what-is-mu .mu-process-grid,
  .page-what-is-mu .mu-exchange-grid,
  .page-what-is-mu .mu-boundary-grid {
    grid-template-columns: 1fr;
  }

  .page-what-is-mu .mu-about-card-grid .mu-card {
    grid-column: 1;
    min-height: 0;
  }

  .page-what-is-mu .mu-process-step {
    min-height: 0;
  }

  .page-what-is-mu .mu-process-step span {
    margin-bottom: 15px;
  }

  .page-what-is-mu .mu-signal-row {
    grid-template-columns: 76px 1fr;
  }
}

@media (max-width: 390px) {
  .page-what-is-mu .mu-about-hero,
  .page-what-is-mu .mu-about-dark,
  .page-what-is-mu .mu-about-activity,
  .page-what-is-mu .mu-section {
    padding: 21px 16px;
  }

  .page-what-is-mu .mu-signal-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }
}



/* =========================================================
   Wat is MU? — color refinement
   Scoped to page-what-is-mu only
   ========================================================= */

/* Problem cards: meer onderscheid */
.page-what-is-mu .mu-about-card-grid .mu-card:nth-child(1) {
  background:
    linear-gradient(145deg, #f4fbff 0%, #e8f6ff 100%);
  border-color: #b9def5;
}

.page-what-is-mu .mu-about-card-grid .mu-card:nth-child(2) {
  background:
    linear-gradient(145deg, #f7f5ff 0%, #eeebff 100%);
  border-color: #d4cdfc;
}

.page-what-is-mu .mu-about-card-grid .mu-card:nth-child(3) {
  background:
    linear-gradient(145deg, #f2fcfb 0%, #e5f8f5 100%);
  border-color: #bfe8df;
}

.page-what-is-mu .mu-about-card-grid .mu-card:nth-child(1)::before {
  background: linear-gradient(180deg, #198cff, #58c8ff);
}

.page-what-is-mu .mu-about-card-grid .mu-card:nth-child(2)::before {
  background: linear-gradient(180deg, #655cff, #9b7cff);
}

.page-what-is-mu .mu-about-card-grid .mu-card:nth-child(3)::before {
  background: linear-gradient(180deg, #00a892, #58d7c4);
}


/* Solution callout iets rijker */
.page-what-is-mu .mu-about-solution {
  background:
    linear-gradient(90deg, #e7f7ff 0%, #edf5ff 48%, #eefaf7 100%);
  border-color: #b9def1;
  border-left-color: #178df0;
}


/* Process flow: subtiele kleurvariatie */
.page-what-is-mu .mu-process-step:nth-child(1) {
  background: linear-gradient(145deg, rgba(20,141,255,.16), rgba(255,255,255,.045));
  border-color: rgba(67,165,255,.32);
}

.page-what-is-mu .mu-process-step:nth-child(2) {
  background: linear-gradient(145deg, rgba(29,188,225,.14), rgba(255,255,255,.045));
  border-color: rgba(79,203,230,.30);
}

.page-what-is-mu .mu-process-step:nth-child(3) {
  background: linear-gradient(145deg, rgba(91,91,255,.15), rgba(255,255,255,.045));
  border-color: rgba(123,119,255,.30);
}

.page-what-is-mu .mu-process-step:nth-child(4) {
  background: linear-gradient(145deg, rgba(0,177,152,.14), rgba(255,255,255,.045));
  border-color: rgba(63,211,187,.28);
}

.page-what-is-mu .mu-process-step:nth-child(5) {
  background: linear-gradient(145deg, rgba(127,84,255,.14), rgba(255,255,255,.045));
  border-color: rgba(151,119,255,.29);
}

.page-what-is-mu .mu-process-step:nth-child(6) {
  background: linear-gradient(145deg, rgba(26,142,255,.14), rgba(255,255,255,.045));
  border-color: rgba(80,174,255,.28);
}


/* Exchange cards: eigen accent */
.page-what-is-mu .mu-exchange-card:nth-child(1) {
  background:
    radial-gradient(circle at 92% 12%, rgba(37,160,255,.12), transparent 28%),
    linear-gradient(145deg, #ffffff 0%, #eef8ff 100%);
  border-color: #b9dff7;
}

.page-what-is-mu .mu-exchange-card:nth-child(2) {
  background:
    radial-gradient(circle at 92% 12%, rgba(110,88,255,.11), transparent 28%),
    linear-gradient(145deg, #ffffff 0%, #f3f0ff 100%);
  border-color: #d4cdf8;
}

.page-what-is-mu .mu-exchange-card:nth-child(1) .mu-exchange-tag {
  color: #075f9d;
  background: #e5f6ff;
  border-color: #b4dcf4;
}

.page-what-is-mu .mu-exchange-card:nth-child(2) .mu-exchange-tag {
  color: #5745b2;
  background: #f0edff;
  border-color: #d3cbfa;
}


/* Market Activity visual rijker */
.page-what-is-mu .mu-signal-row:nth-child(1) .mu-signal-bar i {
  background: linear-gradient(90deg, #168cff, #49c7ff);
}

.page-what-is-mu .mu-signal-row:nth-child(2) .mu-signal-bar i {
  background: linear-gradient(90deg, #00a990, #54d8c2);
}

.page-what-is-mu .mu-signal-row:nth-child(3) .mu-signal-bar i {
  background: linear-gradient(90deg, #675cff, #a47cff);
}

.page-what-is-mu .mu-activity-result {
  background:
    linear-gradient(145deg, rgba(12,37,59,.78), rgba(32,31,78,.62));
  border-color: rgba(125,147,255,.26);
}


/* MU wel / niet sterker onderscheid */
.page-what-is-mu .mu-boundary-positive {
  background:
    linear-gradient(145deg, #f2fbf8 0%, #e3f7f1 100%);
  border-color: #b9e4d8;
}

.page-what-is-mu .mu-boundary-negative {
  background:
    linear-gradient(145deg, #fff7f8 0%, #f9ebf1 100%);
  border-color: #ebcbd7;
}

.page-what-is-mu .mu-boundary-positive h3 {
  color: #0c6b5b;
}

.page-what-is-mu .mu-boundary-negative h3 {
  color: #9b415d;
}


/* =========================================================
   20A.06A — Wat is MU? — COLOR PASS
   PAGE SCOPED — HOMEPAGE UNTOUCHED
   ========================================================= */

/* Waarom MU — drie verschillende zachte accenten */
.page-what-is-mu .mu-about-card-grid .mu-card:nth-child(1){
  background:
    linear-gradient(145deg, rgba(25,145,255,.12), rgba(255,255,255,.96));
  border-color: rgba(25,145,255,.28);
}

.page-what-is-mu .mu-about-card-grid .mu-card:nth-child(2){
  background:
    linear-gradient(145deg, rgba(25,210,210,.12), rgba(255,255,255,.96));
  border-color: rgba(25,190,195,.28);
}

.page-what-is-mu .mu-about-card-grid .mu-card:nth-child(3){
  background:
    linear-gradient(145deg, rgba(118,105,255,.11), rgba(255,255,255,.96));
  border-color: rgba(118,105,255,.25);
}

/* Oplossingsbalk iets duidelijker */
.page-what-is-mu .mu-about-solution{
  background:
    linear-gradient(90deg,
      rgba(27,151,255,.14),
      rgba(26,211,204,.15),
      rgba(118,105,255,.10));
  border-color: rgba(31,166,220,.25);
  border-left-color: #159de0;
}

/* EUR-kaarten meer eigen identiteit */
.page-what-is-mu .mu-exchange-card:nth-child(1){
  background:
    radial-gradient(circle at 90% 10%, rgba(30,197,205,.14), transparent 35%),
    linear-gradient(145deg, #f8fdff, #eefbfc);
  border-color: rgba(20,174,185,.27);
}

.page-what-is-mu .mu-exchange-card:nth-child(2){
  background:
    radial-gradient(circle at 90% 10%, rgba(102,112,255,.13), transparent 35%),
    linear-gradient(145deg, #fafaff, #f2f3ff);
  border-color: rgba(93,103,225,.24);
}

.page-what-is-mu .mu-exchange-card:nth-child(1) .mu-exchange-tag{
  background: rgba(26,199,198,.13);
  color: #087b82;
}

.page-what-is-mu .mu-exchange-card:nth-child(2) .mu-exchange-tag{
  background: rgba(105,104,235,.12);
  color: #4547a8;
}

/* Wel / niet — duidelijker maar professioneel */
.page-what-is-mu .mu-boundary-positive{
  background:
    linear-gradient(145deg, rgba(31,194,183,.14), rgba(241,253,251,.92));
  border-color: rgba(23,173,161,.24);
}

.page-what-is-mu .mu-boundary-negative{
  background:
    linear-gradient(145deg, rgba(229,93,124,.11), rgba(255,247,249,.94));
  border-color: rgba(213,91,120,.21);
}

.page-what-is-mu .mu-boundary-positive h3{
  color: #087f79;
}

.page-what-is-mu .mu-boundary-negative h3{
  color: #a4435a;
}

/* subtiele kleurverdeling in de 6 proceskaarten */
.page-what-is-mu .mu-process-step:nth-child(1),
.page-what-is-mu .mu-process-step:nth-child(4){
  border-color: rgba(50,181,255,.30);
}

.page-what-is-mu .mu-process-step:nth-child(2),
.page-what-is-mu .mu-process-step:nth-child(5){
  border-color: rgba(40,211,202,.28);
}

.page-what-is-mu .mu-process-step:nth-child(3),
.page-what-is-mu .mu-process-step:nth-child(6){
  border-color: rgba(125,112,255,.28);
}


/* =========================================================
   20A.06A — Wat is MU? — Market Intelligence hero visual
   ========================================================= */

.page-what-is-mu .mu-intelligence-visual {
  position: relative;
  display: grid;
  grid-template-columns: minmax(125px, .9fr) 42px minmax(125px, .82fr) 42px minmax(165px, 1.12fr);
  align-items: center;
  gap: 10px;
  min-height: 360px;
  padding: 26px;
  border: 1px solid rgba(65, 183, 255, .24);
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 190, 255, .16), transparent 34%),
    linear-gradient(145deg, #071d38 0%, #07172c 55%, #051428 100%);
  box-shadow: 0 25px 60px rgba(5, 25, 55, .18);
}

.page-what-is-mu .mu-intelligence-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background-image:
    linear-gradient(rgba(90, 190, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 190, 255, .045) 1px, transparent 1px);
  background-size: 28px 28px;
}

.page-what-is-mu .mu-intelligence-sources,
.page-what-is-mu .mu-intelligence-results,
.page-what-is-mu .mu-intelligence-core {
  position: relative;
  z-index: 2;
}

.page-what-is-mu .mu-intelligence-sources,
.page-what-is-mu .mu-intelligence-results {
  display: grid;
  gap: 12px;
}

.page-what-is-mu .mu-source-card {
  position: relative;
  min-height: 112px;
  padding: 16px;
  border: 1px solid rgba(60, 190, 255, .3);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(16, 54, 92, .94), rgba(9, 32, 62, .94));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

.page-what-is-mu .mu-source-label {
  display: block;
  margin-bottom: 6px;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .18em;
  color: #66d8ff;
}

.page-what-is-mu .mu-source-card strong {
  display: block;
  color: #fff;
  font-size: 15px;
}

.page-what-is-mu .mu-mini-chart {
  height: 38px;
  margin-top: 14px;
  display: flex;
  align-items: end;
  gap: 5px;
}

.page-what-is-mu .mu-mini-chart i {
  display: block;
  width: 5px;
  border-radius: 5px 5px 1px 1px;
  background: linear-gradient(180deg, #54e8ff, #1689ff);
  box-shadow: 0 0 10px rgba(42, 191, 255, .22);
}

.page-what-is-mu .mu-mini-chart i:nth-child(1) { height: 22%; }
.page-what-is-mu .mu-mini-chart i:nth-child(2) { height: 44%; }
.page-what-is-mu .mu-mini-chart i:nth-child(3) { height: 34%; }
.page-what-is-mu .mu-mini-chart i:nth-child(4) { height: 62%; }
.page-what-is-mu .mu-mini-chart i:nth-child(5) { height: 54%; }
.page-what-is-mu .mu-mini-chart i:nth-child(6) { height: 88%; }

.page-what-is-mu .mu-mini-chart-alt i {
  background: linear-gradient(180deg, #80e9ff, #7657ff);
}

.page-what-is-mu .mu-intelligence-core {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px;
  border: 1px solid rgba(64, 217, 255, .75);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 25%, rgba(53, 215, 255, .16), transparent 45%),
    linear-gradient(145deg, #10365e, #08213e);
  box-shadow:
    0 0 0 5px rgba(29, 169, 255, .045),
    0 0 32px rgba(35, 181, 255, .18);
}

.page-what-is-mu .mu-intelligence-core img {
  width: 74px;
  height: auto;
  margin-bottom: 10px;
}

.page-what-is-mu .mu-intelligence-core strong {
  color: #fff;
  font-size: 13px;
}

.page-what-is-mu .mu-intelligence-core span {
  margin-top: 4px;
  font-size: 10px;
  color: #86caed;
}

.page-what-is-mu .mu-intelligence-link {
  position: relative;
  z-index: 1;
  height: 2px;
  background: linear-gradient(90deg, rgba(56, 170, 255, .25), #4bdfff);
  box-shadow: 0 0 12px rgba(47, 202, 255, .48);
}

.page-what-is-mu .mu-intelligence-link::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #55e2ff;
  border-right: 2px solid #55e2ff;
  transform: translateY(-50%) rotate(45deg);
}

.page-what-is-mu .mu-result-card {
  min-height: 59px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid rgba(59, 181, 255, .25);
  border-radius: 13px;
  background: rgba(9, 38, 72, .88);
}

.page-what-is-mu .mu-result-icon {
  flex: 0 0 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #61e1ff;
  background: rgba(32, 161, 255, .12);
}

.page-what-is-mu .mu-result-card strong,
.page-what-is-mu .mu-result-card small {
  display: block;
}

.page-what-is-mu .mu-result-card strong {
  color: #fff;
  font-size: 12px;
}

.page-what-is-mu .mu-result-card small {
  margin-top: 2px;
  color: #91b9d5;
  font-size: 9px;
}

.page-what-is-mu .mu-intelligence-caption {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 2;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  margin: 0;
  font-size: 8px;
  letter-spacing: .2em;
  color: #55d5ff;
}

@media (max-width: 1050px) {
  .page-what-is-mu .mu-intelligence-visual {
    grid-template-columns: minmax(120px, 1fr) 26px minmax(110px, .8fr) 26px minmax(145px, 1.05fr);
    padding: 20px;
  }
}

@media (max-width: 760px) {
  .page-what-is-mu .mu-intelligence-visual {
    grid-template-columns: 1fr;
    gap: 15px;
    min-height: 0;
    padding: 22px 18px 42px;
  }

  .page-what-is-mu .mu-intelligence-sources {
    grid-template-columns: 1fr 1fr;
  }

  .page-what-is-mu .mu-intelligence-core {
    width: 145px;
    margin: 0 auto;
  }

  .page-what-is-mu .mu-intelligence-results {
    grid-template-columns: 1fr 1fr;
  }

  .page-what-is-mu .mu-intelligence-link {
    width: 2px;
    height: 24px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(56, 170, 255, .25), #4bdfff);
  }

  .page-what-is-mu .mu-intelligence-link::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -1px;
    transform: translateX(-50%) rotate(135deg);
  }
}

@media (max-width: 430px) {
  .page-what-is-mu .mu-intelligence-sources,
  .page-what-is-mu .mu-intelligence-results {
    grid-template-columns: 1fr;
  }

  .page-what-is-mu .mu-source-card {
    min-height: 96px;
  }
}

/* =========================================================
   20A.06A — Wat is MU? — Intelligence visual POLISH
   ========================================================= */

@media (min-width: 761px) {

  .page-what-is-mu .mu-intelligence-visual {
    grid-template-columns:
      minmax(145px, 1fr)
      54px
      minmax(145px, .88fr)
      62px
      minmax(185px, 1.18fr);
    min-height: 390px;
    gap: 8px;
    padding: 30px 28px 34px;
    background:
      radial-gradient(circle at 52% 48%, rgba(0, 213, 255, .23), transparent 28%),
      radial-gradient(circle at 18% 72%, rgba(0, 121, 255, .11), transparent 35%),
      radial-gradient(circle at 85% 18%, rgba(97, 75, 255, .10), transparent 34%),
      linear-gradient(145deg, #071d38 0%, #07162c 55%, #041326 100%);
  }

  .page-what-is-mu .mu-intelligence-visual::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -90px;
    top: -105px;
    border-radius: 50%;
    border: 1px solid rgba(68, 190, 255, .08);
    box-shadow:
      0 0 0 28px rgba(68, 190, 255, .025),
      0 0 0 62px rgba(68, 190, 255, .018);
    pointer-events: none;
  }

  .page-what-is-mu .mu-intelligence-sources {
    gap: 16px;
  }

  .page-what-is-mu .mu-source-card {
    min-height: 128px;
    padding: 18px 18px 16px;
    border-color: rgba(70, 202, 255, .42);
    background:
      radial-gradient(circle at 80% 85%, rgba(23, 171, 255, .17), transparent 42%),
      linear-gradient(145deg, rgba(17, 61, 105, .97), rgba(7, 29, 58, .97));
    box-shadow:
      0 15px 35px rgba(0, 0, 0, .21),
      inset 0 1px rgba(255,255,255,.025);
  }

  .page-what-is-mu .mu-source-card:first-child {
    transform: perspective(800px) rotateY(3deg) translateX(2px);
  }

  .page-what-is-mu .mu-source-card:last-child {
    transform: perspective(800px) rotateY(3deg) translateX(-3px);
  }

  .page-what-is-mu .mu-source-card strong {
    font-size: 16px;
    letter-spacing: -.015em;
  }

  .page-what-is-mu .mu-mini-chart {
    height: 46px;
    gap: 6px;
    position: relative;
  }

  .page-what-is-mu .mu-mini-chart::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 11px;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(88, 224, 255, .20),
      transparent
    );
  }

  .page-what-is-mu .mu-mini-chart i {
    width: 6px;
    box-shadow:
      0 0 7px rgba(42, 191, 255, .30),
      0 0 18px rgba(42, 191, 255, .10);
  }

  /* LEFT DATA FLOW — two feeds converging into MU */
  .page-what-is-mu .mu-intelligence-link {
    height: 150px;
    background:
      linear-gradient(90deg, #299eff, #54e6ff)
        left 23% / 72% 2px no-repeat,
      linear-gradient(90deg, #299eff, #54e6ff)
        left 77% / 72% 2px no-repeat,
      linear-gradient(#54e6ff, #54e6ff)
        72% center / 2px 55% no-repeat,
      linear-gradient(90deg, #54e6ff, #54e6ff)
        right center / 29% 2px no-repeat;
    filter: drop-shadow(0 0 5px rgba(62, 216, 255, .7));
    box-shadow: none;
  }

  .page-what-is-mu .mu-intelligence-link::after {
    right: 0;
  }

  /* RIGHT FLOW — MU branching towards output cards */
  .page-what-is-mu .mu-intelligence-link-right {
    height: 190px;
    background:
      linear-gradient(90deg, #54e6ff, #269dff)
        left 50% / 35% 2px no-repeat,
      linear-gradient(#54e6ff, #54e6ff)
        35% center / 2px 74% no-repeat,
      linear-gradient(90deg, #54e6ff, #269dff)
        35% 13% / 65% 2px no-repeat,
      linear-gradient(90deg, #54e6ff, #269dff)
        35% 38% / 65% 2px no-repeat,
      linear-gradient(90deg, #54e6ff, #269dff)
        35% 63% / 65% 2px no-repeat,
      linear-gradient(90deg, #54e6ff, #269dff)
        35% 88% / 65% 2px no-repeat;
  }

  .page-what-is-mu .mu-intelligence-link-right::after {
    display: none;
  }

  .page-what-is-mu .mu-intelligence-core {
    transform: scale(1.06);
    border-color: rgba(80, 228, 255, .96);
    background:
      radial-gradient(circle at 50% 25%, rgba(67, 224, 255, .25), transparent 46%),
      linear-gradient(145deg, #12436f, #082342);
    box-shadow:
      0 0 0 6px rgba(25, 181, 255, .055),
      0 0 26px rgba(44, 211, 255, .32),
      0 0 70px rgba(27, 144, 255, .16);
  }

  .page-what-is-mu .mu-intelligence-core img {
    width: 86px;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 12px rgba(69, 218, 255, .23));
  }

  .page-what-is-mu .mu-intelligence-core strong {
    font-size: 14px;
  }

  .page-what-is-mu .mu-intelligence-results {
    gap: 10px;
  }

  .page-what-is-mu .mu-result-card {
    min-height: 65px;
    padding: 11px 13px;
    border-color: rgba(62, 191, 255, .34);
    background:
      linear-gradient(
        100deg,
        rgba(8, 38, 72, .96),
        rgba(11, 49, 87, .88)
      );
    box-shadow:
      0 10px 24px rgba(0,0,0,.14),
      inset 0 1px rgba(255,255,255,.025);
  }

  .page-what-is-mu .mu-result-card:nth-child(2) {
    transform: translateX(5px);
  }

  .page-what-is-mu .mu-result-card:nth-child(3) {
    transform: translateX(5px);
  }

  .page-what-is-mu .mu-result-icon {
    flex-basis: 34px;
    height: 34px;
    font-size: 17px;
    box-shadow: 0 0 18px rgba(47, 196, 255, .09);
  }

  .page-what-is-mu .mu-result-card strong {
    font-size: 13px;
  }

  .page-what-is-mu .mu-result-card small {
    font-size: 9.5px;
  }

  .page-what-is-mu .mu-intelligence-caption {
    bottom: 12px;
    font-size: 8.5px;
    letter-spacing: .23em;
    text-shadow: 0 0 12px rgba(66, 213, 255, .35);
  }
}


/* 20A.06A — Wat is MU — data-to-insight visual sizing */
.page-what-is-mu .mu-data-insight-visual {
  width: min(100%, 1080px);
  margin: 42px auto;
}

.page-what-is-mu .mu-data-insight-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

@media (max-width: 760px) {
  .page-what-is-mu .mu-data-insight-visual {
    width: 100%;
    margin: 26px auto;
  }

  .page-what-is-mu .mu-data-insight-visual img {
    border-radius: 12px;
  }
}

/* =========================================================
   20A.06A — Wat is MU — desktop rhythm/contrast polish
   ========================================================= */

/* 1. Van data naar inzicht compacter */
.page-what-is-mu .mu-data-insight-visual {
  width: min(92%, 940px);
  margin: 34px auto 38px;
}

.page-what-is-mu .mu-data-insight-visual img {
  width: 100%;
  height: auto;
  border-radius: 16px;
}


/* 2. Hoe MU informatie opbouwt compacter */
.page-what-is-mu .mu-about-dark {
  padding-top: 42px;
  padding-bottom: 42px;
}

.page-what-is-mu .mu-about-dark .mu-section-header {
  margin-bottom: 26px;
}

.page-what-is-mu .mu-about-dark .mu-process-grid {
  gap: 12px;
}

.page-what-is-mu .mu-about-dark .mu-process-card {
  min-height: 118px;
  padding: 18px 16px;
}


/* 3. EUR cards steviger */
.page-what-is-mu .mu-exchange-card {
  border: 2px solid rgba(8, 45, 78, .32);
  box-shadow:
    0 12px 26px rgba(7, 28, 52, .10),
    inset 0 0 0 1px rgba(255,255,255,.35);
}

.page-what-is-mu .mu-exchange-card:first-child {
  background: linear-gradient(145deg, #dff8fb, #eefcfd);
  border-color: rgba(0, 126, 156, .38);
}

.page-what-is-mu .mu-exchange-card:last-child {
  background: linear-gradient(145deg, #eef2ff, #f7f5ff);
  border-color: rgba(74, 79, 170, .34);
}

.page-what-is-mu .mu-exchange-card h3 {
  font-weight: 800;
  color: #081b31;
}


/* 4. MU wel / niet steviger */
.page-what-is-mu .mu-boundary-card {
  border-width: 2px;
  box-shadow:
    0 12px 26px rgba(8, 27, 48, .08),
    inset 0 0 0 1px rgba(255,255,255,.30);
}

.page-what-is-mu .mu-boundary-card:first-child {
  background: linear-gradient(145deg, #d7f7f3, #eefcf9);
  border-color: rgba(0, 132, 112, .34);
}

.page-what-is-mu .mu-boundary-card:last-child {
  background: linear-gradient(145deg, #f8e4ec, #fff2f5);
  border-color: rgba(171, 58, 91, .30);
}

.page-what-is-mu .mu-boundary-card h3 {
  font-weight: 800;
  color: #081b31;
}

.page-what-is-mu .mu-boundary-card li {
  color: #24384d;
}


/* Responsive: desktop polish niet forceren op mobiel */
@media (max-width: 760px) {
  .page-what-is-mu .mu-data-insight-visual {
    width: 100%;
    margin: 26px auto 30px;
  }

  .page-what-is-mu .mu-about-dark {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .page-what-is-mu .mu-about-dark .mu-process-card {
    min-height: 0;
  }
}

/* =========================================================
   20A.06A — Wat is MU — mobile header final
   Alleen deze pagina. Homepage blijft onaangeraakt.
   ========================================================= */

@media (max-width: 760px) {

  .page-what-is-mu .site-header {
    overflow: hidden;
  }

  .page-what-is-mu .site-header .site-header-inner {
    padding: 14px 14px 16px !important;
  }

  .page-what-is-mu .site-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .page-what-is-mu .site-brand > a {
    gap: 8px;
  }

  .page-what-is-mu .site-brand-logo-img {
    width: 48px !important;
    height: auto !important;
    flex: 0 0 48px !important;
  }

  .page-what-is-mu .site-brand-name {
    font-size: .92rem;
    white-space: nowrap;
  }

  .page-what-is-mu .site-brand-subtitle {
    font-size: .46rem;
    letter-spacing: .04em;
  }

  .page-what-is-mu .language-nav {
    flex: 0 0 auto;
    margin: 0 !important;
  }

  .page-what-is-mu .site-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px !important;

    width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    white-space: normal !important;
  }

  .page-what-is-mu .site-nav a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 8px 7px !important;
    text-align: center;
    white-space: normal !important;

    font-size: .78rem;
    line-height: 1.15;
  }
}

@media (max-width: 390px) {

  .page-what-is-mu .site-brand-name {
    font-size: .84rem;
  }

  .page-what-is-mu .site-brand-subtitle {
    display: none;
  }

  .page-what-is-mu .site-brand-logo-img {
    width: 43px !important;
    flex-basis: 43px !important;
  }

  .page-what-is-mu .site-nav a {
    font-size: .74rem;
  }
}

/* =========================================================
   20A.06A — Wat is MU — mobile nav MATCH locked homepage
   ========================================================= */

@media (max-width: 760px) {

  .page-what-is-mu .site-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;

    width: auto !important;
    margin: 12px -14px 0 !important;
    padding: 0 14px 4px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;

    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .page-what-is-mu .site-nav::-webkit-scrollbar {
    display: none;
  }

  .page-what-is-mu .site-nav a {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 12px !important;
    white-space: nowrap !important;

    font-size: .82rem;
    line-height: 1;
  }
}

/* 20A.06A — Wat is MU — compact mobile process cards */
@media (max-width:760px){

  .page-what-is-mu .mu-about-dark .mu-process-grid{
    gap:12px !important;
  }

  .page-what-is-mu .mu-about-dark .mu-process-card{
    min-height:0 !important;
    height:auto !important;
    padding:18px 20px !important;
  }

  .page-what-is-mu .mu-about-dark .mu-process-card .mu-process-number{
    margin-bottom:8px !important;
  }

  .page-what-is-mu .mu-about-dark .mu-process-card h3{
    margin:0 0 5px !important;
  }

  .page-what-is-mu .mu-about-dark .mu-process-card p{
    margin:0 !important;
  }
}

/* 20A.06A — Wat is MU — mobile process list instead of cards */
@media (max-width:760px){

  .page-what-is-mu .mu-about-dark .mu-process-grid{
    display:block !important;
  }

  .page-what-is-mu .mu-about-dark .mu-process-card{
    position:relative;
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr);
    grid-template-areas:
      "num title"
      "num text";
    column-gap:14px;
    row-gap:3px;

    padding:16px 0 !important;
    margin:0 !important;
    min-height:0 !important;

    border:0 !important;
    border-radius:0 !important;
    background:none !important;
    box-shadow:none !important;
  }

  .page-what-is-mu .mu-about-dark .mu-process-card:not(:last-child){
    border-bottom:1px solid rgba(111,196,255,.18) !important;
  }

  .page-what-is-mu .mu-about-dark .mu-process-number{
    grid-area:num;
    margin:0 !important;
    align-self:start;
    font-size:.86rem;
    font-weight:800;
    color:#5fd6ff;
  }

  .page-what-is-mu .mu-about-dark .mu-process-card h3{
    grid-area:title;
    margin:0 !important;
    font-size:1rem !important;
    line-height:1.2;
  }

  .page-what-is-mu .mu-about-dark .mu-process-card p{
    grid-area:text;
    margin:0 !important;
    font-size:.9rem !important;
    line-height:1.45;
  }
}

/* =========================================================
   20A.06A — Wat is MU — compact mobile process list FINAL
   ========================================================= */

@media (max-width:760px){

  .page-what-is-mu .mu-process-grid{
    display:block !important;
    margin-top:22px !important;
  }

  .page-what-is-mu .mu-process-step{
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    grid-template-areas:
      "num title"
      "num text" !important;
    column-gap:12px !important;
    row-gap:3px !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:15px 0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:none !important;
    box-shadow:none !important;
  }

  .page-what-is-mu .mu-process-step:not(:last-child){
    border-bottom:1px solid rgba(98,190,245,.20) !important;
  }

  .page-what-is-mu .mu-process-step > span{
    grid-area:num;
    margin:0 !important;
    padding-top:2px;
    color:#62d7ff !important;
    font-size:.78rem !important;
    font-weight:800 !important;
    line-height:1.2 !important;
  }

  .page-what-is-mu .mu-process-step > strong{
    grid-area:title;
    margin:0 !important;
    color:#fff !important;
    font-size:1rem !important;
    line-height:1.25 !important;
  }

  .page-what-is-mu .mu-process-step > small{
    grid-area:text;
    margin:0 !important;
    color:#9fb9ca !important;
    font-size:.86rem !important;
    line-height:1.4 !important;
  }
}

/* 20A.06A — Wat is MU — hide redundant process section on mobile */
@media (max-width:760px){
  .page-what-is-mu .mu-about-dark{
    display:none !important;
  }
}

/* 20A.06A — Wat is MU — compact centered approach callout */
@media (min-width:761px){
  .page-what-is-mu .mu-about-problem .mu-solution-callout{
    width:68% !important;
    max-width:820px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (max-width:760px){
  .page-what-is-mu .mu-about-problem .mu-solution-callout{
    width:100% !important;
    max-width:none !important;
  }
}

/* 20A.06A — Wat is MU — centered solution callout FIX */
@media (min-width:761px){
  .page-what-is-mu .mu-about-solution{
    width:68% !important;
    max-width:820px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (max-width:760px){
  .page-what-is-mu .mu-about-solution{
    width:100% !important;
    max-width:none !important;
  }
}


/* =========================================================
   20A.06A — Hoe werkt het? — isolated page design
   ========================================================= */

.page-how-it-works{
  --how-navy:#061421;
  --how-navy-2:#0a1d2c;
  --how-blue:#0b8dff;
  --how-cyan:#57d8ff;
  --how-text:#102536;
  --how-muted:#587080;
  --how-line:#dce8ef;
  --how-soft:#f4f9fc;
}

.page-how-it-works #main{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#fff;
  color:var(--how-text);
}

.page-how-it-works .how-shell{
  width:min(1180px, calc(100% - 48px));
  margin:0 auto;
}

.page-how-it-works .how-hero{
  position:relative;
  padding:82px 0 72px;
  color:#fff;
  background:
    radial-gradient(circle at 82% 35%, rgba(20,149,255,.18), transparent 31%),
    linear-gradient(135deg,#06131f 0%,#071b2a 58%,#09243a 100%);
}

.page-how-it-works .how-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(440px,1.08fr);
  gap:58px;
  align-items:center;
}

.page-how-it-works .how-eyebrow,
.page-how-it-works .how-kicker{
  display:block;
  margin-bottom:12px;
  color:#168fff;
  font-size:.78rem;
  line-height:1.2;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.page-how-it-works .how-hero .how-eyebrow{
  color:var(--how-cyan);
}

.page-how-it-works .how-hero h1{
  max-width:650px;
  margin:0 0 24px;
  color:#fff;
  font-size:clamp(2.6rem,5vw,4.6rem);
  line-height:.98;
  letter-spacing:-.045em;
}

.page-how-it-works .how-hero-copy p{
  max-width:650px;
  margin:0 0 16px;
  color:#c1d2df;
  font-size:1.02rem;
  line-height:1.75;
}

.page-how-it-works .how-hero-copy .how-lead{
  color:#fff;
  font-size:1.13rem;
}

.page-how-it-works .how-hero-visual img,
.page-how-it-works .how-wide-visual img,
.page-how-it-works .how-visual-card img,
.page-how-it-works .how-control-visual img{
  display:block;
  width:100%;
  height:auto;
}

.page-how-it-works .how-hero-visual img{
  border-radius:20px;
  box-shadow:0 32px 80px rgba(0,0,0,.32);
}

.page-how-it-works .how-flow{
  padding:64px 0 68px;
  background:#f7fbfd;
  border-bottom:1px solid var(--how-line);
}

.page-how-it-works .how-section-heading{
  max-width:760px;
  margin-bottom:34px;
}

.page-how-it-works .how-center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.page-how-it-works .how-section-heading h2{
  margin:0;
  color:#0c2334;
  font-size:clamp(2rem,3.5vw,3rem);
  line-height:1.08;
  letter-spacing:-.03em;
}

.page-how-it-works .how-wide-visual{
  display:block;
  max-width:1050px;
  margin:0 auto;
}

.page-how-it-works .how-wide-visual img{
  border-radius:18px;
  box-shadow:0 18px 50px rgba(8,37,57,.10);
}

.page-how-it-works .how-flow-text{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
  max-width:1050px;
  margin:24px auto 0;
  text-align:center;
  color:#526b7a;
  font-size:.78rem;
  font-weight:750;
}

.page-how-it-works .how-flow-text b{
  display:block;
  margin-bottom:4px;
  color:#078bff;
  font-size:.68rem;
}

.page-how-it-works .how-section{
  padding:92px 0;
  background:#fff;
}

.page-how-it-works .how-section-dark{
  color:#fff;
  background:linear-gradient(135deg,#061522,#0a2030);
}

.page-how-it-works .how-split{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(430px,1.08fr);
  gap:72px;
  align-items:center;
}

.page-how-it-works .how-split-reverse .how-copy{
  order:2;
}

.page-how-it-works .how-split-reverse .how-visual-card{
  order:1;
}

.page-how-it-works .how-copy{
  max-width:590px;
}

.page-how-it-works .how-number,
.page-how-it-works .how-mini-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  color:#078bff;
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.1em;
}

.page-how-it-works .how-number{
  width:42px;
  height:42px;
  border:1px solid rgba(11,141,255,.28);
  border-radius:50%;
  background:rgba(11,141,255,.07);
}

.page-how-it-works .how-copy h2,
.page-how-it-works .how-control-copy h2{
  margin:0 0 22px;
  color:#0b2233;
  font-size:clamp(2rem,3.5vw,3.25rem);
  line-height:1.05;
  letter-spacing:-.035em;
}

.page-how-it-works .how-copy p,
.page-how-it-works .how-control-copy p{
  margin:0 0 17px;
  color:#526b7a;
  font-size:1rem;
  line-height:1.75;
}

.page-how-it-works .how-section-dark .how-copy h2{
  color:#fff;
}

.page-how-it-works .how-section-dark .how-copy p{
  color:#b9cbd7;
}

.page-how-it-works .how-section-dark .how-kicker{
  color:#5edaff;
}

.page-how-it-works .how-visual-card{
  position:relative;
  padding:18px;
  border:1px solid #e0ebf1;
  border-radius:24px;
  background:#f7fbfd;
  box-shadow:0 24px 65px rgba(8,37,57,.10);
}

.page-how-it-works .how-visual-card img{
  border-radius:15px;
}

.page-how-it-works .how-visual-dark{
  border-color:rgba(93,213,255,.16);
  background:rgba(255,255,255,.035);
  box-shadow:0 25px 70px rgba(0,0,0,.28);
}

.page-how-it-works .how-preview{
  position:absolute;
  z-index:2;
  top:30px;
  left:30px;
  padding:7px 11px;
  border:1px solid rgba(95,216,255,.4);
  border-radius:999px;
  color:#dff8ff;
  background:rgba(4,23,37,.86);
  font-size:.64rem;
  font-weight:850;
  letter-spacing:.1em;
}

.page-how-it-works .how-deep-dive{
  padding:96px 0;
  background:#f3f8fb;
  border-top:1px solid var(--how-line);
  border-bottom:1px solid var(--how-line);
}

.page-how-it-works .how-info-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  align-items:start;
}

.page-how-it-works .how-info-grid article{
  padding:34px 32px;
  border-top:3px solid #0b8dff;
  background:#fff;
  box-shadow:0 12px 34px rgba(8,37,57,.065);
}

.page-how-it-works .how-info-grid h2{
  margin:0 0 20px;
  color:#0c2334;
  font-size:1.35rem;
  line-height:1.2;
  letter-spacing:-.02em;
}

.page-how-it-works .how-info-grid p{
  margin:0 0 15px;
  color:#5a707e;
  font-size:.94rem;
  line-height:1.7;
}

.page-how-it-works .how-control{
  padding:94px 0;
  color:#fff;
  background:
    radial-gradient(circle at 78% 50%,rgba(15,147,255,.18),transparent 30%),
    #061522;
}

.page-how-it-works .how-control-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
  gap:70px;
  align-items:center;
}

.page-how-it-works .how-control-copy h2{
  color:#fff;
}

.page-how-it-works .how-control-copy p{
  color:#b9ccd8;
}

.page-how-it-works .how-control .how-kicker{
  color:#5edaff;
}

.page-how-it-works .how-control .how-number{
  color:#5edaff;
  border-color:rgba(94,218,255,.32);
  background:rgba(94,218,255,.06);
}

.page-how-it-works .how-control-visual img{
  border-radius:22px;
  box-shadow:0 28px 70px rgba(0,0,0,.30);
}

.page-how-it-works .how-link{
  display:inline-flex;
  gap:10px;
  align-items:center;
  margin-top:16px;
  color:#fff;
  font-weight:800;
  text-decoration:none;
}

.page-how-it-works .how-link span{
  color:#5edaff;
  font-size:1.25rem;
}

@media (max-width:900px){
  .page-how-it-works .how-hero-grid,
  .page-how-it-works .how-split,
  .page-how-it-works .how-control-grid{
    grid-template-columns:1fr;
    gap:42px;
  }

  .page-how-it-works .how-split-reverse .how-copy,
  .page-how-it-works .how-split-reverse .how-visual-card{
    order:initial;
  }

  .page-how-it-works .how-copy{
    max-width:720px;
  }

  .page-how-it-works .how-info-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .page-how-it-works .how-shell{
    width:min(100% - 32px,1180px);
  }

  .page-how-it-works .how-hero{
    padding:54px 0 48px;
  }

  .page-how-it-works .how-hero-grid{
    gap:32px;
  }

  .page-how-it-works .how-hero h1{
    font-size:2.55rem;
    line-height:1;
  }

  .page-how-it-works .how-hero-copy .how-lead{
    font-size:1.02rem;
  }

  .page-how-it-works .how-flow{
    padding:50px 0;
  }

  .page-how-it-works .how-flow-text{
    grid-template-columns:repeat(2,1fr);
    gap:14px 8px;
  }

  .page-how-it-works .how-flow-text span{
    padding:10px 4px;
    border-bottom:1px solid #dce8ef;
  }

  .page-how-it-works .how-section,
  .page-how-it-works .how-deep-dive,
  .page-how-it-works .how-control{
    padding:64px 0;
  }

  .page-how-it-works .how-split,
  .page-how-it-works .how-control-grid{
    gap:34px;
  }

  .page-how-it-works .how-copy h2,
  .page-how-it-works .how-control-copy h2{
    font-size:2.15rem;
  }

  .page-how-it-works .how-visual-card{
    padding:10px;
    border-radius:18px;
  }

  .page-how-it-works .how-visual-card img,
  .page-how-it-works .how-control-visual img,
  .page-how-it-works .how-hero-visual img,
  .page-how-it-works .how-wide-visual img{
    border-radius:13px;
  }

  .page-how-it-works .how-preview{
    top:18px;
    left:18px;
  }

  .page-how-it-works .how-info-grid article{
    padding:28px 24px;
  }
}

/* =========================================================
   20A.06A — Hoe werkt het — desktop balance correction
   ========================================================= */

@media (min-width:901px){

  .page-how-it-works .how-shell{
    width:min(1240px, calc(100% - 80px)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .page-how-it-works .how-hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1.08fr) !important;
    gap:64px !important;
    align-items:center !important;
  }

  .page-how-it-works .how-hero-copy{
    width:100% !important;
    max-width:570px !important;
    justify-self:end !important;
  }

  .page-how-it-works .how-hero-visual{
    width:100% !important;
    max-width:620px !important;
    justify-self:start !important;
  }

  .page-how-it-works .how-split{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:72px !important;
  }

  .page-how-it-works .how-copy{
    width:100% !important;
    max-width:560px !important;
    justify-self:center !important;
  }

  .page-how-it-works .how-visual-card{
    width:100% !important;
    max-width:600px !important;
    justify-self:center !important;
  }

  .page-how-it-works .how-control-copy{
    width:100% !important;
    max-width:560px !important;
    justify-self:center !important;
  }

  .page-how-it-works .how-control-visual{
    width:100% !important;
    max-width:600px !important;
    justify-self:center !important;
  }
}

/* =========================================================
   20A.06A — Hoe werkt het — dynamic hero
   ========================================================= */

@media (min-width: 900px){

  .page-how-it-works .how-hero{
    overflow:hidden;
  }

  .page-how-it-works .how-hero-grid{
    grid-template-columns:minmax(0, .88fr) minmax(480px, 1.12fr);
    align-items:center;
    position:relative;
  }

  .page-how-it-works .how-hero-copy{
    position:relative;
    z-index:2;
  }

  .page-how-it-works .how-hero-visual{
    position:relative;
    z-index:1;
    width:118%;
    max-width:none;
    margin-left:-4%;
    transform:translate(4%, 8px);
  }

  .page-how-it-works .how-hero-visual::before{
    content:"";
    position:absolute;
    inset:15% 8% 8% 5%;
    background:radial-gradient(
      ellipse at center,
      rgba(0,174,255,.24) 0%,
      rgba(0,174,255,.08) 45%,
      transparent 72%
    );
    filter:blur(24px);
    z-index:-1;
  }

  .page-how-it-works .how-hero-visual img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 24px 32px rgba(0,0,0,.28));
  }
}

/* HOW HERO — remove rectangular glow test */
.page-how-it-works .how-hero-visual::before {
  display: none !important;
}

/* HOW HERO — clean rebuild: transparent laptop layer */
.page-how-it-works .how-hero-visual {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.page-how-it-works .how-hero-visual::before,
.page-how-it-works .how-hero-visual::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.page-how-it-works .how-hero-visual img {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* HOW — deep dive visual refinement */
.page-how-it-works .how-deep-dive {
  background:
    radial-gradient(circle at 50% 0%, rgba(0,174,255,.08), transparent 38%),
    linear-gradient(180deg, #f7fbfe 0%, #ffffff 100%);
}

.page-how-it-works .how-info-grid {
  gap: 24px;
  align-items: stretch;
}

.page-how-it-works .how-info-grid article {
  position: relative;
  overflow: hidden;
  padding: 34px 32px 36px;
  background: linear-gradient(180deg, #ffffff 0%, #f5faff 100%);
  border: 1px solid rgba(14,107,164,.14);
  border-radius: 18px;
  box-shadow: 0 14px 38px rgba(10,55,90,.08);
}

.page-how-it-works .how-info-grid article::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #00aeff, #25d7e8);
}

.page-how-it-works .how-info-grid article:nth-child(2)::before {
  background: linear-gradient(90deg, #178cff, #6c7cff);
}

.page-how-it-works .how-info-grid article:nth-child(3)::before {
  background: linear-gradient(90deg, #14b8c8, #00aeff);
}

.page-how-it-works .how-mini-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: rgba(0,174,255,.10);
  border: 1px solid rgba(0,174,255,.22);
  color: #008fd6;
  font-weight: 800;
}

.page-how-it-works .how-info-grid article h2 {
  margin-top: 0;
  margin-bottom: 18px;
  color: #092b42;
}

.page-how-it-works .how-info-grid article p {
  color: #526674;
  line-height: 1.72;
}

@media (max-width: 900px) {
  .page-how-it-works .how-info-grid {
    gap: 18px;
  }

  .page-how-it-works .how-info-grid article {
    padding: 28px 24px 30px;
  }
}


/* HOW — deep dive visual symbols */
.page-how-it-works .how-deep-dive .how-info-grid article {
  position: relative;
  padding-top: 108px !important;
}

.page-how-it-works .how-deep-dive .how-info-grid article::before {
  content: "";
  position: absolute;
  top: 48px;
  left: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e9f7fd;
  border: 1px solid #cceefa;
}

.page-how-it-works .how-deep-dive .how-info-grid article::after {
  position: absolute;
  top: 58px;
  left: 28px;
  width: 48px;
  text-align: center;
  color: #079ed8;
  font-size: 25px;
  line-height: 28px;
  font-weight: 700;
}

.page-how-it-works .how-deep-dive .how-info-grid article:nth-child(1)::after {
  content: "▥";
}

.page-how-it-works .how-deep-dive .how-info-grid article:nth-child(2)::after {
  content: "◷";
}

.page-how-it-works .how-deep-dive .how-info-grid article:nth-child(3)::after {
  content: "↗";
}

.page-how-it-works .how-deep-dive .how-mini-number {
  position: absolute;
  top: 20px;
  left: 28px;
}

@media (max-width:760px) {
  .page-how-it-works .how-deep-dive .how-info-grid article {
    padding-top: 105px !important;
  }
}

/* HOW deep-dive — symbols meer visuele nadruk */
.page-how-it-works .how-info-grid article .how-card-icon {
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 10px 0 18px !important;
  border-radius: 50% !important;
  background: #e9f7fd !important;
  color: #079bd3 !important;
  font-size: 24px !important;
}

/* HOW deep-dive — symbols meer visuele nadruk */
.page-how-it-works .how-info-grid article .how-card-icon {
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 10px 0 18px !important;
  border-radius: 50% !important;
  background: #e9f7fd !important;
  color: #079bd3 !important;
  font-size: 24px !important;
}


/* HOW deep-dive — alleen onderste kernregels */
.page-how-it-works .how-card-points {
  list-style: none;
  padding: 18px 0 0;
  margin: auto 0 0;
}

.page-how-it-works .how-card-points li {
  position: relative;
  padding-left: 30px;
  margin: 10px 0;
  color: #253746;
  font-weight: 600;
  line-height: 1.45;
}

.page-how-it-works .how-card-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #08a7d8;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.page-how-it-works .how-info-grid article {
  display: flex;
  flex-direction: column;
}

/* Alleen de 3 bovenste symbolen in deep-dive verbergen */
.page-how-it-works .how-info-grid .how-card-icon {
  display: none !important;
}


/* HOW — verwijder uitsluitend symbolen boven 01/02/03 */
.page-how-it-works .how-deep-dive .how-info-grid article::before,
.page-how-it-works .how-deep-dive .how-info-grid article::after {
  display: none !important;
  content: none !important;
}

.page-how-it-works .how-deep-dive .how-info-grid article {
  padding-top: 68px !important;
}

@media (max-width:760px) {
  .page-how-it-works .how-deep-dive .how-info-grid article {
    padding-top: 68px !important;
  }
}

/* HOW — verwijder uitsluitend symbolen boven 01/02/03 */
.page-how-it-works .how-deep-dive .how-info-grid article::before,
.page-how-it-works .how-deep-dive .how-info-grid article::after {
  display: none !important;
  content: none !important;
}

.page-how-it-works .how-deep-dive .how-info-grid article {
  padding-top: 68px !important;
}

@media (max-width:760px) {
  .page-how-it-works .how-deep-dive .how-info-grid article {
    padding-top: 68px !important;
  }
}

/* HOW — landscape: proces + tradeplan compacter */
@media (orientation: landscape) {
  .page-how-it-works .how-wide-visual {
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .page-how-it-works .how-visual-card {
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* HOW — alleen onderste controle-visual kleiner in landscape */
@media (orientation: landscape) {
  .page-how-it-works .how-control-visual {
    width: 55% !important;
    max-width: 440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .page-how-it-works .how-control-visual img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* HOME — volledige MU-flow */
.mu-home-flow {
  padding: 72px 0;
}

.mu-home-flow-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.mu-home-flow-copy {
  max-width: 820px;
}

.mu-home-flow-copy h2 {
  margin: 10px 0 20px;
}

.mu-home-flow-copy p {
  line-height: 1.7;
}

.mu-home-flow-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
  padding: 24px;
  border: 1px solid #dce7ee;
  border-radius: 18px;
  background: #fff;
}

.mu-home-flow-steps span {
  padding: 10px 14px;
  border-radius: 10px;
  background: #f3f8fb;
  font-weight: 700;
  text-align: center;
}

.mu-home-flow-steps b {
  color: #08a7d8;
}

@media (max-width: 760px) {
  .mu-home-flow {
    padding: 48px 0;
  }

  .mu-home-flow-steps {
    flex-direction: column;
    align-items: stretch;
  }

  .mu-home-flow-steps b {
    text-align: center;
    transform: rotate(90deg);
  }
}

/* HOME — tekst volle beschikbare breedte */
.mu-home-flow-copy,
.mu-context-intro,
.mu-context-detail,
.mu-trade-context-intro {
  max-width: none !important;
  width: 100% !important;
}

/* HOME — lange tekst over volledige contentbreedte */
body:not(.page-how-it-works) .mu-context-intro > p,
body:not(.page-how-it-works) .mu-context-detail,
body:not(.page-how-it-works) .mu-context-detail > p,
body:not(.page-how-it-works) .mu-home-flow-copy,
body:not(.page-how-it-works) .mu-home-flow-copy > p,
body:not(.page-how-it-works) .mu-trade-context-intro,
body:not(.page-how-it-works) .mu-trade-context-intro h2,
body:not(.page-how-it-works) .mu-trade-context-intro p {
  width: 100% !important;
  max-width: none !important;
}

/* HOME — uniforme contentlijn volgens Van marktscan naar handelsplan */
body:not(.page-how-it-works) .mu-context-intro,
body:not(.page-how-it-works) .mu-context-detail,
body:not(.page-how-it-works) .mu-home-flow-inner,
body:not(.page-how-it-works) .mu-trade-context-intro {
  width: calc(100% - 96px) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body:not(.page-how-it-works) .mu-context-intro > p,
body:not(.page-how-it-works) .mu-context-detail > p,
body:not(.page-how-it-works) .mu-home-flow-copy,
body:not(.page-how-it-works) .mu-home-flow-copy > p,
body:not(.page-how-it-works) .mu-trade-context-intro h2,
body:not(.page-how-it-works) .mu-trade-context-intro p {
  width: 100% !important;
  max-width: none !important;
}

body:not(.page-how-it-works) .mu-context-detail {
  margin-top: 42px !important;
  margin-bottom: 42px !important;
}

body:not(.page-how-it-works) .mu-home-flow {
  padding: 84px 0 !important;
}

body:not(.page-how-it-works) .mu-trade-context-intro {
  margin-bottom: 34px !important;
}

@media (max-width: 760px) {
  body:not(.page-how-it-works) .mu-context-intro,
  body:not(.page-how-it-works) .mu-context-detail,
  body:not(.page-how-it-works) .mu-home-flow-inner,
  body:not(.page-how-it-works) .mu-trade-context-intro {
    width: calc(100% - 32px) !important;
  }

  body:not(.page-how-it-works) .mu-home-flow {
    padding: 56px 0 !important;
  }
}

/* HOME — uniforme mobiele layout */
@media (max-width: 760px) {

  body:not(.page-how-it-works) .mu-context-v2,
  body:not(.page-how-it-works) .mu-trade-context-v3 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body:not(.page-how-it-works) .mu-context-intro,
  body:not(.page-how-it-works) .mu-context-detail,
  body:not(.page-how-it-works) .mu-home-flow-inner,
  body:not(.page-how-it-works) .mu-trade-context-intro {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body:not(.page-how-it-works) .mu-context-intro h2,
  body:not(.page-how-it-works) .mu-trade-context-intro h2,
  body:not(.page-how-it-works) .mu-home-flow-copy h2 {
    max-width: none !important;
  }

  body:not(.page-how-it-works) .mu-context-intro > p,
  body:not(.page-how-it-works) .mu-context-detail > p,
  body:not(.page-how-it-works) .mu-home-flow-copy > p,
  body:not(.page-how-it-works) .mu-trade-context-intro p {
    width: 100% !important;
    max-width: none !important;
  }

  body:not(.page-how-it-works) .mu-context-detail {
    margin-top: 34px !important;
    margin-bottom: 34px !important;
  }

  body:not(.page-how-it-works) .mu-home-flow {
    padding: 56px 16px !important;
  }

  body:not(.page-how-it-works) .mu-home-flow-steps {
    width: 100%;
    padding: 18px 16px;
    gap: 8px;
  }

  body:not(.page-how-it-works) .mu-home-flow-steps span {
    width: 100%;
  }

  body:not(.page-how-it-works) .mu-context-cards {
    gap: 16px;
  }

  body:not(.page-how-it-works) .mu-context-cards article {
    min-height: 0;
    padding: 22px 20px;
  }
}

/* HOW — grotere visuals op echte desktop */
@media (min-width: 1000px) {

  .page-how-it-works .how-wide-visual {
    width: 100% !important;
    max-width: 1050px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .page-how-it-works .how-visual-card {
    width: 100% !important;
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .page-how-it-works .how-control-visual {
    width: 100% !important;
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* FOOTER — zelfde MU beeldmerk/verhouding als header */
.site-footer-logo-img {
  display: block !important;
  width: 72px !important;
  height: 52px !important;
  flex: 0 0 72px !important;
  object-fit: contain !important;
  object-position: center !important;
}

@media (max-width: 760px) {
  .site-footer-logo-img {
    width: 54px !important;
    height: 42px !important;
    flex-basis: 54px !important;
  }
}

/* WAT IS MU — process sectie zonder grote blauwe achtergrond */
.page-what-is-mu .mu-process-section,
.page-what-is-mu .mu-process-section .mu-section-inner {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.page-what-is-mu .mu-process-section {
  color: inherit !important;
}

/* WAT IS MU — grote blauwe procesbalk verwijderen */
.page-what-is-mu .mu-about-dark {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
}

.page-what-is-mu .mu-about-dark .mu-section-header h2 {
  color: #0b1739 !important;
}

.page-what-is-mu .mu-about-dark .mu-section-header > p:not(.mu-eyebrow) {
  color: #475569 !important;
}

/* WAT IS MU — processtappen desktop 4 per rij en leesbaar */
@media (min-width: 900px) {
  .page-what-is-mu .mu-process-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .page-what-is-mu .mu-process-step {
    min-height: 125px !important;
    padding: 20px !important;
  }

  .page-what-is-mu .mu-process-step strong {
    font-size: 1rem !important;
  }

  .page-what-is-mu .mu-process-step small {
    font-size: .86rem !important;
    line-height: 1.45 !important;
  }
}

/* WAT IS MU — 4 duidelijke procesblokken */
@media (min-width: 900px) {
  .page-what-is-mu .mu-process-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  .page-what-is-mu .mu-process-step {
    min-height: 210px !important;
    padding: 26px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .page-what-is-mu .mu-process-step > span {
    font-size: .9rem !important;
    margin-bottom: 20px !important;
  }

  .page-what-is-mu .mu-process-step > strong {
    font-size: 1.18rem !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
  }

  .page-what-is-mu .mu-process-step > small {
    font-size: .94rem !important;
    line-height: 1.55 !important;
  }
}

/* WAT IS MU — proces als tekst met aandachtstreepjes, geen kaarten */
@media (min-width: 761px) {

  .page-what-is-mu .mu-process-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 34px 56px !important;
    margin-top: 38px !important;
  }

  .page-what-is-mu .mu-process-step {
    position: relative !important;
    min-height: 0 !important;
    padding: 4px 10px 4px 24px !important;

    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    display: grid !important;
    grid-template-columns: 42px 1fr !important;
    grid-template-areas:
      "num title"
      "num text" !important;
    column-gap: 14px !important;
    align-items: start !important;
  }

  .page-what-is-mu .mu-process-step::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;
    bottom: 2px !important;
    width: 4px !important;
    border-radius: 4px !important;
    background: #16bfe8 !important;
  }

  .page-what-is-mu .mu-process-step > span {
    grid-area: num !important;
    margin: 2px 0 0 !important;
    font-size: .85rem !important;
    font-weight: 800 !important;
    color: #089fc7 !important;
  }

  .page-what-is-mu .mu-process-step > strong {
    grid-area: title !important;
    margin: 0 0 8px !important;
    font-size: 1.12rem !important;
    line-height: 1.25 !important;
    color: #0b1739 !important;
  }

  .page-what-is-mu .mu-process-step > small {
    grid-area: text !important;
    margin: 0 !important;
    font-size: .94rem !important;
    line-height: 1.55 !important;
    color: #475569 !important;
  }
}

/* WAT IS MU — proces ook zichtbaar en leesbaar op mobiel */
@media (max-width: 760px) {

  .page-what-is-mu .mu-about-dark {
    display: block !important;
  }

  .page-what-is-mu .mu-process-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    margin-top: 30px !important;
  }

  .page-what-is-mu .mu-process-step {
    position: relative !important;
    min-height: 0 !important;
    padding: 2px 4px 2px 20px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    display: grid !important;
    grid-template-columns: 36px 1fr !important;
    grid-template-areas:
      "num title"
      "num text" !important;
    column-gap: 10px !important;
    align-items: start !important;
  }

  .page-what-is-mu .mu-process-step::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    border-radius: 4px !important;
    background: #16bfe8 !important;
  }

  .page-what-is-mu .mu-process-step > span {
    grid-area: num !important;
    margin: 2px 0 0 !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
    color: #089fc7 !important;
  }

  .page-what-is-mu .mu-process-step > strong {
    grid-area: title !important;
    margin: 0 0 6px !important;
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
    color: #0b1739 !important;
  }

  .page-what-is-mu .mu-process-step > small {
    grid-area: text !important;
    margin: 0 !important;
    font-size: .91rem !important;
    line-height: 1.5 !important;
    color: #475569 !important;
  }
}

/* =========================================================
   20A.06A — Bitvavo EUR — Hero
   Scoped exclusively to page-bitvavo-eur
   ========================================================= */

.page-bitvavo-eur .bitvavo-page {
  max-width: none;
  margin: 0;
  padding: 0;
}

.page-bitvavo-eur .bitvavo-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(420px, .88fr) minmax(520px, 1.12fr);
  gap: clamp(34px, 4.5vw, 72px);
  align-items: center;

  width: 100%;
  padding:
    clamp(48px, 5vw, 72px)
    max(5vw, 48px);

  color: #fff;
  background:
    radial-gradient(circle at 82% 34%, rgba(0, 205, 255, .18), transparent 30%),
    linear-gradient(118deg, #062f55 0%, #073b68 48%, #075d89 100%);

  overflow: hidden;
  isolation: isolate;
}

.page-bitvavo-eur .bitvavo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.42), transparent 90%);
}

.page-bitvavo-eur .bitvavo-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 650px;
}

.page-bitvavo-eur .bitvavo-eyebrow {
  margin: 0 0 17px;
  color: #75d8f4;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.page-bitvavo-eur .bitvavo-hero h1 {
  margin: 0 0 24px;
  color: #fff;
  font-size: clamp(2.8rem, 4.5vw, 4.8rem);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 850;
}

.page-bitvavo-eur .bitvavo-hero-lead {
  max-width: 620px;
  margin: 0 0 18px;
  color: #e4f3fb;
  font-size: clamp(1.04rem, 1.3vw, 1.22rem);
  line-height: 1.65;
}

.page-bitvavo-eur .bitvavo-hero-copy > p:not(.bitvavo-eyebrow):not(.bitvavo-hero-lead) {
  max-width: 610px;
  margin: 0;
  color: #b9d1e1;
  line-height: 1.7;
}

.page-bitvavo-eur .bitvavo-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
}

.page-bitvavo-eur .bitvavo-hero-points span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 13px;
  color: #dff8ff;
  background: rgba(10, 88, 132, .36);
  border: 1px solid rgba(119, 218, 245, .25);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 750;
  backdrop-filter: blur(6px);
}

.page-bitvavo-eur .bitvavo-hero-visual {
  position: relative;
  z-index: 1;
  margin: 0;
  min-width: 0;
}

.page-bitvavo-eur .bitvavo-hero-visual::before {
  content: "";
  position: absolute;
  inset: 8% 5%;
  background: rgba(0, 202, 255, .18);
  border-radius: 50%;
  filter: blur(55px);
  z-index: -1;
}

.page-bitvavo-eur .bitvavo-hero-picture {
  display: block;
  width: 100%;
}

.page-bitvavo-eur .bitvavo-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  border: 1px solid rgba(135, 220, 255, .20);
  box-shadow:
    0 30px 70px rgba(0, 18, 36, .36),
    0 0 45px rgba(0, 197, 255, .08);
}

/* Tablet */
@media (max-width: 1050px) {
  .page-bitvavo-eur .bitvavo-hero {
    grid-template-columns: minmax(0, 1fr) minmax(400px, .95fr);
    gap: 30px;
  }
}

/* Mobile / small tablet */
@media (max-width: 850px) {
  .page-bitvavo-eur .bitvavo-hero {
    grid-template-columns: 1fr;
    padding: 42px 24px 32px;
  }

  .page-bitvavo-eur .bitvavo-hero-copy {
    max-width: 680px;
  }

  .page-bitvavo-eur .bitvavo-hero-visual {
    max-width: 760px;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .page-bitvavo-eur .bitvavo-hero {
    padding: 34px 20px 26px;
  }

  .page-bitvavo-eur .bitvavo-hero h1 {
    font-size: clamp(2.45rem, 12vw, 3.5rem);
  }

  .page-bitvavo-eur .bitvavo-hero-visual img {
    border-radius: 16px;
  }

  .page-bitvavo-eur .bitvavo-hero-points {
    gap: 7px;
  }
}

/* =========================================================
   Bitvavo EUR — break out of generic editorial article shell
   ========================================================= */

.page-bitvavo-eur main > article.prose.bitvavo-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}


/* =========================================================
   Bitvavo EUR — hero colour refinement
   Direction: Hoe werkt het? + Bitvavo electric-blue accent
   ========================================================= */

.page-bitvavo-eur .bitvavo-hero {
  background:
    radial-gradient(
      circle at 82% 42%,
      rgba(0, 168, 255, .24),
      transparent 31%
    ),
    radial-gradient(
      circle at 98% 88%,
      rgba(0, 211, 239, .14),
      transparent 32%
    ),
    linear-gradient(
      118deg,
      #071b2d 0%,
      #082b48 38%,
      #073f68 66%,
      #075f88 100%
    );
}

.page-bitvavo-eur .bitvavo-hero-visual::before {
  background: rgba(0, 183, 255, .16);
}


/* Bitvavo EUR — darker hero, aligned with Hoe werkt het */
.page-bitvavo-eur .bitvavo-hero {
  background:
    radial-gradient(
      circle at 78% 45%,
      rgba(0, 145, 205, .16),
      transparent 34%
    ),
    linear-gradient(
      115deg,
      #061827 0%,
      #072238 42%,
      #083652 72%,
      #084b68 100%
    );
}


/* Bitvavo EUR — exact MU hero palette from Hoe werkt het */
.page-bitvavo-eur .bitvavo-hero {
  background:
    radial-gradient(circle at 82% 35%, rgba(20,149,255,.18), transparent 31%),
    linear-gradient(135deg,#06131f 0%,#071b2a 58%,#09243a 100%);
}


/* =========================================================
   HOME — unified MU hero palette
   Exact palette from Hoe werkt het
   ========================================================= */

.page-home .mu-hero.mu-hero-v2 {
  background:
    radial-gradient(circle at 82% 35%, rgba(20,149,255,.18), transparent 31%),
    linear-gradient(135deg,#06131f 0%,#071b2a 58%,#09243a 100%);
}


/* HOME — exact hero background from Hoe werkt het */
body.page-home .mu-hero.mu-hero-v2 {
  background:
    radial-gradient(circle at 82% 35%, rgba(20,149,255,.18), transparent 31%),
    linear-gradient(135deg,#06131f 0%,#071b2a 58%,#09243a 100%) !important;
}


/* WHAT IS MU — exact unified MU hero palette */
.page-what-is-mu .mu-about-hero {
  background:
    radial-gradient(circle at 82% 35%, rgba(20,149,255,.18), transparent 31%),
    linear-gradient(135deg,#06131f 0%,#071b2a 58%,#09243a 100%) !important;
}


/* =========================================================
   MU HEADER — unified desktop geometry
   Reference: Hoe werkt het
   ========================================================= */

@media (min-width: 901px) {

  body.page-home .site-header .site-header-inner,
  body.page-what-is-mu .site-header .site-header-inner,
  body.page-how-it-works .site-header .site-header-inner,
  body.page-bitvavo-eur .site-header .site-header-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: max(3.2vw, 34px) !important;
    padding-right: max(3.2vw, 34px) !important;
  }

}


/* =========================================================
   20A.06A — full-width hero aansluiting op header
   Reference: Hoe werkt het
   ========================================================= */

.page-home main.container,
.page-what-is-mu main.container,
.page-bitvavo-eur main.container {
  padding-top: 0 !important;
}


/* =========================================================
   20A.06A — Bitvavo EUR — Waarom EUR-markten
   ========================================================= */

.page-bitvavo-eur .bitvavo-why-eur {
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.18fr);
  gap: clamp(46px, 6vw, 88px);
  align-items: center;

  width: min(1180px, calc(100% - 96px));
  margin: 0 auto;
  padding: clamp(76px, 8vw, 112px) 0;
}

.page-bitvavo-eur .bitvavo-why-eur-copy {
  min-width: 0;
}

.page-bitvavo-eur .bitvavo-section-kicker {
  margin: 0 0 13px;
  color: #087aa4;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.page-bitvavo-eur .bitvavo-why-eur h2 {
  margin: 0 0 24px;
  color: #09283c;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.page-bitvavo-eur .bitvavo-why-eur-copy > p:not(.bitvavo-section-kicker) {
  margin: 0 0 18px;
  color: #536d7a;
  font-size: 1rem;
  line-height: 1.75;
}

.page-bitvavo-eur .bitvavo-why-eur-copy > p:last-child {
  margin-bottom: 0;
}

.page-bitvavo-eur .bitvavo-why-eur-visual {
  position: relative;
  margin: 0;
  min-width: 0;
}

.page-bitvavo-eur .bitvavo-why-eur-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 26px 64px rgba(5, 35, 55, .14);
}

@media (max-width: 1000px) {
  .page-bitvavo-eur .bitvavo-why-eur {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .page-bitvavo-eur .bitvavo-why-eur-copy {
    max-width: 720px;
  }
}

@media (max-width: 760px) {
  .page-bitvavo-eur .bitvavo-why-eur {
    width: calc(100% - 32px);
    padding: 58px 0;
    gap: 30px;
  }

  .page-bitvavo-eur .bitvavo-why-eur h2 {
    margin-bottom: 18px;
  }

  .page-bitvavo-eur .bitvavo-why-eur-visual img {
    border-radius: 16px;
  }
}


/* =========================================================
   20A.06A — Bitvavo EUR — Marktanalyse
   ========================================================= */

.page-bitvavo-eur .bitvavo-analysis {
  display: grid;
  grid-template-columns: minmax(520px, 1.12fr) minmax(360px, .88fr);
  gap: clamp(46px, 6vw, 88px);
  align-items: center;
  width: 100%;
  padding: clamp(76px, 8vw, 112px) max(5vw, 48px);
  background:
    radial-gradient(circle at 18% 45%, rgba(20,149,255,.055), transparent 34%),
    #f4f8fa;
}

.page-bitvavo-eur .bitvavo-analysis-copy {
  min-width: 0;
  max-width: 520px;
}

.page-bitvavo-eur .bitvavo-analysis h2 {
  margin: 0 0 24px;
  color: #09283c;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.page-bitvavo-eur .bitvavo-analysis-copy > p:not(.bitvavo-section-kicker) {
  margin: 0 0 18px;
  color: #536d7a;
  font-size: 1rem;
  line-height: 1.75;
}

.page-bitvavo-eur .bitvavo-analysis-copy > p:last-child {
  margin-bottom: 0;
}

.page-bitvavo-eur .bitvavo-analysis-visual {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 0 0 0 auto;
  min-width: 0;
}

.page-bitvavo-eur .bitvavo-analysis-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 26px 64px rgba(5,35,55,.14);
}

@media (max-width: 1000px) {
  .page-bitvavo-eur .bitvavo-analysis {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .page-bitvavo-eur .bitvavo-analysis-visual {
    margin: 0;
    max-width: none;
  }

  .page-bitvavo-eur .bitvavo-analysis-copy {
    max-width: 720px;
  }
}

@media (max-width: 760px) {
  .page-bitvavo-eur .bitvavo-analysis {
    padding: 58px 16px;
    gap: 30px;
  }

  .page-bitvavo-eur .bitvavo-analysis-visual img {
    border-radius: 16px;
  }
}


/* =========================================================
   20A.06A — Bitvavo EUR — section rhythm correction
   ========================================================= */

@media (min-width: 1001px) {
  .page-bitvavo-eur .bitvavo-why-eur {
    padding-bottom: 64px;
  }

  .page-bitvavo-eur .bitvavo-analysis {
    padding-top: 64px;
  }
}


/* 20A.06A — Bitvavo EUR — tighter section transition */
@media (min-width: 1001px) {
  .page-bitvavo-eur .bitvavo-why-eur {
    padding-bottom: 32px !important;
  }

  .page-bitvavo-eur .bitvavo-analysis {
    padding-top: 32px !important;
  }
}


/* =========================================================
   20A.06A — Bitvavo EUR — Breder EUR-marktbeeld
   ========================================================= */

.page-bitvavo-eur .bitvavo-market-view {
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.18fr);
  gap: clamp(46px, 6vw, 88px);
  align-items: center;

  width: min(1180px, calc(100% - 96px));
  margin: 0 auto;
  padding: clamp(72px, 7vw, 96px) 0;
}

.page-bitvavo-eur .bitvavo-market-view-copy {
  min-width: 0;
}

.page-bitvavo-eur .bitvavo-market-view h2 {
  margin: 0 0 24px;
  color: #09283c;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.page-bitvavo-eur .bitvavo-market-view-copy > p:not(.bitvavo-section-kicker) {
  margin: 0 0 18px;
  color: #536d7a;
  font-size: 1rem;
  line-height: 1.75;
}

.page-bitvavo-eur .bitvavo-market-view-copy > p:last-child {
  margin-bottom: 0;
}

.page-bitvavo-eur .bitvavo-market-view-visual {
  position: relative;
  width: 100%;
  margin: 0;
  min-width: 0;
}

.page-bitvavo-eur .bitvavo-market-view-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 26px 64px rgba(5,35,55,.14);
}

@media (max-width: 1000px) {
  .page-bitvavo-eur .bitvavo-market-view {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .page-bitvavo-eur .bitvavo-market-view-copy {
    max-width: 720px;
  }
}

@media (max-width: 760px) {
  .page-bitvavo-eur .bitvavo-market-view {
    width: calc(100% - 32px);
    padding: 58px 0;
    gap: 30px;
  }

  .page-bitvavo-eur .bitvavo-market-view-visual img {
    border-radius: 16px;
  }
}


/* =========================================================
   20A.06A — Bitvavo EUR — Onafhankelijk platform
   ========================================================= */

.page-bitvavo-eur .bitvavo-independent {
  display: grid;
  grid-template-columns: minmax(340px, .82fr) minmax(420px, 1.18fr);
  gap: clamp(54px, 7vw, 100px);
  align-items: start;

  width: 100%;
  padding: clamp(76px, 8vw, 108px) max(7vw, 72px);

  color: #fff;
  background:
    radial-gradient(circle at 82% 35%, rgba(20,149,255,.16), transparent 31%),
    linear-gradient(135deg,#06131f 0%,#071b2a 58%,#09243a 100%);
}

.page-bitvavo-eur .bitvavo-independent .bitvavo-section-kicker {
  color: #53c9f3;
}

.page-bitvavo-eur .bitvavo-independent h2 {
  margin: 0 0 22px;
  color: #fff;
  font-size: clamp(2.2rem, 3.4vw, 3.35rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}

.page-bitvavo-eur .bitvavo-independent-statement {
  max-width: 440px;
  margin: 0;
  color: #b8d2df;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
}

.page-bitvavo-eur .bitvavo-independent-copy {
  max-width: 650px;
}

.page-bitvavo-eur .bitvavo-independent-copy > p {
  margin: 0 0 19px;
  color: #c7d9e2;
  font-size: 1rem;
  line-height: 1.75;
}

.page-bitvavo-eur .bitvavo-next-market {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 13px 18px;
  color: #fff;
  font-weight: 750;
  text-decoration: none;
  border: 1px solid rgba(83,201,243,.38);
  border-radius: 12px;
  background: rgba(20,149,255,.08);
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.page-bitvavo-eur .bitvavo-next-market:hover {
  background: rgba(20,149,255,.15);
  border-color: rgba(83,201,243,.65);
  transform: translateY(-1px);
}

.page-bitvavo-eur .bitvavo-next-market span {
  font-size: 1.2em;
}

@media (max-width: 900px) {
  .page-bitvavo-eur .bitvavo-independent {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 760px) {
  .page-bitvavo-eur .bitvavo-independent {
    padding: 58px 16px;
  }
}


/* =========================================================
   20A.06A — Bitvavo EUR — section rhythm correction
   Analyse -> breder marktbeeld
   ========================================================= */

@media (min-width: 1001px) {
  .page-bitvavo-eur .bitvavo-analysis {
    padding-bottom: 32px !important;
  }

  .page-bitvavo-eur .bitvavo-market-view {
    padding-top: 32px !important;
  }
}


/* =========================================================
   20A.06A — Bitvavo EUR — mobile content order
   ========================================================= */

@media (max-width: 1000px) {
  .page-bitvavo-eur .bitvavo-analysis-copy {
    order: 1;
  }

  .page-bitvavo-eur .bitvavo-analysis-visual {
    order: 2;
  }
}


/* =========================================================
   20A.06A — MU hero title accent
   Exact gelijk aan Home 'beweging'
   ========================================================= */

.mu-title-accent {
  color: #17d4ee !important;
  text-shadow: 0 0 28px rgba(23,212,238,.28);
}


/* =========================================================
   20A.06A — Kraken EUR — Hero
   Exact geometry/palette aligned with Bitvavo EUR
   ========================================================= */

.page-kraken-eur .kraken-page {
  max-width: none;
  margin: 0;
  padding: 0;
}

.page-kraken-eur main > article.prose.kraken-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.page-kraken-eur .kraken-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(420px, .88fr) minmax(520px, 1.12fr);
  gap: clamp(34px, 4.5vw, 72px);
  align-items: center;

  width: 100%;
  padding:
    clamp(48px, 5vw, 72px)
    max(5vw, 48px);

  color: #fff;
  background:
    radial-gradient(circle at 82% 35%, rgba(20,149,255,.18), transparent 31%),
    linear-gradient(135deg,#06131f 0%,#071b2a 58%,#09243a 100%);

  overflow: hidden;
  isolation: isolate;
}

.page-kraken-eur .kraken-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.42), transparent 90%);
}

.page-kraken-eur .kraken-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 650px;
}

.page-kraken-eur .kraken-hero h1 {
  margin: 0 0 24px;
  color: #fff;
  font-size: clamp(2.8rem, 4.5vw, 4.8rem);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 850;
}

.page-kraken-eur .kraken-hero-lead {
  max-width: 620px;
  margin: 0 0 18px;
  color: #e4f3fb;
  font-size: clamp(1.04rem, 1.3vw, 1.22rem);
  line-height: 1.65;
}

.page-kraken-eur .kraken-hero-copy > p:not(.kraken-hero-lead) {
  max-width: 610px;
  margin: 0;
  color: #b9d1e1;
  line-height: 1.7;
}

.page-kraken-eur .kraken-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
}

.page-kraken-eur .kraken-hero-points span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 13px;
  color: #dff8ff;
  background: rgba(10, 88, 132, .36);
  border: 1px solid rgba(119, 218, 245, .25);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 750;
  backdrop-filter: blur(6px);
}

.page-kraken-eur .kraken-hero-visual {
  position: relative;
  z-index: 1;
  margin: 0;
  min-width: 0;
}

.page-kraken-eur .kraken-hero-visual::before {
  content: "";
  position: absolute;
  inset: 8% 5%;
  background: rgba(0, 183, 255, .16);
  border-radius: 50%;
  filter: blur(55px);
  z-index: -1;
}

.kraken-hero-picture {
  display: block;
  width: 100%;
}

.page-kraken-eur .kraken-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  border: 1px solid rgba(135, 220, 255, .20);
  box-shadow:
    0 30px 70px rgba(0, 18, 36, .36),
    0 0 45px rgba(0, 197, 255, .08);
}

/* Header + hero aansluiting gelijk aan Bitvavo */
@media (min-width: 901px) {
  body.page-kraken-eur .site-header .site-header-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: max(3.2vw, 34px) !important;
    padding-right: max(3.2vw, 34px) !important;
  }
}

.page-kraken-eur main.container {
  padding-top: 0 !important;
}

/* Tablet */
@media (max-width: 1050px) {
  .page-kraken-eur .kraken-hero {
    grid-template-columns: minmax(0, 1fr) minmax(400px, .95fr);
    gap: 30px;
  }
}

/* Mobile / small tablet */
@media (max-width: 850px) {
  .page-kraken-eur .kraken-hero {
    grid-template-columns: 1fr;
    padding: 42px 24px 32px;
  }

  .page-kraken-eur .kraken-hero-copy {
    max-width: 680px;
  }

  .page-kraken-eur .kraken-hero-visual {
    max-width: 760px;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .page-kraken-eur .kraken-hero {
    padding: 34px 20px 26px;
  }

  .page-kraken-eur .kraken-hero h1 {
    font-size: clamp(2.45rem, 12vw, 3.5rem);
  }

  .page-kraken-eur .kraken-hero-visual img {
    border-radius: 16px;
  }

  .page-kraken-eur .kraken-hero-points {
    gap: 7px;
  }
}

/* 20A.06A — Kraken EUR — full-width page shell */
body.page-kraken-eur main.container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}

/* =========================================================
   20A.06A — Kraken EUR — Waarom Kraken
   ========================================================= */

.page-kraken-eur .kraken-why {
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.18fr);
  gap: clamp(46px, 6vw, 88px);
  align-items: center;

  width: min(1180px, calc(100% - 96px));
  margin: 0 auto;
  padding: clamp(76px, 8vw, 112px) 0;
}

.page-kraken-eur .kraken-why-copy {
  min-width: 0;
}

.page-kraken-eur .kraken-section-kicker {
  margin: 0 0 14px;
  color: #087ca7;
  font-size: .72rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .16em;
}

.page-kraken-eur .kraken-why h2 {
  margin: 0 0 22px;
  color: #0a2033;
  font-size: clamp(2rem, 3vw, 3.15rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.page-kraken-eur .kraken-section-lead {
  margin: 0 0 18px;
  color: #29475d;
  font-size: clamp(1.02rem, 1.2vw, 1.14rem);
  line-height: 1.72;
}

.page-kraken-eur .kraken-why-copy > p:not(.kraken-section-kicker):not(.kraken-section-lead) {
  margin: 0 0 16px;
  color: #50697b;
  line-height: 1.75;
}

.page-kraken-eur .kraken-why-copy > p:last-child {
  margin-bottom: 0;
}

.page-kraken-eur .kraken-why-visual {
  margin: 0;
  min-width: 0;
}

.page-kraken-eur .kraken-why-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 24px 55px rgba(8, 34, 53, .13);
}

/* Tablet */
@media (max-width: 950px) {
  .page-kraken-eur .kraken-why {
    grid-template-columns: 1fr;
    width: min(760px, calc(100% - 48px));
    gap: 36px;
  }
}

/* Mobile */
@media (max-width: 560px) {
  .page-kraken-eur .kraken-why {
    width: calc(100% - 40px);
    padding: 58px 0;
    gap: 28px;
  }

  .page-kraken-eur .kraken-why-visual img {
    border-radius: 15px;
  }
}

/* =========================================================
   20A.06A — Kraken EUR — Welke marktinformatie
   ========================================================= */

.page-kraken-eur .kraken-market-info {
  display: grid;
  grid-template-columns: minmax(520px, 1.18fr) minmax(360px, .82fr);
  gap: clamp(46px, 6vw, 88px);
  align-items: center;

  width: min(1180px, calc(100% - 96px));
  margin: 0 auto;
  padding: clamp(76px, 8vw, 112px) 0;

  border-top: 1px solid rgba(16, 55, 78, .09);
}

.page-kraken-eur .kraken-market-info-copy {
  min-width: 0;
}

.page-kraken-eur .kraken-market-info h2 {
  margin: 0 0 22px;
  color: #0a2033;
  font-size: clamp(2rem, 3vw, 3.15rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.page-kraken-eur .kraken-market-info-copy > p:not(.kraken-section-kicker):not(.kraken-section-lead) {
  margin: 0 0 16px;
  color: #50697b;
  line-height: 1.75;
}

.page-kraken-eur .kraken-market-info-copy > p:last-child {
  margin-bottom: 0;
}

.page-kraken-eur .kraken-market-info-visual {
  margin: 0;
  min-width: 0;
}

.page-kraken-eur .kraken-market-info-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 24px 55px rgba(8, 34, 53, .13);
}

@media (max-width: 950px) {
  .page-kraken-eur .kraken-market-info {
    grid-template-columns: 1fr;
    width: min(760px, calc(100% - 48px));
    gap: 36px;
  }
}

@media (max-width: 560px) {
  .page-kraken-eur .kraken-market-info {
    width: calc(100% - 40px);
    padding: 58px 0;
    gap: 28px;
  }

  .page-kraken-eur .kraken-market-info-visual img {
    border-radius: 15px;
  }
}

/* 20A.06A — Kraken EUR — compactere sectie-overgang */
.page-kraken-eur .kraken-why {
  padding-bottom: clamp(44px, 5vw, 68px);
}

.page-kraken-eur .kraken-market-info {
  padding-top: clamp(44px, 5vw, 68px);
}

@media (max-width: 560px) {
  .page-kraken-eur .kraken-why {
    padding-bottom: 40px;
  }

  .page-kraken-eur .kraken-market-info {
    padding-top: 40px;
  }
}

/* Kraken — marktverschillen visual kleiner */
.page-kraken-eur .kraken-differences-visual {
  margin: 0;
  display: flex;
  justify-content: center;
}

.page-kraken-eur .kraken-differences-visual img {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  border-radius: 18px;
}

/* =========================================================
   20A.06A — Kraken EUR — Marktverschillen layout
   ========================================================= */

.page-kraken-eur .kraken-differences {
  display: grid;
  grid-template-columns: minmax(360px, .88fr) minmax(480px, 1.12fr);
  gap: clamp(46px, 6vw, 80px);
  align-items: center;

  width: min(1180px, calc(100% - 96px));
  margin: 0 auto;
  padding: clamp(52px, 6vw, 78px) 0;

  border-top: 1px solid rgba(16, 55, 78, .09);
}

.page-kraken-eur .kraken-differences-copy {
  min-width: 0;
}

.page-kraken-eur .kraken-differences h2 {
  margin: 0 0 22px;
  color: #0a2033;
  font-size: clamp(2rem, 3vw, 3.15rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.page-kraken-eur .kraken-differences-copy > p:not(.kraken-section-kicker):not(.kraken-section-lead) {
  margin: 0 0 16px;
  color: #50697b;
  line-height: 1.75;
}

.page-kraken-eur .kraken-differences-copy > p:last-child {
  margin-bottom: 0;
}

.page-kraken-eur .kraken-differences-visual {
  margin: 0;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.page-kraken-eur .kraken-differences-visual img {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 22px 48px rgba(8, 34, 53, .13);
}

@media (max-width: 950px) {
  .page-kraken-eur .kraken-differences {
    grid-template-columns: 1fr;
    width: min(760px, calc(100% - 48px));
    gap: 34px;
  }
}

@media (max-width: 560px) {
  .page-kraken-eur .kraken-differences {
    width: calc(100% - 40px);
    padding: 48px 0;
    gap: 26px;
  }
}

/* Kraken — compactere overgang marktinformatie -> marktverschillen */
.page-kraken-eur .kraken-market-info {
  padding-bottom: 42px;
}

.page-kraken-eur .kraken-differences {
  padding-top: 42px;
}

@media (max-width: 560px) {
  .page-kraken-eur .kraken-market-info {
    padding-bottom: 34px;
  }

  .page-kraken-eur .kraken-differences {
    padding-top: 34px;
  }
}

/* Kraken — definitief compactere overgang waarom -> marktinformatie */
.page-kraken-eur .kraken-why {
  padding-bottom: 30px;
}

.page-kraken-eur .kraken-market-info {
  padding-top: 30px;
}

@media (max-width: 560px) {
  .page-kraken-eur .kraken-why {
    padding-bottom: 26px;
  }

  .page-kraken-eur .kraken-market-info {
    padding-top: 26px;
  }
}

/* Kraken — onafhankelijk platform compact */
.page-kraken-eur .kraken-independent {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
  min-height: 0 !important;
}

@media (max-width: 560px) {
  .page-kraken-eur .kraken-independent {
    padding-top: 26px !important;
    padding-bottom: 26px !important;
  }
}

/* Kraken — onafhankelijk visual kleiner op website */
.page-kraken-eur .kraken-independent-visual {
  margin: 0;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.page-kraken-eur .kraken-independent-visual img {
  display: block;
  width: 100%;
  max-width: 620px !important;
  height: auto;
  border-radius: 18px;
}

/* Kraken — onafhankelijk platform definitieve layout */
.page-kraken-eur .kraken-independent {
  display: grid;
  grid-template-columns: minmax(360px, .88fr) minmax(480px, 1.12fr);
  gap: clamp(46px, 6vw, 80px);
  align-items: center;

  width: min(1180px, calc(100% - 96px));
  margin: 0 auto;
  padding: 42px 0 !important;
}

.page-kraken-eur .kraken-independent-copy {
  min-width: 0;
}

.page-kraken-eur .kraken-independent-visual {
  margin: 0;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.page-kraken-eur .kraken-independent-visual img {
  width: 100%;
  max-width: 620px !important;
  height: auto;
}

@media (max-width: 950px) {
  .page-kraken-eur .kraken-independent {
    grid-template-columns: 1fr;
    width: min(760px, calc(100% - 48px));
    gap: 30px;
  }
}

@media (max-width: 560px) {
  .page-kraken-eur .kraken-independent {
    width: calc(100% - 40px);
    padding: 32px 0 !important;
  }
}

/* Kraken — onafhankelijk visual definitief formaat */
.page-kraken-eur .kraken-independent {
  grid-template-columns: minmax(330px, .72fr) minmax(600px, 1.28fr);
}

.page-kraken-eur .kraken-independent-visual img {
  width: 100%;
  max-width: 760px !important;
}

/* Kraken — onafhankelijk plaatje groter */
.page-kraken-eur .kraken-independent-visual img {
  width: 125% !important;
  max-width: none !important;
  height: auto !important;
}

/* Kraken — independent visual gelijk aan overige visuals */
.page-kraken-eur .kraken-independent {
  grid-template-columns: minmax(360px, .88fr) minmax(480px, 1.12fr);
}

.page-kraken-eur .kraken-independent-visual img {
  width: 100%;
  max-width: 620px !important;
  height: auto;
}

/* Kraken — onafhankelijk sectie hoger aansluiten */
.page-kraken-eur .kraken-differences {
  padding-bottom: 20px !important;
}

.page-kraken-eur .kraken-independent {
  padding-top: 20px !important;
}

@media (max-width: 560px) {
  .page-kraken-eur .kraken-differences {
    padding-bottom: 18px !important;
  }

  .page-kraken-eur .kraken-independent {
    padding-top: 18px !important;
  }
}

/* Kraken — independent inhoud lager uitlijnen */
.page-kraken-eur .kraken-independent {
  padding-top: 55px !important;
}

.page-kraken-eur .kraken-independent-copy,
.page-kraken-eur .kraken-independent-visual {
  transform: translateY(30px);
}

/* Kraken — independent spacing definitieve correctie */
.page-kraken-eur .kraken-independent {
  padding-top: 20px !important;
  margin-top: 0 !important;
}

.page-kraken-eur .kraken-independent-copy,
.page-kraken-eur .kraken-independent-visual {
  transform: none !important;
}

/* 20A.06A — Kraken independent — visual uitlijnen met eerste tekstregel */
@media (min-width: 951px) {
  .page-kraken-eur .kraken-independent {
    align-items: start;
  }

  .page-kraken-eur .kraken-independent-visual {
    transform: translateY(118px) !important;
  }

  .page-kraken-eur .kraken-independent-copy {
    transform: none !important;
  }
}

/* Kraken — alleen kicker ONAFHANKELIJK lager */
@media (min-width: 951px) {
  .page-kraken-eur .kraken-independent .kraken-section-kicker {
    transform: translateY(30px) !important;
    margin-bottom: 30px !important;
  }
}

/* Kraken — ONAFHANKELIJK nog iets lager */
@media (min-width: 951px) {
  .page-kraken-eur .kraken-independent .kraken-section-kicker {
    transform: translateY(42px) !important;
    margin-bottom: 42px !important;
  }
}

/* Kraken — independent foto iets lager */
@media (min-width: 951px) {
  .page-kraken-eur .kraken-independent-visual {
    transform: translateY(135px) !important;
  }
}

/* 20A.06A — Kraken onafhankelijk visual — final micro alignment */
.page-kraken-eur .kraken-independent-visual {
  transform: translateY(-10px);
}


/* =========================================================
   20A.06A — Kraken EUR — MOBILE content order FIX
   Mobiel altijd: TEKST -> FOTO
   Desktop onaangetast
   ========================================================= */

@media (max-width: 850px) {

  /* Waarom Kraken */
  .page-kraken-eur .kraken-why {
    display: flex !important;
    flex-direction: column !important;
  }

  .page-kraken-eur .kraken-why-copy {
    order: 1 !important;
  }

  .page-kraken-eur .kraken-why-visual {
    order: 2 !important;
  }

  /* Welke marktinformatie */
  .page-kraken-eur .kraken-market-info {
    display: flex !important;
    flex-direction: column !important;
  }

  .page-kraken-eur .kraken-market-info-copy {
    order: 1 !important;
  }

  .page-kraken-eur .kraken-market-info-visual {
    order: 2 !important;
  }

  /* Marktverschillen */
  .page-kraken-eur .kraken-differences {
    display: flex !important;
    flex-direction: column !important;
  }

  .page-kraken-eur .kraken-differences-copy {
    order: 1 !important;
  }

  .page-kraken-eur .kraken-differences-visual {
    order: 2 !important;
  }

  /* Onafhankelijk platform */
  .page-kraken-eur .kraken-independent {
    display: flex !important;
    flex-direction: column !important;
  }

  .page-kraken-eur .kraken-independent-copy {
    order: 1 !important;
  }

  .page-kraken-eur .kraken-independent-visual {
    order: 2 !important;
    transform: none !important;
  }
}

/* Kraken onafhankelijk — desktop meer ruimte tussen visual en tekst */
@media (min-width: 851px) {
  .page-kraken-eur .kraken-independent {
    column-gap: 64px !important;
  }
}


/* 20A.06A — Kraken independent — horizontale ruimte */
@media (min-width: 851px) {
  .page-kraken-eur .kraken-independent {
    column-gap: 72px !important;
  }
}

/* Onafhankelijk visual exact dezelfde websitebreedte als Marktinformatie */
.page-kraken-eur .kraken-independent-visual img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}


/* Kraken — Onafhankelijk visual even groot als Marktinformatie */
@media (min-width: 851px) {
  .page-kraken-eur .kraken-independent {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .page-kraken-eur .kraken-independent-visual {
    width: 100% !important;
    max-width: 620px !important;
    justify-self: end !important;
  }

  .page-kraken-eur .kraken-independent-visual img {
    width: 100% !important;
    max-width: 620px !important;
    height: auto !important;
  }
}


/* Kraken — Onafhankelijk exact dezelfde visual sizing als Marktinformatie */
@media (min-width: 851px) {
  .page-kraken-eur .kraken-independent-visual {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  .page-kraken-eur .kraken-independent-visual img {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    display: block !important;
  }
}


/* Kraken onafhankelijk — visual even groot als Marktinformatie */
@media (min-width: 851px) {
  .page-kraken-eur .kraken-independent {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .page-kraken-eur .kraken-independent-visual {
    width: 100% !important;
    max-width: 620px !important;
    justify-self: center !important;
  }

  .page-kraken-eur .kraken-independent-visual img {
    width: 100% !important;
    max-width: 620px !important;
    height: auto !important;
  }
}


/* Kraken — Onafhankelijk exact dezelfde VISUAL kolombreedte als Marktinformatie */
@media (min-width: 951px) {
  .page-kraken-eur .kraken-independent {
    grid-template-columns: minmax(520px, 1.18fr) minmax(360px, .82fr) !important;
    gap: clamp(46px, 6vw, 88px) !important;
    width: min(1180px, calc(100% - 96px)) !important;
  }

  .page-kraken-eur .kraken-independent-visual {
    margin: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  .page-kraken-eur .kraken-independent-visual img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 55px rgba(8, 34, 53, .13) !important;
  }
}


/* Marktactiviteit hero — desktop tot aan de vouw */
@media (min-width: 901px) {
  body.page-kraken-eur .kraken-hero {
    min-height: calc(100vh - 92px);
    box-sizing: border-box;
  }
}


/* Hoe werkt het + Bitvavo EUR — desktop hero tot aan de vouw */
@media (min-width: 901px) {
  .page-how-it-works .how-hero,
  .page-bitvavo-eur .bitvavo-hero {
    min-height: calc(100vh - 92px);
    box-sizing: border-box;
  }
}


/* Home + Wat is MU — desktop hero tot aan de vouw */
@media (min-width: 901px) {
  .page-home .mu-hero.mu-hero-v2,
  .page-what-is-mu .mu-about-hero {
    min-height: calc(100vh - 92px);
    box-sizing: border-box;
  }
}


/* Marktactiviteit — Wat kan opvallen */
.page-kraken-eur .market-activity-stands-out {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
  padding: clamp(72px, 8vw, 120px) max(5vw, 48px);
}

.page-kraken-eur .market-activity-stands-out-copy {
  max-width: 650px;
}

.page-kraken-eur .market-activity-stands-out-copy h2 {
  margin-top: 0;
}

.page-kraken-eur .market-activity-stands-out-visual {
  margin: 0;
}

.page-kraken-eur .market-activity-stands-out-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
}

@media (max-width: 850px) {
  .page-kraken-eur .market-activity-stands-out {
    grid-template-columns: 1fr;
    padding: 56px 24px;
  }
}


/* Marktactiviteit — Context */
.page-kraken-eur .market-activity-context {
  display: grid;
  grid-template-columns: minmax(480px, 1.1fr) minmax(0, .9fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
  padding: clamp(72px, 8vw, 120px) max(5vw, 48px);
}

.page-kraken-eur .market-activity-context-copy {
  max-width: 650px;
}

.page-kraken-eur .market-activity-context-copy h2 {
  margin-top: 0;
}

.page-kraken-eur .market-activity-context-visual {
  margin: 0;
}

.page-kraken-eur .market-activity-context-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
}

@media (max-width: 850px) {
  .page-kraken-eur .market-activity-context {
    grid-template-columns: 1fr;
    padding: 56px 24px;
  }
}


/* Marktactiviteit — duidelijke scheiding tussen secties */
.page-kraken-eur .market-activity-context {
  margin-top: clamp(48px, 6vw, 90px);
}


/* Marktactiviteit — sectieafstand corrigeren */
.page-kraken-eur .market-activity-context {
  margin-top: 0;
}


/* Marktactiviteit — compactere overgang */
.page-kraken-eur .market-activity-stands-out {
  padding-bottom: 48px;
}

.page-kraken-eur .market-activity-context {
  padding-top: 48px;
}


.page-kraken-eur .market-activity-stands-out {
  padding-bottom: 32px;
}

.page-kraken-eur .market-activity-context {
  padding-top: 32px;
}


/* Marktactiviteit — Vroege en late marktactiviteit */
.page-kraken-eur .market-activity-phases {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
  padding: clamp(72px, 8vw, 120px) max(5vw, 48px);
}

.page-kraken-eur .market-activity-phases-copy {
  max-width: 650px;
}

.page-kraken-eur .market-activity-phases-copy h2 {
  margin-top: 0;
}

.page-kraken-eur .market-activity-phases-visual {
  margin: 0;
}

.page-kraken-eur .market-activity-phases-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
}

@media (max-width: 850px) {
  .page-kraken-eur .market-activity-phases {
    grid-template-columns: 1fr;
    padding: 56px 24px;
  }
}


/* Marktactiviteit — secties compacter */
.page-kraken-eur .market-activity-stands-out,
.page-kraken-eur .market-activity-context {
  padding-top: 48px;
  padding-bottom: 48px;
}


/* Marktactiviteit — witruimte verder terugbrengen */
.page-kraken-eur .market-activity-stands-out,
.page-kraken-eur .market-activity-context {
  padding-top: 24px;
  padding-bottom: 24px;
  margin-top: 0;
  margin-bottom: 0;
}


/* Marktactiviteit — overtollige verticale witruimte verwijderen */
.page-kraken-eur .market-activity-stands-out,
.page-kraken-eur .market-activity-context {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.page-kraken-eur .market-activity-stands-out {
  margin: 32px 0 !important;
}

.page-kraken-eur .market-activity-context {
  margin: 32px 0 !important;
}


/* Marktactiviteit — phases omhoog / witruimte uit oorspronkelijke instelling */
.page-kraken-eur .market-activity-phases {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  margin-top: 0 !important;
}


/* Marktactiviteit — Risico */
.page-kraken-eur .market-activity-risk {
  display: grid;
  grid-template-columns: minmax(480px, 1.1fr) minmax(0, .9fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
  padding: 24px max(5vw, 48px);
}

.page-kraken-eur .market-activity-risk-copy {
  max-width: 650px;
}

.page-kraken-eur .market-activity-risk-copy h2 {
  margin-top: 0;
}

.page-kraken-eur .market-activity-risk-visual {
  margin: 0;
}

.page-kraken-eur .market-activity-risk-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
}

@media (max-width: 850px) {
  .page-kraken-eur .market-activity-risk {
    grid-template-columns: 1fr;
    padding: 32px 24px;
  }
}


/* Marktactiviteit — mobiele sectievolgorde */
@media (max-width: 850px) {
  .page-kraken-eur .market-activity-stands-out,
  .page-kraken-eur .market-activity-context,
  .page-kraken-eur .market-activity-phases,
  .page-kraken-eur .market-activity-risk {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
    margin: 0 !important;
  }

  .page-kraken-eur .market-activity-stands-out-copy,
  .page-kraken-eur .market-activity-context-copy,
  .page-kraken-eur .market-activity-phases-copy,
  .page-kraken-eur .market-activity-risk-copy {
    order: 1;
    width: 100%;
  }

  .page-kraken-eur .market-activity-stands-out-visual,
  .page-kraken-eur .market-activity-context-visual,
  .page-kraken-eur .market-activity-phases-visual,
  .page-kraken-eur .market-activity-risk-visual {
    order: 2;
    width: 100%;
  }
}


/* Handelsplannen — hero */
.page-tradeplans .tradeplans-hero,
body:has(.tradeplans-hero) .tradeplans-hero {
  min-height: calc(100vh - 92px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: clamp(64px, 8vw, 120px) max(5vw, 48px);
}

.page-tradeplans .tradeplans-hero-copy,
body:has(.tradeplans-hero) .tradeplans-hero-copy {
  max-width: 760px;
}

.tradeplans-hero h1 {
  margin-top: 0;
}

.tradeplans-hero-lead {
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
}

.tradeplans-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.tradeplans-hero-points span {
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
}

@media (max-width: 850px) {
  .page-tradeplans .tradeplans-hero,
  body:has(.tradeplans-hero) .tradeplans-hero {
    min-height: auto;
    padding: 56px 24px;
  }
}


/* Handelsplannen — vaste hero zoals Marktactiviteit, zonder visual */
body:has(.tradeplans-hero) .tradeplans-hero {
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100vh - 92px) !important;
  margin: 0 !important;
  padding: clamp(64px, 8vw, 120px) max(5vw, 48px) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  background:
    radial-gradient(circle at 72% 65%, rgba(0, 153, 255, .28), transparent 42%),
    linear-gradient(135deg, #071522 0%, #0a2035 55%, #073b63 100%) !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body:has(.tradeplans-hero) main.container {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body:has(.tradeplans-hero) article.prose {
  width: 100% !important;
  max-width: none !important;
}

body:has(.tradeplans-hero) .tradeplans-hero-copy {
  width: min(720px, 100%) !important;
  max-width: 720px !important;
}

body:has(.tradeplans-hero) .tradeplans-hero h1,
body:has(.tradeplans-hero) .tradeplans-hero p {
  color: #fff !important;
}

@media (max-width: 850px) {
  body:has(.tradeplans-hero) .tradeplans-hero {
    min-height: auto !important;
    padding: 56px 24px !important;
  }
}


/* Handelsplannen — exact dezelfde hero-afmetingen als Marktactiviteit */
body:has(.tradeplans-hero) .tradeplans-hero {
  min-height: calc(100vh - 92px) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(64px, 7vw, 100px) max(5vw, 48px) !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
}

body:has(.tradeplans-hero) main.container,
body:has(.tradeplans-hero) article.prose {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(.tradeplans-hero) .tradeplans-hero-copy {
  width: 44% !important;
  max-width: 650px !important;
  margin: 0 !important;
}

body:has(.tradeplans-hero) .tradeplans-hero h1 {
  font-size: clamp(3rem, 4.6vw, 5.2rem) !important;
  line-height: .98 !important;
  margin: 0 0 28px !important;
}

@media (max-width: 850px) {
  body:has(.tradeplans-hero) .tradeplans-hero {
    min-height: auto !important;
    padding: 56px 24px !important;
  }

  body:has(.tradeplans-hero) .tradeplans-hero-copy {
    width: 100% !important;
    max-width: none !important;
  }

  body:has(.tradeplans-hero) .tradeplans-hero h1 {
    font-size: clamp(2.5rem, 12vw, 4rem) !important;
  }
}


/* =========================================================
   HANDELSPLANNEN — VISUELE OPBOUW
   Alleen styling. Bestaande tekst blijft volledig behouden.
   ========================================================= */

/* content onder hero */
body:has(.tradeplans-hero) .tradeplans-hero ~ h2,
body:has(.tradeplans-hero) .tradeplans-hero ~ p {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* hoofdstuktitels als duidelijke visuele balk */
body:has(.tradeplans-hero) .tradeplans-hero ~ h2 {
  position: relative;
  margin-top: 72px;
  margin-bottom: 24px;
  padding: 20px 26px 20px 34px;
  background: linear-gradient(90deg, #eef7fd 0%, #f8fbfd 72%, #ffffff 100%);
  border: 1px solid #d8e8f2;
  border-radius: 16px;
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  line-height: 1.15;
  overflow: hidden;
}

/* blauwe marker links */
body:has(.tradeplans-hero) .tradeplans-hero ~ h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: linear-gradient(180deg, #1595d3, #075b91);
}

/* tekstblokken ruimer maar compact */
body:has(.tradeplans-hero) .tradeplans-hero ~ p {
  line-height: 1.75;
}

/* eerste alinea onder iedere sectietitel iets sterker */
body:has(.tradeplans-hero) .tradeplans-hero ~ h2 + p {
  font-size: 1.06rem;
  color: #24394a;
}

/* TP1 / TP2 / TP3 — extra visuele koersdoelbalk */
body:has(.tradeplans-hero) h2:nth-of-type(2)::after {
  content: "TP1     →     TP2     →     TP3";
  display: block;
  width: fit-content;
  margin-top: 15px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #cfe2ee;
  color: #0876ad;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
}

/* Stop-loss */
body:has(.tradeplans-hero) h2:nth-of-type(3) {
  background: linear-gradient(90deg, #fff5f3 0%, #fffafa 72%, #ffffff 100%);
  border-color: #f0d8d3;
}

/* Break-even */
body:has(.tradeplans-hero) h2:nth-of-type(4) {
  background: linear-gradient(90deg, #f3f8fb 0%, #fafcfd 72%, #ffffff 100%);
}

/* Trailing */
body:has(.tradeplans-hero) h2:nth-of-type(5) {
  background: linear-gradient(90deg, #eef8f5 0%, #f8fcfa 72%, #ffffff 100%);
  border-color: #d6e9e2;
}

/* disclaimer-sectie duidelijk apart */
body:has(.tradeplans-hero) h2:nth-of-type(6) {
  margin-top: 84px;
  background: #f6f8fa;
  border-color: #e0e5e9;
}

/* FAQ-link als CTA */
body:has(.tradeplans-hero) .tradeplans-hero ~ p > a[href="/nl/veelgestelde-vragen/"] {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  margin-bottom: 72px;
  padding: 13px 20px;
  border-radius: 999px;
  background: #0879b6;
  color: #fff;
  font-weight: 750;
  text-decoration: none;
}

/* mobiel */
@media (max-width: 850px) {
  body:has(.tradeplans-hero) .tradeplans-hero ~ h2,
  body:has(.tradeplans-hero) .tradeplans-hero ~ p {
    margin-left: 24px;
    margin-right: 24px;
  }

  body:has(.tradeplans-hero) .tradeplans-hero ~ h2 {
    margin-top: 48px;
    padding: 17px 18px 17px 26px;
    border-radius: 14px;
  }

  body:has(.tradeplans-hero) h2:nth-of-type(2)::after {
    white-space: normal;
    line-height: 1.5;
  }
}


/* =========================================================
   HANDELSPLANNEN — DEFINITIEVE SPEELSE STRUCTUUR
   Geen tekstwijzigingen. Alleen bestaande HTML vormgeven.
   ========================================================= */

/* Pagina onder hero */
body:has(.tradeplans-hero) .tradeplan-block {
  width: min(1120px, calc(100% - 64px)) !important;
  margin: 28px auto !important;
  padding: 30px 34px !important;

  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) 180px !important;
  gap: 26px !important;
  align-items: center !important;

  background: #fff !important;
  border: 1px solid #dbe8f0 !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 32px rgba(16, 55, 82, .07) !important;
}

/* Nummerkolom */
body:has(.tradeplans-hero) .tradeplan-block-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  align-self: stretch !important;
}

body:has(.tradeplans-hero) .tradeplan-step {
  display: grid !important;
  place-items: center !important;
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
  border-radius: 50% !important;

  background: #dff2fc !important;
  color: #087db9 !important;
  font-size: 1.05rem !important;
  font-weight: 850 !important;
}

body:has(.tradeplans-hero) .tradeplan-line {
  width: 2px !important;
  flex: 1 !important;
  min-height: 50px !important;
  margin-top: 12px !important;
  background: linear-gradient(#22a9df, rgba(34,169,223,0)) !important;
}

/* Tekstkolom */
body:has(.tradeplans-hero) .tradeplan-block-content {
  min-width: 0 !important;
}

body:has(.tradeplans-hero) .tradeplan-block-content > h2 {
  margin: 0 0 14px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: clamp(1.65rem, 2.1vw, 2.15rem) !important;
  line-height: 1.1 !important;
}

body:has(.tradeplans-hero) .tradeplan-block-content > h2::before,
body:has(.tradeplans-hero) .tradeplan-block-content > h2::after {
  display: none !important;
}

body:has(.tradeplans-hero) .tradeplan-block-content > p {
  max-width: 760px !important;
  margin: 0 0 11px !important;
  line-height: 1.65 !important;
}

/* Rechter visuele informatietegel — puur CSS/tekst */
body:has(.tradeplans-hero) .tradeplan-block::after {
  display: grid !important;
  place-items: center !important;
  align-self: stretch !important;
  min-height: 130px !important;
  padding: 22px 16px !important;
  border-radius: 16px !important;

  text-align: center !important;
  white-space: pre-line !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
}

/* 01 Instapzone */
body:has(.tradeplans-hero) .tradeplan-entry {
  background: linear-gradient(110deg, #fff 60%, #f1f8fd) !important;
}

body:has(.tradeplans-hero) .tradeplan-entry::after {
  content: "INSTAPZONE\A\APrijsgebied\Amet context";
  background: #e9f5fc !important;
  color: #0878b4 !important;
}

/* 02 TP */
body:has(.tradeplans-hero) .tradeplan-targets {
  background: linear-gradient(110deg, #fff 60%, #eefaf6) !important;
}

body:has(.tradeplans-hero) .tradeplan-targets .tradeplan-step {
  background: #dcf6ed !important;
  color: #009c78 !important;
}

body:has(.tradeplans-hero) .tradeplan-targets::after {
  content: "TP1  ↑\A TP2  ↑\A TP3  ↑\A\AGefaseerd winst nemen";
  background: #e8f8f2 !important;
  color: #009879 !important;
}

/* 03 Stop-loss */
body:has(.tradeplans-hero) .tradeplan-stoploss {
  background: linear-gradient(110deg, #fff 60%, #fff1f3) !important;
}

body:has(.tradeplans-hero) .tradeplan-stoploss .tradeplan-step {
  background: #ffe1e5 !important;
  color: #e13c50 !important;
}

body:has(.tradeplans-hero) .tradeplan-stoploss::after {
  content: "SL\A\ARisico\Abegrenzen";
  background: #ffe9ec !important;
  color: #dc3b4f !important;
}

/* 04 Break-even */
body:has(.tradeplans-hero) .tradeplan-breakeven {
  background: linear-gradient(110deg, #fff 60%, #f4f1ff) !important;
}

body:has(.tradeplans-hero) .tradeplan-breakeven .tradeplan-step {
  background: #e9e4ff !important;
  color: #6750cf !important;
}

body:has(.tradeplans-hero) .tradeplan-breakeven::after {
  content: "BE\A\ABeschermen\Avan winst";
  background: #eeeaff !important;
  color: #644bd0 !important;
}

/* 05 Trailing */
body:has(.tradeplans-hero) .tradeplan-trailing {
  background: linear-gradient(110deg, #fff 60%, #edfafa) !important;
}

body:has(.tradeplans-hero) .tradeplan-trailing .tradeplan-step {
  background: #daf5f4 !important;
  color: #079ba2 !important;
}

body:has(.tradeplans-hero) .tradeplan-trailing::after {
  content: "TRAILING  ↗\A\AMeebewegen\Amet de trend";
  background: #e5f7f7 !important;
  color: #078f9b !important;
}

/* Disclaimer */
body:has(.tradeplans-hero) .tradeplan-disclaimer {
  width: min(1120px, calc(100% - 64px)) !important;
  margin: 38px auto 20px !important;
  padding: 24px 28px !important;

  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: center !important;

  background: #fff9eb !important;
  border: 1px solid #efd99a !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

body:has(.tradeplans-hero) .tradeplan-disclaimer-icon {
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: #e0a21b !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 1.3rem !important;
}

body:has(.tradeplans-hero) .tradeplan-disclaimer h2 {
  margin: 0 0 7px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  font-size: 1.35rem !important;
}

body:has(.tradeplans-hero) .tradeplan-disclaimer h2::before,
body:has(.tradeplans-hero) .tradeplan-disclaimer h2::after {
  display: none !important;
}

body:has(.tradeplans-hero) .tradeplan-disclaimer p {
  margin: 0 !important;
}

/* FAQ CTA centreren binnen dezelfde contentbreedte */
body:has(.tradeplans-hero) .tradeplan-disclaimer + p {
  width: min(1120px, calc(100% - 64px)) !important;
  margin: 18px auto 72px !important;
}

/* Mobiel */
@media (max-width: 850px) {

  body:has(.tradeplans-hero) .tradeplan-block {
    width: calc(100% - 32px) !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 16px !important;
    padding: 24px 20px !important;
    margin: 18px auto !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block::after {
    grid-column: 1 / -1 !important;
    min-height: auto !important;
    padding: 18px !important;
  }

  body:has(.tradeplans-hero) .tradeplan-step {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }

  body:has(.tradeplans-hero) .tradeplan-line {
    display: none !important;
  }

  body:has(.tradeplans-hero) .tradeplan-disclaimer,
  body:has(.tradeplans-hero) .tradeplan-disclaimer + p {
    width: calc(100% - 32px) !important;
  }

  body:has(.tradeplans-hero) .tradeplan-disclaimer {
    grid-template-columns: 1fr !important;
    padding: 22px !important;
  }
}


/* Handelsplannen — rechter statuskolom compacter en rustiger */
body:has(.tradeplans-hero) .tradeplan-block {
  grid-template-columns: 70px minmax(0, 1fr) 145px !important;
}

body:has(.tradeplans-hero) .tradeplan-block-side {
  width: 145px !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: center !important;

  padding: 18px 16px !important;
  border-radius: 14px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 7px !important;

  background: #f4f9fc !important;
  border: 1px solid #d7e8f1 !important;
  box-shadow: none !important;
}

body:has(.tradeplans-hero) .tradeplan-block-side strong,
body:has(.tradeplans-hero) .tradeplan-block-side b {
  font-size: .76rem !important;
  line-height: 1.15 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: #087db9 !important;
}

body:has(.tradeplans-hero) .tradeplan-block-side span,
body:has(.tradeplans-hero) .tradeplan-block-side p {
  margin: 0 !important;
  font-size: .9rem !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: #18384c !important;
}

/* Stop-loss: alleen subtiel rood accent */
body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(3) .tradeplan-block-side {
  background: #fff7f7 !important;
  border-color: #f0d7d9 !important;
}

body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(3) .tradeplan-block-side strong,
body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(3) .tradeplan-block-side b {
  color: #a83a48 !important;
}

@media (max-width: 850px) {
  body:has(.tradeplans-hero) .tradeplan-block {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block-side {
    grid-column: 2 !important;
    width: auto !important;
    max-width: 240px !important;
    margin-top: 8px !important;
  }
}


/* Handelsplannen — rechterkolom volledig verwijderen */
body:has(.tradeplans-hero) .tradeplan-block {
  grid-template-columns: 70px minmax(0, 1fr) !important;
  gap: 26px !important;
}

/* Bestaande rechtervakjes niet meer tonen */
body:has(.tradeplans-hero) .tradeplan-block-side {
  display: none !important;
}

/* Hoofdtekst krijgt volledige beschikbare breedte */
body:has(.tradeplans-hero) .tradeplan-block-content {
  width: 100% !important;
  max-width: none !important;
}

/* Nummerlijn iets subtieler */
body:has(.tradeplans-hero) .tradeplan-line {
  opacity: .55 !important;
}

/* Titels + compacte visuele accentbalk */
body:has(.tradeplans-hero) .tradeplan-block-content h2 {
  position: relative !important;
  display: inline-block !important;
  margin: 0 0 18px !important;
  padding-bottom: 11px !important;
}

body:has(.tradeplans-hero) .tradeplan-block-content h2::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 54px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #119bd3, #54d3ea) !important;
}

/* Stop-loss krijgt eigen risicoaccent */
body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(3)
.tradeplan-block-content h2::after {
  background: linear-gradient(90deg, #c65362, #ed9ca6) !important;
}

/* Iets meer ruimte voor de tekst, zonder lege rechterzijde */
body:has(.tradeplans-hero) .tradeplan-block-content p {
  max-width: 900px !important;
}

/* Mobiel */
@media (max-width: 850px) {
  body:has(.tradeplans-hero) .tradeplan-block {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 16px !important;
  }
}


/* Handelsplannen — rechter statuskolom terugzetten */
body:has(.tradeplans-hero) .tradeplan-block {
  grid-template-columns: 70px minmax(0, 1fr) 145px !important;
}

body:has(.tradeplans-hero) .tradeplan-block-side {
  display: flex !important;
  width: 145px !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: center !important;

  padding: 18px 16px !important;
  border-radius: 14px !important;

  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 7px !important;

  background: #f4f9fc !important;
  border: 1px solid #d7e8f1 !important;
  box-shadow: none !important;
}

body:has(.tradeplans-hero) .tradeplan-block-side strong,
body:has(.tradeplans-hero) .tradeplan-block-side b {
  font-size: .76rem !important;
  line-height: 1.15 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: #087db9 !important;
}

body:has(.tradeplans-hero) .tradeplan-block-side span,
body:has(.tradeplans-hero) .tradeplan-block-side p {
  margin: 0 !important;
  font-size: .9rem !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: #18384c !important;
}

/* Stop-loss subtiel rood accent */
body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(3) .tradeplan-block-side {
  background: #fff7f7 !important;
  border-color: #f0d7d9 !important;
}

body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(3) .tradeplan-block-side strong,
body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(3) .tradeplan-block-side b {
  color: #a83a48 !important;
}

/* Vorige titel-accenten weer uitzetten */
body:has(.tradeplans-hero) .tradeplan-block-content h2 {
  display: block !important;
  padding-bottom: 0 !important;
}

body:has(.tradeplans-hero) .tradeplan-block-content h2::after {
  display: none !important;
}

/* Mobiel */
@media (max-width: 850px) {
  body:has(.tradeplans-hero) .tradeplan-block {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block-side {
    grid-column: 2 !important;
    width: auto !important;
    max-width: 240px !important;
    margin-top: 8px !important;
  }
}


/* =========================================================
   HANDELSPLANNEN — 5 COMPACTE CSS-ZIJKAARTJES
   Bestaande tekst blijft volledig intact.
   ========================================================= */

body:has(.tradeplans-hero) .tradeplan-block {
  grid-template-columns: 70px minmax(0, 1fr) 190px !important;
  gap: 26px !important;
}

/* Rechterkaart opnieuw tonen */
body:has(.tradeplans-hero) .tradeplan-block-side {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;

  width: 190px !important;
  min-height: 94px !important;
  height: auto !important;
  padding: 16px !important;

  border-radius: 18px !important;
  border: 1px solid #d9eaf3 !important;
  background: linear-gradient(135deg, #f7fcff, #e8f6fc) !important;
  box-shadow: 0 8px 22px rgba(20,75,105,.06) !important;
}

/* Compact icoon — volledig CSS */
body:has(.tradeplans-hero) .tradeplan-block-side::before {
  content: "◎" !important;
  display: grid !important;
  place-items: center !important;

  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;

  background: rgba(17,155,211,.10) !important;
  color: #087db9 !important;

  font-size: 27px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

/* Tekst in kaart */
body:has(.tradeplans-hero) .tradeplan-block-side strong,
body:has(.tradeplans-hero) .tradeplan-block-side b {
  display: block !important;
  margin: 0 0 4px !important;

  font-size: .70rem !important;
  line-height: 1.15 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
  color: #087db9 !important;
}

body:has(.tradeplans-hero) .tradeplan-block-side span,
body:has(.tradeplans-hero) .tradeplan-block-side p {
  margin: 0 !important;
  font-size: .82rem !important;
  line-height: 1.28 !important;
  font-weight: 750 !important;
  color: #17384c !important;
}

/* 02 — TP1 / TP2 / TP3 */
body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(2) .tradeplan-block-side {
  background: linear-gradient(135deg, #f5fffc, #e2f8f2) !important;
  border-color: #d1eee5 !important;
}

body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(2) .tradeplan-block-side::before {
  content: "▥" !important;
  background: rgba(10,169,132,.10) !important;
  color: #079b79 !important;
}

body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(2) .tradeplan-block-side strong,
body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(2) .tradeplan-block-side b {
  color: #079b79 !important;
}

/* 03 — Stop-loss */
body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(3) .tradeplan-block-side {
  background: linear-gradient(135deg, #fffafa, #fdecef) !important;
  border-color: #f3d7dd !important;
}

body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(3) .tradeplan-block-side::before {
  content: "◇" !important;
  background: rgba(211,63,91,.10) !important;
  color: #c93655 !important;
}

body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(3) .tradeplan-block-side strong,
body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(3) .tradeplan-block-side b {
  color: #c93655 !important;
}

/* 04 — Break-even */
body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(4) .tradeplan-block-side {
  background: linear-gradient(135deg, #fbfaff, #efedff) !important;
  border-color: #e1def8 !important;
}

body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(4) .tradeplan-block-side::before {
  content: "≋" !important;
  background: rgba(92,70,210,.10) !important;
  color: #5744c7 !important;
}

body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(4) .tradeplan-block-side strong,
body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(4) .tradeplan-block-side b {
  color: #5744c7 !important;
}

/* 05 — Trailing */
body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(5) .tradeplan-block-side {
  background: linear-gradient(135deg, #f5fdff, #e3f7fa) !important;
  border-color: #d2edf1 !important;
}

body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(5) .tradeplan-block-side::before {
  content: "↗" !important;
  background: rgba(0,145,166,.10) !important;
  color: #008da1 !important;
}

body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(5) .tradeplan-block-side strong,
body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(5) .tradeplan-block-side b {
  color: #008da1 !important;
}

/* Mobiel: kaart compact onder de bestaande tekst */
@media (max-width: 850px) {
  body:has(.tradeplans-hero) .tradeplan-block {
    grid-template-columns: 46px minmax(0, 1fr) !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block-side {
    grid-column: 2 !important;
    width: min(100%, 260px) !important;
    min-height: 78px !important;
    margin-top: 8px !important;
  }
}


/* Handelsplannen — definitieve zijvisuals */
body:has(.tradeplans-hero) .tradeplan-block-side {
  width: 180px !important;
  height: 180px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: 0 10px 28px rgba(15, 64, 94, .10) !important;
}

body:has(.tradeplans-hero) .tradeplan-block-side img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 20px !important;
}

@media (max-width: 850px) {
  body:has(.tradeplans-hero) .tradeplan-block-side {
    width: 100% !important;
    height: auto !important;
    max-width: 260px !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block-side img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* Handelsplannen — vijf losse zijvisuals */
body:has(.tradeplans-hero) .tradeplan-block {
  grid-template-columns: 70px minmax(0, 1fr) 190px !important;
}

body:has(.tradeplans-hero) .tradeplan-block-side {
  width: 190px !important;
  height: 190px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: transparent !important;
  box-shadow: 0 10px 28px rgba(15, 64, 94, .10) !important;
  align-self: center !important;
}

body:has(.tradeplans-hero) .tradeplan-block-side img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 22px !important;
}

@media (max-width: 850px) {
  body:has(.tradeplans-hero) .tradeplan-block {
    grid-template-columns: 52px minmax(0, 1fr) !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block-side {
    grid-column: 2 !important;
    width: min(220px, 100%) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin-top: 18px !important;
  }
}


/* Handelsplannen — oude CSS-zijkaartjes definitief uitschakelen */
body:has(.tradeplans-hero) .tradeplan-block::after {
  content: none !important;
  display: none !important;
}


/* Handelsplannen — oude compacte CSS-kaart volledig neutraliseren */
body:has(.tradeplans-hero) .tradeplan-block-side::before {
  content: none !important;
  display: none !important;
}

body:has(.tradeplans-hero) .tradeplan-block-side {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  width: 190px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body:has(.tradeplans-hero) .tradeplan-block-side img {
  display: block !important;
  width: 190px !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(15,64,94,.10) !important;
}


/* Handelsplannen desktop — grotere visuals, witte beeldrand wegcroppen */
@media (min-width: 851px) {

  body:has(.tradeplans-hero) .tradeplan-block {
    grid-template-columns: 70px minmax(0, 1fr) 270px !important;
    gap: 32px !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block-side {
    width: 270px !important;
    height: 190px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block-side img {
    width: 125% !important;
    height: 125% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: translate(-10%, -10%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}


/* Handelsplannen — rechter visuals iets verder naar rechts */
@media (min-width: 851px) {
  body:has(.tradeplans-hero) .tradeplan-block-side {
    transform: translateX(28px) !important;
  }
}


/* Handelsplannen desktop — visuals passend binnen kaart */
@media (min-width: 851px) {

  body:has(.tradeplans-hero) .tradeplan-block {
    grid-template-columns: 70px minmax(0, 1fr) 250px !important;
    gap: 28px !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block-side {
    width: 250px !important;
    height: 150px !important;
    transform: none !important;
    justify-self: end !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block-side img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }
}


/* Handelsplannen — witte ruimte uit bronafbeeldingen wegcroppen */
@media (min-width: 851px) {
  body:has(.tradeplans-hero) .tradeplan-block-side {
    width: 270px !important;
    height: 125px !important;
    overflow: hidden !important;
    justify-self: end !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block-side img {
    width: 270px !important;
    height: 270px !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: translateY(-72px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* Handelsplannen — witte ruimte uit bronafbeeldingen wegcroppen */
@media (min-width: 851px) {
  body:has(.tradeplans-hero) .tradeplan-block-side {
    width: 270px !important;
    height: 125px !important;
    overflow: hidden !important;
    justify-self: end !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block-side img {
    width: 270px !important;
    height: 270px !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: translateY(-72px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* Handelsplannen desktop — visuals passend binnen kaart */
@media (min-width: 851px) {

  body:has(.tradeplans-hero) .tradeplan-block {
    grid-template-columns: 70px minmax(0, 1fr) 250px !important;
    gap: 28px !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block-side {
    width: 250px !important;
    height: 150px !important;
    transform: none !important;
    justify-self: end !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block-side img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }
}


/* Handelsplannen — alleen centrale kaart tonen, witte stroken boven/onder weg */
@media (min-width: 851px) {
  body:has(.tradeplans-hero) .tradeplan-block-side {
    width: 270px !important;
    height: 105px !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block-side img {
    width: 270px !important;
    height: auto !important;
    max-width: none !important;
    object-fit: initial !important;
    object-position: initial !important;
    transform: translateY(-82px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}
/* Handelsplannen — herstel volledige visuals */
@media (min-width: 851px) {
  body:has(.tradeplans-hero) .tradeplan-block-side {
    width: 250px !important;
    height: 150px !important;
    overflow: hidden !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block-side img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }
}

@media (min-width: 851px) {
  body:has(.tradeplans-hero) .tradeplan-block-side {
    width: 270px !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block-side img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* Handelsplannen — uitgesneden bronafbeeldingen volledig tonen */
@media (min-width: 851px) {
  body:has(.tradeplans-hero) .tradeplan-block-side {
    width: 270px !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    justify-self: end !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block-side img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* Handelsplannen — hero visual v1 */
body:has(.tradeplans-hero) .tradeplans-hero {
  justify-content: space-between !important;
  gap: clamp(40px, 5vw, 90px) !important;
}

body:has(.tradeplans-hero) .tradeplans-hero-visual {
  width: 48%;
  max-width: 820px;
  flex: 0 1 820px;
}

body:has(.tradeplans-hero) .tradeplans-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

@media (max-width: 850px) {
  body:has(.tradeplans-hero) .tradeplans-hero {
    flex-direction: column !important;
  }

  body:has(.tradeplans-hero) .tradeplans-hero-visual {
    width: 100%;
    max-width: 720px;
    flex: none;
  }
}

/* Handelsplannen hero — filled pills */
.tradeplans-hero-points span {
  background: rgba(5, 20, 34, .55);
  border: 1px solid rgba(185, 215, 229, .42);
  color: #ffffff;
  font-weight: 600;
}

/* Handelsplannen hero pills — gelijk aan Marktactiviteit */
.tradeplans-hero-points span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 13px;
  color: #dff8ff;
  background: rgba(10, 88, 132, .36);
  border: 1px solid rgba(119, 218, 245, .25);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 750;
  backdrop-filter: blur(6px);
}

/* Homepage hero — contextuele exchange-links */
.mu-hero-lead a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(185, 215, 229, .55);
  text-underline-offset: 3px;
}

.mu-hero-lead a:hover {
  color: #ffffff;
  text-decoration-color: currentColor;
}

/* =========================================================
   MU TRADE PLANS — VISUAL POLISH V1
   Alleen pagina's met .tradeplans-hero
   ========================================================= */

body:has(.tradeplans-hero) .tradeplan-block {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) 300px !important;
  align-items: center !important;
  gap: 34px !important;

  margin: 0 0 28px !important;
  padding: 34px 34px 34px 24px !important;

  background:
    radial-gradient(circle at 88% 50%, rgba(0,145,255,.10), transparent 34%),
    linear-gradient(135deg, rgba(246,251,255,.98), rgba(232,246,255,.92)) !important;

  border: 1px solid rgba(0,115,190,.16) !important;
  border-radius: 26px !important;

  box-shadow:
    0 18px 45px rgba(8,55,90,.09),
    inset 0 1px 0 rgba(255,255,255,.95) !important;

  overflow: hidden !important;
}

body:has(.tradeplans-hero) .tradeplan-block::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 5px !important;
  background: linear-gradient(180deg, #00c8ff, #1767ff) !important;
}

body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(3)::before {
  background: linear-gradient(180deg, #00d7c7, #1678ff) !important;
}

body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(4)::before {
  background: linear-gradient(180deg, #ff667d, #e52f54) !important;
}

body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(5)::before {
  background: linear-gradient(180deg, #638cff, #2458d9) !important;
}

body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(6)::before {
  background: linear-gradient(180deg, #27d9c5, #1594c8) !important;
}


/* Nummering */
body:has(.tradeplans-hero) .tradeplan-step {
  position: relative !important;
  align-self: start !important;
  justify-self: center !important;

  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin-top: 2px !important;

  border-radius: 18px !important;
  background: linear-gradient(145deg, #e5f8ff, #b9eaff) !important;
  border: 1px solid rgba(0,145,220,.22) !important;

  color: #075fa8 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;

  box-shadow:
    0 8px 20px rgba(0,110,190,.12),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

body:has(.tradeplans-hero) .tradeplan-block:nth-of-type(4) .tradeplan-step {
  background: linear-gradient(145deg, #fff0f3, #ffd5dc) !important;
  color: #c72d4b !important;
}


/* Tekstgedeelte */
body:has(.tradeplans-hero) .tradeplan-block-content {
  position: relative !important;
  min-width: 0 !important;
}

body:has(.tradeplans-hero) .tradeplan-block-content > h2 {
  margin: 0 0 14px !important;
  color: #08253b !important;
  font-size: clamp(1.45rem, 2vw, 2rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
}

body:has(.tradeplans-hero) .tradeplan-block-content > h2::before,
body:has(.tradeplans-hero) .tradeplan-block-content > h2::after {
  display: none !important;
}

body:has(.tradeplans-hero) .tradeplan-block-content > p {
  max-width: 720px !important;
  margin: 0 0 12px !important;

  color: #496579 !important;
  font-size: .98rem !important;
  line-height: 1.72 !important;
}

body:has(.tradeplans-hero) .tradeplan-block-content > p:last-child {
  margin-bottom: 0 !important;
}


/* Rechter visual */
body:has(.tradeplans-hero) .tradeplan-block-side {
  position: relative !important;

  width: 300px !important;
  height: 170px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 10px !important;

  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(220,243,255,.72)) !important;

  border: 1px solid rgba(0,125,205,.16) !important;
  border-radius: 20px !important;

  box-shadow:
    0 12px 30px rgba(8,65,105,.10),
    inset 0 1px 0 rgba(255,255,255,.95) !important;

  overflow: hidden !important;
}

body:has(.tradeplans-hero) .tradeplan-block-side::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;

  background:
    radial-gradient(circle at 20% 20%, rgba(0,198,255,.12), transparent 35%),
    radial-gradient(circle at 90% 80%, rgba(20,90,255,.10), transparent 40%) !important;

  pointer-events: none !important;
}

body:has(.tradeplans-hero) .tradeplan-block-side img {
  position: relative !important;
  z-index: 1 !important;

  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  object-fit: contain !important;
  object-position: center !important;

  transform: none !important;

  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}


/* Targets krijgt iets meer nadruk */
body:has(.tradeplans-hero) .tradeplan-targets {
  background:
    radial-gradient(circle at 90% 45%, rgba(0,206,186,.12), transparent 35%),
    linear-gradient(135deg, #f4fcff, #e7f8ff) !important;
}


/* Stop-loss */
body:has(.tradeplans-hero) .tradeplan-stoploss {
  background:
    radial-gradient(circle at 90% 45%, rgba(238,62,91,.10), transparent 35%),
    linear-gradient(135deg, #fffafa, #fff1f3) !important;
}


/* Break-even */
body:has(.tradeplans-hero) .tradeplan-breakeven {
  background:
    radial-gradient(circle at 90% 45%, rgba(60,100,230,.09), transparent 35%),
    linear-gradient(135deg, #f8fbff, #eef4ff) !important;
}


/* Trailing */
body:has(.tradeplans-hero) .tradeplan-trailing {
  background:
    radial-gradient(circle at 90% 45%, rgba(0,190,180,.10), transparent 35%),
    linear-gradient(135deg, #f4fffd, #e8faff) !important;
}


/* Disclaimer */
body:has(.tradeplans-hero) .tradeplan-disclaimer {
  margin-top: 42px !important;
  padding: 26px 30px !important;

  background: linear-gradient(135deg, #fffaf0, #fffdf8) !important;
  border: 1px solid rgba(188,135,35,.20) !important;
  border-radius: 20px !important;

  box-shadow: 0 10px 28px rgba(80,65,25,.06) !important;
}

body:has(.tradeplans-hero) .tradeplan-disclaimer h2 {
  color: #5f4a1f !important;
}

body:has(.tradeplans-hero) .tradeplan-disclaimer p {
  color: #71664e !important;
}


/* FAQ-link onderaan */
body:has(.tradeplans-hero) .tradeplan-disclaimer + p {
  margin-top: 22px !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */
@media (max-width: 850px) {

  body:has(.tradeplans-hero) .tradeplan-block {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: 24px 20px !important;
    border-radius: 21px !important;
  }

  body:has(.tradeplans-hero) .tradeplan-step {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 14px !important;
    font-size: .9rem !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block-content > h2 {
    font-size: 1.35rem !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block-content > p {
    font-size: .94rem !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block-side {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 145px !important;
    margin-top: 6px !important;
  }

  body:has(.tradeplans-hero) .tradeplan-block-side img {
    width: 100% !important;
    height: auto !important;
    max-height: 170px !important;
  }
}


/* Trade Plans — pagina horizontaal centreren */
body:has(.tradeplans-hero) main.container {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* Trade Plans — hero over volle contentbreedte */
body:has(.tradeplans-hero) .tradeplans-hero {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

body:has(.tradeplans-hero) .tradeplans-hero-copy {
  flex: 1 1 0 !important;
}

body:has(.tradeplans-hero) .tradeplans-hero-visual {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
}

body:has(.tradeplans-hero) .tradeplans-hero-visual img {
  width: 100% !important;
}


/* Trade Plans — full-width hero */
body:has(.tradeplans-hero) .tradeplans-hero {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: max(32px, calc((100vw - 1180px) / 2)) !important;
  padding-right: max(32px, calc((100vw - 1180px) / 2)) !important;
  box-sizing: border-box !important;
}


/* =========================================================
   EN TRADE PLANS — STRUCTURED OVERVIEW
   ========================================================= */

.tradeplan-overview {
  margin: 64px 0 48px;
  padding: 52px;
  background: #fff;
  border: 1px solid #dfe8ee;
  border-radius: 24px;
  box-shadow: 0 18px 55px rgba(20, 48, 66, 0.07);
}

.tradeplan-overview-heading {
  max-width: 720px;
  margin-bottom: 38px;
}

.tradeplan-overview-kicker {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  color: #2586a5;
}

.tradeplan-overview-heading h2 {
  margin: 0 0 12px;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.08;
  color: #17394b;
}

.tradeplan-overview-heading p {
  margin: 0;
  max-width: 650px;
  color: #5f7480;
  font-size: 17px;
  line-height: 1.65;
}

.tradeplan-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #dfe8ee;
  border-bottom: 1px solid #dfe8ee;
}

.tradeplan-overview-column {
  padding: 34px 38px 34px 0;
}

.tradeplan-overview-column + .tradeplan-overview-column {
  padding-left: 38px;
  padding-right: 0;
  border-left: 1px solid #dfe8ee;
}

.tradeplan-overview-column-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}

.tradeplan-overview-number {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  background: #eef7fa;
  color: #2586a5;
  font-weight: 800;
  font-size: 14px;
}

.tradeplan-overview-label {
  display: block;
  margin-bottom: 3px;
  color: #80919a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
}

.tradeplan-overview-column h3 {
  margin: 0;
  color: #17394b;
  font-size: 23px;
  line-height: 1.2;
}

.tradeplan-overview-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tradeplan-overview-list li {
  position: relative;
  margin: 0;
  padding: 15px 0 15px 26px;
  border-top: 1px solid #edf2f5;
}

.tradeplan-overview-list li:first-child {
  border-top: 0;
}

.tradeplan-overview-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 23px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b9cba;
  box-shadow: 0 0 0 4px #eaf5f8;
}

.tradeplan-overview-list strong {
  display: block;
  margin-bottom: 4px;
  color: #17394b;
  font-size: 16px;
}

.tradeplan-overview-list span {
  display: block;
  color: #647984;
  font-size: 14px;
  line-height: 1.55;
}

.tradeplan-overview-note {
  margin: 30px 0 0;
  padding-left: 18px;
  border-left: 3px solid #65b4ca;
  color: #536b77;
  font-size: 15px;
  line-height: 1.65;
}

@media (max-width: 760px) {
  .tradeplan-overview {
    margin: 42px 0 34px;
    padding: 30px 22px;
    border-radius: 18px;
  }

  .tradeplan-overview-grid {
    grid-template-columns: 1fr;
  }

  .tradeplan-overview-column,
  .tradeplan-overview-column + .tradeplan-overview-column {
    padding: 28px 0;
    border-left: 0;
  }

  .tradeplan-overview-column + .tradeplan-overview-column {
    border-top: 1px solid #dfe8ee;
  }
}


/* EN Trade Plans — detailed explanation */
.tradeplan-detail {
  margin-top: 46px;
  padding-top: 38px;
  border-top: 1px solid #dfe8ee;
}

.tradeplan-detail > h2 {
  margin: 0 0 28px;
  color: #17394b;
  font-size: clamp(26px, 2.5vw, 34px);
  line-height: 1.15;
}

.tradeplan-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.tradeplan-detail-grid > div {
  position: relative;
  padding: 28px 30px;
  background: #fbfdfe;
  border: 1px solid #e1e9ee;
  border-radius: 16px;
}

.tradeplan-detail-grid > div::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 0;
  width: 3px;
  height: 28px;
  border-radius: 0 3px 3px 0;
  background: #55a9c2;
}

.tradeplan-detail-grid h3 {
  margin: 0 0 14px;
  color: #17394b;
  font-size: 19px;
  line-height: 1.25;
}

.tradeplan-detail-grid p {
  margin: 0 0 13px;
  color: #5c717c;
  font-size: 14px;
  line-height: 1.7;
}

.tradeplan-detail-grid p:last-child {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .tradeplan-detail {
    margin-top: 34px;
    padding-top: 30px;
  }

  .tradeplan-detail-grid {
    grid-template-columns: 1fr;
  }

  .tradeplan-detail-grid > div {
    padding: 24px 22px;
  }
}


/* Trade Plans — bullet alignment fix */
.tradeplan-overview-list li {
  padding-left: 34px;
}

.tradeplan-overview-list li::before {
  left: 8px;
}


/* Trade Plans — definitive bullet spacing */
.tradeplan-overview-list li {
  padding-left: 42px !important;
}

.tradeplan-overview-list li::before {
  left: 14px !important;
  top: 23px;
}


/* EN TRADE PLANS — compact overview note */
.tradeplan-overview-note {
  margin: 24px 0 30px;
  padding: 10px 0 10px 18px;
  border-left: 3px solid #2586a5;
  font-size: 15px;
  line-height: 1.55;
  color: #5f7480;
  background: transparent;
}



/* EN TRADE PLANS — detail cards visual upgrade */
.tradeplan-detail-grid {
  gap: 22px;
  counter-reset: tradeplan-detail;
}

.tradeplan-detail-grid > div {
  counter-increment: tradeplan-detail;
  position: relative;
  overflow: hidden;
  padding: 32px 34px 34px;
  background: linear-gradient(145deg, #ffffff 0%, #f7fbfd 100%);
  border: 1px solid #d9e6ec;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(20, 48, 66, 0.055);
}

.tradeplan-detail-grid > div::before {
  top: 32px;
  left: 0;
  width: 4px;
  height: 34px;
  background: #2586a5;
}

.tradeplan-detail-grid > div::after {
  content: "0" counter(tradeplan-detail);
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 42px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgba(37, 134, 165, 0.10);
}

.tradeplan-detail-grid h3 {
  position: relative;
  z-index: 1;
  margin: 0 70px 18px 0;
  font-size: 21px;
  font-weight: 750;
  color: #17394b;
}

.tradeplan-detail-grid p {
  position: relative;
  z-index: 1;
  max-width: 94%;
  font-size: 14px;
  line-height: 1.72;
}

@media (max-width: 760px) {
  .tradeplan-detail-grid > div {
    padding: 28px 25px;
  }

  .tradeplan-detail-grid > div::after {
    top: 18px;
    right: 20px;
    font-size: 36px;
  }
}


/* EN TRADE PLANS — tighter premium detail cards */
.tradeplan-detail-grid > div {
  padding: 26px 30px 28px;
}

.tradeplan-detail-grid > div::before {
  top: 26px;
  height: 30px;
}

.tradeplan-detail-grid > div::after {
  top: 17px;
  right: 24px;
  font-size: 38px;
}

.tradeplan-detail-grid h3 {
  margin: 0 64px 13px 0;
}

.tradeplan-detail-grid p {
  max-width: 96%;
  line-height: 1.58;
  margin-bottom: 10px;
}

/* EN TRADE PLANS — detail section depth */
.tradeplan-detail {
  margin-top: 46px;
  padding: 38px 32px 32px;
  border-top: 0;
  border-radius: 22px;
  background: linear-gradient(145deg, #f5fafc 0%, #eef6f9 100%);
  border: 1px solid #dce8ed;
}

@media (max-width: 760px) {
  .tradeplan-detail {
    margin-top: 34px;
    padding: 30px 18px 18px;
  }
}

/* EN Trade Plans — compactere overgang naar detail */
.tradeplan-detail {
  margin-top: 24px !important;
}

/* Trade Plans — hero kleur gelijk aan Marktactiviteit */
body:has(.tradeplans-hero) .tradeplans-hero {
  background:
    radial-gradient(circle at 82% 35%, rgba(20,149,255,.18), transparent 31%),
    linear-gradient(135deg,#06131f 0%,#071b2a 58%,#09243a 100%) !important;
}

/* Trade Plans — hero visual iets groter */
body:has(.tradeplans-hero) .tradeplans-hero-copy {
  flex: .9 1 0 !important;
}

body:has(.tradeplans-hero) .tradeplans-hero-visual {
  flex: 1.1 1 0 !important;
}

/* Trade Plans — hero visual iets groter */
body:has(.tradeplans-hero) .tradeplans-hero-copy {
  flex: .9 1 0 !important;
}

body:has(.tradeplans-hero) .tradeplans-hero-visual {
  flex: 1.1 1 0 !important;
}

/* NL Trade Plans — hero visual visueel gelijk aan EN */
html[lang="nl"] body:has(.tradeplans-hero) .tradeplans-hero-visual img {
  width: 112% !important;
  max-width: none !important;
  margin-left: -6% !important;
}

/* =========================================================
   HERO BLUE TUNING — Marktactiviteit + Handelsplannen NL/EN
   ========================================================= */

/* Marktactiviteit hero — iets blauwer en levendiger */
body:has(.market-activity-stands-out) .kraken-hero {
  background:
    radial-gradient(circle at 72% 68%, rgba(0, 170, 255, .30), transparent 42%),
    linear-gradient(135deg, #06131f 0%, #071b2a 55%, #0a3a60 100%) !important;
}

body:has(.market-activity-stands-out) .kraken-hero .kraken-hero-visual::before {
  background: rgba(0, 183, 255, .20) !important;
  filter: blur(60px) !important;
}

/* Handelsplannen hero — NL + EN blauwer maken */
body:has(.tradeplans-hero) .tradeplans-hero {
  background:
    radial-gradient(circle at 72% 68%, rgba(0, 170, 255, .30), transparent 42%),
    linear-gradient(135deg, #06131f 0%, #071b2a 55%, #0a3a60 100%) !important;
}

body:has(.tradeplans-hero) .tradeplans-hero-visual::before {
  content: "";
  position: absolute;
  inset: 8% 5%;
  background: rgba(0, 183, 255, .20) !important;
  border-radius: 50%;
  filter: blur(60px) !important;
  z-index: -1;
}


/* Handelsplannen — tekstblok links gelijk aan Marktactiviteit */
@media (min-width: 901px) {
  body:has(.tradeplans-hero) .tradeplans-hero-copy {
    margin-left: calc(
      max(5vw, 48px) - max(32px, calc((100vw - 1180px) / 2))
    ) !important;
  }
}


/* =========================================================
   TRADE PLANS HERO ALIGNMENT — 2026-09-19
   Zelfde horizontale verdeling als Marktactiviteit.
   Alleen positie; afbeeldingsgrootte blijft onaangeraakt.
   ========================================================= */

@media (min-width: 901px) {

  body:has(.tradeplans-hero) .tradeplans-hero {
    padding-left: max(5vw, 48px) !important;
    padding-right: max(5vw, 48px) !important;
    gap: clamp(34px, 4.5vw, 72px) !important;
  }

  body:has(.tradeplans-hero) .tradeplans-hero-copy {
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 650px !important;
  }

  body:has(.tradeplans-hero) .tradeplans-hero-visual {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}


/* Wat is MU — hero afbeelding groter, positie rechts behouden */
@media (min-width: 901px) {
  .page-what-is-mu .mu-about-hero-image img {
    width: 120% !important;
    max-width: none !important;
    height: auto !important;
    margin-left: -20% !important;
  }
}


/* =========================================================
   HOW IT WORKS HERO — desktop alignment 2026-09-19
   Tekst links, visual rechts en groter — NL + EN
   ========================================================= */

@media (min-width: 901px) {

  .page-how-it-works .how-hero-grid {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;

    grid-template-columns: minmax(420px, .88fr) minmax(520px, 1.12fr) !important;
    gap: clamp(34px, 4.5vw, 72px) !important;

    padding-left: max(5vw, 48px) !important;
    padding-right: max(5vw, 48px) !important;

    align-items: center !important;
  }

  .page-how-it-works .how-hero-copy {
    width: 100% !important;
    max-width: 650px !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  .page-how-it-works .how-hero-visual {
    width: 118% !important;
    max-width: 760px !important;
    justify-self: end !important;

    margin: 0 !important;
    transform: none !important;
  }

  .page-how-it-works .how-hero-visual img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }
}



/* =========================================================
   HOW IT WORKS HERO POINTS — 2026-09-19
   Zelfde visuele taal als Marktactiviteit
   ========================================================= */

.page-how-it-works .how-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
}

.page-how-it-works .how-hero-points span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 13px;
  color: #dff8ff;
  background: rgba(10, 88, 132, .36);
  border: 1px solid rgba(119, 218, 245, .25);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 750;
  backdrop-filter: blur(6px);
}


/* HOW IT WORKS — hero inhoud verticaal centreren */
@media (min-width: 901px) {
  .page-how-it-works .how-hero {
    display: flex !important;
    align-items: center !important;
  }

  .page-how-it-works .how-hero-grid {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
}


.tradeplans-hero-picture,
.mu-about-hero-picture {
  display: block;
  width: 100%;
}


/* =========================================================
   MU CONSENT — 20A09
   First-party cookie consent / NL + EN
   ========================================================= */

.mu-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  padding: 18px;
  background: rgba(7, 16, 26, .98);
  border-top: 1px solid rgba(130, 218, 245, .22);
  box-shadow: 0 -18px 45px rgba(0, 0, 0, .32);
}

.mu-consent-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.mu-consent-copy {
  max-width: 760px;
}

.mu-consent-copy h2,
.mu-consent-dialog h2 {
  margin: 0 0 8px;
  color: #f5fbff;
  font-size: 1.1rem;
}

.mu-consent-copy p,
.mu-consent-dialog p {
  margin: 0;
  color: #bfd0dc;
  line-height: 1.55;
}

.mu-consent-copy a {
  color: #8fddf5;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mu-consent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 380px;
}

.mu-consent-btn,
.mu-consent-link {
  min-height: 42px;
  border-radius: 10px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.mu-consent-btn {
  padding: 9px 15px;
  color: #eaf8ff;
  background: #132735;
  border: 1px solid rgba(148, 218, 240, .28);
}

.mu-consent-btn-primary {
  color: #04131c;
  background: #8fddf5;
  border-color: #8fddf5;
}

.mu-consent-link {
  padding: 8px 10px;
  color: #9cdff4;
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mu-consent-btn:hover,
.mu-consent-link:hover {
  filter: brightness(1.08);
}

.mu-consent-btn:focus-visible,
.mu-consent-link:focus-visible,
.mu-consent-option input:focus-visible {
  outline: 3px solid #9fe7ff;
  outline-offset: 3px;
}

.mu-consent-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 8, 13, .76);
  backdrop-filter: blur(5px);
}

.mu-consent-modal[hidden] {
  display: none !important;
}

.mu-consent-dialog {
  width: min(680px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 26px;
  background: #0b1923;
  border: 1px solid rgba(139, 220, 245, .24);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

.mu-consent-option {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-top: 18px;
  padding: 18px 0;
  border-top: 1px solid rgba(147, 215, 236, .14);
}

.mu-consent-option strong {
  display: block;
  margin-bottom: 5px;
  color: #f0f9fd;
}

.mu-consent-option input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  accent-color: #8fddf5;
}

.mu-consent-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.mu-consent-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  .mu-consent-banner {
    padding: 16px;
  }

  .mu-consent-inner {
    display: block;
  }

  .mu-consent-actions {
    min-width: 0;
    margin-top: 16px;
    justify-content: stretch;
  }

  .mu-consent-actions .mu-consent-btn {
    flex: 1 1 100%;
  }

  .mu-consent-actions .mu-consent-link {
    width: 100%;
    text-align: center;
  }

  .mu-consent-dialog {
    padding: 20px;
  }
}

/* =========================================================
   MU CONSENT VISUAL EMPHASIS — 20A09-consent2
   Floating consent card / equal-choice presentation
   ========================================================= */

.mu-consent-banner {
  left: 24px;
  right: 24px;
  bottom: 24px;
  padding: 0;
  max-width: 1220px;
  margin: 0 auto;
  background:
    linear-gradient(
      135deg,
      rgba(7, 20, 31, .995),
      rgba(10, 27, 40, .995)
    );
  border: 1px solid rgba(113, 221, 255, .68);
  border-radius: 18px;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .58),
    0 0 0 1px rgba(77, 205, 244, .08),
    0 0 34px rgba(42, 201, 244, .13);
  backdrop-filter: blur(12px);
}

.mu-consent-inner {
  width: 100%;
  padding: 23px 26px;
  gap: 34px;
}

.mu-consent-copy {
  max-width: 690px;
}

.mu-consent-copy h2 {
  margin-bottom: 10px;
  font-size: 1.28rem;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.mu-consent-copy p {
  color: #d3e4ee;
  font-size: .97rem;
  line-height: 1.62;
}

.mu-consent-copy a {
  color: #a7eaff;
  font-weight: 700;
}

.mu-consent-actions {
  min-width: 430px;
  gap: 12px;
}

.mu-consent-actions .mu-consent-btn {
  min-height: 48px;
  padding: 11px 18px;
  border: 1px solid rgba(143, 221, 245, .82);
  background: rgba(143, 221, 245, .10);
  color: #eefaff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}

.mu-consent-actions .mu-consent-btn-primary {
  border-color: rgba(143, 221, 245, .95);
  background: rgba(143, 221, 245, .16);
  color: #f2fbff;
}

.mu-consent-actions .mu-consent-btn:hover,
.mu-consent-actions .mu-consent-btn-primary:hover {
  background: rgba(143, 221, 245, .23);
  border-color: #a9eaff;
  filter: none;
  transform: translateY(-1px);
}

.mu-consent-actions .mu-consent-link {
  min-height: 48px;
  padding: 11px 8px;
  font-weight: 750;
}

@media (max-width: 760px) {
  .mu-consent-banner {
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-height: calc(100vh - 20px);
    overflow: auto;
    border-radius: 16px;
  }

  .mu-consent-inner {
    padding: 19px 18px;
  }

  .mu-consent-copy h2 {
    font-size: 1.18rem;
  }

  .mu-consent-copy p {
    font-size: .94rem;
  }

  .mu-consent-actions {
    margin-top: 18px;
  }

  .mu-consent-actions .mu-consent-btn {
    min-height: 48px;
  }
}

/* =========================================================
   MU FAQ ACCORDION + SEARCH — 20A09-faq2
   ========================================================= */

.faq-search {
  margin: 2rem 0 2.5rem;
  padding: 1.25rem;
  border: 1px solid rgba(15, 35, 65, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.faq-search label {
  display: block;
  margin-bottom: 0.65rem;
  font-weight: 700;
}

.faq-search input[type="search"] {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(15, 35, 65, 0.22);
  border-radius: 10px;
  font: inherit;
  color: inherit;
  background: #fff;
}

.faq-search input[type="search"]:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.faq-search-status,
.faq-search-empty {
  margin: 0.75rem 0 0;
  font-size: 0.92rem;
}

.faq-section {
  margin: 2.5rem 0;
}

.faq-section > h2 {
  margin-bottom: 1rem;
}

.faq-item {
  margin: 0 0 0.75rem;
  border: 1px solid rgba(15, 35, 65, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

.faq-item summary {
  position: relative;
  padding: 1rem 3rem 1rem 1rem;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item[open] summary {
  border-bottom: 1px solid rgba(15, 35, 65, 0.12);
}

.faq-answer {
  padding: 1rem;
}

.faq-answer > :first-child {
  margin-top: 0;
}

.faq-answer > :last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .faq-search {
    margin: 1.5rem 0 2rem;
    padding: 1rem;
  }

  .faq-item summary {
    padding: 0.9rem 2.75rem 0.9rem 0.9rem;
  }

  .faq-answer {
    padding: 0.9rem;
  }
}


/* HOW — complete vertical six-step flow on mobile */
.page-how-it-works .how-flow-mobile{
  display:none;
}

@media (max-width:760px){
  .page-how-it-works .how-flow .how-wide-visual{
    display:none;
  }

  .page-how-it-works .how-flow-mobile{
    display:block;
    max-width:520px;
    margin:28px auto 0;
  }

  .page-how-it-works .how-flow-mobile-step{
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    gap:16px;
    align-items:start;
    padding:18px;
    background:#fff;
    border:1px solid #dce8ef;
    border-radius:16px;
    box-shadow:0 12px 30px rgba(8,37,57,.08);
  }

  .page-how-it-works .how-flow-mobile-number{
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    border-radius:50%;
    background:#078bff;
    color:#fff;
    font-size:1rem;
    font-weight:800;
  }

  .page-how-it-works .how-flow-mobile-step h3{
    margin:1px 0 6px;
    color:#102f43;
    font-size:1.08rem;
    line-height:1.2;
  }

  .page-how-it-works .how-flow-mobile-step p{
    margin:0;
    color:#526b7a;
    font-size:.94rem;
    line-height:1.5;
  }

  .page-how-it-works .how-flow-mobile-arrow{
    padding:6px 0;
    color:#078bff;
    text-align:center;
    font-size:1.35rem;
    font-weight:800;
    line-height:1;
  }
}

/* HOW — harmonised vertical spacing */
.page-how-it-works .how-flow{
  padding:32px 0 36px;
}

.page-how-it-works .how-section{
  padding:68px 0;
}

.page-how-it-works .how-deep-dive,
.page-how-it-works .how-control{
  padding:72px 0;
}

/* Eerste inhoudsblok direct na de zes stappen iets compacter */
.page-how-it-works .how-flow + .how-section{
  padding-top:48px;
}

@media (max-width:760px){
  .page-how-it-works .how-flow{
    padding:28px 0 32px;
  }

  .page-how-it-works .how-section,
  .page-how-it-works .how-deep-dive,
  .page-how-it-works .how-control{
    padding:48px 0;
  }

  .page-how-it-works .how-flow + .how-section{
    padding-top:44px;
  }
}

/* =========================================================
   20A17B06 NAV1 — MARKET ACTIVITY HUB NAVIGATION
   ========================================================= */

.site-nav-group {
  position: relative;
  flex: 0 0 auto;
}

.site-nav-group > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 7px 10px;
  color: rgba(255,255,255,.82);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: .94rem;
  font-weight: 560;
  white-space: nowrap;
  user-select: none;
}

.site-nav-group > summary::-webkit-details-marker {
  display: none;
}

.site-nav-group > summary:hover,
.site-nav-group > summary:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.08);
}

.site-nav-group.is-current > summary {
  color: #fff;
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.12);
  font-weight: 700;
}

.site-nav-chevron {
  font-size: .72em;
  transition: transform .18s ease;
}

.site-nav-group[open] .site-nav-chevron {
  transform: rotate(180deg);
}

.site-nav-submenu {
  display: none;
}

@media (min-width: 901px) {
  .site-nav-group[open] > .site-nav-submenu,
  .site-nav-group:hover > .site-nav-submenu,
  .site-nav-group:focus-within > .site-nav-submenu {
    display: grid;
  }

  .site-nav-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    min-width: 235px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: #122b3d;
    box-shadow: 0 14px 34px rgba(0,0,0,.24);
  }

  .site-nav .site-nav-submenu a {
    width: 100%;
    min-height: 38px;
    padding: 8px 11px;
    border-radius: 8px;
  }
}

@media (max-width: 900px) {
  .site-nav-group {
    display: flex;
    align-items: center;
  }

  .site-nav-group > summary {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 9px;
    font-size: .82rem;
  }

  .site-nav-group[open] > .site-nav-submenu {
    position: static;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
    margin-left: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .site-nav .site-nav-submenu a {
    min-height: 38px;
    padding: 0 12px !important;
    font-size: .82rem;
    background: rgba(255,255,255,.055);
  }
}

/* B06 NAV2 — desktop pointer always uses dropdown, never inline submenu */
@media (hover: hover) and (pointer: fine) {
  .site-header .site-nav {
    overflow: visible !important;
  }

  .site-nav-group {
    position: relative;
  }

  .site-nav-group[open] > .site-nav-submenu,
  .site-nav-group:hover > .site-nav-submenu {
    display: grid;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    min-width: 235px;
    margin: 0;
    padding: 8px;
    gap: 0;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: #122b3d;
    box-shadow: 0 14px 34px rgba(0,0,0,.24);
  }

  .site-nav-group:focus-within:not([open]):not(:hover) > .site-nav-submenu {
    display: none;
  }

  .site-nav .site-nav-submenu a {
    width: 100% !important;
    min-height: 38px;
    padding: 8px 11px !important;
    background: transparent;
  }
}

/* =========================================================
   B06 — Market Activity tool hub
   ========================================================= */

.page-kraken-eur .market-activity-tool-hub {
  width: 100%;
  box-sizing: border-box;
  margin: 24px 0 0;
  padding: 44px max(5vw, 48px) 56px;
  background: linear-gradient(
    135deg,
    rgba(17, 103, 139, .055),
    rgba(33, 169, 196, .025)
  );
  border-top: 1px solid rgba(20, 74, 98, .10);
}

.page-kraken-eur .market-activity-tool-hub-intro {
  max-width: 760px;
  margin-bottom: 28px;
}

.page-kraken-eur .market-activity-tool-hub-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: #168fb4;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .10em;
}

.page-kraken-eur .market-activity-tool-hub h2 {
  margin: 0;
}

.page-kraken-eur .market-activity-tool-hub-intro p {
  margin: 12px 0 0;
}

.page-kraken-eur .market-activity-tool-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
}

.page-kraken-eur .market-activity-tool-card {
  padding: clamp(24px, 3vw, 32px);
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(20, 74, 98, .12);
  border-radius: 18px;
}

.page-kraken-eur .market-activity-tool-card h3 {
  margin: 0 0 10px;
}

.page-kraken-eur .market-activity-tool-card p {
  margin: 0 0 18px;
}

.page-kraken-eur .market-activity-tool-card a {
  font-weight: 800;
  text-decoration: none;
}

.page-kraken-eur .market-activity-tool-card a:hover,
.page-kraken-eur .market-activity-tool-card a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 850px) {
  .page-kraken-eur .market-activity-tool-hub {
    padding: 36px 24px 42px;
  }

  .page-kraken-eur .market-activity-tool-hub-grid {
    grid-template-columns: 1fr;
  }

  .page-kraken-eur .market-activity-tool-card {
    padding: 22px;
  }
}

/* B06 — Home market activity actions */
.mu-market-activity-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .mu-market-activity-actions {
    width: 100%;
    justify-content: flex-start;
    gap: 14px 20px;
  }
}

/* =========================================================
   B06 SEO7 — Knowledge Base hub
   ========================================================= */

.knowledge-hub {
  width: 100%;
  max-width: none;
  margin: 0;
}

.knowledge-hub-hero {
  margin-bottom: 28px;
  padding: clamp(30px, 4vw, 48px);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 80% 20%, rgba(36,214,255,.15), transparent 28%),
    linear-gradient(180deg, rgba(3,22,47,.97), rgba(14,34,60,.95));
  color: #fff;
  box-shadow: var(--shadow-md);
}

.knowledge-hub-eyebrow,
.knowledge-card-label {
  display: block;
  margin-bottom: 8px;
  color: #168fb4;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .10em;
}

.knowledge-hub-hero .knowledge-hub-eyebrow {
  color: rgba(95,220,241,.95);
}

.knowledge-hub-hero h1 {
  max-width: 980px;
  margin: 0 0 16px;
  color: #fff;
}

.knowledge-hub-hero p {
  max-width: 950px;
  margin: 0;
  color: rgba(255,255,255,.84);
  font-size: 1.08rem;
  line-height: 1.72;
}

.knowledge-featured {
  margin-bottom: 28px;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(20,74,98,.12);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(17,103,139,.08), rgba(33,169,196,.03));
}

.knowledge-featured-copy {
  max-width: 1050px;
}

.knowledge-featured h2,
.knowledge-category h2,
.knowledge-platform h2 {
  margin: 0 0 12px;
  color: var(--mu-heading);
}

.knowledge-featured p,
.knowledge-category > p,
.knowledge-platform-intro p {
  margin: 0;
  line-height: 1.72;
}

.knowledge-featured-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 22px;
}

.knowledge-featured-links a {
  font-weight: 800;
  text-decoration: none;
}

.knowledge-featured-links a:hover,
.knowledge-featured-links a:focus-visible {
  text-decoration: underline;
}

.knowledge-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 34px);
}

.knowledge-category {
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid rgba(20,74,98,.12);
  border-radius: var(--radius-xl);
  background: var(--mu-surface);
}

.knowledge-link-list {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.knowledge-link-list a {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--mu-line);
  border-radius: var(--radius-lg);
  background: var(--mu-bg-soft);
  color: var(--mu-text);
  text-decoration: none;
}

.knowledge-link-list a:hover,
.knowledge-link-list a:focus-visible {
  border-color: rgba(22,143,180,.35);
  transform: translateY(-1px);
}

.knowledge-link-list strong {
  display: block;
  margin-bottom: 4px;
  color: var(--mu-heading);
}

.knowledge-link-list span {
  display: block;
  color: var(--mu-muted);
  line-height: 1.55;
}

.knowledge-platform {
  margin-top: 28px;
  padding: clamp(28px, 4vw, 40px);
  border-radius: var(--radius-xl);
  background: var(--mu-bg-soft);
  border: 1px solid var(--mu-line);
}

.knowledge-platform-intro {
  max-width: 820px;
  margin-bottom: 24px;
}

.knowledge-platform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.knowledge-platform-card {
  display: block;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--mu-surface);
  border: 1px solid var(--mu-line);
  color: var(--mu-text);
  text-decoration: none;
}

.knowledge-platform-card:hover,
.knowledge-platform-card:focus-visible {
  border-color: rgba(22,143,180,.35);
  transform: translateY(-1px);
}

.knowledge-platform-card strong {
  display: block;
  margin-bottom: 6px;
  color: var(--mu-heading);
}

.knowledge-platform-card span {
  display: block;
  color: var(--mu-muted);
  line-height: 1.55;
}

@media (max-width: 850px) {
  .knowledge-hub-grid,
  .knowledge-platform-grid {
    grid-template-columns: 1fr;
  }

  .knowledge-hub-hero,
  .knowledge-featured,
  .knowledge-category,
  .knowledge-platform {
    padding: 24px 20px;
  }
}

/* Post-B06 nav hotfix — vertical Market Activity dropdown on mobile */
@media (max-width: 900px) {
  .site-nav-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-nav-group[open] > .site-nav-submenu {
    display: grid;
    grid-template-columns: 1fr;
    width: 245px;
    max-width: calc(100vw - 32px);
    gap: 4px;
    margin: 6px 0 0;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: #122b3d;
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
  }

  .site-nav .site-nav-submenu a {
    width: 100%;
    min-height: 38px;
    padding: 8px 11px !important;
  }
}


/* 20.17C.08 — crawlable Market Activity hub explanation. */
.market-activity-guide {
  max-width: 920px;
  margin: 34px auto 8px;
  padding: 28px 30px;
  border: 1px solid #e2e8ed;
  border-radius: 14px;
  background: #fff;
}

.market-activity-guide h2 {
  margin: 0 0 14px;
}

.market-activity-guide h3 {
  margin: 24px 0 8px;
}

.market-activity-guide p {
  margin: 0 0 14px;
  line-height: 1.72;
}

.market-activity-guide a {
  font-weight: 750;
}

@media (max-width: 680px) {
  .market-activity-guide {
    margin-top: 24px;
    padding: 22px 18px;
  }
}