/* PPG precision-cut controls: opposing soft corners, bevel and press feedback. */
@media screen {
  .btn, .btn.small, .round-arrow, .menu-toggle, .format-switch button,
  .mobile-contact a, .compare-bar a, #clear-compare, .size-up-scale button {
    border-radius: 16px 4px 16px 4px;
    min-height: 44px;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .btn, .btn.small {
    position: relative;
    background: linear-gradient(145deg,#c33245 0%,#b32235 50%,#941c2c 100%);
    border: 1px solid #c64555;
    color: #fff;
    box-shadow: inset 0 1px 0 #ffffff38, 0 4px 0 #61121f, 0 9px 18px #0003;
    text-shadow: 0 1px 1px #0002;
    gap: 18px;
  }
  .btn .btn-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    align-self: stretch; min-width: 28px; margin: -4px -7px -4px 0;
    padding-left: 12px; border-left: 1px solid #ffffff45;
    font-size: 18px; line-height: 1;
  }
  .btn.light, .compare-bar a {
    background: linear-gradient(145deg,#fffdf8,#e5e0d6);
    border-color: #f5f2eb; color: #182431;
    box-shadow: inset 0 1px 0 #fff, 0 4px 0 #9b978f, 0 9px 18px #0003;
    text-shadow: none;
  }
  .btn.light .btn-arrow { border-color: #18243140; }
  .navlinks > a.btn, .navlinks > a.btn:hover { color: #fff; }
  .btn.outline {
    background: linear-gradient(145deg,#33383e,#1c2229);
    border-color: #737a82; color: #f5f2eb;
    box-shadow: inset 0 1px 0 #ffffff24, 0 4px 0 #0c1015, 0 9px 18px #0003;
  }
  .format-switch { border-radius: 20px 6px 20px 6px; }
  .format-switch button[aria-pressed=true] {
    background: linear-gradient(145deg,#344251,#182431);
    box-shadow: inset 0 1px 0 #ffffff40, 0 2px 3px #0003;
  }
  .round-arrow { background: linear-gradient(145deg,#fffdf8,#e5e0d6); color: #182431; box-shadow: inset 0 1px 0 #fff,0 3px 0 #aaa69e; }
  .menu-toggle { background: linear-gradient(145deg,#fffdf8,#e5e0d6); box-shadow: inset 0 1px 0 #fff,0 2px 0 #aaa69e; }
  .size-up-scale button { border: 1px solid #62676c; padding: 4px 8px; box-shadow: inset 0 1px 0 #ffffff20; }
  .mobile-contact { gap: 8px; padding: 10px 12px 14px; background: #141619; }
  .mobile-contact a { box-shadow: inset 0 1px 0 #ffffff38,0 3px 0 #0006; }
  .mobile-contact a:not(:first-child) { background: linear-gradient(145deg,#c33245,#941c2c); }
  .btn:focus-visible, .round-arrow:focus-visible, .menu-toggle:focus-visible,
  .format-switch button:focus-visible, .mobile-contact a:focus-visible,
  .compare-bar a:focus-visible, #clear-compare:focus-visible {
    outline: 3px solid #fffdf8; outline-offset: 5px;
    box-shadow: 0 0 0 5px #182431,0 0 0 8px #fffdf8;
  }
  @media (hover:hover) {
    .btn:hover { background: linear-gradient(145deg,#cc3b4e,#a21e30); border-color: #e26474; transform: translateY(-2px); }
    .btn.light:hover { background: linear-gradient(145deg,#fff,#eee7dc); border-color: #fff; color: #182431; }
    .btn.outline:hover { background: linear-gradient(145deg,#424a53,#27313c); border-color: #f5f2eb; }
    .round-arrow:hover, .menu-toggle:hover, .format-switch button:hover, .compare-bar a:hover { transform: translateY(-2px); }
  }
  .btn:active, .round-arrow:active, .menu-toggle:active, .format-switch button:active,
  .mobile-contact a:active, .compare-bar a:active { transform: translateY(3px); box-shadow: inset 0 2px 4px #0004; }
  .btn:disabled, .btn[aria-disabled=true] { transform: none; box-shadow: none; opacity: .55; }
  @media (prefers-reduced-motion:reduce) {
    .btn, .round-arrow, .menu-toggle, .format-switch button, .mobile-contact a, .compare-bar a, #clear-compare { transition:none; }
    .btn:hover, .btn:active, .round-arrow:hover, .round-arrow:active, .menu-toggle:hover, .menu-toggle:active, .format-switch button:hover, .format-switch button:active, .mobile-contact a:active, .compare-bar a:hover, .compare-bar a:active { transform:none; }
  }
}
