/* Catalog pages (v3): solutions, products, product, compare, brands, brand. Prefix: ct- */

/* hero */
.ct-hero{padding:clamp(28px,4vw,56px) 0 clamp(36px,5vw,64px);background:#fff}
.ct-hero--tight{padding-bottom:clamp(20px,3vw,32px)}
.ct-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.ct-hero-copy{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.ct-h1{font-size:clamp(34px,4.4vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.08;max-width:18em}
.ct-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.ct-crumbs a:hover{color:var(--blue)}
.ct-crumbs [aria-current]{color:var(--ink);font-weight:600}
.ct-photo{width:100%;aspect-ratio:4/3;max-height:460px;object-fit:cover;object-position:50% 72%;border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(13,27,46,.14)}
.ct-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.ct-actions{display:flex;flex-wrap:wrap;gap:12px}
.ct-checks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;font-weight:600;color:var(--ink);font-size:15.5px}
.ct-checks li{display:flex;align-items:center;gap:8px}
.ct-checks svg{color:var(--ok)}
.ct-brand{font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--blue)}
.ct-logo{height:22px;width:auto;max-width:120px;object-fit:contain}
.ct-badge{position:absolute;top:14px;left:14px;padding:5px 10px;border-radius:8px;background:#fff;color:var(--blue);font-size:12.5px;font-weight:700;box-shadow:0 2px 8px rgba(13,27,46,.06)}
.ct-ic{flex:none;width:52px;height:52px;border-radius:14px;background:var(--bg-blue);color:var(--blue);display:flex;align-items:center;justify-content:center}
.ct-ic--sm{width:46px;height:46px;border-radius:12px}
.ct-pill{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:var(--bg-blue);color:var(--blue);font-size:14px;font-weight:700}
.ct-note{margin-top:16px}
.ct-mb{margin-bottom:clamp(20px,3vw,28px)}
.ct-mt{margin-top:24px}
.ct-mt-sm{margin-top:12px}
.ct-full{width:100%}
.ct-crumbbar{padding-top:clamp(20px,3vw,32px)}
.ct-crumbbar .ct-crumbs{margin-bottom:0}
.ct-divide{border-top:1px solid var(--line)}
.ct-sec-top{padding-top:clamp(20px,3vw,40px)}

/* chips (solutions filter, compare picks). Beats the legacy dark [data-tab] state from site.css. */
.ct-chipbar{position:sticky;top:76px;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ct-chips{display:flex;gap:8px;padding-top:12px;padding-bottom:12px}
.ct-chips--wrap{flex-wrap:wrap;padding:0;margin-top:8px}
.w3 .ct-chip{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink);font-size:14.5px;font-weight:600;white-space:nowrap;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}
.w3 .ct-chip svg{color:var(--blue)}
.w3 .ct-chip:hover{border-color:var(--blue);color:var(--blue)}
.w3 .ct-chip small{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--blue)}
.w3 .ct-chip[data-tab="true"]{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}
.w3 .ct-chip[data-tab="true"] :is(svg,small){color:#fff}

/* segmented brand tabs (products) */
.ct-seg{display:flex;gap:6px;padding:5px;border-radius:14px;background:var(--bg-2);max-width:100%}
.w3 .ct-seg a{flex:none;display:flex;align-items:center;min-height:44px;padding:0 20px;border-radius:10px;font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;border:0}
.w3 .ct-seg a:hover{color:var(--blue)}
.w3 .ct-seg a[data-sel="true"]{background:#fff!important;color:var(--blue)!important;border:0!important;box-shadow:0 2px 8px rgba(13,27,46,.1)!important}

/* performance meter */
.ct-meters{display:flex;flex-direction:column;gap:9px}
.ct-meter{display:grid;grid-template-columns:minmax(0,1fr) 120px;align-items:center;gap:12px;font-size:14.5px;color:var(--text)}
.ct-meter-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.ct-meter-bar i{height:7px;border-radius:4px;background:var(--bg-blue-2)}
.ct-meter-bar i.on{background:var(--blue)}

/* solutions */
.ct-sols{display:flex;flex-direction:column;gap:20px}
.ct-sol{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);overflow:hidden;scroll-margin-top:150px}
.ct-sol--solo{grid-template-columns:minmax(0,1fr)}
.ct-sol-main{padding:clamp(22px,3.5vw,40px);display:flex;flex-direction:column;gap:22px}
.ct-sol-head{display:flex;align-items:center;gap:16px}
.ct-sol-h{font-size:clamp(22px,2.6vw,30px);font-weight:800}
.ct-sol-h--1{font-size:clamp(28px,3.6vw,44px)}
.ct-sol-h a:hover{color:var(--blue)}
.ct-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.ct-box{padding:18px 20px;border-radius:14px;background:var(--bg-2);display:flex;flex-direction:column;gap:8px;font-size:15.5px;color:var(--ink)}
.ct-box--blue{background:var(--bg-blue)}
.ct-box-l{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--mute)}
.ct-box--blue .ct-box-l{color:var(--blue)}
.ct-rec{padding:clamp(22px,3.5vw,36px);background:var(--bg-2);border-left:1px solid var(--line);display:flex;flex-direction:column;gap:16px}
.ct-rec-top{display:flex;align-items:center;gap:16px}
.ct-rec-vis{flex:none;width:92px;height:92px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center}
.ct-rec-name{display:block;font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.01em;line-height:1.2}
.ct-rec .ct-actions{margin-top:auto;gap:8px}
.ct-rec .ct-actions .w-btn{flex:1 1 140px}
.ct-probs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:14px}
.ct-prob{display:flex;flex-direction:column;gap:18px;padding:22px;min-height:150px;color:var(--ink)}
.ct-prob-top{display:flex;justify-content:space-between;align-items:center}
.ct-prob-top>svg{color:var(--mute);transition:color .2s ease,transform .2s ease}
.ct-prob:hover .ct-prob-top>svg{color:var(--blue);transform:translate(2px,-2px)}
.ct-prob b{font-size:17px;line-height:1.3;margin-top:auto}
.ct-back{display:inline-flex;align-items:center;gap:8px;min-height:44px}

/* series cards */
.ct-series{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px}
.ct-card{display:flex;flex-direction:column;overflow:hidden;scroll-margin-top:100px}
.ct-card:hover{box-shadow:var(--sh-h);border-color:var(--bg-blue-2)}
.ct-card-vis{position:relative;height:220px;background:var(--bg-blue);display:flex;align-items:center;justify-content:center}
.ct-card-vis>a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.ct-cmp{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:700;color:var(--ink);cursor:pointer}
.ct-cmp input{width:18px;height:18px;margin:0;accent-color:var(--blue)}
.ct-cmp:has(input:checked){border-color:var(--blue);color:var(--blue)}
.ct-card-body{padding:22px;display:flex;flex-direction:column;gap:16px;flex:1}
.ct-card-name{font-size:23px;font-weight:800;margin-top:4px}
.ct-card-name a:hover{color:var(--blue)}
.ct-card-desc{margin-top:6px;font-size:15px;color:var(--mute);line-height:1.55}
.ct-specs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--mute)}
.ct-specs b{color:var(--ink);font-weight:700}
.ct-price{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:10px;color:var(--mute);font-size:15px}
.ct-price b{color:var(--blue);font-size:19px;font-weight:800}
.ct-card-acts{display:flex;gap:8px}
.ct-card-acts .w-btn:first-child{flex:1}
.ct-sq{flex:none;width:44px;height:44px;padding:0}

/* compare bar (products) */
.ct-cmpbar{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:56;width:min(560px,calc(100% - 24px));display:flex;align-items:center;gap:10px;padding:8px 8px 8px 18px;border-radius:16px;background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:0 16px 40px rgba(13,27,46,.16);animation:wlFade .2s ease}
.ct-cmpbar-l{display:flex;align-items:center;gap:10px;flex:1;min-width:0;font-size:15px}
.ct-cmpbar-l svg{color:var(--blue)}
.ct-cmpbar-l b{color:var(--blue)}
.ct-cmpbar-clear{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;font-weight:700;font-size:15px;color:var(--mute)}
.ct-cmpbar-clear:hover{color:var(--blue)}

/* product */
.ct-prod{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.ct-pvis{position:relative;border-radius:var(--r-lg);background:var(--bg-blue);padding:clamp(40px,6vw,72px) clamp(20px,4vw,48px);display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,48px);flex-wrap:wrap}
.ct-pvis-win{width:min(260px,58%)}
.ct-pvis-prof{width:min(150px,32%);padding:14px;background:#fff;border-radius:var(--r);box-shadow:var(--sh)}
.ct-pvis-prof svg{width:100%;height:auto;display:block}
.ct-pinfo{display:flex;flex-direction:column;gap:22px}
.ct-ptag{font-weight:700;color:var(--blue);font-size:16px;margin-top:12px}
.ct-pmeters{padding:22px}
.ct-pprice{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ct-pprice b{font-size:clamp(24px,2.6vw,30px);font-weight:800;color:var(--blue);letter-spacing:-.02em}
.ct-pactions .w-btn{flex:1 1 220px}
.ct-split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,48px);align-items:start}
.ct-h3{font-size:20px;font-weight:800;margin-bottom:14px}
.ct-table{width:100%;border-collapse:separate;border-spacing:0;font-size:15.5px}
.ct-table th,.ct-table td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line)}
.ct-table tr:last-child>*{border-bottom:0}
.ct-table th{font-weight:600;color:var(--mute);width:45%}
.ct-table td{color:var(--ink);font-weight:700}
.ct-tablecard{overflow:hidden}
.ct-stack{display:flex;flex-direction:column;gap:12px}
.ct-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 20px;color:var(--ink)}
.ct-row--plain{grid-template-columns:minmax(0,1fr) auto}
.ct-row b{display:block;font-size:17px;line-height:1.3}
.ct-row .w-small{display:block;margin-top:4px}
.ct-row>svg{color:var(--blue);transition:transform .2s ease}
.ct-row:hover>svg{transform:translateX(3px)}
.ct-bcard{display:flex;flex-direction:column;overflow:hidden;color:var(--ink)}
.ct-bcard-img{display:block;aspect-ratio:16/8;overflow:hidden}
.ct-bcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
a.ct-bcard:hover .ct-bcard-img img,.ct-bcard-img:hover img{transform:scale(1.03)}
.ct-bcard-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;flex:1}
.ct-bname{font-size:32px;font-weight:800;letter-spacing:.04em;color:var(--blue);line-height:1.1}
.ct-blogo{height:40px;width:auto;max-width:100%;object-fit:contain}
.ct-bcard-body .w-link{margin-top:auto}

/* compare */
.ct-tablewrap{padding:0;overflow-x:auto}
.ct-cmp-table{width:100%;min-width:680px;border-collapse:separate;border-spacing:0;font-size:15.5px}
.ct-cmp-table th,.ct-cmp-table td{padding:18px 20px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
.ct-cmp-table td,.ct-cmp-table thead th+th{border-left:1px solid var(--line)}
.ct-cmp-table tbody th{position:sticky;left:0;z-index:1;background:#fff;font-weight:700;color:var(--ink);width:200px}
.ct-cmp-table thead th{vertical-align:top;background:#fff}
.ct-cmp-table thead th:first-child{position:sticky;left:0;z-index:2;vertical-align:bottom;font-size:14px;font-weight:700;color:var(--mute)}
.ct-cmp-table thead th+th{min-width:190px}
.ct-cmp-table tr:last-child>*{border-bottom:0;background:var(--bg-2)}
.ct-cmp-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.ct-cmp-name{display:block;font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin-top:2px}
.ct-cmp-name:hover{color:var(--blue)}
.ct-cmp-tag{display:block;font-size:13.5px;font-weight:500;color:var(--mute);margin-top:4px}
.ct-x{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--mute);display:flex;align-items:center;justify-content:center}
.ct-x:hover{border-color:var(--err);color:var(--err)}
.ct-ticks{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ct-ticks .ct-meter-bar{width:110px}
.ct-best{font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:#e5f4ec;color:var(--ok);white-space:nowrap}
.ct-cmp-table td.ct-val{color:var(--ink);font-weight:600}
.ct-empty{padding:48px 24px;text-align:center;color:var(--mute)}

/* brands */
.ct-bgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ct-tags{display:flex;flex-wrap:wrap;gap:8px}
.ct-sers{display:flex;flex-wrap:wrap;gap:8px}
.ct-ser{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font-size:14px;font-weight:600;color:var(--ink)}
.ct-ser:hover{border-color:var(--blue);color:var(--blue)}
.ct-bsec{scroll-margin-top:80px}
.ct-bsec-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:start}
.ct-bsec-copy{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.ct-bsec-copy h1,.ct-bsec-copy h2{display:flex}
.ct-bsec-name{font-size:clamp(44px,6vw,72px);font-weight:800;letter-spacing:.06em;color:var(--blue);line-height:1}
.ct-bsec-logo{height:clamp(48px,6vw,80px);width:auto;max-width:100%;object-fit:contain}
.ct-bsec-copy>p{font-size:17px;color:var(--text);max-width:30em}
.ct-bsec-side{display:flex;flex-direction:column;gap:12px}
.ct-bsec-side .ct-photo{aspect-ratio:16/9;margin-bottom:6px;box-shadow:var(--sh)}
.ct-promises{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}
.ct-promise{padding:24px;display:flex;flex-direction:column;gap:12px}
.ct-promise b{font-size:17px;color:var(--ink)}
.ct-promise p{font-size:15px;color:var(--mute);line-height:1.6}
.ct-promises+.ct-actions{margin-top:32px}

/* CTA band (blue, the one saturated block) */
.ct-cta{background:var(--blue);color:#fff}
.ct-cta-in{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px);display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.ct-cta h2{color:#fff;font-size:clamp(28px,3.4vw,44px);max-width:16em}
.ct-cta p{color:rgba(255,255,255,.82);margin-top:8px;font-size:17px}
.ct-cta-ghost{background:transparent;border-color:rgba(255,255,255,.6)}
.ct-cta-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;box-shadow:none}

@media (max-width:960px){
  .ct-hero-in,.ct-prod,.ct-split,.ct-bsec-in{grid-template-columns:minmax(0,1fr)}
  .ct-bgrid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .ct-sol{grid-template-columns:minmax(0,1fr)}
  .ct-rec{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:720px){
  .ct-chipbar{top:66px}
  .ct-cmpbar{bottom:calc(86px + env(safe-area-inset-bottom))}
}
@media (max-width:560px){
  .ct-actions>.w-btn{flex:1 1 100%}
  .ct-cmpbar{padding-left:14px;gap:6px}
  .ct-cmpbar-l>svg{display:none}
  .ct-cmpbar-l{font-size:14px}
  .ct-cmpbar-clear{padding:0 8px}
  .ct-meter{grid-template-columns:minmax(0,1fr) 100px}
  .ct-pvis-win{width:min(220px,56%)}
  .ct-bsec-name{font-size:44px}
}

.ct-cmp-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}