/* Ratably — layout of the home page, What we check and How it works (site phase 2, workstream C).
   The components they use (page head, card, stat, notice, grids, call to action) are in
   components.css; the hero, the clock, the sample statement, the check tick, the step counter and
   the comparison table are in ratably.css. This file only places them. */

/* space between the groups of a page: cards, then the notice or the table, then the closing card */
.site-main { --group: clamp(32px, 5vw, 48px) }

/* ---- home: one promise, one button and the clock at the left; the sample statement at the right ---- */

.site-main .hero { padding-block: 0 var(--group) }   /* main already pads the top */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(28px, 5vw, 56px); align-items: start }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr } }
.hero-grid h1 { margin-top: 16px }
.hero-grid .stmt { margin: 8px 0 0; align-self: center }
.hero-grid .clockcard { border-radius: 0 0 6px 6px }

/* the three statistics: a number over its sentence, in three cards */
.home-stats { margin-bottom: var(--group) }
.home-stats .stat { margin-bottom: 10px }
.home-stats .card-text { margin-bottom: 0; font-size: .95rem }
.home-stats sup { line-height: 0 }

/* ---- What we check: five cards, three then two wider ones, so no row ends in a hole ---- */

.check.card { padding: clamp(18px, 3vw, 28px) }
.check.card::before { position: static; margin-bottom: 14px }
.check.card p { margin-top: 6px }
@media (min-width: 600px) and (max-width: 899px) { .checks.cards-3 > .check:last-child { grid-column: 1 / -1 } }
@media (min-width: 900px) {
  .checks.cards-3 { grid-template-columns: repeat(6, minmax(0, 1fr)) }
  .checks.cards-3 > .check { grid-column: span 2 }
  .checks.cards-3 > .check:nth-child(n+4) { grid-column: span 3 }
}
.site-main > .notice { max-width: 52rem; margin: 0 0 var(--group) }

/* ---- How it works: four step cards, then the comparison table in a card ---- */

.step.card { padding: clamp(18px, 3vw, 28px) }
.step.card::before { color: var(--green) }
.step.card h3 { margin-block: 10px 6px }
.step.card p { color: var(--ink2); font-size: .96rem }

.compare { padding: 0; margin: var(--group) 0 }   /* beats ratably.css's bare `section` padding */
.compare .card { margin-bottom: 0 }
.section-head { display: grid; gap: 10px; margin-bottom: 18px }
.section-head h2 { font-size: var(--h2-section) }
.compare .cmp { min-width: 560px }
/* Phones: three columns plus a label column do not fit, and the sideways scroll hid two of them.
   Each row becomes a block: the row name as a heading, then each column's cell under its own label. */
@media (max-width: 600px) {
  .compare .cmp { min-width: 0 }
  .compare .scroll { overflow-x: visible }
  .compare .cmp thead { display: none }
  .compare .cmp tbody, .compare .cmp tr, .compare .cmp th, .compare .cmp td { display: block }
  .compare .cmp tr { padding: 14px 0; border-bottom: 1px solid var(--rule) }
  .compare .cmp th, .compare .cmp td { border: 0; padding: 4px 0 }
  .compare .cmp tbody th { font-weight: 700; padding-bottom: 8px }
  .compare .cmp td::before { display: block; font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2) }
  .compare .cmp td:nth-child(2)::before { content: "Do nothing" }
  .compare .cmp td:nth-child(3)::before { content: "Traditional lease audit firm" }
  .compare .cmp td:nth-child(4)::before { content: "Ratably" }
  .compare .cmp td:last-child { padding: 8px 10px; margin-top: 4px; border-radius: 6px }
}
.compare .cmp tbody tr:last-child > * { border-bottom: 0 }

/* the sources list under the closing card: ratably.css's bare `section` padding would leave a
   hundred empty pixels above it and below it */
.site-main .sources-block { padding-block: 0 }
.site-main .sources-block .sources { margin-bottom: 0 }

/* ---- For landlords: the head and its button, two cards side by side, then costs and the season ---- */

.page-head > .btn { margin-top: 20px }
.landlords-blocks { display: grid; gap: var(--gap); margin: 0 0 var(--gap) }
.landlords-blocks .card { margin-bottom: 0 }
@media (min-width: 760px) { .landlords-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.landlords-blocks h2, .landlords-costs h2 { font-size: var(--h2-section); margin-bottom: 12px }
.landlords-list { margin: 0 0 14px; padding-left: 1.2em; display: grid; gap: 6px }
.landlords-sides { font-weight: 600; color: var(--ink) }
.landlords-season { margin-bottom: var(--group) }
.landlords-season .card-text { margin-bottom: 0 }

/* the 2026 pre-order inside the season block, while the pre-order switch is on */
.season-preorder { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--green) 30%, var(--rule)) }
.season-packs { display: flex; flex-wrap: wrap; gap: 8px 20px }
.season-pack { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500 }
.season-pack input { width: auto; flex: none; margin: 0 }
.season-preorder .clickwrap { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem }
.season-preorder .btn { justify-self: start }