/* V30.166 · motion system, premium mobile credits and repaired CTAs. */

/* Reveal only after JS is ready, so content never stays invisible on failure. */
body.cb-motion-ready [data-cb-reveal] {
  opacity: 0 !important;
  transform: translate3d(0, 28px, 0) scale(.99) !important;
  filter: blur(5px) !important;
  transition:
    opacity .72s cubic-bezier(.22, 1, .36, 1) var(--cb-reveal-delay, 0ms),
    transform .82s cubic-bezier(.22, 1, .36, 1) var(--cb-reveal-delay, 0ms),
    filter .68s ease var(--cb-reveal-delay, 0ms) !important;
  will-change: opacity, transform, filter;
}

body.cb-motion-ready [data-cb-reveal].cb-reveal-in {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

body.cb-motion-ready [data-cb-reveal="image"] {
  transform: translate3d(0, 24px, 0) scale(1.025) !important;
  clip-path: inset(0 0 10% 0 round 16px) !important;
}

body.cb-motion-ready [data-cb-reveal="image"].cb-reveal-in {
  transform: none !important;
  clip-path: inset(0 0 0 0 round 0) !important;
}

/* Buttons: actual CB buttons, not underlined text with an emoji taped on. */
@media (max-width: 760px) {
  #services-page .services-offer-card a,
  #services-page .services-offer-card.dark a,
  #sync-page .sync-btn,
  #sync-page .sync-offer.dark .sync-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    min-height: 48px !important;
    padding: 0 19px !important;
    border: 1px solid rgba(10, 8, 7, .16) !important;
    border-radius: 999px !important;
    background: #0b0908 !important;
    color: #fff !important;
    box-shadow: 0 10px 28px rgba(45, 28, 16, .13) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .11em !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  #services-page .services-offer-card a::after,
  #sync-page .sync-btn::after {
    content: "→" !important;
    margin-left: 10px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  #services-page .services-offer-card a:active,
  #sync-page .sync-btn:active {
    transform: scale(.98) !important;
  }

  /* Category navigation becomes a clean horizontal pill rail. */
  .cb-category-tabs {
    gap: 8px !important;
    margin: 0 -18px 18px 0 !important;
    padding: 0 18px 4px 0 !important;
    scroll-snap-type: x proximity !important;
  }

  .cb-category-tabs button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 138px !important;
    min-height: 52px !important;
    padding: 10px 15px !important;
    border-radius: 999px !important;
    scroll-snap-align: start !important;
    box-shadow: none !important;
  }

  .cb-category-tabs button span {
    display: inline !important;
    margin: 0 7px 0 0 !important;
  }

  /* Mobile catalogue: list rows, never an Excel-style three-column grid. */
  .cb-category-panel .cb-table-wrap {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .cb-category-panel .cb-services-table,
  .cb-category-panel .cb-services-table tbody {
    display: block !important;
    width: 100% !important;
  }

  .cb-category-panel .cb-services-table thead { display: none !important; }

  .cb-category-panel.active .cb-services-table tbody tr:not(.cb-table-category) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "service credits"
      "service price" !important;
    gap: 6px 14px !important;
    align-items: center !important;
    min-height: 84px !important;
    padding: 16px 2px !important;
    border-bottom: 1px solid rgba(240, 236, 224, .12) !important;
    animation: cb-credit-row-in .58s cubic-bezier(.22, 1, .36, 1) both !important;
  }

  .cb-category-panel.active .cb-services-table tbody tr:nth-child(2) { animation-delay: 55ms !important; }
  .cb-category-panel.active .cb-services-table tbody tr:nth-child(3) { animation-delay: 110ms !important; }
  .cb-category-panel.active .cb-services-table tbody tr:nth-child(4) { animation-delay: 165ms !important; }
  .cb-category-panel.active .cb-services-table tbody tr:nth-child(5) { animation-delay: 220ms !important; }

  @keyframes cb-credit-row-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }

  .cb-category-panel .cb-services-table tbody tr:not(.cb-table-category):first-child {
    border-top: 1px solid rgba(240, 236, 224, .12) !important;
  }

  .cb-category-panel .cb-services-table tbody td {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .cb-category-panel .cb-services-table tbody td:nth-child(1) {
    grid-area: service !important;
    align-self: center !important;
    padding-right: 6px !important;
  }

  .cb-category-panel .cb-services-table tbody td:nth-child(1) strong {
    display: block !important;
    max-width: 240px !important;
    font-size: 16px !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
  }

  .cb-category-panel .cb-services-table tbody td:nth-child(2) {
    grid-area: credits !important;
    justify-self: end !important;
  }

  .cb-category-panel .cb-services-table .cb-table-credits,
  .cb-category-panel .cb-services-table .cb-table-credits:not(.quote),
  .cb-category-panel .cb-services-table .cb-table-credits.quote {
    min-width: 48px !important;
    padding: 9px 12px !important;
    border: 1px solid rgba(224, 176, 72, .35) !important;
    border-radius: 999px !important;
    background: rgba(224, 176, 72, .10) !important;
    color: #f0bd69 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .03em !important;
    text-align: center !important;
    text-transform: none !important;
  }

  .cb-category-panel .cb-services-table .cb-table-credits.quote {
    border-color: rgba(240, 236, 224, .16) !important;
    background: rgba(240, 236, 224, .05) !important;
    color: rgba(240, 236, 224, .58) !important;
    font-size: 9px !important;
  }

  .cb-category-panel .cb-services-table tbody td:nth-child(3) {
    grid-area: price !important;
    justify-self: end !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    text-align: right !important;
  }

  /* Light version of the same editorial rows. */
  .cb-service-catalog.light .cb-category-panel .cb-services-table tbody tr:not(.cb-table-category) {
    border-color: rgba(9, 7, 6, .13) !important;
  }

  .cb-service-catalog.light .cb-category-panel .cb-services-table tbody tr:not(.cb-table-category):first-child {
    border-color: rgba(9, 7, 6, .13) !important;
  }

  .cb-service-catalog.light .cb-category-panel .cb-services-table .cb-table-credits,
  .cb-service-catalog.light .cb-category-panel .cb-services-table .cb-table-credits:not(.quote) {
    border-color: rgba(154, 97, 47, .24) !important;
    background: #f3e5d2 !important;
    color: #70431f !important;
  }

  .cb-service-catalog.light .cb-category-panel .cb-services-table .cb-table-credits.quote {
    border-color: rgba(9, 7, 6, .12) !important;
    background: rgba(9, 7, 6, .035) !important;
    color: rgba(9, 7, 6, .52) !important;
  }

  .cb-service-catalog.light .cb-category-panel .cb-table-price {
    color: rgba(9, 7, 6, .46) !important;
  }

  #services-page .services-credit-annual {
    padding: 16px 0 !important;
    border-top: 1px solid rgba(9, 7, 6, .14) !important;
    border-bottom: 1px solid rgba(9, 7, 6, .14) !important;
    background: transparent !important;
    color: rgba(9, 7, 6, .62) !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  #services-page .services-credit-annual strong { color: #8a5329 !important; }

  /* Memberships: heading first, then cards in a controlled cascade. */
  body.cb-motion-ready #home-page .memberships-section .m-hdr,
  body.cb-motion-ready #home-page .memberships-section .m-card,
  body.cb-motion-ready #home-page .memberships-section .m-card.vis {
    opacity: 0 !important;
    transform: translate3d(0, 30px, 0) scale(.985) !important;
    filter: blur(5px) !important;
    transition:
      opacity .7s cubic-bezier(.22, 1, .36, 1) var(--cb-member-delay, 0ms),
      transform .82s cubic-bezier(.22, 1, .36, 1) var(--cb-member-delay, 0ms),
      filter .65s ease var(--cb-member-delay, 0ms) !important;
  }

  body.cb-motion-ready #home-page .memberships-section.cb-members-reveal .m-hdr,
  body.cb-motion-ready #home-page .memberships-section.cb-members-reveal .m-card,
  body.cb-motion-ready #home-page .memberships-section.cb-members-reveal .m-card.vis {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  #home-page .memberships-section .m-hdr { --cb-member-delay: 0ms; }
  #home-page .memberships-section .m-card:nth-child(1) { --cb-member-delay: 130ms; }
  #home-page .memberships-section .m-card:nth-child(2) { --cb-member-delay: 230ms; }
  #home-page .memberships-section .m-card:nth-child(3) { --cb-member-delay: 330ms; }
  #home-page .memberships-section .m-card:nth-child(4) { --cb-member-delay: 430ms; }
}

@media (prefers-reduced-motion: reduce) {
  body.cb-motion-ready [data-cb-reveal],
  body.cb-motion-ready #home-page .memberships-section .m-hdr,
  body.cb-motion-ready #home-page .memberships-section .m-card,
  body.cb-motion-ready #home-page .memberships-section .m-card.vis {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .cb-category-panel .cb-services-table tbody tr { animation: none !important; }
}