/* install-page.css: /app/install, what to click past each Windows warning (mockups/v2/install-guide.html, approved
   10-30). Each warning is a real capture with the button to click ringed in the accent. Numbers, labels and titles are
   /app's step parts (as-st, as-w, as-t from app-page.css); everything here is ig-. */
.hm .ig-head{display:grid;gap:14px;margin-top:10px}
.hm .ig-head h1{margin:0;font-size:clamp(40px,3.6vw,54px);line-height:1.02}
.hm .ig-head .ap-lede{margin:0;font-size:18px;line-height:1.45;color:var(--fg2);max-width:620px}
.hm .ig-dl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:4px 0 0;font-size:15px;color:var(--dim)}
.hm .ig-dl .ig-on{display:flex;align-items:center;gap:10px}
.hm .ig-dl .ig-on::before{content:"";width:7px;height:7px;background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.8);animation:ig-blink 1.6s var(--hm-curve) infinite}
.hm .ig-dl b{font-weight:600;font-variant-caps:normal;letter-spacing:0;color:var(--fg)}
.hm .ig-dl .hm-lnk b{color:inherit}
/* one row a step: the number and who is asking on the left, the capture(s) and the click on the right */
.hm .ig-steps{display:grid}
.hm .ig-step{display:grid;grid-template-columns:380px minmax(0,1fr);gap:18px 48px;align-items:start;padding:32px 0;border-top:1px solid var(--line1)}
.hm .ig-step:first-child{padding-top:0;border-top:0}
.hm .ig-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;align-items:center}
.hm .ig-top .as-st{grid-row:span 2;padding:0;color:var(--accent);text-shadow:0 0 18px rgba(var(--accent-rgb),.35)}
.hm .ig-top .as-w{color:var(--fg2)}
.hm .ig-top .as-t{font-size:22px;white-space:nowrap}
.hm .ig-pics{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px 28px}
.hm .ig-pic{display:grid;gap:12px;max-width:100%}
.hm .ig-or{align-self:center;padding:0 2px}
/* the capture sits on a panel at its own size (no upscaling: these are 100% screenshots) */
.hm .ig-shot{position:relative;margin:0;justify-self:start;max-width:100%;padding:10px;background:var(--panel);border:1px solid var(--line2)}
.hm .ig-shot>div{position:relative}
.hm .ig-shot img{display:block;max-width:100%;height:auto}
.hm .ig-mark{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border:2px solid var(--accent);box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55);animation:ig-ping 1.8s var(--hm-curve) infinite;pointer-events:none}
.hm .ig-step .as-s{margin:0;font-size:18px;color:var(--fg2)}
.hm .ig-step .as-s b{font-weight:700;color:var(--fg)}
@keyframes ig-ping{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55)}70%,100%{box-shadow:0 0 0 12px rgba(var(--accent-rgb),0)}}
@keyframes ig-blink{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.hm .ig-mark,.hm .ig-dl .ig-on::before{animation:none}}
@media (max-width:900px){.hm .ig-step{grid-template-columns:minmax(0,1fr)}.hm .ig-or{align-self:flex-start}}
@media (max-width:640px){.hm .ig-head h1 span{display:block}.hm .ig-top .as-st{font-size:34px}.hm .ig-shot{padding:6px}}