/* installing katto, safely */
.inst { width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 120px 0 70px; }
.inst h2 { font: clamp(20px, 2.4vw, 26px)/1.25 var(--display); margin: 0 0 14px; color: var(--cream); }
.inst p { color: #e3dcf6; }
.inst .small { font-size: 15px; color: var(--muted); }
.inst code { font: 14px/1.4 var(--ui); background: var(--night); border: 2px solid var(--line); padding: 1px 6px; color: var(--gold); overflow-wrap: anywhere; }
.inst-head { text-align: center; max-width: 780px; margin: 0 auto 40px; }
.inst-head h1 { font: clamp(32px, 5vw, 54px)/1.08 var(--display); margin: 14px 0; }
.inst-head .kicker { justify-content: center; }
.inst-head .lede { font-size: 19px; margin-top: 22px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.fact { font: 13px/1 var(--ui); padding: 10px 14px; background: var(--ink); border: 3px solid var(--night); box-shadow: 0 4px 0 var(--night), inset 0 0 0 2px var(--line); display: inline-flex; gap: 9px; align-items: center; }
.dot { width: 9px; height: 9px; display: inline-block; }
.dot.mint { background: var(--mint); } .dot.gold { background: var(--gold); } .dot.lilac { background: var(--lilac); } .dot.rose { background: var(--rose); }

.why { padding: 26px 28px; margin-bottom: 26px; }
.why p:last-child { margin-bottom: 0; }

.os-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 880px) { .os-cols { grid-template-columns: 1fr; } }
.os-card { padding: 26px 26px 20px; scroll-margin-top: 90px; }
.os-card h2 { display: flex; align-items: center; gap: 12px; }
.os-ico { width: 22px; height: 22px; flex: none; display: inline-block; }
.os-ico.win { background: linear-gradient(90deg, transparent 45%, var(--ink) 45% 55%, transparent 55%), linear-gradient(transparent 45%, var(--ink) 45% 55%, transparent 55%), var(--sky); }
.os-ico.mac { background: var(--cream); box-shadow: inset 0 -6px 0 var(--muted), inset 0 3px 0 var(--line); }
.howto { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.howto > li { counter-increment: step; position: relative; padding-left: 50px; color: #e3dcf6; font-size: 16.5px; line-height: 1.5; }
.howto > li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; display: grid; place-items: center;
  font: 15px/1 var(--ui); color: var(--gold); background: var(--ink-2); border: 3px solid var(--night); box-shadow: 0 3px 0 var(--night); }
.howto ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 8px; }
.howto b { color: var(--cream); }
.after { font-size: 15px; color: var(--muted) !important; border-top: 3px dashed var(--line); padding-top: 14px; margin: 22px 0 0; }

/* little pixel pictures of what you'll see */
.mock { margin: 14px 0 4px; padding: 16px 18px; font: 13px/1.4 var(--ui); border: var(--px) solid var(--night); box-shadow: 6px 6px 0 #0007; max-width: 380px; }
.mock p { margin: 6px 0 10px; color: inherit; font-size: 13px; }
.mock-win { background: #1b64b4; color: #fff; }
.mw-title { font-size: 17px; }
.mw-link { text-decoration: underline; }
.mw-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.mw-btn { padding: 7px 12px; border: 2px solid #ffffff99; }
.mock-mac { background: #ece8f4; color: #2a2345; border-radius: 0; }
.mock-mac .mw-btn { border-color: #2a2345; }
.mm-lights { display: flex; gap: 6px; margin-bottom: 10px; }
.mm-lights i { width: 10px; height: 10px; background: #ff6b6b; } .mm-lights i:nth-child(2) { background: #ffd166; } .mm-lights i:nth-child(3) { background: #6bd49b; }
.mm-row { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.mm-ico { width: 14px; height: 14px; background: #7a86a8; box-shadow: inset 0 0 0 3px #5a6688; }
.hl { outline: 3px solid var(--gold); outline-offset: 2px; animation: hl 1.4s steps(2) infinite; }
@keyframes hl { 50% { outline-color: transparent; } }

.check { padding: 26px 28px; margin: 26px 0; scroll-margin-top: 90px; }
.sums { display: grid; gap: 12px; margin: 16px 0 20px; }
.sum { display: grid; grid-template-columns: 110px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; background: var(--night); border: 3px solid var(--line); }
.sum b { font: 14px/1.3 var(--ui); color: var(--cream); }
.sum small { display: block; font: 12px/1.4 var(--ui); color: var(--muted); margin-top: 4px; }
.sum code { background: transparent; border: 0; padding: 0; font-size: 12.5px; color: var(--mint); }
.sum a { font: 12px/1 var(--ui); color: var(--gold); white-space: nowrap; }
@media (max-width: 640px) { .sum { grid-template-columns: 1fr; gap: 6px; } }
.cmds { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 760px) { .cmds { grid-template-columns: 1fr; } }
.cmds > div { font-size: 15px; color: #d4cbeb; }
.cmd { display: block; margin-top: 8px; padding: 10px 12px !important; }

.promise-list { margin-top: 40px; }
.pl { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.pl > div { padding: 16px 18px; display: flex; gap: 12px; align-items: baseline; color: #d4cbeb; font-size: 15.5px; }
.pl b { font: 12px/1 var(--ui); padding: 6px 8px; flex: none; }
.pl b.yes { background: var(--mint); color: var(--night); }
.pl b.no { background: var(--rose); color: var(--night); }
.still { text-align: center; margin-top: 34px; }
@media (prefers-reduced-motion: reduce) { .hl { animation: none; } }