/* Yalla2x v5: layout for the proof, solution and calculator pages (from live, owner 2026-10-31). The generic .split only
   places .split__text and .split__media, so an .invoice panel, a table or a form beside text uses this instead. Colours
   and type come from the existing tokens; it stacks at 1023px like the rest of the site. */

.sx { display: grid; grid-template-columns: 1.08fr 0.92fr; column-gap: clamp(24px, 3vw, 56px); row-gap: 32px; align-items: center; }
.sx__text > * + * { margin-top: 20px; }
.sx__text p { max-width: 56ch; }
@media (max-width: 1023px) {
  .sx { grid-template-columns: minmax(0, 1fr); }
}

/* the calculator: three inputs in a row (stacking on phones), full-width fields, results table full-width below */
.tco-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-bottom: 28px; }
@media (max-width: 767px) {
  .tco-grid { grid-template-columns: minmax(0, 1fr); }
}
.field-form { width: 100%; }
.field-form .field { width: 100%; }
.field-form input { width: 100%; box-sizing: border-box; }

/* Verify's buttons between its table and result; the calculator's email, button and result line */
.cmp-wrap + .actions { margin-top: 24px; }
.actions + .invoice { margin-top: 24px; }
.field-form .actions { margin-top: 16px; }
.tco-after { margin-top: 24px; }
.lk-cta > .field-form { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.lk-cta > .field-form .actions { margin-top: 20px; }
.field-form [data-tco-result]:not(:empty) { margin-top: 12px; }
.field-form .btn { white-space: normal; }

/* two-column tables: no empty key column. Above 900px only; below that every table becomes cards */
@media (min-width: 901px) {
  .ledger:has(colgroup > col:nth-child(2):last-child) tbody th { width: 30%; }
  .ledger:has(colgroup > col:nth-child(2):last-child) td:last-child { width: auto; padding-right: 0; }
}

/* long codes (Verify's fingerprints) wrap instead of pushing the page sideways on phones */
main code { overflow-wrap: anywhere; }
