/* ═══════════════════════════════════════════════════════
    simpleSF2 — the product page's own layout
    Loaded only by /simplesf2/, after styles.css (which the guides share) and
    light.css. It gives the page the same shape as simpleTapeStop's and
    simpleStutter's: the hero on the plugin's dark window in both themes, an
    envelope strip between sections, numbered section labels on the left,
    flat lists in place of cards, and one download card with the unlock
    beside it. Colours stay simpleSF2's gold on dark or warm paper.
    ═══════════════════════════════════════════════════════ */

:root {
    --stage:        #15171c;
    --stage-panel:  #1c1f26;
    --stage-raised: #252932;
    --stage-edge:   #2c313b;
    --stage-line:   #3a404c;
    --stage-text:   #f1ede4;
    --stage-copy:   #bdb7ab;
    --stage-muted:  #8a857b;
    --rule:         rgba(255, 255, 255, 0.09);
    --card:         #141416;
}

@media (prefers-color-scheme: light) {
    :root {
        --rule: rgba(40, 32, 15, 0.13);
        --card: #fcfaf6;
    }
}

/* ── The stage: the plugin's window, the same in both themes ── */
.sf2-stage {
    --bg: var(--stage);
    --surface: var(--stage-panel);
    --border: rgba(255, 255, 255, 0.07);
    --border-hover: rgba(255, 255, 255, 0.14);
    --text: var(--stage-text);
    --text-secondary: var(--stage-copy);
    --text-muted: var(--stage-muted);
    --text-dim: var(--stage-muted);
    --gold: #c9a04e;
    --gold-light: #ddb966;

    color: var(--stage-text);
    background:
        radial-gradient(46% 70% at 76% 48%, rgba(201, 160, 78, 0.13), transparent 70%),
        var(--stage);
}

.sf2-stage .hero h1 { color: var(--stage-text); }

.sf2-stage .button-ghost {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--stage-line);
    color: var(--stage-text);
}

.sf2-stage .button-ghost:hover { background: rgba(255, 255, 255, 0.08); }

.sf2-stage .other-downloads-menu {
    background: var(--stage-raised);
    border-color: var(--stage-edge);
}

.sf2-stage .linux-vst3-alt { color: var(--stage-muted); }

.sf2-stage .hero-visual img {
    box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* The label: a gold FREE end, then the formats, as simpleTapeStop's and simpleStutter's. */
.sf2-label {
    overflow: hidden;
    padding-right: 11px;
    border: 1px solid var(--stage-edge);
    border-radius: 8px;
    background: var(--stage-panel);
    color: var(--stage-copy);
    font: 700 0.72rem/1 var(--font-title);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sf2-label-free {
    display: flex;
    align-items: center;
    align-self: stretch;
    margin-right: 11px;
    padding: 0 10px;
    background: var(--gold);
    color: #1a130a;
}

.sf2-stage .product-hero__title {
    font-size: clamp(2.1rem, 1.3rem + 2vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.035em;
}

.sf2-stage .hero-text { font-size: 1.02rem; }
.sf2-stage .hero-subtext strong,
.sf2-stage .hero-text strong { color: var(--stage-text); }

/* ── Sections: no rules between them, more air, headings on the left ── */
main > .screenshots,
main > .overview,
main > .features,
main > .faq {
    padding: 92px 0 0;
    border-top: 0;
}

main > .faq { padding-bottom: 32px; }

.section-header {
    max-width: 680px;
    margin-bottom: 36px;
    text-align: left;
}

.section-header h2 {
    font-size: clamp(1.75rem, 1.15rem + 2vw, 2.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.section-text {
    max-width: none;
    margin: 14px 0 0;
    font-size: 1rem;
}

/* Section numbers on a key, as simpleStutter's slot chips. */
.slot-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    color: var(--text-muted);
    font: 700 0.72rem/1 var(--font-title);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.slot-chip {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--gold);
    color: #1a130a;
    font-size: 0.86rem;
    letter-spacing: 0;
}

/* ── Screenshots on the plugin's dark panel, with its tabs ── */
.shot-viewer {
    max-width: none;
    padding: 12px;
    border: 1px solid var(--stage-edge);
    border-radius: 18px;
    background: var(--stage-panel);
}

.shot-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    margin: 0 0 12px;
    padding: 4px;
    border-radius: 10px;
    background: var(--stage);
}

.shot-tab {
    padding: 11px 6px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--stage-copy);
    font: 600 0.9rem/1.15 var(--font-title);
}

.shot-tab:hover,
.shot-tab:focus-visible {
    background: var(--stage-raised);
    color: var(--stage-text);
}

.shot-tab[aria-selected="true"] {
    background: var(--gold);
    color: #1a130a;
}

.shot-viewer .shot img,
.video-shot img {
    border-radius: 10px;
    box-shadow: 0 0 0 1px var(--stage-edge);
}

.shot-viewer .shot figcaption {
    max-width: 66ch;
    margin: 0;
    padding: 16px 8px 6px;
    text-align: left;
    color: var(--stage-copy);
    font-size: 0.95rem;
}

/* ── Envelopes: three pictures, no cards ── */
.envelope-gallery { gap: 28px; }

.envelope-shot {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
}

.envelope-shot img {
    border: 1px solid var(--stage-edge);
    border-radius: 12px;
}

.envelope-shot figcaption { padding: 16px 0 0; }
.envelope-shot h3 { font-size: 1.1rem; font-weight: 700; }
.envelope-shot p { font-size: 0.95rem; }

/* ── The video, the width of the page ── */
.video-shot { max-width: none; }

/* ── DAWs, features and questions: flat lists between hairlines ── */
.overview-grid,
.faq-grid {
    gap: 0 44px;
}

.feature-grid {
    gap: 0 36px;
}

.overview-card,
.feature-card,
.faq-card {
    padding: 22px 0 24px;
    border: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.feature-card:hover {
    border-color: var(--rule);
    box-shadow: none;
}

.overview-card h3,
.feature-card h3,
.faq-card h3 {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--text);
}

.overview-card p,
.feature-card p,
.faq-card p {
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 0.96rem;
    line-height: 1.6;
}

.overview-compat,
.faq-more {
    max-width: none;
    margin: 0;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
    text-align: left;
    color: var(--text-muted);
    font-size: 0.92rem;
}

/* No reveal animation on the flat lists. */
.feature-card[data-reveal] {
    opacity: 1;
    transform: none;
}

/* ── Download, beside the unlock ── */
.download {
    width: min(calc(100% - 2rem), var(--max-w));
    margin: 0 auto;
    padding: 92px 0 0;
    border-top: 0;
    background: none;
}

.download-card {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 40px;
    padding: 40px;
    border: 1px solid var(--rule);
    border-radius: 18px;
    background: var(--card);
}

.download-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.download-copy h2 {
    color: var(--text);
    font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.2rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.download-copy > p:not(.slot-label) {
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: 0.98rem;
}

.download-copy .download-actions {
    justify-content: flex-start;
    margin-top: 24px;
}

.download-copy .download-free {
    margin-top: 22px;
    font-size: 0.9rem;
}

.download-copy .download-small {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.download-copy .patch-notes-button { margin-top: 18px; }

/* The unlock, on the plugin's dark panel in both themes. */
.price-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px;
    border: 1px solid var(--stage-edge);
    border-radius: 14px;
    background: var(--stage-panel);
    color: var(--stage-text);
}

.price-box .price-tier {
    color: #ddb966;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.price-box .price-amount {
    margin-top: 6px;
    color: var(--stage-text);
    font-size: 2.9rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}

.price-box .price-local {
    margin: 6px 0 0;
    color: var(--stage-muted);
}

.price-once {
    margin-top: 8px;
    color: var(--stage-copy);
    font-size: 0.92rem;
}

.price-box .price-features {
    flex: 1 1 auto;
    margin: 16px 0 0;
}

/* styles.css sets the unlock's lines with !important, for its light cards. */
.price-box .price-features li,
.price-box .price-features .feature-plus { color: var(--stage-text) !important; }

.price-button {
    width: 100%;
    margin-top: auto;
}

.price-box .price-features + .price-button { margin-top: 22px; }

.price-small {
    margin-top: 12px;
    color: var(--stage-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.download .reviews { margin-top: 40px; }

/* ── Narrower screens ── */
@media (max-width: 900px) {
    .download-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
}

@media (max-width: 640px) {
    main > .screenshots,
    main > .overview,
    main > .features,
    main > .faq,
    .download { padding-top: 64px; }

    .shot-viewer { padding: 8px; border-radius: 14px; }

    .shot-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .shot-tab { padding: 10px 2px; font-size: 0.8rem; }

    .download-card { padding: 24px 20px 26px; }
    .download-actions > * { flex: 1 1 100%; }
    .download-actions .button { width: 100%; }
    .price-box { padding: 24px 20px; }
}