/* =========================================================
   RESUME BUILDING

   Sits directly under #mock-interviews, and is built to the same
   rules: the 1280px measure #bc-section set at the top of this run
   of sections, sizes off the Global.css ladder only, and the same
   badge / two-tone headline / button-pair opening.

   It is deliberately its own file and its own rb- prefix rather
   than an extension of mock-interviews.css — every section in this
   codebase owns its stylesheet (bc-, int-, cr-, mi-), and sharing
   one would couple two blocks that are edited independently. The
   button and badge rules below mirror .mi-btn / .mi-badge; if one
   of the pair changes, change both.
========================================================= */

.rb-section{
    background:var(--white);
    padding:var(--space-section) 0;
    font-family:var(--font-sans);
}

.rb-inner{
    width:100%;
    max-width:1280px;
    margin-inline:auto;
    padding-inline:20px;
}

/* ==========================
   HEAD
========================== */

/* Same split as .mi-hero above: the copy column is capped at a fixed 720
   rather than shared as a fraction, because the row of feature cards lives
   inside it and four cards need that width to keep every title on one line.
   The artwork takes whatever is left. */

.rb-hero{
    display:grid;
    grid-template-columns:minmax(0,720px) minmax(0,1fr);
    gap:48px;
    align-items:center;
}

.rb-head{
    max-width:720px;
}

/* Near-white artwork on a white section, so the radius is what gives its
   edge a reason to be there. */

.rb-art{
    border-radius:var(--r-20);
    overflow:hidden;
}

.rb-art img{
    display:block;
    width:100%;
    height:auto;
}

.rb-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:34px;
    padding:7px 16px;
    border:1px solid var(--primary-50);
    border-radius:999px;
    background:var(--white);
    font-size:var(--fs-meta);
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    line-height:1;
    color:var(--primary);
}

.rb-badge i{
    font-size:12px;
}

/* Two-tone, like .mi-title and .outcomes-title: the whole second line
   carries the accent, so this is not the .bao-last single-word pattern
   and the bao-last audit should skip it. */

.rb-title{
    margin-top:22px;
    font-family:var(--font-display);
    font-size:var(--fs-hero);
    font-weight:800;
    line-height:1.1;
    letter-spacing:-.01em;
    color:var(--ink);
    text-wrap:balance;
}

.rb-title-accent{
    color:var(--primary);
}

.rb-lead{
    margin-top:18px;
    max-width:54ch;
    font-size:var(--fs-lead);
    font-weight:400;
    line-height:1.7;
    color:var(--ink-500);
    text-wrap:pretty;
}

/* ==========================
   BUTTONS
========================== */

.rb-actions{
    margin-top:26px;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.rb-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 26px;
    border:1px solid transparent;
    border-radius:var(--radius-md);
    font-family:var(--font-sans);
    font-size:var(--fs-body);
    font-weight:700;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
    transition:
        background var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.rb-btn--solid{
    background:var(--primary);
    color:var(--white);
}

.rb-btn--solid:hover{
    background:var(--primary-hover);
    box-shadow:var(--glow);
    transform:translateY(-2px);
}

.rb-btn--ghost{
    background:var(--white);
    border-color:var(--primary-35);
    color:var(--ink-900);
}

.rb-btn--ghost:hover{
    border-color:var(--primary);
    box-shadow:var(--shadow-sm);
    transform:translateY(-2px);
}

.rb-btn--ghost i{
    font-size:18px;
    color:var(--primary);
}

/* ==========================
   FEATURE CARDS
========================== */

/* Cards here, not the bare icon-and-label of the mock-interview section:
   each one carries a line of explanation under its title, which needs a
   box to sit in. */

.rb-features{
    margin-top:36px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    /* 14px gap with 16px card padding left 134px of content per card, one
       pixel-width short of "Mentor Reviewed" — that title alone broke to two
       lines and dropped its description below its neighbours'. 12 and 14 buy
       143px, which holds all four titles on one line. */
    gap:12px;
    list-style:none;
    margin-inline:0;
    padding:0;
}

.rb-feature{
    padding:16px 14px 18px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-15);
    background:var(--white);
    box-shadow:var(--shadow-soft);
}

.rb-feature-icon{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:var(--cream-200);
    color:var(--primary);
    font-size:16px;
}

.rb-feature-title{
    margin-top:14px;
    font-size:var(--fs-card-sm);
    font-weight:700;
    line-height:1.3;
    color:var(--ink-900);
}

.rb-feature-text{
    margin-top:6px;
    font-size:var(--fs-caption);
    font-weight:400;
    line-height:1.5;
    color:var(--ink-500);
    text-wrap:pretty;
}

/* ==========================
   PROCESS PANEL
========================== */

/* Outlined, where the mock-interview panel is filled. The two sections sit
   back to back, and two peach panels in a row read as one long band. */

.rb-panel{
    margin-top:var(--space-block);
    padding:32px 34px;
    border:1px solid var(--border-soft);
    border-radius:var(--r-20);
    background:var(--white);
}

.rb-panel-head{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:10px 44px;
    margin-bottom:26px;
}

.rb-panel-title{
    font-family:var(--font-display);
    font-size:var(--fs-sub);
    font-weight:700;
    line-height:1.25;
    color:var(--ink);
}

.rb-panel-sub{
    font-size:var(--fs-body);
    font-weight:400;
    line-height:1.6;
    color:var(--ink-500);
}

.rb-steps{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:40px;
    list-style:none;
    margin:0;
    padding:0;
}

/* Icon beside the copy, not above it — these four sit on the open panel
   rather than in cards, so a horizontal pair keeps each one reading as a
   single unit. */

.rb-step{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:14px;
}

/* Lets the copy column shrink inside the grid track instead of forcing
   the track wider than its share. */

.rb-step > span:last-child{
    min-width:0;
}

/* Drawn rather than set in an icon font so it lands dead centre of the
   40px gap at any width. */

.rb-step:not(:last-child)::after{
    content:"";
    position:absolute;
    top:26px;
    left:calc(100% + 20px);
    width:9px;
    height:9px;
    border-top:2px solid var(--ink-400);
    border-right:2px solid var(--ink-400);
    transform:translate(-50%,-50%) rotate(45deg);
    pointer-events:none;
}

.rb-step-mark{
    position:relative;
    flex-shrink:0;
}

.rb-step-icon{
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--cream-200);
    color:var(--primary);
    font-size:19px;
}

/* The number rides the top-left of the circle in the design, overlapping
   it rather than sitting clear. */

.rb-step-no{
    position:absolute;
    top:-8px;
    left:-8px;
    min-width:22px;
    height:22px;
    padding-inline:4px;
    display:grid;
    place-items:center;
    border-radius:999px;
    border:2px solid rgba(255,255,255,0.85);
    background:var(--primary, #ff6900);
    color:#ffffff !important;
    font-family:var(--font-sans, Inter, sans-serif);
    font-size:11px;
    font-weight:700;
    line-height:1;
    z-index:2;
}

/* Both of these are spans inside the step's text column — inline by
   default, which would have ignored the margin below and run the two
   together on one line. */

.rb-step-title{
    display:block;
    font-size:var(--fs-card-sm);
    font-weight:700;
    line-height:1.3;
    color:var(--ink-900);
}

.rb-step-text{
    display:block;
    margin-top:6px;
    font-size:var(--fs-caption);
    font-weight:400;
    line-height:1.5;
    color:var(--ink-500);
    text-wrap:pretty;
}

/* ==========================
   CLOSING CTA
========================== */

/* Same inset as .mi-cta above it, so the two closing bars line up. */

.rb-cta{
    margin-top:var(--space-block);
    max-width:1130px;
    margin-inline:auto;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:22px;
    padding:22px 26px;
    border-radius:var(--r-15);
    background:var(--cream-50);
}

.rb-cta-icon{
    width:54px;
    height:54px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--cream-300);
    color:var(--primary);
    font-size:22px;
}

.rb-cta-text{
    flex:1 1 280px;
}

.rb-cta-title{
    font-family:var(--font-display);
    font-size:var(--fs-card);
    font-weight:700;
    line-height:1.3;
    color:var(--ink);
}

.rb-cta-sub{
    margin-top:6px;
    font-size:var(--fs-body);
    font-weight:400;
    line-height:1.6;
    color:var(--ink-500);
}

/* ==========================
   TRUST
========================== */

.rb-trust{
    display:flex;
    align-items:center;
    gap:14px;
    padding-left:24px;
    border-left:1px solid var(--border-grey);
}

/* The rule only reads as a divider while the bar is one line; once the
   trust group wraps under the button it would hang in mid-air. */

@media (max-width:1050px){

    .rb-trust{
        padding-left:0;
        border-left:0;
    }

}

.rb-avatars{
    display:flex;
    align-items:center;
    list-style:none;
    margin:0;
    padding:0;
}

.rb-avatars li + li{
    margin-left:-14px;
}

.rb-avatars img{
    display:block;
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid var(--white);
    background:var(--cream-100);
}

.rb-trust-label{
    max-width:15ch;
    font-size:var(--fs-caption);
    font-weight:500;
    line-height:1.45;
    color:var(--ink-500);
}

/* ==========================
   RESPONSIVE
========================== */

/* Same cut-off as the mock-interview artwork, and for the same arithmetic:
   a fixed 720 copy column plus a 48 gap leaves the art under 300px below
   1108, where the figure and her icon tiles stop being readable. */

@media (max-width:1100px){

    .rb-hero{
        grid-template-columns:minmax(0,1fr);
        gap:32px;
    }

    .rb-art{
        max-width:620px;
        margin-inline:auto;
    }

    .rb-head{
        max-width:none;
    }

    .rb-steps{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:28px 40px;
    }

    /* At two columns the second and fourth steps end a row, so their
       chevron would point into the margin. */

    .rb-step:nth-child(2n)::after{
        content:none;
    }

}

@media (max-width:860px){

    .rb-features{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .rb-panel{
        padding:26px 20px;
    }

}

@media (max-width:600px){

    .rb-features,
    .rb-steps{
        grid-template-columns:1fr;
    }

    .rb-step::after{
        content:none !important;
    }

    .rb-btn{
        width:100%;
        justify-content:center;
    }

    .rb-cta{
        padding:22px 20px;
    }

    .rb-cta .rb-btn{
        width:100%;
    }

}