@charset "utf-8";
/* ==========================================================================
   SunRight Solar — the two pricing guides
   /solar-system-cost/ and /solar-battery-price/

   These two pages are a pair, and they are deliberately not shaped like the
   buying guides. A buying guide compares products; a pricing guide explains a
   number. So the furniture here is the furniture of a costing document:

     .ledger     a ruled two-column schedule — line item left, what it covers
                 right. Every "five factors", "what is included", "why quotes
                 vary" and "what to expect" block on both pages runs through it,
                 which is what makes the two pages read as one set.
     .ptable     the price table. A real <table>, because the reader is
                 comparing several line items across the same questions.
     .payband    the signature. A payback period drawn to scale on a year axis.
     .checklist  the numbered "how to compare quotes" list.
     .worked     a worked saving, held together with its conditions.
     .fig        a stated money figure, set in the tabular numeral face.

   WHAT IS DELIBERATELY ABSENT
   There is no cumulative-savings curve and no price band in dollars, because
   the approved copy publishes almost no dollar figures — that is the whole
   argument of both pages. The payback band therefore plots only the two
   figures each page does state (a payback range, and a system-life horizon)
   and says as much in its own caption. Nothing on either page is drawn from a
   number that was inferred, averaged or interpolated.

   Both pages load only this file and main.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   .ptable — the price table

   Prose in the cells, not numerals, because what this guide publishes about
   most line items is a sentence rather than a figure. The cost column is set
   apart so the eye can find it, and a stated money range inside it is lifted
   into the numeral face by .fig without touching the words around it.
   Column widths are declared as percentages of the table's own min-width, so
   the three columns keep their proportions inside the scroll region at every
   viewport instead of collapsing onto the longest sentence.
   -------------------------------------------------------------------------- */
.ptable {
  width: 100%;
  min-width: 47rem;
  border-collapse: collapse;
  table-layout: fixed;
}
.ptable caption {
  caption-side: top;
  text-align: left;
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.1rem, 2vw, 1.5rem) 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--muted);
}
.ptable th, .ptable td {
  padding: clamp(.9rem, 1.5vw, 1.15rem) clamp(.9rem, 1.4vw, 1.25rem);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.ptable thead th {
  background: var(--sky-50);
  font-family: var(--font-num);
  font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy-800);
  border-bottom: 1px solid var(--line-strong);
}
.ptable th:first-child  { width: 24%; }
.ptable th:nth-child(2) { width: 40%; }
.ptable th:nth-child(3) { width: 36%; }
.ptable tbody th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1.34;
  color: var(--ink);
}
/* A capacity is a number, so it is set as one. */
.ptable tbody th.ptable__kwh {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.ptable td { font-size: .9375rem; line-height: 1.6; color: var(--body); }
/* The cost column carries a left rule so it reads as the answer column even
   when the sentence in it contains no money at all. */
.ptable td.ptable__cost {
  color: var(--ink);
  box-shadow: inset 1px 0 0 var(--line);
}
.ptable tbody tr:last-child th, .ptable tbody tr:last-child td { border-bottom: 0; }
.ptable tbody tr { transition: background-color .25s var(--ease); }
.ptable tbody tr:hover { background: var(--sky-25); }

/* A money figure the approved copy states. Set in the numeral face so it can
   be found in a paragraph, never restyled into a headline of its own. */
.fig {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   .ledger — the ruled schedule

   Two columns: the line item, and what it covers. Used as a <dl> where the
   approved copy runs a bold label into a sentence, and as a set of <article>s
   where the approved copy sets the label as a heading. The classes carry the
   layout so the element choice can follow the semantics of each section.
   -------------------------------------------------------------------------- */
.ledger {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 2px solid var(--line-strong);
}
.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .55rem 0;
  padding: clamp(1.35rem, 2.2vw, 1.9rem) 0;
  border-bottom: 1px solid var(--line);
  transition: background-color .25s var(--ease);
}
.ledger__label {
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
}
.ledger__index {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--font-num);
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em;
  color: var(--sun-600);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .ledger__index { background: var(--grad-cta); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.ledger__label h3 { font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.ledger__body { min-width: 0; }
.ledger__body p { font-size: var(--step-0); line-height: 1.75; max-width: 46rem; }
.ledger__body p + p { margin-top: 1rem; }
.ledger__body .sizelinks { margin-top: 1.25rem; }
.ledger__links { display: flex; flex-wrap: wrap; gap: .9rem 2rem; margin-top: 1.25rem; }

/* Closing paragraphs and actions that sit under a ledger or a table. */
.ledger__close { margin-top: clamp(1.75rem, 2.6vw, 2.25rem); }
.ledger__actions { margin-top: clamp(1.75rem, 2.6vw, 2.25rem); gap: 1.25rem 2rem; }

/* --------------------------------------------------------------------------
   .options — the two inverter paths, stacked inside a ledger body
   -------------------------------------------------------------------------- */
.options { display: grid; gap: .85rem; margin: 1.35rem 0; }
.option {
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy-600);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: var(--sky-25);
}
.option__tag {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--font-num);
  font-size: .6875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--navy-700);
}
.option p { font-size: var(--step--1); line-height: 1.7; max-width: 42rem; }

/* --------------------------------------------------------------------------
   .payband — the signature

   A payback range drawn to scale on a year axis. --a and --b are percentages
   written into the markup from the two approved figures on each page; nothing
   else is plotted. Colour is never the only signal: the key names both
   regions in words, the band is warm against a cool remainder, and the whole
   scale carries a role="img" description for anyone who cannot see it.
   -------------------------------------------------------------------------- */
.payband {
  margin: clamp(2.5rem, 4vw, 3.5rem) 0 0;
  padding: clamp(1.35rem, 2.4vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
.payband__scale { min-width: 0; }
.payband__track {
  position: relative;
  height: 2.25rem;
  border-radius: var(--r-pill);
  background: var(--grey-100);
  overflow: hidden;
}
.payband__band {
  position: absolute; top: 0; bottom: 0;
  left: var(--a); right: calc(100% - var(--b));
  background: var(--grad-cta);
}
/* Everything past the payback point. Tinted rather than empty, so the reader
   can see that the band is a beginning and not an end. */
.payband__after {
  position: absolute; top: 0; bottom: 0;
  left: var(--b); right: 0;
  background: repeating-linear-gradient(
    -45deg,
    var(--sky-100) 0 6px,
    var(--sky-50) 6px 12px
  );
}
.payband__axis {
  position: relative;
  height: 1.9rem;
  margin-top: .45rem;
  border-top: 1px solid var(--line-strong);
}
.payband__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;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.payband__tick::before {
  content: "";
  position: absolute; top: -1px; left: 50%;
  width: 1px; height: .3rem;
  background: var(--line-strong);
}
.payband__key {
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
  margin: .35rem 0 0;
  font-size: .8125rem;
  color: var(--body);
}
.payband__key span { display: inline-flex; align-items: center; gap: .55rem; }
.payband__key span::before {
  content: "";
  flex: none;
  width: 1.4rem; height: .55rem;
  border-radius: var(--r-pill);
  background: var(--grad-cta);
}
.payband__key-after::before {
  background: repeating-linear-gradient(
    -45deg,
    var(--sky-200) 0 4px,
    var(--sky-50) 4px 8px
  );
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.payband__cap {
  margin: 1.1rem 0 0;
  font-size: .8125rem; line-height: 1.65;
  color: var(--muted);
  max-width: 52rem;
}

/* --------------------------------------------------------------------------
   .checklist — "how to compare quotes"

   The approved copy numbers these items. The numeral is drawn by a counter
   rather than typed, so the sequence cannot drift from the source; it carries
   a leading zero to match the ledger's index.
   -------------------------------------------------------------------------- */
.checklist {
  counter-reset: check;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.checklist__item {
  counter-increment: check;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.25rem, 2vw, 1.6rem) 0;
  border-bottom: 1px solid var(--line);
}
.checklist__item::before {
  content: counter(check, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--font-num);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: 700; line-height: 1.15; letter-spacing: -0.03em;
  color: var(--navy-300);
}
/* Not a heading. The approved copy sets these as bold run-in labels inside a
   numbered list, and the approved heading structure does not list them, so
   they must not enter the document outline as h3s. */
.checklist__label {
  display: block;
  grid-column: 2;
  margin: 0 0 .4rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.checklist__item p {
  /* Sets at --step--1; 44rem ran past 95 characters */
  grid-column: 2;
  font-size: var(--step--1);
  line-height: 1.7;
  max-width: 34rem;
}

/* --------------------------------------------------------------------------
   .tiers — the six capacity blocks under the price table
   -------------------------------------------------------------------------- */
.tiers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.tier {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-top: 1.15rem;
  border-top: 2px solid var(--line-strong);
}
.tier__head {
  margin-bottom: .7rem;
  font-family: var(--font-num);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.tier__body p { font-size: var(--step--1); line-height: 1.7; }
.tier__body .link-arrow { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   .worked — a worked saving, with its conditions attached

   The figures in this block only hold at the tariffs named in the line above
   them, so the condition and the result are one object. The condition is set
   at the same size as the result and cannot be styled down into a footnote.
   -------------------------------------------------------------------------- */
.worked {
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(170deg, #fff 55%, #fff7ee);
}
.worked p { font-size: var(--step--1); line-height: 1.7; max-width: 44rem; }
.worked__if { position: relative; padding-left: 1.1rem; color: var(--body); }
.worked__if::before {
  content: "";
  position: absolute; left: 0; top: .35em; bottom: .35em;
  width: 3px; border-radius: 3px;
  background: var(--navy-300);
}
.worked__then { margin-top: .9rem; padding-left: 1.1rem; position: relative; color: var(--ink); }
.worked__then::before {
  content: "";
  position: absolute; left: 0; top: .35em; bottom: .35em;
  width: 3px; border-radius: 3px;
  background: var(--grad-cta);
}

/* ==========================================================================
   Breakpoints

   Everything below overrides a base rule of equal specificity, so it MUST
   stay after the base rules — source order is the only thing deciding the
   winner. Do not move a media block above the section it modifies.
   ========================================================================== */

/* The scroll hint is only true while the table can actually scroll. */
@media (min-width: 860px) {
  .table-hint { display: none; }
}

/* Ledger: label beside the body once there is room for two columns. */
@media (min-width: 860px) {
  .ledger__row {
    grid-template-columns: minmax(0, .34fr) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 3.25rem);
    align-items: start;
  }
  .ledger__row:hover { background: var(--sky-25); }
}

/* Two options side by side once the ledger body is wide enough to hold them
   without either card dropping to a two-word line. */
@media (min-width: 1180px) {
  .options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The payback band gets a taller track and a roomier axis on wide screens,
   where the scale is long enough for the tick labels to breathe. */
@media (min-width: 760px) {
  .payband__track { height: 2.75rem; }
  .payband__tick { font-size: .75rem; }
}

/* Checklist: two columns. A last item that starts a row on its own would
   leave a hole beside it, so it takes the full width instead. Six items pair
   up exactly; seven do not, and the seventh closes the list across the row. */
@media (min-width: 860px) {
  .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); }
  .checklist__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* The odd last item spans both columns; its measure still has to be a
     measure. 52rem at --step--1 ran to 95 characters a line. */
  .checklist__item:last-child:nth-child(odd) p { max-width: 40rem; }
}

/* Capacity tiers: six items, so two then three columns divide evenly and no
   row is ever left with a hole. The counts are fixed, so the columns are set
   explicitly rather than left to auto-fit, which opens empty tracks. */
@media (min-width: 720px) {
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Very narrow screens: the ledger index and its heading share a line so the
   label block does not consume three lines before the copy starts. */
@media (max-width: 380px) {
  .ledger--numbered .ledger__label { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
  .ledger__index { margin-bottom: 0; }
  .checklist__item { column-gap: .85rem; }
  .payband { padding-inline: 1rem; }
}