/* Reuse the shared CraftControl palette; preserve the feature-page layout. */
.cc-metrics{--km-orange:var(--cc-orange);--km-ink:var(--cc-ink);--km-muted:var(--cc-muted);--km-line:var(--cc-line);color:var(--km-ink);background:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;line-height:1.65}
.cc-metrics *{box-sizing:border-box}.cc-metrics h1,.cc-metrics h2,.cc-metrics h3,.cc-metrics h4,.cc-metrics p,.cc-metrics figure{margin:0}.cc-metrics h1,.cc-metrics h2,.cc-metrics h3,.cc-metrics h4{letter-spacing:-.045em;line-height:1.12}.cc-metrics h1{font-size:clamp(38px,4.3vw,66px);font-weight:740}.cc-metrics h1 em{font-style:normal;color:var(--cc-muted)}.cc-metrics h2{font-size:clamp(30px,3vw,46px);font-weight:720}.cc-metrics h3{font-size:26px}.cc-metrics h4{font-size:21px}.cc-metrics p{color:var(--km-muted)}.cc-metrics a{color:inherit}.cc-metrics a:focus-visible,.cc-metrics summary:focus-visible{outline:3px solid var(--cc-orange);outline-offset:5px}.cc-metrics .km-wrap{width:min(1280px,calc(100% - 96px));margin-inline:auto}.cc-metrics .km-header{min-height:82px;padding:18px max(32px,calc((100% - 1380px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--km-line);gap:28px}.cc-metrics .km-header .km-brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;letter-spacing:-.04em}.cc-metrics .km-header .km-brand img{display:block;width:28px;height:28px}.cc-metrics .km-header nav{display:flex;gap:30px;font-size:14px}.cc-metrics .km-button{display:inline-flex;align-items:center;justify-content:center;gap:20px;background:var(--km-orange);border-radius:7px;padding:13px 21px;color:#fff;font-size:14px;font-weight:700;line-height:1.4}.cc-metrics .km-button:hover{background:#df4900}.cc-metrics .km-skip{position:absolute;left:16px;top:-80px;background:white;padding:12px;z-index:30}.cc-metrics .km-skip:focus{top:12px}.cc-metrics .km-hero{display:grid;grid-template-columns:1.08fr 1fr;gap:64px;align-items:center;padding-block:64px 80px}.cc-metrics .km-back{font-size:13px;color:var(--km-muted);display:inline-block;margin-bottom:36px}.cc-metrics .km-eyebrow{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#c44100;font-weight:750;margin-bottom:20px}.cc-metrics .km-lead{font-size:18px;line-height:1.75;margin-top:25px}.cc-metrics .km-actions{display:flex;gap:23px;align-items:center;flex-wrap:wrap;margin-block:28px 18px}.cc-metrics .km-text-link{font-size:14px;font-weight:650;text-decoration:underline;text-underline-offset:5px}.cc-metrics .km-small{font-size:13px;line-height:1.65}.cc-metrics .km-demo{border:1px solid var(--cc-line);border-radius:14px;background:var(--cc-mist);box-shadow:0 24px 60px #22303610;transform:rotate(1deg)}.cc-metrics .km-demo-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--cc-line);background:white;border-radius:14px 14px 0 0;padding:18px 22px;font-size:11px;color:var(--km-muted)}.cc-metrics .km-demo-top>span:first-child{font-size:15px;font-weight:750;color:var(--km-ink)}.cc-metrics .km-demo-top i{display:inline-block;width:10px;height:10px;background:var(--km-orange);margin-right:6px}.cc-metrics .km-demo-body{padding:27px}.cc-metrics .km-demo h2{font-size:28px;margin-bottom:24px}.cc-metrics .km-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.cc-metrics .km-mini-grid>div{background:white;border:1px solid var(--cc-line);border-radius:8px;padding:15px}.cc-metrics .km-mini-grid span,.cc-metrics .km-mini-grid small{display:block;font-size:11px;color:var(--km-muted)}.cc-metrics .km-mini-grid strong{font-size:29px;display:block;line-height:1.5}.cc-metrics .km-kpi{background:white;border:1px solid var(--cc-line);border-radius:8px;margin-top:12px;overflow:hidden}.cc-metrics .km-kpi[open]{border-color:#ffb78f}.cc-metrics summary{cursor:pointer}.cc-metrics .km-kpi summary{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;gap:10px;font-size:12px;list-style:none}.cc-metrics summary::-webkit-details-marker{display:none}.cc-metrics .km-kpi summary strong{display:block;font-size:30px;line-height:1.3;letter-spacing:-.04em}.cc-metrics .km-kpi strong small{font-size:18px}.cc-metrics .km-kpi-action{font-size:10px;color:#c44100}.cc-metrics .km-kpi-action b{font-size:20px;display:inline-block;margin-left:8px}.cc-metrics .km-kpi[open] .km-kpi-action b{transform:rotate(45deg)}.cc-metrics .km-drill{border-top:1px solid #eee;padding:15px 18px;font-size:12px}.cc-metrics .km-drill>p{font-size:10px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}.cc-metrics .km-drill>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--cc-mist)}.cc-metrics .km-drill small{color:var(--km-muted);display:block;font-size:10px}.cc-metrics .km-demo-note{font-size:10px;text-align:center;margin-top:16px;line-height:1.7}.cc-metrics .km-section-nav{border-block:1px solid var(--km-line);background:var(--cc-mist)}.cc-metrics .km-section-nav>div{display:flex;justify-content:space-between;gap:20px;padding-block:19px;flex-wrap:wrap}.cc-metrics .km-section-nav a{font-size:12px;font-weight:650}.cc-metrics .km-section{padding-block:90px}.cc-metrics .km-section-head{max-width:780px;margin-bottom:44px}.cc-metrics .km-section-head>p:last-child{font-size:17px;max-width:720px;margin-top:22px}.cc-metrics .km-two{display:grid;grid-template-columns:1fr 1fr;gap:48px}.cc-metrics .km-explainer{border-top:1px solid var(--km-line);padding-top:22px}.cc-metrics .km-index{font-size:12px;color:#c44100;font-weight:750;display:block;margin-bottom:22px}.cc-metrics .km-explainer h3{margin-bottom:20px}.cc-metrics .km-explainer p{margin-bottom:18px}.cc-metrics .km-explainer .km-result{color:var(--km-ink);font-weight:550}.cc-metrics .km-flow{display:grid;grid-template-columns:repeat(4,1fr);padding:25px 0 0;list-style:none;border-top:1px solid var(--km-line);gap:25px;margin:46px 0 0}.cc-metrics .km-flow li{border-left:2px solid var(--cc-orange);padding-left:16px}.cc-metrics .km-flow span{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--km-muted);margin-bottom:8px}.cc-metrics .km-flow strong{font-size:14px;line-height:1.5;display:block}.cc-metrics .km-band{background:var(--cc-mist)}.cc-metrics .km-analysis-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}.cc-metrics .km-chart-card{background:#fff;padding:25px;border:1px solid var(--cc-line);border-radius:10px}.cc-metrics .km-card-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.cc-metrics .km-card-heading>span{font-size:11px;color:var(--km-muted)}.cc-metrics .km-chart{display:flex;gap:20px;height:235px;margin:30px 0 18px;border-bottom:1px solid var(--km-line);padding:0 12px 0}.cc-metrics .km-chart-col{flex:1;display:flex;flex-direction:column;justify-content:end;align-items:center}.cc-metrics .km-chart-col>span{font-size:10px;margin-block:9px}.cc-metrics .km-bar{height:195px;width:100%;display:flex;flex-direction:column;justify-content:end;overflow:hidden}.cc-metrics .km-bar i{display:block;background:#ffb78f}.cc-metrics .km-bar i:nth-child(2){background:var(--cc-orange)}.cc-metrics .km-bar i:nth-child(3){background:var(--cc-slate)}.cc-metrics .km-legend{display:flex;flex-wrap:wrap;gap:15px;font-size:10px;margin-bottom:16px}.cc-metrics .km-legend span:before{content:"";display:inline-block;width:8px;height:8px;background:var(--cc-slate);margin-right:5px}.cc-metrics .km-legend span:nth-child(2):before{background:var(--cc-orange)}.cc-metrics .km-legend span:nth-child(3):before{background:#ffb78f}.cc-metrics .km-checks{list-style:none;padding:0;margin:24px 0}.cc-metrics .km-checks li{position:relative;padding:10px 0 10px 24px;border-bottom:1px solid var(--km-line);font-size:15px}.cc-metrics .km-checks li:before{content:"↗";position:absolute;left:0;color:#c44100}.cc-metrics .km-ranking-head{margin:54px 0 24px;max-width:730px}.cc-metrics .km-ranking-head p{margin-top:15px}.cc-metrics .km-rankings{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--cc-line);gap:25px;padding-top:25px}.cc-metrics .km-rankings article>span{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--cc-muted)}.cc-metrics .km-rankings h4{margin-block:20px 14px}.cc-metrics .km-rankings p{font-size:14px}.cc-metrics .km-site-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.cc-metrics .km-site-demo{border-radius:12px;background:var(--cc-slate);color:#fff;padding:30px}.cc-metrics .km-site-demo .km-eyebrow{color:#ffb78f;display:block;margin-bottom:8px}.cc-metrics .km-site-demo h3{font-size:23px}.cc-metrics .km-hours{margin-top:30px}.cc-metrics .km-hours>span{font-size:12px;color:#cbd2da}.cc-metrics .km-hours>strong{font-size:40px;display:block}.cc-metrics .km-progress{height:8px;background:var(--cc-orange);border-radius:4px;margin-block:12px}.cc-metrics .km-progress i{display:block;width:90%;height:100%;background:#cbd2da;border-radius:4px}.cc-metrics .km-hours>div:last-child{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#e3e6ea}.cc-metrics .km-site-values{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:27px}.cc-metrics .km-site-values>div{border-top:1px solid #52616c;padding-top:14px}.cc-metrics .km-site-values span{font-size:11px;color:#cbd2da;display:block}.cc-metrics .km-site-values strong{font-size:26px}.cc-metrics .km-site-values>div:last-child strong{color:#ffb78f}.cc-metrics .km-site-details{border-top:1px solid #52616c;margin-top:25px;padding-top:15px;font-size:13px}.cc-metrics .km-site-details summary{list-style:none;display:flex;justify-content:space-between}.cc-metrics .km-site-details p{color:#e3e6ea;margin-top:14px}.cc-metrics .km-site-demo .km-demo-note{color:#cbd2da}.cc-metrics .km-cost-band{background:var(--cc-mist)}.cc-metrics .km-cost-card{background:white;border:1px solid var(--cc-line);border-radius:10px;padding:30px}.cc-metrics .km-tag{display:inline-block;background:var(--cc-mist);border-radius:4px;padding:5px 9px;font-size:10px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:24px}.cc-metrics .km-cost-card h3{margin-bottom:18px}.cc-metrics .km-cost-card ul{padding-left:18px;color:var(--km-muted);font-size:14px;line-height:2}.cc-metrics .km-stock{margin-block:30px;padding-block:22px;border-block:1px solid var(--km-line)}.cc-metrics .km-stock>span,.cc-metrics .km-stock small{display:block;font-size:12px;color:var(--km-muted)}.cc-metrics .km-stock strong{display:block;font-size:27px;letter-spacing:-.04em;margin-block:7px}.cc-metrics .km-stock strong span{color:#c44100}.cc-metrics .km-data-note{border-left:3px solid var(--cc-orange);padding:7px 0 7px 22px;margin-top:35px;max-width:1000px}.cc-metrics .km-data-note p{font-size:14px;margin-top:8px}.cc-metrics .km-proof{display:grid;grid-template-columns:1fr 1.3fr;gap:70px;border-bottom:1px solid var(--km-line)}.cc-metrics .km-proof h2{margin-bottom:25px}.cc-metrics blockquote{margin:0}.cc-metrics blockquote>p{font-size:25px;line-height:1.55;color:var(--km-ink);letter-spacing:-.02em}.cc-metrics blockquote footer{margin-top:26px;font-size:14px;font-weight:700}.cc-metrics blockquote footer span{display:block;font-size:12px;color:var(--km-muted);font-weight:400;margin-top:4px}.cc-metrics .km-faq{padding-block:75px 90px;max-width:900px}.cc-metrics .km-faq h2{margin-bottom:32px}.cc-metrics .km-faq details{border-bottom:1px solid var(--km-line);padding-block:19px}.cc-metrics .km-faq summary{font-weight:650;list-style:none;position:relative;padding-right:30px}.cc-metrics .km-faq summary:after{content:"+";position:absolute;right:0;font-size:22px;top:-5px;font-weight:400}.cc-metrics .km-faq details[open] summary:after{content:"−"}.cc-metrics .km-faq details p{margin-top:16px;font-size:15px}.cc-metrics .km-cta{background:var(--cc-slate);color:#fff;padding-block:70px}.cc-metrics .km-cta .km-eyebrow{color:#ffb78f}.cc-metrics .km-cta p:not(.km-eyebrow){color:#e3e6ea;max-width:630px;margin-block:24px}.cc-metrics .km-cta .km-button{margin-bottom:18px}.cc-metrics .km-cta .km-wrap>span{display:block;color:#cbd2da;font-size:12px}.cc-metrics .km-footer{display:flex;gap:28px;align-items:center;flex-wrap:wrap;padding-block:28px;font-size:12px}.cc-metrics .km-footer>a{font-size:18px;font-weight:800}.cc-metrics .km-footer nav{margin-left:auto;display:flex;gap:20px}.cc-metrics [id]{scroll-margin-top:25px}
@media(min-width:1600px){.cc-metrics .km-hero{padding-block:85px 100px}}
@media(max-width:1050px){.cc-metrics .km-wrap{width:calc(100% - 56px)}.cc-metrics .km-hero{gap:30px}.cc-metrics .km-demo-body{padding:20px}.cc-metrics .km-analysis-grid,.cc-metrics .km-site-grid{gap:30px}.cc-metrics .km-two{gap:25px}.cc-metrics .km-rankings{grid-template-columns:repeat(2,1fr);row-gap:30px}.cc-metrics .km-kpi-action{font-size:0}.cc-metrics .km-flow{gap:15px}.cc-metrics .km-demo{transform:none}}
@media(max-width:760px){.cc-metrics .km-wrap{width:calc(100% - 40px)}.cc-metrics .km-header{padding:15px 20px;gap:15px;flex-wrap:wrap}.cc-metrics .km-header .km-brand{font-size:19px}.cc-metrics .km-header nav{order:3;width:100%;justify-content:center;gap:28px}.cc-metrics .km-header .km-button{padding:11px 14px;font-size:12px}.cc-metrics .km-hero{grid-template-columns:1fr;padding-block:35px 45px;gap:35px}.cc-metrics h1{font-size:clamp(36px,8vw,54px)}.cc-metrics .km-back{margin-bottom:25px}.cc-metrics .km-demo{max-width:560px;width:100%;margin-inline:auto}.cc-metrics .km-kpi-action{font-size:10px}.cc-metrics .km-section-nav>div{display:grid;grid-template-columns:1fr 1fr;gap:13px}.cc-metrics .km-section{padding-block:55px}.cc-metrics .km-section-head{margin-bottom:30px}.cc-metrics .km-two,.cc-metrics .km-analysis-grid,.cc-metrics .km-site-grid,.cc-metrics .km-proof{grid-template-columns:1fr;gap:32px}.cc-metrics .km-flow{grid-template-columns:1fr 1fr;gap:25px}.cc-metrics .km-chart{gap:13px}.cc-metrics .km-cost-card,.cc-metrics .km-site-demo{padding:24px}.cc-metrics .km-faq{padding-block:50px}.cc-metrics .km-cta{padding-block:50px}.cc-metrics .km-footer{gap:14px}.cc-metrics .km-footer p{width:100%}.cc-metrics .km-footer nav{margin-left:0}.cc-metrics .km-proof blockquote>p{font-size:22px}.cc-metrics .km-actions{gap:20px}.cc-metrics .km-chart-card{padding:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Genuine application captures. Product status colors remain unchanged. */
.cc-metrics .km-product-shot { min-width: 0; }
.cc-metrics .km-shot-link { display: block; position: relative; overflow: hidden; border: 1px solid var(--cc-line); border-radius: 12px; background: #fff; box-shadow: 0 18px 50px #2230360d; }
.cc-metrics .km-shot-link img { display: block; width: 100%; height: auto; }
.cc-metrics .km-shot-zoom { display: flex; justify-content: space-between; align-items: center; padding: 12px 17px; background: var(--cc-mist); border-top: 1px solid var(--cc-line); font-size: 12px; font-weight: 650; }
.cc-metrics .km-shot-zoom span { color: #c44100; font-size: 20px; }
.cc-metrics .km-shot-link:hover .km-shot-zoom { background: #fff0e8; }
.cc-metrics .km-product-shot figcaption { padding: 16px 4px 0; color: var(--km-muted); font-size: 13px; line-height: 1.6; }
.cc-metrics .km-product-shot figcaption span { display: block; margin-top: 5px; font-size: 11px; }
.cc-metrics .km-analysis-grid { grid-template-columns: 1fr; gap: 30px; }
.cc-metrics .km-analysis-copy { max-width: 950px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 15px 50px; align-items: start; }
.cc-metrics .km-analysis-copy .km-checks { margin: 0; }
.cc-metrics .km-analysis-copy > .km-small { grid-column: 2; }
.cc-metrics .km-site-grid { grid-template-columns: 1fr; gap: 30px; }
.cc-metrics .km-site-grid > div:first-child { max-width: 800px; }
.cc-metrics .km-site-grid .km-product-shot { width: 100%; }
.cc-metrics .km-shot-dialog { width: min(1500px, 96vw); max-width: 96vw; max-height: 94vh; margin: auto; padding: 18px; border: 1px solid var(--cc-line); border-radius: 12px; color: var(--cc-ink); background: white; }
.cc-metrics .km-shot-dialog::backdrop { background: #101820cc; }
.cc-metrics .km-shot-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 15px; font-size: 13px; }
.cc-metrics .km-shot-close { padding: 10px 14px; background: var(--cc-slate); color: white; border: 0; border-radius: 6px; font: inherit; cursor: pointer; }
.cc-metrics .km-shot-large { display: block; max-width: 100%; max-height: 76vh; width: auto; height: auto; margin: auto; object-fit: contain; }
.cc-metrics .km-shot-dialog > p { font-size: 11px; text-align: center; margin-top: 12px; }
.cc-metrics .km-shot-close:focus-visible { outline: 3px solid var(--cc-orange); outline-offset: 3px; }
@media(max-width:760px) {
  .cc-metrics .km-analysis-copy { grid-template-columns: 1fr; gap: 20px; }
  .cc-metrics .km-analysis-copy > .km-small { grid-column: auto; }
  .cc-metrics .km-shot-dialog { padding: 12px; }
  .cc-metrics .km-shot-toolbar { font-size: 11px; gap: 10px; }
}

.cc-metrics .km-toplist-shot { max-width: 1020px; margin: 0 auto 32px; }

/* Shared feature/home navigation: native disclosure works with touch and keyboard. */
.cc-metrics .km-header{position:relative;z-index:20;background:#fff}
.cc-metrics .km-header nav{align-items:center}
.cc-metrics .km-nav-group{position:relative}
.cc-metrics .km-nav-group summary{display:flex;align-items:center;gap:8px;list-style:none;padding:10px 0}
.cc-metrics .km-nav-group summary:after{content:"⌄";font-size:14px}
.cc-metrics .km-nav-group[open] summary:after{transform:rotate(180deg)}
.cc-metrics .km-submenu{position:absolute;top:100%;left:0;width:310px;max-width:calc(100vw - 40px);padding:10px;margin:0;list-style:none;background:#fff;border:1px solid var(--km-line);border-radius:9px;box-shadow:0 15px 35px #20212412;z-index:30}
.cc-metrics .km-submenu a{display:block;padding:10px 12px;font-size:13px;border-radius:5px;line-height:1.5}
.cc-metrics .km-submenu a:hover,.cc-metrics .km-submenu a:focus-visible{background:var(--cc-mist)}
@media(max-width:760px){.cc-metrics .km-header nav{position:relative}.cc-metrics .km-nav-group{position:static}.cc-metrics .km-submenu{left:0;width:100%;max-width:100%;max-height:65vh;overflow:auto}}

/* Keep the shared navigation accessible throughout the page. */
.cc-metrics{--km-header-height:82px;--km-header-offset:0px}
.cc-metrics .km-header{position:sticky;top:var(--km-header-offset);z-index:100;background:#fff;box-shadow:0 2px 8px #20212408}
.cc-metrics [id]{scroll-margin-top:calc(var(--km-header-height) + var(--km-header-offset) + 24px)}
.admin-bar .cc-metrics{--km-header-offset:32px}
@media(max-width:782px){.admin-bar .cc-metrics{--km-header-offset:46px}}
@media(max-width:760px){.cc-metrics{--km-header-height:128px}.cc-metrics .km-submenu{max-height:calc(100dvh - var(--km-header-height) - var(--km-header-offset) - 20px)}}
@media(max-width:600px){.admin-bar .cc-metrics{--km-header-offset:0px}}