/* One button shape for the whole site: a rectangle with a slight radius and
   Apple-style continuous corners (corner smoothing). Loaded last so it wins
   over each component's own radius. Browsers without `corner-shape` get the
   same small radius drawn as a plain arc. */

:root {
    --btn-r: 6px;      /* outer buttons */
    --btn-r-in: 4px;   /* buttons that sit inside a padded rail */
}

:is(
    .nav-cta, .lang-switch-toggle, .nav-menu-toggle,
    .mobile-nav-cta, .mobile-nav-close, .mobile-lang-chip,
    .hero-cta, .hero-secondary-cta, .hero-ai-cta,
    .prod-foot-cta, .p2-btn, .p2-tabs,
    .cta-back-submit, .submit-btn,
    .ai-chat-toggle, .ai-chat-send, .ai-chat-close,
    .pd-btn, .pd-send, .pd-seg, .pd-chip
) {
    border-radius: var(--btn-r) !important;
}
:is(.p2-tab, .p2-glider, .pd-seg button) {
    border-radius: var(--btn-r-in) !important;
}

/* A squircle reads smaller than a circular arc of the same radius, so the
   radius goes up a little to keep the same, still slight, softness. */
@supports (corner-shape: squircle) {
    :is(
        .nav-cta, .lang-switch-toggle, .nav-menu-toggle,
        .mobile-nav-cta, .mobile-nav-close, .mobile-lang-chip,
        .hero-cta, .hero-secondary-cta, .hero-ai-cta,
        .prod-foot-cta, .p2-btn, .p2-tabs,
        .cta-back-submit, .submit-btn,
        .ai-chat-toggle, .ai-chat-send, .ai-chat-close,
        .pd-btn, .pd-send, .pd-seg, .pd-chip
    ) {
        corner-shape: squircle;
        border-radius: calc(var(--btn-r) * 1.6) !important;
    }
    :is(.p2-tab, .p2-glider, .pd-seg button) {
        corner-shape: squircle;
        border-radius: calc(var(--btn-r-in) * 1.6) !important;
    }
}