/**
 * Shopify CRO service page (/services/shopify-cro) — JS-owned state
 * styling for the symptom severity ledger and the bottom conversion
 * bar. Static styles are Tailwind classes in the view; only the state
 * variants toggled by assets/js/pages/service-shopify-cro.js live here.
 */

/* Symptom toggle — ticked state (aria-pressed is the state hook) */
[data-symptom][aria-pressed="true"] {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #fff;
}
[data-symptom][aria-pressed="true"] [data-symptom-box] {
  border-color: var(--color-accent);
  background: var(--color-accent);
}
[data-symptom-tick] {
  display: none;
}
[data-symptom][aria-pressed="true"] [data-symptom-tick] {
  display: block;
}
[data-symptom][aria-pressed="true"] [data-symptom-body] {
  color: rgba(255, 255, 255, .68);
}

/* Bottom conversion bar — hidden below the viewport until JS adds
   .is-shown past one screen of scroll. visibility keeps the off-screen
   links out of the tab order while hidden. */
[data-cro-bar] {
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .32s cubic-bezier(.2, .7, .3, 1), visibility 0s linear .32s;
}
[data-cro-bar].is-shown {
  transform: translateY(0);
  visibility: visible;
  transition: transform .32s cubic-bezier(.2, .7, .3, 1);
}