/* ==========================================================================
   traders-grade.css: the Trader sign-up page's "Grade as a signal" section and
   the top-of-page trial box. Loaded after traders.css.

   The chart itself is styled by the _GradeChart partial's own CSS, the same
   as /about-grade and the investor page; this file only lays out the section
   around it.
   ========================================================================== */

/* Top trial box: the existing .tsu-trial look, spaced for its new position
   above the testimonials, plus a link to the plan picker. */
.tsu-trial--top {
    margin-top: 8px;
    margin-bottom: 32px;
}

.tsu-trial-cta {
    margin: 10px 0 0;
    font-weight: 700;
}

    .tsu-trial-cta a {
        color: inherit;
    }

/* The chart floats right and the copy wraps around it. flow-root contains the
   float, so the next section never slides up beside the chart. Below 760px the
   chart drops to full width above the copy. */
.tsu-grade {
    display: flow-root;
    margin: 40px 0;
}

.tsu-grade-title {
    margin: 0 0 14px;
}

.tsu-grade p {
    line-height: 1.6;
    margin: 0 0 12px;
}

.tsu-gradechart {
    float: right;
    width: 50%;
    margin: 0 0 16px 28px;
    min-width: 0;
}

.tsu-gradechart-cap {
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-muted, #777);
    text-align: center;
}

@media (max-width: 760px) {
    .tsu-gradechart {
        float: none;
        width: 100%;
        margin: 0 0 16px;
    }
}

.tsu-grade-list {
    margin: 12px 0;
    padding-left: 1.2em;
}

    .tsu-grade-list li {
        margin: 0 0 8px;
        line-height: 1.55;
    }

    .tsu-grade-list code {
        font-size: 0.92em;
    }

.tsu-grade-note {
    font-size: 13px;
    color: var(--text-muted, #777);
}

/* Heading over the long/short track record, matching the Grade section's
   heading, with space above to separate the two sections. */
.tsu-perf-title {
    margin: 48px 0 20px;
}