/* C2 design – 10-hero-lead-carousel. Extracted verbatim from claude-design/c2-website/pages/*.html (lines 365-400). Load order matters: keep the numeric prefix order. */
.lead{position:relative;width:100%;max-width:520px;height:82px;outline:none;cursor:default;transition:height .6s cubic-bezier(.22,1,.36,1)}
.lead:hover,.lead:focus-within{height:124px}
.lead,.lead:hover,.lead:focus-within{height:auto;min-height:124px;transition:none}
.lead .lead-slides,.lead:hover .lead-slides{display:none!important}
.lead-slides{display:none!important}
.lead .lead-full,.lead:hover .lead-full,.lead:focus-within .lead-full{position:static;inset:auto;opacity:1;transition:none;display:block;color:rgba(255,255,255,0.88)}
.lead-slides{position:absolute;inset:0;transition:opacity .35s ease}
.lead-s{position:absolute;left:0;right:0;top:50%;margin:0;text-align:center;font-size:18px;line-height:1.65;color:rgba(255,255,255,0.8);opacity:0;transform:translateY(-50%);animation:leadcycle 12s ease-in-out infinite}
.lead-s:nth-child(2){animation-delay:4s}
.lead-s:nth-child(3){animation-delay:8s}
@keyframes leadcycle{0%{opacity:0;transform:translateY(calc(-50% + 14px))}5%,30%{opacity:1;transform:translateY(-50%)}35%,100%{opacity:0;transform:translateY(calc(-50% - 14px))}}
.lead-dots{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:6px}
.lead-dots i{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,0.3);animation:leaddot 12s linear infinite}
.lead-dots i:nth-child(2){animation-delay:4s}
.lead-dots i:nth-child(3){animation-delay:8s}
@keyframes leaddot{0%{background:#FFFFFF;width:18px}33%{background:#FFFFFF;width:18px}34%,100%{background:rgba(255,255,255,0.3);width:6px}}
.lead-full{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;line-height:1.65;color:rgba(255,255,255,0.88);opacity:0;transition:opacity .3s ease}
.lead:hover .lead-slides,.lead:focus-within .lead-slides,.lead:focus .lead-slides{opacity:0}
.lead:hover .lead-full,.lead:focus-within .lead-full,.lead:focus .lead-full{opacity:1;transition:opacity .45s ease .18s}
.lead:focus-visible{outline:2px solid rgba(255,255,255,0.7);outline-offset:6px;border-radius:12px}
@media(prefers-reduced-motion:reduce){.lead,.lead:hover,.lead:focus-within{height:124px;transition:none}.lead-slides{display:none}.lead-full{opacity:1}}
/* knowledge carousel */
.kf-car{position:relative}
.kf-slides{display:grid}
.kf-sl{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1),visibility 0s linear .45s}
.kf-sl.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease .1s,transform .7s cubic-bezier(.22,1,.36,1) .1s,visibility 0s}
.kf-nav{display:flex;gap:8px;margin-top:28px}
.kf-nb{appearance:none;border:0;background:transparent;padding:10px 0;cursor:pointer;width:48px;display:flex;align-items:center}
.kf-nb i{display:block;position:relative;width:100%;height:4px;border-radius:99px;background:rgba(0,159,227,0.2);overflow:hidden;transition:background .3s}
.kf-nb:hover i{background:rgba(0,159,227,0.38)}
.kf-nb i::after{content:"";position:absolute;inset:0;background:#009FE3;transform:scaleX(0);transform-origin:left}
.kf-nb.on i::after{animation:leadfill 6s linear forwards}
.kf-car.hold .kf-nb.on i::after{animation-play-state:paused}
.kf-nb:focus-visible{outline:2px solid #009FE3;outline-offset:2px;border-radius:4px}
@keyframes leadfill{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.kf-sl,.kf-sl.on{transition:none}.kf-nb.on i::after{animation:none;transform:scaleX(1)}}