@charset "utf-8";
/* ==========================================================================
   SunRight Solar — system size pages
   /solar-panels/6-6kw-solar-system/
   /solar-panels/10kw-solar-system/
   /solar-panels/13kw-solar-system/

   One architecture, three sets of numbers. The three pages are siblings, not
   copies: every figure on every page comes from that page's own approved
   specification, and nothing is shared between them except the shape.

   The size is the hero. The h1 sets the capacity as a numeral at display
   scale, and a ruled band directly beneath it carries that page's own column
   of the approved comparison table — household size, daily usage, annual
   generation, roof space. The same four labels appear on all three pages, so
   a visitor moving between them reads the same instrument with a different
   needle.

     Page head    breadcrumb, numeral h1, approved lead, banner
     Scale band   this page's own column of the approved comparison
     Load list    ruled term/body entries — the loads or the fit criteria
     Fit pair     "works well if you" against "may not be enough if you"
     Pairing      panel array against inverter, the oversizing figure
     Table        all three sizes, this page's column marked
     FAQ          shared accordion
     Bottom CTA   shared closer, reusing cta-golden-hour

   Cascade note: every @media block in this file sits AFTER the base rules it
   overrides. Base rules and breakpoint rules here share their specificity, so
   source order is the only thing deciding the winner — moving a breakpoint
   block up silently drops the base rule back on top and overlaps the text.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page head — the capacity as a numeral
   -------------------------------------------------------------------------- */
/* The h1 is the approved wording, unchanged, set in two parts so the capacity
   can carry display scale while the noun phrase stays at heading size. */
.page-size .page-head h1 { max-width: none; }

.size-h1__value {
  display: block;
  font-family: var(--font-num);
  font-size: clamp(3.5rem, 4.5vw + 2.6rem, 7rem);
  font-weight: 700;
  line-height: .88;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.size-h1__value em {
  font-style: normal;
  font-size: .3em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sun-600);
  margin-left: .1em;
  vertical-align: .5em;
}
.size-h1__rest {
  display: block;
  margin-top: .35rem;
  font-size: var(--step-5);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   2. Scale band — this page's own column of the approved comparison
   -------------------------------------------------------------------------- */
.scaleband {
  margin-top: clamp(2rem, 3.5vw, 3rem);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.scaleband > div {
  min-width: 0;                       /* long values must wrap, not push */
  padding: clamp(1.1rem, 1.8vw, 1.5rem) 0;
  border-bottom: 1px solid var(--line);
}
.scaleband dt {
  font-family: var(--font-sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.scaleband dd {
  margin: .6rem 0 0;
  font-family: var(--font-num);
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  overflow-wrap: break-word;
}
/* The parenthetical half of an approved value — "(23 to 25 panels)" — is set
   quieter so the column still scans as a column of numbers. It is never
   dropped: it is part of the approved figure. */
.scaleband__qual {
  display: block;
  margin-top: .3rem;
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}
.scaleband__note {
  margin-top: clamp(1rem, 1.6vw, 1.35rem);
  /* 52rem at 13px is ~127 characters; 34rem lands near 80. */
  max-width: 34rem;
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   3. Load list — ruled term/body entries
   The repeated body component on all three pages. On the 10kW and 13kW pages
   it carries the loads a system is sized to run; on the 6.6kW page it carries
   the generation factors. Same rule, same rhythm, different rows.
   -------------------------------------------------------------------------- */
.loadlist {
  margin-top: clamp(2.25rem, 3.5vw, 3rem);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.load {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .45rem 0;
  padding: clamp(1.1rem, 1.8vw, 1.5rem) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .3s var(--ease-out), background-color .3s var(--ease);
}
.load:hover { padding-left: .7rem; background: var(--sky-25); }
.load__term {
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink);
}
.load__body { min-width: 0; }
/* A measure: this ran to 95 characters a line at 1440px and wider. */
.load__body p { font-size: var(--step-0); line-height: 1.75; margin: 0; max-width: 40rem; }
.load__body p + p { margin-top: .85rem; }

/* Two tracks once there is room: the label reads down the left like an index,
   the explanation fills the measure. */
@media (min-width: 820px) {
  .load {
    grid-template-columns: minmax(0, .38fr) minmax(0, 1fr);
    column-gap: clamp(1.75rem, 3.5vw, 3.25rem);
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   4. Fit pair — the two approved qualification lists, side by side
   Built on the shared .compare__pair / .compare__card from main.css §11c, so
   the two lists inherit the site's comparison treatment rather than inventing
   a second one.
   -------------------------------------------------------------------------- */
.fitcard__lead {
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--ink);
}
.fitlist { display: grid; gap: .85rem; }
.fitlist li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--body);
  max-width: 44rem;
}
/* A short rule, not a decorative icon — the design language carries none. */
.fitlist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .85em;
  width: .7rem;
  height: 2px;
  background: var(--line-strong);
}
.compare__card--current .fitlist li::before { background: var(--sun-600); }

/* --------------------------------------------------------------------------
   5. Pairing figure — panel array against inverter
   Each page states its own pair. Only the 6.6kW page states a ratio, so the
   third cell is optional rather than filled with a number nobody approved.
   -------------------------------------------------------------------------- */
.pairing {
  margin-top: clamp(2.25rem, 3.5vw, 3rem);
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.4rem);
  grid-template-columns: minmax(0, 1fr);
}
.pairing__cell {
  position: relative;
  min-width: 0;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(170deg, #fff 62%, var(--sky-50));
  overflow: hidden;
}
.pairing__cell::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-cta);
}
.pairing__cell--quiet { background: #fff; }
.pairing__cell--quiet::before { background: var(--line-strong); }
.pairing__label {
  display: block;
  font-family: var(--font-sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.pairing__value {
  display: block;
  margin-top: .65rem;
  font-family: var(--font-num);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   6. Comparison table
   The region, the base table and the legend come from main.css §11e. This
   page widens the table (nine columns of prose, not six of figures), sets a
   readable rather than an uppercase header because the headers are links,
   and tints the column the page is about.
   -------------------------------------------------------------------------- */
.ctable { min-width: 52rem; }
.ctable thead th {
  font-size: .8125rem;
  letter-spacing: -0.01em;
  text-transform: none;
}
.ctable tbody th { font-size: .9375rem; line-height: 1.45; white-space: normal; min-width: 11rem; }
.ctable td { line-height: 1.55; }
.ctable td a { color: var(--navy-700); }
.ctable thead th a { color: var(--navy-700); text-decoration: none; border-bottom: 1px solid var(--navy-300); }
.ctable thead th a:hover { color: var(--navy-900); border-bottom-color: currentColor; }
.ctable tbody th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--ink);
  min-width: 11rem;
}
.ctable td { font-size: .9375rem; line-height: 1.55; color: var(--body); }
.ctable td a { color: var(--navy-700); }
.ctable tbody tr:last-child th,
.ctable tbody tr:last-child td { border-bottom: 0; }
.ctable tbody tr { transition: background-color .25s var(--ease); }
.ctable tbody tr:hover { background: var(--sky-25); }

/* The column this page is about. Marked by tint, by a gradient rule at the
   head, and by text in the header cell — never by colour alone. */
.ctable .is-current { background: linear-gradient(180deg, #fff8f0, #fffdf9); }
.ctable thead .is-current {
  position: relative;
  background: linear-gradient(180deg, #fff1e2, #fff8f0);
  color: var(--ink);
}
.ctable thead .is-current::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-cta);
}
.ctable tbody tr:hover .is-current { background: #fff4e8; }
.ctable__here {
  display: block;
  margin-top: .2rem;
  font-family: var(--font-sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-700);
}

.table-hint { margin-top: .85rem; font-size: .8125rem; color: var(--muted); }
@media (min-width: 900px) { .table-hint { display: none; } }

/* --------------------------------------------------------------------------
   7. Small shared pieces
   -------------------------------------------------------------------------- */
/* The approved copy asks several sub-questions in bold inside a section
   ("What battery size suits a 6.6kW system?"). They are not in the approved
   heading structure, so they are set as emphasised leads rather than promoted
   to h3 — the outline stays exactly as specified. */
.q-lead {
  margin-top: clamp(1.75rem, 2.6vw, 2.25rem);
  margin-bottom: 1.1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--ink);
}

/* A run of onward links, as the approved copy sets them out */
.linkset {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin-top: clamp(1.6rem, 2.4vw, 2.1rem);
}

.size-body { margin-top: clamp(2.25rem, 3.5vw, 3rem); }
.size-body p { max-width: 46rem; }
.size-body > * + * { margin-top: 1.15rem; }
.size-body .linkset,
.size-body .btn-row { margin-top: clamp(1.6rem, 2.4vw, 2.1rem); }

.size-cta { margin-top: clamp(2rem, 3vw, 2.6rem); }

/* Headings on these pages run longer than the 16ch default measure, which
   otherwise breaks "How Much Electricity Does a 6.6kW System Produce?" across
   five ragged lines beside a single line of lead copy. */
.page-size .section-head h2 { max-width: 21ch; }
.page-size .faq__aside h2 { max-width: 12ch; }

/* Media proportions per slot, so a placeholder and the real photograph that
   replaces it occupy exactly the same box. */

.size-media { margin-top: clamp(2.25rem, 3.5vw, 3rem); }

.size-split { margin-top: clamp(2.25rem, 3.5vw, 3rem); align-items: start; }

/* --------------------------------------------------------------------------
   8. Breakpoints
   Everything below overrides the base rules above and must stay last.
   Item counts here are known and fixed, so the columns are set explicitly:
   auto-fit would open an empty fourth track at 1440px and leave a hole.
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {
  /* Four scale figures — two up, then four up. Both divide the count exactly,
     so the band never ends on a half-empty row. */
  .scaleband { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 2.5rem); }
  .pairing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  /* Three pairing cells only where all three exist; the two-cell pages keep
     the pair. Set by a modifier rather than auto-fit for the same reason. */
  .pairing--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1060px) {
  .scaleband { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scaleband > div + div { padding-left: clamp(1.5rem, 2.4vw, 2.25rem); border-left: 1px solid var(--line); }
}

@media (min-width: 940px) {
  .size-split { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
  .size-split--wide-media { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
}

/* The numeral is the loudest thing on the page, so it is pulled back on the
   narrowest phones where it would otherwise crowd the lead paragraph. */
@media (max-width: 380px) {
  .size-h1__value { font-size: 3.25rem; }
  .size-h1__rest { font-size: var(--step-4); }
}