/*
 * Next Steps / FAQ — the page a member lands on straight after paying.
 *
 * Scoped to .crp-doc throughout, and the stylesheet only enqueues on a page
 * carrying the shortcode, so nothing here can reach the rest of the site.
 *
 * Colour and type come from brand-tokens.css, declared as a dependency, so
 * this page and the enrollment form stay one product rather than two.
 */

.crp-doc {
    max-width: 780px;
    margin-inline: auto;
    padding: 0 20px 64px;
    font-family: var(--eg-font-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--eg-text-body);
    -webkit-font-smoothing: antialiased;
}

.crp-doc * { box-sizing: border-box; }

.crp-doc a {
    color: var(--eg-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.crp-doc a:hover { color: var(--eg-link-hover); }

/*
 * ⚠️ This rule is a class plus an element, so it outranks any bare .crp-thing
 * selector. Every paragraph-level component below is therefore written as
 * `.crp-doc .crp-thing` — matching two classes — or this shorthand silently
 * wins and resets its margins.
 *
 * That is not hypothetical. .crp-lede sets `margin: 0 auto` to centre itself
 * under the headline; written as a single class it lost to the shorthand here,
 * took margin-left: 0, and sat pinned to the left of the hero while its text
 * stayed centred inside it. The same collision was quietly zeroing the top
 * margins on .crp-tip, .crp-links and .crp-contact.
 */
.crp-doc p { margin: 0 0 14px; }
.crp-doc p:last-child { margin-bottom: 0; }
.crp-doc strong { color: var(--eg-text); }

/*
 * Course titles, marked up as <em>, are set in the bold face rather than
 * italicised.
 *
 * The theme self-hosts Raleway as separate single-weight families —
 * ralewaymedium and ralewaybold — and neither carries an italic. Asking for
 * italic therefore dropped out of the family entirely and the browser
 * substituted an unrelated face, so "7 Steps to a 720 Credit Score" rendered in
 * what looked like a serif on a page set in Raleway throughout.
 *
 * ralewaybold is a real font on this site, so it distinguishes the title
 * reliably instead of depending on a face that does not exist. <em> is kept in
 * the markup: the emphasis is still correct, only its rendering changes.
 */
.crp-doc em {
    font-family: var(--eg-font-bold);
    font-style: normal;
    font-weight: 400;
    color: var(--eg-text);
}

/* ---- Hero ---- */
.crp-hero {
    text-align: center;
    padding: 36px 0 28px;
    border-bottom: 1px solid var(--eg-border);
    margin-bottom: 40px;
}

.crp-doc .crp-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--eg-primary);
    margin: 0 0 12px;
}

.crp-doc h1 {
    font-family: var(--eg-font-heading);
    font-size: 38px;
    line-height: 1.12;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--eg-text);
    margin: 0 0 14px;
    text-wrap: balance;
}

.crp-doc .crp-lede {
    font-size: 17px;
    color: var(--eg-text-muted);
    max-width: 34em;
    margin: 0 auto;
}

/* ---- Sections ---- */
.crp-doc h2 {
    font-family: var(--eg-font-heading);
    font-size: 27px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--eg-text);
    margin: 0 0 20px;
    text-wrap: balance;
}

.crp-section { margin-bottom: 52px; }

/*
 * Numbered steps. The numbering is information here, not decoration — this is
 * a real sequence and the order is what the member needs.
 */
.crp-steps {
    list-style: none;
    counter-reset: crp;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.crp-step {
    counter-increment: crp;
    position: relative;
    background: var(--eg-surface);
    border: 1px solid var(--eg-border);
    border-radius: 12px;
    padding: 22px 24px 22px 68px;
}

.crp-step::before {
    content: counter(crp);
    position: absolute;
    left: 22px;
    top: 22px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--eg-primary);
    color: var(--eg-primary-contrast);
    font-family: var(--eg-font-body);
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crp-step h3 {
    font-family: var(--eg-font-heading);
    font-size: 20px;
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--eg-text);
    margin: 2px 0 10px;
}

.crp-step p { font-size: 16px; }

.crp-doc .crp-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 14px;
}
.crp-links a { font-weight: 700; text-decoration: none; }
.crp-links a:hover { text-decoration: underline; }

/* The one thing members miss: the welcome email lands in spam. */
.crp-doc .crp-tip {
    background: var(--eg-brand-50);
    border-left: 3px solid var(--eg-primary);
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
    margin-top: 14px;
    font-size: 15px;
}

/*
 * FAQ. Twenty-one answers are scannable as a list of questions and unreadable
 * as a wall of prose. Native <details> — no JavaScript, so nothing here can
 * break inside a page builder.
 */
.crp-faq {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--eg-border);
}

.crp-faq details { border-bottom: 1px solid var(--eg-border); }

.crp-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 16px 40px 16px 0;
    position: relative;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--eg-text);
    line-height: 1.45;
}
.crp-faq summary::-webkit-details-marker { display: none; }
.crp-faq summary:hover { color: var(--eg-primary); }
.crp-faq summary:focus-visible {
    outline: 2px solid var(--eg-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.crp-faq summary::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 23px;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--eg-text-muted);
    border-bottom: 2px solid var(--eg-text-muted);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.crp-faq details[open] summary { color: var(--eg-primary); }
.crp-faq details[open] summary::after {
    transform: rotate(-135deg);
    border-color: var(--eg-primary);
}

.crp-answer { padding: 0 8px 20px 0; font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
    .crp-faq summary::after { transition: none; }
}

/* ---- Closing help block ---- */
.crp-help {
    background: var(--eg-surface-alt);
    border: 1px solid var(--eg-border);
    border-radius: 12px;
    padding: 26px 28px;
    text-align: center;
    margin-top: 40px;
}
.crp-help h2 { font-size: 22px; margin-bottom: 10px; }
.crp-help p { font-size: 16px; }

.crp-doc .crp-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    margin-top: 16px;
    font-size: 17px;
    font-weight: 700;
}
.crp-contact a { text-decoration: none; }
.crp-contact a:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .crp-doc { font-size: 16.5px; padding: 0 16px 48px; }
    .crp-doc h1 { font-size: 30px; }
    .crp-doc h2 { font-size: 23px; }
    .crp-step { padding: 20px 18px; }
    .crp-step::before { position: static; margin-bottom: 10px; }
}

/* ---------------------------------------------------------------------------
   Host theme layout fix, scoped by the body class the plugin adds only on a
   page carrying this shortcode.

   The 720CS21 theme wraps its site header in Foundation's .grid-container,
   which supplies the max-width and centring, but the content area below has
   none — so the row spans the full viewport with no gutter, which is why the
   page title sat flush against the left edge. And <main> is large-8, two
   thirds of that width. The theme's sidebar is large-12 and already stacks
   below, so widening main takes space from nothing.

   The page title is hidden because the heading below says the same thing in
   the brand's own typeface.
   --------------------------------------------------------------------------- */
.evergreen-doc-page .article-header { display: none; }

.evergreen-doc-page main.main {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

.evergreen-doc-page .inner-content {
    max-width: 1200px;
    margin-inline: auto;
}