@charset "utf-8";
/* ==========================================================================
   SunRight Solar — Solar Inverters (/inverters/)

   Shares the system with the other hubs. Its own identity is the type block:
   each of the three inverter technologies is set as a full-width entry with
   the same labelled attribute rows, so they can be read down a column and
   compared like a spec sheet. Where the panel hub is a numbered document and
   the battery hub is a scale, this page is a comparison.

     Page head     shared .page-head + banner
     What it does  copy beside a ruled capability list
     Types         three full-width type blocks with labelled attribute rows
     Decision      three conditional cards over the flow diagram
     Phase         two-card comparison (shared .compare)
     Brands        six ruled entries carrying a warranty chip
     Sizing        pull-quote callout, no image
     Monitoring    brand-to-app ruled table beside the dashboard capture
     Lifespan      copy beside a ruled signs list
     FAQ           shared accordion
   ========================================================================== */

/* --------------------------------------------------------------------------
   Capability + signs lists — ruled, gradient tick rules
   -------------------------------------------------------------------------- */
.ruled-list { display: grid; gap: 0; margin: 1.25rem 0 0; border-top: 1px solid var(--line); }
.ruled-list li {
  position: relative;
  padding: .9rem 0 .9rem 1.6rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-0);
  line-height: 1.65;
}
.ruled-list li::before {
  content: "";
  position: absolute; left: 0; top: 1.6em;
  width: 10px; height: 2px;
  background: var(--grad-cta);
}

/* --------------------------------------------------------------------------
   Inverter type blocks — the page's signature
   -------------------------------------------------------------------------- */
.itypes { margin-top: clamp(2.5rem, 4vw, 3.5rem); display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); }

.itype {
  position: relative;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  background: linear-gradient(170deg, #fff 60%, 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);
}
.itype::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);
}
.itype:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(7, 42, 76, .05), 0 30px 56px -26px rgba(7, 42, 76, .3);
}
.itype:hover::before { transform: scaleX(1); }

.itype__head { display: grid; gap: .85rem 2rem; }
@media (min-width: 940px) {
  .itype__head { grid-template-columns: minmax(0, .72fr) minmax(0, 1.15fr); align-items: start; }
}
.itype__index {
  display: block;
  margin-bottom: .4rem;
  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) {
  .itype__index {
    background: var(--grad-cta);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.itype h3 { font-size: var(--step-3); }
.itype__intro { font-size: var(--step-0); line-height: 1.75; margin: 0; }

/* Attribute rows: label left, value right, so the three blocks can be read
   down a column and compared like a spec sheet. */
.itype__attrs {
  display: grid;
  gap: 0;
  margin-top: clamp(1.35rem, 2.2vw, 1.85rem);
  border-top: 1px solid var(--line);
}
.itype__attrs > div {
  display: grid;
  gap: .35rem 2rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .itype__attrs > div { grid-template-columns: minmax(9rem, .3fr) minmax(0, 1fr); align-items: baseline; }
}
.itype__attrs dt {
  font-family: var(--font-num);
  font-size: .6875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.itype__attrs dd { font-size: var(--step-0); line-height: 1.72; max-width: 46rem; }

/* --------------------------------------------------------------------------
   Decision guide — three conditional cards
   -------------------------------------------------------------------------- */
/* Exactly three, so the track count is fixed rather than auto-fit — at wide
   widths auto-fit opened a fourth track and left it empty. */
.decide {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.4rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 680px)  { .decide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .decide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.decide__card {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.decide__card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
.decide__if {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.decide__card p { font-size: var(--step-0); line-height: 1.75; margin: 0; }
.decide__foot { margin-top: clamp(2rem, 3vw, 2.5rem); }
.decide__foot p { max-width: 46rem; }
.decide__foot .btn-row { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   Brands — six ruled entries with a warranty chip
   -------------------------------------------------------------------------- */
.ibrands {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.ibrand { padding-top: 1.35rem; border-top: 1px solid var(--line); }
.ibrand__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem; margin-bottom: .7rem; }
.ibrand h3 { font-size: var(--step-1); }
/* The warranty chip now uses the shared .chip in main.css §11d. */
.ibrand p { font-size: var(--step--1); line-height: 1.72; }
.ibrands__foot { margin-top: clamp(2rem, 3vw, 2.5rem); }

/* --------------------------------------------------------------------------
   Sizing callout — no image on this section, so the type carries it
   -------------------------------------------------------------------------- */
.callout {
  margin-top: clamp(2.5rem, 4vw, 3.25rem);
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.75rem, 3vw, 3rem);
  background: var(--navy-900);
  border-radius: var(--r-xl);
}
.callout p {
  margin: 0;
  max-width: 46rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.55;
  color: #fff;
}
.callout__body { margin-top: clamp(2rem, 3vw, 2.5rem); }
.callout__body p { max-width: 46rem; }
.callout__body p + p { margin-top: 1.1rem; }

/* --------------------------------------------------------------------------
   Monitoring — brand to app, as a ruled table
   -------------------------------------------------------------------------- */
.apps { display: grid; gap: 0; margin-top: 1.5rem; border-top: 1px solid var(--line); }
.apps > div {
  display: grid;
  grid-template-columns: minmax(7rem, .35fr) minmax(0, 1fr);
  gap: .5rem 1.5rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.apps dt { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: var(--step-0); }
.apps dd { font-size: var(--step-0); color: var(--body); }