@charset "utf-8";
/* ==========================================================================
   SunRight Solar — battery capacity pages
   /batteries/5kwh-solar-battery/ … /batteries/42kwh-solar-battery/

   One architecture across six pages, differentiated by scale rather than by
   decoration. The capacity itself is the hero: a display numeral, the
   household profile that capacity's own approved copy describes, and a spine
   that plots the six capacities SunRight Solar installs on a 0–42kWh axis so the
   reader can see where they are standing in the range.

   Relationship to /batteries/ (batteries.css): the hub owns the *ladder* —
   six horizontal rows of prose, read top to bottom, one after another. These
   pages own the *spine* — a single axis with the six capacities placed
   proportionally along it and one of them enlarged. The hub answers "what are
   the options"; a capacity page answers "where does this one sit". They share
   the same brand vocabulary without repeating each other's component.

   BACKUP POWER — a hard boundary, and it shapes this file:

     1. The hero profile (.capprofile) deliberately carries NO backup row.
        Every other row of the approved comparison table is a property of the
        household or the hardware and can stand alone as a stat. Backup scope
        cannot: it is set by the inverter's continuous output, the switchboard
        configuration and simultaneous household load, and the approved copy
        says so at length. Lifting "Selected circuits, overnight" out of the
        table and setting it as a hero statistic would strip that qualification
        and publish an implied promise. The row therefore stays in the table,
        beside its footnote, and nowhere else.

     2. .captable__note is not decoration and must not be collapsed, truncated,
        put behind a disclosure, or moved away from the table. It is the
        approved qualification of the backup-scope row and the table is
        incomplete without it in full view.

     3. No component in this file has a "runtime", "hours" or "duration"
        affordance. There is nothing here to fill one in with.

   Sections
     1. Capacity band  the signature — numeral, measure, profile, spine
     2. Range spine    six capacities on a 0–42kWh axis
     3. Copy furniture ruled lists carrying approved run-on copy
     4. Comparison     the approved six-column table
     5. Onward         ruled row of onward links
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Capacity band — the signature component

   Driven entirely by each page's own approved column. Nothing here is
   authored: the numeral is the page's capacity, the profile rows are the
   approved table's row headers and this page's cells, verbatim.
   -------------------------------------------------------------------------- */
.capband__grid {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

/* The numeral tile. The capacity is set at display scale because it is the
   single fact the reader came for; everything else on the page qualifies it. */
.capfig {
  position: relative;
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.1rem, 2vw, 1.5rem);
  padding: clamp(1.5rem, 3.2vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(254, 209, 7, .14), transparent 58%),
    linear-gradient(160deg, #fff 45%, var(--sky-50));
  box-shadow: var(--shadow-md);
}
.capfig__value {
  display: flex;
  align-items: baseline;
  gap: .1em;
  font-family: var(--font-num);
  font-size: clamp(4.25rem, 15vw, 8.5rem);
  font-weight: 700;
  line-height: .82;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.capfig__unit {
  font-size: .26em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--orange-700);
}

/* Proportional measure of this capacity against the top of the range.
   aria-hidden: the spine below states every capacity in text, so this is a
   restatement of information the reader already has, not new information. */
.capfig__measure {
  display: block;
  height: 8px;
  border-radius: 8px;
  background: var(--grey-100);
  overflow: hidden;
}
.capfig__measure i {
  display: block;
  height: 100%;
  width: var(--fill, 20%);
  border-radius: inherit;
  background: var(--grad-cta);
}
/* The approved profile — one ruled row per approved table row. */
.capprofile {
  display: grid;
  min-width: 0;
  align-content: start;
  border-top: 1px solid var(--line);
}
.capprofile > div {
  display: grid;
  gap: .2rem 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(.8rem, 1.4vw, 1.05rem) 0;
  border-bottom: 1px solid var(--line);
}
.capprofile dt {
  min-width: 0;
  font-family: var(--font-sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.capprofile dd {
  min-width: 0;
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
}
.capprofile a { color: var(--navy-700); }

@media (min-width: 420px) {
  .capprofile > div {
    grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
    align-items: baseline;
  }
}
@media (min-width: 900px) {
  .capband__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
}

/* --------------------------------------------------------------------------
   2. Range spine — six capacities on a 0–42kWh axis

   Below 960px the six capacities run as a plain grid of tiles: 2 columns, then
   3. Both divide 6 exactly, so the last row is never ragged. At 960px and up
   the tiles are plotted proportionally along a real axis, which is where the
   component earns its keep — 5kWh and 42kWh look as far apart as they are.
   -------------------------------------------------------------------------- */
.caprange {
  margin-top: clamp(2rem, 3.5vw, 3rem);
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
  border-top: 1px solid var(--line);
}
.caprange__title {
  display: block;
  margin-bottom: clamp(1rem, 2vw, 1.35rem);
  font-family: var(--font-sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.caprange__list {
  position: relative;
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.caprange__item { min-width: 0; }
.caprange__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  min-height: 3.5rem;
  padding: .55rem .5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease-out);
}
a.caprange__node:hover {
  border-color: var(--line-strong);
  background: var(--sky-25);
  transform: translateY(-2px);
  color: var(--navy-900);
}
.caprange__num {
  font-family: var(--font-num);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.caprange__unit {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The page you are on. Never colour alone: the tile also carries a rule, a
   weight change and a visually-hidden "current capacity" announcement. */
.caprange__item.is-current .caprange__node {
  border-color: transparent;
  background: var(--navy-900);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.caprange__item.is-current .caprange__unit { color: var(--gold-300); }

/* The axis is drawn as two pseudo-elements on the list — a track and a fill —
   so the markup stays a plain <ol> of six links with nothing decorative in it
   for a screen reader to read out. It only exists once the tiles are plotted. */
.caprange__list::before,
.caprange__list::after { display: none; }

@media (min-width: 520px) {
  .caprange__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  /* Plotted, not evenly spaced: --pos is capacity ÷ 42. The clamp keeps the
     first and last tiles inside the track instead of hanging off the ends,
     which a bare translateX(-50%) would do at 0% and 100%. */
  .caprange__list {
    display: block;
    height: 5.5rem;
    grid-template-columns: none;
  }
  .caprange__list::before,
  .caprange__list::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 1.9rem;
    height: 6px;
    border-radius: 6px;
  }
  .caprange__list::before { right: 0; background: var(--grey-100); }
  .caprange__list::after { width: var(--fill, 20%); background: var(--grad-cta); }
  .caprange__item {
    position: absolute;
    top: 0;
    left: clamp(2.1rem, var(--pos, 50%), calc(100% - 2.1rem));
    transform: translateX(-50%);
    width: 4.2rem;
    /* The fill pseudo-element is the list's ::after, so it is painted after
       the items unless they are lifted out of auto stacking. */
    z-index: 1;
  }
  .caprange__node {
    min-height: 4.4rem;
    padding: .5rem .35rem;
    gap: .05rem;
  }
  .caprange__item.is-current { z-index: 2; }
  .caprange__item.is-current .caprange__num { font-size: 1.375rem; }
}

/* --------------------------------------------------------------------------
   3. Copy furniture

   The approved copy sets several of its sections as a single run-on paragraph
   of one-sentence conditions ("Have a one to two-person household… Live in an
   apartment…"). The sentences are reproduced word for word; only the
   punctuation-to-list-item mapping is presentational.
   -------------------------------------------------------------------------- */
.checklist__lead {
  margin: clamp(1.5rem, 2.4vw, 2rem) 0 0;
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--body);
}
.checklist {
  display: grid;
  gap: 0;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  max-width: 52rem;
}
.checklist li {
  position: relative;
  min-width: 0;
  padding: .85rem 0 .85rem 1.75rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-0);
  line-height: 1.65;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.55em;
  width: 11px;
  height: 2px;
  background: var(--grad-cta);
}

/* The eleven backup-capability factors on the 28kWh and 42kWh pages. Each is
   an approved paragraph opening on a bold term; the list only rules them. */
.factorlist {
  display: grid;
  gap: 0;
  margin: clamp(1.75rem, 2.6vw, 2.25rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
/* A measure. Without one this ran past 100 characters a line on a wide screen. */
.factorlist li {
  min-width: 0;
  max-width: 46rem;
  padding: clamp(.9rem, 1.5vw, 1.15rem) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--body);
}
.factorlist strong {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

/* Approved paragraphs that open on a bold lead-in. Ruled rather than boxed,
   so a five-paragraph run (the 14kWh backup section) still reads as prose. */
.keypoints {
  display: grid;
  gap: clamp(1.1rem, 2vw, 1.5rem);
  margin-top: clamp(1.75rem, 2.6vw, 2.25rem);
}
.keypoints > p {
  min-width: 0;
  margin: 0;
  padding-left: clamp(.9rem, 1.6vw, 1.25rem);
  border-left: 2px solid var(--line);
  font-size: var(--step-0);
  line-height: 1.75;
  max-width: 46rem;
  transition: border-color .3s var(--ease);
}
.keypoints > p:hover { border-left-color: var(--sun-600); }
.keypoints strong {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

/* Plain running copy inside a section body. */
.capcopy { margin-top: clamp(1.75rem, 2.6vw, 2.25rem); }
.capcopy p { max-width: 46rem; font-size: var(--step-0); line-height: 1.75; }
.capcopy p + p { margin-top: 1.15rem; }
.capcopy .link-arrow { margin-top: 1.35rem; }

/* The backup qualification, wherever it appears in running copy.

   Every one of the six pages carries an approved paragraph explaining that
   backup scope follows the inverter's continuous output, the switchboard
   configuration and simultaneous household load rather than the capacity. It
   gets the same unmissable treatment on all six so a reader skimming for
   "how long will it run" cannot skip past it. Reproduce it in full or not at
   all — there is no shortened form of this paragraph. */
.capguard {
  margin-top: clamp(1.5rem, 2.4vw, 2rem);
  padding: clamp(1.15rem, 2vw, 1.6rem) clamp(1.25rem, 2.2vw, 1.75rem);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sun-600);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: linear-gradient(120deg, #fff, var(--grey-50));
  max-width: 52rem;
}
.capguard p { margin: 0; font-size: var(--step-0); line-height: 1.75; color: var(--body); }
.capguard p + p { margin-top: 1.05rem; }
.capguard strong { font-family: var(--font-display); font-weight: 700; color: var(--ink); }

/* The tinted "should you size up?" closer that ends several sections. */
.capnote {
  display: grid;
  gap: 1.4rem;
  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);
}
.capnote p { margin: 0; max-width: 46rem; font-size: var(--step-0); line-height: 1.75; }
.capnote p + p { margin-top: 1.1rem; }

@media (min-width: 900px) {
  .capnote { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2.5rem; }
}

/* --------------------------------------------------------------------------
   4. Comparison table

   Seven columns of real tabular data. It is a real <table> with a <caption>
   and scope on every header, inside its own scroll region so a 320px viewport
   scrolls the table rather than the page. The row-header column is sticky so
   the reader never loses which row they are reading.
   -------------------------------------------------------------------------- */
.captable { margin-top: clamp(1.75rem, 2.6vw, 2.25rem); }
.captable__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
}
.captable__scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.captable table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.captable th,
.captable td {
  padding: .85rem 1rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
  border-bottom: 1px solid var(--line);
}
.captable tbody tr:last-child th,
.captable tbody tr:last-child td { border-bottom: 0; }
.captable thead th,
.captable thead td {
  background: var(--sky-50);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
/* Only the row-header column is stuck. `overflow-x: auto` promotes overflow-y
   to auto as well, so a sticky `top` here would anchor to a container that
   never scrolls vertically and simply do nothing — left is the axis that
   matters, and it keeps the row label beside its cells at 320px. */
.captable th[scope="row"],
.captable .captable__corner {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 11rem;
  background: var(--grey-50);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  border-right: 1px solid var(--line);
}
.captable .captable__corner { background: var(--sky-50); }
.captable__col {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-num);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
a.captable__col { border-bottom: 1px solid var(--navy-300); }
a.captable__col:hover { color: var(--navy-900); border-bottom-color: var(--navy-800); }
.captable td { color: var(--body); }
.captable td a { color: var(--navy-700); }

/* This page's own column. Weight, tint and the "This capacity" chip all say
   the same thing, so the colour is never carrying it alone. */
.captable .is-current { background: #fff8f1; }
.captable thead th.is-current { background: #ffeedd; }
.captable td.is-current { color: var(--ink); font-weight: 600; }

/* The asterisk that binds the backup row to its qualification. */
.captable__ref {
  /* A lone asterisk is a 7px target. Pad it out to the 24px minimum
     without moving the glyph. */
  display: inline-block;
  min-width: 24px;
  min-height: 24px;
  margin: -4px -8px -4px -4px;
  padding: 2px 4px;
  text-align: center;
  color: var(--orange-700);
  text-decoration: none;
  font-weight: 700;
}
.captable__ref:hover { text-decoration: underline; }

/* The approved backup-scope qualification. Reproduced in full, immediately
   under the table, at body size. Not a footnote in the typographic sense —
   it is the sentence that makes the backup row safe to publish. */
.captable__note {
  /* Measure only. The note itself must stay in full view — see the top of
     this file — so it is never truncated, only wrapped sooner. 34rem, not 46:
     this sets at 13px, where 46rem still runs to 113 characters a line. */
  max-width: 34rem;
  margin: clamp(1.1rem, 2vw, 1.5rem) 0 0;
  padding: clamp(1rem, 1.8vw, 1.35rem) clamp(1.1rem, 2vw, 1.5rem);
  border-left: 3px solid var(--sun-600);
  background: var(--grey-50);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--step--1);
  line-height: 1.72;
  color: var(--body);
}
.captable__close {
  margin-top: clamp(1.5rem, 2.4vw, 2rem);
  max-width: 46rem;
  font-size: var(--step-0);
  line-height: 1.75;
}

@media (min-width: 760px) {
  .captable table { font-size: var(--step--1); }
  .captable th,
  .captable td { padding: 1rem 1.15rem; }
}

/* --------------------------------------------------------------------------
   5. Onward links — the ruled row that closes the comparison section
   -------------------------------------------------------------------------- */
.onward {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 2.25rem;
  margin-top: clamp(1.75rem, 2.6vw, 2.25rem);
  padding-top: clamp(1.35rem, 2.2vw, 1.75rem);
  border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   PROMOTE: .captable / .captable__scroll / .captable__note / .capprofile
   The comparison table, its scroll region, its sticky row-header column and
   the ruled label/value profile are all generic. Six pages use them here and
   /solar-battery-price/ will want the same table. Lift them into main.css §11d
   (guide furniture) when this stylesheet is consolidated, and keep the
   .captable__note comment with them — the note's placement is a compliance
   requirement, not a style choice.

   PROMOTE: .checklist / .factorlist / .keypoints
   Three ways of ruling approved copy that arrives as run-on sentences or
   bold-led paragraphs. Nothing about them is capacity-specific.

   PROMOTE: .onward
   A ruled row of onward text links. Same job as .stocked__actions in main.css
   §11d; merge the two rather than shipping both.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Desktop layout — lists, the table's closing pair, the capacity rail

   Lists of short conditions and factors run as a two-column grid across the
   full width instead of one narrow column on the left. The table's backup
   note and closing paragraph sit side by side under it. See "Editorial grid"
   in main.css for the running copy.
   -------------------------------------------------------------------------- */
@media (min-width: 940px) {
  /* Same 1 : 1.1 split as .section-head, so the second column lines up
     exactly under the lead and the running copy. */
  .checklist,
  .factorlist {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--head-gap);
    max-width: none;
    border-top: 0;
  }
  .checklist li:nth-child(-n+2),
  .factorlist li:nth-child(-n+2) { border-top: 1px solid var(--line); }
  .factorlist li { max-width: none; }
  /* An odd last item takes the whole row rather than sitting beside a gap. */
  .checklist li:last-child:nth-child(odd),
  .factorlist li:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Only when the points span the section. Inside a split's copy column they
     stay one column: two there would be ~250px each. */
  .container > .keypoints {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 2.2vw, 1.75rem) var(--head-gap);
  }
  .container > .keypoints > p { max-width: none; }

  .captable {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--head-gap);
    align-items: start;
  }
  .captable > * { grid-column: 1 / -1; min-width: 0; }
  .captable > .captable__note { grid-column: 1; max-width: none; }
  .captable > .captable__note + .captable__close { grid-column: 2; max-width: none; margin-top: clamp(1.1rem, 2vw, 1.5rem); }
}

/* The six capacities, evenly spaced. They used to be plotted along a kWh
   scale, which bunched 5-14 together and left a wide empty run before 42.
   The fill still ends at the page's own capacity. */
@media (min-width: 960px) {
  .caprange__list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    height: auto;
    --step: calc(100% / 6);
    --at: 0;
  }
  .caprange__list:has(> :nth-child(2).is-current) { --at: 1; }
  .caprange__list:has(> :nth-child(3).is-current) { --at: 2; }
  .caprange__list:has(> :nth-child(4).is-current) { --at: 3; }
  .caprange__list:has(> :nth-child(5).is-current) { --at: 4; }
  .caprange__list:has(> :nth-child(6).is-current) { --at: 5; }
  .caprange__list::before { left: 0; right: 0; }
  .caprange__list::after  { left: 0; width: calc((var(--at) + .5) * var(--step)); }
  .caprange__item {
    position: relative;
    left: auto;
    transform: none;
    justify-self: center;
    width: 4.6rem;
  }
}

/* Comparison table between tablet and laptop widths: tighter cells so all six
   columns fit from 1024px (it overflowed by 26-93px there, clipping the 42kWh
   column). Below that it scrolls, and the edge shadows say so: a shadow sits
   on whichever side has more table to scroll to and clears at the end. The
   covers use background-attachment: local, so they travel with the content. */
@media (min-width: 760px) and (max-width: 1279px) {
  .captable th,
  .captable td { padding: .85rem .7rem; }
  .captable th[scope="row"],
  .captable .captable__corner { min-width: 9rem; }
}
.captable__scroll {
  background:
    linear-gradient(to right, #fff 40%, rgba(255, 255, 255, 0)) left center / 48px 100% no-repeat local,
    linear-gradient(to left, #fff 40%, rgba(255, 255, 255, 0)) right center / 48px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(7, 42, 76, .16), rgba(7, 42, 76, 0)) left center / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(7, 42, 76, .16), rgba(7, 42, 76, 0)) right center / 16px 100% no-repeat scroll,
    #fff;
}

/* Quiet hover on list items: the amber dash reaches out, the same gesture as
   the key-point rule turning amber. Pointer devices only. */