@charset "utf-8";
/* ==========================================================================
   SunRight Solar — Best Solar Panels Australia (/best-solar-panels-australia/)

   The first buying guide, so it reads as editorial rather than as a product
   hub. Its identity is the comparison table: nine brands on six specifications
   in one scannable grid, built from the approved spec lines only.

     Page head    shared .page-head + banner
     Choosing     copy over a ruled spec glossary
     Specs        shared .specdefs (main.css §11d)
     Table        nine brands, six columns, scrollable on narrow screens
     Brands       nine profiles, each with its own spec panel
     Scenarios    shared .scenarios (main.css §11d)
     Stocked      what SunRight Solar carries, and what it does not
     FAQ          shared accordion

   The glossary, scenario and onward-link components were promoted to
   main.css §11d once the second guide needed them. What stays here is what
   only this page uses.
   ========================================================================== */

/* The scrollable table region, .ctable and the legend now live in
   main.css §11e. Only this page's own additions remain here. */

/* Page-specific: the stocked-brand marker and the "up to" qualifier. */
/* "up to" is part of the approved figure, so it stays — just set quieter than
   the number so the column still scans as a column of numbers. */
.qual { font-weight: 500; color: var(--muted); }
.ctable tbody tr.is-stocked th { position: relative; }
.ctable tbody tr.is-stocked th::before {
  content: "";
  position: absolute; left: 0; top: .95rem; bottom: .95rem;
  width: 3px; border-radius: 3px;
  background: var(--grad-cta);
}
.ctable tbody tr.is-stocked th { padding-left: calc(clamp(.85rem, 1.4vw, 1.15rem) + .6rem); }

/* This page's table stops overflowing at 800px. */
@media (min-width: 800px) { .table-hint { display: none; } }

/* --------------------------------------------------------------------------
   Brand profiles — copy beside a spec panel
   -------------------------------------------------------------------------- */
.profiles { margin-top: clamp(2.5rem, 4vw, 3.5rem); display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); }
.profile {
  position: relative;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  padding: clamp(1.6rem, 2.6vw, 2.25rem);
  background: #fff;
  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);
}
@media (min-width: 860px) { .profile { grid-template-columns: minmax(0, 1.15fr) minmax(17rem, .85fr); } }
.profile::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);
}
.profile: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); }
.profile:hover::before { transform: scaleX(1); }
.profile__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem; margin-bottom: .9rem; }
.profile h3 { font-size: var(--step-2); }
.profile p { font-size: var(--step-0); line-height: 1.75; }
.profile__best { margin-top: 1rem; }
.profile__best strong { font-family: var(--font-display); font-weight: 700; color: var(--ink); }

.profile__specs {
  display: grid; gap: 0;
  align-self: start;
  border-top: 1px solid var(--line);
}
.profile__specs > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
}
.profile__specs dt { font-size: .8125rem; color: var(--muted); }
.profile__specs dd {
  font-family: var(--font-num);
  font-size: .875rem; font-weight: 700;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Label and value share a line while there is room for both. On a phone the
   longer technology strings wrap and a right-aligned orphan ("series)") reads
   as a mistake, so the pair stacks and both sides align left. */
@media (max-width: 520px) {
  .profile__specs > div { display: grid; gap: .15rem; }
  .profile__specs dd { text-align: left; }
}