/* ============================================================
   PRS Review — public redesign layer (staging)
   Gated on body.rd-page so it ONLY affects pages that opt in
   (each redesigned view sets ViewBag.BodyClass="rd-page ...").
   Restyles the shared header/footer + both the new rd-* classes
   and the legacy marketing/form/auth/legal classes, so the
   other public pages modernize with NO markup/Angular rewrites.
   ============================================================ */

:root {
  --rd-blue: #1e438a; --rd-blue-600: #1a3b7a; --rd-blue-700: #142f63; --rd-blue-900: #0e2046;
  --rd-blue-50: #eef3fb; --rd-blue-100: #dde8f7; --rd-blue-200: #c2d5ef;
  --rd-coral: #db5037; --rd-coral-600: #c5482f; --rd-coral-700: #a83c27; --rd-coral-50: #fdeee8;
  --rd-ink: #101a2c; --rd-body: #404b5c; --rd-muted: #6b7686; --rd-line: #e7ebf2;
  --rd-bg: #f5f8fd; --rd-bg2: #eaf1fb; --rd-dark: #0f1f3d;
  --rd-r-md: 14px; --rd-r-lg: 20px; --rd-r-xl: 28px; --rd-r-pill: 999px;
  --rd-sh-xs: 0 1px 2px rgba(16,26,44,.06); --rd-sh-sm: 0 6px 18px rgba(16,26,44,.07);
  --rd-sh-md: 0 16px 40px rgba(16,26,44,.10); --rd-sh-lg: 0 34px 80px rgba(16,26,44,.16);
  --rd-ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- base ---------- */
body.rd-page { font-size: 17px; line-height: 1.65; color: var(--rd-body); letter-spacing: 0 !important; background: #fff; }
body.rd-page .mnSectionDsh, body.rd-page main.mnSectionDsh, body.rd-page main { margin-top: 0 !important; }
body.rd-page .container, body.rd-page .container-fluid { max-width: 1240px; }
body.rd-page .container.inner { max-width: 1040px; }
body.rd-page .rd-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
body.rd-page p { margin: 0 0 18px; }
body.rd-page p:last-child { margin: 0; }

/* ---------- typography ---------- */
body.rd-page h2, body.rd-page h3.secTitle {
  font-size: clamp(1.8rem, 3.4vw, 2.55rem) !important; line-height: 1.14 !important; font-weight: 800 !important;
  letter-spacing: -.018em !important; color: var(--rd-ink) !important; margin: 0 0 22px !important; padding: 0 !important;
}
body.rd-page h2 b, body.rd-page h3.secTitle b { display: block; font-weight: 800; color: var(--rd-blue); font-size: .82em; margin-top: 8px; letter-spacing: -.01em; }
body.rd-page h2::after, body.rd-page h3.secTitle::after { display: none !important; }
body.rd-page h3.secTitle.center { text-align: center; }
body.rd-page h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.18; font-weight: 800; color: var(--rd-ink); letter-spacing: -.015em; margin: 0 0 16px; }
body.rd-page h4 { font-size: 1.25rem; line-height: 1.3; font-weight: 700; color: var(--rd-ink); margin: 0 0 10px; }
body.rd-page h5 { font-size: 1.05rem; font-weight: 700; color: var(--rd-ink); margin: 0 0 12px; }
body.rd-page .subTitle { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.55; color: var(--rd-muted); }
body.rd-page .rd-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rd-coral); margin: 0 0 18px; }
body.rd-page .rd-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--rd-coral); border-radius: 2px; }
body.rd-page .rd-eyebrow.center { justify-content: center; }
body.rd-page .rd-display { font-size: clamp(2.35rem, 5.2vw, 3.85rem); line-height: 1.05; font-weight: 800; letter-spacing: -.022em; color: var(--rd-ink); margin: 0 0 20px; }
body.rd-page .rd-display .ac, body.rd-page .rd-title .ac { color: var(--rd-blue); }
body.rd-page .rd-title { font-size: clamp(1.8rem, 3.4vw, 2.55rem); line-height: 1.14; font-weight: 800; letter-spacing: -.018em; color: var(--rd-ink); margin: 0; }
body.rd-page .rd-title .ac { display: block; }
body.rd-page .rd-lead { font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: var(--rd-muted); line-height: 1.6; }
body.rd-page .rd-head { max-width: 720px; }
body.rd-page .rd-head.center { margin: 0 auto 14px; text-align: center; }
body.rd-page .red { color: var(--rd-coral); }

/* ---------- buttons (legacy + new) ---------- */
body.rd-page .btn, body.rd-page .rd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 15px !important; font-weight: 700 !important; letter-spacing: .02em !important; line-height: 1;
  padding: 14px 26px !important; border-radius: var(--rd-r-pill) !important; border: 2px solid transparent;
  text-transform: none !important; cursor: pointer; transition: transform .2s var(--rd-ease), box-shadow .2s var(--rd-ease), background .2s var(--rd-ease), color .2s var(--rd-ease);
}
body.rd-page .btn svg, body.rd-page .rd-btn svg { width: 18px; height: 18px; }
body.rd-page .primaryBtn, body.rd-page .rd-btn-primary { background: var(--rd-blue) !important; color: #fff !important; border-color: var(--rd-blue) !important; box-shadow: var(--rd-sh-sm); }
body.rd-page .primaryBtn:hover, body.rd-page .primaryBtn:focus, body.rd-page .rd-btn-primary:hover { background: var(--rd-blue-700) !important; color: #fff !important; transform: translateY(-2px); box-shadow: var(--rd-sh-md); }
body.rd-page .secondaryBtn, body.rd-page .rd-btn-accent { background: var(--rd-coral) !important; color: #fff !important; border-color: var(--rd-coral) !important; box-shadow: 0 8px 22px rgba(219,80,55,.28); }
body.rd-page .secondaryBtn:hover, body.rd-page .secondaryBtn:focus, body.rd-page .rd-btn-accent:hover { background: var(--rd-coral-600) !important; color: #fff !important; transform: translateY(-2px); }
body.rd-page .rd-btn-ghost { background: transparent; color: var(--rd-blue); border-color: var(--rd-blue-200); }
body.rd-page .rd-btn-ghost:hover { background: var(--rd-blue-50); border-color: var(--rd-blue); color: var(--rd-blue); transform: translateY(-2px); }
body.rd-page .rd-btn-light { background: #fff; color: var(--rd-blue); }
body.rd-page .rd-btn-light:hover { color: var(--rd-blue); transform: translateY(-2px); box-shadow: var(--rd-sh-md); }
body.rd-page .rd-btn-lg { padding: 17px 32px !important; font-size: 16px !important; }

/* ---------- forms ---------- */
body.rd-page .form-group { margin: 0 0 18px; position: relative; }
body.rd-page .form-control {
  height: 52px; border: 1.5px solid var(--rd-line); background: #fff; padding: 0 16px;
  color: var(--rd-ink) !important; font-size: 16px; font-weight: 500;
  border-radius: var(--rd-r-md) !important; transition: border-color .2s, box-shadow .2s;
}
body.rd-page textarea.form-control { height: auto; min-height: 120px; padding: 14px 16px; }
body.rd-page .form-control:focus { background: #fff; border-color: var(--rd-blue); box-shadow: 0 0 0 4px rgba(30,67,138,.12); }
body.rd-page select.form-control { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7686' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
body.rd-page .form-group label { font-size: 14px; font-weight: 600; color: var(--rd-ink); margin: 0 0 7px; display: inline-block; }
body.rd-page .form-group .viewIcon, body.rd-page .form-group .arrowIcon { top: 50%; bottom: auto; transform: translateY(-50%); width: 38px; height: 38px; }
body.rd-page ::placeholder { color: #9aa3b2 !important; font-weight: 400 !important; }
body.rd-page .frmError .form-control, body.rd-page .form-control.ng-invalid.ng-touched { border-color: var(--rd-coral); }
body.rd-page .errorMSG { color: var(--rd-coral); font-size: 13.5px; }
body.rd-page .note p { color: var(--rd-muted); font-size: 14.5px; }

/* ---------- header (shared, restyled) ---------- */
body.rd-page header { padding: 14px 0 !important; background: rgba(245,248,253,0); box-shadow: none; transition: background .25s, box-shadow .25s, border-color .25s; border-bottom: 1px solid transparent; }
body.rd-page header.sticky { background: rgba(255,255,255,.88) !important; backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--rd-line); box-shadow: var(--rd-sh-xs) !important; }
body.rd-page header .container-fluid { max-width: 1240px; padding-left: 24px !important; padding-right: 24px !important; }
body.rd-page header .navbar-brand, body.rd-page header h1, body.rd-page header h1 a, body.rd-page header h1 img { width: auto !important; height: 46px !important; }
body.rd-page header .navbar-brand img.logoBlue { display: block; }
body.rd-page header .navbar-brand img.logoWhite { display: none; }
body.rd-page .menuWrp .links { gap: 2px; align-items: center; }
body.rd-page .menuWrp .links a, body.rd-page .menuWrp .links a.loginBtn {
  color: var(--rd-ink); background: transparent; border: 2px solid transparent; padding: 10px 14px;
  font-size: 15px; font-weight: 600; letter-spacing: 0; border-radius: var(--rd-r-pill); text-transform: none; margin: 0 2px;
}
body.rd-page .menuWrp .links a:hover, body.rd-page .menuWrp .links a.loginBtn:hover { color: var(--rd-blue); background: transparent; }
body.rd-page .menuWrp .links a.loginBtn[href="/login"] { color: var(--rd-blue); border-color: var(--rd-blue-200); padding: 10px 22px; margin-left: 8px; }
body.rd-page .menuWrp .links a.loginBtn[href="/login"]:hover { background: var(--rd-blue-50); border-color: var(--rd-blue); }
body.rd-page .menuWrp .links a.loginBtn[href="/getstarted"] { color: #fff; background: var(--rd-blue); border-color: var(--rd-blue); padding: 10px 22px; box-shadow: var(--rd-sh-sm); }
body.rd-page .menuWrp .links a.loginBtn[href="/getstarted"]:hover { background: var(--rd-blue-700); color: #fff; transform: translateY(-1px); }
body.rd-page .navbar-toggler { background: var(--rd-blue); }
body.rd-page header .offcanvas { background: var(--rd-blue); }

/* ---------- footer (shared, restyled) ---------- */
body.rd-page footer { background: var(--rd-dark) !important; margin: 96px 0 0 !important; padding: 64px 0 30px !important; }
body.rd-page footer .container-fluid { max-width: 1240px; padding-left: 24px !important; padding-right: 24px !important; }
body.rd-page footer h5 { color: #fff !important; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 16px; }
body.rd-page footer a { color: #aebbd2 !important; font-size: 14.5px; }
body.rd-page footer a:hover { color: #fff !important; }
body.rd-page footer ul li { margin: 10px 0; }
body.rd-page footer .blueDot { display: none; }
body.rd-page footer .patternImg { opacity: .06; width: 420px; }

/* ---------- sections + containers ---------- */
body.rd-page .rd-section { padding: 72px 0; }
body.rd-page .rd-section.alt, body.rd-page .AboutUsWrp, body.rd-page .PRS_PricingWrp { background: var(--rd-bg) !important; }
body.rd-page .AboutUsWrp, body.rd-page .KeyFeaturesWrp, body.rd-page .PRS_QBankWrp, body.rd-page .PRS_PricingWrp { padding: 72px 0 !important; }
@media (min-width: 992px) { body.rd-page .rd-section, body.rd-page .AboutUsWrp, body.rd-page .KeyFeaturesWrp, body.rd-page .PRS_QBankWrp, body.rd-page .PRS_PricingWrp { padding: 100px 0 !important; } }
/* inner pages (no hero): first section must clear the fixed header.
   :first-of-type (not :first-child) because qbank/oralboard render <link>/<script>
   before the first <section>, so the section is not the first child. */
body.rd-page:not(.rd-home) main > section:first-of-type { padding-top: 104px !important; }
@media (max-width: 991px) { body.rd-page:not(.rd-home) main > section:first-of-type { padding-top: 92px !important; } }

/* ---------- hero (new + legacy) ---------- */
body.rd-page .rd-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--rd-blue-50) 0%, #fff 64%); padding: 122px 0 70px; }
body.rd-page .rd-hero::before { content: ""; position: absolute; top: -200px; right: -180px; width: 600px; height: 600px; background: radial-gradient(circle at center, rgba(30,67,138,.10), transparent 68%); pointer-events: none; }
body.rd-page .rd-hero-grid { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; position: relative; }
body.rd-page .rd-hero .rd-lead { max-width: 560px; margin: 0 0 30px; }
body.rd-page .rd-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 32px; }
body.rd-page .rd-trust { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
body.rd-page .rd-trust .stars { color: #f5a623; letter-spacing: 2px; font-size: 18px; }
body.rd-page .rd-trust span.t { font-size: 14.5px; color: var(--rd-muted); }
body.rd-page .rd-trust span.t b { color: var(--rd-ink); font-weight: 700; }
body.rd-page .rd-hero-visual { position: relative; }
body.rd-page .rd-frame { position: relative; border-radius: var(--rd-r-xl); background: #fff; padding: 14px; box-shadow: var(--rd-sh-lg); border: 1px solid var(--rd-line); }
body.rd-page .rd-frame img { width: 100%; border-radius: var(--rd-r-lg); display: block; }
body.rd-page .rd-chip { position: absolute; background: #fff; border-radius: var(--rd-r-md); box-shadow: var(--rd-sh-md); border: 1px solid var(--rd-line); padding: 13px 17px; display: flex; align-items: center; gap: 12px; }
body.rd-page .rd-chip .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; }
body.rd-page .rd-chip .ic.blue { background: var(--rd-blue-50); color: var(--rd-blue); }
body.rd-page .rd-chip .ic.coral { background: var(--rd-coral-50); color: var(--rd-coral); }
body.rd-page .rd-chip .big { font-size: 19px; font-weight: 800; color: var(--rd-ink); line-height: 1.1; }
body.rd-page .rd-chip .sm { font-size: 12.5px; color: var(--rd-muted); }
body.rd-page .rd-chip.one { left: -10px; bottom: 34px; }
body.rd-page .rd-chip.two { right: -10px; top: 28px; }
@media (min-width: 992px) { body.rd-page .rd-hero { padding: 150px 0 96px; } body.rd-page .rd-hero-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; } }
/* legacy hero (.welcomeBanner) on oralboard */
body.rd-page .welcomeBanner { height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; padding: 130px 0 70px !important; background: linear-gradient(180deg, var(--rd-blue-50) 0%, #fff 70%); }
body.rd-page .welcomeBanner .centerWrp { display: block !important; }
body.rd-page .welcomeBanner .text { padding: 0 !important; }
body.rd-page .welcomeBanner .text h2 { margin-bottom: 18px; }
body.rd-page .welcomeBanner .text p { font-size: clamp(1.05rem,1.5vw,1.22rem) !important; line-height: 1.6 !important; color: var(--rd-muted) !important; }
body.rd-page .welcomeBanner .img img { border-radius: var(--rd-r-xl); box-shadow: var(--rd-sh-lg); }
body.rd-page .welcomeBanner.ourPortal { background: var(--rd-bg) !important; }

/* ---------- trust logos ---------- */
body.rd-page .LogoWrp { padding: 56px 0 !important; background: #fff !important; }
body.rd-page .LogoWrp .secTitle { font-size: 13px !important; font-weight: 700 !important; letter-spacing: .12em; text-transform: uppercase; color: var(--rd-muted) !important; text-align: center; margin: 0 0 26px !important; }
body.rd-page .slick-initialized .slick-slide { box-shadow: var(--rd-sh-xs); border: 1px solid var(--rd-line); border-radius: var(--rd-r-md); margin: 12px; padding: 18px; background: #fff; }

/* ---------- about ---------- */
body.rd-page .rd-about-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 992px) { body.rd-page .rd-about-grid { grid-template-columns: .8fr 1.2fr; gap: 64px; } }
body.rd-page .rd-about p, body.rd-page .AboutUsWrp p { font-size: 1.05rem; line-height: 1.75; color: var(--rd-body); margin: 0 0 18px; }
body.rd-page .rd-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
body.rd-page .rd-stat { background: #fff; border: 1px solid var(--rd-line); border-radius: var(--rd-r-lg); padding: 22px; box-shadow: var(--rd-sh-xs); }
body.rd-page .rd-stat .n { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; color: var(--rd-blue); letter-spacing: -.02em; line-height: 1; }
body.rd-page .rd-stat .t { font-size: 14px; color: var(--rd-muted); margin-top: 8px; }
body.rd-page .AboutUsWrp .imgText { padding: 0 !important; }
body.rd-page .AboutUsWrp img.PRS_Pattern { display: none !important; }
body.rd-page .AboutUsWrp .col-xl-9.offset-xl-3 { margin-left: 0 !important; max-width: 100% !important; flex: 0 0 100% !important; }

/* ---------- products ---------- */
body.rd-page .rd-cards2 { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 40px; }
@media (min-width: 768px) { body.rd-page .rd-cards2 { grid-template-columns: repeat(2, 1fr); } }
body.rd-page .rd-pcard { background: #fff; border: 1px solid var(--rd-line); border-radius: var(--rd-r-xl); overflow: hidden; box-shadow: var(--rd-sh-sm); transition: transform .25s var(--rd-ease), box-shadow .25s var(--rd-ease); display: flex; flex-direction: column; }
body.rd-page .rd-pcard:hover { transform: translateY(-6px); box-shadow: var(--rd-sh-lg); }
body.rd-page .rd-pcard .media { padding: 22px 22px 0; }
body.rd-page .rd-pcard .media img { width: 100%; border-radius: var(--rd-r-md); box-shadow: var(--rd-sh-sm); }
body.rd-page .rd-pcard .pc { padding: 24px 26px 28px; }
body.rd-page .rd-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rd-blue); background: var(--rd-blue-50); padding: 6px 12px; border-radius: var(--rd-r-pill); margin: 0 0 14px; }
body.rd-page .rd-tag.coral { color: var(--rd-coral); background: var(--rd-coral-50); }
body.rd-page .rd-pcard h3 { font-size: 1.5rem; font-weight: 800; color: var(--rd-ink); letter-spacing: -.015em; margin: 0 0 10px; }
body.rd-page .rd-pcard p { color: var(--rd-muted); margin: 0 0 20px; }
body.rd-page .rd-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--rd-blue); }
body.rd-page .rd-arrow:hover { gap: 12px; color: var(--rd-coral); }

/* ---------- qbank feature cards (legacy .PRS_Features) ---------- */
body.rd-page .PRS_QBankWrp .text { margin: 0 0 12px; }
body.rd-page .PRS_QBankWrp .PRS_Features { padding: 22px 90px 24px 22px !important; margin: 14px 0 !important; background: #fff !important; border: 1px solid var(--rd-line); border-radius: var(--rd-r-lg) !important; box-shadow: var(--rd-sh-xs); transition: transform .2s var(--rd-ease), box-shadow .2s var(--rd-ease); }
body.rd-page .PRS_QBankWrp .PRS_Features:hover { transform: translateY(-4px); box-shadow: var(--rd-sh-md); }
body.rd-page .PRS_QBankWrp .PRS_Features p { font-size: 1.05rem !important; font-weight: 700 !important; color: var(--rd-ink); }
body.rd-page .PRS_QBankWrp .PRS_Features img.FeaturesImg { width: 56px !important; height: 56px !important; right: 22px !important; bottom: 22px !important; opacity: .9; }

/* ---------- features / video ---------- */
body.rd-page .rd-features .videoBox, body.rd-page .KeyFeaturesWrp .videoBox { max-width: 960px; margin: 36px auto 0 !important; border-radius: var(--rd-r-xl) !important; box-shadow: var(--rd-sh-lg) !important; border: 1px solid var(--rd-line); }
body.rd-page .rd-flist { display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 960px; margin: 38px auto 0; }
@media (min-width: 768px) { body.rd-page .rd-flist { grid-template-columns: repeat(3, 1fr); } }
body.rd-page .rd-feat { display: flex; gap: 14px; align-items: flex-start; }
body.rd-page .rd-feat .fic { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--rd-blue-50); color: var(--rd-blue); display: grid; place-items: center; }
body.rd-page .rd-feat h4 { font-size: 1.05rem; font-weight: 700; color: var(--rd-ink); margin: 0 0 4px; }
body.rd-page .rd-feat p { font-size: 14.5px; color: var(--rd-muted); margin: 0; }

/* ---------- social ---------- */
body.rd-page .PRS_SocialMedia::before { display: none; }
body.rd-page .PRS_SocialMedia .centerBox { border-radius: var(--rd-r-xl) !important; box-shadow: var(--rd-sh-md) !important; border: 1px solid var(--rd-line); padding: 44px !important; }
body.rd-page .PRS_SocialMedia .secTitle { color: var(--rd-ink) !important; }
body.rd-page .socialMedia a { width: 50px !important; height: 50px !important; min-width: 50px; max-width: 50px; border-radius: 50%; background: var(--rd-blue-50); display: grid !important; place-items: center; transition: transform .2s var(--rd-ease), background .2s; margin: 0 12px 0 0 !important; }
body.rd-page .socialMedia a:hover { background: var(--rd-blue); transform: translateY(-3px); }
body.rd-page .socialMedia a img { width: 22px !important; height: 22px !important; min-width: 22px; max-width: 22px; }
body.rd-page .socialMedia a:hover img { filter: brightness(0) invert(1); }

/* ---------- pricing ---------- */
body.rd-page .PRS_PricingWrp .secTitle { text-align: center; }
body.rd-page .PRS_PricingWrp ul.nav-tabs { display: flex !important; gap: 6px; padding: 6px; background: var(--rd-bg2); border-radius: var(--rd-r-pill); margin: 24px auto 44px; width: -webkit-fit-content !important; width: fit-content !important; justify-content: center; border: none; }
body.rd-page .rd-tabs-wrap { text-align: center; }
body.rd-page .PRS_PricingWrp ul.nav-tabs li { width: auto !important; margin: 0 !important; }
body.rd-page .PRS_PricingWrp ul.nav-tabs li::before { display: none; }
body.rd-page .PRS_PricingWrp ul.nav-tabs li button.nav-link { border: none !important; background: transparent; color: var(--rd-muted); font-weight: 700; font-size: 14.5px; padding: 11px 24px !important; border-radius: var(--rd-r-pill) !important; }
body.rd-page .PRS_PricingWrp ul.nav-tabs li button.nav-link.active { background: #fff !important; color: var(--rd-blue) !important; box-shadow: var(--rd-sh-xs); }
body.rd-page .PRS_PricingWrp .tab-content { border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; }
body.rd-page .PRS_PricingWrp [class*="col-"] { margin-bottom: 24px; }
body.rd-page .plansDetails { max-width: 100% !important; margin: 0 !important; align-items: stretch; text-align: left; padding: 0 !important; background: #fff !important; border: 1px solid var(--rd-line); border-radius: var(--rd-r-xl) !important; box-shadow: var(--rd-sh-xs) !important; overflow: hidden; transition: transform .25s var(--rd-ease), box-shadow .25s var(--rd-ease); }
body.rd-page .plansDetails:hover { transform: translateY(-6px); box-shadow: var(--rd-sh-lg) !important; border-color: var(--rd-blue-100); background: #fff !important; }
body.rd-page .plansDetails .PlanPrice { margin: 0 !important; }
body.rd-page .plansDetails img.planDays { height: 116px !important; border-radius: 0 !important; }
body.rd-page .plansDetails .PlanPrice h4 { position: absolute; left: 0; top: auto !important; bottom: 0 !important; padding: 12px 22px !important; margin: 0; font-size: 24px !important; color: #fff !important; }
body.rd-page .PRS_PricingWrp .col-12:nth-child(odd) .PlanPrice h4, body.rd-page .PRS_PricingWrp .col-12:nth-child(even) .PlanPrice h4 { top: auto; bottom: 0; }
body.rd-page .plansDetails .text { padding: 24px 26px 28px; display: flex; flex-direction: column; align-items: flex-start; }
body.rd-page .plansDetails h3 { font-size: 2.3rem !important; font-weight: 800 !important; color: var(--rd-ink) !important; letter-spacing: -.02em; margin: 0 0 4px !important; }
body.rd-page .plansDetails h3 strike { font-size: 1rem; color: var(--rd-muted); opacity: .6; }
body.rd-page .plansDetails p { color: var(--rd-muted) !important; }
body.rd-page .plansDetails .buyPlan { margin: 18px 0 0 !important; width: 100%; text-align: center; background: var(--rd-blue) !important; border-radius: var(--rd-r-pill) !important; padding: 13px 22px !important; letter-spacing: .02em; font-size: 14px; }
body.rd-page .plansDetails:hover .buyPlan { background: var(--rd-blue-700) !important; }
body.rd-page .plansDetails p.Note { color: var(--rd-coral) !important; font-weight: 700; margin-top: 10px !important; }
body.rd-page .TrialPlan { border-radius: var(--rd-r-lg) !important; border: 2px solid var(--rd-blue); border-left: 8px solid var(--rd-blue); box-shadow: var(--rd-sh-xs); }

/* ---------- CTA bands ---------- */
body.rd-page .rd-cta-stack { display: grid; gap: 22px; }
body.rd-page .rd-cta { border-radius: var(--rd-r-xl); padding: 52px 32px; text-align: center; color: #fff; background: linear-gradient(135deg, var(--rd-blue) 0%, var(--rd-blue-700) 100%); }
body.rd-page .rd-cta.coral { background: linear-gradient(135deg, var(--rd-coral) 0%, var(--rd-coral-700) 100%); }
body.rd-page .rd-cta h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; margin: 0 0 14px; color: #fff; }
body.rd-page .rd-cta p { max-width: 680px; margin: 0 auto 26px; color: rgba(255,255,255,.88); font-size: 1.05rem; }
@media (min-width: 768px) { body.rd-page .rd-cta { padding: 60px 48px; } }
/* legacy .InstitutionalPricing (qbank/oralboard) -> contained gradient band */
body.rd-page .InstitutionalPricing { background: transparent !important; padding: 14px 0 !important; margin: 0 !important; }
body.rd-page .InstitutionalPricing .container.inner { background: linear-gradient(135deg, var(--rd-blue) 0%, var(--rd-blue-700) 100%); border-radius: var(--rd-r-xl); padding: 54px 40px !important; }
body.rd-page .InstitutionalPricing[style*="bba09b"] .container.inner { background: linear-gradient(135deg, var(--rd-coral) 0%, var(--rd-coral-700) 100%); }
body.rd-page .InstitutionalPricing .text { max-width: 820px; margin: 0 auto; }
body.rd-page .InstitutionalPricing h3.secTitle, body.rd-page .InstitutionalPricing h3.secTitle b, body.rd-page .InstitutionalPricing p { color: #fff !important; }
body.rd-page .InstitutionalPricing h3.secTitle { margin: 0 0 14px !important; }
body.rd-page .InstitutionalPricing h3.secTitle::after { display: none !important; }
body.rd-page .InstitutionalPricing p { max-width: 720px; margin: 0 auto 26px !important; color: rgba(255,255,255,.9) !important; font-size: 1.05rem; }
body.rd-page .InstitutionalPricing .btn.secondaryBtn { background: #fff !important; color: var(--rd-blue) !important; border-color: #fff !important; }
body.rd-page .InstitutionalPricing .btn.secondaryBtn:hover { background: #fff !important; color: var(--rd-blue-700) !important; transform: translateY(-2px); }
body.rd-page #dvMerchandise .container.inner { background: var(--rd-bg) !important; border: 1px solid var(--rd-line); }
body.rd-page #dvMerchandise h3.secTitle, body.rd-page #dvMerchandise h3.secTitle b { color: var(--rd-ink) !important; }
body.rd-page #dvMerchandise p { color: var(--rd-muted) !important; }
body.rd-page #dvMerchandise .btn.secondaryBtn { background: var(--rd-coral) !important; color: #fff !important; border-color: var(--rd-coral) !important; }
@media (min-width: 768px) { body.rd-page .InstitutionalPricing .container.inner { padding: 64px 56px !important; } }

/* ---------- auth (signup / login / reset — split panel) ---------- */
body.rd-page.signUp_Page { background: #fff; }
body.rd-page .signupWrp {
  position: relative; height: auto !important; min-height: 0;
  display: flex !important; align-items: center; padding: 92px 0 36px !important;
  background: linear-gradient(180deg, #fff 0%, var(--rd-blue-50) 100%); overflow: hidden;
}
/* left brand panel = full-bleed navy DNA art */
body.rd-page .signupWrp .img {
  position: absolute !important; left: 0; top: 0; bottom: 0; width: 46% !important; height: 100% !important;
  background: linear-gradient(165deg, #21449a 0%, #18367e 55%, #102a63 100%);
  /* MUST outrank .centerWrp (position:relative; z-index:2 in style.css), which is FULL WIDTH and
     therefore lies invisibly across this panel. style.css gives .img z-index:0, and a z-index on a
     positioned element opens a stacking context — so the rail's own z-index:2 was sealed inside a
     layer ranked 0 and every click on the plan-type tabs landed on .centerWrp's .row instead.
     Nothing inside .centerWrp reaches this far left (the form sits in .col-lg-6.offset-lg-6, whose
     left edge is past 46% at every width where this panel is visible), so raising it is safe. */
  z-index: 3;
}
body.rd-page .signupWrp .img img {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
  object-position: left center !important; border-radius: 0 !important;
}
body.rd-page .signupWrp img.footerPattern_PRS { display: none !important; }
body.rd-page .signupWrp .centerWrp { display: block !important; width: 100%; }
/* right form card */
body.rd-page .formWrp {
  background: #fff !important; padding: 44px !important; border-radius: var(--rd-r-xl);
  box-shadow: var(--rd-sh-lg); border: 1px solid var(--rd-line); max-width: 470px; margin: 0 auto;
}
body.rd-page .formWrp > h4 { font-size: 1.65rem !important; margin: 0 0 4px !important; }
body.rd-page .formWrp > p { color: var(--rd-muted); margin: 0 0 22px; }
/* tabs -> clean underline */
body.rd-page .signUpTabs { border: none !important; margin: 0 0 26px !important; gap: 28px; }
body.rd-page .signUpTabs .nav-item { margin: 0 !important; }
body.rd-page .signUpTabs .nav-item::before { display: none !important; }
body.rd-page .signUpTabs .nav-link, body.rd-page .signUpTabs .nav-link .red {
  font-size: 1.5rem !important; font-weight: 800 !important; color: #b9c2d1 !important;
  line-height: 1.2 !important; padding: 0 0 10px !important; position: relative; letter-spacing: -.01em; background: transparent !important;
}
body.rd-page .signUpTabs .nav-link.active { color: var(--rd-ink) !important; }
body.rd-page .signUpTabs .nav-link.active .red { color: var(--rd-coral) !important; }
body.rd-page .signUpTabs .nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--rd-blue); border-radius: 3px; }
/* fields + note */
body.rd-page .formWrp .form-group { margin-bottom: 16px; }
body.rd-page .tab-content form { max-width: 100%; }
body.rd-page .signupWrp .note { background: var(--rd-blue-50); border: 1px solid var(--rd-blue-100); border-radius: var(--rd-r-md); padding: 11px 14px; margin: 2px 0 16px; }
body.rd-page .signupWrp .note p { color: var(--rd-body) !important; font-size: 13.5px; margin: 0; }
/* action buttons + links */
body.rd-page .formWrp .btn { padding: 13px 24px !important; }
body.rd-page .signUpForm .col-12 > .btn.primaryBtn { width: 100%; }
body.rd-page .formWrp .ml-10 { margin-left: 10px !important; }
/* login action row: equal-width buttons side-by-side + centered forgot link */
body.rd-page .signInForm .col-md-8 { flex: 0 0 100% !important; max-width: 100% !important; display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
body.rd-page .signInForm .col-md-8 .btn { flex: 1 1 0; margin: 0 !important; }
body.rd-page .signInForm .col-md-4 { flex: 0 0 100% !important; max-width: 100% !important; text-align: center !important; }
body.rd-page .linkGroup, body.rd-page .btnsGroup { gap: 14px 26px; margin: 16px 0 0 !important; flex-wrap: wrap; align-items: center; }
body.rd-page .linkGroup a.link, body.rd-page .tab-content form .link, body.rd-page .formWrp .link {
  color: var(--rd-blue) !important; font-weight: 600 !important; text-decoration: none !important; font-size: 14.5px;
}
body.rd-page .formWrp .link:hover, body.rd-page .linkGroup a.link:hover { text-decoration: underline !important; }
/* auth single-screen: header + form + footer fit without scrolling */
body.rd-page.signUp_Page { display: flex; flex-direction: column; min-height: 100vh; }
body.rd-page.signUp_Page main { flex: 1 0 auto; display: flex; flex-direction: column; }
body.rd-page.signUp_Page .signupWrp { flex: 1 0 auto; }
body.rd-page.signUp_Page footer { margin: 0 !important; padding: 30px 0 26px !important; flex-shrink: 0; }
body.rd-page.signUp_Page footer .patternImg { width: 280px; }
/* de-dup: the header 'Contact us' repeats the footer link -> drop it on auth pages */
body.rd-page.signUp_Page header .menuWrp { display: none !important; }

/* auth brand panel: read-only pricing rail.
   Plans are shown so people can see what a subscription costs while they create an account —
   there is deliberately NO click target and no route into checkout from here. The whole block
   is rendered by ng-if, so when /Plan/GetPlans returns nothing the panel falls back to the
   plain brand artwork and the scrim below never appears over an empty column. It rides inside
   .signupWrp .img, so it disappears with that panel under 992px. */
body.rd-page .signupWrp .authPlans {
  position: absolute; inset: 0; z-index: 2; color: #fff;
  display: flex; flex-direction: column;
  /* "safe" keeps the top reachable if the content ever outgrows the panel; plain center is
     the fallback for engines that do not know the keyword. */
  justify-content: center; justify-content: safe center;
  /* The 96px top is NOT symmetric padding. inset:0 resolves against .signupWrp's PADDING box,
     so the rail starts above the 92px that section reserves for the position:fixed z-index:99
     header — and .signupWrp .img opens a z-index:0 stacking context that loses to it. Without
     this the brand wordmark paints straight through the first line of the rail on any short
     viewport (measured: 1366x768 and 1440x900 laptops both collide). */
  padding: 96px clamp(24px, 4vw, 60px) 44px; overflow: auto;
  background: linear-gradient(180deg, rgba(10,25,58,.60) 0%, rgba(10,25,58,.88) 100%);
}
body.rd-page .signupWrp .authPlans-eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #ff9d86;
}
body.rd-page .signupWrp .authPlans-eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--rd-coral); border-radius: 2px; flex: none; }
body.rd-page .signupWrp .authPlans h4 {
  font-size: clamp(1.3rem, 1.9vw, 1.7rem) !important; font-weight: 800 !important; color: #fff !important;
  line-height: 1.2 !important; letter-spacing: -.02em; margin: 0 0 20px !important;
}
body.rd-page .signupWrp .authPlans-tabs {
  display: flex; gap: 4px; margin: 0 0 14px; padding: 4px; list-style: none;
  background: rgba(255,255,255,.10); border-radius: var(--rd-r-pill);
}
body.rd-page .signupWrp .authPlans-tabs li { flex: 1 1 0; margin: 0; }
body.rd-page .signupWrp .authPlans-tabs li::before { display: none; }
body.rd-page .signupWrp .authPlans-tabs button {
  width: 100%; border: 0; background: transparent; color: rgba(255,255,255,.74);
  font-size: 12.5px; font-weight: 700; line-height: 1.2; padding: 9px 6px;
  border-radius: var(--rd-r-pill); cursor: pointer; transition: background .2s var(--rd-ease), color .2s var(--rd-ease);
}
body.rd-page .signupWrp .authPlans-tabs button:hover { color: #fff; }
body.rd-page .signupWrp .authPlans-tabs button.active { background: #fff; color: var(--rd-blue); }
body.rd-page .signupWrp .authPlans-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
body.rd-page .signupWrp .authPlans-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--rd-r-md); padding: 12px 18px;
}
body.rd-page .signupWrp .authPlans-list .nm { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.25; }
body.rd-page .signupWrp .authPlans-list .sv { display: block; font-size: 11.5px; font-weight: 600; color: #ffc2b3; margin-top: 3px; }
body.rd-page .signupWrp .authPlans-list .amt { text-align: right; white-space: nowrap; }
body.rd-page .signupWrp .authPlans-list .amt b { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
body.rd-page .signupWrp .authPlans-list .amt s { display: block; font-size: 12.5px; color: rgba(255,255,255,.55); }
body.rd-page .signupWrp .authPlans-note { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.62) !important; margin: 18px 0 0 !important; }
/* short laptops: the auth page is a no-scroll single screen, so tighten rather than clip */
/* Short laptops (1366x768, 1440x900): the auth page is a deliberate no-scroll single screen and
   the top padding still has to clear the header, so claw the space back from the gaps instead.
   Tuned against the worst case — 4 plan rows PLUS the 3-tab strip at 768px tall. */
@media (max-height: 780px) {
  body.rd-page .signupWrp .authPlans { padding: 88px clamp(20px, 3.4vw, 44px) 20px; }
  body.rd-page .signupWrp .authPlans-eyebrow { margin: 0 0 9px; }
  body.rd-page .signupWrp .authPlans h4 { margin: 0 0 10px !important; }
  body.rd-page .signupWrp .authPlans-tabs { margin: 0 0 10px; }
  body.rd-page .signupWrp .authPlans-list { gap: 7px; }
  body.rd-page .signupWrp .authPlans-list li { padding: 8px 15px; }
  body.rd-page .signupWrp .authPlans-list .amt b { font-size: 18px; }
  body.rd-page .signupWrp .authPlans-note { margin-top: 10px !important; }
}
/* Maximised browser on a 768px laptop leaves ~625px of viewport — the tightest real case.
   Drop the heading to a single line rather than let a scrollbar appear over the artwork. */
@media (max-height: 720px) {
  body.rd-page .signupWrp .authPlans { padding-bottom: 14px; }
  body.rd-page .signupWrp .authPlans h4 { font-size: 1.12rem !important; }
  body.rd-page .signupWrp .authPlans-note { font-size: 11.5px; margin-top: 8px !important; }
}

/* ---------- legal prose ---------- */
body.rd-page .PriviacyPolicyPageWrp { background: #fff !important; padding: 110px 0 60px !important; }
body.rd-page .PriviacyPolicy { max-width: 860px; margin: 0 auto; }
body.rd-page .PriviacyPolicy h1 { font-size: clamp(2rem,3.4vw,2.6rem) !important; font-weight: 800 !important; color: var(--rd-ink) !important; letter-spacing: -.02em; margin: 0 0 24px !important; }
body.rd-page .PriviacyPolicy h2 { font-size: 1.5rem !important; font-weight: 800 !important; color: var(--rd-ink) !important; margin: 36px 0 12px !important; }
body.rd-page .PriviacyPolicy h3, body.rd-page .PriviacyPolicy h4, body.rd-page .PriviacyPolicy h5 { font-size: 1.15rem !important; font-weight: 700 !important; color: var(--rd-ink) !important; margin: 24px 0 10px !important; line-height: 1.35 !important; }
body.rd-page .PriviacyPolicy p, body.rd-page .PriviacyPolicy li { font-size: 1.02rem; line-height: 1.75; color: var(--rd-body); margin: 0 0 14px; }
body.rd-page .PriviacyPolicy a { color: var(--rd-blue); text-decoration: underline; }

/* ---------- merch ---------- */
body.rd-page #dvMerchandise .slick-slide { padding: 8px; }
body.rd-page #dvMerchandise .slick-slide img { border: 1px solid var(--rd-line) !important; border-radius: var(--rd-r-md); }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  body.rd-page .rd-stats { grid-template-columns: repeat(2, 1fr); }
  body.rd-page .signupWrp .img { display: none !important; }
  body.rd-page .formWrp { margin: 0 auto !important; }
  body.rd-page .signupWrp .centerWrp .col-lg-6.offset-lg-6 { margin-left: 0 !important; }
}
@media (max-width: 767px) {
  body.rd-page .rd-section, body.rd-page .AboutUsWrp, body.rd-page .KeyFeaturesWrp, body.rd-page .PRS_QBankWrp, body.rd-page .PRS_PricingWrp { padding: 56px 0 !important; }
  body.rd-page .rd-hero { padding: 104px 0 56px; }
  body.rd-page .formWrp { padding: 26px 20px !important; }
  body.rd-page .rd-cta, body.rd-page .InstitutionalPricing { padding: 40px 22px !important; }
  body.rd-page .PRS_QBankWrp .PRS_Features { padding: 18px 80px 20px 18px !important; }
}
@media (max-width: 575px) {
  body.rd-page .rd-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  /* (header link-row hide moved to style.css's 991px block — one threshold with the hamburger) */
  /* pricing plan-type switcher: the fixed-padding inline pill wraps into a broken
     two-row blob with 3 tabs on phones -> full-width segmented tabs */
  body.rd-page .PRS_PricingWrp ul.nav-tabs { display: flex !important; width: 100% !important; }
  body.rd-page .PRS_PricingWrp ul.nav-tabs li { flex: 1 1 auto; }
  body.rd-page .PRS_PricingWrp ul.nav-tabs li button.nav-link { width: 100%; padding: 10px 8px !important; font-size: 13px; }
  /* social card: fixed 50px icons + 44px card padding overflow the rounded card on small phones */
  body.rd-page .PRS_SocialMedia .centerBox { padding: 24px 20px !important; }
  body.rd-page .PRS_SocialMedia .socialMedia { flex-wrap: wrap; row-gap: 10px; }
}

/* ---------- fix round 2: auth header logo + select arrow ---------- */
/* legacy double-arrow image on selects -> hide, keep the clean chevron */
body.rd-page .form-group .arrowIcon { display: none !important; }
/* auth (signup split): logo sits over the blue panel -> white logo */
body.rd-page.signUp_Page header .navbar-brand img.logoWhite { display: block !important; }
body.rd-page.signUp_Page header .navbar-brand img.logoBlue { display: none !important; }
body.rd-page.signUp_Page header.sticky .navbar-brand img.logoWhite { display: none !important; }
body.rd-page.signUp_Page header.sticky .navbar-brand img.logoBlue { display: block !important; }
/* auth on mobile: blue panel is hidden -> switch logo back to blue on light bg */
@media (max-width: 991px) {
  body.rd-page.signUp_Page header .navbar-brand img.logoWhite { display: none !important; }
  body.rd-page.signUp_Page header .navbar-brand img.logoBlue { display: block !important; }
}
/* contact 'Choose image' upload button -> on-brand neutral */
body.rd-page .btn.btn-success { background: var(--rd-blue-50) !important; color: var(--rd-blue) !important; border-color: var(--rd-blue-200) !important; box-shadow: none; }
body.rd-page .btn.btn-success:hover { background: var(--rd-blue-100) !important; color: var(--rd-blue) !important; }

/* ============================================================
   PUBLIC CHECKOUT FLOW (Plan/Checkout, Plan/Thankyou) — responsive reflow.
   These use the public _Layout and were DELIBERATELY kept off the rd-page
   redesign, so this is a SCOPED net that targets only the checkout-specific
   classes (which appear on no other page). Reflow only — no rd-page restyle,
   no control moved. (Full visual modernisation = opting these into rd-page,
   which reverses that deliberate exclusion on live payment pages — left as an
   explicit decision, not done here.)
   ============================================================ */
/* .selectedPlanBox has a fixed height (266px base / 242px <=1599px) that clips
   the Discount + Final Cart Value rows once a promo is applied -> loosen it. */
.selectedPlanWrp .selectedPlanBox { height: auto; min-height: 242px; }
@media (max-width: 575px) {
    /* the Checkout button + 'Back to Dashboard' link row never stacks -> wrap it */
    .col-12.text-center.d-flex.justify-content-center { flex-wrap: wrap; row-gap: 10px; }
    /* trim the heavy 100px thank-you margins on phones */
    .ThankyouWrp { margin: 50px 0; }
    .ThankyouWrp .primaryBtn { margin: 30px 0 0; }
}

/* ============================================================
   RESPONSIVE AUDIT FIX (2026-07) — Contact form. Gated body.rd-page.
   The "Choose Image" (col-7) / Cloudflare Turnstile (col-5) row uses plain
   col-* (no breakpoint infix) so it never stacks; the Turnstile iframe is a
   fixed ~300px, so once col-5 drops below 300px (<=767px) the widget overflows
   its column and forces horizontal page scroll. Stack the pair + clamp the widget.
   ============================================================ */
@media (max-width: 767px) {
    body.rd-page .InstitutionalPricingForm form .row > .col-7,
    body.rd-page .InstitutionalPricingForm form .row > .col-5 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
    /* broadened from .col-5[turnstile-widget]: also covers the Scholarship page's col-12
       variant, and margin-top:0 neutralises its inline -30px pull-up (overlapped the
       word-count label) — no-op on the Contact page which has no inline margin */
    body.rd-page .InstitutionalPricingForm [turnstile-widget] { text-align: left !important; margin-top: 0 !important; overflow-x: auto; }
    body.rd-page .InstitutionalPricingForm [turnstile-widget] iframe { max-width: 100%; }
}

/* ============================================================
   PUBLIC CHECKOUT + THANK-YOU — visual modernisation (2026-07-04).
   Plan/Checkout + Plan/Thankyou opted into rd-page (BodyClass) so header/footer/
   type/buttons/form-controls now match the site. This block re-skins the
   payment-specific pieces (outer card, plan box, saved-card, discount box, CTA,
   Stripe field, thank-you) to the modern system. SKIN ONLY — no layout/flow/JS
   moved; higher-specificity body.rd-page beats the views' inline <style>. Gated.
   ============================================================ */
body.rd-page .checkoutBanner { padding: 40px 0 80px; background: var(--rd-bg); }
body.rd-page .checkoutBanner p { margin: 0; }
/* outer container: dated red 50px-radius ring -> clean white card */
body.rd-page .selectedPlanWrp .planDetails {
    padding: 44px 40px; border: 1px solid var(--rd-line); border-radius: var(--rd-r-xl);
    background: #fff; box-shadow: var(--rd-sh-md); margin: 8px auto; max-width: 980px;
}
body.rd-page .selectedPlanWrp .planDetails > h5 {
    position: static; left: auto; top: auto; background: transparent; padding: 0;
    font-size: 1.15rem; color: var(--rd-ink); margin: 0 0 26px; text-align: center;
}
/* discount/promo box -> navy-tint card (was a green 2px ring via inline <style>) */
body.rd-page .DiscountOffer {
    border: 1px solid var(--rd-blue-100) !important; background: var(--rd-blue-50);
    border-radius: var(--rd-r-lg) !important; padding: 18px 22px !important;
}
body.rd-page .DiscountOffer > h4 { color: var(--rd-blue); font-weight: 800; }
body.rd-page .promo-success { color: #1c7c4a !important; font-weight: 600; }
/* selected-plan summary -> clean tinted card (was pink #ffeeeb / red ring) */
body.rd-page .selectedPlanBox {
    border: 1px solid var(--rd-line); background: var(--rd-blue-50);
    border-radius: var(--rd-r-lg); box-shadow: var(--rd-sh-sm); padding: 22px 26px;
}
body.rd-page .selectedPlanBox .d-flex h4 { font-size: 1.35rem; color: var(--rd-ink); }
body.rd-page .selectedPlanBox p, body.rd-page .selectedPlanBox span { color: var(--rd-muted); }
body.rd-page .selectedPlanBox .dc-applied h4 { color: var(--rd-coral); }
/* saved-card visual -> softened (keep the credit-card graphic) */
body.rd-page .card-details { border-radius: var(--rd-r-lg); box-shadow: var(--rd-sh-sm); }
body.rd-page .card-details.selected { border-color: var(--rd-blue); }
/* Stripe card field: rd-page .form-control gives 52px height; centre the injected iframe */
body.rd-page #card-element { display: flex; flex-direction: column; justify-content: center; }
/* the "Checkout" CTA (was green) -> coral pill so it stands out from navy 2nd-actions */
body.rd-page .checkoutBtn {
    background: var(--rd-coral) !important; color: #fff !important;
    border-color: var(--rd-coral) !important; letter-spacing: 0 !important;
    text-transform: none !important; box-shadow: 0 8px 22px rgba(219,80,55,.28);
}
body.rd-page .checkoutBtn:hover, body.rd-page .checkoutBtn:focus {
    background: var(--rd-coral-600) !important; color: #fff !important; transform: translateY(-2px);
}
/* recurring-charge note -> muted (was red italic via inline <style>) */
body.rd-page .warnMsg, body.rd-page .warnMsg small { color: var(--rd-muted) !important; font-style: normal; font-size: 14px; }
/* ---- Thank-you page ---- */
body.rd-page .ThankyouWrp { text-align: center; }
body.rd-page .ThankyouWrp .container {
    max-width: 640px; background: #fff; border: 1px solid var(--rd-line);
    border-radius: var(--rd-r-xl); box-shadow: var(--rd-sh-md); padding: 56px 40px;
}
body.rd-page .ThankyouWrp img { margin: 0 0 24px; max-width: 220px; }
body.rd-page .ThankyouWrp h4 { font-size: 1.5rem; color: var(--rd-ink); }
body.rd-page .ThankyouWrp p { color: var(--rd-muted); margin: 0 0 8px; }

/* ============================================================
   RESPONSIVE AUDIT FIXES (2026-07-10) — public/marketing pages.
   Every rule below is phone/tablet-gated (max-width media query)
   or interaction/no-op-gated, so desktop >=992px is unchanged.
   ============================================================ */

/* ---- floating share widget: the flyout opened only via CSS :hover, which has no
   reliable touch equivalent. `.open` is toggled by the shareBtn click handler in
   _Layout.cshtml; the :hover rule in style.css is kept for desktop. ---- */
.shareWidget.open .socialMedia { bottom: 0; opacity: 1; pointer-events: auto; }

/* ---- auth (Login / GetStarted / Reset + signup modal) ---- */
/* legacy <=991px rule centers .tab-content form -> inputs/placeholders/notes render
   centered on phones; explicit left is a no-op at desktop (nothing centers there) */
body.rd-page .tab-content form { text-align: left; }
/* legacy <=991px rule fades inactive nav-tab links to 50% -> the tappable 'Login'
   tab is nearly invisible; no-op at desktop (base has no opacity). The same legacy
   rule also fades the nested .red span (opacity multiplies), so reset it too or the
   inactive 'Sign<span class=red>Up</span>' label renders two-tone */
body.rd-page .signUpTabs .nav-link { opacity: 1 !important; }
body.rd-page .signUpTabs .nav-link .red { opacity: 1 !important; }
@media (max-width: 991px) {
  /* password eye icon (.viewIcon, 38px) overlays the input's right edge -> reserve room */
  body.rd-page .form-group:has(.viewIcon) .form-control { padding-right: 52px; }
  /* OTP step: 'Verify' goes full-width but the sibling 'Back' stays inline with a
     stray 10px indent -> make the stacked pair consistent */
  body.rd-page .signUpForm .col-12 > .btn { width: 100%; }
  body.rd-page .signUpForm .col-12 > .btn.ml-10 { margin: 12px 0 0 !important; }
}
@media (max-width: 575px) {
  /* login action row: flex-basis 0 defeats flex-wrap, cramming both CTAs
     side-by-side with wrapped labels -> stack them full-width
     (flex reset to auto: a 0 basis would collapse heights in column direction) */
  body.rd-page .signInForm .col-md-8 { flex-direction: column; }
  body.rd-page .signInForm .col-md-8 .btn { flex: 0 0 auto; width: 100%; }
}

/* ---- signup/login modal (uibModal): the global 100px dialog margin + the
   fixed-header compensation padding (92px, pointless inside a modal) stack into
   ~200px of dead space on phones ---- */
@media (max-width: 575px) {
  .modal-dialog { margin: 10px auto; }
  /* 56px only clears the absolute .singupModalHeader once the header is shrunk too:
     10px top pad + 56px-wide logo (205x148 svg -> ~40px tall) ends ~50px < 56px */
  body.rd-page .modal .signupWrp { padding-top: 56px !important; }
  body.rd-page .modal .singupModalHeader { padding: 10px 16px; }
  body.rd-page .modal .singupModalHeader img.ModalLogo { width: 56px; }
}

/* ---- qbank / oralboard ---- */
@media (max-width: 991px) {
  /* Highlights intro: legacy 23px size is missing from every responsive font list */
  body.rd-page .PRS_QBankWrp .text p { font-size: 1.05rem; line-height: 1.6; }
}
@media (max-width: 575px) {
  /* CTA gradient band: 54px/40px inner padding never reduced for phones
     (outer section already drops to 22px sides in the 767px block above) */
  body.rd-page .InstitutionalPricing .container.inner { padding: 36px 22px !important; }
}

/* ---- home merch carousel: inline width:200px scrub-cap imgs vs fluid slick slides.
   Overridden (not removed) so the >=900px 3-up desktop mode is untouched;
   slick's 2-up/1-up modes live below its 900px config breakpoint. ---- */
@media (max-width: 899px) {
  body.rd-page #dvMerchandise .slick-slide img { width: 100% !important; max-width: 220px; height: auto !important; margin: auto; }
}

/* ---- legal prose (privacy + terms share .PriviacyPolicy): uncontrolled CMS HTML —
   break long URLs/emails and let pasted tables scroll instead of overflowing ---- */
@media (max-width: 767px) {
  body.rd-page .PriviacyPolicy { overflow-wrap: break-word; }
  body.rd-page .PriviacyPolicy table { display: block; max-width: 100%; overflow-x: auto; }
}

/* ---- checkout (extends the CHECKOUT + THANK-YOU skin block above) ---- */
@media (max-width: 575px) {
  /* 44px/40px card padding + 18px/22px discount padding leave ~200px of content width on a 375px phone */
  body.rd-page .selectedPlanWrp .planDetails { padding: 24px 14px; }
  body.rd-page .DiscountOffer { padding: 14px !important; }
  /* promo input + Apply button: no-wrap inline flex row squeezes the input to ~110px -> let it wrap */
  body.rd-page .DiscountOffer .AddNewCard .form-group { flex-wrap: wrap; gap: 8px; }
  body.rd-page .DiscountOffer .AddNewCard .form-group .btn { margin: 0 !important; }
  body.rd-page .DiscountOffer .form-control { min-width: 0; flex: 1 1 160px; }
  /* plan-summary rows: inline -20px/-5px pull-ups (desktop tightening) collide once
     'Final Cart Value' wraps -> restore the stylesheet's 5px spacing on phones */
  body.rd-page .selectedPlanBox .d-flex.dc-applied { margin: 5px 0 !important; }
}