/* rentbloque.com — the two free-sheet pages (rent-ledger, build-costs and their Spanish twins).
   Layout: a short head, then a white preview of the sheet beside a sticky "get the sheet" form.
   Loaded after site.css; the page's own ledger.css / costs.css come last. Mango only on the buttons. */
.mag-head { padding: var(--s8) 0 var(--s6); }
@media (min-width: 768px) { .mag-head { padding: var(--s9) 0 var(--s7); } }
.mag-head .lede { margin-top: var(--s5); max-width: 56ch; }
.mag-main { padding: 0 0 var(--pad); }
.mag-grid { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 900px) { .mag-grid { grid-template-columns: 1.1fr .9fr; gap: var(--s8); } }

/* the sheet, previewed: white paper, palm band on top */
.pv { overflow: hidden; }
.pv-head { background: var(--palm); color: var(--on-dark); padding: var(--s4) var(--s5); font-weight: 600; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.pv-head small { color: var(--soft-dark); font-weight: 400; font-size: 13px; }
.pv-fade { position: relative; }
.pv-fade::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 85%); pointer-events: none; }
.pv table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pv th, .pv td { padding: 9px var(--s4); text-align: left; border-bottom: 1px solid var(--hair); vertical-align: baseline; }
.pv th { font-size: 12px; font-weight: 600; color: var(--ink2); }
.pv td.n, .pv th.n { text-align: right; }
.pv tbody tr:nth-child(even) td { background: rgba(14,43,37,.025); }
.pv td.blank { background: var(--paper2) !important; color: var(--ink2); }
.pv td.more { color: var(--ink2); font-style: italic; }
.pv td.first { font-style: italic; }
.pv tr.total td { background: rgba(93,202,165,.14) !important; font-weight: 600; border-bottom: none; color: var(--ink); }
.pv tr.total td.n { width: 32%; }
.pv-foot { padding: var(--s3) var(--s5) var(--s4); font-size: 13px; color: var(--ink2); }
@media (max-width: 479px) { .pv th, .pv td { padding: 9px var(--s3); } .pv-head { padding: var(--s3) var(--s4); } }

/* the ask */
.mag-form { padding: var(--s5); align-content: start; }
@media (min-width: 768px) { .mag-form { padding: var(--s6); } }
@media (min-width: 900px) { .mag-form { position: sticky; top: 88px; } }
.mag-form h2 { font-size: 28px; line-height: 1.1; max-width: none; font-weight: 400; }
.mag-form p { margin: 0; color: var(--ink2); font-size: 15px; }
.mag-form .small { font-size: 13px; }
.mag-form .dl { display: grid; gap: var(--s2); margin-top: var(--s3); }
.mag-form .dl .btn { white-space: normal; text-align: center; }
.mag-form .toast a { color: var(--door); }