/* Layout audit 2026-09-08 — spacing scale + rhythm + cascade fixes.
   8px base unit. Desktop sections 160px, mobile sections 112px,
   gutters on the 8px grid, vw gaps capped so they hold at wide viewports.
   Appended: wins the cascade over conflicting earlier rules. */
:root{
  --s-1:8px;--s-2:16px;--s-3:24px;--s-4:32px;--s-5:40px;--s-6:48px;
  --s-7:56px;--s-8:64px;--s-10:80px;--s-12:96px;--s-14:112px;--s-20:160px;
}
/* Rhythm: one desktop section scale, one mobile scale. */
.feature{padding:var(--s-20) 0}
.earnings{padding:var(--s-20) 0}
.promise{padding:var(--s-20) 0}
footer{padding:48px 0}
/* Column gaps: capped so the void does not widen past ~1440px. */
.intro-layout{gap:clamp(32px,6vw,80px)}
.feature-layout,.feature-layout-reverse{gap:clamp(48px,8vw,96px)}
.earnings-heading{gap:clamp(48px,8vw,96px)}
.promise-grid{gap:clamp(32px,6vw,80px)}
/* Copy-to-ledger/breakdown group: 46px off-grid, ledger sits far from the paragraph. */
.feature-copy>p:not(.eyebrow){margin:32px 0 40px}
/* Ledger rows: 17px/13px/19px/25px/34px -> 8px grid, consistent row rhythm. */
.feature-ledger li{padding:16px 0}
.estimate-breakdown div{padding:16px 0}
.estimate-breakdown .estimate-total{padding-top:24px}
.shift-summary{padding:24px 0 32px}
.ride-row{padding:20px 0}
/* Mobile: one section scale, tighter but grid-true gaps. */
@media(max-width:800px){
  .feature{padding:var(--s-14) 0}
  .earnings{padding:var(--s-14) 0}
  .promise{padding:var(--s-14) 0}
  .product-intro{padding:96px 0}
  .intro-layout{gap:32px}
  .feature-layout,.feature-layout-reverse{gap:64px}
  .earnings-heading{gap:32px;margin-bottom:64px}
  .earnings-console{gap:56px}
  .promise-grid{gap:32px}
  .ride-row{gap:16px}
}
/* Cascade repair: the base .earnings-console rule (earlier in this file) was
   overriding the 800px single-column rule at mobile widths, crushing the
   shift ledger to ~205px. Scope the two-column form to >=801px. */
.earnings-console{grid-template-columns:minmax(280px,390px) 1fr}
@media(max-width:800px){
  .earnings-console{grid-template-columns:1fr}
  .earnings-phone{width:min(310px,80%);margin-inline:auto}
}
@media(max-width:520px){
  .ride-row{grid-template-columns:1fr auto;grid-template-areas:"time fare" "route fare"}
  .ride-row time{grid-area:time;margin-bottom:2px}
  .ride-row span{grid-area:route}
  .ride-row>strong{grid-area:fare;align-self:start}
}