/* ===========================================================
   Home Aligners — base styles (ported 1:1 from design)
   =========================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#FFD24F;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#141414;-webkit-font-smoothing:antialiased;letter-spacing:-0.01em}
p{font-weight:460;letter-spacing:.006em}
a{color:#141414;text-decoration:none}
a:hover{color:#1A63D6}
img{max-width:100%}
::selection{background:#FFD24F;color:#141414}
.serif{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;letter-spacing:0;vertical-align:middle;line-height:inherit}

/* choreographed entry system */
[data-reveal]{opacity:0;transform:translateY(48px) scale(.965);filter:blur(8px);transition:opacity .9s cubic-bezier(.19,1,.22,1),transform 1.15s cubic-bezier(.19,1,.22,1),filter .8s ease;will-change:opacity,transform,filter}
[data-reveal].in{opacity:1;transform:none;filter:blur(0)}
[data-anim="left"]{transform:translateX(-60px) scale(.98)}
[data-anim="right"]{transform:translateX(60px) scale(.98)}
[data-anim="zoom"]{transform:scale(.8);filter:blur(12px)}
[data-anim="down"]{transform:translateY(-44px) scale(.98)}
[data-anim="rise"]{transform:translateY(80px) scale(.94)}
[data-clip]{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(14px);transition:opacity .5s ease,clip-path 1.2s cubic-bezier(.19,1,.22,1),transform 1.2s cubic-bezier(.19,1,.22,1)}
[data-clip].in{opacity:1;clip-path:inset(0 0 -6% 0);transform:none}

.ha-faq-a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.16,.8,.24,1)}
.ha-faq.open .ha-faq-a{max-height:420px}
.ha-faq.open .ha-faq-plus{transform:rotate(45deg);background:#FFD24F}
.ha-faq.open .ha-faq-plus svg{stroke:#141414}

.lift{transition:transform .5s cubic-bezier(.16,.8,.24,1),box-shadow .5s ease}
.lift:hover{transform:translateY(-6px)}

.htoggle-btn{cursor:pointer;font-family:inherit;font-size:17.5px;font-weight:700;padding:8px 15px;border-radius:100px;border:none;background:transparent;color:#5f5f5f;transition:all .3s ease}
.htoggle-btn.on{background:#FFD24F;color:#141414}

@keyframes ha-float{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-12px) rotate(var(--r,0deg))}}
@keyframes ha-float-thumb{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes ha-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ha-pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
@keyframes ha-morph{0%,100%{border-radius:46% 54% 48% 52%/52% 44% 56% 48%}50%{border-radius:54% 46% 55% 45%/45% 55% 45% 55%}}

/* Product Floating Images */
.floating-thumb{animation:ha-float-thumb 6s ease-in-out infinite !important}
.floating-thumb:nth-child(2){animation-delay:0.3s !important}
.floating-thumb:nth-child(3){animation-delay:0.6s !important}

/* Product Thumbnail Gallery */
.product-thumb{cursor:pointer;transition:all .3s ease;-webkit-tap-highlight-color:transparent}
.product-thumb:hover{transform:scale(1.06);box-shadow:0 24px 60px -12px rgba(20,20,20,.5) !important}
.product-thumb:active{transform:scale(0.98)}
.product-thumb.active{border-color:#141414 !important;box-shadow:0 24px 60px -8px rgba(20,20,20,.6) !important}

/* Main Product Image Transition */
#product-main-image{transition:opacity .35s ease}
#product-main-image[src]{animation:none}

/* Disable animations on mobile */
@media (max-width: 760px){
  .product-floating-thumbs > div{animation:none !important}
  .product-thumb:hover{transform:none !important}
  .product-visual{display:block !important}
  .product-visual > div:first-child{display:block !important}
}

.hero-text{position:absolute;inset:0;z-index:2;max-width:1340px;margin:0 auto;left:0;right:0;padding:0 48px;display:flex;align-items:center}

@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-clip]{transition:none;opacity:1;transform:none;filter:none;clip-path:none}
  .lift{transition:none}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important}
}

/* ===========================================================
   Mobile navigation
   =========================================================== */
.mobile-menu-btn{display:none;flex:0 0 auto;width:44px;height:44px;border-radius:12px;border:1px solid #FFD24F;background:#fff;align-items:center;justify-content:center;cursor:pointer;padding:0}
.mobile-menu-btn span,.mobile-menu-btn span::before,.mobile-menu-btn span::after{content:"";display:block;width:18px;height:2px;background:#141414;border-radius:2px;transition:transform .3s ease,opacity .3s ease}
.mobile-menu-btn span{position:relative}
.mobile-menu-btn span::before{position:absolute;top:-6px}
.mobile-menu-btn span::after{position:absolute;top:6px}
.mobile-menu-btn.open span{background:transparent}
.mobile-menu-btn.open span::before{transform:translateY(6px) rotate(45deg)}
.mobile-menu-btn.open span::after{transform:translateY(-6px) rotate(-45deg)}

.mobile-menu{display:none;position:fixed;inset:0;z-index:300;background:rgba(20,20,20,.42);opacity:0;pointer-events:none;transition:opacity .3s ease}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu-panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,84vw);background:#fff;padding:26px 26px 32px;box-shadow:-20px 0 60px -20px rgba(20,20,20,.5);transform:translateX(100%);transition:transform .35s cubic-bezier(.19,1,.22,1);display:flex;flex-direction:column;gap:4px}
.mobile-menu.open .mobile-menu-panel{transform:translateX(0)}
.mobile-menu-close{align-self:flex-end;width:38px;height:38px;border-radius:10px;border:1px solid #FFD24F;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-bottom:18px}
.mobile-menu-panel a{font-size:21.5px;font-weight:700;color:#141414;padding:14px 6px;border-bottom:1px solid #F1F0EA}
.mobile-menu-panel .mm-cta{margin-top:18px;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#FFD24F;color:#141414;font-size:19.5px;font-weight:700;padding:16px 20px;border-radius:100px;border-bottom:none}

/* ===========================================================
   Responsive overrides (defeat inline styles with !important —
   the base markup is intentionally inline-styled to mirror the
   source design 1:1 at desktop size)
   =========================================================== */
@media (max-width: 1080px){
  .r-pad-120{padding-top:88px !important;padding-bottom:88px !important}
  .grid-treat4,.grid-how{grid-template-columns:repeat(2,1fr) !important}
  .grid-treat-block{grid-template-columns:1fr !important;gap:0 !important}
  .grid-treat-block .treat-photo{min-height:240px !important;order:1}
  .grid-treat-block > div:last-child{padding:32px 28px !important;order:2}
  .grid-product{grid-template-columns:1fr !important}
  .product-visual{order:2;display:flex;justify-content:center;align-items:center;margin:0 auto}
}

@media (max-width: 1000px){
  #top{flex-direction:column-reverse !important;min-height:auto !important;justify-content:flex-start !important}
  .hero-text{position:relative !important;inset:auto !important;padding:36px 26px 8px !important;display:block !important}
  .hero-text > div{max-width:none !important}
  #top h1{white-space:normal !important}
}

@media (max-width: 900px){
  .site-nav,.header-cta{display:none !important}
  .mobile-menu-btn{display:inline-flex !important}
  .mobile-menu{display:block}
  .grid-difference,.grid-product,.grid-collage-outer,.grid-whofor,.grid-results-feature{grid-template-columns:1fr !important}
  .grid-product .product-visual{order:0;display:block !important;margin:0 auto !important}
  .grid-whofor .whofor-visual{min-height:380px !important;order:0;display:flex;justify-content:center;align-items:center;margin:0 auto}
  .grid-whofor-cards{grid-template-columns:1fr 1fr !important}
  .hero-actions,.hero-trust{justify-content:center !important}
  .hero-text{text-align:center}
  .hero-text p{margin-left:auto !important;margin-right:auto !important}
  .grid-product{justify-items:center}
  .grid-whofor{justify-items:center}
  .grid-results-feature{justify-items:center}
}

@media (max-width: 760px){
  #product{padding:50px 20px !important}
  #product > div{grid-template-columns:1fr !important;gap:20px !important}
  .product-visual{position:relative !important;width:100% !important;margin:0 auto 0 !important;display:block !important;order:1 !important}
  .product-visual > div:first-child{width:100% !important;aspect-ratio:1/1.2 !important;max-width:100% !important;display:block !important;border-radius:20px !important;overflow:hidden !important}
  .product-visual > div:first-child img{width:100% !important;height:100% !important;display:block !important}
  .product-floating-thumbs{position:relative !important;left:0 !important;top:0 !important;width:100% !important;display:flex !important;flex-direction:row !important;gap:8px !important;margin-top:12px !important;margin-bottom:0 !important}
  .product-floating-thumbs > div{width:100% !important;aspect-ratio:1.8/1 !important;border:3px solid #FFD24F !important;border-radius:14px !important;display:block !important;overflow:hidden !important}
  .product-floating-thumbs > div img{width:100% !important;height:100% !important}
  .product-thumb{width:100% !important;display:block !important}
  #product > div > div:last-child{order:2 !important;text-align:center !important}
  #product h2{font-size:clamp(26px,6vw,40px) !important;margin-bottom:16px !important}
  #product p{font-size:17px !important;max-width:100% !important}
  #product a{font-size:17px !important;padding:14px 24px !important}
  
  .grid-treat-block{grid-template-columns:1fr !important;gap:0 !important;margin-top:18px !important}
  .grid-treat-block .treat-photo{min-height:220px !important;order:1 !important;width:100% !important}
  .grid-treat-block > div:last-child{padding:28px 24px !important;order:2 !important}
  
  .outer-frame{padding:8px !important}
  .inner-card{border-radius:22px !important}
  header.site-header{padding:18px 20px !important}
  #ha-wordmark span:first-child{font-size:18px !important}
  #ha-wordmark span:last-child{font-size:12px !important}
  #top > img{display:none !important}
  .serif{display:inline-block !important;-webkit-box-decoration-break:unset !important;box-decoration-break:unset !important;padding:.12em .16em !important;line-height:1.5 !important;vertical-align:baseline !important}
  section,.sec-pad{padding-left:20px !important;padding-right:20px !important}
  .r-pad-120{padding-top:64px !important;padding-bottom:64px !important}
  .hero-actions{flex-direction:column !important;align-items:stretch !important}
  .hero-actions a{justify-content:center !important}
  .grid-how,.grid-treat4{grid-template-columns:1fr 1fr !important;gap:14px !important}
  .grid-results-cards,.grid-whofor-cards{grid-template-columns:1fr !important}
  .collage-photo{position:relative !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;transform:none !important;width:100% !important;height:220px !important;margin-bottom:14px !important}
  .collage-inner{min-height:auto !important}
  .grid-footer{grid-template-columns:1fr 1fr !important;gap:28px !important}
  .footer-brand{grid-column:1/-1}
  .pricing-block,.cta-block{padding:48px 24px !important}
  .kit-caption{padding:26px 22px !important}
  .theproduct-badge{width:38% !important;bottom:-14px !important}
  .theproduct-wrap{padding-bottom:90px !important}
  .product-visual{display:flex;justify-content:center;align-items:center}
  .whofor-visual{display:flex;justify-content:center;align-items:center}
  .grid-product{justify-items:center}
  .grid-whofor{justify-items:center}
  .grid-results-feature{justify-items:center}
  .collage-inner{display:flex;flex-direction:column;align-items:center;justify-content:center}
  .theproduct-badge{left:50% !important}
}

@media (max-width: 600px){
  .product-floating-thumbs{gap:6px !important;margin-top:10px !important}
  .product-floating-thumbs > div{aspect-ratio:1.8/1 !important;border-width:3px !important}
  #product > div{gap:18px !important;padding:0 !important}
  .product-visual > div:first-child{aspect-ratio:1/1.15 !important}
}

@media (max-width: 480px){
  .grid-how,.grid-treat4,.grid-footer{grid-template-columns:1fr !important}
  h1{letter-spacing:-0.03em !important}
  
  #product{padding:45px 16px !important}
  #product > div{gap:16px !important}
  .product-visual{margin-bottom:0 !important}
  .product-visual > div:first-child{aspect-ratio:1/1.25 !important;border-radius:16px !important}
  .product-floating-thumbs{gap:5px !important;margin-top:10px !important}
  .product-floating-thumbs > div{aspect-ratio:1.6/1 !important;border-width:2px !important;border-radius:12px !important}
  #product h2{font-size:clamp(22px,5vw,32px) !important;margin-bottom:12px !important}
  #product p{font-size:16px !important;margin:12px 0 20px !important}
  #product a{font-size:16px !important;padding:12px 20px !important}
  
  .grid-treat-block{grid-template-columns:1fr !important;gap:0 !important;margin-top:16px !important}
  .grid-treat-block .treat-photo{min-height:200px !important}
  .grid-treat-block > div:last-child{padding:22px 18px !important}
  .grid-treat-block h3{font-size:clamp(18px,4vw,22px) !important}
  .grid-treat-block p{font-size:15px !important}
}