/* Components added for the sales-focused redesign. Theme colours come from colors.css. */

/* ---------- hero ---------- */
.rc-hero .slide_cont h1 { color: #fff; font-size: 44px; font-weight: 600; line-height: 1.15; letter-spacing: -1px; margin: 0 0 20px; }
.rc-hero .rc-platforms { color: #fff; font-size: 14px; opacity: .9; margin-top: 18px; }
.rc-hero .rc-platforms .fa { font-size: 18px; margin: 0 4px 0 10px; vertical-align: -1px; }
.rc-hero .rc-platforms .fa:first-of-type { margin-left: 0; }

.rc-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.rc-btns .bt_main { float: none; margin: 0; }
.rc-btns.is-center { justify-content: center; }
.bt_main.rc-outline { background: transparent; border: 2px solid #fff; line-height: 46px; }
.bt_main.rc-outline:hover, .bt_main.rc-outline:focus { background: #fff; color: #1e72bc; }
.bt_main.rc-outline-dark { background: transparent; border: 2px solid #1e72bc; color: #1e72bc; line-height: 46px; }
.bt_main.rc-outline-dark:hover, .bt_main.rc-outline-dark:focus { background: #1e72bc; color: #fff; }

/* ---------- section headings ---------- */
.rc-section-intro { max-width: 720px; margin: -10px auto 40px; text-align: center; color: #666; font-size: 16px; line-height: 1.7; }
.rc-eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #30CFD0; margin-bottom: 8px; }

/* ---------- feature cards ---------- */
.rc-cards { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.rc-card-col { flex: 1 1 320px; padding: 12px; display: flex; }
.rc-card { background: #fff; border: 1px solid #e6ebf1; border-radius: 8px; padding: 28px 26px; width: 100%; transition: box-shadow .2s ease, transform .2s ease; }
.rc-card:hover { box-shadow: 0 10px 30px rgba(30, 114, 188, .12); transform: translateY(-2px); }
.rc-card .rc-icon { width: 52px; height: 52px; border-radius: 12px; background: rgba(30, 114, 188, .1); color: #1e72bc; font-size: 24px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.rc-card h3, .rc-card h4 { font-size: 18px; font-weight: 600; color: #111; margin: 0 0 10px; line-height: 1.35; }
.rc-card p { color: #666; font-size: 15px; line-height: 1.7; margin: 0; }
.rc-card a.rc-more { display: inline-block; margin-top: 14px; font-weight: 500; color: #1e72bc; }

/* ---------- platform strip ---------- */
.rc-platform-strip { background: #f5f8fb; padding: 30px 0; }
.rc-platform-strip ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; margin: 0; padding: 0; list-style: none; }
.rc-platform-strip li { color: #333; font-size: 16px; font-weight: 500; }
.rc-platform-strip .fa { color: #1e72bc; font-size: 24px; margin-right: 8px; vertical-align: -3px; }

/* ---------- downloads ---------- */
.rc-downloads { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.rc-download { flex: 1 1 150px; max-width: 172px; padding: 18px 12px; border-radius: 6px; text-align: center; text-decoration: none; background: #1e72bc; color: #fff; }
.rc-download:hover, .rc-download:focus { background: #111; color: #fff; text-decoration: none; }
.rc-download .fa { font-size: 28px; display: block; margin-bottom: 8px; }
.rc-download strong { display: block; font-size: 13px; font-weight: 600; }
.rc-download small { display: block; font-size: 11px; margin-top: 4px; opacity: .85; }
.rc-download.is-soon { background: #eef0f3; color: #888; cursor: default; }
.rc-download-multi:hover { background: #1e72bc; }
.rc-download-multi small { margin-bottom: 4px; }
.rc-download-multi a { display: block; margin-top: 6px; padding: 5px 4px; border-radius: 4px; background: rgba(255, 255, 255, .15); color: #fff; font-size: 11px; font-weight: 500; }
.rc-download-multi a:hover, .rc-download-multi a:focus { background: #fff; color: #1e72bc; text-decoration: none; }

/* ---------- screenshots ---------- */
.rc-shots { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.rc-shot { flex: 1 1 260px; padding: 10px; }
.rc-shot img { width: 100%; border-radius: 8px; border: 1px solid #e6ebf1; box-shadow: 0 6px 20px rgba(0, 0, 0, .06); }
.rc-shot p { text-align: center; color: #555; font-size: 14px; margin: 10px 0 0; font-weight: 500; }

/* ---------- pricing ---------- */
.rc-plan { background: #fff; border: 1px solid #e6ebf1; border-radius: 8px; padding: 30px 26px; width: 100%; display: flex; flex-direction: column; }
.rc-plan.is-featured { border: 2px solid #1e72bc; box-shadow: 0 10px 30px rgba(30, 114, 188, .15); }
.rc-plan h3 { font-size: 22px; font-weight: 600; color: #111; margin: 0; }
.rc-plan .rc-best { color: #30CFD0; font-weight: 500; font-size: 14px; margin: 4px 0 18px; }
.rc-plan .rc-price { font-size: 26px; font-weight: 600; color: #1e72bc; line-height: 1.2; }
.rc-plan .rc-price small { display: block; font-size: 13px; color: #888; font-weight: 400; margin-top: 4px; }
.rc-plan ul { list-style: none; padding: 18px 0 0; margin: 18px 0 24px; border-top: 1px solid #eef1f4; flex: 1; }
.rc-plan li { position: relative; padding-left: 26px; margin: 8px 0; color: #444; font-size: 15px; line-height: 1.5; }
.rc-plan li:before { content: "\f00c"; font-family: FontAwesome; position: absolute; left: 0; top: 1px; color: #30CFD0; }
.rc-plan .bt_main { float: none; display: block; width: 100%; }
.rc-note { text-align: center; color: #777; font-size: 14px; margin-top: 20px; }

/* ---------- FAQ ---------- */
.rc-faq { max-width: 820px; margin: 0 auto; }
.rc-faq details { border-bottom: 1px solid #e6ebf1; padding: 18px 0; }
.rc-faq summary { cursor: pointer; font-weight: 600; font-size: 16px; color: #111; list-style: none; position: relative; padding-right: 30px; }
.rc-faq summary::-webkit-details-marker { display: none; }
.rc-faq summary:after { content: "+"; position: absolute; right: 0; top: -2px; font-size: 22px; color: #1e72bc; }
.rc-faq details[open] summary:after { content: "\2212"; }
.rc-faq details p { margin: 12px 0 0; color: #555; line-height: 1.7; }

/* ---------- testimonials / trust ---------- */
.rc-quote { font-size: 16px; color: #333; line-height: 1.7; font-style: italic; margin: 0 0 16px; }
.rc-quote-by { font-size: 14px; color: #666; }
.rc-quote-by strong { color: #111; display: block; }
.rc-trust-list { list-style: none; padding: 0; margin: 0; }
.rc-trust-list li { margin: 8px 0; color: #444; font-size: 15px; }
.rc-trust-list .fa { color: #1e72bc; width: 22px; }

/* ---------- final CTA band ---------- */
.rc-cta-band { background: linear-gradient(90deg, #1e72bc, #30CFD0); padding: 60px 0; text-align: center; color: #fff; }
.rc-cta-band h2 { color: #fff; font-size: 32px; font-weight: 600; margin: 0 0 12px; }
.rc-cta-band p { color: #fff; opacity: .92; font-size: 16px; margin: 0 0 26px; }

/* ---------- contact form ---------- */
.rc-form label { display: block; font-weight: 500; font-size: 14px; color: #fff; margin: 0 0 6px; }
.rc-form .req { color: #ffd166; }
.rc-form .field { margin-bottom: 16px; }
.rc-form select { width: 100%; height: 50px; padding: 0 15px; border: none; background: #fff; color: #333; }
.rc-form .rc-form-note { color: #fff; opacity: .9; font-size: 14px; margin: 4px 0 18px; }
.rc-contact-side { padding: 60px 40px; }
.rc-contact-side h3 { font-size: 22px; font-weight: 600; margin: 0 0 16px; color: #fff; }
.rc-contact-side .rc-trust-list li, .rc-contact-side a { color: #fff; }
.rc-contact-side .rc-trust-list .fa { color: #30CFD0; }

/* ---------- tabs (How to Use) ---------- */
.rc-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 30px; padding: 0; list-style: none; }
.rc-tabs button { border: 1px solid #1e72bc; background: #fff; color: #1e72bc; border-radius: 30px; padding: 10px 22px; font-size: 14px; font-weight: 500; }
.rc-tabs button .fa { margin-right: 6px; }
.rc-tabs button[aria-selected="true"] { background: #1e72bc; color: #fff; }
.rc-tabpanel[hidden] { display: none; }
.rc-callout { background: #f5f8fb; border-left: 4px solid #1e72bc; padding: 16px 20px; margin: 0 0 30px; color: #555; font-size: 14px; line-height: 1.7; text-align: left; }

.rc-video { position: relative; padding-top: 56.25%; margin: 0 auto 40px; max-width: 760px; }
.rc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }

/* ---------- footer ---------- */
.rc-footer h4 { color: #111; font-size: 16px; font-weight: 600; margin: 0 0 14px; }
.rc-footer ul { list-style: none; padding: 0; margin: 0; }
.rc-footer li, .rc-footer p { color: #555; font-size: 14px; margin: 6px 0; line-height: 1.6; }
.rc-footer a { color: #555; }
.rc-footer a:hover { color: #1e72bc; }

/* ---------- inner-page hero copy ---------- */
.rc-page-lead { color: #fff; font-size: 17px; max-width: 760px; }

/* ---------- header ---------- */
.header { z-index: 100; }
.rc-header-bar { display: flex; align-items: center; gap: 16px; }
.rc-header-bar .logo { float: none; margin: 10px auto 10px 0; flex-shrink: 0; }
.rc-header-bar .main_menu { margin: 0; }
.rc-header-bar .menu { float: none; width: auto; margin: 0; }
.rc-header-bar .right_bt { float: none; margin: 0; flex-shrink: 0; }
.rc-header-bar .right_bt .bt_main { float: none; display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; }

/* ---------- shared layout fixes ---------- */
.bt_main.rc-outline, .bt_main.rc-outline-dark, .rc-btns .bt_main { display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; }
.rc-platforms span { white-space: nowrap; }
.rc-downloads { clear: both; width: 100%; }
.rc-narrow { max-width: 760px; margin: 0 auto; padding: 40px 30px; }
.layout_padding img, .rc-footer img { max-width: 100%; height: auto; }

/* compact desktop: keep the nav on one line */
@media (min-width: 992px) and (max-width: 1199px) {
   .rc-header-bar { gap: 10px; }
   .rc-header-bar .logo img { width: 170px; }
   .rc-header-bar .menu > ul > li a { padding: 15px 6px; font-size: 14px; }
   .rc-header-bar .right_bt .bt_main { min-width: 0; padding: 0 18px; }
}

/* tablet and below: hamburger menu, stacked hero */
@media (max-width: 991px) {
   .rc-header-bar { gap: 12px; }
   .rc-header-bar .logo img { width: 180px; }
   .rc-header-bar .main_menu { order: 3; }
   .rc-header-bar .right_bt { display: block; width: auto; margin: 0; }
   .rc-header-bar .right_bt .bt_main { width: auto; min-width: 0; height: 40px; padding: 0 16px; font-size: 13px; }
   .rc-header-bar .menu-mobile { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; float: none; }
   .rc-header-bar .menu-mobile::after { left: 0; top: 0; }
   .rc-header-bar .menu-mobile[aria-expanded="true"]::after { content: "\f00d"; }
   .main_menu .clearfix { top: 100%; box-shadow: 0 12px 24px rgba(0, 0, 0, .12); max-height: calc(100vh - 80px); overflow-y: auto; }
   .main_menu .clearfix > li > a { padding: 14px 20px; }

   /* 2.png has the white diagonal baked in and gets distorted when stretched to a
      tall mobile banner, so use a white-free crop and draw the diagonal in CSS. */
   .slide_banner1 {
      min-height: 0;
      padding-bottom: 80px;
      background-image: linear-gradient(120deg, rgba(16, 208, 178, .1), rgba(30, 114, 188, .55)), url('../images/banner-mobile.jpg');
      background-size: cover;
      background-position: center top;
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%);
   }
   .rc-hero .slide_cont { padding-top: 50px; }
   .slide_pc_img { margin-bottom: 0; text-align: center; }
   .slide_pc_img img { float: none; right: auto; position: static; width: auto; max-width: 100%; margin: 30px auto 0; }

   .inner_page_banner + .layout_padding { padding-top: 50px !important; }
   .layout_padding { padding-top: 60px; padding-bottom: 60px; }
}

@media (max-width: 767px) {
   .rc-hero .slide_cont h1 { font-size: 32px; }
   .rc-hero .rc-platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
   .rc-hero .rc-platforms .fa, .rc-hero .rc-platforms .fa:first-of-type { margin: 0 5px 0 0; }
   .rc-btns { justify-content: center; }
   .rc-cta-band { padding: 45px 0; }
   .rc-cta-band h2 { font-size: 26px; }
   .rc-contact-side { padding: 40px 20px; }
   .rc-narrow { padding: 30px 0; }
   .rc-section-intro { font-size: 15px; margin-bottom: 30px; }
   .rc-card { padding: 24px 20px; }
   .rc-plan { padding: 26px 20px; }
   .about .layout_padding .center img { max-width: 220px; }
}

@media (max-width: 575px) {
   .rc-header-bar { gap: 8px; }
   .rc-header-bar .logo img { width: 140px; }
   .rc-header-bar .right_bt .bt_main { height: 38px; padding: 0 12px; font-size: 12px; }
   .rc-header-bar .menu-mobile { width: 38px; height: 38px; }
   .rc-hero .slide_cont h1 { font-size: 28px; }
   .rc-btns .bt_main { flex: 1 1 140px; padding: 0 12px; }
   .rc-tabs button { padding: 8px 16px; }
   .rc-faq summary { font-size: 15px; }
}

/* very small phones: the demo button moves out of the header bar */
@media (max-width: 359px) {
   .rc-header-bar .right_bt { display: none; }
}