/* Public layout v3: Feishu responsive content grid. Loaded after page styles by website-shell.
   Backgrounds stay full bleed; content never expands beyond the reading grid. */
:root{--kl-content-max:100%;--kl-gutter:16px;--kl-page:min(var(--kl-content-max),calc(100% - var(--kl-gutter) - var(--kl-gutter)));--page:var(--kl-page);--kl-text-nav:16px;--kl-text-menu:16px;--kl-text-menu-description:13px;--kl-text-footer:14px}
@media(min-width:768px){:root{--kl-content-max:100%;--kl-gutter:24px}}
@media(min-width:1024px){:root{--kl-content-max:1120px;--kl-gutter:32px}}
@media(min-width:1280px){:root{--kl-content-max:1200px;--kl-gutter:40px}}
@media(min-width:1536px){:root{--kl-content-max:1280px;--kl-gutter:48px}}
.kl-site{--page:var(--kl-page);font-size:var(--kl-text-body)}
/* Full-bleed artwork uses the available body width, excluding scrollbars. */
body{container-type:inline-size}
body .container,body .header-inner,.kl-site main,.kl-site .kh-footer{width:var(--kl-page);margin-inline:auto}
.kl-site main>*{min-width:0}
.kl-site main .container{width:100%}
.kl-site main :is(.kl-section,.kh-section)>:is(p,.cms-rich){overflow-wrap:anywhere}
.kl-site main h2{font-size:var(--kl-title-size);line-height:var(--kl-title-line);height:auto;min-height:0;margin-bottom:56px}
.kl-site main h3{font-size:26px;line-height:1.5;white-space:normal}
.kl-site main :is(#workflow,#managed-cases){margin-left:0;width:100%}
.kl-site main :is(#cases,#partners,#fde,#learn,#managed-cases)>h2{line-height:var(--kl-title-line)}
.kl-site :is(.kh-section,#fde,#partners,.co-process,.ko-plans,.ko-fees){margin-bottom:var(--kl-section-gap)}

/* One navigation breakpoint for CSS and navigation.js. */
body .header-inner,.kl-site .header-inner{gap:24px;height:48px}
body .header,.kl-site .header{height:96px;padding-block:24px}
body .brand-logo,.kl-site .brand-logo{width:172px;height:auto;flex-shrink:0}
body .primary-nav,.kl-site .primary-nav{margin-left:auto;margin-right:auto;gap:24px}
body :is(.nav-trigger,.nav-direct),.kl-site :is(.nav-trigger,.nav-direct){font-size:var(--kl-text-nav);line-height:24px;padding:0;gap:8px}
body .header-actions,.kl-site .header-actions{gap:16px;flex-shrink:0}
body .header-actions .login,.kl-site .header-actions .login{display:flex;align-items:center;justify-content:center;width:136px;height:48px;font-size:var(--kl-text-nav);font-weight:500;line-height:24px;color:#000;background:transparent;border:1px solid #333;border-radius:100px}
body .header-actions .btn,.kl-site .header-actions .btn{width:190px;height:48px;font-size:var(--kl-text-nav);font-weight:500;line-height:24px;padding:0;white-space:nowrap;color:#fff;background:#333;border:0;border-radius:100px}
.kl-site .nav-caret{width:12px;height:12px}
@media(min-width:1280px){
 body .primary-nav{height:100%;flex-shrink:0}
 body .nav-entry{display:flex;align-items:center;height:100%}
 body .nav-panel{top:calc(100% + 12px)}
 .kl-site .content-panel{left:calc(50% - 320px)}
 body .primary-nav[data-navigation-version] .nav-entry{position:static}
 body .nav-panel-illustrated{left:calc(50% - 440px);right:auto;width:880px}
}

/* Hero and section rhythm. */
.kl-site .kh-hero,.kh-offering .ko-hero{padding-top:160px;text-align:center}
.kl-site .kh-hero{padding-bottom:160px}
.kl-site .kh-hero h1,.kh-offering .ko-hero h1{font-size:60px;line-height:1.4;max-width:1040px;margin-inline:auto}
.kl-site .kh-hero>p,.kh-offering .ko-hero>p{max-width:720px;font-size:18px;line-height:30px;margin:24px auto 0;left:0}
.kl-site :is(.kh-hero-actions,.ko-hero-actions){gap:32px;margin-top:36px}
.kl-site .kh-button,.ko-hero-actions .kh-button{font-size:18px;min-width:176px;height:54px;min-height:0}
.kl-site .kh-hero-actions .kh-button,.ko-hero-actions .kh-button{width:194px}
.kl-site .kh-scenes,.co-services .kh-scenes{gap:32px;padding:0;min-height:0}
.kl-site .kh-scenes>:is(a,article)+:is(a,article):before{left:-17px;height:100%}
.kl-site .kh-scenes h3{font-size:24px;line-height:36px;margin-top:12px}
.kl-site .kh-scenes p{font-size:18px;line-height:30px;min-height:0;margin-top:20px}
.co-services>h2{padding:0}
.kl-site .kh-eyebrow{font-size:18px}

/* Workflows use proportionate artwork, with no screen-sized offsets. */
.kh-workflow,.co-workflow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:48px;width:100%;min-height:0;padding:0}
.kh-workflow-visual{height:auto;aspect-ratio:951/680;align-self:center}
.kh-browser-shell{inset:4.85% 0 4.1%;border-radius:32px}
.kh-browser-panel{top:12.06%;height:77.5%;border-radius:22px}
.kh-workflow-screen{top:5.12%;height:auto;mask:none}
.co-workflow-art{width:100%;height:auto;aspect-ratio:724/653;align-self:center}
.kl-site .kh-steps{gap:24px;transform:none}
.kl-site .kh-step h3{font-size:24px;line-height:36px}
.kl-site .kh-step[open]{padding-block:24px}
.kl-site .kh-step[open] .kh-step-dot{top:45px}
.kl-site .kh-step p{font-size:18px;line-height:30px;padding:8px 22px 0 91px;min-height:0}

/* Home service cards and capability panels. */
.kh-services{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;max-width:1080px;margin-inline:auto}
.kh-service{width:auto;min-height:0;overflow:hidden}
.kh-service-bg{inset:0;width:100%;height:100%;transform:none;object-fit:fill}
.kh-service-copy{padding:40px 32px}
.kh-service-title{flex-wrap:wrap;white-space:normal;gap:8px 16px}
.kh-home .kh-service h3{font-size:32px;line-height:48px}
.kh-service-title>span{font-size:14px}
.kh-home .kh-service-desc{font-size:18px;line-height:30px;white-space:normal;min-height:60px;margin-bottom:28px}
.kh-service-link{height:56px;border:1px solid #333;border-radius:999px}
.kh-service-link .kh-service-button-art{transition:opacity .2s ease}
.kh-service:not(.kh-managed) .kh-service-link:hover,.kh-service:not(.kh-managed) .kh-service-link:focus-visible{background:#146fe8;border-color:#146fe8;color:#fff}
.kh-service:not(.kh-managed) .kh-service-link:hover .kh-service-button-art,.kh-service:not(.kh-managed) .kh-service-link:focus-visible .kh-service-button-art{opacity:0}
.kh-managed .kh-service-link{background:#146fe8;border-color:#146fe8}
.kh-service-button-art{width:100%;height:100%;left:0;transform:none}
.kh-service-rule{width:100%;margin-block:36px}
.kh-service li{font-size:18px;line-height:30px;align-items:flex-start}
.kh-service li img{margin-top:7px}
.kh-capabilities{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:64px;min-height:0;align-items:center}
.kh-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kh-tabs button{font-size:16px;height:54px;white-space:normal}
.kh-cap-panel{padding-top:40px}
.kh-cap-panel>p,.kh-cap-panel li{font-size:18px;line-height:30px}
.kh-cap-panel .kh-button{margin-top:28px}
.kh-cap-visual{align-self:center;margin-top:0!important;border-radius:32px}
.kh-cap-screen{mask:none}
.kh-assets{gap:24px}
.kh-asset-visual{border-radius:32px}
.kh-asset-copy{padding:28px 16px 0}
.kh-home .kh-asset-copy h3{font-size:24px;line-height:36px;white-space:normal}
.kh-asset-copy p{font-size:18px;line-height:30px;text-align:left}
.kh-asset-copy h3,.kh-asset-copy .kh-chevron{transition:color .2s ease,filter .2s ease}
.kh-assets article a:hover h3,.kh-assets article a:focus-visible h3{color:#146fe8}
.kh-assets article a:hover .kh-chevron,.kh-assets article a:focus-visible .kh-chevron{filter:invert(28%) sepia(75%) saturate(1017%) hue-rotate(187deg) brightness(90%) contrast(117%)}
.kh-transformation{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:64px}
.kh-transformation>div>p{font-size:18px;line-height:30px;max-width:780px}
.kh-transformation li,.kh-transformation li:first-child{gap:14px;padding-top:20px;height:auto;min-height:130px}
.kh-fde-icon,.kh-transformation li:first-child .kh-fde-icon{width:90px;height:90px;margin:0}
.kh-fde-rule{margin:0}
.kh-transformation li>span{font-size:24px;line-height:36px;margin:0;width:28px}
.kh-home .kh-transformation h3{font-size:24px;line-height:36px;white-space:normal}
.kh-transformation li p{font-size:16px;line-height:28px;white-space:normal;padding-bottom:20px}
.kh-transformation li:last-child>div:last-of-type{margin:0}
.kh-logos{grid-template-columns:repeat(6,minmax(0,1fr));gap:48px 24px;padding:0}
.kh-logos img{width:100%;height:auto;max-height:60px}
.kh-salon{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.kh-salon details,.kh-salon details[open]{padding:32px 0}
.kh-salon summary,.kh-salon [open] summary{gap:20px;min-height:56px}
.kh-home .kh-salon-list h3,.kh-salon [open] h3{font-size:24px;line-height:36px}
.kh-round{width:52px;height:52px}
.kh-round img{width:26px;height:26px}
.kh-salon details>p{font-size:18px;line-height:30px;margin-left:56px;max-width:calc(100% - 72px)}
.kh-salon-art{height:640px}
.kh-salon-copy{padding:120px 40px 0}
.kh-home .kh-salon-copy h3{font-size:40px;line-height:60px}
.kh-salon-topics{gap:20px;flex-wrap:wrap;margin-top:28px}
.kh-salon-topics span{font-size:18px;line-height:30px}
.kh-home .kh-salon-status{font-size:20px;height:148px;text-align:center;padding:24px}
.kh-salon-k{left:45%}
.kh-salon-number{color:#E7E7E7}

/* Cases: two proportionate cards; the homepage retains native scrolling. */
.kl-site .kh-cases{gap:32px;padding:0;grid-template-columns:repeat(2,minmax(0,1fr))}
.kl-site .kh-case-carousel .kh-cases{grid-template-columns:none;grid-auto-columns:calc((100% - 32px)/2)}
.kl-site .kh-cases article{min-height:0;border-radius:32px}
.kh-case-art{height:auto;aspect-ratio:780/395}
.kh-case-tianyang img{width:186.55%;left:-83.53%;top:-18.637%}
.kh-case-ykqy img{width:139.487%;left:-15.385%;top:-47.27%}
.kl-site .kh-case-copy{padding:32px}
.kl-site .kh-case-copy h3{font-size:24px;line-height:36px;white-space:normal;flex-wrap:wrap;gap:8px 12px}
.kl-site .kh-case-copy p{font-size:18px;line-height:30px;height:60px;-webkit-line-clamp:2;margin-top:16px}
.kl-site .kh-case-link{font-size:20px;line-height:30px;margin-top:24px}
.kl-site .kh-case-link,.kl-site .kh-case-link .kh-chevron{transition:color .2s ease,filter .2s ease}
.kl-site .kh-case-link:hover,.kl-site .kh-case-link:focus-visible{color:#146fe8}
.kl-site .kh-case-link:hover .kh-chevron,.kl-site .kh-case-link:focus-visible .kh-chevron{filter:invert(28%) sepia(75%) saturate(1017%) hue-rotate(187deg) brightness(90%) contrast(117%)}
.kh-case-controls{top:6px}
.kh-case-controls button{width:48px;height:48px}
.kh-cases-action .kh-button{left:0}

/* Pricing, service process and delivery cards. */
.ko-plans{margin-top:72px}
.ko-plan-grid{gap:24px;margin-top:48px}
.ko-plan{padding:36px 28px;min-height:0;border-radius:32px}
.kh-offering .ko-plan h3{font-size:28px;line-height:40px;gap:16px;flex-wrap:wrap}
.ko-recommended{font-size:14px;padding-inline:12px}
.kh-offering :is(.ko-eyebrow,.ko-plan-desc,.ko-bill-note,.ko-saving){font-size:18px;line-height:28px;white-space:normal}
.kh-offering .ko-plan-desc{min-height:56px}
.ko-price-period{margin-top:32px}
.ko-price>[data-price-value]{font-size:56px}
.kh-offering .ko-saving{font-size:16px;min-height:28px}
.kh-offering .ko-subscribe{margin-top:32px;height:54px;font-size:18px}
.ko-quota{margin-top:32px;padding:24px 16px;min-height:0;height:auto}
.kh-offering .ko-quota p{font-size:16px;line-height:26px}
.kh-offering .ko-quota .ko-quota-bonus{font-size:15px;line-height:26px;white-space:normal;min-height:52px}
.kh-offering .ko-benefits{font-size:16px;line-height:28px;margin-top:28px;gap:12px}
.kh-offering .ko-plan-common,.kh-offering .ko-rules-note{font-size:18px;line-height:30px;margin-top:40px}
.ko-table-wrap{min-height:0}
.ko-compare{font-size:16px;line-height:28px}
.ko-compare tr,.ko-compare tr:last-child{min-height:80px;padding:16px 24px;gap:24px}
.ko-compare thead tr{min-height:88px!important}
.ko-compare tbody tr:first-child td{font-size:16px;white-space:normal}
.ko-rule-grid{gap:24px}
.ko-rule{padding:40px 28px;min-height:0}
.kh-offering .ko-rule h3{font-size:20px;line-height:30px;white-space:normal;flex-wrap:wrap;margin:28px 0 16px;gap:8px}
.ko-rule h3 span{font-size:18px;line-height:28px;padding-left:8px}
.kh-offering .ko-rule p{font-size:18px;line-height:30px}
.ko-managed .ko-fees{margin-top:160px}
body.ko-managed #platform-coverage{margin-top:var(--kl-section-gap)}
.ko-fee-grid{grid-template-columns:repeat(2,minmax(0,620px));gap:40px;max-width:1280px;margin-inline:auto}
.ko-fee{min-height:510px}
.ko-fee-background{width:100%;height:100%}
.ko-fee-copy{padding:72px 42px 42px}
.kh-offering .ko-fee h3{font-size:40px;line-height:59px;white-space:normal}
.kh-offering .ko-fee-desc{font-size:20px;line-height:29.6px;min-height:60px}
.ko-fee ul{margin-top:48px;font-size:20px;line-height:30px}
.ko-process-list li,.ko-process-list li:first-child,.ko-process-list li:last-child{grid-template-columns:100px 240px minmax(0,1fr);gap:32px;padding:0 32px 24px;min-height:124px;align-items:center}
.ko-process-list img{width:100px;height:100px}
.kh-offering .ko-process-list h3{font-size:26px;line-height:39px;margin:0;width:auto;white-space:normal}
.kh-offering .ko-process-list p{font-size:16px;line-height:28px;margin:0;width:auto;max-width:780px}
.ko-capabilities{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;min-height:0}
.kh-offering .ko-capabilities h3{font-size:20px;line-height:30px}
.ko-metric-grid{gap:24px;width:100%}
.ko-metric{padding:32px 24px;min-height:0;border-radius:32px}
.kh-offering .ko-metric h3{font-size:24px;line-height:36px;white-space:normal;height:auto;margin-top:24px}
.kh-offering .ko-metric p{font-size:18px;line-height:30px;height:auto;text-align:left}

/* Full-width content-service background; text follows the same grid. */
.co-offer{height:640px;width:100cqw}
.co-offer-copy{width:var(--kl-page);max-width:none;padding-top:120px}
.co-offer-art{left:calc(50% - 640px);width:1280px;height:640px;mask:none;opacity:1}
.co-offer-art img{width:1280px;height:640px}
.ko-content main .co-offer h2{margin-bottom:48px}
.ko-content .co-offer h3{font-size:28px;line-height:42px}
.ko-content .co-offer p{font-size:18px;line-height:30px;max-width:460px;margin-top:24px}
.co-offer .kh-button{margin-top:32px}

/* FAQ, CTA and footer share the content edges and comfortable reading measure. */
.kl-site .kh-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,780px);gap:64px;min-height:0}
.kl-site .kh-faq h2{margin:0}
.kl-site .kh-faq-page summary{font-size:18px;line-height:30px;min-height:88px;padding:24px 0}
.kl-site .kh-faq-page details>p{font-size:18px;line-height:30px;margin:0 46px 28px 0;max-width:780px}
.kl-site .kh-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 40px;align-content:center;height:auto;min-height:260px;padding:64px}
.kl-site .kh-cta h2{font-size:36px;line-height:54px;margin:0}
.kl-site .kh-cta>p{font-size:18px;line-height:30px;max-width:600px;margin:0;grid-column:1}
.kl-site .kh-cta>.kh-button{position:static;grid-column:2;grid-row:1 / 3;align-self:center;width:auto;height:56px;margin:0}
.kl-site .kh-footer{padding:96px 0 0;border-color:#e1e2e5;min-height:0}
.kh-footer:before{display:none}
.kh-footer-top{grid-template-columns:302px 590px;gap:clamp(64px,calc(100% - 892px),388px);align-items:start}
.kh-footer-logo img{width:205px;height:57px}
.kh-footer-brand>p{font-size:16px;line-height:32px;margin-top:32px}
.kh-footer-columns{grid-template-columns:repeat(4,max-content);justify-content:space-between;gap:24px}
.kl-site .kh-footer h3{font-size:16px;line-height:21px;letter-spacing:.938px;height:auto;margin-bottom:30px}
.kl-site .kh-footer-columns a,.kl-site .kh-footer-contact{font-size:16px;line-height:31.26px;white-space:nowrap;text-align:left;margin-bottom:27px}
.kh-footer-qrs figcaption strong{font-size:12px;line-height:18px}
.kh-footer-qrs figcaption span{font-size:12px;line-height:18px}
.kl-site .kh-footer-columns>div>:last-child{margin-bottom:0}
.kh-footer-bottom{margin-top:96px;border-top:1px solid #e1e2e5;padding:30px 0 0;align-items:flex-start;flex-wrap:wrap}
.kh-footer-bottom>p{font-size:12px;line-height:31px;color:#999}

@media(max-width:1279px){
 .kl-site{--kl-title-size:36px;--kl-title-line:54px;--kl-section-gap:96px}
 body .header,.kl-site .header{height:88px;padding-block:20px}
 body .primary-nav,.kl-site .primary-nav{display:none;position:absolute;top:68px;left:calc(0px - var(--kl-gutter));width:calc(100% + var(--kl-gutter) + var(--kl-gutter));margin:0;padding:16px var(--kl-gutter) 24px;max-height:calc(100dvh - 88px);height:auto;overflow:auto}
 body .primary-nav.is-open,.kl-site .primary-nav.is-open{display:block}
 body .menu-toggle,.kl-site .menu-toggle{display:grid;width:44px;height:44px}
 body .nav-entry,.kl-site .nav-entry{display:block;height:auto}
 body :is(.nav-trigger,.nav-direct),.kl-site :is(.nav-trigger,.nav-direct){padding:16px 0;font-size:var(--kl-text-nav);line-height:24px}
 body .nav-panel,.kl-site :is(.nav-panel,.product-panel,.content-panel){position:static;top:auto;left:auto;width:100%;max-height:none}
 body .header-actions,.kl-site .header-actions{margin-left:auto}
 body .header-actions .login,.kl-site .header-actions .login{display:none}
 .kl-site .kh-hero,.kh-offering .ko-hero{padding-top:112px}
 .kl-site .kh-hero{padding-bottom:112px}
 .kl-site .kh-hero h1,.kh-offering .ko-hero h1{font-size:48px}
 .kl-site .kh-scenes{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
 .kl-site .kh-scenes>:is(a,article)+:is(a,article):before{display:none}
 .kh-workflow,.co-workflow{grid-template-columns:1fr;gap:40px}
 .kh-workflow-visual,.co-workflow-art{width:min(724px,100%);justify-self:center;align-self:center}
 .kh-capabilities{gap:40px}
 .kh-transformation{grid-template-columns:1fr;gap:40px}
 .kh-transformation ol{max-width:852px}
 .kh-logos{grid-template-columns:repeat(3,minmax(0,1fr))}
 .kh-salon{grid-template-columns:1fr}
 .kh-salon-art{max-width:792px;margin:0 auto;width:100%}
 .kh-heading-actions{position:static;margin-bottom:32px}
 .ko-plan{padding:28px 20px}
 .kh-offering .ko-plan h3{font-size:26px}
 .ko-rule-grid{grid-template-columns:1fr}
 .ko-rule{display:grid;grid-template-columns:64px 1fr;gap:0 28px;padding:32px}
 .ko-policy-icon{width:64px;height:64px;grid-row:span 2}
 .kh-offering .ko-rule h3{margin-top:0}
 .ko-compare{min-width:900px}
 .ko-managed .ko-fees{margin-top:112px}
 .ko-process-list li,.ko-process-list li:first-child,.ko-process-list li:last-child{grid-template-columns:100px 1fr;gap:0 24px;padding-inline:0}
 .ko-process-list img{grid-row:span 2}
 .kh-offering .ko-process-list p{margin-top:8px}
 .ko-capabilities,.ko-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .co-offer{display:flex;flex-direction:column-reverse;min-height:0;height:auto;padding:64px 0 40px}
 .co-offer-copy{width:var(--kl-page);padding:0}
 .co-offer-art{position:relative;left:auto;top:auto;width:min(640px,100%);height:auto;aspect-ratio:1.1;mask:none;margin:20px auto 0;overflow:hidden;z-index:0}
 .co-offer-art img{position:absolute;left:-98%;top:0;width:203%;height:100%;object-fit:contain}
 .kl-site .kh-faq{grid-template-columns:minmax(0,1fr);gap:40px}
 .kh-footer-top{grid-template-columns:1fr;gap:48px}
 .kh-footer-brand{max-width:480px}
}
@media(max-width:959px){
 .ko-plan-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
 .kh-offering .ko-plan-desc,.kh-offering .ko-quota .ko-quota-bonus{min-height:0}
 .kh-assets{grid-template-columns:1fr;gap:40px;max-width:560px;margin-inline:auto}
 .kh-capabilities{grid-template-columns:1fr}
 .kh-cap-visual{width:100%;max-width:724px}
 .kl-site .kh-cta{padding:48px;grid-template-columns:1fr}
 .kl-site .kh-cta>.kh-button{grid-column:1;grid-row:auto;justify-self:start;margin-top:12px}
}
@media(max-width:767px){
 .kl-site{--kl-text-body:16px;--kl-title-size:28px;--kl-title-line:42px;--kl-section-gap:72px}
 body .brand-logo,.kl-site .brand-logo{width:143px}
 body .header-actions>.btn,.kl-site .header-actions>.btn{display:none}
 .kl-site main h2{margin-bottom:40px}
 .kl-site .kh-hero,.kh-offering .ko-hero{padding-top:80px}
 .kl-site .kh-hero{padding-bottom:96px}
 .kl-site .kh-hero h1,.kh-offering .ko-hero h1{font-size:34px;line-height:1.5}
 .kh-hero h1 span{display:block}
 .kl-site .kh-hero>p,.kh-offering .ko-hero>p{font-size:16px;line-height:28px}
 .kl-site :is(.kh-hero-actions,.ko-hero-actions){gap:16px;margin-top:32px;flex-wrap:wrap}
 .kl-site .kh-hero-actions .kh-button,.ko-hero-actions .kh-button{width:auto;flex:1 0 auto;min-width:0;max-width:194px;font-size:15px;height:48px;padding:0 12px}
 .kl-site .kh-scenes{gap:32px 24px}
 .kl-site .kh-scenes h3{font-size:20px;line-height:30px}
 .kl-site .kh-scenes p{font-size:16px;line-height:28px;margin-top:12px}
 .co-services .kh-scenes{grid-template-columns:1fr}
 .kl-site .kh-step h3{font-size:20px;line-height:30px}
 .kl-site .kh-step p{font-size:16px;line-height:28px;padding-left:68px}
 .kl-site .kh-step[open]{padding-block:20px}
 .kl-site .kh-step[open] .kh-step-dot{top:41px}
 .kh-services,.ko-fee-grid{grid-template-columns:1fr;gap:24px}
 .kh-service-copy{padding:32px 24px}
 .kh-home .kh-service h3{font-size:28px}
 .kh-home .kh-service-desc{font-size:16px;min-height:0}
 .kh-service li,.kh-cap-panel>p,.kh-cap-panel li,.kh-asset-copy p,.kh-transformation>div>p{font-size:16px;line-height:28px}
 .kh-tabs button{font-size:14px;height:48px;padding-inline:4px}
 .kh-home .kh-asset-copy h3{font-size:24px}
 .kh-fde-icon,.kh-transformation li:first-child .kh-fde-icon{width:65px;height:65px}
 .kh-fde-rule{display:none}
 .kh-transformation li>span{font-size:20px;width:24px}
 .kh-home .kh-transformation h3{font-size:20px;line-height:30px}
 .kh-transformation li p{font-size:15px;line-height:26px}
 .kh-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
 .kl-site .kh-heading-actions .kh-button{min-width:0;flex:1;width:auto;font-size:15px;padding-inline:12px}
 .kh-salon summary,.kh-salon [open] summary{gap:16px}
 .kh-home .kh-salon-list h3{font-size:20px;line-height:30px}
 .kh-salon details>p{font-size:16px;line-height:28px;margin-left:44px;max-width:calc(100% - 60px)}
 .kh-salon-art{height:560px}
 .kh-salon-copy{padding:96px 24px 0}
 .kh-home .kh-salon-copy h3{font-size:36px;line-height:54px}
 .kh-home .kh-salon-status{font-size:16px;height:130px}
 .kl-site .kh-cases{grid-template-columns:1fr;gap:24px}
 .kl-site .kh-case-carousel .kh-cases{grid-template-columns:none;grid-auto-columns:100%}
 .kl-site .kh-case-copy{padding:24px}
 .kl-site .kh-case-copy h3{font-size:20px;line-height:30px}
 .kl-site .kh-case-copy p{font-size:16px;line-height:28px;height:84px;-webkit-line-clamp:3}
 .kh-case-controls{gap:12px;top:3px}
 .kh-case-controls button{width:36px;height:36px}
 .kh-case-controls img{width:18px;height:18px}
 .ko-plans{margin-top:56px}
 .ko-plan{padding:32px 26px}
 .kh-offering .ko-plan-common,.kh-offering .ko-rules-note{font-size:16px;line-height:28px;text-align:left}
 .ko-rule{padding:28px 24px;grid-template-columns:1fr}
 .ko-policy-icon{grid-row:auto;margin-bottom:24px}
 .kh-offering .ko-rule p{font-size:16px;line-height:28px}
 .ko-managed .ko-fees{margin-top:96px}
 .ko-fee-copy{padding:32px 24px}
 .kh-offering .ko-fee h3{font-size:26px;line-height:39px}
 .kh-offering .ko-fee-desc,.ko-fee ul{font-size:16px;line-height:28px;min-height:0}
 .ko-process-list li,.ko-process-list li:first-child,.ko-process-list li:last-child{grid-template-columns:80px 1fr;gap:16px 20px;min-height:0}
 .ko-process-list img{width:80px;height:80px;grid-row:auto}
 .kh-offering .ko-process-list h3{font-size:22px;line-height:33px}
 .kh-offering .ko-process-list p{grid-column:1 / -1;margin:0}
 .ko-capabilities,.ko-metric-grid{grid-template-columns:1fr}
 /* Keep each service icon beside its title on phones; copy uses the full row. */
 .ko-managed :is(.ko-metric,.ko-capabilities article){display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px 12px;align-items:center;align-content:start;min-width:0}
 .ko-managed :is(.ko-metric,.ko-capabilities article)>img{grid-column:1;grid-row:1;width:32px;height:32px}
 .ko-managed :is(.ko-metric,.ko-capabilities article)>h3{grid-column:2;grid-row:1;min-width:0;margin:0;font-size:20px;line-height:30px}
 .ko-managed :is(.ko-metric,.ko-capabilities article)>p{grid-column:1/-1;margin:0;min-height:0}
 .ko-managed .ko-metric{padding:24px}
 .kh-offering .ko-metric p{font-size:16px;line-height:28px}
 .co-offer{padding:48px 0 24px}
 .ko-content main .co-offer h2{margin-bottom:32px}
 .ko-content .co-offer h3{font-size:24px;line-height:36px}
 .ko-content .co-offer p{font-size:16px;line-height:28px}
 .kl-site .kh-faq-page summary{font-size:17px;line-height:28px}
 .kl-site .kh-faq-page details>p{font-size:16px;line-height:28px;margin-right:24px}
 .kl-site .kh-cta{padding:40px 28px;min-height:0;gap:12px}
 .kl-site .kh-cta h2{font-size:28px;line-height:42px}
 .kl-site .kh-cta>p{font-size:16px;line-height:28px;max-width:none}
 .kl-site .kh-footer{padding:48px 0 32px}
 .kh-footer-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
 .kh-footer-logo img{width:172px}
 .kh-footer-bottom{margin-top:32px}
 .kh-footer-bottom>p{font-size:13px}
}

/* Inner-page scale: the home hero stays the visual lead, reading areas sit
   inside the shared outer grid instead of filling every available column. */
:root{--kl-detail-max:1080px;--kl-reading-max:720px;--kl-copy-max:420px}
body .policy-copy{max-width:var(--kl-reading-max);margin-inline:auto}
:is(.kh-offering,.kl-page){--kl-title-size:36px;--kl-title-line:50px;--kl-section-gap:96px}
:is(.kh-offering,.kl-page) main h2{margin-bottom:40px}
.kh-offering .ko-hero,.kl-page .kl-banner{padding-top:64px}
.kl-page .kl-banner{padding-bottom:64px;min-height:0;margin-bottom:64px}
.kl-page .kl-banner:before{mask-image:linear-gradient(#000 55%,transparent)}
.kh-offering .ko-hero h1,.kl-page .kl-banner h1{font-size:48px;line-height:1.4;max-width:900px}
.kh-offering .ko-hero>p,.kl-page .kl-banner>p{font-size:16px;line-height:28px;max-width:var(--kl-reading-max);margin-top:16px}
.ko-hero-actions,.kl-banner-actions{margin-top:28px;gap:24px}
.kh-offering .kh-button,.kl-page .kh-button{font-size:16px;height:48px;min-width:160px}
.kh-offering .ko-hero-actions .kh-button,.kl-page .kl-banner-actions .kh-button{width:auto;min-width:160px}
.ko-managed .ko-fees{margin-top:64px}
.kl-page[data-page-kind="collection"] .kl-banner{padding-block:56px 60px;margin-bottom:40px}
.kl-page[data-page-kind="collection"] main>.kl-section{max-width:1120px;margin-inline:auto}
.kl-page main .article-card h2{font-size:21px;line-height:32px;max-width:var(--kl-reading-max);margin-bottom:10px}
.kl-page main .article-card p{max-width:var(--kl-reading-max)}
.kl-page .article-card{padding-block:26px;gap:24px}
.kl-page .kl-feature-copy{max-width:var(--kl-copy-max);padding-inline:16px}
.kl-page main :is(.kl-feature,.kl-offer) h3{font-size:24px;line-height:36px}
.kl-page .kl-feature-list{gap:64px}
.kl-page .kl-feature,.kl-page .kl-feature:nth-child(even){gap:64px}
.kl-page .kl-offer p{max-width:var(--kl-copy-max)}
.kl-page main .kl-delivery h3{font-size:20px;line-height:30px}
.kl-page .kl-delivery article{padding:28px 24px;border-radius:24px}
.kl-page .kl-plan-links{max-width:var(--kl-detail-max)}
.kl-page .kl-plan-links .kh-button{height:auto;min-height:46px;min-width:0}
.kl-page main .kl-plan-links h3{font-size:24px}
:is(.kh-offering,.kl-page) .kh-faq{grid-template-columns:minmax(0,1fr) minmax(0,var(--kl-reading-max));gap:64px}
:is(.kh-offering,.kl-page) .kh-faq-page summary{font-size:17px;line-height:28px;min-height:72px;padding-block:20px}
:is(.kh-offering,.kl-page) .kh-faq-page details>p{font-size:16px;line-height:28px;max-width:var(--kl-reading-max)}
:is(.kh-offering,.kl-page) .kh-cta{padding:40px 48px;min-height:200px;gap:12px 32px}
:is(.kh-offering,.kl-page) .kh-cta h2{font-size:30px;line-height:44px;margin:0}
:is(.kh-offering,.kl-page) .kh-cta>p{font-size:16px;line-height:28px;max-width:560px}
:is(.kh-offering,.kl-page) .kh-cta>.kh-button{height:48px}

/* Supporting copy follows the same scale as the new product pages. */
.kh-offering .kh-scenes h3,.kh-offering .kh-step h3{font-size:22px;line-height:34px}
.kh-offering .kh-scenes p,.kh-offering .kh-step p{font-size:16px;line-height:28px}
.kh-offering .ko-fee-desc,.kh-offering .ko-fee li,.ko-content .co-offer p{font-size:16px;line-height:28px;max-width:var(--kl-copy-max)}
.ko-content .co-offer h3{font-size:24px;line-height:36px}

/* Pricing is an inner comparison group, with compact but readable cards. */
.ko-plans{margin-top:40px}
.ko-plan-grid{max-width:var(--kl-detail-max);margin:32px auto 0;gap:24px}
.ko-plan{padding:28px 24px;border-radius:24px}
.kh-offering .ko-billing{width:210px;height:44px}
.kh-offering .ko-billing button{font-size:16px;line-height:24px;padding:6px 14px}
.ko-billing button span{font-size:13px}
.kh-offering .ko-plan h3{font-size:24px;line-height:36px;margin:10px 0 12px;gap:12px}
.ko-recommended{font-size:12px;line-height:26px;padding-inline:10px}
.kh-offering :is(.ko-eyebrow,.ko-bill-note,.ko-saving){font-size:14px;line-height:24px}
.kh-offering .ko-plan-desc{font-size:16px;line-height:26px;min-height:52px;max-width:300px}
.ko-price-period{margin-top:20px}
.kh-offering .ko-price{line-height:52px;gap:4px}
.ko-price>[data-price-value]{font-size:44px;letter-spacing:-.6px}
.ko-price>span:first-child{font-size:18px}
.ko-price small{font-size:16px;line-height:24px}
.kh-offering .ko-bill-note{margin-top:8px}
.kh-offering .ko-saving{margin-top:8px;min-height:24px}
.kh-offering .ko-subscribe{margin-top:24px;height:46px;font-size:16px}
.ko-quota{margin-top:24px;padding:20px 16px;border-radius:16px}
.kh-offering .ko-quota p{font-size:14px;line-height:24px}
.ko-quota strong{font-size:26px;line-height:32px}
.ko-quota>div{margin-top:8px}
.ko-quota>div>span{font-size:15px;line-height:24px}
.kh-offering .ko-quota .ko-quota-bonus{font-size:13px;line-height:22px;margin-top:10px;min-height:44px}
.kh-offering .ko-benefits{font-size:15px;line-height:26px;margin-top:24px;gap:8px}
.kh-offering .ko-plan-common,.kh-offering .ko-rules-note{font-size:15px;line-height:26px;max-width:var(--kl-detail-max);margin:28px auto 0}
.ko-table-wrap,.ko-rule-grid{max-width:var(--kl-detail-max);margin-inline:auto}
#compare .ko-table-wrap{max-width:1280px}
.ko-rule{padding:28px 24px;border-radius:24px}
.ko-policy-icon{width:52px;height:52px;border-radius:16px}
.ko-policy-icon>img{width:28px;height:28px}
.kh-offering .ko-rule h3{font-size:18px;line-height:28px;margin:20px 0 12px}
.ko-rule h3 span{font-size:16px;line-height:26px}
.kh-offering .ko-rule p{font-size:16px;line-height:28px;max-width:var(--kl-copy-max)}

@media(max-width:1279px){
 :is(.kh-offering,.kl-page){--kl-title-size:32px;--kl-title-line:46px;--kl-section-gap:80px}
 :is(.kh-offering,.kl-page) .kh-faq{grid-template-columns:1fr;gap:32px}
 :is(.kh-offering,.kl-page) :is(.kh-faq-panel,.kh-faq-content){width:100%;max-width:var(--kl-reading-max)}
 .kl-page .kl-feature,.kl-page .kl-feature:nth-child(even){gap:32px}
 .kl-page .kl-feature-copy{padding:0}
 .ko-rule h3{margin-top:0}
}
@media(max-width:959px){
 .ko-plan-grid{max-width:480px}
 .kh-offering .ko-plan-desc,.kh-offering .ko-quota .ko-quota-bonus{min-height:0}
}
@media(max-width:767px){
 :is(.kh-offering,.kl-page){--kl-title-size:28px;--kl-title-line:42px;--kl-section-gap:64px}
 .kh-offering .ko-hero,.kl-page .kl-banner{padding-top:40px}
 .kl-page .kl-banner{padding-bottom:40px;margin-bottom:40px}
 .kl-page[data-page-kind="collection"] .kl-banner{padding-block:36px 40px;margin-bottom:32px}
 .kh-offering .ko-hero h1,.kl-page .kl-banner h1{font-size:32px;line-height:1.5}
 .kh-offering .ko-hero-actions .kh-button,.kl-page .kl-banner-actions .kh-button{min-width:0;font-size:15px}
 .ko-managed .ko-fees{margin-top:48px}
 .ko-plans{margin-top:32px}
 .ko-plan-grid{margin-top:24px}
 .ko-plan{padding:28px 24px}
 .kl-page .article-card{gap:14px 18px;padding-block:24px}
 .kl-page main .article-card h2{font-size:20px;line-height:30px}
 :is(.kh-offering,.kl-page) .kh-cta{padding:32px 24px;min-height:0;grid-template-columns:1fr}
 :is(.kh-offering,.kl-page) .kh-cta h2{font-size:26px;line-height:38px}
 .ko-rule{padding:24px}
 .kh-offering .kh-scenes h3,.kh-offering .kh-step h3{font-size:20px;line-height:30px}
}

/* Phase 2 (2026-11-07): inner-page hero blocks use the documented 600/480/400
   responsive height; PC titles start 300px (group 1) or 240px (group 2) from the
   top of the page. Article detail keeps its reading layout. */
@media(min-width:1024px){
 :is(body.kl-page[data-page-kind="about"],body.kl-page[data-page-kind="collection"],body.ko-membership) :is(.kl-banner,.ko-hero){box-sizing:border-box;height:600px;min-height:600px;padding-top:204px;padding-bottom:64px}
 :is(body.kl-page[data-page-kind="service"],body.ko-managed,body.ko-content) :is(.kl-banner,.ko-hero,.co-hero){box-sizing:border-box;height:600px;min-height:600px;padding-top:144px;padding-bottom:64px}
}
@media(min-width:768px) and (max-width:1023px){
 :is(body.kl-page[data-page-kind="about"],body.kl-page[data-page-kind="collection"],body.ko-membership,body.kl-page[data-page-kind="service"],body.ko-managed,body.ko-content) :is(.kl-banner,.ko-hero,.co-hero){box-sizing:border-box;height:480px;min-height:480px}
}
@media(max-width:767px){
 :is(body.kl-page[data-page-kind="about"],body.kl-page[data-page-kind="collection"],body.ko-membership,body.kl-page[data-page-kind="service"],body.ko-managed,body.ko-content) :is(.kl-banner,.ko-hero,.co-hero){box-sizing:border-box;height:400px;min-height:400px}
}
@media(min-width:1024px) and (max-width:1279px){
 /* The nav is 88px below 1280px, so pad 12px less to keep the 300/240 title offsets. */
 :is(body.kl-page[data-page-kind="about"],body.kl-page[data-page-kind="collection"],body.ko-membership) :is(.kl-banner,.ko-hero){padding-top:212px}
 :is(body.kl-page[data-page-kind="service"],body.ko-managed,body.ko-content) :is(.kl-banner,.ko-hero,.co-hero){padding-top:152px}
}
/* The cases page keeps its Figma gradient artwork but follows the same 600/480/400 hero height. */
@media(min-width:1024px){
 body.kl-page.kc-cases[data-page-kind="collection"] .kl-banner{box-sizing:border-box;height:600px;min-height:600px;padding:204px 0 64px}
 body.kl-page.kc-cases[data-page-kind="collection"] .kl-banner:before{top:-96px;height:calc(100% + 96px)}
}
@media(min-width:1024px) and (max-width:1279px){
 body.kl-page.kc-cases[data-page-kind="collection"] .kl-banner{padding-top:212px}
}
@media(min-width:768px) and (max-width:1023px){
 body.kl-page.kc-cases[data-page-kind="collection"] .kl-banner{box-sizing:border-box;height:480px;min-height:480px;padding:120px 0 64px}
 body.kl-page.kc-cases[data-page-kind="collection"] .kl-banner:before{top:-88px;height:calc(100% + 88px)}
}
@media(max-width:767px){
 body.kl-page.kc-cases[data-page-kind="collection"] .kl-banner{box-sizing:border-box;height:400px;min-height:400px;padding:72px 0 40px}
 body.kl-page.kc-cases[data-page-kind="collection"] .kl-banner:before{top:-88px;height:calc(100% + 88px)}
}