/* ==========================================================================
   Text Tools — About + How-to section backgrounds (purple accent)
   ========================================================================== */

:root {
    --text-purple: #7c3aed;
    --text-purple-hover: #6d28d9;
    --text-purple-light: #f5f3ff;
    --text-purple-border: #ddd6fe;
}

.wc-about {
    padding: 80px 0;
    background: #fff;
    border-top: 1px solid var(--border);
}

.wc-steps-section,
.tcc-steps-section,
.trd-steps-section,
.tfr-steps-section,
.tsg-steps-section,
.tcl-steps-section {
    padding: 72px 0;
    background: #f5f3ff;
    border-top: 1px solid var(--text-purple-border);
}

.wc-about__grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 48px;
    align-items: center;
}

.wc-faq,
.tcc-faq,
.trd-faq,
.tfr-faq,
.tsg-faq,
.tcl-faq {
    padding: 72px 0;
    background: #fff;
    border-top: 1px solid var(--border);
}

/* Purple hero icon enhancement */
.wc-hero .cat-hero__icon--purple,
.tcc-hero .cat-hero__icon--purple,
.trd-hero .cat-hero__icon--purple,
.tfr-hero .cat-hero__icon--purple,
.tsg-hero .cat-hero__icon--purple,
.tcl-hero .cat-hero__icon--purple {
    background: #ede9fe;
    color: #7c3aed;
    border: 2px solid #ddd6fe;
}

/* Dark mode */
[data-theme="dark"] .wc-about {
    background: var(--bg);
    border-color: var(--border);
}

[data-theme="dark"] .wc-steps-section,
[data-theme="dark"] .tcc-steps-section,
[data-theme="dark"] .trd-steps-section,
[data-theme="dark"] .tfr-steps-section,
[data-theme="dark"] .tsg-steps-section,
[data-theme="dark"] .tcl-steps-section {
    background: #1a1033;
    border-color: #4c3d6e;
}

[data-theme="dark"] .wc-faq,
[data-theme="dark"] .tcc-faq,
[data-theme="dark"] .trd-faq,
[data-theme="dark"] .tfr-faq,
[data-theme="dark"] .tsg-faq,
[data-theme="dark"] .tcl-faq {
    background: var(--bg);
}

[data-theme="dark"] .wc-hero .cat-hero__icon--purple,
[data-theme="dark"] .tcc-hero .cat-hero__icon--purple,
[data-theme="dark"] .trd-hero .cat-hero__icon--purple,
[data-theme="dark"] .tfr-hero .cat-hero__icon--purple,
[data-theme="dark"] .tsg-hero .cat-hero__icon--purple,
[data-theme="dark"] .tcl-hero .cat-hero__icon--purple {
    background: rgba(124, 58, 237, 0.2);
    color: #c4b5fd;
    border-color: #4c3d6e;
}

[data-theme="dark"] .wc-section-eyebrow,
[data-theme="dark"] .tcc-section-eyebrow,
[data-theme="dark"] .trd-section-eyebrow,
[data-theme="dark"] .tfr-section-eyebrow,
[data-theme="dark"] .tsg-section-eyebrow,
[data-theme="dark"] .tcl-section-eyebrow {
    background: rgba(124, 58, 237, 0.15);
    color: #c4b5fd;
}

[data-theme="dark"] .wc-about__pill {
    background: rgba(124, 58, 237, 0.15);
    border-color: #4c3d6e;
    color: #c4b5fd;
}

[data-theme="dark"] .wc-about__feature-icon--blue { background: rgba(37,99,235,.2); color: #93c5fd; }
[data-theme="dark"] .wc-about__feature-icon--green { background: rgba(5,150,105,.2); color: #6ee7b7; }
[data-theme="dark"] .wc-about__feature-icon--purple { background: rgba(124,58,237,.2); color: #c4b5fd; }
[data-theme="dark"] .wc-about__feature-icon--yellow { background: rgba(202,138,4,.2); color: #fde047; }
[data-theme="dark"] .wc-about__feature-icon--indigo { background: rgba(79,70,229,.2); color: #a5b4fc; }
[data-theme="dark"] .wc-about__feature-icon--teal { background: rgba(13,148,136,.2); color: #5eead4; }

[data-theme="dark"] .wc-feature-card__icon--blue { background: rgba(37,99,235,.2); color: #93c5fd; }
[data-theme="dark"] .wc-feature-card__icon--purple { background: rgba(124,58,237,.2); color: #c4b5fd; }
[data-theme="dark"] .wc-feature-card__icon--yellow { background: rgba(202,138,4,.2); color: #fde047; }
[data-theme="dark"] .wc-feature-card__icon--green { background: rgba(5,150,105,.2); color: #6ee7b7; }

[data-theme="dark"] .wc-related-card__icon--purple { background: rgba(124,58,237,.2); color: #c4b5fd; }
[data-theme="dark"] .wc-related-card__icon--blue { background: rgba(37,99,235,.2); color: #93c5fd; }
[data-theme="dark"] .wc-related-card__icon--orange { background: rgba(234,88,12,.2); color: #fdba74; }
[data-theme="dark"] .wc-related-card__icon--green { background: rgba(5,150,105,.2); color: #6ee7b7; }

@media (max-width: 1100px) {
    .wc-about__grid {
        grid-template-columns: 1fr;
    }
}