html,
body {
  margin: 0;
  padding: 0;
  width: 393px;
  height: 690px;
  overflow: hidden;
  background: #0a090b;
}

body.mobile-app-page {
  font-family: var(--font);
}

#mobile-app {
  width: 393px;
  height: 690px;
  overflow: hidden;
}

#mobile-app .phone {
  width: 393px;
  height: 690px;
  min-height: 690px;
  zoom: 1;
  border: none;
  border-radius: 0;
  box-shadow: none;
  /* Header only — no status bar in mobile preview */
  --phone-header-offset: 60px;
  --phone-menu-top: var(--phone-header-offset);
  --phone-info-video-top: var(--phone-header-offset);
}

#mobile-app .phone[data-preview-view="full-app"] .phone__scroll {
  padding-top: 0;
  padding-bottom: 12px;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="current"] .phone__scroll,
#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="profile"] .phone__scroll {
  padding: 12px 12px 0;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="current"] .phone__scroll {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="current"] .phone__view--current {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  gap: 8px;
  padding-bottom: 12px;
  box-sizing: border-box;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="current"][data-current-savings-view="monthly"] .phone__view--current-monthly {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  gap: 8px;
  padding-bottom: 12px;
  box-sizing: border-box;
}

#mobile-app .phone__view--current .phone-info-charts-row {
  flex: 0 0 auto;
  flex-shrink: 0;
}

#mobile-app .phone__view--current .phone-info-charts-row > .phone-info-charts-card {
  min-height: auto;
}

#mobile-app .phone__view--current .phone-current-actions {
  flex: 0 0 auto;
  flex-shrink: 0;
}

#mobile-app .phone__view--current-monthly .phone-info-monthly-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#mobile-app .phone__view--current-monthly .phone-info-monthly-card {
  flex: 0 0 auto;
}

#mobile-app .phone__view--current-monthly .phone-home-go-back-up {
  flex: 0 0 auto;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="home"] .phone__scroll {
  padding-top: 12px;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="trends"] .phone__scroll {
  padding-top: 4px;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="contact-us"] .phone__scroll,
#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="compliance"] .phone__scroll,
#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="account-settings"] .phone__scroll,
#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="system-settings"] .phone__scroll,
#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="marketplace"] .phone__scroll,
#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="marketplace-products"] .phone__scroll {
  padding-top: 12px;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="marketplace"] .phone__scroll {
  padding-top: 12px;
}

#mobile-app .phone-marketplace-house__touchpoint {
  gap: 5px;
  transform: translate(-14px, -50%);
}

#mobile-app .phone-marketplace-house__touchpoint-pin {
  width: 28px;
  height: 28px;
}

#mobile-app .phone-marketplace-house__touchpoint-label {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: #ffffff;
}

#mobile-app .phone-marketplace-house__touchpoint-dot {
  width: 12px;
  height: 12px;
}

#mobile-app .phone-marketplace-house {
  margin-bottom: 34px;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="marketplace-product-detail"] .phone__scroll {
  padding-top: 0;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="ask-ada"] .phone__scroll {
  padding: 0;
}

#mobile-app .phone__header .phone__logo {
  max-width: calc(72px * 1.35);
}

#mobile-app .phone__header .phone__logo-img {
  height: calc(20px * 1.35);
  width: auto;
}

#mobile-app .phone__view--current .phone-info-my-savings__tabs,
#mobile-app .phone__view--current .phone-info-yearly__tabs {
  height: 32px;
  padding: 2px 5px;
  gap: 5px;
}

#mobile-app .phone__view--current .phone-info-my-savings__tab,
#mobile-app .phone__view--current .phone-info-yearly__tab {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

#mobile-app .phone-info-charts-row .phone-info-my-savings__footer,
#mobile-app .phone-info-charts-row .phone-info-yearly__footer {
  min-height: 32px;
}

#mobile-app .phone-info-charts-row .phone-info-my-savings__footer {
  padding-top: 0;
}

#mobile-app .phone-info-charts-card--my-savings .phone-info-my-savings__footer {
  padding-top: calc(12px * var(--info-type-scale));
}

#mobile-app .phone-info-charts-row {
  overflow-x: visible;
}

#mobile-app .phone-info-charts-row > .phone-info-charts-card {
  flex: 0 0 100%;
}

#mobile-app .phone__view--current,
#mobile-app .phone-info-content {
  --info-type-scale: 0.875;
}

#mobile-app .phone__view--profile {
  --info-type-scale: 0.95;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="trends"] .phone__view--default {
  flex: 1;
  min-height: 100%;
  padding-bottom: 12px;
  box-sizing: border-box;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="profile"] .phone__view--profile {
  flex: 1;
  min-height: 100%;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="profile"] .phone-referral {
  flex: 1;
  min-height: 0;
}

#mobile-app .phone-referral__analytics-btn {
  margin-top: auto;
}

#mobile-app .phone-boost-stack {
  flex: 0 0 auto;
  overflow: visible;
  gap: 20px;
  user-select: none;
  -webkit-user-select: none;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="trends"] .phone-boost-stack {
  touch-action: none;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="trends"] .phone__scroll {
  overflow-x: visible;
}

#mobile-app .phone-boost-carousel.phone-boost-carousel--stacked {
  position: relative;
  display: block;
  flex-direction: unset;
  gap: 0;
  width: 100%;
  height: 400px;
  overflow: visible;
  overflow-x: hidden;
  scroll-snap-type: none;
  padding: 4px 12px 12px;
  margin: -4px -12px 0;
  box-sizing: content-box;
  user-select: none;
  -webkit-user-select: none;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="trends"] .phone-boost-carousel.phone-boost-carousel--stacked,
#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="trends"] .phone-boost-carousel.phone-boost-carousel--stacked .phone-boost-card[data-stack-pos="0"] {
  touch-action: none;
}

#mobile-app .phone[data-preview-view="full-app"]:not([data-active-phone-tab="trends"]) .phone-boost-stack__shop {
  display: none;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="trends"] .phone-boost-stack__shop {
  display: flex;
  flex-shrink: 0;
  height: 44px;
  margin-top: auto;
  transform: translateY(12px);
  touch-action: auto;
  user-select: auto;
  -webkit-user-select: auto;
}

#mobile-app .phone-boost-carousel.phone-boost-carousel--stacked .phone-boost-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  flex: none;
  margin: 0;
  scroll-snap-align: none;
  pointer-events: none;
  transform-origin: 50% 100%;
  box-shadow: 0 8px 24px rgba(10, 9, 11, 0.12);
  transition:
    transform 0.28s cubic-bezier(0.33, 0, 0.2, 1),
    opacity 0.25s cubic-bezier(0.33, 0, 0.2, 1);
  will-change: transform;
}

#mobile-app .phone-boost-carousel.phone-boost-carousel--stacked .phone-boost-card.phone-boost-card--dragging {
  z-index: 6;
  transition: none;
  cursor: grabbing;
  pointer-events: auto;
}

#mobile-app .phone-boost-carousel.phone-boost-carousel--stacked .phone-boost-card[data-stack-pos="0"] {
  z-index: 4;
  transform: rotate(0deg) translateY(0) scale(0.96);
  opacity: 1;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

#mobile-app .phone-boost-carousel.phone-boost-carousel--stacked .phone-boost-card[data-stack-pos="1"] {
  z-index: 3;
  transform: rotate(2.5deg) translateY(8px) scale(0.93);
  opacity: 1;
}

#mobile-app .phone-boost-carousel.phone-boost-carousel--stacked .phone-boost-card[data-stack-pos="2"] {
  z-index: 2;
  transform: rotate(-2.5deg) translateY(14px) scale(0.9);
  opacity: 1;
}

#mobile-app .phone-boost-carousel.phone-boost-carousel--stacked .phone-boost-card[data-stack-pos="3"] {
  z-index: 1;
  transform: rotate(1.5deg) translateY(19px) scale(0.87);
  opacity: 0.95;
}

#mobile-app .phone-boost-carousel.phone-boost-carousel--stacked .phone-boost-card[data-stack-pos="4"],
#mobile-app .phone-boost-carousel.phone-boost-carousel--stacked .phone-boost-card[data-stack-pos="5"] {
  z-index: 0;
  transform: rotate(0deg) translateY(26px) scale(0.88);
  opacity: 0;
  pointer-events: none;
}

#mobile-app .phone-boost-carousel.phone-boost-carousel--stacked .phone-boost-card--stack-flyout {
  z-index: 6;
  opacity: 1;
  pointer-events: none;
  transform-origin: 50% 100%;
}

#mobile-app .phone-boost-carousel.phone-boost-carousel--stacked .phone-boost-card--stack-shuffle {
  z-index: 0 !important;
  opacity: 0.95;
  pointer-events: none;
  transition:
    transform 0.42s cubic-bezier(0.33, 0, 0.2, 1),
    opacity 0.42s cubic-bezier(0.33, 0, 0.2, 1);
}

#mobile-app .phone[data-theme="dark"] .phone-boost-carousel.phone-boost-carousel--stacked .phone-boost-card {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  #mobile-app .phone-boost-carousel.phone-boost-carousel--stacked .phone-boost-card {
    transition: none;
  }
}

#mobile-app .phone-boost-card__eyebrow {
  font-size: 17px;
  line-height: 24px;
}

#mobile-app .phone-boost-card__title {
  top: 8px;
  left: -4px;
  width: 112px;
  height: 112px;
  padding: 20px 14px;
  font-size: 14px;
  line-height: 1.15;
}

#mobile-app .phone-boost-card__copy-row {
  padding-top: 40px;
}

#mobile-app .phone-boost-card__copy-row {
  gap: 10px;
  min-height: 0;
}

#mobile-app .phone-boost-card__image-wrap {
  width: 100%;
  height: auto;
  min-height: 180px;
  max-height: 220px;
}

#mobile-app .phone-boost-card__image {
  width: 215px;
  height: 215px;
  border: none;
  border-radius: 0;
  background: transparent;
}

#mobile-app .phone-boost-card__copy-col {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
}

#mobile-app .phone-boost-card__copy-row .phone-boost-card__copy {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: #adacb0;
  text-align: left;
}

#mobile-app .phone[data-theme="dark"] .phone__view--default .phone-boost-card__badge {
  background: rgba(21, 185, 78, 0.82);
  color: #ffffff;
}

#mobile-app .phone-accordion-large__title {
  font-size: 16px;
  line-height: 22px;
}

#mobile-app .phone-power-flow-home__title,
#mobile-app .phone-energy-stats__title {
  font-size: 16px;
  line-height: 22px;
}

#mobile-app .phone-energy-stats__legend-label {
  font-size: 14px;
  line-height: 18px;
}

#mobile-app .phone-info-monthly-card__expand .phone-info-savings-row {
  min-height: 36px;
}

#mobile-app .phone-info-savings-bar__segment {
  min-height: 30px;
  padding: 3px 6px;
  font-size: calc(16px * var(--info-type-scale));
  line-height: calc(16px * var(--info-type-scale));
  letter-spacing: calc(-0.16px * var(--info-type-scale));
}

#mobile-app .phone__header .phone__logo,
#mobile-app .phone__header .phone__logo-img {
  cursor: pointer;
}

#mobile-app .phone-info-monthly-card {
  gap: 8px;
  padding: 12px 16px;
}

#mobile-app .phone-info-monthly-card__head {
  align-items: center;
}

#mobile-app .phone-info-monthly-card__copy {
  gap: 0;
}

#mobile-app .phone-info-monthly-card__badge {
  font-size: calc(14px * var(--info-type-scale));
  font-weight: 600;
  line-height: calc(18px * var(--info-type-scale));
  white-space: nowrap;
}

#mobile-app .phone-info-monthly-card__badge--saved {
  color: #15b94e;
}

#mobile-app .phone-info-monthly-card__badge--loss {
  color: var(--main-error);
}

#mobile-app .phone-info-monthly-card__amount {
  box-sizing: border-box;
  justify-content: center;
  min-width: 46px;
}

#mobile-app .phone-info-my-savings__legend-label {
  font-size: 14px;
  line-height: 18px;
}

#mobile-app .phone-info-my-savings__legend-swatch {
  width: 12px;
  height: 12px;
}

#mobile-app .phone-info-charts-card--my-savings {
  min-height: 454px;
  touch-action: pan-y;
}

#mobile-app .phone-info-charts-card--my-savings .phone-info-my-savings__header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: auto;
  z-index: 2;
}

#mobile-app .phone-info-my-savings__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(10px * var(--info-type-scale));
  width: 100%;
}

#mobile-app .phone-info-charts-card--my-savings .phone-info-my-savings__period {
  margin: 0;
}

#mobile-app .phone-info-charts-card--my-savings .phone-info-my-savings__body {
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0;
  min-height: 0;
  padding-top: 0;
}

#mobile-app .phone-info-my-savings__period {
  font-size: calc(17px * var(--info-type-scale));
  line-height: calc(24px * var(--info-type-scale));
}

#mobile-app .phone-info-charts-card--my-savings .phone-info-my-savings__actual {
  min-height: auto;
  margin: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

#mobile-app .phone-info-my-savings__actual-main,
#mobile-app .phone-info-my-savings__actual-dot,
#mobile-app .phone-info-my-savings__actual-cents {
  font-size: calc(42px * var(--info-type-scale));
  line-height: 1;
}

#mobile-app .phone-info-charts-card--my-savings .phone-info-my-savings__chart {
  flex: none;
  width: 100%;
  min-height: auto;
  align-items: stretch;
  justify-content: flex-end;
  margin-top: 0;
  padding-top: 0;
}

#mobile-app .phone-info-charts-card--my-savings .phone-info-my-savings__chart-plot {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(4px * var(--info-type-scale));
  width: 100%;
  max-width: none;
  min-height: 241px;
  height: auto;
  margin-top: 0;
  padding: 0;
  box-sizing: border-box;
}

#mobile-app .phone-info-my-savings__chart-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(8px * var(--info-type-scale));
  width: 100%;
}

#mobile-app .phone-info-charts-card--my-savings .phone-info-my-savings__chart-plot .phone-info-my-savings__actual {
  margin: 0;
  flex: 1;
  min-width: 0;
}

#mobile-app .phone-info-charts-card--my-savings .phone-info-my-savings__chart-caption .phone-info-my-savings__chart-max {
  position: static;
  align-self: auto;
  flex-shrink: 0;
  margin: 0;
}

#mobile-app .phone-info-my-savings__chart-y-axis,
#mobile-app .phone-info-my-savings__chart-grid {
  display: none;
}

#mobile-app .phone-info-my-savings__chart-bar-stack {
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--info-type-scale));
  width: 100%;
}

#mobile-app .phone-info-my-savings__chart-cost-rows {
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--info-type-scale));
  width: 100%;
}

#mobile-app .phone-info-my-savings__chart-bars {
  position: static;
  width: 100%;
  height: calc(36px * var(--info-type-scale));
  display: flex;
  align-items: center;
  border-radius: 4px;
  background: rgba(10, 9, 11, 0.06);
  overflow: hidden;
  margin-top: 0;
}

#mobile-app .phone-info-my-savings__chart-bars--half {
  width: 100%;
  height: calc(18px * var(--info-type-scale));
}

#mobile-app .phone[data-theme="dark"] .phone-info-my-savings__chart-bars {
  background: rgba(255, 255, 255, 0.08);
}

#mobile-app .phone-info-my-savings__chart-bar {
  width: 40%;
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#mobile-app .phone-info-my-savings__chart-bar--actual {
  background: #15b94e;
}

#mobile-app .phone-info-my-savings__chart-bar--new-cost,
#mobile-app .phone-info-my-savings__chart-bar--old-cost {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: calc(72px * var(--info-type-scale));
  padding: 0 calc(6px * var(--info-type-scale));
  box-sizing: border-box;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#mobile-app .phone-info-my-savings__chart-bar--new-cost {
  background: rgba(112, 112, 112, 0.33);
  border: 1px solid rgba(112, 112, 112, 0.55);
}

#mobile-app .phone-info-my-savings__chart-bar--old-cost {
  background: rgba(112, 112, 112, 0.2);
  border: 1px solid rgba(112, 112, 112, 0.4);
}

#mobile-app .phone-info-my-savings__chart-cost-label {
  font-size: calc(13px * var(--info-type-scale));
  font-weight: 500;
  line-height: 1;
  color: #4c4b53;
  white-space: nowrap;
}

#mobile-app .phone[data-theme="dark"] .phone-info-my-savings__chart-cost-label {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  #mobile-app .phone-info-my-savings__chart-bar {
    transition: none;
  }
}

#mobile-app .phone-info-charts-card--my-savings .phone-info-my-savings__trend-animation {
  top: -70px;
  left: 50px;
  right: -50px;
  margin-inline: auto;
  width: 304px;
  height: 304px;
}

#mobile-app .phone-info-yearly__legend-label {
  font-size: 14px;
  line-height: 18px;
}

#mobile-app .phone-info-yearly__legend-swatch {
  width: 12px;
  height: 12px;
}

#mobile-app .phone[data-theme="dark"] .phone-accordion-large--home .phone-accordion-large__backdrop {
  opacity: 0;
}

#mobile-app .phone-accordion-large--home {
  --home-accordion-height-duration: 1s;
  --home-accordion-height-ease: cubic-bezier(0.33, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
  transition:
    height var(--home-accordion-height-duration) var(--home-accordion-height-ease),
    max-height var(--home-accordion-height-duration) var(--home-accordion-height-ease),
    padding var(--home-accordion-height-duration) var(--home-accordion-height-ease);
}

#mobile-app .phone-card--home-accordion:not(.is-expanded) .phone-accordion-large--home {
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  padding: 0 !important;
}

#mobile-app .phone-accordion-large--home .phone-accordion-large__collapsed {
  min-height: 68px;
  height: 68px;
}

#mobile-app .phone-accordion-large--home .phone-accordion-large__expanded-wrap {
  display: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  box-sizing: border-box;
  transition:
    max-height var(--home-accordion-height-duration) var(--home-accordion-height-ease),
    margin-top var(--home-accordion-height-duration) var(--home-accordion-height-ease),
    padding var(--home-accordion-height-duration) var(--home-accordion-height-ease),
    visibility 0s linear var(--home-accordion-height-duration);
}

#mobile-app .phone-power-flow-home--accordion-embed {
  padding: 0;
  border: none;
  background: transparent;
  gap: 0;
}

#mobile-app .phone-power-flow-home--accordion-embed .phone-power-flow-home__scene {
  top: 2%;
  transform: translateY(0);
}

#mobile-app .phone-accordion-large--home .phone-power-flow-home--accordion-embed .phone-power-flow-home__diagram {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition:
    opacity 0.4s cubic-bezier(0.33, 0, 0.2, 1),
    transform var(--home-accordion-height-duration) var(--home-accordion-height-ease);
}

#mobile-app .phone-accordion-large--home .phone-accordion-large__collapsed .phone-accordion-large__media {
  transform: translateX(0);
  opacity: 1;
  transition:
    transform 0.55s cubic-bezier(0.33, 0, 0.2, 1),
    opacity 0.45s cubic-bezier(0.33, 0, 0.2, 1);
}

#mobile-app .phone-accordion-large--home .phone-accordion-large__collapsed .phone-accordion-large__head-left {
  transform: translateX(0);
  transition: transform 0.55s cubic-bezier(0.33, 0, 0.2, 1);
}

#mobile-app .phone-card--home-accordion.is-expanded .phone-accordion-large--home {
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0 0 16px;
}

#mobile-app .phone-card--home-accordion.is-expanded .phone-accordion-large--home .phone-accordion-large__expanded-wrap {
  display: block;
  position: relative;
  top: auto;
  left: 0;
  right: 0;
  height: auto;
  max-height: 380px;
  visibility: visible;
  pointer-events: auto;
  margin-top: -8px;
  padding: 0 24px 12px;
  transition:
    max-height var(--home-accordion-height-duration) var(--home-accordion-height-ease),
    margin-top var(--home-accordion-height-duration) var(--home-accordion-height-ease),
    padding var(--home-accordion-height-duration) var(--home-accordion-height-ease),
    visibility 0s;
}

#mobile-app .phone-card--home-accordion.is-expanded .phone-accordion-large__collapsed {
  flex-wrap: nowrap;
  min-height: 68px;
  padding-left: 70px;
}

#mobile-app .phone-card--home-accordion.is-expanded .phone-accordion-large__collapsed .phone-accordion-large__content {
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  width: auto;
  padding: 20px 20px 20px 0;
}

#mobile-app .phone-card--home-accordion.is-expanded .phone-accordion-large__collapsed .phone-accordion-large__head-left {
  transform: translateX(-48px);
}

#mobile-app .phone-card--home-accordion.is-expanded .phone-accordion-large__collapsed .phone-accordion-large__media {
  left: 0;
  top: 0;
  width: 62px;
  height: 68px;
  padding: 0;
  transform: translateX(-110%);
  opacity: 0;
}

#mobile-app .phone-card--home-accordion.is-expanded .phone-accordion-large--home .phone-power-flow-home__diagram {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 323 / 324;
  margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  #mobile-app .phone-accordion-large--home,
  #mobile-app .phone-card--home-accordion.is-expanded .phone-accordion-large--home,
  #mobile-app .phone-accordion-large--home .phone-accordion-large__expanded-wrap,
  #mobile-app .phone-accordion-large--home .phone-accordion-large__collapsed .phone-accordion-large__media,
  #mobile-app .phone-accordion-large--home .phone-accordion-large__collapsed .phone-accordion-large__head-left,
  #mobile-app .phone-accordion-large--home .phone-power-flow-home--accordion-embed .phone-power-flow-home__diagram {
    transition: none;
  }

  #mobile-app .phone-card--home-accordion.is-expanded .phone-accordion-large--home .phone-power-flow-home__diagram {
    opacity: 1;
    transform: none;
  }
}

#mobile-app .phone-accordion-large-stack.is-accordion-navigating {
  --accordion-nav-duration: 1.25s;
  --accordion-nav-ease: cubic-bezier(0.33, 0, 0.2, 1);
}

#mobile-app .phone-accordion-large-stack.is-accordion-navigating .phone-accordion-large--home,
#mobile-app .phone-accordion-large-stack.is-accordion-navigating .phone-accordion-large--icon-expand,
#mobile-app .phone-accordion-large-stack.is-accordion-navigating .phone-accordion-large--home .phone-accordion-large__expanded-wrap,
#mobile-app .phone-accordion-large-stack.is-accordion-navigating .phone-accordion-large--home .phone-accordion-large__collapsed,
#mobile-app .phone-accordion-large-stack.is-accordion-navigating .phone-accordion-large--home .phone-accordion-large__collapsed .phone-accordion-large__media,
#mobile-app .phone-accordion-large-stack.is-accordion-navigating .phone-accordion-large--home .phone-accordion-large__collapsed .phone-accordion-large__head-left,
#mobile-app .phone-accordion-large-stack.is-accordion-navigating .phone-accordion-large--home .phone-accordion-large__collapsed .phone-accordion-large__content,
#mobile-app .phone-accordion-large-stack.is-accordion-navigating .phone-accordion-large--home .phone-accordion-large__collapsed .phone-accordion-large__chevron img,
#mobile-app .phone-accordion-large-stack.is-accordion-navigating .phone-accordion-large--home .phone-power-flow-home--accordion-embed .phone-power-flow-home__diagram,
#mobile-app .phone-accordion-large-stack.is-accordion-navigating .phone-accordion-large--icon-expand .phone-accordion-large__collapsed,
#mobile-app .phone-accordion-large-stack.is-accordion-navigating .phone-accordion-large--icon-expand .phone-accordion-large__collapsed .phone-accordion-large__media,
#mobile-app .phone-accordion-large-stack.is-accordion-navigating .phone-accordion-large--icon-expand .phone-accordion-large__collapsed .phone-accordion-large__content,
#mobile-app .phone-accordion-large-stack.is-accordion-navigating .phone-accordion-large--icon-expand .phone-accordion-large__collapsed .phone-accordion-large__chevron img,
#mobile-app .phone-accordion-large-stack.is-accordion-navigating .phone-accordion-large--icon-expand .phone-accordion-large__inner,
#mobile-app .phone-accordion-large-stack.is-accordion-navigating .phone-card--home-accordion,
#mobile-app .phone-accordion-large-stack.is-accordion-navigating .phone-card--icon-accordion {
  transition-duration: var(--accordion-nav-duration);
  transition-timing-function: var(--accordion-nav-ease);
}

#mobile-app .phone-accordion-large-stack.is-accordion-navigating .phone-card--home-accordion.is-expanded .phone-accordion-large--home,
#mobile-app .phone-accordion-large-stack.is-accordion-navigating .phone-card--home-accordion:not(.is-expanded) .phone-accordion-large--home {
  transition:
    height var(--accordion-nav-duration) var(--accordion-nav-ease),
    max-height var(--accordion-nav-duration) var(--accordion-nav-ease),
    padding var(--accordion-nav-duration) var(--accordion-nav-ease);
}

#mobile-app .phone-accordion-large-stack.is-accordion-navigating .phone-card--home-accordion.is-expanded .phone-accordion-large--home .phone-accordion-large__expanded-wrap {
  transition:
    margin-top var(--accordion-nav-duration) var(--accordion-nav-ease),
    padding var(--accordion-nav-duration) var(--accordion-nav-ease),
    visibility 0s;
}

#mobile-app .phone-accordion-large-stack.is-accordion-navigating .phone-card--home-accordion:not(.is-expanded) .phone-accordion-large--home .phone-accordion-large__expanded-wrap {
  display: none;
  transition:
    margin-top var(--accordion-nav-duration) var(--accordion-nav-ease),
    padding var(--accordion-nav-duration) var(--accordion-nav-ease),
    visibility 0s linear var(--accordion-nav-duration);
}

#mobile-app .phone-accordion-large-stack.is-accordion-navigating .phone-card--icon-accordion.is-expanded .phone-accordion-large--icon-expand .phone-accordion-large__inner {
  transition:
    opacity var(--accordion-nav-duration) var(--accordion-nav-ease),
    transform var(--accordion-nav-duration) var(--accordion-nav-ease);
}

#mobile-app .phone-card--grid-accordion.is-expanded .phone-accordion-large--grid .phone-accordion-large__expanded-wrap {
  padding: 6px 0 6px 72px;
  margin-top: 2px;
}

#mobile-app .phone-accordion-large__grid-status {
  padding-left: 14px;
}

#mobile-app .phone-card--grid-accordion.phone-card--icon-accordion.is-expanded
  .phone-accordion-large--grid.phone-accordion-large--icon-expand
  .phone-accordion-large__collapsed
  .phone-accordion-large__media {
  top: 58px;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="trends"] .phone__view--home-landing,
#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="trends"] .phone__view--home-energy {
  display: none !important;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="home"] .phone__view--default {
  display: none;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="home"] .phone__view--home-landing {
  display: flex;
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="home"][data-home-energy-view="summary"] .phone__scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="home"][data-home-energy-view="details"] .phone__view--home-landing {
  display: none;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="home"][data-home-energy-view="details"] .phone__view--home-energy {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#mobile-app .phone-home-summary {
  margin-bottom: 12px;
}

#mobile-app .phone[data-preview-view="full-app"][data-active-phone-tab="home"][data-home-energy-view="summary"] .phone-energy-unit-toggle {
  display: none;
}

#mobile-app .phone-preview-energy-tabs {
  display: none !important;
}

#mobile-app .phone-full-app__energy-panels-track {
  transform: none !important;
}

#mobile-app .phone-full-app__energy-panel:not(#phone-energy-panel-overview) {
  display: none;
}

#mobile-app .phone-power-flow-badge--ev {
  right: 26%;
}

#mobile-app .phone__header {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

#mobile-app .phone__badge-wrap {
  width: fit-content;
  max-width: 100%;
  justify-content: center;
}

#mobile-app .phone__badge {
  padding: 6px 10px 6px 12px;
  gap: 6px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  max-width: none;
  width: fit-content;
}

#mobile-app .phone__badge-edit {
  width: 18px;
  height: 18px;
}

#mobile-app .phone__badge-edit .phone-edit-icon {
  width: 18px;
  height: 18px;
}

#mobile-app .phone:not([data-active-phone-tab="contact"]) .phone__badge-edit {
  display: none !important;
}

#mobile-app .phone__badge-label {
  white-space: nowrap;
}

#mobile-app .phone[data-active-phone-tab="compliance"] .phone__badge-wrap {
  max-width: 100%;
  min-width: 0;
}

#mobile-app .phone[data-active-phone-tab="compliance"] .phone__badge {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

#mobile-app .phone[data-active-phone-tab="compliance"] .phone__badge-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#mobile-app .phone__menu {
  width: 97px;
  padding-left: calc(97px - (24px * 32.6 / 14.9 + 10px));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#mobile-app .phone[data-active-phone-tab="marketplace-products"] .phone__header-end .phone__menu,
#mobile-app .phone[data-active-phone-tab="marketplace-product-detail"] .phone__header-end .phone__menu {
  display: none;
}

#mobile-app .phone-marketplace-product-detail-bar {
  padding: 16px 12px;
}

#mobile-app .phone-marketplace-product-detail-bar__cta {
  min-height: 48px;
  font-size: 16px;
}

#mobile-app .phone-marketplace-pagination {
  padding: 14px 12px;
}

#mobile-app .phone-marketplace-pagination__ask-ada-avatar {
  width: 26px;
  height: 26px;
}

#mobile-app .phone-marketplace-pagination__ask-ada-label {
  font-size: 13px;
  line-height: 18px;
}

#mobile-app .phone-marketplace-pagination__controls {
  gap: 12px;
}

#mobile-app .phone-marketplace-pagination__range-option {
  min-height: 40px;
  font-size: 15px;
  line-height: 22px;
}

#mobile-app .phone-marketplace-pagination__inner {
  min-height: 44px;
  gap: 12px;
}

#mobile-app .phone-marketplace-pagination__range {
  min-height: 40px;
  padding: 8px 8px 8px 14px;
}

#mobile-app .phone-marketplace-pagination__range-label,
#mobile-app .phone-marketplace-pagination__of,
#mobile-app .phone-marketplace-pagination__total {
  font-size: 15px;
  line-height: 22px;
}

#mobile-app .phone-marketplace-pagination__nav-btn {
  width: 40px;
  height: 40px;
}

#mobile-app .phone-marketplace-pagination__nav-icon {
  width: 22px;
  height: 22px;
}

#mobile-app .phone-menu {
  background: rgba(241, 241, 241, 0.85);
}

#mobile-app .phone[data-theme="dark"] .phone-menu {
  background: rgba(17, 17, 17, 0.85);
}

#mobile-app .phone-menu__footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 20px;
  margin-top: -18px;
  margin-bottom: 20px;
}

#mobile-app .phone-menu__address {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  background: #fff;
  font-family: var(--phone-font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  color: #3c3e44;
  text-align: center;
  white-space: nowrap;
}

#mobile-app .phone[data-theme="dark"] .phone-menu__address {
  background: #18181b;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

#mobile-app .phone-menu__switch-address {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--phone-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--main-primary);
  text-decoration: underline;
  cursor: pointer;
}

#mobile-app .phone-menu__switch-address:focus-visible {
  outline: 2px solid var(--main-primary);
  outline-offset: 2px;
}

#mobile-app .phone__tabbar {
  border: 1px solid var(--color-border-light);
}

#mobile-app .phone:not([data-theme="dark"]) .phone__tabbar {
  border-color: var(--color-border);
}

#mobile-app .phone:not([data-theme="dark"])[data-active-phone-tab="contact"] .phone__tabbar {
  border-color: #6b6b6b;
}

#mobile-app .phone-boost-card__cta {
  height: 32px;
  padding: 0 12px;
  border: 1.5px solid #4272dd;
  border-radius: 4px;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #4c4b53;
}

#mobile-app .phone:not([data-theme="dark"]) .phone-boost-card__cta {
  color: #4c4b53;
}

#mobile-app .phone[data-theme="dark"] .phone-boost-card__cta {
  color: #ffffff;
}

#mobile-app .phone-boost-card__cta:focus-visible {
  outline: 2px solid #4272dd;
  outline-offset: 2px;
}

#mobile-app .phone-referral__card-body {
  gap: calc(12px * var(--info-type-scale));
}

#mobile-app .phone-referral__code {
  gap: calc(14px * var(--info-type-scale));
  padding-top: calc(8px * var(--info-type-scale));
}

#mobile-app .phone-referral__wallet img {
  width: calc(132px * var(--info-type-scale) * 1.12);
}

#mobile-app .phone-info-card {
  gap: 12px;
}

#mobile-app .phone-info-card__title {
  font-weight: 400;
}

#mobile-app .phone-info-card--weather .phone-info-card__title,
#mobile-app .phone-info-card--co2 .phone-info-card__title,
#mobile-app .phone-info-card--production .phone-info-card__title,
#mobile-app .phone-info-card--solar-news .phone-info-card__title {
  font-weight: 600;
}

#mobile-app .phone-info-card__value {
  font-size: calc(40px * var(--info-type-scale));
  letter-spacing: calc(-0.4px * var(--info-type-scale));
  color: var(--main-primary);
}

#mobile-app .phone-info-card__value-row {
  gap: calc(18px * var(--info-type-scale));
}

#mobile-app .phone-info-card__value-bar {
  height: calc(17px * var(--info-type-scale));
  background: rgba(10, 9, 11, 0.12);
}

#mobile-app .phone[data-theme="dark"] .phone-info-card__value-bar {
  background: rgba(255, 255, 255, 0.14);
}

#mobile-app .phone-info-appliances-chart__peak {
  bottom: 6px;
  height: 64px;
}

#mobile-app .phone-info-savings-link {
  min-height: 32px;
  padding: 0 10px;
  font-size: calc(13px * var(--info-type-scale));
  line-height: calc(18px * var(--info-type-scale));
}

#mobile-app .phone-info-savings-link img {
  width: 22px;
  height: 22px;
}