/*
 *  resumeforactors.com
 *
 *  Everything this site adds on top of the purchased theme (css/style.css +
 *  css/responsive.css). Two jobs: small corrections to the theme, and the
 *  whole member area, which the theme has no styles for at all.
 *
 *  The theme's own palette (#7450fe primary, #4834d4 deep accent, and a
 *  #21d397 -> #7450fe gradient) is not used. It is replaced wholesale by the
 *  logo-derived one below; only the green survives, as a success colour.
 */

/*
 *  Palette is sampled from the logo rather than picked: #F58E1F is 25.6% of the
 *  artwork and #000 is 4.7%, and there is no third colour. Everything below is
 *  derived from that one orange so the buttons and the mark cannot drift apart.
 *
 *  The theme's own blues (#3e94e4 on .dream-btn/.login-btn, #1d88ed on .button
 *  and .preview-demo) and its purple/green gradient are overridden in the THEME
 *  RECOLOUR block further down. css/style.css is left alone - it is a purchased
 *  file and every colour decision we make lives here, so it stays one diff.
 *
 *  WHY THERE ARE THREE ORANGES.
 *
 *  The previous mark was a teal, and a teal is dark enough to carry white text
 *  on it and to be read as text on white. This orange is neither, so one
 *  variable cannot do both jobs:
 *
 *      white on #F58E1F   2.39:1   unusable
 *      ink   on #F58E1F   7.07:1   fine
 *      #F58E1F on white   2.39:1   unusable
 *      #A85206 on white   5.42:1   fine
 *
 *  So --rfa-primary is the exact logo orange and is only ever a FILL, with
 *  --rfa-on-primary (the logo's own black, warmed) as the text on top of it.
 *  Anything that is itself orange TEXT, or a 2px outline, uses --rfa-primary-
 *  deep instead. Swapping those two around is the one change here that will
 *  silently fail an accessibility audit, which is why they are named by job
 *  rather than by shade.
 */
:root {
    --rfa-primary: #F58E1F;        /* the logo orange, exactly - fills only */
    --rfa-primary-dark: #E07C10;   /* fill hover / pressed */
    --rfa-primary-deep: #A85206;   /* orange TEXT and outlines on light */
    --rfa-primary-deeper: #7E3D04; /* that text, hovered */
    --rfa-primary-soft: #F9AC57;   /* lighter step: gradients, footer links */
    --rfa-primary-tint: rgba(245, 142, 31, .12);
    --rfa-on-primary: #241B12;     /* text that sits on --rfa-primary */
    --rfa-green: #21d397;          /* success only - flashes, ticks */
    --rfa-ink: #241B12;            /* near-black, warmed toward the orange */
    --rfa-muted: #6f6157;
    --rfa-line: #ece4dc;
    --rfa-bg: #faf7f4;
}

/* ---------------------------------------------------------------- theme fixes */

.rfa-current > a { color: var(--rfa-primary-deep) !important; }

/* The theme's brand slot was a 40px square icon next to a text name; ours is a
   wordmark, so it needs to size on height and keep its own aspect ratio. The
   !important on the footer beats .footer-logo img { width: 40px }. */
.rfa-brand img {
    height: 38px;
    width: auto;
    max-width: 260px;
    display: block;
    transition: height 320ms cubic-bezier(.22, .61, .36, 1);
}
.rfa-brand-footer img {
    height: 34px;
    width: auto !important;
    max-width: 240px;
}

/*  Home page only: at the very top of the page the logo is double size, and it
    shrinks to the normal 38px the moment the header sticks.

    Scoped to #page-home because every other page has the breadcrumb hero
    directly beneath the header - a 76px mark there overlaps the title. The
    .sticky class is added by the theme's own script.js on any scrollTop > 0,
    so this needs no JS of its own.

    .classy-navbar is a fixed 90px, which fits 76px but leaves nothing around
    it, hence the extra top padding while the header is transparent. */
#page-home .header-area:not(.sticky) .rfa-brand img {
    height: 76px;
    max-width: 420px;
}
#page-home .header-area:not(.sticky) .classy-navbar {
    padding-top: 18px;
    transition: padding-top 320ms cubic-bezier(.22, .61, .36, 1);
}
#page-home .header-area .classy-navbar {
    transition: padding-top 320ms cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 991px) {
    /*  The toggler and the mark share the bar on small screens, so the big
        state would push the burger off the edge. */
    #page-home .header-area:not(.sticky) .rfa-brand img { height: 46px; max-width: 260px; }
    #page-home .header-area:not(.sticky) .classy-navbar { padding-top: 8px; }
}
@media (max-width: 767px) {
    .rfa-brand img { height: 30px; max-width: 190px; }
}

/*  Someone who has asked not to see motion gets the end state, not the
    animation. */
@media (prefers-reduced-motion: reduce) {
    .rfa-brand img,
    #page-home .header-area .classy-navbar { transition: none; }
}

/* The theme ships no styles for a "current page" nav item and its footer
   headings sit tight against the links underneath them. */
.footer-area .contact_info h5 { letter-spacing: 1px; }
.footer-area .contact_info p { margin-bottom: 6px; }
.rfa-copyright { margin-top: 22px; font-size: 12px; opacity: .7; }

/*  The icon PNGs are 2x (128 and 160px) so they stay sharp on retina. The theme
    never sized them in CSS, it just relied on the files being exactly 64 and
    80px, so without this they render at double size and run over the card text. */
.icon-img-box img { width: 64px; height: 64px; }
.service_icon img { width: 80px; height: 80px; }

/* ----------------------------------------------------- THEME RECOLOUR ------
 *
 *  The purchased theme ships three unrelated accents - #3e94e4 (.dream-btn,
 *  .login-btn), #1d88ed (.button, .preview-demo) and a #21d397 -> #7450fe
 *  gradient on headings and price tables. Against the logo they read as four
 *  different brands on one page. All of them become the logo orange here.
 *
 *  Kept in this file rather than edited into style.css so the purchased file
 *  stays pristine and the whole colour decision is one reversible block.
 */

/*  Solid buttons take the logo orange itself and print the ink on top rather
    than white. White here is 2.39:1 and genuinely hard to read at 14px; the
    ink is 7.07:1. It also happens to be what the logo does with its own
    wordmark, so the button and the mark agree. */
.dream-btn,
.dream-btn.green-btn,
.login-btn,
.more-btn,
.btn-primary {
    background: var(--rfa-primary) !important;
    border-color: var(--rfa-primary) !important;
    color: var(--rfa-on-primary) !important;
    font-weight: 600;
    box-shadow: 0 8px 22px -12px rgba(245, 142, 31, .9);
}
.dream-btn:hover,
.dream-btn:focus,
.login-btn:hover,
.login-btn:focus,
.more-btn:hover,
.btn-primary:hover {
    background: var(--rfa-primary-dark) !important;
    border-color: var(--rfa-primary-dark) !important;
    color: var(--rfa-on-primary) !important;
}

/*  The hero's second button is the same shape as the first; as a second solid
    fill it competed with the real call to action. Outlined instead - and the
    outline is the deep orange, because a 2px #F58E1F rule on white is as weak
    as #F58E1F text on white. */
.dream-btn.green-btn {
    background: transparent !important;
    color: var(--rfa-primary-deep) !important;
    border: 2px solid var(--rfa-primary-deep) !important;
    line-height: 44px;
    box-shadow: none;
}
.dream-btn.green-btn:hover {
    background: var(--rfa-primary) !important;
    border-color: var(--rfa-primary) !important;
    color: var(--rfa-on-primary) !important;
}

.button {
    color: var(--rfa-primary-deep);
    border-color: var(--rfa-primary-deep);
}
.button:hover { color: var(--rfa-on-primary); }
/*  .button's hover fill is a ::before that slides across, so the colour has to
    go on the pseudo-element, not the button. */
.button::before { background: var(--rfa-primary) !important; }

.preview-demo { background: var(--rfa-primary) !important; color: var(--rfa-on-primary) !important; }
.preview-demo.v2 {
    background: transparent !important;
    color: var(--rfa-primary-deep) !important;
    border: 2px solid var(--rfa-primary-deep) !important;
}
.preview-demo.v2:hover { background: var(--rfa-primary) !important; color: var(--rfa-on-primary) !important; }

/*  The last three places the theme's blue is hardcoded rather than inherited:
    the pale pill behind the hero's price line, the "$10 once" box under the
    pricing copy, and the "included" chip on the Web For Actors card. All three
    are small, and all three were the only blue left on an otherwise teal page. */
.integration-link.light:before { background: var(--rfa-primary-tint) !important; }

.free-7 { border-color: var(--rfa-primary) !important; }
.free-7 span,
.free-7 p { color: var(--rfa-primary-deep) !important; }

.table_text_details h3 span {
    background: var(--rfa-primary-tint) !important;
    color: var(--rfa-primary-deep) !important;
}

/*  Headings shipped as #13287e, a strong indigo. Next to the orange that reads as
    a second brand colour rather than as text, so they take the ink instead -
    which is the logo's other colour (pure black) warmed very slightly toward
    the teal so the page does not go cold-grey. */
.welcome-content h1,
.section-heading h2,
.who-we-contant h4,
.services-block-four h3 a,
.service_single_content h6,
.table_text_details h3,
.single-testimonial .admin_text h5 {
    color: var(--rfa-ink) !important;
}

/*  NOT the breadcrumb title. It used to sit on a bright blue plate where ink
    was the readable choice; the plate is now the deep orange bg-img/bread, so
    it takes white like the crumbs underneath it already did. */
.breadcumb--con .title { color: #fff !important; }
.services-block-four h3 a:hover { color: var(--rfa-primary-deep) !important; }

/*  Headings, links and the little dot rows. All of these are text on a light
    background, so they take the deep orange, not the fill orange. */
.gradient-text,
.gradient-text.cyan {
    background: none !important;
    -webkit-text-fill-color: var(--rfa-primary-deep) !important;
    color: var(--rfa-primary-deep) !important;
}
/*  Except inside the price card's headline block, where the same class sits on
    the dark orange blob rather than on white - deep orange on deep orange is
    invisible, and it is the line that says what the $10 actually buys. */
.price_table_text .gradient-text,
.price_table_text .gradient-text.cyan {
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
    opacity: .92;
}

a { color: var(--rfa-primary-deep); }
a:hover { color: var(--rfa-primary-deeper); }
.classynav ul li a:hover,
.classynav ul li.rfa-current > a { color: var(--rfa-primary-deep) !important; }

/*  The seven dots above each section heading cycle through the theme's demo
    palette; as a single-brand site they should be one colour fading out. */
.dream-dots span { background: var(--rfa-primary) !important; }
.dream-dots span:nth-child(1) { opacity: .25; }
.dream-dots span:nth-child(2) { opacity: .40; }
.dream-dots span:nth-child(3) { opacity: .55; }
.dream-dots span:nth-child(4) { opacity: .70; }
.dream-dots span:nth-child(5) { opacity: .85; }
.dream-dots span:nth-child(6) { opacity: 1; }
.dream-dots span:nth-child(7) { opacity: 1; }

/*  Price tables carry the old gradient on hover.
    NOT .subscribe: that is a white card with a shadow, and its heading and
    button are both styled for a light background. Painting the gradient over it
    left navy text on teal and a white button on a white plate.

    The gradient runs deep -> deeper rather than through the logo orange: the
    theme prints this card's text white on hover, and white only holds up over
    the dark end of the ramp. */
.single_price_table_content:hover {
    background-image: linear-gradient(135deg, var(--rfa-primary-deep) 0%, var(--rfa-primary-deeper) 100%) !important;
}
.free-7 span { color: var(--rfa-primary-deep); }

/*  Footer keeps its dark plate, but the social icons and links pick up the
    lighter step so they read against it.

    The global `a` rule above is the deep orange, which is chosen to be legible
    on white and is therefore almost invisible on the footer's dark brown. The
    soft step is 8.9:1 there. This is the mirror image of the price-blob case:
    same colour, opposite background, opposite answer. */
.footer-social-info a i:hover { color: var(--rfa-primary-soft) !important; }
.footer-area a,
.footer-area .contact_info a { color: var(--rfa-primary-soft); }
.footer-area a:hover,
.footer-area .contact_info a:hover { color: #fff; }

/*  ---- the rest of the theme's accents -------------------------------------
 *
 *  Found by listing every rule in style.css that still sets one of the old
 *  accents (#3e94e4, #1d88ed, #13287e, #7450fe, #4834d4) and dropping the ones
 *  whose classes never appear in our markup. These are the survivors.
 *
 *  index.php puts .light-version on the body, which is what makes the generic
 *  h1-h6 rule below bite: the named heading list further up only covers the
 *  selectors the marketing pages happen to use, so every other heading on the
 *  site - the whole member area included - was still rendering the theme's
 *  indigo. That is the kind of thing that never shows up in a screenshot of
 *  the home page.
 */
body.light-version h1,
body.light-version h2,
body.light-version h3,
body.light-version h4,
body.light-version h5,
body.light-version h6 { color: var(--rfa-ink); }

body.light-version .group input,
body.light-version .group textarea { color: var(--rfa-ink) !important; }

/*  The "$10 once. Yours for life." pill. Its plate was already re-tinted above;
    without this the text inside it stayed the theme's blue. */
.integration-link.light .integration-text { color: var(--rfa-primary-deep) !important; }

.services-block-four.how .inner-box .step { color: var(--rfa-primary-deep) !important; }
.preview-demo:hover { color: var(--rfa-on-primary) !important; }
.header-area .d.classy-nav-container a { color: var(--rfa-ink); }

/*  The sticky header was #ccd7e8, a cold blue-grey. It is the one surface the
    mark sits on at every scroll position, so it was also the most visible
    remaining piece of the old palette. A warm near-white with a hairline
    shadow instead: the orange has somewhere to sit, and the bar still separates
    from the content behind it without drawing a hard rule. */
.header-area.sticky {
    background-color: #fffdfa !important;
    box-shadow: 0 2px 16px -8px rgba(70, 48, 24, .45);
}

body.light-version .dream-faq-area dt {
    background-image: none !important;
    background: var(--rfa-primary) !important;
    color: var(--rfa-on-primary) !important;
}

/* --------------------------------------------------------------------- flash */

.rfa-flash {
    padding: 14px 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.rfa-flash-success { background: var(--rfa-green); }
.rfa-flash-error   { background: #e84118; }

.rfa-topbar {
    background: #fff3cd;
    color: #7a5c00;
    text-align: center;
    padding: 12px 20px;
    font-size: 14px;
}
.rfa-topbar a { color: #7a5c00; font-weight: 700; text-decoration: underline; }

/* --------------------------------------------------------------- member area */

body.rfa-app { background: var(--rfa-bg); }

.rfa-page {
    padding: 150px 0 100px;
}
.rfa-page h1 {
    font-size: 34px;
    font-weight: 700;
    color: var(--rfa-ink);
    margin-bottom: 6px;
}
.rfa-page .rfa-lede {
    color: var(--rfa-muted);
    margin-bottom: 34px;
    max-width: 720px;
}

.rfa-card {
    background: #fff;
    border: 1px solid var(--rfa-line);
    border-radius: 10px;
    padding: 28px 30px;
    margin-bottom: 26px;
    box-shadow: 0 6px 24px -18px rgba(70, 48, 24, .5);
}
.rfa-card h2 {
    font-size: 19px;
    font-weight: 700;
    color: var(--rfa-ink);
    margin: 0 0 4px;
}
.rfa-card .rfa-card-note {
    color: var(--rfa-muted);
    font-size: 13px;
    margin-bottom: 22px;
}

.rfa-card label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--rfa-muted);
    margin: 14px 0 6px;
}
.rfa-card .form-control,
.rfa-auth .form-control {
    border: 1px solid var(--rfa-line);
    border-radius: 6px;
    height: 44px;
    font-size: 15px;
    color: var(--rfa-ink);
    background: #fff;
    box-shadow: none;
}
.rfa-card textarea.form-control { height: auto; padding-top: 10px; }
.rfa-card .form-control:focus,
.rfa-auth .form-control:focus {
    border-color: var(--rfa-primary);
    box-shadow: 0 0 0 3px rgba(245, 142, 31, .25);
}
.rfa-help { font-size: 12px; color: var(--rfa-muted); margin-top: 4px; }

.rfa-btn {
    display: inline-block;
    border: 0;
    border-radius: 6px;
    padding: 0 26px;
    height: 44px;
    line-height: 44px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #fff;
    background: var(--rfa-primary);
    cursor: pointer;
}
.rfa-btn:hover { background: var(--rfa-primary-dark); color: #fff; text-decoration: none; }
.rfa-btn-green { background: var(--rfa-green); }
.rfa-btn-green:hover { background: #17b17e; }
.rfa-btn-ghost {
    background: transparent;
    color: var(--rfa-primary);
    border: 1px solid var(--rfa-primary);
    line-height: 42px;
}
.rfa-btn-ghost:hover { background: var(--rfa-primary); color: #fff; }
.rfa-btn-danger { background: transparent; color: #e84118; border: 1px solid #f3c7bf; }
.rfa-btn-danger:hover { background: #e84118; color: #fff; }
.rfa-btn-sm { height: 34px; line-height: 34px; padding: 0 14px; font-size: 11px; }

/* ------------------------------------------------------------------- tables */

.rfa-table { width: 100%; border-collapse: collapse; }
.rfa-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--rfa-muted);
    border-bottom: 1px solid var(--rfa-line);
    padding: 0 12px 10px 0;
    font-weight: 700;
}
.rfa-table td {
    padding: 14px 12px 14px 0;
    border-bottom: 1px solid var(--rfa-line);
    vertical-align: middle;
    color: var(--rfa-ink);
    font-size: 14px;
}
.rfa-table tr:last-child td { border-bottom: 0; }
.rfa-table .rfa-actions { text-align: right; white-space: nowrap; }
.rfa-empty {
    padding: 28px;
    text-align: center;
    color: var(--rfa-muted);
    background: #fdfbf8;
    border: 1px dashed var(--rfa-line);
    border-radius: 8px;
}

/* ------------------------------------------------------------------ tiles */

.rfa-tiles { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.rfa-tile {
    flex: 1 1 220px;
    margin: 0 10px 20px;
    background: #fff;
    border: 1px solid var(--rfa-line);
    border-radius: 10px;
    padding: 22px 24px;
    text-align: left;
}
.rfa-tile .rfa-tile-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--rfa-primary);
    line-height: 1.1;
}
.rfa-tile .rfa-tile-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--rfa-muted);
    margin-top: 6px;
}
.rfa-tile a { font-size: 13px; font-weight: 600; }

/* ------------------------------------------------------- repeatable rows */

.rfa-row-block {
    border: 1px solid var(--rfa-line);
    border-radius: 8px;
    padding: 18px 20px 6px;
    margin-bottom: 16px;
    background: #fdfbf8;
    position: relative;
}
.rfa-row-block .rfa-remove {
    position: absolute;
    top: 12px;
    right: 14px;
    color: #c3b6a8;
    cursor: pointer;
    font-size: 16px;
    background: none;
    border: 0;
    padding: 0;
}
.rfa-row-block .rfa-remove:hover { color: #e84118; }

/* --------------------------------------------------------------- selectors */

.rfa-picker { max-height: 320px; overflow-y: auto; border: 1px solid var(--rfa-line); border-radius: 8px; padding: 6px 14px; }
.rfa-picker .rfa-pick-group {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--rfa-muted);
    font-weight: 700;
    margin: 14px 0 6px;
}
.rfa-pick {
    display: block;
    padding: 7px 0;
    border-bottom: 1px solid #f3ece4;
    font-size: 14px;
    color: var(--rfa-ink);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    margin: 0;
}
.rfa-pick:last-child { border-bottom: 0; }
.rfa-pick input { margin-right: 10px; }
.rfa-pick .rfa-pick-meta { color: var(--rfa-muted); font-size: 12px; }

.rfa-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rfa-chip {
    display: inline-block;
    padding: 7px 12px;
    border: 1px solid var(--rfa-line);
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    background: #fff;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    color: var(--rfa-ink);
    font-weight: 400;
}
.rfa-chip input { margin-right: 7px; }
.rfa-chip.rfa-chip-on { border-color: var(--rfa-primary); background: var(--rfa-primary-tint); }

/* ------------------------------------------------------------------ builder */

.rfa-builder { display: flex; flex-wrap: wrap; margin: 0 -14px; align-items: flex-start; }
.rfa-builder-form { flex: 1 1 480px; margin: 0 14px; min-width: 0; }
.rfa-builder-preview { flex: 0 1 460px; margin: 0 14px; position: sticky; top: 100px; }
.rfa-builder-preview iframe {
    width: 100%;
    height: 640px;
    border: 1px solid var(--rfa-line);
    border-radius: 8px;
    background: #fff;
}

.rfa-template-picker { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.rfa-template-option { flex: 1 1 160px; margin: 0 8px 16px; cursor: pointer; }
.rfa-template-option img {
    width: 100%;
    border: 3px solid transparent;
    border-radius: 8px;
    display: block;
    background: #fff;
}
.rfa-template-option input { display: none; }
.rfa-template-option input:checked + img { border-color: var(--rfa-primary); }
.rfa-template-option span { display: block; text-align: center; font-size: 13px; margin-top: 8px; color: var(--rfa-ink); }

/* --------------------------------------------------------------- auth pages */

.rfa-auth-page { padding: 170px 0 110px; background: var(--rfa-bg); }
.rfa-auth {
    max-width: 460px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--rfa-line);
    border-radius: 12px;
    padding: 38px 40px;
}
.rfa-auth h1 { font-size: 26px; font-weight: 700; color: var(--rfa-ink); margin-bottom: 6px; }
.rfa-auth p.rfa-auth-note { color: var(--rfa-muted); font-size: 14px; margin-bottom: 24px; }
.rfa-auth label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--rfa-muted);
    margin: 16px 0 6px;
}
.rfa-auth .rfa-btn { width: 100%; margin-top: 24px; }
.rfa-auth-alt { text-align: center; margin-top: 22px; font-size: 14px; color: var(--rfa-muted); }

.rfa-error {
    background: #fdecea;
    border: 1px solid #f5c6c0;
    color: #b3261e;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 14px;
    margin-bottom: 18px;
}

/* --------------------------------------------------------------- checkout */

.rfa-checkout { max-width: 520px; margin: 0 auto; }
.rfa-receipt { border: 1px solid var(--rfa-line); border-radius: 8px; padding: 20px 22px; margin-bottom: 24px; background: #fdfbf8; }
.rfa-receipt div { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px; color: var(--rfa-ink); }
.rfa-receipt div.rfa-receipt-total {
    border-top: 1px solid var(--rfa-line);
    margin-top: 8px;
    padding-top: 14px;
    font-weight: 700;
    font-size: 18px;
}
#dropin-container { margin-bottom: 10px; }
#rfa-pay-errors { display: none; color: #b3261e; font-size: 14px; margin-bottom: 12px; }

/* ------------------------------------------------------------------ misc */

.rfa-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}
.rfa-pill-on  { background: rgba(33, 211, 151, .15); color: #12805c; }
.rfa-pill-off { background: #f2ece5; color: var(--rfa-muted); }

.rfa-split { display: flex; flex-wrap: wrap; margin: 0 -13px; align-items: flex-start; }
.rfa-split > * { flex: 1 1 320px; margin: 0 13px; min-width: 0; }

@media (max-width: 767px) {
    .rfa-page { padding: 120px 0 70px; }
    .rfa-card { padding: 22px 18px; }
    .rfa-builder-preview { position: static; }
}