/* Hardening checklist: clipboard of ticks that draw themselves, striped progress meter. */
.jp-sec-hard{background-color:#eef8ff;background-image:linear-gradient(180deg,var(--sky),#fff);color:var(--ink);padding:120px 0}
.jp-sec-hard .hard-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:50px;align-items:start}
.jp-sec-hard .hard-side h2{color:var(--ink);margin-bottom:22px}
.jp-sec-hard .hard-side p{font-size:17px;color:#2e3d48;margin-bottom:26px}
.jp-sec-hard .meter{background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:6px 6px 0 var(--ink);padding:20px 22px}
.jp-sec-hard .meter .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:700}
.jp-sec-hard .meter b{font:800 40px/1 var(--jp-display);letter-spacing:-.03em}
.jp-sec-hard .meter .bar{margin-top:12px;height:22px;border:3px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--light)}
.jp-sec-hard .meter .bar i{display:block;height:100%;width:100%;background:repeating-linear-gradient(135deg,var(--blue) 0 14px,var(--deep) 14px 28px);transform-origin:0 50%;transform:scaleX(var(--p,1));transition:transform .4s var(--out)}
.jp-sec-hard .meter .state{margin:12px 0 0;font-size:14px;color:#2e3d48}
.jp-sec-hard .clip{position:relative;background:#fff;border:3px solid var(--ink);border-radius:28px;box-shadow:9px 9px 0 var(--ink);padding:44px 26px 26px}
.jp-sec-hard .clip::before{content:"";position:absolute;top:-18px;left:50%;width:120px;height:34px;margin-left:-60px;background:var(--ink);border-radius:12px 12px 8px 8px}
.jp-sec-hard .checks{columns:2;column-gap:26px}
.jp-sec-hard .checks li{break-inside:avoid;display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:2px dashed #d7e3ea;font-weight:500;font-size:15px;line-height:1.35;color:var(--ink)}
.jp-sec-hard .checks .box{flex-shrink:0;width:24px;height:24px;border:3px solid var(--ink);border-radius:7px;display:grid;place-items:center;background:#fff;transition:background .3s,transform .5s var(--spring)}
.jp-sec-hard .checks .box svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:0;transition:stroke-dashoffset .35s var(--out) .1s}
.js-motion .jp-sec-hard[data-jp-ready] .checks li:not(.done) .box svg{stroke-dashoffset:24}
.js-motion .jp-sec-hard[data-jp-ready] .checks li:not(.done){color:#7a8790}
.jp-sec-hard .checks li.done .box,.jp-sec-hard:not([data-jp-ready]) .checks li .box{background:var(--blue);transform:rotate(-8deg) scale(1.1)}
.jp-sec-hard .checks li.opt .box{background:var(--sky)}
.jp-sec-hard .checks li em{font-style:normal;font-size:12px;font-weight:600;background:var(--sun);border:2px solid var(--ink);border-radius:999px;padding:0 7px;margin-left:4px}
@media (max-width:1020px){
  .jp-sec-hard .hard-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .jp-sec-hard .checks{columns:1}
  .jp-sec-hard .clip{padding:40px 18px 18px}
}