/* /thinx-box-ai — bridges the immersive Three.js page to the ConnectOWL design system.
   Loaded before the page's own <style>; selectors here are scoped and only add/override. */

/* product nav floats over the 3D canvas */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 120; background: rgba(0, 0, 0, .55); }
.nav.is-scrolled { border-bottom-color: rgba(255, 255, 255, .08); }
.tb-progress { z-index: 130 !important; }

/* typography: Inter for display numbers/titles, mono for technical labels */
.tb-hero-title { font-family: var(--font) !important; font-weight: 750 !important; letter-spacing: -.035em !important; text-transform: none !important;
  font-size: clamp(44px, 8vw, 104px) !important; }
.tb-hero-sub { font-family: var(--mono); letter-spacing: .28em !important; }
.tb-title { font-family: var(--font); font-weight: 650 !important; letter-spacing: -.03em; line-height: 1.08 !important; }
.tb-desc { font-size: 1rem !important; line-height: 1.6 !important; color: #A1A1A6 !important; }
.tb-spec-val, .tb-prod-ch, .tb-cta-title, .tb-v2-step-num, .tb-counter, .tbc-m, .tbc-back span, .tb-v2-title {
  font-family: var(--font) !important; font-weight: 700 !important; letter-spacing: -.03em !important; }
.tb-cta-title { text-transform: none; font-size: clamp(30px, 4.6vw, 56px) !important; }
.tb-seg-desc, .tb-topo-sub, .tb-prod-type, .tb-prod-form { font-family: var(--font); }

/* footer sits above the fixed canvas */
.tb-foot { position: relative; z-index: 2; }
.tb-foot .footer { background: var(--bg-2); }

/* CTA button aligned with .btn */
.tb-cta-btn { border-radius: var(--r-pill) !important; min-height: 48px; font-family: var(--font) !important; font-weight: 600 !important;
  letter-spacing: -.01em !important; text-transform: none !important; transition: transform var(--dur-press) var(--ease-out) !important; }
.tb-cta-btn:active { transform: scale(.97); }

@media (max-width: 960px) {
  .nav { background: rgba(0, 0, 0, .8); }
}
@media (prefers-reduced-motion: reduce) {
  .tb-hero-title, .tb-hero-sub, .tb-hero-line, .tb-scroll-hint { animation-duration: .01ms !important; }
}
.tb-cta-btn { font-size: 1rem !important; padding: 14px 32px !important; }
/* floating controls step aside when the footer is on screen */
.tb-auto, .tb-top, .tb-music { transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); }
body.tb-at-foot .tb-auto, body.tb-at-foot .tb-top, body.tb-at-foot .tb-music { opacity: 0 !important; pointer-events: none !important; transform: translateY(8px); }
.tb-devtab { font-size: 10.5px !important; min-height: 32px; }
@media (max-width: 560px) { .tb-hero-sub { letter-spacing: .16em !important; font-size: 11px !important; } }