/* The plan comparison table (Views/Shared/_PlanCompare.cshtml). */
.cmp-scroll { overflow-x: auto; max-width: 1180px; margin: 0 auto; padding: 18px 4px 6px; -webkit-overflow-scrolling: touch; }
.cmp-scroll:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 8px; }
.cmp-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 720px; background: #fff; border: 1px solid #E3E8EE; border-radius: 18px; color: var(--ink);
    /* clip, not hidden: "hidden" would make the table its own scroll box and break the sticky first column */
    overflow: clip; }
.cmp-table th, .cmp-table td { padding: 15px 14px; text-align: center; border-bottom: 1px solid #EEF1F4; font-size: 14.5px; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table tbody th[scope=row] { text-align: left; font-weight: 700; background: #FBF7DC; color: var(--ink); min-width: 170px; position: sticky; left: 0; z-index: 1; }
.cmp-corner { background: #fff; position: sticky; left: 0; z-index: 2; }
.cmp-plan { position: relative; padding-top: 34px !important; vertical-align: bottom; background: #fff; }
.cmp-name { font-size: 18px; font-weight: 800; }
.cmp-ribbon { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); background: #D9F26B; color: #1c2a00; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; padding: 3px 14px; border-radius: 4px; white-space: nowrap; }
.cmp-table td.featured, .cmp-table th.featured { background: #F1F3FF; }
.cmp-price td { background: #F4F7FD; }
.cmp-price td.featured { background: #E8ECFF; }
.cmp-was { display: block; color: #3B6FD8; font-size: 13px; opacity: .85; }
.cmp-now { display: block; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cmp-now small { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.cmp-bill { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.cmp-yes { color: #16A34A; font-weight: 800; font-size: 17px; }
.cmp-no { color: #B7C1CE; }
.cmp-btn { display: inline-block; background: #2563EB; color: #fff; font-weight: 700; font-size: 14px; padding: 10px 16px; border-radius: 8px; text-decoration: none; white-space: nowrap; }
.cmp-btn:hover { background: #1D4ED8; }
.cmp-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) {
    .cmp-table th, .cmp-table td { padding: 12px 10px; font-size: 13.5px; }
    .cmp-table tbody th[scope=row] { min-width: 130px; }
}