/* biome-ignore-all lint/complexity/noImportantStyles: design nodes carry their values inline; state rules must win over them */
/*
 * Pricing (site.pen board 28 › 1 · Pricing), on top of landing.css: the page is the landing's
 * desktop (TdOVk, 1440) from 1024 px up and its mobile frame (PDIA0, 390) below.
 *
 * Billing toggle, yearly selected: board 28 › States › "Billing toggle · Yearly" (Lbiwl). Monthly
 * loses its fill (#00000000) and its label turns $v2-text-2; Yearly takes $v2-cta with an $v2-on-cta
 * label, its tag $v2-warm with a #1A0A03 label.
 */
[data-billing-option] {
  transition:
    background-color 150ms,
    color 150ms;
}
[data-billing-option] > * {
  transition: color 150ms;
}
[data-billing-option][aria-pressed="false"]:hover > [data-node="Label"] {
  color: var(--kimo-v2-text) !important;
}
[data-billing-option]:focus-visible {
  outline: 2px solid var(--kimo-v2-warm);
  outline-offset: 2px;
}
.pricing[data-billing="yearly"] [data-billing-option="monthly"] {
  background: #00000000 !important;
}
.pricing[data-billing="yearly"] [data-billing-option="monthly"] > [data-node="Label"] {
  color: var(--kimo-v2-text-2) !important;
}
.pricing[data-billing="yearly"] [data-billing-option="yearly"] {
  background: var(--kimo-v2-cta) !important;
}
.pricing[data-billing="yearly"] [data-billing-option="yearly"] > [data-node="Label"],
.pricing[data-billing="yearly"] [data-billing-option="yearly"]:hover > [data-node="Label"] {
  color: var(--kimo-v2-on-cta) !important;
}
.pricing[data-billing="yearly"] [data-billing-option="yearly"] [data-node="Tag"] {
  background: var(--kimo-v2-warm) !important;
}
.pricing[data-billing="yearly"] [data-billing-option="yearly"] [data-node="Tag label"] {
  color: #1a0a03 !important;
}