/* What only guide No. 3, "How much does website maintenance cost?", needs. Everything else comes from book.css. */
.strong{font-weight:900}
.lc-pocket i{max-width:300px;font-size:20px!important;white-space:normal!important;text-wrap:balance}
.face .cov-t.mn-t{font-size:62px!important}
.cmp.fit{min-width:0}
.cov-wrench{transform-box:view-box;transform-origin:256px 224px;animation:mn-wrench 3.6s ease-in-out infinite}
@keyframes mn-wrench{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(7deg)}}
.cov-swing{transform-box:view-box;transform-origin:100px 14px;animation:mn-swing 4.2s ease-in-out infinite}
@keyframes mn-swing{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.cov-wrench,.cov-swing{animation:none}}

/* the three weaknesses */
.mn-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.pg .mn-stats p{margin:0;padding:8px 9px;border:3px solid var(--ink);border-radius:10px;background:var(--canvas);box-shadow:3px 3px 0 var(--ink);font-size:15.5px;font-weight:700;line-height:1.12}
.mn-stats b{display:block;font-family:"Big Shoulders",sans-serif;font-size:36px;font-weight:900;line-height:1;color:var(--claret)}

/* price ranges on one scale */
.mn-bands{margin-top:12px}
.mn-bands div{margin-top:9px}
.mn-bands span{display:block;font-size:16.5px;font-weight:800;line-height:1.1}
.mn-bands i{position:relative;display:block;margin-top:4px;height:24px;border:3px solid var(--ink);border-radius:7px;background:var(--canvas);box-shadow:3px 3px 0 var(--ink)}
.mn-bands i b{position:absolute;top:0;bottom:0;left:var(--a);width:calc(var(--b) - var(--a));background:var(--blue);border-inline:3px solid var(--ink)}
.on .mn-bands i b{animation:mn-grow .8s cubic-bezier(.3,1,.4,1) .25s both;transform-origin:0 50%}
@keyframes mn-grow{from{transform:scaleX(0)}to{transform:none}}
.mn-bands em{display:block;margin-top:5px;font-size:15.5px;font-style:normal;font-weight:800;line-height:1.1;color:var(--claret)}
.pg p.mn-axis{display:flex;justify-content:space-between;margin:7px 0 0;font-size:13.5px;font-weight:700;line-height:1;color:var(--mute)}
.mn-axis span{display:inline;font-size:inherit;font-weight:inherit}
.mn-bands i.dots u{position:absolute;top:50%;left:var(--x);width:14px;height:14px;margin:-7px 0 0 -7px;border:3px solid var(--ink);border-radius:50%;background:var(--claret)}
@media (prefers-reduced-motion:reduce){.on .mn-bands i b{animation:none}}

/* the finder */
.mf{display:grid;gap:9px;margin:10px 0 0}
.seg{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:0;padding:0;border:0;min-width:0}
.seg legend{float:left;width:100%;padding:0 0 4px;font-size:16.5px;font-weight:800;line-height:1.05}
.seg label{cursor:pointer}
.seg label > input[type=radio]{position:absolute;opacity:0;width:1px;height:1px}
.seg label > span{display:block;padding:3px 11px;border:2.5px solid var(--ink);border-radius:999px;background:var(--canvas);font-size:15.5px;font-weight:800;line-height:1.2}
.seg input:checked + span{background:var(--blue)}
.seg input:focus-visible + span{outline:3px solid var(--claret);outline-offset:2px}
.mf .seg[hidden]{display:none}
.mf-res{margin-top:12px;padding:9px 13px;border:3px solid var(--ink);border-radius:10px;background:var(--mist);box-shadow:4px 4px 0 var(--ink)}
.pg .mf-res p{margin:4px 0 0;font-size:16.5px;font-weight:700;line-height:1.18}
.pg .mf-res p.mf-p{margin:0;font-family:"Big Shoulders",sans-serif;font-size:29px;font-weight:900;line-height:1;color:var(--claret)}

/* the four answers, and the plans */
.mn-sizes li{cursor:default}
.mn-plans{display:grid;gap:9px;margin-top:10px;padding:0;list-style:none}
.mn-plans li{padding:9px 12px;border:3px solid var(--ink);border-radius:10px;background:var(--canvas);box-shadow:3px 3px 0 var(--ink)}
.pg .mn-plans h3{margin:0;font-size:24px;line-height:1}
.pg .mn-plans p{margin:5px 0 0;font-size:17.5px;font-weight:600;line-height:1.22}
.face .mn-plans{margin-top:16px}
.pg .mn-plans .mn-p{float:right;margin:0 0 0 10px;font-size:14.5px;font-weight:800;line-height:1}
.mn-p b{font-family:"Big Shoulders",sans-serif;font-size:29px;font-weight:900;color:var(--claret)}

.mn-next li{padding:9px 0;align-items:start}
.mn-next svg{width:64px;height:64px}
.mn-next p{line-height:1.22}
/* the sources */
.src{margin-top:12px!important}
.src li{margin-top:7px;padding-left:15px;border-left:5px solid var(--blue);font-size:18.5px;font-weight:600;line-height:1.16}
/* the questions */
.mn-qs li{margin-top:9px}
.mn-qs b{font-size:19.5px;font-weight:800;line-height:1.1;text-transform:none}
.mn-qs label{align-items:center}
.mn-qs ~ .btn{margin-top:10px}