/* Public CTA refinements. Loaded only by system_color_scheme_public.html.
   Every selector is also scoped to body.external-page. */

/* External primary actions have no upper or lateral border at all. A
   transparent border still gets painted when the shared face uses border-box,
   which leaves a one-pixel blue rim around rounded corners. Keep only the
   four-pixel lower depth and clip the flat face to its padding box. */
html:root body.external-page:not(#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile#sitewide-tactile) :is(
  .btn-primary,
  .cct-cookie-banner .cct-btn-primary,
  .btn-oldprimary,
  .btn-register,
  .btn-enter,
  .submit-btn,
  .contact-btn,
  .checkout-btn,
  .btn-checkout,
  .mobile-register-btn,
  .mobile-auth-buttons .btn-enter,
  .navbar .btn.btn-primary
) {
  --site-control-rest-shadow: none;
  --site-control-hover-shadow: none;
  -webkit-background-clip: padding-box !important;
  background-clip: padding-box !important;
  background-image: none !important;
  border-top-width: 0 !important;
  border-right-width: 0 !important;
  border-bottom-width: 4px !important;
  border-left-width: 0 !important;
  box-shadow: none !important;
}

/* Public blue actions keep their resting colour on hover. Legacy header and
   how-it-works rules use gradient-only background shorthands: removing their
   image otherwise leaves a transparent face. Include form actions explicitly;
   neutral login links in the public header must retain their own appearance. */
html:root body.external-page :is(.navbar, .mobile-auth-buttons) .btn.btn-enter,
html:root body.external-page :is(
  .btn-primary, .btn-oldprimary, .btn-register, .btn-enter,
  .mobile-register-btn, .submit-btn, .contact-btn, .checkout-btn,
  .btn-checkout, .call-to-action .btn, body.tw-login .btn-login
):not(:disabled):not(.disabled):not([aria-disabled="true"]):hover {
  background-color: #2f6bff !important;
}

/* Keep external actions on the same painted face when contact hands off
   to navigation. Internal controls retain their original shared contract. */
html:root body.external-page:not(#site-action#site-action#site-action#site-action#site-action#site-action#site-action#site-action) :is(
  .btn-primary, .btn-oldprimary, .btn-register, .btn-enter, .submit-btn,
  .cct-cookie-banner .cct-btn-primary,
  .contact-btn, .checkout-btn, .btn-checkout, .mobile-register-btn,
  .btn-secondary, .secondary-btn, .btn-cancel, .btn-manage, .btn-close,
  .btn-ghost, .ghost-btn, .cct-btn-ghost, .cct-btn-secondary,
  .btn-login, .mobile-login-btn, .btn-google-login, .social-google-btn,
  .google-btn, .back-link
):is([aria-busy="true"], .is-site-action-pending, .is-loading, .is-preparing, .is-saving):not([data-tactile="off"]) {
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
}

/* Public primary actions use one tactile cue only: the 0/4 -> 3/1 edge
   exchange. Suppress the generic hover brightness change so contact cannot
   appear to compress optically before that single three-pixel travel. */
html:root body.external-page:not(#site-public-press#site-public-press#site-public-press#site-public-press#site-public-press#site-public-press#site-public-press#site-public-press#site-public-press) :is(
  .btn-primary,
  .cct-cookie-banner .cct-btn-primary,
  .btn-oldprimary,
  .btn-register,
  .btn-enter,
  .submit-btn,
  .contact-btn,
  .checkout-btn,
  .btn-checkout,
  .mobile-register-btn,
  .mobile-auth-buttons .btn-enter,
  .navbar .btn.btn-primary,
  .call-to-action .btn:hover,
  body.tw-login .btn-login:hover
):is(:hover, :focus-visible, :active, .is-site-tactile-pressed, .is-site-action-pending) {
  filter: none !important;
}

/* External neutral/secondary actions keep a real one-pixel perimeter around their
   raised face. The matte primary treatment deliberately removes its upper and
   lateral rails, but that contract must never spill into secondary, cancel,
   previous/back, ghost or neutral authentication actions. Component-owned
   colours still win through their depth/outline variables. */
html:root body.external-page:not(#site-neutral-outline#site-neutral-outline#site-neutral-outline#site-neutral-outline#site-neutral-outline#site-neutral-outline#site-neutral-outline#site-neutral-outline#site-neutral-outline) :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  a[href][class*="btn"],
  a[href][class*="button"],
  a[href][class*="action"],
  a[href].back-link
):is(
  .btn-secondary,
  .secondary-btn,
  .btn-cancel,
  .btn-manage,
  .btn-close,
  .btn-ghost,
  .ghost-btn,
  .cct-btn-ghost,
  .cct-btn-secondary,
  .btn-login,
  .mobile-login-btn,
  .btn-google-login,
  .social-google-btn,
  .google-btn,
  .back-link
):not([data-tactile="off"]):not(.password-toggle):not(.icon-eye):not(.delete-account-password-toggle):not(:active):not(.is-site-tactile-pressed):not(.is-site-action-pending):not([aria-busy="true"]):not(.is-loading):not(.is-preparing):not(.is-saving) {
  --site-control-neutral-outline: var(
    --home-secondary-border,
    var(--public-page-button-side-border, var(--site-control-depth))
  );
  border-top: 1px solid var(--site-control-neutral-outline) !important;
  border-right-width: 1px !important;
  border-right-style: solid !important;
  border-right-color: var(--site-control-neutral-outline) !important;
  border-left-width: 1px !important;
  border-left-style: solid !important;
  border-left-color: var(--site-control-neutral-outline) !important;
}

/* A neutral face starts with five vertical border pixels (1 top + 4 depth),
   so its held face must use 4 top + 1 bottom. This preserves the same outer
   size and produces exactly one three-pixel label travel. */
html:root body.external-page:not(#site-neutral-press#site-neutral-press#site-neutral-press#site-neutral-press#site-neutral-press#site-neutral-press#site-neutral-press#site-neutral-press#site-neutral-press) :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  a[href][class*="btn"],
  a[href][class*="button"],
  a[href][class*="action"],
  a[href].back-link
):is(
  .btn-secondary,
  .secondary-btn,
  .btn-cancel,
  .btn-manage,
  .btn-close,
  .btn-ghost,
  .ghost-btn,
  .cct-btn-ghost,
  .cct-btn-secondary,
  .btn-login,
  .mobile-login-btn,
  .btn-google-login,
  .social-google-btn,
  .google-btn,
  .back-link
):not([data-tactile="off"]):not(.password-toggle):not(.icon-eye):not(.delete-account-password-toggle):not(:where(body.tw-register .social-google-btn)):is(:active, .is-site-tactile-pressed, .is-site-action-pending, [aria-busy="true"], .is-loading, .is-preparing, .is-saving) {
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  border-top: 4px solid transparent !important;
  border-right: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
  border-left: 1px solid transparent !important;
}