/* video css for the founding partner page starts */
.bcloud-video {
    width: 100%;
    aspect-ratio: 16 / 7;
    border: 10px solid #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

.bcloud-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    
    transform: translate(-50%, -50%);
    border: 0;
    display: block;
}

/* TABLET */
@media (max-width: 1024px) {
    .bcloud-video {
        height: 380px !important;
        border-width: 8px !important;
        margin-bottom: 30px !important;
    }
}


/* MOBILE */
@media (max-width: 767px) {
    .bcloud-video {
        width: 100% !important;
        height: 230px !important;
        min-height: 230px !important;
        max-height: 230px !important;
        border: 6px solid #fff !important;
        border-radius: 12px !important;
        margin: 0 0 40px 0 !important;
        padding: 0 !important;
        position: relative !important;
        display: block !important;
        z-index: 999 !important;
        clear: both !important;
    }

    .bcloud-video iframe {
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }
}
/* video css for the founding partner page ends here */

/* =========================================================
   BCLOUD AI — FOUNDING PARTNER TIMELINE
   WordPress Production CSS
   ========================================================= */

.bcloud-timeline {
    --bt-card: #ffffff;

    --bt-text: #1e211d;
    --bt-muted: #686b65;

    --bt-border: #e4dfd6;

    --bt-orange: #e47732;
    --bt-orange-dark: #b9531b;
    --bt-orange-light: #fff0e5;

    --bt-line: #dedbd3;

    width: 100%;
    padding: 105px 24px 135px;

    background: var(--bt-bg);
    color: var(--bt-text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.bcloud-timeline__container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.bcloud-timeline__header {
    max-width: 720px;
    margin: 0 auto 105px;
    text-align: center;
}

.bcloud-timeline__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 22px;
    padding: 8px 15px;

    background: var(--bt-orange-light);
    color: var(--bt-orange-dark);

    border-radius: 999px;

    font-size: 11px;
    line-height: 1;
    font-weight: 800;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.bcloud-timeline__eyebrow-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;
    background: var(--bt-orange);
}


.bcloud-timeline__header h2 {
    margin: 0 0 23px;

    color: var(--bt-text);

    font-size: clamp(42px, 5vw, 66px);
    line-height: 1;

    letter-spacing: -0.055em;

    font-weight: 750;
}


.bcloud-timeline__header p {
    max-width: 610px;

    margin: 0 auto;

    color: var(--bt-muted);

    font-size: 16px;
    line-height: 1.75;

    font-weight: 400;
}


/* =========================================================
   TIMELINE TRACK
   ========================================================= */

.bcloud-timeline__track {
    position: relative;

    width: 100%;

    padding: 5px 0;
}


/* =========================================================
   BASE TIMELINE
   ========================================================= */

.bcloud-timeline__track::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 2px;

    transform: translateX(-50%);

    background: var(--bt-line);

    border-radius: 20px;
}


/* =========================================================
   ORANGE SCROLL PROGRESS
   ========================================================= */

.bcloud-timeline__progress {
    position: absolute;

    top: 0;
    left: 50%;

    width: 3px;
    height: 0;

    transform: translateX(-50%);

    background: var(--bt-orange);

    border-radius: 20px;

    z-index: 2;

    pointer-events: none;

    will-change: height;
}


/* =========================================================
   TIMELINE ITEMS
   ========================================================= */

.bcloud-timeline__item {
    position: relative;

    width: 100%;

    display: flex;

    margin-bottom: 82px;
}

.bcloud-timeline__item:last-child {
    margin-bottom: 0;
}


/* LEFT */

.bcloud-timeline__item--left {
    justify-content: flex-start;

    padding-right: calc(50% + 55px);
}


/* RIGHT */

.bcloud-timeline__item--right {
    justify-content: flex-end;

    padding-left: calc(50% + 55px);
}


/* =========================================================
   CARD
   ========================================================= */

.bcloud-timeline__card {
    position: relative;

    width: 100%;

    padding: 34px 36px 36px;

    background: var(--bt-card);

    border: 1px solid var(--bt-border);

    border-radius: 22px;

    box-shadow:
        0 18px 50px rgba(31, 33, 29, 0.08);

    opacity: 0;

    transition:
        opacity 0.75s ease,
        transform 0.8s cubic-bezier(.22, 1, .36, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


/* LEFT entrance */

.bcloud-timeline__item--left
.bcloud-timeline__card {
    transform: translate3d(-45px, 0, 0);
}


/* RIGHT entrance */

.bcloud-timeline__item--right
.bcloud-timeline__card {
    transform: translate3d(45px, 0, 0);
}


/* Visible */

.bcloud-timeline__item.is-visible
.bcloud-timeline__card {
    opacity: 1;

    transform:
        translate3d(0, 0, 0);
}


/* =========================================================
   CARD HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .bcloud-timeline__card:hover {
        border-color:
            rgba(228, 119, 50, 0.32);

        box-shadow:
            0 25px 65px rgba(31, 33, 29, 0.12);

        transform:
            translate3d(0, -5px, 0);
    }
}


/* =========================================================
   WEEK LABEL
   ========================================================= */

.bcloud-timeline__week {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 17px;

    color: var(--bt-orange-dark);

    font-size: 12px;
    line-height: 1.2;

    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}

.bcloud-timeline__week::before {
    content: "";

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: var(--bt-orange);
}


/* =========================================================
   WEEK 2 ONLY
   ONLY THIS LABEL IS LARGER
   ========================================================= */

.bcloud-timeline__item[data-week="2"]
.bcloud-timeline__week {

    font-size: 12px;

    letter-spacing: 0.105em;

    gap: 10px;
}

.bcloud-timeline__item[data-week="2"]
.bcloud-timeline__week::before {

    width: 8px;
    height: 8px;

    flex-basis: 8px;
}


/* =========================================================
   CARD HEADING
   ========================================================= */

.bcloud-timeline__card h3 {
    margin: 0 0 14px;

    color: var(--bt-text);

    font-size: 25px;
    line-height: 1.18;

    letter-spacing: -0.025em;

    font-weight: 700;
}


/* =========================================================
   CARD DESCRIPTION
   ========================================================= */

.bcloud-timeline__card p {
    margin: 0;

    color: var(--bt-muted);

    font-size: 15.5px;
    line-height: 1.75;

    font-weight: 400;
}


/* =========================================================
   CENTER NODE
   ========================================================= */

.bcloud-timeline__node {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 17px;
    height: 17px;

    transform:
        translate(-50%, -50%);

    background: var(--bt-bg);

    border: 3px solid var(--bt-orange);

    border-radius: 50%;

    z-index: 5;

    transition:
        background 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}


/* Active node */

.bcloud-timeline__item.is-visible
.bcloud-timeline__node {

    background: var(--bt-orange);

    box-shadow:
        0 0 0 6px rgba(228, 119, 50, 0.13),
        0 0 0 12px rgba(228, 119, 50, 0.05);

    transform:
        translate(-50%, -50%)
        scale(1.08);
}


/* =========================================================
   LAST CARD
   ========================================================= */

.bcloud-timeline__item:last-child
.bcloud-timeline__card {

    border-color:
        rgba(228, 119, 50, 0.25);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .bcloud-timeline {
        padding: 80px 18px 100px;
    }

    .bcloud-timeline__header {
        margin-bottom: 70px;
    }

    .bcloud-timeline__header h2 {
        font-size: 44px;
    }

    .bcloud-timeline__header p {
        font-size: 15px;
    }


    /* Move timeline to left */

    .bcloud-timeline__track::before {
        left: 17px;
        transform: none;
    }

    .bcloud-timeline__progress {
        left: 17px;
        transform: none;
    }


    /* Cards */

    .bcloud-timeline__item,
    .bcloud-timeline__item--left,
    .bcloud-timeline__item--right {

        justify-content: flex-start;

        padding-left: 52px;
        padding-right: 0;

        margin-bottom: 48px;
    }


    /* Nodes */

    .bcloud-timeline__node {
        left: 17px;
        top: 42px;
    }


    /* Mobile card animation */

    .bcloud-timeline__item--left
    .bcloud-timeline__card,

    .bcloud-timeline__item--right
    .bcloud-timeline__card {

        transform:
            translate3d(0, 35px, 0);
    }

    .bcloud-timeline__item.is-visible
    .bcloud-timeline__card {

        transform:
            translate3d(0, 0, 0);
    }


    .bcloud-timeline__card {
        padding: 28px 25px 29px;

        border-radius: 20px;
    }


    .bcloud-timeline__card h3 {
        font-size: 22px;
    }

    .bcloud-timeline__card p {
        font-size: 14.5px;
    }


    /* Week 2 remains slightly larger */

    .bcloud-timeline__item[data-week="2"]
    .bcloud-timeline__week {

        font-size: 16px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .bcloud-timeline {
        padding-left: 14px;
        padding-right: 14px;
    }

    .bcloud-timeline__header h2 {
        font-size: 37px;
    }


    .bcloud-timeline__item,
    .bcloud-timeline__item--left,
    .bcloud-timeline__item--right {

        padding-left: 42px;
    }


    .bcloud-timeline__track::before,
    .bcloud-timeline__progress {

        left: 13px;
    }


    .bcloud-timeline__node {
        left: 13px;
    }


    .bcloud-timeline__card {
        padding: 24px 21px 26px;
    }


    .bcloud-timeline__card h3 {
        font-size: 21px;
    }


    .bcloud-timeline__item[data-week="2"]
    .bcloud-timeline__week {

        font-size: 15px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .bcloud-timeline__card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .bcloud-timeline__node {
        transition: none !important;
    }

    .bcloud-timeline__progress {
        transition: none !important;
    }
}


/* ===== blogs grader page starts here===== */

/* ---------- Variables: declared on BOTH the id and the class ---------- */
#bcblog-app,
.bcblog-grader {
  --bcblog-brand: #0073aa;
  --bcblog-violet: #8b5cf6;
  --bcblog-cyan: #0891b2;
  --bcblog-green: #10b981;
  --bcblog-amber: #f59e0b;
  --bcblog-rose: #e11d48;
  --bcblog-ink: #111111;
  --bcblog-body: #333333;
  --bcblog-muted: #555555;
  --bcblog-border: #e2e8f0;
  --bcblog-surface: #f8f9fb;
  --bcblog-tint: #f0f9ff;
  --bcblog-gradient: linear-gradient(135deg, #0073aa 0%, #8b5cf6 100%);
  --bcblog-shadow: 0 4px 20px rgba(0, 0, 0, .07);
}

#bcblog-app {
  width: 100%;
  color: var(--bcblog-body, #333333) !important;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
  font-size: 16px;
  line-height: 1.7 !important;
  box-sizing: border-box;
  text-align: left;
}

#bcblog-app *,
#bcblog-app *::before,
#bcblog-app *::after {
  box-sizing: border-box;
}

/* =========================================================
   RESET (against theme defaults)
   ========================================================= */
#bcblog-app h1,
#bcblog-app h2,
#bcblog-app h3,
#bcblog-app h4,
#bcblog-app p {
  margin-top: 0 !important;
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal;
}

#bcblog-app button,
#bcblog-app input,
#bcblog-app select {
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  min-width: 0;
}

#bcblog-app button {
  margin: 0;
  width: auto;
  text-shadow: none !important;
}

#bcblog-app a {
  text-decoration: none;
  box-shadow: none;
}

#bcblog-app svg {
  max-width: none;
  height: auto;
  vertical-align: baseline;
}

/* =========================================================
   CONTAINER
   ========================================================= */
#bcblog-app .bcblog-container {
  width: 100%;
  max-width: 1270px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* =========================================================
   SCREENS
   ========================================================= */
#bcblog-app .bcblog-screen {
  display: none !important;
}

#bcblog-app .bcblog-screen.bcblog-screen-active {
  display: block !important;
  padding: 15px;
  animation: bcblogFade .35s ease both;
}

@keyframes bcblogFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   BUTTONS
   ========================================================= */
#bcblog-app .bcblog-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-height: 48px;
  padding: 13px 28px !important;
  border: 0 !important;
  border-radius: 9px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

#bcblog-app .bcblog-btn:hover {
  transform: translateY(-2px);
}

#bcblog-app .bcblog-btn:focus-visible {
  outline: 3px solid rgba(0, 115, 170, .25);
  outline-offset: 3px;
}

#bcblog-app .bcblog-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

/* Gradient button — background forced so theme button styles can't win */
#bcblog-app .bcblog-btn-gradient {
  background-color: #0073aa !important;
  background-image: var(--bcblog-gradient, linear-gradient(135deg, #0073aa 0%, #8b5cf6 100%)) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(0, 115, 170, .18);
}

#bcblog-app .bcblog-btn-gradient:hover {
  background-image: var(--bcblog-gradient, linear-gradient(135deg, #0073aa 0%, #8b5cf6 100%)) !important;
  box-shadow: 0 12px 28px rgba(0, 115, 170, .25);
}

/* Primary */
#bcblog-app .bcblog-btn-primary {
  background-color: var(--bcblog-brand, #0073aa) !important;
  background-image: none !important;
  color: #ffffff !important;
}

#bcblog-app .bcblog-btn-primary:hover {
  background-color: var(--bcblog-brand, #0073aa) !important;
  box-shadow: 0 8px 20px rgba(0, 115, 170, .2);
}

/* =========================================================
   LANDING
   ========================================================= */
#bcblog-app .bcblog-hero {
  padding: 35px 0;
}

#bcblog-app .bcblog-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  padding: 30px;
  background: linear-gradient(135deg, #f8f9fb 0%, #ffffff 100%);
  border: 1px solid var(--bcblog-border, #e2e8f0);
  border-radius: 18px;
  box-shadow: var(--bcblog-shadow, 0 4px 20px rgba(0, 0, 0, .07));
}

#bcblog-app .bcblog-eyebrow {
  margin-bottom: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--bcblog-brand, #0073aa) !important;
}

/* Center eyebrow */
#bcsg-app .bcsg-eyebrow{
  display:flex !important;
  width:max-content !important;
  max-width:100% !important;
  margin:0 auto 25px !important;
  text-align:center !important;
  align-items:center !important;
}


/* Center Start the quiz button */
#bcsg-app .bcsg-btn{
  display:flex !important;
  width:max-content !important;
  max-width:100% !important;
  text-align:center !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Center "No signup needed..." */
#bcsg-app .bcsg-hero-note{
  width:100% !important;
  margin:0 auto !important;
  text-align:center !important;
}

#bcblog-app .bcblog-hero h2 {
  margin-bottom: 10px !important;
  font-size: 30px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: var(--bcblog-ink, #111111) !important;
}

#bcblog-app .bcblog-lead {
  margin-bottom: 10px !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--bcblog-body, #333333) !important;
}

#bcblog-app .bcblog-lead strong {
  color: var(--bcblog-ink, #111111) !important;
  font-weight: 700;
}

#bcblog-app .bcblog-description {
  margin-bottom: 10px !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--bcblog-muted, #555555) !important;
}

/* =========================================================
   SCORE PREVIEW
   ========================================================= */
#bcblog-app .bcblog-score-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

#bcblog-app .bcblog-score-circle {
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #0073aa !important;
  background-image: var(--bcblog-gradient, linear-gradient(135deg, #0073aa 0%, #8b5cf6 100%)) !important;
  box-shadow: 0 14px 35px rgba(139, 92, 246, .22);
}

#bcblog-app .bcblog-score-circle-inner {
  text-align: center;
  color: #ffffff !important;
}

#bcblog-app .bcblog-score-number {
  display: flex;
  font-size: 52px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #ffffff !important;
}

#bcblog-app .bcblog-score-label {
  display: block;
  margin-top: 7px;
  font-size: 13px !important;
  letter-spacing: .04em;
  color: #ffffff !important;
  opacity: .92;
}

#bcblog-app .bcblog-mini-stats {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#bcblog-app .bcblog-mini-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid var(--bcblog-border, #e2e8f0);
  border-left: 4px solid var(--bcblog-brand, #0073aa);
  border-radius: 0 10px 10px 0;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--bcblog-muted, #555555) !important;
}

#bcblog-app .bcblog-mini-stat:nth-child(2) {
  border-left-color: var(--bcblog-violet, #8b5cf6);
}

#bcblog-app .bcblog-mini-stat:nth-child(3) {
  border-left-color: var(--bcblog-cyan, #0891b2);
}

#bcblog-app .bcblog-mini-stat strong {
  color: var(--bcblog-ink, #111111) !important;
  font-size: 16px !important;
  font-weight: 700;
  white-space: nowrap;
}


/* =========================================================
   LANDING FIX PACK — makes production match the target UI.
   Keep this AFTER all other grader rules.
   ========================================================= */

/* --- restore rules lost in the trim --- */
#bcblog-app .bcblog-hero-grid {
  gap: 40px;
}
#bcblog-app .bcblog-note {
  display: block !important;
  margin: 12px 0 0 !important;
  font-size: 14px !important;
  color: var(--bcblog-muted, #555555) !important;
}

/* --- kill wpautop artifacts: injected <br> and empty <p> --- */
/* This is what makes the hero text flow as one paragraph again */
#bcblog-app br {
  display: none !important;
}
#bcblog-app p:empty {
  display: none !important;
  margin: 0 !important;
  height: 0 !important;
}

/* --- dissolve the <p> wrappers wpautop puts INSIDE flex boxes --- */
/* Without this, strong/span aren't flex children and alignment breaks */
#bcblog-app .bcblog-score-circle-inner > p,
#bcblog-app .bcblog-score-preview > p,
#bcblog-app .bcblog-mini-stats > p,
#bcblog-app .bcblog-mini-stat > p,
#bcblog-app .bcblog-hero-content > p:not([class]),
#bcblog-app .bcblog-hero-grid > p:not([class]) {
  display: contents !important;
  margin: 0 !important;
}

/* --- score circle: "72" directly above "Search score", centered --- */
#bcblog-app .bcblog-score-circle-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0;              /* kills stray whitespace line boxes */
  line-height: 1.2 !important;
}
#bcblog-app .bcblog-score-number {
  display: block;
  margin: 0 !important;
  font-size: 52px !important;
  line-height: 1 !important;
}
#bcblog-app .bcblog-score-label {
  display: block;
  margin: 6px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

/* --- mini stat boxes: "31%" and its text on ONE baseline --- */
#bcblog-app .bcblog-mini-stat {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px;
  padding: 12px 16px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
#bcblog-app .bcblog-mini-stat strong {
  flex: 0 0 auto;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  white-space: nowrap;
}
#bcblog-app .bcblog-mini-stat span {
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* --- no dead space under the button / at the bottom of the card --- */
#bcblog-app .bcblog-btn {
  vertical-align: top;
}
#bcblog-app .bcblog-hero-content > *:last-child,
#bcblog-app .bcblog-score-preview > *:last-child {
  margin-bottom: 0 !important;
}
/* =========================================================
   QUIZ
   ========================================================= */
#bcblog-app .bcblog-quiz-section {
  padding: 35px 0;
}

#bcblog-app .bcblog-quiz-container {
  max-width: 850px;
}

#bcblog-app .bcblog-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px !important;
  color: var(--bcblog-muted, #555555) !important;
}

#bcblog-app .bcblog-category {
  display: inline-block;
  padding: 4px 12px;
  background: var(--bcblog-tint, #f0f9ff) !important;
  color: var(--bcblog-brand, #0073aa) !important;
  border-radius: 999px;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#bcblog-app .bcblog-progress {
  width: 100%;
  height: 8px;
  margin-bottom: 25px;
  overflow: hidden;
  background: #e9edf3;
  border-radius: 999px;
}

#bcblog-app .bcblog-progress-fill {
  width: 10%;
  height: 100%;
  background-color: #0073aa;
  background-image: var(--bcblog-gradient, linear-gradient(135deg, #0073aa 0%, #8b5cf6 100%));
  border-radius: 999px;
  transition: width .35s ease;
}

/* Question */
#bcblog-app .bcblog-question-card {
  padding: 32px;
  background: #ffffff;
  border: 1px solid var(--bcblog-border, #e2e8f0);
  border-top: 3px solid var(--bcblog-brand, #0073aa);
  border-radius: 12px;
  box-shadow: var(--bcblog-shadow, 0 4px 20px rgba(0, 0, 0, .07));
}

#bcblog-app .bcblog-question-card h3 {
  margin-bottom: 9px !important;
  font-size: 25px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: var(--bcblog-ink, #111111) !important;
}

#bcblog-app .bcblog-question-hint {
  margin-bottom: 22px !important;
  font-size: 15px !important;
  color: var(--bcblog-muted, #555555) !important;
}

/* Options */
#bcblog-app .bcblog-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#bcblog-app .bcblog-option {
  width: 100%;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 15px 18px !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--bcblog-border, #e2e8f0) !important;
  border-radius: 10px !important;
  text-align: left !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--bcblog-body, #333333) !important;
  cursor: pointer;
  box-shadow: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

/* The label text inside each option — must stay visible */
#bcblog-app .bcblog-option > span {
  display: inline-block;
  color: inherit !important;
  font: inherit !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#bcblog-app .bcblog-option:hover {
  border-color: var(--bcblog-brand, #0073aa) !important;
  background-color: var(--bcblog-tint, #f0f9ff) !important;
}

#bcblog-app .bcblog-option.bcblog-option-selected {
  border-color: var(--bcblog-brand, #0073aa) !important;
  background-color: var(--bcblog-tint, #f0f9ff) !important;
  box-shadow: inset 4px 0 0 var(--bcblog-brand, #0073aa);
  color: var(--bcblog-ink, #111111) !important;
  font-weight: 600 !important;
}

#bcblog-app .bcblog-option-dot {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  background: #ffffff;
}

#bcblog-app .bcblog-option-selected .bcblog-option-dot {
  border-color: var(--bcblog-brand, #0073aa);
  box-shadow: inset 0 0 0 4px #ffffff;
  background: var(--bcblog-brand, #0073aa);
}

/* Navigation */
#bcblog-app .bcblog-quiz-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 24px;
}

#bcblog-app .bcblog-back-button {
  padding: 10px 4px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--bcblog-muted, #555555) !important;
  cursor: pointer;
  box-shadow: none !important;
}

#bcblog-app .bcblog-back-button:hover {
  color: var(--bcblog-brand, #0073aa) !important;
  background: transparent !important;
}

/* =========================================================
   ANALYZING
   ========================================================= */
#bcblog-app .bcblog-analyzing {
  padding: 90px 20px;
  text-align: center;
}

#bcblog-app .bcblog-analyzing h3 {
  margin-bottom: 8px !important;
  font-size: 27px !important;
  font-weight: 700 !important;
  color: var(--bcblog-ink, #111111) !important;
}

#bcblog-app .bcblog-analyzing p {
  margin: 0 !important;
  color: var(--bcblog-muted, #555555) !important;
}

#bcblog-app .bcblog-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
}

#bcblog-app .bcblog-loader span {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--bcblog-brand, #0073aa);
  animation: bcblogPulse 1.1s ease-in-out infinite;
}

#bcblog-app .bcblog-loader span:nth-child(2) {
  background: var(--bcblog-violet, #8b5cf6);
  animation-delay: .18s;
}

#bcblog-app .bcblog-loader span:nth-child(3) {
  background: var(--bcblog-cyan, #0891b2);
  animation-delay: .36s;
}

@keyframes bcblogPulse {
  0%, 100% { transform: scale(.7); opacity: .45; }
  50%      { transform: scale(1);  opacity: 1; }
}


/* =========================================================
   LEAD FORM
   ========================================================= */

#bcblog-app .bcblog-gate-section {
  width: 100% !important;
  padding: 35px 0 !important;
  box-sizing: border-box !important;
}

#bcblog-app .bcblog-gate-card {
  width: 100% !important;
  max-width: 560px !important;

  margin: 0 auto !important;
  padding: 34px 36px !important;

  background: #ffffff !important;

  border: 1px solid var(--bcblog-border, #e2e8f0) !important;
  border-top: 3px solid var(--bcblog-green, #10b981) !important;

  border-radius: 12px !important;

  box-shadow:
    var(--bcblog-shadow, 0 4px 20px rgba(0, 0, 0, .07)) !important;

  box-sizing: border-box !important;
}


/* =========================================================
   FORM HEADING
   ========================================================= */

#bcblog-app .bcblog-gate-card h3 {
  margin: 0 0 6px !important;

  font-size: 27px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;

  color: var(--bcblog-ink, #111111) !important;
}


/* =========================================================
   FORM DESCRIPTION
   ========================================================= */

#bcblog-app .bcblog-gate-card > p {
  margin: 0 0 18px !important;

  color: var(--bcblog-muted, #555555) !important;

  font-size: 15px !important;
  line-height: 1.6 !important;
}


/* =========================================================
   FORM FIELD
   ========================================================= */

#bcblog-app .bcblog-field {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 0 12px !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}


/* =========================================================
   FIELD LABEL
   ========================================================= */

#bcblog-app .bcblog-field label {
  display: block !important;

  width: 100% !important;

  margin: 0 0 5px !important;
  padding: 0 !important;

  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;

  color: var(--bcblog-ink, #111111) !important;

  text-transform: none !important;
}


/* =========================================================
   TEXT INPUTS
   ========================================================= */

#bcblog-app .bcblog-field input {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: 46px !important;
  min-height: 46px !important;

  margin: 0 !important;
  padding: 0 14px !important;

  box-sizing: border-box !important;

  background-color: #ffffff !important;
  background-image: none !important;

  border: 1px solid var(--bcblog-border, #e2e8f0) !important;
  border-radius: 8px !important;

  color: var(--bcblog-body, #333333) !important;

  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 46px !important;

  outline: none !important;

  box-shadow: none !important;

  transition:
    border-color .2s ease,
    box-shadow .2s ease !important;
}


/* =========================================================
   SINGLE ECOMMERCE PLATFORM DROPDOWN
   ========================================================= */

#bcblog-app .bcblog-field #bcblog-platform {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;

  margin: 0 !important;
  padding: 0 42px 0 14px !important;

  box-sizing: border-box !important;

  background-color: #ffffff !important;
  background-image: none !important;

  border: 1px solid var(--bcblog-border, #e2e8f0) !important;
  border-radius: 8px !important;

  color: var(--bcblog-body, #333333) !important;

  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: normal !important;

  outline: none !important;

  box-shadow: none !important;

  cursor: pointer !important;

  appearance: auto !important;
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;

  transition:
    border-color .2s ease,
    box-shadow .2s ease !important;
}


/* =========================================================
   PLATFORM DROPDOWN OPTIONS
   ========================================================= */

#bcblog-app .bcblog-field #bcblog-platform option {
  background: #ffffff !important;

  color: #333333 !important;

  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}


/* =========================================================
   FOCUS STATE
   ========================================================= */

#bcblog-app .bcblog-field input:focus,
#bcblog-app .bcblog-field #bcblog-platform:focus {
  border-color: var(--bcblog-brand, #0073aa) !important;

  box-shadow:
    0 0 0 3px rgba(0, 115, 170, .12) !important;
}


/* =========================================================
   ERROR MESSAGE
   ========================================================= */

#bcblog-app .bcblog-error {
  display: none !important;

  margin: 5px 0 0 !important;
  padding: 0 !important;

  font-size: 13px !important;
  line-height: 1.5 !important;

  color: var(--bcblog-rose, #e11d48) !important;
}


/* =========================================================
   ERROR FIELD
   ========================================================= */

#bcblog-app .bcblog-field.bcblog-field-error input,
#bcblog-app .bcblog-field.bcblog-field-error #bcblog-platform {
  border-color: var(--bcblog-rose, #e11d48) !important;

  box-shadow:
    0 0 0 3px rgba(225, 29, 72, .10) !important;
}


/* =========================================================
   SHOW ERROR MESSAGE
   ========================================================= */

#bcblog-app .bcblog-field.bcblog-field-error .bcblog-error {
  display: block !important;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

#bcblog-app .bcblog-submit-button {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  box-sizing: border-box !important;

  margin-top: 2px !important;
}


/* =========================================================
   FORM NOTE
   ========================================================= */

#bcblog-app .bcblog-form-note {
  margin: 10px 0 0 !important;
  padding: 0 !important;

  text-align: center !important;

  font-size: 13px !important;
  line-height: 1.6 !important;

  color: var(--bcblog-muted, #555555) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  #bcblog-app .bcblog-gate-section {
    padding: 25px 0 !important;
  }

  #bcblog-app .bcblog-gate-card {
    width: 100% !important;
    max-width: 100% !important;

    padding: 26px 20px !important;

    border-radius: 10px !important;
  }

  #bcblog-app .bcblog-gate-card h3 {
    font-size: 23px !important;
    line-height: 1.3 !important;

    margin-bottom: 6px !important;
  }

  #bcblog-app .bcblog-gate-card > p {
    margin-bottom: 16px !important;
  }

  #bcblog-app .bcblog-field {
    margin-bottom: 10px !important;
  }

  #bcblog-app .bcblog-field label {
    margin-bottom: 5px !important;
  }

  #bcblog-app .bcblog-field input,
  #bcblog-app .bcblog-field #bcblog-platform {
    width: 100% !important;

    height: 46px !important;
    min-height: 46px !important;

    font-size: 16px !important;
  }

  #bcblog-app .bcblog-submit-button {
    margin-top: 2px !important;
  }

  #bcblog-app .bcblog-form-note {
    margin-top: 9px !important;
  }

}

/* =========================================================
   RESULTS
   ========================================================= */

.bcblog-results-section {
  padding: 35px 0;
}

.bcblog-result-hero {
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 36px;
  padding: 20px 20px;
  background: var(--bcblog-surface);
  border: 1px solid var(--bcblog-border);
  border-radius: 16px;
  box-shadow: var(--bcblog-shadow);
}


/* Ring */

.bcblog-score-ring {
  position: relative;

  width: 220px;
  height: 220px;
}

.bcblog-score-ring svg {
  transform: rotate(-90deg);
}

.bcblog-ring-track {
  fill: none;

  stroke: #e4e9f0;

  stroke-width: 16;
}

.bcblog-ring-meter {
  fill: none;

  stroke: url(#bcblog-score-gradient);

  stroke-width: 16;

  stroke-linecap: round;

  stroke-dasharray: 565.49;

  stroke-dashoffset: 565.49;

  transition:
    stroke-dashoffset 1.1s
    cubic-bezier(.22, .61, .36, 1);
}

.bcblog-score-value {
  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;
}

.bcblog-score-value span {
  font-size: 54px;

  font-weight: 700;

  line-height: 1;

  color: var(--bcblog-ink);
}

.bcblog-score-value small {
  margin-top: 5px;

  font-size: 13px;

  color: var(--bcblog-muted);
}


/* Result text */

.bcblog-grade {
  display: inline-block;

  margin-bottom: 12px;

  padding: 6px 14px;

  background: var(--bcblog-gradient);

  color: #fff;

  border-radius: 999px;

  font-size: 13px;

  font-weight: 700;
}

.bcblog-result-copy h3 {
  margin-bottom: 10px !important;

  font-size: 29px;

  line-height: 1.3;

  color: var(--bcblog-ink);
}

.bcblog-result-copy p {
  margin: 0 !important;

  color: var(--bcblog-body);
}

/* =========================================================
   BREAKDOWN
   ========================================================= */
#bcblog-app .bcblog-breakdown,
#bcblog-app .bcblog-recommendations {
  margin-top: 32px;
}

#bcblog-app .bcblog-breakdown > h3,
#bcblog-app .bcblog-recommendations > h3 {
  margin-bottom: 18px !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  color: var(--bcblog-ink, #111111) !important;
}

#bcblog-app .bcblog-score-bars {
  display: flex;
  flex-direction: column;
  gap: 20px
}

#bcblog-app .bcblog-score-bar {
  padding: 18px 22px;
  background: #ffffff;
  border: 1px solid var(--bcblog-border, #e2e8f0);
  border-radius: 10px;
}

#bcblog-app .bcblog-score-bar-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--bcblog-ink, #111111) !important;
}

#bcblog-app .bcblog-score-bar-track {
  height: 10px;
  overflow: hidden;
  background: #e9edf3;
  border-radius: 999px;
}

#bcblog-app .bcblog-score-bar-fill {
  width: 0;
  height: 100%;
  background-color: #0073aa;
  background-image: var(--bcblog-gradient, linear-gradient(135deg, #0073aa 0%, #8b5cf6 100%));
  border-radius: 999px;
  transition: width .9s cubic-bezier(.22, .61, .36, 1);
}

/* =========================================================
   RECOMMENDATIONS
   ========================================================= */
#bcblog-app #bcblog-recommendation-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#bcblog-app .bcblog-recommendation {
  display: flex;
  gap: 18px;
  padding: 22px 24px;
  background: #ffffff;
  border: 1px solid var(--bcblog-border, #e2e8f0);
  border-top: 3px solid var(--bcblog-brand, #0073aa);
  border-radius: 10px;
}

#bcblog-app .bcblog-recommendation:nth-child(2) {
  border-top-color: var(--bcblog-violet, #8b5cf6);
}

#bcblog-app .bcblog-recommendation:nth-child(3) {
  border-top-color: var(--bcblog-cyan, #0891b2);
}

#bcblog-app .bcblog-recommendation:nth-child(4) {
  border-top-color: var(--bcblog-green, #10b981);
}

#bcblog-app .bcblog-recommendation-icon {
  flex: 0 0 auto;
  font-size: 25px !important;
  line-height: 1.2;
}

#bcblog-app .bcblog-recommendation h4 {
  margin-bottom: 8px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--bcblog-ink, #111111) !important;
}

#bcblog-app .bcblog-recommendation p {
  margin-bottom: 10px !important;
  font-size: 15px !important;
  color: var(--bcblog-muted, #555555) !important;
}

#bcblog-app .bcblog-recommendation a {
  color: var(--bcblog-brand, #0073aa) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* =========================================================
   CTA
   ========================================================= */
#bcblog-app .bcblog-cta {
  margin-top: 36px;
  padding: 44px 40px;
  text-align: center;
  background-color: #0073aa !important;
  background-image: var(--bcblog-gradient, linear-gradient(135deg, #0073aa 0%, #8b5cf6 100%)) !important;
  border-radius: 16px;
  color: #ffffff !important;
}

#bcblog-app .bcblog-cta h3 {
  margin-bottom: 12px !important;
  font-size: 29px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

#bcblog-app .bcblog-cta p {
  max-width: 720px;
  margin: 0 auto 26px !important;
  color: rgba(255, 255, 255, .92) !important;
}

#bcblog-app .bcblog-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

#bcblog-app .bcblog-cta-white {
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--bcblog-brand, #0073aa) !important;
}

#bcblog-app .bcblog-cta-outline {
  background-color: transparent !important;
  background-image: none !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
}

/* =========================================================
   RETAKE
   ========================================================= */
#bcblog-app .bcblog-retake {
  margin-top: 24px;
  text-align: center;
}

#bcblog-app .bcblog-retake button {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--bcblog-muted, #555555) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  cursor: pointer;
  box-shadow: none !important;
}

#bcblog-app .bcblog-retake button:hover {
  color: var(--bcblog-brand, #0073aa) !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  #bcblog-app .bcblog-hero-grid {
    grid-template-columns: 1fr;
    padding: 30px 25px;
  }
  #bcblog-app .bcblog-hero h2 {
    font-size: 30px !important;
  }
  #bcblog-app .bcblog-result-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 30px 25px;
  }
}

@media (max-width: 600px) {
  #bcblog-app .bcblog-container {
    padding-left: 15px;
    padding-right: 15px;
  }
  #bcblog-app .bcblog-hero {
    padding: 20px 0;
  }
  #bcblog-app .bcblog-hero-grid {
    padding: 25px 20px;
    border-radius: 14px;
  }
  #bcblog-app .bcblog-hero h2 {
    font-size: 26px !important;
  }
  #bcblog-app .bcblog-lead {
    font-size: 16px !important;
  }
  #bcblog-app .bcblog-question-card {
    padding: 24px 20px;
  }
  #bcblog-app .bcblog-question-card h3 {
    font-size: 21px !important;
  }
  #bcblog-app .bcblog-quiz-navigation {
    align-items: stretch;
  }
  
  #bcblog-app .bcblog-gate-card {
    padding: 26px 21px;
  }
  #bcblog-app .bcblog-score-ring,
  #bcblog-app .bcblog-score-ring svg {
    width: 190px;
    height: 190px;
  }
  #bcblog-app .bcblog-score-value span {
    font-size: 45px !important;
  }
  #bcblog-app .bcblog-result-copy h3 {
    font-size: 24px !important;
  }
  #bcblog-app .bcblog-cta {
    padding: 34px 22px;
  }
  #bcblog-app .bcblog-cta h3 {
    font-size: 24px !important;
  }
  #bcblog-app .bcblog-cta-buttons {
    flex-direction: column;
  }
  #bcblog-app .bcblog-cta-buttons .bcblog-btn {
    width: 100% !important;
  }
  #bcblog-app .bcblog-recommendation {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #bcblog-app *,
  #bcblog-app *::before,
  #bcblog-app *::after {
    animation: none !important;
    transition: none !important;
  }
}
/* ===== blogs grader page ends here ===== */

/* ===== Global Sticky Header — FINAL (CSS only) ===== */

/* 1. Neutralize any older sticky attempt still left in the files */
body:not(.elementor-editor-active) header#masthead .sticky-header {
    position: relative !important;
    top: auto;
    left: auto;
    right: auto;
}

body {
    padding-top: 0 !important; /* undo the old script's offset if it ever runs */
}

/* 2. The actual sticky — the outer theme wrapper that spans the full page */
header#masthead {
    position: -webkit-sticky;
    position: sticky !important;
    top: 0;
    z-index: 9999;
    background: #ffffff;
}

/* 3. overflow-x: hidden on these ancestors silently kills sticky — clip doesn't */
html,
body,
#page {
    overflow-x: clip !important;
}

/* 4. Keep header below the WP admin bar when logged in */
body.admin-bar header#masthead {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar header#masthead {
        top: 46px;
    }
}


/* Remove left padding only from the accordion having class close-accordian */
.close-accordian .e-n-accordion-item > .elementor-element{
    padding-left: 0 !important;
}

.close-accordian .e-n-accordion-item-title-text {
    font-size: 20px !important;
}
@media (max-width: 768px) {
   .close-accordian .e-n-accordion-item-title-text {
    font-size: 18px !important;
}
}


/* --- bCloud: blog pagination (bcpg-) --- */

/* the widget's own bar stays in the DOM but out of sight */
.bcpg-source{
  position:absolute !important;
  width:1px !important;height:1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;margin:-1px;padding:0;border:0;
}
.bcpg-hidden{display:none !important}

.bcpg{
  --bcpg-accent:#FF8A00;
  --bcpg-accent-dark:#EA580C;
  --bcpg-tile:#FFF1E6;
  --bcpg-tile-hover:#FFE4D1;
  --bcpg-text:#542A16;
  --bcpg-muted:#C47A4A;

  display:flex;justify-content:center;width:100%;
  margin:8px 0;
}
.bcpg-inner{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 10px;background:#fff;border-radius:16px;
  box-shadow:0 6px 22px rgba(17,17,26,.08),0 1px 3px rgba(17,17,26,.06);
  max-width:100%;
}

.bcpg a,.bcpg span{box-shadow:none;text-decoration:none}

.bcpg-page{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 10px;
  border:0;border-radius:10px;
  background:linear-gradient(135deg,#FFF7ED,#FFEDD5);
  color:#9A3412;
  font-size:14px;font-weight:600;line-height:1;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease;
}
a.bcpg-page:hover{ background:linear-gradient(
    135deg,
    #FFE8D0,
    #FED7AA
  );
  color:#C2410C;}
a.bcpg-page:active{transform:translateY(1px)}
.bcpg-page.is-current{
  background:linear-gradient(
    135deg,
    #FFB000 0%,
    #FF7A00 50%,
    #F4511E 100%
  );

  color:#FFFFFF;
  cursor:default;

  box-shadow:
    0 5px 15px rgba(249,115,22,.32),
    0 2px 5px rgba(234,88,12,.18);
}

.bcpg-dots{
  min-width:26px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#E87928;font-weight:700;letter-spacing:1px;
  user-select:none;
}

.bcpg-nav{
  display:inline-flex;align-items:center;gap:7px;
  height:38px;padding:0 13px;
  border:0;border-radius:10px;background:transparent;
  color:var(--bcpg-text);font-size:14px;font-weight:600;line-height:1;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease;
}
a.bcpg-nav:hover{background:#F4F4F5;color:var(--bcpg-accent)}
.bcpg-nav.is-disabled{color:#C9C9D3;cursor:default;pointer-events:none}
.bcpg-nav svg{width:15px;height:15px;flex:0 0 auto}
.bcpg-ico-prev{transform:rotate(180deg)}

.bcpg a:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(79,70,229,.28);
}

@media (max-width:560px){
  .bcpg-inner{gap:4px;padding:7px 8px;border-radius:14px}
  .bcpg-label{display:none}
  .bcpg-nav{padding:0 9px}
  .bcpg-page{min-width:34px;height:34px;padding:0 8px;font-size:13px}
  .bcpg-dots{height:34px;min-width:20px}
}


/*---------css for the demo page contact form------------ */
/* Wrapper */
.phone-flag-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 100% !important;
}

/* Flag image — positioned on the far left */
.phone-flag-wrapper .phone-flag-img {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: auto !important;
    border-radius: 2px !important;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3) !important;
    pointer-events: none !important;
    z-index: 5 !important;
    margin: 0 !important;
    flex: none !important;
}

/* Country code label — DARK, sits next to the flag */
.phone-flag-wrapper .phone-code-label {
    position: absolute !important;
    left: 46px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #000000 !important;
    font-weight: 500 !important;
    font-size: inherit !important;
    pointer-events: none !important;
    z-index: 5 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Input — full width, with extra left padding to make room for flag + code */
.phone-flag-wrapper input.wpcf7-tel,
.phone-flag-wrapper input[type="tel"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    flex: 1 1 100% !important;
    margin: 0 !important;
}

/* When flag + code are showing, push input text further right */
.phone-flag-wrapper input.wpcf7-tel.has-flag-and-code,
.phone-flag-wrapper input[type="tel"].has-flag-and-code {
    padding-left: 96px !important;
    box-sizing: border-box !important;
}

/* Placeholder (just the format example) — stays light/faded */
.phone-flag-wrapper input.wpcf7-tel::placeholder,
.phone-flag-wrapper input[type="tel"]::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

.phone-flag-wrapper input.wpcf7-tel::-webkit-input-placeholder,
.phone-flag-wrapper input[type="tel"]::-webkit-input-placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

.phone-flag-wrapper input.wpcf7-tel::-moz-placeholder,
.phone-flag-wrapper input[type="tel"]::-moz-placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

.phone-flag-wrapper input.wpcf7-tel:-ms-input-placeholder,
.phone-flag-wrapper input[type="tel"]:-ms-input-placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}
/*-----------------css for the demo page contact form ends here----------------------*/


/*------------------css for the white paper page contact form------------------------- */


#sticky-row {
  align-items: flex-start !important;
}

#right-form {
  position: sticky !important;
  top: 50px !important; /* adjust if your header is taller/shorter */
  align-self: flex-start !important;
}
/*---------------css for the white paper page contact form ends here--------------------------*/


/*---------------css for the comment box below in the posts --------------------------*/
.comments-area form.comment-form {
    display: flex !important;
    flex-direction: column !important;
}

.comments-area .ast-comment-formwrap {
    order: 1 !important;
}

.comments-area .comment-form-comment {
    order: 2 !important;
    width: 100% !important;
}

.comments-area .comment-form-cookies-consent {
    order: 3 !important;
}

.comments-area .form-submit {
    order: 4 !important;
}




/* Comment Section Container */
.comments-area {
    background: #ffffff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    margin-top: 20px;
}

/* Heading */
.comments-title,
.comment-reply-title {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
}

.comment-notes {
    color: #000000;
    font-size: 15px;
    margin-bottom: 30px;
}

/* Name Email Website Row */
.comments-area .ast-comment-formwrap {
    margin-bottom: 24px;
}

/* Inputs */
.comments-area input[type="text"],
.comments-area input[type="email"],
.comments-area input[type="url"],
.comments-area textarea {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 18px;
    font-size: 15px;
    background: #fafafa;
    transition: all 0.3s ease;
}

/* Focus State */
.comments-area input:focus,
.comments-area textarea:focus {
    outline: none;
    border-color: #5b4bff;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(91,75,255,0.12);
}

/* Textarea */
.comments-area textarea#comment {
    min-height: 180px;
    resize: vertical;
}

/* Labels */
.comments-area label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #111827;
}

/* Checkbox */
.comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 30px;
}

.comment-form-cookies-consent label {
    margin: 0;
    font-weight: 400;
}

/* Submit Button */
.comments-area .submit,
.comments-area input[type="submit"] {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 16px 34px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.comments-area .submit:hover,
.comments-area input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(79,70,229,0.25);
}

/* Mobile */
@media (max-width: 768px) {
    .comments-area {
        padding: 24px;
    }

    .comment-reply-title {
        font-size: 26px;
    }
}

/*---------------css for the comment box below in the posts ends here--------------------------*/

/*---------------css for comparison table on the mobile view--------------------------*/
@media (max-width: 768px) {
  .comparison-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    display: block;
  }

  .comparison-table > .e-con-inner,
  .comparison-table > .e-child,
  .comparison-table .e-con-inner > .e-con {
    min-width: 700px;
  }

  .comparison-table .e-con {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
}
/*---------------css for comparison table on the mobile view ends here--------------------------*/


/*---------------css for ecommerce grader page starts--------------------------*/

.bcsg{
  --navy-deep:#0A1F44;
  --navy:#0B2A6B;
  --blue:#1A56DB;
  --blue-bright:#2D7FF9;
  --cyan:#22D3EE;
  --ink:#0F172A;
  --slate:#475569;
  --slate-light:#94A3B8;
  --border:#E2E8F0;
  --surface:#F8FAFC;
  --tint:#EEF4FF;
  --white:#FFFFFF;
  --success:#16A34A;
  --warning:#F59E0B;
  --purple:#7C3AED;
  --purple-bright:#8B5CF6;
  --hero-bg:linear-gradient(135deg,#090D26 0%,#101A45 45%,#1C2B66 100%);
  --grad:linear-gradient(90deg,#1A56DB 0%,#22D3EE 100%);
  --btn-grad:linear-gradient(90deg,#6D28D9 0%,#8B5CF6 100%);
  --radius:16px;
  --radius-sm:12px;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background:var(--white);
}

.bcsg *,
.bcsg *::before,
.bcsg *::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

.bcsg img{
  max-width:100%;
  display:block;
}

.bcsg button{
  font-family:inherit;
  cursor:pointer;
}

.bcsg :focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:6px;
}


/* ---------- Layout ---------- */

.bcsg .bcsg-wrap{
  max-width:1320px;
  margin:0 auto;
  padding:0 24px;
}

.bcsg .bcsg-screen{
  display:none;
}

.bcsg .bcsg-screen.is-active{
  display:block;
  animation:bcsgFade .35s ease;
}

@keyframes bcsgFade{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .bcsg .bcsg-screen.is-active{
    animation:none;
  }

  .bcsg *{
    transition:none!important;
    animation:none!important;
  }
}


/* ---------- Hero / landing ---------- */

.bcsg .bcsg-hero{
  background:var(--hero-bg);
  color:var(--white);
  padding:88px 0 96px;
  position:relative;
  overflow:hidden;
}

.bcsg .bcsg-hero::after{
  content:"";
  position:absolute;
  right:-160px;
  top:-160px;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(
    circle at center,
    rgba(34,211,238,.16),
    transparent 65%
  );
  pointer-events:none;
}

.bcsg .bcsg-hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:64px;
  align-items:center;
  position:relative;
  z-index:1;
}

.bcsg .bcsg-eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  letter-spacing:.14em;
  color:white;
  background:linear-gradient(135deg,#182452 0%,#101942 100%);
  border:1px solid rgba(145,160,220,.22);
  box-shadow:0 0 12px 0 rgba(194,194,194,.45);
  margin-bottom:20px;
}

.bcsg .bcsg-hero h1{
  font-size:50px;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--white);
  margin-bottom:20px;
}

.bcsg .bcsg-hero .bcsg-lead{
  font-size:18px;
  color:#fff;
  max-width:56ch;
  margin-bottom:12px;
}

.bcsg .bcsg-hero .bcsg-lead strong{
  color:var(--white);
}

.bcsg .bcsg-src{
  font-size:13px;
  color:#fff;
  margin-bottom:32px;
}

.bcsg .bcsg-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:none;
  border-radius:9999px;
  font-size:18px;
  font-weight:500;
  padding:15px 18px;
  transition:background .2s ease,transform .15s ease;
  text-decoration:none;
}

.bcsg .bcsg-btn-primary{
  background:var(--purple);
  color:var(--white);
}

.bcsg .bcsg-btn-primary:hover{
  background:var(--purple-bright);
}

.bcsg .bcsg-btn-grad{
  background:linear-gradient(90deg,#2f6df6 0%,#7738e8 100%);
  color:#fff;
  border:none;
}

.bcsg .bcsg-btn-grad:hover{
  filter:brightness(1.08);
}

.bcsg .bcsg-btn-ghost{
  background:transparent;
  color:var(--blue);
  border:1px solid var(--blue);
}

.bcsg .bcsg-btn-ghost:hover{
  background:var(--tint);
}

.bcsg .bcsg-btn-dark{
  background:var(--navy-deep);
  color:var(--white);
}

.bcsg .bcsg-btn-dark:hover{
  background:var(--navy);
}

.bcsg .bcsg-hero-note{
  font-size:13px;
  color:#fff;
  margin-top:14px;
}


/* ---------- Landing banner image ---------- */

.bcsg .bcsg-banner-img{
  width:450px;
  height:450px;
  border-radius:10px !important;
  overflow:hidden !important;
}

.bcsg .bcsg-banner-img > img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  border-radius:10px !important;
}


/* ---------- Quiz ---------- */

.bcsg .bcsg-quiz{
  background:var(--surface);
  min-height:70vh;
  padding:56px 20px 80px;
}

.bcsg .bcsg-quiz-shell{
  max-width:720px;
  margin:0 auto;
}

.bcsg .bcsg-progress-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  font-size:13px;
  font-weight:700;
  color:var(--slate);
}

.bcsg .bcsg-progress-meta .cat{
  color:var(--blue);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
}

.bcsg .bcsg-progress{
  height:8px;
  background:var(--border);
  border-radius:9999px;
  overflow:hidden;
  margin-bottom:36px;
}

.bcsg .bcsg-progress-fill{
  height:100%;
  width:0;
  background:var(--grad);
  border-radius:9999px;
  transition:width .3s ease;
}

.bcsg .bcsg-qcard{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:40px;
}

.bcsg .bcsg-qcard h2{
  font-size:26px;
  font-weight:700;
  color:var(--navy);
  line-height:1.25;
  margin-bottom:8px;
}

.bcsg .bcsg-qcard .hint{
  font-size:15px;
  color:var(--slate);
  margin-bottom:28px;
}

.bcsg .bcsg-opts{
  display:grid;
  gap:12px;
}

.bcsg .bcsg-opt{
  display:flex;
  align-items:flex-start;
  gap:14px;
  width:100%;
  text-align:left;
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  padding:18px 20px;
  font-size:16px;
  color:var(--ink);
  transition:border-color .15s ease,background .15s ease;
}

.bcsg .bcsg-opt:hover{
  border-color:var(--blue-bright);
  background:var(--tint);
}

.bcsg .bcsg-opt.is-selected{
  border-color:var(--blue);
  background:var(--tint);
}

.bcsg .bcsg-opt .dot{
  flex:none;
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid var(--slate-light);
  margin-top:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s ease;
}

.bcsg .bcsg-opt.is-selected .dot{
  border-color:var(--blue);
}

.bcsg .bcsg-opt.is-selected .dot::after{
  content:"";
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--blue);
}


/* =========================================================
   QUIZ NAVIGATION - FINAL DESKTOP ALIGNMENT
   ========================================================= */

.bcsg .bcsg-quiz-nav{
  width:100% !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  margin-top:28px !important;
  padding:0 !important;
  box-sizing:border-box !important;
}


/* =========================
   BACK BUTTON - LEFT
   ========================= */

.bcsg .bcsg-quiz-nav .bcsg-back{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  flex:0 0 auto !important;

  width:auto !important;
  min-width:72px !important;
  height:44px !important;

  margin:0 !important;
  padding:0 14px !important;

  background:#fff !important;
  border:1px solid #E2E8F0 !important;
  border-radius:10px !important;

  color:#334155 !important;
  font-size:15px !important;
  font-weight:600 !important;
  line-height:1 !important;

  box-shadow:0 2px 6px rgba(15,23,42,.05) !important;

  box-sizing:border-box !important;
}


/* Back hover */

.bcsg .bcsg-quiz-nav .bcsg-back:hover{
  background:#F8FAFC !important;
  border-color:#CBD5E1 !important;
  color:#1A56DB !important;
  box-shadow:0 4px 10px rgba(15,23,42,.08) !important;
}


/* =========================
   NEXT BUTTON - RIGHT
   ========================= */

.bcsg .bcsg-quiz-nav #bcsg-next{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  flex:0 0 auto !important;

  width:auto !important;
  min-width:52px !important;
  height:45px !important;

  /* THIS IS THE IMPORTANT PART */
  margin-left:auto !important;
  margin-right:0 !important;

  padding:0 22px !important;

  border:none !important;
  border-radius:16px !important;

  background:linear-gradient(
    90deg,
    #2F6DF6 0%,
    #7738E8 100%
  ) !important;

  color:#fff !important;
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1 !important;

  box-sizing:border-box !important;
}


/* Next hover */

.bcsg .bcsg-quiz-nav #bcsg-next:hover:not(:disabled){
  filter:brightness(1.08) !important;
  transform:translateY(-1px) !important;
}


/* Disabled */

.bcsg .bcsg-quiz-nav #bcsg-next:disabled{
  opacity:.45 !important;
  cursor:not-allowed !important;
  transform:none !important;
  filter:none !important;
}


/* ---------- Analyzing interstitial ---------- */

.bcsg .bcsg-analyzing{
  min-height:60vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:80px 24px;
  background:var(--white);
}

.bcsg .bcsg-analyzing .brain{
  font-size:40px;
  margin-bottom:18px;
  animation:bcsgPulse 1.2s ease infinite;
}

@keyframes bcsgPulse{
  0%,100%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.12);
  }
}

.bcsg .bcsg-analyzing h2{
  font-size:26px;
  font-weight:700;
  color:var(--navy);
  margin-bottom:8px;
}

.bcsg .bcsg-analyzing p{
  font-size:15px;
  color:var(--slate);
}


/* ---------- Lead capture ---------- */

.bcsg .bcsg-gate{
  background:var(--surface);
  padding:72px 0 96px;
}

.bcsg .bcsg-gate-card{
  max-width:350px;
  margin:0 auto;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:30px;
}

.bcsg .bcsg-gate-card .done{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--tint);
  color:var(--blue);
  font-size:13px;
  font-weight:700;
  border-radius:9999px;
  padding:6px 16px;
  margin-bottom:20px;
}

.bcsg .bcsg-gate-card h2{
  font-size:28px;
  font-weight:800;
  color:var(--navy);
  line-height:1.2;
  margin-bottom:10px;
}

.bcsg .bcsg-gate-card>p{
  font-size:15px;
  color:var(--slate);
  margin-bottom:28px;
}

.bcsg .bcsg-field{
  margin-bottom:22px;
}

.bcsg .bcsg-field label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:6px;
}

.bcsg .bcsg-field input,
.bcsg .bcsg-field select{
  width:100%;
  font-family:inherit;
  font-size:15px;
  color:var(--ink);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  padding:5px 5px;
  background:var(--white);
}

.bcsg .bcsg-field input:focus,
.bcsg .bcsg-field select:focus{
  outline:2px solid var(--blue);
  outline-offset:1px;
  border-color:var(--blue);
}

.bcsg .bcsg-field .err{
  display:none;
  font-size:13px;
  color:#DC2626;
  margin-top:5px;
}

.bcsg .bcsg-field.has-error input{
  border-color:#DC2626;
}

.bcsg .bcsg-field.has-error .err{
  display:block;
}

.bcsg .bcsg-gate-note{
  font-size:12px;
  color:var(--slate-light);
  margin-top:14px;
}


/* ---------- Results ---------- */

.bcsg .bcsg-results{
  padding:30px 20px 40px;
}

.bcsg .bcsg-score-hero{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:56px;
  align-items:center;
  background:var(--hero-bg);
  border-radius:var(--radius);
  padding:56px;
  color:var(--white);
  margin-bottom:56px;
}

.bcsg .bcsg-ring{
  position:relative;
  width:220px;
  height:220px;
}

.bcsg .bcsg-ring svg{
  transform:rotate(-90deg);
}

.bcsg .bcsg-ring .track{
  fill:none;
  stroke:rgba(255,255,255,.12);
  stroke-width:16;
}

.bcsg .bcsg-ring .meter{
  fill:none;
  stroke:url(#bcsgGrad);
  stroke-width:16;
  stroke-linecap:round;
  stroke-dasharray:565;
  stroke-dashoffset:565;
  transition:stroke-dashoffset 1.2s ease;
}

.bcsg .bcsg-ring .val{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.bcsg .bcsg-ring .val .n{
  font-size:52px;
  font-weight:800;
  line-height:1;
}

.bcsg .bcsg-ring .val .of{
  font-size:14px;
  color:var(--slate-light);
  margin-top:4px;
}

.bcsg .bcsg-grade-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:9999px;
  padding:6px 18px;
  font-size:14px;
  font-weight:800;
  margin-bottom:16px;
  background:rgba(34,211,238,.14);
  color:var(--cyan);
}

.bcsg .bcsg-score-hero h2{
  font-size:34px;
  font-weight:800;
  line-height:1.15;
  color:#fff;
  margin-bottom:12px;
}

.bcsg .bcsg-score-hero p{
  font-size:16px;
  color:#C7D2E8;
  max-width:52ch;
}

.bcsg .bcsg-breakdown h3,
.bcsg .bcsg-recs h3{
  font-size:26px;
  font-weight:700;
  color:#fff;
  margin-bottom:24px;
  display: none;
}

.bcsg .bcsg-bars{
  display:grid;
  gap:20px;
  margin-bottom:56px;
}

.bcsg .bcsg-bar-row .top{
  display:flex;
  justify-content:space-between;
  font-size:14px;
  font-weight:700;
  margin-bottom:8px;
}

.bcsg .bcsg-bar-row .top .pct{
  color:var(--slate);
}

.bcsg .bcsg-bar{
  height:10px;
  background:var(--border);
  border-radius:9999px;
  overflow:hidden;
}

.bcsg .bcsg-bar-fill{
  height:100%;
  border-radius:9999px;
  background:var(--blue);
  transition:width .9s ease;
}

.bcsg .bcsg-bar-fill.low{
  background:var(--warning);
}

.bcsg .bcsg-bar-fill.high{
  background:var(--success);
}

.bcsg .bcsg-rec{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px;
  margin-bottom:16px;
}

.bcsg .bcsg-rec .badge{
  flex:none;
  width:40px;
  height:40px;
  border-radius:12px;
  background:var(--tint);
  color:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

.bcsg .bcsg-rec h4{
  font-size:17px;
  font-weight:700;
  color:var(--navy);
  margin-bottom:6px;
}

.bcsg .bcsg-rec p{
  font-size:15px;
  color:var(--slate);
  margin-bottom:8px;
}

.bcsg .bcsg-rec a{
  font-size:15px;
  font-weight:700;
  color:var(--blue);
  text-decoration:none;
}

.bcsg .bcsg-rec a:hover{
  text-decoration:underline;
}

.bcsg .bcsg-cta-band{
  background:var(--tint);
  border-radius:var(--radius);
  padding:48px;
  text-align:center;
  margin-top:56px;
}

.bcsg .bcsg-cta-band h3{
  font-size:28px;
  font-weight:800;
  color:var(--navy);
  margin-bottom:10px;
}

.bcsg .bcsg-cta-band p{
  font-size:16px;
  color:var(--slate);
  max-width:56ch;
  margin:0 auto 28px;
}

.bcsg .bcsg-cta-row{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

.bcsg .bcsg-retake{
  text-align:center;
  margin-top:32px;
}

.bcsg .bcsg-retake button{
  background:none;
  border:none;
  font-size:14px;
  font-weight:600;
  color:var(--slate);
  text-decoration:underline;
}

.bcsg .bcsg-retake button:hover{
  color:var(--blue);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:860px){

  .bcsg .bcsg-hero{
    padding:64px 0 72px;
  }

  .bcsg .bcsg-hero-grid{
    grid-template-columns:1fr;
    gap:44px;
  }

  .bcsg .bcsg-hero h1{
    font-size:34px;
  }

  .bcsg .bcsg-qcard{
    padding:28px 22px;
  }

  .bcsg .bcsg-score-hero{
    grid-template-columns:1fr;
    gap:36px;
    padding:36px 26px;
    text-align:center;
  }

  .bcsg .bcsg-ring{
    margin:0 auto;
  }
}


/* =========================================================
   DESKTOP HERO ALIGNMENT
   ========================================================= */

@media (min-width:768px){

  #bcsg-app .bcsg-hero-grid > div:first-child{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    text-align:left !important;
    width:100% !important;
  }

  #bcsg-app .bcsg-eyebrow{
    align-self:flex-start !important;
    width:max-content !important;
    margin-left:0 !important;
    margin-right:0 !important;
    text-align:left !important;
  }

  #bcsg-app .bcsg-hero h1{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    text-align:left !important;
  }

  #bcsg-app .bcsg-hero .bcsg-lead{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    text-align:left !important;
  }

  #bcsg-app .bcsg-src{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    text-align:left !important;
  }

  #bcsg-app .bcsg-hero .bcsg-btn{
    align-self:flex-start !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  #bcsg-app .bcsg-hero-note{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    text-align:left !important;
  }
}


/* =========================================================
   MOBILE - CENTER EVERYTHING
   ========================================================= */

@media (max-width:767px){

  /* Main app */

  #bcsg-app,
  #bcsg-app .bcsg,
  #bcsg-app .bcsg-screen{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
  }


  /* Hero */

  #bcsg-app .bcsg-hero{
    width:100% !important;
    max-width:100% !important;
    padding:45px 20px 40px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }


  /* One-column mobile layout */

  #bcsg-app .bcsg-hero-grid{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    max-width:100% !important;
    gap:32px !important;
    box-sizing:border-box !important;
  }


  /* Hero text column */

  #bcsg-app .bcsg-hero-grid > div:first-child{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;

    text-align:center !important;
    box-sizing:border-box !important;
  }


  /* Eyebrow */

  #bcsg-app .bcsg-eyebrow{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    align-self:center !important;

    width:max-content !important;
    max-width:100% !important;

    margin:0 auto 24px !important;
    padding:11px 18px !important;

    font-size:12px !important;
    line-height:1.2 !important;
    letter-spacing:.12em !important;

    text-align:center !important;
    box-sizing:border-box !important;
  }


  /* Main heading */

  #bcsg-app .bcsg-hero h1{
    width:100% !important;
    max-width:100% !important;

    margin:0 auto 20px !important;

    text-align:center !important;

    font-size:36px !important;
    line-height:1.12 !important;
    letter-spacing:-.02em !important;

    overflow-wrap:break-word !important;
    word-break:normal !important;

    box-sizing:border-box !important;
  }


  /* Description */

  #bcsg-app .bcsg-hero .bcsg-lead{
    width:100% !important;
    max-width:100% !important;

    margin:0 auto 22px !important;

    text-align:center !important;

    font-size:16px !important;
    line-height:1.55 !important;

    overflow-wrap:break-word !important;
    word-break:normal !important;

    box-sizing:border-box !important;
  }


  /* Source / small text */

  #bcsg-app .bcsg-src{
    width:100% !important;
    max-width:100% !important;

    margin:0 auto 22px !important;

    text-align:center !important;

    box-sizing:border-box !important;
  }


  /* Start quiz */

  #bcsg-app .bcsg-hero .bcsg-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    align-self:center !important;

    width:max-content !important;
    max-width:100% !important;

    margin:0 auto 14px !important;

    text-align:center !important;
    box-sizing:border-box !important;
  }


  /* No signup text */

  #bcsg-app .bcsg-hero-note{
    width:100% !important;
    max-width:100% !important;

    margin:0 auto !important;

    text-align:center !important;

    font-size:14px !important;
    line-height:1.5 !important;

    box-sizing:border-box !important;
  }


  /* Banner */

  #bcsg-app .bcsg-banner-img{
    width:100% !important;
    max-width:400px !important;

    height:auto !important;
    aspect-ratio:1 / 1 !important;

    margin:0 auto !important;

    border-radius:10px !important;
    overflow:hidden !important;

    box-sizing:border-box !important;
  }

  #bcsg-app .bcsg-banner-img > img{
    width:100% !important;
    height:100% !important;

    max-width:100% !important;

    object-fit:cover !important;
    display:block !important;

    border-radius:10px !important;
  }


  /* Ask Me / floating elements */

  #bcsg-app .bcsg-ask-me,
  #bcsg-app .bcsg-ask,
  #bcsg-app .bcsg-bubble-ask{
    max-width:calc(100vw - 40px) !important;
    box-sizing:border-box !important;
  }

  #bcsg-app .bcsg-bubble,
  #bcsg-app [class*="ask"],
  #bcsg-app [class*="bubble"]{
    max-width:calc(100vw - 40px) !important;
    box-sizing:border-box !important;
  }


  /* Buttons */

  #bcsg-app .bcsg-btn,
  #bcsg-app .bcsg-btn-grad{
    max-width:100% !important;
    box-sizing:border-box !important;
  }


  /* Wrapper */

  #bcsg-app .bcsg-wrap{
    width:100% !important;
    max-width:100% !important;

    padding-left:0 !important;
    padding-right:0 !important;

    box-sizing:border-box !important;
  }


  /* Quiz navigation */

  #bcsg-app .bcsg-quiz-nav{
    width:100% !important;
    padding:0 !important;
    margin-top:24px !important;

    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;

    box-sizing:border-box !important;
  }

  #bcsg-app .bcsg-quiz-nav .bcsg-back{
    padding:10px 0 !important;
    margin:0 !important;
  }

  #bcsg-app .bcsg-quiz-nav .bcsg-btn{
    margin:0 !important;
  }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:480px){

  #bcsg-app .bcsg-hero{
    padding:40px 18px 35px !important;
  }

  #bcsg-app .bcsg-hero-grid{
    gap:28px !important;
  }

  #bcsg-app .bcsg-hero h1{
    font-size:34px !important;
    line-height:1.12 !important;
  }

  #bcsg-app .bcsg-hero .bcsg-lead{
    font-size:16px !important;
    line-height:1.5 !important;
  }

  #bcsg-app .bcsg-banner-img{
    max-width:360px !important;
  }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width:360px){

  #bcsg-app .bcsg-hero{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  #bcsg-app .bcsg-hero h1{
    font-size:30px !important;
  }

  #bcsg-app .bcsg-hero .bcsg-lead{
    font-size:15px !important;
  }

  #bcsg-app .bcsg-eyebrow{
    font-size:10px !important;
    padding:10px 15px !important;
  }

  #bcsg-app .bcsg-banner-img{
    max-width:330px !important;
  }
}


/*---------------css for ecommerce grader page ends here--------------------------*/



/*---------------css for container to be scroll horizontally on mobile view--------------------------*/

@media (max-width:767px){

    .h-scroll{
        display:flex;
        flex-wrap:nowrap !important;
        overflow-x:auto;
        gap:16px;
        padding:10px 16px 18px;
        scroll-snap-type:x mandatory;
        scroll-padding-left:16px;

        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .h-scroll::-webkit-scrollbar{
        display:none;
    }

    .h-scroll > .e-con,
    .h-scroll > .elementor-widget{

        flex:0 0 84%;
        min-width:280px;

        scroll-snap-align:start;

        border-radius:18px;
        background:#fff;

        padding:12px;

        border:1px solid rgba(0,0,0,.06);

        box-shadow:
            0 4px 12px rgba(0,0,0,.04),
            0 12px 28px rgba(0,0,0,.06);

        transition:all .3s ease;
    }

    .h-scroll > .e-con:active,
    .h-scroll > .elementor-widget:active{
        transform:scale(.98);
    }

}
/*-----css for container to be scroll horizontally on mobile view ends here--------*/


/*-----css for related posts to be scroll horizontally on mobile view--------*/
@media (max-width: 767px) {
    .related-posts,
    .related-posts > .e-con-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    .related-posts {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .related-posts > *:not(.e-con-inner),
    .related-posts > .e-con-inner > * {
        flex: 0 0 auto;
        width: 80%;
        max-width: 360px;
    }
}
/*-----css for related posts to be scroll horizontally on mobile view ends here--------*/

@media (max-width: 767px) {
  /* The outer wrapper becomes the ONLY scroll container */
  .pricing-scroll-outer {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    display: block !important;
    max-width: 100% !important;
  }

  /* Let inner wrapper size itself to fit its content, not a fixed guess */
  .pricing-scroll-outer > .e-con-inner {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
  }

  /* Every row inside stays in a row layout, sized to content, no wrap/shrink */
  .pricing-scroll-outer .e-con {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: none !important;
  }

  .pricing-scroll-outer .e-con > * {
    flex-shrink: 0 !important;
    width: 140px !important;   /* set a comfortable fixed width PER COLUMN instead */
  }

  .pricing-scroll-outer {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    display: block !important;
    max-width: 100% !important;

    /* Make the scrollbar visible and styled */
    scrollbar-width: thin;              /* Firefox */
    scrollbar-color: #999 #eee;         /* Firefox: thumb color, track color */
    padding-bottom: 8px;                /* gives the scrollbar room so it doesn't sit on top of content */
  }

  /* Chrome, Edge, Safari (WebKit) */
  .pricing-scroll-outer::-webkit-scrollbar {
    height: 8px;
    display: block !important;
  }

  .pricing-scroll-outer::-webkit-scrollbar-track {
    background: #eee;
    border-radius: 10px;
  }

  .pricing-scroll-outer::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 10px;
  }

  .pricing-scroll-outer::-webkit-scrollbar-thumb:hover {
    background: #666;
  }
}