/* ============================================================
   Navbar — Site navigation bar
   Sticky at top, full-width, token-driven colours.
   ============================================================ */

.navbar {
  position:   sticky;
  top:        0;
  z-index:    9999;
  width:      100%;
  background: var(--background);
  display:     flex;
  align-items: center;
  padding: 20px 0;
}

.navbar::before {
  content:         '';
  position:        absolute;
  inset:           0;
  background:      rgba(40, 40, 37, 0.04);
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.navbar[data-panel-state="open"]::before {
  opacity: 1;
}

.navbar[data-panel-state="closed"]::before {
  opacity: 0;
}

/* Inner row — logo | items | buttons, 64px tall, constrained by container */
.navbar__container {
  max-width:   calc(1384px + 96px);
  margin:      0 auto;
  padding:     0 3rem;
  box-sizing:  border-box;
  width:       100%;
  display:     flex;
  align-items: center;
  position:    relative;
  z-index:     2;
}


/* ============================================================
   Logo area
   ============================================================ */

.navbar__logo {
  display:     flex;
  align-items: center;
  flex: 1;
  padding-right: 16px;
  width: 100%;
  max-width: 164px;
}

.navbar__logo a {
  display:         flex;
  align-items:     center;
  text-decoration: none;
  line-height:     0;
}

.navbar__mobile-trigger {
  display:         none;
  align-items:     center;
  justify-content: center;
  width:           48px;
  height:          48px;
  flex-shrink:     0;
  border:          1px solid rgba(40, 40, 37, 0.1);
  border-radius:   var(--radius-full);
  background:      var(--accent);
  color:           var(--foreground);
  cursor:          pointer;
  box-sizing:      border-box;
  transition:      border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}

.navbar__mobile-trigger:hover,
.navbar__mobile-trigger:focus-visible {
  border-color: var(--border);
  color:        var(--foreground);
}


/* ============================================================
   Nav items
   ============================================================ */

.navbar__items {
  display:     flex;
  align-items: center;
  gap:         var(--navbar-items-gap, 36px);
  flex:        1 1 auto;
  min-width:   0;
}

/* Base item — shared by <a> and <button> */
.navbar__item {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  height:          32px;
  padding:         0 12px 0 20px;
  border-radius:   9999px;
  background:      transparent;
  border:          none;
  color:           var(--foreground);
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-regular);
  line-height:     var(--line-height-sm);
  text-decoration: none;
  white-space:     nowrap;
  cursor:          pointer;
  transition:      background 0.15s;
  box-sizing:      border-box;
}

/* Plain links (no chevron) get symmetric right padding */
a.navbar__item {
  padding-right: 20px;
}

.navbar__item:hover {
  background: var(--accent);
}

.navbar__item--active,
.navbar__item--open {
  background: var(--accent);
}

/* Chevron icon */
.navbar__chevron {
  flex-shrink: 0;
  color:       var(--muted-foreground);
  transition:  transform 0.2s ease;
}

.navbar__chevron--open {
  transform: rotate(180deg);
}


/* ============================================================
   Button group (right side)
   ============================================================ */

.navbar__buttons {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             12px;
  margin-left:     auto;
  padding-left:    16px;
  position:        relative;
}

.navbar__action {
  flex-shrink: 0;
}

.navbar__action-wrap {
  display:     inline-flex;
  flex-shrink: 0;
}

.navbar__action--phone {
  padding-left: 0.75rem;
}

.navbar__action-measure {
  position:       absolute;
  top:            0;
  left:           0;
  visibility:     hidden;
  pointer-events: none;
}


/* ============================================================
   Dropdown panel shell
   Positioned below the bar; content filled in per-dropdown.
   ============================================================ */

/* Full-width row that centers the floating card */
.navbar__dropdown-panel {
  position:        absolute;
  top:             100%;
  left:            0;
  right:           0;
  z-index:         99;
  display:         flex;
  justify-content: center;
  padding:         0 3rem;
  box-sizing:      border-box;
  pointer-events:  none;
}

.navbar__dropdown-panel > * {
  pointer-events: auto;
}

.navbar__backdrop {
  position:               fixed;
  inset:                  0;
  z-index:                9998;
  border:                 0;
  padding:                0;
  margin:                 0;
  background:             rgba(40, 40, 37, 0.04);
  opacity:                0;
  backdrop-filter:        blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition:             opacity 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.navbar__backdrop[data-state="open"] {
  opacity: 1;
}

.navbar__backdrop[data-state="closed"] {
  opacity:        0;
  pointer-events: none;
}

.navbar__action--icon[aria-expanded="true"][data-variant="secondary"],
.navbar__action--phone[aria-expanded="true"][data-variant="secondary"] {
  border-color: var(--muted-foreground);
  color:        var(--foreground);
  background:   transparent;
  opacity:      1;
}

.navbar__action--icon[aria-expanded="true"][data-variant="secondary"]:hover:not(:disabled):not([aria-disabled="true"]),
.navbar__action--icon[aria-expanded="true"][data-variant="secondary"]:focus-visible,
.navbar__action--phone[aria-expanded="true"][data-variant="secondary"]:hover:not(:disabled):not([aria-disabled="true"]),
.navbar__action--phone[aria-expanded="true"][data-variant="secondary"]:focus-visible {
  border-color: var(--muted-foreground);
  color:        var(--foreground);
  background:   transparent;
  opacity:      1;
}

.navbar__buttons-panel {
  position:        absolute;
  top:             100%;
  z-index:         99;
  left: -36px;
  right: -36px;
  display:         flex;
  justify-content: center;
  padding-top:     20px;
  box-sizing:      border-box;
}

.navbar__mobile-menu {
  position:        fixed;
  top:             12px;
  right:           12px;
  z-index:         10000;
  width:           min(400px, calc(100vw - 24px));
  max-height:      calc(100dvh - 24px);
  background:      var(--card);
  border-radius:   24px;
  box-shadow:      0 6px 18px 0 rgba(40, 40, 37, 0.08), 0 0 6px 0 rgba(40, 40, 37, 0.05);
  padding:         0;
  box-sizing:      border-box;
  overflow:        hidden;
  transform-origin: top right;
  opacity:         0;
  transform:       scale(0.965);
  transition:      opacity 360ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.navbar__mobile-menu[data-state="open"] {
  opacity:   1;
  transform: scale(1);
}

.navbar__mobile-menu[data-state="closed"] {
  opacity:        0;
  transform:      scale(0.965);
  pointer-events: none;
}

.navbar__mobile-scroll {
  display:                  flex;
  flex-direction:           column;
  gap:                      24px;
  width:                    100%;
  max-height:               calc(100dvh - 24px);
  padding:                  12px 12px 24px;
  box-sizing:               border-box;
  overflow-x:               clip;
  overflow-y:               auto;
  overscroll-behavior:      contain;
  -webkit-overflow-scrolling: touch;
}

.navbar__mobile-menu--submenu .navbar__mobile-scroll {
  gap: 12px;
}

.navbar__mobile-view-shell {
  width:       100%;
  min-height:  0;
  transition:  height 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.navbar__mobile-view {
  width:       100%;
  transition:  opacity 110ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.navbar__mobile-view[data-state="idle"],
.navbar__mobile-view[data-state="in"] {
  opacity:   1;
  transform: none;
}

.navbar__mobile-view[data-state="out"] {
  opacity:   0;
  transform: translateY(6px);
  pointer-events: none;
}

.navbar__mobile-menu-head {
  position:    sticky;
  top:         0;
  z-index:     2;
  flex:        0 0 auto;
  width:       100%;
  height:      52px;
  background:  var(--card);
  box-sizing:  border-box;
}

.navbar__mobile-menu-head::after {
  content:         '';
  position:        absolute;
  top:             100%;
  left:            0;
  right:           0;
  height:          16px;
  background:      linear-gradient(to bottom, var(--card) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events:  none;
}

.navbar__mobile-close {
  position:        absolute;
  top:             12px;
  right:           12px;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           48px;
  height:          48px;
  border:          none;
  border-radius:   var(--radius-full);
  background:      rgba(245, 240, 231, 0.01);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color:           var(--foreground);
  cursor:          pointer;
  transition:      background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  z-index:         4;
}

.navbar__mobile-close-spacer {
  width:       48px;
  height:      48px;
  flex-shrink: 0;
}

.navbar__mobile-menu-list {
  display:        flex;
  flex-direction: column;
  width:          100%;
}

.navbar__mobile-home {
  width: 100%;
}

.navbar__mobile-submenu-head {
  position:        sticky;
  top:             0;
  z-index:         2;
  display:         flex;
  flex:            0 0 auto;
  align-items:     center;
  gap:             12px;
  width:           100%;
  height:          48px;
  padding:         12px;
  background:      var(--card);
  box-sizing:      border-box;
}

.navbar__mobile-submenu-head::after {
  content:         '';
  position:        absolute;
  top:             100%;
  left:            0;
  right:           0;
  height:          16px;
  background:      linear-gradient(to bottom, var(--card) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events:  none;
}

.navbar__mobile-back {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           18px;
  height:          27px;
  padding:         0;
  border:          none;
  background:      transparent;
  color:           var(--foreground);
  cursor:          pointer;
  border-radius:   var(--radius-full);
  transition:      background-color 120ms ease, color 120ms ease;
}

.navbar__mobile-submenu-title {
  flex:        1 1 auto;
  min-width:   0;
  margin:      0;
  color:       var(--foreground);
  font-family: var(--font-family-default);
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  text-align:  left;
}

.navbar__mobile-submenu-groups {
  display:        flex;
  flex-direction: column;
  gap:            24px;
  width:          100%;
}

.navbar__mobile-submenu-group {
  display:        flex;
  flex-direction: column;
  width:          100%;
  padding:        0 12px;
  box-sizing:     border-box;
}

.navbar__mobile-submenu-heading {
  display:        flex;
  align-items:    center;
  min-height:     52px;
  margin:         0;
  color:          var(--muted-foreground);
  font-family:    var(--font-family-default);
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-regular);
  line-height:    var(--line-height-xs);
  text-align:     left;
}

.navbar__mobile-submenu-link {
  display:         flex;
  align-items:     center;
  min-height:      52px;
  color:           var(--foreground);
  text-decoration: none;
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-regular);
  line-height:     var(--line-height-sm);
  text-align:      left;
  transition:      color 120ms ease;
}

.navbar__mobile-submenu-link--see-all {
  gap:             12px;
  color:           var(--muted-foreground);
  text-decoration: none;
}

.navbar__mobile-submenu-link-arrow {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           16px;
  height:          16px;
  flex-shrink:     0;
}

.navbar__mobile-partners {
  display:        flex;
  flex-direction: column;
  width:          100%;
  padding:        0 12px;
  box-sizing:     border-box;
}

.navbar__mobile-partners-title {
  display:         flex;
  align-items:     center;
  min-height:      52px;
  color:           var(--foreground);
  text-decoration: none;
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-regular);
  line-height:     var(--line-height-sm);
  text-align:      left;
  transition:      color 120ms ease;
}

.navbar__mobile-partners-branch {
  display:        flex;
  flex-direction: column;
  width:          100%;
  padding-left:   16px;
  border-left:    0.5px solid var(--border);
  box-sizing:     border-box;
}

.navbar__mobile-partners-link {
  display:         flex;
  align-items:     center;
  min-height:      52px;
  color:           var(--foreground);
  text-decoration: none;
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-regular);
  line-height:     var(--line-height-sm);
  text-align:      left;
  transition:      color 120ms ease;
}

.navbar__mobile-company {
  display:        flex;
  flex-direction: column;
  width:          100%;
  padding:        0 12px;
  box-sizing:     border-box;
}

.navbar__mobile-company-link {
  display:         flex;
  align-items:     center;
  min-height:      52px;
  color:           var(--foreground);
  text-decoration: none;
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-regular);
  line-height:     var(--line-height-sm);
  text-align:      left;
  transition:      color 120ms ease;
}

.navbar__mobile-contact {
  display:        flex;
  flex-direction: column;
  gap:            24px;
  width:          100%;
}

.navbar__mobile-contact-group {
  display:        flex;
  flex-direction: column;
  width:          100%;
  padding:        0 12px;
  box-sizing:     border-box;
}

.navbar__mobile-contact-label {
  display:        flex;
  align-items:    center;
  min-height:     52px;
  margin:         0;
  color:          var(--muted-foreground);
  font-family:    var(--font-family-default);
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-regular);
  line-height:    var(--line-height-xs);
  text-align:     left;
}

.navbar__mobile-contact-call {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  padding:         24px 0;
  box-sizing:      border-box;
}

.navbar__mobile-contact-call-btn {
  width:           100%;
  justify-content: center;
  padding-inline:  16px;
}

.navbar__mobile-contact-call-btn .btn__icon {
  width:  14px;
  height: 14px;
}

.navbar__mobile-contact-steps {
  display:        flex;
  flex-direction: column;
  gap:            0;
  width:          100%;
  margin:         0;
  padding:        0;
  list-style:     none;
}

.navbar__mobile-contact-step {
  display:         flex;
  align-items:     center;
  gap:             8px;
  height:      52px;
}

.navbar__mobile-contact-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       20px;
  height:          20px;
  padding:         2px 4px;
  border-radius:   var(--radius-full);
  background:      var(--accent);
  color:           var(--foreground);
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-medium);
  line-height:     var(--line-height-xs);
  box-sizing:      border-box;
}

.navbar__mobile-contact-step-copy {
  color:       var(--foreground);
  font-family: var(--font-family-default);
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  text-align:  left;
}

.navbar__mobile-contact-divider {
  width:        calc(100% - 24px);
  margin:       0 12px;
  border:       0;
  border-top:   0.5px solid var(--border);
  box-sizing:   border-box;
}

.navbar__mobile-contact-statuses {
  display:        flex;
  flex-direction: column;
  width:          100%;
  padding:        0 12px;
  box-sizing:     border-box;
}

.navbar__mobile-contact-status {
  display:         flex;
  align-items:     flex-start;
  gap:             8px;
  width:           100%;
  padding:         16px 0;
  box-sizing:      border-box;
}

.navbar__mobile-contact-dot {
  width:         10px;
  height:        10px;
  border-radius: var(--radius-full);
  flex-shrink:   0;
  margin-top:    5px;
}

.navbar__mobile-contact-dot--orange {
  background: rgba(198, 65, 16, 0.5);
}

.navbar__mobile-contact-dot--blue {
  background: rgba(89, 183, 217, 0.5);
}

.navbar__mobile-contact-status-copy {
  display:        flex;
  flex:           1 1 auto;
  min-width:      0;
  flex-direction: column;
}

.navbar__mobile-contact-status-title,
.navbar__mobile-contact-status-sub {
  margin:         0;
  font-family:    var(--font-family-default);
  font-size:      var(--font-size-sm);
  line-height:    var(--line-height-sm);
  text-align:     left;
}

.navbar__mobile-contact-status-title {
  color:       var(--foreground);
  font-weight: var(--font-weight-regular);
}

.navbar__mobile-contact-status-sub {
  color:       var(--muted-foreground);
  font-weight: var(--font-weight-regular);
}

.navbar__mobile-row {
  display:         flex;
  align-items:     center;
  justify-content: flex-start;
  gap:             12px;
  width:           100%;
  padding:         16px 12px;
  border:          none;
  background:      transparent;
  color:           var(--foreground);
  text-decoration: none;
  text-align:      left;
  box-sizing:      border-box;
  transition:      background-color 120ms ease, color 120ms ease;
}

.navbar__mobile-row-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           14px;
  height:          14px;
  flex-shrink:     0;
  color:           var(--foreground);
  transition:      color 120ms ease;
}

.navbar__mobile-row-icon svg {
  width:  100%;
  height: 100%;
}

.navbar__mobile-row-label {
  flex:        1 1 auto;
  min-width:   0;
  font-family: var(--font-family-default);
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  text-align:  left;
}

.navbar__mobile-row--button {
  cursor: pointer;
}

.navbar__mobile-row-arrow {
  display:         inline-flex;
  align-items:     center;
  justify-content: flex-end;
  width:           18px;
  flex-shrink:     0;
  color:           var(--muted-foreground);
  transition:      color 120ms ease;
}

.navbar__mobile-row-arrow svg {
  width:  16px;
  height: 16px;
}

.navbar__mobile-actions {
  display:        flex;
  flex-direction: column;
  align-items:    stretch;
  gap:            16px;
  width:          100%;
  padding:        16px 0;
}

.navbar__mobile-phone-btn,
.navbar__mobile-cta-btn {
  width: 100%;
  padding-inline: 16px;
}

.navbar__mobile-phone-btn {
  display:               grid;
  grid-template-columns: 1fr auto 1fr;
  gap:                   6px;
  justify-content:       stretch;
}

.navbar__mobile-phone-btn .btn__icon:first-child {
  justify-self: center;
  width:        14px;
  height:       14px;
}

.navbar__mobile-phone-btn .btn__label {
  justify-self: center;
}

.navbar__mobile-phone-btn .btn__icon:last-child {
  justify-self: end;
  width:        18px;
  height:       18px;
}

.navbar__mobile-phone-btn .btn__label,
.navbar__mobile-cta-btn .btn__label {
  flex: 0 0 auto;
}

.navbar__mobile-footer {
  display:        flex;
  justify-content: center;
  width:          100%;
  padding-bottom: 12px;
}

.navbar__mobile-login {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  width:           100%;
  padding:         10px 16px 10px 24px;
  border-radius:   var(--radius-full);
  color:           var(--primary);
  text-decoration: none;
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-medium);
  line-height:     var(--line-height-sm);
  box-sizing:      border-box;
  transition:      color 120ms ease;
}

.navbar__mobile-login-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           14px;
  height:          14px;
}

@media (hover: hover) and (pointer: fine) {
  .navbar__mobile-close:hover,
  .navbar__mobile-close:focus-visible {
    color: var(--muted-foreground);
  }

  .navbar__mobile-back:hover,
  .navbar__mobile-back:focus-visible {
    color: var(--muted-foreground);
  }

  .navbar__mobile-row:hover,
  .navbar__mobile-row:focus-visible {
    color: var(--muted-foreground);
  }

  .navbar__mobile-row:hover .navbar__mobile-row-icon,
  .navbar__mobile-row:hover .navbar__mobile-row-arrow,
  .navbar__mobile-row:focus-visible .navbar__mobile-row-icon,
  .navbar__mobile-row:focus-visible .navbar__mobile-row-arrow {
    color: var(--muted-foreground);
  }

  .navbar__mobile-submenu-link:hover,
  .navbar__mobile-submenu-link:focus-visible,
  .navbar__mobile-partners-title:hover,
  .navbar__mobile-partners-title:focus-visible,
  .navbar__mobile-partners-link:hover,
  .navbar__mobile-partners-link:focus-visible,
  .navbar__mobile-company-link:hover,
  .navbar__mobile-company-link:focus-visible {
    color: var(--muted-foreground);
  }

  .navbar__mobile-submenu-link--see-all:hover,
  .navbar__mobile-submenu-link--see-all:focus-visible {
    color: var(--foreground);
  }

  .navbar__mobile-login:hover,
  .navbar__mobile-login:focus-visible {
    color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  }
}

.navbar__dropdown-panel > *,
.navbar__buttons-panel > * {
  transform-origin: top center;
  will-change:     transform, opacity;
  opacity:         0;
  transform:       scale(0.965);
  transition:      opacity 360ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.navbar__dropdown-panel[data-state="open"] > *,
.navbar__buttons-panel[data-state="open"] > * {
  opacity:   1;
  transform: scale(1);
}

@starting-style {
  .navbar__dropdown-panel[data-state="open"][data-animate-entry="true"] > *,
  .navbar__buttons-panel[data-state="open"][data-animate-entry="true"] > * {
    opacity:   0;
    transform: scale(0.965);
  }
}

.navbar__dropdown-panel[data-state="closed"] > *,
.navbar__buttons-panel[data-state="closed"] > * {
  opacity:        0;
  transform:      scale(0.965);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .navbar::before {
    transition: none;
  }

  .navbar__mobile-menu {
    transition: none;
  }

  .navbar__backdrop {
    transition: none;
  }

  .navbar__dropdown-panel > *,
  .navbar__buttons-panel > * {
    transition: none;
  }
}

@starting-style {
  .navbar__mobile-menu[data-state="open"] {
    opacity:   0;
    transform: scale(0.965);
  }
}

@media (max-width: 991px) {
  .navbar {
    position:       sticky;
    top:            0;
    left:           0;
    right:          0;
    width:          100%;
    background:     transparent;
    padding:        0;
    pointer-events: none;
  }

  .navbar::before {
    display: none;
  }

  .navbar__container {
    max-width:       none;
    margin:          0;
    padding:         24px 24px 0;
    justify-content: flex-end;
    pointer-events:  none;
  }

  .navbar__logo {
    display: none;
  }

  .navbar__items,
  .navbar__buttons {
    display: none;
  }

  .navbar__mobile-trigger {
    display:         inline-flex;
    margin-left:     auto;
    pointer-events:  auto;
  }

  .navbar[data-panel-state="open"] .navbar__mobile-trigger {
    opacity:         0;
    pointer-events:  none;
  }
}

@media (max-width: 479px) {
  .navbar__mobile-menu {
    left:      12px;
    right:     12px;
    width:     auto;
    max-width: none;
  }
}



/* ============================================================
   Shared dropdown styles — common to all mega-menu cards
   ============================================================ */

.ndrop-card {
  width:          100%;
  max-width:      1088px;
  max-height:     var(--navbar-desktop-panel-max-height, calc(100dvh - 160px));
  background:     var(--card);
  border-radius:  24px;
  box-shadow:     0 6px 18px 0 rgba(40, 40, 37, 0.08), 0 0 6px 0 rgba(40, 40, 37, 0.05);
  box-sizing:     border-box;
  overflow:       hidden;
}

.ndrop-card__scroll {
  display:                  grid;
  width:                    100%;
  max-height:               inherit;
  padding:                  12px;
  column-gap:               12px;
  box-sizing:               border-box;
  position:                 relative;
  overflow-x:               clip;
  overflow-y:               auto;
  overscroll-behavior:      contain;
  -webkit-overflow-scrolling: touch;
}

.ndrop-card__scroll--2col { grid-template-columns: 1fr 1fr; }
.ndrop-card__scroll--1-2  { grid-template-columns: 1fr 2fr; }
.ndrop-card__scroll--4col { grid-template-columns: repeat(4, 1fr); }

.ndrop-header-cell {
  font-family: var(--font-family-default);
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  color:       rgba(40, 40, 37, 0.4);
  padding:     24px 28px;
}

.ndrop-col {
  display:        flex;
  flex-direction: column;
  row-gap: 12px;
}

.ndrop-col--span2 { grid-column: span 2; }

.ndrop-nav-link {
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-base);
  font-weight:     var(--font-weight-regular);
  line-height:     var(--line-height-base);
  color:           var(--foreground);
  text-decoration: none;
  transition:      color 120ms ease;
}

.ndrop-nav-link:hover,
.ndrop-nav-link:focus-visible {
  color: var(--muted-foreground);
}


/* ============================================================
   Products mega-menu
   ============================================================ */

.ndrop-product-cards {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.ndrop-product-card {
  display:         flex;
  flex-direction:  column;
  gap:             48px;
  min-height:      220px;
  padding:         24px 24px 32px;
  background:      var(--secondary);
  border:          0.5px solid var(--border);
  border-radius:   16px;
  text-decoration: none;
  transition:      background 0.2s ease, border-color 0.2s ease;
  box-sizing:      border-box;
  justify-content: space-between;
}

.ndrop-product-card:hover {
  background:   var(--background);
  border-color: var(--muted-foreground);
}

.ndrop-product-card__badge {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           60px;
  height:          60px;
  border-radius:   9999px;
  background:      white;
  border:          0.5px solid rgba(40, 40, 37, 0.2);
  flex-shrink:     0;
}

.ndrop-product-card__text {
  display:        flex;
  flex-direction: column;
}

.ndrop-product-card__title {
  font-family: var(--font-family-default);
  font-size:   var(--font-size-large, 1.125rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.75rem;
  color:       var(--foreground);
}

.ndrop-product-card__subtitle {
  font-family: var(--font-family-default);
  font-size:   var(--font-size-large, 1.125rem);
  font-weight: var(--font-weight-regular);
  line-height: 1.75rem;
  color:       var(--foreground);
}

.ndrop-links__col {
  display:        flex;
  flex-direction: column;
  gap:            24px;
  flex:           1;
  padding:        24px 28px;
}

.ndrop-visual {
  position: absolute;
  display:         flex;
  align-items:     flex-end;
  justify-content: flex-end;
  overflow:        hidden;
  right: 24px;
  bottom: 36px;
  pointer-events: none;
  width: 343px;
  max-width: calc(50% - 24px - 12px);
}

.ndrop-visual__img {
  display:     block;
  max-width: 100%;
  width:       auto;
  flex-shrink: 0;
  object-fit:  contain;
}


/* ============================================================
   Customers mega-menu
   ============================================================ */

.ncust-cases {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
}

.ncust-case-card {
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  height:          257px;
  padding:         24px;
  background:      var(--secondary);
  border:          0.5px solid var(--border);
  border-radius:   16px;
  text-decoration: none;
  box-sizing:      border-box;
  transition:      background 0.2s ease, border-color 0.2s ease;
}

.ncust-case-card:hover {
  background:   var(--background);
  border-color: var(--muted-foreground);
}

.ncust-case-card__title {
  margin:      0;
  font-family: var(--font-family-default);
  font-size:   var(--font-size-large, 1.125rem);
  font-weight: var(--font-weight-regular);
  line-height: 1.75rem;
  color:       var(--foreground);
}

.ncust-case-card__title strong {
  font-weight: var(--font-weight-bold);
}

.ncust-case-card__logo {
  display:     flex;
  align-items: center;
  height: 36px;
  align-items: flex-end;
}

.ncust-case-card__logo-img {
  display:    block;
  max-height: 100%;
  width:      auto;
  height:     auto;
  object-fit: contain;
}

.ncust-case-card__logo-img--multiply {
  mix-blend-mode: multiply;
}

.ncust-see-all-card {
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          257px;
  border:          0.5px solid var(--border);
  border-radius:   16px;
  text-decoration: none;
  box-sizing:      border-box;
  transition:      border-color 0.2s ease;
}

.ncust-see-all-card:hover {
  border-color: var(--muted-foreground);
}

.ncust-see-all {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-base);
  font-weight:     var(--font-weight-regular);
  line-height:     var(--line-height-base);
  color:           var(--muted-foreground);
  text-decoration: none;
  transition:      color 120ms ease;
}

.ncust-see-all:hover,
.ncust-see-all:focus-visible,
.ncust-see-all-card:hover .ncust-see-all {
  color: var(--foreground);
}



/* ============================================================
   Company mega-menu
   ============================================================ */

.ncomp-articles {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
}

.ncomp-article {
  display:         flex;
  flex-direction:  column;
  border:          0.5px solid var(--border);
  border-radius:   12px;
  overflow:        hidden;
  text-decoration: none;
  background:      var(--card);
  transition:      border-color 0.2s ease;
}

.ncomp-article:hover {
  border-color: var(--muted-foreground);
}

.ncomp-article__img-wrap {
  position:    relative;
  aspect-ratio: 1 / 1;
  padding:     12px 12px 6px;
  flex-shrink: 0;
  box-sizing:  border-box;
}

.ncomp-article__img-frame {
  width:          100%;
  height:         100%;
  overflow:       hidden;
  border-radius:  6px;
}

.ncomp-article__img {
  display:       block;
  width:         100%;
  height:        100%;
  object-fit:    cover;
  border-radius: 6px;
  transform:     scale(1);
  transition:    transform 0.2s ease;
}

.ncomp-article:hover .ncomp-article__img {
  transform: scale(1.05);
}

.ncomp-article__body {
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  flex:            1;
  padding:         16px 24px 24px;
  gap:             32px;
}

.ncomp-article__meta {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.ncomp-article__title {
  margin:      0;
  font-family: var(--font-family-default);
  font-size:   var(--font-size-large, 1.125rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.75rem;
  color:       var(--foreground);
}

.ncomp-article__byline {
  margin:      0;
  font-family: var(--font-family-default);
  font-size:   var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.ncomp-article__by {
  font-weight: var(--font-weight-regular);
  color:       var(--muted-foreground);
}

.ncomp-article__author {
  font-weight: var(--font-weight-medium);
  color:       var(--primary);
}

.ncomp-article__tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       12px;
}

.ncomp-tag {
  display:      inline-flex;
  align-items:  center;
  height:       26px;
  padding:      4px 12px;
  border-radius: 9999px;
  background:   var(--accent);
  font-family:  var(--font-family-default);
  font-size:    var(--font-size-xs);
  font-weight:  var(--font-weight-medium);
  line-height:  var(--line-height-xs);
  color:        var(--foreground);
  white-space:  nowrap;
}


/* ============================================================
   Partners mega-menu
   ============================================================ */


.npart-links {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  padding:        24px 28px 24px 28px;
}

.npart-submenu {
  display:        flex;
  flex-direction: column;
  gap:            24px;
  padding-left:   24px;
  padding-top:    12px;
  border-left:    0.5px solid var(--border);
}

.npart-submenu .ndrop-nav-link {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
}

.npart-submenu .ndrop-nav-link::after {
  content:         '';
  width:           12px;
  height:          12px;
  flex-shrink:     0;
  opacity:         0;
  transform:       translateX(-2px);
  transition:      opacity 0.2s ease, transform 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M2.5 6H9.5M9.5 6L6 2.5M9.5 6L6 9.5%27 stroke=%27%2385857A%27 stroke-width=%271.25%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

.npart-submenu .ndrop-nav-link:hover::after,
.npart-submenu .ndrop-nav-link:focus-visible::after {
  opacity:   1;
  transform: translateX(0);
}

.npart-quote-block {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  padding:         24px 80px 24px 24px;
  min-height:      184px;
}

.npart-quote-col {
  position: relative;
}

.npart-quote-measure-list {
  position:        absolute;
  top:             0;
  left:            0;
  right:           0;
  display:         flex;
  flex-direction:  column;
  gap:             12px;
  visibility:      hidden;
  pointer-events:  none;
}

.npart-quote-block--measure {
  min-height: 184px;
}

.npart-quote-inner {
  display:        flex;
  flex:           1 1 auto;
  flex-direction: column;
  height:         100%;
  gap:            32px;
}

.npart-quote {
  margin:      0;
  font-family: var(--font-family-default);
  font-size:   1.5rem;
  font-weight: var(--font-weight-regular);
  line-height: 2rem;
  color:       var(--foreground);
  text-indent: -8.5px;  /* hanging open-quote character */
}

.npart-author {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-top:  auto;
}

.npart-avatar {
  position:      relative;
  width:         60px;
  height:        60px;
  border-radius: 9999px;
  overflow:      hidden;
  flex-shrink:   0;
  background:    rgba(198, 65, 16, 0.2);
}

.npart-avatar__img {
  position:   absolute;
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.npart-author__text {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.npart-author__name {
  font-family: var(--font-family-default);
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  color:       var(--foreground);
}

.npart-author__company {
  font-family: var(--font-family-default);
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  color:       var(--muted-foreground);
}

.npart-rotate-btn {
  position:        absolute;
  bottom:          0px;
  right:           0px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   9999px;
  border:          1px solid var(--primary);
  background:      transparent;
  color:           var(--primary);
  cursor:          pointer;
  transition:      background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
}

.npart-rotate-btn:hover {
  border-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  color:        color-mix(in srgb, var(--primary) 80%, #282825 20%);
  background:   transparent;
  opacity:      1;
}

.npart-rotate-btn:focus-visible {
  outline:        2px solid var(--ring);
  outline-offset: 2px;
}


/* ============================================================
   Phone mini-card
   ============================================================ */

.nphone-card {
  width:          100%;
  max-width:      418px;
  max-height:     var(--navbar-desktop-panel-max-height, calc(100dvh - 160px));
  background:     var(--card);
  border-radius:  24px;
  box-shadow:     0 6px 18px 0 rgba(40, 40, 37, 0.08), 0 0 6px 0 rgba(40, 40, 37, 0.05);
  box-sizing:     border-box;
  overflow:       hidden;
}

.nphone-card__scroll {
  display:                  flex;
  flex-direction:           column;
  gap:                      12px;
  width:                    100%;
  max-height:               inherit;
  padding:                  12px;
  box-sizing:               border-box;
  overflow-x:               clip;
  overflow-y:               auto;
  overscroll-behavior:      contain;
  -webkit-overflow-scrolling: touch;
}

.nphone-section-label {
  font-family: var(--font-family-default);
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  color:       rgba(40, 40, 37, 0.4);
  padding:     24px 28px;
  margin:      0;
}

.nphone-number-box {
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--secondary);
  border:          0.5px solid var(--border);
  border-radius:   var(--radius-md);
  padding:         24px;
  margin:          0;
  font-family:     var(--font-family-default);
  font-size:       36px;
  line-height:     40px;
  font-weight:     var(--font-weight-regular);
  color:           var(--foreground);
  text-decoration: none;
  transition:      opacity 0.15s;
  width:           100%;
  box-sizing:      border-box;
}

.nphone-number-box:hover {
  opacity: 0.85;
}

.nphone-content {
  display:        flex;
  flex-direction: column;
  gap:            24px;
  padding:        0 0 24px;
  width:          100%;
  box-sizing:     border-box;
}

.nphone-copy {
  display:        flex;
  flex-direction: column;
  gap:            32px;
  padding:        0 24px;
  width:          100%;
  box-sizing:     border-box;
}

.nphone-steps {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.nphone-step {
  display:     flex;
  align-items: center;
  gap:         12px;
  width:       100%;
}

.nphone-step-badge {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          26px;
  flex-shrink:     0;
  border-radius:   var(--radius-full);
  background:      var(--secondary);
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-medium);
  line-height:     var(--line-height-xs);
  color:           var(--foreground);
}

.nphone-step-text {
  font-family: var(--font-family-default);
  font-size:   var(--font-size-large, 1.125rem);
  font-weight: var(--font-weight-regular);
  line-height: 1.75rem;
  color:       var(--foreground);
}

.nphone-divider {
  border:     none;
  border-top: 1px solid var(--border);
  margin:     0;
  width:      100%;
}

.nphone-status-list {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  padding:        0;
  width:          100%;
}

.nphone-status {
  display:     flex;
  align-items: flex-start;
  gap:         12px;
  width:       100%;
}

.nphone-dot-wrap {
  width:         26px;
  height:        26px;
  flex-shrink:   0;
  display:       flex;
  align-items:   center;
  justify-content: center;
}

.nphone-dot {
  width:         12px;
  height:        12px;
  border-radius: var(--radius-full);
}

.nphone-dot--orange { background: rgba(198, 65, 16, 0.5); }
.nphone-dot--blue   { background: rgba(89, 183, 217, 0.5); }

.nphone-status-body {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.nphone-status-title {
  margin:      0;
  font-family: var(--font-family-default);
  font-size:   var(--font-size-large, 1.125rem);
  font-weight: var(--font-weight-regular);
  line-height: 1.75rem;
  color:       var(--foreground);
}

.nphone-status-sub {
  margin:      0;
  font-family: var(--font-family-default);
  font-size:   var(--font-size-large, 1.125rem);
  font-weight: var(--font-weight-regular);
  line-height: 1.75rem;
  color:       var(--muted-foreground);
}


/* ============================================================
   Sign-in mini-card
   ============================================================ */

.nsignin-card {
  width:          100%;
  max-width:      418px;
  max-height:     var(--navbar-desktop-panel-max-height, calc(100dvh - 160px));
  background:     var(--card);
  border-radius:  24px;
  box-shadow:     0 6px 18px 0 rgba(40, 40, 37, 0.08), 0 0 6px 0 rgba(40, 40, 37, 0.05);
  box-sizing:     border-box;
  overflow:       hidden;
}

.nsignin-card__scroll {
  display:                  flex;
  flex-direction:           column;
  gap:                      8px;
  width:                    100%;
  max-height:               inherit;
  padding:                  12px;
  box-sizing:               border-box;
  overflow-x:               clip;
  overflow-y:               auto;
  overscroll-behavior:      contain;
  -webkit-overflow-scrolling: touch;
}

.nsignin-header {
  font-family: var(--font-family-default);
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  color:       rgba(40, 40, 37, 0.4);
  padding:     24px 28px 24px;
}

.nsignin-actions {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  padding:        0 24px 12px;
}

.nsignin-btn {
  width: 100%;
}

/* ============================================================
   Button — Component Styles
   Scheme-aware: inherits data-scheme from a parent element.
   All color tokens flip automatically in dark context.
   ============================================================ */

.btn {
  /* Layout */
  align-items:     center;
  border:          1px solid transparent;
  box-sizing:      border-box;
  cursor:          pointer;
  display:         inline-flex;
  flex-shrink:     0;
  justify-content: center;
  overflow:        hidden;
  text-decoration: none;
  user-select:     none;
  white-space:     nowrap;

  /* Typography */
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-medium);

  /* Transition */
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
}


/* ============================================================
   Sizes
   Heights: xs=26px  sm=32px  md=36px  lg=40px
   All use font-size-sm (14px) except xs which uses font-size-xs (12px).
   ============================================================ */

.btn[data-size="xs"] {
  font-size:   var(--font-size-xs);      /* 12px */
  line-height: var(--line-height-xs);    /* 16px */
  gap:         0.25rem;                  /* 4px  */
  padding:     0.3125rem 0.75rem;        /* 5px 12px → height 26px */
  --btn-gap:   0.25rem;
}

.btn[data-size="sm"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.375rem 1rem;            /* 6px 16px → height 32px */
  --btn-gap:   0.375rem;
}

.btn[data-size="md"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.5rem 1rem;              /* 8px 16px → height 36px */
  --btn-gap:   0.375rem;
}

.btn[data-size="lg"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.5rem;                   /* 8px  */
  padding:     0.625rem 1.5rem;          /* 10px 24px → height 40px */
  --btn-gap:   0.5rem;
}

.btn[data-icon-only="true"] {
  padding: 0;
}

.btn[data-size="xs"][data-icon-only="true"] {
  width:  1.625rem; /* 26px */
  height: 1.625rem;
}

.btn[data-size="sm"][data-icon-only="true"] {
  width:  2rem; /* 32px */
  height: 2rem;
}

.btn[data-size="md"][data-icon-only="true"] {
  width:  2.25rem; /* 36px */
  height: 2.25rem;
}

.btn[data-size="lg"][data-icon-only="true"] {
  width:  2.5rem; /* 40px */
  height: 2.5rem;
}


/* ============================================================
   Shapes
   ============================================================ */

.btn[data-shape="rounded"] { border-radius: var(--radius-sm);   } /* 8px  */
.btn[data-shape="round"]   { border-radius: var(--radius-full); } /* pill */


/* ============================================================
   Variants
   ============================================================ */

.btn[data-variant="primary"] {
  background-color: var(--primary);
  border-color:     var(--primary);
  color:            var(--primary-foreground);
}

.btn[data-variant="secondary"] {
  background-color: transparent;
  border-color:     var(--primary);
  color:            var(--primary);
}


.btn[data-variant="info"] {
  background-color: var(--info);
  border-color:     var(--info);
  color:            var(--info-foreground);
}

.btn[data-variant="success"] {
  background-color: var(--success);
  border-color:     var(--success);
  color:            var(--success-foreground);
}

.btn[data-variant="warning"] {
  background-color: var(--warning);
  border-color:     var(--warning);
  color:            var(--warning-foreground);
}

.btn[data-variant="destructive"] {
  background-color: var(--destructive);
  border-color:     var(--destructive);
  color:            var(--destructive-foreground);
}


/* ============================================================
   States
   ============================================================ */

/* Hover — default (card, info, success, warning, destructive) */
.btn:hover:not(:disabled):not([aria-disabled="true"]) {
  opacity: 0.88;
}

/* Primary hover — 20% dark overlay on background, full opacity */
.btn[data-variant="primary"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--primary) 80%, #282825 20%);
  color:            var(--card);
  opacity:          1;
}

/* Secondary hover — darker primary border + text, no fill */
.btn[data-variant="secondary"]:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  color:        color-mix(in srgb, var(--primary) 80%, #282825 20%);
  opacity:      1;
}

/* Active / pressed */
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  opacity: 0.76;
}

/* Focus */
.btn:focus-visible {
  outline:        2px solid var(--ring);
  outline-offset: 2px;
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor:         not-allowed;
  opacity:        0.4;
  pointer-events: none;
}


/* ============================================================
   Icon slot
   ============================================================ */

.btn__icon {
  align-items:     center;
  display:         inline-flex;
  flex-shrink:     0;
  justify-content: center;
}

.btn[data-size="xs"] .btn__icon:not(.btn__icon--hover-only) { height: 0.75rem; width: 0.75rem; } /* 12px */
.btn[data-size="sm"] .btn__icon:not(.btn__icon--hover-only),
.btn[data-size="md"] .btn__icon:not(.btn__icon--hover-only),
.btn[data-size="lg"] .btn__icon:not(.btn__icon--hover-only) { height: 1rem;    width: 1rem;    } /* 16px */

.btn__icon svg {
  display: block;
  height:  100%;
  width:   100%;
}


/* ============================================================
   Hover-only icon — hidden by default, slides/fades in on :hover.
   Negative margin-right cancels the flex gap when collapsed so
   the label stays flush with the padding edge.
   ============================================================ */

/* Must come after the .btn[data-size] .btn__icon rules to win specificity tie */
.btn .btn__icon--hover-only {
  min-width:    0;        /* override flex min-width: auto so item can truly collapse */
  width:        0;
  overflow:     hidden;
  opacity:      0;
  margin-right: calc(-1 * var(--btn-gap, 0.5rem));
  transition:   width 0.2s ease, opacity 0.15s ease, margin-right 0.2s ease;
}

.btn:hover:not(:disabled):not([aria-disabled="true"]) .btn__icon--hover-only {
  width:        1rem; /* sm / md / lg */
  height:       1rem;
  opacity:      1;
  margin-right: 0;
}

.btn[data-size="xs"]:hover:not(:disabled):not([aria-disabled="true"]) .btn__icon--hover-only {
  width:  0.75rem;
  height: 0.75rem;
}


/* ============================================================
   Badge slot — optional count pill inside the button
   ============================================================ */

.btn__badge {
  align-items:      center;
  background-color: var(--primary);
  border-radius:    var(--radius-full);
  color:            var(--primary-foreground);
  display:          inline-flex;
  font-size:        var(--font-size-xs);   /* 12px */
  font-weight:      var(--font-weight-medium);
  justify-content:  center;
  line-height:      var(--line-height-xs); /* 16px */
  min-width:        1.25rem;               /* 20px */
  padding:          0.125rem 0.375rem;     /* 2px 6px */
}