/* Revbase dealer page for home improvement companies: page-only layout.
   Loaded after ../assets/site.css; every colour, size and space is a token from there.
   The chapters reuse the shared blueprints (hero-seam, bands, stair, plans, tiles, terms, close, board)
   with this page's copy; the rules below only move content onto the shared grid. */

:root {
  --step-say: clamp(1.5rem, 1.1rem + 1.1vw, 2.125rem);   /* a statement: 24 to 34px, under the statement caps */
  --step-note: clamp(1.25rem, 1.1rem + 0.9vw, 1.75rem);  /* a note set above body: 20 to 28px */
}

/* Hero: the sentence and the button on the lower field; no figures row on this page */
.hero-hi { min-height: 0; }
.hero-hi .lower { min-height: 0; align-content: start; row-gap: var(--s4); padding-bottom: var(--s8); }
.hero-hi .support { max-width: 44ch; }

/* Who we are: a heading band, a band of two statements, a band of two pictures */
.who .band { padding-block: var(--s6); }
.who .band .grid { row-gap: var(--s4); }
.who .band .say { grid-column: 1 / 6; font-size: var(--step-say); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; max-width: none; }
.who .band .say + .say { grid-column: 7 / 13; }
.who .pics .grid { row-gap: var(--s4); }
.who .pic { grid-column: 1 / 7; }
.who .pic + .pic { grid-column: 7 / 13; }
.who .pic img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; background: var(--slate); }
.who .pic figcaption, .problem .pic figcaption { padding-top: var(--s2); font-size: var(--step-body); line-height: 1.4; max-width: 60ch; }

/* Problem: three sentences beside the furnace, the last one largest */
.problem .say1 { grid-column: 1 / 7; grid-row: 1; align-self: end; }
.problem .say2 { grid-column: 1 / 7; grid-row: 2; }
.problem .say1, .problem .say2 { font-size: var(--step-note); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.problem .statement { grid-row: 3; }

/* For your company, for your reps: two equal fields */
.pair { grid-template-columns: 1fr 1fr; min-height: 72svh; }
.pair .plan { padding: var(--s7) var(--margin); row-gap: var(--s4); }
.pair .plan .price { padding-top: var(--s7); }
.pair .plan .price .big.words { font-size: var(--step-head); line-height: 1.05; letter-spacing: -0.03em; }

/* What you get: the app in the tall tile, three statements stacked beside it */
.gets .grid { grid-auto-rows: auto; }
.gets h2 { grid-column: 7 / 13; grid-row: 1; min-height: 0; padding-bottom: var(--s3); }
.gets .tall { grid-column: 1 / 7; grid-row: 1 / 5; min-height: 0; }
.gets .mid { grid-column: 7 / 13; grid-row: 2; min-height: 26svh; }
.gets .low { grid-column: 7 / 13; grid-row: 3; min-height: 16svh; align-self: stretch; }
.gets .last { grid-column: 7 / 13; grid-row: 4; min-height: 24svh; }
.gets .tall .caption { font-size: var(--step-lead); line-height: 1.3; max-width: 36ch; }
.gets .mid .figure { font-size: var(--step-say); line-height: 1.1; letter-spacing: -0.03em; max-width: 24ch; }
.gets .low .caption { font-size: var(--step-say); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; max-width: 24ch; }
.gets .tall, .gets .low { justify-content: flex-start; }
.gets .fragment { background: transparent; }
.gets .fragment img { width: 100%; max-width: 488px; }
.gets .fragment figcaption { padding-top: var(--s1); font-size: var(--step-small); }

/* Proof: one line, the figure at display size */
.proof { min-height: 64svh; padding-block: var(--s7); display: grid; align-content: space-between; row-gap: var(--s5); }
.proof .proof-line { display: contents; }
.proof .lead-in { display: block; font-size: var(--step-lead); line-height: 1.3; font-weight: 600; }
.proof .big { display: block; font-size: var(--step-display); font-weight: 900; letter-spacing: var(--track-display); line-height: 0.92; text-wrap: balance; }

/* Easy: three statements on the column lines */
.easy { padding-block: var(--s8) var(--s7); }
.easy .statements li { font-size: var(--step-say); }

/* Close: the call, one sentence, one button */
.close-hi { min-height: 76svh; padding-bottom: 8rem; }
.close-hi .foot { bottom: 6rem; }

/* Footer: links, the credit line, the wordmark, the action */
.board-hi .links { grid-column: 1 / 5; }
.board-hi .links ul { font-size: var(--step-lead); line-height: 1.3; }
.board-hi .credit { grid-column: 5 / 13; }
.board-hi .credit p { font-size: var(--step-body); line-height: 1.4; max-width: 60ch; }

@media (max-width: 1023px) {
  .who .band .say, .who .band .say + .say { grid-column: 1 / 13; }
  .problem .say1, .problem .say2, .problem .statement { grid-column: 1 / 13; }
  .problem .say1 { grid-row: 1; } .problem .say2 { grid-row: 2; } .problem .statement { grid-row: 3; }
  .problem .pic { grid-row: 4; }
  .pair { grid-template-columns: 1fr; min-height: 0; }
  .pair .plan { padding: var(--s7) var(--margin); }
  .pair .plan .price { padding-top: var(--s5); }
  .gets h2 { grid-column: 1 / 13; grid-row: 1; }
  .gets .tall { grid-column: 1 / 13; grid-row: 2; flex-direction: column; }
  .gets .mid { grid-column: 1 / 7; grid-row: 3; min-height: 40vw; }
  .gets .last { grid-column: 7 / 13; grid-row: 3; min-height: 40vw; }
  .gets .low { grid-column: 1 / 13; grid-row: 4; min-height: 0; }
  .gets .low .caption { max-width: none; }
  .proof { min-height: 0; }
  .close-hi { min-height: 0; padding-bottom: var(--s7); }
}

@media (max-width: 767px) {
  .who .band { padding-block: var(--s5); }
  .who .pic, .who .pic + .pic { grid-column: 1 / 13; }
  .gets .mid, .gets .last { grid-column: 1 / 13; min-height: 0; }
  .gets .mid { grid-row: 3; } .gets .last { grid-row: 4; } .gets .low { grid-row: 5; }
  .gets .last .figure { font-size: var(--step-poster); }
  .proof { padding-block: var(--s6); row-gap: var(--s4); }
  .easy { padding-block: var(--s7); }
  .board-hi .links, .board-hi .credit { grid-column: 1 / -1; }
  .board-hi .credit { order: 2; }
}