@charset "utf-8";
/* ==========================================================================
   SunRight Solar — Battery Storage hub (/batteries/)

   Shares the system with the homepage and the solar panel hub. Its own
   identity is the capacity ladder: six capacities set as ruled rows with
   proportional bars, which reads as a scale rather than a card grid and
   avoids implying that any capacity buys a fixed amount of backup.

     Page head    breadcrumb + head + banner (shared .page-head, page 2)
     Daily cycle  four stages across a band
     Benefits     four ruled cards
     Ladder       six capacity rows, proportional bars
     Brands       four ruled entries
     Chemistry    copy beside a checked advantages list
     Coupling     two-card comparison (shared .compare, page 2)
     Expansion    split with the modular stack
     Rebate       inset tinted panel (shared)
     FAQ          shared accordion
   ========================================================================== */

/* --------------------------------------------------------------------------
   Daily cycle — four stages across a band
   -------------------------------------------------------------------------- */
.cycle {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  counter-reset: cycle;
}
.cycle__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: clamp(1.4rem, 2.2vw, 1.85rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.cycle__stage::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-cta);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease-out);
}
.cycle__stage:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(7, 42, 76, .05), 0 28px 52px -24px rgba(7, 42, 76, .28);
}
.cycle__stage:hover::before { transform: scaleX(1); }
.cycle__when {
  font-family: var(--font-num);
  font-size: .6875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--orange-700);
}
.cycle__stage h3 { font-size: var(--step-1); }
.cycle__stage p { font-size: var(--step--1); line-height: 1.72; }

.cycle__note {
  margin-top: clamp(2rem, 3vw, 2.75rem);
  padding: clamp(1.5rem, 2.4vw, 2rem) clamp(1.5rem, 2.4vw, 2.25rem);
  background: var(--sky-50);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
.cycle__note p { margin: 0; max-width: 52rem; }

/* --------------------------------------------------------------------------
   Benefits — four ruled entries
   -------------------------------------------------------------------------- */
/* Fixed 2x2, not auto-fit. There are exactly four benefits, and auto-fit
   dropped them into a ragged 3 + 1 on wide screens. Two columns also give the
   longer entries (blackout, VPP) a comfortable measure. */
.benefits {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.75rem) clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) {
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.benefit { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.benefit__index {
  display: block;
  margin-bottom: .55rem;
  font-family: var(--font-num);
  font-size: 1.375rem; font-weight: 700; line-height: 1; letter-spacing: -0.04em;
  color: var(--sun-600);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .benefit__index {
    background: var(--grad-cta);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.benefit h3 { margin-bottom: .7rem; font-size: var(--step-1); }
.benefit p { font-size: var(--step-0); line-height: 1.75; }
.benefit p + p { margin-top: .9rem; }

/* --------------------------------------------------------------------------
   Capacity ladder — the page's signature
   A scale, not a card grid: the bar shows each capacity against the 42kWh top
   of the range. Deliberately carries no backup-duration column — backup scope
   is set by inverter output and switchboard design, never by capacity.
   -------------------------------------------------------------------------- */
.ladder { margin-top: clamp(2.5rem, 4vw, 3.5rem); border-top: 1px solid var(--line); }
.ladder__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  padding: clamp(1.4rem, 2.2vw, 1.9rem) 0;
  border-bottom: 1px solid var(--line);
  transition: background-color .3s var(--ease);
}
.ladder__row:hover { background: var(--sky-25); }
@media (min-width: 860px) {
  /* value + scale | approved descriptor | link. No fourth "backup duration"
     column by design: backup scope follows inverter output and switchboard
     configuration, never capacity, so a per-capacity backup column would be
     an implied promise the hardware cannot make. */
  .ladder__row {
    grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr) auto;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
  }
  .ladder__row .link-arrow { align-self: center; }
}
.ladder__value {
  font-family: var(--font-num);
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 700; line-height: .95; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ladder__value em {
  font-style: normal; font-size: .38em; font-weight: 600;
  color: var(--sun-600); margin-left: .14em; vertical-align: .32em;
}
.ladder__scale { display: grid; gap: .55rem; align-content: center; }
.ladder__bar { height: 6px; border-radius: 6px; background: var(--grey-100); overflow: hidden; }
.ladder__bar i {
  display: block; height: 100%; width: var(--fill, 20%);
  border-radius: inherit;
  background: var(--grad-cta);
  transition: width .5s var(--ease-out);
}
.ladder__row:hover .ladder__bar i { width: 100%; }
.ladder__meta { font-size: .8125rem; color: var(--muted); }
.ladder__copy { font-size: var(--step--1); line-height: 1.72; margin: 0;
  max-width: 40rem;
}
.ladder__row .link-arrow { white-space: nowrap; }
/* Under 360px the longest label ("Learn more about the 42kWh battery") is
   wider than the screen; let it wrap rather than push the arrow off-edge. */
@media (max-width: 359px) { .ladder__row .link-arrow { white-space: normal; } }

.ladder__note {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2rem, 3vw, 2.75rem);
  padding: clamp(1.5rem, 2.4vw, 2rem) clamp(1.5rem, 2.4vw, 2.25rem);
  background: var(--sky-50);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
@media (min-width: 900px) { .ladder__note { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2.5rem; } }
.ladder__note p { margin: 0; max-width: 46rem; }
.ladder__note strong { font-family: var(--font-display); font-weight: 700; color: var(--ink); }

/* --------------------------------------------------------------------------
   Brands — four ruled entries
   -------------------------------------------------------------------------- */
.brandlist {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr));
}
.brandlist__item { padding-top: 1.35rem; border-top: 1px solid var(--line); }
.brandlist__item h3 { margin-bottom: .6rem; font-size: var(--step-1); }
.brandlist__item p { font-size: var(--step--1); line-height: 1.72; }
.brandlist__foot { margin-top: clamp(2rem, 3vw, 2.5rem); }
.brandlist__foot p { max-width: 46rem; }
.brandlist__foot .link-arrow { margin-top: 1.1rem; }

/* --------------------------------------------------------------------------
   Chemistry — advantages set as a ruled list
   -------------------------------------------------------------------------- */
.chem__list { display: grid; gap: 0; margin: 1.25rem 0 0; border-top: 1px solid var(--line); }
.chem__list li {
  padding: .8rem 0 .8rem 1.6rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-0);
  line-height: 1.6;
  position: relative;
}
.chem__list li::before {
  content: "";
  position: absolute; left: 0; top: 1.5em;
  width: 10px; height: 2px;
  background: var(--grad-cta);
}
.chem__tradeoff { margin-top: 1.5rem; }
.chem__tradeoff strong,
.chem__list + p strong { font-family: var(--font-display); font-weight: 700; color: var(--ink); }

/* --------------------------------------------------------------------------
   Expansion
   -------------------------------------------------------------------------- */
.expansion__split { margin-top: clamp(2.5rem, 4vw, 3.5rem); }

.expansion__points { display: grid; gap: 1.35rem; margin-top: 1.5rem; }
.expansion__points > div { padding-left: 1.2rem; border-left: 2px solid var(--line); transition: border-color .3s var(--ease); }
.expansion__points > div:hover { border-left-color: var(--sun-600); }
.expansion__points dt {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-0);
  color: var(--ink); margin-bottom: .25rem;
}
.expansion__points dd { font-size: var(--step-0); line-height: 1.75; }