/* =========================================================
   FPEA_STEP5_MOBILE_STYLE_V15_1

   Mobile enhancement layer for the approved V15 desktop
   design. Desktop layout remains unchanged.
   ========================================================= */

@media (max-width: 768px) {

  .fpea-savings-screen-v15 {
    width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .fpea-savings-panel-v15 {
    overflow: hidden !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 auto !important;
    padding: 7px !important;

    border-radius: 19px !important;
  }

  .fpea-v15 {
    border-radius: 16px !important;
  }

  /*
   * HERO
   */

  .fpea-v15-hero {
    display: flex !important;
    flex-direction: column !important;

    min-height: 0 !important;
    padding-bottom: 17px !important;

    background:
      linear-gradient(
        180deg,
        #ffffff 0%,
        #f5fafc 100%
      ) !important;
  }

  .fpea-v15-hero::after {
    display: none !important;
  }

  .fpea-v15-hero-copy {
    order: 1 !important;

    width: 100% !important;
    max-width: none !important;

    padding:
      25px 19px 19px !important;
  }

  .fpea-v15-eyebrow {
    margin-bottom: 8px !important;

    font-size: 11px !important;
  }

  .fpea-v15-hero h2 {
    max-width: 520px !important;

    font-size:
      clamp(
        34px,
        10vw,
        46px
      ) !important;

    line-height: 1.01 !important;
    letter-spacing: -0.052em !important;
  }

  .fpea-v15-hero-copy > p {
    max-width: none !important;

    margin-top: 14px !important;

    font-size: 13px !important;
    line-height: 1.48 !important;
  }

  .fpea-v15-confirmation {
    align-items: flex-start !important;

    margin-top: 17px !important;

    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  .fpea-v15-confirmation-icon {
    flex:
      0 0 auto !important;
  }

  .fpea-v15-hero-image {
    position: relative !important;
    inset: auto !important;

    order: 2 !important;

    width:
      calc(
        100% - 24px
      ) !important;

    height:
      clamp(
        215px,
        58vw,
        285px
      ) !important;

    margin:
      0 12px !important;

    border-radius: 16px !important;

    object-position: center !important;

    box-shadow:
      0 15px 34px
      rgba(21, 65, 88, 0.13) !important;
  }

  .fpea-v15-energy-card {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    order: 3 !important;

    display: grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap: 9px 12px !important;

    width:
      calc(
        100% - 42px
      ) !important;

    margin:
      -42px auto 0 !important;
    padding: 16px !important;

    border-radius: 17px !important;
  }

  .fpea-v15-energy-card h3 {
    grid-column:
      1 / -1 !important;

    margin-bottom: 3px !important;

    font-size: 10px !important;
  }

  .fpea-v15-flow-item {
    grid-template-columns:
      31px minmax(0, 1fr) !important;

    gap: 8px !important;

    min-width: 0 !important;
    padding: 7px 0 !important;
  }

  .fpea-v15-flow-item::after {
    display: none !important;
  }

  .fpea-v15-flow-icon {
    width: 31px !important;
    height: 31px !important;

    font-size: 15px !important;
  }

  .fpea-v15-flow-copy span {
    font-size: 9px !important;
  }

  .fpea-v15-flow-copy strong {
    overflow-wrap: anywhere !important;

    font-size: 13px !important;
  }

  /*
   * HEADLINE RESULTS
   */

  .fpea-v15-kpis {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap: 9px !important;

    margin-top: 0 !important;
    padding:
      13px 11px !important;
  }

  .fpea-v15-kpi {
    grid-template-columns:
      41px minmax(0, 1fr) !important;

    gap: 9px !important;

    min-height: 88px !important;
    padding: 12px !important;

    border-radius: 14px !important;
  }

  .fpea-v15-kpi-icon {
    width: 41px !important;
    height: 41px !important;

    font-size: 19px !important;
  }

  .fpea-v15-kpi-label {
    font-size: 8px !important;
    line-height: 1.25 !important;
  }

  .fpea-v15-kpi strong {
    margin:
      4px 0 3px !important;

    font-size: 20px !important;
  }

  .fpea-v15-kpi small {
    font-size: 9px !important;
    line-height: 1.3 !important;
  }

  /*
   * ANNUAL BREAKDOWN AND CHART
   */

  .fpea-v15-main-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 11px !important;

    padding:
      0 11px 12px !important;
  }

  .fpea-v15-card {
    padding: 15px !important;

    border-radius: 15px !important;
  }

  .fpea-v15-section-heading {
    margin-bottom: 13px !important;
  }

  .fpea-v15-section-heading h3 {
    font-size: 17px !important;
    line-height: 1.17 !important;
  }

  .fpea-v15-section-heading p {
    font-size: 10px !important;
    line-height: 1.45 !important;
  }

  .fpea-v15-benefit-row {
    margin-top: 15px !important;
  }

  .fpea-v15-benefit-head {
    grid-template-columns:
      34px minmax(0, 1fr)
      auto !important;

    gap: 9px !important;
  }

  .fpea-v15-benefit-icon {
    width: 34px !important;
    height: 34px !important;
  }

  .fpea-v15-benefit-copy strong {
    font-size: 11px !important;
  }

  .fpea-v15-benefit-copy span {
    font-size: 9px !important;
    line-height: 1.35 !important;
  }

  .fpea-v15-benefit-value {
    font-size: 15px !important;
  }

  .fpea-v15-benefit-track {
    margin-left: 43px !important;
  }

  .fpea-v15-benefit-total {
    margin-top: 23px !important;
  }

  .fpea-v15-benefit-total span {
    font-size: 10px !important;
  }

  .fpea-v15-benefit-total strong {
    font-size: 18px !important;
  }

  .fpea-v15-chart-header {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 12px !important;
  }

  .fpea-v15-chart-control {
    width: 100% !important;
    min-width: 0 !important;
  }

  .fpea-v15-chart-control label {
    font-size: 9px !important;
  }

  .fpea-v15-chart-control select {
    min-height: 44px !important;

    font-size: 12px !important;
  }

  .fpea-v15-chart-legend {
    gap: 10px !important;

    margin:
      8px 0 8px !important;

    font-size: 9px !important;
  }

  /*
   * The chart keeps its proper internal width instead of
   * shrinking all text to unreadable sizes. It can be
   * swiped horizontally on smaller phones.
   */

  .fpea-v15-chart-shell {
    overflow-x: auto !important;
    overflow-y: hidden !important;

    width: 100% !important;
    min-height: 267px !important;

    padding-bottom: 6px !important;

    -webkit-overflow-scrolling:
      touch !important;

    scrollbar-width:
      thin !important;
  }

  .fpea-v15-chart-shell::before {
    content:
      "Swipe to explore the full 10-year outlook" !important;

    display: block !important;

    margin:
      0 0 7px 3px !important;

    color: #7a909c !important;

    font-size: 9px !important;
    font-weight: 620 !important;
  }

  .fpea-v15-chart-shell svg {
    width: 620px !important;
    min-width: 620px !important;
    min-height: 253px !important;
  }

  .fpea-v15-chart-summary {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      ) !important;
  }

  .fpea-v15-chart-summary > div {
    padding:
      10px 5px !important;
  }

  .fpea-v15-chart-summary span {
    font-size: 8px !important;
  }

  .fpea-v15-chart-summary strong {
    font-size: 15px !important;
  }

  .fpea-v15-chart-note {
    font-size: 9px !important;
    line-height: 1.4 !important;
  }

  /*
   * SELECTED SYSTEM
   */

  .fpea-v15-system-strip {
    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 10px !important;

    margin:
      0 11px 12px !important;
    padding: 14px !important;
  }

  .fpea-v15-system-visual {
    min-height: 87px !important;
  }

  .fpea-v15-system-visual img {
    max-width: 108px !important;
    max-height: 82px !important;
  }

  .fpea-v15-system-details h3 {
    margin-bottom: 11px !important;

    font-size: 15px !important;
    text-align: center !important;
  }

  .fpea-v15-system-metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap: 0 !important;
  }

  .fpea-v15-system-metric {
    min-height: 63px !important;

    padding: 11px !important;

    border-right: 0 !important;
    border-bottom:
      1px solid
      rgba(33, 96, 128, 0.09) !important;
  }

  .fpea-v15-system-metric:nth-child(odd) {
    border-right:
      1px solid
      rgba(33, 96, 128, 0.09) !important;
  }

  .fpea-v15-system-metric:last-child {
    grid-column:
      1 / -1 !important;

    border-right: 0 !important;
    border-bottom: 0 !important;

    text-align: center !important;
  }

  .fpea-v15-system-metric strong {
    font-size: 13px !important;
  }

  .fpea-v15-system-metric span {
    margin-top: 4px !important;

    font-size: 9px !important;
  }

  /*
   * ESTIMATE ASSUMPTIONS
   */

  .fpea-v15-refine {
    margin:
      0 11px 12px !important;
  }

  .fpea-v15-refine-head {
    align-items: flex-start !important;

    padding: 14px !important;
  }

  .fpea-v15-refine-title h3 {
    font-size: 15px !important;
  }

  .fpea-v15-refine-title h3 span {
    display: block !important;

    margin-top: 2px !important;

    font-size: 10px !important;
  }

  .fpea-v15-refine-title p {
    font-size: 9px !important;
    line-height: 1.4 !important;
  }

  .fpea-v15-refine-toggle {
    flex:
      0 0 auto !important;

    min-width: 91px !important;
    min-height: 44px !important;

    font-size: 10px !important;
  }

  .fpea-v15-refine-body {
    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 12px !important;

    padding:
      0 14px 15px !important;
  }

  .fpea-v15-field label {
    margin-bottom: 6px !important;

    font-size: 10px !important;
  }

  .fpea-v15-field input,
  .fpea-v15-field select {
    min-height: 46px !important;

    padding:
      10px 12px !important;

    font-size: 12px !important;
  }

  /*
   * REASSURANCE
   */

  .fpea-v15-reassurance {
    grid-template-columns:
      40px minmax(0, 1fr) !important;

    gap: 11px !important;

    margin:
      0 11px 12px !important;
    padding: 14px !important;
  }

  .fpea-v15-reassurance strong {
    font-size: 11px !important;
  }

  .fpea-v15-reassurance p {
    font-size: 9px !important;
    line-height: 1.45 !important;
  }

  .fpea-v15-next-link {
    grid-column:
      1 / -1 !important;

    width: 100% !important;
    min-height: 44px !important;

    margin-top: 2px !important;

    border:
      1px solid
      rgba(37, 132, 81, 0.13) !important;

    border-radius: 10px !important;

    background:
      rgba(255, 255, 255, 0.70) !important;

    font-size: 10px !important;
  }

  /*
   * FINAL CTA
   */

  .fpea-v15-cta {
    grid-template-columns:
      minmax(0, 1fr) !important;

    margin:
      0 11px 14px !important;

    border-radius: 15px !important;
  }

  .fpea-v15-cta-image {
    width: 100% !important;
    height: 195px !important;
    min-height: 0 !important;

    object-position: center !important;
  }

  .fpea-v15-cta-copy {
    padding:
      19px 18px 14px !important;
  }

  .fpea-v15-cta-copy h3 {
    max-width: 430px !important;

    font-size: 21px !important;
    line-height: 1.12 !important;
  }

  .fpea-v15-cta-copy p {
    font-size: 10px !important;
    line-height: 1.5 !important;
  }

  .fpea-v15-investment {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      auto !important;

    align-items: center !important;
    gap: 3px 14px !important;

    padding:
      15px 18px !important;

    border-right: 0 !important;
    border-left: 0 !important;

    border-top:
      1px solid
      rgba(255, 255, 255, 0.15) !important;

    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.15) !important;
  }

  .fpea-v15-investment strong {
    grid-row:
      1 / span 2 !important;
    grid-column: 2 !important;

    font-size: 29px !important;
  }

  .fpea-v15-investment span,
  .fpea-v15-investment small {
    margin-top: 0 !important;

    font-size: 9px !important;
  }

  .fpea-v15-cta-actions {
    padding:
      17px 18px 19px !important;
  }

  .fpea-v15-primary {
    min-height: 54px !important;

    font-size: 13px !important;

    touch-action:
      manipulation !important;
  }

  .fpea-v15-secondary-actions {
    display: grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap: 8px !important;

    margin-top: 11px !important;
  }

  .fpea-v15-secondary-actions button {
    min-height: 44px !important;

    padding:
      8px !important;

    border:
      1px solid
      rgba(255, 255, 255, 0.18) !important;

    border-radius: 9px !important;

    background:
      rgba(255, 255, 255, 0.08) !important;

    font-size: 9px !important;

    touch-action:
      manipulation !important;
  }

  .fpea-v15-save-status {
    min-height: 25px !important;

    padding:
      0 12px
      max(
        8px,
        env(
          safe-area-inset-bottom
        )
      ) !important;

    font-size: 9px !important;
  }

  .fpea-v15 button,
  .fpea-v15 select,
  .fpea-v15 input {
    touch-action:
      manipulation !important;
  }
}

/*
 * EXTRA-SMALL PHONES
 */

@media (max-width: 380px) {

  .fpea-v15-hero-copy {
    padding:
      22px 16px 17px !important;
  }

  .fpea-v15-hero h2 {
    font-size: 33px !important;
  }

  .fpea-v15-energy-card {
    width:
      calc(
        100% - 26px
      ) !important;

    margin-top: -34px !important;
    padding: 13px !important;
  }

  .fpea-v15-kpis {
    gap: 7px !important;

    padding:
      11px 8px !important;
  }

  .fpea-v15-kpi {
    grid-template-columns:
      35px minmax(0, 1fr) !important;

    gap: 7px !important;

    padding: 10px !important;
  }

  .fpea-v15-kpi-icon {
    width: 35px !important;
    height: 35px !important;

    font-size: 17px !important;
  }

  .fpea-v15-kpi strong {
    font-size: 17px !important;
  }

  .fpea-v15-chart-summary strong {
    font-size: 13px !important;
  }

  .fpea-v15-secondary-actions {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }
}

/*
 * LANDSCAPE PHONES
 */

@media (
  max-width: 900px
) and (
  max-height: 520px
) and (
  orientation: landscape
) {

  .fpea-v15-hero {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(300px, 0.95fr) !important;

    min-height: 360px !important;
  }

  .fpea-v15-hero-copy {
    align-self: center !important;

    padding:
      26px 22px !important;
  }

  .fpea-v15-hero-image {
    position: absolute !important;

    inset:
      0 0 0 50% !important;

    width: 50% !important;
    height: 100% !important;

    margin: 0 !important;

    border-radius: 0 !important;
  }

  .fpea-v15-energy-card {
    position: absolute !important;

    right: 15px !important;
    bottom: 15px !important;

    width: 44% !important;
    margin: 0 !important;
  }
}