/* Download page: two install cards (steer for Mac, Chrome extension) on the shared About reading frame. */

.gd-page { --gd-reading: 67.5rem; }
.gd-crumbs { padding-top: var(--fp-space-xl); }
/* The homepage's closing mint panel with its diagonal stripes, holding the heading and both install cards. */
.gd-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100% - (var(--amn-gutter) * 2), var(--gd-reading));
  margin: var(--fp-space-lg) auto var(--fp-space-xl);
  padding: clamp(36px, 5vw, 64px) clamp(20px, 5vw, 56px);
  border: 1px solid var(--cs-hair);
  border-radius: 28px;
  background:
    var(--cs-grain),
    repeating-linear-gradient(-28deg, transparent 0 70px, var(--cs-cta-stripe) 70px 120px, transparent 120px 200px),
    var(--cs-mint);
  box-shadow: var(--cs-shadow);
  color: var(--cs-ink);
}
.gd-panel__head { margin-bottom: var(--fp-space-xl); }
@media (max-width: 760px) { .gd-panel { width: calc(100% - 24px); border-radius: 22px; } }
.gd-reading {
  width: min(100% - (var(--amn-gutter) * 2), var(--gd-reading));
  margin-inline: auto;
  min-width: 0;
}
.gd-panel h1 {
  margin: 0 0 var(--fp-space-lg);
  max-width: 14ch;
  font-size: var(--fp-text-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.045em;
}
.gd-hero__lede { max-width: 54ch; margin: 0; color: var(--cs-cta-ink); font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem); line-height: 1.6; }

.gd-cards { display: grid; gap: var(--fp-space-lg); }
.gd-reading.gd-cards { padding-bottom: var(--fp-space-xl); }
.gd-card {
  display: flex;
  flex-direction: column;
  gap: var(--fp-space-md);
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--gf-rule);
  border-radius: 1.25rem;
}
.gd-panel .gd-card { border-color: color-mix(in srgb, var(--cs-ink) 18%, transparent); background: color-mix(in srgb, var(--cs-mint) 55%, var(--cs-surface)); color: var(--cs-ink); }
.gd-panel .gd-card :is(.gd-card__kicker, p, .gd-card__note) { color: var(--cs-cta-ink); }
.gd-panel .gd-card--primary { background: color-mix(in srgb, var(--cs-surface) 70%, var(--cs-mint)); }
.gd-card__kicker { margin: 0; color: var(--gf-muted); font-family: var(--g-mono, ui-monospace, monospace); font-size: var(--fp-text-sm); letter-spacing: 0.04em; text-transform: uppercase; }
.gd-card h2 { margin: 0; font-size: var(--fp-text-xl); line-height: 1.2; font-weight: 700; letter-spacing: -0.03em; }
.gd-card p { margin: 0; color: var(--gf-muted); line-height: 1.6; }
.gd-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fp-space-md); margin-top: auto; padding-top: var(--fp-space-sm); }
.gd-card__note { font-size: var(--fp-text-sm); }

.gd-steps { padding-block: var(--fp-space-xl) var(--fp-space-3xl); }
.gd-steps h2 { margin: 0 0 var(--fp-space-lg); font-size: var(--fp-text-xl); line-height: 1.2; font-weight: 700; letter-spacing: -0.03em; }
.gd-steps ol { display: grid; gap: var(--fp-space-md); margin: 0; padding: 0; list-style: none; counter-reset: gd; }
.gd-steps li { display: flex; gap: var(--fp-space-md); align-items: baseline; color: var(--gf-muted); line-height: 1.6; counter-increment: gd; }
.gd-steps li::before { content: counter(gd, decimal-leading-zero); color: var(--gf-ink); font-family: var(--g-mono, ui-monospace, monospace); font-size: var(--fp-text-sm); }
.gd-steps b { color: var(--gf-ink); font-weight: 600; }
.gd-steps a { color: var(--gf-accent); text-decoration: underline; text-underline-offset: 2px; }
.gd-steps a:hover, .gd-steps a:active { color: var(--gf-ink); }

@media (min-width: 48rem) {
  .gd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gd-cards--soon { padding-top: 0; }
.gd-card--soon { gap: var(--fp-space-xs, 0.5rem); border-style: dashed; }
.gd-card--soon h2 { color: var(--gf-muted); }

.gd-card__icon { width: 2.25rem; height: 2.25rem; flex: none; }
.gd-card--soon .gd-card__icon { color: var(--gf-muted); }