/* PillButton — the one design-system component with its own styling that isn't
   in this page's CSS layer. Per spec: 32px tall, radius 100px, 24px arrow badge.
   Light (default) hover fills white and lifts; dark (tone="dark") fills without lift. */
.aeq-pill{display:inline-flex;align-items:center;gap:10px;height:32px;padding:0 4px 0 18px;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,.6);background:transparent;color:#fff;font-family:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer;text-decoration:none;transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.aeq-pill__badge{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.2);color:inherit;flex:none;transition:background var(--dur-base) var(--ease-out)}
.aeq-pill:hover{background:#fff;color:var(--navy-900);border-color:#fff;transform:translateY(-2px);box-shadow:0 8px 22px rgba(2,6,18,.28)}
.aeq-pill:hover .aeq-pill__badge{background:rgba(5,13,36,.12)}
.aeq-pill--dark{background:var(--navy-900);color:#fff;border-color:var(--navy-900)}
.aeq-pill--dark .aeq-pill__badge{background:rgba(255,255,255,.18)}
.aeq-pill--dark:hover{background:var(--navy-800);border-color:var(--navy-800);transform:none;box-shadow:none}
.aeq-pill--dark:hover .aeq-pill__badge{background:rgba(255,255,255,.22)}

@media (prefers-reduced-motion: reduce){
  .aeq-pill,.aeq-pill__badge{transition:none}
  .aeq-pill:hover{transform:none}
}