/* Tesla Power Energy — supplemental static styles.
   Uses the original design tokens (--primary, --secondary, --border, radius,
   Bebas Neue / Inter) so nothing drifts from the compiled Tailwind build. */

/* ---------- Desktop mega-menu ---------- */
.tpu-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s cubic-bezier(.4, 0, .2, 1),
              transform .18s cubic-bezier(.4, 0, .2, 1),
              visibility .18s;
  pointer-events: none;
}
.tpu-dropdown[data-state="open"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
/* wide panels (Products) align to the nav, not the trigger */
.tpu-dropdown[data-menu="products"] { left: auto; right: 0; }
header div.group { position: relative; }
header div.group > span { user-select: none; }

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

/* ---------- Mobile navigation ---------- */
.tpu-mobile-nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(86vw, 360px);
  background: hsl(var(--background));
  border-left: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-elevated, 0 10px 40px -10px hsl(0 0% 0% / .12));
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  z-index: 90;
  overflow-y: auto;
  padding: 5.5rem 1.25rem 2rem;
}
.tpu-mobile-nav[data-state="open"] { transform: translateX(0); }
@media (min-width: 1024px) { .tpu-mobile-nav { display: none; } }

.tpu-mobile-sec { border-bottom: 1px solid hsl(var(--border)); }
.tpu-mobile-head {
  width: 100%;
  text-align: left;
  padding: .875rem .25rem;
  font-family: var(--font-body), Inter, sans-serif;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: hsl(var(--foreground));
  background: none;
  border: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tpu-mobile-head::after {
  content: "";
  width: .5rem; height: .5rem;
  border-right: 2px solid hsl(var(--primary));
  border-bottom: 2px solid hsl(var(--primary));
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.tpu-mobile-head[aria-expanded="true"]::after { transform: rotate(-135deg); }

.tpu-mobile-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}
.tpu-mobile-sub[data-state="open"] { grid-template-rows: 1fr; }
.tpu-mobile-sub-inner { padding-bottom: .5rem; }
.tpu-mobile-sub > .tpu-mobile-sub-inner { min-height: 0; overflow: hidden; }
.tpu-mobile-sub a {
  display: block;
  padding: .55rem .75rem;
  font-size: .82rem;
  color: hsl(var(--foreground) / .72);
  text-decoration: none;
  transition: color .15s ease;
}
.tpu-mobile-sub a:hover { color: hsl(var(--primary)); }
.tpu-mobile-cta {
  display: block;
  margin-top: 1.25rem;
  text-align: center;
  padding: .8rem 1rem;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 600;
  font-size: .875rem;
  text-decoration: none;
  transition: background .2s ease;
}
.tpu-mobile-cta:hover { background: hsl(var(--primary-dark)); }

/* ---------- Scroll reveal (entrance animation parity) ----------
   Gated behind html[data-reveal-armed], which site.js sets at boot.
   Without JavaScript nothing is armed, so all content renders visible —
   never hide content behind a script that may not run. */
@media (prefers-reduced-motion: no-preference) {
  html[data-reveal-armed] [data-reveal]:not([data-revealed]) {
    opacity: 0;
    transform: translateY(18px);
  }
  html[data-reveal-armed] [data-reveal] {
    transition: opacity .6s cubic-bezier(0, 0, .2, 1),
                transform .6s cubic-bezier(0, 0, .2, 1);
    will-change: opacity, transform;
  }
  html[data-reveal-armed] [data-reveal][data-revealed] {
    opacity: 1;
    transform: none;
  }
  /* never hide the first screenful */
  html[data-reveal-armed] header [data-reveal],
  html[data-reveal-armed] [data-reveal]:first-of-type { opacity: 1; transform: none; }
}

/* ---------- Marquee continuity ---------- */
.tpu-marquee { animation: marquee-brands 26s linear infinite; }
@media (prefers-reduced-motion: reduce) { .tpu-marquee { animation: none; } }

/* ---------- Accordion height variable support ---------- */
[data-state][style*="--radix-accordion-content-height"] { overflow: hidden; }

/* ---------- Header scroll state ---------- */
header[data-scrolled="true"] { box-shadow: 0 2px 18px hsl(0 0% 0% / .07); }

/* ---------- Slider states ---------- */
[data-slide][data-state="inactive"] { display: none; }
[data-slide-dot][data-state="active"] { background: hsl(var(--primary)); }

/* ---------- Form validation ---------- */
[data-invalid] { border-color: hsl(var(--destructive)) !important; }

/* ---------- Focus visibility (accessibility) ---------- */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* ---------- Print ---------- */
@media print {
  header, footer, .tpu-mobile-nav { display: none !important; }
}

/* ---------- Hero typewriter cursor ---------- */
.tpu-cursor {
  display: inline-block;
  width: 3px;
  height: .75em;
  background: hsl(var(--primary));
  margin-left: .25rem;
  vertical-align: middle;
  animation: tpu-blink 1s steps(2, start) infinite;
}
@keyframes tpu-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .tpu-cursor { display: none; } }

/* ---------- Form status message ---------- */
.tpu-form-note {
  margin-top: .875rem;
  padding: .7rem .9rem;
  font-family: var(--font-body), Inter, sans-serif;
  font-size: .85rem;
  line-height: 1.5;
  border-left: 3px solid hsl(var(--primary));
  background: hsl(var(--muted) / .6);
  color: hsl(var(--foreground));
}
.tpu-form-note[data-ok="1"] {
  border-left-color: #16a34a;
  background: rgba(22, 163, 74, .08);
}
.tpu-form-note[data-ok="0"] {
  border-left-color: hsl(var(--destructive));
  background: hsl(var(--destructive) / .07);
}

/* ================= World presence map ================= */
/* Timings mirror the original React component exactly.      */
@keyframes wp-pulse {
  0%   { transform: scale(1); opacity: .6; }
  100% { transform: scale(3); opacity: 0; }
}
@keyframes wp-fade-in {
  0%   { opacity: 0; transform: scale(.5); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes wp-arc-draw { to { stroke-dashoffset: 0; } }
@keyframes wp-tooltip-in {
  0%   { opacity: 0; transform: translate(var(--wp-tx, -50%), calc(-100% - 8px)) scale(.96); }
  100% { opacity: 1; transform: translate(var(--wp-tx, -50%), calc(-100% - 14px)) scale(1); }
}

.wp-arc {
  stroke-dasharray: var(--wp-dash);
  stroke-dashoffset: var(--wp-dash);
  animation: wp-arc-draw 1.4s ease var(--wp-delay) forwards;
  transition: opacity .25s ease, stroke-width .25s ease;
}
.wp-arc-hit { cursor: pointer; outline: none; }
.wp-arc-group[data-active] .wp-arc { opacity: 1; stroke-width: 1.6; }

.wp-pin {
  cursor: pointer;
  outline: none;
  transform-origin: var(--wp-x) var(--wp-y);
  transition: transform .25s ease;
}
.wp-pin[data-active] { transform: scale(1.25); }
.wp-pin-body { animation: wp-fade-in 400ms ease var(--wp-delay) backwards; }
.wp-pulse    { animation: wp-pulse 2.4s ease-out var(--wp-delay) infinite; }
.wp-tooltip  { animation: wp-tooltip-in 180ms ease-out; }

/* JS arms the section so the sequence replays when scrolled into view */
[data-worldmap][data-armed="1"] .wp-arc,
[data-worldmap][data-armed="1"] .wp-pin-body,
[data-worldmap][data-armed="1"] .wp-pulse { animation-play-state: paused; }
[data-worldmap][data-armed="1"][data-revealed="1"] .wp-arc,
[data-worldmap][data-armed="1"][data-revealed="1"] .wp-pin-body,
[data-worldmap][data-armed="1"][data-revealed="1"] .wp-pulse { animation-play-state: running; }

.wp-pin:focus-visible, .wp-arc-hit:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .wp-arc { stroke-dashoffset: 0; animation: none; }
  .wp-pin-body { animation: none; }
  .wp-pulse { animation: none; opacity: .35; }
  .wp-tooltip { animation: none; }
}

/* ---------- Fixed-header clearance ----------
   The header is fixed and measures 133–137px below 1024px, and 173px from
   1024px up (the top utility bar is `hidden lg:block`). Pages whose first
   section did not allow for that had their opening text sitting underneath
   it. Marked sections get guaranteed clearance. */
[data-header-offset] { padding-top: 9.5rem; }          /* 152px  > 137px */
@media (min-width: 1024px) {
  [data-header-offset] { padding-top: 11.75rem; }      /* 188px  > 173px */
}

/* ---------- Marquee tracks (ticker / credentials / testimonials) ----------
   Originally animated by framer-motion, which cannot survive a static
   export. Same motion, expressed in CSS. Content is duplicated in the DOM
   so a -50% translation loops seamlessly. */
@keyframes tpu-marquee-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
[data-marquee] {
  animation: tpu-marquee-x var(--tpu-marquee-dur, 30s) linear infinite;
  will-change: transform;
}
[data-marquee]:hover,
[data-marquee]:focus-within { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  [data-marquee] { animation: none; }
}

/* ---------- Hero bottom breathing room ----------
   The hero is `min-h-screen flex items-center` with no bottom padding, so
   once the top padding clears the fixed header the CTAs can end up flush
   against the credentials strip below (0px at shorter window heights).
   Only the hero carries `min-h-screen`, so policy pages are unaffected. */
[data-header-offset].min-h-screen { padding-bottom: 5rem; }
@media (min-width: 1024px) {
  [data-header-offset].min-h-screen { padding-bottom: 6.5rem; }
}

/* ---------- Utilities missing from the compiled Tailwind build ----------
   index-BYtqWwtV.css is a purged production build: it only contains classes
   the original React source used. Any class introduced afterwards silently
   does nothing, so the handful the added sections rely on are defined here. */
.mt-12 { margin-top: 3rem; }
.pt-8  { padding-top: 2rem; }
.gap-x-8 { column-gap: 2rem; }
@media (min-width: 640px) {
  .sm\:border-0 { border-width: 0; }
}
@media (min-width: 1024px) {
  .lg\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .lg\:mb-14 { margin-bottom: 3.5rem; }
}
/* FAQ toggle: the "+" becomes an "×" when its <details> is open */
details.group[open] .group-open\:rotate-45 { transform: rotate(45deg); }

/* The final FAQ row's bottom border and the following divider's top border
   stack into a double rule — drop the last one. */
details[name="tpu-faq"]:last-of-type { border-bottom: 0; }

/* Closing "explore the range" block: balance the space either side of its rule
   (the preceding FAQ row already contributes its own bottom padding). */
.tpu-related {
  margin-top: 1.5rem;
  padding-top: 2rem;
}
.pr-6 { padding-right: 1.5rem; }
.min-w-\[680px\] { min-width: 680px; }

/* ---------- Typography fallback for long-form legal pages ----------
   The four policy pages use Tailwind Typography classes (`prose`,
   `prose-neutral`), but that plugin was never compiled into the production
   stylesheet — so headings rendered at body size with no margins and lists
   lost their bullets. This restores a readable document hierarchy. */
.prose { color: hsl(var(--foreground) / .8); line-height: 1.7; }
.prose > * + * { margin-top: 1rem; }
.prose h2 {
  font-family: var(--font-display), "Bebas Neue", sans-serif;
  font-size: 1.75rem; line-height: 1.15; letter-spacing: .02em;
  color: hsl(var(--foreground));
  margin-top: 2.5rem; margin-bottom: .75rem;
}
.prose h3 {
  font-family: var(--font-body), Inter, sans-serif;
  font-size: 1.125rem; font-weight: 600; line-height: 1.35;
  color: hsl(var(--foreground));
  margin-top: 1.75rem; margin-bottom: .5rem;
}
.prose h4 { font-weight: 600; color: hsl(var(--foreground)); margin-top: 1.25rem; }
.prose p { margin-bottom: 1rem; }
.prose ul, .prose ol { margin: 1rem 0 1.25rem; padding-left: 1.5rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .4rem; padding-left: .25rem; }
.prose li::marker { color: hsl(var(--primary)); }
.prose strong { color: hsl(var(--foreground)); font-weight: 600; }
.prose a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: hsl(var(--primary-dark)); }
.prose hr { margin: 2rem 0; border-color: hsl(var(--border)); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; }
.prose th, .prose td { border: 1px solid hsl(var(--border)); padding: .6rem .75rem; text-align: left; }
.prose blockquote {
  border-left: 3px solid hsl(var(--primary));
  padding-left: 1rem; margin: 1.25rem 0; color: hsl(var(--foreground) / .75);
}
.prose :first-child { margin-top: 0; }

/* Remaining utilities absent from the purged build */
.min-h-\[60vh\] { min-height: 60vh; }
.gap-y-1 { row-gap: .25rem; }

/* ---------- Honeypot fields ----------
   Anti-spam decoys must be invisible to people but reachable by bots that
   parse the DOM. Clip rather than display:none — some bots skip hidden
   fields, which defeats the purpose. Also removed from tab order. */
.tpu-hp,
input[name="website_url"],
input[name="company_website"] {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------- Blog article utilities ----------
   Classes used by article pages that the purged production build never
   compiled, since no article layout existed when it was generated. */
.pt-16 { padding-top: 4rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-y-2 { row-gap: .5rem; }
.min-w-\[600px\] { min-width: 600px; }
.leading-\[0\.98\] { line-height: .98; }
.text-foreground\/75 { color: hsl(var(--foreground) / .75); }
.group:hover .group-hover\:-translate-x-1 { transform: translateX(-.25rem); }
@media (min-width: 640px) { .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; } }
@media (min-width: 1024px) { .lg\:pt-20 { padding-top: 5rem; } .lg\:pb-20 { padding-bottom: 5rem; } }
.list-disc { list-style-type: disc; }
.pl-5 { padding-left: 1.25rem; }
@media (min-width: 640px) { .sm\:p-8 { padding: 2rem; } }