/* Änderungsprotokoll: 2026-07-09 | subagent-create-screen | @skill-css-rules, @skill-change-provenance | Neues Layout für Extension-Landingpage */
/* Änderungsprotokoll: 2026-07-09 | cursor-agent | @skill-css-rules, @skill-change-provenance | Tool-Hero-Download und Installationsliste */
/* Änderungsprotokoll: 2026-07-09 | cursor-agent | @skill-css-rules, @skill-change-provenance | Nutzungsanleitung mit nummerierten Schritten */
/* Änderungsprotokoll: 2026-07-09 | cursor-agent | @skill-css-rules, @skill-change-provenance | 10 Schritte, Titel, Bildunterschriften, breiteres Layout */

/* .screen-seoday-amz-seller-extension-hero-download | Änderungsprotokoll: 2026-07-09 | cursor-agent | @skill-css-rules, @skill-change-provenance | Prominenter Download-CTA im Hero */
.screen-seoday-amz-seller-extension-hero-download {
    margin-top: 8px;
}

/* .screen-seoday-amz-seller-extension-download-button | Änderungsprotokoll: 2026-07-09 | cursor-agent | @skill-css-rules, @skill-change-provenance | Großer Download-Button */
.screen-seoday-amz-seller-extension-download-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--font-size-lg);
    padding: 14px 28px;
}

/* .screen-seoday-amz-seller-extension-usage-guide-container | Änderungsprotokoll: 2026-07-09 | cursor-agent | @skill-css-rules, @skill-change-provenance | Breiterer Anleitungs-Container */
.screen-seoday-amz-seller-extension-usage-guide-container {
    max-width: 56rem;
}

/* .screen-seoday-amz-seller-extension-usage-guide-intro | Änderungsprotokoll: 2026-07-09 | cursor-agent | @skill-css-rules, @skill-change-provenance | Einleitung vor den Schritten */
.screen-seoday-amz-seller-extension-usage-guide-intro {
    margin: 1rem 0 0 0;
    font-size: var(--font-size-lg);
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* .screen-seoday-amz-seller-extension-usage-guide-steps | Änderungsprotokoll: 2026-07-09 | cursor-agent | @skill-css-rules, @skill-change-provenance | Liste der Nutzungsschritte */
.screen-seoday-amz-seller-extension-usage-guide-steps {
    list-style: none;
    margin: 2rem 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    counter-reset: usage-step;
}

/* .screen-seoday-amz-seller-extension-usage-guide-step | Änderungsprotokoll: 2026-07-09 | cursor-agent | @skill-css-rules, @skill-change-provenance | Einzelner Nutzungsschritt */
.screen-seoday-amz-seller-extension-usage-guide-step {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    background: var(--glass-surface-bg);
    backdrop-filter: blur(var(--glass-blur-surface));
    -webkit-backdrop-filter: blur(var(--glass-blur-surface));
    border: 1px solid var(--glass-border-edge);
    border-radius: 14px;
    border-left: 4px solid var(--color-orange);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

/* .screen-seoday-amz-seller-extension-usage-guide-step-number | Änderungsprotokoll: 2026-07-09 | cursor-agent | @skill-css-rules, @skill-change-provenance | Schrittnummer-Badge */
.screen-seoday-amz-seller-extension-usage-guide-step-number {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-orange);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    line-height: 1;
    box-shadow: 0 2px 8px rgba(255, 120, 0, 0.35);
}

/* .screen-seoday-amz-seller-extension-usage-guide-step-content | Änderungsprotokoll: 2026-07-09 | cursor-agent | @skill-css-rules, @skill-change-provenance | Inhalt pro Schritt */
.screen-seoday-amz-seller-extension-usage-guide-step-content {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    flex: 1;
    min-width: 0;
}

/* .screen-seoday-amz-seller-extension-usage-guide-step-title | Änderungsprotokoll: 2026-07-09 | cursor-agent | @skill-css-rules, @skill-change-provenance | Schritt-Titel H3 */
.screen-seoday-amz-seller-extension-usage-guide-step-title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    color: var(--color-text-primary);
}

/* .screen-seoday-amz-seller-extension-usage-guide-step-text | Änderungsprotokoll: 2026-07-09 | cursor-agent | @skill-css-rules, @skill-change-provenance | Fließtext pro Schritt */
.screen-seoday-amz-seller-extension-usage-guide-step-text {
    margin: 0;
    line-height: 1.65;
}

/* .screen-seoday-amz-seller-extension-usage-guide-step-figure | Änderungsprotokoll: 2026-07-09 | cursor-agent | @skill-css-rules, @skill-change-provenance | Screenshot mit Bildunterschrift */
.screen-seoday-amz-seller-extension-usage-guide-step-figure {
    margin: 0.5rem 0 0 0;
    padding: 0;
}

/* .screen-seoday-amz-seller-extension-usage-guide-step-screenshot | Änderungsprotokoll: 2026-07-09 | cursor-agent | @skill-css-rules, @skill-change-provenance | Screenshot-Rahmen */
.screen-seoday-amz-seller-extension-usage-guide-step-screenshot {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--glass-border-edge);
    box-shadow: var(--shadow-modal);
    background: var(--color-white);
}

/* .screen-seoday-amz-seller-extension-usage-guide-step-caption | Änderungsprotokoll: 2026-07-09 | cursor-agent | @skill-css-rules, @skill-change-provenance | Bildunterschrift */
.screen-seoday-amz-seller-extension-usage-guide-step-caption {
    margin-top: 0.625rem;
    padding: 0 0.25rem;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
    text-align: center;
    font-style: italic;
}

.screen-seoday-amz-seller-extension-usage-guide-download-button {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 0.25rem;
}

@media (min-width: 576px) {
    .screen-seoday-amz-seller-extension-download-button {
        font-size: var(--font-size-xl);
        padding: 16px 32px;
    }

    .screen-seoday-amz-seller-extension-usage-guide-step {
        padding: 1.75rem 2rem;
    }

    .screen-seoday-amz-seller-extension-usage-guide-step-title {
        font-size: var(--font-size-2xl);
    }
}

@media (min-width: 1024px) {
    .screen-seoday-amz-seller-extension-usage-guide-container {
        max-width: 64rem;
    }
}