.dc { display: grid; gap: 18px; }
.seg { display: flex; background: var(--mist); border-radius: 48px; padding: 4px; }
.seg button { flex: 1; min-height: 44px; border: 0; border-radius: 48px; background: transparent; font: 500 15px var(--sans); color: var(--slate); cursor: pointer; }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.mode { display: grid; gap: 16px; }
.mode[hidden] { display: none; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.field { min-width: 0; display: grid; gap: 8px; font: 400 12px/1.3 var(--mono); text-transform: uppercase; color: var(--slate); }
.field input, .field select { width: 100%; min-height: 52px; padding: 0 14px; font: 600 18px var(--sans); color: var(--ink); background: var(--mist); border: 1.5px solid transparent; border-radius: 10px; text-transform: none; }
.field input:focus, .field select:focus { outline: none; border-color: var(--ink); }
.check { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--slate); }
.check input { width: 20px; height: 20px; accent-color: var(--ink); }
.big { background: var(--ink); color: var(--paper); border-radius: 24px; padding: 22px 24px; font: 700 clamp(40px, 8vw, 72px)/.95 var(--display); text-transform: uppercase; letter-spacing: -0.02em; }
.big em { font-style: normal; color: var(--mint); }
.big small { display: block; font: 400 13px var(--mono); color: var(--smoke); margin-top: 10px; letter-spacing: 0; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.facts div { background: var(--mist); border-radius: 16px; padding: 12px 14px; }
.facts b { display: block; font: 700 30px/1 var(--display); }
.facts span { font: 400 11px var(--mono); text-transform: uppercase; color: var(--slate); }