/* Hallmark · component: annual purchase button · genre: playful · theme: existing Hum
 * states: default · hover · focus · active · disabled · loading · error · success
 * pre-emit critique: P5 H5 E4 S5 R5 V4 */
:root {
  --plan-error: oklch(43% .15 27);
  --plan-success: oklch(36% .09 153);
  --plan-space: 12px;
}
.plan-actions { display: grid; gap: var(--plan-space); margin-top: 8px; }
.plan-actions .annual-saving { margin: 0; color: var(--ink); font-size: 14px; font-weight: 800; }
.plan-actions .annual-detail { margin: 0; color: var(--ink-2); font-size: 12px; line-height: 1.6; }
.plan-actions .plan-annual, .plan-actions .plan-monthly {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 48px; padding: 12px; border: 1px solid var(--ink); border-radius: 12px;
  color: var(--ink); background: var(--paper); font: 700 14px/1.4 var(--font);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 120ms var(--ease-press);
}
.plan-actions .plan-annual {
  min-height: 60px; border-color: var(--accent-deep); border-radius: 999px;
  color: var(--ink); background: var(--accent); font-size: clamp(14px, 1.3vw, 17px); font-weight: 800;
  box-shadow: 0 4px 0 var(--accent-deep);
}
.plan-actions .plan-annual.is-hover { transform: translateY(-2px); }
@media (hover: hover) {
  .plan-actions .plan-annual:hover:not(:disabled) { color: var(--ink); background: var(--accent); transform: translateY(-2px); }
  .plan-actions .plan-monthly:hover:not(:disabled) { color: var(--ink); background: var(--paper-3); }
}
.plan-actions .plan-annual:focus-visible, .plan-actions .plan-monthly:focus-visible, .plan-actions .is-focus {
  outline: 3px solid var(--accent-2); outline-offset: 5px;
}
.plan-actions .plan-annual:active:not(:disabled), .plan-actions .plan-monthly:active:not(:disabled), .plan-actions .is-active {
  transform: translateY(3px);
}
.plan-actions :disabled, .plan-actions [aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.plan-actions [data-state="loading"] { opacity: 1; cursor: progress; border-style: dashed; }
.plan-actions [data-state="error"] { border-color: var(--plan-error); box-shadow: 0 4px 0 var(--plan-error); }
.plan-actions [data-state="success"] { color: var(--paper); background: var(--plan-success); border-color: var(--plan-success); box-shadow: none; opacity: 1; }
.price-card .plan-free, .membership-plan .plan-free { color: var(--ink); background: var(--paper); border: 1px solid var(--rule); box-shadow: none; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .plan-actions .plan-annual, .plan-actions .plan-monthly { transition: none; transform: none !important; } }