/* Each card group has a visual role: audience signals, a process rail, editorial
   pathways, and purchase choices. Colors are accents; labels carry the meaning. */

.audience-home-grid a {
  --card-tone: var(--purple-light);
  --card-wash: rgba(139, 92, 246, .16);
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--card-tone) 28%, var(--line));
  background: radial-gradient(circle at 100% 0, var(--card-wash), transparent 65%), var(--black-soft);
}
.audience-home-grid a:nth-child(2) { --card-tone: var(--orange); --card-wash: rgba(249, 115, 22, .16); }
.audience-home-grid a:nth-child(3) { --card-tone: var(--purple-light); --card-wash: rgba(139, 92, 246, .2); background: radial-gradient(circle at 0 100%, rgba(249,115,22,.08), transparent 52%), radial-gradient(circle at 100% 0, var(--card-wash), transparent 65%), var(--black-soft); }
.audience-home-grid a:nth-child(4) { --card-tone: var(--orange); --card-wash: rgba(249, 115, 22, .2); background: radial-gradient(circle at 0 100%, rgba(139,92,246,.09), transparent 52%), radial-gradient(circle at 100% 0, var(--card-wash), transparent 65%), var(--black-soft); }
.audience-home-grid a::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--card-tone), transparent 84%); }
.audience-home-grid a::after { content: ''; position: absolute; top: -47px; right: -48px; width: 145px; height: 145px; border: 1px solid color-mix(in srgb, var(--card-tone) 24%, transparent); border-radius: 50%; pointer-events: none; }
.audience-home-grid a > * { position: relative; z-index: 1; }
.audience-home-grid a:hover,.audience-home-grid a:focus-visible { border-color: var(--card-tone); box-shadow: 0 16px 38px color-mix(in srgb, var(--card-tone) 10%, transparent); }
.audience-home-grid a > span,.audience-home-grid b { color: var(--card-tone); }

.governance-track { gap: 0; border-radius: 15px; overflow: hidden; background: var(--panel); }
.governance-track article {
  --stage-tone: var(--purple-light);
  --stage-wash: rgba(139, 92, 246, .11);
  border-right: 1px solid var(--line);
  background: linear-gradient(155deg, var(--stage-wash), transparent 63%), var(--black-soft);
}
.governance-track article:nth-child(2) { --stage-tone: var(--purple-light); --stage-wash: rgba(139, 92, 246, .19); }
.governance-track article:nth-child(3) { --stage-tone: var(--orange); --stage-wash: rgba(249, 115, 22, .1); }
.governance-track article:nth-child(4) { --stage-tone: var(--orange); --stage-wash: rgba(249, 115, 22, .18); border-right: 0; }
.governance-track article::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--stage-tone); opacity: .75; }
.governance-track article > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--stage-tone) 55%, transparent); border-radius: 50%; color: var(--stage-tone); background: var(--stage-wash); }
.governance-track article::after { top: 5.75rem; background: linear-gradient(90deg, var(--stage-tone), transparent); opacity: .28; }
.governance-track article:last-child::after { background: linear-gradient(90deg, var(--stage-tone), transparent); }
.governance-track h3 { color: var(--white); }

.pathways { background: radial-gradient(ellipse at 50% 20%, rgba(139,92,246,.055), transparent 50%); }
.pathway-grid article {
  --path-tone: var(--purple-light);
  --path-wash: rgba(139, 92, 246, .18);
  overflow: hidden;
  border-color: color-mix(in srgb, var(--path-tone) 22%, var(--line));
  background: radial-gradient(circle at 100% 0, var(--path-wash), transparent 58%), linear-gradient(155deg, var(--black-soft), var(--panel));
}
.pathway-grid article:nth-child(2) { --path-tone: var(--orange); --path-wash: rgba(249, 115, 22, .18); }
.pathway-grid article:nth-child(3) { --path-tone: var(--purple-light); --path-wash: rgba(139, 92, 246, .14); background: radial-gradient(circle at 100% 0, var(--path-wash), transparent 58%), radial-gradient(circle at 0 100%, rgba(249,115,22,.11), transparent 58%), linear-gradient(155deg, var(--black-soft), var(--panel)); }
.pathway-grid article::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--path-tone), transparent 88%); }
.pathway-grid article:nth-child(3)::before { background: linear-gradient(90deg, var(--purple), var(--orange)); }
.pathway-grid article::after { content: ''; position: absolute; width: 205px; height: 205px; right: -110px; top: -110px; border: 1px solid color-mix(in srgb, var(--path-tone) 28%, transparent); border-radius: 50%; pointer-events: none; }
.pathway-grid article:hover { border-color: var(--path-tone); box-shadow: 0 24px 55px color-mix(in srgb, var(--path-tone) 9%, transparent); }
.pathway-grid .pathway-label { width: fit-content; padding: .45rem .65rem; border: 1px solid color-mix(in srgb, var(--path-tone) 40%, transparent); border-radius: 999px; color: var(--path-tone); background: color-mix(in srgb, var(--path-tone) 10%, transparent); }
.pathway-grid .pathway-number { top: 1.65rem; right: 1.75rem; color: var(--path-tone); opacity: .55; }
.pathway-grid a span { color: var(--path-tone); }

.checkout-plan-picker button,.checkout-plan-picker a {
  --tier-tone: var(--purple-light);
  --tier-wash: rgba(139, 92, 246, .17);
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--tier-tone) 30%, var(--line));
  background: radial-gradient(circle at 100% 0, var(--tier-wash), transparent 72%), var(--panel);
}
.checkout-plan-picker button:nth-child(2) { --tier-tone: var(--orange); --tier-wash: rgba(249, 115, 22, .17); }
.checkout-plan-picker a:nth-child(3) { --tier-tone: var(--purple-light); --tier-wash: rgba(139, 92, 246, .12); background: radial-gradient(circle at 100% 0, var(--tier-wash), transparent 72%), radial-gradient(circle at 0 100%, rgba(249,115,22,.1), transparent 58%), var(--panel); }
.checkout-plan-picker button::before,.checkout-plan-picker a::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--tier-tone); opacity: .65; }
.checkout-plan-picker a:nth-child(3)::before { background: linear-gradient(90deg, var(--purple), var(--orange)); }
.checkout-plan-picker button:hover,.checkout-plan-picker a:hover { border-color: var(--tier-tone); }
.checkout-plan-picker button[aria-pressed="true"] { border-color: var(--tier-tone); background: radial-gradient(circle at 100% 0, var(--tier-wash), transparent 72%), var(--panel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier-tone) 48%, transparent), 0 10px 28px color-mix(in srgb, var(--tier-tone) 9%, transparent); }
.checkout-plan-picker button[aria-pressed="true"]::before { opacity: 1; }
.checkout-plan-picker b,.checkout-plan-picker a b { color: var(--tier-tone); }

.configuration-panel .domain-option { box-shadow: inset 3px 0 var(--purple); background: linear-gradient(90deg, rgba(139,92,246,.085), transparent 38%); }
.configuration-panel .cadence-option { box-shadow: inset 3px 0 var(--orange); background: linear-gradient(90deg, rgba(249,115,22,.075), transparent 38%); }
.configuration-panel .promo-option { box-shadow: inset 3px 0 var(--purple); background: linear-gradient(90deg, rgba(139,92,246,.07), transparent 38%); }

:root[data-theme="light"] .audience-home-grid a,
:root[data-theme="light"] .governance-track article,
:root[data-theme="light"] .checkout-plan-picker button,
:root[data-theme="light"] .checkout-plan-picker a { background-color: #fff; }
:root[data-theme="light"] .pathway-grid article { background: radial-gradient(circle at 100% 0, var(--path-wash), transparent 58%), linear-gradient(155deg,#fff,#f7f5fb); }
:root[data-theme="light"] .pathway-grid article:nth-child(3) { background: radial-gradient(circle at 100% 0, var(--path-wash), transparent 58%), radial-gradient(circle at 0 100%,rgba(249,115,22,.1),transparent 58%), linear-gradient(155deg,#fff,#f7f5fb); }

@media (max-width: 1040px) {
  .governance-track article:nth-child(2) { border-right: 0; }
  .governance-track article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .governance-track article { border-right: 0; border-bottom: 1px solid var(--line); }
  .governance-track article:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .audience-home-grid a,.pathway-grid article,.checkout-plan-picker button,.checkout-plan-picker a { transition: none; }
}