/* Same assistant accents as the homepage hero. */
:root { --zoe: #7fd3a5; }
body:has(.view[data-view="amelie"].active) { --page-agent-rgb: 255,122,107; }
body:has(.view[data-view="ava"].active) { --page-agent-rgb: 111,140,255; }
body:has(.view[data-view="zoe"].active) { --page-agent-rgb: 127,211,165; }
body:has(.view:is([data-view="amelie"],[data-view="ava"],[data-view="zoe"]).active) {
  background: radial-gradient(ellipse at 85% 15%,rgba(var(--page-agent-rgb),.13),transparent 55%),radial-gradient(ellipse at 10% 70%,rgba(var(--page-agent-rgb),.06),transparent 55%),linear-gradient(180deg,#0d1525,#0b1220);
  background-size: 135% 135%,140% 140%,100% 100%;
}
body:has(.view:is([data-view="amelie"],[data-view="ava"],[data-view="zoe"]).active)::after {
  background: radial-gradient(circle,rgba(var(--page-agent-rgb),.1),transparent 68%);
}
[data-view="amelie"], [data-agent="amelie"] {
  --agent-accent: #ff7a6b;
  --agent-accent-2: #b8493d;
  --agent-light: #ffb6ac;
  --agent-rgb: 255,122,107;
}
[data-view="ava"], [data-agent="ava"] {
  --agent-accent: #6f8cff;
  --agent-accent-2: #405fc5;
  --agent-light: #a5bdff;
  --agent-rgb: 111,140,255;
}
[data-view="zoe"], [data-agent="zoe"] {
  --agent-accent: #7fd3a5;
  --agent-accent-2: #316c52;
  --agent-light: #b5dfc6;
  --agent-rgb: 127,211,165;
}
:is([data-view="amelie"], [data-view="ava"], [data-view="zoe"], .agent[data-agent]) {
  --agent-gradient: linear-gradient(100deg,var(--agent-light),var(--agent-accent));
  --agent-button-gradient: linear-gradient(135deg,var(--agent-accent-2),color-mix(in srgb,var(--agent-accent-2) 88%,#000));
}

/* Individual cards in the overview and the Duo configurator. */
.agent[data-agent] { border-color: rgba(var(--agent-rgb),.25); }
.agent[data-agent] h3, .agent[data-agent] .badge { color: var(--agent-accent); }
.agent[data-agent] .badge { border-color: rgba(var(--agent-rgb),.25); background: rgba(var(--agent-rgb),.06); }
.agent[data-agent].selected {
  border-color: var(--agent-accent);
  background: linear-gradient(155deg,rgba(var(--agent-rgb),.08),rgba(13,19,34,.94));
  box-shadow: 0 0 0 1px rgba(var(--agent-rgb),.12),0 15px 40px rgba(var(--agent-rgb),.08);
}
.agent[data-agent]:hover { border-color: var(--agent-accent); }
.agent[data-agent] .navbtn, .agent[data-agent].selected button { background: var(--agent-button-gradient); color: #fff; }

/* Preserve readable white text on filled controls in each assistant's hue. */
.standard-configurator .bill.active,
.standard-configurator .pricing .pop,
.standard-configurator .pricing .card .selection-state-badge,
.standard-configurator .pricing .card.pro .choose,
.standard-configurator .pricing .card.plan-selected .choose,
.standard-checkout-total .standard-cta,
[data-view="zoe"] .bill-btn.active,
[data-view="zoe"] .popular,
[data-view="zoe"] .plan .selection-state-badge,
[data-view="zoe"] .plan.professional .choose,
[data-view="zoe"] .plan.selected .choose,
[data-view="zoe"] .cta {
  background: var(--agent-button-gradient);
  color: #fff;
  box-shadow: 0 8px 24px rgba(var(--agent-rgb),.16);
}

[data-view="zoe"] .hero .gradient {
  background: var(--agent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}
[data-view="zoe"] .hero .eyebrow { color: var(--agent-accent); border-color: rgba(var(--agent-rgb),.2); background: rgba(var(--agent-rgb),.055); }
.standard-configurator .break .brow .yes { color: var(--agent-accent); }
.standard-configurator .userbar.standard-users-bar,
.standard-configurator .config-total.standard-checkout,
[data-view="zoe"] .users-bar,
[data-view="zoe"] .checkout-strip { background: linear-gradient(115deg,rgba(var(--agent-rgb),.09),rgba(var(--agent-rgb),.025)); }
.standard-configurator .addon.selected {
  border-color: rgba(var(--agent-rgb),.48)!important;
  background: linear-gradient(150deg,rgba(var(--agent-rgb),.075),rgba(10,18,32,.76))!important;
  box-shadow: 0 0 0 1px rgba(var(--agent-rgb),.08),0 16px 42px rgba(0,0,0,.18);
}
.standard-configurator .soon { color: var(--agent-light); border-color: rgba(var(--agent-rgb),.25); background: rgba(var(--agent-rgb),.07); }
:is([data-view="amelie"], [data-view="ava"], [data-view="zoe"]) :focus-visible,
.agent[data-agent] :focus-visible { outline-color: var(--agent-accent); }