/* Flat controls share the hero's dark action and white secondary surfaces.
   Loaded after the page layers. Optical properties use !important because
   the older page themes also mark their button surfaces important. */
:is(button, .btn, .hero-cta, .capability-cta, .capabilities-main-cta,
    .detail-primary, .detail-secondary, .plan-btn, .growth-cta,
    .v5-blue-glass, .v5-clear-glass, .m2-button-mini,
    .m2-toolbar-publish, .m2-float-btn, .m2-phone-cta) {
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Opaque secondary controls. No gloss, blur, or inset highlights. */
:is(.btn-outline, .btn-quiet, .detail-secondary, .story-page .closing-btn-secondary,
    .plan-btn, .v5-clear-glass, .demo-toolbar button,
    .perspective-toggle button, .persona, .mobile-persona,
    .mobile-demo-switcher button, .tour-close, .menu-button,
    .v5-search-open, .v5-command-dialog button,
    .v5-consent-notice button, .m2-ctrl) {
  background: var(--surface) !important;
  color: var(--ink-strong) !important;
  border: 1px solid var(--line-strong);
}
:is(.btn-outline, .btn-quiet, .detail-secondary, .story-page .closing-btn-secondary,
    .plan-btn, .v5-clear-glass, .demo-toolbar button,
    .perspective-toggle button, .persona, .mobile-persona,
    .mobile-demo-switcher button, .tour-close, .menu-button,
    .v5-search-open, .v5-command-dialog button,
    .v5-consent-notice button, .m2-ctrl):hover:not(:disabled) {
  background: var(--surface-tint) !important;
  border-color: var(--muted);
}

/* Solid primary actions. Keep the component's existing size and shape. */
:is(.site-header .btn-header, .btn-primary, .hero-cta,
    .capabilities-main-cta, .detail-primary, .closing-btn-primary,
    .growth-cta, .plan-featured .plan-btn, .v5-blue-glass,
    .suggestion-action button, .growth-suggestion button,
    .mobile-chat-product button, .mobile-opportunity button,
    #v5-consent-yes, .m2-approve, .m2-button-mini,
    .m2-toolbar-publish, .m2-float-btn, .m2-phone-cta) {
  background: var(--action) !important;
  color: var(--on-action) !important;
  border-color: var(--action) !important;
}
:is(.site-header .btn-header, .btn-primary, .hero-cta,
    .capabilities-main-cta, .detail-primary, .closing-btn-primary,
    .growth-cta, .plan-featured .plan-btn, .v5-blue-glass,
    .suggestion-action button, .growth-suggestion button,
    .mobile-chat-product button, .mobile-opportunity button,
    #v5-consent-yes, .m2-approve):hover:not(:disabled) {
  background: var(--action-hover) !important;
  border-color: var(--action-hover) !important;
}

/* Selection stays visible without a reflective surface. */
:is(.demo-toolbar button[aria-selected="true"],
    .perspective-toggle button.active, .persona.active,
    .mobile-persona.active, .mobile-demo-switcher button.active,
    .v5-selectors button.active, .v5-choice-grid button.active,
    .experience-step-nav button[aria-selected="true"],
    .billing-switch button[aria-pressed="true"],
    .storixa-hub-section .mode-btn[aria-selected="true"],
    .m2-persona[aria-pressed="true"]) {
  background: var(--selected-bg) !important;
  color: var(--selected-fg) !important;
  border-color: var(--primary);
}

/* Preserve the feature cards' circular actions and placement. */
.capability-card .capability-cta.liquid-circle {
  position: absolute;
  z-index: 6;
  inset: 18px 18px auto auto;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-strong);
}
.capability-card .capability-cta.liquid-circle:hover {
  background: var(--surface-tint);
  border-color: var(--ink-strong);
}
.capability-card .capability-cta.liquid-circle .icon {
  width: 22px;
  height: 22px;
  stroke-width: 2;
  transform: rotate(-45deg);
}
.capability-card:is(:hover, :focus-within) .capability-cta.liquid-circle .icon {
  transform: rotate(-45deg) translateX(1px);
}
@media (max-width: 700px) {
  .capability-card .capability-cta.liquid-circle {
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* Disabled actions remain visually distinct from enabled primary actions. */
:is(.btn, .m2-approve, .v5-blue-glass):disabled {
  background: var(--disabled-bg) !important;
  color: var(--disabled-fg) !important;
  border-color: var(--line) !important;
}
@media (forced-colors: active) {
  :is(.btn, .hero-cta, .capability-cta, .capabilities-main-cta,
      .detail-primary, .detail-secondary, .plan-btn) {
    border: 1px solid ButtonText;
  }
}