/* Proposed only: a quiet reflection and a firm press; no changes to geometry. */
:root {
  --feedback-time: 180ms;
  --feedback-ease: cubic-bezier(.16, 1, .3, 1);
}

.button,
.app-link,
.info-button,
.menu-toggle,
.dialog-close,
.compat-form select {
  transition: background-color var(--feedback-time) var(--feedback-ease),
    border-color var(--feedback-time) var(--feedback-ease),
    box-shadow var(--feedback-time) var(--feedback-ease),
    color var(--feedback-time) var(--feedback-ease),
    filter var(--feedback-time) var(--feedback-ease);
}

/* Replace the original unconditional hover rules, including on touch devices. */
.button:hover { filter: none; transform: none; }
.app-link:hover { background: transparent; }
.info-button:hover { background: transparent; color: #becad9; }
.desktop-nav a:hover { color: inherit; }
.region-options label:hover > span { border-color: var(--control-line); }
.region-options label:hover > input:checked + span { border-color: #f5faff; }
.hero-benefit:hover .icon-disc { background: linear-gradient(125deg, #e4ecf6, #f9fbfd); }

.button > svg,
.app-link > svg,
.text-link > svg {
  transition: transform 160ms var(--feedback-ease);
}
.text-link,
.text-link:hover {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
}
.text-link { transition: text-decoration-color var(--feedback-time) var(--feedback-ease), opacity 110ms; }
.text-link:hover > svg { transform: none; }

.region-options label > span,
.amount-options label > span,
.frequency-options label > span {
  transition: background-color var(--feedback-time) var(--feedback-ease),
    border-color var(--feedback-time) var(--feedback-ease),
    box-shadow var(--feedback-time) var(--feedback-ease);
}
.faq summary { transition: background-color var(--feedback-time) var(--feedback-ease); }
.faq summary > span { transition: transform var(--feedback-time) var(--feedback-ease); }
.hero-benefit .icon-disc { transition: box-shadow var(--feedback-time) var(--feedback-ease); }
.desktop-nav a,
.mobile-nav a,
.footer-row > div > a,
.brand,
.dialog-back,
#dialog-content a:not(.button) {
  transition: color var(--feedback-time) var(--feedback-ease),
    text-decoration-color var(--feedback-time) var(--feedback-ease), opacity 110ms;
  text-underline-offset: 5px;
}

/* A focus ring remains distinct from the selected silver surface. */
:is(.button, .app-link, .text-link, .info-button, .menu-toggle, .dialog-close,
  .dialog-back, .desktop-nav a, .mobile-nav a, .footer-row > div > a,
  .brand, .hero-benefit, .faq summary, .compat-form select):focus-visible,
#dialog-content a:focus-visible {
  outline: 2px solid #203a53;
  outline-offset: 4px;
}
:is(.purchase, .dark-section, .final-section)
  :is(.button, .text-link, .info-button):focus-visible {
  outline-color: #e2edf8;
}
.region-options label:has(input:focus-visible),
.amount-options label:has(input:focus-visible),
.frequency-options label:has(input:focus-visible) {
  outline: 2px solid #e2edf8;
  outline-offset: 3px;
  border-radius: var(--control-radius);
}

@media (hover: hover) and (pointer: fine) {
  .button:not(:disabled):not([aria-disabled="true"]):hover {
    filter: brightness(1.025);
  }
  .button.silver:not(:disabled):not([aria-disabled="true"]):hover {
    box-shadow: inset 0 1px 1px #fff, inset 0 -1px 0 #a0b6ce4d,
      0 8px 22px #06121c1a;
  }
  .button.black:not(:disabled):not([aria-disabled="true"]):hover {
    filter: brightness(1.09);
    box-shadow: inset 0 1px 0 #b8c9da2e, 0 4px 14px #09131c1a;
  }
  .app-link:not([aria-disabled="true"]):hover {
    background: #ffffff70;
    border-color: #60778e;
    box-shadow: inset 0 1px 0 #ffffffc7, 0 3px 10px #263c5010;
  }
  :is(.button, .app-link):not(:disabled):not([aria-disabled="true"]):hover > svg,
  .text-link:not(:disabled):not([aria-disabled="true"]):hover > svg {
    transform: translate(1px, -1px);
  }
  .text-link:not(:disabled):not([aria-disabled="true"]):hover {
    text-decoration-color: currentColor;
  }
  .region-options label:hover > input:not(:checked):not(:disabled) + span {
    border-color: #8ca1b7;
  }
  :is(.region-options, .amount-options, .frequency-options)
    label:hover > input:not(:checked):not(:disabled) + span {
    background-color: #d7e8fb13;
    box-shadow: inset 0 1px 0 #e1ecf928;
  }
  :is(.region-options, .amount-options, .frequency-options)
    label:hover > input:checked:not(:disabled) + span {
    box-shadow: inset 0 1px 1px #fff, inset 0 -1px 0 #8ca7c17a,
      inset 0 0 0 1px #ffffffb3, 0 5px 15px #08131e12;
  }
  .faq summary:hover { background-color: #d8e4ef4d; }
  .info-button:not(:disabled):hover {
    background: #e5eefb1f;
    border-color: #d8e6f5;
    color: #f3f8fd;
    box-shadow: inset 0 1px 0 #ffffff1a;
  }
  :is(.menu-toggle, .dialog-close):not(:disabled):hover {
    background-color: #e1ebf5;
    border-color: #849bb1;
    box-shadow: inset 0 1px 0 #fff, 0 3px 10px #2039500d;
  }
  .compat-form select:not(:disabled):hover {
    border-color: #748ba1;
    background-color: #f7faff;
  }
  :is(.desktop-nav a, .mobile-nav a, .footer-row > div > a):hover {
    color: #395168;
    text-decoration: underline;
  }
  .brand:hover,
  .dialog-back:not(:disabled):hover,
  #dialog-content a:not(.button):hover { color: #395168; }
  .hero-benefit:hover .icon-disc {
    box-shadow: inset 0 1px 0 #fff, 0 3px 10px #2039501a;
  }
}

/* A press is visible on touch as well as mouse; no sticky hover is required. */
.button:not(:disabled):not([aria-disabled="true"]):is(:active, [data-pressed]) {
  transform: none;
  filter: brightness(.97);
  box-shadow: inset 0 2px 4px #182c4238, inset 0 -1px 0 #ffffff6b;
  transition-duration: 110ms;
}
.app-link:not([aria-disabled="true"]):is(:active, [data-pressed]),
:is(.menu-toggle, .dialog-close, .compat-form select):not(:disabled):is(:active, [data-pressed]) {
  background-color: #d6e2ef;
  box-shadow: inset 0 2px 4px #233a5126;
  transition-duration: 110ms;
}
.info-button:not(:disabled):is(:active, [data-pressed]) {
  background: #dbe8f4;
  color: #172330;
  border-color: #dbe8f4;
  transition-duration: 110ms;
}
:is(.region-options, .amount-options, .frequency-options)
  label:is(:active, [data-pressed]) > input:not(:checked):not(:disabled) + span {
  background-color: #d7e8fb22;
  box-shadow: inset 0 2px 4px #06111d40;
  transition-duration: 110ms;
}
:is(.region-options, .amount-options, .frequency-options)
  label:is(:active, [data-pressed]) > input:checked:not(:disabled) + span {
  box-shadow: inset 0 2px 4px #182c4238, inset 0 -1px 0 #ffffffa1;
  transition-duration: 110ms;
}
.faq summary:is(:active, [data-pressed]) { background-color: #ccdbe963; transition-duration: 110ms; }
:is(.text-link, .dialog-back):not(:disabled):not([aria-disabled="true"]):is(:active, [data-pressed]),
:is(.desktop-nav a, .mobile-nav a, .footer-row > div > a, .brand,
  #dialog-content a:not(.button)):is(:active, [data-pressed]) { opacity: .76; }
.hero-benefit:is(:active, [data-pressed]) .icon-disc { box-shadow: inset 0 2px 4px #20395026; }

/* Disabled controls keep their surface and never suggest a live hover/press. */
:is(.button, .app-link, .text-link, .info-button, .menu-toggle, .dialog-close,
  .dialog-back, .compat-form select):is(:disabled, [aria-disabled="true"]) {
  cursor: default;
  opacity: .55;
}
:is(.region-options, .amount-options, .frequency-options) label:has(input:disabled) {
  cursor: default;
  opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
  .button > svg,
  .app-link > svg,
  .text-link > svg,
  .button:hover > svg,
  .app-link:hover > svg,
  .text-link:hover > svg,
  :is(.button, .app-link, .text-link):not(:disabled):not([aria-disabled="true"]):hover > svg {
    transform: none;
    transition: none;
  }
  .faq summary > span,
  .menu-toggle > span { transition: none; }
}