/* HVAC page: placement of this page's blocks on top of the shared site.css.
   Tokens, fields and chapter blueprints come from site.css; nothing here redefines them. */

/* Hero: a 44-character headline, so the display size steps down; the three-beat sub at head size; the field sized to its content */
.hero-seam { --hero-display: clamp(3.5rem, 7.2vw, 7rem); min-height: 0; grid-template-rows: auto auto; }
.hero-seam .upper { min-height: calc(var(--seam) - var(--head-h)); }
.hero-seam .title { font-size: var(--hero-display); }
.hero-seam .lower { min-height: 0; padding-top: calc(var(--hero-display) * 1.1); padding-bottom: var(--s7); align-content: start; }
.hero-seam .beats { grid-column: 1 / 10; display: grid; row-gap: var(--s1); }
.hero-seam .beats p { font-size: var(--step-head); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }

/* The problem: one short statement, the rest of the block as the note */
.stair .note { font-size: var(--step-lead); line-height: 1.3; max-width: 40ch; }
.pic figcaption { max-width: 60ch; }

/* What changes with Revbase: one band per item, the lead-in at poster size over its sentence, the app fragment right */
.gets .band { padding-block: var(--s6); }
.gets .band .grid { align-items: center; row-gap: var(--s3); }
.gets .band .hook { grid-column: 1 / 8; grid-row: 1; align-self: end; font-size: var(--step-poster); }
.gets .band .say { grid-column: 1 / 8; grid-row: 2; align-self: start; font-size: var(--step-lead); line-height: 1.3; max-width: 40ch; }
.gets .band .pic { grid-column: 8 / 13; grid-row: 1 / 3; }
.gets .band .pic img { width: 100%; background: var(--paper); }
.gets .band .pic.phone { grid-column: 8 / 13; width: min(100%, 440px); justify-self: end; }
.gets .band .pic figcaption { padding-top: var(--s1); font-size: var(--step-small); }

/* What it adds up to: two sentences side by side, each with its figure at display size on its own line */
.sums { padding-block: var(--s8) var(--s7); }
.sums .grid { row-gap: var(--s6); align-items: end; }
.sums h2 { grid-column: 1 / 13; font-size: var(--step-poster); }
.sums .sum { font-size: var(--step-head); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.sums .sum:nth-of-type(1) { grid-column: 1 / 7; }
.sums .sum:nth-of-type(2) { grid-column: 7 / 13; }
.sums .figure { display: block; font-size: var(--step-display); font-weight: 900; letter-spacing: var(--track-display); line-height: 0.9; padding-block: var(--s1); }

/* No risk to try: the statements stacked full width under the heading */
.easy .grid { row-gap: var(--s4); }
.easy h2 { margin-bottom: var(--s4); }
.easy .grid { align-items: end; }
.easy .statements li:nth-child(n) { max-width: none; font-size: calc(var(--step-poster) * 0.7); padding-right: 0; }
.easy .statements li:nth-child(1) { grid-column: 1 / 6; }
.easy .statements li:nth-child(2) { grid-column: 6 / 13; }

/* Footer: two tiles on the first row (the sibling links and the credit line), the wordmark and the action below */
.board .links { grid-column: 1 / 5; }
.board .credit { grid-column: 5 / 13; justify-content: flex-end; }
.board .credit p { max-width: 60ch; }

@media (max-width: 1023px) {
  .hero-seam .beats { grid-column: 1 / 13; }
  .gets .band .hook, .gets .band .say, .gets .band .pic { grid-column: 1 / 13; }
  .gets .band .hook { grid-row: 1; }
  .gets .band .say { grid-row: 2; }
  .gets .band .pic { grid-row: 3; }
  .gets .band .pic.phone { grid-column: 1 / 13; justify-self: start; }
  .sums .sum:nth-of-type(1), .sums .sum:nth-of-type(2) { grid-column: 1 / 13; }
}
@media (max-width: 767px) {
  :root { --step-poster: 2rem; }
  .hero-seam { --hero-size: 2rem; }
  .hero-seam .title { font-size: var(--hero-size); }
  .terms h2, .close h2 { font-size: var(--step-poster); }
  .easy .statements li:nth-child(n) { grid-column: 1 / 13; }
  .hero-seam .title span { display: inline; }
  .hero-seam .beats p { font-size: var(--step-lead); }
  .gets .band-head h2 { font-size: var(--step-poster); }
  .sums { padding-block: var(--s7); }
  .easy .statements li:nth-child(n) { font-size: var(--step-head); }
  .board .links, .board .credit { grid-column: 1 / -1; }
  .board .credit { order: 2; }
}