/* K-Insight home (Figma 207:331) */
/* Page text is pure black across the whole channel, as in Figma. home.css sets
   body.kw26-page{color:var(--kw-ink)} (#19007c) and only K-Flow had overridden it, so every
   heading here that did not name its own colour was inheriting purple. Matching the specificity
   of the home.css rule (body + class) is enough to win on source order, so no !important is
   needed. Elements that are purple by design — the brand wall pills, Topics links, rich-text
   hyperlinks — set their own colour and are unaffected. */
body.ki26-page{color:#000}
.ki26-masthead{position:relative;height:107px;background:#f6f6ff}
.ki26-brand{position:absolute;left:max(calc((100% - 1222px)/2),28px);top:26px;width:226px;height:56px;display:flex;align-items:center}
.ki26-brand img{display:block;width:226px;height:56px;object-fit:contain}
/* Colour restated so the channel name stays black even if the page rule above ever changes. */
.ki26-masthead>strong{position:absolute;left:50%;top:35px;transform:translateX(-50%);color:#000;font-size:32px;line-height:39px;font-weight:600}

.ki26-channel-nav{height:60px;background:#4f4878;color:#fff;display:flex;align-items:center}
.ki26-channel-nav>div{width:996px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:22px}
.ki26-channel-nav a{display:grid;grid-template-areas:"label";place-items:center;flex:0 0 auto;color:#fff;font-size:16px;line-height:19px;text-decoration:none;white-space:nowrap;font-weight:400}
.ki26-channel-nav a::before,.ki26-channel-nav a>span{grid-area:label}
.ki26-channel-nav a::before{content:attr(data-label);visibility:hidden;font-weight:700}
.ki26-channel-nav a:hover>span,.ki26-channel-nav a:focus-visible>span,.ki26-channel-nav a.active>span{font-weight:700}
.ki26-nav-search{width:157px;height:38px;flex:0 0 157px;border:1px solid #fff;border-radius:32px;display:flex;align-items:center;padding:0 17px}
.ki26-nav-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font:400 16px/19px Inter}
/* Placeholder is slightly transparent white so it reads as a hint rather than as entered text.
   The alpha lives in the colour, and opacity stays 1 on purpose: Firefox applies a 0.54 default
   opacity to ::placeholder, so leaving it out would darken the hint a second time. Typed input
   keeps full white for legibility. */
.ki26-nav-search input::placeholder{color:rgba(255,255,255,.7);opacity:1}
.ki26-nav-search button{width:15px;height:15px;flex:0 0 15px;padding:0;border:1px solid #fff;border-radius:50%;background:transparent;cursor:pointer}

.ki26-hero{position:relative;height:688px;overflow:hidden}
.ki26-hero-media{position:absolute;inset:0}
.ki26-hero-media img,.ki26-hero-media .kw26-admin-image{display:block;width:100%;height:100%;object-fit:cover}
.ki26-hero-inner{position:relative;width:996px;height:100%;margin:auto}
.ki26-hero h1{position:absolute;left:0;top:106px;width:842px;margin:0;font-size:56px;line-height:1.2;font-weight:700}
.ki26-hero-copy{position:absolute;left:0;top:274px;width:548px;margin:0;font-size:24px;line-height:1.5}
.ki26-hero-points{position:absolute;left:0;top:413px;width:548px;margin:0;font-size:24px;line-height:1.5}
.ki26-hero-points p{margin:0}

.ki26-section-head{display:flex;width:996px;margin:0 auto;height:39px;align-items:center;gap:32px}
.ki26-section-head h2{margin:0;font-size:32px;line-height:39px;font-weight:600}
.ki26-section-head>a{display:flex;height:38px;padding:0 28px;align-items:center;justify-content:center;border:1px solid #000;border-radius:32px;background:#dcd3e8;color:#000;text-decoration:none;font-size:16px;line-height:19px;transition:transform .2s ease}
.ki26-section-head>a:hover{transform:scale(1.04)}
.ki26-section-head>a span{display:inline-block;width:18px;height:18px;margin-left:8px;font-size:0;background:url("../images/icon-arrow-up-right.svg") center/contain no-repeat}

/* Brand wall: scattered logo pills. Depth follows distance from the centre of the cloud —
   the inner cards are smaller and blurred, the outer ring is full size and crisp. */
.ki26-wall-section{padding:59px 0 0;background:#f9f7fd}
.ki26-wall{position:relative;height:688px;margin:-9px 0 0;overflow:hidden}
.ki26-wall-inner{position:relative;width:1440px;height:660px;margin:14px auto}
.ki26-brand-card{position:absolute;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:8px;background:#fff;box-shadow:0 4px 14px rgba(79,72,120,.13);color:#19007c;text-decoration:none;transition:transform .3s ease,filter .3s ease,opacity .3s ease,box-shadow .3s ease}
.ki26-brand-card img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.ki26-brand-card .kw26-admin-image{width:auto;height:22px;padding:0 8px;background:#ececf5;font-size:10px}
.ki26-brand-name{font-size:15px;font-weight:700;white-space:nowrap}
/* 38 slots, one per brand in the CMS (2026-08-11). It used to be 12, which made the wall look far
   sparser than the design. The design's cloud is a flat bitmap (235:70, an exported image), so it
   carries no per-brand layers and there are no coordinates to copy; what it does specify, via the
   two orange notes, is the depth order: smaller and blurrier towards the centre, full size and
   crisp towards the outside. These positions reproduce that in three concentric tiers and are
   packed so no two pills touch inside the 1440x660 wall.
   Outer tier, full size and crisp: left and right columns plus a top and a bottom row. */
.ki26-slot-0{left:6px;top:40px}
.ki26-slot-1{left:6px;top:286px}
.ki26-slot-2{left:6px;top:532px}
.ki26-slot-3{left:1234px;top:40px}
.ki26-slot-4{left:1234px;top:286px}
.ki26-slot-5{left:1234px;top:532px}
.ki26-slot-6{left:250px;top:6px}
.ki26-slot-7{left:500px;top:6px}
.ki26-slot-8{left:750px;top:6px}
.ki26-slot-9{left:1000px;top:6px}
.ki26-slot-10{left:250px;top:566px}
.ki26-slot-11{left:500px;top:566px}
.ki26-slot-12{left:750px;top:566px}
.ki26-slot-13{left:1000px;top:566px}
.ki26-slot-0,.ki26-slot-1,.ki26-slot-2,.ki26-slot-3,.ki26-slot-4,.ki26-slot-5,.ki26-slot-6,.ki26-slot-7,.ki26-slot-8,.ki26-slot-9,.ki26-slot-10,.ki26-slot-11,.ki26-slot-12,.ki26-slot-13{width:200px;height:88px;z-index:3}
/* Mid tier: slightly smaller, light blur. An inner ring just inside the outer one. */
.ki26-slot-14{left:236px;top:150px}
.ki26-slot-15{left:236px;top:330px}
.ki26-slot-16{left:236px;top:470px}
.ki26-slot-17{left:1044px;top:150px}
.ki26-slot-18{left:1044px;top:330px}
.ki26-slot-19{left:1044px;top:470px}
.ki26-slot-20{left:450px;top:110px}
.ki26-slot-21{left:650px;top:110px}
.ki26-slot-22{left:850px;top:110px}
.ki26-slot-23{left:450px;top:478px}
.ki26-slot-24{left:650px;top:478px}
.ki26-slot-25{left:850px;top:478px}
.ki26-slot-14,.ki26-slot-15,.ki26-slot-16,.ki26-slot-17,.ki26-slot-18,.ki26-slot-19,.ki26-slot-20,.ki26-slot-21,.ki26-slot-22,.ki26-slot-23,.ki26-slot-24,.ki26-slot-25{width:160px;height:72px;filter:blur(1.3px);opacity:.86;z-index:2}
/* Centre tier: smallest, strongest blur. A 4x3 cluster in the middle of the cloud. */
.ki26-slot-26{left:450px;top:205px}
.ki26-slot-27{left:600px;top:205px}
.ki26-slot-28{left:750px;top:205px}
.ki26-slot-29{left:900px;top:205px}
.ki26-slot-30{left:450px;top:285px}
.ki26-slot-31{left:600px;top:285px}
.ki26-slot-32{left:750px;top:285px}
.ki26-slot-33{left:900px;top:285px}
.ki26-slot-34{left:450px;top:365px}
.ki26-slot-35{left:600px;top:365px}
.ki26-slot-36{left:750px;top:365px}
.ki26-slot-37{left:900px;top:365px}
.ki26-slot-26,.ki26-slot-27,.ki26-slot-28,.ki26-slot-29,.ki26-slot-30,.ki26-slot-31,.ki26-slot-32,.ki26-slot-33,.ki26-slot-34,.ki26-slot-35,.ki26-slot-36,.ki26-slot-37{width:128px;height:60px;filter:blur(2.8px);opacity:.66;z-index:1}
.ki26-brand-card:hover,.ki26-brand-card:focus-visible,.ki26-brand-card.is-front{filter:none!important;opacity:1!important;transform:scale(1.12);z-index:20!important;box-shadow:0 10px 26px rgba(79,72,120,.24);outline:none}
.ki26-brand-card:focus-visible{outline:2px solid #19007c;outline-offset:2px}

.ki26-latest{width:996px;margin:136px auto 0}
.ki26-latest-row{display:grid;grid-template-columns:485px 511px;margin-top:39px;transition:transform .2s ease}
.ki26-latest-row+.ki26-latest-row{margin-top:53px}
.ki26-latest-row:hover{transform:scale(1.008)}
.ki26-latest-media{display:block;width:485px;height:445px;overflow:hidden}
.ki26-latest-media img,.ki26-latest-media .kw26-admin-image{display:block;width:100%;height:100%;object-fit:cover}
.ki26-latest-copy{display:flex;height:445px;padding:34px 31px;flex-direction:column;background:#e2dbeb;color:#000;text-decoration:none}
.ki26-latest-copy b{font-size:20px;line-height:24px;font-weight:700}
.ki26-latest-copy strong{display:-webkit-box;overflow:hidden;margin-top:10px;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:16px;line-height:36px;font-weight:400}
.ki26-latest-copy p{display:-webkit-box;overflow:hidden;margin:26px 0 0;max-width:244px;-webkit-box-orient:vertical;-webkit-line-clamp:5;font-size:15px;line-height:24px;font-weight:500}

.ki26-compare{width:996px;margin:145px auto 147px}
.ki26-compare-grid{display:grid;grid-template-columns:repeat(2,448px);gap:54px 100px;margin-top:39px}
.ki26-compare-card{overflow:hidden;transition:transform .2s ease}
.ki26-compare-card:hover{transform:scale(1.01)}
.ki26-compare-media{display:block;width:100%;height:252px;overflow:hidden}
.ki26-compare-media img,.ki26-compare-media .kw26-admin-image{display:block;width:100%;height:100%;object-fit:cover}
.ki26-compare-copy{display:flex;height:467px;padding:15px 28px 24px;flex-direction:column;background:#e2dbeb;color:#000;text-decoration:none}
.ki26-compare-copy b{font-size:12px;line-height:15px;font-weight:700}
.ki26-compare-copy strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:16px;line-height:36px;font-weight:400}
.ki26-compare-copy p{display:-webkit-box;overflow:hidden;margin:8px 0 0;-webkit-box-orient:vertical;-webkit-line-clamp:4;font-size:16px;line-height:24px;font-weight:500}
.ki26-compare-copy small{display:block;margin-top:12px;font-size:13px;line-height:24px;font-weight:500;white-space:pre-line}

/* Floating brand shortcut stays pinned to the bottom-right of the viewport */
.ki26-float-brand{position:fixed;right:36px;bottom:36px;z-index:60;display:flex;width:185px;height:40px;align-items:center;justify-content:center;border-radius:8px;background:#4f4878;color:#fff;text-decoration:none;font-size:16px;line-height:19px;letter-spacing:.04em;transition:transform .2s ease,background .2s ease}
/* Colour needs its own rule with the tag included. home.css has .kw26-page a{color:inherit} at
   (0,1,1), which outranks the single-class rule above, so the white declared there never applied
   and the label followed the page colour instead. Tagging the selector ties that specificity and
   this file loads later, so white wins. Keep it colour-only: raising the specificity of the base
   rule would also let its right/bottom/width beat the 760px overrides and break the mobile spot. */
a.ki26-float-brand{color:#fff}
.ki26-float-brand:hover{transform:translateY(-2px) scale(1.03);background:#3f3a63}
.ki26-float-brand:focus-visible{outline:3px solid #dfd6f1;outline-offset:2px}
.ki26-main{padding-bottom:0}

@media(prefers-reduced-motion:reduce){
 .ki26-brand-card,.ki26-latest-row,.ki26-compare-card,.ki26-float-brand,.ki26-section-head>a{transition:none}
 .ki26-brand-card:hover,.ki26-latest-row:hover,.ki26-compare-card:hover,.ki26-float-brand:hover,.ki26-section-head>a:hover{transform:none}
}
@media(max-width:1100px){
 .ki26-channel-nav>div{width:calc(100% - 56px);overflow-x:auto;justify-content:flex-start}
 .ki26-hero{height:auto;padding:56px 0 64px}
 .ki26-hero-inner{width:calc(100% - 56px);height:auto;margin:0 28px}
 .ki26-hero h1,.ki26-hero-copy,.ki26-hero-points{position:relative;left:auto;top:auto;width:auto;max-width:700px}
 .ki26-hero h1{font-size:42px}
 .ki26-hero-copy{margin-top:26px}
 .ki26-hero-points{margin-top:22px}
 .ki26-section-head,.ki26-latest,.ki26-compare{width:calc(100% - 56px);margin-left:28px;margin-right:28px}
 .ki26-wall{height:auto;margin:32px 0 0;overflow:visible}
 .ki26-wall-inner{width:calc(100% - 56px);height:auto;margin:0 28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;padding-bottom:41px}
 .ki26-brand-card,.ki26-brand-card[class*="ki26-slot-"]{position:relative;left:auto;top:auto;width:auto;height:96px;filter:none;opacity:1;z-index:auto}
 .ki26-latest-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .ki26-latest-media,.ki26-latest-copy{width:auto;height:auto;min-height:340px}
 .ki26-compare-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px}
 .ki26-compare-copy{height:auto;min-height:420px}
}
@media(max-width:760px){
 .ki26-masthead{height:90px}
 .ki26-brand{left:20px;top:12px;width:150px;height:66px}
 .ki26-brand img{width:150px;height:auto}
 .ki26-masthead>strong{top:28px;left:auto;right:20px;transform:none;font-size:22px}
 .ki26-channel-nav{height:58px}
 .ki26-channel-nav>div{width:100%;padding:0 20px;gap:24px;scrollbar-width:none}
 .ki26-channel-nav>div::-webkit-scrollbar{display:none}
 .ki26-channel-nav a{font-size:14px}
 .ki26-nav-search{width:130px;flex:0 0 130px}
 .ki26-hero-inner{width:calc(100% - 40px);margin:0 20px}
 .ki26-hero h1{font-size:30px}
 .ki26-hero-copy,.ki26-hero-points{font-size:17px}
 .ki26-section-head{width:calc(100% - 40px);margin-left:20px;margin-right:20px;height:auto;gap:14px;flex-wrap:wrap}
 .ki26-section-head h2{font-size:26px}
 .ki26-wall-inner{width:calc(100% - 40px);margin:24px 20px 0;grid-template-columns:repeat(2,1fr);gap:14px;padding-bottom:32px}
 .ki26-brand-card,.ki26-brand-card[class*="ki26-slot-"]{height:84px;transform:none}
 .ki26-brand-name{font-size:13px}
 .ki26-latest,.ki26-compare{width:calc(100% - 40px);margin-left:20px;margin-right:20px}
 .ki26-latest{margin-top:56px}
 .ki26-compare{margin-top:72px}
 .ki26-latest-row{grid-template-columns:1fr;margin-top:24px}
 .ki26-latest-media{height:auto}
 .ki26-latest-media img,.ki26-latest-media .kw26-admin-image{height:auto;aspect-ratio:1.1}
 .ki26-latest-copy{height:auto;min-height:0;padding:22px 20px}
 .ki26-latest-copy p{max-width:none;margin-top:16px}
 .ki26-compare-grid{grid-template-columns:1fr;gap:24px;margin-top:24px}
 .ki26-compare-media{height:auto}
 .ki26-compare-media img,.ki26-compare-media .kw26-admin-image{height:auto;aspect-ratio:1.78}
 .ki26-compare-copy{height:auto;min-height:0;padding:16px 20px 22px}
 .ki26-float-brand{right:16px;bottom:16px;width:150px;height:38px}
}

.ki26-float-brand.is-tucked{opacity:0;pointer-events:none;transform:translateY(12px)}

/* K-Insight category detail page 1: Latest list and the four product categories (Figma 214:512) */
/* Bottom gap is padding on the page, not margin on the View More button — see the note on
   .kr26-tab-page in kranking.css. The button vanishes on the last page and took the spacing with
   it, gluing the last card to the footer. */
.ki26-list-page{width:996px;margin:0 auto;padding-bottom:190px}
.ki26-list-title{margin:68px 0 0;text-align:center;font-size:48px;line-height:58px;font-weight:600}
/* Figma 214:512: the left cards start at y=360 and the FEATURED heading 10px higher, at 350. */
.ki26-list-layout{display:grid;grid-template-columns:588px 368px;gap:40px;margin-top:67px}
.ki26-featured{margin-top:-10px}
.ki26-list-feed{display:flex;flex-direction:column;gap:40px;min-width:0}
.ki26-list-card{width:588px;overflow:hidden;transition:transform .2s ease}
.ki26-list-card:hover{transform:scale(1.008)}
.ki26-list-media{display:block;width:588px;height:350px;overflow:hidden}
.ki26-list-media img,.ki26-list-media .kw26-admin-image{display:block;width:100%;height:100%;object-fit:cover}
.ki26-list-copy{display:flex;height:261px;padding:28px 26px 19px;flex-direction:column;background:#e2dbeb;color:#000;text-decoration:none}
.ki26-list-copy b{font-size:20px;line-height:24px;font-weight:700}
.ki26-list-copy strong{display:-webkit-box;overflow:hidden;margin-top:13px;-webkit-box-orient:vertical;-webkit-line-clamp:1;font-size:32px;line-height:48px;font-weight:400}
.ki26-list-copy p{display:-webkit-box;overflow:hidden;margin:25px 0 0;-webkit-box-orient:vertical;-webkit-line-clamp:4;font-size:15px;line-height:24px;font-weight:500}
.ki26-featured h2{height:65px;margin:0;font-size:20px;line-height:24px;font-weight:600}
.ki26-featured article{width:368px;height:108px;margin-bottom:24px;background:rgba(226,219,235,.2);transition:transform .2s ease}
.ki26-featured article:hover{transform:scale(1.015)}
.ki26-featured article>a,.ki26-featured article>div{display:flex;height:100%;padding:14px 16px 16px;flex-direction:column;justify-content:space-between;color:#000;text-decoration:none}
.ki26-featured strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:16px;line-height:24px;font-weight:400}
.ki26-featured small{display:flex;gap:10px;justify-content:space-between;font-size:12px;line-height:15px}
.ki26-featured small span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ki26-featured time{flex:0 0 auto}
.ki26-view-more{display:flex;width:147px;height:38px;margin:96px 0 0 221px;align-items:center;justify-content:center;border:1px solid #000;border-radius:32px;color:#000;text-decoration:none;font-size:16px;line-height:19px;transition:transform .2s ease}
.ki26-view-more:hover{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.ki26-list-card,.ki26-featured article,.ki26-view-more{transition:none}.ki26-list-card:hover,.ki26-featured article:hover,.ki26-view-more:hover{transform:none}}
@media(max-width:1100px){
 .ki26-list-page{width:calc(100% - 56px);margin:0 28px;padding-bottom:90px}
 .ki26-list-title{margin-top:44px;font-size:38px;line-height:46px;text-align:left}
 .ki26-list-layout{grid-template-columns:minmax(0,1fr) 368px;gap:28px;margin-top:40px}
 .ki26-featured{margin-top:0}
 .ki26-list-card,.ki26-list-media{width:100%}
 .ki26-list-media{height:auto}
 .ki26-list-media img,.ki26-list-media .kw26-admin-image{height:auto;aspect-ratio:1.68}
 .ki26-list-copy{height:auto;min-height:240px}
 .ki26-featured article{width:100%}
 .ki26-view-more{margin:56px auto 0}
}
@media(max-width:760px){
 .ki26-list-page{width:calc(100% - 40px);margin:0 20px;padding-bottom:72px}
 .ki26-list-title{margin-top:28px;font-size:30px;line-height:38px}
 .ki26-list-layout{grid-template-columns:1fr;gap:48px;margin-top:20px}
 .ki26-list-feed{gap:28px}
 .ki26-list-copy{height:auto;min-height:0;padding:20px}
 .ki26-list-copy strong{font-size:24px;line-height:34px;-webkit-line-clamp:2}
 .ki26-view-more{margin:40px auto 0}
}

/* K-Insight category detail page 2: single brand (Figma 217:511) */
.kr26-placeholder{pointer-events:none}
.ki26-brandpage{width:996px;margin:0 auto;padding-bottom:143px}
.ki26-brandpage-title{margin:81px 0 0;text-align:center;font-size:48px;line-height:48px;font-weight:600}
.ki26-brandpage-feed{display:flex;flex-direction:column;gap:40px;margin-top:79px}
.ki26-brandpage-card{display:grid;grid-template-columns:588px 408px;width:996px;height:350px;transition:transform .2s ease}
.ki26-brandpage-card:hover{transform:scale(1.006)}
.ki26-brandpage-media{display:block;width:588px;height:350px;overflow:hidden}
.ki26-brandpage-media img,.ki26-brandpage-media .kw26-admin-image{display:block;width:100%;height:100%;object-fit:cover}
.ki26-brandpage-panel{display:flex;height:350px;padding:29px 60px 24px 35px;flex-direction:column;background:#e2dbeb;color:#000;text-decoration:none}
.ki26-brandpage-panel b{font-size:20px;line-height:24px;font-weight:700}
.ki26-brandpage-panel strong{display:-webkit-box;overflow:hidden;margin-top:14px;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:32px;line-height:48px;font-weight:400}
.ki26-brandpage-panel p{display:-webkit-box;overflow:hidden;margin:25px 0 0;-webkit-box-orient:vertical;-webkit-line-clamp:4;font-size:15px;line-height:24px;font-weight:500}
.ki26-brandpage-media:focus-visible,.ki26-brandpage-panel:focus-visible,.ki26-brandpage-more:focus-visible{outline:2px solid #19007c;outline-offset:-2px}
.ki26-brandpage-more{display:flex;width:147px;height:38px;margin:80px auto 0;align-items:center;justify-content:center;gap:8px;border:1px solid #000;border-radius:32px;color:#000;text-decoration:none;font-size:16px;line-height:19px;transition:transform .2s ease}
.ki26-brandpage-more:hover{transform:scale(1.04)}
.ki26-brandpage-more span{width:9px;height:9px;border-right:1.6px solid #000;border-bottom:1.6px solid #000;transform:translateY(-3px) rotate(45deg)}
@media(prefers-reduced-motion:reduce){.ki26-brandpage-card,.ki26-brandpage-more{transition:none}.ki26-brandpage-card:hover,.ki26-brandpage-more:hover{transform:none}}
@media(max-width:1100px){
 .ki26-brandpage{width:calc(100% - 56px);margin:0 28px;padding-bottom:90px}
 .ki26-brandpage-title{margin-top:52px;font-size:38px;line-height:46px;text-align:left}
 .ki26-brandpage-feed{margin-top:40px;gap:32px}
 .ki26-brandpage-card{grid-template-columns:minmax(0,1.44fr) minmax(0,1fr);width:100%;height:auto}
 .ki26-brandpage-media{width:100%;height:auto;min-height:280px}
 .ki26-brandpage-panel{height:auto;min-height:280px;padding:24px 24px 24px 26px}
 .ki26-brandpage-panel strong{font-size:26px;line-height:36px}
 .ki26-brandpage-more{margin:56px auto 0}
}
@media(max-width:760px){
 .ki26-brandpage{width:calc(100% - 40px);margin:0 20px;padding-bottom:72px}
 .ki26-brandpage-title{margin-top:28px;font-size:30px;line-height:38px}
 .ki26-brandpage-feed{gap:28px}
 .ki26-brandpage-card{grid-template-columns:1fr}
 .ki26-brandpage-media{height:auto;min-height:0}
 .ki26-brandpage-media img,.ki26-brandpage-media .kw26-admin-image{height:auto;aspect-ratio:1.68}
 .ki26-brandpage-panel{min-height:0;padding:20px}
 .ki26-brandpage-panel strong{font-size:24px;line-height:34px}
 .ki26-brandpage-more{margin:40px auto 0}
}

/* K-Insight article detail (Figma 241:215) */
.kid26-page{position:relative;color:#000}
/* The hero is a block composition anchored to the 996 grid, with the two purple slabs bleeding
   off the right edge exactly as Figma draws them. Anchoring to the grid instead of hard pixels
   keeps the proportions and removes the white gap that appeared on viewports wider than 1440.
   --kid-gut is the grid gutter (222 at 1440), --kid-x the hero text column (56 at 1440). */
.kid26-hero{position:relative;height:746px;overflow:hidden;--kid-gut:max(calc((100% - 996px)/2),28px);--kid-x:max(calc((100% - 996px)/2 - 166px),28px)}
.kid26-hero>*{position:absolute;margin:0}
.kid26-deco-band{left:0;right:var(--kid-gut);top:95px;height:651px;background:#dfd6f1;z-index:1}
.kid26-deco-block{left:calc(var(--kid-gut) + 612px);right:0;top:20px;height:558px;background:#4f4878;z-index:2}
.kid26-deco-foot{left:calc(var(--kid-gut) + 775px);right:0;top:573px;height:143px;background:#4f4878;z-index:2}
/* Figma draws 7x5 white 2px dots: x 1334..1424 step 15, y 260..352 step 23, i.e. 14px in from the right edge. */
.kid26-deco-dots{right:14px;top:93px;width:92px;height:94px;background-image:radial-gradient(circle at 1px 1px,#fff 0 1px,transparent 1.2px);background-size:15px 23px;z-index:3}
.kid26-hero-media{left:calc(var(--kid-gut) + 384px);top:187px;width:714px;height:468px;overflow:hidden;z-index:4}
.kid26-hero-media img,.kid26-hero-media .kw26-admin-image{display:block;width:100%;height:100%;object-fit:cover}
.kid26-hero-kind{left:var(--kid-x);top:168px;z-index:5;font-size:16px;line-height:19px;letter-spacing:.04em;text-transform:uppercase}
.kid26-hero-kind:before{content:"";position:absolute;left:0;top:-6px;width:147px;height:1px;background:#000}
.kid26-hero-social{left:calc(var(--kid-x) + 304px);top:170px;z-index:5;display:flex;gap:34px;align-items:center}
.kid26-hero-social:before{content:"";position:absolute;left:-14px;top:-8px;width:221px;height:1px;background:#000}
.kid26-hero-social a{display:flex;width:11px;height:11px;align-items:center;justify-content:center;color:#000}
.kid26-hero-social img{display:block;max-width:11px;max-height:11px;filter:brightness(0)}
.kid26-hero-social span{display:flex;width:44px;height:11px;align-items:center;justify-content:center;background:#d9d9d9;color:#000;font-size:8px;line-height:1}
.kid26-hero-social svg{display:block;width:11px;height:11px;fill:currentColor}
.kid26-hero-text{left:var(--kid-x);top:312px;z-index:5;display:flex;width:676px;height:352px;flex-direction:column}
.kid26-hero-text h1{display:-webkit-box;overflow:hidden;margin:0;-webkit-box-orient:vertical;-webkit-line-clamp:3;font-family:Lusitana;font-size:48px;line-height:50px;font-weight:700}
.kid26-hero-summary{display:-webkit-box;overflow:hidden;width:399px;margin:28px 0 0;-webkit-box-orient:vertical;-webkit-line-clamp:4;color:#4d4d4d;font-size:16px;line-height:28px}
.kid26-hero-byline{width:399px;margin:auto 0 0;color:#4d4d4d;font-size:14px;line-height:17px}

.kid26-share-rail{position:absolute;left:0;top:1115px;bottom:180px;width:84px;z-index:20}
.kid26-share-dock{position:sticky;top:24px;width:84px}
.kid26-share-trigger{position:relative;display:block;width:84px;height:84px;padding:0;border:0;background:#4f4878;color:#fff;cursor:pointer}
.kid26-share-trigger i{position:absolute;display:block;width:11px;height:11px;border:1px solid currentColor;border-radius:50%}
.kid26-share-trigger i:nth-child(1){left:27px;top:37px}
.kid26-share-trigger i:nth-child(2){left:45px;top:28px}
.kid26-share-trigger i:nth-child(3){left:45px;top:47px}
.kid26-share-trigger:before,.kid26-share-trigger:after{content:"";position:absolute;left:36px;width:20px;height:1px;background:currentColor;transform-origin:left}
.kid26-share-trigger:before{top:40px;transform:rotate(-27deg)}
.kid26-share-trigger:after{top:45px;transform:rotate(27deg)}
.kid26-share-menu{position:relative;width:84px;height:405px;background:#dfd6f1}
.kid26-share-menu[hidden],.kid26-share-status[hidden]{display:none}
.kid26-share-menu a,.kid26-share-menu button{position:absolute;left:0;display:flex;width:84px;height:60px;padding:0;align-items:center;justify-content:center;border:0;background:transparent;color:#4f4878;text-decoration:none;cursor:pointer}
.kid26-share-menu a:nth-child(1){top:12px}
.kid26-share-menu a:nth-child(2){top:90px}
.kid26-share-menu a:nth-child(3){top:169px}
.kid26-share-menu a:nth-child(4){top:249px}
.kid26-share-menu button:nth-child(5){top:326px}
.kid26-share-menu svg{display:block;width:30px;height:30px;fill:currentColor}
.kid26-share-status{position:absolute;left:127px;top:418px;width:336px;height:72px;display:flex;align-items:center;justify-content:center;background:#dfd6f1;color:#000;font-size:24px;line-height:30px;white-space:nowrap}
.kid26-share-trigger:focus-visible,.kid26-share-menu a:focus-visible,.kid26-share-menu button:focus-visible{outline:3px solid #19007c;outline-offset:-3px}

.kid26-layout{width:996px;margin:137px auto 0;padding-bottom:158px}
.kid26-layout:after{content:"";display:table;clear:both}
.kid26-related{float:right;width:368px;margin:0 -62px 0 102px}
.kid26-related h2{position:relative;margin:0 0 41px;font-size:20px;line-height:24px;font-weight:600}
/* Figma 241:246: a 368px hairline 35px below the RELATED heading top. */
.kid26-related h2:after{content:"";position:absolute;left:0;top:35px;width:100%;height:1px;background:var(--kw-line)}
.kid26-related article{width:368px;height:108px;margin-bottom:24px;background:rgba(226,219,235,.2);transition:transform .2s ease}
.kid26-related article:hover{transform:scale(1.015)}
.kid26-related article>a,.kid26-related article>div{display:flex;height:100%;padding:14px 15px 16px;flex-direction:column;justify-content:space-between;color:#000;text-decoration:none}
.kid26-related strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:16px;line-height:24px;font-weight:400}
.kid26-related small{display:flex;gap:10px;justify-content:space-between;font-size:12px;line-height:15px}
.kid26-related small span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kid26-related time{flex:0 0 auto}
.kid26-related article>a:focus-visible{outline:2px solid #19007c;outline-offset:-2px}

/* The article body is one rich-text field. It flows in the 588 column beside RELATED and
   widens to the full 996 grid once the sidebar ends, which is how Figma draws the
   Review Analytics / FAQ sections. Typography below mirrors the Figma text styles. */
.kid26-content{font-size:16px;line-height:30px;color:#000}
.kid26-content>*:first-child{margin-top:0}
.kid26-content p{margin:0 0 30px}
.kid26-content h2{margin:56px 0 24px;font-size:32px;line-height:30px;font-weight:700}
.kid26-content h3{margin:48px 0 20px;font-size:24px;line-height:30px;font-weight:700}
.kid26-content h4,.kid26-content h5{margin:36px 0 8px;font-size:20px;line-height:30px;font-weight:700}
/* Line boxes dodge the floated sidebar on their own, but block-level media does not, so any
   media inside the body is capped at the 588 column width. Without this an editor-inserted
   image wider than 588 slides under the RELATED cards. */
.kid26-content img,.kid26-content table,.kid26-content iframe,.kid26-content video,.kid26-content pre{max-width:588px}
.kid26-content img{display:block;height:auto;margin:30px 0}
.kid26-content figcaption,.kid26-content blockquote{margin:0 0 30px;color:#757575}
.kid26-content a{color:#19007c}
.kid26-content ul,.kid26-content ol{margin:0 0 30px;padding-left:24px}

/* Review Analytics and FAQ (Figma 241:215). Neither block has a CMS field behind it, so the
   Figma structure is reproduced and the parts that still need a frontend implementation carry
   frontend-text / frontend-image markers. clear:right keeps them below the floated sidebar. */
.kid26-analytics,.kid26-faq{clear:right;width:996px}
.kid26-analytics{margin-top:56px}
.kid26-analytics h2,.kid26-faq h2{margin:0;font-size:32px;line-height:30px;font-weight:700}
.kid26-analytics h3{margin:57px 0 0;font-size:24px;line-height:30px;font-weight:700}
.kid26-analytics-note{margin:21px 0 0;font-size:16px;line-height:30px;color:#757575}
/* Figma flattens both charts into bitmaps (303:2498 is 1076x351 and already draws the
   Time Period / Features pills, the legend and the axes; 303:2516 is 1024x345 and draws both
   captions and donuts), so the boxes keep those sizes and sit slightly outside the 996 grid.
   The plot areas are live ECharts: 《Frame 1》 and 《Frame 2》 specify the interactions and the news
   model already carries the data. Empty fields fall back to an admin-image marker. */
.kid26-chart img{display:block;width:100%;height:auto}
/* The pill row is now real DOM instead of part of the bitmap, so the plot heights are set to keep
   each block at the Figma bitmap height (351 and 345) and nothing below the section moves. */
.kid26-chart-trend{width:1076px;margin:20px 0 0 -44px}
.kid26-chart-drivers{display:flex;width:1024px;margin:30px 0 0 -19px;gap:22px}
.kid26-chart .kw26-frontend-image{height:293px}
.kid26-chart-drivers .kw26-frontend-image{height:311px}
.kid26-chart .kw26-admin-image{height:293px}
.kid26-chart-drivers .kw26-admin-image{height:311px}
.kid26-plot{width:100%;height:293px}
.kid26-donut{flex:1 1 0;min-width:0}
.kid26-donut-name{margin:0 0 4px;font-size:16px;line-height:30px;font-weight:600}
.kid26-donut .kid26-plot{height:311px}

/* 2026-09-01 新增：第一张 Sentiment 柱状图，尺寸对齐下方线状图，卡片底色取自设计稿 */
.kid26-chart-bar{width:1076px;margin:20px 0 0 -44px;border:1px solid #ece9f5;border-radius:16px;background:#fcfbfe}
.kid26-chart-bar .kid26-plot{height:340px}
.kid26-chart-bar .kw26-admin-image{height:340px}
/* 2026-09-01：饼图从「一个大标题 + 两个饼」改成「每个饼各自带标题」，标题跟着列走而不是通栏 */
.kid26-chart-drivers{align-items:flex-start;margin-top:57px}
.kid26-donut h3{margin:0;font-size:24px;line-height:30px;font-weight:700}
.kid26-donut .kid26-analytics-note{margin:8px 0 0}
.kid26-donut .kid26-plot{margin-top:14px}

/* Pills above the trend chart. Figma draws them inside the bitmap at 40px tall with the lilac
   fill used by the other channel controls. */
.kid26-chart-controls{display:flex;align-items:center;gap:24px;margin:30px 0 0 -44px}
.kid26-pill{position:relative}
.kid26-pill>button{display:flex;height:38px;padding:0 18px;align-items:center;gap:12px;border:1px solid #4f4878;border-radius:32px;background:#dfd6f1;color:#000;font:400 16px/19px Inter;cursor:pointer;transition:background .2s ease}
.kid26-pill>button:hover:not([disabled]){background:#d3c8e8}
.kid26-pill>button[disabled]{opacity:.45;cursor:not-allowed}
.kid26-pill>button:focus-visible{outline:2px solid #19007c;outline-offset:2px}
.kid26-pill>button i{width:12px;height:6px;background:url("../images/icon-chevron-wide.svg") center/12px 6px no-repeat;transition:transform .2s ease}
.kid26-pill.is-open>button i{transform:rotate(180deg)}
.kid26-pill ul{position:absolute;left:0;top:42px;z-index:30;min-width:100%;max-height:240px;margin:0;padding:8px 0;overflow-y:auto;list-style:none;background:#c9c0da;border:1px solid #4f4878;border-radius:8px}
.kid26-pill ul[hidden]{display:none}
.kid26-pill ul button{display:flex;width:100%;height:36px;padding:0 18px;align-items:center;gap:10px;border:0;background:transparent;color:#000;font:400 14px/36px Inter;text-align:left;white-space:nowrap;cursor:pointer}
.kid26-pill ul button:before{content:"";width:12px;height:12px;flex:none;border:1px solid #4f4878;border-radius:3px;background:#fff}
.kid26-pill ul button[aria-selected="true"]{font-weight:700}
.kid26-pill ul button[aria-selected="true"]:before{background:#4f4878}
.kid26-pill ul button:hover,.kid26-pill ul button:focus-visible{background:#b7abcd;outline:none}
.kid26-legend{display:flex;margin:0;padding:0;gap:20px;list-style:none;font-size:14px;line-height:19px}
.kid26-legend li{display:flex;align-items:center;gap:8px}
.kid26-legend li:before{content:"";width:8px;height:8px;border-radius:50%}
.kid26-legend .is-pos:before{background:#5090f1}
.kid26-legend .is-neg:before{background:#e65441}
.kid26-legend .is-neu:before{background:#e6960c}
.kid26-faq{margin-top:96px}
.kid26-faq>.kid26-analytics-note{margin-top:29px;color:#757575}
.kid26-faq-item{margin-top:37px}
.kid26-faq-item:first-of-type{margin-top:52px}
.kid26-faq-item h4{margin:0;font-size:20px;line-height:30px;font-weight:700}
/* Figma reserves two lines for each answer, which is what makes the 135px item pitch. */
.kid26-faq-item p{margin:8px 0 0;min-height:60px;font-size:16px;line-height:30px}

@media(prefers-reduced-motion:reduce){.kid26-related article,.kid26-chart-tabs button{transition:none}.kid26-related article:hover{transform:none}}
@media(max-width:1100px){
 .kid26-hero{height:auto;padding-bottom:48px}
 .kid26-hero>*{position:relative;left:auto;right:auto;top:auto}
 .kid26-deco{display:none}
 .kid26-hero-kind:before,.kid26-hero-social:before{display:none}
 .kid26-hero-media{width:calc(100% - 56px);height:auto;margin:0 28px}
 .kid26-hero-media img,.kid26-hero-media .kw26-admin-image{height:auto;aspect-ratio:1.53}
 .kid26-hero-kind{width:calc(100% - 56px);margin:28px 28px 0}
 .kid26-hero-social{width:calc(100% - 56px);margin:16px 28px 0}
 .kid26-hero-text{width:calc(100% - 56px);height:auto;margin:20px 28px 0}
 .kid26-hero-text h1{font-size:38px;line-height:44px}
 .kid26-hero-summary,.kid26-hero-byline{width:auto}
 .kid26-hero-byline{margin-top:24px}
 .kid26-share-rail{position:relative;left:auto;top:auto;bottom:auto;width:calc(100% - 56px);margin:32px 28px 0}
 .kid26-share-dock{position:relative;top:auto;width:100%}
 .kid26-share-menu{position:absolute;left:84px;top:0;width:calc(100% - 84px);height:64px;display:grid;grid-template-columns:repeat(5,1fr)}
 .kid26-share-menu a,.kid26-share-menu button,.kid26-share-menu a:nth-child(n),.kid26-share-menu button:nth-child(5){position:relative;left:auto;top:auto;width:100%;height:64px}
 .kid26-share-status{left:0;top:96px;width:100%;height:64px;font-size:20px}
 .kid26-layout{width:calc(100% - 56px);margin:48px 28px 0;padding-bottom:96px}
 .kid26-related{float:none;width:100%;margin:48px 0 0}
 .kid26-related article{width:100%}
 .kid26-content img,.kid26-content table,.kid26-content iframe,.kid26-content video,.kid26-content pre{max-width:100%}
 .kid26-analytics,.kid26-faq{width:100%}
 .kid26-chart-trend,.kid26-chart-drivers,.kid26-chart-controls,.kid26-chart-bar{width:100%;margin-left:0}
 .kid26-chart-controls{flex-wrap:wrap;gap:16px}
 .kid26-chart .kw26-frontend-image,.kid26-chart-drivers .kw26-frontend-image{height:240px}
}
@media(max-width:760px){
 .kid26-hero-media{width:calc(100% - 40px);margin:0 20px}
 .kid26-hero-kind,.kid26-hero-social,.kid26-hero-text{width:calc(100% - 40px);margin-left:20px;margin-right:20px}
 .kid26-hero-text h1{font-size:30px;line-height:38px}
 .kid26-share-rail{width:calc(100% - 40px);margin:24px 20px 0}
 .kid26-share-trigger{width:64px;height:64px}
 .kid26-share-trigger i:nth-child(1){left:19px;top:28px}
 .kid26-share-trigger i:nth-child(2){left:37px;top:19px}
 .kid26-share-trigger i:nth-child(3){left:37px;top:38px}
 .kid26-share-trigger:before{left:28px;top:31px}
 .kid26-share-trigger:after{left:28px;top:36px}
 .kid26-share-menu{left:64px;width:calc(100% - 64px)}
 .kid26-share-menu svg{width:24px;height:24px}
 .kid26-layout{width:calc(100% - 40px);margin:32px 20px 0;padding-bottom:72px}
 .kid26-content h2{font-size:26px;margin-top:40px}
 .kid26-content h3{font-size:20px;margin-top:32px}
 .kid26-analytics h2,.kid26-faq h2{font-size:26px}
 .kid26-analytics h3{font-size:20px;margin-top:40px}
 .kid26-chart .kw26-frontend-image,.kid26-chart-drivers .kw26-frontend-image{height:200px}
 .kid26-chart-drivers{flex-direction:column;gap:24px}
 .kid26-donut .kid26-plot{height:260px}
 .kid26-chart-bar .kid26-plot,.kid26-chart-bar .kw26-admin-image{height:280px}
 .kid26-donut h3{font-size:20px}
 .kid26-legend{flex-wrap:wrap;gap:8px 16px;font-size:13px}
 .kid26-faq{margin-top:64px}
}

/* Figma zero-height VECTOR hairlines missed on the first pass: 996px dividers above the Latest
   and Compare sections on the home page (214:443 at y=1713, 214:399 at y=2877) and a 368px rule
   35px under the FEATURED heading on the category detail page (214:589). */
.ki26-latest,.ki26-compare{position:relative}
.ki26-latest:before,.ki26-compare:before{content:"";position:absolute;left:0;width:100%;height:1px;background:var(--kw-line)}
.ki26-latest:before{top:-55px}
.ki26-compare:before{top:-57px}
.ki26-featured h2{position:relative}
.ki26-featured h2:after{content:"";position:absolute;left:0;top:35px;width:100%;height:1px;background:var(--kw-line)}
/* Figma 217:112 draws a down chevron on the category detail View More button. */
.ki26-view-more{gap:8px}
.ki26-view-more span{width:9px;height:9px;border-right:1.6px solid #000;border-bottom:1.6px solid #000;transform:translateY(-3px) rotate(45deg)}
@media(max-width:1100px){.ki26-latest:before,.ki26-compare:before{display:none}}

/* K-Insight Brand rail (Figma 563:1742). Per the navigation guide the rail slides out from the
   right when the fixed BRAND button is hovered; clicking a brand opens that brand page. */
.ki26-brandrail-wrap{position:fixed;right:0;bottom:36px;z-index:60}
.ki26-brandrail-wrap .ki26-float-brand{position:absolute;right:74px;bottom:0}
/* 746px is the Figma height; the cap keeps the top from ever covering the channel nav (167px). */
.ki26-brandrail{position:absolute;right:0;bottom:0;width:456px;height:746px;max-height:calc(100vh - 203px);background:linear-gradient(90deg,#e2dbeb 0%,#fff 71.6%);box-shadow:-18px 0 44px rgba(44,38,75,.18);transform:translateX(100%);opacity:0;visibility:hidden;pointer-events:none;transition:transform .32s ease,opacity .32s ease,visibility .32s}
.ki26-brandrail-wrap.is-open .ki26-brandrail{transform:none;opacity:1;visibility:visible;pointer-events:auto}
.ki26-brandrail-scroll{height:100%;padding:26px 39px 26px 49px;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#e5def4 #4f4878}
.ki26-brandrail-scroll::-webkit-scrollbar{width:13px}
.ki26-brandrail-scroll::-webkit-scrollbar-track{background:#4f4878}
.ki26-brandrail-scroll::-webkit-scrollbar-thumb{width:9px;border:2px solid #4f4878;border-radius:4px;background:#e5def4}
.ki26-brandrail-group+.ki26-brandrail-group{margin-top:51px}
/* Figma 563:1742 rhythm, measured from the panel top: heading 26, rule 79, grid 82, label 146.
   The heading box is 29 tall, so the grid sits 27px below it. Row pitch was 116, now 126.
   Divider colour is the channel purple #504878, not the pale --kw-line it started on. */
.ki26-brandrail-group h2{position:relative;margin:0 0 27px;font-size:24px;line-height:29px;font-weight:600;color:#000}
.ki26-brandrail-group h2:after{content:"";position:absolute;left:0;top:53px;width:368px;max-width:100%;height:1px;background:#504878}
/* Logo size and spacing (2026-08-11). The 88x60 cap put 88px of artwork in a 122.7px cell, so
   neighbouring wordmarks came within 35px of each other and the square badges (iQOO, Redmi,
   Xiaomi) read as heavy blocks. The cap drops about a quarter to 64x44, which lifts the worst-case
   horizontal clearance to 59px, and a 36px row gap takes the row pitch from 116 to 126, so the
   vertical clearance goes 56 -> 82. The grid stays inside the 368px padding box so it keeps
   spanning exactly the width of the divider rule above it; the extra breathing room comes from the
   artwork, not from widening the column. */
.ki26-brandrail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 0}
.ki26-brandrail-grid a{display:flex;height:90px;flex-direction:column;align-items:center;justify-content:flex-start;color:#000;text-decoration:none;transition:transform .2s ease}
.ki26-brandrail-grid a:hover{transform:scale(1.06)}
.ki26-brandrail-grid a:focus-visible{outline:2px solid #19007c;outline-offset:2px}
.ki26-brandrail-logo{display:flex;width:100%;height:48px;align-items:center;justify-content:center}
.ki26-brandrail-logo img{display:block;max-width:64px;max-height:44px;object-fit:contain}
.ki26-brandrail-logo .kw26-admin-image{width:58px;height:28px;font-size:9px}
.ki26-brandrail-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:42px;font-weight:600;text-align:center}
@media(prefers-reduced-motion:reduce){.ki26-brandrail,.ki26-brandrail-grid a{transition:none}.ki26-brandrail-grid a:hover{transform:none}}
@media(max-width:760px){
 .ki26-brandrail-wrap{bottom:16px}
 .ki26-brandrail-wrap .ki26-float-brand{right:16px}
 .ki26-brandrail{width:calc(100vw - 24px);max-width:400px;height:auto;max-height:calc(100vh - 120px)}
 .ki26-brandrail-scroll{padding:20px 24px}
 .ki26-brandrail-group h2{font-size:20px;margin-bottom:24px}
 .ki26-brandrail-grid{gap:26px 0}
 .ki26-brandrail-grid a{height:80px}
 .ki26-brandrail-logo{height:42px}
 .ki26-brandrail-logo img{max-width:56px;max-height:38px}
 .ki26-brandrail-name{line-height:38px}
}

/* Brand home / Browse By Brand (Figma 498:44). Reached from the channel nav "Brand" and from the
   BRAND floating button href. All brands grouped by product category, five per row. */
/* Content width (2026-08-11, third pass). At 1440 the design puts this section on the shared 996
   grid: the group heading sits at x=222, exactly where the channel nav starts, so the 222px side
   margins are correct and must not change. Above 1440 a hard 996 leaves 462px of white per side,
   which is what reads as "too much margin", so the block grows with the viewport and stops at the
   1222 grid the masthead logo is already anchored to. clamp keeps 1440 pixel-exact (100% - 444 =
   996) and reaches the 1222 cap at 1884, with no jump at any breakpoint. */
.ki26-brandhome{width:clamp(996px,calc(100% - 444px),1222px);margin:0 auto;padding-bottom:274px}
.ki26-brandhome>h1{margin:45px 0 0;text-align:center;font-size:48px;line-height:58px;font-weight:600}
.ki26-brandhome-group{margin-top:24px}
.ki26-brandhome-group+.ki26-brandhome-group{margin-top:76px;padding-top:76px;border-top:1px solid var(--kw-line)}
.ki26-brandhome-group h2{margin:0;font-size:32px;line-height:39px;font-weight:600}
/* Row pitch and the gap under the group heading (2026-08-11). Figma hand-places the rows at
   153-182px pitch, mean about 167; the previous 148+8 = 156 sat at the bottom of that range and
   read as cramped. 148+20 = 168 lands on the design mean.
   margin-top 21 replaces 5: in the design the heading sits in an 81px-tall text box whose glyphs
   are 32px, so roughly 21px of that box is slack below the glyphs before the logo row starts. Our
   heading box is glyph-tight at 39px, so that slack has to be added back explicitly.
   Cell content is left aligned rather than centred so the first column lines up with the heading.
   The design gets the same effect a different way: its five columns are hand-placed on a ~220px
   pitch, wider than 996/5 = 199.2 and starting left of the grid, which puts the first column's
   logo left edge at 213-237 against a heading at x=222. Reproducing that would make this one
   section wider than the 996 grid every other section uses, so the cells keep the grid and the
   content hugs the left edge instead, which pins every column to a stable x. */
/* Icon breathing room (2026-08-11, second pass). With five columns locked to the 996 grid the
   pitch barely moves: cell = (996 - 4g)/5, so pitch = cell + g = 199.2 + 0.2g. Going from a 40px
   to a 72px column gap only widens the pitch from 207 to 214. What actually decides how far apart
   the icons look is the logo cap, because the content is left aligned and the clearance is
   pitch minus logo width. The 150px cap was the binding constraint at 57px of clearance, so it
   comes down to 128 here, which lifts the worst case to about 86px. Row gap goes 20 -> 44. */
/* Density (2026-08-11, third pass). A fixed logo cap smaller than the cell leaves dead space at
   the end of every row: with a 128px cap on a 141px cell the last column stopped 14px short of the
   grid and the right side of the page looked emptier than the left. The design has no such gap
   because it hand-sizes each logo up to 249x144, which no CMS upload can reproduce, so the cap is
   tied to the cell instead (max-width:100%). Every row now spans the full content width and the
   logos grow with it above 1440. Column gap 72 -> 80 keeps the clearance at 80px (cell 135, pitch
   215) while the logos get 7px wider; row pitch stays 192 (160 + 32) so the vertical rhythm the
   previous pass settled on is unchanged. */
.ki26-brandhome-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:32px 80px;margin-top:21px}
/* min-width:0 is load bearing. A grid item's automatic minimum is its min-content width, and for a
   replaced element that is the image's intrinsic width, so an oversized upload pushed the cell past
   its track: logos measured 164px in a 135px cell, the row ran 8px past the container and the
   clearance between neighbours dropped from 80 to 51. Zeroing the minimum lets max-width:100% cap
   every logo at the cell. */
.ki26-brandhome-grid a{display:flex;min-width:0;height:160px;flex-direction:column;align-items:flex-start;justify-content:flex-start;color:#000;text-decoration:none;transition:transform .2s ease}
.ki26-brandhome-grid a:hover{transform:scale(1.05)}
.ki26-brandhome-grid a:focus-visible{outline:2px solid #19007c;outline-offset:2px}
.ki26-brandhome-logo{display:flex;width:100%;height:112px;align-items:center;justify-content:flex-start}
.ki26-brandhome-logo img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.ki26-brandhome-logo .kw26-admin-image{width:120px;height:48px;font-size:11px}
/* The name may run 56px past its cell, into the column gap. Capping it at the cell truncated
   "La Roche-Posay" and "Charlotte Tilbury", which the design prints in full (it lets the label
   overhang the column and wraps the longest one onto a second line; wrapping is not an option here
   because the row height is fixed). 56px still leaves 25px between two worst-case neighbours, and
   the last column ends 166px inside the viewport at 1440. Both narrower breakpoints put the cells
   closer to the viewport edge, so they pull the cap back to the cell. */
.ki26-brandhome-name{display:block;max-width:calc(100% + 56px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:20px;line-height:48px;font-weight:600;text-align:left}
@media(prefers-reduced-motion:reduce){.ki26-brandhome-grid a{transition:none}.ki26-brandhome-grid a:hover{transform:none}}
@media(max-width:1100px){
 .ki26-brandhome{width:calc(100% - 56px);margin:0 28px;padding-bottom:120px}
 .ki26-brandhome>h1{margin-top:36px;font-size:38px;line-height:46px}
 .ki26-brandhome-group+.ki26-brandhome-group{margin-top:52px;padding-top:52px}
 .ki26-brandhome-group h2{font-size:26px;line-height:32px}
 .ki26-brandhome-grid{grid-template-columns:repeat(4,1fr);gap:32px 60px}
 .ki26-brandhome-grid a{height:150px}
 .ki26-brandhome-logo{height:102px}
 .ki26-brandhome-logo img{max-width:150px;max-height:96px}
 .ki26-brandhome-name{max-width:100%;font-size:16px;line-height:44px}
}
@media(max-width:760px){
 .ki26-brandhome{width:calc(100% - 40px);margin:0 20px;padding-bottom:80px}
 .ki26-brandhome>h1{margin-top:28px;font-size:30px;line-height:38px}
 .ki26-brandhome-grid{grid-template-columns:repeat(2,1fr);gap:32px 24px}
 .ki26-brandhome-grid a{height:124px}
 .ki26-brandhome-logo{height:84px}
 .ki26-brandhome-logo img{max-height:80px}
 .ki26-brandhome-name{font-size:14px;line-height:40px}
}

/* Compare Models form (Figma 549:859, dropdown 563:1585, filled state 563:1651).
   Reached from the channel nav "Compare". Cascading picks: one category, one or two brands,
   two models, then Start Comparison. */
/* padding, not a top margin on the h1: a collapsing margin would push the whole gradient band
   down by 58px and drag every row with it. */
.kic26-intro{height:921px;padding-top:58px;box-sizing:border-box;background:linear-gradient(90deg,#dfd6f1 0%,#fff 100%)}
.kic26-intro-inner{width:996px;margin:0 auto}
.kic26-intro h1{margin:0;font-size:48px;line-height:58px;font-weight:600}
.kic26-intro p{width:510px;margin:21px 0 0;font-size:16px;line-height:30px}
/* The form overlays the gradient band, so it is pulled back up over it. */
.kic26-form{position:relative;width:996px;margin:-670px auto 0;padding-bottom:216px}
.kic26-form-label{margin:0;font-size:24px;line-height:29px;font-weight:600}
/* Figma uses 16px after the first label and 12px after the other two; 14 keeps every row
   within 2px of the design. */
.kic26-form-label+.kic26-row{margin-top:14px}
.kic26-row{display:flex;gap:115px}
.kic26-row+.kic26-form-label{margin-top:47px}
.kic26-select{position:relative;width:245px}
.kic26-select-trigger{display:flex;width:245px;height:46px;padding:0 18px;align-items:center;justify-content:center;border:0;border-radius:8px;background:#4f4878;color:#fff;font:600 20px/30px Inter;cursor:pointer;transition:background .2s ease}
.kic26-select-trigger:hover:not([disabled]){background:#3f3a63}
.kic26-select-trigger[disabled]{opacity:.45;cursor:not-allowed}
.kic26-select-trigger:focus-visible{outline:3px solid #19007c;outline-offset:2px}
.kic26-select-trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kic26-select-menu{position:absolute;left:7px;top:47px;z-index:30;width:231px;max-height:191px;margin:0;padding:0;overflow-y:auto;list-style:none;background:#c9c0da;border:1px solid #4f4878;box-sizing:border-box}
.kic26-select-menu[hidden]{display:none}
.kic26-select-menu li{margin:0}
.kic26-select-menu button{display:block;width:100%;height:48px;padding:0 18px;border:0;background:transparent;color:#000;font:400 12px/48px Inter;text-align:center;cursor:pointer}
.kic26-select-menu button:hover,.kic26-select-menu button:focus-visible{background:#b7abcd;outline:none}
.kic26-select-menu button[aria-selected="true"]{font-weight:700}
.kic26-submit{display:block;width:158px;height:46px;margin:47px 0 0;border:1px solid #4f4878;border-radius:8px;background:#f6f6ff;color:#000;font:600 14px/30px Inter;cursor:pointer;transition:transform .2s ease,background .2s ease}
.kic26-submit:hover:not([disabled]){transform:scale(1.03);background:#efeeff}
.kic26-submit[disabled]{opacity:.45;cursor:not-allowed}
.kic26-submit:focus-visible{outline:3px solid #19007c;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.kic26-submit,.kic26-select-trigger{transition:none}.kic26-submit:hover:not([disabled]){transform:none}}
@media(max-width:1100px){
 .kic26-intro{height:auto;padding:40px 0;box-sizing:content-box}
 .kic26-intro-inner{width:calc(100% - 56px);margin:0 28px}
 .kic26-intro h1{font-size:38px;line-height:46px}
 .kic26-intro p{width:auto}
 .kic26-form{width:calc(100% - 56px);margin:40px 28px 0;padding-bottom:96px}
 .kic26-row{gap:24px}
 .kic26-row+.kic26-form-label{margin-top:32px}
}
@media(max-width:760px){
 .kic26-intro{padding:28px 0}
 .kic26-intro-inner{width:calc(100% - 40px);margin:0 20px}
 .kic26-intro h1{font-size:30px;line-height:38px}
 .kic26-form{width:calc(100% - 40px);margin:32px 20px 0;padding-bottom:72px}
 .kic26-form-label{font-size:20px;line-height:26px}
 .kic26-row{flex-direction:column;gap:14px}
 .kic26-select,.kic26-select-trigger{width:100%}
 .kic26-select-menu{left:0;width:100%}
}

/* Compare result (Figma 310:2532). Same template as the form: with ?a=&b= it renders the
   result, with &change=1 it falls back to the pre-filled form (Figma 549:545).
   The result body sits on a 1180 grid (129..1309 in the 1440 frame), not the 996 one the
   intro band uses, because the RELATED row is 3x368 + 2x38. */
.kic26-intro-short{height:259px}
.kicr26-result{width:1180px;margin:0 auto;color:#000}
/* Figma 549:545 puts Browse By Brand at (121,480) and the breadcrumb at (121,532). */
.kicr26-browse{position:relative;z-index:40;width:198px;margin:54px 0 0 -9px}
.kicr26-browse-trigger{display:flex;width:198px;height:38px;padding:0 21px;align-items:center;justify-content:space-between;border:1px solid #000;border-radius:32px;background:#dfd6f1;color:#000;font:400 16px/19px Inter;cursor:pointer}
.kicr26-browse-trigger i{width:12px;height:6px;background:url("../images/icon-chevron-wide.svg") center/12px 6px no-repeat}
.kicr26-browse.is-open .kicr26-browse-trigger i{transform:rotate(180deg)}
.kicr26-browse-trigger:focus-visible{outline:2px solid #19007c;outline-offset:2px}
.kicr26-browse-menu{position:absolute;left:21px;top:38px;width:177px;padding:22px 0;background:#c9c0da}
.kicr26-browse-menu[hidden]{display:none}
.kicr26-browse-menu>div{position:relative}
.kicr26-browse-menu>div>a{display:flex;height:48px;padding:0 10px;align-items:center;justify-content:center;color:#000;text-decoration:none;text-align:center;font-size:12px;line-height:16px}
.kicr26-browse-menu>div>a:hover,.kicr26-browse-menu>div:focus-within>a{font-weight:700}
.kicr26-browse-sub{position:absolute;left:177px;top:0;width:154px;background:#ebe6f5;display:none}
.kicr26-browse-menu>div:hover .kicr26-browse-sub,.kicr26-browse-menu>div:focus-within .kicr26-browse-sub{display:block}
.kicr26-browse-sub a{display:flex;height:48px;padding:0 10px;align-items:center;justify-content:center;color:#000;text-decoration:none;text-align:center;font-size:12px;line-height:16px}
.kicr26-browse-sub a:hover{font-weight:700}
.kicr26-crumb{width:213px;height:36px;margin:14px 0 0 -9px;padding:0 0 0 21px;box-sizing:border-box;border-radius:24px;background:rgba(223,214,241,.3);color:#848484;font-size:14px;line-height:36px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Two model heads plus the VS mark. Figma hand-places them at 192 / 691 / 871, so the gaps
   are pinned instead of using space-between (which would drift the VS by ~12px). */
/* 41 keeps the model heads on Figma's y=609 now that Browse By Brand sits above the breadcrumb,
   so every block from the Change Model button down stays exactly where 310:2532 puts it. */
.kicr26-heads{display:flex;width:1026px;margin:41px 0 0 62px;align-items:flex-start}
.kicr26-head{width:347px;flex:none;margin:0}
.kicr26-head h2{display:-webkit-box;overflow:hidden;width:243px;height:80px;margin:0 auto;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:24px;line-height:40px;font-weight:600;text-align:center}
.kicr26-head h2 a{color:#000;text-decoration:none}
.kicr26-head h2 a:hover{text-decoration:underline}
/* The year is the publish year: there is no model-year field in the CMS. */
.kicr26-head h2 span{display:block}
.kicr26-shot{position:relative;width:347px;height:234px;margin:5px 0 0;overflow:hidden}
.kicr26-shot img{display:block;width:100%;height:100%;object-fit:cover}
.kicr26-change{display:block;width:217px;height:46px;margin:31px auto 0;border-radius:8px;background:#4f4878;color:#fff;font-size:20px;line-height:46px;font-weight:600;text-align:center;text-decoration:none;transition:background .2s ease}
.kicr26-change:hover,.kicr26-change:focus-visible{background:#3f3a63;color:#fff}
/* Fixed width so the right-hand head lands on the Figma x (871) whatever the glyph metrics. */
.kicr26-vs{width:51px;flex:none;margin:168px 129px 0 152px;font-size:36px;line-height:44px;font-weight:700}

/* Spec panels: 359 + 326 + 359 = 1044, which is the 1180 grid inset by 68 on both sides. */
.kicr26-specs{display:flex;margin:83px 68px 0;align-items:flex-start}
.kicr26-panel{width:359px;height:723px;flex:none;box-sizing:border-box;padding:28px 18px 0;border:1px solid #19007c;border-radius:8px;background:#e2dbeb;text-align:center}
.kicr26-panel-name{margin:0;font-family:Lusitana;font-size:24px;line-height:30px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kicr26-sentiment{margin:39px 0 0;color:#7f5fff}
.kicr26-sentiment strong{display:block;font-size:32px;line-height:34px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kicr26-sentiment span{display:block;font-size:14px;line-height:20px;font-weight:700}
/* 11 rows, 51px each: Figma steps 51.04 on average and 52 would push the last row past the
   panel edge. */
.kicr26-panel ul,.kicr26-axis ul{margin:10px 0 0;padding:0;list-style:none}
/* Figma draws a hairline above every spec row as a zero-height VECTOR (549:550-563 across the
   middle column, 549:566-577 and 549:580-591 inside each panel). A RECTANGLE-only scan misses
   them, which is why they were absent until the 549:545 audit. */
.kicr26-panel li,.kicr26-axis li{position:relative}
.kicr26-panel li:before,.kicr26-axis li:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(25,0,124,.16)}
.kicr26-panel li{font-size:14px;line-height:51px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kicr26-axis{flex:1 1 auto;padding:13px 0 0;text-align:center}
.kicr26-axis h3{margin:0;font-size:24px;line-height:30px;font-weight:700}
.kicr26-axis-lead{margin:33px 0 0;font-size:16px;line-height:30px;font-weight:600}
.kicr26-axis ul{margin:25px 0 0}
.kicr26-axis li{font-size:16px;line-height:51px;font-weight:600}
.kicr26-note{margin:0;color:#757575;font-size:12px;line-height:30px}

/* Feature comparison: one panel, bars grow inwards from both sides towards the centre label. */
.kicr26-features{height:454px;margin:83px 68px 0 67px;box-sizing:border-box;border:1px solid #19007c;border-radius:8px;background:#e2dbeb}
.kicr26-features-head{display:flex;height:80px;align-items:center;justify-content:center;gap:50px}
.kicr26-features-head h3{margin:0;font-size:24px;line-height:30px;font-weight:700}
.kicr26-legend{display:flex;max-width:180px;align-items:center;gap:13px;font-family:Lusitana;font-size:16px;line-height:20px;font-weight:700;overflow:hidden;white-space:nowrap}
.kicr26-legend i{width:20px;height:20px;flex:none;border-radius:50%}
.kicr26-legend-a i{background:#2800c9}
.kicr26-legend-b i{background:#ff9900}
.kicr26-feature-row{display:flex;height:52px;padding:0 21px 0 64px;align-items:center}
.kicr26-features-head+.kicr26-feature-row{margin-top:2px}
.kicr26-score{width:83px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700}
.kicr26-score+.kicr26-bar{margin-left:0}
.kicr26-bar{position:relative;width:210px;height:7px;flex:none;border-radius:24px;background:#d9d9d9}
.kicr26-bar i{position:absolute;top:0;height:7px;border-radius:24px}
/* A grows right-to-left, B left-to-right; widths stay 0 until the sentiment scores exist. */
.kicr26-bar-a i{right:0;background:#2800c9}
.kicr26-bar-b i{left:0;background:#ff9900}
.kicr26-feature-label{width:116px;flex:none;margin:0 105px 0 109px;font-size:16px;font-weight:600;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kicr26-bar-b+.kicr26-score{margin-left:42px}
.kicr26-note-inpanel{margin:9px 0 0;padding-left:62px}

/* Key discussion drivers. The two donuts live in one 1024x345 asset (the same one the article
   detail page uses full width); each slot crops one half of it. */
.kicr26-drivers h3{margin:70px 0 0 67px;font-size:24px;line-height:30px;font-weight:700}
.kicr26-drivers-grid{display:flex;margin-left:30px;gap:100px}
.kicr26-driver{width:504px;flex:none}
.kicr26-driver-name{margin:47px 0 0 36px;font-family:Lusitana;font-size:24px;line-height:52px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kicr26-chart{position:relative;height:345px}
.kicr26-chart-pos{width:498px}
.kicr26-chart-neg{width:504px}
.kicr26-chart-name{margin:0;font-size:16px;line-height:30px;font-weight:600}
.kicr26-plot{width:100%;height:315px}
.kicr26-chart .kw26-admin-image{height:315px}
.kicr26-drivers .kicr26-note{margin:3px 0 0 84px}
.kicr26-topics{margin:32px 0 0 68px;color:#19007c;font-size:13px;line-height:30px}
.kicr26-topics span{margin-right:11px}

/* 2026-09-01：原来这里按设计稿画了两条装饰竖线（Figma vectors 549:765 / 549:766），高度是写死的
   1044px / 717px。2026-08-25 删掉 Overall Parameters 和 Feature Comparison 两个区块后版面变矮，
   这两条线就穿出内容区、一直拖到 Topics 下面，客户反馈「有一根线被插入在这个页面了」。
   装饰线本身没有信息量，直接去掉，不再用写死高度去凑。 */
.kicr26-drivers-grid{position:relative}
.kicr26-related{display:block;margin:0;padding-bottom:185px}
.kicr26-related h3{position:relative;margin:85px 0 0 -3px;font-size:20px;line-height:24px;font-weight:600}
/* Every RELATED heading in this design carries a 368x1 rule 35px below its top (Figma 549:794). */
.kicr26-related h3:after{content:"";position:absolute;left:1px;top:35px;width:368px;height:1px;background:var(--kw-line)}
.kicr26-related-grid{display:grid;margin-top:50px;grid-template-columns:repeat(3,368px);gap:19px 38px}
.kicr26-related article{position:relative;height:108px;background:rgba(226,219,235,.2)}
.kicr26-related a,.kicr26-related-grid>article>div{display:block;height:100%;color:#000;text-decoration:none}
.kicr26-related strong{display:-webkit-box;overflow:hidden;width:352px;padding:14px 0 0 15px;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:16px;line-height:24px;font-weight:400}
.kicr26-related small{position:absolute;left:15px;right:18px;top:77px;display:flex;justify-content:space-between;gap:10px;font-size:12px;line-height:15px}
.kicr26-related small span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}
.kicr26-related small time{flex:none}
.kicr26-related a:hover strong{text-decoration:underline}
.kicr26-placeholder{opacity:.6}

/* Change model overlay. The guide asks for the page behind to lighten and for a panel with a
   brand search, prev/next arrows and a three-up carousel whose centre card is largest; Figma
   549:545 gives the sizes: band 1440x532, centre card 461x311, side cards 347x234, arrows 19x43,
   search pill 157x38. */
.kicr26-swap{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.68)}
.kicr26-swap[hidden]{display:none}
body.kicr26-swap-open{overflow:hidden}
.kicr26-swap-panel{position:relative;width:100%;height:532px;background:#e2dbeb;--kics-x:max(calc((100% - 1440px)/2),0px)}
.kicr26-swap-track{display:flex;height:311px;margin:93px 0 0;align-items:center;justify-content:center;gap:4px;transition:transform .18s ease}
.kicr26-swap-track.is-moving{transform:scale(.99)}
.kicr26-swap-card{position:relative;display:block;padding:0;border:0;background:transparent;color:#000;cursor:pointer;transition:opacity .18s ease,transform .18s ease}
.kicr26-swap-card.is-centre{width:461px;height:311px}
/* "后面的模型稍浅+稍小" — the flanking cards are smaller and lighter. */
.kicr26-swap-card.is-side{width:347px;height:234px;opacity:.62}
.kicr26-swap-card:hover,.kicr26-swap-card:focus-visible{opacity:1;transform:scale(1.02);outline:none}
.kicr26-swap-card:focus-visible{box-shadow:0 0 0 3px #19007c}
.kicr26-swap-name{position:absolute;left:50%;bottom:100%;width:243px;margin-bottom:14px;transform:translateX(-50%);font-size:24px;line-height:36px;font-weight:600;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kicr26-swap-shot{display:block;width:100%;height:100%;overflow:hidden}
.kicr26-swap-shot img{display:block;width:100%;height:100%;object-fit:cover}
.kicr26-swap-arrow{position:absolute;top:207px;width:19px;height:43px;padding:0;border:0;background:transparent;cursor:pointer}
.kicr26-swap-arrow i{display:block;width:19px;height:19px;border-top:3px solid #4f4878;border-right:3px solid #4f4878}
.kicr26-swap-prev{left:calc(var(--kics-x) + 74px)}
.kicr26-swap-prev i{transform:rotate(-135deg)}
.kicr26-swap-next{left:calc(var(--kics-x) + 1360px)}
.kicr26-swap-next i{transform:rotate(45deg)}
.kicr26-swap-arrow:focus-visible{outline:2px solid #19007c;outline-offset:4px}
.kicr26-swap-brand{position:absolute;left:calc(var(--kics-x) + 97px);top:430px;width:298px;margin:0;font-size:36px;line-height:43px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kicr26-swap-search{position:absolute;left:calc(var(--kics-x) + 426px);top:430px;display:flex;width:157px;height:38px;padding:0 17px;align-items:center;border:1px solid #19007c;border-radius:32px}
.kicr26-swap-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#19007c;font:400 16px/19px Inter}
.kicr26-swap-search button{width:15px;height:15px;flex:0 0 15px;padding:0;border:1px solid #19007c;border-radius:50%;background:transparent;cursor:pointer}
.kicr26-swap-close{position:absolute;right:calc(var(--kics-x) + 40px);top:24px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.7);color:#19007c;font-size:26px;line-height:38px;cursor:pointer}
.kicr26-swap-close:focus-visible{outline:2px solid #19007c;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.kicr26-change,.kicr26-swap-track,.kicr26-swap-card{transition:none}.kicr26-swap-card:hover,.kicr26-swap-card:focus-visible{transform:none}}

@media(max-width:1240px){
 .kicr26-result{width:calc(100% - 56px);margin:0 28px}
 .kicr26-browse{margin-left:0}
 .kicr26-crumb{margin-left:0}
 .kicr26-drivers-grid:before,.kicr26-drivers-grid:after{display:none}
 .kicr26-swap-panel{height:auto;padding:32px 28px 40px}
 .kicr26-swap-track{height:auto;margin:44px 0 0;gap:16px}
 .kicr26-swap-card.is-centre{width:46%;height:auto;aspect-ratio:461/311}
 .kicr26-swap-card.is-side{width:27%;height:auto;aspect-ratio:347/234}
 .kicr26-swap-name{font-size:16px;line-height:24px;width:100%;margin-bottom:8px}
 .kicr26-swap-arrow{position:static;top:auto}
 .kicr26-swap-prev,.kicr26-swap-next{left:auto}
 .kicr26-swap-brand,.kicr26-swap-search{position:static;left:auto;top:auto;margin-top:24px}
 .kicr26-swap-brand{width:auto;font-size:24px;line-height:32px}
 .kicr26-swap-close{right:20px;top:16px}
 .kicr26-browse-sub{position:relative;left:0;top:auto;width:100%;background:#e6e0f2}
 .kicr26-heads{width:auto;margin:48px 0 0;justify-content:center}
 .kicr26-vs{margin:168px 40px 0}
 .kicr26-specs{margin:56px 0 0;gap:16px}
 .kicr26-panel{width:auto;flex:1 1 0;padding-left:10px;padding-right:10px}
 .kicr26-features{margin:56px 0 0}
 .kicr26-feature-row{padding:0 12px}
 .kicr26-feature-label{margin:0 24px}
 .kicr26-bar{width:auto;flex:1 1 0;margin:0 16px}
 .kicr26-drivers h3{margin-left:0}
 .kicr26-drivers-grid{margin-left:0;gap:24px}
 .kicr26-driver{width:auto;flex:1 1 0;min-width:0}
 .kicr26-driver-name{margin-left:0}
 .kicr26-chart,.kicr26-chart-pos,.kicr26-chart-neg{width:auto}
 .kicr26-drivers .kicr26-note{margin-left:0}
 .kicr26-topics{margin-left:0}
 .kicr26-related h3{margin-left:0}
 .kicr26-related-grid{grid-template-columns:repeat(2,1fr);gap:19px 24px}
 .kicr26-related strong{width:auto;padding-right:15px}
 .kicr26-related{padding-bottom:96px}
}
@media(max-width:760px){
 .kicr26-result{width:calc(100% - 40px);margin:0 20px}
 .kicr26-crumb{margin-top:28px}
 .kicr26-heads{flex-direction:column;align-items:center;gap:20px}
 .kicr26-head{width:100%;max-width:347px}
 .kicr26-head h2{width:100%;height:auto;font-size:20px;line-height:30px}
 .kicr26-shot{width:100%;height:auto;aspect-ratio:347/234}
 .kicr26-vs{margin:0}
 .kicr26-specs{flex-wrap:wrap}
 .kicr26-panel{height:auto;padding-bottom:20px;flex:1 1 100%;order:2}
 .kicr26-panel+.kicr26-axis{order:1}
 .kicr26-axis{flex:1 1 100%}
 .kicr26-features{height:auto;padding-bottom:20px}
 .kicr26-features-head{height:auto;padding:20px 12px;flex-wrap:wrap;gap:16px}
 .kicr26-feature-row{height:auto;padding:6px 12px;flex-wrap:wrap;justify-content:center;row-gap:6px}
 .kicr26-feature-label{width:100%;margin:0;order:-1}
 .kicr26-score{width:60px;font-size:12px}
 .kicr26-bar{margin:0 8px}
 .kicr26-note-inpanel{padding-left:12px}
 .kicr26-drivers-grid{flex-direction:column;gap:0}
 .kicr26-driver-name{font-size:20px;line-height:40px}
 .kicr26-related-grid{grid-template-columns:1fr}
 .kicr26-related{padding-bottom:72px}
}
/* Editorial typography: model/article headlines use Lusitana; labels, specs and controls stay Inter. */
.ki26-hero h1,.ki26-latest-copy strong,.ki26-compare-copy strong,.ki26-list-copy strong,.ki26-featured strong,.ki26-brandpage-panel strong,.kid26-related strong,.kicr26-head h2 a,.kicr26-related strong{font-family:Lusitana}
.ki26-latest-copy strong,.ki26-compare-copy strong,.ki26-list-copy strong,.ki26-featured strong,.ki26-brandpage-panel strong,.kid26-related strong,.kicr26-head h2 a,.kicr26-related strong{font-weight:700}
/* The earlier flat 18px compensation is superseded by the three-tier card scale below. */
/* Card typography tiers (scale defined in home.css).
   Large  : Latest rows on the home page, the 588px cards on detail page 1, the brand page cards.
   Medium : the 448px Compare cards.
   Small  : FEATURED, article RELATED and compare-result RELATED. */
.ki26-latest-copy strong,.ki26-list-copy strong,.ki26-brandpage-panel strong{font-size:var(--kw-card-lg-title);line-height:var(--kw-card-lg-title-lh)}
.ki26-latest-copy p,.ki26-list-copy p,.ki26-brandpage-panel p{font-size:var(--kw-card-lg-text);line-height:var(--kw-card-lg-text-lh)}
.ki26-compare-copy strong{font-size:var(--kw-card-md-title);line-height:var(--kw-card-md-title-lh)}
.ki26-compare-copy p,.ki26-compare-copy small{font-size:var(--kw-card-md-text);line-height:var(--kw-card-md-text-lh)}
.ki26-featured strong,.kid26-related strong,.kicr26-related strong{font-size:var(--kw-card-sm-title);line-height:var(--kw-card-sm-title-lh)}
.ki26-featured small,.kid26-related small,.kicr26-related small{font-size:var(--kw-card-meta);line-height:var(--kw-card-meta-lh)}
/* Content-driven cards (2026-08-07): titles and intros show in full, no ellipsis. Figma heights
   become floors via min-height so short cards keep their bottom whitespace and long ones grow. */
.ki26-latest-copy strong,.ki26-latest-copy p,.ki26-compare-copy strong,.ki26-compare-copy p,.ki26-list-copy strong,.ki26-list-copy p,.ki26-featured strong,.ki26-brandpage-panel strong,.ki26-brandpage-panel p,.kid26-related strong,.kicr26-related strong{display:block;overflow:visible;-webkit-line-clamp:none;-webkit-box-orient:initial;max-width:none}
.ki26-latest-row,.ki26-list-layout,.ki26-brandpage-card{align-items:start}
.ki26-latest-media,.ki26-latest-copy{height:auto;min-height:445px}
.ki26-compare-copy{height:auto;min-height:467px}
.ki26-list-media,.ki26-list-copy{height:auto;min-height:261px}
.ki26-brandpage-media,.ki26-brandpage-panel{height:auto;min-height:350px}
.ki26-featured article,.kid26-related article,.kicr26-related article{height:auto;min-height:108px}
.kicr26-related strong{width:auto}
/* Text hugs the bottom of the panel (2026-08-07), see kranking.css for the reasoning. Only the
   panels that carry a meta line at the bottom are affected; panels without one (Latest, the
   detail-page list cards, the brand page) keep their text under the label as designed. */
.ki26-compare-copy{justify-content:flex-start}
/* 2026-09-01：客户反馈标题(BMW M3)和正文之间空隙太大。原来 p{margin-top:auto} 把正文
   推到卡片底部，跟标题拉开一大段空白。改成正文紧跟标题（8px），把底部的
   HIGHLIGHTS / KEY SPECS（small）用 margin-top:auto 顶到卡片底部。 */
.ki26-compare-copy p{margin-top:8px}
.ki26-compare-copy strong{margin-bottom:8px}
.ki26-compare-copy small{margin-top:auto}
.ki26-featured article>a,.ki26-featured article>div,.kid26-related article>a,.kid26-related article>div{justify-content:flex-start}
.ki26-featured small,.kid26-related small{margin-top:auto}
/* The compare-result RELATED meta was absolutely placed at top:77px, which a now-unclamped title
   would run straight into. Put it back in the flow, heading on top and meta at the bottom. */
.kicr26-related a,.kicr26-related-grid>article>div{display:flex;flex-direction:column;justify-content:flex-start;padding:14px 18px 16px 15px}
.kicr26-related strong{padding:0}
.kicr26-related small{position:static;left:auto;right:auto;top:auto;margin-top:auto}
/* Same fix as kflow.css: min-height belongs on the flex container, not the <article>. */
.ki26-featured article,.kid26-related article,.kicr26-related article{min-height:0}
.ki26-featured article>a,.ki26-featured article>div,.kid26-related article>a,.kid26-related article>div,.kicr26-related a,.kicr26-related-grid>article>div{min-height:108px;height:auto}
.ki26-featured strong,.kid26-related strong,.kicr26-related strong{margin-bottom:12px}

/* K-Insight home type scale (business spec, 2026-08-10). Two of the specified sizes fall outside
   the shared card tiers, so they are pulled out here rather than pushed into home.css: the Latest
   row headline is 36 where the large tier gives 32, and HIGHLIGHTS is 13 at 1.85x where the medium
   tier gives 12. Editing the tokens would silently move K-Flow and K-Ranking as well, and it would
   also move this channel's own category and brand pages, which stay on 32. */
.ki26-latest-copy strong{font-size:36px;line-height:1.5}
/* The Compare intro is 16 at 1.5x, which is exactly the large-tier body token, so borrowing that
   token also inherits its correct 15px step-down at 760 and needs no breakpoint of its own. */
.ki26-compare-copy p{font-size:var(--kw-card-lg-text);line-height:var(--kw-card-lg-text-lh)}
.ki26-compare-copy small{font-size:13px;line-height:1.85}
/* This block has to sit after the tier declarations above. @media does not raise specificity, so a
   step-down placed in the earlier 760 block would lose to them on source order. 27 keeps the ratio
   the desktop pair has: 36/32 applied to the large tier's 24 at this breakpoint. */
@media(max-width:760px){
 .ki26-latest-copy strong{font-size:27px}
}

/* K-Insight home Latest row (2026-08-11). Body copy is Inter 400 at 15, which is one step below
   the shared large-tier body token, so it is declared here instead of moving the token and
   dragging the detail-page and brand-page cards with it. */
.ki26-latest-copy p{font-size:15px;line-height:1.5;font-weight:400}
/* The two thumbnails must be exactly the same box, and the same height as the copy panel beside
   them. They were not: the no-truncation pass gave the media height:auto with a 445 floor, and
   img{height:100%} against an auto-height parent degrades to auto, so each photo grew to its own
   intrinsic ratio (546 and 544.3 at 1440) and both overhung the 445 panel. Pinning the Figma
   ratio 485/445 makes the height a pure function of the column width, so every row matches and
   at 1440 it resolves to exactly 445. min-height is cleared so the ratio is the only input.
   The ratio is scoped above 760 because the phone layout has its own 1.1 ratio on the image, but
   min-height:0 is not scoped: on phones the 445 floor was leaving 127px of dead space under a
   318px-tall photo, because the 760 block never cleared the floor set by the rule above it. */
.ki26-latest-media{min-height:0}
@media(min-width:761px){
 .ki26-latest-media{aspect-ratio:485/445}
 .ki26-latest-media img,.ki26-latest-media .kw26-admin-image{width:100%;height:100%;object-fit:cover}
}

/* Latest and Compare panel tint (2026-08-11). The Figma rectangles are filled #e2dbeb, but their
   layer opacity is far below 100%, so the design renders a very pale tint rather than the
   full-strength colour. Exporting 214:382 (Latest panel) and 241:137 (Compare panel) as images
   shows both nearly white, which is why reading the fill value alone was misleading. Both panels
   sit directly on the white page background, so an rgba tint composites to exactly what the
   design shows: .2 over white resolves to #f9f8fb.
   The alpha is 20% because the rest of the theme already settled on that value for the same pale
   treatment: the FEATURED, article RELATED and compare-result RELATED cards all use
   rgba(226,219,235,.2), and K-Flow's LATEST panel is the flat #f9f8fb, which is exactly that tint
   over white. get_node_info strips the node opacity so it cannot be read back from the file, but
   two independent places in the theme agree on 20%.
   Extended 2026-08-11 to the category-detail and brand-page card panels after exporting 217:76
   (588x261 list card panel) and 241:379 (408x349 brand panel), which render the same pale tint.
   Left alone on purpose: the compare-result spec panels and Feature Comparison box, and the swap
   overlay band. Those carry a 1px #19007c border and were not export-checked, so they keep the
   solid fill until verified separately. */
.ki26-latest-copy,.ki26-compare-copy,.ki26-list-copy,.ki26-brandpage-panel{background:rgba(226,219,235,.2)}

/* Compare connector glyphs (Figma 241:185 / 241:186 per row, repeated as 241:187 / 241:188 on the
   second row). Two 67x1 hairlines sit in the gap between the two compared cards, each carrying a
   diamond stroke cap: the upper line's diamond is on its left end, the lower line's on its right.
   They are zero-height VECTORs, which is why a RECTANGLE-only scan missed them until now.
   Geometry, measured frame-relative and converted to card-relative (card top = media top, left
   card spans x 222..670, the gap is 670..772): upper line x 691..758 -> left 469, centre 367;
   lower line x 682..749 -> left 460, centre 403. Both sit inside the gap and overlap, which is
   how the design draws them.
   The lower line is a horizontally flipped copy, so scan_nodes_by_types reported its x as the
   RIGHT edge (749). Taking that as the left edge first pushed the glyph 67px too far right, where
   it crossed into the second card. Always convert a flipped node's x by subtracting its width.
   The diamond cap falls outside the vector bbox, so each glyph is drawn as a 79x12 box whose SVG
   holds the diamond plus the 67px line, shifted 12px left for the left-capped glyph so the line
   itself still starts at the Figma x.
   Colour, stroke width and diamond size are read off the exported image: get_node_info times out
   on these vector nodes, so they could not be taken from the file. Adjust here if the design
   gives exact values.
   Desktop only: below 1101 the grid switches to auto-fit columns with a 40px gap, which cannot
   hold a 67px glyph, and at 760 it becomes a single column. */
@media(min-width:1101px){
 .ki26-compare-card{overflow:visible}
 .ki26-compare-card:nth-child(odd){position:relative}
 .ki26-compare-card:nth-child(odd):before,.ki26-compare-card:nth-child(odd):after{content:"";position:absolute;z-index:2;width:79px;height:12px;background-repeat:no-repeat}
 .ki26-compare-card:nth-child(odd):before{left:457px;top:361px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='12'%3E%3Cpath d='M6 0 12 6 6 12 0 6z' fill='%236c63b0'/%3E%3Crect x='12' y='5.5' width='67' height='1' fill='%236c63b0'/%3E%3C/svg%3E")}
 .ki26-compare-card:nth-child(odd):after{left:460px;top:397px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='12'%3E%3Crect x='0' y='5.5' width='67' height='1' fill='%236c63b0'/%3E%3Cpath d='M73 0 79 6 73 12 67 6z' fill='%236c63b0'/%3E%3C/svg%3E")}
}

/* Category-detail and brand-page card media (2026-08-11). Same defect the Latest row had above,
   and the same fix. The no-truncation pass gave these media boxes height:auto with a min-height
   floor, and img{height:100%} against an auto-height parent degrades to auto, so each photo grew
   to its own intrinsic ratio. Measured on the Dior Beauty brand page (category 61), whose four
   thumbnails are all portrait: the 588x350 media box rendered 588x662 at 1440 and 571x643 at
   1024. The brand card also still carried a hard height:350px, so at 1440 the 662px photo hung
   312px out of its own card and painted over the card beneath it, while the placeholder card's
   grey admin-image marker collapsed to 22px and was overdrawn. Pinning the Figma ratio 588/350
   makes the height a pure function of the column width and restores the designed crop.
   min-height is cleared unscoped, not inside the 761 block: the 350 and 261 floors set after the
   media queries were also overriding the phone layout, leaving 141px of dead space under a 209px
   photo at 390. The card gets height:auto with the 350 floor so a long description can still grow
   the panel without overflowing, which was the whole point of the content-driven pass. */
.ki26-brandpage-card{height:auto;min-height:350px}
.ki26-list-media,.ki26-brandpage-media{min-height:0}
@media(min-width:761px){
 .ki26-list-media,.ki26-brandpage-media{aspect-ratio:588/350}
 .ki26-list-media img,.ki26-list-media .kw26-admin-image,.ki26-brandpage-media img,.ki26-brandpage-media .kw26-admin-image{width:100%;height:100%;object-fit:cover}
}

/* Brand home group headings are links to their product-category page (2026-08-11). Those four
   pages (categories 5-8) share kinsight_list.html with Latest and had no inbound link anywhere on
   the site, so the only way in was to type the address. Figma does not draw an entry point for
   them, and the group heading is the one element on the page that already names the category, so
   it carries the link. Colour comes from body.ki26-page via .kw26-page a{color:inherit}; only the
   underline and the hover cue are set here. */
.ki26-brandhome-group h2 a{color:inherit;text-decoration:none;display:inline-block;transition:transform .2s ease}
.ki26-brandhome-group h2 a:hover{transform:scale(1.03)}
.ki26-brandhome-group h2 a:focus-visible{outline:2px solid #19007c;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.ki26-brandhome-group h2 a{transition:none}.ki26-brandhome-group h2 a:hover{transform:none}}
/* ==========================================================================
   2026-09-01：文章详情页「正文 + RELATED」从 float 改成显式两列 grid

   客户反馈：某些文章正文跑到 RELATED 下面、整条横通，RELATED 看着偏中间，
   而且"在后台改不了"。原因是原来 .kid26-related 用 float:right，正文靠文字环绕排在左边。
   float 环绕对正文 HTML 很敏感：只要编辑器里的内容形成了 BFC（从 Word 粘来的表格、
   带 overflow 的 div、被包在浮动/flex 容器里的段落等），这个块就拒绝跟浮动并排，
   会被整体挤到浮动下面，于是浮动左边留一大片空白、正文横通排在下面。
   这是排版方式本身的脆弱性，后台改内容改不掉。

   改成 grid 之后，正文列和 RELATED 列是两个独立轨道，正文里放什么 HTML 都不会
   影响 RELATED 的位置。
   轨道尺寸刻意对齐原来的 float 结果，正常文章的观感完全不变：
     正文列 588px（= 原来文字环绕可用的宽度）
     间距 102px（= 原来 .kid26-related 的 margin-left）
     RELATED 列 368px，再用 margin-right:-62px 保留原本那 62px 右侧外探
     → RELATED 依旧落在 690~1058，跟改之前同一位置
   ========================================================================== */
.kid26-layout{display:grid;grid-template-columns:588px 368px;column-gap:102px;align-items:start}
/* 原来的 float 清除伪元素在 grid 里会变成一个多余的网格项，必须关掉 */
.kid26-layout:after{display:none}
.kid26-content{grid-column:1;grid-row:1;min-width:0}
.kid26-related{grid-column:2;grid-row:1;float:none;width:368px;margin:0 -62px 0 0}
.kid26-analytics{grid-column:1 / -1;grid-row:2;clear:none}

@media(max-width:1100px){
  /* 窄屏单列。顺便修正阅读顺序：HTML 里 RELATED 写在正文前面，原来 float:none 之后
     RELATED 会顶到正文上方，先看到一堆相关文章才看到本文。这里用 grid-row 把正文排在前面。 */
  .kid26-layout{grid-template-columns:minmax(0,1fr);column-gap:0}
  .kid26-content{grid-column:1;grid-row:1}
  .kid26-related{grid-column:1;grid-row:2;width:100%;margin:48px 0 0}
  .kid26-analytics{grid-column:1;grid-row:3}
}
/* ==========================================================================
   2026-09-02：中和正文里从外部粘贴进来的行内样式

   客户反馈线上某些文章（例：id=280 BMW M3）正文横冲出去、压在 RELATED 上面。
   查了线上 HTML，正文是从 AI 对话框直接粘进编辑器的（段落带 class="ds-markdown-paragraph"），
   每个 <span> 上带着 style="... white-space: pre; ..."。
   white-space:pre 会让文字完全不换行——无视容器宽度、也无视浮动和网格列宽，
   于是整段沿一行横冲过去，压在右侧 RELATED 上。这不是布局参数写错，光把布局改成
   grid 也兜不住（文字照样溢出列宽），必须把这条行内样式本身中和掉。

   行内 style 的优先级高于普通选择器，只有样式表里的 !important 能压过去，所以这里用了
   !important。只针对带 style 属性的元素，且不碰 pre / code（那两个本来就该保留 pre 换行）。

   一起中和的还有粘贴带来的 font-family 和 background-color：外部字体和白底会覆盖主题样式，
   让文章正文跟全站字体不一致。color 保留不动，避免把作者有意做的强调色也清掉。
   ========================================================================== */
.kid26-content p[style],.kid26-content p[style] span[style],
.kid26-content li[style],.kid26-content li[style] span[style],
.kid26-content div[style],.kid26-content div[style] span[style],
.kid26-content span[style],.kid26-content strong[style],.kid26-content em[style]{
  white-space:normal!important;
  font-family:inherit!important;
  background-color:transparent!important}
/* 超长英文单词 / 粘进来的长 URL 不要撑破列宽 */
.kid26-content{overflow-wrap:break-word}
/* 粘进来的图片、表格、代码块不要超出正文列 */
.kid26-content img,.kid26-content table,.kid26-content iframe,.kid26-content video,.kid26-content pre{max-width:100%}
.kid26-content table{display:block;overflow-x:auto}
/* ==========================================================================
   2026-09-03：文章页 hero 的长标题不再压到右侧配图上

   客户反馈：车名长的时候（例：Porsche Cayenne Coupé Electric）标题会伸到配图下面。

   原因是宽度没约束好。桌面端 hero 里两块都是绝对定位：
     .kid26-hero-text   left = --kid-x            宽 676px
     .kid26-hero-media  left = --kid-gut + 384px  宽 714px
   在 1440 视口下 --kid-gut = 222、--kid-x = 56，于是
     文字块 56 ~ 732
     配图   606 ~ 1320
   两者本身就重叠了 126px。副标题和署名各自限了 399px 宽所以碰不到图，
   只有 h1 继承了父级的 676px，标题一长就伸进重叠区。文字 z-index 比图高，
   所以是压在图上面，不是被图挡住。

   这里给 h1 加一个跟着配图位置算出来的最大宽度：
     可用宽度 = 配图左边缘 - 文字块左边缘 = (--kid-gut + 384px) - --kid-x
     再留 44px 间距，标题就永远停在配图左侧，且随视口变化自动跟随，
     不用为每个断点写死数值。
   窄屏（≤1100px）hero 会改成纵向堆叠、图文不再并排，这个限制要撤掉，
   否则标题会被无意义地压窄。

   对照：K-Ranking 文章页同款版式没有这个问题——它的 .krd26-hero-text 宽 504px、
   left 87px（到 591），配图从 630px 起，本来就留了 39px 空隙。 */
.kid26-hero-text h1{max-width:calc(var(--kid-gut) + 384px - var(--kid-x) - 44px)}
@media(max-width:1100px){
  .kid26-hero-text h1{max-width:none}
}

/* ==========================================================================
   2026-09-04：Brand 总览页改版（依据客户《Brand Page修改》素材包的 style.css）

   本次只改视觉与图片，三件事：
     1. 品牌宫格改成卡片式：描边 + 圆角 + 浅底，logo 与品牌名居中
     2. logo 按尺寸档（badge 方形徽标 / wide 横向字标 / tall 竖向徽标）分别限制最大尺寸
     3. 分组之间统一用一条分隔线，标题字号按素材包收窄

   没有改的：页头、K-Insight 频道导航、分组与品牌的跳转链接、品牌数据来源（仍是后台栏目）。
   logo 图片改为取素材包文件，映射见 template 里的 brandpage_logo_map.html。

   两处刻意偏离素材包，理由如下：
     容器宽度 —— 素材包是 min(1240px, 100% - clamp(96px,16vw,240px))，这里保持原有的
       clamp(996px, 100% - 444px, 1222px)。因为频道导航要求不动，换容器会让本页内容与
       上方导航左右不对齐。
     断点 —— 素材包用 1060/780/520，这里用主题既有的 1100/760 再加素材包的 520。
       页头、页脚、频道导航都在 1100/760 换挡，本页跟着走才不会出现半档错位。
       列数梯度与素材包一致：5 → 4 → 3 → 2。

   为什么追加在文件末尾而不是就地改上面第 563-634 行：原规则分散在 563-634 与 1056-1059
   两处，就地改容易漏；追加块级联在后逐条覆盖，回滚只需删掉本块加映射文件。
   注意上面第 615-634 行的 1100/760 媒体查询里有同名声明，源顺序在本块之前，所以本块的
   无条件规则会覆盖它们；凡是需要按断点变化的属性（h1 上边距、分组内边距、列数、logo 台高度）
   都在本块自己的媒体查询里重新给了值，不要依赖上面那两段。
   ========================================================================== */
.ki26-brandhome{padding-bottom:92px}
/* h1 的上下留白对应素材包 .page-heading-padding:66px 0 38px。素材包里 38px 是垫在
   kicker/lede/分类胶囊下面的，本页没有这三块，所以 38px 直接给 h1 的下边距，
   与第一条分隔线的距离才和素材包一致。 */
.ki26-brandhome>h1{margin:66px 0 38px;color:#15141a;font-size:clamp(38px,4vw,58px);line-height:1;letter-spacing:-.045em;font-weight:700}
/* 素材包 h1 用的是 #15141a 近黑，主题原来继承 body 的 --kw-ink(#19007c) 蓝紫。
   这里按素材包走；若客户想回到原来的蓝紫，删掉上面这条 color 即可。 */
.ki26-brandhome-group{margin-top:0;padding:46px 0 54px;border-top:1px solid #e5e2ed}
.ki26-brandhome-group+.ki26-brandhome-group{margin-top:0;padding-top:46px}
/* line-height 必须显式写 normal：素材包的 h2 没声明行高、继承的 body 也没声明，最终是 normal；
   本主题 body.kw26-page 有 line-height:1.6，不写就会继承成 40px，反而偏离素材包。 */
.ki26-brandhome-group h2{margin:0 0 22px;font-size:25px;line-height:normal;letter-spacing:-.025em;font-weight:700}
.ki26-brandhome-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:0}
/* 卡片：高度改为 min-height，让 2 行品牌名（Charlotte Tilbury、La Roche-Posay）能自然撑高，
   同排靠 grid 默认的 stretch 保持等高。原来是固定 height:160px + 左对齐。 */
.ki26-brandhome-grid a{height:auto;min-height:132px;align-items:center;justify-content:center;padding:17px 14px 15px;border:1px solid #eceaf1;border-radius:10px;background:#fbfbfd;color:#15141a;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.ki26-brandhome-grid a:hover{z-index:1;border-color:#d6d1e4;box-shadow:0 10px 24px rgba(50,43,79,.08);transform:translateY(-2px)}
.ki26-brandhome-logo{height:68px;justify-content:center}
/* 尺寸档用 min(设计值,100%)：档位规则的特异性(0,3,2)高于媒体查询里的 (0,1,1)，
   单写固定 px 会在窄屏把 logo 顶出卡片，min() 同时兼顾设计上限与卡片宽度，
   这样不用为每个断点重复写一遍。 */
.ki26-brandhome-logo img{max-width:min(136px,100%);max-height:46px}
.ki26-brandhome-grid a[data-shape="badge"] .ki26-brandhome-logo img{max-width:min(58px,100%);max-height:58px}
.ki26-brandhome-grid a[data-shape="tall"] .ki26-brandhome-logo img{max-width:min(62px,100%);max-height:58px}
.ki26-brandhome-grid a[data-shape="wide"] .ki26-brandhome-logo img{max-width:min(148px,100%);max-height:40px}
.ki26-brandhome-logo .kw26-admin-image{width:auto;max-width:100%;height:44px;font-size:10px}
/* 品牌名：素材包是居中、14px/1.2、可换行。原来是左对齐、20px/48px、nowrap + 省略号，
   所以这里要把 white-space 和 text-overflow 一起改回来，否则长名字仍然被截断。 */
.ki26-brandhome-name{max-width:100%;overflow:visible;white-space:normal;text-overflow:clip;margin:9px 0 0;font-size:14px;line-height:1.2;font-weight:700;text-align:center}
@media(max-width:1100px){
 .ki26-brandhome{padding-bottom:80px}
 .ki26-brandhome>h1{margin-top:56px}
 .ki26-brandhome-group{padding:40px 0 46px}
 .ki26-brandhome-group+.ki26-brandhome-group{padding-top:40px}
 .ki26-brandhome-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
 .ki26-brandhome-grid a{height:auto;min-height:132px}
 .ki26-brandhome-logo{height:68px}
}
@media(max-width:760px){
 .ki26-brandhome{padding-bottom:70px}
 .ki26-brandhome>h1{margin-top:50px}
 .ki26-brandhome-group{padding:34px 0 40px}
 .ki26-brandhome-group+.ki26-brandhome-group{padding-top:34px}
 .ki26-brandhome-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
 .ki26-brandhome-grid a{min-height:124px;padding:14px 10px 12px}
 .ki26-brandhome-logo{height:58px}
}
@media(max-width:520px){
 .ki26-brandhome{padding-bottom:64px}
 .ki26-brandhome-group h2{font-size:22px}
 .ki26-brandhome-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 上面第 613 行的 reduced-motion 保护在本块之前，会被本块的 transition / :hover transform
   盖掉，所以在这里重新声明一次。 */
@media(prefers-reduced-motion:reduce){
 .ki26-brandhome-grid a{transition:none}
 .ki26-brandhome-grid a:hover{transform:none}
}