/* WordPress hosting page: animated wp-admin mock, install steps, care tabs. */

/* ---------- hero mock window ---------- */
.wpx-win{position:relative;margin:0;background:#fff;border-radius:var(--r-lg);box-shadow:0 50px 90px -40px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08);overflow:hidden;color:var(--ink);rotate:-1deg}
.wpx-bar{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;background:var(--tint);border-bottom:1px solid var(--line)}
.wpx-bar span{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.wpx-bar span:first-child{background:#e46b6b}.wpx-bar span:nth-child(2){background:#e7c14d}.wpx-bar span:nth-child(3){background:#5fbf74}
.wpx-bar p{margin-left:12px;flex:1;max-width:280px;height:24px;line-height:24px;padding:0 10px;border-radius:6px;background:#fff;border:1px solid var(--line);font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wpx-body{display:grid;grid-template-columns:132px minmax(0,1fr);min-height:330px}
.wpx-side{background:var(--deep);padding:12px 0;display:flex;flex-direction:column;gap:2px}
.wpx-logo{display:flex;align-items:center;justify-content:center;height:38px;color:#fff;margin-bottom:6px}
.wpx-logo .hp-ico{width:24px;height:24px}
.wpx-nav{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:12.5px;color:var(--on-dark-mute)}
.wpx-nav i{width:12px;height:12px;border-radius:3px;background:rgba(255,255,255,.18)}
.wpx-nav.is-on{background:var(--brand);color:#fff}
.wpx-nav.is-on i{background:rgba(255,255,255,.6)}
.wpx-main{padding:18px 18px 16px;min-width:0}
.wpx-hi{font:700 14.5px/1.35 var(--head);color:var(--ink)}
.wpx-top{display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;align-items:center;margin:12px 0 14px;padding:12px;border:1px solid var(--line);border-radius:var(--r)}
.wpx-gauge{position:relative;width:118px;height:118px}
.wpx-gauge svg{width:100%;height:100%;transform:rotate(135deg)}
.wpx-gauge circle{fill:none;stroke-width:10;stroke-linecap:round}
.wpx-gauge__bg{stroke:var(--line)}
.wpx-gauge__fg{stroke:var(--brand);stroke-dashoffset:calc(var(--c) * (1 - var(--v)))}
.hp-mo .wpx-gauge__fg{transition:stroke-dashoffset 1.4s var(--ease-o)}
.hp-mo .wpx-win:not(.is-run) .wpx-gauge__fg{stroke-dashoffset:var(--c)}
.wpx-gauge b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 32px/1 var(--head);letter-spacing:-.03em;color:var(--ink);padding-bottom:6px}
.wpx-gauge small{position:absolute;left:0;right:0;bottom:-4px;text-align:center;font-size:11px;color:var(--muted)}
.wpx-vitals{display:grid;gap:10px;min-width:0}
.wpx-vitals li{display:grid;gap:5px;font-size:12px;color:var(--muted)}
.wpx-vitals i{display:block;height:6px;border-radius:6px;background:var(--line);position:relative;overflow:hidden}
.wpx-vitals i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--brand-l),var(--brand-d));transform-origin:0 50%;transform:scaleX(var(--w))}
.hp-mo .wpx-vitals i::after{transition:transform 1.2s var(--ease-o) .3s}
.hp-mo .wpx-win:not(.is-run) .wpx-vitals i::after{transform:scaleX(0)}
.wpx-log{display:grid;gap:8px}
.wpx-task{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;background:var(--tint);border:1px solid var(--line);min-width:0}
.wpx-task__ic{flex:none;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);color:var(--muted)}
.wpx-task__ic .hp-ico{width:16px;height:16px}
.wpx-task__t{flex:1;min-width:0}
.wpx-task__t b{display:block;font:700 13px/1.3 var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wpx-task__t small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wpx-task__s{flex:none;display:inline-flex;align-items:center;gap:5px;font:700 12px var(--body);color:#0f7a37;background:#e7f6ec;padding:5px 8px;border-radius:999px}
.wpx-task__s i{display:flex}
.wpx-task__s .hp-ico{width:13px;height:13px;stroke-width:3}
.hp-mo .wpx-task{transition:background-color .4s,border-color .4s}
.hp-mo .wpx-task .wpx-task__s{transition:opacity .35s var(--ease-o),transform .45s cubic-bezier(.34,1.5,.5,1)}
.hp-mo .wpx-task .wpx-task__ic{transition:color .3s,border-color .3s}
.hp-mo .wpx-task:not(.is-done) .wpx-task__s{opacity:0;transform:scale(.6)}
.wpx-task.is-busy .wpx-task__ic{color:var(--brand);border-color:var(--brand)}
.hp-mo .wpx-task.is-busy .wpx-task__ic .hp-ico{animation:wpx-spin 1s linear infinite}
.wpx-task.is-done{background:#fff}
.wpx-task.is-done .wpx-task__ic{color:#0f7a37;border-color:#bfe6cb}
@keyframes wpx-spin{to{transform:rotate(360deg)}}
.wpx-win.is-paused .hp-ico{animation-play-state:paused!important}
.hp-mo .wpx-win.is-fade .wpx-main{opacity:.0;transition:opacity .5s}
.hp-mo .wpx-main{transition:opacity .5s}
.wpx-cap{padding:10px 16px;border-top:1px solid var(--line);font-size:12px;line-height:1.45;color:var(--muted);background:var(--tint)}

/* ---------- install steps ---------- */
.wpx-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative}
.wpx-steps::before{content:"";position:absolute;left:12%;right:12%;top:36px;height:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 8px,transparent 8px 14px)}
.wpx-step{position:relative;text-align:center;padding:0 6px}
.wpx-step__ic{position:relative;display:flex;align-items:center;justify-content:center;width:72px;height:80px;margin:0 auto 18px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--ink);color:#fff}
.wpx-step:nth-child(3) .wpx-step__ic{background:var(--brand)}
.wpx-step__ic .hp-ico{width:28px;height:28px}
.wpx-step__n{position:absolute;top:-6px;left:calc(50% + 22px);z-index:1;width:26px;height:26px;border-radius:50%;background:var(--gold);color:var(--deep);font:800 13px/26px var(--head)}
.wpx-step h3{font-size:18px}
.wpx-step p{margin-top:8px;color:var(--muted);font-size:15px;max-width:30ch;margin-left:auto;margin-right:auto}

/* ---------- care tabs ---------- */
.wpx-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:40px}
.wpx-panel__copy h3{font:800 26px/1.2 var(--head);letter-spacing:-.02em}
.wpx-panel__copy p{margin-top:14px;color:var(--muted);font-size:16.5px}
.wpx-ticks{display:grid;gap:8px;margin-top:20px}
.wpx-ticks li{display:flex;gap:10px;align-items:flex-start;font-weight:500}
.wpx-ticks .hp-ico{color:var(--brand);width:20px;height:20px;stroke-width:2.4;margin-top:2px}
.wpx-dia{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:28px;min-width:0}
.wpx-dia--stage{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.wpx-site{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 16px;box-shadow:0 14px 30px -24px rgba(22,33,43,.5);min-width:0}
.wpx-site b{display:block;font:700 16px var(--head)}
.wpx-site small{display:block;color:var(--muted);font-size:13px;margin-top:2px;overflow-wrap:anywhere}
.wpx-site.is-stage{border-style:dashed;border-color:var(--brand)}
.wpx-ok{display:inline-block;margin-top:12px;font:600 12px var(--body);background:var(--brand-tint);color:var(--brand-d);padding:5px 8px;border-radius:6px}
.wpx-site:not(.is-stage) .wpx-ok{background:#e7f6ec;color:#0f7a37}
.wpx-arrows{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}
.wpx-arrows span{display:inline-flex;align-items:center;gap:4px;font:600 12px var(--body);color:var(--ink);white-space:nowrap}
.wpx-arrows span.is-back{color:var(--brand-d)}
.wpx-arrows .hp-ico{width:16px;height:16px;transform:rotate(90deg)}
.wpx-upd{display:grid;gap:10px}
.wpx-upd li{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.wpx-upd__ic{width:34px;height:34px;flex:none;border-radius:8px;background:var(--brand-tint);color:var(--brand-d);display:flex;align-items:center;justify-content:center}
.wpx-upd__ic .hp-ico{width:17px;height:17px}
.wpx-upd li>span:nth-child(2){flex:1;min-width:0}
.wpx-upd b{display:block;font:700 14.5px var(--head)}
.wpx-upd small{color:var(--muted);font-size:12.5px}
.wpx-upd em{font-style:normal;display:inline-flex;align-items:center;gap:4px;font:600 12.5px var(--body);color:#0f7a37}
.wpx-upd em .hp-ico{width:14px;height:14px;stroke-width:3}
.wpx-dia__note{margin-top:14px;font-size:12.5px;color:var(--muted)}
.wpx-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.wpx-days span{display:flex;flex-direction:column;align-items:center;gap:8px;font:600 12.5px var(--body);color:var(--muted)}
.wpx-days i{width:100%;max-width:44px;aspect-ratio:1;border-radius:10px;background:#fff;border:1px solid var(--line);position:relative}
.wpx-days i::after{content:"";position:absolute;inset:30%;border-radius:50%;background:var(--brand)}
.wpx-days .is-wk i{background:var(--ink);border-color:var(--ink)}
.wpx-days .is-wk i::after{background:var(--gold)}

/* ---------- fit ---------- */
.wpx-fit{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:center}
.wpx-fit__img{margin:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow)}
.wpx-fit__img img{width:100%;height:100%;object-fit:cover}
.wpx-fit .hp-sec-head{margin-bottom:40px}
.wpx-fit .hp-fgrid{gap:32px 36px}
.wpx-faq .hp-faq{max-width:820px;margin:0 auto}

@media (max-width:1023px){
  .wpx-win{rotate:none;max-width:620px}
  .wpx-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 20px}
  .wpx-steps::before{display:none}
  .wpx-panel{grid-template-columns:1fr;gap:28px;padding:28px}
  .wpx-fit{grid-template-columns:1fr;gap:40px}
  .wpx-fit__img{aspect-ratio:16/9}
}
@media (max-width:767px){
  .wpx-body{grid-template-columns:1fr;min-height:0}
  .wpx-side{display:none}
  .wpx-main{padding:14px 12px 12px}
  .wpx-top{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:10px}
  .wpx-gauge{width:96px;height:96px}
  .wpx-gauge b{font-size:26px}
  .wpx-task__t small{display:none}
  .wpx-steps{grid-template-columns:1fr}
  .wpx-panel{padding:20px 16px}
  .wpx-panel__copy h3{font-size:22px}
  .wpx-dia{padding:16px}
  .wpx-days{gap:4px}
}
@media (prefers-reduced-motion:reduce){
  .wpx-task .wpx-task__s{opacity:1!important;transform:none!important}
}