/* Instagram Video Downloader: additions on top of site.css (site.css is an unchanged copy of design/css/site.css). */

/* the real extension icon (green square, white arrow) instead of the design's red placeholder */
.brand img{display:block;width:40px;height:40px;flex:none}
.ext-ic{background:none}
.ext-ic img{display:block;width:32px;height:32px}

/* on profile covers the extension puts its arrow in the top right corner, next to Instagram's own Reels mark */
.xb{left:auto;right:8px}
@keyframes cur{
0%,60%{opacity:0;transform:translate(560px,370px) scale(1)}
62%{opacity:1;transform:translate(540px,340px) scale(1)}
72%{opacity:1;transform:translate(356px,148px) scale(1)}
75%{transform:translate(356px,148px) scale(.86)}
77%{transform:translate(356px,148px) scale(1)}
85%{opacity:1;transform:translate(420px,230px) scale(1)}
91%,100%{opacity:0;transform:translate(430px,240px) scale(1)}}

/* the "Help" link lands on the steps */
.next{scroll-margin-top:16px}

/* uninstall form: spam trap that people never see, and the message shown when the server sends the form back */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-error{display:none;margin:0 0 16px;padding:12px 14px;background:#F8E3DF;border:2.5px dashed var(--accent);border-radius:var(--r-card);font-size:15px;line-height:21px;font-weight:600}
.form-error:target{display:block}

/* thanks page after the form */
.sub.thanks{grid-template-columns:minmax(0,760px);padding-bottom:96px}
.thanks .lead{max-width:620px}
.thanks .back-q{margin-top:40px;font-size:17px;font-weight:600}
.thanks .back-row{margin-top:14px}

/* language picker at /welcome/ and /uninstall/ (shown only without JavaScript or for a moment) */
.pick{padding:40px 0 96px;max-width:760px}
.pick h1{font-size:44px;letter-spacing:-1.2px}
.pick ul{margin:28px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:14px}
.pick li a{display:inline-flex;align-items:center;min-height:52px;padding:0 20px;background:var(--card);border:var(--bd);border-radius:var(--r-btn);font-size:17px;font-weight:600;text-decoration:none}
.pick li a:hover{box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}

/* privacy policy: filled-in text (lists, inline code, summary box) */
.legal-head .lede{margin-top:18px;max-width:760px;font-size:17px;line-height:27px;color:var(--muted)}
.prose ul{margin:12px 0 0;padding-left:22px;font-size:16px;line-height:26px}
.prose li + li{margin-top:6px}
.prose ul + p,.prose .tbl + p{margin-top:12px}
.prose h3{margin:20px 0 6px;font-size:18px;line-height:26px;font-weight:600}
.prose code{padding:1px 5px;border-radius:5px;background:#EDE9DF;font:400 .88em/1.4 ui-monospace,"Cascadia Mono",Consolas,monospace;overflow-wrap:anywhere}
.prose a{text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--accent);overflow-wrap:anywhere}
.summary{margin-top:22px;max-width:760px;padding:16px 20px;background:var(--card);border:var(--bd);border-radius:var(--r-card);box-shadow:6px 6px 0 var(--accent)}
.summary h2{margin:0 0 6px;font-size:18px;line-height:24px;font-weight:600}
.summary ul{margin:0;padding-left:20px;font-size:15px;line-height:23px}
.summary li + li{margin-top:4px}
.domain{overflow-wrap:anywhere}

@media (max-width:760px){
  .pick h1{font-size:34px}
  .summary{box-shadow:4px 4px 0 var(--accent)}
}