/* Pills: teal gradient with a soft highlight, no transforms. Soft and package variants below. */
.pill, .order-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: 10px 24px; border-radius: 999px; border: 0; cursor: pointer;
  background: radial-gradient(circle at 8% 0%, rgba(255,255,255,.14), transparent 55%), linear-gradient(135deg, var(--pill-1), var(--pill-2) 58%, var(--pill-3));
  color: var(--on-brand); font: 600 16px/1.4 var(--font); text-decoration: none; text-align: center;
}
.pill:hover, .order-button:hover { color: var(--on-brand); background: radial-gradient(circle at 8% 0%, rgba(255,255,255,.18), transparent 55%), linear-gradient(135deg, var(--pill-hover), var(--pill-2) 58%, var(--pill-3)); box-shadow: 0 5px 14px var(--shadow-strong); }
.pill-upper { text-transform: uppercase; font-size: 14px; letter-spacing: .03em; }
.pill-soft { background: var(--soft-pill-bg); color: var(--ink); border: 1px solid var(--line); font-weight: 400; min-height: 44px; }
.pill-soft:hover { background: var(--surface); color: var(--link); box-shadow: none; }
.pill-icon { width: 56px; height: 56px; padding: 0; font-size: 24px; }
.pill-pkg { background: linear-gradient(135deg, var(--pk), var(--pk) 35%, var(--pk-dark)); }
.pill-pkg:hover { background: linear-gradient(135deg, var(--pk), var(--pk) 25%, var(--pk-dark)); }
.pkg-core { --pk: var(--pk-core); --pk-dark: var(--pk-core-dark); --pk-text: var(--pk-core-text); }
.pkg-essentials { --pk: var(--pk-essentials); --pk-dark: var(--pk-essentials-dark); --pk-text: var(--pk-essentials-text); }
.pkg-advanced { --pk: var(--pk-advanced); --pk-dark: var(--pk-advanced-dark); --pk-text: var(--pk-advanced-text); }
.pkg-optimum { --pk: var(--pk-optimum); --pk-dark: var(--pk-optimum-dark); --pk-text: var(--pk-optimum-text); }