/* Shared homepage-style header. Keep selectors scoped to this component. */
.shared-header,.shared-header :not(svg,svg *){all:revert;box-sizing:border-box;letter-spacing:0}
.shared-header{--purple:#7144e8;--purple-dark:#5e32cb;--purple-soft:#f1ecfd;--ink:#1b1a21;--border:#e9e7ee;--shadow:0 20px 60px #29203f09;font:16px/normal Inter,'Segoe UI',Arial,sans-serif;color:var(--ink);position:sticky;top:0;background:#ffffffed;border-bottom:1px solid #efedf4;backdrop-filter:blur(16px);z-index:30}
.shared-header [hidden]{display:none!important}.shared-header a{color:inherit;text-decoration:none}.shared-header button{font:inherit;cursor:pointer}.shared-header a,.shared-header button{touch-action:manipulation}.shared-header a:focus-visible,.shared-header button:focus-visible{outline:3px solid #8d66e9;outline-offset:5px}
.shared-header .container{width:min(1200px,calc(100% - 80px));margin-inline:auto}.shared-header .nav-row{height:80px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.shared-header .brand{display:inline-flex;align-items:center;gap:10px;font:650 23px/normal Inter,'Segoe UI',Arial,sans-serif;white-space:nowrap}.shared-header .brand-symbol{width:36px;height:36px;flex-shrink:0;display:inline-grid;place-items:center;border-radius:7px;color:#fff;background:var(--purple);font:650 17px/22px Inter,'Segoe UI',Arial,sans-serif;padding:0;box-shadow:none}
.shared-header nav{display:flex;gap:24px;font-size:15px;color:#5b5766}.shared-header nav a:hover{color:var(--purple)}.shared-header .nav-actions{display:flex;align-items:center;gap:12px}
.shared-header .button{display:inline-flex;align-items:center;justify-content:center;gap:20px;border:1px solid var(--ink);border-radius:9px;background:var(--ink);padding:12px 17px;font-size:14px;font-weight:600;color:#fff;transition:background .2s,transform .2s;white-space:nowrap;box-shadow:none}.shared-header .button:hover{background:#3c344f;transform:translateY(-2px)}.shared-header .menu-toggle{display:none}
.shared-header .theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;min-width:76px;min-height:44px;padding:6px;border:1px solid #e9e7ee;border-radius:24px;background:#fff;color:#625970;cursor:pointer;font:inherit}.shared-header .theme-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.shared-header .theme-toggle-track{display:flex;align-items:center;width:28px;height:17px;padding:3px;border-radius:20px;background:#f1ecfd}.shared-header .theme-toggle-track::after{content:'';width:11px;height:11px;margin-left:auto;border-radius:50%;background:#7144e8}.shared-header .theme-toggle[aria-checked=true] .theme-toggle-track::after{margin-left:0}.shared-header .theme-toggle:focus-visible{outline:3px solid #9874ed;outline-offset:4px}
@media(max-width:1280px){.shared-header .nav-row{position:relative;gap:16px}.shared-header .nav-actions{margin-left:auto}.shared-header .menu-toggle{display:flex;align-items:center;gap:7px;order:3;padding:10px 0;background:none;border:0;font-size:13px}.shared-header .menu-toggle>span{font-size:18px}.shared-header #main-nav{display:none;position:absolute;left:0;right:0;top:calc(100% + 7px);background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:10px;gap:0}.shared-header #main-nav.open{display:flex;flex-direction:column;align-items:stretch}.shared-header #main-nav a{padding:13px 15px;font-size:15px;border-radius:7px}.shared-header #main-nav a:hover{background:var(--purple-soft)}}
@media(max-width:1100px){.shared-header .container{width:calc(100% - 56px)}.shared-header .button{padding:11px 13px;font-size:13px;gap:12px}.shared-header #main-nav{box-shadow:0 18px 40px #30213e10}}
@media(max-width:800px){.shared-header .nav-row{height:70px}.shared-header .brand{font-size:22px}.shared-header .brand-symbol{width:34px;height:34px;font-size:16px}.shared-header .button{font-size:12px;gap:10px}}
@media(max-width:580px){.shared-header .container{width:calc(100% - 36px)}.shared-header .nav-row{gap:8px;flex-wrap:wrap;height:auto;min-height:66px;padding-block:10px}.shared-header .brand{font-size:20px;gap:8px;flex-shrink:0}.shared-header .brand-symbol{width:31px;height:32px;font-size:15px;line-height:22px;border-radius:6px}.shared-header .theme-toggle{min-width:44px;width:44px;padding:6px}.shared-header .theme-toggle svg{display:none}.shared-header .nav-actions{gap:7px}.shared-header .nav-actions .button{font-size:10px;padding:9px 7px;gap:5px}.shared-header .menu-toggle{font-size:0;gap:0;min-width:24px}.shared-header .menu-toggle>span{font-size:20px}}
@media(max-width:360px){.shared-header .nav-row{gap:6px}.shared-header .nav-actions .button{min-width:0}.shared-header .nav-actions .button span{display:none}.shared-header .menu-toggle{padding-inline:0;justify-content:center}}
@media(min-width:1921px){.shared-header .container{width:min(1600px,62.5vw)}}
@media screen{html[data-theme=dark] .shared-header{--purple:#8051eb;--purple-dark:#a985ff;--purple-soft:#2b2241;--ink:#f3f1f8;--border:#36323f;--shadow:0 20px 60px #00000024;--theme-bg:#101016;--theme-panel:#202027;--theme-accent:#b49aff;background:#101016f5;border-color:var(--border)}html[data-theme=dark] .shared-header :is(nav,.menu-toggle){color:var(--ink)}html[data-theme=dark] .shared-header #main-nav{background:var(--theme-bg);border-color:var(--border)}html[data-theme=dark] .shared-header .theme-toggle{background:var(--theme-panel);border-color:var(--border);color:var(--theme-accent)}html[data-theme=dark] .shared-header .theme-toggle-track{background:var(--purple-soft)}html[data-theme=dark] .shared-header .theme-toggle-track::after{background:var(--theme-accent)}html[data-theme=dark] .shared-header .button{background:var(--ink);border-color:var(--ink);color:var(--theme-bg)}html[data-theme=dark] .shared-header #main-nav a:hover{background:var(--purple-soft);border-color:var(--theme-accent);color:var(--theme-accent)}}
@media(prefers-reduced-motion:reduce){.shared-header *{transition:none!important;animation:none!important}}
@media print{.shared-header{display:none!important}}

.shared-header #main-nav a[aria-current=page]{color:var(--purple);font-weight:650}
.shared-header .brand,.shared-header .brand-symbol{letter-spacing:0}

/* Shared ClickTrade mega menu */
.shared-header {
  --mega-surface: #fff;
  --mega-feature: #f7f6fa;
  --mega-muted: #625b6d;
  --mega-accent: #6233ce;
  --mega-panel-shadow: 0 12px 30px rgb(27 21 49 / 12%), 0 0 0 1px rgb(113 68 232 / 5%), 0 0 18px rgb(113 68 232 / 8%);
}
html[data-theme=dark] .shared-header {
  --mega-surface: #101016;
  --mega-feature: #202027;
  --mega-muted: #bdb6ca;
  --mega-accent: #b49aff;
  --mega-panel-shadow: 0 12px 30px rgb(0 0 0 / 32%), 0 0 0 1px rgb(180 154 255 / 10%), 0 0 18px rgb(180 154 255 / 12%);
}
.shared-header .nav-row { position: relative; }
.shared-header #main-nav { align-items: center; gap: 6px; }
.shared-header .mega-group { display: block; }
.shared-header .mega-group > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 7px;
  white-space: nowrap;
}
.shared-header .mega-group > summary { cursor: pointer; list-style: none; }
.shared-header .mega-group > summary::-webkit-details-marker { display: none; }
.shared-header .mega-group > summary::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.shared-header .mega-group[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.shared-header .mega-group > summary:hover,
.shared-header .mega-group[open] > summary { color: var(--mega-accent); background: var(--purple-soft); }
.shared-header .mega-group > summary:focus-visible { outline: 3px solid #8d66e9; outline-offset: 3px; }
.shared-header .mega-panel {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  top: calc(100% + 8px);
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  overscroll-behavior-y: auto;
  background: var(--mega-surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--mega-panel-shadow);
}
.shared-header .mega-intro {
  margin: 0;
  padding: 24px 28px 6px;
  font-size: 13px;
  color: var(--mega-muted);
}
.shared-header .mega-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  padding: 18px 28px 26px;
}
.shared-header .mega-label {
  margin: 0 0 12px;
  color: var(--mega-muted);
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
}
.shared-header #main-nav .mega-entry {
  display: block;
  min-height: 44px;
  padding: 12px 8px;
  border-radius: 6px;
  line-height: 1.5;
}
.shared-header #main-nav .mega-entry:hover,
.shared-header #main-nav .mega-case-card:hover { background: var(--purple-soft); }
.shared-header .mega-entry strong { display: block; font-size: 15px; font-weight: 650; }
.shared-header .mega-entry span { display: block; margin-top: 5px; color: var(--mega-muted); font-size: 13px; line-height: 1.6; }
.shared-header .mega-feature { padding: 22px; background: var(--mega-feature); border-radius: 7px; }
.shared-header .mega-feature .mega-label { color: var(--mega-accent); }
.shared-header .mega-title {
  margin: 0 0 12px;
  font: 700 var(--ct-card-title-size, 21px)/1.35 Manrope, Inter, sans-serif;
}
.shared-header .mega-description { margin: 0; color: var(--mega-muted); font-size: 14px; line-height: 1.6; }
.shared-header #main-nav .mega-feature-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 0;
  color: var(--mega-accent);
  font-size: 14px;
  font-weight: 650;
}
.shared-header .mega-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 8px 28px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-weight: 650;
}
.shared-header #main-nav .mega-footer a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 0; }
@media (max-width: 1280px) {
  .shared-header #main-nav { align-items: stretch; }
  .shared-header #main-nav.open { max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior-y: auto; }
  .shared-header .mega-group > summary { justify-content: space-between; }
  .shared-header .mega-panel { position: static; max-height: none; overflow: visible; margin: 4px 0 8px; }
}
@media (max-width: 680px) {
  .shared-header .mega-columns { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px 12px; }
  .shared-header .mega-intro { padding: 16px 12px 0; }
  .shared-header .mega-feature { padding: 16px; }
  .shared-header .mega-footer { padding-inline: 12px; }
}


/* Keep the blur outside the header's backdrop-filter stacking context. */
html.mega-menu-open::before {
  content: '';
  position: fixed;
  inset: var(--mega-backdrop-top, 80px) 0 0;
  z-index: 29;
  backdrop-filter: blur(4px);
}


/* Case studies in the shared menu */
.shared-header .mega-case-columns { grid-auto-rows: 1fr; }
.shared-header #main-nav .mega-case-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 8px;
  padding: 14px;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
}
.shared-header .mega-case-sector {
  margin-bottom: 6px;
  color: var(--mega-accent);
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
}
.shared-header .mega-case-title {
  font: 700 var(--ct-copy-size, 16px)/1.35 Manrope, Inter, sans-serif;
}
.shared-header .mega-case-description {
  color: var(--mega-muted);
  font-size: 13px;
  line-height: 1.6;
}
.shared-header .mega-case-action {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin-top: auto;
  padding-top: 12px;
  color: var(--mega-accent);
  font-size: 13px;
  font-weight: 650;
}
@media (max-width: 900px) {
  .shared-header .mega-case-columns { grid-template-columns: minmax(0, 1fr); }
  }


/* Decorative icons align with the first line of each menu link. */
.shared-header .mega-entry > strong:has(> .mega-entry-icon),
.shared-header .mega-case-title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.shared-header .mega-entry-icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: 0 0 16px;
  color: var(--mega-accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shared-header .mega-entry:has(.mega-entry-icon) > span { margin-inline-start: 24px; }