/* Installation-page layout. Shared components and values come from the design system. */
.addon-content { max-width:900px; padding-block:var(--space-7) var(--space-8); }
.addon-overview h2,.addon-installation > h2 { font-size:28px; margin-bottom:var(--space-4); }
.addon-overview > p { max-width:var(--content-width); }
.addon-actions { margin-top:var(--space-5); }
.addon-actions > p { margin-top:var(--space-3); font-size:var(--text-small); }
.addon-account-note { display:flex; align-items:flex-start; gap:var(--space-3); background:var(--surface-tint); border-radius:var(--radius-field); padding:var(--space-4); margin-top:var(--space-5); font-size:16px; }
.addon-account-note .icon { margin-top:3px; color:var(--blue); }
.addon-installation { padding-top:var(--space-7); scroll-margin-top:90px; }
.addon-steps { list-style:none; padding:0; margin-top:var(--space-6); display:grid; gap:var(--space-6); }
.addon-steps > li { display:grid; grid-template-columns:36px minmax(0,1fr); gap:var(--space-4); }
.addon-step-number { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--surface-tint); color:var(--blue); font-size:16px; font-weight:700; }
.addon-step-content h3 { font-size:22px; line-height:1.4; margin:2px 0 var(--space-2); }
.addon-step-content p { font-size:17px; max-width:var(--content-width); }
.addon-step-content .text-link { margin-top:var(--space-3); }
.addon-step-image { margin:var(--space-5) 0 0; max-width:560px; }
.addon-step-image img { width:100%; height:auto; border:1px solid var(--line); border-radius:var(--radius-field); }
.addon-step-image figcaption { margin-top:var(--space-2); color:var(--muted); font-size:var(--text-small); }
.addon-help { margin-top:var(--space-7); }
.addon-help h2 { font-size:23px; margin-bottom:var(--space-3); }
.addon-help p { font-size:16px; }
.addon-help .text-link { margin-top:var(--space-4); }
.addon-desktop-link { margin-top:var(--space-5); font-size:var(--text-small); }
@media(max-width:600px) {
    .addon-content { padding-block:var(--space-6) var(--space-7); }
    .addon-overview h2,.addon-installation > h2 { font-size:24px; }
    .addon-overview > p { font-size:16px; }
    .addon-steps > li { grid-template-columns:30px minmax(0,1fr); gap:var(--space-3); }
    .addon-step-number { width:30px; height:30px; font-size:14px; }
    .addon-step-content h3 { font-size:20px; margin-top:0; }
    .addon-step-content p { font-size:16px; }
}