/* An extension's page: the hero, the download card, the description, the
   pictures of it in use and the callout. The release list is styled by
   /site.css. */
.hero { padding: 2.9rem 0 0; }
h1 { margin: 0 0 .55rem; font-size: clamp(2rem, 1.4rem + 2.4vw, 2.7rem);
     line-height: 1.05; letter-spacing: -.036em; font-weight: 700; }
.lead { margin: 0; font-size: 1.1rem; line-height: 1.5; color: var(--muted); max-width: 60ch; }
.eyebrow { margin: 0 0 .3rem; font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.eyebrow a { color: var(--muted); text-decoration: none; }
.eyebrow a:hover { color: var(--link); }

.get { display: flex; align-items: flex-start; gap: 1.25rem; margin: 2.2rem 0 0;
       padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: 16px;
       background: var(--surface); box-shadow: var(--shadow); }
.get img { width: 56px; height: 56px; flex: none; margin-top: .1rem; border-radius: 13px; }
.get-body { min-width: 0; }
.version { margin: 0 0 .2rem; font-size: 1.08rem; font-weight: 600;
           letter-spacing: -.012em; font-variant-numeric: tabular-nums; }
.version.pending { font-weight: 500; color: var(--muted); }
.req { margin: 0 0 1rem; font-size: .92rem; color: var(--muted); }
.how { margin: 0; font-size: .97rem; }
.get-actions { margin: .9rem 0 0; display: flex; align-items: baseline; gap: .85rem; flex-wrap: wrap; }
.get-actions[hidden] { display: none; }
.get-actions a { font-size: .93rem; font-weight: 600; color: var(--link); }
.size { font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; }

h2 { margin: 2.8rem 0 .9rem; font-size: 1.3rem; letter-spacing: -.024em; }
.about p { margin: 0 0 1rem; max-width: 66ch; }
.about .replaces { padding: .8rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); }
.shot-grid { display: grid; gap: 1.1rem; }
.shot-grid figure { margin: 0; }
.shot-grid img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.shot-grid figcaption { margin: .5rem 0 0; font-size: .92rem; color: var(--muted); max-width: 66ch; }
.shortcuts { margin: 0; padding-left: 1.15rem; max-width: 66ch; }
.shortcuts li { margin: .35rem 0; }
kbd { font: inherit; font-weight: 600; padding: .05rem .4rem; border-radius: 6px;
      border: 1px solid var(--line); background: var(--surface); }
.caption { color: var(--muted); }

.callout { margin: 1.4rem 0 0; padding: 1rem 1.15rem; border-radius: 12px;
           border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
           border-left: 3px solid var(--accent);
           background: color-mix(in srgb, var(--accent) 7%, transparent); }
.callout p { margin: 0; }

@media (max-width: 560px) {
  .get { flex-direction: column; align-items: flex-start; gap: 1rem; }
}