/* Mobile: center the nav container, keep item text left */
@media (max-width: 780px) {
  .gh-org-nav {
    /* already column; center the column itself */
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }
  .gh-org-nav-item {
    /* keep content left-justified within each item */
    width: auto;
    justify-content: flex-start;
    text-align: left;
  }
  .gh-org-nav-item .gh-org-nav-count {
    /* neutralize right push to allow centering of the column */
    margin-left: 0;
  }
}
/* Pricing card actions spacing */
.price-card .actions {
  padding-top: 0.8rem; /* vertical padding above the actions button */
}
/* Container & header */
.section-why {
  padding-block: 3.5rem;
}

.section-why .section-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding-inline: 1.5rem;
}

.section-why .section-header {
  text-align: left;
  margin-bottom: 2rem;
}

.why-header {
  display: flex;
  align-items: center;   /* vertically centers h3 with icon */
  gap: 0.5rem;           /* space between icon and title */
}


.section-why #why-heading {
  font-size: 1.75rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.section-subhead {
  font-size: clamp(.95rem,1.15vw,1.05rem);
  color: #6b7280; /* muted grey, matches body tone */
  letter-spacing: .01em;
  margin: 0 0 1.1rem;
}

.section-why .section-subhead {
  margin-bottom: 0.35rem;
}

/* Grid layout */
.why-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Card styling */
.why-card {
  background-color: #ffffff;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Icon circle */
.why-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background-color: #eff6ff; /* soft blue */
  color: #1d4ed8;
  margin-bottom: 0.0rem;
}

/* Text inside card */
.why-title {
  font-size: 1.1rem;
  margin: 0;
}

.why-body {
  margin: 0.25rem 0 0.5rem 0;
  font-size: 0.95rem;
  color: #4b5563;
}

/* Bullet list */
.why-list {
  list-style: none;
  padding-left: 0;
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: #374151;
}

.why-list li {
  position: relative;
  padding-left: 1.2rem;
  margin-top: 0.25rem;
}

.why-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #9ca3af;
}

/* Optional: subtle hover to make it feel interactive */
@media (hover: hover) {
  .why-card {
    transition: transform 120ms ease-out, box-shadow 120ms ease-out, border-color 120ms ease-out;
  }

  .why-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
    border-color: #d1d5db;
  }
}
/* Subtle animation and highlight for marketing overlays */
.marketing-overlay {
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
  transform: scale(1);
  filter: brightness(100%);
  opacity: 0.92;
}

.marketing-overlay .gh-overlay-card {
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.marketing-overlay.active {
  transform: scale(1.05);
  filter: brightness(108%);
  z-index: 3;
}

.marketing-overlay.active .gh-overlay-card {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* Pain points list styling (replaces inline styles) */
.pain-points {
  margin: 0.8rem auto 0;
  max-width: 860px;
  text-align: center;
}
.pain-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pain-list li {
  margin: 0.4rem 0;
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
}
.pain-list li::before {
  content: "✕";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  margin-right: 0.5rem;
  border-radius: 999px;
  background: #fee2e2;
  color: #dc2626;
  font-weight: 700;
  font-size: 0.9rem;
}

@media (max-width: 780px) {
  /* Mobile: stack org nav items vertically for readability */
  .gh-org-nav {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
  }
  .gh-org-nav-item {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-start;
    padding: 10px 12px;
    box-sizing: border-box;
  }
  .gh-org-nav-item .gh-org-nav-count {
    margin-left: auto;
  }
  .pain-points {
    margin-top: 0.6rem;
    padding: 0 1rem;
    text-align: left; /* better readability on small screens */
    max-width: 680px;
  }
}
/* Halo layout for overlays around org header */
.pain-header-halo {
  position: relative;
  /* Full-bleed band across the viewport */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pain-header-halo .gh-org-header {
  position: relative;
  z-index: 2;
  margin: 0 auto;
}
.halo-overlay {
  width: 260px;
  max-width: 90vw;
  margin: 1.2rem auto;
  transition: box-shadow 0.2s;
  display: block;
}
.halo-overlay .gh-overlay-card {
  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.08);
  background: #fff;
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  font-size: 1rem;
  text-align: left;
}
.halo-overlay:hover .gh-overlay-card {
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.16);
}
@media (max-width: 900px) {
  .pain-header-halo {
    min-height: 520px;
  }
  .halo-overlay {
    width: 180px;
    font-size: 0.95rem;
    margin: 1rem auto;
  }
}
@media (max-width: 600px) {
  .pain-header-halo {
    min-height: 600px;
    flex-direction: column;
    align-items: stretch;
  }
  .halo-overlay {
    width: 100%;
    margin: 0.7rem 0;
  }
}
/* Ensure overlays and org header are equally distributed vertically */
.pain-header-flexcol {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  width: 100%;
  margin: 0 auto 2rem auto;
}

.pain-header-flexcol > .gh-overlay {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0;
}

.pain-header-flexcol > .gh-org-header {
  margin: 0;
}

@media (max-width: 700px) {
  .pain-header-flexcol {
    gap: 1.2rem;
  }
  .pain-header-flexcol > .gh-overlay {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
}
.gh-overlay.visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.gh-overlay-card {
  opacity: 1 !important;
  pointer-events: auto !important;
}
#pain-heading {
  display: block;
}
#pain {
  min-height: 520px;
}
.pain-header-wrapper {
  min-height: 320px;
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
}
/* Org nav icon styling */
.gh-nav-icon {
  margin-right: 0.35em;
  vertical-align: middle;
  display: inline-block;
}
/* Pain section center image */
#pain .pain-venn-five { position: relative; min-height: 520px; }
@media (max-width: 780px){ #pain .pain-venn-five { min-height: 480px; } }
@media (max-width: 480px){ #pain .pain-venn-five { min-height: 440px; } }
#pain .pain-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 200%; max-width: none; padding: 0; }
#pain .pain-center-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 12px rgba(0,0,0,.28)); }
@media (max-width: 780px){ #pain .pain-center { width: 220%; } }
@media (max-width: 480px){ #pain .pain-center { width: 240%; } }

/* Pain header wrapper */
#pain .pain-header-wrapper { max-width: 1000px; margin: 0 auto 1.2rem; padding: 0 8px; }

/* Desktop: widen org header content while staying centered */
@media (min-width: 1024px) {
  .pain-header-halo { padding: 1rem 0; }
  .pain-header-halo .gh-org-header { max-width: 1240px; }
}

/* GitHub-inspired org header */
.gh-org-header {
  background: #0b1120;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  padding: 1.25rem 1.5rem;
  color: #e5e7eb;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
  max-width: 970px; /* default on smaller screens */
  margin: 0 auto;
}
.gh-org-header-inner {
  width: 100%;
  overflow-x: auto;
}
.gh-org-header-inner { display: flex; flex-direction: column; gap: 1rem; }
.gh-org-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; }
.gh-org-identity { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.gh-org-avatar { width: 40px; height: 40px; border-radius: 50%; background: #0b1120; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; color: #e5e7eb; flex-shrink: 0; }
.gh-org-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.gh-org-handle { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.gh-org-name { font-weight: 600; font-size: 1rem; }
.gh-org-badge { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.15rem 0.45rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.7); color: #cbd5f5; }
.gh-org-tagline { margin: 0; font-size: 0.8rem; color: #9ca3af; }
.gh-org-meta { display: flex; align-items: flex-start; gap: 1.25rem; flex-wrap: wrap; margin-left: auto; }
.gh-org-stats { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.gh-org-stat { display: flex; flex-direction: column; gap: 0.1rem; min-width: 60px; }
.gh-org-stat-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; }
.gh-org-stat-value { font-size: 0.95rem; font-weight: 600; }
.gh-org-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.gh-btn { border-radius: 999px; border: 1px solid transparent; font-size: 0.8rem; padding: 0.4rem 0.85rem; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; transition: background 120ms ease, border-color 120ms ease, transform 80ms ease, box-shadow 80ms ease; }
.gh-btn-primary { background: #22c55e; color: #022c22; border-color: rgba(34, 197, 94, 0.9); box-shadow: 0 10px 25px rgba(22, 163, 74, 0.45); }
.gh-btn-primary:hover { background: #16a34a; transform: translateY(-1px); }
.gh-btn-secondary { background: transparent; color: #e5e7eb; border-color: rgba(148, 163, 184, 0.7); }
.gh-btn-secondary:hover { background: rgba(15, 23, 42, 0.9); }
.gh-org-bottom { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: 0.55rem; }
/* Divider below org nav */
.gh-org-divider {
  border: none;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  margin: 0 0 0 0;
}
.gh-org-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem; /* adjust spacing */
  overflow-x: auto;
}
.gh-org-nav-item {
  white-space: nowrap;
}
.gh-org-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.gh-org-nav-item { position: relative; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; padding: 0.35rem 0.7rem; border-radius: 999px; color: #9ca3af; text-decoration: none; border: 1px solid transparent; transition: color 120ms ease, background 120ms ease, border-color 120ms ease; }
.gh-org-nav-item .gh-org-nav-count { font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(31, 41, 55, 0.8); }
.gh-org-nav-item .gh-org-nav-count {
  color: #fff;
  background: rgba(190, 24, 24, 0.16);
  border-color: rgba(190, 24, 24, 0.45);
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.0);
  animation: ghCountFlicker 1.8s infinite ease-in-out;
}

@keyframes ghCountFlicker {
  0% { filter: brightness(1); opacity: 0.9; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.0); transform: scale(1); }
  8% { filter: brightness(1.15); opacity: 1; box-shadow: 0 0 12px 2px rgba(239, 68, 68, 0.25); transform: scale(1.02); }
  15% { filter: brightness(0.95); opacity: 0.88; box-shadow: 0 0 6px 1px rgba(239, 68, 68, 0.15); transform: scale(0.995); }
  27% { filter: brightness(1.12); opacity: 1; box-shadow: 0 0 14px 3px rgba(239, 68, 68, 0.28); transform: scale(1.015); }
  44% { filter: brightness(0.98); opacity: 0.92; box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.18); transform: scale(1); }
  60% { filter: brightness(1.1); opacity: 1; box-shadow: 0 0 12px 2px rgba(239, 68, 68, 0.25); transform: scale(1.01); }
  100% { filter: brightness(1); opacity: 0.9; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.0); transform: scale(1); }
}

/* Slightly out-of-phase per item */
.gh-org-nav .gh-org-nav-item:nth-child(1) .gh-org-nav-count { animation-delay: 0s; }
.gh-org-nav .gh-org-nav-item:nth-child(2) .gh-org-nav-count { animation-delay: 0.25s; }
.gh-org-nav .gh-org-nav-item:nth-child(3) .gh-org-nav-count { animation-delay: 0.5s; }
.gh-org-nav .gh-org-nav-item:nth-child(4) .gh-org-nav-count { animation-delay: 0.75s; }
.gh-org-nav .gh-org-nav-item:nth-child(5) .gh-org-nav-count { animation-delay: 1s; }
.gh-org-nav .gh-org-nav-item:nth-child(6) .gh-org-nav-count { animation-delay: 1.25s; }
.gh-org-nav .gh-org-nav-item:nth-child(7) .gh-org-nav-count { animation-delay: 1.5s; }
.gh-org-nav .gh-org-nav-item:nth-child(8) .gh-org-nav-count { animation-delay: 1.75s; }

/* Calm flicker on hover/focus to reduce distraction while interacting */
.gh-org-nav-item:hover .gh-org-nav-count,
.gh-org-nav-item:focus-within .gh-org-nav-count {
  animation-duration: 2.6s;
  box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.22);
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .gh-org-nav-item .gh-org-nav-count { animation: none; box-shadow: none; }
}
.gh-org-nav-item:hover { color: #e5e7eb; background: rgba(15, 23, 42, 0.8); border-color: rgba(55, 65, 81, 0.9); }
.gh-org-nav-item.is-active { color: #e5e7eb; background: rgba(15, 23, 42, 1); border-color: #38bdf8; }
.gh-org-search { margin-left: auto; min-width: 180px; flex: 1 1 180px; max-width: 260px; }
.gh-org-search-input { width: 100%; border-radius: 999px; border: 1px solid rgba(55, 65, 81, 0.9); background: rgba(15, 23, 42, 0.9); padding: 0.35rem 0.75rem; font-size: 0.8rem; color: #e5e7eb; }
.gh-org-search-input::placeholder { color: #6b7280; }
.gh-org-search-input:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.6); }
/* Amber warning flicker for Settings nav item */
.gh-org-nav-item[data-nav="settings"] {
  position: relative;
}
.gh-org-nav-item[data-nav="settings"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.0); /* amber glow */
  pointer-events: none;
}
.gh-org-nav-item[data-nav="settings"] {
  animation: ghNavAmberPulse 2.2s infinite ease-in-out;
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.08);
}
@keyframes ghNavAmberPulse {
  0%   { filter: brightness(1); transform: translateZ(0); }
  8%   { filter: brightness(1.05); }
  16%  { filter: brightness(0.98); }
  28%  { filter: brightness(1.08); }
  45%  { filter: brightness(1); }
  60%  { filter: brightness(1.06); }
  100% { filter: brightness(1); }
}
/* Enhance glow via pseudo-element to avoid layout jank */
.gh-org-nav-item[data-nav="settings"]::after {
  animation: ghNavAmberGlow 2.2s infinite ease-in-out;
}
@keyframes ghNavAmberGlow {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.0); }
  10%  { box-shadow: 0 0 12px 2px rgba(245, 158, 11, 0.22); }
  22%  { box-shadow: 0 0 6px 1px rgba(245, 158, 11, 0.14); }
  34%  { box-shadow: 0 0 14px 3px rgba(245, 158, 11, 0.26); }
  52%  { box-shadow: 0 0 8px 2px rgba(245, 158, 11, 0.18); }
  70%  { box-shadow: 0 0 12px 2px rgba(245, 158, 11, 0.22); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.0); }
}
/* Calm effect on hover/focus to reduce distraction */
.gh-org-nav-item[data-nav="settings"]:hover,
.gh-org-nav-item[data-nav="settings"]:focus-within {
  animation-duration: 3s;
}
.gh-org-nav-item[data-nav="settings"]:hover::after,
.gh-org-nav-item[data-nav="settings"]:focus-within::after {
  animation-duration: 3s;
}
@media (prefers-reduced-motion: reduce) {
  .gh-org-nav-item[data-nav="settings"],
  .gh-org-nav-item[data-nav="settings"]::after { animation: none; }
}
@media (max-width: 720px) {
  .gh-org-header { padding: 1rem 1rem; }
  .gh-org-meta { width: 100%; justify-content: space-between; }
  .gh-org-actions { margin-left: auto; }
}

/* Header overlays */
.gh-overlay { position: relative; }
.gh-overlay.visible .gh-overlay-card { opacity: 1; transform: translateY(0); pointer-events: auto; }
.gh-overlay-card { position: absolute; min-width: 240px; max-width: 320px; background: #0f141a; border: 1px solid rgba(148,163,184,.35); border-radius: 12px; box-shadow: 0 10px 24px -6px rgba(0,0,0,.55); padding: .75rem .85rem; color: #e5e7eb; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 5; }
.gh-overlay-title { margin: 0 0 .35rem; font: 700 .85rem/1.2 var(--font-sans); letter-spacing: .02em; color: #c7d2fe; }
.gh-overlay-body { margin: 0; font-size: .78rem; line-height: 1.35; color: #cbd5e1; }
/* Value section (Why Teams Choose Repod) */
#value .value-grid { display:grid; grid-template-columns:repeat(2,minmax(280px,1fr)); gap:1rem; align-items:stretch; }
@media (max-width: 780px){ #value .value-grid { grid-template-columns:1fr; gap:.9rem; } }
#value .value-card { display:flex; flex-direction:column; justify-content:space-between; padding:1rem 1.1rem; border-radius:12px; background:var(--card-bg, #101214); box-shadow: var(--card-shadow, 0 1px 3px rgba(0,0,0,.25)); border:1px solid var(--card-border, rgba(255,255,255,.06)); min-height:180px; }
#value .value-head { display:flex; align-items:center; gap:.6rem; margin:0 0 .5rem; }
#value .value-icon { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background:var(--icon-bg, rgba(124,114,255,.12)); color:var(--color-accent, #7c72ff); flex:0 0 28px; }
#value .value-card h3 { margin:0; font-size:1rem; font-weight:700; line-height:1.3; }
#value .value-card p { margin:.25rem 0 .6rem; font-size:.92rem; line-height:1.45; color:var(--color-text); }
#value .value-points { margin:.2rem 0 0; padding:0; list-style:none; font-size:.9rem; color:var(--color-text-dim); }
#value .value-points li { display:flex; align-items:baseline; gap:.4rem; margin:.2rem 0; }
#value .value-points svg { flex:0 0 12px; color:var(--color-accent, #7c72ff); }
#value .metric { margin-top:.6rem; font-size:.8rem; color:var(--color-text-dim); }

/* Mobile spacing tweaks for small screens */
@media (max-width: 480px){
  #value .value-card { padding:.9rem 1rem; min-height: 170px; }
  #value .value-head { gap:.5rem; margin:0 0 .45rem; }
  #value .value-icon { width:26px; height:26px; border-radius:7px; }
  #value .value-card h3 { font-size:.98rem; }
  #value .value-card p { font-size:.9rem; margin:.2rem 0 .5rem; line-height:1.45; }
  #value .value-points { font-size:.88rem; }
  #value .value-points li { margin:.16rem 0; }
}
.sr-only { 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; }
/* Five-ellipse distributed diagram: centers on small inner circle */
.pain-venn-five { position:relative; max-width:540px; margin:1.6rem auto 2.3rem; aspect-ratio:1 / 1; }
.pain-venn-five .circle {
  position:absolute;
  width:78%; height:34%; border-radius:50%;
  opacity:.72;
  mix-blend-mode:multiply;
  transition:transform .45s ease, opacity .45s ease;
  background:transparent;
  /* JS will set left/top for center positioning */
  transform:rotate(var(--rot,0deg));
}
/* Per-ellipse rotation + colors */
.pain-venn-five .circle.fragmentation { --rot:90deg;   border:2px solid rgba(79,70,229,.85);  background-color:rgba(79,70,229,.12); }
.pain-venn-five .circle.exposure     { --rot:72deg;  border:2px solid rgba(236,72,153,.85); background-color:rgba(236,72,153,.12); }
.pain-venn-five .circle.visibility    { --rot:144deg; border:2px solid rgba(124,58,237,.85); background-color:rgba(124,58,237,.12); }
.pain-venn-five .circle.audit         { --rot:216deg; border:2px solid rgba(14,165,233,.85);  background-color:rgba(14,165,233,.12); }
.pain-venn-five .circle.fatigue       { --rot:288deg; border:2px solid rgba(234,179,8,.85);   background-color:rgba(234,179,8,.12); }
.pain-venn-five .center-solution { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:140px; height:140px; border-radius:50%; background:linear-gradient(135deg,#ffffff,#f5f8ff); box-shadow:0 8px 26px -10px rgba(0,0,0,.35), 0 0 0 1px rgba(79,70,229,.35); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; text-align:center; padding:.7rem .75rem; }
.center-solution .logo { font:700 .8rem/1 var(--font-sans); letter-spacing:.18em; text-transform:uppercase; background:linear-gradient(90deg,#4f46e5,#7c3aed 55%,#ec4899); -webkit-background-clip:text; background-clip:text; color:transparent; }
.center-solution .tag { font:600 .65rem/1.2 var(--font-sans); color:#64748b; }
[data-theme="dark"] .pain-venn-five .circle { filter:brightness(1.08); }
[data-theme="dark"] .pain-venn-five .center-solution { background:linear-gradient(135deg,#0f141a,#1b2531); box-shadow:0 8px 26px -10px rgba(0,0,0,.7), 0 0 0 1px rgba(124,58,237,.5); }
.pain-points { display:grid; gap:.65rem; margin:0 0 1.6rem; padding:0; list-style:none; max-width:760px; margin-left:auto; margin-right:auto; }
.pain-points li { position:relative; padding-left:1.15rem; font-size:.78rem; line-height:1.45; color:#475569; cursor:default; }
.pain-points li .point-label { font-weight:600; letter-spacing:.05em; }
.pain-points li::before { content:""; position:absolute; left:0; top:.55em; width:10px; height:10px; border-radius:50%; background:#4f46e5; box-shadow:0 0 0 2px rgba(79,70,229,.25); }
.pain-points li[data-circle="exposure"]::before { background:#ec4899; box-shadow:0 0 0 2px rgba(236,72,153,.25); }
.pain-points li[data-circle="visibility"]::before { background:#7c3aed; box-shadow:0 0 0 2px rgba(124,58,237,.25); }
.pain-points li[data-circle="audit"]::before { background:#0ea5e9; box-shadow:0 0 0 2px rgba(14,165,233,.25); }
.pain-points li[data-circle="fatigue"]::before { background:#eab308; box-shadow:0 0 0 2px rgba(234,179,8,.25); }
[data-theme="dark"] .pain-points li { color:#cbd5e1; }
@media (min-width:800px){
  .pain-points { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion:no-preference){
  .pain-venn-five .circle, .center-solution { transition:transform .45s ease, opacity .45s ease; }
  .pain-points li { transition:color .25s ease; }
  .pain-points li:hover { color:#0f172a; }
  [data-theme="dark"] .pain-points li:hover { color:#ffffff; }
}
.pain-points li:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; border-radius:6px; }
/* Highlight interactions (JS will add .active) */
.pain-venn-five .circle { opacity:.72; }
.pain-venn-five .circle.active { opacity:1; transform:rotate(var(--rot,0deg)) scale(1.06); }
.pain-points li.active { color:#0f172a; font-weight:600; }
[data-theme="dark"] .pain-points li.active { color:#fafafa; }

/* External pain labels with connector lines */
.pain-venn-five .pain-label { position:absolute; width:150px; max-width:160px; font-size:.65rem; line-height:1.3; background:#ffffff; border:1px solid #e2e8f0; padding:.55rem .6rem .6rem; border-radius:12px; box-shadow:0 4px 12px -6px rgba(0,0,0,.25); cursor:default; display:grid; grid-template-columns:12px 1fr; grid-template-areas:"dot head" "body body"; column-gap:.45rem; align-items:center; }
[data-theme="dark"] .pain-venn-five .pain-label { background:#121a24; border:1px solid rgba(255,255,255,.08); box-shadow:0 4px 14px -6px rgba(0,0,0,.6); }
.pain-venn-five .pain-label .label-head { font:600 .55rem/1 var(--font-sans); letter-spacing:.12em; text-transform:uppercase; color:#64748b; grid-area:head; }
[data-theme="dark"] .pain-venn-five .pain-label .label-head { color:#94a3b8; }
.pain-venn-five .pain-label .label-body { font-size:.62rem; color:#475569; grid-area:body; margin-top:.25rem; }
[data-theme="dark"] .pain-venn-five .pain-label .label-body { color:#cbd5e1; }
.pain-venn-five .pain-label::before { content:""; width:10px; height:10px; border-radius:50%; background:#4f46e5; box-shadow:0 0 0 2px rgba(79,70,229,.25); grid-area:dot; }
.pain-venn-five .pain-label.exposure::before { background:#ec4899; box-shadow:0 0 0 2px rgba(236,72,153,.25); }
.pain-venn-five .pain-label.visibility::before { background:#7c3aed; box-shadow:0 0 0 2px rgba(124,58,237,.25); }
.pain-venn-five .pain-label.audit::before { background:#0ea5e9; box-shadow:0 0 0 2px rgba(14,165,233,.25); }
.pain-venn-five .pain-label.fatigue::before { background:#eab308; box-shadow:0 0 0 2px rgba(234,179,8,.25); }
/* Connector lines removed */
.pain-venn-five .pain-label::after,
.pain-venn-five .pain-label.exposure::after,
.pain-venn-five .pain-label.visibility::after,
.pain-venn-five .pain-label.audit::after,
.pain-venn-five .pain-label.fatigue::after { display:none; }
/* Positions */
.pain-venn-five .pain-label.fragmentation { top:4%; left:8%; }
.pain-venn-five .pain-label.exposure { top:4%; right:8%; }
.pain-venn-five .pain-label.visibility { top:38%; right:16%; transform:translateY(-50%); }
@media (max-width: 900px){
  .pain-venn-five .pain-label.visibility { top:42%; right:10%; }
}
.pain-venn-five .pain-label.audit { bottom:6%; right:12%; }
.pain-venn-five .pain-label.fatigue { bottom:6%; left:10%; }
/* Adjust connector lines orientation for right-side labels */
.pain-venn-five .pain-label.exposure::after { left:auto; right:-58px; }
.pain-venn-five .pain-label.visibility::after { left:auto; right:-62px; width:64px; }
.pain-venn-five .pain-label.audit::after { left:auto; right:-58px; }
/* Bottom-left fatigue line stays default (left) */
@media (max-width:740px){
  .pain-venn-five .pain-label { position:static; width:100%; max-width:none; margin:.5rem 0; box-shadow:0 2px 6px -4px rgba(0,0,0,.25); }
  .pain-venn-five { aspect-ratio:1 / 0.75; }
  .pain-venn-five .pain-label::after { display:none; }
  .pain-venn-five .pain-label.fragmentation,
  .pain-venn-five .pain-label.exposure,
  .pain-venn-five .pain-label.visibility,
  .pain-venn-five .pain-label.audit,
  .pain-venn-five .pain-label.fatigue { top:auto; left:auto; right:auto; bottom:auto; transform:none; }
}
@media (prefers-reduced-motion:no-preference){
  .pain-venn-five .pain-label { transition:box-shadow .25s ease, transform .25s ease; }
  .pain-venn-five .pain-label:hover { transform:translateY(-3px); box-shadow:0 8px 18px -6px rgba(0,0,0,.35); }
}
.pain-venn-five .pain-label.active { outline:2px solid var(--color-accent); outline-offset:2px; }
/* Value Proposition Section */
.value-prop-section { background:linear-gradient(90deg,rgba(99,102,241,.04),rgba(236,72,153,.03)); padding:clamp(2.6rem,7vw,4.2rem) 0; }
.value-prop-wrapper { max-width:1160px; margin:0 auto; padding:0 1.2rem; }
.value-prop-cols { display:grid; grid-template-columns:1fr 1.2fr; gap:3.2rem; align-items:start; }
.value-prop-left { display:flex; flex-direction:column; gap:2.2rem; justify-content:center; }
.value-prop-right { display:flex; flex-direction:column; gap:1.2rem; }
.value-prop-section h2 { font-size:clamp(1.7rem,3vw,2.2rem); font-weight:700; margin:0 0 1.2rem; letter-spacing:.5px; color:#1e293b; }
[data-theme="dark"] .value-prop-section h2 { color:#fafafa; }
.value-prop-stats { display:flex; gap:1.2rem; flex-wrap:wrap; }
.stat-block { background:#f1f5f9; border:1px solid #e2e8f0; border-radius:14px; padding:1.1rem 1.3rem; min-width:160px; flex:1 1 160px; display:flex; flex-direction:column; align-items:flex-start; box-shadow:0 2px 8px -4px rgba(99,102,241,.07); }
[data-theme="dark"] .stat-block { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); color:var(--color-text-dim); }
.stat-label { font-size:.78rem; font-weight:600; color:#64748b; margin-bottom:.3rem; letter-spacing:.04em; }
.stat-main { font-size:1.25rem; font-weight:700; color:#4f46e5; margin-bottom:.2rem; }
.stat-sub { font-size:.8rem; color:#475569; }
[data-theme="dark"] .stat-main { color:#a96bff; }
.value-prop-h3 { font-size:1.1rem; font-weight:700; margin:0 0 .7rem; letter-spacing:.04em; color:#4f46e5; }
.value-prop-lead { font-size:.98rem; color:#334155; margin-bottom:1.1rem; }
[data-theme="dark"] .value-prop-lead { color:#d5dbe3; }
.value-prop-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.2rem; font-size:.97rem; }
.value-prop-list li { background:none; border:none; padding:0; }
.value-prop-arrow { display:block; margin-top:.5rem; font-size:.92rem; color:#4f46e5; font-weight:600; letter-spacing:.02em; }
[data-theme="dark"] .value-prop-arrow { color:#a96bff; }
.value-prop-microtag { margin:2.2rem auto 0; text-align:center; font-size:.85rem; color:#64748b; opacity:.88; max-width:520px; }
[data-theme="dark"] .value-prop-microtag { color:#94a3b8; opacity:.85; }
@media (max-width:900px){
  .value-prop-cols { grid-template-columns:1fr; gap:2.2rem; }
  .value-prop-left, .value-prop-right { align-items:center; text-align:center; }
  .value-prop-stats { justify-content:center; }
}
/* Marketing / Landing & Pricing Styles */
:root {
  /* Light, calm hero gradient (Stripe-inspired) */
  --grad-hero: radial-gradient(circle at 22% 28%, rgba(99,102,241,.18), rgba(255,255,255,0) 55%),
               radial-gradient(circle at 78% 62%, rgba(236,72,153,.16), rgba(255,255,255,0) 60%),
               linear-gradient(145deg,#ffffff 0%, #f5f8ff 60%, #ffffff 100%);
  --card-bg: var(--color-surface, #151b23);
  --pricing-accent: linear-gradient(135deg,#4f8bff,#7869ff 60%,#a96bff);
  --grid-fg: rgba(255,255,255,0.04);
  --grid-fg-strong: rgba(255,255,255,0.07);
}

/* Dark theme restores original richer contrast gradient */
[data-theme="dark"] {
  --grad-hero: radial-gradient(circle at 30% 20%, rgba(120,140,255,.35), rgba(30,30,60,0) 60%),
               linear-gradient(145deg, #0d1117 0%, #101826 60%, #0d1117 100%);
}

.hero { position:relative; padding: clamp(3.2rem, 8vw, 6.2rem) clamp(1.4rem, 4vw, 3.4rem) 0.2rem; text-align:center; background:transparent; overflow:hidden; }
/* Layout container only now – no glass panel */
.hero-content { margin:0 auto; max-width:1040px; padding:0 1.4rem; }
.hero h1 { font-size: clamp(2.35rem, 5.3vw, 3.55rem); line-height:1.06; margin:0 0 1.1rem; letter-spacing:-.5px; font-weight:700; color:#0f172a; }
[data-theme="dark"] .hero h1 { color:#fafafa; }
.hero h1 .gradient { background:linear-gradient(90deg,#4f46e5,#7c3aed,#ec4899); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lede { max-width:780px; margin:0 auto 2rem; font-size: clamp(1.075rem,1.45vw,1.26rem); line-height:1.5; color:#475569; font-weight:400; }
[data-theme="dark"] .hero p.lede { color:#d5dbe3; }
/* Remove previous text shadows for cleaner, crisper text */
.hero h1, .hero p.lede { text-shadow:none; }
.hero .cta-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero .cta-row .button.primary { background:var(--color-accent); color:#fff; }
.hero .meta-badges { margin-top:2.1rem; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.hero .meta-badges .badge { font:600 11px/1 var(--font-sans); letter-spacing:.07em; text-transform:uppercase; background:#f1f5f9; border:1px solid #e2e8f0; padding:.55rem .7rem; border-radius:999px; color:#475569; }
[data-theme="dark"] .hero .meta-badges .badge { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.15); color:var(--color-text-dim); backdrop-filter:none; }

/* Signup form replacing legacy CTAs */
.hero .signup-form { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 auto 1.75rem; max-width:620px; }
.hero .signup-form input[type=email] { flex:1 1 260px; min-width:240px; padding:.85rem 1rem; border:1px solid #cbd5e1; border-radius:12px; font:500 .9rem/1.1 var(--font-sans); background:#fff; color:#0f172a; box-shadow:0 2px 4px rgba(0,0,0,.04); transition:border-color .2s, box-shadow .2s; }
.hero .signup-form input[type=email]:focus { outline:2px solid var(--color-accent); outline-offset:2px; border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(99,102,241,.25); }
[data-theme="dark"] .hero .signup-form input[type=email] { background:#0f141a; border:1px solid #334155; color:#e2e8f0; box-shadow:0 2px 4px rgba(0,0,0,.6); }
[data-theme="dark"] .hero .signup-form input[type=email]:focus { box-shadow:0 0 0 3px rgba(120,120,255,.35); }
.hero .signup-form button { padding:.9rem 1.4rem; border-radius:12px; font:600 .85rem/1 var(--font-sans); letter-spacing:.05em; display:inline-flex; align-items:center; gap:.5rem; }
@media (max-width:560px){
  .hero .signup-form { flex-direction:column; }
  .hero .signup-form input[type=email] { width:100%; min-width:0; flex:0 0 auto; }
  .hero .signup-form button { width:100%; }
  /* Reduce vertical padding so input height matches desktop proportion */
  .hero .signup-form input[type=email] { padding:.65rem .95rem; }
}

.hero .signup-footnote { margin: -.9rem auto 2.1rem; font:500 .68rem/1.5 var(--font-sans); letter-spacing:.04em; color:#64748b; opacity:.9; }
[data-theme="dark"] .hero .signup-footnote { color:#94a3b8; opacity:.85; }

.section { padding: clamp(2.8rem, 7vw, 4.4rem) clamp(1.2rem, 4vw, 3rem); }
.section.narrow { max-width:1160px; margin:0 auto; }
.section h2 { font-size: clamp(1.8rem,3.2vw,2.3rem); margin:0 0 1rem; letter-spacing:.5px; }

/* Removed obsolete .pricing-bg-wrapper (markup no longer uses it) */

.features-grid { display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:1.6rem; }
.feature-card { background:var(--card-bg); border:1px solid var(--color-border); border-radius:18px; padding:1.2rem 1.15rem 1.35rem; position:relative; overflow:hidden; }
.feature-card h3 { margin:0 0 .4rem; font-size:1.02rem; letter-spacing:.3px; }
.feature-card p { margin:0; font-size:.85rem; line-height:1.35; color:var(--color-text-dim); }

/* How it works stage styling */
.features-grid.how-it-works { counter-reset: hiw; }
.feature-card.stage { padding-top:1.4rem; }
.feature-card.stage .stage-number {
  --size: 40px;
  width:var(--size); height:var(--size);
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#4f8bff,#7869ff 60%,#a96bff);
  color:#fff; font:600 0.85rem/1 var(--font-sans);
  border-radius:12px; /* squircle pill */
  box-shadow:0 4px 10px -4px rgba(80,120,255,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
  margin:0 0 .9rem; letter-spacing:.5px; position:relative; isolation:isolate;
}
.feature-card.stage .stage-number::after {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg,#ffffff55,#ffffff05);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.8;
}
@media (prefers-reduced-motion:no-preference){
  .feature-card.stage { transition:transform .25s ease, box-shadow .25s ease; }
  .feature-card.stage:hover { transform:translateY(-4px); box-shadow:0 10px 22px -6px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset; }
}

.pricing-overview { margin-top:2rem; display:flex; flex-wrap:wrap; gap:28px; justify-content:center; }
/* Ensure up to four cards per row within 1160px container (260*4 + gaps = 1124) */
.price-card { flex:0 1 260px; }
@media (min-width:1300px){
  /* Allow slight growth on very wide screens without breaking 4-column rhythm */
  .price-card { flex:0 1 230px; }
}
@media (max-width:680px){
  .price-card { flex:0 1 240px; }
}
.price-card { display:flex; flex-direction:column; background:var(--card-bg); border:1px solid var(--color-border); border-radius:20px; padding:1.5rem 1.35rem 1.65rem; position:relative; box-shadow:0 2px 4px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.02) inset; transition:box-shadow .25s, transform .25s, border-color .25s; }
.price-card.highlight {
  /* Accessibility tweak: remove intense gradient fill that reduced legibility */
  background: var(--card-bg);
  border:1px solid rgba(120,150,255,.55);
  box-shadow:0 6px 20px -6px rgba(80,120,255,.35), 0 0 0 1px rgba(255,255,255,.05) inset;
  position:relative;
}
.price-card.highlight::before {
  /* Subtle gradient ring accent (keeps interior neutral for contrast) */
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg,#4f8bff,#7869ff 60%,#a96bff);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.price-card.highlight:hover { box-shadow:0 10px 28px -6px rgba(80,120,255,.48), 0 0 0 1px rgba(255,255,255,.06) inset; }
.price-card:hover { transform:translateY(-3px); box-shadow:0 6px 22px -6px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05) inset; }
.price-card.highlight:hover { box-shadow:0 8px 28px -6px rgba(90,140,255,.6), 0 0 0 1px rgba(255,255,255,.06) inset; }
.price-card:focus-within, .price-card:focus { outline:2px solid var(--color-accent); outline-offset:3px; }
.price-card[tabindex] { cursor:pointer; }

/* Ribbon badge for highlighted tier (redesigned: remove 45deg tilt, adopt pill badge) */
/* Simplified ribbon: subtle pill, reduced visual weight */
/* Centered badge (non-overlapping) */
/* Highlight badge sits above card, not impacting layout */
.price-card.highlight { position:relative; }
.price-card.highlight .ribbon {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  background:#ffffff; /* neutral base for contrast */
  color:#1e3a8a;
  font:600 10px/1 var(--font-sans);
  padding:5px 14px; border-radius:14px;
  letter-spacing:.09em; text-transform:uppercase;
  border:1px solid rgba(79,139,255,.35);
  box-shadow:0 4px 10px -4px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.6) inset;
  pointer-events:none; /* avoid blocking clicks */
  background:linear-gradient(180deg,#ffffff,#f5f8ff);
}
[data-theme="dark"] .price-card.highlight .ribbon {
  background:linear-gradient(180deg,#0f141a,#101b26);
  color:#93c5fd;
  border:1px solid rgba(79,139,255,.45);
  box-shadow:0 4px 10px -4px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.price-card.highlight .ribbon span { letter-spacing:.09em; }
@media (prefers-reduced-motion:no-preference){
  .price-card.highlight .ribbon { transition:box-shadow .25s, background .25s; }
  .price-card.highlight:hover .ribbon { box-shadow:0 6px 14px -4px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.7) inset; }
}
.price-card h3 { margin:0 0 .6rem; font-size:1.05rem; letter-spacing:.4px; }
.price-card .tagline { font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; font-weight:600; color:var(--color-text-dim); margin-bottom:.75rem; }
.price { font:600 1.8rem/1 var(--font-sans); margin-bottom:.3rem; }
.price small { font-size:.55em; font-weight:500; color:var(--color-text-dim); }
.price-card h3,
.price-card .tagline,
.price-card .price,
.price-card .subprice,
.price-card p[aria-label="Plan limits"],
.price-card .actions { text-align:center; }
/* Slightly increased tracking for centered uppercase tagline for optical balance */
.price-card .tagline { letter-spacing:.18em; }
.price-card ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; font-size:.75rem; line-height:1.3; flex-grow:1; }
.price-card ul li { display:flex; gap:.4rem; }
.price-card ul li svg { flex-shrink:0; margin-top:2px; color:var(--color-ok); }
.price-card .actions { margin-top:auto; }
.price-card .actions .button { width:100%; }

.comparison-link { text-align:center; margin-top:1.6rem; font-size:.8rem; }

.footer { padding:2.5rem 1rem 3.5rem; text-align:center; font-size:.72rem; color:var(--color-text-dim); }

/* Origin / brand narrative enhancements */
.hero .lede-secondary { max-width:720px; margin: -1.1rem auto 1.4rem; font:500 .72rem/1.35 var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:#64748b; opacity:.78; }
[data-theme="dark"] .hero .lede-secondary { color:#94a3b8; opacity:.85; }

.origin-band { position:relative; padding:.85rem 1rem; background:linear-gradient(90deg, rgba(99,102,241,.07), rgba(120,70,255,.05)); border-top:1px solid rgba(99,102,241,.18); border-bottom:1px solid rgba(99,102,241,.12); font-size:.7rem; letter-spacing:.04em; }
.origin-inner { max-width:1040px; margin:0 auto; display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; color:#475569; }
.origin-inner strong { font-weight:600; color:#1e293b; }
[data-theme="dark"] .origin-band { background:linear-gradient(90deg, rgba(99,102,241,.15), rgba(120,70,255,.12)); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.06); }
[data-theme="dark"] .origin-inner { color:#cbd5e1; }
[data-theme="dark"] .origin-inner strong { color:#f8fafc; }

@media (max-width: 760px){
  .hero { padding-top:3.5rem; }
  .hero .meta-badges { margin-top:1.6rem; }
}
@media (max-width: 360px){
  .hero { padding:2.1rem 1rem 2.4rem; }
  .hero h1 { font-size: clamp(1.9rem, 7vw, 2.4rem); }
  .hero p.lede { font-size: clamp(.95rem, 4.2vw, 1.05rem); }
}

/* Removed WHY REPOD legacy section selectors (landing variant deprecated). */

/* Audience & Pain sections refined (no backgrounds, minimal accents) */
.section h2.decorated::after {
  content:""; display:block; width:64px; height:4px; margin:.55rem 0 0;
  border-radius:4px; background:linear-gradient(90deg,#4f46e5,#7c3aed 55%,#ec4899);
}
.bullets { list-style:none; margin:.2rem 0 0; padding:0; display:grid; gap:.65rem; }
.bullets.three { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.bullets.five { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.bullets li { position:relative; padding-left:1.05rem; font-size:.8rem; line-height:1.45; color:#475569; }
[data-theme="dark"] .bullets li { color:#94a3b8; }
.bullets li::before { content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,#4f8bff,#7869ff 60%,#a96bff); }
.bullets.who-for-list { display:flex; flex-direction:column; gap:.85rem; margin-top:.6rem; }
.bullets.who-for-list li { padding-left:1.1rem; font-size:.82rem; }
.bullets.who-for-list li { padding-left:1.1rem; font-size:.9rem; }
.wf-role { font-weight:600; color:#0f172a; }
.wf-role { font-weight:600; color:#0f172a; font-size:.95em; }
.bullets.who-for-list li::before { top:.5em; box-shadow:0 0 0 3px rgba(79,70,229,.18); }
.wf-role { font-weight:600; color:#0f172a; }
[data-theme="dark"] .wf-role { color:#fafafa; }
.microtag { display:inline-block; font:600 .55rem/1 var(--font-sans); letter-spacing:.12em; padding:.35rem .55rem; border-radius:999px; background:#f1f5f9; color:#475569; margin:.3rem 0 .8rem; }
[data-theme="dark"] .microtag { background:rgba(255,255,255,.08); color:#cbd5e1; }
.microtag.warn { background:#fff7ed; color:#c2410c; }
[data-theme="dark"] .microtag.warn { background:rgba(255,120,60,.12); color:#ffb38a; }
.section + .section { padding-top:2.2rem; }

/* Audience editorial cards */
.audience-cards { display:flex; flex-wrap:wrap; gap:1rem; margin:.9rem 0 0; }
.audience-card { flex:1 1 240px; min-width:230px; border:1px solid var(--color-border); border-radius:18px; padding:.9rem .95rem 1rem; background:var(--card-bg); position:relative; overflow:hidden; }
.audience-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,#4f46e5,#7c3aed 55%,#ec4899); opacity:.28; }
.role-badge { display:inline-block; font:600 .6rem/1 var(--font-sans); letter-spacing:.08em; padding:.4rem .65rem .42rem; border-radius:999px; background:#f1f5f9; color:#475569; margin:0 0 .55rem; box-shadow:0 1px 2px rgba(0,0,0,.06); }
[data-theme="dark"] .role-badge { background:#1e293b; color:#94a3b8; }
.audience-card .pain { margin:0 0 .55rem; font-size:.74rem; line-height:1.35; color:#475569; font-weight:500; letter-spacing:.02em; }
.audience-card .resolution { margin:0; font-size:.7rem; line-height:1.35; color:#0f6848; font-weight:500; display:flex; align-items:flex-start; gap:.35rem; }
.audience-card .resolution svg { margin-top:2px; color:#0f6848; }
[data-theme="dark"] .audience-card .pain { color:#94a3b8; }
[data-theme="dark"] .audience-card .resolution { color:#34d399; }
[data-theme="dark"] .audience-card .resolution svg { color:#34d399; }
@media (prefers-reduced-motion:no-preference){
  .audience-card { transition:box-shadow .25s ease, transform .25s ease; }
  .audience-card:hover { transform:translateY(-3px); box-shadow:0 8px 20px -6px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05) inset; }
}

/* Pain timeline */
.timeline { position:relative; margin:1.2rem 0 2.4rem; padding-left:1.6rem; }
.timeline::before { content:""; position:absolute; left:.5rem; top:.2rem; bottom:.2rem; width:2px; background:linear-gradient(180deg,#4f46e5,#7c3aed 55%,#ec4899); border-radius:2px; }
.timeline li { list-style:none; margin:0 0 1.25rem; position:relative; }
.timeline li:last-child { margin-bottom:0; }
.timeline li::before { content:""; position:absolute; left:-1.05rem; top:.45rem; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(79,70,229,.25); }
[data-theme="dark"] .timeline li::before { background:#0f141a; }
.timeline h3 { margin:0 0 .35rem; font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#64748b; }
[data-theme="dark"] .timeline h3 { color:#94a3b8; }
.timeline p { margin:0; font-size:.78rem; line-height:1.45; color:#475569; }
[data-theme="dark"] .timeline p { color:#cbd5e1; }

/* Pain Venn Diagram */
.pain-venn { position:relative; max-width:680px; margin:1.4rem auto 2.6rem; aspect-ratio:1 / 0.62; }
.pain-venn .circle { position:absolute; width:48%; height:78%; top:10%; left:6%; border-radius:50%; background:radial-gradient(circle at 40% 40%, rgba(79,70,229,.55), rgba(79,70,229,.0) 65%); mix-blend-mode:multiply; filter:saturate(110%); }
.pain-venn .circle.exposure { left:26%; background:radial-gradient(circle at 50% 45%, rgba(236,72,153,.55), rgba(236,72,153,.0) 65%); }
.pain-venn .circle.visibility { left:46%; background:radial-gradient(circle at 60% 45%, rgba(124,58,237,.55), rgba(124,58,237,.0) 65%); }
.pain-venn .center-user { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:120px; height:120px; border-radius:50%; background:linear-gradient(135deg,#ffffff,#f5f8ff); box-shadow:0 6px 18px -6px rgba(0,0,0,.25), 0 0 0 1px rgba(79,70,229,.35); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; text-align:center; padding:.6rem .7rem; }
.center-user .label { font:600 .6rem/1 var(--font-sans); letter-spacing:.14em; text-transform:uppercase; color:#64748b; }
.center-user .need { font:600 .7rem/1.15 var(--font-sans); color:#4f46e5; }
[data-theme="dark"] .pain-venn .circle { filter:brightness(1.05); }
[data-theme="dark"] .pain-venn .center-user { background:linear-gradient(135deg,#0f141a,#18202b); box-shadow:0 6px 18px -6px rgba(0,0,0,.65), 0 0 0 1px rgba(124,58,237,.45); }
.pain-legend { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin:-.5rem 0 1.2rem; }
.pain-legend .legend-item { display:flex; align-items:center; gap:.45rem; font-size:.65rem; letter-spacing:.06em; font-weight:600; color:#64748b; }
.pain-legend .swatch { width:14px; height:14px; border-radius:4px; background:linear-gradient(135deg,#4f46e5,#4f46e5); box-shadow:0 0 0 1px rgba(0,0,0,.15); }
.pain-legend .swatch.exposure { background:linear-gradient(135deg,#ec4899,#ec4899); }
.pain-legend .swatch.visibility { background:linear-gradient(135deg,#7c3aed,#7c3aed); }
[data-theme="dark"] .pain-legend .legend-item { color:#94a3b8; }
@media (max-width:720px){
  .pain-venn { aspect-ratio:1 / 0.85; }
  .pain-venn .circle { width:54%; height:80%; top:8%; }
  .pain-venn .center-user { width:110px; height:110px; }
  .pain-venn-five .circle { width:60%; height:60%; }
}
@media (prefers-reduced-motion: no-preference){
  .pain-venn .circle { transition:opacity .5s ease, transform .5s ease; }
  .pain-venn:hover .circle { transform:scale(1.03); }
}