/* Yalla2x — layout for the proof / solution / calculator pages. Self-contained so a right-hand panel never
   collapses: the generic .split is a 12-column grid that only places .split__text and .split__media, so any other
   second child (an .invoice panel, a table, a form) gets no column. These helpers place them and stack at 1023px,
   matching the rest of the site. Colours and type come from the existing tokens; nothing is restyled. */

.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: 1fr; }
}

/* 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: 1fr; }
}
.field-form { width: 100%; }
.field-form .field { width: 100%; }
.field-form input { width: 100%; box-sizing: border-box; }