/* zplCore.com order page (/buy/, /de/buy/) and thank-you page. The form sits on the dark panel of the contact page and uses
   its cf-* classes from site.css; these rules add the licence tables, payment options and the total. Always dark (the panel
   is dark in both colour schemes). */
.by{display:grid;gap:2.25rem;margin-top:2rem}
.by-group{border:0;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;min-width:0}
.by-h{font-size:1.125rem;line-height:1.4;font-weight:600;color:#fff;padding:0;margin:0 0 .25rem}
.by-p{margin:0;font-size:.875rem;line-height:1.6;color:#cbd5e1;max-width:52rem}
.by-tabs{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.by-tab{font-size:.8125rem;color:#f59a4a;text-decoration:underline;text-underline-offset:2px}
.by-tab:hover{color:#fff}
.by-kind{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;min-width:0;scroll-margin-top:6rem}
.by-kind[hidden],.by-config[hidden],.by-tabs[hidden],.by-cfg[hidden],.by-cfg-q[hidden]{display:none}
.by-config{display:grid;gap:.875rem;min-width:0}
.by-config>.cf-f{max-width:36rem}
.by-cfg{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr) minmax(0,1fr) auto minmax(5.5rem,auto);gap:.5rem .75rem;align-items:center;min-width:0}
.by-cfg-n{font-weight:600}
.by-cfg-q{display:flex;align-items:center;gap:.5rem;font-size:.8125rem}
.by-cfg-q input{width:4.5rem}
.by-cfg-p{text-align:right;white-space:nowrap}
@media (max-width:720px){.by-cfg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.by-cfg-n{grid-column:1/-1}.by-cfg-p{text-align:left}}
.by-kh{margin:.75rem 0 0;font-size:1rem;font-weight:600;color:#fff}
.by-kh span{display:block;margin-top:.125rem;font-size:.8125rem;font-weight:400;color:#94a3b8}
.by-t{width:100%;min-width:0;border-collapse:collapse;font-size:.9375rem} /* site.css gives tables min-width:560px (docs) */
.by-t th,.by-t td{padding:.625rem .5rem;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;vertical-align:middle;color:#e2e8f0}
.by-t thead th{font-size:.75rem;font-weight:500;color:#94a3b8;text-transform:uppercase;letter-spacing:.04em}
.by-t tbody th{font-weight:400}
.by-t tbody th b{font-weight:600;color:#fff}
.by-t small{display:block;margin-top:.125rem;font-size:.75rem;line-height:1.4;color:#94a3b8}
.by-t .n{text-align:right;white-space:nowrap}
.by-t .q{width:6.5rem;text-align:right}
.by-t tr.by-on th b,.by-t tr.by-on td.n{color:#fdba74}
.by-q{width:5rem;min-height:40px;border:0;border-radius:.625rem;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);color:#fff;font:inherit;text-align:right;padding:.375rem .625rem}
.by-q:focus{outline:2px solid #f59a4a;outline-offset:1px}
.by-q[aria-invalid=true]{box-shadow:inset 0 0 0 2px #f87171}
.by-sum{display:grid;grid-template-columns:1fr auto;gap:.25rem 1rem;align-items:baseline;border-radius:.75rem;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);padding:1rem 1.25rem}
.by-sum span{color:#cbd5e1}
.by-sum b{font-size:1.5rem;font-weight:600;color:#fff}
.by-sum small{grid-column:1/-1;font-size:.75rem;line-height:1.5;color:#94a3b8}
.by-pay{display:grid;gap:.75rem}
.by-opt{display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;border-radius:.75rem;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);padding:1rem}
.by-opt:has(input:checked){box-shadow:inset 0 0 0 2px #f59a4a;background:rgba(245,154,74,.08)}
.by-opt input{margin-top:.2rem;width:1.1rem;height:1.1rem;flex-shrink:0;accent-color:#f59a4a}
.by-opt input:focus-visible{outline:2px solid #f59a4a;outline-offset:2px}
.by-opt b{display:block;font-weight:600;color:#fff}
.by-opt small{display:block;margin-top:.25rem;font-size:.8125rem;line-height:1.5;color:#94a3b8}
.by-opt.by-off{opacity:.45;cursor:not-allowed}
.by-info{margin:1.25rem 0 0;max-width:48rem;border-radius:.75rem;background:rgba(245,154,74,.12);box-shadow:inset 0 0 0 1px rgba(245,154,74,.35);padding:.75rem 1rem;font-size:.875rem;line-height:1.6;color:#fde68a}
.by-info[hidden]{display:none}
.by .cf-err{color:#fca5a5}
.by-done{justify-items:start}
.by-actions{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;margin-top:.5rem}
@media (min-width:768px){.by-pay{grid-template-columns:1fr 1fr}.by .by-row3{grid-template-columns:1fr 2fr 1fr}}
@media (max-width:639.98px){.by-t thead{display:none}.by-t .q{width:5.5rem}.by-t th,.by-t td{padding:.625rem .25rem}}