.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plans { padding-block: 40px 72px; }
.plans-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 3px; }
.seg-btn { border: 0; background: transparent; padding: 8px 18px; border-radius: 999px; font: 600 14px var(--f-body); cursor: pointer; color: var(--ink-2); }
.seg-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.plans-note { font-size: 12px; color: var(--ink-2); }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px; display: grid; gap: 14px; align-content: start; transition: border-color .2s, transform .2s; }
.plan:hover, .plan:focus-within { border-color: var(--accent); transform: translateY(-3px); }
.plan.pop { border-color: var(--accent); box-shadow: var(--shadow); }
.plan-tag { font: 600 11px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--collapse); min-height: 1em; }
.plan h3 { font-size: 1.5rem; }
.plan-sub { color: var(--ink-2); font-size: 14px; min-height: 3em; }
.plan-price { font: 800 clamp(2.2rem, 4vw, 3rem)/1 var(--f-display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.plan-price small { display: block; font: 400 12px var(--f-mono); letter-spacing: 0; color: var(--ink-2); margin-top: 8px; }
.plan ul { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 14px; }
.plan li { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 8px; }
.plan li .st { font: 600 13px var(--f-mono); }
.plan li .st.on { color: var(--good); } .plan li .st.off { color: var(--bad); } .plan li .st.maybe { color: var(--warn); }
.plan .btn { justify-self: start; }
.fineprint { margin-top: 20px; font: 400 12px/1.5 var(--f-mono); color: var(--ink-2); max-width: 80ch; }

.calc-sec { background: var(--surface-2); }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; align-items: start; }
.calc-in, .calc-out, .sales-form, .sales-ok { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: grid; gap: 16px; }
label { display: grid; gap: 6px; font: 600 13px var(--f-body); }
input, select, textarea { font: 400 16px var(--f-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; min-width: 0; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hint { font-size: 12px; color: var(--ink-2); }
.calc-total { display: grid; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.calc-total span { font-size: 12px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .1em; }
.calc-total b { font: 800 clamp(2.2rem, 5vw, 3.2rem)/1 var(--f-display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.calc-lines { display: grid; gap: 8px; }
.calc-lines .kv span:last-child { font-family: var(--f-mono); }
.calc-lines .sur span:first-child { color: var(--collapse); font-weight: 600; }
.calc-foot { font-size: 12px; color: var(--ink-2); }

.cmp-scroll { max-height: 560px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.cmp { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.cmp thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); text-align: center; font: 600 12px var(--f-mono); text-transform: uppercase; letter-spacing: .08em; padding: 14px 12px; border-bottom: 1px solid var(--line); }
.cmp thead th:first-child, .cmp tbody th { text-align: left; }
.cmp tbody th { font-weight: 500; padding: 13px 14px; }
.cmp td { text-align: center; padding: 13px 12px; font: 600 15px var(--f-mono); }
.cmp tbody tr > * { border-top: 1px solid var(--line); }
.cmp tbody tr:first-child > * { border-top: 0; }
.cmp tbody tr:hover > *, .cmp tbody tr:focus-within > * { background: color-mix(in srgb, var(--collapse) 9%, transparent); }
.cmp .on { color: var(--good); } .cmp .off { color: var(--bad); } .cmp .maybe { color: var(--warn); }

.addon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.addon { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: grid; gap: 8px; align-content: start; }
.addon:hover { border-color: var(--ink-2); }
.addon p { color: var(--ink-2); font-size: 14.5px; }
.addon .ap { font: 800 24px var(--f-display); letter-spacing: -0.02em; }
.addon .ap small { font: 400 12px var(--f-mono); color: var(--ink-2); letter-spacing: 0; }

.sales { background: var(--surface-2); }
.sales-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.sales-form .btn { justify-self: start; }
.form-err { color: var(--bad); font-size: 14px; }
.sales-ok h3 { font-size: 1.6rem; }
.sales-ok p { color: var(--ink-2); }
.sales-ok:focus { outline: none; }
.quote { display: grid; gap: 4px; border: 1px dashed var(--line); border-radius: 12px; padding: 14px; }
.quote span { font-size: 12px; color: var(--ink-2); }
.quote b { font: 800 28px var(--f-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
[hidden] { display: none !important; }

@media (max-width: 900px) {
  .plan-grid, .addon-grid { grid-template-columns: minmax(0, 1fr); }
  .calc, .sales-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}