/*
 * Editorial introduction of a rubric — Figma frame 4488:7382.
 *
 * Its stroke carries the brand gradient (sampled across the frame: #fac791 at the left edge,
 * #ff3784 at the right), so it is painted with the layered recipe of tokens/gradient.css rather
 * than flattened to its warm end. Three layers: the tinted wash and the white behind it, both
 * clipped to the padding box, then the sweep clipped to the border box. The wash itself is the one
 * literal the maquette paints directly and binds to no variable.
 */

.mo-module-intro {
    padding: var(--mo-spacing-xs);
    border: var(--mo-border-width-xs) solid transparent;
    border-radius: var(--mo-radius-md);
    background-image:
        linear-gradient(88deg, rgb(250 199 145 / 20%) 13%, rgb(255 55 132 / 20%) 98%),
        linear-gradient(var(--mo-surface-default-white) 0 0),
        var(--mo-gradient-brand-stroke);
    background-clip: padding-box, padding-box, border-box;
    background-origin: border-box;
    color: var(--mo-text-body);
    font-size: var(--mo-font-size-body-lg);
    line-height: var(--mo-line-height-body-lg);
}

.mo-module-intro > :first-child {
    margin-top: 0;
}

.mo-module-intro > :last-child {
    margin-bottom: 0;
}

.mo-module-intro p {
    margin-block: 0 var(--mo-spacing-xxs);
}