/* Revbase dealer page for solar companies: layout deltas on the shared system (../assets/site.css).
   Tokens come from site.css only; this file changes chapter geometry for the solar copy. */

:root {
  --step-proof: clamp(3.5rem, 8.4vw, 8.5rem); /* the one display figure, sized to hold "15 installs a month." on one line at 1440 */
}

/* Hero: no figure row. The sentence sits under the seam, the one action closes the field at the foot. */
.solar .hero-seam .lower { align-content: end; padding-bottom: var(--s6); }
.solar .hero-seam .support { grid-column: 1 / 8; max-width: 44ch; }
.solar .hero-seam .lower > .btn { grid-column: 10 / 13; justify-self: end; align-self: start; }
@media (max-width: 767px) {
  .solar .hero-seam .support { grid-column: 1 / 13; }
  .solar .hero-seam .lower > .btn { grid-column: 1 / 13; justify-self: stretch; }
}

/* The problem: the first sentence is the statement, the other two the note, in the field's full ink. */
.solar .stair .note { font-size: var(--step-lead); line-height: 1.3; max-width: 34ch; }

/* What changes: heading in the left third, two statements stacked on the right. */
.changes { padding-block: var(--s8) var(--s7); }
.changes .grid { row-gap: var(--s5); }
.changes h2 { grid-column: 1 / 5; grid-row: 1 / 3; font-size: var(--step-poster); align-self: start; max-width: 8ch; }
.changes .statements { display: contents; }
.changes .statements li {
  grid-column: 5 / 13; font-size: 2.25rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; text-wrap: pretty;
}
.changes .statements li strong { font-weight: 800; }
.changes .statements li:nth-child(1) { grid-row: 1; }
.changes .statements li:nth-child(2) { grid-row: 2; }
@media (max-width: 1023px) {
  .changes { padding-block: var(--s7) var(--s6); }
  .changes h2 { grid-column: 1 / 13; grid-row: 1; max-width: none; }
  .changes .statements li { grid-column: 1 / 13; font-size: 2rem; }
  .changes .statements li:nth-child(1) { grid-row: 2; }
  .changes .statements li:nth-child(2) { grid-row: 3; }
}
@media (max-width: 767px) {
  .changes h2 { font-size: 2.25rem; }
  .changes .statements li { font-size: 1.5rem; }
  .changes .grid { row-gap: var(--s4); }
}

/* For your company, for your reps: two equal fields, one sentence each. */
.solar .plans { grid-template-columns: 1fr 1fr; min-height: 64svh; }
.solar .plans .plan { padding: var(--s7) var(--margin); row-gap: var(--s4); align-content: center; }
.solar .plans .plan h2 { max-width: 10ch; }
.solar .plans .plan .who { font-size: 2.25rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; max-width: 30ch; }
@media (max-width: 1023px) {
  .solar .plans { grid-template-columns: 1fr; min-height: 0; }
  .solar .plans .plan { min-height: 0; padding: var(--s7) var(--margin); }
  .solar .plans .plan .who { font-size: 2rem; max-width: 34ch; }
}
@media (max-width: 767px) {
  .solar .plans .plan .who { font-size: 1.5rem; }
}

/* What you get: three stepped tiles, the platform tile carries the app, the payday line runs the full width. */
.solar .tiles .figure { font-size: 2.25rem; max-width: 24ch; }
.solar .tiles .tall { grid-column: 1 / 7; grid-row: 1 / 3; min-height: 44svh; gap: var(--s5); }
.solar .tiles .mid { grid-column: 7 / 13; grid-row: 2; min-height: 0; gap: var(--s5); }
.solar .tiles .low {
  grid-column: 1 / 13; grid-row: 3; min-height: 0; align-self: stretch;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); align-items: end;
}
.solar .tiles .low .figure { max-width: 22ch; align-self: start; }
.solar .tiles .low .pic { width: 100%; }
.solar .tiles .pic img { width: 100%; background: var(--paper); }
.solar .tiles .pic figcaption { padding-top: var(--s1); font-size: var(--step-small); }
.solar .tiles .foot { grid-column: 1 / 13; font-size: var(--step-poster); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; max-width: none; padding-top: var(--s5); }
@media (max-width: 1023px) {
  .solar .tiles .figure { font-size: 2rem; max-width: none; }
  .solar .tiles .tall { grid-column: 1 / 13; grid-row: 2; min-height: 0; flex-direction: column; }
  .solar .tiles .mid { grid-column: 1 / 13; grid-row: 3; min-height: 0; }
  .solar .tiles .low { grid-column: 1 / 13; grid-row: 4; display: flex; row-gap: var(--s4); }
  .solar .tiles .low .figure { max-width: none; }
  .solar .tiles .foot { padding-top: var(--s4); }
}
@media (max-width: 767px) {
  .solar .tiles .figure { font-size: 1.5rem; }
  .solar .tiles .tile { gap: var(--s4); }
}

/* Proof: one sentence, its figure at display size on the foot line of the field. */
.proof { min-height: 64svh; padding: var(--s7) var(--margin); display: grid; }
.proof .proof-text { display: grid; align-content: space-between; row-gap: var(--s6); }
.proof .setup { font-size: var(--step-lead); line-height: 1.3; max-width: 30ch; }
.proof .big { font-size: var(--step-proof); font-weight: 900; letter-spacing: var(--track-display); line-height: 0.9; text-wrap: balance; }
@media (max-width: 1023px) {
  .proof { min-height: 0; padding-block: var(--s7); }
}

/* Easy: the three statements on one baseline, no heading above them. */
.solar .easy { padding-block: var(--s8); }
.solar .easy .grid { row-gap: var(--s4); }
.solar .easy .statements li:nth-child(n) { grid-column: 1 / 13; font-size: var(--step-poster); line-height: 0.98; letter-spacing: -0.04em; padding-right: 0; max-width: 24ch; }
@media (max-width: 767px) {
  .solar .easy { padding-block: var(--s7); }
  .solar .easy .statements li:nth-child(n) { font-size: 1.5rem; }
}

/* Footer board: links, the credit line, the wordmark, the action. */
.solar .board .links { grid-column: 1 / 6; }
.solar .board .credits { grid-column: 6 / 13; justify-content: flex-end; }
.solar .board .credits p { max-width: 60ch; }
@media (max-width: 767px) {
  .solar .board .links, .solar .board .credits { grid-column: 1 / -1; }
  .solar .board .links { order: 1; }
  .solar .board .credits { order: 2; }
}