@charset "utf-8";
/* ==========================================================================
   SunRight Solar — Best Home Battery Australia (/best-home-battery-australia/)

   The second buying guide. It shares the guide furniture in main.css §11d —
   the numbered spec glossary, the scenarios, the onward capacity links — so
   the two guides read as one system. Its identity is the capacity rail.

   WHY A RAIL AND NOT A TABLE
   The panel guide compares nine brands on six clean numeric specifications,
   which is what a table is for. The battery specifications are not like that:
   continuous output is "varies by configuration" for one brand and "depends on
   paired inverter" for two others, and modularity is the difference between a
   range and a fixed unit. Forcing those into numeric columns would mean
   inventing values or flattening qualifications the approved copy is careful
   about. So the one genuinely comparable dimension — usable capacity — is
   drawn to scale on a shared axis, and everything qualitative is carried as
   text beside it. A brand that ships one fixed size shows a marker, not a bar,
   which is the honest picture of what you can and cannot expand.

     Page head    shared .page-head + banner
     Choosing     copy
     Specs        shared .specdefs
     Rail         ten brands drawn on a shared kWh axis
     Brands       ten entries, spec column beside the copy
     Scenarios    shared .scenarios
     Stocked      what SunRight Solar carries, and what it does not
     FAQ          shared accordion
   ========================================================================== */

/* --------------------------------------------------------------------------
   Capacity rail — the signature
   -------------------------------------------------------------------------- */
.caprail {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding: clamp(1.4rem, 2.4vw, 2.25rem) clamp(1.1rem, 2vw, 2rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
.caprail__cap { font-size: .8125rem; color: var(--muted); margin: 0 0 clamp(1.25rem, 2vw, 1.75rem); }

/* One row per brand: name, then the track. The name column is fixed so every
   bar starts on the same vertical line and the lengths stay comparable. */
.caprail__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .4rem 1.25rem;
  padding: .7rem 0;
  border-top: 1px solid var(--line);
}
.caprail__row:first-of-type { border-top: 0; }
.caprail__name {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .7rem;
  font-family: var(--font-display); font-weight: 700; font-size: var(--step--1);
  color: var(--ink);
}
.caprail__row.is-stocked .caprail__name { color: var(--orange-700); }

.caprail__track {
  position: relative;
  height: 1.5rem;
  border-radius: var(--r-pill);
  background: var(--grey-100);
}
/* The bar spans min to max usable capacity. --a and --b are percentages of the
   axis, written into the markup from the approved figures. */
.caprail__bar {
  position: absolute; top: 0; bottom: 0;
  left: var(--a); right: calc(100% - var(--b));
  border-radius: var(--r-pill);
  background: var(--navy-600);
}
/* Stocked brands carry the sunrise; the rest are navy. Hue and warmth both
   change, so the distinction survives a greyscale print and colour blindness —
   and the row's name is coloured too, so it never rests on the bar alone. */
.caprail__row.is-stocked .caprail__bar { background: var(--grad-cta); }
/* A fixed-size unit is a marker, not a span — it cannot be expanded in place. */
.caprail__bar--point {
  right: auto;
  width: 1rem;
  margin-left: -.5rem;
  border-radius: 50%;
}
/* An open end means the range continues past the axis (Sigenergy's "30kWh+"). */
.caprail__bar--open { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.caprail__bar--open::after {
  content: "";
  position: absolute; right: -.55rem; top: 50%;
  width: 0; height: 0;
  transform: translateY(-50%);
  border-left: .6rem solid var(--navy-600);
  border-top: .75rem solid transparent;
  border-bottom: .75rem solid transparent;
}
.caprail__row.is-stocked .caprail__bar--open::after { border-left-color: var(--sun-300); }

.caprail__value {
  font-family: var(--font-num); font-size: .8125rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--body);
  white-space: nowrap;
}

/* The axis. Ticks are drawn from the same scale as the bars, and it occupies
   the track column of a real grid row so the alignment is exact. */
.caprail__row--axis { border-top: 0; padding: 0; }
.caprail__axis {
  position: relative;
  height: 1.9rem;
  margin-top: .35rem;
  border-top: 1px solid var(--line-strong);
}
.caprail__tick {
  position: absolute; top: 0;
  left: var(--x);
  transform: translateX(-50%);
  padding-top: .4rem;
  font-family: var(--font-num); font-size: .6875rem; font-weight: 700;
  letter-spacing: .06em; color: var(--muted);
  white-space: nowrap;
}
.caprail__tick::before {
  content: "";
  position: absolute; top: -1px; left: 50%;
  width: 1px; height: .3rem;
  background: var(--line-strong);
}
.caprail__key {
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
  margin-top: 1.25rem;
  font-size: .8125rem; color: var(--muted);
}
.caprail__key span { display: inline-flex; align-items: center; gap: .5rem; }
.caprail__key span::before {
  content: "";
  flex: none;
  width: 1.4rem; height: .5rem; border-radius: var(--r-pill);
  background: var(--grad-cta);
}
.caprail__key span + span::before { background: var(--navy-600); }
.caprail__key span + span + span::before {
  width: .7rem; height: .7rem; border-radius: 50%; background: var(--navy-600);
}

@media (min-width: 760px) {
  .caprail__row { grid-template-columns: minmax(9rem, .26fr) minmax(0, 1fr) minmax(7.5rem, auto); align-items: center; }
}
@media (min-width: 1024px) {
  .caprail__row { grid-template-columns: minmax(11rem, .22fr) minmax(0, 1fr) minmax(8.5rem, auto); }
}
/* Below the split the row stacks, so the axis row's empty cells would add two
   blank lines. Collapse them and let the axis run the full width. */
@media (max-width: 759px) {
  .caprail__row--axis > div:empty { display: none; }
}

/* --------------------------------------------------------------------------
   Brand entries — specification column beside the copy
   The panel guide runs copy-left / specs-right; this one is the mirror, so the
   two guides are recognisably related without looking like the same page.
   -------------------------------------------------------------------------- */
.bprofiles { margin-top: clamp(2.5rem, 4vw, 3.5rem); display: grid; gap: 0; border-top: 1px solid var(--line); }
.bprofile {
  position: relative;
  display: grid;
  gap: clamp(1.1rem, 2.2vw, 3rem);
  padding: clamp(1.75rem, 2.8vw, 2.5rem) 0;
  border-bottom: 1px solid var(--line);
}
.bprofile__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem; margin-bottom: 1rem; }
.bprofile h3 { font-size: var(--step-2); }
.bprofile__index {
  font-family: var(--font-num); font-size: .875rem; font-weight: 700;
  letter-spacing: .04em; color: var(--sun-600);
}
/* A measure, not just a column. Without it the copy ran to 100 characters
   a line at 1366px and wider, well past comfortable reading. */
.bprofile p { font-size: var(--step-0); line-height: 1.75; max-width: 44rem; }
.bprofile p + p { margin-top: 1rem; }
.bprofile__best { margin-top: 1.1rem; }
.bprofile__best strong { font-family: var(--font-display); font-weight: 700; color: var(--ink); }

/* The specification column. Label above value, because several battery values
   are phrases ("depends on paired inverter") rather than numbers, and a
   right-aligned phrase reads as a mistake. */
.bprofile__specs { display: grid; gap: 0; align-self: start; }
.bprofile__specs > div { padding: .55rem 0; border-bottom: 1px solid var(--line); }
.bprofile__specs > div:first-child { border-top: 1px solid var(--line-strong); }
.bprofile__specs dt {
  font-family: var(--font-num);
  font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .15rem;
}
.bprofile__specs dd { font-size: .875rem; line-height: 1.5; font-weight: 600; color: var(--ink); }

@media (min-width: 900px) {
  .bprofile { grid-template-columns: minmax(15rem, .34fr) minmax(0, 1fr); }
  .bprofile__copy { order: 2; }
  .bprofile__specs { order: 1; }
}

/* --------------------------------------------------------------------------
   Brand profiles — one card per brand
   The spec list used to run down a narrow left column, far taller than the
   copy beside it, which left a hole under every description. Now the copy
   runs the card's full width and the specifications sit beneath it as a
   compact grid, so each card is exactly as tall as its content.
   -------------------------------------------------------------------------- */
.bprofiles { gap: clamp(1rem, 1.6vw, 1.5rem); border-top: 0; }
.bprofile {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.1rem, 1.8vw, 1.5rem);
  padding: clamp(1.35rem, 2.4vw, 2.1rem);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: #fff;
  box-shadow: 0 1px 2px rgba(7, 42, 76, .04), 0 18px 36px -28px rgba(7, 42, 76, .35);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease-out);
}
.bprofile:hover { border-color: rgba(253, 104, 0, .3); box-shadow: 0 1px 2px rgba(7, 42, 76, .04), 0 24px 44px -26px rgba(253, 104, 0, .35); transform: translateY(-2px); }
.bprofile:has(.chip) { background: radial-gradient(26rem 14rem at 100% 0%, rgba(255, 196, 0, .12), transparent 70%), #fff; }
.bprofile__copy, .bprofile__specs { order: 0; }
.bprofile__head { margin-bottom: .85rem; align-items: center; }
.bprofile h3 { font-size: var(--step-3); }
.bprofile p { max-width: none; }
@media (min-width: 1100px) {
  /* Two balanced columns of copy when a brand has a longer write-up. */
  .bprofile__copy { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
  .bprofile__copy .bprofile__head { column-span: all; }
  .bprofile__best { margin-top: 0; break-inside: avoid; }
  .bprofile__copy p { break-inside: avoid; }
}
.bprofile__best {
  margin-top: 1rem; padding: .7rem 1rem; border-radius: var(--r-sm);
  background: #f4f8fd; border: 1px solid #e3ecf6;
}
.bprofile__specs {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1rem, 2vw, 2rem);
  padding-top: clamp(1rem, 1.6vw, 1.35rem); border-top: 1px solid var(--line);
}
@media (min-width: 760px) { .bprofile__specs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bprofile__specs > div, .bprofile__specs > div:first-child { padding: .5rem 0; border: 0; }
.bprofile__specs dd { font-size: .92rem; }
@media (prefers-reduced-motion: reduce) { .bprofile:hover { transform: none; } }