@charset "utf-8";
/* ==========================================================================
   SunRight Solar — Solar Panel Systems hub (/solar-panels/)

   Inherits the homepage design system wholesale: same tokens, same section
   head, same hairline-with-gradient-leader signature, same card and hover
   language. Its own identity comes from structure rather than decoration —
   this is a reference page, so it is built as a document with a numbered
   spine, where the homepage was built as a sequence of pitches.

     Page head    breadcrumb, compact head, then a full-bleed aerial banner
     Components   numbered spine, four ruled entries beside a diagram
     How it works vertical numbered rail (homepage runs its process across)
     Sizing       three spec cards carrying panel count, roof area, output
     Brands       three ruled columns with gradient indices
     N vs P       two-column comparison beside the cell diagram
     Battery      copy left, flow diagram right
     Rebates      inset tinted panel
     Process      five-step rail beside the installation photograph
     FAQ          shared accordion
   ========================================================================== */

/* --------------------------------------------------------------------------
   Numbered spine — the page's structural signature
   -------------------------------------------------------------------------- */
.spine { display: grid; gap: 0; margin-top: clamp(2.5rem, 4vw, 3.5rem); }

/* Base (narrow): index in its own track, heading and body stacked beside it. */
.spine__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1rem, 2.2vw, 2rem);
  padding: clamp(1.6rem, 2.4vw, 2.1rem) 0;
  border-top: 1px solid var(--line);
}
.spine__item:last-child { border-bottom: 1px solid var(--line); }
.spine__index {
  grid-row: 1 / span 4;
  font-family: var(--font-num);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--sun-600);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .spine__index {
    background: var(--grad-cta);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.spine__item h3 { grid-column: 2; margin-bottom: .8rem; }
.spine__item > p,
.spine__item > .link-arrow,
.spine__body { grid-column: 2; }
.spine__body > * + * { margin-top: 1rem; }
.spine__item > .link-arrow { margin-top: 1.1rem; }

@media (max-width: 560px) {
  .spine__item { grid-template-columns: minmax(0, 1fr); }
  .spine__index { grid-row: auto; margin-bottom: .5rem; }
  .spine__item h3,
  .spine__item > p,
  .spine__item > .link-arrow,
  .spine__body { grid-column: 1; }
}

/* Desktop: three tracks — index, heading, body — so an entry sits on the same
   spine as the section head above it and the body fills the measure instead
   of leaving the right half of the page empty.
   This block must stay LAST. The base rules above share its specificity, so
   if they follow it they win the cascade and drop the body back into the
   heading's column, overlapping the two. */
@media (min-width: 940px) {
  .spine__item {
    grid-template-columns: auto minmax(0, .72fr) minmax(0, 1.15fr);
    column-gap: clamp(1.5rem, 3vw, 3.25rem);
    align-items: start;
  }
  .spine__item h3 { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  .spine__body { grid-column: 3; grid-row: 1 / span 3; }
  .spine__body p { max-width: none; }
  .spine__item > .link-arrow { grid-column: 3; grid-row: 4; margin-top: 1.25rem; }
}

/* Inverter types read as definitions, so they are set as one */
.deflist { display: grid; gap: 1.1rem; margin-top: 1.25rem; }
.deflist > div {
  padding-left: 1.1rem;
  border-left: 2px solid var(--line);
  transition: border-color .3s var(--ease);
}
.deflist > div:hover { border-left-color: var(--sun-600); }
.deflist dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--ink);
  margin-bottom: .25rem;
}
.deflist dd { font-size: var(--step-0); line-height: 1.75; max-width: 40rem; }

/* --------------------------------------------------------------------------
   How a system works — vertical rail
   -------------------------------------------------------------------------- */
.flow { position: relative; margin-top: clamp(2.5rem, 4vw, 3.5rem); display: grid; gap: 0; }
.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1.1rem, 2.2vw, 1.9rem);
  padding: 0 0 clamp(1.75rem, 2.6vw, 2.4rem);
}
.flow__step:last-child { padding-bottom: 0; }
/* The rail connects the markers and stops at the last one */
.flow__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(1.4rem - 1px);
  top: 2.9rem; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--line-strong), var(--line));
}
.flow__marker {
  display: grid;
  place-items: center;
  width: 2.8rem; height: 2.8rem;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--line-strong);
  font-family: var(--font-num);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--navy-800);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.flow__step:hover .flow__marker { background: var(--grad-cta); border-color: transparent; color: var(--navy-950); }
.flow__step p { padding-top: .5rem; max-width: 44rem; }
/* Base (narrow): both text parts stack inside the second track. Without this
   the explanation claims the `auto` track and squeezes the lead sentence to a
   sliver, which renders it one character per line. */
.flow__lead,
.flow__rest { grid-column: 2; margin: 0; padding-top: .5rem; }
.flow__rest { padding-top: .4rem; }
.flow__lead { font-family: var(--font-display); font-weight: 700; color: var(--ink); }

@media (min-width: 940px) {
  /* The lead sentence gets its own track so the rail reads like a reference
     table and the explanation occupies the full remaining measure. */
  .flow__step { grid-template-columns: auto minmax(0, .62fr) minmax(0, 1.25fr); column-gap: clamp(1.5rem, 3vw, 3rem); }
  .flow__step p { max-width: none; }
  .flow__step .flow__lead { grid-column: 2; }
  .flow__step .flow__rest { grid-column: 3; padding-top: .5rem; }
}
.flow__step strong { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.flow__note { margin-top: clamp(1.75rem, 2.5vw, 2.25rem); }
.flow__note p { max-width: 44rem; }
.flow__note .link-arrow { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   Sizing — three spec cards
   -------------------------------------------------------------------------- */
.sizes {
  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(17.5rem, 100%), 1fr));
}
.size-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.4vw, 2.1rem);
  background: linear-gradient(170deg, #fff 62%, var(--sky-50));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.size-panel::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);
}
.size-panel:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(7,42,76,.05), 0 32px 58px -26px rgba(7,42,76,.3);
}
.size-panel:hover::before { transform: scaleX(1); }
.size-panel__value {
  font-family: var(--font-num);
  font-size: clamp(2.25rem, 3.2vw, 2.875rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.size-panel__value em {
  font-style: normal; font-size: .34em; font-weight: 600;
  color: var(--sun-600); margin-left: .16em; vertical-align: .34em;
}
.size-panel h3 { margin: 1rem 0 .85rem; font-size: var(--step-1); }
.size-panel p { font-size: var(--step-0); line-height: 1.75; }
.size-panel p + p { margin-top: .85rem; }

/* Specs read as data, so they are set as a table-like list */
.spec-list {
  display: grid;
  gap: 0;
  margin: 1.35rem 0 1.5rem;
  border-top: 1px solid var(--line);
}
.spec-list > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
}
.spec-list dt { font-size: .875rem; color: var(--muted); }
.spec-list dd {
  font-family: var(--font-num);
  font-size: .9375rem; font-weight: 700;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.size-panel .link-arrow { margin-top: auto; }

.sizes__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);
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 900px) { .sizes__note { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2.5rem; } }
.sizes__note p { margin: 0; max-width: 44rem; }
.sizes__note strong { font-family: var(--font-display); font-weight: 700; color: var(--ink); }

/* --------------------------------------------------------------------------
   Brands — three ruled columns
   -------------------------------------------------------------------------- */
.brands {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: grid;
  gap: clamp(1.75rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(16.5rem, 100%), 1fr));
}
.brand-item { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.brand-item__index {
  display: block;
  margin-bottom: .5rem;
  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) {
  .brand-item__index {
    background: var(--grad-cta);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.brand-item h3 { margin-bottom: .7rem; font-size: var(--step-1); }
.brand-item p { font-size: var(--step-0); line-height: 1.75; }
.brands__foot { margin-top: clamp(2rem, 3vw, 2.5rem); }
.brands__foot p { max-width: 46rem; }
.brands__foot .link-arrow { margin-top: 1.1rem; }

/* --------------------------------------------------------------------------
   Battery + rebates
   -------------------------------------------------------------------------- */
.battery-split { margin-top: clamp(2.5rem, 4vw, 3.5rem); }

/* --------------------------------------------------------------------------
   Install process
   -------------------------------------------------------------------------- */
.install-split { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
@media (min-width: 940px) {
  .install-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
  .install-split .split__media { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}

.install__cta { margin-top: clamp(2rem, 3vw, 2.5rem); }

/* Short leads on this page leave the aside column light, so the heading is
   given a longer measure to avoid three-line wraps beside one line of copy. */
.page-solar-panels .section-head h2 { max-width: 19ch; }

/* In a split's copy column (the install steps beside the photo mosaic) there
   is no room for the three-column step row: the title sits above its text. */
.split__copy .flow__step { grid-template-columns: auto minmax(0, 1fr); }
.split__copy .flow__step .flow__lead,
.split__copy .flow__step .flow__rest { grid-column: 2; }