/* input(4,20): run-time error CSS1031: Expected selector, found '('
input(4,20): run-time error CSS1025: Expected comma or open brace, found '('
input(5,35): run-time error CSS1031: Expected selector, found '/'
input(5,35): run-time error CSS1025: Expected comma or open brace, found '/' */
/* market-intelligence.css — scoped to /Solutions/MarketIntelligence. Loads AFTER marketing.css.
   Reuses unchanged from marketing.css: rc-sec, rc-bg-alt, rc-eyebrow, rc-h2, rc-lede,
   rc-sec-head, rc-btn-hero, rc-hero-sub, rc-arrow, rc-hero-pill, rc-hero-pill-dot,
   rc-row*/rc-logo (overriding only sizes that differ).
   Desktop rules first; all mobile/tablet rules are grouped at the bottom. */

/* ---- Hero ---- */
.rc-hero-mi{background:linear-gradient(165deg,#eef5f2 0%,#f5faf7 45%,#fff 100%);position:relative;overflow:hidden}
.rc-hero-mi::before{content:'';position:absolute;width:860px;height:860px;border-radius:50%;background:radial-gradient(circle,rgba(139,175,156,.16) 0%,transparent 70%);top:-400px;left:50%;transform:translateX(-50%);pointer-events:none}
.rc-hero-mi .container-lg{position:relative}

/* ---- Three-node pipeline (used twice: hero, and section 2) ---- */
.rc-pipe{display:flex;align-items:center;justify-content:center;gap:14px;max-width:880px;margin:46px auto 0;text-align:left}
.rc-node{flex:1;min-width:0;background:#fff;border:1px solid rgba(44,95,82,.12);border-radius:13px;padding:18px 16px;box-shadow:0 1px 3px rgba(0,0,0,.04),0 10px 30px rgba(44,95,82,.07)}
.rc-node .k{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#b6bfc6;display:block;margin-bottom:7px}
.rc-node b{font-size:15px;font-weight:700;color:#111;letter-spacing:-.01em;display:block}
.rc-node.mid{background:#f4f8f6;border-color:rgba(44,95,82,.16)}
.rc-node.out{background:#2C5F52;border-color:#2C5F52;box-shadow:0 4px 14px rgba(44,95,82,.28),0 16px 40px rgba(44,95,82,.16)}
.rc-node.out .k{color:rgba(255,255,255,.62)}
.rc-node.out b{color:#fff}
.rc-pipe .rc-arrow,.rc-into .rc-arrow{flex-shrink:0;color:#8BAF9C}
.rc-ways{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.rc-ways span{font-size:11px;font-weight:600;color:#2C5F52;background:#fff;border:1px solid rgba(44,95,82,.12);padding:4px 10px;border-radius:999px;white-space:nowrap}

/* ---- Section 1: illustrative hiring-activity panel ----
   IMPORTANT: this is a CONCEPTUAL example, not a real Recuity dashboard. The
   "Illustrative example" pill in .rc-panel-h must stay — see INSTRUCTIONS. */
.rc-panel{background:#fff;border:1px solid rgba(44,95,82,.12);border-radius:16px;padding:26px;box-shadow:0 1px 3px rgba(0,0,0,.04),0 12px 34px rgba(44,95,82,.07);max-width:900px;margin:0 auto}
.rc-panel-h{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#b6bfc6;margin-bottom:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rc-panel-h em{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.07em;color:#5a7a71;background:#f2f5f4;border:1px solid #e7ecea;padding:3px 9px;border-radius:999px}
.rc-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.rc-fact{min-width:0}
.rc-fact .k{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#b6bfc6;display:block;margin-bottom:9px}
.rc-fact b{display:block;font-size:22px;font-weight:700;color:#111;letter-spacing:-.02em;line-height:1.2}
.rc-fact .u{font-size:13px;color:#5a7a71;margin-top:4px;display:block}
.rc-bars{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.rc-bar{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#3d5a52}
.rc-bar i{height:7px;border-radius:4px;background:#8BAF9C;flex-shrink:0}
.rc-bar i.deep{background:#2C5F52}
.rc-skills{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.rc-skills span{font-size:12px;font-weight:600;color:#2C5F52;background:rgba(44,95,82,.08);border:1px solid rgba(44,95,82,.12);padding:5px 11px;border-radius:999px}
.rc-roles{margin-top:22px;padding-top:18px;border-top:1px solid #f0f2f5}
.rc-row{gap:11px;border-bottom-color:#f4f6f5}
.rc-logo{width:28px;height:28px;font-size:11px}
.rc-row-name{font-size:13px}
.rc-row-meta{font-size:11.5px;color:#8a979f;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Real body copy — keep at #5a7a71 for contrast (>=4.5:1), not the metadata grey. */
.rc-note{font-size:13px;color:#5a7a71;line-height:1.6;max-width:700px;margin:24px auto 0;text-align:center;text-wrap:pretty}

/* ---- Section 3: data into your own work ---- */
.rc-into{display:flex;align-items:center;justify-content:center;gap:14px;max-width:820px;margin:0 auto}
.rc-into>.rc-node{max-width:320px}
.rc-dest{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.rc-dest>div{border:1px solid #e7ecea;border-radius:10px;padding:12px 15px;background:#fbfcfc;font-size:13.5px;font-weight:600;color:#3d5a52}

/* ---- Close ---- */
.rc-close-mi{text-align:center}

/* =====================================================================
   MOBILE / TABLET
   ===================================================================== */
@media(max-width:991.98px){
  /* Both pipelines and the delivery row stack; marketing.css already rotates
     .rc-arrow 90deg at this width. If your build does not, add:
     .rc-pipe .rc-arrow,.rc-into .rc-arrow{transform:rotate(90deg)} */
  .rc-pipe,.rc-into{flex-direction:column;gap:12px}
  .rc-node{width:100%;flex:none}
  .rc-facts{grid-template-columns:minmax(0,1fr);gap:20px}
  .rc-dest{width:100%}
  .rc-into>.rc-node{max-width:none}
}
@media(max-width:767.98px){
  .rc-pipe{margin-top:32px}
  .rc-panel{padding:18px}
  .rc-fact b{font-size:20px}
}

