/* Homepage-only visual layer. Shared templates and feature hooks remain intact. */
body.wcm-home { --home-accent:#6254ee; --home-ink:#191c30; --home-muted:#73788b; background:#fff; color:var(--home-ink); font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; overflow-x:visible; }
.wcm-home a:focus-visible,.wcm-home button:focus-visible,.wcm-home [tabindex]:focus-visible { outline:3px solid #9389f5; outline-offset:4px; }
.wcm-home header { min-width:0; height:76px; background:#fff; border-bottom:1px solid #f0eff8; }
.wcm-home header .nav-inner { width:min(1200px,calc(100% - 80px)); display:flex; align-items:center; justify-content:space-between; height:76px; }
.wcm-home header .nav-inner .logo { width:144px; height:auto; float:none; flex-shrink:0; }
.wcm-home header .nav-inner .logo>img { display:block; width:144px; margin:0; }
.wcm-home header .nav-inner .navbar { float:none; margin:0; min-height:0; border:0; }
.wcm-home header .nav-inner .navbar>li>a,.wcm-home header .nav-inner .navbar>li>a>span { color:#53566b; height:76px; line-height:76px; }
.wcm-home header .nav-inner .navbar>li>a>span { padding:0 19px; }
.wcm-home header .nav-inner .navbar>.h-item:first-child>a>span { color:var(--home-accent); font-weight:600; }
.wcm-home header .nav-inner .navbar>li:hover>a>span { background:#f6f5ff; }
.wcm-home header .nav-inner .navbar .wcm-user-lg .wcm-login-btn,.wcm-home header .nav-inner .navbar .wcm-user-reg .wcm-reg-btn { width:92px; height:38px; line-height:36px; border:1px solid #aaa2ff; border-radius:6px; color:var(--home-accent); }
.wcm-home header .nav-inner .navbar .wcm-user-reg .wcm-reg-btn { background:var(--home-accent); color:#fff; border-color:var(--home-accent); }
.wcm-home .home-hero { margin-top:76px; background:#fafaff url('../images/home-lavender-bg.png') center center / cover no-repeat; padding-bottom:24px; }
.wcm-home .banner { width:min(1200px,calc(100% - 80px)); margin:0 auto; padding:40px 0 28px; gap:30px; min-height:540px; }
.wcm-home .banner .left { width:48%; flex-shrink:0; float:none; }
.wcm-home .banner .left .home-eyebrow { color:#53566b; font-size:15px; letter-spacing:1px; margin:0 0 20px; }
.wcm-home .banner .left .title { font-size:64px; line-height:1.16; letter-spacing:-2px; font-weight:750; margin:0 0 16px; color:var(--home-ink); }
.wcm-home .banner .left .title span { color:var(--home-accent); }
.wcm-home .banner .left .hero-description { color:#666b80; line-height:1.8; font-size:18px; }
.wcm-home .banner .left .wcm-btns { width:auto; justify-content:flex-start; gap:12px; margin-top:28px; flex-wrap:wrap; }
.wcm-home .banner .left .wcm-btns a { display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; font-size:14px; line-height:24px; border-color:#a29afa; border-radius:6px; background:#fff; white-space:nowrap; }
.wcm-home .banner .left .wcm-btns .wcm-dl-btn { background:var(--home-accent); border-color:var(--home-accent); box-shadow:0 5px 14px #6254ee1c; }
.wcm-home .banner .left .wcm-btns i { font-size:21px; float:none; }
.wcm-home .banner .left .ex { margin-top:11px; }
.wcm-home .banner .left .ex .ex-ver { margin:0; color:#818598; }
.wcm-home .banner .left .contact { margin-top:24px; width:188px; gap:0 20px; }
.wcm-home .banner .left .contact img { width:84px; height:84px; padding:3px; background:#fff; }
.wcm-home .banner .left .contact p { width:84px; color:#777c8f; font-size:11px; margin-top:6px; }
.wcm-home .banner .left .qq { display:flex; align-items:center; gap:4px; flex-wrap:wrap; font-size:11px; margin-top:15px; }
.wcm-home .banner .left .qq .kf-time { margin-left:8px; }
.wcm-home .banner .right { float:none; width:52%; min-width:0; }
.wcm-home .banner .right img { display:block; width:100%; height:auto; max-width:100%; }
.wcm-home .spilt-line { display:none; }
.wcm-home .wcm-index-notice-ctn { width:min(1200px,calc(100% - 80px)); }
.wcm-home .wcm-index-notice-ctn .wcm-index-notice { height:38px; padding:9px 36px 9px 16px; margin:0; border:1px solid #f4ebcd; border-radius:5px; background:#fffbed; box-shadow:none; }
.wcm-home .wcm-index-notice-ctn .wcm-index-notice .notice-nav { width:calc(100% - 28px); }
.wcm-home .feature-box { padding:52px 0 48px; }
.wcm-home .feature-head { font-size:28px; font-weight:650; margin:0; padding:0; color:var(--home-ink); }
.wcm-home .feature-intro { font-size:15px; color:var(--home-muted); margin:12px 0 34px; }
.wcm-home .feature-list { width:min(1200px,calc(100% - 80px)); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.wcm-home .feature-list li { width:auto; height:auto; margin:0; padding:0 16px; border:0; border-right:1px solid #eae8f5; }
.wcm-home .feature-list li:last-child { border:0; }
.wcm-home .span_bg { margin:0 auto 17px; width:68px; height:68px; line-height:68px; background:#efedff; color:var(--home-accent); border-radius:50%; }
.wcm-home .span_bg .icon-font { font-size:36px; line-height:68px; vertical-align:0; }
.wcm-home .feature-list h4 { font-size:17px; font-weight:600; margin:0 0 14px; }
.wcm-home .feature-list .c7 { min-height:46px; color:var(--home-muted); font-size:12px; line-height:1.8; }
.wcm-home .feature-list .mt15 { margin-top:0; }
.wcm-home .feature-list .icon-new { display:none; }
.wcm-home .btn-s { margin-top:18px; width:auto; padding:6px 13px; border-color:#b0a8fc; font-size:12px; color:var(--home-accent); }
.wcm-home .btn-s:hover { background:var(--home-accent); color:#fff; }
.wcm-home .transform-ctn { padding:48px 0; background:#fafaff; }
.wcm-home .transform-ctn:has(.video-content[data-type="3"]) { background:#fff; }
.wcm-home .transform-ctn .content { width:min(1200px,calc(100% - 80px)); align-items:center; gap:76px; }
.wcm-home .transform-ctn .content .text-content { width:43%; }
.wcm-home .transform-ctn .content .video-content { width:51%; flex-shrink:0; border:1px solid #e8e8f0; border-radius:8px; background:#fff; padding:5px; box-shadow:0 10px 28px #28264f0a; }
.wcm-home .transform-ctn .content .video-content>img { display:block; width:100%; border-radius:4px; }
.wcm-home .feature-chapter { display:flex; align-items:center; gap:16px; font-size:11px; color:#a19adb; letter-spacing:.5px; margin-bottom:12px; }
.wcm-home .feature-chapter span { font-size:50px; line-height:1; font-weight:750; font-style:italic; letter-spacing:-2px; color:#ded9ff; }
.wcm-home .transform-ctn .content .text-content .detail-title { font-size:30px; line-height:1.4; color:var(--home-ink); font-weight:650; margin:12px 0 16px; }
.wcm-home .transform-ctn .content .text-content p { font-size:15px; line-height:1.65; color:var(--home-muted); margin-top:6px; }
.wcm-home .transform-ctn .content .text-content .wcm-btn-nav a { height:42px; line-height:40px; border:1px solid var(--home-accent); border-radius:5px; background:var(--home-accent); font-size:13px; margin-top:20px; width:128px; }
.wcm-home .transform-ctn .content .text-content .wcm-btn-nav a+a { color:var(--home-accent); background:#fff; }
.wcm-home .home-cta { text-align:center; padding:46px 24px; background:#f5f3ff url('../images/home-lavender-bg.png') center bottom / cover no-repeat; }
.wcm-home .home-cta h2 { font-size:29px; font-weight:650; margin:0 0 12px; }
.wcm-home .home-cta p { color:var(--home-muted); font-size:14px; }
.wcm-home .home-download { margin:22px 0 10px; padding:12px 35px; background:var(--home-accent); color:#fff; border:0; border-radius:6px; font-size:16px; cursor:pointer; }
.wcm-home .home-cta .cta-version { font-size:12px; }
.wcm-home .foot-box { padding-top:0; background:#fff; }
.wcm-home .foot-flex { width:min(1100px,calc(100% - 80px)); padding:40px 0; }
.wcm-home .foot-items { justify-content:space-between; text-align:left; }
.wcm-home .foot-items .li-start { font-size:15px; margin-bottom:16px; }
.wcm-home .foot-items .li-items { font-size:13px; }
.wcm-home .foot-items img { padding:3px; border:1px solid #f1eff9; }
.wcm-home .foot-box .footer { background:#fff!important; border-top:1px solid #efedf6; padding:20px 24px; }
.wcm-home .foot-box .footer p { font-size:11px; color:#8b8ea0; line-height:2; }
.wcm-home .flex-nav { right:14px; top:auto; bottom:25px; padding:6px 0; background:#fff; border:1px solid #efedf6; border-radius:8px; box-shadow:0 4px 20px #302c5510; width:56px; }
.wcm-home .flex-nav ul li { padding-top:5px; margin-bottom:0; font-size:11px; }
.wcm-home #tutorial .tutorial-main { width:min(1100px,calc(100% - 32px)); height:auto; max-height:90vh; top:5vh; overflow:auto; border-radius:12px; }
.wcm-home #tutorial .close { left:auto; right:20px; }
.wcm-home #tutorial .bottom-picture img { max-width:100%; height:auto; }
.wcm-home #tutorial .tutorial-link { position:static; margin-bottom:12px; }
.wcm-home #tutorial .top-text { padding:15px; }
.wcm-home #wcm-video-ctn .modal-main { width:min(1180px,calc(100% - 32px)); height:fit-content; max-height:90vh; overflow:auto; border-radius:12px; }
.wcm-home #wcm-video-ctn .modal-con { display:flex; padding:12px; }
.wcm-home #wcm-video-ctn .videos_list { width:230px; flex-shrink:0; }
.wcm-home #wcm-video-ctn .videos_list ul { height:auto; max-height:60vh; padding:0 12px 0 0; }
.wcm-home #wcm-video-ctn video { width:calc(100% - 230px); margin:0; align-self:flex-start; }
@media(max-width:1050px) {
 .wcm-home .banner .left .title { font-size:50px; }
 .wcm-home .banner .left .wcm-btns { gap:8px; }
 .wcm-home .banner .left .wcm-btns a { padding:8px 10px; }
 .wcm-home .banner .left .qq .kf-time { margin-left:0; flex-basis:100%; }
 .wcm-home .transform-ctn .content { gap:35px; }
 .wcm-home header .nav-inner .navbar>li>a>span { padding:0 12px; }
 .wcm-home .feature-list li { padding:0 10px; }
}
@media(max-width:720px) {
 .wcm-home header { height:auto; position:relative; }
 .wcm-home header .nav-inner { width:calc(100% - 32px); height:auto; min-height:102px; flex-wrap:wrap; justify-content:center; padding-top:14px; gap:7px; }
 .wcm-home header .nav-inner .logo { width:112px; }
 .wcm-home header .nav-inner .logo>img { width:112px; }
 .wcm-home header .nav-inner .navbar { width:100%; display:flex; justify-content:center; flex-wrap:wrap; }
 .wcm-home header .nav-inner .navbar>li>a,.wcm-home header .nav-inner .navbar>li>a>span { height:46px; line-height:46px; font-size:12px; padding:0 9px; }
 .wcm-home header .nav-inner .navbar .wcm-user-lg .wcm-login-btn,.wcm-home header .nav-inner .navbar .wcm-user-reg .wcm-reg-btn { width:auto; height:29px; line-height:27px; margin:0; padding:0 11px; }
 .wcm-home .home-hero { margin-top:0; }
 .wcm-home .banner { width:calc(100% - 40px); padding:24px 0 20px; flex-direction:column; gap:24px; }
 .wcm-home .banner .left,.wcm-home .banner .right { width:100%; }
 .wcm-home .banner .left .title { font-size:46px; line-height:1.18; }
 .wcm-home .banner .left .hero-description { font-size:15px; }
 .wcm-home .banner .left .wcm-btns { margin-top:22px; }
 .wcm-home .banner .left .wcm-btns a { font-size:12px; padding:8px 10px; }
 .wcm-home .banner .left .wcm-btns i { font-size:18px; }
 .wcm-home .banner .right { max-width:500px; }
 .wcm-home .wcm-index-notice-ctn { width:calc(100% - 40px); }
 .wcm-home .feature-box { padding:35px 0; }
 .wcm-home .feature-head { font-size:23px; }
 .wcm-home .feature-list { width:calc(100% - 32px); grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 0; }
 .wcm-home .feature-list li:nth-child(even) { border:0; }
 .wcm-home .feature-list li:last-child { grid-column:1/-1; }
 .wcm-home .transform-ctn { padding:32px 0; }
 .wcm-home .transform-ctn .content { width:calc(100% - 40px); flex-direction:column; gap:24px; }
 .wcm-home .transform-ctn .content .text-content { width:100%; order:0; }
 .wcm-home .transform-ctn .content .video-content { width:100%; order:1; }
 .wcm-home .transform-ctn .content .text-content .detail-title { font-size:25px; }
 .wcm-home .home-cta h2 { font-size:23px; line-height:1.5; }
 .wcm-home .foot-flex { width:calc(100% - 40px); padding:30px 0; }
 .wcm-home .foot-items { flex-wrap:wrap; gap:24px; }
 .wcm-home .foot-items>ul { margin-right:0!important; }
 .wcm-home .flex-nav { right:5px; bottom:10px; transform:scale(.82); transform-origin:right bottom; }
 .wcm-home #wcm-video-ctn .modal-con { flex-direction:column-reverse; }
 .wcm-home #wcm-video-ctn video,.wcm-home #wcm-video-ctn .videos_list { width:100%; }
 .wcm-home #wcm-video-ctn .videos_list ul { max-height:28vh; padding:0; }
}
/* Keep the optional holiday banner compatible with the homepage header. */
.wcm-home header { height:auto!important; }
.wcm-home .home-hero { margin-top:var(--home-header-height,76px); background-color:#a0a0a0; background-blend-mode:screen; }
.wcm-home .banner { margin-top:0!important; }
.wcm-home .home-cta { background-color:#a0a0a0; background-blend-mode:screen; }
@media(max-width:720px) {
 .wcm-home .home-hero { margin-top:0; }
 .wcm-home header .nav-inner .navbar>li>a { padding:0; }
 .wcm-home header .nav-inner .navbar .wcm-user-lg a,.wcm-home header .nav-inner .navbar .wcm-user-reg a { padding:0 4px; }
}
.wcm-home .transform-ctn .content .video-content>.play-it { display:flex; align-items:center; justify-content:center; left:50%; top:50%; transform:translate(-50%,-50%); width:58px; height:58px; border-radius:50%; background:var(--home-accent); opacity:.86; }
.wcm-home .transform-ctn .content .video-content>.play-it:after { display:none; }
.wcm-home .play-it .icon-font { font-size:29px; color:#fff; }
.wcm-home .home-service-hours { padding-left:32px; border-left:1px solid #efedf6; }
.wcm-home .home-service-note { color:var(--home-muted); }
@media(max-width:720px) { .wcm-home .home-service-hours { padding-left:0; border:0; } }
/* Match the selected concept's stronger type hierarchy at desktop widths. */
@media(min-width:1051px) {
 .wcm-home .banner .left .title { font-size:76px; }
 .wcm-home .feature-head { font-size:32px; }
 .wcm-home .feature-list h4 { font-size:19px; }
 .wcm-home .feature-list .c7 { font-size:14px; min-height:52px; }
 .wcm-home .transform-ctn .content .text-content .detail-title { font-size:32px; }
 .wcm-home .transform-ctn .content .text-content p { font-size:16px; }
}
.wcm-home .feature-list li { display:flex; flex-direction:column; align-items:center; }
.wcm-home .feature-list .c7 { flex:1; }
@media(min-width:1051px) {
 .wcm-home .banner .left { width:43%; }
 .wcm-home .banner .right { width:57%; }
 .wcm-home .banner .left .contact { width:212px; }
 .wcm-home .banner .left .contact img,.wcm-home .banner .left .contact p { width:96px; }
 .wcm-home .banner .left .contact img { height:96px; }
}
/* Header interaction colors stay within the homepage violet palette. */
.wcm-home header .nav-inner .navbar>.h-item:before {
    height:2px;
    background:var(--home-accent);
    transition:width .18s ease,left .18s ease;
}
.wcm-home header .nav-inner .navbar>.h-item:hover>a>span,
.wcm-home header .nav-inner .navbar>.h-item:focus-within>a>span {
    color:var(--home-accent);
    background:#f6f5ff;
}
.wcm-home header .nav-inner .navbar>.h-item:focus-within:before { width:100%; left:0; }
.wcm-home header .nav-inner .navbar .wcm-login-btn,
.wcm-home header .nav-inner .navbar .wcm-reg-btn {
    transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.wcm-home header .nav-inner .navbar .wcm-user-lg a:hover .wcm-login-btn,
.wcm-home header .nav-inner .navbar .wcm-user-lg a:focus-visible .wcm-login-btn {
    background:#f0edff;
    border-color:#8b7df1;
    color:#5143cf;
}
.wcm-home header .nav-inner .navbar .wcm-user-reg a:hover .wcm-reg-btn,
.wcm-home header .nav-inner .navbar .wcm-user-reg a:focus-visible .wcm-reg-btn {
    background:#5143cf;
    border-color:#5143cf;
    color:#fff;
}

/* A single Tabler outline family: 24px viewBox, 2px strokes, rounded caps/joins. */
.wcm-home .feature-list .span_bg { display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wcm-home .home-feature-icon {
    display:block;
    width:36px;
    height:36px;
    background-color:var(--home-accent);
    -webkit-mask:var(--feature-icon) center / contain no-repeat;
    mask:var(--feature-icon) center / contain no-repeat;
}
.wcm-home .home-feature-icon--ranking { --feature-icon:url('../images/home-icons/chart-bar.svg'); }
.wcm-home .home-feature-icon--store { --feature-icon:url('../images/home-icons/building-store.svg'); }
.wcm-home .home-feature-icon--media { --feature-icon:url('../images/home-icons/photo-video.svg'); }
.wcm-home .home-feature-icon--reviews { --feature-icon:url('../images/home-icons/message-star.svg'); }
.wcm-home .home-feature-icon--check { --feature-icon:url('../images/home-icons/shield-check.svg'); }

/* Homepage tutorial library. */
.wcm-home .home-contact-hours { margin-top:16px; color:var(--home-muted); font-size:11px; }
.wcm-home #wcm-video-ctn .mask { inset:0; background:rgba(21,23,43,.56); backdrop-filter:blur(5px); }
.wcm-home #wcm-video-ctn .modal-main { width:min(1180px,calc(100% - 48px)); max-height:calc(100dvh - 48px); border:1px solid #e8e5f2; border-radius:20px; box-shadow:0 32px 100px #15172b40; overflow:auto; }
.wcm-home #wcm-video-ctn .modal-header { display:flex; align-items:center; justify-content:space-between; padding:24px 28px; border-bottom:1px solid #eeedf4; }
.wcm-home #wcm-video-ctn .modal-header h4 { margin:0; text-align:left; font-size:22px; line-height:1.4; font-weight:700; }
.wcm-home #wcm-video-ctn .modal-header p { margin:5px 0 0; font-size:13px; color:var(--home-muted); }
.wcm-home #wcm-video-ctn .close-btn { position:static; width:36px; height:36px; line-height:30px; border:0; border-radius:50%; background:#f3f2f8; color:#747487; font-size:25px; }
.wcm-home #wcm-video-ctn .close-btn:hover { background:#ebe7ff; color:var(--home-accent); }
.wcm-home #wcm-video-ctn .modal-con { display:grid; grid-template-columns:248px minmax(0,1fr); padding:0; }
.wcm-home #wcm-video-ctn .videos_list { float:none; width:auto; padding:22px 14px; background:#faf9fd; border-right:1px solid #eeedf4; }
.wcm-home #wcm-video-ctn .video-directory-title { margin:0 12px 14px; font-size:12px; font-weight:600; color:#828296; display:flex; justify-content:space-between; }
.wcm-home #wcm-video-ctn .video-directory-title span { font-weight:400; }
.wcm-home #wcm-video-ctn .videos_list ul { height:auto; max-height:440px; padding:0; margin:0; }
.wcm-home #wcm-video-ctn .videos_list li { margin:3px 0; padding:0; border:0; background:none; list-style:none; line-height:normal; }
.wcm-home #wcm-video-ctn .videos_list button { display:flex; align-items:center; gap:12px; width:100%; min-height:41px; border:0; border-radius:8px; padding:10px 12px; text-align:left; font:inherit; font-size:13px; color:#505468; background:transparent; cursor:pointer; }
.wcm-home #wcm-video-ctn .lesson-number { font-size:11px; color:#9998ab; font-variant-numeric:tabular-nums; }
.wcm-home #wcm-video-ctn .videos_list button:hover { background:#f0edf9; }
.wcm-home #wcm-video-ctn .videos_list button.playing { background:#ebe7ff; color:#5949db; font-weight:600; }
.wcm-home #wcm-video-ctn .playing .lesson-number { color:#796be0; }
.wcm-home #wcm-video-ctn button:focus-visible { outline:2px solid var(--home-accent); outline-offset:2px; }
.wcm-home #wcm-video-ctn .video-stage { min-width:0; padding:24px; }
.wcm-home #wcm-video-ctn .video-lesson-count { color:#8b86a3; font-size:11px; letter-spacing:1px; }
.wcm-home #wcm-video-ctn .video-now h3 { margin:5px 0 18px; font-size:20px; font-weight:600; }
.wcm-home #wcm-video-ctn video { display:block; float:none; width:100%; aspect-ratio:16/9; max-height:56vh; object-fit:contain; margin:0; border:0; border-radius:10px; background:#171827; }
.wcm-home #wcm-video-ctn .video-help { margin:13px 0 0; font-size:11px; color:#9291a2; }
@media (max-width:720px) {
 .wcm-home #wcm-video-ctn .modal-main { width:calc(100% - 24px); max-height:calc(100dvh - 24px); border-radius:14px; }
 .wcm-home #wcm-video-ctn .modal-header { padding:17px 18px; }
 .wcm-home #wcm-video-ctn .modal-header h4 { font-size:19px; }
 .wcm-home #wcm-video-ctn .modal-con { display:flex; flex-direction:column-reverse; }
 .wcm-home #wcm-video-ctn .video-stage { padding:18px; }
 .wcm-home #wcm-video-ctn .video-now h3 { font-size:17px; margin-bottom:12px; }
 .wcm-home #wcm-video-ctn .videos_list { padding:16px 12px; border-right:0; border-top:1px solid #eeedf4; }
 .wcm-home #wcm-video-ctn .videos_list ul { max-height:23vh; }
}
.wcm-home #wcm-video-ctn .modal-header { width:auto; margin:0; }
.wcm-home #wcm-video-ctn .modal-header::before,
.wcm-home #wcm-video-ctn .modal-header::after { display:none; }

/* Hero actions: download leads, learning links stay secondary. */
.wcm-home .banner .left .wcm-btns { align-items:center; gap:12px; }
.wcm-home .banner .left .wcm-btns a { box-sizing:border-box; height:52px; padding:12px 16px; border-radius:9px; gap:7px; transition:background-color .18s,box-shadow .18s,border-color .18s; }
.wcm-home .banner .left .wcm-btns i { margin:0; }
.wcm-home .banner .left .wcm-btns .wcm-dl-btn { min-width:174px; padding:12px 25px; font-size:16px; font-weight:600; color:#fff; background:#6254ee; border:1px solid #6254ee; box-shadow:0 7px 18px #6254ee30; }
.wcm-home .banner .left .wcm-btns .wcm-dl-btn:hover { background:#5143d6; border-color:#5143d6; box-shadow:0 9px 22px #6254ee40; }
.wcm-home .banner .left .wcm-btns .wcm-how-to-install { background:rgba(255,255,255,.7); border:1px solid #dfdcea; color:#5f6175; }
.wcm-home .banner .left .wcm-btns .wcm-how-to-install:hover { background:#fff; border-color:#b6acef; color:#5949db; }
.wcm-home .banner .left .wcm-btns .wcm-use { background:transparent; border:1px solid transparent; padding-left:8px; padding-right:8px; color:#666479; }
.wcm-home .banner .left .wcm-btns .wcm-use:hover { background:#eeeaff; color:#5949db; }
@media(max-width:720px) {
 .wcm-home .banner .left .wcm-btns { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; }
 .wcm-home .banner .left .wcm-btns .wcm-dl-btn { grid-column:1/-1; width:100%; }
 .wcm-home .banner .left .wcm-btns .wcm-how-to-install,
 .wcm-home .banner .left .wcm-btns .wcm-use { height:42px; font-size:13px; }
}

/* Download dialog shares the homepage and tutorial library palette. */
.wcm-home #tutorial .mask { inset:0; background:rgba(21,23,43,.56); backdrop-filter:blur(5px); }
.wcm-home #tutorial .tutorial-main { width:min(1080px,calc(100% - 48px)); top:50%; transform:translateY(-50%); max-height:calc(100dvh - 48px); border:1px solid #e8e5f2; border-radius:20px; box-shadow:0 32px 100px #15172b40; }
.wcm-home #tutorial .modal-head { display:flex; align-items:center; justify-content:space-between; height:auto; padding:24px 28px; line-height:1.5; background:#fff; border-bottom:1px solid #eeedf4; }
.wcm-home #tutorial h2 { margin:0; font-size:22px; font-weight:700; color:var(--home-ink); }
.wcm-home #tutorial .modal-head p { margin:5px 0 0; font-size:13px; font-weight:400; color:var(--home-muted); }
.wcm-home #tutorial .close { position:static; float:none; flex-shrink:0; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:#f3f2f8; color:#747487; font-size:25px; line-height:32px; opacity:1; text-shadow:none; }
.wcm-home #tutorial .close:hover { background:#ebe7ff; color:var(--home-accent); }
.wcm-home #tutorial .top-text { display:grid; grid-template-columns:1fr auto; gap:18px; margin:24px 28px; padding:22px 24px; border:1px solid #e9e4fa; border-radius:12px; background:#f8f6ff; text-align:left; }
.wcm-home #tutorial .download-summary { display:flex; align-items:center; gap:14px; }
.wcm-home #tutorial .download-symbol { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:12px; background:#ebe6ff; color:var(--home-accent); }
.wcm-home #tutorial .download-symbol i { font-size:27px; }
.wcm-home #tutorial h3 { margin:0; font-size:17px; font-weight:600; }
.wcm-home #tutorial .download-summary p { margin:6px 0 0; color:#818096; font-size:12px; }
.wcm-home #tutorial .modal-ver { color:#6254ee; margin-left:5px; }
.wcm-home #tutorial .download-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.wcm-home #tutorial #download-btn,.wcm-home #tutorial .online-download { padding:0 24px; height:46px; line-height:44px; border:1px solid #6254ee; border-radius:8px; background:#6254ee; color:#fff; font-size:15px; font-weight:600; text-decoration:none; cursor:pointer; }
.wcm-home #tutorial #download-btn:hover { background:#5143d6; border-color:#5143d6; }
.wcm-home #tutorial .online-download { background:#fff; color:#6254ee; }
.wcm-home #tutorial .download-privacy { grid-column:1/-1; margin:0; font-size:11px; line-height:1.7; color:#8a879d; }
.wcm-home #tutorial .privacy_t { color:#6a5cbd; font-size:11px; }
.wcm-home #tutorial .bottom-picture { margin:0; padding:0 28px 28px; text-align:left; }
.wcm-home #tutorial .install-guide-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.wcm-home #tutorial .install-guide-heading p { margin:6px 0 0; font-size:12px; color:var(--home-muted); }
.wcm-home #tutorial .tutorial-link { position:static; margin:0; font-size:13px; color:#6254ee; white-space:nowrap; }
.wcm-home #tutorial .install-guide-image { overflow:auto; border:1px solid #eceaf3; border-radius:10px; background:#fafafd; }
.wcm-home #tutorial .bottom-picture img { display:block; width:100%; height:auto; }
@media(max-width:720px) {
 .wcm-home #tutorial .tutorial-main { width:calc(100% - 24px); max-height:calc(100dvh - 24px); border-radius:14px; }
 .wcm-home #tutorial .modal-head { padding:18px; }
 .wcm-home #tutorial h2 { font-size:19px; }
 .wcm-home #tutorial .top-text { margin:18px; padding:18px; grid-template-columns:1fr; }
 .wcm-home #tutorial .download-actions { flex-direction:column; align-items:stretch; text-align:center; }
 .wcm-home #tutorial .bottom-picture { padding:0 18px 18px; }
 .wcm-home #tutorial .install-guide-heading { align-items:flex-start; flex-direction:column; gap:10px; }
 .wcm-home #tutorial .bottom-picture img { min-width:680px; max-width:none; }
}

/* Crisp, responsive installation illustrations; all text remains selectable. */
.wcm-home #tutorial #download-btn,.wcm-home #tutorial .tutorial-link { display:inline-flex; align-items:center; justify-content:center; gap:8px; line-height:1; }
.wcm-home #tutorial #download-btn i,.wcm-home #tutorial .tutorial-link i { display:inline-flex; align-items:center; justify-content:center; float:none; position:static; width:20px; height:20px; margin:0; padding:0; font-size:20px; line-height:1; vertical-align:middle; }
.wcm-home #tutorial #download-btn i::before,.wcm-home #tutorial .tutorial-link i::before { display:block; line-height:1; }
.wcm-home #tutorial .install-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; list-style:none; margin:0; padding:0; }
.wcm-home #tutorial .install-steps>li { min-width:0; padding:20px; border:1px solid #ebe8f4; border-radius:12px; background:#fff; }
.wcm-home #tutorial .step-heading { display:flex; align-items:center; gap:10px; }
.wcm-home #tutorial .step-number { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; background:#eee9ff; color:#6254ee; font-size:12px; font-weight:700; }
.wcm-home #tutorial .step-heading h4 { font-size:15px; font-weight:600; margin:0; }
.wcm-home #tutorial .install-steps p { color:#77768b; font-size:12px; line-height:1.8; margin:12px 0 18px; min-height:65px; }
.wcm-home #tutorial .step-demo { height:150px; padding:14px; display:flex; align-items:center; justify-content:center; border-radius:9px; background:#f8f7fc; box-sizing:border-box; font-size:11px; color:#646177; }
.wcm-home #tutorial .demo-file { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #e8e4f3; padding:14px 10px; border-radius:8px; }
.wcm-home #tutorial .file-extension { border:1px solid #cfc6f7; border-radius:5px; padding:16px 5px; color:#6254ee; font-size:10px; font-weight:700; }
.wcm-home #tutorial .demo-file strong { display:block; font-size:12px; font-weight:500; color:#49435f; }
.wcm-home #tutorial .demo-file small { display:block; margin-top:7px; font-size:10px; color:#9690a6; }
.wcm-home #tutorial .demo-browser,.wcm-home #tutorial .demo-install { width:100%; padding:10px; background:#fff; border:1px solid #e8e4f3; border-radius:7px; }
.wcm-home #tutorial .demo-browser-bar,.wcm-home #tutorial .demo-menu-row,.wcm-home #tutorial .demo-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:6px; }
.wcm-home #tutorial .demo-browser-bar { border-bottom:1px solid #efedf5; color:#9992aa; }
.wcm-home #tutorial .demo-menu-active { background:#eeebff; color:#6254ee; padding:8px; border-radius:4px; margin-top:3px; }
.wcm-home #tutorial .demo-toggle { width:24px; height:14px; padding:2px; border-radius:10px; background:#6254ee; box-sizing:border-box; }
.wcm-home #tutorial .demo-toggle::after { content:''; display:block; margin-left:auto; width:10px; height:10px; border-radius:50%; background:#fff; }
.wcm-home #tutorial .demo-drop { margin:6px 0; padding:10px 3px; text-align:center; border:1px dashed #c6bdec; border-radius:4px; color:#a097b8; }
.wcm-home #tutorial .demo-confirm { display:block; width:100px; margin:7px auto 0; padding:5px; text-align:center; border-radius:4px; color:#fff; background:#6254ee; }
.wcm-home #tutorial .install-note { font-size:11px; line-height:1.8; color:#8b859c; margin:16px 0 0; }
.wcm-home #tutorial .legacy-install-guide { margin-top:12px; font-size:12px; color:#756a99; }
.wcm-home #tutorial .legacy-install-guide summary { cursor:pointer; padding:6px 0; }
.wcm-home #tutorial .legacy-install-guide .install-guide-image { margin-top:10px; }
@media(max-width:720px) {
 .wcm-home #tutorial .install-steps { grid-template-columns:1fr; }
 .wcm-home #tutorial .install-steps p { min-height:0; }
 .wcm-home #tutorial .step-demo { height:140px; }
}
/* Keep the required save-as action prominent and the guide concise. */
.wcm-home #tutorial #download-btn { min-width:202px; height:54px; padding:0 28px; font-size:16px; box-shadow:0 6px 16px #6254ee24; }
.wcm-home #tutorial .install-steps p { min-height:44px; }
@media(max-width:720px) { .wcm-home #tutorial .install-steps p { min-height:0; } }

/* Account navigation: scoped to the redesigned WCM website. */
.wcm-home header .navbar .tk-nav-a > .user-name > span {
    display:flex; align-items:center; gap:8px;
}
.wcm-home header .navbar .tk-nav-a > .user-name .icon-font {
    display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; font-size:22px; line-height:1; margin:0;
}
.wcm-home header .navbar .tk-nav-a > .user-name > span::after {
    content:""; width:6px; height:6px; margin-left:4px;
    border-right:1.5px solid #85899a; border-bottom:1.5px solid #85899a;
    transform:translateY(-2px) rotate(45deg);
}
.wcm-home header .navbar .tk-nav-a .dropdown-menu {
    top:calc(100% - 6px); right:0; left:auto; min-width:212px;
    margin:0; padding:8px; border:1px solid #e8eaf1; border-radius:12px;
    background:#fff; box-shadow:0 12px 36px rgba(32,34,54,.12);
    max-height:calc(100vh - 88px); overflow-y:auto;
}
.wcm-home header .navbar .tk-nav-a:focus-within .dropdown-menu { display:block; }
.wcm-home header .navbar .tk-nav-a .dropdown-menu > .arrow-top,
.wcm-home header .navbar .tk-nav-a .dropdown-menu > .arrow-bottom { display:none; }
.wcm-home header .navbar .tk-nav-a .dropdown-menu > li { float:none; margin:0; }
.wcm-home header .navbar .tk-nav-a .dropdown-menu > li > a {
    display:flex; align-items:center; gap:12px; min-height:42px;
    padding:10px 12px; border-radius:7px; color:#505568;
    font-size:14px; font-weight:400; line-height:22px;
    background:transparent; transition:background-color .15s,color .15s;
}
.wcm-home header .navbar .tk-nav-a .dropdown-menu > li > a .icon-font {
    display:inline-flex; align-items:center; justify-content:center; flex:0 0 22px;
    width:22px; height:22px; margin:0; font-size:18px!important;
    line-height:1; color:#6254ee;
}
.wcm-home header .navbar .tk-nav-a .dropdown-menu > li > a:hover,
.wcm-home header .navbar .tk-nav-a .dropdown-menu > li > a:focus-visible {
    background:#f3f1ff; color:#6254ee;
}
.wcm-home header .navbar .tk-nav-a .dropdown-menu > li:last-child {
    margin-top:6px; padding-top:6px; border-top:1px solid #edf0f5;
}
.wcm-home header .navbar .tk-nav-a .dropdown-menu > li:last-child > a .icon-font { color:#85899a; }

.wcm-home header .navbar .tk-nav-a .dropdown-menu .wcm-account-icon {
    display:block; flex:0 0 20px; width:20px; height:20px;
    margin:0 1px; color:#6254ee;
}
.wcm-home header .navbar .tk-nav-a .dropdown-menu > li:last-child .wcm-account-icon { color:#85899a; }
.wcm-home header .navbar .tk-nav-a .dropdown-menu > li > a:hover .wcm-account-icon { color:currentColor; }