/* Round15 — Motivate — section-commission
   Figma: desktop 4492:14351 | tablet 4492:14198
   Layout: centered heading + list of 5 commission comparison rows
   (index label [0N] | title | description). No raster images/icons in this section.
   Rule 1: single breakpoint, @media (max-width: 1024px) covers tablet + mobile. */

.r15-commission {
    display: flex;
    justify-content: center;
    background: var(--color-2nd-bg, #ffffff);
    padding: 0 var(--section-horizontal-padding, 32px) var(--var-140, 140px);
    font-family: var(--font-body, 'DM Sans', sans-serif);
}

.r15-commission * {
    box-sizing: border-box;
}

.r15-commission__content {
    flex: 1 0 0;
    min-width: 0;
    max-width: var(--container-max, 1400px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--var-40, 40px);
}

/* ---------- Heading ---------- */
.r15-commission__headings {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.r15-commission__title {
    margin: 0;
    max-width: 800px;
    font-weight: 600;
    font-size: var(--fs-h2, 48px);
    line-height: 1.15;
    color: var(--color-1st-fg, #050505);
    text-align: center;
}

/* ---------- Rows list (Figma: "commistion/items") ---------- */
.r15-commission__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

/* Desktop: index / title / description sit in a single flex row, evenly gapped */
.r15-commission__row {
    display: flex;
    align-items: center;
    gap: var(--var-80, 80px);
    width: 100%;
    padding: var(--var-40, 40px) 0;
    border-bottom: 1px solid var(--color-stroke, #d3d3d3);
}

/* Desktop: transparent wrapper so num + title act as direct flex items of .row,
   inheriting the row's own gap/alignment (Figma has no separate group on desktop) */
.r15-commission__row-head {
    display: contents;
}

.r15-commission__row-num {
    flex: 0 0 32px;
    width: 32px;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-reverse-stroke, #4a4949);
}

.r15-commission__row-title {
    flex: 1 0 0;
    min-width: 0;
    margin: 0;
    font-weight: 600;
    font-size: var(--fs-h5, 25px);
    line-height: 1.15;
    color: var(--color-1st-fg, #050505);
}

.r15-commission__row-desc {
    flex: 1 0 0;
    min-width: 0;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-2nd-fg, rgba(5, 5, 5, 0.8));
}

/* Figma marks rows 04/05 description with solid --1st-fg instead of --2nd-fg on desktop */
.r15-commission__row-desc--solid {
    color: var(--color-1st-fg, #050505);
}

/* ---------- Responsive (Rule: <=1024 = tablet + mobile, single breakpoint) ---------- */
@media (max-width: 1024px) {

    .r15-commission {
        padding-bottom: var(--var-72, 72px);
    }

    .r15-commission__content {
        /* Figma tablet frame caps content at 1200px; inert in practice since the
           viewport (<=1024px) already constrains width further, kept for fidelity */
        max-width: 1200px;
        gap: var(--section-gap, 40px);
    }

    /* Tablet: row stacks — [num + title] row on top, description indented below */
    .r15-commission__row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--var-20, 20px);
        padding: var(--var-32, 32px) 0;
    }

    .r15-commission__row-head {
        display: flex;
        align-items: center;
        gap: var(--var-24, 24px);
        width: 100%;
    }

    .r15-commission__row-desc {
        width: 100%;
        flex: none;
        /* Indent to align under the title: num width (32) + row-head gap (24) */
        padding-left: var(--var-56, 56px);
    }

    /* Figma tablet node uses --2nd-fg (not --1st-fg) for rows 04/05 description */
    .r15-commission__row-desc--solid {
        color: var(--color-2nd-fg, rgba(5, 5, 5, 0.8));
    }
}