/* Site-level overrides applied on top of the theme stylesheet.
   Keep this file small — favor fixing the source classes when possible. */

/* ----------------------------------------------------------------
   Light mode — make alternating sections actually distinguishable.
   The original theme uses a very subtle radial gradient (rgba 0.05–
   0.06) that disappears against #f9fafb; users perceive every
   section as the same color while scrolling. Replace with a flat
   gray fill + hairline borders for a clear strip pattern.
   ---------------------------------------------------------------- */

body.fcp-body.fcp-theme-light {
  background: #ffffff;
}

body.fcp-body.fcp-theme-light .fcp-section--alt {
  background: #f3f4f6 !important;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

/* Make the hero's tinted background more visible in light mode too */
body.fcp-body.fcp-theme-light .fcp-hero {
  background:
    radial-gradient(circle at top left, rgba(37,99,235,0.10), transparent 55%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

/* The hero aside (dashboard sample) stays dark in light mode by default —
   keep the contrast but soften slightly so it doesn't overpower the page. */
body.fcp-body.fcp-theme-light .fcp-hero-aside {
  background: #0f172a;
  color: #f8fafc;
}
body.fcp-body.fcp-theme-light .fcp-hero-aside .fcp-stat-label,
body.fcp-body.fcp-theme-light .fcp-hero-aside .fcp-stat-value,
body.fcp-body.fcp-theme-light .fcp-hero-aside .fcp-chip {
  color: #f8fafc;
}

/* ----------------------------------------------------------------
   "Why FCP" scroll-track — vertical glowing line with numbered
   markers; the line fills as the user scrolls and the marker
   nearest viewport center lights up with accent.
   ---------------------------------------------------------------- */

.fcp-why-track {
  list-style: none;
  margin: 56px 0 0;
  padding: 0 0 0 88px;
  position: relative;
  --progress: 0%;
}

/* full-length dim track */
.fcp-why-track::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: rgba(148, 163, 184, 0.18);
  border-radius: 1px;
}

/* progress accent that fills via --progress */
.fcp-why-track::after {
  content: "";
  position: absolute;
  left: 29px;
  top: 8px;
  width: 4px;
  height: var(--progress);
  background: linear-gradient(180deg, #60a5fa 0%, #6366f1 50%, #818cf8 100%);
  box-shadow:
    0 0 16px rgba(96, 165, 250, 0.55),
    0 0 4px rgba(99, 102, 241, 0.8);
  border-radius: 2px;
  transition: height 200ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.fcp-why-item {
  position: relative;
  padding: 28px 0 28px 0;
  display: block;
  transition: transform 280ms ease;
}

.fcp-why-marker {
  position: absolute;
  left: -64px;
  top: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #0b1220;
  border: 2px solid rgba(148, 163, 184, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(226, 232, 240, 0.55);
  z-index: 1;
  transition:
    background 320ms ease,
    border-color 320ms ease,
    color 320ms ease,
    transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 320ms ease;
}

.fcp-why-item.is-active .fcp-why-marker {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  border-color: #93c5fd;
  color: #ffffff;
  transform: scale(1.12);
  box-shadow:
    0 0 0 6px rgba(59, 130, 246, 0.15),
    0 8px 28px rgba(59, 130, 246, 0.45);
}

.fcp-why-title {
  margin: 0 0 8px;
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(241, 245, 249, 0.92);
  transition: color 320ms ease;
}
.fcp-why-item.is-active .fcp-why-title {
  color: #bfdbfe;
}

.fcp-why-body p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(203, 213, 225, 0.78);
  max-width: 620px;
}

/* light mode */
body.fcp-theme-light .fcp-why-track::before {
  background: #e5e7eb;
}
body.fcp-theme-light .fcp-why-marker {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #475569;
}
body.fcp-theme-light .fcp-why-item.is-active .fcp-why-marker {
  color: #ffffff;
  border-color: #93c5fd;
  box-shadow:
    0 0 0 6px rgba(59, 130, 246, 0.12),
    0 8px 28px rgba(59, 130, 246, 0.30);
}
body.fcp-theme-light .fcp-why-title {
  color: #0f172a;
}
body.fcp-theme-light .fcp-why-item.is-active .fcp-why-title {
  color: #1d4ed8;
}
body.fcp-theme-light .fcp-why-body p {
  color: #334155;
}

/* mobile */
@media (max-width: 640px) {
  .fcp-why-track { padding-left: 64px; }
  .fcp-why-marker { left: -56px; width: 44px; height: 44px; font-size: 0.82rem; }
  .fcp-why-track::before, .fcp-why-track::after { left: 22px; }
  .fcp-why-track::after { left: 21px; }
  .fcp-why-title { font-size: 1.15rem; }
}

/* ----------------------------------------------------------------
   Suite section intro paragraph — span the FULL container, don't
   inherit the half-width constraint of .fcp-section-subtitle.
   ---------------------------------------------------------------- */

.fcp-suite-intro {
  margin: 16px 0 0;
  max-width: none;
  font-size: 1.05rem;
  line-height: 1.65;
  opacity: 0.82;
}
body.fcp-theme-light .fcp-suite-intro { color: #334155; opacity: 1; }

/* ----------------------------------------------------------------
   Suite carousel — auto-advancing horizontal track, snap-to-center,
   big cards with rich detail copy. Pause on hover; dots + arrows.
   ---------------------------------------------------------------- */

.fcp-suite-carousel {
  position: relative;
  margin: 48px 0 0;
}

.fcp-suite-viewport {
  overflow: hidden;
  margin: 0 -8px;
  padding: 8px;
}

.fcp-suite-track {
  display: flex;
  gap: 28px;
  transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.fcp-suite-card {
  flex: 0 0 70%;
  min-height: 240px;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.99));
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1.4rem;
  padding: 1.7rem 1.9rem 1.6rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0.42;
  transform: scale(0.96);
  transition: opacity 500ms ease, transform 500ms ease, border-color 320ms ease, box-shadow 320ms ease;
}

.fcp-suite-card.is-active {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(96, 165, 250, 0.42);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(96, 165, 250, 0.18) inset;
}

.fcp-suite-card-eyebrow {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #93c5fd;
  margin: 0 0 14px;
}

.fcp-suite-card-name {
  margin: 0 0 4px;
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.fcp-suite-card-status {
  display: inline-block;
  padding: 3px 12px;
  font-size: 0.74rem;
  font-weight: 500;
  font-family: ui-monospace, monospace;
  background: rgba(99, 102, 241, 0.20);
  color: #c7d2fe;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.fcp-suite-card-tagline {
  font-size: 0.95rem;
  margin: 0 0 12px;
  color: #cbd5e1;
}

.fcp-suite-card-summary {
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 14px;
  color: rgba(203, 213, 225, 0.85);
  flex: 1;
}

.fcp-suite-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #60a5fa;
  font-weight: 500;
  font-size: 0.95rem;
}
.fcp-suite-card-link::after {
  content: "→";
  transition: transform 200ms ease;
}
.fcp-suite-card:hover .fcp-suite-card-link::after { transform: translateX(6px); }

/* Controls row */
.fcp-suite-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}

.fcp-suite-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(15, 23, 42, 0.6);
  color: #cbd5e1;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
  padding: 0;
}
.fcp-suite-arrow:hover {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff;
  border-color: transparent;
  transform: scale(1.08);
}

.fcp-suite-dots {
  display: flex;
  gap: 9px;
}
.fcp-suite-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(148, 163, 184, 0.32);
  cursor: pointer;
  transition: all 250ms ease;
}
.fcp-suite-dot:hover { background: rgba(148, 163, 184, 0.55); }
.fcp-suite-dot.is-active {
  width: 32px;
  border-radius: 4px;
  background: linear-gradient(90deg, #3b82f6, #6366f1);
}

/* Light mode */
body.fcp-theme-light .fcp-suite-card {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
body.fcp-theme-light .fcp-suite-card.is-active {
  border-color: #93c5fd;
  box-shadow: 0 20px 50px rgba(37, 99, 235, 0.14), 0 0 0 1px rgba(37, 99, 235, 0.18) inset;
}
body.fcp-theme-light .fcp-suite-card-eyebrow { color: #2563eb; }
body.fcp-theme-light .fcp-suite-card-name { color: #0f172a; }
body.fcp-theme-light .fcp-suite-card-status { background: rgba(99, 102, 241, 0.12); color: #4338ca; }
body.fcp-theme-light .fcp-suite-card-tagline { color: #334155; }
body.fcp-theme-light .fcp-suite-card-summary { color: #4b5563; }
body.fcp-theme-light .fcp-suite-card-link { color: #2563eb; }
body.fcp-theme-light .fcp-suite-arrow {
  background: #ffffff;
  border-color: #d1d5db;
  color: #475569;
}
body.fcp-theme-light .fcp-suite-arrow:hover { color: #fff; border-color: transparent; }
body.fcp-theme-light .fcp-suite-dot { background: #cbd5e1; }

/* Mobile */
@media (max-width: 720px) {
  .fcp-suite-card { flex-basis: 88%; padding: 1.6rem 1.4rem; min-height: auto; }
  .fcp-suite-card-name { font-size: 1.4rem; }
}

/* ----------------------------------------------------------------
   Deploy "split panel" — two paths joined seamlessly with a glowing
   gradient halo behind. On hover the active side expands while the
   other shrinks (using :has()). Self-service gets blue + numbered
   steps; guided gets orange + checklist.
   ---------------------------------------------------------------- */

.fcp-deploy-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 40px;
  position: relative;
  border-radius: 1.6rem;
  transition: grid-template-columns 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fcp-deploy-split::before {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 2rem;
  background:
    radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.35), transparent 55%),
    radial-gradient(circle at 80% 50%, rgba(249, 115, 22, 0.30), transparent 55%);
  filter: blur(40px);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}

.fcp-deploy-split:has(.fcp-deploy-panel--self:hover) {
  grid-template-columns: 1.5fr 0.5fr;
}
.fcp-deploy-split:has(.fcp-deploy-panel--guided:hover) {
  grid-template-columns: 0.5fr 1.5fr;
}

.fcp-deploy-panel {
  position: relative;
  z-index: 1;
  background: rgba(15, 23, 42, 0.97);
  padding: 2.4rem 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(148, 163, 184, 0.18);
  transition:
    opacity 500ms ease,
    border-color 320ms ease,
    box-shadow 320ms ease,
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 420px;
  overflow: hidden;
}

.fcp-deploy-panel--self  { border-radius: 1.4rem 0.2rem 0.2rem 1.4rem; }
.fcp-deploy-panel--guided { border-radius: 0.2rem 1.4rem 1.4rem 0.2rem; }

.fcp-deploy-split:hover .fcp-deploy-panel { opacity: 0.55; }
.fcp-deploy-split .fcp-deploy-panel:hover {
  opacity: 1;
}
.fcp-deploy-panel--self:hover {
  border-color: rgba(96, 165, 250, 0.6);
  box-shadow: 0 22px 60px rgba(37, 99, 235, 0.30), inset 0 0 0 1px rgba(96, 165, 250, 0.18);
}
.fcp-deploy-panel--guided:hover {
  border-color: rgba(253, 186, 116, 0.6);
  box-shadow: 0 22px 60px rgba(249, 115, 22, 0.28), inset 0 0 0 1px rgba(253, 186, 116, 0.20);
}

.fcp-deploy-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #93c5fd;
  font-weight: 600;
}
.fcp-deploy-tag::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 10px #3b82f6;
}
.fcp-deploy-panel--guided .fcp-deploy-tag { color: #fdba74; }
.fcp-deploy-panel--guided .fcp-deploy-tag::before {
  background: #f97316; box-shadow: 0 0 10px #f97316;
}

.fcp-deploy-panel-title {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.18;
  color: #f1f5f9;
}

.fcp-deploy-steps,
.fcp-deploy-checklist {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.fcp-deploy-steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: rgba(203, 213, 225, 0.88);
  font-size: 0.96rem;
  line-height: 1.5;
}
.fcp-deploy-steps li > div { padding-top: 1px; }
.fcp-deploy-steps li strong { color: #f1f5f9; font-weight: 600; }
.fcp-deploy-steps li > span {
  font-family: ui-monospace, monospace;
  font-size: 0.74rem;
  font-weight: 600;
  background: rgba(59, 130, 246, 0.20);
  color: #93c5fd;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(96, 165, 250, 0.25);
}

.fcp-deploy-checklist li {
  position: relative;
  padding-left: 28px;
  color: rgba(203, 213, 225, 0.88);
  font-size: 0.96rem;
  line-height: 1.5;
}
.fcp-deploy-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0; top: -1px;
  color: #fdba74;
  font-weight: 700;
  font-size: 1.05rem;
}

.fcp-deploy-foot {
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  padding-top: 14px;
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.fcp-deploy-price {
  font-size: 0.84rem;
  opacity: 0.68;
  max-width: 280px;
}

.fcp-deploy-action {
  font-weight: 500;
  color: #60a5fa;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 200ms ease;
}
.fcp-deploy-action::after {
  content: "→";
  transition: transform 200ms ease;
}
.fcp-deploy-panel--guided .fcp-deploy-action { color: #fdba74; }
.fcp-deploy-panel:hover .fcp-deploy-action::after { transform: translateX(6px); }

/* Light mode */
body.fcp-theme-light .fcp-deploy-split::before { opacity: 0.30; }
body.fcp-theme-light .fcp-deploy-panel {
  background: #ffffff;
  border-color: #e5e7eb;
}
body.fcp-theme-light .fcp-deploy-panel-title { color: #0f172a; }
body.fcp-theme-light .fcp-deploy-steps li,
body.fcp-theme-light .fcp-deploy-checklist li { color: #334155; }
body.fcp-theme-light .fcp-deploy-steps li strong { color: #0f172a; }
body.fcp-theme-light .fcp-deploy-steps li > span {
  background: rgba(37, 99, 235, 0.10);
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.25);
}
body.fcp-theme-light .fcp-deploy-tag { color: #2563eb; }
body.fcp-theme-light .fcp-deploy-panel--guided .fcp-deploy-tag { color: #c2410c; }
body.fcp-theme-light .fcp-deploy-checklist li::before { color: #c2410c; }
body.fcp-theme-light .fcp-deploy-foot { border-top-color: #e5e7eb; }
body.fcp-theme-light .fcp-deploy-action { color: #2563eb; }
body.fcp-theme-light .fcp-deploy-panel--guided .fcp-deploy-action { color: #c2410c; }
body.fcp-theme-light .fcp-deploy-panel--self:hover {
  box-shadow: 0 18px 50px rgba(37, 99, 235, 0.18), inset 0 0 0 1px rgba(96, 165, 250, 0.30);
}
body.fcp-theme-light .fcp-deploy-panel--guided:hover {
  box-shadow: 0 18px 50px rgba(249, 115, 22, 0.18), inset 0 0 0 1px rgba(253, 186, 116, 0.40);
}

/* Mobile */
@media (max-width: 720px) {
  .fcp-deploy-split { grid-template-columns: 1fr; }
  .fcp-deploy-split:has(.fcp-deploy-panel:hover) { grid-template-columns: 1fr; }
  .fcp-deploy-panel--self,
  .fcp-deploy-panel--guided { border-radius: 1.4rem; min-height: auto; }
  .fcp-deploy-panel-title { font-size: 1.4rem; }
}

/* ----------------------------------------------------------------
   Dynamic CTA strip — spotlight follow-cursor, magnetic button,
   rotating live-stat badge with pulsing dot.
   ---------------------------------------------------------------- */

.fcp-cta-strip--dynamic {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --mx: 50%;
  --my: 50%;
}

/* spotlight overlay that follows the cursor */
.fcp-cta-strip--dynamic::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    520px circle at var(--mx) var(--my),
    rgba(147, 197, 253, 0.22),
    rgba(96, 165, 250, 0.10) 28%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 400ms ease;
}
.fcp-cta-strip--dynamic:hover::before { opacity: 1; }

/* keep content above spotlight */
.fcp-cta-strip-content,
.fcp-cta-strip-cta {
  position: relative;
  z-index: 1;
}

/* magnetic button smooth-pull transition */
.fcp-cta-magnet {
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease;
  will-change: transform;
}
.fcp-cta-strip--dynamic:hover .fcp-cta-magnet {
  box-shadow: 0 14px 36px rgba(59, 130, 246, 0.45), 0 0 0 1px rgba(147, 197, 253, 0.35) inset;
}

/* live-stat pill */
.fcp-cta-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 500;
  color: #bfdbfe;
  background: rgba(30, 58, 138, 0.30);
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-radius: 999px;
  padding: 5px 14px 5px 11px;
  margin-bottom: 12px;
  backdrop-filter: blur(8px);
}

.fcp-cta-stat-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 10px #3b82f6, 0 0 4px rgba(255,255,255,0.5);
  animation: fcpCtaPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes fcpCtaPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.72); opacity: 0.45; }
}

.fcp-cta-stat-sep { opacity: 0.55; }
.fcp-cta-stat-label { font-weight: 600; }

.fcp-cta-stat-value {
  display: inline-block;
  transition: opacity 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 1;
}

/* light mode tuning */
body.fcp-theme-light .fcp-cta-strip--dynamic::before {
  background: radial-gradient(
    520px circle at var(--mx) var(--my),
    rgba(37, 99, 235, 0.18),
    rgba(37, 99, 235, 0.08) 28%,
    transparent 60%
  );
}
body.fcp-theme-light .fcp-cta-stat {
  color: #1d4ed8;
  background: rgba(219, 234, 254, 0.85);
  border-color: rgba(37, 99, 235, 0.25);
}
body.fcp-theme-light .fcp-cta-stat-pulse {
  background: #2563eb;
  box-shadow: 0 0 10px #2563eb;
}

/* ----------------------------------------------------------------
   /products/ suite map — interactive radial diagram. Eyrie is the
   hub; 7 product nodes orbit it; SVG lines show data flow + shared
   infrastructure; hover/click highlights connections; detail panel
   on the right swaps via .is-active. Auto-cycles when idle.
   ---------------------------------------------------------------- */

.fcp-suite-page-intro {
  max-width: 820px;
  margin: 16px 0 0;
  font-size: 1.05rem;
  line-height: 1.65;
  opacity: 0.82;
}
body.fcp-theme-light .fcp-suite-page-intro { color: #334155; opacity: 1; }

.fcp-map {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 0;
  margin: 48px 0 0;
  align-items: stretch;
}

/* ---- left: canvas with SVG + nodes ---- */
.fcp-map-canvas {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1000 / 720;
  border-radius: 1.6rem;
  background:
    radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.18), transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(249, 115, 22, 0.10), transparent 55%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.99));
  border: 1px solid rgba(148, 163, 184, 0.18);
  overflow: hidden;
}

.fcp-map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fcp-map-line {
  stroke: rgba(148, 163, 184, 0.22);
  stroke-width: 1.5;
  fill: none;
  transition: stroke 320ms ease, stroke-width 320ms ease, opacity 320ms ease, filter 320ms ease;
}
.fcp-map-line--sub {
  stroke-dasharray: 4 5;
  opacity: 0.55;
}
.fcp-map-line.is-highlighted {
  stroke: url(#fcp-map-grad);
  stroke-width: 2.5;
  stroke-dasharray: 8 4;
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.65));
  animation: fcp-map-flow 1.4s linear infinite;
}
@keyframes fcp-map-flow {
  to { stroke-dashoffset: -24; }
}

.fcp-map-nodes {
  position: absolute;
  inset: 0;
}

.fcp-map-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  max-width: 28%;
  background: linear-gradient(145deg, #0b1220, #1e293b);
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 14px;
  padding: 10px 14px;
  color: #f1f5f9;
  cursor: pointer;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 1;
  transition:
    transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 320ms ease,
    box-shadow 320ms ease,
    background 320ms ease;
}

.fcp-map-node-name {
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.2;
}
.fcp-map-node-role {
  font-size: 0.7rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* status dot top-right */
.fcp-map-node::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
}
.fcp-map-node--soon::after {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.7);
  animation: fcp-map-pulse 2s ease-in-out infinite;
}
@keyframes fcp-map-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.6); opacity: 0.4; }
}

/* hub (Eyrie) */
.fcp-map-node--hub {
  background: linear-gradient(135deg, #1e3a8a, #3730a3);
  border-color: rgba(147, 197, 253, 0.48);
  padding: 16px 22px;
  box-shadow: 0 12px 36px rgba(59, 130, 246, 0.25);
}
.fcp-map-node--hub .fcp-map-node-name {
  font-size: 1.1rem;
}
.fcp-map-node--hub .fcp-map-node-role {
  color: #bfdbfe;
  opacity: 0.85;
}
.fcp-map-node--hub::after { display: none; }

/* hover / active */
.fcp-map-node:hover,
.fcp-map-node.is-active {
  transform: translate(-50%, -50%) scale(1.10);
  border-color: rgba(96, 165, 250, 0.85);
  box-shadow:
    0 0 0 5px rgba(96, 165, 250, 0.13),
    0 14px 36px rgba(59, 130, 246, 0.45);
  z-index: 2;
}

/* ---- right: detail panel ---- */
.fcp-map-detail {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.fcp-map-card {
  grid-area: 1 / 1;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.99));
  border: 1px solid rgba(96, 165, 250, 0.30);
  border-radius: 1.4rem;
  padding: 2rem 2rem 1.7rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 380ms ease,
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 380ms;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fcp-map-card.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 380ms ease,
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

.fcp-map-card-eyebrow {
  font-family: ui-monospace, monospace;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #93c5fd;
  margin: 0;
}
.fcp-map-card-name {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.fcp-map-card-status {
  display: inline-block;
  padding: 3px 12px;
  font-size: 0.72rem;
  font-weight: 500;
  font-family: ui-monospace, monospace;
  background: rgba(99, 102, 241, 0.20);
  color: #c7d2fe;
  border-radius: 999px;
}
.fcp-map-card-tagline {
  font-size: 0.98rem;
  color: #cbd5e1;
  margin: 0;
}
.fcp-map-card-summary {
  font-size: 0.93rem;
  line-height: 1.6;
  color: rgba(203, 213, 225, 0.85);
  margin: 6px 0 0;
}
.fcp-map-card-outcomes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.fcp-map-card-outcome {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: rgba(203, 213, 225, 0.88);
  line-height: 1.45;
}
.fcp-map-card-check {
  color: #60a5fa;
  font-weight: 700;
  flex-shrink: 0;
}
.fcp-map-card-link {
  margin-top: auto;
  align-self: flex-start;
  color: #60a5fa;
  font-weight: 500;
  text-decoration: none;
  font-size: 0.92rem;
  padding-top: 8px;
}
.fcp-map-card-link:hover { color: #93c5fd; }

/* ---- legend ---- */
.fcp-map-legend {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 36px auto 0;
  font-size: 0.84rem;
  opacity: 0.74;
}
.fcp-map-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.fcp-map-legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.fcp-map-legend-dot--live { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.6); }
.fcp-map-legend-dot--soon { background: #f59e0b; box-shadow: 0 0 8px rgba(245, 158, 11, 0.6); }
.fcp-map-legend-line {
  display: inline-block;
  width: 26px; height: 2px;
  background: linear-gradient(90deg, #60a5fa, #818cf8);
  border-radius: 1px;
}

/* ---- light mode ---- */
body.fcp-theme-light .fcp-map-canvas {
  background:
    radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.10), transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(249, 115, 22, 0.06), transparent 55%),
    #ffffff;
  border-color: #e5e7eb;
}
body.fcp-theme-light .fcp-map-line { stroke: rgba(100, 116, 139, 0.30); }
body.fcp-theme-light .fcp-map-node {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
body.fcp-theme-light .fcp-map-node--hub {
  background: linear-gradient(135deg, #2563eb, #6366f1);
  color: #ffffff;
  border-color: #93c5fd;
}
body.fcp-theme-light .fcp-map-node--hub .fcp-map-node-role { color: #dbeafe; }
body.fcp-theme-light .fcp-map-node-role { color: #475569; opacity: 0.8; }
body.fcp-theme-light .fcp-map-node:hover,
body.fcp-theme-light .fcp-map-node.is-active {
  box-shadow:
    0 0 0 5px rgba(37, 99, 235, 0.10),
    0 14px 36px rgba(37, 99, 235, 0.25);
}
body.fcp-theme-light .fcp-map-card {
  background: #ffffff;
  border-color: #93c5fd;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
body.fcp-theme-light .fcp-map-card-eyebrow { color: #2563eb; }
body.fcp-theme-light .fcp-map-card-name { color: #0f172a; }
body.fcp-theme-light .fcp-map-card-tagline { color: #334155; }
body.fcp-theme-light .fcp-map-card-summary { color: #4b5563; }
body.fcp-theme-light .fcp-map-card-outcome { color: #334155; }
body.fcp-theme-light .fcp-map-card-check { color: #2563eb; }
body.fcp-theme-light .fcp-map-card-link { color: #2563eb; }
body.fcp-theme-light .fcp-map-card-status { background: rgba(99, 102, 241, 0.12); color: #4338ca; }

/* ---- mobile: stack the panel below; nodes get tighter ---- */
@media (max-width: 920px) {
  .fcp-map { grid-template-columns: 1fr; gap: 20px; }
  .fcp-map-canvas { aspect-ratio: 1 / 1; }
  .fcp-map-node { padding: 7px 10px; }
  .fcp-map-node-name { font-size: 0.76rem; }
  .fcp-map-node-role { display: none; }
  .fcp-map-node--hub { padding: 10px 14px; }
  .fcp-map-node--hub .fcp-map-node-name { font-size: 0.88rem; }
}