/* One material language for the site's controls and component edges. */
:root {
  --porcelain-shell: #74415e;
  --porcelain-edge: #a47490;
  --porcelain-face: #f4f0f2;
  --porcelain-ink: #271820;
  --porcelain-muted: #74636d;
  --porcelain-line: #d7c8d1;
}

.audience {
  padding: 4px;
  gap: 2px;
  border: 1px solid var(--porcelain-edge);
  border-radius: 8px;
  background: var(--porcelain-shell);
  box-shadow: inset 0 1px 0 #ffffff25, 0 2px 0 #321e2a;
}
.audience button, .audience a {
  color: #f6edf2;
  border-radius: 4px;
  transition: background .16s, color .16s;
}
.audience button:hover, .audience a:hover { background: #ffffff14; color: #fff; }
.audience button[aria-pressed=true] {
  color: var(--porcelain-ink);
  background: var(--porcelain-face);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px #27182040;
}
.audience :is(button,a):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.metal, .plan-badge {
  color: var(--porcelain-ink);
  background: var(--porcelain-face);
  border-color: var(--porcelain-edge);
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #321e2a;
  font-family: var(--font);
}
.metal::after { background: linear-gradient(90deg,transparent,#ffffffb0,transparent); }
.plan-card {
  border-color: #79566b;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 #ffffff0c, 0 0 0 2px #74415e25;
}
.plan-free {
  border-color: var(--porcelain-edge);
  box-shadow: 0 0 0 3px var(--porcelain-shell), inset 0 1px 0 #ffffff12;
}
.plan-free::before { background: linear-gradient(90deg,transparent,#e0c4d4,transparent); }
.plan-cta {
  color: var(--porcelain-ink);
  border-color: #fff;
  border-radius: 6px;
  background: var(--porcelain-face);
  box-shadow: 0 0 0 2px var(--porcelain-shell), inset 0 1px 0 #fff, 0 2px 2px #0002;
  transition: background .16s, box-shadow .16s;
}
.plan-free .plan-cta { box-shadow: 0 0 0 3px var(--porcelain-shell), inset 0 1px 0 #fff, 0 3px 2px #0002; }
.plan-cta:hover { background: #fff; text-decoration: none; box-shadow: 0 0 0 2px var(--porcelain-edge), inset 0 1px 0 #fff; }
.plan-cta:focus-visible { outline: 2px solid var(--porcelain-edge); outline-offset: 5px; }
.plan-cta[data-copied=true] { background: #e9dce4; color: var(--porcelain-ink); }
.plan-note { border-color: #74415e44; }

.faq-list summary > span, .pricing-definition summary > span, .team-faq summary > span {
  display: inline-flex;
  flex: 0 0 25px;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  color: var(--porcelain-ink);
  border: 1px solid var(--porcelain-line);
  border-radius: 5px;
  background: var(--porcelain-face);
  box-shadow: inset 0 1px 0 #fff;
}
.faq-list details[open] summary > span, .pricing-definition[open] summary > span { transform: none; }
.faq-list details[open] summary > span, .pricing-definition[open] summary > span, .team-faq details[open] summary > span { font-size: 0; transform: none; }
.faq-list details[open] summary > span::after, .pricing-definition[open] summary > span::after, .team-faq details[open] summary > span::after { content: "−"; font-size: 20px; }

.setup-dialog, .dataset-dialog {
  border-color: var(--porcelain-edge);
  box-shadow: 0 0 0 4px var(--porcelain-shell), 0 35px 120px #0009;
}
.dialog-top {
  color: var(--porcelain-ink);
  background: var(--porcelain-face);
  border-bottom-color: var(--porcelain-line);
  box-shadow: inset 0 1px 0 #fff;
}
.dialog-close {
  color: var(--porcelain-ink);
  border: 1px solid var(--porcelain-line);
  border-radius: 5px;
  background: #fff;
}
.dialog-body textarea {
  color: var(--porcelain-ink);
  border-color: var(--porcelain-edge);
  background: var(--porcelain-face);
  box-shadow: inset 0 1px 2px #27182010;
  font-family: var(--font);
}
.dialog-actions .copy-button {
  color: var(--porcelain-ink);
  border: 1px solid #fff;
  background: var(--porcelain-face);
  box-shadow: 0 0 0 2px var(--porcelain-shell), inset 0 1px 0 #fff;
}
.toast {
  color: var(--porcelain-ink);
  border: 1px solid #fff;
  background: var(--porcelain-face);
  box-shadow: 0 0 0 3px var(--porcelain-shell), 0 5px 25px #0004;
}


@media (max-width: 850px) {
  .audience { padding: 3px; }
  .plans-grid { gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .audience :is(button,a), .plan-cta { transition: none; }
}
@media (forced-colors: active) {
  .audience, .audience button, .audience a, .plan-card, .plan-cta, .metal, .plan-badge,
  .dialog-top, .dialog-close, .dialog-body textarea, .toast {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
    box-shadow: none;
  }
  .audience button[aria-pressed=true] { background: Highlight; color: HighlightText; }
}