/* Extension page — supplements /legal.css.
   Same monochrome system: ink/graphite only, no hue accents. */

.ext-hero { padding: 24px 0 8px; }
.ext-hero h1 { max-width: 720px; }
.ext-hero .lede { max-width: 640px; }

/* Feature blocks */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 36px 0 24px; }
.feature-card {
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg);
  padding: 26px 26px 22px;
  background: #fff;
}
.feature-card h3 { margin: 0 0 8px; font-size: 16px; }
.feature-card p { color: var(--text-secondary); font-size: 14.5px; line-height: 1.55; margin: 0; }

/* Steps */
.steps { list-style: none; padding: 0; margin: 28px 0 24px; counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 28px 52px;
  margin: 0;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
.steps li h3 { margin: 0 0 4px; font-size: 16px; }
.steps li p { margin: 0; font-size: 14.5px; }

/* CTA band — mirrors the compare pages' cta-band */
.cta-band {
  background: #1D1D1F;
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  margin: 56px 0;
  text-align: center;
}
.cta-band h2 { color: #fff; margin: 0 0 8px; border: none; }
.cta-band p { color: rgba(255,255,255,0.72); margin: 0 auto 24px; max-width: 480px; }
.btn-store {
  display: inline-block;
  background: #fff;
  color: #1D1D1F;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 999px;
  border-bottom: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-store:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(0,0,0,0.35); border-bottom: none; }
.cta-sub { display: block; margin-top: 14px; font-size: 13px; color: rgba(255,255,255,0.55); }
.cta-sub + .cta-sub { margin-top: 8px; }
.cta-applink { color: rgba(255,255,255,0.72); border-bottom-color: rgba(255,255,255,0.3); }
.cta-applink:hover { color: #fff; border-bottom-color: #fff; }

@media (max-width: 640px) {
  .cta-band { padding: 32px 22px; }
}

/* Extension explainer hero (GPT illustration, 2026-09-04) */
.ext-hero-img { display: block; width: 100%; max-width: 960px; height: auto; margin: 32px auto 0; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); }