/*
 * Electric Precision customer experience.
 *
 * Homepage bundle, scoped to the customer shell so admin, partner and
 * installer applications retain their existing visual system.
 */

#electric-customer {
  --electric-accent: 75 100% 62%;
  --electric-accent-strong: 76 90% 23%;
  --electric-graphite: 225 22% 6%;
  --electric-panel: 225 18% 10%;
  --electric-panel-raised: 224 16% 14%;
  --electric-line: 220 10% 28%;

  --brand-primary: var(--electric-accent-strong);
  --brand-accent: 76 82% 22%;
  --brand-secondary: var(--electric-graphite);
  --bg-app: 216 22% 97%;
  --bg-surface: 0 0% 100%;
  --bg-muted: 216 18% 93%;
  --fg-default: 225 18% 8%;
  --fg-muted: 220 8% 38%;
  --border: 220 13% 82%;
  --radius: 10px;
  --font-display: var(--font-sans);

  min-width: 0;
  overflow-x: clip;
  background: hsl(var(--bg-app));
  color: hsl(var(--fg-default));
}

[data-theme="dark"] #electric-customer {
  --brand-primary: var(--electric-accent);
  --brand-accent: 75 100% 67%;
  --bg-app: var(--electric-graphite);
  --bg-surface: var(--electric-panel);
  --bg-muted: var(--electric-panel-raised);
  --fg-default: 0 0% 97%;
  --fg-muted: 220 8% 69%;
  --border: var(--electric-line);
  --accent-success: 145 67% 64%;
  --accent-info: 196 82% 68%;
}

#electric-customer main {
  background: hsl(var(--bg-app));
}

#electric-customer :where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid hsl(var(--electric-accent));
  outline-offset: 3px;
}

#electric-customer :where(.lux-display, h1, h2, h3) {
  font-family: var(--font-sans);
  font-style: normal;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

#electric-customer :where(p, li, dd) {
  text-wrap: pretty;
}

#electric-customer .primary-button,
#electric-customer .primary-link,
#electric-customer .upload-button,
#electric-customer .header-action:not(.header-action--ghost) {
  border: 1px solid hsl(var(--electric-accent));
  border-radius: 7px;
  background: hsl(var(--electric-accent));
  color: hsl(var(--electric-graphite));
  font-weight: 800;
  box-shadow: none;
}

#electric-customer .primary-button:hover,
#electric-customer .primary-link:hover,
#electric-customer .upload-button:hover,
#electric-customer .header-action:not(.header-action--ghost):hover {
  background: hsl(var(--electric-accent) / 0.86);
  border-color: hsl(var(--electric-accent));
  color: hsl(var(--electric-graphite));
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px hsl(var(--electric-accent) / 0.14);
}

#electric-customer .secondary-button,
#electric-customer .secondary-link,
#electric-customer .ghost-button {
  border-radius: 7px;
  border-color: hsl(var(--border));
  background: transparent;
  color: hsl(var(--fg-default));
}

/* Shared customer navigation */
#electric-customer .site-header {
  position: sticky;
  inset-block-start: 0;
  display: block;
  padding: 0;
  background: hsl(var(--electric-graphite) / 0.96);
  border-bottom: 1px solid hsl(var(--electric-line));
  color: hsl(0 0% 100%);
  backdrop-filter: blur(18px);
}

#electric-customer .site-header__bar {
  width: min(100%, 1440px);
  min-height: 74px;
  margin-inline: auto;
  padding: 12px clamp(20px, 4vw, 64px);
}

#electric-customer .site-header .brand img {
  display: block;
}

#electric-customer .site-header .brand-logo {
  width: clamp(138px, 13vw, 184px);
}

#electric-customer .site-header .locale-option--single,
#electric-customer .site-header .theme-toggle,
#electric-customer .site-header .header-menu__trigger {
  border-color: hsl(0 0% 100% / 0.34);
  background: hsl(0 0% 100% / 0.04);
  color: hsl(0 0% 100%);
  box-shadow: none;
}

#electric-customer .site-header .locale-option--single {
  background: hsl(0 0% 100%);
  color: hsl(var(--electric-graphite));
}

#electric-customer .site-header .header-action--ghost {
  border-color: hsl(0 0% 100% / 0.2);
  color: hsl(0 0% 100% / 0.84);
}

#electric-customer .site-header .header-action--ghost:hover {
  border-color: hsl(var(--electric-accent));
  background: hsl(var(--electric-accent) / 0.1);
  color: hsl(var(--electric-accent));
}

#electric-customer .breadcrumb-band {
  background: hsl(var(--electric-panel));
  border-top-color: hsl(var(--electric-line));
  color: hsl(0 0% 100% / 0.7);
}

#electric-customer .breadcrumb-current {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  color: hsl(var(--electric-accent));
}

#electric-customer .site-footer {
  background: hsl(var(--electric-graphite));
  border-top: 1px solid hsl(var(--electric-line));
  color: hsl(0 0% 100% / 0.7);
}

#electric-customer .footer-content {
  width: min(100%, 1440px);
  margin-inline: auto;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 64px);
}

#electric-customer .footer-links h2 {
  color: hsl(var(--electric-accent));
}

#electric-customer .footer-links a {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 15px;
  color: hsl(0 0% 100% / 0.82);
}

#electric-customer .footer-links a:hover {
  color: hsl(var(--electric-accent));
}

/* Homepage */
#electric-customer .lux-page {
  --lux-paper: hsl(var(--bg-app));
  --lux-ink: hsl(var(--fg-default));
  --lux-ink-soft: hsl(var(--fg-default) / 0.86);
  --lux-muted: hsl(var(--fg-muted));
  --lux-hairline: hsl(var(--border));
  --lux-accent: hsl(var(--electric-accent));
  background: hsl(var(--bg-app));
  color: hsl(var(--fg-default));
}

#electric-customer .lux-shell {
  width: min(100%, 1440px);
  padding-inline: clamp(24px, 5vw, 80px);
}

#electric-customer .lux-hero {
  min-height: min(760px, 92vh);
  background: hsl(var(--electric-graphite));
  color: hsl(0 0% 100%);
  border-bottom: 1px solid hsl(var(--electric-line));
}

#electric-customer .lux-hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block: 82px 0;
  inset-inline-end: 54%;
  width: 1px;
  background: hsl(0 0% 100% / 0.14);
  pointer-events: none;
}

#electric-customer .lux-hero__picture,
#electric-customer .lux-hero__veil {
  inset-block: 82px 0;
  inset-inline-start: auto;
  inset-inline-end: 0;
  width: 54%;
  height: auto;
}

#electric-customer .lux-hero__image {
  object-position: 68% center;
  filter: saturate(0.78) contrast(1.05) brightness(0.72);
}

#electric-customer .lux-hero__veil {
  background: hsl(var(--electric-graphite) / 0.22);
}

#electric-customer .lux-hero__beam,
#electric-customer .lux-hero__grain {
  display: none;
}

#electric-customer .lux-nav {
  width: min(100%, 1440px);
  min-height: 82px;
  margin-inline: auto;
  padding: 16px clamp(24px, 5vw, 80px);
  border-bottom: 1px solid hsl(0 0% 100% / 0.13);
}

#electric-customer .lux-nav .brand-logo {
  width: clamp(148px, 14vw, 192px);
}

#electric-customer .lux-nav__signin {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: hsl(0 0% 100% / 0.82);
}

#electric-customer .lux-nav__signin:hover,
#electric-customer .lux-nav__signin:focus-visible {
  color: hsl(var(--electric-accent));
}

#electric-customer .lux-hero__content {
  width: min(100%, 1440px);
  margin-inline: auto;
  padding-block: clamp(76px, 11vh, 118px) 78px;
  padding-inline-start: clamp(24px, 5vw, 80px);
  padding-inline-end: calc(54% + clamp(28px, 4vw, 64px));
}

#electric-customer .lux-hero .lux-display--xl {
  max-width: 620px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(54px, 7vw, 96px);
  font-style: normal;
  font-weight: 850;
  line-height: 0.95;
  letter-spacing: -0.065em;
  color: hsl(0 0% 100%);
}

#electric-customer .lux-hero .lux-display--xl em {
  font-style: normal;
  color: hsl(0 0% 100%);
}

#electric-customer .lux-hero .lux-body--lead {
  max-width: 560px;
  margin-top: 28px;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: hsl(0 0% 100% / 0.82);
}

#electric-customer .lux-hero__ctas {
  margin-top: 34px;
  gap: 16px;
}

#electric-customer .lux-button {
  min-height: 52px;
  border-radius: 7px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

#electric-customer .lux-button--primary-dark,
#electric-customer .lux-button--primary {
  border-color: hsl(var(--electric-accent));
  background: hsl(var(--electric-accent));
  color: hsl(var(--electric-graphite));
}

#electric-customer .lux-hero__track-link {
  min-height: 52px;
  padding-inline: 22px;
  border: 1px solid hsl(0 0% 100% / 0.46);
  border-radius: 7px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

#electric-customer .lux-hero__track-link:hover {
  border-color: hsl(var(--electric-accent));
  color: hsl(var(--electric-accent));
}

#electric-customer .lux-section {
  padding-block: clamp(72px, 9vw, 124px);
  background: hsl(var(--bg-app));
  border-bottom: 1px solid hsl(var(--border));
}

#electric-customer .lux-section--se {
  background: hsl(var(--bg-surface));
}

#electric-customer .lux-eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: hsl(var(--brand-primary));
}

#electric-customer .lux-eyebrow__rule {
  width: 34px;
  height: 2px;
  background: hsl(var(--electric-accent));
}

#electric-customer .lux-section .lux-display--lg {
  max-width: 820px;
  font-family: var(--font-sans);
  font-size: clamp(38px, 5.6vw, 72px);
  font-style: normal;
  font-weight: 760;
  line-height: 1.02;
  letter-spacing: -0.055em;
}

#electric-customer .lux-section .lux-display--lg em,
#electric-customer .lux-section .lux-display--sm em {
  font-style: normal;
}

#electric-customer .lux-section .lux-body--lead {
  max-width: 640px;
  font-size: 17px;
  line-height: 1.7;
}

#electric-customer .lux-se__grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: center;
}

#electric-customer .lux-se__panel {
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--bg-muted));
  box-shadow: none;
}

#electric-customer .lux-se__list li {
  min-height: 58px;
  padding-block: 16px;
  border-bottom-color: hsl(var(--border));
  font-size: 15px;
  line-height: 1.5;
}

#electric-customer .lux-se__list li::before {
  color: hsl(var(--brand-primary));
  font-family: var(--font-sans);
  font-weight: 800;
}

#electric-customer .lux-steps {
  position: relative;
  margin-top: 56px;
  gap: 0;
  border-top: 2px solid hsl(var(--brand-primary));
}

#electric-customer .lux-step {
  min-width: 0;
  padding: 30px 24px 10px;
  border-inline-start: 1px solid hsl(var(--border));
}

#electric-customer .lux-step:first-child {
  border-inline-start: 0;
}

#electric-customer .lux-step .lux-chapter {
  color: hsl(var(--brand-primary));
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

#electric-customer .lux-step .lux-display {
  margin-top: 18px;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

#electric-customer .lux-step .lux-body {
  font-size: 15px;
  line-height: 1.6;
}

#electric-customer .lux-step .lux-meta {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: hsl(var(--brand-primary));
}

#electric-customer .electric-assurance {
  padding-block: 0;
  background: hsl(var(--electric-panel));
  color: hsl(0 0% 100%);
  border-block: 1px solid hsl(var(--electric-line));
}

#electric-customer .electric-assurance__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#electric-customer .electric-assurance__item {
  min-width: 0;
  padding: 30px clamp(18px, 2.5vw, 34px);
  border-inline-start: 1px solid hsl(var(--electric-line));
}

#electric-customer .electric-assurance__item:first-child {
  border-inline-start: 0;
}

#electric-customer .electric-assurance__item > span {
  display: block;
  margin-bottom: 14px;
  color: hsl(var(--electric-accent));
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

#electric-customer .electric-assurance__item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: hsl(0 0% 100% / 0.84);
}

#electric-customer .lux-cta {
  min-height: 420px;
  padding-block: clamp(72px, 10vw, 128px);
  background: hsl(var(--electric-graphite));
  border-bottom: 1px solid hsl(var(--electric-line));
}

#electric-customer .lux-cta__glow {
  display: none;
}

#electric-customer .lux-cta .lux-display {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 820;
  letter-spacing: -0.055em;
}

#electric-customer .lux-cta .lux-body {
  color: hsl(0 0% 100% / 0.72);
}

#electric-customer .lux-section--stories {
  background: hsl(var(--bg-surface));
}

#electric-customer .lux-story {
  padding-top: 24px;
  border-top: 1px solid hsl(var(--border));
}

#electric-customer .lux-story .lux-display {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 760;
}

#electric-customer .lux-footer {
  background: hsl(var(--electric-graphite));
  border-top-color: hsl(var(--electric-line));
}

#electric-customer .lux-footer__legal,
#electric-customer .lux-footer__label {
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
}

@media (max-width: 1050px) {
  #electric-customer .lux-hero__picture,
  #electric-customer .lux-hero__veil {
    width: 49%;
  }

  #electric-customer .lux-hero::after {
    inset-inline-end: 49%;
  }

  #electric-customer .lux-hero__content {
    padding-inline-end: calc(49% + 32px);
  }

  #electric-customer .lux-se__grid {
    grid-template-columns: 1fr;
  }

  #electric-customer .lux-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 0;
    gap: 0;
  }

  #electric-customer .lux-step {
    border-top: 2px solid hsl(var(--brand-primary));
  }

  #electric-customer .electric-assurance__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #electric-customer .electric-assurance__item {
    border-bottom: 1px solid hsl(var(--electric-line));
  }
}

@media (max-width: 720px) {
  #electric-customer .lux-hero {
    min-height: 820px;
  }

  #electric-customer .lux-hero::after {
    display: none;
  }

  #electric-customer .lux-hero__picture,
  #electric-customer .lux-hero__veil {
    inset-block: 68px auto;
    inset-inline: 0;
    width: 100%;
    height: 34%;
  }

  #electric-customer .lux-hero__image {
    object-position: 64% center;
  }

  #electric-customer .lux-hero__veil {
    background: hsl(var(--electric-graphite) / 0.18);
  }

  #electric-customer .lux-nav {
    min-height: 68px;
    padding: 12px 16px;
  }

  #electric-customer .lux-nav .brand-logo {
    width: 132px;
  }

  #electric-customer .lux-hero__content {
    justify-content: flex-end;
    padding: 380px 20px 54px;
  }

  #electric-customer .lux-hero .lux-display--xl {
    font-size: clamp(50px, 15vw, 68px);
    line-height: 0.98;
  }

  #electric-customer .lux-hero__ctas {
    align-items: stretch;
  }

  #electric-customer .lux-hero__ctas > * {
    width: 100%;
    justify-content: center;
  }

  #electric-customer .lux-section {
    padding-block: 64px;
  }

  #electric-customer .lux-steps,
  #electric-customer .electric-assurance__grid {
    grid-template-columns: 1fr;
  }

  #electric-customer .lux-step,
  #electric-customer .electric-assurance__item {
    border-inline-start: 0;
  }

  #electric-customer .electric-assurance__item {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: start;
    gap: 12px;
    padding: 22px 20px;
  }

  #electric-customer .electric-assurance__item > span {
    margin: 2px 0 0;
  }
}

[dir="rtl"] #electric-customer :where(.lux-eyebrow, .section-kicker, .hf-eyebrow, .step-progress-item small, .track-result__list dt) {
  letter-spacing: 0;
}

[dir="rtl"] #electric-customer :where(.lux-display, h1, h2, h3) {
  letter-spacing: 0;
  line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
  #electric-customer *,
  #electric-customer *::before,
  #electric-customer *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  #electric-customer .lux-nav,
  #electric-customer .lux-footer {
    display: none !important;
  }
}