:root{--bg-main:#101115;--bg-second:#181C24;--bg-third:#222834;--bg-muted:#313847;--text-main:#FFFFFF;--text-second:#93948E;--text-body:#CFCFD0;--accent:#FFDA35;color-scheme:dark;font-family:'Satoshi-Variable','Satoshi',system-ui,sans-serif;font-size:14px}*{box-sizing:border-box}body{margin:0;background:var(--bg-main);color:var(--text-main)}body[data-topic="project-management"]{--accent:#BBA8FF}body[data-topic="email"]{--accent:#8EDBC8}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button{background:none;color:inherit;border:0}button,input,select,a{-webkit-tap-highlight-color:transparent}:focus-visible{outline:1px solid white;outline-offset:3px;border-radius:6px}.sidebar{position:fixed;inset:0 auto 0 0;width:232px;padding:28px 14px;border-right:1px solid var(--bg-third);background:var(--bg-main)}.sidebar nav{display:grid;gap:9px}.sidebar button{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:15px 13px;border-radius:8px;color:#B8BDC7;font-size:16px;line-height:1.4;white-space:nowrap}.sidebar button>span{width:18px;text-align:center;font-size:17px}.sidebar button:hover{background:var(--bg-second)}.sidebar button.active{color:var(--accent);background:var(--bg-third)}main{margin-left:232px;padding:28px 28px 50px;min-width:0}#settings{display:flex;align-items:flex-end;gap:14px;background:var(--bg-second);border:1px solid var(--bg-third);padding:17px 18px;border-radius:10px;margin:0 0 22px;white-space:nowrap;min-height:88px;overflow-x:auto}.control{display:flex;flex-direction:column;gap:8px;flex:none;min-width:0}.control-label{font-size:11px;font-weight:500;color:#B5BAC4;display:flex;gap:5px;align-items:center;line-height:1}.control select,.number-wrap{height:35px;border-radius:6px;background:var(--bg-main);border:1px solid var(--bg-muted);color:#E2E5EB}.control select{padding:0 26px 0 10px;font-size:12px;max-width:160px}.number-wrap{display:flex;align-items:center;gap:5px;width:86px;padding-right:8px}.number-wrap input{width:100%;min-width:0;background:none;border:0;color:#E2E5EB;height:33px;padding:0 7px 0 10px;font-size:12px;font-variant-numeric:tabular-nums}.number-wrap .suffix{font-size:9px;color:var(--text-second);pointer-events:none}.number-wrap.small{width:64px}.number-wrap.wide{width:112px}.info{color:#AEB5C2;border:1px solid #6A717F;border-radius:50%;width:12px;height:12px;display:inline-grid;place-items:center;padding:0;font-size:8px;line-height:1;flex:none}.toggle-control{min-width:74px}.toggle-wrap{height:35px;display:flex;align-items:center;gap:8px;cursor:pointer}.toggle-wrap input{appearance:none;-webkit-appearance:none;position:relative;width:32px;height:19px;margin:0;border-radius:20px;background:#3A4150;border:1px solid #535D70;cursor:pointer;flex:none}.toggle-wrap input:before{content:'';position:absolute;left:3px;top:3px;width:11px;height:11px;border-radius:50%;background:#B8C0CE;transition:transform .12s}.toggle-wrap input:checked{background:var(--accent);border-color:var(--accent)}.toggle-wrap input:checked:before{background:#101115;transform:translateX(13px)}.toggle-value{font-size:10px;color:var(--text-second)}.toggle-wrap:has(input:checked) .toggle-value{color:var(--text-body)}.comparison-scroll{overflow:auto;border-radius:0;scrollbar-color:#495267 var(--bg-main);scrollbar-width:thin}.comparison-table{border-collapse:separate;border-spacing:0;table-layout:fixed;width:max-content;font-size:12px;text-align:left}.comparison-table col.feature-col{width:166px}.comparison-table col.provider-col{width:248px}.comparison-table th,.comparison-table td{width:248px;vertical-align:top;line-height:1.65;border-right:1px solid var(--bg-third)}.comparison-table .feature-label{position:sticky;left:0;z-index:2;width:166px;background:var(--bg-main);color:#A7ADB8;font-size:11px;font-weight:500;padding:15px 16px 15px 2px;vertical-align:middle;border-right:1px solid var(--bg-muted);border-bottom:1px solid var(--bg-third)}.comparison-table thead .feature-label{border-bottom:0;border-right:0;vertical-align:bottom;padding-bottom:25px;color:var(--text-second)}.comparison-table .card-cell{padding:0 8px 24px;vertical-align:top;font-weight:400;border-right:0;background:var(--bg-main)}.price-card{border:1px solid var(--bg-muted);background:var(--bg-second);border-radius:10px;padding:19px 18px 16px;min-height:285px;display:flex;flex-direction:column;position:relative}.price-card.match{border-top:2px solid var(--accent);padding-top:18px}.provider{display:flex;gap:8px;align-items:center;font-size:16px;font-weight:650;letter-spacing:-.3px;min-width:0;margin-bottom:15px;line-height:1.35}.provider .name{min-width:0;overflow-wrap:anywhere}.mark{font-size:20px;font-weight:700;width:23px;display:inline-grid;place-items:center;flex:none;color:var(--provider)}.plan-select{width:100%;height:32px;background:var(--bg-main);border:1px solid var(--bg-muted);border-radius:5px;color:#D2D8E4;padding:0 23px 0 8px;font-size:10px;overflow:hidden;text-overflow:ellipsis}.plan-fixed{padding:6px 0;color:var(--text-body);font-size:11px;border-bottom:1px solid var(--bg-muted)}.price{font-size:31px;letter-spacing:-1px;font-weight:650;line-height:1.15;margin-top:17px;white-space:nowrap}.price .from{display:block;font-size:9px;color:var(--text-second);font-weight:400;letter-spacing:0;margin-bottom:3px}.price .unit{font-size:11px;font-weight:400;letter-spacing:0;color:var(--text-second);margin-left:2px}.price.non-price{font-size:21px;letter-spacing:-.4px;white-space:normal;color:#BCC4D2}.billing-note{font-size:9px;line-height:1.55;color:var(--text-second);margin:6px 0 13px;min-height:27px;font-variant-numeric:tabular-nums}.card-facts{font-size:10px;line-height:1.7;color:#C5CBD5;display:grid;gap:3px;margin:0;padding:0;list-style:none}.card-facts li:before{content:'·';margin-right:6px;color:var(--text-second)}.card-notice{font-size:9px;line-height:1.6;margin-top:auto;padding-top:12px;color:#B7BFCE}.card-notice.discount{color:var(--accent)}.card-notice.warning{color:#E7C68E}.comparison-table tbody td{padding:12px 16px;border-bottom:1px solid var(--bg-third);font-size:15px;color:#D5DAE3;background:var(--bg-second);overflow-wrap:anywhere}.comparison-table tbody tr:first-child>th,.comparison-table tbody tr:first-child>td{border-top:1px solid var(--bg-muted)}.comparison-table tbody tr:hover td{background:#1E232E}.comparison-table tbody .section-row th{position:sticky;left:0;background:var(--bg-main);font-size:10px;letter-spacing:.6px;text-transform:uppercase;padding:25px 0 10px;color:var(--text-second);border:0;font-weight:550}.comparison-table tbody .section-row td{background:var(--bg-main);border:0}.comparison-table small{display:block;color:var(--text-second);font-size:13px;line-height:1.6;margin-top:3px}.yes{color:#66D99A}.no{color:#F47C7C}.unknown{color:var(--text-second)}.status{font-size:14px}.status.match{color:var(--accent)}.status.partial{color:#DFC18F}.status.unsupported{color:#A8AFBC}.cell-tip{border-bottom:1px dotted #4B556A;cursor:help}.loading{color:var(--text-second);font-size:12px;padding:15px 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;left:10px;top:-100px;background:var(--accent);color:#101115;padding:12px;z-index:100}.skip:focus{top:10px}#tooltip{position:fixed;z-index:50;max-width:min(330px,90vw);background:#313847;color:#fff;border:1px solid #626C7F;border-radius:7px;padding:11px 13px;font-size:11px;line-height:1.65;box-shadow:0 10px 30px #0008}
@media(min-width:1700px){#settings{gap:22px}.control select{max-width:178px}.number-wrap{width:98px}.number-wrap.small{width:72px}.price-card{min-height:280px}}
@media(max-width:1250px){.sidebar{width:214px;padding:24px 10px}.sidebar button{font-size:15px;padding:14px 11px;gap:9px}main{margin-left:214px;padding:24px 20px 40px}#settings{gap:12px;padding:16px 14px}.control select{font-size:11px;max-width:148px}.number-wrap{width:75px}.number-wrap.small{width:58px}.toggle-control{min-width:67px}.comparison-table col.feature-col{width:145px}.comparison-table .feature-label{width:145px}.comparison-table col.provider-col,.comparison-table th,.comparison-table td{width:236px}}
@media(max-width:1000px){#settings{flex-wrap:wrap;overflow-x:visible}.sidebar{width:190px}.sidebar button{font-size:14px;gap:8px;padding:13px 8px}main{margin-left:190px;padding:20px 16px 35px}.comparison-table col.feature-col,.comparison-table .feature-label{width:132px}.comparison-table col.provider-col,.comparison-table th,.comparison-table td{width:225px}.price-card{padding:17px 15px;min-height:285px}.price-card.match{padding-top:16px}.provider{font-size:15px}.price{font-size:29px}}
@media(max-width:700px){.sidebar{position:sticky;inset:0;top:0;z-index:10;width:100%;padding:12px 14px;border-right:0;border-bottom:1px solid var(--bg-third)}.sidebar nav{display:flex;gap:5px}.sidebar button{width:auto;flex:1;justify-content:center;gap:6px;padding:10px 7px;font-size:12px;white-space:nowrap}.sidebar button>span{font-size:14px;width:14px}main{margin-left:0;padding:18px 14px 35px}#settings{padding:14px;gap:15px 14px;min-height:0;margin-bottom:18px;border-radius:8px}.control-label{font-size:10px}.control select{font-size:11px;max-width:150px}.number-wrap{width:80px}.number-wrap.small{width:61px}.number-wrap.wide{width:112px}.toggle-control{min-width:67px}.comparison-table col.feature-col,.comparison-table .feature-label{width:108px}.comparison-table col.provider-col,.comparison-table th,.comparison-table td{width:216px}.comparison-table .card-cell{padding:0 6px 19px}.comparison-table .feature-label{font-size:10px;padding-right:10px}.comparison-table tbody td{font-size:14px;padding:11px}.price-card{padding:16px 14px;min-height:278px}.price-card.match{padding-top:15px}.provider{font-size:14px}.price{font-size:29px}.comparison-table small{font-size:13px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Full-width comparison with a compact, independent navigation widget. */
main{margin-left:0;padding:22px 24px 48px}.comparison-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;min-height:48px}.navigation-widget{background:var(--bg-second);border:1px solid var(--bg-muted);border-radius:12px;padding:5px;max-width:100%}.navigation-widget nav{display:flex;gap:4px}.navigation-widget button{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:7px;color:#B8BDC7;font-size:16px;white-space:nowrap;line-height:1.35;transition:background .16s,color .16s}.navigation-widget button>span{width:18px;text-align:center}.navigation-widget button:hover{background:var(--bg-third)}.navigation-widget button.active{color:var(--accent);background:var(--bg-third)}.visibility-widget{position:relative;flex:none}#hidden-button{color:var(--text-body);font-size:12px;padding:9px 12px;border:1px solid var(--bg-muted);border-radius:7px}#hidden-button:disabled{visibility:hidden}#hidden-button:hover{background:var(--bg-second)}.comparison-table col.feature-col,.comparison-table .feature-label{width:204px}.comparison-table .feature-label{padding-left:3px;padding-right:12px}.row-label{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px}.row-label>span{min-width:0}.drag-handle{display:inline-flex;align-items:center;justify-content:center;width:26px;height:28px;flex:none;border-radius:5px;color:#6D7688;touch-action:none;cursor:grab;user-select:none;transition:color .15s,background .15s}.drag-handle:hover,.drag-handle:focus-visible{color:var(--accent);background:var(--bg-third)}.columns-handle{position:absolute;right:8px;top:8px}.price-card .provider{padding-right:20px}.row-label .drag-handle{width:23px;height:25px}.is-dragging,.is-dragging *{cursor:grabbing!important;user-select:none!important}.is-dragging #tooltip{display:none}.comparison-table .drag-origin{opacity:.25;transition:opacity .16s}.comparison-table .drag-shift{transition:transform .2s cubic-bezier(.2,.8,.2,1);position:relative;z-index:3}.comparison-table tr.drag-shift{z-index:auto}.comparison-table tr.drag-origin{opacity:.25}.drag-ghost{position:fixed;left:0;top:0;z-index:100;pointer-events:none;will-change:transform;filter:drop-shadow(0 18px 24px #0008);opacity:.96}.drag-ghost .price-card{border-color:var(--accent);min-height:260px}.drag-ghost .drag-handle{color:var(--accent)}.drag-ghost.rows{padding:13px 18px;border:1px solid var(--accent);background:var(--bg-third);color:white;border-radius:8px;font-size:13px}.drop-guide{position:fixed;pointer-events:none;z-index:90;background:var(--accent);border-radius:4px;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent),0 0 20px color-mix(in srgb,var(--accent) 28%,transparent);transition:left .15s,top .15s;animation:guide-in .14s ease-out}.drop-guide.columns{width:3px}.drop-guide.rows{height:3px}.drop-guide:before,.drop-guide:after{content:'';position:absolute;width:8px;height:8px;background:var(--accent);border-radius:50%}.drop-guide.columns:before{left:-2.5px;top:0}.drop-guide.columns:after{left:-2.5px;bottom:0}.drop-guide.rows:before{left:0;top:-2.5px}.drop-guide.rows:after{right:0;top:-2.5px}@keyframes guide-in{from{opacity:0}to{opacity:1}}.layout-menu{position:fixed;z-index:110;min-width:215px;max-width:min(350px,calc(100vw - 16px));max-height:min(420px,calc(100vh - 16px));overflow:auto;background:#222834;border:1px solid #46516A;border-radius:10px;padding:5px;box-shadow:0 15px 50px #0008}.layout-menu[hidden]{display:none}.layout-menu button{display:flex;flex-direction:column;text-align:left;gap:3px;width:100%;padding:10px 12px;font-size:12px;line-height:1.4;border-radius:5px}.layout-menu button:hover,.layout-menu button:focus-visible{background:var(--bg-muted)}.layout-menu button:disabled{color:#737B8A;cursor:default}.layout-menu small{color:#A9B2C2;font-size:10px}#hidden-menu{position:absolute;right:0;top:calc(100% + 8px);width:260px}.empty-comparison{padding:50px 0;color:var(--text-second)}.empty-comparison button{color:var(--accent);text-decoration:underline;margin-left:6px}
@media(max-width:1250px){main{margin-left:0;padding:20px 18px 40px}.comparison-table col.feature-col,.comparison-table .feature-label{width:180px}}
@media(max-width:1000px){main{margin-left:0;padding:18px 16px 35px}.comparison-table col.feature-col,.comparison-table .feature-label{width:160px}}
@media(max-width:700px){main{padding:14px 12px 35px}.comparison-toolbar{gap:6px;margin-bottom:14px;flex-wrap:wrap}.navigation-widget{padding:4px}.navigation-widget nav{gap:2px}.navigation-widget button{gap:6px;padding:10px 9px;font-size:13px}.navigation-widget button>span{width:14px;font-size:13px}.comparison-table col.feature-col,.comparison-table .feature-label{width:136px}.comparison-table .feature-label{padding-right:6px}.row-label{gap:2px}.row-label .drag-handle{width:22px}.columns-handle{top:8px;right:5px}#hidden-button{padding:7px 9px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.drop-guide{animation:none}.drag-ghost{filter:none}}

/* The navigation occupies the same left rail as the feature labels. */
:root{--feature-width:204px}
main{display:grid;grid-template-columns:var(--feature-width) minmax(0,1fr);column-gap:8px;align-items:start}
.comparison-toolbar{grid-column:1;grid-row:1 / 3;align-self:start;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:14px;margin:0;padding:0 10px 12px 0;min-height:0;position:relative;z-index:5;background:var(--bg-main)}
.navigation-widget{background:none;border:0;border-radius:0;padding:0;width:100%}
.wordmark{font-size:23px;line-height:1.2;letter-spacing:-.8px;font-weight:750;padding:0 3px;margin:0 0 23px;white-space:nowrap}
.navigation-widget nav{display:flex;flex-direction:column;gap:7px}
.navigation-widget button{width:100%;padding:12px 10px;text-align:left;font-size:16px;gap:10px;white-space:normal;min-height:46px}
.navigation-widget button>span{flex:none}
.visibility-widget{align-self:flex-start;margin-left:3px}
#hidden-menu{left:0;right:auto;max-width:calc(100vw - 48px)}
#settings{grid-column:2;grid-row:1;margin:0 0 22px;min-width:0}
#comparison{grid-column:1 / -1;grid-row:2;min-width:0}
.comparison-table col.feature-col,.comparison-table .feature-label{width:var(--feature-width)}
.empty-comparison{margin-left:calc(var(--feature-width) + 8px)}
@media(max-width:1250px){:root{--feature-width:180px}.wordmark{font-size:21px}.navigation-widget button{font-size:15px;padding:11px 8px;gap:8px}.comparison-toolbar{padding-right:7px}}
@media(max-width:1000px){:root{--feature-width:160px}.wordmark{font-size:20px}.navigation-widget button{font-size:14px;padding:10px 7px;gap:7px}}
@media(max-width:700px){:root{--feature-width:136px}main{column-gap:6px}.comparison-toolbar{margin:0;gap:12px;padding-right:5px;flex-wrap:nowrap}.wordmark{font-size:18px;letter-spacing:-.6px;padding-left:1px;margin-bottom:18px}.navigation-widget{padding:0}.navigation-widget nav{gap:6px}.navigation-widget button{padding:10px 6px;font-size:13px;gap:6px;min-height:43px}.navigation-widget button>span{width:14px}.visibility-widget{margin-left:1px}#settings{margin-bottom:18px;padding:13px 11px;gap:15px 11px}#settings .control{max-width:100%}#settings .control select{max-width:100%}#hidden-menu{max-width:calc(100vw - 24px)}}
/* Category-specific accents share the established dark comparison styling. */
:root{--accent-hosting:#FFDA35;--accent-project-management:#BBA8FF;--accent-email:#8EDBC8;--accent-email-marketing:#FFAC80;--accent-business-messaging:#8DC7FF;--accent-business-finance:#9FDF9D;--accent-ai-note-takers:#E5A7DB;--accent-email-clients:#9EB4FF}
body[data-topic="email-marketing"]{--accent:var(--accent-email-marketing)}body[data-topic="business-messaging"]{--accent:var(--accent-business-messaging)}body[data-topic="business-finance"]{--accent:var(--accent-business-finance)}body[data-topic="ai-note-takers"]{--accent:var(--accent-ai-note-takers)}body[data-topic="email-clients"]{--accent:var(--accent-email-clients)}body[data-topic="selections"]{--accent:#FFDA35}
[hidden]{display:none!important}.navigation-widget button .nav-label{width:auto;min-width:0;flex:1;text-align:left}.navigation-widget button small{font-size:10px;color:var(--text-second);flex:none}.navigation-widget .selections-tab{margin-bottom:9px;border:1px solid var(--bg-muted)}.navigation-widget nav{gap:5px}.navigation-widget button{font-size:15px;min-height:42px;padding:10px 8px;gap:8px}.wordmark{margin-bottom:19px}.comparison-table thead .feature-label{height:var(--comparison-head-height,450px)}.price-card .save-setup{display:flex;gap:8px;align-items:center;padding-top:13px;margin-top:14px;border-top:1px solid var(--bg-muted);color:var(--text-body);font-size:11px;cursor:pointer}.save-setup input{width:15px;height:15px;margin:0;flex:none;accent-color:var(--accent);cursor:pointer}.price-card.is-selected{box-shadow:0 0 0 1px var(--accent)}.is-selected .save-setup{color:var(--accent)}
#selection-summary{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;margin-bottom:22px;padding:14px 18px;background:var(--bg-second);border:1px solid var(--bg-third);border-radius:10px;color:var(--text-second);font-size:12px}#selection-summary strong{font-size:17px;color:var(--text-main);margin-right:10px}#selection-summary>span:last-child{text-align:right;color:var(--text-main)}#selection-summary small{display:block;margin-top:4px;font-size:10px;color:var(--text-second)}body[data-topic="selections"] #comparison{grid-column:2;grid-row:2}.selections-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:22px 18px;align-items:start}.selection-slot{min-width:0}.selection-slot h2{font-size:12px;line-height:1.4;font-weight:550;color:var(--accent);margin:0 0 10px}.selection-slot .price-card{min-height:285px}.selection-slot .price-card .provider{padding-right:0}.selection-slot .price-card.is-selected{box-shadow:none}.saved-settings,.saved-features{padding:15px 0 0}.saved-label{font-size:10px;color:var(--text-second)}.selection-slot dl{margin:8px 0 0;font-size:10px;line-height:1.55}.selection-slot dl>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px;padding:7px 0;border-bottom:1px solid var(--bg-third)}.selection-slot dt{color:#A7ADB8}.selection-slot dd{color:var(--text-body);margin:0;text-align:right;overflow-wrap:anywhere}.saved-features summary{cursor:pointer;color:var(--text-second);font-size:11px;padding:3px 0}.slot-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:15px}.slot-actions button{font-size:10px;padding:7px 0;color:var(--text-second)}.slot-actions button:first-child{color:var(--accent)}.slot-actions button:hover{text-decoration:underline}.empty-slot{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:15px;min-height:285px;padding:20px;border:1px dashed var(--bg-muted);border-radius:10px;color:var(--text-second);font-size:12px}.empty-slot button{color:var(--accent);padding:0;font-size:11px}#storage-notice{grid-column:2;color:#E7C68E;font-size:11px;margin:0 0 12px}
@media(max-width:1250px){.navigation-widget button{font-size:14px;padding:10px 6px;gap:6px}.navigation-widget button small{font-size:9px}}@media(max-width:1000px){.navigation-widget button{font-size:13px}.navigation-widget button small{display:none}}@media(max-width:700px){.navigation-widget button{font-size:12px;line-height:1.4;padding:9px 5px;min-height:39px;gap:5px}.navigation-widget nav{gap:5px}.wordmark{margin-bottom:17px}.selections-grid{grid-template-columns:minmax(0,1fr);gap:24px}#selection-summary{padding:13px 11px;flex-direction:column;align-items:flex-start;gap:9px}#selection-summary>span:last-child{text-align:left}#selection-summary strong{font-size:15px}.selection-slot .price-card{padding:15px 12px}.empty-slot{min-height:220px;padding:14px}.selection-slot dl>div{gap:7px}.slot-actions{flex-wrap:wrap}}

/* Compact feature rows retain their label size; values are easier to read. */
.comparison-table tbody .feature-label{padding-top:13px;padding-bottom:13px}
.feature-mark{display:inline-block;min-width:1em;font-weight:650;text-align:left}
@media(max-width:700px){.comparison-table .status{font-size:14px}}

.row-title{cursor:help;text-decoration:underline dotted #4B556A;text-underline-offset:3px}
.feature-detail{display:inline-flex;align-items:baseline;gap:6px}.feature-detail>.feature-mark{flex:none}