body:has(.comparison-page){background:#f1f3f8;min-height:100vh;display:flex;flex-direction:column}
body:has(.comparison-page)>main{flex:1;min-width:0}
.comparison-page{padding-top:28px;padding-bottom:52px}
.comparison-page[aria-busy="true"]{pointer-events:none;user-select:none;cursor:progress}
.comparison-grid [data-column-motion]{transform-origin:left top;will-change:transform,opacity}
.comparison-column-ghost{position:fixed;overflow:hidden;pointer-events:none;z-index:25;contain:layout paint}
.comparison-column-ghost-track{position:absolute;top:0;height:100%;transform-origin:left top;will-change:transform,opacity}
.comparison-column-ghost-cell{position:absolute;left:0;box-sizing:border-box;overflow:hidden}
.comparison-banner{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#18243a;border-radius:22px;padding:28px 32px;color:#fff}
.comparison-banner h1{display:flex;align-items:center;gap:12px;font-size:30px;line-height:1.2;margin:0;letter-spacing:-.03em}
.comparison-banner h1>span{font-size:13px;font-weight:500;background:#2a3650;color:#bdc8de;border-radius:7px;padding:5px 9px;letter-spacing:0}
.comparison-add{background:#5b61ff;color:#fff;border:0;font-size:13px;padding:11px 17px;min-height:42px;white-space:nowrap}
.comparison-grid thead th.comparison-add-cell{vertical-align:middle;text-align:center}
.comparison-add-cell .comparison-add{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:96px;max-width:100%;min-height:80px;padding:12px 8px;border:1px solid #c7cbff;border-radius:10px;background:#eef0ff;color:#5b61ff;font-size:12px;line-height:1.4;box-shadow:none}
.comparison-add-cell .comparison-add:hover{background:#e2e5ff;border-color:#9ca2ff;transform:none}
.comparison-add-cell .comparison-add svg{width:14px;height:14px;flex-shrink:0}
.comparison-add:hover,.comparison-dialog-add:hover{background:#484eef}
.comparison-body{padding-top:22px}
.comparison-controls{display:flex;align-items:center;justify-content:space-between;gap:16px}
.comparison-controls>div{display:flex;gap:20px}
.comparison-controls .text-button{font-size:12px;color:#68758a}
.comparison-controls .text-button:hover{color:#5b61ff}
.comparison-difference{display:flex;align-items:center;gap:8px;font-size:12px;color:#263b66;cursor:pointer}
.comparison-difference input{width:16px;height:16px;accent-color:#5b61ff;margin:0}
.comparison-body .tariff-legend{font-size:11px;gap:18px;margin:18px 0 7px}
.comparison-body .tariff-help{font-size:11px;margin-bottom:18px;color:#78859a}
@property --comparison-scroll{syntax:"<length>";inherits:false;initial-value:0px}
.comparison-frame{border:1px solid transparent;border-top-width:4px;border-radius:14px;overflow:hidden;contain:paint;background-color:#fff;background-image:linear-gradient(#fff,#fff),linear-gradient(#5b61ff,#5b61ff),var(--comparison-accent,linear-gradient(#5b61ff,#5b61ff)),linear-gradient(#dfe4ee,#dfe4ee);background-origin:padding-box,border-box,border-box,border-box;background-clip:padding-box,border-box,border-box,border-box;background-size:auto,var(--comparison-pinned-width,230px) 14px,var(--comparison-accent-width,100%) 14px,auto;background-position:0 0,0 0,var(--comparison-scroll) 0,0 0;background-repeat:no-repeat}
.comparison-viewport{max-height:74vh;overflow:auto;isolation:isolate;scrollbar-color:#b7c1d1 #edf1f7}
.comparison-viewport:focus-visible{outline:2px solid #91a0ff;outline-offset:-2px}
.comparison-grid{border-spacing:0;table-layout:fixed;width:100%;min-width:calc(230px + var(--columns)*260px);font-size:12px}
.comparison-grid th,.comparison-grid td{padding:12px 14px;border-right:1px solid #e3e7ef;border-bottom:1px solid #e3e7ef;vertical-align:middle}
.comparison-grid tr>*:last-child{border-right:0}
.comparison-grid tbody tr:last-child>*{border-bottom:0}
.comparison-grid thead th{position:sticky;top:0;z-index:4;background:#f8f9fc;text-align:left;vertical-align:top;padding:18px 16px}
.comparison-grid thead th:first-child{left:0;width:230px;z-index:7;font-size:12px;padding:21px 14px;color:#263b66}
.comparison-grid tbody th{position:sticky;left:0;z-index:2;background:#fff;text-align:left;font-weight:550;color:#263b66}
.comparison-grid td{text-align:center;background:#fff}
.comparison-grid thead th:has(.comparison-tariff-menu[open]){z-index:8}
.comparison-product{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-right:20px;min-height:38px;font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.025em}
.comparison-product:hover{color:#5b61ff}
.comparison-mark{display:grid;place-items:center;background:var(--column-color);color:#fff;width:36px;height:36px;flex:0 0 36px;border-radius:10px;font-size:16px;letter-spacing:0}
.comparison-remove{position:absolute;top:12px;right:10px;display:grid;place-items:center;border:0;background:transparent;color:#8d99ac;width:25px;height:25px;font-size:21px;line-height:1;cursor:pointer;border-radius:6px}
.comparison-remove:hover{background:color-mix(in srgb,var(--column-color) 30%,white);color:var(--column-color)}
.comparison-tariff-menu{position:relative;margin-bottom:12px}
.comparison-tariff-menu>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #dde3ed;border-radius:8px;background:white;padding:8px 10px;cursor:pointer;list-style:none;font-size:12px;font-weight:600;line-height:1.35;color:#263b66}
.comparison-tariff-menu>summary::-webkit-details-marker{display:none}
.comparison-tariff-menu>summary:hover{border-color:#91a0ff}
.comparison-tariff-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.comparison-tariff-chevron{display:block;flex:0 0 14px;width:14px;height:14px;color:#78859a}
.comparison-tariff-menu[open] .comparison-tariff-chevron{transform:rotate(180deg)}
.comparison-tariff-list{position:absolute;z-index:10;top:calc(100% + 6px);left:0;width:100%;min-width:220px;max-height:300px;overflow:auto;background:#fff;border:1px solid #dde3ed;border-radius:10px;box-shadow:0 8px 24px #18243a25;padding:5px}
.comparison-tariff-choice{display:flex;align-items:stretch;border-radius:6px;min-height:40px}
.comparison-tariff-choice:not(:last-child){border-bottom:1px solid #e2e7ef}
.comparison-tariff-choice:hover{background:#f1f3f8}
.comparison-tariff-choice>button{border:0;background:transparent;text-align:left;padding:8px;cursor:pointer;min-width:0;color:#263b66;font-size:12px;line-height:1.4}
.comparison-tariff-choice>button:first-child{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px}
.comparison-tariff-choice span,.comparison-tariff-choice small{display:block}
.comparison-tariff-choice small{font-size:10px;color:#78859a;margin:0}
.comparison-tariff-choice small:empty{display:none}
.comparison-tariff-choice:has([aria-current=true]),.comparison-tariff-choice:has([aria-current=true]):hover{background:#eef0ff;box-shadow:inset 0 0 0 1px #a5a9ff}
.comparison-tariff-choice [aria-current=true]{color:#5b61ff;font-weight:600}
.comparison-tariff-choice .comparison-tariff-plus{flex:0 0 34px;align-self:stretch;display:flex;align-items:center;justify-content:center;padding:8px;color:#5b61ff}
.comparison-tariff-plus svg{display:block;width:14px;height:14px;flex-shrink:0}
.comparison-tariff-choice>button:disabled{opacity:.4;cursor:default}
.comparison-price{display:block;font-size:16px;line-height:1.4;color:#5b61ff;margin-bottom:10px}
.comparison-order{display:inline-flex;align-items:center;background:var(--column-color);color:#fff;padding:7px 11px;border-radius:7px;font-size:11px;font-weight:600;line-height:1.4}
.comparison-order:hover{filter:brightness(1.1)}
.comparison-grid .comparison-terms td{vertical-align:top;text-align:left;font-size:11px;line-height:1.7;color:#78859a}
.comparison-grid .comparison-group th{position:static;background:#e9edf5;font-size:12px;font-weight:700;padding:11px 14px}
.comparison-group-name{display:block;position:sticky;left:14px;width:max-content;max-width:202px;line-height:1.5}
.comparison-field-label{position:relative;padding-right:22px;line-height:1.6}
.comparison-field-help{display:inline}
.comparison-field-help>summary{position:absolute;right:0;top:1px;width:18px;height:18px;display:grid;place-items:center;color:#8d9bb2;cursor:pointer;list-style:none}
.comparison-field-help>summary::-webkit-details-marker{display:none}
.comparison-field-help>span{display:block;font-size:11px;font-weight:400;color:#69717b;line-height:1.6;margin-top:7px}
.comparison-cautions>summary{cursor:pointer;color:#263b66;font-size:11px}
.comparison-cautions ul{padding-left:16px;margin:10px 0 0}
.comparison-cautions li+li{margin-top:8px}
.comparison-source{color:#5b61ff;font-size:11px}
.comparison-no-difference{font-size:12px;color:#78859a;margin-top:14px}
.comparison-blank{padding:64px 24px;text-align:center;border:1px solid #dfe4ee;background:#fff;border-radius:14px}
.comparison-blank h2{font-size:24px;margin:0 0 10px;letter-spacing:-.025em}
.comparison-blank p{font-size:13px;color:#78859a;margin:0}
.comparison-dialog{width:min(460px,calc(100vw - 32px));padding:26px;border:1px solid #dfe4ee;border-radius:18px;color:#182435;background:#fff;box-shadow:0 24px 80px #18243a35;max-height:calc(100dvh - 40px);overflow:auto}
.comparison-dialog::backdrop,.comparison-loading::backdrop{background:#18243a70;backdrop-filter:blur(3px)}
html:has(.comparison-dialog[open],.comparison-loading[open]){overflow:hidden}
.comparison-dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:16px}
.comparison-dialog h2{margin:0;font-size:23px;letter-spacing:-.03em}
.comparison-dialog-heading button{width:30px;height:30px;border:0;border-radius:6px;background:#f1f3f8;font-size:22px;line-height:1;color:#78859a;cursor:pointer}
.comparison-dialog label{display:block;font-size:12px;color:#68758a;margin-bottom:16px}
.comparison-dialog select{display:block;width:100%;border:1px solid #dfe4ee;border-radius:8px;padding:11px 12px;font-size:14px;color:#182435;background:#f8f9fc;margin-top:7px}
.comparison-dialog-preview{background:#f1f3f8;border-radius:10px;padding:14px;margin:20px 0}
.comparison-dialog-preview strong{display:block;font-size:18px;color:#5b61ff}
.comparison-dialog-preview p{font-size:12px;line-height:1.6;color:#78859a;margin:6px 0 0}
.comparison-dialog .comparison-dialog-add{width:100%;background:#5b61ff;color:#fff;border:0;font-size:13px;min-height:44px}
.comparison-dialog-add:disabled{opacity:.4;cursor:default}
.comparison-dialog-message{font-size:12px;color:#78859a;margin:0 0 14px}
.comparison-page button:focus-visible,.comparison-page a:focus-visible,.comparison-tariff-menu>summary:focus-visible,.comparison-dialog button:focus-visible,.comparison-dialog select:focus-visible{outline:2px solid #91a0ff;outline-offset:3px}
@media(max-width:600px){
 .comparison-page{padding-top:16px;padding-bottom:32px}
 .comparison-banner{padding:22px 20px;border-radius:18px;gap:12px}
 .comparison-banner h1{font-size:22px;gap:8px;flex-wrap:wrap}
 .comparison-banner .comparison-add{font-size:12px;padding:10px 12px}
 .comparison-banner h1>span{font-size:11px;padding:3px 7px}
 .comparison-controls{align-items:flex-start;gap:12px}
 .comparison-controls>div{gap:8px;flex-direction:column;align-items:flex-end}
 .comparison-controls .text-button,.comparison-difference{font-size:11px}
 .comparison-body .tariff-legend{font-size:10px;gap:9px;margin-top:16px}
 .comparison-body .tariff-help{font-size:10px;line-height:1.6}
 .comparison-grid{min-width:calc(180px + var(--columns)*235px)}
 .comparison-grid thead th:first-child{width:180px;padding:18px 12px;font-size:11px}
 .comparison-grid th,.comparison-grid td{padding:12px}
 .comparison-grid tbody th{font-size:11px}
 .comparison-grid thead th{padding:16px 12px}
 .comparison-product{font-size:15px;gap:8px;padding-right:16px}
 .comparison-mark{width:32px;height:32px;flex-basis:32px;font-size:14px}
 .comparison-remove{right:7px;top:9px}
 .comparison-price{font-size:15px}
 .comparison-blank{padding:42px 20px}
 .comparison-blank h2{font-size:21px}
 .comparison-dialog{padding:22px}
}
.comparison-loading{position:fixed;inset:0;margin:auto;padding:0;border:0;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fff;box-shadow:0 4px 24px #18243526;cursor:progress}
.comparison-loading[hidden]{display:none}
.comparison-loading span{width:30px;height:30px;border:3px solid #e5e7ff;border-top-color:#5b61ff;border-radius:50%;animation:comparison-loading-spin .7s linear infinite}
@keyframes comparison-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.comparison-loading span{animation:none}}

/* Match the spacing of CRM tariff tables, including mobile overrides. */
.comparison-page .comparison-grid th,.comparison-page .comparison-grid td{padding:10px 12px}
.comparison-page .comparison-grid thead th,.comparison-page .comparison-grid thead th:first-child{padding:12px}
.comparison-page .comparison-group-name{left:12px}
.comparison-page button:focus-visible,.comparison-page a:focus-visible,.comparison-tariff-menu>summary:focus-visible,.comparison-dialog button:focus-visible,.comparison-dialog select:focus-visible{outline-color:#087f8b}

.comparison-page .comparison-grid .comparison-group th{padding:10px 12px}

.comparison-remove{padding:0;line-height:0;transition:color .15s,background-color .15s}.comparison-remove svg{display:block;width:16px;height:16px;pointer-events:none}