/* Approved plan identity v1. Opt in explicitly; no page or entitlement changes. */
.sia-plan-identity {
  --sia-plan-accent: #41a7ff;
  --sia-plan-highlight: #b9ecff;
  --sia-plan-ink: #176bb5;
  background: linear-gradient(145deg, color-mix(in srgb, var(--sia-plan-accent) 5%, transparent), transparent 70%), var(--sia-sidebar-bg);
  border: 1px solid color-mix(in srgb, var(--sia-plan-accent) 55%, var(--sia-line));
  border-radius: 24px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sia-plan-accent) 10%, transparent), 0 0 24px color-mix(in srgb, var(--sia-plan-accent) 4%, transparent);
  color: var(--sia-heading);
  container: sia-plan / inline-size;
  min-width: 0;
  padding: 28px 24px;
  position: relative;
}
.sia-plan-identity[data-plan="pro"] { --sia-plan-accent: #28e4df; --sia-plan-highlight: #b8fffa; --sia-plan-ink: #087c7e; }
.sia-plan-identity[data-plan="free"] { --sia-plan-accent: #c8d9ef; --sia-plan-highlight: #f2f7ff; --sia-plan-ink: #536b87; }
.sia-plan-identity[data-plan="ultimate"] { --sia-plan-accent: #ac7cff; --sia-plan-highlight: #e2cbff; --sia-plan-ink: #7047bb; }
html[data-theme="dark"] .sia-plan-identity { --sia-plan-ink: var(--sia-plan-accent); }
.sia-plan-identity::before { background: linear-gradient(140deg, transparent 60%, color-mix(in srgb, var(--sia-plan-accent) 8%, transparent)); border-radius: inherit; content: ""; inset: 0; pointer-events: none; position: absolute; }
.sia-plan-identity__body { align-items: center; display: flex; gap: 20px; min-height: 96px; position: relative; }
.sia-plan-identity__logo { display: block; flex: 0 0 96px; height: 96px; max-width: 100%; object-fit: contain; width: 96px; }
.sia-plan-identity .sia-plan-identity__name { color: var(--sia-heading); font: 800 28px/1.2 Inter, system-ui, sans-serif; margin: 0; overflow-wrap: anywhere; }
.sia-plan-identity__popular { background: var(--sia-plan-highlight); border: 1px solid var(--sia-plan-accent); border-radius: 999px; color: #073337; font: 800 12px/1.3 Inter, system-ui, sans-serif; left: 50%; letter-spacing: .12em; max-width: calc(100% - 32px); padding: 9px 20px; position: absolute; text-align: center; top: 0; transform: translate(-50%, -50%); width: max-content; }
.sia-plan-identity__accent { color: var(--sia-plan-ink); }
@container sia-plan (max-width: 260px) {
  .sia-plan-identity__body { gap: 12px; min-height: 80px; }
  .sia-plan-identity__logo { flex-basis: 72px; height: 72px; width: 72px; }
  .sia-plan-identity .sia-plan-identity__name { font-size: 24px; }
}