/* TruCost Instances — styles for the public calculator pages (scoped under .ix). Brand tokens come from base.html. */
.ix{--ix-bg:#fff;--ix-bg2:#f6f8fb;--ix-line:#e2e8f0;--ix-text:#0b1220;--ix-muted:#64748b;--ix-soft:#e6f7fd;--ix-brand:#27b4e5;--ix-deep:#0d86b0;--ix-good:#059669;--ix-bad:#dc2626;--ix-warn:#b45309;
  color:var(--ix-text);font-size:14px;line-height:1.45}
.ix.dark{--ix-bg:#0f172a;--ix-bg2:#1e293b;--ix-line:#334155;--ix-text:#e2e8f0;--ix-muted:#94a3b8;--ix-soft:#1e3a4a;--ix-good:#34d399;--ix-bad:#f87171;--ix-warn:#fbbf24;
  background:#0b1220;border-radius:18px;padding:14px;margin-top:-14px}
.ix h2{font-size:17px;margin:0 0 6px} .ix h2 small{font-weight:600;color:var(--ix-muted);font-size:12.5px}
.ix .card{padding:18px 18px;background:var(--ix-bg);border-color:var(--ix-line);color:var(--ix-text)} .ix .card+.card{margin-top:14px}
.ix .fine{color:var(--ix-muted);font-size:12.5px} .ix a{color:var(--ix-deep)} .ix.dark a{color:var(--ix-brand)}
.ix-hero .ix-region{display:block;color:#c7d2fe;font-weight:600;font-size:.55em;margin-top:6px} .ix-hero .lead{max-width:760px}
.ix-hero .ix-headline{font-size:20px;color:#fff;margin:6px 0 0} .ix-hero .ix-headline small{color:#94a3b8;font-size:14px}
.ix-crumbs{font-size:13px;color:#94a3b8;margin-bottom:10px} .ix-crumbs a{color:#c7d2fe;text-decoration:none} .ix-crumbs a:hover{text-decoration:underline}
.ix-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px} .ix-tabs a{padding:6px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.25);color:#e2e8f0;text-decoration:none;font-weight:600;font-size:13.5px}
.ix-tabs a.on,.ix-tabs a:hover{background:var(--brand);border-color:transparent;color:#04212c}
.ix-badge{display:inline-block;padding:1px 8px;border-radius:99px;font-size:11px;font-weight:700;background:var(--ix-bg2);color:var(--ix-muted);vertical-align:middle;border:1px solid var(--ix-line)}
.ix-badge.good{background:#ecfdf5;color:#065f46;border-color:#a7f3d0} .ix.dark .ix-badge.good{background:#064e3b;color:#a7f3d0;border-color:#065f46}
.ix-hero .ix-badge{background:rgba(255,255,255,.12);color:#e2e8f0;border-color:rgba(255,255,255,.2)} .ix-hero .ix-badge.good{background:rgba(16,185,129,.2);color:#a7f3d0;border-color:transparent}
/* toolbar */
.ix-bar{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;background:var(--ix-bg);border:1px solid var(--ix-line);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.ix label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--ix-muted);margin:0}
.ix select,.ix input[type=search],.ix input[type=number],.ix input[type=text]{height:36px;padding:0 10px;font-size:14px;border-radius:9px;border:1px solid var(--ix-line);background:var(--ix-bg);color:var(--ix-text);width:auto;min-width:0}
.ix input[type=search]{min-width:220px} .ix input[type=number]{width:96px}
.ix .btn{padding:8px 12px;font-size:13.5px;border-radius:9px;height:36px;background:var(--ix-bg);color:var(--ix-text);border-color:var(--ix-line)} .ix .btn.on{border-color:var(--ix-brand);color:var(--ix-deep)}
.ix .btn.primary{background:var(--ix-brand);color:#04212c;border-color:transparent} .ix .btn.sm{height:28px;padding:4px 9px;font-size:12px}
.ix .btn.link{border:0;background:none;color:var(--ix-deep);padding:0;height:auto;font-weight:600;box-shadow:none;transform:none}
.ix-seg{display:inline-flex;border:1px solid var(--ix-line);border-radius:9px;padding:2px;background:var(--ix-bg2)} .ix-seg button{border:0;background:none;padding:4px 10px;border-radius:7px;font:inherit;font-size:12.5px;font-weight:700;color:var(--ix-muted);cursor:pointer}
.ix-seg button[aria-pressed=true]{background:var(--ix-bg);color:var(--ix-text);box-shadow:0 1px 2px rgba(2,6,23,.15)}
.ix-panel{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;background:var(--ix-bg);border:1px solid var(--ix-line);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.ix-panel .span{grid-column:1/-1} .ix-panel .range{display:flex;align-items:center;gap:6px} .ix-panel .range input{width:100%}
.ix-chips{display:flex;flex-wrap:wrap;gap:6px} .ix-chips button{border:1px solid var(--ix-line);background:var(--ix-bg);color:var(--ix-muted);border-radius:99px;padding:3px 10px;font:inherit;font-size:12px;cursor:pointer}
.ix-chips button[aria-pressed=true]{border-color:var(--ix-brand);background:var(--ix-soft);color:var(--ix-deep)}
.ix-checks{display:flex;flex-wrap:wrap;gap:8px 18px} .ix-checks label{flex-direction:row;align-items:center;gap:6px;font-weight:600;color:var(--ix-text);font-size:13.5px} .ix-checks input{width:15px;height:15px;accent-color:var(--ix-brand)}
@media(max-width:800px){.ix-panel{grid-template-columns:1fr 1fr}} @media(max-width:520px){.ix-panel{grid-template-columns:1fr}}
.ix-status{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:12.5px;color:var(--ix-muted);margin:6px 2px 8px} .ix-status .pillbtn{background:var(--ix-brand);color:#04212c;border:0;border-radius:99px;padding:4px 12px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
/* virtual table */
.ix-scroll{overflow:auto;border:1px solid var(--ix-line);border-radius:14px;background:var(--ix-bg);height:640px;max-height:75vh;position:relative}
.ix-grid-t{border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:13.5px;min-width:100%}
.ix-grid-t th{position:sticky;top:0;z-index:2;background:var(--ix-bg2);color:var(--ix-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:0 10px;height:40px;border-bottom:1px solid var(--ix-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ix-grid-t th button{border:0;background:none;font:inherit;color:inherit;cursor:pointer;padding:0;letter-spacing:inherit;text-transform:inherit;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ix-grid-t th button.on{color:var(--ix-deep)}
.ix-grid-t td{padding:0 10px;height:40px;border-bottom:1px solid var(--ix-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--ix-bg)}
.ix-grid-t tr:nth-child(even) td{background:var(--ix-bg2)} .ix-grid-t tr.sel td{background:var(--ix-soft)} .ix-grid-t tr.spacer td{padding:0;height:auto;border:0}
.ix-grid-t .r{text-align:right;font-variant-numeric:tabular-nums} .ix-grid-t th.sticky,.ix-grid-t td.sticky{position:sticky;left:0;z-index:1} .ix-grid-t th.sticky{z-index:3}
.ix-grid-t td a{font-weight:700;text-decoration:none} .ix-grid-t td a:hover{text-decoration:underline} .ix-grid-t input[type=checkbox]{width:14px;height:14px;accent-color:var(--ix-brand);margin-right:6px;vertical-align:-2px}
.ix-grid-t .dim{color:var(--ix-line)} .ix-grid-t .hl{font-weight:700}
.ix-empty{padding:40px;text-align:center;color:var(--ix-muted)}
/* static tables */
.ix-t{width:100%;border-collapse:collapse;font-size:13.5px} .ix-t th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ix-muted);padding:6px 8px;border-bottom:1px solid var(--ix-line)}
.ix-t td{padding:6px 8px;border-bottom:1px solid var(--ix-line);vertical-align:top} .ix-t .r{text-align:right;font-variant-numeric:tabular-nums} .ix-t tr.cur td{background:var(--ix-soft)}
.ix-t .good{color:var(--ix-good)} .ix-t .bad{color:var(--ix-bad)} .ix-t small{color:var(--ix-muted)} .ix-t small.warn{color:var(--ix-warn);white-space:nowrap} .ix-t tr.best td{background:var(--ix-soft)}
.ix-t td .tag{font-size:10px;text-transform:uppercase;color:var(--ix-muted);margin-left:4px}
.ix-grid{margin:14px 0} .ix-grid .card{margin:0} .ix-grid>.card{overflow:auto}
.ix-dl{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 24px;margin:0;font-size:13.5px} .ix-dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--ix-line);padding:5px 0}
.ix-dl dt{color:var(--ix-muted)} .ix-dl dd{margin:0;font-weight:600;text-align:right} @media(max-width:960px){.ix-dl{grid-template-columns:1fr 1fr}} @media(max-width:560px){.ix-dl{grid-template-columns:1fr}}
.ix-list{margin-top:16px;background:var(--ix-bg);border:1px solid var(--ix-line);border-radius:14px;padding:12px 16px} .ix-list summary{cursor:pointer;font-weight:700}
.ix-list ul{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:2px 20px;font-size:13px;color:var(--ix-muted)} .ix-list li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ix-list a{font-weight:700;text-decoration:none}
@media(max-width:960px){.ix-list ul{grid-template-columns:1fr 1fr}} @media(max-width:560px){.ix-list ul{grid-template-columns:1fr}}
.ix-axes{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin-bottom:12px} .ix-embed code{display:block;background:var(--ix-bg2);padding:10px 12px;border-radius:9px;font-size:12px;overflow:auto;white-space:pre-wrap;word-break:break-all}
.ix-foot{margin-top:14px}
/* estimate card */
.ix-est{background:var(--ix-bg);border:1px solid var(--ix-line);border-radius:14px;padding:16px 18px;margin-bottom:14px}
.ix-est .head{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end} .ix-est .head h2{margin:0} .ix-est .head .ctl{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.ix-est .presets{display:flex;gap:4px} .ix-est .presets button{height:36px;border:1px solid var(--ix-line);background:var(--ix-bg);color:var(--ix-muted);border-radius:9px;padding:0 9px;font:inherit;font-size:12px;cursor:pointer} .ix-est .presets button.on{border-color:var(--ix-brand);background:var(--ix-soft);color:var(--ix-deep)}
.ix-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0} .ix-stat{border:1px solid var(--ix-line);border-radius:12px;padding:10px 12px;background:var(--ix-bg2)} .ix-stat.accent{border-color:var(--ix-brand);background:var(--ix-soft)}
.ix-stat .l{font-size:12px;color:var(--ix-muted)} .ix-stat .v{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ix-text)} .ix-stat .s{font-size:12px;color:var(--ix-muted)}
@media(max-width:720px){.ix-stats{grid-template-columns:1fr}}
/* compare drawer + estimate tray */
.ix-modal{position:fixed;inset:0;z-index:60;background:rgba(2,6,23,.55);display:flex;align-items:flex-end;justify-content:center;padding:0} @media(min-width:640px){.ix-modal{align-items:center;padding:24px}}
.ix-modal .box{background:var(--ix-bg);color:var(--ix-text);width:100%;max-width:1100px;max-height:92vh;overflow:auto;border-radius:18px 18px 0 0;padding:16px 18px} @media(min-width:640px){.ix-modal .box{border-radius:18px}}
.ix-modal .box .x{float:right;border:0;background:none;font-size:22px;cursor:pointer;color:var(--ix-muted)}
.ix-tray{position:fixed;right:16px;bottom:16px;z-index:50;width:min(560px,calc(100vw - 32px));max-height:70vh;overflow:auto;background:var(--ix-bg);color:var(--ix-text);border:1px solid var(--ix-line);border-radius:16px;box-shadow:var(--shadow);padding:14px 16px}
.ix-tray-btn{position:fixed;right:16px;bottom:16px;z-index:50;background:var(--ix-brand);color:#04212c;border:0;border-radius:99px;padding:10px 16px;font:inherit;font-weight:800;box-shadow:var(--shadow);cursor:pointer}
.ix-tray input[type=number]{width:70px;height:30px} .ix-tray .row{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap} .ix-tray .msg{font-size:12.5px} .ix-tray .msg.err{color:var(--ix-bad)}
.ix-embed-page{padding:12px} .ix-card{border:1px solid #e2e8f0;border-radius:14px;padding:14px 16px;font-size:13.5px} .ix-card .t{font-size:18px;font-weight:800;color:var(--ix-deep);text-decoration:none}
.ix-card dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 0} .ix-card dl div{background:#f6f8fb;border-radius:9px;padding:6px 10px} .ix-card dt{font-size:11px;color:#64748b} .ix-card dd{margin:0;font-weight:800;font-variant-numeric:tabular-nums}
.ix-card .pb{display:flex;justify-content:space-between;font-size:11px;color:#64748b;margin-top:12px} .ix-card .pb a{font-weight:800;text-decoration:none}
.ix .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* usage scenario bar (calculator, compare drawer) */
.ix-scn{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end} .ix-scn .presets button{padding:6px 12px;font-size:13px} .ix-scn input[type=number]{width:88px}
/* calculator panel above the table */
.ix-calc{background:var(--ix-bg);border:1px solid var(--ix-brand);box-shadow:0 0 0 4px rgba(39,180,229,.12);border-radius:18px;padding:18px 20px 14px;margin:0 0 22px}
.ix-calc .eyebrow{margin-bottom:4px} .ix-calc-head{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-start;margin-bottom:12px} .ix-calc-head>div{flex:1;min-width:260px} .ix-calc-head h2{font-size:22px;margin:0 0 6px} .ix-calc-head .fine{margin:0;max-width:620px}
.ix-calc-head input[type=search]{min-width:260px;font-weight:700;height:40px} .ix-calc .ix-est{border:0;padding:0;margin:0;background:transparent} .ix-calc-foot{margin-top:6px}
.ix-h{font-size:20px;margin:0 0 10px} .ix-h small{display:block;font-size:13px;font-weight:600;color:var(--ix-muted);margin-top:2px}
.ix .muted{color:var(--ix-muted)}
/* compare & decide */
.ix-verdict{display:flex;gap:10px;align-items:flex-start;background:var(--ix-soft);border:1px solid var(--ix-brand);border-radius:12px;padding:10px 14px;margin:12px 0 8px;font-size:14px;line-height:1.5}
.ix-verdict .ix-badge{flex:none;margin-top:2px}
.ix-cmp-wrap{overflow:auto;margin-top:10px} .ix-cmp{table-layout:fixed;min-width:560px} .ix-cmp col.lbl{width:200px}
.ix-cmp th,.ix-cmp td{text-align:left;vertical-align:top;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ix-cmp thead th{text-transform:none;letter-spacing:0;font-size:14px;color:var(--ix-text);padding:8px;vertical-align:bottom} .ix-cmp thead th:first-child{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ix-muted)}
.ix-cmp thead th .name{display:flex;gap:8px;align-items:center;font-size:15px} .ix-cmp thead th .sub{display:flex;gap:6px;margin-top:4px;min-height:18px} .ix-cmp thead th.win{background:var(--ix-soft)}
.ix-cmp tbody th{font-weight:600;color:var(--ix-muted);text-transform:none;letter-spacing:0;font-size:13px;padding:6px 8px;border-bottom:1px solid var(--ix-line);vertical-align:top}
.ix-cmp tr.sec th{background:var(--ix-bg2);color:var(--ix-text);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:800;padding:8px}
.ix-cmp td .btn.link.sm{font-size:12px;margin-left:6px} .ix-cmp tfoot td{padding:10px 8px;border:0}
.ix-cmp td.good{font-weight:700} .ix-cmp td small{color:var(--ix-muted)}
/* hero: value props + numbers */
.ix-props{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px;max-width:none!important} .ix-props div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px}
.ix-props b{display:block;color:#fff;font-size:15px;margin-bottom:4px} .ix-props span{color:#c7d2fe;font-size:13.5px;line-height:1.45} @media(max-width:760px){.ix-props{grid-template-columns:1fr}}
.ix-nums{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;color:#94a3b8;font-size:13.5px;font-weight:600} .ix-nums b{color:#fff}
.ix-hero .cta-row{margin:22px 0 0}
/* trust + cta sections */
.ix-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px} .ix-trust .card{margin:0;padding:16px 18px} .ix-trust h3{font-size:15px;margin:0 0 6px} .ix-trust p{font-size:13.5px;color:var(--ix-muted);margin:0}
@media(max-width:760px){.ix-trust{grid-template-columns:1fr}}
.ix-band{background:linear-gradient(135deg,#0f2a5a,#071a3a);color:#fff;border-radius:18px;padding:26px 28px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;margin-top:22px}
.ix-band h2{color:#fff;font-size:20px;margin:0 0 4px} .ix-band p{color:#c7d2fe;margin:0;max-width:560px} .ix-band .btn.primary{white-space:nowrap}
.ix-method h2{font-size:22px;margin:22px 0 8px} .ix-method h3{font-size:16px;margin:16px 0 6px} .ix-method table{margin:8px 0 14px} .ix-method code{background:var(--ix-bg2);padding:1px 6px;border-radius:6px;font-size:13px}