/* ===========================================================================
   Team Energy landing pages (try-team-energy / see-team-energy)
   Recreated from the "design_handoff_team_energy" handoff bundle.

   The section markup carries its visual styling inline (verbatim from the
   design source). This stylesheet holds the pieces inline styles can't:
   keyframes, :hover states (the design authored these as a custom
   `style-hover` attribute), and the responsive overrides (authored as
   container queries; ported to viewport media queries per the handoff).
   Everything is scoped under .te-lp so it can't leak into the global site.
   =========================================================================== */

.te-lp { font-family: 'Poppins', sans-serif; color: #1C222B; background: #ffffff; width: 100%; overflow-x: clip; }
.te-lp *, .te-lp *::before, .te-lp *::after { box-sizing: border-box; }

/* ---------- keyframes (only those referenced by the markup) ---------- */
@keyframes teV2Rise { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes teV2Dash { from { stroke-dashoffset: 340; } to { stroke-dashoffset: 0; } }
@keyframes teV2HeroDot { 0% { box-shadow: 0 0 0 0 rgba(70,190,67,0.5); } 70% { box-shadow: 0 0 0 20px rgba(70,190,67,0); } 100% { box-shadow: 0 0 0 0 rgba(70,190,67,0); } }
@keyframes teBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes teRingPurple { 0% { box-shadow: 0 0 0 0 rgba(116,40,245,.5); } 70% { box-shadow: 0 0 0 9px rgba(116,40,245,0); } 100% { box-shadow: 0 0 0 0 rgba(116,40,245,0); } }
@keyframes teBattFill { 0%,6% { width: 15%; background: #E5484D; } 16% { width: 24%; background: #EE7A2E; } 30% { width: 54%; background: #EFA023; } 42%,94% { width: 100%; background: #46BE43; } 100% { width: 15%; background: #E5484D; } }
@keyframes teBattGlow { 0%,6% { opacity: .1; transform: translate(-50%,-50%) scale(.82); } 42%,94% { opacity: .58; transform: translate(-50%,-50%) scale(1); } 100% { opacity: .1; transform: translate(-50%,-50%) scale(.82); } }

/* ---------- reveal fallback ----------
   [data-reveal] starts hidden inline; JS reveals it on scroll. If JS never
   runs (or IntersectionObserver is missing) the JS shows everything; this
   is a belt-and-suspenders fallback for the no-JS case. */
.no-js .te-lp [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ---------- hover states (authored inline as style-hover) ---------- */
.te-btn-primary { transition: background .2s, transform .2s, box-shadow .2s; }
.te-btn-primary:hover { background: #5E1FCB !important; transform: translateY(-2px); box-shadow: 0 18px 40px -8px rgba(116,40,245,0.6) !important; }

.te-close-btn { transition: transform .2s, box-shadow .2s; }
.te-close-btn:hover { transform: translateY(-2px); box-shadow: 0 26px 54px -12px rgba(0,0,0,.6) !important; }

.te-close-secondary { transition: text-decoration-color .2s; }
.te-close-secondary:hover { text-decoration-color: #ffffff !important; }

.te-overlay-btn { transition: transform .2s, box-shadow .2s; }
.te-overlay-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(0,0,0,0.45); }

.te-replay { transition: color .2s; }
.te-replay:hover { color: #ffffff !important; }

.te-dept-pill { transition: background .2s, border-color .2s; }
.te-dept-pill:hover { border-color: #B79AF6 !important; background: #F3EDFF !important; }

.te-dept-opt { transition: background .15s; }
.te-dept-opt:hover { background: #F5F1FE !important; }

.te-row { transition: background .15s; }
.te-row:hover { background: #F5F1FE !important; }

/* ---------- awards badges ----------
   The global site stylesheet stretches in-content images to equal widths
   (object-fit:fill), which distorts the badges. Pin them to their own
   aspect ratio: fixed height (inline), width follows, no flex resize. */
.te-lp [data-grid="awards"] img { width: auto !important; max-width: none !important; object-fit: contain !important; flex: 0 0 auto !important; }

/* ---------- responsive (ported from the handoff's container queries) ---------- */
@media (max-width: 900px) {
  .te-lp [data-pad] { padding-left: 44px !important; padding-right: 44px !important; }
  .te-lp [data-grid="explain"] { grid-template-columns: 1fr !important; gap: 40px !important; }
  .te-lp [data-grid="awards"] { grid-template-columns: 1fr !important; gap: 36px !important; text-align: center; justify-items: center; }
  .te-lp [data-grid="awards"] > div:nth-child(2) { display: none !important; }
  /* the star rating + review count are a flex row — center it when the column stacks */
  .te-lp .te-review-stars { justify-content: center; }
  .te-lp [data-scrollwrap] { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; }
  .te-lp [data-scrollwrap] > .te-demo-inner { min-width: 880px; }
}
@media (max-width: 620px) {
  .te-lp [data-pad] { padding-left: 20px !important; padding-right: 20px !important; }
  .te-lp [data-padv] { padding-top: 64px !important; padding-bottom: 72px !important; }
  .te-lp [data-flex="statrow"] { flex-direction: column !important; }
  .te-lp [data-flex="statrow"] > div:first-child { flex: 0 0 auto !important; width: 100% !important; padding: 28px 24px !important; }
  .te-lp [data-nowrap] { white-space: normal !important; }
  .te-lp [data-r="hero-h1"] { font-size: 33px !important; line-height: 1.1 !important; }
  .te-lp [data-r="demo-h2"] { font-size: 27px !important; line-height: 33px !important; }
  .te-lp [data-r="sec-h2"] { font-size: 29px !important; line-height: 36px !important; }
  .te-lp [data-r="close-h2"] { font-size: 32px !important; line-height: 38px !important; }
  .te-lp [data-grid="awards"] img { height: 108px !important; }
  .te-lp [data-r="herolabel"] { display: none !important; }
  .te-lp .te-cta-row { flex-direction: column; }
  .te-lp .te-btn-primary { width: 100%; text-align: center; }
  /* hero customer logos: two tidy rows of three instead of a ragged wrap */
  .te-lp .te-hero-logos { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 22px 18px !important; justify-items: center; }
  .te-lp .te-hero-logos img { max-width: 100%; }
  /* final-CTA trust row: keep the three checks on one line, shrink to fit */
  .te-lp .te-close-trust { flex-wrap: nowrap !important; gap: 14px !important; font-size: 12.5px !important; }
  .te-lp .te-close-trust span { white-space: nowrap; }
}

/* reduce-motion: drop the looping/entrance animations */
@media (prefers-reduced-motion: reduce) {
  .te-lp [style*="animation"] { animation: none !important; }
}